/* Wisedry Ratchet Flower Press — layout, 2026-10-13.

   The page reads top to bottom as one argument: what it is, what the
   usual ways cost, the six decisions that answer that, and only then
   the purchase. One repeated mark ties the chapters to the product
   itself: a 1px strap line, the yellow seam the webbing would leave.
   Photography slots hold the layout until the design-department shoot
   lands; one drawn diagram (no photograph can show it) sits in
   decision 04. */

body.press-v1 { margin: 0; overflow-x: hidden; background: var(--page-bg); color: var(--text-primary); font-family: var(--font-body); }
body.press-v1 * { box-sizing: border-box; }
body.press-v1 img { display: block; max-width: 100%; }
body.press-v1 figure, body.press-v1 p, body.press-v1 h1, body.press-v1 h2, body.press-v1 h3 { margin-top: 0; }
html:has(body.press-v1) { background: var(--page-bg); }

.press-shell { width: min(calc(100% - 64px), var(--container-wide)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Shared marks ------------------------------------------------------- */

.press-brand { margin-bottom: 6px; color: var(--text-secondary); font: 700 .86rem var(--font-utility); letter-spacing: .14em; text-transform: uppercase; }
.press-label { margin-bottom: 22px; color: var(--accent-primary); font: 700 .72rem var(--font-utility); letter-spacing: .16em; text-transform: uppercase; }

.press-button { min-height: var(--touch-target-min); display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border: 0; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--cta-gradient-from), var(--cta-gradient-to)); color: var(--text-on-accent); font: 700 .84rem var(--font-utility); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: transform .16s ease, background .16s ease; }
.press-button:hover { transform: translateY(-2px); background: linear-gradient(135deg, var(--cta-gradient-from-hover), var(--cta-gradient-to-hover)); }
.press-link { min-height: var(--touch-target-min); display: inline-flex; align-items: center; color: var(--text-primary); font: 600 .84rem var(--font-utility); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.press-link:hover { color: var(--accent-primary); border-color: var(--accent-primary); }

/* The strap line: the page's one repeated mark. */
.strap-line { display: block; width: 100%; height: 1px; background: var(--strap-line); }

/* Pending photography slot — a framed plate that holds the layout until
   the shoot lands. Reads as a reserved place, never as a broken image. */
.slot-frame { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px 20px; border: 1px solid var(--border-default); background: var(--surface-stage); background-image: repeating-linear-gradient(45deg, transparent 0 16px, var(--accent-soft) 16px 17px); }
.slot-frame__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--text-muted); font: 700 .62rem var(--font-utility); letter-spacing: .14em; text-transform: uppercase; }
.slot-frame__note { align-self: center; max-width: 320px; color: var(--text-secondary); font: 400 1.05rem/1.5 var(--font-display); letter-spacing: -.01em; }
.slot-frame--45 { aspect-ratio: 4 / 5; }
.slot-frame--58 { aspect-ratio: 5 / 8; }
.slot-frame--43 { aspect-ratio: 4 / 3; }
.slot-frame--32 { aspect-ratio: 3 / 2; }
.slot-frame--11 { aspect-ratio: 1 / 1; }
.slot-frame--wide { aspect-ratio: 21 / 9; }

/* --- Hero: the color that stays ----------------------------------------- */

.press-hero { position: relative; overflow: hidden; padding: 56px 0 96px; background: var(--page-bg); }
.press-hero::before { position: absolute; z-index: 0; inset: -12% -18% auto auto; width: 76vw; height: 92%; background: var(--hero-wash); content: ""; pointer-events: none; }
.hero-layout { position: relative; display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); align-items: center; gap: 48px; min-height: 640px; }
.hero-copy { position: relative; z-index: 2; padding: 42px 0; }
.hero-copy h1 { max-width: 660px; margin-bottom: 26px; color: var(--text-primary); font: 400 clamp(2.9rem, 4.6vw, 4.2rem)/0.97 var(--font-display); letter-spacing: -.055em; }
/* Each sentence owns its own line: the headline breaks where the writing
   breaks, not wherever the viewport size happens to push it. The size cap
   keeps the longest line inside the column, so the break never lands mid-
   sentence on a wide monitor. */
.hero-copy h1 span { display: block; }
/* The seam under the headline: a short length of strap, held off the edge. */
.hero-copy h1::after { display: block; width: 132px; height: 3px; margin-top: 26px; background: var(--strap-seam); content: ""; }
.hero-promise { max-width: 520px; margin-bottom: 22px; color: var(--accent-primary); font: 500 clamp(1.35rem, 2.1vw, 1.85rem)/1.3 var(--font-display); letter-spacing: -.02em; }
.hero-strip { max-width: 560px; margin-bottom: 34px; color: var(--text-secondary); font: 600 .78rem var(--font-utility); letter-spacing: .06em; text-transform: uppercase; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-bottom: 34px; }
.hero-note { max-width: 460px; margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.6; }
.hero-media { position: relative; z-index: 1; width: min(100%, 560px); margin: 0 0 0 auto; }

/* --- Film: directly under the hero -------------------------------------- */

.press-film { padding: 88px 0 96px; }
.press-section-top { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 32px; }
.press-section-top h2 { margin: 0; color: var(--text-primary); font: 400 clamp(1.9rem, 3.1vw, 2.6rem)/1.05 var(--font-display); letter-spacing: -.04em; }
.press-section-top .press-label { margin: 0; }
.press-film-media { margin: 0; }

/* --- What it is --------------------------------------------------------- */

.press-what { padding: 96px 0 104px; background: var(--page-bg-alt); }
.what-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px 7vw; align-items: center; }
.what-copy h2 { max-width: 560px; margin-bottom: 24px; color: var(--text-primary); font: 400 clamp(2.5rem, 4vw, 4rem)/1.02 var(--font-display); letter-spacing: -.05em; }
.what-copy > p:not(.press-label) { max-width: 520px; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; }
.what-media { width: min(100%, 480px); margin: 0 0 0 auto; }

/* --- The usual ways: the comparison ------------------------------------ */

.press-usual { padding: 104px 0 112px; background: var(--page-bg); }
.usual-head { max-width: 860px; margin-bottom: 52px; }
.usual-head h2 { max-width: 780px; margin: 0; color: var(--text-primary); font: 400 clamp(2.3rem, 3.6vw, 3.6rem)/1.06 var(--font-display); letter-spacing: -.05em; }
.usual-table-wrap { overflow-x: auto; }
.usual-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.usual-table caption { text-align: left; }
.usual-table th, .usual-table td { padding: 16px 18px; border-top: 1px solid var(--border-subtle); text-align: left; vertical-align: top; font-size: .95rem; }
.usual-table thead th { padding-top: 0; border-top: 0; color: var(--text-muted); font: 700 .72rem var(--font-utility); letter-spacing: .1em; text-transform: uppercase; }
.usual-table tbody th { width: 148px; color: var(--text-primary); font: 700 .8rem var(--font-utility); letter-spacing: .04em; }
.usual-table td { color: var(--text-secondary); line-height: 1.5; }
.usual-table .is-ratchet { background: var(--accent-soft); color: var(--text-primary); }
.usual-table thead .is-ratchet { color: var(--accent-primary); }
.usual-table tbody tr:first-child .is-ratchet { border-top: 2px solid var(--accent-primary); }
.usual-close { max-width: 720px; margin: 40px 0 0; padding-left: 20px; border-left: 3px solid var(--accent-primary); color: var(--text-primary); font: 400 clamp(1.4rem, 2.1vw, 1.85rem)/1.35 var(--font-display); letter-spacing: -.02em; }

/* --- Our direction: six decisions --------------------------------------- */

.press-design { position: relative; padding: 8px 0 96px; background: var(--page-bg); }
.design-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px 7vw; align-items: center; padding: 88px 0 64px; }
.design-head h2 { margin: 0 0 14px; color: var(--text-primary); font: 400 clamp(2.6rem, 4.2vw, 4.2rem)/1 var(--font-display); letter-spacing: -.05em; }
.design-sub { margin-bottom: 18px; color: var(--accent-primary); font: 500 clamp(1.6rem, 2.4vw, 2.3rem)/1.1 var(--font-display); letter-spacing: -.03em; }
.design-intro { max-width: 520px; margin: 0; color: var(--text-secondary); font-size: 1.02rem; line-height: 1.7; }
.design-head-media { width: min(100%, 520px); margin: 0 0 0 auto; }

.press-points { }
.press-point { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 24px 7vw; align-items: center; padding: 52px 0; border-top: 1px solid var(--border-subtle); }
.press-point:nth-of-type(even) .point-copy { order: 2; }
.point-copy { display: grid; gap: 16px; }
.point-num { color: var(--accent-primary); font: 400 1.7rem/1 var(--font-mono); letter-spacing: .06em; }
.point-copy h3 { color: var(--text-primary); font: 400 clamp(1.6rem, 2.4vw, 2.3rem)/1.1 var(--font-display); letter-spacing: -.03em; }
.point-copy p { max-width: 520px; margin: 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.7; }
.point-media { min-width: 0; }
.point-media figcaption { margin: 12px 2px 0; color: var(--text-muted); font-size: .76rem; line-height: 1.55; }

/* The drawn truth of decision 04: rounded edges and pads guide the strap.
   No photograph shows friction, so this one diagram carries it. */

/* --- Outdoors ----------------------------------------------------------- */

.press-garden { padding: 96px 0 104px; background: var(--page-bg-alt); }
.garden-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px 7vw; align-items: center; }
.garden-copy h2 { max-width: 520px; margin-bottom: 22px; color: var(--text-primary); font: 400 clamp(2.4rem, 3.8vw, 3.8rem)/1.02 var(--font-display); letter-spacing: -.05em; }
.garden-copy > p:not(.press-label) { max-width: 480px; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; }
.garden-media { width: min(100%, 620px); margin: 0 0 0 auto; }

/* --- In the box --------------------------------------------------------- */

.press-kit { padding: 104px 0 112px; background: var(--page-bg); }
.kit-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px 7vw; align-items: center; }
.kit-copy h2 { margin-bottom: 30px; color: var(--text-primary); font: 400 clamp(2.4rem, 3.8vw, 3.8rem)/1 var(--font-display); letter-spacing: -.05em; }
.kit-ledger { list-style: none; margin: 0; padding: 0; max-width: 460px; }
.kit-ledger li { display: flex; justify-content: space-between; gap: 24px; padding: 13px 0; border-top: 1px solid var(--border-default); }
.kit-ledger li:last-child { border-bottom: 1px solid var(--border-default); }
.kit-ledger span:first-child { color: var(--text-secondary); font-size: .98rem; }
.kit-ledger span:last-child { color: var(--accent-primary); font: 600 .95rem var(--font-mono); letter-spacing: .02em; }
.kit-media { width: min(100%, 600px); margin: 0 0 0 auto; }

/* --- How it goes: four steps ------------------------------------------- */

.press-routine { padding: 104px 0 96px; background: var(--page-bg-alt); }
.routine-head { margin-bottom: 44px; }
.routine-head h2 { margin: 0; color: var(--text-primary); font: 400 clamp(2.4rem, 3.8vw, 3.8rem)/1 var(--font-display); letter-spacing: -.05em; }
.routine-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 0; margin: 0; padding: 0; }
.routine-steps li { position: relative; padding: 0 26px 0 0; }
.routine-steps li + li { padding-left: 26px; border-left: 1px solid var(--border-default); }
.routine-steps .step-no { display: block; margin-bottom: 12px; color: var(--accent-primary); font: 400 1.5rem/1 var(--font-mono); letter-spacing: .06em; }
.routine-steps h3 { margin: 0 0 10px; color: var(--text-primary); font: 400 1.3rem/1.15 var(--font-display); letter-spacing: -.02em; }
.routine-steps p { margin: 0; color: var(--text-secondary); font-size: .93rem; line-height: 1.6; }
.routine-times { max-width: 720px; margin: 40px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border-default); color: var(--accent-primary); font: 600 .82rem var(--font-mono); letter-spacing: .02em; }

/* --- What comes out ----------------------------------------------------- */

.press-outcome { position: relative; padding: 104px 0; background: var(--page-bg); overflow: hidden; }
.press-outcome::before { position: absolute; z-index: 0; inset: -20% -30% 60% auto; width: 70vw; height: 90%; background: var(--warm-glow); content: ""; pointer-events: none; }
.outcome-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px 7vw; align-items: center; }
.outcome-media { width: min(100%, 620px); margin: 0; }
.outcome-copy h2 { max-width: 440px; margin-bottom: 22px; color: var(--accent-primary); font: 500 clamp(2.3rem, 3.7vw, 3.7rem)/1.03 var(--font-display); letter-spacing: -.04em; }
.outcome-copy > p:not(.press-label) { max-width: 440px; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; }

/* --- Specifications: a hairline ledger --------------------------------- */

.press-specs { padding: 96px 0 104px; }
.press-specs > .press-label { margin-bottom: 26px; }
.specs-copy h2 { max-width: 560px; margin-bottom: 24px; color: var(--text-primary); font: 400 clamp(2.3rem, 3.6vw, 3.6rem)/1 var(--font-display); letter-spacing: -.05em; }
.specs-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 36px 0 0; }
.specs-ledger div { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 18px; padding: 13px 0; border-top: 1px solid var(--border-default); }
.specs-ledger dt { color: var(--text-muted); font: 600 .68rem/1.7 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.specs-ledger dd { margin: 0; color: var(--text-primary); font-size: .95rem; line-height: 1.6; }

/* --- FAQ ---------------------------------------------------------------- */

.press-faq { padding: 96px 0 104px; background: var(--page-bg-alt); }
.faq-layout { display: grid; grid-template-columns: minmax(160px, .3fr) minmax(0, 1.7fr); gap: 0 6vw; }
.faq-layout > .press-label { margin: 10px 0 0; }
.faq-copy h2 { max-width: 560px; margin-bottom: 24px; color: var(--text-primary); font: 400 clamp(2.3rem, 3.6vw, 3.6rem)/1 var(--font-display); letter-spacing: -.05em; }
.faq-list { margin-top: 36px; }
.faq-list details { border-top: 1px solid var(--border-subtle); }
.faq-list details:last-child { border-bottom: 1px solid var(--border-subtle); }
.faq-list summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 19px 0; cursor: pointer; list-style: none; color: var(--text-primary); font: 600 1.02rem/1.45 var(--font-body); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; color: var(--accent-primary); font: 400 1.3rem/1 var(--font-body); transition: transform .2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--accent-primary); }
.faq-list details p { max-width: 640px; margin: 0 0 22px; color: var(--text-secondary); font-size: .96rem; line-height: 1.65; }

/* --- Buy: the close ----------------------------------------------------- */

.press-buy { position: relative; padding: 0 0 120px; background: var(--page-bg); overflow: hidden; }
.press-buy::after { position: absolute; z-index: 0; inset: auto -30% -45% auto; width: 70vw; height: 85%; background: var(--warm-glow); content: ""; pointer-events: none; }
.buy-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 48px 8vw; align-items: center; padding-top: 96px; }
.buy-layout h2 { max-width: 560px; margin-bottom: 18px; color: var(--text-primary); font: 400 clamp(2.4rem, 3.8vw, 3.8rem)/1 var(--font-display); letter-spacing: -.05em; }
.buy-layout > div > p:not(.press-label) { max-width: 460px; margin: 0; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; }
.buy-action { justify-self: end; text-align: right; }
.buy-note { margin: 14px 0 0; color: var(--text-muted); font-size: .8rem; line-height: 1.6; }

/* The site shell, re-tinted to the wood ground so the shared header and
   footer sit on the same colour as the page (styles.css defaults are the
   cooler blue-charcoal used by the light-surface pages). */
.press-v1 .site-header { border-bottom-color: var(--border-subtle); background: var(--shell-bg); }
.press-v1 .brand { color: var(--text-primary); }
.press-v1 .brand small { color: var(--text-muted); }
.press-v1 .nav-link, .press-v1 .nav-button { color: var(--text-secondary); }
.press-v1 .nav-link:hover, .press-v1 .nav-button:hover, .press-v1 .nav-button[aria-expanded="true"] { color: var(--text-primary); background: var(--accent-soft); }
.press-v1 .site-footer { border-top-color: var(--border-subtle); color: var(--text-muted); background: var(--page-bg); }

/* --- Wide ---------------------------------------------------------------- */

@media (max-width: 1020px) {
  .press-shell { width: min(calc(100% - 48px), var(--container-wide)); }
  .hero-layout { min-height: 560px; gap: 32px; }
  .press-hero { padding-bottom: 72px; }
  .what-layout, .garden-layout, .kit-layout, .outcome-layout, .design-head { gap: 48px 40px; }
  .press-point { gap: 40px 5vw; }
  .routine-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 0; }
  .buy-layout { gap: 40px 5vw; }
}

/* --- Tablet -------------------------------------------------------------- */

@media (max-width: 900px) {
  .what-layout, .garden-layout, .kit-layout, .outcome-layout, .design-head, .buy-layout { grid-template-columns: 1fr; }
  .specs-ledger { grid-template-columns: 1fr; }
  .what-media, .garden-media, .kit-media, .design-head-media, .outcome-media { margin-inline: 0; max-width: 560px; }
  .buy-action { justify-self: start; text-align: left; }
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 760px) {
  .press-shell { width: min(calc(100% - 36px), var(--container-wide)); }
  .press-hero { padding: 36px 0 56px; }
  .press-hero::before { inset: -30% -55% auto auto; width: 150vw; height: 78%; }
  .hero-layout { grid-template-columns: 1fr; gap: 32px; min-height: 0; }
  .hero-copy { padding: 0; }
  .hero-copy h1 { font-size: clamp(2.9rem, 13.5vw, 4.2rem); }
  .hero-media { width: 100%; max-width: 480px; margin: 0; }
  .hero-actions .press-button { flex: 1 1 auto; }

  .press-film, .press-what, .press-usual, .press-design, .press-garden, .press-kit, .press-routine, .press-outcome, .press-specs, .press-faq { padding: 56px 0 64px; }
  .press-section-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .design-head { padding: 56px 0 40px; }
  .press-point { grid-template-columns: 1fr; gap: 26px; padding: 40px 0; }
  .press-point:nth-of-type(even) .point-copy { order: 0; }
  .point-copy p { max-width: none; }
  .routine-steps { grid-template-columns: 1fr; gap: 0; }
  .routine-steps li, .routine-steps li + li { padding: 22px 0; border-left: 0; border-top: 1px solid var(--border-default); }
  .routine-steps li:first-child { border-top: 0; }
  .faq-layout { grid-template-columns: 1fr; gap: 22px; }
  .faq-layout > .press-label { margin: 0; }
  .buy-layout { padding-top: 64px; }
  .press-buy { padding-bottom: 72px; }
  .slot-frame--wide { aspect-ratio: 4 / 3; }
}

@media (max-width: 420px) {
  .hero-strip { letter-spacing: .04em; }
  .press-button { width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* Delivered media (2026-10-26) */
.press-v1 figure img { width: 100%; height: auto; }

/* Steps: caption row on top, photo row below (Simon review 2026-10-26; photos pending re-delivery) */
.routine-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 36px 0 0; }
.routine-gallery figure { margin: 0; padding: 0 13px; }
.routine-gallery figure + figure { border-left: 1px solid var(--border-default); }
.routine-gallery img { display: block; width: 100%; height: auto; }
@media (max-width: 768px) {
  .routine-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .routine-gallery figure + figure { border-left: 0; }
}
@media (max-width: 480px) {
  .routine-gallery { grid-template-columns: 1fr; }
  .routine-gallery figure + figure { margin-top: 24px; }
}