/* FIELD NOTES — a personal collection, set in ink, paper and vermilion. */
:root {
  --bg:#efebe2; --bg-2:#e7e2d8; --ink:#262620; --text:#4e4c45;
  --muted:#716d63; --faint:#777268; --accent:#b84025; --accent-d:#933921;
  --accent-2:#b84025; --glow:transparent; --glow-2:transparent;
  --line:rgba(44,41,31,.19); --line-2:rgba(44,41,31,.32);
  --surface:rgba(80,64,39,.035); --f-disp:'Instrument Serif',Georgia,serif;
  --maxw:1380px; --pad:clamp(1.3rem,5vw,4.5rem);
}
body { background:var(--bg); }
::selection { background:#d65333; color:#fff8ee; }
.bg-grid,.bg-fade { display:none; }
.top { background:var(--bg); border-bottom:1px solid var(--line); padding:1.2rem var(--pad); }
.top.scrolled { background:rgba(239,235,226,.95); backdrop-filter:blur(14px); padding:1rem var(--pad); }
.brand { font-family:var(--f-sans); font-size:.875rem; font-weight:500; letter-spacing:-.03em; }
.brand-node { background:var(--accent); border:0; border-radius:50%; width:9px; height:9px; transform:none; }
.brand:hover .brand-node { box-shadow:none; }
.links>a { font-size:.875rem; }
.nav-lab::before { box-shadow:none; width:4px; height:4px; }
.menu { background:var(--bg); backdrop-filter:none; }
.menu>a { font-family:var(--f-disp); font-weight:400; font-size:3.2rem; }
.menu-btn { padding:8px 0; }
.portfolio .hero { min-height:810px; padding:9rem 0 2.4rem; overflow:hidden; }
.hero-layout { display:grid; grid-template-columns:1.1fr 1fr; align-items:start; column-gap:2.5rem; }
.hero-text { z-index:2; }
.eyebrow { color:var(--muted); letter-spacing:.08em; text-transform:uppercase; font-size:.75rem; }
.eyebrow .dot { background:var(--accent); }
.hero-name { font-family:var(--f-disp); font-size:clamp(5.75rem,10.8vw,10.4rem); line-height:.84; font-weight:400; letter-spacing:-.052em; margin-bottom:2.75rem; }
.hero-name .nl { overflow:visible; padding:.08em 0; margin:-.08em 0; }
.hero-name .nl>span { animation:inkArrive 1.15s cubic-bezier(.16,1,.3,1) both; }
.hero-name .nl:nth-child(2)>span { animation:inkArrive 1.3s cubic-bezier(.16,1,.3,1) .15s both; }
.hero-name .amber { font-style:italic; color:var(--ink); -webkit-text-fill-color:currentColor; background:none; padding-left:.21em; }
.name-stop { color:var(--accent); }
@keyframes inkArrive { from { opacity:0; transform:translateY(35px) rotate(2deg); } to { opacity:1; transform:none; } }
.lede { font-family:var(--f-sans); font-size:1.1rem; line-height:1.55; max-width:30ch; margin-bottom:1.5rem; }
.status { font-size:.75rem; max-width:49ch; margin-bottom:1.75rem; gap:.45rem; }
.status .live-dot { background:var(--accent); }
.hero-links { gap:1.1rem; max-width:440px; }
.hero-links a { font-size:.875rem; }
.hero-links .cta { border-radius:0; background:var(--ink); color:var(--bg)!important; padding:.85rem 1.1rem; }
.hero-links .cta:hover { background:var(--accent); }
.hero-links .cv-btn { border-radius:0; padding:.85rem .9rem; border-color:var(--line-2); }
.cv-btn:hover { background:var(--surface); border-color:var(--ink); color:var(--ink); }
.field-panel { height:470px; margin-top:5.5rem; background:none; transform:rotate(-4deg); }
.network-caption { color:var(--muted); border-top:1px solid var(--line-2); padding-top:1rem; justify-content:space-between; font-size:.75rem; }
.network-caption>span:first-child { color:var(--accent); }
.portfolio .field-plot { width:100%; flex:1; position:relative; min-height:0; }
.field-plot svg { width:100%; height:100%; display:block; overflow:visible; pointer-events:auto; }
.field-axis { stroke:#aaa397; stroke-width:.8; fill:none; }
.field-point { fill:var(--accent); opacity:.7; }
.field-fit { stroke:var(--ink); stroke-width:1.5; fill:none; stroke-dasharray:5 7; opacity:.45; }
.network-foot { border-bottom:1px solid var(--line-2); justify-content:space-between; padding:.8rem 0; font-size:.75rem; }
.field-replay { appearance:none; background:none; border:0; color:var(--accent); font:inherit; cursor:pointer; padding:.5rem 0 .5rem 1rem; min-height:34px; }
.field-replay:hover { color:var(--ink); }
.field-note { font-family:var(--f-disp); font-style:italic; text-align:right; color:var(--muted); font-size:1.2rem; margin-top:1.1rem; }
.hero-bottom { font-size:.75rem; padding-top:2.5rem; margin-top:2rem; letter-spacing:.02em; }
.hero-bottom>a { text-transform:uppercase; font-size:.75rem; letter-spacing:.08em; }
.sec { padding:7rem 0; }
.sh { gap:1.2rem; align-items:baseline; }
.sh-k { font-size:.75rem; color:var(--accent); align-self:baseline; }
.sh-t { font-family:var(--f-disp); font-size:clamp(2.8rem,5.5vw,5rem); letter-spacing:-.04em; line-height:1.03; }
.section-intro { font-size:1rem; margin:1.5rem 0 3.5rem 2.3rem; }
.section-link { font-size:.75rem; }
/* The portfolio becomes a dark plate inside the paper page. */
#projects {
  --bg:#25251f; --bg-2:#2c2d25; --ink:#f0ebe0; --text:#c5c0b4; --muted:#a7a395;
  --accent:#ef7958; --accent-2:#ef7958; --line:rgba(232,226,205,.18); --line-2:rgba(232,226,205,.3);
  --surface:rgba(240,235,224,.04); color:var(--text); background:var(--bg);
  box-shadow:0 0 0 100vmax var(--bg); clip-path:inset(0 -100vmax); border:none;
}
.featured-work { gap:4.5rem; }
.case-study { background:none; border:0; border-radius:0; grid-template-columns:1.1fr 1fr; gap:3rem; overflow:visible; }
.case-copy { padding:1rem 0; }
.case-category { font-family:var(--f-mono); font-size:.75rem; color:var(--muted); }
.case-copy h3 { font-family:var(--f-disp); font-size:clamp(2.5rem,3.7vw,3.5rem); letter-spacing:-.04em; line-height:1.02; margin-bottom:1.5rem; }
.case-copy>p:not([class]) { font-size:1rem; }
.case-visual { min-height:440px; padding:1.6rem; border-radius:1px; position:relative; transition:transform .65s var(--ease); transform-origin:50% 80%; }
.wind-visual { background:#d35332; color:#241f19; }
.battery-visual { background:#ded7c3; color:#35392c; }
.visual-label { font-size:.75rem; border-bottom-color:currentColor; opacity:.85; }
.visual-bottom { font-size:.75rem; }
.case-study:hover .case-visual { transform:rotate(-1deg) translateY(-5px); }
.case-reverse { grid-template-columns:1fr 1.1fr; }.case-reverse:hover .case-visual { transform:rotate(1deg) translateY(-5px); }
.study-chart { position:relative; margin:1rem 0; }
.chart-word { display:block; font-family:var(--f-disp); font-size:clamp(3rem,4.6vw,4.5rem); line-height:.85; letter-spacing:-.04em; }
.chart-word i { font-weight:400; }
.study-chart svg { width:100%; height:150px; display:block; overflow:visible; margin-top:1.5rem; }
.chart-grid { fill:none; stroke:currentColor; stroke-width:.6; opacity:.22; }
.chart-trace { stroke:currentColor; stroke-width:1.8; fill:none; stroke-dasharray:1; stroke-dashoffset:0; }
.chart-horizon { stroke:currentColor; stroke-width:.7; stroke-dasharray:3 5; opacity:.5; }
.chart-band { fill:currentColor; opacity:.1; }
.chart-caption { font:italic 1rem var(--f-disp); }
.case-study.in .chart-trace { animation:traceStudy 1.8s cubic-bezier(.22,.7,.3,1) both; }
@keyframes traceStudy { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
.case-study:hover .chart-trace { stroke-width:2.5; }
.case-metrics { gap:3rem; margin-top:1.75rem; }
.case-metrics strong { font-family:var(--f-disp); font-size:3.3rem; letter-spacing:-.04em; }
.case-metrics>div>span,.case-note { font-size:.75rem; }
.case-bottom { font-size:.75rem; }
.project-archive { margin-top:4.5rem; }
.project-archive summary { font-family:var(--f-disp); font-size:1.9rem; }
.archive-count { font-size:.75rem; }
.project-archive .rbody h3 { font-family:var(--f-sans); font-size:1.2rem; line-height:1.35; }
.project-archive .rdesc { font-size:1rem; }
.project-archive .row::after { box-shadow:none; }
.more { font-size:.75rem; }
.journal-section { border-top:0; }
.journal-grid { grid-template-columns:1.35fr 1fr; gap:4rem; align-items:start; }
.journal-card:nth-child(2) { padding-top:5rem; }
.journal-art { height:310px; border-radius:0; transition:transform .7s var(--ease); }
.match-art { background:#d9d3bf; color:#32382b; border:0; font-family:var(--f-disp); }
.match-art>span { font-size:5.5rem; font-weight:400; letter-spacing:-.06em; }
.match-art>i { color:#a85238; font-family:var(--f-disp); font-size:3rem; }
.match-art>small { font-size:.75rem; }
.journal-album,.post-cover-album { background:#d8d4ca; border:1px solid var(--line); }
.journal-card:hover .journal-art { transform:translateY(-6px) rotate(-1deg); }
.journal-card h3 { font-family:var(--f-disp); font-size:2.4rem; line-height:1.06; letter-spacing:-.025em; max-width:27ch; }
.journal-meta { font-size:.75rem; }
.journal-read { font-size:.75rem; border-bottom:1px solid var(--line-2); }
#about { grid-template-columns:.8fr 1.5fr; gap:2rem 5rem; }
.prose p:first-child { font-family:var(--f-disp); font-size:2rem; line-height:1.25; letter-spacing:-.015em; }
.prose p { font-size:1rem; }
.mk { font-size:.75rem; }.mv { font-size:1rem; }.mv.mono { font-size:.75rem; }
#work .rbody h3 { font-family:var(--f-disp); font-size:1.8rem; font-weight:400; line-height:1.1; }
.rorg,.yr { font-size:.75rem; }.rdesc { font-size:1rem; }.rdesc i { font-size:.75rem; }
.row:hover { background:var(--surface); box-shadow:none; }
.row::after { box-shadow:none; }
.lab-teaser { grid-template-columns:1.2fr 1fr; }
.lab-teaser h3 { font-family:var(--f-disp); font-size:clamp(3rem,5.6vw,5rem); letter-spacing:-.04em; }
.lab-board { background:#30342a; color:#e5e0d2; border:0; transform:rotate(3deg); transition:transform .5s var(--ease); }
.lab-board:hover { transform:rotate(0); }
.hex-preview i { background:#636653; }.hex-preview i.blue { background:#d2ccad; }.hex-preview i.red { background:#dd714d; }
.lab-board:hover .hex-preview i:not([class='blue']):not([class='red']) { background:#7c8069; }
.contact .sh-t { font-size:clamp(4rem,9vw,8rem); font-style:italic; line-height:.9; }
.contact-line { font-size:1rem; max-width:44ch; }
.contact-mail { font-family:var(--f-disp); font-size:clamp(1.75rem,5vw,4.5rem); letter-spacing:-.03em; }
.contact-mail::after { box-shadow:none; background:var(--accent); height:1px; }
.contact-links { font-size:.75rem; }
.foot { border-color:var(--line); }.foot-in { font-size:.75rem; }
.scroll-prog { height:2px; background:var(--accent); box-shadow:none; }
/* Journal: a magazine cover and a plain, comfortable article. */
.blog-main { max-width:1380px; }
.blog-hero { padding-bottom:2rem; grid-template-columns:1.4fr 1fr; }
.blog-title { font-family:var(--f-disp); font-size:clamp(5rem,11vw,10rem); letter-spacing:-.05em; line-height:.87; }
.blog-title .amber { font-style:italic; color:var(--accent); }
.blog-lede { font-size:1rem; }
.cat-chip { border:0; border-bottom:1px solid transparent; border-radius:0; color:var(--muted); font-size:.875rem; padding:.4rem .8rem; }
.cat-chip.active { background:none; border-color:var(--accent); color:var(--accent); }
.cat-chip:hover { border-color:var(--line-2); }
.post-list { gap:3.5rem; }
.post-card:first-child { gap:3.5rem; }
.post-card .post-cover { border-radius:0; }
.post-card:first-child .post-cover { height:400px; }
.post-card .match-art>span { font-size:clamp(4rem,8vw,7rem); }
.post-card h2 { font-family:var(--f-disp); font-size:2.5rem; line-height:1.07; }
.post-card:first-child h2 { font-size:clamp(2.6rem,4.7vw,4rem); }
.post-card:hover h2 { color:var(--accent); }
.post-meta { font-size:.75rem; }.post-tags .tag { border-radius:0; border:0; padding:.2rem .5rem .2rem 0; font-size:.75rem; color:var(--muted); }
.post-card:hover .post-cover { transform:translateY(-4px); }.post-cover { transition:transform .6s var(--ease); }
.post-body { font-family:var(--f-sans); font-size:1.0625rem; line-height:1.9; }
.post-view .post-title { font-family:var(--f-disp); font-size:clamp(3rem,6vw,5rem); line-height:1.02; }
.post-body h2 { font-family:var(--f-disp); font-size:2.4rem; font-weight:400; line-height:1.1; }
.post-body blockquote { font-family:var(--f-disp); font-size:1.9rem; line-height:1.2; }
.post-body code { background:var(--bg-2); color:var(--accent-d); }
.is-reading .post-view { max-width:700px; }
/* Preserve semantic game / article colors while fitting the surrounding paper theme. */
.lab-title,.lm-title { font-family:var(--f-disp); font-weight:400; }
.lab-lede,.lm-lede { color:var(--text); }
.lab-page,.lastmove-page,.lm-body { --accent:#526445; --accent-d:#405036; --accent-2:#b84025; }
.lm-feature { border-radius:0; background:var(--bg-2); }.lm-feature::before { display:none; }
.pick,.lm-btn { border-radius:0; background:none; }.pick.active { background:rgba(82,100,69,.08); }
.lm-node.empty:hover .nc { fill:#d6dacb; }
.lm-overlay { background:rgba(239,235,226,.98); border-radius:0; border:1px solid var(--line); }
.lm-verdict { text-shadow:none; font-weight:400; }.lm-verdict-sub { color:var(--text); }
.lm-btn.primary,.lm-btn.primary:hover { color:#fff6eb; background:var(--accent-2); box-shadow:none; }
.pred { background:var(--bg-2); border-radius:0; }
.winbar .seg.fr,.winbar .seg.pt { background:#b84025; color:#fff8ec; }
.winbar .seg.sn { background:#566949; color:#fff8ec; }
.sc-bar { background:var(--accent); }.tier.a .tier-b { background:#d69874; }
.album-glow { display:none; }.eq .bar { animation:none; background:var(--accent); opacity:.18; }
@media(min-width:1500px) { .portfolio .hero { min-height:900px; }.field-panel { height:520px; } }
@media(max-width:1050px) {
  .hero-name { font-size:clamp(5.75rem,11vw,8rem); }.field-panel { height:430px; margin-top:4rem; }
  .hero-layout { gap:1.5rem; }.case-study { gap:2rem; }.case-copy h3 { font-size:2.5rem; }
  .case-visual { padding:1.3rem; }.case-metrics { gap:2rem; }.journal-grid { gap:2rem; }
}
@media(max-width:800px) {
  .portfolio .hero { min-height:0; padding-top:7.5rem; }.hero-layout { grid-template-columns:1fr; gap:1rem; }
  .hero-name { font-size:clamp(5.2rem,17vw,8.5rem); }.hero-text { position:relative; }
  .field-panel { height:360px; margin:2.5rem .5rem 1rem; }.network-caption { font-size:.75rem; }
  .hero-bottom { margin-top:2rem; padding-top:1rem; }.hero-bottom>span { max-width:28ch; }
  .case-study,.case-reverse { grid-template-columns:1fr; gap:1.5rem; }.case-reverse .case-visual { order:0; }
  .case-visual { min-height:400px; padding:1.6rem; }.chart-word { font-size:4.5rem; }.study-chart svg { height:160px; }
  .case-copy h3 { font-size:3rem; }.case-copy { padding:.5rem 0; }.case-copy>p:not([class]) { max-width:55ch; }
  .sec { padding:5rem 0; }.sh-t { font-size:3.4rem; }.section-intro { margin-left:0; }
  .journal-card:nth-child(2) { padding-top:3rem; }.journal-art { height:250px; }.journal-card h3 { font-size:2rem; }
  .match-art>span { font-size:3.4rem; }.match-art>i { font-size:2rem; }
  #about { grid-template-columns:1fr; gap:2rem; }#about .meta-rows { grid-column:1; }
  .blog-hero { grid-template-columns:1fr; }.blog-title { font-size:clamp(5rem,16vw,8rem); }
  .post-card:first-child { gap:1.5rem; }.post-card:first-child .post-cover { height:320px; }
}
@media(max-width:550px) {
  .hero-name { font-size:clamp(4.8rem,19vw,7rem); }.hero-name .amber { padding-left:.12em; }
  .hero-links { gap:.8rem; }.hero-links a { font-size:.75rem; }.hero-links .cta,.hero-links .cv-btn { padding:.8rem; }
  .field-panel { height:300px; margin:2.75rem .2rem .5rem; }.field-note { font-size:1rem; }
  .hero-bottom { font-size:.75rem; gap:1rem; }.hero-bottom>a { font-size:.75rem; white-space:nowrap; }
  .sh { gap:.75rem; }.sh-t { font-size:2.9rem; }.section-link { font-size:.75rem; }.section-intro { margin-top:1.3rem; margin-bottom:2.5rem; }
  .case-copy h3 { font-size:2.65rem; }.case-visual { min-height:370px; padding:1.3rem; }.chart-word { font-size:3.8rem; }.study-chart svg { height:135px; }
  .case-bottom { gap:1rem; }.case-metrics { gap:2.5rem; }.featured-work { gap:3.5rem; }
  .journal-grid,.lab-teaser { grid-template-columns:1fr; }.journal-card:nth-child(2) { padding:0; }.journal-grid { gap:3rem; }
  .journal-art { height:280px; }.journal-card h3 { font-size:2.4rem; }.match-art>span { font-size:4.5rem; }
  .lab-board { margin:1rem .5rem; }.lab-teaser h3 { font-size:3.5rem; }.contact .sh-t { font-size:4.5rem; }
  .post-card:first-child .post-cover { height:280px; }.post-card:first-child h2 { font-size:2.8rem; }.post-view .post-title { font-size:3rem; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-name .nl>span,.hero-name .nl:nth-child(2)>span { animation:none!important; opacity:1; transform:none!important; }
  .case-study.in .chart-trace { animation:none; }.case-study:hover .case-visual,.case-reverse:hover .case-visual,.journal-card:hover .journal-art,.post-card:hover .post-cover { transform:none; }
}