/* ============================================================
   HOME — loads after system.css. Classes prefixed h- so the
   inner pages are untouched.
   Fog background, ink navy, one tangerine highlight.
   ============================================================ */
.home h1, .home h2, .home h3 { font-stretch: 100%; }
.h-wrap { width: min(100% - 2 * var(--gutter), 74rem); margin-inline: auto; }
.home p { max-width: 62ch; }

/* ── Hero ── */
.h-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); overflow: clip; }
.h-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; }
.h-status { display: inline-flex; align-items: center; gap: .6rem; background: var(--mint); color: #0d3a22; font-weight: 600; font-size: .9rem; padding: .4rem .95rem .4rem .8rem; border-radius: 999px; }
.h-status::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: #17a355; }
.h-hero h1 { font-size: clamp(2.7rem, 1.2rem + 5.6vw, 5.6rem); font-weight: 800; font-variation-settings: 'opsz' 96; line-height: .98; letter-spacing: -.035em; margin-top: var(--s-5); max-width: 12ch; text-wrap: balance; }
.h-lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.55; margin-top: var(--s-5); color: var(--ink-2); max-width: 34rem; }
.h-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.h-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule-strong); font-size: .95rem; color: var(--ink-2); }
.h-facts b { color: var(--ink); font-weight: 700; }

/* collage of real work */
.h-stage { position: relative; aspect-ratio: 1 / 1.02; background: var(--ink); border-radius: 28px; }
.h-win { position: absolute; margin: 0; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 40px -18px rgba(5,8,25,.55); }
.h-win-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #e9edf1; font-size: .7rem; color: #4a5266; }
.h-win-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c4cad3; flex: none; }
.h-win-bar span { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-win img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.h-win.a { width: 78%; left: -6%; top: 8%; transform: rotate(-3deg); z-index: 1; }
.h-win.b { width: 66%; right: -5%; top: 36%; transform: rotate(2.5deg); z-index: 2; }
.h-win.c { width: 56%; left: 8%; bottom: -5%; transform: rotate(-1.5deg); z-index: 3; }
.h-sticker { position: absolute; z-index: 4; right: 6%; top: -5%; width: 7.6rem; aspect-ratio: 1; border-radius: 50%; background: var(--tang); color: var(--ink); display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 1rem; line-height: 1.1; transform: rotate(10deg); box-shadow: 0 10px 20px -12px rgba(17,21,42,.6); padding: .8rem; }
.h-sticker small { display: block; font-weight: 600; font-size: .72rem; margin-top: .25rem; }

@media (max-width: 980px) {
  .h-hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .h-stage { max-width: 34rem; aspect-ratio: 1 / .95; margin-inline: auto; width: 100%; }
  .h-win.a { left: 0; } .h-win.b { right: 0; }
  .h-sticker { right: 2%; }
}

@media (prefers-reduced-motion: no-preference) {
  .h-stage .h-win { animation: h-rise .8s cubic-bezier(.2,.8,.2,1) both; }
  .h-win.a { animation-delay: .1s; } .h-win.b { animation-delay: .28s; } .h-win.c { animation-delay: .46s; }
  .h-sticker { animation: h-pop .6s cubic-bezier(.3,1.5,.5,1) .8s both; }
}
@keyframes h-rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes h-pop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }

/* ── Shared section scaffolding ── */
.h-sec { padding-block: clamp(3.5rem, 8vw, 7rem); }
.h-sec-head { max-width: 46rem; margin-bottom: var(--s-7); }
.h-sec-head h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.h-sec-head p { margin-top: var(--s-4); font-size: 1.1rem; color: var(--ink-2); }

/* ── Services: big rows, not cards ── */
.h-services { background: var(--surface); border-block: 1px solid var(--rule); }
.h-svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-4) var(--s-7); padding-block: var(--s-6); border-top: 1px solid var(--rule-strong); }
.h-svc:last-of-type { border-bottom: 1px solid var(--rule-strong); }
.h-svc h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.05; }
.h-svc p { font-size: 1.05rem; }
.h-svc .seen { margin-top: var(--s-3); font-size: .95rem; color: var(--ink-3); }
.h-svc .seen a { font-weight: 600; }
.h-stack { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: .5rem; }
.h-stack span { padding: .4rem .95rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule-strong); font-size: .9rem; font-weight: 500; color: var(--ink); }
@media (max-width: 760px) { .h-svc { grid-template-columns: 1fr; } }

/* ── Work ── */
.h-feature { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--ink); color: #c4cbda; border-radius: 28px; overflow: hidden; margin-bottom: var(--s-8); }
.h-feature-body { padding: clamp(1.5rem, 4vw, 3rem); display: grid; gap: var(--s-4); align-content: start; }
.h-feature h3 { color: #fff; font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.h-feature h3 a { color: inherit; text-decoration: none; }
.h-feature p { font-size: 1.08rem; color: #c4cbda; }
.h-chip { display: inline-block; width: max-content; background: var(--tang); color: var(--ink); font-weight: 700; font-size: .8rem; padding: .35rem .85rem; border-radius: 999px; }
.h-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.h-tags span { font-size: .82rem; padding: .3rem .8rem; border-radius: 999px; border: 1px solid currentColor; }
.h-feature .h-tags { color: #aab3c7; }
.h-feature figure { margin: 0; background: #1a2040; padding: clamp(1rem, 3vw, 2rem); display: grid; place-items: center; }
.h-feature figure img { width: 100%; background: var(--surface); border-radius: 14px; }
.h-feature a.h-link { color: var(--tang); }
@media (min-width: 900px) { .h-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

.h-proj-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
.h-proj { grid-column: span 6; display: grid; gap: var(--s-4); align-content: start; }
.h-proj.wide { grid-column: span 12; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--s-6); }
.h-proj .h-win { position: static; width: 100%; transform: none; box-shadow: 0 18px 34px -22px rgba(17,21,42,.55); border: 1px solid var(--rule); }
.h-proj .h-win img { aspect-ratio: 16 / 9; }
.h-proj h3 { font-size: 1.7rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.h-proj h3 a { color: var(--ink); text-decoration: none; }
.h-proj h3 a:hover { color: var(--blue); }
.h-proj p { margin-top: var(--s-2); }
.h-proj .h-tags { margin-top: var(--s-3); color: var(--ink-2); }
.h-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); font-weight: 600; }
.h-link { font-weight: 600; }
@media (max-width: 860px) { .h-proj, .h-proj.wide { grid-column: span 12; grid-template-columns: 1fr; } }

.h-more { margin-top: var(--s-8); }
.h-more h3 { font-size: 1.5rem; font-weight: 750; margin-bottom: var(--s-4); }
.h-more li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--s-5); padding-block: var(--s-4); border-top: 1px solid var(--rule-strong); align-items: baseline; }
.h-more li:last-child { border-bottom: 1px solid var(--rule-strong); }
.h-more strong { color: var(--ink); }
.h-more a { font-weight: 600; }
@media (max-width: 760px) { .h-more li { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ── Process: this one really is a sequence ── */
.h-process { background: var(--ink); color: #c4cbda; }
.h-process .h-sec-head h2 { color: #fff; }
.h-process .h-sec-head p { color: #c4cbda; }
.h-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: step; }
.h-steps li { counter-increment: step; border-top: 2px solid var(--tang); padding-top: var(--s-4); }
.h-steps li::before { content: counter(step); display: block; font-family: var(--font-display); font-weight: 800; font-size: 3.2rem; line-height: 1; color: var(--tang); margin-bottom: var(--s-3); }
.h-steps h3 { color: #fff; font-size: 1.25rem; font-weight: 700; margin-bottom: var(--s-2); }
.h-steps p { font-size: .98rem; }
@media (max-width: 980px) { .h-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } }
@media (max-width: 520px) { .h-steps { grid-template-columns: 1fr; } }

/* ── About ── */
.h-about { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-8); align-items: start; }
.h-about h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; margin-bottom: var(--s-5); text-wrap: balance; }
.h-about p + p { margin-top: var(--s-4); }
.h-about .h-link { display: inline-block; margin-top: var(--s-5); }
.h-timeline { position: relative; padding-left: var(--s-6); border-left: 2px solid var(--ink); display: grid; gap: var(--s-5); }
.h-timeline li { position: relative; }
.h-timeline li::before { content: ''; position: absolute; left: calc(-1 * var(--s-6) - 7px); top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.h-timeline li:first-child::before { background: var(--tang); }
.h-timeline time { font-size: .88rem; font-weight: 600; color: var(--ink-3); }
.h-timeline b { display: block; color: var(--ink); font-size: 1.05rem; margin-block: 2px; }
.h-timeline p { font-size: .96rem; }
@media (max-width: 860px) { .h-about { grid-template-columns: 1fr; gap: var(--s-7); } }

/* ── Contact: the second and last loud moment ── */
.h-contact { background: var(--tang); color: var(--ink); padding-block: clamp(4rem, 9vw, 8rem); }
.h-contact h2 { font-size: clamp(2.6rem, 1rem + 6.5vw, 6.5rem); font-weight: 800; letter-spacing: -.04em; line-height: .95; max-width: 14ch; text-wrap: balance; }
.h-contact p { margin-top: var(--s-5); font-size: 1.2rem; color: var(--ink); max-width: 36rem; }
.h-mail { display: inline-block; margin-top: var(--s-6); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, .8rem + 2.4vw, 2.4rem); color: var(--ink); text-decoration-thickness: 3px; text-underline-offset: .22em; overflow-wrap: anywhere; }
.h-mail:hover { color: #fff; }
.h-contact .h-actions { margin-top: var(--s-5); }
.h-contact .btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.h-contact .btn-primary:hover { background: #fff; color: var(--ink); border-color: #fff; }
.h-contact .btn-quiet { border-color: var(--ink); color: var(--ink); }
.h-contact .btn-quiet:hover { background: var(--ink); color: #fff; }
.h-contact :focus-visible { outline-color: var(--ink); }
.h-process :focus-visible, .h-feature :focus-visible { outline-color: var(--tang); }
.h-photo { width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; object-position: center 30%; margin-bottom: var(--s-5); border: 4px solid var(--tang); }