/* ============================================================================
   marvinsuen.info — site styles
   Built on the MarvinCyberpuck design system (ds.css). Site-level patterns
   only: layout shell, header, molten-grid atmosphere, button sizing, the
   checklist console and responsive rules.
   ============================================================================ */

*{box-sizing:border-box}
body{margin:0}
img{max-width:100%}

/* --- layout shell --------------------------------------------------------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-8)}
.section{padding:var(--space-9) 0}
.section--tight{padding:var(--space-8) 0}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--space-4);top:var(--space-4);z-index:100;background:var(--ember);
  color:var(--ink);padding:8px 14px;border-radius:var(--radius-sm)}

/* --- atmosphere: molten grid (heroes / access only, never tiled page-wide) - */
.molten{
  background-image:
    radial-gradient(ellipse 70% 90% at 50% -10%,rgba(255,106,46,.15),transparent 65%),
    linear-gradient(rgba(255,106,46,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,106,46,.06) 1px,transparent 1px);
  background-size:100% 100%,64px 64px,64px 64px;
}
.molten--soft{
  background-image:
    radial-gradient(ellipse 70% 90% at 50% -10%,rgba(255,106,46,.10),transparent 65%),
    linear-gradient(rgba(255,106,46,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,106,46,.05) 1px,transparent 1px);
  background-size:100% 100%,64px 64px,64px 64px;
}
.notch{clip-path:var(--notch-clip)}

/* --- header --------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:40;
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-4) var(--space-8);
  background:rgba(21,16,12,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-default)}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--bone);letter-spacing:-.01em}
.wordmark--lg{font-size:20px}
.wordmark .em{color:var(--ember)}
.nav{display:flex;gap:var(--space-6);align-items:center}
.nav a{font-family:var(--font-mono);font-weight:500;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(244,234,224,.85);transition:color var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ember)}
.nav-toggle{display:none;background:none;border:1px solid var(--border-default);border-radius:var(--radius-sm);
  color:var(--ember);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;padding:8px 12px;cursor:pointer}

/* --- eyebrow / mono bits -------------------------------------------------- */
.eyebrow-lg{font-family:var(--font-mono);font-weight:500;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ember)}
.mono-muted{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bone-muted)}
.chip{display:inline-block;font-family:var(--font-mono);font-weight:500;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ember);
  border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:6px 12px}

/* --- buttons: sizes, glow, links ------------------------------------------ */
.btn,.btn-solid{text-decoration:none;line-height:1}
/* The solid button is the page's primary CTA. Per the Button spec it "darkens
   to copper on hover" — so its rest state is the bright ember fill, not the ink
   fill of the fallback utility class. Ember fill + ink text, copper on hover. */
.btn-solid{background:var(--ember);color:var(--ink)}
.btn-solid:hover{background:var(--copper);color:var(--bone)}
.btn--sm{padding:9px 14px;font-size:12px}
.btn--md{padding:11px 18px}
.btn--lg{padding:15px 24px;font-size:13px}
.btn--glow{transition:background var(--ease),color var(--ease),box-shadow var(--ease)}
.btn--glow:hover{box-shadow:var(--glow-hover)}
.btn-row{display:flex;gap:var(--space-4);flex-wrap:wrap}

/* --- hero ----------------------------------------------------------------- */
.hero h1{max-width:860px;text-wrap:pretty;margin:0 0 var(--space-5)}
.hero-lead{font-size:var(--text-body-lg);line-height:var(--lh-body);color:var(--bone-muted);
  margin:0 0 var(--space-7);max-width:560px}

/* --- stat strip ----------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border-default);border:1px solid var(--border-default);
  border-radius:var(--radius-md);overflow:hidden}
.stat{background:var(--ink);padding:var(--space-5)}
.stat b{display:block;font-family:var(--font-display);font-weight:500;font-size:32px;
  line-height:1.15;color:var(--ember)}
.stat span{display:block;font-family:var(--font-mono);font-weight:500;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bone-muted);margin-top:var(--space-2)}

/* --- generic cards -------------------------------------------------------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.feature{background:var(--surface);border:1px solid var(--border-default);
  border-radius:var(--radius-md);padding:var(--space-5)}
.feature h3{margin:0 0 var(--space-3)}
.feature p{margin:0 0 var(--space-5);color:var(--bone-muted);font-size:16px;line-height:1.6}
.feature .list{display:flex;flex-direction:column;gap:var(--space-3);
  border-top:1px solid var(--border-default);padding-top:var(--space-4)}
.feature .list div{font-size:14px;line-height:1.5;color:rgba(244,234,224,.85)}
.feature .list div.dim{color:var(--bone-muted)}
.link-arrow{color:var(--ember);font-family:var(--font-mono);font-weight:500}

/* --- footer --------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--border-default);padding:var(--space-8);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.site-footer .mono-muted a{color:rgba(244,234,224,.85)}
.site-footer .mono-muted a:hover{color:var(--ember)}

/* ============================================================================
   Checklist console (Useful stuff — direction 1e)
   ============================================================================ */
.console{display:grid;grid-template-columns:340px 1fr;min-height:760px;
  border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;
  background:var(--ink)}
.console__index{background:var(--surface);border-right:1px solid var(--border-default);
  padding:var(--space-6) var(--space-5)}
.console__index-title{font-family:var(--font-mono);font-weight:500;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ember);margin-bottom:var(--space-5)}
.idx-rows{display:flex;flex-direction:column;gap:2px}
.idx-row{text-align:left;width:100%;background:transparent;border:1px solid transparent;
  border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;color:var(--bone-muted);
  transition:background var(--ease),color var(--ease),border-color var(--ease)}
.idx-row .num{display:block;font-family:var(--font-mono);font-weight:500;font-size:11px;
  letter-spacing:.08em;color:var(--ember);margin-bottom:5px}
.idx-row .ttl{display:block;font-family:var(--font-body);font-size:15px;line-height:1.4}
.idx-row:hover{background:var(--ember-12);color:var(--bone)}
.idx-row[aria-selected="true"]{background:var(--ember-12);border-color:var(--border-default);color:var(--bone)}

.console__panel{padding:var(--space-7) var(--space-7);
  background-image:radial-gradient(ellipse 70% 50% at 70% 0%,rgba(255,106,46,.09),transparent 60%)}
.console__head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--space-6);margin-bottom:var(--space-6)}
.console__head h2{margin:0 0 var(--space-3)}
.console__head .blurb{max-width:520px;color:var(--bone-muted);margin:0;font-size:16px;line-height:1.6}
.console__actions{display:flex;gap:var(--space-3);margin-bottom:var(--space-6);
  padding-bottom:var(--space-5);border-bottom:1px solid var(--border-default)}

/* progress ring — conic fill with an ink core */
.ring{--pct:0;position:relative;flex:none;width:84px;height:84px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--ember) calc(var(--pct)*1%),var(--ember-12) 0)}
.ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--ink)}
.ring span{position:relative;z-index:1;font-family:var(--font-display);font-weight:500;font-size:20px;color:var(--bone)}

/* tickable checklist rows */
.checks{display:flex;flex-direction:column}
.check{display:grid;grid-template-columns:24px 1fr;gap:var(--space-4);
  padding:18px 0;border-bottom:1px solid var(--ember-12);cursor:pointer;
  background:none;border-left:none;border-right:none;border-top:none;
  text-align:left;color:inherit;font:inherit;width:100%}
.check__box{width:22px;height:22px;border:1px solid var(--border-default);border-radius:var(--radius-sm);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:13px;color:var(--ink);
  background:transparent;transition:background var(--ease),border-color var(--ease);margin-top:1px}
.check[aria-checked="true"] .check__box{background:var(--ember);border-color:var(--ember)}
.check__text{font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--bone);transition:color var(--ease)}
.check[aria-checked="true"] .check__text{color:var(--bone-muted);text-decoration:line-through;
  text-decoration-color:var(--ember-35)}
.check__note{display:block;font-family:var(--font-body);font-size:14px;line-height:1.6;
  color:rgba(244,234,224,.5);margin-top:6px}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:960px){
  .wrap{padding:0 var(--space-6)}
  .site-header{padding:var(--space-4) var(--space-6)}
  .grid-2,.grid-3,.stats{grid-template-columns:1fr}
  .console{grid-template-columns:1fr}
  .console__index{border-right:none;border-bottom:1px solid var(--border-default)}
  .display,h1{font-size:44px}
}
@media (max-width:640px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:100%;right:0;left:0;flex-direction:column;
    gap:var(--space-4);padding:var(--space-5) var(--space-6);
    background:rgba(21,16,12,.96);border-bottom:1px solid var(--border-default)}
  .nav-toggle{display:inline-block}
  .site-header{position:relative}
  .display,h1{font-size:36px}
  .section{padding:var(--space-8) 0}
  .console__panel,.console__index{padding:var(--space-5)}
  .console__head{flex-direction:column-reverse;align-items:flex-start}
}

/* --- print (checklists as a clean sheet) ---------------------------------- */
@media print{
  .site-header,.site-footer,.console__index,.console__actions,.nav-toggle,.skip{display:none!important}
  body{background:#fff;color:#111}
  .console{grid-template-columns:1fr;border:none;min-height:0}
  .console__panel{background:none;padding:0}
  .check__box{border-color:#555;color:#111}
  .check[aria-checked="true"] .check__box{background:#111;border-color:#111;color:#fff}
  .check__text,.console__head h2{color:#111}
  .check__note,.console__head .blurb{color:#444}
}