/*
 * File:     kikoworks/05_portfolio/portfolio.css
 * Project:  KikoWorks
 * Purpose:  Styles for the portfolio index page (/work/).
 * Author:   John Francis Sagadraca
 * Created:  2026-10-03 (first commit)
 * Notes:    Loaded after base.css.
 */
/* KikoWorks portfolio index (/work/). Loaded after base.css (tokens, fonts, header, footer). */
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.03em}
.portfolio-hero{padding:clamp(64px,9vw,104px) 0 clamp(40px,5vw,56px)}
.portfolio-hero h1{max-width:820px;margin:0;font-size:clamp(2.6rem,5.6vw,4.4rem);font-weight:750;letter-spacing:-.045em;line-height:1.02}
.lede{max-width:680px;margin:22px 0 0;color:var(--muted);font-size:1.1rem}
.portfolio-hero.hud-band{margin-bottom:clamp(40px,5vw,56px)}.portfolio-hero.hud-band .lede{color:var(--on-dark)}
.project-card{position:relative}.project-card:hover,.project-card:focus-visible{border-color:rgb(31 95 209 / 45%)}
.projects{padding:0 0 clamp(72px,9vw,104px)}
.project-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.project-card{display:flex;overflow:hidden;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--surface);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.project-card:hover,.project-card:focus-visible{box-shadow:0 20px 36px -24px rgb(var(--shadow) / 50%);transform:translateY(-4px)}
.project-thumb{display:block;width:100%;height:auto;aspect-ratio:4/3;border-bottom:1px solid var(--line);object-fit:cover}
.project-copy{display:flex;flex-direction:column;gap:6px;padding:18px 20px 0}
.project-type{align-self:flex-start;border-radius:999px;padding:3px 10px;background:var(--paper-soft);color:var(--accent);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.project-copy h2{margin:0;font-size:1.35rem;line-height:1.15}
.project-copy p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.project-link{margin-top:auto;padding:14px 20px 20px;font-size:.86rem;font-weight:700;text-decoration:underline;text-decoration-color:var(--mango);text-decoration-thickness:3px;text-underline-offset:5px}
.project-card:hover h2,.project-card:focus-visible h2{color:var(--accent)}
.portfolio-note{padding:clamp(64px,8vw,92px) 0;background:var(--surface);border-top:1px solid var(--line)}
.note-grid{display:grid;grid-template-columns:1fr .8fr;align-items:end;gap:70px}
.note-grid h2{margin:0;font-size:clamp(2rem,4vw,3.1rem);line-height:1.05}
.note-grid>p{margin:0;color:var(--muted)}
.portfolio-contact{padding:clamp(64px,8vw,92px) 0;color:#fff}
.contact-card{display:grid;grid-template-columns:1fr .7fr;align-items:center;gap:70px}

.contact-card h2{margin:0;font-size:clamp(2rem,4vw,3.1rem);line-height:1.05}
.contact-card>div:last-child{display:flex;flex-direction:column;align-items:flex-start}
.contact-card p:last-child{margin:15px 0 0;color:var(--on-dark)}
.button{display:inline-flex;min-height:52px;align-items:center;justify-content:center;border:2px solid var(--mango);border-radius:999px;padding:11px 24px;background:var(--mango);box-shadow:0 4px 0 var(--mango-shade);color:var(--ink);font-size:.96rem;font-weight:700;text-decoration:none;transition:background .18s ease,transform .18s ease}
.button:hover{background:var(--mango-soft);transform:translateY(-2px)}
.builds{padding:clamp(64px,8vw,92px) 0;border-top:1px solid var(--line)}
.builds-head{max-width:700px}.builds-head h2{margin:0;font-size:clamp(2rem,4vw,3.1rem);line-height:1.05}.builds-head>p:last-child{margin:16px 0 0;color:var(--muted)}
.build-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:36px 0 0;padding:0;list-style:none}
.build-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:start;border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--surface)}
.build-glyph{display:grid;width:64px;height:64px;place-items:center;border-radius:18px 18px 18px 5px;font-family:var(--display);font-size:1.9rem;font-weight:800;letter-spacing:-.04em}
.g-teal{background:var(--navy);color:var(--paper)}.g-clay{background:var(--accent);color:var(--paper)}.g-mango{background:var(--mango);color:var(--ink)}.g-ink{background:var(--ink);color:var(--mango)}
.build-status{display:inline-block;border-radius:999px;padding:2px 9px;background:var(--paper-soft);color:var(--accent);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.build-copy h3{margin:6px 0 4px;font-family:var(--display);font-size:1.25rem;letter-spacing:-.02em;line-height:1.2}
.build-copy p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}.build-copy .build-tech{margin-top:8px;color:var(--ink);font-size:.8rem;font-weight:600}
@media(max-width:960px){.project-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.project-list,.note-grid,.contact-card{grid-template-columns:1fr}.note-grid,.contact-card{gap:30px}}
.build-featured{grid-column:1/-1;grid-template-columns:64px minmax(0,1fr) minmax(0,1.25fr);gap:20px 24px}.build-featured .build-copy p+p{margin-top:8px}
.build-shot{margin:0}.build-shot img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}.build-shot figcaption{margin-top:8px;color:var(--muted);font-size:.78rem}
@media (max-width:760px){.build-featured{grid-template-columns:64px minmax(0,1fr)}.build-shot{grid-column:1/-1}}