/*
Theme Name: Bring Japanese Cooking to Your Home
Theme URI: https://example.com/
Author: -
Description: Japanese home-cooking recipe site for Singapore. Recipes, class schedule and venue are all editable from the WordPress admin.
Version: 4.6.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: bjc
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700;900&display=swap');

/* ============================================================
   Bring Japanese Cooking to Your Home

   Proportional reproduction of the source design.
   PC design canvas : 1920 px wide   ->  1rem = 10 design px
   SP design canvas :  750 px wide   ->  1rem = 10 design px
   Every size below is written as (design px / 10) rem, so the
   whole page scales exactly like the original comp at any width.

   Serif : Noto Serif JP 900     Sans : Noto Sans JP 400-500
   Coral : #EC7978   Navy : #003856   Pink : #FCEBEA
   ============================================================ */

html{
  font-size:clamp(4px, calc(100vw / 192), 10px);
  scroll-behavior:smooth;
}

:root{
  --coral:#EC7978;
  --coral-hover:#e4605f;
  --navy:#003856;
  --pink:#FCEBEA;
  --rule:#9FB4C0;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Noto Sans JP',sans-serif;
  font-weight:300;
  color:var(--navy);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
main{position:relative;}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
h1,h2,h3{font-family:'Noto Serif JP',serif;font-weight:900;line-height:1.3;}

/* ---------------- Header (94 tall) ---------------- */
.site-header{
  /* sticky, not fixed: the header keeps its place in the flow, so nothing
     below it needs a hand-calculated top margin to compensate. That manual
     offset was what left a gap under the header. */
  position:sticky;top:0;z-index:500;
  height:9.4rem;background:#fff;
  /* matches the drop shadow in the comp: ~14 design px deep, peak alpha .27 */
  box-shadow:0 .2rem 1.4rem rgba(0,0,0,.22);
}
.header-inner{
  height:100%;padding:0 8.4rem;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{text-align:center;line-height:1.14;}
.logo .l1{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:'Noto Serif JP',serif;font-weight:900;
  color:var(--coral);font-size:2.64rem;
}
.logo .l2{
  display:block;font-family:'Noto Serif JP',serif;font-weight:900;
  color:var(--coral);font-size:2.05rem;
}
.logo .sp-mark{width:2.4rem;height:auto;flex-shrink:0;}
.logo .sp-mark.r{width:2.4rem;}

.main-nav ul{display:flex;align-items:center;gap:5.4rem;}
.main-nav a{
  font-family:'Noto Serif JP',serif;font-weight:900;
  font-size:2.4rem;color:var(--navy);transition:color .2s;
}
.main-nav a:hover{color:var(--coral);}

.hamburger{
  display:none;width:5.6rem;height:3.6rem;
  flex-direction:column;justify-content:space-between;
}
.hamburger span{display:block;height:.5rem;width:100%;background:var(--navy);border-radius:.3rem;}

/* ---------------- Mobile menu ---------------- */
.mobile-menu{
  position:fixed;inset:0;z-index:900;background:#fff;
  opacity:0;visibility:hidden;transition:opacity .3s ease;overflow-y:auto;
}
.mobile-menu.open{opacity:1;visibility:visible;}
.mobile-menu-close{position:absolute;top:4.4rem;right:5rem;width:6.4rem;height:6.4rem;}
.mobile-menu-close::before,.mobile-menu-close::after{
  content:"";position:absolute;left:0;top:3rem;width:6.4rem;height:.5rem;background:var(--navy);
}
.mobile-menu-close::before{transform:rotate(45deg);}
.mobile-menu-close::after{transform:rotate(-45deg);}
.mobile-menu-inner{min-height:100%;display:flex;flex-direction:column;padding:15rem 5rem 0;}
.mobile-menu-logo{text-align:center;margin-bottom:8rem;}
.mobile-menu-logo .l1{
  display:flex;align-items:center;justify-content:center;gap:1.4rem;
  font-family:'Noto Serif JP',serif;font-weight:900;color:var(--coral);
  font-size:5.4rem;line-height:1.2;
}
.mobile-menu-logo .l2{
  display:block;font-family:'Noto Serif JP',serif;font-weight:900;
  color:var(--coral);font-size:3.9rem;
}
.mobile-menu-logo .sp-mark{width:5.2rem;height:auto;flex-shrink:0;}
.mobile-menu-logo .sp-mark.r{width:5.2rem;}
.mobile-menu-list li{border-bottom:.5rem dotted #F3B9B4;}
.mobile-menu-list li + li{margin-top:6rem;}
.mobile-menu-list a{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Noto Serif JP',serif;font-weight:900;
  font-size:5.2rem;color:var(--navy);padding-bottom:2.8rem;
}
.arrow-circle{
  width:7.2rem;height:7.2rem;border-radius:50%;background:var(--coral);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.arrow-circle svg{width:2.6rem;height:2.6rem;stroke:#fff;stroke-width:2.6;fill:none;}
.mobile-menu-tools{margin-top:auto;padding-top:8rem;}
.mobile-menu-tools img{width:100%;}

/* ---------------- Hero ---------------- */
.hero{position:relative;}
.hero-bg{width:100%;height:auto;}
.hero-bg.sp-only{display:none;}
.hero-title{
  position:absolute;top:6.8rem;left:0;right:0;
  text-align:center;color:var(--coral);pointer-events:none;
}
.hero-title .t1{
  display:block;font-family:'Noto Serif JP',serif;font-weight:900;
  font-size:8.34rem;line-height:1.08;
}
.hero-title .t2{
  display:block;font-family:'Noto Serif JP',serif;font-weight:900;
  font-size:6.48rem;line-height:1.1;margin-top:.5rem;
}

/* ---------------- TOP button ---------------- */
.top-btn{
  width:15.2rem;height:15.2rem;border-radius:50%;background:var(--coral);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.2rem;color:#fff;transition:background .2s,transform .2s;
}
.top-btn:hover{background:var(--coral-hover);transform:translateY(-.5rem);}
.top-btn svg{width:4.2rem;height:2.2rem;stroke:#fff;stroke-width:2.2;fill:none;}
.top-btn span{font-family:'Noto Serif JP',serif;font-weight:900;font-size:5rem;line-height:1;}

/* the page-following button is the only TOP button */
.top-btn-fixed{
  position:fixed;right:7.45%;bottom:6rem;z-index:450;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease,background .2s,transform .2s;
}
.top-btn-fixed.show{opacity:1;visibility:visible;}

/* The header sticks to the top, so anchor targets have to clear it — otherwise
   the heading you jumped to ends up hidden behind the bar.
   Target: the heading lands 3rem below the 9.4rem header, i.e. 12.4rem down.
   Each section's own padding-top is subtracted so the heading — not the empty
   padding above it — is what ends up in that spot. */
#top,#reservation,#nextclass{scroll-margin-top:12.4rem;}
#about  {scroll-margin-top:7.05rem;}  /* .lead adds 5.35rem */
#recipe {scroll-margin-top:.68rem;}   /* section adds 11.72rem of padding */
#mission{scroll-margin-top:10.4rem;}  /* its h2 adds 2rem */

/* ---------------- Lead / Explore ---------------- */
.lead{text-align:center;padding-top:5.35rem;}
.lead h2{font-size:5rem;margin-bottom:3.45rem;}
.lead p,.explore p,.recipe-lead,.mission p{
  font-size:2.3rem;font-weight:500;line-height:4.3rem;
}
.explore{text-align:center;padding-top:7.52rem;}
.explore h2{font-size:5rem;margin-bottom:3.45rem;}

/* the comp breaks these paragraphs differently on PC and SP */
.txt-pc{display:inline;}
.txt-sp{display:none;}

/* ---------------- Recipe ---------------- */
/* overflow keeps a decoration from spilling onto the wave / mission below */
.recipe-section{padding-top:11.72rem;overflow:hidden;}
.section-heading{
  display:flex;align-items:center;justify-content:center;gap:3.3rem;
  width:120.1rem;max-width:calc(100% - 8rem);margin:0 auto 3rem;
  font-size:5rem;
}
/* the rules run out to the edges of the content column */
.section-heading::before,.section-heading::after{
  content:"";display:block;flex:1;height:1px;background:var(--coral);
}
.recipe-lead{text-align:center;margin-bottom:5rem;}

.recipe-grid{
  width:120.1rem;max-width:calc(100% - 8rem);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:4.7rem;row-gap:7.8rem;
}
.recipe-card{display:block;transition:opacity .2s;}
.recipe-card:hover{opacity:.82;}
.recipe-card .thumb{
  display:block;width:100%;aspect-ratio:369 / 221;overflow:hidden;
}
.recipe-card .thumb img{width:100%;height:100%;object-fit:cover;}
.recipe-card h3{
  font-family:'Noto Sans JP',sans-serif;font-weight:500;
  font-size:2.7rem;color:var(--navy);text-align:center;
  margin:0;line-height:1.12;
  min-height:7.4rem;
  display:flex;align-items:center;justify-content:center;
}
.recipe-meta{display:flex;align-items:center;justify-content:space-between;}
.recipe-meta .m{display:flex;align-items:center;gap:.6rem;padding:0;}
.recipe-meta img{width:3.4rem;height:3.5rem;object-fit:contain;flex-shrink:0;}
.recipe-meta .txt{
  font-size:1.18rem;font-weight:500;line-height:1.35;
  color:var(--navy);white-space:nowrap;
}
.recipe-meta .txt b{display:block;font-weight:700;}

.pagination{
  display:flex;align-items:center;justify-content:center;gap:2.6rem;
  margin-top:16rem;
}
.pagination button,.pagination a,.pagination span{
  display:flex;align-items:center;justify-content:center;
  font-family:'Noto Sans JP',sans-serif;font-weight:500;
  font-size:2.8rem;color:var(--navy);text-decoration:none;
  height:4.4rem;transition:color .2s;
}
/* the comp leaves a wider gap either side of the brackets than between digits */
.pagination .page-arrow{margin:0 .43rem;}
.pagination button:hover,.pagination a:hover,
.pagination .active,.pagination .current{color:var(--coral);}
.pagination .page-arrow{color:var(--navy);}
.pagination .dots{color:var(--rule);}

.yt-banner-wrap{
  width:120.1rem;max-width:calc(100% - 8rem);margin:8rem auto 0;
}
.yt-banner{display:block;transition:opacity .2s;}
.yt-banner:hover{opacity:.85;}
.yt-banner img{width:100%;height:auto;display:block;}

/* ---------------- Deco line-art ----------------
   positioned against <main>, using the comp coordinates
   (page y minus the 94 px header)                        */
.deco{position:absolute;pointer-events:none;user-select:none;z-index:0;}
/* cards sit above the line-art so a decoration never covers a photo */
.recipe-card,.recipe-grid,.detail-hero,.video-box,.step-img,.next-class{position:relative;z-index:1;}
.deco img{width:100%;}

/* Deco line-art.
   Anchored to the section it sits beside — absolute offsets from the top of
   the page drift as soon as any block reflows, which is what pushed these
   on top of the copy before. Horizontal values are measured from the centre
   line so they stay clear of the 120.1rem grid. */
.explore       {position:relative;}
.recipe-section{position:relative;}

.home .explore .deco-chopsticks{top:9.2rem;   left:calc(50% - 74.2rem); width:9.4rem;}
.home .recipe-section .deco-can    {top:21.8rem;  left:calc(50% + 78.1rem); width:6.3rem;}
.home .recipe-section .deco-spatula{top:65rem;    left:calc(50% - 87.4rem); width:11.8rem;}
.home .recipe-section .deco-bowl   {top:116.8rem; left:calc(50% + 69.3rem); width:9.5rem;}
.home .recipe-section .deco-whisk  {top:160rem;   left:calc(50% - 77.2rem); width:9.5rem;}
.home .recipe-section .deco-cup    {top:185rem;   left:calc(50% + 70.3rem); width:8.6rem;}

/* recipe detail page */
.detail-main .deco-knife     {top:108.6rem; left:calc(50% - 75.1rem); width:15rem;}
.detail-main .deco-can       {top:194.4rem; left:calc(50% - 77.2rem); width:6.3rem;}
.detail-main .deco-bowl      {top:293.3rem; left:calc(50% - 84.4rem); width:9.6rem;}
.detail-main .deco-cup       {top:403.2rem; left:calc(50% - 78.3rem); width:8.5rem;}
.detail-main .deco-chopsticks{top:147.8rem; left:calc(50% + 63.5rem); width:9.3rem;}
.detail-main .deco-spatula   {top:261.3rem; left:calc(50% + 70.7rem); width:11.7rem;}
.detail-main .deco-whisk     {top:361.3rem; left:calc(50% + 71.9rem); width:9.4rem;}

/* ---------------- Wave divider ---------------- */
.wave-divider{margin-top:12.5rem;}
.wave-divider img{width:100%;}

/* ---------------- Mission ---------------- */
.mission{background:var(--pink);text-align:center;padding:0 4rem 9rem;margin-top:-1px;}
.mission h2{font-size:5rem;padding-top:2rem;margin-bottom:2.6rem;}

.btn-reserve,.btn-back{
  display:flex;align-items:center;justify-content:center;
  width:78rem;max-width:100%;height:7.7rem;border-radius:3.9rem;
  background:var(--coral);color:#fff;
  font-family:'Noto Serif JP',serif;font-weight:900;font-size:4rem;
  transition:background .2s,transform .2s;
}
.btn-reserve{margin:8.4rem auto 0;}
.btn-reserve:hover,.btn-back:hover{background:var(--coral-hover);transform:translateY(-.3rem);}

.next-class{
  width:138.1rem;max-width:100%;margin:8rem auto 0;
  background:#fff;
  border:.2rem solid var(--coral);border-radius:3rem;
  padding:5.6rem 6rem 5rem;text-align:center;
}
.next-class h3{font-size:4.5rem;margin-bottom:3.4rem;}
.nc-time{font-size:3rem;font-weight:500;margin-bottom:2rem;}
.nc-time .t{margin-left:1.4rem;}
.nc-dates{
  display:flex;align-items:baseline;justify-content:center;
  gap:1.6rem;margin-bottom:2.4rem;flex-wrap:wrap;
}
.nc-dates .yr{font-size:2.6rem;font-weight:400;margin-right:.6rem;}
.nc-dates .d{display:flex;align-items:baseline;gap:.7rem;}
.nc-dates .d .n{font-family:'Noto Serif JP',serif;font-weight:900;font-size:5.3rem;line-height:1;}
.nc-dates .d .m{font-size:3.71rem;font-weight:400;}
.nc-dates .sep{color:var(--rule);font-weight:200;font-size:4.4rem;line-height:1;}
.nc-must{font-size:3rem;font-weight:500;margin-bottom:4.4rem;}
.nc-body{display:flex;align-items:flex-start;gap:6.2rem;text-align:left;justify-content:center;}
.nc-map{width:52.5rem;height:26rem;border:1px solid #B9B9B9;background:#fff;flex-shrink:0;}
.nc-venue .label{font-size:3rem;font-weight:500;margin-bottom:.4rem;}
.nc-venue .name{font-size:4.1rem;font-weight:500;line-height:1.25;margin-bottom:1.4rem;}
.nc-venue .addr{font-size:2.3rem;font-weight:500;line-height:1.5;}

/* ---------------- Footer ---------------- */
.site-footer{background:#fff;padding:5rem 4rem 4.5rem;text-align:center;}
.site-footer img{width:65rem;height:auto;max-width:100%;margin:0 auto;}

/* ============================================================
   Recipe detail page
   ============================================================ */
.detail-main{position:relative;}
.detail-hero{width:120.1rem;max-width:calc(100% - 8rem);margin:11rem auto 0;}
.detail-hero img{width:100%;height:auto;aspect-ratio:1201 / 793;object-fit:cover;}
.detail-title{
  text-align:center;font-family:'Noto Serif JP',serif;font-weight:900;
  font-size:8rem;color:var(--navy);margin:10.3rem 0 0;line-height:1.15;
}
/* the Japanese name sits under the English title */
.detail-title-ja{
  display:block;text-align:center;
  font-family:'Noto Serif JP',serif;font-weight:900;
  font-size:3.5rem;color:var(--coral);margin:.6rem 0 4.6rem;
}

.video-box{width:39.4rem;max-width:calc(100% - 8rem);margin:0 auto;position:relative;cursor:pointer;
  overflow:hidden;}
.video-box img{width:100%;height:auto;}
.play-btn{
  position:absolute;inset:0;margin:auto;
  width:10.4rem;height:10.4rem;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
}
.play-btn::after{
  content:"";margin-left:.8rem;
  border-left:3.4rem solid var(--coral);
  border-top:2rem solid transparent;border-bottom:2rem solid transparent;
}

.info-bar{
  width:120.1rem;max-width:calc(100% - 8rem);margin:7rem auto 0;padding:3.2rem 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
}
.info-bar .m{display:flex;align-items:center;gap:1.2rem;padding:0 3.2rem;}
.info-bar img{width:5.9rem;height:6rem;object-fit:contain;}
.info-bar .txt{font-size:2.19rem;font-weight:500;line-height:1.35;white-space:nowrap;}
.info-bar .txt b{display:block;font-weight:700;}

.ingredients{width:120.1rem;max-width:calc(100% - 8rem);margin:18.2rem auto 0;}
.ingredients h2{font-size:5rem;margin-bottom:0;text-align:left;}
.ingredients-photo{width:63.1rem;max-width:100%;aspect-ratio:631 / 489;
  margin:8.7rem auto 15.3rem;}
.ingredients-photo img{width:100%;height:100%;object-fit:cover;}
.ing-table{width:100%;border-collapse:collapse;}
.ing-table tr{border-bottom:1px solid var(--rule);}
.ing-table tr:first-child{border-top:1px solid var(--rule);}
.ing-table tr.no-border{border-bottom:none;}
.ing-table td{padding:2.4rem .2rem;font-size:3rem;font-weight:500;}
.ing-table td:last-child{text-align:right;}
.ing-table .sub{font-size:2.19rem;display:block;margin-top:.6rem;font-weight:400;}
/* Footnote row (e.g. "*To make your own whipped cream..."): reads as a
   continuation of the row above (which has its own border suppressed via
   .no-border), and sits close underneath rather than getting a full row's
   worth of breathing room. */
.ing-table .ing-footnote{
  text-align:left;font-size:2.19rem;font-weight:400;color:var(--navy);
  padding-top:0;padding-bottom:2.4rem;
}

.how-to{width:120.1rem;max-width:calc(100% - 8rem);margin:16.5rem auto 0;}
.how-to .section-heading{margin-bottom:5rem;}
.step{display:flex;align-items:flex-start;gap:5rem;}
.step + .step{margin-top:9.9rem;}
.step-body{flex:1;display:flex;align-items:flex-start;gap:1.3rem;}
.step-head{display:flex;align-items:center;gap:1.8rem;flex-shrink:0;min-height:5.9rem;}
.step-num{
  width:5.9rem;height:5.9rem;border-radius:50%;background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;font-weight:500;flex-shrink:0;
}
/* "Optional" tip after the numbered steps (e.g. sesame seeds on top) —
   the label doesn't fit the round digit badge, so it gets a pill instead. */
.step-num-optional{
  width:auto;height:4.4rem;border-radius:2.2rem;padding:0 1.8rem;
  font-size:1.8rem;white-space:nowrap;
}
.step-title{font-size:3rem;font-weight:500;}
.step-desc{flex:1;font-size:3rem;font-weight:500;line-height:1.57;padding-top:.9rem;}
.step-img{width:32.5rem;flex-shrink:0;aspect-ratio:325 / 252;
  display:flex;gap:.4rem;overflow:hidden;}
.step-img img{flex:1 1 0;min-width:0;width:100%;height:100%;object-fit:cover;display:block;}


/* ---------------- Highlighted Japanese Ingredients ----------------
   Three product shots in a row, caption underneath. Comp: photos sit on the
   120.1rem column, roughly 25rem wide each, captions 2.7rem Medium.        */
.highlights{width:120.1rem;max-width:calc(100% - 8rem);margin:18.3rem auto 0;}
.highlights .section-heading{margin-bottom:8rem;}
.highlight-list{
  width:108.6rem;max-width:100%;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:2rem;row-gap:6rem;align-items:start;
}
/* One or two seasonings sit in the middle instead of hugging the left edge. */
.highlight-list[data-count="1"],
.highlight-list[data-count="2"]{
  display:flex;justify-content:center;align-items:flex-start;gap:2rem;
}
.highlight-list[data-count="1"] .highlight-item,
.highlight-list[data-count="2"] .highlight-item{
  width:calc((100% - 4rem) / 3);
}
.highlight-item{text-align:center;}
.highlight-item .shot{
  width:24.8rem;height:22.7rem;max-width:100%;margin:0 auto;
  display:flex;align-items:flex-end;justify-content:center;
}
.highlight-item .shot img{max-width:100%;max-height:100%;width:auto;height:auto;}
.highlight-item .caption{
  margin-top:2.9rem;font-size:2.7rem;font-weight:500;
  line-height:1.4;color:var(--navy);
}

/* ---------------- Where to buy ---------------- */
.where-to-buy{width:120.1rem;max-width:calc(100% - 8rem);margin:12.5rem auto 0;}
.where-to-buy .section-heading{margin-bottom:5.6rem;}
.shop-list{display:flex;flex-direction:column;gap:9.1rem;}
.shop{display:flex;align-items:flex-start;gap:1.4rem;}
.shop .pin{width:6rem;flex-shrink:0;margin-top:-.4rem;}
.shop .pin img{width:100%;height:auto;}
.shop .body{
  flex:1;font-size:3rem;font-weight:500;line-height:1.57;color:var(--navy);
}

.btn-back{margin:16rem auto 0;}
.detail-footer-sep{border-top:1px solid var(--rule);margin-top:8rem;}

/* ============================================================
   SP  —  design canvas 750 (= 375 css px @2x)
   ============================================================ */
@media (max-width:768px){
  html{font-size:min(calc(100vw / 75), 5.6px);}

  .main-nav{display:none;}
  .hamburger{display:flex;}
  .header-inner{padding:0 3.4rem;}
  /* SP: the comp centres the logo, with the hamburger pinned right */
  .header-inner{position:relative;justify-content:center;}
  .logo{position:static;}
  .hamburger{position:absolute;right:3.4rem;top:50%;transform:translateY(-50%);}

  .logo .l1{font-size:2.47rem;gap:.6rem;}
  .logo .l2{font-size:1.92rem;}
  .logo .sp-mark,.logo .sp-mark.r{width:2.6rem;}

  /* hero: SP artwork */
  .site-header{height:9.6rem;}
  .hero-bg.pc-only{display:none;}
  .hero-bg.sp-only{display:block;}
  .hero-title{top:4.2rem;}
  .hero-title .t1{font-size:4.74rem;}
  .hero-title .t2{font-size:3.68rem;margin-top:.4rem;}

  .top-btn{width:14.2rem;height:14.2rem;}
  .top-btn svg{width:3.9rem;height:2rem;}
  .top-btn span{font-size:3.98rem;}
  .top-btn-fixed{right:4.5rem;bottom:4.5rem;}
  /* SP header is 9.6rem tall */
  #top,#reservation,#nextclass{scroll-margin-top:12.6rem;}
  #about  {scroll-margin-top:10.6rem;}  /* .lead adds 2rem */
  #recipe {scroll-margin-top:0;}       /* section adds 12.7rem of padding */
  #mission{scroll-margin-top:10.6rem;}

  /* deco line-art — SP comp coordinates, section-relative */
  .home .explore .deco-chopsticks{top:-3.5rem;  right:calc(50% + 32.5rem); left:auto; width:7.8rem;}
  .home .recipe-section .deco-can    {top:0;        left:calc(50% + 32.5rem); width:6.0rem;}
  .home .recipe-section .deco-spatula{top:19.7rem;  right:calc(50% + 32.5rem); left:auto; width:7.5rem;}
  .home .recipe-section .deco-bowl   {top:99.8rem;  left:calc(50% + 32.5rem); width:7.5rem;}
  .home .recipe-section .deco-whisk  {top:171.1rem; right:calc(50% + 32.5rem); left:auto; width:6.2rem;}
  .home .recipe-section .deco-cup{display:none;}

  .detail-main .deco-knife     {top:96rem;  left:1.5rem;  right:auto; width:9rem;}
  .detail-main .deco-chopsticks{top:132rem; left:auto;    right:1rem; width:7rem;}
  .detail-main .deco-can       {top:172rem; left:1rem;    right:auto; width:5rem;}
  .detail-main .deco-spatula   {top:236rem; left:auto;    right:1rem; width:8rem;}
  .detail-main .deco-bowl      {top:268rem; left:1rem;    right:auto; width:9rem;}
  .detail-main .deco-whisk,
  .detail-main .deco-cup{display:none;}

  .lead{padding-top:2rem;}
  .lead h2{font-size:4rem;margin-bottom:2.9rem;}
  .explore{padding-top:9.07rem;}
  .explore h2{font-size:4rem;margin-bottom:2.9rem;}
  .lead p,.explore p,.recipe-lead,.mission p{font-size:2.3rem;line-height:4.3rem;}
  .txt-pc{display:none;}
  .txt-sp{display:inline;}

  .recipe-section{padding-top:12.7rem;}
  .section-heading{font-size:4.5rem;gap:2rem;}
  .section-heading::before,.section-heading::after{width:6rem;}
  .recipe-lead{margin-bottom:4rem;padding:0 5rem;}

  .recipe-grid{
    width:65rem;max-width:calc(100% - 10rem);
    grid-template-columns:repeat(2,1fr);
    column-gap:3rem;row-gap:5.9rem;
  }
  .recipe-card .thumb{aspect-ratio:310 / 221;}
  .recipe-card h3{font-size:2.5rem;margin:0;min-height:5.5rem;}
  .recipe-meta .m{padding:0;gap:.5rem;}
  .recipe-meta img{width:2.8rem;height:2.9rem;object-fit:contain;}
  .recipe-meta .txt{font-size:1rem;}
  .pagination{margin-top:5.5rem;gap:2rem;}
  .pagination button,.pagination a,.pagination span{font-size:2.6rem;}

  .wave-divider{margin-top:10rem;}
  .mission{padding:0 3rem 7rem;}
  .mission h2{font-size:4rem;margin-bottom:2.2rem;}
  .btn-reserve,.btn-back{width:62rem;height:7rem;border-radius:3.5rem;font-size:3.6rem;}
  .btn-reserve{margin-top:6.5rem;}

  .next-class{width:66rem;margin-top:6rem;padding:4.5rem 3.5rem 4rem;border-radius:2.6rem;}
  .next-class h3{font-size:4rem;margin-bottom:2.6rem;}
  .nc-time{font-size:2.6rem;margin-bottom:1.4rem;}
  .nc-time .t{display:block;margin:.4rem 0 0;}
  .nc-dates{gap:1.2rem;margin-bottom:1.8rem;}
  .nc-dates .yr{font-size:2.2rem;}
  .nc-dates .d .n{font-size:4.4rem;}
  .nc-dates .d .m{font-size:3rem;}
  .nc-dates .sep{font-size:3.6rem;}
  .nc-must{font-size:2.6rem;margin-bottom:3.4rem;}
  .nc-body{flex-direction:column;align-items:center;text-align:center;gap:2.4rem;}
  .nc-map{width:100%;height:24rem;}
  .nc-venue .label{font-size:2.6rem;}
  .nc-venue .name{font-size:3.6rem;}
  .nc-venue .addr{font-size:2.1rem;}
  .site-footer{padding:4.5rem 3rem;}
  .site-footer img{width:52rem;}

  /* ---- detail page ---- */

  .detail-hero{width:100%;max-width:100%;margin-top:0;}
  .detail-hero img{height:auto;aspect-ratio:750 / 440;}
  .detail-title{font-size:6rem;margin:4.5rem 0 3.5rem;}
  .video-box{width:34rem;max-width:calc(100% - 10rem);}
  .play-btn{width:9rem;height:9rem;}
  .play-btn::after{border-left-width:3rem;border-top-width:1.8rem;border-bottom-width:1.8rem;}
  .info-bar{width:65rem;max-width:calc(100% - 10rem);margin-top:5rem;padding:1.6rem 0;}
  .info-bar .m{padding:0 2.2rem;gap:.9rem;}
  .info-bar img{width:4.6rem;height:4.7rem;object-fit:contain;}
  .info-bar .txt{font-size:1.67rem;}
  .ingredients{width:65rem;max-width:calc(100% - 10rem);margin-top:5.5rem;}
  .ingredients h2{font-size:4rem;margin-bottom:2.4rem;}
  .ing-table td{font-size:2.4rem;padding:1.4rem .4rem;}
  .ing-table .sub{font-size:1.84rem;display:block;}
  .how-to{width:65rem;max-width:calc(100% - 10rem);margin-top:7rem;}
  .how-to .section-heading::before,.how-to .section-heading::after{width:6rem;}
  .step{flex-direction:column;gap:2rem;}
  .step + .step{margin-top:5rem;}
  .step-img{width:100%;order:-1;aspect-ratio:16 / 10;gap:.4rem;}
  .step-head{gap:1.4rem;margin-bottom:1.2rem;}
  .step-num{width:4.4rem;height:4.4rem;font-size:2.4rem;}
  .step-title{font-size:2.8rem;}
  .step-desc{font-size:2.2rem;padding-top:.6rem;}

  /* Highlighted / Where to buy */
  .highlights{width:65rem;max-width:calc(100% - 10rem);margin-top:12rem;}
  .highlights .section-heading{margin-bottom:5rem;}
  .highlight-list{width:100%;column-gap:1.6rem;row-gap:4rem;}
  .highlight-list[data-count="1"],.highlight-list[data-count="2"]{gap:1.6rem;}
  .highlight-list[data-count="1"] .highlight-item,
  .highlight-list[data-count="2"] .highlight-item{width:calc((100% - 3.2rem) / 3);}
  .highlight-item .shot{width:13.8rem;height:12.6rem;}
  .highlight-item .caption{margin-top:1.8rem;font-size:2.1rem;}
  .where-to-buy{width:65rem;max-width:calc(100% - 10rem);margin-top:9rem;}
  .where-to-buy .section-heading{margin-bottom:3.6rem;}
  .shop-list{gap:5.4rem;}
  .shop{gap:1.2rem;}
  .shop .pin{width:4.6rem;}
  .shop .body{font-size:2.3rem;}
  .detail-title{font-size:6rem;margin:6rem 0 0;}
  .detail-title-ja{font-size:2.9rem;margin:.5rem 0 3.4rem;}
  .ingredients{width:65rem;max-width:calc(100% - 10rem);margin-top:10rem;}
  .ingredients-photo{width:100%;margin:4.6rem auto 7rem;}
  .how-to{width:65rem;max-width:calc(100% - 10rem);margin-top:9rem;}
  .step-num{width:4.8rem;height:4.8rem;font-size:2.6rem;}
  .step-desc{font-size:2.4rem;padding-top:.7rem;}
  .info-bar .txt{font-size:1.9rem;}
  .btn-back{margin-top:10rem;}
  .detail-footer-sep{margin-top:6rem;}
}

/* ============================================================
   WordPress additions
   ============================================================ */
.nc-map{overflow:hidden;}
.nc-map iframe{width:100%;height:100%;border:0;display:block;}

.video-box .video-embed{position:relative;width:100%;}
.video-box .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-box video{width:100%;display:block;}
.video-box.playing .play-btn{display:none;}

.thumb-placeholder,.detail-hero .thumb-placeholder{
  width:100%;height:100%;background:var(--pink);
  display:flex;align-items:center;justify-content:center;
  color:var(--coral);font-size:2rem;
}
.detail-hero .thumb-placeholder{aspect-ratio:1201 / 793;}

.no-recipes{text-align:center;font-size:2.3rem;font-weight:400;padding:6rem 4rem;}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:1rem;left:1rem;z-index:999;width:auto;height:auto;
  clip:auto;background:#fff;color:var(--navy);padding:1rem 2rem;font-size:1.6rem;
}
/* The fixed header has to sit under the WordPress admin bar — but only while
   the bar is actually pinned. Core switches #wpadminbar to position:absolute
   at 600px and below, so there it scrolls away and the header belongs at 0.
   Without this last rule a 46px gap opens at the top of the screen and the
   page content shows through it. */
body.admin-bar .site-header{top:32px;}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px;}}
@media screen and (max-width:600px){body.admin-bar .site-header{top:0;}}