/* Shared rules for every Andrew + Jenny page (SITE-01, SITE-02, SITE-05).
   Tokens start from site/home-mockup.html. No page layout lives here (SITE-03):
   each page arranges itself. See .planning/phases/01-discovery-site-wide-rules/01-DIRECTION.md. */
/* Big Bird by Taylor Penton (bought 2026-10-25, Standard license) */
@font-face { font-family: "Big Bird"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/TAYBigBirdRegular.woff2") format("woff2"), url("fonts/TAYBigBirdRegular.woff") format("woff"); }
/* Cupid by Taylor Penton (bought 2026-10-25): body text */
@font-face { font-family: "Cupid"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/TAYCupid.woff2") format("woff2"), url("fonts/TAYCupid.otf") format("opentype"); }
/* Homemade Apple (Google Fonts, Apache 2.0), self-hosted so no page waits on another server */
@font-face { font-family: "Homemade Apple"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/homemade-apple-400.woff2") format("woff2"); }

:root {
  --paper: #ebe4d6;
  --ink: #141414;
  --red: #E94B2C;            /* tomato: Jenny chose one red for handwriting and buttons (q-red) */
  --caps: "Big Bird", "Arial Narrow", sans-serif;
  --hand: "Homemade Apple", cursive;
  --gutter: clamp(20px, 5vw, 72px);
  --ticker-h: 34px;          /* the black ticker above the nav */
  --book: "Cupid", Georgia, serif;   /* Taylor Penton handwriting, to sit with Big Bird */
  --mono: "Cupid", Georgia, serif;   /* the A + J monogram, in Cupid like the body text */
  /* a url inside a variable resolves against the stylesheet that USES it, so these two only
     work inside this file; pages spell out "assets/..." instead (main-event, rsvp) */
  --paper-texture: url("paper/paper-cream.webp");
  --x: url("x.svg");           /* the pencil X: RSVP choices, closing the mood board */

  /* palette accents and their one job (q-color-jobs) */
  --tomato: #E94B2C;         /* buttons, link underlines, handwriting */
  --pink: #F3A5B8;           /* small bold shapes, never behind text (s-color) */
  --butter: #F4D84A;         /* small bold shapes, never behind text or as a page background */
  --pool: #79B5DC;           /* small bold shapes, never behind text (s-color) */
  --green: #174B35;          /* small bold shapes, never behind text (s-color) */
  --mint: #71C5A1;           /* gift page buttons */
  --cobalt: #1F4BB8;         /* tried for Getting Around: Sleep; not used */
  --link: var(--tomato);     /* the underline; link text stays ink */
  --button: var(--tomato);   /* fill; lettering stays ink (4.83:1) */
  --photo-border: #f6f1e7;
  --rule: rgba(20, 20, 20, .22);
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper) var(--paper-texture) 0 0 / 600px repeat;
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--book);
  overflow-x: clip;
}
::selection { background: var(--ink); color: var(--paper); }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* links: ink text, tomato underline */
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* type roles */
/* Big Bird's capitals carry about .1em of space on their left; the shift lines the ink up
   with the text below */
.t-display { margin: 0; font: 300 clamp(2.6rem, 9vw, 5.5rem)/.95 var(--caps); letter-spacing: 0; text-transform: uppercase; text-wrap: balance; translate: -.1em 0; }
.t-label { margin: 0; font: 400 1rem/1.2 var(--caps); letter-spacing: .1em; text-transform: uppercase; }
.t-body { margin: 0; font: 400 1.0625rem/1.6 var(--book); max-width: 34em; }
/* handwriting: the script's tall loops reach well outside its line box, and Safari crops
   anything outside a rotated box, so the box gets room on every side (shifted back left
   so the words still line up with the text around them) */
.t-note { display: inline-block; margin: 0; padding: .35em .45em; translate: -.45em 0; font: 400 1.5rem/1.4 var(--hand); color: var(--red); transform: rotate(-3deg); }
.mono { font: 400 1.55rem/1 var(--mono); letter-spacing: 0; text-transform: none; text-decoration: none; }
.mono span { font-size: .62em; margin: 0 .3em; vertical-align: .14em; }

/* button: tomato fill, ink lettering */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
  background: var(--button); color: var(--ink); border: 0; border-radius: 0; text-decoration: none;
  font: 400 1rem/1 var(--caps); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: translate .12s ease-out, box-shadow .12s ease-out;
}
/* on hover the button lifts off the page like a paper card, a solid ink shadow behind it;
   pressing sets it back down flat. Links that are not live yet stay put. */
@media (hover: hover) {
  .btn:hover:not([aria-disabled="true"], :disabled) { translate: -3px -3px; box-shadow: 4px 4px 0 var(--ink); }
}
.btn:active:not([aria-disabled="true"], :disabled) { translate: 0 0; box-shadow: 0 0 0 var(--ink); transition-duration: .05s; }

/* photos only: thin cream border, soft shadow, straight on, no tape (c-08) */
.photo { border: 8px solid var(--photo-border); box-shadow: 0 8px 22px rgba(20, 20, 20, .22); }

/* tentative facts (SITE-05) show plainly to guests; no note (Jenny, s-facts) */

/* ---------- nav (SITE-01) ---------- */
/* the nav sits on a strip of plain paper frozen to the top of every page; once the page
   scrolls, a thin ink line separates it from what slides underneath (nav.js adds .is-stuck) */
.paperbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper) var(--paper-texture) 0 0 / 600px repeat;
  border-bottom: 1px solid transparent; transition: border-color .15s;
}
.paperbar.is-stuck { border-bottom-color: var(--ink); }

/* black ticker across the very top, in paper-colored letters; the track holds two identical
   halves, so sliding it left by one half loops without a seam */
.ticker { height: var(--ticker-h); overflow: hidden; background: var(--ink); color: var(--paper); }
.ticker-track { display: flex; width: max-content; height: 100%; align-items: center; animation: ticker 60s linear infinite; }
.ticker-track > span { flex: none; white-space: pre; padding-right: 1.2em; font: 400 1rem/1 var(--caps); letter-spacing: .1em; text-transform: uppercase; }
.ticker-track b { font-weight: 400; }
.ticker-track .w { word-spacing: .7em; } /* air between the words */
.ticker-track i { /* a round dot either side of the date, drawn rather than typed so it can be bigger */
  display: inline-block; width: 6px; height: 6px; margin: 0 22px; border-radius: 50%; background: currentColor;
  font-size: 0; translate: 0 -7px; } /* lifts it to the middle of the capitals */
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (max-width: 860px) { :root { --ticker-h: 30px; } .ticker-track > span { font-size: .9rem; } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: 1360px; margin: 0 auto; padding: 19px var(--gutter); /* even above and below, so the words sit in the middle of the strip */
}
.nav-side { display: flex; gap: clamp(28px, 5.5vw, 96px); }
.mono + .nav-side { justify-content: flex-end; }
.nav a { text-decoration: none; }
.nav .mono { font-size: clamp(1.8rem, 2.4vw, 2.3rem); translate: 0 .15em; } /* Cupid draws high in its line; this centres the ink */
.nav-side > * { font: 400 clamp(1rem, 1.15vw, 1.2rem)/1 var(--caps); letter-spacing: .08em; text-transform: uppercase; padding-block: 12px; }
/* the current page is circled by hand in tomato colored pencil (assets/circle.svg). The circle
   draws itself: a conic mask sweeps round from where the pencil starts (top left). It draws
   in on the current page when the page (or the phone menu) opens, and on any link under the
   pointer; leaving the link rubs it out. */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.nav-side a, .nav-menu a { position: relative; }
.nav-side a::before, .nav-menu a::before {
  content: ""; position: absolute; inset: -2px -18px -4px -16px; pointer-events: none;
  background: url("circle.svg") center / 100% 100% no-repeat; transform: rotate(-1.5deg);
  --sweep: 0deg; opacity: 0;
  -webkit-mask: conic-gradient(from -75deg, #000 var(--sweep), transparent 0);
          mask: conic-gradient(from -75deg, #000 var(--sweep), transparent 0);
  transition: opacity .2s ease-out, --sweep 0s .2s;
}
.nav a[aria-current="page"]::before { --sweep: 360deg; opacity: 1; animation: circle-in .7s cubic-bezier(.3, .7, .2, 1) .2s backwards; }
@media (hover: hover) {
  .nav-side a:hover::before { --sweep: 360deg; opacity: 1; transition: --sweep .5s cubic-bezier(.3, .7, .2, 1), opacity 0s; }
}
.nav-side a:focus-visible::before, .nav-menu a:focus-visible::before { --sweep: 360deg; opacity: 1; transition: --sweep .5s cubic-bezier(.3, .7, .2, 1), opacity 0s; }
@keyframes circle-in { from { --sweep: 0deg; } }
/* in the phone menu the current page's circle is already there: it was drawn when the page
   was tapped, so it stays put through closing and reopening the menu */
.nav-menu a[aria-current="page"]::before { animation: none; }
.nav-menu.is-picking a[aria-current="page"]::before { opacity: 0; animation: none; transition: opacity .25s ease-out; }
.nav-menu a.is-picked::before { --sweep: 360deg; opacity: 1; transition: --sweep .4s cubic-bezier(.3, .7, .2, 1), opacity 0s; }
@media (prefers-reduced-motion: reduce) { .nav a::before { animation: none !important; } }
.nav-toggle {
  display: none; justify-self: end; min-height: 44px; padding: 0 2px; background: none; border: 0; color: var(--ink); cursor: pointer;
  font: 400 1rem/1 var(--caps); letter-spacing: .08em; text-transform: uppercase;
}
.nav-menu { display: none; }

/* phone: A + J and Menu; Menu drops a panel under the bar (q-menu B, Home first) */
/* data-force="laptop" keeps the laptop bar on any screen (style sheet demo only) */
@media (max-width: 860px) {
  .nav:not([data-force="laptop"]) { grid-template-columns: 1fr auto; padding-block: 13px; }
  .nav:not([data-force="laptop"]) .mono { order: -1; }
  .nav:not([data-force="laptop"]) .nav-side { display: none; }
  .nav:not([data-force="laptop"]) .nav-toggle { display: inline-flex; align-items: center; }
  .nav:not([data-force="laptop"]) .nav-menu:not([hidden]) {
    display: flex; flex-direction: column; gap: 4px; position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
    padding: 14px var(--gutter) 22px; background: var(--paper) var(--paper-texture) 0 0 / 600px repeat;
    border-bottom: 1px solid var(--ink); box-shadow: 0 14px 24px rgba(20, 20, 20, .14);
  }
  .nav:not([data-force="laptop"]) .nav-menu a { align-self: flex-start; font: 300 1.6rem/1.2 var(--caps); letter-spacing: 0; text-transform: uppercase; padding-block: 8px; }
}
/* the same phone rules, forced, so a style sheet can show the phone bar on a laptop */
.nav[data-force="phone"] { grid-template-columns: 1fr auto; padding-block: 13px; }
.nav[data-force="phone"] .mono { order: -1; }
.nav[data-force="phone"] .nav-side { display: none; }
.nav[data-force="phone"] .nav-toggle { display: inline-flex; align-items: center; }
.nav[data-force="phone"] .nav-menu:not([hidden]) {
  display: flex; flex-direction: column; gap: 4px; position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
  padding: 14px var(--gutter) 22px; background: var(--paper) var(--paper-texture) 0 0 / 600px repeat;
  border-bottom: 1px solid var(--ink); box-shadow: 0 14px 24px rgba(20, 20, 20, .14);
}
.nav[data-force="phone"] .nav-menu a { align-self: flex-start; font: 300 1.6rem/1.2 var(--caps); letter-spacing: 0; text-transform: uppercase; padding-block: 8px; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* copy buttons (copy.js): a red "copied!" is written beside the button, left to right,
   then fades */
.has-copied { position: relative; }
.copied {
  position: absolute; left: calc(100% + 14px); top: 50%; white-space: nowrap; pointer-events: none;
  font: 400 1.35rem/1.4 var(--hand); color: var(--red); letter-spacing: 0; text-transform: none;
  transform: translateY(-50%) rotate(-4deg); clip-path: inset(-20% 100% -20% 0); opacity: 0;
}
.copied.is-on { animation: copied-write .45s cubic-bezier(.3, .7, .2, 1) forwards, copied-fade .5s ease-in 1.8s forwards; }
@keyframes copied-write { from { clip-path: inset(-20% 100% -20% 0); opacity: 1; } to { clip-path: inset(-20% -10% -20% 0); opacity: 1; } }
@keyframes copied-fade { from { opacity: 1; clip-path: inset(-20% -10% -20% 0); } to { opacity: 0; clip-path: inset(-20% -10% -20% 0); } }
@media (prefers-reduced-motion: reduce) {
  .copied.is-on { animation: copied-fade .5s ease-in 1.8s backwards; opacity: 0; clip-path: none; }
}