:root{
  --bg-deep:#1a150f;
  --bg-deep-2:#211a12;
  --paper:#f3ede0;
  --ink:#221c14;
  --crust:#a9743a;
  --crust-deep:#7c5226;
  --line-dark:#40372a;
  --line-light:#d9cfb9;
  --muted:#8b8172;
  --muted-on-dark:#a89a83;
  --font-en:"Space Grotesk",sans-serif;
  --font-jp-display:"Shippori Mincho",serif;
  --font-jp-body:"Noto Sans JP",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-jp-body);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-jp-display);font-weight:600;margin:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* --- plates (museum wall-label device) --- */
.plate{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  border:1px solid var(--line-light);
  padding:.5em .9em;
  font-family:var(--font-en);
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--muted);
  margin:0 0 1.6rem;
}
.plate.light{border-color:#4a4136;color:#b7ac97}

/* --- divider with score-mark motif --- */
.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.2rem 0;
  background:var(--bg-deep);
  color:var(--crust);
}

/* --- header --- */
.site-header{
  height:84px;
  padding:0 4vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(26,21,15,.72);
  backdrop-filter:blur(6px);
  color:var(--paper);
  position:absolute;
  inset:0 0 auto;
  z-index:5;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.brand{display:flex;align-items:center;gap:.7rem}
.brand-mark{color:var(--crust);display:flex}
.brand-text{display:flex;flex-direction:column;line-height:1.3}
.brand-ja{font-family:var(--font-jp-display);font-size:1.3rem;font-weight:600}
.brand-en{font-family:var(--font-en);font-size:.68rem;letter-spacing:.18em;color:var(--muted-on-dark)}
nav{display:flex;gap:2.2rem;font-family:var(--font-en);font-size:.72rem;letter-spacing:.1em}
nav a{position:relative;padding-bottom:.3rem}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--crust);transition:width .3s}
nav a:hover::after,nav a:focus-visible::after{width:100%}
.menu-button{display:none;background:none;border:1px solid rgba(255,255,255,.3);padding:.5rem 1rem;color:var(--paper);font-family:var(--font-en);letter-spacing:.14em;font-size:.7rem}

/* --- hero --- */
.hero{min-height:760px;height:100vh;position:relative;color:var(--paper);overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;filter:sepia(.12) saturate(.9) contrast(1.03)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(260deg,rgba(15,11,7,.95),rgba(15,11,7,.68) 48%,rgba(15,11,7,.15) 80%)}
.hero-copy{position:absolute;right:7vw;top:52%;transform:translateY(-50%);max-width:92vw;text-align:right}
.hero h1{font-size:clamp(2.6rem,5.4vw,5.2rem);line-height:1.28;letter-spacing:-.02em;margin-bottom:2rem;text-shadow:0 2px 24px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.7)}
.hero h1 span{display:block;white-space:nowrap}
.lead{max-width:640px;font-size:1rem;line-height:1.95;color:#e3dccd;margin:0 0 2.8rem;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.profile-link{
  display:flex;align-items:center;justify-content:flex-end;gap:.7rem;
  margin-left:auto;margin-bottom:1rem;
  padding:.3rem 0;
  font-family:var(--font-en);
  font-size:1.25rem;letter-spacing:.04em;color:var(--muted-on-dark);
  border-bottom:1px solid rgba(243,237,224,.35);
}
.profile-link span{color:var(--crust)}
.cta{
  display:inline-flex;align-items:center;justify-content:flex-end;gap:1.2rem;
  border-bottom:1px solid var(--crust);
  padding:1rem 0;
  font-family:var(--font-en);
  font-size:1.25rem;letter-spacing:.04em;
  margin-left:auto;
}
.cta span{color:var(--crust)}
.hero-plate{position:absolute;left:7vw;bottom:2.6rem;margin:0;background:rgba(20,15,9,.4)}

/* one deliberate load-in moment */
.reveal{opacity:0;transform:translateY(14px);animation:reveal .9s ease forwards}
.hero h1 span:nth-child(1){animation-delay:.1s}
.hero h1 span:nth-child(2){animation-delay:.28s}
.lead{animation-delay:.5s}
.cta{animation-delay:.68s}
@keyframes reveal{to{opacity:1;transform:none}}

/* --- generic section rhythm --- */
section:not(.hero){padding:8rem 7vw}

/* --- about --- */
.about{background:var(--paper)}
.about-body{display:grid;grid-template-columns:max-content 1fr;gap:4rem}
.about h2{font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.35;white-space:nowrap}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-self:end}
.about-grid p{font-size:.98rem;line-height:2;color:#4c4536;margin:0}

/* --- services --- */
.services{background:var(--bg-deep);color:var(--paper)}
.section-head{max-width:760px;margin-bottom:4rem}
.section-head h2{font-size:clamp(2.2rem,4.2vw,3.8rem);margin-bottom:1.4rem}
.section-intro{color:var(--muted-on-dark);font-size:.92rem;margin:0}

.service-index{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);margin-bottom:5rem}
.service-index a{flex:1 1 200px;display:flex;align-items:center;gap:.8rem;padding:1.3rem 1.6rem;font-family:var(--font-en);font-size:.75rem;letter-spacing:.1em;color:var(--muted-on-dark);border-right:1px solid var(--line-dark)}
.service-index a:last-child{border-right:none}
.service-index a span{color:var(--crust)}
.service-index a:hover,.service-index a:focus-visible{color:var(--paper)}

.service-list{border-top:1px solid var(--line-dark)}
.service-list article{
  scroll-margin-top:2rem;
  display:grid;grid-template-columns:110px 1fr;gap:2.5rem;
  padding:4.5rem 0;
  border-bottom:1px solid var(--line-dark);
}
.s-no{font-family:var(--font-en);font-size:.72rem;letter-spacing:.08em;color:var(--muted-on-dark);margin:0}
.s-en{font-family:var(--font-en);color:var(--crust);letter-spacing:.14em;font-size:.72rem;margin:0 0 .6rem}
.s-body h3{font-size:clamp(1.6rem,2.6vw,2.4rem);margin:0 0 1.3rem}
.s-body>p{color:#c9c0ae;line-height:1.95;margin:0;max-width:680px}
.s-body ul{list-style:none;margin:1.8rem 0 0;padding:1.5rem 0 0;border-top:1px solid var(--line-dark);display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.s-body li{font-size:.82rem;color:#d8d0bf}
.s-body li::before{content:"— ";color:var(--crust)}

/* --- works --- */
.works{background:var(--paper)}
.works-panel{
  margin-left:18%;
  background:#e7ded0;
  padding:5vw;
  display:grid;grid-template-columns:1.2fr 1fr;gap:3rem 5rem;
}
.works .quote{font-size:clamp(1.9rem,3.6vw,3.6rem);line-height:1.4;margin:0;color:var(--ink)}
.works-text{display:flex;flex-direction:column;justify-content:center}
.works-text p{font-size:.98rem;line-height:1.95;color:#4c4536;margin:0 0 1.6rem}
.works-text .note{font-size:.82rem;border-top:1px solid var(--line-light);padding-top:1.4rem;color:var(--muted);margin:0}

/* --- gallery --- */
.gallery{background:var(--bg-deep-2);color:var(--paper)}
.gallery h2{font-size:clamp(2.1rem,4vw,3.6rem);margin:0 0 3.5rem}

.gallery-slideshow{position:relative;height:480px;overflow:hidden;background:#000}
.gallery-slideshow img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s ease;
  filter:saturate(.82) sepia(.08);
}
.gallery-slideshow img.is-active{opacity:1}
.slide-caption{
  position:absolute;left:0;bottom:0;margin:0;z-index:2;
  display:flex;gap:.7rem;align-items:center;
  padding:.9rem 1.3rem;
  background:rgba(15,11,7,.55);
  font-family:var(--font-en);font-size:.68rem;letter-spacing:.1em;color:var(--muted-on-dark);
}
.slide-caption span{color:var(--crust)}
.slide-dots{position:absolute;right:1.2rem;bottom:1.3rem;z-index:2;display:flex;gap:.55rem}
.slide-dots button{
  width:8px;height:8px;padding:0;border-radius:999px;
  border:1px solid rgba(243,237,224,.7);background:transparent;cursor:pointer;
}
.slide-dots button.is-active{background:var(--crust);border-color:var(--crust)}
.gallery-note{text-align:right;color:var(--muted-on-dark);font-size:.75rem;margin:1.6rem 0 0}

/* --- contact --- */
.contact{background:var(--paper)}
.contact-body{max-width:760px}
.contact-body h2{font-size:clamp(2.1rem,4.4vw,4rem);line-height:1.35;margin-bottom:1.6rem}
.contact-body>p{font-size:.98rem;line-height:1.9;color:#4c4536;max-width:520px}
.contact-links{display:flex;flex-direction:column;gap:1.4rem;margin-top:3rem;max-width:420px}
.contact-links a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.2rem 0;border-bottom:1px solid var(--ink);
  font-family:var(--font-en);font-size:1.15rem;letter-spacing:.06em;
}
.contact-links a span{color:var(--crust-deep)}

/* --- footer --- */
footer{
  padding:2rem 4vw;background:var(--bg-deep);color:var(--muted-on-dark);
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  font-family:var(--font-en);font-size:.68rem;letter-spacing:.1em;
}
footer p{margin:0}
footer p:nth-child(2){margin-right:auto}
footer .brand-mark{color:var(--crust)}

/* mobile-only line control for the hero lead */
.lead-mobile{display:none}
.lead-desktop{display:inline}

/* --- responsive --- */
@media (max-width:980px){
  .about-body{grid-template-columns:1fr}
  .about h2{white-space:normal}
  .about-grid{grid-template-columns:1fr;gap:1.2rem}
  .service-list article{grid-template-columns:1fr;gap:1rem}
  .works-panel{margin-left:0;grid-template-columns:1fr;gap:2rem}
  .gallery-slideshow{height:380px}
}
@media (max-width:760px){
  .site-header{height:68px}
  .menu-button{display:block}
  nav{
    display:none;position:absolute;top:68px;left:0;right:0;
    padding:1.6rem 6vw;background:var(--bg-deep);flex-direction:column;gap:1.2rem;
  }
  nav.open{display:flex}
  .hero{height:94vh;min-height:640px}
  .hero-copy{left:6vw;right:6vw;top:auto;bottom:6.5rem;transform:none;text-align:left;max-width:none}
  .hero h1 span{white-space:normal}
  .cta{margin-left:0;justify-content:flex-start}
  .profile-link{margin-left:0;justify-content:flex-start}
  .hero-plate{left:6vw;bottom:2rem}
  section:not(.hero){padding:5.5rem 6vw}
  .service-index{flex-direction:column}
  .service-index a{border-right:none;border-bottom:1px solid var(--line-dark)}
  .service-index a:last-child{border-bottom:none}
  .s-body ul{grid-template-columns:1fr;gap:.7rem}
  .gallery-slideshow{height:300px}
}

/* --- mobile fit refinements (2026-09) --- */
html,body{max-width:100%;overflow-x:clip}
main,section,.about-body,.about-grid,.section-head,.service-list,.s-body,.works-panel,.works-text,.contact-body{min-width:0}

@media (max-width:760px){
  .site-header{
    height:64px;
    padding-left:max(5vw,env(safe-area-inset-left));
    padding-right:max(5vw,env(safe-area-inset-right));
  }
  .brand{gap:.5rem;min-width:0}
  .brand-mark svg{width:23px;height:23px}
  .brand-ja{font-size:1.05rem;white-space:nowrap}
  .brand-en{font-size:.55rem;letter-spacing:.13em;white-space:nowrap}
  .menu-button{padding:.45rem .75rem;font-size:.62rem;flex:0 0 auto}

  nav{
    top:64px;
    max-height:calc(100svh - 64px);
    overflow-y:auto;
    padding:1.4rem max(6vw,env(safe-area-inset-right)) 1.6rem max(6vw,env(safe-area-inset-left));
    z-index:10;
  }

  .hero{height:100svh;min-height:600px;max-height:900px}
  .hero img{object-position:42% center}
  .hero-shade{background:linear-gradient(0deg,rgba(15,11,7,.94) 5%,rgba(15,11,7,.62) 52%,rgba(15,11,7,.18) 88%)}
  .hero-copy{
    left:max(5vw,env(safe-area-inset-left));
    right:max(5vw,env(safe-area-inset-right));
    bottom:5.4rem;
  }
  .hero h1{
    font-size:clamp(2rem,10vw,2.85rem);
    line-height:1.28;
    margin-bottom:1.2rem;
  }
  .hero h1 span{white-space:normal}
  .lead{
    max-width:34rem;
    font-size:.9rem;
    line-height:1.75;
    margin-bottom:1.45rem;
  }
  .lead br{display:none}
  .profile-link{font-size:1rem;margin-bottom:.55rem;padding:.25rem 0}
  .cta{font-size:1rem;padding:.75rem 0}
  .hero-plate{left:max(5vw,env(safe-area-inset-left));bottom:1.45rem}

  section:not(.hero){
    padding:4.5rem max(5vw,env(safe-area-inset-right)) 4.5rem max(5vw,env(safe-area-inset-left));
  }
  .plate{font-size:.62rem;letter-spacing:.11em;margin-bottom:1.25rem}

  .about-body{gap:2rem}
  .about h2{font-size:clamp(1.9rem,8.5vw,2.5rem);line-height:1.4}
  .about-grid{gap:1rem}
  .about-grid p{font-size:.92rem;line-height:1.9}

  .section-head{margin-bottom:2.7rem}
  .section-head h2{font-size:clamp(2rem,9vw,2.6rem);margin-bottom:1rem}
  .section-intro{font-size:.86rem;line-height:1.75}

  .service-index{margin-bottom:3rem}
  .service-index a{
    flex:none;
    width:100%;
    min-height:0;
    padding:1rem .2rem;
    font-size:.68rem;
    letter-spacing:.08em;
  }
  .service-list article{padding:3rem 0;gap:.8rem}
  .s-en{font-size:.66rem;letter-spacing:.1em}
  .s-body h3{font-size:clamp(1.5rem,7vw,2rem);margin-bottom:1rem}
  .s-body>p{font-size:.9rem;line-height:1.9}
  .s-body ul{margin-top:1.35rem;padding-top:1.2rem}
  .s-body li{font-size:.78rem;line-height:1.65}

  .works-panel{padding:7vw 6vw;gap:1.4rem}
  .works .quote{font-size:clamp(1.8rem,8vw,2.4rem);line-height:1.45}
  .works-text p{font-size:.9rem;line-height:1.9;margin-bottom:0}

  .gallery h2{font-size:clamp(1.9rem,8.5vw,2.5rem);margin-bottom:2.2rem}
  .gallery-slideshow{
    width:100%;
    height:auto;
    aspect-ratio:1179 / 640;
  }
  .gallery-slideshow img{object-position:center center}
  .slide-caption{padding:.65rem .85rem;font-size:.58rem;letter-spacing:.07em;max-width:75%}
  .gallery-note{font-size:.7rem;margin-top:1rem}

  .contact-body h2{font-size:clamp(1.9rem,8.8vw,2.55rem);line-height:1.45;margin-bottom:1.25rem}
  .contact-body>p{font-size:.9rem;line-height:1.85}
  .contact-links{margin-top:2rem;max-width:none}
  .contact-links a{font-size:1rem;padding:1rem 0}

  footer{
    padding:1.6rem max(5vw,env(safe-area-inset-right)) calc(1.6rem + env(safe-area-inset-bottom)) max(5vw,env(safe-area-inset-left));
    gap:.75rem 1rem;
    font-size:.6rem;
  }
}

@media (max-width:430px){
  .hero{min-height:560px}
  .hero-copy{bottom:5rem}
  .hero h1{font-size:clamp(1.9rem,9.6vw,2.45rem)}
  .lead{font-size:.84rem;line-height:1.7}
  .profile-link,.cta{font-size:.94rem}
  .brand-ja{font-size:1rem}
  .brand-en{font-size:.5rem}
  .works-panel{padding:1.8rem 1.35rem}
  .service-index a{font-size:.64rem}
}


/* --- compact mobile layout: keep desktop unchanged --- */
@media (max-width:760px){
  .site-header{
    height:62px;
    padding-left:max(5vw,env(safe-area-inset-left));
    padding-right:max(5vw,env(safe-area-inset-right));
  }
  .brand{gap:.48rem}
  .brand-mark svg{width:22px;height:22px}
  .brand-ja{font-size:1rem}
  .brand-en{font-size:.5rem;letter-spacing:.12em}
  .menu-button{padding:.42rem .7rem;font-size:.6rem}
  nav{top:62px;padding-top:1.15rem;padding-bottom:1.3rem;gap:1rem}

  /* Show more of the baker and keep the opening section shorter. */
  .hero{height:88svh;min-height:570px;max-height:760px}
  .hero img{object-position:30% center}
  .hero-shade{background:linear-gradient(0deg,rgba(15,11,7,.82) 4%,rgba(15,11,7,.46) 48%,rgba(15,11,7,.10) 84%)}
  .hero-copy{
    left:max(5vw,env(safe-area-inset-left));
    right:max(5vw,env(safe-area-inset-right));
    bottom:4.7rem;
  }
  .hero h1{
    font-size:clamp(1.75rem,8.5vw,2.2rem);
    line-height:1.28;
    margin-bottom:.8rem;
  }
  .hero h1 span{display:block;white-space:nowrap}
  .lead{margin-bottom:.9rem;max-width:none;font-size:clamp(.62rem,2.9vw,.74rem);line-height:1.62;letter-spacing:-.02em}
  .lead-desktop{display:none}
  .lead-mobile{display:block}
  .lead-mobile>span{display:block;white-space:nowrap}
  .profile-link{font-size:.86rem;margin-bottom:.28rem;padding:.18rem 0}
  .cta{font-size:.9rem;padding:.55rem 0;gap:.8rem}
  .hero-plate{left:max(5vw,env(safe-area-inset-left));bottom:1.15rem;font-size:.56rem;padding:.42em .75em}

  .divider{padding:1.15rem 0}
  section:not(.hero){padding:3.45rem max(5vw,env(safe-area-inset-right)) 3.45rem max(5vw,env(safe-area-inset-left))}
  .plate{font-size:.57rem;letter-spacing:.1em;margin-bottom:1rem;padding:.42em .72em}

  .about-body{gap:1.35rem}
  .about h2{font-size:clamp(1.6rem,7vw,1.95rem);line-height:1.34}
  .about-grid{gap:.72rem}
  .about-grid p{font-size:.8rem;line-height:1.72}

  .section-head{margin-bottom:2rem}
  .section-head h2{font-size:clamp(1.65rem,7.2vw,2rem);margin-bottom:.7rem}
  .section-intro{font-size:.76rem;line-height:1.6}

  .service-index{margin-bottom:2.1rem}
  .service-index a{padding:.72rem .1rem;font-size:.59rem;letter-spacing:.07em;gap:.6rem}
  .service-list article{padding:2.15rem 0;gap:.55rem}
  .s-no{font-size:.61rem}
  .s-en{font-size:.59rem;letter-spacing:.09em;margin-bottom:.35rem}
  .s-body h3{font-size:clamp(1.28rem,5.9vw,1.6rem);margin-bottom:.65rem}
  .s-body>p{font-size:.8rem;line-height:1.72}
  .s-body ul{margin-top:.9rem;padding-top:.85rem;gap:.4rem}
  .s-body li{font-size:.7rem;line-height:1.5}

  .works-panel{padding:1.5rem 1.2rem;gap:1rem}
  .works .quote{font-size:clamp(1.45rem,6.6vw,1.85rem);line-height:1.38}
  .works-text p{font-size:.8rem;line-height:1.7;margin-bottom:.75rem}
  .works-text .note{font-size:.7rem;padding-top:.75rem}

  .gallery h2{font-size:clamp(1.55rem,7vw,1.9rem);margin-bottom:1.45rem}
  .gallery-slideshow{height:auto;aspect-ratio:1179 / 640}
  .slide-caption{padding:.5rem .7rem;font-size:.52rem;max-width:78%}
  .slide-dots{right:.8rem;bottom:.8rem;gap:.42rem}
  .slide-dots button{width:7px;height:7px}
  .gallery-note{font-size:.63rem;margin-top:.7rem}

  .contact-body h2{font-size:clamp(1.55rem,7.2vw,1.95rem);line-height:1.35;margin-bottom:.8rem}
  .contact-body>p{font-size:.8rem;line-height:1.68}
  .contact-links{gap:.8rem;margin-top:1.35rem}
  .contact-links a{font-size:.9rem;padding:.72rem 0}

  footer{padding:1.2rem max(5vw,env(safe-area-inset-right)) calc(1.2rem + env(safe-area-inset-bottom)) max(5vw,env(safe-area-inset-left));gap:.5rem .8rem;font-size:.55rem}
}

@media (max-width:360px){
  .hero h1{font-size:1.65rem}
  .lead{font-size:.59rem;letter-spacing:-.035em}
  .hero-copy{bottom:4.5rem}
}

/* --- tighter mobile spacing for WHAT I DO / services --- */
@media (max-width:760px){
  .services .section-head{margin-bottom:1.45rem}
  .service-index{margin-bottom:1.25rem}
  .service-index a{
    padding:.48rem .1rem;
    gap:.42rem;
    line-height:1.25;
  }
  .service-list article{
    padding:1.35rem 0;
    gap:.4rem;
  }
  .s-en{margin-bottom:.2rem}
  .s-body h3{margin-bottom:.42rem}
  .s-body>p{line-height:1.62}
  .s-body ul{
    margin-top:.62rem;
    padding-top:.62rem;
    gap:.28rem;
  }
  .s-body li{line-height:1.42}
}

/* --- mobile hero heading: lock to exactly two lines --- */
@media (max-width:760px){
  .hero h1{
    font-size:clamp(1.65rem,7.6vw,1.95rem);
    line-height:1.28;
    letter-spacing:-.035em;
  }
  .hero h1 span{
    display:block;
    white-space:nowrap;
  }
}


/* --- mobile hero photo: show the baker's face more clearly --- */
@media (max-width:760px){
  .hero img{
    object-position: 16% center;
    transform: scale(1.01);
  }
  .hero-shade{
    background:linear-gradient(0deg,rgba(15,11,7,.78) 4%,rgba(15,11,7,.38) 48%,rgba(15,11,7,.08) 84%);
  }
}

@media (max-width:430px){
  .hero img{object-position: 14% center;}
}