@font-face{font-family:Haas;src:url('assets/neue-haas-display-roman.woff2')}@font-face{font-family:Haas;src:url('assets/neue-haas-display-medium.woff2');font-weight:600}
:root{--ink:#111;--muted:#737373;--line:#e9e9e9;--paper:#fff;--soft:#f5f5f3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Haas,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #222;outline-offset:6px}button{border:0}button:disabled{cursor:default}.header{height:82px;padding:17px 24px;display:flex;align-items:center;justify-content:space-between;position:relative}.wordmark{position:absolute;left:50%;transform:translateX(-50%);font-size:32px;line-height:48px;font-weight:600;white-space:nowrap;letter-spacing:-1.1px}.home,.menu-toggle{display:flex;align-items:center;justify-content:center;background:none;padding:0;min-height:44px;min-width:44px}.home{justify-content:flex-start}#navigation{position:absolute;right:24px;top:72px;z-index:10;width:200px;border:1px solid var(--line);background:white;padding:10px;box-shadow:0 8px 30px #0000000a}#navigation a{display:block;padding:12px}#navigation a:hover{background:var(--soft)}main{padding:38px 32px 80px;max-width:1600px;margin:0 auto}section+section{margin-top:72px}.section-heading{display:flex;align-items:center;gap:15px;margin-bottom:24px}h1,h2{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.35px;margin:0}.chevron{font-family:Arial,sans-serif;font-size:29px;font-weight:300;line-height:24px;color:#aaa}.shelf{display:flex;align-items:flex-start;gap:24px;padding:8px 6px 10px 0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}.shelf::-webkit-scrollbar{display:none}.card{flex:none;scroll-snap-align:start;width:204px}.card-button{display:block;width:100%;text-align:left;padding:0;background:none}.magazine{position:relative;display:block;height:256px;width:190px;perspective:900px;margin:0 14px 0 0}.back-page{position:absolute;inset:7px -13px -1px 9px;background:#f5f4ef;border:1px solid #ddd;transform:rotate(2deg);padding:16px 12px 14px 17px;overflow:hidden;box-shadow:1px 2px 4px #00000012;font-size:10px;line-height:1.4;transition:transform .3s}.back-page strong{font-size:13px;display:block;margin-bottom:10px}.back-page span{display:block;margin-bottom:10px}.front-cover{position:absolute;inset:0;display:block;border:1px solid #0000001a;background:white;box-shadow:2px 3px 7px #00000018;transform-origin:left center;transition:transform .35s,box-shadow .35s;overflow:hidden}.front-cover img{width:100%;height:100%;object-fit:cover;display:block}.card:nth-child(2) .front-cover img{object-fit:contain}.card:nth-child(3) .front-cover img{position:absolute;width:216.51%;max-width:none;left:-86.78%;object-fit:fill}.card:nth-child(4) .front-cover img{position:absolute;width:216.51%;max-width:none;left:-116.41%;object-fit:fill}.card-button:hover .front-cover,.card-button:focus-visible .front-cover{transform:rotateY(-16deg) rotateZ(-1deg);box-shadow:7px 6px 14px #00000016}.card-button:hover .back-page{transform:translateX(5px) rotate(3deg)}.caption{display:block;margin-top:16px}.title{font-size:15px;font-weight:600;line-height:20px;display:block}.metadata{display:flex;gap:7px;align-items:center;font-size:12px;line-height:18px;color:var(--muted);margin-top:3px}.podcasts .card{width:280px}.media{position:relative;display:block;width:100%;aspect-ratio:16/10;background:var(--soft);overflow:hidden;border-radius:8px;box-shadow:inset 0 0 0 1px #0000000a}.media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}.card-button:hover .media img{transform:scale(1.025)}.media:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #00000012;pointer-events:none}.play{position:absolute;bottom:12px;left:12px;width:30px;height:30px;background:#fffef4e6;border-radius:50%;display:grid;place-items:center;font-family:Arial,sans-serif;font-size:11px;padding-left:2px}.badge{position:absolute;bottom:14px;right:12px;color:white;background:#0009;padding:4px 6px;border-radius:4px;font-family:Arial,sans-serif;font-size:10px}.podcast-art{object-position:center 45%}.apps .card{width:172px}.apps .media{aspect-ratio:1;border-radius:32px}.apps .media img{object-fit:cover}.app-caption{display:flex;align-items:center;justify-content:space-between;gap:8px}.get{display:block;border-radius:20px;padding:5px 12px;background:#f2f3f5;color:#087bfa;font-family:Arial,sans-serif;font-size:11px;font-weight:bold;letter-spacing:.25px}.content .card{width:204px}.content .media{aspect-ratio:204/304}.content .play{bottom:12px}.content .caption{margin-top:12px}footer{margin:0 32px;padding:22px 0 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}footer>span:first-child{color:var(--ink);font-weight:600}dialog{border:1px solid var(--line);border-radius:4px;padding:0;width:min(820px,calc(100% - 32px));max-height:90dvh;color:var(--ink);box-shadow:0 20px 100px #0003}dialog::backdrop{background:#ffffffc9;backdrop-filter:blur(10px)}.close{position:absolute;right:12px;top:12px;z-index:2;background:#fffffff0;width:36px;height:36px;border-radius:50%;font-size:27px;line-height:1}.reading{display:grid;grid-template-columns:1fr 1fr;min-height:460px}.reading-cover{min-width:0;background:var(--soft);overflow:hidden}.reading-cover img{height:100%;width:100%;object-fit:cover;display:block}.reading-copy{padding:64px 35px 40px}.eyebrow{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}.reading-copy h2{font-size:30px;line-height:34px;margin:18px 0 24px}.reading-copy p{font-size:16px;line-height:1.6}.note{color:var(--muted);font-size:13px!important}.media-preview{padding:48px 28px 28px}.media-preview>img{max-height:52vh;max-width:100%;display:block;margin:auto;object-fit:contain;border-radius:8px}.media-preview video{display:block;width:100%;max-height:65vh;background:#111}.media-preview h2{margin-top:22px}.media-preview p{color:var(--muted);line-height:1.5}.app-preview>img{width:150px;border-radius:30px;margin:16px 0 30px}.app-preview{padding:45px}.app-preview h2{margin-top:0}@media(min-width:1600px){.header{max-width:1600px;margin:auto}}@media(max-width:600px){.header{height:72px;padding:12px 16px}.wordmark{font-size:23px;letter-spacing:-.7px}.home{transform:scale(.82);transform-origin:left center}main{padding:28px 0 52px 20px}.section-heading{margin-bottom:17px}h1,h2{font-size:22px}.shelf{padding-right:20px;gap:22px}.card{width:180px}.magazine{width:166px;height:225px}.podcasts .card{width:260px}.apps .card{width:150px}.apps .media{border-radius:29px}.content .card{width:180px}section+section{margin-top:48px}footer{margin:0 20px;gap:20px;flex-wrap:wrap}footer>span:nth-child(2){order:3;width:100%}.reading{display:block}.reading-cover{height:280px}.reading-copy{padding:30px}.reading-copy h2{margin:12px 0 20px}.media-preview{padding:54px 18px 20px}#navigation{right:16px;top:66px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}


/* Closed, image-edged page blocks and the same corner-turn library as Blondzine. */
.articles{gap:24px;padding:12px 12px 14px 0}
.articles .card{width:224px}
.magazine{position:relative;display:block;width:216px;height:260px;margin:0;perspective:none}
.leaf-stack,.leaf-edge{position:absolute;inset:0 auto auto 0;width:190px;height:256px;display:block}
.leaf-edge{border:1px solid #19171247;background-color:#efede4;background-position:right center;background-size:cover;box-shadow:0 1px 1px #12100c33;filter:saturate(.72) contrast(.94) brightness(1.04);transform:translate(var(--edge-x),var(--edge-y))}
.cover-book{display:block;position:relative;z-index:25;width:190px;height:256px}
.cover-sheet,.inside-sheet{display:block;background:white;overflow:hidden}
.cover-sheet img,.inside-sheet img{display:block;width:100%;height:100%;object-fit:cover}
.cover-1 img{object-fit:contain}
.cover-2 img{position:absolute;width:216.51%;max-width:none;left:-86.78%;object-fit:fill}
.cover-3 img{position:absolute;width:216.51%;max-width:none;left:-116.41%;object-fit:fill}
.articles .caption{margin-top:14px}
.podcasts{gap:24px}
.podcasts .card{width:371px}
.podcasts .media{aspect-ratio:371/244;border-radius:8px;isolation:isolate;transition:box-shadow .2s}
.podcasts .media:before{content:'';position:absolute;z-index:-1;inset:-20px;background-image:var(--poster);background-position:center;background-size:cover;filter:blur(18px) brightness(.8)}
.podcasts .media .contained-poster,.podcasts .media .hover-video{object-fit:contain}
.podcasts .card-button:hover .media img{transform:none}
.podcasts .card-button:hover .media,.podcasts .card-button:focus-visible .media{box-shadow:0 0 0 3.5px #bab9b4}
.podcast-caption{display:flex;align-items:flex-start;gap:9px;margin-top:12px}
.creator-avatar{width:40px;height:40px;object-fit:cover;border-radius:50%}
.podcast-caption .title{font-size:16px;font-weight:400;line-height:24px}
.podcast-caption .metadata{font-size:16px;line-height:22px;margin:0}
.podcast-description{display:block;font-size:14px;color:var(--muted);line-height:21px;margin-top:4px}
.hover-video{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .2s}
.playing .hover-video{opacity:1}
.preview-timeline{position:absolute;left:10px;right:10px;bottom:10px;height:2px;background:#ffffff55;opacity:0}
.preview-timeline span{display:block;height:100%;width:0;background:white}
.playing .preview-timeline{opacity:1}
@media(max-width:600px){.articles .card{width:200px}.magazine{width:192px;height:229px}.leaf-stack,.leaf-edge,.cover-book{width:166px;height:225px}.podcasts .card{width:310px}.podcasts{gap:18px}}

.inside-article{display:flex;flex-direction:column;gap:12px;padding:20px 16px;text-align:left;font-size:11px;line-height:1.5;color:var(--ink);height:100%;background:#fffef9}.inside-article strong{font-size:19px;line-height:1.1;font-weight:600}.inside-kicker{font-size:7px;letter-spacing:1px;color:var(--muted)}

.duration-badge{position:absolute;right:10px;bottom:10px;z-index:2;padding:3px 5px;border-radius:3px;background:#000b;color:white;font-family:Arial,sans-serif;font-size:11px;line-height:15px;font-variant-numeric:tabular-nums}.duration-badge[hidden]{display:none}.podcasts .preview-timeline{right:57px;bottom:12px}

.cover-book{left:-190px;width:380px;clip-path:polygon(50% -10%,112% -10%,112% 110%,50% 110%)}.cover-sheet{isolation:isolate}.cover-sheet:after{content:'';position:absolute;inset:0;z-index:5;border:1px solid rgb(0 0 0 / 10%);pointer-events:none}.cover-reverse{background:linear-gradient(135deg,#fffef9 65%,#e8e6df)}@media(max-width:600px){.cover-book{left:-166px;width:332px}}
/* Appstar app-card layout and visual tokens, with title-only metadata. */
#podcast-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:auto;overflow:visible;scroll-snap-type:none}
#podcast-list .podcast-card{position:relative;isolation:isolate;width:auto;min-width:0;border-radius:8px;background:white;transition:transform .2s}
.podcast-open{position:absolute;inset:0;z-index:10;width:100%;background:none;border-radius:8px}
.podcast-card:active:not(:has(.appstar-timeline:active)){transform:scale(.99)}
.appstar-visual{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:371/244;width:100%;overflow:hidden;border-radius:8px;background:#f2f2f3;box-shadow:0 0 0 0 oklch(0 0 0 / 10%);transition:box-shadow 200ms ease-out}
.appstar-visual:after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 .5px oklch(0 0 0 / 10%);pointer-events:none}
.podcast-card:hover .appstar-visual,.podcast-card:focus-within .appstar-visual{box-shadow:0 0 0 3.5px oklch(0 0 0 / 10%)}
.appstar-backdrop{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.2);filter:blur(24px);pointer-events:none}
.appstar-backdrop canvas{display:block;width:100%;height:100%}
.appstar-poster{position:relative;width:100%;height:100%;object-fit:contain}
.appstar-video{pointer-events:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 150ms}
.playing .appstar-video{opacity:1}
.appstar-caption{margin-top:8px;padding:4px 0}
.appstar-caption .title{font-size:16px;line-height:24px;font-weight:500}
.appstar-timeline{position:absolute;inset:auto 8px 8px;height:36px;z-index:20;opacity:0;pointer-events:none;transition:opacity 180ms ease;border:1px solid oklch(1 0 0 / 0%);border-radius:999px;background:oklch(.900600727 0 0 / 20%);backdrop-filter:blur(14px);filter:drop-shadow(0 1px 2px oklch(0 0 0 / 20%))}
.podcast-card:hover .appstar-timeline[data-playing=true],.appstar-timeline:focus-within{opacity:1;pointer-events:auto}
.appstar-scrubber{position:absolute;inset:0 44px 0 12px}
.appstar-track{position:absolute;inset:0;top:50%;transform:translateY(-50%);height:6px;border-radius:999px;background:oklch(1 0 0 / 30%);overflow:hidden;pointer-events:none}
.appstar-fill{height:100%;border-radius:inherit;transform:scaleX(0);transform-origin:left;background:white}
.appstar-scrubber input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.appstar-timeline:has(input:focus-visible){outline:2px solid white;outline-offset:2px}
.appstar-audio{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;padding:4px;z-index:21}
.appstar-audio img{width:20px;height:20px}


.shelf{padding:12px;margin:-4px -12px 0;overflow:visible}
.articles{padding:12px;margin:-4px -12px 0}
@media(max-width:800px){#podcast-list{grid-template-columns:repeat(2,minmax(0,1fr))}.shelf{flex-wrap:wrap;gap:24px}}
@media(max-width:600px){main{padding-right:20px}#podcast-list{grid-template-columns:minmax(0,1fr)}.shelf{margin-right:-12px}.articles .card{width:calc(50% - 12px)}.articles .magazine{max-width:100%}.articles{gap:24px}.apps .card,.content .card{width:calc(50% - 12px)}}
@media(prefers-reduced-motion:reduce){.appstar-video,.appstar-timeline,.appstar-visual,.podcast-card{transition:none}}
#article-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
#article-list .card{width:auto;min-width:0}
.podcast-card:hover .appstar-visual,.podcast-card:focus-within .appstar-visual{box-shadow:none}
img,video,canvas,.magazine{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.card-button:hover .media img{transform:none}
.site-footer{display:block;max-width:1536px;margin:0 auto;padding:0 0 64px;border:0;color:oklch(.510278355 0 0);font-size:14px;line-height:21px}
.footer-divider{margin:0;border:0;border-top:1px solid oklch(0 0 0 / 6%)}
.footer-columns{padding:64px 8px 0;display:grid;grid-template-columns:minmax(0,1fr) repeat(2,max-content);column-gap:clamp(16px,6vw,96px)}
.footer-intro{align-self:start;display:grid;grid-template-columns:120px minmax(0,380px);align-items:stretch;gap:40px;min-width:0}
.footer-brand{color:oklch(.154339993 0 0 / 30%);position:relative;min-width:0;container-type:size}
.footer-brand-content{position:absolute;inset:0 auto 0 0;width:min(100cqw,calc((100cqh - 33px)*5120/4640));height:100%;display:flex;flex-direction:column;gap:12px}
.footer-turtle{display:block;flex:1;min-height:0;background:currentColor;mask:url('assets/footer-turtle.svg') left center / contain no-repeat}
.footer-copyright{display:block;width:100%;height:21px;flex:0 0 21px;fill:currentColor;font-size:14px}
.footer-heading,.footer-registration h2{margin:0 0 20px;color:var(--ink);font-size:14px;line-height:21px;font-weight:500;letter-spacing:normal}
.footer-list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.footer-list a{display:block;width:fit-content;color:inherit;text-decoration:none}.footer-list a:hover{color:var(--ink)}
.footer-registration{min-width:0;align-self:center}.footer-registration h2{margin-bottom:8px}.footer-registration p{margin:0;font-size:14px;line-height:21px}
.footer-registration-form{position:relative;margin-top:16px;border-radius:999px}
.footer-registration-form input{min-width:0;width:100%;height:44px;border:1px solid oklch(0 0 0 / 6%);border-radius:999px;padding:0 52px 0 16px;background:oklch(.964153494 0 0);color:var(--ink);font:inherit}
.footer-registration-form input::placeholder{color:oklch(.510278355 0 0)}
.footer-registration-form button{position:absolute;right:0;top:0;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:oklch(.599870806 0 0)}
.footer-registration-form:focus-within{outline:2px solid oklch(0 0 0 / 10%)}.footer-registration-form input:focus{outline:none}
.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}
#signup-status{margin-top:12px}#signup-status a{text-decoration:underline}
@media(max-width:1599px){.site-footer{margin-inline:32px}}
@media(max-width:1000px){.footer-intro{grid-column:1/-1}.footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}
@media(max-width:800px){#article-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.site-footer{margin-inline:20px}.footer-columns{column-gap:16px}}
@media(max-width:480px){.footer-intro{grid-template-columns:minmax(0,1fr)}.footer-intro .footer-brand{width:100px;height:120px}.footer-registration-form input{font-size:16px}}

.duration-badge{transition:opacity 180ms ease;pointer-events:none}.podcast-card:hover .duration-badge,.podcast-card:focus-within .duration-badge{opacity:0}@media(prefers-reduced-motion:reduce){.duration-badge{transition:none}}

/* Appstar section rhythm and media-to-title spacing. */
.section-heading{margin-bottom:32px}
.shelf{margin-top:-12px;margin-bottom:-12px}
.section-divider{width:100%;border:0;border-top:1px solid rgb(0 0 0 / 6%);margin:64px 0;flex-shrink:0}
main>section{margin-top:0;display:flow-root}
.articles .caption,.apps .caption,.content .caption,.appstar-caption{margin-top:12px;padding-top:0;padding-bottom:0}

@font-face{font-family:AppstarHeading;src:url('assets/neue-haas-text-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Haas;src:url('assets/neue-haas-display-medium.woff2');font-weight:500}
.section-heading :is(h1,h2){font-family:AppstarHeading,Haas,Arial,sans-serif;font-size:22px;line-height:33px;font-weight:700;letter-spacing:0;text-transform:uppercase}
.shelf .title{font-family:Haas,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}
#content-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.podcast-card{position:relative;isolation:isolate;min-width:0;border-radius:8px;background:white;transition:transform 200ms,background-color 200ms}
.podcast-card:before{content:'';position:absolute;inset:-8px;z-index:-1;border-radius:12px;pointer-events:none;background:transparent;transition:background-color 200ms}
.podcast-card:hover,.podcast-card:focus-within,.podcast-card:hover:before,.podcast-card:focus-within:before{background:#f2f2f2}
#content-list .appstar-visual{aspect-ratio:9/16}
#content-list .appstar-poster,#content-list .appstar-video{object-fit:cover}
@media(max-width:800px){#content-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){#content-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.podcast-card,.podcast-card:before{transition:none}}

#podcast-list .podcast-card:hover,#podcast-list .podcast-card:focus-within{background:#f2f2f2}

/* Figma's four lettering layers travel with their magazine cover. */
.article-lettering{position:absolute;z-index:2;left:0;top:50%;width:100%;aspect-ratio:203/268;transform:translateY(-50%);pointer-events:none}
.article-lettering-0{background:url('assets/article-lettering-green.png') center/100% 100% no-repeat}
.article-lettering:not(.article-lettering-0){mask:url('assets/article-lettering-mask.png') center/100% 100% no-repeat;clip-path:inset(3.731% 0 1.493% 1.970%)}
.article-lettering-1{background:#ffeb14}
.article-lettering-2{background:#ff14b1}
.article-lettering-3{background:#14f7ff}

::selection{background:#ffeb3b;color:#111}

/* Keep section spacing when divider strokes are disabled. */
:root:not([data-show-dividers="true"]) hr { visibility: hidden; }
#apps-list[hidden] { display: none; }
