/* Layout: sticky nav over a ticker, hero with stat boxes, archive grid of thumbnail cards, full-post overlay. Tokens mirror thisevelife.space (deep navy void, cyan eyebrow, pink accent, chamfered panels). */
:root {
  --void:#03060e; --navy:#0a1330; --panel:#09142c; --panel-2:#0e1424; --edge:#1c2c4d;
  --blue-core:#1470e9; --blue:#2e8bff; --cyan:#35d6ff; --magenta:#b9559c; --pink:#e48bc3;
  --text-hi:#ffffff; --text-mid:#c9d6ee; --text-dim:#8b98b8; --text-faint:#4a5878;
  --font-display:'Orbitron',system-ui,sans-serif; --font-body:'Rajdhani',system-ui,sans-serif; --font-mono:'Share Tech Mono',ui-monospace,monospace;
  --glow-blue:0 0 22px #2e8bff66,0 0 4px #3b9dffcc; --glow-cyan:0 0 18px #35d6ff55; --chamfer:16px;
  color-scheme: dark;
}
* { box-sizing:border-box; }
html, body { background:var(--void); }
body { margin:0; color:var(--text-mid); font-family:var(--font-body); font-size:17px; line-height:1.6; }
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(at 20% 0%, rgba(18,36,90,.267) 0%, transparent 55%), radial-gradient(at 85% 15%, rgba(58,15,77,.24) 0%, transparent 50%), linear-gradient(rgba(46,139,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(46,139,255,.055) 1px, transparent 1px);
  background-size:auto,auto,42px 42px,42px 42px; }
h1,h2,h3 { font-family:var(--font-display); color:var(--text-hi); font-weight:800; text-wrap:balance; margin:0; letter-spacing:.01em; }
p { margin:0; } a { color:inherit; }
.wrap { max-width:1120px; margin:0 auto; padding-inline:clamp(16px,4vw,32px); position:relative; z-index:1; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); font-weight:700; }
.eyebrow::before { content:""; width:7px; height:7px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); border-radius:1px; }
.chamfer { clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer)); }

.ticker-track { position:relative; z-index:2; border-bottom:1px solid var(--edge); padding-block:9px; overflow:hidden; background:linear-gradient(90deg,#03060e,transparent 6%,transparent 94%,#03060e),rgba(6,11,26,.5); }
.ticker-inner { display:flex; gap:40px; white-space:nowrap; width:max-content; animation:ticker 90s linear infinite; }
.ticker-inner span { font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; color:var(--text-dim); text-transform:uppercase; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .ticker-inner{animation:none} html{scroll-behavior:auto} }

header.site-nav { position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:rgba(3,6,14,.8); backdrop-filter:blur(10px); border-bottom:1px solid var(--edge); }
.nav-inner { max-width:1120px; margin:0 auto; padding:12px clamp(16px,4vw,32px); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.brand-badge { width:34px; height:34px; border-radius:50%; border:1.5px solid var(--blue); display:flex; align-items:center; justify-content:center; box-shadow:var(--glow-blue); font-family:var(--font-display); font-weight:900; font-size:14px; color:var(--text-hi); flex:0 0 auto; }
.brand-word { font-family:var(--font-display); font-size:14.5px; font-weight:700; color:var(--text-hi); letter-spacing:.04em; line-height:1.15; }
.brand-word span { display:block; font-size:10px; color:var(--text-dim); font-weight:500; letter-spacing:.18em; font-family:var(--font-body); text-transform:uppercase; }
nav.links { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
nav.links a { font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--text-mid); text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; white-space:nowrap; }
nav.links a:hover { color:var(--text-hi); border-color:var(--blue); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:13.5px; padding:12px 22px; text-decoration:none; border-radius:6px; transition:transform .15s ease, box-shadow .15s ease; cursor:pointer; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:linear-gradient(rgb(50,118,220),rgb(36,89,184)); color:#f2f7ff; border:1px solid rgb(79,143,240); box-shadow:rgba(46,139,255,.18) 0 2px 12px; }
.btn-primary:hover { background:linear-gradient(rgb(58,130,234),rgb(42,99,198)); box-shadow:rgba(46,139,255,.333) 0 0 18px; }
.btn-ghost { border:1px solid var(--edge); color:var(--text-mid); background:transparent; }
.btn:focus-visible, nav a:focus-visible, .card:focus-visible, .chip-btn:focus-visible, input:focus-visible, select:focus-visible, .close:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }

.hero { padding-block:clamp(48px,8vw,88px) clamp(32px,5vw,56px); }
.status-badge { display:inline-flex; align-items:center; gap:10px; padding:7px 14px; border:1px solid var(--edge); border-radius:999px; background:rgba(9,20,44,.6); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); font-weight:600; margin-bottom:22px; }
.status-badge b { color:var(--pink); font-weight:700; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); flex:0 0 auto; }
.hero-greeting { font-family:var(--font-mono); font-size:14.5px; letter-spacing:.06em; color:var(--text-dim); margin-bottom:14px; }
.hero h1 { font-size:clamp(36px,6.4vw,68px); line-height:1.03; background:linear-gradient(#fff 0%,#dfe7f2 45%,#a9b6cf 100%); -webkit-background-clip:text; background-clip:text; color:transparent; max-width:16ch; }
.hero .sub { margin-top:20px; font-size:clamp(17px,2.1vw,21px); color:var(--text-mid); max-width:58ch; font-weight:500; }
.ctas { display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.stats { display:flex; gap:12px; flex-wrap:wrap; margin-top:40px; }
.cbox { background:var(--panel); border:1px solid var(--edge); padding:14px 18px; min-width:92px; text-align:center; }
.cbox.active { border-color:var(--blue); box-shadow:rgba(46,139,255,.333) 0 0 14px; }
.cbox .n { font-family:var(--font-mono); font-size:30px; color:var(--text-hi); font-weight:700; font-variant-numeric:tabular-nums; }
.cbox .l { font-size:10.5px; letter-spacing:.14em; color:var(--text-dim); text-transform:uppercase; margin-top:2px; }

.band { border-block:1px solid var(--edge); padding-block:24px; background:linear-gradient(90deg,rgba(20,112,233,.08),transparent 40%,transparent 60%,rgba(20,112,233,.08)); position:relative; z-index:1; scroll-margin-top:84px; }
.band-inner { display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; }
.band-title { font-family:var(--font-display); font-weight:800; font-size:clamp(18px,2.6vw,24px); color:var(--text-hi); letter-spacing:.04em; text-transform:uppercase; }
.band-title span { color:var(--pink); }
.band p { font-size:15px; color:var(--text-dim); }

section { padding-block:clamp(28px,4vw,44px); position:relative; z-index:1; }
.filters { display:grid; gap:16px; margin-bottom:26px; }
.frow { display:flex; gap:10px 14px; flex-wrap:wrap; align-items:center; }
.flabel { font-family:var(--font-display); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); font-weight:700; min-width:84px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.chip-btn { font-family:var(--font-body); font-size:13.5px; font-weight:500; padding:6px 12px; border:1px solid var(--edge); color:var(--text-mid); background:rgba(14,20,36,.6); cursor:pointer; }
.chip-btn:hover { border-color:var(--blue); color:var(--text-hi); }
.chip-btn[aria-pressed="true"] { border-color:var(--blue); background:rgba(20,112,233,.2); color:var(--text-hi); box-shadow:rgba(46,139,255,.333) 0 0 10px; }
.chip-btn .ct { font-family:var(--font-mono); color:var(--text-dim); margin-left:6px; font-size:12px; }
.search-row { display:flex; gap:12px; flex-wrap:wrap; }
input[type="search"], select { font-family:var(--font-body); font-size:16px; color:var(--text-hi); background:var(--panel); border:1px solid var(--edge); padding:10px 14px; min-width:0; }
input[type="search"] { flex:1 1 260px; }
select { flex:0 1 220px; }
input::placeholder { color:var(--text-faint); }
.count { font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); letter-spacing:.04em; }

.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:860px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .grid{grid-template-columns:minmax(0,1fr)} }
.card { display:flex; flex-direction:column; text-align:left; text-decoration:none; background:var(--panel-2); border:1px solid var(--edge); transition:border-color .15s, transform .15s; cursor:pointer; padding:0; color:inherit; font:inherit; min-width:0; }
.card:hover { border-color:var(--blue); transform:translateY(-2px); }
.thumb { position:relative; aspect-ratio:16/9; max-width:100%; background:#060b1a; overflow:hidden; }
.thumb img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.thumb .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:clamp(18px,3vw,26px); color:rgba(46,139,255,.333); background:radial-gradient(at 30% 20%,#12245a,#060b1a 70%); letter-spacing:.06em; }
.thumb .ph.text { font-size:14px; padding:16px; text-align:center; color:var(--text-dim); font-family:var(--font-body); font-weight:500; letter-spacing:.02em; line-height:1.4; }
.badge { position:absolute; z-index:2; right:6px; bottom:6px; font-family:var(--font-mono); font-size:11px; background:rgba(3,6,14,.9); color:var(--text-hi); padding:1px 6px; }
.cbody { padding:10px 12px 14px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.cdate { font-family:var(--font-mono); font-size:12px; color:var(--cyan); letter-spacing:.06em; }
.ctitle { font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--text-hi); line-height:1.3; text-wrap:balance; overflow-wrap:anywhere; }
.csnip { font-size:14.5px; color:var(--text-dim); line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.tag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:2px 8px; border:1px solid var(--blue); color:var(--cyan); }
.tag.cat { border-color:var(--magenta); color:var(--pink); }
.empty { padding:40px 0; color:var(--text-dim); text-align:center; }
.yearhead { grid-column:1/-1; display:flex; align-items:center; gap:14px; font-family:var(--font-mono); color:var(--text-dim); font-size:13px; letter-spacing:.14em; margin-top:10px; }
.yearhead::after { content:""; flex:1; height:1px; background:var(--edge); }

.pages-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media (max-width:700px){ .pages-grid{grid-template-columns:minmax(0,1fr)} }
.pcard { background:linear-gradient(rgba(16,26,50,.92),rgba(6,11,26,.94)); border:1px solid var(--edge); padding:22px; text-align:left; cursor:pointer; color:inherit; font:inherit; display:flex; flex-direction:column; gap:8px; min-width:0; transition:border-color .15s; }
.pcard:hover { border-color:var(--blue); }
.pcard h3 { font-size:17px; line-height:1.3; overflow-wrap:anywhere; }
.pcard p { font-size:15px; color:var(--text-dim); }
.pcard .go { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); margin-top:auto; padding-top:6px; }

.thanks { text-align:center; padding-block:clamp(36px,6vw,56px); border-top:1px solid var(--edge); font-family:var(--font-display); font-weight:800; font-size:clamp(20px,3.2vw,30px); letter-spacing:.04em; color:#dfe7f2; text-shadow:rgba(46,139,255,.267) 0 0 18px; position:relative; z-index:1; }
footer { border-top:1px solid var(--edge); padding-block:28px; position:relative; z-index:1; }
.foot-inner { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--text-faint); }
.foot-inner a { color:var(--text-dim); text-decoration:none; } .foot-inner a:hover { color:var(--cyan); }


.sheet-wrap { padding-block:clamp(24px,4vw,40px); position:relative; z-index:1; }
.sheet { max-width:860px; margin:0 auto; background:var(--panel); border:1px solid var(--edge); padding:clamp(20px,4vw,36px); min-width:0; }
.sheet h1 { font-size:clamp(22px,3.6vw,32px); line-height:1.15; overflow-wrap:anywhere; }
.crumbs { max-width:860px; margin:0 auto 14px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; }
.crumbs a { color:var(--text-dim); text-decoration:none; } .crumbs a:hover { color:var(--cyan); }
.smeta { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin-top:12px; }
.smeta .cdate { margin-right:4px; }
a.tag { text-decoration:none; } a.tag:hover { background:rgba(20,112,233,.2); color:var(--text-hi); }
.sbody { margin-top:22px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.sbody p { font-size:17px; line-height:1.65; max-width:68ch; overflow-wrap:anywhere; }
.sbody a { color:var(--cyan); text-underline-offset:3px; } .sbody a:hover { color:var(--text-hi); }
.sbody strong { color:var(--text-hi); }
.sbody ul { margin:0; padding-left:22px; max-width:68ch; display:flex; flex-direction:column; gap:8px; }
.sbody li { overflow-wrap:anywhere; }
.quote p { border-left:3px solid var(--blue); padding-left:16px; }
.gal { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:10px; }
.gal.one { grid-template-columns:minmax(0,1fr); }
.fig { margin:0; background:#060b1a; border:1px solid var(--edge); min-width:0; position:relative; }
.fig img { display:block; width:100%; height:auto; }
.tablewrap { overflow-x:auto; border:1px solid var(--edge); max-width:100%; }
table { border-collapse:collapse; width:100%; font-size:15px; }
th,td { text-align:left; padding:8px 12px; border-bottom:1px solid var(--edge); }
th { font-family:var(--font-display); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); }
td.num { font-family:var(--font-mono); color:var(--text-hi); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pn { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:28px; padding-top:18px; border-top:1px dashed var(--edge); }
.pn a { color:var(--text-mid); text-decoration:none; font-size:14.5px; max-width:48%; overflow-wrap:anywhere; } .pn a:hover { color:var(--cyan); }
.listhead { padding-block:clamp(32px,5vw,56px) 8px; } .listhead h1 { font-size:clamp(26px,4.6vw,44px); }
