/* Layout: one person, many apps. A full-bleed hero with Aaron's photo, then each part of his life takes over the whole screen in the style of the app he uses for it, alternating light and dark. Deliberately mixed themes, every color set explicitly. */
:root{
  --char:#242424; --yel:#faff47; --ink:#141414;
  --ui:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --yt:"Roboto","Public Sans",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --chess:"Noto Sans Symbols 2","Segoe UI Symbol","Apple Symbols",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--char);color:#fff;font:400 16px/1.55 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,canvas{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid #4d90fe;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.logo-mark{display:inline-block;width:35px;height:14px;background:currentColor;-webkit-mask:url(../img/amgomez-logo.png) center/contain no-repeat;mask:url(../img/amgomez-logo.png) center/contain no-repeat;flex:none}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pre .rv{opacity:0;transform:translateY(26px)}
.in .rv{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1) calc(var(--d,0) * 90ms),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--d,0) * 90ms)}
.eyebrow{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.6}

/* ================= nav ================= */
.nav{position:fixed;z-index:60;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 20px));display:flex;align-items:center;gap:4px;padding:5px 5px 5px 16px;border-radius:999px;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);transition:transform .4s cubic-bezier(.2,.7,.2,1),background .35s,color .35s,box-shadow .35s,border-color .35s;border:1px solid transparent}
.nav.hide{transform:translate(-50%,-150%)}
.nav[data-tone="dark"]{background:rgb(22 22 22 / .55);color:#fff;border-color:rgb(255 255 255 / .09)}
.nav[data-tone="light"]{background:rgb(255 255 255 / .8);color:#141414;border-color:rgb(0 0 0 / .07);box-shadow:0 10px 30px rgb(0 0 0 / .08)}
.nav[data-tone="yellow"]{background:rgb(250 255 71 / .82);color:#141414;border-color:rgb(0 0 0 / .1)}
.nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 15px var(--ui);letter-spacing:-.01em;white-space:nowrap}
.nav[data-tone="dark"] .brand .logo-mark{color:var(--yel)}
.nav .nav-links{display:none;margin-left:auto;gap:2px}
.nav .nav-links a{padding:9px 12px;border-radius:999px;font:600 14px var(--ui);text-decoration:none;opacity:.72;transition:opacity .2s,background .2s}
.nav .nav-links a:hover,.nav .nav-links a.on{opacity:1;background:rgb(128 128 128 / .18)}
.nav-cta{margin-left:auto;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;font:800 14px var(--ui);text-decoration:none;white-space:nowrap}
.nav[data-tone="dark"] .nav-cta{background:var(--yel);color:#141414}
.nav[data-tone="light"] .nav-cta{background:#141414;color:#fff}
.nav[data-tone="yellow"] .nav-cta{background:#141414;color:var(--yel)}
.menu-btn{height:40px;padding:0 15px;margin-left:4px;border:0;border-radius:999px;background:rgb(128 128 128 / .2);font:700 14px var(--ui);cursor:pointer}
@media (min-width:1040px){.nav .nav-links{display:flex}.nav-cta{margin-left:6px}.menu-btn{display:none}}
.menu{position:fixed;inset:0;z-index:70;background:rgb(16 16 16 / .97);color:#fff;overflow:auto;padding:calc(76px + env(safe-area-inset-top,0px)) 20px 40px}
.menu ul{list-style:none;margin:0 auto;padding:0;max-width:560px;display:grid;gap:2px}
.menu a{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:12px 8px;border-radius:14px;text-decoration:none}
.menu a:hover{background:rgb(255 255 255 / .06)}
.menu .sw{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid rgb(255 255 255 / .12)}
.menu b{display:block;font:800 20px/1.15 var(--ui);letter-spacing:-.01em}
.menu small{color:#9b9b9b;font-size:14px}
.menu-close{position:fixed;top:calc(15px + env(safe-area-inset-top,0px));right:15px;height:40px;padding:0 16px;border-radius:999px;border:0;background:#2c2c2c;font:700 14px var(--ui);cursor:pointer}

/* ================= hero ================= */
.hero{background:var(--char);color:#fff}
.hero-stage{position:relative}
.hero-copy{position:relative;max-width:1240px;margin:0 auto;padding:calc(96px + env(safe-area-inset-top,0px)) 20px 0}
.hi{margin:0;font:600 18px var(--ui);color:rgb(255 255 255 / .8)}
.name{margin:4px 0 26px;font:900 clamp(56px,15vw,132px)/.88 var(--ui);letter-spacing:-.045em;overflow:hidden}
.name span{display:block;animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.name span + span{animation-delay:.08s}
@keyframes rise{from{transform:translateY(105%)}}
.photo-wrap{background:linear-gradient(var(--char) 0 20.95%,var(--yel) 20.95% 50%,var(--char) 50% 100%);margin-inline:-20px;overflow:hidden}
.hero-photo{display:block;width:min(100%,640px);aspect-ratio:1;margin:0 auto;animation:fadein 1.2s .15s cubic-bezier(.2,.7,.2,1) both}
.hero-photo img{display:block;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,#000 0 76%,transparent 97.4%);mask-image:linear-gradient(90deg,#000 0 76%,transparent 97.4%)}
@keyframes fadein{from{opacity:0;transform:scale(1.03)}}
.hero-low{max-width:1240px;margin:0 auto;padding:28px 0 36px}
.hero .tag{margin:0;font:800 clamp(26px,3vw,36px)/1.1 var(--ui);letter-spacing:-.02em;text-wrap:balance;max-width:17ch}
.hero .tag em{font-style:normal;color:var(--yel)}
.lede{margin:16px 0 24px;font-size:17px;line-height:1.6;color:rgb(255 255 255 / .78);max-width:31rem;text-wrap:pretty}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font:800 15px var(--ui);text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap}
.b svg.i{width:18px;height:18px}
.b-yel{background:var(--yel);color:#141414}
.b-ghost{border-color:rgb(255 255 255 / .3);color:#fff;background:transparent}
.b-ghost:hover{border-color:#fff}
@media (min-width:1080px){
  .hero-stage{--H:clamp(600px,88vh,860px);height:var(--H);background:linear-gradient(var(--char) 0 20.95%,var(--yel) 20.95% 50%,var(--char) 50% 100%);overflow:hidden}
  .hero-copy{height:100%;padding:0 32px;display:grid;grid-template-rows:20.95% 29.05% 1fr}
  .hi{align-self:end;margin-bottom:12px}
  .name{align-self:center;margin:0;color:#141414;font-size:clamp(96px,8.4vw,136px);position:relative;z-index:1}
  .photo-wrap{position:absolute;inset:0;margin:0;background:none;pointer-events:none}
  .hero-photo{position:absolute;bottom:0;right:max(-60px,calc((100% - 1240px) / 2 - 60px));width:auto;height:100%;margin:0}
  .hero-low{position:relative;z-index:1;margin:0;padding:30px 0 0;max-width:450px}
}
.ticker{position:relative;overflow:hidden;border-top:1px solid rgb(255 255 255 / .09);border-bottom:1px solid rgb(255 255 255 / .09);background:#1c1c1c}
.tk-track{display:flex;width:max-content;animation:tk 55s linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
.tk-item{display:inline-flex;align-items:center;gap:12px;padding:15px 30px;border-right:1px solid rgb(255 255 255 / .1);text-decoration:none;white-space:nowrap;font:500 15px var(--ui)}
.tk-item b{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--yel)}
.tk-item:hover span{text-decoration:underline}
.up{color:#7fd18b}.down{color:#ff6b5f}
@keyframes tk{to{transform:translateX(-50%)}}

/* ================= about: messages ================= */
.s-chat{background:#fff;color:#141414;color-scheme:light;padding:112px 20px 104px}
.chat-wrap{max-width:1180px;margin:0 auto;display:grid;gap:44px}
.chat-intro h2{margin:12px 0 18px;font:900 clamp(40px,5.2vw,74px)/.98 var(--ui);letter-spacing:-.04em;text-wrap:balance}
.chat-intro > p{margin:0;max-width:30rem;font-size:18px;line-height:1.6;color:#4a4a4a;text-wrap:pretty}
.facts{display:grid;grid-template-columns:auto 1fr;gap:12px 24px;margin:30px 0 0;font-size:16.5px}
.facts dt{font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8a8a8a;padding-top:4px}
.facts dd{margin:0;font-weight:600}
.phone{background:#fff;color:#111;overflow:hidden;display:flex;flex-direction:column;border-top:1px solid #ececee;border-bottom:1px solid #ececee;margin-inline:-20px}
.chat-head{display:grid;justify-items:center;gap:3px;padding:14px 16px 10px;background:#f7f7f8;border-bottom:1px solid #e9e9eb}
.chat-head img{width:58px;height:58px;border-radius:50%}
.chat-head b{font:600 13px var(--ui)}
.chat-head small{font:400 11.5px var(--ui);color:#8a8a8e}
.chat-log{display:flex;flex-direction:column;gap:3px;padding:14px 14px 8px;height:430px;overflow-y:auto;scroll-behavior:smooth}
.stamp{align-self:center;margin:2px 0 10px;font:500 11.5px var(--ui);color:#8a8a8e}
.bub{max-width:78%;padding:9px 14px;border-radius:20px;font:400 16px/1.38 var(--ui);overflow-wrap:anywhere;animation:pop .35s cubic-bezier(.2,1.3,.4,1) both}
.bub.in{align-self:flex-start;background:#e9e9eb}
.bub.out{align-self:flex-end;background:var(--yel);margin-top:8px}
.bub.in + .bub.out,.bub.out + .bub.in,.lcard + .bub.in{margin-top:8px}
.bub a{color:inherit}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}}
.typing{align-self:flex-start;display:flex;gap:4px;padding:13px 15px;border-radius:20px;background:#e9e9eb;margin-top:4px}
.typing i{width:7px;height:7px;border-radius:50%;background:#99999e;animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.35}30%{opacity:1}}
.lcard{align-self:flex-start;display:block;width:min(78%,300px);border-radius:18px;overflow:hidden;background:#e9e9eb;text-decoration:none;margin-top:3px;animation:pop .35s both}
.lcard img{display:block;width:100%;aspect-ratio:1.9;object-fit:cover}
.lcard span{display:block;padding:9px 13px 11px;font:600 14px/1.3 var(--ui)}
.lcard small{display:block;font-weight:400;color:#6b6b70}
.delivered{align-self:flex-end;margin:1px 4px 0;font:500 11px var(--ui);color:#8a8a8e}
.qchips{display:flex;gap:8px;overflow-x:auto;padding:10px 14px;border-top:1px solid #efeff1;scrollbar-width:none}
.qchip{flex:none;padding:9px 15px;border-radius:999px;border:1.5px solid #dcdce0;background:#fff;font:600 14px var(--ui);cursor:pointer;transition:border-color .2s}
.qchip:hover{border-color:#141414}
.qchip[disabled]{opacity:.4;cursor:default}
.chat-bar{display:flex;gap:8px;align-items:center;padding:6px 12px 8px}
.chat-note{margin:0;padding:0 16px 14px;font:400 11.5px/1.45 var(--ui);color:#8a8a8e}
.chat-note a{color:#141414}
.chat-bar input{flex:1;min-width:0;height:40px;padding:0 16px;border-radius:20px;border:1.5px solid #dcdce0;background:#fff;color:#111;font:400 16px var(--ui);outline:none}
.chat-bar input:focus{border-color:#141414}
.send{width:36px;height:36px;border-radius:50%;border:0;background:#141414;color:var(--yel);display:grid;place-items:center;cursor:pointer;flex:none}
.send svg.i{width:18px;height:18px;stroke-width:2.4}
@media (min-width:960px){
  .chat-wrap{grid-template-columns:minmax(0,1fr) 440px;gap:80px;align-items:center}
  .phone{margin:0;border:1px solid #e4e4e7;border-radius:38px;box-shadow:0 40px 90px -40px rgb(0 0 0 / .35),0 0 0 10px #f4f4f5}
}

/* ================= work: code editor ================= */
.s-code{background:#1f1f1f;color:#cccccc;color-scheme:dark;font-family:var(--ui)}
.vsc{display:flex;flex-direction:column;min-height:min(900px,100vh)}
.vsc-title{position:relative;height:38px;display:flex;align-items:center;justify-content:center;padding:0 90px;background:#181818;border-bottom:1px solid #2b2b2b;font:12.5px var(--ui);color:#9d9d9d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vsc-title .dots{position:absolute;left:14px;top:13px;display:flex;gap:7px}
.dots i{width:12px;height:12px;border-radius:50%;background:#3c3c3c}
.vsc-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
.vsc-act,.vsc-side{display:none}
.vsc-act{background:#181818;border-right:1px solid #2b2b2b;flex-direction:column;align-items:center;gap:4px;padding-top:6px}
.vsc-act span{width:48px;height:46px;display:grid;place-items:center;color:#868686}
.vsc-act span.on{color:#fff;box-shadow:inset 2px 0 var(--yel)}
.vsc-act svg.i{width:24px;height:24px;stroke-width:1.5}
.vsc-side{background:#181818;border-right:1px solid #2b2b2b;padding:10px 0;font-size:13px}
.side-h{margin:0 0 6px;padding:0 20px;font:500 11px var(--ui);letter-spacing:.05em;text-transform:uppercase;color:#9d9d9d}
.side-f{margin:8px 0 2px;padding:3px 12px;font:700 11px var(--ui);letter-spacing:.04em;text-transform:uppercase;color:#cccccc}
.side-i{display:flex;align-items:center;gap:8px;width:100%;padding:4px 12px 4px 26px;border:0;background:none;color:#cccccc;font:13px var(--ui);text-align:left;cursor:pointer}
.side-i:hover{background:#2a2d2e}
.side-i[aria-current="true"]{background:#37373d;color:#fff;box-shadow:inset 1px 0 0 #4d90fe}
.fi{font:700 10px var(--mono);width:16px;text-align:center}
.fi.html{color:#e37933}.fi.md{color:#519aba}
.vsc-ed{display:flex;flex-direction:column;min-width:0;min-height:0;background:#1f1f1f}
.vsc-tabs{display:flex;background:#181818;border-bottom:1px solid #2b2b2b;overflow-x:auto;scrollbar-width:none}
.vtab{height:38px;display:flex;align-items:center;gap:8px;padding:0 16px;border:0;border-right:1px solid #2b2b2b;background:#181818;color:#9d9d9d;font:13px var(--ui);white-space:nowrap;cursor:pointer}
.vtab[aria-selected="true"]{background:#1f1f1f;color:#fff;box-shadow:inset 0 1.5px var(--yel)}
.vsc-pane{flex:1;min-height:0;overflow:auto}
.wl{padding:44px 22px 40px;max-width:1100px}
.wl-t{margin:0;font:300 clamp(40px,5.4vw,60px)/1.05 var(--ui);letter-spacing:-.02em;color:#fff}
.wl-s{margin:6px 0 34px;font:300 clamp(18px,2vw,24px) var(--ui);color:#9d9d9d}
.wl-cols{display:grid;gap:34px}
.wl h4{margin:0 0 12px;font:400 18px var(--ui);color:#fff}
.wl-start{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.wl-start button{display:flex;gap:10px;align-items:center;background:none;border:0;padding:0;color:#4daafc;font:14.5px var(--ui);cursor:pointer;text-align:left}
.wl-start button:hover{text-decoration:underline}
.wl-start small{color:#8b8b8b}
.wl-recent{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14px;color:#8b8b8b}
.wl-recent b{color:#4daafc;font-weight:400;margin-right:10px}
.walk{display:grid;gap:12px}
.wcard{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;padding:10px;border-radius:8px;background:#252526;border:1px solid #2f2f2f;cursor:pointer;text-align:left;width:100%}
.wcard:hover{background:#2a2d2e;border-color:#3c3c3c}
.wcard img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:5px}
.wcard b{display:flex;gap:8px;align-items:center;font:600 14.5px var(--ui);color:#fff}
.wcard small{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:#9d9d9d}
.badge-f{font:600 10px var(--ui);padding:2px 6px;border-radius:4px;background:var(--yel);color:#141414;letter-spacing:.02em}
.proj{display:grid;grid-template-columns:minmax(0,1fr);height:100%}
.code{margin:0;padding:14px 0 18px;font:400 13px/1.7 var(--mono);counter-reset:ln;overflow:auto;max-height:240px;border-top:1px solid #2b2b2b;order:2}
.code .l{display:grid;grid-template-columns:3.6em minmax(0,1fr)}
.code .l::before{counter-increment:ln;content:counter(ln);text-align:right;padding-right:1.4em;color:#6e7681;user-select:none}
.code .l>span{white-space:pre;padding-right:20px}
.t-tag{color:#569cd6}.t-attr{color:#9cdcfe}.t-str{color:#ce9178}.t-com{color:#6a9955}.t-p{color:#808080}.t-txt{color:#d4d4d4}
.pv{position:relative;display:flex;flex-direction:column;min-width:0;background:#181818}
.pv-bar{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid #2b2b2b}
.pv-url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:6px;background:#2a2a2a;font:12.5px var(--ui);color:#cccccc;overflow:hidden;white-space:nowrap}
.pv-url svg.i{width:13px;height:13px;color:#8b8b8b}
.pv-view{position:relative;flex:1;min-height:300px;overflow:hidden;background:#000}
.pv-view img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;max-width:none}
.pv-view img.fit{height:100%;object-fit:cover;object-position:top}
.pv-view img.scroll{animation:pvscroll 26s ease-in-out infinite alternate}
@keyframes pvscroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + var(--vh,400px)))}}
.pv-info{position:absolute;left:0;right:0;bottom:0;padding:110px 20px 18px;background:linear-gradient(rgb(0 0 0 / 0),rgb(0 0 0 / .78) 42%,rgb(0 0 0 / .94));display:flex;flex-wrap:wrap;gap:12px 20px;align-items:end;justify-content:space-between}
.pv-info h3{margin:0;font:800 24px/1.1 var(--ui);color:#fff}
.pv-info p{margin:4px 0 0;max-width:34rem;font-size:14.5px;line-height:1.5;color:#d5d5d5}
.pv-info .b{height:42px;padding:0 18px;font-size:14px}
.vsc-term{background:#181818;border-top:1px solid #2b2b2b}
.term-tabs{display:flex;gap:20px;padding:0 16px;height:34px;align-items:stretch;font:500 11px var(--ui);letter-spacing:.04em;text-transform:uppercase;color:#8b8b8b;overflow:hidden;white-space:nowrap}
.term-tabs span{display:flex;align-items:center}
.term-tabs .on{color:#e7e7e7;box-shadow:inset 0 -1px var(--yel)}
.term-out{height:168px;overflow:hidden;padding:6px 16px 10px;font:13px/1.65 var(--mono);color:#cccccc}
.term-out p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.term-out .dim{color:#8b8b8b}.term-out .acc{color:var(--yel)}.term-out .ok{color:#7fd18b}.term-out .you{color:#fff}
.caret{display:inline-block;width:8px;height:15px;background:#cccccc;vertical-align:-2px;animation:blink 1s steps(1) infinite}
.vsc-status{display:flex;gap:16px;height:24px;align-items:center;padding:0 12px;background:var(--yel);color:#141414;font:500 12px var(--ui);white-space:nowrap;overflow:hidden}
.vsc-status .r{margin-left:auto}
@media (min-width:900px){
  .vsc-main{grid-template-columns:48px 250px minmax(0,1fr)}
  .vsc-act{display:flex}.vsc-side{display:block}
  .wl{padding:64px 72px 48px}
  .wl-cols{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px}
  .proj{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .code{order:0;max-height:none;border-top:0;border-right:1px solid #2b2b2b}
  .pv-view{min-height:0}
}
@media (max-width:899px){
  .vsc-title{justify-content:flex-start;padding:0 14px 0 76px}
  .pv-info{position:static;padding:16px 16px 18px;background:#181818}
}

/* ================= photography: a curved wall of photos ================= */
.s-gallery{position:relative;background:#242424;color:#f2f2f2;overflow:hidden}
.gp-stage{position:relative;height:clamp(620px,100vh,980px);height:clamp(620px,100svh,980px);touch-action:pan-y;user-select:none;-webkit-user-select:none;background:radial-gradient(ellipse 75% 65% at 50% 52%,#2c2c2c,#232323 62%,#1c1c1c);outline:none}
.gp-stage:focus-visible{box-shadow:inset 0 0 0 2px #4d90fe}
.gp-title{position:absolute;left:0;right:0;top:clamp(70px,10vh,120px);margin:0;text-align:center;font:900 clamp(46px,13vw,210px)/.82 var(--ui);letter-spacing:-.055em;color:#f3f3f1;pointer-events:none}
.gp-room{position:absolute;inset:0;perspective-origin:50% 51%}
.gp-ring{position:absolute;left:50%;top:52%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.gp-item{position:absolute;left:0;top:0;transform-style:preserve-3d}
.gp-in{position:absolute;left:0;top:0;transform:translate(-50%,-50%);transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .9s}
.pre-fly .gp-in{transform:translate(-50%,-50%) translateZ(-900px);opacity:0}
.gp-ph{position:relative;transform-style:preserve-3d;display:block;padding:0;border:0;border-radius:2px;background:#151515;cursor:zoom-in;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
/* the backlight sits a few pixels behind the wall, so it glows around a photo but never over its neighbours */
.gp-ph::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 calc(-18px * var(--gs,1)) calc(70px * var(--gs,1)) calc(-20px * var(--gs,1)) var(--g1,#555),0 calc(26px * var(--gs,1)) calc(84px * var(--gs,1)) calc(-18px * var(--gs,1)) var(--g2,#555),0 calc(32px * var(--gs,1)) calc(40px * var(--gs,1)) calc(-26px * var(--gs,1)) rgb(0 0 0 / .85);transform:translateZ(-14px);pointer-events:none;transition:box-shadow .5s}
.gp-ph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px;pointer-events:none}
.gp-ph:hover,.gp-ph:focus-visible{transform:translateZ(calc(70px * var(--gs,1))) scale(1.03);outline:none}
.gp-ph:hover::before,.gp-ph:focus-visible::before{box-shadow:0 calc(-22px * var(--gs,1)) calc(120px * var(--gs,1)) calc(-8px * var(--gs,1)) var(--g1,#666),0 calc(32px * var(--gs,1)) calc(130px * var(--gs,1)) calc(-6px * var(--gs,1)) var(--g2,#666),0 calc(38px * var(--gs,1)) calc(50px * var(--gs,1)) calc(-26px * var(--gs,1)) rgb(0 0 0 / .9)}
.gp-glow{position:absolute;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;background:radial-gradient(circle,rgb(255 255 245 / .11),rgb(250 255 71 / .035) 38%,transparent 66%);mix-blend-mode:screen;pointer-events:none;opacity:0;transition:opacity .5s;will-change:transform}
.gp-stage.hover .gp-glow{opacity:1}
.gp-edge{position:absolute;top:0;bottom:0;width:15%;display:flex;align-items:center;pointer-events:none;opacity:0;transition:opacity .35s}
.gp-edge.l{left:0;padding-left:20px;background:linear-gradient(90deg,rgb(18 18 18 / .5),transparent)}
.gp-edge.r{right:0;justify-content:flex-end;padding-right:20px;background:linear-gradient(270deg,rgb(18 18 18 / .5),transparent)}
.gp-edge.on{opacity:1}
.gp-edge svg.i{width:30px;height:30px;color:#fff}
.gp-foot{position:absolute;left:0;right:0;bottom:clamp(20px,4vh,40px);display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;gap:10px 20px;padding:0 clamp(20px,4vw,48px);font:400 13px/1.45 var(--ui);color:#b5b5b5;pointer-events:none}
.gp-foot b{display:block;font:700 15px var(--ui);color:#fff}
.lb{position:fixed;inset:0;z-index:80;color:#fff;touch-action:none}
.lb-bg{position:absolute;inset:0;background:rgb(12 12 12 / .96)}
.lb-photo{position:fixed;left:0;top:0;display:block;max-width:none;margin:0;transform-origin:0 0;border-radius:2px;background:#151515;box-shadow:0 30px 90px rgb(0 0 0 / .55);user-select:none;-webkit-user-select:none;will-change:transform,opacity;cursor:zoom-out}
.lb-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;height:40px;padding:0 16px;border-radius:999px;border:0;background:#2a2a2a;font:700 14px var(--ui);cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgb(255 255 255 / .1);display:grid;place-items:center;cursor:pointer}
.lb-nav.p{left:12px}.lb-nav.n{right:12px}
.lb-x,.lb-nav{z-index:2;transition:opacity .3s}
.lb.ui-off .lb-x,.lb.ui-off .lb-nav{opacity:0;pointer-events:none}
@media (max-width:699px){.lb-nav{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:none}.lb-nav.p{left:calc(50% - 58px)}.lb-nav.n{right:calc(50% - 58px)}}

/* ================= editing: resolve ================= */
.s-resolve{background:#1b1b1d;color:#c9c9cb;color-scheme:dark}
.rv-head{max-width:1320px;margin:0 auto;padding:clamp(96px,10vw,128px) clamp(20px,4vw,40px) 28px;display:flex;flex-wrap:wrap;gap:12px 40px;align-items:end;justify-content:space-between}
.rv-head h2{margin:8px 0 0;font:800 clamp(40px,5vw,64px)/1 var(--ui);letter-spacing:-.035em;color:#fff}
.rv-head p{margin:0;max-width:30rem;font-size:16.5px;color:#a3a3a6;text-wrap:pretty}
.rv-pitch{display:grid;gap:18px;justify-items:start;max-width:30rem}
.b-orange{background:#e8743b;color:#141414}
.b-orange:hover{background:#f08a55}
.rsv{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"tools" "viewer" "tl" "pages";border-top:1px solid #0e0e10}
.rv-tools{grid-area:tools;display:flex;gap:22px;align-items:center;height:34px;padding:0 14px;background:#232325;border-bottom:1px solid #0e0e10;font:500 12px var(--ui);color:#9a9a9d;white-space:nowrap;overflow:hidden}
.rv-tools .r{margin-left:auto}
.rv-tools .on{color:#e9e9ea}
.rv-pool,.rv-insp{display:none}
.rv-pool{grid-area:pool;background:#232325;border-right:1px solid #0e0e10;padding:10px}
.pool-h{margin:0 0 10px;font:600 11px var(--ui);color:#8c8c90;letter-spacing:.04em}
.pool-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pool-c{padding:0;border:0;background:none;text-align:left;cursor:pointer}
.pool-c img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px;border:1.5px solid transparent}
.pool-c.on img{border-color:#e8743b}
.pool-c span{display:block;margin-top:4px;font:500 11px var(--ui);color:#c9c9cb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-view{grid-area:viewer;background:#161618;padding:10px 12px 12px;min-width:0}
.rv-vh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font:500 12px var(--ui);color:#9a9a9d}
.rv-vh .tc{font:600 14px var(--mono);color:#e8743b;font-variant-numeric:tabular-nums}
.vframe{position:relative;aspect-ratio:16/9;max-height:62vh;margin:0 auto;background:#000;overflow:hidden}
.vframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.vframe video.on{opacity:1}
.transport{display:flex;justify-content:center;gap:6px;margin-top:10px}
.tbtn{width:40px;height:34px;border-radius:6px;border:1px solid #2f2f32;background:#232325;color:#e2e2e4;display:grid;place-items:center;cursor:pointer;padding:0}
.tbtn.play{width:52px;color:#e8743b}
.tbtn svg.i{width:17px;height:17px}
.rv-insp{grid-area:insp;background:#232325;border-left:1px solid #0e0e10;padding:12px 14px;font-size:12.5px}
.insp-h{display:flex;gap:16px;margin:0 0 12px;font:600 12px var(--ui);color:#8c8c90}
.insp-h .on{color:#e9e9ea}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0}
.kv dt{color:#8c8c90}.kv dd{margin:0;text-align:right;font-family:var(--mono);color:#e2e2e4;font-variant-numeric:tabular-nums}
.insp-p{margin:14px 0 0;line-height:1.5;color:#a3a3a6}
.timeline{grid-area:tl;display:grid;grid-template-columns:76px minmax(0,1fr);background:#1f1f21;border-top:1px solid #0e0e10;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.th{display:flex;flex-direction:column;justify-content:center;padding:0 10px;font:600 11px var(--ui);color:#c9c9cb;background:#262628;border-bottom:1px solid #141416;border-right:1px solid #0e0e10}
.th small{font-weight:400;color:#8c8c90;font-size:10px}
.th.r,.ruler{height:28px}.th.v,.lane.v1{height:64px}.th.a,.lane.a1{height:60px}
.th.a{position:relative}
.th .mute{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;border-radius:3px;background:#c4453b;color:#fff;font:700 10px/1 var(--ui)}
.tl-lanes{position:relative;cursor:col-resize}
.ruler{position:relative;background:#262628;border-bottom:1px solid #141416;overflow:hidden}
.tick{position:absolute;bottom:0;width:1px;height:5px;background:#5c5c60}
.tick.major{height:11px;background:#8c8c90}
.tick b{position:absolute;left:4px;bottom:10px;font:400 9.5px var(--mono);color:#9a9a9d;white-space:nowrap}
.lane{position:relative;border-bottom:1px solid #141416}
.clip{position:absolute;top:5px;bottom:5px;border-radius:3px;background-color:#3a5b7a;background-repeat:repeat-x;background-position:0 17px;background-size:auto calc(100% - 17px);border:1px solid #5c86ad;overflow:hidden}
.clip span{position:absolute;inset:0 0 auto;height:17px;padding:0 6px;font:600 10px/17px var(--ui);color:#eaf2fa;background:#3a5b7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip.on{border-color:#e8743b;box-shadow:inset 0 0 0 1px #e8743b}
.clip .thumb{position:absolute;left:0;top:17px;bottom:0;width:62px;background-repeat:no-repeat}
.aclip{position:absolute;top:4px;bottom:4px;border-radius:3px;background:#2d5541;border:1px solid #4a8565;overflow:hidden}
.aclip span{position:absolute;inset:0 0 auto;height:15px;padding:0 6px;font:600 9.5px/15px var(--ui);color:#d9f3e4;background:#2d5541;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aclip.on{border-color:#e8743b;box-shadow:inset 0 0 0 1px #e8743b}
.wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lane .empty{position:absolute;left:10px;top:50%;transform:translateY(-50%);font:11px var(--ui);color:#6e6e72}
.playhead{position:absolute;top:0;bottom:0;left:0;width:0;border-left:1.5px solid #ff4b3a;pointer-events:none;will-change:transform}
.playhead i{position:absolute;top:0;left:-7.5px;width:14px;height:15px;background:#ff4b3a;clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
.rv-pages{grid-area:pages;display:flex;justify-content:center;gap:4px;padding:8px 10px;background:#232325;border-top:1px solid #0e0e10;overflow-x:auto;scrollbar-width:none}
.pg{display:grid;justify-items:center;gap:3px;min-width:64px;padding:4px 6px;font:500 11px var(--ui);color:#8c8c90}
.pg i{width:22px;height:22px;border-radius:6px;border:1.5px solid currentColor;opacity:.8}
.pg.on{color:#e8743b}
@media (min-width:980px){
  .rsv{grid-template-columns:250px minmax(0,1fr) 290px;grid-template-areas:"tools tools tools" "pool viewer insp" "tl tl tl" "pages pages pages"}
  .rv-pool,.rv-insp{display:block}
}

/* ================= youtube ================= */
.s-yt{background:#fff;color:#0f0f0f;color-scheme:light;font-family:var(--yt);padding-bottom:72px}
.yt-top{display:flex;align-items:center;gap:16px;height:60px;padding:0 20px;margin-top:70px}
.yt-logo{display:flex;align-items:center;gap:6px;font:700 18px var(--yt);letter-spacing:-.04em;white-space:nowrap}
.yt-logo i{width:30px;height:21px;border-radius:6px;background:#ff0033;display:grid;place-items:center}
.yt-logo i::after{content:"";border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.yt-search{flex:1;max-width:620px;margin:0 auto;display:none;align-items:center;height:40px;border:1px solid #d3d3d3;border-radius:20px;overflow:hidden}
.yt-search span{flex:1;padding:0 16px;font-size:16px;color:#0f0f0f}
.yt-search i{width:64px;height:100%;display:grid;place-items:center;background:#f8f8f8;border-left:1px solid #d3d3d3}
.yt-av-s{width:32px;height:32px;border-radius:50%;margin-left:auto}
.yt-wrap{max-width:1284px;margin:0 auto;padding:0 20px}
.yt-banner{position:relative;height:clamp(96px,16vw,206px);border-radius:14px;overflow:hidden;background:#f4efe6}
/* the banner crops like YouTube's: a centred strip on desktop, a narrower window on phones that keeps the face and the name */
.yt-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media (max-width:700px){.yt-banner img{object-position:68% 50%}}
.yt-chan{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 20px;align-items:center;margin:18px 0 6px}
.yt-chan img{width:clamp(72px,12vw,160px);height:clamp(72px,12vw,160px);border-radius:50%}
.yt-chan h3,.yt-name{margin:0;font:700 clamp(24px,3.4vw,36px)/1.15 var(--yt);letter-spacing:-.01em}
.yt-meta{margin:6px 0 0;font-size:14px;color:#606060}
.yt-meta b{color:#0f0f0f;font-weight:500}
.yt-desc{margin:8px 0 12px;font-size:14px;color:#606060}
.yt-sub{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:18px;background:#0f0f0f;color:#fff;font:500 14px var(--yt);text-decoration:none}
.yt-sub:hover{background:#272727}
.yt-tabs{display:flex;gap:26px;border-bottom:1px solid #e5e5e5;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.yt-tabs span{padding:12px 0;font:500 16px var(--yt);color:#606060;white-space:nowrap}
.yt-tabs .on{color:#0f0f0f;box-shadow:inset 0 -2px #0f0f0f}
.yt-feat{display:grid;gap:18px;padding:24px 0;border-bottom:1px solid #e5e5e5}
.yt-player{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.yt-player img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.yt-player:hover img{transform:scale(1.025)}
.yt-play{position:absolute;inset:0;margin:auto;width:68px;height:48px;border-radius:14px;background:rgb(15 15 15 / .8);display:grid;place-items:center;transition:background .2s}
.yt-player:hover .yt-play{background:#ff0033}
.yt-play::after{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.yt-dur{position:absolute;right:8px;bottom:8px;padding:1px 5px;border-radius:4px;background:rgb(0 0 0 / .8);color:#fff;font:500 12px var(--yt)}
.yt-ft h3,.yt-ft h4{margin:0 0 8px;font:500 20px/1.35 var(--yt)}
.yt-ft p{margin:0;font-size:14px;color:#606060;line-height:1.55}
.yt-shelf{padding:24px 0 6px}
.yt-shelf h3,.yt-shelf h4{display:flex;align-items:center;gap:8px;margin:0 0 16px;font:700 20px var(--yt)}
.shorts-ic{width:20px;height:24px;border-radius:6px;background:#ff0033;display:grid;place-items:center}
.shorts-ic::after{content:"";border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px}
.shorts{display:grid;grid-auto-flow:column;grid-auto-columns:min(44%,210px);gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.short{display:block;text-decoration:none;color:inherit}
.short img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px}
.short b{display:block;margin-top:8px;font:500 15px/1.3 var(--yt)}
.short small{font-size:13px;color:#606060}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px 16px}
.vcard{display:block;text-decoration:none;color:inherit}
.vcard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.vcard b{display:block;margin-top:10px;font:500 15px/1.35 var(--yt)}
.vcard small{display:block;margin-top:3px;font-size:13px;color:#606060}
@media (min-width:860px){.yt-search{display:flex}.yt-av-s{margin-left:0}.yt-feat{grid-template-columns:minmax(0,424px) minmax(0,1fr);align-items:start}}

/* ================= posts: x (light mode) ================= */
.s-x{background:#fff;color:#0f1419;color-scheme:light;padding-top:64px}
.x-grid{display:grid;grid-template-columns:minmax(0,600px);justify-content:center}
.x-rail,.x-aside{display:none}
.x-main{border-left:1px solid #eff3f4;border-right:1px solid #eff3f4;min-width:0}
.x-headbar{display:flex;align-items:center;gap:28px;height:54px;padding:0 16px}
.x-headbar b,.x-title{display:block;margin:0;font:800 20px/1.2 var(--ui)}
.x-headbar small{color:#536471;font-size:13px}
.x-banner{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;object-position:center 62%}
.x-prof{position:relative;display:flow-root;padding:0 16px 14px}
.x-av{display:block;width:clamp(84px,22vw,134px);height:clamp(84px,22vw,134px);border-radius:50%;border:4px solid #fff;margin-top:calc(clamp(84px,22vw,134px) / -2)}
.x-follow{position:absolute;right:16px;top:12px;display:inline-flex;align-items:center;height:36px;padding:0 18px;border-radius:18px;background:#0f1419;color:#fff;font:800 15px var(--ui);text-decoration:none}
.x-name{margin:10px 0 0;font:800 20px/1.2 var(--ui)}
.x-handle{color:#536471;font-size:15px}
.x-bio{margin:12px 0 10px;font-size:15.5px;line-height:1.4}
.x-meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:#536471;font-size:15px}
.x-tabs{display:flex;border-bottom:1px solid #eff3f4}
.x-tabs span{flex:1;text-align:center;padding:15px 0 13px;font:600 15px var(--ui);color:#536471}
.x-tabs .on{color:#0f1419;font-weight:800;box-shadow:inset 0 -4px #0f1419}
.feed{list-style:none;margin:0;padding:0}
.feed .post{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:12px 16px;border-bottom:1px solid #eff3f4;transition:background .2s}
.feed .post:hover{background:#f7f7f7}
.feed .post .av{width:40px;height:40px;border-radius:50%}
.post-h{font-size:15px;color:#536471;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-h b{color:#0f1419;font-weight:700}
.feed .post p{margin:2px 0 10px;font-size:15.5px;line-height:1.42}
.post-card{display:block;border:1px solid #cfd9de;border-radius:16px;padding:11px 14px;text-decoration:none;font-size:14.5px;line-height:1.35}
.post-card small{display:block;color:#536471;font-size:13px;margin-bottom:2px}
.acts{display:flex;justify-content:space-between;max-width:425px;margin-top:10px;color:#536471}
.acts svg.i{width:18.5px;height:18.5px}
.x-rail{flex-direction:column;align-items:flex-end;gap:4px;padding:6px 12px 0 0}
.x-rail span{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;color:#0f1419}
.x-rail svg.i{width:26px;height:26px}
.x-aside{padding:12px 0 0 26px}
.x-card{border-radius:16px;background:#f7f9f9;padding:14px 16px}
.x-card h3,.x-card h4{margin:0 0 10px;font:800 20px var(--ui)}
.x-card a{display:block;padding:10px 0;text-decoration:none;border-top:1px solid #eff3f4;font-size:15px}
.x-card a small{display:block;color:#536471;font-size:13px}
.x-note{margin:16px;color:#536471}
@media (min-width:1080px){.x-grid{grid-template-columns:90px 600px 350px}.x-rail{display:flex}.x-aside{display:block}}

/* ================= writing: notes ================= */
.s-notes{background:#fff;color:#1d1d1f;color-scheme:light}
.notes-app{display:grid;grid-template-columns:minmax(0,1fr)}
.notes-side{background:#f5f5f4;border-top:1px solid #e7e7e4;padding:24px 12px 40px}
.notes-side h2{margin:0;padding:0 12px;font:900 34px/1 var(--ui);letter-spacing:-.03em}
.notes-side > p{margin:6px 0 16px;padding:0 12px;font-size:14px;color:#8a8a86}
.note-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.nbtn{display:block;width:100%;text-decoration:none;text-align:left;padding:11px 12px;border:0;border-radius:10px;background:none;cursor:pointer;color:#1d1d1f}
.nbtn b{display:block;font:700 15px/1.3 var(--ui)}
.nbtn small{display:flex;gap:8px;margin-top:3px;font-size:13px;color:#8a8a86}
.nbtn small span:first-child{white-space:nowrap;flex:none}
.nbtn small span:last-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nbtn:hover{background:#ececea}
.nbtn[aria-current="true"]{background:var(--yel)}
.nbtn[aria-current="true"] small{color:#3d3d00}
.note-read{padding:110px clamp(20px,6vw,104px) 64px;min-width:0}
.nr-date{margin:0 0 28px;text-align:center;font:500 13px var(--ui);color:#9a9a96}
.nr-cat{font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8a8a86}
.nr-title{margin:10px 0 18px;max-width:22ch;font:700 clamp(34px,4.4vw,58px)/1.06 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.nr-body{margin:0 0 30px;max-width:60ch;font:400 clamp(19px,1.6vw,22px)/1.65 var(--serif);color:#2c2c2e;text-wrap:pretty}
.nr-body::first-letter{float:left;font:700 3.3em/.8 var(--serif);margin:.08em .1em 0 0;color:#141414}
.b-ink{background:#141414;color:#fff}
@media (min-width:900px){
  .notes-app{grid-template-columns:360px minmax(0,1fr);min-height:760px}
  .notes-side{order:-1;border-top:0;border-right:1px solid #e7e7e4;padding:110px 14px 40px}
}

/* ================= music ================= */
.s-spot{background:linear-gradient(180deg,#a2541e 0,#5a2a0d 330px,#121212 640px);color:#fff}
.sp-head{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:end;padding:110px clamp(20px,4vw,48px) 22px}
.sp-art{position:relative;width:min(62vw,232px);aspect-ratio:1;box-shadow:0 10px 50px rgb(0 0 0 / .55);background:radial-gradient(circle at 70% 30%,#f2c27a,transparent 45%),linear-gradient(160deg,#c7743a,#4a2410);display:grid;place-items:center;overflow:hidden}
.sp-art .logo-mark{width:58%;height:24%;color:#1b0e06}
.sp-art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgb(255 255 255 / .04) 0 2px,transparent 2px 5px)}
.sp-kind{font:700 13px var(--ui)}
.sp-title{margin:6px 0 14px;font:900 clamp(44px,8vw,104px)/.95 var(--ui);letter-spacing:-.045em}
.sp-meta{font:600 14.5px var(--ui)}
.sp-meta span{color:#d6c7bd;font-weight:500}
.sp-ctl{max-width:1320px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;padding:18px clamp(20px,4vw,48px) 22px}
.sp-play{width:58px;height:58px;border-radius:50%;border:0;background:var(--yel);display:grid;place-items:center;cursor:pointer;transition:transform .15s;flex:none}
.sp-play{cursor:default}
.sp-play::after{content:"";border-left:17px solid #141414;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.sp-play.on::after{border:0;width:16px;height:18px;margin:0;background:linear-gradient(90deg,#141414 0 35%,transparent 35% 65%,#141414 65%)}
.prog{flex:1;min-width:220px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;font:500 12px var(--ui);color:#b3b3b3;font-variant-numeric:tabular-nums}
.pbar{height:4px;border-radius:2px;background:rgb(255 255 255 / .25);overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.sp-table{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,48px) 76px}
a.sp-row{text-decoration:none;color:inherit}
.sp-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:16px;align-items:center;padding:8px 10px;border-radius:6px;font-size:15px}
.sp-row.hd{font:500 13px var(--ui);color:#b3b3b3;border-bottom:1px solid rgb(255 255 255 / .1);border-radius:0;margin-bottom:8px}
.sp-row:not(.hd):hover{background:rgb(255 255 255 / .08)}
.sp-row .n{color:#b3b3b3;text-align:right;font-variant-numeric:tabular-nums}
.sp-row small{display:block;color:#b3b3b3;font-size:13.5px}
.sp-row.now b{color:var(--yel)}
.sp-row .al{display:none;color:#b3b3b3}
.sp-row.hd span:last-child{text-align:right}
.sp-row time{text-align:right;white-space:nowrap;color:#b3b3b3;font-variant-numeric:tabular-nums}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
.eq i{width:3px;height:100%;background:var(--yel);transform-origin:bottom;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.35s}.eq i:nth-child(3){animation-delay:-.7s}
.eq.paused i{animation-play-state:paused}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@media (min-width:760px){.sp-head{grid-template-columns:auto minmax(0,1fr);gap:30px}.sp-row{grid-template-columns:28px minmax(0,1.4fr) minmax(0,1fr) 104px}.sp-row .al{display:block}}

/* ================= chess ================= */
.s-chess{background:#302e2b;color:#fff;--cg:#81b64c;--cp:#262421;--cp2:#3c3a37;--cm:#a8a6a2}
.cz{max-width:1260px;margin:0 auto;padding:clamp(96px,10vw,120px) clamp(16px,3vw,28px) 72px;display:grid;gap:22px}
.cz-head{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:end;justify-content:space-between}
.cz-head h2{margin:6px 0 0;font:800 clamp(38px,4.6vw,60px)/1 var(--ui);letter-spacing:-.035em}
.cz-head p{margin:0;max-width:30rem;color:var(--cm);font-size:16px;text-wrap:pretty}
.cz-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.prow{display:flex;align-items:center;gap:10px;padding:8px 0}
.pav{width:40px;height:40px;border-radius:4px;object-fit:cover;flex:none;background:#4b4846;display:grid;place-items:center;font:30px/1 var(--chess);color:#9a9794}
.pname{min-width:0;font:700 15px/1.25 var(--ui);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pname small{color:var(--cm);font-weight:500;margin-left:4px}
.clock{margin-left:auto;min-width:96px;padding:7px 12px;border-radius:4px;font:700 24px/1.1 var(--ui);font-variant-numeric:tabular-nums;text-align:right;opacity:.7}
.clock.white{background:#e9e8e6;color:#2b2a28}
.clock.black{background:#1f1e1c;color:#fff}
.clock.on{opacity:1}
.board{--sq:40px;position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:1;width:100%;border-radius:4px;overflow:hidden;user-select:none;-webkit-user-select:none}
.sq{position:relative;min-width:0;min-height:0}
.sq.light{background:#dad8d5}.sq.dark{background:#86827f}
.sq.hl::before{content:"";position:absolute;inset:0;background:rgb(250 255 71 / .5)}
.co{position:absolute;font:700 calc(var(--sq) * .19)/1 var(--ui);pointer-events:none}
.co.rank{left:5%;top:4%}.co.file{right:6%;bottom:4%}
.sq.light .co{color:#86827f}.sq.dark .co{color:#dad8d5}
.pc{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font:400 calc(var(--sq) * .82)/1 var(--chess);pointer-events:none;transition:transform .26s cubic-bezier(.3,.8,.3,1)}
.pc i{display:block;font-style:normal;line-height:1;transform:translate(var(--ox,0),var(--oy,0))}
.pc.moving{z-index:3}
.pc.white{color:#f7f6f3;text-shadow:1px 0 0 #55524e,-1px 0 0 #55524e,0 1px 0 #55524e,0 -1px 0 #55524e,0 3px 4px rgb(0 0 0 / .35)}
.pc.black{color:#4a4744;text-shadow:0 0 1px #2a2826,0 3px 4px rgb(0 0 0 / .35)}
.arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.cpanel{background:var(--cp);border-radius:8px;overflow:hidden}
.cp-tabs{display:flex;background:#21201d}
.cp-tabs span{flex:1;padding:12px 6px;text-align:center;font:700 13px var(--ui);color:var(--cm)}
.cp-tabs .on{color:#fff;background:var(--cp);box-shadow:inset 0 -2px var(--cg)}
.cp-sec{padding:16px 18px;border-bottom:1px solid #1d1c1a}
.rt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-items:center}
.rt-k{font:700 12px var(--ui);color:var(--cm);letter-spacing:.04em;text-transform:uppercase}
.rt-n{font:800 40px/1 var(--ui);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.trend{display:inline-block;margin-left:10px;padding:4px 9px;border-radius:5px;font:800 13px var(--ui);vertical-align:8px}
.trend.up{background:rgb(129 182 76 / .2);color:#9ed36a}
.trend.down{background:rgb(255 90 79 / .18);color:#ff7a6f}
.spark{display:block;width:100%;height:56px;overflow:visible}
.rt-sub{grid-column:1/-1;margin:6px 0 0;font-size:13.5px;color:var(--cm)}
.lt-big{margin:2px 0 6px;font:800 44px/1 var(--ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lt-big span{font-size:16px;color:var(--cm);margin-left:6px;letter-spacing:0}
.lt-p{margin:0 0 6px;font-size:15.5px;line-height:1.5;text-wrap:pretty}
.lt-res{margin:0;font-size:13px;color:var(--cm)}
.bars-h{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;font:700 13px var(--ui)}
.bars-h small{font-weight:500;color:var(--cm)}
.bars{position:relative;display:flex;align-items:flex-end;gap:2px;height:104px;padding-left:28px;border-bottom:1px solid #4b4846;touch-action:pan-y}
.gl{position:absolute;left:0;right:0;border-top:1px dashed #3f3d3a;pointer-events:none;z-index:2}
.gl b{position:absolute;left:0;top:-7px;padding-right:4px;background:var(--cp);font:500 10px/14px var(--ui);color:var(--cm)}
.bar{flex:1 1 0;min-width:0;height:var(--h);min-height:2px;padding:0;border:0;border-radius:2px 2px 0 0;background:#5d5a56;cursor:pointer;z-index:1}
.bar:hover{background:#8c8985}
.bar.max{background:var(--yel)}
.bar[aria-current="true"]{background:#fff}
.bar.max[aria-current="true"]{background:var(--yel);box-shadow:0 0 0 2px #fff}
.ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cbtn{height:44px;min-width:46px;padding:0 14px;border-radius:6px;border:0;background:var(--cp2);color:#fff;font:800 15px var(--ui);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:inset 0 -3px rgb(0 0 0 / .25);text-decoration:none}
.cbtn:hover{background:#4b4946}
.cbtn.go{background:var(--cg);flex:1;min-width:190px}
.cbtn.go:hover{background:#95cc5c}
.cbtn svg.i{width:18px;height:18px}
.moves{max-height:190px;overflow:auto;font:600 13.5px/1 var(--ui);font-variant-numeric:tabular-nums}
.mrow{display:grid;grid-template-columns:34px 1fr 1fr;align-items:center}
.mrow:nth-child(odd){background:#2b2926}
.mrow .mn{padding:7px 0 7px 10px;color:var(--cm)}
.mv{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 10px;border:0;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer}
.mv small{font:500 11px var(--ui);color:var(--cm)}
.mv.cur{background:#4b4846;border-radius:3px}
.mv.long small{color:var(--yel)}
.games{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.gchip{flex:none;display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:5px;border:0;background:var(--cp2);font:700 12.5px var(--ui);color:#fff;cursor:pointer}
.gchip i{width:9px;height:9px;border-radius:2px;background:var(--cm)}
.gchip i.win{background:var(--cg)}.gchip i.loss{background:#e05a4f}
.gchip[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--yel)}
@media (min-width:980px){.cz-grid{grid-template-columns:minmax(0,600px) minmax(0,1fr)}}

/* ================= guitar ================= */
.s-guitar{position:relative;background:radial-gradient(ellipse 60% 70% at 32% 60%,rgb(242 166 90 / .13),transparent 70%),#1a1817;color:#fff;overflow:hidden}
.gt-copy{padding:96px 20px 4px;max-width:420px}
.gt-copy h2{margin:8px 0 10px;font:800 clamp(30px,3.2vw,44px)/1.05 var(--ui);letter-spacing:-.03em}
.gt-copy p{margin:0;color:#c9bfb5;font-size:16px;line-height:1.55;text-wrap:pretty}
#gt{display:block;width:100%;height:400px;touch-action:pan-y;cursor:pointer}
.gt-dock{display:grid;gap:14px;padding:4px 20px 44px}
.scale{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:3px;max-width:470px;font:600 12px var(--mono);color:#6f675f}
.scale span{min-width:0;padding:4px 0;white-space:nowrap;border-radius:5px;text-align:center;transition:color .25s,background .25s}
.scale span.on{color:#141414;background:var(--yel)}
.scale span.done{color:#efe7dc}
.gt-ctl{display:flex;flex-wrap:wrap;gap:8px}
.snd,.again{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:999px;border:1.5px solid rgb(255 255 255 / .22);background:transparent;font:700 13.5px var(--ui);cursor:pointer}
.again:hover{border-color:#fff}
.snd.on{border-color:var(--yel);color:var(--yel)}
.snd.locked{background:var(--yel);color:#141414;border-color:var(--yel)}
.snd svg.i,.again svg.i{width:17px;height:17px}
#notesLayer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}
.note{position:absolute;font-weight:700;line-height:1;color:var(--yel);text-shadow:0 2px 12px rgb(0 0 0 / .5);will-change:transform,opacity}
.note.alt{color:#fff}
@media (min-width:820px){
  .gt-copy{position:absolute;z-index:1;top:clamp(72px,7vw,110px);right:clamp(20px,6vw,96px);padding:0;max-width:390px}
  #gt{height:clamp(480px,48vw,700px)}
  .gt-dock{position:absolute;z-index:1;right:clamp(20px,6vw,96px);bottom:clamp(28px,4vw,56px);padding:0;width:390px}
}

/* ================= contact ================= */
.s-contact{background:var(--yel);color:#141414;color-scheme:light;padding:clamp(110px,12vw,150px) clamp(20px,5vw,64px) 64px}
.ct-in{max-width:1240px;margin:0 auto}
.s-contact h2{margin:0;font:900 clamp(60px,11vw,168px)/.86 var(--ui);letter-spacing:-.055em}
.s-contact .lead{margin:26px 0 44px;max-width:36rem;font-size:clamp(18px,1.6vw,21px);line-height:1.55;text-wrap:pretty}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));border-top:2px solid #141414}
.ct{display:grid;gap:4px;align-content:start;padding:20px 0 22px;border-bottom:1px solid rgb(0 0 0 / .2)}
.ct small{font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.ct .v{font:800 clamp(19px,1.75vw,24px)/1.2 var(--ui);letter-spacing:-.02em;overflow-wrap:break-word;text-decoration:none;user-select:all}
.ct a.v:hover{text-decoration:underline}
.ct-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1.5px solid #141414;background:transparent;font:700 13.5px var(--ui);text-decoration:none;cursor:pointer;color:#141414}
.pill.solid{background:#141414;color:var(--yel)}
.pill svg.i{width:15px;height:15px}
@media (min-width:860px){.ct{padding-right:28px}}
.site-foot{background:var(--char);color:#8d8d8d;padding:26px 20px calc(30px + env(safe-area-inset-bottom,0px));font:500 12.5px var(--mono)}
.site-foot div{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pre .rv{opacity:1;transform:none}
  .ticker{overflow-x:auto}
}

/* ================= theme additions ================= */
.skip{position:absolute;left:12px;top:-80px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--yel);color:#141414;font:800 14px var(--ui);text-decoration:none}
.skip:focus{top:12px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* logged-in admin bar */
body.admin-bar .nav{top:calc(42px + env(safe-area-inset-top,0px))}
@media (max-width:782px){body.admin-bar .nav{top:56px}}

/* gallery: Instagram call to action, and the note editors see while the wall is empty */
.gp-foot a{pointer-events:auto}
.gp-cta{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:999px;background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .16);color:#fff;font:700 14px var(--ui);text-decoration:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .25s,border-color .25s,color .25s}
.gp-cta svg.i{width:18px;height:18px}
.gp-cta small{font:500 12px var(--mono);color:#a9a9a9;transition:color .25s}
.gp-cta:hover,.gp-cta:focus-visible{background:var(--yel);border-color:var(--yel);color:#141414}
.gp-cta:hover small,.gp-cta:focus-visible small{color:#3d3d00}
.admin-note{max-width:640px;margin:0 auto;padding:140px 20px;color:#b5b5b5;text-align:center}
.admin-note a{color:var(--yel)}
.gp-noscript{list-style:none;margin:0;padding:120px 16px 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.gp-noscript img{display:block;width:100%;height:auto}

/* videos play in place */
.short-img{display:block;border-radius:12px;overflow:hidden;background:#000}
.short-img img{border-radius:0}
.yt-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:68px 16px 24px;background:rgb(0 0 0 / .92);color:#fff}
.yt-frame{width:min(100%,1100px,calc((100vh - 110px) * 16 / 9));width:min(100%,1100px,calc((100svh - 110px) * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.yt-modal.short .yt-frame{width:min(100%,420px,calc((100vh - 110px) * 9 / 16));width:min(100%,420px,calc((100svh - 110px) * 9 / 16));aspect-ratio:9/16}
.yt-frame iframe{display:block;width:100%;height:100%;border:0}

/* X */
.x-banner-plain{background:linear-gradient(120deg,#242424,#3a3a3a)}
.post-open{display:inline-flex;align-items:center;gap:6px;color:#536471;font:500 13.5px var(--ui);text-decoration:none}
.post-open:hover{color:#1d9bf0}
.post-open svg.i{width:15px;height:15px}
.feed .post-empty{display:block;padding:28px 16px}
.feed .post-empty p{margin:0 0 14px;color:#536471}
.x-follow-inline{display:inline-flex;align-items:center;height:36px;padding:0 18px;border-radius:18px;background:#0f1419;color:#fff;font:800 15px var(--ui);text-decoration:none}

/* music: real album art */
.sp-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ================= blog, posts and pages ================= */
body.is-page{background:#fff;color:#1d1d1f;color-scheme:light}
main.blog,main.post-page{min-height:70vh;padding:clamp(108px,12vw,140px) clamp(20px,5vw,48px) 88px}
.blog-head{max-width:760px;margin:0 auto 36px}
.blog-head h1{margin:8px 0 12px;font:900 clamp(40px,6vw,72px)/1 var(--ui);letter-spacing:-.04em;text-wrap:balance}
.blog-head p{margin:0;font-size:18px;color:#5c5c5a;max-width:36rem;text-wrap:pretty}
.blog-head .lost-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.b-line{border-color:rgb(0 0 0 / .25);color:#141414;background:transparent}
.b-line:hover{border-color:#141414}
.blog-list{list-style:none;margin:0 auto;padding:0;max-width:760px;border-top:2px solid #141414}
.blog-list a{display:grid;grid-template-columns:minmax(0,1fr) 92px;grid-template-areas:"date img" "main img";gap:4px 18px;align-items:start;padding:22px 0 24px;border-bottom:1px solid #e7e7e4;text-decoration:none;color:inherit}
.blog-list .bl-date{grid-area:date}.blog-list .bl-main{grid-area:main;min-width:0}
.bl-img{grid-area:img;display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#f1f1ef}
.bl-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.blog-list a:hover .bl-img img{transform:scale(1.04)}
.bl-date{font:500 13px var(--mono);color:#8a8a86}
.bl-t{display:inline;font:700 clamp(22px,2.4vw,28px)/1.25 var(--serif);letter-spacing:-.01em;color:#141414;transition:box-shadow .2s}
.blog-list a:hover .bl-t,.blog-list a:focus-visible .bl-t{box-shadow:inset 0 -.38em var(--yel)}
.bl-ex{display:block;margin-top:8px;color:#4a4a48;font:400 16.5px/1.6 var(--serif)}
.bl-meta{display:block;margin-top:10px;font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8a8a86}
@media (min-width:760px){.blog-list a{grid-template-columns:130px minmax(0,1fr) 168px;grid-template-areas:"date main img";gap:4px 28px}.bl-date{padding-top:7px}}
.blog-empty{max-width:760px;margin:0 auto;color:#5c5c5a}
.pager{max-width:760px;margin:32px auto 0}
.pager .nav-links{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 14px;border-radius:999px;border:1.5px solid #e1e1de;text-decoration:none;font:700 14px var(--ui);color:#141414}
.page-numbers:hover{border-color:#141414}
.page-numbers.current{background:#141414;border-color:#141414;color:#fff}
.page-numbers.dots{border-color:transparent}

/* a single post reads like an open note */
.entry{max-width:720px;margin:0 auto}
/* standalone pages (a client gallery, say) get room for wide and full-width blocks */
.entry-wide{max-width:1160px}
.entry-wide .entry-head{max-width:720px}
.prose .alignwide{max-width:none;margin-left:max(-80px,min(0px,calc((720px - 100vw) / 2 + 20px)));margin-right:max(-80px,min(0px,calc((720px - 100vw) / 2 + 20px)))}
.entry-wide .prose .alignwide{margin-left:0;margin-right:0}
.prose .alignfull{max-width:none;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.entry-head{margin-bottom:30px}
.back{display:inline-flex;align-items:center;gap:6px;margin-bottom:28px;padding:8px 14px 8px 10px;border-radius:999px;background:#f2f2f0;font:700 14px var(--ui);text-decoration:none;color:#141414;transition:background .2s}
.back:hover{background:var(--yel)}
.back svg.i{width:16px;height:16px}
.entry-head .nr-date{text-align:left;margin:0 0 8px}
.entry-title{margin:4px 0 16px;font:800 clamp(32px,4.4vw,44px)/1.15 var(--ui);letter-spacing:-.025em;color:#1d1d1f;text-wrap:balance}
/* a post's top, set like a Notion page: cover, icon, title, properties */
main.post-page.has-cover{padding-top:0}
.entry-cover{width:100vw;height:clamp(190px,30vh,320px);margin:0 calc(50% - 50vw) 0;overflow:hidden;background:#f1f1ef}
.entry-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.page-icon{display:block;height:78px;font:72px/78px "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.has-cover .page-icon{position:relative;margin-top:-40px}
.crumb{display:inline-flex;align-items:center;gap:3px;margin:16px 0 2px -4px;padding:2px 8px 2px 3px;border-radius:5px;font:500 14px var(--ui);color:#787774;text-decoration:none;transition:background .15s,color .15s}
.crumb:hover{background:#efefed;color:#37352f}
.crumb svg.i{width:15px;height:15px}
.entry-head .props{margin:0;padding:0;display:grid;gap:1px}
.props > div{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;min-height:34px;margin:0 -6px;padding:0 6px;border-radius:5px}
.props > div:hover{background:#f6f6f4}
.props dt{display:flex;align-items:center;gap:7px;font:500 14px var(--ui);color:#787774}
.props dt svg.i{width:16px;height:16px;stroke-width:1.6}
.props dd{display:flex;align-items:center;gap:7px;margin:0;font:500 14px var(--ui);color:#37352f}
.props dd img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.prop-tag{display:inline-block;padding:1px 8px;border-radius:4px;background:var(--tag,#e3e2e0);color:#37352f;font:500 13.5px/1.6 var(--ui);text-decoration:none}
.prop-tag:hover{filter:brightness(.96)}
.post-page .entry-head{margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid #e9e9e7}
@media (max-width:600px){.props > div{grid-template-columns:118px minmax(0,1fr)}.page-icon{height:64px;font-size:58px;line-height:64px}.has-cover .page-icon{margin-top:-32px}}
.entry-hero{margin:0 0 36px}
.entry-hero img{display:block;width:100%;height:auto;border-radius:10px}
.prose{font:400 clamp(18px,1.4vw,20px)/1.72 var(--serif);color:#2c2c2e;overflow-wrap:break-word}
.prose > *{margin-top:0;margin-bottom:1.15em}
.prose p{margin:0 0 1.15em}
/* the Highlight block style (inc/blocks.php): yellow marker behind each line, like Stackable's highlight */
.amg-hl{background:#faff47;color:#141414;padding:.04em .24em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.prose .amg-hl a{box-shadow:inset 0 -1.5px currentColor}
.prose .is-style-highlight{color:#141414}
.prose h2{margin:1.9em 0 .6em;font:800 clamp(26px,2.6vw,32px)/1.2 var(--ui);letter-spacing:-.025em;color:#141414}
.prose h3{margin:1.6em 0 .5em;font:700 clamp(21px,2vw,24px)/1.3 var(--ui);letter-spacing:-.015em;color:#141414}
.prose h4,.prose h5,.prose h6{margin:1.4em 0 .4em;font:700 18px/1.35 var(--ui);color:#141414}
.prose a{color:#141414;text-decoration:none;box-shadow:inset 0 -.3em rgb(250 255 71 / .9);transition:box-shadow .2s}
.prose a:hover{box-shadow:inset 0 -1.25em var(--yel)}
.prose strong,.prose b{color:#141414}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.35em 0}
.prose li::marker{color:#8a8a86}
.prose blockquote{margin:1.6em 0;padding:.1em 0 .1em 1.1em;border-left:4px solid var(--yel);font-style:italic;color:#3a3a3c}
.prose blockquote p{margin:0 0 .6em}
.prose img,.prose video{max-width:100%;height:auto;border-radius:8px}
.prose iframe{display:block;max-width:100%;border:0;border-radius:8px}
.prose .wp-block-embed iframe{width:100%;height:auto;aspect-ratio:16/9}
.prose figure{margin:1.8em 0}
.prose figcaption,.prose .wp-element-caption{margin-top:8px;font:500 13px/1.45 var(--ui);color:#8a8a86;text-align:center}
.prose hr{border:0;height:1px;background:#e1e1de;margin:2.4em 0}
.prose code{font:500 .86em var(--mono);background:#f2f2f0;padding:.12em .35em;border-radius:4px}
.prose pre{overflow:auto;padding:16px 18px;border-radius:10px;background:#1f1f1f;color:#e6e6e6;font:500 14px/1.6 var(--mono)}
.prose pre code{background:none;padding:0;color:inherit}
.prose table{width:100%;border-collapse:collapse;font:400 15.5px/1.5 var(--ui)}
.prose th,.prose td{padding:10px 12px;border-bottom:1px solid #e7e7e4;text-align:left;vertical-align:top}
.prose .aligncenter{margin-inline:auto;text-align:center}
.prose .alignleft{float:left;margin:.3em 1.4em 1em 0;max-width:50%}
.prose .alignright{float:right;margin:.3em 0 1em 1.4em;max-width:50%}
.prose .wp-block-image img{display:block}
.prose .wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px}
.prose .wp-block-button__link{display:inline-flex;align-items:center;height:46px;padding:0 20px;border-radius:999px;background:#141414;color:#fff;box-shadow:none;font:800 15px var(--ui)}
.prose::after{content:"";display:table;clear:both}
.entry-foot{margin-top:56px;padding-top:26px;border-top:2px solid #141414}
.byline{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:center}
.byline img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.byline p{margin:0;font-size:15px;line-height:1.45;color:#5c5c5a}
.byline b{display:block;font:800 16px var(--ui);color:#141414}
.byline a{color:#141414;font-weight:700}
.entry-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin-top:34px}
.entry-nav a{display:block;padding:16px 18px;border-radius:12px;background:#f5f5f4;text-decoration:none;color:#141414;font:700 16px/1.35 var(--serif);transition:background .2s}
.entry-nav a:hover{background:var(--yel)}
.entry-nav small{display:block;margin-bottom:4px;font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8a8a86}
.en-next{text-align:right}