/* ==========================================================================
   Anu Spirits Limited - shared stylesheet for editorial / guide pages.

   index.html carries ~197KB of inline CSS because it is a single showpiece
   page. Content pages must not pay that. This file is the whole chrome for a
   guide page in a fraction of the weight, and it is cached once across every
   page that uses it, so each additional page costs almost nothing to serve.

   Tokens are copied verbatim from index.html so the two never drift apart.
   Both themes must declare every token: relying on a var() fallback for a
   themed colour is how the H1 line ended up at 1.45:1 in light mode.
   ========================================================================== */

:root { --gutter: clamp(1.25rem, 4vw, 3rem); --measure: 68ch; --nav-h: 68px; }

[data-theme="dark"] {
  --bg: #060c18; --bg-2: #0b1424; --bg-3: #101c33; --bg-4: #172642;
  --blue: #408eff; --blue-soft: #6da7ff;
  --gold: #d8ad58; --gold-light: #efd596; --gold-dim: #a48246; --cream: #f3eccf;
  --gold-soft: #e3c98f;
  --text: #e6ecf5; --text-muted: #9fa8bb; --text-dim: #7d879e;
  --card-bg: rgba(20, 32, 56, 0.55); --card-border: rgba(216, 173, 88, 0.10);
  --nav-bg: rgba(6, 12, 24, 0.97); --nav-border: rgba(216, 173, 88, 0.10);
  --logo-filter: invert(1);
}
[data-theme="light"] {
  --bg: #f7f2e9; --bg-2: #ede4d2; --bg-3: #e2d8c2; --bg-4: #d6cab2;
  --blue: #1a4ea3; --blue-soft: #2057b8;
  --gold: #8e5e1c; --gold-light: #a8742e; --gold-dim: #6f4810; --cream: #11112a;
  --gold-soft: #6f4810;
  --text: #11112a; --text-muted: #2e2e40; --text-dim: #4d4d5e;
  --card-bg: rgba(255,255,255,0.85); --card-border: rgba(110,72,16,0.18);
  --nav-bg: rgba(247, 242, 233, 0.97); --nav-border: rgba(110,72,16,0.14);
  --logo-filter: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-weight: 300; line-height: 1.72; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
::selection { background: var(--gold); color: #0a0f1a; }

/* Keyboard users land here first, not on some off-screen control. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #0a0f1a; padding: 0.85rem 1.4rem;
  font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  padding: 0.85rem var(--gutter);
  background: var(--nav-bg); border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(14px);
}
/* Logo art is a wide lockup. Height-only sizing plus the width/height attrs
   squashes it, so width must follow the ratio. */
.nav-logo img { height: 34px; width: auto; max-width: 100%; filter: var(--logo-filter); display: block; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  color: var(--text-muted); text-decoration: none; font-size: 0.72rem;
  letter-spacing: 2.2px; text-transform: uppercase; white-space: nowrap; transition: color .2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold); }
.nav-cta {
  border: 1px solid var(--gold); color: var(--gold); text-decoration: none;
  padding: 0.6rem 1.15rem; font-size: 0.7rem; letter-spacing: 2.2px;
  text-transform: uppercase; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s;
}
.nav-cta:hover { background: var(--gold); color: #0a0f1a; }
/* Below ~1150px the row will not fit beside the logo. These pages carry no
   hamburger script, so rather than hide navigation entirely the row becomes a
   horizontally scrollable strip. Every destination stays reachable with no JS. */
@media (max-width: 1150px) {
  .nav { flex-wrap: wrap; row-gap: 0.6rem; }
  .nav > nav { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav > nav::-webkit-scrollbar { display: none; }
  .nav-links { gap: 1.25rem; padding-bottom: 0.15rem; }
  .nav-links a { padding: 0.5rem 0; display: inline-block; }
}

/* ---------- article shell ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.page-head { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--card-border); }
.crumbs { font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1.4rem; }
.crumbs a { color: var(--gold-dim); text-decoration: none; }
.crumbs a:hover { color: var(--gold); text-decoration: underline; }
.kicker {
  display: block; font-size: 0.72rem; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.1rem;
}
h1 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: clamp(2.1rem, 5.2vw, 3.7rem); line-height: 1.06; margin: 0 0 1.1rem;
  letter-spacing: -0.01em;
}
h1 em { font-style: italic; color: var(--gold-soft); }
.standfirst { font-size: clamp(1rem, 1.6vw, 1.16rem); color: var(--text-muted); max-width: var(--measure); margin: 0; }
.meta-line { margin-top: 1.6rem; font-size: 0.74rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(2rem, 5vw, 4.5rem); padding: clamp(2.5rem, 5vw, 4rem) 0 5rem; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .toc { position: static; order: -1; } }

article { max-width: var(--measure); font-size: 1.02rem; }
article h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.18;
  margin: 3.2rem 0 1rem; scroll-margin-top: calc(var(--nav-h) + 1rem);
}
article h3 {
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 1.06rem;
  margin: 2.1rem 0 0.6rem; color: var(--gold-soft);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
article p { margin: 0 0 1.15rem; }
article ul, article ol { margin: 0 0 1.3rem; padding-left: 1.2rem; }
article li { margin-bottom: 0.55rem; }
article strong { font-weight: 600; color: var(--text); }
/* Prose links had no selector on the main site and rendered browser-blue at
   1.73:1. Never leave an <a> unstyled inside copy. */
article a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
article a:hover { color: var(--gold-light); }
[data-theme="light"] article a { color: var(--gold-dim); }

.lede { font-size: 1.1rem; color: var(--text-muted); border-left: 2px solid var(--gold-dim); padding-left: 1.2rem; margin-bottom: 2rem; }
.callout {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-left: 3px solid var(--gold); padding: 1.3rem 1.5rem; margin: 2rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout-title { font-size: 0.72rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; font-weight: 600; }

table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: 0.94rem; }
.table-scroll { overflow-x: auto; }
th, td { text-align: left; padding: 0.72rem 0.9rem; border-bottom: 1px solid var(--card-border); vertical-align: top; }
th { font-size: 0.7rem; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); font-weight: 600; }

.faq-q { margin: 1.6rem 0 0.5rem; font-weight: 500; color: var(--text); font-size: 1.02rem; }

/* ---------- table of contents ---------- */
.toc { position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: start; font-size: 0.82rem; }
.toc-title { font-size: 0.68rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.9rem; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--card-border); }
.toc li { margin: 0; }
.toc a { display: block; padding: 0.42rem 0 0.42rem 0.9rem; color: var(--text-muted); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; }
.toc a:hover { color: var(--gold); border-left-color: var(--gold-dim); }

/* ---------- CTA + footer ---------- */
.cta-band {
  border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border);
  background: var(--bg-2); padding: clamp(2.5rem, 5vw, 4rem) 0; text-align: center;
}
.cta-band h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 0.8rem; }
.cta-band p { color: var(--text-muted); max-width: 56ch; margin: 0 auto 1.8rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.95rem 2rem; text-decoration: none;
  font-size: 0.74rem; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 600;
  background: linear-gradient(135deg, #c9a155, #a9853f); color: #0a0f1a; border: none;
}
.btn-ghost { background: none; border: 1px solid var(--card-border); color: var(--text); }
.btn:hover { filter: brightness(1.08); }

.related { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.related h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 1.7rem; margin: 0 0 1.4rem; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.related-card { display: block; padding: 1.2rem 1.3rem; background: var(--card-bg); border: 1px solid var(--card-border); text-decoration: none; color: var(--text); transition: border-color .2s, transform .2s; }
.related-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.related-card span { display: block; font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.related-card strong { display: block; font-weight: 500; font-size: 1rem; line-height: 1.35; }

.site-footer { border-top: 1px solid var(--card-border); padding: 2.6rem 0; font-size: 0.82rem; color: var(--text-muted); }
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.footer-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-bottom: 1.2rem; }
.footer-legal { font-size: 0.74rem; color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}