/*
  Wildacre Confection Works
  Workshop dossier stylesheet: Pacific Northwest Orchard palette.
  Human-readable, one declaration per line, no compression.
*/

:root
{
  --pine-deep: #14261c;
  --pine: #1b3b2b;
  --pine-mid: #264d38;
  --linen: #faf7f2;
  --linen-shade: #f0eade;
  --linen-line: #e2d9c8;
  --huckleberry: #6d2e46;
  --huckleberry-soft: #8d4059;
  --pear: #d99b26;
  --pear-pale: #f0c766;
  --sage: #5f7464;
  --ink: #1a1f1b;
  --rule: rgba(27, 59, 43, 0.16);
  --shadow-soft: 0 18px 44px rgba(20, 38, 28, 0.13);
  --shadow-lift: 0 26px 60px rgba(20, 38, 28, 0.2);
  --serif: "Palatino Linotype", "Book Antiqua", Baskerville, Georgia, serif;
  --sans: "Trebuchet MS", Verdana, "Segoe UI", sans-serif;
  --mono: "Courier New", Courier, monospace;
  --radius-lg: 22px;
  --radius-sm: 10px;
  --shell: 1180px;
}

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

html
{
  scroll-behavior: smooth;
}

body
{
  margin: 0;
  background-color: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

[hidden]
{
  display: none !important;
}

a
{
  color: var(--huckleberry);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover,
a:focus-visible
{
  color: var(--pine);
}

h1,
h2,
h3,
h4
{
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: 0.005em;
}

h1
{
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
}

h2
{
  font-size: clamp(1.6rem, 2.9vw, 2.4rem);
}

h3
{
  font-size: clamp(1.16rem, 1.7vw, 1.4rem);
}

p
{
  margin: 0 0 1.1em;
}

ul,
ol
{
  margin: 0 0 1.2em;
  padding-left: 1.25em;
}

li
{
  margin-bottom: 0.45em;
}

:focus-visible
{
  outline: 3px solid var(--pear);
  outline-offset: 3px;
}

.wk-skip
{
  position: absolute;
  left: -9999px;
  top: 0;
  background-color: var(--pine);
  color: var(--linen);
  padding: 12px 20px;
  z-index: 90;
}

.wk-skip:focus
{
  left: 12px;
  top: 12px;
}

/* ---------------------------------------------------------------
   Masthead
   --------------------------------------------------------------- */

.masthead-slab
{
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: rgba(250, 247, 242, 0.96);
  border-bottom: 1px solid var(--linen-line);
  backdrop-filter: blur(6px);
}

.masthead-inner
{
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px 26px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.brand-lock
{
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--pine);
}

.brand-lock img
{
  width: 52px;
  height: 52px;
}

.brand-words
{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-words strong
{
  font-family: var(--serif);
  font-size: 1.16rem;
  letter-spacing: 0.03em;
}

.brand-words span
{
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--sage);
}

.nav-strip
{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nav-strip a
{
  display: inline-block;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--pine);
  text-decoration: none;
  border: 1px solid transparent;
}

.nav-strip a:hover,
.nav-strip a:focus-visible
{
  background-color: var(--linen-shade);
  border-color: var(--linen-line);
}

.nav-strip a[aria-current="page"]
{
  background-color: var(--pine);
  color: var(--linen);
}

.nav-strip a.nav-ember
{
  border-color: var(--pear);
  color: var(--huckleberry);
  font-weight: 700;
}

.nav-strip a.nav-ember:hover,
.nav-strip a.nav-ember:focus-visible
{
  background-color: var(--pear);
  color: var(--pine-deep);
}

/* ---------------------------------------------------------------
   Shared shell bits
   --------------------------------------------------------------- */

.shell
{
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 26px;
}

.slab
{
  padding: 74px 0;
}

.slab-tight
{
  padding: 54px 0;
}

.slab-linen
{
  background-color: var(--linen-shade);
  border-top: 1px solid var(--linen-line);
  border-bottom: 1px solid var(--linen-line);
}

.slab-pine
{
  background-color: var(--pine);
  color: var(--linen);
}

.slab-pine h2,
.slab-pine h3
{
  color: var(--linen);
}

.slab-pine a
{
  color: var(--pear-pale);
}

.eyebrow
{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--huckleberry);
  margin: 0 0 14px;
}

.slab-pine .eyebrow
{
  color: var(--pear-pale);
}

.lede
{
  font-size: 1.1rem;
  max-width: 62ch;
  color: #3a4640;
}

.slab-pine .lede
{
  color: #dfe6df;
}

.rule-flourish
{
  width: 84px;
  height: 4px;
  border: 0;
  margin: 26px 0;
  background-image: linear-gradient(90deg, var(--pear) 0%, var(--huckleberry) 100%);
  border-radius: 999px;
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */

.btn-ember,
.btn-quiet
{
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 13px 24px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
}

.btn-ember
{
  background-color: var(--huckleberry);
  color: var(--linen);
  border: 1px solid var(--huckleberry);
  box-shadow: 0 10px 24px rgba(109, 46, 70, 0.24);
}

.btn-ember:hover,
.btn-ember:focus-visible
{
  background-color: var(--pine);
  border-color: var(--pine);
  color: var(--linen);
  transform: translateY(-2px);
}

.btn-quiet
{
  background-color: transparent;
  color: var(--pine);
  border: 1px solid var(--pine);
}

.btn-quiet:hover,
.btn-quiet:focus-visible
{
  background-color: var(--pine);
  color: var(--linen);
  transform: translateY(-2px);
}

.slab-pine .btn-quiet
{
  color: var(--linen);
  border-color: rgba(250, 247, 242, 0.55);
}

.button-row
{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

/* ---------------------------------------------------------------
   Hero vellum (craft manifesto opening)
   --------------------------------------------------------------- */

.hero-vellum
{
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 88% 12%, rgba(217, 155, 38, 0.22) 0%, rgba(217, 155, 38, 0) 46%),
    radial-gradient(circle at 6% 88%, rgba(109, 46, 70, 0.16) 0%, rgba(109, 46, 70, 0) 48%),
    linear-gradient(180deg, var(--linen) 0%, var(--linen-shade) 100%);
  border-bottom: 1px solid var(--linen-line);
}

.hero-inner
{
  max-width: var(--shell);
  margin: 0 auto;
  padding: 66px 26px 78px;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 52px;
  align-items: center;
}

.hero-copy h1
{
  color: var(--pine);
}

.hero-copy h1 em
{
  font-style: italic;
  color: var(--huckleberry);
}

.hero-batch-stamp
{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pine);
  background-color: rgba(217, 155, 38, 0.2);
  border: 1px dashed var(--pear);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 18px;
}

.hero-figure
{
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  border: 1px solid rgba(27, 59, 43, 0.14);
  background-color: var(--pine);
}

.hero-figure img
{
  width: 100%;
  height: auto;
}

.hero-figure figcaption
{
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine);
  background-color: var(--pear-pale);
  padding: 9px 16px;
}

.hero-metrics
{
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 30px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.hero-metrics li
{
  margin: 0;
}

.hero-metrics strong
{
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--pine);
}

.hero-metrics span
{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}

/* ---------------------------------------------------------------
   Palate forge widget
   --------------------------------------------------------------- */

.palate-deck
{
  background-color: var(--pine);
  color: var(--linen);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-soft);
}

.palate-deck h2
{
  color: var(--linen);
}

.palate-grid
{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 34px;
  align-items: start;
  margin-top: 26px;
}

.palate-step
{
  border: 0;
  padding: 0 0 20px;
  margin: 0 0 20px;
  border-bottom: 1px dashed rgba(250, 247, 242, 0.28);
}

.palate-step:last-of-type
{
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.palate-step legend
{
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pear-pale);
  padding: 0 0 10px;
}

.pill-row
{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.pill-toggle
{
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--linen);
  background-color: rgba(250, 247, 242, 0.08);
  border: 1px solid rgba(250, 247, 242, 0.3);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.pill-toggle:hover,
.pill-toggle:focus-visible
{
  background-color: rgba(217, 155, 38, 0.28);
}

.pill-toggle[aria-pressed="true"]
{
  background-color: var(--pear);
  border-color: var(--pear);
  color: var(--pine-deep);
  font-weight: 700;
}

.curated-panel
{
  background-color: var(--linen);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 26px;
  border-top: 6px solid var(--pear);
}

.curated-panel h3
{
  color: var(--pine);
  margin-bottom: 10px;
}

.curated-panel p
{
  font-size: 0.96rem;
}

.curated-tags
{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.curated-tags li
{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: var(--linen-shade);
  border: 1px solid var(--linen-line);
  color: var(--pine);
}

.curated-code
{
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--sage);
  margin-top: 12px;
}

/* ---------------------------------------------------------------
   Craft manifesto / batch ledger steps
   --------------------------------------------------------------- */

.manifesto-wrap
{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
  align-items: start;
}

.manifesto-wrap figure
{
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.batch-ledger
{
  counter-reset: kettle;
  list-style: none;
  margin: 0;
  padding: 0;
}

.batch-ledger li
{
  counter-increment: kettle;
  position: relative;
  padding: 0 0 24px 62px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--rule);
}

.batch-ledger li:last-child
{
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.batch-ledger li::before
{
  content: counter(kettle, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--pear);
  background-color: rgba(217, 155, 38, 0.14);
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--huckleberry);
}

.batch-ledger h3
{
  margin-bottom: 6px;
  color: var(--pine);
}

.batch-ledger p
{
  margin-bottom: 0;
  font-size: 0.97rem;
  color: #3d4a43;
}

/* ---------------------------------------------------------------
   Horizontal scroll showcase rail
   --------------------------------------------------------------- */

.rail-head
{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.rail-hint
{
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0;
}

.scroll-rail
{
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 6px 26px 26px;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--pear) var(--linen-shade);
}

.scroll-card
{
  flex: 0 0 300px;
  scroll-snap-align: start;
  background-color: #ffffff;
  border: 1px solid var(--linen-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(20, 38, 28, 0.08);
}

.scroll-card img
{
  width: 100%;
  height: auto;
  background-color: var(--linen-shade);
}

.scroll-card-body
{
  padding: 18px 20px 22px;
}

.scroll-card-body h3
{
  margin-bottom: 6px;
  color: var(--pine);
  font-size: 1.1rem;
}

.scroll-card-body p
{
  font-size: 0.92rem;
  color: #3d4a43;
  margin-bottom: 12px;
}

.batch-code
{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--huckleberry);
  border-top: 1px dashed var(--linen-line);
  padding-top: 10px;
  display: block;
}

/* ---------------------------------------------------------------
   Vault collection ledger (filterable)
   --------------------------------------------------------------- */

.filter-rail
{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.filter-rail li
{
  margin: 0;
}

.filter-pill
{
  font-family: var(--sans);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--pine);
  background-color: transparent;
  color: var(--pine);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.filter-pill:hover,
.filter-pill:focus-visible
{
  background-color: rgba(27, 59, 43, 0.1);
}

.filter-pill[aria-pressed="true"]
{
  background-color: var(--pine);
  color: var(--linen);
}

.vault-ledger
{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.vault-card
{
  background-color: #ffffff;
  border: 1px solid var(--linen-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 22px rgba(20, 38, 28, 0.07);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.vault-card:hover
{
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.vault-card figure
{
  margin: 0;
  position: relative;
}

.vault-card figure img
{
  width: 100%;
  height: auto;
}

.vault-flag
{
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background-color: var(--pine);
  color: var(--linen);
  padding: 5px 10px;
  border-radius: 4px;
}

.vault-body
{
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.vault-body h3
{
  color: var(--pine);
  margin-bottom: 8px;
}

.vault-body p
{
  font-size: 0.94rem;
  color: #3d4a43;
}

.spec-ledger
{
  margin: 4px 0 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 0.85rem;
  border-top: 1px solid var(--linen-line);
  padding-top: 14px;
}

.spec-ledger dt
{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  padding-top: 2px;
}

.spec-ledger dd
{
  margin: 0;
  color: var(--pine);
}

.vault-link
{
  margin-top: auto;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--huckleberry);
  border-bottom: 2px solid var(--pear);
  align-self: start;
  padding-bottom: 2px;
}

.vault-link:hover,
.vault-link:focus-visible
{
  color: var(--pine);
}

.vault-empty
{
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--sage);
  padding: 24px 0;
}

/* ---------------------------------------------------------------
   Texture comparison slab
   --------------------------------------------------------------- */

.texture-slab
{
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  border: 1px solid var(--linen-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 0.93rem;
}

.texture-slab caption
{
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  padding-bottom: 12px;
}

.texture-slab th,
.texture-slab td
{
  text-align: left;
  padding: 15px 18px;
  border-bottom: 1px solid var(--linen-line);
  vertical-align: top;
}

.texture-slab thead th
{
  background-color: var(--pine);
  color: var(--linen);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
}

.texture-slab tbody th
{
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--pine);
  background-color: var(--linen-shade);
  white-space: nowrap;
}

.texture-slab tbody tr:last-child th,
.texture-slab tbody tr:last-child td
{
  border-bottom: 0;
}

.study-figure
{
  margin: 36px 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--linen-line);
  background-color: #ffffff;
}

.study-figure figcaption
{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine);
  background-color: var(--pear-pale);
  padding: 10px 18px;
}

.meter
{
  display: inline-block;
  width: 74px;
  height: 9px;
  border-radius: 999px;
  background-color: var(--linen-shade);
  border: 1px solid var(--linen-line);
  overflow: hidden;
  vertical-align: middle;
  margin-right: 8px;
}

.meter i
{
  display: block;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(90deg, var(--pear) 0%, var(--huckleberry) 100%);
}

.meter-low i
{
  width: 38%;
}

/* ---------------------------------------------------------------
   Heritage tabs
   --------------------------------------------------------------- */

.heritage-tabs
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.3);
  padding-bottom: 16px;
  margin-bottom: 28px;
}

.heritage-tab
{
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: 8px 8px 0 0;
  background-color: transparent;
  border: 1px solid rgba(250, 247, 242, 0.35);
  border-bottom: 0;
  color: var(--linen);
  cursor: pointer;
}

.heritage-tab[aria-expanded="true"]
{
  background-color: var(--pear);
  border-color: var(--pear);
  color: var(--pine-deep);
  font-weight: 700;
}

.heritage-panel
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.heritage-panel figure
{
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(250, 247, 242, 0.28);
}

.heritage-panel h3
{
  color: var(--pear-pale);
}

.heritage-list
{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.heritage-list li
{
  padding: 9px 0 9px 26px;
  position: relative;
  border-bottom: 1px dashed rgba(250, 247, 242, 0.22);
  font-size: 0.95rem;
}

.heritage-list li::before
{
  content: "";
  position: absolute;
  left: 4px;
  top: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--pear);
}

/* ---------------------------------------------------------------
   Rivery badge / keyword showcase
   --------------------------------------------------------------- */

.rivery
{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.rivery li
{
  margin: 0;
}

.rivery a
{
  display: inline-block;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--pine);
  background-color: #ffffff;
  border: 1px solid var(--linen-line);
  border-left: 5px solid var(--pear);
  transition: border-color 150ms ease, background-color 150ms ease;
}

.rivery a:hover,
.rivery a:focus-visible
{
  background-color: var(--linen-shade);
  border-left-color: var(--huckleberry);
}

/* ---------------------------------------------------------------
   FAQ
   --------------------------------------------------------------- */

.faq-stack
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.faq-item
{
  background-color: #ffffff;
  border: 1px solid var(--linen-line);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
}

.faq-item h3
{
  color: var(--pine);
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.faq-item p
{
  margin-bottom: 0;
  font-size: 0.94rem;
  color: #3d4a43;
}

/* ---------------------------------------------------------------
   Closing band
   --------------------------------------------------------------- */

.closing-band
{
  background-image: linear-gradient(120deg, var(--huckleberry) 0%, var(--pine) 100%);
  color: var(--linen);
  border-radius: var(--radius-lg);
  padding: 46px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 32px;
  align-items: center;
}

.closing-band h2
{
  color: var(--linen);
}

.closing-band p
{
  color: #f1e6ea;
  margin-bottom: 0;
}

.closing-address
{
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  line-height: 1.9;
  border-left: 2px solid var(--pear);
  padding-left: 18px;
  color: #f6ecdd;
  margin: 0;
}

/* ---------------------------------------------------------------
   Footer directory
   --------------------------------------------------------------- */

.footer-directory
{
  background-color: var(--pine-deep);
  color: #cfd8cf;
  padding: 62px 0 28px;
  margin-top: 0;
}

.footer-cols
{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 34px;
}

.footer-cols h3
{
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pear-pale);
  margin-bottom: 14px;
}

.footer-cols p
{
  font-size: 0.9rem;
  line-height: 1.7;
}

.footer-cols ul
{
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-cols li
{
  margin-bottom: 9px;
  font-size: 0.9rem;
}

.footer-cols a
{
  color: #e4eae2;
  text-decoration: none;
  border-bottom: 1px solid rgba(228, 234, 226, 0.28);
}

.footer-cols a:hover,
.footer-cols a:focus-visible
{
  color: var(--pear-pale);
  border-color: var(--pear-pale);
}

.footer-brand
{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.footer-brand img
{
  width: 46px;
  height: 46px;
}

.footer-brand strong
{
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--linen);
  display: block;
}

.footer-base
{
  max-width: var(--shell);
  margin: 40px auto 0;
  padding: 20px 26px 0;
  border-top: 1px solid rgba(207, 216, 207, 0.22);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Consent card
   --------------------------------------------------------------- */

.consent-card
{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 60;
  width: min(390px, calc(100vw - 40px));
  background-color: var(--pine);
  color: var(--linen);
  border-radius: var(--radius-sm);
  border-top: 5px solid var(--pear);
  box-shadow: var(--shadow-lift);
  padding: 20px 22px;
}

.consent-card p
{
  font-size: 0.86rem;
  margin-bottom: 14px;
  color: #e6ece4;
}

.consent-card strong
{
  font-family: var(--serif);
  font-size: 1rem;
  display: block;
  margin-bottom: 6px;
}

.consent-actions
{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.consent-card .btn-ember
{
  font-size: 0.84rem;
  padding: 9px 16px;
  background-color: var(--pear);
  border-color: var(--pear);
  color: var(--pine-deep);
  box-shadow: none;
}

.consent-card .btn-ember:hover,
.consent-card .btn-ember:focus-visible
{
  background-color: var(--linen);
  border-color: var(--linen);
  color: var(--pine);
}

.consent-card .btn-quiet
{
  font-size: 0.84rem;
  padding: 9px 16px;
  color: var(--linen);
  border-color: rgba(250, 247, 242, 0.5);
}

/* ---------------------------------------------------------------
   Subpage document layout
   --------------------------------------------------------------- */

.doc-head
{
  background-image: linear-gradient(180deg, var(--linen) 0%, var(--linen-shade) 100%);
  border-bottom: 1px solid var(--linen-line);
  padding: 58px 0 46px;
}

.doc-head h1
{
  color: var(--pine);
  margin-bottom: 10px;
}

.doc-stamp
{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--huckleberry);
  margin: 0;
}

.doc-body
{
  max-width: 78ch;
  padding: 56px 26px 70px;
  margin: 0 auto;
}

.doc-body h2
{
  color: var(--pine);
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid var(--linen-line);
}

.doc-body h2:first-of-type
{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.doc-body h3
{
  color: var(--huckleberry);
  margin-top: 26px;
}

.doc-body ul
{
  padding-left: 1.3em;
}

.doc-body figure
{
  margin: 32px 0;
}

.doc-body figure img
{
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.doc-body figure figcaption
{
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  padding-top: 10px;
}

.doc-callout
{
  background-color: var(--linen-shade);
  border-left: 5px solid var(--pear);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
  margin: 28px 0;
}

.doc-callout p:last-child
{
  margin-bottom: 0;
}

.contact-grid
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 30px 0;
}

.contact-tile
{
  background-color: #ffffff;
  border: 1px solid var(--linen-line);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
}

.contact-tile h3
{
  margin-top: 0;
  color: var(--pine);
  font-size: 1rem;
}

.contact-tile p
{
  margin-bottom: 4px;
  font-size: 0.94rem;
}

.contact-tile a
{
  font-weight: 700;
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */

@media (max-width: 1080px)
{
  .hero-inner
  {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 48px;
  }

  .palate-grid
  {
    grid-template-columns: 1fr;
  }

  .manifesto-wrap
  {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .vault-ledger
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .heritage-panel
  {
    grid-template-columns: 1fr;
  }

  .footer-cols
  {
    grid-template-columns: 1fr 1fr;
  }

  .closing-band
  {
    grid-template-columns: 1fr;
    padding: 34px;
  }

  .faq-stack
  {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px)
{
  body
  {
    font-size: 16px;
  }

  .masthead-inner
  {
    padding: 10px 18px;
    gap: 12px;
  }

  .nav-strip
  {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .nav-strip a
  {
    white-space: nowrap;
  }

  .shell
  {
    padding: 0 18px;
  }

  .slab
  {
    padding: 48px 0;
  }

  .palate-deck
  {
    padding: 24px;
  }

  .vault-ledger
  {
    grid-template-columns: 1fr;
  }

  .scroll-rail
  {
    padding: 6px 18px 22px;
  }

  .scroll-card
  {
    flex: 0 0 82vw;
  }

  .texture-slab
  {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 0.86rem;
  }

  .footer-cols
  {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .contact-grid
  {
    grid-template-columns: 1fr;
  }

  .doc-body
  {
    padding: 40px 18px 56px;
  }

  .consent-card
  {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
  }

  .closing-band
  {
    padding: 26px;
  }
}

@media (min-width: 1280px)
{
  body
  {
    font-size: 17.5px;
  }

  .hero-inner
  {
    padding-top: 78px;
    padding-bottom: 88px;
  }

  .vault-ledger
  {
    gap: 30px;
  }
}

@media (prefers-reduced-motion: reduce)
{
  html
  {
    scroll-behavior: auto;
  }

  *
  {
    transition: none !important;
    animation: none !important;
  }
}