/* ═══════════════════════════════════════════════════════════════════════
   HIPPOS & HIPPIES — ELEVATE LAYER
   Drop this in /css/elevate.css and link it AFTER site.css on every page:

     <link rel="stylesheet" href="css/site.css"/>
     <link rel="stylesheet" href="css/elevate.css"/>

   Purely additive. site.css is untouched, so removing this one line
   reverts the entire visual change. Nothing here breaks the Product Studio.

   Contents
     01  Accessible ink tokens        (fixes 8 real WCAG failures)
     02  Type + rhythm refinement
     03  Card: the gallery mat        (stop cropping the fringe)
     04  Provenance line + 1-of-1 mark   ← the signature
     05  Category tiles
     06  Split editorial tiles
     07  Meet-the-maker block
     08  Email capture
     09  Trust bar
     10  Sticky buy bar (product page, mobile)
     11  Quality floor
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 01 · ACCESSIBLE INK TOKENS ──────────────────────────────────────────
   The brand hues stay exactly as they are for FILLS and DECORATION.
   These are darker siblings used only where the hue carries TEXT.
   Measured against --linen #FBF7EF unless noted.                        */
:root{
  --sage-ink:#5C7253;   /* 4.93:1  — was #6F8A64 @ 3.58:1  FAIL */
  --terra-ink:#9E4B30;  /* 5.61:1  — was #B25A3C @ 4.45:1  FAIL */
  --terra-ink-wash:#94492F; /* on --terra-wash #F6E4DB, 5.24:1 */
  --drift-ink:#62523D;  /* 7.03:1  — for small print that must stay quiet */
  --rule:1px solid var(--edge);
}

.eye,
.card-cat,
.section-head .eye        { color:var(--sage-ink) }
.card-price,
.link-more,
.display em,
.ethos-quote i,
.crumbs a                 { color:var(--terra-ink) }
.badge.mto                { color:var(--terra-ink-wash) }
.btn-fill                 { background:#9E4B30 }          /* 5.61:1 on linen */
.btn-fill:hover           { background:#873F27 }
.foot-tag                 { color:var(--clay) }           /* 6.88:1 on bark */
.foot-bottom              { color:rgba(251,247,239,.50) } /* 4.71:1 on bark */
.foot-blurb               { color:rgba(251,247,239,.62) }
.foot-links a             { color:rgba(251,247,239,.68) }

/* the sage keyline is decoration, not text — leave the original hue */
.hero-eye::before         { background:var(--sage-line) }


/* ── 02 · TYPE + RHYTHM ──────────────────────────────────────────────────
   One change with outsized effect: the display face gets tighter tracking
   at large sizes and looser at small, the way a real type spec works.     */
.hero-title               { letter-spacing:-.022em }
.section-title            { letter-spacing:-.012em; max-width:18ch }
.head-row .section-title  { max-width:none }
.lede                     { max-width:46ch; line-height:1.7 }   /* was 56ch */
.hero-sub                 { max-width:38ch }                    /* short = confident */

/* section rhythm: alternating bands stop the page reading as one long scroll */
.section + .section       { padding-top:clamp(56px,7.5vw,104px) }
.band-parchment           { background:var(--parchment);
                            border-top:var(--rule); border-bottom:var(--rule) }
.band-bark                { background:var(--bark); color:var(--linen) }
.band-bark .eye           { color:var(--sage-line) }
.band-bark .lede          { color:rgba(251,247,239,.68) }
.band-bark .section-title { color:var(--linen) }


/* ── 03 · CARD: THE GALLERY MAT ──────────────────────────────────────────
   site.css crops cards with object-fit:cover + object-position:center 28%.
   For a rectangle (a rug, a duvet) cover is right. Macramé is a SILHOUETTE
   that depends on negative space and fringe — cover cuts the tails off the
   exact thing she is selling. This mats every piece instead: same frame,
   same grid rhythm, nothing amputated.                                    */
.card-frame               { background:linear-gradient(180deg,#FFFDF8 0%,var(--parchment) 100%);
                            box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
                            transition:box-shadow .3s ease }
.card-frame img           { object-fit:contain;
                            object-position:center center;
                            padding:clamp(14px,3.5%,26px);
                            transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .25s }
.card:hover .card-frame   { box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),
                                       0 18px 44px rgba(43,35,24,.14) }
.card:hover .card-frame img{ transform:scale(1.035); opacity:1 }

/* keep the fringe-reveal signature, but let it sit on the mat edge */
.card-frame::after        { left:22px; right:22px; opacity:.7 }

/* card body: price and 1-of-1 share a baseline */
.card-body                { padding:18px 2px 8px }
.card-name                { font-size:19px; letter-spacing:-.005em }
.card-meta-row            { display:flex; align-items:baseline; justify-content:space-between;
                            gap:12px; margin-top:2px }


/* ── 04 · PROVENANCE + 1-OF-1  ← THE SIGNATURE ───────────────────────────
   The Citizenry stamps GPS coordinates on every country block. It is the
   single most art-directed detail on that site, and it works because it is
   TRUE and SPECIFIC. Sara's equivalent already exists and is currently
   thrown away in one generic word: "reclaimed."
   "Barnwood reclaimed from a 1912 dairy barn, Hyrum UT" cannot be
   templated, cannot be dropshipped, and cannot be argued down on price.  */
.prov{
  display:flex; align-items:flex-start; gap:9px;
  font-family:var(--ui); font-weight:450;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sage-ink); line-height:1.65; margin-top:10px;
}
.prov::before{
  content:""; flex:0 0 18px; height:1px; margin-top:8px;
  background:var(--sage-line);
}
.prov--lg{ font-size:11.5px; letter-spacing:.15em; margin-top:20px }
.prov--lg::before{ flex-basis:30px; margin-top:9px }

/* one of one — a hand-drawn-feeling fraction, not a badge */
.oneof{
  font-family:var(--disp); font-style:italic; font-weight:400;
  font-size:13px; color:var(--drift-ink); white-space:nowrap;
  letter-spacing:.01em;
}
.oneof::before{ content:"№ "; font-style:normal; letter-spacing:.04em; opacity:.6 }

/* on the product page it becomes a proper stamp */
.oneof-stamp{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--sage-line); background:var(--sage-wash);
  border-radius:2px; padding:9px 16px;
  font-family:var(--ui); font-weight:500; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--moss);
}
.oneof-stamp b{ font-family:var(--disp); font-style:italic; font-weight:400;
                font-size:15px; letter-spacing:0; text-transform:none }


/* ── 05 · CATEGORY TILES ─────────────────────────────────────────────────
   The Citizenry's highest-value homepage device: five photo tiles directly
   under the hero. You land, you self-sort, you're in a collection in one
   click. Right now this site offers one button for eight categories.      */
.tiles{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.4vw,18px);
}
.tile{ display:block; position:relative; text-align:center }
.tile-frame{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  border:var(--rule); border-radius:3px;
  background:var(--parchment);
}
.tile-frame img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .4s;
  filter:saturate(.92);
}
.tile:hover .tile-frame img{ transform:scale(1.06); filter:saturate(1) }
.tile-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(43,35,24,.42) 100%);
}
.tile-label{
  position:absolute; left:0; right:0; bottom:14px; z-index:2;
  font-family:var(--ui); font-weight:500; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--linen);
  text-shadow:0 1px 8px rgba(43,35,24,.55);
}
.tile-count{
  display:block; font-family:var(--disp); font-style:italic;
  font-size:12px; letter-spacing:0; text-transform:none;
  color:rgba(251,247,239,.72); margin-top:3px;
}
@media(max-width:900px){ .tiles{ grid-template-columns:repeat(3,1fr) } }
@media(max-width:560px){
  .tiles{ grid-template-columns:repeat(2,1fr); gap:10px }
  .tile-frame{ aspect-ratio:1/1 }
}


/* ── 06 · SPLIT EDITORIAL TILES ──────────────────────────────────────────
   Two half-width image blocks, each one link. Cheap to build, does the work
   of two homepage sections, and gives her a place to merchandise seasonally
   ("Ready to ship today" / "Under $75") without a developer.              */
.split2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,26px) }
.split-card{ position:relative; display:block; overflow:hidden;
             border:var(--rule); border-radius:3px; background:var(--parchment) }
.split-card img{ width:100%; aspect-ratio:16/11; object-fit:cover;
                 transition:transform .7s cubic-bezier(.2,.7,.3,1) }
.split-card:hover img{ transform:scale(1.04) }
.split-card::after{ content:""; position:absolute; inset:0;
                    background:linear-gradient(180deg,rgba(43,35,24,.05) 40%,rgba(43,35,24,.58) 100%) }
.split-body{ position:absolute; left:0; right:0; bottom:0; z-index:2;
             padding:clamp(20px,3vw,34px); color:var(--linen) }
.split-body .eye{ color:var(--sage-line); display:block; margin-bottom:8px }
.split-body h3{ font-family:var(--disp); font-weight:340; font-size:clamp(22px,2.6vw,32px);
                line-height:1.15; letter-spacing:-.01em; margin-bottom:10px }
.split-body span{ font-family:var(--ui); font-size:11px; letter-spacing:.18em;
                  text-transform:uppercase; border-bottom:1px solid rgba(251,247,239,.5);
                  padding-bottom:3px }
@media(max-width:760px){ .split2{ grid-template-columns:1fr } }


/* ── 07 · MEET THE MAKER ─────────────────────────────────────────────────
   Both reference sites put a human face on the homepage. This site
   currently says "meet the maker" above a photo of merchandise.
   A face is the cheapest trust asset available and she already has one.  */
.maker{ display:grid; grid-template-columns:.8fr 1.2fr;
        gap:clamp(28px,5vw,72px); align-items:center }
.maker-photo{ position:relative; border:var(--rule); border-radius:3px;
              overflow:hidden; background:var(--parchment) }
.maker-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover }  /* square: matches the Studio crop */
.maker-photo figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,transparent,rgba(43,35,24,.72));
  color:var(--linen); padding:34px 20px 16px;
  font-family:var(--ui); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
}
.maker-quote{ font-family:var(--disp); font-weight:340; font-style:italic;
              font-size:clamp(23px,3vw,38px); line-height:1.3;
              letter-spacing:-.01em; margin-bottom:22px }
.maker-sign{ font-family:var(--disp); font-style:italic; font-size:20px;
             color:var(--terra-ink); margin-top:24px }
.maker-sign span{ display:block; font-family:var(--ui); font-style:normal;
                  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
                  color:var(--drift-ink); margin-top:5px }
@media(max-width:820px){ .maker{ grid-template-columns:1fr } }


/* ── 08 · EMAIL CAPTURE ──────────────────────────────────────────────────
   Uses Netlify Forms — already included on the plan you're on, $0, no new
   account, no script tag, no vendor to maintain. Submissions land in the
   Netlify dashboard and can be emailed to Sara automatically.            */
.signup{ max-width:640px; margin:0 auto; text-align:center }
.signup-title{ font-family:var(--disp); font-weight:340;
               font-size:clamp(26px,3.4vw,42px); line-height:1.15;
               letter-spacing:-.015em; margin:14px 0 12px }
.signup-row{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap;
             justify-content:center }
.signup-row input[type=email]{
  flex:1 1 280px; min-width:0; background:#fff; border:1px solid var(--edge2);
  border-radius:2px; padding:15px 18px;
  font-family:var(--disp); font-size:15.5px; color:var(--bark);
  transition:border-color .2s;
}
.signup-row input[type=email]:focus{ border-color:var(--sage); outline:none }
.signup-row input::placeholder{ color:#7C6B54 }  /* 5.14:1 on #fff */
.signup-fine{ font-family:var(--ui); font-size:11px; letter-spacing:.06em;
              color:var(--drift-ink); margin-top:16px }
.signup-hp{ position:absolute; left:-9999px }   /* honeypot */


/* ── 09 · TRUST BAR ──────────────────────────────────────────────────────
   The Citizenry publishes phone hours. Rare & Fair publishes payment marks.
   An unknown maker asking $265 for a wall hanging needs both, above the
   fold-ish, in plain language.                                            */
.trust{ display:grid; grid-template-columns:repeat(4,1fr);
        gap:clamp(16px,2.4vw,34px); align-items:start }
.trust-item b{
  display:block; font-family:var(--ui); font-weight:500; font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--moss);
  margin-bottom:8px;
}
.trust-item p{ font-size:14px; line-height:1.75; color:var(--drift-ink); max-width:26ch }
.trust-item a{ color:var(--terra-ink); border-bottom:1px solid var(--clay) }
@media(max-width:860px){ .trust{ grid-template-columns:1fr 1fr; gap:26px } }
@media(max-width:480px){ .trust{ grid-template-columns:1fr } }

/* payment marks — text, not logo images. No licensing, no layout shift. */
.paymarks{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
.paymark{ font-family:var(--ui); font-size:9.5px; font-weight:500;
          letter-spacing:.16em; text-transform:uppercase;
          color:var(--drift-ink); border:1px solid var(--edge2);
          border-radius:2px; padding:5px 10px; background:#fff }


/* ── 10 · STICKY BUY BAR (product page) ──────────────────────────────────
   On a phone the price and the buy button scroll away the moment someone
   reads the description. This pins the one action that matters.          */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  display:none; align-items:center; gap:14px;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:rgba(251,247,239,.97);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:var(--rule);
  box-shadow:0 -8px 30px rgba(43,35,24,.10);
}
.buybar .bb-name{ font-size:14px; line-height:1.25; flex:1; min-width:0;
                  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.buybar .bb-price{ font-style:italic; font-size:17px; color:var(--terra-ink) }
.buybar .btn{ padding:13px 22px; flex:0 0 auto }
@media(max-width:760px){ .buybar.on{ display:flex } body.has-buybar{ padding-bottom:78px } }


/* ── 11 · QUALITY FLOOR ──────────────────────────────────────────────────*/

/* every tap target clears 44px */
.nav-links a, .foot-links a, .link-more, .chip{ min-height:44px;
  display:inline-flex; align-items:center }
.foot-links{ gap:2px }

/* skip link — currently absent */
.skip{ position:absolute; left:-9999px; top:0; z-index:999;
       background:var(--bark); color:var(--linen); padding:12px 20px;
       font-family:var(--ui); font-size:12px; letter-spacing:.16em;
       text-transform:uppercase }
.skip:focus{ left:0 }

/* stronger, brand-correct focus ring */
:focus-visible{ outline:2px solid var(--terra-ink); outline-offset:3px }

/* honour reduced motion for the new pieces too */
@media(prefers-reduced-motion:reduce){
  .tile-frame img, .split-card img, .card-frame img{ transition:none!important;
    transform:none!important }
}

/* print: let someone print a piece to take to a framer */
@media print{
  .nav,.mobile-menu,.buybar,footer,.signup,.trust{ display:none!important }
  body{ background:#fff }
}


/* ═══════════════════════════════════════════════════════════════════════
   ELEVATE — PART TWO
     12  Cart drawer (Square multi-item checkout)
     13  The salvage block  ← replaces per-piece provenance
     14  Testimonials
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 12 · CART DRAWER ────────────────────────────────────────────────────
   FIRST, THE RULE THAT MAKES `hidden` WORK.

   Browsers hide [hidden] elements via display:none in their own user-agent
   stylesheet. But ANY author rule that sets `display` beats the user-agent
   one — specificity never even enters into it. Both of these set display,
   so without this line they ignore `hidden` completely and sit on screen
   permanently with the close button doing nothing.

   The backdrop has no display rule of its own, so it obeyed `hidden` and
   disappeared correctly — which is why the drawer showed with no dark
   overlay behind it. Listed here anyway so the next person doesn't have to
   work out why two of the three are named and one isn't.                */
.cart-fab[hidden],
.cart-scrim[hidden],
.cart-panel[hidden]{ display:none }

.cart-fab{
  position:fixed; right:var(--pad); bottom:22px; z-index:520;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--moss); color:var(--linen); border:none; border-radius:2px;
  padding:14px 22px;
  font-family:var(--ui); font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  box-shadow:0 14px 34px rgba(43,35,24,.24);
  transition:background .2s, transform .18s;
}
.cart-fab:hover{ background:var(--sage); transform:translateY(-2px) }
.cart-fab-n{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:21px; height:21px; padding:0 6px; border-radius:11px;
  background:var(--clay); color:var(--bark);
  font-family:var(--disp); font-style:italic; font-size:12.5px;
  letter-spacing:0; text-transform:none;
}
body.cart-open{ overflow:hidden }

.cart-scrim{ position:fixed; inset:0; z-index:700; background:rgba(43,35,24,.46);
             -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px) }
.cart-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:710;
  width:min(430px,100%); display:flex; flex-direction:column;
  background:var(--linen); border-left:var(--rule);
  box-shadow:-18px 0 54px rgba(43,35,24,.22);
}
.cart-panel header{ display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:22px var(--pad) 18px; border-bottom:var(--rule) }
.cart-h{ font-family:var(--disp); font-weight:340; font-size:26px; letter-spacing:-.01em }
.cart-x{ background:var(--parchment); border:1px solid var(--edge); border-radius:50%;
         width:40px; height:40px; font-size:15px; color:var(--bark2) }
.cart-list{ flex:1; overflow-y:auto; padding:8px var(--pad) 20px }

.cart-row{ display:grid; grid-template-columns:74px 1fr; gap:16px;
           padding:20px 0; border-bottom:1px solid var(--parchment) }
.cart-row img{ width:74px; height:92px; object-fit:contain; padding:6px;
               background:var(--parchment); border:var(--rule); border-radius:2px }
.cart-row-b{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.cart-row-b b{ font-family:var(--disp); font-weight:420; font-size:15.5px; line-height:1.35 }
.cart-var{ font-family:var(--ui); font-size:10px; letter-spacing:.16em;
           text-transform:uppercase; color:var(--sage-ink) }
.cart-pr{ font-family:var(--disp); font-style:italic; font-size:16px; color:var(--terra-ink) }
.cart-rm{ align-self:flex-start; margin-top:4px; background:none; border:none; padding:6px 0;
          font-family:var(--ui); font-size:10.5px; letter-spacing:.16em;
          text-transform:uppercase; color:var(--drift-ink);
          border-bottom:1px solid var(--edge2) }
.cart-rm:hover{ color:var(--terra-ink); border-color:var(--clay) }

.cart-total{ display:flex; justify-content:space-between; align-items:baseline;
             padding-top:22px; font-family:var(--ui); font-size:11px;
             letter-spacing:.2em; text-transform:uppercase; color:var(--drift-ink) }
.cart-total b{ font-family:var(--disp); font-style:italic; font-size:26px;
               letter-spacing:0; text-transform:none; color:var(--bark) }
.cart-empty{ padding:56px 0; text-align:center; color:var(--drift-ink); line-height:2 }
.cart-empty a{ color:var(--terra-ink); border-bottom:1px solid var(--clay) }

.cart-panel footer{ border-top:var(--rule); padding:20px var(--pad)
                    calc(20px + env(safe-area-inset-bottom)); background:var(--parchment) }
.cart-note{ font-family:var(--ui); font-size:11px; line-height:1.7;
            color:var(--drift-ink); margin-bottom:14px }
.cart-err{ background:var(--terra-wash); border:1px solid var(--clay);
           color:#7C3016; border-radius:2px; padding:11px 14px;
           font-size:13.5px; line-height:1.6; margin-bottom:12px }
.cart-go{ width:100%; justify-content:center }
.cart-live{ position:absolute; left:-9999px }

@media(max-width:560px){ .cart-fab{ right:16px; bottom:16px; padding:13px 18px } }


/* ── 13 · THE SALVAGE BLOCK ──────────────────────────────────────────────
   Replaces the per-piece provenance idea. The wood comes off roadside
   fence lines and farm piles — there is no barn-year romance to tell, and
   inventing one would be a lie a customer could catch. The honest version
   is better anyway: it is a PRACTICE, not a pedigree. Stated plainly and
   set well, "nothing here was bought new" does more work than a fake
   heritage story, and Sara never has to maintain a field for it.        */
.salvage{ display:grid; grid-template-columns:1fr 1fr;
          gap:clamp(28px,5vw,80px); align-items:center }
.salvage-lead{ font-family:var(--disp); font-weight:340;
               font-size:clamp(24px,3.2vw,40px); line-height:1.25;
               letter-spacing:-.015em; margin-bottom:20px }
.salvage-lead em{ font-style:italic; color:var(--terra-ink) }
.salvage-list{ list-style:none; margin-top:26px; border-top:var(--rule) }
.salvage-list li{ display:grid; grid-template-columns:auto 1fr; gap:18px;
                  padding:15px 0; border-bottom:var(--rule);
                  font-size:14.5px; line-height:1.7; color:var(--bark2) }
.salvage-list b{ font-family:var(--ui); font-weight:500; font-size:10px;
                 letter-spacing:.2em; text-transform:uppercase;
                 color:var(--sage-ink); padding-top:5px; white-space:nowrap }
.salvage-img{ border:var(--rule); border-radius:3px; overflow:hidden;
              background:var(--parchment) }
.salvage-img img{ width:100%; aspect-ratio:4/5; object-fit:cover }
@media(max-width:820px){ .salvage{ grid-template-columns:1fr }
                         .salvage-list li{ grid-template-columns:1fr; gap:5px } }


/* ── 14 · TESTIMONIALS ───────────────────────────────────────────────────
   Real reviews arrive at wildly different lengths. Rather than pad the
   short ones or trim the long one, the strongest quote leads at display
   size and the others support it underneath. Nothing gets edited to fit
   a grid — the words win, the layout adapts.                            */
.say-rating{ display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:16px; font-family:var(--ui); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--drift-ink) }
.say-stars{ color:var(--terra-ink); letter-spacing:.14em; font-size:13px }

.says{ display:block }
.say{ display:flex; flex-direction:column; gap:14px }
.say-mark{ font-family:var(--disp); font-style:italic; font-size:38px;
  line-height:.7; color:var(--clay) }
.say p{ font-family:var(--disp); font-size:16.5px; line-height:1.8; color:var(--bark2) }

/* the lead quote — set at display size, centred, given room to breathe */
.say-lead{ max-width:60ch; margin:0 auto clamp(40px,6vw,72px); text-align:center;
  align-items:center }
.say-lead .say-mark{ font-size:56px; color:var(--clay) }
.say-lead p{ font-size:clamp(19px,2.2vw,27px); line-height:1.55; color:var(--bark);
  font-variation-settings:"SOFT" 40 }
.say-lead .say-by{ border-top:none; padding-top:0 }

/* the supporting quotes */
.say-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px);
  max-width:92ch; margin:0 auto }
.say-row .say-mark{ font-size:30px }
.say-row .say p{ font-size:15.5px }

.say-by{ margin-top:auto; padding-top:14px; border-top:var(--rule);
  font-family:var(--ui); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sage-ink) }
.say-by span{ display:block; text-transform:none; letter-spacing:.03em;
  font-size:11.5px; color:var(--drift-ink); margin-top:4px }
.say-piece{ display:inline-block; margin-top:8px; text-transform:none;
  letter-spacing:.01em; font-size:11.5px; color:var(--terra-ink);
  border-bottom:1px solid var(--clay); padding-bottom:2px }
.say-piece:hover{ color:var(--bark); border-color:var(--edge2) }

@media(max-width:760px){
  .say-row{ grid-template-columns:1fr; gap:34px }
  .say-lead{ text-align:left; align-items:flex-start }
}

/* ── 15 · PILL OVERFLOW ──────────────────────────────────────────────────
   A piece can carry a status pill plus custom pills at the same time
   ("Made to order" + "New Item"). site.css wraps them, but the pills can
   still be squeezed narrower than their own text, which pushes the text
   out of one pill and onto the next. flex:0 0 auto keeps each pill at its
   natural width so wrapping is the only thing that can happen.          */
.badge-stack .badge,
.status-row .badge{ flex:0 0 auto; white-space:nowrap }
.badge-stack{ row-gap:5px }

/* on narrow cards, drop the pills a size rather than let them collide */
@media(max-width:560px){
  .badge-stack .badge{ font-size:9px; letter-spacing:.1em; padding:4px 9px }
}

/* ── 16 · THE BRAND MARK ─────────────────────────────────────────────────
   The name was 19px next to 12px nav links — a 1.6x step, which reads as
   "one more menu item" rather than the thing the page hangs off. Reference
   shops in this category all give the wordmark real size and let it anchor
   everything else.

   Three changes, in order of effect:
     · the name goes to ~29px, a 2.4x step over the links
     · a knot mark joins it, cropped from the divider already used on the
       site, so it's a reframing of existing brand language not a new one
     · the tagline becomes legible instead of decorative              */
:root{ --nav-h:86px }                    /* was 72 — the lockup needs the room */

.logo{ flex-direction:row; align-items:center; gap:13px }

.logo-mark{ flex:0 0 auto; width:38px; height:26px; color:var(--terra-ink);
  display:block; transition:color .25s ease, transform .25s ease }
.logo-mark svg{ width:100%; height:100%; display:block; overflow:visible }
.logo:hover .logo-mark{ color:var(--sage-ink); transform:translateY(-1px) }

.logo-word{ display:flex; flex-direction:column; line-height:1.1 }
.logo b{ font-size:clamp(23px,2.3vw,29px); font-weight:400; letter-spacing:-.005em;
  font-variation-settings:"SOFT" 90,"WONK" 1 }
.logo b em{ font-weight:400 }
.logo span{ font-size:9.5px; letter-spacing:.24em; color:var(--drift-ink);
  margin-top:4px }

/* The nav is space-between: a bigger wordmark plus five links plus the CTA
   gets tight before the burger normally appears. Measured: the full row needs
   ~1050px, so the menu button takes over at 1100px with headroom to spare
   rather than at the old 900px, where it would have crushed. */
@media(max-width:1100px){
  .nav-links,.nav-cta{ display:none }
  .burger{ display:block }
  .mobile-menu{ display:block }
}

/* On a phone the tagline is the first thing to go — the name and the mark
   carry it, and the burger needs the width more. */
@media(max-width:420px){
  :root{ --nav-h:74px }
  .logo span{ display:none }
  .logo-mark{ width:32px; height:22px }
  .logo{ gap:10px }
}

/* ── 17 · MOBILE OVERFLOW GUARD ──────────────────────────────────────────
   Two causes of a page rendering wider than the phone screen, both fixed
   here. On iOS the symptom is dramatic: Safari shrinks the ENTIRE layout
   to fit the widest element, so every section ends up squeezed into the
   left third with dead space beside it.

   1. Column counts set from JavaScript. An inline style beats every media
      query, so "Before you buy" stayed 4-up on a 390px screen. Column
      counts now live here, where the breakpoints can reach them.
   2. Grid and flex children default to min-width:auto, meaning they refuse
      to shrink below their content. One long word in one cell is enough to
      push a whole grid past the viewport.                                */
.trust{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) }

.trust > *, .says > *, .say-row > *, .tiles > *,
.split2 > *, .grid > *, .feat-grid > *, .maker > *, .salvage > *{ min-width:0 }

.maker.one-col, .salvage.one-col{ grid-template-columns:1fr }
.say-row--one{ grid-template-columns:minmax(0,46ch) }

/* nothing may exceed the screen, whatever else happens */
.section, .tiles, .split2, .trust, .says, .maker, .salvage{ max-width:100% }

/* Cards: names run to one or two lines, which was knocking prices out of
   alignment across a row. Reserve two lines so the row baselines agree. */
.card-name{ min-height:2.6em }
@media(max-width:520px){ .card-name{ min-height:0 } }

/* ── 18 · HARD WIDTH LOCK ────────────────────────────────────────────────
   site.css puts overflow-x:hidden on <body>, but that alone doesn't hold:
   if <html> is allowed to be wider, the page still lays out against the
   wider box and every percentage is computed from it. That's why sections
   drew inside a container narrower than the screen, with dead space beside
   them, and why a phone got the tablet layout.

   overflow-x:clip is the modern form — unlike hidden it doesn't create a
   scroll container, so position:sticky and the fixed nav keep working.  */
html{ max-width:100%; overflow-x:clip }
body{ max-width:100%; overflow-x:clip }

/* Nothing in the page may exceed the screen, whatever its own CSS says. */
.section, .page-top, .hero, .marquee,
.tiles, .split2, .trust, .says, .say-row, .maker, .salvage,
.grid, .feat-grid, .how-grid, .ethos-inner{ max-width:100% }

/* ── 19 · PHONE LAYOUT ───────────────────────────────────────────────────
   The featured row is a plain single column on phones and a plain two-up on
   tablets. No card is special, so no rule has to be undone.               */
@media(max-width:900px){
  .feat-grid{ grid-template-columns:1fr 1fr; gap:16px }
}
@media(max-width:760px){
  .feat-grid{ grid-template-columns:1fr }
}

/* Tall portrait photos in a 4:5 frame leave big empty margins on a phone,
   where the screen is already narrow. A taller frame fits the work better. */
@media(max-width:560px){
  .card-frame{ aspect-ratio:3/4 }
  .card-frame img{ padding:10px }
  .tiles{ grid-template-columns:repeat(2,1fr) }
}

/* Belt and braces: a photo can never push its card past the screen. */
.card-frame img, .tile-frame img, .split-card img,
.maker-photo img, .salvage-img img{ max-width:100%; max-height:100% }