/* =====================================================================
   SEROBA BLUE — sits on top of style.css
   One look (black & bone), flat colours, calm motion and a deck-of-cards motif.
   ✏️ Colours you might change: --paint (the blue accent) below.
   ===================================================================== */
:root{--paint:#4C7DFF;--paint-ink:#2D5BDB;
  /* calm motion: gentle ease, no overshoot, nothing wobbles */
  --spring:cubic-bezier(.25,.1,.25,1);
  --expo:cubic-bezier(.16,1,.3,1);
  --io:cubic-bezier(.76,0,.24,1);
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --c1:#232321;}
::selection{background:var(--fg);color:var(--bg)}

/* ---------- top bar: frosted, stays with you, live Gauteng clock ---------- */
html{scroll-padding-top:80px}
body{text-rendering:optimizeLegibility;font-feature-settings:"kern","liga";font-kerning:normal}
p,li{text-wrap:pretty}
.nav{position:sticky;top:0;height:56px;padding-top:16px;padding-bottom:16px;background:var(--bg);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 1px 0 var(--line)}
.nav a{padding:6px 0}
.nav-right{gap:22px}
.clock{font-size:14px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;opacity:.7;display:inline-flex;gap:6px;align-items:center}
.clock .live{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- page entrance: a short, soft fade up (was a big spring) ---------- */
.appear{animation:appearCalm 1.1s var(--expo) .1s both}
html.via-reels .appear{animation-delay:.65s}
@keyframes appearCalm{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- selection box on the big name (desktop hover only) ---------- */

/* ---------- typography: legible and weighty ---------- */
.tagline{font-size:22px;letter-spacing:-.025em;line-height:1.3;font-weight:700}
.card h2{font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.card p{font-size:16px;line-height:1.55;letter-spacing:0}
.chip{font-size:14px;font-weight:600;border-radius:12px}
.intro p{letter-spacing:-.035em;line-height:1.15}
.label{font-size:14px;letter-spacing:.08em}
.about-block p{letter-spacing:-.025em;line-height:1.25;max-width:30em}
.cs-title{font-size:56px;letter-spacing:-.035em;line-height:1.02}
.cs-sub{font-size:19px;line-height:1.45;margin-top:12px}
.cs-meta h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
.eyebrow{font-size:14px;letter-spacing:.09em;font-weight:700}
.cs h2{font-size:40px;font-weight:700;letter-spacing:-.028em;line-height:1.15;margin:10px 0 28px}
.cs h3{font-size:24px;font-weight:700;letter-spacing:-.018em;line-height:1.3;margin:40px 0 12px}
.cs p,.cs ul.bullets,.delivered li{font-size:17px;line-height:1.65;max-width:68ch}
.cs p + p{margin-top:14px}
.cs figcaption,.frame-cap{font-size:14px;font-weight:500;color:var(--muted)}
.acc summary{font-size:18px;letter-spacing:-.01em}
.acc .acc-body,.callout p{font-size:17px;line-height:1.6}
.icard strong{font-size:17px}
.icard p{font-size:16px;line-height:1.5}
.step h4{font-size:19px;letter-spacing:-.01em}
.toc{top:80px}
.toc a{font-size:15px}
.cs .toc h3{font-size:18px;line-height:27px;margin:0;letter-spacing:-.01em}
.frame.white{background:#fff}

/* ---------- surfaces ---------- */
.card-in{box-shadow:none}
.cs figure img,.frame{box-shadow:none}
@supports (corner-shape: squircle){
  .card,.card-in,.card-img,.frame,.icard,.step,.cs-hero,.highlights,.toc,.btn{corner-shape:squircle}
}

/* =====================================================================
   CALM MOTION — small lifts and fades only. No tilts, wobbles or bounces.
   ===================================================================== */
.lnk{transition:transform .25s var(--ease-out),opacity .25s}
.lnk:hover{transform:translateY(-2px);opacity:.85}
.card,.card-in{transition:transform .3s var(--ease-out)}
.card:hover{transform:translateY(-4px)}
.card:hover .card-in{transform:none}
.card:active{transform:translateY(-2px)}
.btn{font-size:16px;font-weight:600;padding:14px 26px;border-radius:999px;transition:background-color .2s,transform .2s var(--ease-out)}
.btn:active{transform:scale(.98)}
.rcard{transition:transform .3s var(--ease-out)}
.rcard:hover{transform:translateY(-3px)}
.toc a{transition:color .25s}
.wordmark .fit span{transition:color .25s}
.wordmark .fit span:hover{color:var(--paint)}

/* things below the first screen fade in as you reach them */
.rv{transition:opacity 1s var(--expo),transform 1.1s var(--expo)}
.rv:not(.in){opacity:0;transform:translateY(32px)}
img.fade{opacity:0;transition:opacity .5s var(--ease-out)}
img.fade.loaded{opacity:1}

/* reading progress line on case studies */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--paint);transform-origin:0 50%;transform:scaleX(0);z-index:60}
.locked .progress{display:none}

/* cursor: plain dot, grows a little over links, says "View case" over projects */
.cursor{display:grid;place-items:center;overflow:visible;background:var(--cursor);transition:opacity .3s,width .25s var(--ease-out),height .25s var(--ease-out),margin .25s var(--ease-out),border-radius .25s var(--ease-out),background-color .25s}
.cursor .view{font-size:13px;font-weight:600;color:#fff;opacity:0;white-space:nowrap;transition:opacity .2s}
.cursor.is-view{width:118px;height:40px;margin:-20px 0 0 -59px;border-radius:999px;background:var(--paint);border-color:var(--paint)}
.cursor.is-view .view{opacity:1}
.cursor.is-link{width:12px;height:12px;margin:-6px 0 0 -6px}

/* between pages: slot reels of card suits drop in spinning; on the next page each reel lands, then drops away */
.reels-x{position:fixed;inset:0;z-index:500;pointer-events:none;visibility:hidden;display:flex;gap:0;background:transparent}
.reels-x .col{flex:1;overflow:hidden;background:var(--face,#ECE8DF);color:#161616;transform:translateY(-101%)}
.reels-x .col+.col{border-left:3px solid #161616}
.reels-x .strip{display:flex;flex-direction:column;width:100%}
.reels-x .strip .suit{display:block;flex:none;width:min(56px,40%)!important;height:22vh!important;margin:0 auto;-webkit-mask-size:contain;mask-size:contain}
.reels-x .strip .suit.red{color:var(--paint)}
@keyframes reelspin{to{transform:translateY(-50%)}}
.reels-x.in,.reels-x.cover,.reels-x.land{visibility:visible;pointer-events:auto}
.reels-x.in .strip{animation:reelspin .55s linear infinite}
.reels-x.in .col{transform:none;transition:transform .6s cubic-bezier(.65,0,.35,1) calc(var(--i) * 55ms)}
.reels-x.cover .col{transform:none}
.reels-x.land .strip{transform:translateY(-37.5%);transition:transform calc(600ms + var(--i) * 60ms) cubic-bezier(.16,1,.3,1)}
.reels-x.land .col{transform:translateY(101%);transition:transform .75s cubic-bezier(.65,0,.35,1) calc(330ms + var(--i) * 60ms)}

/* phones & tablets: "Contents" button + sheet on case studies */
.toc-pill{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,0);z-index:70;display:none;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:0;background:var(--fg);color:var(--bg);font-size:15px;font-weight:600;transition:transform .3s var(--ease-out),opacity .3s}
.toc-pill.hide{transform:translate(-50%,140%);opacity:0}
.sheet{position:fixed;inset:0;z-index:80;display:none}
.sheet.open{display:block}
.sheet-bg{position:absolute;inset:0;background:rgba(10,10,10,.7);animation:fadeIn .25s}
.sheet-panel{position:absolute;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));background:var(--bg);color:var(--fg);border-radius:24px;padding:18px 8px 10px;border:1px solid var(--line);animation:sheetUp .3s var(--ease-out)}
.sheet-panel h3{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.6;padding:0 16px 8px}
.sheet-panel a{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 16px;border-radius:14px;font-size:18px;font-weight:600}
.sheet-panel a:active,.sheet-panel a.on{background:var(--soft)}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}}

/* footer name fades in */
.wordmark{overflow:visible;position:relative}
.wordmark .fit{transform:none;opacity:0;text-transform:none;transition:opacity .9s var(--ease-out)}
.wordmark.in .fit{opacity:1}

/* =====================================================================
   THE DECK — ace, king, queen and joker. Flat playing-card details.
   Suits:  <i class="suit spade"></i>  heart  diamond  club  star
   ===================================================================== */
:root{--spade:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2C9 6.2 3 9.6 3 14.2a4.5 4.5 0 0 0 7.7 3.2L9.6 22h4.8l-1.1-4.6A4.5 4.5 0 0 0 21 14.2C21 9.6 15 6.2 12 2z%22/%3E%3C/svg%3E");--heart:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 21.3S3.3 15.8 3.3 9.8A4.9 4.9 0 0 1 12 6.7a4.9 4.9 0 0 1 8.7 3.1c0 6-8.7 11.5-8.7 11.5z%22/%3E%3C/svg%3E");--diamond:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2l7.6 10L12 22 4.4 12z%22/%3E%3C/svg%3E");--club:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2.6a4.2 4.2 0 0 0-3.8 6 4.2 4.2 0 1 0 2.3 7.8L9.6 22h4.8l-.9-5.6a4.2 4.2 0 1 0 2.3-7.8A4.2 4.2 0 0 0 12 2.6z%22/%3E%3C/svg%3E");--star:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2.5l2.9 6.3 6.8.7-5.1 4.6 1.5 6.7L12 17.4l-6.1 3.4 1.5-6.7-5.1-4.6 6.8-.7z%22/%3E%3C/svg%3E")}
.suit{display:inline-block;width:.78em;height:.78em;background:currentColor;-webkit-mask:var(--s) center/contain no-repeat;mask:var(--s) center/contain no-repeat;vertical-align:-.06em;flex:none}
.suit.spade{--s:var(--spade)}
.suit.heart{--s:var(--heart)}
.suit.diamond{--s:var(--diamond)}
.suit.club{--s:var(--club)}
.suit.star{--s:var(--star)}
.red{color:var(--paint)}
.paint{display:inline}

/* corner index: rank over suit, like the corner of a playing card */
.idx{display:inline-flex;flex-direction:column;align-items:center;gap:2px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.idx b{font-size:1em;font-weight:700}
.idx .suit{width:.82em;height:.82em}
.idx.joker b{writing-mode:vertical-rl;text-orientation:upright;font-size:.62em;letter-spacing:-.08em}

/* home project cards: the four cards in the hand */
.card .idx{position:absolute;z-index:2;font-size:20px;background:var(--fg);color:#161616;border-radius:10px;padding:8px 8px 7px;min-width:36px;transition:background-color .2s,color .2s}
.card .idx.tl{left:12px;top:12px}
.card .idx.br{right:12px;bottom:12px;transform:rotate(180deg)}
.card .idx .red,.card .idx.red{color:var(--paint)}
.card:hover .idx{background:var(--paint);color:#161616}
.card:hover .idx .red{color:#161616}

/* a playing card made in CSS: bone face, corner indices, big centre */
.pcard .mid .suit{width:.62em;height:.62em}

/* =====================================================================
   CASE STUDIES — one shared layout for all four
   ===================================================================== */
.cs-hero{border-radius:16px}
.cs{--hero-bg:#232321!important;--frame-bg:#232321!important;--accent:var(--paint)!important;--accent-2:var(--paint)!important;--callout:var(--paint)!important}
.icard .ic,.ic.red,.ic.green,.ic.blue{background:var(--paint)}
.cs .frame.white{background:#fff}
.gate form{background:#232321;border:1px solid var(--line)}
.cs-main{counter-reset:ch}
.cs-section{counter-increment:ch}
.cs-section > .eyebrow::before{content:counter(ch,decimal-leading-zero);display:inline-block;margin-right:10px;opacity:.55}

/* at a glance + full / quick read switch */
.glance{margin-top:56px;border:1px solid var(--line);border-radius:20px;padding:18px 20px 20px;max-width:calc(var(--col) + 272px)}
.cs.quick .cs-section > :not(.eyebrow):not(h2):not(.lead):not(figure):not(.frame):not(.frame-cap):not(.callout):not(.highlights){display:none}
.cs.quick .cs-section + .cs-section{margin-top:64px}

/* next case study */
.cs-next{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-top:120px;padding-top:32px;border-top:1px solid var(--line)}
.cs-next-card{display:flex;align-items:center;gap:16px;padding:10px 20px 10px 10px;border-radius:18px;background:var(--c1);transition:transform .3s var(--ease-out);min-width:0;flex:1 1 340px;max-width:560px}
.cs-next-card:hover{transform:translateY(-3px)}
.cs .cs-next-card img{width:96px;height:72px;object-fit:cover;border-radius:10px;flex:none;cursor:pointer}
.cs-next-card span{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.cs-next-card small{font-size:13px;color:var(--muted)}
.cs-next-card strong{font-size:22px;font-weight:700;letter-spacing:-.02em}
.cs-next-card i{font-style:normal;font-size:24px}
.cs-all{font-size:16px;font-weight:600}

/* lock screen: a short public summary next to the password box */
.gate-grid{width:100%;max-width:1060px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:center}
.gate .gate-about h1{font-size:56px;font-weight:700;letter-spacing:-.035em;line-height:1.02;margin:10px 0 14px}
.gate .gate-line{font-size:20px;line-height:1.4;max-width:30em}
.gate-facts{margin:28px 0 0;border-top:1px solid var(--line)}
.gate-facts div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.gate-facts dt{font-size:14px;font-weight:600;color:var(--muted);padding-top:1px}
.gate-facts dd{font-size:16px;margin:0;line-height:1.4}
.gate .gate-inside{margin-top:18px;font-size:15px;line-height:1.5;color:var(--muted)}
.gate-inside span{font-weight:600;color:var(--fg);margin-right:10px}
.gate .gate-nda{font-size:16px;line-height:1.45;color:var(--muted);max-width:26em}

/* =====================================================================
   ABOUT PAGE
   ===================================================================== */
.big-title{font-size:120px;font-weight:700;letter-spacing:-.06em;line-height:.9;text-transform:lowercase}

/* portrait (a monogram stands in until you add a photo) + numbers */
.me{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;margin-top:72px;align-items:stretch}

/* toolbox: a calm, wrapped row of chips (no more marquee) */

/* true facts: one at a time */
.facts.js .facts-list li.on{display:block;animation:factIn .35s var(--ease-out)}
@keyframes factIn{from{opacity:0;transform:translateY(8px)}}

/* my rules */
.rules{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rules li{background:#232321;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
.rules h3{font-size:24px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.rules p{font-size:16px;line-height:1.45;color:var(--muted)}

/* on rotation */

/* beyond the screen */

/* recent work */
.rcard{background:var(--c1)!important;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:12px;color:#ECE8DF;box-shadow:none}
.rcard img{border-radius:10px;aspect-ratio:4/3;object-fit:cover;width:100%}
.rcard span{font-size:16px;font-weight:700;letter-spacing:-.01em;padding:0 4px 4px}

/* let's talk */
.hello{padding:120px var(--pad) 24px}
.hello-link{display:inline-flex;align-items:center;gap:.25em;font-size:clamp(64px,13vw,200px);font-weight:700;letter-spacing:-.06em;line-height:.95;margin-top:8px}
.hello-link span{text-decoration:underline 0.05em transparent;text-underline-offset:.12em;transition:text-decoration-color .25s}
.hello-link:hover span{text-decoration-color:var(--paint)}
.hello-link i{font-style:normal;display:inline-block;transition:transform .25s var(--ease-out)}
.hello-link:hover i{transform:translateX(.06em)}

/* =====================================================================
   EXPERIENCE — one clean list, on the same edge as the rest of the page
   ===================================================================== */
.experience-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 32px;margin-bottom:56px}
.experience .job{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) minmax(120px,2fr);grid-template-areas:"who desc years";column-gap:48px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line)}
.experience .job:first-of-type,.experience .edu-label + .job{border-top:1px solid var(--line);padding-top:30px}
@media (max-width:1199.98px){
  .experience .job{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who years" "desc desc";gap:14px 24px}
}
@media (max-width:809.98px){
  .experience-head{margin-bottom:28px;gap:4px 16px}
  .experience .job{grid-template-columns:1fr;grid-template-areas:"years" "who" "desc";gap:8px;padding:22px 0}
  .experience .job:first-of-type,.experience .edu-label + .job{padding-top:22px}
}

/* =====================================================================
   TABLET
   ===================================================================== */
@media (max-width:1199.98px){
  .toc-pill{display:inline-flex}
  .cs p,.cs ul.bullets,.delivered li{font-size:16px;line-height:1.65}
  .cs-title{font-size:48px}
  .about-block p{font-size:22px;letter-spacing:-.02em;line-height:1.3}
  .intro p{letter-spacing:-.03em}
  .big-title{font-size:96px}
  .me{grid-template-columns:1fr 1fr}
  .rules{grid-template-columns:1fr 1fr}
  .gate-grid{gap:40px}
  .gate .gate-about h1{font-size:46px}
}

/* =====================================================================
   PHONE — designed first for a thumb and a small screen
   ===================================================================== */
@media (max-width:809.98px){
  .clock{display:none}
  .nav{height:60px;padding:16px!important}
  .nav a{font-size:18px;padding:10px 0}
  .hero-top{gap:20px}
  .tagline{font-size:20px;line-height:1.3;max-width:20em}
  .work{gap:16px;margin-top:36px}
  .card:hover{transform:none}
  .card-in{padding:16px;gap:20px;border-radius:20px}
  .card-text{gap:6px}
  .card h2{font-size:23px;line-height:1.2}
  .card p{font-size:16px;line-height:1.5}
  .card-img{border-radius:14px}
  .chip{display:block;order:3;margin-top:10px;font-size:13px;padding:9px 12px}
  .intro p{font-size:30px;line-height:1.14}
  .btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px}
  .footer{padding-bottom:96px}
  .footer-top{gap:28px}
  .contact{font-size:18px}
  .col a{font-size:19px;padding:4px 0}
  .cs{padding-top:24px}
  .cs-title{font-size:40px}
  .cs-sub{font-size:17px}
  .cs h2{font-size:28px;line-height:1.18}
  .cs h3{font-size:21px;margin-top:32px}
  .cs figcaption,.frame-cap{font-size:13px}
  .cs-hero{border-radius:16px}
  .cs{--hero-bg:#232321!important;--frame-bg:#232321!important;--accent:var(--paint)!important;--accent-2:var(--paint)!important;--callout:var(--paint)!important}
  .icard .ic,.ic.red,.ic.green,.ic.blue{background:var(--paint)}
  .cs .frame.white{background:#fff}
  .gate form{background:#232321;border:1px solid var(--line)}
  .cs-meta{gap:24px;margin-top:32px}
  .cs-section + .cs-section{margin-top:72px}
  .icard{border-radius:16px;padding:18px;gap:16px}
  .icard.row{gap:16px}
  .icard .ic{width:40px;height:40px}
  .icard .ic svg{width:24px;height:24px}
  .step{min-height:0;flex-direction:row;justify-content:flex-start;text-align:left;padding:16px;gap:16px}
  .step .n{width:40px;height:40px;font-size:18px;flex:none}
  .step h4{font-size:17px}
  .step h4 br{display:none}
  .steps{gap:10px}
  .highlights{padding:14px;border-radius:20px;gap:24px}
  .delivered li{padding:16px 4px}
  .callout{padding-left:16px}
  .gate{padding-top:32px}
  .gate-grid{grid-template-columns:1fr;gap:36px}
  .gate .gate-about h1{font-size:40px}
  .gate .gate-line{font-size:18px}
  .gate-facts div{grid-template-columns:84px 1fr;gap:12px}
  .glance{margin-top:40px;padding:16px}
  .cs-next{margin-top:80px}
  .cs-next-card{flex-basis:100%}
  .cs .cs-next-card img{width:72px;height:56px}
  .cs-next-card strong{font-size:19px}/* about */
  .about-block p{font-size:20px;line-height:1.3}
  .big-title{font-size:60px}
  .me{grid-template-columns:1fr;gap:12px;margin-top:48px}
  .rules{grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
  .rules li{padding:18px}
  .rules h3{font-size:19px}
  .rules p{font-size:15px}
  .rcard{flex-direction:row;align-items:center;padding:10px;border-radius:18px}
  .rcard img{width:96px;aspect-ratio:1;flex:none;border-radius:12px}
  .rcard span{font-size:17px;padding:0}
  .hello{padding-top:80px}
  .hello-link{font-size:64px}
}
@media (prefers-reduced-motion:reduce){
  .rv,img.fade{opacity:1!important;transform:none!important}
}

/* =====================================================================
   ONE LOOK — black & bone on every device (ignores phone light/dark setting)
   ===================================================================== */
:root:root:root{--bg:#161616; --fg:#ECE8DF; --fg-strong:#F6F4F0; --muted:#D2CFC8; --toc-dim:#B4B4B4;
  --card:#202020; --frame:#2C2C2C; --line:rgba(236,232,223,.12); --soft:rgba(236,232,223,.06);
  --btn-bg:#ECE8DF; --btn-bg-hover:rgba(236,232,223,.8); --btn-fg:#141414; --cursor:#EAE8E1; --white:#FFFFFF;
  color-scheme:dark;}

/* every project card shares the same colour */
.work .card .card-in{background:var(--c1)!important;color:#ECE8DF}
.card p{color:#ECE8DF;opacity:.78}
.chip{background:#ECE8DF;color:#161616}

/* =====================================================================
   CASE-STUDY IMAGES — one treatment for every picture
   Same dark mat, same padding, same corners, whole image always visible.
   ===================================================================== */
.cs .frame,.cs .frame.h500,.cs .frame.h400,.cs .frame.h350,.cs .frame.h300{height:auto;padding:24px;border-radius:16px;background:#232321;margin-top:32px;gap:14px}
.cs .frame.white{background:#fff}
.cs .frame.h200{height:200px;padding:24px;border-radius:16px;background:#232321;margin-top:32px}
.cs .frame img,.cs .frame.cover img{width:100%;height:auto;max-height:620px;object-fit:contain;border-radius:8px}
.cs figure img{background:#232321;padding:24px;border-radius:16px;max-height:668px;object-fit:contain}
.cs .frame .in-cap,.cs .frame .in-cap[style]{color:var(--muted)!important;font-size:15px!important;font-weight:500!important;text-align:center}
.cs .frame.white .in-cap,.cs .frame.white .in-cap[style]{color:#161616!important}
.cs figcaption,.cs .frame-cap,.cs .frame + figcaption{font-size:15px;line-height:1.45;font-weight:500;color:var(--muted);margin-top:12px;text-align:left}
.cs .cards .frame,.cs .highlights .frame{margin-top:0}
.cs .embed{border:0;border-radius:16px;background:#232321;padding:12px}
@media (max-width:809.98px){
  .cs .frame,.cs .frame.h500,.cs .frame.h400,.cs .frame.h350,.cs .frame.h300,.cs .frame.h200{padding:12px;border-radius:14px}
  .cs figure img{padding:12px;border-radius:14px}
  .cs figcaption,.cs .frame-cap{font-size:14px}
}

/* =====================================================================
   LEGIBILITY — bigger small print, stronger muted text
   ===================================================================== */
:root:root:root{--muted:#DAD6CD}
.card p{opacity:1;color:var(--muted)}
.chip{font-size:14px}
.gate-facts dt{font-size:15px}
.toc a{color:#C9C6BE}

/* =====================================================================
   DECK DETAILS
   ===================================================================== */

/* a small blue diamond in front of every small label */
.label::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:8px;vertical-align:-.12em;background:var(--paint);-webkit-mask:var(--diamond) center/contain no-repeat;mask:var(--diamond) center/contain no-repeat}
.cs .frame.h200 img{height:100%;max-height:none}

/* card indices used inline: case-study titles, lock screens, recent work */
.idx.inline{font-size:22px;color:var(--fg);background:#232321;border-radius:10px;padding:8px 9px 7px;margin-bottom:14px}
.cs .idx.inline{margin-bottom:16px}
.idx.mini{flex-direction:row;gap:3px;font-size:14px;margin-right:4px;vertical-align:1px}
.idx.mini.joker b{writing-mode:horizontal-tb;font-size:.8em;letter-spacing:.02em}

/* current page in the top bar */
.nav a.paint::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:6px;background:var(--paint);-webkit-mask:var(--diamond) center/contain no-repeat;mask:var(--diamond) center/contain no-repeat}

/* true facts: a deck you draw from */
.facts .c .red{color:var(--paint)}
.idx.inline{display:flex;width:fit-content}
.gate-about .idx.inline{margin:14px 0 0}

/* =====================================================================
   THE TABLE — the whole site as a deck of cards
   Bone card faces on a black table. Spades and clubs in black,
   clubs, diamonds and stars in the blue accent; spades and hearts stay plain.
   ===================================================================== */
:root{--face:#ECE8DF;--ink:#161616;--ink-2:#45423C;--card-back:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22 viewBox=%220 0 18 18%22%3E%3Crect width=%2218%22 height=%2218%22 fill=%22%23161616%22/%3E%3Cpath d=%22M9 1.5L16.5 9 9 16.5 1.5 9Z%22 fill=%22none%22 stroke=%22%234C7DFF%22 stroke-width=%221.4%22/%3E%3Ccircle cx=%229%22 cy=%229%22 r=%221.6%22 fill=%22%234C7DFF%22/%3E%3C/svg%3E")}
.suits{display:inline-flex;gap:6px;align-items:center}
.suits .suit{width:14px;height:14px}

/* ---- home: the hand ---- */
.hand-head{display:flex;align-items:center;justify-content:space-between;margin-top:40px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.hand-head .suits{color:var(--fg)}
.hand-head .suits .red{color:var(--paint)}
.work{margin-top:32px}
.work .card .card-in{background:var(--face)!important;color:var(--ink);position:relative;padding:0 52px 22px}
.work .card:nth-child(odd){transform:rotate(-.8deg)}
.work .card:nth-child(even){transform:rotate(.8deg)}
.work .card:hover{transform:rotate(0) translateY(-4px)}
.card .idx{position:absolute;z-index:2;font-size:22px;background:none;color:var(--ink);padding:0;border-radius:0;min-width:0}
.card .idx.tl{left:16px;top:18px}
.card .idx.br{right:16px;bottom:18px;left:auto;top:auto;transform:rotate(180deg)}
.card .idx .red{color:var(--paint)}
.card:hover .idx{background:none;color:var(--ink)}
.card:hover .idx .red{color:var(--paint)}
.card-img{margin:22px 0 0}
.card-text{padding:22px 0 0}
.card h2{color:var(--ink)}
.card p{color:var(--ink-2)!important;opacity:1}
.chip{background:var(--ink)!important;color:var(--face)!important}

/* ---- any playing card: rules, on-rotation, glance ---- */
.pc .idx{position:absolute;font-size:20px;color:var(--ink)}
.pc .idx.tl{left:14px;top:14px}
.pc .idx.br{right:14px;bottom:14px;transform:rotate(180deg)}
.pc .idx .red{color:var(--paint)}
.rules{gap:18px}
.rules .pc:nth-child(odd){transform:rotate(-1deg)}
.rules .pc:nth-child(even){transform:rotate(1deg)}
.rules li{gap:12px;min-height:240px;justify-content:center}

/* ---- about: portrait card + recent cards ---- */
.recent-row .rcard{background:var(--face)!important;color:var(--ink)}
.rcard span{color:var(--ink)}
.rcard .idx .red{color:var(--paint)}
.experience .edu-label ~ .job .job-co::before{background:var(--paint);-webkit-mask-image:var(--diamond);mask-image:var(--diamond)}

/* ---- case studies: chapters are cards in the study's suit ---- */
.cs-section > .eyebrow::before{content:none}
.rank{display:inline-flex;align-items:center;gap:3px;background:var(--face);color:var(--ink);border-radius:6px;padding:3px 7px;margin-right:10px;font-size:14px;letter-spacing:0;vertical-align:1px}
.rank .suit{width:.8em;height:.8em}
.rank .red{color:var(--paint)}
.toc .rank{font-size:12px;padding:2px 5px;margin-right:8px}
.cs-next-card{background:var(--face)!important;color:var(--ink)}
.cs-next-card small{color:var(--ink-2)}

/* ---- lock screen: the card is face down ---- */
.card-back{width:150px;aspect-ratio:5/7;border-radius:14px;background:var(--card-back) center/18px 18px;border:8px solid var(--face);display:grid;place-items:center;transform:rotate(-6deg);margin:0 0 22px 4px}
.card-back span{display:inline-flex;align-items:center;gap:2px;background:var(--face);color:var(--ink);font-weight:700;font-size:20px;padding:6px 10px;border-radius:999px}
.gate form{background:#1C1C1B}

/* ---- footer ---- */
.footer-bottom{justify-content:space-between;align-items:center}
.footer-bottom .suits{color:var(--fg)}
.footer-bottom .suits .red{color:var(--paint)}
@media (max-width:1199.98px){
  .rules li{min-height:200px}
}
@media (max-width:809.98px){
  .work .card:nth-child(odd),.work .card:nth-child(even){transform:none}
  .work .card .card-in{padding:0 44px 18px}
  .card .idx{font-size:18px}
  .card .idx.tl{left:12px;top:14px}
  .card .idx.br{right:12px;bottom:14px}
  .pc .idx{font-size:16px}
  .pc .idx.tl{left:10px;top:10px}
  .pc .idx.br{right:10px;bottom:10px}
  .rules li{min-height:180px}
  .card-back{width:110px;border-width:6px;margin-bottom:16px}
  .hand-head{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){
  .work .card,.rules .pc{transform:none!important}
}
.work .card .card-in{height:auto;min-height:612px}
@media (max-width:1199.98px){
  .work .card .card-in{min-height:0}
}
@media (max-width:809.98px){
  .rules{grid-template-columns:1fr}
  .rules li{min-height:0;padding:44px 48px!important}
  .rules .pc:nth-child(n){transform:none}
}

/* ---- facts: shuffle ---- */
@keyframes shuffle{30%{transform:rotate(-2deg) translateX(-6px)}60%{transform:rotate(1.5deg) translateX(4px)}100%{transform:none}}
.footer-bottom .house{color:var(--muted)}
@media (max-width:809.98px){
  .footer-bottom{flex-wrap:wrap;row-gap:10px}
  .footer-bottom .house{order:-1;flex-basis:100%}
}

/* the big name: each letter is a window; on hover the letter rolls up and its twin rolls in */
.slot-name{cursor:default;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.ch{position:relative;display:inline-block;overflow:hidden;color:transparent;padding:.1em 0;margin:-.1em 0;vertical-align:top}
.ch .reel{position:absolute;left:0;top:0;width:100%;color:var(--fg)}
.ch .reel i{display:block;font-style:normal;height:1.1em;line-height:1.1em}
.slot-name .ch .reel{transition:transform .9s cubic-bezier(.65,0,.35,1) var(--d,0ms)}
.slot-name.rolling .ch .reel{transform:translateY(-50%)}
.slot-name.no-t .ch .reel{transition:none!important}
.hero-top h1 .ch{text-transform:none}

/* ===== MOTION: one premium feel everywhere =====
   expo-out for anything arriving or lifting, a quick press-down for anything tapped. */
.work .card{transition:transform .8s var(--expo)}
@media (hover:hover){
  .work .card:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
}
.work .card .card-img img{transition:transform 1.1s var(--expo)}
.work .card:hover .card-img img{transform:scale(1.035)}
.work .card:active{transform:scale(.985)}
.rcard,.cs-next-card{transition:transform .7s var(--expo)}
.rcard:hover,.cs-next-card:hover{transform:translateY(-4px)}
.rcard:active,.cs-next-card:active{transform:scale(.98);transition-duration:.2s}
.btn,.tf-btn,.toc-pill{transition:transform .6s var(--expo),background-color .25s}
.btn:active,.tf-btn:active,.toc-pill:active{transform:scale(.96);transition-duration:.15s}
.lnk{transition:transform .5s var(--expo),opacity .25s,color .25s}
.hello-link{transition:transform .9s var(--expo)}
.hello-link i{transition:transform .7s var(--expo)}
.hello-link:hover i{transform:translateX(.08em)}

/* the way back, top of each case study */
.cs-back{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--fg);background:#232321;border-radius:999px;padding:10px 16px 10px 14px;margin:0 0 28px;transition:background-color .25s,transform .6s var(--expo)}
.cs-back span{display:inline-block;transition:transform .6s var(--expo)}
.cs-back:hover{background:#2E2E2B}
.cs-back:hover span{transform:translateX(-4px)}
.cs-back:active{transform:scale(.96)}
.cs-back{display:flex;width:fit-content}
.gate-about .cs-back{margin-bottom:22px}

/* ===== TRUE OR BLUFF ===== */
.tf{margin-top:96px}
.tf-meta{display:flex;gap:18px;font-size:15px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.tf-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.tf-list li{background:#232321;border-radius:14px;padding:18px 20px;font-size:19px;font-weight:600}
.tf-stage{position:relative;isolation:isolate;margin:0 16px 16px 0}
.tf-stage::before,.tf-stage::after{content:"";position:absolute;inset:0;border-radius:22px;z-index:-1}
.tf-stage::before{background:#BAB5AB;transform:translate(8px,8px)}
.tf-stage::after{background:#85817A;transform:translate(16px,16px);z-index:-2}
.tf-card{position:relative;background:var(--face);color:#161616;border-radius:22px;min-height:460px;padding:64px 72px 60px;display:flex;align-items:center;cursor:grab;user-select:none;-webkit-user-select:none;outline:none;will-change:transform}
.tf-card:focus-visible{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--paint)}
.tf-card.dragging{cursor:grabbing}
.tf.told .tf-card,.tf-card[data-end]{cursor:default}
.tf-card .idx{position:absolute;font-size:20px;color:#161616}
.tf-card .idx.tl{left:22px;top:20px}
.tf-card .idx.br{right:22px;bottom:20px;transform:rotate(180deg)}
.tf-card .idx .red{color:var(--paint)}
.tf-face{width:100%}
.tf-q{margin:0;font-size:clamp(28px,3.1vw,44px);font-weight:650;letter-spacing:-.03em;line-height:1.12;max-width:16em}
.tf-small{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5C5852}
.tf-big{margin:0 0 18px;font-size:clamp(60px,7.5vw,104px);font-weight:700;letter-spacing:-.055em;line-height:.92}
.tf-why{margin:0;font-size:19px;line-height:1.45;max-width:30em;color:#3A3833}
.tf-why a{color:#161616;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.tf.right .tf-small,.tf.right .tf-big{color:var(--paint)}
.tf-stamp{position:absolute;top:22px;font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:7px 13px;border-radius:999px;opacity:0;pointer-events:none}
.tf-stamp.yes{right:64px;background:var(--paint);color:#161616;opacity:var(--yes,0)}
.tf-stamp.no{left:64px;background:#161616;color:var(--face);opacity:var(--no,0)}
.tf-actions{display:flex;gap:10px;margin-top:22px}
.tf-btn{min-height:56px;padding:0 32px;border-radius:999px;border:0;font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.tf-no{background:#232321;color:var(--fg)}
.tf-no:hover{background:#2E2E2B}
.tf-yes{background:var(--fg);color:#161616}
.tf-yes:hover{background:#FFFFFF}
.tf-hint{margin:14px 0 0;font-size:14px;color:var(--muted)}
@media (max-width:809.98px){
  .tf{margin-top:56px}
  .tf-stage{margin:0 12px 12px 0}
  .tf-stage::before{transform:translate(6px,6px)}
  .tf-stage::after{transform:translate(12px,12px)}
  .tf-card{min-height:330px;padding:58px 26px 52px;border-radius:20px}
  .tf-card .idx{font-size:17px}
  .tf-card .idx.tl{left:16px;top:14px}
  .tf-card .idx.br{right:16px;bottom:14px}
  .tf-stamp{top:16px}
  .tf-stamp.yes{right:52px}
  .tf-stamp.no{left:52px}
  .tf-q{font-size:27px}
  .tf-why{font-size:17px}
  .tf-btn{flex:1;padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  .work .card,.work .card .card-img img,.hello-link{transition:none}
}
.tf [hidden]{display:none!important}

/* ================= LUXE: slow, deliberate, Apple-calm motion =================
   One curve for anything arriving (expo-out), one for anything travelling across
   the screen (ease-in-out). Long durations, small distances, nothing bounces. */
:root{--lux:cubic-bezier(.16,1,.3,1);--lux-io:cubic-bezier(.65,0,.35,1)}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* headings rise word by word */
.words .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .14em;margin:0 -.02em -.14em}
.words .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--lux)}
.words.in .w>span{transform:none}

/* pictures unveil from the bottom, settling out of a slight zoom */
img.unveil{clip-path:inset(100% 0 0 0);transform:scale(1.12)}
img.unveil.in{clip-path:inset(0 0 0 0);transform:scale(1);transition:clip-path 1s var(--lux-io),transform 1.4s var(--lux)}

/* hovers: slow and soft */
.work .card{transition:transform .9s var(--lux)}
.work .card .card-img img{transition:transform 1.3s var(--lux)}
.work .card:hover .card-img img{transform:scale(1.03)}
.rcard,.cs-next-card,.cs-back,.cs-back span,.btn,.tf-btn,.lnk,.hello-link i{transition-duration:.7s;transition-timing-function:var(--lux)}
.btn,.tf-btn,.tf-no,.tf-yes,.cs-back{transition-property:transform,background-color,color}
.btn:active,.tf-btn:active,.toc-pill:active,.cs-back:active,.rcard:active,.cs-next-card:active,.work .card:active{transition-duration:.25s}
.hello-link{transition:transform 1s var(--lux)}
.cursor{transition:opacity .4s,width .5s var(--lux),height .5s var(--lux),margin .5s var(--lux),border-radius .5s var(--lux),background-color .4s}
.cursor .view{transition:opacity .4s var(--lux)}
.wordmark .fit{opacity:1!important;transform:translateY(105%);transition:transform 1.4s var(--lux)!important}
.wordmark.in .fit{transform:none}
.idx,.card .idx{transition:color .5s var(--lux),background-color .5s var(--lux)}

/* project cards: offset black, bone type */
.work .card .card-in{background:#232321!important;color:#ECE8DF}
.work .card h2{color:#ECE8DF}
.work .card p{color:#C9C5BC!important}
.work .card .chip{background:#ECE8DF!important;color:#161616!important}
.work .card .idx,.work .card:hover .idx{color:#ECE8DF}
.work .card .idx .red,.work .card:hover .idx .red{color:var(--paint)}
.work .card:hover .card-in{background:#2A2A27!important}
.work .card .card-in{transition:background-color .8s var(--lux)}
@media (prefers-reduced-motion:reduce){
  .words .w>span,img.unveil{transform:none!important;clip-path:none!important;transition:none!important}
  .wordmark .fit{transform:none}
}

/* every project card is offset black: recent work + next case study too */
.recent-row .rcard,.cs-next-card{background:#232321!important;color:#ECE8DF!important;transition:background-color .8s var(--lux),transform .7s var(--lux)}
.recent-row .rcard:hover,.cs-next-card:hover{background:#2A2A27!important}
.rcard span,.cs-next-card strong,.cs-next-card i{color:#ECE8DF!important}
.cs-next-card small{color:#C9C5BC!important}
.rcard .idx{color:#ECE8DF}
.rcard .idx .red{color:var(--paint)}

/* ===== ABOUT INTRO: a big first line, two readable columns, a "now" line ===== */
.intro-ix .suit{width:18px;height:18px;color:#161616}
.intro-ix .suit.red{color:var(--paint)}

/* ===== TRUE OR BLUFF: card + scoreboard fill the full width ===== */
.tf{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:24px 56px;align-items:stretch}
.tf-main{display:flex;flex-direction:column;min-width:0}
.tf-main .tf-stage{flex:1;display:flex}
.tf-main .tf-card{flex:1}
.tf-side{display:flex;flex-direction:column;gap:18px;padding:8px 0 16px}
.tf-title{margin:4px 0 0;font-size:clamp(32px,3.2vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1}
.tf-intro{margin:0;font-size:18px;line-height:1.45;color:var(--muted);max-width:22em}
.tf-pips{display:flex;gap:6px;margin-top:auto}
.tf-pips i{flex:1;max-width:34px;aspect-ratio:5/7;border-radius:5px;background:#232321;transition:background-color .6s var(--lux),transform .6s var(--lux)}
.tf-pips i.cur{background:var(--fg);transform:translateY(-4px)}
.tf-pips i.right{background:var(--paint)}
.tf-pips i.wrong{background:#4A4741}
.tf-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;color:var(--fg)}
.tf-meta>div{background:#232321;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.tf-meta small{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tf-meta span{font-size:30px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tf-side .tf-hint{margin:0}
.tf-list{grid-column:1/-1}
@media (max-width:1099.98px){
  .tf{grid-template-columns:1fr;gap:28px}
  .tf-side{order:-1;padding:0}
  .tf-pips{margin-top:6px}
}
@media (max-width:809.98px){
  .tf-card{min-height:340px}
  .tf-title{font-size:32px}
  .tf-intro{font-size:16px}
  .tf-meta span{font-size:24px}
}

/* ===== HOW I WORK, IN FOUR MOVES (flat illustrations drawn in code) ===== */
.tf-pips{align-items:flex-end}
.tf-pips i{flex:0 0 auto;width:34px;max-width:none;height:46px;aspect-ratio:auto}
@media (max-width:809.98px){
  .tf-pips i{width:calc((100% - 42px) / 8);height:auto;aspect-ratio:5/7}
}

/* ===== CASE STUDIES: visual progression ===== */
.cs-section.seen .ch-meter i.f{transform:none}
.cs-section.seen .ch-meter i.f:nth-child(2){transition-delay:.04s}
.cs-section.seen .ch-meter i.f:nth-child(3){transition-delay:.08s}
.cs-section.seen .ch-meter i.f:nth-child(4){transition-delay:.12s}
.cs-section.seen .ch-meter i.f:nth-child(5){transition-delay:.16s}
.cs-section.seen .ch-meter i.f:nth-child(6){transition-delay:.2s}
.cs-section.seen .ch-meter i.f:nth-child(7){transition-delay:.24s}
.cs-section.seen .ch-meter i.f:nth-child(8){transition-delay:.28s}
.toc{position:sticky}
.toc a.done{color:#8E8A82}
.toc a.done .rank{opacity:.55}
.cs-hero img{scale:1.08}
.cs .frame video.gifv{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;border-radius:8px;background:#1C1C1A}

/* ===== PROJECT CARDS: one quiet rank badge, more breathing room ===== */
.work .card .card-in{padding:22px 22px 28px!important}
.work .card .card-img{margin:0}
.card-rank{display:inline-flex;align-items:center;gap:4px;width:fit-content;font-size:13px;font-weight:700;letter-spacing:.06em;color:#ECE8DF;border:1px solid #3A3A36;border-radius:8px;padding:5px 9px 4px;margin-bottom:10px;line-height:1}
.card-rank .suit{width:12px;height:12px}
.card-rank .suit.red{color:var(--paint)}
.work .card:hover .card-rank{border-color:#4A4741}
@media (max-width:809.98px){
  .work .card .card-in{padding:16px 16px 22px!important}
}

/* footer name: same letter windows as the header, no slide or fade */
.wordmark .fit,.wordmark.in .fit{opacity:1!important;transform:none!important;transition:none!important}
.wordmark .ch{text-transform:none}
.hello-link{transform:none!important}

/* ===== HOME: the short version (lead-up to about me) ===== */
.intro .label{margin-bottom:28px}
.intro > p{max-width:22em}
.intro .hand3 p{font-size:17px;font-weight:500;line-height:1.4;letter-spacing:0;color:#3A3833;max-width:16em}
.intro .hand3 p span{opacity:1!important}

/* ===== ABOUT: the personal intro, same voice as the home lead-up ===== */

/* ===== BEYOND THE SCREEN ===== */
.bx-tile{background:#232321;border-radius:22px;padding:16px 16px 24px;display:flex;flex-direction:column;gap:8px;min-width:0}
.bx-head{display:flex;justify-content:space-between;align-items:center;padding:0 8px;margin-top:10px}
.bx-rank{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;letter-spacing:.06em;color:#ECE8DF;border:1px solid #3A3A36;border-radius:8px;padding:5px 9px 4px;line-height:1}
.bx-rank .suit{width:12px;height:12px}
.bx-rank .suit.red{color:var(--paint)}
.bx-title{display:block;padding:0 8px;font-size:30px;font-weight:700;letter-spacing:-.035em;line-height:1.1;color:var(--fg)}
.bx-tile p{margin:0;padding:0 8px;font-size:17px;line-height:1.5;color:#A9A59C}
.bx-screen,.bx-photos{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#161616}
.bx-screen img,.bx-screen iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.bx-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;border:0;background:var(--fg);cursor:pointer;display:grid;place-items:center;transition:transform .6s var(--lux),background-color .3s}
.bx-play i{width:0;height:0;border-left:18px solid #161616;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.bx-play:hover{transform:scale(1.08);background:var(--paint)}
.bx-screen.live .bx-play{display:none}

/* music: a record that spins while it plays */
.bx-music{grid-row:span 1}
.bx-player{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:14px 8px 4px}
.bx-player .bx-title,.bx-player p{padding:0}
.vinyl{width:clamp(120px,14vw,180px);aspect-ratio:1;border-radius:50%;background:#161616;box-shadow:inset 0 0 0 8px #161616,inset 0 0 0 10px #2A2A27,inset 0 0 0 20px #161616,inset 0 0 0 22px #2A2A27,inset 0 0 0 32px #161616,inset 0 0 0 34px #2A2A27;display:grid;place-items:center;position:relative}
.vinyl i{width:36%;aspect-ratio:1;border-radius:50%;background:var(--paint);position:relative}
.vinyl i::after{content:"";position:absolute;left:50%;top:50%;width:10%;aspect-ratio:1;margin:-5% 0 0 -5%;border-radius:50%;background:#ECE8DF}
.bx-music.playing .vinyl{animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bx-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bx-tab{border:0;cursor:pointer;font:inherit;font-size:15px;font-weight:700;border-radius:999px;padding:11px 16px;background:#2E2E2B;color:var(--fg);transition:background-color .4s var(--lux),color .4s var(--lux),transform .5s var(--lux)}
.bx-tab:hover{background:#3A3A36}
.bx-tab.on{background:var(--paint);color:#161616}
.bx-tab:active{transform:scale(.96)}
.bx-embed{padding:12px 0 0}
.bx-embed iframe{display:block;width:100%;height:152px;border:0;border-radius:12px}

/* food: your photos, with a drawn plate until they arrive */
.bx-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#ECE8DF}
.bx-plate-art{position:absolute;inset:0;display:grid;place-items:center}
.bx-plate-art svg{height:72%;width:auto}
@media (max-width:809.98px){
  .bx-title{font-size:24px}
  .bx-player{grid-template-columns:96px 1fr;gap:16px}
  .vinyl{width:96px}
}
@media (prefers-reduced-motion:reduce){
  .bx-music.playing .vinyl{animation:none}
}

/* ===== HOUSE RULES (own section now) ===== */
.house{padding:120px var(--side) 0}
.house .rules{margin-top:48px}
@media (max-width:809.98px){
  .house{padding-top:72px}
}

/* ===== TRUE OR BLUFF: the fun bits ===== */
.tf-card{overflow:visible}
.tf-verdict{position:absolute;right:56px;top:46px;font-size:22px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:8px 16px;border:3px solid currentColor;border-radius:10px;transform:rotate(-12deg);pointer-events:none;animation:stampIn .5s cubic-bezier(.2,.9,.3,1) both}
.tf-verdict.ok{color:var(--paint)}
.tf-verdict.no{color:#161616}
@keyframes stampIn{0%{opacity:0;transform:rotate(-12deg) scale(1.9)}60%{opacity:1}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
.tf-streak{display:inline-block;margin-left:10px;padding:3px 9px;border-radius:999px;background:#161616;color:var(--fg);font-size:12px;letter-spacing:.1em}
.tf-burst{position:absolute;left:50%;top:50%;width:22px;height:22px;pointer-events:none;z-index:5}
.tf-won{position:relative}
.tf-chips{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:row-reverse}
.tf-chips i{display:block;width:26px;height:26px;border-radius:50%;background:var(--paint);box-shadow:inset 0 0 0 4px #161616,inset 0 0 0 6px var(--paint);border:2px dashed #ECE8DF;margin-left:-14px;animation:chipDrop .6s cubic-bezier(.2,.9,.3,1) both}
.tf-chips i:nth-child(even){background:#ECE8DF;box-shadow:inset 0 0 0 4px #161616,inset 0 0 0 6px #ECE8DF;border-color:var(--paint)}
@keyframes chipDrop{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}}
.tf-pot .tf-pips{margin-top:0;flex:1}
@media (max-width:809.98px){
  .tf-verdict{right:22px;top:40px;font-size:16px}
  .tf-chips i{width:20px;height:20px;margin-left:-11px}
}
.tf-burst{color:var(--paint)!important}
.bx-screen img{color:transparent}
.bx-music .bx-player{flex:1;align-content:center}
.bx-music .vinyl{width:clamp(150px,15vw,210px)}
@media (max-width:809.98px){
  .bx-music .vinyl{width:96px}
}

/* ===== BLUE ACCENT: deeper blue for small blue text on bone cards ===== */
.tf.right .tf-small,.tf.right .tf-big,.tf-verdict.ok{color:var(--paint-ink)}
.pc .red,.tf-card .idx .red{color:var(--paint-ink)}
.cursor .view{color:#0E0E0E}

/* headroom so tall letters and tails never clip (Safari measures fonts a touch taller) */
.ch{padding:.2em 0;margin:-.2em 0}
.ch .reel i{height:1.3em;line-height:1.3em}
.words .w{padding:.16em .04em .22em;margin:-.16em -.04em -.22em}

/* =====================================================================
   BENTO: the tile grid used for "about" on the landing page and about page.
   Flat tiles in three tones: offset black (most), bone (a card), blue (an action).
   ===================================================================== */
.about-bento{padding:120px var(--side) 0}
.about-bento > .label{margin-bottom:24px}
.about-grid{margin-top:56px}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.s4{grid-column:span 4}
.s6{grid-column:span 6}
.s8{grid-column:span 8}
.s12{grid-column:span 12}
.tile{position:relative;min-width:0;background:#232321;color:var(--fg);border-radius:24px;padding:26px 28px 28px;display:flex;flex-direction:column;gap:12px;transition:transform .8s var(--lux),background-color .6s var(--lux)}
.tile.bone{background:#ECE8DF;color:#161616}
.tile.blue{background:var(--paint);color:#0E0E0E}
.tile-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.tile-label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#A9A59C}
.tile.bone .tile-label{color:#5C5852}
.tile.blue .tile-label{color:#0E0E0E}
.t-big{margin:auto 0 0;font-size:clamp(32px,3.6vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1.06;color:var(--fg-strong);max-width:14em}
.t-sub{margin:0;font-size:17px;line-height:1.45;color:#A9A59C;max-width:32em}
.tile.bone .t-sub{color:#4A4741}
.tile.blue .t-sub{color:#0E0E0E}
.t-title{display:block;font-size:clamp(26px,2.4vw,34px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.t-meta{margin-top:auto;padding-top:10px;font-size:14px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#A9A59C}
.tile.bone .t-meta{color:#5C5852}
.t-statement{min-height:340px}
.t-now .t-title,.t-before .t-title{margin-top:auto}
.t-live{width:8px;height:8px;border-radius:50%;background:var(--paint-ink);animation:livePulse 2.4s ease-in-out infinite}
@keyframes livePulse{50%{opacity:.3}}
.tile.bone .card-rank{color:#161616;border-color:#CFCAC0}
.tile.bone .card-rank .red{color:var(--paint-ink)}
.tile.blue .card-rank,.tile.blue .card-rank .red{color:#0E0E0E;border-color:rgba(14,14,14,.3)}
.t-list{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-direction:column;gap:14px}
.t-list li{display:flex;flex-direction:column;gap:3px;padding-top:14px;border-top:1px solid #34342F}
.t-list li:first-child{border-top:0;padding-top:0}
.t-list strong{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.t-list span{font-size:15px;line-height:1.4;color:#A9A59C}
a.tile:hover{transform:translateY(-4px)}
a.tile:active{transform:scale(.985);transition-duration:.25s}
.tile.blue:hover{background:#5B88FF}

/* house rules: a small deck you click or tap to flip */
.rules-deck{list-style:none;padding:0;margin:0 10px 10px 0;flex:1;display:grid;gap:10px;position:relative;isolation:isolate}
.rules-deck li{position:relative;background:#ECE8DF;color:#161616;border-radius:16px;padding:42px 28px 40px;display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:210px}
.rules-deck h3{margin:0;font-size:23px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.rules-deck p{margin:0;font-size:15px;line-height:1.45;color:#4A4741}
.rules-deck .idx{position:absolute;font-size:16px;color:#161616}
.rules-deck .idx.tl{left:12px;top:10px}
.rules-deck .idx.br{right:12px;bottom:10px;transform:rotate(180deg)}
.rules-deck .idx .red{color:var(--paint-ink)}
.rules-deck.js{cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.rules-deck.js li{display:none}
.rules-deck.js li.on{display:flex}
.rules-deck.js::before,.rules-deck.js::after{content:"";position:absolute;inset:0;border-radius:16px;z-index:-1}
.rules-deck.js::before{background:#BAB5AB;transform:translate(6px,6px)}
.rules-deck.js::after{background:#85817A;transform:translate(12px,12px);z-index:-2}
.rules-deck.js:focus-visible li.on{box-shadow:0 0 0 3px #232321,0 0 0 6px var(--paint)}
.t-count{font-size:13px;font-weight:700;letter-spacing:.04em;color:#A9A59C;font-variant-numeric:tabular-nums}

/* the way into the personal page, and the way to say hi */
.t-offclock,.t-hi{flex-direction:row;align-items:center;gap:32px;padding:28px 32px}
.t-oc-text{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.t-hi > div{display:flex;flex-direction:column;gap:10px;flex:1}
.t-icons{display:flex;gap:12px}
.t-ic{width:76px;height:76px;border-radius:18px;background:#ECE8DF;display:grid;place-items:center;transition:transform .8s var(--lux)}
.t-ic svg{width:62%;height:62%}
.t-offclock:hover .t-ic{transform:translateY(-6px) rotate(-4deg)}
.t-offclock:hover .t-ic:nth-child(2){transition-delay:.05s}
.t-offclock:hover .t-ic:nth-child(3){transition-delay:.1s}
.t-offclock:hover .t-ic:nth-child(4){transition-delay:.15s}
.t-arrow{font-size:44px;font-weight:600;line-height:1;transition:transform .8s var(--lux)}
a.tile:hover .t-arrow{transform:translateX(8px)}

/* right now in Gauteng: a live clock and the day as 24 bars */
.t-time{display:block;margin-top:auto;font-size:clamp(64px,7vw,112px);font-weight:700;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.t-hours{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;margin-top:8px}
.t-hours i{height:22px;border-radius:3px;background:#D4CFC5}
.t-hours i.day{background:#B9B4AA}
.t-hours i.cur{background:var(--paint-ink)}

/* tiles that came from the old sections keep their own inner layout */
.tile.bx-tile{padding:16px 16px 24px;gap:8px}
.tile.tf{display:grid;margin:0;padding:28px}
.tile.tf .tf-meta>div{background:#1C1C1A}
.tile.tf .tf-pips i:not(.cur):not(.right):not(.wrong){background:#34342F}
@media (max-width:1099.98px){
  .s4{grid-column:span 6}
  .s8{grid-column:span 12}
  .about-grid .t-clock{grid-column:span 12}
  .t-rules{grid-column:span 6}
}
@media (max-width:809.98px){
  .about-bento{padding-top:72px}
  .about-grid{margin-top:32px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .s4,.s6,.s8,.s12,.t-rules,.about-grid .t-clock{grid-column:span 2}
  .t-before,.t-studied{grid-column:span 1}
  .tile{padding:20px;border-radius:20px;gap:10px}
  .tile.bx-tile{padding:12px 12px 20px}
  .tile.tf{padding:18px}
  .t-statement{min-height:0}
  .t-big{font-size:30px;line-height:1.1}
  .t-sub{font-size:15px}
  .t-title{font-size:22px}
  .t-before .t-sub{display:none}
  .t-list strong{font-size:16px}
  .t-list span{font-size:13px}
  .t-offclock,.t-hi{flex-direction:column;align-items:flex-start;gap:20px;padding:22px 20px}
  .t-ic{width:58px;height:58px;border-radius:14px}
  .t-arrow{position:absolute;right:20px;top:18px;font-size:30px}
  .t-time{font-size:72px}
  .rules-deck li{min-height:180px;padding:40px 22px 36px}
}
@media (prefers-reduced-motion:reduce){
  .t-live{animation:none}
}
.tile.tf .tf-no{background:#34342F}
.tile.tf .tf-no:hover{background:#3E3E39}
.bx-music .vinyl{width:clamp(170px,16vw,240px)}
@media (max-width:809.98px){
  .bx-music .vinyl{width:96px}
}

/* letters and words never lose their edges: the windows clip only top and bottom
   (tight letter-spacing lets each glyph spill a little past its own box) */
.ch{overflow:visible;clip-path:inset(0 -.4em)}
.words .w{overflow:visible;clip-path:inset(-.2em -.4em 0 -.4em)}

/* studied: a story line, then a two-step timeline (latest step in blue) */
.t-studied .t-title{max-width:14em}
.t-edu{list-style:none;margin:auto 0 0;padding:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:24px;position:relative}
.t-edu::before{content:"";position:absolute;left:0;right:0;top:4px;height:2px;border-radius:1px;background:#3A3A36}
.t-edu li{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
.t-edu li::before{content:"";position:absolute;left:0;top:-28px;width:10px;height:10px;border-radius:50%;background:#ECE8DF}
.t-edu li:last-child::before{background:var(--paint)}
.t-yr{font-size:clamp(36px,3.2vw,48px);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums;margin-bottom:10px}
.t-edu strong{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.t-edu li > span:last-child{font-size:15px;line-height:1.4;color:#A9A59C}
@media (max-width:809.98px){
  .t-studied{grid-column:span 2}
  .t-edu{gap:16px;padding-top:24px}
  .t-edu li::before{top:-24px}
  .t-yr{font-size:32px;margin-bottom:6px}
  .t-edu strong{font-size:16px}
  .t-edu li > span:last-child{font-size:13px}
}
.t-studied .t-title{max-width:none;text-wrap:balance}
@media (max-width:1099.98px) and (min-width:810px){.t-rules{grid-column:span 12}}
.t-studied .t-title{margin-bottom:22px}

/* ===== LIVE DATA tiles (Spotify, Steam) ===== */
.bx-music.is-live .bx-player,.bx-music.is-live .bx-embed{display:none}
.lv-box{display:flex;flex-direction:column;gap:14px;padding:6px 8px 0}
.lv-now{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:#1C1C1A;border-radius:16px;padding:12px;transition:background-color .5s var(--lux)}
.lv-now:hover{background:#2A2A27}
.lv-art{width:96px;height:96px;border-radius:10px;overflow:hidden;background:#161616;display:block}
.lv-art img{width:100%;height:100%;object-fit:cover;display:block}
.lv-now.playing .lv-art{border-radius:50%;animation:spin 6s linear infinite}
.lv-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.lv-meta b{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-meta small,.lv-when{font-size:15px;color:#A9A59C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-eq{display:flex;align-items:flex-end;gap:3px;height:16px;margin-top:6px}
.lv-eq i{width:4px;border-radius:2px;background:var(--paint);animation:eq 1s ease-in-out infinite}
.lv-eq i:nth-child(2){animation-delay:-.3s}.lv-eq i:nth-child(3){animation-delay:-.6s}.lv-eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}
.lv-bar{display:block;height:3px;border-radius:2px;background:#34342F;overflow:hidden;margin-top:8px}
.lv-bar i{display:block;height:100%;background:var(--paint);transform-origin:0 50%;transform:scaleX(0);transition:transform 1s linear}
.lv-sub{margin:4px 0 0;padding:0!important;font-size:12px!important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#A9A59C}
.lv-top{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lv-top a{display:grid;grid-template-columns:18px 40px 1fr;gap:12px;align-items:center;padding:6px;border-radius:10px;transition:background-color .4s var(--lux)}
.lv-top a:hover{background:#2A2A27}
.lv-n{font-size:13px;font-weight:700;color:#A9A59C;text-align:right;font-variant-numeric:tabular-nums}
.lv-top img,.lv-top a > i{width:40px;height:40px;border-radius:6px;object-fit:cover;background:#161616;display:block}
.lv-t{display:flex;flex-direction:column;min-width:0}
.lv-t b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-t small{font-size:13px;color:#A9A59C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-src{margin:0;padding:0!important;font-size:12px!important;color:#6E6A63!important}
.bx-game.is-live .bx-screen a{position:absolute;inset:0;display:block}
.bx-game.is-live .bx-screen img{transition:transform 1.2s var(--lux)}
.bx-game.is-live .bx-screen:hover img{transform:scale(1.03)}
.lv-games{list-style:none;margin:8px 0 0;padding:0 8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lv-games a{display:flex;flex-direction:column;gap:6px}
.lv-games img{width:100%;aspect-ratio:460/215;object-fit:cover;border-radius:8px;background:#161616;display:block}
.lv-games span{font-size:13px;color:#A9A59C;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bx-head .label .t-live{display:inline-block;width:8px;height:8px;margin-right:8px;vertical-align:1px}
@media (max-width:809.98px){.lv-art{width:72px;height:72px}.lv-meta b{font-size:18px}}
@media (prefers-reduced-motion:reduce){.lv-now.playing .lv-art,.lv-eq i{animation:none}}
.bx-head .label:has(.t-live)::before{display:none}

/* playlist + Steam games from settings.js */
.bx-music.has-playlist .bx-player,.bx-music.has-playlist .bx-embed{display:none}
.bx-playlist{padding:6px 0 0;flex:1;display:flex}
.bx-playlist iframe{display:block;width:100%;height:352px;border:0;border-radius:12px;background:#161616}
.bx-game.has-games .bx-screen{aspect-ratio:460/215}
.bx-game.has-games .bx-screen a{position:absolute;inset:0;display:block}
.bx-game.has-games .bx-screen img{transition:transform 1.2s var(--lux)}
.bx-game.has-games .bx-screen:hover img{transform:scale(1.03)}
.bx-profile{margin:10px 8px 0;width:fit-content;font-size:15px;font-weight:700;color:var(--fg);background:#2E2E2B;border-radius:999px;padding:10px 16px;transition:background-color .4s var(--lux)}
.bx-profile:hover{background:#3A3A36}
.bx-music.is-live .bx-playlist{display:none}

/* cover wall (music) and poster row (anime) */
.cover-wall{list-style:none;margin:6px 0 6px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cover-wall.n1{grid-template-columns:1fr}.cover-wall.n2,.cover-wall.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.cover-wall a{position:relative;display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#161616}
.cover-wall.n1 a{aspect-ratio:16/9}
.cover-wall img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--lux)}
.cover-wall a:hover img{transform:scale(1.05)}
.cover-wall span{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);font-size:13px;font-weight:700;background:#161616;color:#ECE8DF;border-radius:999px;padding:5px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-music.has-covers .vinyl{display:none}
.bx-music.has-covers .bx-player{grid-template-columns:1fr;padding-top:6px}
.bx-screen.has-posters{background:#161616}
.poster-row{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.poster-row a{display:block;overflow:hidden}
.poster-row img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;transition:transform 1.2s var(--lux)}
.poster-row a:hover img{transform:scale(1.05)}
.bx-screen.has-posters .bx-play{z-index:2;box-shadow:0 0 0 6px rgba(22,22,22,.55)}
.bx-screen .poster-row img{position:static;inset:auto}