/* Atelier Ali — site styles.
   Type and the chrome around it (margins, buttons, strip) are fixed Figma px
   at every screen size. Only the image layout is fluid: the grid sizes from
   its container's width (cqw), so the 1440×810 frame scales its images and
   never goes stale on resize. */

@font-face {
  font-family: 'FT Aktual';
  src: url('../fonts/FTAktual-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Items Text';
  src: url('../fonts/ItemsText-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --m: 16px;
  --vh: 100vh;

  --ink: #212121;
  --ink-soft: rgba(33, 33, 33, 0.6);
  --paper: #ffffff;
  --tile-bg: #f0f0f0;
  --snow: #fafafa;
  --snow-soft: rgba(250, 250, 250, 0.6);
  --night: #212121;
  --scrim: rgba(26, 26, 26, 0.9);
  --btn-quiet: #4f4f4f;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);   /* 1/1 Studio's fade curve */

  --sans: 'FT Aktual', Helvetica, Arial, sans-serif;
  --serif: 'Items Text', Georgia, 'Times New Roman', serif;
  --sans-features: "case" 1, "ordn" 1, "ss03" 1;  /* ss03 = FT Aktual's alternate R */
  --serif-features: "case" 1, "ordn" 1;           /* no ss03: in Items Text it's a single-story a */

  --t-xs: 8px;
  --t-sm: 10px;
  --t-md: 12px;
  --t-nav: 13px;
  --t-lg: 16px;

  scrollbar-gutter: stable;
}
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: var(--sans-features);
  font-weight: 400;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

button, a, [role="button"] {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.trim {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ── NAV ── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 950;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--m) var(--m) 0;
  pointer-events: none;
}
#nav > * {
  pointer-events: auto;
  color: var(--ink);
  transition: color 300ms ease;
}
/* set by site.js from what is behind each element: dark images, details panel */
#nav > [data-tone="light"] { color: var(--snow); }

.nav-logo a {
  position: relative;
  display: block;
  transition: opacity 150ms ease;
}
/* invisible hit areas: ~44px tall for fingers, no visual change */
.nav-logo a::before { content: ''; position: absolute; inset: -18px -12px; }

.nav-logo {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nav-links {
  margin: 0;
  font-family: var(--serif);
  font-feature-settings: var(--serif-features);
  font-weight: 300;
  font-size: var(--t-nav);
  line-height: 1.35;
  text-align: right;
}
.nav-links a {
  position: relative;
  transition: opacity 150ms ease;
}
.nav-links a::before { content: ''; position: absolute; inset: -18px -3px; }

/* ── GRID ── */
/* Figma: four 162px tiles across a 1440 frame, rows every 472px. Tiles scale
   with the window but never drop below 140px; the column count steps down
   (4 → 3 → 2) on its own as the window narrows, so there is no cliff. */
#page-work { container-type: inline-size; }
.grid {
  --tile: max(140px, calc(162 * 100cqw / 1440));
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tile));
  justify-content: space-between;
  column-gap: max(48px, calc(180 * 100cqw / 1440));   /* minimum; space-between widens it */
  grid-auto-rows: calc(var(--tile) * 2.914);          /* 472 / 162 */
  margin: 0;
  padding: max(44px, calc(44 * 100cqw / 1440)) var(--m) 0;
}

.tile {
  display: block;
  min-width: 0;
  align-self: start;
  cursor: pointer;
  transition: opacity 200ms var(--ease-soft);
}
.tile:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--tile-bg) center / cover no-repeat;
}
.media img,
.media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media video { z-index: 1; }

/* load-in: the full image fades up over its blurred placeholder */
.media img,
.focus-media img.focus-img {
  opacity: 0;
  transition: opacity 400ms var(--ease-soft);
}
.media img.is-loaded,
.focus-media img.focus-img.is-loaded { opacity: 1; }

.caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--t-sm);
  line-height: 1.35;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.caption span {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.caption .sub { color: var(--ink-soft); }
/* hidden until the tile is hovered or keyboard-focused; always shown on touch */
.caption {
  opacity: 0;
  transition: opacity 150ms var(--ease-soft);
}
.tile:focus-visible .caption { opacity: 1; }


/* ── FOCUS VIEW ── */
#focus {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--paper);
  visibility: hidden;
  opacity: 0;
}
#focus.is-open { visibility: visible; opacity: 1; }

/* fades as a whole, the image already in place: 300ms in, 200ms out */
#focus {
  transition: opacity 200ms var(--ease-soft), visibility 0s linear 200ms;
}
#focus.is-open {
  transition: opacity 300ms var(--ease-soft);
}
#focus.no-anim, #focus.no-anim * { transition: none !important; }

.stage {
  --sh: min(
    calc(var(--vh) - 2 * var(--m)),
    calc((100vw - 2 * var(--m) - 2 * (43px + 32px)) * 1.25)
  );
  position: absolute;
  inset: 0;
  margin: auto;
  height: var(--sh);
  width: calc(var(--sh) * 0.8);
  z-index: 2;
  touch-action: pan-y pinch-zoom;
}
.stage:focus { outline: none; }

.focus-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--tile-bg) center / cover no-repeat;
}
.focus-media img,
.focus-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.focus-media video { z-index: 1; }
.focus-media .is-leaving {
  z-index: 3;
  opacity: 1;
  transition: opacity 300ms var(--ease-soft) 75ms;
}
.focus-media .is-leaving.is-gone { opacity: 0; }

/* shared button look: View Details + / Close − */
.focus-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  padding: 8px;
  background: var(--night);
  color: var(--snow);
  font-size: var(--t-md);
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: opacity 150ms var(--ease-soft), background-color 150ms var(--ease-soft);
}
.focus-btn span { display: block; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
#focus .focus-btn:active { opacity: 0.8; transition-duration: 80ms; }  /* beats the hover reveal */
.focus-btn:focus-visible { outline: 1px solid var(--snow); outline-offset: 2px; }
/* bigger hit area for fingers, no visual change */
.focus-btn::before { content: ''; position: absolute; inset: -10px; }

.details-btn { opacity: 0; }
.stage:focus-within .details-btn:focus-visible { opacity: 1; }
#focus.show-details .details-btn { opacity: 0; pointer-events: none; }

/* details: the white ground goes dark under the strip, then the scrim dims
   everything above it (Figma: 90% #1a1a1a over #212121) */
#focus::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--night);
  opacity: 0;
  transition: opacity 200ms var(--ease-soft);
}
#focus.show-details::before {
  opacity: 1;
  transition: opacity 300ms var(--ease-soft);
}

/* scrim + details */
.scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-soft);
}
#focus.show-details .scrim {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 300ms var(--ease-soft);
}

.details {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--night);
  color: var(--snow);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  transition: opacity 200ms var(--ease-soft), visibility 0s linear 200ms;
}
.details::-webkit-scrollbar { display: none; }
#focus.show-details .details {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms var(--ease-soft);
}

.details-title {
  margin: 0;
  padding-right: 84px;                     /* clear the Close button */
  font-family: var(--serif);
  font-feature-settings: var(--serif-features);
  font-weight: 300;
  font-size: var(--t-lg);
  line-height: 1.2;
  color: #ffffff;
  overflow-wrap: anywhere;
}
.details-title span { display: block; }

.close-btn { background: var(--btn-quiet); }

.credits {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 328px;
}
.credits[hidden] { display: none; }
.credits-label {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-feature-settings: var(--sans-features), "dlig" 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.credit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--t-sm);
  line-height: 1.35;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.credit span { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.credit .role { color: var(--snow-soft); }

/* ── STRIP ── */
.strip {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--m);
  z-index: 0;
  margin: auto 0;
  width: 43px;
  height: min(452px, calc(var(--vh) - 2 * var(--m)));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }

.strip-track { display: flex; flex-direction: column; }

.thumb {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  aspect-ratio: 43 / 53;
  margin: 0 0 4px;
  overflow: hidden;
  background: var(--tile-bg);
  opacity: 0.3;
  transition: opacity 150ms var(--ease-soft);
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb.is-active { opacity: 1; }

/* native snapping: one thumb per flick, the active one centred */
.strip { scroll-snap-type: y mandatory; }
.thumb { scroll-snap-align: center; }
.thumb:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* ── HOVER (pointer devices only) ── */
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover,
  .nav-logo a:hover { opacity: 0.4; }
  .tile:hover .caption { opacity: 1; }
  .stage:hover .details-btn { opacity: 1; }
  .thumb:not(.is-active):hover { opacity: 0.6; }
  .details-btn:hover { background: #000000; }
  .close-btn:hover { background: #5c5c5c; }
}

/* touch: no hover to reveal the button, so it is always there; tiles get
   press feedback since the browser's tap flash is switched off */
@media not ((hover: hover) and (pointer: fine)) {
  .details-btn { opacity: 1; }
  .caption { opacity: 1; }
  .tile .media { transition: opacity 150ms var(--ease-soft); }
  .tile:active .media { opacity: 0.85; transition-duration: 80ms; }
}

/* ── PHONES: two full-width columns ── */
@media (max-width: 560px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: normal;
    column-gap: 16px;
    row-gap: 48px;
    grid-auto-rows: auto;
    padding: 56px 16px calc(48px + env(safe-area-inset-bottom, 0px));
  }
  #nav { padding-top: max(16px, env(safe-area-inset-top, 0px)); }
}

/* ── NARROW WINDOWS: focus view puts the strip along the bottom ── */
@media (max-width: 700px) {
  .stage {
    --sh: min(
      calc(var(--vh) - 44px - 53px - 48px - env(safe-area-inset-bottom, 0px)),
      calc((100vw - 32px) * 1.25)
    );
    inset: 44px 0 calc(53px + 32px + env(safe-area-inset-bottom, 0px)) 0;
  }
  .focus-btn { top: 12px; right: 12px; padding: 8px; }

  .details { padding: 16px; }
  .details-title { padding-right: 84px; }
  .credits { gap: 16px; padding-top: 32px; }
  .credit { gap: 6px; }

  .strip {
    top: auto;
    left: 0;
    right: 0;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    width: auto;
    height: 53px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .strip-track { flex-direction: row; }
  .strip { scroll-snap-type: x mandatory; }
  .thumb {
    width: 43px;
    height: 53px;
    aspect-ratio: auto;
    margin: 0 4px 0 0;
  }
}

/* ── INFORMATION ── */
/* Shared: one hierarchy, one grid, one fade.
   Hierarchy — 8px uppercase labels (the "CREDITS" voice), a 16px serif lead,
   13px serif lists set side by side, 10px sans meta.
   Grid — the overlay is a size container, so 100cqw here is the same width
   the work grid measures; --tile/--gap reproduce its four columns exactly
   (x 16 / 431 / 847 / 1262 at 1440).
   Motion — backdrop 300ms in / 200ms out; content follows 75ms behind, list
   columns 40ms apart. Opacity only. */
#info-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  container-type: inline-size;
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms var(--ease-soft), visibility 0s linear 200ms;
}
#info-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 300ms var(--ease-soft);
}

.info-modal {
  --tile: max(140px, calc(162 * 100cqw / 1440));
  --gap: calc((100cqw - 2 * var(--m) - 4 * var(--tile)) / 3);
  position: relative;
  color: var(--ink);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  opacity: 0;
  transition: opacity 200ms var(--ease-soft);
}
.info-modal::-webkit-scrollbar { display: none; }
.info-modal:focus { outline: none; }
#info-overlay.open .info-modal {
  opacity: 1;
  transition: opacity 300ms var(--ease-soft) 75ms;
}

/* list columns arrive one after another */
.info-col { opacity: 0; transition: opacity 150ms var(--ease-soft); }
#info-overlay.open .info-col {
  opacity: 1;
  transition: opacity 300ms var(--ease-soft);
}
#info-overlay.open .info-col:nth-child(1) { transition-delay: 115ms; }
#info-overlay.open .info-col:nth-child(2) { transition-delay: 155ms; }
#info-overlay.open .info-col:nth-child(3) { transition-delay: 195ms; }

.info-modal__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.info-modal__sections { display: flex; flex-direction: column; gap: 40px; }
.info-row { display: flex; flex-direction: column; gap: 14px; }
.info-lists { display: flex; flex-direction: column; gap: 32px; }

.info-label {
  font-size: var(--t-xs);
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.info-meta {
  font-size: var(--t-sm);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.info-title {
  display: none;
  margin: 0;
  font-family: var(--serif);
  font-feature-settings: var(--serif-features);
  font-weight: 300;
  font-size: var(--t-lg);
  line-height: 1.2;
}
.info-body {
  margin: 0;
  font-family: var(--serif);
  font-feature-settings: var(--serif-features);
  font-weight: 300;
  font-size: var(--t-nav);
  line-height: 1.35;
  color: var(--ink);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.info-body--lead { font-size: var(--t-lg); line-height: 1.2; max-width: 36em; }

.info-email {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.info-link { transition: opacity 150ms ease; }

/* close: the site's button */
.info-close {
  flex: none;
  position: relative;
  padding: 8px;
  background: var(--night);
  color: var(--snow);
  font-size: var(--t-md);
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: opacity 150ms var(--ease-soft), background-color 150ms var(--ease-soft);
}
.info-close span { display: block; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.info-close .info-close-live { display: none; }
.info-close::before { content: ''; position: absolute; inset: -10px; }
.info-close:active { opacity: 0.8; transition-duration: 80ms; }

@media (hover: hover) and (pointer: fine) {
  .info-link:hover { opacity: 0.4; }
  .info-close:hover { background: #000000; }
}

/* the full-screen looks leave the nav on top; "Information" toggles them */
html[data-info="page"].info-open #nav,
html[data-info="sheet"].info-open #nav,
html[data-info="index"].info-open #nav { z-index: 1001; }
html[data-info="page"] .info-close,
html[data-info="sheet"] .info-close,
html[data-info="index"] .info-close { display: none; }

/* subgrids take the parent's column gutters only if they don't set their own;
   the flex 'gap' on these elements would otherwise override them */
html[data-info="page"] .info-lead,
html[data-info="page"] .info-lists,
html[data-info="sheet"] .info-lists,
html[data-info="index"] .info-modal__sections,
html[data-info="index"] .info-lists { column-gap: normal; }

/* ─ 1 · PAGE — labels in column 1, a big lead across 2–3, lists in 2 / 3 / 4 ─ */
html[data-info="page"] #info-overlay { background: var(--paper); }
html[data-info="page"] .info-modal {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, var(--tile));
  grid-template-rows: auto 1fr auto;
  column-gap: var(--gap);   /* explicit gap: subgrids inherit it, unlike space-between */
  padding: 44px var(--m) 32px;
}
html[data-info="page"] .info-modal__sections { grid-column: 1 / -1; display: contents; }
html[data-info="page"] .info-lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
html[data-info="page"] .info-lead .info-body { grid-column: 2 / span 2; }
html[data-info="page"] .info-lists {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin-top: 64px;
  align-content: start;
}
html[data-info="page"] .info-col:nth-child(1) { grid-column: 2; }
html[data-info="page"] .info-col:nth-child(2) { grid-column: 3; }
html[data-info="page"] .info-col:nth-child(3) { grid-column: 4; }
html[data-info="page"] .info-modal__top { grid-column: 1 / -1; grid-row: 3; }

/* ─ 2 · PANEL — a card exactly over columns 2–3, top-aligned with the grid ─ */
html[data-info="panel"] #info-overlay {
  background: rgba(255, 255, 255, 0.97);
  align-items: flex-start;
  padding: 44px 0 var(--m);
}
html[data-info="panel"] .info-modal {
  margin-left: calc(var(--m) + var(--tile) + var(--gap));
  width: calc(2 * var(--tile) + var(--gap));
  max-height: calc(var(--vh) - 44px - var(--m));
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid #e8e8e8;
}
html[data-info="panel"] .info-lists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* ─ 3 · DARK — the View Details panel: same stage box, same scrim ─ */
html[data-info="dark"] #info-overlay { background: var(--scrim); }
html[data-info="dark"] .info-modal {
  --sh: min(calc(var(--vh) - 2 * var(--m)), calc((100cqw - 2 * var(--m)) * 1.25));
  margin: auto;
  height: var(--sh);
  width: calc(var(--sh) * 0.8);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
  background: var(--night);
  color: var(--snow);
}
html[data-info="dark"] .info-title { display: block; color: #ffffff; padding-right: 84px; }
html[data-info="dark"] .info-modal__top { position: absolute; top: 16px; right: 16px; }
html[data-info="dark"] .info-modal__top .info-meta { display: none; }
html[data-info="dark"] .info-modal__sections { flex: 1; }
html[data-info="dark"] .info-lead .info-label { display: none; }
html[data-info="dark"] .info-lists {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
html[data-info="dark"] .info-label,
html[data-info="dark"] .info-meta { color: var(--snow-soft); }
html[data-info="dark"] .info-body { color: #ffffff; }
html[data-info="dark"] .info-email { color: var(--snow-soft); }
html[data-info="dark"] .info-close { background: var(--btn-quiet); }
@media (hover: hover) and (pointer: fine) {
  html[data-info="dark"] .info-close:hover { background: #5c5c5c; }
}

/* ─ 4 · SHEET — a column over 3–4; the work stays visible under a veil ─ */
html[data-info="sheet"] #info-overlay {
  background: rgba(255, 255, 255, 0.6);
  justify-content: flex-end;
}
html[data-info="sheet"] .info-modal {
  width: calc(100cqw - 2 * (var(--tile) + var(--gap)));   /* from column 3's left edge, minus its 16px inset */
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, var(--tile));
  grid-template-rows: auto 1fr auto;
  column-gap: var(--gap);
  padding: 44px var(--m) 32px;
  background: var(--paper);
}
html[data-info="sheet"] .info-modal__sections { grid-column: 1 / -1; display: contents; }
html[data-info="sheet"] .info-lead { grid-column: 1 / -1; }
html[data-info="sheet"] .info-lists {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 32px;
  margin-top: 48px;
  align-content: start;
}
html[data-info="sheet"] .info-col:nth-child(3) { grid-column: 1; }
html[data-info="sheet"] .info-modal__top { grid-column: 1 / -1; grid-row: 3; }

/* ─ 5 · INDEX — a colophon on the grid: lead in column 1, lists in 2 / 3 / 4 ─ */
html[data-info="index"] #info-overlay { background: var(--paper); }
html[data-info="index"] .info-modal {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, var(--tile));
  grid-template-rows: auto 1fr auto;
  column-gap: var(--gap);
  padding: 44px var(--m) 32px;
}
html[data-info="index"] .info-modal__sections {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
}
/* the lead sits in column 1 but borrows the gutter, stopping 32px short of
   column 2, so it reads as a paragraph rather than a narrow strip */
html[data-info="index"] .info-lead {
  grid-column: 1;
  width: calc(var(--tile) + var(--gap) - 32px);
}
html[data-info="index"] .info-lead .info-body { font-size: var(--t-nav); line-height: 1.35; }
html[data-info="index"] .info-lists {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
html[data-info="index"] .info-modal__top { grid-column: 1 / -1; grid-row: 3; }

/* ─ LIVE — the panel alisafeer.com has today, unchanged: a white card centred
   on an 88% white veil, labels stacked over their text. The default; the
   five looks above are preview-only (?info=) while Ali gathers feedback. ─ */
html[data-info="live"] #info-overlay {
  align-items: center;
  justify-content: center;
  padding: 18.792px;
  background: rgba(255, 255, 255, 0.88);
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
html[data-info="live"] #info-overlay.open { transition: opacity 0.3s ease; }
/* one fade for the whole panel, as on the live site */
html[data-info="live"] .info-modal,
html[data-info="live"] .info-col { opacity: 1; transition: none; }
html[data-info="live"] .info-modal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 801px;
  max-width: 100%;
  max-height: calc(100dvh - 37.584px);
  padding: 32px;
  background: #ffffff;
  color: #444444;
  border: 1px solid #e8e8e8;
}
html[data-info="live"] .info-modal__top { align-self: stretch; gap: 0; }
html[data-info="live"] .info-modal__sections { align-self: stretch; align-items: flex-start; gap: 32px; }
html[data-info="live"] .info-lists { display: contents; }
html[data-info="live"] .info-row { align-self: stretch; align-items: flex-start; gap: 16px; }
html[data-info="live"] .info-label,
html[data-info="live"] .info-meta,
html[data-info="live"] .info-close {
  font-family: var(--sans);
  font-feature-settings: "ss03" 1;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #444444;
}
html[data-info="live"] .info-body {
  font-feature-settings: normal;
  font-size: 16px;
  line-height: 1.2;
  color: #444444;
}
html[data-info="live"] .info-body--lead { font-size: 20px; max-width: none; }
html[data-info="live"] .info-email { color: #444444; }   /* what the live site shows (its #aaa rule is overridden there) */
html[data-info="live"] .info-close {
  padding: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
html[data-info="live"] .info-close .info-close-std { display: none; }
html[data-info="live"] .info-close .info-close-live { display: block; }
html[data-info="live"] .info-close .info-close-live span { display: inline; text-box-trim: none; }
@media (hover: hover) and (pointer: fine) {
  html[data-info="live"] .info-close:hover { background: none; opacity: 0.4; }
}
@media (max-width: 560px) {
  html[data-info="live"] .info-modal { padding: 24px; }
  html[data-info="live"] .info-body--lead { font-size: 18px; }
  html[data-info="live"] .info-modal__top { gap: 16px; }
  html[data-info="live"] .info-modal__top .info-meta { flex: 1 1 auto; }
  /* ~44px touch target without moving the label; no ESC key on touch */
  html[data-info="live"] .info-close { flex: 0 0 auto; padding: 16px; margin: -16px; }
  html[data-info="live"] .info-close .info-close-live .info-esc { display: none; }
}

/* ── narrow windows: every redesign look stacks into one column ── */
@media (max-width: 900px) {
  html[data-info]:not([data-info="live"]) .info-modal,
  html[data-info]:not([data-info="live"]) .info-modal__sections,
  html[data-info]:not([data-info="live"]) .info-lead,
  html[data-info]:not([data-info="live"]) .info-lists {
    display: flex;
    flex-direction: column;
  }
  html[data-info]:not([data-info="live"]) .info-modal { gap: 32px; }
  html[data-info]:not([data-info="live"]) .info-modal__sections { gap: 40px; }
  html[data-info]:not([data-info="live"]) .info-lists { gap: 32px; margin-top: 0; }
  html[data-info]:not([data-info="live"]) .info-modal__top { order: 9; }
  html[data-info="page"] .info-modal,
  html[data-info="index"] .info-modal { padding: 64px var(--m) 32px; }
  html[data-info="panel"] #info-overlay { padding: var(--m); }
  html[data-info="panel"] .info-modal { margin: 0; width: 100%; max-height: calc(var(--vh) - 2 * var(--m)); }
  html[data-info="panel"] .info-modal__top { order: 0; }
  html[data-info="sheet"] .info-modal { width: 100%; padding: 64px var(--m) 32px; }
  html[data-info="dark"] .info-modal { height: auto; max-height: calc(var(--vh) - 2 * var(--m)); width: calc(100cqw - 2 * var(--m)); }
  html[data-info="dark"] .info-modal__top { order: 0; }
  html[data-info="dark"] .info-lists { margin-top: 0; }
  html[data-info="index"] .info-lead { width: auto; }
}

/* ── REDUCED MOTION: fades only, no movement ── */
/* reduced motion: the site already only fades — nothing to remove */