/* ============================================================================
   Bootstrapped Studios — V2 design system
   One file, every page. Homepage-only machinery lives in home.css.

   V2.1 ground rules:
   - The mark is a three lobe liquid metaball. Every surface decision follows
     from that: monochrome, soft edged, lit rather than coloured.
   - Display type is Outfit, a geometric sans matching the logo wordmark.
     Solid letterforms only, never stroked or outlined.
   - The wordmark is uppercase and tracked wide. Tracking is what makes it the
     logo, so no other uppercase line is allowed near that letter spacing.
   - The site is monochrome. Every accent token resolves to white and depth
     comes from luminance, glow and negative space. Colour appears exactly once
     on the whole site, on the hero wordmark under the cursor.
   - Every label, index and spec line is Martian Mono, uppercase.
   ========================================================================= */

@font-face{
  font-family:"Outfit";
  src:url("fonts/outfit-100_900.woff2") format("woff2-variations");
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:"MartianMono";
  src:url("fonts/martianmono-100_800.woff2") format("woff2-variations");
  font-weight:100 800;
  font-stretch:75% 112.5%;
  font-display:swap;
}

:root{
  --ground:#000000;
  --ground-2:#08090A;
  --ink:#FFFFFF;
  --ink-mute:rgba(255,255,255,.58);
  --ink-faint:rgba(255,255,255,.30);
  --hair:rgba(255,255,255,.12);
  --hair-soft:rgba(255,255,255,.06);

  /* The accent ladder is monochrome on purpose. These four names survive from
     V2 so every existing rule keeps resolving, but they no longer carry hue:
     a section now separates from its neighbour by luminance, not colour. */
  --acid:#FFFFFF;
  --orange:#FFFFFF;
  --cyan:#FFFFFF;
  --magenta:#FFFFFF;
  --accent:var(--acid);
  --accent-rgb:255,255,255;

  --font-d:"Outfit","Futura","Century Gothic",system-ui,sans-serif;
  --font-b:"Outfit","Futura",system-ui,-apple-system,sans-serif;
  --font-m:"MartianMono",ui-monospace,"SF Mono",Menlo,monospace;

  --gut:clamp(20px,4.6vw,74px);
  --max:1420px;
  --ease:cubic-bezier(.6,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,canvas,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--ground)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-100px;left:12px;z-index:400;background:var(--accent);color:var(--ground);
  padding:10px 16px;font-family:var(--font-m);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.skip:focus{top:12px}

/* ---------------------------------------------------------------- type --- */

.d{
  font-family:var(--font-d);
  font-weight:400;
  
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:0.063em;
  margin:0;
  text-wrap:balance;
}
.d.cond{letter-spacing:0em}
.d.name{letter-spacing:.012em}
.acc{color:var(--accent)}

.m{
  font-family:var(--font-m);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.66rem;
  line-height:1.5;
  color:var(--ink-mute);
}
.m.wide{letter-spacing:.2em;font-size:.6rem}
.m.on{color:var(--accent)}

p{margin:0 0 1em}
.body{
  font-size:clamp(.94rem,1.02vw,1.02rem);
  line-height:1.62;
  color:var(--ink-mute);
  text-shadow:0 1px 14px rgba(6,7,8,.85),0 0 4px rgba(6,7,8,.6);
}
.body strong{color:var(--ink);font-weight:500}

/* the numbered section index: mono figure over a hairline that scales in */
.idx{display:flex;align-items:center;gap:14px}
.idx b{font-family:var(--font-m);font-weight:400;font-size:.66rem;letter-spacing:.2em;color:var(--ink-faint)}
.idx i{display:block;width:56px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1s var(--ease) .1s}
.in .idx i{transform:scaleX(1)}

/* ------------------------------------------------------- film + overlays --- */
/* Static, never animated: a screen-blend caustic wash, a vignette, and grain. */

.film{position:fixed;inset:0;z-index:1;pointer-events:none}
.film.caustic{
  mix-blend-mode:screen;opacity:.5;
  background:
    radial-gradient(120% 62% at 12% 8%,rgba(255,255,255,.055),transparent 60%),
    radial-gradient(80% 50% at 88% 22%,rgba(255,255,255,.04),transparent 62%),
    radial-gradient(90% 60% at 60% 96%,rgba(255,255,255,.05),transparent 64%);
}
.film.vig{
  background:radial-gradient(126% 92% at 50% 46%,transparent 42%,rgba(4,5,6,.5) 78%,rgba(3,4,5,.86) 100%);
}
.film.grain{
  mix-blend-mode:overlay;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* cursor bloom, fine pointers only. White now: the section hue it used to
   follow no longer exists, and the only colour on the site is the hero word. */
.bloom{
  position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;
  border-radius:50%;pointer-events:none;z-index:2;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(circle at center,var(--bloom,rgba(255,255,255,.16)) 0,transparent 62%);
  transition:opacity .6s ease,background .9s ease;
}
body.has-bloom .bloom{opacity:1}

/* ------------------------------------------------------------ gooey bed --- */
/* Interior pages and the intro curtain. Homepage keeps the ink film instead. */

.goo{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(38deg,#08090A,#0D1014 58%,#090A0C);
  --size:60%;
}
/* the dye is a background, not a wallpaper: a scrim keeps interior pages
   readable while the field still moves underneath */
.goo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,10,11,.66),rgba(9,10,11,.8))}
#intro .goo::after{background:linear-gradient(180deg,rgba(9,10,11,.4),rgba(9,10,11,.58))}
.goo-defs{position:fixed;width:0;height:0;pointer-events:none}
.goo-field{position:absolute;inset:0;filter:url(#goo) blur(34px)}
.goo-field span{
  position:absolute;display:block;width:var(--size);height:var(--size);
  top:calc(50% - var(--size) / 2);left:calc(50% - var(--size) / 2);
  mix-blend-mode:screen;border-radius:50%;
}
/* Monochrome, like every other ground on the site. Screen blend on black is
   simply additive here, so the blobs are separated by ALPHA instead of by hue:
   each sits at a different opacity and in a different quarter of the frame, and
   where two overlap the field brightens rather than shifting colour. The
   saturate() on the field is gone with the dye, it had nothing left to act on. */
.gb1{top:-8%;left:-6%;
  background:radial-gradient(circle at center,rgba(255,255,255,.21) 0,rgba(255,255,255,0) 56%);
  transform-origin:center;animation:gooV 34s ease-in-out infinite}
.gb2{top:-14%;left:auto;right:-10%;
  background:radial-gradient(circle at center,rgba(255,255,255,.17) 0,rgba(255,255,255,0) 56%);
  transform-origin:calc(50% - 300px);animation:gooC 26s linear reverse infinite}
.gb3{top:auto;bottom:-16%;left:-4%;
  background:radial-gradient(circle at center,rgba(255,255,255,.15) 0,rgba(255,255,255,0) 56%);
  transform-origin:calc(50% + 300px);animation:gooC 44s linear infinite}
.gb4{top:auto;bottom:-12%;left:auto;right:-8%;
  background:radial-gradient(circle at center,rgba(255,255,255,.13) 0,rgba(255,255,255,0) 56%);
  transform-origin:calc(50% - 180px);animation:gooH 40s ease-in-out infinite}
.gb5{width:calc(var(--size) * 1.25);height:calc(var(--size) * 1.25);
  top:22%;left:26%;
  background:radial-gradient(circle at center,rgba(255,255,255,.09) 0,rgba(255,255,255,0) 46%);
  transform-origin:calc(50% - 420px) calc(50% + 160px);animation:gooC 30s ease-in-out infinite}
.goo-int{
  position:absolute;width:100%;height:100%;top:-50%;left:-50%;opacity:.75;mix-blend-mode:screen;
  background:radial-gradient(circle at center,rgba(245,243,239,.2) 0,rgba(245,243,239,0) 42%);
  will-change:transform;
}
@keyframes gooC{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes gooV{0%,100%{transform:translateY(-42%)}50%{transform:translateY(42%)}}
@keyframes gooH{0%,100%{transform:translateX(-40%) translateY(-8%)}50%{transform:translateX(40%) translateY(8%)}}

/* the field is expensive; phones drop the goo filter and two of the blobs */
@media (max-width:820px),(pointer:coarse){
  .goo{--size:62%}
  .goo-field{filter:blur(38px)}
  .gb4,.gb5{display:none}
  .goo-int{display:none}
}

/* ------------------------------------------------------------- wordmark --- */
/* The logo. Mixed case display word + mono descriptor, nothing else. */

.wm{display:inline-flex;align-items:center;gap:.6em;white-space:nowrap}
.wm-m{width:1.32em;height:1.32em;flex:none;color:var(--ink);transition:transform .55s var(--ease)}
.wm:hover .wm-m{transform:rotate(120deg)}
@media (prefers-reduced-motion:reduce){.wm-m{transition:none}}
.wm-w{
  font-family:var(--font-d);font-weight:300;text-transform:uppercase;
  font-size:.92rem;letter-spacing:.155em;line-height:1;color:var(--ink);
}
.wm-s{
  font-family:var(--font-m);font-size:.54rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-mute);position:relative;padding-left:.72em;
}
.wm-s::before{content:"";position:absolute;left:0;top:.05em;bottom:.05em;width:1px;background:var(--hair)}
.wm:hover .wm-s{color:var(--accent)}
.wm-s,.wm-w{transition:color .5s var(--ease)}

/* ------------------------------------------------------------------ nav --- */

.top{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2vw,26px) var(--gut);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease);
}
body.scrolled .top{background:linear-gradient(180deg,rgba(10,11,12,.82),rgba(10,11,12,0));backdrop-filter:blur(9px)}
.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.nav a{
  font-family:var(--font-m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,243,239,.78);position:relative;padding:4px 0;
}
.nav a::before{content:"·";margin-right:calc(clamp(14px,1.9vw,30px) / 2 + 2px);color:var(--ink-faint)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.on{color:var(--accent)}
.nav a.on::after{background:var(--accent);transform:scaleX(1)}
.burger{display:none;width:34px;height:34px;position:relative;margin-left:14px}
.burger i{position:absolute;left:6px;right:6px;height:1px;background:var(--ink);transition:transform .45s var(--ease),opacity .3s}
.burger i:first-child{top:14px}
.burger i:last-child{top:20px}
body.menu-open .burger i:first-child{transform:translateY(3px) rotate(45deg)}
body.menu-open .burger i:last-child{transform:translateY(-3px) rotate(-45deg)}

@media (max-width:880px){
  .nav a{display:none}
  .nav a:last-of-type{display:inline-block;color:var(--accent)}
  .nav a:last-of-type::before{display:none}
  .burger{display:block;margin-left:6px}
  .nav{margin-left:auto;padding-left:18px}
}
@media (max-width:560px){
  .wm-s{display:none}
  .nav a:last-of-type{font-size:.62rem}
  .top{padding-left:18px;padding-right:12px}
}

.menu{
  position:fixed;inset:0;z-index:55;background:rgba(8,9,10,.97);backdrop-filter:blur(16px);
  display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 var(--gut);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
body.menu-open .menu{opacity:1;visibility:visible}
.menu>a{
  font-family:var(--font-d);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,10vw,3.4rem);line-height:1.02;letter-spacing:-0.02em;
  border-bottom:1px solid var(--hair-soft);padding:.22em 0;
  transform:translateY(18px);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease),color .3s;
}
body.menu-open .menu>a{transform:none;opacity:1}
.menu>a:nth-child(2){transition-delay:.05s}
.menu>a:nth-child(3){transition-delay:.1s}
.menu>a:nth-child(4){transition-delay:.15s}
.menu>a:nth-child(5){transition-delay:.2s}
.menu>a:nth-child(6){transition-delay:.25s}
.menu>a:hover{color:var(--accent)}
/* the chat pill must not float over the open menu */
body.menu-open .fab{opacity:0;pointer-events:none}
.menu-foot{margin-top:clamp(24px,4vh,48px);display:flex;gap:20px;flex-wrap:wrap}

/* -------------------------------------------------------------- buttons --- */

.btn{
  position:relative;display:inline-flex;align-items:center;gap:.9em;overflow:hidden;
  padding:1.02em 1.7em;border-radius:100px;background:var(--accent);color:var(--ground);
  font-family:var(--font-m);font-weight:500;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn.big{padding:1.24em 2.1em;font-size:.78rem}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.btn.ghost::before{background:var(--ink)}
.btn.ghost:hover{color:var(--ground)}

.tlink{
  font-family:var(--font-m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  position:relative;display:inline-block;padding-bottom:3px;color:var(--ink-mute);
}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.tlink:hover{color:var(--ink)}
.tlink:hover::after{transform:scaleX(1)}

.chip{
  display:inline-block;padding:.62em 1.05em;border-radius:100px;box-shadow:inset 0 0 0 1px var(--hair);
  font-family:var(--font-m);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);
  transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);
}
.chip:hover{background:var(--ink);color:var(--ground);box-shadow:inset 0 0 0 1px var(--ink)}

/* --------------------------------------------------- reveal + pressure --- */

/* the hidden half of every reveal is scoped to html.js, set by a one line
   inline script in the head. Without JS nothing is ever hidden. */
.rv .w{display:inline-block;overflow:hidden;padding:.14em 0 .16em;margin:-.14em 0 -.16em;vertical-align:top}
.js .rv .c{display:inline-block;transform:translateY(112%) rotate(5deg);will-change:transform}
.js .rv.in .c,.js .in .rv .c{transform:none;transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.js .fade{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .in .fade,.js .fade.in{opacity:1;transform:none}
.fade.d1{transition-delay:.08s}.fade.d2{transition-delay:.16s}.fade.d3{transition-delay:.24s}
.fade.d4{transition-delay:.32s}.fade.d5{transition-delay:.4s}

/* pressure surface: every char rides Outfit's wght off cursor distance, in a
   box pinned to its rest width so the line cannot reflow underneath it */
.press{display:block}
.press .c{display:inline-block;text-align:center;transition:none;
  will-change:font-variation-settings,color;font-weight:250}
.press .sp{display:inline-block;width:.24em}

/* ------------------------------------------------------------------ foot --- */

.foot{position:relative;z-index:4;padding:clamp(60px,9vh,120px) 0 clamp(74px,9vh,96px);
  background:linear-gradient(180deg,transparent,rgba(6,7,8,.72) 34%,#060708)}
.foot-top{display:flex;justify-content:space-between;gap:clamp(28px,5vw,80px);flex-wrap:wrap;
  padding:0 var(--gut) clamp(30px,6vh,70px)}
.foot-say{max-width:22ch;font-family:var(--font-d);font-weight:400;
  text-transform:uppercase;font-size:clamp(1.15rem,2.1vw,1.7rem);line-height:1.02;letter-spacing:-0.015em;}
.foot-cols{display:flex;gap:clamp(30px,5vw,86px);flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:.62em}
.foot-col b{font-family:var(--font-m);font-weight:400;font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:.35em}
.foot-col a{font-family:var(--font-b);font-size:.92rem;color:var(--ink-mute);transition:color .3s,transform .4s var(--ease);
  display:inline-block}
.foot-col a:hover{color:var(--ink);transform:translateX(4px)}

/* the full bleed close: one word, edge to edge, fitted by JS */
.foot-word{padding:0 var(--gut);margin:0 0 clamp(14px,2.2vh,26px)}
.foot-word span{
  display:block;font-family:var(--font-d);font-weight:400;
  letter-spacing:0.03em;line-height:.78;color:var(--ink);white-space:nowrap;
  font-size:calc(var(--fit,10) * 1px);
}
.foot-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:clamp(14px,2vh,22px) var(--gut) 0;border-top:1px solid var(--hair-soft);margin:0 var(--gut);
  padding-left:0;padding-right:0}
.foot-legal p,.foot-legal a{font-family:var(--font-m);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin:0}
.foot-legal a:hover{color:var(--ink-mute)}
.foot-legal nav{display:flex;gap:18px;flex-wrap:wrap}

/* ------------------------------------------------------------------ ruby --- */

/* Ruby: the mark on a chrome disc that opens into a pill on hover. The old
   pulsing dot on a grey pill was indistinguishable from every support widget
   on the internet, which is the note that killed it. */
.fab{
  position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:70;
  display:flex;align-items:center;padding:0;overflow:hidden;
  width:54px;height:54px;border-radius:100px;
  background:#08080a;box-shadow:inset 0 0 0 1px var(--hair),0 14px 34px rgba(0,0,0,.5);
  color:var(--ink);isolation:isolate;
  transition:width .5s var(--ease),box-shadow .4s var(--ease);
}
/* the same poured metal as the work tiles, dialled right down */
.fab::before{
  content:"";position:absolute;inset:-40%;z-index:-1;opacity:.5;
  background:conic-gradient(from 210deg at 34% 36%,
    #101013 0deg,#7e7e86 44deg,#17171b 86deg,#c8c8d0 128deg,
    #1c1c21 170deg,#6a6a72 214deg,#111114 258deg,#a0a0a8 306deg,
    #141418 344deg,#101013 360deg);
  filter:blur(13px) contrast(1.2);
  transition:transform 1.6s var(--ease),opacity .5s var(--ease);
}
.fab:hover{width:150px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 18px 44px rgba(0,0,0,.6)}
.fab:hover::before{transform:rotate(34deg) scale(1.12);opacity:.72}
.fab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fab-mark{width:54px;height:54px;flex:none;display:grid;place-items:center}
.fab-mark svg{width:26px;height:26px;display:block}
.fb{transform-origin:50% 50%;animation:fab-drift 7.5s ease-in-out infinite}
.fb2{animation-duration:9.5s;animation-delay:-2.6s}
.fb3{animation-duration:11.5s;animation-delay:-5.1s}
@keyframes fab-drift{
  0%,100%{transform:translate(0,0)}
  33%{transform:translate(6px,-5px)}
  66%{transform:translate(-5px,5px)}
}
.fab-t{
  white-space:nowrap;padding-right:20px;
  font-family:var(--font-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);opacity:0;transform:translateX(-8px);
  transition:opacity .35s var(--ease),transform .45s var(--ease);
}
.fab:hover .fab-t{opacity:1;transform:none}
/* no hover on touch, so the label is simply always out */
@media (hover:none){
  .fab{width:auto}
  .fab-t{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .fb{animation:none}
  .fab,.fab::before,.fab-t{transition:none}
}
body.chat .fab{opacity:0;pointer-events:none}

.cb{
  position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:75;
  width:min(390px,calc(100vw - 32px));height:min(560px,calc(100vh - 32px));
  display:flex;flex-direction:column;background:rgba(10,11,12,.96);backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 1px var(--hair),0 40px 90px rgba(0,0,0,.6);border-radius:18px;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
}
body.chat .cb{opacity:1;visibility:visible;transform:none}
.cb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--hair-soft)}
.cb-head b{font-family:var(--font-d);font-weight:400;text-transform:uppercase;
  font-size:.95rem;letter-spacing:0.002em;}
.cb-head span{display:block}
.cb-x{width:26px;height:26px;display:grid;place-items:center;color:var(--ink-faint);font-size:1rem}
.cb-x:hover{color:var(--ink)}
.cb-feed{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.cb-msg{max-width:88%;padding:.78em 1em;border-radius:14px;font-size:.9rem;line-height:1.5}
.cb-msg.bot{background:rgba(245,243,239,.06);color:var(--ink);border-bottom-left-radius:4px;align-self:flex-start}
.cb-msg.user{background:var(--acid);color:var(--ground);border-bottom-right-radius:4px;align-self:flex-end}
.cb-msg a{text-decoration:underline}
.cb-typing{display:flex;gap:5px;align-items:center}
.cb-typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-faint);animation:blink 1.3s infinite}
.cb-typing i:nth-child(2){animation-delay:.18s}
.cb-typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.cb-chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 12px}
.cb-chip{font-family:var(--font-m);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.55em .85em;border-radius:100px;box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink-mute)}
.cb-chip:hover{background:var(--ink);color:var(--ground)}
.cb-bar{display:flex;gap:10px;align-items:center;padding:14px 18px;border-top:1px solid var(--hair-soft)}
.cb-bar input{flex:1;background:none;border:0;font-size:.92rem;outline:none}
.cb-bar input::placeholder{color:var(--ink-faint)}
.cb-bar button{font-family:var(--font-m);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acid)}

/* ----------------------------------------------------------- interiors --- */
/* Shared shell for every page that is not the homepage. */

.page{position:relative;z-index:4;padding:clamp(120px,17vh,190px) var(--gut) 0}
.page-head{max-width:var(--max);margin:0 auto clamp(40px,7vh,84px)}
.page-head h1{font-size:clamp(2.6rem,9vw,7rem)}
.page-head .body{max-width:46ch;margin-top:clamp(18px,3vh,30px)}
.wrap{max-width:var(--max);margin:0 auto}
.prose{max-width:66ch;font-size:1.02rem;line-height:1.72;color:var(--ink-mute)}
.prose h2{font-family:var(--font-d);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.02;letter-spacing:-0.003em;color:var(--ink);
  margin:2.4em 0 .7em}
.prose h3{font-family:var(--font-d);font-weight:400;
  font-size:1.12rem;color:var(--ink);margin:2em 0 .5em;text-transform:none;letter-spacing:0.015em;}
.prose a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--accent)}
.prose a:hover{background:var(--accent);color:var(--ground);box-shadow:none}
/* card and figure links are objects, not underlined words */
.prose a.doc,.prose a.row,.prose a.tile{box-shadow:inset 0 0 0 1px var(--hair)}
.prose a.doc:hover,.prose a.tile:hover{background:none;color:inherit;box-shadow:inset 0 0 0 1px rgba(245,243,239,.3)}
.prose strong{color:var(--ink);font-weight:500}
.prose ul,.prose ol{padding-left:1.1em;margin:0 0 1.3em}
.prose li{margin:0 0 .5em}
.prose hr{border:0;border-top:1px solid var(--hair);margin:2.6em 0}
.prose blockquote{margin:2em 0;padding-left:1.2em;border-left:2px solid var(--accent);color:var(--ink)}

/* hairline row list, the site's default way of showing a set of things */
.rows{border-top:1px solid var(--hair)}
.row{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:clamp(14px,2.1vh,22px) clamp(10px,1.4vw,18px);border-bottom:1px solid var(--hair);overflow:hidden}
.row::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .5s var(--ease);z-index:0}
.row>*{position:relative;z-index:1;transition:color .4s var(--ease),transform .5s var(--ease)}
.row .rn{font-family:var(--font-d);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.05rem,2.5vw,1.8rem);letter-spacing:-0.003em;line-height:1}
.row .rv2{font-family:var(--font-m);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);text-align:right;flex:none}
a.row:hover::before,.row.hot::before{transform:scaleY(1)}
a.row:hover .rn{color:var(--ground);transform:translateX(10px)}
a.row:hover .rv2{color:rgba(10,11,12,.6)}

@media (prefers-reduced-motion:reduce){
  .js .fade{opacity:1;transform:none}
  .js .rv .c{transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv .c{transform:none}
  .goo-field span{animation:none}
}

/* =========================================================== interiors 2 ===
   Everything the non homepage documents need: the reading measure, the legal
   and journal furniture, and the figures the articles already carry.
   ======================================================================== */

.lead{font-size:clamp(1.02rem,1.5vw,1.24rem);line-height:1.55;color:var(--ink);max-width:52ch;
  margin:clamp(16px,2.6vh,26px) 0 0}
.m.updated{display:block;margin-top:1.4em;color:var(--ink-faint)}
.crumb{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-m);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:clamp(18px,3vh,30px)}
.crumb::before{content:"";width:22px;height:1px;background:var(--accent)}
.crumb:hover{color:var(--ink)}

.callout{
  margin:2.4em 0;padding:clamp(18px,2.4vw,30px);border-radius:14px;
  background:rgba(12,13,15,.55);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--hair);
  color:var(--ink);font-size:1rem;line-height:1.6;
}
.callout::before{content:"";display:block;width:34px;height:2px;background:var(--accent);margin-bottom:1em}
.callout p:last-child{margin-bottom:0}

.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:1.6em 0 2.4em}
.doc{display:block;padding:clamp(16px,2vw,24px);border-radius:14px;background:rgba(12,13,15,.55);
  backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--hair);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.doc:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(245,243,239,.3)}
.doc b{display:block;font-family:var(--font-d);font-weight:400;
  text-transform:uppercase;font-size:1.05rem;letter-spacing:-0.003em;margin-bottom:.5em;color:var(--accent)}
.doc span{display:block;font-size:.92rem;line-height:1.5;color:var(--ink-mute)}

/* the journal: byline, hero plate, and the two inline figure shapes the
   articles already use. Kept, restyled, never re-cropped. */
.byline{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:clamp(16px,2.6vh,24px) 0 0;
  padding-bottom:clamp(16px,2.6vh,24px);border-bottom:1px solid var(--hair)}
.byline .who{display:flex;flex-direction:column;gap:4px}
.byline .who b{font-family:var(--font-d);font-weight:400;
  text-transform:uppercase;font-size:.92rem;letter-spacing:0.002em;}
.byline .who span,.byline .when{font-family:var(--font-m);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint)}
.byline .when{margin-left:auto}
.byline .av{display:none}

/* Articles carry no photography in V2.1. The kill list is explicit, and it
   suits the direction: on a monochrome ground a stock photo is the one element
   that cannot be made to belong. Relief in a long read now comes from the
   pull quote and the heading rhythm, so the prose gets a little more air
   between sections to replace the beat each image used to provide. */
.prose h2{margin-top:2.1em}
.prose blockquote{margin:2.2em 0}

.post-more{margin-top:clamp(40px,7vh,84px);padding-top:clamp(24px,4vh,40px);border-top:1px solid var(--hair)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:1.6em}

/* a plain content band for the interior pages that are not pure prose */
.band{padding:clamp(40px,7vh,90px) 0}
.band+.band{border-top:1px solid var(--hair-soft)}
.band-h{font-size:clamp(1.6rem,4.2vw,3rem);max-width:18ch}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,2vw,26px)}
.tile{padding:clamp(18px,2vw,28px);border-radius:16px;background:rgba(12,13,15,.55);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px var(--hair);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(245,243,239,.26)}
.tile h3{font-family:var(--font-d);font-weight:400;text-transform:uppercase;
  font-size:1.15rem;letter-spacing:-0.003em;margin:.6em 0 .5em;color:var(--accent)}
.tile p{font-size:.94rem;line-height:1.55;color:var(--ink-mute);margin:0}
.tile ul{margin:.8em 0 0;padding-left:1.05em;font-size:.92rem;line-height:1.6;color:var(--ink-mute)}
.tile li{margin:0 0 .35em}

/* the article aside: a short, quiet correction or ranking inside the flow */
.prose .note{
  margin:2em 0;padding:.9em 0 .9em 1.2em;border-left:2px solid var(--hair);
  font-size:.95rem;line-height:1.62;color:var(--ink-mute);
}
.prose .note b{color:var(--ink);font-weight:500}
.prose .cta-box b{display:block;font-family:var(--font-d);font-weight:400;
  text-transform:uppercase;font-size:clamp(1.1rem,2.2vw,1.5rem);letter-spacing:-0.003em;margin-bottom:.5em;color:var(--ink)}
.prose .cta-box p b{display:inline;font-family:inherit;font-size:inherit;text-transform:none;letter-spacing:0;
  font-weight:500;margin:0}
.prose .cta-box .btn{margin-top:.6em;color:var(--ground)}
.prose .cta-box .btn:hover{color:var(--ground)}
.post-more .m.wide{margin-bottom:1.2em}

/* ------------------------------------------------------------- journal --- */

.jfeat{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3vw,44px);align-items:center;
  margin-bottom:clamp(34px,6vh,64px)}
.jfeat-img{display:block;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair)}
.jfeat-img img{width:100%;height:auto;display:block;transition:transform .9s var(--ease)}
.jfeat:hover .jfeat-img img{transform:scale(1.04)}
.jfeat-body{display:flex;flex-direction:column;gap:.9em;align-items:flex-start}
.jfeat-h{font-size:clamp(1.6rem,3.6vw,3rem);line-height:.92;letter-spacing:-.02em;display:block;
  transition:color .4s var(--ease)}
.jfeat:hover .jfeat-h{color:var(--accent)}
.jfeat .body{max-width:44ch}
@media (max-width:820px){.jfeat{grid-template-columns:1fr}}

.jrows .rn{font-size:clamp(.98rem,2vw,1.5rem);max-width:32ch}
.jnote{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(34px,6vh,64px)}

/* --------------------------------------------------------- small pages --- */

.road{display:flex;align-items:center;min-height:78svh}
.road-item{display:flex;gap:clamp(14px,2.4vw,34px);align-items:flex-start;margin:clamp(20px,3vh,34px) 0 0}
.road-n{font-family:var(--font-m);font-size:.7rem;letter-spacing:.2em;color:var(--accent);padding-top:.7em}
.road-h{font-size:clamp(2.2rem,7.4vw,6rem);max-width:16ch}
.road-s{margin-top:1.6em}
.road-after{margin-top:clamp(30px,5vh,60px);display:flex;gap:clamp(20px,4vw,60px);align-items:flex-end;
  flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:clamp(20px,3vh,32px)}
.road-after .body{max-width:46ch;margin:0}
.road-after .btn{color:var(--ground)}
.hire-spec{margin-bottom:clamp(20px,4vh,50px)}
.s404{display:flex;align-items:center;min-height:74svh}
.four-h{font-size:clamp(2.4rem,8vw,6.4rem);max-width:14ch}
.spec-band{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3.4vw,58px);
  border-top:1px solid var(--hair);padding-top:clamp(18px,3vh,34px)}
.spec-col b{display:block;font-family:var(--font-m);font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1.1em}
.kv{display:flex;justify-content:space-between;gap:12px;padding:.62em 0;border-bottom:1px solid var(--hair-soft)}
.kv dt{font-family:var(--font-m);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.kv dd{font-family:var(--font-m);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  margin:0;text-align:right}
@media (max-width:820px){.spec-band{grid-template-columns:1fr;gap:clamp(14px,3vh,24px)}}

/* -------------------------------------------------------- the feature list --- */

.fcount{display:flex;align-items:baseline;gap:.8em;margin-top:clamp(20px,3vh,30px)}
.fcount-n{font-family:var(--font-d);font-weight:400;
  font-size:clamp(3rem,9vw,7rem);line-height:.8;letter-spacing:0.03em;color:var(--accent)}

.fsearch{display:flex;align-items:center;gap:12px;padding:clamp(12px,1.6vh,18px) clamp(14px,1.6vw,22px);
  border-radius:100px;background:rgba(12,13,15,.62);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px var(--hair);position:sticky;top:clamp(64px,9vh,88px);z-index:20;
  transition:box-shadow .4s var(--ease)}
.fsearch:focus-within{box-shadow:inset 0 0 0 1px var(--accent)}
.fsearch svg{width:17px;height:17px;fill:none;stroke:var(--ink-faint);stroke-width:1.6;flex:none}
.fsearch input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:.98rem;color:var(--ink)}
.fsearch input::placeholder{color:var(--ink-faint)}
.fsearch .m{flex:none;color:var(--accent)}

.fg{padding:clamp(34px,6vh,72px) 0 0}
.fg-head{display:flex;align-items:baseline;gap:clamp(12px,2vw,24px);flex-wrap:wrap;
  border-bottom:1px solid var(--hair);padding-bottom:clamp(12px,1.8vh,20px)}
.fg-h{font-size:clamp(1.5rem,3.6vw,2.6rem);letter-spacing:.025em}
.fg-n{margin-left:auto;color:var(--accent)}
.fg-list{list-style:none;margin:0;padding:clamp(14px,2vh,22px) 0 0;
  columns:3;column-gap:clamp(20px,3vw,54px)}
.fg-list li{break-inside:avoid;font-size:.94rem;line-height:1.4;color:var(--ink-mute);
  padding:.52em 0 .52em 1.1em;position:relative;border-bottom:1px solid var(--hair-soft)}
.fg-list li::before{content:"";position:absolute;left:0;top:1.06em;width:5px;height:1px;background:var(--accent)}
.fg-list li:hover{color:var(--ink)}
@media (max-width:900px){.fg-list{columns:2}}
@media (max-width:560px){.fg-list{columns:1}}

/* ------------------------------------------------------------- the work --- */

.case{padding:clamp(34px,6vh,80px) 0;border-bottom:1px solid var(--hair-soft)}
.case-head{display:flex;align-items:baseline;gap:clamp(12px,2vw,24px);flex-wrap:wrap}
.case-h{font-size:clamp(1.7rem,4.4vw,3.4rem);letter-spacing:.035em}
.case-cat{margin-left:auto;color:var(--accent)}
.case-say{max-width:52ch;margin-top:clamp(12px,2vh,20px)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,26px);margin-top:clamp(20px,3.4vh,36px)}
.plate{margin:0}
.plate img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:inset 0 0 0 1px var(--hair);
  filter:saturate(.72) brightness(.82);transition:filter .6s var(--ease),transform .6s var(--ease)}
.plate.after img{filter:none;box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 0 0 1px var(--hair)}
.plate:hover img{filter:none;transform:translateY(-4px)}
.plate figcaption{margin-top:.9em;color:var(--ink-faint)}
.plate.after figcaption{color:var(--accent)}
.demo-note{padding:clamp(16px,2.4vh,24px) 0;color:var(--ink-faint)}
.demo-note a{color:var(--ink-mute);text-decoration:underline;text-underline-offset:3px}
.demo-note a:hover{color:var(--ink)}
@media (max-width:720px){.pair{grid-template-columns:1fr}}

/* ------------------------------------------------------------- weddings --- */

.wed-band{display:grid;grid-template-columns:1fr .8fr;gap:clamp(24px,4vw,70px);align-items:center}
.wed-band.flip .wed-say{order:2}
.wed-vis{display:flex;justify-content:center}
.phone{width:min(300px,100%);border-radius:34px;padding:10px;background:rgba(12,13,15,.7);
  backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--hair),0 40px 90px rgba(0,0,0,.55)}
.phone-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 12px 10px}
.phone-url{color:var(--ink-faint);font-size:.5rem}
.phone-in{border-radius:26px;padding:clamp(16px,2vw,22px);background:#0C0D10;
  box-shadow:inset 0 0 0 1px var(--hair-soft);min-height:320px}
.wed-names{color:var(--ink-faint)}
.wed-h2{font-size:1.9rem;line-height:.9;margin:.5em 0 .9em}
.wed-h2 em{font-style:normal;color:var(--accent)}
.wed-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1.1em}
.wed-tabs span{font-family:var(--font-m);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.5em .8em;border-radius:100px;box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink-faint)}
.wed-tabs .on{background:var(--accent);color:var(--ground);box-shadow:none}
.wed-field{padding:.7em 0;border-bottom:1px solid var(--hair-soft)}
.wed-field b{display:block;font-weight:400;font-size:.9rem;color:var(--ink-mute);margin-top:.3em}
.wed-btn{display:block;margin-top:1.4em;text-align:center;padding:.9em 1em;border-radius:100px;
  background:var(--accent);color:var(--ground);font-family:var(--font-m);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase}
.wed-feed{list-style:none;margin:1em 0 0;padding:0}
.wed-feed li{display:flex;align-items:baseline;gap:8px;padding:.62em 0;border-bottom:1px solid var(--hair-soft)}
.wed-feed b{font-family:var(--font-d);font-weight:400;text-transform:uppercase;
  font-size:.68rem;letter-spacing:0.022em;flex:none}
.wed-feed span{font-size:.8rem;color:var(--ink-mute);line-height:1.35}
.wed-feed i{margin-left:auto;font-style:normal;font-family:var(--font-m);font-size:.55rem;color:var(--accent)}
@media (max-width:820px){.wed-band{grid-template-columns:1fr}.wed-band.flip .wed-say{order:0}}