/* Fonts are self-hosted on purpose: loading Google Fonts from Google's servers is a GDPR problem in Germany.
   Cormorant Garamond for names and page titles, Albert Sans for everything else (see DESIGN.md). */
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
/* italic only for the season word in the dress code ("Autumn Cocktail") */
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Albert Sans'; src: url('../fonts/albert-sans-latin-300-normal.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Albert Sans'; src: url('../fonts/albert-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Albert Sans'; src: url('../fonts/albert-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Albert Sans'; src: url('../fonts/albert-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* Pencil on linen (DESIGN.md): linen paper, graphite drawings, ink text, and rowan red as the only accent. */
:root {
  --snow: #F7F2EA;
  --white: #FDFAF5;
  --mist: #EDE5D8;
  --line: #DCD2C2;
  --stone: #6B6155;      /* label grey: small labels and secondary text, 4.5:1 on linen */
  --ink-soft: #5A5048;
  --ink: #2A221D;
  --graphite: #342C26;   /* drawings, lines drawn in code, the ridge */
  --rust: #B04A2E;       /* rowan red, the only accent */
  --gondola: #5B7FA6;    /* only for the Wankbahn gondola */
  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: var(--display);
  --max: 1040px;
  --banner: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Phones keep a fixed scale: scrolling yes, pinch or double-tap zoom no (with nozoom.js and the viewport meta) */
html, body { touch-action: pan-x pan-y; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--snow); color: var(--ink); font: 300 17px/1.7 var(--sans); letter-spacing: .005em; }
i, em { font-style: normal; }
/* The dress code is a name, so it is set in the title font; its season word is the only italics on the site */
.dress-name { font: 400 1.45rem/1.3 var(--display); }
.dress-code .dress-name { font-size: inherit; }
.season { font-style: italic; }
.amp { color: var(--rust); font-weight: 300; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: rgba(176, 74, 46, .45); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Two fonts, used the same way everywhere: Cormorant Garamond for every heading and title (h1–h3, names),
   Albert Sans for all other text (DESIGN.md, "Type") */
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; letter-spacing: 0; margin: 0 0 .5em; }
h2 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
h3 { font-size: 1.6rem; font-weight: 500; }
p { margin: 0 0 1em; }
b, strong { font-weight: 500; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.muted { color: var(--stone); }
.eyebrow { font: 500 .72rem/1.2 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--stone); }
.tbd { color: var(--stone); text-decoration: underline dotted; text-underline-offset: 3px; }
.hidden { display: none !important; }

/* A Swedish fjäll trail marker: a thin pole with the red cross on top, standing on a line of ground */
.blaze {
  display: inline-block; width: 14px; height: 20px; flex: none; vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Cpath d='M7 5v13.6' stroke='%23342C26' stroke-width='1.3'/%3E%3Cpath d='M3.6 1.6l6.8 6.8M10.4 1.6l-6.8 6.8' stroke='%23B04A2E' stroke-width='2.2'/%3E%3Cpath d='M1 18.9h12' stroke='%236B6155' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Autumn leaves: the real leaf pictures from the save the date (public/assets/std/leaves/, muted by tools/mute-leaves.py) */
.leaf { position: absolute; width: 22px; height: auto; pointer-events: none; user-select: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 50px; padding: 0 1.8em; border-radius: 2px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--white); font: 500 .78rem var(--sans); letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: background .25s, color .25s, border-color .25s;
}
.btn:hover { background: var(--rust); border-color: var(--rust); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--white); }
.btn.light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn.light:hover { background: transparent; color: var(--white); }
.btn[disabled] { opacity: .45; cursor: default; }
.link-btn { background: none; border: 0; padding: 6px 0; color: var(--ink-soft); font: 400 .78rem var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* Language switch */
.lang { display: inline-flex; gap: 2px; }
.lang button {
  border: 0; background: none; cursor: pointer; padding: 8px 7px; min-width: 34px; min-height: 36px;
  font: 400 .74rem var(--sans); letter-spacing: .18em; color: var(--stone);
}
.lang button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rust); text-underline-offset: 6px; }

/* ---------- Signpost boards: Andreas's pencil drawings (public/media/site/sign-board-*.webp) ----------
   Each board is its own image, with the page name as HTML on top. Boards pointing left are the same picture mirrored. */
.board {
  --bh: 48px;
  position: relative; display: inline-flex; align-items: center; height: var(--bh);
  text-decoration: none; color: var(--ink); white-space: nowrap; transform-origin: calc(var(--bh) * .25) 50%;
  font: 500 .92rem var(--sans); letter-spacing: .16em; text-transform: uppercase; transition: transform .25s ease;
}
.board img { height: 100%; width: auto; display: block; pointer-events: none; user-select: none; }
.board .label { position: absolute; inset: 0 calc(var(--bh) * .8) 0 calc(var(--bh) * .55); display: flex; align-items: center; justify-content: center; }
.board.left { transform-origin: calc(100% - var(--bh) * .25) 50%; }
.board.left img { transform: scaleX(-1); }
.board.left .label { inset: 0 calc(var(--bh) * .55) 0 calc(var(--bh) * .8); }
.board img { transition: filter .25s ease; }
.board:hover { transform: translateX(4px); }
.board.left:hover { transform: translateX(-4px); }
/* the board lifts a little off the post under the mouse, and gives way when pressed: it reads as something to use */
.board:hover img { filter: drop-shadow(0 3px 4px rgba(42, 34, 29, .18)); }
.board:active { transform: translateX(2px) scale(.97); transition-duration: .08s; }
.board.left:active { transform: translateX(-2px) scale(.97); }
.board:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

/* ---------- Login ---------- */
.login { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 22px 40px; text-align: center; }
.login-top { position: fixed; top: 10px; right: 12px; z-index: 2; }
.login .names { font: 400 clamp(2.8rem, 11vw, 4.8rem)/1 var(--display); letter-spacing: 0; margin: 18px 0 14px; }
.login .names i { color: var(--rust); }
.login .meta { font: 400 .78rem var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }
.login .meta { line-height: 1.9; }
.login .meta .nowrap { white-space: nowrap; }
.login-ridge { width: min(560px, 92vw); height: auto; margin: 38px 0 34px; }
.login-ridge path { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.login-ridge .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 3.2s .3s ease-in-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.login form { width: min(360px, 100%); }
.login p { color: var(--ink-soft); font-size: .95rem; }
.code-input {
  width: 100%; min-height: 56px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; border-radius: 0;
  font: 300 1.3rem var(--sans); letter-spacing: .12em; text-align: center; text-transform: uppercase; color: var(--ink);
}
.code-input::placeholder { color: var(--line); }
.code-input:focus { outline: none; border-bottom-color: var(--rust); }
.login .btn { width: 100%; margin-top: 22px; }
.login .error { color: var(--rust); min-height: 1.5em; margin: 12px 0 0; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .login-ridge .draw { stroke-dashoffset: 0; }
}