/* ═══════════════════════════════════════════════
   OBERLANDER × YOUNG · COLORS & TYPE
   Friday, May 14, 2027 · Mt. Woodson Castle, Ramona CA
   Light, warm, print-first · Garamond lineage + copperplate script
   Palette: olive and blush carry the paper, orange carries the flowers.
   THE entry point. Link this first in any wedding artifact.
   ═══════════════════════════════════════════════ */

/* ── FONTS ──
   All three are OFL and free to bundle. CDN import documented here;
   drop woff2 into fonts/ and swap to @font-face before sending to a printer.

   Pinyon Script       copperplate engraving revival. Names and script accents ONLY.
   Cormorant Garamond  display. Headings, large type, small caps.
   EB Garamond         body. Details, small print. Holds up at 9pt on paper.
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Pinyon+Script&display=swap');

:root {
  /* ══ BRAND COLORS ══
     Every hex below was SAMPLED from David and Carlie's own inspiration
     images (see README "Sources"). None invented. Hue angles are the
     measured values; saturation and value are set for print and screen. */

  /* ── STRUCTURE: the paper. Olive + blush. ── */
  --woy-olive:        #65692B;  /* THE signature. Envelopes, ribbon, headings.  h=64  style/IMG_1154 envelope */
  --woy-olive-deep:   #3A3813;  /* Body ink. Darkest value in the system.       h=57  style/IMG_1154 shadow  */
  --woy-olive-pale:   #BEBF9E;  /* Rules, tints, quiet fills.                   h=62  style/IMG_1153 ground  */
  --woy-blush:        #E8C9CE;  /* Blush paper stock. The soft counterweight.   h=350 style/IMG_1154 RSVP    */
  --woy-blush-deep:   #C98A97;  /* Deeper blush. Decorative only, never text.   h=345 derived from blush     */

  /* ── ENERGY: the flowers. Orange leads. ── */
  --woy-orange:       #D06629;  /* Ranunculus. The lead accent.                 h=22  florals/IMG_1148       */
  --woy-marigold:     #DF9D46;  /* Marigold, garden roses.                      h=34  florals/IMG_1148       */
  --woy-coral:        #CD5340;  /* Coral rose, the red end of the florals.      h=9   florals/IMG_1150       */

  /* ── METAL, PAPER, AND THE OPTIONAL BLUE ── */
  --woy-gold:         #B9A05A;  /* Foil and engraved line. Antique, not yellow. h=44  style/IMG_1151         */
  --woy-cream:        #F7F2E7;  /* Uncoated paper. The default ground.                                       */
  --woy-delphinium:   #8FB0D8;  /* OPEN DECISION. In all 3 floral images, in    h=215 florals/IMG_1148       */
                                /* neither stated preference. See README.                                    */

  /* ══ LOCKED: THE INVITATION SUITE ══
     David locked this scheme on 2026-08-29 ("lock that as the main design").
     It is a WARM-ORANGE PAPER scheme, deliberately narrower than the full
     palette above: the invitation is one object, and it holds three colors.
     The sampled olive / blush / floral palette above still governs everything
     ELSE (site, signage, day-of, the flowers themselves). Do not mix the two
     on a single piece.

     Every printed piece in the suite -- invitation, save-the-date, details,
     reply -- uses these four and nothing else. */
  --woy-card-bg:      #F7DFC4;  /* the ground. Warm orange paper.                     */
  --woy-card-frame:   #D19C63;  /* the traced frame line. 1.89:1, DECORATIVE ONLY.    */
  --woy-card-ink:     #4E2A12;  /* body ink on card. 9.80:1 on the ground.            */
  --woy-card-accent:  #8A4A1C;  /* names, eyebrows. 5.30:1. Passes AA at every size.  */
  --woy-card-light:   #FCF1E4;  /* letterpress highlight in the traced art. Not a UI  */
                                /* color -- it lives inside the PNG, listed so the    */
                                /* printer can match it.                              */
  --woy-card-back:    #ECCBA7;  /* the back's ghosted line = frame re-inked at 30%.   */

  /* Card geometry. Both alternatives are 5 x 7in portrait. */
  --woy-card-w:       5in;
  --woy-card-h:       7in;
  --woy-card-bleed:   0.125in;  /* ALT only. A die-cut needs no bleed.                */

  /* The live text well, as a percentage inset of the card. These two numbers
     differ between the alternatives because the traced frame sits tighter on
     the die-cut than it does inside a rectangle's margin. Changing them moves
     ALL the copy at once, which is the point. */
  --woy-well-diecut-x: 23.5%;
  --woy-well-diecut-t: 21.5%;
  --woy-well-diecut-b: 18.5%;
  --woy-well-rect-x:   26.2%;
  --woy-well-rect-t:   24.4%;
  --woy-well-rect-b:   21.7%;

  /* ── SURFACES ── */
  --woy-bg:           var(--woy-cream);
  --woy-bg-elevated:  #FFFFFF;
  --woy-bg-sink:      #F0E9DA;   /* quiet band inside a cream page */
  --woy-bg-reverse:   var(--woy-olive);

  /* ── TEXT ── */
  --woy-fg:           var(--woy-olive-deep);   /* 10.72:1 on cream. Body ink.     */
  --woy-fg-muted:     var(--woy-olive);        /*  5.21:1 on cream. Secondary.    */
  --woy-fg-on-olive:  var(--woy-cream);        /*  5.21:1 on olive. Reversed.     */
  --woy-fg-accent:    var(--woy-orange);       /*  DISPLAY ONLY, 24px+/bold.      */

  /* ── SEMANTIC ALIASES ── */
  --woy-border:        1px solid rgba(58, 56, 19, 0.18);
  --woy-border-strong: 1px solid var(--woy-olive);
  --woy-rule:          1px solid var(--woy-olive-pale);
  --woy-rule-gold:     1px solid var(--woy-gold);

  /* ══ TYPOGRAPHY ══ */
  --woy-font-script:  'Pinyon Script', 'Snell Roundhand', cursive;
  --woy-font-display: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --woy-font-body:    'EB Garamond', Garamond, 'Times New Roman', serif;

  /* Type scale. Fluid on screen, fixed in print.css. */
  --woy-text-script:  clamp(2.75rem, 7vw, 5.5rem);   /* the two names, once per piece */
  --woy-text-hero:    clamp(2rem, 5vw, 3.5rem);
  --woy-text-h1:      clamp(1.75rem, 3.5vw, 2.5rem);
  --woy-text-h2:      clamp(1.375rem, 2.5vw, 1.75rem);
  --woy-text-h3:      1.1875rem;
  --woy-text-body:    1.0625rem;
  --woy-text-small:   0.9375rem;
  --woy-text-caption: 0.8125rem;
  --woy-text-label:   0.75rem;    /* letterspaced small caps */

  --woy-weight-light:   300;
  --woy-weight-regular: 400;
  --woy-weight-medium:  500;
  --woy-weight-semi:    600;

  --woy-leading-tight: 1.15;
  --woy-leading-snug:  1.35;
  --woy-leading-body:  1.6;
  --woy-leading-loose: 1.75;

  --woy-tracking-label: 0.18em;   /* small caps labels */
  --woy-tracking-hero:  0.02em;
  --woy-tracking-body:  0;

  /* ══ SPACING ══ 4px rhythm */
  --woy-space-2xs: 0.25rem;
  --woy-space-xs:  0.5rem;
  --woy-space-sm:  0.75rem;
  --woy-space-md:  1rem;
  --woy-space-lg:  1.5rem;
  --woy-space-xl:  2.5rem;
  --woy-space-2xl: 4rem;
  --woy-space-3xl: 6rem;

  /* ══ LAYOUT ══ */
  --woy-container:  68rem;
  --woy-measure:    36rem;   /* 65-75 characters at body size */
  --woy-radius-sm:  2px;
  --woy-radius-md:  4px;
  --woy-radius-pill: 999px;

  /* ══ MOTION ══ */
  --woy-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --woy-dur-fast: 160ms;
  --woy-dur-mid:  260ms;
  --woy-dur-slow: 420ms;

  /* ══ SHADOWS ══ paper lift, never UI drop shadow */
  --woy-shadow-card:  0 1px 2px rgba(58,56,19,.06), 0 8px 24px rgba(58,56,19,.07);
  --woy-shadow-lift:  0 2px 4px rgba(58,56,19,.08), 0 16px 40px rgba(58,56,19,.10);
}

/* ═══ SEMANTIC BASE ═══ */

body {
  margin: 0;
  background: var(--woy-bg);
  color: var(--woy-fg);
  font-family: var(--woy-font-body);
  font-size: var(--woy-text-body);
  line-height: var(--woy-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--woy-font-display);
  font-weight: var(--woy-weight-light);
  line-height: var(--woy-leading-tight);
  letter-spacing: var(--woy-tracking-hero);
  color: var(--woy-fg);
  margin: 0 0 var(--woy-space-md);
}

h1 { font-size: var(--woy-text-h1); }
h2 { font-size: var(--woy-text-h2); }
h3 { font-size: var(--woy-text-h3); font-weight: var(--woy-weight-medium); }

p {
  margin: 0 0 var(--woy-space-md);
  max-width: var(--woy-measure);
}

a {
  color: var(--woy-olive);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--woy-dur-fast) var(--woy-ease);
}
a:hover { color: var(--woy-orange); }
a:focus-visible {
  outline: 2px solid var(--woy-olive);
  outline-offset: 3px;
  border-radius: var(--woy-radius-sm);
}

/* The two names. Script is for THIS and nothing else. */
.woy-names {
  font-family: var(--woy-font-script);
  font-size: var(--woy-text-script);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--woy-olive);
  /* Pinyon has long descenders. Never crowd it. */
  padding-block: 0.12em;
}

/* Letterspaced small caps. The workhorse label. */
.woy-label {
  font-family: var(--woy-font-body);
  font-size: var(--woy-text-label);
  font-variant-caps: all-small-caps;
  text-transform: uppercase;
  letter-spacing: var(--woy-tracking-label);
  font-weight: var(--woy-weight-medium);
  color: var(--woy-fg-muted);
  line-height: 1.4;
}

.woy-eyebrow { /* label, but above a heading */
  display: block;
  margin-bottom: var(--woy-space-xs);
}

.woy-caption {
  font-size: var(--woy-text-caption);
  color: var(--woy-fg-muted);
  line-height: var(--woy-leading-snug);
}

/* Engraved hairline rule with a centered mark. */
.woy-divider {
  display: flex;
  align-items: center;
  gap: var(--woy-space-md);
  margin: var(--woy-space-xl) 0;
  color: var(--woy-gold);
}
.woy-divider::before,
.woy-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* ── PRINT-SAFE DEFAULTS ──
   Full page geometry lives in print.css. These are the guards that
   must hold even if only this file is linked. */
@media print {
  :root { --woy-bg: #FFFFFF; }
  body {
    background: #FFFFFF;
    color: #000000;              /* black text, per the ARIA contrast rule */
    font-size: 10.5pt;
    line-height: 1.5;
  }
  .print-hide { display: none !important; }
  a { color: #000000; text-decoration: none; }
  h1, h2, h3 { break-after: avoid-page; }
  p, blockquote { orphans: 3; widows: 3; }
}

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