/* Jeffed Studios, Style D "Notebook On Air" (approved 2026-10-31). B's notebook + C's structure, board A's JEFFED stamp.
   Motion: MOTION 3 (Mar, 2026-10-31: "Just add heavy motion"), all in the block at the end. */
@font-face{font-family:Bungee;src:url(/fonts/bungee.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Reenie Beanie";src:url(/fonts/reenie.woff2) format("woff2");font-display:swap}
@font-face{font-family:Atkinson;src:url(/fonts/atkinson-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Atkinson;src:url(/fonts/atkinson-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--paper:#FBFAF6;--pen:#2B46B8;--pen-dk:#2238A0;--ink:#1F2A55;--soft:#45507A;--hi:#F4EC5B;--rule:#C9D6EA;--marg:#ECA89A;
  --red:#D9442A;--red-ink:#B8341C;--wash:#EEF1FA;--ok:#1D6B4F;
  --disp:Bungee,'Arial Black',sans-serif;--hand:'Reenie Beanie','Comic Sans MS',cursive;--body:Atkinson,system-ui,sans-serif;
  --m:clamp(28px,7vw,112px);--gut:clamp(16px,3.4vw,44px);--gr:clamp(16px,5vw,72px);
  --out:cubic-bezier(.2,0,0,1);--slam:cubic-bezier(.55,0,.85,.2);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--rule) var(--paper)}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--ink);font:400 1.0625rem/1.65 var(--body);
  background:linear-gradient(to right,transparent calc(var(--m) - 1px),var(--marg) calc(var(--m) - 1px) calc(var(--m) + 1px),transparent calc(var(--m) + 1px)),
    repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule) 31px 32px),var(--paper)}
::selection{background:var(--hi);color:var(--ink)}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--pen);text-underline-offset:4px;text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--pen);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;font-weight:400;line-height:1.05;text-wrap:balance}
p{margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--pen);color:#fff;padding:12px 16px;z-index:30}
.skip:focus{left:8px}
main{flex:1}
.wrap{padding-left:calc(var(--m) + var(--gut));padding-right:var(--gr)}
.hand{font-family:var(--hand);font-size:2.75rem;line-height:.9;color:var(--pen)}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:6px;padding-bottom:6px;view-transition-name:top}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:48px}
.logo .jeff{width:34px;color:var(--pen)}
.logo b{font:400 1.75rem/1 var(--disp)}
.logo span{font:400 .6875rem/1 var(--disp);background:var(--ink);color:var(--paper);padding:5px 6px;border-radius:3px;letter-spacing:.03em}
.links{display:flex;gap:4px 10px;list-style:none;margin:0;padding:0}
.links a{display:flex;align-items:center;min-height:44px;padding:0 10px;color:var(--ink);font-weight:700;text-decoration:none;border:2px solid transparent;border-radius:50% 46% 52% 44%/60% 50% 56% 46%}
.links a:hover{text-decoration:underline;text-decoration-color:var(--pen)}
.links a[aria-current]{border-color:var(--pen);color:var(--pen)}
.menu{display:none;min-height:44px;padding:0 16px;background:none;border:2px solid var(--pen);border-radius:6px;color:var(--pen);font:700 1rem/1 var(--body);cursor:pointer}
@media (max-width:860px){
  .menu{display:block}
  .top nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);padding:8px var(--gr) 16px calc(var(--m) + var(--gut));display:none}
  .top nav.is-open{display:block}
  .links{flex-direction:column;align-items:flex-start}
}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:2px solid var(--pen);border-radius:6px;background:transparent;color:var(--pen);font:700 1.0625rem/1 var(--body);text-decoration:none;cursor:pointer;transition:background-color .15s,transform .1s}
.btn:hover{background:var(--wash)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--pen);color:#fff;font-size:1.125rem;min-height:54px;padding:0 28px}
.btn-primary:hover{background:var(--pen-dk)}
.btn:disabled{border-style:dashed;color:var(--soft);border-color:var(--soft);background:none;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:8px}
.textlink{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

/* the one stamp: board A's JEFFED, outlined lettering, tilted 5deg. Unfinished things get plain text instead. */
.stamp{display:inline-block;width:150px;color:var(--red);transform:rotate(5deg);--fine:hidden;--ro:14px;--ri:6px;flex:none}
.stamp svg{width:100%}
.stamp-lg{width:min(100%,380px);--fine:visible;--ro:8px;--ri:3px}
.status{display:inline-block;font:400 .8125rem/1.3 var(--disp);color:var(--soft);letter-spacing:.02em}

/* home: hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,380px);gap:16px clamp(24px,4vw,64px);align-items:center;padding-top:clamp(20px,4vw,48px);padding-bottom:clamp(20px,3vw,36px)}
.hero h1{font:400 clamp(3.4rem,8vw,6.5rem)/.92 var(--disp);letter-spacing:-.01em}
.hero h1 .w{display:inline-block}
.hero h1 mark{position:relative;display:inline-block;background:none;color:inherit;padding:.06em .12em 0;margin-left:-.12em;transform:rotate(1.2deg)}
.hero h1 mark::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hi);border-radius:3px 14px 4px 18px/10px 4px 12px 5px;transform-origin:0 50%}
.hero .lede{font-size:clamp(1.0625rem,1.5vw,1.3rem);max-width:34em;margin-top:22px}
.hero .actions{margin-top:24px}
.hero-jeff{justify-self:center;width:100%;text-align:center}
.hero-jeff .jeff{width:min(100%,300px);margin:0 auto;color:var(--pen)}
.hero-jeff p{margin-top:6px;transform:rotate(-3deg)}

/* home: listings */
.sec{padding-top:clamp(24px,3.4vw,44px);padding-bottom:clamp(24px,3.4vw,44px)}
.sec h2,.big{font:400 clamp(1.9rem,3.6vw,2.9rem)/1 var(--disp);margin-bottom:18px}
.guide{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--ink)}
.guide li{position:relative;display:grid;grid-template-columns:minmax(8em,2.3fr) 5fr minmax(9em,1.6fr);gap:6px 28px;align-items:center;min-height:72px;padding:16px 0;border-top:2px solid var(--ink)}
.row-name{font:400 clamp(1.3rem,2vw,1.75rem)/1.1 var(--disp);color:var(--ink);text-decoration:none}
.row-name::after{content:"";position:absolute;inset:0}
.guide li:hover .row-name{color:var(--pen)}
.guide li:hover{background:rgba(238,241,250,.6)}
.guide .status{justify-self:end;text-align:right}
.latest{margin-top:4px;font-weight:700;color:var(--pen)}
.latest a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}

/* home: arcade + TV Jeff */
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:36px clamp(32px,5vw,72px);align-items:start}
.two h2{margin-bottom:20px}
.card-link{display:flex;flex-direction:column;width:min(100%,340px);background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 1px 2px rgba(31,42,85,.12),0 6px 16px rgba(31,42,85,.08);transform:rotate(1deg);transition:transform .2s,box-shadow .2s}
.card-link:hover{transform:rotate(0);box-shadow:0 2px 4px rgba(31,42,85,.14),0 12px 24px rgba(31,42,85,.12)}
.card-link img{aspect-ratio:16/10;object-fit:cover;object-position:50% 22%;width:100%}
.card-body{display:flex;flex-direction:column;gap:4px;padding:12px 16px 16px;background:#fff}
.card-name{font-weight:700;font-size:1.3rem}
.card-line{font-size:.8rem;letter-spacing:.06em;color:var(--soft)}
.two .note{margin:20px 0 6px}
.clip{width:min(100%,440px);margin-bottom:12px}
.clip .tv{width:100%}
.stamped{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:24px clamp(32px,5vw,64px);align-items:center}
.stamped p{max-width:36em}

/* inner pages */
.pg{padding:clamp(28px,5vw,56px) var(--gr) clamp(48px,7vw,96px) calc(var(--m) + var(--gut))}
.pg-head{margin-bottom:clamp(20px,3vw,36px);max-width:48em}
.pg-head h1{font:400 clamp(2.6rem,6.4vw,5rem)/.95 var(--disp)}
.lede{font-size:1.15rem;margin-top:12px;max-width:40em}
.gate{display:flex;flex-direction:column;gap:12px;align-items:flex-start;max-width:42em;border-top:2px solid var(--ink);padding-top:18px}
.gate-body p+p{margin-top:10px}
.shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:1180px}
.shelf .card-link{width:100%;height:100%}
.slot{display:grid;place-items:center;min-height:200px;border:2px dashed var(--rule);border-radius:4px;font:400 .95rem/1 var(--disp);color:var(--soft)}
.note{margin-top:20px;color:var(--soft)}
.player{background:#fff;box-shadow:0 1px 2px rgba(31,42,85,.12),0 8px 20px rgba(31,42,85,.08);max-width:1000px}
.player-bar{display:flex;justify-content:space-between;padding:10px 16px;font:400 .9rem/1.3 var(--disp);border-bottom:1px solid var(--rule)}
.player-pct{color:var(--soft)}
.player-frame{position:relative;aspect-ratio:16/9;background:#F1F3F8;display:grid;place-items:center;padding:20px}
.player-frame:fullscreen{padding:0;background:#000}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.player-gate{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:30em}
.player-load{padding:14px 16px;display:grid;gap:8px;color:var(--soft);font-size:.95rem}
.player-track{height:12px;border:2px solid var(--pen);border-radius:6px;overflow:hidden}
.player-track span{display:block;height:100%;background:var(--pen);transform:scaleX(0);transform-origin:0 50%;transition:transform .2s var(--out)}
.player-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:0 16px 18px;color:var(--soft);font-size:.95rem}
.player-info{margin-top:28px;max-width:42em}
.player-info h2,.about h2,.pg-legal h2{font:400 1.2rem/1.2 var(--disp);margin:28px 0 8px}
.title{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:start;max-width:1100px}
.title-cover{transform:rotate(1.5deg);box-shadow:0 8px 24px rgba(31,42,85,.16)}
.title-name{font:400 clamp(2.2rem,4.4vw,3.6rem)/1 var(--disp)}
.title-name a{color:inherit;text-decoration:none}
.title-name a:hover{color:var(--pen)}
.title-line{font-size:.85rem;letter-spacing:.08em;color:var(--soft);margin:12px 0 16px}
.facts{margin:18px 0;max-width:40em;border-top:2px solid var(--ink)}
.facts div{display:grid;grid-template-columns:9em 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule)}
.facts dt{font:400 .85rem/1.9 var(--disp)}
.facts dd{margin:0}

/* Follow the build */
.follow{margin-top:clamp(40px,6vw,72px);max-width:1100px;scroll-margin-top:80px}
.follow h2{font:400 clamp(1.9rem,3.6vw,2.9rem)/1 var(--disp)}
.follow .lede{margin:8px 0 22px}
.milestones{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--ink)}
.ms{display:grid;grid-template-columns:9.5em minmax(0,1fr) 170px;gap:6px 28px;align-items:center;padding:16px 0;border-top:2px solid var(--ink);min-height:96px}
.ms-date{font:700 .95rem/1.3 var(--body);color:var(--soft)}
.ms h3{font:400 clamp(1.15rem,1.8vw,1.4rem)/1.15 var(--disp);margin-bottom:4px}
.ms-oops{margin-top:6px;color:var(--red-ink)}
.ms-oops s{text-decoration-thickness:2px}
.ms-stamp{justify-self:center}
.ms:not(.is-done) .ms-date{color:var(--pen)}
.ms:not(.is-done) .ms-stamp{justify-self:end}
.follow-ig{margin-top:20px}

.about{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start;max-width:1100px}
.about-face .jeff{width:min(100%,250px);color:var(--pen)}
.about-body{max-width:40em}
.about-body p+p{margin-top:10px}
.promise{margin:0;padding-left:1.2em}
.pg-legal section{max-width:44em}
.pg-legal p+p,.pg-legal ul{margin-top:10px}
.pg-legal ul{padding-left:1.2em}
.lost .jeff{width:150px;color:var(--pen);margin:8px 0 24px}
.pg-watch{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:24px clamp(32px,5vw,64px);align-items:center}
.pg-watch .pg-head{grid-column:1 / -1;margin-bottom:0}
.pg-watch .gate{border-top:0;padding-top:0}
.pg-watch .gate>.status{display:none}
.pg-watch .gate-body{font-size:1.15rem}

/* contact form */
.form{display:grid;gap:18px;max-width:40em;border-top:2px solid var(--ink);padding-top:22px}
.field{display:grid;gap:6px}
.field label{font-weight:700}
.field small{color:var(--soft);font-size:.9rem}
.field input,.field textarea{width:100%;font:400 1.0625rem/1.5 var(--body);color:var(--ink);background:#fff;border:2px solid var(--soft);border-radius:6px;padding:11px 14px;min-height:48px}
.field textarea{min-height:180px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--pen);outline-offset:1px;border-color:var(--pen)}
.field [aria-invalid="true"]{border-color:var(--red-ink)}
.err{color:var(--red-ink);font-weight:700;font-size:.95rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{min-height:1.65em;font-weight:700}
.form-status.is-ok{color:var(--ok)}
.form-status.is-bad{color:var(--red-ink)}
.sent{display:flex;align-items:center;gap:20px;flex-wrap:wrap;max-width:40em;border-top:2px solid var(--ink);padding-top:22px}
.sent .jeff{width:90px;margin:0}
.sent h2{font:400 1.6rem/1.1 var(--disp)}
.sent p{margin-top:6px}

footer{padding-top:28px;padding-bottom:36px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;border-top:1px solid var(--rule);background:var(--paper)}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px}
footer a{display:inline-flex;align-items:center;min-height:44px;min-width:48px;padding:0 4px;font-weight:700}
footer ul{margin-left:-4px}
footer p a{display:inline;min-height:0;min-width:0;padding:0}
.foot-wm{font:400 1.4rem/1 var(--disp);margin-bottom:8px}

main h1[tabindex="-1"]:focus,main h2[tabindex="-1"]:focus{outline:none}

@media (max-width:900px){
  .title-cover{max-width:280px}
  .title,.about,.two,.stamped,.pg-watch{grid-template-columns:1fr}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-face .jeff{width:150px}
  .stamped .stamp-lg{width:min(100%,300px)}
}
@media (max-width:640px){
  .hero{grid-template-columns:1fr;gap:4px;padding-top:12px}
  .hero-jeff{order:-1;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:12px;text-align:left}
  .hero-jeff .jeff{width:118px;margin:0}
  .hero-jeff p{font-size:2.5rem}
  .hero h1{font-size:3.5rem}
  .guide li{grid-template-columns:1fr auto;gap:4px 12px}
  .guide li>div{grid-column:1 / -1;grid-row:2}
  .shelf{grid-template-columns:1fr}
  .title-cover{max-width:210px}
  .shelf .slot:nth-child(n+3){display:none}
  .slot{min-height:110px}
  .facts div{grid-template-columns:1fr;gap:2px}
  .ms{grid-template-columns:1fr auto;gap:4px 12px}
  .ms-date{grid-column:1;grid-row:1}
  .ms-stamp{grid-column:2;grid-row:1}
  .ms-body{grid-column:1 / -1;grid-row:2}
  .ms .stamp{width:116px}
}

/* ---------- Motion (MOTION 3). Transform + opacity only, except the stroke draw on Jeff's own lines.
   Reduced motion: none of the rules below apply, so every element simply sits in its final place (each effect's
   reduced alternative is its end state). Jeff's blink is the only loop that also stops. ---------- */
.jeff-eyes{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.26s var(--slam) both page-out}
  ::view-transition-new(root){animation:.42s var(--out) both page-in}
  .jeff-eyes{animation:blink 6.5s 2s infinite}

  /* load: headlines stamp onto the page, the highlighter swipes, Jeff is drawn in ballpoint */
  .hero h1 .w,.pg-head h1{animation:ink-in .42s var(--slam) both}
  .hero h1 mark{animation:ink-in-tilt .42s .14s var(--slam) both}
  .hero h1 mark::before{animation:swipe .5s .5s var(--out) both}
  .hero .lede,.hero .actions,.pg-head .lede{animation:rise .5s .32s var(--out) both}
  .hero .actions{animation-delay:.42s}
  .jeff.draw .jeff-head,.jeff.draw .jeff-hair{stroke-dasharray:1;animation:draw .8s .15s cubic-bezier(.45,0,.2,1) both}
  .jeff.draw .jeff-hair{animation-duration:.45s;animation-delay:.85s}
  .jeff.draw .jeff-eyes circle{transform-box:fill-box;transform-origin:center;animation:dot .22s 1s var(--slam) both}
  .jeff.draw .jeff-eyes circle+circle{animation-delay:1.08s}
  .jeff.draw .jeff-mouth{transform-box:fill-box;transform-origin:0 50%;animation:line .3s 1.2s var(--out) both}
  .hero-jeff .hand{animation:rise-tilt .5s 1.25s var(--out) both}

  /* TV Jeff: ambient static line and a flickering OFF AIR */
  .tv-scan{animation:scan 3.2s linear infinite}
  .tv-off{animation:flicker 4.5s steps(1) infinite}

  /* scroll: hidden only when JS has armed the observer (.m on <html>); .in plays the entrance once */
  .m [data-r]:not(.in){opacity:0}
  .m [data-r="row"].in{animation:slide .48s calc(var(--i,0) * 80ms) var(--out) both}
  .m [data-r="row"].in .status{animation:ink-in .3s calc(var(--i,0) * 80ms + .3s) var(--slam) both}
  .m [data-r="card"].in{animation:drop .6s calc(var(--i,0) * 90ms) var(--out) both}
  .m [data-r="clip"].in{transform-origin:6% 4%;animation:swing 1.1s var(--out) both}
  .m [data-r="slam"].in .stamp{animation:slam .34s .12s var(--slam) both}
  .m [data-r="slam"].in{animation:shake .26s .46s ease-in-out both}
  .m [data-r="ms"].in{animation:slide .48s calc(var(--i,0) * 80ms) var(--out) both}
  .m [data-r="ms"].in .stamp{animation:slam-sm .3s calc(var(--i,0) * 80ms + .28s) var(--slam) both}
  .m [data-r="ms"].in .ms-stamp{animation:shake .22s calc(var(--i,0) * 80ms + .58s) ease-in-out both}
  .m [data-r="up"].in{animation:rise .5s calc(var(--i,0) * 80ms) var(--out) both}
}
@keyframes blink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.12)}}
@keyframes page-out{to{opacity:0;transform:translateX(-36px) rotate(-.6deg)}}
@keyframes page-in{from{opacity:0;transform:translateX(48px) rotate(.6deg)}}
@keyframes ink-in{from{opacity:0;transform:scale(1.35) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes ink-in-tilt{from{opacity:0;transform:scale(1.35) rotate(-4deg)}to{opacity:1;transform:rotate(1.2deg)}}
@keyframes swipe{from{transform:scaleX(0)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes rise-tilt{from{opacity:0;transform:translate(-14px,6px) rotate(-3deg)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes dot{from{opacity:0;transform:scale(2.4)}}
@keyframes line{from{transform:scaleX(0)}}
@keyframes slide{from{opacity:0;transform:translateX(-40px)}}
@keyframes drop{0%{opacity:0;transform:translateY(-40px) rotate(-6deg)}70%{opacity:1;transform:translateY(4px) rotate(1.6deg)}100%{opacity:1;transform:none}}
@keyframes swing{0%{opacity:0;transform:translateY(-28px) rotate(-14deg)}35%{opacity:1;transform:rotate(5deg)}60%{transform:rotate(-2.5deg)}80%{transform:rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes slam{0%{opacity:0;transform:scale(2.3) rotate(-10deg)}80%{opacity:1;transform:scale(.97) rotate(5.4deg)}100%{opacity:1;transform:rotate(5deg)}}
@keyframes slam-sm{0%{opacity:0;transform:scale(2) rotate(-8deg)}80%{opacity:1;transform:scale(.96) rotate(5.3deg)}100%{opacity:1;transform:rotate(5deg)}}
@keyframes shake{0%,100%{transform:none}25%{transform:translate(3px,-2px)}50%{transform:translate(-3px,1px)}75%{transform:translate(1px,2px)}}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(126px)}}
@keyframes flicker{0%,100%{opacity:1}3%{opacity:.6}5%{opacity:1}7%{opacity:.75}9%{opacity:1}}