/* ===========================================================
   OCEANIA & EKO — v2
   Converged from feedback. Shared system, do not restyle in pages.
   =========================================================== */

:root{
  /* ---- GROUND ----
     White, ivory and blue is the whole site. Olive is gone from the
     shared system: it now belongs to the Traditional page only. */
  --white:#FDFCFA;
  --cream:#F6F4EE;      /* ivory, the page ground */
  --paper:#FCFBF7;
  --stone:#EDEAE1;
  --linen:#E2DCCD;

  /* ---- BLUE, the house colour ---- */
  --navy:#24395C;
  --navy-deep:#1A2B45;
  --blue-mid:#4C6485;
  --blue-pale:#DDE3EC;

  /* ---- METAL AND ACCENT ---- */
  --brass:#B8965A;
  --brass-lt:#D6B585;
  --brass-dk:#8A6B34;

  /* ---- TRADITIONAL ONLY. Never used outside traditional.html,
     aso-ebi.html and the traditional opening sequence. ---- */
  --garnet:#7A1F2B;
  --olive:#4A5233;
  --terracotta:#B4593A;
  --teal:#2E6B6B;
  --woven:#E8DCC4;

  --ink:#22262E;
  --ink-60:rgba(34,38,46,.60);
  --ink-40:rgba(34,38,46,.40);
  --ink-18:rgba(34,38,46,.18);
  --ink-10:rgba(34,38,46,.10);

  --serif:'Cormorant Garamond',Garamond,serif;
  --caps:'Cinzel',Garamond,serif;
  --script:'Pinyon Script',cursive;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;

  --col:660px;
  --col-wide:1180px;
  --gut:clamp(20px,5vw,64px);
  --band:clamp(72px,11vw,140px);
  --head-h:64px;

  /* ---- SHADOWS ----
     Objects sit ON the surface. Tight, short, close to the object. */
  --sh-rest:
    0 1px 1px rgba(34,38,46,.15),
    0 2px 4px rgba(34,38,46,.09),
    0 6px 10px rgba(34,38,46,.05);
  --sh-lift:
    0 1px 1px rgba(34,38,46,.17),
    0 3px 6px rgba(34,38,46,.11),
    0 10px 18px rgba(34,38,46,.06);
  --sh-flat:
    0 1px 1px rgba(34,38,46,.13),
    0 2px 3px rgba(34,38,46,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background-color:var(--cream);
  /* resolved relative to THIS stylesheet, not to the page */
  background-image:url('linen-tile.webp');
  background-size:580px auto;
  background-repeat:repeat;
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* the linen must whisper, not shout */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:rgba(242,238,229,.72);
}
body > *{position:relative;z-index:1}

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

/* ===========================================================
   TYPE
   =========================================================== */

.eyebrow{
  font-family:var(--caps);font-size:clamp(9.5px,1vw,11px);
  letter-spacing:.34em;text-transform:uppercase;color:var(--ink-40);
  margin:0 0 22px;font-weight:400;
}
.eyebrow--brass{color:var(--brass-dk)}
.eyebrow--light{color:rgba(242,238,229,.58)}

h1,h2,h3{font-weight:400;margin:0}

/* the couple's names are ALWAYS script */
.names{
  font-family:var(--script);
  font-size:clamp(50px,10vw,116px);
  line-height:1.06;letter-spacing:0;
}
.names__and{
  display:block;font-family:var(--serif);font-style:italic;
  font-size:.26em;line-height:1.8;color:inherit;opacity:.72;
}
.script{font-family:var(--script);line-height:1.15}

.display{font-family:var(--serif);font-size:clamp(40px,6.4vw,74px);line-height:1.12}

.title{
  font-family:var(--caps);font-size:clamp(18px,2.4vw,27px);
  letter-spacing:.2em;text-transform:uppercase;line-height:1.55;
}
.subtitle{
  font-family:var(--caps);font-size:clamp(10.5px,1.2vw,13px);
  letter-spacing:.28em;text-transform:uppercase;line-height:2;color:var(--ink-60);
}
.lede{
  font-size:clamp(20px,2.1vw,24px);line-height:1.75;font-style:italic;
  color:var(--ink-60);max-width:36ch;
}
p{margin:0 0 1.5em}
p:last-child{margin-bottom:0}

.small{
  font-family:var(--sans);font-size:11.5px;line-height:1.9;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);
}
.numeral{
  font-family:var(--caps);font-size:clamp(10px,1.1vw,12px);
  letter-spacing:.24em;color:var(--brass-dk);display:block;margin-bottom:14px;
}
a{color:inherit}

/* ---------- EMBOSS ----------
   Use liberally: section headers on ancillary pages, mini headers,
   numerals, the closing monogram. Pressed in, no ink. */
.emboss{
  color:#E4DFD2;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 -1px 1px rgba(34,38,46,.20),
    0 2px 2px rgba(255,255,255,.5);
}
.emboss--deep{
  color:#DED8C8;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 -1px 1px rgba(34,38,46,.26),
    0 -2px 3px rgba(34,38,46,.13),
    0 3px 3px rgba(255,255,255,.55);
}
/* ---- EMBOSS ----
   Pressed into the paper. The fill is a DARKER CREAM than the page, never
   a colour: that is what makes it read as relief rather than as tinted
   text. One treatment, two depths. Nothing else. */
/* the colour variants are retired. Aliased so existing markup keeps
   working and nothing has to be hunted through nine pages. */
.emboss--navy,.emboss--gold,.emboss--ivory,.emboss--garnet{
  color:#E4DFD2;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 -1px 1px rgba(34,38,46,.20),
    0 2px 2px rgba(255,255,255,.5);
}

/* an embossed rule, for mini headers */
.emboss-rule{
  width:100%;height:2px;border:0;margin:0;
  background:linear-gradient(rgba(35,31,28,.10),rgba(255,255,255,.9));
}

.rule{width:64px;height:1px;background:var(--ink-18);border:0;margin:34px auto}
.rule--brass{background:var(--brass);opacity:.55}
.rule--full{width:100%;margin:0}
.rule--light{background:rgba(242,238,229,.3)}

/* ===========================================================
   LAYOUT
   =========================================================== */
.wrap{width:100%;max-width:var(--col);margin:0 auto;padding-inline:var(--gut)}
.wrap--wide{max-width:var(--col-wide)}
.section{padding-block:var(--band)}
.center{text-align:center}
.band{background:rgba(231,224,210,.75)}
.band--navy-deep{background:var(--navy-deep);color:var(--white)}
.band--pale{background:var(--blue-pale)}
.band--navy{background:var(--navy);color:var(--white)}
.band--navy-deep .eyebrow,.band--navy .eyebrow{color:rgba(242,238,229,.5)}
.band--navy-deep .subtitle,.band--navy .subtitle{color:rgba(242,238,229,.72)}
.band--navy-deep .rule,.band--navy .rule{background:rgba(242,238,229,.3)}

/* ===========================================================
   HEADER — position and item placement kept from v1
   =========================================================== */
.head{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--head-h);
  display:flex;align-items:center;background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease;
}
.head.is-set{background:rgba(242,238,229,.95);backdrop-filter:blur(8px);border-bottom-color:var(--ink-10)}
.head.on-dark:not(.is-set) .head__mark,
.head.on-dark:not(.is-set) .head__nav a,
.head.on-dark:not(.is-set) .head__toggle{color:var(--cream)}
.head__in{width:100%;max-width:var(--col-wide);margin:0 auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.head__mark{font-family:var(--caps);font-size:13px;letter-spacing:.3em;
  text-decoration:none;text-transform:uppercase;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;padding-right:14px}
.head__nav{display:flex;gap:clamp(14px,1.9vw,28px)}
.head__nav a{font-family:var(--caps);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;position:relative;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;padding-block:0}
/* the rule sits just under the word, not at the foot of the 44px target */
.head__nav a::after{content:"";position:absolute;left:0;right:0;bottom:13px;height:1px;
  background:currentColor;opacity:0;transform:scaleX(.4);transition:.35s ease}
.head__nav a:hover::after,.head__nav a[aria-current="page"]::after{opacity:.55;transform:scaleX(1)}
.head__toggle{display:none;background:none;border:0;padding:14px 0 14px 14px;min-height:44px;
  cursor:pointer;color:inherit;font-family:var(--caps);font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase}
.menu{position:fixed;inset:0;z-index:59;background:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.menu.is-open{opacity:1;visibility:visible}
.menu a{font-family:var(--caps);font-size:14px;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;padding:13px 20px}
.menu__foot{margin-top:26px}
@media (max-width:1040px){.head__nav{display:none}.head__toggle{display:block}}

/* ===========================================================
   HERO
   =========================================================== */
.hero{position:relative;min-height:min(92vh,860px);display:grid;place-items:center;
  overflow:hidden;text-align:center;padding-block:calc(var(--head-h) + 40px) 64px}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__veil{position:absolute;inset:0}
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--col);padding-inline:var(--gut)}
.hero--light .hero__in{color:var(--cream)}
.hero--tall{min-height:min(100vh,940px)}
.hero--short{min-height:min(58vh,560px)}

/* ===========================================================
   PHYSICAL OBJECTS
   An object on the page is a photograph sitting on the surface.
   Tight shadow, square to the frame, never floating.
   =========================================================== */
.object{position:relative;margin-inline:auto;width:100%;max-width:560px}
.object img{width:100%;box-shadow:var(--sh-rest)}
.object--lift img{box-shadow:var(--sh-lift)}
.object--flat img{box-shadow:var(--sh-flat)}
.object__type{position:absolute;inset:14% 15%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:2px}
.object--wide{max-width:760px}
.object--sm{max-width:360px}

/* an empty slot, for imagery not yet supplied */
.slot{
  position:relative;width:100%;background:rgba(231,224,210,.6);
  box-shadow:inset 0 0 0 1px var(--ink-10);
  display:grid;place-items:center;text-align:center;padding:24px;
}
.slot::after{
  content:attr(data-label);
  font-family:var(--sans);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-40);line-height:2;max-width:24ch;
}
.slot--3x2{aspect-ratio:3/2}
.slot--4x5{aspect-ratio:4/5}
.slot--1x1{aspect-ratio:1/1}
.slot--16x9{aspect-ratio:16/9}

/* ---- the fold, borrowed from the Dispatch ---- */
.fold{position:relative}
.fold::after{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:80px;transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(35,31,28,0) 0%, rgba(35,31,28,.05) 42%, rgba(35,31,28,.09) 49.5%,
    rgba(255,255,255,.5) 50.5%, rgba(255,255,255,.14) 58%, rgba(35,31,28,0) 100%);
}
@media (max-width:700px){.fold::after{display:none}}

/* ===========================================================
   COMPONENTS
   =========================================================== */
.timetable{list-style:none;margin:0;padding:0}
.timetable li{display:flex;align-items:baseline;gap:14px;padding-block:16px;border-bottom:1px solid var(--ink-10)}
.timetable li:last-child{border-bottom:0}
.timetable time{font-family:var(--caps);font-size:13px;letter-spacing:.16em;flex:0 0 auto;min-width:70px}
.timetable .lead{flex:1 1 auto;border-bottom:1px dotted var(--ink-18);transform:translateY(-4px)}
.timetable .what{flex:0 0 auto;font-size:19px}
@media (max-width:560px){.timetable .lead{display:none}.timetable li{flex-wrap:wrap;gap:4px}.timetable .what{flex:1 1 100%}}

.swatches{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,44px);justify-content:center;margin:0;padding:0;list-style:none}
.swatches li{text-align:center}
.swatches .chip{width:64px;height:64px;border-radius:50%;margin:0 auto 12px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), var(--sh-flat)}

.tiles{display:grid;gap:1px;background:var(--ink-10);border:1px solid var(--ink-10);grid-template-columns:repeat(2,1fr)}
.tile{background:var(--cream);padding:clamp(28px,4vw,44px);text-decoration:none;display:block;transition:background .35s ease}
.tile:hover{background:var(--paper)}
.tile__n{font-family:var(--caps);font-size:10.5px;letter-spacing:.24em;color:var(--brass-dk);text-transform:uppercase}
.tile__t{font-family:var(--caps);font-size:clamp(14px,1.6vw,17px);letter-spacing:.18em;text-transform:uppercase;margin:14px 0 10px}
.tile__d{font-size:17px;color:var(--ink-60);line-height:1.7}
@media (max-width:700px){.tiles{grid-template-columns:1fr}}

.btn{display:inline-block;font-family:var(--caps);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;text-decoration:none;padding:17px 40px;cursor:pointer;
  background:var(--navy);color:var(--white);border:0;transition:background .3s ease;min-height:46px}
.btn:hover{background:var(--navy-deep)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-18)}
.btn--ghost:hover{background:var(--paper)}

.field{margin-bottom:34px;text-align:left}
.field label{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-40);margin-bottom:8px}
.field input:not([type=radio]):not([type=checkbox]),.field select,.field textarea{
  width:100%;border:0;border-bottom:1px solid var(--ink-18);background:transparent;
  font-family:var(--serif);font-size:19px;color:var(--ink);padding:11px 0;min-height:46px;
  border-radius:0;-webkit-appearance:none;appearance:none}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--navy)}
.choice{display:flex;gap:28px;flex-wrap:wrap}
.choice label{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:18px;
  letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer;min-height:44px;padding-block:4px}
.choice input[type=radio],.choice input[type=checkbox]{width:17px;height:17px;min-height:0;
  flex:0 0 auto;margin:0;accent-color:var(--navy);-webkit-appearance:auto;appearance:auto}

.note{background:var(--paper);padding:clamp(30px,4.5vw,52px);box-shadow:var(--sh-flat)}

/* ===========================================================
   FOOTER
   =========================================================== */
.foot{background:var(--navy);color:var(--white);padding-block:clamp(56px,8vw,92px);text-align:center}
.foot__mark{font-family:var(--script);font-size:46px;line-height:1;color:var(--brass-lt);margin-bottom:22px}
.foot__dates{display:flex;gap:clamp(24px,6vw,72px);justify-content:center;flex-wrap:wrap;margin:30px 0}
.foot__dates div{min-width:150px}
.foot__dates dt{font-family:var(--caps);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(242,238,229,.5);margin-bottom:6px}
.foot__dates dd{margin:0;font-size:19px}
.foot__nav{display:flex;gap:0 clamp(6px,2vw,18px);justify-content:center;flex-wrap:wrap;margin-top:26px}
.foot__nav a{font-family:var(--caps);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:rgba(242,238,229,.72);
  display:inline-flex;align-items:center;min-height:44px;padding-inline:6px}
.foot__nav a:hover{color:var(--cream)}
.foot__tag{margin-top:34px;font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(242,238,229,.45)}

/* ===========================================================
   MICRO INTERACTIONS
   =========================================================== */
.rv{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.10s}.rv-d2{transition-delay:.20s}.rv-d3{transition-delay:.30s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

::selection{background:rgba(36,57,92,.14)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* ===========================================================
   GUEST TIER
   Guests invited only to the traditional never see white wedding
   links. Hidden in CSS so there is no flash before the script runs;
   the attribute is set on <html> before first paint.
   =========================================================== */
html[data-tier="traditional"] [data-white]{display:none !important}


/* ===========================================================
   NO DARK OVERLAYS
   The client's rule: no dark bits, no dark overlays, no vignettes.
   Heroes must use light photographs and carry ink type, or a pale
   scrim at most. These utilities exist so nobody hand rolls a dark
   gradient again.
   =========================================================== */
.scrim{position:absolute;inset:0;pointer-events:none}
.scrim--ivory{background:linear-gradient(rgba(246,244,238,.72),rgba(246,244,238,.46))}
.scrim--ivory-strong{background:rgba(246,244,238,.82)}
.scrim--white{background:linear-gradient(rgba(253,252,250,.78),rgba(253,252,250,.5))}
/* type over a light photograph is ink, never cream */
.hero--onlight .hero__in{color:var(--ink)}
.hero--onlight .eyebrow{color:var(--ink-40)}
.hero--onlight .subtitle{color:var(--ink-60)}