/* ===========================================================
   THE BRAND LAYER
   OE-v3.1 "Cream and Navy" | 31 July 2026 | see VERSION.md before editing
   Oceania & Eko, December 2026

   Loaded after site.css, before legibility.css. It exists for the
   same reason legibility.css does: the brief forbids editing
   site.css, and these are decisions that must hold on every page
   rather than be retyped into ten style blocks and drift.

   site.css        the original system, untouched
   brand.css       this file: the palette and the type, per the
                   client's references
   legibility.css  the accessibility floor, which must win last

   WHAT CHANGED AND WHY
   The reference images are cream on cream on cream, with blind
   embossed script, gold foil, and a deep navy used as a whole solid
   panel rather than as trim. The site as built had a pale blue in it
   and a mid blue, neither of which appear anywhere in the references,
   and its ivory ran cool. So:

     - three creams, warmer than before, and more white in the mix
     - the pale blue and the mid blue are gone. They are aliased
       rather than deleted so that existing markup keeps working:
       .band--pale was a light blue band on four pages and is now
       simply a lighter cream
     - navy is the only accent, and it is darker than it was so it
       reads as the near-black of the "Rich Bleu" reference
     - gold is a foil colour, for the emboss and small marks
   =========================================================== */

/* ---- THE SCRIPT ---------------------------------------------------
   La Graziela Script, chosen from the specimen sheet.

   LICENCE, checked against Letterhend Studio's own READ THIS.pdf:
   free for PERSONAL USE, commercial use requires a purchase. A family's
   own wedding site is personal use, and the couple have confirmed that
   reading, so the demo file stays.

   The one place worth watching is the Aso Ebi page, which takes money.
   That is cost recovery on cloth for a family wedding rather than a
   business trading, but it is the only part of this site where the
   "no commercial use" line could ever be argued, and it is worth the
   30 dollars to the foundry if that ever stops being obvious.
   Full version: letterhend.com/product/la-graziela-script-font/

   WHAT THE DEMO ACTUALLY LACKS, which matters more day to day:
   104 glyphs against the full font's ligatures, stylistic alternates,
   swashes and multilingual coverage. Two characters are missing that
   this site uses elsewhere, so never set them in the script face:
   the curly apostrophe and the middle dot. Straight apostrophes,
   the full alphabet, the digits and the ampersand are all present. */
@font-face{
  font-family:'La Graziela';
  src:url('fonts/la-graziela.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---- THE CREAMS ----
     Three of them, warm, sampled to sit together without banding.
     --white is kept for the few places that need to read as paper
     lifted off the page rather than as the page itself. */
  --white:#FEFDFB;
  --paper:#FBF9F4;
  --cream:#F4F0E6;
  --stone:#EAE4D6;
  --linen:#DED6C4;

  /* ---- THE ACCENT, and there is only one ----
     Near-black navy, as in the reference. Used as a solid ground for
     a whole panel, for the RSVP action, and for nothing else. */
  --navy:#16213C;
  --navy-deep:#0E1628;

  /* The two blues that are gone. Aliased, not deleted, so that any
     markup still asking for them gets cream instead of a colour the
     client has rejected. .band--pale is the only live use. */
  --blue-pale:#F0EBDF;
  --blue-mid:#16213C;

  /* ---- THE METAL ----
     Gold foil, as pressed into the reference cards. --brass-dk is the
     reading weight and is what .tbc uses; it is dark enough to clear
     4.5:1 on cream, which the old brass did not. */
  --brass:#B08D4F;
  --brass-lt:#D6B98A;
  --brass-dk:#6F5526;

  /* ---- INK ----
     Warmer and darker than the old blue-grey ink, to sit on cream
     rather than on the cool ivory the site started from. */
  --ink:#1A1A18;
  --ink-60:rgba(26,26,24,.62);
  --ink-40:rgba(26,26,24,.42);
  --ink-18:rgba(26,26,24,.18);
  --ink-10:rgba(26,26,24,.10);

  --script:'La Graziela','Pinyon Script',cursive;
}

/* The page ground. site.css sets a cream veil over the linen tile on
   a fixed body::before; the new cream is warmer and lighter, so the
   veil is restated here to match or the tile would read cooler than
   every panel sitting on it. */
body{background-color:var(--cream)}
body::before{background:rgba(244,240,230,.78)}

/* ---- THE SCRIPT, WHERE IT IS SET ---------------------------------
   La Graziela runs small for its point size and sits high on the
   baseline, so the names need more size and less leading than Pinyon
   did to hold the same optical weight. */
.names{
  font-family:var(--script);
  font-size:clamp(58px,11.5vw,132px);
  line-height:1.0;
}
.names__and{font-size:.30em;line-height:1.5}
.script,.foot__mark{font-family:var(--script)}
.foot__mark{font-size:54px;line-height:1.1}

/* ---- EMBOSS, ON THE NEW CREAM -------------------------------------
   The reference is a blind deboss on cream: no ink at all, the letter
   read entirely from the light catching its edge. The fill is a
   darker cream than the page, never a colour, and the highlight sits
   below the letter as it does when paper is pressed from behind.
   Retuned to the warmer ground. */
.emboss,
.emboss--navy,.emboss--gold,.emboss--ivory,.emboss--garnet{
  color:#E6DFCE;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 -1px 1px rgba(26,26,24,.20),
    0 2px 2px rgba(255,255,255,.5);
}
.emboss--deep{
  color:#E0D8C4;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 -1px 1px rgba(26,26,24,.26),
    0 -2px 3px rgba(26,26,24,.13),
    0 3px 3px rgba(255,255,255,.55);
}
/* the ink press, for headings that carry a fact */
.emboss--read{
  color:var(--navy);
  text-shadow:
    0 1px 0 rgba(255,255,255,.92),
    0 -1px 1px rgba(26,26,24,.10);
}

/* ---- THE NAVY PANEL ----------------------------------------------
   One accent, used whole. Both band classes now resolve to the same
   near-black navy so a page cannot accidentally introduce a second
   blue by choosing the other one. */
.band--navy,.band--navy-deep{background:var(--navy);color:var(--paper)}
.band--pale{background:var(--blue-pale)}
.foot{background:var(--navy)}

/* ---- THE ACTION --------------------------------------------------
   RSVP is the only thing on the site a guest is asked to do, so it is
   the only thing that looks like a button. */
.btn{background:var(--navy);color:var(--paper)}
.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)}

::selection{background:rgba(22,33,60,.14)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* ===========================================================
   HEROES, ALL THE SAME SHAPE
   Every hero is now full bleed, as the White Wedding one always was.
   The boxed .hero__frame variant on Travel and Aso Ebi is gone: an
   inset panel floating in a wide page was the "weird box" the client
   objected to, and it also meant two pages opened differently from
   the other seven for no reason a guest could see.

   The photographs are out and honest placeholders are in their place,
   sized and positioned so the page is composed before any picture
   lands. When the real shoot arrives, drop an <img> back inside
   .hero__bg and delete the .slot; nothing else has to change.
   =========================================================== */
.hero__bg .slot,
.scene__bg .slot{
  width:100%;height:100%;
  background:var(--stone);
  box-shadow:inset 0 0 0 1px var(--ink-10);
}
/* one height for every hero on the site */
.phero{min-height:min(62vh,560px)}
/* the frame rules left behind in page style blocks no longer apply to
   anything, but this makes sure a stray one cannot re-inset a hero */
.hero__frame{position:static;inset:auto}

/* ===========================================================
   RSVP IS AN ACTION, NOT A DESTINATION
   Every other nav item takes a guest somewhere to read. This one
   asks them to do the single thing the whole site is for, so it is
   the only item that looks like a button: navy box, cream type.

   Once they have replied it stops shouting and becomes an ordinary
   nav item again, because a button that keeps demanding something a
   guest has already done reads as though it did not register.
   The state is set on <html> by guests.js before first paint.
   =========================================================== */
.head__nav .nav-rsvp{
  background:var(--navy);
  color:var(--paper);
  padding-inline:18px;
  margin-left:6px;
  /* 44px, not less. site.css already sets the floor on .head__nav a and
     an earlier version of this rule lowered it to 38 to make the button
     look neater in a 64px bar, which traded a real tap target for a
     visual preference. The bar is 64px; a 44px button fits it. */
  min-height:44px;
  align-self:center;
  transition:background .3s ease;
}
.head__nav .nav-rsvp::after{display:none}
.head__nav .nav-rsvp:hover{background:var(--navy-deep)}

.menu .nav-rsvp{
  background:var(--navy);color:var(--paper);
  padding:15px 30px;margin-top:8px;
}

/* replied: back to ordinary type */
html[data-rsvp="done"] .head__nav .nav-rsvp,
html[data-rsvp="done"] .menu .nav-rsvp{
  background:none;color:inherit;padding-inline:0;margin-left:0;
}
html[data-rsvp="done"] .head__nav .nav-rsvp::after{display:block}
html[data-rsvp="done"] .menu .nav-rsvp{padding:13px 20px;margin-top:0}

/* ---- OUR STORY, IN THE HAND ---------------------------------------
   The client's rule for titles: either pressed into the paper, or set
   in the calligraphy. Our Story is the one page that is a story rather
   than a set of facts, so it takes the script and drops the tracked
   caps entirely. Sentence case, because calligraphy set in capitals
   with letter-spacing stops being handwriting. */
.title--script{
  font-family:var(--script);
  font-size:clamp(46px,7vw,92px);
  letter-spacing:0;
  text-transform:none;
  line-height:1.05;
  color:var(--ink);
  text-shadow:none;
}

/* the note under a contact detail, so a number can carry its own
   caveat without a second row */
.desk__n{
  display:block;font-size:13px;color:var(--ink-60);
  line-height:1.55;margin-top:4px;
}
.desk__l a{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:var(--ink-18)}
.desk__l a:hover{text-decoration-color:var(--ink-60)}

/* ---- ONE DEADLINE, FOR THE WHOLE ORDER ---------------------------
   Stated once above the set rather than repeated on every cloth. Four
   identical dates on four cards is four chances to read a different
   one, and it was the same date every time. */
.deadline{
  margin:clamp(26px,3.4vw,36px) auto 0;max-width:52ch;text-align:center;
  padding-top:clamp(20px,2.6vw,26px);border-top:1px solid var(--ink-18);
}
.deadline__k{
  display:block;font-family:var(--sans);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-dk);margin-bottom:6px;
}
.deadline__d{
  display:block;font-family:var(--caps);font-size:clamp(19px,2.4vw,25px);
  letter-spacing:.1em;color:var(--ink);
}
.deadline__n{
  display:block;font-size:13px;line-height:1.65;color:var(--ink-read,var(--ink-60));
  margin-top:10px;
}

/* ---- THE BASKET TOAST -------------------------------------------
   Bottom centre on a phone, bottom left on a wide screen, above the
   fold either way, and never over the button that summoned it.
   Cream card on the navy accent so it reads as the site speaking
   rather than as a browser alert. */
.toast{
  position:fixed;z-index:70;left:50%;bottom:22px;transform:translate(-50%,120%);
  width:min(420px,calc(100vw - 32px));
  background:var(--navy);color:var(--paper);
  padding:16px 20px;box-shadow:var(--sh-lift);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  opacity:0;visibility:hidden;
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .42s ease,visibility .42s;
}
.toast.is-up{transform:translate(-50%,0);opacity:1;visibility:visible}
.toast__t{margin:0;font-size:16px;line-height:1.5}
.toast__a{
  flex:0 0 auto;font-family:var(--caps);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass-lt);text-decoration:underline;
  text-underline-offset:.24em;padding:13px 0;min-height:44px;
  display:inline-flex;align-items:center;
}
.toast__a:hover{color:var(--paper)}
@media (min-width:900px){
  .toast{left:32px;transform:translate(0,120%)}
  .toast.is-up{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){
  .toast{transition:opacity .2s ease,visibility .2s}
}

/* ===========================================================
   THE MEASURE
   The site was drawn on a 660px column inside a 1440px page, which
   left roughly 780px of empty linen on a laptop and made every page
   read as a narrow ribbon stranded in the middle of the screen.

   Two columns, both wider, and used for different jobs:

     --col       prose. Widened to 780px, which is about 72 characters
                 at 19px in this serif: still inside the comfortable
                 reading range, and no longer a ribbon.
     --col-wide  anything in columns or rows. Widened to 1320px so
                 detail lists, the order of the day, the cloth cards
                 and the schedule use the screen they are given.

   The gutter grows with the viewport so the wide column never runs to
   the very edge of a large monitor.
   =========================================================== */
:root{
  --col:780px;
  /* Was a flat 1320px, which is most of a laptop and a third of a large
     desktop: past about 1500px the site stopped growing and turned into
     a column of phone in a field of cream. It now keeps growing with the
     viewport, with a floor so nothing collapses on a small laptop and a
     ceiling so a very wide monitor does not stretch rows apart.
     --col is left alone on purpose: it is the reading measure, and prose
     set wider than about 75 characters is harder to read, not grander. */
  --col-wide:clamp(1180px, 88vw, 1760px);
  --gut:clamp(22px,5.5vw,80px);
}

/* Sections that are lists, tables or cards rather than prose take the
   wide column. Done here rather than by editing the markup on nine
   pages, so the decision lives in one place and can be reversed in
   one place. */
.facts,
.ord,
.timetable,
.looks,
.swatches,
.desks,
.days,
.cloths,
.order__list,
.order__tot{
  max-width:var(--col-wide);
  margin-inline:auto;
}

/* the hero wording keeps the prose measure even on a wide hero, so a
   title never runs the full width of a monitor */
.hero__in{max-width:var(--col)}

/* The list blocks above are still held to the prose column by the
   .wrap they sit inside, so the container is what has to widen. Done
   with :has() rather than by editing the wrap class on nine pages:
   the rule is "a wrap that contains a list is a wide wrap", and
   writing it once means a new page cannot forget it.

   :has() is supported in every browser this site targets. Where it is
   not, the wrap simply stays at the prose measure, which is the
   layout the site had before and not a broken one. */
.wrap:has(> .facts),
.wrap:has(> .ord),
.wrap:has(> .timetable),
.wrap:has(> .desks),
.wrap:has(.facts),
.wrap:has(.ord),
.wrap:has(.timetable),
.wrap:has(.desks){
  max-width:var(--col-wide);
}
/* the heading above a widened list keeps the prose measure, so a
   sentence never runs 1300px wide */
.wrap:has(.facts) .sec__p,
.wrap:has(.ord) .sec__p,
.wrap:has(.timetable) .sec__p,
.wrap:has(.desks) .sec__p{max-width:54ch;margin-inline:auto}

/* ===========================================================
   TALLER TEXT
   The site was set at 19px. Most of the guests here are older
   Nigerians reading on a phone, the column is now wider so a longer
   line needs a larger face to hold its rhythm, and the client asked
   for taller writing. 21px body, and every step of the scale moves
   with it rather than only the paragraph.
   =========================================================== */
body{font-size:21px;line-height:1.75}
.lede{font-size:clamp(22px,2.3vw,27px)}
.subtitle{font-size:clamp(12px,1.3vw,14px)}
.title{font-size:clamp(20px,2.6vw,30px)}
.display{font-size:clamp(44px,6.8vw,80px)}
.timetable .what{font-size:21px}
.field input:not([type=radio]):not([type=checkbox]),
.field select,.field textarea{font-size:21px}
.choice label{font-size:20px}
.note,.sec__p{font-size:19px}
.ev__row dd{font-size:21px}
.facts__row dd{font-size:21px}

/* ===========================================================
   EVERY HERO TITLE IS CALLIGRAPHY
   The client's rule for titles is either pressed into the paper or set
   in the calligraphy, and the page title is the one place the hand
   should be seen. So every hero h1 is La Graziela, sentence case,
   ink rather than emboss: over a photograph, when the real shoot
   lands, a blind emboss would disappear entirely.

   Capitals and letter-spacing are removed, not reduced. Calligraphy
   set in tracked capitals stops being handwriting and becomes a
   caption in a strange font.

   Sized in vw with a floor and a ceiling, because La Graziela runs
   narrow and long titles like "The Traditional Wedding" have to hold
   360px without breaking a word or running off the edge.
   =========================================================== */
.phero__t,
.hero__in h1.display{
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(46px,8.4vw,104px);
  line-height:1.02;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  text-shadow:none;
  text-wrap:balance;
}
/* the line under it stays in the tracked caps, so the two do not
   compete and the hierarchy still reads at a glance */
.phero .subtitle{margin-top:clamp(20px,2.8vw,30px)}

/* The placeholder label sat dead centre of the hero, which is exactly
   where the title sits, so the two printed on top of each other. It
   goes to the foot of the frame instead, out of the way of both the
   title and the line under it. */
.hero__bg .slot,
.scene__bg .slot{
  place-items:end center;
  padding-bottom:clamp(18px,3vw,30px);
}
.hero__bg .slot::after,
.scene__bg .slot::after{
  max-width:34ch;
  color:var(--ink-40);
}

/* A guest with one event has no schedule to read. Same mechanism as
   the white wedding gating: the attribute is on <html> before first
   paint, so the item never flashes in and out. */
html[data-events="one"] [data-multi]{display:none !important}

/* =====================================================================
   THE NAV BAR SITS ON THE TWO EDGES
   The mark goes hard left and everything else goes hard right, with
   nothing in the middle. site.css centres .head__in inside --col-wide,
   which floats both of them inward on a wide screen and leaves the mark
   sitting in from the edge rather than on it.

   Here rather than on one page: it is how the bar reads everywhere.
   ===================================================================== */
.head__in{max-width:none}
.head__nav{margin-left:auto}
.head__mark{margin-right:auto}

/* The crest image replaces the old "O & E" text mark. Sized to the
   wordmark's optical height, not the 64px --head-h bar; .head__mark's
   own min-height:44px tap target (site.css) and its display:inline-flex
   centring still apply unchanged, so the target doesn't shrink. */
/* twice the old 32px. The bar grows with it so the crest keeps its air
   rather than filling the rule to the edges. */
.head__mark img{height:64px;width:auto;display:block}


/* =====================================================================
   THE RIBBON SPINE
   A navy grosgrain running the full height of every page, on the left.
   Three layers make the ribbon rather than a stripe: fine horizontal
   ribs across its width, a soft cross-ribbon shading so it reads as
   something with a curve to it rather than a flat bar, and the navy
   underneath. The ribs run across the ribbon because that is the way
   grosgrain is woven.

   The page is inset by its width rather than sitting under it, so
   nothing is ever hidden behind the ribbon.
   ===================================================================== */
.rib{
  /* the comp's original: flat navy, one centred line, nothing else */
  position:fixed;left:0;top:0;bottom:0;width:34px;z-index:70;
  background:#16213C;
  display:grid;place-items:center;
}
.rib span{
  writing-mode:vertical-rl;
  font-family:var(--sans);font-size:9px;
  letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,240,232,.86);white-space:nowrap;
}
body{padding-left:34px}
.head,.menu{left:34px}
@media (max-width:700px){
  .rib{width:20px}
  body{padding-left:20px}
  .head,.menu{left:20px}
  .rib span{display:none}
}


/* the footer sits on navy, so its crest is knocked out to ivory */
.foot__mark img{
  height:74px;width:auto;display:block;margin:0 auto;
  filter:brightness(0) invert(1);
  opacity:.94;
}
/* the crest needs a taller bar than the old wordmark did */
:root{--head-h:88px}
@media (max-width:700px){
  :root{--head-h:72px}
  .head__mark img{height:48px}
  .foot__mark img{height:58px}
}