/* ============================================================
   The Queen — /method
   Page-specific rules only. Everything structural (.section,
   .container, .head, .eyebrow, .display, .frame, .plate,
   .plate-pair, .btn) comes from base.css + queen.css and is
   REUSED, not re-declared. No new colours, sizes or spacing
   values: every number below resolves to a token.
   ============================================================ */

/* ---------- hero ---------- */
/* Shares --fs-hero with index.html's opening thesis and closing question.
   Three headlines across the site at one size, deliberately. */
.method-hero { padding-block: var(--s-8) var(--s-6); }
.method-hero__headline { font-size: var(--fs-hero); margin-bottom: var(--s-4); text-wrap: balance; }
.method-hero__lede {
  font-size: var(--fs-2); color: var(--gray);
  max-width: 46ch; margin-inline: auto; line-height: 1.6;
}

/* ---------- editorial prose column ---------- */
/* 62ch keeps the measure inside the ~66ch readability limit. This page is
   long-form argument rather than marketing blocks, so it gets a real
   reading column instead of the wide grid the homepage uses. */
.prose { max-width: 62ch; margin-inline: auto; }
.prose + .prose { margin-top: var(--s-4); }
.prose p { font-size: var(--fs-1); line-height: 1.7; margin-bottom: var(--s-3); }
.prose p:last-child { margin-bottom: 0; }
.prose__lede { font-size: var(--fs-2) !important; line-height: 1.6 !important; }
/* The one sentence the whole page is built to deliver. Given the accent and
   a rule rather than a larger size — it should land as emphasis, not as a
   second heading competing with the h2 above it. */
.prose__close {
  color: var(--purple-ink);
  border-left: 2px solid var(--purple);
  padding-left: var(--s-3);
  margin-top: var(--s-4);
}

/* ---------- origin: single plate beside text ---------- */
.origin__split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-6); align-items: center;
  margin-block: var(--s-6);
}
.origin__split-text p { font-size: var(--fs-1); line-height: 1.7; max-width: 54ch; }

/* ---------- origin: the three-position triptych ---------- */
.origin__triptych {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4); margin-block: var(--s-6);
}
/* Uniform crop across all three so the comparison reads as a sequence of the
   same subject rather than three unrelated pictures (checklist 05). */
.origin__triptych .frame { aspect-ratio: 3 / 4; }
.origin__triptych .frame img { width: 100%; height: 100%; object-fit: cover; }
.origin__split .frame { aspect-ratio: 3 / 4; }
.origin__split .frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the five thrones wheel ---------- */
.thrones { background: var(--bg); }
.wheel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6); align-items: center; margin-top: var(--s-6);
}
.wheel__dial { max-width: 480px; margin-inline: auto; width: 100%; }
.wheel__svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Two-tone by contrast maths, not taste. Active is --purple #0b6e45 under
   white (6.30:1, AA at any size); inactive is the --violet-bg tint under
   --ink (well past 4.5:1). White on --teal #2f9e78 computes to ~2.9:1, which
   is why the lighter brand green is nowhere in this component. */
.throne-seg { cursor: pointer; }
.throne-seg__path {
  fill: var(--violet-bg); stroke: var(--paper); stroke-width: 2;
  transition: fill var(--dur) var(--ease);
}
.throne-seg__label {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  fill: var(--ink); text-anchor: middle; dominant-baseline: middle;
  pointer-events: none; transition: fill var(--dur) var(--ease);
}
.throne-seg:hover .throne-seg__path { fill: var(--sky-bg); }
.throne-seg[aria-selected="true"] .throne-seg__path { fill: var(--purple); }
.throne-seg[aria-selected="true"] .throne-seg__label { fill: #fff; }

/* SVG elements don't take `outline` reliably (Safari draws nothing), so the
   focus ring is a real stroke that traces the segment's own shape. Removing
   the default outline is safe ONLY because this replaces it. */
.throne-seg:focus { outline: none; }
.throne-seg:focus-visible .throne-seg__path { stroke: var(--ink); stroke-width: 4; }

.wheel__hub { fill: var(--paper); stroke: rgba(12,53,42,.3); stroke-width: 1.5; }
.wheel__hub-label {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  letter-spacing: .14em; fill: var(--purple-ink);
  text-anchor: middle; dominant-baseline: middle;
}

/* Panels are visible by default and hidden only once method.js has run —
   see the .js-wheel note there. Visibility+position rather than display:none
   keeps the panel column from resizing as you move between thrones. */
.throne-panel { max-width: 54ch; }
.js-wheel .wheel__panels { display: grid; }
.js-wheel .throne-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity var(--dur) var(--ease); }
.js-wheel .throne-panel.is-active { visibility: visible; opacity: 1; }
/* Without JS the five panels stack, so they need rules between them. */
.throne-panel + .throne-panel { margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--line-thin); }
.js-wheel .throne-panel + .throne-panel { margin-top: 0; padding-top: 0; border-top: none; }

.throne-panel:focus-visible { outline: 2px solid var(--purple); outline-offset: var(--s-2); }
.throne-panel__name { font-family: var(--display); font-size: var(--fs-5); margin-bottom: var(--s-2); }
.throne-panel__def { font-size: var(--fs-1); line-height: 1.7; color: var(--ink); }
.throne-panel__stall { font-size: var(--fs-1); line-height: 1.7; color: var(--gray); margin-top: var(--s-3); }
.throne-panel__stall strong { color: var(--ink); font-weight: 700; }
.throne-panel__quote {
  margin-top: var(--s-3); padding-left: var(--s-3);
  border-left: 2px solid var(--purple);
  font-family: var(--serif); font-style: italic; font-size: var(--fs-2);
  line-height: 1.5; color: var(--purple-ink);
}
/* The four-wars line is the one sentence on this page that has to survive
   being skim-read, so it gets a filled block rather than a rule. */
.throne-panel__callout {
  margin-top: var(--s-3); background: var(--violet-bg); color: var(--violet-ink);
  border-radius: var(--r); padding: var(--s-3);
  font-size: var(--fs-1); line-height: 1.6;
}

/* ---------- from map to plan ---------- */
/* Reuses .path__step wholesale; only the third (tag) column is dropped,
   because the spec supplies no tag copy and inventing three labels to fill
   an empty slot is worse than removing the slot. */
.plan .path__step { grid-template-columns: 90px minmax(0, 1fr); }
.plan .path__step-num { font-family: var(--display); font-style: italic; font-size: var(--fs-4); -webkit-text-stroke: 0; color: var(--purple); }

/* ---------- closing cards ---------- */
.method-close { background: var(--violet-bg); }
.method-close__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.method-card {
  display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--paper); border: 1.5px solid rgba(12,53,42,.10);
  border-radius: var(--r); padding: var(--s-4);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.method-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(12,53,42,.14); }
.method-card h3 { font-family: var(--display); font-size: var(--fs-3); }
.method-card p { color: var(--gray); font-size: var(--fs-1); line-height: 1.6; flex: 1; }
.method-card__go { font-size: var(--fs-0); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--purple-ink); }
.method-card--accent { border-color: var(--purple); }

@media (max-width: 1000px) {
  /* The dial stops earning half the width before it stops being legible, so
     it goes full-width above the panels rather than shrinking beside them. */
  .wheel { grid-template-columns: 1fr; gap: var(--s-5); }
  .wheel__dial { max-width: 400px; }
  .throne-panel { max-width: none; margin-inline: auto; }
}
@media (max-width: 820px) {
  .method-close__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* The dial scales to ~0.8 here, so a 19px SVG label lands at ~15px on
     screen — under the floor for Cormorant, whose low x-height punishes small
     sizes. Sized UP rather than hidden: five unlabelled wedges would make the
     reader guess which throne they're about to open. 22 units keeps the
     longest word ("Magician") comfortably inside its own segment. */
  .throne-seg__label { font-size: 22px; }
  .wheel__hub-label { font-size: 19px; }
  .plan .path__step { grid-template-columns: 1fr; gap: var(--s-1); }
}

@media (max-width: 900px) {
  .origin__split { grid-template-columns: 1fr; gap: var(--s-4); }
  /* Text first on mobile: the plate is evidence for the sentence, so the
     sentence should arrive first on a small screen. */
  .origin__split .plate-pair { order: 2; }
  .origin__split-text { order: 1; }
  .origin__triptych { grid-template-columns: 1fr; gap: var(--s-5); }
}