/* ==========================================================================
   SudoNews — Press Sheet design system
   --------------------------------------------------------------------------
   Motif: colour separation. Every story is laid down as three plates —
   INK (what happened), SIGNAL (why it matters), PRODUCT (what you do with it).
   Elements arrive fractionally out of register and lock. That mis-register
   ghost is the brand's signature mark.

   Tokens are taken from existing SudoNews source, not invented:
     paper / ink / signal   → website/editorial/css/editorial.css
     product blue #3b6fff   → website/css/site.css --sn-accent AND
                              lib/theme/premium_design.dart PremiumColors.accent
   NOTE: the repo contains three different blues (#3b6fff, #3B82F6, #3d5afe).
   #3b6fff is used here because two independent sources agree on it.
   ========================================================================== */

/* ---------- fonts (self-hosted; OFL) ------------------------------------ */
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/newsreader-var.woff2') format('woff2-variations');
}
@font-face{
  font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;
  src:url('../fonts/newsreader-var-italic.woff2') format('woff2-variations');
}
@font-face{font-family:'Schibsted';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/sg-400.woff2') format('woff2')}
@font-face{font-family:'Schibsted';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/sg-500.woff2') format('woff2')}
@font-face{font-family:'Schibsted';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/sg-600.woff2') format('woff2')}
@font-face{font-family:'Schibsted';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/sg-700.woff2') format('woff2')}
@font-face{font-family:'Plex';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plex-400.woff2') format('woff2')}
@font-face{font-family:'Plex';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plex-500.woff2') format('woff2')}

/* ---------- tokens ------------------------------------------------------ */
:root{
  /* plates */
  --paper:#f3efe6;
  --paper-2:#e9e3d6;
  --paper-3:#ded5c4;
  --rule:#d3c9b6;
  --ink:#161616;
  --ink-70:#161616b3;
  --ink-45:#16161673;
  --ink-22:#16161638;
  --ink-10:#1616161a;
  --signal:#c8102e;
  --product:#3b6fff;
  --product-deep:#2456e6;

  /* dark plate (used for Flash + the press-run section) */
  --black:#0d0d0e;
  --black-2:#17181a;
  --chalk:#f0ece3;

  --serif:'Newsreader',Iowan Old Style,Palatino,Georgia,serif;
  --sans:'Schibsted',-apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,sans-serif;
  --mono:'Plex',SFMono-Regular,SF Mono,Menlo,Consolas,monospace;

  --max:1440px;
  --margin:clamp(1.1rem,4.4vw,5rem);
  --gut:clamp(.9rem,1.7vw,1.6rem);
  --mast:56px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-snap:cubic-bezier(.16,1.02,.3,1);

  /* mis-register offset — the signature */
  --reg:2px;
}

@media (max-width:900px){ :root{ --mast:52px; --reg:1.5px; } }

/* ---------- reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(15px,.55vw + 13.6px,17px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

/* paper grain — one fixed layer, cheap, never intercepts pointer */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url('../img/paper.png');background-size:128px 128px;
  opacity:.55;mix-blend-mode:multiply;
}
@media print{ body::before{display:none} }

::selection{background:var(--signal);color:var(--paper)}

/* ---------- focus ------------------------------------------------------- */
:focus-visible{
  outline:2px solid var(--product);
  outline-offset:3px;
  border-radius:1px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;
  font:500 .82rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
}
.skip:focus{left:.6rem;top:.6rem}

/* ---------- layout ------------------------------------------------------ */
.wrap{ width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--margin) }
.grid{ display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut) }
@media (max-width:900px){ .grid{grid-template-columns:repeat(6,1fr)} }

/* rules that read as newsprint column rules, not borders */
.rule{ height:1px;background:var(--rule);border:0;margin:0 }
.rule--ink{ background:var(--ink);height:2px }
.rule--hair{ background:var(--ink-22) }

/* ---------- type -------------------------------------------------------- */
.display{
  font-family:var(--serif);
  font-weight:600;
  font-variation-settings:'opsz' 36;
  line-height:.9;
  letter-spacing:-.028em;
  font-size:clamp(2.9rem,9.2vw,8.2rem);
  text-wrap:balance;
}
.headline{
  font-family:var(--serif);font-weight:600;font-variation-settings:'opsz' 28;
  line-height:1.02;letter-spacing:-.022em;
  font-size:clamp(2rem,4.6vw,3.9rem);
  text-wrap:balance;
}
.subhead{
  font-family:var(--serif);font-weight:600;font-variation-settings:'opsz' 20;
  line-height:1.1;letter-spacing:-.015em;
  font-size:clamp(1.35rem,2.3vw,2.05rem);
  text-wrap:balance;
}
.dek{
  font-family:var(--serif);font-weight:300;font-variation-settings:'opsz' 18;
  font-size:clamp(1.08rem,1.35vw,1.42rem);line-height:1.42;color:var(--ink-70);
  text-wrap:pretty;
}
.body{ font-size:1rem;line-height:1.62;color:var(--ink-70);text-wrap:pretty }
.body strong{color:var(--ink);font-weight:600}

/* metadata voice — the slug line of a wire story */
.slug{
  font-family:var(--mono);font-weight:500;
  font-size:.685rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-45);
}
.slug--signal{color:var(--signal)}
.slug--product{color:var(--product)}
.caption{
  font-family:var(--mono);font-size:.7rem;line-height:1.5;
  letter-spacing:.01em;color:var(--ink-45);
}
.folio{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  color:var(--ink-22);text-transform:uppercase;
}

/* drop-cap, real editorial device */
.dropcap::first-letter{
  font-family:var(--serif);font-weight:600;font-variation-settings:'opsz' 72;
  float:left;font-size:3.55em;line-height:.78;padding:.06em .09em 0 0;color:var(--ink);
}

/* ---------- the signature: mis-registration ----------------------------- */
/* Sets the same text three times. Red and blue plates sit behind, offset.
   .is-locked (added by JS on reveal) pulls them into register.            */
/* The colour plates are pseudo-elements drawing attr(data-t), not real spans.
   Repeating the words in the DOM would triple the headline for anything that
   reads text rather than paints it — search engines included. */
.reg{ position:relative;display:inline-block;isolation:isolate }
.reg::before,.reg::after{
  content:attr(data-t);
  position:absolute;left:0;top:0;z-index:-1;
  white-space:pre;pointer-events:none;user-select:none;-webkit-user-select:none;
  transition:transform .82s var(--ease-snap),opacity .82s var(--ease);
}
.reg::before{ color:var(--signal);transform:translate3d(calc(var(--reg)*-1.6),calc(var(--reg)*.9),0) }
.reg::after{ color:var(--product);transform:translate3d(calc(var(--reg)*1.7),calc(var(--reg)*-1),0) }
.reg.is-locked::before,.reg.is-locked::after{ transform:translate3d(0,0,0);opacity:.34 }
/* no JS means no lock observer, so the plates rest IN register rather than
   sitting apart forever and reading as a rendering fault */
.no-js .reg::before,.no-js .reg::after{ transform:translate3d(0,0,0);opacity:.34 }

@media (prefers-reduced-motion:reduce){
  .reg::before,.reg::after{transform:none!important;opacity:.3}
}

/* ---------- editorial marks (drawn, irregular) -------------------------- */
/* max-width:none because the global img,svg,video rule above clamps a mark
   to the width of whatever word or figure it is drawn around */
.mark{ position:absolute;pointer-events:none;color:var(--signal);max-width:none }
.mark svg{ overflow:visible;width:100%;height:100% }
.mark path,.mark line,.mark circle,.mark ellipse,.mark polyline{
  fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
/* draw-on: dasharray set inline per-path by JS from getTotalLength() */
.draw path,.draw line,.draw polyline,.draw circle,.draw ellipse{
  stroke-dashoffset:var(--len,0);
}

/* crop corners — an editorial frame that is not a rounded card */
.crop{ position:relative }
.crop::before,.crop::after{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;
  border:1.5px solid var(--ink);
}
.crop::before{ top:-9px;left:-9px;border-right:0;border-bottom:0 }
.crop::after{ bottom:-9px;right:-9px;border-left:0;border-top:0 }

/* registration crosshair */
.regmark{ width:19px;height:19px;color:var(--ink-22);flex:none }

/* ---------- links ------------------------------------------------------- */
.link{
  display:inline-block;position:relative;text-decoration:none;color:var(--ink);
  font-weight:500;
}
.link::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:currentColor;transform-origin:right;transform:scaleX(1);
  transition:transform .42s var(--ease);
}
.link:hover::after,.link:focus-visible::after{ transform-origin:left;animation:swipe .5s var(--ease) }
@keyframes swipe{ 0%{transform:scaleX(1);transform-origin:right} 49%{transform:scaleX(0);transform-origin:right} 50%{transform:scaleX(0);transform-origin:left} 100%{transform:scaleX(1);transform-origin:left} }
@media (prefers-reduced-motion:reduce){ .link:hover::after{animation:none} }

/* the one button shape in the system: a stamped block, not a pill */
.stamp{
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex;align-items:center;gap:.62rem;
  background:var(--bg);color:var(--fg);text-decoration:none;
  padding:.86rem 1.35rem;border:0;cursor:pointer;
  font-family:var(--mono);font-weight:500;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;
  position:relative;transition:transform .3s var(--ease-snap);
}
.stamp::after{
  content:"";position:absolute;inset:0;background:var(--signal);z-index:-1;
  transform:translate3d(4px,4px,0);transition:transform .3s var(--ease-snap);
}
.stamp:hover,.stamp:focus-visible{ transform:translate3d(2px,2px,0) }
.stamp:hover::after,.stamp:focus-visible::after{ transform:translate3d(0,0,0) }
.stamp--product{ --bg:var(--product) }
.stamp--product::after{ background:var(--ink) }
.stamp--ghost{ --bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink) }
.stamp--ghost::after{ display:none }
.stamp--ghost:hover{ --bg:var(--ink);--fg:var(--paper) }
@media (prefers-reduced-motion:reduce){
  .stamp,.stamp::after{transition:none}
}

/* ---------- reveal ------------------------------------------------------ */
[data-rise]{ opacity:0;transform:translate3d(0,18px,0) }
[data-rise].is-in{ opacity:1;transform:none;transition:opacity .78s var(--ease),transform .78s var(--ease) }
@media (prefers-reduced-motion:reduce){
  [data-rise]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- dark plate section ----------------------------------------- */
.plate-dark{ background:var(--black);color:var(--chalk) }
.plate-dark .dek,.plate-dark .body{ color:#f0ece3b3 }
.plate-dark .slug{ color:#f0ece373 }
.plate-dark .caption{ color:#f0ece36b }
.plate-dark .rule{ background:#f0ece32e }
.plate-dark .crop::before,.plate-dark .crop::after{ border-color:var(--chalk) }
.plate-dark .stamp--ghost{ --fg:var(--chalk);box-shadow:inset 0 0 0 1.5px var(--chalk) }
.plate-dark .stamp--ghost:hover{ --bg:var(--chalk);--fg:var(--black) }

/* ---------- utility ----------------------------------------------------- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hang{ text-indent:-.36em }
.nowrap{white-space:nowrap}