.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: transparent;
  border-block-end: 1px solid transparent;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base);
}

.site-header.is-scrolled {
  background-color: rgb(var(--paper-rgb) / 0.9);
  border-block-end-color: rgb(var(--ink-rgb) / 0.1);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

/* ================================================ MASTHEAD & BRAND ==== */
.site-header {
  min-height: var(--masthead);
  height: auto;
  flex: none;
  background: var(--paper);
  border: 0;
}
.site-header.is-scrolled {
  background: rgb(246 244 238 / .97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.masthead {
  min-height: var(--masthead);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: clamp(1.75rem, 3vw, 3rem);
  margin-inline: var(--gutter);
  border-bottom: 1px solid var(--line);
}
/* ============================================================ BRAND LOCKUP ==
   One object, constructed from measured values instead of eyeballed ones.
   Both the masthead and the mobile menu use this block; a context only sets
   --mark-size and the type follows, so the two can never drift apart.

   VERTICAL SEATING — the fix for "the icon looks detached".
   The mark's ink is not centred in its own canvas. Measured off the artwork:
   the gate spans 38.3%-91.8% of the box, the flame 3.5%-46.9%, and the
   alpha-weighted centroid of the two layers together sits at 59.0% — nine
   points BELOW the canvas centre, because the gate carries most of the ink
   and the flame is narrow. Centring the type on the canvas therefore floated
   the wordmark ~9% of the mark's height above the mark's own visual centre.
   At a 44px mark that is a 4px misregistration: small enough to look like an
   accident, large enough to make the two halves read as parked side by side.
   --lockup-seat puts that 9% back.

   HORIZONTAL — no rule between the halves. A divider states that these are
   two things; the lockup needs them to read as one.

   TYPE — Manrope Bold. A real 700 cut, not the semibold face the old
   @font-face range was quietly resolving 700 to. Weight now carries the
   authority, so the tracking drops from .155em to .06em: wide-tracked caps at
   semibold is exactly what read as thin and generic. .06em only opens the
   counters enough to keep the caps from touching.

   SCALE — every size derives from --mark-size, so the lockup enlarges and
   reduces as a single drawn object rather than as three independent clamps. */
.brand {
  --mark-size: 3rem;
  --lockup-seat: 0.09;        /* 59.0% measured ink centroid vs 50% canvas   */
  --wordmark-scale: 0.53;     /* cap height lands just under the gate's own  */
  --descriptor-scale: 0.243;  /* ~2.2:1 against the wordmark                 */
  --lockup-gap: 0.25;         /* share of --mark-size between mark and type  */
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0;
  color: var(--ink);
}
.brand__mark {
  grid-area: 1 / 1;
  width: var(--mark-size);
  margin-right: calc(var(--mark-size) * var(--lockup-gap));
}
.brand__text {
  grid-area: 1 / 2;
  display: grid;
  /* With line-height 1 the gap is measured between em boxes, and Manrope puts
     the cap line .163em below the box top and the baseline .883em below it —
     so this .055em resolves to roughly a third of a cap height of real optical
     space between the two lines. */
  gap: calc(var(--mark-size) * 0.055);
  align-content: center;
  min-width: 0;
  /* The seat. align-items:center distributes the leftover space either side of
     the MARGIN box, so a top margin displaces the item by half its value —
     hence the doubling. Layout, not transform, so the type stays crisp. */
  margin-top: calc(var(--mark-size) * var(--lockup-seat) * 2);
}
.brand__name {
  font-size: calc(var(--mark-size) * var(--wordmark-scale));
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  /* Tracking appends a phantom advance after the last glyph; pulling it back
     keeps the wordmark's right edge where the eye expects it and keeps the
     descriptor squared under it. */
  margin-right: -.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  /* Manrope ships real GPOS pairs — A/T and A/Z in ATEŞBAZ both need them. */
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}
.brand__tagline {
  font-size: calc(var(--mark-size) * var(--descriptor-scale));
  font-weight: 500;
  line-height: 1;
  letter-spacing: .145em;
  margin-right: -.145em;
  margin-top: 0;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color .35s var(--motion);
}
/* The only colour the lockup takes. The mark's flame already flickers on hover
   (components.css); the descriptor warming to gold ties the two halves of the
   lockup into one gesture instead of two. */
.brand:hover .brand__tagline,
.brand:focus-visible .brand__tagline {
  color: var(--gold-ink);
}
.masthead .brand {
  --mark-size: clamp(2.75rem, 3.15vw, 3.25rem);   /* 44 -> 52px */
  justify-self: start;
}
.masthead-nav { align-self: stretch; display: flex; }
/* ============================================================ DESKTOP MENU ==
   Three groups open a panel; the panel mirrors the matching group of the
   mobile sheet. Same surface, hairlines and gold as the page. The top link
   is a real link; the chevron is the disclosure (aria-expanded). Panels are
   display:none while closed, so their thumbnails are never downloaded until
   a visitor opens one. With JavaScript (.has-js) only .is-open shows a panel;
   without it, hover and keyboard focus do. */
.dnav { display: flex; align-items: stretch; gap: clamp(1rem, 1.9vw, 2.4rem); font-size: .875rem; font-weight: 500; }
.dnav__item { display: flex; align-items: center; gap: .1rem; }
.dnav__link { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; white-space: nowrap; }
.dnav__link::after { content: ''; position: absolute; bottom: .55rem; inset-inline: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--motion); }
.dnav__link:hover::after, .dnav__link:focus-visible::after, .dnav__item.is-open > .dnav__link::after { transform: scaleX(1); }
.dnav__toggle { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--muted); transition: color .2s ease, background-color .2s ease; }
.dnav__toggle svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--motion); }
.dnav__toggle:hover, .dnav__item.is-open > .dnav__toggle { color: var(--ink); background: rgb(var(--ink-rgb) / .06); }
.dnav__item.is-open > .dnav__toggle svg { transform: rotate(180deg); }

/* The panel hangs from the header (the nearest positioned box), across the
   page's own margins, just under the masthead rule. */
.dnav__panel { position: absolute; top: calc(100% - 1px); left: var(--gutter); right: var(--gutter); z-index: 2; display: none; grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); gap: clamp(1.5rem, 3vw, 3.5rem); padding: clamp(1.6rem, 2.4vw, 2.4rem); background: var(--surface-light); border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: 0 0 10px 10px; box-shadow: 0 2.2rem 3.5rem -2rem rgb(var(--ink-rgb) / .28); font-weight: 400; cursor: default; }
.dnav__panel--feature { grid-template-columns: minmax(0, 3fr) minmax(0, 6.2fr) minmax(0, 2.8fr); }
.has-js .dnav__item.is-open > .dnav__panel { display: grid; animation: dnav-in .28s var(--ease-editorial) both; }
html:not(.has-js) .dnav__item:hover > .dnav__panel, html:not(.has-js) .dnav__item:focus-within > .dnav__panel { display: grid; }
@keyframes dnav-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }

.dnav__intro { display: flex; flex-direction: column; align-items: flex-start; padding-right: 1rem; border-right: 1px solid var(--line); }
.dnav__eyebrow { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; }
.dnav__eyebrow::before { content: ''; width: 1.2rem; height: 1px; background: var(--gold-ink); }
.dnav__title { margin-top: .9rem; font-size: clamp(1.35rem, 1.7vw, 1.75rem); font-weight: 500; line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.dnav__more { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; margin-top: auto; border-bottom: 1px solid var(--field-line); font-size: .8rem; font-weight: 600; }
.dnav__more:hover { color: var(--gold-ink); border-color: var(--gold-deep); }
.dnav__arrow { flex: none; width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .25s var(--motion); }

.dnav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2vw, 2.25rem); align-content: start; }
.dnav__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; min-height: 3.6rem; padding-block: .65rem; border-bottom: 1px solid var(--line); transition: color .2s ease; }
.dnav__list li:nth-child(-n+2) .dnav__row { border-top: 1px solid var(--line); }
.dnav__row:hover, .dnav__row:focus-visible { color: var(--gold-ink); }
.dnav__row:hover .dnav__arrow, .dnav__row:focus-visible .dnav__arrow, .dnav__more:hover .dnav__arrow { transform: translate(2px, -2px); }
.dnav__text { display: grid; gap: .15rem; min-width: 0; }
.dnav__name { font-size: .95rem; font-weight: 500; letter-spacing: -.01em; }
.dnav__desc { color: var(--muted); font-size: .76rem; line-height: 1.4; }
.dnav__no { width: 1.6rem; color: var(--gold-ink); font-size: .7rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.dnav__thumb, .dnav__thumb img { display: block; width: 2.9rem; height: 2.9rem; border-radius: 4px; object-fit: cover; }
.dnav__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); }
.dnav__icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.dnav__icon .acc { fill: var(--gold); stroke: none; }
.dnav__row:hover .dnav__icon { border-color: var(--gold-deep); }

.dnav__feature { position: relative; display: block; overflow: hidden; border-radius: 6px; min-height: 12rem; color: var(--on-dark-ink); }
.dnav__feature picture, .dnav__feature img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dnav__feature img { object-fit: cover; object-position: 45% 50%; transition: transform .8s var(--ease-editorial); }
.dnav__feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--surface-dark-rgb) / .85), rgb(var(--surface-dark-rgb) / .1) 65%); }
.dnav__feature:hover img { transform: scale(1.04); }
.dnav__feature-text { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 1; display: grid; gap: .15rem; }
.dnav__feature-kicker { color: var(--gold-lit); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dnav__feature-name { font-size: 1.05rem; font-weight: 500; letter-spacing: -.02em; }
.dnav__feature-cta { margin-top: .3rem; color: var(--on-dark-body); font-size: .74rem; }
.dnav__feature:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .has-js .dnav__item.is-open > .dnav__panel { animation: none; }
  .dnav__link::after, .dnav__toggle svg, .dnav__arrow, .dnav__feature img { transition: none; }
}
.masthead-actions {
  justify-self: end;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.pill--header {
  min-height: 3rem;
  padding: .65rem 1.5rem;
  background: transparent;
  color: var(--ink);
  border-color: #9d9f93;
}
.pill--header:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink);
}
.menu-button svg {
  width: 1.5rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.site-header :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }
@media (max-width: 74.99em) {
  .masthead { grid-template-columns: minmax(0, 1fr) auto; }
  .masthead-nav { display: none; }
  .menu-button { display: flex; }
}
@media (max-width: 39.99em) {
  .masthead { gap: .75rem; }
  /* Phone masthead. Only the mark size and two ratios change: the descriptor
     is nudged UP relative to the wordmark because at 8px it would stop being
     readable, and the gap tightens because the whole lockup has less room. */
  .masthead .brand {
    --mark-size: 2.4rem;
    --descriptor-scale: 0.275;
    --lockup-gap: 0.21;
  }
  .masthead .brand__tagline { letter-spacing: .12em; margin-right: -.12em; }
  .masthead-actions { gap: .35rem; }
  .pill--header { min-height: 2.75rem; padding: .6rem .8rem; gap: .5rem; font-size: .875rem; }
  .pill--header svg { display: none; }
  .menu-button { width: 2.75rem; }
}
@media (max-width: 23em) {
  .masthead .brand { --mark-size: 2.1rem; --descriptor-scale: 0.29; }
  .masthead .brand__tagline { letter-spacing: .09em; margin-right: -.09em; }
  .masthead-actions { gap: 0; }
  .pill--header { padding-inline: .6rem; }
}
/* Enlarged text can reflow controls instead of clipping a fixed-height screen. */
.site-header { container-type: inline-size; container-name: masthead; }
@container masthead (max-width: 60em) {
  .masthead { grid-template-columns: minmax(0, 1fr) auto; }
  .masthead-nav { display: none; }
  .menu-button { display: flex; }
}
@container masthead (max-width: 18em) {
  .masthead { display: flex; flex-wrap: wrap; justify-content: space-between; padding-block: .75rem; }
  .masthead .brand { max-width: 100%; --mark-size: 1.9rem; --descriptor-scale: 0.3; }
  .masthead .brand__tagline { letter-spacing: .06em; margin-right: -.06em; }
  .masthead-actions .pill--header { display: none; }
}