@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(../fonts/bricolage-latin.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/nunitosans-latin.woff2) format('woff2'); }

:root {
  --amber: #e8833a;
  --amber-deep: #c9631f;
  --amber-mist: #fdeee0;
  --slate: #23272e;
  --slate-soft: #3a4049;
  --ink: #22242a;
  --paper: #fafafa;
  --pane: #ffffff;
  --line: #e7e7ea;
  --muted: #70737c;
  --gold: #e0a43c;
  --bend: 14px;
  --lift: 0 14px 30px rgba(35, 39, 46, .13);
}

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

body {
  font-family: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, h4, .sillword { font-family: 'Bricolage Grotesque', 'Segoe UI', Arial, sans-serif; line-height: 1.18; color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }

.bay { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

.knob {
  display: inline-block;
  background: var(--amber);
  color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 34px;
  border-radius: 999px;
  border: 2px solid var(--amber);
  transition: background .18s, border-color .18s, transform .18s;
}
.knob:hover { background: var(--amber-deep); border-color: var(--amber-deep); transform: translateY(-1px); }
.knob-snow { background: #fff; color: var(--amber-deep); border-color: #fff; }
.knob-snow:hover { background: var(--amber-mist); border-color: var(--amber-mist); }
.knob-line { background: transparent; border-color: rgba(255, 255, 255, .7); }
.knob-line:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

/* ---------- header ---------- */
.topbeam {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
}
.beam-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.crest img { height: 44px; width: auto; border-radius: 10px; }
.wayfind { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.wayfind a {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 9px 12px;
  border-bottom: 2px solid transparent;
}
.wayfind a:hover { color: var(--amber-deep); }
.wayfind a.here { color: var(--amber-deep); border-bottom-color: var(--amber); }
.foldknob { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.foldknob span { display: block; width: 24px; height: 3px; background: var(--ink); margin: 5px 0; border-radius: 2px; }

/* ---------- hero ---------- */
.showfloor {
  background: linear-gradient(100deg, rgba(22, 25, 30, .82) 15%, rgba(22, 25, 30, .5) 60%, rgba(22, 25, 30, .22)), url(../images/banner.jpg) center/cover no-repeat;
  color: #fff;
}
.show-core { padding: 108px 22px 118px; max-width: 1180px; margin: 0 auto; }
.show-core h1 { color: #fff; font-size: 54px; font-weight: 700; margin: 12px 0 16px; max-width: 740px; }
.overtag {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}
.showfloor .overtag { color: #f5aa6d; }
.show-sub { font-size: 19px; color: #e4e6ea; max-width: 560px; margin-bottom: 32px; }

/* ---------- category tiles ---------- */
.wingrow { padding: 56px 22px 8px; }
.wing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wingcard {
  position: relative;
  border-radius: var(--bend);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  transition: box-shadow .18s, transform .18s;
}
.wingcard:hover { box-shadow: var(--lift); transform: translateY(-3px); }
.wing-img { aspect-ratio: 4 / 3; background: #fff; }
.wing-img img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.wing-veil {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(22, 25, 30, .92));
  color: #fff;
  padding: 46px 18px 14px;
}
.wing-veil h3 { font-size: 19px; color: #fff; }
.wing-veil p { font-size: 13.5px; color: #f5aa6d; }

/* ---------- promo duo ---------- */
.duoband { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 26px; padding-bottom: 6px; }
.duo-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--bend);
  padding: 30px 26px;
  overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.duo-tile:hover { box-shadow: var(--lift); transform: translateY(-3px); }
.duo-tile img { width: 190px; height: 190px; object-fit: contain; flex-shrink: 0; }
.duo-warm { background: var(--amber-mist); }
.duo-warm h2 { color: var(--ink); }
.duo-dusk { background: var(--slate); color: #d6d9de; }
.duo-dusk h2 { color: #fff; }
.duo-dusk img { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .4)); }
.duo-copy h2 { font-size: 25px; margin: 8px 0 10px; }
.duo-copy p { font-size: 15px; }
.duo-go {
  display: inline-block;
  margin-top: 14px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--amber-deep);
  border-bottom: 2px solid var(--amber);
}
.duo-dusk .duo-go { color: #f5aa6d; }

/* ---------- catalog / cards ---------- */
.floorset { padding: 52px 22px; }
.bandhead { margin-bottom: 30px; }
.bandhead h2 { font-size: 32px; display: flex; align-items: center; gap: 14px; }
.bandhead h2::before { content: ''; width: 34px; height: 5px; border-radius: 3px; background: var(--amber); flex-shrink: 0; }
.bandhead p { color: var(--muted); margin-top: 6px; }
.lattice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.crate {
  background: var(--pane);
  border: 1px solid var(--line);
  border-radius: var(--bend);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.crate:hover { box-shadow: var(--lift); transform: translateY(-3px); border-color: #f0c9a8; }
.crate-link { display: flex; flex-direction: column; flex: 1; }
.crate-img { aspect-ratio: 1; background: #fff; padding: 16px; border-bottom: 1px solid var(--line); }
.crate-img img { width: 100%; height: 100%; object-fit: contain; }
.crate-core { padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.crate-tag {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
.crate-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.crate-gist { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-bottom: 4px; }
.crate-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.tagcost { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 19px; color: var(--ink); }
.starset .spark { color: #d9dade; font-size: 14px; }
.starset .spark.lit { color: var(--gold); }
.tally { color: var(--muted); font-size: 13px; margin-left: 4px; }
.crate .knob-buy { margin: 12px 16px 16px; text-align: center; padding: 11px 16px; font-size: 13px; }

/* ---------- numbers strip ---------- */
.tallyband { background: var(--slate); color: #fff; padding: 40px 0; }
.tally-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; }
.tally-cell { display: flex; flex-direction: column; gap: 2px; }
.tally-big { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 42px; color: var(--amber); line-height: 1.1; }
.tally-sub { color: #b9bec6; font-size: 14px; }

/* ---------- value / mission bands ---------- */
.oathband { padding: 58px 0 30px; }
.oath-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.oath-cell { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--amber); border-radius: var(--bend); padding: 26px 24px; }
.oath-cell h3 { font-size: 18px; margin-bottom: 8px; }
.oath-cell p { color: #4b4e56; font-size: 15px; }

/* ---------- advantages table ---------- */
.meritband { padding: 28px 0 56px; }
.merit-scroll { overflow-x: auto; }
.merit-scroll .merit-table { min-width: 640px; }
.merit-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; }
.merit-table th, .merit-table td { border: 1px solid var(--line); padding: 13px 16px; text-align: left; vertical-align: top; }
.merit-table th { background: var(--slate); color: #fff; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; letter-spacing: .02em; }
.merit-table td:first-child { font-weight: 700; color: var(--ink); width: 24%; }
.merit-table tbody tr:nth-child(even) { background: var(--amber-mist); }
.merit-table td { color: #45484f; }

.kilnband { padding: 48px 0 62px; text-align: center; }
.kilnband h2 { font-size: 28px; max-width: 780px; margin: 0 auto 14px; }
.kilnband p { color: var(--muted); max-width: 720px; margin: 0 auto; }

/* ---------- seo content ---------- */
.dovetail { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 58px 0; }
.dovetail h2 { font-size: 27px; margin-bottom: 16px; }
.dovetail h3 { font-size: 20px; margin: 26px 0 10px; }
.dovetail p { margin-bottom: 12px; color: #45484f; }
.dovetail ul { margin: 10px 0 14px 22px; color: #45484f; }
.dovetail li { margin-bottom: 6px; }
.dovetail table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.dovetail th, .dovetail td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.dovetail th { background: var(--amber-mist); font-family: 'Bricolage Grotesque', sans-serif; color: var(--ink); }

/* ---------- reviews ---------- */
.hearthwall { padding: 58px 0 30px; }
.hearth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hearthnote {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 0 var(--bend) var(--bend) 0;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
}
.hearth-glow { color: var(--gold); font-size: 16px; letter-spacing: 2px; margin-bottom: 10px; }
.hearth-glow .spark { color: #d9dade; }
.hearth-glow .spark.lit { color: var(--gold); }
.hearth-said { font-size: 15.5px; color: #45484f; flex: 1; }
.hearth-sig { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14px; }
.hearth-sig strong { font-family: 'Bricolage Grotesque', sans-serif; }
.hearth-sig span { color: var(--muted); margin-left: 8px; }
.hearth-sig a { display: block; margin-top: 4px; color: var(--amber-deep); font-size: 13.5px; }
.hearth-sig a:hover { text-decoration: underline; }

/* ---------- CTA band ---------- */
.emberband { background: linear-gradient(115deg, var(--amber-deep), var(--amber) 70%); color: #fff; padding: 58px 0; margin-top: 30px; }
.ember-core { text-align: center; }
.ember-core h2 { color: #fff; font-size: 30px; margin-bottom: 10px; }
.ember-core p { color: #ffe6d1; max-width: 620px; margin: 0 auto 24px; }
.ember-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- page hero (category / info) ---------- */
.foyer {
  background: linear-gradient(120deg, #16191e, var(--slate) 55%, var(--slate-soft));
  color: #fff;
  padding: 54px 0 50px;
  border-bottom: 4px solid var(--amber);
}
.foyer h1 { font-size: 38px; margin: 8px 0 10px; color: #fff; }
.foyer-sub { color: #c9cdd4; max-width: 640px; }

/* ---------- product page ---------- */
.trail { padding: 16px 22px 0; font-size: 14px; color: var(--muted); }
.trail a { color: var(--muted); }
.trail a:hover { color: var(--amber-deep); }
.workbench { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; padding: 30px 22px 44px; }
.bench-view {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--bend);
  padding: 30px;
  align-self: start;
  position: sticky;
  top: 96px;
}
.bench-view img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.bench-core h1 { font-size: 27px; margin: 8px 0 12px; }
.bench-meta { margin-bottom: 12px; }
.bench-cost { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 34px; margin-bottom: 18px; }
.bench-core .knob-buy { padding: 14px 46px; font-size: 15px; }
.bench-lede { margin-top: 22px; color: #45484f; font-size: 17px; }

.pullplank { margin-bottom: 8px; }
.pullplank p {
  background: var(--amber-mist);
  border-radius: var(--bend);
  padding: 24px 30px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
}

.graincut { padding: 26px 22px 20px; }
.grain-head { font-size: 24px; margin-bottom: 6px; }
.grain-stack { background: #fff; border: 1px solid var(--line); border-radius: var(--bend); margin-top: 14px; }
.grain-row { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 22px 26px; border-bottom: 1px solid var(--line); align-items: start; }
.grain-row:last-child { border-bottom: 0; }
.grain-num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 34px; color: var(--amber); opacity: .55; line-height: 1; padding-top: 3px; }
.grain-body h3 { font-size: 17px; margin-bottom: 6px; }
.grain-body p { color: #45484f; font-size: 15.5px; }

/* ---------- info pages ---------- */
.parlor { padding: 46px 0 64px; }
.parlor .bay { max-width: 820px; background: #fff; border: 1px solid var(--line); border-radius: var(--bend); padding: 38px 42px; }
.parlor h2 { font-size: 22px; margin: 24px 0 10px; }
.parlor h2:first-child { margin-top: 0; }
.parlor h3 { font-size: 17.5px; margin: 18px 0 8px; }
.parlor p { margin-bottom: 12px; color: #45484f; }
.parlor ul, .parlor ol { margin: 10px 0 14px 22px; color: #45484f; }
.parlor li { margin-bottom: 6px; }
.parlor table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.parlor th, .parlor td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.parlor th { background: var(--amber-mist); font-family: 'Bricolage Grotesque', sans-serif; }
.parlor a { color: var(--amber-deep); }

/* ---------- footer ---------- */
.groundsill { background: #fff; border-top: 5px solid var(--amber); position: relative; overflow: hidden; font-size: 14.5px; }
.sill-ghost {
  position: absolute;
  right: -20px;
  bottom: 34px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 190px;
  line-height: 1;
  color: rgba(35, 39, 46, .045);
  letter-spacing: .02em;
  pointer-events: none;
  user-select: none;
}
.sill-top { display: grid; grid-template-columns: 1.1fr 2fr; gap: 44px; padding: 50px 22px 34px; position: relative; }
.sillword { font-size: 26px; font-weight: 700; letter-spacing: .06em; }
.emberdot { color: var(--amber); }
.sill-tag { color: var(--amber-deep); font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 4px 0 12px; }
.sill-note { color: var(--muted); }
.sill-sets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sill-set h3 { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; color: var(--ink); }
.sill-set a { display: block; color: var(--muted); padding: 3px 0; }
.sill-set a:hover { color: var(--amber-deep); }
.sill-reach {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-top: 18px;
  padding-bottom: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
  position: relative;
}
.sill-pay { margin-left: auto; }
.sill-base { background: var(--slate); color: #9ba1ab; font-size: 13px; padding: 14px 0; position: relative; }
.sill-base p { max-width: 1180px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .lattice { grid-template-columns: repeat(2, 1fr); }
  .wing-grid { grid-template-columns: repeat(2, 1fr); }
  .oath-grid, .hearth-grid { grid-template-columns: 1fr; }
  .duoband { grid-template-columns: 1fr; }
  .tally-grid { grid-template-columns: repeat(2, 1fr); }
  .workbench { grid-template-columns: 1fr; }
  .bench-view { position: static; }
  .sill-top { grid-template-columns: 1fr; gap: 28px; }
  .show-core h1 { font-size: 40px; }
  .show-core { padding: 78px 22px 88px; }
  .foldknob { display: block; }
  .wayfind {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    padding: 10px 16px 16px;
    box-shadow: var(--lift);
  }
  .way-open .wayfind { display: flex; }
  .wayfind a { padding: 11px 10px; font-size: 15px; border-bottom: 0; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .lattice { grid-template-columns: 1fr; }
  .wing-grid { grid-template-columns: 1fr; }
  .tally-grid { grid-template-columns: repeat(2, 1fr); }
  .duo-tile { flex-direction: column; align-items: flex-start; }
  .duo-tile img { width: 150px; height: 150px; align-self: center; }
  .show-core h1 { font-size: 31px; }
  .show-sub { font-size: 17px; }
  .bandhead h2 { font-size: 25px; }
  .foyer h1 { font-size: 29px; }
  .grain-row { grid-template-columns: 52px 1fr; padding: 18px 18px; }
  .grain-num { font-size: 26px; }
  .pullplank p { font-size: 17px; padding: 20px 20px; }
  .parlor .bay { padding: 28px 20px; }
  .parlor table { display: block; overflow-x: auto; white-space: nowrap; }
  .parlor td { white-space: normal; min-width: 150px; }
  .bench-cost { font-size: 28px; }
  .sill-ghost { font-size: 110px; bottom: 44px; }
  .sill-pay { margin-left: 0; }
  .crest img { height: 38px; }
}