/* Ashley & Jeff.
   Colours from photographs of the place we're getting married, and the range
   around them. Every ratio is measured, not guessed.

   The first two are the pair Jeff first compared, at their original values.
   The other six are deliberately not variations on them: two mid-tone, four
   dark or saturated. All but one will go. */

/* Dusk — the two originals, unchanged */
:root, :root[data-palette="dusk"] {
  color-scheme: light;
  --ground: #E9EDF1;
  --card:   #F7F9FB;
  --ink:    #1C2836;
  --ink-2:  #47586B;
  --accent: #B2685D;
  --band:   #CDD6DE;
  --edge:   #CDD6DE;
  --display: "Hoefler Text", Baskerville, "Palatino Linotype", Palatino, Georgia, serif;
  --text: ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Sand — the second original, unchanged */
:root[data-palette="sand"] {
  color-scheme: light;
  --ground: #F0E7D8;
  --card:   #FBF6EC;
  --ink:    #2C2620;
  --ink-2:  #5D5245;
  --accent: #9E4F3F;
  --band:   #DCCEB8;
  --edge:   #DCCEB8;
}

/* Dune — mid warm, neither paper nor dark */
:root[data-palette="dune"] {
  color-scheme: dark;
  --ground: #5A4A34;
  --card:   #6A583F;
  --ink:    #FBF4E6;
  --ink-2:  #DFCFB4;
  --accent: #C9A24E;
  --band:   #463920;
  --edge:   #463920;
}

/* Slate — mid cool */
:root[data-palette="slate"] {
  color-scheme: dark;
  --ground: #3E4C57;
  --card:   #4A5A66;
  --ink:    #F2F5F7;
  --ink-2:  #C6D2DA;
  --accent: #E9A08A;
  --band:   #2F3A43;
  --edge:   #2F3A43;
}

/* Reef — deep teal */
:root[data-palette="reef"] {
  color-scheme: dark;
  --ground: #1E4E4E;
  --card:   #255A5A;
  --ink:    #EFF4F2;
  --ink-2:  #B6D2CD;
  --accent: #F0A07E;
  --band:   #163C3C;
  --edge:   #163C3C;
}

/* Palm — deep green, gold */
:root[data-palette="palm"] {
  color-scheme: dark;
  --ground: #20301F;
  --card:   #283A26;
  --ink:    #EDEFE4;
  --ink-2:  #B4C4A8;
  --accent: #DFAE5C;
  --band:   #182618;
  --edge:   #182618;
}

/* Terracotta — saturated rust */
:root[data-palette="terracotta"] {
  color-scheme: dark;
  --ground: #6F2E1F;
  --card:   #7E3524;
  --ink:    #FDF3EC;
  --ink-2:  #F0CFBE;
  --accent: #8FBFB8;
  --band:   #5C2519;
  --edge:   #5C2519;
}

/* Midnight — deep navy */
:root[data-palette="midnight"] {
  color-scheme: dark;
  --ground: #111C28;
  --card:   #192634;
  --ink:    #EAE4D8;
  --ink-2:  #9FB6C8;
  --accent: #E19A8B;
  --band:   #0C151F;
  --edge:   #0C151F;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Lining figures. Without this the serif sets oldstyle numerals and "11" comes
   out as two short strokes that read as a Roman two. */
.names, .when, input.code, h1, h2, strong { font-variant-numeric: lining-nums; }

/* ---- the door ---- */
.wrap {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 1.4rem; gap: 1.8rem; text-align: center;
}

.names {
  font-family: var(--display);
  font-weight: 400; margin: 0; line-height: 1.1;
  font-size: clamp(1.9rem, 7.5vw, 3rem);
  white-space: nowrap;
}
.names .amp { font-style: italic; color: var(--accent); }

.line { margin: 0; max-width: 28rem; color: var(--ink-2); font-size: 1.02rem; }

hr.hair { width: 3rem; border: none; border-top: 1px solid var(--edge); margin: 0; }

form.door { display: flex; flex-direction: column; align-items: center; gap: .85rem; }
label.ask { font-size: .95rem; color: var(--ink-2); }

/* Shown, never masked. This is not a password and there is nothing to
   shoulder-surf; masking would only defend against the guest. */
input.code {
  font-family: var(--display);
  font-size: 1.3rem;
  width: min(18rem, 78vw);
  padding: .55rem .7rem;
  text-align: center;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--edge); border-radius: 2px;
  outline-offset: 3px;
}
input.code:focus-visible { outline: 2px solid var(--accent); }

button.go {
  font: inherit; font-size: .92rem;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .6rem 1.5rem;
  color: var(--ground); background: var(--ink);
  border: none; border-radius: 2px; cursor: pointer;
}
button.go:hover { background: var(--ink-2); }
button.go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

p.wrong {
  margin: 0; color: var(--ink); background: var(--card);
  border-left: 3px solid var(--accent);
  padding: .6rem .9rem; text-align: left; max-width: 22rem; font-size: .95rem;
}

/* ---- inside ---- */
/* The page fills the window; the READING COLUMN is what stays narrow, and only
   the prose is held to it. A 36rem page was a phone column stranded in the
   middle of a desktop screen. */
main.inside {
  max-width: 60rem; margin: 0 auto;
  padding: 0 1.4rem 7rem;
  display: flex; flex-direction: column; gap: 1.6rem;
}
.panel, .todo, .ask-us { width: 100%; max-width: 42rem; margin-left: auto; margin-right: auto; }
/* Full-bleed band, whatever the container width. */
header.top {
  text-align: center; display: flex; flex-direction: column; gap: .5rem;
  background: var(--band);
  margin: 0 calc(50% - 50vw);
  padding: 3rem 1.4rem 2.2rem;
}
header.top .names { font-size: clamp(1.8rem, 7vw, 2.6rem); }

.when { font-family: var(--display); font-size: 1.15rem; margin: 0; }
.where { margin: 0; color: var(--ink-2); font-size: .98rem; }

.tabs {
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  padding: .7rem 0;
}
.tabs button {
  font: inherit;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0 0 3px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
}
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.panel { display: flex; flex-direction: column; gap: .8rem; }
/* MUST come after the display rule. `display: flex` beats the browser's
   [hidden] { display: none }, so every panel rendered at once and the tabs
   appeared to do nothing — they were toggling an attribute with no effect. */
.panel[hidden] { display: none; }
.panel p { max-width: none; }
.panel h2 {
  font-family: var(--display); font-weight: 400;
  font-size: 1.1rem; margin: .8rem 0 0; color: var(--ink);
}
.panel h2:first-child { margin-top: 0; }
.panel p { margin: 0; }

.ask-us {
  border-top: 1px solid var(--edge);
  padding-top: 1.2rem; margin-top: .6rem; margin-bottom: 0;
  color: var(--ink-2); font-size: .95rem; text-align: center;
}

/* Temporary: for choosing between the two palettes. Goes when one is picked. */
.palette-pick {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap;
  padding: .55rem .4rem;
  background: var(--card); border-top: 1px solid var(--edge);
}
.palette-pick button {
  font: inherit; cursor: pointer; text-align: center;
  /* Sized for the longest label — TERRACOTTA — not for the average one.
     It was 4.6rem, the label needed 76px of it, and the text ran to both
     edges. Measured in a browser, not guessed. */
  width: 5.6rem; padding: .45rem .25rem .4rem;
  border: 1px solid rgba(128,128,128,.35); border-radius: 3px;
  display: block;   /* not flex: Safari mishandles flex inside a button */
  -webkit-appearance: none; appearance: none;
}
.palette-pick .sw { display: block; width: 100%; height: 1.05rem; border-radius: 2px; }
.palette-pick .lb {
  display: block; margin-top: .3rem;
  font-size: .55rem; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.palette-pick button.on { outline: 2px solid currentColor; outline-offset: 2px; font-weight: 600; }
.palette-pick button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

a { color: var(--ink-2); text-underline-offset: .18em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A placeholder, and unmistakably one. It exists so Ashley can see the whole
   shape while she reviews — something she expects and cannot find reads as
   forgotten, which is worse than an obvious gap. Every one of these comes out
   before a guest sees the site. */
.todo {
  font-size: .88rem;
  color: var(--ink-2);
  background: var(--card);
  border: 1px dashed var(--edge);
  border-left: 3px solid var(--accent);
  padding: .5rem .75rem;
  /* NOT `margin: 0`. The shared rule above centres this with auto margins, and
     a blanket margin here would silently undo it — which is exactly how the
     paragraphs ended up hard left twice. */
  margin-top: 0;
  margin-bottom: 0;
}

/* Wider screens get more type, not more empty ground. */
@media (min-width: 60rem) {
  body { font-size: 18px; line-height: 1.65; }
  header.top .names { font-size: 3.4rem; }
  .when { font-size: 1.45rem; }
  .where { font-size: 1.05rem; }
  .panel h2 { font-size: 1.3rem; }
  .tabs { gap: 2.6rem; padding: .9rem 0; }
  .tabs button { font-size: .78rem; }
  main.inside { gap: 2rem; }
}
@media (min-width: 90rem) {
  main.inside { max-width: 68rem; }
  .panel, .todo, .ask-us { max-width: 44rem; }
}