:root{--ink:#141814;--paper:#DDE1D5;--muted:#8C947F;--rule:rgba(126,142,104,.28);
      --straw:#C6AA76;--measure:31rem;--measure-wide:69rem}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-weight:300;
  font-size:clamp(1rem,.95rem + .25vw,1.08rem);line-height:1.85;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto}

.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 40%;
  animation:fade 2.4s cubic-bezier(.42,0,.58,1) both .8s}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,16,12,.93) 0%,rgba(12,16,12,.45) 35%,rgba(12,16,12,.05) 70%)}
.hero-text{position:relative;z-index:2;padding:0 6vw 9vh;
  animation:rise 1.2s cubic-bezier(.42,0,.58,1) both .4s}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
.mark-svg{width:3rem;height:3rem;margin:0 0 1.5rem;display:block;fill:#F0F2E8;opacity:.95}
.mark{font-family:"Shippori Mincho",serif;font-weight:500;
  font-size:clamp(2.5rem,10.5vw,4.2rem);line-height:1.15;
  margin:0;color:#F0F2E8;text-shadow:0 1px 24px rgba(0,0,0,.5)}
.mark .lg{letter-spacing:.12em}
.mark .sm{font-size:0.88em;letter-spacing:.12em;padding:0 .06em}
.roman{font-family:"Shippori Mincho",serif;color:var(--straw);
  letter-spacing:.22em;font-size:.78rem;margin:1.3rem 0 0}

.block{padding:clamp(4.5rem,13vh,8rem) 6vw;max-width:calc(var(--measure) + 12vw)}
.block p{margin:0 0 1.1em}
.block p:last-child{margin-bottom:0}
.lede p{font-family:"Shippori Mincho",serif;
  font-size:clamp(1.18rem,1.05rem + .8vw,1.55rem);line-height:1.7;margin-bottom:.6em}
h2{font-family:"Shippori Mincho",serif;font-weight:400;
  font-size:clamp(1.3rem,1.2rem + .4vw,1.6rem);letter-spacing:.03em;margin:0 0 1.6rem;color:#EDEFE4}
.quiet{color:var(--muted)}
a{color:var(--straw);text-underline-offset:.25em;text-decoration-thickness:1px}
a:focus-visible{outline:2px solid var(--straw);outline-offset:4px}

figure{margin:0}
figure img{max-height:80svh;object-fit:cover}
figcaption{padding:.85rem 6vw 0;color:var(--muted);font-size:.8rem;
  letter-spacing:.04em;line-height:1.7;max-width:44rem}

.places{list-style:none;margin:0 0 1.8rem;padding:0}
.places li{padding:.95rem 0;border-top:1px solid var(--rule);
  font-family:"Shippori Mincho",serif;font-size:1.08rem;color:#EDEFE4}
.places li:last-child{border-bottom:1px solid var(--rule)}

.contact{position:relative;isolation:isolate;padding:clamp(7rem,20vh,12rem) 6vw}
.contact img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.contact::before{content:"";position:absolute;inset:0;background:rgba(14,19,14,.72);z-index:-1}
.contact-inner{max-width:var(--measure)}
.mail{font-family:"Shippori Mincho",serif;
  font-size:clamp(1.2rem,1.05rem + 1vw,1.7rem);display:inline-block;margin-top:.4rem}
footer{padding:3rem 6vw 4rem;color:var(--muted);font-size:.78rem;letter-spacing:.05em;
  display:flex;align-items:center;gap:1rem}
footer svg{width:1.7rem;height:1.7rem;fill:var(--muted);flex:none}

/* 写真と文章のフェードイン（JSが有効なときだけ隠す）。
   文章は .block と .contact-inner の直下の要素が対象 */
.js .reveal,.js .block>*,.js .contact-inner>*{opacity:0;transform:translateY(.75rem);
  transition:opacity 1.6s cubic-bezier(.25,.1,.25,1),transform 1.6s cubic-bezier(.25,.1,.25,1)}
.js .contact img.reveal{transform:none}
.js .is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hero-text,.hero img{animation:none}
  .js .reveal,.js .block>*,.js .contact-inner>*{opacity:1;transform:none;transition:none}}

/* デスクトップ幅のみ：タイトル・ロゴ・サブタイトルを画面幅に応じて一緒に拡大
   --t（タイトルの文字サイズ）67px(〜1440) → 84px(2400) → 上限101px(3440〜)
   ロゴは --t の1.45倍、サブタイトルは0.48倍（タイトルの横幅を超えない比率） */
@media (min-width:1024px){
  .hero-text{--t:clamp(4.2rem,2.7rem + 1.65vw,6.3rem)}
  .mark{font-size:var(--t);
    display:flex;align-items:flex-end;column-gap:.256em} /* 3つのspanを下端揃え。間隔は元の空白の幅 */
  .roman{font-size:calc(var(--t) * .48)}
  .mark-svg{width:calc(var(--t) * 1.45);height:calc(var(--t) * 1.45)}

  /* ロゴ・タイトル・サブタイトルの左端（インクの端）を揃える。
     「D」の左端は「ど」の左端に合わせる（描画結果のピクセルで実測して調整） */
  .mark{margin-left:-.287em}
  .roman{margin-left:-.148em}
  /* 「NO」「INAKA」の位置（1440px幅で「NO」は「の」の中心から8px左） */
  .roman-no{margin-left:.662em}
  .roman-inaka{margin-left:.659em}
  .mark-svg{margin-left:calc(var(--t) * 1.45 * -.076)}

  /* 見出し・地名リスト・本文は1.5倍（冒頭のリード文とメールアドレスは除く） */
  h2{font-size:clamp(1.95rem,1.8rem + .6vw,2.4rem)}
  .places li{font-size:1.62rem}
  .block:not(.lede) p,.contact-inner p:not(:has(.mail)){font-size:1.62rem}

  /* 1文が1行に収まるよう本文の幅を広げる（冒頭のリード文は --measure のまま） */
  .block:not(.lede){max-width:calc(var(--measure-wide) + 12vw)}
  .lede{max-width:calc(34rem + 12vw)} /* リード文の最長の文（The rice below…）が1行に収まる幅 */
  .contact-inner{max-width:var(--measure-wide)}

  /* フッターの文字とロゴを1.5倍 */
  footer{font-size:1.17rem}
  footer svg{width:2.55rem;height:2.55rem}
}