@charset "UTF-8";
:root{--ink:#26342d;--yellow:#fff19a;--green:#b8eb97;--coral:#ed6563;--line:#26342d55;--display:Georgia,'Times New Roman',serif;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:35px}
body{margin:0;isolation:isolate;background:var(--yellow);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}
body.modal-open{overflow:hidden}
.colour-planes{--plane-angle:153deg;position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(var(--plane-angle),var(--yellow) 0 38%,var(--green) 38% 72%,var(--coral) 72% 100%)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.wrap{width:calc(100% - 100px);max-width:1440px;margin-inline:auto}
.header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:106px;border-bottom:1px solid var(--line)}
.identity{display:flex;gap:13px;align-items:center;font-weight:700;white-space:nowrap}
.monogram{font-size:33px;font-weight:900;letter-spacing:-2px}
.header nav{display:flex;align-items:center;gap:30px;font-size:14px}
.header nav>a,.quadern-trigger{padding:10px 0}
.header nav>a:hover,.quadern-trigger:hover{text-decoration:underline;text-underline-offset:6px}
.home-link>span[aria-hidden]{margin-left:8px}
.home-label-short{display:none}
.quadern-menu{position:relative}
.quadern-list{position:absolute;z-index:30;right:-16px;top:100%;width:min(350px,calc(100vw - 40px));max-height:calc(100dvh - 110px);overflow:auto;background:var(--yellow);border:1px solid var(--ink);list-style:none;margin:0;padding:8px}
.quadern-list[hidden]{display:none}
.quadern-list a{display:block;padding:13px 12px;font-size:14px;line-height:1.4}
.quadern-list a:hover,.quadern-list a:focus-visible{background:var(--green)}
.quadern-list small{display:block;font-size:11px;margin-top:5px}
.scroll-progress{position:fixed;inset:0 auto auto 0;width:100%;height:3px;transform:scaleX(0);transform-origin:left;background:var(--ink);z-index:100}
.hero{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:5vw;min-height:calc(100svh - 106px);padding:44px 0 48px;align-items:center}
.hero-copy{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.panel-top{display:flex;justify-content:space-between;align-items:center;padding-right:30px}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;margin:0}
.little-star{font-size:36px;line-height:1;transition:transform .6s}
.hero-copy:hover .little-star{transform:rotate(90deg)}
h1{font:400 clamp(85px,10.1vw,154px)/.88 var(--display);letter-spacing:-7px;margin:30px 0 30px}
h1 em{font-weight:400;display:inline-block;transform:translateX(5vw)}
.hero-description{max-width:520px;font-size:16px;line-height:1.75;margin:0 0 25px}
.button{display:inline-flex;align-items:center;align-self:flex-start;gap:60px;border-bottom:1px solid var(--ink);padding:10px 0;font-size:14px}
.button span{font-size:27px;transition:transform .3s}
.button:hover span{transform:translate(4px,4px)}
.hero-bottom{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);font-size:9px;letter-spacing:1px;margin-top:35px;padding-top:16px}
.hero-aside{position:relative;max-width:360px;padding:10px 0 0;transform:translateY(32px)}
.question-mark{width:clamp(140px,16vw,230px);aspect-ratio:1;border:2px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;gap:8px;transform:rotate(-17deg);margin:24px 0 30px;transition:transform .6s}
.question-mark>span:first-child{font:italic 400 clamp(57px,7vw,95px)/1 var(--display);letter-spacing:-5px}
.question-mark>span:last-child{font-size:35px;align-self:center}
.hero-aside:hover .question-mark{transform:rotate(0deg)}
.hero-aside h2{font:400 32px/1.08 var(--display);letter-spacing:-1px;margin:0 0 18px}
.hero-aside>p:not(.eyebrow){font-size:14px;line-height:1.7;margin:0 0 20px}
.hero-aside>a{border-bottom:1px solid var(--ink);padding:7px 0;font-size:12px;display:inline-flex;gap:30px}
.hero-aside>a span{font-size:20px}
.notes{padding:100px 0 110px;border-top:1px solid var(--line)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:35px}
.section-heading h2{font:400 clamp(54px,6.2vw,88px)/1 var(--display);letter-spacing:-4px;margin:20px 0 0}
.section-heading>p{font-size:14px;line-height:1.65;margin:0}
.notes-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px}
.filters{display:flex;flex-wrap:wrap;gap:10px}
.filter{padding:8px 14px;background:transparent;border:1px solid transparent;border-radius:0;font-size:12px;transition:border-color .2s}
.filter span{font-size:10px;margin-left:8px}
.filter.active,.filter:hover{border-color:var(--ink)}
.sample-label{font-size:9px;letter-spacing:1.3px;white-space:nowrap}
.notes-grid{counter-reset:notes;display:block}
.note-card[hidden]{display:none}
.note-card{position:relative;border-top:1px solid var(--line)}
.note-card:last-child{border-bottom:1px solid var(--line)}
.note-button{position:relative;display:grid;grid-template-columns:105px minmax(0,1fr) 30px;column-gap:28px;row-gap:12px;width:100%;padding:30px 0;text-align:left;border:0;background:transparent;transition:padding .3s}
.note-button::after{content:'↗';grid-column:3;grid-row:1/4;font-size:29px;align-self:center;transition:transform .3s}
.note-button:hover::after{transform:translate(5px,-5px)}
.note-cover{grid-column:1;grid-row:1/4;align-self:start;padding-top:3px;counter-increment:notes}
.note-cover::before{content:counter(notes,decimal-leading-zero);font:400 58px/1 var(--display);letter-spacing:-3px}
.note-cover small,.cover-title,.cover-bottom{display:none}
.note-meta{grid-column:2;grid-row:1;display:flex;gap:9px;font-size:10px;letter-spacing:1px;text-transform:uppercase}
.note-category{font-weight:700}
.note-card h3{grid-column:2;grid-row:2;font:400 clamp(24px,2.6vw,38px)/1.15 var(--display);letter-spacing:-1px;margin:0;max-width:940px}
.note-summary{grid-column:2;grid-row:3;max-width:680px;font-size:14px;line-height:1.6;margin:0}
.about{position:relative;border-top:1px solid var(--line);display:grid;grid-template-columns:1.15fr 1fr;gap:70px;padding:85px 0 90px}
.about h2{font:400 clamp(65px,7.4vw,105px)/.95 var(--display);letter-spacing:-4px;margin:30px 0 10px}
.about h2 em{font-weight:400}
.about-star{display:block;font-size:90px;line-height:1;margin-top:35px;transition:transform .8s;transform-origin:45px 45px}
.about-star:hover{transform:rotate(90deg)}
.about-copy{padding-top:48px}
.about-copy>p{font-size:17px;line-height:1.85;margin:0 0 22px}
.interest-tags{display:flex;flex-wrap:wrap;gap:18px;margin:30px 0}
.interest-tags span{border-bottom:1px solid var(--ink);padding:5px 0;font-size:12px}
.text-link{display:inline-flex;gap:32px;border-bottom:1px solid var(--ink);padding:8px 0;font-size:14px}
.closing{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:40px 0;border-top:1px solid var(--line)}
.closing p{font:400 33px/1.2 var(--display);letter-spacing:-.7px;margin:0}
.closing>a{font-size:12px;border-bottom:1px solid var(--ink);padding-bottom:6px}
.closing>a span{margin-left:18px}
.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:25px 0 30px}
.footer .identity{font-size:13px}.footer .monogram{font-size:24px}.footer>p,.footer>span{font-size:11px}
dialog{width:min(820px,calc(100% - 30px));max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--ink);border-radius:0;background:var(--yellow);color:var(--ink)}
dialog::backdrop{background:#26342d88;backdrop-filter:blur(4px)}
.dialog-bar{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:15px;background:var(--yellow);border-bottom:1px solid var(--line);padding:17px 25px}
.dialog-bar>span{font-size:10px;letter-spacing:1px}
.close-dialog{background:none;border:1px solid var(--ink);padding:9px 16px;display:flex;gap:15px;font-size:13px}.close-dialog span{font-size:18px;line-height:1}
.article-body{padding:40px 60px}.article-body h2{font:400 50px/1.1 var(--display);letter-spacing:-2px;margin:20px 0 25px}
.article-intro{font-size:19px;line-height:1.7;border-bottom:1px solid var(--line);padding-bottom:25px}.article-body h3{font-size:21px;font-weight:500;margin:30px 0 15px}.article-body #article-content p{font-size:17px;line-height:1.85}
.article-end{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px;margin-top:35px}.article-end span{font-size:23px}
.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}
.skip-link{position:fixed;top:-60px;left:15px;z-index:200;background:var(--yellow);border:1px solid var(--ink);padding:12px}.skip-link:focus{top:12px}
@media(min-width:1600px){.hero{min-height:790px}}
@media(max-width:1050px){.wrap{width:calc(100% - 64px)}.hero{grid-template-columns:1.6fr 1fr;gap:45px}h1{font-size:100px;letter-spacing:-5px}.hero-description{font-size:15px}.hero-aside h2{font-size:29px}.hero-bottom{font-size:8px;letter-spacing:.5px}.about{gap:40px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{min-height:88px;gap:16px}.header nav{gap:17px;font-size:12px}.header .identity{font-size:14px;gap:8px}.monogram{font-size:26px}.home-link>span[aria-hidden]{margin-left:2px}.hero{grid-template-columns:1fr;gap:40px;padding:40px 0 50px;min-height:0}.panel-top{padding-right:0}h1{font-size:clamp(70px,15vw,110px);letter-spacing:-4px;margin:30px 0}h1 em{transform:translateX(6vw)}.hero-description{font-size:15px}.hero-bottom{margin-top:30px;font-size:8px}.hero-aside{display:grid;grid-template-columns:1fr 100px;gap:16px 24px;max-width:none;padding:10px 0;transform:none}.hero-aside>.eyebrow{grid-column:1/-1}.question-mark{grid-column:2;grid-row:2/4;width:100px;margin:0;align-self:center}.question-mark>span:first-child{font-size:43px;letter-spacing:-3px}.question-mark>span:last-child{font-size:22px}.hero-aside h2{font-size:30px;margin:0}.hero-aside>p:not(.eyebrow){margin:0;font-size:13px}.hero-aside>a{grid-column:1/-1;justify-self:start}.notes{padding:55px 0}.section-heading{display:block;margin-bottom:28px}.section-heading h2{font-size:51px;letter-spacing:-2px}.section-heading>p{margin-top:18px;font-size:13px}.notes-toolbar{display:block}.sample-label{display:block;margin-top:18px}.filters{gap:5px}.filter{font-size:11px;padding:8px 10px}.note-button{grid-template-columns:38px minmax(0,1fr) 18px;gap:10px 12px;padding:25px 0}.note-cover::before{font-size:35px;letter-spacing:-2px}.note-meta{flex-wrap:wrap;font-size:8px;gap:6px;letter-spacing:.3px}.note-card h3{font-size:27px;letter-spacing:-.6px}.note-summary{font-size:13px}.note-button::after{font-size:23px}.about{grid-template-columns:1fr;gap:25px;padding:55px 0}.about h2{font-size:72px;letter-spacing:-3px}.about-star{position:absolute;top:53px;right:0;font-size:45px;margin:0}.about-copy{padding:0}.about-copy>p{font-size:16px}.closing{flex-direction:column;align-items:start;padding:30px 0;gap:20px}.closing p{font-size:28px}.footer{flex-wrap:wrap;gap:12px}.footer>p{order:3;flex-basis:100%;margin:0}.article-body{padding:25px}.article-body h2{font-size:38px;letter-spacing:-1px}.article-intro{font-size:17px}.dialog-bar{padding:15px}.dialog-bar>span{font-size:9px}.quadern-menu{position:static}.quadern-list{left:0;right:0;top:calc(100% - 14px);width:100%}}
@media(max-width:480px){.header .identity>span:last-child{display:none}.header nav{gap:14px;white-space:nowrap}.home-label{display:none}.home-label-short{display:inline}.desktop-break{display:none}.hero-aside{grid-template-columns:1fr 78px;gap:16px}.question-mark{width:78px}.question-mark>span:first-child{font-size:34px}.question-mark>span:last-child{font-size:18px}.hero-aside h2{font-size:28px}}
@media(max-width:360px){h1{font-size:67px;letter-spacing:-4px}h1 em{transform:translateX(3vw)}.header nav{gap:11px;font-size:11px}.hero-bottom{font-size:7px}.about h2{font-size:62px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-copy:hover .little-star,.hero-aside:hover .question-mark,.about-star:hover,.button:hover span,.note-button:hover::after{transform:none}}