/* STANDY · /robin/ — Mockup 04 · Timeline (Porsche Volution inspired) */

:root{
  --bg:#13100E; --bg-2:#1A1612; --ink:#F0E7D5; --ink-2:#9C9081; --ink-3:#5E574C;
  --line:rgba(240,231,213,.08); --line-2:rgba(240,231,213,.16);
  --hermes:#FF7900; --gold:#D4A35A; --coral:#FF6B4D; --steel:#5BC0DE;
  --sepia-1:#3B2A1F; --sepia-2:#5A3F2D;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:auto}
body{background:var(--bg);color:var(--ink);font-family:'Pretendard','Inter',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--gold);color:var(--bg)}
a{color:inherit;text-decoration:none}

/* sepia grain */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* nav */
.nav-bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:22px 40px;mix-blend-mode:exclusion;color:#fff}
.nav-bar .lg{font-family:'Playfair Display',serif;font-weight:700;font-size:26px;letter-spacing:.01em}
.nav-bar .lg em{font-style:italic;color:var(--gold)}
.nav-bar .meta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase}

/* timeline rail (fixed left) */
.timeline{position:fixed;left:32px;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:8px}
.timeline a{display:flex;align-items:center;gap:18px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:6px 0;transition:color .3s ease}
.timeline a .yr{font-family:'Playfair Display',serif;font-style:italic;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink-3);transition:color .3s,font-weight .3s}
.timeline a .tick{width:24px;height:1px;background:var(--line-2);transition:background .3s,width .3s}
.timeline a.is-on{color:var(--gold)}
.timeline a.is-on .yr{color:var(--gold);font-weight:500}
.timeline a.is-on .tick{background:var(--gold);width:42px}
.timeline a.is-done .tick{background:var(--ink-3)}

/* HERO */
.hero{min-height:100vh;padding:140px 100px 100px 200px;display:flex;flex-direction:column;justify-content:center;position:relative;background:radial-gradient(ellipse at 25% 50%, rgba(212,163,90,.12), transparent 55%)}
.hero .frame{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2);display:flex;gap:32px;margin-bottom:42px}
.hero .frame b{color:var(--gold);font-weight:600}
.hero h1{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(70px,11vw,200px);line-height:.94;letter-spacing:-.025em;color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero h1 b{font-family:'Inter',sans-serif;font-weight:800;font-style:normal;color:var(--ink);letter-spacing:-.04em;font-size:.65em;display:block}
.hero .sub{margin-top:48px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;border-top:1px solid var(--line);padding-top:32px}
.hero .sub p{font-size:15px;line-height:1.8;color:var(--ink-2);max-width:48ch}
.hero .sub p b{color:var(--ink);font-weight:600}
.hero .sub p em{font-family:'Playfair Display',serif;font-style:italic;color:var(--gold)}
.hero .sub .toc{display:flex;flex-direction:column;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.hero .sub .toc .h{color:var(--ink);font-weight:600;margin-bottom:8px}
.hero .sub .toc a{padding:4px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;transition:color .25s ease}
.hero .sub .toc a:hover{color:var(--gold)}
.hero .sub .toc a .y{color:var(--gold)}

/* ERA — sticky chapter */
.era-wrap{height:260vh;position:relative}
.era{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:.55fr .45fr;align-items:stretch;overflow:hidden;isolation:isolate;border-top:1px solid var(--line)}
.era .left{padding:80px 60px 80px 200px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.era .right{padding:80px 60px;background:var(--bg-2);border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;overflow:hidden}

.era .gigyear{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:clamp(180px,28vw,420px);line-height:.82;letter-spacing:-.04em;color:var(--gold);position:relative;will-change:transform}
.era .label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2)}
.era .label b{color:var(--gold);font-weight:600}
.era .summary{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:clamp(28px,3vw,42px);line-height:1.25;letter-spacing:-.01em;color:var(--ink);max-width:24ch;margin-top:auto}
.era .summary em{color:var(--gold)}

.era .right h3{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(28px,3.4vw,46px);line-height:1.04;letter-spacing:-.03em;color:var(--ink);max-width:24ch}
.era .right h3 em{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;color:var(--gold)}
.era .right p{margin-top:22px;font-size:14.5px;line-height:1.85;color:var(--ink-2);max-width:50ch}
.era .right p b{color:var(--ink);font-weight:600}
.era .right p em{font-family:'Playfair Display',serif;font-style:italic;color:var(--gold)}
.era .right .facts{margin-top:32px;display:flex;flex-direction:column;gap:0}
.era .right .facts .f{display:grid;grid-template-columns:80px 1fr;gap:18px;padding:14px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2);align-items:baseline}
.era .right .facts .f:last-child{border-bottom:1px solid var(--line)}
.era .right .facts .yk{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold);letter-spacing:.14em}
.era .right .facts .vv{color:var(--ink)}
.era .right .facts .vv em{font-family:'Playfair Display',serif;font-style:italic;color:var(--gold);font-weight:400}

/* ERA color shifts */
.era.e2009 .left{background:linear-gradient(135deg,rgba(91,71,52,.32),transparent 60%)}
.era.e2012 .left{background:linear-gradient(135deg,rgba(143,107,71,.30),transparent 60%)}
.era.e2013 .left{background:linear-gradient(135deg,rgba(212,163,90,.18),transparent 60%)}
.era.e2016 .left{background:linear-gradient(135deg,rgba(255,107,77,.20),transparent 60%)}
.era.e2019 .left{background:linear-gradient(135deg,rgba(255,121,0,.22),transparent 60%)}
.era.e2026 .left{background:linear-gradient(135deg,rgba(91,192,222,.22),transparent 60%)}
.era.e2009 .gigyear{color:#9C7654}
.era.e2012 .gigyear{color:#BD8757}
.era.e2013 .gigyear{color:var(--gold)}
.era.e2016 .gigyear{color:var(--coral)}
.era.e2019 .gigyear{color:var(--hermes)}
.era.e2026 .gigyear{color:var(--steel)}

/* Detail blocks between/after eras */
.detail{padding:120px 100px 120px 200px;border-top:1px solid var(--line)}
.detail h2{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:clamp(48px,6.5vw,108px);line-height:.95;letter-spacing:-.025em;color:var(--ink);max-width:18ch}
.detail h2 em{color:var(--gold)}
.detail h2 b{font-family:'Inter',sans-serif;font-weight:800;font-style:normal;color:var(--ink)}
.detail .lead{margin-top:32px;font-size:15px;line-height:1.8;color:var(--ink-2);max-width:50ch}
.detail .lead b{color:var(--ink);font-weight:600}

/* exhibit (clients) — 4-col display case */
.exhibit{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);background:var(--bg-2)}
.exhibit .pc{padding:24px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:140px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,0) * 30ms)}
.exhibit .pc.is-in{opacity:1;transform:translateY(0)}
.exhibit .pc:nth-child(4n){border-right:0}
.exhibit .pc:nth-last-child(-n+4){border-bottom:0}
.exhibit .pc .pi{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.exhibit .pc .pn{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:22px;line-height:1.1;color:var(--ink);letter-spacing:-.01em}
.exhibit .pc .pn em{font-style:normal;font-family:'Inter',sans-serif;font-weight:700;color:var(--gold)}
.exhibit .pc .pd{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

/* patents registry as ledger */
.ledger{margin-top:48px;border-top:1px solid var(--line)}
.ledger .l{display:grid;grid-template-columns:60px 1fr 200px 70px;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline;font-size:13.5px;color:var(--ink-2);opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;transition-delay:calc(var(--i,0) * 28ms)}
.ledger .l.is-in{opacity:1;transform:translateY(0)}
.ledger .l .lp{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;color:var(--gold)}
.ledger .l .lt{color:var(--ink);font-size:14px;line-height:1.45}
.ledger .l .lc{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.ledger .l .ly{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);text-align:right}

/* Work as catalog spread */
.catalog{margin-top:56px;display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.catalog .item{border:1px solid var(--line);background:var(--bg-2);padding:28px;display:flex;flex-direction:column;min-height:280px;position:relative;transition:border-color .3s,transform .3s}
.catalog .item:hover{border-color:var(--gold);transform:translateY(-2px)}
.catalog .item .it{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.catalog .item h4{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:32px;letter-spacing:-.015em;line-height:1.05;color:var(--ink);margin-top:14px}
.catalog .item h4 em{color:var(--gold);font-style:italic}
.catalog .item p{margin-top:16px;font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.catalog .item p em{font-family:'Playfair Display',serif;font-style:italic;color:var(--gold)}
.catalog .item .strip{margin-top:auto;margin-top:22px;padding-top:18px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.catalog .item .strip b{color:var(--gold);font-weight:600}

/* Leader portrait */
.portrait{padding:140px 100px 140px 200px;display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg) 0,var(--bg-2) 100%)}
.portrait .card{border:1px solid var(--line);padding:48px 40px;background:rgba(212,163,90,.04)}
.portrait .name{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:84px;line-height:.92;letter-spacing:-.025em;color:var(--ink)}
.portrait .name em{color:var(--gold);font-style:italic}
.portrait .role{margin-top:32px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--ink-2)}
.portrait .role b{color:var(--ink);font-weight:600}
.portrait .school{margin-top:22px;padding-top:22px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink-2);line-height:1.75}
.portrait .school b{color:var(--ink);font-weight:600}
.portrait .bio p{font-size:15.5px;line-height:1.9;color:var(--ink-2);margin-bottom:22px}
.portrait .bio p b{color:var(--ink);font-weight:600}
.portrait .bio p em{font-family:'Playfair Display',serif;font-style:italic;color:var(--gold)}
.portrait .past{margin-top:22px;display:flex;flex-wrap:wrap;gap:6px}
.portrait .past .ch{padding:7px 13px;border:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-2);letter-spacing:.1em;text-transform:uppercase}
.portrait .past .ch.cto{background:var(--gold);color:var(--bg);border-color:var(--gold);font-weight:600}

/* MANIFESTO inscription */
.insc{padding:200px 100px 200px 200px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(212,163,90,.06),transparent)}
.insc p{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:clamp(42px,6vw,108px);line-height:1.18;letter-spacing:-.02em;color:var(--ink-3);max-width:22ch}
.insc p .w{display:inline-block;margin-right:.16em;opacity:.25;transition:opacity .8s,color .8s}
.insc p .w.lit{opacity:1;color:var(--ink)}
.insc p .w em{color:var(--gold);font-style:italic}

/* CONTACT colophon */
.colophon{padding:120px 100px 100px 200px;border-top:1px solid var(--line)}
.colophon h2{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:clamp(64px,10vw,168px);line-height:.95;letter-spacing:-.03em;color:var(--ink)}
.colophon h2 em{color:var(--gold)}
.colophon h2 b{font-family:'Inter',sans-serif;font-weight:800;font-style:normal}
.colophon .row{margin-top:56px;display:grid;grid-template-columns:1.2fr auto;gap:40px;align-items:end;border-top:1px solid var(--line);padding-top:32px}
.colophon .row p{font-size:15.5px;line-height:1.85;color:var(--ink-2);max-width:54ch}
.colophon .row p b{color:var(--ink);font-weight:600}
.cta{display:inline-flex;align-items:center;gap:14px;padding:18px 30px;background:var(--gold);color:var(--bg);font-weight:700;letter-spacing:.01em;font-size:15px;border-radius:0;transition:transform .25s ease,background .25s ease}
.cta:hover{transform:translate(2px,-2px);background:var(--coral)}
.cta .ar{width:22px;height:22px;border-radius:50%;background:var(--bg);color:var(--gold);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.colophon .index{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:36px;border-top:1px solid var(--line);padding-top:36px}
.colophon .index .k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.colophon .index .v{margin-top:10px;font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:22px;color:var(--ink);line-height:1.4;letter-spacing:-.01em}
.colophon .index .v.sm{font-family:'Inter',sans-serif;font-style:normal;font-size:14px;color:var(--ink);line-height:1.5}

footer{padding:24px 40px 24px 200px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line)}
footer b{color:var(--ink);font-weight:700}

@media (max-width:980px){
  .timeline{display:none}
  .nav-bar{padding:16px 24px}
  .hero{padding:96px 22px 56px}
  .hero .sub{grid-template-columns:1fr;gap:24px}
  .era-wrap{height:auto}
  .era{position:relative;height:auto;grid-template-columns:1fr;border-top:1px solid var(--line)}
  .era .left{padding:48px 22px}
  .era .right{padding:32px 22px;border-left:0;border-top:1px solid var(--line)}
  .era .gigyear{font-size:36vw}
  .detail{padding:64px 22px}
  .exhibit{grid-template-columns:repeat(2,1fr)}
  .exhibit .pc:nth-child(4n){border-right:1px solid var(--line)}
  .exhibit .pc:nth-child(2n){border-right:0}
  .exhibit .pc:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
  .exhibit .pc:nth-last-child(-n+2){border-bottom:0}
  .ledger .l{grid-template-columns:50px 1fr 60px;gap:12px}
  .ledger .l .lc{display:none}
  .catalog{grid-template-columns:1fr;gap:16px}
  .catalog .item{padding:22px;min-height:auto}
  .portrait{padding:64px 22px;grid-template-columns:1fr;gap:32px}
  .portrait .card{padding:32px 24px}
  .insc{padding:96px 22px}
  .colophon{padding:64px 22px}
  .colophon .row{grid-template-columns:1fr;gap:18px}
  .colophon .index{grid-template-columns:1fr 1fr}
  footer{padding:18px 22px;flex-direction:column;gap:6px}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .era .gigyear { transform: none !important; }
}