@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ---------------------------------------------------------------- tokens */
/* Extracted from the original coming-soon page (a single-file "Bundled
   Page" export with no custom properties of its own) — every value below
   is a real color that page used, just promoted to a token here so the
   rest of the site can share one palette instead of re-guessing hex codes
   per page. See backups/coming-soon-page-20260914/ for the source. */
:root {
  --cream-lightest: #fdfaf2;
  --cream-light: #fbf6ec;
  --cream: #f6efe3;
  --cream-deep: #f2e6cf;
  --parchment: #eddcbd;
  --parchment-deep: #ead9ba;

  --ink-light: #8a6631;
  --ink: #7d5c2c;
  --ink-deep: #6d5029;
  --ink-darker: #5c4320;
  --ink-darkest: #4a3720;

  --wine: #2a1215;
  --wine-soft: #5c2b2e;

  --font-script: 'Alex Brush', cursive;
  --font-serif: 'Lora', Georgia, serif;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px rgba(125, 92, 44, 0.18);
  --shadow-card: 0 1px 0 rgba(125, 92, 44, 0.14), 0 8px 20px rgba(125, 92, 44, 0.1);

  --content-width: 1100px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: radial-gradient(120% 80% at 50% 0%, var(--cream-light) 0%, #f4ecdd 55%, #eee2ce 100%);
  color: var(--ink-darkest);
  font-family: var(--font-serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink-darkest);
}

h1 { font-size: 40px; line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: 28px; }
h3 { font-size: 19px; }

p { margin: 0 0 16px; }

.lede {
  font-size: 18px;
  color: var(--ink-darker);
  max-width: 60ch;
  white-space: pre-line;
}

/* ----------------------------------------------------------------- btns */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn-primary { background: var(--ink); color: var(--cream-lightest); }
.btn-secondary { background: transparent; color: var(--ink-deep); }

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

/* Same gradient band + drifting icons as the Home masthead below, just
   compact and sticky — so once you scroll past the big masthead, the nav
   that stays pinned at the top keeps that same "alive" background instead
   of going flat. Icons here are the .hi set (small, header-scaled);
   .mi (masthead-scaled) is defined further down — both share the same
   dt-cross-* keyframes, just at different sizes/positions. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(180deg, #f3e7d0 0%, #ead9ba 100%);
  border-bottom: 1px solid rgba(125, 92, 44, 0.2);
  box-shadow: inset 0 0 34px -16px rgba(125, 92, 44, 0.22);
}

/* Home only: the masthead below already carries the logo/wordmark, so the
   compact header sits out of the way (position: fixed, removed from flow
   entirely so it leaves no gap) until the IntersectionObserver in
   base.html's inline script detects the masthead has scrolled out of
   view, then fades/slides it in. Progressive enhancement: no JS (or no
   IntersectionObserver support) means .header-visible never gets added,
   so the header simply never appears — see the limits called out where
   that script lives. */
body.has-masthead .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 280ms ease, transform 280ms ease;
}
body.has-masthead .site-header.header-visible {
  opacity: 1;
  transform: translateY(0);
}
.site-header .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.header-icons { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; color: #6d5029; }
.hi { position: absolute; left: 0; }
.hi-a { top: 6%; opacity: 0.22; animation: dt-cross-a 34s linear infinite; }
.hi-b { top: 58%; opacity: 0.2; animation: dt-cross-b 44s linear infinite; animation-delay: -12s; }
.hi-c { bottom: 4%; opacity: 0.2; animation: dt-cross-c 39s linear infinite; animation-delay: -26s; }
.hi-d { top: 26%; opacity: 0.17; animation: dt-cross-d 50s linear infinite; animation-delay: -34s; }
.hi-e { bottom: 28%; opacity: 0.17; animation: dt-cross-a 46s linear infinite; animation-delay: -19s; }
.hi-f { top: 42%; opacity: 0.15; animation: dt-cross-b 56s linear infinite; animation-delay: -44s; }

@media (prefers-reduced-motion: reduce) {
  .hi, .mi { animation: none; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
.brand img {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cream-lightest);
  padding: 5px;
  box-shadow: 0 0 0 1px rgba(125, 92, 44, 0.2), 0 4px 10px -4px rgba(74, 55, 32, 0.4);
}
.brand span {
  position: relative;
  z-index: 1;
  font-family: var(--font-script);
  font-size: 27px;
  color: var(--ink-darkest);
  line-height: 1;
}

/* -------------------------------------------------------------- masthead */
/* The coming-soon page's hero, brought back near-verbatim as the Home
   page's masthead: the same gradient band, the same six drifting tool/gear
   icons at their original sizes, the same large circular logo medallion.
   Unlike the original it isn't pinned to 100vh — it sizes to its own
   content so the rest of the page (nav already above it, carousel/panels
   below) isn't forced behind a full-viewport scroll-past. Home page only;
   inner pages keep the plain header above. */

.masthead-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f3e7d0 0%, #ead9ba 100%);
  border-top: 1px solid rgba(125, 92, 44, 0.2);
  border-bottom: 1px solid rgba(125, 92, 44, 0.2);
  box-shadow: inset 0 0 60px -20px rgba(125, 92, 44, 0.18);
  padding: clamp(40px, 8vw, 84px) 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.masthead-icons { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: #6d5029; }
.mi { position: absolute; left: 0; }
.mi-a { top: 7%; opacity: 0.22; animation: dt-cross-a 34s linear infinite; }
.mi-b { top: 44%; opacity: 0.2; animation: dt-cross-b 44s linear infinite; animation-delay: -12s; }
.mi-c { bottom: 6%; opacity: 0.2; animation: dt-cross-c 39s linear infinite; animation-delay: -26s; }
.mi-d { top: 22%; opacity: 0.17; animation: dt-cross-d 50s linear infinite; animation-delay: -34s; }
.mi-e { bottom: 26%; opacity: 0.17; animation: dt-cross-a 46s linear infinite; animation-delay: -19s; }
.mi-f { top: 60%; opacity: 0.15; animation: dt-cross-b 56s linear infinite; animation-delay: -44s; }

@keyframes dt-cross-a { from { transform: translateX(-30vw) rotate(-16deg); } to { transform: translateX(120vw) rotate(-16deg); } }
@keyframes dt-cross-b { from { transform: translateX(-30vw) rotate(9deg); } to { transform: translateX(120vw) rotate(9deg); } }
@keyframes dt-cross-c { from { transform: translateX(-30vw) rotate(-4deg); } to { transform: translateX(120vw) rotate(-4deg); } }
@keyframes dt-cross-d { from { transform: translateX(-30vw) rotate(22deg); } to { transform: translateX(120vw) rotate(22deg); } }

.masthead-badge {
  position: relative;
  z-index: 1;
  width: min(70vw, 420px, 46vh);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--cream-lightest);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(125, 92, 44, 0.2), 0 0 0 10px rgba(255, 253, 246, 0.4),
    0 0 0 11px rgba(125, 92, 44, 0.14), 0 26px 60px -32px rgba(74, 55, 32, 0.45);
}
.masthead-badge img { width: 96%; height: 96%; object-fit: contain; }

.masthead-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.8vh, 18px);
  padding: clamp(28px, 5vh, 48px) 24px clamp(8px, 2vh, 16px);
  text-align: center;
}
.masthead-foot .wordmark {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1;
  letter-spacing: normal;
  color: var(--ink);
  margin: 0;
}
.masthead-divider { display: flex; align-items: center; gap: 16px; width: min(90vw, 420px); }
.masthead-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(125, 92, 44, 0) 0%, rgba(125, 92, 44, 0.4) 100%); }
.masthead-divider span:last-child { background: linear-gradient(90deg, rgba(125, 92, 44, 0.4) 0%, rgba(125, 92, 44, 0) 100%); }
.masthead-divider i { width: 5px; height: 5px; border-radius: 50%; background: rgba(125, 92, 44, 0.5); flex-shrink: 0; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 36px;
  cursor: pointer;
  color: var(--ink-darkest);
  font-size: 18px;
}

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a {
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-deep);
  font-weight: 600;
}
.site-nav a:hover, .site-nav a.active { color: var(--wine); }

/* ---------------------------------------------------------------- hero */

.hero {
  padding: 64px 0 40px;
  text-align: center;
}
.hero .wrap { max-width: 780px; }
.hero .eyebrow { display: block; margin-bottom: 14px; }
.hero h1 { font-size: 44px; }
.hero .lede { margin: 0 auto 28px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------- sections */

.section { padding: 48px 0; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }

.panel {
  background: var(--cream-lightest);
  border: 1px solid rgba(125, 92, 44, 0.18);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-card);
}

.reveal summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.reveal summary::-webkit-details-marker { display: none; }
.reveal summary::after { content: ' \25BE'; }
.reveal[open] summary::after { content: ' \25B4'; }
.reveal .reveal-body { margin-top: 14px; color: var(--ink-darker); white-space: pre-line; }

/* -------------------------------------------------------------- carousel */

.carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.carousel::-webkit-scrollbar { height: 8px; }
.carousel::-webkit-scrollbar-thumb { background: var(--parchment-deep); border-radius: var(--radius-pill); }

.product-card {
  scroll-snap-align: start;
  flex: 0 0 240px;
  background: var(--cream-lightest);
  border: 1px solid rgba(125, 92, 44, 0.18);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
}
.product-card .thumb {
  aspect-ratio: 1;
  background: var(--cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-light);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .info { padding: 14px 16px; }
.product-card h3 { font-size: 15px; margin: 0 0 4px; }
.product-card .price { color: var(--ink); font-weight: 600; font-size: 14px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.empty-note {
  color: var(--ink);
  font-style: italic;
  background: var(--cream-deep);
  border: 1px dashed var(--parchment-deep);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}

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

.site-footer {
  margin-top: 40px;
  background: var(--wine);
  color: var(--cream-light);
  padding: 48px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
}
.site-footer h2 { color: var(--cream-lightest); font-size: 20px; }
.site-footer .lede { color: rgba(251, 246, 236, 0.75); }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a { text-decoration: none; color: rgba(251, 246, 236, 0.85); font-size: 14px; }
.footer-links a:hover { color: var(--cream-lightest); }

.contact-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.contact-form input, .contact-form textarea {
  font-family: var(--font-serif);
  font-size: 14px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(251, 246, 236, 0.3);
  background: rgba(251, 246, 236, 0.08);
  color: var(--cream-lightest);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(251, 246, 236, 0.5); }
.contact-form textarea { resize: vertical; min-height: 90px; }
.contact-form .btn-primary { background: var(--cream-lightest); color: var(--wine); border-color: var(--cream-lightest); align-self: flex-start; }
.contact-status { font-size: 13px; color: var(--cream-light); min-height: 18px; }
.contact-status.ok { color: #8fd4b8; }
.contact-status.err { color: #f2a89a; }

.copyright {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(251, 246, 236, 0.15);
  font-size: 12px;
  color: rgba(251, 246, 236, 0.6);
}

/* ------------------------------------------------------------- calculators */

.calc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.field-group { margin-bottom: 22px; }
.field-group label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-darkest);
  margin-bottom: 4px;
}
.field-help {
  font-size: 13px;
  color: var(--ink-deep);
  margin: 0 0 8px;
  max-width: 46ch;
}
.field-group input[type="number"],
.field-group input[type="text"] {
  font-family: var(--font-serif);
  font-size: 15px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--parchment-deep);
  background: var(--cream-lightest);
  color: var(--ink-darkest);
  width: 100%;
  max-width: 240px;
}
.field-group input:focus { outline: 2px solid var(--ink-light); outline-offset: 1px; }

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-darkest);
}
.toggle-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); }
.toggle-reveal { padding-left: 28px; border-left: 2px solid var(--parchment-deep); margin-bottom: 14px; }
.toggle-reveal[hidden] { display: none; }

.file-stats-example {
  background: var(--cream-deep);
  border: 1px solid var(--parchment-deep);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 24px;
}
.file-stats-header {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 10px;
}
.file-stats-body { display: flex; gap: 24px; margin-bottom: 10px; }
.file-stat {
  background: var(--cream-lightest);
  border: 1px solid var(--parchment-deep);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
}
.file-stat-label { display: block; font-size: 11px; color: var(--ink-deep); text-transform: uppercase; letter-spacing: 0.05em; }
.file-stat-value { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 18px; color: var(--wine); font-variant-numeric: tabular-nums; }
.file-stats-caption { font-size: 12px; color: var(--ink-deep); margin: 0; }

.materials-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.material-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.material-row input[type="text"], .material-row input[type="number"] {
  font-family: var(--font-serif);
  font-size: 14px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--parchment-deep);
  background: var(--cream-lightest);
  max-width: none;
}
.material-oneoff { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-deep); white-space: nowrap; }
.material-remove {
  background: none;
  border: 1px solid var(--parchment-deep);
  border-radius: var(--radius-sm);
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: var(--ink-deep);
  font-size: 16px;
  line-height: 1;
}
.material-remove:hover { color: var(--wine); border-color: var(--wine-soft); }

.breakdown {
  position: sticky;
  top: 90px;
  background: var(--cream-lightest);
  border: 1px solid rgba(125, 92, 44, 0.18);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  box-shadow: var(--shadow-card);
}
.breakdown-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wine);
  background: var(--cream-deep);
  border: 1px solid var(--parchment-deep);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  margin-bottom: 14px;
}
.breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-darker);
  padding: 7px 0;
  border-top: 1px solid rgba(125, 92, 44, 0.12);
}
.breakdown-row:first-of-type { border-top: none; }
.breakdown-row .val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.breakdown-row.sub { font-weight: 600; color: var(--ink-darkest); }
.breakdown-row.total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  font-size: 20px;
  font-weight: 700;
  color: var(--wine);
}
.breakdown-note { font-size: 12px; color: var(--ink-deep); margin: 16px 0 0; }

.calc-panel {
  background: var(--cream-lightest);
  border: 1px solid rgba(125, 92, 44, 0.18);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-card);
  max-width: 360px;
}
.calc-result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid var(--ink);
  margin-top: 18px;
  padding-top: 14px;
}
.calc-result-label { font-size: 13px; color: var(--ink-deep); font-weight: 600; }
.calc-result-value { font-size: 28px; font-weight: 700; color: var(--wine); font-variant-numeric: tabular-nums; }
.calc-note { font-size: 12px; color: var(--ink-deep); margin-top: 14px; }

/* -------------------------------------------------------------- portfolio */

.portfolio-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.portfolio-filter button {
  font-family: var(--font-serif);
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--parchment-deep);
  background: var(--cream-lightest);
  color: var(--ink-deep);
  cursor: pointer;
}
.portfolio-filter button.active { background: var(--ink); color: var(--cream-lightest); border-color: var(--ink); }

.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.portfolio-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream-lightest);
  border: 1px solid rgba(125, 92, 44, 0.18);
  box-shadow: var(--shadow-card);
}
.portfolio-card.filtered-out { display: none; }
.portfolio-card .thumb {
  aspect-ratio: 1;
  background: var(--cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-light);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.portfolio-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-card .cap { padding: 12px 14px; }
.portfolio-card h3 { font-size: 14px; margin: 0 0 2px; }
.portfolio-card .cat { font-size: 11px; color: var(--ink-deep); text-transform: uppercase; letter-spacing: 0.05em; }

/* -------------------------------------------------------------------- faq */

.faq-list {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(125, 92, 44, 0.18);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream-lightest);
  box-shadow: var(--shadow-card);
}
.faq-item { border-top: 1px solid rgba(125, 92, 44, 0.14); }
.faq-item:first-child { border-top: none; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  font-weight: 600;
  color: var(--ink-darkest);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon { font-size: 20px; color: var(--ink); flex-shrink: 0; line-height: 1; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item .faq-q { display: flex; align-items: center; }
.faq-body { padding: 0 22px 20px; color: var(--ink-darker); font-size: 14px; max-width: 65ch; }
.faq-draft-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wine);
  background: var(--cream-deep);
  border: 1px solid var(--parchment-deep);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  margin-left: 10px;
}

/* ------------------------------------------------------------------ admin */
/* Deliberately plainer than the public site's marketing CSS above — this
   is a back-office tool for one or two people, not a customer-facing page.
   Same color tokens (so it doesn't look alien), simple table/form chrome. */

.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }
.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--wine);
  color: var(--cream-light);
  padding: 24px 18px;
}
.admin-sidebar .brand-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--cream-lightest);
  font-family: var(--font-script);
  font-size: 20px;
  margin-bottom: 26px;
}
.admin-sidebar .brand-mini img { width: 26px; height: 26px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav a {
  text-decoration: none;
  color: rgba(251, 246, 236, 0.8);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
}
.admin-nav a:hover { background: rgba(251, 246, 236, 0.08); color: var(--cream-lightest); }
.admin-nav a.active { background: var(--cream-lightest); color: var(--wine); }
.admin-sidebar .view-site {
  display: block;
  margin-top: 24px;
  font-size: 12px;
  color: rgba(251, 246, 236, 0.6);
  text-decoration: none;
}
.admin-sidebar .signed-in { margin-top: 6px; font-size: 11px; color: rgba(251, 246, 236, 0.5); }

.admin-main { flex: 1; padding: 32px 36px; max-width: 920px; }
.admin-main h1 { font-size: 24px; margin-bottom: 6px; }
.admin-sub { color: var(--ink-deep); font-size: 13px; margin-bottom: 24px; }

.page-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--parchment-deep); margin-bottom: 24px; }
.page-tabs a { padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--ink-deep); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.page-tabs a:hover { background: var(--cream-deep); }
.page-tabs a.active { background: var(--wine); color: var(--cream-lightest); }
.admin-subheading { font-family: var(--font-serif); font-size: 19px; color: var(--ink-darkest); margin: 34px 0 4px; }

.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 28px; }
.admin-stat {
  background: var(--cream-lightest);
  border: 1px solid rgba(125, 92, 44, 0.18);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.admin-stat .num { font-size: 26px; font-weight: 700; color: var(--wine); font-variant-numeric: tabular-nums; }
.admin-stat .label { font-size: 12px; color: var(--ink-deep); }

.admin-actions-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }

.admin-table { width: 100%; border-collapse: collapse; background: var(--cream-lightest); border: 1px solid rgba(125, 92, 44, 0.18); border-radius: var(--radius-md); overflow: hidden; }
.admin-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-deep);
  padding: 10px 14px;
  background: var(--cream-deep);
  border-bottom: 1px solid rgba(125, 92, 44, 0.18);
}
.admin-table td { padding: 10px 14px; border-bottom: 1px solid rgba(125, 92, 44, 0.12); font-size: 13px; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; background: var(--cream-deep); display: block; }

.badge { display: inline-block; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); }
.badge-active { color: #2f6b4f; background: #e3f0e8; }
.badge-inactive { color: var(--ink-deep); background: var(--cream-deep); }

.admin-row-actions { display: flex; gap: 8px; }
.admin-row-actions form { display: inline; }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink-deep);
  text-decoration: underline;
  cursor: pointer;
  font-size: 12px;
}
.link-btn.danger { color: #b03a2e; }

.admin-form { max-width: 640px; }
.admin-form .field-group input[type="text"],
.admin-form .field-group input[type="number"] {
  width: 100%;
  max-width: none;
}
.admin-form textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  font-family: var(--font-serif);
  font-size: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--parchment-deep);
  background: var(--cream-lightest);
  color: var(--ink-darkest);
}
.admin-checkbox-grid { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.admin-checkbox-grid label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; }

.admin-existing-images { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.admin-existing-images label { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-deep); }
.admin-existing-images img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--parchment-deep); }

.admin-content-section { border: 1px solid var(--parchment-deep); border-radius: var(--radius-sm); padding: 4px 20px 8px; margin: 0 0 26px; }
.admin-content-section legend { padding: 0 8px; font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--ink-darkest); }
.admin-content-field { margin-bottom: 22px; }
.admin-content-field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-deep); margin-bottom: 6px; }
.admin-content-hint { font-size: 12px; color: var(--ink-deep); opacity: 0.75; margin: -2px 0 6px; }
.admin-content-field input[type="text"] {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--parchment-deep);
  background: var(--cream-lightest);
  color: var(--ink-darkest);
}

.admin-saved-note { color: #2f6b4f; font-size: 13px; margin-bottom: 18px; }

/* ------------------------------------------------------------- analytics */
/* Single metric (page views), so a single hue throughout — no categorical
   palette needed. Reuses --wine, the same accent already used for
   .admin-stat .num, so this reads as one consistent system rather than a
   bolted-on chart library. */

.admin-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-deep);
  margin: 28px 0 12px;
}
.admin-section-title:first-child { margin-top: 0; }

.admin-chart-card {
  background: var(--cream-lightest);
  border: 1px solid rgba(125, 92, 44, 0.18);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.admin-chart-card h3 {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-deep);
  margin: 0 0 14px;
}

.admin-vbar-chart { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.admin-vbar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
  min-width: 0;
  cursor: default;
}
.admin-vbar-track { width: 100%; height: 100%; display: flex; align-items: flex-end; }
.admin-vbar-fill {
  width: 100%;
  background: var(--wine);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.admin-vbar-label { font-size: 9px; color: var(--ink-deep); font-variant-numeric: tabular-nums; }

.admin-rank-list { display: flex; flex-direction: column; gap: 10px; }
.admin-rank-row { display: flex; align-items: center; gap: 10px; }
.admin-rank-label {
  width: 180px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--ink-darkest);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-rank-track {
  flex: 1;
  height: 14px;
  background: var(--cream-deep);
  border-radius: 4px;
  overflow: hidden;
}
.admin-rank-fill { height: 100%; background: var(--wine); border-radius: 4px; min-width: 3px; }
.admin-rank-value {
  width: 40px;
  text-align: right;
  font-size: 12px;
  color: var(--ink-deep);
  font-variant-numeric: tabular-nums;
}

/* Sessions-by-day/hour heatmap — one hue (--wine) at varying opacity, not
   a multi-color ramp: this is a single magnitude, not categories, so one
   hue read light-to-dark is the correct encoding (see dataviz skill). */
.heatmap-wrap { overflow-x: auto; }
.heatmap {
  display: grid;
  grid-template-columns: 40px repeat(24, minmax(22px, 1fr));
  gap: 2px;
  min-width: 620px;
}
.heatmap-corner { }
.heatmap-hour-label {
  text-align: center;
  font-size: 10px;
  color: var(--ink-deep);
  font-variant-numeric: tabular-nums;
  padding-bottom: 2px;
}
.heatmap-day-label {
  font-size: 11px;
  color: var(--ink-deep);
  font-weight: 600;
  display: flex;
  align-items: center;
}
.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--cream-deep);
  cursor: default;
}
.heatmap-cell.has-data { background: var(--wine); }

.heatmap-legend { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 11px; color: var(--ink-deep); }
.heatmap-legend-swatch { width: 14px; height: 14px; border-radius: 2px; background: var(--wine); flex-shrink: 0; }

#admin-tooltip {
  position: fixed;
  display: none;
  background: var(--cream-lightest);
  border: 1px solid rgba(125, 92, 44, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink-darkest);
  pointer-events: none;
  z-index: 40;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  h1 { font-size: 30px; }
  .hero { padding: 40px 0 28px; }
  .hero h1 { font-size: 32px; }

  .masthead-band { padding: 32px 16px; }
  .masthead-badge { width: min(72vw, 260px); }
  .masthead-foot { padding: 20px 16px 4px; }

  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream-lightest);
    border-bottom: 1px solid rgba(125, 92, 44, 0.18);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px 18px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 8px 0; width: 100%; }

  .panel { padding: 22px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .product-card { flex-basis: 200px; }

  .calc-layout { grid-template-columns: 1fr; }
  .breakdown { position: static; }
  .file-stats-body { flex-wrap: wrap; }
  .material-row { grid-template-columns: 1fr; }
  .field-group input[type="number"], .field-group input[type="text"] { max-width: 100%; }

  .faq-item summary { padding: 14px 16px; }
  .faq-body { padding: 0 16px 16px; }
  .faq-draft-badge { display: block; width: fit-content; margin: 6px 0 0; }

  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: auto; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; }
  .admin-main { padding: 22px 18px; }
  .admin-table { display: block; overflow-x: auto; }

  .admin-chart-card { padding: 14px 16px; }
  .admin-vbar-chart { height: 70px; }
  .admin-rank-label { width: 110px; font-size: 12px; }
}

/* ---------------------------------------------- page-blocks (public) */

.block-image-text { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.block-image-text .block-image { width: 260px; height: 260px; object-fit: cover; border-radius: var(--radius-md); flex: none; box-shadow: var(--shadow-card); }
.block-image-text .block-image-text-copy { flex: 1; min-width: 240px; }
.block-cta { text-align: center; }
.block-cta h2 { margin-bottom: 10px; }

/* ---------------------------------------------- page-blocks (admin editor) */

.block-list { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin-bottom: 22px; }
.block-card { background: var(--cream-lightest); border: 1px solid var(--parchment-deep); border-radius: var(--radius-md); padding: 16px 18px; }
.block-card.sortable-ghost { opacity: 0.4; }
.block-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.drag-handle { cursor: grab; color: var(--ink-light); font-size: 16px; user-select: none; }
.drag-handle:active { cursor: grabbing; }
.block-type-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--parchment); color: var(--ink-darker); }
.block-type-badge.block-type-image_text { background: #e3ecdd; color: #3d5c2e; }
.block-type-badge.block-type-cta { background: var(--wine-soft); color: var(--cream-lightest); }
.block-edit-form label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-deep); margin-bottom: 6px; }
.inline-form { display: inline; }
.add-block-row { display: flex; gap: 10px; flex-wrap: wrap; }