/* ============================================================
   SUSHI JOURNAL — shared stylesheet (single source of truth)
   Palette: ink black / paper white / faint blood-red accent
   Motion: reused from Motion Lab (text-reveal-mask, reveal-clip,
   scroll-zoom, magnetic-button, infinite-marquee, preloader-counter)
   Sub-page components are appended at the bottom under
   "SUBPAGE COMPONENTS" — reuse these classes, do not invent new CSS.
   ============================================================ */
:root{
  --ink:#000000;
  --ink-2:#0a0a0a;
  --ink-3:#121110;
  --paper:#f4f1ea;        /* warm off-white */
  --white:#ffffff;
  --muted:rgba(244,241,234,0.52);       /* 黒地 5.13:1 */
  --muted-2:rgba(244,241,234,0.50);     /* 黒地 4.77:1／9.5-11px の小さな大文字メタ文字にしか使わないので AA(4.5) を割れない。0.34=2.69:1 だった */
  --line:rgba(244,241,234,0.12);
  --line-strong:rgba(244,241,234,0.22);
  --accent:#b31a26;       /* akami / blood-red・黒地 3.09:1／面と線と24px以上の文字 */
  --accent-sm:#e42836;    /* 同じ赤の明るい方・黒地 4.66:1／24px未満の文字だけに使う */
  --gold:#b08d57;         /* restrained gold */
  --serif:'Playfair Display', serif;
  --serif-2:'Cormorant Garamond', serif;
  --jp:'Shippori Mincho', serif;
  --brush:'Yuji Boku', serif;
  --sans:'Inter', sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  letter-spacing:.01em;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:var(--white);}

/* ---- grain / vignette overlay ---- */
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ PRELOADER (reused: preloader-counter) ============ */
#preloader{position:fixed;inset:0;z-index:100;background:var(--ink);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:34px;will-change:transform;}
html.js #preloader{display:flex;}
.pre-kanji{font-family:var(--brush);font-size:clamp(78px,16vw,180px);color:var(--white);line-height:1;}
.pre-bar-wrap{width:min(70vw,360px);height:1px;background:rgba(244,241,234,.16);overflow:hidden;}
.pre-bar{height:100%;width:100%;background:var(--paper);transform:scaleX(0);transform-origin:left center;will-change:transform;}
.pre-meta{display:flex;justify-content:space-between;width:min(70vw,360px);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);}
.pre-counter{font-variant-numeric:tabular-nums;}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);
  transition:background .6s var(--ease), padding .6s var(--ease), border-color .6s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(14px);
  padding-top:16px;padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
/* solid variant for sub-pages that have no full-bleed hero behind the nav */
.nav--solid{background:rgba(0,0,0,0.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.nav__brand{display:flex;align-items:center;gap:12px;letter-spacing:.18em;}
.nav__brand .kanji{font-family:var(--brush);font-size:26px;line-height:1;}
.nav__brand .word{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:.34em;}
.nav__menu{display:flex;gap:clamp(18px,2.4vw,40px);align-items:center;}
.nav__menu a{
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:400;color:var(--muted);position:relative;padding:6px 0;
  transition:color .4s var(--ease);
}
.nav__menu a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--paper);transition:width .45s var(--ease);
}
.nav__menu a:hover{color:var(--paper);}
.nav__menu a:hover::after{width:100%;}
.nav__menu a.is-active{color:var(--paper);}
.nav__menu a.is-active::after{width:100%;background:var(--accent);}
.nav__lang{
  font-size:11px;letter-spacing:.2em;border:1px solid var(--line-strong);
  border-radius:40px;padding:6px 14px;color:var(--muted);
  transition:.4s var(--ease);
}
.nav__lang:hover{color:var(--ink);background:var(--paper);border-color:var(--paper);}
.nav__burger{display:none;flex-direction:column;gap:5px;cursor:pointer;}
.nav__burger span{width:24px;height:1.5px;background:var(--paper);display:block;}

/* ============ HERO ============ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.hero__inner{
  position:relative;z-index:3;flex:1 0 auto;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:clamp(92px,13vh,140px) clamp(20px,5vw,40px) clamp(22px,4vh,40px);
}
.hero__lockup{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,2vw,30px);
}
.hero__kanji{
  font-family:var(--brush);
  font-size:clamp(78px,15vw,210px);
  line-height:.82;color:var(--white);
  text-shadow:0 8px 60px rgba(0,0,0,.6);
}
.hero__word{
  font-family:var(--serif);
  text-align:left;line-height:.86;
  font-weight:800;color:var(--white);
}
/* each line wrapped in a mask (reused: text-reveal-mask) */
/* Padding lives on the INNER span (sized in em of the big display font) so it
   actually scales — it gives Playfair's "J" left side-bearing room and clears
   descenders, so overflow:hidden (needed for the vertical mask) never clips them. */
.hero__line{display:block;overflow:hidden;}
.hero__line > span{display:block;will-change:transform;padding:0 .06em .16em .1em;}
.hero__word .l1{font-size:clamp(46px,9.5vw,140px);letter-spacing:.02em;}
.hero__word .l2{font-size:clamp(40px,8.4vw,124px);letter-spacing:.16em;font-weight:500;}
.hero__sub{
  margin-top:clamp(26px,4vw,42px);
  font-family:var(--sans);font-weight:400;
  font-size:clamp(11px,1.15vw,13.5px);
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--muted);max-width:760px;line-height:2.2;
}
.hero__media{
  position:relative;z-index:2;flex:0 0 auto;height:46svh;min-height:300px;width:100%;overflow:hidden;
}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:brightness(.66) contrast(1.12) saturate(1.04);
  transform-origin:center center;will-change:transform;
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--ink) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 70%,var(--ink) 100%);
}
.hero__scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted-2);
}
.hero__scroll .bar{width:1px;height:46px;background:linear-gradient(var(--paper),transparent);animation:drop 2.2s var(--ease) infinite;}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top;}45%{transform:scaleY(1);transform-origin:top;}55%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ============ shared section ============ */
.section{padding:clamp(90px,12vh,170px) clamp(20px,5vw,80px);position:relative;}
.eyebrow{
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--accent-sm);font-weight:500;display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--accent-sm);display:inline-block;}
.h-sec{font-family:var(--serif);font-weight:500;line-height:1.08;font-size:clamp(34px,5vw,66px);}
.lead{color:var(--muted);font-weight:300;font-size:clamp(15px,1.4vw,18px);line-height:1.85;max-width:60ch;}

/* heading mask reveal (reused: text-reveal-mask) */
.mask{overflow:hidden;display:block;padding-bottom:.04em;}
.mask > .mask-i{display:block;will-change:transform;}

/* ============ MANIFESTO ============ */
.manifesto{text-align:center;border-top:1px solid var(--line);}
.manifesto__jp{font-family:var(--jp);font-size:clamp(15px,1.6vw,19px);letter-spacing:.3em;color:var(--gold);margin-bottom:30px;}
.manifesto__big{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(26px,4.4vw,58px);line-height:1.32;max-width:18ch;margin:0 auto;
}
.manifesto__big em{font-style:normal;color:var(--accent);}
.manifesto__by{margin-top:40px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);}

/* ============ FEATURED ============ */
.featured{border-top:1px solid var(--line);}
.featured__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;}
.featured__media{position:relative;overflow:hidden;aspect-ratio:4/5;}
.featured__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);filter:brightness(.74) contrast(1.08) saturate(1.02);}
.featured__media:hover img{transform:scale(1.06);}
.featured__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,rgba(0,0,0,0) 38%,rgba(0,0,0,.55) 100%);}
.featured__tag{position:absolute;top:18px;left:18px;z-index:2;font-size:10px;letter-spacing:.3em;text-transform:uppercase;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border:1px solid var(--line-strong);padding:7px 13px;}
.featured__cat{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent-sm);}
.featured__title{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.8vw,52px);line-height:1.1;margin:20px 0 22px;}
.featured__excerpt{color:var(--muted);font-size:16px;line-height:1.9;max-width:46ch;}
.featured__meta{margin-top:28px;display:flex;align-items:center;gap:18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);}
.btn-line{
  display:inline-flex;align-items:center;gap:12px;margin-top:34px;
  font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper);
}
.btn-line .arw{width:36px;height:1px;background:var(--paper);transition:width .45s var(--ease);}
.btn-line:hover .arw{width:58px;}

/* ============ SECTIONS / CATEGORIES ============ */
.cats{border-top:1px solid var(--line);}
.cats__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:clamp(40px,6vh,70px);}
.cats__list{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);}
.cat{
  position:relative;padding:42px 26px 36px;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);overflow:hidden;cursor:pointer;
  transition:background .6s var(--ease);
}
.cat:nth-child(4n){border-right:none;}
.cat__no{font-family:var(--serif-2);font-size:13px;color:var(--muted-2);letter-spacing:.1em;}
.cat__jp{font-family:var(--jp);font-size:15px;color:var(--gold);margin:18px 0 6px;letter-spacing:.2em;}
.cat__name{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);font-weight:500;}
.cat__desc{color:var(--muted);font-size:13px;line-height:1.7;margin-top:14px;max-width:24ch;}
.cat__arrow{margin-top:26px;font-size:18px;color:var(--muted-2);transition:transform .5s var(--ease),color .5s var(--ease);}
.cat:hover{background:var(--ink-3);}
.cat:hover .cat__arrow{transform:translate(6px,-6px);color:var(--accent-sm);}

/* ============ LATEST GRID ============ */
.latest{border-top:1px solid var(--line);}
.latest__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(40px,6vh,64px);flex-wrap:wrap;gap:20px;}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,46px);}
.card{cursor:pointer;}
.card__media{position:relative;overflow:hidden;aspect-ratio:3/4;margin-bottom:22px;}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease),filter 1.3s var(--ease);filter:brightness(.66) contrast(1.06) saturate(.98);}
.card:hover .card__media img{transform:scale(1.07);filter:brightness(.9) saturate(1.04);}
.card__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 55%);}
.card__cat{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-sm);}
.card__title{font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.8vw,25px);line-height:1.22;margin:14px 0 12px;transition:color .4s var(--ease);}
.card:hover .card__title{color:var(--white);}
.card__excerpt{color:var(--muted);font-size:14px;line-height:1.75;}
.card__meta{margin-top:16px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);}

/* ============ MARQUEE (reused: infinite-marquee) ============ */
.mq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--ink-2);}
.mq-row{display:flex;overflow:hidden;padding:16px 0;}
.mq-row + .mq-row{border-top:1px solid var(--line);}
.mq-track{display:flex;flex-shrink:0;white-space:nowrap;will-change:transform;}
.mq-item{display:inline-flex;align-items:center;gap:30px;padding:0 30px;font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.2vw,2.7rem);letter-spacing:.03em;color:var(--paper);user-select:none;}
.mq-row--alt .mq-item{font-family:var(--jp);font-size:clamp(1.1rem,2.4vw,1.9rem);color:var(--muted);font-weight:400;}
.mq-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.75;flex-shrink:0;}

/* ============ CHEFS strip ============ */
.chefs{border-top:1px solid var(--line);background:var(--ink-2);}
.chefs__head{text-align:center;margin-bottom:clamp(46px,7vh,76px);}
.chefs__rail{display:flex;gap:clamp(20px,2.4vw,38px);overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;}
.chefs__rail::-webkit-scrollbar{display:none;}
.chef{flex:0 0 clamp(260px,28vw,360px);scroll-snap-align:start;}
.chef__media{position:relative;aspect-ratio:3/4;overflow:hidden;margin-bottom:20px;}
.chef__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.82);transition:filter 1.1s var(--ease),transform 1.4s var(--ease);}
.chef:hover .chef__media img{filter:grayscale(0) brightness(.98);transform:scale(1.05);}
.chef__name{font-family:var(--serif);font-size:24px;font-weight:500;}
.chef__shop{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:8px;}
.chef__loc{font-size:11px;letter-spacing:.2em;color:var(--gold);margin-top:6px;}

/* ============ LEXICON ============ */
.lexicon{border-top:1px solid var(--line);}
.lex__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,90px);align-items:start;}
.lex__terms{display:flex;flex-direction:column;}
.lex__row{display:flex;align-items:baseline;gap:24px;padding:24px 0;border-top:1px solid var(--line);transition:padding-left .5s var(--ease);}
.lex__row:hover{padding-left:14px;}
.lex__jp{font-family:var(--jp);font-size:24px;min-width:120px;color:var(--paper);}
.lex__romaji{font-family:var(--serif-2);font-style:italic;font-size:18px;color:var(--gold);min-width:120px;}
.lex__def{color:var(--muted);font-size:14px;line-height:1.7;}

/* ============ NEWSLETTER ============ */
.news{border-top:1px solid var(--line);text-align:center;background:var(--ink-2);}
.news__kanji{font-family:var(--brush);font-size:clamp(60px,9vw,120px);color:var(--white);line-height:1;opacity:.9;}
.news__title{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,52px);margin:26px 0 18px;}
.news__sub{color:var(--muted);max-width:48ch;margin:0 auto 42px;font-size:15px;line-height:1.8;}
.news__form{display:flex;align-items:center;gap:14px;max-width:520px;margin:0 auto;border-bottom:1px solid var(--line-strong);}
.news__form input{flex:1;background:transparent;border:none;color:var(--paper);font-family:var(--sans);font-size:14px;padding:16px 6px;letter-spacing:.04em;}
.news__form input::placeholder{color:var(--muted-2);letter-spacing:.16em;text-transform:uppercase;font-size:12px;}
.news__form input:focus{outline:none;}
.news__btn{background:transparent;border:1px solid var(--line-strong);border-radius:100px;color:var(--paper);font-size:11px;letter-spacing:.28em;text-transform:uppercase;cursor:pointer;padding:12px 22px;transition:color .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease);will-change:transform;}
.news__btn .mag-label{display:inline-block;pointer-events:none;will-change:transform;}
.news__btn:hover{color:var(--ink);background:var(--paper);border-color:var(--paper);}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--line);padding:clamp(60px,8vh,90px) clamp(20px,5vw,80px) 40px;}
.footer__top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:50px;padding-bottom:60px;border-bottom:1px solid var(--line);}
.footer__brand .kanji{font-family:var(--brush);font-size:54px;color:var(--white);line-height:1;}
.footer__brand .word{font-family:var(--serif);font-size:20px;letter-spacing:.3em;font-weight:700;margin-top:14px;}
.footer__brand p{color:var(--muted);font-size:13px;line-height:1.8;max-width:34ch;margin-top:18px;}
.footer__cols{display:flex;gap:clamp(40px,6vw,90px);flex-wrap:wrap;}
.footer__col h2{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px;}
.footer__col a{display:block;color:var(--muted);font-size:13.5px;padding:7px 0;transition:color .35s var(--ease);}
.footer__col a:hover{color:var(--paper);}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:30px;font-size:11px;letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase;}

/* ============ reveal (IntersectionObserver, body copy) ============ */
/* keep both states behind the same html.js prefix so .is-in wins on specificity */
html.js .reveal{opacity:0;transform:translateY(38px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);}
html.js .reveal.is-in{opacity:1;transform:none;}

/* ============ motion initial states (only when JS active) ============ */
/* NOTE: hide with opacity only — never a percentage CSS transform here.
   A pre-existing transform:translateY(110%) corrupts GSAP's yPercent base
   (tween reports progress but value stays frozen). GSAP owns transforms. */
html.js .hero__kanji{opacity:0;}
html.js .hero__line > span{opacity:0;}
html.js .hero__sub{opacity:0;}
html.js .mask > .mask-i{opacity:0;}
html.js .clip{clip-path:inset(100% 0 0 0);}

/* ============ reduced motion: show everything, no animation ============ */
@media(prefers-reduced-motion:reduce){
  html.js #preloader{display:none;}
  html.js .reveal{opacity:1;transform:none;}
  html.js .hero__kanji,html.js .hero__sub{opacity:1;}
  html.js .hero__line > span,html.js .mask > .mask-i{opacity:1;transform:none;}
  html.js .clip{clip-path:none;}
  .hero__scroll .bar{animation:none;}
}

/* ============ HERO — short / landscape viewports (avoid clipping) ============ */
@media(max-height:820px){
  .hero__kanji{font-size:clamp(60px,17vh,150px);}
  .hero__word .l1{font-size:clamp(40px,11vh,104px);}
  .hero__word .l2{font-size:clamp(34px,9.6vh,92px);}
  .hero__sub{margin-top:clamp(14px,2.4vh,30px);}
  .hero__media{height:40svh;min-height:220px;}
}
@media(max-height:620px){
  .hero__kanji{font-size:clamp(52px,16vh,110px);}
  .hero__word .l1{font-size:clamp(34px,10vh,78px);}
  .hero__word .l2{font-size:clamp(30px,8.6vh,68px);}
  .hero__media{height:34svh;min-height:180px;}
}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .featured__grid{grid-template-columns:1fr;}
  .cats__list{grid-template-columns:repeat(2,1fr);}
  .cat:nth-child(4n){border-right:1px solid var(--line);}
  .cat:nth-child(2n){border-right:none;}
  .cards{grid-template-columns:repeat(2,1fr);}
  .lex__grid{grid-template-columns:1fr;}
}
/* ナビだけ先に畳む。項目が7つ（Chefs 追加）になり、実測で 840px を切ると
   「Sushi A–Z」が2行に折れて nav が 75px→94px に伸び、ブランドと接触する。
   860px なら余白 35px 残る。ルールは下の 680px ブロックからそのまま移しただけで、
   閾値以外は変えていない（6項目時代も 740px 以下で同じ潰れ方をしていた）。 */
@media(max-width:860px){
  .nav__menu{display:none;}
  .nav__menu.is-open{display:flex;flex-direction:column;align-items:flex-start;gap:18px;
    position:fixed;top:62px;left:0;width:100%;padding:24px clamp(20px,6vw,40px) 30px;
    background:rgba(0,0,0,0.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);z-index:39;}
  .nav__burger{display:flex;}
}
@media(max-width:680px){
  .hero__lockup{flex-direction:column;gap:8px;}
  .hero__word{text-align:center;}
  .hero__sub{letter-spacing:.28em;line-height:2;}
  .cats__list{grid-template-columns:1fr;}
  .cat{border-right:none !important;}
  .cards{grid-template-columns:1fr;}
  .footer__top{flex-direction:column;}
}

/* ============================================================
   i18n — bilingual EN / 日本語 toggle
   Wrap translatable text as:
     <span class="t-en">English</span><span class="t-ja">日本語</span>
   The active language is set via <html lang="en"> / <html lang="ja">.
   ============================================================ */
html[lang="en"] .t-ja{display:none;}
html[lang="ja"] .t-en{display:none;}
/* Japanese copy uses the mincho face for proper typography */
.t-ja{font-family:var(--jp);}
/* keep the brand wordmark in its display serif regardless of language */
.nav__brand .t-ja,.footer__brand .t-ja{font-family:var(--serif);}

/* ============================================================
   SUBPAGE COMPONENTS  (shared across journal/article/section/
   chefs/chef/guide/restaurant/lexicon/about)
   Reuse these classes. Match the established look — do not invent.
   ============================================================ */

/* ---- generic wrappers ---- */
.wrap{max-width:1320px;margin:0 auto;}
.wrap--narrow{max-width:760px;margin:0 auto;}
.wrap--mid{max-width:1040px;margin:0 auto;}
.divline{height:1px;background:var(--line);border:0;margin:0;}

/* ---- page hero (compact header for sub-pages, sits under fixed nav) ---- */
.page-hero{position:relative;padding:clamp(150px,20vh,240px) clamp(20px,5vw,80px) clamp(54px,7vh,90px);border-bottom:1px solid var(--line);overflow:hidden;}
.page-hero__inner{position:relative;z-index:2;max-width:1320px;margin:0 auto;}
.page-hero__jp{font-family:var(--jp);font-size:clamp(14px,1.5vw,18px);letter-spacing:.3em;color:var(--gold);margin-bottom:18px;}
.page-hero__title{font-family:var(--serif);font-weight:500;line-height:1.02;font-size:clamp(44px,8vw,108px);letter-spacing:-.01em;}
.page-hero__title em{font-style:italic;color:var(--accent);}
.page-hero__lead{color:var(--muted);font-size:clamp(15px,1.4vw,18px);line-height:1.9;max-width:60ch;margin-top:26px;}
/* media-backed page hero (section / article landing) */
.page-hero--media{min-height:72svh;display:flex;align-items:flex-end;border-bottom:none;}
.page-hero--media .page-hero__bg{position:absolute;inset:0;z-index:0;}
.page-hero--media .page-hero__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) contrast(1.1) saturate(1.02);}
.page-hero--media .page-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 4%,rgba(0,0,0,.2) 55%,rgba(0,0,0,.45) 100%);}

/* ---- breadcrumbs ---- */
.crumbs{display:flex;gap:12px;align-items:center;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);margin-bottom:26px;}
.crumbs a{color:var(--muted);transition:color .35s var(--ease);}
.crumbs a:hover{color:var(--paper);}
.crumbs .sep{opacity:.5;}

/* ---- filter chips (journal / guide) ---- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.chip{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);border-radius:100px;padding:9px 18px;cursor:pointer;transition:.35s var(--ease);background:transparent;}
.chip:hover{color:var(--paper);border-color:var(--paper);}
.chip.is-active{color:var(--ink);background:var(--paper);border-color:var(--paper);}
.toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-bottom:clamp(34px,5vh,56px);}
.toolbar__count{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);}

/* ---- horizontal post rows (archive list) ---- */
.post-list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.post-row{display:grid;grid-template-columns:200px 1fr auto;gap:clamp(20px,3vw,48px);align-items:center;padding:26px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:padding-left .5s var(--ease);}
.post-row:hover{padding-left:12px;}
.post-row__media{position:relative;overflow:hidden;aspect-ratio:4/3;}
.post-row__media img{width:100%;height:100%;object-fit:cover;filter:brightness(.7) contrast(1.05);transition:transform 1.2s var(--ease);}
.post-row:hover .post-row__media img{transform:scale(1.06);}
.post-row__cat{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-sm);}
.post-row__title{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.2vw,30px);line-height:1.18;margin:10px 0 10px;}
.post-row__excerpt{color:var(--muted);font-size:14px;line-height:1.75;max-width:60ch;}
.post-row__meta{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap;text-align:right;}

/* ---- pagination ---- */
.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:clamp(48px,7vh,80px);}
.pager a,.pager span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;font-size:12px;letter-spacing:.1em;color:var(--muted);transition:.35s var(--ease);}
.pager a:hover{color:var(--paper);border-color:var(--paper);}
.pager .is-active{color:var(--ink);background:var(--paper);border-color:var(--paper);}
.pager .pager__edge{border-radius:100px;padding:0 18px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;}

/* ============ ARTICLE (detail / reading) ============ */
/* 上余白は固定ナビ（.nav は高さ 71〜75px）より必ず大きくする。
   2026-08-02 まで clamp(50px,7vh,90px) だったため、7vh が 50〜63px にしかならない
   端末・画面高では パンくず（Home / Guides）がナビの下に 12〜21px 潜り込んでいた。
   半透明の黒 + blur が乗るので、読めないうえに上半分が押せない状態だった。
   記事ページ144本と osaka / kyoto が該当（トップや一覧は .page-hero の 150px で元から回避できていた）。*/
.article{padding:clamp(96px,11vh,108px) clamp(20px,5vw,80px) 0;}
.article__head{max-width:880px;margin:0 auto;text-align:center;}
.article__cat{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent-sm);}
.article__title{font-family:var(--serif);font-weight:500;line-height:1.06;font-size:clamp(34px,5.4vw,72px);margin:22px 0 26px;}
.article__dek{color:var(--muted);font-size:clamp(16px,1.6vw,20px);line-height:1.7;font-family:var(--serif-2);font-style:italic;max-width:60ch;margin:0 auto;}
.article__byline{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:34px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);}
.article__byline .sep{opacity:.5;}
.article__hero{position:relative;overflow:hidden;margin:clamp(40px,6vh,70px) 0 0;aspect-ratio:16/9;width:100%;}
.article__hero img{width:100%;height:100%;object-fit:cover;filter:brightness(.78) contrast(1.06);}
.article__hero figcaption{position:absolute;left:0;bottom:0;padding:14px 18px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0));width:100%;}
/* body typography */
.article__body{max-width:720px;margin:0 auto;padding:clamp(46px,7vh,80px) 0 0;font-size:18px;line-height:1.95;color:rgba(244,241,234,0.86);}
.article__body > p{margin-bottom:30px;}
.article__body > p:first-of-type::first-letter{font-family:var(--serif);font-size:4.6em;line-height:.78;float:left;padding:6px 14px 0 0;color:var(--paper);font-weight:500;}
.article__body h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,38px);line-height:1.18;margin:54px 0 22px;color:var(--paper);}
.article__body h3{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.2vw,26px);margin:40px 0 16px;color:var(--paper);}
.article__body a{color:var(--paper);border-bottom:1px solid var(--accent);transition:color .3s var(--ease);}
.article__body a:hover{color:var(--accent-sm);}
.article__body ul,.article__body ol{margin:0 0 30px 1.1em;color:var(--muted);}
.article__body li{margin-bottom:12px;padding-left:6px;}
.article__body strong{color:var(--paper);font-weight:500;}
.article__body em{font-family:var(--serif-2);}
.article__body .jp{font-family:var(--jp);color:var(--gold);}
.pullquote{margin:clamp(46px,6vh,70px) 0;text-align:center;}
.pullquote p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(24px,3.4vw,40px);line-height:1.35;color:var(--paper);max-width:18ch;margin:0 auto;}
.pullquote cite{display:block;margin-top:22px;font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2);}
.figure{margin:clamp(40px,5vh,60px) 0;}
.figure img{width:100%;filter:brightness(.82) contrast(1.05);}
.figure figcaption{margin-top:14px;font-size:12px;color:var(--muted-2);letter-spacing:.06em;text-align:center;}
.figure--wide{max-width:1040px;margin-left:auto;margin-right:auto;}
.article__tags{max-width:720px;margin:clamp(40px,6vh,60px) auto 0;display:flex;flex-wrap:wrap;gap:10px;}
.tag{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);border-radius:100px;padding:8px 16px;transition:.35s var(--ease);}
.tag:hover{color:var(--paper);border-color:var(--paper);}
.article__share{max-width:720px;margin:34px auto 0;display:flex;gap:18px;align-items:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);}
.article__share a{color:var(--muted);transition:color .3s var(--ease);}
.article__share a:hover{color:var(--paper);}
.byline-card{max-width:720px;margin:clamp(46px,6vh,70px) auto 0;display:flex;gap:22px;align-items:center;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.byline-card__avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;filter:grayscale(1);flex-shrink:0;}
.byline-card__name{font-family:var(--serif);font-size:20px;}
.byline-card__bio{color:var(--muted);font-size:13.5px;line-height:1.7;margin-top:6px;}

/* ============ CHEF PROFILE ============ */
.profile{padding:0 clamp(20px,5vw,80px);}
.profile__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(36px,5vw,80px);align-items:start;max-width:1320px;margin:0 auto;}
.profile__media{position:relative;overflow:hidden;aspect-ratio:3/4;}
.profile__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.9) contrast(1.05);}
.profile__name{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1.04;}
.profile__name .jp{display:block;font-family:var(--jp);font-size:.42em;color:var(--gold);letter-spacing:.18em;margin-bottom:12px;}
.profile__role{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-sm);margin-top:18px;}
.profile__bio{color:rgba(244,241,234,0.82);font-size:17px;line-height:1.9;margin-top:26px;}
.profile__bio p{margin-bottom:22px;}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px;}
.facts__cell{background:var(--ink);padding:20px 22px;}
.facts__k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);}
.facts__v{font-family:var(--serif);font-size:19px;margin-top:8px;}
.facts__v .jp{font-family:var(--jp);color:var(--gold);}

/* chef index grid (reuses .chef card visuals but lays out as a grid) */
.chef-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,46px);}
.chef-grid .chef{flex:initial;width:auto;cursor:pointer;}

/* ============ GUIDE / VENUES ============ */
.venues{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.venue{position:relative;background:var(--ink);padding:0;cursor:pointer;overflow:hidden;}
.venue__media{position:relative;overflow:hidden;aspect-ratio:16/10;}
.venue__media img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) contrast(1.08);transition:transform 1.3s var(--ease),filter 1.3s var(--ease);}
.venue:hover .venue__media img{transform:scale(1.05);filter:brightness(.8);}
.venue__body{padding:28px clamp(22px,2.5vw,38px) 34px;}
.venue__rank{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--serif);font-size:13px;letter-spacing:.1em;color:var(--paper);background:rgba(0,0,0,.5);backdrop-filter:blur(6px);border:1px solid var(--line-strong);padding:6px 12px;}
.venue__name{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.6vw,34px);}
.venue__jp{font-family:var(--jp);font-size:14px;color:var(--gold);letter-spacing:.16em;margin-top:6px;}
.venue__meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.venue__meta .star{color:var(--gold);letter-spacing:.1em;}
.venue__desc{color:var(--muted);font-size:14px;line-height:1.75;margin-top:16px;max-width:46ch;}

/* venue detail facts table (reuses .facts) + map placeholder */
.map-ph{aspect-ratio:21/9;width:100%;background:repeating-linear-gradient(45deg,var(--ink-2),var(--ink-2) 14px,var(--ink-3) 14px,var(--ink-3) 28px);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:11px;letter-spacing:.28em;text-transform:uppercase;}

/* ============ LEXICON full page ============ */
.lex-page{display:flex;flex-direction:column;}
.lex-jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(34px,5vh,56px);}
.lex-jump a{font-size:12px;letter-spacing:.1em;color:var(--muted);border:1px solid var(--line);border-radius:50%;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;transition:.35s var(--ease);}
.lex-jump a:hover{color:var(--ink);background:var(--paper);border-color:var(--paper);}
.lex-letter{font-family:var(--serif);font-size:clamp(28px,4vw,46px);color:var(--accent);padding:38px 0 8px;border-top:1px solid var(--line);}
.lex-entry{display:grid;grid-template-columns:160px 160px 1fr;gap:24px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line);transition:padding-left .5s var(--ease);}
.lex-entry:hover{padding-left:12px;}
.lex-entry__jp{font-family:var(--jp);font-size:24px;color:var(--paper);}
.lex-entry__romaji{font-family:var(--serif-2);font-style:italic;font-size:18px;color:var(--gold);}
.lex-entry__def{color:var(--muted);font-size:14.5px;line-height:1.75;}

/* ============ ABOUT ============ */
.values{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);}
.value{padding:42px 26px 38px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);}
.value:nth-child(3n){border-right:none;}
.value__no{font-family:var(--serif-2);font-size:13px;color:var(--muted-2);}
.value__jp{font-family:var(--jp);font-size:15px;color:var(--gold);margin:16px 0 6px;letter-spacing:.2em;}
.value__name{font-family:var(--serif);font-size:clamp(20px,2vw,27px);font-weight:500;}
.value__desc{color:var(--muted);font-size:13.5px;line-height:1.75;margin-top:14px;}
.editors{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,38px);}
.editor__media{aspect-ratio:1/1;overflow:hidden;margin-bottom:16px;border-radius:50%;}
.editor__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.9);transition:filter 1s var(--ease);}
.editor:hover .editor__media img{filter:grayscale(0);}
.editor__name{font-family:var(--serif);font-size:19px;text-align:center;}
.editor__role{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);text-align:center;margin-top:6px;}
.stat-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stat{background:var(--ink);padding:46px 26px;text-align:center;}
.stat__num{font-family:var(--serif);font-size:clamp(40px,5vw,68px);font-weight:500;color:var(--paper);}
.stat__label{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);margin-top:12px;}

/* ============ SUBPAGE RESPONSIVE ============ */
@media(max-width:1024px){
  .profile__grid{grid-template-columns:1fr;}
  .venues{grid-template-columns:1fr;}
  .chef-grid{grid-template-columns:repeat(2,1fr);}
  .editors{grid-template-columns:repeat(2,1fr);}
  .values{grid-template-columns:1fr 1fr;}
  .value:nth-child(3n){border-right:1px solid var(--line);}
  .value:nth-child(2n){border-right:none;}
  .stat-band{grid-template-columns:1fr;}
}
@media(max-width:680px){
  .post-row{grid-template-columns:1fr;gap:14px;}
  .post-row__media{aspect-ratio:16/9;}
  .post-row__meta{text-align:left;}
  .facts{grid-template-columns:1fr;}
  .chef-grid{grid-template-columns:1fr;}
  .editors{grid-template-columns:1fr 1fr;}
  .values{grid-template-columns:1fr;}
  .value{border-right:none !important;}
  .lex-entry{grid-template-columns:auto 1fr;gap:14px;}
  .lex-entry__def{grid-column:1 / -1;}
  .article__body{font-size:16.5px;}
}

/* ============ タップ領域（WCAG 2.2 SC 2.5.8 Target Size Minimum = 24x24px）============
   2026-08-02: 390px 幅で高さが 24px に届かないリンクが3種あった。
     フッター下段のリンク 14px ／ パンくず 16.8px ／ .btn-line 18.4px
   余白を足すと行が動いてデザインが変わるので、透明な ::after を重ねて当たり判定だけ広げる。
   絶対配置なのでフローから外れ、レイアウトは1pxも変わらない。
   横には広げていないので、隣り合うリンクの当たり判定が重なることもない。 */
.footer__bottom a,
.crumbs a,
.btn-line{position:relative;}
.footer__bottom a::after,
.crumbs a::after,
.btn-line::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:24px;transform:translateY(-50%);
}

/* ===== SERIES NAV（街シリーズの前後リンク＋一覧・2026-08-09 回遊 fix 2）=====
   タグの見た目は既存の .tag をそのまま使う（新しい見た目を作らない）。
   一覧は順位に見えやすいので、見出しに "not a ranking" を必ず出す。 */
.series{max-width:720px;margin:clamp(44px,7vh,72px) auto 0;padding-top:clamp(28px,4vh,38px);
  border-top:1px solid var(--line);}
.series__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:20px;}
.series__eyebrow{font-family:var(--serif-2);font-size:19px;letter-spacing:.02em;color:var(--paper);}
.series__meta{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);}
.series__tags{display:flex;flex-wrap:wrap;gap:10px;}
.series__tags .tag.is-current{color:var(--paper);border-color:var(--paper);cursor:default;}
.series__pager{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);}
.series__step{display:block;max-width:48%;font-family:var(--serif-2);font-size:19px;
  color:var(--paper);transition:.35s var(--ease);}
.series__step span{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;}
.series__step:hover{color:var(--accent-sm);}
.series__step--next{margin-left:auto;text-align:right;}
@media (max-width:600px){
  .series__step{max-width:100%;}
  .series__step--next{text-align:left;margin-left:0;}
  .series__pager{gap:22px;}
}