/* dark is the default; both themes are explicit so the toggle always wins */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#0A0A0A; --graphite:#141413; --bone:#EDEBE6; --ash:#86827B;
  --dim:#B5B0A6; --bronze:#B99765; --rule:#26251F; --rule2:#3A382F;
  --navbg:rgba(10,10,10,.93); --thumb:#0F0F0E; --shade:rgba(255,255,255,.04);
  --gutter:clamp(20px,4vw,76px);
}
:root[data-theme="light"]{
  color-scheme:light;
  --ink:#F4F2ED; --graphite:#E9E6DE; --bone:#15140F; --ash:#6E6A61;
  --dim:#3B3934; --bronze:#8A6A3E; --rule:#DDD9CE; --rule2:#C4BFB2;
  --navbg:rgba(244,242,237,.93); --thumb:#E9E6DE; --shade:rgba(0,0,0,.035);
  --gutter:clamp(20px,4vw,76px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{
  margin:0;background:var(--ink);color:var(--dim);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
.shell{width:100%;max-width:1480px;margin:0 auto;padding:0 var(--gutter)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
h1,h2,h3{margin:0;color:var(--bone);font-weight:700;letter-spacing:-0.025em;line-height:1.06}
h2{font-size:clamp(25px,3.1vw,42px);line-height:1.13;letter-spacing:-0.022em}
h3{font-size:18px;font-weight:600;letter-spacing:-0.01em;line-height:1.3}
p{margin:0 0 16px}
.serif{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:19px;line-height:1.6;color:var(--dim)}
section{border-top:1px solid var(--rule)}
.pad{padding:clamp(62px,7.4vw,126px) 0}
.eyebrow{font-size:12.5px;color:var(--ash);margin:0 0 34px}
.eyebrow b{color:var(--bronze);font-weight:600;margin-right:10px}
.max{max-width:56ch}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--navbg);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav{position:relative}
.nav .shell{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand svg{width:25px;height:29px;flex:none}
.brand span{font-size:13px;font-weight:600;letter-spacing:.11em;color:var(--bone)}
.navright{display:flex;align-items:center;gap:26px}
.navlinks{display:flex;gap:28px;font-size:13.5px}
.theme{
  background:none;border:1px solid var(--rule2);border-radius:999px;
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  color:var(--ash);transition:color .15s,border-color .15s;padding:0;
}
.theme:hover{color:var(--bone);border-color:var(--bronze)}
.theme svg{width:15px;height:15px}
:root[data-theme="light"] .theme .moon,
:root:not([data-theme="light"]) .theme .sun{display:none}
.prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--bronze)}
.navlinks a{color:var(--ash);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;transition:color .15s}
.navlinks a:hover{color:var(--bone);border-bottom-color:var(--bronze)}
@media (max-width:820px){.navlinks{display:none}}

/* hero */
.hero{border-top:none;padding:clamp(76px,12vw,150px) 0 clamp(60px,8vw,100px)}
.hero h1{font-size:clamp(33px,4.6vw,66px)}
.herogrid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(36px,5vw,88px);align-items:center}
@media (max-width:920px){.herogrid{grid-template-columns:1fr;gap:44px}}
.diagram{width:100%;height:auto;overflow:visible}
.diagram .wire{fill:none;stroke:var(--rule2);stroke-width:1.4}
.diagram .flow{fill:none;stroke:var(--bronze);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:16 210;animation:flow 3.4s linear infinite}
@keyframes flow{from{stroke-dashoffset:226}to{stroke-dashoffset:0}}
.diagram .nd{fill:var(--graphite);stroke:var(--rule2);stroke-width:1.4}
.diagram .core{fill:var(--bronze)}
.diagram .halo{fill:none;stroke:var(--bronze);stroke-width:1.2;transform-box:fill-box;
  transform-origin:center;animation:halo 3.4s ease-out infinite}
@keyframes halo{0%{transform:scale(.75);opacity:.55}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}
.diagram .drift{transform-box:fill-box;transform-origin:center;animation:drift 16s linear infinite}
@keyframes drift{0%{transform:translate(0,0)}25%{transform:translate(4px,-5px)}
  50%{transform:translate(0,-10px)}75%{transform:translate(-4px,-5px)}100%{transform:translate(0,0)}}
.diagram .lbl{fill:var(--ash);font-family:"Archivo",sans-serif;font-size:11px;letter-spacing:.02em}
.rot{display:inline-block;position:relative;color:var(--bronze);min-width:1ch}
.rot span{display:inline-block;animation:swap .45s cubic-bezier(.2,.7,.3,1)}
@keyframes swap{from{opacity:0;transform:translateY(.32em)}to{opacity:1;transform:none}}
.hero .tail{display:block;margin-top:.12em}
.hero .sub{max-width:52ch;margin:32px 0 42px}
.cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.btn{border-radius:6px;display:inline-block;background:var(--bone);color:var(--ink);font-size:14px;font-weight:600;padding:15px 28px;text-decoration:none;border:1px solid var(--bone);transition:background .15s,color .15s}
.btn:hover{background:transparent;color:var(--bone)}
.tlink{font-size:14px;font-weight:500;text-decoration:none;color:var(--bone);border-bottom:1px solid var(--bronze);padding-bottom:3px}
.tlink:hover{color:var(--bronze)}

/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.hero .rv{transition-delay:.05s}
.hero .rv:nth-of-type(2){transition-delay:.15s}
.hero .rv:nth-of-type(3){transition-delay:.25s}

/* ribbon */
.ribbon{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  overflow:hidden;padding:17px 0;background:var(--shade)}
.rtrack{display:flex;width:max-content;animation:ribbon 38s linear infinite}
.rtrack span{font-size:12.5px;letter-spacing:.16em;color:var(--ash);white-space:nowrap;padding-right:34px}
.rtrack span i{color:var(--bronze);font-style:normal;padding-left:34px}
@keyframes ribbon{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* rows */
.rows{border-top:1px solid var(--rule2)}
.row{border-bottom:1px solid var(--rule);padding:22px 0}
.row .s{display:block;font-size:18px;font-weight:500;color:var(--bone);letter-spacing:-0.01em}
.row .t{display:block;font-size:15px;color:var(--ash);max-width:60ch;margin-top:4px}

/* toggles */
details{border-bottom:1px solid var(--rule)}
details summary{
  list-style:none;cursor:pointer;padding:20px 0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;
}
details summary::-webkit-details-marker{display:none}
summary .lbl{grid-column:1;grid-row:1;font-size:17px;font-weight:600;color:var(--bone);letter-spacing:-0.012em;line-height:1.25}
summary .meta{grid-column:1;grid-row:2;font-size:13px;color:var(--ash)}
@media (min-width:861px){
  details summary{grid-template-columns:minmax(0,1fr) auto auto;gap:20px}
  summary .meta{grid-column:2;grid-row:1;text-align:right}
  summary .pm{grid-column:3;grid-row:1}
}
summary .pm{grid-column:2;grid-row:1/3;position:relative;width:13px;height:13px;align-self:center;justify-self:end}
summary .pm::before,summary .pm::after{content:"";position:absolute;background:var(--bronze);transition:transform .22s ease}
summary .pm::before{left:0;top:6px;width:13px;height:1.5px}
summary .pm::after{left:6px;top:0;width:1.5px;height:13px}
details[open] summary .pm::after{transform:scaleY(0)}
.dbody{padding:0 0 26px;max-width:62ch;animation:fade .3s ease}
.dbody p{font-size:15.5px;color:var(--dim)}
.dbody p:last-child{margin-bottom:0}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.top-rule{border-top:1px solid var(--rule2)}
.band{display:grid;grid-template-columns:minmax(0,clamp(240px,24vw,380px)) minmax(0,1fr);gap:clamp(28px,5vw,72px);
  align-items:start;padding:clamp(42px,5vw,60px) 0;border-top:1px solid var(--rule)}
.band:first-of-type{border-top:none;padding-top:0}
.band:last-of-type{padding-bottom:0}
@media (max-width:860px){.band{grid-template-columns:1fr;gap:22px}}
h2.sm{font-size:clamp(22px,2.3vw,33px);line-height:1.15}

/* work rail */
.rail{
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing}
.track{display:flex;gap:22px;align-items:stretch;width:max-content;padding:4px 0 10px}
/* leading spacer aligns the first card with the text above; it duplicates with
   the track so the loop stays perfectly periodic */
.gut{flex:none;width:calc(var(--gutter) - 22px);min-width:0}
.card{
  width:clamp(268px,26vw,392px);flex:none;
  display:flex;flex-direction:column;
  background:var(--graphite);border:1px solid var(--rule2);
  border-radius:12px;overflow:hidden;
  transition:border-color .25s ease,transform .35s cubic-bezier(.2,.7,.3,1);
}
.card:hover{border-color:var(--ash);transform:translateY(-3px)}
.thumb{height:clamp(178px,14vw,218px);overflow:hidden;background:var(--thumb);border-bottom:1px solid var(--rule)}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .thumb img{transform:scale(1.045)}
.cbody{padding:19px 20px 22px;display:flex;flex-direction:column;flex:1}
.card .k{font-size:11.5px;color:var(--bronze);font-weight:600;letter-spacing:.035em;margin:0 0 8px}
.card h3{font-size:16.5px;line-height:1.28;margin-bottom:8px}
.card .d{font-size:14px;color:var(--ash);line-height:1.5;margin:0}
.railnote{display:flex;justify-content:space-between;align-items:center;margin-top:24px;font-size:13px;color:var(--ash)}
.arrows{display:flex;gap:10px}
.arrows button{
  background:none;border:1px solid var(--rule2);border-radius:999px;width:38px;height:38px;
  display:grid;place-items:center;cursor:pointer;color:var(--ash);padding:0;
  transition:color .15s,border-color .15s,transform .15s;
}
.arrows button:hover{color:var(--bone);border-color:var(--bronze);transform:translateY(-1px)}
.arrows svg{width:15px;height:15px}

/* phases */
.phase{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;padding:22px 0;border-bottom:1px solid var(--rule)}
.phase .n{font-size:12.5px;font-weight:600;color:var(--bronze);padding-top:4px}
.phase p{margin:6px 0 0;font-size:15px;color:var(--ash);max-width:58ch}

/* founder */
.founder{display:grid;grid-template-columns:minmax(0,clamp(320px,29vw,470px)) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;margin-top:76px}
.art{position:relative}
.rect{border-radius:20px;overflow:hidden;aspect-ratio:84/89;background:var(--graphite);border:1px solid var(--rule2)}
.rect img{width:100%;height:100%;object-fit:cover}
.circle-wrap{
  position:absolute;top:-54px;right:-54px;width:44%;
  opacity:0;transform:translate(40px,-28px) scale(.94);
}
.art.in .circle-wrap{animation:circleIn .9s cubic-bezier(.2,.8,.25,1) .18s forwards}
@keyframes circleIn{to{opacity:1;transform:none}}
.circle{
  aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 8px var(--ink);
  animation:orbit 12s linear infinite;
}
@keyframes orbit{
  0%{transform:translate(0,0)}
  25%{transform:translate(7px,-7px)}
  50%{transform:translate(0,-14px)}
  75%{transform:translate(-7px,-7px)}
  100%{transform:translate(0,0)}
}
.circle img{width:100%;height:100%;object-fit:cover}
.ftext h2{font-size:clamp(28px,3.4vw,44px)}
.ftext .serif{max-width:62ch}
.sig{margin-top:26px;font-size:13.5px;color:var(--ash)}
.sig b{display:block;color:var(--bone);font-weight:600;font-size:14.5px}
@media (max-width:860px){
  .founder{grid-template-columns:1fr;gap:38px;margin-top:56px}
  .art{max-width:330px}
  .circle-wrap{top:-30px;right:-24px;width:40%}
  .circle{box-shadow:0 0 0 6px var(--ink)}
}
/* contact */
.contact{background:var(--graphite);border-top:1px solid var(--rule2)}
.ways{margin-top:44px;padding-top:24px;border-top:1px solid var(--rule2);font-size:14px;color:var(--ash)}
.ways a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--rule2)}
.ways a:hover{border-bottom-color:var(--bronze)}
footer{border-top:1px solid var(--rule);padding:34px 0 48px;font-size:13px;color:var(--ash)}
footer .fr{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}

.slot{
  border-radius:12px;border:1px dashed var(--rule2);padding:34px 24px;text-align:center;
  font-size:13.5px;color:var(--ash);background:var(--graphite);
}
.slot b{color:var(--bronze);font-weight:600}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rv,.circle-wrap{opacity:1;transform:none}
}