:root {
  --paper: #f2eee5;
  --paper-deep: #e6e0d4;
  --ink: #262720;
  --muted: #6c6b60;
  --green: #315f53;
  --forest: #1c352d;
  --cream: #f5f1e6;
  --gold: #c9b48c;
  --line: #d1ccbf;
  --serif: "Noto Serif JP", "Yu Mincho", Georgia, serif;
  --sans: "Noto Sans JP", system-ui, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --header-height: 66px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 20px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.9 var(--sans); -webkit-font-smoothing: antialiased; }
body, h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; width: 100%; height: auto; }
picture { display: block; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; }
h2 { font-size: clamp(32px, 8.6vw, 50px); line-height: 1.65; letter-spacing: .035em; }
small { font-size: .8em; }
::selection { background: #d1dcc3; color: #1c352d; }
:focus-visible { outline: 2px solid #ad804b; outline-offset: 5px; }
.container { width: calc(100% - 40px); max-width: 1280px; margin-inline: auto; }
.section { padding-block: 88px; }
.eyebrow { font: 10px/1.5 var(--mono); letter-spacing: .09em; color: var(--green); }
.eyebrow.light { color: #c7d3bd; }
.chapter-number { display: inline-block; margin-right: 13px; padding-right: 13px; border-right: 1px solid currentColor; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; min-height: 44px; border-bottom: 1px solid var(--green); color: var(--green); font-size: 12px; }
.text-link span { font: 22px/1 Arial, sans-serif; transition: transform .25s; }
.text-link:hover span { transform: translate(3px, -3px); }
.text-link.light { color: var(--cream); border-color: #91a897; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 100; padding: 12px 18px; background: var(--paper); color: var(--forest); }
.skip-link:focus { top: 10px; }

/* Persistent, small navigation. Normal browser scrolling is preserved. */
.site-header { position: sticky; top: 0; z-index: 30; height: var(--header-height); background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: calc(100% - 36px); max-width: 1400px; height: 100%; margin-inline: auto; }
.brand { flex-shrink: 0; font: 500 17px/1.2 var(--serif); letter-spacing: .13em; }
.brand span { display: block; margin-top: 5px; font: 7px/1.2 Arial, sans-serif; letter-spacing: .18em; }
.site-header nav { display: flex; align-items: center; gap: 18px; font-size: 11px; }
.site-header nav>a { display: inline-flex; align-items: center; min-height: 44px; }
.site-header nav>a:nth-child(2) { display: none; }
.site-header .nav-visit { gap: 10px; padding-inline: 13px; border: 1px solid #a8afa0; min-height: 44px; }
.nav-visit span { font-size: 16px; }
.reading-progress { position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; transform: scaleX(var(--reading, 0)); transform-origin: left; background: var(--green); }

/* An editorial opening: useful event details appear before the first large image. */
.hero { padding: 27px 0 24px; }
.hero-edition { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.hero-edition .eyebrow { font-size: 8px; letter-spacing: .04em; }
.hero-edition>span { white-space: nowrap; font-size: 9px; color: var(--green); }
.hero-grid { display: grid; gap: 38px; margin-top: 34px; }
.hero-overline { color: var(--green); font: 500 12px/1.7 var(--serif); letter-spacing: .09em; }
h1 { margin-top: 12px; font-size: clamp(36px, 10.65vw, 64px); line-height: 1.56; letter-spacing: .025em; }
h1 span { display: block; }
h1 span:last-child { color: var(--green); }
.hero-lead { max-width: 33em; margin-top: 21px; font-size: 13px; line-height: 2; color: var(--muted); }
.hero-facts { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 25px; padding-block: 13px; border-block: 1px solid var(--line); }
.hero-facts>div { padding-left: 11px; border-left: 1px solid var(--line); }
.hero-facts>div:first-child { padding-left: 0; border-left: 0; }
.hero-facts dt { color: var(--muted); font-size: 9px; }
.hero-facts dd { margin-top: 3px; font-size: 11px; font-weight: 500; }
.hero-facts small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 400; }
.hero-facts a { display: inline-flex; align-items: center; min-height: 27px; color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.hero-link { display: inline-flex; align-items: center; gap: 15px; margin-top: 22px; font-size: 12px; }
.hero-link small { display: block; margin-top: 3px; color: var(--muted); font: 8px/1.4 var(--mono); letter-spacing: .03em; }
.round-arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--green); color: var(--cream); font: 22px Arial, sans-serif; transition: transform .25s, background .25s; }
.hero-link:hover .round-arrow { transform: translateY(3px); background: var(--forest); }
.hero-payment { display: flex; align-items: center; gap: 9px; width: max-content; min-height: 40px; margin-top: 11px; border-bottom: 1px solid var(--line); color: var(--green); }
.hero-payment span:first-child { font: 700 10px var(--mono); letter-spacing: .07em; }
.hero-payment span:nth-child(2) { font-size: 10px; }
.hero-payment span:last-child { font-size: 15px; }
.hero-art { position: relative; min-width: 0; margin-left: 18px; }
.hero-coordinate { position: absolute; right: -13px; top: 0; writing-mode: vertical-rl; font: 7px var(--mono); letter-spacing: .08em; color: var(--muted); }
.hero-bottom { display: flex; justify-content: space-between; gap: 12px; padding-top: 26px; font: 7px var(--mono); letter-spacing: .06em; color: var(--muted); }
.hero-bottom i { margin-left: 7px; color: var(--green); font: normal 16px Arial, sans-serif; }

/* A small collection of objects introduces the breadth of the workshop. */
.hero-art { margin: 0; height: 365px; isolation: isolate; }
.montage-piece { position: absolute; }
.montage-piece a { display: block; height: 100%; position: relative; }
.montage-piece picture, .montage-piece img { height: 100%; width: 100%; }
.montage-piece picture { overflow: hidden; background: var(--forest); }
.montage-piece img { object-fit: cover; }
.montage-trays { left: 0; top: 12%; width: 65%; height: 67%; transform: rotate(-3deg); }
.montage-earrings { right: 1%; top: 0; width: 34%; height: 47%; transform: rotate(5deg); }
.montage-pen { right: 0; bottom: 0; width: 42%; height: 46%; transform: rotate(-2deg); border: 6px solid var(--paper); }
.montage-trays img { object-position: 48% 50%; }
.montage-label { position: absolute; inset: auto 0 0; padding: 8px 9px; color: var(--cream); background: #15271fea; font-size: 9px; line-height: 1.4; }
.montage-label i { float: right; font-style: normal; }
.montage-note { position: absolute; bottom: 2%; left: 4%; color: var(--green); font: italic 23px/1.2 Georgia, serif; letter-spacing: -.025em; }
.hero-coordinate { right: -13px; top: 0; }

/* All products stay visible. Category links only navigate within the page. */
.collection { padding: 68px 0 0; background: var(--forest); color: var(--cream); }
.collection-heading { display: grid; gap: 22px; }
.collection-heading h2 { margin-top: 18px; }
.collection-intro p { color: #d1d9cb; font-size: 13px; line-height: 2; }
.collection-intro .collection-note { margin-top: 16px; color: #b3c2af; font-size: 11px; }
.collection-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; border-block: 1px solid #6a806d80; }
.collection-index a { display: flex; align-items: center; gap: 7px; min-height: 58px; font-size: 11px; }
.collection-index a+a { padding-left: 12px; border-left: 1px solid #6a806d80; }
.collection-index a>span:first-child { color: var(--gold); font: 9px var(--mono); }
.collection-index a>span:last-child { margin-left: auto; margin-right: 12px; color: var(--gold); }
.collection-index a:hover { color: var(--gold); }
.product-group { padding-top: 53px; scroll-margin-top: 12px; }
.group-heading { display: grid; gap: 9px; padding-bottom: 25px; }
.group-heading h3 { margin-top: 11px; font-size: clamp(22px, 5.8vw, 34px); line-height: 1.65; letter-spacing: .025em; }
.group-heading>p { color: #b6c4b2; font-size: 11px; }
.collection-footer { display: flex; flex-direction: column; gap: 15px; align-items: start; padding-block: 42px 55px; margin-top: 45px; border-top: 1px solid #6a806d80; }
.collection-footer p { font-family: var(--serif); font-size: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.story { padding-top: 80px; }
.story-grid { position: relative; display: grid; gap: 34px; }
.story-copy h2 { margin-top: 22px; }
.story-copy>p:not(.eyebrow) { max-width: 33em; margin-top: 23px; color: var(--muted); font-size: 12px; line-height: 2.2; }
.story-copy .text-link { margin-top: 18px; }
.story-art { min-width: 0; }
.story-window { overflow: hidden; height: 420px; background: #c3b9a2; }
.story-window picture, .story-window img { width: 100%; height: 100%; }
.story-window img { object-fit: cover; object-position: center 40%; }
.story-art figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font: 7px var(--mono); color: var(--muted); }
.story-signature { margin: 0 4px 0 auto; color: var(--green); font: italic 34px/1.2 Georgia, serif; letter-spacing: -.04em; }
/* Payment information follows the workshop story and remains reachable from the first screen. */
.payment { border-top: 1px solid var(--line); }
.payment-grid { display: grid; gap: 30px; }
.payment-copy h2 { margin-top: 20px; color: var(--green); }
.payment-copy>p:not(.eyebrow) { max-width: 30em; margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 2; }
.payment-card { padding: 25px 23px 27px; background: var(--forest); color: var(--cream); }
.payment-card-top { display: flex; justify-content: space-between; gap: 15px; color: #b8c9ae; font: 8px/1.4 var(--mono); letter-spacing: .08em; }
.payment-card h3 { margin-top: 30px; font-size: clamp(44px, 13vw, 72px); line-height: 1.2; letter-spacing: .04em; }
.payment-card>p { max-width: 35em; margin-top: 18px; color: #d7e0d3; font-size: 12px; line-height: 2; }
.payment-card .payment-caution { margin-top: 29px; padding-top: 17px; border-top: 1px solid #6a806d80; color: #b8c9ae; font-size: 10px; }
/* All essential information stays in normal document flow. */
.booth { background: var(--paper-deep); }
.booth-grid { display: grid; gap: 40px; }
.booth-copy h2 { margin-top: 22px; color: var(--green); font-size: clamp(43px, 11vw, 65px); }
.booth-copy>p:not(.eyebrow) { margin-top: 20px; color: var(--muted); font-size: 12px; line-height: 2; }
.booth-copy .text-link { margin-top: 22px; }
.booth-label { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 17px; font: 9px var(--mono); color: var(--green); }
.booth-label span { font: 10px var(--sans); }
.booth-details dl { border-top: 1px solid #b5bcaa; }
.booth-details dl>div { display: grid; grid-template-columns: 90px 1fr; gap: 13px; padding-block: 15px; border-bottom: 1px solid #c6c6b7; align-items: baseline; }
.booth-details dt { color: var(--green); font-size: 10px; }
.booth-details dd { font-size: 12px; }
.booth-details dd a { display: inline-flex; align-items: center; min-height: 34px; color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.booth-details dd small { color: var(--muted); display: inline-block; margin-left: 7px; font-size: 9px; }
.booth-note { margin-top: 18px; color: var(--muted); font-size: 10px; }
.site-footer { padding-block: 34px 22px; background: var(--forest); color: var(--cream); }
.footer-top { display: flex; flex-direction: column; gap: 20px; }
.footer-top>p { font: 13px var(--serif); }
.footer-links { display: flex; align-items: center; gap: 26px; font-size: 10px; }
.footer-links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid #748e78; }
.footer-links a:last-child { margin-left: auto; border: 1px solid #748e78; width: 44px; min-height: 44px; justify-content: center; font-size: 18px; }
.footer-wordmark { margin-block: 24px 21px; font: 500 clamp(21px, 7.75vw, 115px)/1 Georgia, serif; letter-spacing: -.025em; white-space: nowrap; }
.footer-bottom { display: flex; justify-content: space-between; gap: 10px; padding-top: 17px; border-top: 1px solid #617967; color: #b6c3af; font: 6px var(--mono); letter-spacing: .03em; }
.footer-bottom small { font-size: inherit; }

/* Scroll-driven scale and offset remain reversible, without delaying any text. */
.motion-ready .montage-trays { transform: translate3d(0, calc(var(--montage-p, 0) * -20px), 0) rotate(calc(-3deg + var(--montage-p, 0) * 2deg)); }
.motion-ready .montage-earrings { transform: translate3d(0, calc(var(--montage-p, 0) * 18px), 0) rotate(calc(5deg - var(--montage-p, 0) * 3deg)); }
.motion-ready .montage-pen { transform: translate3d(0, calc(var(--montage-p, 0) * -12px), 0) rotate(calc(-2deg + var(--montage-p, 0) * 2deg)); }
.motion-ready .montage-piece img { transform: scale(calc(1.035 - var(--montage-p, 0) * .035)); }
.motion-ready .story-window { clip-path: inset(calc((1 - var(--story-p, 1)) * 7%) calc((1 - var(--story-p, 1)) * 5%) 0); }
.motion-ready .story-window img { transform: translateY(calc((1 - var(--story-p, 1)) * 4%)) scale(calc(1.12 - var(--story-p, 1) * .1)); }
.motion-ready .story-signature { transform: translateY(calc((1 - var(--story-p, 1)) * 30px)); }
@media (hover: hover) and (pointer: fine) {
  .montage-piece a:hover .montage-label { background: var(--green); }
}
@media (min-width: 600px) {
  .container { width: 88%; }
  .hero-grid { gap: 48px; }
  .hero-facts dt { font-size: 10px; }
  .hero-facts dd { font-size: 13px; }
  .hero-facts small { font-size: 9px; }
  .hero-edition .eyebrow { font-size: 10px; }
  .hero-edition>span { font-size: 11px; }
  .hero-art { height: 550px; }
  .montage-note { font-size: 34px; }
  .montage-label { padding: 10px 12px; font-size: 11px; }
  .collection-index a { gap: 18px; padding-block: 7px; font-size: 13px; }
  .collection-index a+a { padding-left: 25px; }
  .collection-index a>span:last-child { margin-right: 25px; }
  .collection-footer { flex-direction: row; justify-content: space-between; align-items: center; padding-block: 35px 65px; margin-top: 65px; }
  .story-grid { grid-template-columns: 1fr 1.1fr; gap: 40px 8%; align-items: center; }
  .story-copy h2 { font-size: clamp(34px, 3.65vw, 55px); }
  .story-copy>p:not(.eyebrow) { font-size: 13px; }
  .story-window { height: 600px; }
  .story-signature { position: absolute; bottom: -28px; left: 12%; font-size: clamp(35px, 4.5vw, 65px); }
  .payment-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 12%; }
  .payment-copy>p:not(.eyebrow) { font-size: 13px; }
  .payment-card { padding: 37px 40px 40px; }
  .booth-grid { grid-template-columns: 1fr 1fr; gap: 12%; }
  .booth-copy h2 { font-size: 65px; }
  .booth-copy>p:not(.eyebrow) { font-size: 13px; }
  .booth-details { padding-top: 5px; }
  .booth-details dl>div { grid-template-columns: 108px 1fr; padding-block: 17px; }
  .booth-details dd { font-size: 13px; }
  .site-footer { padding-block: 48px 28px; }
  .footer-top { flex-direction: row; align-items: center; justify-content: space-between; gap: 30px; }
  .footer-top>p { font-size: 16px; }
  .footer-links { gap: 34px; font-size: 12px; }
  .footer-links a:last-child { margin-left: 12px; }
  .footer-wordmark { margin-block: 42px 32px; font-size: min(7.75vw, 112px); }
  .footer-bottom { font-size: 8px; }
}

@media (min-width: 1100px) {
  .hero-lead { font-size: 14px; }
  .hero-facts { padding-block: 17px; }
  .hero-facts dd { font-size: 14px; }
  .hero-facts small { font-size: 10px; }
}
@media (max-width: 359px) {
  .container { width: calc(100% - 32px); }
  .site-header nav { gap: 10px; }
  .site-header .nav-visit { padding-inline: 9px; }
  .hero-edition .eyebrow { font-size: 6.5px; }
  .hero-edition>span { font-size: 8px; }
  .hero-facts>div { padding-left: 6px; }
  .hero-facts dd { font-size: 10px; }
  .hero-facts small { font-size: 7px; }
  .hero-art { height: 310px; }
  .montage-note { font-size: 20px; }
  .montage-label { font-size: 8px; }
  .collection-index a { gap: 5px; font-size: 10px; }
  .collection-index a+a { padding-left: 7px; }
  .collection-index a>span:last-child { margin-right: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}