@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Caveat:wght@500;700&display=swap');
:root{--bg:#fbf7eb;--ink:#4a4d52;--muted:#5f636a;--line:#e3dccb;--accent:#f0705f;--card:#fffdf6;--serif:'Instrument Serif',Georgia,serif;--sans:'General Sans',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
header.nav{position:sticky;top:0;z-index:5;background:rgba(251,247,235,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;gap:10px;align-items:center;text-decoration:none;font-weight:600;letter-spacing:.02em}
.logo svg{width:30px;height:30px}
nav a{text-decoration:none;margin-left:28px;font-size:.95rem;color:var(--muted)}
nav a:hover,nav a.on{color:var(--ink)}
.btn{display:inline-block;background:var(--ink);color:var(--bg);padding:14px 26px;border-radius:999px;text-decoration:none;font-weight:500;border:0;font:inherit;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--accent)}
.hero{min-height:calc(100vh - 68px);display:grid;grid-template-columns:1.15fr .85fr;border-bottom:1px solid var(--line)}
.hero-text{padding:12vh 6vw 8vh max(28px,calc((100vw - 1120px)/2 + 28px));display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:22px}
h1{font:400 clamp(3.2rem,7.5vw,6.8rem)/.98 var(--serif);letter-spacing:-.01em;margin-bottom:28px}
h1 em,h2 em{color:var(--accent)}
.lead{font-size:clamp(1.1rem,1.5vw,1.3rem);max-width:34ch;color:var(--muted);margin-bottom:36px}
.hero-art{background:var(--bg);position:relative;overflow:hidden;border-left:1px solid var(--line)}
.portrait{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:88%;max-width:115%;object-fit:contain;object-position:bottom}
.hero-art svg{position:absolute;inset:0;width:100%;height:100%}
.hero-art .cap{position:absolute;right:24px;top:28px;background:var(--ink);color:#e0b12a;font-size:.75rem;font-weight:600;letter-spacing:.14em;padding:9px 16px;border-radius:999px}
section{padding:110px 0;border-bottom:1px solid var(--line)}
h2{font:400 clamp(2.2rem,4vw,3.4rem)/1.05 var(--serif);margin-bottom:26px}
.cols{display:grid;grid-template-columns:1fr 1.4fr;gap:72px}
.prose p{margin-bottom:20px;max-width:62ch}
.track{list-style:none;padding:0;border-top:1px solid var(--line)}
.track li{display:grid;grid-template-columns:56px 1fr;padding:22px 0;border-bottom:1px solid var(--line)}
.track span{font-family:var(--serif);font-size:1.5rem;color:var(--accent)}
.cta{text-align:center}
.cta p{color:var(--muted);max-width:52ch;margin:0 auto 34px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:30px;text-decoration:none;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--ink)}
.card .tag{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.card h3{font:400 1.7rem/1.15 var(--serif);margin-bottom:12px}
.card p{color:var(--muted);font-size:.97rem;flex:1}
.card .meta{margin-top:20px;font-size:.85rem;color:var(--muted)}
.page-head{padding:120px 0 70px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(2.8rem,6vw,5rem)}
blockquote{font:400 clamp(1.6rem,2.6vw,2.2rem)/1.25 var(--serif);border-left:2px solid var(--accent);padding-left:28px;margin:10px 0 0}
.article{max-width:700px;margin:0 auto;padding:90px 28px}
.article h2{font-size:2rem;margin:44px 0 16px}
.article p{margin-bottom:20px}
form{display:grid;gap:18px}
label{font-size:.85rem;font-weight:500;display:grid;gap:8px}
input,textarea,select{font:inherit;padding:14px 16px;border:1px solid var(--line);background:var(--card);border-radius:4px;color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ink);outline-offset:1px}
.details dt{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:26px}
.details dd{font:400 1.6rem var(--serif)}
footer{padding:40px 0;font-size:.85rem;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between}
@media(max-width:860px){.hero{grid-template-columns:1fr}.hero-art{min-height:62vh}.hero-text{padding:70px 24px}.cols,.cards{grid-template-columns:1fr;gap:36px}nav a{margin-left:16px}section{padding:72px 0}}
body{color:#4a4d52}
h1,h2,h3,.card h3,.details dd{color:var(--ink)}
.eyebrow,.card .tag{color:#e0634f}
.track span{color:#f08a4b}
h1 em,h2 em{background:linear-gradient(180deg,#f7b04a 10%,#fb8279 90%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.btn{background:var(--ink)}
.btn:hover{background:#f0705f;color:#fff}
.logo svg{width:38px;height:38px}
.logo span{color:var(--ink);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.95rem}
.logo b{color:#f0705f;font-weight:500;letter-spacing:.22em;font-size:.72rem;margin-left:6px}
.hero-art{background:linear-gradient(180deg,#fbf7eb 0%,#fbf7eb 55%,#e9f8f8 100%)}
.hero-art .cap{background:var(--ink);color:#fed989}
footer{background:var(--ink);color:#cfd3ef;border:0}
footer a{color:#fed989}
section.cta{background:linear-gradient(180deg,#e9f8f8,#fbf7eb)}
.hero{min-height:0;height:min(480px,58vh)}
.hero-text{padding-top:40px;padding-bottom:40px}
.hero h1{font-size:clamp(2.6rem,5vw,4.4rem);margin-bottom:18px}
.hero .lead{margin-bottom:24px;font-size:1.1rem}
.hero .eyebrow{margin-bottom:14px}
.portrait{height:94%}
.hero+section{padding-top:56px;padding-bottom:80px}
.hero+section h2{font-size:clamp(2rem,3.4vw,2.9rem)}
@media(max-width:860px){.hero{height:auto}.hero-art{min-height:380px}}
.hero-art .cap{top:auto;bottom:20px;right:auto;left:20px}
h1 em,h2 em{padding-right:0}
.hero-art .sun{position:absolute;width:78%;aspect-ratio:1;left:50%;top:10%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 50% 35%,#fed989 0%,#fbb74a 40%,#fb8279 100%);opacity:.9;filter:blur(.5px)}
.hero-art .dots{position:absolute;inset:0;width:100%;height:100%}
.portrait{z-index:1}.hero-art .cap{z-index:2}
.wave{line-height:0;margin:-1px 0}.wave svg{width:100%;height:40px;display:block}
section{border-bottom:0}
.note{font-family:'Caveat',cursive;font-size:1.45rem;line-height:1.05;color:#e0634f;position:absolute;pointer-events:none;white-space:nowrap}
.note svg{width:60px;height:40px;fill:none;stroke:#e0634f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.btnwrap{position:relative;display:inline-block}
.n-hero{left:calc(100% + 8px);top:22px;display:flex;align-items:center;gap:4px;transform:rotate(-4deg)}
.n-hero svg{transform:scaleX(-1) rotate(10deg)}
.trk .stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);margin-top:20px}
.stat{padding:34px 28px 34px 0;border-bottom:1px solid var(--line)}
.stat .big{font:400 clamp(3rem,6vw,5rem)/1 var(--serif);background:linear-gradient(180deg,#f7b04a,#f0705f);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .sub{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin:10px 0 10px;color:var(--ink)}
.stat p{color:var(--muted);font-size:.95rem;max-width:32ch}
.n-stat{left:calc(33% - 40px);top:-56px;transform:rotate(-3deg);display:flex;align-items:flex-end;gap:6px;flex-direction:row-reverse}
.n-stat svg{transform:rotate(60deg)}
.diagram{position:relative}
#eng{width:100%;height:auto;overflow:visible}
#eng line{stroke:#f0705f;stroke-width:2;stroke-dasharray:6 6;opacity:0;transition:opacity .6s}
#eng.live line{opacity:.55}
#eng line.hl{opacity:1;stroke-width:3;stroke-dasharray:none}
#eng .core{fill:var(--ink)}
#eng .coret{fill:#fed989;font:600 13px var(--sans);letter-spacing:.15em;text-anchor:middle}
.mk{cursor:pointer;opacity:.25;transition:opacity .5s,transform .3s;outline:none}
#eng.live .mk{opacity:1}
.mk circle{fill:#fff;stroke:#f0705f;stroke-width:2;transition:fill .2s}
.mk text{font:600 12px var(--sans);text-anchor:middle;fill:var(--ink)}
.mk.hl circle,.mk:hover circle,.mk:focus circle{fill:#fbb74a}
.enginfo{margin-top:24px;padding:16px 20px;background:var(--card);border-left:3px solid #f0705f;min-height:3.4em;font-size:.95rem}
.n-eng{right:0;top:-34px;display:flex;align-items:flex-start;gap:4px;transform:rotate(3deg)}
.logo svg{transition:transform .7s cubic-bezier(.5,-0.4,.3,1.4)}
.logo:hover svg{transform:rotate(360deg)}
@media (prefers-reduced-motion:reduce){.logo:hover svg{transform:none}}
@media(max-width:860px){.trk .stats{grid-template-columns:1fr 1fr}.n-hero,.n-stat{display:none}.note{font-size:1.2rem}}
.n-hero{left:auto;right:-150px;top:auto;bottom:-46px;flex-direction:row;transform:rotate(-3deg);z-index:3}
.n-hero svg{transform:rotate(200deg) scaleY(-1);width:44px}
.portrait{height:90%;max-width:100%}
.hero-art .sun{width:70%;top:12%}
.n-stat{left:190px;top:70px;flex-direction:row;align-items:center}
.n-stat svg{transform:rotate(200deg) scaleY(-1);width:44px}
.portrait{height:80%}
.hero-art .sun{width:66%;top:16%}
.n-hero{left:24px;right:auto;bottom:-52px;flex-direction:row-reverse}
.n-hero svg{transform:rotate(-30deg);width:40px}
.btnwrap{margin-bottom:40px}
.n-stat{left:auto;right:0;top:-92px;flex-direction:row;align-items:flex-end}
.n-stat svg{transform:rotate(110deg);width:48px}
@media(max-width:860px){nav a:first-child{display:none}nav a{margin-left:14px;font-size:.9rem}.logo b{display:none}.hero-art .cap{font-size:.62rem;left:12px;right:12px;text-align:center}.btnwrap{margin-bottom:0}}
.hero-art{background:linear-gradient(160deg,#fed989 0%,#fbb74a 40%,#fb8279 100%)}
.hero-art .sun{display:none}
.hero h1{font-size:clamp(2.3rem,4.2vw,3.7rem);line-height:1.02}
.hero h1 .h1b{display:block;margin-top:.12em}
.hero{height:min(520px,62vh)}
.hero-art .cap{top:24px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}
@media(max-width:860px){.hero-art .cap{white-space:normal;left:12px;right:12px;transform:none}}