/* The studio's portfolio (turn 122; turn 125: his answers; turn 126: the titles alone, the resume, the gate), the look.
   Copied into portfolio/assets/ by build_portfolio.py; edit it here. His images on a dark earth ground, reading on
   parchment (his ruling for Basar and Basirah); condensed display capitals over a monospaced gloss (his pairing: Bebas
   Neue and Source Code, with the fallbacks a visitor's machine already has; nothing is fetched). Every frame is
   complete without motion (D55). */

:root {
  --earth: #14100c; --earth-2: #1c1611; --earth-3: #2a2119; --line: #3b3127;
  --on-earth: #efe6d6; --on-earth-2: #b8aa94; --on-earth-3: #8c7f6c;
  --parchment: #f2ebdd; --parchment-2: #e7dcc8; --on-parch: #1f1a13; --on-parch-2: #5b5041;
  --accent: #d0753f;
  --teal: #0f5f60; --maroon: #4d1b20; --on-teal: #e4efec;
  --display: "Bebas Neue", "Bahnschrift Condensed", "Bahnschrift SemiBold Condensed", "Bahnschrift", "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --mono: "Source Code Pro", "Cascadia Mono", "Cascadia Code", Consolas, Menlo, monospace;
  --body: "Segoe UI", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --his: Georgia, "Sitka Text", "Times New Roman", serif;
  --wide: 1520px;
  --gap: clamp(14px, 2.2vw, 30px);
  --lw: clamp(34px, 3.4vw, 58px);   /* the strip's label column: turn 122's, restored with its size in turn 126 */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.6 var(--body); }
body.pf-earth { background: var(--earth); color: var(--on-earth); }
body.pf-parchment { background: var(--parchment); color: var(--on-parch); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.pf-display { font-family: var(--display); font-stretch: 75%; font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; line-height: .95; overflow-wrap: break-word; }
.pf-mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; }
.pf-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pf-skip { position: absolute; left: -999px; top: 0; padding: 8px 12px; background: var(--accent); color: #000; z-index: 60; }
.pf-skip:focus { left: 8px; }
.pf-preview { font: 12px/1.4 var(--mono); padding: 6px 16px; background: #3a2818; color: #f3dcc4; text-align: center; }
.pf-parchment .pf-preview { background: #e2d2b8; color: #4a3b28; }

/* the top: the studio's name and his, the site, the mediums (each a work's title, alone) */
.pf-top { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px;
  padding: 12px var(--gap); background: color-mix(in srgb, var(--earth) 92%, transparent); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px); }
.pf-parchment .pf-top { background: color-mix(in srgb, var(--parchment) 94%, transparent); border-bottom-color: var(--parchment-2); }
.pf-name { display: flex; align-items: baseline; gap: 12px; margin-right: auto; text-decoration: none; }
.pf-name-studio { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: 30px; letter-spacing: .03em; line-height: 1; }
.pf-name-person { font-family: var(--display); font-stretch: 75%; font-weight: 400; font-size: 21px; letter-spacing: .05em;
  text-transform: uppercase; line-height: 1; color: var(--on-earth-2); padding-left: 12px; border-left: 1px solid var(--line); }
.pf-parchment .pf-name-person { color: var(--on-parch-2); border-left-color: var(--parchment-2); }
.pf-nav, .pf-mediums { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.pf-nav a { font: 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--on-earth-2); }
.pf-parchment .pf-nav a { color: var(--on-parch-2); }
.pf-mediums a { display: inline-flex; text-decoration: none; color: var(--on-earth-3); padding-bottom: 2px; }
.pf-m-t { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: 21px; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.pf-parchment .pf-mediums a { color: var(--on-parch-2); }
.pf-nav a:hover, .pf-mediums a:hover, .pf-nav a[aria-current], .pf-mediums a[aria-current] { color: var(--on-earth); }
.pf-parchment .pf-nav a:hover, .pf-parchment .pf-mediums a:hover, .pf-parchment .pf-nav a[aria-current] { color: var(--on-parch); }
.pf-mediums a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); }

/* the strip: the banner of his profile as the way in; each work's title set on its side, alone. Turn 126, his words:
   "restore the larger size of the text title": the size of turn 122 (before turn 125 made room for a second line).
   Where a visitor's machine lacks a condensed face and a title would run past its picture, pf.js narrows that title
   to fit; on his machine it stands at this size. */
.pf-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; background: #000; }
.pf-cell { position: relative; display: block; padding-left: var(--lw); text-decoration: none; background: #000; }
.pf-label { position: absolute; left: 0; top: 0; bottom: 0; width: var(--lw); overflow: hidden; display: flex; align-items: center;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; color: #fff; padding: .45em 0; }
.pf-label-t { display: block; font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: clamp(15px, 1.45vw, 26px);
  line-height: 1.12; letter-spacing: .03em; text-transform: uppercase; }
.pf-cell img { width: 100%; height: auto; background: #0a0806; }
.pf-cell:hover .pf-label-t, .pf-cell:focus-visible .pf-label-t { color: var(--accent); }

/* the home: his statement, the door to the person, his portrait to its right */
main { display: block; }
.pf-intro { max-width: var(--wide); margin: 0 auto; padding: clamp(36px, 6vw, 80px) var(--gap) 10px; display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4.5vw, 80px); align-items: center; }
.pf-line { color: var(--on-earth-2); margin: 0 0 10px; text-transform: uppercase; letter-spacing: .08em; }
.pf-lede { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.35; max-width: 34ch; margin: 0; font-weight: 300; }
.pf-more-me { margin: 28px 0 0; }
.pf-button { display: inline-block; padding: 12px 22px 10px; border: 1px solid var(--accent); color: var(--on-earth);
  font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: 22px; letter-spacing: .07em; line-height: 1;
  text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.pf-button:hover, .pf-button:focus-visible { background: var(--accent); color: #140d07; }
.pf-portrait { margin: 0; }
.pf-portrait img { width: 100%; height: auto; background: #0a0806; }
.pf-portrait-home { justify-self: end; }
.pf-portrait-home img { width: auto; max-width: 100%; max-height: min(78vh, 680px); background: none; }
/* turn 130, his words: "There should be a bit more space between ‘The journey’ and the following section. Let's give the
   eye some space to rest". Each section of the home stands further from the next. */
.pf-journey, .pf-anchors, .pf-more { max-width: var(--wide); margin: 0 auto; padding: clamp(56px, 7.5vw, 120px) var(--gap) 0; }
.pf-journey { padding-bottom: clamp(28px, 3.5vw, 56px); }
.pf-journey h2, .pf-more h2, .pf-resume h2 { font-size: clamp(44px, 6.4vw, 104px); margin: 0 0 6px; }
.pf-his { font-family: var(--his); font-style: italic; color: var(--on-earth-2); font-size: clamp(17px, 1.5vw, 21px); margin: 0 0 22px; }
.pf-journey ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.pf-journey li a { display: block; text-decoration: none; }
.pf-journey li img { width: 100%; background: #0a0806; transition: filter .3s; }
.pf-journey li .pf-display { display: block; font-size: clamp(28px, 2.7vw, 44px); margin-top: 12px; }
.pf-journey li a:hover img { filter: brightness(1.08); }
.pf-anchors { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gap) * 1.6); }
.pf-kicker { color: var(--on-earth-2); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 10px; }
.pf-parchment .pf-kicker { color: var(--on-parch-2); }
.pf-anchor { display: block; text-decoration: none; }
.pf-anchor img { width: 100%; background: #0a0806; }
.pf-anchor .pf-display { display: block; font-size: clamp(32px, 3.4vw, 60px); margin-top: 12px; }
.pf-anchors .pf-desc { color: var(--on-earth-2); max-width: 52ch; }
.pf-more { padding-bottom: clamp(40px, 6vw, 90px); }
.pf-more > p { color: var(--on-earth-2); margin: 0 0 18px; }
.pf-peek { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 18px; }
.pf-peek img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .82; transition: opacity .25s; }
.pf-peek a:hover img { opacity: 1; }
.pf-link { color: var(--on-earth); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.pf-parchment .pf-link { color: var(--on-parch); }

/* the resume (turn 126): his words as he wrote them; each experience a door to its work */
.pf-resume { max-width: var(--wide); margin: 0 auto; padding: clamp(64px, 8vw, 128px) var(--gap) 0; scroll-margin-top: 70px; }
.pf-resume-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px clamp(24px, 4.5vw, 72px);
  align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 26px; }
.pf-resume-head h2 { grid-column: 1 / -1; }
.pf-resume-name { font-size: clamp(30px, 3vw, 48px); margin: 0 0 8px; }
.pf-resume-line { color: var(--on-earth-2); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; line-height: 1.5; }
.pf-resume-contact { margin: 0; line-height: 1.8; }
.pf-resume-contact a { color: var(--on-earth); text-underline-offset: .25em; }
.pf-resume-summary { margin: 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--on-earth); max-width: 68ch; }
.pf-resume-who { display: flex; flex-direction: column; }
.pf-resume-head { align-items: stretch; }
.pf-resume-contact { margin-bottom: 12px; }
/* turn 127: a quiet card to write to him, resting in the gap under his lines, its foot level with the summary's; clear
   enough to find, never in front of the work. Each field keeps its label in view. Sent, it says so: its top turns
   green, a mark and a line, the fields rest. */
.pf-contact { margin-top: auto; padding: 10px 12px 11px; border: 1px solid var(--line); border-top: 3px solid var(--accent);
  background: var(--earth-2); max-width: 600px; }
.pf-contact-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; }
.pf-contact-t { margin: 0; font-size: clamp(20px, 1.55vw, 24px); line-height: 1; }
/* turn 130, his words: "lets put  little email symbol next to the mail and phone symbol next to the phone number and
   increase the font size of both". */
.pf-contact-ways { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: 17px; }
.pf-contact-ways a { display: inline-flex; align-items: center; gap: 8px; color: var(--on-earth); text-underline-offset: .25em; }
.pf-ico { flex: none; width: 1.15em; height: 1.15em; color: var(--accent); }
.pf-contact-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; margin: 0 0 8px; }
.pf-contact-row2 { display: flex; align-items: flex-end; gap: 8px; }
.pf-field { position: relative; margin: 0; }
.pf-field-msg { flex: 1; }
.pf-field input, .pf-field textarea { display: block; width: 100%; height: 42px; padding: 16px 10px 4px; border: 1px solid var(--line);
  border-radius: 0; background: var(--earth); color: var(--on-earth); font: 15.5px/1.35 var(--body); }
.pf-field textarea { resize: none; overflow: hidden; transition: height .2s; }
.pf-field-msg textarea:focus, .pf-field-msg textarea:not(:placeholder-shown) { height: 112px; overflow: auto; resize: vertical; }
.pf-field label { position: absolute; left: 11px; top: 12px; color: var(--on-earth-3); font: 14.5px/1.2 var(--body); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 20px); transition: top .15s, font-size .15s, color .15s; }
.pf-field input:focus + label, .pf-field input:not(:placeholder-shown) + label,
.pf-field textarea:focus + label, .pf-field textarea:not(:placeholder-shown) + label {
  top: 4px; color: var(--on-earth-2); font: 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pf-field input:focus, .pf-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.pf-field [aria-invalid="true"] { border-color: #e2836f; }
.pf-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pf-contact-send { flex: none; height: 42px; padding: 3px 22px 0; border: 1px solid var(--accent); background: var(--accent); color: #140d07;
  cursor: pointer; font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: 18px; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase; }
.pf-contact-send:hover, .pf-contact-send:focus-visible { background: transparent; color: var(--on-earth); }
.pf-contact-send[disabled] { opacity: .55; cursor: default; }
.pf-contact-again { margin: 8px 0 0; }
.pf-contact-status { margin: 8px 0 0; font: 13.5px/1.45 var(--mono); color: var(--on-earth-2); }
.pf-contact-status:empty { display: none; }
.pf-contact-status a { color: var(--on-earth); }
.pf-contact.is-sent { border-top-color: #8fbf7a; }
.pf-contact.is-sent .pf-contact-status { color: #b9dca9; font-size: 15px; }
.pf-contact.is-sent .pf-contact-status::before { content: "\2713  "; font-weight: 700; }
.pf-contact.is-fail .pf-contact-status { color: #f0b3a5; }
.pf-resume-body { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 80px); padding-top: 18px; }
/* turn 127, his words: "there needs to be a bit more visual hierarchy for these perhaps making larger and some visual
   component to distinguish these moments". Each section head: larger, an accent mark before it and a rule after it.
   Each date: a tab of its own, beside a line that runs down the experience with a mark at every role. */
.pf-resume-h { display: flex; align-items: center; gap: 14px; margin: 40px 0 18px; color: var(--on-earth);
  font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: clamp(22px, 1.9vw, 30px); line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; }
.pf-resume-h::before { content: ""; flex: none; width: 11px; height: 11px; background: var(--accent); transform: rotate(45deg); }
.pf-resume-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pf-job { display: grid; grid-template-columns: 12.5em minmax(0, 1fr); gap: 6px 26px; padding: 0 0 44px; scroll-margin-top: 80px; }
.pf-job-when { align-self: start; justify-self: start; margin: 2px 0 0; padding: 8px 12px 7px; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); background: var(--earth-2); color: var(--on-earth); font-family: var(--mono);
  font-size: 15px; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; }
.pf-job-what { position: relative; border-left: 1px solid var(--line); padding: 2px 0 0 24px; }
.pf-job-what::before { content: ""; position: absolute; left: -6px; top: 12px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--earth); border: 2px solid var(--accent); }
.pf-job:last-of-type .pf-job-what { border-left-color: transparent; }
.pf-job-role { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: clamp(25px, 2.1vw, 34px); line-height: 1.02;
  text-transform: uppercase; letter-spacing: .015em; margin: 0; }
.pf-job-org { margin: 8px 0 12px; color: var(--on-earth-2); font-size: 17px; }
.pf-job-lead { margin: 0 0 8px; }
.pf-job-points { margin: 0 0 6px; padding-left: 1.1em; }
.pf-job-points li { margin: 0 0 6px; line-height: 1.55; }
.pf-job-points li::marker { color: var(--accent); }
.pf-job-label { margin: 14px 0 2px; font-family: var(--his); font-style: italic; color: var(--on-earth-2); }
.pf-doors { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.pf-door-item { display: flex; align-items: stretch; border: 1px solid var(--line); background: var(--earth-2); }
.pf-door { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; text-decoration: none; min-height: 52px; }
.pf-door-thumb { width: 64px; height: 48px; object-fit: cover; background: #0a0806; flex: none; }
.pf-door-thumb.pf-missing { visibility: hidden; }   /* an image not reachable (offline, before its files are kept) */
.pf-door-t { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: 21px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.pf-door-y { color: var(--on-earth-3); margin-left: 2px; white-space: nowrap; flex: none; }
.pf-door-t { min-width: 0; }   /* turn 130: on a phone the year was squeezed to one digit a line; the title wraps instead */
.pf-door:hover .pf-door-t, .pf-door:focus-visible .pf-door-t { color: var(--accent); }
.pf-newtab { display: flex; align-items: center; justify-content: center; width: 40px; border-left: 1px solid var(--line);
  text-decoration: none; color: var(--on-earth-2); font-size: 17px; }
.pf-newtab:hover, .pf-newtab:focus-visible { color: var(--on-earth); background: var(--earth-3); }
.pf-resume-side .pf-resume-block { padding: 0 0 18px; }
.pf-resume-side .pf-resume-h { margin-top: 40px; }

/* turn 130, his words: "when scrolling through the resume lets allow for a slight visual hierarchy where the specific
   segment of the resume that the viewer is centered on is highlighted in the lighter color and the surrounding sessions
   are recessed/faded out a bit". pf.js marks the part of the resume at the middle of the screen (.is-near) and the resume
   as being read (.pf-lit); nothing moves on the page. The rest recede one step down the earth's own scale, which keeps
   every word at AA contrast or better (on-earth-2 7.9:1, on-earth-3 4.6:1 on these grounds); the thumbnails lose their
   colour a little. Without script, or in print, nothing recedes. With motion reduced, the change is immediate. */
.pf-job-when, .pf-job-role, .pf-job-org, .pf-job-lead, .pf-job-points li, .pf-job-label, .pf-door-t, .pf-door-y,
.pf-resume-block p, .pf-resume-block li, .pf-job-what::before, .pf-door-thumb {
  transition: color .45s ease, border-color .45s ease, background-color .45s ease, filter .45s ease; }
.pf-lit .pf-job:not(.is-near) .pf-job-when { color: var(--on-earth-2); border-left-color: var(--line); }
.pf-lit .pf-job:not(.is-near) .pf-job-role, .pf-lit .pf-job:not(.is-near) .pf-job-lead,
.pf-lit .pf-job:not(.is-near) .pf-job-points li, .pf-lit .pf-job:not(.is-near) .pf-door-t,
.pf-lit .pf-resume-block:not(.is-near) p, .pf-lit .pf-resume-block:not(.is-near) li { color: var(--on-earth-2); }
.pf-lit .pf-job:not(.is-near) .pf-job-org, .pf-lit .pf-job:not(.is-near) .pf-job-label,
.pf-lit .pf-job:not(.is-near) .pf-door-y { color: var(--on-earth-3); }
.pf-lit .pf-job:not(.is-near) .pf-job-what::before { border-color: var(--line); }
.pf-lit .pf-job:not(.is-near) .pf-door-thumb { filter: grayscale(.7) brightness(.72); }
.pf-lit .pf-job.is-near .pf-job-role { color: #fff8ec; }
.pf-lit .pf-job.is-near .pf-job-when { background: var(--earth-3); }
@media (prefers-reduced-motion: reduce) {
  .pf-job-when, .pf-job-role, .pf-job-org, .pf-job-lead, .pf-job-points li, .pf-job-label, .pf-door-t, .pf-door-y,
  .pf-resume-block p, .pf-resume-block li, .pf-job-what::before, .pf-door-thumb { transition: none; }
}
.pf-resume-side p { margin: 0 0 6px; color: var(--on-earth); }
.pf-resume-side ul { margin: 4px 0 0; padding-left: 1.1em; }
.pf-resume-side li { margin: 0 0 5px; line-height: 1.5; }
.pf-resume-side li::marker { color: var(--accent); }
/* the preview of a door: shown beside it while the pointer rests on it, or the keys reach it */
.pf-peekcard { position: fixed; z-index: 40; width: min(340px, 86vw); background: var(--earth-2); border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55); padding: 10px 10px 12px; pointer-events: none; }
.pf-peekcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #0a0806; }
.pf-peekcard .pf-peek-t { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: 26px; line-height: 1;
  text-transform: uppercase; margin: 10px 0 4px; }
.pf-peekcard .pf-mono { color: var(--on-earth-2); margin: 0; }

/* a work */
.pf-work-head { max-width: var(--wide); margin: 0 auto; padding: clamp(30px, 5vw, 70px) var(--gap) 0; }
.pf-work-head h1 { font-size: clamp(54px, 9vw, 150px); margin: 0; }
.pf-meta { color: var(--on-earth-2); margin: 10px 0 26px; }
.pf-meta a { color: inherit; }
.pf-mural { margin: 0 0 18px; }
.pf-mural img { width: 100%; max-width: 1300px; margin: 0 auto; background: #0a0806; }
.pf-text { max-width: 68ch; margin: 34px auto; padding: 0 var(--gap); font-size: 18px; color: var(--on-earth); overflow-wrap: anywhere; }
.pf-desc { color: var(--on-earth); }
.pf-text.pf-short { text-align: center; font-size: clamp(18px, 1.6vw, 24px); color: var(--on-earth-2); }
.pf-text.pf-short .pf-link { display: inline-block; margin-top: 8px; font-family: var(--display); font-stretch: 75%; font-weight: 700;
  font-size: clamp(30px, 3.4vw, 50px); text-transform: uppercase; color: var(--on-earth); text-decoration-thickness: 2px; }
.pf-rule { border: 0; border-top: 1px solid var(--line); width: min(60%, 640px); margin: 30px auto; }
.pf-modules { padding-bottom: 20px; }
.pf-fig { margin: 0 auto 6px; max-width: min(1400px, 100%); padding: 0 var(--gap); }
.pf-fig.pf-bleed { max-width: min(1760px, 100%); padding: 0; }
.pf-fig img, .pf-fig video { width: 100%; background: #0a0806; cursor: zoom-in; }
.pf-fig video { cursor: default; }

/* his grids (turn 125): rows at one height, each image at its own proportions, four pixels apart, as on Behance;
   a glance down the rows, or a click into any one of them */
.pf-grid { max-width: min(1760px, 100%); margin: 0 auto 6px; }
.pf-row { display: flex; gap: 4px; margin-bottom: 4px; }
.pf-row:last-child { margin-bottom: 0; }
.pf-tile { flex: var(--ar) 1 0%; min-width: 0; margin: 0; }
.pf-tile img, .pf-tile video { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; background: #0a0806; cursor: zoom-in; }
.pf-tile video { cursor: default; }
.pf-tile img:hover { filter: brightness(1.07); }

/* a video of his (turn 126): his cover behind a button; the player is loaded only when he who visits asks for it */
.pf-video { max-width: min(1200px, 100%); margin: 14px auto 22px; padding: 0 var(--gap); }
.pf-video-play { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); color: var(--on-earth); cursor: pointer;
  background: linear-gradient(rgba(10, 8, 6, .55), rgba(10, 8, 6, .72)), var(--poster, none) center / cover no-repeat, #0a0806; }
.pf-video-p { display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%;
  border: 2px solid var(--on-earth); font-size: 28px; padding-left: 6px; transition: background .2s, color .2s; }
.pf-video-play:hover .pf-video-p, .pf-video-play:focus-visible .pf-video-p { background: var(--accent); border-color: var(--accent); color: #140d07; }
.pf-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: #000; }
.pf-video figcaption { text-align: center; color: var(--on-earth-2); padding-top: 8px; }

/* turn 127: his intro, a section of its own; the flythrough under the Serena Williams Design Crew title */
/* turn 130: no title above the intro; the video stands alone, with room around it */
.pf-intro-video { max-width: var(--wide); margin: 0 auto; padding: clamp(64px, 8vw, 128px) var(--gap) 0; }
.pf-intro-video h2 { font-size: clamp(44px, 6.4vw, 104px); margin: 0 0 14px; }
.pf-intro-video .pf-video, .pf-flythru .pf-video { max-width: none; margin: 0; padding: 0; }
.pf-studio .pf-intro-video { padding: clamp(44px, 7vw, 90px) 0 0; }
.pf-studio .pf-intro-video h2 { font-size: clamp(34px, 4.4vw, 64px); margin: 0 0 18px; }
.pf-parchment .pf-video figcaption { color: var(--on-parch-2); }
.pf-video-note { color: var(--on-earth-3); }
.pf-parchment .pf-video-note { color: var(--on-parch-2); }
.pf-flythru { margin: 4px 0 30px; }
.pf-flythru h2 { font-size: clamp(28px, 3vw, 46px); margin: 0 0 12px; }
.pf-video-file .pf-video-p { padding-left: 0; font-size: 24px; }

.pf-elsewhere { max-width: 68ch; margin: 18px auto; padding: 0 var(--gap); color: var(--on-earth-2); text-align: center; }
.pf-room { margin: 10px auto 30px; max-width: min(1760px, 100%); }
.pf-room figcaption { text-align: center; color: var(--on-earth-2); padding: 8px var(--gap); }
.pf-pano { position: relative; background-color: #0a0806; overflow: hidden; touch-action: pan-y; }
.pf-pano img { width: 100%; }
.pf-pano.pf-pano-on { height: min(72vh, 680px); background-repeat: repeat-x; cursor: grab; }
.pf-pano.pf-grab { cursor: grabbing; }
.pf-onward { max-width: var(--wide); margin: 30px auto 0; padding: 0 var(--gap) 50px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); border-top: 1px solid var(--line); padding-top: 26px; }
.pf-onward a { text-decoration: none; display: block; }
.pf-onward .pf-mono { display: block; color: var(--on-earth-2); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.pf-onward img { width: 100%; background: #0a0806; }
.pf-onward .pf-display { display: block; font-size: clamp(24px, 2.2vw, 36px); margin-top: 8px; }
.pf-onward .pf-onward-back { align-self: start; border-left: 2px solid var(--accent); padding-left: 14px; }

/* the archive */
.pf-archive { max-width: var(--wide); margin: 0 auto; padding: clamp(30px, 5vw, 70px) var(--gap) 60px; }
.pf-archive h1 { font-size: clamp(54px, 8vw, 130px); margin: 0 0 6px; }
.pf-archive > p { color: var(--on-earth-2); margin: 0 0 24px; }
.pf-archive ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 14px; }
.pf-archive a { text-decoration: none; display: block; }
.pf-archive img, .pf-noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--earth-3); display: block; }
.pf-archive a.pf-here .pf-t::after { content: " ·"; color: var(--accent); }
/* turn 130 · the page for an address that holds none (404.html, written by publish_portfolio.py for the live site) */
.pf-notfound { max-width: var(--wide); margin: 0 auto; padding: clamp(56px, 7.5vw, 120px) var(--gap) clamp(80px, 10vw, 160px); }
.pf-notfound h1 { font-size: clamp(54px, 8vw, 130px); margin: 0 0 14px; }
.pf-notfound p { max-width: 60ch; margin: 0; color: var(--on-earth-2); font-size: clamp(17px, 1.35vw, 20px); }
.pf-notfound a { color: var(--on-earth); text-underline-offset: .25em; }
.pf-t { display: block; margin-top: 7px; font-size: 14.5px; line-height: 1.3; }
.pf-y { display: block; color: var(--on-earth-3); margin-top: 2px; }

/* the studio, on parchment: the founder, in his words, his portrait beside his name */
.pf-studio { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 7vw, 100px) var(--gap) 40px; }
.pf-founder { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4.5vw, 72px); align-items: start; }
.pf-portrait-studio img { background: var(--parchment-2); }
.pf-founder h1 { font-size: clamp(54px, 7.4vw, 118px); margin: 0 0 8px; }
.pf-role { color: var(--on-parch-2); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 28px; }
.pf-about { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.6; max-width: 60ch; margin: 0 0 16px; }
.pf-things { margin-top: clamp(44px, 7vw, 90px); }
.pf-things h2 { font-size: clamp(34px, 4.4vw, 64px); margin: 0 0 20px; }
.pf-things ol { margin: 0; padding: 0; list-style: none; counter-reset: thing; display: grid; gap: 0; }
.pf-things li { counter-increment: thing; display: grid; grid-template-columns: 3.4em 1fr; align-items: baseline;
  font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; border-top: 1px solid var(--parchment-2); padding: 14px 0; }
.pf-things li::before { content: counter(thing, decimal-leading-zero); font: 12.5px/1 var(--mono); color: var(--accent); }
.pf-elsewhere-studio { margin: 36px 0 0; }
.pf-continues { margin: clamp(60px, 9vw, 130px) 0 10px; padding-top: 28px; border-top: 2px solid var(--on-parch); }
.pf-continues .pf-display { font-size: clamp(40px, 6.2vw, 100px); margin: 0 0 12px; }
.pf-continues .pf-mono { font-size: 14px; letter-spacing: .06em; color: var(--on-parch-2); margin: 0; }

/* the gate. Turn 126: his two panels side by side as one spread. Turn 127, his words: "it should open like a sliding
   window or door, so either sides of the panel should still be visible the content behind open should be revealed with
   the doors spread open on either side". The handle sits on the seam; the panels part like the two leaves of a door,
   turning a little, and stand at either side, their seam edges in view, while the frame grows to hold their words.
   Without script the words stand under the panels; with motion reduced the doors simply stand open (D55). */
.pf-gate { --door: 17%; --ease: cubic-bezier(.66, 0, .22, 1); margin: clamp(40px, 6vw, 80px) calc(-1 * var(--gap)) 0; }
.pf-gate-frame { position: relative; overflow: hidden; background: var(--earth); }
.pf-gate-door { margin: 0; }
.pf-gate-door img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-gate:not(.is-ready) .pf-gate-frame { display: flex; flex-wrap: wrap; }
.pf-gate:not(.is-ready) .pf-gate-door { width: 50%; }
.pf-gate:not(.is-ready) .pf-gate-behind { width: 100%; }
.pf-gate:not(.is-ready) .pf-gate-key { display: none; }
.pf-gate.is-ready .pf-gate-frame { aspect-ratio: 11014 / 4961; perspective: 1900px; transition: height 1.05s var(--ease); }
.pf-gate.is-ready.is-moving .pf-gate-frame, .pf-gate.is-ready.is-open .pf-gate-frame { aspect-ratio: auto; }
.pf-gate.is-ready .pf-gate-door { position: absolute; top: 0; bottom: 0; z-index: 2; width: 50%; overflow: hidden;
  transition: width 1.1s var(--ease), transform 1.1s var(--ease), box-shadow 1.1s var(--ease); }
.pf-gate.is-ready .pf-gate-l { left: 0; transform-origin: left center; }
.pf-gate.is-ready .pf-gate-r { right: 0; transform-origin: right center; }
.pf-gate-l img { object-position: right center; }
.pf-gate-r img { object-position: left center; }
.pf-gate.is-ready .pf-gate-door::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30px; pointer-events: none; opacity: .0;
  transition: opacity 1.1s var(--ease); }
.pf-gate.is-ready .pf-gate-l::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .5), transparent); }
.pf-gate.is-ready .pf-gate-r::after { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .5), transparent); }
.pf-gate.is-open .pf-gate-door { width: var(--door); }
.pf-gate.is-open .pf-gate-door::after { opacity: 1; }
.pf-gate.is-open .pf-gate-l { transform: rotateY(12deg); box-shadow: 22px 0 46px rgba(0, 0, 0, .6); }
.pf-gate.is-open .pf-gate-r { transform: rotateY(-12deg); box-shadow: -22px 0 46px rgba(0, 0, 0, .6); }
.pf-gate-behind { color: var(--on-earth); padding: clamp(28px, 4vw, 60px) clamp(18px, 4vw, 64px);
  background: radial-gradient(ellipse at 50% 0%, rgba(15, 95, 96, .42), transparent 64%), var(--earth); }
.pf-gate.is-ready .pf-gate-behind { position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  padding: clamp(92px, 9vw, 124px) calc(var(--door) + clamp(20px, 3.2vw, 52px)) clamp(40px, 5vw, 72px); }
/* open, the opening is a reading window: the frame grows to most of the screen at most, and the words scroll inside it,
   fading at its edges, so that the doors keep their measure and the whole gate stays in view */
.pf-gate.is-ready.is-open .pf-gate-behind { bottom: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 74px, #000 calc(100% - 46px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 74px, #000 calc(100% - 46px), transparent 100%); }
.pf-gate { scroll-margin-top: 96px; }
.pf-gate-end { grid-column: 1 / -1; text-align: center; margin: 10px 0 0; }
.pf-gate-close { padding: 10px 24px 8px; border: 1px solid rgba(242, 235, 221, .7); background: transparent; color: var(--on-earth);
  cursor: pointer; font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: 17px; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; }
.pf-gate-close:hover, .pf-gate-close:focus-visible { background: var(--on-earth); color: var(--earth); }
.pf-gate:not(.is-ready) .pf-gate-end { display: none; }
.pf-gate-behind:focus { outline: none; }
.pf-gate.is-ready .pf-gate-words { opacity: 0; transform: translateY(16px); transition: opacity .7s .55s, transform .9s .5s var(--ease); }
.pf-gate.is-open .pf-gate-words { opacity: 1; transform: none; }
.pf-gate-words { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3.4vw, 60px); }
.pf-gate-block { margin: 0 0 24px; }
.pf-gate-block p { margin: 0; font-family: var(--display); font-stretch: 75%; font-weight: 700; text-transform: uppercase;
  font-size: clamp(18px, 1.5vw, 25px); line-height: 1.14; letter-spacing: .02em; color: var(--on-teal); }
.pf-gate-block .pf-gate-label { display: inline-block; background: var(--maroon); color: #f0dfe0; padding: 4px 10px 2px; margin: 0 0 6px; }
/* the handle on the seam where SE and ED meet; open, it rises to the top of the opening and closes it */
.pf-gate-key { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; gap: 8px; padding: 6px; border: 0; background: none; color: #f2ebdd; cursor: pointer;
  transition: top 1s var(--ease), transform 1s var(--ease); }
.pf-gate-knob { position: relative; width: clamp(54px, 5.2vw, 78px); height: clamp(54px, 5.2vw, 78px); border-radius: 50%;
  border: 2px solid rgba(242, 235, 221, .92); box-shadow: 0 10px 34px rgba(0, 0, 0, .5), inset 0 0 0 6px rgba(20, 16, 12, .35);
  background: radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .32), rgba(20, 16, 12, .62) 62%); transition: background .25s, width 1s var(--ease), height 1s var(--ease); }
.pf-gate-knob::before { content: ""; position: absolute; left: 50%; top: 40%; width: 22%; height: 22%; border-radius: 50%;
  background: rgba(242, 235, 221, .95); transform: translate(-50%, -50%); }
.pf-gate-knob::after { content: ""; position: absolute; left: 50%; top: 46%; width: 13%; height: 26%; transform: translateX(-50%);
  background: rgba(242, 235, 221, .95); clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%); }
.pf-gate-key-t { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: 18px; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.pf-gate-key:hover .pf-gate-knob, .pf-gate-key:focus-visible .pf-gate-knob { background: radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .4), rgba(208, 117, 63, .85) 62%); }
.pf-gate-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.pf-gate.is-open .pf-gate-key { top: 22px; transform: translate(-50%, 0); flex-direction: row; gap: 10px; }
.pf-gate.is-open .pf-gate-knob { width: 40px; height: 40px; }

.pf-foot { border-top: 1px solid var(--line); padding: 22px var(--gap) 40px; color: var(--on-earth-2); display: flex;
  flex-wrap: wrap; justify-content: space-between; gap: 10px; max-width: var(--wide); margin: 0 auto; }
.pf-parchment .pf-foot { border-top-color: var(--parchment-2); color: var(--on-parch-2); }
.pf-foot p { margin: 0; }

/* the viewer: every image of a work, whole, one at a time, in its order */
.pf-lb { position: fixed; inset: 0; z-index: 50; background: rgba(9, 7, 5, .97); display: grid;
  grid-template-columns: 64px 1fr 64px; grid-template-rows: 1fr auto; align-items: center; }
.pf-lb img { grid-column: 2; grid-row: 1; max-width: 100%; max-height: 90vh; margin: auto; object-fit: contain; }
.pf-lb button { background: none; border: 0; color: var(--on-earth); font: 34px/1 var(--display); cursor: pointer; padding: 14px; }
.pf-lb .pf-lb-p { grid-column: 1; grid-row: 1; }
.pf-lb .pf-lb-n { grid-column: 3; grid-row: 1; }
.pf-lb .pf-lb-x { position: absolute; top: 8px; right: 10px; font-size: 22px; font-family: var(--mono); }
.pf-lb .pf-lb-c { grid-column: 1 / -1; grid-row: 2; text-align: center; color: var(--on-earth-2); margin: 0; padding: 10px 16px 18px; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* a phone: the strip runs sideways under the thumb; one column; a grid's rows wrap, each line still at one height */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .pf-top { gap: 8px 16px; position: static; }
  .pf-name { width: 100%; flex-wrap: wrap; }
  .pf-name-studio { font-size: 26px; }
  .pf-name-person { font-size: 18px; border-left: 0; padding-left: 0; }
  .pf-mediums { overflow-x: auto; flex-wrap: nowrap; width: 100%; gap: 6px 16px; padding-bottom: 4px; }
  .pf-mediums a { flex: none; }
  .pf-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82vw; overflow-x: auto;
    scroll-snap-type: x mandatory; }
  .pf-cell { scroll-snap-align: start; }
  .pf-label-t { font-size: 20px; }
  .pf-intro { grid-template-columns: 1fr; }
  .pf-portrait-home { justify-self: start; max-width: 100%; }
  .pf-journey ol { grid-template-columns: 1fr; }
  .pf-anchors { grid-template-columns: 1fr; }
  .pf-peek { grid-template-columns: repeat(3, 1fr); }
  .pf-row { flex-wrap: wrap; }
  .pf-tile { flex: var(--ar) 1 calc(var(--ar) * 120px); }
  .pf-founder { grid-template-columns: 1fr; }
  .pf-work-head h1 { font-size: clamp(36px, 11.5vw, 64px); }
  .pf-journey h2, .pf-more h2, .pf-archive h1, .pf-resume h2 { font-size: clamp(38px, 12vw, 64px); }
  .pf-things li { grid-template-columns: 2.6em 1fr; }
  .pf-lb { grid-template-columns: 44px 1fr 44px; }
  .pf-resume-head, .pf-resume-body { grid-template-columns: minmax(0, 1fr); }
  .pf-job { grid-template-columns: minmax(0, 1fr); }
  .pf-job-what { min-width: 0; overflow-wrap: anywhere; }
  .pf-job-when { margin: 0; }
  .pf-door-item { width: 100%; }
  .pf-door { flex: 1; }
  .pf-gate { margin-left: 0; margin-right: 0; --door: 10%; }
  .pf-gate-words { grid-template-columns: 1fr; }
  .pf-gate.is-ready .pf-gate-behind { padding: 76px calc(var(--door) + 16px) 34px; }
  .pf-gate-block p { font-size: 17px; }
  .pf-gate-key-t { font-size: 15px; }
  .pf-contact-row { grid-template-columns: 1fr; }
  .pf-job-what { padding-left: 18px; }
  .pf-peekcard { display: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .pf-journey ol { grid-template-columns: 1fr 1fr; }
  .pf-mediums { width: 100%; }
  .pf-resume-body { grid-template-columns: 1fr; }
}

@media print {
  .pf-top, .pf-preview, .pf-skip, .pf-lb, .pf-peekcard, .pf-newtab, .pf-gate-key, .pf-contact-form, .pf-video-play { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .pf-fig, .pf-mural, .pf-row, .pf-portrait, .pf-job { break-inside: avoid; }
  .pf-pano.pf-pano-on { height: auto; background: none !important; }
  .pf-pano.pf-pano-on img { display: block !important; }
  .pf-gate-behind[hidden] { display: block !important; }
  .pf-gate-door { display: none; }
  .pf-gate.is-ready .pf-gate-frame { aspect-ratio: auto; height: auto !important; }
  .pf-gate.is-ready .pf-gate-behind { position: static; padding: 20px 0; }
  .pf-gate.is-ready .pf-gate-words { opacity: 1; transform: none; }
  .pf-resume * { color: #000 !important; filter: none !important; }   /* turn 130: printed, nothing recedes */
}