/* Shared structural styles for The Long Clock feature essays.
   Each page supplies its own skin via :root custom properties. */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background-color:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.18rem;
  line-height:1.86;
  letter-spacing:0.005em;
}

/* material grain — a barely-there texture so the page feels like a real surface */
body::before{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:var(--grain-opacity,0.05); mix-blend-mode:var(--grain-blend,multiply);
  background-image: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='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.canvas{ max-width:48rem; margin:0 auto; padding:clamp(2.6rem,6vw,5.5rem) clamp(1.4rem,5vw,3.5rem) 6rem; position:relative; }
.col{ max-width:var(--measure,40rem); margin-left:auto; margin-right:auto; }

.eyebrow{ font-family:var(--font-mono); font-size:0.72rem; font-weight:500; letter-spacing:0.3em; text-transform:uppercase; color:var(--accent); margin:0; }
.backlink{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; color:var(--ink-soft); text-decoration:none; }
.backlink:hover{ color:var(--ink); }
.accent{ color:var(--accent); }

header{ position:relative; padding-top:1rem; }
h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,7vw,4.1rem); line-height:1.0; letter-spacing:-0.02em; margin:1rem 0 0; text-wrap:balance; }
.deck{ font-family:var(--font-body); font-size:clamp(1.14rem,3vw,1.36rem); line-height:1.5; color:var(--ink-soft); margin:1.8rem 0 0; max-width:34rem; text-wrap:pretty; }

section{ margin-top:4.2rem; }
.marker{ display:flex; align-items:baseline; gap:0.9rem; margin-bottom:0.4rem; }
.numeral{ font-family:var(--font-display); font-weight:500; font-size:1.05rem; color:var(--accent); letter-spacing:0.04em; }
h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,4.4vw,2.25rem); line-height:1.1; letter-spacing:-0.012em; margin:0.2rem 0 1.1rem; text-wrap:balance; }
p{ margin:0 0 1.5rem; }
.lede strong, .lede b{ color:var(--ink); font-weight:600; }

.opening::first-letter{ font-family:var(--font-display); font-weight:600; float:left; font-size:3.4rem; line-height:0.74; padding:0.3rem 0.5rem 0 0; color:var(--accent); }

.pull{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.45rem,4vw,1.95rem); line-height:1.2; letter-spacing:-0.01em; color:var(--ink); margin:2.4rem 0; padding-left:1.3rem; border-left:3px solid var(--accent-line); text-wrap:balance; }
.pull .accent{ color:var(--accent); }

/* divider — centred hairline with a small mark; pages may override */
.div{ display:flex; align-items:center; justify-content:center; gap:0.9rem; margin:4.4rem auto; }
.div::before, .div::after{ content:""; height:1px; width:min(32%,150px); background:var(--rule); }
.div .mark{ font-size:0.82rem; color:var(--accent); line-height:1; }

/* static side-by-side comparison (replaces the old toggles) */
.compare{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--rule); margin:1.9rem 0; }
.compare .c{ padding:1.2rem 1.3rem; }
.compare .c:first-child{ border-right:1px solid var(--rule); }
.compare h4{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin:0 0 0.6rem; }
.compare p{ font-size:1.0rem; line-height:1.55; margin:0; color:var(--ink-soft); }
.compare p b{ color:var(--ink); font-weight:600; }
@media(max-width:560px){ .compare{ grid-template-columns:1fr; } .compare .c:first-child{ border-right:0; border-bottom:1px solid var(--rule); } }

.close{ margin-top:3.4rem; }
.signoff{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:1.2rem; line-height:1.5; color:var(--ink-soft); border-top:1px solid var(--rule); margin-top:2.4rem; padding-top:1.6rem; }

.readmore{ display:inline-block; font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent2,var(--accent)); text-decoration:none; border:1px solid var(--accent-line); border-radius:2px; padding:0.7rem 1.15rem; transition:background .25s ease, color .25s ease, border-color .25s ease; }
.readmore:hover{ background:var(--accent2,var(--accent)); color:var(--bg); border-color:var(--accent2,var(--accent)); }

.more-door{ margin:2.2rem 0 0; padding:1.2rem 1.3rem; border:1px dashed var(--accent-line); }
.more-door .t{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin:0 0 0.4rem; }
.more-door .s{ font-size:1.0rem; line-height:1.55; color:var(--ink-soft); margin:0; }
.more-door a{ color:var(--accent2,var(--accent)); }

.foot{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.04em; line-height:1.7; color:var(--ink-soft); margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--rule); opacity:0.85; }
.foot b{ color:var(--ink); font-weight:600; }

/* reveal (enhancement; content visible by default) */
.reveal{ opacity:1; transform:none; }
body.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .85s ease, transform .85s ease; }
body.js .reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ body.js .reveal{ opacity:1 !important; transform:none !important; } }

@media(max-width:520px){ body{ font-size:1.1rem; } .opening::first-letter{ font-size:3rem; } }