/* ============================================================
   İDV — the public design system

   Every public page is composed from the blocks below and nothing
   else. A page does not get its own stylesheet section: if a page
   needs a shape that is not here, it belongs here for everyone.

     GROUNDS      .band--white/--paper/--mint/--brand/--deep
     LAYOUT       .stack, .card-grid, .work-list, .prose
     OPENERS      .opener, .section-head (+ --display, --center)
     HERO         .hero (--page, --home)                       §HERO
     CARDS        .card (--link, --dark, --row, --lead, --primary,
                  --dest, --work, --person, --news, --featured,
                  --compact)                                  §CARDS
     MEDIA        .frame (+ ratios, --placeholder), .gallery, .provenance
     TEXT         .quote, .tag, .eyebrow, .charter, .chronicle
     COMPOSITIONS .overture, .founding, .convergence, .pledge,
                  .committee-layout, .future-map, .news-row
     STATES       .empty-state
     FILTERS      .archive-filters, .chip-row, .chip
     FORMS        .contact-grid, .form, .form-field, .form-check,
                  .form-alert, .legal-text
     NAVIGATION   .breadcrumbs, .pagination, .tabs
     CLOSING      .cta-band (--closing, --display)

   THREE BEHAVIOURS, AND NO FOURTH (§INTERACTION):
     A destination card washes into the brand gradient.
     An editorial card's title turns green.
     A record does nothing, because it is not a destination.
   No card draws a line under itself; the only line on the public
   site is the brand rule under the tab you are on.

   Values come from the tokens in globals.css. DESIGN_SYSTEM.md is
   the reference for when to use which block.
   ============================================================ */

/* ============================================================
   GROUNDS

   A band declares its ground and re-declares the on-ground tokens,
   so nothing inside it needs to know whether it sits on light or
   dark. Adjacent bands never share a ground; at most three are dark.
   ============================================================ */
.band { padding-block: var(--band-pad); }
.band--white, .band--paper, .band--mint { --on-band: var(--color-heading); --on-band-soft: var(--color-muted); --surface: var(--color-surface); --surface-border: var(--color-hairline); --surface-shadow: var(--elev-1); }
.band--white { background: var(--neutral-0); }
.band--paper { background: var(--neutral-50); }
.band--mint { background: var(--green-50); --surface-border: var(--green-200); }
.band--brand, .band--deep { --on-band: var(--on-dark); --on-band-soft: var(--on-dark-soft); --surface-border: var(--line-on-dark); --surface-shadow: none; --focus-ring: var(--color-focus-on-dark); color: var(--on-dark); }
.band--brand { background: var(--brand-blue); --surface: rgb(var(--navy-rgb) / .38); }
.band--deep { background: var(--blue-950); --surface: var(--fill-on-dark); }

/* THE BAND MELT — a dark band dissolving into the ground of the next,
   with a hairline thread descending out of it. The brand's own device;
   used on the homepage's Ortak Akıl band. The melt layer
   carries grain so the long dark-to-light ramp has no visible steps. */
/* The dissolve (180–320px) is always taller than a band's padding (56–104px),
   so it is the band's bottom padding. */
.band-melt { position: relative; isolation: isolate; padding-bottom: var(--melt-height); }
.band-melt::after { height: var(--melt-height); position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; content: ""; pointer-events: none; background: var(--grain) 0 0 / 200px 200px, var(--melt-to); background-blend-mode: soft-light, normal; -webkit-mask-image: var(--melt-ramp); mask-image: var(--melt-ramp); }
/* Content above the thread, the thread above the dissolve: where the
   thread meets a card it passes behind it rather than through it. */
.band-melt > * { position: relative; z-index: 3; }
/* The thread: a faint hairline (::before), and the pulse of green that
   runs down it — its own element, moved by transform only, so the motion
   stays on the compositor. */
.band-melt::before, .band-melt > .band-melt__pulse { width: 1px; height: var(--melt-thread-height); position: absolute; z-index: 2; bottom: 0; left: 50%; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, rgb(var(--black-rgb) / 1) 42%, rgb(var(--black-rgb) / 0) 96%); mask-image: linear-gradient(to bottom, rgb(var(--black-rgb) / 1) 42%, rgb(var(--black-rgb) / 0) 96%); }
.band-melt::before { content: ""; background-image: linear-gradient(to bottom, rgb(var(--blue-100-rgb) / .22), rgb(var(--blue-100-rgb) / 0)); }
.band-melt > .band-melt__pulse { overflow: hidden; }
.band-melt__pulse::before { height: 38%; position: absolute; top: 0; right: 0; left: 0; content: ""; background-image: linear-gradient(to bottom, var(--green-300), rgb(var(--green-300-rgb) / 0)); transform: translateY(-90%); }
@media (prefers-reduced-motion: no-preference) {
  .band-melt__pulse::before { animation: thread-descend var(--melt-thread-cycle) var(--ease-out) infinite; }
}
/* THE ARCS (AS-3) — a band that is nothing but words takes the faint
   contour lines of the İDV mark's curve, spreading from its top centre
   and fading out before they reach its edges, over the brand's blue and
   green arriving as light. Lines, not paper; sparse, never crowded. */
.ground-arcs { position: relative; isolation: isolate; overflow: hidden; }
.ground-arcs::before { position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none; background: var(--arcs) 50% 0 / max(1600px, 100%) auto no-repeat, radial-gradient(58% 46% at 50% -10%, rgb(var(--brand-blue-rgb) / .06), rgb(var(--brand-blue-rgb) / 0) 68%), radial-gradient(54% 42% at 50% 110%, rgb(var(--brand-green-rgb) / .06), rgb(var(--brand-green-rgb) / 0) 70%); -webkit-mask-image: radial-gradient(75% 95% at 50% 0%, rgb(var(--black-rgb) / 1) 35%, rgb(var(--black-rgb) / 0) 88%); mask-image: radial-gradient(75% 95% at 50% 0%, rgb(var(--black-rgb) / 1) 35%, rgb(var(--black-rgb) / 0) 88%); }
/* After a hero melt the arcs do not start on the band's top edge — they
   surface out of the melted ground over the first stretch, so the hero,
   the melt and the band read as one continuous field (R2-3). */
.hero-melt + .ground-arcs::before { -webkit-mask-image: linear-gradient(to bottom, rgb(var(--black-rgb) / 0), rgb(var(--black-rgb) / 1) var(--arcs-surface)), radial-gradient(75% 95% at 50% 0%, rgb(var(--black-rgb) / 1) 35%, rgb(var(--black-rgb) / 0) 88%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, rgb(var(--black-rgb) / 0), rgb(var(--black-rgb) / 1) var(--arcs-surface)), radial-gradient(75% 95% at 50% 0%, rgb(var(--black-rgb) / 1) 35%, rgb(var(--black-rgb) / 0) 88%); mask-composite: intersect; }

@keyframes thread-descend { 0%, 10% { transform: translateY(-90%); } 70%, 100% { transform: translateY(220%); } }

/* ============================================================
   LAYOUT
   ============================================================ */
.stack { display: grid; align-content: start; gap: var(--gap-stack); }

.card-grid { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); list-style: none; }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid--people { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); list-style: none; }

.prose { max-width: var(--w-read); color: var(--on-band-soft, var(--color-muted)); }
.prose > p + p { margin-top: var(--space-5); }
.prose strong { color: var(--on-band, var(--color-heading)); }
.prose > .text-link, .prose > .button { margin-top: var(--space-5); }

/* ============================================================
   OPENERS — how a band begins (D3)

   THE SENTENCE UNDER A TITLE IS ALWAYS UNDER IT, never beside it.

   opener() opens the first band of a page. Its statement is a slogan,
   so it is centred and set wide enough to run as two or three full
   lines rather than a column of short ones; its prose follows under it,
   centred; an optional object (a panel, a notice) follows that.

   section_head() opens every band after it: the title, the sentence
   under it, and — on the far side, on the text's last baseline — one
   action. --center centres the text and puts the action under it.
   Exactly one band per page may be --display.
   ============================================================ */
.opener { display: grid; justify-items: center; row-gap: var(--space-6); text-align: center; }
.opener__statement { max-width: 36ch; color: var(--on-band, var(--color-heading)); text-wrap: balance; }
.opener__body { max-width: 62ch; color: var(--on-band-soft, var(--color-muted)); }
.opener__body > p + p { margin-top: var(--space-4); }
.opener__aside { width: 100%; margin-top: var(--space-6); text-align: left; }
.opener__aside > .empty-state { margin-inline: auto; }

.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-5) var(--gap-split); }
.section-head__text { display: grid; justify-items: start; row-gap: var(--space-4); }
.section-head__title { max-width: 30ch; color: var(--on-band, var(--color-heading)); }
.section-head__note { max-width: 60ch; color: var(--on-band-soft, var(--color-muted)); }
.section-head__note p { max-width: 60ch; }
.section-head__note p + p { margin-top: var(--space-3); }
.section-head__action { display: flex; align-items: center; justify-self: end; }
.section-head--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.section-head--center .section-head__text { justify-items: center; }
.section-head--center .section-head__action { justify-self: center; }
.section-head--display .section-head__title { max-width: 26ch; }

/* A word that names a THING — a panel's register, a person's office, a
   card's category. Never a label above a section heading. */
.eyebrow { display: inline-flex; align-self: flex-start; color: var(--accent-on-light); }

.band--brand .eyebrow, .band--deep .eyebrow { color: var(--accent-on-dark); }

/* THE PLACEHOLDER TAG. Anything that stands in for content the
   foundation has not supplied yet says so, in words. */
.tag { display: inline-flex; align-items: center; gap: var(--space-2); padding: 3px var(--space-3); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-meta); }

/* On navy the outlined button drops its white fill. */
.band--brand .button--secondary, .band--deep .button--secondary, .hero .button--secondary { border-color: var(--line-on-dark-strong); background: transparent; color: var(--on-dark); }

/* ============================================================
   HERO — one component, two variants                     §HERO

   --home (the masthead) and --page (every other page, articles and
   status pages included). Both are dark, both end on a clean edge,
   and both keep the same rhythm: breadcrumb or kicker → title →
   lead → actions or fact line, at the same distances.
   ============================================================ */
.hero { --focus-ring: var(--color-focus-on-dark); --on-band: var(--on-dark); --on-band-soft: var(--on-dark-soft); --hero-gap-title: var(--space-6); --hero-gap-lead: var(--space-6); --hero-gap-end: var(--space-8); position: relative; isolation: isolate; background-color: var(--blue-950); color: var(--on-dark); }
.hero__title { max-width: 22ch; color: var(--on-dark); }
.hero__lead { max-width: 58ch; margin-top: var(--hero-gap-lead); color: var(--on-dark-soft); }
/* The same device as the breadcrumbs: no line begins with a dot. */
.hero__meta { --sep: calc(4px + var(--space-3)); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); margin-top: var(--hero-gap-end); margin-inline-start: calc(var(--sep) * -1); clip-path: inset(calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--sep)); color: var(--accent-on-dark); }
.hero__meta > * { display: inline-flex; align-items: center; gap: var(--space-3); }
.hero__meta > *::before { width: 4px; height: 4px; flex: none; border-radius: var(--radius-full); background: currentColor; content: ""; opacity: .6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--hero-gap-end); }
.hero .breadcrumbs { margin-bottom: var(--hero-gap-title); color: var(--on-dark-muted); }

/* --page. The navy carries a restrained brand glow in the top corner and
   a grain layer that dithers the 8-bit steps a dark ramp otherwise shows
   as bands. It ends on a clean edge, like the masthead. */
.hero--page { padding-block: clamp(48px, 5.5vw, 88px); background-image: radial-gradient(120% 150% at 94% -12%, rgb(var(--teal-rgb) / .38), rgb(var(--teal-rgb) / 0) 58%), linear-gradient(162deg, var(--blue-900) 0%, var(--blue-950) 66%); }
.hero--page::after { position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none; background-image: var(--grain); background-size: 200px 200px; opacity: .07; mix-blend-mode: soft-light; }
.hero--with-nav { padding-bottom: 0; }

/* THE HERO MELT (GN-2) — the hero dissolving into the next band's ground.
   The ground's colour — reached through the brand's pale blue, so the
   middle of the ramp reads as light rather than grey fog — under a mask
   whose alpha rises on the eased 12-stop ramp. The grain that stops the
   ramp banding is a layer of its own, held to the dark middle and gone
   before the ground is reached: at the foot the melt IS the next band's
   flat colour, so there is no textured strip for the band to cut off
   (R2-3, "sert bir kırılım"). Inside a
   page hero it is laid over the hero's own field, so it starts from the
   hero itself; after the masthead it stands alone on the masthead's navy.
   No text is ever over it, so the hero's contrast is untouched. */
.hero-melt { --melt-to: var(--neutral-0); --melt-tint: var(--blue-300); position: relative; height: var(--hero-melt); pointer-events: none; }
.hero-melt::before, .hero-melt::after { position: absolute; inset: 0; content: ""; }
.hero-melt::before { background: linear-gradient(to bottom, var(--melt-tint) 18%, var(--melt-to) 88%); -webkit-mask-image: var(--melt-ramp); mask-image: var(--melt-ramp); }
.hero-melt::after { background: var(--grain) 0 0 / 200px 200px; mix-blend-mode: soft-light; opacity: .35; -webkit-mask-image: var(--melt-grain-span); mask-image: var(--melt-grain-span); }
.hero-melt--paper { --melt-to: var(--neutral-50); }
.hero-melt--mint { --melt-to: var(--green-50); }
.hero-melt--brand { --melt-to: var(--brand-blue); --melt-tint: var(--brand-blue); }
.hero-melt--standalone { background: var(--blue-950); }
.hero--page.has-melt { padding-bottom: 0; }
.hero--page.has-melt:not(.hero--with-nav) > .container { padding-bottom: var(--space-6); }
.hero--with-nav .hero-melt { margin-top: calc(var(--space-1) * -1); }
/* The band a melt has already led into needs less air above it. */
.hero + .band, .hero-melt + .band { padding-top: calc(var(--band-pad) * .6); }
/* The standalone 500 page: the hero alone, filling the window. */
.hero--status { min-height: 100dvh; display: grid; align-items: center; }
.hero__logo { width: 164px; margin-bottom: var(--space-12); }
.hero--article .container { text-align: center; }
.hero--article .breadcrumbs ol { justify-content: center; }
.hero--article .hero__title { max-width: 30ch; margin-inline: auto; text-wrap: balance; }
.hero--article .hero__lead { max-width: 62ch; margin-inline: auto; text-wrap: pretty; }
.hero--article .hero__meta { justify-content: center; margin-inline-start: 0; clip-path: none; }
.hero--article .hero__meta > :first-child::before { display: none; }

/* The Kurumsal sibling row along the hero's base: the section, not an
   index of the page. The rule marks the page you are on. */
.hero__nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: clamp(40px, 4.5vw, 64px); border-top: 1px solid var(--line-on-dark); }
.hero__nav a { min-height: 52px; display: inline-flex; align-items: center; position: relative; color: var(--on-dark-muted); white-space: nowrap; transition: color var(--motion-fast) var(--ease-out); }
.hero__nav a::after { height: 2px; position: absolute; right: 0; bottom: -1px; left: 0; content: ""; background: var(--brand-line-dark); border-radius: 1px; opacity: 0; }
.hero__nav a[aria-current="page"] { color: var(--on-dark); }
.hero__nav a[aria-current="page"]::after { opacity: 1; }
.hero__nav a:focus-visible { color: var(--on-dark); outline-offset: -3px; }

/* --home: THE MASTHEAD. The foundation speaks from a navy field on the
   left; the photograph is a plate on the right that dissolves into it
   on the eased melt curve. A level-2 heading (the page's <h1> is the hidden line above the frame); site.js replaces its contents. */
.masthead { min-height: min(calc(92svh - var(--header-height)), 760px); display: flex; flex-direction: column; overflow: hidden; }
.masthead__frame { flex: 1; display: grid; position: relative; isolation: isolate; }
.masthead__plate { width: 54%; position: absolute; z-index: -1; inset-block: 0; right: 0; background: var(--blue-900); -webkit-mask-image: var(--plate-mask-x); mask-image: var(--plate-mask-x); }
/* One navy at a falling alpha — never two hues blending, which greys a
   daylight photograph. Dark enough on the left for the heading to sit on
   it at every width; light enough on the right to keep the photograph. */
.masthead__plate::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgb(var(--navy-rgb) / .92) 0%, rgb(var(--navy-rgb) / .86) 10%, rgb(var(--navy-rgb) / .72) 20%, rgb(var(--navy-rgb) / .56) 30%, rgb(var(--navy-rgb) / .42) 40%, rgb(var(--navy-rgb) / .3) 52%, rgb(var(--navy-rgb) / .22) 66%, rgb(var(--navy-rgb) / .18) 100%); }
.masthead__layer { position: absolute; inset: 0; opacity: 0; transition: opacity var(--masthead-crossfade) var(--ease-out); }
.masthead__layer[data-active="true"] { opacity: 1; }
.masthead__layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--image-position); }
.masthead__grid { display: grid; grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr); align-items: center; padding-block: var(--space-16); }
.masthead__copy { grid-column: 1; }
/* Its own formatting context, so the lines' reveal masks (a padding and a
   matching negative margin) cannot collapse into the gap below the title. */
.masthead__title { display: flow-root; max-width: 16ch; }
.masthead__line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.masthead__line-inner { display: block; }
.masthead__title em { font-style: normal; }
.masthead__title-link { display: block; color: inherit; }
.masthead__arrow { display: none; }
.masthead__copy .hero__lead { max-width: 44ch; }
/* The register: four subjects readable at rest, not carousel dots. The
   green rule filling across the active one is the autoplay's progress. */
.masthead__register { position: relative; z-index: 1; border-top: 1px solid var(--line-on-dark); background: rgb(var(--navy-rgb) / .55); }
.masthead__register-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.masthead__chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.masthead__chapter { width: 100%; min-height: 76px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: relative; padding: var(--space-4) var(--space-6) var(--space-4) 0; color: rgb(var(--white-rgb) / .66); text-align: left; cursor: pointer; transition: color var(--motion-normal) var(--ease-out); }
.masthead__chapter-rule { height: 2px; position: absolute; top: -1px; right: var(--space-6); left: 0; background: var(--green-400); transform: scaleX(0); transform-origin: left; }
.masthead__chapter:focus-visible, .masthead__chapter[aria-current="true"] { color: var(--on-dark); }
.masthead__chapter:focus-visible { outline-offset: -3px; }
.masthead__chapter[aria-current="true"] .masthead__chapter-rule { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .masthead__chapter:hover { color: var(--on-dark); }
}
@media (prefers-reduced-motion: no-preference) {
  .masthead__chapter[data-running="true"] .masthead__chapter-rule { animation: chapter-progress var(--masthead-autoplay) linear forwards; }
  .masthead[data-phase="in"] .masthead__line-inner { animation: masthead-line var(--masthead-line-in) var(--ease-out) calc(var(--line) * var(--masthead-line-stagger)) backwards; }
  .masthead[data-phase="in"] .hero__lead, .masthead[data-phase="in"] .hero__actions { animation: masthead-support var(--masthead-support-in) var(--ease-out) var(--masthead-support-delay) backwards; }
  .masthead[data-phase="out"] .masthead__copy { animation: masthead-out var(--masthead-exit) var(--ease-out) forwards; }
}
@keyframes chapter-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes masthead-line { from { transform: translateY(110%); } }
@keyframes masthead-support { from { opacity: 0; transform: translateY(12px); } }
@keyframes masthead-out { to { opacity: 0; } }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
/* Every crumb carries its separator in front; the list is pulled left by
   exactly one separator and clipped there, so the separator that would
   open a wrapped line is never drawn (a line never begins with "/"). */
.breadcrumbs ol { --sep: calc(var(--space-2) * 2 + .5em); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 0; margin-inline-start: calc(var(--sep) * -1); clip-path: inset(calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--sep)); list-style: none; color: inherit; }
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li::before { width: var(--sep); flex: none; text-align: center; content: "/"; opacity: .6; }
.breadcrumbs a { min-height: 24px; display: inline-flex; align-items: center; transition: color var(--motion-fast) var(--ease-out); }
.breadcrumbs [aria-current="page"] { color: var(--on-band, var(--color-heading)); }
.breadcrumbs a:focus-visible { color: var(--on-band, var(--color-heading)); }

/* ============================================================
   CARDS — one family (D4)                                 §CARDS

     [.card__media]  a photograph, or its placeholder
     [.icon-badge]   only where a glyph names a real subject
     .card__body     [.card__eyebrow | .card__meta] .card__title
                     [.card__text] [.card__list]
     [.card__action] the destination's verb, pinned to the base

   Every card on the site is this object: information and area cards,
   committees, projects, news and events, people, the destinations
   that close a page. What differs is the SURFACE (white, navy) and
   the BEHAVIOUR (§INTERACTION). What never differs:

   THE SHADOW (AS-6). A blue shadow under every card. On hover a green
   one arrives from the right and completes it, so the shadow becomes
   the brand's own blue-to-green. The green is the box-shadow of a
   transparent ::after the size of the card: it paints only OUTSIDE the
   card, and only its opacity moves.
   ============================================================ */
.card { --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-card-green); position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column; align-items: stretch; padding: var(--card-pad); border: 1px solid var(--surface-border, var(--color-hairline)); border-radius: var(--radius-md); background: var(--surface, var(--color-surface)); box-shadow: var(--card-shadow); color: var(--color-heading); }
.card::after { position: absolute; z-index: -2; inset: 0; border-radius: inherit; content: ""; box-shadow: var(--card-shadow-hover); opacity: 0; pointer-events: none; }
a.card { color: inherit; }
.card__body { display: flex; flex-direction: column; min-width: 0; }
.card__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--space-6); border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; background: var(--blue-50); }
/* A news or event cover is stored 16:9 (R2-1) and shown 16:9 wherever
   the entry appears: the stream, the archive, the list and the record. */
.card--news .card__media { aspect-ratio: 16 / 9; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--focus, 50% 50%); }
/* A shipped sample picture says so, on the picture. */
.card__eyebrow { margin-bottom: var(--space-3); color: var(--accent-on-light); }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); color: var(--color-meta); }
.card__kind { color: var(--accent-on-light); }
.card__title { color: var(--color-heading); overflow-wrap: anywhere; }
.card__text { margin-top: var(--space-3); color: var(--color-muted); }
/* Card copy is two to four lines: balanced, so no line is left with one word. */
.card__text, .card__list li { text-wrap: balance; }
.card__list { display: grid; gap: var(--space-2); margin-top: var(--space-5); list-style: none; }
.card__list li { position: relative; padding-left: var(--space-5); color: var(--color-body); }
.card__list li::before { width: 10px; height: 2px; position: absolute; top: .72em; left: 0; border-radius: 1px; background: var(--green-500); content: ""; }
.card--columns .card__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
.card__action { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-6); color: var(--color-link); }
.card__action .icon { width: var(--space-5); height: var(--space-5); }

/* The same object on a navy band: a lighter blue shadow, a brighter
   green, so the completion still reads on the dark ground. */
.band--brand .card, .band--deep .card { --card-shadow: var(--shadow-card-dark); --card-shadow-hover: var(--shadow-card-dark-green); }
.band--brand .card__title, .band--deep .card__title, .band--brand .card__name, .band--deep .card__name { color: var(--on-dark); }
.band--brand .card__text, .band--deep .card__text, .band--brand .card__list li, .band--deep .card__list li, .band--brand .card__role, .band--deep .card__role { color: var(--on-dark-soft); }
.band--brand .card__eyebrow, .band--deep .card__eyebrow { color: var(--accent-on-dark); }
.band--brand .card__action, .band--deep .card__action { color: var(--on-dark); }

/* THE ICON BADGE — a 52px pale-green disc with the subject's glyph. Only
   where the glyph names a real institutional subject. It inverts with
   the card when the surface washes. */
.icon-badge { width: 52px; height: 52px; display: grid; place-items: center; flex: none; margin-bottom: var(--space-6); border: 1px solid rgb(var(--green-300-rgb) / .38); border-radius: var(--radius-full); background: var(--green-50); color: var(--green-600); }
.subject-icon { width: 24px; height: 24px; display: block; }
.band--brand .icon-badge, .band--deep .icon-badge, .card--dark .icon-badge { border-color: var(--line-on-dark); background: var(--fill-on-dark); color: var(--accent-on-dark); }

/* --dark: a navy field holding the same anatomy. On a light band it keeps
   the band's blue shadow; on a navy band, the navy band's. */
.card--dark { --surface: var(--blue-950); --surface-border: var(--blue-950); color: var(--on-dark); }
.card--dark .card__title { color: var(--on-dark); }
.card--dark .card__text, .card--dark .card__list li { color: var(--on-dark-soft); }
.card--dark .card__eyebrow { color: var(--accent-on-dark); }
.card--dark .card__action { color: var(--on-dark); }

/* --lead: the first focus area — the navy surface is its only difference. */
.card--lead .card__title { max-width: 20ch; }

/* --row: badge beside the copy, action beneath, one left edge (the
   committees on the homepage). */
.card--row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: clamp(20px, 2.2vw, 28px); padding: var(--card-pad-lg); }
.card--row .icon-badge { grid-row: 1 / span 2; margin-bottom: 0; }
.card--row .card__body, .card--row .card__action { grid-column: 2; }
.card--row .card__title { max-width: var(--w-note); }
.card--row .card__text { max-width: 52ch; }

/* --primary: the lead direction; its action sits on its own rule. */
.card--primary .card__title { max-width: 20ch; }
.card--primary .card__text { max-width: 44ch; }

/* --dest: a page to go to next — its glyph, its name, the page's own
   line, and the arrow. The glyph and the arrow share the top row, so the
   name keeps the card's full measure however many stand in a row. */
.card--dest { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "badge action" "body body"; align-content: start; align-items: center; row-gap: var(--space-5); text-align: start; }
.card--dest .icon-badge { grid-area: badge; margin-bottom: 0; }
.card--dest .card__body { grid-area: body; align-self: start; }
.card--dest .card__text { margin-top: var(--space-2); }
.card--dest .card__action { grid-area: action; margin-top: 0; padding-top: 0; }
.card--dest .card__action .icon { width: var(--space-6); height: var(--space-6); }
.card-grid--dest { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }

/* --goals: three to a row, and a short last row shares the width — five
   goals are three and two, never three and a lone one. */
.card-grid--goals { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.card-grid--goals > * { grid-column: span 2; }
.card-grid--goals > :nth-last-child(2):nth-child(3n+1), .card-grid--goals > :last-child:nth-child(3n+2) { grid-column: span 3; }
.card-grid--goals > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.card-grid--goals .card__title { max-width: 34ch; }

/* --work: one focus area, committee, project direction or principle
   as a full-width navy row (FA-1, KM-1, PR-1, HK-2) — the picture on the
   left, the glyph, title, sub-description and programme on the right.
   The same block on every page that lists work, so those pages are one
   layout. A record: the resting shadow only. */
.work-list { display: grid; gap: clamp(20px, 2.2vw, 32px); }
.card--work { --card-shadow-hover: var(--shadow-card-green-lg); padding: 0; }
.card--work.has-media { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.card--work .card__media { min-height: clamp(260px, 24vw, 340px); aspect-ratio: auto; margin: 0; border-radius: calc(var(--radius-md) - 1px) 0 0 calc(var(--radius-md) - 1px); }
.card__panel { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(28px, 3.6vw, 56px) clamp(24px, 4vw, 64px); }
.card--work .card__body { width: 100%; }
.card--work .card__title { max-width: 40ch; }
.card--work .card__text { max-width: 62ch; }
.card--work .card__text + .card__text { margin-top: var(--space-3); }
.card--work .card__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-8); margin-top: var(--space-6); }

/* --person: a founder or trustee (KR-1, MH-1). The portrait takes the
   4:5 crop; a person without one gets their initials, in the brand
   gradient, on the brand's pale field of the same shape — never a stock
   face, and the row stays aligned either way. A record: no response. */
.card--person { padding: var(--space-6); --card-pad: var(--space-6); }
.card__portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5); border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; background: var(--blue-50); }
.card__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--focus, 50% 20%); }
.card__portrait--initials { display: grid; place-items: center; background: radial-gradient(90% 70% at 20% 10%, rgb(var(--brand-blue-rgb) / .08), rgb(var(--brand-blue-rgb) / 0) 70%), linear-gradient(160deg, var(--blue-50), var(--green-50)); }
.card__initials { color: var(--brand-blue); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .card__initials { -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(112deg, var(--brand-blue) 12%, var(--teal-600) 55%, var(--brand-green) 92%); color: transparent; }
}
.card--person .card__body { flex: 1 1 auto; }
.card__honorific { display: block; margin-bottom: var(--space-2); color: var(--color-meta); }
.card__name { color: var(--color-heading); overflow-wrap: break-word; hyphens: manual; }
.card__role { margin-top: var(--space-2); color: var(--color-muted); overflow-wrap: break-word; }
.card__bio { margin-top: var(--space-3); color: var(--color-body); }
.card--dark .card__name { color: var(--on-dark); }
/* A person with a page of their own: the card is a destination; the name is
   its link, stretched over the whole card. */
.card__stretch { color: inherit; }
.card__stretch::after { position: absolute; z-index: 1; inset: 0; content: ""; border-radius: inherit; }
.card--person.card--link { cursor: pointer; }
.card--person.card--link:has(.card__stretch:focus-visible)::before { opacity: 1; }
.card--person.card--link:has(.card__stretch:focus-visible) :is(.card__name, .card__role, .card__honorific, .card__initials) { color: var(--on-dark); }
.card__stretch:focus-visible { outline: none; }
.card--person.card--link:has(.card__stretch:focus-visible) { outline: 2px solid var(--focus-ring, var(--color-focus)); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .card--person.card--link:hover :is(.card__name, .card__role, .card__honorific) { color: var(--on-dark); }
  .card--person.card--link:hover .card__initials { background: none; -webkit-text-fill-color: var(--on-dark); color: var(--on-dark); }
}
.card--dark .card__role, .card--dark .card__bio { color: var(--on-dark-soft); }
.card--dark .card__honorific { color: var(--accent-on-dark); }

/* --person-compact: a founder — the initials (or portrait) in a disc
   beside the name. Three to a row with room around each (R1-3): the
   longest names ("Taner Hacı Arif KAPTANOĞLU") keep to two lines. */
.card-grid--founders { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.card--person-compact { flex-direction: row; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-7); }
.card--person-compact .card__portrait { width: 56px; height: 56px; flex: none; aspect-ratio: 1; margin: 0; border: 1px solid rgb(var(--green-300-rgb) / .38); border-radius: var(--radius-full); }

/* --chair: the chair of the board opens the grid on a row of its own,
   centred, two columns wide, on navy, the portrait (or initials) beside
   the name; the members follow in the grid below (R1-4). The width is
   two of the grid's columns and the gap between them. */
.card--chair { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--gap-grid) / 2); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: 0; }
/* The row sets the height; the frame fills its column rather than taking
   its own 4:5, which would overflow the column. */
.card--chair .card__portrait { min-height: clamp(240px, 26vw, 380px); aspect-ratio: auto; margin: 0; border-radius: calc(var(--radius-md) - 1px) 0 0 calc(var(--radius-md) - 1px); }
.card--chair .card__portrait--initials { background: radial-gradient(90% 70% at 20% 10%, rgb(var(--green-400-rgb) / .16), rgb(var(--green-400-rgb) / 0) 70%), linear-gradient(160deg, var(--blue-900), var(--blue-950)); }
.card--chair .card__initials { background-image: linear-gradient(112deg, var(--blue-200) 10%, var(--green-300) 90%); }
.card--chair .card__body { justify-content: center; padding: clamp(24px, 3vw, 44px); }
.card--chair .card__role { order: -1; margin: 0 0 var(--space-4); color: var(--accent-on-dark); }

/* --news: a news item or an event — the photograph (or its placeholder,
   so every card in a grid has the same frame) above, the record below. */
.card--news .card__text { max-width: 58ch; }
/* An event's time and place, under its text. */
.card__facts { display: grid; gap: var(--space-2); margin-top: var(--space-4); color: var(--color-body); list-style: none; }
.card__facts li { display: flex; align-items: flex-start; gap: var(--space-2); }
.card__facts .ui-icon { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--accent-on-light); }
/* --compact: an entry in the list beside the lead one — the same record
   with its 16:9 picture beside it, never without one (AS-10, R2-1). */
.card--compact { display: grid; grid-template-columns: clamp(120px, 11.5vw, 168px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-5); }
.card--compact .card__media { grid-row: 1 / span 2; align-self: start; aspect-ratio: 16 / 9; margin: 0; border-radius: var(--radius-sm); }
.card--compact .frame--placeholder { padding: var(--space-2); }
.card--compact .frame--placeholder .tag { display: none; }
.card--compact .card__body, .card--compact .card__action { grid-column: 2; }
.card--compact .card__action { align-self: end; padding-top: var(--space-4); }
/* The homepage's lead entry keeps its cover's 16:9 (R2-1) and so is shorter
   than the list beside it: it holds its place while the list scrolls past,
   as the committees' statement and the contact details do, rather than
   stretching its picture or ending in an empty field. */

/* ============================================================
   MEDIA

   Three ratios for the whole site: 16:9 (news and event covers, on the
   card and on the record), 3:2 (features, the founding photograph), 4:5
   (portraits). --focus is the
   object-position hook. A missing image is a labelled placeholder.
   ============================================================ */
.frame { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--blue-50); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--focus, 50% 50%); }
.frame--editorial { aspect-ratio: 16 / 9; }

.frame--placeholder { display: grid; place-items: center; align-content: center; gap: var(--space-3); padding: var(--space-4); background: linear-gradient(135deg, var(--blue-50), var(--green-50)); color: var(--blue-300); text-align: center; }
.frame--placeholder svg { width: clamp(28px, 14%, 44px); height: auto; }
.frame--placeholder .tag { background: rgb(var(--white-rgb) / .8); }

/* Provenance: a green stem beside a caption, carrying only what the
   record holds. Never on decoration. */
.provenance { display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.provenance::before { background: var(--brand-green); content: ""; }
.provenance p { color: var(--color-meta); }

/* THE GALLERY: two or more images placed one after another in an
   article. */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.gallery > figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); }

/* ============================================================
   TEXT BLOCKS
   ============================================================ */
/* THE QUOTE — a highlighted line, serif, on a green stem. */
.quote { max-width: 34ch; padding-left: var(--space-6); border-left: 2px solid var(--brand-green); color: var(--on-band, var(--color-heading)); }

/* THE CHARTER — a long text published word for word (Gayemiz,
   charter_panel()): one card of the family as a reading panel, the
   article role at a reading measure behind the quote's green stem, the
   words before the first comma in the accent. A record: it rests. */
.charter { max-width: calc(var(--w-read) + 2 * var(--card-pad-lg)); margin-inline: auto; padding: var(--card-pad-lg); }
.charter__text { padding-left: var(--space-6); border-left: 2px solid var(--brand-green); color: var(--color-text); text-wrap: pretty; }
.charter__text + .charter__text { margin-top: var(--space-5); }

/* THE CHRONICLE — a history in paragraphs (Tarihçemiz, chronicle()): a
   reading column on the same green stem, the first paragraph in the
   heading colour, the founding date in the accent and never broken. */
.chronicle { max-width: calc(var(--w-read) + var(--space-6)); margin-inline: auto; padding-left: var(--space-6); border-left: 2px solid var(--brand-green); }
.chronicle__text { color: var(--color-body); text-wrap: pretty; }
.chronicle__text:first-child { color: var(--color-heading); }
.chronicle__text + .chronicle__text { margin-top: var(--space-6); }
.chronicle time { white-space: nowrap; }

/* THE EMPTY STATE — states the fact and what will fill it, and carries
   the placeholder tag, so an absence reads as designed rather than
   broken. */
.empty-state { display: grid; justify-items: start; gap: var(--space-3); max-width: 64ch; padding: var(--card-pad-lg); border: 1px solid var(--green-200); border-radius: var(--radius-lg); background: var(--green-50); }
.empty-state .tag { margin-bottom: var(--space-1); border-color: var(--green-200); }
.empty-state h2, .empty-state h3 { color: var(--color-heading); }
.empty-state p { color: var(--color-muted); }

/* ============================================================
   CLOSING BAND — every page ends by saying where to go next

   --closing (HK-5): the title holds the left of the band while the
   destinations stand beside it as full rows — glyph, name, the page's
   own line, and the arrow in its own ring. Each row is a destination
   card, so it washes into the brand gradient like every other one.
   ============================================================ */
.cta-band__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--gap-split); }
.cta-band__intro { position: relative; }
.cta-band__title { max-width: var(--w-statement); color: var(--on-band, var(--color-heading)); }
.cta-band__note { max-width: 42ch; margin-top: var(--space-5); color: var(--color-muted); }
.cta-band__list { display: grid; gap: var(--space-4); }
.cta-band__list .card--dest { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "badge body action"; column-gap: clamp(20px, 2.4vw, 32px); padding: clamp(22px, 2.2vw, 30px) clamp(22px, 2.6vw, 36px); }
.cta-band__list .card--dest .card__body { align-self: center; }
.cta-band__list .card--dest .card__action { width: 48px; height: 48px; justify-content: center; border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-full); }
/* --display: the homepage's departure — one statement and one button. */

/* ============================================================
   CONTACT AND FORMS (IL-1)

   The channels on the left, each with its glyph; the form on the right
   as a card of the one family (a record: it rests, it does not wash).
   An empty channel is not drawn at all; with no social address the
   social block is not drawn either.
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: var(--gap-split); }
.contact-info { position: sticky; top: calc(var(--header-height) + var(--space-8)); }
.contact-info__title { max-width: var(--w-statement); color: var(--color-heading); }
.contact-info__note { max-width: 44ch; margin-top: var(--space-5); color: var(--color-muted); }
.contact-channels { display: grid; gap: var(--space-3); margin-top: var(--space-8); list-style: none; }
.contact-channel { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-card); }
.contact-channel__icon { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border: 1px solid rgb(var(--green-300-rgb) / .38); border-radius: var(--radius-full); background: var(--green-50); color: var(--green-600); }
.contact-channel__icon .ui-icon { width: 20px; height: 20px; }
.contact-channel__body { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.contact-channel__label { width: 100%; color: var(--color-meta); }
.contact-channel__value { color: var(--color-heading); overflow-wrap: anywhere; }
a.contact-channel__value { color: var(--color-link); }
.contact-social { margin-top: var(--space-8); }
.contact-social__title { color: var(--color-heading); }
.contact-social__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); list-style: none; }
.contact-social__item { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-full); background: var(--color-surface); color: var(--brand-blue); }
.contact-social__icon { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: var(--radius-full); background: var(--blue-50); }
.contact-social__icon .ui-icon { width: 16px; height: 16px; }
.contact-social__handle { color: var(--color-meta); }

.contact-form { padding: var(--card-pad-lg); }
.contact-form__title { color: var(--color-heading); }
.contact-form__note { max-width: 58ch; margin-top: var(--space-3); color: var(--color-muted); }
.form { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.form-field { display: grid; gap: var(--space-2); min-width: 0; }
.form-field label { color: var(--color-heading); }
.form-field__optional { color: var(--color-meta); }
.form-field input, .form-field textarea { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-heading); transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
.form-field textarea { min-height: 168px; resize: vertical; }
.form-field input:focus-visible, .form-field textarea:focus-visible { border-color: var(--green-600); outline: 3px solid rgb(var(--green-400-rgb) / .35); outline-offset: 0; }
.form-field [aria-invalid="true"], .form-check [aria-invalid="true"] { border-color: var(--color-danger); }
.form-field [aria-invalid="true"]:focus-visible { border-color: var(--color-danger); outline-color: rgb(var(--danger-rgb) / .3); }
.form-field__error { color: var(--color-danger); }
.form-check { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-1) var(--space-3); padding: var(--space-4); border: 1px solid var(--color-hairline); border-radius: var(--radius-sm); background: var(--color-surface-alt); }
.form-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--brand-blue); }
.form-check label { color: var(--color-body); }
.form-check label a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.form-check .form-field__error { grid-column: 2; }
.form-check.is-invalid { border-color: var(--color-danger-line); background: var(--color-danger-bg); }
/* The honeypot: out of sight and out of reach, never display:none, which
   some bots read as a signal. */
.form-trap { width: 1px; height: 1px; position: absolute; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form__actions { display: flex; justify-content: flex-start; }
.form-alert { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border: 1px solid; border-radius: var(--radius-sm); scroll-margin-top: calc(var(--header-height) + var(--space-8)); }
.form-alert--success { border-color: var(--color-success-line); background: var(--color-success-bg); color: var(--color-success); }
.form-alert--error { border-color: var(--color-danger-line); background: var(--color-danger-bg); color: var(--color-danger-strong); }
.form-alert:focus { outline: none; }
.form-alert:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* THE LEGAL TEXT — one reading column. */
.legal-text { max-width: 76ch; margin-inline: auto; }
.legal-text__title { color: var(--color-heading); }
.legal-text .article-content { margin-top: var(--space-8); }
.legal-text__back { margin-top: var(--space-10); }

/* ============================================================
   NAVIGATION BLOCKS — tabs and pagination
   ============================================================ */
/* Tabs: the same signal as the header — colour under the pointer, the
   brand rule under the current one. */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-6); border-bottom: 1px solid var(--surface-border, var(--color-hairline)); }
.tabs a { min-height: 48px; display: inline-flex; align-items: center; position: relative; color: var(--color-muted); transition: color var(--motion-fast) var(--ease-out); }
.tabs a::after { height: 2px; position: absolute; right: 0; bottom: -1px; left: 0; content: ""; background: var(--brand-line); border-radius: 1px; opacity: 0; }
.tabs a[aria-current="page"] { color: var(--color-heading); }
.tabs a[aria-current="page"]::after { opacity: 1; }
.tabs a:focus-visible { color: var(--color-heading); outline-offset: -3px; }

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); }
.pagination ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.pagination a, .pagination span[aria-current], .pagination .pagination__gap { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding-inline: var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-link); transition: color var(--motion-fast), border-color var(--motion-fast), background-color var(--motion-fast); }
.pagination a { border-color: var(--surface-border, var(--color-hairline)); background: var(--surface, var(--color-surface)); }
.pagination span[aria-current] { background: var(--brand-blue); color: var(--on-dark); }
.pagination .pagination__gap { color: var(--color-meta); }
.pagination .icon { width: var(--space-4); height: var(--space-4); }
.pagination__prev .icon { transform: rotate(180deg); }
.pagination a:focus-visible { border-color: var(--green-500); color: var(--green-800); }

/* ============================================================
   EDITORIAL — the archive, the homepage stream, the article
   ============================================================ */
.archive-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.archive-bar__count { color: var(--color-meta); }
/* The archive's filters (HE-1, AS-10): when an event is (Yaklaşan,
   Geçmiş) and which category, as chips. The current chip is filled. */
.archive-filters { display: grid; gap: var(--space-4); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { min-height: 40px; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-full); background: var(--color-surface); color: var(--brand-blue); }
.chip__count { min-width: 22px; display: inline-grid; place-items: center; padding: 0 var(--space-1); border-radius: var(--radius-full); background: var(--blue-50); color: var(--brand-blue); }
.chip[aria-current="page"] { border-color: var(--brand-blue); background: var(--brand-blue); color: var(--on-dark); }
.chip[aria-current="page"] .chip__count { background: rgb(var(--white-rgb) / .16); color: var(--on-dark); }
.chip:focus-visible { border-color: var(--green-500); }
@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-current="page"]):hover { border-color: var(--green-300); background: var(--green-50); color: var(--green-800); }
}

.editorial-grid { align-items: stretch; row-gap: var(--gap-grid); }
/* Haberler, and a homepage with one entry: lead cards, one under another. */
.editorial-grid--stack { grid-template-columns: minmax(0, 1fr); }
/* The homepage's entries: equal columns, each card the full height of the
   row so the titles, dates and actions line up. */
.news-row > li { display: grid; }
/* The lead entry runs across the grid as one card: photograph left, the
   record right. Every other entry is the same card at one size. */
.editorial-grid > .card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto; column-gap: var(--card-pad-lg); padding: 0; }
.editorial-grid > .card--featured .card__media { grid-row: 1 / span 2; align-self: center; margin: 0; border-radius: calc(var(--radius-md) - 1px) 0 0 calc(var(--radius-md) - 1px); }
.editorial-grid > .card--featured .card__body { align-self: end; padding: var(--card-pad-lg) var(--card-pad-lg) 0 0; }
.editorial-grid > .card--featured .card__action { padding: var(--space-6) var(--card-pad-lg) var(--card-pad-lg) 0; }


/* Every detail cover fills the same 16:9 frame whatever the source file's
   size: the width is fixed (not the picture's), the image covers it. */
.article-cover { width: 100%; max-width: var(--w-article-wide); margin: 0 auto; }
.article-cover .frame, .article-cover figcaption { width: 100%; }
.article-body { max-width: var(--w-article); margin-inline: auto; }
/* What the record adds after the text: place, actions, taxonomy. */
.article-foot { display: grid; justify-items: start; gap: var(--space-5); margin-top: var(--space-12); }
.article-foot__place { display: flex; align-items: center; gap: var(--space-2); color: var(--color-heading); }
.article-foot__place .ui-icon { width: 16px; height: 16px; flex: none; color: var(--accent-on-light); }
.article-foot__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.article-foot__actions .ui-icon { width: 18px; height: 18px; flex: none; }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip--sm { min-height: 32px; padding: var(--space-1) var(--space-3); }
.article-content { overflow-wrap: anywhere; color: var(--color-body); }
.article-content > * + * { margin-top: var(--article-gap); }
.article-content { text-wrap: pretty; hyphens: manual; }
.article-content h2, .article-content h3 { color: var(--color-heading); }
.article-content h2 { margin-top: var(--space-12); text-wrap: balance; }
.article-content h3 { margin-top: var(--space-10); text-wrap: balance; }
.article-content h2 + *, .article-content h3 + * { margin-top: var(--space-4); }
.article-content a { color: var(--color-link); text-decoration: underline; text-decoration-color: var(--color-hairline-strong); text-underline-offset: 4px; transition: color var(--motion-fast), text-decoration-color var(--motion-fast); }
.article-content a:focus-visible { color: var(--color-link-hover); }
.article-content ul, .article-content ol { padding-left: var(--space-6); }
.article-content li + li { margin-top: var(--space-2); }
.article-content blockquote { margin-block: var(--space-10); margin-inline: 0; padding-left: var(--space-6); border-left: 3px solid var(--brand-green); color: var(--color-heading); }
.article-content blockquote > * + * { margin-top: var(--space-3); }
.article-content blockquote .quote-by { color: var(--color-meta); }
.article-content img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.article-content figure { margin-block: var(--space-10); }
.article-content figcaption { margin-top: var(--space-3); color: var(--color-meta); }
.article-content hr { margin-block: var(--space-10); border: 0; border-top: 1px solid var(--color-hairline); }
/* What the visual editor adds (2026-10-07): alignment, pictures that sit
   beside the text, tables, video, underline and strike. */
.article-content .ta-center { text-align: center; }
.article-content .ta-right { text-align: right; }
.article-content .ta-justify { text-align: justify; hyphens: auto; }
.article-content li > p { margin: 0; }
.article-content li > p + p, .article-content li > ul, .article-content li > ol { margin-top: var(--space-2); }
.article-content .article-figure--left, .article-content .article-figure--right { width: min(46%, 340px); margin-block: var(--space-2) var(--space-4); }
.article-content .article-figure--left { float: left; margin-right: var(--space-8); }
.article-content .article-figure--right { float: right; margin-left: var(--space-8); }
.article-content .article-figure--center { width: min(72%, 520px); margin-inline: auto; }
.article-content .article-figure--center figcaption { text-align: center; }
.article-content::after { content: ""; display: block; clear: both; }
.article-content h2, .article-content h3, .article-content hr, .article-content table, .article-content blockquote, .article-content .gallery, .article-content .article-video, .article-content .table-scroll { clear: both; }
.table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-hairline); border-radius: var(--radius-sm); }
.table-scroll:focus-visible { outline-offset: 2px; }
.article-content table { width: 100%; min-width: 480px; border-collapse: collapse; color: var(--color-body); }
.article-content th, .article-content td { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-hairline); text-align: left; vertical-align: top; }
.article-content th { background: var(--blue-50); color: var(--color-heading); }
.article-video { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); background: var(--blue-950); }
.article-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article-content u { text-underline-offset: 3px; }
/* Pictures, video, galleries and tables may stand wider than the text. */
.article-content > figure:not([class*="article-figure--"]), .article-content > .gallery, .article-content > .article-video, .article-content > .table-scroll {
  position: relative; left: 50%; width: min(var(--w-article-wide), calc(100vw - var(--gutter) * 2)); max-width: none; transform: translateX(-50%);
}
@media (max-width: 767px) {
  .article-content .article-figure--left, .article-content .article-figure--right, .article-content .article-figure--center { float: none; width: 100%; margin-inline: 0; }
}

/* The admin's preview of an unpublished entry. */
.preview-band { position: sticky; top: 0; z-index: 1000; margin: 0; padding: var(--space-2) var(--space-4); background: var(--color-warning); color: var(--on-dark); text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .article-content a:hover { color: var(--color-link-hover); text-decoration-color: currentColor; }
  .pagination a:hover { border-color: var(--green-500); color: var(--green-800); }
  .tabs a:hover, .hero__nav a:hover { color: var(--on-band, var(--color-heading)); }
  .breadcrumbs a:hover { color: var(--on-band, var(--color-heading)); }
}

/* ============================================================
   HOMEPAGE COMPOSITIONS

   The homepage is its own composition from the same grounds, openers
   and cards. Band order and grounds: masthead (navy) · overture
   (white, textured) · 1988 (paper) · activities (white) · ORTAK AKIL
   (brand, the page's one display head) · committees (mint) ·
   projects (white, navy cards) · news (paper) · closing (navy).
   ============================================================ */
.overture { text-align: center; }
.overture__grid { display: grid; justify-items: center; row-gap: clamp(22px, 2.4vw, 34px); }
.overture__statement { max-width: 27ch; color: var(--color-heading); }
.overture__aside > p { max-width: 62ch; color: var(--color-muted); }
.overture__aside > p + p { margin-top: var(--space-4); }
.overture__hub { display: grid; justify-items: center; gap: var(--space-6); margin-top: clamp(48px, 5vw, 76px); padding-top: var(--space-8); border-top: 1px solid var(--color-hairline); }
.overture__hub-copy { max-width: 58ch; color: var(--color-muted); }

/* Six focus areas on a twelve-column field, narrow and wide, flipped on
   every row: x·2x, 2x·x, x·2x. One anatomy at two measures. */
.activity-field { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-grid); }
.activity-field > .card { padding: var(--card-pad-lg); }
.activity-field > .card--narrow { grid-column: span 4; }
.activity-field > .card--wide { grid-column: span 8; }
.activity-field > .card:not(.card--lead) .card__title { max-width: 20ch; }
.activity-field > .card:not(.card--lead) .card__text { max-width: 46ch; margin-top: var(--space-4); }
/* The wide measure, at the same specificity and after the narrow one, so
   it applies: before, the :not() rules above outranked it and every wide
   card set its text at the narrow measure, half the card empty. */
.activity-field > .card--wide:not(.card--lead) .card__title { max-width: 28ch; }
.activity-field > .card--wide:not(.card--lead) .card__text { max-width: 64ch; }

/* THE FOUNDING (D5, AS-4) — one component on the homepage, Hakkımızda
   and Tarihçemiz. The year IS the design: the reading serif at figure
   scale, painted with the brand gradient over a faint engraved outline
   of itself, the record on a short green rule under it; the statement
   and its prose; the photograph as a tall plate beside it. */
.founding__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: var(--gap-split); }
.founding__copy { min-width: 0; }
.founding__year { position: relative; isolation: isolate; display: inline-block; margin-left: -.05em; color: var(--brand-blue); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .founding__year { -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(112deg, var(--brand-blue) 8%, var(--teal-600) 52%, var(--brand-green) 94%); color: transparent; }
}
.founding__year::before { position: absolute; z-index: -1; top: .045em; left: .045em; content: attr(data-year); color: transparent; -webkit-text-stroke: 1px rgb(var(--brand-blue-rgb) / .2); pointer-events: none; }
.founding__meta { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); color: var(--accent-on-light); }
.founding__meta i { width: var(--space-12); height: 2px; flex: none; border-radius: 1px; background: linear-gradient(90deg, var(--green-500), rgb(var(--green-400-rgb) / 0)); }
.founding__title { max-width: 26ch; margin-top: clamp(24px, 2.6vw, 40px); color: var(--color-heading); }
.founding__text { max-width: 58ch; margin-top: var(--space-4); color: var(--color-muted); }
.founding__action { margin-top: var(--space-5); }
.founding__media { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* ORTAK AKIL (AS-7, R2-2) — the site's most careful motion, and the idea
   it exists to state. Knowledge from the academy (blue) and experience
   from the field (green) arrive along three converging streams each and
   meet in one plane painted with the brand gradient.

   One gesture, then rest (the owner asked for "daha basit, daha premium,
   sade"): a single feathered light glides along each side's three lanes
   at once, the two arrive together, the plane breathes once, and the
   figure is still until the next cycle. No particles, rings or sheen.

   The light is the lanes drawn a second time, bright, inside a window
   whose edges are feathered by a mask. The window travels; the drawing
   inside it counter-travels on the same keyframes and the same curve, so
   it stands still and the light follows every lane's curve exactly.
   Transform and opacity only. It plays only while on screen (site.js
   sets .is-live) and not at all under reduced motion, when the lanes
   simply stand. */
.convergence__figure { --lane-h: 240px; position: relative; display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(0, 2.6fr) minmax(0, 3.2fr) minmax(0, 2.6fr) minmax(0, 2.5fr); align-items: center; }
.convergence__node { position: relative; z-index: 1; display: grid; justify-items: start; gap: var(--space-2); }
.convergence__node--business { justify-items: end; text-align: right; }
.convergence__node strong { color: var(--on-dark); }
.convergence__node > span:last-child { color: var(--on-dark-soft); }
.convergence__glyph { position: relative; width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: var(--space-3); border: 1px solid var(--line-on-dark-strong); border-radius: var(--radius-full); background: var(--fill-on-dark); color: var(--blue-100); }
.convergence__node--business .convergence__glyph { color: var(--green-300); }

.convergence__lanes { position: relative; height: var(--lane-h); }
.convergence__lanes svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.convergence__lanes path { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.convergence__lanes--academic path { stroke: rgb(var(--blue-300-rgb) / .34); }
.convergence__lanes--business path { stroke: rgb(var(--green-300-rgb) / .34); }
.convergence__lanes .lane-v { display: none; }

/* The light: .lane-light fades, __window travels, __track holds still. */
.lane-light { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.lane-light__window, .lane-light__track { position: absolute; inset: 0; display: block; }
.lane-light__window { -webkit-mask-image: var(--lane-light-x); mask-image: var(--lane-light-x); transform: translateX(-50%); }
.lane-light__track { transform: translateX(50%); }
.convergence__lanes--business .lane-light__window { transform: translateX(50%); }
.convergence__lanes--business .lane-light__track { transform: translateX(-50%); }
.convergence__lanes .lane-light path { stroke-width: 2; }
.convergence__lanes--academic .lane-light path { stroke: var(--blue-100); }
.convergence__lanes--business .lane-light path { stroke: var(--green-300); }
.convergence__lanes--academic .lane-light svg { filter: drop-shadow(0 0 6px rgb(var(--blue-300-rgb) / .9)); }
.convergence__lanes--business .lane-light svg { filter: drop-shadow(0 0 6px rgb(var(--green-400-rgb) / .9)); }

.convergence__core { position: relative; z-index: 2; display: grid; }
.convergence__plane { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: var(--space-2); padding: clamp(28px, 2.8vw, 42px) var(--space-6); border-radius: var(--radius-lg); background: var(--brand-wash); box-shadow: 0 0 0 1px rgb(var(--white-rgb) / .16), 0 24px 60px -24px rgb(var(--green-400-rgb) / .55); text-align: center; }
.convergence__plane strong { color: var(--on-dark); }
.convergence__plane > span:last-child { color: rgb(var(--white-rgb) / .88); }
/* The breath: a soft light rising inside the plane as the two arrive. */
.convergence__plane::after { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(80% 130% at 50% 50%, rgb(var(--white-rgb) / .22), rgb(var(--white-rgb) / 0) 72%); opacity: 0; }

/* What the meeting makes, flowing on down the band toward its thread —
   drawn, not animated: the band's own thread carries the motion on. */
.convergence__outflow { position: absolute; z-index: 0; top: 50%; left: 50%; width: 1px; height: calc(var(--lane-h) / 2 + var(--gap-stack) + var(--space-16)); background: linear-gradient(to bottom, rgb(var(--green-300-rgb) / .4), rgb(var(--green-300-rgb) / 0)); }

@media (prefers-reduced-motion: no-preference) {
  .lane-light { animation: lane-light-fade var(--converge-cycle) var(--ease-converge) infinite both; }
  .convergence__lanes--academic .lane-light__window { animation: lane-light-ltr var(--converge-cycle) var(--ease-converge) infinite both; }
  .convergence__lanes--academic .lane-light__track { animation: lane-light-rtl var(--converge-cycle) var(--ease-converge) infinite both; }
  .convergence__lanes--business .lane-light__window { animation: lane-light-rtl var(--converge-cycle) var(--ease-converge) infinite both; }
  .convergence__lanes--business .lane-light__track { animation: lane-light-ltr var(--converge-cycle) var(--ease-converge) infinite both; }
  .convergence__plane::after { animation: plane-breathe var(--converge-cycle) var(--ease-out) infinite both; }
  /* Everything waits, at rest, until the band is on screen. */
  .convergence:not(.is-live) .convergence__figure *, .convergence:not(.is-live) .convergence__figure *::after { animation-play-state: paused; }
}
/* The glide takes the first 56% of the cycle; the rest is stillness. */
@keyframes lane-light-ltr { 0% { transform: translateX(-50%); } 56%, 100% { transform: translateX(50%); } }
@keyframes lane-light-rtl { 0% { transform: translateX(50%); } 56%, 100% { transform: translateX(-50%); } }
@keyframes lane-light-fade { 0% { opacity: 0; } 14%, 40% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes plane-breathe { 0%, 40% { opacity: 0; } 58% { opacity: 1; } 90%, 100% { opacity: 0; } }

/* Below 1024 the meeting stands upright: the academy above, the field
   below, the light running down and up into the plane — at tablet width
   the row left the plane too narrow for its own words. */
@media (max-width: 1023px) {
  .convergence__figure { --lane-h: 120px; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .convergence__node, .convergence__node--business { justify-items: center; text-align: center; }
  .convergence__lanes { width: min(100%, 320px); }
  .convergence__core { width: min(100%, 320px); }
  .convergence__lanes .lane-h { display: none; }
  .convergence__lanes .lane-v { display: inline; }
  .lane-light__window { -webkit-mask-image: var(--lane-light-y); mask-image: var(--lane-light-y); transform: translateY(-50%); }
  .lane-light__track { transform: translateY(50%); }
  .convergence__lanes--business .lane-light__window { transform: translateY(50%); }
  .convergence__lanes--business .lane-light__track { transform: translateY(-50%); }
  .convergence__outflow { display: none; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .convergence__lanes--academic .lane-light__window, .convergence__lanes--business .lane-light__track { animation-name: lane-light-down; }
  .convergence__lanes--academic .lane-light__track, .convergence__lanes--business .lane-light__window { animation-name: lane-light-up; }
}
@keyframes lane-light-down { 0% { transform: translateY(-50%); } 56%, 100% { transform: translateY(50%); } }
@keyframes lane-light-up { 0% { transform: translateY(50%); } 56%, 100% { transform: translateY(-50%); } }

/* THE DEPARTURE (AS-11): the homepage's last word, centred on the brand's
   own gradient, the button right under the statement, the İDV mark
   cropped behind it. */
.cta-band--display { --on-band: var(--on-dark); --focus-ring: var(--color-focus-on-dark); background: var(--brand-wash); color: var(--on-dark); text-align: center; }
/* Doubled class: it must outrank the corner placement .brandfield gives. */
.brandfield.cta-band--display .brand-mark { width: min(62vw, 720px); top: 50%; right: -8%; left: auto; transform: translateY(-50%); color: rgb(var(--white-rgb) / .05); }
.cta-band__stack { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(28px, 3vw, 40px); padding-block: clamp(16px, 3vw, 48px); }
.cta-band--display .cta-band__title { max-width: 24ch; color: var(--on-dark); text-wrap: balance; }
/* On the gradient's green end the usual light accent falls under 3:1;
   a paler green keeps the phrase green and above AA for large text. */
.cta-band--display .accent--light { color: var(--green-200); }

/* Committees: the mint is the committees' ground, and the statement holds
   its place while the three cards scroll past it. */
.committee-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: var(--gap-split); }
.committee-intro { position: sticky; top: calc(var(--header-height) + var(--space-8)); }
.committee-intro__title { max-width: var(--w-statement); color: var(--color-heading); }
.committee-intro > p { max-width: 42ch; margin-top: var(--space-6); color: var(--color-muted); }
.committee-intro > .button { margin-top: var(--space-8); }
.committee-list { display: grid; gap: var(--space-4); }

/* Project directions: one dominant beside two supporting, navy cards on a
   white band. */
.future-map { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: var(--gap-grid); }
.future-map .card--primary { grid-row: span 2; padding: var(--card-pad-lg); }
.future-map .card--dark:not(.card--primary) { --surface: var(--blue-800); --surface-border: var(--blue-800); }
.card--primary .card__body { margin-block: auto; padding-block: var(--space-8); }
.card--primary .card__action { align-self: stretch; margin-top: 0; padding-top: var(--space-6); }

/* THE PLEDGE (MV-1) — a named commitment and what it holds: the name,
   the statement and its sentence on the left; the record cards on the
   right. Misyon on white and Vizyon on navy are the same block twice. */
.pledge__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: var(--gap-split); }
.pledge__intro { position: sticky; top: calc(var(--header-height) + var(--space-8)); }
.pledge__name { margin-top: var(--space-6); color: var(--on-band, var(--color-heading)); }
.pledge__statement { max-width: 24ch; margin-top: var(--space-5); color: var(--on-band, var(--color-heading)); text-wrap: balance; }
.pledge__text { max-width: 44ch; margin-top: var(--space-5); color: var(--on-band-soft, var(--color-muted)); }
.pledge__detail-title { max-width: 30ch; color: var(--on-band, var(--color-heading)); }
.pledge__detail-note { max-width: 56ch; margin-top: var(--space-3); color: var(--on-band-soft, var(--color-muted)); }
.pledge__detail .card-grid { margin-top: var(--space-8); }

/* Cropped brand geometry: the real mark, one instance per page, never
   behind body copy. */
.brandfield { position: relative; overflow: hidden; isolation: isolate; }
.brandfield .brand-mark { width: 480px; height: auto; position: absolute; z-index: -1; top: -80px; left: -170px; display: block; color: rgb(var(--white-rgb) / .06); pointer-events: none; }
.brandfield .brand-mark :is(path, polygon, circle) { fill: currentColor; stroke: none; }

/* ============================================================
   INTERACTION                                        §INTERACTION

   EVERY card answers the pointer on the one hover timing of globals.css
   (D2, AS-9): it waits a beat, arrives slowly, leaves without waiting.
   And every card's shadow completes toward green (AS-6). Beyond that,
   two behaviours (D4; the owner's decision of 28 September 2026):

   A  DESTINATION  (.card--link, news and events included) — the surface
      washes into the brand gradient; its type, meta, badge and arrow
      invert to white; the arrow slides. The wash covers the border too,
      so no ring and no line is drawn around or under the card. A
      picture stays as it is.
   B  RECORD       (a person, an unlinked card) — the shadow only, the
      same blue shadow as every other card. No wash and no arrow: it is
      not a destination.

   Keyboard focus gets the SAME response as hover, declared outside the
   pointer query; hover sits inside it, so a tap never sticks.
   ============================================================ */
.card, .card::before, .card::after, .card .icon-badge, .card .icon, .card .card__list li::before, .card .card__facts .ui-icon,
.card :is(.card__eyebrow, .card__title, .card__text, .card__list li, .card__action, .card__kind, .card__meta, .card__facts) {
  transition-duration: var(--hover-out);
  transition-timing-function: var(--ease-hover);
  transition-delay: 0s;
}
.card { transition-property: background-color, border-color; }
.card::before, .card::after { transition-property: opacity; }
.card .icon-badge { transition-property: color, background-color, border-color; }
.card .icon { transition-property: transform; }
.card .card__list li::before { transition-property: background-color; }
.card .card__facts .ui-icon { transition-property: color; }
.card :where(.card__eyebrow, .card__title, .card__text, .card__list li, .card__action, .card__kind, .card__meta, .card__facts) { transition-property: color; }
.card .card__action { transition-property: color, border-color; }

.card:focus-visible, .card:focus-visible::before, .card:focus-visible::after,
.card:focus-visible .icon-badge, .card:focus-visible .icon, .card:focus-visible .card__list li::before, .card:focus-visible .card__facts .ui-icon,
.card:focus-visible :is(.card__eyebrow, .card__title, .card__text, .card__list li, .card__action, .card__kind, .card__meta, .card__facts) {
  transition-duration: var(--hover-in);
  transition-delay: var(--hover-delay);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover, .card:hover::before, .card:hover::after,
  .card:hover .icon-badge, .card:hover .icon, .card:hover .card__list li::before, .card:hover .card__facts .ui-icon,
  .card:hover :is(.card__eyebrow, .card__title, .card__text, .card__list li, .card__action, .card__kind, .card__meta, .card__facts) {
    transition-duration: var(--hover-in);
    transition-delay: var(--hover-delay);
  }
}

/* A destination's wash layer. */
.card--link::before { position: absolute; z-index: -1; inset: -1px; content: ""; border-radius: inherit; background: var(--brand-wash); opacity: 0; }

/* Every card: the shadow completes. */
.card:focus-visible::after { opacity: 1; }
/* A: the wash. */
.card--link:focus-visible { border-color: transparent; }
.card--link:focus-visible::before { opacity: 1; }
.card--link:focus-visible :is(.card__eyebrow, .card__title, .card__text, .card__list li, .card__action, .card__kind, .card__meta, .card__facts, .card__facts .ui-icon) { color: var(--on-dark); }
.card--link:focus-visible .card__list li::before { background: rgb(var(--white-rgb) / .7); }
.card--link:focus-visible .icon-badge { border-color: rgb(var(--white-rgb) / .42); background: var(--fill-on-dark-strong); color: var(--on-dark); }
.card--link:focus-visible .card__action .icon { transform: translateX(var(--space-1)); }
.cta-band__list .card--dest:focus-visible .card__action { border-color: rgb(var(--white-rgb) / .42); }
.card--link:focus-visible { --focus-ring: var(--color-focus); }

@media (hover: hover) and (pointer: fine) {
  .card:hover::after { opacity: 1; }
  .card--link:hover { border-color: transparent; }
  .card--link:hover::before { opacity: 1; }
  .card--link:hover :is(.card__eyebrow, .card__title, .card__text, .card__list li, .card__action, .card__kind, .card__meta, .card__facts, .card__facts .ui-icon) { color: var(--on-dark); }
  .card--link:hover .card__list li::before { background: rgb(var(--white-rgb) / .7); }
  .card--link:hover .icon-badge { border-color: rgb(var(--white-rgb) / .42); background: var(--fill-on-dark-strong); color: var(--on-dark); }
  .card--link:hover .card__action .icon { transform: translateX(var(--space-1)); }
  .cta-band__list .card--dest:hover .card__action { border-color: rgb(var(--white-rgb) / .42); }
}

/* ============================================================
   PAGE TRANSITIONS (AS-1)

   Between two pages of the site the browser crossfades them itself
   (cross-document view transitions): the old page leaves in a blink,
   the new one rises into place, and the header — logo included — stays
   where it is; the logo gives one soft pulse as the new page arrives.
   Nothing waits for the transition: the new page is drawn the moment
   it is ready, and the transition only decides how it appears.

   Where the browser cannot do this, boot.js adds .page-enter and the
   new page's content simply fades up. Under reduced motion: neither.
   ============================================================ */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.site-header__inner > .logo { view-transition-name: site-logo; }
::view-transition-old(root) { animation: page-out var(--page-out) var(--ease-page) both; }
::view-transition-new(root) { animation: page-in var(--page-in) var(--ease-page) both; }
::view-transition-group(site-header) { animation-duration: var(--page-in); }
::view-transition-old(site-logo) { animation: none; opacity: 0; }
::view-transition-new(site-logo) { animation: logo-pulse var(--page-in) var(--ease-page) both; }
.page-enter #main-content { animation: page-in var(--page-in) var(--ease-page) both; }
@keyframes page-out { to { opacity: 0; transform: translateY(calc(var(--space-2) * -1)); } }
@keyframes page-in { from { opacity: 0; transform: translateY(var(--space-3)); } }
@keyframes logo-pulse { from { opacity: .55; filter: saturate(1.5) brightness(1.1); } to { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ============================================================
   THE WELCOME (IN-1)

   The first page of a visit opens on the medal (partials/intro.php):
   it arrives out of a soft blur, its spun silver turns so the light
   lobes swing across it, a band of light crosses the metal, a glint
   catches the gold edge, and the whole ground lifts away. Between
   pages the LIGHT version plays: the same medal, small, one crossing
   of light, over a veil that sits under the held header and is gone
   in --intro-light — the transition still feels quick (AS-1).

   boot.js sets .intro-full or .intro-light on <html> before the first
   paint; site.js removes it when the ground's animation ends, or at
   once with .intro-leaving when the visitor acts. The ground never
   takes a pointer. Nothing is shown without that class, and under
   reduced motion nothing is shown at all.
   ============================================================ */
.intro { display: none; }
.medal { width: clamp(236px, 52vmin, 460px); aspect-ratio: 1; position: relative; isolation: isolate; border-radius: var(--radius-full); box-shadow: var(--shadow-medal); }
.medal > * { position: absolute; inset: 0; border-radius: var(--radius-full); }
.medal__rim { background: var(--metal-gold); }
.medal__face, .medal__depth { inset: 1.4%; }
.medal__face { background: var(--metal-spun), var(--metal-silver); }
.medal__depth { background: var(--metal-depth); box-shadow: var(--shadow-medal-face); }
.medal__art { width: 100%; height: 100%; overflow: visible; }
.medal__ring { fill: none; stroke: var(--brand-blue); }
.medal__legend, .medal__enamel { fill: var(--brand-blue); }
.medal__globe { fill: var(--brand-green); }
.medal__lift { flood-color: var(--neutral-0); flood-opacity: .7; }
.medal__sink { flood-color: var(--blue-950); flood-opacity: .45; }
.medal__sheen { overflow: hidden; mix-blend-mode: screen; }
.medal__sheen::before { position: absolute; inset: -10% -60%; content: ""; background: var(--metal-sheen); transform: translateX(-45%); }
.medal__glint { width: 26%; height: 26%; inset: auto; top: -1%; left: 69%; border-radius: 0; background: var(--metal-glint); opacity: 0; transform: scale(0); }
@media (prefers-reduced-motion: no-preference) {
  .intro-full .intro, .intro-light .intro { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; background: radial-gradient(60% 60% at 50% 46%, var(--neutral-0), var(--neutral-25) 72%); }
  .intro-full .intro { z-index: var(--z-intro); animation: intro-ground var(--intro-full) var(--ease-intro) both; }
  .intro-full .medal { animation: medal-arrive var(--intro-full) var(--ease-intro) both; }
  .intro-full .medal__face, .intro-full .medal__rim { animation: medal-turn var(--intro-full) var(--ease-intro) both; }
  .intro-full .medal__sheen::before { animation: medal-sheen var(--intro-full) var(--ease-intro) both; }
  .intro-full .medal__glint { animation: medal-glint var(--intro-full) var(--ease-intro) both; }
  /* The light version: under the header, small, one crossing of light. */
  .intro-light .intro { z-index: var(--z-intro-light); animation: intro-ground-light var(--intro-light) var(--ease-page) both; }
  .intro-light .medal { width: clamp(88px, 13vmin, 128px); animation: medal-arrive-light var(--intro-light) var(--ease-page) both; }
  .intro-light .medal__face, .intro-light .medal__rim { animation: medal-turn var(--intro-light) var(--ease-page) both; }
  .intro-light .medal__sheen::before { animation: medal-sheen var(--intro-light) var(--ease-page) both; }
  /* A visitor who acts does not wait for the welcome to finish. */
  .intro-leaving .intro { animation: intro-leave var(--page-in) var(--ease-page) both; }
}
@keyframes intro-ground { 0%, 74% { opacity: 1; } 100% { opacity: 0; } }
@keyframes intro-ground-light { 0%, 28% { opacity: 1; } 100% { opacity: 0; } }
@keyframes intro-leave { to { opacity: 0; } }
@keyframes medal-arrive {
  0% { opacity: 0; transform: scale(.86) rotate(-6deg); filter: blur(var(--reveal-blur)); }
  28% { opacity: 1; transform: none; filter: blur(0); }
  76% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.08); filter: blur(var(--reveal-blur)); }
}
@keyframes medal-arrive-light {
  0% { opacity: 0; transform: scale(.9); }
  30% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(1.04); }
}
@keyframes medal-turn { from { transform: rotate(-40deg); } to { transform: rotate(35deg); } }
@keyframes medal-sheen { 0%, 24% { transform: translateX(-45%); } 62%, 100% { transform: translateX(45%); } }
@keyframes medal-glint {
  0%, 56% { opacity: 0; transform: scale(0) rotate(0deg); }
  64% { opacity: 1; transform: scale(1) rotate(45deg); }
  78%, 100% { opacity: 0; transform: scale(.2) rotate(90deg); }
}

/* ============================================================
   SCROLL REVEAL (GN-1)

   site.js marks the parts of the page below the fold with
   [data-reveal] and adds .is-revealed as each comes into view, one
   after another (--reveal-delay). Opacity, transform and filter only.
   Nothing is marked without JavaScript or under reduced motion, so
   nothing here can hide a word from a visitor who has neither.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(var(--reveal-distance)); filter: blur(var(--reveal-blur)); }
  [data-reveal].is-revealed { animation: reveal-in var(--reveal-duration) var(--ease-reveal) var(--reveal-delay, 0ms) both; }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); filter: blur(var(--reveal-blur)); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* ============================================================
   RESPONSIVE — recomposition, not a narrower desktop
   ============================================================ */
@media (max-width: 1279px) {
  .masthead__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .card-grid--founders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}

@media (max-width: 1023px) {
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .section-head__action { justify-self: start; }
  .section-head--center .section-head__action { justify-self: center; }
   .cta-band__title { max-width: 26ch; }
  .hero__nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, rgb(var(--black-rgb) / 0), rgb(var(--black-rgb) / 1) var(--space-4), rgb(var(--black-rgb) / 1) calc(100% - 48px), rgb(var(--black-rgb) / 0)); mask-image: linear-gradient(90deg, rgb(var(--black-rgb) / 0), rgb(var(--black-rgb) / 1) var(--space-4), rgb(var(--black-rgb) / 1) calc(100% - 48px), rgb(var(--black-rgb) / 0)); }
  .hero__nav::-webkit-scrollbar { display: none; }
  .hero__nav a:last-child { padding-right: var(--space-12); }
  .card-grid--3, .card-grid--4, .card-grid--dest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--goals > *, .card-grid--goals > :nth-last-child(2):nth-child(3n+1), .card-grid--goals > :last-child:nth-child(3n+2) { grid-column: span 3; }
  .card-grid--goals > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* An odd card out spans the row instead of sitting alone in half of it. */
  .card-grid--3:not(.editorial-grid):not(.news-row) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Three entries stay three equal columns on a tablet. */
  .news-row.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--founders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--chair { width: calc((100% - var(--gap-grid) * 2) * 2 / 3 + var(--gap-grid)); }
  
  
  
  
  
  
  
  
  
  .editorial-grid > .card--featured { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: var(--card-pad); }
  .editorial-grid > .card--featured .card__media { grid-row: auto; align-self: stretch; margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--space-6); border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; }
  .editorial-grid > .card--featured .card__body, .editorial-grid > .card--featured .card__action { padding: 0; }
  .editorial-grid > .card--featured .card__action { padding-top: var(--space-6); }

  /* Homepage */
  .masthead { min-height: 0; }
  .masthead__frame { display: flex; flex-direction: column; }
  /* Stacked: the photograph above the copy, dissolving downward into the
     navy on the same eased curve. */
  .masthead__plate { width: 100%; position: relative; aspect-ratio: 16 / 9; inset: auto; -webkit-mask-image: var(--plate-mask-y); mask-image: var(--plate-mask-y); }
  .masthead__plate::after { background: linear-gradient(180deg, rgb(var(--navy-rgb) / .3) 0%, rgb(var(--navy-rgb) / .34) 30%, rgb(var(--navy-rgb) / .44) 50%, rgb(var(--navy-rgb) / .58) 65%, rgb(var(--navy-rgb) / .72) 80%, rgb(var(--navy-rgb) / .82) 100%); }
  .masthead__grid { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-10) var(--space-12); }
  .masthead__copy .hero__lead { max-width: 52ch; }
  .activity-field { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-field > .card--narrow, .activity-field > .card--wide { grid-column: auto; }
  .committee-layout { grid-template-columns: minmax(0, 1fr); }
  .committee-intro { position: static; }
  .cta-band__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .cta-band__intro { position: static; }
  .pledge__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .pledge__intro { position: static; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .contact-info { position: static; }
  .card--work.has-media { grid-template-columns: minmax(0, 1fr); }
  .card--work .card__media { min-height: 0; aspect-ratio: 16 / 9; border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; }
  .future-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .future-map .card--primary { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 767px) {
  .charter { padding: var(--card-pad); }
  .charter__text, .chronicle { padding-left: var(--space-4); }
  :root { --band-pad: 56px; --gap-stack: var(--space-8); --card-pad: 20px; --card-pad-lg: 24px; }
  .card-grid, .card-grid--2, .card-grid--3, .card-grid--4, .news-row.card-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .card-grid--goals > *, .card-grid--goals > :nth-last-child(2):nth-child(3n+1), .card-grid--goals > :last-child:nth-child(3n+2), .card-grid--goals > :last-child:nth-child(odd) { grid-column: auto; }
  .card-grid--people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .card--person { padding: var(--space-4) var(--space-5); --card-pad: var(--space-4); }
  .card__portrait { margin: calc(var(--space-4) * -1) calc(var(--space-5) * -1) var(--space-4); }
  .card--person-compact .card__portrait { margin: 0; }
  .card-grid--founders { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .card--person-compact { gap: var(--space-4); padding: var(--space-5); }
  .card--chair { width: 100%; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: 0; }
  .card--chair .card__portrait { margin: 0; }
  .card--chair .card__body { padding: var(--space-5); }
  .card--columns .card__list { grid-template-columns: minmax(0, 1fr); }
  .hero--page { padding-block: var(--space-10) var(--space-12); }
  .hero--with-nav, .hero--page.has-melt { padding-bottom: 0; }

  .hero__title { max-width: none; }
  .hero__nav { gap: var(--space-5); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .hero__nav a { min-height: 48px; }
   .cta-band__title { max-width: none; }
  
  .archive-bar { flex-direction: column; align-items: stretch; }
  
  
  
  
  
  
  
  
  .brandfield .brand-mark { display: none; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .pagination { justify-content: flex-start; }

  /* Homepage. THE MASTHEAD ON A PHONE (owner, 2026-10-06): the
     photograph fills the frame and only the chapter's title stands on
     it, at the foot, over one navy deepening downward — no lead, no
     button, nothing stacked. The register becomes a row of equal lines
     in its own band; the subjects' names stay as the buttons' names
     for assistive technology. */
  .masthead__frame { display: grid; min-height: clamp(420px, 64svh, 560px); }
  .masthead__plate { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
  .masthead__plate img { object-position: var(--image-position-mobile); }
  .masthead__plate::after { background: linear-gradient(180deg, rgb(var(--navy-rgb) / .12) 0%, rgb(var(--navy-rgb) / .2) 30%, rgb(var(--navy-rgb) / .62) 52%, rgb(var(--navy-rgb) / .9) 70%, rgb(var(--navy-rgb) / .96) 100%); }
  .masthead__grid { align-self: end; padding-block: var(--space-16) var(--space-6); }
  .masthead__title { max-width: none; text-wrap: balance; }
  .masthead__arrow { display: inline-block; width: .62em; height: .62em; margin-left: .3em; vertical-align: -.02em; color: var(--accent-on-dark); }
  .masthead__copy .hero__lead, .masthead__copy .hero__actions { display: none; }
  .masthead__register { border-top: 0; }
  .masthead__chapters { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); }
  .masthead__chapter { min-height: 44px; justify-content: center; padding: 0; }
  .masthead__chapter::before { height: 2px; position: absolute; top: 50%; right: 0; left: 0; margin-top: -1px; content: ""; background: var(--line-on-dark-strong); }
  .masthead__chapter-rule { top: 50%; right: 0; margin-top: -1px; }
  .masthead__chapter-label { width: 1px; height: 1px; position: absolute; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* The mark stacks on a phone: the caption cannot hold a column beside
     a five-rem figure inside a 358px container. */
  
  
  
  .activity-field { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .activity-field > .card { padding: var(--space-6); }
  .card--row { padding: var(--space-5); }
  .future-map { grid-template-columns: minmax(0, 1fr); }
  .future-map .card--primary { padding: var(--space-6); min-height: 0; }
  .card--primary .card__body { padding-block: var(--space-5) 0; }
  .card--primary .card__action { margin-top: var(--space-6); }
  .card--work .card__media { aspect-ratio: 3 / 2; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .contact-form { padding: var(--space-5); }
  .founding__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .founding__media { aspect-ratio: 3 / 2; }
  .card__panel { padding: var(--space-6) var(--card-pad-lg); }
  .card--work .card__list { grid-template-columns: minmax(0, 1fr); }
  .cta-band__list .card--dest { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "badge action" "body body"; row-gap: var(--space-4); padding: var(--space-5); }
  .cta-band__list .card--dest .card__action { width: 44px; height: 44px; }
  /* On a phone the list entry is the standard card again: a square
     beside the record would leave the title a third of the width. */
  .card--compact { display: flex; }
  .card--compact .card__media { align-self: stretch; aspect-ratio: 16 / 9; margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--space-6); border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; }
  .card--compact .frame--placeholder { padding: var(--space-4); }
  .card--compact .frame--placeholder .tag { display: inline-flex; }
  .card--compact .card__action { align-self: flex-start; }
}

/* ============================================================
   PRINT — an article prints as an article
   ============================================================ */
/* The source line under a printed article; nothing on screen. */
.print-source { display: none; }

@page { margin: 16mm 16mm 18mm; }

@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  /* The logo stays, so a printed page says whose it is; the navigation goes. */
  .site-header { height: auto; position: static; margin-bottom: 14pt; border: 0; background: none; }
  .site-header__inner { height: auto; display: block; }
  .site-header .logo { width: 150px; }
  .desktop-nav, .header-contact, .nav-toggle, .intro,
  .site-footer, .mega-panel, .mega-scrim, .mobile-nav, .skip-link, .hero__nav, .breadcrumbs, .cta-band, .pagination, .masthead__register { display: none !important; }
  body { background: var(--print-paper); color: var(--print-ink); font-size: 11pt; }
  .hero, .hero--page { padding: 0 0 12pt; background: none; color: var(--print-ink); }
  .hero-melt { display: none; }
  .hero::after, .hero--page::after { display: none; }
  .hero__title { max-width: none; color: var(--print-ink); font-size: 22pt; }
  .hero__lead { color: var(--print-soft); font-size: 12pt; }
  .hero__meta { color: var(--print-soft); }
  .container { width: 100%; }
  .band { padding-block: 12pt; background: none; }
  .article-content { color: var(--print-ink); font-size: 11.5pt; line-height: var(--lh-normal); }
  .article-content a { color: var(--print-ink); }
  .article-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .frame, .article-content img { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  p { orphans: 3; widows: 3; }
  .print-source { display: block; margin-top: 14pt; padding-top: 6pt; border-top: 1px solid var(--print-rule); color: var(--print-soft); font-size: 9pt; overflow-wrap: anywhere; }
}

/* A trustee's or a founder's page (owner, 2026-10-07): a modest portrait
   beside the biography on a wide screen; above it, centred and small, on a
   phone. The text keeps the reading measure. */
.person-profile { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, var(--w-read)); justify-content: center; align-items: start; gap: var(--space-12); }
.person-profile__portrait { position: sticky; top: calc(var(--header-height) + var(--space-8)); width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-md); background: var(--blue-50); box-shadow: var(--shadow-card); }
.person-profile__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--focus, 50% 20%); }
.person-profile__initials { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, var(--blue-50), var(--green-50)); color: var(--brand-blue); }
.person-profile__back { margin-top: var(--space-10); }
@media (max-width: 767px) {
  .person-profile { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-6); }
  .person-profile__portrait { position: relative; top: 0; width: 168px; }
  .person-profile__text { width: 100%; }
}

/* The badge an announcement with an open form wears on its card. */
.card--news { position: relative; }
.card__badge { position: absolute; z-index: 2; top: var(--space-4); left: var(--space-4); padding: 4px var(--space-3); border-radius: var(--radius-full); background: var(--green-600); color: var(--color-surface); box-shadow: 0 2px 8px rgb(var(--navy-rgb) / .25); }

/* ============================================================
   APPLICATION FORMS                                      §FORMS
   A form drawn from its definition (partials/form.php): sections as
   cards, controls in the site's own colour, radius and focus ring,
   a calendar in Turkish, files with progress. Type is set by role in
   globals.css (.ff-*); nothing here sets a font.
   ============================================================ */
.ff-block { margin-top: var(--space-16); }
.ff-block__title { color: var(--color-heading); }
.ff-block__period { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); color: var(--color-meta); }
.ff-block__period .ui-icon { width: 18px; height: 18px; flex: none; color: var(--accent-on-light); }
.ff-closed, .ff-done { margin-top: var(--space-6); padding: var(--space-6); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-md); background: var(--blue-50); color: var(--color-heading); }
.ff-closed--note { margin-bottom: var(--space-6); font-style: normal; }
.ff-done { border-color: var(--green-300); background: var(--green-50); }
.ff-done__title { color: var(--color-heading); }
.ff-done__ref { margin-top: var(--space-3); }
.ff-page { max-width: var(--w-article-wide); margin-inline: auto; }

.idv-form { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
.ff-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ff-section { padding: var(--card-pad); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-card); }
.ff-section__title { margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-hairline); color: var(--color-heading); }
.ff-section__note { margin: calc(var(--space-2) * -1) 0 var(--space-6); color: var(--color-muted); }
.ff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-6); }
.ff-grid--tight { gap: var(--space-4); }
.ff-field { display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
.ff-field--full { grid-column: 1 / -1; }
.ff-field--half { grid-column: span 1; }
.ff-field--narrow { grid-column: span 1; max-width: 22rem; }
.ff-field[hidden], [data-repeater-row][hidden] { display: none; }
.ff-label { color: var(--color-heading); }
.ff-req { margin-left: 3px; color: var(--color-danger); }
.ff-help { color: var(--color-muted); }
.ff-error { color: var(--color-danger); }
.ff-error[hidden] { display: none; }
.ff-error::before { content: "⚠ "; }

.ff-control { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-heading); transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
.ff-control::placeholder { color: var(--color-muted); opacity: 1; }
.ff-control--area { min-height: 112px; resize: vertical; }
.ff-control--mono { letter-spacing: .04em; }
.ff-control:focus-visible, .ff-file__input:focus-visible + .ff-file__button, .ff-choice__input:focus-visible + .ff-choice__label { border-color: var(--green-600); outline: 3px solid rgb(var(--green-400-rgb) / .35); outline-offset: 0; }
.ff-control[aria-invalid="true"], .has-error .ff-choice__label { border-color: var(--color-danger); }
.ff-control[aria-invalid="true"]:focus-visible { outline-color: rgb(var(--danger-rgb) / .3); }
.ff-affix, .ff-date, .ff-select { position: relative; display: block; }
.ff-affix .ff-control { padding-right: calc(var(--space-4) + 2.5rem); text-align: right; font-variant-numeric: tabular-nums; }
.ff-unit { position: absolute; top: 50%; right: var(--space-4); transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.ff-select select { appearance: none; padding-right: var(--space-10); cursor: pointer; }
.ff-select::after { position: absolute; top: 50%; right: var(--space-5); width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); content: ""; transform: rotate(45deg); pointer-events: none; }
.ff-date .ff-control { padding-right: 52px; }
.ff-date__btn { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-muted); cursor: pointer; transition: color var(--motion-fast), background-color var(--motion-fast); }
.ff-date__btn:focus-visible { outline: 3px solid rgb(var(--green-400-rgb) / .45); }

.ff-choices { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ff-choice { position: relative; }
.ff-choice__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ff-choice__label { display: inline-flex; align-items: center; min-height: 48px; padding: var(--space-3) var(--space-5); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-heading); cursor: pointer; transition: background-color var(--motion-fast), border-color var(--motion-fast); }
.ff-choice__input:checked + .ff-choice__label { border-color: var(--green-600); background: var(--green-50); box-shadow: inset 0 0 0 1px var(--green-600); }
.ff-choices--pair .ff-choice__label { min-width: 104px; justify-content: center; }
.ff-consent { position: relative; }
.ff-consent .ff-choice__label { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; min-height: 0; padding: var(--space-4); }
.ff-consent .ff-choice__label::before { width: 22px; height: 22px; flex: none; margin-top: 2px; border: 2px solid var(--color-hairline-strong); border-radius: 6px; background: var(--color-surface); content: ""; }
.ff-consent .ff-choice__label { position: relative; }
.ff-consent .ff-choice__label::after { position: absolute; top: calc(var(--space-4) + 5px); left: calc(var(--space-4) + 8px); width: 6px; height: 11px; border: solid var(--color-surface); border-width: 0 2px 2px 0; content: ""; opacity: 0; transform: rotate(45deg); }
.ff-consent .ff-choice__input:checked + .ff-choice__label::before { border-color: var(--green-600); background: var(--green-600); }
.ff-consent .ff-choice__input:checked + .ff-choice__label::after { opacity: 1; }
.ff-consent .ff-choice__input:checked + .ff-choice__label { box-shadow: none; }
.ff-link { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }

.ff-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ff-file__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ff-file__button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-3) var(--space-5); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-heading); cursor: pointer; transition: border-color var(--motion-fast), background-color var(--motion-fast); }
.ff-file__name { color: var(--color-muted); overflow-wrap: anywhere; }
.ff-file.has-file .ff-file__name { color: var(--color-heading); }

.ff-repeat { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.ff-repeat__row { padding: var(--space-5); border: 1px solid var(--color-hairline); border-radius: var(--radius-sm); background: var(--neutral-25, var(--color-surface)); }
.ff-repeat__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.ff-linkbtn { padding: var(--space-2) var(--space-3); border: 0; background: transparent; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ff-kvkk { border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm); background: var(--color-surface); }
.ff-kvkk summary { padding: var(--space-4) var(--space-5); color: var(--color-heading); cursor: pointer; }
.ff-kvkk__body { max-height: 22rem; overflow-y: auto; padding: 0 var(--space-5) var(--space-5); }
.ff-modal { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(45rem, calc(100% - var(--space-8))); max-height: 85dvh; overscroll-behavior: contain; padding: 0; border: 0; border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-body); box-shadow: var(--shadow-card); }
.ff-modal::backdrop { background: rgb(var(--navy-rgb) / .55); }
.ff-modal[open] { display: flex; flex-direction: column; }
.ff-modal__head { flex: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-hairline); }
.ff-modal__title { color: var(--color-heading); }
.ff-modal__close { width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--color-heading); cursor: pointer; }
.ff-modal__close:focus-visible { outline: 3px solid rgb(var(--green-400-rgb) / .5); }
.ff-modal__body { flex: 1; overflow-y: auto; padding: var(--space-6); }
.ff-modal__foot { flex: none; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-hairline); text-align: right; }
.ff-summary { padding: var(--space-5); border: 1px solid var(--color-danger-line); border-radius: var(--radius-sm); background: var(--color-danger-bg); color: var(--color-danger-strong); }
.ff-summary[hidden] { display: none; }
.ff-summary ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.ff-actions { display: grid; gap: var(--space-4); justify-items: start; }
.ff-progress { display: grid; gap: var(--space-2); width: min(100%, 24rem); color: var(--color-muted); }
.ff-progress[hidden] { display: none; }
.ff-progress__bar { height: 8px; overflow: hidden; border-radius: var(--radius-full); background: var(--blue-100); }
.ff-progress__bar span { display: block; width: 0; height: 100%; background: var(--green-600); transition: width var(--motion-fast) linear; }

/* The calendar: Turkish months and days, a year chooser that reaches far back. */
.ff-calendar { position: absolute; z-index: 30; top: calc(100% + var(--space-2)); left: 0; width: min(20rem, 100%); min-width: 17.5rem; padding: var(--space-4); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-card); }
.ff-calendar[hidden] { display: none; }
.ff-calendar__bar { display: grid; grid-template-columns: 40px 1fr 5.5rem 40px; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.ff-calendar select { min-height: 40px; padding: 0 var(--space-2); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-heading); }
.ff-calendar__nav { width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--color-heading); cursor: pointer; }
.ff-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ff-calendar__dow { padding: var(--space-1) 0; color: var(--color-muted); text-align: center; }
.ff-calendar__day { min-height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-heading); cursor: pointer; }
.ff-calendar__day[disabled] { color: var(--color-muted); opacity: .4; cursor: default; }
.ff-calendar__day[aria-selected="true"] { background: var(--green-600); color: var(--color-surface); }
.ff-calendar__day:focus-visible, .ff-calendar__nav:focus-visible { outline: 3px solid rgb(var(--green-400-rgb) / .5); }
@media (hover: hover) and (pointer: fine) {
  .ff-control:hover, .ff-file__button:hover, .ff-choice__label:hover { border-color: var(--green-600); }
  .ff-calendar__day:not([disabled]):hover { background: var(--green-50); }
}
@media (max-width: 767px) {
  .ff-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .ff-section { padding: var(--space-5); }
  .ff-field--narrow { max-width: none; }
  .ff-calendar { position: fixed; left: var(--space-4); right: var(--space-4); top: auto; bottom: var(--space-4); width: auto; max-height: 80dvh; }
  .ff-calendar__day, .ff-date__btn { min-height: 44px; }
  .ff-choices--pair .ff-choice { flex: 1 1 0; }
  .ff-choices--pair .ff-choice__label { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ff-progress__bar span { transition: none; } }
@media print { .idv-form { display: none; } }

@media (max-width: 767px) { .ff-modal { width: calc(100% - 28px); max-height: calc(100dvh - 28px); } }
html:has(dialog.ff-modal[open]) { overflow: hidden; }
.ff-modal__body > * + * { margin-top: var(--space-4); }
.ff-modal__body > :first-child { margin-top: 0; }