/* Layout: a printed page. White sheet, peach + bottle green from the signature logo,
   the duck wallpaper as the one patterned band. The doodles do the decorating.
   Display type comes from build.py (--display etc.) so it can be swapped in one place. */
:root{
  --paper:#fffaf2;
  --ink:#10260b;
  --green:#093a02;
  --peach:#f8c088;
  --peach-soft:#fdecd9;
  --rule:#eadfd6;
  --muted:#6b5c52;
  --display:"Graduate", Georgia, serif; --dw:400; --dt:uppercase; --dls:.02em; --dlh:1; --dvar:normal;
  --body:"Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:"Courier Prime", "Courier New", monospace;
  color-scheme: light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.snap{scroll-snap-type:y mandatory}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--green)}
a:focus-visible,button:focus-visible,.carousel:focus-visible{outline:3px solid var(--peach);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}

/* ---------- type ---------- */
.D{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);letter-spacing:var(--dls);line-height:var(--dlh);font-variation-settings:var(--dvar);color:var(--green);margin:0;text-wrap:balance}
.D a{color:inherit;text-decoration:none}
.fill{font-size:clamp(3.6rem, 15vw, 10rem);text-shadow:.04em .04em 0 var(--peach)}
.xxl{font-size:clamp(2.6rem, 7vw, 4.8rem);text-shadow:.04em .04em 0 var(--peach)}
.xl{font-size:clamp(2rem, 4.6vw, 3.2rem)}
.lg{font-size:clamp(1.5rem, 3vw, 2rem)}
.label{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin:0}
.label a{color:inherit}
.lede{font-size:1.2rem;line-height:1.5;max-width:58ch}
.prose p,.caption p{margin:0 0 1em;max-width:62ch}
.theme{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em .6em;font-family:var(--mono);font-size:.95rem;color:var(--ink);margin:0}
.theme b{color:var(--peach);font-size:1.4em;line-height:0}
main{padding-block:36px 80px}
main>.wrap>section+section, main>section+section{margin-top:72px}
.head-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:22px;border-bottom:2px solid var(--green);padding-bottom:10px}
.btn{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;background:var(--green);color:var(--peach);border:2px solid var(--green);padding:10px 14px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--peach);color:var(--green)}
.btn.ghost{background:transparent;color:var(--green)}
.btn.ghost:hover{background:var(--peach-soft)}
.fine{font-size:.95rem;color:var(--muted);max-width:60ch}

/* ---------- header / footer ---------- */
.site-head{border-bottom:1px solid var(--rule);background:var(--paper)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:12px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark img{width:50px}
.mark .D{font-size:1.2rem}
.nav{display:flex;flex-wrap:wrap;gap:4px 18px;list-style:none;margin:0;padding:0}
.nav a{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--peach)}
.nav a[aria-current="page"]{border-bottom-color:var(--green)}
.site-foot{border-top:2px solid var(--green)}
.site-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:22px}
.site-foot img{width:40px}
.site-foot p{margin:0;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}

/* ---------- carousel ---------- */
.carousel{position:relative;display:grid;gap:10px;min-width:0}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:0;scrollbar-width:none;border:2px solid var(--green);background:var(--paper);box-shadow:10px 10px 0 var(--peach)}
.track::-webkit-scrollbar{display:none}
.track li{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:1/1;display:grid;place-items:center;min-width:0}
.track img{width:100%;height:100%;object-fit:contain}
.carousel .prev,.carousel .next{position:absolute;top:calc(50% - 26px);width:44px;height:44px;border:2px solid var(--green);background:var(--paper);color:var(--green);font-size:1.1rem;cursor:pointer;z-index:2}
.carousel .prev{left:10px}.carousel .next{right:20px}
.carousel .prev:disabled,.carousel .next:disabled{opacity:0;pointer-events:none}
.carousel .prev:hover,.carousel .next:hover{background:var(--peach)}
.dots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding-top:6px}
.dots button{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--green);background:transparent;padding:0;cursor:pointer}
.dots button[aria-current="true"]{background:var(--green)}
.cnt{position:absolute;top:10px;right:20px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;background:var(--paper);border:1px solid var(--green);padding:2px 7px;color:var(--green)}

/* ---------- home ---------- */
.home{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding-block:8px 0}
.home .logo{width:min(380px, 72vw)}
.cities{font-size:clamp(1.9rem,5.4vw,3rem);display:flex;gap:.4em;align-items:center}
.cities i{display:inline-block;width:3px;height:.8em;background:var(--peach)}
.board{display:grid;grid-template-columns:1fr 1fr;width:min(460px,100%);border:2px solid var(--green)}
.board a{font-size:1.15rem;line-height:1.2;text-decoration:none;padding:13px 10px;color:var(--green);background:var(--paper)}
.board a:nth-child(1),.board a:nth-child(4){background:var(--green);color:var(--peach)}
.board a:hover{background:var(--peach)!important;color:var(--green)!important}
.board .wide{grid-column:1/-1;background:var(--peach-soft);border-top:2px solid var(--green)}
.tagline{font-family:var(--mono);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0}
.feature{background:var(--peach-soft);border-block:2px solid var(--green);padding-block:48px}
.feature-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center}
.feature-txt{display:grid;gap:14px;justify-items:start;min-width:0}
.feature-txt .ex{margin:0;max-width:52ch}
@media (max-width:760px){.feature-in{grid-template-columns:minmax(0,1fr);gap:28px}}
.dog-strip{background:var(--green);color:var(--peach-soft);padding-block:44px}
.dog-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:center}
.dog-in img{background:var(--paper);border-radius:50%;aspect-ratio:1/1;object-fit:contain;padding:6%;max-width:340px;width:100%}
.dog-in .D,.dog-in .label{color:var(--peach)}
.dog-in > div{display:grid;gap:12px;justify-items:start}
.dog-in p{margin:0;max-width:44ch}
.dog-in .btn{background:var(--peach);color:var(--green);border-color:var(--peach)}
@media (max-width:640px){.dog-in{grid-template-columns:minmax(0,1fr)}.dog-in img{max-width:220px}}

/* ---------- grid of doodles ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
@media (max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}}
.tile{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);min-width:0}
.tile .frame{aspect-ratio:1/1;max-width:100%;display:block;border:1px solid var(--rule);background:var(--paper);transition:transform .18s ease, box-shadow .18s ease;overflow:hidden}
.tile:hover .frame{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--peach);border-color:var(--green)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile .t{font-size:1.05rem;margin-top:6px}
.tile .th{font-family:var(--mono);font-size:.76rem;color:var(--muted);line-height:1.35}
.band{height:clamp(150px,20vw,220px);background:#1e3e1a url(img/wallpaper.webp) center top/auto 100% repeat-x;border-block:2px solid var(--green)}
.explore-head{display:grid;gap:18px;margin-bottom:44px}

/* ---------- single doodle ---------- */
.crumb{margin-bottom:22px}
.doodle-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}
.doodle-media{position:sticky;top:20px}
.doodle-txt{display:grid;gap:14px;justify-items:start;min-width:0}
.caption{font-size:1.06rem;border-top:2px solid var(--green);padding-top:18px;width:100%}
.caption a{word-break:break-word}
@media (max-width:820px){.doodle-in{grid-template-columns:minmax(0,1fr);gap:30px}.doodle-media{position:static}}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px;border-top:2px solid var(--green);padding-top:20px}
.nb{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--green);min-width:0}
.nb:last-child{justify-content:flex-start;text-align:right;flex-direction:row-reverse}
.nb img{width:72px;height:72px;object-fit:cover;border:1px solid var(--rule);flex:none}
.nb span{font-family:var(--display);text-transform:var(--dt);font-size:1rem;line-height:1.1;min-width:0}
.nb small{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--muted);margin-bottom:4px;text-transform:uppercase}

/* ---------- about ---------- */
.about-hero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:center}
.about-hero > div{display:grid;gap:14px}
.about-hero p{margin:0}
.story{display:grid;gap:48px;max-width:860px}
.beat{display:flow-root;font-size:1.2rem;line-height:1.55}
.beat p{margin:0;max-width:60ch}
.pin{display:block;width:min(260px,44%);text-decoration:none;color:var(--muted);font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.pin.big{width:100%;max-width:380px;transform:rotate(-1.5deg)}
.pin.r{float:right;margin:0 0 12px 28px;transform:rotate(1.5deg)}
.pin.l{float:left;margin:0 28px 12px 0;transform:rotate(-1.5deg)}
.pin img{border:2px solid var(--green);background:var(--paper);margin-bottom:6px;box-shadow:6px 6px 0 var(--peach)}
@media (max-width:700px){.about-hero{grid-template-columns:minmax(0,1fr)}.pin.big{max-width:280px}}

/* ---------- split blocks ---------- */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.split.rev{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.split.rev > :first-child{order:2}
.split > div{display:grid;gap:16px;justify-items:start;min-width:0}
.split p{margin:0}
.framed{display:block;border:2px solid var(--green);box-shadow:10px 10px 0 var(--peach);background:var(--paper)}
@media (max-width:760px){.split,.split.rev{grid-template-columns:minmax(0,1fr)}.split.rev > :first-child{order:0}}
.email{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.email code{font-family:var(--mono);font-size:.95rem;background:var(--peach-soft);padding:7px 10px;user-select:all;word-break:break-all;border:1px solid var(--rule)}

/* ---------- contact ---------- */
.people{display:grid;gap:0;margin-top:36px;border-top:2px solid var(--green)}
.person{display:grid;grid-template-columns:130px minmax(0,1fr);gap:24px;align-items:center;padding-block:22px;border-bottom:1px solid var(--rule)}
.person img{width:130px;height:130px;object-fit:cover;border:1px solid var(--rule)}
.person h3{font-size:1.4rem}
.person p{margin:6px 0 10px}
@media (max-width:520px){.person{grid-template-columns:76px minmax(0,1fr);gap:14px}.person img{width:76px;height:76px}}

/* ---------- commissions ---------- */
.ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:820px){.ex-grid{grid-template-columns:minmax(0,1fr)}}
.ex-card{display:grid;gap:6px;text-decoration:none;color:var(--ink);border:2px solid var(--green);padding:16px;align-content:start}
.ex-card:hover{box-shadow:8px 8px 0 var(--peach)}
.ex-card img{aspect-ratio:1/1;object-fit:cover;max-width:100%;margin-bottom:6px}
.ex-card .t{font-size:1.2rem}
.ex-card .th{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.ex-card .ex{font-size:.95rem}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
@media (max-width:820px){.two{grid-template-columns:minmax(0,1fr)}}
.steps{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:18px;counter-reset:s}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.steps li::before{counter-increment:s;content:counter(s);font-family:var(--display);font-size:2rem;line-height:1;color:var(--peach);text-shadow:2px 2px 0 var(--green);min-width:1em}
.steps b{font-size:1.1rem;font-weight:var(--dw)}
.tiers{display:grid;gap:18px}
.tier{border:2px solid var(--green);padding:22px;display:grid;gap:8px;align-content:start}
.tier.pri{background:var(--green);color:var(--peach-soft)}
.tier.pri h3,.tier.pri .label{color:var(--peach)}
.tier h3{font-size:1.6rem}
.tier ul{margin:0;padding-left:1.1em}
.cta{border-top:2px solid var(--green);padding-top:28px;display:grid;gap:12px;justify-items:start}
.cta p{margin:0}

/* ---------- DOGlanta landing (follows the original page) ---------- */
.dog-landing{display:grid;justify-items:center;text-align:center;gap:14px;max-width:760px}
.dog-hero-img{width:min(520px,100%)}
.dog-landing .lede{margin:0}
.eps-label{margin-top:40px;padding-block:10px;border-block:2px solid var(--peach);width:min(420px,100%)}
.eps{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:56px;justify-items:center;width:100%}
.eps a{display:grid;gap:14px;justify-items:center;text-decoration:none}
.eps img{width:min(420px,100%);transition:transform .18s ease}
.eps a:hover img{transform:rotate(-1.5deg) scale(1.02)}
.eps .D{font-size:1.5rem}

/* ---------- DOGlanta reel: one screen per panel, the drawing is the point ---------- */
.reel{padding:0}
.slide{min-height:100vh;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;position:relative;
  display:grid;place-items:center;padding-block:40px 56px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.slide-in{display:grid;justify-items:center;gap:18px;width:100%;max-width:1100px;
  transform:translateY(24px);opacity:.3;transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease}
.slide.on .slide-in{transform:none;opacity:1}
.panels{display:flex;justify-content:center;gap:12px;width:100%}
.panels img{max-height:72vh;max-height:72svh;width:auto;max-width:100%;object-fit:contain}
.pair .panels img{max-width:calc(50% - 6px)}
.slide:not(:has(.words)) .panels img{max-height:84vh;max-height:84svh}
.words{max-width:46ch;text-align:center;display:grid;gap:.55em}
.words p{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink);white-space:pre-line}
.boss{font-size:clamp(1.6rem,4vw,2.6rem);text-shadow:.05em .05em 0 var(--peach);margin-top:.3em!important;white-space:normal!important}
.count{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;color:var(--muted)}
.title-slide{align-content:center;justify-items:center;text-align:center;gap:16px}
.title-slide .fill{font-size:clamp(2.6rem,10vw,7rem)}
.hint{font-family:var(--mono);font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green);animation:bob 1.6s ease-in-out infinite;margin:12px 0 0}
@keyframes bob{50%{transform:translateY(6px)}}
.end-slide{align-content:center;justify-items:center;text-align:center;gap:16px}
.end-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.reel-nav{position:fixed;right:max(16px, calc(env(safe-area-inset-right, 0px) + 12px));top:50%;transform:translateY(-50%);display:grid;gap:8px;z-index:5}
.reel-nav button{width:44px;height:44px;border:2px solid var(--green);background:var(--paper);color:var(--green);font-size:1.1rem;cursor:pointer}
.reel-nav button:hover{background:var(--peach)}
@media (max-width:760px){
  .panels img{max-height:60vh;max-height:60svh}
  .pair .panels{flex-direction:column;align-items:center}
  .pair .panels img{max-width:100%;max-height:32vh;max-height:32svh}
  .words p{font-size:.9rem}
  .reel-nav{top:auto;bottom:max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));transform:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.slide-in{transform:none;opacity:1}}

/* ---------- round 4 overrides ---------- */
.dog-in img{border-radius:0;aspect-ratio:auto;padding:5%;max-width:380px}
.dog-landing .dog-hero-img{width:min(460px,90%)}
.eps img{border:0}

/* About: one calm centred column, like the original page, then the cast */
.about{display:grid;justify-items:center;text-align:center;gap:14px;max-width:820px}
.about-portrait{display:block;width:min(300px,70%);margin-bottom:6px}
.about-portrait img{border-radius:50%;border:2px solid var(--green);box-shadow:8px 8px 0 var(--peach);aspect-ratio:1/1;object-fit:cover;background:var(--paper)}
.about-copy{display:grid;gap:12px;max-width:52ch;margin-top:8px}
.about-copy p{margin:0}
.cast-label{margin-top:44px;padding-block:10px;border-block:2px solid var(--peach);width:min(420px,100%)}
.cast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;width:100%;margin:18px 0 26px}
@media (max-width:700px){.cast{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.cast-card{display:grid;gap:6px;justify-items:center;text-decoration:none;color:var(--ink)}
.cast-card img{aspect-ratio:1/1;object-fit:cover;width:100%;border:1px solid var(--rule);transition:transform .18s ease, box-shadow .18s ease}
.cast-card:hover img{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--peach);border-color:var(--green)}
.cast-card .D{font-size:1.05rem;margin-top:4px}
.cast-card small{font-size:.85rem;color:var(--muted);line-height:1.3}

/* Episodes: keep the top bar visible, panels fill the rest of the screen */
html.snap{scroll-padding-top:var(--hh,0px)}
html.snap .site-head{position:sticky;top:env(safe-area-inset-top, 0px);z-index:10}
html.snap body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:11;background:var(--paper)}
.slide{min-height:calc(100vh - var(--hh,0px));min-height:calc(100svh - var(--hh,0px));padding-block:28px 48px}
.panels img{max-height:calc(74svh - var(--hh,0px));max-height:calc(74vh - var(--hh,0px))}
.slide:not(:has(.words)) .panels img{max-height:calc(86svh - var(--hh,0px))}
.pair .panels{align-items:center}
.reel-nav{top:calc(50% + var(--hh,0px) / 2)}
@media (max-width:760px){
  .panels img{max-height:calc(58svh - var(--hh,0px))}
  .pair .panels img{max-height:calc(30svh - var(--hh,0px) / 2)}
  .reel-nav{top:auto}
}
/* smaller narration under the panels */
.words{max-width:40ch;gap:.45em}
.words p{font-size:.8rem;line-height:1.45}
.boss{font-size:clamp(1.2rem,2.6vw,1.7rem)}
@media (max-width:760px){.words p{font-size:.76rem}}

/* ---------- home: the outfield-wall banner builds the page as you scroll ---------- */
.site-head.float{position:fixed;top:0;left:0;right:0;z-index:30;transform:translateY(-105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);padding-top:env(safe-area-inset-top, 0px)}
.site-head.float.show{transform:none}
.intro{position:relative;height:480vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#2d3a22}
#wallbg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(24px) saturate(1.1);max-width:none}
#wall{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;will-change:transform,opacity}
.card{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity}
.el{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;will-change:transform,opacity;display:block}
#logo img{width:100%;height:100%;display:block;object-fit:contain;max-width:none}
#logo .peach{position:absolute;inset:0;opacity:0}
.cities.el{transform-origin:50% 0;width:auto;white-space:nowrap;display:flex;gap:.4em;align-items:center;line-height:1;opacity:0}
.btile{position:absolute;left:0;top:0;display:grid;place-items:center;text-decoration:none;border:2px solid var(--green);background:var(--paper);color:var(--green);opacity:0;will-change:transform,opacity;line-height:1}
.btile.dark{background:var(--green);color:var(--peach)}
.btile.wide{background:var(--peach-soft)}
.btile:hover,.btile:focus-visible{background:var(--peach);color:var(--green);outline:none;z-index:2}
.hint{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);font-family:var(--mono);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.45);padding:7px 12px}
.hint span{display:inline-block;animation:bob 1.5s ease-in-out infinite}
.home-rest{padding-top:72px}
@media (prefers-reduced-motion:reduce){.intro{height:auto}.stage{position:relative}.hint{display:none}.site-head.float{transform:none}}
/* newsletter animation */
.mailanim{all:unset;cursor:pointer;display:grid;justify-items:center;gap:8px;max-width:420px;width:100%;justify-self:center}
.mailanim video{width:100%;height:auto;display:block;background:var(--paper)}
.mailanim .replay{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mailanim:hover .replay,.mailanim:focus-visible .replay{color:var(--green)}
.mailanim:focus-visible{outline:3px solid var(--peach);outline-offset:4px}

/* menu bar: sticks to the top, tucks away on scroll down, comes back on scroll up */
.site-head{position:sticky;top:0;z-index:30;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.site-head.tuck{transform:translateY(-105%)}
.site-head.float.show.tuck{transform:translateY(-105%)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:31;background:var(--paper)}

/* carousel: small arrows under the picture, beside the dots, so nothing covers the slides */
.carousel{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:12px}
.carousel .track{grid-column:1/-1}
.carousel .prev,.carousel .next{position:static;width:32px;height:32px;font-size:.9rem;border-width:1.5px;grid-row:2;display:grid;place-items:center;padding:0}
.carousel .prev{grid-column:1}.carousel .next{grid-column:3}
.carousel .prev:disabled,.carousel .next:disabled{opacity:.3;pointer-events:none}
.carousel .dots{grid-column:2;grid-row:2;padding:0}
.carousel .cnt{position:static;grid-column:1/-1;grid-row:3;justify-self:center;border:0;padding:0;background:none;color:var(--muted)}
.doodle-media{top:96px}
/* logo paint reveal + instagram tile */
.btile.ig{background:var(--paper)}
.btile.ig svg{display:block}
.igbtn{display:inline-flex;align-items:center;gap:8px}
.btile{transform-origin:50% 0;backface-visibility:hidden}
/* the live banner: real fabric (9-slice so the corner grommets keep their shape) over white */
.card{background:var(--paper)}
.fabric{position:absolute;inset:0;border-style:solid;border-color:transparent;border-image:url(img/fabric.webp) 70 fill stretch;will-change:opacity}
.tie{position:absolute;left:0;top:0;width:120px;height:90px;transform-origin:0 0;will-change:transform,opacity;pointer-events:none}

/* home: "More below" sits under the board once the page has built */
.hint.more{bottom:auto;top:0;opacity:0;pointer-events:none;color:var(--green);background:none;font-weight:700;animation:none;margin:0}
/* home: the menu bar flaps down like a scoreboard panel */
body:has(#intro) .site-head.float{transform-origin:50% 0;transform:perspective(900px) rotateX(-96deg);transition:transform .6s cubic-bezier(.3,1.35,.5,1)}
body:has(#intro) .site-head.float.show{transform:none}
body:has(#intro) .site-head.float.show.tuck{transform:translateY(-105%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}

#wash{position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none}
.cities .fl{display:inline-block;transform-origin:50% 0;backface-visibility:hidden}
.cities i.fl{display:inline-block}
/* preview-only option switcher */
.tpick{position:fixed;left:12px;bottom:12px;z-index:60;background:#fff;border:2px solid var(--green);box-shadow:4px 4px 0 var(--peach);padding:8px 10px;font-family:var(--mono);font-size:11px;max-width:calc(100vw - 24px)}
.tpick p{margin:4px 0 4px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:700}
.tpick div{display:flex;flex-wrap:wrap;gap:4px}
.tpick button{font:inherit;border:1.5px solid var(--green);background:#fff;color:var(--green);padding:4px 7px;cursor:pointer}
.tpick button.on{background:var(--green);color:var(--peach)}
.tpick summary{cursor:pointer;font-weight:700;color:var(--green);letter-spacing:.08em;text-transform:uppercase}
#veil{position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none}
#logo .peach{opacity:0;-webkit-mask-image:url(img/paint-mask.png);mask-image:url(img/paint-mask.png);-webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 100%;mask-position:0 100%}

/* ---------- compact menu on phones: one row, the links flap down like the scoreboard ---------- */
.menu-btn{display:none;font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;background:var(--green);color:var(--peach);border:2px solid var(--green);padding:8px 14px;cursor:pointer}
@media (max-width:760px){
  .site-head .wrap{flex-wrap:wrap;padding-block:10px}
  .menu-btn{display:inline-block}
  .site-head nav{display:none;flex-basis:100%}
  .site-head.open nav{display:block}
  .site-head .nav{flex-direction:column;gap:0;padding:4px 0 6px}
  .site-head .nav li{transform-origin:50% 0;animation:flapdown .42s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--i) * 45ms)}
  .site-head .nav a{display:block;text-align:center;font-size:.9rem;padding:13px 12px;border:2px solid var(--green);margin-top:-2px;background:var(--paper)}
  .site-head .nav li:nth-child(odd) a{background:var(--green);color:var(--peach)}
  .site-head .nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
}
@keyframes flapdown{from{transform:perspective(600px) rotateX(-95deg);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.site-head .nav li{animation:none}}
/* ---------- DOGlanta: square panels, readable narration, quiet controls ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cover-slide .slide-in{gap:12px}
.cover-slide .panels img{max-height:calc(70svh - var(--hh,0px));max-height:calc(70vh - var(--hh,0px))}
.reel-hint{margin:4px 0 0;font-family:var(--mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.reel-hint span{display:inline-block;animation:bob 1.5s ease-in-out infinite}
.panels img.tile{aspect-ratio:1;border:2px solid var(--green);background:#fff}
.words{max-width:44ch}
.words p{font-size:.92rem;line-height:1.5;color:var(--ink)}
.reel-nav button{width:36px;height:36px;font-size:.95rem}
@media (max-width:760px){
  .words p{font-size:.86rem}
  .reel-nav{display:none}
}
.slide-in{transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s ease;opacity:.55;transform:translateY(14px)}

/* one body size everywhere: no bigger 'lede' paragraphs */
.about-copy p,.split p,.lede{font-size:1.0625rem;line-height:1.6}
.explore-head.center{justify-items:center;text-align:center}
.explore-head.center .prose p{margin-inline:auto}
.cast{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.cast{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.cast{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- DOGlanta panels v3: every panel in the same-size box, narration set like the original site ---------- */
.panel .pan{display:grid;justify-items:center;align-items:center;gap:18px 40px;max-width:1100px}
.panel .art{margin:0;width:var(--box);height:var(--box);display:grid;place-items:center}
.panel .art img{max-width:var(--box);max-height:var(--box);width:auto;height:auto;object-fit:contain;border:0;aspect-ratio:auto}
.panel{--box:min(calc(100svh - var(--hh,0px) - 110px), 600px, 90vw)}
.panel.has-words{--box:min(calc(100svh - var(--hh,0px) - 120px), 560px, 90vw)}
.panel .words{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 60,'opsz' 30;font-weight:500;color:var(--green);max-width:none;gap:.7em}
.panel .words p{font-family:inherit;font-size:1.06rem;line-height:1.2;color:inherit;white-space:pre-line;margin:0}
.panel .boss{font-family:'Fraunces',Georgia,serif!important;font-variation-settings:'SOFT' 40,'opsz' 96;font-weight:650;color:#5a12a8!important;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(2.2rem,4.6vw,3.6rem)!important;line-height:1!important;text-shadow:none!important;margin-top:.25em!important}
.panel.dark{background:#000}
.panel.dark .words{color:#fff}
.panel.dark .count{color:#bbb}
@media (min-width:900px){
  .panel.has-words .pan{grid-template-columns:var(--box) max-content;justify-content:center}
  .panel.al-right.has-words .pan{grid-template-columns:max-content var(--box)}
  .panel.al-right .words{order:-1;text-align:right;justify-items:end}
  .panel.al-left .words,.panel.al-center .words{text-align:left;justify-items:start}
}
@media (max-width:899px){
  .panel.has-words{--box:min(calc(100svh - var(--hh,0px) - 290px), 88vw)}
  .panel .words{text-align:center;justify-items:center}
  .panel .words p{font-size:.95rem;line-height:1.2}
  .panel .pan{gap:14px}
}

/* ---------- Behind the scenes ---------- */
.bts-page{display:grid;gap:72px;padding-block:28px 80px}
.bts-intro{display:grid;justify-items:center;text-align:center;gap:14px}
.bts-intro p:not(.label){max-width:52ch;margin:0}
.bts-jump{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.bts{display:grid;gap:26px;scroll-margin-top:calc(var(--hh,70px) + 16px)}
.bts-head{display:grid;gap:8px;border-bottom:2px solid var(--green);padding-bottom:16px}
.bts-head p{margin:0}
.bts-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:start}
.bts-media{display:grid;gap:18px;justify-items:start;position:sticky;top:calc(var(--hh,70px) + 16px)}
.bts-copy{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 60,'opsz' 24;font-size:1.08rem;line-height:1.55;color:var(--ink)}
.bts-copy p{margin:0 0 1em}
.bts-copy > p:first-of-type::first-letter{font-family:'Cash Block Tight',var(--display);float:left;font-size:3.6em;line-height:.8;padding:.06em .1em 0 0;color:var(--green);text-shadow:.05em .05em 0 var(--peach)}
.bts-quote{margin:0 0 1.1em;font-family:'Cash Block Condensed',var(--display);text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.05;color:var(--green);text-shadow:.05em .05em 0 var(--peach)}
.bts-fact{margin-top:1.4em;background:var(--peach-soft);border:2px solid var(--green);box-shadow:6px 6px 0 var(--peach);padding:16px 18px}
.bts-fact p{margin:0}.bts-fact .label{margin-bottom:6px}
.bts-sign{font-family:var(--mono);font-size:.85rem;letter-spacing:.06em}
@media (max-width:860px){.bts-grid{grid-template-columns:minmax(0,1fr)}.bts-media{position:static}}

/* drawings on white sit straight on the warm paper */

/* ---------- Songs of the year ---------- */
.songs-page{display:grid;gap:0;padding-bottom:40px}
.songs-intro{display:grid;justify-items:center;text-align:center;gap:14px;padding-block:28px 48px}
.songs-intro p:not(.label){max-width:54ch;margin:0}
.soty{padding-block:56px;scroll-margin-top:calc(var(--hh,70px))}
.pinstripe{background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(248,192,136,.4) 22px 23.5px) var(--paper);border-block:2px solid var(--green)}
.soty-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:start}
.story{position:sticky;top:calc(var(--hh,70px) + 18px);aspect-ratio:9/16;width:100%;max-height:calc(100svh - var(--hh,70px) - 60px);justify-self:center;background:#fff;border:2px solid var(--green);box-shadow:10px 10px 0 var(--peach)}
.story .frames{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.story .frames li{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.story .frames li.on{opacity:1}
.story .frames img{width:100%;height:100%;object-fit:cover;display:block}
.story .bars{position:absolute;left:8px;right:8px;top:8px;display:flex;gap:3px;z-index:2}
.story .bars i{flex:1;height:3px;background:rgba(9,58,2,.2);border-radius:2px}
.story .bars i.done,.story .bars i.now{background:var(--green)}
.story .tap{position:absolute;top:0;bottom:0;width:40%;background:none;border:0;cursor:pointer;z-index:3}
.story .tap.prev{left:0}.story .tap.next{right:0;width:60%}
.story-cap{position:absolute;left:0;right:0;bottom:-30px;text-align:center}
.soty-list{display:grid;gap:14px;min-width:0}
.soty-list.solo{max-width:760px}
.songs{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:0}
.song{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid rgba(9,58,2,.25)}
.song h3{font-size:1.5rem;margin:0}
.song .artist{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:2px 0 8px}
.song p{margin:0 0 .5em;font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 60,'opsz' 24;font-size:1rem;line-height:1.45}
.song .rank{font-family:'Cash Block Tight',var(--display);font-size:1.9rem;line-height:1;color:var(--green);background:none;border:0;padding:0;text-align:left;cursor:pointer;align-self:start;text-shadow:.05em .05em 0 var(--peach)}
.song.plain .rank{cursor:default}
.song .rank.hm{font-size:1.4rem}
.song.on .rank{color:var(--peach);text-shadow:.05em .05em 0 var(--green)}
.song .listen{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.hm-label{margin-top:22px}
.also{margin:0;padding-left:1.1em;columns:2;column-gap:32px;font-size:.95rem}
.y24 .bts-fact{margin:22px 0 0}
.y24 .bts-fact h3{font-size:1.4rem}
@media (max-width:900px){.soty-grid{grid-template-columns:minmax(0,1fr)}.story{position:relative;top:0;max-width:340px;margin-bottom:30px}.also{columns:1}}

/* ---------- DOGlanta v4 ---------- */
.reel{opacity:0;transition:opacity .25s ease}
.reel.ready{opacity:1}
.slide-in{opacity:1!important;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.panel .words{max-width:46ch}
@media (min-width:900px){
  .reel .slide{padding-right:76px;padding-left:76px}
  .panel.has-words .pan{grid-template-columns:var(--box) fit-content(46ch)!important}
  .panel.al-right.has-words .pan{grid-template-columns:fit-content(46ch) var(--box)!important}
  .panel{--box:min(calc(100svh - var(--hh,0px) - 120px), 560px, calc(100vw - 260px))}
  .panel.has-words{--box:min(calc(100svh - var(--hh,0px) - 130px), 520px, calc(100vw - 152px - 46ch - 60px))}
}
.panel .boss{font-size:clamp(1.9rem,3.4vw,2.9rem)!important;overflow-wrap:anywhere;white-space:normal!important}
/* lights out: Magic City panels take the whole page dark, header and all */
html.lights-out,html.lights-out body{background:#000}
.site-head{transition:background .35s ease,border-color .35s ease}
html.lights-out .site-head{background:#000!important;border-bottom-color:#000}
html.lights-out .site-head .mark .D{color:#b25cff}
html.lights-out .site-head .nav a{color:#e9d9ff}
html.lights-out .site-head .nav a[aria-current="page"]{border-bottom-color:currentColor;text-decoration-color:currentColor}
html.lights-out .menu-btn{background:#b25cff;border-color:#b25cff;color:#000}
.reel .panel.dark{margin-block:-1px;padding-block:29px 49px}
/* last tile: the way onward, in each episode's own colours */
.last .pan{grid-template-columns:var(--box)!important;justify-items:center}
.panel.last{--box:min(calc(100svh - var(--hh,0px) - 220px), 520px, 88vw)}
.ep-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.ebtn{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:12px 16px;border:2px solid #111;color:#111;background:transparent}
.ep1 .ebtn.solid{background:#f9d23c;color:#111;box-shadow:4px 4px 0 #111}
.ep1 .ebtn:not(.solid){border-color:#111}
.ep2 .ebtn.solid{background:#e0218a;color:#fff;border-color:#111;box-shadow:4px 4px 0 #111}
.ep2 .ebtn:not(.solid){color:#7b2ff7;border-color:#7b2ff7}
.ebtn:hover{transform:translate(-1px,-1px)}

/* songs v2: album art per song, title on hover */
.song{grid-template-columns:52px 112px minmax(0,1fr)!important;gap:18px!important;align-items:start}
.song .rank{font-family:'Cash Block Tight',var(--display);font-size:1.6rem;line-height:1;color:var(--green);text-shadow:.05em .05em 0 var(--peach);background:none;border:0;padding:4px 0 0}
#y2025 .song .rank{cursor:pointer}
.cover{margin:0;position:relative;width:112px;aspect-ratio:1;box-shadow:4px 4px 0 var(--peach);border:2px solid var(--green);overflow:hidden;background:#111}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover figcaption{position:absolute;inset:0;background:rgba(9,58,2,.88);color:var(--paper);display:grid;align-content:end;gap:3px;padding:9px;opacity:0;transition:opacity .2s ease}
.cover figcaption b{font-family:'Cash Block Tight',var(--display);font-weight:400;text-transform:uppercase;font-size:1rem;line-height:1}
.cover figcaption small{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--peach)}
.cover:hover figcaption,.cover:focus figcaption,.song.on .cover figcaption{opacity:1}
.say p{margin:0 0 .5em;font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 60,'opsz' 24;font-size:1rem;line-height:1.45}
.say .award{font-family:var(--mono)!important;font-size:.72rem!important;color:var(--green)}
.listen{display:flex;gap:16px;flex-wrap:wrap}
.listen a{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.y24-note{font-style:italic;color:var(--muted);margin:0}
.story-cap{display:none}
@media (hover:none){.cover figcaption{opacity:1;background:linear-gradient(transparent 45%,rgba(9,58,2,.9))}}
@media (max-width:560px){.song{grid-template-columns:40px 92px minmax(0,1fr)!important;gap:12px!important}.cover{width:92px}.song .rank{font-size:1.25rem}}

/* header and footer stay pure white, the page keeps its warm paper */
.site-head,.site-foot,html.snap body::before,body::before{background:#fff}
.site-foot{background:#fff}
/* anchors land with their heading right under the menu bar */
:target,.bts{scroll-margin-top:calc(var(--hh,64px) + 12px)}
/* about: the cast sits centred, whatever the count */
.cast{display:flex!important;flex-wrap:wrap;justify-content:center;gap:22px}
.cast-card{width:calc((100% - 4*22px) / 5)}
@media (max-width:900px){.cast-card{width:calc((100% - 2*16px) / 3)}.cast{gap:16px}}
@media (max-width:560px){.cast-card{width:calc((100% - 16px) / 2)}}
/* newsletter: a compact hero, the animation framed and trimmed above his head */
.mail-hero{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)!important;align-items:center}
.mailanim{max-width:300px}
.mailanim video{aspect-ratio:682/811;object-fit:cover;object-position:50% 67%;border:2px solid var(--green);box-shadow:7px 7px 0 var(--peach);background:#fff}
@media (max-width:760px){.mail-hero{grid-template-columns:minmax(0,1fr)!important;gap:22px}.mailanim{max-width:190px;justify-self:center}.mail-hero > div{order:-1}}
/* commissions on phones: smaller card image, copy first */
@media (max-width:760px){.comm-hero .framed{max-width:240px;justify-self:center;order:2}.comm-hero > div{order:1}}
.like-these{margin-top:56px}
/* doodle pages on phones: the carousel stays pinned while the story scrolls underneath */
@media (max-width:820px){
  .doodle-media{position:sticky!important;top:calc(var(--hh,56px) + 6px);z-index:3;background:var(--paper);padding-bottom:10px;margin-inline:-16px;padding-inline:16px;box-shadow:0 10px 12px -10px rgba(16,38,11,.25)}
  .doodle-media .carousel{max-width:min(100%,46svh);margin-inline:auto}
  .doodle-media .track{box-shadow:5px 5px 0 var(--peach)}
  .doodle-in{gap:18px}
}
/* phones: slimmer menu bar, smaller mark */
@media (max-width:760px){
  .site-head .wrap{padding-block:7px}
  .mark img{width:34px;height:auto}
  .mark .D{font-size:1rem}
  .menu-btn{padding:6px 11px;font-size:.72rem}
}

.site-head.tuck ~ main .doodle-media,html:has(.site-head.tuck) .doodle-media{top:6px}
.cover .art{display:block;width:100%;height:100%;background-image:url(img/soty/covers.webp);background-repeat:no-repeat}

/* ---------- phone menu: the Green Monster wall with bolted plates ---------- */
.wall-sign{display:none}
@media (max-width:760px){
  .site-head{position:sticky}
  .site-head nav{display:block!important;position:fixed;left:0;right:0;top:var(--hh,52px);height:calc(100vh - var(--hh,52px));height:calc(100dvh - var(--hh,52px));z-index:40;pointer-events:none;flex-basis:auto;overflow:hidden;visibility:hidden;transition:visibility 0s linear .45s}
  .site-head.open nav{visibility:visible;transition-delay:0s;overflow-y:auto}
  .site-head nav::before{content:"";position:absolute;inset:0;background:#0f3a20;
    background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 46px);
    transform:translateY(-102%);transition:transform .42s cubic-bezier(.3,1.2,.5,1)}
  .site-head.open nav{pointer-events:auto}
  .site-head.open nav::before{transform:none}
  .site-head .nav{position:relative;display:grid!important;gap:9px;padding:16px 14px 0!important;flex-direction:initial}
  .site-head .nav li{animation:none!important;height:52px;background:#0a2a16;box-shadow:inset 0 2px 6px rgba(0,0,0,.6);padding:4px;border-radius:2px;overflow:hidden;
    opacity:0;transition:opacity .2s ease}
  .site-head.open .nav li{opacity:1;transition-delay:.15s}
  .site-head .nav a{position:relative;height:100%;display:grid!important;place-items:center;margin:0!important;padding:0!important;border:0!important;
    background:#fffdf7!important;color:var(--green)!important;font-family:'Cash Block Tight',var(--display);font-size:1.15rem!important;letter-spacing:.06em;text-decoration:none!important;
    box-shadow:2px 2px 0 rgba(0,0,0,.35);transform:translateX(115%);transition:transform .32s cubic-bezier(.3,1.25,.5,1),background .12s ease}
  .site-head.open .nav a{transform:none;transition-delay:calc(.22s + var(--i) * 60ms),0s}
  .site-head .nav a::before,.site-head .nav a::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#b9b2a2;box-shadow:inset 0 -1px 0 rgba(0,0,0,.35)}
  .site-head .nav a::before{left:10px}.site-head .nav a::after{right:10px}
  .site-head .nav a:active,.site-head .nav a.tapped{background:var(--peach)!important}
  .wall-sign{position:relative;display:grid;justify-items:center;gap:6px;margin:16px 0 0;opacity:0;transition:opacity .3s ease}
  .site-head.open .wall-sign{opacity:1;transition-delay:.8s}
  .wall-sign img{width:46px;opacity:.9}
  .wall-sign span{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#9fb39f}
  html.lights-out .site-head nav::before{background:#0b0b0b}
}
@media (prefers-reduced-motion:reduce){.site-head nav::before,.site-head .nav a{transition:none!important}}

html.menu-open,html.menu-open body{overflow:hidden}

#list-2025,#list-2024{scroll-margin-top:18px}
.soty-list.solo{max-width:760px;margin-inline:auto}
.last .pan{justify-content:center;width:100%}
.panel.last .art{margin-inline:auto}

/* ---------- round of mobile fixes ---------- */
/* no lonely last words: browsers that support it rebalance the final lines */
p,li,blockquote,.ex{text-wrap:pretty}
h1,h2,h3,.D{text-wrap:balance}
@media (max-width:760px){
  .about-copy p{font-size:.98rem;line-height:1.55}
}
/* songs on phones: title and artist sit as text beside the cover, not on it */
.say .tt{display:none}
@media (max-width:760px),(hover:none){
  .cover figcaption{display:none}
  .say .tt{display:block;margin:0 0 6px}
  .say .tt b{display:block;font-family:'Cash Block Tight',var(--display);font-weight:400;text-transform:uppercase;color:var(--green);font-size:1.15rem;line-height:1.05}
  .say .tt small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
}
@media (max-width:560px){
  .song{grid-template-columns:76px minmax(0,1fr)!important;grid-template-rows:auto auto}
  .song .rank{grid-column:1;grid-row:1;font-size:1.1rem!important;padding:0!important}
  .song .cover{grid-column:1;grid-row:2;width:76px}
  .song .say{grid-column:2;grid-row:1/3}
}
/* pinned images shrink while reading; tap to bring them back */
@media (max-width:820px){
  .pin-media{position:sticky!important;top:calc(var(--hh,56px) + 6px);z-index:3;background:var(--paper);padding-bottom:10px;margin-inline:-16px;padding-inline:16px;box-shadow:0 10px 12px -10px rgba(16,38,11,.25)}
  html:has(.site-head.tuck) .pin-media{top:0}
  .pin-media .carousel{max-width:min(100%,46svh);margin-inline:auto;transition:max-width .3s cubic-bezier(.2,.8,.2,1)}
  .pin-media.mini .carousel{max-width:min(46%,22svh)}
  .pin-media.mini .dots,.pin-media.mini .cnt{display:none}
  .pin-media.mini .prev,.pin-media.mini .next{width:28px;height:28px}
  .pin-media.mini::after{content:"Tap to enlarge";display:block;text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}
  .bts-read{display:none!important}
  .bts-grid{gap:18px}
}
.bts-read-m{display:none}
@media (max-width:820px){.bts-read-m{display:inline-block;margin-top:8px}}
/* commissions on phones: words first, no card, tighter rhythm */
@media (max-width:760px){
  .comm-hero .framed{display:none!important}
  .comm-hero{gap:0}
  main .wrap > section{margin-block:0}
  .two{gap:28px}
  .like-these,.collabs{margin-top:36px}
  .cta{margin-top:32px}
}
.collabs{margin-top:56px}
.collab-note{max-width:62ch;margin:0 0 18px}
.ex-card .who{color:var(--green);font-size:.7rem}
/* newsletter on phones: the whole letter guy in view, text right after */
@media (max-width:760px){
  .mail-hero > div{order:0!important}
  .mail-hero .mailanim{order:-1;max-width:210px}
  .mail-hero{padding-top:6px}
}
@media (max-width:560px){
  .song{align-items:start;row-gap:8px}
  .song .cover{align-self:start;margin:0}
}
/* menu: logo and byline are painted on the wall, there from the first frame */
@media (max-width:760px){
  .wall-sign,.site-head.open .wall-sign{opacity:1;transition:none}
}

/* ---------- Oct 28, round 2 ---------- */
/* doodle strip: when reading, the pictures become a row of frames you can flick through */
@media (max-width:820px){
  .pin-media{transition:padding .25s ease}
  .pin-media.mini{padding-top:6px;padding-bottom:8px}
  .pin-media.mini::after{content:none}
  .pin-media.mini .carousel{max-width:none;display:block}
  .pin-media.mini .prev,.pin-media.mini .next,.pin-media.mini .dots,.pin-media.mini .cnt{display:none!important}
  .pin-media.mini .track{border:0;box-shadow:none;background:none;gap:8px;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scroll-snap-type:x proximity}
  .pin-media.mini .track li{flex:0 0 42vw;max-width:220px;border:1.5px solid var(--green);background:#fff;box-shadow:3px 3px 0 var(--peach);cursor:zoom-in}
  .pin-media.mini .track li:last-child{margin-right:16px}
}
/* commissions on phones: the four steps fit on the opening screen */
@media (max-width:760px){
  .comm-hero .label{margin-bottom:4px}
  .comm-hero h1{font-size:2.3rem;margin:0 0 8px}
  .comm-hero .lede{font-size:.92rem;line-height:1.45;margin:0 0 14px}
  .comm-hero + .two{margin-top:0}
  .two h2{font-size:1.35rem;margin:0 0 8px}
  .steps{gap:8px;margin:0}
  .steps li{font-size:.9rem;line-height:1.38}
  .cta h2{margin:0 0 4px}
  .cta p{margin:0 0 10px}
  .cta .email{margin:0 0 10px}
  .cta{padding-block:0}
}
.gift{margin-top:48px}
.gift-pitch{max-width:62ch;margin:0 0 18px}
.gift-points{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gift-points li{border-top:2px solid var(--green);padding-top:10px;display:grid;gap:4px}
.gift-points b{color:var(--green);font-size:1.05rem;font-weight:400;text-transform:uppercase}
.gift-points span{font-size:.95rem;line-height:1.45}
@media (max-width:760px){.gift{margin-top:32px}.gift-points{grid-template-columns:1fr;gap:12px}}
@media (max-width:760px){
  .gift + .cta{margin-top:28px!important;padding-top:14px!important}
  .cta + .like-these{margin-top:28px!important}
}

/* ---------- doodle band v3: scroll-linked, transforms only ---------- */
@media (max-width:820px){
  .pin-media.pin-on{position:sticky!important;top:calc(var(--hh,56px) - var(--D,0px))!important;transition:top .35s cubic-bezier(.2,.8,.2,1);
    overflow:hidden;contain:layout paint;margin-inline:-16px!important;padding:0!important;background:var(--paper);z-index:3;box-shadow:0 10px 12px -12px rgba(16,38,11,.3)}
  html:has(.site-head.tuck) .pin-media.pin-on{top:calc(0px - var(--D,0px))!important}
  .pin-media.pin-on::after{content:none!important}
  .pin-media.pin-on .carousel{max-width:none!important;margin-inline:0!important;margin-top:0;padding-top:8px}
  .pin-media.pin-on .track{border:0;box-shadow:none;background:none;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
  .pin-media.pin-on .track li{scroll-snap-align:center;flex-grow:0;flex-shrink:0;border:2px solid var(--green);background:#fff;box-shadow:6px 6px 0 var(--peach);margin-bottom:8px}
  .pin-media.pin-on .carousel{padding-inline:16px}
  .pin-media.pin-on .track{margin-inline:-16px}
  .pin-media.pin-on .prev,.pin-media.pin-on .next{display:grid!important}
  .pin-media.pin-on .dots{display:flex!important}
  .pin-media.morph .track{scroll-snap-type:none}
  .pin-media.morph .track li,.pin-media.band .track li{border-width:1.5px;box-shadow:3px 3px 0 var(--peach)}
  .pin-media.band .track{scroll-snap-type:x proximity;scroll-padding-inline:16px}
  .pin-media.band .track li{scroll-snap-align:start;cursor:zoom-in}
}
.lb{position:fixed;inset:0;z-index:60;background:rgba(255,250,242,.97);display:grid;align-content:center;opacity:0;pointer-events:none;transition:opacity .22s ease}
.lb.on{opacity:1;pointer-events:auto}
.lb-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:0;scrollbar-width:none}
.lb-track::-webkit-scrollbar{display:none}
.lb-track li{flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center;padding:0 16px}
.lb-track img{width:min(100%,82svh);aspect-ratio:1/1;object-fit:contain;background:#fff;border:2px solid var(--green);box-shadow:8px 8px 0 var(--peach);transform:scale(.94);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.lb.on .lb-track img{transform:none}
.lb-cnt{text-align:center;margin:18px 0 0;color:var(--muted)}
.lb-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;background:var(--green);color:var(--peach);border:0;padding:10px 14px}
html.lb-open{overflow:hidden}
/* contact: addresses stay on one line and shrink to fit */
.email code{white-space:nowrap;overflow-wrap:normal;word-break:keep-all}
@media (max-width:760px){.person .email code{font-size:min(.85rem,3.25vw);padding-inline:10px}}
@media (max-width:760px){.person .email{display:flex;flex-direction:column;align-items:flex-start;gap:8px}}

/* band v4: squares, transforms during the morph */
@media (max-width:820px){
  .pin-media.pin-on .track{align-items:flex-start}
  .pin-media.pin-on .track li{aspect-ratio:auto;flex-grow:0;flex-shrink:0;transform-origin:0 0;will-change:transform;backface-visibility:hidden}
  .pin-media.pin-on .track li img{width:100%;height:100%;object-fit:contain;display:block}
  .pin-media.morph .track{overflow:hidden}
  .pin-media.pin-on{transition:none}
}
@media (max-width:820px){
  .pin-media.morph .track li{border-width:2px;box-shadow:6px 6px 0 var(--peach)}
  .pin-media.pin-on{transition:top .35s cubic-bezier(.2,.8,.2,1)}
}

/* the band rides the page natively: the outer box and the frames inside are both sticky,
   so vertical motion never waits on script */
@media (max-width:820px){
  .pin-media.pin-on .carousel{position:sticky!important;top:var(--hh,56px);align-content:start;transition:top .35s cubic-bezier(.2,.8,.2,1);will-change:auto}
  html:has(.site-head.tuck) .pin-media.pin-on .carousel{top:0}
}
@media (max-width:820px){.pin-media.pin-on{overflow:clip}}

/* band v6: never moves with the header; the header slides over it instead */
@media (max-width:820px){
  .pin-media.pin-on,html:has(.site-head.tuck) .pin-media.pin-on{top:calc(0px - var(--D,0px))!important;transition:none!important}
  .pin-media.pin-on .carousel,html:has(.site-head.tuck) .pin-media.pin-on .carousel{top:0!important;transition:none!important}
}
.pin-sen{display:block;height:0;margin:0;padding:0}

/* home hint stays on one line */
.hint{white-space:nowrap}

/* band and in-between: vertical scrolling stays with the page, sideways is handled by the band itself, so both work at once */
@media (max-width:820px){
  .pin-media.band .track,.pin-media.morph .track{touch-action:pan-x pan-y;overflow-x:hidden;scroll-snap-type:none!important}
}

/* band: a real sideways scroller of its own, detached from the page */
@media (max-width:820px){
  .pin-media.band .track{touch-action:auto;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:none!important}
  .pin-media.morph .track{touch-action:pan-y;overflow-x:hidden}
}

/* phone post pages: the story scrolls in its own box, so the picture band (a separate layer) can be swiped while the story is still moving */
@media (max-width:820px){
  html:has(#pg),html:has(#pg) body{height:100%;overflow:hidden}
  #pg{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding-top:0;background:var(--paper)}
  #pg::before{content:'';display:block;height:var(--hh,56px)}
  html:has(#pg) .site-head{position:fixed;top:0;left:0;right:0}
  html.menu-open #pg,html.lb-open #pg{overflow:hidden}
  .pin-media.pin-on.pin-ov{position:fixed!important;top:0!important;left:0;right:0;width:auto;margin:0!important;padding:0!important;border-top:0!important;z-index:25;contain:none}
  .pin-media.pin-on.pin-ov .carousel{position:static!important;margin:0!important}
}
@media (min-width:821px){.pin-ov{display:none!important}}

/* designed by maco: a quiet colophon; letters light up in the shark's colours on hover or tap */
.site-foot .maco-credit{flex-basis:100%;display:flex;justify-content:center;align-items:center;gap:7px;border-top:1px solid #e8dfd1;padding-top:12px;margin-top:-4px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:none;color:#8a8274;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.site-foot .maco-credit:focus-visible{outline:2px solid var(--peach);outline-offset:4px}
.site-foot .maco-credit img{width:16px;height:auto;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.site-foot .maco-credit b{font-weight:700;color:#2b2a26;letter-spacing:.12em}
.site-foot .maco-credit i{font-style:normal;transition:color .25s ease}
.site-foot .maco-credit:hover img,.site-foot .maco-credit.on img,.site-foot .maco-credit:focus-visible img{transform:translateX(3px) rotate(-8deg)}
.site-foot .maco-credit:hover i:nth-child(1),.site-foot .maco-credit.on i:nth-child(1),.site-foot .maco-credit:focus-visible i:nth-child(1){color:#0a7cc4}
.site-foot .maco-credit:hover i:nth-child(2),.site-foot .maco-credit.on i:nth-child(2),.site-foot .maco-credit:focus-visible i:nth-child(2){color:#f0a51c;transition-delay:.07s}
.site-foot .maco-credit:hover i:nth-child(3),.site-foot .maco-credit.on i:nth-child(3),.site-foot .maco-credit:focus-visible i:nth-child(3){color:#d8221b;transition-delay:.14s}
.site-foot .maco-credit:hover i:nth-child(4),.site-foot .maco-credit.on i:nth-child(4),.site-foot .maco-credit:focus-visible i:nth-child(4){color:#2a9a2c;transition-delay:.21s}
/* footer: the quote sits dead centre, logo left, handle right; on phones everything stacks centred */
.site-foot .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:16px;row-gap:16px}
.site-foot .wrap > a:first-child{justify-self:start}
.site-foot .wrap > p:nth-of-type(1){justify-self:center;text-align:center}
.site-foot .wrap > p:nth-of-type(2){justify-self:end}
.site-foot .maco-credit{grid-column:1/-1;margin-top:-6px}
@media (max-width:640px){
  .site-foot .wrap{grid-template-columns:1fr;justify-items:center;row-gap:12px}
  .site-foot .wrap > a:first-child,.site-foot .wrap > p:nth-of-type(1),.site-foot .wrap > p:nth-of-type(2){justify-self:center;text-align:center}
}

/* ---------- the rewind (home page, before entering) ---------- */
.rw{position:absolute;inset:0;z-index:40;pointer-events:none;opacity:0;font-family:"VT323","Courier Prime",monospace;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.6)}
.rw-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 2px,transparent 2px 4px);mix-blend-mode:screen}
.rw-jit{position:absolute;left:0;right:0;height:22px;top:calc(var(--j,40)*1%);background:rgba(255,255,255,.35);filter:blur(1px);opacity:.8}
.rw-play{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));left:max(18px,env(safe-area-inset-left,0px));font-size:clamp(22px,3vw,30px);letter-spacing:.04em}
.rw-date{--h:clamp(46px,12vw,128px);position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;font-size:var(--h);line-height:var(--h);text-shadow:3px 3px 0 #000}
.rw-date i{width:.45ch}
.rw-w{display:inline-block;height:var(--h);overflow:hidden;width:1.04ch;text-align:center}
.rw-w.mo{width:3.1ch}
.rw-r{display:block;transition:transform .22s cubic-bezier(.3,1.5,.5,1);will-change:transform}
.rw-r span{display:block;height:var(--h)}

/* home page: no rubber-band bounce, so a pull at the top only drives the rewind and the screen holds still */
html:has(#intro),html:has(#intro) body{overscroll-behavior-y:none}