.portfolio-hero { grid-template-columns:repeat(12,minmax(0,1fr)); }
.portfolio-hero .hero-heading { grid-column:1/10; grid-row:1; padding-bottom:24px; }
.portfolio-hero h1 { white-space:normal; font-size:var(--type-h1); max-width:19ch; line-height:1.12; }
.portfolio-hero .hero-role { margin-left:0; }
.portfolio-hero .hero-copy { grid-column:1/9; grid-row:2; max-width:62ch; }
.portfolio-hero .hero-intro { max-width:58ch; }
.portfolio-hero .hero-visual { grid-column:10/-1; grid-row:1/3; max-width:200px; align-self:center; justify-self:end; }
.portfolio-index { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--line); margin-top:16px; }
.portfolio-index a { display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:12px; padding:24px; position:relative; min-width:0; text-decoration:none; transition:background-color var(--normal) var(--easing); }
.portfolio-index a+a { border-left:1px solid var(--line); }
.portfolio-index strong { font-weight:500; padding-right:16px; }
.portfolio-index a>span:last-of-type { color:var(--secondary); font-size:var(--type-small); align-self:end; }
.portfolio-index i { color:var(--accent); font-style:normal; position:absolute; right:16px; top:24px; transition:transform var(--normal) var(--easing); }
.portfolio-index a:hover { background:var(--surface); }
.portfolio-index a:hover i { transform:translate(2px,-2px); }
.portfolio-anchor { position:absolute; width:0; height:0; pointer-events:none; }
.portfolio-tour { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:50; width:min(800px,calc(100% - 32px)); padding:18px 24px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-top:2px solid var(--signal); box-shadow:0 8px 32px #0002; }
.portfolio-tour[hidden], [data-portfolio-tour-start][hidden] { display:none; }
.portfolio-tour-heading { display:flex; align-items:center; gap:12px; }
.portfolio-tour-heading strong { font-size:var(--type-body); font-weight:500; }
.portfolio-tour-count { font:400 var(--type-meta)/1.5 var(--font-mono); color:var(--accent); flex:none; }
.portfolio-tour-close { margin-left:auto; min-height:44px; padding:8px; font-size:var(--type-small); }
.portfolio-tour p { color:var(--secondary); font-size:var(--type-small); margin:0 0 12px; max-width:72ch; }
.portfolio-tour-controls { display:flex; gap:12px; justify-content:flex-end; }
.portfolio-tour-controls button { min-height:44px; padding:8px 16px; border:1px solid var(--line); font-size:var(--type-small); }
.portfolio-tour-controls button:last-child { background:var(--ink); color:var(--background); border-color:var(--ink); }
.portfolio-tour-controls button:disabled { opacity:.45; cursor:default; }
.portfolio-tour-target { border-color:var(--signal); }
body.portfolio-tour-active { padding-bottom:var(--portfolio-tour-space,240px); }
@media(max-width:1000px) {
  .portfolio-hero { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .portfolio-hero .hero-heading,.portfolio-hero .hero-copy { grid-column:1/6; }
  .portfolio-hero .hero-visual { grid-column:6/-1; }
  .portfolio-index { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portfolio-index a:nth-child(3) { border-left:0; }
  .portfolio-index a:nth-child(n+3) { border-top:1px solid var(--line); }
}
@media(max-width:600px) {
  .portfolio-hero { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .portfolio-hero .hero-heading { grid-column:1/-1; grid-row:1; }
  .portfolio-hero .hero-copy { grid-column:1/-1; grid-row:2; }
  .portfolio-hero .hero-visual { grid-column:1/-1; grid-row:3; max-width:none; justify-self:start; margin:0; }
  .portfolio-hero .hero-visual::before { display:none; }
  .portfolio-hero .profile-portrait { gap:20px; }
  .portfolio-hero .profile-portrait-image { width:100%; }
  .portfolio-hero .hero-actions { gap:12px; }
  .portfolio-hero .hero-actions .button { width:100%; justify-content:center; }
  .portfolio-index a { padding:20px 16px; gap:10px; }
  .portfolio-tour { bottom:8px; width:calc(100% - 16px); padding:10px 16px 14px; }
  .portfolio-tour-heading { gap:8px; }
  .portfolio-tour-controls { justify-content:stretch; }
  .portfolio-tour-controls button { flex:1; }
}
@media(max-width:360px) { .portfolio-index { grid-template-columns:1fr; } .portfolio-index a+a { border-left:0; border-top:1px solid var(--line); } }
.portfolio-index .portfolio-evidence-metric { font:500 var(--type-metric)/1.2 var(--font-display); color:var(--accent); padding-right:0; letter-spacing:-.035em; }
.portfolio-index .mono-label { padding-right:12px; }
.portfolio-index i { top:20px; right:12px; }
@media(min-width:1001px) and (max-width:1250px) { .portfolio-index a { padding-inline:16px; } }
/* Compact by default; explanatory text is optional and never hides project content. */
.portfolio-tour { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 16px; width:min(760px,calc(100% - 32px)); padding:8px 12px; }
.portfolio-tour-heading { min-width:0; min-height:44px; }
.portfolio-tour-heading strong { font-size:var(--type-small); }
.portfolio-tour-controls { gap:6px; }
.portfolio-tour-controls button { padding:8px 10px; }
.portfolio-tour-controls button:last-child { background:transparent; color:var(--ink); border-color:var(--line); }
.portfolio-tour-controls [data-tour-next] { background:var(--ink); color:var(--background); border-color:var(--ink); }
.portfolio-tour p { grid-column:1/-1; margin:4px 0 8px; }
.portfolio-tour p[hidden] { display:none; }
@media(max-width:600px) {
  .portfolio-tour { grid-template-columns:1fr; width:calc(100% - 16px); padding:6px 10px; gap:4px; }
  .portfolio-tour-heading { min-height:36px; }
  .portfolio-tour-controls { gap:6px; }
  .portfolio-tour-controls button { padding-inline:6px; }
}