/* Kove Luxury brand layer, on top of Tailwind.
   Ports costaricarealtor's hardening (mobile overflow clip, 44px tap targets,
   line clamps) and replaces its gold-diamond divider with our own mark. */

html { scroll-behavior: smooth; overflow-x: clip; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: #8A5A3C; color: #F7F3EE; }
.font-700{font-weight:700}.font-600{font-weight:600}.font-500{font-weight:500}.font-400{font-weight:400}

/* ---- the wordmark ----
   The whole visual signature is one move: the "y" is italic, everything else
   upright. Word spaces run wide so the y breathes. Never letterspace lowercase
   Garamond. The acute on Patina is always kept. */
.wordmark{font-family:"EB Garamond",Georgia,serif;font-weight:500;letter-spacing:0;
  word-spacing:.15em;color:#1C1A17;white-space:nowrap}
.wordmark i{font-style:italic;font-weight:400}

/* ---- the divider ----
   CRR uses a gold diamond between two rules. Ours is the acute accent from
   "Patina" - the same mark that sits over the P in the monogram. It is the only
   ornament in the system. */
.rule-accent{display:flex;align-items:center;gap:14px;margin:2rem 0}
.rule-accent::before,.rule-accent::after{content:"";height:1px;background:#C9C0B4;flex:1}
.rule-accent .nd{font-family:"EB Garamond",Georgia,serif;font-size:22px;line-height:0;
  color:#8A5A3C;transform:translateY(-2px);flex:0 0 auto}
.rule-hair{height:1px;background:#E4DDD3;border:0;margin:0}

/* ---- availability is typographic, never coloured ----
   A green "in stock" pill is the loud-marketplace pattern she has learned to
   distrust. State is said in words, in the ink scale. */
.state{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.state-av{color:#1C1A17}
.state-cv{color:#8A5A3C}
.state-so{color:#6B655E}

/* ---- product photography frame ----
   Source photos arrive as bedroom shots, mirror selfies and dark boutique tables.
   We standardise the FRAME, never the photo: fixed 4:5, contained, letterboxed.
   Never cropped, never stretched, never "enhanced". */




/* Typographic fallback card for when the shop's photo is unusable. */
.ficha{position:absolute;inset:0;display:grid;align-content:center;gap:4px;padding:1.4rem;
  background:#EFE9E1;text-align:left}

.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tnum{font-variant-numeric:tabular-nums}
.wrap-any{overflow-wrap:anywhere;word-break:break-word}

/* ---- mobile hardening, ported from CRR's July mobile audit ----
   html-level clip because body-level overflow-x-hidden is ignored for scrolling
   by iOS Safari. clip creates no scroll container, so position:sticky survives. */
.mob-nav-scroll{max-height:calc(100dvh - 4rem);overflow-y:auto}
/* 44px minimum touch target with no visual change (Apple HIG / WCAG 2.5.8). */
.tap{position:relative}
.tap::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px)}
.tap44{min-width:44px;min-height:44px}

/* ---- hero ---- */
.hero-band{position:relative;isolation:isolate;overflow:hidden;background:#EFE9E1}
.hero-band .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Left-weighted scrim so the headline sits on paper while the texture stays visible.
   Deliberately not a full-width wash: the material has to read as material. */
.hero-band .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(247,243,238,.96) 0%,rgba(247,243,238,.90) 38%,rgba(247,243,238,.35) 68%,rgba(247,243,238,0) 100%)}
.hero-band .inner{position:relative;z-index:2}

/* Focus is visible and uses the accent, never a browser default outline. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #8A5A3C;outline-offset:2px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================================
   Component layer.

   The templates already use good semantic class names (wrap, piece-layout,
   attrs, price-line, prose). Rather than rewrite every template into utility
   soup, those names get real styles here. One file, and every page - piece,
   brand, model, catalogue, static - is styled at once. Same division CRR uses:
   Tailwind for the shell, brand.css for the components.
   ============================================================================ */


@media (min-width:640px){}







h1{font-family:"EB Garamond",Georgia,serif;font-weight:500;color:#1C1A17;
  font-size:clamp(28px,4vw,42px);line-height:1.14;margin:0;text-wrap:balance}
h2{font-family:"EB Garamond",Georgia,serif;font-weight:500;color:#1C1A17}
.lede{font-family:"EB Garamond",Georgia,serif;font-size:clamp(17px,1.9vw,20px);
  line-height:1.55;color:#4A4642;max-width:46ch;margin:.9rem 0 0}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#6B655E;margin:0 0 .5rem}
.eyebrow a{color:#6B655E;text-decoration:none}
.eyebrow a:hover{color:#8A5A3C}
.empty{color:#6B655E;padding:2.5rem 0}
.result-count{font-size:12.5px;color:#6B655E;margin:0 0 1.25rem;font-variant-numeric:tabular-nums}


@media (min-width:768px){}
@media (min-width:1024px){}

/* ---- the piece page ---------------------------------------------------- */
.piece-layout{display:grid;gap:2.5rem;padding-top:2.25rem;align-items:start}
@media (min-width:900px){.piece-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.5rem}}
@media (min-width:900px){.piece-head{position:sticky;top:5.5rem}}

/* The shop's photograph, contained in OUR frame. Never cropped, never stretched,
   never "enhanced" - a pre-owned buyer has to see the real object and its wear. */
.shots > img{display:block;width:100%;height:auto;background:#EFE9E1;border:1px solid #E4DDD3}
.shots-rest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.5rem}
.shots-rest img{display:block;width:100%;aspect-ratio:1;object-fit:cover;
  background:#EFE9E1;border:1px solid #E4DDD3}
.shot--empty{display:grid;place-items:center;aspect-ratio:4/5;background:#EFE9E1;
  font-family:"EB Garamond",Georgia,serif;font-size:20px;color:#6B655E}

.attrs{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid #E4DDD3}
.attrs li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid #E4DDD3;font-size:13.5px}
.attrs .k{color:#6B655E}
.attrs .v{color:#1C1A17;text-align:right;font-weight:500}

.price-line{font-size:26px;font-weight:600;color:#1C1A17;margin:1.5rem 0 .3rem;
  font-variant-numeric:tabular-nums}
.price-note{font-size:12.5px;color:#6B655E;margin:0}
.shopline{font-size:13px;line-height:1.55;color:#4A4642;margin:.75rem 0 0}

.cta{margin-top:1.75rem}
.btn{display:inline-flex;align-items:center;justify-content:center;background:#1C1A17;
  color:#F7F3EE;font-size:14px;font-weight:600;padding:.85rem 1.6rem;border:0;cursor:pointer;
  text-decoration:none;transition:background .15s}
.btn:hover{background:#6E4730}
.btn--off{background:#EFE9E1;color:#6B655E;cursor:default}
.btn--off:hover{background:#EFE9E1}
.unique{font-size:12.5px;color:#6B655E;margin:.75rem 0 0}

/* Says how we know, without naming the shop. Naming it hands the buyer to a
   storefront that never asked to be listed. */
.provenance{font-size:12px;line-height:1.6;color:#6B655E;margin:1.5rem 0 0;
  padding-top:.9rem;border-top:1px solid #E4DDD3}

/* ---- filters ----------------------------------------------------------- */

.filters label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#6B655E}
.filters select,.filters input{font:inherit;font-size:13.5px;background:#FCFAF7;color:#1C1A17;
  border:1px solid #E4DDD3;padding:.5rem .7rem;border-radius:0}
.filters select:focus,.filters input:focus{outline:2px solid #8A5A3C;outline-offset:1px}
.filters button{font:inherit;font-size:13px;font-weight:600;background:#1C1A17;color:#F7F3EE;
  border:0;padding:.55rem 1.1rem;cursor:pointer}
.filters a{font-size:13px;color:#8A5A3C;text-decoration:none}

/* ---- brand tiles ------------------------------------------------------- */

@media (min-width:768px){}





/* ---- long-form pages --------------------------------------------------- */
.prose{max-width:66ch;color:#4A4642;font-size:15.5px;line-height:1.7}
.prose h2{font-size:24px;margin:2.25rem 0 .6rem}
.prose h3{font-family:"Instrument Sans",system-ui,sans-serif;font-size:16px;font-weight:600;
  color:#1C1A17;margin:1.75rem 0 .4rem}
.prose p{margin:0 0 1rem}
.prose ul,.prose ol{margin:0 0 1rem;padding-left:1.25rem}
.prose li{margin-bottom:.4rem}
.prose a{color:#8A5A3C}
.prose strong{color:#1C1A17;font-weight:600}
.prose hr{border:0;border-top:1px solid #E4DDD3;margin:2rem 0}

/* ---- model chips + filters -------------------------------------------- */



.chip[aria-current="true"],.chip.is-on{border-color:#1C1A17;color:#1C1A17;font-weight:600}
.families{margin-top:1.5rem}



.filter-group > strong,.filter-group > .filter-label{font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#6B655E;font-family:inherit}
.filter-group a{font-size:13px;color:#4A4642;text-decoration:none;padding:.15rem 0}
.filter-group a:hover{color:#8A5A3C}
.filter-group a[aria-current="true"]{color:#1C1A17;font-weight:600}
@media (min-width:640px){
  
  .filter-group > strong,.filter-group > .filter-label{width:100%}
}


/* ============================================================================
   FRAME + TILE — from a pixel analysis of all 617 real thumbnails.

   The corpus is not "wildly inconsistent". It is two problems:
     33%  true studio cutouts on pure white (edge 255, sd 0)
     27%  shop-platform letterboxed on cool grey 245 (irenebuffa, all exactly 4:5)
     29%  light wall / bedroom shots (edge 205-235, sd 5-10)
      2%  dark boutique tables
   Zero landscape files. Everything is portrait or square.

   So the old treatment produced a DOUBLE FRAME: a white rectangle inside a beige
   rectangle inside a bordered card. Three nested tints per tile. That was the
   single biggest reason it read cheap.

   Fix: 4:5 box whose ground IS the page colour, image contained, and
   mix-blend-mode:multiply.
     white (255) x papel = papel, so a studio cutout dissolves onto the paper
     exactly as SSENSE's do on white.
     every non-white pixel is scaled by papel/255 = (.969,.953,.933) - a uniform
     warm shift of at most 6.7% in blue, identical across the whole frame.
   It cannot hide a scuff, a crease or a colour, because it is uniform. It is a
   frame, not a filter: the file is untouched and the piece page links the raw
   original.

   4:5 chosen because it is the minimum-band box for what we actually hold:
   0% band on the 4:5 files, 8% sides on 2:3, 10% top/bottom on 1:1.

   Rejected: object-fit cover (crops - a silent breach of the no-alteration
   rule), blurred-duplicate backdrop (a filtered derivative of the shop's photo,
   and it reads like a video app), dominant-colour fill (rainbow grid),
   vignette and drop shadow (alteration), background removal (alteration, and
   the good weights carry commercial licences).
   ============================================================================ */

/* Colour tokens. brand.css referenced var(--line), var(--surface) and var(--ink*) from
   day one without defining them (they lived in site.css, which no page loads), so the
   search input had no border and no fill. Same palette as the hard-coded hexes below;
   both spellings because both are in use. */
:root{
  --ink:#1C1A17; --ink2:#4A4642; --ink-2:#4A4642; --ink3:#6B655E; --ink-3:#6B655E;
  --line:#E4DDD3; --surface:#FCFAF7; --surface-2:#F7F3EE; --paper:#F7F3EE; --accent:#8A5A3C;
}
:root{
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --gutter:24px; --maxw:1280px;
}
@media (min-width:768px){ :root{--gutter:32px} }
@media (min-width:1280px){ :root{--gutter:40px} }

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{margin-top:var(--s6)}
@media (min-width:768px){ .section{margin-top:var(--s7)} }
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:0;border:0;margin-bottom:var(--s3)}
.section-head h2{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:#6B655E;margin:0}
.section-head a{font:500 13px/1 "Instrument Sans",system-ui,sans-serif;
  color:#8A5A3C;text-decoration:none}
.section-head a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- the frame ---- */
.ph{position:relative;aspect-ratio:4/5;background:#F7F3EE;isolation:isolate;overflow:hidden;display:block}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  object-position:50% 50%;display:block;mix-blend-mode:multiply}

/* ---- the tile ----
   No border, no fill, no caption box. Neither The Row nor Toteme puts any of
   those on a product card, and a box around an inconsistent photograph only
   frames the inconsistency. Price is the SAME weight as the name and smaller:
   at 16px/600 it was the heaviest thing on the card, which reads discount. */
.tile{display:block;text-decoration:none;color:inherit}
.tile .ph-alt{opacity:0;transition:opacity .25s ease}
@media (hover:hover){ .tile:hover .ph-alt{opacity:1} }
.tile-cap{display:grid;gap:3px;padding-top:12px}
.tile-house{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:#6B655E}
.tile-name{font:400 17px/1.3 "EB Garamond",Georgia,serif;color:#1C1A17;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-line{margin-top:3px;font:500 13.5px/1.4 "Instrument Sans",system-ui,sans-serif;
  color:#1C1A17;font-variant-numeric:tabular-nums}
.tile-cond{font-weight:400;color:#6B655E;margin-left:10px}
.tile-state{font:500 11px/1.4 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:#6B655E}
.tile--off .ph img{opacity:.55}
@media (hover:hover){
  .tile:hover .tile-name{text-decoration:underline;text-underline-offset:3px;
    text-decoration-thickness:1px;text-decoration-color:#C9C0B4}
}
@media (max-width:767px){ .tile-name{font-size:16px} .tile-line{font-size:13px} }

/* ---- the grid ---- */
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
@media (min-width:768px){ .card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px} }
@media (min-width:1100px){ .card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 32px} }

/* ---- the house line ----
   Collector Square's model bar, in our type: a band of text links between two
   hairlines. Five bordered tiles became one line, which is the whole point -
   the references use at most one hairline per screen. */
.house-line{display:flex;align-items:baseline;justify-content:center;gap:40px;
  padding:24px 0;border-top:1px solid #E4DDD3;border-bottom:1px solid #E4DDD3;
  overflow-x:auto;scrollbar-width:none}
.house-line::-webkit-scrollbar{display:none}
.house-line a{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;
  text-decoration:none;color:#1C1A17}
.house-line .h{font:400 26px/1.2 "EB Garamond",Georgia,serif}
.house-line .n{font:400 12.5px/1 "Instrument Sans",system-ui,sans-serif;color:#6B655E;
  font-variant-numeric:tabular-nums}
.house-line a:hover .h{text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:#C9C0B4}
@media (max-width:767px){ .house-line{gap:28px;justify-content:flex-start;padding:18px var(--gutter);
  margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}
  .house-line .h{font-size:21px} }

/* ---- model families as a text line, not chips ---- */
.model-line{display:flex;align-items:baseline;gap:32px;padding:14px 0;
  border-top:1px solid #E4DDD3;border-bottom:1px solid #E4DDD3;
  overflow-x:auto;scrollbar-width:none;margin-top:var(--s4)}
.model-line::-webkit-scrollbar{display:none}
.model-line a{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;
  text-decoration:none;color:#1C1A17}
.model-line .m{font:400 17px/1.3 "EB Garamond",Georgia,serif}
.model-line .n{font:400 12px/1 "Instrument Sans",system-ui,sans-serif;color:#6B655E;
  font-variant-numeric:tabular-nums}
.model-line a[aria-current="true"] .m{text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:#C9C0B4}

/* ---- filter row: one 40px line, drawer closed by default ---- */
.filterbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:40px;margin:var(--s4) 0 var(--s3)}
.filterbar .count{font:400 12.5px/1.5 "Instrument Sans",system-ui,sans-serif;color:#6B655E;
  font-variant-numeric:tabular-nums}
.filterbar .tools{display:flex;align-items:center;gap:24px}
.filterbar summary{font:500 13px/1 "Instrument Sans",system-ui,sans-serif;color:#4A4642;
  cursor:pointer;list-style:none}
.filterbar summary::-webkit-details-marker{display:none}
.filterbar details[open] summary,.filterbar summary.on{text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px}
.filter-panel{display:grid;gap:18px;padding:20px 0 4px;border-top:1px solid #E4DDD3;
  margin-top:14px}
.filter-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.filter-row .lab{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:#6B655E;min-width:74px}
.filter-row a{font:400 13.5px/1 "Instrument Sans",system-ui,sans-serif;color:#4A4642;
  text-decoration:none}
.filter-row a:hover{color:#8A5A3C}
.filter-row a[aria-current="true"]{color:#1C1A17;font-weight:500;text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px}

/* One-line lede on hubs: the three-line SEO paragraph pushed product off screen. */
.lede-line{font:400 14px/1.6 "Instrument Sans",system-ui,sans-serif;color:#6B655E;
  margin:.6rem 0 0;max-width:64ch}
h1{font-family:"EB Garamond",Georgia,serif;font-weight:500;color:#1C1A17;
  font-size:clamp(28px,2.6vw,34px);line-height:1.15;margin:0;text-wrap:balance}
.eyebrow{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:#6B655E;margin:0 0 .7rem}
.eyebrow a{color:inherit;text-decoration:none}
.eyebrow a:hover{color:#8A5A3C}

/* ============================================================================
   HOMEPAGE PLATES

   The diagnosis was not "it looks cheap" any more - it was "every section is
   the same". One image scale (tile) and one section grammar (label, hairline,
   grid). So the fix is rhythm, not ornament:

     01 hero        FULL-BLEED  image-led
     02 certeza     contained   icons
     03 directorio  contained   type, two tiers, double rule
     04 reciente    contained   grid with one 2x2 feature
     05 cita        narrow      type as image
     06 proceso     FULL-BLEED  5/7 split, image LEFT
     07 hoy         contained   big numerals, vertical rules
     08 cierre      FULL-BLEED  7/5 split, image RIGHT  (mirror of 06)

   Never two full-bleeds adjacent. Never two type-only contained blocks
   adjacent. The two splits mirror each other so they rhyme without repeating.
   ============================================================================ */

/* ---- icons ---- */
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.25;
  stroke-linecap:butt;stroke-linejoin:miter;flex:0 0 auto}
.ic-inline{width:14px;height:14px;margin-left:6px;vertical-align:-2px}
.ic-btn{width:18px;height:18px;margin-right:9px;vertical-align:-3px}

/* ---- D4: the folio rule. Replaces the old label-over-hairline section head.
   The numbers give the page a sequence a reader can feel. ---- */
.folio{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.folio .n{font:500 13px/1 "EB Garamond",Georgia,serif;color:#8A5A3C;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.folio .l{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:#6B655E;flex:0 0 auto}
.folio .bar{flex:1 1 auto;height:1px;background:#E4DDD3}
.folio a{flex:0 0 auto;font:500 13px/1 "Instrument Sans",system-ui,sans-serif;
  color:#8A5A3C;text-decoration:none;display:inline-flex;align-items:center}
.folio a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- D3: double rule. Used exactly once, above the directory. The double
   rule is the classic index mark - it says "table of contents" without a
   label. ---- */
.rule-double{height:5px;border-top:1px solid #D5CCC0;border-bottom:1px solid #E4DDD3;
  margin:0 0 28px}

/* ---- 01 hero ---- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#EFE9E1;
  height:clamp(560px,78vh,760px);display:grid;align-items:center}
.hero picture,.hero img.bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero img.bg{object-fit:cover;object-position:70% 50%}
.hero .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(247,243,238,.55) 0%,rgba(247,243,238,.32) 42%,rgba(247,243,238,0) 66%)}
.hero .inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);
  margin:0 auto;padding:0 var(--gutter)}
.hero h1{font:500 clamp(34px,4.2vw,60px)/1.08 "EB Garamond",Georgia,serif;color:#1C1A17;
  max-width:16ch;margin:0;text-wrap:balance}
.hero .sub{font:400 20px/1.5 "EB Garamond",Georgia,serif;color:#4A4642;max-width:40ch;
  margin:20px 0 0}
.hero .acts{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.hero .count{font:400 13.5px/1 "Instrument Sans",system-ui,sans-serif;color:#4A4642;
  margin-top:20px;font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;
  font:600 14px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.02em;
  padding:14px 28px;text-decoration:none;border:1px solid #1C1A17;
  background:#1C1A17;color:#F7F3EE;transition:background .2s,color .2s}
.btn:hover{background:#6E4730;border-color:#6E4730}
.btn-ghost{background:transparent;color:#1C1A17}
.btn-ghost:hover{background:#1C1A17;color:#F7F3EE;border-color:#1C1A17}

@media (max-width:767px){
  .hero{height:clamp(520px,72svh,680px);align-items:start}
  .hero img.bg{object-position:50% 100%}
  /* The 90deg scrim was the bug at 390px - half the headline sat on raw
     texture. On a portrait crop the clear space is at the TOP, so the scrim
     has to run top-down to match. */
  .hero .scrim{background:linear-gradient(180deg,rgba(247,243,238,.78) 0%,rgba(247,243,238,.40) 48%,rgba(247,243,238,0) 72%)}
  .hero .inner{padding-top:56px}
  .hero .sub{font-size:17px}
  .hero .acts{flex-direction:column;gap:10px}
  .hero .btn{width:100%}
}

/* ---- 02 la certeza: the Luxora trust-strip placement, every line true ---- */
.certeza{border-bottom:1px solid #E4DDD3;padding:40px 0;margin-top:0}
.certeza .row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.certeza .ic{width:28px;height:28px;color:#6B655E}
.certeza h3{font:400 17px/1.3 "EB Garamond",Georgia,serif;color:#1C1A17;margin:14px 0 6px}
.certeza p{font:400 13.5px/1.55 "Instrument Sans",system-ui,sans-serif;color:#4A4642;
  margin:0;max-width:30ch}
@media (max-width:767px){
  .certeza .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .certeza .ic{width:24px;height:24px}
}

/* ---- 03 directorio ---- */
.houses{display:flex;align-items:baseline;justify-content:center;gap:56px;flex-wrap:wrap;
  padding-bottom:20px}
.houses a{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;color:#1C1A17}
.houses .h{font:400 34px/1.2 "EB Garamond",Georgia,serif}
.houses .n{font:400 12.5px/1 "Instrument Sans",system-ui,sans-serif;color:#6B655E;
  font-variant-numeric:tabular-nums}
.houses a:hover .h{text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1px;text-decoration-color:#C9C0B4}
@media (max-width:767px){.houses{gap:24px}.houses .h{font-size:26px}}

/* ---- 04 feature tile: breaks the six-row wall ---- */
.card-grid .tile--feature{grid-column:span 2;grid-row:span 2;
  display:grid;grid-template-rows:1fr auto}
.tile--feature .ph{aspect-ratio:auto;height:100%}
.tile--feature .tile-name{font-size:21px}
.tile-cert{font:400 12.5px/1.4 "Instrument Sans",system-ui,sans-serif;color:#6B655E;
  margin-top:3px;display:block}
@media (max-width:767px){
  .card-grid .tile--feature{grid-column:span 2;grid-row:auto;display:block}
  .tile--feature .ph{aspect-ratio:4/5;height:auto}
  .tile--feature .tile-name{font-size:19px}
}
.more-wrap{margin-top:48px;display:flex;justify-content:center}
.more-wrap .btn{min-width:280px}
@media (max-width:767px){.more-wrap .btn{width:100%}}

/* ---- 05 pull-quote: type used as an image, surrounded by nothing ---- */
.quote{max-width:880px;margin-left:auto;margin-right:auto;padding:32px var(--gutter);
  text-align:center}
.quote .mark{font:400 36px/1 "EB Garamond",Georgia,serif;color:#8A5A3C;display:block;
  margin-bottom:16px}
.quote p{font:italic 400 clamp(26px,3vw,38px)/1.2 "EB Garamond",Georgia,serif;
  color:#1C1A17;margin:0 auto;max-width:24ch}
@media (max-width:767px){.quote{padding:24px var(--gutter)}.quote .mark{font-size:28px}}

/* ---- 06 + 08 the two split plates. Mirrored: image left, then image right. ---- */
.plate{display:grid;grid-template-columns:1fr}
.plate .shot{position:relative;overflow:hidden;min-height:420px;background:#EFE9E1}
.plate .shot img{width:100%;height:100%;object-fit:cover;display:block}
.plate .panel{padding:64px var(--gutter);display:grid;align-content:center}
.plate .panel .in{max-width:520px;margin:0 auto;width:100%}
@media (min-width:1024px){
  .plate{grid-template-columns:5fr 7fr}
  .plate .shot{min-height:640px}
  .plate .panel{padding:96px}
  .plate--mirror{grid-template-columns:7fr 5fr}
  .plate--mirror .shot{order:2;min-height:560px}
  .plate--mirror .panel{order:1}
}
/* The one material panel that is not the hero: a second texture on the page. */
.panel--plaster{background:#EFE9E1;position:relative;isolation:isolate}
.panel--plaster::before{content:"";position:absolute;inset:0;z-index:0;
  background:url("../img/ground-plaster.981c3c481ed7.webp") center/cover;opacity:.35;
  mix-blend-mode:multiply;pointer-events:none}
.panel--plaster .in{position:relative;z-index:1}
.panel .eyebrow{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:#6B655E;margin:0 0 14px}
.panel h2{font:500 clamp(28px,2.6vw,34px)/1.15 "EB Garamond",Georgia,serif;color:#1C1A17;
  margin:0 0 24px;text-wrap:balance}
.panel .lede{font:400 19px/1.5 "EB Garamond",Georgia,serif;color:#4A4642;margin:0 0 20px}
.panel .fine{font:400 13px/1.6 "Instrument Sans",system-ui,sans-serif;color:#6B655E;margin:0}

/* numbered process - the numerals are the only colour event below the hero */
.steps{list-style:none;margin:0 0 28px;padding:0}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;
  padding:20px 0;border-top:1px solid #E4DDD3}
.steps li:last-child{border-bottom:1px solid #E4DDD3}
.steps .n{font:500 28px/1 "EB Garamond",Georgia,serif;color:#8A5A3C;
  font-variant-numeric:tabular-nums}
.steps p{font:400 15px/1.6 "Instrument Sans",system-ui,sans-serif;color:#4A4642;margin:0}
@media (max-width:767px){.steps .n{font-size:24px}}

.panel .more{font:500 13.5px/1 "Instrument Sans",system-ui,sans-serif;color:#8A5A3C;
  text-decoration:none;display:inline-flex;align-items:center}
.panel .more:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- 07 hoy: big numerals, the only vertical rules on the page ---- */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.proof .cell{padding:0 28px}
.proof .cell + .cell{border-left:1px solid #E4DDD3}
.proof .cell:first-child{padding-left:0}
.proof .num{font:500 56px/1 "EB Garamond",Georgia,serif;color:#1C1A17;
  font-variant-numeric:tabular-nums;display:block}
.proof .lab{font:400 13px/1.5 "Instrument Sans",system-ui,sans-serif;color:#6B655E;
  margin:12px 0 0;max-width:18ch}
@media (max-width:767px){
  .proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0}
  .proof .num{font-size:40px}
  .proof .cell{padding:0 16px}
  .proof .cell:nth-child(odd){padding-left:0;border-left:0}
  .proof .cell:nth-child(3),.proof .cell:nth-child(4){padding-top:28px;border-top:1px solid #E4DDD3}
}

/* Full-bleed helper: escape the contained wrapper without a nested container. */
.bleed{width:auto;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}

/* On mobile the ghost button sits lower in the frame, where the scrim has
   already faded and the photograph is busy. Give it its own paper ground so it
   stays legible without turning it into a second solid button. */
@media (max-width:767px){
  .hero .btn-ghost{background:rgba(247,243,238,.82);backdrop-filter:blur(3px)}
}


/* ---- the brand lockup ----
   El Nudo beside the wordmark. The mark sits a shade above the optical centre
   because the wordmark's own weight hangs low; ink-to-ink gap is roughly half
   the cap height, which is the clear space the mark needs to stay a mark and
   not become a bullet. */
.brandlock{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brandlock .mark{width:26px;height:26px;fill:currentColor;flex:0 0 auto;
  transform:translateY(-1px)}
.brandlock .wordmark{white-space:nowrap}
@media (max-width:640px){
  .brandlock{gap:9px}
  .brandlock .mark{width:22px;height:22px}
}

/* ================= MOBILE EDGE SAFETY =================
   Everything below exists because text was sitting on the edge of the screen.
   Read the header of deploy notes for why each one is here; the short version is
   that a gutter measured in px is not a gutter on a notched phone, and 100vw is
   not the width of the content area. */

/* A gutter that survives a notch. max() means the inset only ever ADDS space, so
   this is inert on a phone with square corners and on every desktop. */
.wrap,
.hero .inner,
.plate .panel,
.quote{
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
}

/* The header was on Tailwind's px-4 while the body was on --gutter, so the logo
   sat 8px closer to the edge than every line beneath it. */
.hdr-wrap{
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
}

/* Backstop: if anything ever overflows again, clip it rather than let the whole
   page scroll sideways. clip and not hidden -- overflow:hidden on the root
   silently disables position:sticky, which the piece page relies on. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}

/* A long model name or a pasted URL had nothing to break on and ran under the
   edge. Headings get it too: "Louis Vuitton Multi Pochette Accessoires" is one
   unbreakable run at 390px. */
.prose,.prose p,.prose li,.hero h1,.hero .sub,
.tile-name,.tile-line,.piece-head h1,.attrs li{
  overflow-wrap:anywhere;
}

/* Images and media can never be the thing that widens the page. */
img,svg,video,table{max-width:100%}

@media (max-width:767px){
  /* 3 thumbnails across a 390px screen leaves ~110px each once gaps are taken;
     2 is the honest number. */
  .shots-rest{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The enquiry CTA is the whole point of the piece page on a phone. */
  .cta .btn{width:100%}
}

/* Two CTAs side by side, the quieter one second: buying outright is the default and
   apartar is the alternative, not the other way round. */
.cta form{display:flex;gap:10px;flex-wrap:wrap}
.cta-terms{margin:.6rem 0 0;font:400 13px/1.5 "Instrument Sans",system-ui,sans-serif;
  color:var(--ink3);max-width:46ch}
@media (max-width:767px){ .cta form{flex-direction:column} .cta form .btn{width:100%} }

/* The dollar line sits under the peso price, quieter than it: one price binds and
   the other is a courtesy. */
.price-usd{margin:.3rem 0 0;font:400 13px/1.5 "Instrument Sans",system-ui,sans-serif;
  color:var(--ink3)}

/* ---- Search with voice ----
   Ink on paper like everything else. The mic is hidden until the JS confirms a
   working tier, because a mic button that does nothing reads as a broken site.
   Sizing note: the input is 16px on purpose. Anything smaller makes iOS Safari
   zoom the whole page on focus, which on a phone looks like the layout breaking. */
.ksearch{margin:0 0 1.25rem;max-width:44rem}
.ksearch-row{position:relative;display:flex;align-items:center}
.ksearch input{width:100%;font:inherit;font-size:16px;line-height:1.4;
  padding:.85rem 5.2rem .85rem 1rem;border:1px solid var(--line);border-radius:2px;
  background:var(--surface);color:var(--ink);
  -webkit-appearance:none;appearance:none}
.ksearch input::placeholder{color:var(--ink3);opacity:1}
.ksearch input:focus-visible{outline:2px solid #8A5A3C;outline-offset:1px}
.ksearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.ksearch-mic,.ksearch-go{position:absolute;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;border:0;cursor:pointer;border-radius:2px}
.ksearch-mic{right:3rem;width:2.3rem;height:2.3rem;background:transparent;color:var(--ink2)}
.ksearch-mic:hover{color:var(--ink)}
.ksearch-mic[hidden]{display:none}
.ksearch-mic.kove-mic-on{background:#1C1A17;color:#F7F3EE}
.ksearch-go{right:.45rem;width:2.4rem;height:2.4rem;background:#1C1A17;color:#F7F3EE}
.ksearch-go:hover{background:#2A2622}
.ksearch-mic:focus-visible,.ksearch-go:focus-visible{outline:2px solid #8A5A3C;outline-offset:2px}
.ksearch-status{margin:.4rem 0 0;font-size:.75rem;font-weight:600;color:var(--ink2)}
.ksearch-status:empty{display:none}
/* In the hero the box sits on the photograph, so it needs its own ground. */
.hero .ksearch{margin:1.25rem 0 1rem}
.hero .ksearch input{background:rgba(247,243,238,.96);
  box-shadow:0 8px 28px rgba(28,26,23,.18)}
.hero .ksearch-status{color:#F7F3EE;text-shadow:0 1px 2px rgba(0,0,0,.4)}
@media (max-width:767px){ .ksearch{max-width:none} }

/* ---- third-party verification offer ----
   Quiet. It is a service, not a sales pitch, and it sits under the piece's own
   authentication line so the two read as one thought. */
.verify{margin:1.4rem 0 0;padding:1rem 0 0;border-top:1px solid var(--line)}
.verify-has{margin:0;font:400 13.5px/1.55 "Instrument Sans",system-ui,sans-serif;
  color:var(--ink2)}
.verify-offer{margin:.5rem 0 0;font:400 13.5px/1.55 "Instrument Sans",system-ui,sans-serif;
  color:var(--ink3);max-width:52ch}
.verify-more{display:inline-block;margin-top:.5rem;font:500 13px/1.5 "Instrument Sans",system-ui,sans-serif}

/* ---- the house's other categories ----
   A row of quiet links under the heading. The count is shown because the number is the
   reason to click. */
.brand-cats{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 1.25rem}
.brand-cats a{font:500 13.5px/1.5 "Instrument Sans",system-ui,sans-serif;color:var(--ink2)}
.brand-cats a:hover{color:var(--ink)}
.brand-cats .n{color:var(--ink3);font-variant-numeric:tabular-nums;margin-left:.3em}

/* Cifras de la casa: the house in numbers on the brand hub. A stat strip in the
   record's type, then the model lines with the most pieces as small photographed
   cards on the paper colour, then the category split as one line. */
.cifras{margin:var(--s4) 0 0;padding:var(--s3) 0 var(--s3);border-top:1px solid #E4DDD3}
.cifras-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:var(--s3)}
.cifras-head h2{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6B655E;margin:0}
.cifras-meta{font:400 12px/1 "Instrument Sans",system-ui,sans-serif;color:#6B655E}
.cifras-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s4)}
@media (min-width:640px){.cifras-strip{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.cifras-strip{grid-template-columns:repeat(6,auto);justify-content:start;gap:var(--s3) var(--s6)}}
.cifras .stat{display:grid;gap:6px}
.cifras .stat .v{font:500 26px/1.1 "EB Garamond",Georgia,serif;color:#1C1A17;font-variant-numeric:tabular-nums;white-space:nowrap}
.cifras .stat .k{font:400 12.5px/1.3 "Instrument Sans",system-ui,sans-serif;color:#6B655E}
.cifras-models{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
@media (min-width:768px){.cifras-models{grid-template-columns:repeat(6,1fr);gap:var(--s3)}}
.cm{display:grid;gap:4px;text-decoration:none;color:inherit}
.cm-ph{display:block;aspect-ratio:1/1;background:#F7F3EE;overflow:hidden}
.cm-ph img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .35s ease}
.cm:hover .cm-ph img{transform:scale(1.03)}
.cm-name{margin-top:6px;font:400 16px/1.25 "EB Garamond",Georgia,serif;color:#1C1A17}
.cm-meta{font:400 12px/1.3 "Instrument Sans",system-ui,sans-serif;color:#6B655E;font-variant-numeric:tabular-nums}
.cifras-line{display:flex;flex-wrap:wrap;gap:6px 18px;margin:var(--s3) 0 0;font:400 13px/1.5 "Instrument Sans",system-ui,sans-serif;color:#4A4642}
.cifras-line .n{color:#6B655E;font-variant-numeric:tabular-nums}
.cifras-line .links{margin-left:auto}
.cifras-line a{color:#8A5A3C;text-decoration:none}
.cifras-line a:hover{text-decoration:underline}

/* The record table (/precios/, /precios/salida/). Lived only in site.css, which no
   page loads, so these tables rendered as browser defaults from the day they shipped. */
.record{width:100%;border-collapse:collapse;font-size:15px;margin:1rem 0 0}
.record th,.record td{text-align:left;padding:.6rem .75rem .6rem 0;border-bottom:1px solid #E4DDD3}
.record th{font:500 11px/1.4 "Instrument Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6B655E}
.record td{font-variant-numeric:tabular-nums}
.record td.num,.record th.num{text-align:right;padding-right:0}
.record a{color:#1C1A17;text-decoration:none}
.record a:hover{color:#8A5A3C}
.record caption{text-align:left;color:#6B655E;font-size:13px;padding-bottom:.6rem}

/* Blog: list cards on the tile frame, the post as a reading column. */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3);margin-top:var(--s4)}
@media (min-width:768px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{display:grid;gap:6px;text-decoration:none;color:inherit}
.post-ph{display:block;aspect-ratio:4/3;background:#F7F3EE;overflow:hidden}
.post-ph img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.post-meta{margin-top:8px;font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6B655E}
.post-title{font:400 20px/1.25 "EB Garamond",Georgia,serif;color:#1C1A17}
.post-dek{font:400 14px/1.5 "Instrument Sans",system-ui,sans-serif;color:#4A4642}
.post{padding-top:2rem;max-width:720px}
.post-head h1{max-width:20ch}
.post-lede{font:400 clamp(17px,1.9vw,20px)/1.5 "EB Garamond",Georgia,serif;color:#4A4642;margin:.75rem 0 0}
.post-byline{font:400 12.5px/1.4 "Instrument Sans",system-ui,sans-serif;color:#6B655E;margin:1rem 0 0}
.post-hero{margin:var(--s4) 0 0;background:#F7F3EE}
.post-hero img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.post-hero figcaption{font:400 12px/1.4 "Instrument Sans",system-ui,sans-serif;color:#6B655E;padding:.5rem 0}
.post-body{margin-top:var(--s4);max-width:none}
.post-body table{width:100%;border-collapse:collapse;font-size:15px;margin:1rem 0 1.5rem}
.post-body th,.post-body td{text-align:left;padding:.5rem .75rem .5rem 0;border-bottom:1px solid #E4DDD3;font-variant-numeric:tabular-nums}
.post-body th{font:500 11px/1.4 "Instrument Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6B655E}
.post-data{margin-top:var(--s4);padding:var(--s3) 0;border-top:1px solid #E4DDD3;border-bottom:1px solid #E4DDD3;font:400 14px/1.6 "Instrument Sans",system-ui,sans-serif;color:#4A4642}
.post-data a{color:#8A5A3C}
.post-related{margin:var(--s4) 0 var(--s6)}
.post-related h2{font-size:20px;margin:0 0 .5rem}
.post-related ul{list-style:none;padding:0;margin:0}
.post-related li{padding:.4rem 0;border-bottom:1px solid #E4DDD3}
.post-related a{color:#1C1A17;text-decoration:none}
.post-related a:hover{color:#8A5A3C}
/* The house essay under the figures on the brand hub. */
.house-essay{margin:var(--s4) 0 0;padding:var(--s3) 0;border-top:1px solid #E4DDD3}
.house-essay-h{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6B655E;margin:0 0 var(--s3)}
.house-essay-body{columns:1}
@media (min-width:900px){.house-essay-body{columns:2;column-gap:var(--s5);max-width:none}}
.house-essay-body p:first-child{margin-top:0}


/* ===== v2 brand system (deck, 22 Sep 2026). One accent per screen: vachetta on the
   action, brass on the ornament. No pure black anywhere. ===== */
:root{--brass:#B08D57;--glass:rgba(252,250,247,.62);--radius:8px}

/* Buttons: vachetta primary, hairline secondary, glass on photographs. The black
   rectangle is retired everywhere, including the filter bar. */
.btn{background:#8A5A3C;color:#F7F3EE;border:1px solid #8A5A3C;border-radius:var(--radius);
  padding:15px 22px;font:500 14px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.02em;
  gap:10px;transition:transform .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease}
.btn:hover{background:#6E4730;border-color:#6E4730;transform:translateY(-1px);box-shadow:0 8px 24px rgba(110,71,48,.18)}
.btn .ic-btn{width:16px;height:16px}
.btn-ghost{background:transparent;color:#1C1A17;border-color:#1C1A17}
.btn-ghost:hover{background:#1C1A17;color:#F7F3EE;border-color:#1C1A17;box-shadow:none;transform:none}
.btn-glass{background:var(--glass);color:#1C1A17;border-color:rgba(28,26,23,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(252,250,247,.86);color:#1C1A17;transform:none;box-shadow:none}
.btn--off,.btn--off:hover{background:#EFE9E1;border-color:#EFE9E1;color:#6B655E;transform:none;box-shadow:none}
.filters button{background:transparent;color:#1C1A17;border:1px solid #1C1A17;border-radius:var(--radius);font-weight:500}
.filters button:hover{background:#1C1A17;color:#F7F3EE}
.ksearch-go{background:#8A5A3C;border-radius:6px}.ksearch-go:hover{background:#6E4730}
.ksearch-mic.kove-mic-on{background:#8A5A3C}

/* Rules: a hairline with a brass diamond. */
.rule{display:flex;align-items:center;gap:14px;margin:6px 0}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:#E4DDD3}
.rule i{width:7px;height:7px;background:var(--brass);transform:rotate(45deg);display:block}
.rule--short::before,.rule--short::after{flex:0 0 56px}
.folio .n{color:var(--brass)}
.rule-double{border-top-color:#D9CBB4}

/* Icons: thin line, brass, in a hairline circle. */
.ic-ring{width:34px;height:34px;border:1px solid rgba(28,26,23,.22);border-radius:50%;display:grid;place-items:center;
  color:var(--brass);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);flex:0 0 auto}
.ic-ring .ic{width:17px;height:17px}
.certeza .ic{color:var(--brass);width:22px;height:22px}
.certeza .row > div{padding-top:2px}
.certeza .row > div::before{content:"";display:block;width:48px;height:48px;border:1px solid #E4DDD3;border-radius:50%;
  margin-bottom:-36px;background:#FCFAF7}
.certeza .row > div .ic{position:relative;left:13px;top:-1px}

/* Hero v2: text left over a paper fade, figure right, three glass parts. */
.hero--v2{background:#E9E0D3}
.hero--v2 img.bg{object-position:72% 40%}
.hero--v2 .scrim{display:none}
.hero--v2 .fade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(247,243,238,.94) 0%,rgba(247,243,238,.74) 30%,rgba(247,243,238,0) 58%)}
.hero--v2 .inner{position:relative;z-index:2;display:grid;gap:40px;padding:clamp(56px,8vw,120px) var(--gutter) clamp(28px,4vw,48px)}
.hero--v2 .copy{display:grid;gap:16px;max-width:min(46%,560px)}
.hero--v2 .eyebrow{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6B655E;margin:0}
.hero--v2 h1{font:500 clamp(40px,5.6vw,84px)/1.02 "EB Garamond",Georgia,serif;color:#1C1A17;letter-spacing:-.005em;margin:0;max-width:none}
.hero--v2 h1 em{font-style:normal;color:#8A5A3C}
.hero--v2 .sub{font:400 clamp(16px,1.4vw,19px)/1.45 "EB Garamond",Georgia,serif;color:#4A4642;max-width:36ch;margin:0}
.hero--v2 .acts{margin-top:8px}
.hero--v2 .parts{display:flex;flex-wrap:wrap;gap:12px 28px;max-width:46%}
.hero--v2 .parts > div{display:flex;gap:10px;align-items:center}
.hero--v2 .parts b{display:block;font:500 11px/1.2 "Instrument Sans",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#1C1A17}
.hero--v2 .parts small{color:#6B655E;font:400 12px/1.3 "Instrument Sans",system-ui,sans-serif}
@media(max-width:767px){
  .hero--v2 img.bg{object-position:50% 100%}
  .hero--v2 .fade{background:linear-gradient(180deg,rgba(247,243,238,.96) 0%,rgba(247,243,238,.8) 34%,rgba(247,243,238,0) 60%)}
  .hero--v2 .inner{min-height:640px;padding-top:40px;align-content:start}
  .hero--v2 .copy,.hero--v2 .parts{max-width:none}
  .hero--v2 .parts{flex-direction:column;gap:10px;margin-top:230px}
}
.search-band{border-bottom:1px solid #E4DDD3;background:#FCFAF7}
.search-band .wrap{padding:22px var(--gutter);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.search-band .ksearch{flex:1 1 420px;margin:0}
.search-band .count{font:400 13px/1 "Instrument Sans",system-ui,sans-serif;color:#6B655E;margin:0;white-space:nowrap}

/* Category cards: 4:5, glass label bar, live counts. */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px)}
@media(max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}}
.cat{position:relative;display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#EFE9E1;text-decoration:none;color:#1C1A17;transition:transform .25s ease,box-shadow .25s ease}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cat.head img{object-position:center top}
.cat:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,26,23,.14)}.cat:hover img{transform:scale(1.04)}
.cat .glass{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.55);border-radius:9px}
.cat .glass b{display:block;font:500 17px/1.1 "EB Garamond",Georgia,serif}.cat .glass small{display:block;color:#6B655E;font:400 12px/1.3 "Instrument Sans",system-ui,sans-serif;margin-top:3px}
.cat .glass .ic{width:18px;height:18px;color:#1C1A17}

/* Bundles: look with hotspots, tiles, one house button. */
.bundles{display:grid;gap:clamp(20px,3vw,36px)}
.bundle{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,3vw,40px);align-items:start;
  padding:clamp(18px,2.5vw,32px);background:#FCFAF7;border:1px solid #E4DDD3;border-radius:14px}
@media(max-width:820px){.bundle{grid-template-columns:1fr}}
.look{position:relative;border-radius:10px;overflow:hidden;background:#EFE9E1;aspect-ratio:2/3}
.look > img{width:100%;height:100%;object-fit:cover;display:block}
.look .note{position:absolute;left:10px;bottom:10px;font:500 10.5px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#4A4642;
  background:var(--glass);backdrop-filter:blur(8px);padding:7px 9px;border-radius:6px;transition:opacity .2s ease}
.look-pending{display:grid;place-items:center;height:100%;color:#6B655E;font:500 12px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.hot{position:absolute;display:block;border-radius:10px;color:#1C1A17;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,opacity .25s ease}
.hot i{position:absolute;right:-6px;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--brass);
  box-shadow:0 0 0 3px rgba(252,250,247,.9),0 0 0 8px rgba(176,141,87,.25);transition:transform .25s ease}
.hot:hover,.hot.on{transform:translate(4px,-6px);box-shadow:0 0 0 1.5px var(--brass),0 18px 34px rgba(28,26,23,.22);background:rgba(252,250,247,.14);z-index:5}
.hot:hover i,.hot.on i{transform:scale(1.25)}
.hot .pop{position:absolute;left:0;bottom:calc(100% + 10px);width:150px;display:grid;gap:4px;padding:8px;background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);border-radius:10px;opacity:0;transform:translateY(6px);
  transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.hot.flip .pop{left:auto;right:0}.hot.below .pop{bottom:auto;top:calc(100% + 10px);transform:translateY(-6px)}
.hot:hover .pop,.hot.on .pop{opacity:1;transform:translateY(0)}
.hot .pop img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;mix-blend-mode:multiply;display:block}
.hot .pop b{font:400 13.5px/1.2 "EB Garamond",Georgia,serif}.hot .pop small{font:400 11px/1.3 "Instrument Sans",system-ui,sans-serif;color:#6B655E;font-variant-numeric:tabular-nums}
.look:has(.hot:hover) .hot:not(:hover){opacity:.35}.look:has(.hot:hover) .note{opacity:0}
.bundle .set{display:grid;gap:14px}
.bundle .set .eyebrow{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6B655E;margin:0}
.bundle h3{font:500 clamp(22px,2.2vw,28px)/1.2 "EB Garamond",Georgia,serif;color:#1C1A17;margin:0}
.bundle .dek{font:400 18px/1.45 "EB Garamond",Georgia,serif;color:#4A4642;margin:0}
.bundle .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;margin-top:6px}
.tile-s{display:grid;gap:4px;text-decoration:none;color:#1C1A17;transition:transform .22s ease}
.tile-s .ph{display:block;aspect-ratio:4/5;background:#F1EBE3;border-radius:8px;overflow:hidden;transition:box-shadow .22s ease}
.tile-s .ph img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;display:block;transition:transform .35s ease}
.tile-s:hover,.tile-s.on{transform:translateY(-6px) scale(1.04)}.tile-s:hover .ph,.tile-s.on .ph{box-shadow:0 16px 30px rgba(28,26,23,.16)}.tile-s:hover .ph img{transform:scale(1.05)}
.tile-s .house{margin-top:6px;font:500 10.5px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6B655E}
.tile-s .name{font:400 15px/1.25 "EB Garamond",Georgia,serif}.tile-s .line{font:400 12.5px/1.3 "Instrument Sans",system-ui,sans-serif;color:#6B655E;font-variant-numeric:tabular-nums}.tile-s .line b{color:#1C1A17;font-weight:500}
.bundle .set .btn{justify-self:start}
@media(max-width:820px){.hot .pop{display:none}}
@media(prefers-reduced-motion:reduce){.hot,.cat,.tile-s,.btn{transition:none}}

/* v2.1 hero framing. Desktop: the band is tall enough to hold the 3:2 photograph, so
   the head is never cropped at the header. Phone: no overlay at all; the copy sits on
   paper and the whole portrait follows it. */
.hero--v2 img.bg{object-position:72% 0}
.hero--v2 .inner{min-height:clamp(560px,64vw,940px);grid-template-rows:1fr auto;align-items:center}
.hero--v2 .parts{align-self:end}
@media(max-width:767px){
  .hero--v2{display:flex;flex-direction:column;background:#F7F3EE}
  .hero--v2 picture{order:2;position:relative;inset:auto;display:block;width:100%;aspect-ratio:2/3;z-index:0}
  .hero--v2 picture img.bg{object-position:50% 50%}
  .hero--v2 .fade{display:none}
  .hero--v2 .inner{order:1;min-height:0;padding:36px var(--gutter) 24px;grid-template-rows:auto auto;gap:22px}
  .hero--v2 .parts{margin-top:0;flex-direction:row;flex-wrap:wrap;gap:10px 18px}
  .hero--v2 .parts small{display:none}
}

/* v2.2: the base .hero rule fixes its height and clips the parts row; the v2 band sizes itself. */
.hero--v2{height:auto;min-height:0;max-height:none}

/* v2.3 phone hero: in-flow portrait after the copy; the absolute picture is hidden. */
.hero--v2 .shot-m{display:none}
@media(max-width:767px){
  .hero--v2{display:block}
  .hero--v2 picture{display:none}
  .hero--v2 .fade{display:none}
  .hero--v2 .inner{position:relative;min-height:0;padding:36px var(--gutter) 22px;display:grid;grid-template-rows:auto auto;gap:22px}
  .hero--v2 .copy,.hero--v2 .parts{max-width:none}
  .hero--v2 .parts{margin-top:0;flex-direction:row;flex-wrap:wrap;gap:10px 18px}
  .hero--v2 .parts small{display:none}
  .hero--v2 .shot-m{display:block;width:100%;height:auto;position:relative;z-index:0}
}

/* v2.4 phone portrait: 4:5 crop from the bottom keeps the head with room and drops the empty wall. */
@media(max-width:767px){.hero--v2 .shot-m{aspect-ratio:4/5;object-fit:cover;object-position:50% 100%}}

/* v2.5 piece + brand pages */
.shot-main{position:relative;display:block}
.price-pill{position:absolute;left:14px;bottom:14px;display:grid;gap:2px;padding:10px 14px;background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6);border-radius:9px;color:#1C1A17}
.price-pill b{font:500 20px/1 "EB Garamond",Georgia,serif;font-variant-numeric:tabular-nums}
.price-pill small{font:400 11px/1.2 "Instrument Sans",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#4A4642}
.cifras-pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid #1C1A17;border-radius:999px;font:500 12px/1 "Instrument Sans",system-ui,sans-serif;
  color:#1C1A17;text-decoration:none;transition:background .2s ease,color .2s ease}
.pill:hover{background:#1C1A17;color:#F7F3EE;text-decoration:none}
.pill-glass{border-color:rgba(28,26,23,.14);background:var(--glass)}.pill-glass:hover{background:#1C1A17}
.cifras{border-top:0}.cifras-head::before{content:"";display:block}
.cifras{position:relative}.cifras::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#E4DDD3}
.cifras::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;background:var(--brass);transform:translateX(-50%) rotate(45deg)}
.house-essay{position:relative;border-top:0}.house-essay::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#E4DDD3}
.house-essay::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;background:var(--brass);transform:translateX(-50%) rotate(45deg)}
.bundles-band + .wrap{padding-top:0}

/* v2.6 hero parts: bigger rings, icons and type. */
.hero--v2 .parts{gap:16px 40px}
.hero--v2 .parts > div{gap:14px}
.hero--v2 .parts .ic-ring{width:52px;height:52px}
.hero--v2 .parts .ic-ring .ic{width:24px;height:24px}
.hero--v2 .parts b{font-size:13px;letter-spacing:.12em}
.hero--v2 .parts small{font-size:14px}
@media(max-width:767px){.hero--v2 .parts .ic-ring{width:44px;height:44px}.hero--v2 .parts .ic-ring .ic{width:20px;height:20px}.hero--v2 .parts small{display:block}}

/* v2.7 one hero picture: pinned under the copy on wide screens, in flow after it on phones. */
.hero--v2 picture.shot{position:absolute;inset:0;z-index:0;display:block}
.hero--v2 picture.shot img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 0}
@media(max-width:767px){
  .hero--v2 picture.shot{display:block;position:relative;inset:auto;width:100%;aspect-ratio:4/5}
  .hero--v2 picture.shot img.bg{position:absolute;inset:0;object-position:50% 100%}
}

/* v2.8 phone hero: copy OVER the photograph. The band is the screen height, the portrait
   fills it anchored to the bottom so the head sits below the copy; a paper fade plus a
   light glass panel keep the text readable; the three parts sit on a glass band. */
@media(max-width:767px){
  .hero--v2{display:grid;position:relative;min-height:clamp(640px,100svh,820px);background:#E9E0D3}
  .hero--v2 picture.shot{position:absolute;inset:0;aspect-ratio:auto;width:100%;height:100%;z-index:0}
  .hero--v2 picture.shot img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
  .hero--v2 .fade{display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(247,243,238,.9) 0%,rgba(247,243,238,.55) 30%,rgba(247,243,238,0) 46%)}
  .hero--v2 .inner{position:relative;z-index:2;display:grid;grid-template-rows:auto 1fr auto;align-content:stretch;min-height:100%;padding:22px var(--gutter) 16px;gap:0}
  .hero--v2 .copy{max-width:none;gap:12px;padding:16px 16px 18px;background:rgba(252,250,247,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.55);border-radius:12px}
  .hero--v2 h1{font-size:40px}
  .hero--v2 .sub{font-size:15px}
  .hero--v2 .acts .btn{width:auto}
  .hero--v2 .parts{grid-row:3;align-self:end;max-width:none;margin-top:0;flex-direction:row;flex-wrap:wrap;gap:8px 16px;padding:10px 12px;background:rgba(252,250,247,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.55);border-radius:12px}
  .hero--v2 .parts .ic-ring{width:36px;height:36px;background:transparent;backdrop-filter:none}
  .hero--v2 .parts .ic-ring .ic{width:17px;height:17px}
  .hero--v2 .parts b{font-size:11px}
  .hero--v2 .parts small{display:none}
}

/* v2.9 phone hero: the panel ends above the hairline. Taller band (the portrait scales
   up, so the head sits lower) and a compact copy block. */
@media(max-width:767px){
  .hero--v2{min-height:clamp(700px,100svh,920px)}
  .hero--v2 .copy{gap:10px;padding:14px 14px 16px}
  .hero--v2 .copy .eyebrow,.hero--v2 .copy .rule{display:none}
  .hero--v2 h1{font-size:36px;line-height:1.04}
  .hero--v2 .sub{font-size:14.5px;line-height:1.4}
  .hero--v2 .acts{margin-top:2px}
  .hero--v2 .acts .btn{padding:12px 18px}
  .hero--v2 .inner{padding-top:16px}
}

/* v3.0 tap, cards, marks, square */
/* Phones: the preview card shows on tap (the .on class), inside the look, never off-screen. */
@media(max-width:820px){
  .hot .pop{display:grid;width:min(170px,44vw)}
  .hot.on .pop{opacity:1;transform:translateY(0)}
  .hot:hover:not(.on) .pop{opacity:0}
}
/* Category cards: as many columns as there are cards, two on phones. */
.cats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}}
/* House marks: one size, one weight, one colour, caps tracked like a wordmark. Counts sit
   under the mark. (These are typographic marks, not the houses' own logotypes.) */
.houses{gap:0;justify-content:center;border-bottom:1px solid #E4DDD3}
.houses a{flex:1 1 150px;max-width:220px;display:grid;justify-items:center;gap:6px;padding:18px 8px 16px;border-right:1px solid #E4DDD3;text-decoration:none}
.houses a:last-child{border-right:0}
.houses .h{font:500 15px/1 "EB Garamond",Georgia,serif;letter-spacing:.22em;text-transform:uppercase;color:#1C1A17;white-space:nowrap}
.houses .n{font:400 11.5px/1 "Instrument Sans",system-ui,sans-serif;color:#6B655E;font-variant-numeric:tabular-nums}
.houses a:hover .h{text-decoration:none;color:#8A5A3C}
/* Piece photographs: square frames, the object fills them. */
.tile .ph,.ph{aspect-ratio:1/1}
.tile .ph img,.ph img{object-fit:cover}
.card-grid .tile--feature .ph{aspect-ratio:1/1;height:auto}


/* ---- checkout / order page (orders app) ---- */
.checkout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;max-width:1080px;margin:32px auto 64px;padding:0 16px}
.checkout__piece img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius,8px);background:var(--paper-2,#f3efe8)}
.checkout__piece h1{font-size:1.5rem;margin:6px 0 4px}
.checkout .price-line{font-size:1.25rem;margin:10px 0 0}
.checkout .price-line small{display:block;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3,#7a736b);margin-top:2px}
.plans{display:grid;gap:14px}
.plans__set{display:grid;gap:14px;min-width:0;margin:0;padding:0;border:0}
.plan{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--hairline,rgba(0,0,0,.14));border-radius:var(--radius,8px);padding:16px 18px;background:var(--paper,#fbf9f5);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.plan:has(input:checked){border-color:var(--brass,#a8843c);box-shadow:0 0 0 1px var(--brass,#a8843c) inset}
.plan input{margin-top:5px;accent-color:var(--brass,#a8843c)}
.plan__body{display:grid;gap:4px}
.plan__amt{font-size:1.05rem}
.plan__terms{font-size:.9rem;color:var(--ink-2,#4b4640);line-height:1.45}
.plan__list{margin:12px 0 0 18px;line-height:1.5}
.plans--soon{border:1px solid var(--hairline,rgba(0,0,0,.14));border-radius:var(--radius,8px);padding:16px 18px}
.field{display:grid;gap:6px;font-size:.9rem}
.field input{border:1px solid var(--hairline,rgba(0,0,0,.2));border-radius:var(--radius,8px);padding:10px 12px;font:inherit;background:#fff}
.tick{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.45;color:var(--ink-2,#4b4640)}
.tick input{margin-top:4px;accent-color:var(--brass,#a8843c)}
.plans .btn{justify-self:start;margin-top:4px}
.fine{font-size:.8rem;color:var(--ink-3,#7a736b);margin:0}
.ask{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline,rgba(0,0,0,.14))}
.ask .inline{display:inline}
.order__state{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0 0 18px}
.order__state dt{color:var(--ink-3,#7a736b);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;padding-top:2px}
.order__state dd{margin:0;line-height:1.45}
.ok{background:var(--paper-2,#f3efe8);border-left:3px solid var(--brass,#a8843c);padding:10px 14px;border-radius:0 var(--radius,8px) var(--radius,8px) 0}
.cta .btn--wa{margin-top:6px}
@media (max-width:760px){.checkout{grid-template-columns:1fr;gap:24px;margin-top:16px}.checkout__piece img{max-width:360px}}


/* v3.1 (22 Sep, Adam's phone review): logos in the house row, swipeable bundles rail,
   swipeable category cards on phones, the phone hero with the head clear of the panel. */

/* House row: the houses' own wordmarks at one height, count underneath. */
.houses .logo{display:block;height:20px;width:auto;max-width:150px;object-fit:contain}
.houses a{gap:9px;padding:20px 10px 16px}
@media(max-width:767px){.houses .logo{height:15px;max-width:120px}.houses a{flex:1 1 42%;max-width:none;padding:16px 6px 12px}}

/* Category cards: on phones a horizontal rail, one and a bit cards per view, snap. */
@media(max-width:900px){
  .cats{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:4px var(--gutter) 10px;margin:0 calc(-1 * var(--gutter));scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cats::-webkit-scrollbar{display:none}
  .cats .cat{flex:0 0 68%;scroll-snap-align:start}
}

/* Conjuntos: a rail of cards. Phones swipe one card at a time; desktop shows two or three
   with arrows. Each card stacks the look over its tiles so the rail stays one height. */
.bundles-rail{position:relative}
.bundles{display:flex;grid-template-columns:none;gap:clamp(14px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding:0 var(--gutter);padding:6px var(--gutter) 14px;margin:0 calc(-1 * var(--gutter));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bundles::-webkit-scrollbar{display:none}
.bundle{flex:0 0 min(420px,calc(50% - 12px));scroll-snap-align:start;grid-template-columns:1fr;gap:16px;align-content:start;padding:clamp(14px,1.6vw,20px)}
@media(min-width:1180px){.bundle{flex-basis:calc(33.333% - 16px)}}
@media(max-width:820px){.bundle{flex-basis:86%;grid-template-columns:1fr}}
.bundle .tiles{grid-template-columns:repeat(3,1fr);gap:10px}
.bundle .tiles .tile-s:nth-child(n+7){display:none}
.bundle .tile-s .name{font-size:14px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bundle h3{font-size:clamp(20px,1.8vw,24px)}
.bundle .dek{font-size:16px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bundle .look{aspect-ratio:2/3}
.rail-btn{position:absolute;top:calc(50% - 24px);z-index:6;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(28,26,23,.14);
  display:grid;place-items:center;cursor:pointer;color:#1C1A17;transition:background .2s ease,transform .2s ease}
.rail-btn:hover{background:#1C1A17;color:#F7F3EE;transform:scale(1.04)}
.rail-btn.prev{left:calc(-1 * var(--gutter) + 6px)}.rail-btn.next{right:calc(-1 * var(--gutter) + 6px)}
.rail-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.rail-btn[disabled]{opacity:.35;cursor:default;transform:none}
@media(max-width:820px){.rail-btn{display:none}}
.rail-dots{display:flex;justify-content:center;gap:6px;margin-top:2px}
.rail-dots i{width:6px;height:6px;border-radius:50%;background:#D8CFC2;transition:background .2s ease,transform .2s ease}
.rail-dots i.on{background:var(--brass);transform:scale(1.25)}
.rail-hint{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6B655E;text-align:center;margin:8px 0 0}
@media(min-width:821px){.rail-hint{display:none}}

/* Phone hero: the portrait starts below the copy panel and is anchored to its own top, so the
   whole head is always under the panel's lower edge; the crop moves to the feet instead. */
@media(max-width:767px){
  .hero--v2 picture.shot{inset:max(38%,268px) 0 0 0;height:auto}
  .hero--v2 picture.shot img.bg{object-position:50% 0}
  .hero--v2 .fade{background:linear-gradient(180deg,rgba(247,243,238,.92) 0%,rgba(247,243,238,.6) 36%,rgba(247,243,238,0) 50%)}
}

/* Catalogue stats: two cells now. */
.proof{grid-template-columns:repeat(2,1fr)}

/* v3.1b tiles in one row whatever the count; the phone portrait is pre-cropped (hero-v2-p2). */
.bundle .tiles{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}
@media(max-width:767px){.hero--v2 picture.shot{inset:max(36%,256px) 0 0 0}}


/* ---- staff order board (orders app) ---- */
.staff h1{font-size:1.4rem;margin:4px 0 6px}
.staff-h{font:500 12px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6B655E;margin:28px 0 10px;padding-top:12px;border-top:1px solid #E4DDD3}
.staff-h small{color:var(--brass);margin-left:6px}
.staff-alert{background:#FFF6E8;border:1px solid #E9C98F;border-radius:10px;padding:12px 16px;margin:10px 0 6px}
.staff-alert ul{margin:6px 0 0 18px}
.staff-t{width:100%;border-collapse:collapse;font-size:14px}
.staff-t th{text-align:left;font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6B655E;padding:6px 8px;border-bottom:1px solid #E4DDD3}
.staff-t td{padding:10px 8px;border-bottom:1px solid #EFE9E1;vertical-align:top}
.staff-t small,.staff-dl small{color:#6B655E}
.staff-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px}
@media(max-width:820px){.staff-grid{grid-template-columns:1fr}}
.staff-img{width:160px;height:160px;object-fit:cover;border-radius:8px;background:#F1EBE3;margin:6px 0}
.staff-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14px}
.staff-dl dt{color:#6B655E}.staff-dl dd{margin:0}
.staff-acts{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 6px}
.staff-links{display:grid;gap:6px;margin-top:8px}.staff-links small{color:#6B655E;margin:-2px 0 6px}
.staff-step{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 0;border-bottom:1px dashed #E4DDD3;font-size:14px}
.staff-step label{display:inline-flex;flex-direction:column;gap:3px;font-size:12px;color:#6B655E}
.staff-step input,.staff-step textarea{border:1px solid rgba(28,26,23,.2);border-radius:6px;padding:7px 9px;font:inherit;font-size:14px;background:#fff;min-width:160px}
.staff-step textarea{min-width:260px}
.staff-step small{color:#6B655E}
.staff-msg{padding:8px 12px;border-radius:8px;background:#F3EFE8;border-left:3px solid var(--brass)}
.staff-msg.error{border-left-color:#B5473A}
.staff-notes{white-space:pre-wrap;font:13px/1.5 "Instrument Sans",system-ui,sans-serif;background:#F7F3EE;padding:10px 12px;border-radius:8px}
.inline{display:inline}