:root{--navy:#102a56;--dark:#0b1d3d;--cobalt:#244fe3;--red:#cb243a;--paper:#fafaf7;--ink:#142750;--muted:#4b5b78;--line:#dce2ef;--heading:"Space Grotesk",Inter,Arial,sans-serif;--body:Inter,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--body)}
a{color:inherit}
button,input,select{font:inherit}
button,summary{cursor:pointer}
:focus-visible{outline:3px solid #ff7989;outline-offset:4px}
.wrap{width:min(100% - 96px,1200px);margin-inline:auto}
.skip{position:fixed;top:10px;left:10px;padding:12px;background:white;color:var(--navy);transform:translateY(-150%);z-index:10}
.skip:focus{transform:none}
.site-header{position:relative;z-index:3;background:var(--paper);border-bottom:1px solid var(--line)}
.home .site-header{background:var(--dark);color:white;border-color:#ffffff1f}
.header-row{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font:700 20px/1.1 var(--heading);white-space:nowrap}
.brand-mark{display:grid;place-items:center;background-color:var(--cobalt);background-image:linear-gradient(#ffffff26 1px,transparent 1px),linear-gradient(90deg,#ffffff26 1px,transparent 1px);background-size:8px 8px;color:white;width:41px;height:41px;border-radius:7px;font:700 17px var(--heading)}
.desktop-nav,.site-footer nav{display:flex;gap:26px}
.desktop-nav a,.site-footer nav a,.mobile-nav a{font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.desktop-nav a[aria-current],.desktop-nav a:hover,.site-footer nav a:hover,.mobile-nav a[aria-current]{text-decoration:underline;text-decoration-color:#fa6679;text-underline-offset:7px;text-decoration-thickness:2px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;border:1px solid transparent;border-radius:7px;padding:12px 17px;font-size:14px;line-height:1.45;font-weight:700;text-decoration:none;min-height:46px;transition:background .2s,color .2s,border-color .2s,transform .2s}
.button:hover:not(:disabled){transform:translateY(-2px)}
.primary{background:var(--red);color:white}
.primary:hover{background:#af1d31}
.outline,.header-action{border-color:#7b8ba8;color:inherit;background:transparent}
.outline:hover,.home .header-action:hover{background:#ffffff20}
.inner .header-action,.subtle{border-color:#b9c6dd;color:var(--navy);background:#fff}
.subtle:hover:not(:disabled),.inner .header-action:hover{background:#eaf0ff}
button:disabled{opacity:.5;cursor:default}
.mobile-nav{display:none}
h1,h2,h3,p{margin:0 0 16px}
h1,h2,h3{font-family:var(--heading);font-weight:700;letter-spacing:-.048em;line-height:1.03}
h1{font-size:clamp(49px,6.3vw,90px)}
h2{font-size:clamp(31px,4vw,53px)}
h3{font-size:clamp(24px,2.9vw,34px)}
.eyebrow{display:flex;align-items:center;gap:9px;letter-spacing:.12em;text-transform:uppercase;font-size:11px;font-weight:800;line-height:1.4}
.eyebrow>span,.art-label>span{width:7px;height:7px;background:#f06b81;display:inline-block;border-radius:50%;flex:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero{background:radial-gradient(ellipse at 76% 28%,#173e86 0,transparent 56%),var(--dark);color:#fff}
.hero-inner{display:grid;grid-template-columns:1fr 1.04fr;gap:34px;align-items:start;padding-block:70px 76px}
.hero-copy{padding-top:55px;position:relative;z-index:1}
.hero-copy .eyebrow{color:#cbdcff;margin-bottom:25px}
.hero h1{font-size:clamp(55px,6.7vw,99px);margin-bottom:22px}
.hero h1 em{color:#a9c4ff;font-style:normal}
.hero h1 em span{color:#fa6679}
.hero-desc{font-size:clamp(17px,1.4vw,20px);color:#dbe7ff;max-width:450px}
.art{height:490px;border:1px solid #94b5ff4a;border-radius:12px;position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 45% 40%,#315bb0,#112b61 72%);perspective:1050px}
.art-grid,.feature-art,.monogram,.pack-art{background-image:linear-gradient(#8eb0ff46 1px,transparent 1px),linear-gradient(90deg,#8eb0ff46 1px,transparent 1px);background-size:25px 25px}
.art-grid{position:absolute;inset:-30%;transform:rotateX(var(--grid-angle,44deg)) translateY(var(--grid-y,17%));mask-image:linear-gradient(transparent,#000 30%,#000);transform-origin:center;z-index:-1}
.art-corner{position:absolute;width:13px;height:13px;border:1px solid #bcd0ff;z-index:1}
.top-left{top:15px;left:15px;border-bottom:0;border-right:0}.top-right{top:15px;right:15px;border-bottom:0;border-left:0}.bottom-left{bottom:15px;left:15px;border-top:0;border-right:0}.bottom-right{bottom:15px;right:15px;border-top:0;border-left:0}
.art-label{position:absolute;top:25px;left:27px;display:flex;align-items:center;gap:8px;letter-spacing:.13em;font-size:9px;font-weight:800;color:#d8e5ff}
.art-bottom{top:auto;left:auto;right:27px;bottom:23px}
.art-bottom>span{width:4px;height:4px;background:#d8e5ff}
.scene{position:relative;width:100%;height:100%;display:grid;place-items:center;transform-style:preserve-3d}
.book{position:relative;width:213px;height:294px;transform-style:preserve-3d;transform:translate(var(--book-x,0px),var(--book-y,0px)) rotateX(var(--book-tilt,18deg)) rotateY(var(--book-yaw,-23deg)) rotateZ(var(--book-roll,-12deg)) scale(var(--book-scale,1));box-shadow:24px 40px 45px #050b28a6}
.book-back,.book-paper,.book-cover{position:absolute;inset:0;border-radius:4px 9px 9px 4px}
.book-back{transform:translateZ(-9px) translate(5px,8px);background:#9db8f6}
.book-paper{background:#fff;color:var(--navy);padding:26px 16px;display:flex;flex-direction:column;gap:13px;overflow:hidden;border-left:6px solid #bed0f7}
.book-paper>span{font-size:10px;font-weight:800;letter-spacing:.14em}
.book-paper strong{color:var(--navy);font:700 24px/1 var(--heading)}
.pen-step{color:var(--red);font:700 20px var(--heading);opacity:var(--pen-opacity,0);display:flex;align-items:center;gap:8px}
.pen-step i,.paper-rule{height:2px;background:var(--red);width:55px;display:inline-block}
.paper-rule{width:100%;background:#d1dbef}
.book-cover{transform-origin:left center;transform:translateZ(4px) rotateY(var(--cover-angle,0deg));transform-style:preserve-3d}
.book-cover::after{content:"";position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;background:repeating-linear-gradient(#f6f8ff 0 17px,#dbe4f8 18px 19px);border-radius:7px}
.book-cover .cover{backface-visibility:hidden}
.cover{width:213px;height:294px;display:flex;flex-direction:column;overflow:hidden;position:relative;border-radius:4px 9px 9px 4px;background:#f8faff;color:var(--navy);text-align:left;border-left:6px solid var(--cobalt);border-right:1px solid #dce4f7;padding:15px 13px 11px;line-height:1.1}
.cover-top,.cover-footer{display:flex;align-items:center;gap:7px;font-size:7px;letter-spacing:.105em;font-weight:800}
.cover-logo{display:inline-grid;place-items:center;background:var(--cobalt);color:white;width:19px;height:19px;border-radius:3px}
.cover-content{margin-top:16px;display:grid;gap:5px}
.cover-content>span{color:var(--red);font-size:8px;font-weight:800;letter-spacing:.1em}
.cover-content strong{font:700 25px/.96 var(--heading);letter-spacing:-.055em}
.cover-content small{font-size:7px;letter-spacing:.11em;font-weight:800}
.cover-plot{margin-top:6px;color:#244fe3}
.cover-plot svg{display:block;width:100%;height:110px}
.cover-footer{margin-top:auto;justify-content:space-between;border-top:1px solid #bbcae6;padding-top:7px}
.float-note{position:absolute;border:1px solid #f7a5b455;background:#0b2052b8;color:#ffd6df;border-radius:5px;padding:6px 13px;font:600 19px var(--heading);transform:translateZ(35px)}
.note-one{top:21%;left:10%;rotate:-8deg}
.note-two{bottom:19%;right:11%;rotate:9deg}
.section{padding-block:72px}
.section-head{display:grid;grid-template-columns:1fr .69fr;align-items:end;gap:42px;margin-bottom:22px}
.section-head h2,.section-head p{margin-bottom:0}
.section-head h2{max-width:550px}
.section-head p,.feature-copy>p:not(.eyebrow),.split-cards p,.pack-card-copy>p:not(.eyebrow),.detail-section>p,.resource-sections p,.callout p{color:var(--muted)}
.topic-row,.pack-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.topic{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:15px;background:white;text-decoration:none;line-height:1.25;transition:border-color .2s,transform .2s}
.topic:hover,.pack-card:focus-within{border-color:var(--cobalt)}
.topic:hover{transform:translateY(-3px)}
.topic>span:last-child{margin-left:auto;color:var(--cobalt)}
.topic strong,.topic small{display:block}
.topic strong{font:700 22px var(--heading)}
.topic small{font-size:12px;color:var(--muted)}
.topic-symbol{display:grid;place-items:center;min-width:42px;height:42px;background:#eaf0ff;color:#2046bd;border-radius:6px;font:700 22px var(--heading)}
.feature-section{background:#eaf0ff}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.feature-art,.detail-cover{min-height:340px;border-radius:11px;display:grid;place-items:center;background-color:var(--navy);overflow:hidden}
.feature-art .cover,.detail-cover .cover{transform:perspective(650px) rotateY(-14deg) rotateZ(-9deg) scale(.86);box-shadow:15px 22px 25px #0008}
.feature-copy h3{margin:18px 0 8px}
.feature-copy .eyebrow span{background:var(--red)}
.feature-copy .button{margin-top:8px}
.split-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.split-cards article,.resource,.callout{border:1px solid var(--line);background:white;padding:28px;border-radius:10px}
.split-cards h2{font-size:clamp(25px,3vw,39px)}
.text-link,.back-link{display:inline-flex;gap:9px;align-items:center;color:#1d43b7;font-weight:700;text-decoration:none}
.text-link:hover,.back-link:hover{text-decoration:underline;text-underline-offset:4px}
.site-footer{background:var(--dark);color:#f9fbff;padding:36px 0 16px}
.footer-main{display:flex;justify-content:space-between;align-items:start;gap:26px;padding-bottom:21px}
.footer-main p{color:#d5e2ff;font-size:14px;margin:12px 0 0}
.footer-end{border-top:1px solid #ffffff38;display:flex;justify-content:space-between;padding-top:12px;color:#d5e2ff;font-size:12px}
.inner-hero{padding:64px 0 58px;background:#eaf0ff;background-image:linear-gradient(90deg,transparent,#dce6ff)}
.inner-hero h1{max-width:850px}
.inner-hero p:not(.eyebrow){color:#405577;max-width:650px;font-size:clamp(17px,2vw,20px)}
.inner-hero p:last-child{margin-bottom:0}
.filters{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:13px;align-items:end}
.filters label{display:grid;font-weight:700;font-size:13px;gap:5px}
.filters input,.filters select{width:100%;min-width:0;min-height:46px;border:1px solid #b9c6dd;border-radius:7px;background:white;color:var(--navy);padding:8px 10px;font-size:15px}
.results{color:var(--muted);font-size:14px;margin:24px 0 9px}
.pack-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:white}
.pack-art{display:grid;place-items:center;height:140px;background-color:var(--navy);color:white;font:700 39px var(--heading)}
.pack-art.number{background-color:#264fa4}
.pack-art.geometry{background-color:#91233d}
.pack-card-copy{padding:19px;display:flex;flex-direction:column;align-items:start;height:100%}
.pack-card-copy .eyebrow{margin-bottom:10px;color:#435985}
.pack-card-copy h2{font-size:27px;margin-bottom:10px}
.pack-card-copy>p:not(.eyebrow){font-size:14px}
.pack-card-copy>a,.pending{margin-top:auto}
.pending{color:var(--muted);font-size:13px;font-weight:600}
.callout{margin-top:35px}
.callout h2,.resource-sections h2,.detail-section h2{font-size:clamp(29px,3.5vw,44px)}
.detail-intro,.about-intro{display:grid;grid-template-columns:1fr .52fr;align-items:center;gap:40px}
.detail-intro h1{font-size:clamp(48px,6vw,86px)}
.back-link{margin-bottom:23px}
.detail-intro .price{margin-top:22px}
.price strong{font-size:28px;color:var(--navy)}
.detail-cover{background-image:radial-gradient(ellipse,#28599e,#112b61)}
.detail-section{max-width:800px}
.detail-section h2:not(:first-child){margin-top:31px}
.check-list{padding-left:24px}
.check-list li{margin-bottom:6px}
.sample-area{max-width:800px}
.worksheet{min-height:280px;border:1px solid #b8c9ed;border-left:6px solid var(--cobalt);border-radius:8px;background:white;padding:22px 26px;transform-origin:left;box-shadow:0 14px 38px #102a5612}
.worksheet>span{display:flex;justify-content:space-between;gap:14px;font-size:10px;letter-spacing:.1em;font-weight:800;margin-bottom:23px;color:#435985}
.worksheet p{font-size:clamp(20px,3vw,29px)}
.working-lines{height:74px;background:repeating-linear-gradient(transparent 0 22px,#dce4f5 23px 24px)}
.worksheet.turn-in{animation:turn-in .3s ease-out}
@keyframes turn-in{from{transform:perspective(900px) rotateY(-18deg);opacity:.6}to{transform:none;opacity:1}}
.page-controls{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:14px 0 20px;font-size:14px}
.answer-box,.faq{background:white;border:1px solid var(--line);border-radius:8px;padding:14px 17px;margin-bottom:10px}
.answer-box summary,.faq summary{font-weight:700}
.answer-box ol,.faq p{margin:12px 0 0}
.answer-box li+li{margin-top:7px}
.answer-box:not([open]) .open-label,.answer-box[open] .closed-label{display:none}
.detail-section>.text-link{margin-top:13px}
.resource-sections>section{margin-bottom:40px}
.resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.resource h3{font-size:25px;line-height:1.12}
.paper-links{display:grid;justify-items:start;gap:8px}
.monogram{display:grid;place-items:center;background-color:var(--navy);min-height:275px;border-radius:12px}
.monogram span{font:700 clamp(82px,13vw,160px)/.94 var(--heading);letter-spacing:-.12em;color:#dbe7ff;padding-right:.1em;border-bottom:7px solid #fa6679}
@media(min-width:921px) and (prefers-reduced-motion:no-preference){
.hero-inner{min-height:840px}
.hero-copy,.art{position:sticky;top:30px}
}
@media(max-width:1100px){
.wrap{width:calc(100% - 64px)}
.desktop-nav,.site-footer nav{gap:15px}
.header-row{gap:15px}
.hero-inner{gap:22px}
}
@media(max-width:920px){
.header-action,.desktop-nav{display:none}
.mobile-nav{display:block;position:relative}
.mobile-nav summary{font-weight:700;font-size:14px;padding:7px}
.mobile-nav nav{position:absolute;right:0;top:40px;display:grid;gap:13px;background:var(--paper);color:var(--navy);border:1px solid var(--line);border-radius:7px;padding:14px 18px;box-shadow:0 12px 25px #132a5640}
.hero-inner{padding-block:50px;align-items:center}
.hero-copy{padding-top:0}
.art{height:410px}
.note-one{left:5%}
.note-two{right:5%}
}
@media(max-width:700px){
.wrap{width:calc(100% - 36px)}
.header-row{min-height:66px}
.brand{font-size:18px}
.brand-mark{width:35px;height:35px;font-size:15px}
.hero-inner,.section-head,.feature,.split-cards,.detail-intro,.about-intro,.resource-grid{grid-template-columns:1fr;gap:20px}
.hero-copy .eyebrow{margin-bottom:15px}
.hero h1{font-size:clamp(49px,11vw,76px);margin-bottom:15px}
.hero-inner{padding-block:38px}
.art{height:360px}
.book{--book-scale:.8}
.section{padding-block:44px}
.topic-row,.pack-row{grid-template-columns:1fr}
.section-head{gap:10px}
.feature-art,.detail-cover,.monogram{min-height:270px}
.feature-art .cover,.detail-cover .cover{transform:perspective(650px) rotateY(-14deg) rotateZ(-9deg) scale(.69)}
.footer-main{flex-direction:column;gap:15px}
.site-footer nav{flex-wrap:wrap}
.inner-hero{padding:43px 0 38px}
.filters{grid-template-columns:1fr 1fr}
.filters label:first-child{grid-column:1/-1}
.filters>button{grid-column:1/-1;justify-self:start}
}
@media(max-width:370px){
.art{height:330px}
.note-one,.note-two{font-size:13px}
.page-controls .button{font-size:12px;padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}