*{box-sizing:border-box} :root{--paper:#f2eee4;--ink:#171717;--h:116px}
html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;letter-spacing:.06em}
.site-header{height:var(--h);padding:0 34px;display:flex;align-items:center;background:var(--paper)}
.site-header nav{width:100%;display:flex;justify-content:space-between;align-items:center;gap:30px}
.site-header a{text-decoration:none;color:inherit}.site-header nav a{font-size:22px;letter-spacing:.15em}
.site-header .book{border:1.5px solid;padding:23px 33px}.brand-mini,.menu{display:none}
.hero{position:relative;min-height:calc(100vh - var(--h));background:url('assets/hero_exterior_night.jpeg') center 54%/cover no-repeat}
.shade{position:absolute;inset:0;background:rgba(0,0,0,.10)}
.hero-logo{position:absolute;width:min(27vw,420px);left:50%;top:48%;transform:translate(-50%,-50%);filter:invert(1)}
.hero-foot{position:absolute;bottom:23px;width:100%;text-align:center;color:white;font-size:10px;letter-spacing:.22em;line-height:2.2}.hero-foot small{opacity:.7}
.section{padding:145px 7vw}.eyebrow{font-size:12px;letter-spacing:.18em;margin-bottom:30px;font-weight:500;line-height:1.35}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw;align-items:center}
.about-copy{max-width:520px}.about-copy h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(34px,4vw,62px);line-height:1.45;letter-spacing:.04em;margin:0 0 45px}
.about-copy p{font-size:14px;line-height:2.15;letter-spacing:.08em;margin:0 0 18px}
figure{margin:0} figure img{display:block;width:100%;height:100%;object-fit:cover}
.about figure{height:640px}
.cafe{padding-top:80px}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:12vw;align-items:end;margin-bottom:70px}
.section-head h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(48px,7vw,105px);line-height:.92;letter-spacing:-.02em;margin:0}
.section-head p{max-width:430px;font-size:14px;line-height:2.1;margin:0 0 8px}
.cafe-wide{height:min(70vw,850px)}
.cafe-details{display:grid;grid-template-columns:1.1fr .7fr .75fr;gap:5vw;align-items:start;padding-top:110px}
.cafe-details>figure:first-child{height:570px}.small-photo{height:390px;margin-top:150px}
.cafe-note{padding-top:70px}.cafe-note span{font-size:10px;letter-spacing:.2em}.cafe-note p{font-family:Georgia,serif;font-size:34px;line-height:1.35;margin:38px 0 65px}
.cafe-note a{color:inherit;text-decoration:none;border-bottom:1px solid;padding-bottom:7px;font-size:11px;letter-spacing:.18em}
.coming{min-height:60vh;display:grid;place-items:center;border-top:1px solid rgba(0,0,0,.15);font-size:12px;letter-spacing:.22em}
@media(max-width:820px){
:root{--h:78px}.site-header{padding:0 20px;justify-content:space-between}.site-header nav{display:none}.brand-mini{display:block;line-height:1}.brand-mini span{display:block;font-size:8px;margin-bottom:5px}.brand-mini strong{font-family:Georgia,serif;font-size:19px}.menu{display:block;border:0;background:none;width:34px}.menu i{display:block;height:1px;background:#111;margin:8px 0}
.hero{min-height:calc(100svh - var(--h));background-position:center}.hero-logo{width:min(58vw,300px)}
.section{padding:90px 22px}.about-grid,.section-head,.cafe-details{grid-template-columns:1fr;gap:48px}.about-grid{display:flex;flex-direction:column-reverse}.about figure{height:62vh}.about-copy h1{font-size:36px;margin-bottom:30px}.about-copy p,.section-head p{font-size:13px}
.cafe{padding-top:30px}.section-head{margin-bottom:40px}.section-head h2{font-size:55px}.cafe-wide{height:70vh}.cafe-details{padding-top:60px}.cafe-details>figure:first-child{height:58vh}.cafe-note{padding:0}.small-photo{height:50vh;margin-top:0}
}
.inn{padding-top:115px}.inn-head{margin-bottom:70px}.inn-intro{max-width:430px}
.inn-intro p{font-size:14px;line-height:2.1;margin:0 0 16px}.inn-wide{height:min(67vw,820px)}
.inn-details{display:grid;grid-template-columns:.9fr .75fr 1fr;gap:5vw;align-items:start;padding-top:110px}
.inn-detail-photo{height:470px}.inn-bath-photo{height:auto;aspect-ratio:3/2;margin-top:90px}
.inn-note{padding-top:75px}.inn-note>span{font-size:10px;letter-spacing:.2em}
.inn-note>p{font-family:Georgia,serif;font-size:30px;line-height:1.45;margin:38px 0 60px}
.inn-actions{display:flex;gap:28px;flex-wrap:wrap}.inn-actions a{color:inherit;text-decoration:none;border-bottom:1px solid;padding-bottom:7px;font-size:11px;letter-spacing:.18em}
.inn-actions .book-link{border:1px solid;padding:15px 20px}
@media(max-width:820px){
.inn{padding-top:60px}.inn-head{margin-bottom:40px}.inn-wide{height:68vh}
.inn-details{grid-template-columns:1fr;gap:48px;padding-top:60px}.inn-detail-photo{height:55vh;margin-top:0}.inn-bath-photo{height:auto;aspect-ratio:3/2;margin-top:0}.inn-note{padding-top:0}
.inn-note>p{font-size:27px;margin-bottom:38px}
}

.yutte{padding-top:120px}.yutte-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:9vw;align-items:center}
.yutte-grid figure{height:650px}.yutte-copy h2,.access h2,.booking h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.02em}
.yutte-copy h2{font-size:clamp(45px,6vw,88px);line-height:.95;margin:0 0 42px}
.yutte-copy p{font-size:14px;line-height:2.1;max-width:420px;margin-bottom:45px}.yutte-copy a,.access-info a{color:inherit;text-decoration:none;border-bottom:1px solid;padding-bottom:7px;font-size:11px;letter-spacing:.16em}
.access{border-top:1px solid rgba(0,0,0,.14);border-bottom:1px solid rgba(0,0,0,.14)}
.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.access h2{font-size:clamp(55px,8vw,112px);line-height:.9;margin:0}
.access-info{padding-top:45px;font-size:14px;line-height:1.9}.access-info p{margin:0 0 25px}.access-info a{display:inline-block;margin-top:15px}
.booking{min-height:76vh;display:grid;place-items:center;text-align:center}.booking-inner{max-width:900px}
.booking h2{font-size:clamp(65px,10vw,145px);line-height:.83;margin:25px 0 40px}.booking p{font-size:14px;margin-bottom:45px}
.booking-button{display:inline-block;color:inherit;text-decoration:none;border:1.5px solid;padding:25px 42px;font-size:12px;letter-spacing:.18em}
.booking small{display:block;margin-top:25px;font-size:9px;opacity:.5;letter-spacing:.1em}
footer{background:#171717;color:#f2eee4;padding:90px 7vw 35px}.footer-brand span{display:block;font-size:11px;letter-spacing:.2em;margin-bottom:8px}
.footer-brand strong{font-family:Georgia,serif;font-size:48px;font-weight:400}.footer-links{display:flex;flex-wrap:wrap;gap:30px;margin:70px 0}
.footer-links a{color:inherit;text-decoration:none;font-size:11px;letter-spacing:.16em}
.footer-bottom{border-top:1px solid rgba(255,255,255,.25);padding-top:25px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.15em;opacity:.7}
@media(max-width:820px){
.yutte{padding-top:70px}.yutte-grid,.access-grid{grid-template-columns:1fr;gap:55px}.yutte-grid figure{height:58vh}.yutte-copy h2{font-size:52px}
.access h2{font-size:64px}.access-info{padding-top:0}.booking{min-height:70vh}.booking h2{font-size:70px}.booking-button{padding:21px 23px;font-size:10px}
footer{padding:70px 22px 30px}.footer-brand strong{font-size:38px}.footer-links{gap:20px;margin:50px 0}.footer-bottom{gap:20px;flex-direction:column}
}

.inn-page-hero{position:relative;height:calc(100vh - var(--h));overflow:hidden}.inn-page-hero>img{width:100%;height:100%;object-fit:cover}
.inn-page-title{position:absolute;left:7vw;bottom:7vw;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.2)}.inn-page-title>span{font-size:11px;letter-spacing:.25em}
.inn-page-title h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(60px,9vw,140px);line-height:.82;letter-spacing:-.03em;margin:22px 0 0}
.page-section{padding:130px 7vw}.inn-lead-grid,.room-info,.price,.notice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw}
.inn-lead h2,.notice h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,5vw,70px);line-height:1.35;margin:0}
.inn-lead-grid p,.notice-grid p{font-size:14px;line-height:2.15;margin:0 0 18px}
.inn-gallery{display:grid;grid-template-columns:1.25fr .75fr;gap:6vw;align-items:end;padding-top:20px}.gallery-large{height:720px}.gallery-small{height:500px}
.room-info,.price{border-top:1px solid rgba(0,0,0,.15)}.room-info h2,.price h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(52px,7vw,100px);line-height:.9;margin:0}
.info-list>div,.price-list>div{border-top:1px solid rgba(0,0,0,.18);padding:22px 0;display:flex;justify-content:space-between;gap:25px}
.info-list span,.price-list span,.stay-grid span{font-size:10px;letter-spacing:.18em}.info-list p{margin:0;text-align:right;font-size:13px;line-height:1.7;max-width:430px}
.price-list strong{font-family:Georgia,serif;font-size:28px;font-weight:400}.price-note{font-size:12px;line-height:1.9;margin-top:25px}
.stay-info{background:#e7e1d5}.stay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5vw}.stay-grid>div{border-top:1px solid;padding-top:22px}
.stay-grid strong{display:block;font-family:Georgia,serif;font-size:28px;font-weight:400;margin:24px 0 18px}.stay-grid p{font-size:12px;line-height:1.9}
.notice{border-bottom:1px solid rgba(0,0,0,.15)}
@media(max-width:820px){
.inn-page-hero{height:calc(88svh - var(--h))}.inn-page-title{left:22px;bottom:35px}.inn-page-title h1{font-size:58px}
.page-section{padding:85px 22px}.inn-lead-grid,.room-info,.price,.notice-grid,.inn-gallery,.stay-grid{grid-template-columns:1fr;gap:45px}
.inn-lead h2,.notice h2{font-size:36px}.inn-gallery{padding-top:0}.gallery-large{height:62vh}.gallery-small{height:52vh}
.room-info h2,.price h2{font-size:56px}.info-list p{text-align:right;max-width:65%}.stay-grid{gap:35px}
}

.cafe-page-hero{position:relative;height:calc(100vh - var(--h));overflow:hidden}.cafe-page-hero>img{width:100%;height:100%;object-fit:cover}
.cafe-page-title{position:absolute;left:7vw;bottom:7vw;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.25)}.cafe-page-title>span{font-size:11px;letter-spacing:.25em}
.cafe-page-title h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(60px,9vw,140px);line-height:.82;letter-spacing:-.03em;margin:22px 0 0}
.cafe-lead-grid,.cafe-menu,.cafe-access{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.cafe-lead h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,5vw,70px);line-height:1.35;margin:0}
.cafe-lead-grid p,.menu-copy>p,.cafe-access p{font-size:14px;line-height:2.15;margin:0 0 18px}
.cafe-page-gallery{display:grid;grid-template-columns:1.25fr .75fr;gap:6vw;align-items:end;padding-top:20px}.cafe-shot-main{height:720px}.cafe-shot-small{height:500px}
.cafe-menu{border-top:1px solid rgba(0,0,0,.15)}.cafe-menu h2,.cafe-access h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(50px,7vw,100px);line-height:.9;margin:0}
.menu-lines{margin-top:50px}.menu-lines>div{border-top:1px solid rgba(0,0,0,.18);padding:22px 0}.menu-lines span{font-size:10px;letter-spacing:.18em}.menu-lines p{font-family:Georgia,serif;font-size:24px;margin:10px 0 0}.small-note{font-size:10px!important;opacity:.65;margin-top:25px!important}
.cafe-hours{background:#e7e1d5}.hours-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5vw}.hours-grid>div{border-top:1px solid;padding-top:22px}.hours-grid span{font-size:10px;letter-spacing:.18em}.hours-grid strong{display:block;font-family:Georgia,serif;font-size:30px;font-weight:400;margin-top:25px}
.cafe-access{border-bottom:1px solid rgba(0,0,0,.15)}.cafe-access a{display:inline-block;color:inherit;text-decoration:none;border-bottom:1px solid;padding-bottom:7px;margin-top:20px;font-size:11px;letter-spacing:.16em}
@media(max-width:820px){
.cafe-page-hero{height:calc(88svh - var(--h))}.cafe-page-title{left:22px;bottom:35px}.cafe-page-title h1{font-size:56px}
.cafe-lead-grid,.cafe-page-gallery,.cafe-menu,.hours-grid,.cafe-access{grid-template-columns:1fr;gap:45px}.cafe-lead h2{font-size:36px}
.cafe-page-gallery{padding-top:0}.cafe-shot-main{height:62vh}.cafe-shot-small{height:52vh}.cafe-menu h2,.cafe-access h2{font-size:55px}.hours-grid{gap:35px}
}

.about-page-hero{position:relative;height:calc(100vh - var(--h));overflow:hidden}.about-page-hero>img{width:100%;height:100%;object-fit:cover}
.about-page-title{position:absolute;left:7vw;bottom:7vw;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.25)}.about-page-title>span{font-size:11px;letter-spacing:.25em}
.about-page-title h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(60px,9vw,140px);line-height:.82;letter-spacing:-.03em;margin:22px 0 0}
.about-page-grid,.hamada-about{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.about-page-grid h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,5vw,70px);line-height:1.35;margin:0}
.about-page-grid p,.hamada-about p{font-size:14px;line-height:2.15;margin:0 0 18px}
.three-places{border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15)}
.places-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(0,0,0,.15)}
.places-grid a{color:inherit;text-decoration:none;padding:45px 38px 25px 0;min-height:390px;position:relative}
.places-grid a+a{border-left:1px solid rgba(0,0,0,.15);padding-left:38px}
.places-grid span{font-size:10px;letter-spacing:.18em}.places-grid h3{font-family:Georgia,serif;font-size:55px;font-weight:400;margin:45px 0 25px}
.places-grid p{font-size:12px;line-height:1.9;max-width:290px}.places-grid b{position:absolute;bottom:28px;font-size:10px;font-weight:400;letter-spacing:.16em;border-bottom:1px solid;padding-bottom:6px}
.hamada-about h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(52px,7vw,100px);line-height:.9;margin:0}.hamada-about a{display:inline-block;color:inherit;text-decoration:none;border-bottom:1px solid;padding-bottom:7px;margin-top:25px;font-size:11px;letter-spacing:.16em}
@media(max-width:820px){
.about-page-hero{height:calc(88svh - var(--h))}.about-page-title{left:22px;bottom:35px}.about-page-title h1{font-size:57px}
.about-page-grid,.hamada-about,.places-grid{grid-template-columns:1fr;gap:45px}.about-page-grid h2{font-size:36px}
.places-grid{gap:0}.places-grid a{min-height:300px;padding:35px 0}.places-grid a+a{border-left:0;border-top:1px solid rgba(0,0,0,.15);padding-left:0}
.places-grid h3{font-size:48px;margin:30px 0 20px}.hamada-about h2{font-size:57px}
}

.mobile-panel{display:none}
@media(max-width:820px){
body.menu-open{overflow:hidden}.mobile-panel{display:block;position:fixed;inset:0;background:var(--paper);z-index:9999;opacity:0;visibility:hidden;transition:.22s}.mobile-panel.is-open{opacity:1;visibility:visible}
.mobile-close{position:absolute;right:20px;top:15px;border:0;background:none;font:300 38px/1 Arial;color:var(--ink);padding:8px}
.mobile-nav{height:100%;display:flex;flex-direction:column;justify-content:center;padding:45px 28px;gap:22px}.mobile-nav a{color:var(--ink);text-decoration:none;font-family:Georgia,serif;font-size:38px;letter-spacing:.04em}
.mobile-nav .mobile-book{border:1px solid;padding:17px 20px;margin-top:8px;font-family:Arial,sans-serif;font-size:16px;letter-spacing:.18em;text-align:center}
.hero-logo{width:min(62vw,300px)}.hero{background-position:center 50%}.booking-inner{width:100%}.booking-button{width:100%;max-width:360px}.site-header{position:relative;z-index:100}
}
/* 2026-08-29 typography refinement */
body{font-family:Helvetica,Arial,sans-serif;letter-spacing:.045em}
.about-copy h1,
.section-head h2,
.cafe-note p,
.inn-note>p,
.yutte-copy h2,
.access h2,
.booking h2,
.footer-brand strong,
.mobile-nav a{
  font-family:Helvetica,Arial,sans-serif;
  font-weight:500;
}
.section-head h2{font-size:clamp(42px,5.7vw,86px);line-height:.98;letter-spacing:-.025em}
.cafe-note p{font-size:29px;line-height:1.28;letter-spacing:.01em}
.inn-note>p{font-size:27px;line-height:1.38;letter-spacing:.01em}
.yutte-copy h2{font-size:clamp(40px,5vw,72px);line-height:1}
.access h2{font-size:clamp(48px,6.5vw,88px);line-height:.96}
.booking h2{font-size:clamp(58px,8vw,108px);line-height:.9}
.footer-brand strong{font-size:44px;letter-spacing:.04em}
@media(max-width:820px){
  .about-copy h1{font-size:32px;line-height:1.5}
  .section-head h2{font-size:43px;line-height:1.02}
  .cafe-note p{font-size:27px}
  .inn-note>p{font-size:25px}
  .yutte-copy h2{font-size:43px}
  .access h2{font-size:50px}
  .booking h2{font-size:54px}
  .mobile-nav a{font-size:31px}
  .eyebrow{font-size:11px;letter-spacing:.16em;margin-bottom:22px;line-height:1.35}
}

/* 2026-08-29 review revisions */
.section-head h2,.yutte-copy h2,.access h2,.booking h2{letter-spacing:.035em;}
.footer-brand img{display:block;width:min(260px,65vw);height:auto;filter:invert(1);}
@media(max-width:820px){
  .about-copy h1{font-size:30px;line-height:1.48;letter-spacing:.02em;}
  .section-head h2,.yutte-copy h2,.access h2,.booking h2{letter-spacing:.035em;}
  .footer-brand img{width:min(220px,62vw);}
}

/* v4 photo + line-break refinements */
.about-line-one{white-space:nowrap;}
.cafe-wide img{object-position:center 48%;}
.cafe-details>figure:first-child img{object-position:center center;}
.small-photo img{object-position:center center;}
@media(max-width:820px){
  .about-line-one{white-space:nowrap;}
  .about-copy h1{font-size:clamp(26px,7.7vw,30px);}
  .cafe-wide{height:66vh;}
  .cafe-wide img{object-position:center 46%;}
}

/* v7 mobile full-photo refinements: only hero, cafe main, inn room */
@media(max-width:820px){
  .brand-mini{display:none;}
  .hero{
    min-height:0;
    height:auto;
    aspect-ratio:3/2;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    background-color:#111;
  }
  .hero-logo{width:min(58vw,270px);top:50%;}
  .hero-foot{bottom:10px;}
  .cafe-wide,.inn-wide{height:auto;}
  .cafe-wide img,.inn-wide img{height:auto;object-fit:contain;object-position:center;}
}

/* v8 mobile balance refinements: homepage only */
@media(max-width:820px){
  /* Keep the hero logo independent from the full-width facade photo, but 15% smaller than v7. */
  #top .hero-logo{width:min(49vw,230px);}

  /* Portrait-oriented homepage photos: 20% smaller and centered. */
  #top .about-grid > figure,
  #top .cafe-details > figure:first-child,
  #top .cafe-details > .small-photo,
  #top .inn-details > .inn-detail-photo,
  #top .yutte-grid > figure{
    width:80%;
    margin-left:auto;
    margin-right:auto;
  }

  /* Preserve the wide shower image and wide feature photos at their v7 sizing. */
  #top .inn-details > .inn-bath-photo{width:100%;}
}

/* v9 mobile balance refinements: only the two user-requested changes */
@media(max-width:820px){
  /* Top logo: another 10 percentage points smaller than the v8 balance. */
  #top .hero-logo{width:min(43.5vw,203px);}

  /* Portrait-oriented homepage photos: another 10 percentage points smaller (70% total width). */
  #top .about-grid > figure,
  #top .cafe-details > figure:first-child,
  #top .cafe-details > .small-photo,
  #top .inn-details > .inn-detail-photo,
  #top .yutte-grid > figure{
    width:70%;
  }

  /* Keep wide photos unchanged. */
  #top .inn-details > .inn-bath-photo{width:100%;}
}

/* v10 mobile portrait-photo fix: shrink the actual image without cropping. */
@media(max-width:820px){
  #top .about-grid > figure,
  #top .cafe-details > figure:first-child,
  #top .cafe-details > .small-photo,
  #top .inn-details > .inn-detail-photo,
  #top .yutte-grid > figure{
    width:70%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
  }
  #top .about-grid > figure img,
  #top .cafe-details > figure:first-child img,
  #top .cafe-details > .small-photo img,
  #top .inn-details > .inn-detail-photo img,
  #top .yutte-grid > figure img{
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center;
  }
  #top .inn-details > .inn-bath-photo{
    width:100%;
    height:auto;
  }
}

/* v11 mobile photo rules: match the established desktop/INN visual rhythm.
   Portrait feature crops stay portrait; landscape companion photos show whole image. */
@media(max-width:820px){
  /* Portrait feature images: keep intentional crop, but at the reduced mobile width. */
  #top .cafe-details > figure:first-child,
  #top .inn-details > .inn-detail-photo,
  #top .yutte-grid > figure{
    width:70%;
    aspect-ratio:3 / 4;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
  }
  #top .cafe-details > figure:first-child img,
  #top .inn-details > .inn-detail-photo img,
  #top .yutte-grid > figure img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  /* Landscape companion images: preserve the original ratio and show the whole photo. */
  #top .cafe-details > .small-photo,
  #top .inn-details > .inn-bath-photo{
    width:100%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    aspect-ratio:auto;
    overflow:visible;
  }
  #top .cafe-details > .small-photo img,
  #top .inn-details > .inn-bath-photo img{
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center;
  }
}

/* v12 mobile crop refinement: ABOUT and YUTTE only. Desktop and all other sections unchanged. */
@media(max-width:820px){
  /* ABOUT: bring the mobile crop closer to the established desktop portrait composition. */
  #top .about-grid > figure{
    width:70%;
    aspect-ratio:3 / 4;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
  }
  #top .about-grid > figure img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 52%;
  }

  /* YUTTE: use a wider crop on mobile so the shop display/ceramics dominate instead of the upper wall. */
  #top .yutte-grid > figure{
    width:94%;
    aspect-ratio:6 / 5;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
  }
  #top .yutte-grid > figure img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 68%;
  }
}

/* v15 CAFE detail refinement — TOP v14 is the visual baseline. CAFE detail only. */
.cafe-page-title h1,
.cafe-lead h2,
.cafe-menu h2,
.cafe-access h2,
.menu-lines p,
.hours-grid strong{
  font-family:Helvetica,Arial,sans-serif;
  font-weight:500;
}
.cafe-page-title h1{
  font-size:clamp(42px,5.7vw,86px);
  line-height:.98;
  letter-spacing:.035em;
}
.cafe-lead h2{
  font-size:clamp(30px,3.2vw,48px);
  line-height:1.48;
  letter-spacing:.02em;
}
.cafe-menu h2,.cafe-access h2{
  font-size:clamp(40px,5vw,72px);
  line-height:1;
  letter-spacing:.035em;
}
.menu-lines p{font-size:22px;letter-spacing:.01em;line-height:1.35}
.hours-grid strong{font-size:27px;letter-spacing:.01em}

/* Use the same large-feature + portrait-accent rhythm established on TOP. */
.cafe-page-gallery{
  grid-template-columns:1.1fr .75fr;
  gap:5vw;
  align-items:start;
}
.cafe-shot-main{height:570px}
.cafe-shot-small{height:390px;margin-top:150px}
.cafe-shot-main img,.cafe-shot-small img{object-position:center center}

@media(max-width:820px){
  .cafe-page-title h1{font-size:43px;line-height:1.02;letter-spacing:.035em}
  .cafe-lead h2{font-size:30px;line-height:1.48;letter-spacing:.02em}
  .cafe-menu h2,.cafe-access h2{font-size:43px;line-height:1;letter-spacing:.035em}
  .menu-lines p{font-size:21px}
  .hours-grid strong{font-size:25px}

  .cafe-page-gallery{grid-template-columns:1fr;gap:48px;padding-top:0}
  .cafe-shot-main{
    width:70%;
    aspect-ratio:3 / 4;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
  }
  .cafe-shot-main img{width:100%;height:100%;object-fit:cover;object-position:center}
  .cafe-shot-small{
    width:100%;
    height:auto;
    margin:0 auto;
    aspect-ratio:auto;
    overflow:visible;
  }
  .cafe-shot-small img{width:100%;height:auto;object-fit:contain;object-position:center}
}


/* v18 Japanese detail typography + CAFE hours.
   TOP/v16 content and photos remain unchanged; English detail pages remain unchanged. */
.cafe-hours .hours-grid{grid-template-columns:repeat(4,1fr);}
.hours-note{font-size:10px;line-height:1.9;letter-spacing:.06em;margin:35px 0 0;opacity:.7;}

/* Match Japanese INN / ABOUT detail typography to the established CAFE detail / TOP rules. */
.inn-page-title h1,
.inn-lead h2,
.notice h2,
.room-info h2,
.price h2,
.price-list strong,
.stay-grid strong,
.about-page-title h1,
.about-page-grid h2,
.places-grid h3,
.hamada-about h2{
  font-family:Helvetica,Arial,sans-serif;
  font-weight:500;
}
.inn-page-title h1,.about-page-title h1{
  font-size:clamp(42px,5.7vw,86px);
  line-height:.98;
  letter-spacing:.035em;
}
.inn-lead h2,.notice h2,.about-page-grid h2{
  font-size:clamp(30px,3.2vw,48px);
  line-height:1.48;
  letter-spacing:.02em;
}
.room-info h2,.price h2,.hamada-about h2{
  font-size:clamp(40px,5vw,72px);
  line-height:1;
  letter-spacing:.035em;
}
.places-grid h3{font-size:46px;line-height:1.05;letter-spacing:.035em;}
.price-list strong,.stay-grid strong{letter-spacing:.01em;}

/* Japanese prose: natural line breaking without forced mid-phrase breaks. */
.cafe-lead-grid p,.menu-copy>p,.cafe-access p,
.inn-lead-grid p,.notice-grid p,.info-list p,.price-note,.stay-grid p,
.about-page-grid p,.hamada-about p,.places-grid p{
  word-break:normal;
  overflow-wrap:break-word;
  line-break:strict;
}

@media(max-width:820px){
  .cafe-hours .hours-grid{grid-template-columns:1fr;}
  .hours-note{margin-top:28px;}
  .inn-page-title h1,.about-page-title h1{font-size:43px;line-height:1.02;letter-spacing:.035em;}
  .inn-lead h2,.notice h2,.about-page-grid h2{font-size:30px;line-height:1.48;letter-spacing:.02em;}
  .room-info h2,.price h2,.hamada-about h2{font-size:43px;line-height:1;letter-spacing:.035em;}
  .places-grid h3{font-size:43px;line-height:1.05;letter-spacing:.035em;}
}

/* v19 Japanese detail footer + line-break refinement only. */
/* Match the Japanese detail-page footer to the confirmed TOP logo treatment. */
.cafe-page-hero ~ * .footer-brand img,
.inn-page ~ footer .footer-brand img,
body:has(.about-page-hero) footer .footer-brand img{
  display:block;
  width:min(260px,65vw);
  height:auto;
  filter:invert(1);
}

/* Prefer phrase-aware Japanese wrapping and avoid emergency word splitting. */
.cafe-lead-grid p,.menu-copy>p,.cafe-access p,.hours-note,
.inn-lead-grid p,.notice-grid p,.info-list p,.price-note,.stay-grid p,
.about-page-grid p,.hamada-about p,.places-grid p{
  overflow-wrap:normal;
  word-break:normal;
  word-break:auto-phrase;
  line-break:strict;
  text-wrap:pretty;
}

/* Desktop-only controlled breaks can be used where copy needs a cleaner rhythm. */
.pc-br{display:block;}
@media(max-width:820px){
  .pc-br{display:none;}
  .cafe-page-hero ~ * .footer-brand img,
  .inn-page ~ footer .footer-brand img,
  body:has(.about-page-hero) footer .footer-brand img{
    width:min(220px,62vw);
  }
}


/* v20 CAFE detail photo update only */
.cafe-detail-coffee,.cafe-detail-food,.cafe-detail-sweets{border-top:1px solid rgba(0,0,0,.12)}
.cafe-detail-coffee{display:grid;grid-template-columns:.62fr 1.38fr;gap:8vw;align-items:start}
.cafe-detail-label{max-width:360px}
.cafe-detail-label p{font-size:14px;line-height:2.15;margin:0;letter-spacing:.045em;word-break:keep-all;overflow-wrap:normal}
.cafe-detail-coffee-photo{height:560px}
.cafe-detail-coffee-photo img{object-position:center center}
.cafe-detail-food-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:5vw;align-items:start;margin-top:55px}
.cafe-detail-food-grid figure:first-child{height:520px}
.cafe-detail-food-grid figure:last-child{height:520px}
.cafe-detail-sweets-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:6vw;align-items:end;margin-top:55px}
.cafe-detail-cheesecake{height:500px}
.cafe-detail-affogato{height:620px}
.cafe-detail-food-grid img,.cafe-detail-sweets-grid img{object-position:center center}
@media(max-width:820px){
  .cafe-detail-coffee{grid-template-columns:1fr;gap:38px}
  .cafe-detail-label{max-width:none}
  .cafe-detail-label p{font-size:13px}
  .cafe-detail-coffee-photo{height:auto;aspect-ratio:3/2}
  .cafe-detail-coffee-photo img{height:100%;object-fit:cover}
  .cafe-detail-food-grid,.cafe-detail-sweets-grid{grid-template-columns:1fr;gap:36px;margin-top:38px}
  .cafe-detail-food-grid figure:first-child,.cafe-detail-food-grid figure:last-child,.cafe-detail-cheesecake,.cafe-detail-affogato{height:auto}
  .cafe-detail-food-grid figure img,.cafe-detail-sweets-grid figure img{width:100%;height:auto;object-fit:contain}
  .cafe-detail-sandwich{width:86%;margin-left:auto;margin-right:auto}
}


/* v21 CAFE detail — photo-led story after the opening copy */
.cafe-photo-story{border-top:0!important}
.cafe-detail-coffee.cafe-photo-story{display:block}
.cafe-detail-coffee.cafe-photo-story .cafe-detail-coffee-photo{width:72%;height:auto;aspect-ratio:3/2;margin-left:auto}
.cafe-detail-coffee.cafe-photo-story .cafe-detail-coffee-photo img{width:100%;height:100%;object-fit:cover}
.cafe-detail-food.cafe-photo-story .cafe-detail-food-grid,
.cafe-detail-sweets.cafe-photo-story .cafe-detail-sweets-grid{margin-top:0}
@media(max-width:700px){
  .cafe-detail-coffee.cafe-photo-story .cafe-detail-coffee-photo{width:100%;height:auto;aspect-ratio:auto;margin-left:0}
  .cafe-detail-coffee.cafe-photo-story .cafe-detail-coffee-photo img{width:100%;height:auto;object-fit:contain}
}

/* v22 CAFE detail — calm vertical photo rhythm inspired by editorial shop pages.
   CAFE photo layout only; copy, menu, hours, access and all other pages stay unchanged. */
.cafe-detail-coffee.cafe-photo-story,
.cafe-detail-food.cafe-photo-story,
.cafe-detail-sweets.cafe-photo-story{
  padding-top:clamp(42px,6vw,92px);
  padding-bottom:clamp(42px,6vw,92px);
}
.cafe-detail-coffee.cafe-photo-story .cafe-detail-coffee-photo{
  width:78%;
  max-width:1120px;
  margin:0 auto;
  aspect-ratio:auto;
}
.cafe-detail-coffee.cafe-photo-story .cafe-detail-coffee-photo img{
  width:100%;height:auto;object-fit:contain;display:block;
}
.cafe-detail-food.cafe-photo-story .cafe-detail-food-grid,
.cafe-detail-sweets.cafe-photo-story .cafe-detail-sweets-grid{
  display:flex;
  flex-direction:column;
  gap:clamp(90px,12vw,180px);
  margin:0;
  align-items:center;
}
.cafe-detail-food.cafe-photo-story .cafe-detail-food-grid figure,
.cafe-detail-sweets.cafe-photo-story .cafe-detail-sweets-grid figure{
  height:auto;
  margin:0;
}
.cafe-detail-food.cafe-photo-story .cafe-detail-food-grid figure:first-child{
  width:88%;
}
.cafe-detail-food.cafe-photo-story .cafe-detail-food-grid figure:last-child{
  width:62%;
}
.cafe-detail-sweets.cafe-photo-story .cafe-detail-cheesecake{
  width:82%;
}
.cafe-detail-sweets.cafe-photo-story .cafe-detail-affogato{
  width:48%;
}
.cafe-detail-food.cafe-photo-story img,
.cafe-detail-sweets.cafe-photo-story img{
  width:100%;height:auto;object-fit:contain;display:block;
}

@media(max-width:700px){
  .cafe-detail-coffee.cafe-photo-story,
  .cafe-detail-food.cafe-photo-story,
  .cafe-detail-sweets.cafe-photo-story{
    padding-top:42px;
    padding-bottom:42px;
  }
  .cafe-detail-coffee.cafe-photo-story .cafe-detail-coffee-photo{width:100%;}
  .cafe-detail-food.cafe-photo-story .cafe-detail-food-grid,
  .cafe-detail-sweets.cafe-photo-story .cafe-detail-sweets-grid{
    gap:72px;
  }
  .cafe-detail-food.cafe-photo-story .cafe-detail-food-grid figure:first-child{width:100%;}
  .cafe-detail-food.cafe-photo-story .cafe-detail-food-grid figure:last-child{width:84%;}
  .cafe-detail-sweets.cafe-photo-story .cafe-detail-cheesecake{width:100%;}
  .cafe-detail-sweets.cafe-photo-story .cafe-detail-affogato{width:72%;}
}

/* v24: prevent awkward splits inside compact terms */
.no-break{white-space:nowrap}
\n\n/* v26 Japanese-page hierarchy refinement.
   Remove redundant eyebrow labels in HTML and unify equivalent detail-page typography. */
.cafe-menu,
.room-info,
.price{
  grid-template-columns:1fr 1fr;
  gap:8vw;
  padding-top:110px;
  padding-bottom:110px;
}
.cafe-menu h2,
.room-info h2,
.price h2,
.cafe-access h2,
.cafe-hours .section-title,
.stay-info .section-title{
  font-family:Helvetica,Arial,sans-serif;
  font-weight:500;
  font-size:clamp(40px,5vw,72px);
  line-height:1;
  letter-spacing:.035em;
  margin:0;
}
/* Equivalent right-hand detail rows share the same reading scale. */
.menu-lines span,
.info-list span,
.price-list span,
.stay-grid span,
.hours-grid span{
  font-size:10px;
  letter-spacing:.18em;
}
.menu-lines p,
.info-list p{
  font-family:Helvetica,Arial,sans-serif;
  font-weight:500;
  font-size:13px;
  line-height:1.7;
  letter-spacing:.045em;
}
.menu-lines p{margin:10px 0 0;}
/* Standalone information sections use a real heading, not a small eyebrow label. */
.cafe-hours .section-title,
.stay-info .section-title{margin-bottom:55px;}
/* With mini labels removed, keep TOP notes visually intentional. */
.cafe-note,
.inn-note{padding-top:0;}

@media(max-width:820px){
  .cafe-menu,.room-info,.price{
    grid-template-columns:1fr;
    gap:38px;
    padding-top:78px;
    padding-bottom:78px;
  }
  .cafe-menu h2,.room-info h2,.price h2,.cafe-access h2,
  .cafe-hours .section-title,.stay-info .section-title{
    font-size:43px;
    line-height:1.02;
  }
  .cafe-hours .section-title,.stay-info .section-title{margin-bottom:38px;}
}


/* v28: show the full bathroom photo on Japanese INN detail, at all widths. */
.inn-page .inn-gallery .gallery-small{
  height:auto;
  aspect-ratio:auto;
}
.inn-page .inn-gallery .gallery-small img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* v32: allow English TOP heading to wrap within its existing column. */
html[lang="en"] .about-line-one{white-space:normal;}