/* Gereh & Naqsh — site stylesheet */

/* ---------- design tokens (matches Brand Identity Guidelines exactly) ---------- */
:root {
  --ink:       #1F1B17;   /* primary text, lockup */
  --cream:     #F4EFE6;   /* carpet ivory */
  --page-bg:   #EDE5D3;   /* deeper cream — was #FAF7F0 */   /* page surface */
  --gold:      #C9B58A;   /* hairlines, accent */
  --accent:    #8A7D68;   /* ampersand colour, secondary accent */
  --muted:     #6E6354;   /* supporting text, tagline */
  --subtle:    #A89A82;   /* tertiary text */
  --rule:      #D6CDB8;   /* hairlines between sections */
  --cream-2:   #EAE2D0;   /* slightly deeper cream for panels */

  --measure: 36rem;       /* readable line length */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7rem);
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }

/* ---------- typography ---------- */
.serif, h1, h2, h3, h4, .display {
  font-family: 'Cormorant Garamond', 'EB Garamond', Garamond, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: 0.005em;
}
h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.1;
  margin: 0 0 1.25rem;
  font-weight: 400;
}
h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  margin: 0 0 1rem;
  font-weight: 400;
}
h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
  margin: 0 0 0.75rem;
  font-weight: 500;
}
p { margin: 0 0 1.15rem; max-width: var(--measure); }
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .2s, color .2s; }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.tagline {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- header / nav ---------- */
.site-header {
  padding: 1.5rem var(--gutter) 1.25rem;
  border-bottom: 1px solid var(--rule);
  background: var(--page-bg);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(237, 229, 211, 0.92);
}
.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: none;
  flex-shrink: 0;
}
.brand-mark:hover { border: none; }
.brand-mark img { width: 36px; height: 36px; }
.brand-mark .brand-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.brand-mark .brand-text .amp {
  font-style: italic;
  color: var(--accent);
  padding: 0 0.18em;
}

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.site-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border: none;
  padding: 0.4rem 0;
  position: relative;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.active {
  color: var(--ink);
}
.site-nav a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--gold);
}

/* ---------- main / sections ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.page-title + .section { padding-top: clamp(1.25rem, 3vw, 2rem); }
.section + .section { border-top: 1px solid var(--rule); }

/* ---------- hero ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.hero-mark {
  width: clamp(120px, 18vw, 180px);
  margin: 0 auto 1rem;
  opacity: 0.96;
}
.hero h1 {
  font-style: italic;
  font-weight: 400;
  max-width: 22ch;
  margin: 0 auto 1.5rem;
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
}
.hero .lede {
  max-width: 36rem;
  margin: 0 auto 2.25rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}
.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* ---------- split hero (text left, mark panel right) ---------- */
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  text-align: left;
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  position: relative;
}
/* faded historical weaving image behind the House section, bled to the viewport edges (matching the cover) */
.section-loombg {
  position: relative;
  isolation: isolate;
  padding-top: clamp(2.4rem, 5.4vw, 4.2rem);
  padding-bottom: clamp(2.4rem, 5.4vw, 4.2rem);
}
.section-loombg::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -2;
  background-image: url("/assets/hero-bg-sepia-crop.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  opacity: 0.32;
}
/* cream scrim over the image to keep text fully legible */
.section-loombg::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(237, 229, 211, 0.55) 0%,
    rgba(237, 229, 211, 0.35) 50%,
    rgba(237, 229, 211, 0.55) 100%);
}
@media (min-width: 860px) {
  .hero-split { grid-template-columns: 1.22fr 1fr; gap: clamp(3rem, 6vw, 5.5rem); }
}
.hero-split .tagline { margin: 0 0 1.5rem; }
.hero-split h1 {
  font-style: italic;
  font-weight: 400;
  margin: 0 0 1.75rem;
  max-width: 20ch;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.05;
}
.hero-split .lede {
  margin: 0 0 1.75rem;
  max-width: 38ch;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}
.hero-rule {
  width: 100%;
  max-width: 22rem;
  height: 1px;
  background: var(--rule);
  margin: 0 0 1.75rem;
}
.hero-split .hero-ctas { justify-content: flex-start; }
.hero-panel {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2vw, 2rem);
}
.hero-panel-mark {
  width: 100%;
  max-width: 600px;
}

/* ---------- buttons (sparing use) ---------- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.btn:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn-light {
  border-color: var(--rule);
  color: var(--muted);
}
.btn-light:hover {
  background: var(--cream-2);
  color: var(--ink);
  border-color: var(--accent);
}

/* ---------- page title block (used on inner pages) ---------- */
.page-title {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.page-title .eyebrow { display: block; margin-bottom: 1rem; }
.page-title h1 {
  max-width: 24ch;
  margin: 0;
  font-style: normal;
}

/* ---------- prose layouts ---------- */
.prose {
  max-width: 38rem;
}
.prose p { font-size: 1.05rem; line-height: 1.75; color: var(--ink); }
.prose p.lede {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 2rem;
}
.prose h2 { margin-top: 2.5rem; }
.page-intro p.lede {
  font-family: 'Inter', sans-serif;
  font-size: 1.18rem;
  line-height: 1.7;
  font-style: normal;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.page-intro p { color: var(--ink); }
.page-intro p.intro-sub {
  font-family: 'Inter', sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
  margin-top: 0;
}
.page-title:has(+ .section .two-col-index) {
  padding-bottom: clamp(1.2rem, 2.5vw, 1.6rem);
  border-bottom: none;
}
.page-title:has(+ .section .two-col-index) + .section { padding-top: clamp(1.2rem, 2.5vw, 1.6rem); }
/* Journal index: intro runs full content width, no empty right column */
.journal-intro-wide { max-width: none; }
.journal-intro-wide p { max-width: none; }
.prose h3 { margin-top: 2rem; font-size: 1rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-family: 'Inter', sans-serif; font-weight: 500; }

/* ---------- two-column on wider screens ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}
@media (min-width: 760px) {
  .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: clamp(2rem, 5vw, 4.5rem); }
  .two-col .col-side {
    position: relative;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--gold);
  }
  .two-col .col-side p { margin: 0; position: relative; z-index: 1; }
  /* prose placed under the section label resets the label's uppercase/tracked styling */
  .two-col .col-side .prose {
    margin-top: 1.75rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink);
  }
  .two-col .col-side .prose p {
    color: var(--ink);
    margin: 0 0 1.1rem;
  }
  .two-col .col-side .prose h2 {
    margin-top: 0;
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    line-height: 1.2;
    margin-bottom: 1.25rem;
  }
  /* principles stacked vertically when they sit in the right column */
  .two-col .principles-stacked {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-self: start;
  }
  /* carpet photo in the right column */
  .two-col .col-figure {
    align-self: start;
    margin: 0;
    overflow: hidden;
  }
  .two-col .col-figure img {
    display: block;
    width: 100%;
    max-height: 26rem;
    object-fit: cover;
  }
  /* approach page: photo follows the text as you scroll */
  .two-col .col-figure-sticky {
    position: sticky;
    top: 6rem;
  }
  /* full-rug shot: show the whole carpet, not a cropped band */
  .two-col .col-figure-full img {
    max-height: none;
    height: auto;
    object-fit: contain;
  }
  .two-col .col-figure-sticky.col-figure-full img {
    max-height: calc(100vh - 8rem);
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }
  /* enquire page: wide text column on the left, image column on the right */
  .two-col:has(.col-side-wide) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .two-col .col-side-wide { min-width: 0; }
  .two-col .col-side-wide .enquire-cards { margin-top: 2.5rem; }
  /* makers index: carpet image left, names list right */
  .two-col-index { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
  .two-col-index .col-figure { align-self: start; margin: 0; overflow: hidden; }
  .two-col-index .col-figure img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
  .two-col-index .makers-toc { margin-top: 0; }
  /* intro band: text starts flush with the top, level with the image */
  .two-col .col-side.has-intro,
  .two-col-index .col-side { padding-top: 0; border-left: none; padding-left: 0; }
  .two-col-index .col-side .page-intro { margin-top: 0; }
  /* intro band: image capped to a modest height, top-aligned with the text, shown whole and sharp */
  .two-col-index:has(.page-intro) { align-items: start; }
  .two-col-index:has(.page-intro) .col-figure { align-self: start; display: flex; justify-content: center; }
  .two-col-index:has(.page-intro) .col-figure img { width: auto; max-width: 100%; height: auto; max-height: 320px; object-fit: contain; object-position: center; }
  .two-col-index:has(.page-intro) .col-figure-tall-intro img { max-height: 385px; }
  .two-col-index:has(.page-intro) .col-figure-tall-intro { display: block; }
  .two-col-index:has(.page-intro) .col-figure-tall-intro .piece-figure { width: 100%; max-width: 100%; margin: 0; }
  .two-col-index:has(.page-intro) .col-figure-tall-intro .piece-figure img { display: block; margin-left: auto; margin-right: auto; }
  .two-col-index:has(.page-intro) .col-figure-tall-intro .piece-figure figcaption { text-align: center; }
  /* enquire page: tall portrait shown whole, capped to viewport for sticky */
  .two-col .col-figure-tall img {
    max-height: calc(100vh - 8rem);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-left: auto;
  }
}

/* ---------- three principles row ---------- */
.principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .principles { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
.principle h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
}
.principle .num {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}
.principle p {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0;
}

/* ---------- makers grid ---------- */
.makers-toc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 3rem 0 4rem;
  max-width: 36rem;
}
.makers-toc:last-child { margin-bottom: 0; }
.makers-toc-two { max-width: none; }
@media (min-width: 720px) {
  .makers-toc-two { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); row-gap: 0; padding-right: 0.5rem; }
}
.makers-toc a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem 8rem;
  column-gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--ink);
}
.makers-toc a > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.makers-toc a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.makers-toc .toc-name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--ink);
}
.makers-toc .toc-date {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.makers-toc .toc-city {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.maker {
  padding: clamp(3rem, 5vw, 4.5rem) 0;
  border-top: 1px solid var(--rule);
}
.maker:first-of-type { border-top: none; }
.maker .meta {
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.maker h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 1.75rem;
  max-width: 26ch;
}
.maker .bio p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink);
  max-width: 38rem;
  margin-bottom: 1.1rem;
}
.maker .bio p:first-of-type::first-line {
  font-weight: 400;
}
.maker-portrait {
  float: right;
  width: clamp(150px, 26%, 230px);
  margin: 0 0 1.25rem 1.75rem;
}
.maker-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  filter: drop-shadow(0 10px 26px rgba(31, 27, 23, 0.16));
}
.maker-portrait figcaption {
  margin-top: 0.6rem;
  font-size: 0.74rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--muted);
}
@media (max-width: 620px) {
  .maker-portrait {
    float: none;
    width: 100%;
    max-width: 320px;
    margin: 0 0 1.5rem;
  }
}

.maker-portrait-wide {
  margin: 0 0 2rem;
}
.maker-portrait-wide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  filter: drop-shadow(0 12px 30px rgba(31, 27, 23, 0.16));
}
.maker-portrait-wide figcaption {
  margin-top: 0.7rem;
  font-size: 0.74rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* ---------- collection statement (the "coming soon" page handled with restraint) ---------- */
.statement {
  max-width: 40rem;
}
.statement .lede {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 2rem;
}
.statement p { font-size: 1.05rem; line-height: 1.7; }
.statement .footnote {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- enquire page ---------- */
.enquire-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
  max-width: 38rem;
}
@media (min-width: 600px) { .enquire-cards { grid-template-columns: 1fr 1fr; } }
.enquire-card {
  padding: 2rem 1.75rem;
  background: var(--cream);
  border: 1px solid var(--rule);
}
.enquire-card .label {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.enquire-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
  font-weight: 400;
}
.enquire-card a {
  font-size: 0.95rem;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
}
.enquire-card p {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
}

/* offering a piece — distinct section, set apart by a rule */
.enquire-aside {
  margin-top: 4rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--rule);
}
.enquire-aside .eyebrow { margin-bottom: 1.25rem; }
.enquire-aside .prose h2 { margin-top: 0; }

/* ---------- footer ---------- */
.site-footer {
  margin-top: var(--section-y);
  padding: clamp(3rem, 5vw, 4.5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  background: var(--ink);
  color: var(--cream);
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.footer-mark { width: 56px; margin: 0 auto 1.5rem; opacity: 0.85; }
.site-footer h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.25rem;
  font-weight: 400;
  color: var(--cream);
}
.site-footer h2 .amp { font-style: italic; color: var(--gold); padding: 0 0.18em; }
.site-footer .tagline {
  color: var(--subtle);
  margin-bottom: 2rem;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
}
.site-footer .footer-meta {
  font-size: 0.78rem;
  color: var(--subtle);
  letter-spacing: 0.05em;
}
.site-footer a {
  color: var(--cream);
  border-bottom-color: rgba(244, 239, 230, 0.3);
}
.site-footer a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.site-footer .footer-meta a { color: var(--subtle); }

/* ---------- subtle entrance animation ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(8px);
    animation: revealIn .9s ease-out forwards;
  }
  .reveal-1 { animation-delay: 0.1s; }
  .reveal-2 { animation-delay: 0.25s; }
  .reveal-3 { animation-delay: 0.4s; }
  .reveal-4 { animation-delay: 0.55s; }
  @keyframes revealIn {
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- small responsive niceties ---------- */
@media (max-width: 600px) {
  .site-header { padding: 1rem var(--gutter) 0.85rem; }
  .header-inner { gap: 0.5rem; }
  .site-nav { gap: 0.7rem; }
  .site-nav a { font-size: 0.64rem; letter-spacing: 0.12em; }
  .brand-mark .brand-text { display: none; }  /* mark alone on mobile */
  .brand-mark img { width: 30px; height: 30px; }
}

/* ---------- piece page (single-carpet layout) ---------- */
.piece {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 880px) {
  .piece {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}
.piece-image {
  position: relative;
}
.piece-image img {
  width: 100%;
  height: auto;
  display: block;
  /* no background card — the PNG has a transparent surround so the carpet sits directly on the page cream */
  filter: drop-shadow(0 18px 40px rgba(31, 27, 23, 0.12));
}
.piece-meta {
  position: sticky;
  top: 6rem;
}
@media (max-width: 879px) {
  .piece-meta { position: static; }
}
.piece-meta .origin {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.piece-meta h1 {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  margin-bottom: 0.4rem;
  max-width: 16ch;
}
.piece-meta .piece-maker {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: 0.01em;
  margin-bottom: 0.25rem;
}
.piece-meta .piece-designer {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
}
.piece-meta .piece-desc {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 0.5rem;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* ---------- maker bio teaser + read-more dropdown ---------- */
.maker-bio {
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.maker-bio summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ink);
}
.maker-bio summary::-webkit-details-marker { display: none; }
.maker-bio .maker-bio-teaser {
  display: block;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.maker-bio .maker-bio-more {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.maker-bio summary:hover .maker-bio-more { color: var(--ink); border-bottom-color: var(--accent); }
.maker-bio[open] .maker-bio-more { display: none; }
.maker-bio .maker-bio-less {
  display: inline-block;
  margin-top: 1.4rem;
  padding: 0 0 1px;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.maker-bio .maker-bio-less:hover { color: var(--ink); border-bottom-color: var(--accent); }
.maker-bio-full { margin-top: 1.2rem; }
.maker-bio-full p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 1.1rem;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.maker-bio-full .maker-bio-link {
  margin-top: 1.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  hyphens: none;
}
.maker-bio-full .maker-bio-link a {
  color: var(--accent);
  border-bottom: none;
}
.maker-bio-full .maker-bio-link a:hover { color: var(--ink); }
.piece-meta dl {
  margin: 2rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.5rem;
  row-gap: 0.65rem;
}
.piece-meta dt {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.15rem;
}
.piece-meta dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
}
.piece-meta dd em {
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
}
.piece-cta {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.piece-cta .price-line {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.piece-cta .btn { display: inline-block; }
.piece-cta .btn + .btn { margin-left: 0.75rem; }

.collection-note {
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-top: 3rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.collection-note p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 36rem;
  margin: 0 auto;
}

/* ---------- study stack (detail images below the main piece) ---------- */
.study {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
}
.study-lede {
  max-width: 42rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.study-lede .eyebrow {
  display: block;
  margin-bottom: 1rem;
}
.study-lede p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
}
.study-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 760px) {
  .study-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .study-grid.study-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.study-item figure { margin: 0; }
.study-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
/* the corner is a transparent cutout — float it on the page cream with a soft shadow, matching the hero */
.study-item.on-cream img {
  filter: drop-shadow(0 14px 36px rgba(31, 27, 23, 0.14));
}
/* the knot macro carries its own black ground — let it sit edge to edge */
.study-item.on-dark img {
  background: #000;
}
.study-item figcaption {
  margin-top: 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}
.study-item figcaption strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}



/* ---- Collection index (thumbnail grid) ---- */
.collection-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: 1rem;
}
@media (min-width: 680px) {
  .collection-grid { grid-template-columns: 1fr 1fr; }
}
.collection-card {
  display: block;
  border-bottom: none;
  color: var(--ink);
}
.collection-card:hover { color: var(--ink); }
.collection-card .card-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-2, #EAE2D0);
  filter: drop-shadow(0 14px 36px rgba(31, 27, 23, 0.12));
}
.collection-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.collection-card:hover .card-image img { transform: scale(1.03); }
.collection-card .card-meta {
  margin-top: 1.1rem;
  text-align: center;
}
.collection-card .card-origin {
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted, #6E6354);
  display: block;
  margin-bottom: 0.45rem;
}
.collection-card .card-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.7rem;
  line-height: 1.2;
  display: block;
}
.collection-card .card-sep {
  color: var(--muted, #6E6354);
  font-style: normal;
  margin: 0 0.15em;
}

/* ---- In-Detail video item ---- */
.study-item.study-video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  background: #000;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ---- Homepage cover (full-bleed image hero) ---- */
.cover {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.cover img.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cover .cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.15) 42%, rgba(0,0,0,.5));
}
.cover .cover-inner {
  position: relative;
  z-index: 2;
  padding: 2rem;
  color: var(--cream);
}
.cover .cover-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.8);
}
.cover .cover-mark {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 5rem);
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 2px 34px rgba(0,0,0,.55);
}
.cover .cover-mark .amp {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
}


/* ---------- Approach page: faint tilework wash behind the whole page ---------- */
.approach-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("/assets/approach-tile-bg.jpg");
  background-size: 520px auto;
  background-repeat: repeat;
  background-attachment: fixed;
  opacity: 0.06;
  pointer-events: none;
}

/* approach page: let the faint tile layer show through the body */
html:has(.approach-page) { background: var(--page-bg); }
.approach-page { background: transparent; }

/* Captions for non-listing photographic images (added 2 Jun 2026) */
.piece-caption {
  margin-top: 0.6rem;
  font-size: 0.74rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-align: center;
}
figure.piece-figure {
  margin: 0;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}
figure.piece-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.cover figure.piece-figure .piece-caption { text-align: left; }
.cover .cover-credit {
  position: absolute;
  bottom: 1.1rem;
  right: 1.4rem;
  z-index: 2;
  max-width: 60%;
  margin: 0;
  text-align: right;
  font-size: 0.64rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--cream);
  opacity: 0.78;
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}
@media (max-width: 620px) {
  .cover .cover-credit { max-width: 80%; right: 1rem; bottom: 2.6rem; font-size: 0.6rem; }
}

/* ============================================================
   JOURNAL  (added 2026-06)
   ============================================================ */

/* Journal index: list of articles */
.journal-list { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); max-width: 52rem; }
.journal-entry { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--rule); }
.journal-entry:last-child { border-bottom: none; }
@media (min-width: 720px) {
  .journal-entry { grid-template-columns: 13rem 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
}
.journal-entry .je-thumb img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.journal-entry .je-eyebrow { display: block; font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--subtle); margin-bottom: 0.6rem; }
.journal-entry h2 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.6rem; line-height: 1.2; margin: 0 0 0.5rem 0; }
.journal-entry h2 a { color: var(--ink); text-decoration: none; }
.journal-entry h2 a:hover { color: var(--accent); }
.journal-entry .je-stand { font-size: 1rem; line-height: 1.6; color: var(--muted); margin: 0 0 0.8rem 0; }
.journal-entry .je-more { font-family: 'Inter', sans-serif; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.journal-entry .je-more:hover { color: var(--ink); }

/* Article: readable column, centred in the page container */
.article-body { max-width: 42rem; margin-left: auto; margin-right: auto; }
.article-body .lede { font-size: 1.15rem; line-height: 1.7; color: var(--muted); margin-bottom: 0.5rem; }
.article-rule { border: none; border-top: 1px solid var(--gold); width: 38%; margin: 1.4rem 0 2.4rem 0; }

/* Collector's Note aside */
.collector-note { background: var(--cream-2); border-left: 3px solid var(--accent); padding: 1.1rem 1.3rem; margin: 2rem 0; color: var(--ink); font-size: 1rem; line-height: 1.6; }
.collector-note .cn-label { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.7rem; color: var(--accent); margin-right: 0.4rem; }
.collector-note-figure {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  max-width: 38rem;
}
.collector-note-figure p { margin: 0; flex: 1; }
.collector-note-figure figure { margin: 0; flex: 0 0 11rem; text-align: center; }
.collector-note-figure figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.collector-note-figure figcaption { margin-top: 0.5rem; font-size: 0.7rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 600px) {
  .collector-note-figure { flex-direction: column; align-items: stretch; }
  .collector-note-figure p { margin-bottom: 1.1rem; }
  .collector-note-figure figure { flex: none; max-width: 16rem; margin: 0 auto; }
}

/* Article header — centred title block */
.article-header {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.article-header .eyebrow { display: block; margin-bottom: 1.1rem; }
.article-header h1 {
  max-width: 22ch;
  margin: 0 auto 1.2rem;
}
.article-header .lede {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 40ch;
  margin: 0 auto 1.4rem;
}
.article-header .article-date {
  margin: 0 auto;
  width: 100%;
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--subtle);
  text-align: center;
}
.article-header .article-date time { margin-left: 0.18em; }

/* Single centred column, widened for editorial readability */
.article-single { max-width: 800px; margin-left: auto; margin-right: auto; }
.article-single .article-body { max-width: 800px; margin: 0 auto; }
.article-single .article-body.prose { max-width: 800px; }
.article-single .article-body p { max-width: 100%; }
.article-single .article-sources { max-width: 800px; margin-left: auto; margin-right: auto; }

/* Inline figures default to centred blocks */
.inline-figure { margin: 2rem auto; text-align: center; }
.inline-figure img { display: inline-block; width: 100%; height: auto; border: 1px solid var(--rule); }
.inline-figure figcaption { margin-top: 0.55rem; font-size: 0.78rem; line-height: 1.5; color: var(--muted); }

/* Hero/lead image: fixed 700px, centred (narrower than the 800px text) */
.inline-figure-lead { width: 700px; max-width: 100%; margin: 0 auto 2rem; }
.inline-figure-lead img { max-width: 100%; }
.inline-figure-lead-wide { width: 800px; }

/* Map: floated right, paragraph wraps to its left */
.inline-figure-map { float: right; width: 22rem; max-width: 45%; margin: 0.3rem 0 1.3rem 1.8rem; clear: right; }
.inline-figure-map img { max-width: 100%; border: none; }
.inline-figure-map figcaption { text-align: left; }

/* Floated images: ~50% width, beside the text, alternating sides */
.inline-figure-float {
  width: 50%;
  max-width: 22rem;
  margin: 0.3rem 0 1.3rem;
}
.inline-figure-float img { width: 100%; }
.inline-figure-float figcaption { text-align: left; }
.inline-figure-float.float-right { float: right; margin-left: 2rem; clear: right; }
.inline-figure-float.float-left { float: left; margin-right: 2rem; clear: left; }
/* Weavers: 15% smaller than the standard float */
.inline-figure-float.figure-smaller { max-width: 18.7rem; }

/* Headings and sources clear floats so sections start fresh */
.article-single h2 { clear: both; }
.article-single .article-sources { clear: both; }
/* Closing paragraph: extra space above, in place of removed heading */
.article-closing { margin-top: 2.75rem; clear: both; }

/* Collector's note: compact text-only aside */
.collector-note-text { clear: both; }
.collector-note-text p { margin: 0; }
/* Note + photo side by side, vertically centred to the photo's height */
.collector-note-row { display: flex; align-items: center; gap: 2rem; clear: both; margin: 1.6rem 0 2rem; }
.collector-note-row .collector-note-text { flex: 1; clear: none; }
.collector-note-row .inline-figure-jamshidi { flex: 0 0 auto; margin: 0; }
.collector-note-row .inline-figure-jamshidi img { width: 17rem; max-width: 100%; }
@media (max-width: 600px) {
  .collector-note-row { flex-direction: column; align-items: stretch; gap: 1.2rem; }
  .collector-note-row .inline-figure-jamshidi { text-align: center; }
  .collector-note-row .inline-figure-jamshidi img { width: 100%; max-width: 18rem; }
}
/* Jamshidi image: standalone centred (fallback if used outside the row) */
.inline-figure-jamshidi { clear: both; margin: 1.6rem auto 2rem; text-align: center; }
.inline-figure-jamshidi img { display: inline-block; width: 100%; max-width: 24rem; height: auto; border: 1px solid var(--rule); }

/* Mobile: floats collapse to full-width stacked blocks */
@media (max-width: 768px) {
  .inline-figure-float, .inline-figure-float.float-right, .inline-figure-float.float-left {
    float: none;
    width: 100%;
    max-width: 22rem;
    margin: 1.6rem auto;
  }
  .inline-figure-float figcaption { text-align: center; }
}


/* Sources */
.article-sources { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); max-width: 44rem; margin-left: auto; margin-right: auto; }
.article-sources h2 { font-family: 'Inter', sans-serif; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 1rem 0; }
.article-sources ol { margin: 0; padding-left: 1.4rem; }
.article-sources li { font-size: 0.82rem; line-height: 1.55; color: var(--subtle); margin-bottom: 0.5rem; }

/* ===== Journal index — Persian Carpet Cities (5-column cards) ===== */
.cities-head { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 1.8rem; }
.cities-head h2 { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--subtle); margin: 0; white-space: nowrap; }
.cities-rule { height: 1px; background: var(--rule); flex: 1; }

.cities-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
/* Wider Field: left-align (single card for now; revisit when more pieces join) */
.cities-grid.wider-field-grid { justify-content: flex-start; }
.cities-grid.wider-field-grid .city-card { flex: 0 1 calc((100% - 2.5rem) / 3); }

.city-card { display: flex; flex-direction: column; flex: 0 1 calc((100% - 2 * 1.25rem) / 3); }
.cc-stripe { background: var(--cream-2); color: var(--ink); text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.6rem 0.5rem; text-decoration: none; display: block; border: 1px solid var(--rule); border-bottom: none; }
.cc-stripe:hover { background: var(--gold); }
.cc-thumb img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--rule); border-top: none; }
.cc-title { font-size: 1.08rem; font-weight: 400; line-height: 1.25; margin: 0.85rem 0 0.5rem; }
.cc-title a { color: var(--ink); text-decoration: none; }
.cc-title a:hover { color: var(--accent); }
.cc-stand { font-size: 0.85rem; line-height: 1.5; color: var(--muted); margin: 0 0 0.9rem; flex: 1; }
.cc-read { align-self: flex-start; font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; border: 1px solid var(--ink); padding: 0.5rem 1rem; transition: background 0.15s ease, color 0.15s ease; }
.cc-read:hover { background: var(--ink); color: var(--cream); }

@media (max-width: 760px) { .city-card { flex: 0 1 calc((100% - 1rem) / 2); } .cities-grid { gap: 1rem; } .cities-grid.wider-field-grid .city-card { flex: 0 1 calc((100% - 1rem) / 2); } }
@media (max-width: 440px) { .city-card { flex: 0 1 100%; } }
.collection-filters{
  display:flex; gap:1rem; justify-content:center;
  margin:0 0 2.5rem; padding-bottom:0.5rem;
}
.filter-btn{
  background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:0.8rem; letter-spacing:0.12em;
  text-transform:uppercase; color:#6E6354;
  padding:0.4rem 0.2rem; position:relative; transition:color 0.2s;
}
.filter-btn:hover{ color:#1F1B17; }
.filter-btn.is-active{ color:#1F1B17; }
.filter-btn.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:#C9B58A;
}