/* NewsTide: an old printed newspaper. One memorable element: the verdict headline
   with its woodcut arrow and signal lamp. Everything else stays quiet. */

:root {
  --paper: #e6e4dc;        /* cool grey newsprint */
  --ink: #12110e;          /* deep printing ink */
  --ink-faded: #4a463d;    /* worn type */
  --rule: #3a372f;
  --tint: #f7f6f2;         /* multiplied over the paper texture */
  --wash-up: #e2f0d8;      /* bullish paper */
  --wash-down: #f6d2c9;    /* bearish paper */
  --wash-flat: #f7eabf;    /* neutral paper */
  --lamp-off: #4a463c;
  --desk: #8f897c;          /* the table the paper lies on */
  --lamp-red: #b8382a;
  --lamp-yellow: #d9a922;
  --lamp-green: #3f8a4a;
  --serif: "Old Standard TT", "Times New Roman", serif;
  --blackletter: "UnifrakturMaguntia", "Old English Text MT", serif;
}

:root[data-theme="night"] {
  --paper: #23262a;
  --ink: #e4e0d3;
  --ink-faded: #a7a294;
  --rule: #cfcab9;
  --tint: #2c2f34;
  --wash-up: #2a3f31;
  --wash-down: #4a2c27;
  --wash-flat: #463d24;
  --lamp-off: #2b2a25;
  --desk: #121416;
}

* { box-sizing: border-box; }

html { background: var(--desk); }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
}

.sheet {
  max-width: 1200px;
  margin: 18px auto 30px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.paper {
  position: relative;
  padding: 26px 34px 40px;
  min-height: calc(100vh - 48px);
  /* newsprint texture generated with Higgsfield (gpt_image_2_5), tinted by the verdict */
  background-color: var(--tint);
  background-image: url("img/paper.jpg");
  background-size: cover;
  background-position: center top;
  background-blend-mode: multiply;
  transition: background-color 600ms ease;
}
.paper[data-mood="up"]   { --tint: var(--wash-up); }
.paper[data-mood="down"] { --tint: var(--wash-down); }
.paper[data-mood="flat"] { --tint: var(--wash-flat); }

/* Masthead */
.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 20px;
  padding-bottom: 8px;
  border-bottom: 4px double var(--rule);
}
.nameplate {
  margin: 0;
  font-family: var(--blackletter);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 104px);
  line-height: 1;
  letter-spacing: 0.5px;
}
.ear {
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-faded);
}
.ear p { margin: 2px 0; }
.edition { font-style: italic; color: var(--ink); }
.ear-left { text-align: left; }
.ear-right { text-align: right; }
.edition-switch {
  font: italic 14px var(--serif);
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule);
  padding: 2px 10px;
  cursor: pointer;
}
.edition-switch:focus-visible,
.press:focus-visible,
.ask input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Market line: a running tape of quotes */
.markets {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
.markets-title { font-style: italic; flex: none; }
.tape {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tape-track {
  display: flex;
  width: max-content;
  animation: tape var(--tape-seconds, 60s) linear infinite;
}
.tape:hover .tape-track { animation-play-state: paused; }
.tape-run { display: flex; gap: 34px; padding-right: 34px; white-space: nowrap; }
.quote b { font-weight: 700; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tape-track { animation: none; }
  .tape-run + .tape-run { display: none; }
  .tape-run { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
}
.up-tick { color: var(--lamp-green); }
.down-tick { color: var(--lamp-red); }
.markets .sample-tag { flex: none; }
.sample-tag {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-faded);
}

/* Front page: three columns */
.front {
  display: grid;
  grid-template-columns: 1fr 2.1fr 1fr;
  margin-top: 14px;
}
.column { padding: 0 18px; }
.column:first-child { padding-left: 0; border-right: 1px solid var(--rule); }
.column:last-child { padding-right: 0; border-left: 1px solid var(--rule); }
.lead { padding: 0 26px; }

.section-head {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 400;
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
}
.briefs { list-style: none; margin: 0; padding: 0; }
.briefs li {
  padding: 8px 0;
  border-bottom: 1px dotted var(--ink-faded);
  font-size: 16px;
  line-height: 1.35;
}
.briefs li:last-child { border-bottom: 0; }
.briefs summary { cursor: pointer; list-style: none; }
.briefs summary::-webkit-details-marker { display: none; }
.briefs summary b { font-weight: 700; display: block; }
.briefs summary small::after { content: " \00B7  " attr(data-more); font-style: italic; }
.briefs details[open] summary small::after { content: " \00B7  " attr(data-close); }
.briefs small { color: var(--ink-faded); font-style: italic; font-size: 13px; }
.briefs details p { margin: 6px 0 2px; font-size: 15px; text-align: justify; hyphens: auto; }
.briefs a { color: var(--ink); font-size: 14px; font-style: italic; }
.briefs summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The ask bar: one line under the market tape, set like a classified notice */
.ask {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 26px;
  margin: 10px 0 0;
  padding: 10px 14px 8px;
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: 3px;
}
.field { border: 0; margin: 0; padding: 0; }
.field > label, .field > legend { display: block; font-style: italic; font-size: 15px; margin-bottom: 3px; padding: 0; }
.coin-field { flex: 1 1 180px; }
.ask input[list] {
  width: 100%;
  font: 19px var(--serif);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 3px 2px;
}
.ask input[list]::placeholder { color: var(--ink-faded); font-style: italic; }
.choices { display: flex; flex-wrap: wrap; gap: 5px; }
.choices label { position: relative; cursor: pointer; border: 1px solid var(--rule); padding: 2px 12px; font-size: 16px; }
.choices input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choices label:has(input:checked) { background: var(--ink); color: var(--paper); }
.choices label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.press {
  font: 700 18px var(--serif);
  color: var(--paper);
  background: var(--ink);
  border: 0;
  padding: 7px 24px;
  cursor: pointer;
}
.press:disabled { opacity: 0.55; cursor: progress; }
.hint { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--ink-faded); }
.form-error { flex-basis: 100%; color: var(--lamp-red); margin: 0; font-size: 15px; }
.form-error:empty { display: none; }
.x-note { font-size: 13px; color: var(--ink-faded); font-style: italic; margin: 14px 0 0; }

/* The lead story: the one loud thing on the page */
.welcome .headline { margin-top: 4px; }
.waiting { font-style: italic; font-size: 19px; margin: 6px 0; }
.story { animation: print 500ms ease-out; }
@keyframes print { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .story { animation: none; }
  .paper { transition: none; }
}
.plate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: center;
  gap: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
/* Engravings are black ink on white; multiply lets the paper show through. */
.engraving, .hand {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
.engraving { max-height: 300px; object-fit: contain; }
:root[data-theme="night"] .engraving,
:root[data-theme="night"] .hand { filter: invert(1); mix-blend-mode: screen; }
.signs { display: grid; gap: 44px; justify-items: center; padding: 18px 0; }
.hand { width: 150px; transition: transform 500ms ease; }
.hand[data-dir="up"] { transform: rotate(-90deg) scale(0.9); }
.hand[data-dir="down"] { transform: rotate(90deg) scale(0.9); }
.hand[data-dir="sideways"] { transform: none; }
.stamp { width: 150px; height: 150px; transform: rotate(-9deg); opacity: 0.88; mix-blend-mode: multiply; }
:root[data-theme="night"] .stamp { mix-blend-mode: normal; }
.stamp circle { stroke: var(--stamp); }
.stamp text { fill: var(--stamp); font-family: var(--serif); font-weight: 700; }
.stamp .ring { font-size: 15px; letter-spacing: 2px; }
.stamp .word { font-size: 31px; letter-spacing: 1px; }
.stamp[data-fit="supports"] { --stamp: var(--lamp-green); }
.stamp[data-fit="mixed"] { --stamp: #a8801a; }
.stamp[data-fit="against"] { --stamp: var(--lamp-red); }

.headline {
  margin: 12px 0 4px;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.deck { margin: 0 0 8px; font-size: 20px; font-style: italic; }
.note { margin: 4px 0; font-size: 16px; }
.muted { color: var(--ink-faded); }

/* Editor's notes: closed by default */
.notes { margin-top: 10px; border-top: 1px dotted var(--ink-faded); padding-top: 6px; font-size: 15px; }
.notes summary { cursor: pointer; font-style: italic; }
.notes summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.notes ol, .notes ul { margin: 6px 0; padding-left: 20px; }
.notes ul { list-style: none; padding-left: 0; }
.notes li { margin: 3px 0; }
.cites { font-variant-numeric: tabular-nums; color: var(--ink-faded); }
.cited-head { margin: 8px 0 2px; font-style: italic; font-variant: small-caps; }
.notes small { color: var(--ink-faded); font-style: italic; }

/* Footer */
.colophon {
  margin-top: 26px;
  border-top: 4px double var(--rule);
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  font-size: 14px;
}
.colophon p { margin: 0; }
.disclaimer { font-weight: 700; }
.price { font-style: italic; color: var(--ink-faded); }

/* Narrow screens: one column, lead first */
@media (max-width: 860px) {
  .sheet { margin: 8px 6px 16px; }
  .paper { padding: 16px 18px 28px; }
  .masthead { grid-template-columns: 1fr; text-align: center; gap: 4px; }
  .ear-left, .ear-right { text-align: center; }
  .ear-left { order: 2; }
  .nameplate { order: 1; }
  .ear-right { order: 3; }
  .front { grid-template-columns: 1fr; }
  .lead { order: -1; padding: 0; }
  .column, .column:first-child, .column:last-child { border: 0; padding: 14px 0 0; }
  .plate { grid-template-columns: 1fr; }
  .signs { grid-auto-flow: column; }
}

/* Demo banner for the public replay edition */
.demo-banner {
  margin: 10px 0 0;
  padding: 6px 12px;
  border: 1px dashed var(--rule);
  font-size: 14px;
  font-style: italic;
  text-align: center;
}

/* No sideways scroll on phones */
html, body { overflow-x: clip; }

#langToggle { margin-left: 6px; }

/* Hamster Edition: say plainly that a quiet background is an answer too */
.note.quiet { font-style: italic; border-left: 3px solid currentColor; padding-left: .6em; }