/* ==========================================================================
   BRIARWICK HOUSE
   briarwick.css  ·  version 1  ·  the only stylesheet

   HOW THIS FILE IS ORGANISED
     1. Palette and type tokens   <- retune the whole site from here
     2. Reset and page base
     3. Typography
     4. Bands (the light progression: dark hall -> lit room -> dark again)
     5. Components (eyebrow, rules, actions, cover plate)
     6. Sections
     7. Responsive
     8. Accessibility and motion

   THE ONE IDEA
     The page begins near black and warms as the reader descends. Midnight at
     the door, tarnished silver through the middle, warm ivory at About Donald,
     dark again at the footer. Do not break that order when adding sections:
     a new book page should re-enter at --band-book, not at ivory.

   PALETTE PROVENANCE
     Every colour below was sampled from the published cover, then adjusted
     only for text contrast. Midnight is the cover's negative space, silver is
     the lit rim of the music box lid, crimson is the lit face of the roses.
     ========================================================================== */

/* 1. TOKENS ================================================================ */

:root {
  /* sampled from the cover */
  --ink:            #05070e;   /* cover's darkest ground */
  --midnight:       #0d1424;   /* cover's upper negative space */
  --midnight-lift:  #141c30;
  --midnight-warm:  #1b2438;
  --silver:         #8fa0bc;   /* music box lid, lit rim */
  --silver-dim:     #7d8eb0;   /* raised from #6b7996: that failed WCAG AA
                                  4.5:1 for the eyebrow, action note and dry
                                  lines on the lighter dark bands. Measured
                                  4.70 to 6.10 across all four bands now. */
  --silver-bright:  #c6d2e4;   /* the blue shaft */
  --ivory:          #f2ede3;   /* the lilies, warmed */
  --ivory-dim:      #d9d2c4;
  --ink-on-ivory:   #171a22;
  --ink-on-ivory-2: #4a4e5a;
  --crimson:        #8c2433;   /* the roses, lit face, on dark */
  --crimson-deep:   #5e1a24;   /* the roses, on ivory */
  --hairline:       rgba(143, 160, 188, 0.24);
  --hairline-ivory: rgba(23, 26, 34, 0.18);

  /* type */
  --display: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --body:    "EB Garamond", Georgia, "Times New Roman", serif;
  --label:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* measure and rhythm */
  --page:     60rem;
  --prose:    34rem;
  --gutter:   clamp(1.25rem, 5vw, 3rem);
  --band-y:   clamp(4rem, 11vw, 8.5rem);

  color-scheme: dark;
}

/* 2. RESET AND BASE ======================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 0.55vw + 0.95rem, 1.1875rem);
  line-height: 1.68;
  font-variant-numeric: oldstyle-nums;   /* was oldstyle-num, invalid, silently dropped */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* 3. TYPOGRAPHY ============================================================ */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  margin: 0;
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.75rem, 9vw, 5.25rem); }
h2 { font-size: clamp(2.125rem, 6.2vw, 3.5rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

cite { font-style: italic; }

a {
  color: var(--silver-bright);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--hairline);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
a:hover { color: #fff; text-decoration-color: currentColor; }

.lede {
  font-size: clamp(1.1875rem, 1.1vw + 1rem, 1.4375rem);
  line-height: 1.55;
  color: var(--silver-bright);
}

.quiet { color: var(--silver); }
.dry   { color: var(--silver-dim); font-style: italic; }

/* 4. BANDS ================================================================= */

.band { padding-block: var(--band-y); }

.band__inner {
  width: min(100% - (var(--gutter) * 2), var(--page));
  margin-inline: auto;
}

.band--threshold { background: var(--ink); padding-block: clamp(5rem, 16vw, 11rem) clamp(4rem, 10vw, 7rem); }
.band--book      { background: var(--midnight); }
.band--series    { background: var(--midnight-lift); }
.band--next      { background: var(--midnight-warm); }

/* the lit room */
.band--lit {
  background: var(--ivory);
  color: var(--ink-on-ivory);
}
.band--lit h2 { color: var(--ink-on-ivory); }
.band--lit a  { color: var(--crimson-deep); text-decoration-color: rgba(94, 26, 36, 0.4); }
.band--lit a:hover { color: #2f0a11; }
.band--lit .lede  { color: var(--ink-on-ivory); }
.band--lit h1 { color: var(--ink-on-ivory); }
.band--lit .quiet { color: var(--ink-on-ivory-2); }
.band--lit .dry   { color: var(--ink-on-ivory-2); }
.band--lit .eyebrow { color: var(--ink-on-ivory-2); }
.band--lit .rule    { background: var(--hairline-ivory); }

.band--footer { background: var(--ink); padding-block: clamp(2.5rem, 6vw, 4rem); }

/* 5. COMPONENTS ============================================================ */

/* labels, buttons and the footer want lining figures, not old-style */
.eyebrow, .action, .action__note, .cover figcaption, .footer__inner {
  font-variant-numeric: lining-nums;
}

.eyebrow {
  font-family: var(--label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin: 0 0 1.15rem;
}

.rule {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 0;
}

.rule--book    { margin-block: 2rem; }
.rule--divider { margin-bottom: var(--band-y); }

/* the single crimson hairline on the dark half of the page */
.rule--crimson {
  width: 3rem;
  height: 2px;
  background: var(--crimson);
  margin: 0 0 1.5rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}

.action {
  font-family: var(--label);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.9375rem 1.5rem;
  border: 1px solid transparent;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.action--primary {
  background: var(--ivory);
  color: var(--ink);
  border-color: var(--ivory);
}
.action--primary:hover { background: #fff; color: var(--ink); }

/* the second and last use of crimson */
.action--secondary {
  background: transparent;
  color: var(--silver-bright);
  border-color: var(--hairline);
  border-left: 2px solid var(--crimson);
}
.action--secondary:hover {
  color: #fff;
  border-color: var(--silver-dim);
  border-left-color: var(--crimson);
}

.action__note {
  font-family: var(--label);
  font-size: 0.8125rem;
  color: var(--silver-dim);
  margin-top: 0.875rem;
  flex-basis: 100%;
}

/* cover plate: a thin silver edge, the way a plate is mounted */
.cover {
  position: relative;
  margin: 0;
}
.cover picture { display: block; }
.cover img {
  width: 100%;
  border: 1px solid rgba(143, 160, 188, 0.28);
  box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.55);
}
.cover figcaption {
  font-family: var(--label);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-top: 0.875rem;
}

/* 6. SECTIONS ============================================================== */

/* threshold */
.threshold h1 { letter-spacing: 0.02em; }
.threshold__line {
  font-family: var(--body);
  font-size: clamp(1.125rem, 1vw + 0.95rem, 1.375rem);
  color: var(--silver);
  margin: 1.5rem 0 0;
}
.threshold__aside {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  max-width: var(--prose);
  color: var(--silver-dim);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   BRIARWICK ARTWORK  ·  ACTIVE

   TO TURN IT OFF: delete the word "threshold--art" from the <header> class
   list in index.html. One word, one place. The band falls back to flat ink
   and nothing else breaks.

   Source artwork by ARC, masters kept untouched in assets/:
     briarwick-banner-left-copy-v1.png   house right, valley left, 3:1
     briarwick-house-rain-hero-v1.png    house centred, 3:2
     briarwick-banner-chapel-coast-v1.png   unused in v1, house LEFT so the
       quiet area is on the wrong side for left-aligned type. Held for a
       future Ghosts and Silver page.

   The artwork is never lightened, sharpened or repainted. It sits under two
   gradient scrims: one vertical so the type block has a floor, one horizontal
   so the left third stays quiet where "Briarwick House" sits. Measured before
   activating: in the type zone, mean luminance 39 of 255 and 0.56 percent of
   pixels above 150, against a limit of 70 and 2 percent. See COMMS.md.

   The wide 3:1 crop is used from tablet up. Phones get the 3:2 hero, because
   a 3:1 image cropped to a tall phone band shows almost nothing of the house.
   -------------------------------------------------------------------------- */

.threshold--art {
  background-color: var(--ink);
  /* fallback for browsers without image-set() type() support */
  background-image:
    linear-gradient(180deg, rgba(5, 7, 14, 0.55) 0%, rgba(5, 7, 14, 0.34) 40%, rgba(5, 7, 14, 0.97) 100%),
    linear-gradient(90deg, rgba(5, 7, 14, 0.86) 0%, rgba(5, 7, 14, 0.52) 48%, rgba(5, 7, 14, 0.14) 100%),
    url("../img/briarwick-threshold-tall-900.jpg");
  background-image:
    linear-gradient(180deg, rgba(5, 7, 14, 0.55) 0%, rgba(5, 7, 14, 0.34) 40%, rgba(5, 7, 14, 0.97) 100%),
    linear-gradient(90deg, rgba(5, 7, 14, 0.86) 0%, rgba(5, 7, 14, 0.52) 48%, rgba(5, 7, 14, 0.14) 100%),
    image-set(url("../img/briarwick-threshold-tall-900.webp") type("image/webp"),
              url("../img/briarwick-threshold-tall-900.jpg") type("image/jpeg"));
  background-size: cover, cover, cover;
  background-position: center, center, center center;
  background-repeat: no-repeat;
  padding-block: clamp(6rem, 20vw, 13rem) clamp(4.5rem, 11vw, 8rem);
}

/* the type keeps its own floor so it never depends on the artwork behind it */
.threshold--art h1,
.threshold--art .threshold__line,
.threshold--art .threshold__aside {
  text-shadow: 0 1px 28px rgba(5, 7, 14, 0.9), 0 1px 3px rgba(5, 7, 14, 0.7);
}
.threshold--art .threshold__aside { border-top-color: rgba(198, 210, 228, 0.3); }

@media (min-width: 48rem) {
  .threshold--art {
    /* fallback for browsers without image-set() type() support */
    background-image:
      linear-gradient(180deg, rgba(5, 7, 14, 0.50) 0%, rgba(5, 7, 14, 0.28) 38%, rgba(5, 7, 14, 0.96) 100%),
      linear-gradient(90deg, rgba(5, 7, 14, 0.88) 0%, rgba(5, 7, 14, 0.50) 52%, rgba(5, 7, 14, 0.10) 100%),
      url("../img/briarwick-threshold-wide-1400.jpg");
    background-image:
      linear-gradient(180deg, rgba(5, 7, 14, 0.50) 0%, rgba(5, 7, 14, 0.28) 38%, rgba(5, 7, 14, 0.96) 100%),
      linear-gradient(90deg, rgba(5, 7, 14, 0.88) 0%, rgba(5, 7, 14, 0.50) 52%, rgba(5, 7, 14, 0.10) 100%),
      image-set(url("../img/briarwick-threshold-wide-1400.webp") type("image/webp"),
                url("../img/briarwick-threshold-wide-1400.jpg") type("image/jpeg"));
    background-position: center, center, center 62%;
  }
}

@media (min-width: 90rem) {
  .threshold--art {
    /* fallback for browsers without image-set() type() support */
    background-image:
      linear-gradient(180deg, rgba(5, 7, 14, 0.50) 0%, rgba(5, 7, 14, 0.28) 38%, rgba(5, 7, 14, 0.96) 100%),
      linear-gradient(90deg, rgba(5, 7, 14, 0.88) 0%, rgba(5, 7, 14, 0.50) 52%, rgba(5, 7, 14, 0.10) 100%),
      url("../img/briarwick-threshold-wide-2172.jpg");
    background-image:
      linear-gradient(180deg, rgba(5, 7, 14, 0.50) 0%, rgba(5, 7, 14, 0.28) 38%, rgba(5, 7, 14, 0.96) 100%),
      linear-gradient(90deg, rgba(5, 7, 14, 0.88) 0%, rgba(5, 7, 14, 0.50) 52%, rgba(5, 7, 14, 0.10) 100%),
      image-set(url("../img/briarwick-threshold-wide-2172.webp") type("image/webp"),
                url("../img/briarwick-threshold-wide-2172.jpg") type("image/jpeg"));
  }
}

/* the book */
.book {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* on a phone the cover is capped and centred, so the title is reachable
   without scrolling a whole screen of artwork */
.book > .cover {
  width: min(17rem, 68vw);
  margin-inline: auto;
}
.book__series { margin: 0.875rem 0 0; color: var(--silver); font-style: italic; }
.book__copy { max-width: var(--prose); }
.book__copy .first { font-size: 1.0625em; color: var(--silver-bright); }

/* series and coming next */
.prose { max-width: var(--prose); }
/* a long notice page: section headings are real h2s, so the heading order is
   correct, but sized like subheadings because that is their job here */
.notice h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  margin: 2.25rem 0 0.75rem;
}
.notice h2:first-of-type { margin-top: 1.5rem; }
.prose--spaced { margin-top: 2rem; }

/* a band that continues the one above it rather than opening a new room */
.band--tight { padding-top: 0; }

/* about */
.about { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.about__body { max-width: var(--prose); }

/* correspondence */
.correspondence { max-width: var(--prose); }
.corr-title { margin-bottom: 1.25rem; }

/* reader letters ---------------------------------------------------------- */
/* The form lives on the ivory band, so fields are ink on ivory. There is no
   JavaScript: validation is the browser's native required/type handling. */

.letters { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

.letters__intro { max-width: var(--prose); }
.letters__form  { max-width: 32rem; }

.field { margin: 0 0 1.5rem; display: block; }

.field label {
  display: block;
  font-family: var(--label);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-on-ivory);
  margin-bottom: 0.5rem;
}

.field .opt {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-on-ivory-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-on-ivory);
  background: #fbf9f4;
  border: 1px solid rgba(23, 26, 34, 0.28);
  border-radius: 0;
  padding: 0.75rem 0.875rem;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.field textarea { resize: vertical; min-height: 9rem; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(23, 26, 34, 0.5); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  background: #fff;
  border-color: var(--crimson-deep);
  outline: 2px solid var(--crimson-deep);
  outline-offset: 1px;
}

.field .help {
  display: block;
  font-family: var(--body);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-on-ivory-2);
  margin-top: 0.5rem;
}

/* on the ivory band the primary action inverts: ink fill, ivory text */
.letters__form .action--primary {
  background: var(--ink-on-ivory);
  color: var(--ivory);
  border-color: var(--ink-on-ivory);
  cursor: pointer;
  font-family: var(--label);
}
.letters__form .action--primary:hover { background: #000; color: #fff; }

.letters__privacy {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-on-ivory-2);
  max-width: 34rem;
  margin: 1.75rem 0 0;
}

/* Spam honeypot. display:none, deliberately, not the visually-hidden
   pattern: a clipped-but-laid-out input still has a box, still takes focus
   in some assistive tooling, and a real person can trip over it. Fields with
   display:none are still submitted, which is what makes the trap work. */
.honeypot { display: none; }

/* footer */
.footer__inner {
  width: min(100% - (var(--gutter) * 2), var(--page));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--label);
  font-size: 0.8125rem;
  color: var(--silver-dim);
}
.footer__inner p { margin: 0; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__links a { color: var(--silver); text-decoration: none; }
.footer__links a:hover { color: var(--silver-bright); text-decoration: underline; }
.footer__mark {
  font-family: var(--display);
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  color: var(--silver);
}

/* 7. RESPONSIVE ============================================================ */

@media (min-width: 48rem) {
  .book {
    grid-template-columns: minmax(14rem, 19rem) minmax(0, var(--prose));
    justify-content: start;
  }
  .book > .cover { width: auto; margin-inline: 0; }
  .about {
    grid-template-columns: minmax(0, 15rem) minmax(0, var(--prose));
    column-gap: clamp(2rem, 6vw, 5rem);
  }
  .about h2 { font-size: clamp(1.875rem, 3.4vw, 2.625rem); }
  .letters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 6vw, 4.5rem);
  }
}

/* 8. ACCESSIBILITY AND MOTION ============================================== */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--label);
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

:focus-visible {
  outline: 2px solid var(--silver-bright);
  outline-offset: 3px;
}
.band--lit :focus-visible { outline-color: var(--crimson-deep); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* 9. FONTS ================================================================= */
/* Self-hosted. No third-party request is made by this page. Licences are in
   assets/fonts/. Do not replace these with a Google Fonts <link>: it would
   add a third-party call the brief forbids. */

@font-face {
  font-family: "Cormorant SC";
  src: url("../fonts/cormorant-sc-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant SC";
  src: url("../fonts/cormorant-sc-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-var.woff2") format("woff2-variations"),
       url("../fonts/eb-garamond-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-italic-var.woff2") format("woff2-variations"),
       url("../fonts/eb-garamond-italic-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations"),
       url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}