/* ─────────────────────────────────────────────────────────────
   Oslo Kebaya
   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 */
  /* 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}
.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)}
@media(max-width:820px){.nav__links{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)}

/* ── 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,300px) minmax(0,1fr)}
}
.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}

/* ── 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}
}