/* hero.css — shared hero + tease + ticker styling for the winner explorations */

.hero { position:relative; min-height:62vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.hero canvas.viz { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.lead { position:relative; z-index:2; padding:0 var(--pad); max-width:1040px; }
.eyebrow { font-family:var(--mono); font-size:.8rem; color:var(--ink-mono); margin-bottom:1.2rem; }
.wordmark { font-weight:300; font-size:clamp(3rem,9vw,7rem); line-height:.9; letter-spacing:-.05em; }
.positioning { font-size:clamp(1.2rem,2.6vw,1.9rem); font-weight:300; max-width:28ch; margin-top:1.4rem; line-height:1.25; }
.positioning em { font-family:var(--serif); font-style:italic; font-weight:500; }
.cap { font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); padding:0 var(--pad); }

/* tease styles */
.t-serif { margin-top:1.4rem; font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--ink-soft); }          /* 01 */
.t-label { margin-top:1.5rem; }                                                                                                /* 08 */
.t-label .l { display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.4rem; }
.t-label .v { font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--ink-soft); }
.t-state { margin-top:1.5rem; font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.15; color:var(--ink); letter-spacing:-.01em; }  /* 07 */

/* ---- ticker base (black terminal crawl) ---- */
.ticker { background:var(--ink); color:#e9e7e2; overflow:hidden; white-space:nowrap; font-family:var(--mono); font-size:.76rem; letter-spacing:.03em; position:relative; }
.ticker .track { display:inline-block; padding:.6rem 0; animation:crawl 46s linear infinite; }
.ticker:hover .track { animation-play-state:paused; }
.ticker .it { color:#cfccc6; } .ticker .it b { color:#fff; font-weight:500; }
.ticker .sep { color:var(--accent); margin:0 1.4rem; }
@keyframes crawl { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* dual opposing rows */
.ticker.dual .track.r2 { animation-direction:reverse; animation-duration:60s; border-top:1px solid #262521; }
.ticker.dual .track { padding:.45rem 0; }

/* vertical roll (departure-line) */
.vroll { background:var(--ink); color:#e9e7e2; font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; height:2.1rem; overflow:hidden; display:flex; align-items:center; }
.vroll .pin { color:var(--accent); padding:0 .8rem 0 var(--pad); }
.vroll .win { height:1.3rem; overflow:hidden; position:relative; flex:1; }
.vroll .col { position:absolute; left:0; top:0; transition:transform .5s cubic-bezier(.6,0,.2,1); }
.vroll .col div { height:1.3rem; line-height:1.3rem; color:#d3d0ca; }

/* typewriter */
.tw { background:var(--ink); color:#e9e7e2; font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; padding:.6rem var(--pad); }
.tw .pin { color:var(--accent); margin-right:.7rem; }
.tw .out { color:#e9e7e2; }
.tw .car { display:inline-block; width:.55ch; background:var(--accent); margin-left:1px; animation:cblink 1s step-end infinite; color:transparent; }
@keyframes cblink { 50%{opacity:0} }

/* scramble */
.scr { background:var(--ink); color:#e9e7e2; font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; padding:.6rem var(--pad); }
.scr .pin { color:var(--accent); margin-right:.7rem; }

/* vertical margin spine (rotated) + pushed hero for breathing room */
.vtease { position:absolute; left:20px; top:50%; transform:translateY(-50%); z-index:3; display:flex; gap:1.6rem; }
.vcol { writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--mono); font-size:.72rem; letter-spacing:.17em; color:var(--ink-faint); white-space:nowrap; }
.vcol b { color:var(--ink); font-weight:500; }
.lead.pushed { padding-left: calc(var(--pad) + 4.5rem); }

/* ---- shared footer + social + nav (winner explorations) ---- */
footer{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:1.4rem var(--pad) 3rem; border-top:1px solid var(--rule); }
footer .now{ font-family:var(--mono); font-size:.8rem; color:var(--ink-faint); }
footer .now .dot{ color:var(--accent); }
.social{ display:inline-flex; gap:.5em; align-items:center; font-size:38px; }  /* size via font-size; doubled "for now" */
.social a{ display:inline-flex; line-height:0; transition:transform .12s; } .social a:hover{ transform:translateY(-2px); }

/* right nav · per-section colour (smaller numbers, title lights to its colour on hover) */
.rsec.cc a{ grid-template-columns:2.2rem 1fr auto; }
.rsec.cc .n{ font-size:.95rem; font-weight:600; color:var(--sc, var(--ink-faint)); }
.rsec.cc .t{ transition:color .15s; }
.rsec.cc a:hover .t{ color:var(--sc, var(--accent)); }
.rsec.cc a:hover .go{ color:var(--sc, var(--accent)); }

/* top nav bar */
.navrow{ display:flex; gap:2.4rem; align-items:center; padding:1rem var(--pad); border-bottom:1px solid var(--rule); }
.navrow a.s{ display:flex; gap:.5rem; align-items:baseline; }
.navrow .n{ font-family:var(--mono); font-size:.68rem; color:var(--ink-faint); }
.navrow .t{ font-family:var(--serif); font-style:italic; font-size:1.3rem; font-weight:500; }
.navrow a.s:hover .t{ color:var(--accent); }
.navrow .social{ margin-left:auto; }

/* slim inline nav (variant) */
.navslim{ display:flex; gap:1.5rem; align-items:center; padding:.8rem var(--pad); border-bottom:1px solid var(--rule); font-family:var(--mono); font-size:.82rem; }
.navslim a.s{ color:var(--ink-soft); } .navslim a.s:hover{ color:var(--accent); }
.navslim a.s .n{ color:var(--ink-faint); margin-right:.3rem; }
.navslim .social{ margin-left:auto; }

/* right column nav (in heroflex) */
.heroflex{ position:relative; z-index:2; padding:0 var(--pad); display:flex; justify-content:space-between; align-items:center; gap:3rem; width:100%; }
.heroflex .left{ max-width:58%; }
.heroflex .left .eyebrow{ font-family:var(--mono); font-size:.8rem; color:var(--ink-mono); margin-bottom:1.2rem; }
.heroflex .left .wordmark{ font-weight:300; font-size:clamp(2.6rem,8vw,6rem); line-height:.9; letter-spacing:-.05em; }
.heroflex .left .positioning{ font-size:clamp(1.1rem,2.3vw,1.7rem); font-weight:300; max-width:26ch; margin-top:1.3rem; line-height:1.25; }
.heroflex .left .positioning em{ font-family:var(--serif); font-style:italic; font-weight:500; }
.heroflex .left .t-state{ margin-top:1.3rem; font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.1vw,1.7rem); color:var(--ink); }
.rsec{ min-width:30%; }
.rsec .lab{ font-family:var(--mono); font-size:.68rem; color:var(--ink-faint); letter-spacing:.1em; margin-bottom:.3rem; }
.rsec a{ display:grid; grid-template-columns:2.4rem 1fr auto; gap:.8rem; align-items:baseline; padding:.95rem 0; border-top:1px solid var(--rule); transition:padding-left .2s; }
.rsec a:last-child{ border-bottom:1px solid var(--rule); }
.rsec a:hover{ padding-left:.4rem; }
.rsec .n{ font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); }
.rsec .t{ font-family:var(--serif); font-style:italic; font-size:1.5rem; font-weight:500; }
.rsec .go{ font-family:var(--mono); font-size:.68rem; color:var(--ink-faint); } .rsec a:hover .go{ color:var(--accent); }
/* per-section coloured + bolder numbers */
.rsec.col a{ grid-template-columns:2.8rem 1fr auto; }
.rsec.col .n{ font-size:1.15rem; font-weight:700; }
@media(max-width:820px){ .heroflex{flex-direction:column;align-items:flex-start;} .heroflex .left{max-width:100%;} }

/* contribution heatmap — green (github-style) */
.heat{ display:grid; gap:2px; width:max-content; }
.heat i{ width:9px; height:9px; border-radius:2px; background:#ebedf0; display:block; }
.heat i.l1{ background:#9be9a8; } .heat i.l2{ background:#40c463; } .heat i.l3{ background:#216e39; }