/* Portfolio layer on top of Signal (signal/). Only Signal tokens, no new colours.
   Components live in Signal (sg-); this file is page layout only (pf-). */

html { scroll-behavior: smooth; scroll-padding-top: 140px; }
[hidden] { display: none !important; }
html.sg-still { scroll-behavior: auto; }

/* top bar */
a.sg-context { color: inherit; text-decoration: none; }
.sg-topbar__anchor { display: flex; align-items: center; gap: var(--sg-sp-8); min-width: 0; }
.sg-topbar__row > .sg-topbar__end { grid-column: -2 / -1; }
.pf-nav .sg-tab { text-decoration: none; }
.pf-nav .sg-tab[aria-current="true"] { color: var(--sg-text); }
.pf-nav .sg-tab[aria-current="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--sg-text); }

/* hero: the name in block letters */
.pf-hero { padding: var(--sg-sp-56) 0; }
.pf-name { position: relative; }
.pf-name__text { margin: 0; font-weight: var(--sg-fw-medium); font-size: clamp(48px, 9vw, 112px); line-height: 1; letter-spacing: -.045em; }
html.pf-art .pf-name__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pf-name__art { display: grid; align-items: end; }
.pf-name .sg-figlet { width: 100%; }
.pf-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sg-sp-56); align-items: end; margin-top: var(--sg-sp-40); }
.pf-intro { margin: 0; max-width: 30ch; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; letter-spacing: -.015em; color: var(--sg-text); }
.pf-hero-facts { margin: var(--sg-sp-16) 0 0; max-width: 56ch; font-size: var(--sg-fs-16); line-height: var(--sg-lh-prose); color: var(--sg-text-2); }
.pf-hero-facts:empty { display: none; }
.pf-nowline { display: flex; align-items: baseline; gap: 10px; margin-top: var(--sg-sp-24); font-size: var(--sg-fs-15); color: var(--sg-text-2); }
.pf-nowline__k { font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); white-space: nowrap; }
.pf-nowline [data-sg-spin] { font-family: var(--sg-glyph); color: var(--sg-pink); }
.pf-avail--hero { display: none !important; margin-top: var(--sg-sp-16); }
.pf-avail--hero { align-items: baseline; white-space: normal; }
.pf-avail--hero .sg-dot { flex: none; transform: translateY(-1px); }
.pf-ask :is(.sg-prompt__text, .sg-prompt__keys, .sg-prompt__echo) { margin-left: 0; }

/* projects: a stage without a screenshot shows the name in block letters */
.pf-stage-fig { display: grid; place-items: center; min-height: 260px; padding: 32px 24px; }
.pf-stage-fig .sg-figlet { margin: 0 auto; }

/* about */
.pf-me { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--sg-sp-56); align-items: start; }
.pf-me--solo { grid-template-columns: minmax(0, 1fr); }
.pf-story { margin: 0; max-width: 36ch; font-size: clamp(21px, 2.1vw, 27px); line-height: 1.4; letter-spacing: -.015em; color: var(--sg-text); }
.pf-facts { margin-top: var(--sg-sp-40); max-width: 760px; }
.pf-path { margin-top: var(--sg-sp-48); max-width: 760px; }

/* contact */
.pf-contact__lead { margin: 0; font-size: var(--sg-fs-16); color: var(--sg-text-2); }
.pf-mail { margin-top: var(--sg-sp-12); }
.pf-contact__links { margin-top: var(--sg-sp-24); }
.pf-foot { margin-top: var(--sg-sp-72); padding-top: 20px; border-top: 1px solid var(--sg-line); font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }
.pf-noscript { position: fixed; inset: auto 16px 16px; z-index: 200; margin: 0; padding: 14px 18px; border: 1px solid var(--sg-amber); border-radius: var(--sg-r-lg); background: var(--sg-surface); font: 13px/1.6 var(--sg-mono); color: var(--sg-text-2); }

@media (max-width: 1080px) {
  .pf-hero__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sg-sp-40); }
  .pf-me { grid-template-columns: minmax(0, 1fr); gap: var(--sg-sp-32); }
  .sg-portrait { max-width: 300px; }
}
@media (max-width: 900px) {
  .pf-hero { padding: var(--sg-sp-32) 0 var(--sg-sp-40); }
  .pf-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sg-sp-32); margin-top: var(--sg-sp-24); }
}
@media (max-width: 640px) {
  /* stack first and last name so the letters stay big */
  .pf-name__art { grid-template-columns: minmax(0, 1fr) !important; row-gap: 10px; max-width: none !important; }
  #fgFirst { width: var(--p1, 100%); }
  #fgLast { width: var(--p2, 100%); }
}
@media (max-width: 520px) {
  .sg-topbar .sg-avail { display: none; }
  .pf-avail--hero { display: inline-flex !important; }
  .pf-avail--hero.pf-off { display: none !important; }
  #draft > span { display: inline; padding-right: 10px; }
}