/* /classes/ list and /class/ page (Kira, 2026-10-15). Kotaro picked prototype 2 (expanding photo strips) for the list
   and A (the strip opens into a full-bleed page with a sticky booking card) for the class page. Prototypes:
   tcs/prototypes/. Scoped to main.tcs-classes / main.tcs-class, so the reservation / checkout views sharing flow.css
   are untouched. TCS system: Cardo display, Inter text, solid ink and cream only (no grey text), green surfaces and
   buttons, orange only on go-arrow circles. Motion: content rises 8px, photos fade in, ease (.22,1,.36,1); the strips
   use the componentry-bouncy-accordion spring curve. Provenance: classes-provenance.json. */
main:is(.tcs-classes,.tcs-class){
  --ink:#292d28;--green:#263228;--card:#1f2921;--cream:#f6f4ee;--sand:#eeebe3;--orange:#e37222;--rule:rgba(41,45,40,.18);
  --serif:Cardo,'Noto Serif JP',serif;--sans:Inter,'Noto Sans JP',system-ui,sans-serif;
  --gutter:clamp(20px,5vw,80px);--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.3,.5,1);
  max-width:none;margin:0;padding:0;color:var(--ink);font-family:var(--sans);overflow-x:clip
}
main:is(.tcs-classes,.tcs-class) *{box-sizing:border-box}
main:is(.tcs-classes,.tcs-class) :is(h1,h2,h3,p,ul){margin:0}
main:is(.tcs-classes,.tcs-class) a{color:inherit}
main:is(.tcs-classes,.tcs-class) img{display:block}
:is(.tcs-classes,.tcs-class) .tc-eyebrow{display:flex;align-items:center;gap:14px;font:500 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:inherit}
:is(.tcs-classes,.tcs-class) .tc-eyebrow::before{content:"";width:32px;height:1px;background:currentColor}
:is(.tcs-classes,.tcs-class) .tc-tags{display:flex;flex-wrap:wrap;gap:8px}
:is(.tcs-classes,.tcs-class) .tc-tags span{padding:7px 13px;border:1px solid currentColor;border-radius:999px;font-size:13px;line-height:1.2;white-space:nowrap}
:is(.tcs-classes,.tcs-class) .tc-go{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 6px 6px 22px;border-radius:999px;background:var(--green);color:var(--cream);font:500 15px/1 var(--sans);text-decoration:none;white-space:nowrap;flex:none;transition:scale .3s var(--ease)}
:is(.tcs-classes,.tcs-class) .tc-go i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;transition:transform .4s var(--ease)}
:is(.tcs-classes,.tcs-class) .tc-go svg{width:15px;height:10px}
:is(.tcs-classes,.tcs-class) .tc-go:hover i{transform:translateX(3px)}
:is(.tcs-classes,.tcs-class) .tc-go:active{scale:.97}
:is(.tcs-classes,.tcs-class) img.tc-fade{opacity:0;transition:opacity .7s var(--ease)}
:is(.tcs-classes,.tcs-class) img.tc-fade.is-loaded{opacity:1}
@keyframes tc-rise8{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}

/* ---------- List: hero ---------- */
.tcs-classes .tc-hero{max-width:1440px;margin:0 auto;padding:clamp(56px,7vw,112px) var(--gutter) clamp(36px,4vw,64px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}
.tcs-classes .tc-hero>*{animation:tc-rise8 .8s var(--ease) both}
.tcs-classes .tc-hero .tc-eyebrow{grid-column:1/-1;margin-bottom:clamp(22px,2.4vw,36px)}
.tcs-classes .tc-hero h1{grid-column:1/9;font:400 clamp(48px,7vw,112px)/.96 var(--serif);letter-spacing:-.015em;text-wrap:balance;animation-delay:.06s}
.tcs-classes .tc-lead{grid-column:9/-1;align-self:end;font-size:clamp(16px,1.25vw,19px);line-height:1.65;text-wrap:pretty;padding-bottom:.4em;animation-delay:.14s}

/* ---------- List: expanding strips ---------- */
.tcs-classes .tc-strips{display:flex;gap:10px;height:min(78vh,780px);min-height:560px;max-width:1600px;margin:0 auto;padding:0 var(--gutter)}
.tcs-classes .tc-strip{position:relative;flex:1 1 0;min-width:0;border-radius:20px;overflow:hidden;color:#fff;background:var(--card);cursor:pointer;transition:flex .75s var(--spring);animation:tc-rise8 .8s var(--ease) both}
.tcs-classes .tc-strip:nth-child(2){animation-delay:.05s}.tcs-classes .tc-strip:nth-child(3){animation-delay:.1s}.tcs-classes .tc-strip:nth-child(4){animation-delay:.15s}.tcs-classes .tc-strip:nth-child(5){animation-delay:.2s}
.tcs-classes .tc-strip.is-open{flex:5 1 0}
.tcs-classes .tc-strip>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.3s var(--ease),opacity .7s var(--ease)}
.tcs-classes .tc-strip.is-open>img{transform:scale(1)}
.tcs-classes .tc-strip::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(20,26,22,.92) 0%,rgba(20,26,22,.4) 45%,rgba(20,26,22,.12) 100%)}
.tcs-classes .tc-strip__open{position:absolute;inset:0;z-index:1}
.tcs-classes .tc-strip:not(.is-open) .tc-strip__open{pointer-events:none}
.tcs-classes .tc-strip__label{position:absolute;z-index:2;left:50%;bottom:26px;translate:-50% 0;writing-mode:vertical-rl;rotate:180deg;font:400 24px/1 var(--serif);white-space:nowrap;transition:opacity .3s var(--ease);pointer-events:none}
.tcs-classes .tc-strip__label span{display:block;margin-bottom:14px;font-size:15px}
.tcs-classes .tc-strip.is-open .tc-strip__label{opacity:0}
.tcs-classes .tc-strip__detail{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(24px,3vw,48px);opacity:0;translate:0 12px;transition:opacity .3s var(--ease),translate .5s var(--ease);pointer-events:none}
.tcs-classes .tc-strip.is-open .tc-strip__detail{opacity:1;translate:0 0;transition-delay:.22s}
.tcs-classes .tc-strip.is-open .tc-strip__detail a{pointer-events:auto}
.tcs-classes .tc-strip__detail h2{font:400 clamp(40px,4.4vw,74px)/1 var(--serif);letter-spacing:-.01em;margin:16px 0 14px;white-space:nowrap;color:#fff}
.tcs-classes .tc-strip__desc{max-width:44ch;font-size:16px;line-height:1.6}
.tcs-classes .tc-strip .tc-tags{margin:20px 0 26px}
.tcs-classes .tc-strip .tc-tags span{border-color:rgba(255,255,255,.4)}
.tcs-classes .tc-strip__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.tcs-classes .tc-strip .tc-go{background:var(--cream);color:var(--green)}
.tcs-classes .tc-strip__more{font:500 15px/1 var(--sans);color:#fff;text-decoration:none;padding-bottom:5px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.tcs-classes .tc-strip__more:hover{background-size:0 1px;background-position:100% 100%}
.tcs-classes .tc-strip:focus-within{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- List: good to know (tabs over a transition panel) ---------- */
.tcs-classes .tc-know{max-width:1440px;margin:clamp(80px,9vw,150px) auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:start}
.tcs-classes .tc-know__head{grid-column:1/5}
.tcs-classes .tc-know__head .tc-eyebrow{margin-bottom:20px}
.tcs-classes .tc-know__head h2{font:400 clamp(36px,3.8vw,62px)/1 var(--serif);letter-spacing:-.01em}
.tcs-classes .tc-know__panel{grid-column:6/-1;padding:clamp(22px,2.4vw,36px);border-radius:20px;background:var(--sand)}
.tcs-classes .tc-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(41,45,40,.07);margin-bottom:clamp(24px,2.6vw,36px)}
.tcs-classes .tc-tabs button{flex:1;padding:12px 14px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:500 14px/1 var(--sans);white-space:nowrap;cursor:pointer;transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.tcs-classes .tc-tabs button[aria-selected="true"]{background:#fff;box-shadow:0 6px 18px -10px rgba(20,28,22,.35)}
.tcs-classes .tc-tabs button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.tcs-classes .tb-transition-panel{min-height:150px}
.tcs-classes .tb-transition-panel h3{font:400 clamp(24px,2vw,32px)/1.15 var(--serif);margin-bottom:14px}
.tcs-classes .tb-transition-panel p{font-size:16px;line-height:1.7;max-width:56ch}
.tcs-classes .tb-transition-panel a{text-underline-offset:4px;font-weight:500}

/* ---------- Class page: the strip opened full-bleed ---------- */
.tcs-class .tc-cover{position:relative;height:min(86vh,860px);min-height:540px;margin:12px;border-radius:24px;overflow:hidden;color:#fff;background:var(--card);animation:tc-open 1s var(--ease) both}
@keyframes tc-open{from{clip-path:inset(0 36% round 24px)}to{clip-path:inset(0 0 round 24px)}}
.tcs-class .tc-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tcs-class .tc-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,26,22,.88),rgba(20,26,22,.2) 55%,rgba(20,26,22,.12))}
.tcs-class .tc-back{position:absolute;z-index:2;top:22px;left:22px;display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;background:rgba(20,26,22,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:500 14px/1 var(--sans);color:#fff;text-decoration:none;transition:background .3s}
.tcs-class .tc-back:hover{background:rgba(20,26,22,.65)}
.tcs-class .tc-cover__in{position:absolute;z-index:2;left:clamp(24px,4vw,64px);right:clamp(24px,4vw,64px);bottom:clamp(28px,4vw,60px)}
.tcs-class .tc-cover__in>*{animation:tc-rise8 .8s var(--ease) both}
.tcs-class .tc-cover__in .tc-eyebrow{animation-delay:.35s}
.tcs-class .tc-cover h1{font:400 clamp(56px,8vw,132px)/.95 var(--serif);letter-spacing:-.015em;margin:18px 0 22px;color:#fff;text-wrap:balance;animation-delay:.42s}
.tcs-class .tc-cover .tc-tags{animation-delay:.5s}
.tcs-class .tc-cover .tc-tags span{border-color:rgba(255,255,255,.5)}

.tcs-class .tc-page{max-width:1440px;margin:0 auto;padding:clamp(56px,6vw,100px) var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(40px,6vw,110px);align-items:start}
.tcs-class .tc-main>section{padding-bottom:clamp(44px,5vw,76px);margin-bottom:clamp(44px,5vw,76px);border-bottom:1px solid var(--rule)}
.tcs-class .tc-main>section:last-child{border:0;margin-bottom:0;padding-bottom:0}
.tcs-class .tc-main .tc-eyebrow{margin-bottom:20px}
.tcs-class .tc-lead{font-size:clamp(18px,1.4vw,22px);line-height:1.6;max-width:50ch;text-wrap:pretty}
.tcs-class .tc-cook{padding:0;list-style:none;font:italic 400 clamp(28px,2.8vw,44px)/1.25 var(--serif)}
.tcs-class .tc-pair{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-top:36px}
.tcs-class .tc-pair img{width:100%;height:100%;min-height:300px;aspect-ratio:4/5;object-fit:cover;border-radius:16px}
.tcs-class .tc-pair img:first-child{aspect-ratio:auto}
.tcs-class .tc-teacher{display:grid;grid-template-columns:170px 1fr;gap:30px;align-items:center}
.tcs-class .tc-teacher img{width:170px;aspect-ratio:4/5;object-fit:cover;border-radius:14px}
.tcs-class .tc-teacher .tc-eyebrow{margin-bottom:10px}
.tcs-class .tc-teacher h3{font:400 clamp(28px,2.4vw,36px)/1.1 var(--serif);margin-bottom:12px}
.tcs-class .tc-teacher p:not(.tc-eyebrow){font-size:16px;line-height:1.7;max-width:56ch}
.tcs-class .tc-faq details{border-top:1px solid var(--rule);padding:18px 0}
.tcs-class .tc-faq details:last-child{border-bottom:1px solid var(--rule)}
.tcs-class .tc-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;list-style:none;font:400 clamp(21px,1.7vw,25px)/1.25 var(--serif)}
.tcs-class .tc-faq summary::-webkit-details-marker{display:none}
.tcs-class .tc-faq summary::after{content:"+";flex:none;font:300 26px/1 var(--sans);transition:rotate .4s var(--ease)}
.tcs-class .tc-faq details[open] summary::after{rotate:45deg}
.tcs-class .tc-faq details p{margin-top:12px;font-size:16px;line-height:1.7;max-width:60ch}
.tcs-class .tc-faq details[open] p{animation:tc-rise8 .5s var(--ease) both}

/* sticky booking card */
.tcs-class .tc-book{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:22px;background:#fff;box-shadow:0 30px 60px -36px rgba(20,28,22,.42);animation:tc-rise8 .8s var(--ease) .3s both}
.tcs-class .tc-book__price b{font:400 46px/1 var(--serif)}
.tcs-class .tc-book__price span{margin-left:6px;font-size:15px}
.tcs-class .tc-seg{display:flex;padding:4px;border-radius:999px;background:rgba(41,45,40,.07)}
.tcs-class .tc-seg button{flex:1;padding:11px 10px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:500 14px/1 var(--sans);cursor:pointer;transition:background .45s var(--ease),color .3s,box-shadow .45s var(--ease)}
.tcs-class .tc-seg button[aria-pressed="true"]{background:var(--green);color:var(--cream);box-shadow:0 6px 16px -10px rgba(20,28,22,.5)}
.tcs-class .tc-step{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:15px}
.tcs-class .tc-step div{display:flex;align-items:center;gap:14px}
.tcs-class .tc-step button{width:38px;height:38px;border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--ink);font-size:18px;line-height:1;cursor:pointer;transition:background .3s var(--ease),border-color .3s}
.tcs-class .tc-step button:hover:not(:disabled){background:var(--sand);border-color:var(--ink)}
.tcs-class .tc-step button:disabled{opacity:.35;cursor:default}
.tcs-class .tc-step output{min-width:2ch;text-align:center;font:500 18px/1 var(--sans)}
.tcs-class .tc-total{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.tcs-class .tc-total b{font:400 28px/1 var(--serif);font-variant-numeric:tabular-nums}
.tcs-class .tc-book .tc-go{width:100%}
.tcs-class .tc-book__fine{font-size:13px;line-height:1.5}

/* more classes: mini strips */
.tcs-class .tc-others{max-width:1440px;margin:0 auto;padding:0 var(--gutter) clamp(80px,9vw,140px)}
.tcs-class .tc-others h2{font:400 clamp(32px,3.4vw,54px)/1.05 var(--serif);margin-bottom:28px}
.tcs-class .tc-mini{display:flex;gap:10px;height:320px}
.tcs-class .tc-mini a{position:relative;flex:1 1 0;min-width:0;border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;background:var(--card);transition:flex .75s var(--spring)}
.tcs-class .tc-mini a:hover,.tcs-class .tc-mini a:focus-visible{flex:2.4 1 0}
.tcs-class .tc-mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .7s var(--ease)}
.tcs-class .tc-mini a:hover img{transform:scale(1.04)}
.tcs-class .tc-mini a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,26,22,.85),transparent 60%)}
.tcs-class .tc-mini span{position:absolute;z-index:1;left:20px;right:20px;bottom:18px;font:400 24px/1.1 var(--serif)}

/* ---------- Private & groups band (both pages) ---------- */
:is(.tcs-classes,.tcs-class) .tc-private{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end;padding:clamp(72px,9vw,150px) max(var(--gutter),calc((100% - 1440px)/2 + var(--gutter)));background:var(--green);color:var(--cream)}
:is(.tcs-classes,.tcs-class) .tc-private>div:first-child{grid-column:1/8}
:is(.tcs-classes,.tcs-class) .tc-private .tc-eyebrow{margin-bottom:24px}
:is(.tcs-classes,.tcs-class) .tc-private h2{font:400 clamp(40px,5vw,84px)/1 var(--serif);color:#fff;margin-bottom:24px;text-wrap:balance}
:is(.tcs-classes,.tcs-class) .tc-private p:not(.tc-eyebrow){font-size:clamp(16px,1.2vw,18px);line-height:1.65;max-width:46ch}
:is(.tcs-classes,.tcs-class) .tc-private__links{grid-column:9/-1;display:flex;flex-direction:column}
:is(.tcs-classes,.tcs-class) .tc-private__links a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;border-top:1px solid rgba(246,244,238,.28);font:400 clamp(20px,1.7vw,26px)/1.2 var(--serif);text-decoration:none;color:var(--cream)}
:is(.tcs-classes,.tcs-class) .tc-private__links a:last-child{border-bottom:1px solid rgba(246,244,238,.28)}
:is(.tcs-classes,.tcs-class) .tc-private__links i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;transition:transform .4s var(--ease),background .3s,color .3s}
:is(.tcs-classes,.tcs-class) .tc-private__links svg{width:15px;height:10px}
:is(.tcs-classes,.tcs-class) .tc-private__links a:hover i{transform:translateX(4px);background:var(--cream);color:var(--green)}

/* ---------- Japanese ---------- */
html[lang=ja] :is(.tcs-classes,.tcs-class) :is(h1,h2,h3){word-break:auto-phrase;letter-spacing:.02em;line-height:1.25}
html[lang=ja] .tcs-classes .tc-hero h1{font-size:clamp(40px,5.4vw,88px)}
html[lang=ja] .tcs-classes .tc-strip__detail h2{font-size:clamp(32px,3.4vw,56px)}
html[lang=ja] .tcs-classes .tc-strip__label{rotate:none;font-size:22px}
html[lang=ja] .tcs-classes .tc-strip__label span{margin:0 0 12px}
html[lang=ja] .tcs-class .tc-cover h1{font-size:clamp(44px,6vw,100px)}
html[lang=ja] .tcs-class .tc-cook{font-style:normal}
html[lang=ja] :is(.tcs-classes,.tcs-class) .tc-eyebrow{letter-spacing:.08em}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .tcs-class .tc-page{grid-template-columns:1fr}
  .tcs-class .tc-book{position:static;max-width:520px}
}
@media(max-width:900px){
  .tcs-classes .tc-hero h1,.tcs-classes .tc-lead{grid-column:1/-1}
  .tcs-classes .tc-lead{margin-top:24px;max-width:52ch}
  .tcs-classes .tc-know__head,.tcs-classes .tc-know__panel{grid-column:1/-1}
  .tcs-classes .tc-know__head{margin-bottom:28px}
  :is(.tcs-classes,.tcs-class) .tc-private>div:first-child,:is(.tcs-classes,.tcs-class) .tc-private__links{grid-column:1/-1}
  :is(.tcs-classes,.tcs-class) .tc-private__links{margin-top:40px}
}
@media(max-width:800px){
  /* strips stack and open downward */
  .tcs-classes .tc-strips{flex-direction:column;height:auto;min-height:0;gap:8px}
  .tcs-classes .tc-strip{flex:none;height:92px;transition:height .75s var(--spring)}
  .tcs-classes .tc-strip.is-open{flex:none;height:560px}
  .tcs-classes .tc-strip__label,html[lang=ja] .tcs-classes .tc-strip__label{writing-mode:horizontal-tb;rotate:none;left:22px;right:22px;bottom:auto;top:50%;translate:0 -50%;font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tcs-classes .tc-strip__label span,html[lang=ja] .tcs-classes .tc-strip__label span{display:inline;margin:0 12px 0 0}
  .tcs-classes .tc-strip__detail h2{white-space:normal;font-size:40px}
  .tcs-classes .tc-tabs button{font-size:12.5px;padding:11px 6px}
  .tcs-class .tc-cover{margin:8px;border-radius:20px;height:78vh;min-height:480px}
  .tcs-class .tc-pair{grid-template-columns:1fr}
  .tcs-class .tc-pair img,.tcs-class .tc-pair img:first-child{min-height:0;aspect-ratio:4/3}
  .tcs-class .tc-teacher{grid-template-columns:110px 1fr;gap:20px}
  .tcs-class .tc-teacher img{width:110px}
  .tcs-class .tc-mini{flex-direction:column;height:auto}
  .tcs-class .tc-mini a,.tcs-class .tc-mini a:hover{flex:none;height:110px}
}
@media(prefers-reduced-motion:reduce){
  :is(.tcs-classes,.tcs-class) *,:is(.tcs-classes,.tcs-class) *::before,:is(.tcs-classes,.tcs-class) *::after{animation:none!important;transition:none!important}
  :is(.tcs-classes,.tcs-class) img.tc-fade{opacity:1}
}
/* Phones and tablets: the booking card comes straight after the cover instead of after all the content. */
@media(max-width:1000px){.tcs-class .tc-book{order:-1;max-width:none}}

/* Cover, split (Kira 2026-10-15, after Kotaro: the full-bleed crop "doesn't show me anything"). Every class photo is a
   900×1080 portrait; stretched across a ~3:1 band it lost its subject and went soft. Now the photo keeps its own
   portrait shape on the right (the open strip, grown), framed on its subject (tcFocus in flow.js), and the title sits
   on a dark panel beside it. Overrides the earlier full-bleed cover rules above. */
.tcs-class .tc-cover{display:grid;grid-template-columns:minmax(0,1fr) auto;height:min(82vh,820px);min-height:520px;background:var(--card);animation:none}
.tcs-class .tc-cover::after{content:none}
.tcs-class .tc-cover__photo{position:relative;height:100%;aspect-ratio:5/6;max-width:56vw;overflow:hidden;animation:tc-open-strip 1.05s var(--ease) both}
@keyframes tc-open-strip{from{clip-path:inset(0 0 0 62%)}to{clip-path:inset(0 0 0 0)}}
.tcs-class .tc-cover__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tcs-class .tc-cover__in{position:relative;inset:auto;grid-column:1;grid-row:1;align-self:end;padding:clamp(28px,4vw,64px);padding-top:110px}
.tcs-class .tc-cover h1{font-size:clamp(48px,6vw,104px)}
.tcs-class .tc-cover__lead{max-width:40ch;margin:-4px 0 26px;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--cream);animation-delay:.46s}
.tcs-class .tc-back{background:rgba(246,244,238,.12)}
.tcs-class .tc-back:hover{background:rgba(246,244,238,.22)}
html[lang=ja] .tcs-class .tc-cover h1{font-size:clamp(40px,4.8vw,84px)}
@media(max-width:800px){
  .tcs-class .tc-cover{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;min-height:0}
  .tcs-class .tc-cover__photo{grid-row:1;width:100%;max-width:none;height:auto;aspect-ratio:4/5}
  .tcs-class .tc-cover__in{grid-row:2;padding:28px 22px 30px}
  .tcs-class .tc-cover h1,html[lang=ja] .tcs-class .tc-cover h1{font-size:44px}
}