/* =====================================================================
   READ THE GARDEN — Landing Page v1
   A′ Quiet Editorial / Field Journal — 構造レイヤ
   ---------------------------------------------------------------------
   値は brand-system.css（トークン正本）にのみ存在する。
   このファイルに生の色・生のフォント名・生の余白値を書かない。
   仕様: ops/brand/BRAND-SYSTEM-A-PRIME.md
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  font-weight: 400;
}

/* ---- layout ---------------------------------------------------------
   Large whitespace。セクション間は --gap-section。詰めない。 */
.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
main > * + section { margin-top: var(--gap-section); }
.hero { padding-top: var(--space-2xl); }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--space-s); top: var(--space-s); z-index: 10;
  background: var(--ground); color: var(--ink);
  font-family: var(--font-label); font-size: var(--type-cta);
  letter-spacing: var(--ls-cta); text-transform: uppercase;
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--moss); text-decoration: none;
}

/* ---- Observation Label ----------------------------------------------
   A′ の署名的装置。Courier Prime が構造を担う唯一の場所。
   Hero の Place ラベルは省略不可（Editorial Guardrail の執行装置）。 */
.obs {
  font-family: var(--font-label);
  font-size: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-quiet);
  display: flex; align-items: center; gap: var(--space-s);
  margin: 0 0 var(--space-l);
}
/* M1: at 375px the trailing rule collapsed to ~7px, which reads as a defect
   rather than a rule. Below 30rem the label wraps and the rule is dropped
   entirely — absent is cleaner than vestigial. */
.obs::after {
  content: ""; flex: 1 1 3rem; min-width: 2.5rem;
  height: 1px; background: var(--hairline);
}
/* An earlier fix deleted the trailing rule on every phone to stop ONE
   33-character label collapsing it to 7px. That traded the A′ signature on 11
   labels to fix 1. The label text is an anonymous flex item and shrinks, so a
   long label simply wraps to two lines and `min-width: 2.5rem` keeps the rule
   visible beside the last line. No breakpoint needed. */

/* ---- type ------------------------------------------------------------ */
h1 {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-size: var(--type-display); font-weight: 400;
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
  margin: 0 0 var(--space-l); text-wrap: balance;
}
h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2); font-weight: 400;
  line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  margin: 0 0 var(--space-m); text-wrap: balance;
}
h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3); font-weight: 400;
  line-height: 1.3; margin: 0 0 var(--space-s);
}
p { margin: 0 0 var(--space-m); }
p:last-child { margin-bottom: 0; }
.lede { font-size: var(--type-lede); line-height: var(--lh-lede); }
em { font-style: italic; }

a { color: var(--moss); text-underline-offset: 0.18em; }
a:focus-visible { outline: 1px solid var(--moss); outline-offset: 6px; }

ul, ol { margin: 0 0 var(--space-m); padding-left: 0; list-style: none; }
li { position: relative; padding-left: var(--space-m); margin-bottom: var(--space-s); }
li::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 0.55rem; height: 1px; background: var(--moss);
}
ol { counter-reset: n; }
ol li { counter-increment: n; }
ol li::before {
  content: counter(n, decimal-leading-zero);
  top: 0; width: auto; height: auto; background: none;
  font-family: var(--font-label); font-size: var(--type-label);
  color: var(--ink-quiet); letter-spacing: 0.08em;
}

.rule { border: 0; border-top: var(--rule); margin-block: var(--space-xl); }
/* .quiet mutes a short passage. It is deliberately NOT applied to headings:
   an h2 in --ink-quiet reads as disabled, and BRAND-SYSTEM §2 scopes
   --ink-quiet to labels, notes and metadata. (M3) */
.quiet { color: var(--ink-quiet); }
.quiet h1, .quiet h2, .quiet h3 { color: var(--ink); }

/* ---- Quiet CTA -------------------------------------------------------
   塗りボタンを使わない。これは装飾ではなくブランド定義。 */
.cta { margin-top: var(--space-l); }
.cta a, a.btn {
  display: inline-block; position: relative;
  font-family: var(--font-label); font-size: var(--type-cta);
  letter-spacing: var(--ls-cta); text-transform: uppercase;
  color: var(--moss); text-decoration: none;
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--moss);
  transition: color var(--ease), border-color var(--ease);
}
/* The Quiet CTA is a text link by brand definition (§5), so its visible height
   is ~26px — below a usable touch target. Extend the hit area with a pseudo
   element instead of padding, so the target grows to ~46px without moving the
   hairline or opening up the layout. */
.cta a::after, a.btn::after {
  content: ""; position: absolute; inset: -0.65rem -0.75rem;
}
.cta a:hover, a.btn:hover { color: var(--ink); border-color: var(--ink); }
.cta a:focus-visible, a.btn:focus-visible {
  outline: 1px solid var(--moss); outline-offset: 6px;
}

/* ---- Photography plate ----------------------------------------------
   写真は必ずこのコンポーネントで扱う（BRAND-SYSTEM §7.3）。
   data-rights = placeholder | licensed | permission | cc-attribution
   既定は placeholder。placeholder は本番で描画されない
   （ページはタイポグラフィだけで成立する設計）。
   内部レビュー時は <body data-show-plates> で枠を可視化する。
   画像を入れるときは（**5段すべて。4を飛ばすとクレジット無しで公開される**）:
     1. Founder の RED 承認（image licensing / rights commitment）
     2. content/_media/IMAGE-RIGHTS-REGISTER.md に1行登録
     3. data-rights を実ステータスへ変更し、<img> を figure の先頭に差し込む
     4. **figcaption の `hidden` を外し、§7.2 が要求するクレジットを書く**
     5. tools/check-image-rights.sh を実行して PASS を確認
        （4を飛ばすと同スクリプトが FAIL する）

   ⚠ 既知の制限: plate は現在 .wrap の内側にあるため、--measure-wide (44rem) に
   到達できない（本文カラム幅が上限）。placeholder は何も描画しないため実害は無い。
   実画像を入れる判断（RED）と同時に、本文幅を超える版を設計すること。 */
.plate {
  margin: var(--space-xl) auto;
  max-width: var(--measure-wide);
}
.plate img {
  display: block; width: 100%; height: auto;
  background: var(--ground-deep);
}
.plate__note {
  font-family: var(--font-label); font-size: var(--type-label);
  line-height: 1.6; letter-spacing: 0.03em;
  color: var(--ink-quiet); margin-top: var(--space-xs);
}
.plate__note a { color: inherit; }

/* placeholder: 本番では出さない */
.plate[data-rights="placeholder"] { display: none; }

/* 内部レビュー用の可視化 */
[data-show-plates] .plate[data-rights="placeholder"] { display: block; }
[data-show-plates] .plate[data-rights="placeholder"]::before {
  content: attr(data-slot-note);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  aspect-ratio: 3 / 2;
  padding: var(--space-l);
  background: var(--ground-deep);
  border: 1px solid var(--hairline);
  font-family: var(--font-label); font-size: var(--type-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- sign-up: アウトラインのみ。塗り面を作らない ------------------- */
/* H3 fix, 2026-08-29 (Y-049): the band previously had zero --gap-section
   above it, because `main > * + section` could not reach a body-level sibling.
   It is inside <main> now, so the gap rule applies — but the band also carries
   its own generous padding, so its top margin is reduced to avoid a dead
   ~196px. §4 sets a floor for section gaps, not a target for stacked space. */
.signup {
  padding-block: var(--gap-section);
  border-block: var(--rule);
  background: var(--ground-deep);
}
main > * + .signup { margin-top: var(--space-2xl); }
/* ...and mirror it below, so the two hairlines of the band form an even
   bracket. Without this the section after the band inherits --gap-section and
   sits 17.75px lower than the gap above, which reads as a drift rather than a
   pause. */
main > .signup + section { margin-top: var(--space-2xl); }
.signup form {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
label {
  display: block;
  font-family: var(--font-label); font-size: var(--type-label);
  letter-spacing: var(--ls-cta); text-transform: uppercase;
  color: var(--ink-quiet);
}
.field { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }
input[type="email"] {
  flex: 1 1 15rem;
  font: inherit; font-size: 1rem;   /* 16px — below this iOS zooms on focus */
  padding: var(--space-s) 0;        /* ~48px tall target */
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--ink-quiet);
  border-radius: 0;
}
input[type="email"]::placeholder { color: var(--ink-faint); }
/* H1 fix, 2026-08-29 (Y-050): this was `outline: 0` plus a border-colour
   change measuring 1.23:1 — effectively an invisible focus ring on the one
   field the North Star depends on. WCAG 2.2 SC 1.4.11 wants 3:1. The outline
   below is --moss on --ground-deep at 6.18:1. Do not remove it for looks. */
input[type="email"]:focus-visible {
  outline: 1px solid var(--moss);
  outline-offset: 6px;   /* §5 specifies 6px; 4px was an inconsistency */
  border-bottom-color: var(--moss);
}

button {
  font-family: var(--font-label); font-size: var(--type-cta);
  letter-spacing: var(--ls-cta); text-transform: uppercase;
  color: var(--moss); background: transparent;
  border: 1px solid var(--moss); border-radius: 0;
  padding: var(--space-s) var(--space-m);   /* ~46px tall target */
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}
button:hover { color: var(--ink); border-color: var(--ink); }
button:focus-visible { outline: 1px solid var(--moss); outline-offset: 6px; }
button[disabled] { color: var(--ink-faint); border-color: var(--ink-faint); cursor: default; }

.note, .fine {
  font-family: var(--font-label); font-size: var(--type-label);
  line-height: 1.8; letter-spacing: 0.03em;
  color: var(--ink-quiet); margin-top: var(--space-m);
}
.fine a { color: inherit; }

footer {
  margin-top: var(--gap-section);
  padding-block: var(--space-xl) var(--space-2xl);
  border-top: var(--rule);
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- long-form document pages (/privacy) -----------------------------
   Same A′ system, only additions: tables, blockquote, inline code.
   No new colours, no new type — everything below reuses existing tokens. */
table {
  width: 100%; border-collapse: collapse;
  margin: 0 0 var(--space-m);
  font-size: var(--type-table);
}
th, td {
  text-align: left; vertical-align: top;
  padding: var(--space-xs) var(--space-s) var(--space-xs) 0;
  border-bottom: var(--rule);
  /* `overflow-wrap: anywhere` was tried here and REGRESSED: unlike break-word
     it drops min-content width to a single character, so the 3-column table
     stopped overflowing only because it began shredding "Cloudflare Web
     Analytics" into 4-character fragments. break-word breaks a long token only
     when it genuinely cannot fit, which is what was wanted. */
  overflow-wrap: break-word;
}

/* The 2-column field table fits at 375px (min-content ~268px of 327px). Only
   the 3-column recipients table is too wide, so let that one scroll inside its
   own box rather than compressing every column to unreadability. */
@media (max-width: 30rem) {
  .table-scroll { display: block; overflow-x: auto; }
}
th {
  font-family: var(--font-label); font-size: var(--type-label); font-weight: 400;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-quiet);
}
blockquote {
  margin: 0 0 var(--space-m);
  padding-left: var(--space-m);
  border-left: 1px solid var(--moss);
  color: var(--ink-quiet);
}
code {
  font-family: var(--font-label);
  font-size: var(--type-code);
  color: var(--ink-quiet);
  overflow-wrap: break-word;   /* not `anywhere` — see the table note above */
}