/* ==========================================================================
   ANARA LIVING — SHARED DESIGN SYSTEM STYLESHEET
   Source of truth: anara-visual-direction-framework.md (this project).
   Shared across Home, Collection, Collection Family, and Product Detail pages
   so every page renders from one set of tokens/components — per the "do not
   redesign the approved system" instruction.
   ========================================================================== */

:root{
  --paper:#FBF7EF;
  --ivory:#EFE3D0;
  --ivory-deep:#E6D7BE;
  --linen:#DCCBB4;
  --taupe:#A99680;
  --ink:#2B2620;
  --indigo:#232D42;
  --indigo-deep:#171E30;
  --gold:#AD8138;
  --gold-light:#C6A45E;
  --terracotta:#8E5A3F;
  --peacock:#3E5E69;
  --rose:#B78F89;
  --sage:#7E8070;

  --f-display:'Playfair Display', serif;
  --f-voice:'Cormorant Garamond', serif;
  --f-body:'Jost', sans-serif;
  --f-mono:'JetBrains Mono', monospace;

  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-24:24px;
  --s-32:32px; --s-48:48px; --s-64:64px; --s-96:96px; --s-128:128px;

  --radius:2px;
  --shadow-soft:0 20px 50px rgba(35,29,20,0.12);
  --container:1280px;
  --nav-rail:1400px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s-48);}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;color:var(--indigo);line-height:1.15;}
h1{font-size:56px;}
h2{font-size:34px;}
h3{font-size:24px;}
h4{font-size:18px;}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);}
.eyebrow.on-dark{color:var(--gold-light);}
.voice{font-family:var(--f-voice);font-style:italic;color:var(--indigo);}

section{padding:var(--s-96) 0;}
section.tight{padding:var(--s-64) 0;}
.section-head{max-width:640px;margin-bottom:var(--s-48);}
.section-head h2{margin-top:var(--s-8);}
.section-foot{margin-top:var(--s-48);}

.on-dark{background:var(--indigo-deep);color:var(--paper);}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--paper);}
.on-ivory{background:var(--ivory);}
.on-ivory-deep{background:var(--ivory-deep);}

/* ============ BUTTONS — framework §06 ============ */
.btn{display:inline-flex;align-items:center;gap:var(--s-8);font-family:var(--f-body);font-weight:500;font-size:13px;letter-spacing:2.2px;text-transform:uppercase;padding:16px 32px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:background .3s ease,color .3s ease,border-color .3s ease;}
.btn-gold{background:var(--gold);color:var(--paper);}
.btn-gold:hover{background:var(--gold-light);}
.btn-indigo{background:var(--indigo);color:var(--paper);}
.btn-indigo:hover{background:var(--ink);}
.btn-outline{background:transparent;color:var(--indigo);border-color:var(--indigo);}
.btn-outline:hover{background:var(--indigo);color:var(--paper);}
.btn-outline-ivory{background:transparent;color:var(--paper);border-color:var(--paper);}
.btn-outline-ivory:hover{background:var(--paper);color:var(--indigo-deep);}
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none;}

.quiet-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-body);font-weight:500;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);padding-bottom:2px;background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-size:0% 1px;background-position:left bottom;transition:background-size .25s ease;}
.quiet-link:hover{background-size:100% 1px;}
.on-dark .quiet-link{color:var(--gold-light);background-image:linear-gradient(var(--gold-light),var(--gold-light));}

/* ============ IMAGE TREATMENT — framework §05 ============ */
.media{border-radius:var(--radius);box-shadow:var(--shadow-soft);overflow:hidden;position:relative;background:var(--ivory-deep);}
.media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 700ms cubic-bezier(0.16,1,0.3,1);}
.media .reuse-tag{position:absolute;bottom:0;right:0;background:rgba(23,30,48,0.75);color:var(--linen);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;padding:5px 8px;}
.media.product{aspect-ratio:3/3.6;}
.media.editorial{aspect-ratio:4/3;}
.media.detail{aspect-ratio:1/1;border-radius:50%;}
.media.hero{aspect-ratio:16/8;box-shadow:none;border-radius:0;}
.media.gallery-main{aspect-ratio:1/1.1;}
.media.gallery-thumb{aspect-ratio:1/1;box-shadow:none;}
.angle-thumb{display:block;width:100%;padding:0;margin:0;border:2px solid transparent;cursor:pointer;font:inherit;-webkit-appearance:none;appearance:none;}
.angle-thumb:hover{border-color:var(--linen);}
.angle-thumb.is-active{border-color:var(--gold);}
.angle-thumb:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ============ MOTION — framework §11: product card image scales ~7%
   over 700ms ease-out on hover. Scoped to .card (Collection Family cards +
   Product cards, the "collection images" the grid/PDP-related pages use) —
   the framework specifies this exact interaction for product cards, so the
   same treatment is applied consistently everywhere .card appears rather
   than inventing a second hover language. .media's overflow:hidden above
   keeps the scaled image cropped to the card, not spilling over it. ============ */
.card:hover .media img{transform:scale(1.07);}
@media (prefers-reduced-motion:reduce){
  .media img{transition:none;}
}

.fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--ivory-deep);}
.fallback span{font-family:var(--f-mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--taupe);text-align:center;padding:10px 16px;border:1px dashed var(--taupe);}

/* Category-header hero media carries overlaid title text (framework §09) — the
   pending-photo label moves to a corner badge here so it never collides with
   the eyebrow/H1/context text sitting on top of the same image. */
.category-hero .fallback{align-items:flex-end;justify-content:flex-end;padding:var(--s-24);}
.category-hero .fallback span{background:rgba(251,247,239,0.75);border-color:var(--taupe);max-width:220px;}
@media (max-width:767px){ .category-hero .fallback{align-items:flex-start;} }

/* Text overlay for the Category Header banner (framework §09). Anchored to the
   TOP of the image rather than centered: the generated placeholder photography
   bakes its own name/label caption into the bottom-left corner of the image
   itself (see Images/manifest.md, this project) — top-anchoring the real,
   semantic H1 here keeps the two from reading as duplicate overlapping text.
   Real photography (no baked caption) will still read fine top-anchored. */
.hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;padding:var(--s-32) var(--s-48);}
/* The generated editorial photography is dark-toned by design (framework §05's
   indigo-gradient convention for legible overlaid type) — overlay text is set
   light throughout, matching the .on-dark treatment used elsewhere. */
.hero-overlay .eyebrow{color:var(--gold-light);}
.hero-overlay h1{color:var(--paper);}
.hero-overlay p{color:var(--linen);}
.hero-overlay .eyebrow, .hero-overlay h1, .hero-overlay p{text-shadow:0 2px 14px rgba(23,30,48,0.6);}
@media (max-width:767px){ .hero-overlay{padding:var(--s-24) var(--s-16);} }

.pending{display:inline-block;font-family:var(--f-mono);font-size:12px;letter-spacing:.5px;color:var(--taupe);border:1px dashed var(--taupe);padding:10px 16px;border-radius:var(--radius);background:rgba(169,150,128,0.06);}
.on-dark .pending{color:var(--linen);border-color:var(--linen);background:rgba(220,203,180,0.08);}

/* inline [VERIFY] token used inside spec rows / running copy */
.verify{font-family:var(--f-mono);font-size:12px;color:var(--taupe);letter-spacing:.3px;font-style:normal;}

/* ============ NAV — framework §08 ============ */
.announce{background:var(--indigo-deep);color:var(--linen);text-align:center;padding:9px var(--s-24);font-family:var(--f-mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;}
header.site{position:sticky;top:0;z-index:50;}
.navrow{max-width:var(--nav-rail);margin:0 auto;background:var(--paper);border-bottom:1px solid var(--linen);display:flex;align-items:center;justify-content:space-between;padding:var(--s-16) var(--s-24);}
.navrow .nav-links{display:flex;gap:var(--s-32);}
.navrow .nav-links a,.navrow .nav-utility a{font-family:var(--f-body);font-weight:500;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--indigo);position:relative;padding-bottom:4px;background-image:linear-gradient(var(--indigo),var(--indigo));background-repeat:no-repeat;background-size:0% 1px;background-position:left bottom;transition:background-size .25s ease;}
.navrow .nav-links a:hover,.navrow .nav-utility a:hover,.navrow .nav-links a.is-active{background-size:100% 1px;}
.wordmark{font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:2px;color:var(--indigo);border:1px solid var(--indigo);border-radius:var(--radius);padding:8px 22px;}
.nav-utility{display:flex;gap:var(--s-24);align-items:center;}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.hamburger span{width:22px;height:1.5px;background:var(--indigo);display:block;}
.mobile-panel{display:none;}

/* ============ BREADCRUMB ============ */
.breadcrumb{padding:var(--s-24) 0 0;}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--taupe);}
.breadcrumb li{display:flex;align-items:center;gap:8px;}
.breadcrumb a{color:var(--taupe);}
.breadcrumb a:hover{color:var(--gold);}
.breadcrumb li[aria-current]{color:var(--indigo);}
.breadcrumb li:not(:first-child)::before{content:"/";color:var(--linen);}

/* ============ GRIDS ============ */
.grid{display:grid;gap:var(--s-24);}
.g-hero{grid-template-columns:1fr;}
.g-4{grid-template-columns:repeat(4,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-2{grid-template-columns:repeat(2,1fr);}

/* ============ CARD (Collection Family / Product cards) — framework §07 ============ */
.card{display:flex;flex-direction:column;}
.card .media{margin-bottom:var(--s-16);}
.card h3{margin-bottom:var(--s-4);font-size:22px;}
.card .tag{font-family:var(--f-mono);font-size:11px;letter-spacing:1px;color:var(--taupe);text-transform:uppercase;margin-bottom:var(--s-8);display:block;}
.card p{font-size:14px;color:var(--ink);opacity:.85;margin-bottom:var(--s-12);max-width:34ch;}
.on-dark .card p{color:var(--linen);opacity:1;}
.card .swatches{display:flex;gap:6px;margin-bottom:var(--s-8);}
.card .swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(43,38,32,0.15);}
.card .badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s-12);}

/* Badge / tag chips — Terracotta token, per framework §01 "tags" role */
.chip{display:inline-block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--terracotta);border:1px solid rgba(142,90,63,0.4);padding:5px 10px;border-radius:var(--radius);background:rgba(142,90,63,0.06);}
.chip.material{color:var(--taupe);border-color:rgba(169,150,128,0.4);background:rgba(169,150,128,0.06);}

/* ============ PALETTE / BADGE STRIP (Collection Family header) ============ */
.at-a-glance{display:flex;flex-wrap:wrap;gap:var(--s-32);align-items:flex-start;margin:var(--s-32) 0;padding:var(--s-24) 0;border-top:1px solid var(--linen);border-bottom:1px solid var(--linen);}
.at-a-glance .block h4{font-family:var(--f-mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--taupe);font-weight:500;margin-bottom:var(--s-12);}
.palette-row{display:flex;gap:var(--s-16);flex-wrap:wrap;}
.palette-item{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;color:var(--ink);}
.palette-dot{width:18px;height:18px;border-radius:50%;border:1px solid rgba(43,38,32,0.15);flex-shrink:0;}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;max-width:640px;}

/* ============ FILTER CHIPS (Collection Family jump-nav) ============ */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s-48);}
.filter-chip{font-family:var(--f-body);font-weight:500;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--indigo);border:1px solid var(--indigo);border-radius:var(--radius);padding:9px 18px;background:transparent;cursor:pointer;transition:background .25s ease,color .25s ease;}
.filter-chip:hover,.filter-chip.is-active{background:var(--indigo);color:var(--paper);}

/* ============ SEGMENTED PRODUCT GRID ============ */
.segment{margin-bottom:var(--s-64);}
.segment-head{display:flex;align-items:baseline;gap:var(--s-16);margin-bottom:var(--s-24);padding-bottom:var(--s-12);border-bottom:1px solid var(--linen);}
.segment-head h3{margin:0;}
.segment-head .count{font-family:var(--f-mono);font-size:12px;color:var(--taupe);}

/* ============ PRODUCT DETAIL HERO ============ */
.pdp-hero{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-48);align-items:start;padding:var(--s-48) 0 var(--s-64);}
.pdp-hero.reverse{direction:rtl;}
.pdp-hero.reverse > *{direction:ltr;}
.gallery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-12);margin-top:var(--s-12);}
.pdp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-16);}
.pdp-story h1{margin-bottom:var(--s-16);}
.pdp-position{font-size:16px;color:var(--ink);opacity:.9;max-width:48ch;margin-bottom:var(--s-24);}
.variant-block{margin-bottom:var(--s-24);}
.variant-block h4{font-family:var(--f-mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--taupe);font-weight:500;margin-bottom:var(--s-12);}
.variant-pills{display:flex;flex-wrap:wrap;gap:8px;}
.variant-pill{font-family:var(--f-body);font-size:12.5px;letter-spacing:.6px;color:var(--indigo);border:1px solid var(--linen);border-radius:var(--radius);padding:9px 16px;background:var(--paper);cursor:pointer;transition:border-color .2s ease,background .2s ease;}
.variant-pill:hover{border-color:var(--indigo);}
.variant-pill.is-selected{border-color:var(--gold);background:rgba(173,129,56,0.08);color:var(--gold);}
.pdp-ctas{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-12);margin-bottom:var(--s-32);}
.pdp-divider{border:none;border-top:1px solid var(--linen);margin:var(--s-32) 0;}
.specs-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16) var(--s-24);margin-bottom:var(--s-24);}
.specs-list .spec dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--taupe);margin-bottom:4px;}
.specs-list .spec dd{font-size:14px;color:var(--ink);}
.specs-list .spec dd.pending-row{font-family:var(--f-mono);font-size:12px;color:var(--taupe);font-style:normal;}
.heritage-note{font-family:var(--f-voice);font-style:italic;font-size:19px;color:var(--indigo);border-left:2px solid var(--gold);padding-left:var(--s-16);margin-top:var(--s-24);max-width:52ch;}

/* ============ FEATURES LIST ============ */
.features-list{max-width:760px;}
.features-list li{display:flex;gap:var(--s-16);padding:var(--s-16) 0;border-bottom:1px solid var(--linen);font-size:15px;}
.features-list li:first-child{border-top:1px solid var(--linen);}
.features-list .mark{font-family:var(--f-mono);color:var(--gold);flex-shrink:0;}

/* ============ WHY ANARA — value strip ============ */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-32);}
.value-item .num{font-family:var(--f-mono);font-size:13px;color:var(--gold);letter-spacing:1.5px;display:block;margin-bottom:var(--s-12);}
.value-item h4{margin-bottom:var(--s-8);}
.value-item p{font-size:14px;opacity:.9;max-width:30ch;}

/* ============ HERITAGE / EXCERPT ============ */
.excerpt{font-family:var(--f-voice);font-style:italic;font-size:22px;line-height:1.55;color:var(--paper);max-width:56ch;}

/* ============ CLOSING / FINAL CTA ============ */
.closing{text-align:center;}
.closing h2{max-width:20ch;margin:0 auto var(--s-32);}
.closing .actions{display:flex;gap:var(--s-16);justify-content:center;}
.final-cta{text-align:center;padding:var(--s-64) 0;border-top:1px solid var(--linen);}
.final-cta h3{margin-bottom:var(--s-24);}

/* ============ FOOTER ============ */
footer{background:var(--indigo-deep);color:var(--linen);padding:var(--s-96) 0 var(--s-48);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-32);margin-bottom:var(--s-64);}
.foot-col h4{color:var(--paper);font-family:var(--f-mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;margin-bottom:var(--s-16);}
.foot-col ul li{margin-bottom:var(--s-12);}
.foot-col ul a{font-size:14px;color:var(--linen);opacity:.9;}
.foot-col ul a:hover{opacity:1;color:var(--paper);}
.foot-brand p{font-size:14px;opacity:.85;max-width:34ch;margin-top:var(--s-12);}
.foot-bottom{border-top:1px solid rgba(220,203,180,0.2);padding-top:var(--s-24);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-12);font-family:var(--f-mono);font-size:11px;letter-spacing:.5px;color:var(--taupe);}

/* ============ SCROLL REVEAL — framework §11 ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease-out,transform .6s ease-out;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ============================================================
   TABLET — ~768px. Framework's own tablet spec cites a 944px
   container, which can't fit inside a 768px viewport; applying
   the framework's tablet INTENT (fluid width, 24px margin)
   rather than its literal figure — flagged, not silently
   reconciled (see anara-homepage-v1.html build notes).
   ============================================================ */
@media (max-width: 1239px){
  .wrap{padding:0 var(--s-24);}
  h1{font-size:40px;}
  h2{font-size:30px;}
  .g-4{grid-template-columns:repeat(2,1fr);}
  .g-3{grid-template-columns:repeat(2,1fr);}
  .g-2{grid-template-columns:repeat(2,1fr);}
  .values{grid-template-columns:repeat(2,1fr);row-gap:var(--s-32);}
  .foot-grid{grid-template-columns:1fr 1fr;row-gap:var(--s-32);}
  .navrow .nav-links{display:none;}
  section{padding:var(--s-64) 0;}
  .pdp-hero{grid-template-columns:1fr;}
  .pdp-hero.reverse{direction:ltr;}
  .gallery-thumbs{grid-template-columns:repeat(4,1fr);}
  .specs-list{grid-template-columns:1fr 1fr;}
  .at-a-glance{flex-direction:column;gap:var(--s-24);}
}

/* ============ MOBILE — 390px ============ */
@media (max-width: 767px){
  .wrap{padding:0 var(--s-16);max-width:100%;}
  h1{font-size:32px;}
  h2{font-size:26px;}
  h3{font-size:20px;}
  section{padding:var(--s-48) 0;}
  .g-4,.g-3,.g-2{grid-template-columns:1fr;}
  .values{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;gap:var(--s-32);}
  .navrow{padding:var(--s-12) var(--s-16);}
  .wordmark{font-size:15px;padding:6px 14px;}
  .nav-utility a{display:none;}
  .nav-utility .search-i{display:inline;}
  .hamburger{display:flex;}
  .closing .actions{flex-direction:column;}
  .foot-bottom{flex-direction:column;}
  .announce{font-size:10px;padding:8px 12px;}
  .specs-list{grid-template-columns:1fr;}
  .gallery-thumbs{grid-template-columns:repeat(3,1fr);}
  .pdp-ctas .btn,.pdp-ctas .quiet-link{width:100%;justify-content:center;}
  body.menu-open .mobile-panel{display:flex;flex-direction:column;gap:var(--s-24);position:fixed;inset:0;top:0;background:var(--paper);padding:100px var(--s-24) var(--s-24);z-index:60;overflow-y:auto;}
  body.menu-open .mobile-panel a{font-family:var(--f-display);font-size:24px;color:var(--indigo);}
  body.menu-open .mobile-panel .close-panel{position:absolute;top:24px;right:24px;font-family:var(--f-mono);font-size:12px;letter-spacing:1px;background:none;border:none;}
}

/* ==========================================================================
   Forms (Contact / Request Information) — NEW PATTERN, not yet in the
   visual framework: built only from existing tokens (Paper field, Linen
   border, Indigo focus, Terracotta error, 2px radius). Flagged for approval.
   ========================================================================== */
.form{display:grid;gap:var(--s-24);}
.form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-24);}
.field label,.field .label{display:block;font-family:var(--f-body);font-weight:500;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--indigo);margin-bottom:var(--s-8);}
.field .opt{font-weight:300;letter-spacing:.5px;text-transform:none;color:var(--taupe);margin-left:6px;}
.field input,.field select,.field textarea{width:100%;font-family:var(--f-body);font-weight:300;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--linen);border-radius:var(--radius);padding:14px 16px;min-height:48px;transition:border-color .25s ease;}
.field textarea{min-height:140px;resize:vertical;line-height:1.6;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--indigo);}
.field .err{display:none;font-family:var(--f-body);font-size:13px;color:var(--terracotta);margin-top:var(--s-8);}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--terracotta);}
.field.invalid .err{display:block;}
.check{display:flex;gap:var(--s-12);align-items:flex-start;font-size:15px;}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--indigo);}
.form-note{font-size:13px;color:#6b6151;}
.form-note a{color:var(--indigo);text-decoration:underline;}
.form-error{display:none;padding:var(--s-16);border:1px solid var(--terracotta);border-radius:var(--radius);color:var(--terracotta);font-size:14px;}
.confirm-state{padding:var(--s-48) 0;}
.confirm-state h2{margin:var(--s-8) 0 var(--s-16);}
.confirm-state p a{color:var(--gold);text-decoration:underline;}
.contact-card{background:var(--ivory);border-radius:var(--radius);padding:var(--s-32);}
.contact-card dt{font-family:var(--f-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#6b6151;margin-top:var(--s-24);}
.contact-card dt:first-child{margin-top:0;}
.contact-card dd{font-size:17px;color:var(--indigo);margin:var(--s-4) 0 0;}
.contact-card dd a{background-image:linear-gradient(var(--indigo),var(--indigo));background-repeat:no-repeat;background-size:0% 1px;background-position:left bottom;transition:background-size .25s ease;}
.contact-card dd a:hover{background-size:100% 1px;}
@media (max-width:767px){ .form .row-2{grid-template-columns:1fr;} .contact-card{padding:var(--s-24);} }

/* Tablet (768–1239px): primary links are hidden at this width, so the menu
   button and panel must be available here too — not only below 768px. */
@media (max-width: 1239px){
  .hamburger{display:flex;}
  body.menu-open .mobile-panel{display:flex;flex-direction:column;gap:var(--s-24);position:fixed;inset:0;top:0;background:var(--paper);padding:100px var(--s-48) var(--s-48);z-index:60;overflow-y:auto;}
  body.menu-open .mobile-panel a{font-family:var(--f-display);font-size:24px;color:var(--indigo);}
  body.menu-open .mobile-panel .close-panel{position:absolute;top:24px;right:24px;font-family:var(--f-mono);font-size:12px;letter-spacing:1px;background:none;border:none;}
}
@media (max-width: 767px){ body.menu-open .mobile-panel{padding:100px var(--s-24) var(--s-24);} }