/* ---------- portfolio-specific ---------- */
.page-head{ padding-block: clamp(24px,4vw,48px) clamp(28px,4vw,52px); }
.page-head h1{ font-family:var(--display); font-weight:600; font-size:clamp(2.3rem,5vw,3.4rem); line-height:1.05; margin:.3rem 0 .9rem; }
.page-head p{ max-width:62ch; color:#b3bac5; margin:0; }

.feature{ border-top:1px solid var(--line); padding-top: clamp(30px,4vw,48px); }
.feature h2{ font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.08; margin:.4rem 0 .6rem; max-width:22ch; }
.feature .meta{ font-size:.9rem; color:var(--ink-soft); margin:0 0 1.6rem; }
.feature p{ max-width:66ch; margin:0 0 1rem; }

.feature h3{
  font-family:var(--display); font-weight:600; font-size:1.15rem;
  margin:2.2rem 0 .7rem; color:var(--ink);
}
.feature h3 span{ color:var(--honey); font-weight:500; margin-right:.5em; }

figure{ margin:1.8rem 0; }
figure img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--card);
}
figcaption{ margin-top:.7rem; font-size:.85rem; color:var(--ink-soft); line-height:1.55; max-width:74ch; }

.perf{ width:100%; border-collapse:collapse; margin:1rem 0 0; font-size:.9rem; }
.perf th, .perf td{ text-align:left; padding:.6rem .8rem .6rem 0; border-bottom:1px solid var(--line); vertical-align:top; }
.perf th{ font-weight:600; color:var(--ink-soft); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.perf td:last-child{ color:var(--ink-soft); }
.perf-wrap{ overflow-x:auto; }

.gaps{ margin:1rem 0 0; padding:0; list-style:none; }
.gaps li{ position:relative; padding-left:1.3rem; margin-bottom:.7rem; max-width:66ch; }
.gaps li::before{ content:""; position:absolute; left:0; top:.68em; width:6px; height:6px; border-radius:50%; background:var(--ink-soft); }

.grid{ display:flex; flex-direction:column; gap:1rem; }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(20px,3vw,28px); display:flex; flex-direction:column;
}
.card h3{ font-family:var(--display); font-weight:600; font-size:1.2rem; margin:.35rem 0 .5rem; line-height:1.2; }
.card .when{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.card p{ margin:0 0 .9rem; font-size:.95rem; color:#b3bac5; }
.card .tech{ margin:auto 0 .9rem; font-size:.8rem; color:var(--ink-soft); }
.card .links{ display:flex; flex-wrap:wrap; gap:.5rem; }
.card .links a{
  text-decoration:none; font-size:.83rem;
  background:var(--raised); border:1px solid var(--line); border-radius:999px;
  padding:.35em .9em; color:var(--ink);
}
.card .links a:hover{ border-color:var(--honey); color:var(--honey); }
.card .links a[aria-disabled]{ opacity:.55; pointer-events:none; }

.card.wide{ grid-column:1/-1; }
.card.wide .wide-in{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:1.4rem 2.6rem; align-items:start; }
.card.wide h3{ font-size:1.45rem; }
.tally{ margin:0; border-top:1px solid var(--line); }
.tally div{ display:flex; gap:1rem; align-items:baseline; padding:.5rem 0; border-bottom:1px solid var(--line); }
.tally dt{ font-weight:600; font-size:1rem; min-width:4.2em; flex:none; font-variant-numeric:tabular-nums; }
.tally dd{ margin:0; font-size:.85rem; color:var(--ink-soft); }
@media (max-width:820px){ .card.wide .wide-in{ grid-template-columns:1fr; } }

.steps{ margin:0; padding:0; list-style:none; counter-reset:step; }
.steps li{ position:relative; padding-left:2rem; margin-bottom:1rem; font-size:.9rem; color:#b3bac5; }
.steps li:last-child{ margin-bottom:0; }
.steps li b{ display:block; color:var(--ink); font-weight:600; font-size:.92rem; margin-bottom:.1rem; }
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0;
  width:1.35rem; height:1.35rem; border-radius:50%;
  background:var(--honey-pale); color:var(--honey);
  font-family:var(--display); font-size:.78rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.disclaimer{ margin-top:1rem; font-size:.82rem; color:var(--ink-soft); font-style:italic; }

.techlist{ margin:0; padding:0; list-style:none; }
.techlist li{ margin-bottom:1.1rem; font-size:.9rem; color:#b3bac5; line-height:1.55; }
.techlist li:last-child{ margin-bottom:0; }
.techlist li b{ display:block; color:var(--ink); font-weight:600; font-size:.92rem; margin-bottom:.15rem; }

/* ---------- clickable cards ---------- */
/* The title link stretches over the whole card; the card's own links sit above it. */
.card.linked{ position:relative; transition:border-color .2s ease, background .2s ease; }
.card.linked:hover{ border-color:#4c4430; background:#222833; }
.card.linked h3 a{ text-decoration:none; }
.card.linked h3 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.card.linked h3 a:focus-visible{ outline:none; }
.card.linked:has(h3 a:focus-visible){ outline:2px solid var(--sage); outline-offset:3px; }
.card.linked .links a, .card.linked a:not(h3 a){ position:relative; z-index:1; }
.card .links a.more{ background:var(--honey-pale); border-color:transparent; color:#e6c48b; }
.card .links a.more:hover{ border-color:var(--honey); color:var(--honey); }
.card.linked:hover h3 a{ color:var(--honey); }
.more-link{ display:inline-block; margin-top:1.4rem; font-size:.9rem; color:var(--honey); text-decoration:none; border-bottom:1px solid #4c4430; }
.more-link:hover{ border-bottom-color:var(--honey); }

/* ---------- project detail pages ---------- */
.crumb{ font-size:.85rem; color:var(--ink-soft); margin:0 0 .6rem; }
.crumb a{ text-decoration:none; color:var(--ink-soft); }
.crumb a:hover{ color:var(--honey); }
.detail-head{ padding-block: clamp(24px,4vw,48px) clamp(20px,3vw,32px); }
.detail-head h1{ font-family:var(--display); font-weight:600; font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1.06; margin:.3rem 0 .9rem; max-width:24ch; }
.detail-head .meta{ font-size:.9rem; color:var(--ink-soft); margin:0 0 1.2rem; }
.detail-head .dek{ max-width:62ch; color:#b3bac5; font-size:1.08rem; margin:0 0 1.4rem; }
.detail-head .links{ display:flex; flex-wrap:wrap; gap:.5rem; }
.detail-head .links a{
  text-decoration:none; font-size:.86rem;
  background:var(--raised); border:1px solid var(--line); border-radius:999px;
  padding:.4em 1em; color:var(--ink);
}
.detail-head .links a:first-child{ background:var(--honey-pale); border-color:transparent; color:#e6c48b; }
.detail-head .links a:hover{ border-color:var(--honey); color:var(--honey); }
.detail-head .links a[aria-disabled]{ opacity:.55; pointer-events:none; }

.detail{ border-top:1px solid var(--line); padding-top:clamp(26px,4vw,44px); }
.detail p{ max-width:66ch; margin:0 0 1rem; }
.detail h2{
  font-family:var(--display); font-weight:600; font-size:1.3rem;
  margin:2.6rem 0 .8rem; color:var(--ink); line-height:1.2;
}
.detail h2:first-child{ margin-top:0; }
.detail h2 span{ color:var(--honey); font-weight:500; margin-right:.5em; }
.detail .split{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:1.4rem 2.8rem; align-items:start; margin-top:1rem; }
.detail .split p:last-child{ margin-bottom:0; }
@media (max-width:820px){ .detail .split{ grid-template-columns:1fr; } }
.detail .panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:clamp(18px,2.6vw,24px); }
.detail code, .detail pre{ font-family:ui-monospace, "Cascadia Code", Consolas, monospace; font-size:.84rem; }
.detail code{ background:var(--raised); border:1px solid var(--line); border-radius:6px; padding:.05em .35em; }
.detail pre{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:1rem 1.2rem; overflow-x:auto; line-height:1.6; margin:1rem 0 1.2rem; color:#c9ced8;
}
.detail pre code{ background:none; border:0; padding:0; }
.detail .gaps li, .detail .steps li{ max-width:66ch; }

.pager{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:1.6rem; margin-top:clamp(36px,5vw,56px); }
.pager a{ text-decoration:none; display:block; max-width:48%; }
.pager a small{ display:block; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.pager a span{ font-family:var(--display); font-weight:500; font-size:1.02rem; }
.pager a:hover span{ color:var(--honey); }
.pager a.next{ text-align:right; margin-left:auto; }
@media (max-width:560px){ .pager a{ max-width:100%; } .pager a.next{ text-align:left; margin-left:0; } }