/* ─────────────────────────────────────────────────────────────
   Kebaya Oslo
   Palette sampled directly from the emblem: the navy field,
   the gold thread, the orchid petals.
   Shared by index.html and disclaimer.html — keep it that way,
   a second copy will drift within a week.
   ───────────────────────────────────────────────────────────── */
:root{
  /* the page sits a shade deeper than the emblem's own navy (#000C1E), so the
     medallion reads as an object resting on the page rather than dissolving into it */
  --ink:#00071A;
  --ink-2:#071528;        /* raised navy surface */
  --ink-3:#0C1E36;        /* hairline navy */
  --ink-lift:#0B1B33;     /* the warmer navy the hero opens on */
  --gold:#CCA65C;         /* thread */
  --gold-hi:#F0DDA4;      /* thread, catching light */
  --gold-dim:#8C7038;
  --orchid:#B2778A;       /* petal */
  --orchid-pale:#DFC0CC;
  --orchid-deep:#8E5468;  /* petal, readable on linen */
  /* petal, catching light — the .what-is line and nothing else. She first
     asked for that line in red, then withdrew it (2026-08-13) and asked for
     whatever sits best with the navy, gold and orchid. So it is the orchid
     itself, lifted: warm enough to be its own voice rather than a second
     cream lede, and not gold, which the tagline directly above it already
     owns. 6.6:1 on the hero navy, 6.0:1 on the lighter pagehead. */
  --orchid-hi:#D98A96;
  /* the thread gold is 4.1:1 on linen — under AA for the small uppercase
     labels it is used for. These two are the same gold, darkened until they
     clear 4.5:1 against --linen. Use them for TEXT on linen, never for rules
     or ornament (that is what --gold-dim is for). */
  --gold-label:#7A6230;   /* small caps labels on linen — 5.1:1 */
  --gold-link:#7C5F1E;    /* inline links on linen — 5.2:1 */
  --linen:#F4EFE6;        /* voile — the cloth itself */
  --linen-2:#EAE2D4;
  --on-linen:#1B2333;
  --on-linen-soft:#4E5567;
  --on-ink-soft:#9FAEC4;

  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Jost','Helvetica Neue',Arial,sans-serif;

  --measure:64ch;
  --pad:clamp(1.25rem,5vw,4rem);
  --gap-section:clamp(4.5rem,11vw,9rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:#E8EDF5;
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem,0.96rem + 0.2vw,1.075rem);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* so a short page (the disclaimer) still pins its footer to the bottom */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:2px}

/* ── shared type ─────────────────────────────────────────── */
.eyebrow{
  font-family:var(--body);
  font-weight:400;
  font-size:.7rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
}
.linen-block .eyebrow{color:var(--gold-label)}

.h-display{
  font-family:var(--display);
  font-weight:300;
  line-height:1.12;
  letter-spacing:.005em;
  font-size:clamp(2rem,1.3rem + 3.2vw,3.5rem);
}
.h-display em{font-style:italic;color:var(--gold-hi)}
.linen-block .h-display em{color:#96712E}

.lede{
  font-family:var(--display);
  font-size:clamp(1.2rem,1.05rem + 0.7vw,1.6rem);
  font-weight:300;
  line-height:1.55;
  color:#D6DEEB;
}
.linen-block .lede{color:#39415A}

p+p{margin-top:1.1em}
.prose{max-width:var(--measure)}
.prose p{color:var(--on-ink-soft)}
.linen-block .prose p{color:var(--on-linen-soft)}

/* a gold-underlined inline link, legible on either ground */
.link{
  color:var(--gold-hi);text-decoration:none;
  border-bottom:1px solid rgba(204,166,92,.5);
  transition:color .25s,border-color .25s;
}
.link:hover{color:#FFF6DF;border-bottom-color:var(--gold-hi)}
.linen-block .link{color:var(--gold-link);border-bottom-color:rgba(124,95,30,.55)}
.linen-block .link:hover{color:#5F4915;border-bottom-color:var(--gold-link)}

/* ── layout ──────────────────────────────────────────────── */
.wrap{width:min(1180px,100%);margin-inline:auto;padding-inline:var(--pad)}
.block{padding-block:var(--gap-section)}
/* a section that continues the tone of the one above it — half the top gap,
   so the pair reads as one movement rather than two unrelated blocks */
.block--stack{padding-block-start:clamp(2.5rem,5vw,4.5rem)}
.linen-block{background:var(--linen);color:var(--on-linen)}
.linen-block .h-display{color:#141C2C}

/* ── kerawang: the pierced lace edge that finishes a kebaya ─ */
.lace{display:block;width:100%;height:22px;color:var(--gold-dim);opacity:.85}
.lace--onlinen{color:#C4A96E}
.lace--flip{transform:rotate(180deg)}

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(9,23,43,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(204,166,92,.16);
}
.nav__in{display:flex;align-items:center;gap:1.5rem;min-height:66px}
.nav__brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto;flex:none}
/* the flex child here is <picture>, not the <img> inside it. Without this the
   picture shrinks to zero width and `img{max-width:100%}` takes the emblem down
   with it — invisibly, since nothing overflows. */
.nav__brand>picture{flex:none;display:block}
.nav__mark{width:38px;height:38px;flex:none}
.nav__name{font-family:var(--display);font-size:1.16rem;letter-spacing:.04em;color:#EFE3C6;white-space:nowrap}
.nav__links{display:flex;gap:1.5rem;list-style:none}
.nav__links a{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--on-ink-soft);padding-block:.35rem;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.nav__links a:hover{color:var(--gold-hi);border-bottom-color:var(--gold)}
/* the page you are on: gold, and underlined for anyone who cannot see the colour */
.nav__links a.is-current{color:var(--gold-hi);border-bottom-color:var(--gold)}
/* a page that exists but has no content yet */
.nav__soon{
  margin-left:.4rem;font-size:.58rem;letter-spacing:.1em;
  color:var(--gold-dim);vertical-align:.08em;
}
/* Below 820px the links used to be hidden outright. That was survivable when the
   whole site was one scrolling page; with eight pages it strands anyone on a
   phone. Instead the row scrolls sideways — no JavaScript, nothing to open, and
   the fade on the right edge signals there is more. */
@media(max-width:820px){
  .nav__in{gap:.9rem}
  .nav__name{font-size:1.05rem}
  .nav{overflow:hidden}
  /* the <nav> takes whatever the brand leaves and lets its list scroll inside,
     rather than pushing the brand out of the bar */
  .nav__in>nav{flex:1 1 auto;min-width:0}
  .nav__links{
    gap:1.1rem;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-right:1.6rem;
    /* fade the last few pixels so the row reads as scrollable */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  }
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links a{white-space:nowrap}
}
@media(max-width:520px){
  .nav__name{display:none}
}

/* ── hero ────────────────────────────────────────────────── */
.hero{
  position:relative;text-align:center;
  padding-block:clamp(3rem,7vw,5.5rem) clamp(3.5rem,8vw,6rem);
  /* opens on a warmer, lifted navy and settles back to --ink at the fold,
     so the lace divider below still meets a matching ground */
  background:
    radial-gradient(circle 360px at 50% 24%, rgba(240,221,164,.20), rgba(204,166,92,.07) 56%, transparent 76%),
    radial-gradient(ellipse 78% 62% at 50% 4%, rgba(204,166,92,.11), transparent 64%),
    radial-gradient(ellipse 72% 56% at 50% 100%, rgba(178,119,138,.17), transparent 68%),
    linear-gradient(180deg,var(--ink-lift) 0%,#0A1930 52%,var(--ink) 100%);
}
.hero__emblem{
  width:clamp(190px,30vw,290px);
  margin-inline:auto;
  filter:drop-shadow(0 16px 44px rgba(0,0,0,.55));
}
.hero__title{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2.1rem,1.15rem + 4.1vw,4.15rem);
  line-height:1.13;
  letter-spacing:.004em;
  margin-top:clamp(1.6rem,3.5vw,2.4rem);
  color:#F6F1E6;
  text-wrap:balance;
}
.hero__title em{font-style:italic;color:var(--gold-hi)}
.hero__sub{
  margin-top:1.15rem;font-size:.74rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);
}

/* the signature: a vine that embroiders itself */
.vine{width:min(720px,94%);margin:clamp(1.2rem,3vw,2rem) auto 0;height:auto;overflow:visible}
.vine__stem{
  fill:none;stroke:url(#thread);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  /* path length measured at 722.5 — dasharray must match or the draw
     spends its first half invisible */
  stroke-dasharray:726;stroke-dashoffset:726;
  animation:stitch 2.4s cubic-bezier(.42,0,.28,1) .35s forwards;
}
.vine__leaf{fill:var(--gold-dim);opacity:0;animation:leaf .7s ease forwards}
.vine__bloom{opacity:0;transform-box:fill-box;transform-origin:center;animation:bloom .9s cubic-bezier(.34,1.4,.5,1) forwards}
@keyframes stitch{to{stroke-dashoffset:0}}
@keyframes leaf{to{opacity:.95}}
@keyframes bloom{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}

.hero__cta{
  display:inline-flex;align-items:baseline;gap:.85rem;
  margin-top:clamp(1.8rem,4vw,2.6rem);
  padding:.95rem 2rem;
  border:1px solid var(--gold);
  color:#F6F1E6;text-decoration:none;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  background:linear-gradient(180deg,rgba(204,166,92,.10),rgba(204,166,92,.02));
  transition:background .3s,border-color .3s,transform .3s;
}
.hero__cta:hover{background:rgba(204,166,92,.20);border-color:var(--gold-hi);transform:translateY(-2px)}
.hero__cta span{color:var(--gold);font-size:.72rem;letter-spacing:.16em}

/* ── about ───────────────────────────────────────────────── */
/* the byline sits inside .prose, so it has to out-specify
   `.linen-block .prose p` or it renders in body grey */
.linen-block .prose p.byline,
.byline{
  margin-top:1.4rem;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-label);
}
/* the closing statement of the About section — institutional voice, set
   apart from the founder's first-person story above it */
.pledge{
  border-top:1px solid rgba(140,112,56,.35);
  max-width:var(--measure);
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:clamp(1.4rem,3vw,2rem);
}
.pledge p{
  font-family:var(--display);
  font-size:clamp(1.1rem,1rem + .5vw,1.35rem);
  line-height:1.55;color:#39415A;
}

/* ── kebaya / definition ─────────────────────────────────── */
.def{display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1fr}
@media(min-width:940px){.def{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}}

.unesco{
  border-top:1px solid rgba(204,166,92,.28);
  border-bottom:1px solid rgba(204,166,92,.28);
  padding-block:1.6rem;margin-top:2rem;
}
.unesco__label{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.unesco__text{font-family:var(--display);font-size:clamp(1.1rem,1rem + .5vw,1.36rem);line-height:1.5;margin-top:.6rem;color:#EDE6D6}
.unesco__more{margin-top:.95rem;font-size:.9rem;line-height:1.65;color:var(--on-ink-soft)}
/* the five states that jointly nominated the kebaya — a real set, not decoration */
.nations{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .4rem;margin-top:1.3rem}
.nations li{
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:#D3BE8E;border:1px solid rgba(204,166,92,.32);
  padding:.42rem .8rem;border-radius:999px;white-space:nowrap;
}

/* ── photo grid (kebaya images) ──────────────────────────── */
.gallery{
  display:grid;gap:clamp(.8rem,2vw,1.3rem);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-top:clamp(2.4rem,5vw,3.6rem);
}
.gallery figure{margin:0}
.gallery img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border:1px solid rgba(204,166,92,.3);
}
.gallery figcaption{margin-top:.6rem;font-size:.78rem;line-height:1.6;color:var(--on-ink-soft)}
.linen-block .gallery img{border-color:rgba(140,112,56,.4)}
.linen-block .gallery figcaption{color:var(--on-linen-soft)}

/* ── a gallery plate ─────────────────────────────────────── */
/* The country plates are wide, and each carries its own printed labels and
   captions inside the artwork. So unlike .gallery they are never cropped and
   never tiled — one plate to a section, shown whole, on a mat like a framed
   print. Their own printed text is also why every plate offers the full-size
   file: at phone width the labels inside are too small to read otherwise. */
.plate{margin:clamp(2.2rem,5vw,3.2rem) 0 0}
.plate img{
  width:100%;height:auto;
  border:1px solid rgba(204,166,92,.3);
  padding:.5rem;background:#0A1526;
}
.linen-block .plate img{border-color:rgba(140,112,56,.4);background:#FBF7EF}
.plate figcaption{
  margin-top:.85rem;font-size:.78rem;line-height:1.6;color:var(--on-ink-soft);
  display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline;
}
.linen-block .plate figcaption{color:var(--on-linen-soft)}

/* ── the reflection: why the kebaya inspires me ──────────── */
.reflect{max-width:62ch;margin-inline:auto;text-align:center}
.reflect__lede{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.25rem,1.05rem + .85vw,1.75rem);
  line-height:1.5;color:#2A3145;margin-top:1.3rem;
}
.reflect__body{margin-top:1.5rem}
.reflect__body p{color:var(--on-linen-soft)}
.reflect__mark{width:34px;height:34px;margin:clamp(1.6rem,4vw,2.4rem) auto 0}
.reflect__sig{margin-top:1.4rem;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-label)}

/* ── the parallel: bunad ↔ kebaya ────────────────────────── */
.parallel{display:grid;gap:0;grid-template-columns:1fr;margin-top:clamp(2rem,5vw,3.2rem)}
@media(min-width:860px){.parallel{grid-template-columns:1fr auto 1fr;align-items:center}}
.parallel__side{padding:clamp(1.6rem,4vw,2.6rem) 0}
@media(min-width:860px){
  .parallel__side{padding:clamp(1.6rem,3vw,2.4rem) clamp(1.8rem,4vw,3.4rem)}
  .parallel__side--b{text-align:right}
}
.parallel__place{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.parallel__name{
  font-family:var(--display);font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);
  font-weight:300;line-height:1.15;margin-top:.5rem;color:#F3EEE2;
}
.parallel__note{margin-top:.9rem;color:var(--on-ink-soft);max-width:34ch}
.parallel__side--b .parallel__note{margin-left:auto}
.parallel__pivot{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  padding-block:1.2rem;
}
.parallel__rule{width:1px;height:clamp(40px,7vw,86px);background:linear-gradient(180deg,transparent,var(--gold),transparent)}
@media(max-width:859px){.parallel__rule{width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}}
.parallel__pivot span{
  font-family:var(--display);font-style:italic;font-size:1.05rem;
  color:var(--orchid-pale);text-align:center;line-height:1.4;
}

/* ── quote ───────────────────────────────────────────────── */
.quote{
  max-width:60ch;margin:clamp(2.5rem,6vw,4rem) auto 0;text-align:center;
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.3rem,1.1rem + 1vw,1.95rem);line-height:1.5;
  color:#2A3145;
}
.quote__q{display:block;font-size:2.4rem;line-height:0;color:var(--orchid);margin-bottom:.8rem;font-style:normal}
.quote__who{
  display:block;margin-top:1.6rem;font-family:var(--body);font-style:normal;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-label);
}

/* ── two-up prose ────────────────────────────────────────── */
.duo{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:860px){.duo{grid-template-columns:1fr 1fr}}
.duo__h{font-family:var(--display);font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);font-weight:400;color:#141C2C;margin-bottom:.7rem}

/* ── the night ───────────────────────────────────────────── */
.night{
  position:relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(204,166,92,.13), transparent 62%),
    radial-gradient(ellipse 55% 45% at 82% 85%, rgba(178,119,138,.12), transparent 60%),
    var(--ink);
}
.night__date{
  display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.55rem .9rem;
  font-family:var(--display);font-size:clamp(1.6rem,1.2rem + 1.9vw,2.5rem);
  font-weight:300;color:var(--gold-hi);
  border-block:1px solid rgba(204,166,92,.3);padding-block:.9rem;margin-top:1.5rem;
}
.night__date .sep{color:var(--gold-dim);font-size:.8em}
.night__grid{
  display:grid;gap:1px;margin-top:clamp(2.4rem,5vw,3.6rem);
  grid-template-columns:1fr;background:rgba(204,166,92,.2);
  border:1px solid rgba(204,166,92,.2);
}
@media(min-width:700px){.night__grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.night__grid{grid-template-columns:repeat(4,1fr)}}
.night__cell{background:var(--ink-2);padding:clamp(1.4rem,3vw,2rem)}
.night__cell h3{
  font-family:var(--display);font-weight:400;font-size:1.28rem;
  color:#F3EEE2;margin-bottom:.5rem;
}
.night__cell p{color:var(--on-ink-soft);font-size:.94rem;line-height:1.65}

/* ── founder ─────────────────────────────────────────────── */
.founder{
  display:grid;gap:clamp(1.8rem,5vw,3.4rem);
  grid-template-columns:1fr;align-items:start;
  margin-top:clamp(1.8rem,4vw,2.6rem);
}
/* the portrait column only appears once a portrait actually exists, so the
   text is never squeezed into a half-width column waiting for a photo */
@media(min-width:820px){
  .founder:has(.founder__portrait){grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  /* the portrait hangs on the right, where she asked for it. It stays first in
     the source so that on a phone — one column, source order — her face opens
     the section rather than closing it. */
  .founder__text{order:1}
  .founder__portrait{order:2}
}
.founder__portrait{margin:0}
.founder__portrait img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border:1px solid rgba(140,112,56,.45);
  padding:.45rem;background:#FBF7EF;
}
.founder__portrait figcaption{
  margin-top:.7rem;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-label);
}
.founder__text{max-width:var(--measure)}
.founder__name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem);
  line-height:1.2;color:#141C2C;
}
.founder__role{margin-top:.4rem;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-label)}

/* ── contact ─────────────────────────────────────────────── */
.contact{text-align:center}
.contact__mail{
  display:inline-block;margin-top:1.6rem;
  font-family:var(--display);font-size:clamp(1.4rem,1.15rem + 1.3vw,2.1rem);
  color:var(--gold-hi);text-decoration:none;
  border-bottom:1px solid rgba(204,166,92,.45);padding-bottom:.25rem;
  transition:border-color .3s,color .3s;
}
.contact__mail:hover{color:#FFF6DF;border-bottom-color:var(--gold-hi)}
.contact__note{margin-top:1.6rem;font-size:.85rem;color:#7C8AA0}

/* ── interior page header ────────────────────────────────
   Every page except Home opens with this instead of the hero: the same
   lifted navy the hero opens on, so the pages read as one site. */
.pagehead{
  text-align:center;
  padding-block:clamp(2.6rem,6vw,4.4rem) clamp(2.4rem,5vw,3.8rem);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(204,166,92,.12), transparent 66%),
    linear-gradient(180deg,var(--ink-lift) 0%,var(--ink) 100%);
}
.pagehead h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);
  line-height:1.14;margin-top:.9rem;color:#F6F1E6;
  text-wrap:balance;max-width:22ch;margin-inline:auto;
}
.pagehead h1 em{font-style:italic;color:var(--gold-hi)}
.pagehead__lede{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem);
  line-height:1.5;color:var(--orchid-pale);
  margin:1.1rem auto 0;max-width:46ch;
}
/* ── "what is a kebaya?" ─────────────────────────────────────
   The question the founder is asked most, by visitors with no connection to
   Southeast Asia, and the one thing the site never said. It appears twice and
   nowhere else: under the tagline in the home hero, and as the lede of
   /kebaya. Two is the limit — she agreed to that on 2026-08-13; a third
   repetition and it starts to read as a disclaimer rather than an answer.
   Colour comes from --orchid-hi. */
.what-is{
  font-family:var(--display);
  font-size:clamp(1.12rem,1rem + .6vw,1.5rem);
  font-weight:400;
  line-height:1.55;
  color:var(--orchid-hi);
  max-width:52ch;
  margin:clamp(1.5rem,3.2vw,2.1rem) auto 0;
  text-wrap:balance;
}
/* the defined term, set the way a dictionary sets it */
.what-is em{font-style:italic}
/* inside .pagehead it replaces .pagehead__lede, so it carries that spacing */
.pagehead .what-is{margin-top:1.1rem}

/* a note that belongs to the whole page, set below the title block behind a
   gold hairline — quieter than the lede above it, so it reads as a preface
   rather than a second headline */
.pagehead__note{
  max-width:64ch;margin:clamp(2.2rem,5vw,3rem) auto 0;
  padding-top:clamp(1.6rem,3.5vw,2.2rem);
  border-top:1px solid rgba(204,166,92,.24);
  /* the block is centred, its text is not — .pagehead centres everything, and
     a 45-word paragraph set centred is miserable to read */
  text-align:left;
}
.pagehead__note p{font-size:.92rem;line-height:1.8;color:var(--on-ink-soft)}
/* qualified with p, or the rule above it wins on specificity and the label
   comes out the same size and colour as the note it labels */
.pagehead__note p.pagehead__note-label{
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.8rem;
}

/* a heading inside a page, below the h1 — the doc's "A Timeless Tradition" tier */
.h-sub{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,1.25rem + 1.1vw,2.05rem);
  line-height:1.25;color:#F3EEE2;
}
.linen-block .h-sub{color:#141C2C}
.h-sub+.prose{margin-top:1.1rem}
/* successive titled passages within one section */
.passage+.passage{margin-top:clamp(2.4rem,5vw,3.6rem)}

/* ── a set of things, as a list ──────────────────────────── */
.list{list-style:none;max-width:var(--measure);margin-top:1.6rem}
.list li{
  position:relative;padding-left:1.7rem;
  color:var(--on-ink-soft);
}
.list li+li{margin-top:.9rem}
.list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;
  background:var(--gold-dim);
}
.linen-block .list li{color:var(--on-linen-soft)}

/* ── a page that is not ready yet ────────────────────────── */
.soon{text-align:center;padding-block:clamp(3.5rem,9vw,6.5rem)}
.soon__mark{width:38px;height:38px;margin:0 auto clamp(1.6rem,4vw,2.4rem);opacity:.9}
.soon__word{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.8rem,1.4rem + 2vw,2.8rem);
  font-weight:300;color:var(--gold-hi);line-height:1.3;
}
.soon__note{
  max-width:52ch;margin:clamp(1.4rem,3vw,2rem) auto 0;
  color:var(--on-ink-soft);
}
.linen-block .soon__note{color:var(--on-linen-soft)}

/* ── the event ───────────────────────────────────────────── */
.event{text-align:center}
.event__name{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.2rem,1.5rem + 3.2vw,3.8rem);
  line-height:1.12;color:#F6F1E6;margin-top:.9rem;
}
.event__when{
  display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.55rem .9rem;margin-top:1.6rem;padding-block:1rem;
  border-block:1px solid rgba(204,166,92,.3);
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,1.15rem + 1.7vw,2.3rem);color:var(--gold-hi);
}
.event__when .sep{color:var(--gold-dim);font-size:.8em}
.event__note{
  max-width:50ch;margin:clamp(1.6rem,4vw,2.4rem) auto 0;
  color:var(--on-ink-soft);
}

/* ── registration ────────────────────────────────────────── */
/* Deliberately the same bordered statement block as .unesco, because it is the
   same kind of thing: the one passage on its page carrying hard facts a reader
   has to act on. Centred, since .event centres everything.
   The price and the Vipps number are the two things someone scanning needs, so
   they are the two things set largest and in gold. */
.reg{
  border-top:1px solid rgba(204,166,92,.28);
  border-bottom:1px solid rgba(204,166,92,.28);
  max-width:54ch;margin:clamp(2rem,5vw,3rem) auto 0;
  padding-block:clamp(1.6rem,4vw,2.2rem);
}
.reg__label{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.reg__text{
  font-family:var(--display);font-size:clamp(1.1rem,1rem + .5vw,1.36rem);
  line-height:1.5;margin-top:.6rem;color:#EDE6D6;
}
.reg__price{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem);
  line-height:1.1;margin-top:1.4rem;color:var(--gold-hi);
}
.reg__price span{
  display:block;font-family:var(--body);font-size:.7rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-top:.55rem;
}
.reg__pay{margin-top:1.1rem;font-size:.96rem;line-height:1.7;color:#E8EDF5}
/* the number itself — not bold, the site has no bold anywhere; gold and
   letterspaced is how it is made to stand out instead */
.reg__pay strong{font-weight:400;color:var(--gold-hi);letter-spacing:.08em}
.reg__more{margin-top:1.1rem;font-size:.9rem;line-height:1.65;color:var(--on-ink-soft)}
.reg__more strong{font-weight:400;color:#D3BE8E}
/* her closing line, and the only sentence on this page that is not information */
.reg__sign{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.15rem,1rem + .7vw,1.55rem);
  line-height:1.5;color:var(--orchid-pale);
  margin-top:clamp(1.8rem,4vw,2.6rem);
}

/* ── the save-the-date card ──────────────────────────────── */
/* a portrait poster, so it is capped by height as well as width — at 520px wide
   it would otherwise stand taller than most laptop viewports */
.invite{margin:0 0 clamp(2.6rem,6vw,4rem)}
.invite img{
  display:block;margin-inline:auto;
  width:auto;max-width:min(100%,520px);max-height:78vh;height:auto;
  border:1px solid rgba(140,112,56,.4);
}

/* ── contact rows ────────────────────────────────────────── */
.reach{
  max-width:44ch;margin:clamp(1.8rem,4vw,2.6rem) auto 0;
  border-top:1px solid rgba(204,166,92,.24);
}
.reach__row{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem;
  padding-block:1.1rem;border-bottom:1px solid rgba(204,166,92,.24);
  text-align:left;
}
.reach__label{
  flex:none;min-width:6.5rem;
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
}
.reach__value{
  font-family:var(--display);font-size:clamp(1.15rem,1rem + .6vw,1.5rem);
  color:var(--gold-hi);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .3s,color .3s;
}
a.reach__value:hover{color:#FFF6DF;border-bottom-color:var(--gold-hi)}

/* ── document page (disclaimer) ──────────────────────────── */
.doc{max-width:var(--measure);margin-top:clamp(1.6rem,4vw,2.4rem)}
.doc p{color:var(--on-linen-soft)}

/* ── footer ──────────────────────────────────────────────── */
.foot{border-top:1px solid rgba(204,166,92,.16);padding-block:2.6rem;text-align:center}
.foot__mark{width:52px;margin:0 auto 1.1rem;opacity:.85}
.foot__tag{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim)}
.foot__legal{
  max-width:74ch;margin:1.1rem auto 0;
  font-size:.78rem;line-height:1.75;color:#6C7A92;
}
.foot__links{margin-top:1.1rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#5E6C82}
.foot__links a{color:#8FA0B8;text-decoration:none;border-bottom:1px solid rgba(204,166,92,.28);transition:color .25s,border-color .25s}
.foot__links a:hover{color:var(--gold-hi);border-bottom-color:var(--gold)}
.foot__links .sep{margin-inline:.7rem;color:#3E4A5E}

/* ── scroll reveal ───────────────────────────────────────── */
.rise{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.rise.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .vine__stem{stroke-dashoffset:0}
  .vine__leaf{opacity:.95}
  .vine__bloom{opacity:1}
  .rise{opacity:1;transform:none}
}