/* Our Cup of Tea — landing page.

   docs/brand-guidelines.md §2 is the source of truth for every color. No hex
   appears below outside :root, and a test enforces that: the reason the
   stylesheet this one replaces still carried a retired teal is that colors
   were written inline where no test could see them. */

:root {
  --canvas: #e4e2dc;
  --paper: #f4f2ec;
  --ink: #25211f;
  --body-copy: #44403b;
  --muted: #6f6962;
  --rule: #c9c6be;
  --spot: #750116;
  --cta: #750116;
  --cta-hover: #580110;
  --gold: #ac7a1b;

  /* Brand guidelines §3. Georgia and Arial are not fallbacks in the usual
     sense — email strips the <link> for most readers, so the site and the
     newsletter only look like one publication if the design holds here
     first. Every measurement below was chosen against these, not the
     webfonts. No font-variant: small-caps anywhere; §3 rules it out for
     rendering inconsistently across email clients, and the section labels
     have to work in both places. */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", Arial, Helvetica, sans-serif;

  --column: 34rem; /* ~66 characters at the body size, measured in Georgia */
  --card-pad: clamp(1.75rem, 5vw, 3.5rem);

  /* Vertical padding is larger than horizontal, and deliberately so: the
     frame's corners and clasps live in the top and bottom margins, and at the
     narrow breakpoint a corner reaches 76px into the card. Content that starts
     at --card-pad would run straight through it — the masthead mark collided
     with the top clasp, and the footer links with the bottom-left corner,
     until this was measured on a real render 2026-09-05. */
  --card-pad-y: clamp(5.5rem, 10vw, 6.5rem);
  --frame-inset: 0.75rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: var(--canvas);
  color: var(--body-copy);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* The card. Every block sits inside it, footer included — brand guidelines
   rule 1 makes --muted a paper-only color (4.19 on --canvas, which fails AA),
   so moving the footer outside the card breaks it. If that is ever wanted,
   darken the text or keep it on paper. */
.card {
  position: relative;
  max-width: calc(var(--column) + 2 * var(--card-pad));
  margin: 0 auto;
  padding: var(--card-pad-y) var(--card-pad);
  background: var(--paper);
}

/* The cloud-scroll frame, composed rather than scaled (spec §7.2).

   Four corners from one drawn asset, mirrored at build time; two clasps from
   one, flipped; the straight runs drawn as a border. Never a stretched
   square: a non-uniform scale pulls each corner spiral into an oval about
   three times its drawn height, and thins the side hairlines while thickening
   the top and bottom, so the frame stops being one weight and starts reading
   as a rendering error rather than as ornament.

   It is ornament and nothing else. Gold measures 3.38 on paper, below the 3:1
   non-text floor, which brand guidelines rule 3 permits only because a frame
   carries no meaning. It must never become a boundary a reader is expected to
   interpret, and never the only indicator of a grouping — the hairline rules
   between blocks do that work. */
.card::before,
.card::after {
  content: "";
  position: absolute;
  inset: var(--frame-inset);
  pointer-events: none;
}

.card::before {
  border: 1px solid var(--gold);
  opacity: 0.55;
}

.card::after {
  background-image:
    url("assets/frame-corner-tl.png"),
    url("assets/frame-corner-tr.png"),
    url("assets/frame-corner-bl.png"),
    url("assets/frame-corner-br.png"),
    url("assets/frame-clasp-top.png"),
    url("assets/frame-clasp-bottom.png");
  background-repeat: no-repeat;
  background-position:
    left top,
    right top,
    left bottom,
    right bottom,
    center top,
    center bottom;
  /* Percentage widths with `auto` height: the parts scale with the card's
     WIDTH only and keep their drawn aspect, which is §7.2's whole point. A
     height-linked size would distort them on a long page. */
  /* 12% and 16% put both parts at or below their drawn pixel size on the
     widest card (a 632px inner box gives a 76px corner from 195px of artwork
     and a 101px clasp from 102px). Downscaling a gold hairline keeps it;
     upscaling one is the first thing lost to a rescale — §7.3. */
  background-size:
    12% auto, 12% auto, 12% auto, 12% auto,
    16% auto, 16% auto;
}

/* Hairline separators are the only thing between blocks (spec §3). */
.block {
  border-top: 1px solid var(--rule);
  margin-top: 2rem;
  padding-top: 2rem;
}

/* Section labels — brand guidelines §3, reproduced on this page more than
   anywhere else. */
.section-label {
  margin: 0 0 0.75rem;
  color: var(--spot);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 1. Masthead */
.masthead {
  text-align: center;
}

.masthead img {
  width: 4.5rem;
  height: 4.5rem;
}

.wordmark__name {
  margin: 0.5rem 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.descriptor {
  margin: 0.35rem 0 0;
  color: var(--spot);
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-style: italic;
}

/* 2. The pitch */
.pitch__positioning {
  margin: 0 0 0.75rem;
  color: var(--ink);
  font-size: 1.1875rem;
}

.pitch__hook {
  margin: 0;
}

/* 3. Subscribe. The only element on the page styled as a button lives inside
   the beehiiv iframe, so there is nothing to style here but the note. The
   min-height reserves the embed's box so the page does not jump as it
   loads. */
.signup {
  margin: 0 0 0.5rem;
  /* The embed's rendered height, measured 2026-09-07 against the real form
     served from beehiiv: 44px at every column from 544px down to 220px. It is
     one number rather than two because the SUBSCRIBE label is a single
     unbreakable word, so the button never wraps and the form never grows to
     two lines. There is deliberately no override in the narrow breakpoint
     below; if a future label wraps on a phone, that is where the second
     number goes. Re-measure after any change to the form in the beehiiv
     dashboard — the recipe is in
     docs/superpowers/plans/2026-09-07-landing-page-cutover-seo.md Task 5, and
     the thresholds are in docs/platform/landing-page-cutover.md section 1.1. */
  min-height: 44px;
}

.signup__note {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* 4. The rail (spec §3 block 4) — reserved. The block is not in the markup
   until all five photographs exist; these rules are here so that adding it is
   markup only. It never auto-advances: a self-animating carousel is a WCAG
   2.2.2 moving-content problem. */
.rail__scroller {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.rail figure {
  flex: 0 0 auto;
  width: 9rem;
  margin: 0;
}

.rail img {
  display: block;
  width: 100%;
  height: auto;
}

.rail figcaption {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.rail__credit {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* 5. In the newsletter */
.sections {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sections li {
  margin: 0 0 0.6rem;
}

.sections li:last-child {
  margin-bottom: 0;
}

.sections b {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
}

/* 6. The issue block */
.issue p {
  margin: 0 0 0.4rem;
}

.issue p:last-child {
  margin-bottom: 0;
}

.issue__headline {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

/* State 2 only, and hand-edited on publication day — see
   docs/platform/landing-page-cutover.md. It had no rule until 2026-09-04,
   which would have shipped the dek as unstyled body text the morning after
   the first send. */
.issue__dek {
  color: var(--body-copy);
}

/* 7. Noticed */
.noticed__body {
  margin: 0 0 0.6rem;
}

.noticed__signature {
  margin: 0;
  color: var(--muted);
  font-style: italic;
}

/* 8. Instagram, then the tip line */
.channels p {
  margin: 0 0 0.6rem;
}

.channels p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--cta);
}

a:hover,
a:focus {
  color: var(--cta-hover);
}

.text-link {
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* 9. Footer — inside the card, deliberately. See the .card comment. */
.site-footer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer p {
  margin: 0 0 0.4rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  top: 1rem;
  left: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--paper);
  color: var(--cta);
}

/* On a narrow card the ornament needs a larger share of the width, or the
   corners shrink to specks and the clasps disappear entirely. */
@media (max-width: 30rem) {
  .card::after {
    background-size:
      18% auto, 18% auto, 18% auto, 18% auto,
      26% auto, 26% auto;
  }
}