@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap");
/* Alice · Final — the chosen direction. Alice Zhao-style page (white, Hanken Grotesk, dot-grid hero with a grey statement,
tiny top bar), with the projects shown as a masonry of framed screenshots on soft gradients.
Dev panel > Display switches the project display to a bento grid (key: d).
Layout: 260px label column | content column, matching the section heads, about and off-screen blocks. */
:root {
--bg: #ffffff;
--ink: #0d0d0d;
--muted: #6c6c6c;
--statement: #858585;
--paper: #f3f3f1;
--accent: #2b59ff;
--accent-2: #ff5a36;
--link-hover: #6948a1;
--line: #e8e8e5;
--font-display: "Hanken Grotesk", system-ui, sans-serif;
--font-body: "Hanken Grotesk", system-ui, sans-serif;
--font-meta: "Hanken Grotesk", system-ui, sans-serif;
--letter-anim: none;
--reveal-from: translateY(40px);
--maxw: 1480px;
--gutter: clamp(16px, 2vw, 28px);
--leftcol: 260px;
--cgap: clamp(24px, 4vw, 64px);
--g-sky: linear-gradient(180deg, #3d8ef0 0%, #8fc8ff 48%, #ffc48a 100%);
--g-grass: radial-gradient(45% 32% at 24% 28%, #f3f29c, transparent), radial-gradient(40% 32% at 76% 72%, #d4e27c, transparent), #7c9a34;
--g-deep: linear-gradient(180deg, #0b5fc2, #4aa0ea 66%, #ff9d55);
--g-dusk: linear-gradient(180deg, #5b86e8, #b9a2f0 55%, #ffb8a0);
--g-warm: linear-gradient(180deg, #ffd27a, #ffab88 55%, #f5aebd);
}
/* tiny top bar */
.masthead { padding-block: 6px 10px; align-items: center; }
.mast-name { font: 500 16px var(--font-body); }
.mast-nav { font: 500 16px var(--font-body); gap: 4px 18px; }
.mast-nav a:hover { text-decoration: none; color: var(--link-hover); }
.mast-nav a[href="#made"] { display: none; }
/* dot-grid hero */
.hero { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); align-content: center; isolation: isolate; padding-block: 64px 96px; gap: 14px; }
.hero::before {
content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw);
background-image: radial-gradient(circle, #c9c9c6 1.5px, transparent 1.9px);
background-size: 36px 36px;
animation: dots-drift 50s linear infinite;
}
@keyframes dots-drift { to { background-position: 360px 180px; } }
.hero-kicker { display: none; }
.hero-title { font-weight: 600; font-size: clamp(2rem, 4.6vw, 3.9rem); line-height: 1.14; letter-spacing: -.03em; max-width: 33ch; color: var(--statement); }
.hero-title em { font-style: normal; color: var(--ink); }
.hero-sub { font-size: 1.1rem; color: var(--muted); }
.hero-sub a { color: var(--ink); }
.hero-sub b { font-weight: 600; color: var(--ink); }
/* section head: label column | note */
.projects { gap: 0; padding-block: 24px 0; }
.section-head { grid-template-columns: minmax(0, var(--leftcol)) minmax(0, 1fr); column-gap: var(--cgap); align-items: baseline; margin-bottom: 0; }
.section-mark { display: none; }
.section-title { font: 600 1.4rem var(--font-body); letter-spacing: -.015em; } /* same as the Tangents heading */
.section-note { font-size: .95rem; color: var(--muted); }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; gap: 2px; } }
/* ---------- project cards, shared ---------- */
.card { gap: 12px; }
.card-no, .card-cta { display: none; }
.card-meta { gap: 0 .4em; font: 500 12.5px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.card-tag { color: var(--muted); }
.card-tag + .card-type::before { content: "· "; } /* the dot only separates a type from a name before it */
.card-title { font: 500 1.2rem/1.2 var(--font-body); letter-spacing: -.02em; }
.card-desc { font-size: .9rem; line-height: 1.45; color: var(--muted); }
.card-desc b { font-weight: 600; color: var(--ink); }
/* hovering anywhere on a project marks it: the title turns purple and underlines, the description darkens */
.card-link { text-decoration: underline transparent; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: color .25s var(--ease), text-decoration-color .25s var(--ease); }
.card-desc { transition: color .25s var(--ease); }
.card:hover .card-link, .card:has(.card-link:focus-visible) .card-link { color: var(--link-hover); text-decoration-color: currentColor; }
.card:hover .card-desc { color: var(--ink); }
.card-extra { font: 500 .8rem var(--font-body); }
.card-media { transition: border-radius .5s var(--ease-spring), scale .3s var(--ease); }
.card:active .card-media { scale: .985; }
/* ---------- display: masonry (default) ----------
A loose collage rather than neat rows: a wide left column and a narrower right one that starts lower.
Inside them every card has its own width, shape and side, so the eye zig-zags down the page. */
[data-display="masonry"] .cards { display: grid; grid-template-columns: 7fr 5fr; column-gap: clamp(12px, 1.5vw, 24px); align-items: start; padding-top: 40px; }
[data-display="masonry"] .col { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 56px); min-width: 0; }
[data-display="masonry"] .col:nth-child(2) { padding-top: clamp(40px, 6vw, 96px); }
[data-display="masonry"] .card-media {
aspect-ratio: var(--ar, 3 / 4); background: var(--g, var(--g-sky)); border-radius: 8px;
display: grid; place-items: center; padding: 10%; box-sizing: border-box;
}
[data-display="masonry"] .card-media > :is(img, video) {
width: 100%; height: auto; aspect-ratio: 2500 / 1594; border-radius: 7px; background: #fff;
box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .4);
translate: calc(var(--mx, 0) * 8px) calc(var(--my, 0) * 8px);
transition: translate .3s var(--ease), scale .45s var(--ease-spring), box-shadow .4s;
}
[data-display="masonry"] .card:hover .card-media > :is(img, video) { transform: none; scale: 1.03; box-shadow: 0 24px 44px -12px rgba(0, 0, 0, .45); }
/* bare thumbnails: loose items with their own shadows, no white box of their own */
[data-display="masonry"] .card.is-bare .card-media { padding: 6%; }
[data-display="masonry"] .card.is-bare .card-media > img {
width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto;
border-radius: 0; background: none; box-shadow: none;
}
[data-display="masonry"] .card.is-bare:hover .card-media > img { box-shadow: none; }
[data-display="bento"] .card.is-bare .card-media > img { object-fit: contain; padding: 4%; box-sizing: border-box; }
[data-display="masonry"] .card-body { padding: 0 4px; gap: 4px; max-width: 46ch; }
.card[data-i="0"] { --ar: 4 / 3; --g: var(--g-sky); }
.card[data-i="1"] { --ar: 3 / 4; --g: linear-gradient(180deg, #3d8ef0 0%, #8fc8ff 48%, #ff9a4a 100%); }
.card[data-i="2"] { --ar: 4 / 5; --g: var(--g-dusk); }
.card[data-i="3"] { --ar: 1 / 1; --g: var(--g-warm); }
.card[data-i="4"] { --ar: 4 / 3; --g: var(--g-deep); }
/* Sky palettes (dev panel > Skies): each one is the real sky at that time of day, zenith at the top, horizon at the bottom. Dawn, Clear day (midday), Golden hour, Dusk (sunset), Twilight. Cards drift slightly in hue so neighbours differ. Original is the hand-picked set. "Clear day" is the base. */
.card[data-i="0"] { --g: linear-gradient(180deg, #2f99ea 0%, #7dc9f4 52%, #d8f0fc 100%); }
.card[data-i="1"] { --g: linear-gradient(180deg, #2f8fea 0%, #7dc3f4 55%, #d8effc 100%); }
.card[data-i="2"] { --g: linear-gradient(180deg, #2f86ea 0%, #7dbdf4 50%, #d8eefc 100%); }
.card[data-i="3"] { --g: linear-gradient(180deg, #2f7dea 0%, #7db7f4 57%, #d8edfc 100%); }
.card[data-i="4"] { --g: linear-gradient(180deg, #2f73ea 0%, #7db1f4 53%, #d8ecfc 100%); }
html[data-skies="original"] .card[data-i="0"] { --g: linear-gradient(180deg, #5f5de5 0%, #ff99ce 57%, #ffd5c2 100%); }
html[data-skies="original"] .card[data-i="1"] { --g: linear-gradient(180deg, #5a6bc4 0%, #a672c4 55%, #fbb9b4 100%); }
html[data-skies="original"] .card[data-i="2"] { --g: linear-gradient(180deg, #3281dc 0%, #a2c2eb 50%, #fbaf83 100%); }
html[data-skies="original"] .card[data-i="3"] { --g: linear-gradient(180deg, #545dab 0%, #8f6ab4 52%, #f8c2ba 100%); }
html[data-skies="original"] .card[data-i="4"] { --g: linear-gradient(180deg, #4d9aff 0%, #ffaf85 53%, #f7cfb0 100%); }
html[data-skies="dawn"] .card[data-i="0"] { --g: linear-gradient(180deg, #7ca6e0 0%, #eaa6cb 52%, #ffcfa6 100%); }
html[data-skies="dawn"] .card[data-i="1"] { --g: linear-gradient(180deg, #7ca1e0 0%, #eaa6c7 55%, #ffd1a6 100%); }
html[data-skies="dawn"] .card[data-i="2"] { --g: linear-gradient(180deg, #7c9ce0 0%, #eaa6c4 50%, #ffd3a6 100%); }
html[data-skies="dawn"] .card[data-i="3"] { --g: linear-gradient(180deg, #7c97e0 0%, #eaa6c1 57%, #ffd5a6 100%); }
html[data-skies="dawn"] .card[data-i="4"] { --g: linear-gradient(180deg, #7c92e0 0%, #eaa6bd 53%, #ffd7a6 100%); }
html[data-skies="golden"] .card[data-i="0"] { --g: linear-gradient(180deg, #5ba1de 0%, #f3ba8c 52%, #ff945e 100%); }
html[data-skies="golden"] .card[data-i="1"] { --g: linear-gradient(180deg, #5b9bde 0%, #f3bf8c 55%, #ff985e 100%); }
html[data-skies="golden"] .card[data-i="2"] { --g: linear-gradient(180deg, #5b94de 0%, #f3c48c 50%, #ff9c5e 100%); }
html[data-skies="golden"] .card[data-i="3"] { --g: linear-gradient(180deg, #5b8dde 0%, #f3c98c 57%, #ffa05e 100%); }
html[data-skies="golden"] .card[data-i="4"] { --g: linear-gradient(180deg, #5b87de 0%, #f3ce8c 53%, #ffa45e 100%); }
html[data-skies="dusk"] .card[data-i="0"] { --g: linear-gradient(180deg, #3a4696 0%, #b45695 52%, #ff825a 100%); }
html[data-skies="dusk"] .card[data-i="1"] { --g: linear-gradient(180deg, #3a4296 0%, #b45691 55%, #ff865a 100%); }
html[data-skies="dusk"] .card[data-i="2"] { --g: linear-gradient(180deg, #3a3d96 0%, #b4568c 50%, #ff8a5a 100%); }
html[data-skies="dusk"] .card[data-i="3"] { --g: linear-gradient(180deg, #3c3a96 0%, #b45687 57%, #ff8e5a 100%); }
html[data-skies="dusk"] .card[data-i="4"] { --g: linear-gradient(180deg, #403a96 0%, #b45683 53%, #ff925a 100%); }
html[data-skies="twilight"] .card[data-i="0"] { --g: linear-gradient(180deg, #0d224f 0%, #344b8f 52%, #c88aa9 100%); }
html[data-skies="twilight"] .card[data-i="1"] { --g: linear-gradient(180deg, #0d1e4f 0%, #34478f 55%, #c88aa8 100%); }
html[data-skies="twilight"] .card[data-i="2"] { --g: linear-gradient(180deg, #0d1b4f 0%, #34428f 50%, #c88aa6 100%); }
html[data-skies="twilight"] .card[data-i="3"] { --g: linear-gradient(180deg, #0d184f 0%, #343d8f 57%, #c88aa4 100%); }
html[data-skies="twilight"] .card[data-i="4"] { --g: linear-gradient(180deg, #0d144f 0%, #34398f 53%, #c88aa3 100%); }
/* more moods: Sunrise, Overcast, Misty morning, Storm, Night */
html[data-skies="sunrise"] .card[data-i="0"] { --g: linear-gradient(180deg, #4b7bc4 0%, #f2967c 52%, #ffcc6e 100%); }
html[data-skies="sunrise"] .card[data-i="1"] { --g: linear-gradient(180deg, #4b75c4 0%, #f29c7c 55%, #ffcf6e 100%); }
html[data-skies="sunrise"] .card[data-i="2"] { --g: linear-gradient(180deg, #4b6fc4 0%, #f2a27c 50%, #ffd36e 100%); }
html[data-skies="sunrise"] .card[data-i="3"] { --g: linear-gradient(180deg, #4b69c4 0%, #f2a87c 57%, #ffd76e 100%); }
html[data-skies="sunrise"] .card[data-i="4"] { --g: linear-gradient(180deg, #4b63c4 0%, #f2ae7c 53%, #ffda6e 100%); }
html[data-skies="overcast"] .card[data-i="0"] { --g: linear-gradient(180deg, #8da0b0 0%, #b7c5cf 52%, #e0e7ec 100%); }
html[data-skies="overcast"] .card[data-i="1"] { --g: linear-gradient(180deg, #8d9fb0 0%, #b7c4cf 55%, #e0e6ec 100%); }
html[data-skies="overcast"] .card[data-i="2"] { --g: linear-gradient(180deg, #8d9db0 0%, #b7c3cf 50%, #e0e6ec 100%); }
html[data-skies="overcast"] .card[data-i="3"] { --g: linear-gradient(180deg, #8d9bb0 0%, #b7c2cf 57%, #e0e6ec 100%); }
html[data-skies="overcast"] .card[data-i="4"] { --g: linear-gradient(180deg, #8d9ab0 0%, #b7c1cf 53%, #e0e5ec 100%); }
html[data-skies="misty"] .card[data-i="0"] { --g: linear-gradient(180deg, #a9c4cf 0%, #cfdfe0 52%, #f1f0e8 100%); }
html[data-skies="misty"] .card[data-i="1"] { --g: linear-gradient(180deg, #a9c2cf 0%, #cfdee0 55%, #f1f0e8 100%); }
html[data-skies="misty"] .card[data-i="2"] { --g: linear-gradient(180deg, #a9c0cf 0%, #cfdde0 50%, #f1f0e8 100%); }
html[data-skies="misty"] .card[data-i="3"] { --g: linear-gradient(180deg, #a9becf 0%, #cfdce0 57%, #f1f0e8 100%); }
html[data-skies="misty"] .card[data-i="4"] { --g: linear-gradient(180deg, #a9bccf 0%, #cfdbe0 53%, #f1f0e8 100%); }
html[data-skies="storm"] .card[data-i="0"] { --g: linear-gradient(180deg, #2c3946 0%, #566778 52%, #9aa3a0 100%); }
html[data-skies="storm"] .card[data-i="1"] { --g: linear-gradient(180deg, #2c3746 0%, #566678 55%, #9aa3a0 100%); }
html[data-skies="storm"] .card[data-i="2"] { --g: linear-gradient(180deg, #2c3646 0%, #566478 50%, #9aa3a0 100%); }
html[data-skies="storm"] .card[data-i="3"] { --g: linear-gradient(180deg, #2c3546 0%, #566278 57%, #9aa3a0 100%); }
html[data-skies="storm"] .card[data-i="4"] { --g: linear-gradient(180deg, #2c3346 0%, #566178 53%, #9aa3a0 100%); }
html[data-skies="night"] .card[data-i="0"] { --g: linear-gradient(180deg, #050d22 0%, #10224a 52%, #2a3e78 100%); }
html[data-skies="night"] .card[data-i="1"] { --g: linear-gradient(180deg, #050b22 0%, #101f4a 55%, #2a3c78 100%); }
html[data-skies="night"] .card[data-i="2"] { --g: linear-gradient(180deg, #050a22 0%, #101c4a 50%, #2a3a78 100%); }
html[data-skies="night"] .card[data-i="3"] { --g: linear-gradient(180deg, #050922 0%, #10194a 57%, #2a3878 100%); }
html[data-skies="night"] .card[data-i="4"] { --g: linear-gradient(180deg, #050722 0%, #10164a 53%, #2a3678 100%); }
/* Per-thumbnail sky (dev panel > Gradients > Sky): a card with data-sky uses that palette whatever the global Skies setting is. Generated from the palettes above; keep in step. */
html:root .card[data-sky="clear"][data-i="0"] { --g: linear-gradient(180deg, #2f99ea 0%, #7dc9f4 52%, #d8f0fc 100%); }
html:root .card[data-sky="clear"][data-i="1"] { --g: linear-gradient(180deg, #2f8fea 0%, #7dc3f4 55%, #d8effc 100%); }
html:root .card[data-sky="clear"][data-i="2"] { --g: linear-gradient(180deg, #2f86ea 0%, #7dbdf4 50%, #d8eefc 100%); }
html:root .card[data-sky="clear"][data-i="3"] { --g: linear-gradient(180deg, #2f7dea 0%, #7db7f4 57%, #d8edfc 100%); }
html:root .card[data-sky="clear"][data-i="4"] { --g: linear-gradient(180deg, #2f73ea 0%, #7db1f4 53%, #d8ecfc 100%); }
html:root .card[data-sky="original"][data-i="0"] { --g: linear-gradient(180deg, #545dab 0%, #8f6ab4 52%, #f8c2ba 100%); }
html:root .card[data-sky="original"][data-i="1"] { --g: linear-gradient(180deg, #5b86e8 0%, #b297f2 55%, #f5c6ad 100%); }
html:root .card[data-sky="original"][data-i="2"] { --g: linear-gradient(180deg, #2988f5 0%, #b8d7ff 50%, #f7c4a6 100%); }
html:root .card[data-sky="original"][data-i="3"] { --g: linear-gradient(180deg, #d1a3f0 0%, #f7bbd0 48%, #f9d8be 100%); }
html:root .card[data-sky="original"][data-i="4"] { --g: linear-gradient(180deg, #ffb994 0%, #f7b497 55%, #c8caf9 100%); }
html:root .card[data-sky="dawn"][data-i="0"] { --g: linear-gradient(180deg, #7ca6e0 0%, #eaa6cb 52%, #ffcfa6 100%); }
html:root .card[data-sky="dawn"][data-i="1"] { --g: linear-gradient(180deg, #7ca1e0 0%, #eaa6c7 55%, #ffd1a6 100%); }
html:root .card[data-sky="dawn"][data-i="2"] { --g: linear-gradient(180deg, #7c9ce0 0%, #eaa6c4 50%, #ffd3a6 100%); }
html:root .card[data-sky="dawn"][data-i="3"] { --g: linear-gradient(180deg, #7c97e0 0%, #eaa6c1 57%, #ffd5a6 100%); }
html:root .card[data-sky="dawn"][data-i="4"] { --g: linear-gradient(180deg, #7c92e0 0%, #eaa6bd 53%, #ffd7a6 100%); }
html:root .card[data-sky="golden"][data-i="0"] { --g: linear-gradient(180deg, #5ba1de 0%, #f3ba8c 52%, #ff945e 100%); }
html:root .card[data-sky="golden"][data-i="1"] { --g: linear-gradient(180deg, #5b9bde 0%, #f3bf8c 55%, #ff985e 100%); }
html:root .card[data-sky="golden"][data-i="2"] { --g: linear-gradient(180deg, #5b94de 0%, #f3c48c 50%, #ff9c5e 100%); }
html:root .card[data-sky="golden"][data-i="3"] { --g: linear-gradient(180deg, #5b8dde 0%, #f3c98c 57%, #ffa05e 100%); }
html:root .card[data-sky="golden"][data-i="4"] { --g: linear-gradient(180deg, #5b87de 0%, #f3ce8c 53%, #ffa45e 100%); }
html:root .card[data-sky="dusk"][data-i="0"] { --g: linear-gradient(180deg, #3a4696 0%, #b45695 52%, #ff825a 100%); }
html:root .card[data-sky="dusk"][data-i="1"] { --g: linear-gradient(180deg, #3a4296 0%, #b45691 55%, #ff865a 100%); }
html:root .card[data-sky="dusk"][data-i="2"] { --g: linear-gradient(180deg, #3a3d96 0%, #b4568c 50%, #ff8a5a 100%); }
html:root .card[data-sky="dusk"][data-i="3"] { --g: linear-gradient(180deg, #3c3a96 0%, #b45687 57%, #ff8e5a 100%); }
html:root .card[data-sky="dusk"][data-i="4"] { --g: linear-gradient(180deg, #403a96 0%, #b45683 53%, #ff925a 100%); }
html:root .card[data-sky="twilight"][data-i="0"] { --g: linear-gradient(180deg, #0d224f 0%, #344b8f 52%, #c88aa9 100%); }
html:root .card[data-sky="twilight"][data-i="1"] { --g: linear-gradient(180deg, #0d1e4f 0%, #34478f 55%, #c88aa8 100%); }
html:root .card[data-sky="twilight"][data-i="2"] { --g: linear-gradient(180deg, #0d1b4f 0%, #34428f 50%, #c88aa6 100%); }
html:root .card[data-sky="twilight"][data-i="3"] { --g: linear-gradient(180deg, #0d184f 0%, #343d8f 57%, #c88aa4 100%); }
html:root .card[data-sky="twilight"][data-i="4"] { --g: linear-gradient(180deg, #0d144f 0%, #34398f 53%, #c88aa3 100%); }
html:root .card[data-sky="sunrise"][data-i="0"] { --g: linear-gradient(180deg, #4b7bc4 0%, #f2967c 52%, #ffcc6e 100%); }
html:root .card[data-sky="sunrise"][data-i="1"] { --g: linear-gradient(180deg, #4b75c4 0%, #f29c7c 55%, #ffcf6e 100%); }
html:root .card[data-sky="sunrise"][data-i="2"] { --g: linear-gradient(180deg, #4b6fc4 0%, #f2a27c 50%, #ffd36e 100%); }
html:root .card[data-sky="sunrise"][data-i="3"] { --g: linear-gradient(180deg, #4b69c4 0%, #f2a87c 57%, #ffd76e 100%); }
html:root .card[data-sky="sunrise"][data-i="4"] { --g: linear-gradient(180deg, #4b63c4 0%, #f2ae7c 53%, #ffda6e 100%); }
html:root .card[data-sky="overcast"][data-i="0"] { --g: linear-gradient(180deg, #8da0b0 0%, #b7c5cf 52%, #e0e7ec 100%); }
html:root .card[data-sky="overcast"][data-i="1"] { --g: linear-gradient(180deg, #8d9fb0 0%, #b7c4cf 55%, #e0e6ec 100%); }
html:root .card[data-sky="overcast"][data-i="2"] { --g: linear-gradient(180deg, #8d9db0 0%, #b7c3cf 50%, #e0e6ec 100%); }
html:root .card[data-sky="overcast"][data-i="3"] { --g: linear-gradient(180deg, #8d9bb0 0%, #b7c2cf 57%, #e0e6ec 100%); }
html:root .card[data-sky="overcast"][data-i="4"] { --g: linear-gradient(180deg, #8d9ab0 0%, #b7c1cf 53%, #e0e5ec 100%); }
html:root .card[data-sky="misty"][data-i="0"] { --g: linear-gradient(180deg, #a9c4cf 0%, #cfdfe0 52%, #f1f0e8 100%); }
html:root .card[data-sky="misty"][data-i="1"] { --g: linear-gradient(180deg, #a9c2cf 0%, #cfdee0 55%, #f1f0e8 100%); }
html:root .card[data-sky="misty"][data-i="2"] { --g: linear-gradient(180deg, #a9c0cf 0%, #cfdde0 50%, #f1f0e8 100%); }
html:root .card[data-sky="misty"][data-i="3"] { --g: linear-gradient(180deg, #a9becf 0%, #cfdce0 57%, #f1f0e8 100%); }
html:root .card[data-sky="misty"][data-i="4"] { --g: linear-gradient(180deg, #a9bccf 0%, #cfdbe0 53%, #f1f0e8 100%); }
html:root .card[data-sky="storm"][data-i="0"] { --g: linear-gradient(180deg, #2c3946 0%, #566778 52%, #9aa3a0 100%); }
html:root .card[data-sky="storm"][data-i="1"] { --g: linear-gradient(180deg, #2c3746 0%, #566678 55%, #9aa3a0 100%); }
html:root .card[data-sky="storm"][data-i="2"] { --g: linear-gradient(180deg, #2c3646 0%, #566478 50%, #9aa3a0 100%); }
html:root .card[data-sky="storm"][data-i="3"] { --g: linear-gradient(180deg, #2c3546 0%, #566278 57%, #9aa3a0 100%); }
html:root .card[data-sky="storm"][data-i="4"] { --g: linear-gradient(180deg, #2c3346 0%, #566178 53%, #9aa3a0 100%); }
html:root .card[data-sky="night"][data-i="0"] { --g: linear-gradient(180deg, #050d22 0%, #10224a 52%, #2a3e78 100%); }
html:root .card[data-sky="night"][data-i="1"] { --g: linear-gradient(180deg, #050b22 0%, #101f4a 55%, #2a3c78 100%); }
html:root .card[data-sky="night"][data-i="2"] { --g: linear-gradient(180deg, #050a22 0%, #101c4a 50%, #2a3a78 100%); }
html:root .card[data-sky="night"][data-i="3"] { --g: linear-gradient(180deg, #050922 0%, #10194a 57%, #2a3878 100%); }
html:root .card[data-sky="night"][data-i="4"] { --g: linear-gradient(180deg, #050722 0%, #10164a 53%, #2a3678 100%); }
[data-display="masonry"] .card[data-i="0"] { width: 82%; }
[data-display="masonry"] .card[data-i="2"] { width: 62%; align-self: flex-end; }
[data-display="masonry"] .card[data-i="4"] { width: 72%; }
[data-display="masonry"] .card[data-i="1"] { width: 76%; align-self: flex-start; }
[data-display="masonry"] .card[data-i="3"] { width: 82%; }
@media (max-width: 760px) {
[data-display="masonry"] .cards { grid-template-columns: 1fr; }
[data-display="masonry"] .col { display: contents; }
[data-display="masonry"] .cards { display: flex; flex-direction: column; gap: 32px; }
.card[data-i="0"] { order: 0; } .card[data-i="1"] { order: 1; } .card[data-i="2"] { order: 2; } .card[data-i="3"] { order: 3; } .card[data-i="4"] { order: 4; }
/* on phones, keep a little rhythm: alternate cards sit narrower, pushed to one side */
[data-display="masonry"] .card[data-i] { width: 100%; align-self: auto; }
[data-display="masonry"] .card[data-i="1"], [data-display="masonry"] .card[data-i="3"] { width: 84%; align-self: flex-end; }
[data-display="masonry"] .card[data-i="2"] { width: 90%; }
}
/* ---------- display: bento ---------- */
[data-display="bento"] .cards {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 300px 300px 360px; gap: 16px; padding-top: 40px;
}
[data-display="bento"] .card {
display: flex; flex-direction: column; gap: 0; background: var(--paper); border-radius: 20px; overflow: hidden;
transition: opacity .8s var(--ease), transform .8s var(--ease), translate .4s var(--ease-spring), scale .25s var(--ease);
}
[data-display="bento"] .card:hover { translate: 0 -4px; }
[data-display="bento"] .card:active { scale: .99; }
[data-display="bento"] .card[data-i="0"] { grid-column: 1 / 8; grid-row: 1 / 3; }
[data-display="bento"] .card[data-i="1"] { grid-column: 8 / 13; grid-row: 1; }
[data-display="bento"] .card[data-i="2"] { grid-column: 8 / 13; grid-row: 2; background: #e8edff; }
[data-display="bento"] .card[data-i="3"] { grid-column: 1 / 7; grid-row: 3; }
[data-display="bento"] .card[data-i="4"] { grid-column: 7 / 13; grid-row: 3; }
[data-display="bento"] .card-media { position: relative; flex: 1 1 0; min-height: 0; aspect-ratio: auto; border-radius: 0; background: #ddd; }
[data-display="bento"] .card-media > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-display="bento"] .card:hover .card-media > :is(img, video) { transform: scale(1.03); }
[data-display="bento"] .card-body { padding: 16px 22px 18px; gap: 3px; }
[data-display="bento"] .card-title { font-size: 1.4rem; font-weight: 600; letter-spacing: -.03em; }
[data-display="bento"] .card[data-i="0"] .card-title { font-size: 2rem; line-height: 1.1; }
[data-display="bento"] .card-desc { display: none; }
[data-display="bento"] .card[data-i="0"] .card-desc, [data-display="bento"] .card[data-i="3"] .card-desc, [data-display="bento"] .card[data-i="4"] .card-desc { display: block; max-width: 60ch; }
@media (max-width: 760px) {
[data-display="bento"] .cards { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; }
[data-display="bento"] .card[data-i] { grid-column: 1; grid-row: auto; }
[data-display="bento"] .card-media { flex: none; aspect-ratio: 2500 / 1594; }
[data-display="bento"] .card[data-i="0"] .card-title { font-size: 1.6rem; }
}
/* ---------- displays: ladder / feature / trio / split ----------
Flat grids, no stagger. Every card in a row shares one media height (--h), so rows are always flush.
Size follows importance: the list order is the priority, and earlier cards get the bigger tiles.
Aspect ratios are tuned per card through --h and the column spans below. */
:is([data-display="ladder"], [data-display="feature"], [data-display="feature-lead"], [data-display="trio"], [data-display="split"], [data-display="even"], [data-display="tall"], [data-display="wide"]) .cards {
--u: min(1vw, var(--page-u, 14px));
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch;
column-gap: clamp(12px, 1.5vw, 24px); row-gap: clamp(28px, 3.5vw, 52px); padding-top: 40px;
}
:is([data-display="ladder"], [data-display="feature"], [data-display="feature-lead"], [data-display="trio"], [data-display="split"], [data-display="even"], [data-display="tall"], [data-display="wide"]) .card { display: flex; flex-direction: column; min-width: 0; }
:is([data-display="ladder"], [data-display="feature"], [data-display="feature-lead"], [data-display="trio"], [data-display="split"], [data-display="even"], [data-display="tall"], [data-display="wide"]) .card-media {
position: relative; height: calc(var(--u) * var(--h, 30)); flex: none; overflow: hidden;
background: var(--g, var(--g-sky)); border-radius: 8px; display: grid; place-items: center; padding: 6%; box-sizing: border-box;
}
:is([data-display="ladder"], [data-display="feature"], [data-display="feature-lead"], [data-display="trio"], [data-display="split"], [data-display="even"], [data-display="tall"], [data-display="wide"]) .card-media > :is(img, video) {
width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; aspect-ratio: 2500 / 1594;
border-radius: 7px; background: #fff; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .4);
transition: scale .45s var(--ease-spring), box-shadow .4s;
}
:is([data-display="ladder"], [data-display="feature"], [data-display="feature-lead"], [data-display="trio"], [data-display="split"], [data-display="even"], [data-display="tall"], [data-display="wide"]) .card:hover .card-media > :is(img, video) { scale: 1.03; box-shadow: 0 24px 44px -12px rgba(0, 0, 0, .45); }
:is([data-display="ladder"], [data-display="feature"], [data-display="feature-lead"], [data-display="trio"], [data-display="split"], [data-display="even"], [data-display="tall"], [data-display="wide"]) .card.is-bare .card-media { padding: 4%; }
:is([data-display="ladder"], [data-display="feature"], [data-display="feature-lead"], [data-display="trio"], [data-display="split"], [data-display="even"], [data-display="tall"], [data-display="wide"]) .card.is-bare .card-media > img {
width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; aspect-ratio: auto; border-radius: 0; background: none; box-shadow: none;
}
:is([data-display="ladder"], [data-display="feature"], [data-display="feature-lead"], [data-display="trio"], [data-display="split"], [data-display="even"], [data-display="tall"], [data-display="wide"]) .card-body { padding: 12px 4px 0; gap: 4px; max-width: 52ch; }
/* ladder: one wide hero, then two rows that flip wide/narrow */
[data-display="ladder"] .card[data-i="0"] { grid-column: 1 / 13; --h: 36; }
[data-display="ladder"] .card[data-i="1"] { grid-column: 1 / 8; --h: 31; }
[data-display="ladder"] .card[data-i="2"] { grid-column: 8 / 13; --h: 31; }
[data-display="ladder"] .card[data-i="3"] { grid-column: 1 / 6; --h: 27; }
[data-display="ladder"] .card[data-i="4"] { grid-column: 6 / 13; --h: 27; }
/* feature: a lead on the left (7 cols), the next two stacked beside it (5 cols, taller), then a pair */
[data-display="feature"] .card[data-i="0"] { grid-column: 1 / 8; grid-row: 1 / 3; }
[data-display="feature"] .card[data-i="0"] .card-media { height: auto; flex: 1 1 0; min-height: 0; }
[data-display="feature"] .card[data-i="1"] { grid-column: 8 / 13; grid-row: 1; --h: 17; }
[data-display="feature"] .card[data-i="2"] { grid-column: 8 / 13; grid-row: 2; --h: 17; }
[data-display="feature"] .card[data-i="3"] { grid-column: 1 / 6; grid-row: 3; --h: 27; }
[data-display="feature"] .card[data-i="4"] { grid-column: 6 / 13; grid-row: 3; --h: 27; }
/* feature-lead: the first version. A wider lead (8 cols) and a slimmer, shorter pair beside it (4 cols) */
[data-display="feature-lead"] .card[data-i="0"] { grid-column: 1 / 9; grid-row: 1 / 3; }
[data-display="feature-lead"] .card[data-i="0"] .card-media { height: auto; flex: 1 1 0; min-height: 0; }
[data-display="feature-lead"] .card[data-i="1"] { grid-column: 9 / 13; grid-row: 1; --h: 22; }
[data-display="feature-lead"] .card[data-i="2"] { grid-column: 9 / 13; grid-row: 2; --h: 22; }
[data-display="feature-lead"] .card[data-i="3"] { grid-column: 1 / 6; grid-row: 3; --h: 27; }
[data-display="feature-lead"] .card[data-i="4"] { grid-column: 6 / 13; grid-row: 3; --h: 27; }
/* trio: cinematic hero, three equal portraits, a slim closing strip */
[data-display="trio"] .card[data-i="0"] { grid-column: 1 / 13; --h: 34; }
[data-display="trio"] .card[data-i="1"], [data-display="trio"] .card[data-i="2"], [data-display="trio"] .card[data-i="3"] { grid-column: span 4; --h: 34; }
[data-display="trio"] .card[data-i="4"] { grid-column: 1 / 13; --h: 22; }
/* split: a big pair on top (2/3 + 1/3), three equal tiles under it */
[data-display="split"] .card[data-i="0"] { grid-column: 1 / 9; --h: 36; }
[data-display="split"] .card[data-i="1"] { grid-column: 9 / 13; --h: 36; }
[data-display="split"] .card[data-i="2"], [data-display="split"] .card[data-i="3"], [data-display="split"] .card[data-i="4"] { grid-column: span 4; --h: 25; }
/* masonry, evened out: real columns, but every column is cut to the same total height (rows of 4 units),
so both ends are flush. Tiles span a different number of rows; the order still runs by importance. */
:is([data-display="even"], [data-display="tall"], [data-display="wide"]) .cards { grid-auto-rows: calc(var(--u) * 4); row-gap: clamp(16px, 1.8vw, 26px); }
:is([data-display="even"], [data-display="tall"], [data-display="wide"]) .card-media { height: auto; flex: 1 1 0; min-height: 0; }
/* even: two equal columns */
[data-display="even"] .card[data-i="0"] { grid-column: 1 / 7; grid-row: 1 / 9; }
[data-display="even"] .card[data-i="2"] { grid-column: 1 / 7; grid-row: 9 / 17; }
[data-display="even"] .card[data-i="4"] { grid-column: 1 / 7; grid-row: 17 / 24; }
[data-display="even"] .card[data-i="1"] { grid-column: 7 / 13; grid-row: 1 / 13; }
[data-display="even"] .card[data-i="3"] { grid-column: 7 / 13; grid-row: 13 / 24; }
/* tall: three columns, the mobile app runs the full height down the middle */
[data-display="tall"] .card[data-i="0"] { grid-column: 1 / 5; grid-row: 1 / 10; }
[data-display="tall"] .card[data-i="4"] { grid-column: 1 / 5; grid-row: 10 / 17; }
[data-display="tall"] .card[data-i="1"] { grid-column: 5 / 9; grid-row: 1 / 17; }
[data-display="tall"] .card[data-i="2"] { grid-column: 9 / 13; grid-row: 1 / 10; }
[data-display="tall"] .card[data-i="3"] { grid-column: 9 / 13; grid-row: 10 / 17; }
/* wide: a 7/5 split, the lead column wider */
[data-display="wide"] .card[data-i="0"] { grid-column: 1 / 8; grid-row: 1 / 9; }
[data-display="wide"] .card[data-i="2"] { grid-column: 1 / 8; grid-row: 9 / 17; }
[data-display="wide"] .card[data-i="4"] { grid-column: 1 / 8; grid-row: 17 / 23; }
[data-display="wide"] .card[data-i="1"] { grid-column: 8 / 13; grid-row: 1 / 14; }
[data-display="wide"] .card[data-i="3"] { grid-column: 8 / 13; grid-row: 14 / 23; }
@media (max-width: 760px) {
:is([data-display="ladder"], [data-display="feature"], [data-display="feature-lead"], [data-display="trio"], [data-display="split"], [data-display="even"], [data-display="tall"], [data-display="wide"]) .cards { display: flex; flex-direction: column; gap: 32px; }
:is([data-display="ladder"], [data-display="feature"], [data-display="feature-lead"], [data-display="trio"], [data-display="split"], [data-display="even"], [data-display="tall"], [data-display="wide"]) .card[data-i] .card-media { height: auto; flex: none; aspect-ratio: 4 / 3; }
}
/* ---------- about, off-screen wall, contact ---------- */
.about { padding-block: 120px 0; }
.about > .section-head { display: none; }
.about-text .about-title { display: block; margin-bottom: 16px; color: var(--ink); } /* heading sits on top of the blurb, beside the photo */
.about-body { grid-template-columns: minmax(0, var(--leftcol)) minmax(0, 1fr); column-gap: var(--cgap); }
.about-portrait { width: 200px; max-width: 200px; border-radius: 50%; }
.about-text { font-size: 1.05rem; color: var(--muted); max-width: 660px; }
.about-text .lede { font: inherit; color: inherit; letter-spacing: inherit; } /* plain body text, like the rest of the blurb */
.about-text .ink-link { color: var(--ink); }
@media (max-width: 760px) { .about-body { grid-template-columns: 1fr; } }
.offscreen { display: grid; grid-template-columns: minmax(0, var(--leftcol)) minmax(0, 1fr); column-gap: var(--cgap); margin-top: 120px; }
.offscreen-head { display: grid; align-content: start; gap: 8px; margin-bottom: 0; }
.offscreen-head h3 { font: 600 1.4rem var(--font-body); letter-spacing: -.015em; }
.offscreen-links { display: grid; gap: 8px; font: 500 .95rem var(--font-body); }
.contact-sheet { display: none; }
.photo-wall { display: flex; gap: 16px; align-items: flex-start; }
.wall-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.wall-col:nth-child(2) { margin-top: 56px; }
.wall-col:nth-child(3) { margin-top: 24px; }
.wall-col:nth-child(4) { margin-top: 72px; }
.wall-col figure { display: grid; gap: 8px; }
.wall-ph { position: relative; border-radius: 16px; overflow: hidden; background: var(--paper) center / cover no-repeat; transition: opacity .5s var(--ease); }
/* video tiles: silent loops with no frame and no controls, in their own shape */
.wall-embed iframe, .wall-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; pointer-events: none; }
/* films with black bars baked in: enlarge the poster and the player so the bars fall outside the tile (zoom is set in photos-data.js) */
.wall-embed[style*="--zoom"] { background-size: calc(var(--zoom) * 100%) auto; }
.wall-embed iframe { scale: var(--zoom, 1); }
.wall-col img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; transition: scale .45s var(--ease-spring); }
.wall-col figure:hover img { scale: 1.03; }
.wall-col figcaption { display: none; }
.wall-all { display: block; grid-column: 2; margin-top: 28px; font: 500 .95rem var(--font-body); }
.wall-all a { text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.wall-all a:hover { color: var(--link-hover); border-color: var(--link-hover); }
@media (max-width: 760px) {
.offscreen { grid-template-columns: 1fr; row-gap: 20px; margin-top: 88px; }
.wall-all { grid-column: 1; margin-top: 8px; }
.photo-wall { gap: 8px; } .wall-col { gap: 12px; }
}
.contact { padding-block: 120px 24px; }
.contact-big { font-weight: 600; font-size: clamp(1.4rem, 5.3vw, 4.75rem); letter-spacing: -.04em; line-height: 1; }
.contact-big:hover { color: var(--link-hover); }
.contact-kicker { font: 400 .95rem var(--font-body); letter-spacing: 0; text-transform: none; }
.contact-links { font: 500 1rem var(--font-body); }
/* links turn purple on hover */
.hero-sub a:hover, .ink-link:hover, .card-extra a:hover, .offscreen-links a:hover, .contact-links a:hover { color: var(--link-hover); }
/* six rows of hero-style dots in the gap between sections (work → about → tangents → contact),
full-bleed and centred in each 292px gap. dot-hover.js lays a canvas over each band for the hover icons. */
.about { padding-top: 292px; }
.offscreen { margin-top: 292px; }
.contact { padding-top: 292px; }
.about, .offscreen, .contact { position: relative; --band-top: 38px; }
.offscreen { --band-top: -254px; }
.about::before, .offscreen::before, .contact::before {
content: ""; position: absolute; top: var(--band-top); left: calc(50% - 50vw); width: 100vw; height: 216px; pointer-events: none;
background: radial-gradient(circle, #c9c9c6 1.5px, transparent 1.9px) 50% 0 / 36px 36px repeat;
/* fade the top and bottom rows out, like the hero's bottom edge */
-webkit-mask-image: linear-gradient(transparent, #000 54px, #000 162px, transparent);
mask-image: linear-gradient(transparent, #000 54px, #000 162px, transparent);
animation: band-drift 50s linear infinite; /* same drift as the hero dots */
}
@keyframes band-drift { to { background-position: calc(50% + 360px) 180px; } }
.offscreen::before { grid-column: 1 / -1; }
@media (max-width: 760px) { .offscreen { margin-top: 252px; --band-top: -234px; } }
/* Project-card hover: only the thumbnail zooms in (motion scenes and drawn covers too, not just ![]()
) */
.card .card-media > :not(img, video) { transition: scale .45s var(--ease-spring); }
.card:hover .card-media > :not(img, video) { scale: 1.03; }
@media (prefers-reduced-motion: reduce) { .card .card-media > * { transition: none; } .card:hover .card-media > :not(img, video) { scale: none; } }
/* Seda Speech: zoom the cards, not the whole scene (the bench illustration bottom-left stays put) */
.card:hover .card-media > .scene-seda { scale: none; }
.scene-seda .tcard { transition: scale .45s var(--ease-spring); }
.card:hover .scene-seda .tcard { scale: 1.03; }
@media (prefers-reduced-motion: reduce) { .scene-seda .tcard { transition: none; } .card:hover .scene-seda .tcard { scale: none; } }
/* Seda Speech (current scene): the stack of cards is .sd2-deck; the bench next to it is left alone */
.scene-seda .sd2-deck { transition: scale .45s var(--ease-spring); }
.card:hover .scene-seda .sd2-deck { scale: .927; } /* resting size is .9 (thumb-motion.css), so this is a 3% zoom */
@media (prefers-reduced-motion: reduce) { .scene-seda .sd2-deck { transition: none; } .card:hover .scene-seda .sd2-deck { scale: none; } }
/* Lingoda app thumbnail: fixed gradient, ignores the Skies setting (dev panel Gradients still overrides). */
html:not([data-skies="bokeh-each"]):root .card[data-id="lingoda-app"][data-i][data-id] { --g: linear-gradient(180deg, #3b68b5 0%, #d699b7 55%, #fdd5af 100%); }
/* Thumbnail gradient schemes A-D (dev panel > Skies) */
html[data-skies="each"] .card[data-i="0"] { --g: linear-gradient(180deg, #0d1e4f 0%, #34478f 55%, #c88aa8 100%); }
html:root .card[data-sky="each"][data-i="0"] { --g: linear-gradient(180deg, #0d1e4f 0%, #34478f 55%, #c88aa8 100%); }
html[data-skies="each"] .card[data-i="1"] { --g: linear-gradient(180deg, #3d8ef0 0%, #8fc8ff 55%, #ffc48a 100%); }
html:root .card[data-sky="each"][data-i="1"] { --g: linear-gradient(180deg, #3d8ef0 0%, #8fc8ff 55%, #ffc48a 100%); }
html[data-skies="each"] .card[data-i="2"] { --g: linear-gradient(180deg, #2f8f6a 0%, #8fd6a8 55%, #f3f0b0 100%); }
html:root .card[data-sky="each"][data-i="2"] { --g: linear-gradient(180deg, #2f8f6a 0%, #8fd6a8 55%, #f3f0b0 100%); }
html[data-skies="each"] .card[data-i="3"] { --g: linear-gradient(180deg, #7a4fe0 0%, #ff99ce 55%, #ffd5c2 100%); }
html:root .card[data-sky="each"][data-i="3"] { --g: linear-gradient(180deg, #7a4fe0 0%, #ff99ce 55%, #ffd5c2 100%); }
html[data-skies="each"] .card[data-i="4"] { --g: linear-gradient(180deg, #f2652f 0%, #ffa56e 55%, #ffe0b0 100%); }
html:root .card[data-sky="each"][data-i="4"] { --g: linear-gradient(180deg, #f2652f 0%, #ffa56e 55%, #ffe0b0 100%); }
html[data-skies="same"] .card[data-i="0"] { --g: linear-gradient(180deg, #5f5de5 0%, #ff99ce 55%, #ffd5c2 100%); }
html:root .card[data-sky="same"][data-i="0"] { --g: linear-gradient(180deg, #5f5de5 0%, #ff99ce 55%, #ffd5c2 100%); }
html[data-skies="same"] .card[data-i="1"] { --g: linear-gradient(180deg, #5f5de5 0%, #ff99ce 55%, #ffd5c2 100%); }
html:root .card[data-sky="same"][data-i="1"] { --g: linear-gradient(180deg, #5f5de5 0%, #ff99ce 55%, #ffd5c2 100%); }
html[data-skies="same"] .card[data-i="2"] { --g: linear-gradient(180deg, #5f5de5 0%, #ff99ce 55%, #ffd5c2 100%); }
html:root .card[data-sky="same"][data-i="2"] { --g: linear-gradient(180deg, #5f5de5 0%, #ff99ce 55%, #ffd5c2 100%); }
html[data-skies="same"] .card[data-i="3"] { --g: linear-gradient(180deg, #5f5de5 0%, #ff99ce 55%, #ffd5c2 100%); }
html:root .card[data-sky="same"][data-i="3"] { --g: linear-gradient(180deg, #5f5de5 0%, #ff99ce 55%, #ffd5c2 100%); }
html[data-skies="same"] .card[data-i="4"] { --g: linear-gradient(180deg, #5f5de5 0%, #ff99ce 55%, #ffd5c2 100%); }
html:root .card[data-sky="same"][data-i="4"] { --g: linear-gradient(180deg, #5f5de5 0%, #ff99ce 55%, #ffd5c2 100%); }
html[data-skies="family"] .card[data-i="0"] { --g: linear-gradient(180deg, #0e1733 0%, #2b2d63 55%, #c85a58 100%); }
html:root .card[data-sky="family"][data-i="0"] { --g: linear-gradient(180deg, #0e1733 0%, #2b2d63 55%, #c85a58 100%); }
html[data-skies="family"] .card[data-i="1"] { --g: linear-gradient(180deg, #6a63e8 0%, #c47ee0 55%, #ffc2c8 100%); }
html:root .card[data-sky="family"][data-i="1"] { --g: linear-gradient(180deg, #6a63e8 0%, #c47ee0 55%, #ffc2c8 100%); }
html[data-skies="family"] .card[data-i="2"] { --g: linear-gradient(180deg, #5a6fe0 0%, #b585e0 55%, #ffcdc2 100%); }
html:root .card[data-sky="family"][data-i="2"] { --g: linear-gradient(180deg, #5a6fe0 0%, #b585e0 55%, #ffcdc2 100%); }
html[data-skies="family"] .card[data-i="3"] { --g: linear-gradient(180deg, #7a5be6 0%, #e48ad8 55%, #ffd0b8 100%); }
html:root .card[data-sky="family"][data-i="3"] { --g: linear-gradient(180deg, #7a5be6 0%, #e48ad8 55%, #ffd0b8 100%); }
html[data-skies="family"] .card[data-i="4"] { --g: linear-gradient(180deg, #ff8a4a 0%, #ffb88a 55%, #ffe6c4 100%); }
html:root .card[data-sky="family"][data-i="4"] { --g: linear-gradient(180deg, #ff8a4a 0%, #ffb88a 55%, #ffe6c4 100%); }
html[data-skies="hues"] .card[data-i="0"] { --g: linear-gradient(180deg, #4a4fd0 0%, #a06ad8 55%, #ffc6b8 100%); }
html:root .card[data-sky="hues"][data-i="0"] { --g: linear-gradient(180deg, #4a4fd0 0%, #a06ad8 55%, #ffc6b8 100%); }
html[data-skies="hues"] .card[data-i="1"] { --g: linear-gradient(180deg, #5a5fe0 0%, #c470d8 55%, #ffc6c0 100%); }
html:root .card[data-sky="hues"][data-i="1"] { --g: linear-gradient(180deg, #5a5fe0 0%, #c470d8 55%, #ffc6c0 100%); }
html[data-skies="hues"] .card[data-i="2"] { --g: linear-gradient(180deg, #6a63e8 0%, #d878d0 55%, #ffc8c4 100%); }
html:root .card[data-sky="hues"][data-i="2"] { --g: linear-gradient(180deg, #6a63e8 0%, #d878d0 55%, #ffc8c4 100%); }
html[data-skies="hues"] .card[data-i="3"] { --g: linear-gradient(180deg, #7a5be6 0%, #e880c4 55%, #ffcac4 100%); }
html:root .card[data-sky="hues"][data-i="3"] { --g: linear-gradient(180deg, #7a5be6 0%, #e880c4 55%, #ffcac4 100%); }
html[data-skies="hues"] .card[data-i="4"] { --g: linear-gradient(180deg, #8a58e0 0%, #f088b8 55%, #ffcec4 100%); }
html:root .card[data-sky="hues"][data-i="4"] { --g: linear-gradient(180deg, #8a58e0 0%, #f088b8 55%, #ffcec4 100%); }
/* Bokeh + film grain thumbnail backgrounds (dev panel > Skies) */
html[data-skies="bokeh-meadow"] .card[data-i="0"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 20% 24%, rgba(236,223,74,0.85) 0, rgba(236,223,74,0.5) 19%, rgba(236,223,74,0) 52%), radial-gradient(circle at 78% 18%, rgba(246,242,168,0.85) 0, rgba(246,242,168,0.5) 15%, rgba(246,242,168,0) 44%), radial-gradient(circle at 64% 70%, rgba(47,61,16,0.85) 0, rgba(47,61,16,0.5) 21%, rgba(47,61,16,0) 56%), radial-gradient(circle at 18% 80%, rgba(207,216,238,0.85) 0, rgba(207,216,238,0.5) 15%, rgba(207,216,238,0) 44%), radial-gradient(circle at 50% 48%, rgba(184,198,58,0.85) 0, rgba(184,198,58,0.5) 13%, rgba(184,198,58,0) 40%), #6f8226; }
html:root .card[data-sky="bokeh-meadow"][data-i="0"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 20% 24%, rgba(236,223,74,0.85) 0, rgba(236,223,74,0.5) 19%, rgba(236,223,74,0) 52%), radial-gradient(circle at 78% 18%, rgba(246,242,168,0.85) 0, rgba(246,242,168,0.5) 15%, rgba(246,242,168,0) 44%), radial-gradient(circle at 64% 70%, rgba(47,61,16,0.85) 0, rgba(47,61,16,0.5) 21%, rgba(47,61,16,0) 56%), radial-gradient(circle at 18% 80%, rgba(207,216,238,0.85) 0, rgba(207,216,238,0.5) 15%, rgba(207,216,238,0) 44%), radial-gradient(circle at 50% 48%, rgba(184,198,58,0.85) 0, rgba(184,198,58,0.5) 13%, rgba(184,198,58,0) 40%), #6f8226; }
html[data-skies="bokeh-meadow"] .card[data-i="1"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 75% 22%, rgba(236,223,74,0.85) 0, rgba(236,223,74,0.5) 18%, rgba(236,223,74,0) 50%), radial-gradient(circle at 22% 32%, rgba(246,242,168,0.85) 0, rgba(246,242,168,0.5) 16%, rgba(246,242,168,0) 46%), radial-gradient(circle at 30% 82%, rgba(47,61,16,0.85) 0, rgba(47,61,16,0.5) 20%, rgba(47,61,16,0) 54%), radial-gradient(circle at 82% 74%, rgba(207,216,238,0.85) 0, rgba(207,216,238,0.5) 15%, rgba(207,216,238,0) 44%), radial-gradient(circle at 52% 54%, rgba(184,198,58,0.85) 0, rgba(184,198,58,0.5) 12%, rgba(184,198,58,0) 38%), #6f8226; }
html:root .card[data-sky="bokeh-meadow"][data-i="1"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 75% 22%, rgba(236,223,74,0.85) 0, rgba(236,223,74,0.5) 18%, rgba(236,223,74,0) 50%), radial-gradient(circle at 22% 32%, rgba(246,242,168,0.85) 0, rgba(246,242,168,0.5) 16%, rgba(246,242,168,0) 46%), radial-gradient(circle at 30% 82%, rgba(47,61,16,0.85) 0, rgba(47,61,16,0.5) 20%, rgba(47,61,16,0) 54%), radial-gradient(circle at 82% 74%, rgba(207,216,238,0.85) 0, rgba(207,216,238,0.5) 15%, rgba(207,216,238,0) 44%), radial-gradient(circle at 52% 54%, rgba(184,198,58,0.85) 0, rgba(184,198,58,0.5) 12%, rgba(184,198,58,0) 38%), #6f8226; }
html[data-skies="bokeh-meadow"] .card[data-i="2"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 28% 18%, rgba(236,223,74,0.85) 0, rgba(236,223,74,0.5) 17%, rgba(236,223,74,0) 48%), radial-gradient(circle at 80% 40%, rgba(246,242,168,0.85) 0, rgba(246,242,168,0.5) 20%, rgba(246,242,168,0) 54%), radial-gradient(circle at 50% 84%, rgba(47,61,16,0.85) 0, rgba(47,61,16,0.5) 17%, rgba(47,61,16,0) 48%), radial-gradient(circle at 14% 60%, rgba(207,216,238,0.85) 0, rgba(207,216,238,0.5) 14%, rgba(207,216,238,0) 42%), radial-gradient(circle at 60% 28%, rgba(184,198,58,0.85) 0, rgba(184,198,58,0.5) 12%, rgba(184,198,58,0) 38%), #6f8226; }
html:root .card[data-sky="bokeh-meadow"][data-i="2"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 28% 18%, rgba(236,223,74,0.85) 0, rgba(236,223,74,0.5) 17%, rgba(236,223,74,0) 48%), radial-gradient(circle at 80% 40%, rgba(246,242,168,0.85) 0, rgba(246,242,168,0.5) 20%, rgba(246,242,168,0) 54%), radial-gradient(circle at 50% 84%, rgba(47,61,16,0.85) 0, rgba(47,61,16,0.5) 17%, rgba(47,61,16,0) 48%), radial-gradient(circle at 14% 60%, rgba(207,216,238,0.85) 0, rgba(207,216,238,0.5) 14%, rgba(207,216,238,0) 42%), radial-gradient(circle at 60% 28%, rgba(184,198,58,0.85) 0, rgba(184,198,58,0.5) 12%, rgba(184,198,58,0) 38%), #6f8226; }
html[data-skies="bokeh-meadow"] .card[data-i="3"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 70% 16%, rgba(236,223,74,0.85) 0, rgba(236,223,74,0.5) 20%, rgba(236,223,74,0) 54%), radial-gradient(circle at 18% 46%, rgba(246,242,168,0.85) 0, rgba(246,242,168,0.5) 17%, rgba(246,242,168,0) 48%), radial-gradient(circle at 76% 82%, rgba(47,61,16,0.85) 0, rgba(47,61,16,0.5) 18%, rgba(47,61,16,0) 50%), radial-gradient(circle at 36% 72%, rgba(207,216,238,0.85) 0, rgba(207,216,238,0.5) 14%, rgba(207,216,238,0) 42%), radial-gradient(circle at 44% 30%, rgba(184,198,58,0.85) 0, rgba(184,198,58,0.5) 13%, rgba(184,198,58,0) 40%), #6f8226; }
html:root .card[data-sky="bokeh-meadow"][data-i="3"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 70% 16%, rgba(236,223,74,0.85) 0, rgba(236,223,74,0.5) 20%, rgba(236,223,74,0) 54%), radial-gradient(circle at 18% 46%, rgba(246,242,168,0.85) 0, rgba(246,242,168,0.5) 17%, rgba(246,242,168,0) 48%), radial-gradient(circle at 76% 82%, rgba(47,61,16,0.85) 0, rgba(47,61,16,0.5) 18%, rgba(47,61,16,0) 50%), radial-gradient(circle at 36% 72%, rgba(207,216,238,0.85) 0, rgba(207,216,238,0.5) 14%, rgba(207,216,238,0) 42%), radial-gradient(circle at 44% 30%, rgba(184,198,58,0.85) 0, rgba(184,198,58,0.5) 13%, rgba(184,198,58,0) 40%), #6f8226; }
html[data-skies="bokeh-meadow"] .card[data-i="4"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 22% 22%, rgba(236,223,74,0.85) 0, rgba(236,223,74,0.5) 20%, rgba(236,223,74,0) 54%), radial-gradient(circle at 84% 30%, rgba(246,242,168,0.85) 0, rgba(246,242,168,0.5) 15%, rgba(246,242,168,0) 44%), radial-gradient(circle at 26% 78%, rgba(47,61,16,0.85) 0, rgba(47,61,16,0.5) 17%, rgba(47,61,16,0) 48%), radial-gradient(circle at 72% 66%, rgba(207,216,238,0.85) 0, rgba(207,216,238,0.5) 20%, rgba(207,216,238,0) 54%), radial-gradient(circle at 54% 46%, rgba(184,198,58,0.85) 0, rgba(184,198,58,0.5) 12%, rgba(184,198,58,0) 38%), #6f8226; }
html:root .card[data-sky="bokeh-meadow"][data-i="4"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 22% 22%, rgba(236,223,74,0.85) 0, rgba(236,223,74,0.5) 20%, rgba(236,223,74,0) 54%), radial-gradient(circle at 84% 30%, rgba(246,242,168,0.85) 0, rgba(246,242,168,0.5) 15%, rgba(246,242,168,0) 44%), radial-gradient(circle at 26% 78%, rgba(47,61,16,0.85) 0, rgba(47,61,16,0.5) 17%, rgba(47,61,16,0) 48%), radial-gradient(circle at 72% 66%, rgba(207,216,238,0.85) 0, rgba(207,216,238,0.5) 20%, rgba(207,216,238,0) 54%), radial-gradient(circle at 54% 46%, rgba(184,198,58,0.85) 0, rgba(184,198,58,0.5) 12%, rgba(184,198,58,0) 38%), #6f8226; }
html[data-skies="bokeh-dusk"] .card[data-i="0"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 20% 24%, rgba(255,153,206,0.85) 0, rgba(255,153,206,0.5) 19%, rgba(255,153,206,0) 52%), radial-gradient(circle at 78% 18%, rgba(154,106,208,0.85) 0, rgba(154,106,208,0.5) 15%, rgba(154,106,208,0) 44%), radial-gradient(circle at 64% 70%, rgba(255,213,194,0.85) 0, rgba(255,213,194,0.5) 21%, rgba(255,213,194,0) 56%), radial-gradient(circle at 18% 80%, rgba(47,47,138,0.85) 0, rgba(47,47,138,0.5) 15%, rgba(47,47,138,0) 44%), radial-gradient(circle at 50% 48%, rgba(199,128,230,0.85) 0, rgba(199,128,230,0.5) 13%, rgba(199,128,230,0) 40%), #5148c4; }
html:root .card[data-sky="bokeh-dusk"][data-i="0"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 20% 24%, rgba(255,153,206,0.85) 0, rgba(255,153,206,0.5) 19%, rgba(255,153,206,0) 52%), radial-gradient(circle at 78% 18%, rgba(154,106,208,0.85) 0, rgba(154,106,208,0.5) 15%, rgba(154,106,208,0) 44%), radial-gradient(circle at 64% 70%, rgba(255,213,194,0.85) 0, rgba(255,213,194,0.5) 21%, rgba(255,213,194,0) 56%), radial-gradient(circle at 18% 80%, rgba(47,47,138,0.85) 0, rgba(47,47,138,0.5) 15%, rgba(47,47,138,0) 44%), radial-gradient(circle at 50% 48%, rgba(199,128,230,0.85) 0, rgba(199,128,230,0.5) 13%, rgba(199,128,230,0) 40%), #5148c4; }
html[data-skies="bokeh-dusk"] .card[data-i="1"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 75% 22%, rgba(255,153,206,0.85) 0, rgba(255,153,206,0.5) 18%, rgba(255,153,206,0) 50%), radial-gradient(circle at 22% 32%, rgba(154,106,208,0.85) 0, rgba(154,106,208,0.5) 16%, rgba(154,106,208,0) 46%), radial-gradient(circle at 30% 82%, rgba(255,213,194,0.85) 0, rgba(255,213,194,0.5) 20%, rgba(255,213,194,0) 54%), radial-gradient(circle at 82% 74%, rgba(47,47,138,0.85) 0, rgba(47,47,138,0.5) 15%, rgba(47,47,138,0) 44%), radial-gradient(circle at 52% 54%, rgba(199,128,230,0.85) 0, rgba(199,128,230,0.5) 12%, rgba(199,128,230,0) 38%), #5148c4; }
html:root .card[data-sky="bokeh-dusk"][data-i="1"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 75% 22%, rgba(255,153,206,0.85) 0, rgba(255,153,206,0.5) 18%, rgba(255,153,206,0) 50%), radial-gradient(circle at 22% 32%, rgba(154,106,208,0.85) 0, rgba(154,106,208,0.5) 16%, rgba(154,106,208,0) 46%), radial-gradient(circle at 30% 82%, rgba(255,213,194,0.85) 0, rgba(255,213,194,0.5) 20%, rgba(255,213,194,0) 54%), radial-gradient(circle at 82% 74%, rgba(47,47,138,0.85) 0, rgba(47,47,138,0.5) 15%, rgba(47,47,138,0) 44%), radial-gradient(circle at 52% 54%, rgba(199,128,230,0.85) 0, rgba(199,128,230,0.5) 12%, rgba(199,128,230,0) 38%), #5148c4; }
html[data-skies="bokeh-dusk"] .card[data-i="2"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 28% 18%, rgba(255,153,206,0.85) 0, rgba(255,153,206,0.5) 17%, rgba(255,153,206,0) 48%), radial-gradient(circle at 80% 40%, rgba(154,106,208,0.85) 0, rgba(154,106,208,0.5) 20%, rgba(154,106,208,0) 54%), radial-gradient(circle at 50% 84%, rgba(255,213,194,0.85) 0, rgba(255,213,194,0.5) 17%, rgba(255,213,194,0) 48%), radial-gradient(circle at 14% 60%, rgba(47,47,138,0.85) 0, rgba(47,47,138,0.5) 14%, rgba(47,47,138,0) 42%), radial-gradient(circle at 60% 28%, rgba(199,128,230,0.85) 0, rgba(199,128,230,0.5) 12%, rgba(199,128,230,0) 38%), #5148c4; }
html:root .card[data-sky="bokeh-dusk"][data-i="2"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 28% 18%, rgba(255,153,206,0.85) 0, rgba(255,153,206,0.5) 17%, rgba(255,153,206,0) 48%), radial-gradient(circle at 80% 40%, rgba(154,106,208,0.85) 0, rgba(154,106,208,0.5) 20%, rgba(154,106,208,0) 54%), radial-gradient(circle at 50% 84%, rgba(255,213,194,0.85) 0, rgba(255,213,194,0.5) 17%, rgba(255,213,194,0) 48%), radial-gradient(circle at 14% 60%, rgba(47,47,138,0.85) 0, rgba(47,47,138,0.5) 14%, rgba(47,47,138,0) 42%), radial-gradient(circle at 60% 28%, rgba(199,128,230,0.85) 0, rgba(199,128,230,0.5) 12%, rgba(199,128,230,0) 38%), #5148c4; }
html[data-skies="bokeh-dusk"] .card[data-i="3"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 70% 16%, rgba(255,153,206,0.85) 0, rgba(255,153,206,0.5) 20%, rgba(255,153,206,0) 54%), radial-gradient(circle at 18% 46%, rgba(154,106,208,0.85) 0, rgba(154,106,208,0.5) 17%, rgba(154,106,208,0) 48%), radial-gradient(circle at 76% 82%, rgba(255,213,194,0.85) 0, rgba(255,213,194,0.5) 18%, rgba(255,213,194,0) 50%), radial-gradient(circle at 36% 72%, rgba(47,47,138,0.85) 0, rgba(47,47,138,0.5) 14%, rgba(47,47,138,0) 42%), radial-gradient(circle at 44% 30%, rgba(199,128,230,0.85) 0, rgba(199,128,230,0.5) 13%, rgba(199,128,230,0) 40%), #5148c4; }
html:root .card[data-sky="bokeh-dusk"][data-i="3"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 70% 16%, rgba(255,153,206,0.85) 0, rgba(255,153,206,0.5) 20%, rgba(255,153,206,0) 54%), radial-gradient(circle at 18% 46%, rgba(154,106,208,0.85) 0, rgba(154,106,208,0.5) 17%, rgba(154,106,208,0) 48%), radial-gradient(circle at 76% 82%, rgba(255,213,194,0.85) 0, rgba(255,213,194,0.5) 18%, rgba(255,213,194,0) 50%), radial-gradient(circle at 36% 72%, rgba(47,47,138,0.85) 0, rgba(47,47,138,0.5) 14%, rgba(47,47,138,0) 42%), radial-gradient(circle at 44% 30%, rgba(199,128,230,0.85) 0, rgba(199,128,230,0.5) 13%, rgba(199,128,230,0) 40%), #5148c4; }
html[data-skies="bokeh-dusk"] .card[data-i="4"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 22% 22%, rgba(255,153,206,0.85) 0, rgba(255,153,206,0.5) 20%, rgba(255,153,206,0) 54%), radial-gradient(circle at 84% 30%, rgba(154,106,208,0.85) 0, rgba(154,106,208,0.5) 15%, rgba(154,106,208,0) 44%), radial-gradient(circle at 26% 78%, rgba(255,213,194,0.85) 0, rgba(255,213,194,0.5) 17%, rgba(255,213,194,0) 48%), radial-gradient(circle at 72% 66%, rgba(47,47,138,0.85) 0, rgba(47,47,138,0.5) 20%, rgba(47,47,138,0) 54%), radial-gradient(circle at 54% 46%, rgba(199,128,230,0.85) 0, rgba(199,128,230,0.5) 12%, rgba(199,128,230,0) 38%), #5148c4; }
html:root .card[data-sky="bokeh-dusk"][data-i="4"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 22% 22%, rgba(255,153,206,0.85) 0, rgba(255,153,206,0.5) 20%, rgba(255,153,206,0) 54%), radial-gradient(circle at 84% 30%, rgba(154,106,208,0.85) 0, rgba(154,106,208,0.5) 15%, rgba(154,106,208,0) 44%), radial-gradient(circle at 26% 78%, rgba(255,213,194,0.85) 0, rgba(255,213,194,0.5) 17%, rgba(255,213,194,0) 48%), radial-gradient(circle at 72% 66%, rgba(47,47,138,0.85) 0, rgba(47,47,138,0.5) 20%, rgba(47,47,138,0) 54%), radial-gradient(circle at 54% 46%, rgba(199,128,230,0.85) 0, rgba(199,128,230,0.5) 12%, rgba(199,128,230,0) 38%), #5148c4; }
html[data-skies="bokeh-warm"] .card[data-i="0"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 20% 24%, rgba(255,181,110,0.85) 0, rgba(255,181,110,0.5) 19%, rgba(255,181,110,0) 52%), radial-gradient(circle at 78% 18%, rgba(255,138,160,0.85) 0, rgba(255,138,160,0.5) 15%, rgba(255,138,160,0) 44%), radial-gradient(circle at 64% 70%, rgba(255,224,176,0.85) 0, rgba(255,224,176,0.5) 21%, rgba(255,224,176,0) 56%), radial-gradient(circle at 18% 80%, rgba(138,47,85,0.85) 0, rgba(138,47,85,0.5) 15%, rgba(138,47,85,0) 44%), radial-gradient(circle at 50% 48%, rgba(255,210,122,0.85) 0, rgba(255,210,122,0.5) 13%, rgba(255,210,122,0) 40%), #d9552f; }
html:root .card[data-sky="bokeh-warm"][data-i="0"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 20% 24%, rgba(255,181,110,0.85) 0, rgba(255,181,110,0.5) 19%, rgba(255,181,110,0) 52%), radial-gradient(circle at 78% 18%, rgba(255,138,160,0.85) 0, rgba(255,138,160,0.5) 15%, rgba(255,138,160,0) 44%), radial-gradient(circle at 64% 70%, rgba(255,224,176,0.85) 0, rgba(255,224,176,0.5) 21%, rgba(255,224,176,0) 56%), radial-gradient(circle at 18% 80%, rgba(138,47,85,0.85) 0, rgba(138,47,85,0.5) 15%, rgba(138,47,85,0) 44%), radial-gradient(circle at 50% 48%, rgba(255,210,122,0.85) 0, rgba(255,210,122,0.5) 13%, rgba(255,210,122,0) 40%), #d9552f; }
html[data-skies="bokeh-warm"] .card[data-i="1"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 75% 22%, rgba(255,181,110,0.85) 0, rgba(255,181,110,0.5) 18%, rgba(255,181,110,0) 50%), radial-gradient(circle at 22% 32%, rgba(255,138,160,0.85) 0, rgba(255,138,160,0.5) 16%, rgba(255,138,160,0) 46%), radial-gradient(circle at 30% 82%, rgba(255,224,176,0.85) 0, rgba(255,224,176,0.5) 20%, rgba(255,224,176,0) 54%), radial-gradient(circle at 82% 74%, rgba(138,47,85,0.85) 0, rgba(138,47,85,0.5) 15%, rgba(138,47,85,0) 44%), radial-gradient(circle at 52% 54%, rgba(255,210,122,0.85) 0, rgba(255,210,122,0.5) 12%, rgba(255,210,122,0) 38%), #d9552f; }
html:root .card[data-sky="bokeh-warm"][data-i="1"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 75% 22%, rgba(255,181,110,0.85) 0, rgba(255,181,110,0.5) 18%, rgba(255,181,110,0) 50%), radial-gradient(circle at 22% 32%, rgba(255,138,160,0.85) 0, rgba(255,138,160,0.5) 16%, rgba(255,138,160,0) 46%), radial-gradient(circle at 30% 82%, rgba(255,224,176,0.85) 0, rgba(255,224,176,0.5) 20%, rgba(255,224,176,0) 54%), radial-gradient(circle at 82% 74%, rgba(138,47,85,0.85) 0, rgba(138,47,85,0.5) 15%, rgba(138,47,85,0) 44%), radial-gradient(circle at 52% 54%, rgba(255,210,122,0.85) 0, rgba(255,210,122,0.5) 12%, rgba(255,210,122,0) 38%), #d9552f; }
html[data-skies="bokeh-warm"] .card[data-i="2"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 28% 18%, rgba(255,181,110,0.85) 0, rgba(255,181,110,0.5) 17%, rgba(255,181,110,0) 48%), radial-gradient(circle at 80% 40%, rgba(255,138,160,0.85) 0, rgba(255,138,160,0.5) 20%, rgba(255,138,160,0) 54%), radial-gradient(circle at 50% 84%, rgba(255,224,176,0.85) 0, rgba(255,224,176,0.5) 17%, rgba(255,224,176,0) 48%), radial-gradient(circle at 14% 60%, rgba(138,47,85,0.85) 0, rgba(138,47,85,0.5) 14%, rgba(138,47,85,0) 42%), radial-gradient(circle at 60% 28%, rgba(255,210,122,0.85) 0, rgba(255,210,122,0.5) 12%, rgba(255,210,122,0) 38%), #d9552f; }
html:root .card[data-sky="bokeh-warm"][data-i="2"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 28% 18%, rgba(255,181,110,0.85) 0, rgba(255,181,110,0.5) 17%, rgba(255,181,110,0) 48%), radial-gradient(circle at 80% 40%, rgba(255,138,160,0.85) 0, rgba(255,138,160,0.5) 20%, rgba(255,138,160,0) 54%), radial-gradient(circle at 50% 84%, rgba(255,224,176,0.85) 0, rgba(255,224,176,0.5) 17%, rgba(255,224,176,0) 48%), radial-gradient(circle at 14% 60%, rgba(138,47,85,0.85) 0, rgba(138,47,85,0.5) 14%, rgba(138,47,85,0) 42%), radial-gradient(circle at 60% 28%, rgba(255,210,122,0.85) 0, rgba(255,210,122,0.5) 12%, rgba(255,210,122,0) 38%), #d9552f; }
html[data-skies="bokeh-warm"] .card[data-i="3"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 70% 16%, rgba(255,181,110,0.85) 0, rgba(255,181,110,0.5) 20%, rgba(255,181,110,0) 54%), radial-gradient(circle at 18% 46%, rgba(255,138,160,0.85) 0, rgba(255,138,160,0.5) 17%, rgba(255,138,160,0) 48%), radial-gradient(circle at 76% 82%, rgba(255,224,176,0.85) 0, rgba(255,224,176,0.5) 18%, rgba(255,224,176,0) 50%), radial-gradient(circle at 36% 72%, rgba(138,47,85,0.85) 0, rgba(138,47,85,0.5) 14%, rgba(138,47,85,0) 42%), radial-gradient(circle at 44% 30%, rgba(255,210,122,0.85) 0, rgba(255,210,122,0.5) 13%, rgba(255,210,122,0) 40%), #d9552f; }
html:root .card[data-sky="bokeh-warm"][data-i="3"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 70% 16%, rgba(255,181,110,0.85) 0, rgba(255,181,110,0.5) 20%, rgba(255,181,110,0) 54%), radial-gradient(circle at 18% 46%, rgba(255,138,160,0.85) 0, rgba(255,138,160,0.5) 17%, rgba(255,138,160,0) 48%), radial-gradient(circle at 76% 82%, rgba(255,224,176,0.85) 0, rgba(255,224,176,0.5) 18%, rgba(255,224,176,0) 50%), radial-gradient(circle at 36% 72%, rgba(138,47,85,0.85) 0, rgba(138,47,85,0.5) 14%, rgba(138,47,85,0) 42%), radial-gradient(circle at 44% 30%, rgba(255,210,122,0.85) 0, rgba(255,210,122,0.5) 13%, rgba(255,210,122,0) 40%), #d9552f; }
html[data-skies="bokeh-warm"] .card[data-i="4"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 22% 22%, rgba(255,181,110,0.85) 0, rgba(255,181,110,0.5) 20%, rgba(255,181,110,0) 54%), radial-gradient(circle at 84% 30%, rgba(255,138,160,0.85) 0, rgba(255,138,160,0.5) 15%, rgba(255,138,160,0) 44%), radial-gradient(circle at 26% 78%, rgba(255,224,176,0.85) 0, rgba(255,224,176,0.5) 17%, rgba(255,224,176,0) 48%), radial-gradient(circle at 72% 66%, rgba(138,47,85,0.85) 0, rgba(138,47,85,0.5) 20%, rgba(138,47,85,0) 54%), radial-gradient(circle at 54% 46%, rgba(255,210,122,0.85) 0, rgba(255,210,122,0.5) 12%, rgba(255,210,122,0) 38%), #d9552f; }
html:root .card[data-sky="bokeh-warm"][data-i="4"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 22% 22%, rgba(255,181,110,0.85) 0, rgba(255,181,110,0.5) 20%, rgba(255,181,110,0) 54%), radial-gradient(circle at 84% 30%, rgba(255,138,160,0.85) 0, rgba(255,138,160,0.5) 15%, rgba(255,138,160,0) 44%), radial-gradient(circle at 26% 78%, rgba(255,224,176,0.85) 0, rgba(255,224,176,0.5) 17%, rgba(255,224,176,0) 48%), radial-gradient(circle at 72% 66%, rgba(138,47,85,0.85) 0, rgba(138,47,85,0.5) 20%, rgba(138,47,85,0) 54%), radial-gradient(circle at 54% 46%, rgba(255,210,122,0.85) 0, rgba(255,210,122,0.5) 12%, rgba(255,210,122,0) 38%), #d9552f; }
html[data-skies="bokeh-sky"] .card[data-i="0"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 20% 24%, rgba(125,201,244,0.85) 0, rgba(125,201,244,0.5) 19%, rgba(125,201,244,0) 52%), radial-gradient(circle at 78% 18%, rgba(216,240,252,0.85) 0, rgba(216,240,252,0.5) 15%, rgba(216,240,252,0) 44%), radial-gradient(circle at 64% 70%, rgba(23,55,154,0.85) 0, rgba(23,55,154,0.5) 21%, rgba(23,55,154,0) 56%), radial-gradient(circle at 18% 80%, rgba(255,196,138,0.85) 0, rgba(255,196,138,0.5) 15%, rgba(255,196,138,0) 44%), radial-gradient(circle at 50% 48%, rgba(165,140,240,0.85) 0, rgba(165,140,240,0.5) 13%, rgba(165,140,240,0) 40%), #2f6fe0; }
html:root .card[data-sky="bokeh-sky"][data-i="0"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 20% 24%, rgba(125,201,244,0.85) 0, rgba(125,201,244,0.5) 19%, rgba(125,201,244,0) 52%), radial-gradient(circle at 78% 18%, rgba(216,240,252,0.85) 0, rgba(216,240,252,0.5) 15%, rgba(216,240,252,0) 44%), radial-gradient(circle at 64% 70%, rgba(23,55,154,0.85) 0, rgba(23,55,154,0.5) 21%, rgba(23,55,154,0) 56%), radial-gradient(circle at 18% 80%, rgba(255,196,138,0.85) 0, rgba(255,196,138,0.5) 15%, rgba(255,196,138,0) 44%), radial-gradient(circle at 50% 48%, rgba(165,140,240,0.85) 0, rgba(165,140,240,0.5) 13%, rgba(165,140,240,0) 40%), #2f6fe0; }
html[data-skies="bokeh-sky"] .card[data-i="1"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 75% 22%, rgba(125,201,244,0.85) 0, rgba(125,201,244,0.5) 18%, rgba(125,201,244,0) 50%), radial-gradient(circle at 22% 32%, rgba(216,240,252,0.85) 0, rgba(216,240,252,0.5) 16%, rgba(216,240,252,0) 46%), radial-gradient(circle at 30% 82%, rgba(23,55,154,0.85) 0, rgba(23,55,154,0.5) 20%, rgba(23,55,154,0) 54%), radial-gradient(circle at 82% 74%, rgba(255,196,138,0.85) 0, rgba(255,196,138,0.5) 15%, rgba(255,196,138,0) 44%), radial-gradient(circle at 52% 54%, rgba(165,140,240,0.85) 0, rgba(165,140,240,0.5) 12%, rgba(165,140,240,0) 38%), #2f6fe0; }
html:root .card[data-sky="bokeh-sky"][data-i="1"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 75% 22%, rgba(125,201,244,0.85) 0, rgba(125,201,244,0.5) 18%, rgba(125,201,244,0) 50%), radial-gradient(circle at 22% 32%, rgba(216,240,252,0.85) 0, rgba(216,240,252,0.5) 16%, rgba(216,240,252,0) 46%), radial-gradient(circle at 30% 82%, rgba(23,55,154,0.85) 0, rgba(23,55,154,0.5) 20%, rgba(23,55,154,0) 54%), radial-gradient(circle at 82% 74%, rgba(255,196,138,0.85) 0, rgba(255,196,138,0.5) 15%, rgba(255,196,138,0) 44%), radial-gradient(circle at 52% 54%, rgba(165,140,240,0.85) 0, rgba(165,140,240,0.5) 12%, rgba(165,140,240,0) 38%), #2f6fe0; }
html[data-skies="bokeh-sky"] .card[data-i="2"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 28% 18%, rgba(125,201,244,0.85) 0, rgba(125,201,244,0.5) 17%, rgba(125,201,244,0) 48%), radial-gradient(circle at 80% 40%, rgba(216,240,252,0.85) 0, rgba(216,240,252,0.5) 20%, rgba(216,240,252,0) 54%), radial-gradient(circle at 50% 84%, rgba(23,55,154,0.85) 0, rgba(23,55,154,0.5) 17%, rgba(23,55,154,0) 48%), radial-gradient(circle at 14% 60%, rgba(255,196,138,0.85) 0, rgba(255,196,138,0.5) 14%, rgba(255,196,138,0) 42%), radial-gradient(circle at 60% 28%, rgba(165,140,240,0.85) 0, rgba(165,140,240,0.5) 12%, rgba(165,140,240,0) 38%), #2f6fe0; }
html:root .card[data-sky="bokeh-sky"][data-i="2"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 28% 18%, rgba(125,201,244,0.85) 0, rgba(125,201,244,0.5) 17%, rgba(125,201,244,0) 48%), radial-gradient(circle at 80% 40%, rgba(216,240,252,0.85) 0, rgba(216,240,252,0.5) 20%, rgba(216,240,252,0) 54%), radial-gradient(circle at 50% 84%, rgba(23,55,154,0.85) 0, rgba(23,55,154,0.5) 17%, rgba(23,55,154,0) 48%), radial-gradient(circle at 14% 60%, rgba(255,196,138,0.85) 0, rgba(255,196,138,0.5) 14%, rgba(255,196,138,0) 42%), radial-gradient(circle at 60% 28%, rgba(165,140,240,0.85) 0, rgba(165,140,240,0.5) 12%, rgba(165,140,240,0) 38%), #2f6fe0; }
html[data-skies="bokeh-sky"] .card[data-i="3"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 70% 16%, rgba(125,201,244,0.85) 0, rgba(125,201,244,0.5) 20%, rgba(125,201,244,0) 54%), radial-gradient(circle at 18% 46%, rgba(216,240,252,0.85) 0, rgba(216,240,252,0.5) 17%, rgba(216,240,252,0) 48%), radial-gradient(circle at 76% 82%, rgba(23,55,154,0.85) 0, rgba(23,55,154,0.5) 18%, rgba(23,55,154,0) 50%), radial-gradient(circle at 36% 72%, rgba(255,196,138,0.85) 0, rgba(255,196,138,0.5) 14%, rgba(255,196,138,0) 42%), radial-gradient(circle at 44% 30%, rgba(165,140,240,0.85) 0, rgba(165,140,240,0.5) 13%, rgba(165,140,240,0) 40%), #2f6fe0; }
html:root .card[data-sky="bokeh-sky"][data-i="3"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 70% 16%, rgba(125,201,244,0.85) 0, rgba(125,201,244,0.5) 20%, rgba(125,201,244,0) 54%), radial-gradient(circle at 18% 46%, rgba(216,240,252,0.85) 0, rgba(216,240,252,0.5) 17%, rgba(216,240,252,0) 48%), radial-gradient(circle at 76% 82%, rgba(23,55,154,0.85) 0, rgba(23,55,154,0.5) 18%, rgba(23,55,154,0) 50%), radial-gradient(circle at 36% 72%, rgba(255,196,138,0.85) 0, rgba(255,196,138,0.5) 14%, rgba(255,196,138,0) 42%), radial-gradient(circle at 44% 30%, rgba(165,140,240,0.85) 0, rgba(165,140,240,0.5) 13%, rgba(165,140,240,0) 40%), #2f6fe0; }
html[data-skies="bokeh-sky"] .card[data-i="4"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 22% 22%, rgba(125,201,244,0.85) 0, rgba(125,201,244,0.5) 20%, rgba(125,201,244,0) 54%), radial-gradient(circle at 84% 30%, rgba(216,240,252,0.85) 0, rgba(216,240,252,0.5) 15%, rgba(216,240,252,0) 44%), radial-gradient(circle at 26% 78%, rgba(23,55,154,0.85) 0, rgba(23,55,154,0.5) 17%, rgba(23,55,154,0) 48%), radial-gradient(circle at 72% 66%, rgba(255,196,138,0.85) 0, rgba(255,196,138,0.5) 20%, rgba(255,196,138,0) 54%), radial-gradient(circle at 54% 46%, rgba(165,140,240,0.85) 0, rgba(165,140,240,0.5) 12%, rgba(165,140,240,0) 38%), #2f6fe0; }
html:root .card[data-sky="bokeh-sky"][data-i="4"] { --g: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, radial-gradient(circle at 22% 22%, rgba(125,201,244,0.85) 0, rgba(125,201,244,0.5) 20%, rgba(125,201,244,0) 54%), radial-gradient(circle at 84% 30%, rgba(216,240,252,0.85) 0, rgba(216,240,252,0.5) 15%, rgba(216,240,252,0) 44%), radial-gradient(circle at 26% 78%, rgba(23,55,154,0.85) 0, rgba(23,55,154,0.5) 17%, rgba(23,55,154,0) 48%), radial-gradient(circle at 72% 66%, rgba(255,196,138,0.85) 0, rgba(255,196,138,0.5) 20%, rgba(255,196,138,0) 54%), radial-gradient(circle at 54% 46%, rgba(165,140,240,0.85) 0, rgba(165,140,240,0.5) 12%, rgba(165,140,240,0) 38%), #2f6fe0; }
/* Bokeh · Each different: the colours of A (Each different), one bokeh + grain per card. Default. */
/* ---------- phones: nav lives behind a hamburger ---------- */
.mast-menu { display: none; }
@media (max-width: 640px) {
.masthead { position: relative; flex-wrap: nowrap; }
.mast-menu { display: grid; align-content: center; justify-items: center; gap: 6px; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink, #111); cursor: pointer; }
.mast-menu span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease; }
.mast-menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.mast-menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mast-nav { display: none; position: absolute; top: 100%; right: 0; z-index: 20; flex-direction: column; gap: 0; min-width: 180px; padding: 8px; border-radius: 14px; background: var(--paper, #fff); box-shadow: 0 8px 28px rgba(0, 0, 0, .14); }
.mast-nav.is-open { display: flex; }
.mast-nav a { padding: 10px 12px; border-radius: 8px; }
}
/* phones: the "About me" title comes first, then the photo, then the blurb */
@media (max-width: 760px) {
.about-body { row-gap: 0; }
.about-text { display: contents; }
.about-text .about-title { order: 1; margin-bottom: 20px; }
.about-portrait { order: 2; margin-bottom: 24px; }
.about-text > p { order: 3; margin: 0 0 14px; }
}
/* phones: Tangents links sit in one row, no arrows */
@media (max-width: 760px) {
.offscreen-links { display: flex; flex-wrap: nowrap; gap: 20px; }
.offscreen-links li > a > span { display: none; }
.offscreen-head { margin-bottom: 24px; }
}