/* Type scale (round 4 art director): six steps, ratio about 1.33; wordmark and opening lettering stay outside it. */
:root{--t-display:clamp(44px,4.6vw,68px);--t-title:34px;--t-lead:23px;--t-body:17px;--t-small:14px;--t-label:12px}
@media(max-width:700px){:root{--t-display:40px;--t-title:28px;--t-lead:20px;--t-label:11px}}
body{font-synthesis:none}
#community-title,.ethos-page .mission-lead,#room-title,.about-page h1,.credits-page h1,.correspondence-page h1{font-size:var(--t-display)!important;line-height:1.08!important;letter-spacing:-.03em}
#tour-moment-title,#member-intro-title,.about-page:not(.ethos-page) h2{font-size:var(--t-title)!important;line-height:1.15!important;letter-spacing:-.02em}
.philosophy-introduction,.history-lead,.community-description p,.ethos-page h3{font-size:var(--t-lead)!important;line-height:1.38!important;max-width:26em}
.ethos-page p,.about-page p,.credits-page p,.history-copy p{font-size:var(--t-body);line-height:1.45}
figcaption,.quiet-link,.atelier-footer address{font-size:var(--t-small)!important;line-height:1.4}
.eyebrow,.atelier-footer nav,.film-timecode,.journey-hint,.tour-chapter time{font-family:Departure,monospace!important;font-size:var(--t-label)!important;letter-spacing:.02em!important;line-height:1.5}
/* Script and pixel faces back to their settled places only. */
#tour-moment-title,#member-intro-title{font-family:Redaction,Georgia,serif!important}
/* Ballet endings restored (Nicole's selected pairing); kept inline, same ink, no indent. */
.about-page h2 em,.about-page h3 em,.correspondence-page h1 em,.letter-paper h1 em,.credits-page h1 em{font-family:Ballet,cursive!important;font-style:normal!important;font-size:1.27em!important;letter-spacing:0!important;line-height:1!important;margin-left:.16em!important}
/* Endings that sit on their own line (display:block) carry more size; inline ones finish a roman line at 1.27x with room for Ballet's left swash (round 14; "passion's home" sat too tight). */
/* No synthetic italics: Redaction has no italic file here, so these lines are set in roman. */
figcaption,.salutation,.letter-signature{font-style:normal}
/* Site-wide polish from the October 21 critique rounds; loaded last on every page. */
/* One quiet home for pause and mute, bottom right on every page. Music credits stays in the footer and menu. */
.visitor-settings{position:fixed!important;right:max(18px,env(safe-area-inset-right))!important;bottom:max(18px,env(safe-area-inset-bottom))!important;left:auto!important;top:auto!important;margin:0!important;padding:0!important;background:none!important;width:auto!important;z-index:40;opacity:.72;transition:opacity .35s ease}
.visitor-settings:hover,.visitor-settings:focus-within{opacity:1}
.visitor-settings>a{display:none!important}
/* One footer on every page. */
.about-footer,.study-footer{display:none!important}
.atelier-footer{position:relative;z-index:5;display:grid;grid-template-columns:1.1fr 1fr 1.6fr;gap:40px;align-items:start;max-width:1180px;margin:90px auto 0;padding:34px 7% calc(96px + env(safe-area-inset-bottom));border-top:1px solid #f1e6d733;color:#e9ddcd;font:15px/1.6 Redaction,Georgia,serif}
.atelier-footer-mark{display:flex;gap:12px;align-items:flex-start}.atelier-footer-mark p{margin:0}.atelier-footer-mark span{font:11px/1.8 Departure,monospace;opacity:.7}
.atelier-footer address{font-style:normal}.atelier-footer a{color:inherit;text-decoration:none;border-bottom:1px solid #f1e6d740}.atelier-footer a:hover,.atelier-footer a:focus-visible{border-bottom-color:currentColor}
.atelier-footer nav{display:flex;flex-wrap:wrap;gap:12px 26px;font:12px/1.6 Departure,monospace;letter-spacing:.02em}
@media(max-width:760px){.atelier-footer{grid-template-columns:1fr;gap:26px;margin-top:60px}.atelier-footer nav{gap:4px 22px}.atelier-footer nav a{padding:10px 0}}
/* One print grade for every photograph on The Space, matching the film's warm afternoon (round 3). */
.color-study{--print-grade:sepia(.24) saturate(.96) contrast(.95) brightness(1.03) hue-rotate(-5deg)}
.color-study img,.color-study .tour-stage video,.color-study .tour-chapter img{filter:var(--print-grade)!important}
.color-study .building-photos img{filter:sepia(.4) saturate(.85) contrast(.95) brightness(1.02) hue-rotate(-8deg)!important}
.color-study .identity-mark img,.color-study img[src$=".svg"],.color-study img[src*="floor-plan"]{filter:none!important}
/* Quiet tour player (round 3). */
.quiet-tour{position:relative}.quiet-tour video{cursor:pointer}
.quiet-tour-toggle{position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;border:1px solid #f1e6d766;background:#170e1766;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:pointer;transition:opacity .45s ease}
.quiet-tour-toggle span{display:block;margin:auto;width:0;height:0;border-left:16px solid #f1e6d7;border-top:10px solid transparent;border-bottom:10px solid transparent;transform:translateX(3px)}
.quiet-tour[data-playing=true] .quiet-tour-toggle{opacity:0}.quiet-tour[data-playing=true]:hover .quiet-tour-toggle,.quiet-tour-toggle:focus-visible{opacity:.85}
.quiet-tour[data-playing=true] .quiet-tour-toggle span{border:0;width:16px;height:20px;transform:none;background:linear-gradient(90deg,#f1e6d7 0 35%,transparent 35% 65%,#f1e6d7 65%)}
/* All seven tour chapters fit on wide screens; phones keep the swipeable rail with a soft edge fade. */
@media(min-width:900px){.tour-chapters-list{grid-template-columns:repeat(var(--tour-chapter-count,7),minmax(0,1fr))!important;gap:8px!important;overflow-x:visible!important}}
@media(max-width:899px){.tour-chapters-list{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}}
/* Sound controls: solid, equal 44px buttons, never translucent over text; pages leave room for them (round 3). */
.visitor-settings{opacity:1!important}
.visitor-settings button{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:50%!important;background:#21141c!important;border:1px solid #f1e6d740!important;color:#f1e6d7!important;display:grid!important;place-items:center!important}
.visitor-settings button svg{width:16px;height:16px}
body.about-page,body.ethos-page,body:has(.letter-paper),body:has(.credits-content){padding-bottom:84px}
/* Ethos: the mission is now the page h1; keep its existing look. */
.ethos-page h1.mission-lead{font-weight:400;margin-block:1em}

/* Round 5: finish the scale. Old accent layout reset; Ethos colours and labels; phone clearance. */
#letter-page h1 em,.about-page h2 em,.about-page h3 em{display:inline!important;margin:0!important;padding:0!important;transform:none!important;color:inherit!important}
.ethos-page h1.mission-lead,.ethos-page h1.mission-lead .mission-creative,#community-title .mission-creative{color:var(--study-ink,#f0e3d1)!important}
.ethos-page h2#philosophy-title,.ethos-page h2#principles-title{font:400 var(--t-label)/1.5 Departure,monospace!important;letter-spacing:.02em!important}
/* Round 7 web: "Who it's for" is a label like its sibling headings; the paragraph below carries the moment. */
.ethos-page h2#people-title{font:400 var(--t-label)/1.5 Departure,monospace!important;letter-spacing:.02em!important}
.philosophy-opening-foot p,.philosophy-opening-foot a{font:400 var(--t-label)/1.5 Departure,monospace!important;letter-spacing:.02em!important}
.philosophy-opening-foot{padding-right:120px}
@media(min-width:701px){#community-title{font-size:clamp(40px,3.6vw,56px)!important;text-wrap:balance}.community-note:has(#community-title){max-width:740px!important}}
@media(max-width:700px){.correspondence-page,.credits-page{padding-bottom:120px!important}}
.atelier-footer{width:min(1180px,86vw);max-width:none;padding-left:0;padding-right:0}

/* Round 6 mobile: sound controls sit in flow below the Apply letter on phones; footer rows 44px; menu locks scroll. */
@media(max-width:700px){.correspondence-page .visitor-settings{position:static!important;display:flex!important;justify-content:flex-end;margin:24px 18px calc(24px + env(safe-area-inset-bottom))!important}.atelier-footer nav a,.atelier-footer address a{display:inline-flex;align-items:center;min-height:44px}}
html:has(.has-mobile-menu [aria-expanded="true"]){overflow:hidden}
/* Round 7 web: footer links are 44 px targets at every width; the underline stays with the text. */
.atelier-footer nav a,.atelier-footer address a{display:inline-flex;align-items:center;min-height:44px;padding-top:0!important;padding-bottom:0!important;border-bottom:0!important;text-decoration:underline 1px #f1e6d740;text-underline-offset:5px}
.atelier-footer nav a:is(:hover,:focus-visible),.atelier-footer address a:is(:hover,:focus-visible){text-decoration-color:currentColor}
@media(min-width:761px){.atelier-footer nav{gap:0 26px;margin-top:-12px}}

/* Round 9 art director 3: one external-link treatment (site-arrows.js writes the span); the quiet link's 26 px gap no longer detaches it. */
.external-mark{font-size:1em!important;font-family:inherit;letter-spacing:0;margin:0!important;white-space:nowrap}
a:has(>.external-mark){gap:0!important;justify-content:flex-start!important}

/* Round 10 art director 4: one ground on every page (the gate and theme colour already use it). */
html,body,body.about-page,.about-page,.ethos-philosophy,.color-study.quiet-full-frame{background-color:#160e13!important}
.ethos-page,.ethos-philosophy,.color-study.quiet-full-frame{--quiet-bg:#160e13!important}
.orchid-atmosphere{background-color:#160e13!important}

/* Round 10 art director 3: one type scale. Seven steps, read from these tokens everywhere:
   label 12 (all Departure Mono; the floor), small 15 (captions, footer, notes), body 18 (running text and links),
   lead 23 (standfirsts, principle titles), title 36 (section headings), scene 52 (the homepage scene headings),
   display 66 (page titles). Phones: lead 20, title 30, scene 34, display 40.
   The wordmarks, the Ballet words and the mission's curious / ambitious / creative faces are artwork and keep their own sizes. */
:root{--t-label:12px;--t-small:15px;--t-body:18px;--t-lead:23px;--t-title:36px;--t-scene:52px;--t-display:clamp(48px,6vw,66px)}
/* Phone type steps retain the same hierarchy with more room for complete phrases. */
@media(max-width:700px){:root{--t-label:12px;--t-small:15px;--t-body:17px;--t-lead:19px;--t-title:28px;--t-scene:30px;--t-display:clamp(32px,8.7vw,36px)}}
/* Label: every mono line at 12 px. */
:is(.tour-chapter-time,.tour-timecode,.atelier-footer-mark span,.collection-credit,.frame-kicker,.frame-open,.space-page-nav a,.history-kicker,.plan-topline span,.plan-expand,.quiet-link>span:not(.external-mark),.philosophy-botanical figcaption span,.letter-contents li span,#letter-kind,#step-caption,.letter-running-head>span:last-child,.letter-progress,.letter-contents>.eyebrow,.letter-receipt .eyebrow,#letter-page .optional-label,#letter-page .character-count,.outgoing-body small,.application-choices,.application-choices a,.mobile-menu-toggle,.text-link,.philosophy-jump,.philosophy-opening-foot :is(p,span,a)){font-size:var(--t-label)!important}
.history-kicker{font-family:Departure,monospace!important;letter-spacing:.02em!important;line-height:1.5!important}
/* Small: captions, chapter names, notes, the footer. */
:is(figcaption,.polaroid figcaption,.tour-chapter-name,.atelier-footer-mark p,.atelier-footer address,.atelier-footer address a,.invitation-cue,.envelope-address,.history-sources a,.history-sources,.plan-heading p,.quiet-link,.frame-facts,.frame-facts span,.section-heading-v30 p,.return-link,.draft-note,#clear-draft,.letter-error,.letter-footnote,#letter-page .delivery-note,.letter-review dt,.letter-review dt button,.application-bottom-note,.tour-moment-caption :is(button,a,.ink-phrase),.membership-amenities){font-size:var(--t-small)!important}
.invitation-ending .envelope-address span{font-size:12px!important}
/* Body: running text, links and actions. */
:is(.community-actions a,.tour-moment-note,.tour-moment-note .ink-word,.room-introduction a,.room-links button,.quiet-intro,.color-study .silver-intro .quiet-intro,.room-collection-heading p,.history-reading p:not(.history-lead),.practical-intro p,dt,dd,.philosophy-actions a,.philosophy-copy p:not(.philosophy-introduction),.philosophy-section-title p,.letter-contents li,#letter-page p,#letter-page .salutation,#letter-page .question-note,.salutation,.membership-pricing,#letter-next,.letter-navigation button,.receipt-actions button,.letter-choice,.letter-review dd,.letter-consent,#letter-page textarea,.letter-receipt p:not(.eyebrow),.letter-receipt>a,.credits-page .editorial-section p:not(.eyebrow),.credits-page .editorial-section p a,.skip){font-size:var(--t-body)!important}
.invitation-ending .flower-heading>p:last-child,.motion-enabled .invitation-ending .flower-heading>p:last-child,.motion-enabled .invitation-ending .flower-heading>p:last-child .ink-word{font-size:var(--t-body)!important}
/* Lead: standfirsts, principle titles, disclosure titles, the ethos lines. */
:is(.community-description>p,.philosophy-introduction,.ethos-lines p,.ethos-page h3,.history-lead,#plan-title,#plan-title+span,summary>span,.plan-heading h3,#letter-page input:not([type=radio]):not([type=checkbox]),.outgoing-body>span){font-size:var(--t-lead)!important}
/* Title: section headings. */
:is(#tour-moment-title,#tour-moment-title .ink-word,#member-intro-title,.about-page:not(.ethos-page) h2,#getting-here-title,.quiet-closing p,.color-study .quiet-closing p,.philosophy-community,.philosophy-community p:not(.community-throughline),#letter-page h2,.letter-receipt h1){font-size:var(--t-title)!important}
/* Scene: the homepage's mission and garden headings. */
#community-title,.motion-enabled .invitation-ending .flower-heading h2{font-size:var(--t-scene)!important}
/* Display: page titles (Welcome home., the mission on Ethos, Tell us your world., A little rhythm., Not found). */
.about-page h1,.ethos-page h1.mission-lead,.credits-page h1,.correspondence-page h1,#letter-page h1{font-size:var(--t-display)!important}
@media(max-width:700px){.room-introduction p,.room-belonging{font-size:var(--t-body)!important}}
:is(.plan-caption,.plan-caption strong){font-size:var(--t-small)!important}
.getting-here p{font-size:var(--t-body)!important}
.plan-caption :is(p,strong){font-size:var(--t-small)!important}
.ethos-page li p{font-size:var(--t-body)!important}

/* Round 11 art director 1: three shared lines on every page (De Cotiis' rail, plate and caption, taken from the homepage tour).
   At 1440: rail x 88 (titles, labels, leads, in-page navigation), plate x 410 to 1030 (the one dominant object of a screen),
   caption x 1054 (secondary notes). From 1180 px the lines scale with the width (12 columns, 88 px margins, 24 px gutters);
   above 1440 the 1440 frame is centred. Phones: one left edge at 24 px. Only where blocks start changes. */
:root{--rail:24px;--plate-x:24px;--plate-w:calc(100vw - 48px);--caption-x:24px}
@media(min-width:1180px){:root{--rail:max(6.111vw,calc(50vw - 632px));--plate-x:max(28.472vw,calc(50vw - 310px));--plate-w:min(43.056vw,620px);--caption-x:min(73.194vw,calc(50vw + 334px))}}
/* Round 12 web director 3: the caption line takes min, not max, so above 1440 it stays 334 px right of centre (it kept growing
   with the viewport and left the room paragraph 38 px wide at 2560); identical from 1180 to 1440. */
/* The shared footer hangs from the rail on every page (from 1180 px). */
@media(min-width:1180px){.atelier-footer{margin-left:var(--rail)!important;margin-right:var(--rail)!important;width:auto!important}}
/* Round 14 (Nicole, 2026-10-22): “apply button should be highlighted like with a box”. One shared class for the primary
   Apply to join: a 1px ivory box, no fill at rest, at least 44px tall, the type it already has; filled ivory with the dark
   ground's colour on hover and focus. Square corners (the site's text buttons carry no radius); no shadow. */
.apply-box.apply-box.apply-box{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:44px;padding:10px 18px!important;border:1px solid var(--study-ink,#f0e3d1)!important;border-radius:0;background:transparent;color:var(--study-ink,#f0e3d1);text-decoration:none!important;box-shadow:none;transition:background-color .25s ease,color .25s ease}
.apply-box.apply-box.apply-box:is(:hover,:focus-visible){background:var(--study-ink,#f0e3d1);color:var(--quiet-bg,#261c23);text-decoration:none!important}
.apply-box.apply-box.apply-box:is(:hover,:focus-visible) *{color:inherit!important}
.apply-box.apply-box.apply-box:focus-visible{outline:1px solid var(--study-ink,#f0e3d1);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.apply-box.apply-box.apply-box{transition:none}}

/* Nicole 10-22: the header is not a pixel font; navigation in Redaction. The throughline under Who it's for is its own smaller part. */
.site-header .film-navigation a,.site-header .header-apply,.site-header .mobile-menu-toggle{font-family:Redaction,Georgia,serif!important;font-size:16px!important;letter-spacing:0!important}
.philosophy-community p.community-throughline{font-size:var(--t-body,19px)!important}
/* Ballet's h, k and l swing their ascenders far left; give inline endings a clear word space (round 14, "passion's home"). */
.about-page h2 em,.about-page h3 em,.credits-page h1 em{margin-left:.3em!important}
/* Nicole 10-22: no pixel/typewriter face for labels ("subtitles"); labels match the logo's small line: Redaction capitals, wide tracking. Time, counters and the access screen keep Departure. */
.eyebrow,.atelier-footer nav,.journey-hint,p.eyebrow,.philosophy-opening-foot p,.letter-kind,#letter-kind,.collection-label{font-family:Redaction,Georgia,serif!important;text-transform:uppercase!important;letter-spacing:.2em!important;font-size:11.5px!important}

/* Labels/links on Credits and 404 out of Departure too (Codex punch list). */
.text-link,.notfound-links .text-link,.credits-page .text-link{font-family:Redaction,Georgia,serif!important;letter-spacing:.02em!important}

#letter-kind,.letter-kind{letter-spacing:.14em!important;font-size:10.5px!important;text-align:right;max-width:52%;overflow-wrap:anywhere}
/* Nicole 10-22: the footer mark is the confirmed logo (08a: arch, THE ATELIER, SAN FRANCISCO, CA), not the old eye mark. */
.atelier-footer-mark{display:block!important}
.atelier-footer-mark>*{display:none!important}
.atelier-footer-mark::before{content:"";display:block;width:min(260px,70vw);aspect-ratio:3.499;background:var(--theme-ink,#f1e6d7);-webkit-mask:url(/studies/scrolls/brand-header/08a.svg) left center/contain no-repeat;mask:url(/studies/scrolls/brand-header/08a.svg) left center/contain no-repeat}
/* Round 14 (Nicole 2026-10-22): the bottom-right controls are theme then sound; no motion pause button. The theme toggle
   (site-header.js) takes the same 44px circle as the sound button; its half-filled circle matches the speaker's line weight. */
.visitor-settings #ambient-toggle{display:none!important}
.visitor-settings .theme-toggle svg{width:16px;height:16px}
.visitor-settings .theme-toggle svg circle{fill:none!important;stroke:currentColor!important;stroke-width:.95!important}
.visitor-settings .theme-toggle svg path{fill:currentColor!important;stroke:none!important}

/* Keep the room paragraph independent of the ID selectors in the global lead group.
   Its scene stylesheet sets the paragraph and animated words to the same body measure. */
.room-introduction p,.room-belonging{font-size:var(--t-lead)!important}

/* Nicole 10-23: the application stationery uses the approved arch A and capital wordmark, matching the site header. */
.letter-running-head>span.letterhead-logo{display:block;flex:none;align-self:center;width:clamp(134px,18vw,190px);max-width:48%;aspect-ratio:3.499;background:var(--letter-ink,#4b1224);-webkit-mask:url(/studies/scrolls/brand-header/08a.svg) left center/contain no-repeat;mask:url(/studies/scrolls/brand-header/08a.svg) left center/contain no-repeat;font-size:0}
@media(max-width:700px){.letter-running-head>span.letterhead-logo{-webkit-mask-image:url(/studies/scrolls/brand-header/08a-phone.svg);mask-image:url(/studies/scrolls/brand-header/08a-phone.svg)}}

/* The application label keeps whole words on the narrowest phones. */
@media(max-width:385px){
 .letter-running-head{flex-wrap:wrap;row-gap:8px}
 .letter-running-head>span:last-child{flex:1 0 100%;max-width:none!important;text-align:left!important;overflow-wrap:normal!important}
}