/* ============================================================
   File: assets/css/frets.css
   Version: 1.0.16
   The Frets Family — site stylesheet.
   Tokens, base layer, components and page styles, drawn from the
   Frets Family Design System (crest azure + antique-map cobalt,
   ink, ivory/paper, gold). Fonts: Cormorant Garamond / Mulish /
   Spline Sans Mono.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

/* ---------------- Tokens ---------------- */
:root {
  /* Azure (primary brand — the shield field) */
  --azure-50:#EAF7FD; --azure-100:#D2EEFB; --azure-200:#A6DBF5; --azure-300:#6FC4EF;
  --azure-400:#38ACE9; --azure-500:#0E9FE7; --azure-600:#0B82C1; --azure-700:#09679A; --azure-800:#0A5074;

  /* Cobalt (the antique map ground + the site's own blues) */
  --cobalt-400:#6E86B4; --cobalt-500:#4E6BA0; --cobalt-600:#324F86; --cobalt-700:#0A4E92;
  --cobalt-800:#004488; --cobalt-900:#00285F; --cobalt-950:#001C40;
  --cobalt-royal:#204080; --cobalt-border:#99A9BF;

  /* Ink */
  --ink-900:#0B1622; --ink-800:#16242F; --ink-700:#243646; --ink-600:#3A4D5E; --ink-500:#566778; --ink-400:#7A8896;

  /* Ivory & paper */
  --paper-50:#FCFAF6; --ivory-100:#F7F2EA; --ivory-200:#F4EFE7; --ivory-300:#EAE2D4; --ivory-400:#DBD0BC; --white:#FFFFFF;

  /* Gold */
  --gold-200:#EADBB8; --gold-300:#DCC591; --gold-400:#CFB173; --gold-500:#C6A15B; --gold-600:#A8853F; --gold-700:#836630;

  /* Status */
  --positive-500:#2E7D5B; --positive-100:#DCEFE5;
  --caution-500:#B7791F; --caution-100:#F6EBD3;
  --critical-500:#A8392F; --critical-100:#F4DDDA;

  /* Semantic */
  --surface-page:var(--paper-50); --surface-card:var(--white); --surface-sunken:var(--ivory-100);
  --surface-inverse:var(--cobalt-800); --surface-inverse-deep:var(--cobalt-900); --surface-brand:var(--azure-500);
  --text-strong:var(--ink-900); --text-body:var(--ink-800); --text-muted:var(--ink-500); --text-faint:var(--ink-400);
  --text-inverse:var(--ivory-200); --text-on-azure:var(--ink-900); --text-on-cobalt:var(--ivory-200); --text-link:var(--cobalt-600);
  --brand-primary:var(--azure-500); --brand-deep:var(--cobalt-800); --brand-accent:var(--gold-500);
  --border-hairline:var(--ivory-400); --border-subtle:#E4DCCD; --border-strong:var(--ink-900);
  --border-azure:var(--azure-500); --rule-ink:var(--ink-900);
  --focus-ring:var(--azure-500); --selection-bg:var(--azure-100);

  /* Fonts */
  --font-display:'Cormorant Garamond','Times New Roman',Georgia,serif;
  --font-sans:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* Weights */
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --weight-display:500; --weight-display-bold:600;

  /* Type scale */
  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:3rem; --text-4xl:4rem; --text-5xl:5.5rem; --text-6xl:7.5rem;

  /* Line heights */
  --leading-tight:1.04; --leading-snug:1.18; --leading-heading:1.12; --leading-body:1.6; --leading-relaxed:1.75;

  /* Tracking */
  --tracking-tighter:-0.02em; --tracking-tight:-0.01em; --tracking-normal:0;
  --tracking-wide:0.04em; --tracking-wider:0.12em; --tracking-widest:0.24em;

  /* Spacing */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem;
  --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem; --space-12:7rem; --space-16:10rem;

  /* Layout */
  --container:1180px; --measure:64ch; --gutter:var(--space-6);

  /* Radii */
  --radius-xs:2px; --radius-sm:3px; --radius-md:5px; --radius-lg:8px; --radius-pill:999px; --radius-circle:50%;

  /* Borders */
  --border-width-hair:1px; --border-width:1.5px; --border-width-bold:2px; --border-width-rule:3px;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(11,22,34,0.06); --shadow-sm:0 2px 8px rgba(11,22,34,0.07);
  --shadow-md:0 8px 24px rgba(11,22,34,0.09); --shadow-lg:0 18px 48px rgba(0,42,92,0.14);
  --shadow-azure:0 10px 30px rgba(14,159,231,0.22);

  /* Motion */
  --ease-standard:cubic-bezier(0.2,0,0,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
  --duration-fast:120ms; --duration-base:200ms; --duration-slow:360ms;

  /* Z */
  --z-sticky:100; --z-overlay:1000; --z-modal:1100;
}

/* ---------------- Base ---------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font-sans); font-size:var(--text-md); line-height:var(--leading-body);
  color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"kern" 1,"liga" 1;
}
h1,h2,h3,h4,h5{font-family:var(--font-display); font-weight:var(--weight-display); color:var(--text-strong);
  line-height:var(--leading-heading); letter-spacing:var(--tracking-tight); margin:0 0 0.4em; text-wrap:balance;}
h1{font-size:var(--text-4xl); line-height:var(--leading-tight);}
h2{font-size:var(--text-2xl);} h3{font-size:var(--text-xl);} h4{font-size:var(--text-lg);}
p{margin:0 0 1em; text-wrap:pretty;}
p.lead{font-size:var(--text-lg); line-height:var(--leading-snug); color:var(--text-body);}
a{color:var(--text-link); text-decoration:none;}
a:hover{text-decoration:underline; text-underline-offset:0.18em;}
small{font-size:var(--text-sm);} strong{font-weight:var(--weight-bold);}
img{max-width:100%; display:block;}
hr{border:0; border-top:var(--border-width-hair) solid var(--border-subtle); margin:var(--space-6) 0;}
::selection{background:var(--selection-bg); color:var(--ink-900);}
:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px;}

/* ---------------- Brand utilities ---------------- */
.fr-eyebrow{display:inline-flex; align-items:center; gap:var(--space-3); font-family:var(--font-mono);
  font-size:var(--text-xs); font-weight:500; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--azure-600);}
.fr-eyebrow--muted{color:var(--text-muted);} .fr-eyebrow--light{color:var(--azure-300);} .fr-eyebrow--gold{color:var(--gold-600);}
.fr-eyebrow__tick{width:18px; height:1px; background:currentColor; opacity:.8;}

.fr-divider{display:flex; align-items:center; gap:var(--space-4); width:100%;}
.fr-divider__line{flex:1; height:1px; background:var(--rule-ink); opacity:.65;}
.fr-divider--subtle .fr-divider__line{background:var(--border-subtle); opacity:1;}
.fr-divider--light .fr-divider__line{background:var(--ivory-300); opacity:.35;}
.fr-divider__mark{width:7px; height:7px; background:var(--azure-500); transform:rotate(45deg); flex:none;}
.fr-divider--subtle .fr-divider__mark{background:var(--gold-500);}
.fr-divider--light .fr-divider__mark{background:var(--azure-400);}
.fr-divider__label{font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-muted); flex:none;}

/* ---------------- Layout ---------------- */
.site{max-width:var(--container); margin:0 auto; padding:0 var(--space-6);}
.section{padding:var(--space-10) 0;}
.section--tight{padding:var(--space-9) 0;}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-6); margin-bottom:var(--space-7); flex-wrap:wrap;}
.section__title{font-family:var(--font-display); font-weight:500; font-size:var(--text-2xl); line-height:1.05; color:var(--text-strong); margin:10px 0 0; max-width:20ch;}
.lede{font-size:1.15rem; line-height:1.6; color:var(--text-muted); max-width:52ch;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5);}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4);}

/* ---------------- Buttons ---------------- */
.ff-btn{--_bg:var(--azure-500); --_fg:var(--ink-900); --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-sans); font-weight:var(--weight-bold); font-size:var(--text-sm); line-height:1; letter-spacing:.01em;
  padding:0 var(--space-5); height:44px; border-radius:var(--radius-md);
  background:var(--_bg); color:var(--_fg); border:1.5px solid var(--_bd);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);}
.ff-btn:hover{background:color-mix(in srgb,var(--_bg) 90%,var(--ink-900)); text-decoration:none;}
.ff-btn:active{transform:translateY(1px);}
.ff-btn[disabled]{opacity:.45; pointer-events:none;}
.ff-btn--primary{--_bg:var(--azure-500); --_fg:var(--ink-900);}
.ff-btn--deep{--_bg:var(--cobalt-800); --_fg:var(--ivory-200);} .ff-btn--deep:hover{background:var(--cobalt-900);}
.ff-btn--secondary{--_bg:transparent; --_fg:var(--ink-900); --_bd:var(--ink-900);}
.ff-btn--secondary:hover{background:var(--ink-900); color:var(--ivory-200);}
.ff-btn--ghost{--_bg:transparent; --_fg:var(--cobalt-800); --_bd:transparent; padding-inline:var(--space-3);}
.ff-btn--ghost:hover{background:var(--azure-50);}
.ff-btn--gold{--_bg:var(--gold-500); --_fg:var(--ink-900);} .ff-btn--gold:hover{background:var(--gold-600); color:var(--ivory-200);}
.ff-btn--danger{--_bg:transparent; --_fg:#a11a1a; --_bd:#d98a8a;} .ff-btn--danger:hover{background:#a11a1a; color:#fff; border-color:#a11a1a;}
.lib-item{position:relative;}
.lib-check{position:absolute; top:8px; right:8px; z-index:4; width:22px; height:22px; cursor:pointer; accent-color:#a11a1a; box-shadow:0 1px 4px rgba(0,0,0,.4); border-radius:4px;}
.lib-delbar{margin-bottom:var(--space-4); display:none;}
.lib-delbar.on{display:block;}
/* event QR trigger (in the blue hero) + settings modal */
.ev-qr{display:flex; flex-direction:column; align-items:center; gap:6px; background:transparent; border:0; cursor:pointer; flex:none; padding:0;}
.ev-qr__code{background:#fff; padding:7px; border-radius:var(--radius-md); line-height:0; box-shadow:0 6px 20px rgba(0,0,0,.28);}
.ev-qr__code canvas{display:block;}
.ev-qr__cap{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory-200); opacity:.85;}
.ev-qr__ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:120px; height:120px;
  border:2px dashed rgba(244,239,231,.5); border-radius:var(--radius-md); color:var(--ivory-200);}
.ev-qr__ph small{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;}
.ev-qr:hover .ev-qr__ph{border-color:var(--gold-500); color:#fff;}
.qr-modal{position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:var(--space-5);}
.qr-modal.open{display:flex;}
.qr-modal__back{position:absolute; inset:0; background:rgba(11,22,34,.62);}
.qr-modal__panel{position:relative; z-index:1; background:var(--paper-50); color:var(--ink-900); border-radius:var(--radius-lg);
  max-width:560px; width:100%; max-height:90vh; overflow:auto; padding:var(--space-7); box-shadow:0 24px 70px rgba(0,0,0,.4);}
.qr-modal__x{position:absolute; top:8px; right:14px; background:transparent; border:0; font-size:1.7rem; line-height:1; cursor:pointer; color:var(--ink-700);}
.ff-btn--sm{height:36px; font-size:var(--text-xs); padding-inline:var(--space-4);}
.ff-btn--lg{height:52px; font-size:var(--text-base); padding-inline:var(--space-6);}
.ff-btn--block{display:flex; width:100%;}

/* ---------------- Badges & tags ---------------- */
.ff-badge{display:inline-flex; align-items:center; gap:var(--space-1); font-family:var(--font-mono); font-weight:500;
  font-size:var(--text-2xs); letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:var(--radius-xs); line-height:1;
  background:var(--azure-50); color:var(--azure-700); border:1px solid color-mix(in srgb,var(--azure-500) 28%,transparent);}
.ff-badge--cobalt{background:color-mix(in srgb,var(--cobalt-800) 12%,var(--white)); color:var(--cobalt-800); border-color:color-mix(in srgb,var(--cobalt-800) 26%,transparent);}
.ff-badge--gold{background:var(--gold-200); color:var(--gold-700); border-color:color-mix(in srgb,var(--gold-600) 36%,transparent);}
.ff-badge--ink{background:var(--ink-900); color:var(--ivory-200); border-color:var(--ink-900);}
.ff-tag{display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-sans); font-weight:600; font-size:var(--text-sm);
  padding:6px 12px; border-radius:var(--radius-pill); line-height:1; background:var(--surface-card); color:var(--ink-800);
  border:1px solid var(--border-subtle); cursor:pointer; text-decoration:none;}
.ff-tag:hover{text-decoration:none; border-color:var(--ink-400);}
.ff-tag--active{background:var(--cobalt-800); color:var(--ivory-200); border-color:var(--cobalt-800);}

/* ---------------- Cards ---------------- */
.ff-card{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column;}
.ff-card--raised{box-shadow:var(--shadow-md); border-color:transparent;}
.ff-card--cobalt{background:var(--cobalt-800); border-color:var(--cobalt-900); color:var(--ivory-200);}
.ff-card--outline{background:transparent; border:1.5px solid var(--ink-900);}
.ff-card--interactive{cursor:pointer; transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);}
.ff-card--interactive:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.ff-card__media{line-height:0; background:var(--ivory-100);}
.ff-card__media img{width:100%; height:100%; object-fit:cover;}
.ff-card__body{padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2);}
.ff-card__accent{height:3px; background:var(--azure-500);}

/* ---------------- Forms ---------------- */
.ff-field{display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4);}
.ff-field__label{font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted);}
.ff-field__control{font-family:var(--font-sans); font-size:var(--text-base); color:var(--ink-900); background:var(--surface-card);
  border:1.5px solid var(--border-subtle); border-radius:var(--radius-md); padding:0 var(--space-4); height:46px; width:100%;
  transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);}
textarea.ff-field__control{height:auto; padding:var(--space-3) var(--space-4); line-height:1.55; resize:vertical; min-height:140px;}
.ff-field__control::placeholder{color:var(--text-faint);}
.ff-field__control:hover{border-color:var(--ink-400);}
.ff-field__control:focus{outline:none; border-color:var(--azure-500); box-shadow:0 0 0 3px var(--azure-100);}

/* File inputs: pad and vertically centre, and style the browser button */
input[type="file"].ff-field__control{height:auto; min-height:46px; padding:8px var(--space-3);
  display:flex; align-items:center; font-size:var(--text-sm); color:var(--text-muted); cursor:pointer;}
input[type="file"].ff-field__control::file-selector-button{
  font-family:var(--font-sans); font-weight:700; font-size:var(--text-xs); letter-spacing:.01em;
  color:var(--cobalt-800); background:var(--azure-50); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:8px 14px; margin-right:12px; cursor:pointer;
  transition:background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);}
input[type="file"].ff-field__control::file-selector-button:hover{background:var(--azure-100); border-color:var(--azure-500);}
input[type="file"].ff-field__control::-webkit-file-upload-button{
  font-family:var(--font-sans); font-weight:700; font-size:var(--text-xs); letter-spacing:.01em;
  color:var(--cobalt-800); background:var(--azure-50); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:8px 14px; margin-right:12px; cursor:pointer;}

/* ---------------- Header ---------------- */
.hdr{position:sticky; top:0; z-index:var(--z-sticky); background:rgba(252,250,246,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-subtle);}
.hdr__in{display:flex; align-items:center; height:72px; gap:var(--space-5);}
.hdr__actions{margin-left:auto; display:flex; align-items:center; gap:var(--space-2); flex:none;}
.brand{display:flex; align-items:center; gap:var(--space-3); cursor:pointer; background:none; border:0; padding:0; text-decoration:none;}
.brand:hover{text-decoration:none;}
.brand__crest{width:34px; flex:none; line-height:0;}
.brand__crest img{width:34px; height:auto;}
.brand__name{font-family:var(--font-display); font-weight:600; font-size:1.35rem; letter-spacing:.01em; color:var(--text-strong); line-height:1; display:block; white-space:nowrap;}
.brand__tag{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); margin-top:3px; display:block;}
.nav{display:flex; align-items:center; gap:2px; flex-wrap:nowrap;}
.nav__link{font-family:var(--font-sans); font-weight:600; font-size:var(--text-sm); color:var(--text-body);
  background:none; border:0; cursor:pointer; padding:8px 9px; border-radius:var(--radius-sm); text-decoration:none; white-space:nowrap;}
.nav__link:hover{background:var(--azure-50); color:var(--cobalt-800); text-decoration:none;}
.nav__link--active{color:var(--cobalt-800);}
.nav__link--active::after{content:""; display:block; height:2px; background:var(--azure-500); margin-top:5px; border-radius:2px;}
.nav__sep{width:1px; height:24px; background:var(--border-subtle); margin:0 var(--space-1); flex:none;}
.nav__user{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);
  max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Language selector */
.lang{position:relative; display:inline-block;}
.lang__btn{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.12em; color:var(--text-body); background:none; border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:6px 9px; cursor:pointer;}
.lang__btn:hover{border-color:var(--ink-400); color:var(--cobalt-800);}
.lang__menu{display:none; position:absolute; right:0; top:calc(100% + 6px); min-width:160px; background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:4px; z-index:var(--z-overlay);}
.lang.open .lang__menu{display:block;}
.lang__item{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:var(--text-sm); font-weight:600; color:var(--text-body); text-decoration:none;}
.lang__item:hover{background:var(--azure-50); color:var(--cobalt-800); text-decoration:none;}
.lang__item.active{color:var(--cobalt-800);}
.lang__code{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--text-faint); width:22px;}

/* User menu (logged-in account dropdown, top right) */
.usermenu{position:relative;}
.usermenu__btn{display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill); padding:4px 10px 4px 4px; cursor:pointer; font-family:var(--font-sans);
  font-weight:600; font-size:var(--text-sm); color:var(--text-body);}
.usermenu__btn:hover{border-color:var(--ink-400);}
.usermenu__avatar{position:relative; overflow:hidden; width:26px; height:26px; border-radius:50%; background:var(--cobalt-800); color:var(--ivory-200);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:0.95rem; flex:none;}
.usermenu__avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top;}
.usermenu__name{max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.usermenu__panel{display:none; position:absolute; right:0; top:calc(100% + 6px); min-width:230px; background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:6px; z-index:var(--z-overlay);}
.usermenu__panel::before{content:""; position:absolute; left:0; right:0; top:-8px; height:8px;}
.usermenu:hover .usermenu__panel, .usermenu.open .usermenu__panel{display:block;}
.usermenu__sec{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); padding:8px 10px 4px;}
.usermenu__langs{display:flex; flex-wrap:wrap; gap:4px; padding:0 8px 8px;}
.usermenu__lang{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; padding:5px 9px; border-radius:var(--radius-sm);
  color:var(--text-body); text-decoration:none; border:1px solid var(--border-subtle);}
.usermenu__lang:hover{background:var(--azure-50); color:var(--cobalt-800); text-decoration:none;}
.usermenu__lang.active{background:var(--cobalt-800); color:var(--ivory-200); border-color:var(--cobalt-800);}
.usermenu__item{display:block; padding:9px 10px; border-radius:var(--radius-sm); font-size:var(--text-sm); font-weight:600; color:var(--text-body); text-decoration:none;}
.usermenu__item:hover{background:var(--azure-50); color:var(--cobalt-800); text-decoration:none;}
.usermenu__sep{height:1px; background:var(--border-subtle); margin:6px 4px;}

/* mobile nav toggle */
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px; color:var(--ink-800);}
@media (max-width:1240px){
  .nav-toggle{display:inline-flex;}
  .nav{display:none; position:absolute; top:72px; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--surface-page); border-bottom:1px solid var(--border-subtle); padding:var(--space-3) var(--space-6); gap:var(--space-1); box-shadow:var(--shadow-md);}
  .nav.open{display:flex;}
  .nav__sep{display:none;}
  .nav__user{max-width:none; padding:8px 9px;}
}

/* ---------------- Hero ---------------- */
.hero{position:relative; overflow:hidden; background:var(--cobalt-800); color:var(--ivory-200);}
.hero::before{content:""; position:absolute; inset:0; background:url('../img/map-netherlands.jpg') center 22% / cover; opacity:.42;}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,var(--cobalt-900) 18%,rgba(0,42,92,.35) 72%,rgba(0,42,92,.6));}
.hero__in{position:relative; z-index:2; padding:var(--space-12) 0 var(--space-10); display:grid; grid-template-columns:auto 1fr; gap:var(--space-8); align-items:center;}
.hero__crest{filter:drop-shadow(0 12px 30px rgba(0,0,0,.35)); line-height:0;}
.hero__crest img{width:170px; height:auto;}
.hero h1{font-family:var(--font-display); font-weight:500; font-size:5rem; line-height:.98; letter-spacing:-.015em;
  color:var(--ivory-200); margin:14px 0 18px; max-width:16ch;}
.hero h1 em{font-style:italic; color:var(--azure-300);}
.hero__lead{font-size:1.25rem; line-height:1.5; color:rgba(244,239,231,.82); max-width:46ch; margin:0 0 28px;}
.hero__actions{display:flex; gap:var(--space-3); flex-wrap:wrap;}
.hero--slim .hero__in{grid-template-columns:1fr; padding:var(--space-9) 0 var(--space-8);}
.hero--slim h1{font-size:4.2rem; max-width:22ch;}

/* Stat strip */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(244,239,231,.18); position:relative; z-index:2;}
.stat{padding:var(--space-5) 0; border-right:1px solid rgba(244,239,231,.14);}
.stat:last-child{border-right:0;}
.stat__n{font-family:var(--font-display); font-weight:500; font-size:2.6rem; line-height:1; color:var(--ivory-200);}
.stat__l{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--azure-300); margin-top:8px;}

/* Letters / record cards */
.letter__date{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);}
.letter__title{font-family:var(--font-display); font-weight:500; font-size:1.6rem; line-height:1.1; color:var(--text-strong); margin:8px 0;}
.letter__excerpt{font-size:var(--text-base); color:var(--text-muted); line-height:1.55;}

/* CTA band */
.band{position:relative; overflow:hidden; background:var(--azure-500); border-radius:var(--radius-lg);
  padding:var(--space-9); display:flex; align-items:center; justify-content:space-between; gap:var(--space-7); flex-wrap:wrap;}
.band h2{font-family:var(--font-display); font-weight:500; font-size:2.6rem; line-height:1.04; color:var(--ink-900); margin:6px 0 8px; max-width:18ch;}
.band p{color:rgba(11,22,34,.72); font-size:1.1rem; margin:0; max-width:40ch;}

/* ---------------- Timeline (genealogy / lineage) ---------------- */
.timeline{list-style:none; margin:0; padding:0;}
.tl{display:grid; grid-template-columns:28px 1fr; gap:var(--space-5);}
.tl__rail{position:relative; display:flex; justify-content:center;}
.tl__rail::before{content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--border-subtle);}
.tl:first-child .tl__rail::before{top:14px;}
.tl:last-child .tl__rail::before{bottom:calc(100% - 14px);}
.tl__dot{position:relative; width:9px; height:9px; margin-top:10px; background:var(--azure-500); transform:rotate(45deg);}
.tl__body{padding:4px 0 var(--space-7);}
.tl__meta{display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap;}
.tl__gen{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--cobalt-800);}
.tl__year{font-family:var(--font-mono); font-size:11px; color:var(--text-faint);}
.tl__name{font-family:var(--font-display); font-weight:500; font-size:1.9rem; color:var(--text-strong); margin:4px 0 2px;}
.tl__role{font-family:var(--font-sans); font-weight:600; font-size:var(--text-sm); color:var(--gold-600);}
.tl__note{font-size:var(--text-base); color:var(--text-muted); line-height:1.55; margin:8px 0 0; max-width:60ch;}

/* ---------------- Genealogy wiki ---------------- */
.wiki{display:grid; grid-template-columns:200px 1fr; gap:var(--space-8); align-items:start;}
.wiki__nav{position:sticky; top:96px; display:flex; flex-direction:column; gap:2px; max-height:calc(100vh - 120px); overflow:auto;}
.wiki__nav a{font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted); padding:7px 10px; border-radius:var(--radius-sm); border-left:2px solid transparent;}
.wiki__nav a:hover{background:var(--azure-50); color:var(--cobalt-800); text-decoration:none;}
.wiki__nav a.active{color:var(--cobalt-800); border-left-color:var(--azure-500); background:var(--azure-50);}
.wiki__gen{padding:var(--space-6) 0; border-bottom:1px solid var(--border-subtle); scroll-margin-top:96px;}
.wiki__gen:last-child{border-bottom:0;}
.wiki__gen .roman{font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--azure-600);}
.wiki__article{font-size:var(--text-base); line-height:1.7; color:var(--text-body); max-width:74ch; text-align:left;}
.wiki__article b{font-family:var(--font-display); font-weight:600; font-size:1.15em; color:var(--text-strong);}
.wiki__article p{margin:0 0 1em;}

/* ---------------- Family tree ---------------- */
.tree-toolbar{display:flex; gap:var(--space-3); align-items:center; justify-content:flex-end; margin-bottom:var(--space-5);}
.tree-wrapper{overflow:auto; max-height:74vh; border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  background:var(--surface-sunken); padding:var(--space-6); position:relative; cursor:grab;}
.tree-wrapper.grabbing{cursor:grabbing; user-select:none;}
.tree-wrapper.grabbing .person-card{cursor:grabbing;}
.tree{display:inline-block; min-width:max-content; transform-origin:top left; transition:transform .25s var(--ease-out); white-space:nowrap;}
.tree ul{padding-top:18px; position:relative; list-style:none; white-space:nowrap; display:table; margin:0;}
.tree li{float:left; text-align:center; list-style:none; position:relative; padding:18px 2px 0 2px; display:table-cell; vertical-align:top;}
.tree li::before,.tree li::after{content:''; position:absolute; top:0; right:50%; border-top:1px solid var(--cobalt-border); width:50%; height:18px;}
.tree li::after{right:auto; left:50%; border-left:1px solid var(--cobalt-border);}
.tree li:only-child::after,.tree li:only-child::before{display:none;}
.tree li:only-child{padding-top:0;}
.tree li:first-child::before,.tree li:last-child::after{border:0 none;}
.tree li:last-child::before{border-right:1px solid var(--cobalt-border); border-radius:0 5px 0 0;}
.tree li:first-child::after{border-radius:5px 0 0 0;}
.tree ul ul::before{content:''; position:absolute; top:0; left:50%; border-left:1px solid var(--cobalt-border); width:0; height:18px;}
.parent-container{border:1px solid var(--border-subtle); padding:8px; display:inline-flex; gap:6px; align-items:center;
  background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-xs);}
.couple-line{width:1px; height:44px; background:var(--cobalt-border);}
.person-card{border:1px solid var(--border-subtle); border-top:3px solid var(--azure-500); padding:11px 9px 12px; text-decoration:none;
  color:var(--text-strong); display:flex; flex-direction:column; align-items:center; text-align:center;
  border-radius:var(--radius-md); transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
  background:var(--surface-card); width:138px; min-height:166px; cursor:pointer; vertical-align:top; white-space:normal;}
.person-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); text-decoration:none;}
.person-photo-wrap{position:relative; width:62px; height:62px; margin:0 auto 8px; border-radius:var(--radius-circle); overflow:hidden; flex:none;}
.person-photo{width:100%; height:100%; border-radius:var(--radius-circle); object-fit:cover; object-position:center top; display:block; border:2px solid var(--border-subtle);}
.no-photo{width:100%; height:100%; border-radius:var(--radius-circle); background:var(--ivory-200); display:flex; align-items:center;
  justify-content:center; border:2px solid var(--border-subtle); font-family:var(--font-display); font-size:1.35rem; color:var(--text-faint);}
/* Mourning ribbon for deceased members — a black diagonal band across the portrait corner */
.person-photo-wrap .ribbon{position:absolute; top:8px; left:-18px; width:100px; height:11px; background:var(--ink-900);
  transform:rotate(-45deg); box-shadow:0 1px 2px rgba(0,0,0,.45); pointer-events:none;}
.person-card.deceased .person-photo, .person-card.deceased .no-photo{filter:grayscale(0.35);}
.person-card .name{font-family:var(--font-display); font-weight:600; display:block; margin-bottom:5px; font-size:0.98rem; line-height:1.1; max-width:100%; overflow-wrap:break-word; hyphens:auto;}
.person-card .info{font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--text-muted); line-height:1.45; margin-top:auto;}
.person-card.male{border-top-color:var(--cobalt-700);}
.person-card.female{border-top-color:var(--gold-500);}

/* ---------------- People grid ---------------- */
.filters{display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-6);}
.person__name{font-family:var(--font-display); font-weight:500; font-size:1.5rem; color:var(--text-strong); margin:6px 0 2px;}
.person__meta{font-size:var(--text-sm); color:var(--text-muted);}

/* ---------------- Library ---------------- */
.lib-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-4);}
.lib-item{display:block; border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; background:var(--surface-card);
  transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); text-decoration:none; color:inherit;}
.lib-item:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); text-decoration:none;}
.lib-item__thumb{aspect-ratio:4/3; background:var(--surface-sunken); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.lib-item__thumb img{width:100%; height:100%; object-fit:cover;}
.lib-item__doc{font-family:var(--font-display); font-size:2.4rem; color:var(--cobalt-700);}
.lib-item__cap{padding:var(--space-3) var(--space-4);}
.lib-item__name{font-weight:600; font-size:var(--text-sm); color:var(--text-strong); word-break:break-word;}
.lib-item__meta{font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--text-faint); text-transform:uppercase; margin-top:4px;}

/* lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,28,64,.86); display:none; align-items:center; justify-content:center; z-index:var(--z-modal); padding:var(--space-6);}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw; max-height:88vh; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);}
.lightbox__close{position:absolute; top:18px; right:24px; color:var(--ivory-200); font-family:var(--font-mono); font-size:28px; cursor:pointer; background:none; border:0;}
.lightbox__nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:var(--radius-circle);
  background:rgba(0,0,0,.32); border:0; color:var(--ivory-200); font-size:34px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;}
.lightbox__nav:hover{background:rgba(0,0,0,.55);}
.lightbox__prev{left:18px;}
.lightbox__next{right:18px;}
@media (max-width:600px){ .lightbox__nav{width:42px; height:42px; font-size:28px;} .lightbox__prev{left:8px;} .lightbox__next{right:8px;} }

/* ---------------- Blog ---------------- */
.post-list{display:flex; flex-direction:column; gap:var(--space-6);}
.post-row{display:grid; grid-template-columns:160px 1fr; gap:var(--space-6); padding-bottom:var(--space-6); border-bottom:1px solid var(--border-subtle); align-items:start;}
.post-row__date{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);}
.post-row__title{font-family:var(--font-display); font-weight:500; font-size:1.8rem; line-height:1.1; color:var(--text-strong); margin:0 0 6px;}
.post-row__title a{color:inherit;}
.post-row__excerpt{color:var(--text-muted); line-height:1.6;}
.post-row__by{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-top:8px;}
.article{max-width:72ch; margin:0 auto;}
.article__meta{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:var(--space-3);}
.article__body{font-size:var(--text-md); line-height:1.75; color:var(--text-body);}
.article__body p{margin:0 0 1.2em;}

/* ---------------- Login ---------------- */
.login-wrap{min-height:calc(100vh - 72px); display:flex; align-items:center; justify-content:center; padding:var(--space-8) var(--space-6);
  position:relative; overflow:hidden; background:var(--cobalt-800);}
.login-wrap::before{content:""; position:absolute; inset:0; background:url('../img/map-netherlands.jpg') center / cover; opacity:.30;}
.login-wrap::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg,var(--cobalt-900),rgba(0,42,92,.55));}
.login-card{position:relative; z-index:2; width:100%; max-width:420px; background:var(--surface-page); border-radius:var(--radius-lg);
  padding:var(--space-8); box-shadow:var(--shadow-lg); text-align:center;}
.login-card .crest{width:64px; margin:0 auto var(--space-4);}
.login-card h1{font-size:2.2rem; margin-bottom:var(--space-2);}
.login-card p{color:var(--text-muted);}
.login-divider{margin:var(--space-5) 0;}

/* ---------------- Notice / alerts ---------------- */
.notice{padding:var(--space-4); border-radius:var(--radius-md); margin-bottom:var(--space-5); font-size:var(--text-sm);}
.notice--ok{background:var(--positive-100); color:var(--positive-500);}
.notice--err{background:var(--critical-100); color:var(--critical-500);}
.notice--info{background:var(--azure-50); color:var(--azure-700);}

/* ---------------- Calendar ---------------- */
.cal-head{display:flex; align-items:center; justify-content:center; gap:var(--space-5); margin-bottom:var(--space-5);}
.cal-month{font-family:var(--font-display); font-weight:500; font-size:1.8rem; color:var(--text-strong); margin:0; min-width:11ch; text-align:center;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden;}
.cal-dow{background:var(--surface-sunken); text-align:center; padding:8px 0; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);}
.cal-cell{background:var(--surface-card); min-height:96px; padding:6px 7px; display:flex; flex-direction:column; gap:3px;}
.cal-cell--empty{background:var(--surface-sunken);}
.cal-cell--today{background:var(--azure-50); box-shadow:inset 0 0 0 2px var(--azure-500);}
.cal-day{font-family:var(--font-mono); font-size:11px; color:var(--text-muted);}
.cal-ev{display:block; font-size:11px; line-height:1.25; background:var(--cobalt-800); color:var(--ivory-200); border-radius:var(--radius-xs); padding:2px 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none;}
.cal-ev:hover{text-decoration:none;}
.cal-ev--bday{background:var(--gold-200); color:var(--gold-700);}
.cal-ev--bday:hover{background:var(--gold-300);}
.cal-ev--bday-deceased{background:var(--ivory-200); color:var(--text-muted);}
.cal-ev--bday-deceased:hover{background:var(--ivory-300);}
@media (max-width:700px){
  .cal-cell{min-height:64px;}
  .cal-ev{font-size:9px; padding:1px 3px;}
}

/* ---------------- Settings ---------------- */
.codeblock{background:var(--cobalt-900); color:var(--ivory-200); font-family:var(--font-mono); font-size:var(--text-sm);
  padding:var(--space-4); border-radius:var(--radius-md); overflow-x:auto; white-space:pre; margin:0 0 var(--space-4);}

/* ---------------- Setup guide (info panel) ---------------- */
.ms-guide{margin-top:var(--space-3);}
.ms-guide summary{list-style:none; cursor:pointer; display:inline-flex; gap:6px; align-items:center;}
.ms-guide summary::-webkit-details-marker{display:none;}
.ms-guide__body{margin-top:var(--space-4); padding:var(--space-5); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); background:var(--surface-sunken);}
.ms-guide__body ol{margin:0; padding-left:1.3em; line-height:1.6; color:var(--text-body); font-size:var(--text-sm);}
.ms-guide__body li{margin-bottom:8px;}
.ms-guide__body li:last-child{margin-bottom:0;}

/* ---------------- Leaf / profile ---------------- */
.leaf-head{display:flex; align-items:center; gap:var(--space-6); flex-wrap:wrap;}
.leaf-portrait{position:relative; width:120px; height:120px; border-radius:var(--radius-circle); overflow:hidden; flex:none; border:2px solid var(--border-subtle);}
.leaf-portrait img{width:100%; height:100%; object-fit:cover; object-position:center top;}
.leaf-portrait__none{width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--ivory-200); font-family:var(--font-display); font-size:3rem; color:var(--text-faint);}
.leaf-portrait.deceased img, .leaf-portrait.deceased .leaf-portrait__none{filter:grayscale(0.4);}
.leaf-portrait .ribbon{position:absolute; top:18px; left:-30px; width:180px; height:18px; background:var(--ink-900); transform:rotate(-45deg); box-shadow:0 1px 2px rgba(0,0,0,.45);}
.leaf-k{color:var(--text-muted); padding:4px 12px 4px 0; white-space:nowrap; vertical-align:top;}
.social-row{display:flex; flex-wrap:wrap; gap:8px;}
.social-link{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill); font-family:var(--font-sans); font-weight:600; font-size:var(--text-sm);
  color:var(--cobalt-800); background:var(--surface-card); text-decoration:none;}
.social-link:hover{border-color:var(--azure-500); background:var(--azure-50); text-decoration:none;}

/* ---------------- Pot (event/topic page) ---------------- */
.pot-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:start;}
.pot-col-head{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-2); flex-wrap:wrap;}
.pot-add{position:relative;}
.pot-add summary{list-style:none; cursor:pointer;}
.pot-add summary::-webkit-details-marker{display:none;}
.pot-add[open] summary{margin-bottom:var(--space-2);}
@media (max-width:900px){ .pot-grid{grid-template-columns:1fr;} }

/* Attach badges (event/topic links) */
.attach-badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--text-2xs);
  letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-pill); text-decoration:none;}
.attach-badge--event{background:var(--azure-50); color:var(--azure-700); border:1px solid color-mix(in srgb,var(--azure-500) 28%,transparent);}
.attach-badge--topic{background:var(--gold-200); color:var(--gold-700); border:1px solid color-mix(in srgb,var(--gold-600) 36%,transparent);}
.attach-badge:hover{text-decoration:none; filter:brightness(0.97);}
.leaf-rels{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6);}
.leaf-rel__h{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--cobalt-800); margin-bottom:var(--space-3);}
.leaf-rel__none{color:var(--text-faint);}
.chip{display:flex; align-items:center; gap:8px; padding:5px 8px; border:1px solid var(--border-subtle); border-radius:var(--radius-pill);
  margin:0 0 6px; text-decoration:none; color:var(--text-strong); background:var(--surface-card);}
.chip:hover{border-color:var(--azure-500); text-decoration:none;}
.chip__img{width:30px; height:30px; border-radius:var(--radius-circle); object-fit:cover; object-position:center top; flex:none;}
.chip__img--none{display:flex; align-items:center; justify-content:center; background:var(--ivory-200); font-family:var(--font-display); font-size:0.9rem; color:var(--text-faint);}
.chip__name{font-size:var(--text-sm); font-weight:600;}
.chip__yr{font-family:var(--font-mono); font-size:10px; color:var(--text-faint); font-weight:400;}
@media (max-width:700px){ .leaf-rels{grid-template-columns:1fr 1fr;} }

/* ---------------- Footer ---------------- */
.ftr{border-top:1px solid var(--border-subtle); margin-top:var(--space-10); padding:var(--space-8) 0 var(--space-9);}
.ftr__in{display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); margin-top:var(--space-6); flex-wrap:wrap;}
.ftr__brand{display:flex; align-items:center; gap:14px;}
.ftr__brand img{width:30px; height:auto;}
.ftr__motto{font-family:var(--font-display); font-style:italic; font-size:1.4rem; color:var(--text-muted);}
.ftr__tag{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint);}

/* ---------------- Motion ---------------- */
.fade{opacity:1;}
@media (prefers-reduced-motion:no-preference){
  .fade{animation:fade var(--duration-slow) var(--ease-out);}
}
@keyframes fade{from{transform:translateY(10px);}}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;}
  .hero h1{font-size:3.2rem;}
  .hero__crest img{width:120px;}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .band{flex-direction:column; align-items:flex-start;}
  .wiki{grid-template-columns:1fr;}
  .wiki__nav{position:static; flex-direction:row; flex-wrap:wrap; max-height:none;}
  .post-row{grid-template-columns:1fr; gap:var(--space-2);}
}