:root{
  --paper:#f4ecd9;
  --paper-light:#fbf7ed;
  --paper-deep:#e5d4b8;
  --ink:#2b2924;
  --ink-soft:#595248;
  --rule:#7e6b50;
  --rule-light:#baa987;
  --teal:#155a55;
  --teal-dark:#0b3d3b;
  --gold:#b8912f;
  --oxblood:#6f3f36;
  --shadow:rgba(57,44,28,.17);
  --serif:'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --display:'Playfair Display', Georgia, serif;
  --editorial:'Cormorant Garamond', Georgia, serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 8%,rgba(145,111,65,.08),transparent 32rem),
    radial-gradient(circle at 85% 40%,rgba(50,92,84,.06),transparent 34rem),
    var(--paper);
  font-family:var(--serif);
  line-height:1.65;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background-image:
    repeating-linear-gradient(0deg,rgba(70,50,35,.025) 0,rgba(70,50,35,.025) 1px,transparent 1px,transparent 4px);
  z-index:9999;
}
a{color:var(--teal)}
button,a{touch-action:manipulation}
img{max-width:100%;height:auto}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--paper-light);color:var(--ink);padding:.8rem 1rem;border:2px solid var(--ink)
}
.skip-link:focus{left:.5rem;top:.5rem}

/* Site mast */
.mast{
  position:sticky;top:0;z-index:1200;
  background:rgba(249,244,232,.95);
  border-bottom:1px solid rgba(126,107,80,.45);
  backdrop-filter:blur(10px);
}
.mast-inner{
  max-width:1300px;margin:0 auto;padding:.45rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem
}
.brand-wordmark{
  color:var(--teal-dark);text-decoration:none;font-family:var(--display);
  font-size:1.55rem;font-weight:800;letter-spacing:-.025em;line-height:1
}
.nav-links{display:flex;align-items:center;gap:1.55rem;list-style:none;margin:0;padding:0}
.nav-links a{
  color:var(--teal-dark);text-decoration:none;
  font-family:var(--display);font-size:.77rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  border-bottom:2px solid transparent;padding:.35rem 0
}
.nav-links a:hover,.nav-links a.active{border-color:var(--gold);color:var(--teal)}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.burger span{display:block;width:26px;height:2px;background:var(--teal-dark);margin:5px 0}

/* Hero */
.emporium-hero{position:relative;max-width:1600px;margin:0 auto;text-align:center}
.hero-picture{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:#d4c2a5
}
.hero-picture img{width:100%;height:100%;object-fit:cover;display:block}
.hero-feather{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 58%,rgba(244,236,217,.22) 72%,var(--paper) 99%);
}
.hero-copy{position:relative;margin:-2.5rem auto 0;padding:0 1.25rem 2.5rem;max-width:1000px}
.edition-line{
  margin:0 0 .35rem;text-transform:uppercase;letter-spacing:.17em;
  font-size:.72rem;font-weight:700;color:var(--rule)
}
.hero-copy h1{
  margin:.1rem 0 .25rem;
  font-family:var(--display);font-size:clamp(2.5rem,6vw,5.5rem);line-height:1;
  color:var(--ink);letter-spacing:-.035em;
  text-shadow:0 0 .35px currentColor;
}
.dek{
  margin:.4rem auto 0;max-width:760px;
  font-family:var(--editorial);font-size:clamp(1.2rem,2.2vw,1.8rem);
  font-style:italic;color:var(--ink-soft)
}

/* Reality notice */
.reality-notice{
  max-width:1040px;margin:0 auto 3rem;padding:1.5rem 2rem 1.7rem;
  text-align:center;background:var(--teal-dark);color:#f8f2e6;
  border-top:5px double var(--gold);border-bottom:5px double var(--gold);
  box-shadow:0 8px 24px var(--shadow)
}
.notice-kicker{
  margin:0 0 .35rem;color:#e7cf8d;font-family:var(--display);
  font-size:.72rem;font-weight:800;letter-spacing:.18em
}
.reality-notice h2{
  margin:.15rem 0 .55rem;font-family:var(--display);
  font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.12;color:#fffaf0
}
.reality-notice p:last-child{margin:.4rem auto 0;max-width:850px;font-size:.98rem}

/* Credentials */
.credentials{
  max-width:1140px;margin:0 auto 3.25rem;padding:0 1.5rem;text-align:center
}
.credentials-rule{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  color:var(--oxblood);font-family:var(--display);font-size:.7rem;font-weight:800;letter-spacing:.15em
}
.credentials-rule::before,.credentials-rule::after{content:"";height:1px;background:var(--rule)}
.credentials h2{
  margin:.55rem 0 .6rem;font-family:var(--display);font-size:clamp(2rem,4vw,3.2rem);
  letter-spacing:-.025em
}
.credentials-intro{max-width:920px;margin:0 auto 1.6rem;color:var(--ink-soft)}
.credential-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  border:1px solid var(--rule);background:var(--rule)
}
.credential-grid article{
  background:rgba(251,247,237,.8);padding:1.35rem 1rem 1.45rem;min-height:195px
}
.credential-number{
  display:block;font-family:var(--display);font-size:1.65rem;font-weight:800;color:var(--teal);
  margin-bottom:.2rem
}
.credential-grid h3{
  margin:.15rem 0 .55rem;font-family:var(--display);font-size:.95rem;line-height:1.25;
  text-transform:uppercase;letter-spacing:.055em
}
.credential-grid p{margin:0;font-size:.84rem;color:var(--ink-soft)}
.credentials-link{margin:1rem 0 0;font-size:.82rem}
.credentials-link a{font-weight:700;text-decoration-thickness:1px;text-underline-offset:3px}

/* Directory */
.counter-nav{
  max-width:1180px;margin:0 auto 3rem;padding:1rem 1.25rem 1.2rem;
  border-top:3px double var(--ink);border-bottom:3px double var(--ink);text-align:center
}
.counter-label{
  margin:0 0 .7rem;font-family:var(--display);font-size:.75rem;font-weight:800;
  letter-spacing:.17em
}
.department-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem}
.department-buttons button{
  appearance:none;border:1px solid var(--rule);background:transparent;color:var(--ink);
  font:700 .74rem/1.2 var(--serif);padding:.65rem .8rem;cursor:pointer
}
.department-buttons button:hover,.department-buttons button:focus-visible{
  background:var(--ink);color:var(--paper-light);outline:none
}

/* Catalog */
.catalog{max-width:1240px;margin:0 auto;padding:0 1.25rem 3rem}
.newspaper-head{
  text-align:center;border-top:5px double var(--ink);border-bottom:5px double var(--ink);
  padding:.7rem .5rem .85rem;margin-bottom:2.25rem
}
.newspaper-head>p:first-child{
  margin:0;font-size:.7rem;font-weight:700;letter-spacing:.16em
}
.newspaper-head h2{
  margin:.2rem 0;font-family:var(--display);font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:.98;letter-spacing:-.04em;text-shadow:0 0 .35px currentColor
}
.newspaper-date{margin:.25rem 0 0;font-size:.73rem;font-style:italic;color:var(--ink-soft)}
.api-message{
  margin:0 auto 1.5rem;padding:1rem;text-align:center;border:1px dashed var(--rule);
  background:rgba(255,255,255,.25);font-style:italic;color:var(--ink-soft)
}
.department{
  scroll-margin-top:100px;margin:0 0 3.2rem;
  border-top:1px solid var(--rule);padding-top:1.15rem
}
.department-head{
  display:grid;grid-template-columns:minmax(170px,.65fr) 1.15fr 1.8fr;gap:1.15rem;
  align-items:start;margin-bottom:1.2rem;border-bottom:1px solid var(--rule-light);padding-bottom:.9rem
}
.department-kicker{
  margin:.4rem 0 0;font-size:.67rem;font-weight:800;letter-spacing:.15em;color:var(--oxblood)
}
.department-head h3{
  margin:0;font-family:var(--display);font-size:1.85rem;line-height:1.05
}
.department-head>p:last-child{margin:.15rem 0 0;color:var(--ink-soft);font-size:.88rem}
.product-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem
}
.product-card{
  position:relative;display:flex;flex-direction:column;min-height:100%;
  border:1px solid var(--rule);background:rgba(251,247,237,.72);
  box-shadow:2px 2px 0 rgba(126,107,80,.18);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease
}
.product-card:hover,.product-card:focus-within{
  transform:translateY(-3px);background:var(--paper-light);
  box-shadow:6px 7px 0 rgba(126,107,80,.14)
}
.product-image{
  aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--rule);background:#dfd2bb
}
.product-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(.98)}
.product-body{display:flex;flex-direction:column;flex:1;padding:1rem 1rem .95rem}
.product-kicker{
  margin:0 0 .25rem;font-size:.62rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--oxblood)
}
.product-card h4{
  margin:.05rem 0 .2rem;font-family:var(--display);font-size:1.25rem;line-height:1.12
}
.product-item-name{
  margin:0 0 .55rem;font-family:var(--editorial);font-size:1.02rem;
  font-weight:600;font-style:italic;color:var(--ink-soft);line-height:1.2
}
.product-excerpt{margin:0 0 .9rem;color:var(--ink-soft);font-size:.84rem;line-height:1.55}
.product-bottom{
  margin-top:auto;padding-top:.75rem;border-top:1px dotted var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:.75rem
}
.product-price{font-family:var(--display);font-weight:800;font-size:.93rem}
.product-actions{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.product-actions a,.product-actions button{
  border:1px solid var(--ink);background:transparent;color:var(--ink);
  font:700 .66rem/1 var(--serif);padding:.55rem .6rem;text-transform:uppercase;
  letter-spacing:.05em;text-decoration:none;cursor:pointer
}
.product-actions a.primary{background:var(--ink);color:var(--paper-light)}
.product-actions a:hover,.product-actions button:hover{background:var(--teal-dark);color:white;border-color:var(--teal-dark)}
.empty-shelf{
  grid-column:1/-1;padding:1.1rem 1.2rem;border:1px dashed var(--rule-light);
  color:var(--ink-soft);font-size:.86rem;font-style:italic;text-align:center
}

/* Quick view */
.quick-view{
  position:fixed;top:0;right:0;z-index:2100;width:min(430px,92vw);height:100dvh;
  transform:translateX(105%);transition:transform .28s ease;
  background:var(--paper-light);border-left:4px double var(--ink);
  box-shadow:-18px 0 40px rgba(32,25,18,.25);overflow:auto;padding:3.2rem 1.5rem 2rem
}
.quick-view.open{transform:translateX(0)}
.quick-close{
  position:absolute;top:.7rem;right:.8rem;border:1px solid var(--ink);background:transparent;
  font-size:1.6rem;line-height:1;width:2rem;height:2rem;cursor:pointer
}
.quick-scrim{
  position:fixed;inset:0;z-index:2050;background:rgba(31,25,19,.35)
}
.quick-product-image{
  width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule);
  margin-bottom:1rem;filter:saturate(.88)
}
.quick-view .quick-kicker{
  margin:0;color:var(--oxblood);font-size:.67rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase
}
.quick-view h2{
  margin:.15rem 0 .15rem;font-family:var(--display);font-size:2rem;line-height:1.05
}
.quick-item-name{
  margin:0 0 .65rem;font-family:var(--editorial);font-size:1.18rem;
  font-weight:600;font-style:italic;color:var(--ink-soft)
}
.quick-view .quick-price{
  margin:.6rem 0 1rem;padding:.5rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--display);font-weight:800
}
.quick-view .quick-copy{font-size:.9rem;color:var(--ink-soft)}
.quick-buttons{display:flex;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}
.quick-buttons a{
  display:inline-block;padding:.7rem .8rem;border:1px solid var(--ink);
  color:var(--ink);text-decoration:none;font-weight:700;font-size:.75rem;text-transform:uppercase
}
.quick-buttons a.primary{background:var(--ink);color:var(--paper-light)}
.quick-buttons a:hover{background:var(--teal-dark);color:#fff;border-color:var(--teal-dark)}

/* Promise */
.shop-promise{
  max-width:1030px;margin:0 auto 3.5rem;padding:1.4rem 1.6rem;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.3rem;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:center
}
.shop-promise h2{margin:0 0 .3rem;font-family:var(--display);font-size:1.55rem}
.shop-promise p{margin:0;color:var(--ink-soft);font-size:.87rem}
.ornament{font-size:1.5rem;color:var(--gold)}

/* Footer */
.footer{
  color:#f1eadc;text-align:center;padding:3rem 1.2rem;
  background:
    radial-gradient(circle at 50% 0,rgba(184,145,47,.16),transparent 22rem),
    linear-gradient(#0e4a49,#092f31);
  border-top:2px solid var(--gold)
}
.footer-wordmark{
  margin:0 auto .7rem;font-family:var(--display);font-size:1.7rem;
  font-weight:800;letter-spacing:.02em;color:#f4ead6
}
.footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.15rem;margin:1rem 0}
.footer nav a,.footer .contact a{
  color:#dcc37e;text-decoration:none;font-family:var(--display);
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase
}
.footer nav a:hover,.footer .contact a:hover{color:#fff}
.copyright{font-size:.78rem;color:rgba(245,240,230,.66);margin-top:1rem}

@media (max-width:980px){
  .credential-grid{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .department-head{grid-template-columns:150px 1fr 1.7fr}
}
@media (max-width:760px){
  .brand-wordmark{font-size:1.35rem}
  .burger{display:block}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;display:block;
    max-height:0;overflow:hidden;background:rgba(251,247,237,.99);
    transition:max-height .25s ease;border-bottom:1px solid var(--rule)
  }
  .nav-links.open{max-height:70vh}
  .nav-links li{text-align:center;border-top:1px solid rgba(126,107,80,.16)}
  .nav-links a{display:block;padding:.85rem}
  .hero-copy{margin:-1rem auto 0}
  .reality-notice{margin-left:1rem;margin-right:1rem;padding:1.35rem}
  .department-head{grid-template-columns:1fr;gap:.35rem}
  .department-kicker{margin:0}
}
@media (max-width:560px){
  .credential-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .credentials,.catalog{padding-left:.85rem;padding-right:.85rem}
  .shop-promise{margin-left:.85rem;margin-right:.85rem;grid-template-columns:1fr}
  .shop-promise .ornament{display:none}
  .product-bottom{align-items:flex-end}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}
@media print{
  .mast,.counter-nav,.quick-view,.quick-scrim,.footer,.product-actions{display:none!important}
  body{background:white;color:black}
  .hero-picture{max-height:340px}
  .product-grid{grid-template-columns:repeat(2,1fr)}
}
