:root {
  --paper: #f3eddf;
  --paper-light: #fbf8f0;
  --ink: #1c1813;
  --muted: #736a5d;
  --red: #9c241d;
  --red-dark: #711713;
  --green: #2d3b20;
  --brown: #3b291c;
  --line: rgba(50, 39, 26, .18);
  --shadow: 0 18px 45px rgba(30, 20, 10, .16);
  --header-h: 86px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(92, 68, 38, .035) 0 1px, transparent 1.6px) 0 0/10px 10px,
    linear-gradient(90deg, rgba(255,255,255,.3), transparent 55%),
    var(--paper);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  line-height: 1.8;
  letter-spacing: .035em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; left: 12px; top: -100px; z-index: 9999; background: #fff; padding: 10px 14px; }
.skip-link:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 236, .95);
  border-bottom: 1px solid rgba(65, 48, 30, .12);
  backdrop-filter: blur(12px);
}
.header-inner {
  height: var(--header-h);
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { width: 190px; flex: 0 0 auto; }
.brand img { width: 100%; height: 64px; object-fit: contain; object-position: left center; }
.desktop-nav { display: flex; align-items: center; gap: clamp(24px, 4vw, 54px); font-size: 15px; font-weight: 700; }
.desktop-nav a { position: relative; padding: 10px 0; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:4px; height:1px; background:var(--red); transition:.25s; }
.desktop-nav a:hover::after { right:0; }
.menu-button {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: white;
  display: none;
  place-content: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(125, 27, 22, .22);
}
.menu-button span { width: 23px; height: 2px; background: white; display: block; transition: .25s; }
.menu-button small { position: absolute; margin-top: 82px; color: var(--red); font-family: sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; padding: 20px 26px 28px; border-top: 1px solid var(--line); background: var(--paper-light); }
.mobile-menu a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 18px; }

.hero { position: relative; min-height: min(760px, calc(100svh - var(--header-h))); overflow: hidden; display: grid; align-items: center; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; transform: scale(1.01); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 4, .92) 0%, rgba(6, 6, 4, .72) 35%, rgba(12, 8, 3, .16) 67%, rgba(0,0,0,.12) 100%); }
.hero-content { position: relative; z-index: 1; width: min(1220px, 100%); margin: 0 auto; padding: 90px 5.5vw 80px; color: white; }
.hero-kicker { margin: 0 0 6px; font-size: 22px; letter-spacing: .28em; }
.hero-logo { width: clamp(280px, 38vw, 500px); max-height: 260px; object-fit: contain; object-position: left center; filter: drop-shadow(0 4px 20px rgba(0,0,0,.38)); }
.hero-branch { width: fit-content; margin: 5px 0 24px; padding: 7px 34px; border: 1px solid rgba(255,255,255,.58); font-size: clamp(15px, 2vw, 21px); letter-spacing: .22em; }
.hero h1 { margin: 0; font-size: clamp(27px, 4vw, 48px); font-weight: 500; line-height: 1.65; letter-spacing: .11em; text-shadow: 0 2px 15px rgba(0,0,0,.5); }
.hero-actions { display: flex; gap: 14px; margin-top: 32px; }
.btn { min-height: 52px; padding: 12px 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .08em; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(20,12,4,.18); }
.btn-red { background: var(--red); color: white; }
.btn-red:hover { background: var(--red-dark); }
.btn-ghost { color: white; border-color: rgba(255,255,255,.72); background: rgba(255,255,255,.08); backdrop-filter: blur(4px); }
.btn-outline { border-color: var(--ink); background: transparent; }
.btn-instagram { border-color: #9c5b65; color: #7e2940; background: #fff9f3; }

.section-paper { padding: clamp(72px, 9vw, 118px) 24px; }
.intro { text-align: center; }
.eyebrow { margin: 0 0 12px; font-family: sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .32em; color: var(--red); }
.intro h2, .section-heading h2 { margin: 0; font-size: clamp(28px, 4vw, 45px); font-weight: 500; line-height: 1.5; letter-spacing: .12em; }
.intro > p:last-child, .section-heading > p:last-child { margin: 22px auto 0; max-width: 680px; color: var(--muted); font-size: 15px; }
.sp-only { display: none; }

.feature-grid { max-width: 1220px; margin: 0 auto; padding: 0 26px 110px; }
.feature { min-height: 360px; display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); overflow: hidden; box-shadow: var(--shadow); }
.feature + .feature { margin-top: 14px; }
.feature:nth-child(even) { grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr); }
.feature-copy { position: relative; padding: clamp(44px, 6vw, 82px); color: white; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.feature-dark .feature-copy { background: #181611; }
.feature-green .feature-copy { background: var(--green); }
.feature-brown .feature-copy { background: var(--brown); }
.feature-red .feature-copy { background: linear-gradient(135deg, #9b2c22, #6e1714); }
.feature-copy::before { content:""; position:absolute; inset:0; opacity:.12; background: repeating-linear-gradient(105deg, transparent 0 8px, rgba(255,255,255,.12) 8px 9px); }
.feature-copy > * { position: relative; z-index: 1; }
.feature-copy .number { margin: 0 0 15px; font-family: sans-serif; font-size: 11px; letter-spacing: .2em; opacity: .58; }
.feature-copy h2 { margin: 0; font-size: clamp(34px, 5vw, 58px); font-weight: 500; letter-spacing: .16em; }
.feature-copy p { margin: 14px 0 0; font-size: clamp(15px, 2vw, 21px); line-height: 1.8; letter-spacing: .1em; }
.brush-line { width: 82px; height: 5px; margin-top: 25px; background: rgba(255,255,255,.35); transform: skewX(-18deg); }
.feature-photo { appearance: none; border: 0; padding: 0; min-height: 360px; background: #111; cursor: zoom-in; overflow: hidden; }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.feature-photo:hover img { transform: scale(1.035); }

.wide-story { position: relative; min-height: 680px; overflow: hidden; display: grid; align-items: end; }
.wide-story > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 50%; }
.wide-story::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.78)); }
.wide-story-copy { position:relative; z-index:1; width:min(1100px,100%); margin:0 auto; padding:120px 40px 75px; color:white; }
.wide-story-copy .eyebrow { color:#f0c8a3; }
.wide-story-copy h2 { margin:0; font-size:clamp(36px,6vw,70px); line-height:1.45; font-weight:500; letter-spacing:.11em; }
.wide-story-copy > p:last-child { max-width:560px; margin:24px 0 0; font-size:16px; }

.gallery-section { padding-bottom: 110px; }
.section-heading { text-align:center; margin-bottom:50px; }
.gallery-grid { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 10px; }
.gallery-item { appearance:none; border:0; padding:0; overflow:hidden; cursor:zoom-in; background:#ddd; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease, filter .45s ease; }
.gallery-item:hover img { transform:scale(1.045); filter:saturate(1.05) contrast(1.03); }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }

.access { max-width:1220px; margin:0 auto 105px; padding:0 26px; display:grid; grid-template-columns:1.05fr .95fr; box-shadow:var(--shadow); }
.access-photo { min-height:670px; }
.access-photo img { width:100%; height:100%; object-fit:cover; object-position:center; }
.access-card { background:var(--paper-light); padding:clamp(42px,6vw,78px); display:flex; flex-direction:column; justify-content:center; }
.access-logo { width:270px; height:130px; object-fit:contain; object-position:left center; margin-bottom:6px; }
.shop-type { margin:0; font-size:14px; letter-spacing:.22em; color:var(--red); }
.access-card h2 { margin:5px 0 32px; font-size:clamp(28px,4vw,42px); font-weight:500; line-height:1.45; }
dl { margin:0; }
dl > div { display:grid; grid-template-columns:88px 1fr; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
dt { font-family:sans-serif; font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.12em; }
dd { margin:0; font-size:15px; line-height:1.65; }
.access-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:34px; }
.access-actions .btn-instagram { grid-column:1/-1; }

.site-footer { padding:65px 24px 120px; text-align:center; color:white; background:#171410; }
.footer-logo-wrap img { width:230px; height:110px; object-fit:contain; margin:0 auto 8px; }
.site-footer > p { margin:0; font-size:12px; opacity:.68; }
.preview-credit { max-width:720px; margin:34px auto 0; padding-top:27px; border-top:1px solid rgba(255,255,255,.15); font-family:sans-serif; font-size:12px; line-height:1.8; opacity:.8; }
.preview-credit p { margin:0; }
.preview-credit a { display:inline-block; margin-top:4px; text-decoration:underline; text-underline-offset:4px; }

.mobile-cta { display:none; }
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(8,7,5,.93); padding:54px 22px 22px; place-items:center; }
.lightbox:not([hidden]) { display:grid; }
.lightbox img { max-width:min(1100px,92vw); max-height:86vh; object-fit:contain; box-shadow:0 20px 80px rgba(0,0,0,.5); }
.lightbox-close { position:absolute; top:18px; right:24px; width:46px; height:46px; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:white; background:transparent; font-size:29px; line-height:1; cursor:pointer; }
body.lightbox-open { overflow:hidden; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .header-inner { padding:8px 16px; }
  .brand { width:150px; }
  .brand img { height:54px; }
  .desktop-nav { display:none; }
  .menu-button { display:grid; width:52px; height:52px; }
  .mobile-menu:not([hidden]) { display:block; }
  .hero { min-height:calc(100svh - var(--header-h)); }
  .hero-bg { object-position:58% center; }
  .hero-shade { background:linear-gradient(90deg, rgba(4,4,3,.92), rgba(5,4,3,.68) 60%, rgba(0,0,0,.17)); }
  .hero-content { padding:68px 28px 80px; }
  .hero-kicker { font-size:17px; }
  .hero-logo { width:min(340px,83vw); }
  .hero-branch { font-size:14px; padding:6px 22px; }
  .hero h1 { font-size:30px; }
  .feature-grid { padding:0 14px 78px; }
  .feature, .feature:nth-child(even) { grid-template-columns:1fr 1.45fr; min-height:285px; }
  .feature:nth-child(even) { grid-template-columns:1.45fr 1fr; }
  .feature-copy { padding:30px 24px; }
  .feature-copy h2 { font-size:34px; }
  .feature-copy p { font-size:14px; }
  .feature-photo { min-height:285px; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
  .access { grid-template-columns:1fr; margin-bottom:80px; }
  .access-photo { min-height:420px; }
}

@media (max-width: 620px) {
  body { padding-bottom:72px; }
  .hero { min-height:720px; }
  .hero-bg { object-position:60% center; }
  .hero-shade { background:linear-gradient(90deg, rgba(5,5,4,.94) 0%, rgba(5,5,4,.76) 48%, rgba(5,5,4,.28) 100%); }
  .hero-content { padding:70px 22px 58px; align-self:end; }
  .hero-kicker { font-size:14px; }
  .hero-logo { width:275px; max-height:180px; }
  .hero-branch { margin-bottom:16px; font-size:12px; letter-spacing:.16em; }
  .hero h1 { font-size:25px; line-height:1.65; }
  .hero-actions { margin-top:24px; }
  .hero-actions .btn { min-width:126px; padding:10px 16px; }
  .section-paper { padding:68px 18px; }
  .intro h2, .section-heading h2 { font-size:28px; }
  .sp-only { display:block; }
  .feature-grid { padding:0 10px 72px; }
  .feature, .feature:nth-child(even) { grid-template-columns:1fr; min-height:auto; }
  .feature:nth-child(even) .feature-photo { order:2; }
  .feature:nth-child(even) .feature-copy { order:1; }
  .feature-copy { min-height:220px; padding:35px 29px; }
  .feature-copy h2 { font-size:39px; }
  .feature-copy p { font-size:15px; }
  .feature-photo { min-height:265px; }
  .wide-story { min-height:640px; }
  .wide-story > img { object-position:48% center; }
  .wide-story-copy { padding:100px 24px 58px; }
  .wide-story-copy h2 { font-size:37px; }
  .wide-story-copy > p:last-child { font-size:14px; }
  .gallery-section { padding-bottom:76px; }
  .section-heading { margin-bottom:32px; }
  .gallery-grid { gap:7px; grid-auto-rows:168px; }
  .gallery-item.wide { grid-column:span 2; }
  .access { padding:0 10px; margin-bottom:70px; box-shadow:none; }
  .access-photo { min-height:330px; }
  .access-card { padding:40px 24px 42px; box-shadow:var(--shadow); }
  .access-logo { width:225px; height:110px; }
  .access-card h2 { font-size:27px; }
  dl > div { grid-template-columns:72px 1fr; }
  .access-actions { grid-template-columns:1fr; }
  .access-actions .btn-instagram { grid-column:auto; }
  .site-footer { padding-bottom:65px; }
  .mobile-cta { position:fixed; left:0; right:0; bottom:0; z-index:60; height:72px; display:grid; grid-template-columns:1fr 1fr; background:#171410; box-shadow:0 -8px 24px rgba(0,0,0,.22); padding-bottom:env(safe-area-inset-bottom); }
  .mobile-cta a { display:flex; justify-content:center; align-items:center; gap:8px; color:white; font-family:sans-serif; font-size:13px; font-weight:700; letter-spacing:.05em; }
  .mobile-cta a:first-child { background:var(--red); }
  .mobile-cta a + a { border-left:1px solid rgba(255,255,255,.18); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}
@media (max-width: 900px) {
  .menu-button small { display: none; }
  .brand { width: 174px; }
  .brand img { height: 58px; }
}