/* =========================================================
   YUBARI TRAVEL NOTE — calm editorial travel-blog design
   ========================================================= */
:root{
  --paper:      #F7F4EE;
  --paper-deep: #EFEAE0;
  --card:       #FBF9F4;
  --ink:        #2B2924;
  --ink-soft:   #6B6459;
  --ink-faint:  #9C9589;
  --accent:     #B5633E;
  --accent-soft:#D9A77E;
  --moss:       #7C8A6E;
  --line:       #E1DACB;

  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  --w-narrow: 680px;
  --w-wide:   1120px;

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; }
a{ color:inherit; text-decoration:none; }
dl,dd{ margin:0; }
h1,h2,h3{ font-family:var(--font-serif); font-weight:600; margin:0; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

.container-narrow{ width:100%; max-width:var(--w-narrow); margin:0 auto; padding:0 24px; }
.container-wide{ width:100%; max-width:var(--w-wide); margin:0 auto; padding:0 24px; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(247,244,238,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 4px 18px rgba(43,41,36,.04);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); }
.brand__mark{ width:20px; height:20px; color:var(--accent); flex:0 0 auto; }
.brand__text{
  font-family:var(--font-serif); font-weight:600;
  font-size:15px; letter-spacing:.12em;
}

.site-nav{ display:flex; align-items:center; gap:clamp(20px,3vw,40px); }
.site-nav a{
  position:relative;
  font-size:13.5px; font-weight:500; letter-spacing:.04em;
  color:var(--ink-soft);
  padding:6px 0;
  transition:color .25s ease;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--accent);
  transition:right .3s var(--ease);
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a:hover::after{ right:0; }
.site-nav a.is-active{ color:var(--ink); }
.site-nav a.is-active::after{ right:0; }

.nav-toggle{
  display:none;
  width:36px; height:36px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ width:20px; height:1.5px; background:var(--ink); transition:transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:760px){
  .nav-toggle{ display:flex; }
  .site-nav{
    position:absolute; top:72px; left:0; right:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px 24px 18px;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:transform .25s var(--ease), opacity .25s ease, visibility .25s;
  }
  .site-nav.is-open{ transform:translateY(0); opacity:1; visibility:visible; }
  .site-nav a{ width:100%; padding:12px 0; border-bottom:1px solid var(--line); }
  .site-nav a:last-child{ border-bottom:none; }
  .site-nav a::after{ display:none; }
}

/* =========================================================
   Page scaffold + crossfade transition
   ========================================================= */
.page{ display:none; }
.page.is-active{ display:block; }
.page.is-entering{
  animation:pageIn .55s var(--ease) both;
}
@keyframes pageIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .page.is-entering{ animation:none; }
}

/* =========================================================
   Hero (home)
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
  color:#fff;
}
.hero--home{ padding-bottom:clamp(40px,9vh,130px); }
.hero__media{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.hero__media--home{
  background-image:
    url('../assets/images/home-hero.png'),
    linear-gradient(200deg,#8C7A5E 0%,#6E5A42 42%,#4A4232 78%,#332E24 100%);
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(20,17,13,.55) 0%, rgba(20,17,13,.28) 38%, rgba(20,17,13,.05) 62%),
             linear-gradient(0deg, rgba(20,17,13,.35) 0%, rgba(20,17,13,0) 28%);
}

/* ---- translucent archive card ---- */
.hero__card{
  position:relative; z-index:2;
  width:min(86vw,420px);
  margin-left:clamp(24px,6vw,96px);
  padding:clamp(32px,4vw,48px) clamp(28px,4vw,40px);
  background:rgba(20,17,13,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.12);
}
.hero__card-kanji{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(64px,9vw,118px); line-height:1;
  margin:0 0 10px;
  opacity:0; animation:fadeUp .8s var(--ease) .15s forwards;
}
.hero__card-en{
  font-size:19px; font-weight:500; letter-spacing:.38em;
  color:rgba(255,255,255,.85); margin:0 0 22px;
  opacity:0; animation:fadeUp .8s var(--ease) .26s forwards;
}
.hero__card-rule{
  width:56px; height:1px; background:rgba(255,255,255,.4);
  margin-bottom:18px;
  opacity:0; animation:fadeUp .8s var(--ease) .34s forwards;
}
.hero__card-date{
  font-size:18px; letter-spacing:.1em; color:rgba(255,255,255,.72);
  margin:0 0 26px;
  opacity:0; animation:fadeUp .8s var(--ease) .4s forwards;
}
.hero__card-tagline{
  font-size:20px; line-height:1.8; font-weight:500;
  white-space:nowrap;
  margin:0 0 28px;
  opacity:0; animation:fadeUp .8s var(--ease) .48s forwards;
}
.hero__card .btn{
  opacity:0; animation:fadeUp .8s var(--ease) .58s forwards;
}

/* ---- side index / scroll cue ---- */
.hero__index, .hero__scroll{
  position:absolute; z-index:2;
  writing-mode:vertical-rl;
  font-size:11px; font-weight:500; letter-spacing:.3em;
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 6px rgba(20,17,13,.65), 0 0 16px rgba(20,17,13,.4);
  margin:0;
  opacity:0; animation:fadeUp .8s var(--ease) .3s forwards;
}
.hero__index{ top:clamp(96px,16vh,160px); right:clamp(20px,4vw,48px); }
.hero__scroll{
  bottom:36px; right:clamp(20px,4vw,48px);
  display:flex; align-items:center; gap:10px;
  animation-delay:.7s;
}
.hero__scroll::after{
  content:""; width:1px; height:34px; background:rgba(255,255,255,.5);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%,100%{ transform:scaleY(.6); opacity:.4; }
  50%{ transform:scaleY(1); opacity:1; }
}

.display{
  font-family:var(--font-serif);
  font-size:clamp(32px,5.4vw,56px);
  line-height:1.4;
  margin:0 0 20px;
}
.display--sm{ font-size:clamp(28px,4vw,40px); margin-bottom:10px; }
.lede{
  font-size:15.5px; line-height:1.9; max-width:34em;
  color:var(--ink-soft);
  margin:0 0 30px;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero__card-kanji,.hero__card-en,.hero__card-rule,.hero__card-date,
  .hero__card-tagline,.hero__card .btn,.hero__index,.hero__scroll{
    animation:none; opacity:1;
  }
}
@media (max-width:640px){
  .hero{ min-height:62vh; align-items:flex-end; padding-bottom:64px; }
  .hero__card{ margin-left:20px; margin-right:20px; width:auto; }
  .hero__index{ display:none; }
}

/* =========================================================
   Buttons / links
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:500; letter-spacing:.03em;
  padding:13px 26px;
  border-radius:2px;
  border:1px solid currentColor;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn::after{ content:"→"; transition:transform .25s ease; }
.btn:hover::after{ transform:translateX(3px); }
.btn--outline-light{ color:#fff; border-color:rgba(255,255,255,.6); }
.btn--outline-light:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.btn--outline{ color:var(--ink); border-color:var(--ink); }
.btn--outline:hover{ background:var(--ink); color:var(--paper); }
.btn--primary{ color:var(--paper); background:var(--accent); border-color:var(--accent); }
.btn--primary:hover{ background:#9C502F; border-color:#9C502F; }

/* =========================================================
   Generic sections / typography
   ========================================================= */
.page-header{ padding:72px 24px 8px; }
.page-header--history{ position:relative; padding-bottom:40px; }
.history-map{
  position:absolute; top:80px; right:24px;
  width:clamp(220px,32vw,420px); height:auto;
  opacity:.92;
  pointer-events:none;
}
@media (max-width:640px){
  .history-map{ width:140px; top:50px; right:16px; }
}
.page-index{
  font-size:11px; font-weight:500; letter-spacing:.3em;
  color:var(--ink-faint); margin:0 0 10px;
}
.code-404{
  display:inline-block;
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(72px,14vw,165px); line-height:1;
  margin:0 0 6px;
  color:#fff;
  text-shadow:0 2px 10px rgba(20,17,13,.5), 0 0 30px rgba(20,17,13,.3);
}
.not-found{
  display:inline-block;
  font-size:13px; font-weight:600; letter-spacing:.32em;
  color:rgba(255,255,255,.85); text-transform:uppercase;
  text-shadow:0 1px 6px rgba(20,17,13,.5);
  white-space:nowrap;
  margin:0;
}
.section{ padding:56px 24px; }
.eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.28em;
  color:var(--accent); margin:0 0 18px;
}
.eyebrow--lg{
  font-size:clamp(40px,7vw,72px);
  letter-spacing:.1em;
}
.body-text{
  font-size:15.5px; color:var(--ink-soft); max-width:40em;
  margin:0 0 20px;
}
.body-text:last-child{ margin-bottom:0; }
.pull-quote{
  margin:32px 0; padding:4px 0 4px 24px;
  border-left:2px solid var(--accent);
  font-family:var(--font-serif);
  font-size:19px; line-height:1.8; color:var(--ink);
}

.home-roast{ text-align:center; padding:88px 24px 104px; }
.home-roast__text{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(22px,4.2vw,38px); line-height:1.7;
  color:var(--ink);
  margin:0;
}

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---- record list (END) ---- */
.record-section{ padding-top:8px; }
.record-title{
  text-align:center;
  margin-bottom:16px;
}
.record-list{
  display:flex; flex-direction:column;
  margin-bottom:8px;
}
.record-list > div{
  display:flex; justify-content:space-between; gap:24px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.record-list dt{
  font-size:13px; color:var(--ink-faint); font-weight:500; flex:0 0 auto;
}
.record-list dd{
  font-size:15px; color:var(--ink); text-align:right;
}

/* ---- timeline (HISTORY) — alternating zigzag rows ---- */
.timeline{
  list-style:none; margin:0 auto; padding:0;
  max-width:1080px;
  display:flex; flex-direction:column; gap:48px;
}
.timeline-item{
  display:flex; align-items:center; gap:36px;
}
.timeline-item:nth-child(even){
  flex-direction:row-reverse;
}
.timeline-item__media{
  flex:0 0 auto;
  width:clamp(220px,40vw,420px);
  border-radius:3px; overflow:hidden;
}
.timeline-item__media img{
  width:100%; height:auto; display:block;
}
.timeline-item__content{
  flex:1; min-width:0;
}
.timeline-item__num{
  display:block;
  font-family:var(--font-serif); font-weight:600; font-size:14px;
  color:var(--accent);
  margin-bottom:8px;
}
.timeline-item__caption{
  font-size:16.5px; line-height:1.9; color:var(--ink-soft); margin:0;
}
@media (max-width:640px){
  .timeline-item, .timeline-item:nth-child(even){
    flex-direction:column; align-items:flex-start; gap:16px;
  }
  .timeline-item__media{ width:100%; max-width:280px; }
}

.closing{ padding-top:8px; }
.closing .btn{ margin-top:8px; }

/* =========================================================
   Shirahama — 404 full-bleed background
   ========================================================= */
.dead-end-hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding-bottom:clamp(340px,62vh,620px);
  overflow:hidden;
  text-align:center;
}
.dead-end-hero__bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    url('../assets/images/dead-end-coast.png?v=2'),
    linear-gradient(200deg,#CFE3EE 0%,#A9C9B8 45%,#7FA688 100%);
  background-size:auto 130%; background-position:center 100%;
}
.dead-end-hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,17,13,.1) 0%, rgba(20,17,13,.05) 35%, rgba(20,17,13,.5) 100%);
}
.dead-end-hero__content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
@media (max-width:640px){
  .dead-end-hero{ min-height:68vh; padding-bottom:0; }
  .dead-end-hero__bg{ background-size:cover; background-position:center 72%; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  text-align:center; padding:48px 24px 56px;
  border-top:1px solid var(--line);
  font-size:12px; letter-spacing:.08em; color:var(--ink-faint);
}

/* =========================================================
   Page-transition train
   — runs left→right when moving to a page further right in
     the nav order, right→left when moving further left
   ========================================================= */
.train-overlay{
  position:fixed; inset:0; z-index:300;
  pointer-events:none;
  overflow:hidden;
}
.train-overlay__bg{
  position:absolute; inset:0;
  background:#0A0908;
  opacity:0;
}
.train-overlay__label{
  position:absolute; left:50%; top:34%;
  transform:translate(-50%,-50%);
  margin:0;
  font-family:var(--font-serif);
  font-size:clamp(15px,2.2vw,20px);
  letter-spacing:.3em;
  color:rgba(255,255,255,.92);
  opacity:0;
}
.train-overlay.is-running-right .train-overlay__bg,
.train-overlay.is-running-left .train-overlay__bg,
.train-overlay.is-running-right .train-overlay__label,
.train-overlay.is-running-left .train-overlay__label,
.train-overlay.is-running-right .train-overlay__track,
.train-overlay.is-running-left .train-overlay__track{
  animation:overlayFade var(--train-duration,1.3s) ease forwards;
}
@keyframes overlayFade{
  0%{ opacity:0; }
  15%{ opacity:1; }
  58%{ opacity:1; }
  100%{ opacity:0; }
}
.train-overlay__track{
  position:absolute; left:0; right:0;
  top:calc(72% + 72px);
  height:3px;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 4px, transparent 4px 30px);
  box-shadow:0 -9px 0 0 rgba(255,255,255,.55), 0 9px 0 0 rgba(255,255,255,.55);
  opacity:0;
}
.train-overlay__img{
  position:absolute; top:72%; left:0;
  width:clamp(440px,56vw,780px); height:auto;
  transform:translate(-55vw,-50%);
  filter:drop-shadow(0 26px 30px rgba(20,17,13,.42));
  opacity:0;
}
.train-overlay__img.is-running-right{
  animation:trainRunRight var(--train-duration,1s) cubic-bezier(.45,0,.2,1) forwards;
}
.train-overlay__img.is-running-left{
  animation:trainRunLeft var(--train-duration,1s) cubic-bezier(.45,0,.2,1) forwards;
}
@keyframes trainRunRight{
  0%{ transform:translate(-55vw,-50%) scaleX(-1); opacity:0; }
  15%{ opacity:1; }
  58%{ opacity:1; }
  100%{ transform:translate(155vw,-50%) scaleX(-1); opacity:0; }
}
@keyframes trainRunLeft{
  0%{ transform:translate(155vw,-50%) scaleX(1); opacity:0; }
  15%{ opacity:1; }
  58%{ opacity:1; }
  100%{ transform:translate(-55vw,-50%) scaleX(1); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .train-overlay{ display:none; }
}