/* 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-sans: 12px;   /* sans: logo, captions, credits, buttons */
  --t-label: 10px;  /* sans, uppercase labels: Credits, Services… */
  --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; }

/* Windows and Linux keep a scrollbar's width free at the right edge
   (scrollbar-gutter: stable, so nothing reflows when the page locks). Nothing
   on the page can paint there, only the root's background colour (one
   colour: a gradient isn't drawn there), so while a dark layer is up the
   root takes that layer's colour — over Information the veil's, its larger
   part. It changes in one step halfway through the layer's fade in, and back
   at once on the way out (animating the root's background would restyle the
   whole page on every frame). Only where that space exists (has-gutter, set
   by site.js), so Safari's toolbar tint never sees it. */
html { background: var(--paper); }
html.has-gutter[data-details],
html.has-gutter.info-open[data-details] { background: #1a1a1a; }   /* the scrim over the dark ground */
html.has-gutter.info-open { background: #767676; }                  /* the veil over white */
html.has-gutter[data-details],
html.has-gutter.info-open { transition: background-color 0s linear 150ms; }

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; }

/* selected text: the tile grey behind the type, as 1/1 Studio's does; on
   the dark surfaces, the quiet button grey */
::selection { background: var(--tile-bg); }
.details ::selection,
#info-overlay ::selection { background: var(--btn-quiet); }

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;
}

/* type boxes trimmed to the cap height and the baseline, so every space is
   measured from the letters themselves */
.trim,
.caption span,
.focus-btn span,
.credits-label,
.credit span,
.credit a.name,
.info-label,
.info-meta,
.info-body {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ── NAV ── */
/* The logo on column 1, Information on the last column's line (as 1/1
   Studio sets its header on columns): the link is a tile wide and flush
   right, which is exactly where space-between puts the grid's last column.
   Always dark over the work; light over the dark details panel and the
   Information band (it reads Close there). */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 950;
  container-type: inline-size;
  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;
}
html[data-details] #nav > *,
html.info-open #nav > * { color: var(--snow); }
/* over Information the nav sits above the veil, on the band's solid top
   edge (.info-modal), so the two fade in as one */
html.info-open #nav { z-index: 1001; }

.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-sans);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;   /* 1%, as in the Figma */
  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;
}
#nav > .nav-links {
  flex: none;
  /* = the grid's --tile (100cqw here is the nav's width inside its 16px
     padding; the grid measures the full width) */
  width: max(140px, calc(162 * (100cqw + 2 * var(--m)) / 1440));
  pointer-events: none;                              /* only the link takes clicks */
}
.nav-links a {
  position: relative;
  pointer-events: auto;
  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 {
  min-width: 0;
  align-self: start;
  cursor: pointer;
}
.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,
.focus-media img,
.focus-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media video,
.focus-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; }

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

/* ── FOCUS VIEW ── */
/* fades as a whole, the image already in place: 300ms in, 200ms out. Fading
   out it lets clicks through, so a tile clicked meanwhile opens (site.js
   holds it until the fade is done) */
#focus {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--paper);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-soft), visibility 0s linear 200ms;
}
#focus.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  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 .is-leaving {
  z-index: 3;
  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-sans);
  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; }
.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; }
.details-btn:focus-visible { opacity: 1; }
#focus.show-details .details-btn { opacity: 0; pointer-events: none; }

/* Close sits over the details panel, not in its scroller, so a long credit
   list scrolls under it; it fades with the panel */
.close-btn {
  background: var(--btn-quiet);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--ease-soft), visibility 0s linear 200ms, background-color 150ms var(--ease-soft);
}
#focus.show-details .close-btn {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms var(--ease-soft), background-color 150ms var(--ease-soft);
}
#focus .focus-btn:active { opacity: 0.8; transition-duration: 80ms; }  /* beats the hover reveal */

/* 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; }

.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-label);
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-feature-settings: var(--sans-features), "dlig" 1;
}
.credit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--t-sans);
  line-height: 1.35;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.credit .role { color: var(--snow-soft); }
/* a credited collaborator with a link: the site's fade hover */
.credit a.name { display: block; transition: opacity 150ms var(--ease-soft); }

/* ── STRIP ── */
/* native snapping: one thumb per flick, the active one centred */
.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;
  scroll-snap-type: y mandatory;
}
.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);
  scroll-snap-align: center;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb.is-active { opacity: 1; }
.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; }
  .credit a.name:hover { opacity: 0.6; }
  .info-link:hover { opacity: 0.4; }
}

/* 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)); }
  #nav > .nav-links { width: calc((100cqw - var(--m)) / 2); }   /* the phone grid's second column */
}

/* ── 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; }

  .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;
    scroll-snap-type: x mandatory;
  }
  .strip-track { flex-direction: row; }
  .thumb {
    width: 43px;
    height: 53px;
    aspect-ratio: auto;
    margin: 0 4px 0 0;
  }
}

/* ── INFORMATION ── */
/* A dark band across the top in View Details' colours, only as tall as its
   type, the work veiled below; the type sits on the grid's column lines
   (the description in column 1, the three lists on 2 / 3 / 4); the nav
   stays on top and its link reads Close.
   Grid — the overlay is a size container, so 100cqw here is the width the
   work grid measures; --tile/--gap reproduce its columns exactly.
   Motion — the veil and sheet fade in 300ms; the type follows block by
   block in reading order (lead, each list, the footer), 40ms apart after
   75ms. Closing, everything fades together in 150ms. Opacity only. */
#info-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  container-type: inline-size;
  display: flex;
  align-items: flex-start;
  background: rgba(26, 26, 26, 0.6);
  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);
}

/* the band: the full width, the grid's four columns. Its top edge is the
   nav's row (44px, solid): a band taller than the screen scrolls its type
   under that edge, never under the nav, and the type starts 32px below it.
   The footer line sits as far from the bottom edge as the type does from
   the sides. */
.info-modal {
  --tile: max(140px, calc(162 * 100cqw / 1440));
  --gap: calc((100cqw - 2 * var(--m) - 4 * var(--tile)) / 3);
  position: relative;
  width: 100%;
  max-height: 100%;
  display: grid;
  grid-template-columns: repeat(4, var(--tile));
  column-gap: var(--gap);
  align-content: start;
  border-top: 44px solid var(--night);
  padding: 32px var(--m) var(--m);
  background: var(--night);
  color: var(--snow);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.info-modal::-webkit-scrollbar { display: none; }
.info-modal:focus { outline: none; }

/* the description takes column 1 and its gutter, stopping short of column 2 */
.info-lead { grid-column: 1; grid-row: 1; width: calc(var(--tile) + var(--gap) - 32px); }
.info-lists {
  grid-column: 2 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
}
.info-row { display: flex; flex-direction: column; gap: 14px; }
.info-foot { grid-column: 1 / -1; grid-row: 2; padding-top: 48px; }

/* the type arrives in reading order */
.info-lead, .info-col, .info-foot { opacity: 0; transition: opacity 150ms var(--ease-soft); }
#info-overlay.open .info-lead,
#info-overlay.open .info-col,
#info-overlay.open .info-foot {
  opacity: 1;
  transition: opacity 300ms var(--ease-soft) calc(75ms + var(--i, 0) * 40ms);
}
.info-lead { --i: 0; }
.info-col:nth-child(1) { --i: 1; }
.info-col:nth-child(2) { --i: 2; }
.info-col:nth-child(3) { --i: 3; }
.info-foot { --i: 4; }

.info-label {
  font-size: var(--t-label);
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--snow-soft);
}
.info-meta {
  display: block;   /* its own trimmed box, so the band's 16px foot is measured from the text */
  font-size: var(--t-sans);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--snow-soft);
}
.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: #ffffff;
}
.info-body--lead { font-size: var(--t-lg); line-height: 1.2; }
/* a list line may run into the gutter rather than wrap (narrow tiles) */
.info-lists .info-body { white-space: nowrap; }

/* email and Instagram, in the description */
.info-email {
  color: var(--snow-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.info-link { transition: opacity 150ms ease; }

/* the grid steps down to three columns below 947px and two below 603px
   (where four, then three, tiles and their gaps stop fitting): the
   description goes above the lists and the type keeps to those same lines */
@container (width < 947.2px) {
  .info-modal {
    --gap: calc((100cqw - 2 * var(--m) - 3 * var(--tile)) / 2);
    grid-template-columns: repeat(3, var(--tile));
  }
  .info-lead { grid-column: 1 / span 2; width: auto; }
  .info-lists { grid-column: 1 / -1; grid-row: 2; margin-top: 64px; }
  .info-foot { grid-row: 3; }
}
@container (width < 602.67px) {
  .info-modal {
    --gap: calc(100cqw - 2 * var(--m) - 2 * var(--tile));
    grid-template-columns: repeat(2, var(--tile));
  }
  .info-lead { grid-column: 1 / -1; }
  .info-lists { row-gap: 32px; }
  .info-col:nth-child(3) { grid-column: 1; }   /* Studio Experience under Services */
}
/* phones: one column, everything on the left edge (the nav's row is 56px) */
@media (max-width: 560px) {
  .info-modal {
    grid-template-columns: minmax(0, 1fr);
    border-top-width: 56px;
  }
  .info-lists { margin-top: 48px; }
  .info-lists .info-body { white-space: normal; }
}