@font-face{font-family:Oswald;src:url('assets/oswald.ttf') format('truetype');font-display:swap}
@font-face{font-family:WorkSans;src:url('assets/work-sans.ttf') format('truetype');font-display:swap}
:root{--violet:#5236a6;--deep:#261a42;--paper:#f1eef8;--white:#fffefa;--sun:#f7d568;--orange:#f18460;--muted:#665f76;--line:#d8d0e3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--deep);font-family:WorkSans,Arial,sans-serif;font-size:16px;line-height:1.5}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.masthead{background:var(--violet);color:var(--white);overflow:hidden}
.masthead-inner,.main-shell{max-width:1440px;margin:auto;padding-left:clamp(24px,4.2vw,64px);padding-right:clamp(24px,4.2vw,64px)}
.masthead-inner{min-height:250px}
.masthead-top{display:flex;justify-content:space-between;padding-top:19px;font-size:12px;font-weight:600;letter-spacing:.01em}
.masthead-main{display:flex;justify-content:space-between;align-items:end;gap:30px;min-height:207px}
.brand-block{padding-bottom:24px;position:relative;z-index:1}
.wordmark{display:block;width:max-content;text-decoration:none;font-family:Oswald,Impact,sans-serif;font-weight:500;font-size:clamp(95px,11vw,166px);line-height:.9;letter-spacing:-.055em}
.wordmark-dot,.footer-dot,.detail-brand span{color:var(--sun)}
.brand-block p{margin:13px 0 0 7px;font-weight:500;font-size:16px}
.masthead-art{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;width:36%;min-width:300px}
.masthead-art svg{width:100%;height:auto;overflow:visible;transform:rotate(-8deg);fill:var(--sun)}
.masthead-art .route-shadow{fill:none;stroke:#402785;stroke-width:44;stroke-linecap:round}
.masthead-art .route{fill:none;stroke:var(--sun);stroke-width:29;stroke-linecap:round}
.masthead-art .crossing{fill:none;stroke:var(--violet);stroke-width:7;stroke-linecap:round}
.masthead-art span{position:absolute;right:10px;bottom:25px;background:var(--sun);color:var(--deep);padding:5px 12px;font-size:12px;font-weight:700;transform:rotate(4deg)}
.main-shell{padding-bottom:95px}
.browse-heading{display:flex;align-items:end;justify-content:space-between;gap:48px;padding:43px 0 32px}
.section-kicker{margin:0 0 6px;color:var(--violet);font-size:14px;font-weight:700}
.browse-heading h1{margin:0;font-family:Oswald,Impact,sans-serif;font-size:49px;font-weight:500;line-height:1.05;letter-spacing:-.025em}
.browse-intro{max-width:420px;margin:0 0 4px;font-size:15px;line-height:1.55}
.controls{display:flex;gap:14px;align-items:end;padding:18px;background:var(--white);border:1px solid var(--line);box-shadow:5px 5px 0 #ded6ee}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:12px;font-weight:700;color:var(--deep)}
.search-field{flex:1;min-width:230px}
.topic-field{width:230px}
.input-wrap{position:relative}
.input-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);height:18px;width:18px;fill:none;stroke:var(--violet);stroke-width:2}
input[type=search],select{height:49px;width:100%;border:1px solid var(--line);border-radius:0;color:var(--deep);background:var(--paper)}
input[type=search]{padding:0 14px 0 43px}
input[type=search]::placeholder{color:#817a90}
select{padding:0 12px}
.saved-filter{height:49px;min-width:194px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--deep);background:var(--white);color:var(--deep);font-weight:650}
.saved-filter.active{background:var(--sun)}
.bookmark-outline{font-size:24px;line-height:1}
.saved-count{min-width:23px;height:23px;border-radius:50%;display:inline-grid;place-items:center;background:var(--paper);font-size:12px}
.results-bar{display:flex;justify-content:space-between;align-items:center;margin:31px 0 14px;font-size:13px;font-weight:600;color:var(--muted)}
.results-bar p{margin:0;color:var(--deep)}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.story-card{min-width:0;background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;min-height:466px}
.story-card-featured{grid-column:span 2;display:grid;grid-template-columns:47% 53%;background:#e6ddfa;min-height:466px}
.card-art{position:relative;min-height:207px;overflow:hidden}
.story-card-featured .card-art{min-height:100%;grid-column:2;grid-row:1}
.story-card-featured .card-copy{grid-column:1;grid-row:1;justify-content:center}
.photo-art{background:#d9cedc}
.photo-art img{display:block;width:100%;height:100%;min-height:207px;object-fit:cover;filter:saturate(.72) contrast(1.05)}
.photo-art span,.books-art span,.repair-art span{position:absolute;bottom:12px;left:14px;background:var(--white);color:var(--deep);padding:3px 8px;font-size:11px;font-weight:700}
.books-art{background:#e8a587}
.books-art:after{content:"";position:absolute;inset:auto 0 0;height:42%;background:#d57870}
.book-shape{position:absolute;bottom:25%;z-index:1;width:14%;border:3px solid var(--deep);box-shadow:inset 8px 0 0 #ffffff36}
.book-one{height:53%;left:10%;background:#f8d568;transform:rotate(-8deg)}
.book-two{height:69%;left:26%;background:#775cb5}
.book-three{height:62%;left:42%;background:#f2e4ce;transform:rotate(7deg)}
.book-four{height:74%;left:59%;background:#99c7b0;transform:rotate(-5deg)}
.book-five{height:51%;left:76%;background:#ee7658;transform:rotate(9deg)}
.book-shelf{position:absolute;z-index:2;left:0;right:0;bottom:23%;height:13px;background:var(--deep)}
.books-art span{z-index:3;bottom:16px}
.repair-art{background:#f3c76b}
.repair-orbit{position:absolute;top:50%;left:50%;border:4px solid var(--deep);border-radius:50%;transform:translate(-50%,-50%)}
.orbit-one{height:155px;width:155px}.orbit-two{height:105px;width:105px;background:#f08b67}
.repair-center{position:absolute;top:50%;left:50%;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--deep);color:var(--white);font-size:36px;transform:translate(-50%,-50%)}
.card-copy{display:flex;flex-direction:column;padding:20px 22px 18px;min-width:0;flex:1}
.story-card-featured .card-copy{padding:28px 31px}
.card-topline,.card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}
.category-tag{display:inline-block;background:var(--sun);color:var(--deep);padding:2px 8px;font-size:11px;font-weight:700}
.story-card h2{margin:18px 0 10px;font-family:Oswald,Impact,sans-serif;font-weight:500;line-height:1.15;letter-spacing:-.018em;font-size:29px}
.story-card-featured h2{font-size:clamp(34px,3.4vw,52px);line-height:1.06;margin:23px 0 16px}
.story-card h2 button{padding:0;border:0;background:none;color:inherit;text-align:left;font:inherit;line-height:inherit;letter-spacing:inherit}
.story-card h2 button:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.card-summary{margin:0;font-size:14px;line-height:1.5}
.story-card-featured .card-summary{font-size:15px}
.card-footer{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);font-weight:600;color:var(--deep)}
.story-card-featured .card-footer{margin-top:31px;border-color:#cbbce8}
.card-arrow{font-size:23px;line-height:1;color:var(--violet)}
.empty-state{max-width:570px;margin:40px auto 0;text-align:center;padding:45px 25px;background:var(--white);border:1px solid var(--line)}
.empty-state[hidden]{display:none}
.empty-icon{font-size:67px;line-height:1;color:var(--violet)}
.empty-state h2{font:500 35px Oswald,Impact,sans-serif;margin:5px 0}
.empty-state p{margin:0 0 21px}
.empty-state button,.detail-bottom button{background:var(--sun);border:1px solid var(--deep);padding:11px 16px;font-weight:700}
.site-footer{display:flex;align-items:center;gap:22px;padding:34px clamp(24px,4.2vw,64px);background:var(--deep);color:var(--white)}
.site-footer>span{font:500 32px Oswald,Impact,sans-serif;line-height:1}.site-footer p{margin:0;font-size:13px}.site-footer a{margin-left:auto;font-size:13px;font-weight:700}
.detail-dialog{position:fixed;inset:0;width:min(100%,1060px);max-width:none;height:min(100dvh,950px);max-height:none;margin:auto;border:0;padding:0;background:var(--white);color:var(--deep);box-shadow:0 24px 80px #1a102b75;overflow:auto}
.detail-dialog::backdrop{background:#1a102bbd}
.detail-shell{min-height:100%;display:flex;flex-direction:column}
.detail-toolbar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:13px clamp(24px,5vw,58px);background:var(--violet);color:var(--white)}
.detail-brand{font:500 26px Oswald,Impact,sans-serif}.detail-toolbar button{color:var(--white);background:transparent;border:1px solid #d4c6ff;padding:5px 11px;font-weight:700}.detail-toolbar button span{font-size:24px;vertical-align:-2px;line-height:1;margin-left:9px}
.detail-header{padding:54px clamp(26px,7vw,92px) 43px;background:#e6ddfa}
.detail-category{background:var(--sun);padding:4px 10px;font-size:12px;font-weight:700}
.detail-header h2{max-width:790px;margin:20px 0 16px;font:500 clamp(43px,6vw,78px)/1.05 Oswald,Impact,sans-serif;letter-spacing:-.025em}
.detail-summary{max-width:680px;margin:0;font-size:20px;line-height:1.45}
.detail-meta{display:flex;flex-wrap:wrap;gap:11px 22px;margin-top:27px;padding-top:16px;border-top:1px solid #c9bae4;font-size:13px;font-weight:650}
.detail-content{display:grid;grid-template-columns:minmax(0,1fr) 205px;gap:55px;padding:48px clamp(26px,7vw,92px) 60px}
.detail-body{max-width:655px;font-size:17px;line-height:1.83}
.detail-body p{margin:0 0 1.25em}.detail-body p:first-child:first-letter{float:left;font:500 75px/.8 Oswald,Impact,sans-serif;padding:8px 9px 0 0;color:var(--violet)}
.detail-aside{align-self:start;position:sticky;top:95px;padding-top:7px}
.save-item{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:11px;background:var(--sun);color:var(--deep);border:1px solid var(--deep);font-weight:700}
.save-item.active{background:var(--violet);color:var(--white);border-color:var(--violet)}
.save-item span:first-child{font-size:24px;line-height:1}.detail-aside p{font-size:12px;color:var(--muted);line-height:1.5}
.detail-bottom{margin-top:auto;padding:23px clamp(26px,7vw,92px);background:var(--paper)}
@media(max-width:900px){.masthead-art{width:32%;min-width:220px}.wordmark{font-size:clamp(93px,13vw,130px)}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.story-card-featured{grid-column:span 2}.controls{flex-wrap:wrap}.search-field{flex-basis:100%}.topic-field{flex:1}.saved-filter{min-width:195px}}
@media(max-width:620px){.masthead-inner{min-height:213px}.masthead-top{font-size:10px;padding-top:15px}.masthead-top span:last-child{display:none}.masthead-main{min-height:177px;align-items:center}.brand-block{padding:0}.wordmark{font-size:clamp(86px,24vw,120px)}.brand-block p{font-size:13px;margin:11px 0 0 4px}.masthead-art{position:absolute;right:-77px;top:84px;width:190px;min-width:0;height:110px;opacity:.75}.masthead-art span{display:none}.browse-heading{display:block;padding:31px 0 22px}.browse-heading h1{font-size:40px}.browse-intro{margin:12px 0 0;font-size:14px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:13px}.search-field{grid-column:1/-1;min-width:0}.topic-field{width:auto;min-width:0}.saved-filter{align-self:end;min-width:0;width:100%;font-size:12px;gap:5px}.saved-count{min-width:20px;height:20px}.results-bar{margin:28px 0 13px}.story-grid{grid-template-columns:1fr;gap:16px}.story-card,.story-card-featured{grid-column:auto;display:flex;min-height:0}.story-card-featured .card-art{order:1;min-height:170px}.story-card-featured .card-copy{order:0;padding:21px 22px}.story-card-featured h2{font-size:37px}.story-card .card-art{height:220px}.story-card-featured .card-art{height:170px}.story-card .photo-art img{height:220px}.story-card .card-copy{min-height:245px}.story-card-featured .card-copy{min-height:280px}.site-footer{flex-wrap:wrap;gap:10px}.site-footer p{width:100%;order:3}.detail-dialog{width:100%;height:100dvh}.detail-toolbar{padding:12px 22px}.detail-header{padding:35px 24px}.detail-header h2{font-size:48px}.detail-summary{font-size:17px}.detail-meta{gap:6px 13px}.detail-content{display:flex;flex-direction:column-reverse;gap:25px;padding:27px 24px 40px}.detail-aside{position:static;width:100%;padding:0}.detail-aside p{display:none}.detail-body{font-size:16px;line-height:1.75}.detail-bottom{padding:20px 24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
