/* ============================================================
   yoko eats the world — article page (mock 13 ja / 13-en → site/)
   Needs shared/base.css first. Japanese is the default set;
   html[lang="en"] switches to Latin typography.
   ============================================================ */
:root{--measure:680px; --toc-w:248px;}

.article-head{
  padding:calc(var(--header-h) + 28px) 20px 0;
  background:linear-gradient(180deg, var(--pink-pale) 0%, var(--white) 100%);
}
.article-head .inner{max-width:calc(var(--measure) + var(--toc-w) + 56px); margin:0 auto;}
.lang-note{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
  margin:0 0 16px; padding:10px 14px;
  border:1px solid var(--outline-variant); border-radius:var(--shape-md);
  background:var(--white);
  font-family:var(--font-serif); font-size:14px; color:var(--ink-soft);
}
.lang-note a{color:var(--primary); font-weight:600; display:inline-flex; align-items:center; min-height:32px;}
.article-title{
  font-family:var(--font-sans);
  font-weight:500;               /* same face as the body; 700 at this size reads as a different, blocky gothic */
  font-size:clamp(25px,3.6vw,34px);
  line-height:1.5;
  letter-spacing:.02em;
  margin:16px 0 14px;
  max-width:var(--measure);
}
.article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--ink-soft);
  margin:0 0 24px;
}
.article-meta .card-cat{text-decoration:none;}
.eyecatch{
  margin:0 auto;
  max-width:calc(var(--measure) + var(--toc-w) + 56px);
  padding:0 20px;
}
.eyecatch img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--shape-xl); box-shadow:var(--shadow-pink);}

/* ---------- layout: body + TOC (sidebar on wide screens) ---------- */
.article-layout{
  max-width:calc(var(--measure) + var(--toc-w) + 56px);
  margin:0 auto;
  padding:36px 20px 24px;
  display:grid;
  grid-template-columns:minmax(0, var(--measure)) var(--toc-w);
  grid-template-areas:"body toc";
  column-gap:56px;
  align-items:start;
}
.toc{grid-area:toc; position:sticky; top:calc(var(--header-h) + 20px);}
.prose{grid-area:body; min-width:0;}
@media (max-width:1060px){
  .article-layout{grid-template-columns:minmax(0, var(--measure)); grid-template-areas:"toc" "body"; justify-content:center;}
  .toc{position:static; margin-bottom:28px;}
}

/* ---------- table of contents ---------- */
.toc details{
  border:1px solid var(--outline-variant);
  border-radius:var(--shape-lg);
  background:var(--white);
  padding:4px 18px 14px;
}
.toc details:not([open]){padding-bottom:4px;}
.toc summary{
  display:flex; align-items:center; justify-content:space-between;
  min-height:48px; cursor:pointer; list-style:none;
  font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  border-radius:var(--shape-sm);
}
.toc summary::-webkit-details-marker{display:none;}
.toc summary::after{content:"+"; font-size:18px; line-height:1; color:var(--primary);}
.toc details[open] summary::after{content:"\2212";}
.toc summary:focus-visible{outline:3px solid var(--primary); outline-offset:2px;}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc;}
.toc li{counter-increment:toc;}
.toc ol ol{padding-left:18px; counter-reset:none;}
.toc ol ol li{counter-increment:none;}
.toc a{
  display:flex; gap:8px; align-items:flex-start;
  padding:7px 8px; margin:0 -8px; border-radius:var(--shape-sm);
  font-size:14px; line-height:1.5; color:var(--ink-soft); text-decoration:none;
}
.toc > details > ol > li > a::before{content:counter(toc, decimal-leading-zero); font-family:var(--font-mono); font-size:11px; color:var(--primary); padding-top:3px;}
.toc ol ol a{font-size:13px;}
.toc a:hover{background:var(--pink-pale); color:var(--ink);}
.toc a.is-current{color:var(--ink); font-weight:700; background:var(--pink-pale);}

/* ---------- prose (Japanese default) ---------- */
.prose{font-family:var(--font-sans); font-size:17px; line-height:1.95; color:var(--ink); letter-spacing:.02em;}
.prose > *{margin:0 0 1.2em;}
.prose h2{
  position:relative;
  margin:2.6em 0 1em;
  padding:0 0 0 18px;
  font-size:clamp(21px,2.6vw,25px);
  line-height:1.5;
  font-weight:700;
  scroll-margin-top:calc(var(--header-h) + 16px);
}
.prose h2::before{content:""; position:absolute; left:0; top:.25em; bottom:.25em; width:5px; border-radius:3px; background:var(--pink);}
.prose h3{
  margin:2em 0 .8em;
  padding-bottom:8px;
  border-bottom:1px solid var(--outline-variant);
  font-size:19px;
  line-height:1.55;
  font-weight:700;
  scroll-margin-top:calc(var(--header-h) + 16px);
}
.prose h4{margin:1.6em 0 .5em; font-size:17px; font-weight:700;}
.prose h4 .rank{display:inline-flex; align-items:center; height:24px; padding:0 8px; margin-right:8px; border-radius:var(--shape-sm); background:var(--ink); color:var(--white); font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; vertical-align:2px;}
.prose h4 .price{font-family:var(--font-mono); font-size:13px; font-weight:400; color:var(--ink-soft); margin-left:6px;}
.prose a{color:var(--primary); text-underline-offset:3px;}
.prose a.btn,.prose a.cta-item{color:var(--ink); text-decoration:none;}   /* primary-on-pink would be ~2:1 */
.prose strong{font-weight:700; background:linear-gradient(transparent 62%, var(--pink-light) 62%);}
.prose figure{margin:1.6em 0;}
.prose figure img{width:100%; height:auto; border-radius:var(--shape-lg);}
.prose figcaption{margin-top:8px; font-size:13px; line-height:1.6; color:var(--ink-soft); text-align:center;}
.prose ul,.prose ol{padding-left:1.4em;}
.prose li{margin:.35em 0;}
.prose li::marker{color:var(--primary); font-weight:700;}
.prose blockquote{
  margin:2em 0;
  padding:20px 24px;
  border-radius:var(--shape-lg);
  background:var(--pink-pale);
  font-size:18px;
  line-height:1.8;
  position:relative;
}
.prose blockquote::before{content:"\201C"; position:absolute; left:14px; top:-14px; font-family:var(--font-display); font-size:64px; line-height:1; color:var(--pink);}
.prose blockquote p{margin:0;}
.note{
  padding:14px 18px; border-left:4px solid var(--primary); border-radius:0 var(--shape-md) var(--shape-md) 0;
  background:#FDF6F8; font-size:15px; line-height:1.8;
}

/* ---------- shop info box ---------- */
.shop-info{
  margin:2em 0;
  border:1px solid var(--outline-variant);
  border-radius:var(--shape-lg);
  overflow:hidden;
  background:var(--white);
  box-shadow:var(--shadow-pink);
}
.shop-info h3{
  margin:0; padding:14px 20px; border:0;
  background:var(--ink); color:var(--white);
  font-size:17px; line-height:1.5;
}
.shop-info h3 small{display:block; font-family:var(--font-mono); font-size:11px; font-weight:400; letter-spacing:.06em; opacity:.85;}
.shop-info dl{margin:0; padding:8px 20px 4px; display:grid; grid-template-columns:7em 1fr; font-size:15px; line-height:1.7;}
.shop-info dt,.shop-info dd{margin:0; padding:10px 0; border-bottom:1px dashed var(--outline-variant);}
.shop-info dt{font-weight:700; color:var(--ink-soft);}
.shop-info dl > :nth-last-child(-n+2){border-bottom:0;}
.shop-info .actions{display:flex; flex-wrap:wrap; gap:10px; padding:4px 20px 18px;}
.shop-info .asof{padding:0 20px 16px; margin:0; font-size:12px; color:var(--ink-soft);}
@media (max-width:480px){
  .shop-info dl{grid-template-columns:1fr;}
  .shop-info dt{padding-bottom:0; border-bottom:0;}
}

/* ---------- ad slots: reserved height (no layout shift), labelled, never sticky/fullscreen ---------- */
.ad-slot{
  margin:2.4em 0;
  padding:10px 12px 12px;
  border:1px solid var(--outline-variant);
  border-radius:var(--shape-lg);
  background:#FCF8F9;
  text-align:center;
}
.ad-slot .ad-label{
  display:block; margin-bottom:8px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.ad-slot .ad-box{
  min-height:280px;                /* 336x280 / responsive display unit; the ad loads INTO this box */
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--shape-md);
  background:repeating-linear-gradient(135deg, #F7EEF0 0 12px, #FBF5F6 12px 24px);
  font-family:var(--font-mono); font-size:11px; color:var(--ink-soft);
  overflow:hidden;
}
@media (max-width:480px){ .ad-slot .ad-box{min-height:250px;} }

/* ---------- CTA (guide / itinerary review) ---------- */
.cta{
  margin:2.4em 0 0;
  padding:22px 22px 20px;
  border-radius:var(--shape-xl);
  background:var(--pink-pale);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.cta > p{grid-column:1 / -1; margin:0; font-size:15px; line-height:1.7;}
.cta-item{
  position:relative;
  display:flex; flex-direction:column; gap:4px;
  padding:14px 16px;
  border-radius:var(--shape-lg);
  background:var(--white);
  border:1px solid var(--outline-variant);
  text-decoration:none; color:var(--ink);
  transition:box-shadow var(--dur-medium) var(--ease-standard);
}
.cta-item:hover{box-shadow:var(--shadow-pink-lg);}
.cta-item .k{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--primary);}
.cta-item .t{font-weight:700; font-size:16px; line-height:1.5;}
.cta-item .d{font-size:13px; line-height:1.6; color:var(--ink-soft);}
.cta-item .go{margin-top:4px; font-family:var(--font-mono); font-size:12px; color:var(--ink);}
@media (max-width:600px){ .cta{grid-template-columns:1fr;} }

/* ---------- author ---------- */
.author{
  margin:2.4em 0 0;
  display:flex; gap:16px; align-items:center;
  padding:18px 20px; border-radius:var(--shape-lg);
  background:var(--ink); color:var(--white);
}
.author .avatar{flex:0 0 56px; height:56px; border-radius:50%; background:var(--pink); color:var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:24px;}
.author p{margin:0; font-size:14px; line-height:1.7; color:#E8ECF1;}
.author strong{color:var(--white); background:none;}
.author a{color:var(--pink-light);}
.author a:focus-visible{outline-color:#fff;}

/* ---------- related ---------- */
.related{padding:24px 20px 72px; background:linear-gradient(180deg, var(--white) 0%, var(--pink-pale) 100%);}
.related .section-head{margin-bottom:24px;}
.related .article-grid{grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); max-width:980px;}
.related .back-to-cat{display:flex; justify-content:center; margin-top:32px;}

/* reading progress bar (decorative) */
.progress{position:fixed; left:0; top:0; height:3px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:var(--pink); z-index:1001; pointer-events:none;}
@media (prefers-reduced-motion: reduce){ .progress{display:none;} }

/* ============================================================
   English typography (html[lang="en"])
   Latin text sets tighter than Japanese: shorter line-height,
   no tracking, serif body, larger display headings.
   ============================================================ */
html[lang="en"] .article-title{
  font-family:var(--font-display);
  font-weight:700;               /* keep the English display title as before */
  font-size:clamp(34px,5vw,52px);
  line-height:1.12;
  letter-spacing:0;
  margin:14px 0 16px;
}
html[lang="en"] .prose{
  font-family:var(--font-serif);
  font-size:18px;
  line-height:1.7;
  letter-spacing:0;
}
html[lang="en"] .prose > *{margin-bottom:1em;}
html[lang="en"] .prose h2{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(24px,3vw,30px);
  line-height:1.25;
  margin:2.2em 0 .7em;
}
html[lang="en"] .prose h2::before{top:.15em; bottom:.15em;}
html[lang="en"] .prose h3{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:21px;
  line-height:1.35;
  margin:1.8em 0 .6em;
}
html[lang="en"] .prose h4{font-family:var(--font-sans); font-size:17px; line-height:1.4;}
html[lang="en"] .prose blockquote{font-size:20px; line-height:1.5; font-style:italic;}
html[lang="en"] .prose figcaption{font-family:var(--font-sans); font-size:13px; line-height:1.5;}
html[lang="en"] .note{font-family:var(--font-sans); font-size:15px; line-height:1.6;}
html[lang="en"] .shop-info dl{grid-template-columns:8.5em 1fr; font-family:var(--font-sans); font-size:15px; line-height:1.55;}
html[lang="en"] .toc a{font-family:var(--font-sans); line-height:1.4;}
html[lang="en"] .cta,html[lang="en"] .author p{font-family:var(--font-sans);}
@media (max-width:480px){
  html[lang="en"] .prose{font-size:17px;}
  html[lang="en"] .shop-info dl{grid-template-columns:1fr;}
}

/* link between a legacy post's Japanese original and its English translation (the only language link on the site) */
.orig-note{
  margin:0 0 36px;               /* breathing room before the eyecatch photo */
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
}
.orig-note a{color:var(--primary); font-weight:500; white-space:nowrap;}

/* ================================================================
   Legacy post bodies (WordPress / STORK era). Appended to article.css by build/build.py.
   Restyles the old editor blocks in the site palette instead of the old theme.
   ================================================================ */
.prose img{max-width:100%; height:auto; border-radius:var(--shape-md);}
.prose p > img, .prose a > img{display:block; margin:1.2em auto;}
.prose .aligncenter{margin-left:auto; margin-right:auto;}
.prose .has-text-align-center{text-align:center;}
.prose .pink, .prose .sme-highlighter{font-weight:700; background:linear-gradient(transparent 62%, var(--pink-light) 62%);}
.prose .rmarker{background:linear-gradient(transparent 62%, var(--pink-light) 62%);}
.prose iframe{display:block; max-width:100%; margin:1.4em auto; border:0; border-radius:var(--shape-md);}
.prose iframe[src*="youtube"]{width:100%; height:auto; aspect-ratio:16/9;}
.prose iframe[src*="google.com/maps"]{width:100%; height:320px;}
.prose table{width:100%; border-collapse:collapse; font-size:15px; margin:1.4em 0; display:block; overflow-x:auto;}
.prose th, .prose td{border:1px solid var(--outline-variant); padding:8px 10px; text-align:left; vertical-align:top;}
.prose th{background:var(--pink-pale);}

/* image galleries */
.prose .wp-block-gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap:10px; margin:1.6em 0; padding:0; list-style:none;}
.prose .wp-block-gallery figure{margin:0;}
.prose .wp-block-gallery img{width:100%; height:100%; aspect-ratio:1; object-fit:cover; margin:0;}
.prose .wp-block-gallery figcaption{font-size:12px;}
.prose .wp-block-image{margin:1.6em 0;}
.prose .wp-block-image figcaption{margin-top:8px; font-size:13px; color:var(--ink-soft); text-align:center;}

/* boxed notes (STORK c_box) */
.prose .c_box{position:relative; margin:2em 0 1.4em; padding:22px 20px 16px; border:1px solid var(--outline-variant); border-radius:var(--shape-lg); background:var(--pink-pale); font-size:15px; line-height:1.85;}
.prose .c_box .box_title{position:absolute; top:-13px; left:16px; padding:2px 12px; border-radius:var(--shape-full); background:var(--ink); color:var(--white); font-size:12px; font-weight:700; line-height:1.6;}
.prose .c_box > *:last-child{margin-bottom:0;}

/* "related post" cards embedded in the text */
.prose .related_article{margin:1.6em 0;}
.prose .related_article a{display:flex; gap:14px; align-items:center; padding:10px; border:1px solid var(--outline-variant); border-radius:var(--shape-lg); background:var(--white); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-pink);}
.prose .related_article figure{flex:0 0 120px; margin:0;}
.prose .related_article img{width:120px; height:80px; object-fit:cover; margin:0; border-radius:var(--shape-md);}
.prose .related_article .meta{min-width:0;}
.prose .related_article .ttl{margin:0; font-size:15px; font-weight:700; line-height:1.5;}
.prose .related_article .date{display:block; margin-top:4px; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft);}
.prose .related_article .date::before{content:"関連記事 · "; font-family:var(--font-sans);}

/* affiliate product boxes (Rinker / Kaereba / Tomareba) */
.prose .yyi-rinker-contents, .prose .cstmreba{margin:1.6em 0; padding:16px; border:1px solid var(--outline-variant); border-radius:var(--shape-lg); background:var(--white); font-size:14px; line-height:1.6;}
.prose .yyi-rinker-box, .prose .kaerebalink-box, .prose .tomarebalink-box{display:flex; gap:16px; align-items:flex-start;}
.prose .yyi-rinker-image, .prose .kaerebalink-image, .prose .tomarebalink-image{flex:0 0 96px; text-align:center;}
.prose .yyi-rinker-image img, .prose .kaerebalink-image img, .prose .tomarebalink-image img{max-width:96px; max-height:120px; width:auto; margin:0 auto; border-radius:var(--shape-sm);}
.prose .yyi-rinker-info, .prose .kaerebalink-info, .prose .tomarebalink-info{min-width:0; flex:1;}
.prose .yyi-rinker-title a, .prose .kaerebalink-name a, .prose .tomarebalink-name a{color:var(--ink); font-weight:700; text-decoration:none;}
.prose .yyi-rinker-detail, .prose .kaerebalink-powered-date, .prose .tomarebalink-powered-date, .prose .credit-box, .prose .price-box{font-size:11px; color:var(--ink-soft);}
.prose .yyi-rinker-links, .prose .kaerebalink-link1, .prose .tomarebalink-link1{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:0; list-style:none;}
.prose .yyi-rinker-links li, .prose .kaerebalink-link1 > div, .prose .tomarebalink-link1 > div{margin:0;}
.prose .yyi-rinker-links a, .prose .kaerebalink-link1 a, .prose .tomarebalink-link1 a{display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:var(--shape-full); background:var(--pink-light); color:var(--ink); font-size:12px; font-weight:700; text-decoration:none;}
.prose .yyi-rinker-links img, .prose .kaerebalink-link1 img, .prose .tomarebalink-link1 img{display:inline; margin:0;}
.prose img[width="1"][height="1"]{display:inline; width:1px; height:1px; margin:0;}   /* affiliate tracking pixels */
.prose .booklink-footer{display:none;}
@media (max-width:520px){
  .prose .yyi-rinker-box, .prose .kaerebalink-box, .prose .tomarebalink-box{flex-direction:column; align-items:center; text-align:center;}
  .prose .yyi-rinker-links, .prose .kaerebalink-link1, .prose .tomarebalink-link1{justify-content:center;}
}

/* tweets embedded as quotes (the Twitter script is not loaded) */
.prose blockquote.twitter-tweet{font-size:15px; font-style:normal;}
.prose blockquote.twitter-tweet a{word-break:break-all;}