/* Portfolio page. Builds on ../styles.css (tokens, topbar, sections, buttons, footer). */


/* ------------------------------------------------------------------ hero */
.pf-hero { background: var(--navy); color: rgba(255,255,255,.85); padding: clamp(3rem, 8vw, 5rem) 0 clamp(2.5rem, 6vw, 3.5rem); }
.pf-hero h1 { color: var(--white); margin-bottom: .25em; }
.pf-hero__role { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: rgba(255,255,255,.8); max-width: 46ch; margin: 0; }
.pf-contact { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 1.6rem 0 0; font-size: .95rem; overflow-wrap: anywhere; }
.pf-hero .pf-contact a, .pf-close .pf-contact a { color: var(--gold); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- thesis */
.pf-thesis p { max-width: 64ch; font-size: 1.08rem; }
.pf-thesis .pf-lede { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.45; color: var(--navy); }
.pf-thesis .pf-lede strong { font-weight: 700; }

/* -------------------------------------------------------------- projects */
.pf-project {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem); margin-top: 1.4rem; box-shadow: var(--shadow);
}
.pf-project h3 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-bottom: .55em; }
.pf-project__body > p { max-width: 62ch; }
.pf-forced { color: var(--muted); }
.pf-forced strong { color: var(--navy); }
.pf-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 0; }

.pf-constraint {
  align-self: start; background: #FFF8E1; border-left: 4px solid var(--gold);
  border-radius: 0 10px 10px 0; padding: 1.1rem 1.25rem 1.2rem;
}
.pf-constraint__label {
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #8A6500; margin-bottom: .45rem;
}
.pf-constraint p { margin: 0; color: var(--ink); font-size: .98rem; line-height: 1.55; }
.pf-project code { font-size: .9em; background: var(--lake-2); color: var(--navy); padding: .05rem .35rem; border-radius: 4px; }

.pf-specs { border-collapse: collapse; margin-top: 1rem; font-size: .9rem; font-variant-numeric: tabular-nums; width: 100%; max-width: 26rem; }
.pf-specs th { text-align: left; font-weight: 500; color: var(--muted); padding: .32rem 1.5rem .32rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pf-specs td { text-align: right; padding: .32rem 0; border-bottom: 1px solid var(--line); color: var(--navy); font-weight: 600; }

/* -------------------------------------------------------------- practice */
.pf-practice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 3rem; margin-top: 1.6rem; }
.pf-entry { border-top: 3px solid var(--gold); padding-top: 1rem; }
.pf-entry h3 { font-size: 1.15rem; margin-bottom: .45em; }
.pf-entry p { color: var(--muted); font-size: .98rem; margin: 0; }
.pf-entry p.app__meta { margin-bottom: .35rem; }
.pf-entry strong { color: var(--navy); }

.pf-creds { margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); display: grid; gap: .8rem; }
.pf-creds div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.pf-creds dt { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pf-creds dd { margin: 0; }
.pf-active {
  display: inline-block; margin-left: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #1C7C4A; border: 1px solid #1C7C4A; border-radius: 999px; padding: .08rem .5rem; vertical-align: .1em;
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 860px) {
  .pf-project { grid-template-columns: 1fr; gap: 1.2rem; }
  .pf-practice { grid-template-columns: 1fr; }
  .pf-creds div { grid-template-columns: 1fr; gap: .15rem; }
}