/* ═══════════════════════════════════════════════════════════════════════════
   CHICKS DIG FRIES — the refreshed website. Emma, 12 October 2026, on Kevin's go.
   ONE look for all five pages. The look is taken from the book itself: marker
   letters in six colours, thick black pen lines, white paper, pink hearts.
   Kevin's standing rules held here: no text under 14px, no faint grey, no purple.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@400;900&family=Gochi+Hand&family=Figtree:wght@400;500;600;700;800&display=swap');

/* Jackie's alphabet, drawn from the book cover, 12 Oct 2026 — see assets/lettering/FOR-EMMA.md.
   Fill = the inside of each letter, Ink = the black pen line and shadow, laid one over the other. */
@font-face{font-family:'CDF Marker';src:url('assets/lettering/cdf-marker.woff2?v=2') format('woff2');font-display:swap}
@font-face{font-family:'CDF Marker Fill';src:url('assets/lettering/cdf-marker-fill.woff2?v=2') format('woff2');font-display:swap}
@font-face{font-family:'CDF Marker Ink';src:url('assets/lettering/cdf-marker-ink.woff2?v=2') format('woff2');font-display:swap}
@font-palette-values --cdf-yellow{font-family:'CDF Marker';override-colors:1 #FFC400}

:root{
  --paper:#FFF6E4; --paper2:#FFEBC7; --white:#fff; --ink:#17141A; --ink2:#3A343F;
  --red:#E8262D; --orange:#FF7A1A; --yellow:#FFC400; --green:#17A05A; --blue:#2463EB; --pink:#FF2E93;
  --line:3px solid var(--ink); --pop:6px 6px 0 var(--ink); --r:22px;
  --display:'CDF Marker Fill','Londrina Solid','Arial Black',system-ui,sans-serif;
  --hand:'Gochi Hand','Comic Sans MS',cursive;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:18px;line-height:1.6;color:var(--ink);background:var(--paper);
  background-image:radial-gradient(rgba(23,20,26,.09) 1.2px,transparent 1.3px);background-size:22px 22px;overflow-x:hidden}
/* height:auto — without it a picture keeps the height written on it and is drawn stretched
   whenever its width is squeezed (the cover on a phone, found by Kevin 12 Oct) */
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
:focus-visible{outline:4px solid var(--blue);outline-offset:3px;border-radius:8px}

/* ── the 827 preview strip — comes OFF the day the website opens to the public ── */
.preview{background:var(--ink);color:#fff;font-size:18px;font-weight:600;text-align:center;padding:7px 12px}
.preview a{color:var(--yellow)}

/* ── top bar ── */
.top{position:sticky;top:0;z-index:50;background:rgba(255,246,228,.92);backdrop-filter:blur(10px);border-bottom:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:72px}
.logo{font-size:30px;line-height:1;text-decoration:none;white-space:nowrap;letter-spacing:.5px}
.nav{display:flex;align-items:center;gap:6px}
.nav a{font-weight:700;font-size:18px;text-decoration:none;padding:9px 14px;border-radius:999px;border:2px solid transparent;transition:background .15s,transform .15s}
.nav a:hover{background:var(--white);border-color:var(--ink);transform:rotate(-2deg)}
.nav a[aria-current=page]{background:var(--yellow);border-color:var(--ink)}
.nav a.buy{background:var(--red);color:#fff;border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.nav a.buy:hover{background:var(--pink)}
.tune,.burger{font:700 18px var(--body);background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:9px 14px;cursor:pointer;white-space:nowrap}
.tune.on{background:var(--green);color:#fff}
.burger{display:none}
@media (max-width:900px){
  .burger{display:inline-block}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:var(--line);flex-direction:column;align-items:stretch;padding:14px 20px 20px;gap:8px;display:none}
  .nav.open{display:flex}
  .nav a,.tune{font-size:19px;padding:13px 18px;text-align:center;border-color:var(--ink);background:var(--white)}
  .logo{font-size:22px}
}

/* ── marker letters, the way the cover draws them ── */
.marker{font-family:'CDF Marker Fill','Londrina Solid',sans-serif;font-weight:400;line-height:1.02;margin:0}
.marker .w{display:inline-block;white-space:nowrap;margin-right:.22em}
.marker .l{display:inline-block;position:relative;
  transform:rotate(var(--rot,0deg)) translateY(var(--dy,0));transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.marker:hover .l{transform:rotate(calc(var(--rot,0deg)*-1.4)) translateY(calc(var(--dy,0px)*-1))}
.marker .l::after{content:attr(data-l);position:absolute;left:0;top:0;font-family:'CDF Marker Ink';color:var(--ink)}
/* the heart over the "i" of Dig, as on the cover — the one letter set in the single three-colour file */
.marker .l.hrt{font-family:'CDF Marker';font-feature-settings:"ss01";font-palette:--cdf-yellow}
.marker .l.hrt::after{content:none}
.c0{color:var(--red)}.c1{color:var(--orange)}.c2{color:var(--yellow)}.c3{color:var(--green)}.c4{color:var(--blue)}.c5{color:var(--pink)}
h1.marker{font-size:clamp(54px,9vw,124px)}
h2.marker{font-size:clamp(36px,5vw,62px)}

.kicker{font-family:var(--hand);font-size:clamp(22px,2.6vw,28px);line-height:1.2;color:var(--pink);margin:0 0 6px;transform:rotate(-2deg);display:inline-block}
.lede{font-size:clamp(19px,2.1vw,23px);line-height:1.55;color:var(--ink2);max-width:36em}
.hand{font-family:var(--hand);font-size:1.25em;line-height:1.25}
h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,32px);line-height:1.1;margin:0 0 8px}

/* ── buttons: stickers with a hard shadow ── */
.btn{display:inline-flex;align-items:center;gap:10px;font:800 19px var(--body);text-decoration:none;color:var(--ink);background:var(--yellow);
  border:var(--line);border-radius:999px;padding:15px 26px;box-shadow:var(--pop);cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s}
.btn:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:9px 9px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.btn.red{background:var(--red);color:#fff}.btn.white{background:var(--white)}.btn.pink{background:var(--pink);color:#fff}
.btn.big{font-size:clamp(20px,2.6vw,26px);padding:20px 34px}
.btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:26px}

/* ── sections ── */
section{padding:clamp(40px,5.5vw,72px) 0;position:relative}
.band{border-block:var(--line)}
.band.pink{background:var(--pink);color:#fff}.band.yellow{background:var(--yellow)}.band.white{background:var(--white)}
.band.ink{background:var(--ink);color:#fff}
.band.pink .kicker,.band.ink .kicker{color:var(--yellow)}
.band.pink .lede,.band.ink .lede{color:#fff}
.center{text-align:center}.center .lede{margin-inline:auto}

/* ── hero ── */
.hero{padding-top:clamp(28px,4vw,48px)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,70px);align-items:center}
.hero h1{margin:6px 0 18px}
.sub{font-family:var(--display);font-size:clamp(24px,3.2vw,38px);line-height:1.1;margin:0 0 14px}
.sub em{font-style:normal;background:var(--yellow);padding:0 .25em;border:2px solid var(--ink);border-radius:10px;display:inline-block;transform:rotate(-1.5deg)}
.stage{position:relative;display:grid;place-items:center;min-height:380px}
.blob{position:absolute;inset:6% 4%;background:var(--pink);border:var(--line);border-radius:46% 54% 52% 48%/55% 45% 55% 45%;animation:wob 9s ease-in-out infinite}
@keyframes wob{50%{border-radius:54% 46% 45% 55%/46% 56% 44% 54%;transform:rotate(4deg)}}
.cover{position:relative;width:min(340px,72%);border:var(--line);border-radius:6px;box-shadow:12px 12px 0 var(--ink);transform:rotate(5deg);transition:transform .35s cubic-bezier(.3,1.5,.5,1);background:#fff;cursor:zoom-in}
.cover:hover{transform:rotate(-2deg) scale(1.04)}
.heart{position:absolute;font-size:var(--s,34px);color:var(--red);-webkit-text-stroke:2px var(--ink);animation:bob 4s ease-in-out infinite;animation-delay:var(--d,0s);user-select:none}
.band.pink .heart{color:#fff}
@keyframes bob{50%{transform:translateY(-16px) rotate(12deg)}}
.badge{position:absolute;right:0;bottom:4%;background:var(--yellow);border:var(--line);border-radius:50%;width:132px;height:132px;display:grid;place-items:center;text-align:center;
  font:800 18px/1.15 var(--body);transform:rotate(12deg);box-shadow:4px 4px 0 var(--ink);padding:12px;animation:spin 14s linear infinite alternate}
@keyframes spin{to{transform:rotate(-10deg)}}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.stage{min-height:0;padding:24px 0 10px;order:-1}.cover{width:min(250px,62%)}.badge{width:108px;height:108px;font-size:18px;right:2%}}

/* ── the running strip ── */
.strip{background:var(--ink);color:#fff;border-block:var(--line);overflow:hidden;padding:14px 0;white-space:nowrap}
.strip div{display:inline-block;animation:run 34s linear infinite;font-family:var(--display);font-size:clamp(22px,3vw,34px);letter-spacing:1px}
.strip span{margin:0 18px}.strip i{font-style:normal;color:var(--pink)}
@keyframes run{to{transform:translateX(-50%)}}

/* ── cards ── */
.grid{display:grid;gap:26px}
.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.g3,.g2{grid-template-columns:1fr}}
.card{background:var(--white);color:var(--ink);border:var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--pop)}
.card p{margin:0;color:var(--ink2)}
.card .num{font-family:var(--display);font-size:54px;line-height:1;margin-bottom:8px}
.tilt1{transform:rotate(-1.4deg)}.tilt2{transform:rotate(1.2deg)}

/* ── sample pages from the book ── */
.pages{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.6vw,30px);margin-top:40px}
.page{background:#fff;border:var(--line);border-radius:10px;padding:10px 10px 6px;box-shadow:var(--pop);cursor:zoom-in;transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .2s;font:inherit;color:inherit;text-align:center}
.page:nth-child(odd){transform:rotate(-3deg)}.page:nth-child(even){transform:rotate(2.5deg) translateY(14px)}
.page:hover{transform:rotate(0) translateY(-10px) scale(1.05);box-shadow:12px 12px 0 var(--ink);z-index:2}
.page img{width:100%;border-radius:4px}
.page span{display:block;font-family:var(--hand);font-size:22px;padding:6px 0 2px}
@media (max-width:860px){.pages{grid-template-columns:repeat(2,1fr)}}

/* ── the cinema ── */
.tv{background:var(--ink);border:var(--line);border-radius:30px;padding:clamp(10px,2vw,22px);box-shadow:12px 12px 0 var(--pink);max-width:720px;margin:26px auto 0;position:relative}
.screen{position:relative;border-radius:16px;overflow:hidden;background:#f4f4f4;aspect-ratio:4/3}
.screen video{width:100%;height:100%;object-fit:contain;background:#f4f4f4}
.bigplay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(23,20,26,.28);border:0;cursor:pointer;transition:background .2s}
.bigplay:hover{background:rgba(23,20,26,.12)}
.bigplay b{width:clamp(84px,14vw,130px);aspect-ratio:1;border-radius:50%;background:var(--red);border:4px solid #fff;display:grid;place-items:center;box-shadow:0 0 0 4px var(--ink),8px 8px 0 4px var(--ink);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.bigplay:hover b{transform:scale(1.1) rotate(-6deg)}
.bigplay b::after{content:"";border-style:solid;border-width:clamp(16px,2.6vw,24px) 0 clamp(16px,2.6vw,24px) clamp(26px,4.2vw,40px);border-color:transparent transparent transparent #fff;margin-left:8px}
.tv.playing .bigplay{display:none}
.tvbar{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;padding:14px 8px 4px;flex-wrap:wrap}
.tvbar .now{font-family:var(--display);font-size:clamp(20px,3vw,30px);line-height:1.1}
.tvbar .now small{display:block;font:600 18px var(--body);color:var(--yellow);letter-spacing:1px;text-transform:uppercase}
.tvbar .ctl{display:flex;gap:10px}
.tvbar button{font:800 18px var(--body);background:var(--yellow);color:var(--ink);border:2px solid #fff;border-radius:999px;padding:10px 18px;cursor:pointer}
.tvbar button:hover{background:#fff}
.eps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media (max-width:860px){.eps{grid-template-columns:repeat(2,1fr);gap:14px}}
.ep{background:var(--white);color:var(--ink);border:var(--line);border-radius:18px;padding:0;overflow:hidden;box-shadow:var(--pop);cursor:pointer;text-align:left;font:inherit;transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s}
.ep:hover{transform:translate(-3px,-5px) rotate(-1deg);box-shadow:10px 10px 0 var(--ink)}
.ep .th{position:relative;aspect-ratio:4/3;background:#f4f4f4;border-bottom:var(--line)}
.ep .th img{width:100%;height:100%;object-fit:cover}
.ep .th em{position:absolute;left:10px;top:10px;font:800 18px var(--body);font-style:normal;background:var(--ink);color:#fff;border-radius:999px;padding:4px 11px}
.ep .tx{padding:14px 16px 16px}
.ep b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(19px,2.3vw,25px);line-height:1.1}
.ep span{display:block;font-size:18px;color:var(--ink2);margin-top:4px;line-height:1.35}
.ep.on{background:var(--yellow);box-shadow:10px 10px 0 var(--pink)}
.ep.on .th em{background:var(--red)}

/* ── split rows ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.girl{background:#fff;border:var(--line);border-radius:var(--r);box-shadow:var(--pop);padding:0;overflow:hidden;width:min(300px,80%);aspect-ratio:238/292;margin-inline:auto;transform:rotate(-3deg)}
.girl img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.quote{font-family:var(--hand);font-size:clamp(26px,3.6vw,40px);line-height:1.2;margin:0}
.facts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.facts li{background:var(--white);border:2px solid var(--ink);border-radius:14px;padding:12px 16px;font-weight:600}
.facts b{font-family:var(--display);font-weight:400;color:var(--red);margin-right:8px}

/* ── the form on Contact ── */
.form{display:grid;gap:14px}
.form label{font-weight:700;display:grid;gap:6px}
.form input,.form textarea{font:500 18px var(--body);color:var(--ink);background:#fff;border:var(--line);border-radius:14px;padding:13px 15px;width:100%}
.form textarea{min-height:130px;resize:vertical}
.note{font-size:18px;color:var(--ink2)}

/* ── lightbox ── */
.lb{position:fixed;inset:0;z-index:100;background:rgba(23,20,26,.9);display:none;place-items:center;padding:20px;cursor:zoom-out}
.lb.open{display:grid}
.lb img{max-height:86vh;width:min(560px,92vw);object-fit:contain;background:#fff;border:var(--line);border-radius:10px;box-shadow:12px 12px 0 var(--pink)}
.lb button{position:absolute;top:16px;right:16px;font:800 18px var(--body);background:var(--yellow);border:var(--line);border-radius:999px;padding:10px 18px;cursor:pointer}

/* ── footer ── */
footer{background:var(--ink);color:#fff;padding:54px 0 40px;border-top:var(--line)}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px}
footer a{color:#fff;text-decoration:none;font-weight:600}footer a:hover{color:var(--yellow)}
footer h4{font-family:var(--display);font-weight:400;font-size:22px;margin:0 0 10px;color:var(--yellow)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer p{margin:0 0 8px;font-size:18px;color:#EDE7F2}
footer .fine{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.3);padding-top:18px;font-size:18px;color:#EDE7F2}
@media (max-width:860px){footer .wrap{grid-template-columns:1fr}}

/* ── things rise in as they are scrolled to ── */
/* moved with 'translate', never 'transform' — so a tilted card keeps its tilt after rising in */
.rise{opacity:0;translate:0 34px;transition:opacity .7s,translate .7s cubic-bezier(.2,.9,.3,1),transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .2s}
.rise.in{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rise{opacity:1;translate:none}}

/* Kevin, 12 Oct: "it can be taken down a tick, maybe like 10%. As a whole, it feels a little large."
   The whole website is drawn at nine tenths on a computer screen. A phone keeps full size so
   nothing drops under 14px. */
/* Kevin, 12 Oct, second pass: "the whole website down a notch, I want to be able to see more of
   the screen… without having to scroll so much." Eight tenths on a computer screen, the gaps
   between sections tightened, and every small word raised to 18px so no word lands under 14px. */
@media (min-width:861px){body{zoom:.8}}

/* Kevin, 12 Oct, third pass: "lay it out a little bit better… open things up a little, keep the
   same size… the crawl should probably be more towards the bottom on the home page… so now it
   fits on the pages better."
   THE FIRST SCREEN of every page fills the visitor's screen exactly: the opening section is
   centred in the space under the top bar, and on Home the running strip sits on the bottom edge.
   --z is the eight-tenths above (a screen-height must be divided by it); --head is the preview
   strip plus the top bar. On a phone the first screen simply runs as long as its words. */
:root{--z:1;--head:118px}
@media (min-width:861px){
  :root{--z:.8}
  .first{min-height:calc(100vh / var(--z) - var(--head));display:flex;flex-direction:column}
  .first>section{flex:1;display:flex;align-items:center;padding-block:clamp(28px,4vh,60px)}
  .first>section>.wrap{flex:none}
  .first .hero .wrap,.first .split{gap:clamp(40px,7vw,110px)}
  .first .cover{width:min(400px,78%)}
  .first .stage{min-height:520px}
  .first .lede{margin-block:18px 0}
  .first .btns{margin-top:34px}
  /* the big cartoon screen is sized by the HEIGHT left over, so the whole screen and its
     Back and Next buttons are always in view with the headline */
  .first .tv{max-width:clamp(420px,calc((100vh / var(--z) - var(--head) - 470px) * 1.3),900px)}
}


/* ── THE PHONE PASS. Kevin, 12 Oct: "now, I want to make it mobile-friendly." ──
   On a phone: the preview strip stays on one line, the cover is small enough that the title is
   on the first screen with the cover, every button is a full-width bar a thumb cannot miss, and
   the menu's links are tall enough to tap. */
@media (max-width:860px){
  .preview{font-size:14px;padding:6px 10px}
  .preview a{white-space:nowrap}
  .top .wrap{min-height:62px}
  .wrap{width:min(1180px,100% - 32px)}
  section{padding:36px 0}
  .hero{padding-top:18px}
  .stage{padding:14px 0 4px}
  .cover{width:min(210px,54%);box-shadow:8px 8px 0 var(--ink)}
  .blob{inset:2% 14%}
  .badge{width:96px;height:96px;right:10%;bottom:0}
  h1.marker{font-size:clamp(46px,13.5vw,70px)!important}
  h2.marker{font-size:clamp(34px,9.5vw,48px)}
  .kicker{font-size:22px}
  .btns{gap:12px;margin-top:20px}
  .btns .btn{flex:1 1 100%;justify-content:center;padding:16px 20px;font-size:19px}
  .btn{box-shadow:4px 4px 0 var(--ink)}
  .card{padding:20px;box-shadow:4px 4px 0 var(--ink)}
  .tilt1,.tilt2{transform:none}
  .pages{margin-top:26px;gap:14px}
  .page:nth-child(even){transform:rotate(2deg)}
  .page span{font-size:20px}
  .tv{border-radius:20px;box-shadow:6px 6px 0 var(--yellow)!important;margin-top:22px}
  .tvbar{padding:10px 4px 2px}
  .tvbar .ctl{width:100%}.tvbar .ctl button{flex:1;padding:12px}
  .eps{margin-top:26px}
  .ep{box-shadow:4px 4px 0 var(--ink)}
  .ep .tx{padding:10px 12px 12px}
  .girl{width:min(230px,62%)}
  .quote{font-size:26px}
  .strip{padding:10px 0}
  footer{padding:36px 0 30px}
  .lb img{width:94vw}
}