/* ============================================================
   MARKED-UP  ·  shared sub-page stylesheet
   Case studies + privacy. Linked, not inlined: 4 pages sharing ~250 lines
   is exactly what a stylesheet is for, and it keeps them from drifting.
   Tokens and rules follow explorations/DESIGN.md. The load-bearing ones here:
     · The Pen Is Never Furniture Rule. Red appears once per page, as the
       circle on the H1, and nowhere else except the focus ring.
     · The No Blur Rule. Every box-shadow has blur 0.
     · No border-left/right over 1px as a coloured stripe. Blockquotes and
       panels take a TOP rule instead.
   ============================================================ */

:root{
  --paper:oklch(0.972 0.006 85);
  --wash:oklch(0.24 0.012 265 / 0.030);
  --card:oklch(0.995 0.003 85);
  --ink:oklch(0.24 0.012 265);
  --ink-soft:oklch(0.46 0.014 265);
  --ink-faint:oklch(0.24 0.012 265 / 0.18);
  --ink-hair:oklch(0.24 0.012 265 / 0.11);

  --grid-minor:oklch(0.24 0.012 265 / 0.030);
  --grid-major:oklch(0.24 0.012 265 / 0.055);

  --amber:oklch(0.78 0.13 75);
  --ink-on-amber:oklch(0.22 0.03 75);
  --highlight:oklch(0.78 0.13 75 / 0.55);

  --tape:oklch(0.875 0.028 78 / 0.80);
  --tape-edge:oklch(0.72 0.035 75 / 0.32);

  --pen:oklch(0.53 0.205 27);
  --pencil:oklch(0.50 0.155 258);

  --wrap:1000px;
  --gutter:clamp(20px,4.6vw,64px);

  --ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);
}

*{box-sizing:border-box; margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:
    linear-gradient(to right,var(--grid-major) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-major) 1px,transparent 1px),
    linear-gradient(to right,var(--grid-minor) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-minor) 1px,transparent 1px);
  background-size:104px 104px,104px 104px,26px 26px,26px 26px;
}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:3px solid var(--pen); outline-offset:3px}

.wrap{max-width:var(--wrap); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter)}

/* ============ nav ============ */
.topbar{border-bottom:2px solid var(--ink); background:var(--paper)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:clamp(14px,2vw,20px); padding-bottom:clamp(14px,2vw,20px)}
.nav .back{font-size:14px; font-weight:700; text-decoration:none}
.nav .back:hover{text-decoration:underline; text-underline-offset:3px}

.btn{display:inline-block; border:2px solid var(--ink);
  background:var(--amber); color:var(--ink-on-amber); text-decoration:none;
  font-weight:800; font-size:clamp(14px,1.5vw,16px);
  padding:12px 24px; box-shadow:4px 4px 0 0 var(--ink)}
.btn.sm{font-size:12.5px; font-weight:700; padding:8px 15px; box-shadow:3px 3px 0 0 var(--ink)}

/* ============ article ============ */
article{padding-top:clamp(36px,5.4vw,68px); padding-bottom:clamp(44px,6vw,84px)}
.eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:16px}
h1{font-weight:800; font-size:clamp(29px,4.4vw,52px); line-height:1.0;
  letter-spacing:-.03em; max-width:22ch; text-wrap:balance}
.standfirst{margin-top:clamp(18px,2.4vw,26px); font-size:clamp(16px,1.8vw,20px);
  line-height:1.5; color:var(--ink-soft); max-width:60ch}
.pubmeta{margin-top:18px; font-size:13px; font-weight:600; color:var(--ink-soft)}

/* the one hand mark per page. same component as the home page H1. */
.mark{position:relative; display:inline-block;
  font-family:"Spectral",Georgia,serif; font-weight:500; font-style:italic;
  font-size:1.04em; letter-spacing:-.012em; padding:.02em .3em .06em}
/* BOTH axes explicit or the SVG's intrinsic ratio wins one of them and the
   loop stops tracking the words. */
.mark .pen{position:absolute; left:-.04em; top:-.13em;
  width:calc(100% + .08em); height:calc(100% + .23em);
  overflow:visible; color:var(--pen); pointer-events:none}
.mark .pen path{fill:none; stroke:currentColor; stroke-width:3.4;
  stroke-linecap:round; vector-effect:non-scaling-stroke}

/* amber emphasis, 1 word per heading */
.hi{position:relative; display:inline-block; padding:0 .1em; z-index:0}
.hi::before{content:""; position:absolute; z-index:-1;
  left:-.03em; right:-.03em; top:.19em; bottom:.07em;
  background:var(--highlight);
  clip-path:polygon(1% 8%,99% 0,100% 86%,97% 100%,2% 95%,0 14%);
  transform:rotate(-.5deg)}

/* ============ the fact strip ============ */
.strip{display:flex; flex-wrap:wrap; gap:clamp(18px,4vw,56px);
  margin-top:clamp(28px,3.6vw,44px);
  padding-top:clamp(18px,2.2vw,24px); padding-bottom:clamp(18px,2.2vw,24px);
  border-top:2px solid var(--ink); border-bottom:2px solid var(--ink)}
.strip div{font-size:12.5px; font-weight:600; color:var(--ink-soft); line-height:1.4}
.strip b{display:block; font-family:"Spectral",Georgia,serif; font-weight:600;
  font-size:clamp(24px,3vw,34px); line-height:1; color:var(--ink); letter-spacing:-.02em;
  margin-bottom:6px}

/* ============ body sections ============ */
section{margin-top:clamp(38px,5vw,68px)}
.secno{width:40px; height:40px; border-radius:50%;
  border:2.5px solid var(--pencil); color:var(--pencil);
  display:grid; place-items:center; font-size:15px; font-weight:800;
  transform:rotate(-4deg); margin-bottom:16px}
h2{font-weight:800; font-size:clamp(22px,2.8vw,32px); line-height:1.1; letter-spacing:-.026em}
article p{margin-top:15px; font-size:clamp(15px,1.6vw,17px); line-height:1.68;
  color:var(--ink-soft); max-width:70ch}
article p b{color:var(--ink); font-weight:800}
a.inline{color:var(--ink); font-weight:700; text-decoration:none;
  border-bottom:2px solid var(--amber); padding-bottom:1px}

/* plain lists inside prose */
article > ul, section > ul{margin:16px 0 0; padding:0; list-style:none; max-width:70ch}
article > ul li, section > ul li{position:relative; padding-left:22px;
  font-size:clamp(15px,1.6vw,17px); line-height:1.6; color:var(--ink-soft)}
article > ul li + li, section > ul li + li{margin-top:11px}
article > ul li::before, section > ul li::before{content:""; position:absolute; left:0; top:.72em;
  width:12px; height:2px; background:var(--pencil)}
article li b{color:var(--ink); font-weight:800}

/* ============ the taped panel ============ */
.panel{position:relative; margin-top:26px;
  background:var(--card); border:2px solid var(--ink); box-shadow:5px 5px 0 0 var(--ink);
  padding:clamp(26px,3vw,34px) clamp(20px,2.6vw,30px) clamp(22px,2.6vw,28px)}
.panel::before{content:""; position:absolute; top:-12px; left:28px;
  width:88px; height:23px; transform:rotate(-3.5deg);
  background:linear-gradient(102deg, oklch(1 0 0 / 0.30) 0 16%, transparent 16% 80%, oklch(1 0 0 / 0.20) 80% 100%), var(--tape);
  border-top:1px solid var(--tape-edge); border-bottom:1px solid var(--tape-edge);
  clip-path:polygon(4% 0,96% 0,100% 24%,95% 54%,100% 80%,96% 100%,4% 100%,0 76%,5% 50%,0 22%)}
.panel ul{margin:0; padding:0; list-style:none}
.panel li{position:relative; padding-left:22px; font-size:15px; line-height:1.6; color:var(--ink-soft)}
.panel li + li{margin-top:14px}
.panel li::before{content:""; position:absolute; left:0; top:.72em;
  width:12px; height:2px; background:var(--pencil)}

/* ============ pull quote ============
   Top rule, never a left stripe. */
blockquote{margin-top:26px; padding-top:20px; border-top:2px solid var(--pencil);
  font-family:"Spectral",Georgia,serif; font-style:italic; font-weight:500;
  font-size:clamp(19px,2.3vw,26px); line-height:1.4; color:var(--ink); max-width:56ch}

/* ============ asides ============ */
.quiet{margin-top:24px; background:var(--wash);
  border-top:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint);
  padding:clamp(20px,2.6vw,28px) 0}
.quiet p:first-child{margin-top:0}
.note{margin-top:30px; border:2px solid var(--ink-faint); padding:18px 20px;
  font-size:14px; line-height:1.6; color:var(--ink-soft)}

/* ============ closing cta ============ */
.cta{margin-top:clamp(40px,5.4vw,72px); padding-top:clamp(26px,3vw,36px);
  border-top:2px solid var(--ink);
  display:flex; flex-wrap:wrap; gap:18px; align-items:center}
.cta span{font-size:14.5px; font-weight:600; color:var(--ink-soft); max-width:46ch}

/* ============ footer ============ */
footer{background:var(--ink); color:var(--paper)}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:22px;
  padding-top:clamp(30px,4vw,48px); padding-bottom:clamp(24px,3vw,32px)}
.foot-id b{display:block; font-size:16px; font-weight:800}
.foot-id span{display:block; margin-top:5px; font-size:13px; opacity:.72}
.flinks{display:flex; flex-wrap:wrap; gap:clamp(14px,2.4vw,26px); align-items:center; font-size:14px; font-weight:600}
.flinks a{text-decoration:none; border-bottom:2px solid var(--amber); padding-bottom:2px}
.foot-base{border-top:1px solid oklch(0.972 0.006 85 / 0.16)}
.foot-base .wrap{display:flex; justify-content:space-between; gap:16px;
  padding-top:14px; padding-bottom:18px; font-size:12.5px; opacity:.7}
.foot-base a{text-decoration:none}

/* ============ responsive ============ */
@media (max-width:560px){
  h1{max-width:none}
  /* an ellipse cannot survive the phrase wrapping. swap to a pen underline. */
  .mark .pen{display:none}
  .mark{padding:0 .06em .1em;
    background-image:linear-gradient(var(--pen),var(--pen)),linear-gradient(var(--pen),var(--pen));
    background-size:100% 3px,94% 2px;
    background-position:0 100%,3% calc(100% + 5px);
    background-repeat:no-repeat}
  .strip{gap:16px}
  .strip div{flex:1 1 128px}
}

/* ============ motion ============
   Pure CSS keyframes, fill-mode both. The resting state is the visible state,
   so nothing can strand at opacity 0. */
@media (prefers-reduced-motion:no-preference){
  @keyframes mu-rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
  @keyframes mu-draw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}

  .topbar{animation:mu-rise .5s var(--ease-out-quint) 50ms both}
  article > .eyebrow{animation:mu-rise .5s var(--ease-out-quint) 140ms both}
  article > h1{animation:mu-rise .55s var(--ease-out-quint) 210ms both}
  article > .standfirst,article > .pubmeta{animation:mu-rise .5s var(--ease-out-quint) 430ms both}
  article > .strip{animation:mu-rise .5s var(--ease-out-quint) 520ms both}
  .mark .pen path{stroke-dasharray:1; animation:mu-draw .78s var(--ease-out-expo) 560ms both}

  .btn{transition:transform .16s var(--ease-out-quint),box-shadow .16s var(--ease-out-quint)}
  .btn:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 0 var(--ink)}
  .btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ============ scroll reveals: JS-gated, fail-safe by construction ============
   Same contract as the home page: hidden states exist only under
   html.js-anim, added by the inline gate in each page's <head>, which also
   arms a 2.5s kill switch that strips the class unless the observer in
   marked-up-motion.js demonstrably runs. No JS, no class, nothing hidden.
   book.html has none of these elements, so it opts out by content. */
@media (prefers-reduced-motion:no-preference){

  /* --- hidden states --- */
  html.js-anim article section,
  html.js-anim article .cta,
  html.js-anim article .note{
    opacity:0; transform:translateY(18px);
    transition:opacity .6s var(--ease-out-quint),transform .6s var(--ease-out-quint)}
  /* the pencil numeral stamps in after its section rises */
  html.js-anim article section .secno{opacity:0; transform:rotate(-14deg) scale(.5);
    transition:opacity .4s var(--ease-out-quint) .22s,transform .4s var(--ease-out-quint) .22s}
  /* the highlighter swipes like a real marker stroke */
  html.js-anim .hi::before{transform:rotate(-.5deg) scaleX(0); transform-origin:0 60%;
    transition:transform .5s var(--ease-out-quint) .3s}
  /* the tape presses onto the panel after the card lands */
  html.js-anim article section .panel::before{opacity:0; transform:rotate(-3.5deg) scale(.7);
    transition:opacity .4s var(--ease-out-quint) .5s,transform .4s var(--ease-out-quint) .5s}

  /* --- revealed states, .in added by the observer --- */
  html.js-anim article section.in,
  html.js-anim article .cta.in,
  html.js-anim article .note.in{opacity:1; transform:none}
  html.js-anim article section.in .secno{opacity:1; transform:rotate(-4deg) scale(1)}
  html.js-anim .in .hi::before{transform:rotate(-.5deg) scaleX(1)}
  html.js-anim article section.in .panel::before{opacity:1; transform:rotate(-3.5deg) scale(1)}
}