/* =====================================================
   The Secret — Hunt Log
   Mobile-first, dark "treasure-hunt" theme
   ===================================================== */

:root {
  --bg-0: #0b0805;
  --bg-1: #120d08;
  --bg-2: #1a130c;
  --bg-3: #241a10;
  --ink:  #f3e9d4;
  --ink-2:#cdbf9d;
  --ink-3:#988669;
  --gold: #e0b66a;
  --gold-2:#f4d089;
  --gold-3:#a37a3a;
  --rust: #b25c2a;
  --green:#6ea877;       /* solved — warm sage */
  --mint: #7faa9a;       /* open / still hunting — cool sage, subtle */
  --red:  #c9573e;
  --shadow: 0 18px 50px -18px rgba(0,0,0,.7), 0 4px 12px -6px rgba(0,0,0,.5);
  --radius: 14px;
  --radius-sm: 8px;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hand: "Caveat", "Caveat Brush", "Bradley Hand", "Segoe Script", cursive;
  --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* legacy alias */
  --maxw: 1700px;
  --t-fast: 180ms cubic-bezier(.2,.7,.3,1);
  --t-slow: 480ms cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(224,182,106,.07), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(178,92,42,.07), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 30%, var(--bg-0));
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Vintage paper noise overlay */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.8'/></svg>");
  z-index: 1;
}
.site-header, main, .site-footer { position: relative; z-index: 2; }

a { color: var(--gold); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--gold-2); }

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.05; margin: 0 0 .5em; letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 .5em; }
h3 { font-size: 1.1rem; margin: 0 0 .35em; }

/* Handwriting accents — for the personal-log feel */
.hand,
.brand__sub,
.hero__eyebrow,
.eyebrow,
.page-head__meta,
.section-title__link,
.city-card__quote,
.loc__name,
.journal-entry__title,
.clue__line,
.casque-hero__placeholder-title {
  font-family: var(--hand);
  font-weight: 500;
  letter-spacing: 0;
}
/* Caveat reads ~30–50% smaller than sans at the same px, so bump up. */
.hero__eyebrow, .eyebrow { font-weight: 600; font-size: 1.05rem; letter-spacing: .04em; text-transform: none; }
.brand__sub { font-size: .95rem; letter-spacing: .06em; text-transform: none; }
.city-card__quote { font-style: normal; font-size: 1.55rem; line-height: 1.25; }
.loc__name { font-size: 1.85rem; line-height: 1.15; }
.journal-entry__title { font-size: 2rem; font-weight: 600; line-height: 1.1; }
.clue__line { font-style: normal; font-size: 1.45rem; line-height: 1.2; }
.page-head__meta { font-size: 1.7rem; line-height: 1.25; color: var(--ink-2); }
.section-title__link { font-size: 1.45rem; }
.casque-hero__placeholder-title { font-size: 2.2rem; }

img { max-width: 100%; display: block; }

.wrap {
  width: min(90%, var(--maxw));
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 700px) {
  .wrap { width: 94%; }   /* tighter side gutters on phones so content uses the screen */
}

.skip-link {
  position: absolute; left: -9999px; top: auto;
}
.skip-link:focus {
  left: 1rem; top: 1rem; background: var(--gold); color: #000;
  padding: .5rem .8rem; border-radius: 8px; z-index: 100;
}

/* ============ HEADER ============ */
.site-header {
  position: sticky; top: 0;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: rgba(11,8,5,.78);
  border-bottom: 1px solid rgba(224,182,106,.12);
  z-index: 50;
}
.site-header__inner {
  position: relative;                /* anchor for the absolute menu panel */
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 0;                  /* horizontal 0 so brand lines up with content sections */
}
.brand-wrap {
  position: relative;                /* anchors brand jump panel to the icon's column */
  display: flex; align-items: center; gap: .65rem;
}
.brand {
  display: flex; align-items: center;
  color: var(--ink); font-weight: 600;
}
.brand:hover { color: var(--gold-2); }
.brand__mark {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--rust) 100%);
  color: #1a0e04;
  font-size: 1.05rem;
  box-shadow: 0 8px 16px -10px rgba(224,182,106,.6), inset 0 -2px 6px rgba(0,0,0,.25);
  transition: transform var(--t-fast);
}
.brand__mark i { display: block; }
.brand-wrap:hover .brand__mark { transform: rotate(-7deg) scale(1.04); }

/* Brand mark as a jump-menu trigger */
.brand__mark--btn {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  position: relative;
}
.brand__mark--btn[aria-expanded="true"] {
  transform: rotate(7deg) scale(1.04);
}
.brand__mark--btn:focus-visible {
  outline: 2px solid var(--gold-2); outline-offset: 3px;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__title { font-family: var(--serif); font-size: 1.1rem; }
.brand__sub { font-size: .68rem; letter-spacing: .25em; color: var(--ink-3); text-transform: uppercase; }

/* ============ MENU TOGGLE BUTTON (replaces old horizontal nav + mobile burger) ============ */
.menu-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(224,182,106,.35);
  padding: .55rem .9rem .55rem .85rem;
  border-radius: 999px;
  color: var(--gold-2);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.menu-toggle:hover { background: rgba(224,182,106,.12); color: var(--gold); }
.menu-toggle__icon { display: inline-grid; place-items: center; width: 1rem; transition: transform 320ms cubic-bezier(.2,.7,.3,1); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon { transform: rotate(90deg); }
.menu-toggle[aria-expanded="true"] {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #1a1006;
  border-color: var(--gold);
}
.menu-toggle__user {
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--rust) 100%);
  color: #1a0e04;
  font-weight: 700;
  font-size: .82rem;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__user {
  box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}

.menu-backdrop {
  position: fixed; inset: 0;
  background: rgba(5,3,1,.55);
  backdrop-filter: blur(2px);
  z-index: 40;
  opacity: 0;
  transition: opacity 200ms ease;
}
.menu-backdrop[hidden] { display: none; }
.menu-backdrop.is-open { opacity: 1; }

.menu-panel {
  position: absolute;
  top: calc(100% - .3rem);       /* sits just below the wrap (below the button) */
  right: 0;                       /* aligns with the wrap's right edge, same as the button */
  width: min(320px, calc(100vw - 2rem));
  z-index: 50;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid rgba(224,182,106,.25);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 12px 28px -10px rgba(0,0,0,.5);
  padding: .6rem;
  transform-origin: top right;
  transform: scale(.94) rotate(-3deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(.2,.7,.3,1), opacity 220ms ease;
  text-align: right;
}
.menu-panel[hidden] { display: block; visibility: hidden; }
.menu-panel.is-open {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.menu-section { padding: .35rem 0; }
.menu-section + .menu-section { border-top: 1px solid rgba(224,182,106,.08); margin-top: .35rem; padding-top: .55rem; }
.menu-section--user { background: rgba(224,182,106,.05); border-radius: 10px; margin-top: .55rem; padding: .55rem; }
.menu-section__head {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: .2rem .7rem .4rem;
  text-align: right;
}
.menu-section__head i { color: var(--gold-3); margin-right: .35rem; font-size: .82em; }
.menu-link {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: .55rem .75rem;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 8px;
  font-size: .98rem;
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.menu-link > span { display: inline-flex; align-items: center; gap: .6rem; }
/* Right-anchored primary menu: icons sit to the right of the label. */
.menu-panel:not(.menu-panel--left) .menu-link > span { flex-direction: row-reverse; }
.menu-link i { color: var(--gold-3); width: 1.1rem; text-align: center; transition: color var(--t-fast); }
.menu-link:hover { background: rgba(224,182,106,.1); color: var(--ink); transform: translateX(-2px); }
.menu-link:hover i { color: var(--gold); }
.menu-link.is-active {
  background: rgba(224,182,106,.18);
  color: var(--gold-2);
}
.menu-link.is-active i { color: var(--gold); }
.menu-link--cta {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #1a1006;
  margin-top: .3rem;
}
.menu-link--cta:hover { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1006; }
.menu-link--cta i { color: #1a1006; }

/* Left-anchored variant of the menu panel — used by the brand-mark jump menu */
.menu-panel--left {
  right: auto;
  left: 0;
  transform-origin: top left;
  transform: scale(.94) rotate(3deg);
  text-align: left;
}
.menu-panel--left.is-open { transform: scale(1) rotate(0deg); }
.menu-panel--left .menu-section__head { text-align: left; }
.menu-panel--left .menu-link { justify-content: flex-start; }

/* Jump menu rows: 2-digit number + city name + optional solved tick */
.menu-link--jump { padding: .45rem .75rem; }
.menu-link--jump > span { gap: .7rem; }
.jump-num {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--gold-3);
  min-width: 1.9em;
  letter-spacing: .04em;
}
.menu-link--jump:hover .jump-num,
.menu-link--jump.is-active .jump-num { color: var(--gold); }
.jump-city { flex: 1; }
.jump-found { color: var(--green); font-size: .8em; margin-left: .35rem; }
.menu-user {
  display: flex; align-items: center; justify-content: flex-end;
  gap: .65rem;
  padding: .25rem .65rem .5rem;
}
.menu-user__avatar {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--rust) 100%);
  color: #1a0e04;
  font-weight: 700;
  font-size: 1rem;
}
.menu-user__info { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.menu-user__info strong { color: var(--ink); font-weight: 600; }
.menu-user__info .muted { font-size: .78rem; }

/* ============ AUTH PAGES ============ */
.auth-grid {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
  margin: 1.5rem 0 3rem;
  align-items: start;
}
@media (min-width: 860px) {
  .auth-grid { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 3rem; }
}
.auth-card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid rgba(224,182,106,.18);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem 1.8rem;
  box-shadow: var(--shadow);
}
.auth-card__title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  color: var(--ink);
}
.auth-card__title i { color: var(--gold-3); margin-right: .4rem; }
.auth-card .form { max-width: 100%; }

.auth-aside {
  display: grid; gap: 1.4rem;
  align-self: start;
  padding: .4rem 0;
}
.auth-aside__quote {
  font-family: var(--hand);
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  color: var(--gold-2);
  line-height: 1.2;
  padding-left: 1rem;
  border-left: 3px solid var(--gold-3);
}
.auth-aside__feats {
  background: linear-gradient(180deg, rgba(36,26,16,.5), rgba(18,13,8,.7));
  border: 1px solid rgba(224,182,106,.12);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
.auth-aside__feats h3 {
  margin: 0 0 .8rem;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  font-family: var(--sans);
}
.auth-aside__feats h3 i { color: var(--gold); margin-right: .35rem; }
.auth-aside__feats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.auth-aside__feats li {
  color: var(--ink-2);
  font-size: .95rem;
  padding-left: 1.7rem;
  position: relative;
  line-height: 1.4;
}
.auth-aside__feats li i {
  position: absolute; left: 0; top: .2rem;
  color: var(--gold-3);
}
.auth-aside__small { color: var(--ink-3); font-size: .85rem; margin: 0; line-height: 1.5; }
.auth-aside__small i { color: var(--gold-3); margin-right: .3rem; }
.auth-err {
  background: rgba(201,87,62,.15);
  border: 1px solid rgba(201,87,62,.4);
  color: var(--red);
  padding: .65rem .85rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.auth-warn {
  background: rgba(224,182,106,.12);
  border: 1px solid rgba(224,182,106,.35);
  color: var(--ink);
  padding: .65rem .85rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: .92rem;
}
.auth-warn code { background: rgba(0,0,0,.4); padding: .1rem .4rem; border-radius: 4px; color: var(--gold); }

/* ============ FLASH ============ */
.flash {
  margin: 1rem auto; max-width: 700px;
  padding: .75rem 1rem; border-radius: 10px;
  background: rgba(110,168,119,.16); border: 1px solid rgba(110,168,119,.35);
  color: var(--ink); text-align: center;
}
.flash--err { background: rgba(201,87,62,.18); border-color: rgba(201,87,62,.45); }

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: clamp(4rem, 10vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
/* Photo backdrop (Stow Lake stone bridge in Golden Gate Park) */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    /* dark veil for text legibility — heavy at bottom, softer at top */
    linear-gradient(180deg, rgba(11,8,5,.35) 0%, rgba(11,8,5,.55) 55%, rgba(11,8,5,.92) 100%),
    /* the photo */
    url("/assets/img/hero-stow-lake.jpg") center 35% / cover no-repeat;
  z-index: -2;
  animation: hero-pan 28s ease-in-out infinite alternate;
}
/* Atmospheric color glow on top of the photo */
.hero::after {
  content: "";
  position: absolute; inset: -10%;
  background:
    radial-gradient(circle at 22% 30%, rgba(224,182,106,.18), transparent 45%),
    radial-gradient(circle at 78% 70%, rgba(178,92,42,.14), transparent 50%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-30px,20px,0); }
}
@keyframes hero-pan {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1%, -1%, 0); }
}
.hero__inner { position: relative; z-index: 1; }
.hero__lede { text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hero__eyebrow {
  display: inline-block;
  font-size: .72rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--gold);
  padding: .3rem .65rem; border: 1px solid rgba(224,182,106,.35); border-radius: 999px;
  margin-bottom: 1rem;
}
.hero h1 {
  background: linear-gradient(180deg, #fff 0%, var(--gold-2) 70%, var(--gold-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 20px rgba(224,182,106,.18));
}
.hero__lede { font-size: 1.1rem; color: var(--ink-2); max-width: 680px; }
.hero__cta { display: flex; gap: .8rem; margin-top: 1.6rem; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.1rem;
  border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #1a1006;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 10px 24px -10px rgba(224,182,106,.5), inset 0 -2px 4px rgba(0,0,0,.15);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); color: #1a1006; box-shadow: 0 14px 30px -10px rgba(224,182,106,.65), inset 0 -2px 4px rgba(0,0,0,.15); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid rgba(224,182,106,.4); box-shadow: none;
}
.btn--ghost:hover { color: var(--gold-2); border-color: var(--gold); }
.btn--sm { padding: .45rem .8rem; font-size: .82rem; }
.btn--danger {
  background: linear-gradient(180deg, #d97150, var(--red));
  color: #fff8f3;
  box-shadow: 0 10px 24px -12px rgba(201,87,62,.55), inset 0 -2px 4px rgba(0,0,0,.18);
  border-color: rgba(0,0,0,.2);
}
.btn--danger:hover { color: #fff; box-shadow: 0 14px 30px -10px rgba(201,87,62,.7), inset 0 -2px 4px rgba(0,0,0,.18); }
.btn i { font-size: .9em; }

/* ============ USER MANAGEMENT (/admin/users.php) ============ */
.user-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.user-row {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1rem;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid rgba(224,182,106,.12);
  border-radius: var(--radius-sm);
}
.user-row.is-admin { border-color: rgba(110,168,119,.35); }
.user-row.is-self  { background: linear-gradient(180deg, rgba(36,26,16,.95), rgba(18,13,8,.98)); }
.user-row__main { flex: 1 1 240px; display: grid; gap: .25rem; min-width: 0; }
.user-row__name { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.user-row__avatar {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--rust) 100%);
  color: #1a0e04; font-weight: 700;
}
.user-row__meta {
  display: flex; flex-wrap: wrap; gap: .75rem;
  font-size: .82rem; color: var(--ink-2);
}
.user-row__meta i { color: var(--gold-3); margin-right: .2rem; }
.user-row__actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.badge--local i, .badge--found i { margin-right: .2rem; }

/* Disabled fields on edit forms (e.g. fixed username) */
.form input:disabled,
.form select:disabled {
  opacity: .55; cursor: not-allowed; background: rgba(0,0,0,.18);
}

/* Numbered recovery steps */
.recovery-steps {
  padding-left: 1.2rem;
  display: grid; gap: .55rem;
  font-size: .92rem; color: var(--ink-2);
}
.recovery-steps li::marker { color: var(--gold-3); font-weight: 700; }
.recovery-steps code {
  background: rgba(0,0,0,.4); padding: .12rem .35rem; border-radius: 4px;
  border: 1px solid rgba(224,182,106,.15);
  color: var(--gold-2);
  font-size: .88em;
}

/* Standard "icon + text" spacing for inline icons in body copy / lists */
h1 > i, h2 > i, h3 > i, h4 > i { color: var(--gold-3); margin-right: .35rem; font-size: .85em; }
.section-title h2 > i { color: var(--gold); }
.card__title > i { color: var(--gold-3); margin-right: .35rem; font-size: .9em; }
.icon-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.icon-list i { color: var(--green); width: 1rem; text-align: center; margin-right: .35rem; }

/* Stars row in journal meta */
.stars i { color: var(--gold); margin-right: 1px; font-size: .8em; }
.stars i.fa-regular { color: var(--ink-3); }

/* Eyebrow icons */
.eyebrow i, .hero__eyebrow i { color: var(--gold); margin-right: .35rem; font-size: .85em; }

/* Footer icons */
.site-footer i { color: var(--gold-3); margin: 0 .25rem 0 .35rem; }
.site-footer__line i:first-child { margin-left: 0; }

/* Section-title__link "open dossier →" — keep arrow consistent */
.section-title__link i { margin-left: .25rem; transition: transform var(--t-fast); }
.section-title__link:hover i { transform: translateX(3px); }

/* Form labels with leading icon */
.form label i { color: var(--gold-3); margin-right: .35rem; }

/* ============ SECTIONS ============ */
section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.section-title h2 { margin: 0; }
.section-title__link { color: var(--ink-3); font-size: .9rem; }
.section-title__link:hover { color: var(--gold); }

.eyebrow {
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-3);
  margin-bottom: .4rem;
}

/* ============ CARDS ============ */
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 600px)  { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .grid--3 { grid-template-columns: repeat(4, 1fr); } }   /* 4-up on wide screens */
@media (min-width: 1600px) { .grid--3 { grid-template-columns: repeat(6, 1fr); } }   /* 6-up on huge screens */

.card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid rgba(224,182,106,.12);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1.2rem;
  box-shadow: var(--shadow);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  position: relative;
  overflow: hidden;
}
.card:hover { transform: translateY(-2px); border-color: rgba(224,182,106,.3); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .3rem; }
.card__title { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); margin: 0; }
.card__sub { color: var(--ink-3); font-size: .85rem; }
.card__body { color: var(--ink-2); font-size: .94rem; margin-top: .4rem; }
.card__foot { margin-top: .9rem; display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.card a.card__link { color: var(--gold); font-weight: 600; font-size: .9rem; }
.card--feature {
  background:
    linear-gradient(180deg, rgba(36,26,16,.85), rgba(26,19,12,.95)),
    radial-gradient(ellipse at top right, rgba(224,182,106,.18), transparent 60%);
  border-color: rgba(224,182,106,.25);
}
.card__num {
  position: absolute; top: -.6rem; right: -.6rem;
  font-family: var(--serif);
  font-size: 4.2rem; line-height: 1;
  color: rgba(224,182,106,.07);
  pointer-events: none; user-select: none;
}

/* ============ BADGES / DOTS ============ */
.badge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid;
}
.badge--found { color: var(--green); border-color: rgba(110,168,119,.45); background: rgba(110,168,119,.12); }
.badge--lost  { color: var(--red);   border-color: rgba(201,87,62,.45);  background: rgba(201,87,62,.12); }
.badge--open  { color: var(--gold);  border-color: rgba(224,182,106,.4); background: rgba(224,182,106,.08); }
.badge i { font-size: .7em; margin-right: .25rem; vertical-align: middle; }
.badge--found i { color: var(--gold-2); }
.badge--lost  i { color: var(--red); }
.badge--local {
  color: #1a0e04;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(224,182,106,.18), 0 4px 12px -4px rgba(224,182,106,.55);
  animation: local-pulse 2.4s ease-in-out infinite;
}
.badge--local i { margin-right: .25rem; }
@keyframes local-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(224,182,106,.18), 0 4px 12px -4px rgba(224,182,106,.55); }
  50%      { box-shadow: 0 0 0 4px rgba(224,182,106,.28), 0 6px 18px -4px rgba(224,182,106,.75); }
}

.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-3); margin-right: .35rem; vertical-align: middle;
}
.dot--high { background: var(--green); }
.dot--medium { background: var(--gold); }
.dot--low { background: var(--rust); }
.dot--confirmed { background: var(--green); }
.dot--unknown { background: var(--ink-3); }
.dot--live {
  width: 7px; height: 7px;
  background: #4ec27a;
  box-shadow: 0 0 0 2px rgba(78,194,122,.28);
  animation: dot-live-pulse 1.8s ease-in-out infinite;
}
@keyframes dot-live-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(78,194,122,.28); }
  50%      { box-shadow: 0 0 0 6px rgba(78,194,122,0);  }
}

/* ============ PAGE HEADER ============ */
.page-head {
  padding: clamp(2rem, 5vw, 3.5rem) 0 1.2rem;
  border-bottom: 1px solid rgba(224,182,106,.08);
}
.page-head h1 { margin-bottom: .35rem; }
/* page-head__meta font-family/size handled in the handwriting block */
.crumbs { font-size: .82rem; color: var(--ink-3); margin-bottom: .6rem; }
.crumbs a { color: var(--ink-3); }

/* ============ TWO-COL LAYOUT ============ */
.cols { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 960px) { .cols { grid-template-columns: 2fr 1fr; } }

/* ============ DOSSIER HEAD ============ */
.dossier-head { padding-bottom: 1.5rem; }
.dossier-head__row {
  display: grid; gap: 1.2rem; grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px) {
  .dossier-head__row { grid-template-columns: 1fr auto; }
}
.dossier-head__title {
  margin: 0; line-height: 1; letter-spacing: -.025em;
}
.dossier-head__region {
  display: block; margin-top: .6rem;
  font-family: var(--hand);
  font-weight: 500; font-size: .55em;
  color: var(--ink-3);
  letter-spacing: 0;
  line-height: 1.1;
}
.dossier-head__quote {
  margin: .9rem 0 0;
  font-family: var(--hand);
  font-size: 1.9rem;
  line-height: 1.2;
  color: var(--gold-2);
  font-weight: 500;
}
.dossier-head__kv {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid rgba(224,182,106,.15);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin: 0;
  grid-template-columns: auto 1fr;
  gap: .25rem .9rem;
  font-size: .9rem;
}

/* ============ DOSSIER MAIN (painting + verse side-by-side) ============ */
.dossier-main { padding: 1.4rem 0 2rem; }
.dossier-cols {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .dossier-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
/* Right column of the dossier hero — stacks verse, painting-clues, inline map, actions */
.dossier-verse { display: grid; gap: 1rem; align-content: start; }

/* Painting frame (used in dossier-main + lightbox uses similar).
   Left-align so it shares the same x-edge as the breadcrumb/title above —
   when the painting hits its max-width on wide screens, the slack falls on
   the right rather than centering and breaking the column gridline. */
.dossier-painting { display: flex; justify-content: flex-start; }
.painting-frame {
  position: relative;
  width: 100%;
  max-width: 720px;
  border-radius: var(--radius);
  background: #000;
  border: 1px solid rgba(224,182,106,.2);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Placeholder shows when no painting file is present — keep a stable shape. */
.painting-frame.is-placeholder {
  aspect-ratio: 5/7;
  background:
    linear-gradient(135deg, rgba(224,182,106,.22), rgba(178,92,42,.08) 60%, rgba(36,26,16,1)),
    radial-gradient(circle at 30% 30%, rgba(224,182,106,.3), transparent 60%);
}
/* When a painting is present: container hugs the image at its natural aspect.
   No cropping — the painting is the primary clue and every pixel matters. */
.painting-frame.has-painting .painting-img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  transition: opacity 240ms ease;
}
.painting-frame .painting-img.is-loading { opacity: .35; }

.painting-frame .tag {
  position: absolute; top: 1rem; left: 1rem;
  z-index: 2;
  background: rgba(0,0,0,.55); border: 1px solid rgba(224,182,106,.35);
  padding: .3rem .6rem; border-radius: 999px;
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold);
}
.painting-expand {
  position: absolute; top: 1rem; right: 1rem;
  z-index: 3;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(224,182,106,.3);
  color: var(--gold-2);
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.painting-expand:hover { background: rgba(0,0,0,.75); color: var(--gold); transform: scale(1.05); }
.painting-expand i { font-size: 1rem; }

/* Verse card */
.card--verse {
  position: relative;
  /* Subtle "page" feel */
  background:
    linear-gradient(180deg, rgba(36,26,16,.95), rgba(18,13,8,.98));
}
.verse-poem {
  font-family: var(--hand);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--gold-2);
  line-height: 1.3;
  padding: 1rem 1.2rem;
  margin: .4rem 0 1.1rem;
  background: rgba(0,0,0,.25);
  border-left: 3px solid var(--gold-3);
  border-radius: 0 10px 10px 0;
}

/* Verse card heading row: title left, "+ theory" button right (logged-in only) */
.verse-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .4rem;
}
.verse-card__head h2 { margin: 0; flex: 1 1 auto; }
.verse-card__poem-num {
  display: inline-block;
  margin-left: .55rem;
  vertical-align: middle;
  font: 600 .62rem/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(224,182,106,.06);
  border: 1px solid rgba(224,182,106,.18);
  padding: .25rem .55rem;
  border-radius: 999px;
}
.verse-card__add {
  flex: 0 0 auto;
  margin-top: .15rem;       /* visually centers against the h2's cap height */
}
/* Edit-mode hint, sits below the heading row once the button toggles on */
.verse-toolbar__hint {
  display: block;
  margin: 0 0 .4rem;
  padding: .35rem .55rem;
  background: rgba(224,182,106,.06);
  border-left: 2px solid var(--gold-3);
  border-radius: 4px;
  font: 400 .82rem/1.35 var(--sans);
  color: var(--ink-2);
}
.verse-toolbar__hint i { color: var(--gold-3); margin-right: .3rem; }
.verse-toolbar__hint[hidden] { display: none; }

/* Each verse line */
.vline {
  position: relative;
  display: flex; align-items: flex-start; gap: .4rem;
  margin: 0 0 .15em;
  padding: .05rem .2rem .05rem .55rem;
  border-radius: 6px;
  border-left: 3px solid transparent;     /* placeholder for the couplet brace */
  transition: background var(--t-fast), border-color var(--t-fast);
}
.vline__text { margin: 0; flex: 1; min-width: 0; }

/* Bubble icon — sits at the end of the line when notes exist */
.vline__bubble {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .25rem;
  margin-top: .5rem;
  height: 1.55rem;
  padding: 0 .55rem;
  border: 1px solid rgba(224,182,106,.35);
  background: rgba(0,0,0,.35);
  color: var(--gold);
  border-radius: 999px;
  font: 600 .75rem/1 var(--sans);
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.vline__bubble:hover { background: rgba(224,182,106,.18); border-color: var(--gold); }
.vline__bubble[aria-expanded="true"] {
  background: var(--gold); color: var(--bg-0); border-color: var(--gold);
}
.vline__bubble i { font-size: .85rem; }
.vline__count { line-height: 1; }

/* Accordion panel that holds the notes for a line / couplet */
.vnotes {
  display: grid; gap: .45rem;
  margin: .3rem 0 .55rem;
  padding: .55rem .7rem;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(224,182,106,.18);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--ink);
  animation: vnotes-in 200ms cubic-bezier(.2,.7,.3,1);
}
.vnotes[hidden] { display: none; }
@keyframes vnotes-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.vnote { display: grid; gap: .25rem; }
.vnote + .vnote { padding-top: .45rem; border-top: 1px dashed rgba(224,182,106,.15); }
.vnote__head {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--ink-3);
}
.vnote__author { color: var(--gold-2); font-weight: 600; }
.vnote__meta { color: var(--ink-3); }
.vnote__chip {
  display: inline-block;
  padding: .05rem .4rem;
  border: 1px solid rgba(224,182,106,.3);
  border-radius: 999px;
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold-2);
}
.vnote__del {
  margin-left: auto;
  background: transparent; border: 0; padding: .15rem .3rem;
  color: var(--ink-3); cursor: pointer; border-radius: 4px;
  transition: color var(--t-fast), background var(--t-fast);
}
.vnote__del:hover { color: var(--red); background: rgba(201,87,62,.1); }
.vnote__body { margin: 0; line-height: 1.45; color: var(--ink); }

/* ---------- edit mode ---------- */
.verse-poem.is-editing .vline { cursor: pointer; }
.verse-poem.is-editing .vline:hover {
  background: rgba(224,182,106,.06);
  border-left-color: rgba(224,182,106,.4);
}
.verse-poem .vline.is-selected {
  background: rgba(224,182,106,.14);
  border-left-color: var(--gold);
}
/* Couplet brace: top + bottom of selection get rounded corners on the brace */
.verse-poem .vline.is-selected.is-paired-top    { border-bottom-left-radius: 0; }
.verse-poem .vline.is-selected.is-paired-bottom { border-top-left-radius: 0; }

/* Inline form that drops in under the selection */
.vnote-form {
  display: grid; gap: .45rem;
  margin: .35rem 0 .2rem;
  padding: .6rem .7rem;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--gold-3);
  border-radius: 10px;
  font-family: var(--sans);
}
.vnote-form[hidden] { display: none; }
.vnote-form__head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem; color: var(--gold-2); letter-spacing: .04em; text-transform: uppercase;
}
.vnote-form__cancel {
  background: transparent; border: 0; color: var(--ink-3); cursor: pointer;
  padding: .1rem .3rem; border-radius: 4px;
}
.vnote-form__cancel:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.vnote-form textarea {
  width: 100%;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(224,182,106,.25);
  border-radius: 8px;
  color: var(--ink);
  font: 400 .95rem/1.45 var(--sans);
  padding: .55rem .65rem;
  resize: vertical;
}
.vnote-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.vnote-form__actions { display: flex; gap: .5rem; }
.vnote-form__err {
  margin: 0; color: var(--red); font-size: .82rem;
}

.dossier-actions { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }

/* ============ LEGACY casque-hero (still referenced by placeholder content) ============ */
.casque-hero__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center; padding: 1.4rem;
}
.casque-hero__placeholder-title {
  font-family: var(--hand); font-size: 1.8rem;
  color: var(--gold-2); margin-bottom: .6rem; font-weight: 500;
}
.casque-hero__placeholder-hint {
  color: var(--ink-3); font-size: .82rem; line-height: 1.55;
}
.casque-hero__placeholder-hint code {
  display: inline-block;
  background: rgba(0,0,0,.4); border: 1px solid rgba(224,182,106,.15);
  padding: .1rem .45rem; border-radius: 6px;
  color: var(--gold); font-size: .78rem;
  margin: .2rem 0;
}

.casque-hero__art {
  /* Kept for compatibility — currently unused after the dossier rewrite. */
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(224,182,106,.18);
}
.casque-hero__art.is-placeholder::after {
  content: attr(data-num);
  position: absolute; bottom: .8rem; right: 1rem;
  font-family: var(--serif); font-size: 5rem;
  color: rgba(255,255,255,.08); line-height: 1;
}
.casque-hero__art span.tag {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(0,0,0,.55); border: 1px solid rgba(224,182,106,.35);
  padding: .3rem .6rem; border-radius: 999px;
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold);
  z-index: 2;
}
.casque-hero__art.has-painting {
  background: #000;
}
.casque-hero__art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.casque-hero__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center; padding: 1.4rem;
}
.casque-hero__placeholder-title {
  font-family: var(--serif); font-size: 1.4rem;
  color: var(--gold-2); margin-bottom: .6rem;
}
.casque-hero__placeholder-hint {
  color: var(--ink-3); font-size: .82rem; line-height: 1.55;
}
.casque-hero__placeholder-hint code {
  display: inline-block;
  background: rgba(0,0,0,.4); border: 1px solid rgba(224,182,106,.15);
  padding: .1rem .45rem; border-radius: 6px;
  color: var(--gold); font-size: .78rem;
  margin: .2rem 0;
}

/* ============ PAINTING VARIANT TOGGLE ============ */
.painting-toggle {
  position: absolute; bottom: .9rem; left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(224,182,106,.35);
  border-radius: 999px;
  padding: .15rem;
  backdrop-filter: blur(8px);
}
.painting-toggle__btn {
  appearance: none; border: 0; cursor: pointer;
  background: transparent;
  color: var(--ink-2);
  padding: .35rem .9rem;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast);
}
.painting-toggle__btn:hover { color: var(--gold-2); }
.painting-toggle__btn.is-active {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #1a1006;
  box-shadow: 0 4px 12px -4px rgba(224,182,106,.55);
}
.painting-flag {
  position: absolute; bottom: .9rem; left: 50%; transform: translateX(-50%);
  z-index: 3;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(224,182,106,.25);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  padding: .25rem .65rem;
}
.painting-img { transition: opacity 240ms ease; }
.painting-img.is-loading { opacity: .35; }

/* ============ CARD THUMBNAILS ============ */
.card--with-thumb { padding: 0; overflow: hidden; }
.card--with-thumb .card__thumb {
  aspect-ratio: 16/10;
  background: #0a0703;
  overflow: hidden;
  border-bottom: 1px solid rgba(224,182,106,.12);
}
.card--with-thumb .card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow);
}
.card--with-thumb:hover .card__thumb img { transform: scale(1.04); }
.card--with-thumb .card__num { display: none; }
.card--with-thumb > :not(.card__thumb) { padding-left: 1.1rem; padding-right: 1.1rem; }
.card--with-thumb .card__head { padding-top: 1rem; }
.card--with-thumb .card__foot { padding-bottom: 1.2rem; }
.card--with-thumb .card__sub,
.card--with-thumb .card__body { /* inherit horizontal padding from parent rule */ }

/* ============ CITY CARDS (homepage all-12 grid) ============ */
.city-card {
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg-2) center/cover no-repeat;
  border: 1px solid rgba(224,182,106,.18);
  box-shadow: var(--shadow);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  isolation: isolate;
}
.city-card::before { /* zoom-in cover treatment for the bg image */
  content: "";
  position: absolute; inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 700ms cubic-bezier(.2,.7,.3,1);
  z-index: 0;
}
.city-card::after { /* dark veil for legibility */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,8,5,.05) 0%, rgba(11,8,5,.20) 40%, rgba(11,8,5,.85) 78%, rgba(11,8,5,.96) 100%);
  z-index: 1;
}
.city-card:hover {
  transform: translateY(-3px);
  border-color: rgba(224,182,106,.45);
  box-shadow: 0 24px 40px -16px rgba(0,0,0,.65), 0 8px 16px -8px rgba(224,182,106,.18);
}
.city-card:hover::before { transform: scale(1.08); }

.city-card--noimg {
  background:
    radial-gradient(circle at 30% 20%, rgba(224,182,106,.18), transparent 55%),
    linear-gradient(160deg, var(--bg-3), var(--bg-1));
}
.city-card--noimg::before { display: none; }

/* The home-target casque gets a gold-rim highlight to stand out in the grid */
.city-card--local {
  border-color: rgba(224,182,106,.55);
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(224,182,106,.35) inset, 0 8px 24px -8px rgba(224,182,106,.35);
}
.city-card--local:hover {
  border-color: rgba(224,182,106,.85);
  box-shadow: 0 28px 56px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(224,182,106,.5) inset, 0 12px 30px -8px rgba(224,182,106,.55);
}

.city-card__status {
  position: absolute; top: .8rem; right: .8rem; z-index: 3;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,.35);
  border-radius: 999px;
}
.city-card__hash {
  position: absolute; top: .6rem; left: 1rem; z-index: 3;
  font-family: var(--serif);
  font-size: 1.7rem;
  color: rgba(255,255,255,.85);
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  letter-spacing: .02em;
}
.city-card__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1rem 1.1rem 1.1rem;
}
.city-card__title {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  margin: 0 0 .15rem;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
.city-card__meta {
  color: var(--gold-2);
  font-size: .8rem;
  letter-spacing: .04em;
  margin-bottom: .55rem;
  opacity: .92;
}
.city-card__quote {
  margin: 0 0 .65rem;
  color: rgba(243,233,212,.92);
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.city-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; color: var(--ink-2);
}
.city-card__link {
  color: var(--gold-2);
  font-weight: 600;
  transition: transform var(--t-fast);
}
.city-card:hover .city-card__link { transform: translateX(3px); }

@media (max-width: 540px) {
  .city-card { aspect-ratio: 5/4; }
  .city-card__body { padding: .85rem .95rem 1rem; }
}

/* ============ LOCATION CARDS (where-to-look section) ============ */
.loc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.loc {
  background: linear-gradient(180deg, rgba(36,26,16,.7), rgba(18,13,8,.85));
  border: 1px solid rgba(224,182,106,.12);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem 1.1rem;
}
.loc__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.loc__name {
  margin: 0;
  color: var(--gold-2);
  /* font-family / font-size set in the handwriting block */
}
.loc__theory { margin: .5rem 0 .35rem; color: var(--ink); font-size: .95rem; }
.loc__meta { margin: .15rem 0; color: var(--ink-3); font-size: .84rem; }
.loc__meta--src { font-size: .76rem; }
.loc .photo-grid { margin-top: .8rem; }

/* ============ PHOTO GRID (reference photos on dossier) ============ */
.photo-grid {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: .8rem;
}
@media (min-width: 720px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
.photo-tile {
  position: relative; display: block;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(224,182,106,.15);
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.photo-tile:hover { transform: translateY(-2px); border-color: rgba(224,182,106,.4); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .8rem .7rem .5rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
  color: #fff; font-size: .78rem; line-height: 1.2;
}
.kv { display: grid; grid-template-columns: 130px 1fr; gap: .3rem .9rem; font-size: .94rem; margin: 1rem 0; }
.kv dt { color: var(--ink-3); }
.kv dt i { color: var(--gold-3); width: 1.15rem; text-align: center; margin-right: .15rem; }
.kv dd { margin: 0; color: var(--ink); }

/* ============ CLUE LISTS ============ */
.clue-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.clue {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid rgba(224,182,106,.1);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
}
.clue__line { color: var(--gold-2); margin-bottom: .3rem; /* font-family / font-size in handwriting block */ }
.clue__interp { color: var(--ink-2); font-size: .94rem; }
.clue__num {
  display: inline-block; min-width: 1.8em;
  color: var(--ink-3); margin-right: .3rem;
}

/* CRUD affordances on the clue card */
.clue-card__head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 1rem 0 .55rem; gap: .8rem; flex-wrap: wrap;
}
.clue-card__head h3 { margin: 0; }

.clue { position: relative; }
.clue__actions {
  position: absolute; top: .55rem; right: .55rem;
  display: flex; gap: .2rem;
  opacity: 0; transition: opacity var(--t-fast);
}
.clue:hover .clue__actions,
.clue:focus-within .clue__actions { opacity: 1; }
.clue__edit, .clue__del {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(224,182,106,.2);
  color: var(--ink-3); cursor: pointer;
  width: 1.7rem; height: 1.7rem;
  border-radius: 6px; padding: 0;
  display: grid; place-items: center;
  font-size: .78rem;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.clue__edit:hover { color: var(--gold); border-color: var(--gold-3); background: rgba(224,182,106,.1); }
.clue__del:hover  { color: var(--red);  border-color: rgba(201,87,62,.4); background: rgba(201,87,62,.1); }

/* Inline create/edit form */
.clue-form {
  display: grid; gap: .5rem;
  margin: .55rem 0 .25rem;
  padding: .7rem .8rem;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--gold-3);
  border-radius: 10px;
  font-family: var(--sans);
}
.clue-form[hidden] { display: none; }
.clue-form__head {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--gold-2); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
}
.clue-form__cancel {
  background: transparent; border: 0; color: var(--ink-3); cursor: pointer;
  padding: .1rem .3rem; border-radius: 4px;
}
.clue-form__cancel:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.clue-form__element,
.clue-form__interp {
  width: 100%;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(224,182,106,.25);
  border-radius: 8px;
  color: var(--ink);
  font: 400 .95rem/1.45 var(--sans);
  padding: .55rem .65rem;
  box-sizing: border-box;
}
.clue-form__element { font-weight: 600; color: var(--gold-2); }
.clue-form__interp  { resize: vertical; }
.clue-form__element:focus,
.clue-form__interp:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.clue-form__actions { display: flex; gap: .5rem; }
.clue-form__err { margin: 0; color: var(--red); font-size: .82rem; }

/* ============ MAP ============ */
.map {
  height: 60vh; min-height: 380px; max-height: 720px;
  border-radius: var(--radius);
  border: 1px solid rgba(224,182,106,.18);
  box-shadow: var(--shadow);
  background: var(--bg-2);
  /* Let Leaflet capture touch gestures for pan/pinch instead of the page scrolling */
  touch-action: none;
}
.map--inline {
  height: 540px;
  min-height: 360px;
}
@media (max-width: 700px) {
  .map--inline { height: 380px; }
}
/* Wrapper for the dossier's full-width inline map */
.dossier-mapwrap { padding-top: 0; padding-bottom: 1.4rem; }

/* Stack the below-map blocks (Where to look + Journal grid) full-width */
.dossier-belowmap { display: grid; gap: 1.5rem; }

/* Journal block under the map — header row + responsive card grid */
.journal-block__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: 0 0 .8rem;
}
.journal-block__title { margin: 0; font-size: 1.4rem; }
.journal-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.card--journal { padding: .9rem 1rem 1rem; }
.card--journal__head { display: grid; gap: .15rem; margin-bottom: .45rem; }
.card--journal__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.25;
}
.card--journal__meta {
  margin: 0; color: var(--ink-3); font-size: .8rem;
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.card--journal__body { margin-top: 0; }
.leaflet-popup-content-wrapper { background: var(--bg-2); color: var(--ink); border-radius: 10px; }
.leaflet-popup-tip { background: var(--bg-2); }
.leaflet-popup-content b { color: var(--gold-2); }

/* ---- Hunt-map pin markers (rendered via L.divIcon) ---- */
.hunt-pin__dot {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #0b0805;
  box-shadow: 0 4px 8px rgba(0,0,0,.5);
  font-family: system-ui, sans-serif;
}
/* All pins are the same 18×18 footprint — color (and optional glyph) does
   the talking, so candidates / user pins / solved sites have equal weight. */
.hunt-pin__dot--gold,
.hunt-pin__dot--user,
.hunt-pin__dot--found {
  width: 18px; height: 18px; border-radius: 50%;
}
.hunt-pin__dot--gold {
  background: radial-gradient(circle at 30% 30%, #f4d089, #a37a3a);
}
.hunt-pin__dot--user {
  background: radial-gradient(circle at 30% 30%, #f4d089, #a37a3a);
}
.hunt-pin__dot--found {
  background: radial-gradient(circle at 30% 30%, #a3d4ad, #6ea877);
  color: #0b0805; font-weight: 900; font-size: 10px;
}
.hunt-pin--found { z-index: 600 !important; }
.hunt-pin--user  { z-index: 550 !important; }

/* ---- Pin color swatch (on cards) + color picker (in form) ---- */
.pin-swatch {
  display: inline-block;
  width: .95em; height: .95em;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.45);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
  margin-right: .15em;
  vertical-align: -2px;
}
.color-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .35rem;
  padding: .2rem 0;
}
.color-picker__btn {
  width: 100%; aspect-ratio: 1/1;
  min-height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.35);
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.color-picker__btn:hover    { transform: scale(1.08); }
.color-picker__btn.is-active{ border-color: var(--gold); transform: scale(1.12); box-shadow: 0 0 0 2px rgba(224,182,106,.35), 0 1px 2px rgba(0,0,0,.4); }
.color-picker__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ---- Map wrapper + toolbar ---- */
.map-wrap { position: relative; }
.map-toolbar {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: .8rem 0 0;
}
.map-toolbar__hint {
  color: var(--gold-2); font-size: .85rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.map.is-placing { cursor: crosshair; }
.map.is-placing .leaflet-container { cursor: crosshair; }

/* ---- Layer control (basemap toggle) ---- */
.leaflet-control-layers {
  background: var(--bg-2) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(224,182,106,.22) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.45) !important;
}
.leaflet-control-layers-toggle {
  background-color: var(--bg-2);
  filter: invert(.85) hue-rotate(180deg);
}
.leaflet-control-layers-expanded {
  padding: .55rem .7rem !important;
  font: 500 .88rem/1.35 var(--sans) !important;
}
.leaflet-control-layers-expanded label {
  color: var(--ink-2);
  display: flex; align-items: center; gap: .4rem;
  padding: .15rem 0;
  cursor: pointer;
}
.leaflet-control-layers-expanded label:hover { color: var(--gold); }
.leaflet-control-layers-expanded input[type="radio"]:checked + span { color: var(--gold-2); }
.leaflet-control-layers-separator { border-top: 1px solid rgba(224,182,106,.18) !important; }

/* Custom "Open in Google Maps" link control (top-left, near zoom buttons) */
.leaflet-control-googlemaps {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: rgba(11,8,5,.92);
  border: 1px solid rgba(224,182,106,.4);
  color: var(--gold);
  font-size: 13px;
  border-radius: 4px;
  margin-top: 8px !important;
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.leaflet-control-googlemaps:hover {
  color: var(--bg-0);
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-color: var(--gold);
}

/* ---- Pin popups (read + edit) ---- */
.pin-popup-wrap .leaflet-popup-content-wrapper {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  color: var(--ink);
  border: 1px solid rgba(224,182,106,.22);
  box-shadow: 0 14px 36px rgba(0,0,0,.65);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}
.pin-popup-wrap .leaflet-popup-tip { background: var(--bg-2); border: 1px solid rgba(224,182,106,.22); border-top: 0; border-left: 0; }
.pin-popup-wrap .leaflet-popup-content { margin: 0; padding: 0; line-height: 1.45; }
.pin-popup-wrap .leaflet-popup-close-button {
  color: #fff; font-size: 22px; font-weight: 300;
  padding: 8px 12px 0 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  z-index: 5;
}
.pin-popup-wrap .leaflet-popup-close-button:hover { color: var(--gold); }

.pin-popup { font-family: var(--sans); }

/* Big-mode hero — bg image (when available) + dark gradient veil + title overlaid */
.pin-popup--big .pin-popup__hero {
  position: relative;
  min-height: 140px;
  padding: .9rem 1rem 1rem;
  background-color: var(--bg-3);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pin-popup--big .pin-popup__hero:not(.has-image) {
  background: linear-gradient(135deg, rgba(224,182,106,.25), rgba(178,92,42,.18) 60%, rgba(36,26,16,.5)),
              radial-gradient(circle at 30% 30%, rgba(224,182,106,.25), transparent 60%);
}
.pin-popup__hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(11,8,5,.4) 45%, rgba(11,8,5,.88) 100%);
  pointer-events: none;
}
.pin-popup--big .pin-popup__head,
.pin-popup--big .pin-popup__loc { position: relative; z-index: 2; }

.pin-popup__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .55rem;
  margin-right: 1.6rem;   /* leave room for leaflet's close × */
}
.pin-popup__title {
  margin: 0;
  color: #fff;
  font: 700 1.3rem/1.2 var(--sans);
  display: inline-flex; align-items: center; gap: .55rem;
  word-break: break-word;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.pin-popup__title .pin-swatch { flex: 0 0 auto; width: 1.05em; height: 1.05em; box-shadow: 0 0 0 2px rgba(11,8,5,.6); }

.pin-popup__loc {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .55rem;
  padding: .25rem .55rem;
  background: rgba(11,8,5,.55);
  border: 1px solid rgba(224,182,106,.25);
  border-radius: 999px;
  color: var(--gold-2);
  font-size: .78rem; letter-spacing: .03em;
}
.pin-popup__loc i { color: var(--gold-3); }

.pin-popup__content { padding: .85rem 1rem 1rem; }
.pin-popup__body {
  margin: 0;
  color: var(--ink);
  font-size: 1rem; line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word;
}
.pin-popup__byline {
  margin: .8rem 0 0;
  padding-top: .55rem;
  border-top: 1px dashed rgba(224,182,106,.18);
  color: var(--ink-3); font-size: .78rem;
  display: flex; flex-wrap: wrap; gap: .15rem .55rem; align-items: center;
}
.pin-popup__byline i { color: var(--gold-3); margin-right: .15rem; }

.pin-popup__actions { display: inline-flex; gap: .3rem; }
.pin-popup__btn {
  background: rgba(11,8,5,.55);
  border: 1px solid rgba(224,182,106,.3);
  color: var(--ink-2); cursor: pointer;
  width: 1.9rem; height: 1.9rem;
  border-radius: 7px; padding: 0;
  display: grid; place-items: center;
  font-size: .85rem;
  backdrop-filter: blur(4px);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.pin-popup__btn:hover { color: var(--gold); border-color: var(--gold); background: rgba(224,182,106,.18); }
.pin-popup__btn--del:hover { color: #fff; border-color: var(--red); background: rgba(201,87,62,.65); }

/* Legacy small popup variant (not used post-rebuild — kept for safety) */
.pin-popup:not(.pin-popup--big) .pin-popup__head { margin-right: 1.1rem; padding: .75rem .85rem 0; }
.pin-popup:not(.pin-popup--big) .pin-popup__meta,
.pin-popup:not(.pin-popup--big) .pin-popup__body { padding: 0 .85rem .8rem; }

/* edit-mode popup */
.pin-popup-wrap--edit .leaflet-popup-close-button { display: none; }   /* use the Cancel button */
.pin-popup--edit {
  display: grid; gap: .55rem;
  padding: .9rem 1rem 1rem;     /* wrapper padding moved to 0 in pt. 16 */
}
.pin-popup__form-head {
  color: var(--gold-2); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.pin-popup__title-input,
.pin-popup__body-input {
  width: 100%;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(224,182,106,.25);
  border-radius: 7px;
  color: var(--ink);
  font: 400 .92rem/1.4 var(--sans);
  padding: .45rem .55rem;
  box-sizing: border-box;
}
.pin-popup__title-input { font-weight: 600; color: var(--gold-2); }
.pin-popup__body-input  { resize: vertical; }
.pin-popup__title-input:focus,
.pin-popup__body-input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.pin-popup__err { margin: 0; color: var(--red); font-size: .78rem; }
.pin-popup__form-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .15rem; }

/* tighter color picker inside the popup */
.color-picker--popup { grid-template-columns: repeat(8, 1fr); gap: .25rem; }
.color-picker--popup .color-picker__btn { min-height: 18px; box-shadow: 0 1px 1px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.4); }

/* ============ LIGHTBOX (fullscreen painting viewer) ============ */
.lightbox {
  position: fixed; inset: 0;
  z-index: 1000;
  display: grid; grid-template-rows: auto 1fr auto;
  background: rgba(5,3,1,.96);
  backdrop-filter: blur(4px);
  animation: lb-in 220ms ease;
}
.lightbox[hidden] { display: none; }
@keyframes lb-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox__close {
  position: absolute; top: 1rem; right: 1rem;
  z-index: 3;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(224,182,106,.4);
  color: var(--gold-2);
  width: 42px; height: 42px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--t-fast), transform var(--t-fast);
}
.lightbox__close:hover { background: rgba(224,182,106,.18); transform: rotate(90deg); }
.lightbox__toggle {
  position: absolute; top: 1.1rem; left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(224,182,106,.35);
  border-radius: 999px;
  padding: .2rem;
}
.lightbox__btn {
  appearance: none; border: 0; cursor: pointer;
  background: transparent;
  color: var(--ink-2);
  padding: .45rem 1.1rem;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast);
}
.lightbox__btn:hover { color: var(--gold-2); }
.lightbox__btn.is-active {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #1a1006;
  box-shadow: 0 4px 12px -4px rgba(224,182,106,.55);
}
.lightbox__viewport {
  position: relative;
  grid-row: 1 / -1;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.lightbox__viewport.is-grabbing { cursor: grabbing; }
.lightbox__img {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  user-select: none;
  pointer-events: none;
  max-width: none;
  will-change: transform;
}
.lightbox__hint {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 3;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(224,182,106,.2);
  border-radius: 999px;
  padding: .45rem 1rem;
  color: var(--ink-3); font-size: .76rem;
  display: flex; gap: .7rem; flex-wrap: wrap; align-items: center;
  white-space: nowrap;
}
.lightbox__hint i { color: var(--gold-3); margin-right: .3rem; }
.lightbox__hint kbd {
  background: rgba(255,255,255,.08); border: 1px solid rgba(224,182,106,.3);
  padding: .1rem .35rem; border-radius: 4px; font-size: .72rem; color: var(--gold-2);
}
@media (max-width: 600px) {
  .lightbox__hint { font-size: .68rem; padding: .35rem .65rem; }
  .lightbox__hint kbd { display: none; }
}

/* ============ JOURNAL ============ */
.journal-entry {
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid rgba(224,182,106,.12);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  display: grid; grid-template-columns: 1fr; gap: .6rem;
  box-shadow: var(--shadow);
}
.journal-entry__meta { color: var(--ink-3); font-size: .82rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.journal-entry__title { margin: 0; /* font-family / font-size in handwriting block */ }
.journal-entry__photo { margin-top: .6rem; border-radius: 10px; max-height: 380px; object-fit: cover; }
.journal-entry__body { color: var(--ink); font-size: .95rem; white-space: pre-wrap; }

/* edit / delete buttons — fade in on hover/focus, owner-or-admin only */
.journal-entry__actions {
  margin-left: auto;
  display: inline-flex; gap: .25rem;
  opacity: 0; transition: opacity var(--t-fast);
}
.journal-entry:hover .journal-entry__actions,
.journal-entry:focus-within .journal-entry__actions { opacity: 1; }
.journal-entry__edit,
.journal-entry__del {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(224,182,106,.2);
  color: var(--ink-3); cursor: pointer;
  width: 1.7rem; height: 1.7rem;
  border-radius: 6px; padding: 0;
  display: grid; place-items: center;
  font-size: .78rem;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.journal-entry__edit:hover { color: var(--gold); border-color: var(--gold-3); background: rgba(224,182,106,.1); }
.journal-entry__del:hover  { color: var(--red);  border-color: rgba(201,87,62,.4); background: rgba(201,87,62,.1); }

/* Inline edit form — sits as a sibling card right after the entry it edits */
.journal-edit {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--gold-3);
  border-radius: var(--radius);
  padding: 1rem 1.2rem 1.1rem;
  box-shadow: var(--shadow);
  max-width: none;
}
.journal-edit__head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 .55rem;
  color: var(--gold-2); font: 700 .82rem/1 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
}
.journal-edit__head button {
  background: transparent; border: 0; color: var(--ink-3); cursor: pointer;
  padding: .15rem .35rem; border-radius: 4px;
}
.journal-edit__head button:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.journal-edit__photo {
  border: 1px solid rgba(224,182,106,.18);
  border-radius: 10px;
  padding: .55rem .75rem;
  display: grid; gap: .35rem;
}
.journal-edit__photo legend {
  padding: 0 .35rem;
  color: var(--ink-2); font-size: .85rem;
}
.photo-radio { font-size: .9rem; color: var(--ink-2); display: flex; align-items: center; gap: .45rem; }
.photo-radio input[type="radio"] { accent-color: var(--gold); }
.photo-radio input[type="radio"]:disabled + * { opacity: .45; }
.journal-edit__file { margin-top: .25rem; max-width: 100%; }
.journal-edit__err { margin: 0; color: var(--red); font-size: .85rem; }
.journal-edit__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ============ FORM ============ */
.form { display: grid; gap: .9rem; max-width: 640px; }
.form label { display: grid; gap: .25rem; font-size: .9rem; color: var(--ink-2); }
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="date"],
.form input[type="datetime-local"],
.form input[type="number"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="url"],
.form input[type="file"],
.form select,
.form textarea {
  width: 100%;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid rgba(224,182,106,.18); border-radius: 10px;
  padding: .65rem .8rem; font-size: 1rem; font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  box-sizing: border-box;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(224,182,106,.12);
}
.form textarea { min-height: 140px; resize: vertical; }

.row-2 { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) { .row-2 { grid-template-columns: 1fr; } }

/* ============ FOOTER ============ */
.site-footer {
  border-top: 1px solid rgba(224,182,106,.08);
  padding: 2rem 0 3rem;
  color: var(--ink-3);
  margin-top: 4rem;
  font-size: .88rem;
}
.site-footer__line { margin: 0 0 .4rem; color: var(--ink-2); }
.site-footer__small { margin: 0; color: var(--ink-3); font-size: .8rem; }

/* ============ UTIL ============ */
.muted { color: var(--ink-3); }
.center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.stack { display: grid; gap: 1rem; }

/* fade-in on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}