/* ============================================================
   AFTR — shell
   Every geometric and timing value below is measured off
   harena.studio on 2026-08-12. See HARENA-SPEC.md for provenance.
   Nothing here is chosen by taste.
   ============================================================ */

:root{
  /* --- SWAP POINTS: change these two when the brand font lands --- */
  --font-display: "Xanh Mono", ui-monospace, "Courier New", monospace;   /* free Google font — the same one Harena uses */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* placeholder for the paid 11px face */

  /* --- colour, ported --- */
  --ground:  #FFFCF7;
  --ink:     #362A10;
  --ink-2:   rgba(43,43,43,.8);
  --accent:  #0000EE;
  --slot:    #F5F5F5;

  /* --- layout, ported --- */
  --content: 1340px;
  --gutter: 50px;

  /* hero lattice: 10 cols, pitch 138.46px of 1440 = 10.3333% of content */
  --h-pitch: 10.3333%;
  --h-w: 94px;
  --h-h: 117px;          /* ratio 0.8 */
  --h-row: 186px;

  /* hero INTRO start row: 54x67 at y=250, pitch 99px = 7.3881% of content */
  --h-start-pitch: 7.3881%;
  --h-start-w: 54px;
  --h-start-h: 67px;
  --h-start-y: 250px;

  /* second lattice: 12 cols, pitch 114.9px of 1440 = 8.575% of content */
  --g-pitch: 8.575%;
  --g-w: 75px;
  --g-h: 94px;
  --g-row: 342.5px;

  /* selected work: 5-up, pitch 270px of 1440 = 20.15% of content */
  --w-pitch: 20.15%;
  --w-w: 260px;
  --w-h: 380px;          /* ratio 0.684 */

  /* --- MOTION, measured --- */

  /* The hold before the row releases. On harena.studio the row is
     server-rendered and paints at 116ms, but the spread does not fire
     until ~1895ms, because Framer has to download and hydrate first.
     So their ~1.75s beat is an accident of the platform, not a design
     decision. Our page is static and has nothing to hydrate, so it has
     to be deliberate or the row never holds at all.
     THIS IS THE DIAL. Change this one number to taste. */
  --intro-hold: 1750ms;

  --intro-dur: 940ms;
  /* Fallback bezier for browsers without linear(). Overridden below. */
  --intro-ease: cubic-bezier(.22,.61,.24,1);
}

/* Their easing, baked in verbatim from the recorded curve rather than
   eyeballed. All 31 samples kept (recorded at ~20ms over one run, then
   normalised against the 940ms settle). Spring, no overshoot.
   Diffed against the live site: max error 0.8% of travel. */
@supports (transition-timing-function: linear(0, 1)){
  :root{
    --intro-ease: linear(
      0,
      0.001 1.7%,  0.007 3.9%,  0.017 6.2%,  0.033 8.4%,
      0.057 10.6%, 0.094 12.9%, 0.146 15.1%, 0.218 17.2%,
      0.301 19.5%, 0.383 21.7%, 0.453 23.9%, 0.517 26.2%,
      0.570 28.4%, 0.617 30.6%, 0.657 32.8%, 0.690 35%,
      0.722 37.2%, 0.750 39.4%, 0.775 41.6%, 0.798 43.9%,
      0.818 46.1%, 0.836 48.3%, 0.852 50.5%, 0.867 52.8%,
      0.882 55%,   0.894 57.2%, 0.906 59.4%, 0.916 61.6%,
      0.926 63.7%, 1
    );
  }
}

html{ font-size:62.5%; }              /* matches their 62.5% root so the scale ports */
*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------
   TYPE — measured off rendered text
   ------------------------------------------------------------ */
.display-lg{ font-family:var(--font-display); font-size:50px; line-height:55px; letter-spacing:-2px; font-weight:400; margin:0; }
.display-md{ font-family:var(--font-display); font-size:35px; line-height:38.5px; letter-spacing:-1.4px; font-weight:400; margin:0; }
.label{ font-family:var(--font-ui); font-size:11px; line-height:11px; letter-spacing:.44px; margin:0; text-transform:uppercase; color:var(--ink-2); }

a{ color:var(--accent); text-decoration:none; }

/* ------------------------------------------------------------ NAV */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--gutter);
  font-size:11px; letter-spacing:.44px;
  mix-blend-mode:multiply;
}
.nav__mark{ color:var(--ink); }
.nav__centre{ color:var(--ink-2); }
.nav__menu{ background:none; border:0; padding:0; cursor:pointer; font:inherit; letter-spacing:inherit; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.dot{ width:10px; height:10px; border-radius:50%; background:var(--ink); display:inline-block; }

/* ------------------------------------------------------------ CONTAINER */
main > section{ max-width:var(--content); margin-inline:auto; position:relative; }
@media (max-width:1440px){ main > section{ margin-inline:var(--gutter); } }

/* ------------------------------------------------------------
   THE LATTICE — a rigid grid with cells deliberately left empty.
   The empty cells are the design, not an oversight.
   ------------------------------------------------------------ */
.lattice{ position:relative; width:100%; }

.slot{
  position:absolute; margin:0;
  background:var(--slot);
  outline:1px solid rgba(54,42,16,.10);   /* shell-only, so empty slots read. Remove for production. */
}

/* ---- hero: INITIAL STATE = the single start row ---- */
.lattice--10{ height:861px; }             /* 4*186 + 117 */
.lattice--10 .slot{
  left:calc(var(--i) * var(--h-start-pitch));
  top:var(--h-start-y);
  width:var(--h-start-w);
  height:var(--h-start-h);
  transition:
    left   var(--intro-dur) var(--intro-ease) var(--intro-hold),
    top    var(--intro-dur) var(--intro-ease) var(--intro-hold),
    width  var(--intro-dur) var(--intro-ease) var(--intro-hold),
    height var(--intro-dur) var(--intro-ease) var(--intro-hold);
}

/* ---- hero: FINAL STATE = the scattered lattice ----
   No stagger. Measured first-movement spread across all 14 images was
   16-107ms, i.e. frame noise. They all leave together. Do not add one. */
.hero.is-in .lattice--10 .slot{
  left:calc(var(--col) * var(--h-pitch));
  top:calc(var(--row) * var(--h-row));
  width:var(--h-w);
  height:var(--h-h);
}

/* ---- second lattice (static — no intro on this one) ---- */
.lattice--12{ height:2492px; }            /* 7*342.5 + 94 */
.lattice--12 .slot{
  width:var(--g-w); height:var(--g-h);
  left:calc(var(--col) * var(--g-pitch));
  top:calc(var(--row) * var(--g-row));
}

/* ------------------------------------------------------------ SECTIONS */
.hero{ height:900px; }

.statement{ min-height:678px; display:flex; flex-direction:column; justify-content:center; gap:40px; }

.works{ min-height:811px; padding-top:60px; }
.works__row{ position:relative; height:var(--w-h); margin-top:190px; }
.slot--work{ position:absolute; top:0; width:var(--w-w); height:var(--w-h); }
.slot--work:nth-child(1){ left:calc(0 * var(--w-pitch)); }
.slot--work:nth-child(2){ left:calc(1 * var(--w-pitch)); }
.slot--work:nth-child(3){ left:calc(2 * var(--w-pitch)); }
.slot--work:nth-child(4){ left:calc(3 * var(--w-pitch)); }
.slot--work:nth-child(5){ left:calc(4 * var(--w-pitch)); }

.featured{ min-height:403px; display:flex; align-items:center; }

.services{ min-height:759px; padding-top:60px; }
.accordion{ margin-top:151px; }

/* Accordion: 122px rows. Ticker parked at -720px inside a clipped row —
   the mechanic ported from their hover setup. */
.acc-row{
  height:122px; display:flex; align-items:center;
  border-top:1px solid rgba(54,42,16,.15);
  overflow:clip; position:relative;
  font-family:var(--font-display); font-size:35px; letter-spacing:-1.4px;
}
.acc-row:last-child{ border-bottom:1px solid rgba(54,42,16,.15); }
.acc-row__ticker{
  position:absolute; left:0; white-space:nowrap;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.44px;
  color:var(--ink-2);
  transform:translateX(-720px);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.acc-row:hover .acc-row__ticker{ transform:translateX(0); }
.acc-row:hover .acc-row__title{ color:var(--accent); }

.grid12{ padding-top:60px; }
.grid12 .lattice{ margin-top:40px; }

.closing{ min-height:505px; display:flex; align-items:center; }

.foot{ max-width:var(--content); margin:0 auto; height:282px; display:flex; align-items:center; justify-content:space-between; }
@media (max-width:1440px){ .foot{ margin-inline:var(--gutter); } }

/* ------------------------------------------------------------
   BREAKPOINTS — 810 and 1200, ported
   ------------------------------------------------------------ */
@media (max-width:1199.98px){
  :root{
    --h-w:80px;  --h-h:100px;
    --h-start-w:46px; --h-start-h:57px;
    --g-w:64px;  --g-h:80px;
    --w-w:200px; --w-h:292px;
  }
  .display-lg{ font-size:40px; line-height:44px; letter-spacing:-1.6px; }
}

@media (max-width:809.98px){
  :root{ --gutter:20px; }

  /* stacked grid on phones — the lattice is a desktop/tablet idea */
  .lattice{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; height:auto !important; }
  .lattice .slot{ position:static; width:100%; height:auto; aspect-ratio:.8; transition:none; }
  .hero.is-in .lattice--10 .slot{ left:auto; top:auto; width:100%; height:auto; }
  .hero{ height:auto; padding-top:80px; }

  .works__row{ height:auto; margin-top:60px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  .slot--work{ position:static; width:100%; height:auto; aspect-ratio:.684; }

  .display-lg{ font-size:30px; line-height:33px; letter-spacing:-1.2px; }
  .display-md{ font-size:22px; line-height:24px; letter-spacing:-.9px; }
  .acc-row{ font-size:22px; }
  .accordion{ margin-top:40px; }

  /* ----------------------------------------------------------
     MOBILE APPEAR — the separate, smaller animation.
     Ported verbatim from their appear config, which is null on
     tablet and desktop and only populated at this breakpoint:
       opacity 0.001 -> 1, y 12px -> 0
       spring, duration 0.4s, bounce 0.2, delay 0 (no stagger)
     ---------------------------------------------------------- */
  [data-appear]{ opacity:.001; transform:translateY(12px); }
  [data-appear].is-in{
    opacity:1; transform:translateY(0);
    transition:opacity .4s cubic-bezier(.34,1.2,.64,1),
               transform .4s cubic-bezier(.34,1.2,.64,1);
  }
}

@media (prefers-reduced-motion:reduce){
  .lattice--10 .slot{ transition:none; }
  [data-appear],[data-appear].is-in{ opacity:1; transform:none; transition:none; }
  .acc-row__ticker{ transition:none; }
}