/* Pro's Act 2 surface study, scoped into the site by tools/act2/pro_css.py (do not edit by hand: rerun it).
   Mike, Oct 10: "sew in the new pro experiences for act 2", "THIS SHALL BE EXACTLY AS IT IS IN THE ATTACHED HTML".
   Declarations are pro's, byte for byte; see the tool for how selectors are scoped.
   Since V4 pass 32 (Oct 12) the source is pro's eight-study page (assets/2026-10-11 Astra Pro Act 2/WATT-Act2-Eight-
   Studies-Refined Final.html; Mike: "wire in pro's new ones, 4, 5, 6, 7 and 8", "keep them exactly as they are"). */
:root #pro{color-scheme:light; --ink:#26332a;--accent:#4b5949;--opal:231 232 217;--smoke:34 48 40;--light:#f1f0e4;--light-soft:#d1d5c3;--body:'Inter',sans-serif;--head:'Inter',sans-serif;--tail:'Newsreader',serif;--hw:400;--hs:86px;--es:122px;--letter:-.049em;--progress:0;}
:where(#pro), :where(#pro) *{box-sizing:border-box}
:where(#pro) button,:where(#pro) a,:where(#pro) input,:where(#pro) select{-webkit-tap-highlight-color:transparent}
:where(#pro) button,:where(#pro) input,:where(#pro) select{font:inherit}
:where(#pro) button,:where(#pro) a{touch-action:manipulation}
:where(#pro) button{cursor:pointer}
:where(#pro) a{color:inherit}
:where(#pro) button{color:inherit}
:where(#pro) button:focus-visible,:where(#pro) a:focus-visible,:where(#pro) input:focus-visible,:where(#pro) select:focus-visible{outline:2px solid currentColor;outline-offset:6px}
:where(#pro) button{border:0;background:none}
:where(#pro) button[hidden],:where(#pro) [hidden]{display:none!important}
html #pro[data-palette=shell]{--ink:#3b2a29;--accent:#6a4140;--opal:241 224 214;--smoke:56 38 38;--light:#f6eae2;--light-soft:#ddc6ba}
html #pro[data-palette=atlantic]{--ink:#233640;--accent:#3c5764;--opal:225 233 233;--smoke:27 48 60;--light:#eef2ec;--light-soft:#c4d9db}
html #pro[data-type=literary]{--head:'Newsreader',serif;--tail:'Newsreader',serif;--letter:-.038em;--hw:400}
html #pro[data-type=classic]{--head:'EB Garamond',serif;--tail:'EB Garamond',serif;--letter:-.035em;--hw:400}
#pro #pro-wash,#pro #pro-optics{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#pro #pro-wash{z-index:-2;background:#102125;opacity:0}
#pro #pro-optics{z-index:-1;opacity:0}
#pro #pro-optics.on{opacity:1}
#pro .p-skip{position:fixed;top:10px;left:10px;transform:translateY(-160%);z-index:80;background:#fff;padding:14px}
#pro .p-skip:focus{transform:none}
#pro #pro-stage{position:sticky;top:0;height:100svh;min-height:680px;isolation:isolate;overflow:hidden}
#pro #outer{position:absolute;inset:84px 2.6vw 28px;border-radius:25px;z-index:-1;background:rgba(234,227,215,.2);backdrop-filter:blur(24px) saturate(.88);border:1px solid #fff8;box-shadow:inset 0 1px 1px #fffd,0 22px 60px #14241c25}
body #pro.gl #outer{background:none;backdrop-filter:none;box-shadow:none;border:0}
html #pro[data-scene=night]:not([data-fallback=none]) #outer{background:rgba(12,25,30,.19)}
html body #pro.gl[data-scene=night] #outer{background:none}
#pro .material{position:absolute;pointer-events:none;border-radius:9px;will-change:transform,opacity;overflow:hidden;border:1px solid transparent}
#pro .material.opal{background:linear-gradient(132deg,rgba(255,255,251,.68),transparent 46%),linear-gradient(145deg,rgb(var(--opal)/.89),rgb(var(--opal)/.79));box-shadow:inset 0 1px 0 #fff,1px 2px 2px #1020160f,4px 16px 25px #14221720,10px 34px 70px #10130b24;border-color:#fff7;backdrop-filter:blur(7px);z-index:2}
#pro .material.p-smoke{background:linear-gradient(138deg,rgba(255,255,255,.055),transparent 65%),rgb(var(--smoke)/.94);border-color:rgb(var(--light)/.15);box-shadow:inset 0 1px 0 #f0f3e32e,4px 15px 38px #06100a38;z-index:1}
#pro .material.p-ghost{background:rgb(var(--opal)/.20);border:1px solid #fff6;border-radius:12px;z-index:0;box-shadow:0 12px 30px #14251d20}
#pro .edge{position:absolute;top:0;left:10%;right:25%;height:1px;background:linear-gradient(90deg,transparent,#fff,transparent);opacity:.7}
#pro .material:after{content:"";position:absolute;inset:0;opacity:.10;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.21'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
#pro #hook-block{position:absolute;z-index:4;transform-origin:0 0;will-change:transform,opacity}
:where(#pro) p{margin:0}
#pro .p-eyebrow{font-family:var(--body);font-size:10px;line-height:1.25;font-weight:500;text-transform:uppercase;letter-spacing:.18em}
#pro .p-eyebrow span{margin:0 8px}
#pro #hook{font-family:var(--head);font-size:var(--hs);font-weight:var(--hw);font-optical-sizing:auto;font-variation-settings:'opsz' 72;line-height:.99;letter-spacing:var(--letter);margin:22px 0 0;white-space:nowrap}
#pro .lead{display:block}
#pro .connector{display:inline-block;margin-right:.25em}
#pro .word-swap{display:inline-block;position:relative}
#pro .word-swap .to{position:absolute;left:0;top:0}
#pro .word-swap .from{display:inline-block;position:relative}
#pro .word-swap .to{display:inline-block}
#pro .ending{position:relative;display:inline-block;font-family:var(--tail);font-size:var(--es);font-style:italic;font-variation-settings:'opsz' 72;letter-spacing:-.045em;line-height:.9;color:var(--accent);vertical-align:baseline}
#pro .ending>.from{display:block}
#pro .ending>.to{position:absolute;top:0;left:0;display:block}
#pro .word-swap .from,#pro .word-swap .to,#pro .ending>.from,#pro .ending>.to{will-change:transform,opacity}
#pro #reading{position:absolute;z-index:3;color:var(--light);will-change:transform,opacity}
#pro #people{display:flex;flex-direction:column;gap:18px}
#pro .person{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:21px;line-height:1.45;letter-spacing:-.018em}
#pro .ordinal{font-family:var(--body);font-size:9px;letter-spacing:.12em;align-self:start;padding-top:8px;color:var(--light-soft)}
#pro #scope{margin-top:30px;padding-top:25px;border-top:1px solid rgb(var(--opal)/.22);display:grid;grid-template-columns:1fr;gap:24px}
#pro #scope>p{font-size:17px;line-height:1.6;letter-spacing:-.019em;max-width:66ch}
#pro .p-talk, :where(#pro) .talk{display:flex;align-items:center;justify-content:space-between;width:150px;padding:7px 0 12px;border-bottom:1px solid currentColor;text-decoration:none;font-size:13px;line-height:1.2;letter-spacing:-.015em}
#pro .p-talk span, :where(#pro) .talk span{font-size:24px;line-height:.7;transition:transform .3s}
#pro .p-talk:hover span, :where(#pro) .talk:hover span{transform:translate(3px,-3px)}
#pro .stage-foot{position:absolute;bottom:48px;left:5.4vw;right:5.4vw;display:flex;justify-content:space-between;align-items:center;z-index:4;font-size:10px;letter-spacing:.1em}
#pro .folio{font-size:9px;letter-spacing:.13em}
#pro .inline-link{font-size:12px;border:0;background:none;padding:10px 0;text-decoration:none;letter-spacing:.025em}
#pro .inline-link span{margin-left:25px}
html #pro[data-scene=night] .stage-foot{color:#f3eee3}
html #pro[data-concept=horizon] #surface-one{border-radius:3px;box-shadow:inset 0 1px 0 #fff,0 18px 50px #10211828}
html #pro[data-concept=horizon] #surface-two{border-radius:3px;box-shadow:inset 0 1px 0 #fff1,0 16px 32px #10211822}
html #pro[data-concept=horizon] #hook{text-align:center}
html #pro[data-concept=horizon] #hook-block .p-eyebrow{text-align:center}
html #pro[data-concept=horizon] #hook .connector{display:block;margin:0}
html #pro[data-concept=horizon] #hook .ending{display:block;margin:8px auto 0;width:max-content}
html #pro[data-concept=horizon] #reading{color:var(--ink)}
html #pro[data-concept=horizon] #people{flex-direction:row;gap:32px}
html #pro[data-concept=horizon] .person{display:block;flex:1;font-size:21px;line-height:1.45;letter-spacing:-.03em}
#pro .person .ordinal{display:block;margin-bottom:12px}
html #pro[data-concept=horizon] .person+.person{border-left:1px solid #20302529;padding-left:30px}
html #pro[data-concept=horizon] .ordinal{color:var(--accent)}
html #pro[data-concept=horizon] #scope{display:grid;grid-template-columns:1fr 150px;align-items:end;border-top:1px solid #253c2929;padding-top:24px;gap:7%}
html #pro[data-concept=horizon] #scope>p{max-width:84ch;font-size:16px}
#pro #chapter{position:absolute;z-index:4;color:var(--ink);text-align:center}
#pro #chapter .chapter-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.15em}
#pro .chapter-copy{font-family:var(--head);font-size:46px;line-height:1.23;letter-spacing:-.03em;font-weight:400;margin:30px auto;max-width:700px;font-optical-sizing:auto}
#pro .chapter-copy.long{font-family:var(--body);font-size:22px;line-height:1.55;letter-spacing:-.026em}
#pro .chapter-tabs{display:flex;justify-content:center;gap:36px;padding-top:24px;border-top:1px solid #243b262e}
#pro .chapter-tabs button{font-size:11px;line-height:1.3;padding:12px 0;position:relative;opacity:.58}
#pro .chapter-tabs button[aria-pressed=true]{opacity:1}
#pro .chapter-tabs button:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
#pro .chapter-tabs button[aria-pressed=true]:after{transform:scaleX(1)}
#pro #read-all{margin-top:12px;font-size:10px;opacity:.85}
html #pro[data-concept=chapters] #hook{white-space:nowrap;text-align:center}
html #pro[data-concept=chapters] .p-eyebrow{text-align:center}
html #pro[data-concept=chapters] #hook .connector{display:block}
html #pro[data-concept=chapters] #hook .ending{display:block;width:max-content;margin:4px auto 0}
#pro #full-story{position:relative;background:rgb(var(--opal));padding:110px 8vw;display:none;z-index:4}
#pro #full-story.visible{display:block}
#pro .story-inner{max-width:880px;margin:auto}
#pro .story-inner h2{font-family:var(--head);font-size:clamp(38px,5vw,70px);font-weight:400;letter-spacing:-.045em;line-height:1.04;margin:35px 0 58px}
#pro .story-inner h2 em{font-family:var(--tail);font-weight:400}
#pro .story-people{display:grid;gap:35px;font-size:clamp(22px,2.5vw,32px);line-height:1.4;letter-spacing:-.03em}
#pro .story-scope{font-size:18px;line-height:1.65;border-top:1px solid #24342140;margin-top:55px;padding-top:35px}
#pro .story-inner .p-talk, :where(#pro) .story-inner .talk{margin-top:30px}
@media(max-width:900px) {
  #pro #pro-stage{height:100svh;min-height:680px}
  #pro #outer{inset:72px 12px 20px;border-radius:21px}
  #pro .material{border-radius:7px}
  #pro #hook{margin-top:19px}
  #pro .p-eyebrow{font-size:8px;letter-spacing:.14em}
  #pro #reading .person{font-size:17px;line-height:1.5;grid-template-columns:16px 1fr;gap:10px}
  #pro .person .ordinal{font-size:8px;padding-top:6px;margin:0}
  #pro #people{gap:17px}
  #pro #scope{margin-top:25px;padding-top:22px;gap:19px}
  #pro #scope>p{font-size:17px;line-height:1.6}
  #pro .p-talk, :where(#pro) .talk{font-size:12px;width:145px}
  #pro .stage-foot{bottom:35px;left:30px;right:30px}
  #pro .stage-foot .folio{display:none}
  #pro #continue{margin-left:auto;font-size:10px}
  #pro .stage-foot .inline-link span{margin-left:14px}
  html #pro[data-concept=horizon] #people{flex-direction:column;gap:18px}
  html #pro[data-concept=horizon] .person{display:grid;grid-template-columns:16px 1fr}
  html #pro[data-concept=horizon] .person+.person{border:0;padding:0}
  html #pro[data-concept=horizon] #scope{grid-template-columns:1fr;gap:20px}
  #pro .chapter-copy{font-size:34px;line-height:1.2;letter-spacing:-.04em;margin:27px 0;min-height:130px}
  #pro .chapter-copy.long{font-size:17px;line-height:1.55;min-height:260px;margin:20px 0}
  #pro .chapter-tabs{gap:0;justify-content:space-between;padding-top:10px}
  #pro .chapter-tabs button{font-size:9px;padding:12px 0}
  #pro #chapter .chapter-label{font-size:8px}
  #pro #read-all{margin-top:15px}
  #pro #full-story{padding:70px 25px}
  #pro .story-scope{font-size:17px}
  #pro .story-people{gap:30px}
}
@media(prefers-reduced-motion:reduce) {
  :where(#pro), :where(#pro) *{animation:none!important;transition:none!important}
}
html #pro[data-concept=counterbalance] #hook .connector{font-size:.54em;letter-spacing:-.045em}
html #pro[data-concept=counterbalance] #hook .ending>.from{font-size:.66em;line-height:1.35}
html #pro[data-concept=horizon] #hook .lead,html #pro[data-concept=horizon] #hook .connector{display:inline}
html #pro[data-concept=chapters] #hook .lead,html #pro[data-concept=chapters] #hook .connector{display:inline}
@media(max-width:900px) {
  html #pro[data-concept=counterbalance] #hook .connector{display:block;font-size:1em;margin:5px 0}
  html #pro[data-concept=counterbalance] #hook .ending{display:block;margin-top:9px}
  html #pro[data-concept=counterbalance] #hook .ending>.from{font-size:.74em}
  html #pro[data-concept=horizon] #hook .lead,html #pro[data-concept=horizon] #hook .connector,html #pro[data-concept=chapters] #hook .lead,html #pro[data-concept=chapters] #hook .connector{display:block}
}
body #pro.gl .material.opal,body #pro.gl .material.p-smoke{background:none;backdrop-filter:none;border:0;box-shadow:none}
body #pro.gl .material .edge,body #pro.gl .material:after{display:none}
body #pro.gl .material.p-ghost{opacity:0!important}
html #pro[data-concept=horizon] .lead,html #pro[data-concept=chapters] .lead{margin-right:.20em}
@media(max-width:900px) {
  html #pro[data-concept=horizon] .lead,html #pro[data-concept=chapters] .lead{margin-right:0}
}
#pro .p-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#pro #chapter .chapter-copy{min-height:176px;display:flex;align-items:center;justify-content:center}
#pro .chapter-tabs button{min-height:44px}
#pro #chapter .chapter-copy.long{min-height:176px}
@media(max-width:900px) {
  #pro #chapter .chapter-copy,#pro #chapter .chapter-copy.long{min-height:clamp(220px,calc(380px - 35vw),275px)}
  #pro .chapter-tabs button{font-size:10px}
}
#pro .ending>.from{width:max-content}
html #pro[data-concept=horizon] #hook .ending,html #pro[data-concept=chapters] #hook .ending{width:100%!important}
html #pro[data-concept=horizon] #hook .ending>.from,html #pro[data-concept=chapters] #hook .ending>.from{margin:0 auto}
html #pro[data-concept=horizon] #hook .ending>.to,html #pro[data-concept=chapters] #hook .ending>.to{left:50%;translate:-50% 0;width:max-content}
#pro #full-story.chapter-readable{display:block}
@media(min-width:901px) and (max-width:1200px) {
  html #pro[data-concept=counterbalance] #reading .person{font-size:18.5px;line-height:1.45}
  html #pro[data-concept=counterbalance] #scope>p{font-size:17px}
}
#pro .stage-foot{pointer-events:none}
#pro .stage-foot button{pointer-events:auto}
:where(#pro) #new-studies{position:absolute;inset:0;z-index:2;isolation:isolate;pointer-events:none}
:where(#pro) .new-study{position:absolute;inset:0;pointer-events:auto}
html #pro[data-novel=true] #surface-one,html #pro[data-novel=true] #surface-two,html #pro[data-novel=true] #surface-three,html #pro[data-novel=true] #hook-block,html #pro[data-novel=true] #reading,html #pro[data-novel=true] #chapter{display:none!important}
@media(prefers-reduced-motion:reduce) {
  :where(#pro) #new-studies *{transition:none!important;animation:none!important}
}
html #pro[data-visual-companion=true] #pro-stage{min-height:0}
html #pro[data-visual-companion=true] .watt-motion-film{transform:translateZ(0)}
@media(prefers-reduced-motion:reduce) {
  html #pro[data-visual-companion=true] .ps-art{display:none!important}
}

/* ---- site glue (ours, not pro's) ---- */
#pro{position:absolute;inset:0;pointer-events:none;color:var(--ink);font-family:var(--body);font-weight:400;-webkit-font-smoothing:antialiased}
#pro #pro-col{position:absolute;left:0;right:0;top:0;pointer-events:auto}
#pro #pro-stage{position:relative;top:auto}
#pro[hidden]{display:none!important}
/* the scene clips without being a scroll container: focus on a tab or a link in pro's column (taller than the screen)
     must not scroll it; the site's runway is the only scroll */
html[data-motion=pro] .scene{overflow:clip}
/* V4 (Oct 11): Chapters closes its card with "Let's talk" (pro's own talk link) where "Read the full story" was */
#pro #chapter .ch-talk{margin:14px auto 0}
/* our stories' leaves stay out of the way while pro's study is Act 2 */
html[data-motion=pro] #leafA, html[data-motion=pro] #leafB{display:none!important}
/* our page sets Archivo hooks upright; pro's full story keeps its true italic */
html #pro .story-inner h2 em{font-style:italic}
/* the site's header in pro's layout while pro's study is Act 2 (pro's header rules, on our .top / .sig / links):
   MADE BY WATT on one line top left, Contact with its arrow top right, the bottom corners left to the stage's folio and Continue */
html[data-motion=pro] .top{left:0;right:0;height:80px;padding:0 4.1vw;display:flex;align-items:center;justify-content:flex-end;gap:24px;color:var(--pro-ink,#26332a)}
html[data-motion=pro] .top a,html[data-motion=pro] .top button{font-family:"Inter",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.15em;font-size:11px;line-height:normal;text-decoration:none;padding:12px 0;color:inherit;text-shadow:none}
html[data-motion=pro] .top a span{font-size:17px;margin-left:8px}
html[data-motion=pro] .sig{position:absolute;left:4.1vw;top:0;right:auto;bottom:auto;height:80px;display:flex;align-items:center;gap:12px;text-align:left;color:inherit;line-height:normal;text-shadow:none}
html[data-motion=pro] .sig span{display:inline;margin:0;font:400 10px/normal "Inter",sans-serif;text-transform:uppercase;letter-spacing:.24em}
html[data-motion=pro] .sig b{display:inline;font-family:"Archivo","Inter",sans-serif;font-variation-settings:"wdth" 125,"wght" 800;font-weight:800;font-stretch:125%;font-size:21px;line-height:normal;letter-spacing:-.03em}
html[data-motion=pro][data-tone=dark] .top{color:#f3eee3}
@media(max-width:900px){html[data-motion=pro] .top{height:64px;padding:0 23px}html[data-motion=pro] .sig{left:23px;height:64px}html[data-motion=pro] .sig b{font-size:21px}html[data-motion=pro] .sig span{font-size:8px}html[data-motion=pro] .top a,html[data-motion=pro] .top button{font-size:9px}html[data-motion=pro] .top a span{font-size:13px}}
/* (V4) our Transitions beside Contact needs room pro's header never had: on the narrowest phones the row tightens */
@media(max-width:360px){html[data-motion=pro] .top{gap:12px;padding:0 16px}html[data-motion=pro] .sig{left:16px;gap:8px}html[data-motion=pro] .sig b{font-size:17px}html[data-motion=pro] .top a,html[data-motion=pro] .top button{letter-spacing:.08em}html[data-motion=pro] .top a span{margin-left:5px}}
/* (V4 pass 31) "Great" set as "both ways." is: the tail face's italic, in the accent (Mike, Oct 11: "can you make 'great'
   italic and the same color as 'both ways' in all three pro act 2 animations?"). Good and Great share one cell on the
   baseline, so the italic, a size up beside a sans, sits on the line; a hair of room for the italic's overhang before "care" */
#pro .word-swap{display:inline-grid;align-items:baseline;justify-items:start}
#pro .word-swap>.from,#pro .word-swap>.to{grid-area:1/1;position:static}
#pro .word-swap .to{font-family:var(--tail);font-style:italic;font-weight:400;color:var(--accent);font-variation-settings:'opsz' 72;letter-spacing:-.03em;font-size:1.1em;line-height:.9;padding-right:.05em}
html #pro[data-type=literary] .word-swap .to,html #pro[data-type=classic] .word-swap .to{font-size:1em;line-height:inherit}
/* (V4 pass 31) "Let's Talk": the arrow just past the words and the line no longer than they are (Mike, Oct 11: "the arrow
   is a bit far from the text and the line is kinda long", "can we finesse that a bit") */
#pro .p-talk{width:max-content;justify-content:flex-start;gap:8px;padding-right:1px}
/* (V4 pass 32) Passage and Passage Alternate free the stage's height: pro's Passage module carries this rule for its
   page (html[data-concept=passage] #stage{min-height:0}); its #stage is our #pro-stage, its html our #pro */
html #pro[data-concept=passage] #pro-stage,html #pro[data-concept=passage-alt] #pro-stage{min-height:0}
/* (V4 pass 32) the eight studies see the weights pro's page loads, no more: Newsreader at 400 only and EB Garamond at
   400 and 500 (its Google Fonts link), so a study that asks a serif for 500 or bold gets what it gets on pro's page (the
   regular, or a synthesised bold) and not the true weight our variable copies hold. Our own files, declared narrower,
   under their own names, inside the new studies only; 01-03 and the rest of the site keep the full fonts */
@font-face{font-family:"Newsreader Pro400";src:url("../../fonts/newsreader-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Newsreader Pro400";font-style:italic;src:url("../../fonts/newsreader-italic-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"EB Garamond Pro500";src:url("../../fonts/eb-garamond-latin.woff2") format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"EB Garamond Pro500";font-style:italic;src:url("../../fonts/eb-garamond-italic-latin.woff2") format("woff2");font-weight:400 500;font-display:swap}
html #pro #new-studies{--tail:'Newsreader Pro400',serif}
html #pro[data-type=literary] #new-studies{--head:'Newsreader Pro400',serif;--tail:'Newsreader Pro400',serif}
html #pro[data-type=classic] #new-studies{--head:'EB Garamond Pro500',serif;--tail:'EB Garamond Pro500',serif}
/* (V5 pass 40) pro's closing band (its page's #contact, after the stage) follows every Pro study's finale (Mike, Oct 13:
   "we wanna incorporate that followign the act 2 finale"). Its declarations are pro's, byte for byte, but for the id; the
   link takes the band's light ink, as it does on pro's page */
#pro #pro-band{position:relative;background:rgb(var(--smoke));color:var(--light);padding:110px 8vw;z-index:4}
#pro #pro-band h2{font-family:var(--tail);font-size:clamp(60px,7vw,110px);font-weight:400;font-style:italic;letter-spacing:-.035em;margin:25px 0}
#pro #pro-band>p:not(.p-eyebrow){font-size:15px;max-width:45ch;line-height:1.6}
#pro #pro-band a{color:inherit}
#pro #pro-band-story{display:inline-block;margin-top:30px}
/* pro's Chapters rule centres every eyebrow, its closing section's too; ours stays over its heading */
html #pro #pro-band .p-eyebrow{text-align:left}
@media(max-width:900px){#pro #pro-band{padding:85px 25px}}
/* (V5 pass 40) no "WATT / 02" folio (Mike, Oct 13: "remove 'watt / 02'"); its place is kept so Continue stays right */
#pro .folio{visibility:hidden}
/* EB Garamond for pro's third typography, from our own V2 copy (Oct 9 download; OFL) */
@font-face{font-family:"EB Garamond";src:url("../../fonts/eb-garamond-latin.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"EB Garamond";font-style:italic;src:url("../../fonts/eb-garamond-italic-latin.woff2") format("woff2");font-weight:400 800;font-display:swap}