/* ═══════════════════════════════════════════════════════════════════════
   rebeccaandsam.wedding

   Every colour and tracking value here is sampled or measured from the
   Kramer Drive A2 save-the-date. Two inks only — navy and cream — because
   that is what the card is. Resist adding a third.

   EB Garamond is the FULL upstream build, subset locally. The Google CDN
   version has `smcp` stripped, which silently degrades to browser-
   synthesised small caps (scaled capitals, visibly wrong stroke weight).
   Never swap these files for the CDN.
   ══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'EB Garamond';
  src:url('/fonts/eb-garamond-roman.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'EB Garamond';
  src:url('/fonts/eb-garamond-italic.woff2') format('woff2');
  font-weight:400 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Pinyon Script';
  src:url('/fonts/pinyon-script.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --navy:#021E49;
  --cream:#FBF9F3;
  --ground:#EFEDE7;
  --rule:#CFC9BA;
  --muted:#5B5B56;

  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --script:'Pinyon Script', 'Snell Roundhand', cursive;

  /* Tracking, measured off the printed card */
  --track-label:.16em;
  --track-name:.13em;
  --track-detail:.11em;
  --track-url:.055em;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,html{overflow-x:clip}

body{
  margin:0;
  background:var(--cream);
  color:var(--navy);
  font-family:var(--serif);
  font-feature-settings:"onum" 1;
  line-height:1.6;
}

/* Letterpress bite: one hairline highlight below the glyph edge, reading as
   ink pressed into cotton. 1px is the whole effect — more becomes an emboss. */
.bite{text-shadow:0 1px 0 rgba(255,255,255,.9)}

.hairline{
  width:44px; height:.7px; border:0;
  background:currentColor; opacity:.42;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--navy); color:var(--cream);
  padding:10px 16px; z-index:10;
  font-feature-settings:"smcp" 1; letter-spacing:var(--track-detail);
}
.skip:focus{left:0}

a{color:inherit}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px}

/* ═══ Home — the card, continued ═══════════════════════════════════════ */
.card-page{
  min-height:82vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(56px,10vw,110px) 24px clamp(28px,5vw,44px);
}
.card-inner{max-width:520px}
.card-inner p{margin:0}

.lead{
  font-style:italic;
  font-size:clamp(1rem,2.2vw,1.16rem);
  line-height:1.72;
}
/* One heading for the whole couple — "Rebecca Koweek to Samuel Aronson" reads
   as a single announcement, so it is one <h1> with block-level spans inside
   rather than two headings or, worse, no heading at all. */
.names-group{
  margin:.3em 0 0;
  font-weight:400;
  font-size:inherit;
}
.names{
  display:block;
  font-family:var(--script);
  font-feature-settings:normal;
  font-size:clamp(2.6rem,10vw,4.6rem);
  line-height:1.18;
}
.to{
  display:block;
  font-family:var(--serif);
  font-style:italic; font-size:1.05rem; opacity:.9;
  margin:.08em 0;
}
.detail{
  margin:1.9rem 0 0 !important;
  font-size:1.02rem; line-height:2;
  font-feature-settings:"smcp" 1,"onum" 1;
  letter-spacing:var(--track-detail);
}
.card-inner .hairline{margin:1.9rem auto 0}
.closing{
  margin:1.5rem 0 0 !important;
  font-style:italic; font-size:.94rem; color:var(--muted);
}

.home-nav{
  text-align:center;
  padding:0 24px clamp(48px,8vw,80px);
}
.home-nav a{
  font-size:.88rem;
  font-feature-settings:"smcp" 1;
  letter-spacing:var(--track-label);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:3px;
}
.home-nav a:hover,.home-nav a:focus-visible{border-bottom-color:var(--navy)}

/* ═══ Interior — the ledger ════════════════════════════════════════════ */
.ledger{
  display:grid;
  grid-template-columns:minmax(170px,224px) 1fr;
  min-height:100vh;
}

.rail{
  border-right:1px solid var(--rule);
  padding:38px 26px;
  display:flex; flex-direction:column;
}
/* Rail head: the familiar form of the names, doubling as the home link.
   The hero says "Samuel Aronson" because the card does; the rail says "Sam"
   because that is how these guests address him. Two registers, not a repeat. */
.rail .mark{
  display:block; text-decoration:none;
  font-size:.95rem;
  font-feature-settings:"smcp" 1;
  letter-spacing:var(--track-name);
  line-height:1.6; width:max-content;
}
.rail .mark .and{
  display:block;
  font-style:italic; font-feature-settings:normal;
  letter-spacing:.02em; font-size:.88rem; opacity:.6;
}
.rail .mark:hover,.rail .mark:focus-visible{opacity:.62}
.mark-bar{
  width:34px; height:.7px; border:0;
  background:var(--navy); opacity:.42;
  margin:1.15rem 0 1.5rem;
}
.rail ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem}
.rail ul a{
  text-decoration:none; font-size:.86rem;
  font-feature-settings:"smcp" 1;
  letter-spacing:var(--track-name);
  border-bottom:1px solid transparent;
  padding-bottom:3px; width:max-content; display:inline-block;
}
.rail ul a[aria-current]{border-bottom-color:var(--navy)}
.rail ul a:hover,.rail ul a:focus-visible{border-bottom-color:var(--rule)}
.rail-foot{
  margin-top:auto; padding-top:2rem;
  font-style:italic; font-size:.84rem; color:var(--muted); line-height:1.7;
}

.ledger-body{
  padding:clamp(44px,6vw,74px) clamp(26px,5vw,64px);
  max-width:900px;
}
.eyebrow{
  margin:0 0 .55rem;
  font-size:.8rem; color:var(--muted);
  font-feature-settings:"smcp" 1;
  letter-spacing:var(--track-label);
}
.page-title{
  font-family:var(--script);
  font-feature-settings:normal;
  font-weight:400;
  font-size:clamp(2.1rem,6vw,3.2rem);
  line-height:1.15;
  margin:0 0 .5rem;
}
.intro{
  max-width:56ch; margin:0 0 3rem;
  color:var(--muted); line-height:1.8;
}

/* ═══ Hotels — each in the A2 trim ═════════════════════════════════════ */
.hotels{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:32px;
}
.hotel{
  background:var(--ground);
  border:1px solid var(--rule);
  padding:30px 26px;
  display:flex; flex-direction:column;
}
.hotel p{margin:0}
.hotel-note{
  font-size:.76rem; color:var(--muted);
  font-feature-settings:"smcp" 1;
  letter-spacing:var(--track-label);
  margin-bottom:.7rem !important;
}
.hotel-name{
  font-size:1.14rem; font-weight:400;
  font-feature-settings:"smcp" 1;
  letter-spacing:var(--track-detail);
  margin:0 0 .15rem;
  line-height:1.35;
}
.hotel-dist{font-style:italic; font-size:.9rem; color:var(--muted); margin-bottom:1.1rem !important}
.hotel-rate{font-size:1.04rem}
.hotel-block{
  margin-top:.75rem !important;
  padding-top:.75rem;
  border-top:1px solid var(--rule);
  font-size:.9rem;
}
.hotel-block-label{
  display:block; color:var(--muted); font-size:.76rem;
  font-feature-settings:"smcp" 1; letter-spacing:var(--track-label);
}
.hotel-block-code{
  font-feature-settings:"lnum" 1;
  letter-spacing:var(--track-detail);
}
.hotel-nights,.hotel-caveat{
  margin-top:.9rem !important;
  font-size:.88rem; line-height:1.7; color:var(--muted);
}
.hotel-caveat{font-style:italic}
.hotel-contact{
  margin-top:1.2rem !important;
  font-size:.86rem; line-height:1.7; color:var(--muted);
}
.hotel-book{margin-top:auto !important; padding-top:1.6rem}
.hotel-book a{
  font-size:.86rem; text-decoration:none;
  font-feature-settings:"smcp" 1;
  letter-spacing:var(--track-name);
  border-bottom:1px solid var(--navy);
  padding-bottom:2px;
}
.hotel-book a:hover,.hotel-book a:focus-visible{opacity:.62}

/* ═══ Passphrase gate ══════════════════════════════════════════════════ */
/* Same centred card composition as home — this is the first thing a guest
   sees, so it should read as the save-the-date, not as a login screen. The
   input borrows the hairline rule rather than a box: a form field with a
   grey 3D border would be the only object on the site that isn't letterpress. */

.gate-inner{max-width:440px}

.gate-form{margin:2.1rem 0 0}

.gate-label{
  display:block;
  font-size:.82rem;
  font-feature-settings:"smcp" 1,"onum" 1;
  letter-spacing:var(--track-label);
  text-transform:lowercase;
  color:var(--muted);
  margin-bottom:1rem;
}

.gate-row{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:14px;
}

.gate-input{
  flex:1 1 auto;
  min-width:0;
  max-width:15rem;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule);
  border-radius:0;
  padding:.35rem .2rem;
  font-family:var(--serif);
  font-size:1.16rem;
  letter-spacing:var(--track-url);
  color:var(--navy);
  text-align:center;
}
.gate-input:focus{
  outline:none;
  border-bottom-color:var(--navy);
}
/* Focus is carried by the rule above, but that is a colour-only signal, so
   keyboard users get a real ring too. */
.gate-input:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:4px;
}

.gate-submit{
  flex:0 0 auto;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule);
  border-radius:0;
  padding:.35rem .1rem;
  font-family:var(--serif);
  font-size:.86rem;
  font-feature-settings:"smcp" 1,"onum" 1;
  letter-spacing:var(--track-label);
  text-transform:lowercase;
  color:var(--navy);
  cursor:pointer;
}
.gate-submit:hover,.gate-submit:focus-visible{border-bottom-color:var(--navy)}
.gate-submit:focus-visible{outline:2px solid var(--navy); outline-offset:4px}

.gate-error{
  margin:1.4rem 0 0 !important;
  font-style:italic;
  font-size:.94rem;
  color:var(--muted);
}

/* ═══ Responsive ═══════════════════════════════════════════════════════ */
@media (max-width:680px){
  .ledger{grid-template-columns:1fr; min-height:0}
  .rail{
    border-right:0; border-bottom:1px solid var(--rule);
    flex-direction:row; align-items:center; flex-wrap:wrap;
    gap:18px; padding:20px 22px;
  }
  .rail .mark .and{display:inline; margin:0 .3em}
  .mark-bar{display:none}
  .rail ul{flex-direction:row; gap:18px}
  .rail-foot{display:none}
  .card-page{min-height:0; padding-top:clamp(44px,12vw,80px)}
}

@media (prefers-reduced-motion:no-preference){
  a{transition:opacity .18s ease, border-color .18s ease}
}

@media print{
  .rail,.home-nav,.skip{display:none}
  body{background:#fff}
}