/* Lesreg — built from LESREG · Liquid Atelier 3.2 · Source of truth
   (Figma, page 00). Every colour, size, radius, material and component
   below is that page's, by name. Nothing here is improvised; where the
   library had no answer, the comment says so. */

@font-face{ font-family:'Chivo'; font-weight:300; font-display:swap; src:url(../fonts/chivo-300.woff2) format('woff2'); }
@font-face{ font-family:'Chivo'; font-weight:400; font-display:swap; src:url(../fonts/chivo-400.woff2) format('woff2'); }
@font-face{ font-family:'Chivo'; font-weight:500; font-display:swap; src:url(../fonts/chivo-500.woff2) format('woff2'); }
@font-face{ font-family:'Chivo'; font-weight:600; font-display:swap; src:url(../fonts/chivo-600.woff2) format('woff2'); }
@font-face{ font-family:'Fragment Mono'; font-weight:400; font-display:swap; src:url(../fonts/fragmentmono-400.woff2) format('woff2'); }
@font-face{ font-family:'Newsreader'; font-style:italic; font-weight:300; font-display:swap; src:url(../fonts/newsreader-300-italic.woff2) format('woff2'); }

:root{
  /* Colour — stone, one accent, one signal */
  --obsidian:#0E0F10; --basalt:#232426; --graphite:#46443F; --ash:#8C8880;
  --travertine:#D8D1C5; --limestone:#E9E5DD; --porcelain:#F6F4EF; --white:#FFFFFF;
  --ultra:#2436E8;      /* focus / "now" only */
  --ultra-tint:#DADDFB;
  /* Materials */
  --rim-tint:rgba(255,255,255,.06); --rim-edge:rgba(255,255,255,.85);
  --smoke:rgba(14,15,16,.5); --smoke-dense:rgba(14,15,16,.72);
  --contact-s:2px 4px 12px rgba(13,13,15,.10);
  --contact-m:6px 12px 32px rgba(13,13,15,.16);
  --smoke-shadow:6px 12px 32px rgba(13,13,15,.20);
  --rim-shadow:9px 18px 44px rgba(13,13,15,.24);
  /* Type */
  --sans:'Chivo', ui-sans-serif, system-ui, sans-serif;
  --mono:'Fragment Mono', ui-monospace, Menlo, monospace;
  --accent:'Newsreader', Georgia, serif;
  --gut:clamp(20px, 5vw, 72px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --u:1;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--porcelain); -webkit-text-size-adjust:100%; }
body{ background:var(--porcelain); color:var(--obsidian); font:400 16px/26px var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img{ display:block; }
::selection{ background:var(--ultra); color:var(--white); }
:focus-visible{ outline:2px solid var(--ultra); outline-offset:2px; }

/* LA3.1 type */
.label{ font:600 11px/14px var(--sans); letter-spacing:.06em; text-transform:uppercase; }
.anno, .mono{ font:400 11.5px/16px var(--mono); }

/* ---------- LA2.1 lens, LA32 button ---------- */
.lens{ --lb:rgba(255,255,255,.14); --lc:var(--porcelain);
  width:40px; height:40px; flex:none; border-radius:20px; display:grid; place-items:center; color:var(--lc);
  background:radial-gradient(90% 90% at 32% 24%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%), var(--lb);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), inset 0 -2px 5px rgba(0,0,0,.16);
  transition:background-color .3s var(--ease), color .3s var(--ease); }
.lens svg{ width:16px; height:16px; transform:translateX(-.5px); }
.btn{ display:inline-flex; align-items:center; gap:14px; height:48px; padding:0 4px 0 22px; border-radius:24px;
  font:500 15px/16px var(--sans); white-space:nowrap; background:var(--obsidian); color:var(--porcelain); }
.btn.light{ background:var(--porcelain); color:var(--obsidian); }
.btn.light .lens{ --lb:var(--travertine); --lc:var(--ash); }
/* at rest the icon sits under the glass; on hover it surfaces onto ultramarine */
@media (hover:hover){ .btn:hover .lens{ --lb:var(--ultra); --lc:var(--white); } }

/* ---------- LA31 Nav / Top bar · Mobile bar ---------- */
.tb{ position:fixed; z-index:60; top:16px; left:50%; transform:translateX(-50%);
  width:min(1296px, calc(100vw - 48px)); height:64px; border-radius:32px;
  display:flex; align-items:center; justify-content:space-between; padding:0 8px 0 24px;
  background:var(--smoke); border:1px solid var(--rim-edge); box-shadow:var(--smoke-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
  color:var(--porcelain); transition:background-color .35s var(--ease); }
/* the library: Smoke over dark substrates, Smoke dense over light */
html.nav-light .tb{ background:var(--smoke-dense); }
.tb-brand{ display:flex; align-items:baseline; gap:10px; white-space:nowrap; }
.tb-brand b{ font:500 24px/30px var(--sans); letter-spacing:-.015em; }
.tb-brand span{ color:var(--ash); }
.tb-r{ display:flex; align-items:center; gap:16px; }
.seg{ display:flex; gap:2px; }
.seg button{ height:44px; padding:0 16px; border-radius:22px; font:400 14px/16px var(--sans); color:var(--porcelain); }
.seg button[aria-pressed="true"]{ background:var(--porcelain); color:var(--obsidian); font-weight:500; }
@media (hover:hover){ .seg button[aria-pressed="false"]:hover{ background:rgba(246,244,239,.12); } }
.tb-menu{ display:none; }

@media (max-width:760px){
  .tb{ top:12px; width:calc(100vw - 40px); height:56px; border-radius:28px; padding:0 4px 0 22px; }
  .tb-brand b{ font-size:14px; line-height:16px; letter-spacing:0; }
  .tb-brand span, .tb-r .seg, .tb-r .btn{ display:none; }
}
/* ---------- the opening ---------- */
.ix-track{ position:relative; }
.ix-stage{ position:relative; overflow:hidden; background:var(--porcelain); }
html.ix-on .ix-track{ height:100vh; height:100svh; }
html.ix-on .ix-stage{ position:sticky; top:0; height:100vh; height:100svh; background:#040404; }
html.ix-on .ix-stage.on-paper{ background:var(--porcelain); }
/* while it plays, the page holds still; any scroll is taken as "skip" */
html.ix-playing, html.ix-playing body{ overflow:hidden; overscroll-behavior:none; }

.ix{ position:absolute; inset:0; display:none; color:var(--porcelain); }
html.ix-on .ix{ display:block; }
.ix.gone{ visibility:hidden; }
.ix > *, .ix-ann > *, .ix-says > *{ position:absolute; }
/* the Higgsfield film, drawn frame by frame, and the sharp still it ends on */
.ix-film{ left:0; top:0; transform-origin:0 0; will-change:transform; }
.ix-vid{ left:0; top:0; transform-origin:0 0; will-change:transform,opacity; object-fit:fill; background:#040404; pointer-events:none; }
.ix-film canvas{ position:absolute; left:0; top:0; }
.ix-film canvas + canvas{ will-change:opacity; }
.ix-still{ left:0; top:0; max-width:none; transform-origin:0 0; opacity:0; will-change:transform,opacity; user-select:none;
  -webkit-mask-image:linear-gradient(transparent, #000 5%); mask-image:linear-gradient(transparent, #000 5%); }
.ix-scrim{ pointer-events:none; }
/* LA31 Scrim, laid where the words are */
.ix-scrim-l{ left:0; top:0; bottom:0; width:62%; background:linear-gradient(90deg, rgba(14,15,16,.62), rgba(14,15,16,.22) 55%, rgba(14,15,16,0)); }
.ix-scrim-b{ left:0; right:0; bottom:0; height:58%; background:linear-gradient(rgba(14,15,16,0), rgba(14,15,16,.85)); will-change:opacity; }

/* the glass, measured: LA3.1 Annotation in Fragment Mono, hairlines,
   and one LA31 Annotation / Marker on the specular edge */
.ix-ann{ inset:0; pointer-events:none; }
.dim{ left:0; top:0; width:1000px; height:1px; margin-top:-.5px; transform-origin:0 50%;
  background:rgba(246,244,239,.6); will-change:transform,opacity; }
.tick{ left:0; top:0; width:1px; height:11px; margin:-5.5px 0 0 -.5px; background:rgba(246,244,239,.8); }
.alab{ left:0; top:0; white-space:nowrap; font:400 11.5px/16px var(--mono); color:var(--travertine); will-change:transform,opacity; }
.alab-w{ color:var(--porcelain); }
.alab-h{ transform-origin:0 0; }
.is-port .alab-s{ transform-origin:100% 50%; }
.mk{ left:0; top:0; width:32px; height:32px; margin:-16px 0 0 -16px; border-radius:16px;
  background:var(--ultra); color:var(--white); display:grid; place-items:center;
  font:400 11.5px/16px var(--mono); box-shadow:var(--contact-s); will-change:transform,opacity; }
.mk span{ position:relative; z-index:1; }
.mk-halo{ position:absolute; inset:-6px; border-radius:22px; background:var(--ultra-tint); z-index:0; will-change:transform,opacity; }
.ld{ left:0; top:0; width:1000px; height:1px; margin-top:-.5px; transform-origin:0 50%;
  background:rgba(246,244,239,.75); will-change:transform,opacity; }

/* the systems, inside the glass: the recording sits behind the glass's
   face, so it gets the glass's own light on top — the -45° sheen and a
   little of the room's darkness at the rim */
.ix-screen{ left:0; top:0; transform-origin:0 0; overflow:hidden; background:#000; opacity:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.06); will-change:transform,opacity; }
.ix-screen .app{ position:absolute; inset:0; overflow:hidden; transform-origin:50% 50%; border-radius:11.4% / 5.2%; will-change:transform,opacity; }
.ix-screen .app video, .ix-screen .app img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; }
/* the phone's own status bar and Dynamic Island, over the recordings' */
.ix-screen .sbar{ position:absolute; left:0; right:0; top:0; z-index:2; background:#F6F3EC; color:#000;
  display:flex; align-items:center; justify-content:space-between; padding:0 9% 0 11%;
  font:600 calc(var(--sw) * .043)/1 -apple-system, 'SF Pro Text', system-ui, sans-serif; letter-spacing:-.01em; }
.ix-screen .sbar .ic{ display:flex; align-items:center; gap:calc(var(--sw) * .014); }
.ix-screen .sbar svg{ height:calc(var(--sw) * .03); width:auto; display:block; }
.ix-screen .island{ position:absolute; z-index:3; display:block; background:#000; border-radius:999px; }

.ix-screen .sheen{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.04) 22%, rgba(255,255,255,0) 48%, rgba(255,255,255,0) 82%, rgba(255,255,255,.07)),
    radial-gradient(120% 90% at 50% 50%, rgba(14,15,16,0) 62%, rgba(14,15,16,.38));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
/* which system it is: a Smoke chip under the glass, the dot ultramarine because it is live */
.apptag{ left:0; top:0; display:flex; align-items:center; gap:8px; height:36px; padding:0 14px 0 12px; border-radius:18px;
  background:var(--smoke-dense); border:1px solid var(--rim-edge); box-shadow:var(--smoke-shadow);
  font:400 11.5px/16px var(--mono); color:var(--porcelain); white-space:nowrap; will-change:transform,opacity; }
.apptag .dot{ width:6px; height:6px; border-radius:3px; background:var(--ultra); box-shadow:0 0 0 3px rgba(218,221,251,.25); }

/* the words */
.ix-open{ left:var(--gut); width:min(46vw, 660px); bottom:clamp(64px, 14vh, 150px); }
.ix-kick{ font:600 11px/14px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--travertine);
  margin-bottom:clamp(14px, 2.4vh, 24px); will-change:transform,opacity; }
/* LA3.1 Display, with the Accent Display as its one phrase */
.ix-display{ font:500 min(calc(96px * var(--u)), 6.8vw)/.94 var(--sans); letter-spacing:-.045em; }
.ix-display .ln{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.ix-display .ln > span{ display:inline-block; will-change:transform,opacity; }
.ix-display .acc{ font:300 italic min(calc(96px * var(--u)), 6.8vw)/.98 var(--accent); letter-spacing:-.03em; }
.ix-cue{ right:var(--gut); bottom:28px; display:flex; align-items:center; gap:10px; font:400 11.5px/16px var(--mono); color:var(--porcelain); }
.ix-cue i{ display:block; width:36px; height:1px; background:currentColor; transform-origin:0 50%; animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:scaleX(0); } 55%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(1); opacity:0; } }

.ix-says{ left:var(--gut); bottom:clamp(64px, 14vh, 150px); width:min(44vw, 640px); height:0; }
.say{ left:0; bottom:0; width:100%; }
.say-k{ display:flex; gap:12px; align-items:baseline; margin-bottom:14px; font:600 11px/14px var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--travertine); will-change:transform,opacity; }
.say-k b{ font:400 11.5px/16px var(--mono); letter-spacing:0; color:var(--porcelain); }
/* LA3.1 H1 */
.say-t{ font:500 min(calc(56px * var(--u)), 4.2vw)/1.02 var(--sans); letter-spacing:-.035em; text-wrap:balance; }
.say-t .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
.say-t .w > span{ display:inline-block; will-change:transform,opacity; }

/* LA31 Nav / Chapter rail, mirrored to the right edge */
.ix-rail{ right:var(--gut); top:50%; margin-top:-102px; width:58px; height:206px; }
.rail-in{ display:flex; flex-direction:column; gap:4px; padding:8px 4px; border-radius:28px;
  background:var(--smoke); border:1px solid var(--rim-edge); box-shadow:var(--smoke-shadow);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.rail-in span{ height:44px; display:grid; place-items:center; font:400 11.5px/16px var(--mono); color:var(--ash); }
.rail-cur{ position:absolute; right:5px; top:9px; height:44px; display:flex; align-items:center; gap:10px;
  padding:0 18px 0 14px; border-radius:22px; background:var(--porcelain); color:var(--obsidian);
  box-shadow:var(--contact-m); white-space:nowrap; will-change:transform; }
.rail-cur .mono{ font:400 11.5px/16px var(--mono); }
.rail-cur b{ font:500 14px/16px var(--sans); }

.ix-page{ position:absolute; inset:0; z-index:4; background:var(--porcelain); opacity:0; pointer-events:none; display:none; }
html.ix-on .ix-page{ display:block; }

/* ---------- the page ---------- */
.hero{ position:relative; z-index:6; min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  justify-content:space-between; gap:40px; padding:clamp(120px, 19vh, 190px) var(--gut) clamp(28px, 5vh, 48px); }
html.ix-on .hero{ position:absolute; inset:0; min-height:0; }
.hero .label{ color:var(--ash); margin-bottom:clamp(16px, 3vh, 28px); display:flex; align-items:center; gap:10px; }
.hero .label svg{ width:14px; height:14px; }
.h1{ font:500 clamp(46px, min(7.4vw, 12vh), 128px)/.94 var(--sans); letter-spacing:-.045em; }
.h1 .hl{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
.h1 .hl > span{ display:inline-block; will-change:transform; }
.h1 .acc{ font:300 italic clamp(46px, min(7.4vw, 12vh), 128px)/.98 var(--accent); letter-spacing:-.03em; }
.h-row{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items:end; gap:28px 48px;
  padding-top:24px; position:relative; }
.h-row > *{ will-change:transform,opacity; }
.h-row .h-rule{ position:absolute; left:0; right:0; top:0; height:1px; background:var(--travertine);
  transform-origin:0 50%; opacity:1 !important; }
html:not(.ix-on) .h-row .h-rule{ transform:none; }
.h-row .btn{ justify-self:start; }
/* LA3.1 Lead */
.lead{ font:400 20px/30px var(--sans); letter-spacing:-.005em; color:var(--graphite); max-width:36ch; }
.lead b{ font-weight:500; color:var(--obsidian); }
/* LA31 Data / Figure */
.fig-l{ display:flex; align-items:flex-end; gap:16px; }
.fig-l .n{ font:300 clamp(72px, 8vw, 120px)/.93 var(--sans); letter-spacing:-.05em; }
.fig-l p{ font:400 14px/22px var(--sans); color:var(--graphite); max-width:24ch; padding-bottom:6px; }
.fig-l p b{ display:block; font:600 11px/14px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ash); margin-bottom:4px; }

.next{ padding:clamp(80px, 14vh, 160px) var(--gut); border-top:1px solid var(--travertine); background:var(--porcelain); }
.next .label{ display:block; color:var(--ash); margin-bottom:16px; }
.next p{ max-width:54ch; font:400 20px/30px var(--sans); color:var(--graphite); }
.foot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:28px var(--gut) 34px;
  border-top:1px solid var(--travertine); font:400 11.5px/16px var(--mono); color:var(--ash); background:var(--porcelain); }

.skip{ position:fixed; z-index:40; left:var(--gut); bottom:22px; font:400 11.5px/16px var(--mono); color:var(--travertine);
  padding:10px 0; display:none; transition:opacity .35s var(--ease); }
html.ix-on .skip{ display:block; }
html.ix-done .skip, html.ix-start .skip{ opacity:0; pointer-events:none; }

/* phones: the glass stands in the middle, the words go under it, on the stone */
.is-port .ix-open, .is-port .ix-says{ left:20px; right:20px; width:auto; bottom:clamp(56px, 9vh, 90px); }
.is-port .ix-display, .is-port .ix-display .acc{ font-size:min(calc(46px * var(--u)), 12vw); }
.is-port .say-t{ font-size:min(calc(30px * var(--u)), 8vw); line-height:1.08; }
.is-port .ix-cue{ display:none; }
@media (max-width:760px){
  .h-row{ grid-template-columns:1fr; gap:22px; }
  .lead{ font-size:17px; line-height:26px; }
  .skip{ bottom:16px; }
}
html:not(.ix-on) .tb{ background:var(--smoke-dense); }
/* Over the film the Smoke bars stand on near-black, where their blur
   shows nothing and costs a full re-blur every frame the film moves
   (measured: 49 fps with it, 58 without). It comes back the moment the
   bar stands on the page. */
html.ix-on:not(.nav-light) .tb, .ix-rail .rail-in, .apptag{ -webkit-backdrop-filter:none; backdrop-filter:none; }

/* zoomed in with two fingers (main.js): no blur to redraw, nothing moving
   by itself, no layers kept ready */
html.zoomed *, html.zoomed *::before, html.zoomed *::after{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; animation-play-state:paused !important; will-change:auto !important; }
html.zoomed .tb{ background:rgba(20,22,28,.94) !important; }

/* one typeface for the words: the second line of a heading is the same sans
   at the same weight, in a quieter tone of its own colour. (The made-up
   screens of the clients keep their own type.) */
.acc, .hs-ct em, .hs-say2 em, .alt-h em, .alt-fin-h em, .steps-note{
  font-family:var(--sans) !important; font-style:normal !important; font-weight:inherit !important; font-size:inherit !important;
  letter-spacing:inherit !important; color:color-mix(in srgb, currentColor 52%, transparent) !important; }