/* ============================================================
   TOKENS — Option B colorway. Light is default; dark overrides.
   ============================================================ */
:root {
  --bg:#edf0f0; --ink:#12161a; --muted:#5c6670;
  --line:rgba(18,30,36,.16); --shadow:rgba(20,60,70,.4);
  --a1:#3f38e0; --a2:#0ea59a;
  --ease:cubic-bezier(.22,.61,.36,1);
  --link: var(--a1);
}
html.dark {
  --bg:#0d1114; --ink:#eef4f5; --muted:#8794a0;
  --line:rgba(200,220,225,.16); --shadow:rgba(20,180,170,.35);
  --a1:#6d64ff; --a2:#24d3c4;
  --link: var(--a2);
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif;
       -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
       transition:background .5s var(--ease), color .5s var(--ease); }
a { color:inherit; text-decoration:none; }

/* Fine grain overlay for tactile depth. */
.grain { position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05;
         mix-blend-mode:soft-light;
         background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html.dark .grain { opacity:.08; mix-blend-mode:overlay; }

/* Theme toggle — pill switch, both icons always visible, thumb slides
   behind whichever mode is active. */
.theme-toggle { position:fixed; top:20px; right:22px; z-index:9999; width:56px; height:30px;
                border-radius:999px; padding:0; cursor:pointer;
                border:1px solid rgba(120,120,140,.28); background:rgba(255,255,255,.55);
                backdrop-filter:blur(10px) saturate(1.2); color:#2a2530;
                transition:background .4s, border-color .4s; }
html.dark .theme-toggle { background:rgba(20,26,30,.5); color:#eef4f5; border-color:rgba(200,220,225,.2); }
.theme-toggle:hover { transform:scale(1.05); }
.tt-track { position:relative; width:100%; height:100%; display:flex; align-items:center;
            justify-content:space-between; padding:0 6px; box-sizing:border-box; }
.tt-icon { width:14px; height:14px; position:relative; z-index:2; opacity:.4; transition:opacity .3s; }
.tt-sun { opacity:1; }
html.dark .tt-sun { opacity:.4; }
html.dark .tt-moon { opacity:1; }
.tt-thumb { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
            background:linear-gradient(120deg,var(--a1),var(--a2)); z-index:1;
            transition:transform .35s var(--ease); }
html.dark .tt-thumb { transform:translateX(26px); }

/* Nav — brand + links grouped into one left-anchored cluster. */
.nav { position:absolute; top:0; left:0; right:0; z-index:4;
       display:flex; align-items:center; justify-content:flex-start;
       padding:26px clamp(26px,6vw,84px); }
.nav-left { display:flex; align-items:center; gap:36px; }
.nav .brand { font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-.01em; font-size:16px;
              transition:opacity .25s; }
.nav .brand:hover { opacity:.7; }
.nav .links { display:flex; gap:26px; font-family:'JetBrains Mono',monospace;
              font-size:12.5px; letter-spacing:.02em; }
.nav .links a { color:var(--muted); transition:color .25s; }
.nav .links a:hover { color:var(--ink); }
.nav-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover;
              border:1px solid var(--line); flex:0 0 auto; }

/* Dropdown for nav items with sub-pages (Projects, Teaching, More).
   Shows on hover for mouse users and on focus-within for keyboard users.
   The gap between the link and the card lives in .subnav's own
   padding-top (not a margin) so the hoverable box starts flush against
   the link — the pointer never crosses dead space on the way down. */
.nav-item { position:relative; }
.nav-item > a::after { content:"⌄"; margin-left:5px; font-size:9px; opacity:.65; position:relative; top:-1px; }
.subnav { position:absolute; top:100%; left:-14px; padding-top:14px; min-width:190px;
          opacity:0; pointer-events:none; transform:translateY(-6px);
          transition:opacity .2s var(--ease), transform .2s var(--ease); }
.nav-item:hover .subnav, .nav-item:focus-within .subnav { opacity:1; pointer-events:auto; transform:translateY(0); }
.subnav-inner { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:8px;
                box-shadow:0 20px 40px -20px var(--shadow); }
.subnav a { display:block; padding:8px 10px; border-radius:8px; font-size:12px; white-space:nowrap;
            color:var(--muted); }
.subnav a:hover { color:var(--ink); background:color-mix(in oklab, var(--a1) 8%, var(--bg)); }


@media (max-width:720px){
  .nav { padding:20px 20px; }
  .nav-left { gap:14px; }
  /* The inline link row and its dropdowns are replaced wholesale by the
     hamburger drawer, which carries every sub-page link too. */
  .nav .links { display:none; }
  .nav-item > a::after { display:none; }
  .subnav { display:none; }
}



/* Entrance animation — shared by the homepage hero and every sub-page. */
.rise { opacity:0; transform:translateY(18px); }
.in .rise { opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }
.in .d1 { transition-delay:.05s; }
.in .d2 { transition-delay:.16s; }
.in .d3 { transition-delay:.28s; }
.in .d4 { transition-delay:.40s; }

.btn { display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:999px;
       font-size:14.5px; font-weight:500;
       transition:transform .3s var(--ease), box-shadow .3s, background .3s, border-color .3s; }
.btn-primary { background:var(--ink); color:var(--bg); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 30px -12px var(--shadow); }
.btn-ghost { border:1px solid var(--line); color:var(--ink); }
.btn-ghost:hover { transform:translateY(-2px); border-color:var(--ink); }
.btn .arr { transition:transform .3s var(--ease); }
.btn:hover .arr { transform:translateX(3px); }

/* ============================================================
   PAGE HERO — big centered title used by every sub-page (via
   _layouts/page.html). Homepage has its own bespoke hero below.
   ============================================================ */
.page { position:relative; min-height:100vh; }
.page-hero { position:relative; z-index:3; max-width:900px; margin:0 auto;
             padding:170px clamp(26px,6vw,84px) 40px; text-align:center; }
.page-eyebrow { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.18em;
                text-transform:uppercase; color:var(--muted); margin:0 0 22px; }
.page-title { font-family:'Space Grotesk',sans-serif; font-weight:600;
              font-size:clamp(40px,6.4vw,76px); line-height:1; letter-spacing:-.03em; margin:0; }
.page-title .accent { background:linear-gradient(120deg,var(--a1),var(--a2));
                        -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ============================================================
   TEXT BOX — a bordered card for the main body copy of a page.
   Duplicate/split this if a page needs more than one block.
   ============================================================ */
.content { max-width:900px; margin:0 auto; padding:0 clamp(26px,6vw,84px) 60px; }
.text-box { border:1px solid var(--line); border-radius:18px; padding:36px clamp(24px,4vw,44px);
            font-size:16px; line-height:1.75; }
.text-box p { margin:0 0 18px; color:var(--ink); opacity:.88; }
.text-box p:last-child { margin-bottom:0; }
.text-box h2 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:22px;
               letter-spacing:-.01em; margin:0 0 14px; }

/* ============================================================
   IMAGE GRID — 2-up layout. Empty boxes = dashed placeholder;
   boxes containing a real <img> get a clean solid frame and
   crop the photo to fill the uniform aspect-ratio box.
   ============================================================ */
.img-section { max-width:1100px; margin:0 auto; padding:0 clamp(26px,6vw,84px) 100px; }
.img-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:520px){ .img-grid { grid-template-columns:1fr; } }

.img-placeholder { aspect-ratio:4/3; border-radius:16px; border:1px dashed var(--line);
                    display:grid; place-items:center; text-align:center; padding:16px;
                    font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.03em;
                    color:var(--muted); overflow:hidden; }

.img-figure { margin:0; display:flex; flex-direction:column; gap:10px; }

.img-caption { font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.03em;
               color:var(--muted); text-align:center; line-height:1.4; }        

/* When a placeholder actually contains a photo, drop the dashed
   "empty state" styling and let the image fill the box edge-to-edge */
.img-placeholder:has(img) { padding:0; border-style:solid; }

.img-placeholder img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
/* Swap a placeholder for a real image like this:
   <div class="img-placeholder" style="background:url('/assets/img/photo.jpg') center/cover; border-style:solid;"></div> */

  .img-grid.square .img-placeholder { aspect-ratio: 1/1; }

/* ============================================================
   SECTION / SUBSECTION HEADERS
   ============================================================ */
.section-head { margin:0 0 26px; }
.section-eyebrow { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em;
                    text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.section-title { font-family:'Space Grotesk',sans-serif; font-weight:600;
                  font-size:clamp(24px,3.2vw,32px); letter-spacing:-.02em; margin:0 0 20px; }
.section-rule { border-top:1px solid var(--line); margin:0 0 30px; }

.subsection-title { display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif;
                     font-weight:600; font-size:17px; letter-spacing:-.01em; margin:34px 0 14px; }
.subsection-title:first-child { margin-top:0; }
.subsection-title::before { content:""; width:14px; height:2px; background:var(--a1); flex:0 0 auto; }
html.dark .subsection-title::before { background:var(--a2); }
.section-intro {
    margin: 0.5rem 0 1.5rem;
    color: var(--muted);
    font-size: 0.95rem;
    max-width: 1200px;
  }

/* ============================================================
   TABLE — for row/column data like talks, publications, etc.
   ============================================================ */
.table-section { max-width:1200px; margin:0 auto; padding:40px clamp(26px,6vw,84px) 60px; }
.table-wrap { border:1px solid var(--line); border-radius:16px; overflow:hidden; overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:14px; white-space:nowrap; }
.data-table th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:11px;
                 letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
                 background:color-mix(in oklab, var(--ink) 4%, var(--bg));
                 padding:14px 20px; border-bottom:1px solid var(--line); }
.data-table td { padding:16px 20px; border-bottom:1px solid var(--line); color:var(--ink); }

.data-table tr:hover td { background:color-mix(in oklab, var(--a1) 5%, var(--bg)); }

html.dark .data-table a { color:var(--a2); }
.data-table a:hover { text-decoration:underline; }

/* ============================================================
   VIDEO EMBED — responsive 16:9 wrapper for a YouTube iframe.
   ============================================================ */
.video-section { max-width:820px; margin:0 auto; padding:0 clamp(26px,6vw,84px) 60px; }
.video-frame { position:relative; width:100%; aspect-ratio:16/9; border-radius:16px;
               overflow:hidden; border:1px solid var(--line); background:#000; }
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-caption { margin:12px 2px 0; font-family:'JetBrains Mono',monospace; font-size:12px;
                  letter-spacing:.02em; color:var(--muted); }

/* ============================================================
   STYLIZED LIST — for a sequence like past courses or DRP
   projects, where order/date genuinely carries information.
   ============================================================ */
.list-section { max-width:760px; margin:0 auto; padding:0 clamp(26px,6vw,84px) 100px; }
.styled-list { position:relative; display:flex; flex-direction:column; gap:2px; }
.styled-list::before { content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px;
                        background:var(--line); }
.list-item { position:relative; display:flex; gap:20px; padding:18px 6px 18px 30px;
             border-radius:12px; transition:background .25s var(--ease); }
.list-item:hover { background:color-mix(in oklab, var(--a1) 5%, var(--bg)); }
.list-item::before { content:""; position:absolute; left:0; top:24px; width:11px; height:11px;
                      border-radius:50%; background:var(--bg); border:2px solid var(--a1); }
html.dark .list-item::before { border-color:var(--a2); }
.list-meta { flex:0 0 auto; width:92px; display:flex; flex-direction:column;
             align-items:flex-start; gap:5px; font-family:'JetBrains Mono',monospace;
             font-size:12px; line-height:1.4; color:var(--muted); padding-top:2px; }
.list-body { flex:1; }
.list-title { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16.5px;
              letter-spacing:-.01em; margin:0 0 4px; }
.list-desc { font-size:13.5px; line-height:1.55; color:var(--muted); margin:0; }


.list-meta a { color:var(--a1); text-decoration:none;
               border-bottom:1px solid transparent;
               transition:border-color .2s var(--ease); }
html.dark .list-meta a { color:var(--a2); }
.list-meta a:hover { border-color:currentColor; }

.list-title a { color:inherit; text-decoration:underline;
                text-decoration-thickness:1px; text-decoration-color:var(--line);
                text-underline-offset:3px;
                transition:text-decoration-color .2s var(--ease); }
.list-title a:hover { text-decoration-color:var(--a2); }

.table-section .styled-list { max-width:820px; }

.list-more { display:flex; flex-direction:column; gap:2px; }
.list-more.is-collapsed { display:none; }

.list-block { max-width:820px; }
.list-reveal { display:flex; align-items:center; gap:10px; width:100%;
               margin:6px 0 0 30px; padding:10px 0;
               background:none; border:0; cursor:pointer;
               font-family:'JetBrains Mono',monospace; font-size:11.5px;
               letter-spacing:.12em; text-transform:uppercase;
               color:var(--muted); text-align:left;
               transition:color .25s var(--ease); }
.list-reveal::after { content:""; flex:1; height:1px; background:var(--line);
                      transition:background .25s var(--ease); }
.list-reveal:hover { color:var(--ink); }
.list-reveal:hover::after { background:var(--a2); }
.list-reveal:focus-visible { outline:2px solid var(--a2); outline-offset:4px;
                             border-radius:4px; }
.list-reveal .reveal-icon { width:14px; height:14px; flex:0 0 auto;
                            transition:transform .25s var(--ease); }
.list-reveal[aria-expanded="true"] .reveal-icon { transform:rotate(180deg); }
 
@media (prefers-reduced-motion:reduce) {
  .list-reveal .reveal-icon { transition:none; }
}

@media (max-width:720px) {
  .list-item { flex-direction:column; gap:7px; padding:16px 4px 16px 26px; }
  .list-item::before { top:20px; }
  .list-meta { flex-direction:row; align-items:baseline; flex-wrap:wrap;
               width:auto; gap:12px; padding-top:0; }
  .list-title { font-size:16px; }
  .list-desc { font-size:13.5px; }
  .list-reveal { margin-left:26px; }
  .table-section .styled-list, .list-block { max-width:none; }
}



/* ============================================================
   PROSE LIST — simple bulleted list for paragraph-length items
   (links, resources, advice). Not a flex layout, unlike
   .styled-list, so long inline content just wraps normally.
   ============================================================ */
.prose-list { display:flex; flex-direction:column; gap:18px; padding:0; margin:0; list-style:none; }
.prose-item { position:relative; padding-left:26px; font-size:16px; line-height:1.75; color:var(--ink); opacity:.88; }
.prose-item::before { content:""; position:absolute; left:4px; top:10px; width:7px; height:7px;
                       border-radius:50%; background:var(--a1); }
html.dark .prose-item::before { background:var(--a2); }
.prose-item a { color:var(--a1); text-decoration:none; }
html.dark .prose-item a { color:var(--a2); }
.prose-item a:hover { text-decoration:underline; }





/* ============================================================
   PAGE FOOTER — lightweight sign-off for sub-pages: just a rule,
   name, and email. (The full Explore grid is homepage-only.)
   ============================================================ */
.page-foot { max-width:1100px; margin:0 auto; padding:26px clamp(26px,6vw,84px) 60px;
             border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 24px;
             align-items:center; justify-content:space-between;
             font-size:13px; color:var(--muted); }
.page-foot a { color:var(--muted); transition:color .25s; }
.page-foot a:hover { color:var(--ink); }


/* ============================================================
   HOMEPAGE-ONLY — hero, disk visual, carousel, Explore grid.
   Nothing below this line is used by sub-pages.
   ============================================================ */
.hero { position:relative; min-height:100vh; overflow:hidden;
        background:var(--bg); color:var(--ink);
        transition:background .5s var(--ease), color .5s var(--ease); }

.hero-inner { position:relative; z-index:3; max-width:1240px; margin:0 auto; min-height:100vh;
              display:flex; flex-direction:column; justify-content:center; gap:40px;
              padding:120px clamp(26px,6vw,84px) 70px; }

.b-grid { display:grid; grid-template-columns:1.05fr .95fr;
          align-items:center; gap:clamp(30px,5vw,70px); }
@media (max-width:900px){ .b-grid { grid-template-columns:1fr; } }

.geom-row { display:flex; align-items:center; justify-content:center; gap:34px; text-align:left; }
@media (max-width:820px){ .geom-row { flex-direction:column; align-items:center; text-align:center; gap:14px; } }
.geom-mini { flex:0 0 auto; display:grid; place-items:center; }
.geom-mini svg { width:min(212px,38vw); height:auto; overflow:visible; }
.geom-text { flex:0 1 auto; min-width:0; }
.geom-eyebrow { font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.16em;
                text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
.geom-cap { font-size:13.5px; line-height:1.6; color:var(--muted); max-width:56ch; margin:0; }

.b-eyebrow { display:inline-flex; align-items:center; gap:12px;
             font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.18em;
             text-transform:uppercase; color:var(--muted); margin:0 0 30px; }
.b-eyebrow .dot { width:7px; height:7px; border-radius:999px; background:var(--a2);
                  box-shadow:0 0 0 4px color-mix(in oklab, var(--a2) 25%, transparent); }
.b-name { font-family:'Space Grotesk',sans-serif; font-weight:600;
          font-size:clamp(38px,7.2vw,104px); line-height:.96; letter-spacing:-.035em; margin:0 0 26px;
          white-space:nowrap; }
.b-name .accent { background:linear-gradient(120deg,var(--a1),var(--a2));
                   -webkit-background-clip:text; background-clip:text; color:transparent; }
.b-lead { font-family:'Inter',sans-serif; max-width:50ch; font-size:clamp(17px,1.7vw,20px);
          line-height:1.55; color:var(--ink); opacity:.82; margin:0 0 38px; }
.b-lead b { font-weight:600; opacity:1; color:var(--a1); }
html.dark .b-lead b { color:var(--a2); }
.b-cta { display:flex; gap:14px; flex-wrap:wrap; }

.b-visual { position:relative; display:grid; place-items:center; }
.b-visual svg { width:min(430px,78vw); height:auto; overflow:visible; }
.disk-boundary { fill:none; stroke:var(--line); stroke-width:1.4; }
.geo path { fill:none; stroke:url(#bgrad); stroke-width:1.4; stroke-linecap:round; }
.ideal circle { fill:var(--a1); }
.b-halo { position:absolute; width:62%; aspect-ratio:1; border-radius:50%;
          background:radial-gradient(circle, color-mix(in oklab, var(--a2) 40%, transparent), transparent 68%);
          filter:blur(46px); opacity:.55; z-index:-1; }
.b-slowspin { transform-box:fill-box; transform-origin:center; animation:spin 240s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.carousel-wrap { display:flex; align-items:center; justify-content:center; gap:14px; }
.carousel { position:relative; width:min(360px,64vw); aspect-ratio:4/5; border-radius:22px;
            overflow:hidden; box-shadow:0 30px 60px -30px var(--shadow); border:1px solid var(--line); }
.carousel .slide { position:absolute; inset:0; opacity:0; transition:opacity .7s var(--ease);
                    display:grid; place-items:center; text-align:center;
                    font-family:'Space Grotesk',sans-serif; font-size:14px; color:#fff;
                    padding:24px; }
.carousel .slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.carousel .slide.active { opacity:1; }
.carousel .slide span { opacity:.85; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; }

.cnav { flex:0 0 auto; width:38px; height:38px; border-radius:999px; display:grid; place-items:center;
        cursor:pointer; color:var(--ink); background:var(--bg); border:1px solid var(--line);
        transition:background .25s var(--ease), border-color .25s var(--ease); }
.cnav:hover { background:color-mix(in oklab, var(--a1) 10%, var(--bg)); border-color:var(--ink); }
.cnav svg { width:16px; height:16px; }
.carousel .cdots { position:absolute; left:0; right:0; bottom:16px; z-index:2;
                    display:flex; justify-content:center; gap:8px; }
.carousel .cdots span { width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.45);
                         cursor:pointer; transition:background .25s, transform .25s; }
.carousel .cdots span.on { background:#fff; transform:scale(1.25); }

.explore { position:relative; padding:0 clamp(26px,6vw,84px) 70px; background:var(--bg); }
.explore-inner { max-width:1240px; margin:0 auto; border-top:1px solid var(--line); padding-top:36px; }
.explore-head { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.18em;
                text-transform:uppercase; color:var(--muted); margin:0 0 30px; }
.explore-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:820px){ .explore-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .explore-grid { grid-template-columns:1fr; } }
.explore-card { position:relative; background:var(--bg); padding:34px 28px; display:flex;
                flex-direction:column; gap:10px; border:1px solid var(--line); border-radius:18px;
                transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.explore-card:hover { background:color-mix(in oklab, var(--a1) 6%, var(--bg));
                       border-color:color-mix(in oklab, var(--a1) 35%, var(--line));
                       transform:translateY(-3px); box-shadow:0 16px 34px -20px var(--shadow); }
.explore-card .num { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); }
.explore-card h3 { font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:600;
                    letter-spacing:-.01em; margin:0; }
.explore-card p { font-size:13.5px; line-height:1.5; color:var(--muted); margin:0; }
.explore-card .go { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500;
                     color:var(--a1); margin-top:auto; padding-top:10px; }
html.dark .explore-card .go { color:var(--a2); }
.explore-card .go svg { width:14px; height:14px; transition:transform .3s var(--ease); }
.explore-card:hover .go svg { transform:translateX(3px); }
.explore-foot { display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between;
                margin-top:40px; font-size:13px; color:var(--muted); }
.explore-foot a { color:var(--muted); transition:color .25s; }
.explore-foot a:hover { color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  .b-slowspin { animation:none !important; }
  .rise { opacity:1 !important; transform:none !important; transition:none !important; }
  .carousel .slide { transition:none; }
}



/* Generic collapsible block */
.reveal-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s var(--ease);
}

.reveal-toggle {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.reveal-toggle:hover { border-color: var(--a1); color: var(--a1); }

.reveal-toggle .reveal-icon {
  width: 14px; height: 14px;
  transition: transform .3s var(--ease);
}
.reveal.is-open .reveal-toggle .reveal-icon { transform: rotate(180deg); }

table[data-table-reveal].is-open ~ [data-table-toggle] .reveal-icon {
  transform: rotate(180deg);
}

/* Collapsible table rows */
table[data-table-reveal] tbody[data-more-rows] { display: none; }
table[data-table-reveal].is-open tbody[data-more-rows] {
  display: table-row-group;
  animation: rowFadeIn .35s var(--ease);
}
@keyframes rowFadeIn { from { opacity: 0; } to { opacity: 1; } }



/* Formatting links */

.page-content a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--line);
  transition: text-decoration-color .3s var(--ease);
}
.page-content a:hover {
  text-decoration-color: var(--link);
}



.disk-wrap { width: min(38vw, 300px); aspect-ratio: 1 / 1; }
.disk-wrap canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 720px) { .disk-wrap { width: min(70vw, 320px); } }




/* video grid formatting */

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 400px));  /* was repeat(2, 1fr) — caps width instead of stretching */
  justify-content: center;                              /* centers the pair since columns no longer fill the row */
  gap: 3.5rem 4.5rem;                                    /* row-gap column-gap — bumped up from before */
}

.video-item {
  display: flex;
  flex-direction: column;
}

.video-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.video-grid .video-frame {
  margin: 0; /* remove any bottom-margin your single-column .video-frame has */
}

@media (max-width: 720px) {
  .video-grid { grid-template-columns: 1fr; }
}



/* two-column lists*/

.two-col-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 3rem;
  margin: 2rem 0;
}

.list-col-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
  color: var(--ink);
}

.list-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-col li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.6rem;
  color: var(--muted);
  line-height: 1.5;
}

.list-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a1), var(--a2));
}

@media (max-width: 720px) {
  .two-col-list {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}



/* ============================================================
   MOBILE NAV — hamburger button + slide-in drawer.
   Both elements are display:none by default and only switched on
   inside the max-width:720px block near the top of this file, so
   nothing here can ever render on desktop.

   The button is position:fixed (like .theme-toggle) rather than a
   child of .nav — .nav is absolute+z-index:4 and therefore a
   stacking context, which would cap the drawer's z-index.
   ============================================================ */

/* --- Button: matches the theme-toggle pill, parked to its left --- */
.nav-toggle{
  display:none;
  width:42px; height:30px; padding:0; cursor:pointer;
  border-radius:999px;
  border:1px solid rgba(120,120,140,.28);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
  color:#2a2530;
  transition:background .4s, border-color .4s;
}
html.dark .nav-toggle{
  background:rgba(20,26,30,.5); color:#eef4f5; border-color:rgba(200,220,225,.2);
}
.nav-toggle:focus-visible{ outline:2px solid var(--a2); outline-offset:3px; }

.nt-bars{ position:relative; display:block; width:16px; height:12px; }
.nt-bars span{
  position:absolute; left:0; width:100%; height:1.5px; border-radius:2px;
  background:currentColor;
  transition:top .3s var(--ease), transform .3s var(--ease), opacity .18s var(--ease);
}
.nt-bars span:nth-child(1){ top:0; }
.nt-bars span:nth-child(2){ top:5.25px; }
.nt-bars span:nth-child(3){ top:10.5px; }

/* Open state — the three bars fold into an X. */
.nav-toggle.is-open .nt-bars span:nth-child(1){ top:5.25px; transform:rotate(45deg); }
.nav-toggle.is-open .nt-bars span:nth-child(2){ opacity:0; }
.nav-toggle.is-open .nt-bars span:nth-child(3){ top:5.25px; transform:rotate(-45deg); }

/* --- Drawer shell ---
   Sits at 9997: under .grain (9998, pointer-events:none) so the film
   grain reads across it, and under .theme-toggle (9999) so the theme
   switch stays usable while the menu is open. */
.mobile-menu{
  display:none;
  position:fixed; inset:0; z-index:9997;
  visibility:hidden;
  transition:visibility 0s linear .4s;   /* hold until the slide-out ends */
}
.mobile-menu.is-open{ visibility:visible; transition:visibility 0s; }

.mm-scrim{
  position:absolute; inset:0;
  background:rgba(5,10,12,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s var(--ease);
}
.mobile-menu.is-open .mm-scrim{ opacity:1; }

.mm-panel{
  position:absolute; top:0; left:0; bottom:0;
  width:min(270px,72vw);
  background:var(--bg);
  border-right:1px solid var(--line);
  box-shadow:30px 0 60px -30px var(--shadow);
  padding:84px 22px calc(32px + env(safe-area-inset-bottom,0px));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(-100%);
  transition:transform .4s var(--ease);
}
.mobile-menu.is-open .mm-panel{ transform:translateX(0); }

/* --- Drawer contents --- */
.mm-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
  margin:0 0 18px 12px;
}
.mm-nav{ display:flex; flex-direction:column; gap:2px; }

.mm-link{
  display:block; padding:11px 12px; border-radius:10px;
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:19px; letter-spacing:-.01em; color:var(--ink);
  transition:background .25s var(--ease);
}
.mm-link:hover, .mm-link:active{
  background:color-mix(in oklab, var(--a1) 8%, var(--bg));
}

.mm-row{ display:flex; align-items:center; gap:4px; }
.mm-row .mm-link{ flex:1 1 auto; }

.mm-caret{
  flex:0 0 auto; width:38px; height:38px;
  display:grid; place-items:center;
  background:none; border:0; border-radius:10px; padding:0;
  color:var(--muted); cursor:pointer;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.mm-caret:hover, .mm-caret:active{
  color:var(--ink); background:color-mix(in oklab, var(--a1) 8%, var(--bg));
}
.mm-caret:focus-visible{ outline:2px solid var(--a2); outline-offset:2px; }
.mm-caret svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.mm-caret[aria-expanded="true"] svg{ transform:rotate(180deg); }

.mm-sub{
  overflow:hidden; max-height:0;
  transition:max-height .35s var(--ease);
}
.mm-sub-inner{
  display:flex; flex-direction:column;
  margin:2px 0 10px 22px; padding-left:12px;
  border-left:1px solid var(--line);
}
.mm-sub a{
  padding:8px 10px; border-radius:8px;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.02em;
  color:var(--muted);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.mm-sub a:hover, .mm-sub a:active{
  color:var(--ink); background:color-mix(in oklab, var(--a1) 8%, var(--bg));
}

/* Staggered entrance for the top-level items, mirroring .rise/.d1–.d4. */
.mm-nav > *{
  opacity:0; transform:translateX(-16px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.mobile-menu.is-open .mm-nav > *{ opacity:1; transform:none; }
.mobile-menu.is-open .mm-nav > *:nth-child(1){ transition-delay:.10s; }
.mobile-menu.is-open .mm-nav > *:nth-child(2){ transition-delay:.16s; }
.mobile-menu.is-open .mm-nav > *:nth-child(3){ transition-delay:.22s; }
.mobile-menu.is-open .mm-nav > *:nth-child(4){ transition-delay:.28s; }
.mobile-menu.is-open .mm-nav > *:nth-child(5){ transition-delay:.34s; }

/* Scroll lock for the page behind the open drawer. */
body.menu-open{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .mm-panel, .mm-scrim, .nt-bars span{ transition:none !important; }
  .mm-nav > *{
    opacity:1 !important; transform:none !important;
    transition:none !important; transition-delay:0s !important;
  }
}


/* Reveal the mobile nav. This MUST come after the .nav-toggle /
   .mobile-menu display:none defaults above — media queries add no
   specificity, so whichever rule sits later in the file wins. */
@media (max-width:720px){
  .nav-toggle { display:grid; place-items:center; }
  .mobile-menu { display:block; }
}


  /* Lift the nav cluster above the drawer (9997) so the avatar, "Home",
     and the hamburger stay visible and tappable while it's open — but
     keep it below the theme toggle (9999). pointer-events:none stops
     the nav's full-width box from swallowing taps aimed at the toggle;
     .nav-left switches them back on for the cluster itself. */
  .nav { z-index:9998; pointer-events:none; }
  .nav-left { pointer-events:auto; }



/* Project screenshot carousel */
.proj-carousel { max-width: 860px; margin: 2.5rem auto; }

.pc-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow);
}

.pc-slides { position: relative; width: 100%; height: 100%; }

.pc-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.pc-slide.active { opacity: 1; pointer-events: auto; }

.pc-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg);
  transform-origin: center center;
  transition: transform 0.25s var(--ease);
}

.pc-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.pc-frame { flex: 1 1 auto; }

.pc-caption {
  margin: 1rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  min-height: 1.4em;
}

.pc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 0.75rem; }

.pc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.pc-dot.active { background: linear-gradient(90deg, var(--a1), var(--a2)); transform: scale(1.3); }



.pc-zoom-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.pc-zoom-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  color: var(--ink);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}

.pc-zoom-btn:hover { background: color-mix(in oklab, var(--a1) 15%, var(--bg)); border-color: var(--ink); }




@media (max-width: 720px) {
  .cnav { width: 34px; height: 34px; font-size: 0.85rem; }
  .pc-frame { aspect-ratio: 4 / 3; }
}




.proj-carousel.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  max-width: none;
  margin: 0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
}

.proj-carousel.is-fullscreen .pc-wrap {
  width: 100%;
  max-width: 1400px;
}

.proj-carousel.is-fullscreen .pc-frame {
  aspect-ratio: unset;
  width: 100%;
  height: 80vh;
  box-shadow: none;
}

.proj-carousel.is-fullscreen .pc-caption {
  color: #fff;
}