/* V8 · 「朝の木の棚」
   店内（生成りの壁・木の棚・手書きの値札・布とかご・あたたかい照明）に合わせて、
   色・書体・傾き・影・動きの大きさだけを落ち着かせる。
   構成、横に流れるパン、素材のスクロール切替、しっぽと麦の穂の線画、視差は維持。
   このファイルは最後に読み込み、style / polish / media / refinement は変更しない。 */

html[data-theme="shelf"] {
  --green: #2F5546;
  --green-deep: #243F35;
  --yellow: #E9DEC8;      /* 小麦色・クラフト紙 */
  --cream: #F8F4EB;       /* ミルク */
  --orange: #A2573B;      /* 布の赤 */
  --ink-rgb: 47, 85, 70;
  --paper-rgb: 233, 222, 200;
  --deep-rgb: 36, 63, 53;
  --line: rgba(47, 85, 70, .2);
  --wall: #EFE6D5;        /* 店の壁 */
  --hero-bg: #F3ECDF;
  --wood: #B98A58;        /* 木の棚 */
  --wood-deep: #7A5436;
  --tag: #FFFDF7;         /* 値札の紙 */
  --brown: #4A3A2C;       /* 手書きの文字 */
  --font: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --mincho: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --hand: 'Klee One', 'Hiragino Maru Gothic ProN', sans-serif;
  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --ease-soft: cubic-bezier(.3, .55, .25, 1);
}

/* ---------- 書体 ---------- */
body { font-weight: 400; color: var(--green); }
h1, h2, h3,
.brand > span,
.taste-step-title,
.reserve-content h3,
.shop-lead h2,
.product-modal-copy > h2,
.nav-dialog nav > a { font-family: var(--mincho); font-weight: 600; }
.en { font-family: var(--display) !important; font-style: italic; font-weight: 500 !important; }
.eyebrow {
  font-family: var(--font); font-size: 11px; font-weight: 500;
  letter-spacing: .32em; color: var(--wood-deep);
}
.body-copy, .story-copy p, .reserve-content > p, .shop-details dl { font-weight: 400; }
.desktop-nav { font-size: 13px; font-weight: 500; letter-spacing: .08em; }
.nav-reserve, .big-button, .dark-button, .outline-link, .floating-reserve { font-weight: 500; letter-spacing: .08em; }

/* 手書きの値札（店頭のプライスカードから） */
.hand-tag {
  font-family: var(--hand); font-weight: 600; color: var(--brown);
  background: var(--tag);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(74, 58, 44, .08), 0 10px 18px -12px rgba(74, 58, 44, .45);
}

/* 麦の穂の区切り線（見えたときに描かれる） */
.wheat-rule {
  display: block; width: 150px; height: 25px; margin: 10px auto 2px;
  color: var(--wood); stroke-dasharray: 1; stroke-dashoffset: 0;
}
.js [data-reveal] .wheat-rule { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-soft) .35s; }
.js [data-reveal].is-in .wheat-rule { stroke-dashoffset: 0; }

/* ---------- 動きの質：跳ねる → ゆっくり ---------- */
.js [data-reveal] { transform: translateY(16px); transition: opacity 1.2s ease, transform 1.5s var(--ease-soft); }
.js [data-reveal].is-in { transform: none; }

/* 紙の手ざわり（ごく薄いノイズ） */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .22  0 0 0 0 .14  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Hero ---------- */
.hero { background: var(--hero-bg); }
.hero-light {
  position: absolute; inset: -20% -10%; z-index: 1; pointer-events: none;
  background: radial-gradient(42% 38% at 22% 18%, rgba(255, 244, 218, .95), transparent 70%) no-repeat;
  transform: translate3d(0, calc(var(--hero-y, 0px) * -.4), 0);
}
/* 窓から差す朝の光が、ゆっくり横切る */
.hero-light::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(118deg, transparent 36%, rgba(255, 247, 228, .6) 50%, transparent 64%) no-repeat;
  animation: morning-light 18s ease-in-out infinite alternate;
}
@keyframes morning-light {
  from { opacity: .7; transform: translateX(-9%); }
  to   { opacity: 1;  transform: translateX(9%); }
}
.hero-topline { font-size: 15px; font-weight: 500; letter-spacing: .06em; z-index: 5; }
.hero-topline span:last-child { font-size: 11px; letter-spacing: .28em; font-weight: 500; }
.hero h1 { font-size: clamp(34px, 3.9vw, 64px); line-height: 1.8; letter-spacing: .12em; font-weight: 600; }
.hero-word {
  font-size: clamp(230px, 27vw, 500px); letter-spacing: -.01em; line-height: .85;
  color: #E3D6BC; transform: none; bottom: 30px;
}
.hero-loaf { transform: translate3d(0, var(--hero-y, 0px), 0) rotate(-5deg); }
.hero-loaf img { animation: none; filter: drop-shadow(6px 22px 16px rgba(74, 48, 24, .18)) saturate(.9); }
.hero-croissant { transform: translateY(var(--hero-y2, 0px)) rotate(6deg); filter: drop-shadow(3px 14px 12px rgba(74, 48, 24, .16)) saturate(.9); }
.hero-stamp {
  width: auto; height: auto; padding: 16px 18px 14px; place-items: start;
  transform: rotate(-4deg); color: var(--brown); background: var(--tag);
}
.hero-stamp::before {
  content: ''; position: absolute; left: 50%; top: -9px; width: 54px; height: 18px;
  transform: translateX(-50%) rotate(3deg);
  background: rgba(185, 138, 88, .38);
}
.hero-stamp span { font-size: 16px; font-weight: 600; letter-spacing: .06em; line-height: 1.75; }
.hero-vertical { font-family: var(--mincho); font-weight: 500; letter-spacing: .3em; }
.hero-bottom > p { font-family: var(--mincho); font-weight: 600; letter-spacing: .14em; }
.hero-bottom > p > span { font-size: 13px; letter-spacing: .04em; margin-top: 4px; }
.scroll-circle { background: transparent; font-size: 15px; border-color: rgba(var(--ink-rgb), .45); }
.scroll-circle:hover { background: var(--green); color: var(--cream); }

/* ---------- 流れる帯 ---------- */
.ticker { background: var(--cream); height: 46px; border-block-color: var(--line); }
.ticker-track { animation-duration: 110s; }
.ticker-track > span > span { font-family: var(--mincho); font-weight: 500; font-size: 13px; letter-spacing: .24em; color: var(--green); }
.ticker-track > span > span.en { font-size: 16px; letter-spacing: .04em; color: var(--wood-deep); }
.ticker-track > span { gap: 56px; padding-right: 56px; }

/* ---------- パンの棚（横に流れる） ---------- */
.bread-section { background: var(--wall); color: var(--green); }
.section-intro h2 { letter-spacing: .12em; }
.bread-track { --shelf-gap: 5vw; gap: var(--shelf-gap); }
.bread-item { color: var(--green); }
.bread-number { color: var(--wood-deep); opacity: 1; font-size: 15px; letter-spacing: .04em; text-align: center; }
.bread-image { align-items: flex-end; position: relative; padding-bottom: 16px; margin-bottom: 26px; }
.bread-image::after {
  content: ''; position: absolute; left: calc(var(--shelf-gap) / -2 - 1px); right: calc(var(--shelf-gap) / -2 - 1px); bottom: 0; height: 16px;
  background:
    linear-gradient(to bottom, rgba(255, 240, 215, .35) 0 2px, transparent 2px 100%),
    repeating-linear-gradient(90deg, rgba(92, 60, 30, .05) 0 3px, transparent 3px 11px, rgba(92, 60, 30, .04) 11px 12px, transparent 12px 29px),
    linear-gradient(to bottom, #C79A68, #A97B4B);
  box-shadow: 0 10px 14px -8px rgba(74, 48, 24, .38);
  z-index: 0;
}
.bread-image img {
  position: relative; z-index: 1; max-height: calc(100% - 4px);
  filter: drop-shadow(0 12px 7px rgba(74, 48, 24, .2)) saturate(.9);
  transform: rotate(var(--roll, 0deg)); transition: scale .9s var(--ease-soft);
}
.bread-item:hover .bread-image img { scale: 1.03; }
.bread-item:nth-child(1) .bread-image img { --roll: -2deg; }
.bread-item:nth-child(2) .bread-image img { --roll: 2deg; }
.bread-item:nth-child(3) .bread-image img { --roll: -1deg; }
.bread-item:nth-child(4) .bread-image img { --roll: 2deg; }
.bread-en { display: none; }
.bread-name {
  display: inline-block; padding: 9px 16px 8px; font-size: 17px; letter-spacing: .08em;
  font-family: var(--hand); font-weight: 600; color: var(--brown); background: var(--tag);
  border-radius: 2px; transform: rotate(-2deg);
  box-shadow: 0 1px 1px rgba(74, 58, 44, .08), 0 8px 14px -10px rgba(74, 58, 44, .5);
}
.bread-item:nth-child(even) .bread-name { transform: rotate(1.5deg); }
.bread-name i { font-family: var(--font); font-size: 12px; color: var(--wood-deep); }
.bread-controls { right: calc(8% + 170px); }
.bread-controls > .eyebrow { letter-spacing: .16em; font-size: 11px; }
.track-meter { background: var(--line); }
.track-meter > span { background: var(--wood-deep); }
.bread-nav button { border-color: rgba(var(--ink-rgb), .35); }
.bread-nav button:hover { background: rgba(var(--ink-rgb), .07); }
.sample-caption { opacity: .7; font-size: 10px; }

/* ---------- 「おいしいね」 ---------- */
.hello.cream { background: var(--cream); }
.hello h2 { letter-spacing: .12em; }
.hello .hello-bread { filter: drop-shadow(2px 8px 7px rgba(84, 53, 24, .12)) saturate(.9); }
.hello .hello-bread.left {
  transform: translate3d(calc((1 - var(--hello-entrance)) * -44px), calc((1 - var(--hello-entrance)) * 16px), 0) rotate(calc(-12deg - (1 - var(--hello-entrance)) * 5deg));
}
.hello .hello-bread.right {
  transform: translate3d(calc((1 - var(--hello-entrance)) * 40px), calc((1 - var(--hello-entrance)) * -14px), 0) rotate(calc(9deg + (1 - var(--hello-entrance)) * 4deg));
}
.hello .vertical-note { font-family: var(--mincho); }
.hello-small-note { font-size: 14px !important; letter-spacing: .04em; transform: rotate(-4deg); }
.hello-cat { color: var(--wood-deep); }

/* ---------- 名前のこと（線画はそのまま、少しゆっくり） ---------- */
.anzu-name-story .anzu-name-label { font-weight: 500; letter-spacing: .3em; }
.anzu-name-story .anzu-name-link { font-weight: 500; letter-spacing: .08em; }
.anzu-name-story h2 { letter-spacing: .12em; }
.anzu-name-story.motion-ready.is-drawn .anzu-name-stem { animation-duration: 1.6s; }
.anzu-name-story.motion-ready.is-drawn .anzu-name-kernel { animation-duration: .7s; animation-delay: calc(var(--draw-delay) * 1.4); }
.anzu-name-story.motion-ready.is-drawn .anzu-name-awns { animation-duration: .6s; animation-delay: 1.95s; }
.anzu-name-story .anzu-name-note,
.anzu-name-story .anzu-name-footnote { font-family: var(--mincho); }

/* ---------- 素材のこと ---------- */
.taste-section { background: var(--yellow); }
.taste-head h2 { letter-spacing: .1em; }
.taste-head .wheat-rule { margin-left: 0; }
.taste-background { display: none; }  /* 英語の背景文字は外す */
@media (min-width: 701px) { .taste-visual { top: 35%; height: 57%; } }
.taste-product {
  transform: translateY(28px) rotate(-4deg) scale(.96);
  transition: opacity 1s ease, transform 1.5s var(--ease-soft);
}
.taste-product.is-active { transform: translateY(0) rotate(var(--taste-rotate, -3deg)) scale(1); }
#ingredients .taste-product img { filter: drop-shadow(3px 12px 10px rgba(84, 53, 24, .14)) saturate(.9); }
.taste-caption {
  padding: 12px 16px 10px; font-size: 13px; font-weight: 600; line-height: 1.6;
  transform: rotate(-3deg); bottom: 12%;
}
.taste-caption > span { font-size: 19px; font-weight: 600; }
.taste-step .eyebrow { letter-spacing: .2em; }
.taste-step-title { font-weight: 600; letter-spacing: .06em; }
.taste-step.is-active { border-color: var(--wood); }
.taste-step-copy { font-size: 13px; line-height: 2; }
.taste-progress > span { font: 500 11px var(--font); letter-spacing: .2em; }
.taste-progress b { font-family: var(--display); font-style: italic; font-size: 15px; font-weight: 500; }
.taste-progress > div > span { background: var(--wood-deep); }

/* ---------- 私たちのこと ---------- */
.story { background: var(--yellow); }
.story-heading h2 { font-size: clamp(88px, 13.5vw, 230px); letter-spacing: -.01em; line-height: .92; font-weight: 500 !important; }
.story-heading h2 .place-line { font-size: 11vw; margin-top: 0; padding-left: .5em; }
/* 写真枠：撮影後にここへ店内の写真を入れる（今はイラストで仮置き） */
.story-photo {
  border-radius: 3px; aspect-ratio: 1.22; transform: rotate(-2deg);
  background: #EFE3CC; border: 12px solid var(--tag);
  box-shadow: 0 1px 2px rgba(74, 58, 44, .1), 0 26px 40px -24px rgba(74, 48, 24, .45);
}
.story-photo > img { transform: none; object-fit: contain; }
.story-wheat { color: var(--wood-deep); }
.photo-tag { font-size: 15px; letter-spacing: .04em; transform: rotate(-2deg); color: var(--wood-deep); }
.story-copy h3 { letter-spacing: .1em; }
.story-bottom-note { font-size: 14px; letter-spacing: .04em; }

/* ---------- お取り置き ---------- */
.reserve-section .section-intro .eyebrow,
.reserve-content > .eyebrow { color: #DEC49C; }
.reserve-section .wheat-rule { color: #DEC49C; }
.reserve-section .section-intro h2 { letter-spacing: .12em; }
.reserve-content h3 { letter-spacing: .12em; }
#reserve .reserve-basket { transform: translateY(9px) rotate(-1deg); filter: drop-shadow(1px 10px 9px rgba(12, 32, 24, .22)) saturate(.9); }
.reserve-small { font-size: 15px; letter-spacing: .04em; color: var(--yellow); }
.reserve-logo { transform: rotate(4deg); }

/* ---------- お店への道 ---------- */
.shop-card { background: var(--cream); }
.shop-lead .wheat-rule { margin-left: 0; }
.shop-lead h2 { letter-spacing: .1em; }
.shop-cat { color: var(--wood-deep); width: 64px; height: 64px; }
.shop-details dd { font-weight: 500; }

/* ---------- フッター・ボタン類 ---------- */
.footer-word { font-weight: 400 !important; letter-spacing: -.01em; font-size: 24vw; line-height: .95; align-items: flex-end; }
.footer-word-sub {
  font-family: var(--mincho); font-style: normal; font-size: 15px; font-weight: 500; line-height: 2;
  letter-spacing: .3em; writing-mode: vertical-rl; color: var(--yellow); margin-bottom: .12em;
}
.footer-bottom > span:nth-child(2) { font-family: var(--font); }
.floating-reserve { background: var(--cream); font-weight: 500; font-size: 12px; box-shadow: 0 6px 18px -8px rgba(var(--deep-rgb), .45); }
.page-progress > span { background: var(--wood); }
.nav-dialog nav > a > small { font-family: var(--display); font-style: italic; font-size: 14px; }
.product-modal-copy .eyebrow { font-size: 15px; letter-spacing: .04em; }

/* ---------- スマホ ---------- */
@media (max-width: 700px) {
  .eyebrow { font-size: 10px; letter-spacing: .26em; }
  .hero-topline { font-size: 12px; letter-spacing: .06em; }
  .hero h1 { font-size: clamp(27px, 8vw, 44px); letter-spacing: .08em; line-height: 1.75; }
  .hero-word { font-size: 38vw; bottom: 66px; letter-spacing: -.02em; transform: none; }
  .hero-loaf { transform: translate3d(0, var(--hero-y, 0px), 0) rotate(-5deg); }
  .hero-croissant { transform: translateY(var(--hero-y2, 0px)) rotate(8deg); }
  .hero-stamp { width: auto; height: auto; padding: 11px 12px 9px; transform: rotate(-4deg); }
  .hero-stamp span { font-size: 12px; letter-spacing: .04em; line-height: 1.65; }
  .hero-stamp::before { width: 40px; height: 14px; top: -7px; }
  .hero-bottom > p > span { font-size: 11px; }
  .scroll-circle { font-size: 12px; }
  .ticker { height: 40px; }
  .ticker-track > span > span { font-size: 11px; }
  .ticker-track > span > span.en { font-size: 13px; }
  .ticker-track > span { gap: 34px; padding-right: 34px; }
  .section-intro .eyebrow { font-size: 10px; letter-spacing: .26em; }
  .section-intro h2 { letter-spacing: .08em; }
  .bread-track { --shelf-gap: 14vw; }
  .bread-number { font-size: 13px; }
  .bread-name { font-size: 15px; }
  .bread-controls > .eyebrow { font-size: 10px; letter-spacing: .08em; max-width: 120px; }
  .sample-caption { font-size: 9px; }
  .hello .eyebrow { font-size: 10px; }
  .hello .body-copy { font-size: 13px; }
  .hello-small-note { font-size: 12px !important; }
  .taste-head > .eyebrow { font-size: 10px; }
  .taste-head .wheat-rule { margin-inline: auto; }
  .taste-background { font-size: 13vw; top: 34%; }
  .taste-caption { font-size: 11px; padding: 9px 12px 8px; }
  .taste-caption > span { font-size: 14px; }
  .taste-step-copy { font-size: 12px; }
  .taste-step .eyebrow { font-size: 10px; }
  .taste-progress > span { font-size: 9px; letter-spacing: .1em; max-width: 170px; }
  .story-heading > .eyebrow { font-size: 10px; }
  .story-heading h2 { font-size: 27vw; }
  .story-heading h2 .place-line { font-size: 15vw; }
  .story-photo { border-width: 8px; }
  .photo-tag { font-size: 12px; bottom: -26px; }
  .story-copy > .eyebrow { font-size: 10px; }
  .story-copy p { font-size: 13px; }
  .story-bottom-note { font-size: 11px; }
  .reserve-section .section-intro .eyebrow { font-size: 10px; }
  .reserve-content > .eyebrow { font-size: 10px; }
  .reserve-content > p:not(.eyebrow):not(.demo-inline) { font-size: 13px; }
  .reserve-small { font-size: 12px; }
  .shop-lead > .eyebrow { font-size: 10px; }
  .shop-lead .wheat-rule { margin-inline: auto; }
  .footer-word { font-size: 30vw; }
  .footer-word-sub { font-size: 11px; letter-spacing: .2em; }
  .bread-controls { right: 25px; }
  .shop-cat { width: 52px; height: 52px; }
  .footer-bottom > span:nth-child(2) { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-light { transform: none; }
  .hero-light::before { animation: none; }
  .wheat-rule, .js [data-reveal] .wheat-rule { stroke-dashoffset: 0 !important; transition: none !important; }
}
@media print {
  body::after, .hero-light { display: none; }
}