/* AI Fieldwork holding page. Tokens and rules from the AI Fieldwork Design and Brand Guide (Edition 1.0, draft 2). */

/* Fonts: publishers' original WOFF2 files, SIL OFL 1.1 (licences in assets/fonts/) */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/BricolageGrotesque-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#FBF4E6; --card:#FFFCF5; --rule:#E4D3B5; --border:#C9B79A;
  --ink:#09243D; --muted:#49616C; --inverse:#FBF4E6;
  --studio-brown:#2B1D14; --marmalade:#E8742C;
  --teal:#006568; --visited:#5B3B8C;
  --font-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --font-text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --measure:66ch; --max:1200px; --gutter:clamp(16px,4vw,40px);
  --r-sm:6px; --r-card:14px;
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.65 var(--font-text);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
p,li{max-width:var(--measure);overflow-wrap:break-word;hyphens:manual}

a{color:var(--teal);text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.2em}
a:visited{color:var(--visited)}
a:hover{text-decoration-thickness:.14em}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:var(--s4);top:-6rem;background:var(--ink);color:var(--inverse);padding:.7rem 1rem;border-radius:var(--r-sm);z-index:50}
.skip:visited{color:var(--inverse)}
.skip:focus{top:var(--s4)}
.skip:focus-visible{outline-color:var(--marmalade)}

/* Header: product-led lockup. Clear space >= cap height of the "A". */
.site-head{width:100%;max-width:var(--max);margin:0 auto;padding:var(--s6) var(--gutter);border-bottom:1px solid var(--rule)}
.lockup{display:block;width:clamp(180px,40vw,240px);height:auto}

main{flex:1;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter) var(--s8)}

.hero{max-width:52rem;padding:var(--s8) 0 var(--s6)}
/* The header lockup is the page's single h1; reset heading styles around the image. */
.brand{margin:0;font-size:inherit;line-height:0}
/* Lead is the first line of the page. Decorative 4px marmalade accent rule below it (fill only, never text). */
.lead{font-size:22px;line-height:1.5;font-weight:600;margin:0 0 var(--s6);text-wrap:pretty}
.lead::after{content:"";display:block;width:64px;height:4px;background:var(--marmalade);margin-top:var(--s5);border-radius:2px}

.points{list-style:none;margin:0 0 var(--s6);padding:0;display:grid;gap:var(--s4)}
.points li{position:relative;padding-left:1.6rem}
.points li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:.6rem;border-radius:2px;background:var(--teal)}
.starter{margin:0}

.cta{max-width:52rem;background:var(--card);border:1px solid var(--border);border-left:4px solid var(--marmalade);border-radius:var(--r-card);padding:var(--s5) var(--s6)}
.cta h2{font:700 28px/1.2 var(--font-text);margin:0 0 var(--s3);color:var(--ink);text-wrap:balance}
.cta p{margin:0}
.cta a{font-weight:600;display:inline-block;padding:.35rem 0;min-height:24px}

.site-foot{width:100%;max-width:var(--max);margin:0 auto;padding:var(--s5) var(--gutter) var(--s6);border-top:1px solid var(--rule)}
.site-foot p{margin:0;max-width:none;font:400 15px/1.5 var(--font-text);color:var(--studio-brown)}

@media (max-width:600px){
  body{font-size:17px}
  .hero{padding:var(--s7) 0 var(--s5)}
  .lead{font-size:20px}
  .cta{padding:var(--s5)}
  .cta h2{font-size:24px}
  .cta a{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (forced-colors:active){
  .points li::before{background:CanvasText}
  .lead::after{background:CanvasText}
  .cta{border-color:CanvasText}
}
@media print{
  body{background:#fff}
  .skip{display:none}
}

/* ---- AI jargon buster player. Slide styling follows the Burnt & Toast studio-style carousel restyle
   (butter pages, tablecloth strip, ink-outlined cards); everything else uses this page's tokens. ---- */
@font-face{font-family:"Nothing You Could Do";src:url("fonts/NothingYouCouldDo-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--bt-ink:#2B1D14;--bt-soft:#4A382C;--bt-muted:#5E4B3E;--bt-crust:#7A3E1D;--bt-burnt:#B5471B;--bt-butter:#F4C95D;--bt-jam:#C23B3B;--bt-paper:#FBF4E6;--bt-card:#FFFCF5}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.jargon{max-width:52rem;padding:var(--s8) 0 0}
.jargon-title{font:700 clamp(26px,4.2vw,36px)/1.15 var(--font-display);letter-spacing:-.02em;margin:0 0 var(--s3);text-wrap:balance}
.jargon-intro{margin:0 0 var(--s5);color:var(--muted)}

.player-viewport{display:grid;gap:var(--s5);border-radius:var(--r-card)}
.player-viewport:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.slide{position:relative;overflow:hidden;background:var(--bt-paper);color:var(--bt-ink);border:3px solid var(--bt-ink);border-radius:var(--r-card);box-shadow:6px 7px 0 var(--bt-ink);font-family:var(--font-text)}
/* the tablecloth strip */
.slide::before{content:"";display:block;height:22px;background-color:#FCF6EA;background-image:linear-gradient(90deg,rgba(194,59,59,.5) 50%,transparent 50%),linear-gradient(rgba(194,59,59,.5) 50%,transparent 50%);background-size:16px 16px;border-bottom:3px solid var(--bt-ink)}
.slide-in{padding:clamp(20px,4.5vw,44px) clamp(18px,4.5vw,48px) clamp(24px,4.5vw,44px)}
.slide.butter{background:var(--bt-butter)}
.slide p,.slide li{max-width:none}
.slide h3,.slide h4,.slide p{margin:0}
.slide a,.slide a:visited{color:var(--bt-crust);font-weight:700;text-decoration-thickness:2px}
.hand{font-family:"Nothing You Could Do",cursive;font-weight:400;line-height:1.15}

/* cover */
.s-mark{display:block;width:48px;height:48px;margin-bottom:var(--s5)}
.s-cover-title{font:700 clamp(40px,8vw,72px)/.98 var(--font-display);letter-spacing:-.04em;margin-bottom:var(--s5)!important}
.hl{background:linear-gradient(transparent 58%,rgba(244,201,93,.85) 58% 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:3px}
.s-lead{font-size:clamp(18px,2.6vw,22px);line-height:1.45;max-width:34ch!important}
.chips{list-style:none;margin:var(--s5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{font:700 17px/1 var(--font-display);border:2.5px solid var(--bt-ink);border-radius:999px;padding:10px 18px;background:var(--bt-card);box-shadow:0 3px 0 var(--bt-ink)}
.s-asof{font-size:15px;font-weight:600;color:var(--bt-muted);margin-top:var(--s5)!important}
.s-swipe{text-align:right;font-size:28px;color:var(--bt-burnt);transform:rotate(-4deg);margin-top:var(--s3)!important}
.is-live .s-swipe{display:block}
.s-swipe{display:none}

/* headline term */
.kick{font-size:clamp(22px,3vw,28px);color:var(--bt-crust);display:inline-block;transform:rotate(-2deg)}
.s-term{font:700 clamp(54px,11vw,96px)/.95 var(--font-display);letter-spacing:-.045em;margin-top:4px!important}
.s-full{font:600 clamp(17px,2.4vw,20px)/1.3 var(--font-text);color:var(--bt-soft);margin:8px 0 var(--s4)!important}
.s-meaning{font-size:clamp(17px,2.3vw,19px);line-height:1.5}
.s-meaning p+p{margin-top:var(--s3)}
.sense{display:block;font:700 17px/1.3 var(--font-display);color:var(--bt-crust)}
.frame{background:var(--bt-card);border:2.5px solid var(--bt-ink);border-radius:10px;box-shadow:4px 5px 0 var(--bt-ink);padding:12px 18px 14px;margin-top:var(--s4)}
.frame .lab{font:700 15px/1.3 var(--font-display);color:var(--bt-crust);margin-bottom:2px}
.frame p{font-size:16.5px;line-height:1.45}
.s-mod{margin-top:var(--s4)!important;font-weight:600;font-size:15px;line-height:1.4;color:var(--bt-soft)}

/* group pages */
.s-grp{font:700 clamp(30px,5.5vw,44px)/1.05 var(--font-display);letter-spacing:-.035em;margin-bottom:var(--s4)!important;text-wrap:balance}
.also{font-size:15px;font-weight:600;color:var(--bt-muted);margin:-6px 0 var(--s4)!important}
.sub{font:700 24px/1.1 var(--font-display);color:var(--bt-crust);margin:var(--s4) 0 var(--s3)!important;padding-top:var(--s3);border-top:2.5px dashed var(--bt-ink)}
.tc{background:var(--bt-card);border:2.5px solid var(--bt-ink);border-radius:12px;box-shadow:3px 4px 0 var(--bt-ink);padding:12px 18px 14px;margin-bottom:var(--s3)}
.tc-n{font:700 20px/1.2 var(--font-display);letter-spacing:-.01em}
.tc-n small{font:600 14px/1 var(--font-text);color:var(--bt-muted);margin-left:6px;letter-spacing:0}
.tc-s{font-size:16.5px;line-height:1.45;margin-top:4px!important}
.tc-l{font-size:15px;line-height:1.45;color:var(--bt-muted);margin-top:4px!important}
.tc-l b{color:var(--bt-crust)}

/* closing */
.mods{list-style:none;margin:0;padding:0}
.mods li{background:var(--bt-card);border:2.5px solid var(--bt-ink);border-radius:12px;box-shadow:3px 4px 0 var(--bt-ink);padding:10px 16px 12px;margin-bottom:var(--s3);font-size:16px;line-height:1.4}
.mods li b{display:block;font:700 17px/1.25 var(--font-display)}
.s-cta{margin-top:var(--s4)!important;font-size:17px;line-height:1.5}
.s-cta a{overflow-wrap:anywhere}

/* live player: one slide at a time, all slides share one grid cell so the height never jumps */
.is-live .player-viewport{gap:0}
.is-live .slide{grid-area:1/1;visibility:hidden}
.is-live .slide.is-active{visibility:visible}
.from-right{animation:slide-in-r .28s ease-out}
.from-left{animation:slide-in-l .28s ease-out}
@keyframes slide-in-r{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes slide-in-l{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.player-viewport{touch-action:pan-y}

.player-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s5)}
.player-controls[hidden]{display:none}
.pbtn{font:600 16px/1 var(--font-text);color:var(--bt-ink);background:var(--bt-card);border:2.5px solid var(--bt-ink);border-radius:999px;padding:12px 20px;min-height:48px;min-width:48px;box-shadow:0 4px 0 var(--bt-ink);cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}
.pbtn:hover{background:var(--bt-butter)}
.pbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--bt-ink)}
.pbtn:disabled{opacity:.4;cursor:default;box-shadow:0 4px 0 var(--bt-ink);transform:none;background:var(--bt-card)}
.pbtn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.pos{margin:0;font:700 18px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--bt-ink)}

@media (max-width:600px){
  .jargon{padding-top:var(--s7)}
  .slide{box-shadow:4px 5px 0 var(--bt-ink)}
  .pbtn{padding:12px 16px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.from-left,.from-right{animation:none}}
@media (forced-colors:active){.slide,.frame,.tc,.mods li,.pbtn,.chips li{border-color:CanvasText}.slide::before{background:CanvasText}}
@media print{.is-live .slide{visibility:visible;grid-area:auto}.player-controls{display:none}}
.s-cover-title .line{display:block}
.is-live .slide{display:flex;flex-direction:column}
.is-live .slide-in{flex:1;display:flex;flex-direction:column}
.is-live .s-swipe{margin-top:auto!important;padding-top:var(--s4)}