/* ── Self-hosted Marcellus ─────────────────────────────────────────────────
   These faces used to load from fonts.googleapis.com, which handed every
   visitor's IP address to Google before any interaction — a recipient the
   privacy policy does not name, and a non-EEA transfer the Italian Garante
   has ruled against for exactly this pattern. Serving the identical files
   from our own origin removes the transfer, drops two external connections
   from every page load, and lets the CSP forbid off-site styles and fonts.

   Generated from Google's own css2 response so the unicode subsetting is
   unchanged. Marcellus and Marcellus SC are (c) their authors under the
   SIL Open Font License 1.1.
   ──────────────────────────────────────────────────────────────────────── */
/* latin-ext */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/marcellus-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/marcellus-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Marcellus SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/marcellus-sc-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Marcellus SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/marcellus-sc-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   HARCHIVES — Global Stylesheet
   Font: Cinzel / Cinzel Decorative (Google Fonts)
   ============================================================ */

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

:root {
    --canvas: #F2E8D6;
    --canvas-dark: #EAD9C0;
    --ink: #1C1208;
    /* Text colours below are all >=4.5:1 on --canvas (WCAG AA body text). */
    --gold: #846413;            /* 4.53:1 on canvas. Was #8B6914 (4.19:1). */
    --gold-light: #B8921E;      /* surfaces and borders ONLY - 2.41:1 as text */
    --gold-hover: #634C0E;      /* hover fills go DARKER, not lighter */
    --terra: #6B4226;
    --parchment: #81643D;       /* 4.52:1. Was #C4A882 (1.86:1 - unreadable). */
    --text-muted: #6B5A40;

    /* For text sitting on the darker tan texture (nav, cards, footer), where
       the light-canvas colours above drop to ~1.2:1. */
    --surface-tan: #D7B584;     /* nav, cards, footer - was baked into the image */
    --on-dark: #3A2A12;         /* 7.13:1 on the tan texture */
    --on-dark-muted: #5B452C;   /* 4.64:1 */

    /* Keyboard focus ring - 9.59:1 on canvas, visible against gold and tan. */
    --focus: #1A3A5C;
    --danger: #8B2020;
    --success: #2A5A2A;
    --info: #1A3A5C;
    --warning: #6B5000;
    --radius: 2px;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Marcellus', serif;
    color: var(--ink);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    font-size: 15px;
    line-height: 1.7;
    /* The texture is a seamless weave, so TILE it at natural size.
       The old `cover` + `background-attachment: fixed` scaled a 1376x768
       landscape image to fill a portrait phone viewport: a ~3x upscale (blurry)
       that cropped off most of the width, and `fixed` is additionally broken on
       iOS Safari. Tiling renders ~1:1 on every screen and never crops. */
    /* The photographed texture carried a vignette: ~16 levels of luminance
       drift baked into the image. Tiling it repeated that gradient and read as
       horizontal stripes. This is a generated plain-weave tile with no
       large-scale variation at all (banding 0.11 vs 6.60), laid over a flat
       colour, so the surface is uniform at any size and never crops. */
    background-color: var(--canvas);
    background-image: url("/static/img/weave.png");
    background-size: 96px 96px;
    background-repeat: repeat;
}

.page-wrapper {
    position: relative;
    z-index: 1;
}

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Marcellus', serif;
  color: var(--ink);
  line-height: 1.2;
}
h1 { font-size: clamp(1.8rem, 4vw, 3rem); font-family: 'Marcellus SC'; }
h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); font-family: 'Marcellus SC'; }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.95rem; font-family: 'Marcellus', serif; letter-spacing: 0.1em; text-transform: uppercase; }

p { color: var(--ink); line-height: 2; }
a { color: var(--gold); text-decoration: none; transition: color 0.2s; }

.eyebrow {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.6rem;
}

/* ── Navigation ─────────────────────────────────────────── */
nav.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background-color: var(--surface-tan);
    background-image: url("/static/img/weave.png");
    background-size: 96px 96px;
    background-repeat: repeat;
    border-bottom: 1px solid rgba(139,105,20,0.22);
    backdrop-filter: blur(6px);
}

.nav-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 2rem;
  gap: 1rem;
  position: relative;
}

.nav-logo {
  display: inline-block;
  font-family: 'Marcellus SC', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  transition: transform 0.2s ease;
}
.nav-logo:hover { transform: scale(1.05); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  list-style: none;
  /* Never wrap: below the breakpoint the menu collapses instead, so a ragged
     two-row header can no longer happen at any width. */
  flex-wrap: nowrap;
}

.nav-links a {
  font-size: 0.68rem;
  display: inline-block;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  transition: transform 0.2s ease;
}
.nav-links a:hover { transform: scale(1.05); }

.nav-auth {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: 'Marcellus', serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.22s;
  text-align: center;
  border-radius: var(--radius);
  /* `white-space: nowrap` with 0.18em letter-spacing meant a long label like
     "PURCHASE MEMBERSHIP - EUR500/YR" could not shrink and punched straight out
     of its card on narrow screens. Let it wrap and never exceed its parent. */
  white-space: normal;
  max-width: 100%;
  overflow-wrap: break-word;
}

.btn-primary {
  background: var(--gold);
  color: var(--canvas);
  border-color: var(--gold);
}
.btn-primary:hover {
  /* Hover went LIGHTER on a light background, dropping the label to 2.41:1 -
     it nearly vanished on hover. Darker gives 6.73:1. */
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: var(--canvas);
}

.btn-outline {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.btn-outline:hover {
  background: var(--gold);
  color: var(--canvas);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn-danger:hover { opacity: 0.85; }

.btn-sm { font-size: 0.65rem; padding: 0.4rem 0.9rem; letter-spacing: 0.14em; }
.btn-lg { font-size: 0.78rem; padding: 0.85rem 2rem; letter-spacing: 0.22em; }
.btn-block { display: block; width: 100%; }

/* ── Layout ──────────────────────────────────────────────── */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section {
  padding: 5.5rem 0;
}

.section-alt {
  background: rgba(196,168,130,0.1);
}

.section-header {
  margin-bottom: 3rem;
  max-width: 640px;
}

.section-header p { margin-top: 1rem; }

/* ── Ornaments ───────────────────────────────────────────── */
.ornament-divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 2rem 0;
}
.ornament-divider::before,
.ornament-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.ornament-diamond {
  width: 7px; height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.ornament-line {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0;
  opacity: 0.45;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    background-color: var(--surface-tan);
    background-image: url("/static/img/weave.png");
    background-size: 96px 96px;
    background-repeat: repeat;
    border: 1px solid rgba(139,105,20,0.28);
    padding: 1.75rem;
    position: relative;
    transition: border-color 0.22s, transform 0.22s;
}

.card::before {
  content: '';
  position: absolute;
  top: 5px; left: 5px; right: 5px; bottom: 5px;
  border: 0.5px solid rgba(139,105,20,0.12);
  pointer-events: none;
}

.card:hover {
  border-color: rgba(139,105,20,0.5);
  transform: translateY(-2px);
}

.card-title {
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* ── Forms ───────────────────────────────────────────────── */
.form-wrap {
  max-width: 520px;
  margin: 0 auto;
  background: rgba(242,232,214,0.7);
  border: 1px solid rgba(139,105,20,0.25);
  padding: 2.5rem;
  position: relative;
}
.form-wrap::before {
  content: '';
  position: absolute;
  top: 5px; left: 5px; right: 5px; bottom: 5px;
  border: 0.5px solid rgba(139,105,20,0.12);
  pointer-events: none;
}

.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.6rem 0.85rem;
  font-family: 'Marcellus', serif;
  /* 0.88rem was 13.2px. Any form control under 16px makes iOS Safari zoom the
     whole page when it receives focus; see the coarse-pointer rule below. */
  font-size: 1rem;
  color: var(--ink);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(139,105,20,0.3);
  border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s;
}

.form-control:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.75);
}

.form-control::placeholder { color: var(--parchment); }

select.form-control { appearance: none; cursor: pointer; }

.form-hint {
  font-size: 0.72rem;
  color: var(--parchment);
  margin-top: 0.3rem;
  letter-spacing: 0.04em;
}

/* Tabs (for register page) */
.account-tabs {
  display: flex;
  border-bottom: 1px solid rgba(139,105,20,0.25);
  margin-bottom: 2rem;
}

.account-tab {
  flex: 1;
  text-align: center;
  padding: 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-weight: 600;
}

.account-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ── Alerts / Flash ──────────────────────────────────────── */
.flash-messages { padding: 1rem 0 0; }

.alert {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0.75rem;
  border: 1px solid transparent;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
}

.alert-success  { background: rgba(42,90,42,0.08);  border-color: rgba(42,90,42,0.25);  color: var(--success); }
.alert-danger   { background: rgba(139,32,32,0.08); border-color: rgba(139,32,32,0.25); color: var(--danger); }
.alert-warning  { background: rgba(107,80,0,0.08);  border-color: rgba(107,80,0,0.25);  color: var(--warning); }
.alert-info     { background: rgba(26,58,92,0.08);  border-color: rgba(26,58,92,0.25);  color: var(--info); }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.18rem 0.6rem;
  border-radius: 2px;
  vertical-align: middle;
}

.badge-gold    { background: var(--gold);    color: var(--canvas); }
.badge-artist  { background: var(--terra);   color: #fff; }
.badge-user    { background: var(--text-muted); color: #fff; }
.badge-member  { background: var(--gold-light); color: var(--ink); }
.badge-active  { background: var(--success); color: #fff; }
.badge-closed  { background: var(--danger);  color: #fff; }
.badge-upcoming{ background: var(--info);    color: #fff; }

/* ── Table ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.data-table th {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(139,105,20,0.25);
}

.data-table td {
  padding: 0.75rem 1rem;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(139,105,20,0.1);
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(196,168,130,0.12); }

/* ── Admin Sidebar ───────────────────────────────────────── */
.admin-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 60px);
  margin-top: 60px;
}

.admin-sidebar {
  background: var(--ink);
  padding: 2rem 0;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.admin-sidebar-logo {
  font-family: 'Marcellus SC', serif;
  font-size: 0.85rem;
  color: var(--gold);
  padding: 0 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(196,168,130,0.15);
  margin-bottom: 1.5rem;
  letter-spacing: 0.1em;
}

.admin-nav { list-style: none; }

.admin-nav a {
  display: block;
  padding: 0.7rem 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(196,168,130,0.65);
  font-weight: 600;
  transition: all 0.2s;
  border-left: 2px solid transparent;
}

.admin-nav a:hover,
.admin-nav a.active {
  color: var(--gold);
  border-left-color: var(--gold);
  background: rgba(139,105,20,0.08);
}

.admin-content {
  padding: 2.5rem;
  background: var(--canvas);
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(139,105,20,0.2);
}

.admin-header h2 { margin: 0; }

/* Stat cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.stat-card {
  background: rgba(242,232,214,0.8);
  border: 1px solid rgba(139,105,20,0.25);
  padding: 1.5rem 1.25rem;
  text-align: center;
  position: relative;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 0.5px solid rgba(139,105,20,0.1);
  pointer-events: none;
}

.stat-number {
  font-family: 'Marcellus SC', serif;
  font-size: 2rem;
  color: var(--gold);
  font-weight: 700;
  line-height: 1;
  display: block;
  margin-bottom: 0.35rem;
}

.stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7rem 2rem 5rem;
    position: relative;
}

/*
.hero-logo-wrap {
    width: 660px;
    height: 320px; 
    overflow: hidden;
    flex-shrink: 0;
}

.hero-logo {
    width: 660px;
    height: auto; 
    display: block;
    margin-top: -320px; 
    filter: drop-shadow(0 2px 10px rgba(28,18,8,0.1));
}
*/

.hero-logo-wrap {
    width: 100%;
    max-width: 220px; /* Ridotto da 660px a 240px per renderlo della dimensione corretta */
    margin: 0 auto 1.5rem auto; /* Centra il logo e distanzia la tagline sottostante */
}

.hero-logo {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 10px rgba(28,18,8,0.1));
}

.hero-tagline {
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.hero-subtitle {
    font-size: 0.97rem;
    color: var(--text-muted);
    max-width: 580px;
    line-height: 2;
    margin-bottom: 2.5rem;
}
/*per modificare le dimensioni del logo, modifica:
    width di hero_logo e di hero-logo-wrap
    height di hero-logo-wrap
    margin-top di hero-logo

fai modifiche proporzionali (ad esempio del 10\20\30% tutti i valori)
*/

/* Auction card */
.auction-card { display: flex; flex-direction: column; }
.auction-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: 1px solid rgba(139,105,20,0.2);
  background: rgba(196,168,130,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--parchment);
  letter-spacing: 0.1em;
}
.auction-card-body { padding: 1.25rem; flex: 1; }
.auction-card-price {
  font-family: 'Marcellus SC', serif;
  font-size: 1.2rem;
  color: var(--gold);
  font-weight: 700;
  margin: 0.5rem 0;
}

/* ── Club membership box ──────────────────────────────────── */
.membership-box {
    border: 1.5px solid var(--gold);
    padding: 2.5rem;
    position: relative;
    background-color: var(--surface-tan);
    background-image: url("/static/img/weave.png");
    background-size: 96px 96px;
    background-repeat: repeat;
    max-width: 640px;
    margin: 0 auto;
}
.membership-box::before {
  content: '';
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 0.5px solid rgba(139,105,20,0.18);
  pointer-events: none;
}
.membership-price {
  font-family: 'Marcellus SC', serif;
  font-size: 2.8rem;
  color: var(--gold);
  font-weight: 700;
  line-height: 1;
}
.membership-price span {
  font-family: 'Marcellus', serif;
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* Corner accents */
.corner-tl, .corner-tr, .corner-bl, .corner-br {
  position: absolute;
  width: 20px; height: 20px;
  border-color: var(--gold);
  border-style: solid;
}
.corner-tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.corner-tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.corner-bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.corner-br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* ── Profile ─────────────────────────────────────────────── */
.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.profile-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Marcellus SC', serif;
  font-size: 1.6rem;
  color: var(--canvas);
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid rgba(139,105,20,0.3);
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.photo-thumb {
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(139,105,20,0.2);
}

/* ── Footer ──────────────────────────────────────────────── */
footer {
    background-color: var(--surface-tan);
    background-image: url("/static/img/weave.png");
    background-size: 96px 96px;
    background-repeat: repeat;
    /* Was var(--parchment): 1.17:1 on this texture, i.e. invisible. */
    color: var(--on-dark);
    padding: 3rem 0 2rem;
    position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}
.footer-logo-text {
  font-family: 'Marcellus SC', serif;
  font-size: 1.2rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.5rem;
}
.footer-tagline {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--on-dark-muted);   /* was rgba(196,168,130,0.5) - ~1.1:1 */
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.footer-links a {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform 0.2s ease;
}
.footer-links a:hover { transform: scale(1.05); }

.footer-copy {
  font-size: 0.68rem;
  color: rgba(196,168,130,0.3);
  letter-spacing: 0.06em;
}

/* ── Responsive ──────────────────────────────────────────── */
/* ── Hamburger toggle button (hidden on desktop) ────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 768px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; }

  .container { padding: 0 1.25rem; }
  .section { padding: 3.5rem 0; }
  .form-wrap { padding: 1.75rem; }

  /* Force every fixed-column inline grid (forms, comparison layouts, etc.)
     to stack into a single column on narrow screens */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Disabled button with hover tooltip (e.g. "Coming in 2027") ─────────── */
.btn-disabled-tooltip {
    position: relative;
    display: inline-block;
}

    .btn-disabled-tooltip .btn {
        opacity: 0.55;
        cursor: not-allowed;
        pointer-events: none;
    }

    .btn-disabled-tooltip::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 115%;
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        background: var(--ink);
        color: var(--canvas);
        font-family: 'Marcellus', serif;
        font-size: 0.62rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 600;
        padding: 0.45rem 0.9rem;
        border-radius: 2px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 10;
    }

    .btn-disabled-tooltip:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

/* ============================================================
   ACCESSIBILITY & MOBILE CORRECTIONS
   ============================================================ */

/* ── Keyboard focus ──────────────────────────────────────────
   Previously only .form-control had a focus style, so anyone navigating by
   keyboard had no idea which link or button they were on (WCAG 2.4.7).
   :focus-visible shows the ring for keyboard users without adding an outline
   on mouse clicks. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* Skip link: lets keyboard users jump past the nav to the content. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 500;
    background: var(--ink);
    color: var(--canvas);
    padding: 0.75rem 1.25rem;
    font-family: 'Marcellus', serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
}

/* ── Touch targets ───────────────────────────────────────────
   Buttons were about 31px tall. On touch screens the accepted minimum is 44px
   (Apple HIG / WCAG 2.5.5). Applied by input type rather than screen width, so
   a small touchscreen laptop gets it too. */
@media (pointer: coarse) {
    .btn,
    .nav-links a,
    button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Anything under 16px makes iOS Safari zoom the page on focus. */
    .form-control,
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

/* ── Reduced motion ──────────────────────────────────────────
   Honour the OS "reduce motion" setting for users who get motion sickness. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Password visibility toggle ──────────────────────────────
   The input keeps its normal .form-control styling; the button sits inside the
   field's right edge with padding reserved so text never runs underneath it. */
.password-field {
    position: relative;
    display: block;
}
.password-field .form-control {
    padding-right: 3rem;
}
.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    transition: color 0.2s;
}
.password-toggle:hover { color: var(--gold); }
.password-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
    pointer-events: none;
}
/* Exactly one of the two icons is shown, driven by aria-pressed so the state
   is correct for screen readers as well as sighted users. */
.password-toggle .icon-hide { display: none; }
.password-toggle[aria-pressed="true"] .icon-show { display: none; }
.password-toggle[aria-pressed="true"] .icon-hide { display: block; }

/* Never let Edge/IE add a second native reveal control next to ours. */
.form-control::-ms-reveal,
.form-control::-ms-clear { display: none; }

/* ── Long-word overflow ──────────────────────────────────────
   Email addresses and pasted URLs used to force horizontal scrolling on
   narrow screens. */
body { overflow-wrap: break-word; }
table { max-width: 100%; }

/* ── Narrow screens ──────────────────────────────────────────
   Admin tables have many columns and cannot usefully stack, so let them scroll
   inside their own container rather than widening the whole page. */
@media (max-width: 768px) {
    .table-wrap,
    .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Buttons grouped in a card go full width instead of colliding. */
    .card .btn,
    .membership-box .btn {
        width: 100%;
    }
    .btn {
        letter-spacing: 0.12em;
    }
}


/* ── Navigation: collapse at 1024px, not 768px ────────────────────────────
   Six uppercase links at 0.18em letter-spacing plus the auth buttons need
   roughly 1100px. Between 768 and 1024 they used to wrap onto a second row,
   leaving the header ragged and unusually tall. */
@media (max-width: 1024px) {
    .nav-toggle { display: flex; }

    /* DOM order is logo -> toggle -> links -> auth. On mobile the links become
       absolutely positioned and leave the flex flow, so `space-between` was
       left with logo | toggle | auth and parked the hamburger in the middle of
       the header. Pushing .nav-auth right with an auto margin groups the auth
       buttons and the toggle together on the right, where a menu control
       belongs, with the wordmark alone on the left. */
    .nav-auth {
        margin-left: auto;
        order: 2;
    }
    .nav-toggle { order: 3; }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--surface-tan);
        border-bottom: 1px solid rgba(139,105,20,0.28);
        box-shadow: 0 8px 20px rgba(28,18,8,0.10);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.25s ease;
    }
    .nav-links.open {
        max-height: 420px;
        opacity: 1;
    }
    .nav-links li {
        border-top: 1px solid rgba(139,105,20,0.16);
    }
    .nav-links a {
        display: block;
        padding: 1rem 2rem;
    }
}

/* Very narrow: keep the wordmark and controls on one line. */
@media (max-width: 420px) {
    .nav-inner { padding: 0.6rem 1rem; gap: 0.5rem; }
    .nav-auth { gap: 0.4rem; }
    .nav-auth .btn { padding: 0.5rem 0.7rem; letter-spacing: 0.08em; }
    .nav-logo { font-size: 0.95rem; }
}