/* PFX Creative — personal networking page
   Built for one phone-sized sheet. Everything scales from --u, so the composition
   holds between 360 and 430px instead of reflowing. */

@font-face {
  font-family: "Antonio";
  src: url("../fonts/antonio-var.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* The logo is pure black and white, so that is the palette. --lamp is the one
     addition: the bulb in the mark, switched on. Used only a handful of times. */
  --ink: #0b0b0a;
  --paper: #f2f2ef;
  --lamp: #ffc81e;
  --soft: #55554f;      /* secondary text on paper */
  --soft-ink: #aeaea8;  /* secondary text on ink */

  --w: min(100vw, 430px);
  --gutter: 16px;
  --measure: calc(var(--w) - 2 * var(--gutter));
  --u: calc(var(--w) / 360);
  --col: calc(var(--measure) / 4);

  --display: "Antonio", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: "Jost", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ol, ul, figure, address { margin: 0; padding: 0; font: inherit; }
ol, ul { list-style: none; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { all: unset; box-sizing: border-box; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.sprite { position: absolute; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.page { width: var(--w); margin-inline: auto; background: var(--paper); }

/* Shared details ─────────────────────────────────────────── */

.label {
  font: 400 14px/1.2 var(--display);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.label strong { font-weight: 600; }

/* Four-column hairlines that run behind the type, from the page's own grid. */
.grid {
  --line: rgba(11, 11, 10, .055);
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: var(--col) 100%;
  background-position: var(--gutter) 0;
}
.section--ink.grid { --line: rgba(242, 242, 239, .075); }

/* The ring from the logo, used as a pilot light. */
.lamp {
  display: inline-block;
  width: 11px; height: 11px;
  margin-right: 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  vertical-align: -1px;
  position: relative;
}
.lamp::after {
  content: "";
  position: absolute; inset: 1.5px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 0 .5px var(--ink);
}

.link {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .35s var(--ease);
}
.link:active { background-size: 30% 1px; }

/* 00 Hero ───────────────────────────────────────────────── */

.hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(env(safe-area-inset-top) + 14px);
}

.hero__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-inline: var(--gutter);
  white-space: nowrap;
}

.lockup {
  --name: calc(var(--measure) / 2.676); /* ink width of PINAKIN in em: fills the measure */
  position: relative;
  margin: calc(14 * var(--u)) var(--gutter) 0;
}

.name {
  font: 400 var(--name) / .985 var(--display);
  text-transform: uppercase;
}
.name__line {
  display: block;
  margin-left: -.063em;
  white-space: nowrap;
}
.name__line + .name__line { letter-spacing: -.012em; }

/* The logo closes the second line: capital height, on the baseline, like a final letter. */
.lockup__logo {
  position: absolute;
  right: 0;
  bottom: calc(var(--name) * -.029);
  width: calc(var(--name) * .868);
  height: auto;
  animation: settle .9s var(--ease) both;
}

.identity { padding: calc(14 * var(--u)) var(--gutter) 0; }
.identity__role {
  font: 400 calc(var(--measure) / 12.03) / 1.2 var(--display);
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: -.063em;
}
.identity__brand { margin-top: 6px; font-size: calc(16.2 * var(--u)); white-space: nowrap; }
.identity__place { margin-top: 3px; font-size: 16px; color: var(--soft); }

.hero__statement {
  margin-top: auto;
  padding: calc(16 * var(--u)) var(--gutter);
  font-size: calc(18 * var(--u));
  line-height: 1.32;
  text-wrap: pretty;
}

.actions { padding-bottom: env(safe-area-inset-bottom); }

/* Actions read as ledger rows, not buttons: full-bleed bars of ink and rule. */
.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: calc(62 * var(--u));
  padding: 8px var(--gutter);
  font-family: var(--display);
  text-transform: uppercase;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color .18s, color .18s;
}
.bar__label { font-size: calc(30 * var(--u)); line-height: 1; letter-spacing: .01em; }
.bar__note {
  margin-left: auto;
  font: 400 15px/1.1 var(--body);
  text-transform: none;
  white-space: nowrap;
}
.bar__icon { flex: none; width: 24px; height: 24px; transition: transform .25s var(--ease); }
.bar:active .bar__icon { transform: translate(3px, -3px); }
.bar[data-save-contact]:active .bar__icon { transform: translateY(3px); }
.bar:focus-visible { outline-offset: -5px; }

.bar--ink { background: var(--ink); color: var(--paper); }
.bar--ink:active { background: #2a2a28; }

.bar--line { border-bottom: 3px solid var(--ink); }
.bar--line:active { background: var(--ink); color: var(--paper); }

.pair { display: grid; grid-template-columns: 1fr 1fr; }
.pair a {
  display: flex;
  align-items: center;
  min-height: calc(50 * var(--u));
  padding: 6px var(--gutter);
  font: 400 calc(20 * var(--u)) / 1 var(--display);
  letter-spacing: .03em;
  text-transform: uppercase;
  touch-action: manipulation;
  transition: background-color .18s, color .18s;
}
.pair a + a { border-left: 1px solid var(--ink); }
.pair a:active { background: var(--ink); color: var(--paper); }

/* Sections ──────────────────────────────────────────────── */

.section { padding: calc(84 * var(--u)) var(--gutter); }
.section--ruled { position: relative; padding-top: calc(28 * var(--u)); }
.section--ruled::before {
  content: "";
  display: block;
  height: 3px;
  margin-bottom: calc(14 * var(--u));
  background: var(--ink);
}
.section--ink { background-color: var(--ink); color: var(--paper); }

.folio {
  display: flex;
  justify-content: space-between;
  padding-bottom: calc(44 * var(--u));
}
.section--ink .folio { color: var(--soft-ink); }

.statement {
  font: 400 calc(52 * var(--u)) / 1.08 var(--display);
  letter-spacing: -.003em;
  text-wrap: balance;
}

/* The one highlight in the running text: drawn on when the line arrives. */
.mark {
  background: linear-gradient(var(--lamp), var(--lamp)) 0 92% / 100% .09em no-repeat;
}

.prose {
  margin-top: calc(32 * var(--u));
  max-width: 32em;
  text-wrap: pretty;
}
.prose--offset { margin-left: var(--col); }
.prose + .prose { margin-top: calc(22 * var(--u)); }

/* Section titles set to the full measure. Divisors are each line's ink width in em. */
.fit-title {
  font: 400 calc(var(--measure) / 4.494) / 1 var(--display);
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: -.016em;
}
.fit-title--pfx { font-size: calc(var(--measure) / 4.395); margin-left: -.063em; }
.fit-title--how { font-size: calc(var(--measure) / 4.268); margin-left: -.063em; }
.fit-title--now { font-size: calc(var(--measure) / 7.014); margin-left: -.047em; }

/* 02 What I build ────────────────────────────────────────── */

.index { margin-top: calc(40 * var(--u)); border-top: 1px solid rgba(242, 242, 239, .32); }
.index__item { border-bottom: 1px solid rgba(242, 242, 239, .32); }

.index button {
  display: grid;
  grid-template-columns: var(--col) 1fr 24px;
  align-items: start;
  width: 100%;
  padding: calc(13 * var(--u)) 0;
  cursor: pointer;
  touch-action: manipulation;
}
.index button:focus-visible { outline-offset: -2px; }

.index__num {
  padding-top: .36em;
  font: 400 15px/1 var(--display);
  letter-spacing: .07em;
  color: var(--soft-ink);
}
.index__name {
  font: 400 calc(46 * var(--u)) / 1.03 var(--display);
  text-transform: uppercase;
}

/* Crosshair that closes to a rule: the same drawing as the Studio diagram. */
.plus { position: relative; width: 22px; height: 22px; margin-top: calc(11 * var(--u)); }
.plus::before, .plus::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform .35s var(--ease), background-color .2s;
}
.plus::before { left: 0; right: 0; top: 10px; height: 1.5px; }
.plus::after { top: 0; bottom: 0; left: 10px; width: 1.5px; }
.is-open .plus::before { background: var(--lamp); }
.is-open .plus::after { transform: scaleY(0); }

.index__panel p {
  padding: 0 0 calc(18 * var(--u)) var(--col);
  color: var(--soft-ink);
}
.js .index__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .4s var(--ease), visibility .4s;
}
.js .index__panel p { min-height: 0; overflow: hidden; }
.js .is-open .index__panel { grid-template-rows: 1fr; visibility: visible; }

/* 03 PFX Creative ────────────────────────────────────────── */

.meet {
  position: relative;
  width: calc(var(--col) * 3);
  aspect-ratio: 1;
  margin: calc(40 * var(--u)) 0 0 var(--col);
  border: 3px solid var(--ink);
  border-radius: 2px;
}
.meet::before, .meet::after {
  content: "";
  position: absolute;
  background: var(--ink);
}
.meet::before { left: 0; right: 0; top: calc(50% - .5px); height: 1px; }
.meet::after { top: 0; bottom: 0; left: calc(50% - .5px); width: 1px; }

.meet__dot {
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 0 5px var(--paper);
}

.meet__word {
  position: absolute;
  z-index: 1;
  padding: 0 6px;
  background: var(--paper);
  font: 400 calc(19 * var(--u)) / 1.1 var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.meet__word--t { top: 12px; left: 50%; transform: translateX(-50%); }
.meet__word--b { bottom: 12px; left: 50%; transform: translateX(-50%); }
.meet__word--r { top: 50%; right: calc(12px + .55em); transform: translate(50%, -50%) rotate(90deg); }
.meet__word--l { top: 50%; left: calc(12px + .55em); transform: translate(-50%, -50%) rotate(-90deg); }

/* 04 How I work ──────────────────────────────────────────── */

.steps { margin-top: calc(48 * var(--u)); }
.steps li {
  margin-left: calc(var(--i) * var(--col) / 2);
  padding-top: calc(10 * var(--u));
  padding-bottom: calc(28 * var(--u));
  border-top: 1px solid var(--ink);
}
.steps h3 {
  font: 400 calc(60 * var(--u)) / 1.05 var(--display);
  text-transform: uppercase;
}
.steps p { margin-top: 8px; padding-right: 4px; color: var(--soft); text-wrap: pretty; }

/* 05 Work ───────────────────────────────────────────────── */

.ledger { margin-top: calc(32 * var(--u)); border-top: 1px solid var(--ink); }
.ledger li { border-bottom: 1px solid var(--ink); }
.ledger li > * {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: calc(14 * var(--u)) 0;
}
.ledger__name { font: 400 calc(30 * var(--u)) / 1.1 var(--display); text-transform: uppercase; }
.ledger__type { grid-row: 2; color: var(--soft); font-size: 16px; }
.ledger__state { grid-row: 1; grid-column: 2; align-self: center; font-size: 16px; }
.lamp--on { color: var(--ink); }

/* 06 Closing ─────────────────────────────────────────────── */

.section--close { padding-bottom: 0; padding-inline: 0; }
.section--close > :not(.bar):not(.elsewhere) { margin-inline: var(--gutter); }

.section--close > .closing {
  margin-left: calc(var(--gutter) - .03em);
  font: 400 calc(96 * var(--u)) / 1.02 var(--display);
  text-transform: uppercase;
  text-wrap: balance;
}

.card {
  margin-top: calc(44 * var(--u));
  padding-top: 14px;
  border-top: 1px solid rgba(242, 242, 239, .32);
  font-style: normal;
  color: var(--soft-ink);
}
.card__name {
  margin-bottom: 4px;
  font: 400 calc(30 * var(--u)) / 1.15 var(--display);
  text-transform: uppercase;
  color: var(--paper);
}
.card__links { display: grid; justify-items: start; gap: 2px; margin-top: 14px; color: var(--paper); }
.card__links a { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 0; background-position: 0 80%; }

.bar--lamp {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  margin-top: calc(40 * var(--u));
  padding-block: calc(18 * var(--u)) calc(12 * var(--u));
  background: var(--lamp);
  color: var(--ink);
}
.bar--lamp .bar__label {
  grid-column: 1 / -1;
  font-size: calc(var(--measure) / 3.413);
  letter-spacing: 0;
  white-space: nowrap;
  margin-left: -.063em;
}
.bar--lamp .bar__note { margin-left: 0; font-size: 18px; }
.bar--lamp .bar__icon { width: 30px; height: 30px; }
.bar--lamp:active { background: var(--paper); }

.bar--quiet { color: var(--paper); }
.bar--quiet:active { background: var(--paper); color: var(--ink); }

.elsewhere { border-top: 1px solid rgba(242, 242, 239, .32); }
.elsewhere a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  padding-inline: var(--gutter);
  font: 400 22px/1 var(--display);
  text-transform: uppercase;
}
.elsewhere svg { width: 22px; height: 22px; }

/* Footer ────────────────────────────────────────────────── */

.footer {
  display: grid;
  grid-template-columns: calc(56 * var(--u)) 1fr;
  column-gap: 12px;
  padding: calc(40 * var(--u)) var(--gutter) calc(env(safe-area-inset-bottom) + 24px);
}
.footer__logo { width: 100%; height: auto; }
.footer__text { font-size: calc(15 * var(--u)); line-height: 1.33; color: var(--soft); white-space: nowrap; }
.footer__text strong { font-weight: 400; color: var(--ink); }

.footer__links {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin-top: 26px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.footer__links a:last-child { justify-content: flex-end; }
.footer__links a {
  display: flex;
  align-items: center;
  min-width: 44px;
  min-height: 48px;
  font: 400 18px/1 var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.footer__legal { grid-column: 1 / -1; margin-top: 14px; color: var(--soft); }

/* Motion ────────────────────────────────────────────────────
   Only ever an enhancement. Without JS, or with reduced motion, everything
   is simply there. */

@media (prefers-reduced-motion: no-preference) {
  .hero .lamp::after { animation: light 1s .5s ease-out both; }

  .js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s var(--ease), transform .8s var(--ease);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .js .mark {
    background-size: 0 .09em;
    transition: background-size .9s .35s var(--ease);
  }
  .js .is-in .mark { background-size: 100% .09em; }

  .js .steps [data-reveal] { transition-delay: calc(var(--i) * 60ms); }

  .js .meet::before { transform: scaleX(0); transition: transform 1s .1s var(--ease); }
  .js .meet::after { transform: scaleY(0); transition: transform 1s .1s var(--ease); }
  .js .meet__dot { transform: scale(.6); opacity: 0; transition: transform .5s .75s var(--ease), opacity .5s .75s; }
  .js .meet.is-in::before { transform: none; }
  .js .meet.is-in::after { transform: none; }
  .js .meet.is-in .meet__dot { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@keyframes settle { from { transform: translateY(4px); } to { transform: none; } }
@keyframes light { from { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .35; } to { opacity: 1; } }

@media (hover: hover) {
  .bar:hover .bar__icon { transform: translate(3px, -3px); }
  .bar[data-save-contact]:hover .bar__icon { transform: translateY(3px); }
  .index button:hover .index__num { color: var(--lamp); }
  .link:hover { background-size: 30% 1px; }
}

/* Short phones with browser chrome showing: keep the actions on the first screen. */
@media (max-height: 700px) {
  .hero__meta { display: none; }
  .hero__statement { font-size: calc(16.5 * var(--u)); padding-block: calc(10 * var(--u)); }
  .bar { min-height: calc(54 * var(--u)); }
  .pair a { min-height: 46px; }
}

/* Not the intended experience: the same sheet, centred. */
@media (min-width: 431px) {
  body { background: var(--ink); }
  .hero { min-height: min(100svh, 932px); }
  .page { box-shadow: 0 0 0 1px rgba(242, 242, 239, .14); }
}