/* ============================================================
   Cas & Thais — 10 Years
   A medieval-fantasy aesthetic uniting Scotland, Brazil & NL.
   ============================================================ */

/* ---- Fonts (self-hosted) ---------------------------------- */
@font-face{font-family:'Cinzel';src:url('/assets/fonts/cinzel-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cinzel';src:url('/assets/fonts/cinzel-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cinzel Decorative';src:url('/assets/fonts/cinzel-decorative-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cinzel Decorative';src:url('/assets/fonts/cinzel-decorative-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('/assets/fonts/eb-garamond-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('/assets/fonts/eb-garamond-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('/assets/fonts/eb-garamond-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Great Vibes';src:url('/assets/fonts/great-vibes-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Caveat';src:url('/assets/fonts/caveat.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

/* ---- Tokens ------------------------------------------------ */
:root{
  --parchment:#f3e7cb; --parchment-2:#ecdcb6;
  --card:#fbf5e6; --card-edge:#e3d2a8;
  --ink:#2c2117; --ink-2:#5c4c37; --muted:#8a795c;
  --forest:#1e4c3c; --forest-2:#143a2c; --emerald:#166b4a;
  --heather:#5c3b64; --royal:#1d3f6b; --wine:#7c2334; --oranje:#cf6a1a;
  --gold:#b6902f; --gold-2:#d9b24c; --gold-3:#8c6a1e; --brazil:#e6b52f;
  --radius:14px;
  --shadow:0 14px 34px -16px rgba(40,30,15,.45);
  --shadow-soft:0 6px 16px -10px rgba(40,30,15,.5);
  --f-display:'Cinzel',Georgia,'Times New Roman',serif;
  --f-deco:'Cinzel Decorative','Cinzel',Georgia,serif;
  --f-script:'Great Vibes','Segoe Script',cursive;
  --f-hand:'Caveat','Segoe Print','Comic Sans MS',cursive;
  --f-body:'EB Garamond',Georgia,'Times New Roman',serif;
}

/* ---- Reset / base ----------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--f-body);font-size:1.14rem;line-height:1.7;color:var(--ink);
  background-color:var(--parchment);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
    radial-gradient(1100px 620px at 50% -8%, rgba(255,251,240,.75), rgba(255,251,240,0) 62%),
    radial-gradient(1000px 900px at 108% 0%, rgba(150,110,45,.10), transparent 55%),
    radial-gradient(900px 800px at -8% 100%, rgba(24,70,58,.10), transparent 55%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto}
a{color:var(--emerald)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.15;color:var(--forest-2);margin:0 0 .5em}
p{margin:0 0 1em}
.container{width:min(1100px,92vw);margin-inline:auto}
.site-main{position:relative;z-index:1;min-height:50vh}
.skip-link{position:absolute;left:-999px;top:.5rem;background:var(--forest);color:#fff;padding:.6em 1em;border-radius:8px;z-index:100}
.skip-link:focus{left:.5rem}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---- Ornamental bits -------------------------------------- */
.eyebrow{font-family:var(--f-display);letter-spacing:.28em;text-transform:uppercase;font-size:.78rem;color:var(--gold-3);display:block}
.divider{display:flex;align-items:center;gap:1rem;max-width:520px;margin:2.4rem auto}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.divider__gem{width:11px;height:11px;transform:rotate(45deg);background:var(--gold-2);border:1px solid var(--gold-3);flex:none}
.section{padding:clamp(2.6rem,6vw,4.6rem) 0}
.section--tight{padding:clamp(1.6rem,4vw,2.6rem) 0}
.section--sunk{background:linear-gradient(180deg,rgba(20,58,44,.05),rgba(20,58,44,.02));border-block:1px solid var(--card-edge)}
.section__head{text-align:center;max-width:62ch;margin:0 auto 2.4rem}
.section__title{font-size:clamp(1.9rem,4vw,2.7rem);margin:.2em 0}
.section__intro{font-size:1.16rem;color:var(--ink-2)}

/* ---- Buttons ---------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--f-display);
  font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#2a2016;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));border:1px solid var(--gold-3);
  border-radius:999px;padding:.85em 1.7em;cursor:pointer;text-decoration:none;box-shadow:var(--shadow-soft);
  transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 10px 22px -10px rgba(60,40,10,.55)}
.btn:active{transform:translateY(0)}
.btn--primary{background:linear-gradient(180deg,var(--emerald),var(--forest));color:#f6eccb;border-color:var(--forest-2)}
.btn--ghost{background:transparent;color:var(--forest-2);border-color:currentColor;box-shadow:none}
.btn--muted{background:#efe7d3;color:#4a4230;border-color:#d9cdb0;box-shadow:none}
.btn--danger{background:linear-gradient(180deg,#b5433a,#8f3229);color:#fff;border-color:#7c2a22}
.btn--small{font-size:.72rem;padding:.6em 1.15em}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---- Site header / nav ------------------------------------ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(243,231,203,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--card-edge);box-shadow:0 2px 14px -10px rgba(0,0,0,.4)}
.site-header__inner{display:flex;align-items:center;gap:1rem;min-height:70px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--forest-2)}
.brand__crest-svg{width:34px;height:34px;color:var(--gold-3);display:block}
.brand__text{display:flex;flex-direction:column;gap:.1rem}
.brand__names{font-family:var(--f-display);font-weight:700;font-size:1.12rem;letter-spacing:.03em;display:block;line-height:1.05}
.brand__years{font-size:.68rem;line-height:1;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-3)}
.mainnav{margin-left:auto;display:flex;align-items:center;gap:1.25rem}
.mainnav a{font-family:var(--f-display);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.mainnav a.is-active{color:var(--gold-3)}
.mainnav a:not(.btn):hover{color:var(--emerald)}
.mainnav__spacer{width:1px;height:22px;background:var(--card-edge)}
.lang-toggle{display:flex;align-items:center;gap:.4rem;font-family:var(--f-display);font-size:.78rem}
.lang-toggle a{opacity:.5;text-decoration:none;color:var(--ink)}
.lang-toggle a.is-active{opacity:1;color:var(--gold-3);font-weight:700}
.lang-toggle__sep{color:var(--card-edge)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;
  background:transparent;border:1px solid var(--card-edge);border-radius:8px;cursor:pointer}
.nav-toggle span{display:block;height:2px;width:22px;margin-inline:auto;background:var(--ink);transition:.2s}
.nav-toggle--dark{border-color:rgba(255,255,255,.3)}
.nav-toggle--dark span{background:#f0e7cb}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- Hero -------------------------------------------------- */
.hero{position:relative;overflow:hidden;color:#f4ecd6;text-align:center;
  padding:clamp(3rem,8vw,6rem) 1rem clamp(2.4rem,6vw,4rem);
  background:radial-gradient(120% 120% at 50% 0%, #275a41 0%, #173d2e 46%, #0f2620 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 34px,rgba(216,178,76,.55) 34px 36px,transparent 36px 70px),
    repeating-linear-gradient(0deg,transparent 0 34px,rgba(216,178,76,.4) 34px 36px,transparent 36px 70px),
    repeating-linear-gradient(90deg,transparent 0 70px,rgba(120,180,150,.45) 70px 74px),
    repeating-linear-gradient(0deg,transparent 0 70px,rgba(120,180,150,.35) 70px 74px)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 120px 30px rgba(6,18,14,.55)}
.hero__inner{position:relative;z-index:2;max-width:780px;margin-inline:auto}
.hero__crest{width:clamp(92px,16vw,124px);height:clamp(92px,16vw,124px);color:var(--gold-2);margin:0 auto .4rem;filter:drop-shadow(0 5px 12px rgba(0,0,0,.45))}
.hero__kicker{color:var(--gold-2)}
.hero__names{font-family:var(--f-script);font-weight:400;font-size:clamp(3.6rem,13vw,7rem);line-height:.85;color:#fff;margin:.12em 0 .1em;text-shadow:0 3px 20px rgba(0,0,0,.45)}
.hero__rule{display:flex;align-items:center;justify-content:center;gap:.9rem;color:var(--gold-2);font-family:var(--f-display);letter-spacing:.3em;text-transform:uppercase;font-size:.78rem;margin:.2rem 0 1rem}
.hero__rule::before,.hero__rule::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-2))}
.hero__rule::after{transform:scaleX(-1)}
.hero__sub{font-size:1.24rem;font-style:italic;color:#ecdfbd;max-width:36ch;margin:0 auto}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.8rem}
.hero .btn--ghost{color:#f4ecd6;border-color:rgba(244,236,214,.55)}
.hero .btn--ghost:hover{background:rgba(244,236,214,.1)}

/* ---- "Three lands" grid ----------------------------------- */
.lands{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.4rem}
.land{text-align:center;padding:1.7rem 1.2rem;background:var(--card);border:1px solid var(--card-edge);
  border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.land__icon{width:58px;height:58px;margin:0 auto .7rem;color:var(--emerald)}
.land--scot .land__icon{color:var(--heather)}
.land--brazil .land__icon{color:var(--brazil)}
.land--neth .land__icon{color:var(--oranje)}
.land--fant .land__icon{color:var(--wine)}
.land__name{font-family:var(--f-display);font-size:1.15rem;color:var(--forest-2);margin:.1em 0 .3em}
.land__desc{font-size:1rem;color:var(--ink-2);margin:0}

/* ---- Cards / programme ------------------------------------ */
.card{background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden}
.program-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.6rem}
.program-card{display:flex;flex-direction:column;padding:1.7rem 1.7rem 1.5rem}
.program-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--gold-3),var(--gold-2),var(--gold-3))}
.program-card__motif{position:absolute;top:-14px;right:-12px;width:118px;height:118px;color:var(--gold);opacity:.14;transform:rotate(8deg);pointer-events:none}
.program-card__date{font-family:var(--f-display);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-3);position:relative}
.program-card__title{font-family:var(--f-display);font-size:1.45rem;color:var(--forest-2);margin:.15em 0 .35rem;position:relative}
.program-card__time{font-style:italic;color:var(--ink-2);margin:0}
.program-card__desc{margin:.9rem 0 1.1rem;position:relative}
.program-card__meta{display:grid;gap:.55rem;margin-top:auto;border-top:1px solid var(--card-edge);padding-top:1rem}
.meta-row{display:flex;gap:.7rem;font-size:1rem;align-items:baseline}
.meta-row__label{flex:none;width:5.4rem;font-family:var(--f-display);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-3);padding-top:.15em}
.meta-row__val{color:var(--ink)}
.meta-row__val a{color:var(--emerald)}
.badge{display:inline-block;font-family:var(--f-display);font-size:.72rem;letter-spacing:.06em;
  background:rgba(28,63,107,.1);color:var(--royal);border:1px solid rgba(28,63,107,.25);border-radius:999px;padding:.2em .8em}

/* ---- Panels / prose --------------------------------------- */
.panel-parchment{background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(1.6rem,4vw,2.6rem)}
.prose{max-width:70ch;margin-inline:auto}
.prose h2{font-size:1.7rem;margin-top:1.6em}
.prose h3{font-size:1.25rem;color:var(--emerald);margin-top:1.4em}
.prose > p:first-of-type::first-letter{font-family:var(--f-deco);font-weight:700;font-size:3.4em;float:left;line-height:.72;padding:.06em .12em 0 0;color:var(--gold-3)}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.3rem;margin:1.6rem 0}
.info-tile{background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-soft)}
.info-tile__icon{width:44px;height:44px;color:var(--emerald);margin-bottom:.4rem}
.info-tile h3{margin:0 0 .3rem;color:var(--forest-2);font-size:1.15rem}
.info-tile p{margin:0;font-size:1rem;color:var(--ink-2)}
.info-tile__cta{margin-top:.9rem !important}

/* ---- Accommodation callout (programme page) --------------- */
.stay-callout{display:flex;gap:1.2rem;align-items:flex-start;margin:0 0 2rem;
  background:var(--card);border:1px solid var(--card-edge);border-left:5px solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:1.4rem 1.6rem}
.stay-callout__icon{flex:none;width:46px;height:46px;color:var(--emerald)}
.stay-callout__body{flex:1}
.stay-callout__title{font-family:var(--f-display);font-size:1.35rem;color:var(--forest-2);margin:.05em 0 .4rem}
.stay-callout__body p{margin:0 0 .4rem;color:var(--ink-2)}
.stay-callout .stay__link{margin-top:.5rem}
@media (max-width:520px){.stay-callout{flex-direction:column;gap:.7rem}}

/* ---- Enter code (the "seal") ------------------------------ */
.enter-wrap{display:flex;align-items:center;justify-content:center;padding:clamp(2rem,6vw,4.5rem) 1rem}
.enter-card{max-width:540px;width:100%;background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(1.8rem,5vw,3rem);text-align:center;position:relative}
.enter-card::after{content:"";position:absolute;inset:10px;border:1px solid rgba(140,106,30,.35);border-radius:8px;pointer-events:none}
.enter-card__seal{width:86px;height:86px;color:var(--gold-3);margin:0 auto .6rem}
.enter-card__title{font-size:1.8rem;margin:.1em 0 .3rem}
.enter-card__prompt{color:var(--ink-2);max-width:40ch;margin:0 auto 1.6rem}
.code-input{font-family:var(--f-display);font-weight:700;font-size:1.5rem;letter-spacing:.22em;text-transform:uppercase;
  text-align:center;width:100%;padding:.7em .6em;border:1px solid var(--card-edge);border-radius:10px;background:#fffdf6;color:var(--forest-2)}
.code-input::placeholder{color:#c3b184;letter-spacing:.12em;font-weight:400}
.enter-help{margin-top:1.4rem;font-size:.98rem;color:var(--muted)}
.enter-help a{color:var(--emerald)}

/* ---- Forms ------------------------------------------------- */
.form{max-width:640px;margin-inline:auto}
.field{margin-bottom:1.4rem}
.field__label{display:block;font-family:var(--f-display);font-size:.88rem;letter-spacing:.03em;color:var(--forest-2);margin-bottom:.4rem}
.field__req{color:var(--wine)}
.field__help{font-size:.94rem;color:var(--muted);font-style:italic;margin:.3rem 0 0}
input[type=text],input[type=email],input[type=number],input[type=url],input[type=time],input[type=date],input[type=password],textarea,select{
  width:100%;font-family:var(--f-body);font-size:1.05rem;padding:.68em .9em;border:1px solid var(--card-edge);
  border-radius:10px;background:#fffdf6;color:var(--ink)}
textarea{min-height:5rem;resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.4rem}
.field--full{grid-column:1/-1}
.form-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:1.6rem}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.choice__opt input{position:absolute;opacity:0;pointer-events:none}
.choice__box{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;cursor:pointer;
  padding:1.2rem 1rem;border:1.5px solid var(--card-edge);border-radius:12px;background:#fffdf6;transition:.15s;height:100%}
.choice__box strong{font-family:var(--f-display);font-size:1rem;color:var(--forest-2)}
.choice__box .motif{width:38px;height:38px;color:var(--muted)}
.choice__opt input:checked + .choice__box{border-color:var(--gold);background:#fbf2d9;box-shadow:0 0 0 3px rgba(216,178,76,.25)}
.choice__opt input:checked + .choice__box .motif{color:var(--emerald)}
.choice__opt input:focus-visible + .choice__box{outline:2px solid var(--gold);outline-offset:2px}
.choice__opt--no input:checked + .choice__box{border-color:var(--wine);background:#f6e7e5;box-shadow:0 0 0 3px rgba(124,35,52,.16)}
.choice__opt--no input:checked + .choice__box .motif{color:var(--wine)}

/* ---- Alerts ------------------------------------------------ */
.alert{border-radius:10px;padding:.85em 1.1em;margin:1.2rem 0;border:1px solid;font-size:1rem}
.alert--ok{background:#e7f1e6;border-color:#9ec49c;color:#204a24}
.alert--err{background:#f6e5e2;border-color:#d4a29a;color:#7a2a20}

/* ---- Feedback (RSVP thanks) ------------------------------- */
.feedback{max-width:600px;margin:2rem auto;text-align:center}
.feedback__mark{width:84px;height:84px;margin:0 auto .5rem}
.feedback--yes .feedback__mark{color:var(--emerald)}
.feedback--no .feedback__mark{color:var(--heather)}

/* ---- Guest footer ----------------------------------------- */
.site-footer{margin-top:4rem;color:#e7dcbf;text-align:center;padding:3.2rem 1rem 3rem;
  background:radial-gradient(130% 120% at 50% 120%, #235542, #0f2620)}
.site-footer .motif--footer{width:66px;height:66px;color:var(--gold-2)}
.site-footer__names{font-family:var(--f-script);font-size:2.7rem;color:#fff;margin:.1em 0 0}
.site-footer__years{font-family:var(--f-display);letter-spacing:.26em;text-transform:uppercase;font-size:.72rem;color:var(--gold-2);margin:.2em 0}
.site-footer__made{font-style:italic;color:#cbbf9f;margin:.5rem 0 0}

/* ---- Photos / picture frames ------------------------------ */
.photo{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card);
  border:1px solid var(--card-edge);box-shadow:var(--shadow-soft)}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo--empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;
  border:2px dashed rgba(140,106,30,.5);
  background:repeating-linear-gradient(45deg,rgba(182,144,47,.05) 0 12px,transparent 12px 24px),var(--card)}
.photo__ph{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--gold-3);text-align:center;padding:1rem}
.photo__ph .motif{width:46px;height:46px;opacity:.85}
.photo__hint{font-family:var(--f-display);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.photo__cap{font-family:var(--f-body);font-style:italic;font-size:.95rem;color:var(--ink-2);
  padding:.6rem .9rem;background:var(--card);border-top:1px solid var(--card-edge)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.3rem}
.gallery .photo{aspect-ratio:4/3}
.gallery .photo--empty{min-height:0;height:100%}

/* ---- Hero photo background (drop assets/img/hero.jpg) ------ */
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.4;filter:saturate(.9)}
.hero--photo::after{box-shadow:inset 0 0 170px 55px rgba(6,18,14,.72)}

/* ---- Our Story — an illuminated chronicle ------------------ */
.chron{overflow:clip}

/* Reading-progress ribbon (JS only) */
.chron-progress{display:none;position:fixed;top:0;left:0;width:100%;height:4px;z-index:60;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-3),var(--gold-2),var(--gold-3));
  box-shadow:0 1px 4px rgba(60,40,10,.35)}
.js-saga .chron-progress{display:block}

/* Cover */
.chron-cover{text-align:center;max-width:64ch;margin-inline:auto;
  padding:clamp(2.4rem,6vw,4rem) 0 clamp(1.4rem,3vw,2.2rem)}
.chron-seal{display:flex;align-items:center;justify-content:center;width:92px;height:92px;
  margin:0 auto 1.1rem;rotate:-6deg;color:#f3e0c0;
  background:radial-gradient(circle at 36% 30%, #a4453a, #7c2334 62%, #5e1a27);
  border-radius:46% 54% 50% 50% / 52% 46% 54% 48%;
  box-shadow:inset 0 3px 8px rgba(255,235,210,.28), inset 0 -5px 10px rgba(40,5,12,.5), 0 6px 16px -6px rgba(60,15,25,.55);
  position:relative}
.chron-seal::after{content:"";position:absolute;inset:7px;border:1px dashed rgba(243,224,192,.5);
  border-radius:inherit;pointer-events:none}
.chron-seal .motif{width:46px;height:46px}
.chron-cover__q{font-family:var(--f-script);font-size:clamp(1.7rem,4.4vw,2.2rem);
  color:var(--gold-3);margin:1.2rem 0 0;line-height:1.2}
.chron-cover__hint{display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--f-display);letter-spacing:.22em;text-transform:uppercase;
  font-size:.72rem;color:var(--gold-3);margin-top:1.7rem}
.chron-cover__hint svg{width:22px;height:22px;color:var(--gold);animation:chronBob 1.9s ease-in-out infinite}
@keyframes chronBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Chapters */
.chron-chapter{position:relative;padding:clamp(2.6rem,7vw,5rem) 0;--accent:var(--gold-3)}
.chron-chapter + .chron-chapter::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(520px,86vw);height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.chron-chapter--scotland{--accent:var(--heather)}
.chron-chapter--ocean{--accent:var(--royal)}
.chron-chapter--brazil{--accent:var(--emerald)}
.chron-chapter--nl{--accent:var(--oranje)}
.chron-chapter--home{--accent:var(--gold-3)}
.chron-chapter--epilogue{--accent:var(--wine)}

.chron__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.chron__bg::before{content:"";position:absolute;inset:0;
  background:radial-gradient(78% 68% at 50% 34%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 72%)}
.chron__glyph{position:absolute;color:var(--accent);will-change:transform}
.chron__glyph svg{width:100%;height:100%}
.chron__glyph--1{width:min(56vw,460px);aspect-ratio:1;top:-6%;right:-7%;opacity:.09}
.chron__glyph--2{width:min(30vw,210px);aspect-ratio:1;bottom:2%;left:-5%;opacity:.08}

.chron-chapter__head{position:relative;z-index:1;text-align:center;max-width:40rem;
  margin:0 auto clamp(1.8rem,4vw,2.8rem)}
.chron-chapter__head .eyebrow{color:var(--accent);margin-bottom:.5rem}
.chron-chapter__title{font-size:clamp(2rem,4.6vw,3rem);color:var(--forest-2);margin:0 0 .3rem}
.chron-chapter__sub{font-style:italic;font-size:1.16rem;color:var(--ink-2);margin:0}
.divider--chapter{max-width:280px;margin:1.3rem auto 0}

/* The reading column. flow-root keeps doodle/slip floats inside the chapter. */
.chron-chapter__body{position:relative;z-index:1;display:flow-root;max-width:64ch;margin-inline:auto}
.chron-chapter__body > p:first-of-type::first-letter{font-family:var(--f-deco);font-weight:700;
  font-size:3.3em;float:left;line-height:.72;padding:.08em .12em 0 0;color:var(--accent)}

/* Slips — handwritten margin notes tucked between the paragraphs */
.chron-slip{position:relative;display:block;width:min(88%,30rem);margin:.6rem auto 1.8rem;
  padding:1.05rem 1.3rem .9rem;background:var(--card);border:1px solid var(--card-edge);
  border-radius:10px 16px 12px 18px / 16px 10px 18px 12px;box-shadow:var(--shadow-soft);
  font-family:var(--f-hand);font-weight:500;font-size:1.5rem;line-height:1.3;color:var(--ink-2);
  text-align:center;rotate:-1.3deg}
.chron-slip:nth-of-type(even){rotate:1.5deg}
.chron-slip::before{content:"";position:absolute;top:-9px;left:50%;margin-left:-7px;width:15px;height:15px;
  border-radius:52% 48% 46% 54% / 48% 52% 54% 46%;
  background:radial-gradient(circle at 35% 30%, #a4453a, #7c2334 70%);
  box-shadow:0 2px 4px rgba(40,10,15,.3);transition:transform .3s ease}
/* When its phrase is hovered/activated, a note lifts and its wax seal swells. */
.chron-slip{transition:box-shadow .3s ease}
.chron-slip.is-linked{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent),var(--shadow)}
.chron-slip.is-linked::before{transform:scale(1.3)}
@keyframes chron-slip-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}
  70%{box-shadow:0 0 0 13px transparent}100%{box-shadow:0 0 0 0 transparent}}
.chron-slip.is-pulsing{animation:chron-slip-pulse 1.15s ease-out}

/* Highlight markers — an inline "highlighter" sweep that ties a phrase in the
   prose to its margin note. The pen draws itself in as the phrase scrolls into
   view (JS adds .is-drawn); hovering, focusing or activating either the phrase
   or its note lights up the pair. */
.chron-mark{font:inherit;color:inherit;cursor:pointer;border:0;margin:0 -.04em;padding:0 .12em;
  border-radius:4px;-webkit-appearance:none;appearance:none;background-color:transparent;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 30%,transparent),
                                   color-mix(in srgb,var(--accent) 30%,transparent));
  background-repeat:no-repeat;background-position:0 50%;background-size:0% 1.15em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .8s cubic-bezier(.2,.75,.25,1),background-image .25s ease}
/* Drawn in: the highlighter now covers the full letter height, not a bottom band. */
.chron-mark.is-drawn{background-size:100% 1.15em}
.chron-mark::after{content:"\2766";font-family:var(--f-deco);font-size:.6em;vertical-align:.55em;
  margin-left:.15em;color:var(--accent);opacity:.7}
.chron-mark:hover,.chron-mark:focus-visible,.chron-mark.is-linked{
  outline:none;background-size:100% 1.15em;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 52%,transparent),
                                   color-mix(in srgb,var(--accent) 52%,transparent))}
.chron-mark:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}

/* Doodles — little ink sketches the text wraps around */
.chron-doodle{float:right;width:72px;height:72px;margin:.15rem 0 .5rem 1.1rem;
  color:var(--ink-2);opacity:.7;rotate:4deg;shape-margin:.6rem}
.chron-doodle:nth-of-type(even){float:left;margin:.15rem 1.1rem .5rem 0;rotate:-5deg}
.chron-doodle svg,.chron-doodle img{display:block;width:100%;height:100%}

/* Photos — taped-in snapshots and framed plates */
.chron-photo{clear:both;position:relative;margin:2rem auto}
.chron-photo .photo{margin:0}
.chron-photo--snap{width:min(78%,24rem);rotate:-1.6deg}
.chron-photo--snap:nth-of-type(even){rotate:1.9deg}
.chron-photo--snap::after{content:"";position:absolute;top:-11px;left:50%;width:92px;height:24px;
  margin-left:-46px;rotate:-3deg;background:linear-gradient(180deg,rgba(222,196,130,.8),rgba(222,196,130,.5));
  box-shadow:0 1px 2px rgba(60,40,10,.15)}
.chron-photo--plate{width:100%;margin:2.4rem auto}
.chron-photo--plate .photo{border:4px solid var(--card);box-shadow:var(--shadow)}
.chron-photo--plate .photo::after{content:"";position:absolute;inset:9px;border:1px solid var(--accent);
  opacity:.35;border-radius:8px;pointer-events:none}

/* The recurring question, set identically every time it appears */
.chron-refrain{clear:both;text-align:center;margin:2.8rem auto;max-width:36rem}
.chron-refrain__rule{display:flex;align-items:center;gap:.9rem;max-width:300px;margin:0 auto}
.chron-refrain__rule::before,.chron-refrain__rule::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.chron-refrain__q{font-family:var(--f-deco);font-weight:700;font-size:clamp(1.25rem,3.4vw,1.6rem);
  color:var(--gold-3);margin:1.1rem auto .5rem;line-height:1.3}
.chron-refrain__answer{font-family:var(--f-script);font-size:clamp(2.4rem,7vw,3.2rem);
  color:var(--accent);margin:.2rem 0 .5rem;line-height:1.05}
.chron-refrain__sub{font-style:italic;font-size:1.05rem;color:var(--ink-2);max-width:44ch;
  margin:0 auto 1.1rem}
.chron-cta{clear:both}

/* Chapter navigation — floating medallion + parchment sheet (JS only) */
.chron-nav{display:none}
.js-saga .chron-nav{display:block}
.chron-nav__btn{position:fixed;right:1.1rem;bottom:1.1rem;z-index:56;width:54px;height:54px;
  border-radius:50%;background:linear-gradient(180deg,var(--emerald),var(--forest-2));
  color:var(--gold-2);border:1px solid var(--forest-2);box-shadow:var(--shadow);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .15s}
.chron-nav__btn:hover{transform:translateY(-1px)}
.chron-nav__btn .motif{width:28px;height:28px}
.chron-nav__sheet{position:fixed;right:1.1rem;bottom:5rem;z-index:56;min-width:230px;
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.1rem 1.3rem;display:none}
.chron-nav__sheet.is-open{display:block}
.chron-nav__title{font-family:var(--f-display);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-3);margin:0 0 .6rem}
.chron-nav__sheet ul{list-style:none;margin:0;padding:0}
.chron-nav__sheet li{margin:.4rem 0}
.chron-nav__sheet a{display:inline-flex;align-items:center;font-family:var(--f-display);
  font-size:.92rem;color:var(--ink);text-decoration:none}
.chron-nav__sheet a::before{content:"";width:7px;height:7px;background:var(--gold-2);
  border:1px solid var(--gold-3);transform:rotate(45deg);margin-right:.65em;opacity:.65;flex:none}
.chron-nav__sheet a:hover{color:var(--emerald)}
.chron-nav__sheet a.is-active{color:var(--gold-3);font-weight:700}

/* Scroll-reveal (only when JS is on; motion-safe). Slips and snapshots
   "settle" into their tilt as they appear. */
.js-saga [data-reveal]{opacity:0;transform:translateY(32px);
  transition:opacity .7s ease,transform .7s ease;transition-delay:calc(var(--i,0)*80ms)}
.js-saga [data-reveal].is-in{opacity:1;transform:none}
.js-saga .chron-slip[data-reveal],.js-saga .chron-photo--snap[data-reveal]{
  transition:opacity .7s ease,transform .7s ease,rotate .9s cubic-bezier(.2,.8,.3,1.15)}
.js-saga .chron-slip[data-reveal]:not(.is-in),
.js-saga .chron-photo--snap[data-reveal]:not(.is-in){rotate:0deg}
@media (prefers-reduced-motion:reduce){
  .js-saga [data-reveal]{opacity:1;transform:none;transition:none}
  .chron-cover__hint svg{animation:none}
  .chron-mark{transition:none;background-size:100% 1.15em}
  .chron-slip.is-pulsing{animation:none}
}

/* Wide screens: promote the slips into the true margins (Tufte-style),
   alternating sides, and nudge the doodles outward with them. */
@media (min-width:1200px){
  /* Slips sit beside the paragraph they annotate, not underneath it. The
     -3.4rem is a no-JS fallback; main.js refines it per slip so each slip's
     bottom meets the end of its paragraph. */
  .chron-slip{float:right;clear:right;width:15rem;margin:-3.4rem -17rem 1.2rem 1.6rem;
    font-size:1.38rem;text-align:left;padding:.95rem 1.15rem .85rem}
  .chron-slip::before{left:1.2rem;margin-left:0}
  .chron-slip:nth-of-type(even){float:left;clear:left;margin:-3.4rem 1.6rem 1.2rem -17rem}
  .chron-doodle{width:86px;height:86px;margin-right:-6.8rem;clear:right}
  .chron-doodle:nth-of-type(even){margin-right:0;margin-left:-6.8rem;clear:left}
  /* In the margins the notes stand beside text that is already readable, so
     they must not fade in late: show marginalia immediately on wide screens.
     (The settle-in reveal remains on smaller screens, where slips sit
     between the paragraphs.) */
  .js-saga .chron-slip[data-reveal],.js-saga .chron-doodle[data-reveal]{
    opacity:1;transform:none;transition:none}
  .js-saga .chron-slip[data-reveal]:not(.is-in){rotate:-1.3deg}
  .js-saga .chron-slip[data-reveal]:nth-of-type(even):not(.is-in){rotate:1.5deg}
}
@media (max-width:560px){
  .chron-slip{font-size:1.38rem;width:min(92%,30rem)}
  .chron-doodle{width:60px;height:60px}
  .chron-photo--snap{width:min(88%,24rem)}
  .chron__glyph--1{width:74vw;opacity:.07}
}

/* ============================================================
   Our Story — the short version + the "extended edition" gate
   ============================================================ */
.story-short{max-width:60ch;margin-inline:auto;padding-bottom:clamp(2rem,5vw,3.4rem)}
.story-short__meta{display:inline-block;margin-top:1.2rem;font-family:var(--f-display);
  letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;color:var(--gold-3)}
.story-short__body{margin-top:clamp(1.4rem,4vw,2.4rem)}
.story-short__ch{margin:0 0 1.9rem}
.story-short__ch p{margin:0}
.story-short__lead{font-family:var(--f-deco);font-weight:700;font-size:1.34rem;
  color:var(--forest-2);margin:0 0 .35rem;line-height:1.2}
.story-short__close{margin:2rem 0 0;font-style:italic;color:var(--ink-2);
  border-top:1px solid var(--card-edge);padding-top:1.5rem}
.story-short__cta{text-align:center;margin-top:clamp(2rem,5vw,3rem)}
.story-short__hint{display:block;margin-top:.7rem;font-family:var(--f-display);
  letter-spacing:.16em;text-transform:uppercase;font-size:.68rem;color:var(--muted)}

/* The confirmation dialog (native <dialog>). Themed as a sealed parchment card. */
.ext-dialog{border:0;padding:0;background:transparent;max-width:min(92vw,30rem);
  color:var(--ink);overflow:visible}
.ext-dialog::backdrop{background:rgba(30,20,10,.55);backdrop-filter:blur(2px)}
.ext-dialog[open]{animation:extIn .28s cubic-bezier(.2,.8,.3,1.05)}
@keyframes extIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.ext-dialog__card{position:relative;text-align:center;background:var(--card);
  border:1px solid var(--card-edge);border-radius:16px 20px 16px 22px / 22px 16px 22px 16px;
  box-shadow:var(--shadow);padding:clamp(1.6rem,4vw,2.4rem) clamp(1.3rem,4vw,2.2rem) clamp(1.4rem,3vw,2rem)}
.ext-dialog__seal{display:flex;align-items:center;justify-content:center;width:64px;height:64px;
  margin:-2.6rem auto .6rem;rotate:-6deg;color:#f3e0c0;
  background:radial-gradient(circle at 36% 30%, #a4453a, #7c2334 62%, #5e1a27);
  border-radius:46% 54% 50% 50% / 52% 46% 54% 48%;
  box-shadow:inset 0 3px 8px rgba(255,235,210,.28), inset 0 -5px 10px rgba(40,5,12,.5), 0 6px 16px -6px rgba(60,15,25,.55)}
.ext-dialog__seal .motif{width:32px;height:32px}
.ext-dialog__title{font-family:var(--f-deco);font-weight:700;color:var(--forest-2);
  font-size:clamp(1.4rem,4vw,1.8rem);margin:.2rem 0}
.ext-dialog .divider{margin:.6rem auto .9rem}
.ext-dialog__body{color:var(--ink-2);margin:0 0 1.4rem}
.ext-dialog__actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.ext-dialog__x{position:absolute;top:.5rem;right:.7rem;width:2rem;height:2rem;line-height:1;
  border:0;background:transparent;color:var(--muted);font-size:1.6rem;cursor:pointer;border-radius:50%}
.ext-dialog__x:hover{color:var(--ink)}
.chron-cta__back{display:block;margin-top:1rem;font-family:var(--f-display);
  letter-spacing:.12em;text-transform:uppercase;font-size:.74rem;color:var(--gold-3);text-decoration:none}
.chron-cta__back:hover{color:var(--emerald)}
@media (prefers-reduced-motion:reduce){
  .ext-dialog[open]{animation:none}
}

/* ============================================================
   Admin back-office
   ============================================================ */
body.admin{background:#f1eee4;color:#2a2620;font-family:var(--f-body);font-size:1rem;line-height:1.55;
  background-image:none}
body.admin .container{width:min(1240px,94vw)}
.admin-bar{background:linear-gradient(180deg,#1e4c3c,#153a2c);color:#f0e7cb;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px -6px rgba(0,0,0,.4)}
.admin-bar__inner{display:flex;align-items:center;gap:1rem;min-height:60px}
.admin-bar__brand{display:flex;align-items:center;gap:.55rem;color:#f0e7cb;text-decoration:none;font-family:var(--f-display);font-size:1.02rem;letter-spacing:.03em}
.admin-bar__brand em{color:var(--gold-2);font-style:normal;font-size:.78em;letter-spacing:.06em}
.admin-bar__crest{width:26px;height:26px;color:var(--gold-2)}
.admin-nav{margin-left:auto;display:flex;gap:1.15rem;align-items:center;flex-wrap:wrap}
.admin-nav a{color:#e7dcbf;text-decoration:none;font-size:.92rem;padding:.2em 0;border-bottom:2px solid transparent}
.admin-nav a:hover{color:#fff}
.admin-nav a.is-active{color:var(--gold-2);border-bottom-color:var(--gold-2)}
.admin-nav__out{margin-left:.4rem;color:#f3c9c0}
button.admin-nav__out{background:none;border:0;padding:.2em 0;font:inherit;font-size:.92rem;cursor:pointer}
button.admin-nav__out:hover{color:#fff}
.admin-main{padding:2rem 0 4rem}
.admin-foot{border-top:1px solid #ded7c4;color:#8a8069;font-size:.85rem;padding:1.4rem 0;text-align:center}

.page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.page-head h1{font-size:1.75rem;margin:0;color:#1e4c3c}
.page-head p{margin:.2rem 0 0;color:#6b6152}
.panel{background:#fff;border:1px solid #e2dcc9;border-radius:12px;box-shadow:0 1px 3px rgba(30,20,5,.06);padding:1.5rem;margin-bottom:1.5rem}
.panel h2{font-size:1.2rem;color:#1e4c3c;margin:0 0 1rem}
.muted{color:#7a715d}
.stack>*+*{margin-top:1rem}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.8rem}
.stat{display:block;background:#fff;border:1px solid #e2dcc9;border-radius:12px;padding:1.2rem 1.3rem;box-shadow:0 1px 3px rgba(30,20,5,.06);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
a.stat:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(30,20,5,.12)}
.stat__num{font-family:var(--f-display);font-weight:700;font-size:2rem;color:var(--emerald);line-height:1}
.stat__label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#8a7f68;margin-top:.3rem}
.stat--accent{background:linear-gradient(180deg,#1e4c3c,#163a2c);border-color:#123227}
.stat--accent .stat__num{color:var(--gold-2)}
.stat--accent .stat__label{color:#cfc4a4}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:.96rem}
.table th,.table td{text-align:left;padding:.7em .8em;border-bottom:1px solid #ece6d6;vertical-align:top}
.table th{font-family:var(--f-display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#7a715d;white-space:nowrap}
.table tbody tr:hover{background:#faf7ee}
.table code{font-family:'Cinzel',ui-monospace,monospace;background:#f3eede;border:1px solid #e4dcc4;border-radius:6px;padding:.1em .5em;letter-spacing:.06em;color:var(--forest-2)}
.row-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.inline-form{display:inline}

.pill{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.03em;border-radius:999px;padding:.18em .7em;border:1px solid}
.pill--yes{background:#e6f1e6;color:#22662f;border-color:#a7cda7}
.pill--no{background:#f6e6e4;color:#8f3229;border-color:#d9aaa2}
.pill--wait{background:#f1ece0;color:#8a7f68;border-color:#ddd3ba}
.pill--info{background:#e7eef7;color:#1d3f6b;border-color:#aec4de}

.checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.6rem}
.checkgrid label{display:flex;gap:.6rem;align-items:flex-start;background:#faf7ee;border:1px solid #e6dfcc;border-radius:10px;padding:.7em .8em;cursor:pointer}
.checkgrid input{margin-top:.25em}
.checkgrid label:hover{border-color:var(--gold)}
.checkgrid .cg-title{font-weight:600;color:#2a2620}
.checkgrid .cg-sub{color:#8a7f68;font-size:.85rem}

/* ---- Admin: photo manager --------------------------------- */
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.2rem}
.img-slot{border:1px solid #e2dcc9;border-radius:12px;padding:1rem;background:#fdfcf8}
.img-slot__label{font-weight:600;color:#2a2620;font-size:.92rem;margin-bottom:.55rem;min-height:2.4em}
.img-slot__preview{aspect-ratio:4/3;border-radius:8px;overflow:hidden;margin-bottom:.7rem;
  background:#f3eede;border:1px dashed #d3c7a8;display:flex;align-items:center;justify-content:center}
.img-slot__preview img{width:100%;height:100%;object-fit:cover}
.img-slot__empty{color:#a2977e;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.img-slot input[type=file]{width:100%;font-size:.82rem;margin-bottom:.6rem}
.img-slot__actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

/* ---- Admin: content editor -------------------------------- */
.content-tabs{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:1.4rem;border-bottom:1px solid #ded7c4}
.content-tabs a{padding:.55em .95em;border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;
  color:#6b6152;text-decoration:none;font-family:var(--f-display);font-size:.9rem;letter-spacing:.02em;margin-bottom:-1px}
.content-tabs a:hover{color:#1e4c3c;background:#faf7ee}
.content-tabs a.is-active{color:#1e4c3c;background:#fff;border-color:#ded7c4;font-weight:600}
.c-editor{padding-bottom:1.5rem}
.c-cols-head{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:.4rem}
.c-cols-head span{font-family:var(--f-display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#8a7f68}
.c-sub{font-size:1.05rem;color:#1e4c3c;margin:1.8rem 0 .9rem;padding-bottom:.35rem;border-bottom:1px solid #ece6d6}
.c-sub:first-child{margin-top:0}
.c-field{margin:0 0 1.25rem}
.c-field__label{font-family:var(--f-display);font-size:.9rem;color:var(--forest-2);margin-bottom:.35rem}
.c-field__note{margin:-.1rem 0 .45rem}
.c-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.c-field--set{max-width:520px}
.c-field--set .field__label{margin-bottom:.35rem}
.c-photo{margin:0 0 1.4rem;padding:1rem;border:1px solid #e2dcc9;border-radius:12px;background:#fdfcf8}
.c-photo__label{font-weight:600;color:#2a2620;font-size:.92rem;margin-bottom:.7rem}
.c-photo__row{display:flex;gap:1.1rem;align-items:flex-start;flex-wrap:wrap}
.c-photo__preview{width:220px;aspect-ratio:4/3;flex:0 0 auto;border-radius:8px;overflow:hidden;
  background:#f3eede;border:1px dashed #d3c7a8;display:flex;align-items:center;justify-content:center}
.c-photo__preview img{width:100%;height:100%;object-fit:cover}
.c-photo__ctl{flex:1 1 240px;min-width:220px}
.c-photo__ctl input[type=file]{width:100%;font-size:.82rem;margin-bottom:.6rem}
.content-savebar{position:sticky;bottom:0;z-index:20;background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);border-top:1px solid #ded7c4;margin-top:.5rem}
.content-savebar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.login-card{width:100%;max-width:380px;background:#fff;border:1px solid #e2dcc9;border-radius:14px;box-shadow:0 20px 50px -24px rgba(0,0,0,.4);padding:2.2rem;text-align:center}
.login-card .brand__crest-svg{width:52px;height:52px;color:var(--gold-3);margin:0 auto .4rem}
.login-card h1{font-size:1.4rem;margin:.2rem 0 1.4rem}

/* ---- Utilities -------------------------------------------- */
.text-center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}
.mb-0{margin-bottom:0}
.flow>*+*{margin-top:1.1rem}
.hidden,[hidden]{display:none!important}
.nowrap{white-space:nowrap}

/* ---- Responsive ------------------------------------------- */
@media (max-width:860px){
  .site-header__inner{position:relative;flex-wrap:wrap}
  .nav-toggle{display:flex;margin-left:auto}
  .mainnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:.4rem;background:var(--parchment);border-bottom:1px solid var(--card-edge);padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
  .mainnav.is-open{display:flex}
  .mainnav__spacer{display:none}
  .mainnav .btn{margin-top:.4rem}
  .admin-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:.5rem;background:#1a4335;padding:1rem 1.2rem}
  .admin-bar__inner{position:relative;flex-wrap:wrap}
  .admin-nav.is-open{display:flex}
  .nav-toggle--dark{display:flex}
}
@media (max-width:560px){
  body{font-size:1.08rem}
  .form-grid{grid-template-columns:1fr}
  .choice{grid-template-columns:1fr}
  .page-head{align-items:flex-start}
  .c-cols,.c-cols-head{grid-template-columns:1fr}
  .c-cols-head span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}