/* NETWORK / 02 — editorial rhythm, precise diagrams, restrained motion. */
:root { --maxw:1280px; --muted:#8b98ab; --faint:#7c8a9e; --line:rgba(163,190,224,.15); --rail:0px; }
[hidden] { display:none!important; }
.bg-grid { background-size:80px 80px; opacity:.5; }
.bg-fade { background:radial-gradient(ellipse at 85% 12%,rgba(61,108,177,.12),transparent 55%); }
.top { padding:1.4rem var(--pad); }
.brand { letter-spacing:-.04em; }
.brand-node { border-radius:2px; transform:rotate(45deg); }
.links { gap:1.5rem; }
.links > a { font-size:.875rem; }
.lang-btn { font-size:.875rem; }
.portfolio .hero { min-height:min(900px,100svh); display:flex; flex-direction:column; justify-content:center; padding:9rem 0 2rem; }
.hero-layout { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:2rem; flex:1; }
.hero-text { min-width:0; }
.eyebrow { font-size:.75rem; letter-spacing:.11em; margin-bottom:2rem; }
.eyebrow .dot,.status .live-dot { animation:none; box-shadow:none; width:5px; height:5px; }
.hero-name { font-size:clamp(4rem,7.8vw,7rem); font-weight:500; letter-spacing:-.065em; margin-bottom:2rem; }
.hero-name .amber { color:#91b9f3; background:none; -webkit-text-fill-color:currentColor; }
.hero-name .nl:nth-child(2)>span { animation:nameRise 1.1s var(--ease) .27s both; }
.lede { font-size:clamp(1.1rem,1.7vw,1.4rem); max-width:32ch; line-height:1.55; color:var(--text); }
.status { font-size:.75rem; max-width:46ch; gap:.45rem; line-height:1.8; }
.hero-links { gap:1.2rem; margin-bottom:1rem; }
.hero-links a { font-size:.875rem; }
.hero-links .cta { color:var(--bg)!important; background:var(--ink); padding:.8rem 1.2rem; border:none; border-radius:3px; font-weight:500; }
.hero-links .cta:hover { background:var(--accent); }
.hero-links .cv-btn { border-radius:3px; padding:.8rem 1rem; }
.network-panel { height:clamp(390px,42vw,540px); position:relative; display:flex; flex-direction:column; background:radial-gradient(ellipse at 50% 50%,rgba(76,127,202,.13),transparent 65%); }
.network-caption,.network-foot { display:flex; align-items:center; gap:.7rem; font-family:var(--f-mono); font-size:.75rem; color:var(--muted); }
.network-caption { border-top:1px solid var(--line); padding-top:1rem; }
.network-caption>span:first-child { color:var(--accent); }
.network-foot { border-bottom:1px solid var(--line); padding-bottom:1rem; }
.network-foot>span:last-child { margin-left:auto; font-size:.65rem; }
.signal-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); }
.portfolio .net { position:relative; inset:auto; width:100%; flex:1; min-height:0; mask-image:none; -webkit-mask-image:none; opacity:1; will-change:auto; }
.node-label { font-size:2.5px; }
.edge { stroke:rgba(132,169,218,.27); }
.node-c { stroke:#8299bb; fill:#101925; }
.node.hub .node-c { stroke:var(--accent); }
.node.src .node-c { animation:none; filter:drop-shadow(0 0 1.5px var(--glow-2)); }
.hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:3rem; margin-top:2rem; font-family:var(--f-mono); font-size:.75rem; color:var(--muted); }
.hero-bottom a { color:var(--text); }
.flow::before { display:none; }
.sec { padding:6.5rem 0; border-top:1px solid var(--line); }
.marker { display:none; }
.sh { margin-bottom:1.2rem; gap:1.3rem; }
.sh-k { font-size:.75rem; }
.sh-t { font-size:clamp(2rem,4.2vw,3.4rem); font-weight:400; letter-spacing:-.055em; }
.sh-t::after { display:none; }
.section-intro { max-width:52ch; margin:0 0 3rem 2.4rem; color:var(--muted); font-size:1rem; }
.section-link { margin-left:auto; font-size:.875rem; border-bottom:1px solid var(--line-2); white-space:nowrap; }
.featured-work { display:grid; gap:2rem; }
.case-study { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:5px; overflow:hidden; background:var(--bg-2); transition:border-color .4s,transform .6s var(--ease); }
.case-study:hover { border-color:rgba(135,174,229,.5); }
.case-visual { display:flex; flex-direction:column; justify-content:space-between; min-height:420px; padding:1.7rem; overflow:hidden; }
.wind-visual { background:#b5cbe5; color:#172d49; }
.battery-visual { background:#15253b; color:#abc6ed; }
.visual-label,.visual-bottom { display:flex; justify-content:space-between; gap:1rem; font-family:var(--f-mono); font-size:.75rem; }
.visual-label { border-bottom:1px solid currentColor; padding-bottom:1rem; }
.visual-bottom { align-items:center; }
.visual-bottom>span:last-child { font-size:1.7rem; transition:transform .4s; }
.case-study:hover .visual-bottom>span:last-child { transform:translate(4px,-4px); }
.forecast-diagram { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:2rem 0; position:relative; font-family:var(--f-mono); font-size:.7rem; }
.forecast-diagram::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:#6486b1; }
.diagram-input,.diagram-output,.diagram-branches { z-index:1; position:relative; }
.diagram-input,.diagram-output { padding:1rem .6rem; background:#b5cbe5; }
.diagram-output { border:1px solid #5579a5; }
.diagram-branches { display:grid; gap:1.2rem; padding:1.2rem 0; border-left:1px solid #6486b1; border-right:1px solid #6486b1; }
.diagram-branches>span { padding:.8rem 1rem; border:1px solid #6486b1; background:#c8d9ed; transition:background .4s,transform .5s var(--ease); }
.case-study:hover .diagram-branches>span { background:#deebfa; transform:translateX(3px); }
.case-study:hover .diagram-branches>span:nth-child(2) { transition-delay:80ms; }
.case-study:hover .diagram-branches>span:nth-child(3) { transition-delay:160ms; }
.twin-diagram { width:245px; height:245px; position:relative; margin:1.5rem auto; border:1px solid #476187; border-radius:50%; display:grid; place-items:center; font-family:var(--f-mono); }
.twin-diagram::before,.twin-diagram::after { content:''; position:absolute; background:#476187; }
.twin-diagram::before { width:100%; height:1px; }
.twin-diagram::after { width:1px; height:100%; }
.twin-core { position:relative; z-index:1; background:#15253b; border:1px solid #7797c4; padding:1.5rem; border-radius:50%; font-size:.7rem; text-align:center; line-height:2; transition:box-shadow .5s; }
.twin-core b { font-size:1.2rem; font-weight:500; }
.twin-node { position:absolute; z-index:2; background:#15253b; border:1px solid #5877a2; padding:.45rem .8rem; font-size:.7rem; }
.n1 { top:0; left:50%; transform:translate(-50%,-50%); }.n2 { right:0; top:50%; transform:translate(50%,-50%); }.n3 { bottom:0; left:50%; transform:translate(-50%,50%); }.n4 { left:0; top:50%; transform:translate(-50%,-50%); }
.case-study:hover .twin-core { box-shadow:0 0 0 16px rgba(132,175,236,.05),0 0 0 38px rgba(132,175,236,.025); }
.case-copy { display:flex; flex-direction:column; padding:2.5rem; }
.case-category { color:var(--accent); font-family:var(--f-mono); font-size:.75rem; margin-bottom:1rem; }
.case-copy h3 { color:var(--ink); font-family:var(--f-disp); font-size:clamp(1.8rem,2.6vw,2.6rem); font-weight:400; letter-spacing:-.04em; line-height:1.13; margin-bottom:1.2rem; }
.case-copy>p:not([class]) { font-size:1rem; line-height:1.7; }
.case-metrics { display:flex; gap:2.8rem; margin:1.8rem 0 .7rem; }
.case-metrics>div { display:flex; flex-direction:column; gap:.15rem; }
.case-metrics strong { font-family:var(--f-disp); font-weight:400; font-size:2.7rem; line-height:1.1; color:var(--ink); letter-spacing:-.06em; }
.case-metrics strong>span { font-size:1.3rem; margin-left:.1rem; }
.case-metrics div>span,.case-note { font-size:.75rem; color:var(--muted); }
.case-note { margin-bottom:1.6rem; }
.case-bottom { margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between; font-size:.75rem; }
.case-link { color:var(--ink); }
.case-reverse .case-visual { order:2; }
.project-archive { margin-top:3rem; }
.project-archive summary { display:flex; align-items:center; justify-content:space-between; padding:1.5rem 0; border-top:1px solid var(--line); cursor:pointer; font-family:var(--f-disp); font-size:1.25rem; color:var(--ink); list-style:none; }
.project-archive summary::-webkit-details-marker { display:none; }
.archive-count { font-family:var(--f-mono); font-size:.875rem; color:var(--muted); }
.archive-count>span { display:inline-block; margin-left:1.3rem; transition:transform .3s; }
.project-archive[open] .archive-count>span { transform:rotate(45deg); }
.project-archive .row { border-radius:0; }
.journal-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:3rem; }
.journal-card { display:block; min-width:0; }
.journal-art { height:280px; overflow:hidden; margin-bottom:1.5rem; border-radius:3px; }
.match-art { position:relative; display:flex; justify-content:center; align-items:center; gap:1.4rem; background:#122339; border:1px solid #263d5c; font-family:var(--f-disp); color:#b0c7e9; }
.match-art>span { font-size:clamp(2rem,4.4vw,4.5rem); letter-spacing:-.08em; font-weight:500; transition:transform .6s var(--ease); }
.match-art>i { font-style:normal; font-size:2rem; color:#7189aa; }
.match-art>small { position:absolute; bottom:1.4rem; left:1.5rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; }
.journal-card:hover .match-art>span:first-child { transform:translateX(-6px); }
.journal-card:hover .match-art>span:nth-child(3) { transform:translateX(6px); }
.journal-album { background:#1a1e26; display:flex; justify-content:center; padding:1.5rem; }
.journal-album img { width:100%; height:100%; object-fit:contain; transition:transform .7s var(--ease); }
.journal-card:hover img { transform:scale(1.04) rotate(-2deg); }
.journal-meta { font-family:var(--f-mono); font-size:.75rem; color:var(--muted); margin-bottom:.7rem; }
.journal-card h3 { font-family:var(--f-disp); color:var(--ink); font-weight:400; font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:-.035em; line-height:1.3; max-width:30ch; }
.journal-read { display:inline-block; font-size:.875rem; margin-top:1.3rem; color:var(--accent); }
#about { display:grid; grid-template-columns:1fr 1.5fr; column-gap:4rem; }
#about .sh { align-self:start; }
#about .meta-rows { grid-column:2; margin-top:2rem; }
.prose p:first-child { font-size:1.35rem; }
#work .list { margin-top:2.5rem; }
#work .row { grid-template-columns:110px 1fr; border-radius:0; padding:2rem 0; }
#work .rbody { display:grid; grid-template-columns:1fr 1.5fr; column-gap:2rem; }
#work .rbody h3 { grid-column:1; font-size:1.25rem; }
#work .rorg { grid-column:1; align-self:start; }
#work .rdesc { grid-column:2; grid-row:1/3; }
.lab-teaser { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:5rem; margin-top:2.5rem; }
.lab-teaser h3 { font-family:var(--f-disp); font-size:clamp(2rem,4vw,3.5rem); line-height:1.1; font-weight:400; letter-spacing:-.05em; color:var(--ink); margin-bottom:1.5rem; }
.lab-teaser p:not(.eyebrow) { max-width:47ch; margin-bottom:1.8rem; }
.lab-teaser .eyebrow { color:var(--muted); }
.lab-board { display:flex; flex-direction:column; align-items:center; gap:2rem; padding:2rem; border:1px solid var(--line); background:var(--bg-2); font-family:var(--f-mono); font-size:.75rem; }
.hex-preview { display:grid; grid-template-columns:repeat(4,38px); gap:5px; transform:skewY(-8deg); padding:1rem; }
.hex-preview i { width:38px; height:43px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background:#2b3544; transition:background .4s; }
.hex-preview i.blue { background:#6aa6ff; }.hex-preview i.red { background:#df706a; }
.lab-board:hover .hex-preview i:not([class='blue']):not([class='red']) { background:#3a4d67; }
.contact .sh-t { font-size:clamp(2.5rem,6vw,5rem); }
.contact-line { margin-top:2rem; max-width:44ch; color:var(--text); }
.contact-mail { font-size:clamp(1.3rem,4.2vw,3.5rem); }
.lift { opacity:1; transform:none; }
html.motion-ready .lift:not(.in) { opacity:0; transform:translateY(24px); }
.lift.in { transition:opacity .8s var(--ease),transform .8s var(--ease); }
@media (max-width:1050px) {
  .hero-layout { gap:1rem; }.hero-name { font-size:clamp(3.5rem,8.5vw,6rem); }
  .links { gap:1rem; }.case-copy { padding:1.8rem; }.case-visual { padding:1.3rem; }.forecast-diagram { gap:.4rem; }.diagram-branches>span { padding:.8rem .5rem; }
  .network-foot>span:last-child { display:none; }
}
@media (max-width:1000px) {
  .links > a,.links .lang { display:none; }.menu-btn { display:flex; }
}
@media (max-width:800px) {
  .portfolio .hero { min-height:auto; padding-top:8rem; align-items:stretch; }
  .hero-layout { grid-template-columns:1fr; gap:2.5rem; }
  .hero-name { font-size:clamp(4rem,14vw,7rem); }
  .network-panel { height:400px; }.network-caption { justify-content:space-between; }
  .hero-bottom { padding-top:1rem; margin-top:2rem; }.hero-bottom>span { max-width:28ch; }
  .case-study { grid-template-columns:1fr; }.case-visual { min-height:340px; }.case-reverse .case-visual { order:0; }
  .forecast-diagram { justify-content:center; gap:2rem; font-size:.8rem; }
  .twin-diagram { width:210px; height:210px; }
  .journal-grid { gap:1.5rem; }.journal-art { height:220px; }
  #about { grid-template-columns:1fr; gap:1.5rem; }#about .meta-rows { grid-column:1; }
  #work .rbody { display:block; }#work .row { grid-template-columns:65px 1fr; }
  .lab-teaser { gap:2rem; }.lab-board { padding:1.3rem; }
  .sec { padding:4.5rem 0; }.section-intro { margin-left:0; }
}
@media (max-width:550px) {
  .hero-name { font-size:clamp(3.6rem,15vw,5rem); }.eyebrow { font-size:.7rem; }
  .network-panel { height:340px; }.network-caption { font-size:.65rem; }
  .hero-bottom { font-size:.65rem; }.hero-bottom>span { max-width:22ch; }.hero-bottom a { white-space:nowrap; }
  .case-metrics { gap:2rem; }.case-copy { padding:1.5rem; }.case-copy h3 { font-size:1.85rem; }
  .visual-label,.visual-bottom { font-size:.65rem; }.forecast-diagram { gap:.65rem; font-size:.65rem; }
  .journal-grid,.lab-teaser { grid-template-columns:1fr; }.journal-grid { gap:2.5rem; }.journal-art { height:250px; }
  .sh { flex-wrap:wrap; gap:.8rem; }.sh-t { font-size:2.15rem; }.section-link { font-size:.75rem; }
  .mrow { padding:1rem 0; }.meta-rows .mv { overflow-wrap:anywhere; }
  #work .row { grid-template-columns:1fr; gap:.5rem; }.lab-board { padding:2rem; }
}
@media (prefers-reduced-motion:reduce) {
  html.motion-ready .lift:not(.in) { opacity:1; transform:none; }
  .hero-name .nl>span { animation:none!important; transform:none!important; }
  .case-study:hover *, .journal-card:hover *, .lab-board:hover * { transform:none; }
}