/* ==========================================================================
   Conrad & Donique — wedding site. One stylesheet for every page.

   The look is taken from the three reference screenshots Conrad supplied on
   19 October 2026: warm off-white page, near-black type, one solid dark button,
   tracked serif capitals, quiet centred layout, photography between sections.
   The values are recorded in ../BRAND.md (Visual Identity), as a PROPOSAL
   pending the couple's approval.

   What is deliberately NOT taken from the reference: its body text, which is
   ~12px, light and grey (#5F5B58 sampled, 5.99:1 on the page ground). That
   fails the agency floor (AAA, 7:1). Body here is 18px in full ink, 16:1.

   THE ONE RULE: no component pins a colour. Components paint with the band
   tokens below (--bg, --ink, --muted, --rule, --focus, --field), and each band
   sets them. That way the footer's dark band repaints its links and focus ring
   without a single component knowing it is on a dark ground.
   ========================================================================== */

/* --- Fonts: self-hosted (fonts/README.md). Google's Latin cut of each, so the
   unicode-range matches what was fetched: it covers every character on the site,
   including curly quotes, dashes and ‹ ›. */
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/cormorant-garamond-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Jost';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('fonts/jost-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* Type scale. Six steps and no more. Base 16px root, body at 18px because
     the readers include older relatives reading on a phone. */
  --t-label:1rem;                          /* 16px — nav, buttons, form labels, tracked labels */
  --t-body:1.125rem;                       /* 18px — body */
  --t-sub:1.375rem;                        /* 22px — names in the header, h3 */
  --t-h2:clamp(1.5rem,1.2rem + 1.2vw,1.75rem);   /* 24–28px — section headings (large text from 24px) */
  --t-h1:clamp(2rem,1.4rem + 2.6vw,2.75rem);     /* 32–44px — page titles */
  --t-display:clamp(2.25rem,1.2rem + 4.6vw,4rem);/* 36–64px — the couple's names on Home only */

  /* One spacing rhythm: 8px. */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;

  --gutter:clamp(16px,5vw,64px);
  --section:clamp(64px,10vw,128px);
  --measure:36rem;                         /* ~64 characters of Jost at 18px */
  --wrap:72rem;
  --tap:44px;                              /* AAA target minimum, both axes, everywhere */

  --serif:'Cormorant Garamond',Garamond,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Helvetica,Arial,sans-serif;

  --track-display:0.18em;                  /* tracked capitals, as in the reference */
  --track-label:0.12em;
}

/* Band tokens. Every pair measured (sRGB relative luminance), 19 October 2026:
   light: ink #1A1614 on #F5F1EE 16.00:1 · muted #4A4542 8.42:1 (9.45:1 on the white field)
          rule #76706B 4.35:1 on page, 4.88:1 on field — borders only, never text
   dark:  ink #F5F1EE on #2C2827 12.99:1 · muted #C9C1BA 8.21:1 */
.band-light{--bg:#F5F1EE;--ink:#1A1614;--muted:#4A4542;--rule:#76706B;--focus:#1A1614;--field:#FFFFFF}
.band-dark {--bg:#2C2827;--ink:#F5F1EE;--muted:#C9C1BA;--rule:#C9C1BA;--focus:#F5F1EE;--field:#2C2827}

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

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.6;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.band-light,.band-dark{background:var(--bg);color:var(--ink)}

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

/* --- Headings -------------------------------------------------------------
   Capitals come from text-transform, never typed into the markup: several
   screen readers spell out a typed all-caps word letter by letter. */
h1,h2{
  font-family:var(--serif);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:var(--track-display);
  line-height:1.2;
  text-align:center;
  text-wrap:balance;
  /* Cormorant defaults to old-style figures, which set the "1." in
     "1. Pay for your accommodation" as a small i-shaped numeral in capitals. */
  font-variant-numeric:lining-nums;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{
  font-family:var(--sans);
  font-size:var(--t-sub);
  font-weight:500;
  line-height:1.3;
  text-wrap:balance;
}
p,li,dd{text-wrap:pretty}
.nowrap{white-space:nowrap}         /* keeps a date on one line */

/* --- Links ----------------------------------------------------------------
   No underline at rest, anywhere (Conrad, 19 October 2026). The underline
   appears on hover and on keyboard focus. Buttons and the names in the
   header (the logo, Conrad 20 October 2026) never underline. */
a{color:var(--ink);text-decoration:none;text-decoration-thickness:1px;text-underline-offset:0.2em}
a:not(.btn,.site-name):focus-visible{text-decoration:underline}
@media (hover:hover){ a:not(.btn,.site-name):hover{text-decoration:underline} }

/* --- Focus, skip link ----------------------------------------------------- */
:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}
.skip{
  position:absolute;left:var(--s-2);top:var(--s-2);z-index:10;
  transform:translateY(-200%);
  background:var(--ink);color:var(--bg);
  min-height:var(--tap);display:inline-flex;align-items:center;
  padding:0 var(--s-3);font-size:var(--t-label);font-weight:500;
}
.skip:focus{transform:none;outline:2px solid var(--ink);outline-offset:3px}

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

/* --- Header ---------------------------------------------------------------
   Names on the left, links on the right, RSVP as the filled button — as in
   the reference. Below 56rem there is no room for both on one line, so the
   names sit above and the links wrap underneath, centred. No hamburger menu
   and no JavaScript: four links fit on a phone, and nothing is hidden. */
.site-head{
  padding:var(--s-3) var(--gutter);
  display:flex;flex-direction:column;align-items:center;gap:var(--s-2);
}
.site-name{
  font-family:var(--serif);font-size:var(--t-sub);
  text-transform:uppercase;letter-spacing:var(--track-display);
  text-decoration:none;line-height:1.2;
  min-height:var(--tap);display:inline-flex;align-items:center;
  text-align:center;
}
.site-nav ul{
  list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--s-1) var(--s-1);
}
.site-nav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);min-width:var(--tap);
  padding:0 var(--s-1);
  font-size:var(--t-label);letter-spacing:0.04em;
  text-decoration:none;
}
/* The current page is underlined, as Home is in the reference. */
.site-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.35em}
@media (hover:hover){ .site-nav a:not(.btn):hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.35em} }
.site-nav .btn{margin-left:var(--s-1);padding:0 var(--s-3)}
.site-nav .btn[aria-current="page"]{text-decoration:none}
@media (min-width:56rem){
  .site-head{flex-direction:row;justify-content:space-between;gap:var(--s-4)}
  .site-nav ul{gap:var(--s-1) var(--s-2)}
}

/* --- Buttons --------------------------------------------------------------
   One filled style and one outlined style, both from the band tokens.
   Square corners, as in the reference. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);
  padding:var(--s-1) var(--s-4);
  font-family:var(--sans);font-size:var(--t-label);font-weight:500;
  letter-spacing:0.04em;line-height:1.2;
  text-decoration:none;cursor:pointer;
  border:1px solid var(--ink);border-radius:0;
}
.btn--fill{background:var(--ink);color:var(--bg)}
.btn--line{background:transparent;color:var(--ink)}
.btn--wide{min-width:14rem;min-height:3.5rem}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background-color .15s ease,color .15s ease}
}
/* Hover swaps fill and outline: geometry is unchanged and the label keeps
   full contrast in both states (16:1 either way round). */
@media (hover:hover){
  .btn--fill:hover{background:var(--bg);color:var(--ink)}
  .btn--line:hover{background:var(--ink);color:var(--bg)}
}

/* --- Photographs ----------------------------------------------------------
   PLACEHOLDERS. Each .photo is a neutral block standing in for one of the
   couple's photographs. When the real ones arrive, replace the block with
   <img> (or <picture>) carrying width, height, alt text and object-fit:cover,
   keeping the class so the ratio holds. Supply landscape, at least 2400px wide.
   Ratios: 3:2 on a phone, 12:5 from 48rem — wide, like the reference. */
.photo{
  display:block;width:100%;
  aspect-ratio:3/2;
  background:#D9D2CB;                    /* placeholder tone only; decorative, carries no text */
  object-fit:cover;
}
@media (min-width:48rem){ .photo{aspect-ratio:12/5} }

/* --- Sections -------------------------------------------------------------- */
main{display:block}
.section{padding:var(--section) var(--gutter)}
.section + .section{padding-top:0}
.col{max-width:var(--measure);margin-inline:auto}
.center{text-align:center}

/* Stack of blocks with one rhythm between them. */
.stack > * + *{margin-top:var(--s-3)}
.stack > h2 + *{margin-top:var(--s-3)}
.stack > * + h2{margin-top:var(--s-6)}
.stack > * + h3{margin-top:var(--s-5)}
/* Headings are display type, not body copy, so on wide screens they may run
   past the 36rem text measure. Without this "1. Pay for your accommodation"
   left "Accommodation" alone on a second line even at 1440. */
@media (min-width:60rem){ .col > h2{margin-inline:-6rem} }
.stack > h3 + *{margin-top:var(--s-2)}

/* Page title band on inner pages. */
.page-title{padding:var(--s-6) var(--gutter)}
.page-title > * + *{margin-top:var(--s-3)}
.page-title + .section{padding-top:0}

/* --- Hero with text over it (RSVP) --------------------------------------------
   Photo and text share one grid cell. The row is as tall as whichever is taller,
   so on a phone the photo grows rather than clipping the text. The wash darkens
   the whole photo so light text holds its contrast whatever the photo is. */
.hero{display:grid;grid-template-columns:minmax(0,1fr)}   /* never wider than the page */
.hero > *{grid-area:1/1}
.hero > .photo{min-height:100%}   /* a fixed aspect ratio won't stretch, so grow it explicitly */
.hero-text{
  --ink:#F5F1EE;color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  background:rgba(26,22,20,.65);   /* 65%: keeps light text at 4.5:1 over the brightest highlights */
}
.hero + .section{padding-top:var(--s-6)}
.hero-note{font-size:var(--t-label)}   /* a step down from body; 16px is the site's floor */

/* --- Home ------------------------------------------------------------------ */
.names{font-size:var(--t-display);letter-spacing:0.14em}
.when{font-size:var(--t-sub);line-height:1.5}
.names + .col{margin-top:var(--s-4)}
.when + .lede{margin-top:var(--s-5)}
/* On a phone the names stack, Conrad / & / Donique, rather than breaking
   wherever the line runs out. One line from 40rem. */
.names span{display:block}
@media (min-width:40rem){ .names span{display:inline} }
.lede > * + *{margin-top:var(--s-2)}
.actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);
  margin-top:var(--s-5);
}
.deadline{font-weight:500}

/* --- Facts: label over value, centred ----------------------------------- */
.facts{
  display:grid;gap:var(--s-3);
  text-align:center;
}
.facts dt{
  font-size:var(--t-label);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--track-label);
}
.facts dd{margin-top:2px}
/* --- Breakfast menu button (The Finer Details): the full menu is a PDF card. */
.menu-btn{display:flex;width:fit-content;margin:var(--s-2) auto 0}

/* A qualifier under a value: its own line, a step smaller. 16px is the site's floor. */
.fact-note{display:block;font-size:var(--t-label);color:var(--muted)}

/* --- Reference lists (Details) -------------------------------------------
   Lists are left-aligned inside the centred column: a centred bullet list is
   hard to scan, and this page is a reference guests come back to. */
.list{list-style:none}
.list li{position:relative;padding-left:1.25em}
.list li + li{margin-top:var(--s-1)}
.list li::before{
  content:"";position:absolute;left:0.2em;top:0.75em;
  width:0.4em;height:1px;background:var(--ink);
}
.list--links li{padding-left:0}
.list--links li::before{content:none}
/* Links that stand alone in a list get the full target height. */
.list--links a,.link-standalone{
  display:inline-flex;align-items:center;min-height:var(--tap);
  min-width:var(--tap);               /* "Grab" measured 39px wide without this */
}
.note{font-style:italic}

/* Numbered entry steps */
.step{margin-top:var(--s-5)}
.step > * + *{margin-top:var(--s-2)}

/* --- RSVP: bank details --------------------------------------------------- */
/* PLACEHOLDERS ONLY. Real account details stay out of the workspace until the
   site sits behind host-level password protection — see WEBSITE_BRIEF.md. */
.bank{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--rule);
}
.bank > div{padding:var(--s-2) 0;border-bottom:1px solid var(--rule)}
.bank dt{font-size:var(--t-label);font-weight:500;text-transform:uppercase;letter-spacing:var(--track-label)}
.bank dd{overflow-wrap:anywhere}
@media (min-width:36rem){
  .bank > div{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:var(--s-3);align-items:baseline}
}

/* --- Form ----------------------------------------------------------------- */
.form{margin-top:var(--s-4)}
.form > * + *{margin-top:var(--s-4)}
.req-note{font-size:var(--t-label)}
.row{display:grid;gap:var(--s-4)}
@media (min-width:36rem){ .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-3)} }
.row > *{min-width:0}

.field label,.group legend{
  display:block;
  font-size:var(--t-label);font-weight:500;letter-spacing:0.02em;
  margin-bottom:var(--s-1);
}
.field input,.field textarea{
  display:block;width:100%;
  font:inherit;color:var(--ink);background:var(--field);
  border:1px solid var(--rule);border-radius:0;
  padding:10px 14px;min-height:var(--tap);
}
.field textarea{min-height:9rem;resize:vertical;line-height:1.5}
.field input:focus-visible,.field textarea:focus-visible{border-color:var(--ink)}

/* A fieldset holds its own min-content width open unless told not to. */
.group{border:0;min-width:0}
.group legend{padding:0;margin-bottom:var(--s-1)}

/* Radios and checkboxes.
   The INPUT is the 44 x 44 target, not the label — a 24px custom box with a
   big label around it still measures 24px. The visible box is drawn inside it
   with ::before (the box) and ::after (the tick or dot). */
.choice{display:flex;align-items:center;gap:var(--s-1);min-height:var(--tap)}
.choice label{cursor:pointer;padding-block:var(--s-1)}
.choice input{
  appearance:none;-webkit-appearance:none;
  flex:none;margin:0;
  width:var(--tap);height:var(--tap);
  display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;
  margin-left:-10px;                      /* aligns the visible box, not the hit area, with the text column */
}
.choice input::before,.choice input::after{content:"";grid-area:1/1}
.choice input::before{
  width:24px;height:24px;
  border:2px solid var(--ink);            /* 16:1 against the page: well over 3:1 */
  background:var(--field);
}
.choice input[type="radio"]::before{border-radius:50%}
.choice input[type="radio"]:checked::after{
  width:12px;height:12px;border-radius:50%;background:var(--ink);
}
.choice input[type="checkbox"]:checked::before{background:var(--ink)}
.choice input[type="checkbox"]:checked::after{
  width:7px;height:13px;
  border:solid var(--bg);border-width:0 3px 3px 0;
  transform:translateY(-2px) rotate(45deg);
}
.choice input:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}
/* Windows High Contrast: backgrounds are stripped, so the checked state would
   vanish. Draw it in system colours instead. */
@media (forced-colors:active){
  .choice input::before{border-color:CanvasText}
  .choice input[type="checkbox"]:checked::before,
  .choice input[type="radio"]:checked::after{background:CanvasText;forced-color-adjust:none}
  .choice input[type="checkbox"]:checked::after{border-color:Canvas;forced-color-adjust:none}
}

.req{font-weight:500}
.submit{text-align:center;padding-top:var(--s-2)}

/* --- Add to calendar (The Finer Details, accommodation dates) ------------------- */
.cal summary{
  list-style:none;cursor:pointer;
  display:inline-flex;flex-direction:column;align-items:center;
  min-height:var(--tap);justify-content:center;
}
.cal summary::-webkit-details-marker{display:none}
.cal-hint{
  font-size:var(--t-label);font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:var(--track-label);
}
.cal-hint::before{content:"+ "}
.cal[open] .cal-hint::before{content:"– "}
@media (hover:hover){ .cal summary:hover .cal-dates{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.2em} }
.cal summary:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.cal ul{
  list-style:none;padding:0;margin-top:var(--s-1);
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--s-3);
}
.cal a{display:inline-flex;align-items:center;min-height:var(--tap)}

/* --- Venue gallery (The Finer Details) ------------------------------------------
   A sideways scroll that snaps to one photo at a time. Works without JavaScript
   (swipe, trackpad, keyboard arrows once focused); the script adds the buttons. */
.gallery{max-width:56rem;margin:var(--s-5) auto}
.gallery-track{
  display:flex;overflow-x:auto;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  list-style:none;margin:0;padding:0;
}
.gallery--js .gallery-track{scrollbar-width:none}           /* buttons replace the bar */
.gallery--js .gallery-track::-webkit-scrollbar{display:none}
.gallery-track li{flex:0 0 100%;scroll-snap-align:start;padding:0}
.gallery-track li::before{content:none}
.gallery-track img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.gallery-track:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.gallery-controls{
  display:flex;align-items:center;justify-content:center;gap:var(--s-3);
  margin-top:var(--s-2);
}
.gallery-controls[hidden]{display:none}
.gallery-btn{min-width:var(--tap);padding:0;font-size:1.5rem;line-height:1}
.gallery-count{min-width:5ch;text-align:center;font-size:var(--t-label);font-variant-numeric:tabular-nums}

/* --- Map and app logos (The Finer Details) ------------------------------------ */
.map iframe{
  display:block;width:100%;height:auto;
  aspect-ratio:3/2;                       /* reserves the space before the lazy embed loads */
  border:1px solid var(--rule);
}
.apps{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-4) var(--s-6);
  list-style:none;padding:0;
}
.apps a{
  display:grid;grid-template-rows:80px auto;   /* one logo slot height, so both labels line up */
  justify-items:center;align-items:center;row-gap:var(--s-2);
  min-width:var(--tap);text-align:center;
}
.apps img{display:block;max-width:100%;height:auto}

/* --- Footer ----------------------------------------------------------------- */
.site-foot{
  padding:var(--s-7) var(--gutter);
  text-align:center;
}
.site-foot p + p{margin-top:var(--s-1)}
.signoff{
  font-family:var(--serif);font-size:var(--t-h2);line-height:1.3;
}