:root{
  color-scheme: light dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --display: "Anybody", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --nav-h: 64px;
  --gutter: clamp(16px, 4vw, 48px);
  --page-bg: #1B2244;
}
html{scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h)); scroll-behavior: smooth; -webkit-text-size-adjust: 100%}
*,*::before,*::after{box-sizing: inherit}
body{margin:0; background: var(--page-bg); color:#FFF4E8; font-family: var(--serif); font-size:1.0625rem; line-height:1.7; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility}
img{max-width:100%; height:auto; display:block}
a{color: inherit}
button{font: inherit}
:focus-visible{outline: 3px solid var(--chrome-accent, #FFB27A); outline-offset: 3px; border-radius: 4px}
.skip{position:absolute; left:-9999px; top:0}
.skip:focus{left:12px; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index:100; background:#fff; color:#1B2244; padding:8px 14px; border-radius:8px}

/* ---------- the living background ---------- */
#world{position: fixed; top:0; left:0; width:100%; height:100vh; height:100lvh; z-index:0; display:block}
main, .end{position: relative; z-index: 1}
#veil{position: fixed; inset:0; z-index:60; pointer-events:none; opacity:0; background:#0A3D4C}

/* chrome follows whichever world you're in */
body{--chrome-accent:#FFB27A; --chrome-bg: rgba(20,26,58,.62)}
body[data-world="ocean"]{--chrome-accent:#5FE3D0; --chrome-bg: rgba(3,30,40,.66)}
body[data-world="workshop"]{--chrome-accent:#E9B062; --chrome-bg: rgba(36,22,14,.7)}
body[data-world="dusk"]{--chrome-accent:#F2B880; --chrome-bg: rgba(32,30,62,.66)}
body[data-world="night"]{--chrome-accent:#F5C451; --chrome-bg: rgba(16,12,44,.7)}

/* ---------- navigation ---------- */
.nav{position: fixed; top:0; left:0; right:0; z-index:40; height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--gutter) 0; display:flex; align-items:center; justify-content: space-between; gap:24px; transition: background-color .5s ease}
.nav.solid, .nav.open{background: var(--chrome-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px)}
.brand{display:inline-grid; font-family: var(--display); font-weight:700; font-variation-settings:"wdth" 80, "wght" 700; font-size:1.2rem; text-decoration:none; color:#FFF4E8; white-space:nowrap}
.brand > span{grid-area: 1 / 1; transition: opacity .45s ease, transform .45s ease}
.brand .b-welcome{opacity:0; transform: translateY(-6px); font-variation-settings:"wdth" 88, "wght" 560; color:#FFE2C8}
.nav.at-home .brand .b-welcome{opacity:1; transform:none}
.nav.at-home .brand .b-name{opacity:0; transform: translateY(6px)}
.links{list-style:none; margin:0; padding:0; display:flex; gap: clamp(14px, 2.2vw, 30px)}
.links a{font-family: var(--display); font-variation-settings:"wdth" 92, "wght" 520; font-size:.98rem; text-decoration:none; color: rgba(255,244,232,.76); padding:6px 0; position:relative; transition: color .3s}
.links a:hover, .links a[aria-current="true"]{color:#fff}
.links a[aria-current="true"]::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background: var(--chrome-accent); transition: background-color .5s}
.menu-btn{display:none; align-items:center; gap:8px; background:none; border:1.5px solid rgba(255,244,232,.45); color:#FFF4E8; border-radius:999px; padding:6px 16px; font-family: var(--display); font-variation-settings:"wdth" 92, "wght" 560; cursor:pointer}
@media (max-width: 820px){
  .menu-btn{display:inline-flex}
  .links{display:none; position:fixed; left:0; right:0; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); flex-direction:column; gap:0; padding: 4px var(--gutter) 28px; background: var(--chrome-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px)}
  .nav.open .links{display:flex}
  .links a{display:block; font-size:1.55rem; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1)}
  .links a[aria-current="true"]{color: var(--chrome-accent)}
  .links a[aria-current="true"]::after{display:none}
}

/* ---------- hero + map ---------- */
.hero{background: linear-gradient(to bottom, rgba(18,25,54,0) 0, #121936 34%, #121936 92%, rgba(18,25,54,0) 100%); min-height:100vh; min-height:100svh; display:flex; flex-direction:column; padding-top: calc(var(--nav-h) + clamp(8px, 2.5vh, 32px))}
.hero-text{padding: 0 var(--gutter); max-width: 1320px; width:100%; margin: 0 auto; position:relative; z-index:2;
  display:grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name me" "lede me" "hint me"; align-content:start; column-gap: clamp(24px, 4.5vw, 72px)}
.name{grid-area: name; font-family: var(--display); font-weight:780; font-variation-settings:"wdth" 78, "wght" 780; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height:.9; letter-spacing:-.012em; margin:0; color:#FFF1E2}
.lede{grid-area: lede; margin:.6em 0 0; font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height:1.55; max-width: 76ch; color:#EFD9CB}
.lede p{margin:0 0 .5em}
.lede p:last-child{margin-bottom:0}
.hint{grid-area: hint; justify-self:start; display:flex; align-items:center; gap:12px; margin:.9em 0 0; padding: 10px 20px 10px 14px; border-radius:16px; background: rgba(255,214,180,.1); border: 1px solid rgba(255,214,180,.32); font-family: var(--display); font-variation-settings:"wdth" 94, "wght" 560; font-size:1rem; line-height:1.4; color:#FFDCC0; max-width: 60ch}
.hint svg{width:20px; height:20px; flex:none; animation: nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform: translateY(4px)}}
.hint-touch{display:none}
@media (hover: none){ .hint-mouse{display:none} .hint-touch{display:inline} }
.me{grid-area: me; align-self:start; position:relative; width: clamp(280px, 29vw, 430px); aspect-ratio: 5/4; margin-top: 4px}
.me .shot{position:absolute; border-radius:14px; border: 3px solid rgba(255,241,226,.92); box-shadow: 0 18px 40px rgba(8,10,30,.5); transition: transform .5s cubic-bezier(.2,.7,.1,1), box-shadow .5s}
.me .me-main{right:0; top:5%; width:56%; aspect-ratio: 1; transform: rotate(2.5deg); z-index:1}
.me .me-main img{object-position: 52% 22%}
.me .me-bench{left:0; top:0; width:37%; aspect-ratio: 3/4; transform: rotate(-5deg); z-index:1}
.me .me-bench img{object-position: 55% 22%}
.me .me-lab{left:25%; bottom:0; width:38%; aspect-ratio: 3/4; transform: rotate(2deg); z-index:2}
.me .me-lab img{object-position: 50% 50%}
.me .shot:hover, .me .shot:focus-visible{transform: rotate(0) scale(1.04); z-index:3; box-shadow: 0 24px 50px rgba(8,10,30,.6)}
@media (max-width: 760px){
  .hero-text{grid-template-areas: "name me" "lede lede" "hint hint"; column-gap: 14px; align-items:center}
  .name{font-size: clamp(1.9rem, 8.6vw, 3.4rem)}
  .me{width: clamp(132px, 38vw, 220px); margin-top:0}
  .me .shot{border-width:2px; border-radius:10px}
  .hint{max-width:none}
}
.map-wrap{margin-top:auto; padding-top: 12px; position:relative; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%)}
#map{display:block; width:100%; height: clamp(300px, 54vh, 900px)}
@media (max-width: 760px){
  .map-wrap{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling: touch; scrollbar-width:none; overscroll-behavior-x: contain}
  .map-wrap::-webkit-scrollbar{display:none}
  #map{height: min(56vh, 430px); width: calc(min(56vh, 430px) * 2.2222)}
}
#map .art{transition: filter .45s ease}
#map[data-hover] .art{filter: saturate(.6) brightness(.78)}
#map[data-hover="research"] .art[data-r="research"],
#map[data-hover="woodworking"] .art[data-r="woodworking"],
#map[data-hover="hiking"] .art[data-r="hiking"],
#map[data-hover="create"] .art[data-r="create"]{filter: saturate(1.12) brightness(1.06)}
.hot{cursor:pointer; outline:none}
.hot .hit{fill: transparent}
.hot:focus-visible .hit{stroke:#fff; stroke-width:3; stroke-dasharray: 10 8}
.sign-bg{fill: rgba(18,18,46,.76); transition: fill .3s}
.sign text{fill:#FFF4E8; font-family: var(--display); font-size:24px; font-weight:600; font-variation-settings:"wdth" 90, "wght" 600; transition: fill .3s; pointer-events:none}
.hot:hover .sign-bg, .hot:focus-visible .sign-bg{fill: var(--acc)}
.hot:hover .sign text, .hot:focus-visible .sign text{fill:#1A1530}

.tw{animation: tw 3.2s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.25} to{opacity:1}}
.bob{animation: bob 7s ease-in-out infinite}
@keyframes bob{50%{transform: translateY(-9px)}}
.drift{animation: drift 38s ease-in-out infinite alternate}
.drift.slow{animation-duration: 52s}
@keyframes drift{to{transform: translateX(54px)}}
.comb{animation: hue 5s linear infinite}
@keyframes hue{to{filter: hue-rotate(360deg)}}
.glow{animation: glow 5s ease-in-out infinite}
@keyframes glow{50%{opacity:.55}}

/* ---------- arrivals: where each world announces itself ---------- */
.arrival{min-height:100vh; min-height:100svh; display:grid; align-content:center; padding: calc(var(--nav-h) + 24px) var(--gutter) 64px; max-width: 1240px; margin: 0 auto}
.arrival h2{font-family: var(--display); font-weight:400; font-size: clamp(3.3rem, 12.5vw, 10.5rem); line-height:.9; letter-spacing:-.01em; margin:0; font-variation-settings:"wdth" 100, "wght" 400; transition: font-variation-settings 1.6s cubic-bezier(.2,.7,.1,1); text-shadow: 0 2px 36px rgba(0,0,0,.28)}
.arrival.is-here h2{font-variation-settings: var(--fv)}
.arrival h2:focus{outline:none}
.arrival .when{margin:.9em 0 0; font-size: clamp(1.12rem, 2vw, 1.45rem); line-height:1.5; max-width: 36ch; text-shadow: 0 1px 18px rgba(0,0,0,.35)}
#research{--fv:"wdth" 142, "wght" 240; color:#E6FBF8}
#woodworking{--fv:"wdth" 58, "wght" 880; color:#FCEFDC}
#hiking{--fv:"wdth" 122, "wght" 600; color:#FFF1E6}
#create{--fv:"wdth" 86, "wght" 440; color:#EEEBFF}
#research .when{color:#BFEAE5} #woodworking .when{color:#E9D2B2} #hiking .when{color:#F3DCD6} #create .when{color:#C9C4EE}

/* ---------- content sheets (light or dark to match the viewer) ---------- */
.world-content{padding: 0 var(--gutter) clamp(72px, 12vh, 140px);
  --panel: var(--l-panel); --ink: var(--l-ink); --muted: var(--l-muted); --accent: var(--l-accent); --line: var(--l-line); --chip: var(--l-chip);
  --nA: #23803B; --nT: #B93333; --nG: #8C6400; --nC: #2A63C4}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .world-content{--panel: var(--d-panel); --ink: var(--d-ink); --muted: var(--d-muted); --accent: var(--d-accent); --line: var(--d-line); --chip: var(--d-chip);
    --nA:#7BD389; --nT:#F07A7A; --nG:#F5C451; --nC:#6FA8FF}
}
:root[data-theme="dark"] .world-content{--panel: var(--d-panel); --ink: var(--d-ink); --muted: var(--d-muted); --accent: var(--d-accent); --line: var(--d-line); --chip: var(--d-chip);
  --nA:#7BD389; --nT:#F07A7A; --nG:#F5C451; --nC:#6FA8FF}

.world-content[data-world="dawn"]{
  --l-panel: rgba(255,247,240,.95); --l-ink:#2A2140; --l-muted:#6B5B6E; --l-accent:#A94E1E; --l-line: rgba(42,33,64,.14); --l-chip: rgba(42,33,64,.06);
  --d-panel: rgba(22,26,56,.9); --d-ink:#FFF3E6; --d-muted:#D9C3BC; --d-accent:#FFB27A; --d-line: rgba(255,243,230,.16); --d-chip: rgba(255,243,230,.07);
  --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30V16C100 2 200 2 300 16S500 30 600 16 800 2 900 16 1100 30 1200 16V30Z'/%3E%3C/svg%3E")}
.world-content[data-world="ocean"]{
  --l-panel: rgba(236,249,247,.95); --l-ink:#0A2B33; --l-muted:#3D656B; --l-accent:#0B6F6A; --l-line: rgba(10,43,51,.14); --l-chip: rgba(10,43,51,.06);
  --d-panel: rgba(3,32,42,.9); --d-ink:#E3FAF6; --d-muted:#9CCBC6; --d-accent:#5FE3D0; --d-line: rgba(227,250,246,.14); --d-chip: rgba(227,250,246,.07);
  --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30V19C150 3 250 31 420 13S700 3 860 17 1100 27 1200 9V30Z'/%3E%3C/svg%3E")}
.world-content[data-world="workshop"]{
  --l-panel: rgba(251,242,228,.96); --l-ink:#3A2415; --l-muted:#6F5540; --l-accent:#8E5210; --l-line: rgba(58,36,21,.15); --l-chip: rgba(58,36,21,.06);
  --d-panel: rgba(40,25,15,.92); --d-ink:#FBEEDB; --d-muted:#D5BD9D; --d-accent:#E9B062; --d-line: rgba(251,238,219,.15); --d-chip: rgba(251,238,219,.07);
  --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 24'%3E%3Cpath d='M0 24V12H22L14 0H58L50 12H72V24Z'/%3E%3C/svg%3E")}
.world-content[data-world="dusk"]{
  --l-panel: rgba(246,240,248,.95); --l-ink:#2A2846; --l-muted:#5D5775; --l-accent:#9C4E23; --l-line: rgba(42,40,70,.14); --l-chip: rgba(42,40,70,.06);
  --d-panel: rgba(34,33,66,.9); --d-ink:#F6F0FA; --d-muted:#CDBFD6; --d-accent:#F2B880; --d-line: rgba(246,240,250,.15); --d-chip: rgba(246,240,250,.07);
  --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30V22L90 13 150 17 240 4 310 15 380 9 470 19 560 6 640 14 720 2 800 16 880 10 960 20 1050 7 1130 15 1200 10V30Z'/%3E%3C/svg%3E")}
.world-content[data-world="night"]{
  --l-panel: rgba(238,237,250,.95); --l-ink:#1D1942; --l-muted:#55508A; --l-accent:#6F5200; --l-line: rgba(29,25,66,.14); --l-chip: rgba(29,25,66,.06);
  --d-panel: rgba(17,14,44,.9); --d-ink:#EEEBFF; --d-muted:#B3AEDB; --d-accent:#F5C451; --d-line: rgba(238,235,255,.15); --d-chip: rgba(238,235,255,.07);
  --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30V16Q600 -10 1200 16V30Z'/%3E%3C/svg%3E")}

.sheet{max-width: 1120px; margin: 0 auto}
.edge{height:30px; background: var(--panel); -webkit-mask-image: var(--edge); mask-image: var(--edge); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
.world-content[data-world="workshop"] .edge{height:24px; -webkit-mask-size:72px 24px; mask-size:72px 24px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: center bottom; mask-position: center bottom}
.panel{background: var(--panel); color: var(--ink); padding: clamp(28px, 5vw, 72px); border-radius: 0 0 28px 28px}
.world-content[data-world="workshop"] .panel{border-radius: 0 0 8px 8px}

.panel p{margin: 0 0 1em; max-width: 66ch}
.panel a{color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px}
.panel a:hover{text-decoration-thickness: 2.5px}
.muted{color: var(--muted)}
.lead{font-size: clamp(1.18rem, 2vw, 1.42rem); line-height:1.55; max-width: 44ch}
.panel h2{font-family: var(--display); font-weight:760; font-variation-settings:"wdth" 80, "wght" 760; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height:1; margin:0 0 .5em; letter-spacing:-.01em}
.panel h3{font-family: var(--display); font-weight:680; font-variation-settings:"wdth" 90, "wght" 680; font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height:1.15; margin:0 0 .45em}
.panel h4{font-family: var(--display); font-weight:640; font-variation-settings:"wdth" 94, "wght" 640; font-size: 1.16rem; line-height:1.25; margin:0 0 .35em}
.where{font-style: italic; color: var(--muted); margin-top: -.2em !important}
.sources{display:flex; flex-wrap:wrap; gap: 8px 22px; margin-top: .4em}
.sources a{font-family: var(--display); font-variation-settings:"wdth" 92, "wght" 560; font-size: .98rem}


/* research timeline (a real sequence, so it gets a rail) */
.timeline{list-style:none; margin: clamp(32px, 5vw, 56px) 0 0; padding:0}
.stop{display:grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 44px; position:relative; padding-bottom: clamp(40px, 6vw, 64px)}
.stop::before{content:""; position:absolute; left: 171px; top: 14px; bottom: 0; width:2px; background: var(--line)}
.stop:last-child::before{bottom:auto; height: 150px; background: linear-gradient(var(--line), transparent)}
.stop::after{content:""; position:absolute; left: 165px; top: 6px; width:14px; height:14px; border-radius:50%; background: var(--panel); border: 2.5px solid var(--accent)}
.stop .when{font-family: var(--display); font-variation-settings:"wdth" 90, "wght" 600; color: var(--accent); font-size: 1rem; text-align:right; line-height:1.3; padding-top: 2px}
.study{margin-top: 1.4em; padding-top: 1.2em; border-top: 1px solid var(--line)}
.rd{margin-top: 1.6em}
.proj{display:grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 24px; padding: 1.5em 0; border-top: 1px solid var(--line)}
.proj:last-child{padding-bottom: 0}
.proj svg{width:52px; height:52px; color: var(--accent)}
.proj-text h4{font-size: 1.28rem; margin-bottom: .45em}
.proj-text p:last-child{margin-bottom: 0}
@media (max-width: 760px){
  .stop{grid-template-columns: 1fr; padding-left: 34px}
  .stop::before{left: 6px}
  .stop::after{left: 0}
  .stop .when{text-align:left; margin-bottom: .35em}
  .proj{grid-template-columns: 36px minmax(0, 1fr); gap: 0 14px}
  .proj svg{width:36px; height:36px}
}

/* photos */
.shot{padding:0; border:0; background:none; cursor: zoom-in; display:block; width:100%; overflow:hidden; border-radius: 12px; position:relative; color:inherit}
.shot img{width:100%; height:100%; object-fit:cover}
.row{display:flex; gap: 12px; align-items: stretch}
.row > .shot{flex: var(--ar) 1 0px; aspect-ratio: var(--ar); min-width:0}
.cap{position:absolute; left:0; right:0; bottom:0; padding: 34px 14px 11px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.62)); color:#fff; font-size:.9rem; line-height:1.35; text-align:left}
@media (max-width: 640px){
  .row{flex-wrap: wrap}
  .row > .shot{flex: 1 1 calc(50% - 6px)}
  .row > .shot.wide{flex-basis: 100%}
}

/* woodworking */
.intro-split{display:grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items:start}
.chapter{margin-top: clamp(52px, 7vw, 92px)}
.trio{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px}
.trio figure, .piece figure{margin:0}
.trio .shot{aspect-ratio: 3/4}
figcaption{font-size: .98rem; line-height:1.55; margin-top: .7em}
figcaption strong{display:block; font-family: var(--display); font-weight:640; font-variation-settings:"wdth" 92, "wght" 640; font-size:1.08rem; margin-bottom: .15em}
.piece{display:grid; gap: clamp(20px, 3.5vw, 48px); margin-top: clamp(36px, 5vw, 60px); align-items: end}
.piece.boxes .piece-text{display:grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 8px 32px}
.piece.bookcase{grid-template-columns: minmax(0, 400px) minmax(0, 1fr)}
.piece.cabinet{grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr)}
.piece.bookcase .shot{aspect-ratio: 3/4}
.piece-text p{margin-bottom: .6em}
@media (max-width: 760px){
  .intro-split, .piece.bookcase, .piece.cabinet, .piece.boxes .piece-text{grid-template-columns: 1fr}
  .piece.cabinet .piece-text{order: 2}
  .trio{grid-template-columns: 1fr 1fr}
  .trio figure:last-child{grid-column: 1 / -1}
  .trio figure:last-child .shot{aspect-ratio: 4/3}
}

/* hiking */
.hike-layout{display:grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); margin-top: 1.6em; align-items:start}
.hike-photos{display:grid; gap: 12px}
.log ol{list-style:none; margin: .6em 0 0; padding:0}
.log li{padding: .7em 0; border-top: 1px solid var(--line)}
.log li:last-child{border-bottom: 1px solid var(--line)}
.log strong{display:block; font-family: var(--display); font-weight:620; font-variation-settings:"wdth" 92, "wght" 620}
.log span{color: var(--muted); font-size:.95rem}
.profile{width:100%; height:auto; color: var(--accent); margin-top: 18px}
@media (max-width: 860px){ .hike-layout{grid-template-columns: 1fr} }

/* code & create */
.create-one{margin-top: 1.6em; max-width: 780px}
.make svg.glyph{width: 44px; height: 44px; color: var(--accent); margin-bottom: 8px}
.translator{margin-top: 1.2em; padding: 20px; border-radius: 14px; background: var(--chip); border: 1px solid var(--line)}
.translator label{display:block; font-family: var(--display); font-variation-settings:"wdth" 92, "wght" 600; margin-bottom: 8px}
.translator textarea{width:100%; resize: vertical; min-height: 88px; font-family: var(--mono); font-size: .92rem; line-height:1.5; letter-spacing:.04em; color: var(--ink); background: var(--panel); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; word-break: break-all}
.translator textarea:focus-visible{outline: 3px solid var(--accent); outline-offset: 1px}
.legend{display:flex; gap: 14px; flex-wrap:wrap; margin: 12px 0 0; font-size:.9rem; color: var(--muted)}
.legend b{font-family: var(--mono)}
.codons{display:flex; flex-wrap:wrap; gap: 6px; margin-top: 14px; max-height: 260px; overflow-y:auto}
.cd{display:inline-flex; flex-direction:column; align-items:center; padding: 5px 7px 4px; border-radius: 7px; background: var(--panel); border: 1px solid var(--line); min-width: 46px}
.cd .nt{font-family: var(--mono); font-size:.92rem; font-weight:700; letter-spacing:.06em}
.cd .aa{font-family: var(--display); font-variation-settings:"wdth" 88, "wght" 520; font-size:.76rem; color: var(--muted)}
.cd.stop{border-color: var(--nT)}
.bA{color: var(--nA)} .bT{color: var(--nT)} .bG{color: var(--nG)} .bC{color: var(--nC)}
.protein{margin: 14px 0 0 !important; font-size:.95rem}
.protein output{font-family: var(--mono); letter-spacing: .08em; word-break: break-all}


/* replication origin showcase */
.panel p.kicker{font-family: var(--display); font-variation-settings:"wdth" 92, "wght" 600; font-size:.85rem; letter-spacing:.04em; text-transform: uppercase; color: var(--accent); margin: 0 0 .35em}
.panel p.kicker i{text-transform:none; letter-spacing:0}
.make + .make{margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line)}
.ori{--chart:#A35E00}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ori{--chart:#BD7F1A} }
:root[data-theme="dark"] .ori{--chart:#BD7F1A}
.skew, .oriview{margin: 1.4em 0 1.6em; padding: 20px; border-radius: 14px; background: var(--chip); border: 1px solid var(--line)}
.seg{display:inline-flex; padding:3px; border-radius:999px; border:1px solid var(--line); background: var(--panel); margin-bottom: 14px; flex-wrap: wrap}
.seg button{border:0; background:none; color: var(--muted); padding: 7px 14px; border-radius:999px; cursor:pointer; font-family: var(--serif); font-size:.95rem}
.seg button[aria-checked="true"]{background: var(--ink); color: var(--panel)}
.seg button:focus-visible{outline: 3px solid var(--accent); outline-offset: 1px}
.panel h4.chart-title{font-size: 1.05rem; margin: 0}
.panel p.chart-sub{font-size: .9rem; margin: .15em 0 .8em}
.chart{position:relative}
.chart svg{display:block; width:100%; height: 250px; overflow: visible}
.chart svg:focus-visible{outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px}
.chart .grid line{stroke: var(--line); stroke-width:1}
.chart .axis text{fill: var(--muted); font-family: var(--display); font-size: 11px; font-variation-settings:"wdth" 92, "wght" 480}
.chart .line{fill:none; stroke: var(--chart); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.chart .area{fill: var(--chart); opacity:.1}
.chart .minpt{fill: var(--chart); stroke: var(--panel); stroke-width:2}
.chart .minlbl{fill: var(--ink); font-family: var(--display); font-size: 12px; font-variation-settings:"wdth" 92, "wght" 620; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round}
.chart .xhair{stroke: var(--muted); stroke-width:1}
.chart .hov{fill: var(--chart); stroke: var(--panel); stroke-width:2}
.tip{position:absolute; top:0; pointer-events:none; background: var(--panel); border:1px solid var(--line); border-radius: 8px; padding: 6px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.14); white-space:nowrap; font-size:.85rem; line-height:1.35}
.tip strong{display:block; font-family: var(--display); font-variation-settings:"wdth" 92, "wght" 650; font-size: 1rem; color: var(--ink)}
.tip span{color: var(--muted)}
.seqblock{font-family: var(--mono); font-size: .86rem; line-height: 1.75; letter-spacing: .06em; word-break: break-all; margin: 0 !important; max-width:none !important; color: var(--muted)}
.seqblock mark{background: color-mix(in srgb, var(--chart) 22%, transparent); color: var(--ink); border-radius: 3px; padding: 1px 0; font-weight: 700; box-shadow: inset 0 -2px 0 var(--chart)}
.seqblock mark.rev{background: transparent; box-shadow: inset 0 -2px 0 var(--chart), inset 0 0 0 1.5px var(--chart)}
.seqblock sup{font-family: var(--display); font-size: .7em; letter-spacing:0; color: var(--chart); font-weight:700; margin-right: 1px}
.boxes{list-style:none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 20px; font-size:.9rem}
.boxes b{font-family: var(--mono); letter-spacing:.06em; color: var(--ink)}
.boxes .n{display:inline-block; min-width: 1.2em; font-family: var(--display); font-weight:700; color: var(--chart)}
@media (max-width: 560px){ .skew, .oriview{padding: 14px} .boxes{grid-template-columns: 1fr} .chart svg{height: 210px} }

/* footer */
.end{max-width: 1120px; margin: 0 auto; padding: clamp(56px, 12vh, 140px) var(--gutter) calc(56px + env(safe-area-inset-bottom, 0px)); color:#EEEBFF}
.end h2, .end p, .end small{text-shadow: 0 1px 14px rgba(11,9,36,.95), 0 0 2px rgba(11,9,36,.8)}
.end h2{font-family: var(--display); font-weight:760; font-variation-settings:"wdth" 82, "wght" 760; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height:1; margin:0 0 .45em; color:#FFF6E0}
.end h2:focus{outline:none}
.end p{max-width: 52ch; margin: 0 0 1.5em; font-size: 1.12rem; color:#DCD8F5}
.end small{display:block; color:#B3AEDB; margin-top: 2.2em; font-size:.9rem}
.contact{display:flex; flex-wrap:wrap; gap: 12px}
.btn{display:inline-flex; align-items:center; gap:10px; background: none; border: 1.5px solid rgba(238,235,255,.5); color:#EEEBFF; border-radius: 999px; padding: 11px 20px; font-family: var(--display); font-variation-settings:"wdth" 92, "wght" 580; font-size: 1rem; line-height:1.2; text-decoration:none; cursor:pointer; transition: border-color .25s, color .25s, background-color .25s}
.btn svg{width:18px; height:18px; flex:none}
.btn:hover{border-color:#F5C451; color:#F5C451}
.btn-solid{background:#F5C451; border-color:#F5C451; color:#1A1530}
.btn-solid:hover{background:#FFD978; border-color:#FFD978; color:#1A1530}
@media (max-width: 480px){ .btn-solid{width:100%; justify-content:center} }

/* lightbox */
#lightbox{border:0; padding:0; background: transparent; width:100vw; height:100vh; max-width:100vw; max-height:100vh; margin:0; color:#fff}
#lightbox::backdrop{background: rgba(8,8,22,.9)}
.lb-inner{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding: calc(56px + env(safe-area-inset-top, 0px)) 64px calc(24px + env(safe-area-inset-bottom, 0px))}
.lb-inner figure{margin:0; display:flex; flex-direction:column; align-items:center; max-width: 100%; max-height:100%}
#lbImg{max-width: 100%; max-height: calc(100vh - 170px); width:auto; height:auto; object-fit:contain; border-radius: 10px}
#lbCap{margin-top: 12px; max-width: 60ch; text-align:center; font-size: 1rem; color:#EDE6DD}
.lb-btn, .lb-close{position:absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color:#fff; border-radius:999px; cursor:pointer; display:grid; place-items:center}
.lb-btn{top: 50%; width:48px; height:48px; transform: translateY(-50%)}
.lb-btn svg{width:22px; height:22px}
.lb-prev{left: 10px} .lb-next{right: 10px}
.lb-close{top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; padding: 8px 16px; font-family: var(--display); font-variation-settings:"wdth" 92, "wght" 560}
@media (max-width: 640px){ .lb-inner{padding-left: 12px; padding-right: 12px} .lb-btn{top:auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform:none} }


@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation: none !important; transition-duration: .01ms !important}
}