@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink: #14201e; --paper: #f4f2eb; --acid: #c5ff3d; --orange: #ff6b35; --line: #c9cbc0; --muted: #69716c; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, Arial, sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
.site-header, main, footer { max-width: 1240px; margin: auto; padding-left: 32px; padding-right: 32px; }
.site-header { min-height: 91px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.brand { font-weight: 800; letter-spacing: -1.2px; font-size: 16px; white-space: nowrap; }.brand span { color: var(--orange); }
nav { display: flex; gap: 24px; font: 500 12px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .04em; } nav a:hover, .back-link:hover { color: var(--orange); }
.hero { min-height: 626px; padding: 100px 0 90px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow, .deck-type { font: 500 11px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 20px; }
.hero h1, .deck-hero h1 { font-size: clamp(52px, 8.2vw, 112px); letter-spacing: -.075em; line-height: .91; max-width: 900px; margin: 0; font-weight: 800; }.hero h1 em { color: var(--orange); font-style: normal; }
.hero-copy { max-width: 520px; font-size: 19px; margin: 42px 0 31px; color: #3c4742; }
.button { display: inline-flex; gap: 14px; align-items: center; padding: 14px 19px; font-size: 13px; font-weight: 700; transition: transform .16s ease, background .16s ease; }.button:hover { transform: translateY(-2px); }.button-primary { background: var(--ink); color: white; }.button-primary:hover { background: var(--orange); }.button-secondary { border: 1px solid var(--ink); }
.library { padding: 93px 0; border-bottom: 1px solid var(--line); }.section-intro { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 31px; }.section-intro h2, .viewer-heading h2 { margin: 0; font-size: 29px; letter-spacing: -.06em; }
.presentation-card { border: 1px solid var(--ink); display: grid; grid-template-columns: 28% 1fr; min-height: 325px; }.deck-mark { position: relative; background: var(--acid); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }.deck-mark span { font: 800 67px/1 Manrope, sans-serif; letter-spacing: -.1em; z-index: 1; }.deck-mark i { position: absolute; width: 220px; height: 220px; border: 28px solid var(--orange); border-radius: 50%; right: -110px; bottom: -110px; }.deck-mark b { font: 500 12px 'DM Mono', monospace; z-index: 1; }.card-content { padding: 43px 47px; }.card-content h3 { font-size: clamp(25px, 3.2vw, 43px); line-height: 1.03; letter-spacing: -.065em; margin: 0; max-width: 720px; }.card-content p:not(.deck-type) { max-width: 570px; color: #48534e; font-size: 15px; margin: 24px 0; }.text-link { font: 500 12px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }.text-link:hover { color: var(--orange); border-color: var(--orange); }
.channel { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; padding: 93px 0; }.channel h2, .detail-grid h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1; letter-spacing: -.07em; margin: 0; }.channel > p, .detail-grid > p { font-size: 18px; color: #46514d; margin: 26px 0 35px; }.future-list { list-style: none; padding: 0; margin: 0; font: 500 12px 'DM Mono', monospace; text-transform: uppercase; }.future-list li { border-top: 1px solid var(--line); padding: 10px 0; }.future-list li:last-child { border-bottom: 1px solid var(--line); }
footer { border-top: 1px solid var(--line); min-height: 113px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }.back-link { font: 500 12px 'DM Mono', monospace; text-transform: uppercase; }
.presentation-page { padding-top: 0; }.deck-hero { padding: 97px 0 76px; border-bottom: 1px solid var(--line); }.deck-hero h1 { font-size: clamp(44px, 6.4vw, 82px); max-width: 1000px; }.deck-summary { font-size: 19px; max-width: 710px; color: #46514d; margin: 34px 0; }.deck-actions { display: flex; flex-wrap: wrap; gap: 10px; }.viewer-section { padding: 74px 0; border-bottom: 1px solid var(--line); }.viewer-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 25px; }.viewer-heading > p { max-width: 290px; font-size: 13px; color: var(--muted); margin: 0; text-align: right; }.viewer-frame { background: #d7d9ce; min-height: 490px; position: relative; }.viewer-frame iframe { width: 100%; min-height: 490px; border: 0; display: block; }.viewer-note { padding: 22px 26px; background: var(--acid); font-size: 13px; }.viewer-note p { margin: 0 0 10px; }.viewer-note p:last-child { margin-bottom: 0; }.viewer-note code { font: 11px 'DM Mono', monospace; background: rgba(20,32,30,.1); padding: 2px 4px; word-break: break-word; }.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; padding: 76px 0 100px; }.detail-grid > p { margin: 0; }
@media (max-width: 720px) { .site-header, main, footer { padding-left: 20px; padding-right: 20px; }.site-header { min-height: 74px; } nav { gap: 15px; }.hero { min-height: 530px; padding: 72px 0; }.hero-copy { font-size: 17px; margin-top: 31px; }.library, .channel { padding: 62px 0; }.section-intro { display: block; }.section-intro h2 { font-size: 26px; }.presentation-card { grid-template-columns: 1fr; }.deck-mark { height: 177px; }.deck-mark span { font-size: 58px; }.card-content { padding: 29px 25px; }.channel, .detail-grid { grid-template-columns: 1fr; gap: 26px; }.channel > p { margin: 0; }.deck-hero { padding: 65px 0 56px; }.viewer-section { padding: 55px 0; }.viewer-heading { display: block; }.viewer-heading > p { text-align: left; margin-top: 12px; }.viewer-frame, .viewer-frame iframe { min-height: 340px; }.detail-grid { padding: 57px 0 69px; } footer { min-height: 93px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; }.brand { font-size: 14px; } }