/*
 * MH Build Studio — brand tokens + admin shell + inquiries kanban.
 * Industrial graphite/slate base, organic timber/sage/linen accents.
 */

:root {
  /* ---- Industrial base ---- */
  --graphite:   #1b1e1f;   /* page background — matte near-black, faintly cool */
  --graphite-2: #23282a;   /* raised surface: cards, panels, tiles */
  --slate:      #363d40;   /* hairline dividers / borders on dark */
  --slate-2:    #59636a;   /* heavier UI lines, disabled states */

  /* ---- Organic accents ---- */
  --timber:     #b37b4d;   /* PRIMARY accent — CTAs, numerals, rules. Warm timber. */
  --timber-2:   #c8945f;   /* timber hover / lighter */
  --sage:       #8d9782;   /* SECONDARY accent — organic sage. Eyebrows, meta, icons. */
  --sage-2:     #a7b09b;   /* sage hover */

  /* ---- Linen (the one light band) ---- */
  --linen:       #e7e1d5;  /* light section background — raw linen */
  --linen-2:     #d7d0c1;  /* deeper linen: image placeholders on the band */
  --linen-muted: #675f54;  /* captions/labels on the linen band + footer */

  /* ---- Text on dark ---- */
  --bone:        #ece8e0;  /* primary text on graphite */
  --bone-muted:  #c5c1b8;  /* intro / lede paragraphs */
  --body-muted:  #9a9c94;  /* body copy, nav links, section eyebrows */

  /* Legacy token names repointed to the Build Studio palette so the shared
     .pub-* component rules resolve to the new (dark) semantics. */
  --paper: var(--graphite);
  --ink: var(--bone);
  --ink-2: var(--body-muted);
  --muted: var(--body-muted);
  --line: var(--slate);
  --line-2: var(--slate);
  --accent: var(--timber);
  --accent-2: var(--timber-2);
  --gold: var(--timber);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;  /* structural grotesque */
  --serif: var(--display);   /* legacy alias — retired serif display face */
  --sans: "Inter", system-ui, -apple-system, sans-serif;      /* clean secondary text */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--graphite);
  font-family: var(--sans);
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Logo — MH monogram + wordmark, Archivo throughout, no italic (retired device) */
.logo { display: flex; align-items: baseline; font-family: var(--display); font-weight: 700;
  letter-spacing: -.01em; text-transform: uppercase; }
.logo .m, .logo .h { font-style: normal; }
.logo .word {
  margin-left: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-style: normal;
  font-family: var(--display);
  font-weight: 600;
}

/* ====================================================================
   Toasts (flash messages)
   ==================================================================== */
.toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200;
  padding: 12px 20px; border-radius: 8px; font-size: 13px; font-weight: 500;
  box-shadow: 0 12px 32px rgba(26,23,20,.22); transition: opacity .4s, transform .4s; }
.toast--notice { background: #2a241f; color: var(--linen); }
.toast--alert { background: var(--accent); color: #fff; }
.toast.is-leaving { opacity: 0; transform: translateX(-50%) translateY(-12px); }

/* ====================================================================
   Public site
   ==================================================================== */
.pub { background: var(--graphite); color: var(--bone); max-width: 1440px; margin: 0 auto; }
.pub-eyebrow { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--body-muted); }
.pub-h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(32px, 3.8vw, 48px); letter-spacing: -.01em; margin: 10px 0 0; line-height: 1.05; color: var(--bone); }
.pub-h2 em { font-style: normal; color: var(--timber); font-weight: 600; }
.pub-link { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--timber); text-decoration: none;
  border-bottom: 1px solid var(--timber); padding-bottom: 3px; transition: color .18s ease, border-color .18s ease; }
.pub-link:hover { color: var(--timber-2); border-bottom-color: var(--timber-2); }
.pub-link.sm { letter-spacing: .14em; margin-top: auto; align-self: flex-start; }
/* Solid button — timber fill on graphite text (the Build Studio primary CTA) */
.pub-btn-dark { display: inline-block; padding: 15px 30px; background: var(--timber); color: var(--graphite);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; text-decoration: none;
  transition: transform .18s ease, background .18s ease; }
.pub-btn-dark:hover { transform: translateY(-1px); background: var(--timber-2); }
.pub-img { width: 100%; object-fit: cover; display: block; }
.r4x5 { aspect-ratio: 4/5; } .r5x4 { aspect-ratio: 5/4; }
/* Graceful fallback when a curated/by-name product has no image (never 500 the home page) */
.pub-img--ph { background: var(--slate); }
.pub-tile__ph { width: 100%; aspect-ratio: 4/3; }

/* ---- Sticky translucent nav ------------------------------------------ */
.pub-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 5vw; background: rgba(27,30,31,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(54,61,64,.6); }
.pub-nav__brand { display: inline-flex; align-items: center; text-decoration: none; }
/* Typographic stand-in wordmark — trivial to swap for real logo art later. */
.pub-nav__wordmark { display: flex; align-items: baseline; gap: 8px; font-family: var(--display);
  text-transform: uppercase; letter-spacing: .08em; color: var(--bone); white-space: nowrap; }
.pub-nav__wm-mh { font-weight: 700; font-size: 19px; }
.pub-nav__wm-rest { font-weight: 600; font-size: 14px; color: var(--body-muted); }
.pub-nav__links { display: flex; gap: 34px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; }
.pub-nav__links a { color: var(--body-muted); text-decoration: none; transition: color .18s ease; }
.pub-nav__links a:hover { color: var(--bone); }
.pub-nav__cta { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; padding: 11px 22px; border: 1px solid var(--timber); color: var(--timber); text-decoration: none;
  transition: transform .18s ease, background .18s ease, color .18s ease; }
.pub-nav__cta:hover { transform: translateY(-1px); background: var(--timber); color: var(--graphite); }
.pub-nav__cta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--timber); }
.pub-nav__cta:hover .dot { background: var(--graphite); }
.pub-nav__right { display: inline-flex; align-items: center; gap: 14px; }
/* Hamburger — hidden on desktop, shown ≤900 */
.pub-nav__burger { display: none; width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--slate);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.pub-nav__burger span { display: block; width: 20px; height: 2px; background: var(--bone);
  transition: transform .2s ease, opacity .2s ease; }
.pub-nav.is-open .pub-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pub-nav.is-open .pub-nav__burger span:nth-child(2) { opacity: 0; }
.pub-nav.is-open .pub-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Video hero (full-bleed blurred fill + crisp portrait clip) ------ */
/* The source clip is 9:16 with a baked-in "WHAT WE DO" title, so full-bleed
   cover zoom-cropped it and clashed with the headline. Instead a blurred,
   darkened copy fills the width edge-to-edge (the cinematic full-bleed feel)
   while the crisp clip plays at its true aspect on top, headline beside it —
   nothing overlaps the video's own type. */
.pub-vhero { position: relative; background: var(--graphite); overflow: hidden; padding: clamp(44px, 6vw, 92px) 5vw; }
.pub-vhero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block;
  filter: blur(34px) brightness(.5) saturate(1.05); transform: scale(1.18); pointer-events: none; }
.pub-vhero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(27,30,31,.86) 0%, rgba(27,30,31,.6) 42%, rgba(27,30,31,.32) 100%); }
.pub-vhero__grid { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 76px); align-items: center; }
.pub-vhero__copy { text-align: left; }
.pub-vhero__eyebrow { font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--timber); margin-bottom: 16px; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.pub-vhero__h { font-family: var(--serif); font-weight: 700; color: var(--bone); font-size: clamp(36px, 5vw, 68px); line-height: 1.0;
  letter-spacing: -.02em; margin: 0; text-shadow: 0 2px 26px rgba(0,0,0,.5); }
.pub-vhero__h em { font-style: normal; color: var(--timber); }
.pub-vhero__sub { max-width: 460px; margin: 22px 0 0; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7; font-weight: 300; color: var(--bone); text-shadow: 0 1px 16px rgba(0,0,0,.55); }
.pub-vhero__frame { position: relative; width: 100%; max-width: 348px; margin: 0 auto; aspect-ratio: 9 / 16; max-height: 640px;
  border-radius: 16px; overflow: hidden; background: #000; border: 1px solid rgba(214,183,124,.28); box-shadow: 0 40px 90px rgba(0,0,0,.55); }
.pub-vhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Intro band ------------------------------------------------------ */
.pub-intro { padding: clamp(56px, 7vw, 88px) 5vw; text-align: center; }
.pub-intro__p { max-width: 700px; margin: 0 auto; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.75; font-weight: 300; color: var(--bone-muted); }
.pub-intro__p strong { font-weight: 500; color: var(--bone); }
.pub-intro__cta { display: flex; gap: 22px; align-items: center; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

/* ---- What we offer (centered numeral columns) ------------------------ */
.pub-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(24px, 3vw, 40px); text-align: center; }
.pub-offer__card { display: flex; flex-direction: column; align-items: center; height: 100%; text-decoration: none; color: var(--bone); }
.pub-offer__icon { width: 34px; height: 34px; color: var(--timber); margin-bottom: 4px; transition: color .18s ease, transform .18s ease; }
.pub-offer__h { font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: .06em; margin: 16px 0 8px; color: var(--bone); }
.pub-offer__blurb { font-size: 12px; line-height: 1.65; font-weight: 300; color: var(--body-muted); margin: 0 0 18px; max-width: 260px; }
.pub-offer__cta { margin-top: auto; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--timber); font-weight: 500;
  white-space: nowrap; transition: color .18s ease; }
.pub-offer__card:hover .pub-offer__cta { color: var(--timber-2); }
.pub-offer__card:hover .pub-offer__icon { color: var(--timber-2); transform: translateY(-2px); }

/* ---- About teaser (no photo) ----------------------------------------- */
.pub-about-teaser { max-width: 820px; }
.pub-about-teaser__p { font-size: 14px; line-height: 1.8; font-weight: 300; color: var(--body-muted); margin: 18px 0 24px; }

/* ---- Responsive: video hero / intro / offer cols -------------------- */
@media (max-width: 820px) {
  .pub-vhero__grid { grid-template-columns: 1fr; gap: 32px; }
  .pub-vhero__copy { text-align: center; }
  .pub-vhero__sub { margin-left: auto; margin-right: auto; }
  .pub-vhero__frame { max-width: 320px; }
  .pub-offer { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 600px) {
  /* Stack MH / Build Studio at the 375px gate so the wordmark never crowds
     the burger — see the tablet block above for the ≤900px nav collapse. */
  .pub-nav__wordmark { flex-direction: column; align-items: flex-start; gap: 0; white-space: normal; line-height: 1.2; }
  .pub-nav__wm-mh { font-size: 16px; }
  .pub-nav__wm-rest { font-size: 9px; letter-spacing: .1em; }
  .pub-intro__cta { gap: 16px; }
  .pub-offer { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
}

.pub-section { padding: clamp(56px, 7vw, 80px) 5vw; }
/* Divider-flanked centered eyebrow (hairline · label · hairline) */
.pub-rule { display: flex; align-items: center; gap: 20px; margin-bottom: 44px; }
.pub-rule span { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--body-muted); white-space: nowrap; }
.pub-rule i { height: 1px; flex: 1; background: var(--slate); display: block; }
.pub-section__head { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; justify-content: space-between; margin-bottom: 40px; }

/* ---- Mosaic grid / tiles (collection) -------------------------------- */
.pub-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.pub-tile { margin: 0; }
.pub-tile__img { position: relative; background: var(--slate); overflow: hidden; }
.pub-tile__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.pub-tile__badge { position: absolute; right: 14px; top: 12px; padding: 4px 8px; background: rgba(27,30,31,.86); color: var(--bone); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.pub-tile figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; }
.pub-tile figcaption .t { font-size: 12px; letter-spacing: .06em; }
/* --linen-muted (#857e72) is the brand-spec caption color for the linen band +
   footer, but it clears only ~3.1–4.2:1 against graphite/linen/white — short of
   the 4.5:1 AA floor for text this small. Flagged upstream; small/meta text below
   uses --body-muted (dark surfaces) or --slate-2 (light surfaces) instead, both
   of which clear AA. See h6 report for the full pair-by-pair readout. */
.pub-tile figcaption .s { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--body-muted); }

/* ---- Linen collection band (one full-bleed light section; text → graphite) */
.pub-band { background: var(--linen); color: var(--graphite); }
.pub-band .pub-eyebrow { color: var(--slate-2); }
.pub-band .pub-h2 { color: var(--graphite); }
.pub-band .pub-h2 em { color: var(--timber); font-style: normal; font-weight: 600; }
.pub-band .pub-link { color: var(--graphite); border-bottom-color: var(--graphite); }
.pub-band .pub-link:hover { color: var(--slate-2); border-bottom-color: var(--slate-2); }
.pub-band a.pub-tile { color: var(--graphite); }
.pub-band .pub-tile__img { background: var(--linen-2); }
.pub-band .pub-tile figcaption .s { color: var(--slate-2); }
.pub-band a.pub-tile:hover figcaption .s { color: var(--graphite); }
.pub-band .pub-tile__badge { background: rgba(27,30,31,.82); color: var(--linen); }

/* Homepage about — two-column with founders photo.
   Source is a tall portrait of both founders; use a portrait crop biased to the
   top so neither of them loses a head, and never a landscape band. */
.pub-about__photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 20%; display: block; }

/* ---- Public Collection (catalog) page ------------------------------- */
.pub-catalog { padding: 36px 5vw 88px; }
/* A clean, even card grid (the home teaser uses bespoke spans; this is uniform). */
.pub-grid--catalog { grid-template-columns: repeat(3, 1fr); }
.pub-grid--catalog .pub-tile { grid-column: auto; }
/* Catalog photos are straight-off-the-phone 3:4 portraits — give them a matching
   portrait stage and letterbox (never crop) anything that isn't 3:4. */
.pub-grid--catalog .pub-tile__img img { aspect-ratio: 3/4; object-fit: contain; }
a.pub-tile { text-decoration: none; color: var(--bone); display: block; }
a.pub-tile:hover .pub-tile__img img { transform: scale(1.04); }
.pub-tile__img img { transition: transform .5s ease; }
/* var(--bone), not --timber: this sits on the --slate placeholder tile, where
   timber clears only ~3:1 — short of the 4.5:1 floor for 13px text. */
.pub-tile__noimg { position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--bone); font-family: var(--serif); font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: .04em; aspect-ratio: 4/3; }
.pub-band .pub-tile__noimg { color: var(--graphite); }
a.pub-tile:hover figcaption .s { color: var(--timber); }

/* Category filter chips */
.pub-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.pub-chip { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  padding: 9px 16px; border: 1px solid var(--slate); color: var(--body-muted);
  text-decoration: none; transition: all .2s ease; }
.pub-chip:hover { border-color: var(--timber); color: var(--bone); }
.pub-chip.is-active { background: var(--timber); border-color: var(--timber); color: var(--graphite); }

/* Empty state — a brand-new shop has no published pieces yet */
.pub-empty { text-align: center; padding: 64px 24px 88px; }
.pub-empty__mark { font-family: var(--serif); font-size: 40px; color: var(--timber); margin-bottom: 20px; }
.pub-empty__mark .dot { color: var(--body-muted); }
.pub-empty__h { font-family: var(--serif); font-weight: 700; font-size: 26px; letter-spacing: -.01em; margin: 0 0 12px; color: var(--bone); }
.pub-empty__p { font-size: 15px; line-height: 1.6; font-weight: 300; color: var(--body-muted); max-width: 440px; margin: 0 auto; }
.pub-empty__p a { color: var(--timber); }

/* ---- Blog index: post-card grid + pager ------------------------------- */
.pub-grid--blog { grid-template-columns: repeat(3, 1fr); }
.pub-grid--blog .pub-tile { grid-column: auto; }
.pub-grid--blog .pub-tile__img img { aspect-ratio: 3/2; }
.pub-grid--blog .pub-tile__noimg { font-family: var(--serif); font-size: 30px; letter-spacing: .1em; color: var(--bone); }
.pub-tile__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 14px; }
.pub-tile__date { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--body-muted); }
.pub-tile__title { font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.22; letter-spacing: -.005em; color: var(--bone); }
.pub-tile__excerpt { font-size: 14px; line-height: 1.55; font-weight: 300; color: var(--body-muted); }
.pub-tile__more { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--body-muted); margin-top: 2px; }
a.pub-tile:hover .pub-tile__more { color: var(--timber); }

.pub-pager { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 48px; }
.pub-pager__link { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  color: var(--bone); text-decoration: none; padding: 10px 18px; border: 1px solid var(--slate); transition: all .15s; }
a.pub-pager__link:hover { border-color: var(--timber); background: var(--timber); color: var(--graphite); }
.pub-pager__link.is-disabled { opacity: .35; pointer-events: none; }
.pub-pager__count { font-size: 12px; letter-spacing: .08em; color: var(--body-muted); }

/* ---- Blog post (reading layout on the mobile shell) ------------------- */
.ppost { max-width: 720px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
.ppost__head { padding: 16px 20px; }
.ppost__back { text-decoration: none; }
.ppost__article { padding: 8px 28px 8px; }
.ppost__masthead { margin-bottom: 28px; }
.ppost__masthead .pub-eyebrow { color: var(--accent-2); }
.ppost__title { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); margin: 12px 0 0; }
.ppost__date { display: block; font-size: 13px; letter-spacing: .04em; color: var(--muted); margin: 14px 0 0; }
.ppost__cover { margin: 0 0 8px; }
.ppost__cover img { width: 100%; height: auto; display: block; border-radius: 2px; }
.ppost__cta-wrap { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.ppost__foot { margin-top: auto; padding: 28px 24px; font-size: 11px; color: var(--muted); text-align: center; letter-spacing: .04em; }

/* ---- .pub-prose: tag-scoped article body (feed body_html is class-free) -
   The blog feed hands us semantic, presentation-free HTML, so the look lives
   entirely here, keyed off element type — never a class from the feed. */
.pub-prose { color: var(--ink-2); font-size: 17px; line-height: 1.7; }
.pub-prose > * { max-width: 65ch; }
.pub-prose h2, .pub-prose h3, .pub-prose h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; }
.pub-prose h2 { font-size: 26px; margin: 40px 0 14px; }
.pub-prose h3 { font-size: 21px; margin: 32px 0 12px; }
.pub-prose h4 { font-size: 17px; margin: 28px 0 10px; }
.pub-prose p { margin: 0 0 20px; }
.pub-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.pub-prose a:hover { color: var(--ink); }
.pub-prose strong { font-weight: 600; color: var(--ink); }
.pub-prose em { font-style: normal; color: var(--timber); }
.pub-prose ul, .pub-prose ol { margin: 0 0 20px; padding-left: 22px; }
.pub-prose li { margin: 0 0 8px; }
.pub-prose blockquote { margin: 28px 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--accent);
  font-family: var(--serif); font-style: normal; font-weight: 500; font-size: 21px; line-height: 1.45; color: var(--ink); }
.pub-prose blockquote p { margin: 0; }
.pub-prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
/* figure/img can exceed the 65ch measure for breathing room, but never overflow. */
.pub-prose figure { margin: 32px 0; max-width: 100%; }
.pub-prose img { max-width: 100%; height: auto; display: block; border-radius: 2px; }
.pub-prose figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.5; max-width: 65ch; }

/* ---- How it works (centered numeral columns on graphite) -------------- */
.pub-process__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(24px, 3vw, 36px); margin-top: 0; }
.pub-process__grid > div { text-align: center; }
.pub-process__num { font-family: var(--serif); font-weight: 700; font-size: 30px; letter-spacing: -.01em; color: var(--timber); line-height: 1; }
.pub-process__t { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .06em; margin: 10px 0 8px; line-height: 1.2; color: var(--bone); }
.pub-process__d { font-size: 12px; font-weight: 300; color: var(--body-muted); line-height: 1.65; }

.pub-makers { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* ---- Inquire band (top hairline on graphite) -------------------------- */
.pub-inquire { border-top: 1px solid var(--slate); padding: clamp(60px, 8vw, 88px) 5vw; }
.pub-footer { border-top: 1px solid var(--slate); color: var(--body-muted); padding: clamp(48px, 6vw, 56px) 5vw; }
.pub-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; align-items: start; }
.pub-footer p { font-size: 13px; color: var(--body-muted); margin-top: 18px; max-width: 320px; line-height: 1.6; font-weight: 300; }
.pub-footer__h { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--timber); margin-bottom: 14px; }
.pub-footer__i { display: block; font-size: 12px; letter-spacing: .04em; margin-bottom: 8px; color: var(--body-muted); text-decoration: none; transition: color .18s; }
a.pub-footer__i:hover { color: var(--bone); }
.pub-footer__legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--slate); font-size: 11px; letter-spacing: .1em; color: var(--body-muted); }
.pub-footer__signin { color: var(--timber); }
.pub-footer__social { display: flex; gap: 10px; margin-top: 20px; }
.pub-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid var(--slate); color: var(--body-muted); transition: color .18s, border-color .18s, transform .18s; }
.pub-footer__social a:hover { color: var(--timber); border-color: var(--timber); transform: translateY(-1px); }

/* ---- Static doc pages (about / contact / faq / policies) --------------- */
.pub-doc__head { padding: 72px 5vw 36px; border-bottom: 1px solid var(--slate); }
.pub-doc__title { font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 5vw, 52px); line-height: 1.05; letter-spacing: -.02em; margin: 14px 0 0; color: var(--bone); }
.pub-doc__title em { font-style: normal; color: var(--timber); font-weight: 700; }
.pub-doc__lede { font-size: 18px; line-height: 1.6; font-weight: 300; color: var(--body-muted); max-width: 640px; margin: 22px 0 0; }
.pub-doc { padding: 48px 5vw 88px; }
.pub-doc__body { max-width: 720px; }
.pub-doc__body p, .pub-doc__list li, .pub-steps li { font-size: 16px; line-height: 1.7; font-weight: 300; color: var(--body-muted); }
.pub-doc__body p { margin: 0 0 18px; }
.pub-doc__body h2 { font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: -.01em; margin: 38px 0 14px; color: var(--bone); }
.pub-doc__list, .pub-steps { margin: 0 0 18px; padding-left: 0; list-style: none; }
.pub-doc__list li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.pub-doc__list li::before { content: "+"; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.pub-steps { counter-reset: step; }
.pub-steps li { position: relative; padding-left: 40px; margin-bottom: 14px; counter-increment: step; }
.pub-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 26px; height: 26px;
  border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--accent); font-weight: 600; }
.pub-legal h2 { font-size: 22px; margin-top: 30px; }
.pub-legal p { font-size: 15px; color: var(--muted); }
.pub-doc__sublist { list-style: none; margin: 8px 0 0; padding-left: 22px; }
.pub-doc__sublist li { margin-bottom: 0; }
.pub-doc__cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 36px; }

/* Single inline figure inside a doc body (about portrait, wall-panel feature) */
.pub-figure { margin: 10px 0 26px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.pub-figure img { display: block; width: 100%; height: auto; }
.pub-figure--portrait { max-width: 460px; }
.pub-figure figcaption { font-size: 12px; color: var(--graphite); padding: 8px 12px; background: var(--linen); }

/* Custom-orders gallery */
.custom-gallery { padding-top: 8px; }
.custom-gallery__head { max-width: 720px; margin: 0 0 24px; }
.custom-gallery__h { font-family: var(--serif); font-weight: 700; font-size: 26px; letter-spacing: -.01em; margin: 8px 0 0; color: var(--bone); }
.custom-gallery__h em { font-style: normal; color: var(--timber); font-weight: 700; }
.custom-gallery__grid { columns: 2; column-gap: 16px; max-width: 920px; }
.custom-gallery__item { break-inside: avoid; margin: 0 0 16px; border: 1px solid var(--slate); overflow: hidden; }
.custom-gallery__item img { display: block; width: 100%; height: auto; }

/* Contact cards */
.pub-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 720px; }
.pub-contact__card { display: block; padding: 26px 28px; border: 1px solid var(--slate); background: var(--graphite-2); text-decoration: none; color: inherit; transition: border-color .18s, transform .18s; }
a.pub-contact__card:hover { border-color: var(--timber); transform: translateY(-2px); }
.pub-contact__k { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--body-muted); }
.pub-contact__v { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -.005em; margin: 8px 0 6px; word-break: break-word; color: var(--bone); }
.pub-contact__s { font-size: 13px; font-weight: 300; color: var(--body-muted); line-height: 1.5; }

/* FAQ accordion — spans the full content width so it aligns with the other
   full-width sections (offer / process), rather than sitting in a narrow column. */
.pub-faq { border-top: 1px solid var(--slate); }
.pub-faq__item { border-bottom: 1px solid var(--slate); }
.pub-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0; font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--bone); }
.pub-faq__item summary::-webkit-details-marker { display: none; }
.pub-faq__mark { position: relative; width: 14px; height: 14px; flex: none; }
.pub-faq__mark::before, .pub-faq__mark::after { content: ""; position: absolute; background: var(--accent); transition: transform .2s; }
.pub-faq__mark::before { top: 6px; left: 0; width: 14px; height: 2px; }
.pub-faq__mark::after { top: 0; left: 6px; width: 2px; height: 14px; }
.pub-faq__item[open] .pub-faq__mark::after { transform: scaleY(0); }
.pub-faq__item p { margin: 0; padding: 0 0 24px; font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 720px; }

/* Inquiry form — a linen card on the graphite inquire band */
.inq { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 1000px; margin: 0 auto; color: var(--bone); }
.inq__intro .pub-eyebrow { color: var(--timber); }
.inq__intro .pub-h2 { color: var(--bone); }
.inq__intro p { font-size: 15px; line-height: 1.7; font-weight: 300; color: var(--body-muted); margin: 18px 0; }
.inq__form { background: var(--linen); color: var(--graphite); border-radius: 2px; padding: 28px; }
/* Honeypot: off-screen (not display:none — some bots skip hidden fields) so a
   real, sighted user never sees it but a form-filling bot trips it. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.inq__label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--slate-2); display: block; margin-bottom: 8px; }
.inq__kinds { display: flex; gap: 6px; margin-bottom: 14px; }
.inq__kind { flex: 1; }
.inq__kind input { position: absolute; opacity: 0; }
.inq__kind span { display: block; text-align: center; padding: 9px 4px; font-size: 12px; border: 1px solid rgba(27,30,31,.22); cursor: pointer; color: var(--graphite); transition: all .15s ease; }
.inq__kind input:checked + span { background: var(--graphite); color: var(--linen); border-color: var(--graphite); font-weight: 500; }
.inq__input { width: 100%; padding: 11px 12px; border: 1px solid rgba(27,30,31,.22); background: #fff; font-size: 13px; font-family: inherit; color: var(--graphite); margin-bottom: 10px; box-sizing: border-box; }
.inq__input::placeholder { color: var(--slate-2); }
.inq__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inq__submit { width: 100%; padding: 15px; border: none; background: var(--timber); color: var(--graphite); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: 4px; transition: background .18s ease; }
.inq__submit:hover { background: var(--timber-2); }
.inq__note { font-size: 11px; color: var(--slate-2); text-align: center; margin: 12px 0 0; }
/* Dropzone lives inside the linen form card — re-key its text off the light surface */
.inq__form .dropzone { background: #fff; border-color: rgba(27,30,31,.22); }
.inq__form .dropzone__title { color: var(--graphite); }
.inq__form .dropzone__hint, .inq__form .dropzone__icon { color: var(--slate-2); }

/* Ask widget — floating graphite pill */
.ask-widget { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 12px; border-radius: 999px; background: var(--graphite); border: 1px solid var(--timber); color: var(--bone); text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.ask-widget__avatars { display: flex; }
.ask-widget__avatars .a { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--graphite);
  background: linear-gradient(135deg, var(--timber-2), var(--timber)); }
.ask-widget__avatars .a2 { margin-left: -10px; background: linear-gradient(135deg, var(--sage-2), var(--sage)); }
.ask-widget__text .t { display: block; font-size: 13px; font-weight: 500; }
.ask-widget__text .s { display: block; font-size: 11px; color: var(--body-muted); }

/* ---- Branded upload zone (used by the public inquiry-form dropzone) --- */
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 26px 20px; border: 1.5px dashed var(--line);
  border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.dropzone:hover { border-color: var(--accent-2); background: var(--paper); }
.dropzone.is-over { border-color: var(--accent); background: #fbf1ea; }
.dropzone.is-filled { border-style: solid; border-color: #cfe0c8; background: #f3f7f0; }
.dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone__icon { color: var(--muted); line-height: 0; }
.dropzone.is-over .dropzone__icon { color: var(--accent); }
.dropzone__prompt { display: flex; flex-direction: column; gap: 3px; }
.dropzone__title { font-size: 14px; font-weight: 600; color: var(--ink); }
.dropzone__hint { font-size: 11.5px; color: var(--muted); }
.dropzone__status { font-size: 13px; font-weight: 600; color: #5a8060; padding: 2px 0; }
.dropzone__mob { display: none; }
@media (max-width: 768px) {
  .dropzone { padding: 22px 16px; }
  .dropzone__desk { display: none; }
  .dropzone__mob { display: inline; }
}

/* .mobile-body: <body> class on the shared mobile reading layout (blog post +
   product detail pages — see layouts/mobile.html.erb). */
.mobile-body { background: var(--graphite); }

/* ---- Public product detail page (mobile layout) ---- */
/* Framed by the shared site nav + footer (same as every other public page),
   so the card itself is just the content column — no full-viewport min-height. */
.pdetail { max-width: 560px; margin: 0 auto; padding: 8px 0 32px; display: flex; flex-direction: column; background: var(--paper); }
.pdetail__noimg { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: var(--slate);
  color: var(--body-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.pdetail__body { padding: 22px 24px 8px; }
.pdetail__cat { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); font-weight: 700; margin-bottom: 8px; }
.pdetail__name { font-family: var(--serif); font-size: 30px; line-height: 1.1; color: var(--ink); margin: 0 0 14px; }
.pdetail__blurb { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.pdetail__cta { display: inline-block; margin-top: 18px; font-weight: 600; color: var(--accent); text-decoration: none; font-size: 14px; }

/* Carousel — CSS scroll-snap with JS-enhanced arrows + dots. */
.pcarousel { position: relative; }
.pcarousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; }
.pcarousel__track::-webkit-scrollbar { display: none; }
/* Slides share the catalog's 3:4 portrait stage — the photos are phone shots,
   and cover-cropping them cost half of every arch. Letterbox, never crop. */
.pcarousel__slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 3/4; background: var(--slate); }
.pcarousel__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pcarousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: none; cursor: pointer;
  border-radius: 999px; background: rgba(26, 23, 20, .55); color: #fff; font-size: 22px; line-height: 1; display: flex;
  align-items: center; justify-content: center; }
.pcarousel__arrow--prev { left: 10px; }
.pcarousel__arrow--next { right: 10px; }
.pcarousel__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 7px; }
.pcarousel__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .55); box-shadow: 0 0 3px rgba(0, 0, 0, .35); transition: background .2s; }
.pcarousel__dot.is-active { background: #fff; }

/* Desktop: break the mobile stack into two columns so the page reads as a
   built-for-desktop layout, not a phone column in a sea of whitespace — the
   photos sit left, the piece's details right, head + footer span the full width.
   Mirrors the client-portal min-width:760px pattern above. Phone layout untouched. */
@media (min-width: 760px) {
  .pdetail { max-width: 1080px; padding: 40px 32px 56px;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto; column-gap: 48px; align-items: start; }
  .pcarousel, .pdetail__noimg { grid-column: 1; grid-row: 1; border-radius: 14px; overflow: hidden; }
  .pdetail__body { grid-column: 2; grid-row: 1; padding: 4px 0 0; }
  .pdetail__name { font-size: 40px; margin-bottom: 18px; }
  .pdetail__blurb { font-size: 16px; }
}

/* ======================================================================
 * Public marketing page — responsive layer.
 * Desktop styles above are the source of truth; these only collapse the
 * grids and dial back type/padding for tablet (≤900) and phone (≤600).
 * ====================================================================== */

/* ---- Tablet ----------------------------------------------------------- */
@media (max-width: 900px) {
  .pub-nav { padding: 18px 28px; position: relative; }
  .pub-nav__burger { display: inline-flex; }
  /* Links collapse into a slide-down panel toggled by the hamburger. */
  .pub-nav__links { display: none; }
  .pub-nav.is-open .pub-nav__links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 28px rgba(26,23,20,.08); padding: 6px 0;
  }
  .pub-nav.is-open .pub-nav__links a {
    padding: 16px 28px; border-bottom: 1px solid var(--line-2); font-size: 14px; }
  .pub-nav.is-open .pub-nav__links a:last-child { border-bottom: none; }

  .pub-hero { grid-template-columns: 1fr; gap: 36px; padding: 40px 28px 44px; align-items: start; }

  .pub-section { padding: 56px 28px; }
  .pub-inquire, .pub-footer { padding: 56px 28px; }

  .pub-process__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .pub-makers { grid-template-columns: 1fr; gap: 32px; }
  .pub-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* 12-col tile grid → 2-up; reset the named spans. */
  .pub-grid { grid-template-columns: 1fr 1fr; }
  .pub-grid .pub-tile { grid-column: auto; }
  .pub-grid--catalog { grid-template-columns: 1fr 1fr; }
  .pub-grid--blog { grid-template-columns: 1fr 1fr; }
  .pub-catalog { padding: 36px 28px 64px; }

  .inq { grid-template-columns: 1fr; gap: 36px; }

  /* Doc pages */
  .pub-doc__head { padding: 48px 28px 28px; }
  .pub-doc__title { font-size: 44px; }
  .pub-doc { padding: 36px 28px 64px; }
}

/* ---- Phone ------------------------------------------------------------ */
@media (max-width: 600px) {
  .pub-nav { padding: 16px 18px; }
  .pub-nav__cta { font-size: 10px; padding: 9px 12px; }
  .pub-nav.is-open .pub-nav__links a { padding-left: 18px; padding-right: 18px; }

  .pub-hero { padding: 28px 18px 36px; gap: 28px; }
  .pub-btn-dark { width: 100%; text-align: center; }

  .pub-section { padding: 44px 18px; }
  .pub-inquire, .pub-footer { padding: 44px 18px; }

  .pub-h2 { font-size: 34px; }

  .pub-rule { grid-template-columns: 1fr; gap: 14px; }
  .pub-section__head { flex-direction: column; align-items: flex-start; gap: 16px; }

  .pub-grid { grid-template-columns: 1fr; gap: 14px; }
  .pub-grid--catalog { grid-template-columns: 1fr; }
  .pub-grid--blog { grid-template-columns: 1fr; }
  .pub-catalog { padding: 28px 18px 56px; }
  .pub-empty__h { font-size: 26px; }

  /* Blog post reading page — tighten the article gutters + headline. */
  .ppost__article { padding: 8px 18px; }
  .ppost__title { font-size: 30px; }
  .pub-prose { font-size: 16px; }
  .pub-prose blockquote { font-size: 18px; }

  /* Pager: keep prev/next reachable, count above on a phone. */
  .pub-pager { flex-wrap: wrap; gap: 12px; }
  .pub-pager__count { order: -1; flex-basis: 100%; text-align: center; }
  .pub-process__grid { grid-template-columns: 1fr; gap: 24px; }
  .pub-footer__grid { grid-template-columns: 1fr; gap: 28px; }

  .inq__form { padding: 20px; }
  .inq__row { grid-template-columns: 1fr; }
  /* 16px keeps iOS Safari from auto-zooming the page on input focus. */
  .inq__input { font-size: 16px; }

  /* Floating widget shrinks to the avatars so it doesn't cover the CTA. */
  .ask-widget { right: 14px; bottom: 14px; padding: 8px; gap: 0; }
  .ask-widget__text { display: none; }

  /* Honour iOS safe areas on the long dark sections + footer. */
  .pub-footer { padding-bottom: calc(44px + env(safe-area-inset-bottom)); }

  /* Doc pages */
  .pub-doc__head { padding: 36px 18px 24px; }
  .pub-doc__title { font-size: 36px; }
  .pub-doc__lede { font-size: 16px; }
  .pub-doc { padding: 28px 18px 56px; }
  .pub-contact { grid-template-columns: 1fr; }
  .pub-doc__cta { flex-direction: column; align-items: stretch; gap: 16px; }
  .pub-faq__item summary { font-size: 18px; }
  .custom-gallery__grid { columns: 1; }
  .custom-gallery__h { font-size: 26px; }
}

/* ── Email updates: public "sign up for updates" band ──────────────────── */
/* Public: "sign up for updates" band on the storefront */
.pub-updates { border-top: 1px solid var(--slate); color: var(--bone); padding: clamp(48px, 6vw, 64px) 5vw; }
.pub-updates__inner { max-width: 560px; margin: 0 auto; text-align: center; }
.pub-updates .pub-eyebrow { color: var(--body-muted); }
.pub-updates .pub-h2 { color: var(--bone); }
.pub-updates .pub-h2 em { color: var(--timber); }
.pub-updates__p { color: var(--body-muted); font-size: 15px; line-height: 1.65; font-weight: 300; margin: 16px 0 28px; }
.pub-updates__form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pub-updates__input { flex: 1; min-width: 200px; padding: 14px 16px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--slate);
  background: rgba(233, 228, 214, .05); color: var(--bone); }
.pub-updates__input::placeholder { color: var(--body-muted); }
.pub-updates__submit { padding: 14px 26px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  border: none; background: var(--timber); color: var(--graphite); cursor: pointer; font-family: inherit; transition: background .18s ease; }
.pub-updates__submit:hover { background: var(--timber-2); }

/* Public mobile (≤600): stack the signup form, full-width controls */
@media (max-width: 600px) {
  .pub-updates { padding: 48px 20px; }
  .pub-updates__form { flex-direction: column; }
  .pub-updates__input, .pub-updates__submit { width: 100%; min-width: 0; }
}