.ml-home main p{color:inherit}
.ml-home .hero{display:block;padding:0;gap:normal;align-items:normal;grid-template-columns:none}
.ml-home main .eyebrow{font-size:11px!important}
/* Home page, preview rebuild (2026-10-26). Pairs with the About preview (same tokens, fonts, header, footer, shelf).
   Brand: warm cream grounds, deep navy, coral only for marks.
   Manrope + DM Sans (live woff2), Georgia italic for second lines (live .ml-page main em).
   Grounds hand off by gradient: no section rules, cards or boxed panels. */

html:has(> body.ml-home){
  --paper:#f8f5ed;          /* live --ml-paper */
  --warm:#f2e8d8;           /* the hero warms into this: the Real Colors ground */
  --wall:#f5eee4;           /* the plaster wall of the Systems scene */
  --sand:#efe6d6;
  --beige:#efe6d8;
  --navy:#172d3d;           /* live --ml-ink */
  --ink-a:#172d3d;
  --muted-a:#52616c;        /* 5.9:1 on paper */
  --coral:#f04d49;          /* brand coral: marks and lines only */
  --accent:#c8372f;         /* accent phrase on light grounds, 4.8:1 */
  --accent-dk:#f47b70;      /* accent phrase on navy, 5.3:1 */
  --cream:#f8f5ed;
  --cream-2:#c8d2d9;        /* body copy on navy */
  --cream-3:#a9b9c3;        /* small labels on navy */
  /* Real Colors (lightened from the live petal gradients so navy type stays AA on them) */
  --rc-blue:#8fc6e5;  --rc-blue-1:#c4e4f4;
  --rc-gold:#ebc96f;  --rc-gold-1:#f7e5b4;
  --rc-orange:#ef9f72;--rc-orange-1:#fbd2b4;
  --rc-green:#acc59c; --rc-green-1:#dbe8cc;
  --header-h:86px;
  --serif:Georgia,"Times New Roman",serif;
  --gut:max(44px,calc((100vw - 1440px) / 2));
}
@media (max-width:1250px){html:has(> body.ml-home){--header-h:78px}}
@media (max-width:850px){html:has(> body.ml-home){--gut:24px}}
@media (max-width:600px){html:has(> body.ml-home){--header-h:74px;--gut:20px}}
@media (max-width:360px){html:has(> body.ml-home){--gut:16px}}

.ml-home *,.ml-home *::before,.ml-home *::after{box-sizing:border-box}
html:has(> body.ml-home){scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body.ml-home{margin:0;background:var(--warm);color:var(--ink-a);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
.ml-home img{display:block;max-width:100%;height:auto}
.ml-home a{color:inherit;text-decoration:none}
.ml-home button{font:inherit;cursor:pointer;color:inherit}
.ml-home p,.ml-home h1,.ml-home h2,.ml-home h3,.ml-home figure,.ml-home blockquote{margin:0}
.ml-home main{overflow-x:clip}
.ml-home a:focus-visible,.ml-home button:focus-visible,.ml-home summary:focus-visible{outline:2px solid var(--coral);outline-offset:5px;border-radius:2px}
.ml-home .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:1250px){.ml-home.homepage .site-header .nav.is-open{display:flex}}
/* 44px hit areas on the copied header, without changing how it looks */
@media (min-width:1251px){.ml-home.homepage .site-header .nav>a:not(.button){display:inline-flex;align-items:center;min-height:44px}}
.ml-home .language-switch button{position:relative}
.ml-home .language-switch button::after{content:"";position:absolute;inset:-6px -2px}
.ml-home .brand,.ml-home .footer-brand{min-height:44px}
@media (max-width:600px){.ml-home.homepage .menu-toggle{width:44px;height:44px;padding:12px}}

.ml-home main h1,.ml-home main h2,.ml-home main h3{font-family:var(--display);font-weight:650;letter-spacing:-.055em;color:inherit;margin:0}
.ml-home main em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.045em}
.ml-home main h2 em,.ml-home main h3 em{color:var(--accent)}
.ml-home .eyebrow{font-size:11px;font-weight:750;letter-spacing:.14em;line-height:1.7;margin-bottom:20px}
.ml-home .poster{font-size:clamp(46px,7vw,124px);line-height:.98;letter-spacing:-.06em;text-wrap:balance}
.ml-home .poster em{letter-spacing:-.035em}

.ml-home .btn{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;padding:16px 23px;min-height:55px;background:var(--navy);color:#fff;font-size:14px;font-weight:650;line-height:1.4;border-radius:3px;box-shadow:0 7px 14px #172d3d14;transition:background .18s,transform .18s}
.ml-home .btn>span:last-child{font-size:20px;line-height:1}
.ml-home .btn:hover{background:#304c5d;transform:translateY(-2px)}
.ml-home .btn--light{background:var(--cream);color:var(--navy)}
.ml-home .btn--light:hover{background:#ecd9bf}
.ml-home .text-link{display:inline-flex;align-items:center;gap:18px;min-height:44px;border-bottom:1px solid currentColor;font-size:13px;font-weight:650;line-height:1.4}
.ml-home .text-link:hover{color:var(--accent)}
.ml-home .actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px}

/* =========================================================
   I · Hero: wordmark edge to edge, Chad and Fallon in front
   ========================================================= */
.ml-home .hero{--mk:22.6vw;position:relative;overflow:hidden;isolation:isolate;min-height:max(640px,calc(100svh - var(--header-h)));
  background:linear-gradient(to bottom,var(--paper) 0,var(--paper) 58%,#f6f0e5 80%,var(--warm) 100%)}
.ml-home .hero-mark{position:absolute;left:0;right:0;top:clamp(2px,1vw,22px);z-index:0;display:flex;justify-content:center;pointer-events:none;user-select:none;will-change:transform;transform-origin:50% 0}
.ml-home .hero-mark span{display:block;font-family:var(--display);font-weight:800;font-size:var(--mk);line-height:.78;letter-spacing:-.075em;color:var(--navy);white-space:nowrap;transform:scaleY(1.14);transform-origin:center top}
.ml-home .hero-portrait{position:absolute;z-index:1;left:65%;bottom:0;height:calc(100% - 3.6vw);aspect-ratio:1086/1448;transform-origin:50% 100%;translate:-50% 0;will-change:transform}
.ml-home .hero-portrait img{width:100%;height:100%;object-fit:contain;object-position:bottom;-webkit-mask-image:linear-gradient(to bottom,#000 66%,rgba(0,0,0,.6) 82%,transparent 97%);mask-image:linear-gradient(to bottom,#000 66%,rgba(0,0,0,.6) 82%,transparent 97%)}
.ml-home .hero-copy{position:relative;z-index:2;width:min(46vw,700px);margin-left:var(--gut);padding:calc(var(--mk) * .78 * 1.14 + clamp(28px,3vw,52px)) 0 clamp(40px,5vh,64px)}
.ml-home .hero h1,html[lang="es"] .ml-home .hero h1{font-size:clamp(48px,5.6vw,92px);font-weight:800;line-height:.98;letter-spacing:-.06em;margin-bottom:22px}
.ml-home .hero h1>span{display:block}
.ml-home .hero h1 em{display:block;font-weight:400;letter-spacing:-.045em;color:var(--accent);margin-top:.04em}
.ml-home .hero-lead{font:400 clamp(18px,1.55vw,24px)/1.45 var(--serif);max-width:520px;margin-bottom:28px}
.ml-home .timely{margin-top:22px}
.ml-home .timely a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:13px;line-height:1.45;color:var(--ink-a)}
.ml-home .timely strong{font-weight:650}
.ml-home .timely a:hover>span:nth-child(2){text-decoration:underline;text-underline-offset:4px}
.ml-home .timely-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px #f04d4922}

@media (max-width:899px){
  .ml-home .hero{display:flex;flex-direction:column;min-height:0}
  .ml-home .hero-mark{top:4px}
  .ml-home .hero{--mk:26vw}
  .ml-home .hero-portrait{position:relative;left:auto;translate:none;align-self:center;height:auto;width:min(92vw,520px);margin-top:calc(var(--mk) * .78 * 1.14 * .42)}
  .ml-home .hero-portrait img{-webkit-mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,.45) 76%,transparent 90%);mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,.45) 76%,transparent 90%)}
  .ml-home .hero-copy{width:auto;margin:-12vw var(--gut) 0;padding:0 0 56px}
  .ml-home .hero h1,html[lang="es"] .ml-home .hero h1{font-size:clamp(36px,10.6vw,64px)}
  .ml-home .hero-lead{font-size:19px}
}
@media (max-width:600px){
  .ml-home .actions .btn{flex:1 1 100%}
  /* round 5: phone opening. The portrait is cropped at the waist (faces as large as before, less of the figure),
     so the promise, the lead and "Explore our training" land in the first screen (button top about 450 px at 390x844). */
  .ml-home .hero{--pw:min(84vw,350px)}
  .ml-home .hero-portrait{width:var(--pw);height:calc(var(--pw) * 1448 / 1086 * .5);margin-top:calc(var(--mk) * .78 * 1.14 * .3)}
  .ml-home .hero-portrait img{object-fit:cover;object-position:50% 0;
    -webkit-mask-image:linear-gradient(to bottom,#000 56%,rgba(0,0,0,.5) 76%,transparent 97%);mask-image:linear-gradient(to bottom,#000 56%,rgba(0,0,0,.5) 76%,transparent 97%)}
  .ml-home .hero-copy{margin-top:-18px;padding-bottom:44px}
  .ml-home .hero h1,html[lang="es"] .ml-home .hero h1{font-size:clamp(32px,9.3vw,40px);margin-bottom:12px}
  .ml-home .hero-lead{font-size:15.5px;line-height:1.42;margin-bottom:16px}
  .ml-home .hero .actions{gap:6px 24px}
  .ml-home .timely{margin-top:14px}
}

/* =========================================================
   Where are you starting? (one quiet line, after the hero)
   ========================================================= */
.ml-home .start{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 34px;padding:clamp(26px,3vw,44px) var(--gut) clamp(6px,1vw,14px)}
.ml-home .start-title{font-size:11px;font-weight:750;letter-spacing:.14em;line-height:1.7;text-transform:uppercase;color:var(--muted-a)}
.ml-home .start ul{display:flex;flex-wrap:wrap;justify-content:center;gap:0 30px;list-style:none;margin:0;padding:0}
.ml-home .start a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:400 clamp(18px,1.45vw,22px)/1.3 var(--serif);letter-spacing:-.015em;color:var(--ink-a);text-decoration:underline;text-decoration-color:#17293840;text-underline-offset:6px}
.ml-home .start a>span:last-child{font-family:var(--font);font-size:.8em;color:var(--accent)}
.ml-home .start a:hover{color:var(--accent);text-decoration-color:currentColor}
@media (max-width:760px){.ml-home .start{flex-direction:column;gap:2px}.ml-home .start ul{flex-direction:column;align-items:center}}

/* =========================================================
   II · Real Colors
   Static (default): four still pools of colour with the copy.
   .is-stage (home.js): pinned full-screen stage, tap a colour to flood the screen.
   ========================================================= */
.ml-home .rc{position:relative;background:var(--warm);color:var(--navy)}
.ml-home .rc .eyebrow{color:var(--navy)}
.ml-home .reg{font-size:.9em;vertical-align:.12em;margin-left:.08em}
.ml-home .rc-flood,.ml-home .rc-forms,.ml-home .rc-tap{display:none}
.ml-home .rc-intro{position:relative;z-index:3;text-align:center;padding:clamp(72px,8vw,130px) var(--gut) clamp(24px,3vw,48px)}
.ml-home .rc-intro .poster{font-size:clamp(46px,6.6vw,118px)}
.ml-home .rc-intro .poster em{color:var(--navy)}
.ml-home .rc-situation{margin-top:clamp(20px,2.4vw,34px);font:400 clamp(19px,1.7vw,25px)/1.4 var(--serif)}
.ml-home .rc-situation span{display:block;font:750 11px/1.7 var(--font);letter-spacing:.14em;margin-bottom:6px}
.ml-home .rc-tap{margin-top:14px;font-size:14px;color:var(--muted-a)}
.ml-home .rc-panels{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr}
.ml-home .rc-panel{--c:var(--rc-blue);--c1:var(--rc-blue-1);position:relative;display:flex;flex-direction:column;justify-content:center;min-height:clamp(380px,52svh,560px);padding:clamp(56px,6vw,100px) clamp(28px,6vw,110px);
  background:radial-gradient(ellipse 66% 64% at 50% 50%,var(--c1) 0,var(--c) 42%,rgba(255,255,255,0) 74%)}
.ml-home .rc-panel[data-color="gold"]{--c:var(--rc-gold);--c1:var(--rc-gold-1)}
.ml-home .rc-panel[data-color="orange"]{--c:var(--rc-orange);--c1:var(--rc-orange-1)}
.ml-home .rc-panel[data-color="green"]{--c:var(--rc-green);--c1:var(--rc-green-1)}
.ml-home .rc-label{font-size:12px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.ml-home .rc-label span{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;border:1px solid currentColor;border-radius:50%;font-size:11px;letter-spacing:0}
.ml-home .rc-q{margin-top:14px;font-family:var(--serif);font-size:clamp(32px,3.4vw,56px);line-height:1.08;letter-spacing:-.035em;max-width:14em}
.ml-home .rc-q em{letter-spacing:-.035em}
.ml-home .rc-a{margin-top:16px;font-size:16px;line-height:1.65;max-width:30em}
.ml-home .rc-final{position:relative;z-index:3;text-align:center;padding:clamp(80px,8vw,130px) var(--gut) clamp(90px,9vw,150px)}
.ml-home .rc-final .poster{position:relative;font-size:clamp(48px,7vw,128px)}
.ml-home .rc-final .poster em{color:var(--navy)}
.ml-home .rc-pitch{position:relative;max-width:560px;margin:24px auto 0;font-size:17px;line-height:1.7}
.ml-home .rc-links{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 34px;margin-top:22px}
.ml-home .rc-links .text-link:hover{color:var(--navy);border-bottom-width:2px}
.ml-home .rc-note{position:relative;margin-top:18px;font-size:12.5px;color:#3f4d57}
/* static: the four colours, swirled together, behind the closing line */
.ml-home .rc-swirl{position:absolute;left:50%;top:clamp(60px,6vw,110px);width:min(560px,90vw);aspect-ratio:1;translate:-50% 0;pointer-events:none}
.ml-home .rc-swirl i{position:absolute;width:62%;height:62%;border-radius:44% 56% 61% 39%/47% 41% 59% 53%;filter:blur(18px);opacity:.85}
.ml-home .rc-swirl i:nth-child(1){left:2%;top:4%;background:radial-gradient(circle at 40% 40%,var(--rc-blue-1),var(--rc-blue) 60%,rgba(143,198,229,0) 72%)}
.ml-home .rc-swirl i:nth-child(2){right:2%;top:2%;background:radial-gradient(circle at 40% 40%,var(--rc-gold-1),var(--rc-gold) 60%,rgba(235,201,111,0) 72%)}
.ml-home .rc-swirl i:nth-child(3){right:4%;bottom:2%;background:radial-gradient(circle at 40% 40%,var(--rc-orange-1),var(--rc-orange) 60%,rgba(239,159,114,0) 72%)}
.ml-home .rc-swirl i:nth-child(4){left:4%;bottom:4%;background:radial-gradient(circle at 40% 40%,var(--rc-green-1),var(--rc-green) 60%,rgba(172,197,156,0) 72%)}
@media (max-width:760px){
  .ml-home .rc-panels{grid-template-columns:1fr}
  .ml-home .rc-panel{min-height:0;padding:64px var(--gut);background:radial-gradient(ellipse 90% 70% at 50% 50%,var(--c1) 0,var(--c) 46%,rgba(255,255,255,0) 78%)}
  .ml-home .rc-q{font-size:clamp(30px,8.6vw,40px)}
}

/* ---- Live modes (home.js adds .is-live and one of):
   .is-stage  desktop, fine pointer: pinned stage; its heights are set in px by home.js on resize only.
   .is-flow   phones and touch: in-flow full screen, no pinning, nothing scroll-driven. ---- */
.ml-home .rc.is-stage{height:200vh}
.ml-home .rc.is-stage .rc-stage{position:sticky;top:var(--header-h);height:var(--stage-h,calc(100vh - var(--header-h)));overflow-x:clip;overflow-y:visible}
.ml-home .rc.is-stage .rc-screen{position:absolute;inset:0}
.ml-home .rc.is-flow .rc-screen{position:relative;height:calc(100svh - var(--header-h));min-height:540px;overflow-x:clip}
.ml-home .rc.is-live .rc-flood{display:block;position:absolute;inset:0;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 86%,transparent 100%)}
.ml-home .rc.is-stage .rc-flood{will-change:opacity}
@property --r{syntax:"<length>";inherits:false;initial-value:0px}
.ml-home .rc-flood span{--r:0px;position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(circle at var(--x,50%) var(--y,50%),#000 var(--r),transparent calc(var(--r) + 22vmax));mask-image:radial-gradient(circle at var(--x,50%) var(--y,50%),#000 var(--r),transparent calc(var(--r) + 22vmax))}
.ml-home .rc-flood span:not(.is-on){-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0,transparent 100%);mask-image:radial-gradient(circle at 50% 50%,transparent 0,transparent 100%)}
.ml-home .rc-flood span.is-on{--r:190vmax;transition:--r 1.25s cubic-bezier(.5,.05,.25,1)}
.ml-home .rc.is-live .rc-forms{display:block;position:absolute;inset:0;z-index:1}
.ml-home .rc-form{--s:min(50vmin,560px);position:absolute;left:calc(var(--fx) - var(--s) / 2);top:calc(var(--fy) - var(--s) / 2);width:var(--s);height:var(--s);padding:0;border:0;border-radius:50%;background:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ml-home .rc.is-stage .rc-form{will-change:transform}
.ml-home .rc-form[data-color="blue"]{--fx:11%;--fy:24%;--c:var(--rc-blue);--c1:var(--rc-blue-1);--d:-3s}
.ml-home .rc-form[data-color="gold"]{--fx:89%;--fy:21%;--c:var(--rc-gold);--c1:var(--rc-gold-1);--d:-9s}
.ml-home .rc-form[data-color="orange"]{--fx:88%;--fy:82%;--c:var(--rc-orange);--c1:var(--rc-orange-1);--d:-14s}
.ml-home .rc-form[data-color="green"]{--fx:12%;--fy:84%;--c:var(--rc-green);--c1:var(--rc-green-1);--d:-6s}
.ml-home .rc-ink{position:absolute;inset:0;border-radius:44% 56% 61% 39%/47% 41% 59% 53%;filter:blur(14px);
  background:radial-gradient(circle at 38% 36%,var(--c1) 0,var(--c) 44%,var(--c) 52%,transparent 71%);
  animation:rc-drift 19s ease-in-out var(--d) infinite alternate;transition:opacity .5s}
.ml-home .rc-ink::after{content:"";position:absolute;inset:16%;border-radius:58% 42% 37% 63%/52% 61% 39% 48%;background:radial-gradient(circle at 60% 60%,var(--c) 0,transparent 68%);opacity:.7;animation:rc-drift 13s ease-in-out var(--d) infinite alternate-reverse}
@keyframes rc-drift{
  0%{transform:translate(0,0) rotate(0) scale(1);border-radius:44% 56% 61% 39%/47% 41% 59% 53%}
  50%{transform:translate(2.5%,-3%) rotate(14deg) scale(1.04);border-radius:58% 42% 45% 55%/39% 57% 43% 61%}
  100%{transform:translate(-3%,2%) rotate(-10deg) scale(.97);border-radius:39% 61% 52% 48%/56% 44% 62% 38%}
}
.ml-home .rc-name{position:absolute;left:50%;top:50%;translate:-50% -50%;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;font-family:var(--display);font-size:clamp(17px,1.5vw,22px);font-weight:750;letter-spacing:-.02em;transition:opacity .4s}
.ml-home .rc-name::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;transition:background .3s}
.ml-home .rc-form[aria-pressed="true"] .rc-name::before{background:currentColor}
@media (hover:hover){.ml-home .rc-form:hover .rc-ink{filter:blur(10px)}}
.ml-home .rc-form:focus-visible{outline:none}
.ml-home .rc-form:focus-visible .rc-name{outline:2px solid var(--navy);outline-offset:4px;border-radius:3px}
.ml-home .rc-form[aria-pressed="true"] .rc-ink{opacity:.55}

.ml-home .rc.is-live .rc-intro,.ml-home .rc.is-live .rc-panels,.ml-home .rc.is-stage .rc-final{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(860px,calc(100% - 2 * var(--gut)));padding:0}
.ml-home .rc.is-stage .rc-intro,.ml-home .rc.is-stage .rc-panels,.ml-home .rc.is-stage .rc-final{will-change:opacity,transform}
.ml-home .rc.is-live .rc-tap{display:block}
.ml-home .rc.is-live .rc-panels{display:block;z-index:3;pointer-events:none}
.ml-home .rc.is-live .rc-panel{background:none;min-height:0;padding:0;align-items:center;text-align:center}
.ml-home .rc.is-live .rc-panel[hidden]{display:none}
.ml-home .rc.is-live .rc-q{font-size:clamp(44px,5.6vw,100px);line-height:1.02;max-width:none}
.ml-home .rc.is-live .rc-a{font-size:clamp(16px,1.3vw,20px);margin-inline:auto}
.ml-home .rc.is-live .rc-panel .rc-label{animation:rc-in .6s .08s both}
.ml-home .rc.is-live .rc-panel .rc-q{animation:rc-in .7s .14s both}
.ml-home .rc.is-live .rc-panel .rc-a{animation:rc-in .7s .26s both}
@keyframes rc-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ml-home .rc.is-stage .rc-final{z-index:3}
/* round 5 (desk): the closing line sits a little high so the workshop title can rise into the blank foot of the
   pinned screen; the stage is 0.3 screen of scrub instead of a full screen */
@media (min-width:761px){
  .ml-home .rc.is-stage .rc-final{top:41%;width:min(1180px,calc(100% - 2 * var(--gut)))}
  .ml-home .rc.is-stage+.workshop{margin-top:calc(-1 * var(--ws-ov))}
}
.ml-home .rc.is-stage .rc-swirl{display:none}
.ml-home .rc.is-stage .rc-final .poster{font-size:clamp(52px,7.6vw,140px)}
/* flow: the four colours swirl together once, when the closing line comes into view; the type never moves */
.ml-home .rc.is-flow .rc-final{padding-top:clamp(110px,12vw,150px)}
.ml-home .rc.is-flow .rc-swirl{top:clamp(70px,8vw,110px);width:min(480px,80vw)}
.ml-home .rc.is-flow .rc-swirl:not(.is-on){opacity:0}
.ml-home .rc.is-flow .rc-swirl.is-on{animation:rc-spin 2.6s cubic-bezier(.25,.6,.2,1) both}
.ml-home .rc.is-flow .rc-swirl.is-on i{animation:rc-gather 2.6s cubic-bezier(.25,.6,.2,1) both}
.ml-home .rc.is-flow .rc-swirl.is-done,.ml-home .rc.is-flow .rc-swirl.is-done i{animation:none}
.ml-home .rc.is-flow .rc-swirl i:nth-child(1){--sx:-55%;--sy:-45%}
.ml-home .rc.is-flow .rc-swirl i:nth-child(2){--sx:55%;--sy:-45%}
.ml-home .rc.is-flow .rc-swirl i:nth-child(3){--sx:55%;--sy:45%}
.ml-home .rc.is-flow .rc-swirl i:nth-child(4){--sx:-55%;--sy:45%}
@keyframes rc-spin{from{opacity:0;transform:rotate(-200deg)}20%{opacity:1}to{opacity:1;transform:rotate(0)}}
@keyframes rc-gather{from{transform:translate(var(--sx),var(--sy)) scale(1.2)}to{transform:none}}

@media (max-width:760px){
  .ml-home .rc.is-stage{height:165vh}
  /* phone: the four colours sit in a box at the foot of the screen, below the type */
  .ml-home .rc-form{--s:min(50vw,300px)}
  .ml-home .rc.is-live .rc-forms{top:auto;height:min(58%,104vw)}
  .ml-home .rc.is-flow .rc-screen{min-height:max(600px,calc(100svh - var(--header-h)))}
  .ml-home .rc-form[data-color="blue"]{--fx:25%;--fy:30%}
  .ml-home .rc-form[data-color="gold"]{--fx:76%;--fy:26%}
  .ml-home .rc-form[data-color="orange"]{--fx:75%;--fy:73%}
  .ml-home .rc-form[data-color="green"]{--fx:26%;--fy:77%}
  .ml-home .rc.is-live .rc-intro,.ml-home .rc.is-live .rc-panels{top:5%;translate:-50% 0}
  .ml-home .rc.is-live .rc-intro .poster{font-size:clamp(40px,11.4vw,56px)}
  .ml-home .rc.is-live .rc-situation{font-size:18px;margin-top:16px}
  .ml-home .rc.is-live .rc-q{font-size:clamp(36px,10.6vw,50px)}
  .ml-home .rc.is-live .rc-a{font-size:15.5px}
  .ml-home .rc.is-stage .rc-final .poster{font-size:clamp(46px,13vw,64px)}
  .ml-home .rc-pitch{font-size:15.5px}
  .ml-home .rc-links{flex-direction:column;align-items:center;gap:0}
}

/* =========================================================
   III · Inside a Movement workshop: a room you walk into
   ========================================================= */
/* round 5: --ws-t is the band above the photo that holds the title; --ws-p is the photo, capped at 82% of the
   screen height so the room never takes more than about one screen; --ws-ov is how far the scene rises into the
   blank foot of the pinned Real Colors screen (desk only; kept under the 0.24-screen scrub so nothing of the scene
   shows while the stage first pins). The top of the scene is transparent so the stage shows
   through while it overlaps. */
.ml-home .workshop{--ws-t:clamp(150px,15.6vw,230px);--ws-p:min(100vw * .6664,max(520px,82svh));--ws-ov:clamp(160px,min(18vw,24vh + 28px),300px);position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(to bottom,rgba(242,232,216,0) 0,rgba(242,232,216,0) 320px,var(--warm) 420px,var(--wall) 100%)}
/* 1 · the room */
.ml-home .ws-room{position:relative;height:calc(var(--ws-t) + var(--ws-p))}
.ml-home .ws-room-photo{position:absolute;left:0;right:0;top:var(--ws-t);bottom:0;margin:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 6%,rgba(0,0,0,.8) 12%,#000 18%,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 6%,rgba(0,0,0,.8) 12%,#000 18%,#000 84%,transparent 100%)}
.ml-home .ws-room-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.ml-home .ws-head{position:absolute;z-index:2;left:var(--gut);right:var(--gut);top:clamp(28px,3.6vw,64px)}
.ml-home .ws-head .eyebrow{margin-bottom:clamp(8px,1vw,16px)}
.ml-home main .ws-title{font-family:var(--display);font-weight:800;font-size:clamp(54px,9vw,132px);line-height:.88;letter-spacing:-.065em;color:var(--navy)}
.ml-home .ws-title>span{display:block}
.ml-home main .ws-title em{display:block;font-weight:400;letter-spacing:-.045em;color:var(--accent);margin-top:.02em}
/* the four colours of light, passing over the room once */
.ml-home .ws-light{position:absolute;top:0;bottom:0;left:0;width:500%;opacity:0;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(100deg,transparent 0,transparent 16%,#2f8fd0 21%,#4ea6dd 26%,transparent 31%,#e8b330 36%,#f2c84c 41%,transparent 46%,#ec7a3c 51%,#f08a50 56%,transparent 61%,#5f9a4c 66%,#79b062 71%,transparent 76%,transparent 100%)}
/* armed by home.js (motion allowed), lit once when the room comes into view */
.ml-home .workshop.is-armed .ws-room-photo img{filter:brightness(.6) saturate(.7);transition:filter 1.9s cubic-bezier(.3,.6,.3,1)}
.ml-home .workshop.is-armed.is-lit .ws-room-photo img{filter:none}
.ml-home .workshop.is-lit .ws-light{animation:ws-wash 6.2s cubic-bezier(.45,.1,.4,1) .35s both}
@keyframes ws-wash{0%{opacity:0;transform:translateX(0)}8%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(-77%)}}
.ml-home .workshop.is-armed .ws-head{opacity:0;transform:translateY(26px);transition:opacity 1.1s ease .1s,transform 1.1s cubic-bezier(.2,.7,.2,1) .1s}
.ml-home .workshop.is-armed.is-lit .ws-head{opacity:1;transform:none}

/* 2 · the session: Chad and Fallon teaching Real Colors, feathered into one another */
/* round 5: the pair is about as tall as the two photos are at this width, so each shows almost its whole frame */
.ml-home .ws-session{position:relative;margin-top:calc(-1 * clamp(70px,8.4vw,140px))}
.ml-home .ws-pair{position:relative;margin:0;height:clamp(420px,31vw,620px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 21%,#000 60%,rgba(0,0,0,.4) 75%,transparent 90%);mask-image:linear-gradient(to bottom,transparent 0,#000 21%,#000 60%,rgba(0,0,0,.4) 75%,transparent 90%)}
.ml-home .ws-pair img{position:absolute;top:0;height:100%;width:56%;object-fit:cover}
.ml-home .ws-chad{left:0;object-position:4% 26%;-webkit-mask-image:linear-gradient(to right,#000 80%,transparent 100%);mask-image:linear-gradient(to right,#000 80%,transparent 100%)}
.ml-home .ws-fallon{right:0;object-position:50% 24%;-webkit-mask-image:linear-gradient(to left,#000 80%,transparent 100%);mask-image:linear-gradient(to left,#000 80%,transparent 100%)}
.ml-home .ws-copy{position:relative;z-index:2;margin:calc(-1 * clamp(96px,9vw,150px)) auto 0;padding:0 var(--gut) clamp(36px,3vw,56px);max-width:calc(760px + 2 * var(--gut));text-align:center}
.ml-home .ws-bars{display:inline-flex;gap:4px;margin-bottom:18px}
.ml-home .ws-bars i{display:block;width:30px;height:4px;border-radius:2px;background:var(--rc-blue)}
.ml-home .ws-bars i:nth-child(2){background:var(--rc-gold)}
.ml-home .ws-bars i:nth-child(3){background:var(--rc-orange)}
.ml-home .ws-bars i:nth-child(4){background:var(--rc-green)}
.ml-home .ws-copy>p:not(.ws-local){font:400 clamp(20px,1.75vw,28px)/1.42 var(--serif);letter-spacing:-.015em;color:var(--ink-a);text-wrap:balance}
.ml-home .ws-copy .btn{margin-top:24px}
.ml-home .ws-local{margin:18px auto 0;max-width:640px;font-size:14px;line-height:1.7;color:var(--muted-a)}
.ml-home .ws-local a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:6px;font-weight:650;color:var(--ink-a);border-bottom:1px solid currentColor;line-height:1.2}
.ml-home .ws-local a:hover{color:var(--accent)}

@media (max-width:760px){
  .ml-home .workshop{--lead:clamp(170px,48vw,240px)}
  .ml-home .ws-room{height:calc(var(--lead) + min(90svh,680px))}
  .ml-home .ws-room-photo{top:calc(var(--lead) * .95)}
  .ml-home .ws-room-photo img{object-position:12% 30%}
  .ml-home main .ws-title{font-size:clamp(46px,14.6vw,64px);line-height:.9}
  .ml-home .ws-light{width:600%}
  .ml-home .ws-session{margin-top:-70px}
  .ml-home .ws-pair{height:min(68svh,560px)}
  .ml-home .ws-pair img{width:56%}
  .ml-home .ws-chad{object-position:42% 30%}
  .ml-home .ws-fallon{object-position:54% 26%}
  .ml-home .ws-copy{margin-top:-70px;text-align:left}
  .ml-home .ws-copy>p:not(.ws-local){font-size:20px}
  .ml-home .ws-copy .btn{width:100%}
  .ml-home .ws-local{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.ml-home .ws-light{display:none}}

/* =========================================================
   IV · Systems & Processes: a faithful port of the live .book-editorial block (home-book.css v24).
   Only additions: the art fades into the grounds above and below, and 44px hit areas on the small links.
   ========================================================= */
.ml-home .book-ed{--book-ink:#111c30;--book-copper:#9e5428;--book-paper:#f8f5ef;position:relative;isolation:isolate;overflow:hidden;color:var(--book-ink);
  background:linear-gradient(to bottom,var(--wall) 0,var(--book-paper) 120px,var(--book-paper) calc(100% - 160px),var(--sand) 100%)}
.ml-home .be-stage{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);width:min(1440px,calc(100% - 88px));margin-inline:auto;position:relative;min-height:clamp(660px,53vw,820px);isolation:isolate}
.ml-home .be-copy{position:relative;z-index:2;padding:64px 15px 54px 0}
.ml-home .be-eyebrow{display:flex;align-items:center;gap:19px;color:var(--book-copper);font-size:12px;line-height:1.6;letter-spacing:.17em;font-weight:700}
.ml-home .be-eyebrow::before{content:"";width:40px;height:1px;background:currentColor;flex-shrink:0}
.ml-home main .be-title{font-family:var(--serif);font-size:clamp(48px,5.8vw,87px);font-weight:400;line-height:1.01;letter-spacing:-.06em;margin:23px 0 18px;color:var(--book-ink)}
.ml-home main .be-title>*{display:block}
.ml-home main .be-title em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.06em;color:var(--book-copper)}
.ml-home main .be-name{max-width:650px;color:var(--book-ink);font-family:var(--display);font-size:clamp(19px,1.8vw,26px);line-height:1.35;font-weight:750;letter-spacing:-.025em}
.ml-home .be-author{margin-top:16px;color:#66686b;font-size:12px;line-height:1.6;letter-spacing:.21em;font-weight:600}
.ml-home .be-desc{max-width:550px;margin-top:30px;color:var(--book-ink);font-size:clamp(18px,1.55vw,22px);line-height:1.5}
.ml-home .be-actions{display:flex;align-items:center;flex-wrap:wrap;gap:19px 26px;margin-top:29px}
.ml-home .be-actions .button.primary{background:var(--book-ink);border:1px solid var(--book-ink);border-radius:2px;color:#fff;padding:16px 23px;min-height:56px;gap:22px;font-size:14px;line-height:1.45;box-shadow:none}
.ml-home .be-actions .button.primary:hover{background:#2b3d56;transform:none}
.ml-home .be-link{display:inline-flex;align-items:flex-end;gap:15px;min-height:44px;color:var(--book-ink);font-size:15px;line-height:1.5;padding-bottom:5px;border-bottom:1px solid currentColor}
.ml-home .be-link:hover{color:var(--book-copper)}
.ml-home .be-note{margin-top:16px;font-size:12px;line-height:1.7;color:#62666b}
.ml-home .be-formats{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:4px}
.ml-home .be-formats a{display:inline-flex;align-items:center;min-height:44px;font-size:12px;line-height:1.6;color:#4b535c;text-decoration:underline;text-decoration-color:#aab0b4;text-underline-offset:4px}
.ml-home .be-formats a:hover{color:var(--book-copper)}
.ml-home .be-art{min-width:0;position:absolute;inset:0;left:calc((100vw - 100%) / -2);right:calc((100vw - 100%) / -2);z-index:0;margin:0}
.ml-home .be-art a{display:block;height:100%}
.ml-home .be-art picture{display:block;width:100%;height:100%}
.ml-home .be-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% bottom}
.ml-home .be-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom,var(--wall) 0,rgba(245,238,228,0) 13%),
  linear-gradient(to top,var(--sand) 0,rgba(239,230,214,.6) 7%,rgba(239,230,214,0) 18%),
  linear-gradient(90deg,rgba(248,245,239,.64),rgba(248,245,239,.22) 36%,transparent 62%)}
.ml-home .be-art a:focus-visible{outline:3px solid var(--book-copper);outline-offset:-6px}
@media (max-width:1100px){
  .ml-home .be-stage{width:calc(100% - 64px)}
  .ml-home .be-copy{padding-top:48px;padding-bottom:40px}
  .ml-home main .be-title{font-size:clamp(44px,5.8vw,64px)}
  .ml-home .be-actions{gap:18px}
  .ml-home .be-actions .button.primary{font-size:13px;padding-inline:18px}
  .ml-home .be-desc{margin-top:24px}
}
@media (max-width:980px){
  .ml-home .book-ed{background:linear-gradient(to bottom,var(--wall) 0,var(--book-paper) 80px,var(--book-paper) calc(100% - 120px),var(--sand) 100%)}
  .ml-home .be-stage{display:flex;flex-direction:column;width:100%;min-height:0}
  .ml-home .be-copy{padding:38px 28px 30px}
  .ml-home main .be-title{font-size:clamp(36px,8.5vw,62px);margin-top:20px}
  .ml-home main .be-name{max-width:560px;font-size:clamp(20px,3.2vw,24px)}
  .ml-home .be-eyebrow{letter-spacing:.12em;gap:14px}
  .ml-home .be-eyebrow::before{width:28px}
  .ml-home .be-desc{max-width:560px;font-size:18px}
  .ml-home .be-actions{gap:18px 25px;margin-top:24px}
  .ml-home .be-art{position:relative;inset:auto;width:100%;max-width:560px;height:auto;aspect-ratio:1122/1402;align-self:center;margin:0}
  .ml-home .be-art img{min-height:0;object-fit:contain;object-position:center}
  .ml-home .be-art::after{background:linear-gradient(to bottom,var(--book-paper),rgba(248,245,239,0) 9%),linear-gradient(to top,var(--sand) 0,rgba(239,230,214,0) 12%)}
}
@media (max-width:440px){
  .ml-home .be-copy{padding-inline:20px}
  .ml-home .be-eyebrow{letter-spacing:.08em;gap:10px}
  .ml-home .be-eyebrow::before{width:22px}
  .ml-home main .be-title{font-size:clamp(35px,10.1vw,43px)}
  .ml-home main .be-name{font-size:20px}
  .ml-home .be-author{letter-spacing:.15em;margin-top:13px}
  .ml-home .be-desc{font-size:17px;line-height:1.55}
  .ml-home .be-actions{align-items:flex-start;flex-direction:column;gap:16px}
  .ml-home .be-actions .button.primary{min-height:54px;font-size:13px;padding-inline:19px}
  .ml-home .be-link{font-size:14px}
  .ml-home .be-formats{gap:0 20px}
}

/* =========================================================
   V · The bookshelf: two lit shelves, every book reachable
   ========================================================= */
.ml-home .shelf{position:relative;overflow:hidden;isolation:isolate;padding:clamp(70px,6vw,110px) 0 clamp(16px,2vw,40px);
  background:linear-gradient(to bottom,var(--sand) 0,#f4ede1 30%,#f5efe5 100%)}
.ml-home .shelf::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 46% at 30% 58%,rgba(255,251,240,.95),rgba(255,251,240,0) 70%),radial-gradient(ellipse 46% 40% at 78% 62%,rgba(255,250,236,.8),rgba(255,250,236,0) 70%)}
.ml-home .shelf-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:18px 64px;align-items:end;padding-inline:var(--gut);margin-bottom:clamp(24px,3vw,48px)}
.ml-home .shelf-head .eyebrow{grid-column:1/-1;margin:0}
.ml-home .shelf-head .poster{font-size:clamp(46px,5.2vw,96px)}
.ml-home .shelf-head>p:not(.eyebrow){font-size:16px;line-height:1.8;color:var(--muted-a);max-width:360px}
.ml-home .shelf-row+.shelf-row{margin-top:clamp(28px,3vw,48px)}
.ml-home .shelf-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:var(--gut)}
.ml-home main .shelf-name{font-family:var(--display);font-size:clamp(20px,1.7vw,26px);font-weight:700;letter-spacing:-.035em;line-height:1.2}
.ml-home .shelf-ctrl{display:flex;gap:10px}
.ml-home .shelf-ctrl[hidden]{display:none}
.ml-home .shelf-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #17293866;border-radius:50%;background:transparent;color:var(--navy);font-size:26px;line-height:1;transition:background .2s,color .2s,opacity .2s}
.ml-home .shelf-btn span{margin-top:-3px}
.ml-home .shelf-btn:hover:not(:disabled){background:var(--navy);color:var(--cream)}
.ml-home .shelf-btn:disabled{opacity:.32;cursor:default}
.ml-home .shelf-track{--fl:0px;--fr:0px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;outline:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.ml-home .shelf-track.has-left{--fl:clamp(28px,6vw,90px)}
.ml-home .shelf-track.has-right{--fr:clamp(28px,6vw,90px)}
@media (hover:hover) and (pointer:fine){.ml-home .shelf-track.is-overflow{cursor:grab}}
.ml-home .shelf-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
.ml-home .shelf-track.is-dragging a{pointer-events:none}
.ml-home .shelf-track:focus-visible{outline:2px solid var(--coral);outline-offset:-2px}
.ml-home .book-item{scroll-snap-align:start}
.ml-home .shelf-track::-webkit-scrollbar{display:none}
.ml-home .ledge{--h:clamp(220px,21vw,350px);list-style:none;margin:0;padding:30px var(--gut) 12px;position:relative;display:flex;align-items:flex-start;gap:clamp(30px,2.6vw,48px);width:max-content;min-width:100%;box-sizing:border-box}
.ml-home .ledge::after{content:"";position:absolute;left:0;right:0;top:calc(30px + var(--h) - 2px);height:18px;z-index:0;
  background:linear-gradient(to bottom,#fffaf0 0,#e9dcc6 22%,#d4c3a6 70%,#c2ae8d 100%);box-shadow:0 26px 34px -14px rgba(70,46,20,.45)}
.ml-home .book-item{--hs:1;position:relative;z-index:1;flex:0 0 auto;width:calc(var(--h) * var(--hs) * var(--ratio) + 10px)}
.ml-home .book-item>a{display:flex;flex-direction:column;align-items:flex-start;border-radius:4px;-webkit-tap-highlight-color:transparent}
.ml-home .book{position:relative;display:block;margin-top:calc(var(--h) * (1 - var(--hs)));height:calc(var(--h) * var(--hs));width:calc(var(--h) * var(--hs) * var(--ratio));transform:perspective(1200px) rotateY(28deg);transform-origin:center bottom;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;
  box-shadow:28px 12px 32px -12px rgba(55,35,15,.48),5px 3px 8px rgba(55,35,15,.18)}
.ml-home .book img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:1px 3px 3px 1px}
.ml-home .book::before{content:"";position:absolute;top:0;left:0;width:calc(var(--h) * var(--hs) * var(--ratio) * var(--t,.1));height:100%;transform-origin:left center;transform:rotateY(90deg);
  background:linear-gradient(to right,var(--spine-2),var(--spine) 35%,var(--spine) 70%,var(--spine-2))}
.ml-home .book::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:1px 3px 3px 1px;
  background:linear-gradient(90deg,rgba(0,0,0,.22) 0,rgba(255,255,255,.18) 2.5%,rgba(0,0,0,0) 7%,rgba(0,0,0,0) 86%,rgba(0,0,0,.1) 100%),linear-gradient(140deg,rgba(255,250,235,.28) 0,rgba(255,250,235,0) 46%,rgba(30,20,10,.12) 100%)}
.ml-home .book-item--album{--hs:.78}
.ml-home .book-item--flat{--hs:.94}
.ml-home .book-item--flat .book{box-shadow:none;transform:none;filter:drop-shadow(18px 14px 16px rgba(55,35,15,.35))}
.ml-home .book-item--flat .book::before,.ml-home .book-item--flat .book::after{display:none}
.ml-home .book-item--flat .book img{object-fit:contain;object-position:bottom}
.ml-home .book-item a:hover .book,.ml-home .book-item a:focus-visible .book,.ml-home .book-item.is-tipped .book{transform:perspective(1200px) rotateY(6deg) rotateX(9deg) translateY(-14px) scale(1.05);box-shadow:20px 34px 40px -14px rgba(55,35,15,.5),4px 4px 10px rgba(55,35,15,.18)}
.ml-home .book-item--flat a:hover .book,.ml-home .book-item--flat a:focus-visible .book,.ml-home .book-item--flat.is-tipped .book{transform:rotate(-2deg) translateY(-14px) scale(1.05);box-shadow:none}
.ml-home .book-item a:focus-visible{outline-offset:8px}
.ml-home .book-title{display:block;margin-top:38px;font-family:var(--display);font-size:16px;font-weight:650;letter-spacing:-.03em;line-height:1.3;transition:color .3s}
.ml-home .book-title .vol{font-weight:500;color:var(--muted-a)}
.ml-home .book-desc{display:block;margin-top:8px;min-height:6.6em;font-size:13px;line-height:1.6;color:var(--muted-a);opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s}
.ml-home .book-kind{display:block;margin-bottom:4px;font-size:10.5px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#7a4a32}
.ml-home .book-item a:hover .book-desc,.ml-home .book-item a:focus-visible .book-desc,.ml-home .book-item.is-tipped .book-desc{opacity:1;transform:none}
.ml-home .book-item a:hover .book-title,.ml-home .book-item.is-tipped .book-title{color:var(--accent)}
.ml-home .book-item{min-width:172px}
.ml-home .book-item>a{min-width:172px}
@media (max-width:699px){
  .ml-home .shelf-head{grid-template-columns:1fr}
  .ml-home .shelf-head .poster{font-size:clamp(42px,11.6vw,60px)}
  .ml-home .ledge{--h:min(220px,46vw);gap:24px}
  .ml-home .shelf-track{scroll-snap-type:x mandatory}
  .ml-home .book-desc{min-height:0;max-height:0;margin-top:0;overflow:hidden;transition:opacity .4s,max-height .45s,margin .45s}
  .ml-home .book-item.is-tipped .book-desc,.ml-home .book-item a:focus-visible .book-desc{max-height:22em;margin-top:8px}
  .ml-home .shelf{padding-bottom:0}
  .ml-home .book{transform:perspective(900px) rotateY(24deg)}
  .ml-home .book-title{margin-top:32px;font-size:15px}
  .ml-home .book-item,.ml-home .book-item>a{min-width:140px}
  .ml-home .book-title{font-size:14.5px}
}

/* =========================================================
   VI · Chad & Fallon
   ========================================================= */
.ml-home .people{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(700px,100svh,1100px);background:linear-gradient(to bottom,#f5efe5 0,var(--beige) 30%)}
.ml-home .people-photo{position:absolute;top:0;bottom:0;right:0;width:58%;z-index:-1}
.ml-home .people-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.ml-home .people-photo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to right,var(--beige) 0,rgba(239,230,216,.86) 12%,rgba(239,230,216,0) 40%),
  linear-gradient(to top,var(--beige) 0,rgba(239,230,216,.7) 10%,rgba(239,230,216,0) 30%),
  linear-gradient(to bottom,#f5efe5 0,rgba(245,239,229,.7) 8%,rgba(245,239,229,0) 26%)}
.ml-home .people-copy{width:min(46vw,640px);margin-left:var(--gut);padding-block:clamp(100px,10vw,150px)}
.ml-home .people-copy .poster{font-size:clamp(48px,6vw,108px)}
.ml-home .people-line{margin:clamp(26px,3vw,40px) 0 clamp(30px,3vw,44px);font:400 clamp(22px,2.05vw,34px)/1.36 var(--serif);letter-spacing:-.02em}
@media (max-width:899px){
  .ml-home .people{display:block;min-height:0}
  .ml-home .people-photo{position:relative;width:auto;height:min(62svh,560px);z-index:0}
  .ml-home .people-photo img{object-position:50% 16%}
  .ml-home .people-photo::after{background:linear-gradient(to top,var(--beige) 0,rgba(239,230,216,.75) 14%,rgba(239,230,216,0) 40%),linear-gradient(to bottom,#f5efe5 0,rgba(245,239,229,0) 16%)}
  .ml-home .people-copy{position:relative;width:auto;margin:-150px var(--gut) 0;padding:0 0 40px}
  .ml-home .people-copy .poster{font-size:clamp(44px,12.4vw,68px)}
  .ml-home .people-line{font-size:21px}
}

/* =========================================================
   VII · The close
   ========================================================= */
.ml-home .closing{position:relative;text-align:center;color:var(--cream);padding:clamp(200px,16vw,260px) var(--gut) clamp(80px,7vw,110px);
  background:linear-gradient(to bottom,var(--beige) 0,#cdc4b5 50px,#6c7479 140px,#24394a 220px,var(--navy) 270px,#172938 100%)}
.ml-home .closing-mark{width:58px;height:37px;margin:0 auto 26px;fill:none;stroke:var(--coral);stroke-width:2.4}
.ml-home .closing .eyebrow{color:var(--cream-3)}
.ml-home .closing .poster{font-size:clamp(54px,9.6vw,184px);line-height:.95;color:var(--cream)}
.ml-home .closing .poster em{color:var(--accent-dk)}
.ml-home .closing-lead{margin:28px auto 34px;font-size:18px;color:var(--cream-2)}
.ml-home .closing-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:0 30px;margin-top:30px}
.ml-home .closing-contact a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:#e3eaee}
.ml-home .closing-contact a:hover,.ml-home .social a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.ml-home .social{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px;margin-top:10px;color:#bccbd3;font-size:12.5px}
.ml-home .social a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:600px){.ml-home .closing{padding-top:170px;padding-bottom:64px}.ml-home .closing .poster{font-size:clamp(34px,10.2vw,60px)}.ml-home .closing-lead{font-size:16px}.ml-home .closing .btn{width:100%}}
.ml-home .site-footer.ending-footer{border-top:0;background:#172938}
.ml-home .ending-footer-links a{min-height:44px}
.ml-home.homepage .nav .button{min-height:44px}

@media (prefers-reduced-motion:reduce){
  html:has(> body.ml-home){scroll-behavior:auto}
  .ml-home .btn,.ml-home .book,.ml-home .text-link,.ml-home .book-desc{transition:none}
  .ml-home .btn:hover{transform:none}
  .ml-home .rc-ink,.ml-home .rc-ink::after{animation:none}
}