/* Responsive and layout QA (Sage, 2026-10-16), loaded last on the homepage, content pages and booking routes.
   Fixes found in a 390 / 768 / 1440 pass. Each block names what it fixes; owners of the underlying files were told.
   Rules: no grey text (Kotaro), no view-transition-name here (Kira's language switch), /classes/ and .booking-v2
   are left to Kira and Robin, no !important on menu animation layers (Nico). */

/* Homepage: the hamburger floats over copy once the header slides away; give it a paper disc so it never
   sits on top of text. */
html.is-scrolled:not(.is-gnav-open) body .l-gnav-toggle{background:rgba(248,247,244,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50%;box-shadow:0 6px 18px -8px rgba(30,34,28,.35)}

/* Homepage: access line is justified, which opens wide gaps between words. */
html body .p-top-access__text{text-align:left!important}

/* Homepage footer: the legal links were styled as small uppercase labels, unlike every other footer link. */
html body .l-footer-bottom-link__item a{text-transform:none!important;letter-spacing:0!important}

/* Journal posts: the post image was forced into a 21:9 band, cutting portrait photos (the NYT flyer) to a strip.
   Show the whole picture, up to most of the screen height. */
html body .article__image{aspect-ratio:auto!important;max-height:none!important;display:flex;justify-content:center;background:var(--tcs-paper-2,#f0eee7)}
html body .article__image img{width:auto!important;max-width:100%;height:auto!important;max-height:min(82vh,900px);object-fit:contain!important}

/* Gifts: the portrait lantern photo in a 21:9 band showed only a sliver; frame the lanterns, not the ceiling. */
html body .page-hero__image img[src*="kyoto-lanterns"]{object-position:50% 38%}

/* Journal cards: portrait photos are cropped to 4:3; keep faces, which sit high in most travel photos. */
html body .journal-card img{object-position:50% 30%}

@media (max-width:900px){
 /* Content pages without a hero photo (Journal) kept the desktop 8/4 grid on phones, so the title ran one word
    per line beside a narrow intro. Single column. */
 html body .page-hero:not(:has(figure)),html body .page-hero{grid-template-columns:minmax(0,1fr)!important}
 html body .page-hero__copy .intro{grid-column:1!important;justify-self:start!important;margin-top:18px}
}

@media (max-width:767px){
 /* Homepage class carousel: the neighbouring cards' titles and prices peeked in as cut words at both edges.
    Only the photo of the neighbours shows; the centred card keeps its text. */
 html body .tcs-class-card:not(.is-active) :is(.tcs-class-card__head,.tcs-class-card__facts,.tcs-class-card__links){opacity:0;transition:opacity .35s ease}
 html body .tcs-class-card.is-active :is(.tcs-class-card__head,.tcs-class-card__facts,.tcs-class-card__links){opacity:1;transition:opacity .45s ease .1s}

 /* Homepage instructors: two cards side by side in a scroller cut the second one at "Chef Sh". Stack them. */
 html body .tcs-team__grid{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;gap:40px!important}
 html body .tcs-team__grid>li{width:auto!important;min-width:0!important;max-width:none!important}

 /* About film: the play button sat on the heading. Put it at the bottom right, clear of the caption. */
 html body .film__play{top:auto!important;bottom:22px!important;left:auto!important;right:6%!important}
 html body .film__caption{right:calc(6% + 84px)!important}

 /* Tap targets: footer and inline text links were 15-20px tall; give them a 40px hit area without moving text. */
 html body :is(.site-footer__links,.site-footer__social,.l-footer-nav__menu,.l-footer-bottom-link) a{display:inline-block;padding-block:9px}
 html body .info-list dd a{display:inline-block;padding-block:8px}
}

/* Homepage groups: the landscape group photo in a tall frame showed the concrete ceiling and cut the faces at the
   bottom edge. Frame the people. */
html body .tcs-groups-section img[src*="55-section-p-top-spa"]{object-position:50% 100%!important;scale:1.42;transform-origin:50% 96%}
html body .tcs-groups-section :has(>img[src*="55-section-p-top-spa"]){overflow:hidden}

/* Mobile editorial pass — October 18. Keep desktop composition intact. */
@media(max-width:767px){
 /* A consistent readable scale rather than desktop leads in narrow columns. */
 html body .page{--tcs-display:36px;--tcs-hero:44px;--tcs-title:28px;--tcs-lead:17px}
 html[lang=ja] body .page{--tcs-display:30px;--tcs-hero:36px;--tcs-title:26px}
 html body .page h2{line-height:1.18!important}
 html body .page h3{line-height:1.25!important}
 html body .page-hero h1{text-wrap:balance}
 html body .page-hero__copy .intro{margin-top:26px!important}
 html body .page-section{padding-block:64px}
 html body .story-chapter{padding-block:48px;row-gap:28px}
 html body .story-chapter p{font-size:16px!important;line-height:1.75!important}
 html body .page-hero__image{margin-top:36px!important}

 /* Let the film caption use the frame width; the play control has its own row. */
 html body .film__caption{left:24px!important;right:24px!important;bottom:104px!important;max-width:none!important}
 html body .film__title{font-size:34px!important;line-height:1.13!important}
 html body .film__text{font-size:14px!important;line-height:1.6!important;max-width:32ch}
 html body .film .kicker{margin-bottom:16px}

 /* News: full-width photographs and headlines, with no squeezed side column. */
 html body .p-news__list-item-link{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
 html body .p-news__list-item-image{width:100%!important;max-width:none!important;min-width:0!important;height:auto!important;aspect-ratio:3/2}
 html body .p-news__list-item-image img{width:100%;height:100%;object-fit:cover}
 html body .p-news__list-item-body{width:auto;min-width:0}
 html body .p-news__list-item-heading .c-link-anim__item{font-size:26px!important;line-height:1.2!important}
 html body .p-news__list-item{padding-block:28px}
 html body .tcs-news-excerpt{font-size:16px!important;line-height:1.65!important}

 /* Dishes: one generous photograph per row, with copy below it. */
 html body .tcs-made__wash{display:none}
 html body .tcs-made__list{border-top:0}
 html body .tcs-made__list li{padding-block:28px}
 html body .tcs-made__list li:first-child{padding-top:0}
 html body .tcs-made__row{grid-template-columns:minmax(0,1fr) 36px;gap:20px 16px;padding:0;overflow:visible}
 html body .tcs-made__thumb{grid-column:1/-1;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
 html body .tcs-made__main{gap:10px}
 html body .tcs-made .tcs-made__name{font-size:26px!important;line-height:1.2!important}
 html body .tcs-made .tcs-made__desc{font-size:16px!important;line-height:1.65!important}
 html body .tcs-made__go{width:36px;height:36px;align-self:start}

 /* Give the people and the final invitation deliberate photographic framing. */
 html body .tcs-team__photo{aspect-ratio:4/5}
 html body .tcs-close{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:0}
 html body .tcs-close__media{position:relative;inset:auto;overflow:hidden}
 html body .tcs-close__media img{position:relative;width:100%!important;height:auto!important;display:block;transform:none!important}
 html body .tcs-close__media::after{display:none}
 html body .tcs-close__inner{padding:40px 24px 48px;background:#263228}
 html body .tcs-close__actions{align-items:flex-start;flex-direction:column;gap:22px}
 html body .tcs-close .tcs-close__title{font-size:42px!important;line-height:1.12!important;margin-bottom:28px}

 /* Sentence-form selects must stay inside the mobile text column. */
 html body .sf__select{max-width:100%;vertical-align:baseline}
 html body .sf__select select{max-width:min(100%,calc(100vw - 64px))}

 html body .journal-card img[src*="inspired-by-france"]{object-position:50% 75%}

 /* Class detail instructor: the desktop side column was too narrow to read. */
 html body .tcs-class .tc-teacher{grid-template-columns:minmax(0,1fr);gap:24px}
 html body .tcs-class .tc-teacher img{width:100%;max-height:380px;aspect-ratio:4/3;object-position:50% 30%}
 html body .tcs-class .tc-teacher h3{line-height:1.2}
 html body .tcs-classes .tc-strip__label,html[lang=ja] body .tcs-classes .tc-strip__label{white-space:normal;overflow:visible;text-overflow:clip;font-size:23px;line-height:1.2;left:20px;right:20px}
 html body .tcs-classes .tc-strip__detail h2{font-size:34px;line-height:1.15}
 html body .tcs-classes .tc-strip__detail{padding:24px}
 html body .tcs-classes .tc-tabs{min-width:0}
 html body .tcs-classes .tc-tabs button{min-width:0;white-space:normal;line-height:1.25;padding:10px 4px}
 html body .tcs-classes .tc-hero h1{line-height:1.14}
 html body .tcs-class .tc-cover h1{font-size:40px;line-height:1.15}
 html body .tcs-class .tc-cover__photo{aspect-ratio:1/1}

 /* One clear booking dock, with its own surface instead of a pill over prose. */
 html.is-gnav-open .tcs-book-dock{display:none}
 .tcs-book-dock{position:fixed;inset:auto 0 0;z-index:20030;padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(248,247,244,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -1px 0 rgba(41,45,40,.08)}
 html[lang] body .tcs-book-dock #tcs-book-now{position:relative!important;inset:auto!important;width:100%!important;height:52px;padding:5px 5px 5px 23px;box-shadow:none!important;border:0}
 html[lang] body .tcs-book-dock #tcs-book-now .c-floating-reservation__inner{justify-content:space-between}
 html body:has(.tcs-book-dock){padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}

 /* Compact, even footer rhythm with full-size tap targets. */
 html body .tcs-footer .l-footer-nav{gap:24px;align-items:flex-start}
 html body .tcs-footer .l-footer-nav__menu{gap:2px}
 html body .tcs-footer .l-footer-nav__menu-item{margin:0!important}
 html body .tcs-footer .l-footer-nav__menu-item a{min-height:44px;padding-block:11px}
 html body .site-footer__links{gap:4px 24px}
 html body .site-footer__links a{min-height:44px;padding-block:11px}
 html body .site-footer{padding-top:48px;padding-bottom:32px;min-width:0}
 html body .site-footer__top>*{min-width:0}
 html body .site-footer .brand{white-space:normal;font-size:clamp(24px,7vw,30px)!important;line-height:1.25!important}
 html body .site-footer p{overflow-wrap:anywhere}
 html body .site-footer a[href^="tel:"]{white-space:nowrap}
 html body .site-footer__top{padding-bottom:32px!important;gap:32px}
 html body .site-footer__social{gap:4px}
 html body .site-footer__social a{min-height:44px}
}
@media(min-width:768px){.tcs-book-dock{display:contents}}