/* ============================================================
   Paul Schulz portfolio - alternate layout
   ============================================================
   A second take on about/paul-schulz/index.html that sits inside the
   Juicy Brains header and footer instead of carrying its own chrome.

   Everything here is scoped under `.portfolio-page` and every class is
   prefixed `pf-`, so this file cannot reach the shared header, footer or
   any other page. The tokens are prefixed too: `--ink`, `--line` and
   `--green` already exist in styles.css at site values, and redefining
   them here would repaint the header and footer along with the page.

   The one thing scoping does NOT protect against is a property
   styles.css declares that this file never does. `h1, h2, h3, h4` are
   pinned to `color: var(--ink)` globally, which paints every heading in
   the navy bands navy-on-navy: present in the markup, read aloud by a
   screen reader, invisible on screen. Hence the `color: inherit` reset
   below. Add a heading to a dark band and that rule is what saves it. */

.portfolio-page {
  /* Brand values, re-pointed under prefixed names. --pf-on-dark is the
     footer's own body colour, so the dark bands and the footer below
     them read as the same material. */
  --pf-navy:      #0B1533;
  --pf-green:     #009B6A;
  --pf-green-ink: #00754E;
  --pf-ink:       #0B1533;
  --pf-soft:      #4A5468;
  --pf-line:      #E4E7EE;
  --pf-panel:     #F5F6F8;
  --pf-on-dark:   #C3CADB;
  --pf-line-dark: rgba(255, 255, 255, .15);

  /* Defaults for the per-card accent pair below. A card added without a
     hue class still gets a rule and a chip rather than an invalid
     var() that computes to transparent. */
  --pf-accent:     var(--pf-green-ink);
  --pf-accent-ink: var(--pf-green-ink);

  color: var(--pf-ink);
}

/* styles.css pins headings to var(--ink) and to weight inherited from the
   browser. Both have to be taken back for the dark bands to work. */
.portfolio-page h1,
.portfolio-page h2,
.portfolio-page h3,
.portfolio-page h4 {
  color: inherit;
  text-transform: none;
}

/* The instrument label: mono, caps, widely tracked. Used for every micro
   label on the page, which is what carries the original's character. */
.portfolio-page .pf-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ─────────────── Hero (navy band) ─────────────── */
/* The page opens dark, the way the original does, then releases into
   white. It also gives the sticky white header something to sit against,
   so the header reads as a deliberate frame rather than a stray strip. */
.portfolio-page .pf-hero {
  background: var(--pf-navy);
  color: var(--pf-on-dark);
  padding-block: 72px 76px;
  /* a soft green bloom off the top right, echoing the readout's accent */
  background-image: radial-gradient(ellipse 70% 60% at 82% 0%, rgba(0, 155, 106, .16), transparent 70%);
}
.portfolio-page .pf-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
}
.portfolio-page .pf-kicker {
  color: var(--pf-green);
  margin-bottom: 22px;
}
.portfolio-page .pf-hero h1 {
  color: #fff;
  font-size: clamp(46px, 7vw, 86px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin-bottom: 28px;
}
.portfolio-page .pf-hero h1 em {
  font-style: normal;
  color: var(--pf-green);
}
.portfolio-page .pf-lede {
  max-width: 62ch;
  font-size: 17.5px;
  line-height: 1.6;
  color: #DCE3EF;
}

/* Contact row. The addresses are links, the citizenship is not, so the
   row is laid out by gap rather than by separators that would imply
   every item is clickable. */
.portfolio-page .pf-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  margin-top: 30px;
  font-size: 15px;
}
.portfolio-page .pf-contact a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  padding-bottom: 1px;
  transition: border-color .18s ease, color .18s ease;
}
.portfolio-page .pf-contact a:hover {
  color: var(--pf-green);
  border-bottom-color: var(--pf-green);
}
.portfolio-page .pf-contact span { color: var(--pf-on-dark); }

/* ─────────────── Readout panel ─────────────── */
/* The one element lifted almost intact from the original: a bordered
   instrument panel with its legend notched into the top edge. The notch
   is a pseudo-element with the band's own background behind it, so it
   has to stay in sync with .pf-hero's background colour. */
.portfolio-page .pf-readout {
  position: relative;
  border: 1px solid var(--pf-line-dark);
  background: linear-gradient(150deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  padding: 26px 24px 22px;
}
.portfolio-page .pf-readout::before {
  content: "System profile";
  position: absolute;
  top: -9px;
  left: 18px;
  padding-inline: 9px;
  background: var(--pf-navy);
  color: var(--pf-green);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1;
}
.portfolio-page .pf-readout dl {
  display: grid;
  gap: 0;
  margin: 0;
}
.portfolio-page .pf-readout .pf-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-block: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.portfolio-page .pf-readout .pf-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.portfolio-page .pf-readout dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8E9CB8;
  white-space: nowrap;
}
.portfolio-page .pf-readout dd {
  margin: 0;
  text-align: right;
  font-size: 14.5px;
  color: #E6EBF4;
  font-variant-numeric: tabular-nums;
}
.portfolio-page .pf-readout dd strong {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 21px;
  color: var(--pf-green);
  letter-spacing: -0.02em;
}

/* ─────────────── Section heads ─────────────── */
/* Title left, caption right, hard rule above: the original's device for
   opening a section, which is sharper than a centred heading and keeps
   the page scannable. */
.portfolio-page .pf-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 20px;
  border-top: 2px solid var(--pf-ink);
}
.portfolio-page .pf-head h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.portfolio-page .pf-head .pf-label { color: var(--pf-soft); padding-bottom: 5px; }

/* ─────────────── Intro ─────────────── */
.portfolio-page .pf-intro { padding-block: 60px 8px; }
.portfolio-page .pf-intro p {
  max-width: 74ch;
  font-size: 17px;
  line-height: 1.72;
  color: var(--pf-soft);
}
.portfolio-page .pf-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}
.portfolio-page .pf-caps li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 13px;
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  background: var(--pf-panel);
  color: var(--pf-green-ink);
}

/* ─────────────── CV versions ─────────────── */
.portfolio-page .pf-roles-section { padding-block: 52px 0; }
.portfolio-page .pf-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 6px;
}
/* Two links per card: the card face opens the CV, the foot downloads the
   PDF. They are siblings rather than nested, because a download link
   inside the card link would be unreachable by keyboard. */
.portfolio-page .pf-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--pf-line);
  border-top: 3px solid var(--pf-accent);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.portfolio-page .pf-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--pf-accent) 42%, var(--pf-line));
  border-top-color: var(--pf-accent);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--pf-accent) 20%, transparent);
}

/* Accent per card, following the pattern styles.css uses for the homepage
   discipline cards: --pf-accent paints marks, --pf-accent-ink paints text
   and anything carrying white on top of it.

   The split is not cosmetic. Vibrant green on white is about 3:1, which
   fails for the small type in the chip and the discipline label, so green
   cards take the deeper cut for both. The other three hues clear 4.5:1 as
   they are, and keep one token for both jobs.

   Eight cards, four brand hues, each carrying two. The hues run in the
   brand's own spectrum order (the one the homepage rail uses: green,
   purple, blue, pink) and repeat on a strict period of four.

   The period is not decoration. The grid is three up, two up and one up
   at different widths, so two cards can end up side by side or stacked at
   distances of one, two or three places in source order. Keeping each
   hue's pair exactly four apart is the only arrangement where no two
   cards sharing a hue touch at ANY of the three breakpoints.

   The hues carried meanings when the cards were grouped by family, but
   the running order is editorial and the two constraints cannot both
   hold: under the current order a semantic grouping puts two greens side
   by side in the first row. So the cycle is now position, not meaning.
   Reorder or insert a lens and the cycle has to be re-run from the top,
   never patched card by card. */
.portfolio-page .pf-green  { --pf-accent: var(--pf-green-ink); --pf-accent-ink: var(--pf-green-ink); }
.portfolio-page .pf-blue   { --pf-accent: #2B6CF6;             --pf-accent-ink: #2B6CF6; }
.portfolio-page .pf-purple { --pf-accent: #7B3FE4;             --pf-accent-ink: #7B3FE4; }
.portfolio-page .pf-pink   { --pf-accent: #E6007E;             --pf-accent-ink: #E6007E; }
.portfolio-page .pf-card-face {
  flex: 1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: start;
  padding: 22px 22px 24px;
}
/* The index is a filled chip rather than coloured text: at 11px a numeral
   in the accent is a speck, and the chip is what actually gives the row
   of cards some colour. Fixed 28px square so 01 through 06 all sit on the
   same baseline grid regardless of glyph width. */
.portfolio-page .pf-idx {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--pf-accent-ink);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.portfolio-page .pf-type {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pf-accent-ink);
  margin-bottom: 8px;
}
.portfolio-page .pf-card h3 {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin-bottom: 9px;
}
.portfolio-page .pf-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--pf-soft);
}
.portfolio-page .pf-card .arrow {
  align-self: center;
  font-size: 18px;
  color: var(--pf-accent);
  transition: transform .18s ease;
}
.portfolio-page .pf-card:hover .arrow { transform: translate(3px, -3px); }

/* flex-end, not space-between: the label and its caret are one object sat
   against the right edge, rather than the label pinned left with the
   caret drifting away from it as the card widens. */
.portfolio-page .pf-pdf {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 11px 22px;
  border-top: 1px solid var(--pf-line);
  background: color-mix(in srgb, var(--pf-accent) 6%, var(--pf-panel));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pf-soft);
  transition: color .18s ease, background-color .18s ease;
}
.portfolio-page .pf-pdf:hover {
  color: var(--pf-accent-ink);
  background: color-mix(in srgb, var(--pf-accent) 13%, var(--pf-panel));
}

/* ─────────────── Proof bar ─────────────── */
/* Four figures in a rule-divided row. No cards: these are readings off
   the same instrument, not four separate objects. */
.portfolio-page .pf-proof-section { padding-block: 64px 0; }
.portfolio-page .pf-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--pf-line);
  border-bottom: 1px solid var(--pf-line);
}
.portfolio-page .pf-proof > div {
  padding: 26px 22px 28px;
  border-right: 1px solid var(--pf-line);
}
.portfolio-page .pf-proof > div:last-child { border-right: 0; }
.portfolio-page .pf-proof strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.035em;
  color: var(--pf-green-ink);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.portfolio-page .pf-proof span {
  font-size: 14px;
  line-height: 1.5;
  color: var(--pf-soft);
}

/* ─────────────── Closing band ─────────────── */
/* The original page ended on its own contact footer. That job now
   belongs to the site footer, so this band does the one thing the
   footer cannot: ask for the next step in this page's own voice.

   Deep green, not navy. Two earlier attempts failed on the same point:
   the site footer directly below is #0B1533, so a band in that navy
   fused with it into one slab, and a lifted navy (#15214A) was still
   only a step in brightness within the same hue, which reads as a
   gradient rather than an edge. Changing hue is what actually ends the
   page. --pf-green-ink carries white at 5.7:1, where the vibrant green
   manages about 3:1 and could not hold the heading. */
.portfolio-page .pf-close {
  margin-top: 76px;
  background: var(--pf-green-ink);
  color: #D7EEE4;
  padding-block: 58px 62px;
}
.portfolio-page .pf-close-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
/* Takes its share of the row rather than a fixed measure: capped at 18ch
   the sentence broke to three lines with "brief." stranded on its own
   while half the band sat empty beside it. */
.portfolio-page .pf-close-grid > div:first-child {
  flex: 1 1 340px;
  min-width: 0;
}
/* No max-width. The break after "conversation," is set in the markup, and
   a measure cap shorter than that first line would wrap it a second time
   and put the break somewhere else. Narrow screens still wrap on top of
   the explicit break, which is the intended fallback. */
.portfolio-page .pf-close h2 {
  color: #fff;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
/* Pale mint, not --pf-green: the accent green that marks this label on a
   navy band is now the band itself, and would vanish. It has to be this
   light, too. A mint with any real saturation left in it (#A8DCC4) came
   out at 3.75:1 on the band, and at 11.5px this is small text, so it
   needs 4.5. This clears it at 4.7. */
.portfolio-page .pf-close .pf-label { color: #D7EEE4; margin-bottom: 16px; }
.portfolio-page .pf-close-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
}
.portfolio-page .pf-close-actions a:not(.btn) {
  color: #fff;
  font-size: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  padding-bottom: 1px;
  transition: border-color .18s ease, color .18s ease;
}
/* Stays white and brightens its rule. A colour shift on hover has
   nowhere to go on a green band without losing contrast. */
.portfolio-page .pf-close-actions a:not(.btn):hover {
  border-bottom-color: #fff;
}

/* ─────────────── Narrow ─────────────── */
@media (max-width: 960px) {
  .portfolio-page .pf-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .portfolio-page .pf-readout { max-width: 520px; }
  .portfolio-page .pf-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .portfolio-page .pf-hero { padding-block: 52px 58px; }
  .portfolio-page .pf-lede { font-size: 16.5px; }
  .portfolio-page .pf-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .portfolio-page .pf-head .pf-label { padding-bottom: 0; }
  .portfolio-page .pf-roles { grid-template-columns: 1fr; }
  .portfolio-page .pf-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-page .pf-proof > div:nth-child(2) { border-right: 0; }
  .portfolio-page .pf-proof > div:nth-child(-n+2) { border-bottom: 1px solid var(--pf-line); }
  .portfolio-page .pf-close-grid { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-page .pf-card,
  .portfolio-page .pf-card .arrow { transition: none; }
  .portfolio-page .pf-card:hover { transform: none; }
  .portfolio-page .pf-card:hover .arrow { transform: none; }
}