/* ============================================================
   2544 — BASE
   ============================================================ */

@font-face { font-family:'Geom'; src:url('/assets/fonts/Geom.woff2') format('woff2');
  font-weight:300 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/Inter.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Lora'; src:url('/assets/fonts/Lora.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:'Lora'; src:url('/assets/fonts/Lora-Italic.woff2') format('woff2');
  font-weight:400 700; font-style:italic; font-display:swap; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust:100%; overflow-x:clip; background: var(--paper); }

body {
  margin: 0;
  min-height: 100dvh;
  background: transparent;   /* the paper lives on .ground, behind this */
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: -0.008em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display:block; max-width:100%; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a { color:inherit; text-decoration:none; }
ul, ol { list-style:none; margin:0; padding:0; }
h1, h2, h3, p, figure, blockquote { margin:0; }

:focus-visible { outline:2px solid var(--teal-deep); outline-offset:3px; border-radius:6px; }
::selection { background: var(--teal); color:#04211E; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }


/* ---- paper ground ---------------------------------------
   Fixed, behind everything. The glass has nothing to refract
   without it, which is what makes most glassmorphism look flat.
   --------------------------------------------------------- */
.ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('/assets/img/paper.webp') center / cover no-repeat, var(--paper);
}
/* a touch more contrast so the cast shadow in the paper reads,
   and a soft vignette so the glass has something to sit against */
.ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 0%, transparent 46%, rgba(12,15,16,0.07) 100%);
}


/* ---- glass primitives ---- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-card);
  box-shadow: var(--drop);
}
.glass--mint { background: var(--glass-mint); border-color: var(--glass-mint-edge); }
.glass--warm { background: var(--glass-warm); border-color: var(--glass-warm-edge); }


/* ---- type ---- */
.title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1.04;
  letter-spacing: var(--ls-title);
}
.h2 { font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2);
      line-height:1.15; letter-spacing:-0.016em; }
.cap { font-size:var(--fs-cap); letter-spacing:var(--ls-cap); text-transform:uppercase;
       font-weight:600; color:var(--teal-dark); }
.dim { color: var(--ink-3); }


/* ---- controls ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:600; letter-spacing:-0.004em; line-height:1;
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  border:1px solid var(--glass-edge);
  box-shadow: var(--drop);
  transition: transform var(--t-1) var(--ease), background var(--t-1) var(--ease),
              box-shadow var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.btn:hover  { transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(0.985); }
.btn[disabled] { opacity:0.45; pointer-events:none; }

.btn--brand {
  background: var(--teal-deep); color:#fff; border-color: transparent;
  box-shadow: 0 14px 30px -14px rgba(0,150,136,0.85);
}
.btn--brand:hover { background: var(--teal-dark); }

.btn--wide { width:100%; }
.btn--sm   { padding:10px 16px; font-size:12px; }

.chip {
  flex:0 0 auto; padding:9px 16px; border-radius:var(--r-pill);
  background: rgba(255,255,255,0.44);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,0.6);
  font-size:12px; font-weight:550; line-height:1; color:var(--ink-2);
  transition: color var(--t-1) var(--ease), background var(--t-1) var(--ease);
}
.chip:hover { color:var(--ink); }
.chip[aria-pressed="true"] { background:var(--teal-deep); border-color:transparent; color:#fff; }


/* ---- fields ---- */
.field { margin-bottom:14px; }
.field > label { display:block; margin-bottom:7px; font-size:var(--fs-cap);
  letter-spacing:var(--ls-cap); text-transform:uppercase; font-weight:600; color:var(--ink-3); }
.field input, .field select, .field textarea {
  width:100%; padding:13px 15px; border-radius:var(--r-sm);
  border:1px solid rgba(12,15,16,0.14);
  background: rgba(255,255,255,0.7);
  color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.4;
  transition: border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--teal-deep);
  box-shadow:0 0 0 3px rgba(0,150,136,0.16);
}
.field textarea { min-height:88px; resize:vertical; }
.field select { appearance:none; cursor:pointer; }
.field input[type="file"] { padding:11px; font-size:13px; cursor:pointer; }
.hint { margin-top:7px; font-size:12px; line-height:1.5; color:var(--ink-3); }

/* honeypot — real people never see it, bots fill it in */
.hp { position:absolute !important; left:-9999px !important; opacity:0 !important; }


/* ---- modal ---- */
.modal {
  position:fixed; inset:0; z-index:800;
  display:grid; place-items:center; padding:20px;
  background: rgba(230,228,225,0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.modal[hidden] { display:none; }
.modal__panel {
  width:min(100%, 400px); padding:30px; border-radius:var(--r-card);
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,0.8);
  box-shadow: var(--drop-lg);
  max-height:92dvh; overflow-y:auto;
}
.modal__t { margin:10px 0 20px; }
.modal__msg { margin:12px 0 14px; min-height:17px; font-size:12px; color:#C0392B; }
.modal__msg[data-ok="1"] { color: var(--teal-dark); }


/* ---- toast ---- */
.toast {
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,90px);
  z-index:900; padding:13px 22px; border-radius:var(--r-pill);
  background: var(--ink); color:#fff; font-size:var(--fs-sm); font-weight:550;
  opacity:0; pointer-events:none; max-width:calc(100% - 36px); text-align:center;
  transition: transform var(--t-2) var(--ease), opacity var(--t-2) var(--ease);
}
.toast.on { transform:translate(-50%,0); opacity:1; }
.toast[data-bad="1"] { background:#B33A28; }