/* Relaxing Calm Music — revamp, part 2: every page on the new look, with less scrolling.
   Short heroes with the page's first video beside the headline, jump links to every part of the page,
   tighter sections, and the carried-over page content ([data-legacy]) restyled to match. */

.hero.short{min-height:min(72svh,700px)}
.hero-txt{max-width:640px}
.hero.vid .hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center;padding-top:104px;padding-bottom:56px}
.hero.vid .d1{font-size:clamp(2.6rem,5.4vw,4.6rem)}
.hero.vid .hero-vid .ytcard{box-shadow:0 40px 80px -30px rgba(0,0,0,.8);background:rgba(4,6,5,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:900px){.hero.vid .hero-in{grid-template-columns:1fr;gap:28px}.hero.vid{align-items:flex-end}}
@media (max-width:760px){.hero.short{min-height:auto;padding-top:min(42vw,240px)}.hero.vid{padding-top:min(36vw,200px)}}

.jump{position:sticky;top:76px;z-index:60;background:rgba(4,6,5,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-block:1px solid var(--line)}
.jump .wrap{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:10px}
.jump .wrap::-webkit-scrollbar{display:none}
.jump a{flex:none;font-size:.8rem;color:var(--ink-2);text-decoration:none;padding:7px 14px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;transition:border-color .3s,color .3s}
.jump a:hover,.jump a.on{color:var(--ink);border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
html{scroll-padding-top:140px}

[data-legacy] .sec.lg,[data-legacy] section[data-lg]{padding-block:clamp(40px,5.5vw,72px);position:relative}
[data-legacy] .wrap{max-width:var(--wrap);padding-inline:var(--gut)}
[data-legacy] .reveal{opacity:1!important;transform:none!important;filter:none!important}
[data-legacy] .sec-head{max-width:680px;margin-bottom:clamp(22px,3vw,36px)}
[data-legacy] .sec-head.center{margin-inline:auto;text-align:center}
[data-legacy] .sec-head p{color:var(--ink-2);font-size:1rem;margin-top:12px}
[data-legacy] .eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--sans)!important;font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);background:none;border:0;padding:0;margin-bottom:14px}
[data-legacy] .sec-head.center .eyebrow{justify-content:center}
[data-legacy] .eyebrow::before,[data-legacy] .eyebrow::after{display:none}
[data-legacy] .eyebrow .k{color:var(--acc);font-size:.85rem;letter-spacing:.08em}
[data-legacy] h2.title{font-family:var(--sans)!important;font-weight:200;font-size:clamp(1.9rem,3.8vw,3rem);letter-spacing:-.025em;line-height:1.08;color:var(--ink);background:none;-webkit-text-fill-color:currentColor;text-transform:none;text-shadow:none;padding:0;margin:0;transform:none}
[data-legacy] h2.title::after{display:none}
[data-legacy] .panel h3,[data-legacy] .feat h4,[data-legacy] .tt{font-family:var(--sans)!important;font-weight:300;letter-spacing:-.01em;color:var(--ink);background:none;-webkit-text-fill-color:currentColor;transform:none}
[data-legacy] .panel h3{font-size:1.5rem;margin-bottom:12px}
[data-legacy] .glass{background:linear-gradient(180deg,rgba(236,239,234,.035),rgba(236,239,234,.012))!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;rotate:none!important}
[data-legacy] .glass::before,[data-legacy] .glass::after{display:none!important}
[data-legacy] .panel{padding:clamp(22px,3vw,36px)}
[data-legacy] .panel p,[data-legacy] .feat p,[data-legacy] .td,[data-legacy] .faq p{color:var(--ink-2)}
[data-legacy] .panel p{font-size:1.02rem;line-height:1.72;max-width:66ch}
[data-legacy] .tile{color:var(--ink);text-decoration:none;transition:border-color .4s}
[data-legacy] a.tile:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent)!important}
[data-legacy] .tk{color:var(--acc);font-family:var(--cjk)!important;background:none;-webkit-text-fill-color:currentColor;transform:none;text-shadow:none}
[data-legacy] .imgtile{border-radius:18px;border:1px solid var(--line);background-size:cover;background-position:center}
[data-legacy] .faq{max-width:820px;margin-inline:auto}
[data-legacy] .faq details{border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:none!important;box-shadow:none!important;margin:0!important}
[data-legacy] .faq summary{padding:18px 2px;font-size:1.04rem;color:var(--ink);font-family:var(--sans)}
[data-legacy] .faq details p{padding:0 2px 20px}
[data-legacy] .atmos{position:relative;min-height:min(56svh,520px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
[data-legacy] .atmos-img{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;filter:saturate(.85) brightness(.7)}
[data-legacy] .atmos::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,6,5,.92),rgba(4,6,5,.4) 60%,rgba(4,6,5,.2)),linear-gradient(180deg,var(--bg),transparent 18%,transparent 82%,var(--bg))}
[data-legacy] .atmos-quote{font-family:var(--sans)!important;font-weight:200;font-size:clamp(1.8rem,3.8vw,3rem);line-height:1.15;letter-spacing:-.02em;max-width:18ch;color:var(--ink);background:none;-webkit-text-fill-color:currentColor}
[data-legacy] .atmos-quote .k{display:block;font-size:.95rem;letter-spacing:.3em;color:var(--acc);margin-bottom:18px}
[data-legacy] .haiku{font-family:var(--cjk);color:var(--ink)}
[data-legacy] .haiku-en{font-family:var(--serif);font-style:italic;color:var(--ink-2)}
[data-legacy] table{border-collapse:collapse;width:100%}
[data-legacy] th,[data-legacy] td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left}
[data-legacy] #play .panel{border-color:color-mix(in srgb,var(--acc) 30%,var(--line))!important}
[data-legacy] .ea-crumb a{color:var(--acc)}
[data-legacy] .veil,[data-legacy] .cur,[data-legacy] .tex,[data-legacy] .prog,[data-legacy] .fab,[data-legacy] .sndfab,[data-legacy] canvas#dust,[data-legacy] canvas#field{display:none!important}
/* the old cards were sized for a 3D effect: let them fit their words */
[data-legacy] .tile,[data-legacy] .feat{min-height:0!important;aspect-ratio:auto!important;height:auto!important;justify-content:flex-start!important;padding:clamp(18px,2.4vw,26px)!important;gap:8px}
[data-legacy] .feat .tk,[data-legacy] .tile .tk{position:static!important;font-size:1.3rem!important;margin-bottom:6px;opacity:.9}
[data-legacy] .bento{gap:12px!important}
/* home: shorter full-width moments, so the page is quicker to move through */
.band{min-height:min(74svh,700px)}
.moment{min-height:min(76svh,720px)}
.sec{padding-block:clamp(64px,8vw,110px)}
.sec.tight{padding-block:clamp(44px,5.5vw,76px)}
/* phones: rows of videos swipe sideways instead of stacking into a long scroll */
@media (max-width:760px){
  .yt-grid{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none}
  .yt-grid::-webkit-scrollbar{display:none}
  .yt-grid .ytcard{flex:0 0 84%;scroll-snap-align:start}
}

/* ---------- bento: a page's parts side by side ---------- */
.story{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);align-items:start;padding-block:clamp(28px,4vw,52px)}
.story > section{grid-column:span 12;padding:0!important;min-width:0;margin:0}
.story > section > .wrap{max-width:none!important;padding:0!important;margin:0}
.story > [data-span="7"]{grid-column:span 7}.story > [data-span="5"]{grid-column:span 5}
.story > [data-span="8"]{grid-column:span 8}.story > [data-span="4"]{grid-column:span 4}
.story > section .sec-head{margin-bottom:clamp(14px,2vw,22px)}
.story > [data-span="4"] h2.title,.story > [data-span="5"] h2.title{font-size:clamp(1.5rem,2.3vw,2rem)!important}
.story > [data-span="4"] .bento,.story > [data-span="5"] .bento{grid-template-columns:1fr 1fr!important}
.story > [data-span="5"] .faq,.story > [data-span="7"] .faq{max-width:none}
.story > #haiku{align-self:stretch;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:18px;padding:clamp(20px,3vw,32px)!important;text-align:center}
.story > .atmos{border-radius:22px;min-height:min(44svh,420px)!important}
.story > section > .wrap > .glass.panel:only-child{height:100%}
@media (max-width:900px){.story > section{grid-column:span 12!important}}

/* ---------- home: smaller garden doors ---------- */
.door{min-height:clamp(300px,30vw,400px)}
.door p{font-size:.94rem}

/* ---------- home: the row of more videos, swiped sideways at every width ---------- */
.yt-row{display:flex!important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.yt-row .ytcard{flex:0 0 clamp(260px,30%,360px);scroll-snap-align:start}