@font-face{font-family:'Cardo Study';src:url('assets/cardo-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cardo Study';src:url('assets/cardo-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Autobahn';src:url('assets/autobahn.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
/* Selected full-width editorial hero. */
.hero-study{--serif:'Cardo Study',Georgia,serif;--study-black:#0d090a;--study-white:#f0f1e9;--content-max:1680px}
/* Center section content while keeping backgrounds and the hero full width. */
.hero-study :is(.section-pad,.site-footer){padding-inline:max(var(--gutter),calc((100% - var(--content-max))/2))}
@media(prefers-reduced-motion:no-preference){
 .hero-study .section-heading.is-reveal-ready{opacity:0;translate:0 24px}
 .hero-study .section-heading.is-reveal-ready.is-revealed{opacity:1;translate:0 0;transition:opacity .9s ease,translate .9s cubic-bezier(.16,1,.3,1)}
 .hero-study .section-heading.is-reveal-ready:focus-within{transition:none}
}
.reference-hero{position:relative;isolation:isolate;overflow:hidden;height:clamp(650px,56.5cqw,940px);background:var(--study-black);color:var(--study-white)}
.study-header{position:absolute;inset:0 0 auto;z-index:8;display:flex;justify-content:center;padding:26px 24px 0}
.study-home{display:grid;place-items:center;width:64px;height:64px}
.study-sign{display:block;width:64px;height:64px;object-fit:contain;filter:invert(1)}
@keyframes study-sign-turn{to{rotate:360deg}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .study-sign{animation:study-sign-turn 20s linear infinite paused}
 .study-home:hover .study-sign{animation-play-state:running}
}
.study-title{position:absolute;left:24px;right:24px;top:21%;margin:0;z-index:4;text-align:center;font-family:'Cardo Study',Georgia,serif;font-size:clamp(27px,2.8cqw,48px);font-weight:400;line-height:1.04;letter-spacing:-.032em;text-transform:uppercase}
.study-title>span{display:block;white-space:nowrap}
.study-art{position:absolute;left:50%;top:47%;width:clamp(190px,20cqw,360px);height:42%;transform:translateX(-50%);z-index:3;display:block;isolation:isolate}
.art-sheet{display:block;width:100%;height:100%;overflow:hidden;background:#d7d8d1}
.art-sheet img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.035);transition:filter .45s}
.study-art:hover .art-sheet img{filter:brightness(1.06)}
.study-wordmark{position:absolute;inset:auto 0 -1px;z-index:5;pointer-events:none;color:var(--study-white);height:12.06cqw}
.study-wordmark svg{display:block;width:100%;height:100%;overflow:visible}
.study-wordmark text{font-family:'Autobahn',serif;font-size:100px;font-weight:400;letter-spacing:0;font-synthesis:none;fill:currentColor}
/* The photographic plate sits behind the large wordmark. */
.study-1 .art-sheet{outline:1px solid rgba(243,242,229,.28);outline-offset:0}
.study-1 .art-sheet img{object-position:50% 50%}
/* Larger book typography for the introductory note. */
.hero-study #about{position:relative;isolation:isolate;overflow:hidden;padding-top:144px;padding-bottom:144px}
.hero-study #about .welcome-material{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-study #about .welcome-material img{position:absolute;left:50%;top:50%;width:132%;max-width:none;height:auto;transform:translate(-50%,-50%);filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;opacity:.5;mask-image:linear-gradient(90deg,#000 20%,rgba(0,0,0,.12) 38%,rgba(0,0,0,.12) 62%,#000 80%)}
.hero-study #about .ornament{font-size:14px}
.hero-study #about .section-heading h2{font-size:clamp(52px,5.2cqw,64px);line-height:1.02}
.hero-study #about .welcome-statement>p{font-size:clamp(26px,2.6cqw,32px);line-height:1.08}
@media(prefers-reduced-motion:no-preference){
 .hero-study #about .welcome-statement.is-reveal-ready>p,.hero-study #about .welcome-statement.is-reveal-ready+.welcome-detail{opacity:0;translate:0 24px}
 .hero-study #about .welcome-statement.is-reveal-ready.is-revealed>p,.hero-study #about .welcome-statement.is-reveal-ready.is-revealed+.welcome-detail{opacity:1;translate:0 0;transition:opacity .9s ease,translate .9s cubic-bezier(.16,1,.3,1)}
}
.hero-study #about .welcome-star{font-size:68px}
.hero-study #about .welcome-star-left{text-align:left}
.hero-study #about .welcome-star-symbol{display:inline-block;vertical-align:top;transform-origin:center}
.hero-study #about .welcome-star-left .welcome-star-symbol{rotate:calc(-1 * var(--welcome-turn,0deg))}
.hero-study #about .welcome-star-right .welcome-star-symbol{rotate:var(--welcome-turn,0deg)}
.hero-study #about .welcome-detail{max-width:460px;font-size:clamp(18px,1.8cqw,22px);line-height:1.4}
.hero-study :is(.subjects-illustrated,.journal-cover,.approach)>.section-heading>.eyebrow{font-size:12px}
.hero-study .approach{--muted:#aaa5a3;position:relative;isolation:isolate;overflow:hidden;padding-block:144px;background:var(--study-black)}
.hero-study .approach::before{content:"";position:absolute;inset:0;z-index:-1;background:url('assets/chrome-ribbon-horizontal.webp') center 60%/118% auto no-repeat;opacity:.18;pointer-events:none;translate:0 var(--approach-drift,0px)}
.hero-study .approach>.section-heading{color:var(--study-white)}
.hero-study .approach>.section-heading h2{font-family:'Autobahn',serif;font-size:clamp(40px,5.5cqw,80px);font-weight:400;font-synthesis:none;line-height:1.1;letter-spacing:0;text-wrap:balance}
.hero-study .approach .method-composition{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:0 clamp(24px,3.4cqw,52px);height:auto;margin-top:64px}
.hero-study .approach .method-note{position:relative;inset:auto;width:auto;min-width:0;padding:24px 0 0;border:0;background:none;color:var(--study-white);text-align:center}
.hero-study .approach .method-note .eyebrow{font-size:12px;line-height:1.5;letter-spacing:.06em;color:var(--muted)}
.hero-study .approach .method-note h3{min-height:2.16em;max-width:15ch;margin:14px auto 16px;font-size:clamp(28px,2.8cqw,40px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.hero-study .approach .method-note p{max-width:36ch;margin-inline:auto;font-size:15px;line-height:1.65;color:var(--muted)}
@media(prefers-reduced-motion:no-preference){
 .hero-study .approach .method-composition.is-reveal-ready{opacity:0;translate:0 24px}
 .hero-study .approach .method-composition.is-reveal-ready.is-revealed{opacity:1;translate:0 0;transition:opacity .9s ease,translate .9s cubic-bezier(.16,1,.3,1)}
 .hero-study .approach .method-composition:focus-within{transition:none}
}
@media(max-width:700px){
 .hero-study .approach{padding-block:96px}
 .hero-study .approach::before{background-size:220% auto;background-position:center 58%;opacity:.14}
 .hero-study .approach .method-composition{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:36px}
 .hero-study .approach .method-note{width:100%;max-width:360px;justify-self:center;padding-top:22px}
 .hero-study .approach .method-note h3{min-height:0;max-width:none;margin:12px auto;font-size:30px;line-height:1.08;text-wrap:pretty}
 .hero-study .approach .method-note p{max-width:none;line-height:1.6}
}
.hero-study .site-footer{--muted:#aaa5a3;overflow:clip;padding-top:64px;background:var(--study-black);color:var(--study-white);border-top:0}
.hero-study .site-footer .footer-top{grid-template-columns:minmax(0,1fr);align-items:center;row-gap:12px}
.hero-study .site-footer .footer-brand{grid-column:1;grid-row:1;justify-self:center;font-family:'Autobahn',serif;font-size:clamp(40px,4.5cqw,64px);font-weight:400;font-synthesis:none;line-height:1.05;letter-spacing:0;text-align:center;white-space:nowrap}
.hero-study .site-footer .footer-brand{transition:opacity .6s ease}
.hero-study .site-footer .footer-top>p{grid-column:1;grid-row:2;justify-self:center;font-size:12px;text-align:center}
.hero-study .site-footer .footer-bottom{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:14px}
.hero-study .site-footer .footer-bottom>nav{grid-column:1;grid-row:1;justify-self:center;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 28px;font-size:14px;color:var(--study-white)}
.hero-study .site-footer .footer-bottom>nav a{display:inline-flex;align-items:center;min-height:40px}
.hero-study .site-footer .footer-bottom>nav button{display:inline-flex;align-items:center;min-height:40px;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit}
.hero-study .site-footer .footer-copyright{display:block;grid-column:1;grid-row:2;justify-self:center;font-size:11px;line-height:1.5;text-align:center}
@media(prefers-reduced-motion:no-preference){
 .hero-study .site-footer.is-reveal-ready>:is(.footer-top,.footer-bottom){opacity:0;translate:0 24px}
 .hero-study .site-footer.is-reveal-ready.is-revealed>:is(.footer-top,.footer-bottom){opacity:1;translate:0 0;transition:opacity .9s ease,translate .9s cubic-bezier(.16,1,.3,1)}
 .hero-study .site-footer.is-reveal-ready:focus-within>:is(.footer-top,.footer-bottom){transition:none}
}
@media(max-width:700px){
 .hero-study .site-footer{padding-top:48px}
 .hero-study .site-footer .footer-top{gap:18px}
}
.hero-study .row-copy h3{font-size:25px;line-height:1.08}
@media(max-width:700px){
 .hero-study #about{padding-top:96px;padding-bottom:96px}
 .hero-study #about .welcome-material img{top:52%;width:220%;opacity:.24;mask-image:none}
 .hero-study #about .ornament{font-size:12px}
 .hero-study #about .section-heading h2{font-size:clamp(36px,10cqw,46px)}
 .hero-study #about .welcome-statement>p{font-size:19px}
 .hero-study #about .welcome-statement br{display:none}
 .hero-study #about .welcome-detail{max-width:330px;font-size:18px}
}
@keyframes study-rise{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes study-photo-reveal{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
@media(prefers-reduced-motion:no-preference){
 .js .study-home{animation:study-rise .7s .05s both}
 .js .study-title{animation:study-rise .9s .15s both}
 .js .art-single .art-sheet{animation:study-photo-reveal 1.1s .3s both}
 .js .study-wordmark{animation:study-rise 1s .4s both}
}
@media(min-width:701px) and (max-width:1100px){
 .reference-hero{height:clamp(600px,64cqw,760px)}
 .study-title{font-size:clamp(26px,2.8cqw,34px)}
 .study-art{width:clamp(165px,22cqw,255px);height:42%}
 .hero-study .row-copy h3{font-size:23px}
}
@media(max-width:700px){
 .reference-hero{height:80svh;min-height:500px}
 .study-header{padding-top:20px}.study-home,.study-sign{width:52px;height:52px}
 .study-title{top:18%;left:18px;right:18px;font-size:clamp(18px,5.2cqw,32px);line-height:1.07;letter-spacing:-.04em}
 /* Fit the portrait between the ornament and wordmark without cropping it. */
 .study-art{top:auto;bottom:calc(12.06cqw - 18px);width:auto;height:min(50%,calc((100cqw - 64px)*1402/1122),calc(60% - 12.06cqw - 14px));aspect-ratio:1122/1402}
 .study-wordmark{height:12.06cqw;bottom:-1px}
 .hero-study .row-copy h3{font-size:23px}
}
@media(max-height:700px) and (min-width:701px){
 .reference-hero{height:100svh;min-height:510px}
 .study-header{padding-top:16px}.study-home,.study-sign{width:48px;height:48px}
 .study-title{top:17%;font-size:clamp(27px,2.5cqw,38px)}
 .study-art{top:43%;height:43%;width:17cqw}
}
@media(prefers-reduced-motion:reduce){.art-sheet img{transform:none}}
/* Material fragments, editorial captions and print details. */
.study-1 .study-title{letter-spacing:-.01em;line-height:1.1}
.study-1 .study-wordmark{bottom:-5px}
.study-1 .study-marginal{position:absolute;top:38px;margin:0;color:#a7aa9e;font:400 16px/1.2 'Autobahn',serif;font-synthesis:none;letter-spacing:.015em}
.study-1 .study-marginal span{display:block}
.study-1 .study-marginal-left{left:var(--gutter)}
.study-1 .study-marginal-right{right:var(--gutter);text-align:right}
.study-1 .hero-materials{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.study-1 .hero-materials::after{content:"";position:absolute;inset:0;opacity:.038;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-repeat:repeat}
.study-1 .material-fragment{position:absolute;display:block;max-width:none;height:auto;mix-blend-mode:screen;filter:grayscale(1);mask-image:linear-gradient(0deg,transparent,#000 16%,#000 85%,transparent)}
.study-1 .material-right{width:58cqw;right:-22cqw;top:-15%;rotate:10deg;opacity:.7}
.study-1 .material-left{width:44cqw;left:-28cqw;top:18%;rotate:-66deg;opacity:.45}
.study-1 .study-punctuation{position:absolute;top:41.2%;left:50%;z-index:2;transform:translateX(-50%);white-space:nowrap;pointer-events:none}
.study-1 .print-register{position:absolute;left:-27px;top:-19px;width:17px;height:17px;color:#9ea18f;pointer-events:none}
.study-1 .print-register::before,.study-1 .print-register::after{content:"";position:absolute;background:currentColor}
.study-1 .print-register::before{top:8px;left:0;width:17px;height:1px}
.study-1 .print-register::after{top:0;left:8px;width:1px;height:17px}
.study-1 .art-sheet{outline-color:rgba(243,242,229,.45);box-shadow:0 0 0 4px rgba(240,241,233,.025),0 16px 50px rgba(0,0,0,.15)}
@media(max-width:1100px) and (min-width:701px){.study-1 .material-right{right:-23cqw;top:1%}.study-1 .material-left{left:-30cqw;top:31%}}
@media(max-width:700px){
 .study-1 .study-marginal{top:27px;font-size:14px}
 .study-1 .material-right{width:104cqw;right:-52cqw;top:20%;rotate:17deg;opacity:.53}
 .study-1 .material-left{width:94cqw;left:-76cqw;top:28%;rotate:-58deg;opacity:.32}
 .study-1 .study-punctuation{top:40%}
 .study-1 .print-register{left:-20px;top:-16px;width:13px;height:13px}
 .study-1 .print-register::before{top:6px;width:13px}.study-1 .print-register::after{left:6px;height:13px}
}
@media(max-height:700px) and (min-width:701px){.study-1 .study-marginal{top:21px;font-size:14px}.study-1 .study-punctuation{top:37.5%}.study-1 .material-right{top:-22%}.study-1 .material-left{top:5%}}
/* Selected scroll parallax: photo, metal fragments and wordmark. */
.simple-parallax .study-art{translate:0 var(--parallax-photo,0px)}
.simple-parallax .material-left{translate:0 var(--parallax-left,0px)}
.simple-parallax .material-right{translate:0 var(--parallax-right,0px)}
.simple-parallax .study-wordmark{transform:translateY(var(--parallax-word,0px))}
.simple-parallax #about .welcome-material img{translate:0 var(--welcome-drift,0px)}
@media(prefers-reduced-motion:reduce){.simple-parallax .study-art,.simple-parallax .material-fragment{translate:none}.simple-parallax .study-wordmark{transform:none}}
@media(prefers-reduced-motion:reduce){.hero-study #about .welcome-star .welcome-star-symbol{rotate:none}}
@media(prefers-reduced-motion:reduce){.hero-study .site-footer .footer-brand{transition:none}}
@media(prefers-reduced-motion:reduce){.simple-parallax #about .welcome-material img{translate:none}}
@media(prefers-reduced-motion:reduce){.hero-study .approach::before{translate:none}}
/* Photocopied cutouts for the four editorial subjects. */
.hero-study .subjects-illustrated{--line:#443e3f;--muted:#aaa5a3;padding-block:144px;background:var(--study-black);color:var(--study-white)}
.hero-study .subjects-illustrated .section-heading h2{font-family:'Autobahn',serif;font-size:clamp(40px,5.5cqw,80px);font-weight:400;font-synthesis:none;line-height:1.1;letter-spacing:0;text-wrap:balance}
.hero-study .subjects-illustrated .subjects-grid{margin-top:64px}
.hero-study .subjects-illustrated .subject{display:flex;flex-direction:column}
.hero-study .subjects-illustrated .subject-label{display:flex;flex:1;flex-direction:column;align-items:center;min-height:116px;padding:0 8px 10px;border:0;text-align:center}
.hero-study .subjects-illustrated .subject-label h3{display:flex;align-items:center;justify-content:center;min-height:2.16em;max-width:14ch;font-family:var(--serif);font-size:clamp(24px,2.3cqw,34px);font-weight:400;line-height:1.08;letter-spacing:-.035em;text-wrap:balance;opacity:1;transition:opacity .3s ease}
.hero-study .subjects-illustrated .subject-label p{max-width:25ch;margin:10px auto 0;color:var(--muted);font-size:14px;line-height:1.5}
.hero-study .subjects-illustrated .subject-number{display:block;position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;text-align:center;line-height:1;letter-spacing:-.04em;pointer-events:none}
.hero-study .subjects-illustrated .subject-visual{flex-shrink:0;height:clamp(190px,18cqw,260px);margin:10px 0 18px;overflow:visible}
.hero-study .subjects-illustrated .paren{top:50%;z-index:1;transform:translateY(-50%) scaleY(.84);font-size:clamp(158px,16.7cqw,233px);-webkit-text-stroke:.02em var(--study-black);pointer-events:none}
.hero-study .subjects-illustrated :is(.subject-number,.paren){opacity:1;transition:opacity .5s ease}
.hero-study .subjects-illustrated .subject:focus-visible :is(.subject-number,.paren){opacity:0}
.hero-study .subjects-illustrated .subject-visual img{position:static;width:100%;height:100%;object-fit:contain;clip-path:none;filter:grayscale(1);mix-blend-mode:normal;transform:none;transition:transform .8s ease}
.hero-study .subjects-illustrated .subject[data-topic="myths"] .subject-visual img{width:80%;height:80%}
@media(hover:hover){.hero-study .subjects-illustrated .subject:hover :is(.subject-number,.paren){opacity:0}.hero-study .subjects-illustrated .subject:hover .subject-label h3{opacity:.72}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.hero-study .subjects-illustrated .subject:hover .subject-visual img{transform:scale(1.06)}}
@media(prefers-reduced-motion:no-preference){.hero-study .subjects-illustrated .subject:focus-visible .subject-visual img{transform:scale(1.06)}}
@media(max-width:700px){.hero-study .subjects-illustrated{padding-block:96px}.hero-study .subjects-illustrated .subjects-grid{margin-top:44px}.hero-study .subjects-illustrated .subject-visual{height:clamp(160px,44cqw,220px);margin-block:10px 14px}}
@media(max-width:700px){.hero-study .subjects-illustrated .paren{font-size:clamp(141px,40cqw,201px)}}
/* Reveal each subject once as it enters the viewport. */
@media(prefers-reduced-motion:no-preference){
 .hero-study .subjects-illustrated .subjects-grid.is-reveal-ready>.subject{opacity:0;translate:0 24px}
 .hero-study .subjects-illustrated .subjects-grid.is-reveal-ready>.subject.is-revealed{opacity:1;translate:0 0;transition:opacity .9s ease,translate .9s cubic-bezier(.16,1,.3,1)}
 .hero-study .subjects-illustrated .subjects-grid.is-reveal-ready>.subject:focus-visible{transition:none}
}