/* Old Ways, One A Day — one screen, one popup. Hand-written, no framework.

   Structure: a faded backdrop image behind everything, then the portrait, the email opt-in
   and the buy button on one screen; the printable below; the disclosure once at the end.
   All thirty clips live inside the Watch popup so the page itself stays quiet.

   This replaces the old assets/style.css, which belonged to the long scrolling page. */

:root {
  --paper: #f6f3ec;
  --ink: #221f1a;
  --muted: #6b6459;
  --line: #ddd5c7;
  --accent: #96692f;
  --accent-soft: #c8a86a;
  --max: 1120px;
  --pad: clamp(16px, 3vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 Georgia, "Iowan Old Style", serif;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2 { font-weight: 700; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -.015em; }
h2 { font-size: clamp(21px, 2.4vw, 30px); margin-bottom: .3em; }
p { margin: 0 0 .8em; }
.tiny { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.eyebrow {
  font: 700 11px/1 Arial, Helvetica, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .8em;
}
.lede { font-size: clamp(17px, 1.5vw, 19px); max-width: 34em; }

/* ── the faded backdrop ─────────────────────────────────────────────────── */
/* No blur and no heavy fade: the countryside is the point of having it there at all. Legibility
   comes from the light scrim below and from the soft panels the copy sits on, not from hiding
   the photograph. `position: fixed` (rather than background-attachment) also behaves on iOS. */
.backdrop {
  position: fixed; inset: 0; z-index: -1;
  background: url("img/field_afternoon.jpg") center 42% / cover no-repeat;
}
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(246, 243, 236, .46) 0%,
    rgba(246, 243, 236, .26) 26%,
    rgba(246, 243, 236, .38) 62%,
    rgba(246, 243, 236, .68) 100%);
}

/* Copy sits on soft panels so the field stays visible around it without fighting the words. */
.hero-copy, .printable > div, .about {
  background: rgba(250, 248, 243, .70);
  backdrop-filter: blur(3px) saturate(1.04);
  border: 1px solid rgba(221, 213, 199, .7);
  border-radius: 4px;
  padding: clamp(16px, 2.2vw, 32px);
}

/* ── bar ────────────────────────────────────────────────────────────────── */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--line);
  background: rgba(246, 243, 236, .82);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.bar .brand { font-weight: 700; color: var(--ink); font-size: 17px; }
.bar nav { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
.bar nav a, .bar nav .link {
  font: 14px/1 Arial, Helvetica, sans-serif; color: var(--muted);
  background: none; border: 0; cursor: pointer; padding: 0;
}
.bar nav a.cta { color: #fff; background: var(--accent); padding: 10px 15px; border-radius: 2px; }
.bar nav a.cta:hover { background: #7f5827; text-decoration: none; }
.bar nav .link:hover { color: var(--ink); text-decoration: underline; }

/* ── the one screen ─────────────────────────────────────────────────────── */
.hero {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(20px, 4vh, 54px) var(--pad) clamp(24px, 5vh, 60px);
}
.hero-inner {
  display: grid; grid-template-columns: minmax(0, .82fr) 1.18fr;
  gap: clamp(20px, 3.4vw, 52px); align-items: center;
}
.portrait { margin: 0; }
.portrait img {
  width: 100%; height: auto; display: block; border-radius: 3px;
  box-shadow: 0 18px 44px rgba(34, 31, 26, .28);
  /* Deliberately NOT capped here: on a desktop screen the portrait shows at its true 842x1500
     aspect, uncropped. The cap lives in the phone block, where space genuinely runs out. */
}
.hero-copy { max-width: 620px; }

/* ── email opt-in ───────────────────────────────────────────────────────── */
.signup { margin: 22px 0 0; }
.signup label {
  display: block; font: 700 14px/1.2 Arial, Helvetica, sans-serif;
  margin-bottom: 8px;
}
.field { display: flex; flex-wrap: wrap; gap: 8px; }
.field input[type=email] {
  flex: 1 1 240px; min-width: 200px;
  font: 16px/1 Arial, Helvetica, sans-serif; padding: 14px;
  border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--ink);
}
.field button {
  font: 700 15px/1 Arial, Helvetica, sans-serif; padding: 14px 22px;
  border: 0; border-radius: 2px; background: var(--accent); color: #fff; cursor: pointer;
}
.field button:hover { background: #7f5827; }
.hp { position: absolute; left: -9999px; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.btn {
  display: inline-block; background: var(--accent); color: #fff; cursor: pointer;
  font: 700 15px/1 Arial, Helvetica, sans-serif; padding: 14px 22px;
  border: 0; border-radius: 2px;
}
.btn:hover { background: #7f5827; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent-soft); }
.btn.ghost:hover { background: rgba(150, 105, 47, .09); }

/* ── the printable ──────────────────────────────────────────────────────── */
.printable {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(26px, 4vh, 56px) var(--pad);
  display: grid; grid-template-columns: minmax(0, .8fr) 1.2fr;
  gap: clamp(22px, 3.4vw, 50px); align-items: center;
  border-top: 1px solid var(--line);
}
.book { margin: 0; }
.book img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 3px; }
.ticks { list-style: none; padding: 0; margin: 0 0 1.2em; }
.ticks li { padding-left: 24px; position: relative; margin-bottom: .34em; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 12px; height: 12px; border: 1.5px solid var(--accent-soft); border-radius: 1px;
}

/* ── the disclosure, once ───────────────────────────────────────────────── */
.about {
  max-width: 800px; margin: 0 auto;
  margin-top: clamp(26px, 4vh, 56px);
  padding: clamp(20px, 2.6vw, 38px);
}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line); padding: 20px var(--pad) 34px; text-align: center;
  color: var(--muted); font-size: 13.5px; background: rgba(239, 233, 221, .6);
}
.foot p { margin: 0 0 .35em; }

/* ── the Watch popup ────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(24, 21, 17, .72);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8px, 2vh, 24px);
  overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal-box {
  background: var(--paper); border-radius: 4px;
  width: 100%; max-width: 860px; padding: clamp(12px, 2vw, 22px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  position: relative; margin: auto;
}
.modal-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  font: 700 13px/1 Arial, Helvetica, sans-serif; color: var(--muted);
  background: rgba(246, 243, 236, .9); border: 1px solid var(--line);
  border-radius: 2px; padding: 7px 11px; cursor: pointer;
}
.modal-close:hover { color: var(--ink); }
.modal-main {
  display: grid; grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(14px, 2vw, 26px); align-items: center; margin-bottom: 14px;
}
.modal-main video {
  width: 100%; max-width: 300px; aspect-ratio: 9 / 16; display: block;
  background: #0d0c0a; border-radius: 2px;
}
.now { display: flex; flex-direction: column; gap: 8px; }
.now-no { font: 700 12px/1 Arial, Helvetica, sans-serif; color: var(--accent); letter-spacing: .1em; }
.now strong { font-size: clamp(19px, 2.3vw, 28px); line-height: 1.12; }
.now-meta { color: var(--muted); font-size: 14px; margin: 0; }
.now-actions { margin: 6px 0 0; }

.playlist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px; max-height: 34vh; overflow-y: auto; padding-right: 4px;
}
.clip {
  padding: 0; border: 1px solid var(--line); background: #fff; cursor: pointer;
  position: relative; overflow: hidden; border-radius: 2px; line-height: 0;
}
.clip img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.clip .clip-no {
  position: absolute; left: 4px; bottom: 4px;
  font: 700 11px/1 Arial, Helvetica, sans-serif; color: #fff;
  background: rgba(20, 18, 15, .62); padding: 3px 5px; border-radius: 2px;
}
.clip:hover { border-color: var(--accent-soft); }
.clip.playing { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── small screens ──────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero-inner, .printable, .modal-main { grid-template-columns: 1fr; }
  /* The portrait is 9:16 and at full width it fills the whole first screen, pushing the
     opt-in and the buttons below the fold. Cap it so the copy lands on the first screen. */
  .portrait img { max-height: 42vh; object-fit: cover; object-position: center 22%; }
  .portrait { max-width: 340px; margin: 0 auto; }
  .book img { max-width: 320px; margin: 0 auto; }
  .modal-main { align-items: start; }
  .modal-main video { max-width: 240px; margin: 0 auto; }
  .playlist { max-height: 30vh; }
  .bar nav a:not(.cta) { display: none; }
  .bar nav .link { display: none; }   /* the hero has its own Watch button */
  .bar .brand { font-size: 15px; }
  .bar nav a.cta { padding: 9px 12px; font-size: 13px; white-space: nowrap; }
  .hero { padding-top: 18px; }
}

/* Phones. Declared AFTER the 860 block on purpose: at equal specificity the later rule wins,
   so these must come second or the portrait cap below is silently overridden. */
@media (max-width: 520px) {
  /* Keep "Send them" beside the input and shorten the portrait further, so the Watch and buy
     buttons still land on the first phone screen instead of just below it. */
  .field input[type=email] { flex: 1 1 150px; min-width: 130px; padding: 13px 12px; }
  .field button { padding: 13px 16px; font-size: 14px; }
  .portrait img { max-height: 30vh; }
  h1 { font-size: clamp(27px, 8vw, 34px); }
  .lede { font-size: 16px; }
  .hero { padding-top: 12px; }
}