/* =====================================================================
PriceDrop.me — "The Deal Ledger"
Editorial, paper-warm, monospace-anchored. Trust through restraint.
===================================================================== */
/* Fonts are loaded via a in the HTML head (parallel with this stylesheet) — an @import
here would serialize the fetch chain (html -> css -> font css -> woff2) and block first paint. */
:root {
/* Paper palette */
--paper: #f5f0e6;
--paper-deep: #ece5d6;
--paper-edge: #e2dac6;
--ink: #14110d;
--ink-soft: #2a2620;
--ink-mid: #6b6760;
--ink-faint: #9a958b;
--rule: #1a1814;
--rule-soft: rgba(20,17,13,.12);
--rule-hair: rgba(20,17,13,.22);
/* Single bold accent — used sparingly so it stays loud */
--signal: #c8281e;
--signal-deep: #9a1a14;
--signal-soft: rgba(200,40,30,.08);
/* Secondary accent — for the "below typical" / trust signals */
--gold: #a17500;
--gold-soft: rgba(161,117,0,.10);
/* Type */
--serif: 'Instrument Serif', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
--mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
/* Rhythm */
--col-max: 1240px;
--col-text: 720px;
--gutter: clamp(1rem, 3vw, 2rem);
--rule-w: 1px;
/* Shadows — editorial uses paper-shadow, not glow */
--paper-lift: 0 1px 0 rgba(0,0,0,.04), 0 2px 6px -2px rgba(20,17,13,.06);
--paper-lift-hover: 0 1px 0 rgba(0,0,0,.06), 0 14px 32px -16px rgba(20,17,13,.18);
}
/* ─── Reset / base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
color: var(--ink);
background: var(--paper);
/* Subtle paper grain — purely decorative; falls back to flat color */
background-image:
radial-gradient(rgba(20,17,13,.025) 1px, transparent 1px),
radial-gradient(rgba(20,17,13,.018) 1px, transparent 1px);
background-size: 3px 3px, 7px 7px;
background-position: 0 0, 1px 2px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "cv11";
text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
/* ─── Overflow guard ───
A third-party embed once rendered a fixed 1170px-wide iframe inside the deal grid, which made
the whole document 1186px wide on a 375px phone and let every section scroll sideways. The ad
is gone, but replaceable media must never be able to do that again: cap the intrinsic width of
anything embedded, then clip (not `hidden` — `clip` doesn't create a scroll container, so the
sticky filter bar keeps working) whatever still manages to stick out. */
img, svg, video, canvas, iframe, embed, object, table, pre { max-width: 100%; }
iframe, embed, object { max-width: 100% !important; }
body { overflow-x: clip; }
.container {
width: 100%;
max-width: var(--col-max);
margin: 0 auto;
padding: 0 var(--gutter);
}
.visually-hidden {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* ─── Selection / focus ─── */
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
/* =====================================================================
HEADER — newspaper nameplate
===================================================================== */
.app-header {
position: relative;
padding: clamp(.7rem, 1.6vw, 1rem) 0 0;
border-bottom: var(--rule-w) solid var(--rule);
background: var(--paper);
}
.app-header::before {
/* hairline above the bottom rule = double-rule masthead trick */
content: '';
position: absolute; left: 0; right: 0; bottom: 4px;
height: 1px; background: var(--rule); opacity: .5;
}
.header-top {
display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem; flex-wrap: wrap;
padding-bottom: .55rem;
}
/* Logo / nameplate */
.site-logo { margin: 0; }
/* Homepage H1. The logo is no longer an