@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700;750&family=Instrument+Serif:ital@0;1&family=Space+Mono:wght@400;700&display=swap');

/* Kate Loginova — personal website. No framework or build step required. */
:root,
html[data-look="noir"] {
  --canvas: #11121d; --paper: #202132; --paper-alt: #1a1b2b;
  --ink: #f5f3fa; --ink-soft: #b0adc2; --rule: #39394f;
  --accent: #b9a7ff; --accent-hover: #e0d8ff; --accent-soft: #453564;
  --mint: #a1fae2; --hot: #ff719c; --tag: #2e2d43;
  --hero: #090b14; --hero-fg: #fffaff; --hero-sub: #c6c2d3;
  --hero-orbit: rgba(189,175,255,.30); --hero-spot: rgba(166,67,253,.23);
  --dark-panel: #080b13; --panel-fg: #fffafe; --dark-line: rgba(255,255,255,.20);
  --shadow: 0 22px 65px rgba(0,0,0,.25);
}
*, *::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:90px;}
body { margin:0; background:var(--canvas); color:var(--ink); font-family:'DM Sans',Arial,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .35s,color .35s; }
body:before { content:""; position:fixed; inset:0; opacity:.13; pointer-events:none; z-index:99; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");}
a {color:inherit; text-decoration:none}
a:hover {color:var(--accent)}
button {font:inherit}
button, a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible {outline:3px solid var(--hot);outline-offset:4px}
::selection {background:var(--accent);color:#11121d}
.container {width:min(1320px, calc(100% - 96px)); margin:0 auto}
.label {font:700 11px/1.5 'Space Mono',monospace; letter-spacing:.11em; text-transform:uppercase}
.muted {color:var(--ink-soft)}
.serif {font-family:'Instrument Serif',Georgia,serif; font-weight:400}
.italic {font-style:italic}
.rule {border-top:1px solid var(--rule)}
.arrow {display:inline-block; transition:transform .2s;}
a:hover .arrow {transform:translate(3px,-3px)}
.skip {position:absolute;top:-100px;left:10px;background:var(--paper);padding:10px;z-index:999}
.skip:focus {top:10px}

/* Persistent navigation */
.site-nav {z-index:80; position:relative; height:88px; background:var(--canvas); border-bottom:1px solid var(--rule);transition:background .35s,border-color .35s;}
.site-nav .nav-shell{width:min(1430px,calc(100% - 76px));margin:auto;display:flex;align-items:center;justify-content:space-between;height:100%;gap:24px}
.wordmark {display:flex; align-items:center;gap:12px;flex:none; color:var(--ink)!important}
.wordmark-icon {display:grid;place-items:center;width:35px;height:35px;flex:none;border:1.7px solid var(--ink);border-radius:50%;font:italic 29px/1 'Instrument Serif',serif; padding-bottom:3px; transform:rotate(-9deg)}
.wordmark-text {display:flex; flex-direction:column;line-height:1.15; font-size:13px; font-weight:750; letter-spacing:.06em}
.wordmark-text small {font:400 9px/1.7 'Space Mono',monospace;letter-spacing:.07em;opacity:.62}
.nav-links {list-style:none;padding:0;margin:0;display:flex;gap:clamp(18px,2.3vw,40px);align-items:center}
.nav-links a{font-size:13px;font-weight:650;position:relative;padding:6px 0}
.nav-links a::after {content:"";height:2px;background:var(--accent);position:absolute;left:0;right:100%;bottom:1px;transition:right .2s}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after {right:0}
.nav-utility {display:flex;gap:16px;align-items:center;flex:none}
.nav-contact {display:flex;align-items:center;gap:7px;font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.045em;padding:9px 13px;border:1px solid var(--rule);transition:background .2s}
.nav-contact:hover {background:var(--tag)}
.menu-btn {display:none;cursor:pointer;background:none;border:1px solid var(--rule);color:var(--ink);padding:8px 10px;font-size:20px;line-height:1}
.mobile-only {display:none}

/* Hero */
.hero {width:min(1430px,calc(100% - 48px));margin:26px auto 0;min-height:690px;position:relative;overflow:hidden;background:var(--hero);color:var(--hero-fg);transition:background .35s;isolation:isolate}
.hero:before {content:"";position:absolute;inset:0; background:radial-gradient(ellipse at 88% 54%,var(--hero-spot),transparent 52%),repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),var(--hero-orbit) calc(25% - 1px),var(--hero-orbit) 25%); opacity:.65;z-index:-1}
.hero-grid {max-width:1320px;margin:auto;display:grid;grid-template-columns: minmax(0,1.2fr) minmax(340px,.8fr);min-height:632px;align-items:center;padding:66px 52px 40px 62px;gap:24px}
.hero .label {color:var(--mint)}
.hero-copy {position:relative;z-index:3;max-width:780px}
.hero-title {font-size:clamp(58px,5.8vw,100px);letter-spacing:-.07em;line-height:1.025;margin:29px 0 22px;font-weight:700}
.hero-title .serif {font-size:1.16em;letter-spacing:-.052em;color:var(--hero-fg);white-space:nowrap}
.hero-title .hot {color:var(--hot);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:9px;text-decoration-color:var(--mint);}
.hero-intro {font-size:clamp(16px,1.3vw,19px);max-width:590px;color:var(--hero-sub);line-height:1.65;margin:0 0 35px}
.hero-actions {display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cta {display:inline-flex;gap:26px;align-items:center;justify-content:space-between;background:var(--mint);color:#1d2730!important;padding:14px 19px;border:1px solid transparent;font-size:13px;font-weight:750;transition:transform .2s,background .2s}
.cta:hover {transform:translateY(-3px);background:#d8ffe9}
.cta-quiet {color:var(--hero-fg)!important;border-bottom:1px solid var(--hero-sub);padding:8px 0;font-weight:650;font-size:13px}
.cta-quiet:hover {color:var(--mint)!important}
.hero-visual {position:relative;height:490px;min-width:0;align-self:center;}
.hero-visual .monogram {position:absolute;inset:-65px 0 0 0;display:grid;place-items:center;font:italic min(43vw,630px)/1 'Instrument Serif',Georgia,serif;color:var(--hero-fg);opacity:.115;transform:rotate(-10deg);pointer-events:none}
.hero-visual .orbit {position:absolute;left:50%;top:50%;width:380px;height:380px;transform:translate(-50%,-50%) rotate(-27deg);border:1px solid var(--hero-orbit);border-radius:50%;}
.hero-visual .orbit:before {content:"";position:absolute;inset:34px;border-radius:50%;border:1px dashed var(--hero-orbit)}
.hero-visual .orbit:after {content:"";position:absolute;left:16%;top:13%;width:11px;height:11px;background:var(--hot);border-radius:50%;box-shadow:0 0 24px var(--hot)}
.hero-visual .cross {position:absolute;width:1px;height:450px;background:var(--hero-orbit);left:50%;top:3%;transform:rotate(42deg)}
.hero-visual .cross.two{transform:rotate(-48deg)}
.hero-floating {position:absolute;display:flex;flex-direction:column;gap:5px;font:11px 'Space Mono',monospace;letter-spacing:.025em;color:var(--hero-sub);background:var(--hero);padding:10px 14px;border:1px solid var(--hero-orbit);box-shadow:0 12px 50px rgba(0,0,0,.18)}
.hero-floating b{color:var(--mint);font-size:10px}
.float-1 {top:54px;left:4%;transform:rotate(-7deg)}
.float-2 {bottom:66px;right:0%;transform:rotate(6deg)}
.float-3 {bottom:23px;left:5%;border:none;box-shadow:none;background:transparent;color:var(--hot);transform:rotate(-10deg)}
.hero-bottom {max-width:1320px;margin:auto;padding:0 60px 29px;display:flex;align-items:center;justify-content:space-between;color:var(--hero-sub);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-family:'Space Mono',monospace}
.hero-bottom .line {height:1px;max-width:150px;flex:1;background:var(--hero-orbit);margin:0 14px}

/* Shared editorial sections */
.section {padding:112px 0}
.section-heading {display:flex;align-items:flex-start;gap:35px;margin-bottom:40px;justify-content:space-between}
.section-heading .h2 {max-width:900px}
.section-index {display:flex;align-items:center;gap:14px;margin-top:8px;color:var(--accent);flex-shrink:0}
.section-index:after {content:"";width:60px;height:1px;background:var(--accent);opacity:.6}
.h2 {font-size:clamp(38px,4.4vw,69px);letter-spacing:-.062em;line-height:1.08;font-weight:700;margin:0}
.h2 .serif {font-size:1.13em;color:var(--accent);font-style:italic}
.section-deck {font-size:17px;max-width:540px;color:var(--ink-soft);margin:13px 0 0}
.text-link {font-size:13px;font-weight:750;display:inline-flex;gap:18px;align-items:center;border-bottom:1px solid var(--ink);padding:10px 0}
.text-link:hover{border-color:var(--accent)}

/* Three distinctive paths */
.paths {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.path-card {background:var(--paper);min-height:300px; padding:27px 28px 24px;display:flex;flex-direction:column;border:1px solid var(--rule);transition:transform .24s,box-shadow .24s,background .24s;position:relative;overflow:hidden}
.path-card:before {content:"";position:absolute;right:-65px;top:-65px;width:145px;height:145px;border:1px solid var(--rule);border-radius:50%}
.path-card:after {content:"";position:absolute;right:-35px;top:-35px;width:85px;height:85px;border:1px solid var(--rule);border-radius:50%}
.path-card:hover {transform:translateY(-7px);box-shadow:var(--shadow);color:var(--ink)}
.path-card .path-num {color:var(--accent)}
.path-card h3 {font-size:42px;letter-spacing:-.06em;margin:48px 0 8px;line-height:1;font-weight:650}
.path-card h3 .serif {font-size:1.25em;font-style:italic}
.path-card p {font-size:14px;color:var(--ink-soft);max-width:290px;margin:0 0 22px}
.path-card .path-end {margin-top:auto;display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:15px;font-size:11px;font-weight:750;letter-spacing:.05em;text-transform:uppercase}
.path-card:nth-child(2) {background:var(--paper-alt)}
.path-card:nth-child(3) {background:var(--accent-soft)}
html[data-look="noir"] .path-card:nth-child(3) {color:#f5f2fa}

/* Work cards */
.work-split {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px}
.case-card {display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);overflow:hidden;transition:transform .22s,box-shadow .22s}
.case-card:hover {transform:translateY(-5px);box-shadow:var(--shadow);color:var(--ink)}
.case-card.featured {grid-row:span 2}
.case-art {position:relative;overflow:hidden;background:var(--dark-panel);height:230px;isolation:isolate;min-height:230px;color:#fff}
.featured .case-art {height:auto;flex:1;min-height:420px}
.featured .case-body {flex:0 0 auto}
.case-art:before {content:"";position:absolute;inset:0;opacity:.24;background:repeating-linear-gradient(0deg,transparent,transparent 34px,rgba(255,255,255,.15) 35px),repeating-linear-gradient(90deg,transparent,transparent 34px,rgba(255,255,255,.15) 35px)}
.clinical-art .art-word {position:absolute;left:9%;top:15%;font:italic 170px/1 'Instrument Serif',serif;color:#a898ff;opacity:.22;letter-spacing:-.08em}
.code-flow {position:absolute;right:6%;top:27%;display:grid;gap:15px;width:46%;transform:rotate(-8deg)}
.code-flow .flow-node {border:1px solid rgba(205,192,255,.6);background:rgba(17,19,35,.78);padding:9px 12px;font:11px 'Space Mono',monospace;color:#dcd5ff;white-space:nowrap}
.code-flow .flow-node:before {content:"↗";padding-right:13px;color:#91f8d9}
.code-flow .flow-node:nth-child(2){margin-left:28px}
.code-flow .flow-node:nth-child(3){margin-left:56px}
.information-art {background:#c2f0dd;color:#1e4239}
.information-art:before {background:repeating-linear-gradient(90deg,transparent 0,transparent 29px,rgba(36,91,80,.19) 30px);opacity:.5}
.information-art .art-type {position:absolute;top:30px;left:40px;font:700 clamp(32px,3vw,49px)/.99 'DM Sans',sans-serif;letter-spacing:-.07em;text-transform:uppercase;transform:rotate(-4deg)}
.information-art .art-type i {font-family:'Instrument Serif';font-size:1.2em;font-weight:400;text-transform:none}
.information-art .bars{position:absolute;right:28px;bottom:20px;display:flex;align-items:end;gap:5px;height:83px;opacity:.6}
.information-art .bars span{display:block;width:10px;background:#356457;}
.information-art .bars span:nth-child(1){height:29%}.information-art .bars span:nth-child(2){height:65%}.information-art .bars span:nth-child(3){height:43%}.information-art .bars span:nth-child(4){height:95%}.information-art .bars span:nth-child(5){height:60%}.information-art .bars span:nth-child(6){height:80%}.information-art .bars span:nth-child(7){height:37%}
.education-art{background:#e6d8ff;color:#42325c}
.education-art .art-type{position:absolute;top:32px;left:32px;font:italic 78px/1 'Instrument Serif',Georgia,serif;letter-spacing:-.06em;transform:rotate(-6deg)}
.education-art .art-small{position:absolute;bottom:26px;right:26px;font:11px 'Space Mono',monospace;letter-spacing:.08em}
.case-body {padding:25px 28px 28px;display:flex;flex-direction:column;flex:1}
.case-top {display:flex;justify-content:space-between;gap:12px;color:var(--accent);margin:0 0 17px}
.case-card h3 {font-size:clamp(23px,2vw,30px);font-weight:650;line-height:1.13;letter-spacing:-.05em;margin:0 0 10px}
.case-card p {font-size:14px;color:var(--ink-soft);margin:0 0 24px}
.case-card .case-bottom {margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--rule);padding-top:15px;font-size:11px;text-transform:uppercase;letter-spacing:.03em;font-weight:750}

/* Research / writing teasers */
.research-panel {display:grid;grid-template-columns:1fr 1fr;min-height:440px;background:var(--paper-alt);border:1px solid var(--rule)}
.research-panel .research-copy {padding:52px 52px 46px;display:flex;flex-direction:column;align-items:start;justify-content:center}
.research-panel h2 {font-size:clamp(36px,3.7vw,57px);line-height:1.12;letter-spacing:-.06em;margin:20px 0}
.research-panel .research-deck {font-size:15px;color:var(--ink-soft);max-width:440px;margin:0 0 26px}
.research-diagram {border-left:1px solid var(--rule);position:relative;min-height:390px;overflow:hidden;display:grid;place-items:center}
.research-diagram .diagram-ring {width:320px;height:320px;border-radius:50%;border:1px solid var(--accent);opacity:.6;position:relative}
.research-diagram .diagram-ring:after,.research-diagram .diagram-ring:before {content:"";position:absolute;border-radius:50%;border:1px dashed var(--accent);inset:35px;opacity:.6}
.research-diagram .diagram-ring:after {inset:95px;border-style:solid}
.research-diagram .diagram-center {position:absolute;font:italic 92px 'Instrument Serif',serif;color:var(--accent)}
.research-diagram .diagram-note {position:absolute;background:var(--paper-alt);padding:7px 12px;border:1px solid var(--rule);font:10px 'Space Mono',monospace;letter-spacing:.04em}
.research-diagram .note-a{top:15%;left:8%;transform:rotate(-5deg)}
.research-diagram .note-b{bottom:15%;right:7%;transform:rotate(5deg)}
.writer-panel {padding:65px 0;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.writer-note {padding:50px;min-height:365px;display:flex;flex-direction:column;justify-content:space-between;position:relative;background:var(--paper);border:1px solid var(--rule);box-shadow:10px 10px 0 var(--paper-alt);transform:rotate(-1.5deg)}
.writer-note:before{content:"✳";position:absolute;top:13px;right:28px;color:var(--hot);font-size:30px}
.writer-note .serif {font-size:clamp(37px,4vw,59px);line-height:1;letter-spacing:-.035em}
.writer-note .writer-bottom {display:flex;justify-content:space-between;gap:10px;color:var(--ink-soft);border-top:1px solid var(--rule);padding-top:16px}

/* The intentionally vivid personal section */
.after-hours {background:var(--dark-panel);color:var(--panel-fg);min-height:460px;overflow:hidden;position:relative;isolation:isolate}
.after-hours:before {content:"";position:absolute;inset:-60px;z-index:-1;background:radial-gradient(circle at 74% 55%,rgba(235,80,161,.24),transparent 38%),repeating-linear-gradient(90deg,transparent 0,transparent 79px,rgba(255,255,255,.035) 80px),repeating-linear-gradient(0deg,transparent 0,transparent 79px,rgba(255,255,255,.035) 80px)}
.after-inner {padding:86px 0 83px;display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}
.after-label {color:#b7afff}
.neon-title {font-weight:700;font-size:clamp(68px,9.6vw,155px);line-height:.79;letter-spacing:-.09em;margin:27px 0 34px;color:transparent;-webkit-text-stroke:1.4px #ff94c4;text-shadow:0 0 22px rgba(245,85,160,.5);transform:rotate(-3deg);transform-origin:left center}
.neon-title .solid {color:#ff8ebc;text-shadow:0 0 10px rgba(255,65,155,.7),0 0 42px rgba(255,65,155,.6);-webkit-text-stroke:0}
.after-sub {color:#aeb0c7;max-width:280px;font-size:14px}
.after-top {margin-top:8px;border-top:1px solid var(--dark-line);padding-top:13px;color:#a3f3db}
.interest-cloud {display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin-top:20px}
.interest {display:inline-block;border:1px solid rgba(255,255,255,.2);padding:12px 15px;font-size:14px;line-height:1.2;transform:rotate(var(--turn,0deg));color:#f6f3f9;background:rgba(255,255,255,.025)}
.interest:nth-child(2),.interest:nth-child(6) {color:#9afad7;border-color:rgba(154,250,215,.5)}
.interest:nth-child(4),.interest:nth-child(8) {color:#ff9ec9;border-color:rgba(255,158,201,.5)}
.interest:nth-child(1){--turn:-2deg}.interest:nth-child(3){--turn:2deg}.interest:nth-child(4){--turn:-1deg}.interest:nth-child(5){--turn:2deg}.interest:nth-child(7){--turn:-2deg}
.after-footer {margin-top:32px;color:#c0bdd1;font:11px 'Space Mono',monospace}

/* Footer */
.site-footer {padding:88px 0 29px;background:var(--canvas)}
.footer-top {display:grid;grid-template-columns:1.3fr .7fr;gap:60px;padding-bottom:87px;align-items:end}
.footer-headline {font-size:clamp(51px,5.6vw,91px);letter-spacing:-.075em;line-height:1;margin:18px 0}
.footer-headline em {font:italic 1.1em 'Instrument Serif',serif;color:var(--accent)}
.footer-aside p {font-size:15px;color:var(--ink-soft);margin-bottom:30px}
.footer-email {font-size:18px;font-weight:650;border-bottom:2px solid var(--accent);padding-bottom:7px}
.footer-bottom {border-top:1px solid var(--rule);padding-top:23px;display:flex;justify-content:space-between;gap:25px;font:11px 'Space Mono',monospace;color:var(--ink-soft)}
.footer-socials {display:flex;flex-wrap:wrap;gap:22px}

/* Interior page typography */
.page-hero {padding:105px 0 73px;border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.page-hero .page-index {color:var(--accent);margin:0 0 24px}
.page-title {font-weight:700;font-size:clamp(68px,9vw,143px);letter-spacing:-.09em;line-height:.96;margin:0 0 26px;max-width:1110px}
.page-title .serif {font-size:1.12em;letter-spacing:-.06em;color:var(--accent);font-style:italic}
.page-lead {font-size:clamp(17px,1.55vw,22px);line-height:1.5;color:var(--ink-soft);max-width:750px;margin:0}
.page-hero-decoration {position:absolute;right:0;top:40px;font:italic 460px/1 'Instrument Serif',serif;opacity:.05;pointer-events:none;transform:rotate(-15deg)}
.editorial-grid {display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);gap:50px}
.sticky-label {position:sticky;top:26px;align-self:start;color:var(--accent)}
.section-tight {padding:70px 0}
.prose {font-size:17px;line-height:1.9;max-width:750px}
.prose p {margin:0 0 24px}
.prose strong {font-weight:750}
.inset-quote {font:italic clamp(29px,3vw,45px)/1.25 'Instrument Serif',serif;border-left:3px solid var(--accent);padding-left:25px;max-width:750px;margin:45px 0}
.case-detail {padding:80px 0;border-bottom:1px solid var(--rule);}
.case-detail:first-child {padding-top:30px}
.case-detail .detail-head {display:grid;grid-template-columns:.26fr 1fr;gap:30px;align-items:start}
.detail-id {color:var(--accent)}
.detail-title {font-size:clamp(38px,4.7vw,70px);letter-spacing:-.065em;line-height:1.07;margin:0 0 17px}
.detail-meta {display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 27px}
.pill {border:1px solid var(--rule);padding:6px 10px;font:10px 'Space Mono',monospace;letter-spacing:.04em}
.detail-cols {display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:29px}
.detail-cols h3 {text-transform:uppercase;letter-spacing:.08em;font:700 11px 'Space Mono',monospace;color:var(--accent);margin:0 0 13px}
.detail-cols p,.detail-cols li {font-size:15px;line-height:1.72;color:var(--ink-soft)}
.detail-cols ul {padding-left:20px;margin:0}
.detail-cols li {padding-bottom:6px}
.detail-intro {font-size:18px;max-width:750px;line-height:1.65;margin:0}
.metric-line {font-size:13px;background:var(--accent-soft);padding:16px 20px;margin:23px 0 0;border-left:2px solid var(--accent);display:inline-block}
.detail-end {display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:26px}
.timeline {display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:32px 0 0}
.timeline-entry {border-top:2px solid var(--accent);padding-top:19px}
.timeline-entry .date {font:11px 'Space Mono',monospace;color:var(--accent)}
.timeline-entry h3 {font-size:16px;margin:12px 0 5px}
.timeline-entry p {font-size:13px;color:var(--ink-soft);margin:0}
.paper-list {display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:30px}
.paper-item {display:grid;grid-template-columns:110px 1fr 35px;gap:26px;align-items:center;background:var(--paper);padding:23px 27px;transition:background .2s}
.paper-item:hover{background:var(--paper-alt);color:var(--ink)}
.paper-item time {font:11px 'Space Mono',monospace;color:var(--accent)}
.paper-item h3 {font-size:19px;letter-spacing:-.025em;margin:0 0 4px}
.paper-item p {color:var(--ink-soft);font-size:13px;margin:0}
.callout {border:1px solid var(--rule);padding:45px;background:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:35px}
.callout h3 {font-size:clamp(30px,3vw,45px);letter-spacing:-.055em;line-height:1.12;margin:7px 0}
.callout p {color:var(--ink-soft);font-size:15px;margin:7px 0}
.mini-cards {display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:29px}
.mini-card {padding:27px;border:1px solid var(--rule);background:var(--paper);min-height:220px}
.mini-card .mini-num {color:var(--accent)}
.mini-card h3 {font-size:22px;letter-spacing:-.04em;margin:29px 0 8px}
.mini-card p {font-size:14px;color:var(--ink-soft);margin:0}
.novel-card {background:var(--dark-panel);color:var(--panel-fg);padding:50px 55px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:40px;overflow:hidden;min-height:360px}
.novel-card .n-title {font:italic 110px/1 'Instrument Serif',serif;color:#efacd3;letter-spacing:-.08em;transform:rotate(-6deg)}
.novel-card p {color:#d2ccdc;font-size:15px}
.novel-card .n-title-note {color:#a8f3da}
.about-intro {display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:center;padding:75px 0 90px}
.about-art {background:var(--dark-panel);min-height:430px;display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid var(--rule)}
.about-art:before {content:"";position:absolute;border:1px solid #9a89e3;width:310px;height:310px;transform:rotate(43deg);opacity:.4}
.about-art:after {content:"";position:absolute;border:1px solid #ec8bae;width:265px;height:265px;transform:rotate(-28deg);opacity:.55}
.about-art .big-initial {font:italic 360px/.8 'Instrument Serif',serif;color:#faf1f8;opacity:.85;transform:rotate(-8deg);z-index:2}
.about-art .micro-label {position:absolute;color:#8ef4d4;font:10px 'Space Mono',monospace;left:27px;bottom:26px;z-index:3}
.about-copy h2 {font-size:clamp(40px,4vw,65px);letter-spacing:-.065em;line-height:1.12;margin:20px 0}
.about-copy p {font-size:16px;color:var(--ink-soft);line-height:1.85;max-width:690px}
.favourites {display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
.favourite {padding:28px;border:1px solid var(--rule);background:var(--paper);min-height:165px}
.favourite .label {color:var(--accent)}
.favourite h3 {font-size:21px;margin:12px 0 7px;line-height:1.2}
.favourite p {font-size:14px;color:var(--ink-soft);margin:0}
.note-block {border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:55px 0;margin:75px 0;display:grid;grid-template-columns:.3fr 1fr;gap:40px}
.note-block .serif {font-size:clamp(30px,3.8vw,55px);line-height:1.17}
.small-portrait-prompt {font:10px 'Space Mono',monospace;color:var(--ink-soft);margin-top:12px;text-align:center}

/* Responsive */
@media(max-width:1100px){
 .container{width:min(1320px,calc(100% - 58px))}
 .site-nav .nav-shell {width:calc(100% - 48px)}
 .hero-grid{padding:50px 37px 25px;grid-template-columns:1.1fr .9fr}
 .hero-title{font-size:clamp(55px,6.1vw,78px)}
 .hero-visual .orbit{width:320px;height:320px}
 .hero-bottom{padding:0 37px 25px}
 .after-inner{gap:55px}
}
@media(max-width:820px){
 .site-nav{height:72px}
 .site-nav .nav-shell {width:calc(100% - 30px)}
 .nav-links {display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--rule);padding:20px 28px 28px;box-shadow:var(--shadow);flex-direction:column;align-items:start;gap:13px}
 .site-nav.menu-open .nav-links{display:flex}
 .menu-btn {display:block}
 .nav-contact {display:none}
 .hero{width:calc(100% - 24px);margin-top:12px;min-height:auto}
 .hero-grid{grid-template-columns:1fr;padding:65px 32px 12px;min-height:unset}
 .hero-title{font-size:clamp(56px,9vw,86px);max-width:780px}
 .hero-visual{height:230px;overflow:hidden;opacity:.7}
 .hero-visual .monogram{font-size:370px;inset:-95px 0 0}
 .hero-visual .orbit{width:275px;height:275px}
 .float-1{top:10px;left:10%}.float-2{bottom:30px;right:5%}.float-3{display:none}
 .hero-bottom{padding:0 33px 25px}
 .paths{grid-template-columns:1fr 1fr}
 .path-card:last-child {grid-column:span 2;min-height:230px}
 .path-card:last-child h3{margin-top:22px}
 .work-split{grid-template-columns:1fr 1fr}
 .case-card.featured{grid-row:auto;grid-column:span 2}
 .featured .case-art{height:260px;flex:none}
 .research-panel{grid-template-columns:1fr}
 .research-diagram{border-left:0;border-top:1px solid var(--rule);min-height:300px}
 .writer-panel{gap:38px}
 .after-inner{grid-template-columns:1fr;gap:25px}
 .neon-title{font-size:clamp(75px,13vw,140px)}
 .after-sub{max-width:660px}
 .footer-top{gap:30px}
 .page-hero{padding:70px 0 55px}
 .page-hero-decoration{font-size:300px;top:0}
 .editorial-grid{grid-template-columns:1fr;gap:20px}
 .sticky-label{position:static}
 .about-intro{gap:35px;grid-template-columns:.8fr 1.2fr}
 .about-art{min-height:350px}.about-art .big-initial{font-size:300px}
}
@media(max-width:560px){
 .container{width:calc(100% - 36px)}
 .site-nav .nav-shell{gap:12px}
 .wordmark-text{font-size:12px}
 .wordmark-icon{width:32px;height:32px}
 .hero{width:calc(100% - 14px);margin-top:7px}
 .hero-grid{padding:50px 22px 0;gap:5px}
 .hero-title{font-size:clamp(49px,11.3vw,67px);letter-spacing:-.069em;margin:28px 0 20px}
 .hero-title .serif{white-space:normal}
 .hero-intro{font-size:15px}
 .hero-actions{gap:19px}
 .hero-visual{height:145px;opacity:.35}
 .hero-visual .monogram{font-size:270px;inset:-85px 0 0}
 .hero-visual .orbit{width:235px;height:235px}
 .hero-floating{display:none}
 .hero-bottom{padding:0 22px 20px;line-height:1.4;font-size:8px}
 .hero-bottom .line{max-width:40px}
 .section{padding:72px 0}
 .section-heading{display:block;margin-bottom:26px}
 .section-index{margin:0 0 18px}
 .h2{font-size:clamp(38px,10vw,56px)}
 .section-deck{font-size:15px}
 .paths{grid-template-columns:1fr;gap:12px}
 .path-card,.path-card:last-child{grid-column:auto;min-height:235px;padding:23px 25px}
 .path-card h3{margin-top:27px}
 .work-split{grid-template-columns:1fr;gap:14px}
 .case-card.featured{grid-column:auto}
 .case-art,.featured .case-art{height:225px;min-height:225px;flex:none}
 .code-flow{right:4%;width:66%;top:21%}
 .code-flow .flow-node{font-size:9px}
 .case-body{padding:22px}
 .research-panel .research-copy{padding:37px 29px 39px}
 .research-diagram{min-height:260px}
 .research-diagram .diagram-ring{width:230px;height:230px}
 .research-diagram .diagram-center{font-size:68px}
 .writer-panel{grid-template-columns:1fr;gap:32px;padding:55px 0}
 .writer-note{padding:32px;min-height:280px}
 .after-inner{padding:62px 0 70px}
 .neon-title{font-size:clamp(75px,18vw,118px);margin-bottom:30px}
 .interest{font-size:12px;padding:11px 13px}
 .footer-top{grid-template-columns:1fr;padding-bottom:46px;gap:12px}
 .footer-headline{font-size:clamp(57px,12vw,80px)}
 .site-footer{padding-top:66px}
 .footer-bottom{flex-direction:column;gap:11px}
 .page-title{font-size:clamp(59px,14vw,90px)}
 .page-hero{padding:62px 0 48px}
 .page-lead{font-size:17px}
 .case-detail{padding:60px 0}
 .case-detail .detail-head{grid-template-columns:1fr;gap:8px}
 .detail-title{font-size:clamp(39px,9vw,55px)}
 .detail-cols{grid-template-columns:1fr;gap:14px}
 .timeline{grid-template-columns:1fr 1fr;gap:27px 14px}
 .paper-item{grid-template-columns:65px 1fr 18px;gap:15px;padding:20px 16px}
 .paper-item h3{font-size:16px}
 .callout{grid-template-columns:1fr;padding:27px}
 .mini-cards{grid-template-columns:1fr}
 .mini-card{min-height:160px;padding:22px}
 .mini-card h3{margin-top:14px}
 .novel-card{grid-template-columns:1fr;padding:35px;gap:15px}
 .novel-card .n-title{font-size:80px}
 .about-intro{grid-template-columns:1fr;padding:50px 0}
 .about-art{min-height:280px}.about-art .big-initial{font-size:260px}
 .favourites{grid-template-columns:1fr}
 .note-block{grid-template-columns:1fr;gap:20px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* === v02 / PERSONAL PHOTOGRAPHY + HEXAGON SYSTEM === */
.wordmark-icon {border:0;transform:none;width:40px;height:40px;padding:0}
.wordmark-icon img{width:100%;height:100%;display:block}
.hex-photo-frame{position:absolute;padding:4px;background:linear-gradient(145deg,var(--mint) 5%,var(--accent) 43%,var(--hot) 86%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);overflow:hidden;isolation:isolate}
.hex-photo-frame img{display:block;width:100%;height:100%;object-fit:cover;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);filter:contrast(1.04) saturate(.9)}
/* dark companion feature, three-column layout with portrait at its core */
.after-hours{background:#080a14;}
.after-hours:after{content:"";position:absolute;inset:0;pointer-events:none;background:url('assets/hex-grid.svg') center/220px 190px repeat;opacity:.055;z-index:-1}
.after-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.8fr) minmax(0,1fr);gap:30px;align-items:center;padding:96px 0 96px}
.after-heading{min-width:0}
.neon-title{font-size:clamp(67px,6.8vw,121px)}
.after-sub{max-width:310px}
.night-hex-stage{position:relative;height:415px;min-width:0;isolation:isolate}
.night-hex-grid{opacity:.45;inset:1% -35%;background-size:135px 116px;mask-image:radial-gradient(ellipse at center,#000,transparent 72%)}
.night-photo{width:95%;height:91%;top:3%;left:4%;padding:5px;background:linear-gradient(125deg,#A58BFF,#FF51AC 56%,#55E9DD)}
.night-photo img{object-position:49% 41%;filter:contrast(1.1) saturate(.94)}
.night-mini-hex{position:absolute;z-index:4;right:-4%;top:4%;width:73px;height:85px;background:rgba(85,233,221,.15);border:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:0 0 30px rgba(85,233,221,.15)}
.night-photo-caption{position:absolute;bottom:-14px;left:4%;z-index:5;color:#a5eadd;font-size:8px;letter-spacing:.03em;background:#080a14;padding:8px 10px;max-width:90%;transform:rotate(-2deg)}
.after-interests{position:relative;z-index:6}
.after-top{margin-top:0}
.interest-cloud{gap:8px}
.interest{font-size:12px;padding:10px 10px}
/* more personal About illustration: photo honeycomb rather than typographic placeholder */
.about-hex-gallery{min-height:500px;isolation:isolate;background:radial-gradient(circle at 50% 50%,#382646,#121522 75%);display:block;border:1px solid var(--rule)}
.about-hex-gallery::before,.about-hex-gallery::after{display:none}
.about-hex-gallery .about-hex-background{inset:-10%;opacity:.3;}
.about-hex-primary{width:76%;height:67%;left:10%;top:8%;transform:rotate(-4deg);padding:4px}
.about-hex-primary img{object-position:31% 33%}
.about-hex-secondary{width:42%;height:37%;right:-3%;bottom:10%;transform:rotate(8deg);padding:3px}
.about-hex-secondary img{object-position:42% 50%}
.about-hex-stamp{position:absolute;z-index:3;left:4%;bottom:10%;display:block;transform:rotate(-11deg)}
.about-hex-stamp img{width:77px;filter:drop-shadow(0 0 10px rgba(255,110,171,.3))}
.about-art .micro-label{bottom:15px;left:15px;background:#0b0b16b8;padding:6px 9px;font-size:8px}
.footer-signature{display:inline-flex;align-items:center;gap:8px}
.footer-signature img{width:25px;height:25px;flex:none}
@media(max-width:1240px){
 .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(310px,.88fr)}
 .after-inner{grid-template-columns:minmax(0,1fr) minmax(170px,.78fr) minmax(0,1fr);gap:23px}
 .night-hex-stage{height:360px}
 .interest{font-size:11px}
}
@media(max-width:950px){
 .hero-grid{grid-template-columns:1fr;padding:55px 37px 5px;gap:0;}
 .hero-copy{max-width:820px}
 .after-inner{grid-template-columns:1fr 1fr;gap:38px}
 .night-hex-stage{grid-column:1;grid-row:2;max-width:380px;height:390px;width:100%}
 .after-interests{grid-column:2;grid-row:2;align-self:center}
 .after-heading{grid-column:span 2}
 .neon-title{font-size:clamp(85px,13vw,150px)}
 .after-sub{max-width:600px}
 .about-hex-gallery{min-height:400px}
}
@media(max-width:650px){
 .wordmark-icon{height:34px;width:34px}
 .hero-grid{padding:44px 22px 4px;gap:12px}
 .hero-title{font-size:clamp(47px,11.7vw,68px)}
 .hero-bottom{padding:0 22px 18px}
 .after-inner{grid-template-columns:1fr;gap:25px;padding:67px 0 80px}
 .after-heading,.night-hex-stage,.after-interests{grid-column:auto;grid-row:auto}
 .neon-title{font-size:clamp(73px,19vw,105px);margin-bottom:21px}
 .night-hex-stage{height:365px;width:min(340px,100%);margin:5px auto 5px}
 .after-interests{margin-top:5px}
 .about-hex-gallery{min-height:370px}
 .about-hex-primary{width:71%;height:68%;left:12%}
 .about-hex-secondary{width:38%;height:40%}
}

/* v03 — focus on ideas and work first; photography lives on About and After Hours. */
.concept-art { isolation:isolate; }
.concept-art::before {
  content:""; position:absolute; inset:3% -8%; z-index:-1;
  background:url('assets/hex-grid.svg') center / 150px 130px repeat;
  -webkit-mask-image:radial-gradient(ellipse at 55% 54%, #000 6%, transparent 72%);
  mask-image:radial-gradient(ellipse at 55% 54%, #000 6%, transparent 72%);
  opacity:.15;
}
.concept-art .monogram{opacity:.14; transform:rotate(-9deg) translateY(6px)}
.concept-art .orbit{box-shadow:0 0 80px rgba(188,157,255,.055),inset 0 0 70px rgba(188,157,255,.045);border-color:rgba(185,167,255,.37)}
.concept-art .orbit:before{border-color:rgba(185,167,255,.23)}
.concept-art .cross {opacity:.72}
.concept-spark{position:absolute; width:14px; height:15px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:var(--mint);box-shadow:0 0 16px var(--mint);}
.concept-spark.spark-a{left:21%;top:31%;width:11px;height:12px;opacity:.78}
.concept-spark.spark-b{right:10%;bottom:28%;background:var(--hot);opacity:.78}
.concept-spark.spark-c{right:30%;top:15%;width:7px;height:8px;opacity:.55}
/* Reduce badge-like structure in the ways-in cards: these are parallel interests, not phases. */
.path-card .path-num {font-size:11px; letter-spacing:.06em; text-transform:none; font-family:'DM Sans',Arial,sans-serif;font-weight:750;}
.path-card h3 {margin-top:42px}
/* Keep photos free of floating process captions. */
.about-hex-gallery .micro-label{display:none}
@media(max-width:820px) {
  .concept-art::before{inset:-20% 0}
  .concept-spark.spark-a{left:38%;top:20%}
  .concept-spark.spark-b{right:20%;bottom:25%}
}
@media(max-width:560px) {
  .concept-art .monogram{font-size:280px}
  .concept-art .orbit{width:230px;height:230px}
  .concept-spark{opacity:.4}
}

/* v04 — personal site first, business links visible but never salesy */
.nav-links{gap:clamp(12px,1.5vw,29px)}
.nav-business-mobile{display:none}
.nav-contact{white-space:nowrap;border-color:var(--accent);color:var(--ink)!important;background:var(--tag)}
.nav-contact:hover{box-shadow:0 0 0 1px var(--accent)}
.hero-business{margin:27px 0 0;font:12px/1.7 'DM Sans',sans-serif;color:var(--hero-sub)}
.hero-business a{color:var(--mint);border-bottom:1px solid var(--mint);font-weight:700}
.hero-business a:hover{color:#fff}
.footer-business{margin-top:28px;border-top:1px solid var(--rule);padding-top:20px}
.footer-business .label{color:var(--accent)}
.footer-business p{margin:7px 0 0}
.footer-business a{font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.footer-wink{font-size:12px;color:var(--ink-soft);margin-top:12px;max-width:420px}
.business-route{display:flex;gap:24px;align-items:center;justify-content:space-between;background:var(--paper-alt);padding:20px 24px;border:1px solid var(--rule);margin-bottom:34px;font-size:13px}
.business-route a{font-weight:750;color:var(--accent);white-space:nowrap}
.night-page-hero{background:#090b16;color:#fff;position:relative;isolation:isolate;overflow:hidden}
.night-page-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 67% 50%,rgba(255,81,172,.19),transparent 51%),url('assets/hex-grid.svg') center/210px 190px repeat;opacity:.45}
.night-hero-wrap{display:grid;grid-template-columns:1fr .77fr;gap:50px;align-items:center;min-height:640px;padding:65px 0}
.night-kicker{color:#93ebda}
.night-hero-text h1{font-size:clamp(88px,11vw,170px);font-weight:750;line-height:.77;letter-spacing:-.1em;margin:27px 0 45px;color:#f4eaff;text-shadow:0 0 28px rgba(165,139,255,.13)}
.night-hero-text h1 span{color:#ff83bc;text-shadow:0 0 15px rgba(255,81,172,.52),0 0 55px rgba(255,81,172,.23)}
.night-hero-text p:not(.label){color:#d4cddd;font-size:17px;line-height:1.65;max-width:570px}
.night-start{display:inline-block;margin-top:27px;color:#98ffdf;font-weight:700;border-bottom:1px solid #98ffdf;padding-bottom:7px}
.night-page-image{position:relative;height:500px;isolation:isolate}
.night-photo-halo{position:absolute;inset:15%;border-radius:50%;background:radial-gradient(circle,#cd4f9b67,transparent 65%);filter:blur(25px)}
.night-large-portrait{left:6%;top:0;width:87%;height:98%;padding:6px;background:linear-gradient(145deg,#a58bff,#ff51ac 65%,#55e9dd)}
.night-large-portrait img{object-position:48% 40%;filter:contrast(1.06)}
.night-photo-small{position:absolute;left:-2%;bottom:2%;background:#141320;padding:9px 13px;transform:rotate(-4deg);color:#aaf6e7;z-index:4}
.night-body{padding:86px 0 110px}
.night-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:33px}
.night-card{background:var(--paper-alt);padding:30px 28px 33px;border:1px solid var(--rule);min-height:274px;position:relative}
.night-card .label{color:var(--accent)}
.night-card h2{font-size:clamp(25px,2.5vw,36px);letter-spacing:-.045em;line-height:1.14;max-width:300px;margin:21px 0 12px}
.night-card p{color:var(--ink-soft);font-size:14px;margin:0}
.night-card a{font-weight:700;color:var(--accent);display:inline-block;margin-top:22px}
.night-symbol{position:absolute;right:24px;top:22px;color:var(--hot);font-size:25px}
.night-return{display:flex;justify-content:space-between;align-items:center;gap:35px;border-top:1px solid var(--rule);padding:40px 0 95px}
.night-return h2{font-size:clamp(27px,3.5vw,44px);letter-spacing:-.05em;margin:10px 0}
.night-return p{color:var(--ink-soft);margin:0}
.night-return .cta{flex:none}
@media(max-width:1100px){.nav-links{gap:12px}.nav-contact{font-size:10px;padding:8px 9px}.night-hero-wrap{grid-template-columns:1.1fr .9fr;gap:20px}}
@media(max-width:820px){.nav-business-mobile{display:block}.nav-business-mobile a{color:var(--accent);border-bottom:1px solid var(--accent);font-weight:750}.night-hero-wrap{grid-template-columns:1fr;gap:12px}.night-hero-text h1{font-size:clamp(83px,16vw,140px)}.night-page-image{height:420px;width:min(420px,100%);justify-self:center}.night-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.business-route{flex-wrap:wrap}}
@media(max-width:560px){.night-hero-wrap{padding:60px 0}.night-hero-text h1{font-size:clamp(80px,20vw,125px)}.night-page-image{height:360px;max-width:340px}.night-card-grid{grid-template-columns:1fr}.night-card{min-height:220px}.night-return{flex-direction:column;align-items:flex-start;padding-bottom:70px}.hero-business{font-size:12px}}

/* Navigation switches to a menu before the five personal links get crowded. */
@media (min-width:821px) and (max-width:960px) {
 .site-nav {height:72px}
 .site-nav .nav-shell {width:calc(100% - 40px)}
 .nav-links {display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--rule);padding:20px 28px 28px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start;gap:13px}
 .site-nav.menu-open .nav-links{display:flex}
 .nav-business-mobile{display:block}
 .menu-btn{display:block}
 .nav-contact{display:none}
}


/* Continuation: portrait composition, accessible navigation and small screens. */
.about-hex-primary img {object-position:50% 25%;filter:none}
.night-photo img,.night-large-portrait img {object-position:50% 20%;filter:none}
.about-hex-secondary {right:0;bottom:4%;width:34%;height:34%}
.night-large-portrait {left:3%;width:94%;height:100%}
.night-card em {font-style:italic}
.footer-email,.footer-business a {overflow-wrap:anywhere}
.path-card h3,.night-card h2 {overflow-wrap:break-word}
@media(max-width:960px) {
  .menu-btn {min-width:44px;min-height:44px}
  html:not(.js) .site-nav {height:auto;min-height:72px}
  html:not(.js) .nav-shell {flex-wrap:wrap;padding:16px 0;gap:14px}
  html:not(.js) .site-nav nav {order:3;width:100%}
  html:not(.js) .nav-links {display:flex;position:static;box-shadow:none;border:0;padding:10px 0;gap:14px}
  html:not(.js) .menu-btn {display:none}
  .nav-links a {display:inline-block;min-height:44px;padding:10px 0}
  .nav-business-mobile {display:block}
}
@media(max-width:560px) {
  .about-hex-gallery {min-height:440px}
  .about-hex-primary {left:8%;width:84%;height:80%;top:4%;transform:rotate(-2deg)}
  .about-hex-secondary {width:30%;height:30%;bottom:0}
  .night-page-image {height:430px}
  .night-hero-text h1 {font-size:clamp(70px,19vw,106px);letter-spacing:-.08em}
}