/* Individual functions, full-frame supplied artwork, R6. */
.hero-scope{font-size:11px;letter-spacing:.06em;color:var(--accent);margin:-8px auto 21px}
.hero-description{max-width:610px}
.menu-toggle{display:grid}
.chapter-index{gap:7px}
.chapter-index a{width:28px;height:28px}
.text-link{display:inline-flex;gap:12px;align-items:center;min-height:44px;padding:9px 0;color:var(--accent);font-size:12px;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--line)}
.text-link:hover{text-decoration-color:var(--accent)}
.single-function-story{border-block:1px solid var(--line);padding:110px 0}
.art-story{display:grid;grid-template-columns:1fr 1.15fr;gap:90px;align-items:center}
.art-story-copy h2{margin:25px 0 28px}
.art-story-copy>p:not(.eyebrow){max-width:420px;color:var(--muted);font-size:14px;line-height:1.9}
.art-story-copy>.pill{margin-top:28px}
.function-art{margin:0;min-width:0}
.art-paper{background:#fff;overflow:hidden}
.function-art img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.function-art figcaption{margin-top:14px;font-size:10px;line-height:1.6;color:var(--muted);letter-spacing:.03em}
.catalogue-intro{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;margin-bottom:75px}
.catalogue-intro h2{margin:25px 0 28px}
.catalogue-intro>div>p:not(.eyebrow){max-width:410px;color:var(--muted);margin-bottom:20px}
.catalogue-intro .note{font-size:12px}
.catalogue-intro>.function-art{max-width:510px}
.catalogue-tools{display:flex;gap:30px;align-items:center;justify-content:space-between;margin-bottom:23px;flex-wrap:wrap}
.area summary{grid-template-columns:45px minmax(200px,1fr) minmax(230px,.9fr) 24px;gap:25px}
.area-short{max-width:400px;font-size:11px;line-height:1.9}
.function-rows{padding:0 0 26px 70px}
.function-row{display:grid;grid-template-columns:minmax(200px,.9fr) 1.5fr;gap:40px;padding:28px 0;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.function-name h3{font-family:Editorial,Georgia,serif;font-size:29px;line-height:1.13;margin:0 0 19px}
.function-select{min-height:44px;padding:8px 18px;gap:22px;font-size:11px}
.function-select[aria-pressed=true]{border-color:var(--accent);background:var(--text);color:var(--bg)}
.function-io{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.function-io b{display:block;font-weight:400;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.function-io p{font-size:12px;color:var(--muted);line-height:1.9}
.selection-status{min-height:22px;margin-top:16px}
.experience-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:65px;align-items:start}
.experience-layout>.function-art{margin-top:3px}
.interactive-example{min-width:0}
.interactive-example .example-selector{margin-bottom:25px;gap:6px}
.interactive-example .example-selector button{padding:9px 16px;font-size:11px}
.interactive-example .flow-stage{display:block;min-height:350px;padding:20px 0}
.interactive-example .flow-index{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.interactive-example .flow-index button{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:7px 0;font-size:9px;line-height:1.5;min-height:65px}
.interactive-example .flow-index button span{font-size:25px}
.interactive-example .flow-content h3{font-size:33px}
.interactive-example .flow-content p{font-size:13px}
.interactive-example .flow-content dl{gap:18px 25px}
.interactive-example .flow-content dt{font-size:9px}
.interactive-example .flow-content dd{font-size:12px}
.interactive-example .flow-controls{display:block;margin-top:18px}
.interactive-example .flow-status{margin-bottom:18px}
.interactive-example .flow-actions{justify-content:space-between}
.interactive-example .flow-actions .pill{padding:9px 18px;font-size:11px}
.example-function{border-top:1px solid var(--line);margin-top:30px;padding-top:23px;display:flex;gap:18px;align-items:center;justify-content:space-between}
.example-function .eyebrow{font-size:8px;margin-bottom:7px}
.example-function p:not(.eyebrow){font-size:12px}
.example-function .pill{flex-shrink:0;gap:10px}
.potential{padding:145px 0;border-bottom:1px solid var(--line)}
.calculator{display:grid;grid-template-columns:1.1fr 1fr;gap:90px}
.calculator-inputs h3{font:400 34px/1.15 Editorial,Georgia,serif;margin-bottom:13px}
.calculator-inputs>.note{margin-bottom:30px}
.calculator-fields{display:grid;grid-template-columns:1fr 1fr;gap:28px 34px}
.calculator-fields .field{justify-content:space-between;min-width:0}
.calculator-fields .field label{font-size:11px}
.number-field{position:relative;border-bottom:1px solid var(--line)}
.number-field input{font:400 36px/1.2 Editorial,Georgia,serif;padding:8px 0 29px;border:0;min-height:85px}
.number-field>span{position:absolute;bottom:9px;left:0;font-size:9px;pointer-events:none;color:var(--muted)}
.calculator-range label{display:flex;gap:15px;justify-content:space-between;align-items:flex-start}
.calculator-range output{color:var(--accent);white-space:nowrap}
.calculator-range input{accent-color:var(--accent);width:100%;padding:0;border:0;min-height:44px;cursor:pointer}
.calculator-range .note{font-size:10px;margin-top:-10px}
.calculator-actions{display:flex;flex-wrap:wrap;gap:25px;margin-top:25px}
.calculator-results{border-left:1px solid var(--line);padding:15px 0 0 55px}
.calculator-results .eyebrow{font-size:9px;line-height:1.8}
.calculated-values{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:25px 0 30px}
.calculated-values output{font:400 clamp(44px,5vw,76px)/1.1 Editorial,Georgia,serif;display:block;letter-spacing:-.035em;overflow-wrap:anywhere}
.calculated-values span{font-size:10px;color:var(--muted)}
.calculator-results>.note{font-size:11px;margin-top:13px}
.calculator-formula{border-top:1px solid var(--line);padding-top:18px}
.calculator-example-note{color:var(--accent)}
.calculator-error{margin-top:15px}
[aria-invalid=true]{outline:1px solid var(--accent)}
.faq{padding:0 0 140px}
.faq .section-heading{margin-bottom:45px}
.faq-items{max-width:970px;margin-left:auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:30px;cursor:pointer;padding:25px 0;font-size:15px;min-height:70px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{font-size:24px;color:var(--accent)}
.faq details[open] summary span{transform:rotate(45deg)}
.faq details>p{max-width:780px;padding:0 45px 28px 0;font-size:13px;color:var(--muted);line-height:1.9}
.selected-functions{padding-bottom:35px;margin-bottom:35px;border-bottom:1px solid var(--line)}
.selected-functions>h3{font:400 30px/1.15 Editorial,Georgia,serif;margin-bottom:18px}
.selected-functions ul{list-style:none;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap}
.selected-functions li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding-left:16px;max-width:100%;font-size:11px}
.selected-functions li span{padding:9px 0}
.selected-functions li button{min-height:44px;min-width:44px;color:var(--accent);font-size:21px;flex-shrink:0}
.form-buttons{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.form-buttons .text-link{font-size:10px}
.menu-links a{font-size:clamp(34px,5vw,65px)}
.menu-top{margin-bottom:35px}
.lang-switch button{min-width:44px}
.contact .field input,.contact .field textarea,.contact .field select{font-size:16px}
@media(max-width:1100px){
 .art-story,.catalogue-intro{gap:50px}
 .experience-layout{gap:40px}
 .calculator{gap:45px}
 .calculator-results{padding-left:35px}
 .function-row{gap:25px;grid-template-columns:.9fr 1.3fr}
 .function-io{gap:22px}
 .area summary{grid-template-columns:35px 1fr .9fr 22px;gap:18px}
 .function-rows{padding-left:53px}
 .header-controls{gap:8px}
 .example-function{display:block}
 .example-function .pill{margin-top:15px}
}
@media(max-width:900px){
 .art-story,.catalogue-intro{grid-template-columns:1fr 1fr;gap:35px}
 .art-story-copy h2,.catalogue-intro h2{font-size:52px}
 .experience-layout{grid-template-columns:1fr;gap:45px}
 .experience-layout>.function-art{max-width:530px;justify-self:center;width:100%}
 .interactive-example .flow-content{max-width:none}
 .interactive-example .flow-stage{min-height:330px}
 .example-function{display:flex}
 .example-function .pill{margin-top:0}
 .calculator{grid-template-columns:1fr;gap:35px}
 .calculator-results{border-left:0;border-top:1px solid var(--line);padding:35px 0 0}
 .calculated-values{max-width:550px}
 .calculated-values output{font-size:70px}
 .function-row{grid-template-columns:1fr;gap:23px}
 .function-name{display:flex;align-items:center;gap:25px;justify-content:space-between}
 .function-name h3{margin:0;max-width:360px}
 .function-name .pill{flex-shrink:0}
 .area-title{font-size:36px}
 .header-contact{display:none}
 .hero-side{display:none}
 .hero-art{width:500px;height:500px}
}
@media(max-width:760px){
 .site-header{height:92px;padding:0 15px}
 .header-controls{gap:0}
 .lang-switch button{min-width:33px;min-height:44px}
 .icon-button,.menu-toggle{width:44px;height:44px}
 .hero{height:auto;min-height:0;padding:125px 0 65px}
 .hero-eyebrow{position:relative;top:auto;font-size:8px;padding:0 18px;margin:0 auto 20px;max-width:360px;line-height:1.8}
 .hero-art{position:relative;top:auto;left:auto;transform:none;width:min(365px,calc(100% - 28px));height:auto;aspect-ratio:1;margin:0 auto;z-index:0}
 .hero-copy{position:relative;bottom:auto;left:auto;right:auto;margin:17px 20px 0}
 .hero h1{font-size:clamp(45px,13vw,80px);line-height:.95}
 .hero-description{font-size:12px;margin:23px auto 19px;max-width:335px}
 .hero-scope{margin:0 auto 24px;font-size:10px}
 .study-caption{bottom:21px;left:22px;font-size:8px;max-width:265px}
 .motion-control{bottom:13px;width:44px;height:44px}
 .single-function-story{padding:85px 0}
 .art-story,.catalogue-intro{display:flex;flex-direction:column;gap:35px;align-items:stretch}
 .art-story-copy h2,.catalogue-intro h2{font-size:clamp(43px,11vw,65px);line-height:1.03}
 .art-story-copy>p:not(.eyebrow){font-size:13px}
 .function-art{width:100%;max-width:520px;align-self:center}
 .function-art figcaption{font-size:9px;margin-top:11px}
 .catalogue-intro{margin-bottom:42px}
 .catalogue-intro>div>p:not(.eyebrow){font-size:13px;margin-bottom:15px}
 .catalogue-tools{gap:8px 18px;margin-bottom:14px}
 .catalogue-tools>.note{width:100%}
 .catalogue-tools .text-link{font-size:11px}
 .area summary{grid-template-columns:25px 1fr 20px;gap:12px;padding:27px 0 24px}
 .area-title{font-size:32px;grid-column:2;grid-row:1}
 .area-number{grid-column:1;grid-row:1}
 .area-plus{grid-column:3;grid-row:1}
 .area-short{display:block;grid-column:2;grid-row:2;font-size:10px;max-width:none;line-height:1.9;margin-top:1px}
 .function-rows{padding:0 0 22px 37px}
 .function-row{padding:24px 0;gap:22px}
 .function-name{display:block}
 .function-name h3{font-size:29px;margin-bottom:16px}
 .function-io{grid-template-columns:1fr;gap:17px}
 .function-io b{margin-bottom:6px;font-size:9px}
 .function-io p{font-size:12px;line-height:1.8}
 .experience-layout{gap:35px}
 .interactive-example .flow-index{gap:8px}
 .interactive-example .flow-index button{font-size:9px}
 .interactive-example .flow-stage{min-height:370px}
 .interactive-example .flow-content h3{font-size:33px}
 .example-function{display:block}
 .example-function .pill{margin-top:18px}
 .potential{padding:95px 0}
 .calculator-fields{gap:24px}
 .calculator-fields .field{margin-bottom:0}
 .calculator-actions{gap:10px 25px}
 .calculator-fields .field label{font-size:11px}
 .calculator-range{grid-column:1/-1;margin-top:5px}
 .calculator-fields .field:nth-child(3){grid-column:1/-1;max-width:260px}
 .number-field input{font-size:40px}
 .calculator-results{padding-top:30px}
 .calculated-values{gap:20px}
 .calculated-values output{font-size:58px}
 .calculator-results .eyebrow{font-size:8px}
 .calculator-actions .text-link{font-size:11px}
 .approach-steps{margin-top:45px}
 .faq{padding-bottom:95px}
 .faq summary{font-size:13px;padding:22px 0;gap:20px}
 .faq details>p{font-size:12px;padding-right:20px}
 .selected-functions>h3{font-size:29px}
 .selected-functions li{padding-left:12px}
 .selected-functions li span{font-size:10px}
 .form-buttons .text-link{font-size:11px}
 .menu-links a{font-size:clamp(34px,8vw,48px)}
 .menu-top{margin-bottom:30px}
 .menu-links{gap:10px}
}
@media(max-width:370px){
 .site-header{padding:0 11px}
 .site-header .brand-name{font-size:22px}
 .lang-switch button{min-width:32px}
 .hero-copy{margin-inline:16px}
 .hero h1{font-size:42px}
 .hero-description{font-size:11px}
 .hero-eyebrow{font-size:7px}
 .area-title{font-size:29px}
 .function-name h3{font-size:27px}
 .calculator-fields{grid-template-columns:1fr}
 .calculator-fields .field:nth-child(3){max-width:none}
 .calculated-values output{font-size:51px}
}