/* ==================================================================
   JISETF — reset, primitives and the shared page shell

   Everything here is used by every page: the header, the footer, the
   button, the tile, the colour bands. Page-specific work lives in its
   own stylesheet next to this one.
   ================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--text-base);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Entrance animations translate slightly outside their final position.
       In a right-to-left page that overhang lands on the scrolling side, so
       it has to be contained or it flashes a horizontal scrollbar. */
    overflow-x: hidden;
    overflow-x: clip;
}

img, svg { display: block; max-width: 100%; height: auto; }
/* <picture> exists only to offer the browser a choice of file; it should take
   part in layout no more than a comment does. Without this it becomes the
   flex item in place of the <img>, and width rules written for the image
   apply inside a box that has already collapsed. */
picture { display: contents; }
picture > source { display: none; }

h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---------- utilities ------------------------------------------- */
.wrap {
    width: min(var(--wrap), 100% - var(--gutter) * 2);
    margin-inline: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip {
    position: absolute;
    inset-inline-start: 16px;
    top: -100px;
    z-index: 200;
    padding: 12px 20px;
    background: var(--blue);
    color: var(--white);
    font-weight: 600;
    border-radius: 0 0 6px 6px;
    transition: top 0.2s var(--ease);
}
.skip:focus { top: 0; }

/* Numerals, dates and ordinals in the technical register. */
.num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.eyebrow {
    font-size: 12.5px;
    font-weight: 700;
    /* Arabic is a joined script: letter-spacing pulls the glyphs apart
       and breaks the joins, so it is not used on Arabic text. */
    color: var(--slate);
}
/* slate is a light-ground colour; on the dark bands the eyebrow lifts */
.band--blue .eyebrow,
.band--deep .eyebrow,
.band--green .eyebrow { color: rgba(255, 255, 255, 0.72); }

.section-title {
    font-size: var(--text-2xl);
    font-weight: 900;
    line-height: 1.06;
    text-wrap: balance;
}

/* ---------- the tile: one rounded corner, like the logo --------- */
.tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--tile-radius) 0 var(--tile-radius) 0;
    background: var(--paper);
}
.tile--flip { border-radius: 0 var(--tile-radius) 0 var(--tile-radius); }
.tile > picture > img,
.tile > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- colour bands ---------------------------------------- */
.band { padding: var(--band-y) var(--gutter); }
.band--blue  { background: var(--blue);      color: var(--white); }
.band--deep  { background: var(--blue-deep); color: var(--white); }
.band--green { background: var(--green);     color: var(--white); }
.band--gold  { background: var(--gold);      color: var(--ink); }
.band--paper { background: var(--paper);     color: var(--ink); }

/* ---------- buttons --------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    font-weight: 700;
    font-size: var(--text-sm);
    line-height: 1.4;
    border: 2px solid transparent;
    transition: background-color 0.18s var(--ease),
                color 0.18s var(--ease),
                border-color 0.18s var(--ease);
}
.btn--lg { padding: 17px 34px; font-size: var(--text-base); }
.btn--green { background: var(--green); color: var(--white); }
.btn--green:hover { background: var(--green-dark); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: #1d1d1d; }
.btn--outline { border-color: currentColor; }
.btn--outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--white { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--white:hover { background: transparent; color: var(--white); border-color: var(--white); }
.btn--white-ink { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn--white-ink:hover { background: var(--ink); color: var(--white); }
.btn--white-ink:hover img { filter: brightness(0) invert(1); }

/* ==================================================================
   Header
   ================================================================== */
.masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hairline);
}

.masthead__bar {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 44px);
    padding: 10px var(--gutter);
}

.masthead__brand img { width: clamp(56px, 5vw, 72px); height: auto; }

.masthead__nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 30px);
    margin-inline-end: auto;
}
.masthead__nav a {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--slate);
    padding: 8px 2px;
    border-bottom: 2px solid transparent;
    transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.masthead__nav a:hover { color: var(--ink); }
.masthead__nav a[aria-current="page"] {
    color: var(--blue);
    border-bottom-color: var(--gold);
}

.masthead__cta { padding: 11px 22px; }

/* The nav carries its own register link so the mobile menu is complete on its
   own; above the breakpoint the standalone CTA is the one that shows. */
@media (min-width: 901px) {
    .masthead__nav .btn { display: none; }
}

/* the menu button only exists on narrow screens */
.masthead__toggle {
    display: none;
    width: 46px;
    height: 46px;
    margin-inline-start: auto;
    padding: 11px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.masthead__toggle span {
    display: block;
    height: 2px;
    background: var(--ink);
    border-radius: 1px;
    transition: transform 0.22s var(--ease), opacity 0.18s var(--ease);
}
.masthead[data-open="true"] .masthead__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.masthead[data-open="true"] .masthead__toggle span:nth-child(2) { opacity: 0; }
.masthead[data-open="true"] .masthead__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
    .masthead__toggle { display: flex; }
    .masthead__cta { display: none; }

    .masthead__nav {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 8px var(--gutter) 20px;
        background: var(--white);
        border-bottom: 1px solid var(--hairline);
        /* closed by default; the script opens it */
        display: none;
    }
    .masthead[data-open="true"] .masthead__nav { display: flex; }
    .masthead__nav a {
        padding: 13px 0;
        font-size: var(--text-md);
        border-bottom: 1px solid var(--hairline);
    }
    .masthead__nav a[aria-current="page"] { border-bottom-color: var(--hairline); }
    /* the register link is a button, not a nav link: it keeps the button's
       own colour rather than inheriting the nav's muted one */
    .masthead__nav .btn {
        margin-top: 16px;
        border-bottom: 0;
    }
    .masthead__nav .btn--green { color: var(--white); }
}

/* With no script the menu can't be opened, so it stays laid out inline
   and simply wraps — never a button that does nothing. */
.no-js .masthead__toggle { display: none; }
@media (max-width: 900px) {
    .no-js .masthead__nav {
        position: static;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 0 10px;
        border: 0;
        gap: 14px;
    }
    .no-js .masthead__nav a { border-bottom: 0; padding: 6px 0; font-size: var(--text-sm); }
}

/* ==================================================================
   Footer
   ================================================================== */
.sitefoot {
    background: var(--ink);
    color: var(--white);
    padding: clamp(44px, 6vw, 76px) var(--gutter) 26px;
}
.sitefoot__grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.sitefoot h2 { font-size: var(--text-sm); font-weight: 700; margin-bottom: 14px; }
.sitefoot__brand img { width: 132px; height: auto; }
.sitefoot__links { display: flex; flex-direction: column; gap: 9px; }
.sitefoot__links a { color: rgba(255, 255, 255, 0.82); font-size: var(--text-sm); }
.sitefoot__links a:hover { color: var(--gold); }
.sitefoot__contact { display: flex; flex-direction: column; gap: 14px; }
.sitefoot address { color: rgba(255, 255, 255, 0.72); font-size: var(--text-sm); line-height: 1.7; }
.sitefoot__mail { color: var(--gold); font-weight: 700; }

.social { display: flex; gap: 18px; }
.social img { width: 22px; height: 22px; }

.sitefoot__legal {
    margin-top: clamp(30px, 4vw, 50px);
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    text-align: center;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 900px) {
    .sitefoot__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================
   Page banner — every inner page opens with it

   The shape grid is the site's own logo mark, tiled: the same art the
   old site carried at the top of each page.
   ================================================================== */
/* A stacking context, so the marker band below can be sent behind the
   headline without disappearing behind the band's own blue. */
.pagehead {
    position: relative;
    z-index: 0;
    /* The shape grid is anchored: flush to the far edge of the screen and
       flush to the floor of the band, the way the original was drawn. So
       the band carries no padding on that side and none underneath. */
    padding: clamp(44px, 6vw, 104px) 0 0;
    padding-inline-start: var(--gutter);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(20px, 4vw, 64px);
    overflow: hidden;
}

.pagehead__copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* the copy keeps the band's normal bottom padding; only the art
       runs all the way down */
    padding-block-end: clamp(44px, 6vw, 104px);
    max-width: 40rem;
    flex: 1 1 26rem;
}

.pagehead__title {
    font-size: var(--text-3xl);
    font-weight: 900;
    line-height: 1.16;
    text-wrap: balance;
}
/* A marker sweep behind the operative word, rather than a change of
   colour: the band is drawn slightly off-square and off-level, so it
   reads as something struck through the line by hand. */
.pagehead__title em {
    font-style: normal;
    color: var(--ink);
    position: relative;
    /* inline-block so the band can be measured against the line box rather
       than against the font's full ascent-to-descent slab, which for Cairo
       is half again as tall as the letters themselves */
    display: inline-block;
    white-space: nowrap;
}
.pagehead__title em::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0.2em -0.09em 0.1em -0.07em;
    background: var(--gold);
    border-radius: 4px 26px 6px 22px;
    transform: rotate(-1.2deg);
    /* drawn on, from the side the line is read from */
    transform-origin: right center;
    animation: mark-draw 0.62s var(--ease) 0.25s both;
}

@keyframes mark-draw {
    from { transform: rotate(-1.2deg) scaleX(0); }
    to   { transform: rotate(-1.2deg) scaleX(1); }
}

.pagehead__lede {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
    max-width: 54ch;
}

.pagehead__art {
    display: block;
    width: clamp(230px, 34vw, 579px);
    height: auto;
    flex: none;
    align-self: flex-end;
    /* no gap under it: the shapes sit on the band's floor */
    margin-block-end: 0;
}

@media (max-width: 900px) {
    .pagehead {
        flex-direction: column;
        align-items: flex-end;
        padding-inline-start: var(--gutter);
        gap: clamp(24px, 5vw, 44px);
    }
    /* flex-basis is a height once the axis turns, so it has to go or the
       copy reserves 26rem of empty band above the shapes */
    .pagehead__copy { flex: none; padding-block-end: 0; max-width: none; }
    .pagehead__art { width: min(420px, 82%); align-self: flex-end; }
}

/* On the narrowest screens a single long word can still outrun the
   viewport, so the band is allowed to wrap rather than push the page. */
@media (max-width: 480px) {
    .pagehead__title em { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .pagehead__title em::before { animation: none; }
}

/* ==================================================================
   Emphasis, and the bylaws block — shared by the about and rules pages
   ================================================================== */
.mark { color: var(--blue); font-weight: 700; }
/* on the dark bands gold is the emphasis; on paper and white it is blue */
.band--blue .mark,
.band--deep .mark { color: var(--gold); }

.bylaws__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    gap: clamp(30px, 5vw, 76px);
    align-items: center;
}
.bylaws__copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.bylaws__copy p {
    max-width: var(--measure);
    color: rgba(49, 49, 49, 0.86);
    font-size: var(--text-md);
}
.bylaws__copy .btn { margin-top: 10px; }
/* The book mock-up is a transparent PNG that carries its own shadow, so
   it sits on the band with no tile, no frame and no fill behind it. */
.bylaws__cover { aspect-ratio: 1 / 1; }
.bylaws__cover img { width: 100%; height: 100%; object-fit: contain; display: block; }

.bylaws__aside { font-size: var(--text-sm); color: var(--slate); margin-top: 4px; }
.bylaws__aside a { color: var(--blue); font-weight: 700; border-bottom: 2px solid var(--gold); }

@media (max-width: 900px) {
    .bylaws__grid { grid-template-columns: minmax(0, 1fr); }
    /* the cover carries the section faster than the prose does */
    .bylaws__cover { order: -1; }
}

/* ==================================================================
   The closing panel — every page ends with it
   ================================================================== */
.close { padding-bottom: clamp(30px, 4vw, 52px); overflow: hidden; }
.close__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.close__title { margin: 0; }
.ripple {
    position: relative;
    display: block;
    /* the wordmark is 806 × 288 art; this is how wide it is allowed to run */
    width: min(920px, 78vw);
}
.ripple__face,
.ripple__echo {
    width: 100%;
    height: auto;
}
.ripple__echo {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    animation: ripple-fade 2.5s ease-in-out infinite;
}
.ripple__echo--far  { transform: translate(8px, 8px); }
.ripple__echo--near { transform: translate(16px, 16px); animation-delay: 1.25s; }
.ripple__face { position: relative; z-index: 2; }

@keyframes ripple-fade {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

.close__sub {
    font-size: var(--text-lg);
    color: rgba(49, 49, 49, 0.88);
    max-width: 46ch;
    margin-top: 10px;
}
.close__actions { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 32px); justify-content: center; margin-top: 12px; }

/* WhatsApp keeps its own green, as it did before */
.cta-whatsapp {
    background: var(--white);
    color: var(--green);
    border-color: var(--white);
}
.cta-whatsapp:hover { background: var(--green); color: var(--white); border-color: var(--green); }
.cta-whatsapp:hover img { filter: brightness(0) invert(1); }
.cta-register {
    border-color: var(--white);
    color: var(--white);
    border-width: 3px;
}
.cta-register:hover { background: var(--white); color: var(--ink); }

/* ---- the drifting icon band ---- */
.marquee {
    margin-top: clamp(32px, 5vw, 62px);
    /* full-bleed: the band's own gutter would otherwise stop the drift short */
    margin-inline: calc(var(--gutter) * -1);
    overflow: hidden;
    /* the drift is a straight leftward translate, so the strip is laid out
       left-to-right regardless of the page's direction */
    direction: ltr;
    /* pointer-events off: it is scenery, not a control strip */
    pointer-events: none;
}
.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee-drift 38s linear infinite;
}
.marquee__set {
    display: flex;
    align-items: center;
    gap: clamp(22px, 3vw, 44px);
    padding-inline-end: clamp(22px, 3vw, 44px);
}
.marquee__set img {
    width: clamp(26px, 3.4vw, 58px);
    height: auto;
    /* the icon files are ink-black for the cards above; here they run white */
    filter: brightness(0) invert(1);
}
@keyframes marquee-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
}


/* ==================================================================
   Reveal on scroll

   Sections assemble as they come into view rather than appearing all
   at once. The hidden state is gated behind .js on the root element,
   set by an inline script in the head — so with scripting off, or if
   the script fails, everything is simply visible, and there is never
   a frame where painted content is hidden again.
   ================================================================== */
.js [data-reveal] {
    opacity: 0;
    transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);
    transition-delay: calc(var(--rev-i, 0) * 70ms);
    will-change: opacity, transform;
}
/* text and cards rise into place */
.js [data-reveal="up"]   { transform: translateY(22px); }
/* pictures and maps settle rather than travel */
.js [data-reveal="in"]   { transform: scale(0.965); }
/* a heading arrives from the side the line is read from */
.js [data-reveal="side"] { transform: translateX(28px); }

.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==================================================================
   Motion
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}