@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Pinyon+Script&family=Shippori+Mincho:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&family=Jost:wght@300;400;500&display=swap');

:root{
  /* graphite (cool dark accents — feature bands, footer) */
  --noir:#1A1A1E;--ink:#23232A;
  /* whites — low-chroma, from the white swatch chart */
  --white:#FCFCFD;--paper:#F6F6F5;--cream:#EEEFEF;
  --silky:#E9EBEC;--coolwhite:#E3E5E4;
  /* text */
  --txt:#3A3B40;--muted:#8B8C92;
  /* gold accent */
  --gold:#BFA055;--gold-br:#E3CC8E;--gold-dp:#967937;
  --grad-gold:linear-gradient(135deg,#F0D89A 0%,#C9A862 38%,#9C7C3A 72%,#E8CC82 100%);
  /* silver accent (NEW — paired with gold) */
  --silver:#A8ACB3;--silver-br:#DCDFE3;--silver-dp:#777C84;
  --grad-silver:linear-gradient(135deg,#ECEEF0 0%,#C0C4CA 40%,#9197A0 72%,#DCDFE3 100%);
  /* hairlines — silver-toned */
  --line:rgba(150,156,166,.34);
  --serif-en:'Cormorant Garamond',serif;--script:'Pinyon Script',cursive;
  --serif-jp:'Shippori Mincho',serif;--body-jp:'Zen Kaku Gothic New',sans-serif;--label:'Jost',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
.lang-en .ja{display:none!important}
.lang-ja .en{display:none!important}
/* responsive line-break helpers — <br class="br-sp"> breaks on mobile only, <br class="br-pc"> on desktop only (breakpoint 900px) */
br.br-sp{display:inline}
br.br-pc{display:none}
@media (min-width:900px){
  br.br-sp{display:none}
  br.br-pc{display:inline}
}

.app{
  max-width:480px;margin:0 auto;min-height:100vh;background:var(--paper);color:var(--txt);
  font-family:var(--body-jp);position:relative;overflow-x:hidden;box-shadow:0 0 60px rgba(0,0,0,.18);padding-bottom:84px;
}
main{animation:fade .6s ease both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* top bar */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:rgba(252,252,253,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.burger{width:30px;height:22px;position:relative;cursor:pointer;background:none;border:0}
.burger span{position:absolute;left:0;height:1.6px;width:100%;background:var(--gold-dp);transition:.3s;border-radius:2px}
.burger span:nth-child(1){top:2px}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:18px}
.wordmark{line-height:1;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:3px}
.wordmark .wm-logo{display:block;height:31px;width:auto}
.wordmark .sub{font-family:var(--script);font-size:14px;color:var(--gold)}
.langtoggle{display:flex;border:1px solid rgba(150,156,166,.16);border-radius:30px;overflow:hidden}
.langtoggle button{font-family:var(--label);font-size:11px;letter-spacing:.1em;padding:6px 9px;background:none;border:0;color:var(--gold-dp);opacity:.62;cursor:pointer;transition:.25s}
.langtoggle button.on{background:rgba(191,160,85,.10);color:var(--gold-dp);opacity:1;font-weight:600}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(8,6,3,.6);opacity:0;pointer-events:none;transition:.3s;z-index:50}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;left:0;height:100%;width:80%;max-width:330px;z-index:60;
  background:linear-gradient(160deg,#FCFCFD,#ECEDEF);transform:translateX(-103%);
  transition:transform .38s cubic-bezier(.5,0,.2,1);padding:34px 30px;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.drawer.open{transform:translateX(0)}
.drawer .crest{margin-bottom:26px}
.drawer nav{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.drawer nav a{color:var(--txt);text-decoration:none;padding:15px 4px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:10px;transition:.25s}
.drawer nav a:hover,.drawer nav a.active{color:var(--gold-dp);padding-left:10px}
.drawer nav a .en-lbl{font-family:var(--serif-en);font-size:19px;letter-spacing:.06em}
.drawer nav a .jp-lbl{font-family:var(--serif-jp);font-size:12px;color:var(--muted)}
.drawer .closex{position:absolute;top:20px;right:22px;background:none;border:0;color:var(--gold);font-size:24px;cursor:pointer;font-family:var(--serif-en)}
.drawer .dr-foot{margin-top:auto;font-family:var(--label);font-size:11px;color:var(--muted);letter-spacing:.08em;line-height:1.9}

.crest{display:flex;flex-direction:column;align-items:center;gap:3px}
.crest .ring{width:54px;height:54px;border-radius:50%;border:1px solid var(--silver);display:grid;place-items:center;
  font-family:var(--serif-en);color:var(--gold);font-size:20px;letter-spacing:.04em;
  background:radial-gradient(circle at 50% 30%,rgba(216,223,227,.18),transparent)}
.crest .crest-logo{display:block;width:180px;max-width:64vw;height:auto;margin-bottom:5px}
.crest .nm{font-family:var(--script);font-size:18px;color:var(--gold)}

/* sections */
.sec{padding:46px 26px}
.eyebrow{font-family:var(--label);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:14px}
.h-en{font-family:var(--serif-en);font-weight:500;line-height:1.12;letter-spacing:.01em}
.h-jp{font-family:var(--serif-jp);line-height:1.5;font-weight:600}
p.body{font-size:16px;line-height:1.8;color:#46474D;font-weight:300}
.gold-rule{width:46px;height:1px;background:var(--grad-gold);margin:18px 0}
.center{text-align:center}.center .gold-rule{margin:18px auto}

/* hero */
.hero{position:relative;background:
  linear-gradient(to bottom,rgba(246,246,245,0) 64%,var(--paper) 100%),
  radial-gradient(120% 90% at 70% 10%,#FCFCFD 0%,#EDEEF0 48%,#E3E5E4 100%);
  color:var(--txt);padding:50px 26px 56px;overflow:hidden;text-align:center}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(2px 2px at 20% 80%,rgba(191,160,85,.5),transparent),
  radial-gradient(1.5px 1.5px at 80% 60%,rgba(168,172,179,.5),transparent),
  radial-gradient(2px 2px at 65% 85%,rgba(191,160,85,.38),transparent),
  radial-gradient(1.5px 1.5px at 35% 92%,rgba(168,172,179,.45),transparent)}
.hero .portrait{width:min(88%,380px);margin:0 auto 28px;position:relative;line-height:0}
.hero .portrait img{display:block;width:100%;height:auto}
.hero .mieko{font-family:var(--serif-en);font-size:54px;line-height:.9;letter-spacing:.04em;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .elegance{font-family:var(--script);font-size:34px;color:var(--gold);margin-top:-6px}
.hero .catch{font-family:var(--serif-jp);font-size:19px;letter-spacing:.04em;margin-top:22px;line-height:1.7;color:var(--ink)}
.hero .catch.en{font-family:var(--serif-en);font-size:23px;font-style:italic;letter-spacing:.02em}
.hero .tag{font-family:var(--label);font-size:11px;letter-spacing:.22em;color:var(--gold);margin-top:16px}

.btn-row{display:flex;gap:10px;margin-top:30px;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:13px 20px;border-radius:30px;
  text-decoration:none;cursor:pointer;border:1px solid var(--gold);transition:.25s;display:inline-block}
.btn.solid{background:var(--grad-gold);color:#231b08;border:0;font-weight:500}
.btn.ghost{color:var(--gold-br);background:transparent}
.hero .btn.ghost{color:var(--gold-dp)}
.sec .btn.ghost{color:var(--gold-dp);border-color:var(--gold)}
.darkstrip .btn.ghost{color:var(--gold-br);border-color:var(--gold)}
.btn.line,.btn.line:link,.btn.line:visited{background:var(--grad-gold);color:#231b08;-webkit-text-fill-color:#231b08;border:0;font-weight:600}
.btn.line:hover{filter:brightness(1.06)}
.btn.solid:hover{filter:brightness(1.08)}.btn.ghost:hover{background:rgba(194,161,91,.12)}

.pillars{display:grid;gap:14px;margin-top:10px}
.pillar{border:1px solid var(--line);border-radius:4px;padding:20px 18px;background:linear-gradient(180deg,#fff,#F0F1F2)}
.pillar .no{font-family:var(--serif-en);font-style:italic;font-size:26px;color:var(--gold);line-height:1}
.pillar h4{font-family:var(--serif-jp);font-size:17px;margin:8px 0 7px;font-weight:600;color:var(--txt)}
.pillar h4.en{font-family:var(--serif-en);font-size:20px;font-weight:600}
.pillar p{font-size:14px;line-height:1.85;color:var(--muted);font-weight:300}

.darkstrip{background:radial-gradient(120% 100% at 50% 0%,#2C2C33,#161619);color:var(--cream)}
.darkstrip .eyebrow{color:var(--gold-br)}.darkstrip p.body{color:rgba(238,239,239,.82)}
.stat-row{display:flex;gap:8px;margin-top:24px}
.stat{flex:1;text-align:center;border:1px solid var(--line);border-radius:4px;padding:16px 6px}
.stat b{display:block;font-family:var(--serif-en);font-size:26px;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.mcard{border:1px solid var(--line);border-radius:5px;padding:20px;margin-bottom:14px;background:#fff;position:relative;overflow:hidden}
.mcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-gold)}
.mcard .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.mcard h4{font-family:var(--serif-jp);font-size:18px;font-weight:600}.mcard h4.en{font-family:var(--serif-en);font-size:21px}
.mcard .price{font-family:var(--serif-en);font-size:25px;color:var(--gold-dp);white-space:nowrap;font-weight:600}
.mcard .time{font-family:var(--label);font-size:12px;letter-spacing:.1em;color:var(--gold);margin-top:4px;text-transform:uppercase}
.mcard .desc{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.8;font-weight:300}
.note{font-size:12.5px;color:var(--muted);font-weight:300;margin-top:8px;line-height:1.7}

/* page-top brand logo area (service pages) — drop a logo file at the src path,
   otherwise an elegant text wordmark is shown as a fallback */
.brandplate{text-align:center;padding:36px 26px 4px}
.brandplate .bp-logo{display:inline-block;width:min(72%,260px);height:auto}
.brandplate .bp-en{font-family:var(--serif-en);font-size:42px;letter-spacing:.05em;line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.brandplate .bp-ja{font-family:var(--serif-jp);font-size:13.5px;letter-spacing:.2em;color:var(--gold-dp);margin-top:9px}
.brandplate .bp-tm{font-size:.46em;vertical-align:super;letter-spacing:0}

/* price menu list (name … price) */
.menu-list{list-style:none;margin-top:4px}
.menu-list li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 2px;border-bottom:1px dotted rgba(150,156,166,.32);font-size:15.5px;color:#46474D;font-weight:300;line-height:1.6}
.menu-list li .pr{font-family:var(--serif-en);color:var(--gold-dp);font-size:17px;font-weight:600;white-space:nowrap}
.menu-list li .sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* two service-line cards (home) — each: logo + tagline + link */
.lines{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
.linecard{display:block;text-decoration:none;color:var(--txt);text-align:center;
  border:1px solid var(--line);border-radius:6px;padding:30px 24px;
  background:linear-gradient(180deg,#fff,#F1F2F3);transition:.25s}
.linecard:hover{border-color:var(--gold);box-shadow:0 12px 30px rgba(40,40,50,.09);transform:translateY(-2px)}
.linecard .lc-logo{min-height:50px;display:flex;align-items:center;justify-content:center}
.linecard .lc-img{max-width:210px;width:74%;height:auto}
.linecard .lc-en{font-family:var(--serif-en);font-size:34px;letter-spacing:.04em;line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.linecard.lc-verita .lc-img{max-width:182px;width:64%}
.linecard.lc-verita .lc-en{font-size:30px}
.linecard .lc-ja{font-family:var(--serif-jp);font-size:14px;letter-spacing:.12em;color:var(--gold-dp);margin-top:9px}
.linecard .lc-ja .bp-tm{font-size:.5em;vertical-align:super;letter-spacing:0}
.linecard .lc-desc{font-size:14px;line-height:1.85;color:var(--muted);font-weight:300;margin-top:14px}
.linecard .lc-more{display:inline-block;margin-top:16px;font-family:var(--label);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dp);transition:.25s}
.linecard:hover .lc-more{color:var(--gold)}

.medcols{display:grid;grid-template-columns:1fr;gap:22px;margin-top:6px}
.medgroup h5{font-family:var(--label);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dp);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px}
.medgroup ul{list-style:none}
.medgroup li{font-size:15px;padding:5px 0;color:#46474D;font-weight:300;border-bottom:1px dotted rgba(122,112,96,.18)}
.medgroup li span{color:var(--muted);font-size:12.5px}

/* book feature */
.books{display:grid;grid-template-columns:1fr;gap:20px;margin:6px 0 34px}
.bookcard{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:5px;padding:16px;position:relative;overflow:hidden}
.bookcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-gold)}
.bookcard .cover{flex:0 0 96px;width:96px;line-height:0}
.bookcard .cover img{width:100%;height:auto;border-radius:3px;box-shadow:0 6px 18px rgba(40,30,10,.16)}
.bookcard .meta{flex:1;min-width:0}
.bookcard .b-ttl{font-family:var(--serif-jp);font-size:16px;font-weight:600;line-height:1.5;color:var(--ink)}
.bookcard .b-ttl.en{font-family:var(--serif-en);font-size:18px;font-weight:500;line-height:1.3}
.bookcard .b-pub{font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dp);margin-top:9px}

.info-list{list-style:none;margin-top:8px}
.info-list li{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.7;align-items:flex-start}
.info-list li .k{font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dp);min-width:74px;padding-top:3px}
.mapwrap{margin-top:18px;border:1px solid var(--line);border-radius:5px;overflow:hidden;line-height:0;box-shadow:0 6px 20px rgba(40,30,10,.08)}
.mapwrap iframe{width:100%;height:200px;border:0;display:block;filter:saturate(.92)}

.gal{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.gframe{aspect-ratio:4/3;border:1px solid var(--gold);border-radius:3px;overflow:hidden;background:linear-gradient(160deg,#F5F6F7,#E5E7E9);position:relative}
.gframe img{width:100%;height:100%;object-fit:cover;display:block}
.gframe .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 9px 7px;display:flex;flex-direction:column;gap:1px;background:linear-gradient(to top,rgba(22,17,8,.64),rgba(22,17,8,0))}
.gframe .cap span{font-family:var(--label);font-size:9px;letter-spacing:.16em;color:#fff;text-transform:uppercase}
.gframe .badge{position:absolute;top:7px;left:8px;font-family:var(--serif-en);font-style:italic;font-size:11px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);z-index:1}

/* Mieko Ueda page imagery */
.mie-hero-fig{margin:30px auto 36px;max-width:min(82%,360px)}
.mie-hero-fig img{width:100%;height:auto;display:block;border-radius:5px;border:1px solid var(--gold);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.mie-band{margin:24px 0 4px;border-radius:5px;overflow:hidden;border:1px solid var(--gold);box-shadow:0 10px 30px rgba(40,30,10,.14);line-height:0}
.mie-band img{width:100%;height:auto;display:block}
.mie-profile-fig{margin:0 auto 22px;max-width:260px}
.mie-profile-fig img{width:100%;height:auto;display:block;border-radius:5px;border:1px solid var(--gold);box-shadow:0 10px 28px rgba(40,30,10,.16)}
.mie-cap{margin-top:8px;text-align:center;font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* shared photo band + 2-up gallery (VERITA etc.) */
.photo-band{margin:24px 0 4px;border-radius:5px;overflow:hidden;border:1px solid var(--gold);box-shadow:0 12px 30px rgba(40,30,10,.18);line-height:0}
.photo-band img{width:100%;height:auto;display:block}
.vgal{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,18px);margin-top:8px}
.product-fig{margin:0 auto 22px;max-width:300px}
.product-fig img{width:100%;height:auto;display:block;border-radius:5px;border:1px solid var(--line);box-shadow:0 12px 30px rgba(40,30,10,.12)}

.ctable{width:100%;border-collapse:collapse;margin-top:10px;font-size:15px;display:block}
.ctable tbody{display:block}
.ctable tr{display:block}
.ctable th{display:block;width:100%;text-align:left;font-family:var(--label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dp);font-weight:500;padding:14px 0 2px}
.ctable td{display:block;width:100%;padding:0 0 14px;border-bottom:1px solid var(--line);color:#46474D;font-weight:300;line-height:1.7}
.cblock{margin-bottom:26px}
.cblock h4{font-family:var(--serif-jp);font-size:17px;color:var(--gold-dp);font-weight:600}

.footer{background:var(--noir);color:var(--cream);padding:40px 26px 30px;text-align:center}
.footer .crest{margin-bottom:18px}
.footer-brand{display:inline-block;margin-bottom:20px;line-height:0}
.footer-brand .fb-logo{height:34px;width:auto;display:inline-block}
.footer .ad{font-size:14px;line-height:2;color:rgba(238,239,239,.74);font-weight:300}
.footer .stores{display:flex;flex-direction:column;gap:22px;margin:4px 0 2px}
.footer .st-name{font-family:var(--serif-en);font-size:18px;letter-spacing:.04em;color:var(--gold);line-height:1.3}
.footer .st-sub{display:block;font-family:var(--label);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-br);margin-top:4px}
.footer .store .ad{margin-top:9px}
.footer .sns{display:flex;gap:30px;justify-content:center;align-items:center;margin:22px 0;flex-wrap:wrap}
.footer .sns-group{display:flex;align-items:center;gap:13px}
.footer .sns-lbl{font-family:var(--label);font-size:10px;letter-spacing:.14em;color:var(--gold);opacity:.78}
.footer .sns a{display:inline-flex;color:var(--gold);transition:.25s}
.footer .sns a .ic{width:22px;height:22px;display:block}
.footer .sns a:hover{color:var(--gold-br)}
.footer .flinks{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.footer .flinks a{color:rgba(238,239,239,.6);font-size:12.5px;text-decoration:none;font-family:var(--label);letter-spacing:.08em}
.footer .flinks a:hover{color:var(--gold-br)}
.footer .cp{font-family:var(--label);font-size:10px;letter-spacing:.14em;color:var(--muted);margin-top:14px}

.bottombar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:45;
  display:flex;background:rgba(26,26,30,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.bottombar a{flex:1;text-align:center;padding:18px 6px;text-decoration:none;color:var(--gold-br);
  font-family:var(--label);font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;transition:.2s}
.bottombar a.res,.bottombar a.res:link,.bottombar a.res:visited{background:var(--grad-gold);color:#231b08;-webkit-text-fill-color:#231b08;font-weight:600}
.bottombar a:first-child{border-right:1px solid var(--line)}

/* call action sheet — choose salon before dialing */
.callsheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%) translateY(110%);
  width:100%;max-width:480px;z-index:60;padding:0 16px calc(16px + env(safe-area-inset-bottom));
  transition:transform .34s cubic-bezier(.5,0,.2,1);pointer-events:none}
.callsheet.open{transform:translateX(-50%) translateY(0);pointer-events:auto}
.callsheet-card{background:rgba(26,26,30,.98);backdrop-filter:blur(10px);border:1px solid var(--line);
  border-radius:14px;padding:20px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 -10px 40px rgba(0,0,0,.4)}
.callsheet-ttl{text-align:center;color:var(--gold-br);font-family:var(--label);font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.callsheet-opt{text-align:center}
.callsheet-cancel{margin-top:2px;background:transparent;border:0;color:var(--silver);cursor:pointer;
  font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:8px}

/* desktop top nav (hidden on mobile) */
.topnav{display:none}

/* ===== Desktop / Tablet (>= 900px) ===== */
@media (min-width:900px){
  /* drop the phone-frame shell */
  .app{max-width:none;box-shadow:none;padding-bottom:0}
  .bottombar{display:none}
  /* hide the "電話する" call CTA on desktop */
  .call-cta{display:none}

  /* top bar: wordmark | nav | lang */
  .topbar{padding:20px max(40px,calc((100% - 1280px)/2))}
  .wordmark{align-items:flex-start}
  .wordmark .wm-logo{height:40px}
  .wordmark .sub{font-size:15px}

  /* larger brand logo area on desktop */
  .brandplate{padding:58px 40px 8px}
  .brandplate .bp-logo{width:min(58%,330px)}
  .brandplate .bp-en{font-size:58px}
  .brandplate .bp-ja{font-size:15px}

  .mie-hero-fig{max-width:420px;margin-bottom:44px}

  /* full-bleed backgrounds — magazine grid with a readable content track
     and a wider media track for cards / galleries / stats / maps */
  /* hero — two columns: portrait (left) + copy (right) */
  .hero{display:grid;align-items:center;text-align:left;
    grid-template-columns:minmax(340px,1.15fr) 1fr;column-gap:72px;
    padding:108px max(40px,calc((100% - 1140px)/2)) 0}
  .hero .portrait{width:100%;max-width:560px;margin:0;align-self:end}
  .hero-copy{max-width:580px}
  .hero .mieko{font-size:86px}
  .hero .elegance{font-size:50px;margin-top:-8px}
  .hero .catch{font-size:23px;margin-top:30px;line-height:1.8}
  .hero .catch.en{font-size:27px}
  .hero .tag{font-size:12px;margin-top:22px;letter-spacing:.24em}
  .hero .btn-row{justify-content:flex-start}
  .btn-row{margin-top:38px;gap:14px}
  .btn{padding:14px 28px;font-size:13px}

  .sec{
    display:grid;padding:104px 0;
    grid-template-columns:
      [full-start] minmax(40px,1fr)
      [wide-start] minmax(0,230px)
      [content-start] minmax(0,780px) [content-end]
      minmax(0,230px) [wide-end]
      minmax(40px,1fr) [full-end];
  }
  .sec > *{grid-column:content}
  /* a button placed directly in a section shouldn't stretch the whole track */
  .sec > .btn{justify-self:start}
  /* media-rich blocks break out to the wider track */
  .sec > .pillars,
  .sec > .gal,
  .sec > .stat-row,
  .sec > .medcols,
  .sec > .lines,
  .sec > .mapwrap{grid-column:wide}
  .lines{grid-template-columns:1fr 1fr;gap:28px;margin-top:16px}
  .linecard{padding:44px 32px}
  .linecard .lc-en{font-size:42px}
  .linecard.lc-verita .lc-en{font-size:37px}
  .eyebrow{font-size:13px;margin-bottom:18px}
  p.body{font-size:17px;line-height:1.85}

  /* multi-column layouts */
  .pillars{grid-template-columns:repeat(3,1fr);gap:26px;margin-top:18px}
  .pillar{padding:28px 22px}
  .pillar h4{font-size:19px}
  .pillar h4.en{font-size:22px}
  .pillar p{font-size:15px}

  .medcols{grid-template-columns:1fr 1fr;gap:56px;margin-top:18px}
  .medgroup li{font-size:16px}

  .books{grid-template-columns:1fr 1fr 1fr;gap:24px}
  .bookcard{flex-direction:column;align-items:flex-start;text-align:left;padding:22px 20px 24px}
  .bookcard .cover{flex:none;width:128px;margin:0 auto}
  .bookcard .meta{width:100%}

  .gal{grid-template-columns:repeat(3,1fr);gap:20px}

  .mapwrap iframe{height:340px}

  .stat-row{gap:14px;margin-top:32px}
  .stat{padding:22px 10px}
  .stat b{font-size:30px}

  .mcard{padding:26px 28px;margin-bottom:18px}
  .mcard h4{font-size:20px}
  .mcard h4.en{font-size:24px}
  .mcard .price{font-size:30px}
  .mcard .desc{font-size:16px}

  .ctable{font-size:16px;display:table}
  .ctable tbody{display:table-row-group}
  .ctable tr{display:table-row}
  .ctable th{display:table-cell;width:38%;vertical-align:top;padding:14px 0}
  .ctable td{display:table-cell;padding:14px 0}

  .info-list li{font-size:16px;padding:16px 0}
  .info-list li .k{min-width:92px;font-size:12px}

  /* footer */
  .footer{padding:66px max(40px,calc((100% - 900px)/2)) 44px}
  .footer .ad{font-size:15px}
  .footer .stores{flex-direction:row;justify-content:center;gap:80px}
  .footer .store{max-width:330px}
  .footer .store + .store{position:relative}
  .footer .store + .store::before{content:"";position:absolute;left:-40px;top:6px;bottom:6px;width:1px;background:var(--line)}
}

/* ===== Global nav appears once the bilingual labels fit (>= 1080px) ===== */
@media (min-width:1080px){
  .burger{display:none}
  .drawer,.scrim{display:none!important}
  /* global nav — bilingual (English over Japanese, both always shown) */
  .topnav{display:flex;align-items:stretch;gap:30px}
  .topnav a{text-decoration:none;transition:.25s;display:flex;flex-direction:column;align-items:center;gap:3px;
    border-bottom:1px solid transparent;padding-bottom:5px;line-height:1.05;text-align:center}
  .topnav a .nav-en{font-family:var(--serif-en);font-size:15px;letter-spacing:.07em;font-weight:600;color:var(--gold-dp);transition:.25s}
  .topnav a .nav-ja{font-family:var(--serif-jp);font-size:11.5px;letter-spacing:.06em;color:var(--txt);transition:.25s}
  .topnav a:hover .nav-en{color:var(--gold)}
  .topnav a:hover .nav-ja{color:var(--gold-dp)}
  .topnav a.active{border-color:var(--gold)}
  .topnav a.active .nav-en{color:var(--gold)}
}

/* ===== Wider desktop (>= 1200px): larger hero + a touch more canvas ===== */
@media (min-width:1200px){
  .hero{column-gap:88px;grid-template-columns:minmax(420px,1.25fr) 1fr;
    padding:128px max(40px,calc((100% - 1240px)/2)) 0}
  .hero .mieko{font-size:100px}
  .hero .elegance{font-size:60px}
  .hero .portrait{max-width:640px}

  /* a little more breathing room and a wider media track */
  .sec{
    padding:120px 0;
    grid-template-columns:
      [full-start] minmax(48px,1fr)
      [wide-start] minmax(0,250px)
      [content-start] minmax(0,800px) [content-end]
      minmax(0,250px) [wide-end]
      minmax(48px,1fr) [full-end];
  }
  .pillars{gap:30px}
  .pillar{padding:32px 26px}
  .gal{gap:24px}
  .medcols{gap:64px}
}

/* ===== Extra-wide (>= 1500px): keep the canvas generous but bounded ===== */
@media (min-width:1500px){
  .sec{
    grid-template-columns:
      [full-start] minmax(48px,1fr)
      [wide-start] minmax(0,290px)
      [content-start] minmax(0,820px) [content-end]
      minmax(0,290px) [wide-end]
      minmax(48px,1fr) [full-end];
  }
}