:root{
  /* primitives — the only hexes */
  --cream:#F8F2E0; --stone:#EBECE6; --ice:#E1FAFF; --sage:#D0E3CC; --peach:#FEEDE1;
  --periwinkle:#B8B8FF; --periwinkle-pale:#F8F7FF;
  --purple-deep:#3F3A4C; --purple-mid:#57506B; --purple-muted:#837C99;
  --ivory:#FFFDF8; --ivory-cool:#F8FBF9; --ivory-warm:#FFF3E4;
  --rust:#B5390D; --mint-deep:#5FA08F; --blue-deep:#6E93C4;
  --lime:#C1FBA4; --sky:#C0E4F6; --blush:#F8E7F8;
  --white:#fff; --white-warm:#FFF9EC;
  --red:#C23B4A; --black:#000;
  /* semantic aliases */
  --color-text:var(--purple-deep);
  --color-text-soft:var(--purple-mid);
  --color-text-muted:var(--purple-muted);
  --color-surface:var(--ivory);
  --color-line:color-mix(in srgb, var(--periwinkle) 26%, var(--ivory));
  --color-emphasis:var(--rust);
  --color-danger:var(--red);
  --serif:"Fraunces", Georgia, serif;
  --sans:"DM Sans", -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--ivory); color:var(--purple-deep); font-family:var(--sans);
  font-size:17px; line-height:1.7; overflow-x:hidden; overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sage); color:var(--purple-deep)}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
section{scroll-margin-top:24px}

/* ============ HERO ============ */
#hero{position:relative; height:100vh; height:100svh; height:100dvh; min-height:600px; overflow:hidden; cursor:default}
html[data-sws-operator] #hero{
  height:calc(100svh - var(--sws-operator-h, 0px));
  min-height:calc(600px - var(--sws-operator-h, 0px));
}
.hero-pane{position:absolute; inset:0}
.pane-left{ /* base pane, visible left of the divider — code theme */
  z-index:1;
  background:
    radial-gradient(55% 45% at 12% 16%, color-mix(in srgb, var(--ice) 55%, transparent), transparent 65%),
    radial-gradient(45% 40% at 28% 88%, color-mix(in srgb, var(--stone) 60%, transparent), transparent 62%),
    radial-gradient(38% 38% at 55% 8%, color-mix(in srgb, var(--periwinkle) 50%, transparent), transparent 60%),
    var(--ivory-cool);
}
.pane-right{ /* clipped on top, visible right of the divider — warm serif theme */
  z-index:2;
  background:
    radial-gradient(55% 50% at 86% 14%, color-mix(in srgb, var(--sage) 88%, transparent), transparent 62%),
    radial-gradient(50% 46% at 78% 86%, color-mix(in srgb, var(--peach) 82%, transparent), transparent 60%),
    radial-gradient(42% 42% at 62% 42%, color-mix(in srgb, var(--periwinkle) 55%, transparent), transparent 58%),
    var(--ivory-warm);
  clip-path:inset(0 0 0 50%);
  will-change:clip-path;
}
.pane-right::before{
  content:""; position:absolute; inset:-25%; pointer-events:none; z-index:0;
  background:conic-gradient(from 200deg at 68% 46%,
    color-mix(in srgb, var(--sage) 50%, transparent),
    color-mix(in srgb, var(--peach) 42%, transparent),
    color-mix(in srgb, var(--stone) 32%, transparent),
    color-mix(in srgb, var(--periwinkle) 40%, transparent),
    color-mix(in srgb, var(--sage) 50%, transparent));
  animation:playSpin 32s linear infinite;
  opacity:.62;
}
.pane-left::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--purple-deep) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--purple-deep) 4.5%, transparent) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(75% 75% at 50% 45%, var(--black) 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(75% 75% at 50% 45%, var(--black) 30%, transparent 100%);
}
.hero-inner{position:absolute; inset:0}

/* wordmark + email chip */
.hero-mail{
  position:absolute; top:26px; right:38px; z-index:5; font-size:.8rem; font-family:var(--mono);
  padding:9px 16px; border-radius:999px; border:1px solid color-mix(in srgb, var(--purple-deep) 16%, transparent);
  background:color-mix(in srgb, var(--white) 55%, transparent); backdrop-filter:blur(6px);
  transition:translate .25s ease, background .25s ease;
}
.hero-mail:hover{translate:0 -2px; background:var(--white)}

/* side statements */
.hero-copy{position:absolute; top:33%; z-index:8}
.copy-left{left:5.5%; width:min(30vw, calc(50vw - 5.5vw - 17vw - 20px), 520px)}
.copy-right{right:5.5%; text-align:right; width:min(30vw, calc(50vw - 5.5vw - 17vw - 20px), 480px)}
.pane-right .copy-right{z-index:8; text-shadow:0 1px 12px color-mix(in srgb, var(--white-warm) 92%, transparent)}
.pane-right .copy-right::before{
  content:""; position:absolute; inset:-22px -28px -16px;
  background:radial-gradient(ellipse at 85% 35%, color-mix(in srgb, var(--ivory-warm) 94%, transparent) 0%, color-mix(in srgb, var(--ivory-warm) 55%, transparent) 55%, transparent 78%);
  z-index:-1; pointer-events:none;
}
.hero-h1-line{display:block; white-space:nowrap}
.hero-eyebrow{
  display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; padding:7px 14px; border-radius:999px; margin-bottom:20px;
}
.pane-left .copy-left .hero-eyebrow{background:var(--ice)}
.pane-left .copy-right .hero-eyebrow{background:transparent; border:1px dashed color-mix(in srgb, var(--purple-deep) 25%, transparent); opacity:.45}
.pane-right .copy-right .hero-eyebrow{background:var(--sage)}
.pane-right .copy-left .hero-eyebrow{background:transparent; border:1px dashed color-mix(in srgb, var(--purple-deep) 25%, transparent); opacity:.45}
.hero-h1{font-size:clamp(1.35rem,2.6vw,3.05rem); line-height:1.06; margin-bottom:18px}
.pane-right .hero-h1{font-family:var(--serif); font-weight:560; letter-spacing:-.01em; font-size:clamp(1.35rem,2.7vw,3.2rem)}
.pane-left .hero-h1{font-family:var(--mono); font-weight:600; font-size:clamp(1.2rem,2.35vw,2.75rem)}
.hero-sub{font-size:clamp(.95rem,1.15vw,1.1rem); color:var(--purple-mid); line-height:1.65}
.pane-left .hero-sub, .pane-right .sub-mono{font-family:var(--mono); font-size:clamp(.8rem,1vw,.95rem)}
/* ghost versions (the side that belongs to the other pane) */
.pane-left .copy-right, .pane-right .copy-left{opacity:.38; filter:saturate(.4)}
/* hover fade: the non-hovered world's copy melts away (armed after the entrance anim) */
.fades-armed .hero-copy{transition:opacity 1.1s cubic-bezier(.4,0,.2,1)}
#hero.fade-right .copy-right{opacity:0}
#hero.fade-left .copy-left{opacity:0}
.pane-right .copy-left .hero-h1{font-family:var(--serif); font-weight:400}
.pane-left .copy-right .hero-h1{font-family:var(--mono); font-weight:400; font-size:clamp(1.4rem,2.5vw,2.3rem)}
.pane-left .copy-right .hero-sub{font-family:var(--mono); font-size:clamp(.8rem,1vw,.95rem)}

/* floating doodads */
.float-bit{position:absolute; font-family:var(--mono); color:var(--purple-deep); opacity:.13; font-size:1rem; z-index:1; user-select:none}
.pane-right .float-bit{font-family:var(--serif); font-style:italic}

/* portrait arch */
.portrait-frame{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:min(30vw, 52vh, 430px); aspect-ratio:900/1180; min-width:280px;
  border-radius:999px; overflow:hidden; z-index:3;
  box-shadow:0 18px 55px color-mix(in srgb, var(--purple-deep) 14%, transparent);
}
.pane-left .portrait-frame{background:linear-gradient(180deg, var(--ice), var(--stone) 90%); outline:8px solid color-mix(in srgb, var(--white) 75%, transparent); outline-offset:-2px}
.pane-right .portrait-frame{background:linear-gradient(180deg, var(--cream), var(--sage) 90%); outline:8px solid color-mix(in srgb, var(--white) 75%, transparent); outline-offset:-2px}
.portrait-frame img{width:100%; height:100%; object-fit:cover; object-position:center 16%}
.pane-left .portrait-frame img{object-position:38% 18%}
.pane-right .portrait-frame img{object-position:center 22%; animation:portraitBreath 8s ease-in-out infinite}

/* play-hard field — color bloom + photos bursting out of the oval */
.play-field{position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none}
.play-blob{
  position:absolute; left:50%; top:50%;
  border-radius:50%; filter:blur(28px);
  translate:-50% -50%;
  mix-blend-mode:multiply;
}
.play-blob--a{width:42vw; height:42vw; max-width:520px; max-height:520px; background:color-mix(in srgb, var(--sage) 85%, transparent); animation:blobDrift 9s ease-in-out infinite}
.play-blob--b{width:34vw; height:34vw; max-width:420px; max-height:420px; background:color-mix(in srgb, var(--peach) 90%, transparent); animation:blobDrift 11s ease-in-out infinite reverse}
.play-blob--c{width:28vw; height:28vw; max-width:340px; max-height:340px; background:color-mix(in srgb, var(--periwinkle) 75%, transparent); animation:blobDrift 13s ease-in-out infinite}
.play-blob--d{width:22vw; height:22vw; max-width:260px; max-height:260px; background:color-mix(in srgb, var(--stone) 70%, transparent); animation:blobDrift 10s ease-in-out infinite reverse}
.play-ribbons{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.ribbon{fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:.55}
.ribbon-a{stroke:var(--lime); stroke-width:28; stroke-dasharray:1400; animation:ribbonDraw 7s ease-in-out infinite}
.ribbon-b{stroke:var(--sky); stroke-width:22; stroke-dasharray:1400; animation:ribbonDraw 8.5s ease-in-out infinite reverse}
.ribbon-c{stroke:var(--blush); stroke-width:16; stroke-dasharray:1400; animation:ribbonDraw 6.4s ease-in-out infinite}
.play-chip{
  position:absolute; left:50%; top:50%;
  width:22px; height:22px; border-radius:6px;
  box-shadow:0 8px 18px color-mix(in srgb, var(--purple-deep) 12%, transparent);
}
.play-chip--1{background:var(--sage)}
.play-chip--2{background:var(--peach); width:16px; height:16px; border-radius:50%}
.play-chip--3{background:var(--periwinkle); width:18px; height:28px; border-radius:8px}
.play-card{
  position:absolute; left:50%; top:50%;
  margin:0; overflow:hidden; z-index:2;
  border-radius:22px;
  box-shadow:0 22px 50px color-mix(in srgb, var(--purple-deep) 20%, transparent);
  outline:6px solid color-mix(in srgb, var(--ivory) 78%, transparent);
  outline-offset:-1px;
}
.play-card img{width:100%; height:100%; object-fit:cover; animation:cardFloat 5.2s ease-in-out infinite}
.play-card--lg{width:min(16.5vw,200px)}
.play-card--md{width:min(12.5vw,152px); border-radius:16px; outline-width:4px}
.play-card--sm{width:min(10vw,120px); border-radius:14px; outline-width:3px}
.play-chip{display:none}
.play-card--zipline{aspect-ratio:4/3; transform:translate(calc(-50% + 24vw), calc(-50% - 34vh)) rotate(-6deg)}
.play-card--visor{aspect-ratio:3/4; transform:translate(calc(-50% + 36.5vw), calc(-50% - 35vh)) rotate(5deg)}
.play-card--shipmates{aspect-ratio:4/3; transform:translate(calc(-50% + 44.8vw), calc(-50% - 41vh)) rotate(4deg)}
.play-card--horror{aspect-ratio:1; transform:translate(calc(-50% + 13.5vw), calc(-50% - 35vh)) rotate(-5deg)}
.play-card--horror img{object-position:center 20%}
.play-card--joker{aspect-ratio:3/4; transform:translate(calc(-50% + 17.2vw), calc(-50% + 36vh)) rotate(6deg)}
.play-card--eyepatch{aspect-ratio:1; transform:translate(calc(-50% + 30vw), calc(-50% - 17.5vh)) rotate(-4deg)}
.play-card--eyepatch img{object-position:center 28%; filter:brightness(1.18) contrast(1.06)}
.play-card--track{aspect-ratio:4/3; transform:translate(calc(-50% + 18vw), calc(-50% + 17vh)) rotate(3deg)}
.play-card--atv{aspect-ratio:3/4; transform:translate(calc(-50% + 27.6vw), calc(-50% + 34vh)) rotate(-5deg)}
.play-card--dive{aspect-ratio:3/4; transform:translate(calc(-50% + 40.6vw), calc(-50% + 30.5vh)) rotate(5deg)}
.play-card--navy{aspect-ratio:3/4; transform:translate(calc(-50% + 45.3vw), calc(-50% - 22vh)) rotate(4deg)}
@keyframes cardFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.play-chip--1{transform:translate(calc(-50% + 6vw), calc(-50% - 8vh)) rotate(22deg)}
.play-chip--2{transform:translate(calc(-50% + 8vw), calc(-50% + 8vh)) rotate(-18deg)}
.play-chip--3{transform:translate(calc(-50% + 4vw), calc(-50% + 16vh)) rotate(12deg)}
@keyframes portraitBreath{
  0%,100%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.045) translateY(-7px)}
}
@keyframes playSpin{to{transform:rotate(360deg)}}
@keyframes blobDrift{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-42%,-58%) scale(1.18)}
}
@keyframes ribbonDraw{
  0%{stroke-dashoffset:1400; opacity:.15}
  35%{opacity:.6}
  70%{stroke-dashoffset:0; opacity:.5}
  100%{stroke-dashoffset:-400; opacity:.2}
}

/* divider */
#divider{
  position:absolute; top:0; bottom:0; left:50%; width:0; z-index:6; pointer-events:none;
}
#divider::before{
  content:""; position:absolute; top:0; bottom:0; left:-1px; width:2px;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--purple-deep) 35%, transparent) 18%, color-mix(in srgb, var(--purple-deep) 35%, transparent) 82%, transparent);
}
#divider-handle{display:none}
.hero-hint{
  position:absolute; bottom:30px; left:38px; z-index:5; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--purple-mid);
  display:flex; align-items:center; gap:12px;
  background:color-mix(in srgb, var(--white) 55%, transparent); backdrop-filter:blur(4px);
  padding:8px 14px; border-radius:999px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s ease, visibility .6s ease;
}
.hero-hint.is-visible{opacity:1; visibility:visible; pointer-events:auto}
button.hero-hint{
  border:none; margin:0; cursor:pointer; font:inherit; color:inherit; text-align:left;
}
button.hero-hint:focus-visible{
  outline:2px solid var(--purple-deep); outline-offset:3px;
}
.hero-hint .scroll-line{width:1px; height:34px; background:color-mix(in srgb, var(--purple-deep) 30%, transparent); overflow:hidden; position:relative}
.hero-hint .scroll-line::after{content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--purple-deep); animation:scrollDrip 1.8s ease-in-out infinite}
@keyframes scrollDrip{0%{top:-100%}55%{top:100%}100%{top:100%}}

/* ============ SIDE NAV ============ */
#sidenav{
  position:fixed; top:var(--sws-operator-h, 0px); height:calc(100vh - var(--sws-operator-h, 0px)); z-index:50;
  left:max(30px, calc(50vw - 660px));
  display:flex; flex-direction:column; justify-content:center; gap:0;
  opacity:0; visibility:hidden; transform:translateX(-26px);
  width:220px;
}
html.hash-pending #sidenav{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none;
}
.nav-avatar{
  width:96px; height:110px; border-radius:999px 999px 16px 16px; overflow:hidden;
  background:linear-gradient(160deg, var(--ice), var(--periwinkle) 55%, var(--sage));
  outline:5px solid color-mix(in srgb, var(--white) 80%, transparent); outline-offset:-1px;
  box-shadow:0 10px 26px color-mix(in srgb, var(--purple-deep) 12%, transparent);
  margin-bottom:20px; flex-shrink:0;
}
.nav-avatar img{width:100%; height:100%; object-fit:cover; object-position:center 12%}
.nav-name{font-family:var(--serif); font-style:italic; font-weight:520; font-size:1.35rem; line-height:1.2; margin-bottom:34px; display:block}
.nav-name em{font-style:normal; display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; line-height:1.45; text-transform:uppercase; color:var(--purple-muted); margin-top:8px; font-weight:400}
#sidenav ul{list-style:none; display:flex; flex-direction:column; gap:4px}
#sidenav li a{
  display:flex; align-items:center; gap:14px; padding:9px 0;
  color:var(--purple-muted); transition:color .3s ease;
}
.nav-dot{width:9px; height:9px; border-radius:50%; background:var(--color-line); transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease; flex-shrink:0}
.nav-label{font-size:.92rem; letter-spacing:.02em; transition:transform .3s ease}
#sidenav li a:hover{color:var(--purple-deep)}
#sidenav li.active a{color:var(--purple-deep)}
#sidenav li.active .nav-label{font-weight:600; transform:translateX(3px)}
#sidenav li.active:nth-of-type(1) .nav-dot{background:var(--sage); transform:scale(1.5)}
#sidenav li.active:nth-of-type(2) .nav-dot{background:var(--peach); transform:scale(1.5)}
#sidenav li.active:nth-of-type(3) .nav-dot{background:var(--rust); transform:scale(1.5)}
#sidenav li.active:nth-of-type(4) .nav-dot{background:var(--ice); transform:scale(1.5)}
#sidenav li.active:nth-of-type(5) .nav-dot{background:var(--stone); transform:scale(1.5)}

/* ============ CONTENT LAYOUT ============ */
.content{
  width:min(690px, 100%);
  margin-left:clamp(300px, calc(50vw - 345px + 90px), 999px);
  padding:0 28px;
}
@media (max-width:1180px){ .content{margin-left:auto; margin-right:auto} }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--purple-muted);
  margin-bottom:26px;
}
.eyebrow::before{content:none; display:none; width:0; height:0}
h2{font-family:var(--serif); font-weight:560; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.15; letter-spacing:-.01em; margin-bottom:26px}
.section{padding:110px 0}
p + p{margin-top:1.2em}
.hl{
  background:linear-gradient(120deg, var(--sage), var(--sage)) no-repeat 0 100%;
  background-size:100% .45em; padding:0 .1em; font-weight:600;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hl-ice{background-image:linear-gradient(120deg, var(--ice), var(--ice))}
.hl-stone{background-image:linear-gradient(120deg, var(--stone), var(--stone))}
.hl-peach{background-image:linear-gradient(120deg, var(--peach), var(--peach))}

/* ============ ABOUT ============ */
#about{padding-top:130px}
.about-lede{font-size:1.06rem; color:var(--purple-mid)}
.things-label{margin:54px 0 8px}
.range-dek{font-size:.95rem; line-height:1.55; color:var(--purple-muted); max-width:36em; margin:0 0 4px}
.cards{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px}
.card{
  border-radius:22px; padding:26px 26px 24px; position:relative;
  transition:translate .35s cubic-bezier(.34,1.3,.64,1), box-shadow .35s ease;
}
.card:hover{translate:0 -5px; box-shadow:0 18px 40px color-mix(in srgb, var(--purple-deep) 10%, transparent)}
.card-sage{background:linear-gradient(145deg, color-mix(in srgb, var(--sage) 88%, var(--ivory)), var(--sage))}
.card-ice{background:linear-gradient(145deg, color-mix(in srgb, var(--ice) 88%, var(--ivory)), var(--ice))}
.card-peach{background:linear-gradient(145deg, color-mix(in srgb, var(--peach) 88%, var(--ivory)), var(--peach))}
.card-stone{background:linear-gradient(145deg, color-mix(in srgb, var(--stone) 88%, var(--ivory)), var(--stone)); outline:1px solid var(--color-line); outline-offset:-1px}
.card-cream{background:linear-gradient(145deg, color-mix(in srgb, var(--cream) 88%, var(--ivory)), var(--cream))}
.card-tag{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; opacity:.55; display:block; margin-bottom:12px}
.card h3{font-family:var(--serif); font-weight:600; font-size:1.25rem; margin-bottom:10px; letter-spacing:-.005em}
.card p{font-size:.92rem; line-height:1.6; color:var(--purple-mid)}
.card-inline-link{
  color:var(--purple-deep); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--purple-deep) 30%, transparent);
}
.card-inline-link:hover{border-bottom-color:var(--purple-deep)}
.card-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-family:var(--mono); font-size:.75rem; font-weight:600; color:var(--purple-deep);
  border-bottom:1.5px solid color-mix(in srgb, var(--purple-deep) 35%, transparent); padding-bottom:2px;
  transition:gap .25s ease;
}
.card-link:hover{gap:10px}
a.card-door{
  display:block; padding:0; overflow:hidden; color:inherit; text-decoration:none;
}
a.card-door .card-cover{
  display:block; position:relative;
  aspect-ratio:3/2; overflow:hidden;
}
a.card-door .card-cover img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
a.card-door .card-pad{display:block; padding:26px 26px 24px}
.card-year{
  display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--purple-muted); margin-top:12px;
}
.card-skills{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:12px;
}
.card-skills .chip{
  font-size:.62rem; padding:5px 10px;
}
a.card-door:focus-visible{outline:2px solid var(--purple-deep); outline-offset:3px}
#portfolio .card:last-child{grid-column:auto}
#portfolio .about-lede{margin-bottom:22px}
#experience .about-lede + .about-lede{margin-top:12px}
#experience .xp-list{margin-top:10px}
.portfolio-actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:28px}
.portfolio-actions .portfolio-all[hidden]{display:none !important}
.portfolio-all{margin-bottom:0}

/* Homepage doors: 4 on desktop, 2 on mobile. View-all when more exist — always, not after unlock. */
@media (min-width:901px){
  #portfolio-doors .cards > .card-door:nth-child(n+5){ display:none }
  #portfolio[data-door-count="0"] .portfolio-all:not([hidden]),
  #portfolio[data-door-count="1"] .portfolio-all:not([hidden]),
  #portfolio[data-door-count="2"] .portfolio-all:not([hidden]),
  #portfolio[data-door-count="3"] .portfolio-all:not([hidden]),
  #portfolio[data-door-count="4"] .portfolio-all:not([hidden]){
    display:none !important;
  }
}
@media (max-width:900px){
  #portfolio-doors .cards > .card-door:nth-child(n+3){ display:none }
  #portfolio[data-door-count="0"] .portfolio-all:not([hidden]),
  #portfolio[data-door-count="1"] .portfolio-all:not([hidden]),
  #portfolio[data-door-count="2"] .portfolio-all:not([hidden]){
    display:none !important;
  }
}

/* ============ EXPERIENCE ============ */
.xp-list{display:flex; flex-direction:column}
.xp-item{
  display:grid; grid-template-columns:150px 1fr; gap:26px;
  padding:34px 0; border-top:1px solid var(--color-line);
}
.xp-item:last-of-type{border-bottom:1px solid var(--color-line)}
.xp-when{font-family:var(--mono); font-size:.76rem; color:var(--purple-muted); padding-top:6px; line-height:1.5}
.xp-role{font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:-.005em}
.xp-co{font-size:.9rem; color:var(--purple-muted); margin-top:2px; margin-bottom:12px}
.xp-desc{font-size:.95rem; color:var(--purple-mid); line-height:1.55}
.xp-item > div{min-width:0}
.xp-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.xp-explore{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px}
.xp-explore-label{font-family:var(--mono); font-size:.72rem; color:var(--purple-muted); margin-right:2px}
.xp-explore [data-sws-mode="linkPairs"]{display:contents}
.chip{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:.72rem; font-weight:500; padding:6px 13px;
  border-radius:999px; white-space:nowrap; max-width:100%; box-sizing:border-box;
}
a.chip{
  color: inherit;
  transition: background .2s ease, color .2s ease, outline-color .2s ease, translate .2s ease;
}
a.chip:hover, a.chip:focus-visible{
  background: var(--periwinkle);
  color: var(--purple-deep);
  outline: 1px solid color-mix(in srgb, var(--purple-deep) 22%, transparent);
  outline-offset: -1px;
  translate: 0 -2px;
}
.chip-sage{background:var(--sage)} .chip-ice{background:var(--ice)}
.chip-stone{background:var(--stone); outline:1px solid var(--color-line); outline-offset:-1px} .chip-peach{background:var(--peach)}
.chip-cream{background:var(--cream)} .chip-periwinkle{background:var(--periwinkle)}
.edu{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px}
.edu-card{border:1.5px solid var(--color-line); border-radius:20px; padding:22px 24px; transition:translate .3s ease}
.edu-card:hover{translate:0 -3px}
.edu-deg{font-family:var(--serif); font-weight:600; font-size:1.05rem; line-height:1.35}
.edu-school{font-size:.88rem; color:var(--purple-muted); margin-top:6px}
.edu-meta{font-family:var(--mono); font-size:.7rem; color:var(--purple-muted); margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
.edu-meta span{background:var(--ivory); border:1px solid var(--color-line); padding:3px 10px; border-radius:999px}

/* ============ JOURNEY ============ */
.timeline{position:relative; padding-left:52px; margin-top:14px}
.timeline-track, .timeline-line{position:absolute; left:12px; top:6px; bottom:6px; width:3px; border-radius:3px}
.timeline-track{background:var(--color-line); opacity:.6}
.timeline-line{
  background:linear-gradient(180deg, var(--sage), var(--peach), var(--cream), var(--stone), var(--ice), var(--periwinkle));
  transform-origin:top; transform:scaleY(0);
}
.tl-item{position:relative; padding:26px 0; --dotscale:1}
.tl-item::before{
  content:""; position:absolute; left:-44.5px; top:36px; width:12px; height:12px;
  border-radius:50%; background:var(--dot,var(--sage)); outline:5px solid var(--ivory);
  transform:scale(var(--dotscale,1));
}
.tl-item:nth-child(odd) .tl-year{background:var(--cream)}
.tl-year{
  display:inline-block; font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border-radius:999px;
  background:var(--tag,var(--cream)); margin-bottom:12px;
}
.tl-item h3{font-family:var(--serif); font-weight:600; font-size:1.35rem; margin-bottom:10px; letter-spacing:-.005em}
.tl-item p{font-size:.96rem; color:var(--purple-mid)}
.tl-item strong{color:var(--purple-deep)}

/* ============ CONTACT ============ */
#contact{padding:130px 0 70px; text-align:left; min-height:80vh}
.contact-big{font-family:var(--serif); font-weight:560; font-size:clamp(2.1rem,4.4vw,3.2rem); line-height:1.12; letter-spacing:-.015em; margin-bottom:36px}
.contact-keep{white-space:nowrap}
.contact-big em{font-style:italic; color:var(--rust); white-space:nowrap}
.contact-sub{color:var(--purple-mid); max-width:520px; margin-bottom:36px}
.contact-row{
  display:grid; grid-template-columns:1fr; gap:14px;
  width:100%; max-width:100%;
}
.contact-socials{
  display:flex; flex-wrap:wrap; gap:14px;
  max-width:100%; min-width:0;
}
.contact-row .btn-ghost{background:var(--white)}
.contact-row .contact-email{
  display:flex; width:100%; box-sizing:border-box; justify-content:center;
}
@media (max-width:900px){
  .contact-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-auto-rows:1fr;
    gap:12px;
  }
  .contact-socials{display:contents}
  .contact-row .btn{
    width:100%; min-height:3.1rem;
    justify-content:center; align-items:center;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:clamp(0.72rem, 2.8vw, 0.82rem);
    padding:14px 12px;
    gap:8px;
  }
  .contact-row .btn svg{width:15px; height:15px; flex-shrink:0}
  .contact-row .contact-email{
    font-size:clamp(0.64rem, 2.35vw, 0.78rem);
    letter-spacing:-0.02em;
    padding:14px 10px;
  }
}
@media (max-width:380px){
  .contact-row{gap:10px}
  .contact-row .btn{
    min-height:2.95rem;
    font-size:.7rem;
    padding:12px 8px;
    gap:6px;
  }
  .contact-row .contact-email{font-size:.64rem}
}
@media (min-width:901px){
  .contact-row{
    grid-template-columns:max-content;
    width:max-content;
  }
}
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.82rem;
  font-weight:600; padding:15px 26px; border-radius:999px;
  transition:translate .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease, background .3s ease;
}
.btn:hover{translate:0 -3px}
.btn svg{width:17px; height:17px; flex-shrink:0}
.btn-primary{background:var(--purple-deep); color:var(--white-warm); box-shadow:0 10px 26px color-mix(in srgb, var(--purple-deep) 25%, transparent)}
.btn-primary:hover{box-shadow:0 16px 34px color-mix(in srgb, var(--purple-deep) 30%, transparent)}
.btn-ghost{border:1.5px solid color-mix(in srgb, var(--purple-deep) 22%, transparent); background:transparent}
.btn-ghost:hover{background:var(--white)}
footer{
  margin-top:90px; padding:26px 0 34px; border-top:1px solid var(--color-line);
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
footer p{font-family:var(--mono); font-size:.7rem; color:var(--purple-muted)}

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  #sidenav{display:none}
}
/* shorter laptop screens: tighten the side nav so nothing clips */
@media (min-width:1181px) and (max-height:820px){
  .nav-avatar{width:80px; height:92px; margin-bottom:16px}
  .nav-name{margin-bottom:22px; font-size:1.25rem}
  #sidenav li a{padding:7px 0}
}
@media (min-width:1181px) and (max-height:680px){
  .nav-avatar{width:56px; height:64px; outline-width:4px; margin-bottom:12px}
  .nav-name{font-size:1.15rem; margin-bottom:16px}
  .nav-name em{display:none}
  #sidenav li a{padding:4px 0}
}
@media (max-width:1180px){
  .copy-left,.copy-right{width:min(38vw, calc(50vw - 5.5vw - 14vw - 16px))}
  .hero-h1{font-size:clamp(1.15rem,2.4vw,2.2rem)}
  .pane-left .hero-h1{font-size:clamp(1.05rem,2.15vw,1.95rem)}
  .pane-right .hero-h1{font-size:clamp(1.15rem,2.35vw,2.15rem)}
  .play-card--lg{width:min(18vw,160px)}
  .play-card--md{width:min(14vw,128px)}
  .play-card--sm{width:min(11vw,100px)}
  .play-card--horror{transform:translate(calc(-50% + 6vw), calc(-50% - 37vh)) rotate(-5deg)}
  .play-card--zipline{transform:translate(calc(-50% + 20vw), calc(-50% - 38vh)) rotate(-6deg)}
  .play-card--eyepatch{transform:translate(calc(-50% + 14vw), calc(-50% - 10vh)) rotate(-4deg)}
  .play-card--visor{transform:translate(calc(-50% + 33vw), calc(-50% - 28vh)) rotate(5deg)}
  .play-card--shipmates{transform:translate(calc(-50% + 46vw), calc(-50% - 33vh)) rotate(4deg)}
  .play-card--track{transform:translate(calc(-50% + 30vw), calc(-50% + 12vh)) rotate(3deg)}
  .play-card--navy{transform:translate(calc(-50% + 52vw), calc(-50% - 5vh)) rotate(4deg)}
  .play-card--joker{transform:translate(calc(-50% + 4vw), calc(-50% + 36vh)) rotate(6deg)}
  .play-card--atv{transform:translate(calc(-50% + 18vw), calc(-50% + 32vh)) rotate(-5deg)}
  .play-card--dive{transform:translate(calc(-50% + 46vw), calc(-50% + 36vh)) rotate(5deg)}
}
@media (max-width:900px){
  .hero-copy{top:12%; z-index:8}
  .copy-left{left:4%; width:calc(50vw - 4% - min(24vw, 130px) - 10px); top:12%}
  .copy-right{right:4%; width:calc(50vw - 4% - min(24vw, 130px) - 10px); top:12%; bottom:auto}
  .hero-h1{font-size:clamp(.78rem,2.9vw,1.25rem)}
  .pane-left .hero-h1{font-size:clamp(.72rem,2.6vw,1.15rem)}
  .pane-left .copy-right .hero-h1{font-size:clamp(.68rem,2.3vw,1.05rem)}
  .pane-right .hero-h1{font-size:clamp(.76rem,2.8vw,1.2rem)}
  .hero-sub{font-size:.78rem; line-height:1.45}
  .pane-left .hero-sub, .pane-left .copy-right .hero-sub, .pane-right .sub-mono{font-size:.68rem}
  .hero-eyebrow{margin-bottom:10px; padding:5px 11px; font-size:.64rem}
  .float-bit{display:none}
  .play-card--lg{width:min(30vw,170px)}
  .play-card--md{width:min(22vw,120px)}
  .play-card--sm{display:none}
  .play-card--zipline{transform:translate(calc(-50% + 6vw), calc(-50% - 25vh)) rotate(-6deg)}
  .play-card--eyepatch{transform:translate(calc(-50% + 36vw), calc(-50% - 44vh)) rotate(-4deg)}
  .play-card--track{transform:translate(calc(-50% + 38vw), calc(-50% - 6vh)) rotate(3deg)}
  .play-card--joker{transform:translate(calc(-50% + 2vw), calc(-50% + 36vh)) rotate(6deg)}
  .play-card--atv{transform:translate(calc(-50% + 28vw), calc(-50% + 40vh)) rotate(-5deg)}
  .play-card--dive{transform:translate(calc(-50% + 36vw), calc(-50% + 18vh)) rotate(5deg)}
  .play-blob{filter:blur(22px)}
  .portrait-frame{width:min(48vw,280px); min-width:200px; top:62%}
  .hero-mail{display:none}
  .hero-hint{left:24px; bottom:22px}
  .section{padding:84px 0}
  #about{padding-top:100px}
  .cards{grid-template-columns:1fr}
  .card:last-child{grid-column:auto}
  .xp-item{grid-template-columns:1fr; gap:8px; padding:28px 0}
  .edu{grid-template-columns:1fr}
  .timeline{padding-left:40px}
  .tl-item::before{left:-38.5px}
  .timeline-track,.timeline-line{left:6px}
}
/* very short phone screens: drop the taglines so nothing collides with the portrait */
@media (max-width:900px) and (max-height:640px){
  .hero-sub{display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

/* iamvjb template patches — a11y + skip + designed focus; do not invent a mobile system */
.skip{
  position:absolute; left:16px; top:16px; z-index:200;
  font-family:var(--mono); font-size:.8rem; font-weight:600;
  padding:10px 16px; border-radius:999px;
  background:var(--purple-deep); color:var(--white-warm);
  transform:translateY(-160%);
}
.skip:focus, .skip:focus-visible{ transform:none; }
:focus-visible{
  outline:2px solid var(--purple-deep);
  outline-offset:3px;
}
:focus:not(:focus-visible){ outline:none; }
.contact-row a[hidden], .card-link[hidden]{ display:none !important; }

/* ============ CHILD PAGE ============ */
/* Child pages have no sidenav — use the desktop span the home rail+column already occupy. */
body[data-page="child"] .content{
  width:min(1200px, 100%);
  margin-left:auto; margin-right:auto;
  padding:0 40px;
  display:block;
}
body[data-page="child"] .piece-band,
body[data-page="child"] .piece-h1,
body[data-page="child"] .piece-meta,
body[data-page="child"] .piece-chips,
body[data-page="child"] .piece-h2,
body[data-page="child"] .piece-block,
body[data-page="child"] .piece-attr,
body[data-page="child"] .media-hero,
body[data-page="child"] .media-caption,
body[data-page="child"] .media-split,
body[data-page="child"] .media-strip,
body[data-page="child"] .media-pair,
body[data-page="child"] .piece-steps,
body[data-page="child"] .piece-list,
body[data-page="child"] .piece-pager,
body[data-page="child"] footer{
  grid-column:1 / -1;
}
body[data-page="child"],
body[data-page="catalog"]{
  overflow-x:clip;
}
.child-chrome{
  position:sticky; top:var(--sws-operator-h, 0px); z-index:30;
  background:var(--ivory); border-bottom:1px solid var(--color-line);
}
.child-chrome-inner{
  width:min(1200px, 100%); margin:0 auto; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between;
}
.child-chrome-nav{
  font-family:var(--mono); font-size:.74rem; color:var(--purple-muted);
  display:inline-flex; align-items:center; min-height:44px;
}
.child-chrome-nav:hover, .child-chrome-nav:focus-visible{ color:var(--purple-deep) }
.piece-band{
  width:100%; aspect-ratio:2.35 / 1; height:auto;
  min-height:180px; max-height:340px;
  border-radius:22px; overflow:hidden; margin:40px 0 36px;
}
.piece-band img{width:100%; height:100%; object-fit:cover}
.piece-h1{
  font-family:var(--serif); font-weight:560;
  font-size:clamp(2.15rem, 3.2vw, 3.35rem); line-height:1.12;
  letter-spacing:-.01em; margin-bottom:16px;
  scroll-margin-top:64px;
}
.piece-meta{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--purple-muted); margin-bottom:28px;
  display:flex; gap:12px; flex-wrap:wrap;
}
.piece-slot{ font-size:1.02rem; color:var(--purple-mid); margin-bottom:1.15em }
.piece-slot-label{
  display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--purple-muted); margin-bottom:8px;
}
.piece-chips{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:40px 0 16px;
}
.piece-chips .chip{
  display:inline-flex; align-items:center;
  min-height:32px; white-space:normal;
}
.piece-pager{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:24px;
  margin:8px 0 24px;
  padding-top:4px;
  border-top:1px solid var(--color-line);
  font-family:var(--mono); font-size:.82rem; font-weight:600;
}
.piece-pager a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--purple-deep);
}
.piece-pager-next{ margin-left:auto }
.piece-pager a:hover{ color:var(--purple-mid) }
@media (max-width:900px){
  body[data-page="child"] .content{
    display:block; padding:0 28px;
  }
  .child-chrome-inner{ padding:0 28px }
  .piece-band{
    aspect-ratio:auto; height:140px; min-height:0; max-height:none; margin:28px 0 24px;
  }
}

/* ============ CHILD MEDIA + STORY BLOCKS ============ */
body[data-page="child"] .piece-h1{ margin-top:8px }
body[data-page="child"] .piece-h2{
  font-family:var(--serif); font-size:clamp(1.35rem, 2vw, 1.6rem); font-weight:560;
  letter-spacing:0; text-transform:none; color:var(--purple-deep);
  margin:40px 0 16px;
}
body[data-page="child"] .piece-block{ margin:0 0 8px }
body[data-page="child"] .piece-lede{
  font-size:1.02rem; color:var(--purple-mid); margin:0 0 1.15em;
  max-width:40em;
}
body[data-page="child"] .piece-attr{
  font-size:.95rem; color:var(--purple-mid); margin:0 0 18px;
}

body[data-page="child"] .media-frame{
  display:block; margin:0;
  border:1px solid var(--color-line);
  background:var(--ivory);
  overflow:hidden;
}
body[data-page="child"] .media-frame img{
  width:100%; height:100%; object-fit:cover;
}
body[data-page="child"] .media-chrome{
  display:flex; align-items:center; gap:6px;
  height:28px; padding:0 12px;
  border-bottom:1px solid var(--color-line);
}
body[data-page="child"] .media-chrome i{
  width:7px; height:7px; border-radius:50%; background:var(--color-line);
}
body[data-page="child"] .media-web{
  aspect-ratio:16 / 10;
  border-radius:12px;
}
body[data-page="child"] .media-web img{ height:calc(100% - 28px) }
body[data-page="child"] .media-phone{
  aspect-ratio:9 / 19.5;
  border-radius:24px;
  max-width:220px;
}
body[data-page="child"] .media-bare{
  border-radius:12px;
}
body[data-page="child"] .media-hero{
  margin:28px 0 12px;
}
body[data-page="child"] .media-hero img{ object-fit:cover }
body[data-page="child"] .media-bare img{
  height:auto;
  object-fit:contain;
}
body[data-page="child"] .media-caption{
  font-size:.88rem; color:var(--purple-muted); margin:.55em 0 0;
}

body[data-page="child"] .media-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  align-items:center;
  margin:8px 0 28px;
}
body[data-page="child"] .media-split-flip .media-split-text{ order:-1 }
body[data-page="child"] .media-split-text .piece-lede{ margin-bottom:0 }
body[data-page="child"] .media-split .media-phone{ margin-inline:auto }

body[data-page="child"] .media-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:8px 0 28px;
}
body[data-page="child"] .media-pair-label{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--purple-muted); margin-bottom:8px;
}

body[data-page="child"] .media-strip{
  display:flex; gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:4px 40px 12px 0;
  margin:8px 0 28px;
  -webkit-overflow-scrolling:touch;
}
body[data-page="child"] .media-strip-item{
  flex:0 0 auto;
  scroll-snap-align:start;
  width:auto;
  padding:0; border:0; background:transparent;
  cursor:pointer; text-align:left;
  min-height:44px;
  color:inherit; font:inherit;
  text-decoration:none;
}
body[data-page="child"] .media-strip-item:focus-visible{
  outline:2px solid var(--purple-deep); outline-offset:4px;
}
body[data-page="child"] .media-strip-item .media-web{ width:min(320px, 70vw) }
body[data-page="child"] .media-strip-item .media-phone{ width:140px; max-width:140px }
body[data-page="child"] .media-strip-item .media-bare{ width:min(240px, 55vw) }

body[data-page="child"] .piece-steps{
  display:flex; flex-direction:column; gap:8px;
  margin:0 0 28px;
  padding:0; list-style:none;
  color:var(--purple-mid);
}
body[data-page="child"] .piece-steps li{ padding-left:0 }

body[data-page="child"] .piece-list{
  margin:0 0 28px; padding:0 0 0 1.15em;
  color:var(--purple-mid); max-width:40em;
}
body[data-page="child"] .piece-list li{ margin:0 0 .55em }
body[data-page="child"] .piece-list li:last-child{ margin-bottom:0 }

body[data-page="child"] .piece-page-lede,
body[data-page="catalog"] .piece-page-lede{
  font-size:1.08rem; color:var(--purple-deep); max-width:40em;
  margin:0 0 36px;
}
body[data-page="child"] .piece-page-lede p,
body[data-page="catalog"] .piece-page-lede p{
  margin:0 0 1em;
}
body[data-page="child"] .piece-page-lede p:last-child,
body[data-page="catalog"] .piece-page-lede p:last-child{ margin-bottom:0 }
body[data-page="child"] .piece-who{
  max-width:40em; margin:0 0 32px;
}
body[data-page="child"] .piece-who p{
  font-size:1.02rem; color:var(--purple-mid); margin:0;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

#surface-rail{
  position:sticky; top:calc(44px + var(--sws-operator-h, 0px)); z-index:31;
  background:var(--ivory);
  border-bottom:1px solid var(--color-line);
  padding:8px 28px 10px;
}
#surface-rail .surface-rail-eyebrow{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--purple-muted); margin:0 0 4px;
}
#surface-rail ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:0 12px;
}
#surface-rail li a{
  display:flex; align-items:center; gap:10px;
  min-height:44px; color:var(--purple-muted); transition:color .3s ease;
}
#surface-rail .nav-label{ display:inline-block; line-height:1.3 }
#surface-rail li a:hover{ color:var(--purple-deep) }
#surface-rail li.active a{ color:var(--purple-deep) }
#surface-rail li.active .nav-label{ font-weight:600; transform:translateX(3px) }
#surface-rail li.active:nth-of-type(1) .nav-dot{ background:var(--purple-deep); transform:scale(1.5) }
#surface-rail li.active:nth-of-type(2) .nav-dot{ background:var(--sage); transform:scale(1.5) }
#surface-rail li.active:nth-of-type(3) .nav-dot{ background:var(--peach); transform:scale(1.5) }
#surface-rail li.active:nth-of-type(4) .nav-dot{ background:var(--rust); transform:scale(1.5) }
#surface-rail li.active:nth-of-type(5) .nav-dot{ background:var(--ice); transform:scale(1.5) }
#surface-rail li.active:nth-of-type(6) .nav-dot{ background:var(--stone); transform:scale(1.5) }

#focus-rail{ display:none }

body[data-page="catalog"] .content{
  width:min(1200px, 100%);
  margin-left:auto; margin-right:auto;
  padding:40px 40px 0;
  display:block;
}
body[data-page="catalog"] .catalog-h1{
  font-family:var(--serif); font-weight:560;
  font-size:clamp(2.15rem, 3.2vw, 3.35rem); line-height:1.12;
  letter-spacing:-.01em; margin:8px 0 36px;
  scroll-margin-top:160px;
}
body[data-page="catalog"] .catalog-h1:has(+ .catalog-focus:not([hidden])){
  margin-bottom:8px;
}
.catalog-focus{
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  letter-spacing:.02em; color:var(--purple-muted);
  margin:0 0 28px;
}
.catalog-focus[hidden]{ display:none !important }
body[data-page="catalog"] .cards{
  margin:8px 0 56px;
}
body[data-page="catalog"] .cards .card:last-child{
  grid-column:auto;
}
body[data-page="catalog"] .cards .card[hidden]{ display:none }

@media (min-width:1181px){
  #surface-rail,
  #focus-rail{
    position:fixed; top:44px; height:calc(100vh - 44px);
    left:max(30px, calc(50vw - 660px));
    width:220px; z-index:40;
    display:flex; flex-direction:column; justify-content:center;
    border-bottom:none; background:transparent; padding:0;
  }
  #surface-rail ul,
  #focus-rail ul{
    list-style:none; margin:0; padding:0;
    flex-direction:column; flex-wrap:nowrap; gap:4px; display:flex;
  }
  #surface-rail li a,
  #focus-rail li a{ padding:9px 0; gap:14px; font-size:.92rem }
  #focus-rail .focus-rail-eyebrow{
    font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--purple-muted); margin:0 0 8px;
  }
  #focus-rail li a{
    display:flex; align-items:center; min-height:44px;
    color:var(--purple-muted); transition:color .3s ease;
  }
  #focus-rail li a:hover,
  #focus-rail li a:focus-visible{ color:var(--purple-deep) }
  #focus-rail [aria-current="true"]{ color:var(--purple-deep) }
  #focus-rail [aria-current="true"] .nav-label{ font-weight:600; transform:translateX(3px) }
  #focus-rail li:has([aria-current="true"]):nth-of-type(1) .nav-dot{ background:var(--purple-deep); transform:scale(1.5) }
  #focus-rail li:has([aria-current="true"]):nth-of-type(2) .nav-dot{ background:var(--purple-deep); transform:scale(1.5) }
  #focus-rail li:has([aria-current="true"]):nth-of-type(3) .nav-dot{ background:var(--sage); transform:scale(1.5) }
  #focus-rail li:has([aria-current="true"]):nth-of-type(4) .nav-dot{ background:var(--peach); transform:scale(1.5) }
  #focus-rail li:has([aria-current="true"]):nth-of-type(5) .nav-dot{ background:var(--rust); transform:scale(1.5) }
  #focus-rail li:has([aria-current="true"]):nth-of-type(6) .nav-dot{ background:var(--ice); transform:scale(1.5) }
  body[data-page="catalog"] .content{
    width:min(840px, calc(100% - 48px));
    margin-left:clamp(300px, calc(50vw - 345px + 90px), 999px);
    margin-right:auto;
    padding:40px 28px 0;
  }
  body[data-page="catalog"] .catalog-h1{ scroll-margin-top:64px }
  body[data-page="catalog"] .wayfinder{
    width:min(840px, calc(100% - 48px));
    margin-left:clamp(300px, calc(50vw - 345px + 90px), 999px);
    margin-right:auto;
    padding-left:28px; padding-right:28px;
  }
}

.wayfinder{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  width:min(1200px, 100%);
  margin:48px auto 0;
  padding:28px 40px 40px;
  border-top:1px solid var(--color-line);
  background:var(--ivory);
}
.wayfinder-eyebrow{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--purple-muted); margin:0 0 8px;
}
.wayfinder ul{ list-style:none; margin:0; padding:0 }
.wayfinder a,
.wayfinder [aria-current="page"]{
  display:flex; align-items:center;
  min-height:44px;
  font-family:var(--mono); font-size:.82rem;
}
.wayfinder a{ color:var(--purple-muted) }
.wayfinder a:hover, .wayfinder a:focus-visible{ color:var(--purple-deep) }
.wayfinder [aria-current="page"],
.wayfinder [aria-current="true"]{ color:var(--purple-deep); font-weight:600 }

.glightbox-container .goverlay{
  background:var(--ivory);
  opacity:1 !important;
}
.glightbox-container .gslide:not(.current){
  visibility:hidden;
  pointer-events:none;
  opacity:0 !important;
}
.glightbox-container .ginner-container{
  box-shadow:none;
}
.glightbox-container .gslide-media,
.glightbox-container .gslide-image,
.glightbox-clean .gslide-media{
  border-radius:22px !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
.glightbox-container .gslide-image img,
.glightbox-container .gslide-media img{
  width:auto;
  max-width:min(1400px, calc(100vw - 200px));
  height:auto;
  max-height:calc(100vh - 160px);
  object-fit:contain;
  border:0;
  border-radius:22px !important;
  -webkit-clip-path:inset(0 round 22px);
  clip-path:inset(0 round 22px);
  filter:drop-shadow(0 16px 28px color-mix(in srgb, var(--purple-deep) 16%, transparent));
}
.glightbox-clean .gslide-description{
  background:var(--ivory);
}
.glightbox-container .gslide-description p,
.glightbox-container .gdesc-inner{
  font-family:var(--sans); color:var(--purple-mid);
}
.glightbox-container.glightbox-clean .gclose,
.glightbox-container.glightbox-clean .gprev,
.glightbox-container.glightbox-clean .gnext,
.glightbox-container .gclose,
.glightbox-container .gprev,
.glightbox-container .gnext{
  position:absolute;
  width:auto; min-width:44px; min-height:44px; height:44px;
  padding:0 14px;
  font-family:var(--mono); font-size:.74rem; font-weight:600;
  color:var(--purple-deep);
  background:var(--ivory);
  background-color:var(--ivory);
  border:1px solid var(--color-line);
  border-radius:0;
  opacity:1;
  box-shadow:none;
}
.glightbox-container.glightbox-clean .gprev,
.glightbox-container .gprev{
  top:50%; left:16px; transform:translateY(-50%);
}
.glightbox-container.glightbox-clean .gnext,
.glightbox-container .gnext{
  top:50%; right:16px; transform:translateY(-50%);
}
.glightbox-container.glightbox-clean .gclose,
.glightbox-container .gclose{
  top:16px; right:16px; transform:none;
}
.glightbox-container.glightbox-clean .gclose:hover,
.glightbox-container.glightbox-clean .gprev:hover,
.glightbox-container.glightbox-clean .gnext:hover,
.glightbox-container .gclose:hover,
.glightbox-container .gprev:hover,
.glightbox-container .gnext:hover,
.glightbox-container.glightbox-clean .gclose:focus,
.glightbox-container.glightbox-clean .gprev:focus,
.glightbox-container.glightbox-clean .gnext:focus{
  background:var(--ivory);
  background-color:var(--ivory);
  color:var(--purple-deep);
  opacity:1;
  border-color:var(--purple-deep);
}
.glightbox-container .gclose svg,
.glightbox-container .gprev svg,
.glightbox-container .gnext svg{ display:none }
.glightbox-container .gcount{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  z-index:99999;
  font-family:var(--mono); font-size:.74rem; color:var(--purple-deep);
}
.glightbox-container .gbtn.focused{
  outline:2px solid var(--purple-deep); outline-offset:3px;
}

@media (max-width:900px){
  body[data-page="child"] .media-split,
  body[data-page="child"] .media-pair{
    display:block;
  }
  body[data-page="child"] .media-split-flip .media-split-text{ order:0 }
  body[data-page="child"] .media-split .media-frame{ margin-bottom:16px }
  body[data-page="child"] .media-phone{ max-width:180px }
}
@media (prefers-reduced-motion:reduce){
  body[data-page="child"] .media-strip{
    display:flex; flex-wrap:wrap;
    overflow:visible;
    scroll-snap-type:none;
    padding-inline-end:0;
  }
}

@media (max-width:900px){
  body[data-page="catalog"] .content{ padding:28px 28px 0 }
  body[data-page="catalog"] .cards{ grid-template-columns:1fr }
  .wayfinder{
    display:block;
    padding:28px 28px 40px;
  }
  .wayfinder-col + .wayfinder-col{ margin-top:28px }
}

/* ============ PORTFOLIO GATE ============ */
#portfolio-doors{ position:relative; }
/* Homepage: public door stays sharp; HD doors blur but stay clickable.
   Overlay also mounts on the homepage (view-all) and on the catalog. */
html.gate-pending #portfolio-doors .cards > .card-door:not(.card-public){
  filter:blur(14px);
  user-select:none;
}
html.gate-pending body[data-page="child"] .content,
html.gate-pending body[data-page="catalog"] .content,
html.gate-pending #surface-rail{
  user-select:none;
  filter:blur(14px);
}
html.gate-pending #surface-rail{ z-index:1 !important; }
html.gate-pending #focus-rail,
html[data-gate="locked"] #focus-rail{
  display:none !important;
}
html.gate-pending body[data-page="child"]::after,
html.gate-pending body[data-page="catalog"]::after{
  content:"";
  position:fixed; top:44px; left:0; right:0; bottom:0;
  z-index:25;
  background:color-mix(in srgb, var(--ivory) 40%, transparent);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  pointer-events:auto;
}
html.gate-pending body:has(.gate-overlay)::after{ display:none; }

.gate-overlay-page{
  position:fixed; top:44px; left:0; right:0; bottom:0;
  z-index:25;
  display:flex; align-items:center; justify-content:center;
  padding:28px 16px;
  background:color-mix(in srgb, var(--ivory) 40%, transparent);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
}
.gate-panel{
  position:relative;
  width:min(500px, 100%);
  padding:28px 26px 26px;
  border-radius:22px;
  background:var(--ivory);
  border:1px solid var(--color-line);
  box-shadow:0 18px 40px color-mix(in srgb, var(--purple-deep) 10%, transparent);
}
.gate-dismiss{
  position:absolute;
  top:12px;
  right:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--purple-muted);
  cursor:pointer;
}
.gate-dismiss:hover,
.gate-dismiss:focus-visible{
  color:var(--purple-deep);
  background:color-mix(in srgb, var(--purple-deep) 8%, transparent);
  outline:none;
}
.gate-leave-wrap{
  margin:18px 0 0;
  text-align:center;
}
.gate-leave{
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--purple-mid);
  background:transparent;
  border:0;
  padding:0.35rem 0.5rem;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:0.18em;
}
.gate-leave:hover,
.gate-leave:focus-visible{
  color:var(--purple-deep);
  outline:none;
}
.gate-lead{
  font-family:var(--serif); font-weight:560;
  font-size:1.45rem; line-height:1.2; letter-spacing:-.01em;
  margin-bottom:22px;
  text-wrap:pretty;
}
.gate-ask{
  font-size:.95rem; line-height:1.45; color:var(--purple-mid);
  margin:22px 0 0;
  text-wrap:pretty;
}
.gate-ask a{
  display:flex; width:fit-content; margin-top:10px;
  font-family:var(--mono); font-size:.8rem;
  padding:6px 12px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--purple-deep) 16%, transparent);
  background:color-mix(in srgb, var(--white) 70%, transparent);
}
.gate-ask a:hover{ background:var(--white); }
.gate-form{ display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.gate-label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--purple-muted);
}
.gate-input{
  font-family:var(--mono); font-size:16px; line-height:1.4;
  width:100%; padding:14px 16px;
  border:1.5px solid color-mix(in srgb, var(--purple-deep) 22%, transparent); border-radius:12px;
  background:var(--white); color:var(--purple-deep);
}
.gate-password-wrap{
  position:relative;
  display:block;
  width:100%;
}
.gate-password-wrap .gate-input{
  padding-right:3rem;
}
.gate-password-toggle{
  position:absolute;
  right:0.4rem;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.4rem;
  height:2.4rem;
  margin:0;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--purple-muted);
  cursor:pointer;
}
.gate-password-toggle:hover,
.gate-password-toggle:focus-visible{
  color:var(--purple-deep);
  outline:none;
  background:color-mix(in srgb, var(--purple-deep) 6%, transparent);
}
.gate-password-toggle[aria-pressed="true"]{
  color:var(--purple-deep);
}
.gate-submit{
  border:0; cursor:pointer; align-self:flex-start;
  font-family:var(--mono); font-size:.82rem;
}
.gate-submit:disabled{ opacity:.55; cursor:wait; }
.gate-error{
  font-family:var(--mono); font-size:.78rem; color:var(--red);
  margin:0;
}
@media (prefers-reduced-motion:reduce){
  html.gate-pending #portfolio-doors .cards > .card-door:not(.card-public),
  html.gate-pending body[data-page="child"] .content,
  html.gate-pending body[data-page="catalog"] .content,
  html.gate-pending #surface-rail{
    filter:none;
  }
  html.gate-pending #portfolio-doors .cards > .card-door:not(.card-public){
    opacity:.55;
  }
  html.gate-pending body[data-page="child"]::after,
  html.gate-pending body[data-page="catalog"]::after,
  .gate-overlay-page{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:color-mix(in srgb, var(--ivory) 97%, transparent);
  }
}

/* Body text links on use-case pages. Global a{color:inherit;text-decoration:none} hides them. */
.case-study :is(p, li, dd, figcaption) a[href],
body[data-page="child"] .content :is(p, .piece-lede, .piece-slot) a[href]:not(.chip){
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
  text-decoration-color: var(--periwinkle);
  transition: color .2s ease, text-decoration-color .2s ease, text-decoration-thickness .2s ease;
}
.case-study :is(p, li, dd, figcaption) a[href]:hover,
.case-study :is(p, li, dd, figcaption) a[href]:focus-visible,
body[data-page="child"] .content :is(p, .piece-lede, .piece-slot) a[href]:not(.chip):hover,
body[data-page="child"] .content :is(p, .piece-lede, .piece-slot) a[href]:not(.chip):focus-visible{
  color: var(--purple-deep);
  text-decoration-color: var(--purple-deep);
  text-decoration-thickness: 2px;
}
.case-study :is(p, li, dd, figcaption) a[href]:focus-visible,
body[data-page="child"] .content :is(p, .piece-lede, .piece-slot) a[href]:not(.chip):focus-visible{
  outline: 2px solid var(--purple-deep);
  outline-offset: 3px;
}

/* In-body sibling use-case links — hover/focus names the destination type. */
.case-study :is(p, li, dd, figcaption) a[data-tip]{
  position: relative;
}
.case-study :is(p, li, dd, figcaption) a[data-tip]::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + .45em);
  transform: translateX(-50%);
  z-index: 8;
  width: max-content;
  max-width: 22rem;
  padding: .35em .65em;
  border-radius: 8px;
  background: var(--purple-deep);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .01em;
  white-space: normal;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
@media (hover: hover){
  .case-study :is(p, li, dd, figcaption) a[data-tip]:hover::after{
    opacity: 1;
  }
}
.case-study :is(p, li, dd, figcaption) a[data-tip]:focus-visible::after{
  opacity: 1;
}
.case-study :is(p, li, dd, figcaption) a[data-tip]:focus::after{
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .case-study :is(p, li, dd, figcaption) a[data-tip]::after{
    transition: none;
  }
}

/* ============ CASE STUDY (UC-005 spine on child chrome) ============ */
body[data-page="child"]:has(.case-study),
body[data-template="for-the-team"],
body[data-template="for-the-team-alt"]{
  --s1:color-mix(in srgb, var(--blue-deep) 42%, var(--purple-deep));
  --s2:var(--rust); --s3:var(--mint-deep);
  --s1f:color-mix(in srgb, var(--ice) 72%, var(--white));
  --s2f:var(--peach); --s3f:var(--sage);
  --surface:var(--ivory); --ink:var(--purple-deep); --ink2:var(--purple-mid);
  --mut:var(--purple-muted); --grid:var(--color-line);
  --axis:color-mix(in srgb, var(--purple-muted) 70%, var(--stone));
  --ring:color-mix(in srgb, var(--purple-deep) 10%, transparent);
  --panel:var(--stone);
}
.case-glance{
  margin:8px 0 28px; padding:22px 24px;
  background:var(--stone); border-radius:18px;
  max-width:52rem;
}
.case-glance dl{
  margin:0; display:grid; grid-template-columns:8.5rem 1fr;
  row-gap:.7rem; column-gap:1.25rem;
}
.case-glance dt{
  font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--purple-muted);
  padding-top:.2rem;
}
.case-glance dd{ margin:0; font-size:.95rem; color:var(--purple-mid) }
.case-standfirst{ margin:0 0 12px }
.case-standfirst p{ font-size:1.08rem; line-height:1.65; color:var(--purple-deep); margin:0 0 1.1rem }
.case-standfirst p:last-child{ margin-bottom:0 }
.case-col{ max-width:40em }
.case-col p{ margin:0 0 1.15em; color:var(--purple-mid) }
.case-col p:last-child{ margin-bottom:0 }
.case-sec{ padding:8px 0 28px }
.case-head{
  display:flex; gap:14px; align-items:baseline;
  margin:32px 0 16px;
}
.case-head .piece-h2{ margin:0; max-width:22ch }
.case-num{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; color:var(--rust); flex:none;
}
.case-h3{
  font-family:var(--serif); font-size:1.15rem; font-weight:560;
  margin:2rem 0 .6rem; color:var(--purple-deep);
}
.case-quote{
  margin:1.5rem 0; padding:0 0 0 1.25rem;
  border-left:3px solid var(--blue-deep);
  font-size:1.08rem; line-height:1.5; color:var(--purple-deep);
}
.case-quote cite{
  display:block; margin-top:.75rem;
  font-family:var(--mono); font-size:.72rem; font-style:normal;
  letter-spacing:.04em; color:var(--purple-muted);
}
.case-fig{ margin:28px 0 }
.case-fig-frame{
  background:var(--ivory); border:1px solid var(--color-line);
  border-radius:14px; padding:.5rem; overflow:auto;
}
.case-fig-svg{ display:block; width:100%; height:auto; min-width:640px }
.case-fig figcaption{
  margin-top:.7rem; font-size:.85rem; color:var(--purple-muted); max-width:60ch;
}
.case-fig-svg text{ font-family:var(--sans) }
.case-fig-svg .bg{ fill:var(--ivory) }
.case-fig-svg .h{ fill:var(--purple-deep); font-size:29px; font-weight:650; letter-spacing:-.5px }
.case-fig-svg .sub{ fill:var(--purple-mid); font-size:16.5px }
.case-fig-svg .sec{ fill:var(--purple-deep); font-size:16px; font-weight:640 }
.case-fig-svg .lbl{ fill:var(--purple-deep); font-size:15px; font-weight:600 }
.case-fig-svg .val{ fill:var(--purple-deep); font-size:14.5px }
.case-fig-svg .mut{ fill:var(--purple-muted); font-size:13.5px }
.case-fig-svg .note{ fill:var(--purple-mid); font-size:14px }
.case-fig-svg .big{ fill:var(--purple-deep); font-size:40px; font-weight:660; letter-spacing:-1px }
.case-fig-svg .onfill{ fill:var(--ivory); font-size:15px; font-weight:640 }
.case-fig-svg .rule{ stroke:var(--color-line); stroke-width:1 }
.case-fig-svg .ax{ stroke:var(--axis); stroke-width:1 }
.case-fig-svg .ring{ fill:none; stroke:var(--ring); stroke-width:1 }
.case-ship{ list-style:none; padding:0; margin:1.25rem 0 0; max-width:44rem }
.case-ship li{
  display:flex; gap:1rem; align-items:flex-start;
  padding:.85rem 0; border-top:1px solid var(--color-line); font-size:1.02rem;
}
.case-ship li:last-child{ border-bottom:1px solid var(--color-line) }
.case-tick{
  flex:none; width:1.4rem; height:1.4rem; border-radius:50%; margin-top:.18rem;
  display:grid; place-items:center; font-size:.72rem; font-weight:700;
}
.case-tick-done{ background:var(--blue-deep); color:var(--ivory) }
.case-tick-wip{ background:var(--stone); color:var(--purple-muted); border:1px solid var(--color-line) }
.case-state{ margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--purple-muted); padding-left:1rem; flex:none }
.case-hilite{ color:var(--rust); font-weight:600 }
.case-callout{
  background:var(--stone); border-radius:18px;
  padding:clamp(1.5rem,3vw,2.25rem); margin:8px 0 12px; max-width:52rem;
}
.case-callout .case-h3{ margin-top:0 }
.case-close{ border-top:1px solid var(--color-line); text-align:center; padding-top:36px }
.case-close .case-head{ justify-content:center }
.case-close .piece-h2{ max-width:none }
.case-close .case-col{ margin-left:auto; margin-right:auto }
.case-close .case-col p{ font-size:1.05rem; color:var(--purple-deep) }
.case-button{
  font-family:var(--serif); font-weight:560;
  font-size:clamp(1.15rem,2.4vw,1.45rem); letter-spacing:-.015em;
  white-space:nowrap; margin-top:1.25rem !important;
}
.case-note{
  font-size:.82rem; color:var(--purple-muted); max-width:52rem;
  margin:8px 0 24px;
}
.case-note a{
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  border-bottom:1.5px solid color-mix(in srgb, var(--purple-deep) 28%, transparent);
}
/* Slot kicker only. Never put this class on <body> — it all-caps the page. */
.case-studio{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--purple-muted);
  margin:28px 0 8px;
}
.case-studio a{
  text-transform:none; letter-spacing:0; color:var(--purple-deep);
  border-bottom:1.5px solid color-mix(in srgb, var(--purple-deep) 28%, transparent);
}
@media (max-width:720px){
  .case-glance dl{ grid-template-columns:1fr }
  .case-glance dt{ margin-top:.35rem }
  .case-fig-svg{ min-width:520px }
  .case-button{ white-space:normal }
}
@media (max-width:560px){
  .case-head{ flex-direction:column; gap:4px }
}

/* ============ 404 ============ */
.miss{
  min-height:100vh; min-height:100dvh;
  display:grid; place-items:center;
  padding:2rem;
  text-align:center;
}
.miss h1{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(2rem, 6vw, 3.2rem);
  margin:0 0 .75rem;
}
.miss p{ margin:0 0 1.25rem; color:var(--purple-mid); }
.miss a{
  font-family:var(--mono); font-size:.85rem; font-weight:600;
  border-bottom:1.5px solid color-mix(in srgb, var(--purple-deep) 35%, transparent); padding-bottom:2px;
}

/* ============ SOCIAL HUB (/social/) ============ */
html[data-page="social"]{ color-scheme: light }
.social-hub{
  line-height:1.35;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: 20px;
  padding-right: 20px;
}
.social-hub .skip{ font-family: var(--sans) }
.social-hub main{
  max-width: 400px;
  margin: 0 auto;
}
.social-hub h1{
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
  white-space: nowrap;
}
.social-hub h2{
  font-family: var(--sans);
  font-weight: 600;
  font-size: .72rem;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple-muted);
  margin: 0 0 8px;
}
.social-id{ margin-bottom: 28px }
.social-id-line{
  font-family: var(--serif);
  font-style: italic;
  font-size: .85rem;
  color: var(--purple-muted);
  margin: 4px 0 0;
}
.social-band{ margin-bottom: 20px }
.social-door{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--ivory);
  color: var(--purple-deep);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  transition: background .2s ease, color .2s ease, outline-color .2s ease, translate .2s ease;
}
.social-door-now{
  min-height: 72px;
  gap: 4px;
  background: var(--peach);
  border-color: transparent;
}
.social-door-now .social-v-name{
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 560;
}
.social-door:hover, .social-door:focus-visible{
  background: var(--peach);
  color: var(--purple-deep);
  outline: 1px solid color-mix(in srgb, var(--purple-deep) 22%, transparent);
  outline-offset: -1px;
  translate: 0 -2px;
}
.social-door-now:hover, .social-door-now:focus-visible{
  background: var(--peach);
  color: var(--purple-deep);
  outline: 2px solid var(--purple-deep);
  outline-offset: 3px;
  translate: 0 -2px;
}
.social-hub .social-door:focus-visible{
  outline: 2px solid var(--purple-deep);
  outline-offset: 3px;
}
.social-shelf, .social-build{
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-shelf{ display: flex; flex-direction: column; gap: 8px }
.social-build{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.social-build li, .social-shelf li{ margin: 0 }
.social-door-venture{
  height: 100%;
  font-size: .9rem;
  gap: 4px;
  padding-left: 12px;
  padding-right: 12px;
}
.social-v-name{ display: block }
.social-v-line{
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--purple-muted);
  line-height: 1.3;
}
.social-door-venture:hover .social-v-line,
.social-door-venture:focus-visible .social-v-line,
.social-door-now:hover .social-v-line,
.social-door-now:focus-visible .social-v-line{
  color: var(--purple-deep);
}
@media (max-width: 320px){
  .social-hub h1{ font-size: 1.28rem }
  .social-build{ grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce){
  .social-hub .social-door,
  .social-hub .social-door:hover,
  .social-hub .social-door:focus-visible{
    translate: none;
    transition: none;
  }
}