/* ==========================================================================
   SEVENTH — darkened gallery with scarlet punctuation
   Tokens transcribed verbatim from DESIGN.md
   ========================================================================== */

:root {
  /* Colors */
  --color-pure-black: #000000;
  --color-soft-black: #101010;
  --color-bone-white: #ffffff;
  --color-fog-gray: #a0a0a0;
  --color-graphite: #484848;
  --color-scarlet-signal: #e4002b;
  --gradient-rose-brand-spectrum: linear-gradient(
    90deg,
    #f5a5a5 0%, #e85a5a 25%, #d42020 50%,
    #7a0a0a 70%, #2a0606 85%, #000000 100%
  );
  /* The swatch panel renders those same six stops as hard-edged bars of equal
     width, per the Brand Color Swatch Panel component spec. */
  --gradient-rose-brand-bars: linear-gradient(
    90deg,
    #f5a5a5 0 16.666%, #e85a5a 16.666% 33.333%, #d42020 33.333% 50%,
    #7a0a0a 50% 66.666%, #2a0606 66.666% 83.333%, #000000 83.333% 100%
  );

  /* Typography — families (NextBook is the studio's custom face; Inter substitutes) */
  --font-nextbook: 'NextBook', 'Inter', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-circular-std: 'Circular Std', 'Inter', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — scale */
  --text-body-sm: 16px;      --leading-body-sm: 1.25;    --tracking-body-sm: -0.16px;
  --text-subheading: 24px;   --leading-subheading: 1.13; --tracking-subheading: -0.24px;
  --text-heading-sm: 32px;   --leading-heading-sm: 1;    --tracking-heading-sm: -0.64px;
  --text-display: 80px;      --leading-display: 1;       --tracking-display: -1.6px;

  --font-weight-light: 300;
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-48: 48px;
  --spacing-120: 120px;
  --spacing-240: 240px;

  /* Layout */
  --section-gap: 120px;
  --card-padding: 16px;
  --element-gap: 16px;

  /* Radii — every element is square */
  --radius-tags: 0px;
  --radius-cards: 0px;
  --radius-images: 0px;
  --radius-buttons: 0px;

  /* Surfaces */
  --surface-canvas-black: #000000;
  --surface-soft-black: #101010;
  --surface-graphite-line: #484848;

  /* Derived rhythm — the negative-space philosophy, made responsive.
     Collapses on small viewports so the page never becomes a cemetery of voids. */
  --gap-section: clamp(64px, 10vw, 120px);   /* within-section standard */
  --gap-major: clamp(120px, 18vw, 240px);    /* between major page sections */
  --inset-page: 16px;                        /* tile-grid gutter inset */
  --inset-wide: clamp(16px, 14vw, 264px);    /* the most important content blocks */
  --nav-height: 72px;
  --wall-row: clamp(132px, 17vw, 268px);     /* work-wall grid row unit */
}

/* ==========================================================================
   Arabic & RTL
   DESIGN.md is a Latin-only specification, so two of its rules cannot be
   carried over literally — following them would damage the Arabic text rather
   than honour the system:

   1. Tracking. The guide sets -0.01em to -0.02em. Arabic is a connected
      script; negative tracking pulls the glyphs into their neighbours and
      breaks the joins. Arabic is set at 0.
   2. Display leading. The guide sets line-height 1.0 at 80px. Arabic
      ascenders and descenders are taller than the Latin ones that value was
      chosen for, and 1.0 clips them. Arabic display sizes get 1.25.

   Everything else — the black canvas, 0px radii, the colour ration, the
   120/240px rhythm — is script-independent and carries over untouched.
   ========================================================================== */

:root {
  --font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

[dir="rtl"] {
  --font-nextbook: var(--font-arabic);
  --tracking-body-sm: 0;
  --tracking-subheading: 0;
  --tracking-heading-sm: 0;
  --tracking-display: 0;
  --leading-display: 1.25;
  --leading-heading-sm: 1.2;
}

[dir="rtl"] body { letter-spacing: 0; }

[dir="rtl"] .t-display,
[dir="rtl"] .menu__item a {
  letter-spacing: 0;
  line-height: 1.25;
}
[dir="rtl"] .t-heading-sm { letter-spacing: 0; line-height: 1.2; }

/* The statement is the one place the mask has to grow with the leading, or the
   taller Arabic glyphs are clipped by their own reveal. */
[dir="rtl"] .statement__type { line-height: 1.2; }
[dir="rtl"] .statement__type .line {
  padding-bottom: .22em;
  margin-bottom: -.22em;
}

/* The bars declare themselves from the leading edge in either direction.
   Scoped through .js as well, so it outranks the motion section's
   `.js .tile--swatch span` rule further down the file. */
.js[dir="rtl"] .tile--swatch span,
[dir="rtl"] .tile--swatch span { transform-origin: right center; }

[dir="rtl"] .skip-link { left: auto; right: 16px; }

/* Latin content held inside an Arabic page keeps its own direction and the
   system's original tracking: wordmarks, the type specimen, e-mail, numbers. */
[dir="rtl"] .tile__wordmark,
[dir="rtl"] .tile--specimen,
[dir="rtl"] .showcase__client,
[dir="rtl"] .footer__mark,
[dir="rtl"] .nav__mark,
[dir="rtl"] .nav__clock,
[dir="rtl"] .contact__mail {
  direction: ltr;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.01em;
}
[dir="rtl"] .showcase__client,
[dir="rtl"] .nav__mark,
[dir="rtl"] .footer__mark { text-align: start; }

/* Language switch */
.nav__lang {
  color: var(--color-fog-gray);
  transition: color 400ms ease;
}
.nav__lang:hover { color: var(--color-bone-white); }

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--surface-canvas-black);
  color: var(--color-bone-white);
  font-family: var(--font-nextbook);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, figure { margin: 0; }
/* The system only operates at 300 and 400 — never inherit the UA's bold. */
h1, h2, h3 { font-weight: var(--font-weight-regular); }
ul { padding: 0; list-style: none; }

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-images);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-buttons);
}

:focus-visible {
  outline: 1px solid var(--color-fog-gray);
  outline-offset: 4px;
}

::selection {
  background: var(--color-scarlet-signal);
  color: var(--color-bone-white);
}

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

.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  z-index: 200;
  padding: 8px 16px;
  background: var(--color-bone-white);
  color: var(--color-pure-black);
}
.skip-link:focus { top: 8px; }

/* --------------------------------------------------------------------------
   Type roles
   -------------------------------------------------------------------------- */

.t-display {
  font-size: clamp(40px, 8vw, var(--text-display));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-light);
}

.t-heading-sm {
  font-size: clamp(24px, 3.4vw, var(--text-heading-sm));
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-light);
}

.t-subheading {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-regular);
}

.t-body { font-size: var(--text-body-sm); }
.t-muted { color: var(--color-fog-gray); }

/* --------------------------------------------------------------------------
   Top navigation bar — full-bleed black, blends into the canvas
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--element-gap);
  /* The bar used to sit flush against the top edge. It now opens on a full
     48px of air — the guide's own spacing step — and condenses to 16px once
     the page is scrolled, so the room is generous on arrival without
     spending the fold for the rest of the visit. */
  padding: var(--spacing-48) var(--spacing-16) var(--spacing-16);
  background: var(--color-pure-black);
  transition: padding-top 600ms var(--ease-settle),
              padding-bottom 600ms var(--ease-settle);
}
.nav[data-condensed="true"] {
  padding-top: var(--spacing-16);
}

.nav__mark {
  font-size: var(--text-body-sm);
  color: var(--color-bone-white);
  justify-self: start;
}

.nav__clock {
  font-size: var(--text-body-sm);
  color: var(--color-fog-gray);
  font-variant-numeric: tabular-nums;
  justify-self: center;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--element-gap);
  justify-self: end;
}

.nav__links {
  display: flex;
  gap: var(--element-gap);
}

.nav__link {
  color: var(--color-bone-white);
  transition: color 400ms ease;
}
.nav__link:hover { color: var(--color-fog-gray); }

/* 2×2 grid expand glyph — the only icon in the system */
.nav__expand {
  display: grid;
  grid-template-columns: repeat(2, 5px);
  grid-template-rows: repeat(2, 5px);
  gap: 3px;
  padding: 4px;
}
.nav__expand span {
  background: var(--color-bone-white);
  transition: background 400ms ease;
}
.nav__expand:hover span { background: var(--color-fog-gray); }

/* --------------------------------------------------------------------------
   Expanded menu overlay
   -------------------------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--color-pure-black);
  display: grid;
  grid-template-rows: var(--nav-height) 1fr auto;
  padding: 0 var(--spacing-16) var(--spacing-16);
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}
.menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms ease, visibility 0s;
}

.menu__close {
  justify-self: end;
  align-self: center;
  font-size: var(--text-body-sm);
  color: var(--color-fog-gray);
}
.menu__close:hover { color: var(--color-bone-white); }

.menu__list {
  align-self: center;
  display: grid;
  gap: var(--spacing-16);
}
.menu__item a {
  font-size: clamp(40px, 9vw, var(--text-display));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-light);
  transition: color 400ms ease;
}
.menu__item a:hover { color: var(--color-fog-gray); }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  color: var(--color-fog-gray);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding-block: var(--gap-major); }
.section--flush-top { padding-top: var(--gap-section); }

.section__heading { margin-bottom: var(--gap-section); }

.inset-wide { padding-inline: var(--inset-wide); }
.inset-page { padding-inline: var(--inset-page); }

/* --------------------------------------------------------------------------
   Work wall — asymmetric tile grid on a black canvas, 16px gutters
   -------------------------------------------------------------------------- */

.wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: var(--wall-row);
  grid-auto-flow: dense;
  gap: var(--element-gap);
}

.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-cards);
  background: var(--color-pure-black);
}
.tile--w2 { grid-column: span 2; }
.tile--h2 { grid-row: span 2; }

/* The edge of the photograph IS the edge of the card.
   Hover pushes into the image rather than dimming it — the spotlight rule in
   the motion section handles the dimming of everything else. */
a.tile--photo:hover img,
a.tile--photo:focus-visible img {
  --img-scale: 1.06;
}

/* Brand mark on white */
.tile--mark {
  background: var(--color-bone-white);
  color: var(--color-pure-black);
  display: grid;
  place-content: center;
  padding: var(--card-padding);
}
.tile__wordmark {
  font-size: clamp(20px, 2.4vw, var(--text-heading-sm));
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-regular);
}

/* Brand colour swatch panel — the tile IS the gradient.
   Six bars of equal width; the gradient token is the no-JS fallback. */
.tile--swatch {
  background: var(--gradient-rose-brand-bars);
  display: flex;
}
.tile--swatch span {
  flex: 1;
  background: var(--bar);
}

/* Typography specimen tile — a client's font system, not Studio Oker's own */
.tile--specimen {
  background: var(--color-bone-white);
  color: var(--color-pure-black);
  font-family: var(--font-circular-std);
  display: grid;
  align-content: space-between;
  padding: var(--card-padding);
}
.specimen__labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.specimen__glyphs {
  display: grid;
  gap: 0;
  line-height: 1;
}
.specimen__glyphs span:first-child {
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 400;
}
.specimen__glyphs span:last-child {
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 700;
}

/* Full-bleed red panel — the system's only place where colour shouts */
.tile--statement {
  display: grid;
  align-content: space-between;
  padding: var(--card-padding);
}
.statement__type {
  color: var(--color-scarlet-signal);
  font-weight: var(--font-weight-light);
  font-size: clamp(56px, 9vw, 160px);
  line-height: .92;
  letter-spacing: var(--tracking-display);
}

/* Tile caption — quiet metadata under a work tile */
.tile__meta {
  padding: var(--card-padding) 0 0;
  color: var(--color-fog-gray);
  display: flex;
  justify-content: space-between;
  gap: var(--element-gap);
}

/* --------------------------------------------------------------------------
   Link with red dot — the dot does the work of a button without a button shape
   -------------------------------------------------------------------------- */

.dot-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-bone-white);
}
.dot-link::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-scarlet-signal);
  flex: none;
  transition: transform 500ms cubic-bezier(.2, .6, .2, 1);
}
.dot-link:hover::before { transform: scale(1.8); }

/* --------------------------------------------------------------------------
   Studio — three left-aligned typographic columns
   -------------------------------------------------------------------------- */

.studio__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-48);
  align-items: start;
}

.col__label {
  color: var(--color-fog-gray);
  margin-bottom: var(--spacing-16);
}

.col p + p { margin-top: var(--spacing-16); }

/* Services list — raw stacked text, no bullets, no leading characters */
.services li { line-height: var(--leading-body-sm); }

/* Studio stat block — typography does the structuring */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-16) var(--spacing-48);
  margin-top: var(--spacing-48);
}
.stat dt { color: var(--color-fog-gray); }
.stat dd { margin: 0; color: var(--color-bone-white); }

.studio__figure { margin-top: var(--gap-section); }
.studio__figure img { aspect-ratio: 16 / 7; }

/* --------------------------------------------------------------------------
   Feed — 2-column showcase grid
   -------------------------------------------------------------------------- */

.feed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-section) var(--element-gap);
}

.showcase { background: var(--color-pure-black); }
.showcase__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.showcase:hover .showcase__media img {
  --img-scale: 1.06;
}
.showcase__body { padding: var(--card-padding); }
.showcase__client { color: var(--color-bone-white); }
.showcase__desc,
.showcase__disciplines {
  color: var(--color-fog-gray);
  margin-top: var(--spacing-8);
}

.feed__more { margin-top: var(--gap-section); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact__mail {
  display: inline-block;
  margin-top: var(--spacing-48);
  border-bottom: 1px solid var(--color-graphite);
  padding-bottom: var(--spacing-8);
  transition: border-color 500ms ease;
}
.contact__mail:hover { border-color: var(--color-bone-white); }

.contact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-48);
  margin-top: var(--gap-section);
}

/* --------------------------------------------------------------------------
   Footer — minimal, quiet, no CTAs
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--surface-graphite-line);
  padding: var(--spacing-16);
  color: var(--color-fog-gray);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-16);
}
.footer__mark { color: var(--color-bone-white); }
.footer__links { display: flex; gap: var(--spacing-16); }
.footer__links a:hover { color: var(--color-bone-white); }

/* ==========================================================================
   Motion
   DESIGN.md specifies no motion system, so the brief comes from its voice:
   "slow, considered, confident — trusts silence over spectacle". Nothing here
   bounces, spins or overshoots. Every easing decelerates into place, every
   duration is long enough to read as deliberate rather than reactive, and the
   only property that ever animates is one the compositor can handle alone.
   ========================================================================== */

:root {
  --ease-settle: cubic-bezier(.16, .84, .28, 1);  /* long tail, no overshoot */
  --dur-wipe: 1150ms;
  --dur-line: 1050ms;
  --dur-soft: 800ms;
}

/* ── The wall lights up, one panel at a time ──────────────────────────────
   A gallery wall does not fade in — the lights come up on it. Each tile is
   wiped open from its bottom edge, staggered along a diagonal that JS
   computes from the tile's real position, so the sweep reads as one gesture
   crossing the room rather than eleven separate animations. */

.js .wall .tile[data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur-wipe) var(--ease-settle);
  transition-delay: var(--stagger, 0ms);
}
.js .wall .tile[data-reveal].is-in {
  clip-path: inset(0 0 0 0);
}

/* ── Depth without elevation ──────────────────────────────────────────────
   The system forbids shadows, so depth is carried by rate of travel instead:
   photographs drift against the page as it scrolls. `translate` is used
   rather than `transform` so the per-frame parallax never inherits the hover
   transition on `scale` — two properties, two independent timelines. */

.tile--photo img,
.showcase__media img {
  height: 116%;
  margin-top: -8%;
  translate: 0 var(--py, 0px);
  scale: var(--img-scale, 1);
  transition: scale 1200ms var(--ease-settle), opacity var(--dur-soft) ease;
}

/* ── Spotlight ────────────────────────────────────────────────────────────
   Attending to one work means the rest of the room recedes. Opacity only —
   no scrim, no overlay, nothing painted on top of the photograph. */

.js .wall:hover .tile {
  opacity: .38;
  transition: opacity 700ms ease;
}
.js .wall .tile:hover,
.js .wall .tile:focus-within {
  opacity: 1;
}

/* ── The one place colour shouts ──────────────────────────────────────────
   Both lines are masked and rise on a stagger; the red dot arrives last, once
   the type has settled. */

.statement__type .line {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;   /* room for the descender the mask would clip */
  margin-bottom: -.12em;
}
.js .statement__type .line > span {
  display: block;
  transform: translateY(110%);
  transition: transform var(--dur-line) var(--ease-settle);
  transition-delay: var(--stagger, 0ms);
}
.js .tile--statement.is-in .statement__type .line > span {
  transform: none;
}
.js .statement__type .line:nth-child(2) > span {
  transition-delay: calc(var(--stagger, 0ms) + 110ms);
}

.js .statement__link {
  opacity: 0;
  transition: opacity var(--dur-soft) ease;
  transition-delay: calc(var(--stagger, 0ms) + 700ms);
}
.js .tile--statement.is-in .statement__link { opacity: 1; }

/* ── The colour system declares itself ────────────────────────────────────
   Six bars wipe open left to right. This is the single deliberate burst the
   colour ration is saved for, so it is the one thing allowed a sequence. */

.js .tile--swatch { background: none; }
.js .tile--swatch span {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--ease-settle);
}
.js .tile--swatch.is-in span { transform: none; }
.js .tile--swatch span:nth-child(1) { transition-delay: calc(var(--stagger, 0ms) + 120ms); }
.js .tile--swatch span:nth-child(2) { transition-delay: calc(var(--stagger, 0ms) + 200ms); }
.js .tile--swatch span:nth-child(3) { transition-delay: calc(var(--stagger, 0ms) + 280ms); }
.js .tile--swatch span:nth-child(4) { transition-delay: calc(var(--stagger, 0ms) + 360ms); }
.js .tile--swatch span:nth-child(5) { transition-delay: calc(var(--stagger, 0ms) + 440ms); }
.js .tile--swatch span:nth-child(6) { transition-delay: calc(var(--stagger, 0ms) + 520ms); }

/* ── The room before the lights ───────────────────────────────────────────
   The nav settles in first, so the wall has something to arrive under. */

.js .nav > * {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 700ms ease, transform 700ms var(--ease-settle);
}
.js .nav.is-in > * { opacity: 1; transform: none; }
.js .nav.is-in > *:nth-child(2) { transition-delay: 90ms; }
.js .nav.is-in > *:nth-child(3) { transition-delay: 180ms; }

/* --------------------------------------------------------------------------
   Reveal — slow, considered, confident
   -------------------------------------------------------------------------- */

/* Hidden only once JS has confirmed it can un-hide them — the page is fully
   readable with scripting off or broken. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 900ms cubic-bezier(.2, .6, .2, 1),
              transform 900ms cubic-bezier(.2, .6, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Responsive — collapse the rhythm, never the discipline
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .studio__cols { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .wall { grid-template-columns: repeat(2, 1fr); }
  .studio__cols { grid-template-columns: 1fr; gap: var(--gap-section); }
  .feed { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* At phone widths the 264px margin is not available, so every block snaps to
     the same 16px page edge as the tile grid — one edge, not two. */
  :root { --wall-row: 44vw; --inset-wide: 16px; }
  .nav__clock { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .wall { grid-template-columns: 1fr; }
  .tile--w2 { grid-column: span 1; }
  .contact__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }

  /* Everything the motion section introduces resolves to its end state. */
  .js .wall .tile[data-reveal] { clip-path: none; }
  .js .wall:hover .tile { opacity: 1; }
  .js .statement__type .line > span { transform: none; }
  .js .statement__link { opacity: 1; }
  .js .tile--swatch span { transform: none; }
  .js .nav > * { opacity: 1; transform: none; }
  .tile--photo img,
  .showcase__media img { translate: none; scale: none; height: 100%; margin-top: 0; }
}

/* ==========================================================================
   Journal
   The one place the system's "no max-width containment" rule is bent, and
   deliberately: that rule is written for a portfolio of photographs, where
   full-bleed imagery carries the page. Long-form prose is not photography —
   a 100vw line of body copy is unreadable at any margin. The measure is
   capped at 68 characters and stays left-aligned, which is exactly what the
   guide asks of "every long-form block". Nothing else changes: same canvas,
   same 0px radii, same greys, same rhythm.
   ========================================================================== */

.journal__intro {
  max-width: 52ch;
  margin-top: calc(var(--gap-section) * -0.5);
  margin-bottom: var(--gap-section);
}

.journal {
  display: grid;
  gap: var(--gap-section);
}

.entry__link {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--spacing-48);
  align-items: start;
}

.entry__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-pure-black);
}

.entry__body { display: grid; gap: var(--spacing-16); }
.entry__title { color: var(--color-bone-white); }
.entry__excerpt { max-width: 56ch; }

.entry__link:hover .entry__title { color: var(--color-fog-gray); }
.entry__title { transition: color 500ms ease; }

/* Tags are raw stacked strings separated by space, not pills — the guide
   forbids tag chrome, and radius 0 would make a pill a rectangle anyway. */
.entry__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  color: var(--color-fog-gray);
}

.entry__draft {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-fog-gray);
  border-bottom: 1px solid var(--color-graphite);
  padding-bottom: var(--spacing-8);
  margin-bottom: var(--spacing-48);
}
.entry__draft::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-scarlet-signal);
  flex: none;
}

/* ── A single entry ──────────────────────────────────────────────────────── */

.entry-full__title {
  max-width: 20ch;
  margin-bottom: var(--spacing-48);
}

.entry-full .entry__date { margin-bottom: var(--spacing-16); }

.entry__cover {
  margin: var(--gap-section) 0;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

.prose {
  max-width: 68ch;          /* the reading measure — see the note above */
  display: grid;
  gap: var(--spacing-48);
}

.prose p { color: var(--color-bone-white); }

.prose__heading {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-light);
  margin-top: var(--spacing-48);
}

/* A quote is set apart by a hairline and a shift in colour, never by a card,
   a background fill or a decorative glyph. */
.prose__quote {
  margin: 0;
  padding-inline-start: var(--spacing-48);
  border-inline-start: 1px solid var(--color-graphite);
}
/* Matches `.prose p` specificity, or the body-copy colour above wins and the
   quote is indistinguishable from the paragraphs around it. */
.prose__quote p { color: var(--color-fog-gray); }

.prose__list {
  display: grid;
  gap: var(--spacing-16);
  color: var(--color-fog-gray);
}

.prose__figure { margin: 0; }
.prose__figure img { aspect-ratio: 16 / 9; }

.entry-full__back { margin-top: var(--gap-major); }

@media (max-width: 900px) {
  .entry__link { grid-template-columns: 1fr; gap: var(--spacing-16); }
  .prose { gap: var(--spacing-16); }
  .prose__quote { padding-inline-start: var(--spacing-16); }
}

/* ==========================================================================
   Brand lockup
   The wordmark may be an uploaded image instead of type. It is sized by
   height so any logo file — wide lockup or compact mark — sits on the same
   48px nav baseline without the caller having to know its aspect ratio.
   ========================================================================== */

.brand__logo {
  display: block;
  width: auto;
  height: 20px;
  object-fit: contain;
}
.footer__mark .brand__logo { height: 18px; }


/* ==========================================================================
   Portfolio
   A wall of frames. The work wall mixes tile types and spans to build a
   composition; this grid does the opposite — every cell is identical, so the
   photographs read as one set. Deliberately gutterless: the reference for
   this page is a continuous field of images, which is a departure from the
   guide's 16px tile gutters and the one place the two patterns differ.
   ========================================================================== */

.portfolio__intro {
  max-width: 56ch;
  margin-top: calc(var(--gap-section) * -0.5);
  margin-bottom: var(--gap-section);
}

.portfolio {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;                       /* the field is continuous — see the note above */
}

.frame {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-pure-black);
  cursor: zoom-in;
  border-radius: var(--radius-images);
}

.frame img {
  scale: var(--img-scale, 1);
  transition: scale 1200ms var(--ease-settle), opacity 600ms ease;
}
.frame:hover img,
.frame:focus-visible img { --img-scale: 1.06; }

/* The same gallery-spotlight the work wall uses: attending to one frame lets
   the rest of the room recede. Opacity only, nothing painted on top. */
.js .portfolio:hover .frame { opacity: .38; transition: opacity 700ms ease; }
.js .portfolio .frame:hover,
.js .portfolio .frame:focus-visible { opacity: 1; }

/* ── Lightbox ────────────────────────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  /* minmax(0, 1fr), not 1fr: a 1fr track has an `auto` minimum, so it grows to
     fit the image instead of constraining it, and the picture overflows. */
  grid-template-rows: var(--nav-height) minmax(0, 1fr);
  padding: 0 var(--spacing-16) var(--spacing-48);
  background: var(--color-pure-black);
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}
.lightbox[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms ease, visibility 0s;
}

.lightbox__close {
  justify-self: end;
  align-self: center;
  color: var(--color-fog-gray);
}
.lightbox__close:hover { color: var(--color-bone-white); }

.lightbox__stage {
  margin: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--spacing-16);
  justify-items: center;
}
.lightbox__stage img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
}
.lightbox__caption { text-align: center; }

@media (max-width: 1100px) { .portfolio { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .portfolio { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .js .portfolio:hover .frame { opacity: 1; }
}

/* ==========================================================================
   Navigation — the logo's typography
   The wordmark is set uppercase on wide tracking. The menu now echoes it, so
   the header reads as one lockup rather than a logo beside unrelated links.
   This is a deliberate exception to the system's negative tracking: that rule
   exists to pull display type into tight blocks, and inverting it is exactly
   what separates a wordmark from body copy.
   ========================================================================== */

.nav__mark,
.nav__link,
.nav__lang {
  text-transform: uppercase;
  letter-spacing: .16em;          /* matches the lockup's 4.5/30 ≈ .15em */
  font-weight: var(--font-weight-regular);
  font-size: 13px;                /* uppercase reads larger; 13px holds the 16px optical size */
}

.nav__links { gap: calc(var(--spacing-16) * 1.5); }

/* Current page: brought forward rather than decorated. No underline, no
   colour — the scarlet ration is spent elsewhere on every page. */
.nav__link { color: var(--color-fog-gray); }
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--color-bone-white); }

.menu__item a { text-transform: uppercase; letter-spacing: .04em; }
.menu__item a[aria-current="page"] { color: var(--color-fog-gray); }

/* Arabic is a connected script — the wide tracking that suits the Latin
   wordmark would break its joins, so it is removed. This includes the
   language switch, whose label is Arabic even on the English page. */
[dir="rtl"] .nav__link,
[dir="rtl"] .nav__mark,
[dir="rtl"] .menu__item a,
.nav__lang[lang="ar"] {
  letter-spacing: 0;
  text-transform: none;
}
[dir="rtl"] .nav__link,
[dir="rtl"] .menu__item a { font-size: var(--text-body-sm); }

@media (max-width: 1180px) {
  .nav__links { gap: var(--element-gap); }
}
@media (max-width: 560px) {
  .nav { padding-top: calc(var(--spacing-16) * 2); }
}