/* Newsipal coming soon. One open sheet, no rules: masthead on top, the footer line at the bottom, and Paper
   stamping a proof of the site at his drafting board in the middle. Wide: headline and deck left, Paper right.
   Tall: headline, Paper, deck. */

/* ---------- fonts: self-hosted, Latin subsets, trimmed to the weights the page uses ---------- */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url(/fonts/newsreader-bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url(/fonts/newsreader-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-500.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-600.woff2) format('woff2');
}

/* ---------- Paper Press, morning edition ---------- */
:root {
  color-scheme: light;
  --paper: #EFEDE7;
  --paper-raised: #FAF9F6;
  --paper-sunk: #E5E2DA;
  --ink: #1A1A1A;
  --ink-2: #605B51;
  --ink-3: #8D877A;
  --rule-2: rgba(26, 26, 26, .26);
  --hl: #FFE14D;
  --hl-mark: #FFE14D;
  --hl-text: #1A1A1A;
  --stamp: #E5432A;
  --board: #E5E2DA;
  --focus: #1A1A1A;
  /* Paper himself */
  --pal-body: #1A1A1A;
  --pal-eye: #FFFDF8;
  --pal-eye-stroke: transparent;
  --pal-pupil: #1A1A1A;
  --pal-mark: #FAF9F6;
  --pal-shadow: rgba(26, 26, 26, .12);
  --grain-o: .3;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .11 0 0 0 0 .09 1.5 0 0 0 -.68'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* type */
  --f-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --f-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- night edition ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #1C1B19;
    --paper-raised: #252422;
    --paper-sunk: #151412;
    --ink: #ECE6D8;
    --ink-2: #B2AA99;
    --ink-3: #7F796D;
    --rule-2: rgba(236, 230, 216, .26);
    --hl-mark: rgba(255, 225, 77, .30);
    --stamp: #FF6A4D;
    --board: #151412;
    --focus: #ECE6D8;
    --pal-body: #ECE6D8;
    --pal-eye-stroke: #1C1B19;
    --pal-pupil: #1C1B19;
    --pal-mark: #1C1B19;
    --pal-shadow: rgba(0, 0, 0, .35);
    --grain-o: .22;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .9 1.5 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  /* the same side gutter as the app's screens */
  padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.4 var(--f-sans);
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 200px 200px;
  opacity: var(--grain-o);
}
::selection { background: var(--hl); color: var(--hl-text); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.defs { position: absolute; }

/* ---------- the sheet ---------- */
.page {
  --pad-y: clamp(10px, 2.2vh, 26px);
  --gap: clamp(10px, 2.4vh, 28px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(0px, 2.6vw - 10px, 40px);
  padding-block: max(var(--pad-y), env(safe-area-inset-top, 0px)) max(var(--pad-y), env(safe-area-inset-bottom, 0px));
}

.mast {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: clamp(7px, 1.3vh, 14px);
}
.wordmark {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: clamp(21px, min(6.4vw, 3.5vh), 32px);
  line-height: 1;
  letter-spacing: -.025em;
}
.ear {
  margin: 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(14px, 2vh, 16px);
  line-height: 1.2;
  color: var(--ink-2);
  white-space: nowrap;
}
.ed-night { display: none; }
@media (prefers-color-scheme: dark) {
  .ed-morning { display: none; }
  .ed-night { display: inline; }
}

.hero {
  display: grid;
  grid-template-areas: "lead" "stage" "deck";
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--gap);
  min-height: 0;
  padding-block: var(--gap);
}
.lead { grid-area: lead; min-width: 0; container-type: inline-size; }
.stage { grid-area: stage; }
.deck { grid-area: deck; min-width: 0; }

.kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 clamp(8px, 1.5vh, 16px);
  font-size: clamp(13px, 1.9vh, 15px);
  font-weight: 600;
  line-height: 1.2;
}
.kicker .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--stamp); }
.headline {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: clamp(31px, min(14cqi, 6.3vh), 72px);
  line-height: 1;
  letter-spacing: -.024em;
  text-wrap: balance;
}
/* the app's highlighter swipe: soft ends, an uneven rounded edge, sitting behind the letters */
.hl {
  margin: 0 -.04em;
  padding: 0 .12em;
  border-radius: .3em .5em .35em .55em / .6em .4em .55em .45em;
  color: inherit;
  background: linear-gradient(100deg, transparent 0 .12em, var(--hl-mark) .2em calc(100% - .2em), transparent calc(100% - .12em)) no-repeat 0 58% / 100% 78%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .62s cubic-bezier(.3, .75, .25, 1);
}
/* while Paper works the highlight waits for his stamp; the safety timer shows it if the script never runs */
.intro-hl .hl { background-size: 0% 78%; animation: hl-safety .6s 9s forwards; }
@keyframes hl-safety { to { background-size: 100% 78%; } }

.deck {
  max-width: 38em;
  margin: 0;
  font-size: clamp(14px, min(3.9vw, 2.15vh), 19px);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.deck b { font-weight: 600; color: var(--ink); white-space: nowrap; }

.foot {
  padding-top: clamp(7px, 1.2vh, 12px);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink-2);
}
.foot p { margin: 0; }

/* ---------- the stage ---------- */
.stage { position: relative; min-width: 0; min-height: 0; container-type: size; }
.scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100cqw * 1.09, 100vw, 100cqh * 1.0382, 900px);
  aspect-ratio: 136 / 131;
  translate: -50% -50%;
  overflow: clip;
  -webkit-tap-highlight-color: transparent;
}
.lay { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.pal-wrap { position: absolute; inset: 0; transform-origin: 50% 67.94%; animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.012, 1.028); } }
.eyes { will-change: transform; }
.desk { will-change: translate; }

.floor { fill: var(--pal-shadow); }
.f { fill: var(--paper-raised); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.f-thin { stroke-width: 1.8; }
.b { fill: var(--board); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.l { fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.guide { fill: none; stroke: var(--rule-2); stroke-width: .9; stroke-dasharray: 2.2 1.6; }
.mt { fill: var(--ink); font-family: var(--f-serif); font-weight: 800; letter-spacing: -.02em; }
.pad { fill: var(--stamp); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.knob { fill: var(--hl); stroke: var(--ink); stroke-width: 2; }
.tin { fill: var(--paper-sunk); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.lbl { fill: var(--paper-raised); stroke: var(--ink); stroke-width: .9; }
.rub { fill: var(--stamp); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.mk { fill: none; stroke: var(--stamp); stroke-width: 1.5; }
.mk-inner { stroke-width: .6; }
.mk-s { fill: var(--stamp); font-family: var(--f-serif); font-style: italic; font-weight: 600; }
.mk-b { fill: var(--stamp); font-family: var(--f-serif); font-weight: 800; letter-spacing: -.01em; }
.intro .mark { visibility: hidden; animation: mark-safety 0s 9s forwards; }
@keyframes mark-safety { to { visibility: visible; } }
.ticks { opacity: 0; }

/* Paper (geometry and classes from the app's palSVG) */
.p-body { fill: var(--pal-body); }
.p-line { fill: none; stroke: var(--pal-body); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.p-hand { fill: var(--pal-body); }
.p-sclera { fill: var(--pal-eye); stroke: var(--pal-eye-stroke); stroke-width: 1.6; }
.p-pupil { fill: var(--pal-pupil); }
.p-glint { fill: var(--pal-eye); }
.p-mark { fill: none; stroke: var(--pal-mark); stroke-width: 2.4; stroke-linecap: round; }
.p-mark-thin { stroke-width: 1.8; }
.p-eye { transform-box: fill-box; transform-origin: center; }
.p-eyes-happy path { fill: none; stroke: var(--pal-mark); stroke-width: 3; stroke-linecap: round; }
.p-eyes-happy, .p-cheeks, .p-brows { opacity: 0; }
.eyes.happy .p-eyes { opacity: 0; }
.eyes.happy .p-eyes-happy { opacity: 1; }
.eyes.happy .p-cheeks { opacity: .55; }
.eyes.intent .p-brows { opacity: 1; }

/* ---------- wide: headline left, Paper right ---------- */
@media (min-aspect-ratio: 1/1) and (min-width: 640px) {
  .hero {
    grid-template-areas: ". stage" "lead stage" "deck stage" ". stage";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    column-gap: clamp(24px, 4.5vw, 80px);
    row-gap: 0;
  }
  .scene { width: min(100cqw, 100cqh * 1.0382, 900px); }
  .lead { padding-bottom: clamp(14px, 2.6vh, 30px); }
  .deck { max-width: 30em; font-size: clamp(14px, min(1.4vw, 2.35vh), 20px); }
  .headline { font-size: clamp(38px, min(18cqi, 10.6vh), 124px); line-height: .98; }
  .wordmark { font-size: clamp(21px, min(2.1vw, 3.6vh), 32px); }
}
/* wide but very short (landscape phones): tighten the furniture */
@media (min-aspect-ratio: 1/1) and (max-height: 430px) {
  .page { --pad-y: 8px; --gap: 8px; }
  .kicker { margin-bottom: 6px; }
  .deck { line-height: 1.42; }
}

@media (prefers-reduced-motion: reduce) {
  .pal-wrap { animation: none; }
  .hl { transition: none; }
}