/* ---------- homepage ---------- */
.hero.solo { grid-template-columns: 1fr; padding: 120px 0 24px; }
.hero.solo h1 { font-size: clamp(56px, 9vw, 120px); }
.hero.solo .pitch { max-width: 560px; }

.feature {
  display: grid; grid-template-columns: 1.35fr 1fr;
  border: 1px solid var(--faint);
  text-decoration: none;
  margin-top: 28px;
  transition: border-color .25s;
}
.feature:hover { border-color: var(--hot); }
.feature .img { overflow: hidden; background: var(--surface); }
.feature .img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .8s cubic-bezier(.2,.8,0,1); }
.feature:hover .img img { transform: scale(1.03); }
.feature .txt { padding: 26px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.feature .txt .top { display: flex; justify-content: space-between; }
.feature h3 { margin-top: auto; font-weight: 600; font-stretch: 85%; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.08; }
.feature p { color: var(--dim); font-size: 15.5px; line-height: 1.55; }
.feature .tags { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.feature .tags span { font-family: var(--mono); font-size: 11px; border: 1px solid var(--faint); padding: 5px 8px; color: var(--dim); }
.feature .go { color: var(--hot); font-size: 20px; transition: transform .3s cubic-bezier(.2,.8,0,1); align-self: flex-end; }
.feature:hover .go { transform: translate(4px, -4px); }
.projects.single { grid-template-columns: 1fr; padding-top: 20px; }
.projects.single .project { min-height: 0; flex-direction: row; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.projects.single .project h3 { margin: 0; padding: 0; }
.projects.single .project p { margin: 0; }

.about { display: grid; grid-template-columns: 220px 1fr; gap: 48px; padding-top: 32px; align-items: start; }
.about .portrait { max-width: 220px; }
.about .portrait::after { bottom: 22px; }
.about-text p { font-size: 19px; line-height: 1.6; color: var(--dim); max-width: 620px; }
.about-text p + p { margin-top: 16px; }
.about-text p strong { color: var(--ink); font-weight: 500; }

@media (max-width: 860px) {
  .hero.solo { padding-top: 64px; }
  .feature { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; gap: 28px; }
  .about .portrait { max-width: 200px; order: 0; }
}

/* contact */
.contact { padding: 112px 0 72px; }
.contact h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1; margin: 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 28px; align-items: start; }
.contact-sub { font-size: 19px; line-height: 1.5; color: var(--dim); max-width: 420px; }
.contact-links { list-style: none; display: grid; gap: 16px; }
.contact-links li { display: grid; grid-template-columns: 90px 1fr; align-items: baseline; gap: 12px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-links .mail { justify-self: start; }

/* hero with 3D model */
.hero.home { grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: end; padding: 72px 0 24px; }
.hero.home h1 { font-size: clamp(56px, 8vw, 112px); }
.hero-3d { position: relative; }
.hero-3d .m3d-stage {
  aspect-ratio: 1 / 1; border: 0;
  background: none; overflow: visible;
}
.hero-3d .m3d-status { opacity: .6; }
.hero-3d figcaption { display: flex; justify-content: space-between; gap: 12px; }
.hero-3d figcaption a { text-decoration: none; color: var(--ink); }
.hero-3d figcaption a:hover { color: var(--hot); }
@media (max-width: 860px) {
  .hero.home { grid-template-columns: 1fr; padding-top: 40px; gap: 8px; }
  .hero-3d .m3d-stage { aspect-ratio: 4 / 3; }
}

/* toolkit as rows, same rhythm as experience */
.exp.tools li { grid-template-columns: 200px 1fr; align-items: start; }
.exp.tools li > .mono { padding-top: 9px; }
.exp.tools .skills { padding-top: 0; }
.tools-note { color: var(--dim); font-size: 15.5px; line-height: 1.55; max-width: 620px; margin-bottom: 12px; }
@media (max-width: 860px) { .exp.tools li { grid-template-columns: 1fr; gap: 10px; } .exp.tools li > .mono { padding-top: 0; } }
.projects .project.soon .top { display: flex; justify-content: space-between; width: 100%; }
.exp li.earlier .role { font-weight: 500; color: var(--dim); }

/* Click-Pax dieline as feature visual (placeholder until renders) */
.feature .img.thumb-die { display: grid; place-items: center; padding: 8% 9%; aspect-ratio: 4 / 3; }
.thumb-die svg { width: 100%; }
.thumb-die .t-cut { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.thumb-die .t-crease { fill: none; stroke: var(--hot); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.feature .img.thumb-die { border-right: 1px solid var(--faint); }
@media (max-width: 860px) { .feature .img.thumb-die { border-right: 0; border-bottom: 1px solid var(--faint); } }

/* project cards with thumbnail */
.project.card-img { min-height: 0; gap: 0; }
.project .thumb { margin: -22px -22px 18px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--faint); }
.project .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,0,1); }
.project:hover .thumb img { transform: scale(1.03); }
.project.card-img h3 { padding-top: 14px; margin-top: 0; }
.project.card-img p { padding-right: 28px; }

/* hero: folding mailer (replaces the motor casing) */
.hero-fold .fold-stage { position: relative; aspect-ratio: 1 / 1; cursor: grab; touch-action: pan-y; }
.hero-fold .fold-stage:active { cursor: grabbing; }
.hero-fold .fold-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.hero-fold .fold-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .6; }
.fold-link { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--hot); }
.fold-link:hover { color: var(--hot); }
@media (max-width: 860px) { .hero-fold .fold-stage { aspect-ratio: 4 / 3; } }
.feature .img.img-render { border-right: 1px solid var(--faint); }
@media (max-width: 860px) { .feature .img.img-render { border-right: 0; border-bottom: 1px solid var(--faint); } }

/* long section title: keep label on one line */
#experience .sec-head { gap: 16px; }
#experience .sec-head .mono { white-space: nowrap; }
#education { padding-top: 72px; }