/* ========================================================================= Alina Shults — portfolio Monochrome, Aino-style: monospace character grid, ABC Diatype (+ Mono), light + dark. No colour — hierarchy from weight, mono/grotesk contrast, space, and hairline rules. ========================================================================= */ /* ---- Fonts ------------------------------------------------------------- ABC Diatype / ABC Diatype Mono are licensed (ABC Dinamo). They are listed FIRST in the font stacks below, so the site uses them automatically once you license them. Until then it renders Geist / Geist Mono (the closest free twins, loaded from Google Fonts in the ). TO ENABLE THE REAL DIATYPE: license a web kit from dinamotypefaces.com (or grab the free trial for local testing), drop the .woff2 files into /assets/fonts/, and uncomment the two @font-face blocks below. @font-face{ font-family:"ABC Diatype"; font-style:normal; font-weight:100 800; font-display:swap; src:url("/assets/fonts/ABCDiatypeVariable.woff2") format("woff2"); } @font-face{ font-family:"ABC Diatype Mono"; font-style:normal; font-weight:400 500; font-display:swap; src:url("/assets/fonts/ABCDiatypeMono.woff2") format("woff2"); } ------------------------------------------------------------------------- */ :root{ /* palette — light (default) */ --paper:#F1F3FF; /* Pantone 11-0102 TSX "Marshmallow Crème" */ --ink:#15140F; --ink-2:#6F6B62; --rule:#D9DBE6; /* cool, tuned to the Marshmallow-Crème paper */ --field:#E7E9F2; --accent:var(--ink); /* MONOCHROME: the "accent" is just ink */ /* type */ --sans:"ABC Diatype","Geist","Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --mono:"ABC Diatype Mono","Geist Mono","Space Mono",ui-monospace,SFMono-Regular,monospace; --fs-display:clamp(2.8rem,7.4vw,6.8rem); --fs-h1:clamp(2.1rem,4.6vw,3.6rem); --fs-h2:clamp(1.6rem,3.4vw,2.6rem); --fs-h3:clamp(1.15rem,1.9vw,1.5rem); --fs-lead:clamp(1.15rem,1.7vw,1.45rem); --fs-body:1.0625rem; --fs-small:0.875rem; --fs-mono:0.78rem; /* layout */ --maxw:1280px; --pad:clamp(1.25rem,5vw,6rem); --gutter:1.5rem; /* vertical rhythm */ --flow:clamp(1rem,2.5vw,1.75rem); --flow-tight:.5rem; /* motion */ --dur-fast:180ms; --dur:340ms; --ease:cubic-bezier(.2,0,0,1); color-scheme:light; } @media (prefers-color-scheme:dark){ :root:not([data-theme]){ --paper:#121110; --ink:#F1EFE8; --ink-2:#8D887D; --rule:#2C2A26; --field:#1C1B18; color-scheme:dark; } } :root[data-theme="dark"]{ --paper:#121110; --ink:#F1EFE8; --ink-2:#8D887D; --rule:#2C2A26; --field:#1C1B18; color-scheme:dark; } /* ---- Reset ------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:var(--fs-body); line-height:1.55; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:"ss01","cv01"; transition:background var(--dur) var(--ease),color var(--dur) var(--ease); } img,svg{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:underline;text-decoration-color:var(--ink-2);text-decoration-thickness:1px;text-underline-offset:.16em;transition:text-decoration-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)} a:hover{text-decoration-color:var(--ink)} .skip-link,.wordmark,.nav a,.btn,.work-row,.volunteer a{text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--ink);color:var(--paper)} ::-moz-selection{background:var(--ink);color:var(--paper)} /* ---- Helpers ----------------------------------------------------------- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .mono{font-family:var(--mono)} .label{ font-family:var(--mono);font-size:var(--fs-mono); text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2); font-weight:400; } .rule-dashed{border:0;border-top:1px dashed var(--rule)} .rule{border:0;border-top:1px solid var(--rule)} .skip-link{ position:absolute;left:8px;top:-48px;background:var(--ink);color:var(--paper); padding:8px 14px;border-radius:4px;font-family:var(--mono);font-size:.8rem;z-index:50; transition:top var(--dur-fast) var(--ease); } .skip-link:focus{top:8px} :where(a,button,input,[tabindex]):focus-visible{ outline:2px solid var(--ink);outline-offset:3px;border-radius:2px; } /* ---- Header / nav ------------------------------------------------------ */ .site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)} .site-header__row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px} .clock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--ink-2);pointer-events:none} @media (max-width:760px){.clock{display:none}} .wordmark{font-size:1.05rem;font-weight:600;letter-spacing:-.02em} .nav{display:flex;align-items:center;gap:1.4rem} .nav a{ font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em; color:var(--ink-2);padding:4px 0;border-bottom:1.5px solid transparent;transition:color var(--dur-fast) var(--ease)} .nav a:hover{color:var(--ink)} .nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)} .theme-toggle{ font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em; color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule); padding:6px 10px;border-radius:4px;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)} .theme-toggle:hover{color:var(--ink);border-color:var(--ink-2)} .phyllo-mark{flex:0 0 auto;display:inline-flex;width:32px;height:32px;padding:0;border:0;line-height:0;align-self:center;cursor:pointer} .phyllo-mark canvas{display:block;pointer-events:none} @media (max-width:760px){.phyllo-mark{display:none}} .nav-toggle{display:none} @media (max-width:760px){ .nav-toggle{display:inline-flex;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--rule);padding:6px 10px;border-radius:4px} .nav{position:absolute;left:0;right:0;top:64px;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border-bottom:1px solid var(--rule);padding:.5rem var(--pad) 1rem;display:none} .nav.is-open{display:flex} .nav a{padding:12px 0;font-size:.85rem;width:100%} } /* ---- Hero -------------------------------------------------------------- */ .hero{padding-block:clamp(3rem,9vw,7rem) clamp(2.5rem,6vw,4.5rem)} .hero__eyebrow{margin-bottom:1.4rem} .hero__title{ font-size:var(--fs-display);line-height:1.0;font-weight:600;letter-spacing:-.035em; max-width:17ch;text-wrap:balance} .hero__lead{margin-top:1.6rem;font-size:var(--fs-lead);line-height:1.45;color:var(--ink-2);max-width:56ch} .cursor{display:inline-block;width:.5em;height:1em;background:var(--accent);vertical-align:-.12em;margin-left:.35em;animation:blink 1.06s steps(1) infinite} @keyframes blink{50%{opacity:0}} @media (prefers-reduced-motion:reduce){.cursor{animation:none}} /* ---- Verbs ------------------------------------------------------------- */ .verbs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem; padding-block:1.8rem;border-block:1px dashed var(--rule)} .verb__idx{font-family:var(--mono);font-size:.78rem;color:var(--accent);margin-bottom:.6rem} .verb__name{font-size:1.05rem;font-weight:600;margin-bottom:.4rem} .verb__meta{font-family:var(--mono);font-size:.68rem;line-height:1.55;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)} @media (max-width:760px){.verbs{grid-template-columns:1fr 1fr;gap:1.6rem}} @media (max-width:440px){.verbs{grid-template-columns:1fr}} /* ---- Section heads ----------------------------------------------------- */ .section{padding-block:clamp(3rem,8vw,6rem)} .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.4rem} .sec-title{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.02em} /* ---- Work table -------------------------------------------------------- */ .worktable{margin-top:.5rem} .worktable__head,.work-row{display:grid;grid-template-columns:3.4ch 1fr 13ch 5ch;gap:1rem;align-items:baseline} .worktable__head{padding-bottom:.7rem;border-bottom:1px solid var(--rule)} .worktable__head span{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)} .work-row{padding-block:1rem;border-bottom:1px solid var(--rule);transition:padding-left var(--dur-fast) var(--ease)} .work-row:hover{padding-left:.4rem} .work-row__no{font-family:var(--mono);font-size:.85rem;color:var(--accent)} .work-row__title{font-size:1.1rem;font-weight:500;letter-spacing:-.01em} .work-row__type,.work-row__year{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)} .work-row__arrow{display:none} @media (max-width:680px){ .worktable__head{display:none} .work-row{grid-template-columns:3.4ch 1fr;row-gap:.35rem} .work-row__type{grid-column:2} .work-row__year{grid-column:1;grid-row:1;text-align:left} } /* ---- Proof strip ------------------------------------------------------- */ .proof{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding-block:1.4rem;border-top:1px dashed var(--rule)} .proof span{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)} /* ---- Prose / generic content ------------------------------------------ */ .prose{max-width:68ch} .prose p{margin-bottom:1.1rem} .prose a{border-bottom:1px solid var(--ink-2);transition:border-color var(--dur-fast) var(--ease)} .prose a:hover{border-color:var(--ink)} .lead{font-size:var(--fs-lead);line-height:1.45;color:var(--ink-2);max-width:60ch} /* lists used across pages */ .stack{display:flex;flex-direction:column} .list-rule > li{list-style:none;padding-block:1rem;border-top:1px solid var(--rule)} .list-rule > li:last-child{border-bottom:1px solid var(--rule)} .itemhead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap} .itemtitle{font-size:1.05rem;font-weight:500} .itemmeta{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)} .itemdesc{margin-top:.5rem;color:var(--ink-2);max-width:72ch} /* numbered (publications) */ .numbered{counter-reset:pub;display:flex;flex-direction:column} .numbered > li{list-style:none;display:grid;grid-template-columns:3.4ch 1fr;gap:1rem;padding-block:1.1rem;border-top:1px solid var(--rule)} .numbered > li::before{counter-increment:pub;content:counter(pub,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;color:var(--accent)} .numbered a{border-bottom:1px solid var(--ink-2)} .numbered a:hover{border-color:var(--ink)} /* two-column meta rows (education, awards, timeline) */ .rows{display:flex;flex-direction:column} .row2{display:grid;grid-template-columns:1fr;gap:.25rem;padding-block:1.1rem;border-top:1px solid var(--rule)} .row2 .when{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)} .row2 .what{font-weight:500} .row2 .where{color:var(--ink-2)} /* skills / distinct grids */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} @media (max-width:760px){.grid2,.grid3{grid-template-columns:1fr}} /* volunteering strip */ .volunteer{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:center;padding-top:1rem} .volunteer a{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);border-bottom:1px solid transparent;transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)} .volunteer a:hover{color:var(--ink);border-color:var(--ink)} /* media placeholder (until real images arrive) */ .plate{position:relative;border:1px solid var(--rule);background:var(--field);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden} .plate--portrait{max-width:380px;aspect-ratio:4/5} .plate img{width:100%;height:100%;object-fit:cover;display:block} .plate__tag{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)} .figcap{margin-top:.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-2)} .figcap a{color:var(--ink-2);border-bottom:1px solid transparent;transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)} .figcap a:hover{color:var(--ink);border-color:var(--ink)} .panelgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem} @media (max-width:760px){.panelgrid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.panelgrid{grid-template-columns:1fr}} .panelgrid img,.board img{width:100%;height:auto;display:block;border:1px solid var(--rule);filter:grayscale(1) contrast(1.03);cursor:zoom-in} @media (prefers-color-scheme:dark){:root:not([data-theme]) .panelgrid img,:root:not([data-theme]) .board img{filter:grayscale(1) contrast(1.03) brightness(.85)}} :root[data-theme="dark"] .panelgrid img,:root[data-theme="dark"] .board img{filter:grayscale(1) contrast(1.03) brightness(.85)} /* lightbox — click a panel to see the full colour version */ html.lb-open{overflow:hidden} .lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3.5rem);background:rgba(8,8,7,.92);cursor:zoom-out} .lightbox[hidden]{display:none} .lightbox__img{max-width:100%;max-height:100%;width:auto;height:auto;border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 60px rgba(0,0,0,.5)} .lightbox__close{position:absolute;top:14px;right:18px;width:40px;height:40px;font-size:30px;line-height:1;color:#fff;background:none;border:0;opacity:.85;cursor:pointer} .lightbox__close:hover{opacity:1} /* flipbook — page through the embedded brandbook */ .flip__stage{position:relative;border:1px solid var(--rule);background:var(--field);outline:none} .flip__stage:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .flip__page{display:block;width:100%;height:auto;user-select:none} .flip__btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.9;transition:opacity var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)} .flip__prev{left:10px} .flip__next{right:10px} .flip__btn:hover{opacity:1;border-color:var(--ink-2)} .flip__btn:disabled{opacity:.25;cursor:default} .flip__cap{display:flex;justify-content:space-between;gap:1rem;align-items:baseline} .flip__count{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} /* embedded video (16:9, same frame as .plate) */ .video{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--rule);background:var(--field);overflow:hidden} .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .video__btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:var(--field);cursor:pointer;display:block} .video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)} .video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:color-mix(in srgb,var(--paper) 80%,transparent);border:1px solid var(--rule);box-shadow:0 2px 14px rgba(0,0,0,.18);display:grid;place-items:center;transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)} .video__play::after{content:"";width:0;height:0;margin-left:3px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--ink)} .video__btn:hover .video__play,.video__btn:focus-visible .video__play{background:var(--paper);transform:translate(-50%,-50%) scale(1.07)} .video__btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px} /* Media placeholders — hidden until real assets arrive */ figure:has(.plate__tag){display:none} /* About intro — portrait beside bio; frame sized to the image (no crop) */ .about-lede{display:grid;gap:clamp(1.5rem,4vw,2.5rem);align-items:start} .about-lede .portrait{margin:0} .about-lede .portrait img{display:block;width:100%;height:auto;border:1px solid var(--rule)} @media (min-width:760px){ .about-lede{grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:clamp(2rem,5vw,4rem)} } /* ---- Footer ------------------------------------------------------------ */ .site-footer{border-top:1px solid var(--rule);margin-top:clamp(3rem,8vw,6rem)} .site-footer__row{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;justify-content:space-between;padding-block:2.5rem} /* qilin emblem in the footer's right corner, vertically centred with the text — masked to take the ink colour in both themes */ .site-footer__row::after{content:"";flex:0 0 auto;align-self:center;width:64px;height:64px;background:var(--ink);opacity:.85;-webkit-mask:url(../img/qilin.png) center/contain no-repeat;mask:url(../img/qilin.png) center/contain no-repeat} .foot-links{display:flex;flex-wrap:wrap;gap:1rem 1.4rem} .foot-links a{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);border-bottom:1px solid transparent} .foot-links a:hover{color:var(--ink);border-bottom-color:var(--ink)} .colophon{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--ink-2);max-width:42ch;line-height:1.6} /* ---- Reveal (gated on .js so no-JS visitors always see content) -------- */ .js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)} .js [data-reveal].is-visible{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}} /* ---- Inner-page two-column (sidehead) layout --------------------------- */ @media (min-width:880px){ html:not([data-page="home"]) main .section:has(.sec-head){ display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr); column-gap:clamp(2rem,5vw,5rem);align-items:start; } html:not([data-page="home"]) main .section:has(.sec-head) > .sec-head{ grid-column:1;flex-direction:column;align-items:flex-start;gap:.5rem;margin-bottom:0; position:sticky;top:84px; } html:not([data-page="home"]) main .section:has(.sec-head) > :not(.sec-head){grid-column:2} } /* ---- Vertical rhythm (gap-based flow) -------------------------------- */ html:not([data-page="home"]) main .section{display:flex;flex-direction:column;gap:var(--flow)} .proj-body,.proj-desc{display:flex;flex-direction:column;gap:var(--flow)} .proj-body > .itemmeta + .itemmeta,.proj-desc > .itemmeta + .itemmeta{margin-top:calc(var(--flow-tight) - var(--flow))} /* ---- Places map (home) ------------------------------------------------- */ .placemap-wrap{margin-top:.5rem} #placemap{width:100%;height:auto;display:block;border:1px solid var(--rule);background:transparent} #placemap .graticule{stroke:var(--rule);stroke-width:.5;fill:none} #placemap .frame{stroke:var(--rule);stroke-width:1;fill:none} #placemap .land{fill:var(--ink);fill-opacity:.06;stroke:var(--ink);stroke-opacity:.16;stroke-width:.4;vector-effect:non-scaling-stroke} #placemap .pt{cursor:pointer} #placemap .pt .mk{fill:var(--ink);stroke:var(--ink);stroke-width:1;transition:transform var(--dur-fast) var(--ease)} #placemap .pt .mk.hollow{fill:var(--paper);stroke:var(--ink);stroke-width:1.5} #placemap .pt-label{font-family:var(--mono);font-size:12px;fill:var(--ink);opacity:0;paint-order:stroke;stroke:var(--paper);stroke-width:3px;transition:opacity var(--dur-fast) var(--ease)} #placemap .pt.is-active .pt-label,#placemap .pt:focus .pt-label{opacity:1} #placemap .pt.is-active .mk{transform-box:fill-box;transform-origin:center;transform:scale(1.5)} #placemap .pt:focus{outline:none} .map-readout{margin-top:.9rem;font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase;color:var(--ink-2);min-height:1.2em} .map-legend{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:1.3rem;font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase;color:var(--ink-2)} /* ---- Julia set (generative, home) -------------------------------------- */ .julia-widget{position:relative;width:100%;height:clamp(300px,46vh,480px);overflow:hidden;border-radius:14px;background:var(--paper);cursor:crosshair;margin-top:.5rem} .julia-widget canvas{display:block;width:100%;height:100%} :root[data-theme="dark"] .julia-widget canvas{filter:invert(1)} @media (prefers-color-scheme:dark){:root:not([data-theme]) .julia-widget canvas{filter:invert(1)}} .julia-widget .hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);pointer-events:none;transition:opacity .8s ease} /* ---- Larger body on wider screens (long-form cases) -------------------- */ @media (min-width:760px){ :root{ --fs-body:1.125rem; } } /* ---- Buttons / CTA ----------------------------------------------------- */ .cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem} .btn{font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em; padding:.7rem 1.1rem;border:1px solid var(--rule);border-radius:4px;color:var(--ink-2);white-space:nowrap; transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .btn:hover{color:var(--ink);border-color:var(--ink-2)} .btn--primary{background:var(--ink);color:var(--paper);border-color:var(--ink)} .btn--primary:hover{color:var(--paper);opacity:.9} /* ---- Case study -------------------------------------------------------- */ .case{display:flex;flex-direction:column;gap:clamp(1.6rem,3.5vw,2.6rem)} .case-step{display:grid;gap:.5rem} .case-step__label{font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase; letter-spacing:.04em;color:var(--ink-2);padding-bottom:.5rem;border-bottom:1px solid var(--rule)} /* ---- Stat grid (case outcomes) ----------------------------------------- */ .statgrid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr); gap:1px;background:var(--rule);border:1px solid var(--rule)} @media (max-width:560px){.statgrid{grid-template-columns:repeat(2,1fr)}} .stat{background:var(--paper);padding:1rem} .stat__num{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.01em} .stat__label{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);margin-top:.25rem} /* ---- Callout (key finding) --------------------------------------------- */ .callout{border:1px solid var(--rule);background:var(--field);border-left:3px solid var(--ink); padding:clamp(1rem,2.5vw,1.4rem);border-radius:4px} .callout p + p{margin-top:.6rem} /* ---- Chips (skills / tags) --------------------------------------------- */ .chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0} .chip{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.03em; color:var(--ink-2);border:1px solid var(--rule);border-radius:4px;padding:.35rem .6rem; transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)} .chip.is-inverted{background:var(--ink);color:var(--paper);border-color:var(--ink)} #ink-cursor{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9998} .has-cursor-dot,.has-cursor-dot *{cursor:none} #cursor-dot{position:fixed;top:0;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--ink);border-radius:50%;pointer-events:none;z-index:9999;opacity:0;transition:opacity .25s var(--ease)} #cursor-dot.cursor-dot--lg{width:16px;height:16px;margin:-8px 0 0 -8px} /* ---- Research expeditions: Russia map (sticky, in the side column) ------ */ html:not([data-page="home"]) main .section.expeditions:has(.sec-head){grid-template-columns:minmax(0,3fr) minmax(0,8fr)} .ru-map{display:block;width:100%;max-width:520px;height:auto;margin-top:1.6rem} .ru-land{fill:none;stroke:var(--ink);stroke-opacity:.22;stroke-width:.8;vector-effect:non-scaling-stroke} .exp-region{fill:var(--ink);fill-opacity:0;transition:fill-opacity .5s var(--ease)} .exp-region.on{fill-opacity:.88} @media (max-width:880px){.ru-map{max-width:420px;margin-top:1rem}.section.expeditions>.sec-head{flex-direction:column;align-items:flex-start;gap:.5rem}} /* underline all text links except nav/buttons/volunteering (single underline, no double border) */ .prose a,.numbered a,.foot-links a,.figcap a{border-bottom:0} /* ---- Work project rows: name | description | photo (3-column Swiss grid) ---- */ .workfig{display:block;width:100%;height:auto;border:1px solid var(--rule);filter:grayscale(1)} @media (max-width:879.98px){.workfig{max-width:300px}} @media (min-width:880px){ html:not([data-page="home"]) main .section.project3:has(.sec-head){grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,3fr)} html:not([data-page="home"]) main .section.project3:has(.sec-head) > .workfig{grid-column:3} html:not([data-page="home"]) main .section.project3:has(.sec-head) > .sec-head{position:static} } /* ---- skyline bits above the "Let's build" CTA (generative) ---- */ .skybits{position:relative;width:100%;height:clamp(110px,15vh,168px);overflow:hidden} .skybits canvas{display:block;width:100%;height:100%} @media (max-width:560px){.skybits{height:96px}}