/* =========================================================================
   Zlakuša — "Dimljena glina" (smoked clay) design system
   Every surface borrows from the craft itself: raw sand clay for paper,
   smoke-fired near-black for the dark bands, ember for the single accent,
   and throwing-line ribbing (the ridges a potter's fingers leave on the
   wheel) as the recurring texture. Alegreya (display) + PT Sans (text).
   ========================================================================= */

:root{
  --ink:#211D1A;
  --ink-2:#2C2621;
  --ink-3:#38302A;
  --sand:#EDE4D3;
  --sand-2:#E4D8C2;
  --paper:#F6F1E6;
  --ember:#B54C24;
  --ember-soft:#D06A3C;
  --clay:#8B4632;
  --ochre:#A9762F;
  --calcite:#C9C0AF;
  --text:#332A22;
  --text-soft:#544A3F;

  --wrap:1180px;
  --wrap-narrow:760px;

  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px;
  --sp-5:64px; --sp-6:96px;

  /* Throwing lines: the ridge texture left by fingers on the wheel. */
  --ribbing:repeating-linear-gradient(
      to bottom,
      rgba(33,29,26,.055) 0 1px,
      transparent 1px 9px);
  --ribbing-light:repeating-linear-gradient(
      to bottom,
      rgba(237,228,211,.06) 0 1px,
      transparent 1px 9px);
}

*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* The header is sticky, so an in-page anchor would otherwise land behind it. */
  scroll-padding-top:86px;
}
body{
  margin:0;
  /* Nothing may push the page sideways on a narrow screen. Long words, pasted
     URLs and e-mail addresses in producer profiles are the usual culprits. */
  overflow-x:hidden;
  overflow-wrap:break-word;
  background:var(--sand);
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(169,118,47,.10), transparent 70%),
    radial-gradient(ellipse 700px 420px at 92% 8%, rgba(181,76,36,.07), transparent 70%);
  background-attachment:fixed;
  color:var(--text);
  font-family:'PT Sans', system-ui, sans-serif;
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Alegreya', Georgia, serif;
  color:var(--ink);
  line-height:1.1;
  letter-spacing:-0.01em;
  margin:0 0 var(--sp-2);
  font-weight:700;
}
a{color:var(--clay);text-decoration:none;}
a:hover{color:var(--ember);}
img,svg{max-width:100%;display:block;}
p{margin:0 0 var(--sp-2);}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-3);}
.wrap--narrow{max-width:var(--wrap-narrow);}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--sand);
  padding:12px 18px;z-index:200;
}
.skip-link:focus{left:8px;top:8px;}

:focus-visible{outline:2px solid var(--ember);outline-offset:3px;}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(237,228,211,0.93);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--calcite);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:var(--sp-3);}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);font-family:'Alegreya',serif;font-weight:800;font-size:23px;letter-spacing:0.02em;}
.brand:hover{color:var(--ink);}
/* Brand mark: a pot seen from directly above, on the wheel. */
.brand-mark{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--ember);position:relative;flex:none;}
.brand-mark::before{content:"";position:absolute;inset:3.5px;border-radius:50%;border:1.5px solid var(--ember);opacity:.7;}
.brand-mark::after{content:"";position:absolute;inset:7.5px;border-radius:50%;background:var(--ember);opacity:.85;}
.brand-mark--light{border-color:var(--ember);}

.primary-nav{display:flex;align-items:center;gap:var(--sp-4);}
.nav-list{display:flex;gap:var(--sp-3);list-style:none;margin:0;padding:0;}
.nav-list a{color:var(--text);font-size:15.5px;position:relative;padding:6px 0;display:inline-block;}
.nav-list a:hover{color:var(--ink);}
.nav-list a[aria-current]{color:var(--ink);}
.nav-list a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--ember);transition:width .25s ease;}
.nav-list a:hover::after,.nav-list a[aria-current]::after{width:100%;}

.lang-switch{display:flex;gap:2px;border:1px solid var(--calcite);border-radius:2px;overflow:hidden;}
.lang-opt{font-size:13px;padding:5px 10px;color:var(--text-soft);background:transparent;}
.lang-opt:hover{color:var(--ink);background:var(--sand-2);}
.lang-opt.is-active{background:var(--ink);color:var(--sand);}
.lang-opt.is-active:hover{color:var(--sand);}

.nav-toggle{display:none;}

/* ---------- Buttons / links ---------- */
.btn{display:inline-block;padding:14px 28px;border-radius:2px;font-size:15.5px;transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;}
.btn--solid{background:var(--ink);color:var(--sand);}
.btn--solid:hover{background:var(--ember);color:var(--sand);transform:translateY(-1px);box-shadow:0 8px 18px rgba(33,29,26,.18);}
.btn--ghost{border:1px solid var(--ink);color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--sand);}
.link-more{display:inline-block;color:var(--clay);border-bottom:1px solid currentColor;padding-bottom:2px;font-size:15.5px;}
.link-more--light{color:var(--sand);}
.link-more--light:hover{color:var(--ember-soft);}

/* ---------- Hero ----------
   A full-bleed photograph of the village with the copy set into the open sky
   on its left. The scrim is what makes that safe: the photo's left third is
   bright, so text over bare image would fail contrast at some viewport widths.
   The gradient re-establishes the sand ground under the words and fades out
   before it reaches the pot. */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-bottom:1px solid var(--calcite);
  background:var(--sand-2);
  min-height:clamp(520px, 74vh, 780px);
  display:flex;
  align-items:center;
}
.hero-photo{position:absolute;inset:0;z-index:-2;}
.hero-photo img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:72% 50%;   /* keep the pot in frame as the crop tightens */
}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(237,228,211,.97) 0%,
      rgba(237,228,211,.93) 26%,
      rgba(237,228,211,.72) 44%,
      rgba(237,228,211,.24) 60%,
      rgba(237,228,211,0) 72%),
    linear-gradient(to top, rgba(33,29,26,.22), transparent 38%);
}
.hero-inner{width:100%;}
.hero-copy{padding:var(--sp-6) 0;max-width:36rem;}
.hero-kicker{color:var(--clay);font-family:'Alegreya',serif;font-style:italic;font-size:17px;margin-bottom:var(--sp-2);}
.hero-title{font-size:clamp(44px,6vw,74px);font-weight:800;margin-bottom:var(--sp-3);}
.hero-lead{font-size:20px;max-width:34ch;color:var(--text-soft);margin-bottom:var(--sp-4);}
.hero-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;}
/* Quiet place credit, bottom-right over the darker part of the frame. */
.hero-caption{
  position:absolute;right:var(--sp-3);bottom:var(--sp-2);margin:0;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(246,241,230,.82);
  text-shadow:0 1px 3px rgba(33,29,26,.6);
}

/* ---------- Portal identity band ---------- */
.portal{
  background:var(--paper);
  border-top:1px solid var(--calcite);
  border-bottom:1px solid var(--calcite);
  padding:var(--sp-5) 0;
}
.portal-inner{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:start;}
/* A potter's stamp: the mark pressed into the base of a finished piece. */
.portal-seal{position:relative;width:92px;height:92px;flex:none;}
.portal-seal .seal-ring{position:absolute;border-radius:50%;border:1.5px solid var(--clay);opacity:.55;}
.portal-seal .seal-ring:nth-child(1){inset:0;}
.portal-seal .seal-ring:nth-child(2){inset:14%;border-style:dashed;opacity:.4;}
.portal-seal .seal-dot{position:absolute;inset:34%;border-radius:50%;background:var(--ember);opacity:.9;}
.portal-kicker{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay);margin-bottom:var(--sp-2);
}
.portal-statement{
  font-family:'Alegreya',serif;font-weight:500;
  font-size:clamp(23px,2.7vw,32px);line-height:1.35;
  color:var(--ink);max-width:46ch;margin-bottom:var(--sp-2);
}
.portal-note{font-size:16.5px;color:var(--text-soft);max-width:62ch;margin-bottom:var(--sp-3);}
.portal-pills{display:flex;flex-wrap:wrap;gap:var(--sp-1);list-style:none;padding:0;margin:0;}
.portal-pills li{
  font-size:13.5px;letter-spacing:.04em;color:var(--text-soft);
  border:1px solid var(--calcite);border-radius:999px;
  padding:5px 14px;background:rgba(237,228,211,.6);
}

/* ---------- Facts band ---------- */
.facts{background:var(--ink);color:var(--sand);background-image:var(--ribbing-light);}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr);}
.fact{padding:var(--sp-5) var(--sp-3);border-left:1px solid rgba(237,228,211,.18);}
.fact:first-child{border-left:0;padding-left:0;}
.fact-num{display:block;font-family:'Alegreya',serif;font-weight:800;font-size:46px;color:var(--ember-soft);line-height:1;margin-bottom:var(--sp-1);}
.fact-label{font-size:15px;color:var(--calcite);max-width:26ch;display:block;}

/* ---------- Content bands ---------- */
.band{padding:var(--sp-6) 0;}
.band--dark{
  background:var(--ink);color:var(--sand);
  background-image:
    radial-gradient(ellipse 800px 400px at 78% 0%, rgba(181,76,36,.14), transparent 68%),
    var(--ribbing-light);
}
.band--dark h2{color:var(--sand);}
.band-head{margin-bottom:var(--sp-4);max-width:var(--wrap);}
.band-head h2{font-size:clamp(30px,3.6vw,42px);max-width:16ch;}
.band-head p{font-size:18px;color:var(--text-soft);max-width:46ch;}
.band--dark .band-head p{color:var(--calcite);}

/* ---------- Process strip (earth -> vessel) ---------- */
.process{
  list-style:none;padding:0;margin:0 0 var(--sp-4);
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--calcite);border:1px solid var(--calcite);
}
.process-step{
  background:var(--paper);padding:var(--sp-3);
  display:flex;flex-direction:column;gap:6px;
  position:relative;transition:background .2s ease;
}
.process-step:hover{background:#FBF7EE;}
.process-num{font-family:'Alegreya',serif;font-weight:800;font-size:15px;color:var(--ember);letter-spacing:.06em;}
.process-name{font-family:'Alegreya',serif;font-size:19px;color:var(--ink);line-height:1.25;}

/* ---------- Product chips ---------- */
.product-teaser{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin-bottom:var(--sp-4);}
.product-chip{
  display:flex;flex-direction:column;gap:10px;padding:var(--sp-3);
  border:1px solid rgba(237,228,211,.2);color:var(--sand);
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.product-chip:hover{border-color:var(--ember-soft);color:var(--sand);transform:translateY(-3px);background:rgba(237,228,211,.04);}
.chip-art{
  width:100%;aspect-ratio:1;
  background:radial-gradient(ellipse at 50% 32%, #3A322B 0%, #201C19 74%);
  display:flex;align-items:center;justify-content:center;padding:14%;
}
.chip-art .pot-svg{width:100%;height:auto;color:#7A5236;transition:color .22s ease;}
.product-chip:hover .chip-art .pot-svg{color:#9A6540;}
.chip-name{font-family:'Alegreya',serif;font-size:19px;}
.chip-use{font-size:14px;color:var(--calcite);line-height:1.4;}

/* ---------- Village teaser ---------- */
.village-teaser{background:var(--paper);}
.village-inner{display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch;gap:0;}
.village-copy{padding:var(--sp-6) var(--sp-4) var(--sp-6) 0;align-self:center;}
.village-copy h2{font-size:clamp(28px,3.4vw,38px);max-width:14ch;}
.village-copy p{max-width:44ch;color:var(--text-soft);margin-bottom:var(--sp-3);}
.village-art{min-height:420px;background:
   radial-gradient(circle at 30% 30%, rgba(181,76,36,.12), transparent 55%),
   repeating-linear-gradient(118deg,#C7B593 0 3px,#DACBA9 3px 42px);}

/* ---------- Article / prose ---------- */
.page{padding:var(--sp-5) 0 var(--sp-6);}
.page-head{margin-bottom:var(--sp-4);}
.page-head h1{font-size:clamp(34px,4.4vw,52px);max-width:18ch;}
.prose{font-size:18px;color:var(--text);}
.prose h2{font-size:29px;margin-top:var(--sp-5);}
.prose h3{font-size:21px;margin-top:var(--sp-3);}
.prose p{max-width:70ch;}
.prose .lead{font-size:22px;line-height:1.55;color:var(--ink);font-family:'Alegreya',serif;font-weight:500;max-width:60ch;margin-bottom:var(--sp-4);border-left:3px solid var(--ember);padding-left:var(--sp-3);}
.prose-list{max-width:70ch;padding-left:0;list-style:none;}
.prose-list li{position:relative;padding-left:26px;margin-bottom:10px;}
.prose-list li::before{content:"";position:absolute;left:2px;top:12px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ember);}
.note{background:var(--paper);border:1px solid var(--calcite);border-left:3px solid var(--clay);padding:var(--sp-3);margin:var(--sp-4) 0;max-width:70ch;font-size:16.5px;color:var(--text-soft);}
.pull-quote{margin:var(--sp-4) 0;padding-left:var(--sp-3);border-left:3px solid var(--ember);}
.pull-quote p{font-family:'Alegreya',serif;font-size:24px;font-style:italic;color:var(--ink);}
.pull-quote cite{font-style:normal;font-size:15px;color:var(--text-soft);}

/* ---------- Steps (numbered sequence) ---------- */
.steps{list-style:none;counter-reset:step;padding:0;margin:var(--sp-4) 0;display:grid;gap:1px;background:var(--calcite);border:1px solid var(--calcite);}
.step{background:var(--paper);display:flex;gap:var(--sp-3);padding:var(--sp-3);}
.step-index{font-family:'Alegreya',serif;font-weight:800;font-size:22px;color:var(--ember);flex:none;width:2.4ch;}
.step-body h3{margin:0 0 6px;font-size:19px;}
.step-body p{margin:0;font-size:16.5px;color:var(--text-soft);}

/* ---------- FAQ ---------- */
.faq{margin-top:var(--sp-6);border-top:1px solid var(--calcite);padding-top:var(--sp-4);}
.faq h2{font-size:26px;}
.faq-item{border-bottom:1px solid var(--calcite);padding:var(--sp-2) 0;}
.faq-item summary{cursor:pointer;font-family:'Alegreya',serif;font-size:20px;color:var(--ink);list-style:none;padding:var(--sp-1) 0;position:relative;padding-right:32px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:2px;color:var(--ember);font-size:24px;line-height:1;}
.faq-item[open] summary::after{content:"–";}
.faq-answer{color:var(--text-soft);font-size:17px;}
.faq-answer p{max-width:70ch;margin:6px 0 var(--sp-1);}

/* ---------- Producers directory ---------- */
.directory{margin-top:var(--sp-5);}
.directory h2{font-size:26px;margin-bottom:var(--sp-3);}
.maker-list{list-style:none;padding:0;margin:0 0 var(--sp-4);display:grid;gap:1px;background:var(--calcite);border:1px solid var(--calcite);}
.maker{background:var(--paper);padding:var(--sp-3);}
.maker-name{font-size:21px;margin:0 0 4px;}
.maker-place{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--clay);margin:0 0 var(--sp-2);}
.maker-note{font-size:16.5px;color:var(--text-soft);max-width:62ch;margin:0 0 var(--sp-2);}
.maker-makes{font-size:16px;margin:0 0 var(--sp-1);}
.maker-label{color:var(--text-soft);}
.maker-meta{list-style:none;padding:0;margin:var(--sp-1) 0 0;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);font-size:15.5px;}
.maker-visits{color:var(--clay);}
.directory-cta{font-size:16px;color:var(--text-soft);}
/* Provenance line: deliberately quiet, but always present. */
.maker-provenance{
  display:flex;flex-wrap:wrap;gap:4px var(--sp-2);
  margin:var(--sp-2) 0 0;padding-top:var(--sp-1);
  border-top:1px solid var(--calcite);
  font-size:13.5px;color:var(--text-soft);
}
.maker-status{color:var(--text-soft);}
.maker-status.is-confirmed{color:var(--clay);font-weight:700;}

/* ---------- Cross-cluster links ---------- */
.related{margin-top:var(--sp-5);border-top:1px solid var(--calcite);padding-top:var(--sp-4);}
.related h2{font-size:22px;margin-bottom:var(--sp-3);}
.related-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--calcite);border:1px solid var(--calcite);}
.related-list a{display:block;background:var(--paper);padding:var(--sp-3);color:var(--text);transition:background .2s ease;}
.related-list a:hover{background:#FBF7EE;}
.related-name{display:block;font-family:'Alegreya',serif;font-size:19px;color:var(--ink);margin-bottom:3px;}
.related-list a:hover .related-name{color:var(--ember);}
.related-desc{display:block;font-size:15px;color:var(--text-soft);}

/* ---------- 404 section links ---------- */
.error-nav{margin-top:var(--sp-5);text-align:left;border-top:1px solid var(--calcite);padding-top:var(--sp-4);}
.error-nav h2{font-size:19px;margin-bottom:var(--sp-3);}
.error-nav ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--calcite);border:1px solid var(--calcite);}
.error-nav a{display:block;background:var(--paper);padding:var(--sp-3);color:var(--text);}
.error-nav a:hover{background:#FBF7EE;}
.err-nav-name{display:block;font-family:'Alegreya',serif;font-size:18px;color:var(--ink);}
.err-nav-desc{display:block;font-size:14px;color:var(--text-soft);margin-top:2px;}

/* ---------- Events ---------- */
.events{margin-top:var(--sp-5);}
.events h2{font-size:26px;margin-bottom:var(--sp-3);}
.event-list{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--calcite);border:1px solid var(--calcite);}
.event{background:var(--paper);padding:var(--sp-3);border-left:3px solid var(--ember);}
.event-when{
  font-family:'Alegreya',serif;font-size:15px;letter-spacing:.04em;
  color:var(--ember);margin:0 0 4px;
}
.event-name{font-size:22px;margin:0 0 4px;}
.event-where{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);margin:0 0 var(--sp-2);}
.event-desc{font-size:16.5px;color:var(--text-soft);max-width:62ch;margin:0 0 var(--sp-2);}

/* ---------- Key facts (dl) ----------
   Label above value, ruled like the step list. Two columns where there is
   room, one on a phone -- a fact is a short pair, so a table would only add
   a horizontal scroller for nothing. */
.facts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--calcite);border:1px solid var(--calcite);
  margin:var(--sp-4) 0;max-width:70ch;
}
.fact-row{background:var(--paper);padding:var(--sp-2) var(--sp-3);}
.facts dt{
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:4px;
}
.facts dd{
  margin:0;font-family:'Alegreya',serif;font-size:19px;
  color:var(--ink);line-height:1.35;
}
@media (max-width:640px){
  .facts{grid-template-columns:1fr;}
}

/* ---------- Child pages ---------- */
.children{margin-top:var(--sp-5);}
.children h2{font-size:22px;margin-bottom:var(--sp-3);}
.child-list{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--calcite);border:1px solid var(--calcite);}
.child-list a{
  display:block;background:var(--paper);padding:var(--sp-3);
  color:var(--text);transition:background .2s ease;
}
.child-list a:hover{background:#FBF7EE;color:var(--text);}
.child-name{
  display:block;font-family:'Alegreya',serif;font-size:20px;color:var(--ink);
  margin-bottom:4px;
}
.child-list a:hover .child-name{color:var(--ember);}
.child-desc{display:block;font-size:15.5px;color:var(--text-soft);line-height:1.5;}
@media (hover:none){
  .child-list a:hover{background:var(--paper);}
}

/* ---------- Sibling links ---------- */
.siblings{margin-top:var(--sp-5);border-top:1px solid var(--calcite);padding-top:var(--sp-4);}
.siblings h2{font-size:22px;margin-bottom:var(--sp-3);}
.sibling-list{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--calcite);border:1px solid var(--calcite);}
.sibling-list a{
  display:block;background:var(--paper);padding:var(--sp-3);
  color:var(--text);transition:background .2s ease;
}
.sibling-list a:hover{background:#FBF7EE;color:var(--text);}
.sibling-name{
  display:block;font-family:'Alegreya',serif;font-size:20px;color:var(--ink);
  margin-bottom:4px;
}
.sibling-list a:hover .sibling-name{color:var(--ember);}
.sibling-desc{display:block;font-size:15.5px;color:var(--text-soft);line-height:1.5;}

/* ---------- Breadcrumb ---------- */
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 var(--sp-3);font-size:14.5px;color:var(--text-soft);}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--calcite);}
.breadcrumb a{color:var(--text-soft);}
.breadcrumb a:hover{color:var(--ember);}

/* ---------- Contact ---------- */
.contact-card{margin-top:var(--sp-4);padding:var(--sp-4);background:var(--paper);border:1px solid var(--calcite);max-width:60ch;}
.contact-label{display:block;font-size:14px;color:var(--text-soft);margin-bottom:6px;}
.contact-email{font-family:'Alegreya',serif;font-size:26px;color:var(--ink);border-bottom:2px solid var(--ember);}
.contact-email:hover{color:var(--ember);}
.contact-note{margin-top:var(--sp-3);font-size:16px;color:var(--text-soft);}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);color:var(--calcite);
  padding:var(--sp-5) 0 var(--sp-3);margin-top:var(--sp-6);
  background-image:var(--ribbing-light);
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-4);}
.site-footer .brand{color:var(--sand);margin-bottom:var(--sp-2);}
.footer-statement{
  font-family:'Alegreya',serif;font-size:18.5px;line-height:1.45;
  color:var(--sand);max-width:44ch;margin-bottom:var(--sp-2);
}
.footer-note{font-size:14px;color:#8F8677;max-width:46ch;}
.footer-col h2{color:var(--sand);font-size:17px;margin-bottom:var(--sp-2);}
.footer-col ul{list-style:none;padding:0;margin:0;}
.footer-col li{margin-bottom:8px;}
.footer-col a{color:#B7AE9D;font-size:15px;}
.footer-col a:hover{color:var(--ember-soft);}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid rgba(237,228,211,.12);font-size:13px;color:#7C7365;}

/* ---------- Error pages ---------- */
.error-page{min-height:70vh;display:flex;align-items:center;text-align:center;}
.error-code{font-family:'Alegreya',serif;font-weight:800;font-size:80px;color:var(--ember);line-height:1;margin:0;}
.error-page h1{font-size:34px;margin:var(--sp-2) 0;}
.error-page p{color:var(--text-soft);margin-bottom:var(--sp-3);}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .process{grid-template-columns:repeat(3,1fr);}
}

/* Seven navigation items plus a three-way script switcher stop fitting on one
   line well before the old 900px breakpoint, so the MENU alone collapses
   earlier. The layout breakpoint stays at 900px -- collapsing the nav is not a
   reason to stack the whole page. */
@media (max-width:1120px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1px solid var(--calcite);border-radius:2px;cursor:pointer;}
  .nav-toggle-bar,.nav-toggle-bar::before,.nav-toggle-bar::after{display:block;width:20px;height:2px;background:var(--ink);position:relative;}
  .nav-toggle-bar::before,.nav-toggle-bar::after{content:"";position:absolute;left:0;}
  .nav-toggle-bar::before{top:-6px;}.nav-toggle-bar::after{top:6px;}
  .primary-nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--sand);border-bottom:1px solid var(--calcite);
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--sp-2) var(--sp-3) var(--sp-3);
    display:none;
    /* A tall menu on a short screen must scroll rather than run off. */
    max-height:calc(100dvh - 74px);overflow-y:auto;
  }
  .primary-nav.is-open{display:flex;}
  .nav-list{flex-direction:column;gap:0;width:100%;}
  /* Full-width rows with a real 48px target: thumbs, not cursors. */
  .nav-list a{
    display:flex;align-items:center;min-height:48px;
    padding:6px 0;font-size:17px;
    border-bottom:1px solid var(--calcite);
  }
  .nav-list li:last-child a{border-bottom:0;}
  .nav-list a::after{display:none;}
  .nav-list a[aria-current]{color:var(--ember);font-weight:700;}
  .lang-switch{margin-top:var(--sp-2);align-self:flex-start;}
  .lang-opt{min-height:44px;display:flex;align-items:center;padding:0 16px;font-size:14px;}
}

@media (max-width:900px){
  body{font-size:17px;}
  /* Narrow screens: the crop leaves far less clear sky, so the scrim becomes
     a top-down wash instead of a left-to-right one and the photo shifts to
     keep the pot visible below the copy. */
  .hero{min-height:clamp(480px, 76vh, 620px);align-items:flex-start;}
  .hero-photo img{object-position:64% 42%;}
  .hero-scrim{
    background:
      linear-gradient(to bottom,
        rgba(237,228,211,.97) 0%,
        rgba(237,228,211,.92) 46%,
        rgba(237,228,211,.55) 66%,
        rgba(237,228,211,.12) 84%),
      linear-gradient(to top, rgba(33,29,26,.28), transparent 30%);
  }
  .hero-copy{padding:var(--sp-5) 0 var(--sp-6);max-width:none;}
  .hero-caption{right:var(--sp-2);}
  .portal-inner{grid-template-columns:1fr;gap:var(--sp-3);}
  .portal-seal{width:64px;height:64px;}
  .facts-grid{grid-template-columns:1fr;}
  .fact{border-left:0;border-top:1px solid rgba(237,228,211,.18);padding:var(--sp-3) 0;}
  .fact:first-child{border-top:0;}
  .process{grid-template-columns:repeat(2,1fr);}
  .product-teaser{grid-template-columns:repeat(2,1fr);}
  .related-list{grid-template-columns:1fr;}
  .village-inner{grid-template-columns:1fr;}
  .village-art{order:-1;min-height:220px;}
  .village-copy{padding:var(--sp-5) 0;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-bottom{flex-direction:column;}
}

@media (max-width:520px){
  .wrap{padding:0 var(--sp-2);}
  .process{grid-template-columns:1fr;}
  .product-teaser{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  /* Tighten the display sizes: the fluid clamps bottom out too large to sit
     comfortably on a 320px screen. */
  .hero-title{font-size:clamp(34px,9vw,44px);}
  .hero-lead{font-size:18px;}
  .page-head h1{font-size:clamp(28px,7.5vw,34px);}
  .portal-statement{font-size:21px;}
  .fact-num{font-size:38px;}
  .prose .lead{font-size:19px;padding-left:var(--sp-2);}
  .pull-quote p{font-size:20px;}
  .error-code{font-size:64px;}
  /* Buttons go full width so they cannot end up as two cramped half-rows. */
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{text-align:center;}
  .maker-meta{flex-direction:column;gap:6px;}
}

/* A phone held sideways has very little height: let the hero shrink to fit
   rather than pushing everything below the fold. */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;}
  .hero-copy{padding:var(--sp-4) 0;}
  .primary-nav{max-height:calc(100dvh - 60px);}
}

/* Touch screens have no hover, but they do fire hover styles on tap and then
   leave them stuck until the next tap elsewhere. Lift effects are the visible
   offenders, so they are switched off where hovering is not a real input. */
@media (hover:none){
  .btn--solid:hover,
  .product-chip:hover{transform:none;box-shadow:none;}
  .cards .card:hover{border-color:var(--line);}
}

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