/* ========================================================================== Cover card style candidates, round 2 (2026-10-17). Pick via ?cards=. Raza's notes after round 1: no solid slide backgrounds (old B/C dropped), A is close but too quiet, current is close but too blocky. Every style reads the live world palette the engine exposes on #stage: --sky-top, --sky-bot, --near (walk-line ground), --night (0..1). Knicks orange (--accent) stays on interactive bits only. ========================================================================== */ /* ---------- shared palette: light type at dusk/night, deep ink by day ---------- */ #cards{counter-reset:zone} body[data-cards] .card.cover{ counter-increment:zone; --fg:color-mix(in srgb, var(--sky-bot) 12%, #FBF5E8); --kick:color-mix(in srgb, var(--sky-bot) 40%, #F7D9A0); --pill:color-mix(in srgb, var(--sky-top) 58%, transparent); --pill-line:color-mix(in srgb, var(--fg) 22%, transparent); --glow:color-mix(in srgb, var(--sky-top) 70%, transparent); --haze:color-mix(in srgb, var(--sky-top) 78%, transparent); --mark:color-mix(in srgb, var(--kick) 38%, transparent); --c-fg:var(--fg); --c-sub:color-mix(in srgb, var(--fg) 80%, transparent); --c-kicker:var(--kick); --c-rule:color-mix(in srgb, var(--fg) 30%, transparent); --c-tag-bg:var(--pill); --c-tag-fg:var(--fg); --c-shadow:0 1px 14px var(--glow); } body[data-cards] .card.cover[data-zone="jobsite"], body[data-cards] .card.cover[data-zone="meadow"]{ --fg:color-mix(in srgb, var(--sky-top) 20%, #132030); --kick:color-mix(in srgb, var(--near) 50%, #10151E); --pill:color-mix(in srgb, #FFFFFF 52%, transparent); --glow:transparent; --haze:color-mix(in srgb, #FFFFFF 58%, transparent); --mark:color-mix(in srgb, #FFFFFF 70%, transparent); --c-shadow:none; } /* contact row: buttons share one baseline in every style */ body[data-cards] .card.cover[data-zone="savanna"]{width:min(95vw,960px)} body[data-cards] .card .c-links .c-enter{margin-top:0} /* shared one-line role bar: tracked role title + lighter sentence-case ownership + date chip */ body[data-cards] .card .c-role{ display:flex;align-items:center;justify-content:flex-start;gap:6px 12px;flex-wrap:nowrap; } body[data-cards] .card .c-rt{white-space:nowrap} body[data-cards] .card .c-own{ font-family:'DM Sans',var(--body),sans-serif;font-style:normal;font-weight:500; font-size:14px;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--fg); white-space:nowrap; } @media (max-width:900px){ body[data-cards] .card .c-role{flex-wrap:wrap} body[data-cards] .card .c-own{white-space:normal} } body[data-cards] .card .c-own::before{ content:'·';margin-right:10px;color:var(--kick);opacity:.75; } body[data-cards] .card .c-date{ font-family:'DM Sans',sans-serif;font-style:normal;font-weight:600;font-size:10.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--fg); background:var(--pill);border:1px solid var(--pill-line);border-radius:999px; padding:4px 10px 3px;text-shadow:none;white-space:nowrap; } body[data-cards] .card .c-tiles{max-width:760px} /* rounded buttons everywhere except current */ body[data-cards] .card .c-enter kbd{display:none} body[data-cards] .card .c-enter::after{content:'→';letter-spacing:0;font-size:15px} body[data-cards] .card .c-links .c-enter::after{content:none} body[data-cards] .card .c-enter{ border-radius:999px;padding:10px 20px 9px; transition:transform .15s ease,box-shadow .2s ease,background .2s,color .2s; } body[data-cards] .card .c-enter:hover{transform:translateY(-1px);box-shadow:0 6px 18px -6px var(--accent)} body[data-cards] .card .c-link-btn{border-radius:999px;background:var(--pill);border:1px solid var(--pill-line);color:var(--fg);padding:9px 16px 8px} /* staggered rise-in shared by most styles */ body[data-cards]:not([data-cards="e"]) .card.cover > *{opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)} body[data-cards] .card.cover.in > *{opacity:1;transform:none} body[data-cards] .card.cover.in > :nth-child(2){transition-delay:.08s} body[data-cards] .card.cover.in > :nth-child(3){transition-delay:.16s} body[data-cards] .card.cover.in > :nth-child(4){transition-delay:.24s} body[data-cards] .card.cover.in > :nth-child(5){transition-delay:.32s} body.clean .card.cover > *{transition:none !important;opacity:1 !important;transform:none !important} /* ---------- A · HORIZON (round 1, kept) --------------------------------------- Alto's own UI register: no box, thin widely tracked caps, sky-tinted type. */ body[data-cards="a"] .card.cover{width:min(92vw,840px)} body[data-cards="a"] .card .c-num{display:flex;align-items:center;gap:14px;font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.42em;margin-bottom:12px} body[data-cards="a"] .card .c-num::after{content:'';flex:0 0 56px;height:1px;background:var(--kick);opacity:.7} body[data-cards="a"] .card .ztitle{font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:clamp(32px,4.2vw,52px);line-height:1.04;letter-spacing:.16em} body[data-cards="a"] .card .c-context{margin-top:10px;font-size:14px;font-style:italic} body[data-cards="a"] .card .c-role{border-top:none;padding-top:0;margin-top:16px;font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.18em;justify-content:flex-start;gap:6px 12px} body[data-cards="a"] .card .c-date{font-family:'Josefin Sans',sans-serif;font-weight:600;letter-spacing:.14em;font-size:10.5px} body[data-cards="a"] .card .c-tiles{margin-top:16px;gap:9px 20px;max-width:640px} body[data-cards="a"] .card .c-tiles span{background:none;border:none;padding:0;font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-sub);text-shadow:var(--c-shadow)} body[data-cards="a"] .card .c-tiles span::before{content:'';display:inline-block;width:4px;height:4px;margin:0 8px 2px 0;border-radius:50%;background:var(--kick);opacity:.85} body[data-cards="a"] .card .c-enter{margin-top:20px;background:transparent;color:var(--fg);border:1.5px solid var(--accent);font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.24em} body[data-cards="a"] .card .c-enter::after{color:var(--accent)} body[data-cards="a"] .card .c-enter:hover{background:var(--accent);color:#10151E} body[data-cards="a"] .card .c-enter:hover::after{color:#10151E} body[data-cards="a"] .card .c-link-btn{font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.2em;background:transparent} body[data-cards="a"] .card.lockup h1{font-family:'Josefin Sans',sans-serif;font-weight:300;letter-spacing:.14em;font-size:clamp(44px,7vw,88px);line-height:1.02} body[data-cards="a"] .card.lockup .eyebrow{font-family:'Josefin Sans',sans-serif;font-weight:600;letter-spacing:.42em} /* ---------- B · HORIZON+ (the blend) ------------------------------------------- A's open, boxless layout and rounded shapes, turned up: heavier title, tinted pill tags, the date in a chip, a filled orange button. */ body[data-cards="b"] .card.cover{width:min(92vw,840px)} body[data-cards="b"] .card .c-num{display:flex;align-items:center;gap:12px;font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.32em;margin-bottom:10px} body[data-cards="b"] .card .c-num::after{content:'';flex:0 0 44px;height:2px;border-radius:2px;background:var(--kick);opacity:.8} body[data-cards="b"] .card .ztitle{font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:clamp(36px,4.8vw,58px);line-height:1;letter-spacing:.06em} body[data-cards="b"] .card .c-context{margin-top:8px;font-size:14.5px} body[data-cards="b"] .card .c-role{border-top:none;padding-top:0;margin-top:16px;font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;justify-content:flex-start;gap:8px 12px;align-items:center} body[data-cards="b"] .card .c-date{font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.12em} body[data-cards="b"] .card .c-tiles{margin-top:14px;gap:7px} body[data-cards="b"] .card .c-tiles span{border-radius:999px;background:var(--pill);border:1px solid var(--pill-line);font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px 4px;backdrop-filter:blur(6px)} body[data-cards="b"] .card .c-enter{margin-top:18px;font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:.2em;padding:11px 22px 10px} body[data-cards="b"] .card .c-link-btn{font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.16em} body[data-cards="b"] .card.lockup h1{font-family:'Josefin Sans',sans-serif;font-weight:600;letter-spacing:.08em;font-size:clamp(46px,7.4vw,92px);line-height:1} body[data-cards="b"] .card.lockup .eyebrow{font-family:'Josefin Sans',sans-serif;font-weight:600;letter-spacing:.34em} /* ---------- C · RIDGELINE ------------------------------------------------------- A trail-map voice: a summit marker on the kicker, a hand-drawn mountain ridge in place of the divider rule (it draws itself in), soft square tags. */ body[data-cards="c"] .card.cover{width:min(92vw,840px)} body[data-cards="c"] .card .c-num{font-family:'Outfit',sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.22em;margin-bottom:6px} body[data-cards="c"] .card .c-num::before{content:'▲';font-size:10px;margin-right:9px;position:relative;top:-1px} body[data-cards="c"] .card .ztitle{font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(38px,4.8vw,58px);line-height:.96;letter-spacing:-.005em} body[data-cards="c"] .card .c-context{margin-top:8px;font-family:'Outfit',sans-serif;font-size:15px} body[data-cards="c"] .card .c-role{position:relative;border-top:none;margin-top:12px;padding-top:24px;font-family:'Outfit',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.08em} body[data-cards="c"] .card .c-role::before{ content:'';position:absolute;left:0;top:0;width:100%;height:16px; background:var(--kick);opacity:.75; -webkit-mask:url("data:image/svg+xml;utf8,") repeat-x 0 0/160px 16px; mask:url("data:image/svg+xml;utf8,") repeat-x 0 0/160px 16px; clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.5,0,.2,1) .2s; } body[data-cards="c"] .card.cover.in .c-role::before{clip-path:inset(0 0 0 0)} body[data-cards="c"] .card .c-date{font-family:'Outfit',sans-serif;font-weight:600;font-size:10.5px} body[data-cards="c"] .card .c-tiles{gap:7px;margin-top:14px} body[data-cards="c"] .card .c-tiles span{border-radius:7px;background:var(--pill);border:none;font-family:'Outfit',sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.01em;padding:5px 11px} body[data-cards="c"] .card .c-enter{margin-top:18px;font-family:'Outfit',sans-serif;font-weight:600;font-size:13px;letter-spacing:.1em} body[data-cards="c"] .card .c-link-btn{font-family:'Outfit',sans-serif;font-weight:500;font-size:13px;letter-spacing:.06em} body[data-cards="c"] .card.lockup h1{font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:-.005em} body[data-cards="c"] .card.lockup .eyebrow{font-family:'Outfit',sans-serif;font-weight:500;letter-spacing:.24em} /* ---------- D · TRAIL RAIL ------------------------------------------------------- The card is a stretch of trail: a dashed path runs down the left edge with a waypoint at each section. The path grows in from the top as you arrive. */ body[data-cards="d"] .card.cover{width:min(92vw,800px);padding-left:34px} body[data-cards="d"] .card.cover::before{ content:'';position:absolute;left:8px;top:10px;bottom:14px;width:2px; background:repeating-linear-gradient(to bottom, var(--kick) 0 7px, transparent 7px 13px); transform-origin:50% 0;transform:scaleY(0);transition:transform 1s cubic-bezier(.5,0,.2,1); } body[data-cards="d"] .card.cover.in::before{transform:scaleY(1)} body[data-cards="d"] .card .c-head, body[data-cards="d"] .card .c-role, body[data-cards="d"] .card .c-tiles, body[data-cards="d"] .card .c-enter, body[data-cards="d"] .card .c-links{position:relative} body[data-cards="d"] .card .c-head::before, body[data-cards="d"] .card .c-role::after, body[data-cards="d"] .card .c-tiles::before{ content:'';position:absolute;left:-31px;width:10px;height:10px;border-radius:50%; border:2px solid var(--kick);background:var(--sky-bot);box-sizing:border-box; } body[data-cards="d"] .card .c-head::before{top:30px;left:-34px;width:16px;height:16px;background:var(--kick)} body[data-cards="d"] .card .c-role::after{top:5px} body[data-cards="d"] .card .c-tiles::before{top:6px} body[data-cards="d"] .card .c-num{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:12px;letter-spacing:.2em;margin-bottom:6px} body[data-cards="d"] .card .ztitle{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(36px,4.6vw,56px);line-height:.98;letter-spacing:-.02em} body[data-cards="d"] .card .c-context{font-size:14.5px;margin-top:8px} body[data-cards="d"] .card .c-role{border-top:none;padding-top:0;margin-top:16px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.06em} body[data-cards="d"] .card .c-date{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:10.5px} body[data-cards="d"] .card .c-tiles{gap:7px;margin-top:16px} body[data-cards="d"] .card .c-tiles span{border-radius:999px;background:var(--pill);border:1px solid var(--pill-line);font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:12px;letter-spacing:0;padding:5px 12px} body[data-cards="d"] .card .c-enter{margin-top:18px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.12em} body[data-cards="d"] .card .c-link-btn{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.06em} body[data-cards="d"] .card.lockup h1{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em} body[data-cards="d"] .card.lockup .eyebrow{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:.24em} /* ---------- E · POSTER ------------------------------------------------------------ Editorial: an oversized serif title over a giant outlined zone numeral, the role set as an italic line, sans body. Big type does the highlighting. */ body[data-cards="e"] .card.cover{width:min(92vw,840px);isolation:isolate} body[data-cards="e"] .card.cover::before{ content:attr(data-place); position:absolute;z-index:-1;left:-40px;top:-104px;white-space:nowrap; font-family:'Instrument Serif',serif;font-style:italic;font-size:200px;line-height:1; color:color-mix(in srgb, var(--fg) 10%, transparent); opacity:0;transform:translateX(-30px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.8,.2,1); } body[data-cards="e"] .card.cover.in::before{opacity:1;transform:none} body[data-cards="e"] .card.cover > *{opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)} body[data-cards="e"] .card .c-num{font-family:'DM Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.32em;margin-bottom:2px} body[data-cards="e"] .card .ztitle{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(50px,6.6vw,86px);line-height:.92;letter-spacing:-.005em} body[data-cards="e"] .card .c-context{font-family:'DM Sans',sans-serif;font-size:14.5px;margin-top:10px} body[data-cards="e"] .card .c-role{border-top:none;padding-top:0;margin-top:14px;font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:22px;letter-spacing:0;text-transform:none;align-items:baseline;justify-content:flex-start;gap:6px 12px} body[data-cards="e"] .card .c-tiles{gap:7px;margin-top:14px} body[data-cards="e"] .card .c-tiles span{border-radius:999px;background:var(--pill);border:none;font-family:'DM Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:0;padding:5px 12px} body[data-cards="e"] .card .c-enter{margin-top:20px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.12em} body[data-cards="e"] .card .c-link-btn{font-family:'DM Sans',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.06em} body[data-cards="e"] .card.lockup h1{font-family:'Instrument Serif',serif;font-weight:400;letter-spacing:-.005em;font-size:clamp(60px,10vw,128px);line-height:.9} body[data-cards="e"] .card.lockup .eyebrow{font-family:'DM Sans',sans-serif;font-weight:600;letter-spacing:.32em} /* ---------- F · FOG ----------------------------------------------------------------- No box and no edges: a feathered patch of the sky's own color sits behind the text, like Alto's atmospheric haze, so it stays readable over clouds and sun. */ body[data-cards="f"] .card.cover{width:min(92vw,840px);isolation:isolate} body[data-cards="f"] .card.cover::before{ content:'';position:absolute;z-index:-1;inset:-70px -110px -70px -90px; background:radial-gradient(closest-side, var(--haze) 0%, color-mix(in srgb, var(--haze) 55%, transparent) 55%, transparent 100%); opacity:0;transform:scale(.85);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.8,.2,1); } body[data-cards="f"] .card.cover.in::before{opacity:1;transform:none} body[data-cards="f"] .card.cover{--c-shadow:none} body[data-cards="f"] .card .c-num{font-family:'DM Sans',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.3em;margin-bottom:8px} body[data-cards="f"] .card .ztitle{font-family:'DM Sans',sans-serif;font-weight:700;font-size:clamp(36px,4.6vw,56px);line-height:1;letter-spacing:.04em} body[data-cards="f"] .card .c-context{font-family:'DM Sans',sans-serif;font-size:14.5px;margin-top:8px} body[data-cards="f"] .card .c-role{border-top:none;padding-top:0;margin-top:16px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em} body[data-cards="f"] .card .c-tiles{gap:7px;margin-top:14px} body[data-cards="f"] .card .c-tiles span{border-radius:999px;background:transparent;border:1.5px solid var(--c-rule);font-family:'DM Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:0;padding:4px 12px} body[data-cards="f"] .card .c-enter{margin-top:18px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.12em} body[data-cards="f"] .card .c-link-btn{font-family:'DM Sans',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.06em;background:transparent;border:1.5px solid var(--c-rule)} body[data-cards="f"] .card.lockup h1{font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:.04em} body[data-cards="f"] .card.lockup .eyebrow{font-family:'DM Sans',sans-serif;font-weight:600;letter-spacing:.3em} /* ---------- G · FIELD NOTES ----------------------------------------------------------- Annotated like a naturalist's notebook: handwritten kicker and role, a highlighter swipe across the title that wipes in, tags as little stickers. */ body[data-cards="g"] .card.cover{width:min(92vw,840px)} body[data-cards="g"] .card .c-num{font-family:'Caveat',cursive;font-weight:700;font-size:24px;letter-spacing:.02em;margin-bottom:0;transform-origin:0 50%;rotate:-2deg} body[data-cards="g"] .card .ztitle{display:inline;font-family:'DM Sans',sans-serif;font-weight:700;font-size:clamp(36px,4.6vw,56px);line-height:1.08;letter-spacing:.01em; background:linear-gradient(var(--mark),var(--mark)) no-repeat 0 84%/100% 36%; -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 6px;margin-left:-6px} body[data-cards="g"] .card.cover[data-zone="jobsite"], body[data-cards="g"] .card.cover[data-zone="meadow"]{--mark:color-mix(in srgb, #F7D27A 70%, transparent)} body[data-cards="g"] .card .c-context{font-family:'DM Sans',sans-serif;font-size:14.5px;margin-top:10px} body[data-cards="g"] .card .c-role{border-top:none;padding-top:0;margin-top:12px;font-family:'Caveat',cursive;font-weight:700;font-size:24px;letter-spacing:0;text-transform:none;justify-content:flex-start;align-items:center;gap:4px 12px} body[data-cards="g"] .card .c-tiles{gap:8px;margin-top:14px} body[data-cards="g"] .card .c-tiles span{border-radius:999px;background:var(--pill);border:none;font-family:'DM Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:0;padding:5px 12px;box-shadow:0 2px 0 color-mix(in srgb, var(--fg) 14%, transparent)} body[data-cards="g"] .card .c-tiles span:nth-child(3n+1){rotate:-1.5deg} body[data-cards="g"] .card .c-tiles span:nth-child(3n+2){rotate:1deg} body[data-cards="g"] .card .c-enter{margin-top:18px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.12em} body[data-cards="g"] .card .c-link-btn{font-family:'DM Sans',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.06em} body[data-cards="g"] .card.lockup h1{font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:.01em} body[data-cards="g"] .card.lockup .eyebrow{font-family:'Caveat',cursive;font-weight:700;font-size:24px;letter-spacing:.02em} @media (prefers-reduced-motion: reduce){ body[data-cards] .card.cover, body[data-cards] .card.cover > *, body[data-cards] .card.cover::before, body[data-cards] .card .ztitle, body[data-cards] .card .c-role::before{transition:none !important} } /* ========================================================================== ROUND 3 (2026-10-17). Raza: Horizon is the favorite register but too quiet; Field Notes and Poster have character; keep the hollow orange-rim button from Horizon in the mix; no generic "01 ·" counters; at least half of the batch should present the information in a completely different shape. Keys h..w. Round 3 base: DM Sans for reading text everywhere. ========================================================================== */ /* hollow orange-rim button (Horizon's), shared by the styles that use it */ body:is([data-cards="h"],[data-cards="i"],[data-cards="j"],[data-cards="k"],[data-cards="l"],[data-cards="m"],[data-cards="n"],[data-cards="o"],[data-cards="p"],[data-cards="q"],[data-cards="s"],[data-cards="t"],[data-cards="w"]) .card .c-enter{ background:transparent;color:var(--fg);border:1.5px solid var(--accent); font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:.22em;padding:11px 22px 9px; } body:is([data-cards="h"],[data-cards="i"],[data-cards="j"],[data-cards="k"],[data-cards="l"],[data-cards="m"],[data-cards="n"],[data-cards="o"],[data-cards="p"],[data-cards="q"],[data-cards="s"],[data-cards="t"],[data-cards="w"]) .card .c-enter::after{color:var(--accent)} body:is([data-cards="h"],[data-cards="i"],[data-cards="j"],[data-cards="k"],[data-cards="l"],[data-cards="m"],[data-cards="n"],[data-cards="o"],[data-cards="p"],[data-cards="q"],[data-cards="s"],[data-cards="t"],[data-cards="w"]) .card .c-enter:hover{background:var(--accent);color:#10151E} body:is([data-cards="h"],[data-cards="i"],[data-cards="j"],[data-cards="k"],[data-cards="l"],[data-cards="m"],[data-cards="n"],[data-cards="o"],[data-cards="p"],[data-cards="q"],[data-cards="s"],[data-cards="t"],[data-cards="w"]) .card .c-enter:hover::after{color:#10151E} /* contact buttons at the night camp follow suit */ body:is([data-cards="h"],[data-cards="i"],[data-cards="j"],[data-cards="k"],[data-cards="l"],[data-cards="m"],[data-cards="n"],[data-cards="o"],[data-cards="p"],[data-cards="q"],[data-cards="s"],[data-cards="t"],[data-cards="w"]) .card .c-link-btn{ background:transparent;border:1.5px solid var(--c-rule); font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.18em;padding:10px 16px 8px; } /* reading text: DM Sans in every round-3 style */ body:is([data-cards="h"],[data-cards="i"],[data-cards="j"],[data-cards="k"],[data-cards="l"],[data-cards="m"],[data-cards="n"],[data-cards="o"],[data-cards="p"],[data-cards="q"],[data-cards="r"],[data-cards="s"],[data-cards="t"],[data-cards="u"],[data-cards="v"],[data-cards="w"]) .card :is(.c-context,.c-own){font-family:'DM Sans',sans-serif} /* Alto kicker: thin tracked caps with a short rule (used by several) */ body:is([data-cards="h"],[data-cards="i"],[data-cards="k"],[data-cards="l"],[data-cards="n"],[data-cards="o"],[data-cards="p"],[data-cards="q"],[data-cards="s"],[data-cards="t"],[data-cards="w"]) .card .c-num{ display:flex;align-items:center;gap:14px; font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:.38em;margin-bottom:12px; } body:is([data-cards="h"],[data-cards="i"],[data-cards="k"],[data-cards="l"],[data-cards="n"],[data-cards="o"],[data-cards="p"],[data-cards="q"],[data-cards="s"],[data-cards="t"],[data-cards="w"]) .card .c-num::after{ content:'';flex:0 0 52px;height:1.5px;background:var(--kick);opacity:.8; } /* Horizon role line, reused */ body:is([data-cards="h"],[data-cards="k"],[data-cards="l"],[data-cards="n"],[data-cards="q"],[data-cards="s"],[data-cards="t"],[data-cards="w"]) .card .c-role{ border-top:none;padding-top:0;margin-top:16px;justify-content:flex-start;gap:6px 12px; font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em; } body:is([data-cards="h"],[data-cards="k"],[data-cards="l"],[data-cards="n"],[data-cards="q"],[data-cards="s"],[data-cards="t"],[data-cards="w"]) .card .c-date{font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.14em} /* hollow rimmed tags, reused */ body:is([data-cards="h"],[data-cards="i"],[data-cards="o"],[data-cards="p"],[data-cards="t"]) .card .c-tiles{gap:8px;margin-top:16px} body:is([data-cards="h"],[data-cards="i"],[data-cards="o"],[data-cards="p"],[data-cards="t"]) .card .c-tiles span{ border-radius:999px;background:transparent;border:1.5px solid color-mix(in srgb, var(--kick) 60%, transparent); color:var(--fg);padding:6px 13px 4px; font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase; } /* ---------- H · HORIZON, LOUDER ---------------------------------------------- The favorite, turned up only where it was too quiet: regular-weight title instead of light, 16px body, tags in hollow rims, the rim button. */ body[data-cards="h"] .card.cover{width:min(92vw,840px)} body[data-cards="h"] .card .ztitle{font-family:'Josefin Sans',sans-serif;font-weight:400;font-size:clamp(38px,5vw,62px);line-height:1.02;letter-spacing:.12em} body[data-cards="h"] .card .c-context{margin-top:10px;font-size:15px} body[data-cards="h"] .card.lockup h1{font-family:'Josefin Sans',sans-serif;font-weight:400;letter-spacing:.12em;font-size:clamp(46px,7.4vw,92px);line-height:1.02} body[data-cards="h"] .card.lockup .eyebrow{font-family:'Josefin Sans',sans-serif;font-weight:600;letter-spacing:.38em} body[data-cards="h"] .card.lockup .sub{font-family:'DM Sans',sans-serif} /* ---------- I · POSTER, CLEAN ------------------------------------------------ Poster's big serif without the background number: Alto kicker, serif title, italic serif role, hollow tags. */ body[data-cards="i"] .card.cover{width:min(92vw,840px)} body[data-cards="i"] .card .ztitle{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(54px,7vw,94px);line-height:.9} body[data-cards="i"] .card .c-context{font-size:15px;margin-top:10px} body[data-cards="i"] .card .c-role{border:none;padding:0;margin-top:16px;font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:22px;letter-spacing:0;text-transform:none;justify-content:flex-start;align-items:baseline;gap:4px 12px} body[data-cards="i"] .card .c-date{font-family:'Josefin Sans',sans-serif;font-style:normal;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase} body[data-cards="i"] .card .c-tiles span{font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:.01em;text-transform:none;padding:5px 12px} /* ---------- J · NOTEBOOK, LITE ----------------------------------------------- Field Notes dialed back for a technical reader: everything clean except a handwritten label and a hand-drawn underline that draws itself under the title. */ body[data-cards="j"] .card.cover{width:min(92vw,840px)} body[data-cards="j"] .card .c-num{display:block;width:max-content;font-family:'Caveat',cursive;font-weight:700;font-size:27px;letter-spacing:.01em;text-transform:lowercase;rotate:-2deg;margin-bottom:2px} body[data-cards="j"] .card .ztitle{position:relative;display:inline-block;padding-bottom:14px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:clamp(38px,4.8vw,58px);line-height:1;letter-spacing:.005em} body[data-cards="j"] .card .ztitle::after{ content:'';position:absolute;left:-2px;right:8%;bottom:0;height:12px;background:var(--accent); -webkit-mask:url("data:image/svg+xml;utf8,") 0 0/100% 100% no-repeat; mask:url("data:image/svg+xml;utf8,") 0 0/100% 100% no-repeat; clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.5,0,.2,1) .3s; } body[data-cards="j"] .card.cover.in .ztitle::after{clip-path:inset(0 0 0 0)} body[data-cards="j"] .card .c-context{font-size:15px;margin-top:10px} body[data-cards="j"] .card .c-role{border:none;padding:0;margin-top:16px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;justify-content:flex-start;align-items:center;gap:6px 12px} body[data-cards="j"] .card .c-tiles{gap:7px;margin-top:14px} body[data-cards="j"] .card .c-tiles span{border-radius:999px;background:var(--pill);border:none;font-family:'DM Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:0;padding:5px 12px} /* ---------- K · ALTO GOALS --------------------------------------------------- Lifted from Alto's own goals screen: the skills become a two-column list, each with a hollow ring, under a tracked caps heading. */ body[data-cards="k"] .card.cover{width:min(92vw,840px)} body[data-cards="k"] .card .ztitle{font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:clamp(40px,5.2vw,64px);line-height:1.02;letter-spacing:.15em} body[data-cards="k"] .card .c-context{font-size:15px;margin-top:10px} body[data-cards="k"] .card .c-tiles{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin-top:20px;padding-top:26px;max-width:560px} body[data-cards="k"] .card .c-tiles::before{content:'TOOLS & SKILLS';position:absolute;left:0;top:0;font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.4em;color:var(--kick)} body[data-cards="k"] .card[data-zone="camp-night"] .c-tiles::before{content:'OFF THE TRAIL'} body[data-cards="k"] .card .c-tiles span{display:flex;align-items:center;gap:11px;background:none;border:none;padding:0;color:var(--fg);font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-shadow:var(--c-shadow)} body[data-cards="k"] .card .c-tiles span::before{content:'';flex:0 0 13px;height:13px;border-radius:50%;border:1.5px solid var(--kick);box-sizing:border-box} body[data-cards="k"] .card .c-enter{margin-top:22px} /* ---------- L · UNFOLD ------------------------------------------------------- Banner-first: only the label, title, one-liner and role show. Hover or keyboard focus unfolds the tags and button. Touch screens always get the full card. Answers "minimal but complete" with interaction. */ body[data-cards="l"] .card.cover{width:min(92vw,840px)} body[data-cards="l"] .card .ztitle{font-family:'Josefin Sans',sans-serif;font-weight:400;font-size:clamp(42px,5.6vw,70px);line-height:1;letter-spacing:.12em} body[data-cards="l"] .card .c-context{font-size:15.5px;margin-top:10px} body[data-cards="l"] .card.cover :is(.c-tiles,.c-enter,.c-links){max-height:0;overflow:hidden;opacity:0;margin-top:0;padding-top:0;padding-bottom:0;border-width:0; transition:max-height .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease,margin .4s ease} body[data-cards="l"] .card.cover:is(:hover,:focus-within) :is(.c-tiles,.c-enter,.c-links){max-height:340px;opacity:1;margin-top:16px} body[data-cards="l"] .card.cover:is(:hover,:focus-within) .c-enter{padding:11px 22px 9px;border-width:1.5px} body[data-cards="l"] .card .c-tiles{gap:8px 18px} body[data-cards="l"] .card .c-tiles span{background:none;border:none;padding:0;font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-sub)} body[data-cards="l"] .card .c-tiles span::before{content:'';display:inline-block;width:4px;height:4px;margin:0 8px 2px 0;border-radius:50%;background:var(--kick)} body[data-cards="l"] .card.cover::after{ content:'MORE ↓';display:block;margin-top:16px;width:max-content; font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.3em;color:var(--kick); border-bottom:1.5px solid var(--accent);padding-bottom:4px;transition:opacity .3s; } body[data-cards="l"] .card.cover:is(:hover,:focus-within)::after{opacity:0;height:0;margin:0;padding:0;border:0} @media (hover:none){ body[data-cards="l"] .card.cover :is(.c-tiles,.c-enter,.c-links){max-height:none;opacity:1;margin-top:16px} body[data-cards="l"] .card.cover .c-enter{padding:11px 22px 9px;border-width:1.5px} body[data-cards="l"] .card.cover::after{display:none} } /* ---------- M · TITLE CARD --------------------------------------------------- How Alto announces a new region: everything centered in the open sky, the name in very wide thin caps that settle from wider still as you arrive. */ body[data-cards="m"] .card.cover{width:min(94vw,860px);text-align:center} body[data-cards="m"] .card .c-num{display:flex;align-items:center;justify-content:center;gap:16px;font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:.44em;margin-bottom:14px} body[data-cards="m"] .card .c-num::before, body[data-cards="m"] .card .c-num::after{content:'';flex:0 0 60px;height:1.5px;background:var(--kick);opacity:.8} body[data-cards="m"] .card .ztitle{font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:clamp(46px,6.4vw,90px);line-height:1.02;letter-spacing:.22em;margin-right:-.22em; transition:letter-spacing 1.6s cubic-bezier(.2,.8,.2,1)} body[data-cards="m"] .card.cover:not(.in) .ztitle{letter-spacing:.5em} body[data-cards="m"] .card .c-context{font-style:italic;font-size:15.5px;margin-top:12px} body[data-cards="m"] .card .c-role{justify-content:center;border:none;padding:0;margin-top:20px;font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:.16em;gap:6px 12px} body[data-cards="m"] .card .c-tiles{justify-content:center;gap:9px 20px;margin:16px auto 0;max-width:680px} body[data-cards="m"] .card .c-tiles span{background:none;border:none;padding:0;font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-sub)} body[data-cards="m"] .card .c-tiles span::before{content:'';display:inline-block;width:4px;height:4px;margin:0 9px 2px 0;border-radius:50%;background:var(--kick)} body[data-cards="m"] .card .c-enter{margin-top:24px} body[data-cards="m"] .card .c-links{justify-content:center} /* ---------- N · PRAYER FLAGS ------------------------------------------------- Alto's mountains are strung with prayer flags. The skills become the flags, strung across the top of the card on a line, swaying a little. */ body[data-cards="n"] .card.cover{width:min(92vw,840px);display:flex;flex-direction:column;align-items:flex-start} body[data-cards="n"] .card .c-tiles{order:-1;display:flex;flex-wrap:wrap;gap:14px 5px;margin:0 0 26px;max-width:640px; background:repeating-linear-gradient(to bottom, color-mix(in srgb, var(--fg) 55%, transparent) 0 1.5px, transparent 1.5px 56px)} body[data-cards="n"] .card .c-tiles span{ height:42px;display:flex;align-items:flex-end;padding:0 9px 6px;margin-top:1px;border:none;border-radius:0 0 2px 2px; font-family:'DM Sans',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.03em;line-height:1.1; transform-origin:50% 0;animation:rz-flag 3.4s ease-in-out infinite alternate; filter:brightness(calc(1 - .32 * var(--night, 0))); } body[data-cards="n"] .card .c-tiles span:nth-child(5n+1){background:#5D7FA8;color:#F5EFE2} body[data-cards="n"] .card .c-tiles span:nth-child(5n+2){background:#EFE7D6;color:#2A241D;animation-delay:-.7s} body[data-cards="n"] .card .c-tiles span:nth-child(5n+3){background:#B4574C;color:#F5EFE2;animation-delay:-1.4s} body[data-cards="n"] .card .c-tiles span:nth-child(5n+4){background:#5F8A63;color:#F5EFE2;animation-delay:-2.1s} body[data-cards="n"] .card .c-tiles span:nth-child(5n+5){background:#DDB458;color:#2A241D;animation-delay:-2.8s} @keyframes rz-flag{from{transform:rotate(-2.5deg) skewX(-3deg)}to{transform:rotate(2.5deg) skewX(3deg)}} body[data-cards="n"] .card .ztitle{font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:.08em} body[data-cards="n"] .card .c-context{font-size:15px;margin-top:10px} body[data-cards="n"] .card .c-enter{margin-top:20px} /* ---------- O · SPREAD ------------------------------------------------------- A magazine spread instead of a stack: the big serif title owns the left page, the facts sit in a column on the right across a hairline gutter. */ body[data-cards="o"] .card.cover{width:min(94vw,980px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:start} body[data-cards="o"] .card.cover::after{content:'';position:absolute;left:50%;top:6px;bottom:6px;width:1px;background:var(--c-rule)} body[data-cards="o"] .card .c-head{grid-column:1;grid-row:1 / span 2} body[data-cards="o"] .card > :is(.c-enter,.c-links){grid-column:1;grid-row:3;justify-self:start;align-self:start;margin-top:22px} body[data-cards="o"] .card :is(.c-role,.c-tiles){grid-column:2} body[data-cards="o"] .card .ztitle{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(56px,7vw,100px);line-height:.9} body[data-cards="o"] .card .c-context{font-size:15px;margin-top:14px} body[data-cards="o"] .card .c-role{border:none;padding:0;margin-top:30px;flex-direction:column;align-items:flex-start;gap:8px;flex-wrap:wrap;font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;line-height:1.4} body[data-cards="o"] .card .c-own{font-size:15.5px;line-height:1.5;white-space:normal} body[data-cards="o"] .card .c-own::before{content:none} body[data-cards="o"] .card .c-tiles span{font-size:10.5px;padding:5px 11px 3px} /* ---------- P · SPINE -------------------------------------------------------- The title turns 90 degrees and runs up the left edge like the spine of a field guide; everything else reads beside it. */ body[data-cards="p"] .card.cover{width:min(95vw,920px);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px;align-items:start} body[data-cards="p"] .card .c-head{display:contents} body[data-cards="p"] .card .ztitle{grid-column:1;grid-row:1 / span 7;align-self:stretch;writing-mode:vertical-rl;transform:rotate(180deg); font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:clamp(36px,4.2vw,56px);line-height:1.05;letter-spacing:.12em; max-height:min(50vh,420px); padding-left:22px;border-left:1.5px solid var(--c-rule)} body[data-cards="p"] .card :is(.c-num,.c-context,.c-role,.c-tiles,.c-enter,.c-links){grid-column:2} body[data-cards="p"] .card .c-num{margin-top:4px} body[data-cards="p"] .card .c-context{font-size:15px;margin-top:0} body[data-cards="p"] .card .c-role{border:none;padding:0;margin-top:16px;justify-content:flex-start;gap:6px 12px;font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em} body[data-cards="p"] .card > .c-enter{justify-self:start;margin-top:20px} body[data-cards="p"] .card > .c-links{margin-top:20px} /* ---------- Q · CONSTELLATION ------------------------------------------------ The skills become a star chart: each one a point of light, the first six joined into a figure. Reads as stars at night, as a survey sketch by day. */ body[data-cards="q"] .card.cover{width:min(92vw,840px)} body[data-cards="q"] .card .ztitle{font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:clamp(40px,5.2vw,64px);line-height:1.02;letter-spacing:.15em} body[data-cards="q"] .card .c-context{font-size:15px;margin-top:10px} body[data-cards="q"] .card .c-tiles{position:relative;display:block;height:200px;margin-top:22px;max-width:600px} body[data-cards="q"] .card .c-tiles::before{ content:'';position:absolute;inset:0;background:var(--fg);opacity:.4; -webkit-mask:url("data:image/svg+xml;utf8,") 0 0/100% 100% no-repeat; mask:url("data:image/svg+xml;utf8,") 0 0/100% 100% no-repeat; } body[data-cards="q"] .card .c-tiles span{position:absolute;transform:translateY(-50%);white-space:nowrap;background:none;border:none;padding:0 0 0 13px; font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg); text-shadow:0 0 3px var(--sky-bot),0 0 6px var(--sky-bot),0 0 10px var(--sky-bot)} body[data-cards="q"] .card .c-tiles span::before{content:'';position:absolute;left:-3.5px;top:50%;width:7px;height:7px;margin-top:-4.5px;border-radius:50%; background:var(--fg);box-shadow:0 0 9px 2px color-mix(in srgb, var(--fg) 40%, transparent);animation:rz-twinkle 3s ease-in-out infinite alternate} @keyframes rz-twinkle{from{opacity:.55}to{opacity:1}} body[data-cards="q"] .card .c-tiles span:nth-child(1){left:2%;top:6%} body[data-cards="q"] .card .c-tiles span:nth-child(2){left:36%;top:2%} body[data-cards="q"] .card .c-tiles span:nth-child(3){left:66%;top:14%} body[data-cards="q"] .card .c-tiles span:nth-child(4){left:40%;top:32%} body[data-cards="q"] .card .c-tiles span:nth-child(5){left:6%;top:40%} body[data-cards="q"] .card .c-tiles span:nth-child(6){left:62%;top:54%} body[data-cards="q"] .card .c-tiles span:nth-child(7){left:10%;top:70%} body[data-cards="q"] .card .c-tiles span:nth-child(8){left:42%;top:80%} body[data-cards="q"] .card .c-tiles span:nth-child(9){left:68%;top:92%} body[data-cards="q"] .card .c-tiles span:nth-child(10){left:16%;top:98%} body[data-cards="q"] .card .c-tiles span:nth-child(11){left:46%;top:96%} body[data-cards="q"] .card .c-tiles span:nth-child(3n)::before{animation-delay:-1.2s} body[data-cards="q"] .card .c-tiles span:nth-child(3n+1)::before{animation-delay:-2.1s} body[data-cards="q"] .card .c-enter{margin-top:22px} /* ---------- R · SPEC SHEET --------------------------------------------------- The most "engineer" option: a labeled data sheet. Mono labels down the left, values on the right, dashed rules between rows. */ body[data-cards="r"] .card.cover{width:min(95vw,920px)} body[data-cards="r"] .card .c-num{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:11.5px;letter-spacing:.24em;margin-bottom:4px} body[data-cards="r"] .card .ztitle{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(38px,4.8vw,58px);line-height:1;letter-spacing:-.02em;margin-bottom:16px} body[data-cards="r"] .card :is(.c-context,.c-role,.c-tiles,.c-links){position:relative;margin-top:0;padding:11px 0 11px 96px;border-top:1px dashed var(--c-rule);max-width:none} body[data-cards="r"] .card :is(.c-context,.c-role,.c-tiles,.c-links)::before{position:absolute;left:0;top:13px;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:10.5px;letter-spacing:.2em;color:var(--kick);text-transform:uppercase} body[data-cards="r"] .card .c-context::before{content:'what'} body[data-cards="r"] .card .c-role::before{content:'role'} body[data-cards="r"] .card .c-tiles::before{content:'stack'} body[data-cards="r"] .card[data-zone="camp-night"] .c-role::before{content:'campus'} body[data-cards="r"] .card[data-zone="camp-night"] .c-tiles::before{content:'off trail'} body[data-cards="r"] .card .c-links::before{content:'contact'} body[data-cards="r"] .card .c-context{font-size:15px} body[data-cards="r"] .card .c-role{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--fg);justify-content:flex-start;gap:6px 12px} body[data-cards="r"] .card .c-date{font-family:'IBM Plex Mono',monospace;font-size:10.5px;margin-left:auto} body[data-cards="r"] .card .c-tiles{gap:6px;border-bottom:1px dashed var(--c-rule)} body[data-cards="r"] .card .c-tiles span{background:none;border:1px solid var(--c-rule);border-radius:4px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0;padding:3px 8px;color:var(--fg)} body[data-cards="r"] .card .c-enter{margin-top:16px;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:12px;letter-spacing:.12em} body[data-cards="r"] .card .c-links{border-bottom:none} body[data-cards="r"] .card .c-link-btn{font-family:'IBM Plex Mono',monospace;font-size:12px} /* ---------- S · SWITCHBACK --------------------------------------------------- The skills climb a switchback trail: alternating left and right of a zigzag path, each with a waypoint dot. */ body[data-cards="s"] .card.cover{width:min(92vw,840px)} body[data-cards="s"] .card .ztitle{font-family:'Josefin Sans',sans-serif;font-weight:400;font-size:clamp(38px,5vw,62px);line-height:1.02;letter-spacing:.12em} body[data-cards="s"] .card .c-context{font-size:15px;margin-top:10px} body[data-cards="s"] .card .c-tiles{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:44px;row-gap:2px;margin-top:20px;max-width:520px} body[data-cards="s"] .card .c-tiles::before{ content:'';position:absolute;left:50%;top:0;bottom:0;width:1.5px;margin-left:-.75px; background:repeating-linear-gradient(to bottom, var(--kick) 0 5px, transparent 5px 10px);opacity:.75; } body[data-cards="s"] .card .c-tiles span{position:relative;grid-column:1;justify-self:end;text-align:right;background:none;border:none;padding:3px 0; font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg);text-shadow:var(--c-shadow)} body[data-cards="s"] .card .c-tiles span:nth-child(even){grid-column:2;justify-self:start;text-align:left;margin-top:16px} /* waypoint: dot centered on the trail, 22px from either column (half the 44px gap) */ body[data-cards="s"] .card .c-tiles span::after{content:'';position:absolute;top:50%;width:9px;height:9px;margin-top:-6px;border-radius:50%;border:1.5px solid var(--kick);background:var(--sky-bot);box-sizing:border-box} body[data-cards="s"] .card .c-tiles span:nth-child(odd)::after{right:-26.5px} body[data-cards="s"] .card .c-tiles span:nth-child(even)::after{left:-26.5px} /* spur from the label to the trail */ body[data-cards="s"] .card .c-tiles span::before{content:'';position:absolute;top:50%;width:12px;height:1.5px;margin-top:-2px;background:var(--kick);opacity:.6} body[data-cards="s"] .card .c-tiles span:nth-child(odd)::before{right:-18px} body[data-cards="s"] .card .c-tiles span:nth-child(even)::before{left:-18px} body[data-cards="s"] .card .c-enter{margin-top:22px} /* ---------- T · SKYWRITE ----------------------------------------------------- The project name is written huge and faint across the sky like part of the landscape; the facts sit underneath at normal size, crisp. The name drifts in slowly, a touch of parallax. */ body[data-cards="t"] .card.cover{width:min(96vw,1080px)} body[data-cards="t"] .card .ztitle{font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:clamp(70px,9.6vw,148px);line-height:.86;letter-spacing:.02em;margin:0 0 4px -.04em; color:color-mix(in srgb, var(--fg) 30%, transparent);text-shadow:none; transition:transform 1.8s cubic-bezier(.2,.8,.2,1)} body[data-cards="t"] .card.cover:not(.in) .ztitle{transform:translateX(60px)} body[data-cards="t"] .card :is(.c-context,.c-role,.c-enter,.c-links){max-width:860px} body[data-cards="t"] .card .c-context{font-size:15.5px;margin-top:6px;color:var(--fg)} body[data-cards="t"] .card .c-num{margin-bottom:20px} /* ---------- U · FIELD GUIDE -------------------------------------------------- Formatted like an entry in a wildlife field guide: the role sits under the name like a Latin species name, then run-in heads (Habitat, Field marks). Wildlife character with a clean, structured read. */ body[data-cards="u"] .card.cover{width:min(95vw,960px);display:flex;flex-direction:column;align-items:flex-start} body[data-cards="u"] .card .c-head{display:contents} body[data-cards="u"] .card .c-num{order:0;font-family:'DM Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:.3em;margin-bottom:6px} body[data-cards="u"] .card .ztitle{order:1;font-family:'DM Sans',sans-serif;font-weight:700;font-size:clamp(38px,4.8vw,58px);line-height:1;letter-spacing:.01em} body[data-cards="u"] .card .c-role{order:2;align-self:stretch;border:none;margin-top:6px;padding:0 0 12px;border-bottom:3px double var(--c-rule); font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:22px;letter-spacing:0;text-transform:none;color:var(--kick);justify-content:flex-start;align-items:baseline;gap:4px 12px} body[data-cards="u"] .card .c-context{order:3;margin-top:12px;font-size:15.5px;color:var(--fg)} body[data-cards="u"] .card .c-tiles{order:4;margin-top:12px;gap:7px;align-items:center;max-width:760px} body[data-cards="u"] .card > :is(.c-enter,.c-links){order:5} body[data-cards="u"] .card .c-context::before, body[data-cards="u"] .card .c-tiles::before{font-family:'Instrument Serif',serif;font-style:italic;font-size:19px;color:var(--kick);margin-right:8px} body[data-cards="u"] .card .c-context::before{content:'Habitat'} body[data-cards="u"] .card .c-tiles::before{content:'Field marks';margin-right:4px} body[data-cards="u"] .card[data-zone="camp-night"] .c-tiles::before{content:'Habits'} body[data-cards="u"] .card .c-tiles span{border-radius:999px;background:var(--pill);border:none;font-family:'DM Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:0;padding:4px 11px} body[data-cards="u"] .card > .c-enter{margin-top:18px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.12em} body[data-cards="u"] .card .c-links{margin-top:18px} body[data-cards="u"] .card .c-links .c-enter{font-family:'DM Sans',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.12em} body[data-cards="u"] .card .c-link-btn{font-family:'DM Sans',sans-serif;font-weight:600;font-size:12.5px} /* ---------- V · SWISS GRID --------------------------------------------------- No panel, just hairlines: the facts sit in an open ruled grid like a modernist poster or a spec plate. Clean and technical. */ body[data-cards="v"] .card.cover{--c-rule:color-mix(in srgb, var(--fg) 38%, transparent);width:min(95vw,940px);display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--fg)} body[data-cards="v"] .card .c-head{display:contents} body[data-cards="v"] .card .c-num{grid-column:1 / -1;padding:10px 0 6px;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:11.5px;letter-spacing:.24em} body[data-cards="v"] .card .ztitle{grid-column:1 / -1;padding:0 0 14px;border-bottom:1px solid var(--c-rule);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(40px,5vw,62px);line-height:.95;letter-spacing:-.03em} body[data-cards="v"] .card .c-context{grid-column:1 / -1;margin:0;padding:12px 0;border-bottom:1px solid var(--c-rule);font-size:14.5px} body[data-cards="v"] .card .c-role{grid-column:1 / -1;margin:0;padding:12px 0;border:none;border-bottom:1px solid var(--c-rule);flex-direction:row;align-items:center;gap:6px 12px; font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--kick)} body[data-cards="v"] .card .c-date{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-left:auto} body[data-cards="v"] .card .c-tiles{grid-column:1 / -1;margin:0;padding:12px 0;gap:6px 18px;border-bottom:1px solid var(--c-rule);max-width:none} body[data-cards="v"] .card .c-tiles span{display:inline-flex;align-items:center;gap:7px;background:none;border:none;padding:0;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:12.5px;letter-spacing:0;color:var(--fg)} body[data-cards="v"] .card .c-tiles span::before{content:'';width:5px;height:5px;background:var(--kick)} body[data-cards="v"] .card > :is(.c-enter,.c-links){grid-column:1 / -1;justify-self:start;margin-top:16px} body[data-cards="v"] .card .c-enter{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.12em} body[data-cards="v"] .card .c-link-btn{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:12.5px} /* ---------- W · HORIZON LINE ------------------------------------------------- One long horizon line runs under the title; the skills stand on it as tick marks with labels angled up into the sky, like an annotated landscape profile. Wide, airy, very different silhouette. */ body[data-cards="w"] .card.cover{width:min(94vw,940px)} body[data-cards="w"] .card .ztitle{font-family:'Josefin Sans',sans-serif;font-weight:400;font-size:clamp(38px,5vw,62px);line-height:1.02;letter-spacing:.12em} body[data-cards="w"] .card .c-context{font-size:15px;margin-top:10px;max-width:860px} body[data-cards="w"] .card .c-tiles{position:relative;display:flex;flex-wrap:nowrap;justify-content:space-between;margin-top:10px;padding:150px 0 0;border-bottom:1.5px solid var(--kick);max-width:760px} /* each tag = a zero-size anchor sitting on the line */ body[data-cards="w"] .card .c-tiles span{ position:relative;flex:0 0 0;width:0;height:0;white-space:nowrap;background:none;border:none; padding:0 0 0 20px;line-height:0; transform-origin:0 0;transform:rotate(-40deg); font-family:'Josefin Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);text-shadow:var(--c-shadow); } /* the tick: counter-rotated so it stands straight up from the anchor */ body[data-cards="w"] .card .c-tiles span::before{content:'';position:absolute;left:0;top:-14px;width:1.5px;height:14px;background:var(--kick);transform-origin:0 100%;transform:rotate(40deg)} body[data-cards="w"] .card .c-role{margin-top:18px;max-width:860px} body[data-cards="w"] .card .c-enter{margin-top:20px} @media (prefers-reduced-motion: reduce){ body[data-cards="n"] .card .c-tiles span, body[data-cards="q"] .card .c-tiles span::before{animation:none} body[data-cards] .card .ztitle, body[data-cards] .card .ztitle::after{transition:none !important} }