/* ==========================================================================
   bernardoletayf.com — site.css
   The "character sheet" design system. One file, tokens on :root.
   Ground is dark by design (portrait, BLUERABBIT lineage); XP Gold is the
   accent. Case studies re-skin through [data-skin] by overriding --accent.
   ========================================================================== */

:root{
  --ink:#0b1120;      /* page ground */
  --ink-2:#111a2e;    /* raised surface */
  --ink-3:#18233d;    /* inset / chips */
  --ink-4:#223052;    /* tracks, hover */
  --line:rgba(236,230,217,.12);
  --line-2:rgba(236,230,217,.22);
  --bone:#ece6d9;
  --bone-2:rgba(236,230,217,.74);
  --bone-3:rgba(236,230,217,.56);
  --gold:#f4b942;
  --gold-hi:#ffd98a;
  --gold-dim:rgba(244,185,66,.14);
  --cyan:#1cc2eb;
  --cyan-dim:rgba(28,194,235,.13);
  --crit:#ef5b4f;
  --crit-dim:rgba(239,91,79,.14);
  --leaf:#5ccf8c;
  --leaf-dim:rgba(92,207,140,.13);
  --accent:var(--gold);
  --accent-hi:var(--gold-hi);
  --accent-dim:var(--gold-dim);
  --on-accent:#1c1300;

  --display:'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body:'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --wrap:1180px;
  --gutter:clamp(16px, 4vw, 32px);
  --radius:14px;
  --radius-sm:8px;
  color-scheme:dark;
}

/* Case-study skins: same layout, the product's own accent. */
[data-skin="bluerabbit"]{ --accent:#1cc2eb; --accent-hi:#90f3fe; --accent-dim:rgba(28,194,235,.14); --on-accent:#02161e; }
[data-skin="garden"]{ --accent:#5ccf8c; --accent-hi:#b0fc90; --accent-dim:rgba(92,207,140,.14); --on-accent:#03170c; }

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
p a, li a, .prose a{color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
p a:hover, li a:hover, .prose a:hover{color:var(--accent-hi);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
h1,h2,h3,h4{font-family:var(--display); line-height:1.06; margin:0; font-weight:800; letter-spacing:-.015em; text-wrap:balance;}
h1{font-size:clamp(40px, 6.4vw, 76px); letter-spacing:-.03em;}
h2{font-size:clamp(30px, 4.2vw, 46px); letter-spacing:-.025em;}
h3{font-size:clamp(20px, 2.2vw, 24px); font-weight:600; letter-spacing:-.005em;}
h4{font-size:17px; font-weight:600; letter-spacing:0;}
p{margin:0;}
ul,ol{margin:0; padding-left:1.15em;}
li::marker{color:var(--bone-3);}
hr{border:0; border-top:1px solid var(--line); margin:0;}
::selection{background:var(--accent); color:var(--on-accent);}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter);}
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--accent); color:var(--on-accent); padding:8px 14px; border-radius:6px; font-weight:600;}
.skip:focus{left:8px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- type utilities ---------- */
.label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-3); font-weight:400; line-height:1.4;
}
.label.accent{color:var(--accent);}
.label.gold{color:var(--gold);}
.label.cyan{color:var(--cyan);}
.label.leaf{color:var(--leaf);}
.label.crit{color:var(--crit);}
.lede{font-size:clamp(18px, 1.7vw, 20.5px); color:var(--bone-2); max-width:60ch; line-height:1.55;}
.muted{color:var(--bone-2);}
.faint{color:var(--bone-3);}
.small{font-size:14.5px;}
.mono{font-family:var(--mono);}
.num{font-variant-numeric:tabular-nums;}
em.hl{font-style:normal; color:var(--accent);}

/* ---------- buttons & chips ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:15px; line-height:1;
  padding:13px 20px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .15s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent); color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-hi);}
.btn-ghost{border-color:var(--line-2); color:var(--bone); background:transparent;}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn-sm{padding:9px 14px; font-size:14px;}
.btn-block{width:100%;}
.btn .arr{font-family:var(--mono); transition:transform .15s;}
.btn:hover .arr{transform:translateX(3px);}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none;}

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  padding:5px 10px; border-radius:999px; background:var(--ink-3);
  color:var(--bone-2); border:1px solid var(--line); white-space:nowrap;
}
.chip b{color:var(--bone); font-weight:600;}
.chip.accent{background:var(--accent-dim); color:var(--accent); border-color:transparent;}
.chip.live{background:var(--crit-dim); color:var(--crit); border-color:transparent;}
.chip.live::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor;}
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:rgba(11,17,32,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px;}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.01em;}
.brand-mark{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--gold); color:#1c1300; font-size:15px; font-weight:800; letter-spacing:-.04em;
}
.brand > span{white-space:nowrap;}
.brand small{display:block; font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-3); margin-top:2px;}
.nav-links{display:flex; align-items:center; gap:4px;}
.nav-links a{font-size:15px; color:var(--bone-2); padding:8px 12px; border-radius:999px; transition:color .15s, background .15s;}
.nav-links a:hover{color:var(--bone); background:var(--ink-3);}
.nav-links a.active{color:var(--bone); background:var(--ink-3);}
.nav-cta{display:flex; align-items:center; gap:8px;}
.nav-toggle{display:none; background:none; border:1px solid var(--line-2); color:var(--bone); border-radius:999px; padding:8px 14px; font:inherit; font-size:14px; cursor:pointer;}

@media (max-width:980px){
  .nav-toggle{display:inline-flex;}
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0; padding:10px var(--gutter) 18px;
    background:var(--ink); border-bottom:1px solid var(--line);
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 4px; border-radius:0; border-bottom:1px solid var(--line); font-size:17px;}
  .nav-links a:hover, .nav-links a.active{background:none; color:var(--accent);}
  .nav-cta .btn-ghost{display:none;}
}

/* ---------- sections ---------- */
.section{padding-block:clamp(64px, 9vw, 112px);}
.section + .section{border-top:1px solid var(--line);}
.section.tight{padding-block:clamp(44px, 6vw, 72px);}
.sec-head{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:24px; align-items:end; margin-bottom:clamp(28px, 4vw, 44px);}
.sec-head .label{display:block; margin-bottom:14px;}
.sec-head p{margin-top:14px;}
.sec-head .actions{padding-bottom:4px;}
@media (max-width:700px){ .sec-head{grid-template-columns:1fr;} }

.page-hero{padding-block:clamp(56px, 8vw, 96px) clamp(40px, 6vw, 64px); border-bottom:1px solid var(--line);}
.page-hero .label{display:block; margin-bottom:16px;}
.page-hero h1{max-width:18ch;}
.page-hero .lede{margin-top:22px;}
.page-hero .chip-row{margin-top:26px;}

/* ---------- hero: the character sheet ---------- */
.hero{padding-block:clamp(48px, 7vw, 88px) clamp(56px, 8vw, 96px); position:relative;}
.hero::before{
  content:''; position:absolute; inset:-120px 0 auto; height:620px; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse 60% 55% at 78% 30%, rgba(244,185,66,.10), transparent 70%),
             radial-gradient(ellipse 40% 45% at 10% 0%, rgba(28,194,235,.07), transparent 70%);
}
.hero-grid{display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:clamp(36px, 5vw, 64px); align-items:center;}
.hero h1 em{font-style:normal; color:var(--gold);}
.hero .lede{margin-top:24px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;}
.hero-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:28px; font-family:var(--mono); font-size:12.5px; color:var(--bone-3);}
.hero-meta span{display:inline-flex; align-items:center; gap:7px;}
.hero-meta .dot{width:6px; height:6px; border-radius:50%; background:var(--leaf); box-shadow:0 0 8px var(--leaf);}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }

.sheet{background:var(--ink-2); border:1px solid var(--line-2); border-radius:18px; overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.5);}
.sheet-top{display:grid; grid-template-columns:128px minmax(0,1fr); gap:18px; padding:20px; align-items:end; background:linear-gradient(180deg, rgba(244,185,66,.08), transparent 75%);}
.sheet-top img{width:128px; height:128px; object-fit:cover; object-position:50% 18%; border-radius:12px; border:1px solid var(--line-2);}
.sheet-name{font-family:var(--display); font-weight:800; font-size:30px; line-height:1; letter-spacing:-.02em; margin-top:6px;}
.sheet-class{font-family:var(--mono); font-size:12px; color:var(--bone-2); margin-top:9px; line-height:1.55;}
.sheet-class b{color:var(--gold); font-weight:600;}
.xp{margin-top:14px;}
.xp-row{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-3); margin-bottom:6px;}
.xp-row b{color:var(--gold); font-weight:600;}
.xp-bar{height:7px; background:var(--ink-4); border-radius:4px; overflow:hidden;}
.xp-bar i{display:block; height:100%; background:linear-gradient(90deg, var(--gold), var(--gold-hi)); border-radius:4px;}
.stats{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border-top:1px solid var(--line);}
.stat{padding:15px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat:nth-child(3n){border-right:0;}
.stat:nth-last-child(-n+3){border-bottom:0;}
.stat .n{font-family:var(--display); font-weight:800; font-size:28px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.stat .n sup{font-size:.5em; color:var(--gold); vertical-align:super; margin-left:1px;}
.stat .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--bone-3); margin-top:7px; line-height:1.35;}
.sheet-foot{padding:11px 18px; font-family:var(--mono); font-size:11.5px; color:var(--bone-2); background:var(--ink-3); display:flex; align-items:center; gap:10px;}
.sheet-foot .star{color:var(--gold);}
@media (max-width:520px){
  .sheet-top{grid-template-columns:88px minmax(0,1fr); gap:14px; padding:16px;}
  .sheet-top img{width:88px; height:88px;}
  .sheet-name{font-size:23px;}
  .stat{padding:12px 11px;}
  .stat .n{font-size:22px;}
  .stat .k{font-size:9.5px;}
}

/* ---------- trust strip ---------- */
.trust{padding-block:28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ink-2);}
.trust-inner{display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; align-items:center;}
.trust-list{display:flex; flex-wrap:wrap; gap:6px 26px;}
.trust-list span{font-family:var(--display); font-weight:600; font-size:17px; color:var(--bone-2); letter-spacing:-.01em; white-space:nowrap;}
@media (max-width:760px){ .trust-inner{grid-template-columns:1fr; gap:14px;} .trust-list{gap:4px 18px;} .trust-list span{font-size:15px;} }

/* ---------- cards ---------- */
.card{background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px, 2.4vw, 28px);}
.grid-2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(14px, 2vw, 22px);}
.grid-3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 2vw, 22px);}
.grid-4{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(12px, 1.6vw, 18px);}
@media (max-width:980px){ .grid-4{grid-template-columns:repeat(2, minmax(0,1fr));} .grid-3{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

/* Featured case-study card, wearing its product's skin */
.case-card{
  position:relative; display:flex; flex-direction:column; min-height:100%;
  background:var(--ink-2); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.case-card:hover{border-color:var(--accent); transform:translateY(-3px);}
.case-card .cover{
  aspect-ratio:16/10; position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 80% 90% at 70% 20%, var(--accent-dim), transparent 70%), var(--ink-3);
}
.case-card .cover img{width:100%; height:100%; object-fit:cover; object-position:top left;}
.case-card .cover .cover-mark{position:absolute; inset:0; display:grid; place-items:center; padding:12%;}
.case-card .body{padding:clamp(20px, 2.4vw, 28px); display:flex; flex-direction:column; gap:12px; flex:1;}
.case-card h3{font-size:clamp(24px, 2.6vw, 30px); font-weight:800; letter-spacing:-.02em;}
.case-card .card-facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:8px;}
.case-card .cover .cover-mark img{width:80%; max-width:340px; height:auto; object-fit:contain;}
.case-card .go{font-family:var(--mono); font-size:12.5px; color:var(--accent); display:flex; align-items:center; gap:8px;}

/* ---------- quest log (timeline) ---------- */
.quest-log{list-style:none; padding:0; margin:0; position:relative;}
.quest-log::before{content:''; position:absolute; left:92px; top:6px; bottom:6px; width:1px; background:var(--line-2);}
.quest{display:grid; grid-template-columns:78px 28px minmax(0,1fr); gap:0 0; padding-block:14px;}
.quest .yr{font-family:var(--mono); font-size:13px; color:var(--bone-3); padding-top:3px; font-variant-numeric:tabular-nums;}
.quest .pin{position:relative;}
.quest .pin::before{content:''; position:absolute; left:10px; top:7px; width:11px; height:11px; border-radius:3px; transform:rotate(45deg); background:var(--ink); border:2px solid var(--bone-3);}
.quest.major .pin::before{background:var(--gold); border-color:var(--gold); box-shadow:0 0 12px rgba(244,185,66,.5);}
.quest h4{font-size:17.5px;}
.quest p{color:var(--bone-2); font-size:15.5px; margin-top:4px; max-width:62ch;}
@media (max-width:560px){
  .quest-log::before{left:9px;}
  .quest{grid-template-columns:28px minmax(0,1fr);}
  .quest .yr{grid-column:2; padding-top:0; margin-bottom:2px;}
  .quest .pin{grid-row:1 / span 2; grid-column:1;}
  .quest .pin::before{left:4px; top:4px;}
  .quest > div:last-child{grid-column:2;}
}

/* ---------- inventory (products) ---------- */
.item{
  display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; transition:border-color .2s, transform .2s; min-height:100%;
}
.item:hover{border-color:var(--item-accent, var(--accent)); transform:translateY(-3px);}
.item .art{
  aspect-ratio:452/250; display:grid; place-items:center; padding:12% 14%; position:relative;
  background:radial-gradient(ellipse 90% 90% at 50% 20%, color-mix(in srgb, var(--item-accent, var(--gold)) 22%, transparent), transparent 70%), var(--ink-3);
  border-bottom:1px solid var(--line);
}
.item .art img{max-height:100%; width:auto; object-fit:contain;}
.item .art.cover{padding:8% 30%;}
.item .art.cover img{border-radius:3px 6px 6px 3px; box-shadow:0 12px 30px rgba(0,0,0,.5);}
.item .art .word{font-family:var(--display); font-weight:800; font-size:clamp(22px, 2.4vw, 28px); line-height:.98; letter-spacing:-.02em; text-align:center; color:var(--bone);}
.item .art .ribbon{position:absolute; top:12px; left:12px;}
.item .info{padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.item .ty{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--item-accent, var(--accent));}
.item h3{font-size:19px; line-height:1.18;}
.item .tag{font-size:14.5px; color:var(--bone-2); line-height:1.5;}
.item .price-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 10px; margin-top:auto; padding-top:10px; border-top:1px dashed var(--line-2);}
.item .price{font-family:var(--display); font-weight:800; font-size:21px; font-variant-numeric:tabular-nums;}
.item .price small{font-family:var(--mono); font-weight:400; font-size:11px; color:var(--bone-3); margin-left:4px;}
.item .price-row .go{font-family:var(--mono); font-size:12.5px; color:var(--item-accent, var(--accent)); white-space:nowrap;}

/* ---------- workshop rows ---------- */
.ws{display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:clamp(20px, 3vw, 36px); align-items:start;}
.ws + .ws{margin-top:18px;}
.ws-card{background:var(--ink-2); border:1px solid var(--line); border-radius:18px; padding:clamp(22px, 3vw, 34px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0, 300px); gap:clamp(20px, 3vw, 40px); transition:border-color .2s;}
.ws-card:hover{border-color:var(--line-2);}
.ws-card + .ws-card{margin-top:16px;}
.ws-card h3{font-size:clamp(23px, 2.6vw, 30px); font-weight:800; letter-spacing:-.02em;}
.ws-card .tagline{color:var(--bone-2); margin-top:10px;}
.ws-card .meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.ws-side{display:flex; flex-direction:column; gap:12px; padding-left:clamp(0px, 2.4vw, 28px); border-left:1px solid var(--line);}
.ws-side .next{font-family:var(--mono); font-size:12px; color:var(--bone-3); letter-spacing:.06em; text-transform:uppercase;}
.ws-side .when{font-family:var(--display); font-weight:800; font-size:22px; line-height:1.15;}
.ws-side .sub{font-size:14px; color:var(--bone-2);}
.seats{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--bone-2);}
.seats .bar{flex:1; height:5px; background:var(--ink-4); border-radius:3px; overflow:hidden;}
.seats .bar i{display:block; height:100%; background:var(--accent);}
@media (max-width:820px){
  .ws-card{grid-template-columns:1fr;}
  .ws-side{padding-left:0; border-left:0; border-top:1px solid var(--line); padding-top:18px;}
}

/* ---------- book ---------- */
.book-feature{display:grid; grid-template-columns:minmax(0, 300px) minmax(0, 1fr); gap:clamp(28px, 5vw, 64px); align-items:center;}
.book-cover{position:relative; max-width:300px;}
.book-cover img{border-radius:4px 10px 10px 4px; box-shadow:inset 6px 0 0 rgba(0,0,0,.25), 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px var(--line-2);}
.book-cover .badge{position:absolute; right:-14px; top:18px;}
.chapters{display:grid; gap:12px; margin-top:24px;}
.chapter{display:grid; grid-template-columns:44px minmax(0, 1fr); gap:14px; padding:16px 18px; background:var(--ink-2); border:1px solid var(--line); border-radius:12px;}
.chapter .no{font-family:var(--mono); font-size:12px; color:var(--gold); padding-top:4px;}
.chapter h4{font-size:17.5px;}
.chapter p{font-size:15px; color:var(--bone-2); margin-top:5px;}
@media (max-width:760px){ .book-feature{grid-template-columns:1fr;} .book-cover{max-width:220px;} }

/* ---------- quote ---------- */
.pull{
  font-family:var(--display); font-weight:600; font-size:clamp(24px, 3vw, 36px); line-height:1.18; letter-spacing:-.015em;
  max-width:26ch; text-wrap:balance; margin:0;
}
.pull::before{content:'“'; color:var(--accent); margin-right:.04em;}
.pull::after{content:'”'; color:var(--accent);}
.pull-by{display:block; margin-top:14px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-3);}
.manifesto{padding-block:clamp(56px, 8vw, 96px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(180deg, var(--ink-2), var(--ink));}
.manifesto .pull{font-size:clamp(32px, 5.4vw, 64px); font-weight:800; max-width:18ch; letter-spacing:-.03em;}

/* ---------- stage (speaking teaser) ---------- */
.stage{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(28px, 4vw, 56px); align-items:center;}
.stage-photo{border-radius:18px; overflow:hidden; border:1px solid var(--line); aspect-ratio:3/2;}
.stage-photo img{width:100%; height:100%; object-fit:cover;}
.talk-list{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:2px;}
.talk-list li{display:grid; grid-template-columns:56px minmax(0,1fr); gap:14px; padding:13px 0; border-bottom:1px solid var(--line);}
.talk-list .yr{font-family:var(--mono); font-size:13px; color:var(--gold); padding-top:2px;}
.talk-list .t{font-weight:600;}
.talk-list .e{font-size:14.5px; color:var(--bone-2);}
@media (max-width:860px){ .stage{grid-template-columns:1fr;} }

/* ---------- forms ---------- */
.form{display:grid; gap:16px;}
.form-row{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;}
@media (max-width:600px){ .form-row{grid-template-columns:1fr;} }
.field{display:grid; gap:7px;}
.field label{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-2);}
.field label .opt{color:var(--bone-3); text-transform:none; letter-spacing:0;}
.input, .field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:16px; color:var(--bone);
  background:var(--ink); border:1px solid var(--line-2); border-radius:10px; padding:12px 14px;
  transition:border-color .15s, box-shadow .15s;
}
.field textarea{min-height:130px; resize:vertical;}
.field select{appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--bone-3) 50%), linear-gradient(135deg, var(--bone-3) 50%, transparent 50%); background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px;}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim);}
.field input::placeholder, .field textarea::placeholder{color:var(--bone-3);}
.inline-form{display:flex; gap:10px; flex-wrap:wrap;}
.inline-form .input{flex:1 1 220px; border-radius:999px; padding-inline:18px;}
.form-note{font-size:13.5px; color:var(--bone-3);}
.alert{padding:12px 16px; border-radius:10px; font-size:15px; border:1px solid;}
.alert.ok{background:var(--leaf-dim); border-color:rgba(92,207,140,.35); color:#b9f0cf;}
.alert.err{background:var(--crit-dim); border-color:rgba(239,91,79,.4); color:#ffc2bc;}
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}

/* ---------- capture band ---------- */
.capture{display:grid; grid-template-columns:minmax(0,1fr) minmax(0, 460px); gap:clamp(24px, 4vw, 56px); align-items:center; padding:clamp(24px, 4vw, 44px); border-radius:22px; background:radial-gradient(ellipse 60% 120% at 100% 0%, rgba(92,207,140,.14), transparent 70%), var(--ink-2); border:1px solid var(--line);}
.capture h2{font-size:clamp(26px, 3.4vw, 38px);}
@media (max-width:860px){ .capture{grid-template-columns:1fr;} }

/* ---------- case study pages ---------- */
.cs-hero{padding-block:clamp(48px, 7vw, 88px) 0; position:relative; overflow:hidden;}
.cs-hero::before{content:''; position:absolute; inset:0 0 auto; height:560px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 55% 60% at 80% 10%, var(--accent-dim), transparent 70%);}
.cs-hero .label{display:block; margin-bottom:16px;}
.cs-hero h1{max-width:16ch;}
.cs-hero .lede{margin-top:22px;}
.cs-meta{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:clamp(32px, 4vw, 48px); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.cs-meta > div{padding:16px 18px 18px 0;}
.cs-meta > div + div{padding-left:18px; border-left:1px solid var(--line);}
.cs-meta .v{margin-top:6px; font-size:15px;}
@media (max-width:860px){
  .cs-meta{grid-template-columns:repeat(2, minmax(0,1fr));}
  .cs-meta > div:nth-child(3){padding-left:0; border-left:0;}
  .cs-meta > div:nth-child(-n+2){border-bottom:1px solid var(--line);}
}
.cs-hero-shot{margin-top:clamp(32px, 5vw, 56px);}

.cs-body{display:grid; grid-template-columns:220px minmax(0, 1fr); gap:clamp(24px, 5vw, 72px); padding-block:clamp(48px, 7vw, 88px);}
.cs-toc{position:sticky; top:96px; align-self:start; display:grid; gap:2px;}
.cs-toc .label{margin-bottom:10px;}
.cs-toc a{display:grid; grid-template-columns:28px minmax(0,1fr); font-size:14px; color:var(--bone-3); padding:6px 0; line-height:1.35; transition:color .15s;}
.cs-toc a span{font-family:var(--mono); font-size:11.5px; padding-top:1px;}
.cs-toc a:hover, .cs-toc a.on{color:var(--bone);}
.cs-toc a.on span{color:var(--accent);}
@media (max-width:980px){ .cs-body{grid-template-columns:1fr;} .cs-toc{display:none;} }

.chapter-block{padding-bottom:clamp(48px, 6vw, 80px); scroll-margin-top:96px;}
.chapter-block + .chapter-block{padding-top:clamp(48px, 6vw, 80px); border-top:1px solid var(--line);}
.chapter-block > .label{display:block; margin-bottom:14px;}
.chapter-block > h2{font-size:clamp(28px, 3.6vw, 40px); max-width:22ch;}
.prose{max-width:66ch; margin-top:22px;}
.prose > * + *{margin-top:1.05em;}
.prose p, .prose li{color:var(--bone-2);}
.prose strong{color:var(--bone); font-weight:600;}
.prose h3{margin-top:1.8em; color:var(--bone);}
.prose ul{display:grid; gap:.45em;}
.prose blockquote{margin:1.6em 0; padding:0 0 0 20px; border-left:2px solid var(--accent);}
.prose blockquote p{font-family:var(--display); font-weight:600; font-size:clamp(20px, 2.2vw, 25px); line-height:1.3; color:var(--bone);}
.prose blockquote cite{display:block; margin-top:8px; font-style:normal; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-3);}

.shot{margin:clamp(24px, 3vw, 36px) 0 0;}
.shot img{width:100%; border-radius:12px; border:1px solid var(--line-2); box-shadow:0 24px 60px rgba(0,0,0,.45); background:var(--ink-3);}
.shot figcaption{margin-top:12px; font-family:var(--mono); font-size:12px; color:var(--bone-3); letter-spacing:.02em;}
.shot.wide{margin-right:calc(-1 * clamp(0px, 4vw, 48px));}
.shot-pending .shot-ph{aspect-ratio:16/10; border-radius:12px; border:1px dashed var(--line-2); background:repeating-linear-gradient(-45deg, var(--ink-2) 0 12px, var(--ink-3) 12px 24px); display:grid; place-content:center; gap:8px; text-align:center; padding:24px; color:var(--bone-2);}
.shot-pending .shot-ph .label{color:var(--accent);}
.shot-pending figcaption{display:none;}
.shot-pair{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px;}
.shot-pair .shot{margin-top:clamp(24px, 3vw, 36px);}
@media (max-width:700px){ .shot-pair{grid-template-columns:1fr;} .shot.wide{margin-right:0;} }

.facts{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; margin-top:28px; border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.fact{padding:18px; border-right:1px solid var(--line); background:var(--ink-2);}
.fact:last-child{border-right:0;}
.fact .n{font-family:var(--display); font-weight:800; font-size:clamp(26px, 3vw, 34px); line-height:1; letter-spacing:-.02em; color:var(--accent); font-variant-numeric:tabular-nums;}
.fact .k{font-size:13.5px; color:var(--bone-2); margin-top:8px; line-height:1.4;}
@media (max-width:760px){ .facts{grid-template-columns:repeat(2, minmax(0,1fr));} .fact:nth-child(2){border-right:0;} .fact:nth-child(-n+2){border-bottom:1px solid var(--line);} }

.rule-card{background:var(--ink-2); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:16px 18px; margin-top:18px;}
.rule-card .label{display:block; margin-bottom:6px;}
.rule-card p{font-family:var(--display); font-weight:600; font-size:19px; line-height:1.3; color:var(--bone);}

.compare{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:24px;}
.compare .card{padding:18px 20px;}
.compare .card .label{display:block; margin-bottom:10px;}
.compare ul{list-style:none; padding:0; display:grid; gap:8px; font-size:15px; color:var(--bone-2);}
.compare li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:6px;}
.compare .before li::before{content:'–'; color:var(--bone-3); font-family:var(--mono);}
.compare .after li::before{content:'+'; color:var(--accent); font-family:var(--mono);}
@media (max-width:640px){ .compare{grid-template-columns:1fr;} }

.encoding{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:24px;}
.enc{display:grid; grid-template-columns:52px minmax(0,1fr); gap:14px; align-items:center; padding:14px 16px; background:var(--ink-2); border:1px solid var(--line); border-radius:12px;}
.enc svg{width:52px; height:52px;}
.enc b{display:block; font-size:15.5px;}
.enc span{font-size:14px; color:var(--bone-2);}
@media (max-width:640px){ .encoding{grid-template-columns:1fr;} }

.timeline-strip{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:0; border-left:1px solid var(--line-2);}
.timeline-strip li{display:grid; grid-template-columns:92px minmax(0,1fr); gap:12px; padding:9px 0 9px 18px; position:relative; font-size:15px; color:var(--bone-2);}
.timeline-strip li::before{content:''; position:absolute; left:-4px; top:16px; width:7px; height:7px; border-radius:50%; background:var(--accent);}
.timeline-strip .d{font-family:var(--mono); font-size:12.5px; color:var(--bone-3); padding-top:2px;}

.next-case{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; padding:clamp(24px, 4vw, 40px); border-radius:18px; border:1px solid var(--line); background:var(--ink-2); transition:border-color .2s;}
.next-case:hover{border-color:var(--next-accent, var(--accent));}
.next-case h3{font-size:clamp(26px, 3.4vw, 38px); font-weight:800; letter-spacing:-.02em; margin-top:8px;}

/* ---------- about / CV ---------- */
.cv-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 340px); gap:clamp(28px, 5vw, 64px); align-items:start;}
.cv-side{position:sticky; top:96px; display:grid; gap:16px;}
@media (max-width:900px){ .cv-grid{grid-template-columns:1fr;} .cv-side{position:static;} }
.role{padding-block:22px; border-bottom:1px solid var(--line);}
.role:first-of-type{padding-top:0;}
.role-head{display:flex; justify-content:space-between; gap:16px; align-items:baseline; flex-wrap:wrap;}
.role-head .when{font-family:var(--mono); font-size:12.5px; color:var(--gold); white-space:nowrap;}
.role .org{color:var(--bone-2); font-size:15.5px; margin-top:4px;}
.role ul{margin-top:12px; display:grid; gap:6px; color:var(--bone-2); font-size:15.5px;}
.skill-group + .skill-group{margin-top:16px;}
.skill-group ul{list-style:none; padding:0; margin-top:8px; display:grid; gap:6px; font-size:14.5px; color:var(--bone-2);}

/* ---------- misc ---------- */
.flash-wrap{padding-top:18px;}
.center{text-align:center;}
.stack > * + *{margin-top:14px;}
.divider{height:1px; background:var(--line); margin-block:clamp(40px, 6vw, 64px);}
.kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; font-size:15px;}
.kv dt{font-family:var(--mono); font-size:12px; color:var(--bone-3); letter-spacing:.06em; text-transform:uppercase; padding-top:2px;}
.kv dd{margin:0; color:var(--bone-2);}
.list-check{list-style:none; padding:0; display:grid; gap:10px;}
.list-check li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px; color:var(--bone-2);}
.list-check li::before{content:'✦'; color:var(--accent); font-size:13px; padding-top:3px;}
.agenda{list-style:none; padding:0; display:grid; gap:10px; counter-reset:ag;}
.agenda li{display:grid; grid-template-columns:minmax(0,1fr); gap:3px; padding:14px 16px; background:var(--ink-2); border:1px solid var(--line); border-radius:12px;}
.agenda li b{font-weight:600;}
.agenda li span{font-size:14.5px; color:var(--bone-2);}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); padding-block:clamp(48px, 6vw, 72px) 32px; margin-top:0; background:var(--ink);}
.foot-grid{display:grid; grid-template-columns:minmax(0, 1.4fr) repeat(3, minmax(0, .7fr)); gap:clamp(24px, 4vw, 48px);}
.foot-grid h5{font-family:var(--mono); font-size:11.5px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3); margin:0 0 14px;}
.foot-grid nav{display:grid; gap:8px;}
.foot-grid nav a{color:var(--bone-2); font-size:15px;}
.foot-grid nav a:hover{color:var(--accent);}
.foot-brand p{color:var(--bone-2); font-size:15px; margin-top:14px; max-width:40ch;}
.foot-brand .inline-form{margin-top:18px;}
.foot-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:22px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--bone-3);}
.foot-bottom button{background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px;}
@media (max-width:860px){ .foot-grid{grid-template-columns:repeat(2, minmax(0,1fr));} .foot-brand{grid-column:1 / -1;} }

/* ---------- cookie panel (partials/cookie_notice) ---------- */
.cookie-panel{display:none; position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:80; width:min(420px, calc(100vw - 32px)); padding:22px; background:var(--ink-2); border:1px solid var(--line-2); border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,.55);}
.cookie-panel.is-open{display:block;}
.cookie-panel h4{font-size:18px; margin-bottom:8px;}
.cookie-panel p{font-size:14px; color:var(--bone-2); margin-bottom:12px; line-height:1.55;}
.cookie-panel a{color:var(--accent); text-decoration:underline;}
.cookie-list{list-style:none; padding:0; margin:0 0 14px; display:grid; gap:10px;}
.cookie-list li{font-size:13.5px; color:var(--bone-3); line-height:1.5;}
.cookie-list li strong{display:block; color:var(--bone-2); font-size:13.5px;}
.cookie-actions{display:flex; gap:10px;}
.cookie-actions .btn{flex:1; font-size:14px;}
@media (max-width:520px){ .cookie-panel{left:16px; right:16px; width:auto;} }

/* ---------- admin ---------- */
.admin-table{width:100%; border-collapse:collapse; font-size:14.5px;}
.admin-table th, .admin-table td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
.admin-table th{font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-3);}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--ink-2);}
.table-wrap .admin-table{min-width:720px;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}
@media (prefers-reduced-motion:no-preference){
  .xp-bar i{animation:xpfill 1.6s cubic-bezier(.2,.8,.2,1) both .2s;}
  @keyframes xpfill{from{width:0;}}
}

@media (max-width:520px){
  .brand small{display:none;}
  .brand{font-size:16.5px; gap:9px;}
  .nav-cta .btn-primary{padding-inline:12px;}
}

/* Phone-width screenshots: keep them phone-sized. */
.shot.phone{max-width:330px; margin-inline:auto;}
.shot.phone img{border-radius:28px; border-width:6px; border-color:var(--ink-4);}