/* pages.css - portfolio chrome, mature direction (Stage 8) */
[data-type]{min-height:1.2em}
body{line-height:1.6}
::selection{background:var(--acc);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.pnav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:24px;padding:14px 24px;background:var(--bg-light);border-bottom:1.5px solid var(--text-dark)}
.plogo{font-weight:700;font-size:18px;color:var(--text-dark);text-decoration:none;letter-spacing:-.02em}
.pnav nav{display:flex;gap:18px;margin-left:auto}
.pnav nav a{font-family:var(--mono);font-size:12px;color:var(--text-dark);text-decoration:none;opacity:.65}
.pnav nav a:hover{opacity:1}.pnav nav a.on{opacity:1;font-weight:700}
.pcta{font-family:var(--sans);font-weight:600;font-size:13px;color:#fff;background:var(--text-dark);padding:10px 18px;border-radius:6px;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-block}
.pcta:hover{transform:translateY(-1px);box-shadow:0 4px 0 rgba(28,28,30,.28)}
.phead{padding:88px 24px 34px;max-width:1000px;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:12px;color:#666;letter-spacing:.08em;margin-bottom:16px}
.ph1{font-size:clamp(2.4rem,6vw,4rem);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.psub{margin-top:16px;font-size:1.1rem;font-weight:400;color:#555;max-width:680px;line-height:1.7}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px 90px}
.h2{font-size:1.5rem;font-weight:700;margin:44px 0 10px;letter-spacing:-.01em}
.rev{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,.9,.3,1)}
.rev.show{opacity:1;transform:none}
.fbar{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0}
.fbtn{font-family:var(--mono);font-size:12px;padding:7px 14px;border:1.25px solid var(--text-dark);border-radius:999px;background:#fff;cursor:pointer;transition:background .15s,color .15s}
.fbtn.on{background:var(--text-dark);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.pcard{background:#fff;border:1.5px solid var(--text-dark);border-radius:8px;padding:22px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--text-dark);transition:transform .12s,box-shadow .12s}
.pcard:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--text-dark)}
.pc-top{display:flex;justify-content:space-between;align-items:center}
.pc-mon{width:40px;height:40px;border-radius:6px;background:var(--text-dark);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.pc-cat{font-family:var(--mono);font-size:11px;color:#666}
.pc-name{font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
.pc-desc{font-size:.95rem;font-weight:400;color:#555;line-height:1.65}
.pc-tags{display:flex;gap:8px;flex-wrap:wrap}
.pc-tags i{font-style:normal;font-family:var(--mono);font-size:10.5px;border:1px solid #c9c9c9;border-radius:999px;padding:3px 9px;color:#666}
.flip{font-family:var(--mono);font-size:11px;margin-top:auto}
.flip .a{color:#ff3b30;text-decoration:line-through}
.flip .b{color:#00a82d;opacity:0;transition:opacity .3s}
.flip.flipped .b{opacity:1}
.flip .arw{color:#999;margin:0 6px}
.empty{font-family:var(--mono);font-size:13px;color:#666;padding:30px 0;display:none}
.bio{font-size:1.05rem;font-weight:400;line-height:1.8;color:#c9c9c9;max-width:760px;margin:14px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.chip{border:1.25px solid var(--text-dark);border-radius:999px;padding:7px 14px;font-family:var(--mono);font-size:12px;background:#fff}
.chip small{color:#888}
.tl{border-left:1.5px solid var(--text-dark);margin:30px 0 0 8px;padding-left:26px;display:flex;flex-direction:column;gap:30px}
.tl-item{position:relative}
.tl-item::before{content:'';position:absolute;left:-32px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--bg-light);border:2px solid var(--text-dark)}
.tl-when{font-family:var(--mono);font-size:12px;color:var(--acc);font-weight:700}
.tl-role{font-weight:700;font-size:1.1rem;margin:4px 0;letter-spacing:-.01em}
.tl-desc{font-size:.95rem;font-weight:400;color:#555;line-height:1.65}
.darkband{background:var(--bg-dark);color:#fff;padding:76px 24px}
.darkband .in{max-width:1000px;margin:0 auto}
.crow{margin:20px 0;max-width:720px}
.clab{font-family:var(--mono);font-size:12px;color:#666;margin-bottom:8px;display:block}
.cin{width:100%;border:1.5px solid var(--text-dark);border-radius:8px;background:#fff;padding:14px 16px;font-family:var(--sans);font-size:1rem}
.cin:focus{border-color:var(--acc);outline:none}
textarea.cin{min-height:160px;resize:vertical}
.intent{display:flex;gap:8px}
.mailrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mailbox{font-family:var(--mono);font-size:14px;font-weight:700}
.copybtn{font-family:var(--mono);font-size:11px;border:1.25px solid var(--text-dark);background:#fff;border-radius:6px;padding:8px 12px;cursor:pointer}
.copybtn:hover{background:var(--text-dark);color:#fff}
.take{display:grid;gap:12px;max-width:640px}
.take div{display:flex;gap:12px;font-size:1rem;font-weight:400;line-height:1.6;color:#444}
.take b{font-family:var(--mono);color:var(--acc);font-weight:700}
.note{font-family:var(--mono);font-size:11px;color:#777;margin-top:14px;line-height:1.7}
.beat{margin:40px 0}
.beat-n{font-family:var(--mono);font-size:12px;color:var(--term-green);font-weight:700}
.beat h3{font-size:1.45rem;font-weight:700;margin:6px 0 8px;letter-spacing:-.01em}
.beat p{color:#c9c9c9;font-weight:400;line-height:1.75;max-width:720px}
.path{font-family:var(--mono);font-size:13px;margin:12px 0;padding:14px 18px;border-radius:8px;border:1.5px solid;max-width:720px}
.path.bad{color:#ff6b60;border-color:#ff3b30;text-decoration:line-through}
.path.good{color:#7dffa8;border-color:#00ff41}
.pfoot{border-top:1.5px solid var(--text-dark);background:var(--bg-light);padding:34px 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.fmono{font-family:var(--mono);font-size:11px;color:#777}
.cursor::after{content:'▌';animation:bdcur 1s steps(1) infinite}
@keyframes bdcur{50%{opacity:0}}
@media(max-width:640px){.pnav{padding:12px 16px}.pnav nav{gap:12px}}
@media(max-width:640px){
  .pnav{flex-wrap:wrap;row-gap:0;padding:10px 16px 0}
  .pnav nav{order:3;flex-basis:100%;margin-left:0;justify-content:space-between;gap:0;padding:6px 0 10px}
  .pnav nav a{padding:8px 0;font-size:12.5px}
  .pcta{margin-left:auto;padding:9px 14px;font-size:12px;border-radius:6px}
  .phead{padding:56px 20px 26px}
  .wrap{padding:0 20px 70px}
  .fbtn{padding:10px 16px}
  .copybtn{padding:10px 14px}
  .pcard{padding:18px}
  .darkband{padding:56px 20px}
  .tl{padding-left:20px;margin-left:6px}
  .tl-item::before{left:-26px}
  .pfoot{padding:28px 20px calc(28px + env(safe-area-inset-bottom))}
  .path{font-size:12px}
  .cin{font-size:16px}
  .mailbox{font-size:13px}
}

.pnav{transition:transform .25s ease}
.pnav.hide{transform:translateY(-100%)}
body.rm .pnav{transition:none}
.stat{font-family:var(--mono);font-size:11px;color:#666}
.statrow{display:flex;gap:22px;flex-wrap:wrap;margin:16px 0;font-family:var(--mono);font-size:12px;color:#9a9a9a}
.statrow span{border-left:2px solid var(--term-green);padding-left:10px}
.post{max-width:760px;margin:0 auto;padding:0 24px 90px}
.postmeta{font-family:var(--mono);font-size:12px;color:#888;margin:18px 0 34px}
.post p{font-size:1.05rem;line-height:1.8;color:#333;margin:0 0 18px}
.post h2{font-size:1.4rem;font-weight:700;margin:38px 0 12px;letter-spacing:-.01em}
.post pre{background:#1c1c1e;color:#e8e6e0;border-radius:8px;padding:18px 20px;overflow-x:auto;margin:0 0 22px;font-family:var(--mono);font-size:12.5px;line-height:1.7}
.post ol{margin:0 0 18px 22px;color:#333}
.post ol li{font-size:1.02rem;line-height:1.8;margin-bottom:8px}
.pull{border-left:3px solid var(--acc);padding:6px 0 6px 18px;margin:30px 0;font-size:1.25rem;font-weight:700;line-height:1.5;letter-spacing:-.01em}
.postend{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px}
.ghostlink{background:transparent;color:var(--text-dark);border:2px solid var(--text-dark);box-shadow:none}
.ghostlink:hover{box-shadow:0 4px 0 rgba(28,28,30,.28)}
.wrow{display:block;border:1.5px solid var(--text-dark);border-radius:8px;padding:20px 22px;margin:0 0 14px;text-decoration:none;color:var(--text-dark);transition:transform .12s,box-shadow .12s;background:#fff}
.wrow:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--text-dark)}
.wrow .wt{font-weight:700;font-size:1.15rem}
.wrow .wm{font-family:var(--mono);font-size:11px;color:#888;margin-top:6px}
.wrow.draft{opacity:.55;border-style:dashed;background:transparent}
.wrow.draft:hover{transform:none;box-shadow:none}
.post{max-width:760px;margin:0 auto;padding:0 24px 90px}
.postmeta{font-family:var(--mono);font-size:12px;color:#888;margin:18px 0 34px}
.post p{font-size:1.05rem;line-height:1.8;color:#333;margin:0 0 18px}
.post h2{font-size:1.4rem;font-weight:700;margin:38px 0 12px;letter-spacing:-.01em}
.post pre{background:#1c1c1e;color:#e8e6e0;border-radius:8px;padding:18px 20px;overflow-x:auto;margin:0 0 22px;font-family:var(--mono);font-size:12.5px;line-height:1.7}
.post ol{margin:0 0 18px 22px;color:#333}
.post ol li{font-size:1.02rem;line-height:1.8;margin-bottom:8px}
.pull{border-left:3px solid var(--acc);padding:6px 0 6px 18px;margin:30px 0;font-size:1.25rem;font-weight:700;line-height:1.5;letter-spacing:-.01em}
.postend{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px}
.ghostlink{background:transparent;color:var(--text-dark);border:2px solid var(--text-dark);box-shadow:none}
.ghostlink:hover{box-shadow:0 4px 0 rgba(28,28,30,.28)}
.wrow{display:block;border:1.5px solid var(--text-dark);border-radius:8px;padding:20px 22px;margin:0 0 14px;text-decoration:none;color:var(--text-dark);transition:transform .12s,box-shadow .12s;background:#fff}
.wrow:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--text-dark)}
.wrow .wt{font-weight:700;font-size:1.15rem}
.wrow .wm{font-family:var(--mono);font-size:11px;color:#888;margin-top:6px}
.wrow.draft{opacity:.55;border-style:dashed;background:transparent}
.wrow.draft:hover{transform:none;box-shadow:none}
.cta-short{display:none}
@media(max-width:400px){.cta-full{display:none}.cta-short{display:inline}}
.pnav:focus-within{transform:none !important}
html{scroll-padding-top:80px}
@media(max-width:640px){html{scroll-padding-top:110px}}
@media(max-width:360px){.pnav nav a{font-size:11.5px}}