/* $SEED — THE SEED TIMES (fx/paper.css)
   A newspaper front page lying on the steel desk. The sheet is off-white stock with a grain built from
   tiny repeating gradients, a horizontal fold shadow across the middle, a dog-eared corner and a strip of
   hazard tape holding it down. Ink type only: the stencil for the masthead and headline, Archivo for the
   body, Plex Mono for addresses and numbers. No images anywhere.
   A fresh edition (open / crack / leak) is a NEW sheet dropped on top of the old one: both sheets share
   one grid cell, the new one falls in from above with a little overshoot, the old one sinks under it and
   is removed when the fall ends. The 5-second re-compose only swaps text inside the current sheet. */

.np{padding:10px 0 50px;min-width:0}
.np-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap}
.np-head p{margin:0}
.np-acts{display:flex;gap:10px;flex-wrap:wrap}
.np-btn{
  display:inline-block;text-decoration:none;cursor:pointer;background:#fff;
  font:800 13px/1 var(--body);text-transform:uppercase;letter-spacing:.06em;padding:11px 14px;
  border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .1s,box-shadow .1s;
}
.np-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.np-btn.np-x{background:var(--ink);color:#fff}
.np-btn[disabled]{opacity:.5;cursor:wait}

/* ---------- the desk ---------- */
.np-desk{
  position:relative;margin-top:22px;padding:clamp(14px,3vw,34px) clamp(10px,3vw,34px);
  border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);overflow:hidden;
  /* brushed plate, same grain as the body but a touch darker so the paper reads as lighter than the desk */
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#d9dcd8,#c9cdc9);
}
/* four desk rivets */
.np-desk::before,.np-desk::after{
  content:"";position:absolute;left:7px;right:7px;height:11px;pointer-events:none;
  background:
    radial-gradient(circle at 5.5px 5.5px,#9ea39f 0 3.4px,var(--ink) 3.5px 5.4px,transparent 5.6px) left center/11px 11px no-repeat,
    radial-gradient(circle at 5.5px 5.5px,#9ea39f 0 3.4px,var(--ink) 3.5px 5.4px,transparent 5.6px) right center/11px 11px no-repeat;
}
.np-desk::before{top:7px}
.np-desk::after{bottom:7px}

/* both sheets sit in the same cell so the new one can fall onto the old one */
.np-stack{display:grid;max-width:980px;margin:0 auto;position:relative;transform-origin:50% 100%}
.np-stack.np-thud{animation:np-thud .4s .5s cubic-bezier(.2,.8,.3,1)}
@keyframes np-thud{30%{transform:translateY(4px) scale(1,.992)}60%{transform:translateY(-1px)}}

/* ---------- the sheet ---------- */
.np-sheet{
  grid-area:1/1;position:relative;min-width:0;
  padding:clamp(14px,2.6cqw,30px) clamp(12px,2.8cqw,34px) clamp(12px,2cqw,24px);
  color:var(--ink);font-family:var(--body);
  border:1px solid #cfc8b6;
  box-shadow:2px 2px 0 rgba(0,0,0,.12),9px 10px 0 var(--ink);
  /* paper: two speckle layers offset against each other, a faint laid-line texture, then the stock tone */
  background:
    radial-gradient(circle at 2px 2px,rgba(0,0,0,.045) 0 .7px,transparent 1.1px) 0 0/7px 9px,
    radial-gradient(circle at 4px 6px,rgba(0,0,0,.03) 0 .6px,transparent 1px) 3px 5px/11px 13px,
    radial-gradient(circle at 6px 3px,rgba(255,255,255,.5) 0 .6px,transparent 1px) 1px 2px/9px 15px,
    repeating-linear-gradient(0deg,rgba(0,0,0,.016) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#f7f3e9 0,#f2ecdf 48%,#ede6d6 52%,#f3eee2 100%);
  transform:rotate(-.35deg);
  container-type:inline-size;
  z-index:2;
}
/* the fold: a crease across the middle — a hard dark line, a soft shadow above, a lit edge below */
.np-sheet::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:26px;margin-top:-13px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.05) 44%,rgba(0,0,0,.14) 50%,rgba(255,255,255,.45) 52%,rgba(255,255,255,.12) 62%,transparent 100%);
}
/* the dog-ear: bottom-right corner turned up, showing the desk underneath */
.np-sheet::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:34px;height:34px;pointer-events:none;z-index:3;
  background:
    linear-gradient(225deg,#c9cdc9 0 50%,transparent 50%),
    linear-gradient(45deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.05) 30%,#ebe4d3 50%,#f7f3e9 100%);
  background-size:100% 100%;
  clip-path:polygon(0 100%,100% 0,100% 100%);
}
/* the hazard tape holding the top-left corner down */
.np-tape{
  position:absolute;left:-18px;top:14px;width:92px;height:22px;transform:rotate(-38deg);z-index:4;pointer-events:none;
  background:repeating-linear-gradient(-45deg,var(--ink) 0 9px,var(--yellow) 9px 18px);
  opacity:.92;box-shadow:1px 2px 0 rgba(0,0,0,.25);
}
.np-tape::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.25),transparent 40%,transparent 60%,rgba(255,255,255,.25))}

/* entrance / exit of sheets */
.np-sheet.np-in{animation:np-drop .72s cubic-bezier(.22,.9,.28,1.08) both;z-index:3}
@keyframes np-drop{
  0%{transform:translate(-4%,-112%) rotate(-6deg);box-shadow:2px 2px 0 rgba(0,0,0,.12),40px 60px 0 rgba(18,18,18,.35)}
  72%{transform:translate(.4%,.8%) rotate(.25deg)}
  100%{transform:rotate(-.35deg)}
}
.np-sheet.np-out{animation:np-sink .72s ease-out both;z-index:2}
@keyframes np-sink{to{transform:translate(3px,5px) rotate(-.6deg);filter:brightness(.86)}}
/* loose ink dust kicked up by the landing */
.np-dust{position:absolute;left:0;top:0;width:5px;height:5px;background:var(--ink);opacity:0;pointer-events:none;z-index:5;border-radius:1px}
.np-dust.np-go{animation:np-dust .55s .6s cubic-bezier(.1,.6,.3,1) both}
@keyframes np-dust{0%{opacity:.6;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}

/* ---------- masthead ---------- */
.np-mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px 14px;min-width:0}
.np-ear{display:flex;flex-direction:column;gap:2px;min-width:0;border:1.5px solid var(--ink);padding:6px 9px;font-size:11px;line-height:1.1;text-transform:uppercase;letter-spacing:.08em}
.np-ear b{font-family:var(--stencil);font-weight:900;font-size:18px;letter-spacing:.02em;white-space:nowrap}
.np-ear span{color:var(--ink-2);font-weight:600;font-size:9.5px}
.np-ear-l{justify-self:start}
.np-ear-r{justify-self:end;text-align:right}
.np-title{
  margin:0;font-family:var(--stencil);font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:.86;text-align:center;
  font-size:clamp(44px,11.2cqw,112px);white-space:nowrap;
}
.np-dateline{
  display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-top:8px;padding:5px 0;
  border-top:1.5px solid var(--ink);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.np-dateline span:nth-child(2){color:var(--orange-d)}
.np-dateline span:last-child{font-family:var(--mono);font-weight:600;letter-spacing:.04em}
.np-rule{height:0;border-top:1px solid var(--ink);margin:0}
.np-rule-double{border-top:3px solid var(--ink);position:relative;margin-bottom:14px}
.np-rule-double::after{content:"";position:absolute;left:0;right:0;top:2px;border-top:1px solid var(--ink)}

/* ---------- the lead ---------- */
.np-lead{padding:4px 0 12px;position:relative}
.np-tag{
  display:inline-block;background:var(--orange);color:#fff;font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;margin-bottom:10px;transform:rotate(-1.5deg);border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
}
.np-tag.np-tag-late{background:var(--ink);color:var(--yellow)}
.np-headline{
  margin:0;font-family:var(--stencil);font-weight:900;text-transform:uppercase;letter-spacing:.005em;line-height:.9;
  font-size:clamp(34px,6.4cqw,72px);overflow-wrap:break-word;
}
.np-deck{margin:12px 0 0;font-size:clamp(14px,1.9cqw,18px);font-weight:600;line-height:1.35;color:var(--ink-2);padding-left:12px;border-left:3px solid var(--orange)}
.np-deck b{color:var(--ink)}

/* ---------- body: three columns and the rail ---------- */
.np-body{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(190px,.78fr);gap:0 22px;
  border-top:1px solid var(--ink);padding-top:12px;
}
.np-col{min-width:0;position:relative}
.np-col + .np-col::before,.np-rail::before{content:"";position:absolute;left:-11px;top:0;bottom:0;border-left:1px solid rgba(18,18,18,.55)}
.np-kicker{
  margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding-bottom:4px;
  border-bottom:2px solid var(--ink);display:flex;justify-content:space-between;gap:8px;
}
.np-kicker i{font-style:normal;color:var(--orange-d);font-family:var(--mono);font-weight:600;letter-spacing:0}
.np-col p{margin:0 0 9px;font-size:13.5px;line-height:1.42;text-align:justify;hyphens:auto;overflow-wrap:anywhere}
.np-col p:first-of-type::first-letter{
  float:left;font-family:var(--stencil);font-weight:900;font-size:46px;line-height:.78;padding:4px 6px 0 0;
}
.np-col p b{font-weight:800}
.np-col p code{font-family:var(--mono);font-size:12px;font-weight:600}
.np-col .np-mono{font-family:var(--mono);font-weight:600;font-size:12.5px}

/* the right rail: two boxes */
.np-rail{min-width:0;position:relative;display:flex;flex-direction:column;gap:14px}
.np-box{border:2px solid var(--ink);padding:10px 11px 11px;position:relative;background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 3px #f3eee2,inset 0 0 0 4px var(--ink)}
.np-box-title{display:block;font-family:var(--stencil);font-weight:900;font-size:30px;line-height:1;letter-spacing:.03em;text-align:center;margin:4px 0 8px}
/* WANTED: a height chart with the suspect's silhouette on it, the address as the name plate */
.np-mug{display:block;width:100%;height:auto;border:1.5px solid var(--ink);background:#fff}
.np-mug .np-mug-line{stroke:var(--ink);stroke-width:1;opacity:.35}
.np-mug .np-mug-body{fill:var(--ink)}
.np-mug .np-mug-q{font-family:var(--stencil);font-weight:900;font-size:48px;fill:var(--ink)}
.np-wanted code{display:block;margin-top:8px;text-align:center;font-family:var(--mono);font-size:12px;font-weight:600;background:var(--ink);color:#fff;padding:5px 6px;overflow-wrap:anywhere}
.np-wanted code.np-you{background:var(--orange)}
.np-wanted p{margin:8px 0 0;font-size:12px;line-height:1.4}
.np-wanted p b{font-family:var(--stencil);font-weight:900;font-size:20px;letter-spacing:.02em}
.np-reward{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:8px;border-top:1px dashed var(--ink);padding-top:6px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.np-reward b{font-family:var(--stencil);font-weight:900;font-size:22px;letter-spacing:.02em}
.np-reward b.np-won{color:var(--won)}
/* the rubber stamp across the suspect */
.np-stampmark{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-14deg);pointer-events:none;
  font-family:var(--stencil);font-weight:900;font-size:34px;letter-spacing:.06em;color:var(--won);
  border:4px double var(--won);padding:0 10px;line-height:1.1;opacity:.85;
  -webkit-mask:repeating-linear-gradient(35deg,#000 0 3px,rgba(0,0,0,.65) 3px 5px),radial-gradient(circle at 30% 60%,transparent 0 2px,#000 3px);
  mask:repeating-linear-gradient(35deg,#000 0 3px,rgba(0,0,0,.65) 3px 5px);
}
.np-stampmark.np-stamp-you{color:var(--orange);border-color:var(--orange)}
/* PRESSURE: a barometer */
.np-pressure{text-align:center}
.np-gauge{display:block;width:78%;max-width:170px;height:auto;margin:0 auto}
.np-gauge .np-g-arc{fill:none;stroke:var(--ink);stroke-width:2}
.np-gauge .np-g-fill{fill:none;stroke:var(--orange);stroke-width:7;stroke-linecap:butt}
.np-gauge .np-g-tick{stroke:var(--ink);stroke-width:1.5}
.np-gauge .np-g-needle{stroke:var(--ink);stroke-width:3;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 100%}
.np-gauge .np-g-hub{fill:var(--orange);stroke:var(--ink);stroke-width:2}
.np-gauge text{font-family:var(--body);font-weight:800;font-size:8px;letter-spacing:.08em;fill:var(--ink-2)}
.np-gap{display:block;font-family:var(--stencil);font-weight:900;font-size:34px;line-height:1;margin-top:-6px}
.np-gap-to{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:3px}
.np-weather{display:flex;justify-content:center;gap:8px;margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.np-weather b{background:var(--ink);color:var(--yellow);padding:3px 7px}
.np-weather b.np-w-up{background:var(--orange);color:#fff}
.np-weather b.np-w-down{background:var(--won);color:#fff}
.np-weather span{padding:3px 0}

/* ---------- classifieds ---------- */
.np-class{border-top:3px solid var(--ink);margin-top:10px;padding-top:8px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:start}
.np-class > b{font-family:var(--stencil);font-weight:900;font-size:22px;letter-spacing:.04em;line-height:1;padding-top:3px}
.np-class ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.np-class li{font-size:11.5px;line-height:1.35;padding:4px 0 4px 12px;border-left:1px solid var(--ink);min-width:0;overflow-wrap:anywhere}
.np-class li b{display:block;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.np-foot{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin-top:10px;padding-top:6px;border-top:1px solid var(--ink);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.np-foot code{font-family:var(--mono);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);overflow-wrap:anywhere}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .np-body{grid-template-columns:repeat(2,minmax(0,1fr))}
  .np-rail{grid-column:1 / -1;flex-direction:row;margin-top:12px;padding-top:12px;border-top:1px solid var(--ink)}
  .np-rail::before{display:none}
  .np-rail .np-box{flex:1 1 0;min-width:0}
  .np-col:nth-child(3)::before{display:none}
  .np-class ul{grid-template-columns:1fr}
}
@media (max-width:600px){
  .np-body{grid-template-columns:1fr}
  .np-col + .np-col::before{display:none}
  .np-col + .np-col{border-top:1px solid rgba(18,18,18,.55);padding-top:10px;margin-top:4px}
  .np-rail{flex-direction:column}
  .np-mast{grid-template-columns:1fr;justify-items:center;gap:8px}
  .np-ear{flex-direction:row;gap:8px;align-items:baseline;justify-self:center;text-align:center}
  .np-ear-r{order:3}
  .np-title{font-size:clamp(40px,12.5cqw,72px)}
  .np-headline{font-size:clamp(32px,9.2cqw,48px)}
  .np-class{grid-template-columns:1fr}
  .np-tape{width:76px;height:18px;top:10px}
  .np-sheet{transform:none}
  .np-sheet.np-in{animation-name:np-drop-flat}
  @keyframes np-drop-flat{0%{transform:translate(0,-112%) rotate(-3deg)}72%{transform:translate(0,.8%)}100%{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  /* style.css already stops every animation; the sheet just appears in place with no fall */
  .np-sheet.np-in,.np-sheet.np-out,.np-stack.np-thud,.np-dust{animation:none}
  .np-sheet.np-out{display:none}
}