/* DUNA kit: off-white with a green cast, dark olive ink and bands, acid lime on dark, a clean grotesk with one
   odd calligraphic serif swapped in, numbered eyebrows, pills. */
:root { --paper: #f3f5ee; --ink: #232b16; --ink2: #666c5b; --olive: #232b16; --lime: #d4ff86; --mid: #91ae5b; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 400 16px/1.45 "Inter Tight", system-ui, sans-serif; overflow-x: clip; -webkit-font-smoothing: antialiased; }
.sdive { --sdive-bg: #f1f3ec; }

/* the hero copy above the laptop */
.sdive__copy { left: clamp(20px, 5.4vw, 64px); right: clamp(20px, 5.4vw, 64px); top: clamp(36px, 6.4vh, 80px); }
.sdive__copy small { display: block; margin-bottom: 18px; font: 500 13px/1 "Inter Tight", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.sdive__copy h1 { margin: 0; max-width: 11em; font: 500 clamp(38px, 7.4vw, 84px)/.98 "Inter Tight", sans-serif; letter-spacing: -.035em; }
.sdive__copy h1 em { font: italic 400 1.04em/1 Fraunces, Georgia, serif; font-variation-settings: "WONK" 1, "opsz" 144; letter-spacing: -.02em; }

/* the page on the screen: an olive band where the words light up lime */
.sdive__screen { flex-direction: column; color: #eef3e2; }
.sdive__surface { background: var(--olive); }
.pg-bar { position: relative; flex: none; display: flex; justify-content: space-between; align-items: center; height: clamp(64px, 9vh, 104px); padding: 0 clamp(20px, 5.4vw, 64px); border-bottom: 1px solid rgba(212, 255, 134, .16); font-size: clamp(14px, 1.7vw, 18px); }
.pg-mark { font: 600 clamp(20px, 2.6vw, 28px)/1 "Inter Tight", sans-serif; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 6px; }
.pg-mark i { width: .3em; height: .3em; border-radius: 50%; background: var(--lime); }
.pg-links { color: rgba(238, 243, 226, .7); }
.pg-links b { font-weight: 500; color: var(--olive); background: var(--lime); border-radius: 999px; padding: .55em 1.1em; }
.pg-body { position: relative; flex: 1; display: flex; align-items: center; padding: 0 clamp(20px, 5.4vw, 64px) 6vh; }
.pg-type { font: 600 clamp(34px, 8.6vw, 98px)/1.1 "Geist Mono", ui-monospace, monospace; letter-spacing: -.04em; color: var(--lime); }
.pg-row { display: flex; align-items: center; white-space: pre; min-height: 1.1em; }
.sdive__caret { background: var(--lime); width: .55ch; height: .95em; }
.pg-final { margin-top: .9em; font: 400 clamp(17px, 2.3vw, 26px)/1.3 "Inter Tight", sans-serif; letter-spacing: -.01em; color: #eef3e2; }
.pg-final span { color: var(--lime); }

.sdive-next { background: var(--paper); border-radius: 28px 28px 0 0; padding: 64px clamp(20px, 5.4vw, 64px) 40vh; box-shadow: 0 -20px 60px rgba(0, 0, 0, .12); }
.sdive-next p { margin: 0; max-width: 20em; font: 500 clamp(26px, 4vw, 44px)/1.08 "Inter Tight", sans-serif; letter-spacing: -.03em; }