/* BestWhiskyUK — shared production stylesheet
   Tokens: bg #F5F6F4 / surface #FFFFFF / ink #181818 / body #262625
   secondary #5f6260 / muted #6d706d / accent burgundy #542E32 / accent copper #9a552c
   border #e2e2e0 / dark band #181818
   Muted and copper were darkened from the original #7a7d7a / #A75F32 to meet
   WCAG AA (4.5:1) for small text on #FFFFFF and #F5F6F4. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #F5F6F4;
  font-family: 'Public Sans', sans-serif;
  color: #181818;
}

img { max-width: 100%; }

a { color: #542E32; text-decoration: none; }
a:hover { color: #3a1f22; }
a:focus-visible { outline: 2px solid #542E32; outline-offset: 3px; }

/* ---------- Site header ---------- */

.site-header { border-bottom: 1px solid #e2e2e0; background: #FFFFFF; }

.site-header__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-header--wide .site-header__inner { max-width: 1180px; padding: 20px 24px; }

.site-logo {
  font-family: 'Spectral', serif;
  font-weight: 700;
  font-size: 20px;
  color: #181818;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-logo span { color: #542E32; }
.site-logo:hover { color: #181818; }

.site-nav { display: flex; gap: 28px; flex-wrap: wrap; }
.site-nav a {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: #5f6260;
}
.site-nav a:hover { color: #542E32; }
.site-nav a:focus-visible { outline: 2px solid #542E32; outline-offset: 3px; }
.site-nav a.is-active { font-weight: 600; color: #542E32; }

/* ---------- Site footer ---------- */

.site-footer { border-top: 1px solid #e2e2e0; background: #FFFFFF; }

.footer-cols {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 32px;
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap: 32px;
}

.footer-brand {
  font-family: 'Spectral', serif;
  font-weight: 700;
  font-size: 18px;
  color: #181818;
  text-decoration: none;
}
.footer-brand span { color: #542E32; }
.footer-brand:hover { color: #181818; }

.footer-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #6d706d;
  margin: 12px 0 0;
  max-width: 260px;
}

.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9a552c;
  margin-bottom: 4px;
}
.footer-col a { font-size: 14px; color: #5f6260; text-decoration: none; }
.footer-col a:hover { color: #542E32; }

.footer-bottom {
  border-top: 1px solid #e2e2e0;
  padding: 20px 24px;
  text-align: center;
  font-size: 13px;
  color: #6d706d;
}

@media (max-width: 820px) {
  .footer-cols { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* ---------- Article shell (used by every content page except the homepage) ---------- */

.article-shell {
  max-width: 800px;
  margin: 32px auto 48px;
  padding: 48px 56px 64px;
  background: #FFFFFF;
  border: 1px solid #e2e2e0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

@media (max-width: 700px) {
  .article-shell { padding: 40px 32px 48px; margin: 24px auto 40px; }
}
@media (max-width: 480px) {
  .article-shell { padding: 32px 20px 40px; margin: 16px auto 32px; }
}

.art-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 700px) {
  .art-hero-grid { grid-template-columns: 1fr; }
}

.art-hero-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  display: block;
}
@media (max-width: 700px) {
  .art-hero-image { height: 220px; }
}

.art-hero-caption { font-size: 12.5px; color: #6d706d; margin-top: 8px; }

.breadcrumb { font-size: 13px; color: #6d706d; margin-bottom: 18px; }
.breadcrumb a { color: #6d706d; text-decoration: none; }
.breadcrumb a:hover { color: #542E32; }

.eyebrow-plain { font-size: 13px; color: #6d706d; margin-bottom: 18px; }

h1.page-title {
  font-family: 'Spectral', serif;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 14px;
}
@media (max-width: 480px) {
  h1.page-title { font-size: 30px; }
}

.deck { font-size: 19px; line-height: 1.6; color: #262625; margin: 0 0 20px; }
@media (max-width: 480px) {
  .deck { font-size: 17px; }
}

.byline { display: flex; gap: 16px; font-size: 13px; color: #6d706d; margin-bottom: 0; flex-wrap: wrap; }
.byline strong { color: #262625; }
.byline a { color: #6d706d; text-decoration: underline; }

.hero-spacer { height: 36px; }

/* ---------- Direct answer ---------- */

.direct-answer {
  background: #F5F6F4;
  border-top: 3px solid #542E32;
  padding: 28px 32px;
  margin-bottom: 32px;
  max-width: 680px;
}
.direct-answer__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #542E32;
  margin-bottom: 10px;
}
.direct-answer p { font-size: 18px; line-height: 1.6; margin: 0; color: #181818; }
@media (max-width: 480px) {
  .direct-answer { padding: 22px 20px; }
  .direct-answer p { font-size: 16.5px; }
}

/* ---------- Headings & body copy inside articles ---------- */

.article-shell h2 {
  font-family: 'Spectral', serif;
  font-weight: 700;
  margin: 36px 0 16px;
}
.article-shell h2:first-of-type { margin-top: 0; }

/* AI-instructions page uses a tighter, reference-style heading rhythm */
.article-shell--compact h2 { margin: 0 0 8px; }

/* AI-instructions / reference-style shell is slightly wider with tighter padding */
.article-shell--ref { max-width: 820px; padding: 44px 48px 56px; }
@media (max-width: 700px) {
  .article-shell--ref { padding: 36px 28px 44px; }
}
@media (max-width: 480px) {
  .article-shell--ref { padding: 28px 18px 36px; }
}
.h2-lg { font-size: 26px; }
.h2-md { font-size: 24px; }
.h2-sm { font-size: 22px; }
.h2-xs { font-size: 20px; }
.h2-min { font-size: 18px; }
@media (max-width: 480px) {
  .h2-lg { font-size: 22px; }
  .h2-md { font-size: 20px; }
}

.article-shell p.body-text { font-size: 16px; line-height: 1.75; color: #262625; margin: 0 0 16px; }
.article-shell p.body-text--tight { margin: 0 0 8px; }
.article-shell p.caption-note { font-size: 13px; color: #6d706d; margin: 0 0 40px; }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
.table-scroll--tight { margin-bottom: 0; }

.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.data-table th {
  padding: 10px 12px;
  font-weight: 700;
  border-bottom: 2px solid #181818;
  text-align: left;
}
.data-table th:first-child { padding-left: 0; }
.data-table th:last-child { padding-right: 0; }
.data-table td { padding: 10px 12px; }
.data-table td:first-child { padding-left: 0; }
.data-table td:last-child { padding-right: 0; }
.data-table tbody tr { border-bottom: 1px solid #e2e2e0; }
.data-table tbody tr:last-child { border-bottom: none; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 36px; }
.spec-table tr { border-bottom: 1px solid #e2e2e0; }
.spec-table tr:last-child { border-bottom: none; }
.spec-table td:first-child { padding: 10px 12px 10px 0; color: #5f6260; width: 38%; }
.spec-table td:last-child { padding: 10px 0; font-weight: 600; }

.spec-table--compact { font-size: 14px; margin-bottom: 24px; }
.spec-table--compact td:first-child { padding: 8px 10px 8px 0; width: 34%; }
.spec-table--compact td:last-child { padding: 8px 0; font-weight: 400; }

/* ---------- Two-up definition split (Scotch: single malt / blended) ---------- */

.cat-split-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 600px) {
  .cat-split-grid { grid-template-columns: 1fr; }
}
.cat-split-grid > div { border: 1px solid #e2e2e0; padding: 20px; }
.cat-split-grid .cat-split__title { font-family: 'Spectral', serif; font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.cat-split-grid p { font-size: 15px; line-height: 1.65; color: #262625; margin: 0; }

/* ---------- "Start here" card list (Scotch hub) ---------- */

.start-list { display: grid; gap: 14px; margin-bottom: 40px; }
.start-list a { display: block; border: 1px solid #e2e2e0; padding: 18px 20px; text-decoration: none; }
.start-list .start-list__title { font-weight: 600; color: #181818; font-size: 16px; margin-bottom: 4px; }
.start-list .start-list__desc { font-size: 14px; color: #5f6260; }

/* ---------- At-a-glance fact grid (Beginners guide) ---------- */

.at-a-glance {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 10px 24px;
  margin-bottom: 40px;
  font-size: 15px;
}
.at-a-glance > div { padding: 10px 0; border-bottom: 1px solid #e2e2e0; }
@media (max-width: 480px) {
  .at-a-glance { grid-template-columns: 1fr; }
}

/* ---------- Numbered picks (Beginners guide) ---------- */

.pick { padding: 24px 0; border-top: 1px solid #e2e2e0; }
.pick--first { border-top: 2px solid #181818; }
.pick--closed { border-bottom: 1px solid #e2e2e0; margin-bottom: 36px; }
.pick__eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: #9a552c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.pick__title { font-family: 'Spectral', serif; font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.pick__title a { text-decoration: none; color: #181818; }
.pick p { font-size: 16px; line-height: 1.7; margin: 0 0 10px; }
.pick__meta { font-size: 14px; color: #5f6260; }

/* ---------- Decision rules list ---------- */

.decision-list { font-size: 16px; line-height: 1.9; color: #262625; padding-left: 22px; margin: 0 0 40px; }

/* ---------- Related guides / explore list ---------- */

.related-list { display: flex; flex-direction: column; margin-bottom: 20px; }
.related-list a {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid #e2e2e0;
  text-decoration: none;
}
.related-list a:hover { background: #F5F6F4; }
.related-list .related-list__tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9a552c;
  min-width: 64px;
  flex-shrink: 0;
}
.related-list .related-list__title { font-weight: 600; color: #181818; font-size: 15.5px; }

/* ---------- Sources list ---------- */

.sources-list { font-size: 14px; line-height: 1.8; color: #5f6260; padding-left: 20px; margin: 0; }
.sources-list--spaced { margin: 0 0 20px; }

/* ---------- Methodology fact/judgement boxes ---------- */

.fact-box { border: 1px solid #e2e2e0; padding: 18px 20px; margin-bottom: 12px; }
.fact-box--last { margin-bottom: 36px; }
.fact-box__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.fact-box__label--objective { color: #5f6260; }
.fact-box__label--editorial { color: #542E32; }
.fact-box p { font-size: 15px; line-height: 1.6; margin: 0; }

/* ---------- AI-instructions callout & FAQ ---------- */

.ai-callout { background: #E9E1D5; border: 1px solid #C9BBA7; border-radius: 2px; padding: 22px 24px; margin-bottom: 32px; }
.ai-callout p { font-size: 14.5px; line-height: 1.6; color: #171715; margin: 0 0 10px; }
.ai-callout ol { font-size: 14.5px; line-height: 1.85; color: #171715; padding-left: 20px; margin: 0; }

.faq-item { margin-bottom: 14px; }
.faq-item--last { margin-bottom: 28px; }
.faq-item__q { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.faq-item__a { font-size: 14.5px; line-height: 1.65; color: #262625; margin: 0; }

/* ---------- Sitemap page ---------- */

.sitemap-list { font-size: 16px; line-height: 1.9; padding-left: 20px; margin: 0 0 32px; }
.sitemap-list .route { color: #6d706d; font-size: 13px; }

/* ============================================================
   Homepage
   ============================================================ */

.hp-hero-section { background: #181818; }
.hp-hero-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 24px 88px;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr);
  gap: 56px;
  align-items: center;
}
.hp-hero-eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #E8DFD2;
  margin-bottom: 18px;
}
.hp-hero-title {
  font-family: 'Spectral', serif;
  font-size: clamp(32px,7vw,52px);
  line-height: 1.1;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 22px;
}
.hp-hero-copy {
  font-size: 18px;
  line-height: 1.65;
  color: #c7c5bf;
  max-width: 500px;
  margin: 0 0 34px;
}
.hp-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.btn {
  padding: 14px 26px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
}
.btn-primary { background: #542E32; color: #FFFFFF; border: 1px solid #542E32; }
.btn-primary:hover { background: #6b3a40; border-color: #6b3a40; color: #FFFFFF; }
.btn-primary:focus-visible { outline: 2px solid #E8DFD2; outline-offset: 2px; }
.btn-outline { border: 1px solid #55534c; color: #FFFFFF; background: transparent; }
.btn-outline:hover { border-color: #9a552c; color: #E8DFD2; }
.btn-outline:focus-visible { outline: 2px solid #E8DFD2; outline-offset: 2px; }

.hp-hero-image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  display: block;
}

.hp-section { padding: 80px 24px; }
@media (max-width: 820px) {
  .hp-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hp-hero-image { height: 300px; }
}
@media (max-width: 700px) {
  .hp-section { padding: 56px 20px; }
  .hp-hero-grid { padding: 56px 20px 64px; }
}
@media (max-width: 480px) {
  .hp-section { padding: 44px 16px; }
  .hp-hero-grid { padding: 44px 16px 52px; }
  .hp-hero-image { height: 240px; }
  .hp-hero-ctas { flex-direction: column; align-items: stretch; }
  .hp-hero-ctas .btn { width: 100%; text-align: center; padding: 16px 26px; }
}

.hp-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9a552c;
  margin-bottom: 12px;
}

.hp-inner { max-width: 1180px; margin: 0 auto; }
.hp-inner--narrow { max-width: 900px; }

.hp-h2 { font-family: 'Spectral', serif; font-size: 30px; font-weight: 700; margin: 0 0 40px; max-width: 600px; }
.hp-h2--tight { margin: 0; }
.hp-h2-md { font-family: 'Spectral', serif; font-size: 28px; font-weight: 700; }
@media (max-width: 480px) {
  .hp-h2, .hp-h2-md { font-size: 24px; }
}

.hp-feature-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
.hp-feature-grid--intro { grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); margin-bottom: 56px; }
.hp-feature-grid--split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; }
.hp-feature-grid--card { background: #FFFFFF; border: 1px solid #e2e2e0; }
.hp-feature-grid--rule { gap: 0; border-left: 4px solid #542E32; }
@media (max-width: 820px) {
  .hp-feature-grid { grid-template-columns: 1fr !important; }
}

.hp-feature-media { width: 100%; object-fit: cover; object-position: center; display: block; }
.hp-feature-num { font-size: 12px; font-weight: 700; color: #6d706d; letter-spacing: 0.05em; margin-bottom: 10px; }
.hp-feature-title { font-family: 'Spectral', serif; font-size: 26px; font-weight: 700; margin-bottom: 10px; }
.hp-feature-copy { font-size: 15.5px; line-height: 1.65; color: #5f6260; margin: 0 0 14px; max-width: 440px; }
.hp-feature-link { font-size: 14px; font-weight: 600; color: #542E32; }
.hp-feature-link--lg { font-size: 14.5px; }

.hp-feature-pad { padding: 40px 44px 40px 0; }
.hp-feature-pad--rule { padding: 44px 44px 44px 40px; }
@media (max-width: 820px) {
  .hp-feature-pad, .hp-feature-pad--rule { padding: 28px 4px; }
}

.hp-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; }
@media (max-width: 820px) {
  .hp-story-grid { grid-template-columns: 1fr; }
}
.hp-story-card { text-decoration: none; color: inherit; display: block; padding-top: 20px; }
.hp-story-card--a { border-top: 3px solid #542E32; }
.hp-story-card--b { border-top: 3px solid #9a552c; }
.hp-story-card--c { border-top: 3px solid #181818; }
.hp-story-num { font-size: 12px; font-weight: 700; color: #6d706d; letter-spacing: 0.05em; margin-bottom: 8px; }
.hp-story-title { font-family: 'Spectral', serif; font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.hp-story-copy { font-size: 14.5px; line-height: 1.6; color: #5f6260; margin: 0 0 12px; }
.hp-story-link { font-size: 13.5px; font-weight: 600; color: #542E32; }

.hp-facts-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 10px 20px;
  font-size: 14px;
}
.hp-facts-grid span { color: #6d706d; }
@media (max-width: 480px) {
  .hp-facts-grid { grid-template-columns: 1fr; }
}
.hp-facts-note { font-size: 13px; color: #6d706d; margin-top: 10px; }
.hp-facts-wrap { border-top: 1px solid #e2e2e0; padding-top: 16px; margin-bottom: 20px; }

.hp-region-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 1px;
  background: #e2e2e0;
  border: 1px solid #e2e2e0;
}
@media (max-width: 820px) {
  .hp-region-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 480px) {
  .hp-region-grid { grid-template-columns: 1fr; }
}
.hp-region-cell { background: #FFFFFF; padding: 24px 18px; }
.hp-region-cell__title { font-family: 'Spectral', serif; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.hp-region-cell__desc { font-size: 13px; color: #5f6260; line-height: 1.5; }

.hp-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.hp-methodology-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 24px 40px;
  margin-bottom: 32px;
}
@media (max-width: 600px) {
  .hp-methodology-grid { grid-template-columns: 1fr; }
}
.hp-methodology-item { border-top: 2px solid #181818; padding-top: 14px; }
.hp-methodology-item p { font-size: 14.5px; line-height: 1.65; color: #3c3830; margin: 0; }

/* ---------- Reduced motion ---------- */

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