@charset "UTF-8";

:root {
  --paper: #f6f0e5;
  --paper-soft: #fffdf8;
  --paper-deep: #e9dfd0;
  --ink: #33271f;
  --ink-2: #4c3d32;
  --muted: #71645b;
  --orange: #b45128;
  --orange-deep: #8f3e20;
  --sage: #a9b39a;
  --sage-light: #dce1d5;
  --line: rgba(51, 39, 31, .18);
  --line-light: rgba(255, 253, 248, .2);
  --shadow: 0 24px 80px rgba(51, 39, 31, .12);
  --serif: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Zen Kaku Gothic New", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --display: "Cormorant Garamond", Georgia, serif;
  --content: min(1180px, calc(100% - 48px));
  --article: min(720px, calc(100% - 48px));
  --header-h: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .035em;
  -webkit-font-smoothing: antialiased;
}
body.is-menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { color: inherit; font: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: .025em; }
::selection { color: var(--paper-soft); background: var(--orange); }

:focus-visible {
  outline: 3px solid #146f8b;
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  color: #fff;
  background: #146f8b;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.reading-progress {
  position: fixed;
  z-index: 1001;
  inset: 0 0 auto;
  height: 3px;
  background: rgba(51, 39, 31, .08);
}
.reading-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Shared header */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  width: 100%;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  background: rgba(246, 240, 229, .9);
  backdrop-filter: blur(16px);
  transition: height .25s ease, border-color .25s ease, background .25s ease;
}
.site-header.is-scrolled { border-color: var(--line); background: rgba(255, 253, 248, .94); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1360px, calc(100% - 48px));
  height: 100%;
  margin-inline: auto;
}
.site-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; }
.site-brand__seal {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: var(--orange-deep);
  font-family: var(--display);
  font-size: 27px;
  font-style: italic;
  line-height: 1;
}
.site-brand__type { display: grid; line-height: 1.15; }
.site-brand__type strong { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.site-brand__type small { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.desktop-nav { display: flex; align-items: stretch; align-self: stretch; gap: clamp(18px, 2.6vw, 38px); }
.desktop-nav__link {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 44px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .06em;
}
.desktop-nav__link::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--orange);
  content: "";
  transform: scaleX(0);
  transition: transform .25s ease;
}
.desktop-nav__link:hover::after, .desktop-nav__link.is-current::after { transform: scaleX(1); }
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.menu-toggle > span:not(.menu-toggle__icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.menu-toggle i { display: block; width: 17px; height: 1px; background: var(--ink); }

/* Accessible right drawer */
.site-drawer { position: fixed; z-index: 500; inset: 0; overflow: hidden; pointer-events: none; visibility: hidden; }
.site-drawer__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(35, 27, 22, .5); opacity: 0; transition: opacity .35s ease; }
.site-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100% - 34px));
  height: 100%;
  padding: 24px clamp(24px, 6vw, 48px) 42px;
  overflow-y: auto;
  color: var(--paper-soft);
  background: var(--ink);
  transform: translateX(102%);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.site-drawer.is-open { pointer-events: auto; visibility: visible; }
.site-drawer.is-open .site-drawer__backdrop { opacity: 1; }
.site-drawer.is-open .site-drawer__panel { transform: translateX(0); }
.site-drawer__top { display: flex; align-items: center; justify-content: space-between; }
.site-drawer__issue { color: var(--sage); font-family: var(--display); font-size: 12px; letter-spacing: .18em; }
.drawer-close { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-light); border-radius: 50%; font-size: 30px; font-weight: 300; line-height: 1; }
.drawer-nav { display: grid; margin-top: clamp(44px, 10vh, 92px); border-top: 1px solid var(--line-light); }
.drawer-nav a { display: flex; align-items: baseline; gap: 18px; min-height: 65px; padding: 12px 4px; border-bottom: 1px solid var(--line-light); font-family: var(--display); font-size: clamp(24px, 7vw, 34px); }
.drawer-nav a span { color: var(--sage); font-size: 11px; letter-spacing: .16em; }
.site-drawer__note { margin: auto 0 0; padding-top: 38px; color: #d8cec3; font-family: var(--serif); font-size: 15px; line-height: 2; }

/* Shared text and interaction */
.eyebrow { margin-bottom: 18px; color: var(--orange-deep); font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow span { margin-left: 12px; color: var(--muted); font-family: var(--sans); font-size: 10px; letter-spacing: .12em; }
.eyebrow--light { color: #f4c7ad; }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px solid currentColor; font-weight: 700; font-size: 13px; letter-spacing: .08em; }
.text-link--arrow::after { content: "→"; transition: transform .2s ease; }
.text-link--arrow:hover::after { transform: translateX(5px); }
.fiction-note { margin: 30px 0 0; color: var(--muted); font-size: 12px; }

.js .js-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .65, .25, 1); }
.js .js-reveal.is-visible { opacity: 1; transform: none; }

.demo-toast {
  position: fixed;
  z-index: 900;
  right: 24px;
  bottom: 24px;
  width: min(420px, calc(100% - 48px));
  padding: 15px 18px;
  border-left: 4px solid var(--orange);
  color: #fff;
  background: var(--ink);
  box-shadow: var(--shadow);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease;
}
.demo-toast.is-visible { opacity: 1; transform: none; }

/* Demo notice */
.demo-notice { border-bottom: 1px solid var(--line); background: var(--sage-light); }
.demo-notice__inner { display: flex; align-items: center; gap: 22px; width: var(--content); min-height: 52px; padding-block: 8px; }
.demo-notice strong { flex: 0 0 auto; color: var(--orange-deep); font-family: var(--display); font-size: 11px; letter-spacing: .15em; }
.demo-notice p { margin: 0; color: var(--ink-2); font-size: 11px; line-height: 1.6; }

/* Story block 1: Hero */
.story-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); min-height: calc(100svh - var(--header-h) - 52px); background: var(--paper-soft); }
.story-hero__media { position: relative; min-height: 650px; overflow: hidden; background: var(--paper-deep); }
.story-hero__media::after { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .28); content: ""; pointer-events: none; }
.story-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; }
.image-caption { position: absolute; right: 20px; bottom: 18px; margin: 0; padding: 7px 10px; color: #fff; background: rgba(51, 39, 31, .78); font-family: var(--display); font-size: 9px; line-height: 1.55; letter-spacing: .13em; text-align: right; }
.story-hero__content { align-self: center; width: min(590px, calc(100% - 72px)); padding: 72px 0 68px clamp(44px, 6vw, 96px); }
.story-hero h1 { margin-bottom: 8px; font-size: clamp(36px, 4vw, 64px); line-height: 1.25; }
.story-hero__owner { display: flex; align-items: baseline; gap: 12px; margin-bottom: 38px; color: var(--muted); font-family: var(--serif); font-size: 15px; }
.story-hero__owner span { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.story-hero__catch { margin-bottom: 32px; font-family: var(--serif); font-size: clamp(30px, 3.3vw, 50px); font-weight: 600; line-height: 1.55; letter-spacing: .04em; }
.story-hero__lead { margin-bottom: 18px; color: var(--orange-deep); font-family: var(--serif); font-size: clamp(16px, 1.45vw, 19px); font-weight: 600; line-height: 2; }
.story-hero__text { max-width: 470px; margin-bottom: 32px; color: var(--muted); font-size: 14px; line-height: 2; }

/* Story block 2: Information strip */
.shop-info { display: grid; grid-template-columns: minmax(340px, 1.35fr) 2fr; color: var(--paper-soft); background: var(--ink); }
.shop-info__crumb { display: flex; align-items: center; gap: 13px; min-height: 105px; padding: 20px clamp(24px, 4vw, 64px); border-right: 1px solid var(--line-light); }
.shop-info__label, .shop-info dt { color: var(--sage); font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .18em; }
.shop-info__crumb p { margin: 0; font-size: 12px; white-space: nowrap; }
.shop-info__crumb i { margin-inline: 4px; color: var(--sage); font-style: normal; }
.shop-info__crumb small { color: #b8aba0; font-size: 9px; white-space: nowrap; }
.shop-info__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.shop-info__grid div { display: grid; align-content: center; min-height: 105px; padding: 20px clamp(18px, 3vw, 38px); border-right: 1px solid var(--line-light); }
.shop-info__grid div:last-child { border-right: 0; }
.shop-info dd { margin: 6px 0 0; font-family: var(--serif); font-size: 15px; }
.shop-info dd small { display: block; color: #b8aba0; font-family: var(--sans); font-size: 9px; }

/* Story blocks 3-4: Chapters */
.story-chapter { padding: clamp(96px, 12vw, 180px) 0; }
.story-chapter--person { background: var(--paper); }
.chapter-header { display: grid; grid-template-columns: .7fr 1.3fr; align-items: end; width: var(--content); margin: 0 auto clamp(72px, 9vw, 126px); padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.chapter-header__number { margin: 0; color: var(--orange); font-family: var(--display); font-size: clamp(100px, 15vw, 220px); font-weight: 500; line-height: .62; letter-spacing: -.045em; }
.chapter-header div { justify-self: end; width: min(630px, 100%); }
.chapter-header span { color: var(--orange-deep); font-family: var(--display); font-size: 12px; letter-spacing: .2em; }
.chapter-header h2 { margin: 16px 0 0; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.48; }
.chapter-layout { display: grid; grid-template-columns: minmax(190px, .6fr) minmax(0, 1.4fr); gap: clamp(46px, 8vw, 130px); width: min(1050px, calc(100% - 48px)); margin-inline: auto; }
.chapter-margin { align-self: start; position: sticky; top: calc(var(--header-h) + 40px); padding-top: 16px; border-top: 1px solid var(--ink); }
.chapter-margin span { color: var(--orange-deep); font-family: var(--display); font-size: 12px; letter-spacing: .18em; }
.chapter-margin p { margin: 26px 0 0; font-family: var(--serif); font-size: 18px; line-height: 2; }
.editorial-copy { max-width: 720px; font-family: var(--serif); font-size: clamp(16px, 1.4vw, 18px); line-height: 2.45; letter-spacing: .045em; }
.editorial-copy > p { margin-bottom: 2.25em; }
.editorial-copy strong { color: var(--orange-deep); font-weight: 700; }
.drop-cap::first-letter { float: left; margin: .13em .14em 0 0; color: var(--orange); font-family: var(--display); font-size: 5em; line-height: .66; }
.single-line, .question-line { margin-block: 3.5em !important; color: var(--orange-deep); font-size: clamp(21px, 2.2vw, 31px); font-weight: 600; line-height: 1.8; text-align: center; }
.story-quote { position: relative; width: min(900px, calc(100vw - 48px)); margin: clamp(72px, 9vw, 120px) 0 clamp(72px, 9vw, 120px) clamp(-180px, -11vw, -74px); padding: clamp(38px, 5vw, 68px); border-top: 1px solid var(--orange); border-bottom: 1px solid var(--orange); background: rgba(255, 253, 248, .55); }
.story-quote figcaption { margin-bottom: 24px; color: var(--orange-deep); font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.story-quote blockquote { margin: 0; font-size: clamp(21px, 2.5vw, 35px); font-weight: 600; line-height: 1.85; }
.story-quote--small { width: auto; margin-left: 0; padding-inline: 0; background: transparent; }
.story-quote--small blockquote { font-size: clamp(19px, 2vw, 27px); }

.story-chapter--shop { padding-bottom: 0; color: var(--paper-soft); background: var(--ink); }
.chapter-header--light { border-color: var(--line-light); }
.chapter-header--light span { color: #f1b493; }
.chapter-visual { position: relative; width: 100%; margin: 0; overflow: hidden; }
.chapter-visual::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(51,39,31,.05), rgba(51,39,31,.34)); content: ""; }
.chapter-visual img { width: 100%; height: clamp(420px, 65vw, 760px); object-fit: cover; object-position: 100% 50%; }
.chapter-visual figcaption { position: absolute; z-index: 1; right: 24px; bottom: 18px; margin: 0; padding: 7px 10px; background: rgba(51,39,31,.8); font-family: var(--sans); font-size: 9px; letter-spacing: .08em; }
.chapter-two-copy { display: grid; grid-template-columns: minmax(190px, .6fr) minmax(0, 1.4fr); gap: clamp(46px, 8vw, 130px); width: min(1050px, calc(100% - 48px)); margin-inline: auto; padding: clamp(96px, 12vw, 180px) 0; }
.sensory-note { align-self: start; position: sticky; top: calc(var(--header-h) + 40px); padding-top: 16px; border-top: 1px solid var(--line-light); }
.sensory-note span { color: #f1b493; font-family: var(--display); font-size: 40px; }
.sensory-note p { margin: 25px 0 0; color: var(--sage-light); font-family: var(--serif); font-size: 18px; line-height: 2.2; }
.editorial-copy--light { color: #eee6dc; }
.story-quote--light { border-color: #d88458; background: rgba(255,255,255,.035); }
.story-quote--light figcaption { color: #f1b493; }
.chapter-close { margin-top: 5em !important; padding-top: 2.8em; border-top: 1px solid var(--line-light); color: #f4c7ad; font-size: clamp(21px, 2.4vw, 32px); line-height: 2 !important; }

/* Shared story section heading */
.story-section { padding: clamp(96px, 12vw, 170px) 0; }
.section-heading { width: var(--content); margin: 0 auto clamp(58px, 8vw, 100px); }
.section-heading__index { margin-bottom: 18px; color: var(--orange-deep); font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .18em; }
.section-heading h2 { margin: 0; font-size: clamp(38px, 5vw, 70px); line-height: 1.5; }
.section-heading--split { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 70px; }
.section-heading--split > p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }

/* Story block 5: Recommendations */
.recommendations { background: var(--paper-soft); }
.recommendation-list { display: grid; gap: 0; width: min(1100px, calc(100% - 48px)); margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.recommendation-item { display: grid; grid-template-columns: 80px minmax(220px, .75fr) minmax(0, 1.25fr); align-items: center; gap: clamp(26px, 5vw, 76px); min-height: 320px; padding: 44px 0; border-bottom: 1px solid var(--line); }
.recommendation-item:nth-child(even) { transform: translateX(6%); }
.recommendation-item__number { align-self: start; color: var(--orange); font-family: var(--display); font-size: 36px; }
.recommendation-item__visual { position: relative; aspect-ratio: 1 / .84; overflow: hidden; background: var(--paper-deep); }
.recommendation-item__visual--aroma { display: flex; align-items: end; justify-content: center; gap: 18px; padding-bottom: 28px; background: linear-gradient(145deg, #3f3026, #73503a); }
.recommendation-item__visual--aroma::after { width: 110px; height: 48px; border: 3px solid #eadaca; border-top: 0; border-radius: 0 0 60px 60px; content: ""; }
.recommendation-item__visual--aroma i { position: absolute; bottom: 72px; width: 1px; height: 72px; background: #eadaca; opacity: .65; transform: rotate(8deg); }
.recommendation-item__visual--aroma i:nth-child(2) { height: 94px; transform: translateX(24px) rotate(-8deg); }
.recommendation-item__visual--aroma i:nth-child(3) { height: 82px; transform: translateX(-24px) rotate(6deg); }
.recommendation-item__visual--greeting { display: grid; place-items: center; background: var(--sage); }
.recommendation-item__visual--greeting span { color: rgba(51,39,31,.82); font-family: var(--display); font-size: clamp(30px, 5vw, 70px); font-style: italic; letter-spacing: .05em; transform: rotate(-7deg); }
.recommendation-item__visual--pause { background: linear-gradient(90deg, var(--paper-deep) 49.5%, var(--ink) 50%); }
.recommendation-item__visual--pause span { position: absolute; top: 25%; left: 50%; width: 38%; height: 50%; border-radius: 50% 50% 48% 48%; background: var(--orange); transform: translateX(-50%); mix-blend-mode: multiply; }
.recommendation-item h3 { margin-bottom: 18px; font-size: clamp(25px, 3vw, 38px); line-height: 1.7; }
.recommendation-item p { max-width: 530px; margin: 0; color: var(--muted); font-size: 14px; }

/* Story block 6: Reader gift */
.reader-gift { position: relative; display: grid; place-items: center; min-height: 760px; overflow: hidden; color: #fff; background: var(--ink); }
.reader-gift__image { position: absolute; inset: 0; }
.reader-gift__image::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(51,39,31,.94) 0%, rgba(51,39,31,.84) 52%, rgba(51,39,31,.34) 100%); content: ""; }
.reader-gift__image img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.reader-gift__content { position: relative; z-index: 1; width: min(1100px, calc(100% - 48px)); padding: 100px 0; }
.reader-gift__content h2 { max-width: 760px; margin-bottom: 30px; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.55; }
.reader-gift__content > p:not(.eyebrow):not(.reader-gift__notice) { max-width: 650px; color: #e8ded2; font-size: 15px; }
.reader-gift__ticket { position: relative; display: grid; width: min(540px, 100%); margin: 38px 0 24px; padding: 20px 24px; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.07); }
.reader-gift__ticket::before, .reader-gift__ticket::after { position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); content: ""; transform: translateY(-50%); }
.reader-gift__ticket::before { left: -13px; }
.reader-gift__ticket::after { right: -13px; }
.reader-gift__ticket span, .reader-gift__ticket small { color: #f4c7ad; font-family: var(--display); font-size: 10px; letter-spacing: .18em; }
.reader-gift__ticket strong { margin-block: 4px; font-family: var(--display); font-size: clamp(24px, 4vw, 40px); font-weight: 500; letter-spacing: .06em; }
.reader-gift__notice { margin: 0; color: #e9cfc0; font-size: 11px; }

/* Story block 7: News */
.shop-news { background: var(--paper); }
.news-rows { width: min(1100px, calc(100% - 48px)); margin-inline: auto; border-top: 1px solid var(--ink); }
.news-row { display: grid; grid-template-columns: 190px 1fr 70px; gap: 36px; min-height: 190px; padding: 34px 8px; border-bottom: 1px solid var(--line); }
.news-row > p:first-child { margin: 0; }
.news-row > p:first-child span { display: block; color: var(--orange-deep); font-family: var(--display); font-size: 13px; letter-spacing: .12em; }
.news-row > p:first-child small { color: var(--muted); font-size: 9px; }
.news-row h3 { margin-bottom: 13px; font-size: clamp(22px, 2.8vw, 32px); }
.news-row div p { margin: 0; color: var(--muted); font-size: 13px; }
.news-row > span { justify-self: end; color: rgba(51,39,31,.16); font-family: var(--display); font-size: 56px; line-height: 1; }
.shop-news > .fiction-note { width: min(1100px, calc(100% - 48px)); margin-inline: auto; }

/* Story block 8: Voices */
.voices { padding: clamp(96px, 12vw, 170px) 0; color: var(--ink); background: var(--sage-light); }
.voices__inner { width: var(--content); margin-inline: auto; }
.section-heading--light { width: auto; }
.fiction-badge { display: inline-flex; margin: 26px 0 0; padding: 7px 12px; border: 1px solid var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 38px); }
.voice-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 390px; margin: 0; padding: clamp(30px, 4vw, 50px); border-top: 2px solid var(--orange-deep); background: rgba(255,253,248,.78); box-shadow: 0 18px 46px rgba(51,39,31,.07); }
.voice-card--offset { transform: translateY(36px); }
.voice-card > p { margin: 0 0 44px; font-family: var(--serif); font-size: clamp(16px, 1.6vw, 20px); line-height: 2.15; }
.voice-card footer { display: flex; align-items: center; gap: 14px; }
.voice-card footer > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: var(--orange-deep); font-family: var(--display); font-size: 20px; }
.voice-card cite { font-style: normal; font-size: 11px; line-height: 1.5; }
.voice-card cite small { color: var(--muted); font-size: 9px; }

/* Story block 9: Actions */
.shop-actions { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr); min-height: 850px; background: var(--paper-soft); }
.shop-actions__map { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 76px); background: var(--paper-deep); }
.map-grid { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.map-grid::before, .map-grid::after, .map-grid i { position: absolute; background: rgba(51,39,31,.2); content: ""; }
.map-grid::before { top: 0; bottom: 0; left: 42%; width: 5px; transform: rotate(8deg); }
.map-grid::after { top: 58%; right: 0; left: 0; height: 8px; transform: rotate(-5deg); }
.map-grid i:nth-child(1) { top: 25%; right: 0; left: 0; height: 2px; }
.map-grid i:nth-child(2) { top: 0; bottom: 0; left: 70%; width: 2px; }
.map-grid i:nth-child(3) { top: 75%; right: 0; left: 0; height: 1px; }
.map-grid i:nth-child(4) { top: 0; bottom: 0; left: 18%; width: 1px; }
.map-pin { position: absolute; z-index: 2; top: 43%; left: 51%; display: grid; place-items: center; width: 58px; height: 58px; border: 5px solid var(--paper); border-radius: 50% 50% 50% 0; color: #fff; background: var(--orange-deep); box-shadow: 0 8px 24px rgba(51,39,31,.25); transform: rotate(-45deg); }
.map-pin b { font-family: var(--display); font-size: 28px; font-style: italic; transform: rotate(45deg); }
.map-grid em { position: absolute; right: 18px; bottom: 16px; color: var(--muted); font-family: var(--display); font-size: 10px; letter-spacing: .13em; }
.shop-actions__map > p { margin: 14px 0 0; color: var(--muted); font-size: 10px; }
.shop-actions__content { align-self: center; padding: clamp(80px, 9vw, 140px) clamp(36px, 7vw, 110px); }
.shop-actions__content h2 { margin-bottom: 28px; font-size: clamp(38px, 4vw, 54px); line-height: 1.45; }
.shop-actions__content > p:not(.eyebrow):not(.action-note):not(.closing-line) { max-width: 650px; color: var(--muted); font-size: 14px; }
.action-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 40px 0 22px; }
.action-pill { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; align-items: center; min-height: 86px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); text-align: left; transition: color .2s ease, background .2s ease, transform .2s ease; }
.action-pill:hover { color: #fff; background: var(--orange-deep); transform: translateY(-2px); }
.action-pill > span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; font-size: 17px; }
.action-pill strong { font-family: var(--serif); font-size: 13px; }
.action-pill small { color: var(--muted); font-family: var(--display); font-size: 8px; letter-spacing: .12em; }
.action-pill:hover small { color: #f5d6c5; }
.action-note { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
.closing-line { margin: 64px 0 0; padding-top: 30px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: clamp(18px, 2vw, 25px); line-height: 2; }
.closing-line em { color: var(--orange-deep); font-size: 1.35em; font-style: normal; }
.mobile-actions { display: none; }

/* Shared footer */
.site-footer { padding: clamp(70px, 9vw, 120px) 0 24px; color: #f8f1e8; background: #2b211b; }
.site-footer__top, .site-footer__middle, .site-footer__notice, .site-footer__bottom { width: var(--content); margin-inline: auto; }
.site-footer__top { display: flex; align-items: end; justify-content: space-between; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--line-light); }
.site-brand--footer .site-brand__type small { color: #b9aa9d; }
.site-footer__statement { margin: 0; color: #e9ddd1; font-family: var(--serif); font-size: clamp(18px, 2vw, 28px); line-height: 1.9; text-align: right; }
.site-footer__middle { display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; padding: 58px 0; border-bottom: 1px solid var(--line-light); }
.footer-nav { display: grid; grid-template-columns: repeat(5, auto); gap: clamp(16px, 3vw, 34px); align-items: start; }
.footer-nav a { display: grid; gap: 6px; font-family: var(--display); font-size: 18px; }
.footer-nav a span { color: var(--sage); font-size: 9px; letter-spacing: .15em; }
.site-footer__area { padding-left: 34px; border-left: 1px solid var(--line-light); }
.site-footer__area span { color: var(--sage); font-family: var(--display); font-size: 10px; letter-spacing: .18em; }
.site-footer__area strong { display: block; margin: 10px 0; font-family: var(--serif); font-size: 17px; }
.site-footer__area p { margin: 0; color: #b9aa9d; font-size: 10px; }
.site-footer__notice { display: grid; grid-template-columns: 160px 1fr; gap: 26px; padding: 32px 0; border-bottom: 1px solid var(--line-light); }
.site-footer__notice strong { color: #f1b493; font-family: var(--display); font-size: 11px; letter-spacing: .16em; }
.site-footer__notice p { margin: 0; color: #cdbfb2; font-size: 11px; line-height: 1.8; }
.site-footer__bottom { display: flex; justify-content: space-between; padding-top: 24px; color: #8f8277; font-family: var(--display); font-size: 9px; letter-spacing: .12em; }

/* =========================================================
   HOME — nationwide editorial magazine
   ========================================================= */
.page-home { background: var(--paper-soft); }
.page-home .site-brand { gap: 0; }
.site-brand__mark { display: grid; place-items: center; width: 38px; height: 38px; margin-right: 2px; border-radius: 50%; color: #fff; background: var(--orange-deep); font-family: var(--display); font-size: 27px; font-style: italic; line-height: 1; }
.site-brand__name { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.site-brand__edition { align-self: flex-start; margin: 6px 0 0 8px; padding: 1px 5px; color: var(--orange-deep); border: 1px solid currentColor; font-family: var(--display); font-size: 7px; font-weight: 600; letter-spacing: .12em; }
.site-nav { display: flex; align-items: stretch; align-self: stretch; gap: clamp(18px, 2.6vw, 38px); }
.site-nav__link { position: relative; display: grid; place-items: center; min-width: 52px; min-height: 44px; font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: .06em; }
.site-nav__link::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--orange); content: ""; transform: scaleX(0); transition: transform .25s ease; }
.site-nav__link:hover::after { transform: scaleX(1); }
.site-nav__link--accent { color: var(--orange-deep); }
.menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.menu-toggle__icon { display: flex; gap: 5px; }
.menu-toggle__icon i { display: block; width: 17px; height: 1px; background: var(--ink); }
.site-drawer__scrim { width: 100%; }

.section-shell { width: var(--content); margin-inline: auto; }
.section-pad { padding: clamp(96px, 12vw, 170px) 0; }
.page-home .section-heading { display: grid; grid-template-columns: .2fr 1.2fr .6fr; align-items: end; gap: clamp(24px, 4vw, 54px); width: auto; margin-bottom: clamp(62px, 8vw, 108px); padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.page-home .section-heading__index { align-self: start; margin: 5px 0 0; color: var(--orange-deep); font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .18em; }
.section-heading__kicker { margin-bottom: 12px; color: var(--orange-deep); font-family: var(--serif); font-size: 15px; font-weight: 600; }
.section-heading__title { margin: 0; font-size: clamp(38px, 4.2vw, 60px); line-height: 1.5; }
.section-heading__lead { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 2; }
.section-heading__index--light { color: #f1b493 !important; }
.section-heading__title--light { color: var(--paper-soft); }
.section-footnote { margin: 28px 0 0; color: var(--muted); font-size: 11px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 58px; padding: 12px 25px; border: 1px solid transparent; font-size: 13px; font-weight: 700; letter-spacing: .06em; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--primary { color: #fff; background: var(--orange-deep); }
.button--primary:hover { background: var(--ink); }
.button--outline { border-color: var(--ink); background: transparent; }
.button--outline:hover { color: #fff; background: var(--ink); }
.button--light { color: var(--ink); background: var(--paper-soft); }
.button--light:hover { color: #fff; background: var(--orange-deep); }
.pc-br { display: inline; }
.sp-br { display: none; }

/* Home hero / fv-02 reinterpretation */
.home-hero { position: relative; min-height: min(900px, calc(100svh - var(--header-h))); overflow: hidden; background: var(--paper); isolation: isolate; }
.home-hero__visual { position: absolute; z-index: -2; inset: 0; }
.home-hero__visual::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246,240,229,.08) 0 48%, rgba(51,39,31,.02) 75%, rgba(51,39,31,.16)); content: ""; }
.home-hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-hero__wipe { position: absolute; z-index: 2; inset: 0; background: var(--paper); transform-origin: right center; animation: home-wipe 1.15s .12s cubic-bezier(.72, 0, .22, 1) both; }
@keyframes home-wipe { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.home-hero__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: min(1360px, calc(100% - 64px)); min-height: inherit; margin-inline: auto; }
.home-hero__copy { width: min(670px, 94%); padding: 80px 0 120px; }
.home-hero__eyebrow { margin-bottom: 25px; color: var(--orange-deep); font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: .08em; }
.home-hero__title { margin-bottom: 30px; font-size: clamp(48px, 6vw, 86px); line-height: 1.34; letter-spacing: .03em; }
.home-hero__lead { max-width: 590px; margin-bottom: 36px; color: var(--ink-2); font-size: 14px; line-height: 2.15; }
.home-hero__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.home-hero__actions .text-link { min-height: 50px; font-size: 12px; }
.hero-story-note { align-self: end; justify-self: end; display: grid; width: min(430px, 88%); margin-bottom: clamp(70px, 9vw, 120px); padding: 30px 34px 34px; border-top: 3px solid var(--orange); color: var(--paper-soft); background: rgba(51,39,31,.9); box-shadow: 0 22px 58px rgba(51,39,31,.2); backdrop-filter: blur(7px); }
.hero-story-note__index { color: #f1b493; font-family: var(--display); font-size: 10px; letter-spacing: .18em; }
.hero-story-note__label { margin-top: 16px; color: #cfc3b8; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.hero-story-note__title { margin: 10px 0 18px; font-family: var(--serif); font-size: clamp(24px, 3vw, 38px); font-weight: 600; line-height: 1.65; }
.hero-story-note__meta { padding-top: 15px; border-top: 1px solid var(--line-light); color: #cfc3b8; font-size: 10px; }
.image-caption--hero { right: auto; bottom: 16px; left: 24px; color: var(--muted); background: rgba(255,253,248,.72); text-align: left; }
.home-hero__scroll { position: absolute; right: 24px; bottom: 30px; margin: 0; color: var(--paper-soft); font-family: var(--display); font-size: 9px; letter-spacing: .18em; writing-mode: vertical-rl; }
.home-hero__scroll::after { display: block; width: 1px; height: 42px; margin: 10px auto 0; background: currentColor; content: ""; }
.page-home .demo-notice { display: flex; align-items: center; gap: 20px; min-height: 58px; padding: 10px max(24px, calc((100% - 1180px) / 2)); border-block: 1px solid var(--line); background: var(--sage-light); }
.page-home .demo-notice__label { flex: 0 0 auto; color: var(--orange-deep); font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .16em; }
.page-home .demo-notice p { margin: 0; font-size: 11px; line-height: 1.65; }

/* Home stories */
.home-stories { background: var(--paper-soft); }
.stories-editorial { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 54px); }
.lead-story { min-width: 0; background: var(--paper); box-shadow: var(--shadow); }
.lead-story__link { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(270px, .95fr); min-height: 650px; }
.lead-story__figure { position: relative; min-height: 100%; margin: 0; overflow: hidden; }
.lead-story__figure::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(51,39,31,.24), transparent 38%); content: ""; }
.lead-story__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; transition: transform .7s ease; }
.lead-story__link:hover img { transform: scale(1.025); }
.lead-story__figure figcaption { position: absolute; z-index: 1; right: 12px; bottom: 10px; left: 12px; color: #fff; font-size: 8px; line-height: 1.5; text-align: right; }
.lead-story__body { align-self: center; padding: clamp(34px, 5vw, 66px); }
.lead-story__number, .story-side-item__number { margin-bottom: 16px; color: var(--orange-deep); font-family: var(--display); font-size: 10px; letter-spacing: .15em; }
.lead-story__area, .story-side-item__area { margin-bottom: 10px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.lead-story__title { margin-bottom: 24px; font-size: clamp(32px, 3.5vw, 46px); line-height: 1.55; }
.lead-story__summary { color: var(--muted); font-size: 13px; line-height: 2; }
.lead-story__cta { display: inline-flex; gap: 20px; margin-top: 25px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 700; }
.story-side-list { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 24px; }
.story-side-item { min-width: 0; border: 1px solid var(--line); background: var(--paper); }
.story-side-item__link { display: grid; grid-template-columns: 150px 1fr; min-height: 100%; }
.story-side-item__visual { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 250px; color: var(--paper-soft); background: var(--sage); }
.story-side-item__visual span { font-family: var(--display); font-size: 74px; font-style: italic; line-height: 1; }
.story-side-item__visual small { font-family: var(--display); font-size: 8px; letter-spacing: .17em; }
.story-side-item--sora .story-side-item__visual { color: var(--ink); background: #d8c9c0; }
.story-side-item--sukoyaka .story-side-item__visual { background: #596153; }
.story-side-item__body { align-self: center; padding: 30px; }
.story-side-item__title { margin-bottom: 14px; font-size: clamp(20px, 2.3vw, 29px); line-height: 1.7; }
.story-side-item__shop { margin-bottom: 18px; color: var(--muted); font-size: 10px; }
.status-label { display: inline-block; padding: 5px 8px; border: 1px solid var(--line); color: var(--muted); font-family: var(--display); font-size: 8px; letter-spacing: .14em; }
.story-preview-list { display: grid; margin-top: 58px; border-top: 1px solid var(--ink); }
.story-preview-list__item { display: grid; grid-template-columns: 80px 180px 1fr 44px; align-items: center; min-height: 112px; padding: 18px 6px; border-bottom: 1px solid var(--line); transition: padding .2s ease, background .2s ease; }
.story-preview-list__item:hover { padding-inline: 18px; background: var(--paper); }
.story-preview-list__number { color: var(--orange); font-family: var(--display); font-size: 23px; }
.story-preview-list__area { color: var(--muted); font-size: 10px; }
.story-preview-list__item strong { font-family: var(--serif); font-size: clamp(19px, 2.2vw, 28px); }
.story-preview-list__arrow { justify-self: end; font-size: 20px; }

/* Nationwide area architecture */
.home-areas { color: var(--paper-soft); background: var(--ink); }
.area-heading { display: grid; grid-template-columns: .15fr 1.3fr .55fr; align-items: end; gap: clamp(24px, 4vw, 54px); margin-bottom: 64px; padding-bottom: 36px; border-bottom: 1px solid var(--line-light); }
.area-heading .section-heading__title { font-size: clamp(36px, 3.6vw, 50px); }
.area-heading__lead { margin: 0; color: #c9bcb0; font-size: 13px; line-height: 2; }
.home-areas .section-heading__kicker { color: #f1b493; }
.area-levels { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 76px; padding: 0; border: 1px solid var(--line-light); list-style: none; }
.area-levels li { position: relative; display: grid; place-items: center; min-height: 112px; border-right: 1px solid var(--line-light); }
.area-levels li:last-child { border-right: 0; }
.area-levels li:not(:last-child)::after { position: absolute; z-index: 1; right: -11px; top: 50%; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-light); border-radius: 50%; color: var(--sage); background: var(--ink); content: "→"; font-size: 10px; transform: translateY(-50%); }
.area-levels span { color: var(--sage); font-family: var(--display); font-size: 9px; letter-spacing: .16em; }
.area-levels strong { margin-top: 6px; font-family: var(--serif); font-size: clamp(15px, 2vw, 22px); }
.region-board { display: grid; grid-template-columns: .72fr 1.28fr; min-height: 730px; border: 1px solid var(--line-light); }
.region-board__list { display: grid; grid-template-rows: repeat(8, 1fr); border-right: 1px solid var(--line-light); }
.region-link { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; min-height: 72px; padding: 10px 22px; border-bottom: 1px solid var(--line-light); color: #d8cec4; transition: color .2s ease, background .2s ease; }
.region-link:last-child { border-bottom: 0; }
.region-link > span { color: var(--sage); font-family: var(--display); font-size: 10px; }
.region-link strong { font-family: var(--serif); font-size: 18px; }
.region-link small { color: #887c72; font-family: var(--display); font-size: 7px; letter-spacing: .12em; }
.region-link:hover, .region-link--active { color: #fff; background: var(--orange-deep); }
.region-link--active span, .region-link--active small { color: #f4d0bc; }
.active-area { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(46px, 7vw, 100px); color: var(--ink); background: var(--paper); }
.active-area__eyebrow { margin-bottom: 18px; color: var(--orange-deep); font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .18em; }
.area-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 42px; font-size: 10px; }
.area-breadcrumb i { color: var(--orange); font-style: normal; }
.active-area__title { margin-bottom: 28px; font-size: clamp(38px, 5.4vw, 72px); line-height: 1.45; }
.active-area__text { max-width: 620px; color: var(--muted); font-size: 14px; line-height: 2.1; }
.active-area__stats { display: flex; gap: 58px; margin: 34px 0 12px; }
.active-area__stats div { min-width: 120px; }
.active-area__stats dt { color: var(--muted); font-size: 9px; }
.active-area__stats dd { margin: 0; color: var(--orange-deep); font-family: var(--display); }
.active-area__stats dd { font-size: 56px; line-height: 1.2; }
.active-area__stats dd span { margin-left: 4px; font-family: var(--sans); font-size: 11px; }
.active-area__note { margin-bottom: 28px; color: var(--muted); font-size: 10px; }
.active-area .button { align-self: flex-start; }

/* Events ledger */
.home-events { background: var(--paper); }
.event-ledger { border-top: 1px solid var(--ink); }
.event-row { display: grid; grid-template-columns: 80px 190px minmax(0, 1fr) 130px; align-items: center; gap: 32px; min-height: 190px; padding: 30px 6px; border-bottom: 1px solid var(--line); }
.event-row__number { margin: 0; color: rgba(51,39,31,.25); font-family: var(--display); font-size: 50px; line-height: 1; }
.event-row__meta { display: grid; gap: 8px; }
.event-row__meta span { color: var(--orange-deep); font-size: 10px; font-weight: 700; }
.event-row__meta time { color: var(--muted); font-family: var(--display); font-size: 9px; letter-spacing: .14em; }
.event-row__body h3 { margin-bottom: 12px; font-size: clamp(23px, 3vw, 34px); line-height: 1.55; }
.event-row__body p { margin: 0; color: var(--muted); font-size: 12px; }
.event-row__link { justify-self: end; display: grid; place-items: center; width: 104px; height: 104px; border: 1px solid var(--line); border-radius: 50%; font-size: 10px; font-weight: 700; line-height: 1.4; text-align: center; transition: color .2s ease, background .2s ease; }
.event-row__link:hover { color: #fff; background: var(--orange-deep); }

/* Feature route */
.route-feature { display: grid; grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr); color: var(--paper-soft); background: var(--orange-deep); }
.route-feature__intro { position: relative; align-self: center; padding: clamp(80px, 9vw, 140px); }
.route-feature__intro .section-heading__index { color: #f6c6ac; }
.route-feature__kicker { margin: 34px 0 12px; color: #f6c6ac; font-family: var(--serif); font-size: 15px; }
.route-feature__title { margin-bottom: 30px; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.48; }
.route-feature__lead { color: #efd8cb; font-size: 13px; line-height: 2.1; }
.route-feature__stamp { display: inline-flex; margin: 38px 0 0; padding: 7px 10px; border: 1px solid rgba(255,255,255,.44); font-family: var(--display); font-size: 9px; letter-spacing: .16em; }
.route-timeline { position: relative; display: grid; align-content: center; gap: 0; margin: 0; padding: clamp(80px, 9vw, 140px) clamp(42px, 7vw, 104px); color: var(--ink); background: var(--paper-soft); list-style: none; }
.route-timeline::before { position: absolute; top: 15%; bottom: 15%; left: clamp(119px, 14vw, 206px); width: 1px; background: var(--line); content: ""; }
.route-stop { position: relative; display: grid; grid-template-columns: 94px 28px 1fr; gap: 20px; min-height: 190px; padding: 28px 0; }
.route-stop time { color: var(--orange-deep); font-family: var(--display); font-size: 28px; }
.route-stop__dot { position: relative; z-index: 1; align-self: start; width: 18px; height: 18px; margin-top: 8px; border: 5px solid var(--paper-soft); border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 1px var(--line); }
.route-stop--featured .route-stop__dot { background: var(--orange-deep); }
.route-stop div > p { margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.route-stop h3 { margin-bottom: 18px; font-size: clamp(22px, 3vw, 34px); }
.route-stop a { display: inline-flex; gap: 18px; padding-bottom: 5px; border-bottom: 1px solid currentColor; color: var(--orange-deep); font-size: 10px; font-weight: 700; }
.route-feature__note { position: absolute; align-self: end; justify-self: end; margin: 0 24px 20px 0; color: var(--muted); font-size: 9px; }

/* Support steps */
.support-guide { background: var(--paper-soft); }
.support-guide__heading { max-width: 850px; margin-bottom: 86px; }
.support-guide__heading .section-heading__index { color: var(--orange-deep); }
.support-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 50px); margin: 0; padding: 0; list-style: none; }
.support-steps::before { position: absolute; top: 63px; right: 12%; left: 12%; height: 1px; background: var(--line); content: ""; }
.support-step { position: relative; z-index: 1; text-align: center; }
.support-step__number { display: grid; place-items: center; width: 126px; height: 126px; margin: 0 auto 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--orange-deep); background: var(--paper-soft); font-family: var(--display); font-size: 46px; }
.support-step span { color: var(--orange-deep); font-family: var(--display); font-size: 10px; letter-spacing: .18em; }
.support-step h3 { margin: 9px 0 15px; font-size: clamp(23px, 2.6vw, 32px); }
.support-step div p { max-width: 310px; margin: 0 auto; color: var(--muted); font-size: 12px; }

/* Demo numbers */
.demo-numbers { padding: clamp(90px, 11vw, 150px) 0; color: var(--paper-soft); background: var(--ink); }
.demo-numbers .section-shell { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(60px, 9vw, 130px); align-items: end; }
.demo-numbers__heading h2 { margin: 26px 0; font-size: clamp(40px, 5vw, 68px); line-height: 1.5; }
.demo-numbers__heading > p:last-child { margin: 0; color: #bfb1a5; font-size: 12px; }
.demo-numbers__list { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.demo-number { display: flex; flex-direction: column-reverse; justify-content: space-between; min-height: 250px; padding: 26px 20px; border-right: 1px solid var(--line-light); }
.demo-number:last-child { border-right: 0; }
.demo-number dt { color: #c9bcb0; font-size: 10px; }
.demo-number dd { margin: 0; }
.demo-number strong { color: #f1b493; font-family: var(--display); font-size: clamp(72px, 9vw, 112px); font-weight: 500; line-height: .8; }
.demo-number span { display: block; margin-top: 16px; color: var(--sage); font-family: var(--display); font-size: 9px; letter-spacing: .15em; }

/* Participation */
.participation { background: var(--paper); }
.participation__heading { display: grid; grid-template-columns: .25fr 1fr .75fr; align-items: end; gap: 50px; margin-bottom: 70px; }
.participation__heading .section-heading__index { color: var(--orange-deep); }
.participation__heading > p:last-child { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.participation__paths { display: grid; grid-template-columns: repeat(2, 1fr); }
.participation-path { min-height: 580px; padding: clamp(44px, 6vw, 80px); border: 1px solid var(--line); }
.participation-path--writers { border-left: 0; background: var(--sage-light); }
.participation-path__number { margin-bottom: 52px; color: var(--orange-deep); font-family: var(--display); font-size: 10px; letter-spacing: .16em; }
.participation-path h3 { margin-bottom: 24px; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.55; }
.participation-path > p:not(.participation-path__number):not(.participation-path__caveat) { max-width: 510px; color: var(--muted); font-size: 13px; }
.participation-path__caveat { margin: 30px 0; color: var(--muted); font-size: 10px; }

/* Home footer aliases */
.page-home .site-footer { padding-top: 84px; }
.site-footer__inner { width: var(--content); margin-inline: auto; }
.site-footer__brand { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line-light); }
.site-footer__brand > p:last-child { margin: 0; color: #cdbfb2; font-family: var(--serif); font-size: 18px; }
.site-footer__logo { display: flex; align-items: center; margin: 0; font-family: var(--display); font-size: 30px; }
.site-footer__logo span { display: grid; place-items: center; width: 42px; height: 42px; margin-right: 3px; border-radius: 50%; color: #fff; background: var(--orange-deep); font-size: 30px; font-style: italic; }
.site-footer__nav { display: grid; grid-template-columns: repeat(5, 1fr); margin: 48px 0; border-block: 1px solid var(--line-light); }
.site-footer__nav a { display: grid; place-items: center; min-height: 72px; border-right: 1px solid var(--line-light); font-family: var(--display); font-size: 17px; }
.site-footer__nav a:last-child { border-right: 0; }
.site-footer__legal { display: flex; align-items: end; justify-content: space-between; gap: 60px; }
.site-footer__legal > p:first-child { max-width: 850px; margin: 0; color: #cdbfb2; font-size: 11px; line-height: 1.85; }
.site-footer__copyright { flex: 0 0 auto; margin: 0; color: #8f8277; font-family: var(--display); letter-spacing: .1em; }

@media (max-width: 1100px) {
  :root { --content: min(100% - 40px, 980px); }
  .desktop-nav { gap: 18px; }
  .story-hero { grid-template-columns: 1fr 1fr; }
  .story-hero__content { width: calc(100% - 42px); padding-left: 40px; }
  .shop-info { grid-template-columns: 1fr; }
  .shop-info__crumb { min-height: 80px; border-right: 0; border-bottom: 1px solid var(--line-light); }
  .recommendation-item:nth-child(even) { transform: none; }
  .footer-nav { grid-template-columns: repeat(3, auto); }
}

@media (max-width: 900px) {
  :root { --header-h: 70px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .story-hero { grid-template-columns: 1fr; min-height: 0; }
  .story-hero__media { min-height: min(78svh, 720px); }
  .story-hero__content { width: min(720px, calc(100% - 48px)); margin-inline: auto; padding: 70px 0 84px; }
  .chapter-header { grid-template-columns: .55fr 1.45fr; }
  .chapter-layout, .chapter-two-copy { grid-template-columns: 1fr; width: var(--article); }
  .chapter-margin, .sensory-note { position: static; display: none; }
  .story-quote { width: auto; margin-left: 0; }
  .recommendation-item { grid-template-columns: 52px .75fr 1.25fr; gap: 28px; }
  .shop-actions { grid-template-columns: 1fr; }
  .shop-actions__map { min-height: 700px; }
  .map-grid { max-width: 620px; width: 100%; margin-inline: auto; }
  .site-footer__middle { grid-template-columns: 1fr; gap: 50px; }
  .site-footer__area { padding: 28px 0 0; border-top: 1px solid var(--line-light); border-left: 0; }
}

@media (max-width: 720px) {
  :root { --content: calc(100% - 32px); --article: calc(100% - 40px); }
  body.story-page { padding-bottom: 72px; }
  .site-header__inner { width: calc(100% - 28px); }
  .site-brand__type strong { font-size: 19px; }
  .site-brand__type small { display: none; }
  .demo-notice__inner { display: block; padding-block: 10px; }
  .demo-notice strong { display: block; margin-bottom: 3px; }
  .story-hero__media { min-height: 65svh; }
  .story-hero__media img { object-position: 56% 50%; }
  .story-hero__content { width: calc(100% - 40px); padding: 52px 0 70px; }
  .story-hero__catch { font-size: clamp(29px, 9vw, 42px); }
  .shop-info__crumb { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 18px 20px; }
  .shop-info__crumb p { font-size: 10px; white-space: normal; }
  .shop-info__crumb small { grid-column: 2; }
  .shop-info__grid { grid-template-columns: 1fr; }
  .shop-info__grid div { min-height: 76px; padding: 14px 20px; border-right: 0; border-bottom: 1px solid var(--line-light); }
  .shop-info__grid div:last-child { border-bottom: 0; }
  .chapter-header { display: block; margin-bottom: 60px; padding-bottom: 28px; }
  .chapter-header__number { margin-bottom: 50px; font-size: 128px; }
  .chapter-header div { width: 100%; }
  .chapter-header h2 { font-size: clamp(34px, 10vw, 48px); }
  .editorial-copy { font-size: 16px; line-height: 2.25; }
  .editorial-copy > p { margin-bottom: 2em; }
  .single-line, .question-line { margin-block: 2.8em !important; font-size: 21px; text-align: left; }
  .story-quote { margin-block: 62px; padding: 30px 0; }
  .story-quote blockquote { font-size: 20px; }
  .chapter-visual img { height: 66svh; min-height: 420px; object-position: 83% 50%; }
  .chapter-visual figcaption { right: 10px; bottom: 10px; max-width: calc(100% - 20px); font-size: 8px; }
  .section-heading h2 { font-size: clamp(34px, 10vw, 48px); }
  .section-heading--split { grid-template-columns: 1fr; gap: 28px; }
  .recommendation-list { width: calc(100% - 32px); }
  .recommendation-item { grid-template-columns: 42px 1fr; align-items: start; gap: 18px; padding: 38px 0 48px; }
  .recommendation-item__number { grid-row: 1 / 3; font-size: 28px; }
  .recommendation-item__visual { grid-column: 2; width: 100%; }
  .recommendation-item > div:last-child { grid-column: 2; }
  .recommendation-item h3 { font-size: 25px; }
  .reader-gift { min-height: 820px; }
  .reader-gift__image::after { background: linear-gradient(180deg, rgba(51,39,31,.6), rgba(51,39,31,.96) 68%); }
  .reader-gift__content { width: calc(100% - 40px); padding: 100px 0 80px; align-self: end; }
  .reader-gift__content h2 { font-size: 37px; }
  .news-row { grid-template-columns: 1fr 42px; gap: 20px; padding: 28px 0; }
  .news-row > p:first-child { grid-column: 1; }
  .news-row > div { grid-column: 1; }
  .news-row > span { grid-column: 2; grid-row: 1 / 3; font-size: 42px; }
  .voice-grid { grid-template-columns: 1fr; }
  .voice-card { min-height: 310px; }
  .voice-card--offset { transform: none; }
  .shop-actions__map { min-height: auto; padding: 52px 20px; }
  .shop-actions__content { padding: 76px 20px 90px; }
  .shop-actions__content h2 { font-size: 42px; }
  .action-pills { grid-template-columns: 1fr; }
  .mobile-actions { position: fixed; z-index: 300; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, 1fr); height: 68px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid rgba(255,255,255,.2); color: #fff; background: rgba(51,39,31,.97); box-shadow: 0 -8px 30px rgba(51,39,31,.18); }
  .mobile-actions button { display: grid; place-items: center; align-content: center; min-width: 0; border-right: 1px solid rgba(255,255,255,.14); font-size: 9px; line-height: 1.3; }
  .mobile-actions button:last-child { border-right: 0; }
  .mobile-actions span { display: block; margin-bottom: 2px; color: #f4c7ad; font-size: 18px; }
  .demo-toast { right: 16px; bottom: 84px; width: calc(100% - 32px); }
  .site-footer__top { display: grid; }
  .site-footer__statement { font-size: 18px; text-align: left; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
  .footer-nav a { min-height: 44px; }
  .site-footer__notice { grid-template-columns: 1fr; }
  .site-footer__bottom { display: grid; gap: 8px; }
}

@media (max-width: 430px) {
  .story-hero__media { min-height: 58svh; }
  .story-hero__text { font-size: 13px; }
  .chapter-header__number { font-size: 105px; }
  .reader-gift__content h2, .shop-actions__content h2 { font-size: 35px; }
}

/* --------------------------------------------------------------------------
   Portal home — directory first, individual stories live on detail pages
   -------------------------------------------------------------------------- */
.page-portal { background: #f7f1e7; }
.page-portal #main-content { overflow: clip; }

.portal-hero {
  position: relative;
  isolation: isolate;
  min-height: 650px;
  overflow: hidden;
  color: var(--paper-soft);
  background:
    linear-gradient(125deg, rgba(29, 26, 23, .98), rgba(52, 39, 30, .96) 58%, rgba(93, 53, 32, .92)),
    var(--ink);
}
.portal-hero::after {
  position: absolute;
  z-index: -1;
  right: -6vw;
  bottom: -34vw;
  width: min(66vw, 920px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 253, 248, .17);
  border-radius: 50%;
  content: "";
}
.portal-hero__wash { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.portal-hero__wash span { position: absolute; display: block; border-radius: 50%; background: rgba(190, 100, 50, .14); filter: blur(1px); }
.portal-hero__wash span:nth-child(1) { top: 10%; right: 10%; width: 290px; aspect-ratio: 1; }
.portal-hero__wash span:nth-child(2) { right: 30%; bottom: -120px; width: 340px; aspect-ratio: 1; background: rgba(169, 179, 154, .1); }
.portal-hero__wash span:nth-child(3) { top: 26%; left: -110px; width: 250px; aspect-ratio: 1; border: 1px solid rgba(255, 253, 248, .12); background: transparent; }
.portal-hero__inner { position: relative; width: min(1320px, calc(100% - 64px)); margin-inline: auto; padding: clamp(82px, 9vw, 126px) 0 70px; }
.portal-hero__heading { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(300px, .72fr); gap: clamp(44px, 7vw, 110px); align-items: end; margin-bottom: 50px; }
.portal-hero__eyebrow { grid-column: 1 / -1; margin-bottom: -22px; font: 600 13px/1.4 var(--sans); letter-spacing: .22em; color: #e9b697; }
.portal-hero h1 { margin-bottom: 0; font-size: clamp(48px, 5.6vw, 78px); line-height: 1.2; letter-spacing: .01em; }
.portal-hero__heading > p:last-child { max-width: 520px; margin-bottom: 4px; color: rgba(255, 253, 248, .78); font-size: 16px; line-height: 2; }

.portal-search {
  display: grid;
  grid-template-columns: minmax(250px, 1.6fr) repeat(3, minmax(135px, .75fr)) auto;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 248, .2);
  background: rgba(255, 253, 248, .2);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .23);
}
.portal-search label { display: flex; min-height: 98px; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 20px; color: var(--ink); background: var(--paper-soft); }
.portal-search label > span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.portal-search input, .portal-search select { width: 100%; min-width: 0; height: 40px; padding: 0 30px 0 0; border: 0; border-radius: 0; outline: 0; background: transparent; font-weight: 500; letter-spacing: .02em; }
.portal-search input::placeholder { color: #8b7c71; }
.portal-search label:focus-within { box-shadow: inset 0 -3px 0 var(--orange); }
.portal-search__submit { display: inline-flex; min-width: 176px; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 24px; color: var(--paper-soft); background: var(--orange); font-weight: 700; text-align: left; transition: background .25s ease, color .25s ease; }
.portal-search__submit:hover { color: var(--ink); background: #e6a075; }
.portal-search__submit span { font-size: 20px; }
.portal-region-quick { display: flex; align-items: center; gap: 7px; margin-top: 24px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: thin; touch-action: pan-y; }
.portal-region-quick > span { flex: 0 0 auto; margin-right: 6px; color: rgba(255, 253, 248, .58); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.portal-region-quick button { flex: 0 0 auto; min-height: 40px; padding: 7px 14px; border: 1px solid rgba(255, 253, 248, .2); border-radius: 999px; color: rgba(255, 253, 248, .84); font-size: 12px; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.portal-region-quick button:hover, .portal-region-quick button.is-active { border-color: #e9b697; color: var(--ink); background: #e9b697; }

.page-portal .demo-notice { width: 100%; min-height: 52px; justify-content: center; padding-inline: max(24px, calc((100vw - 1180px) / 2)); }
.portal-event-strip { border-bottom: 1px solid rgba(51, 39, 31, .18); background: #e5a176; }
.portal-event-strip__inner { display: grid; grid-template-columns: 135px 1fr auto; gap: 30px; align-items: center; width: var(--content); min-height: 82px; margin-inline: auto; padding: 12px 0; }
.portal-event-strip__label { font: 600 12px/1.4 var(--sans); letter-spacing: .13em; }
.portal-event-strip p { display: flex; align-items: baseline; gap: 18px; margin: 0; line-height: 1.5; }
.portal-event-strip p strong { font-family: var(--serif); font-size: 19px; }
.portal-event-strip p span { color: rgba(51, 39, 31, .72); font-size: 12px; }
.portal-event-strip a { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 700; }

.portal-stores { padding: 112px 0 126px; }
.portal-section-heading { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(360px, .65fr); justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 48px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.portal-section-heading h2 { margin-bottom: 0; font-size: clamp(42px, 5vw, 65px); line-height: 1.15; }
.portal-section-heading > p { max-width: 530px; margin-bottom: 0; color: var(--muted); line-height: 1.9; }
.portal-results-toolbar { display: grid; grid-template-columns: auto minmax(160px, 1fr) auto auto; gap: 18px; align-items: center; margin-bottom: 32px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.portal-results-count { display: flex; align-items: baseline; gap: 8px; margin: 0; white-space: nowrap; }
.portal-results-count strong { font: 600 45px/1 var(--display); color: var(--orange-deep); }
.portal-results-count span { color: var(--muted); font-size: 12px; }
.portal-active-filters { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; }
.portal-filter-chip { display: inline-flex; min-height: 36px; align-items: center; gap: 8px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-soft); font-size: 11px; }
.portal-filter-chip::after { content: "×"; color: var(--orange-deep); font-size: 14px; }
.portal-sort { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.portal-sort span { color: var(--muted); font-size: 11px; }
.portal-sort select { min-height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 0; background: var(--paper-soft); }
.portal-reset { min-height: 44px; padding: 6px 0; border-bottom: 1px solid currentColor; color: var(--ink-2); font-size: 12px; font-weight: 700; }

.portal-store-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; }
.portal-store-card[hidden] { display: none !important; }
.portal-store-card { min-width: 0; border: 1px solid var(--line); background: var(--paper-soft); transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease; }
.portal-store-card:hover { z-index: 1; border-color: rgba(180, 81, 40, .68); transform: translateY(-6px); }
.portal-store-card > a { display: flex; height: 100%; min-height: 585px; flex-direction: column; }
.portal-store-card__cover { position: relative; display: grid; min-height: 220px; overflow: hidden; place-items: center; color: var(--paper-soft); background: #7a4937; }
.portal-store-card__cover::before, .portal-store-card__cover::after { position: absolute; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; content: ""; }
.portal-store-card__cover::before { top: -28%; right: -5%; width: 68%; aspect-ratio: 1; }
.portal-store-card__cover::after { bottom: -52%; left: -7%; width: 75%; aspect-ratio: 1; }
.portal-store-card__cover > span { position: absolute; top: 16px; left: 18px; font: 600 14px/1 var(--display); letter-spacing: .12em; }
.portal-store-card__cover > strong { position: relative; z-index: 1; font: 500 clamp(68px, 7vw, 102px)/1 var(--serif); opacity: .92; }
.portal-store-card__cover > small { position: absolute; right: 18px; bottom: 15px; font: 700 10px/1 var(--sans); letter-spacing: .17em; }
.portal-store-card__cover--orange { background: linear-gradient(135deg, #743823, #c06232); }
.portal-store-card__cover--sage { background: linear-gradient(135deg, #536858, #9aaf9b); }
.portal-store-card__cover--ink { background: linear-gradient(135deg, #25292a, #59666a); }
.portal-store-card__cover--wheat { background: linear-gradient(135deg, #8a5d2f, #d0a65f); }
.portal-store-card__cover--plum { background: linear-gradient(135deg, #5d3448, #9b7181); }
.portal-store-card__cover--blue { background: linear-gradient(135deg, #243a50, #63829a); }
.portal-store-card__cover--ice { color: #23333a; background: linear-gradient(135deg, #e2ebe9, #9eb9bf); }
.portal-store-card__cover--gold { color: #392e1e; background: linear-gradient(135deg, #eadba7, #c49448); }
.portal-store-card__cover--rose { background: linear-gradient(135deg, #754c54, #c08b8c); }
.portal-store-card__cover--forest { background: linear-gradient(135deg, #29463c, #698b72); }
.portal-store-card__cover--lacquer { background: linear-gradient(135deg, #3f1718, #8b3a30); }
.portal-store-card__cover--spice { background: linear-gradient(135deg, #7c321f, #d17a35); }
.portal-store-card__cover--sea { background: linear-gradient(135deg, #28515e, #63a1a4); }
.portal-store-card__cover--sky { color: #29414a; background: linear-gradient(135deg, #d7e3e3, #8db8c4); }
.portal-store-card__cover--mint { color: #25413b; background: linear-gradient(135deg, #d5e6da, #82b7a0); }
.portal-store-card__body { display: flex; flex: 1; flex-direction: column; padding: 25px 24px 24px; }
.portal-store-card__demo { margin-bottom: 10px; color: var(--orange-deep); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.portal-store-card__meta { margin-bottom: 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.portal-store-card h3 { margin-bottom: 10px; font-size: 27px; line-height: 1.35; }
.portal-store-card h4 { margin-bottom: 13px; font-family: var(--serif); font-size: 18px; line-height: 1.65; }
.portal-store-card__body > p:not(.portal-store-card__demo):not(.portal-store-card__meta) { margin-bottom: 24px; color: var(--muted); font-size: 13px; line-height: 1.85; }
.portal-store-card__body > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.portal-store-card__body > span i { font-style: normal; font-size: 18px; }
.portal-empty { margin-top: 28px; padding: 72px 24px; border: 1px solid var(--line); background: var(--paper-soft); text-align: center; }
.portal-empty__number { margin-bottom: 10px; font: 600 94px/1 var(--display); color: var(--orange); }
.portal-empty h3 { margin-bottom: 14px; font-size: 28px; }
.portal-empty > p:not(.portal-empty__number) { color: var(--muted); }

.portal-regions { padding: 112px 0 120px; color: var(--paper-soft); background: #2c2824; }
.portal-regions__heading { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1px solid var(--line-light); }
.portal-regions__heading .section-heading__index { grid-column: 1 / -1; margin-bottom: -18px; }
.portal-regions__heading h2 { margin-bottom: 0; font-size: clamp(42px, 5vw, 64px); }
.portal-regions__heading > p { max-width: 570px; margin: 0; color: rgba(255,253,248,.65); }
.region-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); }
.region-directory__group { display: grid; grid-template-columns: 118px 1fr; min-height: 128px; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.region-directory__group h3 { display: flex; align-items: center; margin: 0; padding: 20px; border-right: 1px solid var(--line-light); color: #e8ad89; font: 600 20px/1.4 var(--serif); }
.region-directory__group > div { display: flex; align-content: center; align-items: center; flex-wrap: wrap; gap: 1px 0; padding: 15px; }
.region-directory__group button { min-width: 58px; min-height: 42px; padding: 7px 9px; border-radius: 2px; color: rgba(255,253,248,.78); font-size: 12px; }
.region-directory__group button:hover, .region-directory__group button.is-active { color: var(--ink); background: #e8ad89; }
.region-directory__group--active { background: rgba(180, 81, 40, .12); }
.portal-regions__note { margin: 22px 0 0; color: rgba(255,253,248,.52); font-size: 11px; text-align: right; }

.portal-journal { padding: 110px 0 116px; background: var(--paper-soft); }
.portal-section-heading--journal { margin-bottom: 16px; }
.portal-journal__list { border-top: 1px solid var(--line); }
.portal-journal__list a { display: grid; grid-template-columns: 150px 120px 1fr 40px; gap: 18px; align-items: center; min-height: 108px; padding: 20px 4px; border-bottom: 1px solid var(--line); transition: padding .25s ease, color .25s ease; }
.portal-journal__list a:hover { padding-right: 18px; padding-left: 18px; color: var(--orange-deep); }
.portal-journal__list a > span { font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.portal-journal__list time { color: var(--muted); font: 600 14px/1 var(--display); }
.portal-journal__list h3 { margin: 0; font-size: 21px; }
.portal-journal__list i { justify-self: end; font-style: normal; font-size: 22px; }

.portal-participation { padding: 92px 0; color: var(--paper-soft); background: var(--orange-deep); }
.portal-participation .section-shell { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: stretch; }
.portal-participation__heading h2 { margin: 18px 0 0; font-size: clamp(37px, 4vw, 54px); line-height: 1.35; }
.portal-participation__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255,253,248,.28); border-left: 1px solid rgba(255,253,248,.28); }
.portal-participation__links a { display: flex; min-height: 220px; flex-direction: column; padding: 30px; border-right: 1px solid rgba(255,253,248,.28); border-bottom: 1px solid rgba(255,253,248,.28); transition: color .25s ease, background .25s ease; }
.portal-participation__links a:hover { color: var(--ink); background: #e8ad89; }
.portal-participation__links span { font-size: 11px; letter-spacing: .08em; opacity: .68; }
.portal-participation__links strong { margin-top: 18px; font-family: var(--serif); font-size: 24px; line-height: 1.5; }
.portal-participation__links i { margin-top: auto; align-self: flex-end; font-style: normal; font-size: 25px; }

@media (max-width: 1120px) {
  .portal-search { grid-template-columns: 1.6fr repeat(3, 1fr); }
  .portal-search__submit { grid-column: 1 / -1; min-height: 64px; }
  .portal-results-toolbar { grid-template-columns: auto 1fr auto; }
  .portal-reset { grid-column: 3; }
  .portal-active-filters { grid-column: 2; }
  .portal-store-card > a { min-height: 570px; }
}

@media (max-width: 900px) {
  .portal-hero__inner { width: min(100% - 40px, 760px); }
  .portal-hero__heading { grid-template-columns: 1fr; gap: 24px; }
  .portal-hero__eyebrow { margin-bottom: 0; }
  .portal-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-search__keyword { grid-column: 1 / -1; }
  .portal-search__submit { grid-column: 1 / -1; }
  .portal-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-section-heading, .portal-regions__heading { grid-template-columns: 1fr; }
  .portal-regions__heading .section-heading__index { grid-column: 1; margin-bottom: 0; }
  .region-directory { grid-template-columns: 1fr; }
  .portal-participation .section-shell { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .portal-hero { min-height: 0; }
  .portal-hero__inner { width: calc(100% - 32px); padding: 64px 0 46px; }
  .portal-hero__heading { margin-bottom: 34px; }
  .portal-hero h1 { font-size: clamp(37px, 11vw, 50px); }
  .portal-hero__heading > p:last-child { font-size: 14px; }
  .portal-search { grid-template-columns: 1fr; }
  .portal-search__keyword, .portal-search__submit { grid-column: 1; }
  .portal-search label { min-height: 78px; padding: 12px 16px; }
  .portal-search__submit { min-height: 58px; }
  .portal-region-quick { margin-top: 18px; }
  .portal-event-strip__inner { grid-template-columns: 1fr auto; gap: 3px 12px; width: calc(100% - 32px); padding: 15px 0; }
  .portal-event-strip__label { grid-column: 1 / -1; }
  .portal-event-strip p { display: block; }
  .portal-event-strip p span { display: none; }
  .portal-event-strip a { grid-column: 2; grid-row: 2; }
  .portal-stores, .portal-regions, .portal-journal { padding: 78px 0 84px; }
  .portal-section-heading { gap: 22px; margin-bottom: 30px; }
  .portal-section-heading h2, .portal-regions__heading h2 { font-size: 39px; }
  .portal-section-heading > p, .portal-regions__heading > p { font-size: 13px; }
  .portal-results-toolbar { grid-template-columns: 1fr auto; gap: 12px; }
  .portal-results-count strong { font-size: 38px; }
  .portal-active-filters { grid-column: 1 / -1; grid-row: 2; }
  .portal-sort { grid-column: 2; grid-row: 1; }
  .portal-sort > span { display: none; }
  .portal-reset { grid-column: 1 / -1; justify-self: start; }
  .portal-store-grid { grid-template-columns: 1fr; gap: 14px; }
  .portal-store-card > a { min-height: 0; }
  .portal-store-card__cover { min-height: 168px; }
  .portal-store-card__cover > strong { font-size: 56px; }
  .portal-store-card__cover > span { top: 11px; left: 11px; font-size: 11px; }
  .portal-store-card__cover > small { right: 10px; bottom: 10px; font-size: 8px; }
  .portal-store-card__body { padding: 15px 13px 14px; }
  .portal-store-card__demo { font-size: 8px; }
  .portal-store-card__meta { min-height: 32px; font-size: 9px; }
  .portal-store-card h3 { font-size: 19px; }
  .portal-store-card h4 { font-size: 14px; line-height: 1.55; }
  .portal-store-card__body > p:not(.portal-store-card__demo):not(.portal-store-card__meta) { margin-bottom: 18px; font-size: 12px; }
  .portal-store-card__body > span { margin-top: auto; font-size: 10px; line-height: 1.45; }
  .portal-store-card__body > span i { font-size: 14px; }
  .portal-regions__heading { gap: 18px; margin-bottom: 36px; }
  .region-directory__group { grid-template-columns: 82px 1fr; min-height: 104px; }
  .region-directory__group h3 { padding: 12px; font-size: 15px; }
  .region-directory__group > div { padding: 10px 8px; }
  .region-directory__group button { min-width: 48px; min-height: 44px; padding: 6px; }
  .portal-regions__note { text-align: left; }
  .portal-journal__list a { grid-template-columns: 1fr auto; gap: 8px 12px; min-height: 120px; }
  .portal-journal__list a > span, .portal-journal__list time { grid-row: 1; }
  .portal-journal__list h3 { grid-column: 1 / -1; grid-row: 2; font-size: 18px; }
  .portal-journal__list i { grid-column: 2; grid-row: 2; }
  .portal-participation { padding: 72px 0; }
  .portal-participation .section-shell { gap: 40px; }
  .portal-participation__links { grid-template-columns: 1fr; }
  .portal-participation__links a { min-height: 180px; }
}

@media (max-width: 380px) {
  .portal-store-grid { gap: 10px; }
  .portal-store-card__body { padding-inline: 11px; }
  .portal-store-card h3 { font-size: 17px; }
  .portal-store-card h4 { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-store-card, .portal-journal__list a, .portal-region-quick button { transition: none !important; }
  .portal-store-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .js .js-reveal { opacity: 1; transform: none; }
  .home-hero__wipe { display: none; }
}

@media (max-width: 1100px) {
  .site-nav { gap: 18px; }
  .page-home .section-heading, .area-heading { grid-template-columns: .18fr 1.3fr .52fr; gap: 24px; }
  .stories-editorial { grid-template-columns: 1fr; }
  .story-side-list { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .story-side-item__link { grid-template-columns: 130px 1fr; }
  .region-board { grid-template-columns: .85fr 1.15fr; }
  .route-feature__intro { padding-inline: 60px; }
  .participation__heading { grid-template-columns: .2fr 1.1fr .7fr; gap: 30px; }
}

@media (max-width: 900px) {
  .site-nav { display: none; }
  .page-home .section-heading, .area-heading, .participation__heading { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .page-home .section-heading__index, .area-heading .section-heading__index, .participation__heading .section-heading__index { margin-bottom: 6px; }
  .section-heading__lead, .area-heading__lead, .participation__heading > p:last-child { max-width: 620px; }
  .home-hero { min-height: 0; }
  .home-hero__visual { position: relative; z-index: 0; height: min(58vw, 560px); min-height: 390px; }
  .home-hero__visual img { object-position: 100% 50%; }
  .home-hero__inner { display: block; width: 100%; min-height: 0; background: var(--paper); }
  .home-hero__copy { width: var(--content); margin-inline: auto; padding: 70px 0 54px; }
  .hero-story-note { width: var(--content); margin: 0 auto 80px; }
  .image-caption--hero, .home-hero__scroll { display: none; }
  .lead-story__link { min-height: 600px; }
  .story-preview-list__item { grid-template-columns: 70px 150px 1fr 36px; }
  .region-board { grid-template-columns: 1fr; }
  .region-board__list { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, minmax(74px, auto)); border-right: 0; border-bottom: 1px solid var(--line-light); }
  .region-link { border-right: 1px solid var(--line-light); }
  .region-link:nth-child(even) { border-right: 0; }
  .active-area { min-height: 680px; }
  .event-row { grid-template-columns: 64px 150px 1fr 100px; gap: 22px; }
  .event-row__link { width: 88px; height: 88px; }
  .route-feature { grid-template-columns: 1fr; }
  .route-feature__intro { padding: 90px clamp(24px, 6vw, 60px); }
  .route-feature__note { position: static; grid-column: 1; margin: -42px 20px 24px; color: var(--muted); background: var(--paper-soft); text-align: right; }
  .demo-numbers .section-shell { grid-template-columns: 1fr; align-items: start; }
  .participation__paths { grid-template-columns: 1fr; }
  .participation-path--writers { border-top: 0; border-left: 1px solid var(--line); }
}

@media (max-width: 720px) {
  .section-pad { padding: 88px 0; }
  .site-brand__name { font-size: 19px; }
  .site-brand__edition { display: none; }
  .pc-br { display: none; }
  .sp-br { display: inline; }
  .page-home .section-heading, .area-heading { margin-bottom: 54px; padding-bottom: 26px; }
  .section-heading__title { font-size: clamp(34px, 10vw, 47px); }
  .home-hero__visual { height: 57svh; min-height: 380px; max-height: 570px; }
  .home-hero__copy { width: calc(100% - 40px); padding: 52px 0 44px; }
  .home-hero__eyebrow { font-size: 13px; }
  .home-hero__title { font-size: clamp(39px, 12vw, 56px); }
  .home-hero__lead { font-size: 13px; }
  .home-hero__actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .home-hero__actions .button { width: 100%; }
  .hero-story-note { width: calc(100% - 40px); padding: 26px; }
  .page-home .demo-notice { display: block; padding: 13px 20px; }
  .page-home .demo-notice__label { display: block; margin-bottom: 4px; }
  .lead-story__link { grid-template-columns: 1fr; min-height: 0; }
  .lead-story__figure { aspect-ratio: 4 / 4.7; }
  .lead-story__body { padding: 34px 24px 42px; }
  .lead-story__title { font-size: 34px; }
  .story-side-list { grid-template-columns: 1fr; }
  .story-side-item__link { grid-template-columns: 104px 1fr; }
  .story-side-item__visual { min-height: 240px; }
  .story-side-item__visual span { font-size: 58px; }
  .story-side-item__body { padding: 24px 20px; }
  .story-side-item__title { font-size: 21px; }
  .story-preview-list { margin-top: 42px; }
  .story-preview-list__item { grid-template-columns: 52px 1fr 28px; gap: 8px; min-height: 120px; }
  .story-preview-list__area { grid-column: 2; grid-row: 1; align-self: end; }
  .story-preview-list__item strong { grid-column: 2; grid-row: 2; font-size: 19px; }
  .story-preview-list__number { grid-row: 1 / 3; font-size: 20px; }
  .story-preview-list__arrow { grid-column: 3; grid-row: 1 / 3; }
  .area-levels { grid-template-columns: repeat(2, 1fr); margin-bottom: 52px; }
  .area-levels li { min-height: 92px; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
  .area-levels li:nth-child(even) { border-right: 0; }
  .area-levels li:nth-child(n+3) { border-bottom: 0; }
  .area-levels li::after { display: none !important; }
  .region-board__list { grid-template-columns: 1fr; grid-template-rows: none; }
  .region-link, .region-link:nth-child(even) { min-height: 68px; border-right: 0; }
  .active-area { min-height: 620px; padding: 52px 22px; }
  .area-breadcrumb { line-height: 1.6; }
  .active-area__title { font-size: 40px; }
  .active-area__stats { gap: 30px; }
  .active-area__stats dd { font-size: 48px; }
  .event-row { grid-template-columns: 45px 1fr; gap: 12px 18px; padding: 28px 0; }
  .event-row__number { grid-row: 1 / 4; font-size: 38px; }
  .event-row__meta, .event-row__body, .event-row__link { grid-column: 2; }
  .event-row__link { justify-self: start; display: inline-flex; gap: 12px; width: auto; height: auto; min-height: 44px; padding-bottom: 5px; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; }
  .event-row__link:hover { color: var(--orange-deep); background: transparent; }
  .route-feature__intro { padding: 82px 20px; }
  .route-feature__title { font-size: 40px; }
  .route-timeline { padding: 72px 20px; }
  .route-timeline::before { left: 105px; }
  .route-stop { grid-template-columns: 68px 20px 1fr; gap: 12px; min-height: 200px; }
  .route-stop time { font-size: 22px; }
  .route-stop h3 { font-size: 22px; line-height: 1.6; }
  .support-guide__heading { margin-bottom: 58px; }
  .support-steps { grid-template-columns: 1fr; gap: 58px; }
  .support-steps::before { top: 8%; bottom: 8%; left: 50%; width: 1px; height: auto; }
  .support-step { padding: 0 8px; }
  .support-step__number { width: 106px; height: 106px; margin-bottom: 24px; font-size: 40px; }
  .support-step > div { position: relative; padding: 10px 12px; background: var(--paper-soft); }
  .demo-numbers .section-shell { gap: 50px; }
  .demo-numbers__list { grid-template-columns: 1fr; }
  .demo-number { flex-direction: row; align-items: center; min-height: 150px; border-right: 0; border-bottom: 1px solid var(--line-light); }
  .demo-number:last-child { border-bottom: 0; }
  .demo-number dd { display: flex; align-items: baseline; gap: 10px; }
  .demo-number strong { font-size: 76px; }
  .demo-number span { margin: 0; }
  .participation__heading { margin-bottom: 50px; }
  .participation-path { min-height: 0; padding: 48px 22px; }
  .participation-path__number { margin-bottom: 34px; }
  .participation-path h3 { font-size: 34px; }
  .participation-path .button { width: 100%; }
  .site-footer__brand { display: grid; gap: 24px; }
  .site-footer__brand > p:last-child { font-size: 16px; }
  .site-footer__nav { grid-template-columns: repeat(2, 1fr); }
  .site-footer__nav a { border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
  .site-footer__nav a:nth-child(even) { border-right: 0; }
  .site-footer__nav a:last-child { border-bottom: 0; }
  .site-footer__legal { display: grid; gap: 28px; }
}

@media (max-width: 430px) {
  .home-hero__visual { min-height: 350px; }
  .home-hero__title { font-size: 41px; }
  .hero-story-note__title { font-size: 26px; }
  .story-side-item__link { grid-template-columns: 92px 1fr; }
  .story-side-item__body { padding-inline: 16px; }
  .story-side-item__title { font-size: 19px; }
  .region-link { grid-template-columns: 34px 1fr auto; padding-inline: 14px; }
  .active-area__stats { flex-direction: column; gap: 12px; }
  .active-area__stats div { display: flex; align-items: baseline; justify-content: space-between; }
}

/* Shared preview for all 15 fictional stores. Keep every rule scoped. */
.shop-preview { background: var(--paper-soft); }
.shop-preview main { background: var(--paper-soft); }
.shop-preview .demo-notice { border-bottom-color: rgba(51, 39, 31, .13); }
.shop-preview .demo-notice__inner { min-height: 48px; }
.shop-preview .demo-notice__inner strong { white-space: nowrap; }

.shop-preview .shop-preview__breadcrumb {
  width: var(--content);
  margin-inline: auto;
  padding: 20px 0;
}
.shop-preview .shop-preview__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  list-style: none;
}
.shop-preview .shop-preview__breadcrumb li { display: flex; align-items: center; gap: 10px; }
.shop-preview .shop-preview__breadcrumb li:not(:last-child)::after { color: var(--orange-deep); content: "›"; }
.shop-preview .shop-preview__breadcrumb a { border-bottom: 1px solid transparent; }
.shop-preview .shop-preview__breadcrumb a:hover { border-bottom-color: currentColor; }
.shop-preview .shop-preview__breadcrumb li:last-child { color: var(--ink); font-weight: 700; }

.shop-preview .shop-preview__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(350px, .85fr);
  width: var(--content);
  min-height: 650px;
  margin: 0 auto clamp(72px, 8vw, 120px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 30px 100px rgba(51, 39, 31, .08);
}
.shop-preview .shop-preview__hero-copy {
  align-self: center;
  padding: clamp(58px, 7vw, 105px) clamp(40px, 6vw, 92px);
}
.shop-preview .shop-preview__kicker {
  margin-bottom: 24px;
  color: var(--orange-deep);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
}
.shop-preview .shop-preview__kicker span { font-size: 20px; }
.shop-preview .shop-preview__area {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.shop-preview .shop-preview__hero h1 {
  max-width: 760px;
  margin-bottom: 12px;
  font-size: clamp(40px, 5.3vw, 76px);
  line-height: 1.28;
  letter-spacing: .015em;
}
.shop-preview .shop-preview__owner {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.shop-preview .shop-preview__owner span {
  color: var(--orange-deep);
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .18em;
}
.shop-preview .shop-preview__owner strong { font-family: var(--serif); font-size: 15px; }
.shop-preview .shop-preview__tagline {
  max-width: 620px;
  margin-bottom: 20px;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.65;
}
.shop-preview .shop-preview__excerpt {
  max-width: 620px;
  margin-bottom: 34px;
  color: var(--muted);
  font-size: 14px;
  line-height: 2;
}
.shop-preview .shop-preview__hero-links { display: flex; flex-wrap: wrap; gap: 12px; }
.shop-preview .shop-preview__hero-links a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 50px;
  padding: 8px 18px;
  border: 1px solid var(--ink);
  font-size: 11px;
  font-weight: 700;
  transition: color .2s ease, background .2s ease;
}
.shop-preview .shop-preview__hero-links a:hover { color: var(--paper-soft); background: var(--ink); }

.shop-preview .shop-preview__poster {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 650px;
  overflow: hidden;
  color: #fffaf2;
  background: linear-gradient(145deg, #973f22, #d77e4f);
  isolation: isolate;
}
.shop-preview .shop-preview__poster::before {
  position: absolute;
  z-index: -1;
  inset: 22px;
  border: 1px solid rgba(255, 255, 255, .34);
  content: "";
}
.shop-preview .shop-preview__poster::after {
  position: absolute;
  z-index: -2;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  content: "";
}
.shop-preview .shop-preview__poster[data-store-tone="sage"] { background: linear-gradient(145deg, #53675d, #9eaa91); }
.shop-preview .shop-preview__poster[data-store-tone="ink"] { background: linear-gradient(145deg, #231c18, #655348); }
.shop-preview .shop-preview__poster[data-store-tone="wheat"] { background: linear-gradient(145deg, #8b6537, #d9ae62); }
.shop-preview .shop-preview__poster[data-store-tone="plum"] { background: linear-gradient(145deg, #533443, #95677b); }
.shop-preview .shop-preview__poster[data-store-tone="blue"] { background: linear-gradient(145deg, #314b5d, #7591a1); }
.shop-preview .shop-preview__poster[data-store-tone="ice"] { color: #24333a; background: linear-gradient(145deg, #b8d0d4, #eef4f2); }
.shop-preview .shop-preview__poster[data-store-tone="gold"] { color: #3f2c19; background: linear-gradient(145deg, #c28b2f, #ead59e); }
.shop-preview .shop-preview__poster[data-store-tone="rose"] { background: linear-gradient(145deg, #854e56, #d39da3); }
.shop-preview .shop-preview__poster[data-store-tone="forest"] { background: linear-gradient(145deg, #29483b, #6f8c70); }
.shop-preview .shop-preview__poster[data-store-tone="lacquer"] { background: linear-gradient(145deg, #401f22, #8b3d3d); }
.shop-preview .shop-preview__poster[data-store-tone="spice"] { background: linear-gradient(145deg, #934824, #db9c49); }
.shop-preview .shop-preview__poster[data-store-tone="sea"] { background: linear-gradient(145deg, #28546a, #75a7ae); }
.shop-preview .shop-preview__poster[data-store-tone="sky"] { color: #263847; background: linear-gradient(145deg, #88b6ca, #e2d4b5); }
.shop-preview .shop-preview__poster[data-store-tone="mint"] { color: #28433d; background: linear-gradient(145deg, #84b3a6, #d8e5d4); }
.shop-preview .shop-preview__poster-index {
  position: absolute;
  top: 42px;
  right: 42px;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .18em;
}
.shop-preview .shop-preview__poster-symbol {
  font-family: var(--serif);
  font-size: clamp(150px, 21vw, 290px);
  font-weight: 500;
  line-height: 1;
  text-shadow: 0 20px 60px rgba(20, 12, 8, .14);
}
.shop-preview .shop-preview__poster p {
  position: absolute;
  right: 44px;
  bottom: 42px;
  margin: 0;
  font-family: var(--display);
  font-size: 10px;
  line-height: 1.55;
  letter-spacing: .18em;
  text-align: right;
}
.shop-preview .shop-preview__poster i {
  position: absolute;
  bottom: 45px;
  left: 44px;
  width: 58px;
  height: 1px;
  background: currentColor;
}

.shop-preview .shop-preview__jump {
  position: sticky;
  z-index: 50;
  top: var(--header-h);
  border-block: 1px solid var(--line);
  background: rgba(255, 253, 248, .96);
  backdrop-filter: blur(14px);
}
.shop-preview .shop-preview__jump > div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: var(--content);
  margin-inline: auto;
}
.shop-preview .shop-preview__jump a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 10px 16px;
  border-right: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
}
.shop-preview .shop-preview__jump a:first-child { border-left: 1px solid var(--line); }
.shop-preview .shop-preview__jump a:hover { background: var(--sage-light); }
.shop-preview .shop-preview__jump a span { color: var(--orange-deep); font-family: var(--display); font-size: 10px; }

.shop-preview .shop-preview__chapter { padding: clamp(92px, 11vw, 160px) 0; }
.shop-preview .shop-preview__chapter--owner { background: var(--paper-soft); }
.shop-preview .shop-preview__chapter--shop { background: var(--paper); }
.shop-preview .shop-preview__chapter-inner { width: var(--content); margin-inline: auto; }
.shop-preview .shop-preview__chapter-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(60px, 8vw, 108px);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.shop-preview .shop-preview__chapter-heading p { margin: 0; color: var(--orange-deep); font-family: var(--display); font-size: 12px; letter-spacing: .18em; }
.shop-preview .shop-preview__chapter-heading p span { margin-right: 12px; font-size: clamp(50px, 8vw, 105px); line-height: .7; }
.shop-preview .shop-preview__chapter-heading h2 { max-width: 660px; margin: 0; font-size: clamp(36px, 4.5vw, 58px); line-height: 1.35; }
.shop-preview .shop-preview__story-layout,
.shop-preview .shop-preview__shop-layout {
  display: grid;
  grid-template-columns: minmax(210px, .62fr) minmax(0, 1.38fr);
  gap: clamp(52px, 9vw, 132px);
  width: min(1030px, 100%);
  margin-inline: auto;
}
.shop-preview .shop-preview__person-note {
  align-self: start;
  padding: 24px 0 0;
  border-top: 2px solid var(--ink);
}
.shop-preview .shop-preview__person-note > span { color: var(--orange-deep); font-family: var(--display); font-size: 10px; letter-spacing: .18em; }
.shop-preview .shop-preview__person-note > strong { display: block; margin: 18px 0 8px; font-family: var(--serif); font-size: 28px; }
.shop-preview .shop-preview__person-note p { margin-bottom: 34px; color: var(--muted); font-size: 12px; }
.shop-preview .shop-preview__person-note small { color: var(--muted); font-size: 9px; }
.shop-preview .shop-preview__story-copy { max-width: 720px; }
.shop-preview .shop-preview__story-copy > p:not(.shop-preview__story-lead):not(.shop-preview__editorial-note) {
  font-family: var(--serif);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 2.25;
  letter-spacing: .055em;
}
.shop-preview .shop-preview__story-lead {
  margin-bottom: 36px;
  color: var(--orange-deep);
  font-family: var(--serif);
  font-size: clamp(27px, 3.4vw, 43px);
  font-weight: 600;
  line-height: 1.65;
}
.shop-preview .shop-preview__editorial-note {
  margin-top: 48px;
  padding: 20px 22px;
  border-left: 3px solid var(--sage);
  color: var(--muted);
  background: rgba(220, 225, 213, .45);
  font-size: 11px;
  line-height: 1.9;
}
.shop-preview .shop-preview__shop-mark {
  display: grid;
  place-items: center;
  align-content: center;
  aspect-ratio: 1;
  color: var(--paper-soft);
  background: var(--ink);
}
.shop-preview .shop-preview__shop-mark span { font-family: var(--serif); font-size: clamp(90px, 12vw, 150px); line-height: 1; }
.shop-preview .shop-preview__shop-mark small { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line-light); font-size: 9px; letter-spacing: .12em; }

.shop-preview .shop-preview__recommend,
.shop-preview .shop-preview__related { padding: clamp(92px, 11vw, 150px) 0; }
.shop-preview .shop-preview__recommend { background: var(--sage-light); }
.shop-preview .shop-preview__section-heading { margin-bottom: clamp(52px, 7vw, 82px); }
.shop-preview .shop-preview__section-heading > p { margin-bottom: 18px; color: var(--orange-deep); font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .18em; }
.shop-preview .shop-preview__section-heading h2 { margin-bottom: 20px; font-size: clamp(36px, 4.5vw, 58px); line-height: 1.4; }
.shop-preview .shop-preview__section-heading > span { display: block; max-width: 680px; color: var(--muted); font-size: 13px; }
.shop-preview .shop-preview__reason-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(51, 39, 31, .25);
  list-style: none;
}
.shop-preview .shop-preview__reason-list li { min-height: 280px; padding: 34px clamp(24px, 3vw, 42px); border-right: 1px solid rgba(51, 39, 31, .25); }
.shop-preview .shop-preview__reason-list li:first-child { border-left: 1px solid rgba(51, 39, 31, .25); }
.shop-preview .shop-preview__reason-list span { display: block; margin-bottom: 58px; color: var(--orange-deep); font-family: var(--display); font-size: 38px; }
.shop-preview .shop-preview__reason-list p { margin: 0; font-family: var(--serif); font-size: clamp(19px, 2vw, 25px); font-weight: 600; line-height: 1.75; }

.shop-preview .shop-preview__information { padding: clamp(92px, 11vw, 150px) 0; color: var(--paper-soft); background: var(--ink); }
.shop-preview .shop-preview__section-heading--light > p { color: #efb090; }
.shop-preview .shop-preview__section-heading--light > span { color: #cdbfb2; }
.shop-preview .shop-preview__info-list { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border-top: 1px solid var(--line-light); }
.shop-preview .shop-preview__info-list div { display: grid; grid-template-columns: 120px 1fr; gap: 24px; min-height: 92px; padding: 26px 30px; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.shop-preview .shop-preview__info-list div:nth-child(even) { border-right: 0; }
.shop-preview .shop-preview__info-list dt { color: var(--sage); font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .15em; }
.shop-preview .shop-preview__info-list dd { margin: 0; font-family: var(--serif); font-size: 14px; }
.shop-preview .shop-preview__info-note { margin: 24px 0 0; color: #cdbfb2; font-size: 10px; }

.shop-preview .shop-preview__related { background: var(--paper-soft); }
.shop-preview .shop-preview__related-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); }
.shop-preview .shop-preview__related-card { min-height: 330px; padding: clamp(32px, 4.5vw, 60px); }
.shop-preview .shop-preview__related-card + .shop-preview__related-card { border-left: 1px solid var(--line); }
.shop-preview .shop-preview__related-card > p { margin-bottom: 30px; color: var(--orange-deep); font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .18em; }
.shop-preview .shop-preview__related-card h3 { margin-bottom: 18px; font-size: clamp(25px, 3vw, 36px); }
.shop-preview .shop-preview__related-card > span { display: block; margin-bottom: 42px; color: var(--muted); font-size: 13px; }
.shop-preview .shop-preview__related-card a { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 50px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; }
.shop-preview .shop-preview__related-card a i { font-style: normal; font-size: 20px; transition: transform .2s ease; }
.shop-preview .shop-preview__related-card a:hover i { transform: translateX(5px); }
.shop-preview .shop-preview__back { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 76px; padding-top: 34px; border-top: 1px solid var(--line); }
.shop-preview .shop-preview__back p { margin: 0; color: var(--muted); font-size: 13px; }
.shop-preview .shop-preview__back a { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 260px; min-height: 56px; padding: 10px 18px; color: var(--paper-soft); background: var(--orange-deep); font-size: 12px; font-weight: 700; }

.shop-preview .shop-preview__error {
  width: var(--content);
  margin: 0 auto 90px;
  padding: 42px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.shop-preview .shop-preview__error p { margin-bottom: 20px; font-family: var(--serif); font-size: 21px; }
.shop-preview .shop-preview__error a { display: inline-flex; gap: 20px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-weight: 700; }
.shop-preview.is-missing .shop-preview__hero { min-height: 500px; }
.shop-preview.is-missing .shop-preview__poster { min-height: 500px; }

@media (max-width: 1000px) {
  .shop-preview .shop-preview__hero { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); }
  .shop-preview .shop-preview__hero-copy { padding-inline: 46px; }
  .shop-preview .shop-preview__jump a { grid-template-columns: 1fr; align-content: center; gap: 3px; }
  .shop-preview .shop-preview__info-list div { grid-template-columns: 100px 1fr; padding-inline: 22px; }
}

@media (max-width: 780px) {
  .shop-preview .demo-notice__inner { display: block; padding-block: 12px; }
  .shop-preview .demo-notice__inner strong { display: block; margin-bottom: 3px; }
  .shop-preview .shop-preview__breadcrumb { padding-block: 15px; }
  .shop-preview .shop-preview__breadcrumb ol { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .shop-preview .shop-preview__breadcrumb ol::-webkit-scrollbar { display: none; }
  .shop-preview .shop-preview__hero { grid-template-columns: 1fr; min-height: 0; margin-bottom: 64px; }
  .shop-preview .shop-preview__hero-copy { padding: 54px 30px 50px; }
  .shop-preview .shop-preview__hero h1 { font-size: clamp(36px, 10vw, 54px); }
  .shop-preview .shop-preview__owner { margin-bottom: 38px; }
  .shop-preview .shop-preview__tagline { font-size: clamp(23px, 7vw, 33px); }
  .shop-preview .shop-preview__poster { min-height: 390px; }
  .shop-preview .shop-preview__poster-symbol { font-size: clamp(150px, 45vw, 230px); }
  .shop-preview .shop-preview__poster::after { width: 360px; height: 360px; }
  .shop-preview .shop-preview__jump { overflow-x: auto; scrollbar-width: none; }
  .shop-preview .shop-preview__jump::-webkit-scrollbar { display: none; }
  .shop-preview .shop-preview__jump > div { display: flex; width: max-content; min-width: 100%; }
  .shop-preview .shop-preview__jump a { grid-template-columns: auto 1fr; flex: 0 0 auto; min-height: 58px; padding-inline: 18px; white-space: nowrap; }
  .shop-preview .shop-preview__chapter-heading { display: grid; margin-bottom: 60px; }
  .shop-preview .shop-preview__chapter-heading p span { font-size: 62px; }
  .shop-preview .shop-preview__chapter-heading h2 { font-size: 36px; }
  .shop-preview .shop-preview__story-layout,
  .shop-preview .shop-preview__shop-layout { grid-template-columns: 1fr; gap: 46px; }
  .shop-preview .shop-preview__person-note { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 18px; }
  .shop-preview .shop-preview__person-note > span { grid-column: 1 / 3; }
  .shop-preview .shop-preview__person-note > strong { margin-bottom: 2px; }
  .shop-preview .shop-preview__person-note p { margin: 0; }
  .shop-preview .shop-preview__person-note small { grid-column: 1 / 3; margin-top: 14px; }
  .shop-preview .shop-preview__shop-mark { width: min(300px, 76vw); margin-inline: auto; }
  .shop-preview .shop-preview__reason-list { grid-template-columns: 1fr; }
  .shop-preview .shop-preview__reason-list li { display: grid; grid-template-columns: 64px 1fr; align-items: start; gap: 10px; min-height: 0; padding: 30px 24px; border-right: 1px solid rgba(51, 39, 31, .25); border-bottom: 1px solid rgba(51, 39, 31, .25); border-left: 1px solid rgba(51, 39, 31, .25); }
  .shop-preview .shop-preview__reason-list li:first-child { border-top: 0; }
  .shop-preview .shop-preview__reason-list span { margin: 0; font-size: 28px; }
  .shop-preview .shop-preview__reason-list p { font-size: 20px; }
  .shop-preview .shop-preview__info-list { grid-template-columns: 1fr; }
  .shop-preview .shop-preview__info-list div { grid-template-columns: 90px 1fr; min-height: 82px; border-right: 0; }
  .shop-preview .shop-preview__related-grid { grid-template-columns: 1fr; }
  .shop-preview .shop-preview__related-card { min-height: 0; }
  .shop-preview .shop-preview__related-card + .shop-preview__related-card { border-top: 1px solid var(--line); border-left: 0; }
  .shop-preview .shop-preview__back { display: grid; }
  .shop-preview .shop-preview__back a { min-width: 0; width: 100%; }
}

@media (max-width: 430px) {
  .shop-preview .shop-preview__hero-copy { padding: 42px 20px 44px; }
  .shop-preview .shop-preview__kicker { margin-bottom: 18px; font-size: 10px; }
  .shop-preview .shop-preview__hero h1 { font-size: 35px; line-height: 1.35; }
  .shop-preview .shop-preview__tagline { font-size: 24px; }
  .shop-preview .shop-preview__excerpt { font-size: 13px; }
  .shop-preview .shop-preview__hero-links { display: grid; }
  .shop-preview .shop-preview__hero-links a { width: 100%; }
  .shop-preview .shop-preview__poster { min-height: 315px; }
  .shop-preview .shop-preview__poster::before { inset: 14px; }
  .shop-preview .shop-preview__poster::after { width: 290px; height: 290px; }
  .shop-preview .shop-preview__poster-index { top: 27px; right: 27px; }
  .shop-preview .shop-preview__poster p { right: 27px; bottom: 27px; }
  .shop-preview .shop-preview__poster i { bottom: 31px; left: 27px; }
  .shop-preview .shop-preview__chapter { padding-block: 76px; }
  .shop-preview .shop-preview__chapter-heading h2,
  .shop-preview .shop-preview__section-heading h2 { font-size: 31px; }
  .shop-preview .shop-preview__story-copy > p:not(.shop-preview__story-lead):not(.shop-preview__editorial-note) { font-size: 16px; line-height: 2.15; }
  .shop-preview .shop-preview__story-lead { font-size: 25px; }
  .shop-preview .shop-preview__recommend,
  .shop-preview .shop-preview__information,
  .shop-preview .shop-preview__related { padding-block: 76px; }
  .shop-preview .shop-preview__reason-list li { grid-template-columns: 50px 1fr; padding-inline: 18px; }
  .shop-preview .shop-preview__reason-list p { font-size: 18px; }
  .shop-preview .shop-preview__info-list div { grid-template-columns: 1fr; gap: 4px; padding: 20px 16px; }
  .shop-preview .shop-preview__related-card { padding: 32px 22px; }
  .shop-preview .shop-preview__error { padding: 28px 20px; }
}

/* --------------------------------------------------------------------------
   Portal home v2 — navigation first, compact directory UI
   -------------------------------------------------------------------------- */
.page-portal {
  --portal-navy: #173e48;
  --portal-navy-deep: #102f38;
  --portal-teal: #16796f;
  --portal-orange: #c45e35;
  --portal-bg: #f3f6f5;
  --portal-line: #d8e0e2;
  --content: min(1360px, calc(100% - 48px));
  --header-h: 76px;
  background: var(--portal-bg);
}
.page-portal h1,
.page-portal h2,
.page-portal h3 { font-family: var(--sans); }
.page-portal .site-header {
  height: var(--header-h);
  border-bottom-color: var(--portal-line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
}
.page-portal .site-header.is-scrolled { border-color: var(--portal-line); background: rgba(255, 255, 255, .98); }
.page-portal .site-header__inner { width: min(1360px, calc(100% - 48px)); }
.page-portal .site-brand__mark { background: var(--portal-orange); }
.page-portal .site-brand__name { color: var(--portal-navy-deep); }
.page-portal .site-brand__edition { color: var(--portal-orange); }
.page-portal .site-nav { gap: 0; border-left: 1px solid var(--portal-line); }
.page-portal .site-nav__link {
  min-width: auto;
  padding: 0 clamp(11px, 1.35vw, 19px);
  border-right: 1px solid var(--portal-line);
  color: var(--portal-navy-deep);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.page-portal .site-nav__link::after { height: 3px; background: var(--portal-teal); }
.page-portal .site-nav__link--accent { color: #fff; background: var(--portal-orange); }
.page-portal .site-nav__link--accent::after { background: var(--portal-navy-deep); }

.page-portal .portal-hero {
  min-height: 0;
  color: var(--portal-navy-deep);
  border-bottom: 1px solid var(--portal-line);
  background: #edf3f3;
}
.page-portal .portal-hero::after,
.page-portal .portal-hero__wash { display: none; }
.page-portal .portal-hero__inner {
  width: min(1360px, calc(100% - 48px));
  padding: 36px 0 24px;
}
.page-portal .portal-hero__heading {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .8fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: end;
  margin-bottom: 20px;
}
.page-portal .portal-hero__eyebrow {
  margin-bottom: -6px;
  color: var(--portal-teal);
  font-size: 11px;
  letter-spacing: .16em;
}
.page-portal .portal-hero h1 {
  margin: 0;
  color: var(--portal-navy-deep);
  font-family: var(--sans);
  font-size: clamp(36px, 3.6vw, 54px);
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -.025em;
}
.page-portal .portal-hero__heading > p:last-child {
  max-width: 540px;
  margin: 0 0 4px;
  color: #4e656b;
  font-size: 14px;
  line-height: 1.85;
}
.page-portal .portal-hero__heading > p:last-child strong { display: block; margin-bottom: 3px; color: var(--portal-navy-deep); }

.portal-find-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.portal-find-guide button {
  display: grid;
  grid-template-columns: 30px auto 1fr;
  gap: 2px 10px;
  align-items: center;
  min-height: 62px;
  padding: 9px 15px;
  border: 1px solid var(--portal-line);
  border-radius: 6px;
  background: #fff;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.portal-find-guide button:hover { border-color: var(--portal-teal); box-shadow: 0 8px 24px rgba(23, 62, 72, .09); transform: translateY(-2px); }
.portal-find-guide button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; aspect-ratio: 1; border-radius: 50%; color: #fff; background: var(--portal-teal); font: 700 13px/1 var(--sans); }
.portal-find-guide button > strong { color: var(--portal-navy-deep); font-size: 13px; line-height: 1.3; }
.portal-find-guide button > small { color: #6d7d81; font-size: 10px; line-height: 1.3; }

.page-portal .portal-search {
  grid-template-columns: repeat(3, minmax(125px, .75fr)) minmax(210px, 1.2fr) minmax(142px, .65fr);
  gap: 1px;
  overflow: visible;
  border: 1px solid var(--portal-line);
  border-radius: 7px;
  background: var(--portal-line);
  box-shadow: 0 14px 34px rgba(23, 62, 72, .1);
}
.page-portal .portal-search label {
  min-height: 72px;
  gap: 3px;
  padding: 8px 14px;
  background: #fff;
}
.page-portal .portal-search label:first-child { border-radius: 6px 0 0 6px; }
.page-portal .portal-search label > span { color: #62767c; font-size: 9px; letter-spacing: .08em; }
.page-portal .portal-search input,
.page-portal .portal-search select { height: 34px; color: var(--portal-navy-deep); font-size: 13px; }
.page-portal .portal-search label:focus-within,
.page-portal .portal-search label.is-guided { position: relative; z-index: 2; box-shadow: inset 0 0 0 3px var(--portal-teal); }
.page-portal .portal-search__submit {
  min-width: 0;
  min-height: 72px;
  padding: 12px 18px;
  border-radius: 0 6px 6px 0;
  color: #fff;
  background: var(--portal-orange);
  font-size: 13px;
}
.page-portal .portal-search__submit:hover { color: #fff; background: #a94728; }

.portal-quick-nav { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: 18px; margin-top: 12px; border-top: 1px solid var(--portal-line); }
.page-portal .portal-region-quick,
.portal-category-quick { display: flex; align-items: center; gap: 5px; margin: 0; overflow-x: auto; padding: 7px 0; scrollbar-width: thin; touch-action: pan-y; }
.portal-category-quick { border-top: 0; }
.page-portal .portal-region-quick > span,
.portal-category-quick > span { flex: 0 0 48px; margin: 0 4px 0 0; color: #60747a; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.page-portal .portal-region-quick button,
.portal-category-quick button { flex: 0 0 auto; min-height: 34px; padding: 5px 11px; border: 1px solid #cbd6d8; border-radius: 4px; color: var(--portal-navy-deep); background: rgba(255, 255, 255, .76); font-size: 10px; font-weight: 500; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.page-portal .portal-region-quick button:hover,
.page-portal .portal-region-quick button.is-active,
.portal-category-quick button:hover,
.portal-category-quick button.is-active { border-color: var(--portal-teal); color: #fff; background: var(--portal-teal); }

.page-portal .demo-notice {
  min-height: 40px;
  padding: 7px max(24px, calc((100vw - 1360px) / 2));
  border-bottom: 1px solid var(--portal-line);
  color: #64777c;
  background: #fff;
  font-size: 10px;
}
.page-portal .demo-notice__label { color: var(--portal-orange); }

.page-portal .portal-stores { padding: 30px 0 86px; }
.page-portal .portal-section-heading {
  grid-template-columns: minmax(250px, .75fr) minmax(380px, .7fr);
  gap: 32px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-color: var(--portal-line);
}
.page-portal .section-heading__index { color: var(--portal-teal); font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.page-portal .portal-section-heading h2 { color: var(--portal-navy-deep); font-size: clamp(30px, 3vw, 40px); letter-spacing: -.02em; }
.page-portal .portal-section-heading > p { color: #63757a; font-size: 12px; line-height: 1.7; }
.page-portal .portal-results-toolbar {
  grid-template-columns: auto minmax(130px, 1fr) auto auto;
  gap: 12px;
  min-height: 60px;
  margin-bottom: 18px;
  padding: 8px 0;
  border-color: var(--portal-line);
}
.page-portal .portal-results-count strong { color: var(--portal-orange); font-size: 36px; }
.page-portal .portal-results-count span { color: #63757a; }
.page-portal .portal-filter-chip { min-height: 32px; border-color: var(--portal-line); background: #fff; }
.page-portal .portal-filter-chip::after { color: var(--portal-orange); }
.page-portal .portal-sort select { min-height: 40px; border-color: var(--portal-line); border-radius: 4px; background: #fff; }
.page-portal .portal-reset { color: var(--portal-navy-deep); }

.page-portal .portal-store-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 14px; }
.page-portal .portal-store-card {
  overflow: hidden;
  border-color: var(--portal-line);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(23, 62, 72, .05);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.page-portal .portal-store-card:hover { border-color: var(--portal-teal); box-shadow: 0 12px 28px rgba(23, 62, 72, .12); transform: translateY(-3px); }
.page-portal .portal-store-card > a { min-height: 0; }
.page-portal .portal-store-card__cover { min-height: 0; aspect-ratio: 4 / 3; }
.page-portal .portal-store-card__cover > strong { font-size: clamp(48px, 5vw, 70px); }
.page-portal .portal-store-card__cover > span { top: 11px; left: 12px; font-size: 10px; }
.page-portal .portal-store-card__cover > small { right: 11px; bottom: 10px; font-size: 7px; }
.page-portal [data-category="飲食"] .portal-store-card__cover { background: linear-gradient(135deg, #a9492b, #d4844c); }
.page-portal [data-category="美容・健康"] .portal-store-card__cover { background: linear-gradient(135deg, #196b69, #65a8a0); }
.page-portal [data-category="小売・ものづくり"] .portal-store-card__cover { color: #fff; background: linear-gradient(135deg, #3b506b, #778ca3); }
.page-portal [data-category="暮らし・サービス"] .portal-store-card__cover { background: linear-gradient(135deg, #276174, #6b9fa9); }
.page-portal [data-category="宿泊・体験"] .portal-store-card__cover { background: linear-gradient(135deg, #4e654e, #8ca27d); }
.page-portal .portal-store-card__body { padding: 13px 13px 12px; }
.page-portal .portal-store-card__demo { align-self: flex-start; margin-bottom: 6px; padding: 2px 5px; border-radius: 2px; color: var(--portal-orange); background: #f9eee9; font-size: 7px; letter-spacing: .08em; }
.page-portal .portal-store-card__meta { display: -webkit-box; min-height: 28px; margin-bottom: 5px; overflow: hidden; color: #63757a; font-size: 9px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.page-portal .portal-store-card h3 { display: -webkit-box; min-height: 44px; margin-bottom: 5px; overflow: hidden; color: var(--portal-navy-deep); font-size: 17px; line-height: 1.35; letter-spacing: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.page-portal .portal-store-card h4 { display: -webkit-box; min-height: 42px; margin-bottom: 10px; overflow: hidden; color: #4f6267; font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.page-portal .portal-store-card__body > p:not(.portal-store-card__demo):not(.portal-store-card__meta) { display: none; }
.page-portal .portal-store-card__body > span { min-height: 30px; padding-top: 8px; border-color: var(--portal-line); color: var(--portal-teal); font-size: 0; }
.page-portal .portal-store-card__body > span::before { content: "詳しく見る"; font-size: 10px; }
.page-portal .portal-store-card__body > span i { font-size: 14px; }

.page-portal .portal-event-strip { border-color: var(--portal-line); background: #f1dfd4; }
.page-portal .portal-event-strip__inner { width: var(--content); min-height: 66px; }
.page-portal .portal-event-strip__label { color: var(--portal-orange); }
.page-portal .portal-event-strip p strong { color: var(--portal-navy-deep); font-family: var(--sans); font-size: 15px; }
.page-portal .portal-event-strip p span { color: #6a6d6e; }
.page-portal .portal-event-strip a { color: var(--portal-navy-deep); }

.page-portal .portal-regions { padding: 84px 0 92px; background: var(--portal-navy-deep); }
.page-portal .portal-regions__heading { margin-bottom: 38px; }
.page-portal .portal-regions__heading h2 { font-size: clamp(32px, 4vw, 48px); }
.page-portal .region-directory__group h3 { color: #8fd0c6; font-family: var(--sans); font-size: 17px; }
.page-portal .region-directory__group button:hover,
.page-portal .region-directory__group button.is-active { color: #fff; background: var(--portal-teal); }
.page-portal .region-directory__group--active { background: rgba(22, 121, 111, .14); }
.page-portal .portal-journal { padding: 84px 0 92px; background: #fff; }
.page-portal .portal-participation { color: #fff; background: var(--portal-teal); }
.page-portal .portal-participation__links a:hover { color: var(--portal-navy-deep); background: #b9ded8; }

@media (max-width: 1100px) {
  .page-portal .site-nav__link { padding-inline: 10px; font-size: 11px; }
  .page-portal .portal-hero h1 { font-size: 40px; }
  .page-portal .portal-search { grid-template-columns: repeat(3, minmax(115px, .7fr)) minmax(180px, 1.15fr) minmax(130px, .62fr); }
}

@media (max-width: 959px) {
  .page-portal .portal-hero__inner { width: min(100% - 40px, 860px); }
  .page-portal .portal-hero__heading { grid-template-columns: 1fr; gap: 10px; }
  .page-portal .portal-hero__eyebrow { margin-bottom: 0; }
  .page-portal .portal-hero__heading > p:last-child { max-width: 700px; }
  .page-portal .portal-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-portal .portal-search__keyword { grid-column: auto; }
  .page-portal .portal-search__submit { grid-column: 1 / -1; min-height: 54px; border-radius: 0 0 6px 6px; }
  .page-portal .portal-search label { min-height: 64px; }
  .portal-quick-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .page-portal .portal-store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-portal .portal-section-heading { grid-template-columns: minmax(230px, .75fr) minmax(300px, .7fr); }
  .page-portal .portal-regions__heading { grid-template-columns: 1fr; }
  .page-portal .portal-regions__heading .section-heading__index { grid-column: 1; margin-bottom: 0; }
  .page-portal .region-directory { grid-template-columns: 1fr; }
  .page-portal .portal-participation .section-shell { grid-template-columns: 1fr; }
}

@media (max-width: 719px) {
  .page-portal {
    --content: calc(100% - 32px);
    --header-h: 68px;
  }
  .page-portal .site-header__inner { width: calc(100% - 32px); }
  .page-portal .portal-hero__inner { width: calc(100% - 32px); padding: 28px 0 18px; }
  .page-portal .portal-hero__heading { margin-bottom: 14px; }
  .page-portal .portal-hero h1 { font-size: clamp(29px, 8.6vw, 38px); line-height: 1.35; }
  .page-portal .portal-hero__heading > p:last-child { font-size: 12px; line-height: 1.75; }
  .portal-find-guide { gap: 5px; margin-bottom: 8px; }
  .portal-find-guide button { display: flex; min-height: 52px; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 3px; text-align: center; }
  .portal-find-guide button > span { width: 21px; font-size: 10px; }
  .portal-find-guide button > strong { font-size: 10px; }
  .portal-find-guide button > small { display: none; }
  .page-portal .portal-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-portal .portal-search label { min-height: 64px; padding: 7px 10px; }
  .page-portal .portal-search label:first-child { border-radius: 6px 0 0; }
  .page-portal .portal-search label > span { font-size: 8px; }
  .page-portal .portal-search input,
  .page-portal .portal-search select { height: 30px; font-size: 11px; }
  .page-portal .portal-search__keyword { grid-column: auto; }
  .page-portal .portal-search__submit { min-height: 48px; font-size: 12px; }
  .portal-quick-nav { margin-top: 8px; }
  .page-portal .portal-region-quick,
  .portal-category-quick { padding: 5px 0; }
  .page-portal .portal-region-quick > span,
  .portal-category-quick > span { flex-basis: 38px; font-size: 9px; }
  .page-portal .portal-region-quick button,
  .portal-category-quick button { min-height: 32px; padding: 4px 9px; font-size: 9px; }
  .page-portal .demo-notice { display: block; min-height: 0; padding: 7px 16px; line-height: 1.55; }
  .page-portal .demo-notice { display: flex; gap: 8px; align-items: center; }
  .page-portal .demo-notice__label { display: inline; margin: 0; }
  .page-portal .demo-notice p { font-size: 9px; line-height: 1.45; }
  .page-portal .portal-stores { padding: 38px 0 64px; }
  .page-portal .portal-section-heading { grid-template-columns: 1fr; }
  .page-portal .portal-section-heading { gap: 10px; margin-bottom: 14px; padding-bottom: 13px; }
  .page-portal .portal-section-heading h2,
  .page-portal .portal-regions__heading h2 { font-size: 28px; }
  .page-portal .portal-section-heading > p,
  .page-portal .portal-regions__heading > p { font-size: 11px; line-height: 1.65; }
  .page-portal .portal-results-toolbar { grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 12px; }
  .page-portal .portal-results-count strong { font-size: 31px; }
  .page-portal .portal-active-filters { grid-column: 1 / -1; grid-row: 2; }
  .page-portal .portal-sort { grid-column: 2; grid-row: 1; }
  .page-portal .portal-sort > span { display: none; }
  .page-portal .portal-sort select { min-height: 38px; max-width: 112px; font-size: 10px; }
  .page-portal .portal-reset { grid-column: 1 / -1; justify-self: start; min-height: 36px; font-size: 10px; }
  .page-portal .portal-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 9px; }
  .page-portal .portal-store-card__cover > strong { font-size: 43px; }
  .page-portal .portal-store-card__cover > span { top: 8px; left: 8px; font-size: 8px; }
  .page-portal .portal-store-card__cover > small { right: 7px; bottom: 7px; font-size: 6px; }
  .page-portal .portal-store-card__body { padding: 10px 9px 9px; }
  .page-portal .portal-store-card__demo { margin-bottom: 5px; font-size: 6px; }
  .page-portal .portal-store-card__meta { min-height: 27px; font-size: 8px; }
  .page-portal .portal-store-card h3 { min-height: 39px; font-size: 14px; line-height: 1.4; }
  .page-portal .portal-store-card h4 { min-height: 38px; margin-bottom: 7px; font-size: 10.5px; line-height: 1.6; }
  .page-portal .portal-store-card__body > span { min-height: 27px; padding-top: 6px; }
  .page-portal .portal-store-card__body > span::before { font-size: 9px; }
  .page-portal .portal-store-card__body > span i { font-size: 12px; }
  .page-portal .portal-event-strip__inner { width: calc(100% - 32px); }
  .page-portal .portal-regions,
  .page-portal .portal-journal { padding: 64px 0 70px; }
}

@media (max-width: 380px) {
  .page-portal .portal-store-card h3 { font-size: 13px; }
  .page-portal .portal-store-card h4 { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-find-guide button,
  .portal-category-quick button { transition: none !important; }
  .portal-find-guide button:hover { transform: none; }
}

/* One generated 4x4 photo sheet supplies all 15 store-card thumbnails. */
.page-portal .portal-store-card[data-order] .portal-store-card__cover {
  background-color: var(--portal-navy);
  background-image: url("../../src/store-photo-sprite-v1.webp");
  background-repeat: no-repeat;
  background-size: 412% auto;
}
.page-portal .portal-store-card__cover::before,
.page-portal .portal-store-card__cover::after,
.page-portal .portal-store-card__cover > strong { display: none; }
.page-portal .portal-store-card__cover > span,
.page-portal .portal-store-card__cover > small {
  z-index: 2;
  padding: 5px 7px;
  border-radius: 3px;
  color: #fff;
  background: rgba(16, 47, 56, .86);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .08em;
}
.page-portal .portal-store-card__cover > span { top: 9px; left: 9px; }
.page-portal .portal-store-card__cover > small { right: 9px; bottom: 9px; }
.page-portal [data-order="1"] .portal-store-card__cover { background-position: .5% 4.2%; }
.page-portal [data-order="2"] .portal-store-card__cover { background-position: 33.5% 4.2%; }
.page-portal [data-order="3"] .portal-store-card__cover { background-position: 66.5% 4.2%; }
.page-portal [data-order="4"] .portal-store-card__cover { background-position: 99.5% 4.2%; }
.page-portal [data-order="5"] .portal-store-card__cover { background-position: .5% 34.7%; }
.page-portal [data-order="6"] .portal-store-card__cover { background-position: 33.5% 34.7%; }
.page-portal [data-order="7"] .portal-store-card__cover { background-position: 66.5% 34.7%; }
.page-portal [data-order="8"] .portal-store-card__cover { background-position: 99.5% 34.7%; }
.page-portal [data-order="9"] .portal-store-card__cover { background-position: .5% 65.3%; }
.page-portal [data-order="10"] .portal-store-card__cover { background-position: 33.5% 65.3%; }
.page-portal [data-order="11"] .portal-store-card__cover { background-position: 66.5% 65.3%; }
.page-portal [data-order="12"] .portal-store-card__cover { background-position: 99.5% 65.3%; }
.page-portal [data-order="13"] .portal-store-card__cover { background-position: .5% 95.8%; }
.page-portal [data-order="14"] .portal-store-card__cover { background-position: 33.5% 95.8%; }
.page-portal [data-order="15"] .portal-store-card__cover { background-position: 66.5% 95.8%; }

@media (max-width: 719px) {
  .page-portal .portal-store-card__cover > span,
  .page-portal .portal-store-card__cover > small { padding: 4px 5px; }
  .page-portal .portal-store-card__cover > span { top: 6px; left: 6px; }
  .page-portal .portal-store-card__cover > small { right: 6px; bottom: 6px; }
}

/* --------------------------------------------------------------------------
   Shop detail v2 — two independent reading modes with fictional photo stories
   -------------------------------------------------------------------------- */
.shop-detail-v2 {
  --detail-navy: #173e48;
  --detail-navy-deep: #102f38;
  --detail-teal: #0f6b63;
  --detail-orange: #9f4224;
  --detail-paper: #fbfaf7;
  --detail-mist: #edf3f3;
  --detail-sage: #dfeae6;
  --detail-line: #d3dddf;
  --detail-muted: #53686d;
  --detail-photo-sheet: none;
  background: var(--detail-paper);
}
.shop-detail-v2 main { overflow: clip; background: var(--detail-paper); }
.shop-detail-v2 .site-header {
  border-bottom-color: var(--detail-line);
  background: #fff;
  backdrop-filter: none;
}
.shop-detail-v2 .site-header.is-scrolled { border-bottom-color: var(--detail-line); background: #fff; }
.shop-detail-v2 .site-brand__mark { background: var(--detail-orange); }
.shop-detail-v2 .site-brand__name { color: var(--detail-navy-deep); }
.shop-detail-v2 .site-brand__edition { color: var(--detail-orange); }
.shop-detail-v2 .site-nav__link { color: var(--detail-navy-deep); }
.shop-detail-v2 .site-nav__link--accent { color: #fff; background: var(--detail-orange); }
.shop-detail-v2 .demo-notice { color: #4f6267; background: #fff; }
.shop-detail-v2 .demo-notice__inner strong { color: var(--detail-orange); }

.shop-detail-v2 .shop-preview__breadcrumb {
  width: min(1360px, calc(100% - 48px));
  max-width: none;
  color: var(--detail-muted);
}
.shop-detail-v2 .shop-preview__breadcrumb li:not(:last-child)::after { color: var(--detail-orange); }

.shop-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(430px, 1.12fr);
  width: min(1360px, calc(100% - 48px));
  min-height: 650px;
  margin: 0 auto 72px;
  border: 1px solid var(--detail-line);
  background: #fff;
}
.shop-detail-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(52px, 6vw, 92px);
}
.shop-detail-hero__kicker,
.shop-detail-hero__area {
  margin: 0;
  color: var(--detail-teal);
  font: 700 11px/1.5 var(--sans);
  letter-spacing: .14em;
}
.shop-detail-hero__kicker span { color: var(--detail-orange); font-family: var(--display); font-size: 22px; }
.shop-detail-hero__area { margin: 14px 0 24px; color: var(--detail-muted); letter-spacing: .05em; }
.shop-detail-hero h1 {
  margin: 0 0 22px;
  color: var(--detail-navy-deep);
  font-family: var(--serif);
  font-size: clamp(42px, 5.2vw, 72px);
  line-height: 1.25;
}
.shop-detail-hero__tagline {
  max-width: 620px;
  margin: 0 0 30px;
  color: var(--detail-navy);
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 600;
  line-height: 1.65;
}
.shop-detail-hero__meta { display: flex; flex-wrap: wrap; gap: 24px 44px; margin: 0 0 34px; }
.shop-detail-hero__meta div { display: grid; gap: 5px; }
.shop-detail-hero__meta dt { color: var(--detail-orange); font: 700 9px/1 var(--sans); letter-spacing: .16em; }
.shop-detail-hero__meta dd { margin: 0; color: var(--detail-navy-deep); font-size: 13px; font-weight: 700; }
.shop-detail-hero__intro { max-width: 590px; margin: 0; color: var(--detail-muted); font-size: 13px; line-height: 1.9; }

.shop-detail-photo {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  background: #d8dfdf;
  isolation: isolate;
}
.shop-detail-photo::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  background-image: var(--detail-photo-sheet);
  background-repeat: no-repeat;
  background-position: var(--photo-x, 0%) var(--photo-y, 0%);
  background-size: 405% 405%;
  transform: translate(-50%, -50%);
  content: "";
}

@media (min-width: 901px) {
  .shop-detail-gallery .shop-detail-photo:not(.shop-detail-photo--gallery-main)::before {
    width: 100%;
    height: auto;
  }
}
.shop-detail-photo--hero { min-height: 650px; }
.shop-detail-photo figcaption {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  padding: 6px 8px;
  color: #fff;
  background: var(--detail-navy-deep);
  font: 700 8px/1 var(--sans);
  letter-spacing: .12em;
}

.shop-detail-switcher {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 14px 0 0;
  background: rgba(251, 250, 247, .98);
}
.shop-detail-switcher > p { margin: 0 0 9px; color: var(--detail-muted); font-size: 10px; font-weight: 700; text-align: center; letter-spacing: .08em; }
.shop-detail-switcher__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--detail-line); background: #fff; box-shadow: 0 12px 30px rgba(16, 47, 56, .1); }
.shop-detail-switcher__tabs button {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 16px;
  align-items: center;
  min-height: 76px;
  padding: 12px 24px;
  color: var(--detail-navy-deep);
  border: 0;
  background: #fff;
  text-align: left;
  transition: color .2s ease, background .2s ease;
}
.shop-detail-switcher__tabs button + button { border-left: 1px solid var(--detail-line); }
.shop-detail-switcher__tabs button > span { grid-row: 1 / 3; color: var(--detail-orange); font: 600 24px/1 var(--display); }
.shop-detail-switcher__tabs button > strong { font-family: var(--serif); font-size: 18px; line-height: 1.35; }
.shop-detail-switcher__tabs button > small { color: var(--detail-muted); font-size: 10px; line-height: 1.45; }
.shop-detail-switcher__tabs button[aria-selected="true"] { color: #fff; background: var(--detail-navy-deep); }
.shop-detail-switcher__tabs button[aria-selected="true"] > span { color: #f2aa82; }
.shop-detail-switcher__tabs button[aria-selected="true"] > small { color: #d3e4e2; }
.shop-detail-switcher__tabs button:hover:not([aria-selected="true"]) { background: var(--detail-mist); }
.shop-detail-switcher__tabs button:focus-visible { position: relative; z-index: 2; outline: 3px solid #f0a278; outline-offset: 2px; }

.shop-detail-page { margin-top: 34px; scroll-margin-top: calc(var(--header-h) + 108px); }
.shop-detail-page[hidden] { display: none !important; }
.shop-detail-page__cover {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  min-height: 610px;
  color: #fff;
  background: var(--detail-navy-deep);
}
.shop-detail-page__cover > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(54px, 7vw, 104px) max(48px, calc((100vw - 1180px) / 2));
  padding-right: clamp(44px, 6vw, 88px);
}
.shop-detail-page__cover > div > p:first-child { margin: 0 0 24px; color: #9ed3cc; font: 700 10px/1 var(--sans); letter-spacing: .18em; }
.shop-detail-page__cover > div > span { color: #f2aa82; font-family: var(--serif); font-size: 14px; }
.shop-detail-page__cover h2 { margin: 24px 0 28px; color: #fff; font-family: var(--serif); font-size: clamp(38px, 4.8vw, 64px); line-height: 1.45; }
.shop-detail-page__cover > div > p:last-child { max-width: 610px; margin: 0; color: #d4e1df; font-size: 14px; line-height: 2; }
.shop-detail-page__cover .shop-detail-photo { min-height: 610px; }
.shop-detail-page__cover--shop { color: var(--detail-navy-deep); background: #ebe1d3; }
.shop-detail-page__cover--shop > div > p:first-child { color: var(--detail-orange); }
.shop-detail-page__cover--shop > div > span { color: var(--detail-teal); }
.shop-detail-page__cover--shop h2 { color: var(--detail-navy-deep); }
.shop-detail-page__cover--shop > div > p:last-child { color: #4f6267; }

.shop-detail-story-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(54px, 8vw, 120px);
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(92px, 11vw, 150px) 0;
}
.shop-detail-story-profile { align-self: start; padding: 26px 0; border-top: 2px solid var(--detail-orange); border-bottom: 1px solid var(--detail-line); }
.shop-detail-story-profile > p { margin: 0 0 24px; color: var(--detail-orange); font: 700 9px/1 var(--sans); letter-spacing: .16em; }
.shop-detail-story-profile > strong { display: block; margin-bottom: 7px; color: var(--detail-navy-deep); font-family: var(--serif); font-size: 28px; }
.shop-detail-story-profile > span { display: block; color: var(--detail-muted); font-size: 12px; }
.shop-detail-story-profile > span b { font-weight: 700; }
.shop-detail-story-profile > small { display: block; margin-top: 28px; color: #52656a; font-size: 9px; line-height: 1.7; }
.shop-detail-story-flow article { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px 36px; padding: 0 0 56px; }
.shop-detail-story-flow article + article { padding-top: 56px; border-top: 1px solid var(--detail-line); }
.shop-detail-story-flow article > p:first-child { grid-row: 1 / 3; margin: 4px 0 0; color: var(--detail-teal); font: 700 10px/1.4 var(--sans); letter-spacing: .12em; }
.shop-detail-story-flow h3 { margin: 0; color: var(--detail-navy-deep); font-family: var(--serif); font-size: clamp(25px, 3vw, 38px); line-height: 1.55; }
.shop-detail-story-flow article > p:last-child { margin: 10px 0 0; color: #3f5257; font-family: var(--serif); font-size: 17px; line-height: 2.25; }

.shop-detail-owner-value {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(52px, 8vw, 120px);
  padding: clamp(92px, 11vw, 145px) max(24px, calc((100vw - 1180px) / 2));
  background: var(--detail-sage);
}
.shop-detail-owner-value > div > p:first-child,
.shop-detail-owner-future > p:first-child,
.shop-detail-reasons header > p,
.shop-detail-visit > div > p:first-child,
.shop-detail-related header > p { margin: 0 0 20px; color: var(--detail-teal); font: 700 10px/1 var(--sans); letter-spacing: .16em; }
.shop-detail-owner-value h2,
.shop-detail-owner-future h2,
.shop-detail-reasons h2,
.shop-detail-visit h2,
.shop-detail-related h2 { margin: 0 0 26px; color: var(--detail-navy-deep); font-family: var(--serif); font-size: clamp(34px, 4.5vw, 54px); line-height: 1.5; }
.shop-detail-owner-value > div > p:last-child { margin: 0; color: #425a5e; font-size: 14px; line-height: 2; }
.shop-detail-value-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid #adbfba; }
.shop-detail-value-list li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: center; min-height: 112px; padding: 24px 0; border-bottom: 1px solid #adbfba; }
.shop-detail-value-list span { color: var(--detail-orange); font: 600 28px/1 var(--display); }
.shop-detail-value-list p { margin: 0; color: var(--detail-navy-deep); font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.65; }

.shop-detail-owner-future { padding: clamp(92px, 11vw, 150px) max(24px, calc((100vw - 900px) / 2)); text-align: center; background: #fff; }
.shop-detail-owner-future blockquote { max-width: 800px; margin: 34px auto; color: var(--detail-orange); font-family: var(--serif); font-size: clamp(25px, 3.5vw, 43px); font-weight: 600; line-height: 1.7; }
.shop-detail-owner-future > p:not(:first-child) { max-width: 720px; margin: 0 auto; color: var(--detail-muted); font-size: 14px; line-height: 2; }
.shop-detail-next {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 34px;
  align-items: center;
  width: min(620px, 100%);
  min-height: 92px;
  margin: 54px auto 0;
  padding: 18px 24px;
  color: #fff;
  border: 0;
  background: var(--detail-navy-deep);
  text-align: left;
}
.shop-detail-next span { font-size: 10px; }
.shop-detail-next strong { font-family: var(--serif); font-size: 22px; }
.shop-detail-next i { grid-column: 2; grid-row: 1 / 3; font-size: 26px; font-style: normal; }
.shop-detail-next:hover { background: var(--detail-orange); }

.shop-detail-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(2, minmax(260px, 34vw));
  gap: 4px;
  padding: 4px;
  background: var(--detail-navy-deep);
}
.shop-detail-gallery .shop-detail-photo { min-height: 0; }
.shop-detail-photo--gallery-main { grid-row: 1 / 3; }
.shop-detail-gallery > p { grid-column: 1 / -1; margin: 0; padding: 10px 18px; color: #d3e4e2; background: var(--detail-navy-deep); font-size: 9px; text-align: right; }

.shop-detail-reasons { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: clamp(92px, 11vw, 150px) 0; }
.shop-detail-reasons header { max-width: 780px; margin-bottom: 60px; }
.shop-detail-reasons header > span,
.shop-detail-related header > span { color: var(--detail-muted); font-size: 13px; line-height: 1.8; }
.shop-detail-reasons__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--detail-line); }
.shop-detail-reasons__grid article { min-height: 380px; padding: clamp(28px, 4vw, 48px); background: #fff; }
.shop-detail-reasons__grid article + article { border-left: 1px solid var(--detail-line); }
.shop-detail-reasons__grid span { display: block; margin-bottom: 64px; color: var(--detail-orange); font: 600 38px/1 var(--display); }
.shop-detail-reasons__grid h3 { margin: 0 0 24px; color: var(--detail-navy-deep); font-family: var(--serif); font-size: clamp(20px, 2.3vw, 27px); line-height: 1.65; }
.shop-detail-reasons__grid p { margin: 0; color: var(--detail-muted); font-size: 13px; line-height: 1.9; }

.shop-detail-visit { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr); color: #fff; background: var(--detail-navy-deep); }
.shop-detail-visit .shop-detail-photo { min-height: 720px; }
.shop-detail-visit > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(54px, 8vw, 110px); }
.shop-detail-visit > div > p:first-child { color: #9ed3cc; }
.shop-detail-visit h2 { color: #fff; }
.shop-detail-visit > div > p:not(:first-child) { margin: 0 0 34px; color: #d4e1df; font-size: 14px; line-height: 2; }
.shop-detail-visit dl { margin: 0; border-top: 1px solid #49636a; }
.shop-detail-visit dl div { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid #49636a; }
.shop-detail-visit dt { color: #9ed3cc; font-size: 10px; font-weight: 700; }
.shop-detail-visit dd { margin: 0; font-family: var(--serif); font-size: 14px; }
.shop-detail-visit small { margin-top: 22px; color: #b9cbca; font-size: 9px; line-height: 1.7; }

.shop-detail-socials {
  scroll-margin-top: 220px;
  margin-top: 34px;
  padding: 24px;
  color: var(--detail-navy-deep);
  border: 1px solid var(--detail-line);
  background: #fff;
}
.shop-detail-socials[hidden] { display: none !important; }
.shop-detail-socials__copy > p:first-child {
  margin: 0 0 9px;
  color: var(--detail-orange);
  font: 700 9px/1 var(--sans);
  letter-spacing: .14em;
}
.shop-detail-socials__copy h3 {
  margin: 0 0 12px;
  color: var(--detail-navy-deep);
  font-family: var(--serif);
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.5;
}
.shop-detail-socials__copy > p:not(:first-child) {
  margin: 0;
  color: var(--detail-muted);
  font-size: 11px;
  line-height: 1.8;
}
.shop-detail-visit .shop-detail-socials__copy > small {
  display: block;
  margin-top: 10px;
  color: #52666b;
  font-size: 9px;
  line-height: 1.65;
}
.shop-detail-socials__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}
.shop-detail-social {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 10px 12px;
  color: #fff;
  border: 0;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}
.shop-detail-social:visited { color: #fff; }
.shop-detail-social:hover {
  color: #fff;
  box-shadow: inset 0 0 0 2px #fff;
  transform: translateY(-2px);
}
.shop-detail-social:focus-visible {
  outline: 3px solid #f0a278;
  outline-offset: 3px;
}
.shop-detail-social--instagram { background: #6f285b; }
.shop-detail-social--x { background: #1c1c1c; }
.shop-detail-social--facebook { background: #194b84; }
.shop-detail-social--line { background: #0b6b3a; }
.shop-detail-social__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--detail-navy-deep);
  border-radius: 50%;
  background: #fff;
  font: 700 11px/1 var(--sans);
}
.shop-detail-social__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.shop-detail-social__copy strong {
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.shop-detail-visit .shop-detail-social__copy small {
  margin: 0;
  color: #fff;
  font-size: 7px;
  line-height: 1.2;
  letter-spacing: .08em;
}

.shop-detail-related { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: clamp(92px, 11vw, 145px) 0; }
.shop-detail-related header { max-width: 760px; margin-bottom: 56px; }
.shop-detail-related > div { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--detail-line); }
.shop-detail-related article { min-height: 280px; padding: clamp(30px, 5vw, 58px); background: #fff; }
.shop-detail-related article + article { border-left: 1px solid var(--detail-line); }
.shop-detail-related article > p { color: var(--detail-orange); font: 700 9px/1 var(--sans); letter-spacing: .14em; }
.shop-detail-related h3 { margin: 30px 0 18px; color: var(--detail-navy-deep); font-family: var(--serif); font-size: 28px; line-height: 1.55; }
.shop-detail-related article > span { color: var(--detail-muted); font-size: 12px; }
.shop-detail-backstory,
.shop-detail-directory-link { min-height: 54px; margin-top: 34px; padding: 12px 18px; border: 1px solid var(--detail-navy-deep); font-size: 12px; font-weight: 700; }
.shop-detail-backstory { color: var(--detail-navy-deep); background: transparent; }
.shop-detail-backstory:hover { color: #fff; background: var(--detail-navy-deep); }
.shop-detail-directory-link { display: flex; align-items: center; justify-content: space-between; float: right; min-width: 280px; color: #fff; background: var(--detail-orange); }
.shop-detail-directory-link:hover { background: var(--detail-navy-deep); }
.shop-detail-v2 .site-footer__copyright { color: #b9ada3; }

@media (max-width: 900px) {
  .shop-detail-hero { grid-template-columns: 1fr; min-height: 0; }
  .shop-detail-hero__copy { padding: 58px 42px; }
  .shop-detail-photo--hero { min-height: 520px; }
  .shop-detail-page__cover { grid-template-columns: 1fr; }
  .shop-detail-page__cover > div { padding: 72px 40px; }
  .shop-detail-page__cover .shop-detail-photo { min-height: 520px; }
  .shop-detail-story-shell { grid-template-columns: 1fr; }
  .shop-detail-story-profile { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; max-width: 440px; }
  .shop-detail-story-profile > p,
  .shop-detail-story-profile > small { grid-column: 1 / -1; }
  .shop-detail-story-profile > strong { margin: 0; }
  .shop-detail-owner-value { grid-template-columns: 1fr; }
  .shop-detail-visit { grid-template-columns: 1fr; }
  .shop-detail-visit .shop-detail-photo { min-height: 540px; }
}

@media (min-width: 720px) and (max-width: 900px) {
  .shop-detail-photo--hero::before,
  .shop-detail-page__cover .shop-detail-photo::before,
  .shop-detail-visit .shop-detail-photo::before {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 719px) {
  .shop-detail-v2 { --header-h: 68px; }
  .shop-detail-v2 .shop-preview__breadcrumb,
  .shop-detail-hero,
  .shop-detail-switcher,
  .shop-detail-story-shell,
  .shop-detail-reasons,
  .shop-detail-related { width: calc(100% - 32px); }
  .shop-detail-hero { margin-bottom: 42px; }
  .shop-detail-hero__copy { padding: 46px 24px; }
  .shop-detail-hero h1 { font-size: 39px; }
  .shop-detail-hero__tagline { font-size: 24px; }
  .shop-detail-photo--hero { min-height: 360px; }
  .shop-detail-switcher { top: 68px; padding-top: 8px; }
  .shop-detail-switcher > p { display: none; }
  .shop-detail-switcher__tabs button { grid-template-columns: 28px 1fr; gap: 1px 7px; min-height: 68px; padding: 9px 8px; }
  .shop-detail-switcher__tabs button > span { font-size: 17px; }
  .shop-detail-switcher__tabs button > strong { font-size: 13px; }
  .shop-detail-switcher__tabs button > small { font-size: 8px; }
  .shop-detail-page { margin-top: 22px; scroll-margin-top: 150px; }
  .shop-detail-page__cover > div { padding: 64px 24px; }
  .shop-detail-page__cover h2 { font-size: 36px; }
  .shop-detail-page__cover .shop-detail-photo { min-height: 370px; }
  .shop-detail-story-shell { gap: 55px; padding: 76px 0; }
  .shop-detail-story-flow article { grid-template-columns: 1fr; gap: 13px; padding-bottom: 43px; }
  .shop-detail-story-flow article + article { padding-top: 43px; }
  .shop-detail-story-flow article > p:first-child { grid-row: auto; }
  .shop-detail-story-flow h3 { font-size: 28px; }
  .shop-detail-story-flow article > p:last-child { font-size: 16px; line-height: 2.1; }
  .shop-detail-owner-value { padding: 76px 20px; }
  .shop-detail-owner-value h2,
  .shop-detail-owner-future h2,
  .shop-detail-reasons h2,
  .shop-detail-visit h2,
  .shop-detail-related h2 { font-size: 32px; }
  .shop-detail-owner-future { padding: 76px 20px; }
  .shop-detail-owner-future blockquote { font-size: 26px; }
  .shop-detail-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: 290px 190px; }
  .shop-detail-photo--gallery-main { grid-column: 1 / -1; grid-row: auto; }
  .shop-detail-photo--gallery-main::before { width: 100%; height: auto; }
  .shop-detail-gallery > p { font-size: 8px; text-align: left; }
  .shop-detail-reasons { padding: 76px 0; }
  .shop-detail-reasons header { margin-bottom: 42px; }
  .shop-detail-reasons__grid { grid-template-columns: 1fr; }
  .shop-detail-reasons__grid article { min-height: 0; padding: 32px 24px; }
  .shop-detail-reasons__grid article + article { border-top: 1px solid var(--detail-line); border-left: 0; }
  .shop-detail-reasons__grid span { margin-bottom: 28px; }
  .shop-detail-visit .shop-detail-photo { min-height: 390px; }
  .shop-detail-visit > div { padding: 70px 24px; }
  .shop-detail-visit dl div { grid-template-columns: 1fr; gap: 5px; }
  .shop-detail-socials { scroll-margin-top: 165px; padding: 20px 16px; }
  .shop-detail-socials__copy h3 span { display: block; }
  .shop-detail-socials__links { gap: 6px; }
  .shop-detail-social {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    min-height: 62px;
    padding: 8px;
  }
  .shop-detail-social__icon { width: 32px; height: 32px; font-size: 9px; }
  .shop-detail-social__copy strong { font-size: 11px; }
  .shop-detail-visit .shop-detail-social__copy small { font-size: 6.5px; }
  .shop-detail-related { padding: 76px 0 110px; }
  .shop-detail-related > div { grid-template-columns: 1fr; }
  .shop-detail-related article { min-height: 0; }
  .shop-detail-related article + article { border-top: 1px solid var(--detail-line); border-left: 0; }
  .shop-detail-backstory,
  .shop-detail-directory-link { float: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-detail-switcher__tabs button,
  .shop-detail-next,
  .shop-detail-social { transition: none !important; }
  .shop-detail-social:hover { transform: none; }
}

/* Contrast-safe portal overrides and opaque photo labels. */
.page-portal { --portal-orange: #a94728; }
.page-portal .site-header,
.page-portal .site-header.is-scrolled { background: #fff; backdrop-filter: none; }
.page-portal .portal-find-guide button > small { color: #52686d; }
.page-portal .portal-search input::placeholder { color: #5d7075; opacity: 1; }
.page-portal .portal-store-card__demo { color: #87381e; }
.page-portal .portal-store-card__cover > span,
.page-portal .portal-store-card__cover > small { background: #102f38; }
.page-portal .portal-participation__links span { color: #fff; opacity: 1; }
.page-portal .portal-participation__links a:hover span { color: var(--portal-navy-deep); }
.page-portal .portal-store-card__body > span { font-size: 10px; }
.page-portal .portal-store-card__body > span::before { content: none; }
.page-portal .site-footer__copyright { color: #b9ada3; }
.page-portal .portal-event-strip p span { color: #4e5658; }
.page-portal .portal-event-strip__label { color: #963c20; }
.page-portal .portal-region-quick > span,
.page-portal .portal-category-quick > span { color: #52686d; }
.page-portal .section-heading__index--light { color: #fff !important; }
.page-portal .portal-results-count span,
.page-portal .portal-section-heading > p { color: #596e73; }
.js .page-portal .js-reveal { opacity: 1; transform: none; transition: none; }

@media (max-width: 719px) {
  .page-portal .portal-store-card__body > span { font-size: 9px; }
}

/* --------------------------------------------------------------------------
   Journal directory + long-form article pages
   -------------------------------------------------------------------------- */
.journal-page,
.article-page {
  --journal-navy: #173e48;
  --journal-navy-deep: #102f38;
  --journal-teal: #126f68;
  --journal-orange: #a94728;
  --journal-cream: #f6f2e9;
  --journal-paper: #fffdf8;
  --journal-mist: #edf3f2;
  --journal-sage: #dce9e4;
  --journal-line: #d6dfdf;
  --journal-muted: #52666b;
  --content: min(1360px, calc(100% - 48px));
  --header-h: 76px;
  color: var(--journal-navy-deep);
  background: var(--journal-cream);
}
.journal-page h1,
.journal-page h2,
.journal-page h3,
.article-page h1,
.article-page h2,
.article-page h3 { color: var(--journal-navy-deep); }
.journal-page .site-header,
.article-page .site-header {
  height: var(--header-h);
  border-bottom-color: var(--journal-line);
  background: #fff;
  backdrop-filter: none;
}
.journal-page .site-header.is-scrolled,
.article-page .site-header.is-scrolled { border-color: var(--journal-line); background: #fff; }
.journal-page .site-header__inner,
.article-page .site-header__inner { width: min(1360px, calc(100% - 48px)); }
.journal-page .site-brand__mark,
.article-page .site-brand__mark { background: var(--journal-orange); }
.journal-page .site-brand__name,
.article-page .site-brand__name { color: var(--journal-navy-deep); }
.journal-page .site-brand__edition,
.article-page .site-brand__edition { color: var(--journal-orange); }
.journal-page .site-nav,
.article-page .site-nav { gap: 0; border-left: 1px solid var(--journal-line); }
.journal-page .site-nav__link,
.article-page .site-nav__link {
  min-width: auto;
  padding-inline: clamp(11px, 1.3vw, 18px);
  border-right: 1px solid var(--journal-line);
  color: var(--journal-navy-deep);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.journal-page .site-nav__link::after,
.article-page .site-nav__link::after { height: 3px; background: var(--journal-teal); }
.journal-page .site-nav__link.is-current,
.article-page .site-nav__link.is-current { color: var(--journal-teal); }
.journal-page .site-nav__link--accent,
.article-page .site-nav__link--accent { color: #fff; background: var(--journal-orange); }
.journal-page .site-nav__link--accent::after,
.article-page .site-nav__link--accent::after { background: var(--journal-navy-deep); }
.journal-page .demo-notice,
.article-page .demo-notice {
  display: flex;
  gap: 18px;
  align-items: center;
  min-height: 48px;
  padding: 8px max(24px, calc((100% - 1360px) / 2));
  color: #425a60;
  border-color: var(--journal-line);
  background: #fff;
}
.journal-page .demo-notice__label,
.article-page .demo-notice__label {
  flex: 0 0 auto;
  color: var(--journal-orange);
  font: 700 10px/1 var(--display);
  letter-spacing: .15em;
}
.journal-page .demo-notice p,
.article-page .demo-notice p { margin: 0; color: #4f6267; font-size: 10px; line-height: 1.55; }
.journal-page .site-footer__copyright,
.article-page .site-footer__copyright { color: #b9ada3; }

/* Journal hero */
.journal-hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
  width: min(1360px, calc(100% - 48px));
  min-height: 510px;
  margin-inline: auto;
  border-inline: 1px solid var(--journal-line);
  background: var(--journal-paper);
}
.journal-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 5vw, 68px);
}
.journal-breadcrumb,
.article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 42px;
  color: var(--journal-muted);
  font-size: 10px;
  font-weight: 700;
}
.journal-breadcrumb a:hover,
.article-breadcrumb a:hover { color: var(--journal-orange); }
.journal-hero__eyebrow {
  margin: 0 0 16px;
  color: var(--journal-teal);
  font: 700 11px/1.4 var(--sans);
  letter-spacing: .14em;
}
.journal-hero h1 {
  margin: 0 0 30px;
  font-size: clamp(40px, 4.5vw, 62px);
  line-height: 1.35;
  letter-spacing: -.02em;
}
.journal-hero__copy > p:not(.journal-hero__eyebrow) {
  max-width: 620px;
  margin: 0 0 36px;
  color: var(--journal-muted);
  font-size: 14px;
  line-height: 2;
}
.journal-hero__counts {
  display: flex;
  margin: auto 0 0;
  border-top: 1px solid var(--journal-line);
}
.journal-hero__counts > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  min-width: 120px;
  padding: 17px 18px 0 0;
}
.journal-hero__counts > div + div { padding-left: 18px; border-left: 1px solid var(--journal-line); }
.journal-hero__counts dt { color: var(--journal-muted); font-size: 10px; font-weight: 700; }
.journal-hero__counts dd { margin: 0; color: var(--journal-orange); font: 600 31px/1 var(--display); }
.journal-hero__counts small { margin-left: 3px; font: 700 9px/1 var(--sans); }
.journal-hero__mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  min-width: 0;
  padding: 4px;
  background: var(--journal-navy-deep);
}
.journal-photo,
.journal-card__visual {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  background: #cad7d5;
  isolation: isolate;
}
.journal-hero__mosaic .journal-photo:first-child { grid-row: 1 / 3; }
.journal-photo::before,
.journal-card__visual::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  background-image: var(--journal-photo-image);
  background-repeat: no-repeat;
  background-position: var(--journal-photo-x, 0%) var(--journal-photo-y, 0%);
  background-size: 405% 405%;
  transform: translate(-50%, -50%);
  content: "";
}
.journal-photo__label {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  padding: 5px 7px;
  color: #fff;
  background: #102f38;
  font: 700 7px/1 var(--sans);
  letter-spacing: .1em;
}

/* Journal purpose and filters */
.journal-purpose { padding: clamp(52px, 6vw, 78px) 0; color: #fff; background: var(--journal-navy-deep); }
.journal-purpose header { display: grid; grid-template-columns: .42fr 1fr; gap: 50px; align-items: end; margin-bottom: 48px; }
.journal-purpose header p,
.journal-directory__heading > div > p {
  margin: 0;
  color: #94cbc4;
  font: 700 10px/1 var(--sans);
  letter-spacing: .15em;
}
.journal-purpose h2 { margin: 0; color: #fff; font-size: clamp(32px, 4vw, 52px); line-height: 1.5; }
.journal-purpose header > div > span { display: block; margin-top: 9px; color: #c8d7d6; font-size: 12px; line-height: 1.75; }
.journal-purpose__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #49636a; }
.journal-purpose__grid button {
  position: relative;
  min-height: 210px;
  padding: clamp(24px, 3vw, 36px);
  color: #fff;
  text-align: left;
  transition: background .25s ease, color .25s ease;
}
.journal-purpose__grid button + button { border-left: 1px solid #49636a; }
.journal-purpose__grid button:hover,
.journal-purpose__grid button:focus-visible { color: var(--journal-navy-deep); background: var(--journal-sage); }
.journal-purpose__grid button > span { display: block; margin-bottom: 26px; color: #94cbc4; font: 600 15px/1 var(--display); letter-spacing: .1em; }
.journal-purpose__grid button:hover > span,
.journal-purpose__grid button:focus-visible > span { color: var(--journal-teal); }
.journal-purpose__grid strong { display: block; margin-bottom: 18px; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.55; }
.journal-purpose__copy { display: block; margin: 0 0 28px; color: #c8d7d6; font-size: 12px; line-height: 1.85; }
.journal-purpose__grid button:hover .journal-purpose__copy,
.journal-purpose__grid button:focus-visible .journal-purpose__copy { color: #425a60; }
.journal-purpose__grid i { display: block; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
.journal-purpose__grid i b { color: inherit; font: 600 18px/1 var(--display); }
.journal-purpose__grid button:hover i,
.journal-purpose__grid button:focus-visible i { color: var(--journal-orange); }

.journal-directory { padding: clamp(62px, 8vw, 104px) 0; background: var(--journal-cream); }
.journal-directory__heading {
  display: grid;
  grid-template-columns: minmax(340px, .75fr) 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 54px;
}
.journal-directory__heading > div > p { margin-bottom: 12px; color: var(--journal-teal); }
.journal-directory__heading h2 { margin: 0; font-size: clamp(40px, 5vw, 64px); }
.journal-directory__heading > p { max-width: 620px; margin: 0 0 8px; color: var(--journal-muted); font-size: 13px; line-height: 1.9; }
.journal-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: end;
  padding: 24px;
  border: 1px solid var(--journal-line);
  background: #fff;
}
.journal-filter__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.journal-filter__group legend {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin: 0 0 9px;
  padding: 0;
  color: var(--journal-navy-deep);
  font-size: 12px;
  font-weight: 700;
}
.journal-filter__group legend span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #fff;
  border-radius: 50%;
  background: var(--journal-teal);
  font: 600 12px/1 var(--display);
}
.journal-filter__types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.journal-filter__scopes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.journal-filter__types button,
.journal-filter__scopes button {
  min-height: 54px;
  padding: 9px;
  border: 1px solid var(--journal-line);
  color: var(--journal-muted);
  font-size: 12px;
  font-weight: 700;
}
.journal-filter__types button + button,
.journal-filter__scopes button + button { border-left: 0; }
.journal-filter__types button[aria-pressed="true"],
.journal-filter__scopes button[aria-pressed="true"] { color: #fff; border-color: var(--journal-teal); background: var(--journal-teal); }
.journal-filter__types span,
.journal-filter__scopes span { margin-left: 3px; font-family: var(--display); font-size: 15px; }
.journal-filter__locations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.journal-filter label { display: grid; gap: 5px; }
.journal-filter label > span { color: var(--journal-muted); font-size: 12px; font-weight: 700; }
.journal-filter select,
.journal-filter input {
  width: 100%;
  min-height: 54px;
  padding: 0 14px;
  border: 1px solid var(--journal-line);
  border-radius: 0;
  color: var(--journal-navy-deep);
  background: #fff;
  font-size: 12px;
}
.journal-filter input::placeholder { color: #607379; opacity: 1; }
.journal-filter select:disabled { color: #687b80; background: #eef2f1; cursor: not-allowed; }
.journal-filter__reset,
.journal-empty button {
  min-height: 54px;
  padding: 0 18px;
  color: var(--journal-teal);
  border: 1px solid var(--journal-teal);
  font-size: 11px;
  font-weight: 700;
}
.journal-filter__reset:hover,
.journal-empty button:hover { color: #fff; background: var(--journal-teal); }
.journal-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 14px 2px 0;
}
.journal-active-filters[hidden] { display: none; }
.journal-active-filters__label {
  margin-right: 3px;
  color: var(--journal-muted);
  font-size: 11px;
  font-weight: 700;
}
.journal-active-filters__chip {
  min-height: 38px;
  padding: 7px 12px;
  color: var(--journal-teal);
  border: 1px solid var(--journal-teal);
  background: #fff;
  font-size: 11px;
  font-weight: 700;
}
.journal-active-filters__chip:hover,
.journal-active-filters__chip:focus-visible { color: #fff; background: var(--journal-teal); }
.journal-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 24px 2px 20px;
}
.journal-results-bar p { margin: 0; color: var(--journal-muted); font-size: 11px; }
.journal-results-bar p:first-child { display: flex; gap: 10px; align-items: baseline; }
.journal-results-bar strong { color: var(--journal-orange); font: 600 34px/1 var(--display); }

/* Journal cards */
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.journal-card { min-width: 0; border: 1px solid var(--journal-line); background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.journal-card:hover { z-index: 1; box-shadow: 0 18px 48px rgba(16, 47, 56, .13); transform: translateY(-4px); }
.journal-card > a,
.journal-card__link { display: flex; height: 100%; flex-direction: column; }
.journal-card__visual { min-height: 0; aspect-ratio: 4 / 3; background: #cad7d5; }
.journal-card__visual::after {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 6px 8px;
  color: #fff;
  background: var(--journal-navy-deep);
  font: 700 8px/1 var(--sans);
  letter-spacing: .1em;
  content: none;
}
.journal-card__fictional {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  padding: 6px 8px;
  color: #fff;
  background: var(--journal-navy-deep);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
}
.journal-card__body { display: flex; flex: 1; flex-direction: column; padding: 22px 20px 20px; }
.journal-card__type,
.journal-card__eyebrow {
  margin: 0 0 11px;
  color: var(--journal-teal);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}
.journal-card--marche .journal-card__type,
.journal-card[data-type="marche"] .journal-card__type { color: var(--journal-orange); }
.journal-card h3,
.journal-card__title { margin: 0 0 14px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.55; }
.journal-card__excerpt { margin: 0 0 20px; color: var(--journal-muted); font-size: 12px; line-height: 1.8; }
.journal-card__meta { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: auto 0 16px; color: var(--journal-muted); font-size: 9px; }
.journal-card__date { margin-left: auto; color: var(--journal-muted); font: 600 11px/1 var(--display); }
.journal-card__area { margin: -6px 0 12px; color: var(--journal-muted); font-size: 9px; font-weight: 700; }
.journal-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: -5px 0 13px; }
.journal-card__badge,
.journal-card__scope {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  color: var(--journal-navy-deep);
  border: 1px solid #bed0ce;
  background: var(--journal-mist);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
}
.journal-card__badge--national,
.journal-card__scope--national { color: #75331f; border-color: #e0b9a9; background: #f8e9e2; }
.journal-card__badge--online,
.journal-card__scope--online { color: #fff; border-color: var(--journal-teal); background: var(--journal-teal); }
.journal-card__shops,
.journal-card__store { margin: 0 0 16px; color: var(--journal-muted); font-size: 10px; line-height: 1.65; }
.journal-card__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 13px;
  color: var(--journal-teal);
  border-top: 1px solid var(--journal-line);
  font-size: 10px;
  font-weight: 700;
}
.journal-card__read {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 13px;
  color: var(--journal-teal);
  border-top: 1px solid var(--journal-line);
  font-size: 10px;
  font-weight: 700;
}
.journal-card__read i { font-size: 15px; font-style: normal; }
.journal-empty { padding: 90px 30px; border: 1px solid var(--journal-line); background: #fff; text-align: center; }
.journal-empty > span { color: var(--journal-orange); font: 600 14px/1 var(--display); letter-spacing: .13em; }
.journal-empty h3 { margin: 20px 0 12px; font-size: 28px; }
.journal-empty p { margin-bottom: 28px; color: var(--journal-muted); font-size: 13px; }

/* Article hero and reading layout */
.article-page .reading-progress__bar { background: var(--journal-orange); }
.article-story { overflow: clip; background: var(--journal-paper); }
.article-error { width: min(900px, calc(100% - 48px)); margin: 80px auto; padding: 60px; border: 1px solid var(--journal-line); background: #fff; text-align: center; }
.article-error p { margin-bottom: 20px; font-family: var(--serif); font-size: 26px; }
.article-error a { color: var(--journal-teal); font-weight: 700; }
.article-breadcrumb { width: min(1360px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0; }
.article-hero {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(430px, 1.06fr);
  width: min(1360px, calc(100% - 48px));
  min-height: 690px;
  margin: 0 auto;
  border: 1px solid var(--journal-line);
  background: #fff;
}
.article-hero__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 6vw, 90px); }
.article-hero__type { display: flex; gap: 12px; align-items: center; margin: 0 0 25px; }
.article-hero__type span { color: var(--journal-orange); font: 600 15px/1 var(--display); letter-spacing: .1em; }
.article-hero__type b { padding: 5px 8px; color: #fff; background: var(--journal-teal); font-size: 9px; letter-spacing: .08em; }
.article-hero h1 { margin: 0 0 28px; font-size: clamp(38px, 4.5vw, 62px); line-height: 1.45; letter-spacing: -.01em; }
.article-hero__lead { margin: 0 0 34px; color: var(--journal-muted); font-size: 14px; line-height: 2; }
.article-hero__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: auto 0 0; border-top: 1px solid var(--journal-line); }
.article-hero__meta > div { display: grid; grid-template-columns: 48px 1fr; gap: 9px; padding: 13px 14px 13px 0; border-bottom: 1px solid var(--journal-line); }
.article-hero__meta > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--journal-line); }
.article-hero__meta dt { color: var(--journal-orange); font: 700 9px/1.6 var(--sans); letter-spacing: .1em; }
.article-hero__meta dd { margin: 0; color: var(--journal-muted); font-size: 10px; line-height: 1.6; }
.article-visual {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: #cad7d5;
  isolation: isolate;
}
.article-visual--photo::before,
.article-visual--hero::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  background-image: var(--article-photo-sheet);
  background-repeat: no-repeat;
  background-position: var(--article-photo-x, 0%) var(--article-photo-y, 0%);
  background-size: 405% 405%;
  transform: translate(-50%, -50%);
  content: "";
}
.article-visual figcaption {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 7px 9px;
  color: #fff;
  background: var(--journal-navy-deep);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .08em;
}
.article-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 760px);
  gap: clamp(70px, 9vw, 140px);
  justify-content: center;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(92px, 11vw, 150px) 0;
}
.article-aside { position: sticky; top: calc(var(--header-h) + 30px); align-self: start; padding: 24px 0; border-block: 1px solid var(--journal-line); }
.article-aside > p { margin: 0 0 18px; color: var(--journal-orange); font: 700 9px/1 var(--sans); letter-spacing: .14em; }
.article-toc { display: grid; }
.article-toc a { padding: 12px 0; color: var(--journal-muted); border-bottom: 1px solid var(--journal-line); font-size: 11px; font-weight: 700; line-height: 1.65; }
.article-toc a:hover { color: var(--journal-teal); }
.article-aside__note { margin-top: 28px; padding: 17px; background: var(--journal-mist); }
.article-aside__note strong { color: var(--journal-teal); font-size: 9px; letter-spacing: .12em; }
.article-aside__note p { margin: 7px 0 0; color: var(--journal-muted); font-size: 9px; line-height: 1.75; }
.article-intro {
  margin: 0 0 74px;
  padding: 0 0 58px;
  color: var(--journal-navy);
  border-bottom: 1px solid var(--journal-line);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 2.25;
}
.article-section { scroll-margin-top: calc(var(--header-h) + 30px); }
.article-section + .article-section { margin-top: 96px; }
.article-section__index { margin: 0 0 15px; color: var(--journal-orange); font: 600 16px/1 var(--display); letter-spacing: .1em; }
.article-section__kicker { margin: 0 0 15px; color: var(--journal-orange); font: 700 10px/1 var(--sans); letter-spacing: .13em; }
.article-section h2 { margin: 0 0 38px; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.65; }
.article-section__body p,
.article-section > p:not(.article-section__index) { margin: 0 0 28px; color: #344b51; font-size: 16px; line-height: 2.25; }
.article-section .article-visual { margin: 46px 0; min-height: 0; aspect-ratio: 16 / 10; }
.article-section .article-diagram { min-height: 0; aspect-ratio: auto; }

/* Article diagrams */
.article-diagram {
  margin: 46px 0;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--journal-line);
  background: var(--journal-mist);
}
.article-diagram__title {
  display: block;
  margin: 0 0 30px;
  color: var(--journal-navy-deep);
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.55;
}
.article-visual--hero.article-diagram {
  display: flex;
  min-height: 690px;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: clamp(34px, 5vw, 68px);
}
.article-visual--hero.article-diagram::before { content: none; }
.article-diagram > p,
.article-diagram__label { margin: 0 0 12px; color: var(--journal-teal); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.article-diagram h3 { margin: 0 0 30px; font-size: 27px; line-height: 1.6; }
.article-diagram ol,
.article-diagram ul,
.article-diagram__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 0; list-style: none; counter-reset: diagram; }
.article-diagram li,
.article-diagram__item {
  position: relative;
  min-height: 138px;
  padding: 18px 14px;
  color: var(--journal-navy-deep);
  border-top: 3px solid var(--journal-teal);
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.75;
  counter-increment: diagram;
}
.article-diagram li::before { display: block; margin-bottom: 18px; color: var(--journal-orange); font: 600 23px/1 var(--display); content: counter(diagram, decimal-leading-zero); }
.article-diagram__number { display: block; margin-bottom: 18px; color: var(--journal-orange); font: 600 23px/1 var(--display); }
.article-diagram__copy { margin: 0; color: var(--journal-navy-deep); font-size: 11px; font-weight: 700; line-height: 1.75; }
.article-diagram figcaption,
.article-diagram__caption { margin: 24px 0 0; color: var(--journal-muted); font-size: 9px; line-height: 1.7; }
.article-diagram .article-visual__caption { position: static; max-width: none; padding: 0; color: var(--journal-muted); background: transparent; letter-spacing: .02em; }

/* Experience notes, participants and timeline */
.article-visit-notes,
.article-participants,
.article-timeline { margin-top: 100px; scroll-margin-top: calc(var(--header-h) + 30px); }
.article-visit-notes header,
.article-participants header,
.article-timeline header { margin-bottom: 36px; }
.article-visit-notes header > p,
.article-participants header > p,
.article-timeline header > p,
.article-pattern__heading > p,
.article-related-shops header > p,
.article-related-reading header > p,
.article-cta > p:first-child { margin: 0 0 10px; color: var(--journal-orange); font: 700 9px/1 var(--sans); letter-spacing: .14em; }
.article-visit-notes h2,
.article-participants h2,
.article-timeline h2,
.article-pattern h2,
.article-related-shops h2,
.article-related-reading h2 { margin: 0; font-size: clamp(30px, 3.5vw, 42px); line-height: 1.55; }
.article-participants header > span,
.article-related-shops header > span { display: block; margin-top: 12px; color: var(--journal-muted); font-size: 10px; }
.article-visit-notes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--journal-line); }
.article-visit-note,
.article-visit-notes__grid > article { min-height: 180px; padding: 26px 22px; background: #fff; }
.article-visit-note + .article-visit-note,
.article-visit-notes__grid > article + article { border-left: 1px solid var(--journal-line); }
.article-visit-note > span,
.article-visit-notes__grid article > span { color: var(--journal-orange); font: 600 20px/1 var(--display); }
.article-visit-note h3,
.article-visit-notes__grid article h3 { margin: 25px 0 10px; font-size: 18px; line-height: 1.55; }
.article-visit-note p,
.article-visit-notes__grid article p { margin: 0; color: var(--journal-muted); font-size: 10px; line-height: 1.8; }
.article-participants__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--journal-line); }
.article-participant,
.article-participants__grid > article { display: flex; min-width: 0; min-height: 250px; flex-direction: column; padding: 27px 24px; background: #fff; }
.article-participant:nth-child(even),
.article-participants__grid > article:nth-child(even) { border-left: 1px solid var(--journal-line); }
.article-participant:nth-child(n+3),
.article-participants__grid > article:nth-child(n+3) { border-top: 1px solid var(--journal-line); }
.article-participant__photo { position: relative; min-height: 150px; overflow: hidden; background: #cad7d5; }
.article-participant__photo::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  background-image: var(--article-photo-sheet);
  background-repeat: no-repeat;
  background-position: var(--article-photo-x, 0%) var(--article-photo-y, 0%);
  background-size: 405% 405%;
  transform: translate(-50%, -50%);
  content: "";
}
.article-participant__body,
.article-participants__grid > article > div:last-child { padding: 20px 18px; }
.article-participant__number { color: var(--journal-orange); font: 600 24px/1 var(--display); }
.article-participant__body > p,
.article-participants__grid article > div:last-child > p,
.article-participant__meta { margin: 20px 0 7px; color: var(--journal-teal); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.article-participant h3,
.article-participants__grid article h3 { margin: 0 0 9px; font-size: 17px; line-height: 1.5; }
.article-participant__booth { margin: 0; color: var(--journal-muted); font-size: 10px; line-height: 1.8; }
.article-participant__body > span,
.article-participants__grid article > div:last-child > span { display: block; color: var(--journal-muted); font-size: 9px; line-height: 1.65; }
.article-participant__body a,
.article-participants__grid article > div:last-child > a,
.article-participant__link { display: inline-block; margin-top: auto; padding-top: 18px; color: var(--journal-orange); font-size: 9px; font-weight: 700; }
.article-timeline ol { margin: 0; padding: 0; border-top: 1px solid var(--journal-line); list-style: none; }
.article-timeline li { display: grid; grid-template-columns: 90px 1fr; gap: 22px; padding: 20px 4px; border-bottom: 1px solid var(--journal-line); }
.article-timeline time,
.article-timeline li > span:first-child { color: var(--journal-orange); font: 600 21px/1.4 var(--display); }
.article-timeline strong { font-family: var(--serif); font-size: 16px; }
.article-timeline__body h3 { margin: 0 0 7px; font-size: 16px; }
.article-timeline__body p { margin: 0; color: var(--journal-muted); font-size: 10px; line-height: 1.75; }
.article-timeline li > span:last-child,
.article-timeline li > p { margin: 0; color: var(--journal-muted); font-size: 11px; line-height: 1.8; }

/* Blueprint and article links */
.article-pattern {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 60px;
  margin-top: 110px;
  padding: clamp(38px, 6vw, 64px);
  color: #fff;
  background: var(--journal-navy-deep);
}
.article-pattern__heading > p,
.article-cta > p:first-child { color: #a9d8d2; }
.article-pattern h2 { color: #fff; }
.article-pattern__body > strong { display: block; margin-bottom: 16px; color: #a9d8d2; font-family: var(--serif); font-size: 21px; line-height: 1.6; }
.article-pattern__body > p { margin: 0 0 28px; color: #c8d7d6; font-size: 11px; line-height: 1.85; }
.article-pattern__body ol { margin: 0; padding: 0; border-top: 1px solid #49636a; list-style: none; }
.article-pattern__body li { display: grid; grid-template-columns: 38px 120px 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px solid #49636a; }
.article-pattern__number { color: #a9d8d2; font: 600 17px/1.6 var(--display); }
.article-pattern__body li strong { font-size: 11px; }
.article-pattern__body li > span:not(.article-pattern__number),
.article-pattern__body li p { margin: 0; color: #c8d7d6; font-size: 9px; line-height: 1.7; }
.article-related-shops,
.article-related-reading { padding: clamp(86px, 10vw, 130px) max(24px, calc((100% - 1180px) / 2)); }
.article-related-shops { background: var(--journal-mist); }
.article-related-reading { background: #fff; }
.article-related-shops header,
.article-related-reading header { margin-bottom: 45px; }
.article-related-shops__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0; background: transparent; }
.article-related-shops__grid[data-count="1"] { grid-template-columns: 1fr; }
.article-related-shops__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-related-shop,
.article-related-shops__grid > article { display: flex; min-width: 0; flex-direction: column; min-height: 330px; padding: 0; border: 1px solid var(--journal-line); background: #fff; }
.article-related-shop + .article-related-shop,
.article-related-shops__grid > article + article { border-left: 0; }
.article-related-shop__visual { min-height: 0; aspect-ratio: 4 / 3; }
.article-related-shops__grid[data-count="1"] .article-related-shop { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); }
.article-related-shops__grid[data-count="1"] .article-related-shop__visual { min-height: 430px; aspect-ratio: auto; }
.article-related-shop__body { display: flex; flex: 1; flex-direction: column; padding: 28px 24px; }
.article-related-shop > p,
.article-related-shops__grid article > p { margin: 0 0 25px; color: var(--journal-orange); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.article-related-shop__meta { margin: 0 0 12px; color: var(--journal-teal); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.article-related-shop h3,
.article-related-shops__grid article h3 { margin: 0 0 12px; font-size: 24px; line-height: 1.55; }
.article-related-shop__tagline { margin: 0; color: var(--journal-muted); font-size: 10px; line-height: 1.75; }
.article-related-shop > span,
.article-related-shops__grid article > span { color: var(--journal-muted); font-size: 10px; line-height: 1.75; }
.article-related-shop__links,
.article-related-shops__grid article > div { display: grid; gap: 7px; margin-top: auto; padding-top: 28px; }
.article-related-shop__links a,
.article-related-shops__grid article > div a { display: flex; justify-content: space-between; padding: 11px 12px; color: var(--journal-teal); border: 1px solid var(--journal-teal); font-size: 9px; font-weight: 700; }
.article-related-shop__links a:hover,
.article-related-shops__grid article > div a:hover { color: #fff; background: var(--journal-teal); }
.article-related-reading__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--journal-line); }
.article-related-card,
.article-related-reading__grid > article { display: flex; min-width: 0; flex-direction: column; padding: 28px 24px 28px 0; border-bottom: 1px solid var(--journal-line); }
.article-related-card + .article-related-card,
.article-related-reading__grid > article + article { padding-left: 24px; border-left: 1px solid var(--journal-line); }
.article-related-card > a,
.article-related-reading__grid article > a { display: flex; height: 100%; flex-direction: column; }
.article-related-reading__number { color: var(--journal-orange); font: 600 22px/1 var(--display); }
.article-related-card p,
.article-related-reading__grid article p { margin: 0 0 14px; color: var(--journal-teal); font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.article-related-reading__meta { margin-top: 26px !important; }
.article-related-card h3,
.article-related-reading__grid article h3 { margin: 0 0 20px; font-size: 20px; line-height: 1.65; }
.article-related-reading__excerpt { color: var(--journal-muted) !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1.8; letter-spacing: .02em !important; }
.article-related-card span,
.article-related-reading__grid article span { margin-top: auto; color: var(--journal-orange); font-size: 9px; font-weight: 700; }
.article-related-reading__link { margin-top: auto; padding-top: 16px; color: var(--journal-orange); font-size: 9px; font-weight: 700; }
.article-cta { padding: clamp(84px, 10vw, 130px) 24px; color: #fff; background: var(--journal-navy-deep); text-align: center; }
.article-cta h2 { max-width: 820px; margin: 0 auto 22px; color: #fff; font-size: clamp(34px, 4.7vw, 58px); line-height: 1.55; }
.article-cta > p:not(:first-child) { max-width: 700px; margin: 0 auto 34px; color: #c8d7d6; font-size: 12px; line-height: 1.85; }
.article-cta a { display: inline-flex; gap: 30px; align-items: center; justify-content: space-between; min-width: min(440px, 100%); padding: 18px 24px; color: var(--journal-navy-deep); background: #fff; font-size: 11px; font-weight: 700; }
.article-cta a:hover { color: #fff; background: var(--journal-orange); }

/* Store page: real related reading cards */
.shop-detail-related > .js-store-related-articles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-detail-related .js-store-related-articles article { min-height: 340px; padding: 0; }
.shop-detail-related .js-store-related-articles article + article { border-left: 1px solid var(--detail-line); }
.shop-detail-related .js-store-related-articles article > a { display: flex; height: 100%; flex-direction: column; padding: clamp(28px, 4vw, 44px); }
.shop-detail-related .js-store-related-articles article > a > p { color: var(--detail-orange); font: 700 9px/1 var(--sans); letter-spacing: .14em; }
.shop-detail-related .js-store-related-articles article > a > h3 { margin: 30px 0 18px; }
.shop-detail-related .js-store-related-articles article > a > span { color: var(--detail-muted); font-size: 11px; line-height: 1.85; }
.shop-detail-related .js-store-related-articles article > a > i { margin-top: auto; padding-top: 24px; color: var(--detail-teal); font-size: 10px; font-style: normal; font-weight: 700; }
.shop-detail-related .js-store-related-articles article > a:hover { background: var(--detail-mist); }

@media (max-width: 1100px) {
  .journal-page .site-nav__link,
  .article-page .site-nav__link { padding-inline: 10px; font-size: 11px; }
  .journal-hero,
  .article-hero { grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); }
  .journal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .journal-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-layout { grid-template-columns: 190px minmax(0, 690px); gap: 60px; }
}

@media (max-width: 900px) {
  .journal-hero,
  .article-hero { grid-template-columns: 1fr; }
  .journal-hero__mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 280px;
    min-height: 0;
  }
  .journal-hero__mosaic .journal-photo:first-child { grid-row: auto; }
  .journal-hero__mosaic .journal-photo:first-child::before { width: auto; height: 100%; }
  .article-hero__copy { min-height: 600px; }
  .article-visual--hero { min-height: 620px; }
  .journal-purpose header,
  .journal-directory__heading { grid-template-columns: 1fr; gap: 22px; }
  .journal-purpose__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .journal-purpose__grid button { min-height: 0; }
  .journal-purpose__grid button > span { margin-bottom: 24px; }
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-layout { grid-template-columns: 1fr; width: min(760px, calc(100% - 48px)); }
  .article-aside { position: static; }
  .article-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .article-pattern { grid-template-columns: 1fr; gap: 32px; }
  .shop-detail-related > .js-store-related-articles { grid-template-columns: 1fr; }
  .shop-detail-related .js-store-related-articles article + article { border-top: 1px solid var(--detail-line); border-left: 0; }
  .shop-detail-related .js-store-related-articles article { min-height: 0; }
}

@media (max-width: 719px) {
  .journal-page,
  .article-page { --content: calc(100% - 32px); --header-h: 68px; }
  .journal-page .demo-notice,
  .article-page .demo-notice { display: block; min-height: 0; padding: 8px 16px; }
  .journal-page .demo-notice__label,
  .article-page .demo-notice__label { display: block; margin-bottom: 3px; font-size: 8px; }
  .journal-page .demo-notice p,
  .article-page .demo-notice p { font-size: 8px; }
  .journal-hero,
  .article-hero,
  .article-breadcrumb { width: calc(100% - 32px); }
  .journal-hero__copy { padding: 48px 24px; }
  .journal-breadcrumb { margin-bottom: 30px; }
  .journal-hero h1 { font-size: 36px; }
  .journal-hero__copy > p:not(.journal-hero__eyebrow) { font-size: 13px; }
  .journal-hero__counts { display: grid; grid-template-columns: repeat(3, 1fr); }
  .journal-hero__counts > div { display: block; min-width: 0; padding: 13px 7px 0; text-align: center; }
  .journal-hero__counts > div + div { padding-left: 7px; }
  .journal-hero__counts dt { margin-bottom: 5px; font-size: 8px; }
  .journal-hero__counts dd { font-size: 25px; }
  .journal-hero__mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 164px;
    min-height: 0;
  }
  .journal-hero__mosaic .journal-photo:first-child { grid-column: auto; grid-row: auto; }
  .journal-hero__mosaic .journal-photo:first-child::before { width: auto; height: 100%; }
  .journal-photo { min-height: 0; }
  .journal-purpose { padding: 46px 0; }
  .journal-directory { padding: 58px 0 72px; }
  .journal-purpose h2,
  .journal-directory__heading h2 { font-size: 34px; }
  .journal-purpose header { margin-bottom: 28px; }
  .journal-purpose__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal-shortcuts__grid button:first-child { grid-column: 1 / -1; }
  .journal-purpose__grid button + button { border-top: 1px solid #49636a; }
  .journal-shortcuts__grid button:nth-child(2) { border-left: 0; }
  .journal-purpose__grid button { padding: 22px 18px; }
  .journal-purpose__grid strong { font-size: 20px; }
  .journal-purpose__copy { margin-bottom: 18px; font-size: 10px; }
  .journal-filter { grid-template-columns: 1fr; padding: 8px; }
  .journal-filter__types { grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal-filter__scopes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal-filter__types button:nth-child(3) { border-left: 1px solid var(--journal-line); }
  .journal-filter__types button:nth-child(n+3) { border-top: 0; }
  .journal-filter__scopes button:nth-child(3) { border-left: 1px solid var(--journal-line); }
  .journal-filter__scopes button:nth-child(n+3) { border-top: 0; }
  .journal-filter__locations { grid-template-columns: 1fr; }
  .journal-filter__reset { width: 100%; }
  .journal-active-filters { padding-top: 12px; }
  .journal-active-filters__label { width: 100%; }
  .journal-active-filters__chip { min-height: 44px; }
  .journal-results-bar { display: block; }
  .journal-results-bar p + p { margin-top: 5px; }
  .journal-grid { grid-template-columns: 1fr; gap: 10px; }
  .journal-card__link { display: grid; grid-template-columns: 118px minmax(0, 1fr); }
  .journal-card__visual { min-height: 218px; aspect-ratio: auto; }
  .journal-card__visual::before { width: auto; height: 100%; }
  .journal-card__fictional { right: 6px; bottom: 6px; padding: 5px; font-size: 6px; }
  .journal-card__body { padding: 15px 14px; }
  .journal-card h3,
  .journal-card__title { margin-bottom: 10px; font-size: 18px; line-height: 1.55; }
  .journal-card__excerpt,
  .journal-card__shops { display: none; }
  .journal-card__meta { margin-bottom: 10px; }
  .journal-card__eyebrow { margin-bottom: 8px; font-size: 8px; }
  .journal-card__badges { margin-bottom: 9px; }
  .journal-card__read { padding-top: 10px; }
  .article-breadcrumb { padding: 18px 0; }
  .article-hero__copy { min-height: 0; padding: 48px 24px; }
  .article-hero h1 { font-size: 34px; }
  .article-hero__lead { font-size: 13px; }
  .article-hero__meta { grid-template-columns: 1fr; }
  .article-hero__meta > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .article-visual--hero { min-height: 390px; }
  .article-visual--hero.article-diagram { min-height: 0; padding: 34px 18px; }
  .article-layout { width: calc(100% - 32px); gap: 54px; padding: 74px 0; }
  .article-toc { grid-template-columns: 1fr; }
  .article-intro { margin-bottom: 58px; padding-bottom: 42px; font-size: 18px; line-height: 2.15; }
  .article-section + .article-section { margin-top: 72px; }
  .article-section h2 { margin-bottom: 28px; font-size: 29px; }
  .article-section__body p,
  .article-section > p:not(.article-section__index) { font-size: 15px; line-height: 2.2; }
  .article-section .article-visual { aspect-ratio: 4 / 3; }
  .article-diagram { padding: 26px 18px; }
  .article-diagram ol,
  .article-diagram ul,
  .article-diagram__items { grid-template-columns: 1fr; gap: 8px; }
  .article-diagram li,
  .article-diagram__item { min-height: 0; padding: 16px; }
  .article-diagram li::before,
  .article-diagram__item::before { display: inline-block; min-width: 35px; margin: 0 8px 0 0; }
  .article-diagram__number { display: inline-block; min-width: 35px; margin: 0 8px 0 0; }
  .article-visit-notes,
  .article-participants,
  .article-timeline { margin-top: 76px; }
  .article-visit-notes__grid,
  .article-participants__grid { grid-template-columns: 1fr; }
  .article-visit-note + .article-visit-note,
  .article-visit-notes__grid > article + article,
  .article-participant:nth-child(even),
  .article-participants__grid > article:nth-child(even) { border-top: 1px solid var(--journal-line); border-left: 0; }
  .article-participant,
  .article-participants__grid > article { grid-template-columns: 106px 1fr; }
  .article-timeline li { grid-template-columns: 66px 1fr; gap: 8px 16px; }
  .article-timeline li > span:last-child,
  .article-timeline li > p { grid-column: 2; }
  .article-pattern { margin-top: 78px; padding: 34px 22px; }
  .article-pattern__body li { grid-template-columns: 30px 1fr; }
  .article-pattern__body li > span:not(.article-pattern__number),
  .article-pattern__body li p { grid-column: 2; }
  .article-related-shops,
  .article-related-reading { padding: 72px 16px; }
  .article-related-shops__grid,
  .article-related-reading__grid { grid-template-columns: 1fr; }
  .article-related-shops__grid[data-count="1"] .article-related-shop { display: flex; }
  .article-related-shops__grid[data-count="1"] .article-related-shop__visual { min-height: 0; aspect-ratio: 16 / 10; }
  .article-related-shop + .article-related-shop,
  .article-related-shops__grid > article + article,
  .article-related-card + .article-related-card,
  .article-related-reading__grid > article + article { padding-left: 0; border-top: 1px solid var(--journal-line); border-left: 0; }
  .article-related-shop,
  .article-related-shops__grid > article { min-height: 0; padding: 0; }
  .article-related-shop__body { padding: 25px 20px; }
  .article-related-card,
  .article-related-reading__grid > article { padding: 24px 0; }
  .article-cta { padding: 74px 20px; }
  .article-cta h2 { font-size: 33px; }
  .shop-detail-related .js-store-related-articles article > a { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .journal-card,
  .journal-purpose__grid button,
  .article-cta a { transition: none !important; }
  .journal-card:hover { transform: none; }
}