/* lynnie.css - Lynnie Marie, published cover model's tear-sheet book.
   Hand-written for this creator only. No framework, no external origin.

   COLOR JOB CONTRACTS (one color, one job):
   --paper #f7f1e8  ground: warm printed paper. Provenance: cream lace, Playboy
                    Sweden cover (site-A5A3984F), lightened to page ground.
   --ink   #2a2118  body text, icon ink, and the conversion card keyline.
                    14.07:1 on paper. Provenance: deep tones of her B&W denim
                    portrait (site-IMG_8549).
   --coral #93361a  identity only: her signature and folio labels. 6.72:1.
                    Provenance: vivid #ec795c measured from coral lingerie,
                    Playboy South Africa cover (site-139B6627), deepened.
   --coral-large #a03a1a  the signature at display sizes only. 6.00:1 (large text).
   --gold  #97522e  hairline rules, folio marks, and rail chip keylines only
                    (non-text; 5.25:1 on paper). Provenance: gold LYNNIE MARIE
                    nameplate, Playboy Sweden cover.
   --insert-paper #fdf9f2  a warmer white, one job: the podcast lockup card
                    stock. Lifts the pale wordmark off the page ground so it
                    reads as a printed ad insert, not a watermark.
   --gold-deep #6e4720  small tracked credit text + focus rings. 7.23:1.
                    The focus ring is never the conversion color.
   --pool  #8ecdea  CONVERSION ONLY: the printed-insert fill behind the two
                    JOIN FOR FREE blocks and the confirmation submit. Appears
                    on no other element. Ink text on pool: 9.08:1. Provenance:
                    pool water behind her in site-IMG_7368, measured #70c6e7
                    and lightened for fill use.
   --pool-hover #7cc3e6  the same insert under a pointer. Ink text: 8.13:1.
   --pool-press #6ab9e2  the same insert while physically pressed. Ink: 7.26:1.
*/

/* reset (scaffold-equivalent, non-visual) */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, p, figure, form { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

@font-face {
  /* Great Vibes, SIL OFL 1.1 - the same face her current site sets her name in.
     Self-hosted latin subset; no external origin. */
  font-family: "Lynnie Script";
  src: url("/assets/lynnie-script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f7f1e8;
  --ink: #2a2118;
  --coral: #93361a;
  --coral-large: #a03a1a;
  --gold: #97522e;
  --gold-deep: #6e4720;
  --insert-paper: #fdf9f2;
  --pool: #8ecdea;
  --pool-hover: #7cc3e6;
  --pool-press: #6ab9e2;
  --serif: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --script: "Lynnie Script", "Snell Roundhand", "Brush Script MT", cursive;
}

html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The page is a flex column so MOBILE can pull her portrait pair up under the
   hero (her face belongs in the first paint) while the DOM keeps the desktop
   reading order. Interactive tab order is unaffected: the pair holds no
   focusable elements, so chips -> strip -> covers stays visually coherent. */
.page {
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}
.portrait-pair { order: 2; }
.podcast-strip { order: 3; }
.published { order: 4; }
.closer { order: 5; }
.page-footer { order: 6; }

/* focus: always visible, never the conversion color */
a:focus-visible, button:focus-visible,
input:focus-visible, label:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
}
/* the covers are printed sheets, so their ring stands a hair further off */
.cover-link:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }

/* Named for screen readers only: the lockup graphic carries the wordmark.
   Full-width rather than the 1px classic, so the text can never be measured
   as horizontally clipped; clip-path does the actual hiding. Needs a
   positioned ancestor (see .podcast-strip). */
.visually-hidden {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(100%);
  pointer-events: none;
}

/* ---------- 1. hero-title-page ---------- */

/* No min-height: the title page is exactly as tall as its own contents plus
   balanced padding, so nothing dead sits above the folio rule. */
.title-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(1.6rem, 4.4vh, 2.6rem) clamp(1.2rem, 5vw, 3rem) clamp(1.1rem, 2.6vh, 2rem);
}

.folio-rule {
  width: clamp(56px, 12vw, 120px);
  height: 1px;
  background: var(--gold);
  margin-bottom: clamp(1rem, 2.6vh, 2rem);
}

/* the signature: two print passes stacked in one grid cell (no layout shift) */
.signature {
  display: grid;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.2rem, 13.5vw, 9rem);
  line-height: 1.15;
  color: var(--coral-large);
  padding: 0 0.4em 0.12em;
}
.signature-pass { grid-area: 1 / 1; white-space: nowrap; }
.signature-pass-gold { color: var(--gold); opacity: 0; }
.signature-pass-coral { color: var(--coral-large); }

@media (prefers-reduced-motion: no-preference) {
  /* registration-snap: two offset ink passes converge into register, once. */
  .signature-pass-gold {
    animation: pass-gold 480ms cubic-bezier(0.2, 0.7, 0.2, 1) 1 both;
  }
  .signature-pass-coral {
    animation: pass-coral 480ms cubic-bezier(0.2, 0.7, 0.2, 1) 1 both;
  }
  @keyframes pass-gold {
    0%   { opacity: 0.55; transform: translate(7px, -5px); }
    70%  { opacity: 0.3;  transform: translate(2px, -1px); }
    100% { opacity: 0;    transform: translate(0, 0); }
  }
  @keyframes pass-coral {
    0%   { opacity: 0.75; transform: translate(-5px, 4px); }
    100% { opacity: 1;    transform: translate(0, 0); }
  }
}

.identity-line {
  font-size: clamp(0.72rem, 2.6vw, 0.95rem);
  letter-spacing: 0.22em;
  color: var(--ink);
  margin-top: clamp(0.6rem, 1.6vh, 1.1rem);
}

/* still used by the confirmation room's quieter masthead */
.short-rule {
  width: 44px;
  height: 1px;
  background: var(--gold);
  margin: clamp(1.4rem, 4vh, 2.4rem) auto;
}

.press-row {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: clamp(1rem, 2.6vh, 1.7rem);
}

/* the press block: conversion only. A printed insert card tipped onto the
   page - pool-water stock, an ink keyline, one bright fold along the top
   edge, and the paper shadow the covers already cast. */
.press-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  min-height: 56px;
  background: var(--pool);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 3.2vw, 1.15rem);
  letter-spacing: 0.22em;
  line-height: 1.2;
  padding: 18px 32px 18px 36px; /* extra left absorbs tracking on the last glyph */
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 4px rgba(42, 33, 24, 0.18),
    0 10px 24px rgba(42, 33, 24, 0.14);
  cursor: pointer;
}
@media (hover: hover) {
  .press-block:hover {
    background: var(--pool-hover);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      0 3px 6px rgba(42, 33, 24, 0.2),
      0 14px 30px rgba(42, 33, 24, 0.18);
  }
}
/* ink-impress: instant stamp, no easing - the card is pushed into the stock */
.press-block:active {
  background: var(--pool-press);
  box-shadow:
    inset 0 3px 7px rgba(42, 33, 24, 0.4),
    inset 0 0 0 1px rgba(42, 33, 24, 0.2);
}

/* the masthead credit row: her handles set as print credits, not app pills */
.icon-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(0.7rem, 1.8vh, 1.1rem);
}
.rail-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}
.rail-glyph { display: inline-flex; }
.rail-name { white-space: nowrap; }
@media (hover: hover) {
  .rail-chip:hover { background: rgba(151, 82, 46, 0.07); }
}
/* ink-impress on chips: instant tint, same stamp as the credit rows */
.rail-chip:active { background: rgba(42, 33, 24, 0.09); border-color: var(--gold-deep); }

@media (prefers-reduced-motion: no-preference) {
  /* hero-rise: the four lines under the signature settle up into register,
     once, transforms only. Opacity never leaves 1, so nothing is ever
     invisible mid-load and nothing reflows. */
  .title-page .identity-line,
  .title-page .press-row,
  .title-page .icon-rail,
  .podcast-strip {
    animation: hero-rise 500ms cubic-bezier(0.2, 0.7, 0.3, 1) 1 both;
  }
  .title-page .identity-line { animation-delay: 0ms; }
  .title-page .press-row { animation-delay: 70ms; }
  .title-page .icon-rail { animation-delay: 140ms; }
  /* the strip is the last beat of the same stagger, one step behind the handle */
  .podcast-strip { animation-delay: 210ms; }
  @keyframes hero-rise {
    from { transform: translateY(12px); }
    to   { transform: translateY(0); }
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .press-block { transition: background-color 180ms ease-out, box-shadow 180ms ease-out; }
  .press-block:active { transition: none; }
  .rail-chip { transition: background-color 180ms ease-out; }
  .rail-chip:active { transition: none; }
}

/* ---------- 2. podcast-strip ---------- */

/* An ad slug printed straight onto the paper: no card, no frame, no rule box.
   Mobile stacks the lockup over its credits; desktop sets the whole thing as
   one centred line with a gold hairline between, the same hairline grammar the
   folio labels use. */
.podcast-strip {
  position: relative; /* containing block for the screen-reader heading */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(0.9rem, 1.9vh, 1.4rem) clamp(1.2rem, 5vw, 3rem) clamp(1.2rem, 3vh, 2rem);
}
/* the lockup rides its own insert card: same stock physics as a cover print,
   so the pale wordmark sits ON the page instead of bleeding into it */
.lockup-link {
  display: block;
  background: var(--insert-paper);
  border: 1px solid var(--gold);
  border-radius: 2px;
  padding: 16px 22px;
  box-shadow: 0 2px 6px rgba(42, 33, 24, 0.14), 0 10px 26px rgba(42, 33, 24, 0.16);
}
@media (hover: hover) {
  .lockup-link:hover {
    box-shadow: 0 4px 10px rgba(42, 33, 24, 0.2), 0 18px 40px rgba(42, 33, 24, 0.26);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lockup-link { transition: box-shadow 180ms ease-out; }
}
.lockup-img { width: 190px; height: auto; }
.strip-rule {
  width: 44px;
  height: 1px;
  background: var(--gold);
  margin: clamp(0.7rem, 1.7vh, 1.1rem) 0;
}
.strip-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

/* ---------- section grammar: folio labels + gold hairlines ---------- */

.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0 clamp(1.2rem, 5vw, 3rem);
  margin-bottom: clamp(0.9rem, 2.2vh, 1.5rem);
}
.folio-label {
  font-size: clamp(0.72rem, 2.4vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.26em;
  color: var(--coral);
  white-space: nowrap;
}
.head-rule { flex: 1; height: 1px; background: var(--gold); transform: translateY(-0.28em); }

/* ---------- 3. spread-covers ---------- */

.published { padding: clamp(0.6rem, 1.6vh, 1.2rem) 0 clamp(1.6rem, 4.2vh, 2.6rem); }

.cover-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 3vw, 1.6rem);
  padding: 0.6rem clamp(1.2rem, 5vw, 3rem) 1.2rem;
}
/* every cover sheet is a way in; the anchor adds nothing visual of its own */
.cover-link { display: block; cursor: pointer; }
.cover-print img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(42, 33, 24, 0.14), 0 10px 26px rgba(42, 33, 24, 0.16);
}

/* ---------- 4. chapter-portrait-pair ---------- */

/* Mobile: a two-up tear-sheet band right under her chips - B&W studio beside
   the sunlit poolside, the second print pinned a touch lower. */
.portrait-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(0.7rem, 2.6vw, 1.2rem);
  padding: 0.2rem clamp(1.1rem, 4.5vw, 3rem) clamp(1.6rem, 4.2vh, 3.2rem);
}
.portrait-print:nth-child(2) { margin-top: 1rem; }
.portrait-print img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(42, 33, 24, 0.14), 0 10px 26px rgba(42, 33, 24, 0.16);
}

/* print-lift: a tear sheet lifted a few millimetres off the page under a
   pointer or a keyboard, then set back down. Transform only, so nothing
   reflows. The keyboard lift lives outside the hover query so it fires on
   touch and keyboard alike. */
@media (prefers-reduced-motion: no-preference) {
  .cover-print img, .portrait-print img {
    transition: transform 180ms ease-out, box-shadow 180ms ease-out;
  }
  .cover-link:focus-visible .cover-print img {
    transform: translateY(-4px) rotate(0.35deg);
    box-shadow: 0 4px 10px rgba(42, 33, 24, 0.2), 0 18px 40px rgba(42, 33, 24, 0.26);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cover-link:hover .cover-print img, .portrait-print img:hover {
    transform: translateY(-4px) rotate(0.35deg);
    box-shadow: 0 4px 10px rgba(42, 33, 24, 0.2), 0 18px 40px rgba(42, 33, 24, 0.26);
  }
}

/* ---------- 5. closer-print-order ---------- */

.closer {
  text-align: center;
  padding: clamp(1.8rem, 5.6vh, 3.4rem) clamp(1.2rem, 5vw, 3rem) clamp(2rem, 6.2vh, 3.8rem);
}
.closer-rule { width: 44px; height: 1px; background: var(--gold); margin: 0 auto clamp(1rem, 2.8vh, 1.6rem); }
.closer-heading {
  font-size: clamp(0.9rem, 3vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--ink);
  margin-bottom: clamp(1rem, 2.8vh, 1.6rem);
}

/* ---------- 6. footer-legal ---------- */

.page-footer {
  text-align: center;
  padding: 0 1.2rem clamp(1.4rem, 3.4vh, 2.2rem);
}
.footer-line {
  font-size: 0.78rem;
  color: var(--gold-deep);
  letter-spacing: 0.04em;
}
.logout-form { margin-top: 1.2rem; }
.logout-button {
  background: none;
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: var(--gold-deep);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  padding: 12px 18px;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}
.logout-button:active { background: rgba(42, 33, 24, 0.09); }

/* ---------- confirmation room (members page + dialog) ---------- */

.confirm-body { min-height: 100svh; display: flex; align-items: center; justify-content: center; }
.confirm-room, .confirm-dialog {
  max-width: 460px;
  width: 100%;
  text-align: center;
  padding: clamp(2rem, 6vh, 3.4rem) clamp(1.4rem, 5vw, 2.4rem);
}
.confirm-dialog {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 2px;
}
.confirm-dialog::backdrop { background: rgba(42, 33, 24, 0.5); }
.confirm-line { margin-bottom: 1.6rem; }
.confirm-error { color: var(--coral); margin-bottom: 1rem; }
.confirm-form { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.confirm-check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  cursor: pointer;
  text-align: left;
}
/* Custom-painted control with a full 44px hit area. It stays a real
   <input type=checkbox>: Space toggling, `required` validation and form
   submission are untouched; only the painting is ours. */
.confirm-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.confirm-check input[type="checkbox"]::before {
  content: "";
  width: 26px;
  height: 26px;
  border: 2px solid var(--gold-deep);
  border-radius: 2px;
  background: var(--paper);
  display: grid;
  place-content: center;
}
.confirm-check input[type="checkbox"] { position: relative; }
.confirm-check input[type="checkbox"]::after {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--ink);
  position: absolute;
  left: 15px;
  top: 15px;
  transform: scale(0);
}
/* the check lands like a stamp: instant, no tween */
.confirm-check input[type="checkbox"]:checked::after { transform: scale(1); }
.confirm-submit { display: inline-flex; }
.confirm-back {
  color: var(--gold-deep);
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  padding: 10px 16px;
  min-height: 44px;
}

/* ---------- desktop composition (a printed spread, not a stretched phone) ---------- */

@media (min-width: 900px) {
  /* desktop rhythm: the folio rule starts high, then the title page opens out
     so the composition fills the fold instead of clumping in the middle */
  .title-page {
    padding-top: clamp(2rem, 5.3vh, 3.2rem); /* folio rule lands ~48px down */
    padding-bottom: clamp(1rem, 2.2vh, 1.5rem);
  }
  .folio-rule { margin-bottom: clamp(1.4rem, 3.8vh, 2.4rem); }
  .identity-line { letter-spacing: 0.3em; margin-top: clamp(0.8rem, 2.3vh, 1.4rem); }
  .press-row { margin-top: clamp(1.3rem, 3.8vh, 2.4rem); }
  /* desktop: on the landing surfaces the insert card is the page's largest
     object, sized to its own tracking with wide margins; the rail sets as one
     masthead credit row. The confirmation room keeps the base sizing - that
     room stays quiet by design. */
  .press-block { width: auto; }
  .title-page .press-block, .closer .press-block {
    min-width: 380px;
    max-width: 460px;
    font-size: 1.2rem;
    padding: 24px 62px 24px 66px;
  }
  .rail-chip { padding: 12px 22px; font-size: 15px; }
  .icon-rail { gap: 12px; margin-top: clamp(0.9rem, 2.5vh, 1.5rem); }
  /* the strip sets as one centred line: lockup, gold hairline, credits */
  .podcast-strip {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(1.4rem, 3vw, 2.4rem);
    padding-top: clamp(0.8rem, 1.6vh, 1.3rem);
    padding-bottom: clamp(1rem, 2.2vh, 1.6rem);
  }
  .lockup-link { padding: 14px 20px; }
  .lockup-img { width: 200px; }
  .strip-rule { width: 1px; height: 60px; margin: 0; }
  .strip-chips { gap: 14px; }
  .cover-spread { grid-template-columns: 1fr 1fr 1fr; }
  /* Desktop restores the reading order (covers before portraits) and the
     wider pinning of the pair. */
  .portrait-pair, .podcast-strip, .published, .closer, .page-footer { order: 0; }
  .portrait-pair {
    padding-left: clamp(3rem, 9vw, 7rem);
    padding-right: clamp(3rem, 9vw, 7rem);
    padding-top: 0;
  }
  /* the one composed risk moment on this page, deliberate: the poolside print
     hangs lower than the studio print, like two tear sheets pinned unevenly */
  .portrait-print:nth-child(2) { margin-top: 4.5rem; }
}

@media (min-width: 1280px) {
  .cover-spread { padding-left: clamp(3rem, 8vw, 6rem); padding-right: clamp(3rem, 8vw, 6rem); }
}

/* ---------- forced colors: rules and blocks stay visible ---------- */

@media (forced-colors: active) {
  .folio-rule, .short-rule, .head-rule, .closer-rule, .strip-rule { background: CanvasText; }
  .press-block { border: 2px solid ButtonText; }
  .rail-chip, .lockup-link { border: 1px solid CanvasText; }
  .signature-pass-gold { opacity: 0; }
  .confirm-check input[type="checkbox"]::before { border-color: CanvasText; background: Canvas; }
  .confirm-check input[type="checkbox"]::after { background: CanvasText; }
}