/* The page: composition only (docs/page.md). */

/* The window */
.p-page { min-height: var(--screen); display: grid; place-items: center; }
.p-block { position: relative; --pad-y: var(--space-2); }
.p-skip { user-select: none; position: absolute; display: inline-flex; align-items: center; min-height: var(--hit); inset-block-start: var(--space-2); inset-inline-start: var(--space-2); padding: var(--space-1) var(--space-2); background: var(--paper); clip-path: inset(50%); }
.p-skip:focus-visible { clip-path: none; }
.p-list:focus-visible { outline-color: transparent; } 

/* From 48rem: two sides on the list's columns (subgrid); rows one large step apart. */
@media (min-width: 48rem) and (min-height: 31.25rem) {
  .p-block {
    width: 100%; padding: var(--pad-y) var(--step-out);
    display: grid;
    grid-template-columns: [box-start] calc(var(--step-in) + var(--tile-row)) min-content fit-content(var(--title-max)) [box-end right-start] minmax(0, 1fr) [right-end];
    grid-template-rows: [intro-start] auto [intro-end list-start] auto [list-end foot-start] auto [foot-end links-start] auto [links-end];
    column-gap: var(--space-3); row-gap: var(--step-out);
  }
  /* The intro: the headline's last line level with the opening's */
  .p-intro { grid-column: box-start / right-end; grid-row: intro; display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto; row-gap: var(--step-in); }
  .p-head { grid-column: box-start / box-end; grid-row: 1; }
  .p-opening { grid-column: box-start / box-end; grid-row: 2; align-self: last baseline; width: min-content; min-width: 100%; }
  .p-opening__start { display: inline-block; white-space: nowrap; }
  .p-headline, .p-story { grid-column: right-start / right-end; grid-row: 1 / span 2; align-self: last baseline; }
  .p-headline, .p-story, .p-faces, .p-tenth { padding-inline-start: var(--step-out); }
  .p-block .p-headline, .p-block .p-story { max-width: calc(var(--measure) + var(--step-out)); }
  .p-pen { position: absolute; inset-block-start: var(--pad-y); inset-inline-end: var(--step-out); height: calc(var(--text-name) * var(--leading-name)); }
  .p-list { grid-column: box-start / right-end; grid-row: list; grid-template-columns: subgrid; padding-inline: 0; }
  .p-list .c-row { grid-column: 1 / -1; }
  .p-list > .c-box { justify-self: end; width: calc(var(--fill) - var(--step-in)); }
  .p-list .c-row > .c-tile { justify-self: end; align-self: center; }
  .p-faces { grid-column: right-start / right-end; grid-row: intro-start / foot-end; align-self: start; padding-block-start: var(--under-name); }
  .p-footer { display: contents; }
  .p-under { grid-column: box-start / box-end; grid-row: foot; align-self: start; contain: inline-size; }
  .p-tenth { grid-column: right-start / right-end; grid-row: foot; align-self: start; }
  .p-links { grid-column: box-start / right-end; grid-row: links; }
  /* room for the chevron, clear of the strike */
  .p-list .c-row > .c-title:is(button) { justify-self: stretch; padding-inline-end: var(--space-6); }
}
/* 48 to 64rem: the page may scroll; the pen control is the last line. */
@media (min-width: 48rem) and (max-width: 63.99rem) and (min-height: 31.25rem) {
  .p-page { place-items: start stretch; }
  .p-block { grid-template-rows: [intro-start] auto [intro-end list-start] auto [list-end foot-start] 1fr [foot-end links-start] auto [links-end]; }
  .p-faces .c-job__tools .c-tools { grid-template-columns: repeat(4, var(--tile-large)); column-gap: var(--step-in); }
  [data-view="rest"] .p-faces { display: none; }
  .p-list .c-row > .c-role :is(.c-role__rest, .c-role__comma) { display: none; }
  .p-links { flex-wrap: wrap; row-gap: var(--step-in); }
  .p-pen { position: static; height: auto; min-height: var(--hit); grid-column: box-start / right-end; justify-self: start; }
  .p-faces .c-job__meta { flex-direction: column; align-items: flex-start; }
}
/* Touch at these widths: 44px title taps */
@media (pointer: coarse) and (min-width: 48rem) and (max-width: 63.99rem) and (min-height: 31.25rem) {
  .p-list .c-row { min-height: var(--hit); }
  .p-list .c-row > .c-tile { align-self: center; }
  .p-list .c-row > .c-title:is(button)::after { inset-block: calc((var(--line) - var(--hit)) / 2); }
}
@media (max-width: 63.99rem), (max-height: 31.24rem) {
  .p-faces .c-title[data-size="display"] { font-size: var(--text-title); letter-spacing: var(--track-title); }
}
/* From 64rem the block is one screen, centered. */
@media (min-width: 64rem) and (min-height: 31.25rem) {
  .p-page { overflow: clip; }
  .p-block { width: var(--page-width); height: var(--page-height);
    grid-template-rows: [intro-start] auto [intro-end list-start] minmax(0, 1fr) [list-end foot-start] auto [foot-end links-start] auto [links-end]; }
  .p-page:has(.p-block[data-grow]) { overflow: visible; overflow-x: clip; }
  .p-block[data-grow] { height: auto; min-height: var(--page-height);
    grid-template-rows: [intro-start] auto [intro-end list-start] minmax(min-content, 1fr) [list-end foot-start] auto [foot-end links-start] auto [links-end]; }
  .p-block > .p-list { height: var(--fill); align-self: center; align-content: space-between;
    max-height: calc(var(--rows) * var(--pen-text) * var(--leading-display) + (var(--rows) - 1) * var(--step-out) + 2 * var(--step-in)); }
  .p-faces .c-title[data-size="display"] { font-size: var(--text-title); letter-spacing: var(--track-title); }
  .p-faces .c-job { gap: var(--step-in); }
  .p-faces :is(.c-job__note, .c-job__tools) { padding-block-start: calc(var(--step-out) - var(--step-in)); }
  .p-faces .c-job__lead { gap: var(--space-2); }
  .p-faces .c-job__head { padding-block-end: calc(var(--step-out) - var(--space-2)); }
  .p-faces .c-job__title .c-box--wrap { margin-block: var(--step-in) var(--space-1); }
  .p-links { justify-content: space-between; flex-wrap: nowrap; }
}
/* Large windows: more air above and below */
@media (min-width: 90rem) and (min-height: 56.25rem) {
  .p-block { --pad-y: var(--space-3); }
}

/* Under 20rem of the reader's text, page.js lets phrases break */
@media (max-width: 19.99rem) { :root { --loose: 1; } }

/* The intro */
.p-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--step-in); }
.p-opening { font-size: var(--text-title); font-weight: var(--weight-voice); line-height: var(--leading-text); letter-spacing: var(--track-title); text-wrap: pretty; }
.p-opening__end { display: inline-block; }
.p-pen { display: flex; align-items: center; }

/* The list */
.p-list .c-row > .c-year { grid-column: 2; }
.p-list { --rows: 9; position: relative; align-self: start; align-content: start; }
.p-list .c-title:is(button) { cursor: pointer; }
.p-list .c-title:is(button)::after { content: ""; position: absolute; inset-block: calc(-1 * var(--space-1)); inset-inline: 0; }
/* The row's chevron: faded, ink on hover, focus or open */
.p-chev { position: absolute; inset-inline-end: 0; inset-block-start: var(--half); translate: 0 calc(-1 * var(--half)); width: calc(var(--chev) * 2 / 3); height: var(--chev); fill: none; stroke: var(--faded); stroke-width: var(--stroke-print); stroke-linecap: round; stroke-linejoin: round; overflow: visible; pointer-events: none; transition: stroke var(--dur-micro) var(--ease-hover); }
.p-list .c-row:focus-within .p-chev, .p-list .c-row[data-open] .p-chev { stroke: var(--ink); }
/* Only a row's title and linked tile take the pointer */
.p-list .c-row { pointer-events: none; }
.p-list .c-row > :is(.c-title, a.c-tile[href]) { pointer-events: auto; }
.p-list .c-year { text-decoration: underline var(--stroke-pen) var(--pen-none); text-underline-offset: var(--space-1); transition: color var(--dur-micro) var(--ease-hover), text-decoration-color var(--dur-micro) var(--ease-hover); }
.p-list .c-row:focus-within .c-year, .p-list .c-row[data-open] .c-year { color: var(--ink); text-decoration-color: var(--pen); }
.p-list .c-row:focus-within .c-title { color: var(--ink); }
.p-list .c-row:focus-within :is(.c-year, .c-title) { transition: none; } 
@media (hover: hover) and (pointer: fine) {
  .p-list .c-row:hover .c-year { text-decoration-color: var(--pen); }
  .p-list .c-row:hover .p-chev { stroke: var(--ink); }
  .p-sheet__step:hover .p-sheet__year { text-decoration: underline var(--stroke-print) var(--pen); text-underline-offset: var(--space-1); }
}
.p-list .c-row > .c-role .c-role__first { font-size: var(--pen-text); }
/* The touch hint: once, under the box, out of the flow. */
/* The cue, over the box's top right corner, until the first job opens */
.p-hint { position: absolute; inset-block-end: calc(var(--fill) + 2 * var(--step-in) + var(--stroke-pen)); inset-inline-end: calc(-1 * var(--step-in)); white-space: nowrap; }
.p-hint[hidden] { display: none; }

/* The right side at rest */
.p-list .c-row > .c-role, .p-tenth, .p-headline { transition: opacity var(--dur-ui) var(--ease-out) var(--dur-exit), visibility 0s linear var(--dur-exit); }
[data-view="job"] :is(.p-list .c-row > .c-role, .p-tenth, .p-headline), [data-story] .p-headline {
  opacity: 0; visibility: hidden; transition: none;
}
.p-headline { max-width: var(--measure); }

/* The story, in the headline's place */
.p-story { max-width: var(--measure); opacity: 0; visibility: hidden;
  transition: opacity var(--dur-exit) var(--ease-exit), visibility 0s linear var(--dur-exit); }
[data-story] .p-story { opacity: 1; visibility: visible; transition: opacity var(--dur-ui) var(--ease-out) var(--dur-exit), visibility 0s linear var(--dur-exit); }
.p-block[data-instant] :is(.p-story, .p-headline) { transition: none; } 

/* The panel: one face at a time; it leaves at once when another job takes its place */
.p-faces { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; position: relative; pointer-events: none; }
.p-face { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--dur-exit) var(--ease-exit), visibility 0s linear var(--dur-exit); }
.p-face[data-shown] { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-ui) var(--ease-drawer), visibility 0s; }
.p-face:not([data-shown]) .c-note__item[data-shown] { visibility: hidden; transition: visibility 0s linear var(--dur-exit); }
.p-block[data-swap] .p-face:not([data-shown]), .p-block[data-swap] .p-face:not([data-shown]) .c-note__item { transition: none; }
[data-view="job"] .p-story { opacity: 0; visibility: hidden; }
.p-faces .c-job__head { grid-template-columns: var(--tile-large) minmax(0, 1fr); }
.p-faces .c-job__head > .c-tile { --tile-size: var(--tile-large); }
.p-faces .c-job__title .c-box--wrap { padding-block: 0; }
.p-faces .c-role[data-size="large"] :is(.c-role__first, .c-role__rest) { font-size: var(--pen-text); }
.p-faces .c-job__tools { gap: var(--space-1); }
.p-faces .c-job__tools .c-tools { row-gap: var(--space-1); }
.p-face__quote { display: none; }

/* Waiting marks stay in the accessibility tree */
.c-pen-wait-face { opacity: 0; }
.c-tool[data-ink="wait"] .c-tile { --tile-ground: var(--paper); --tile-ring: var(--rule); color: var(--faded); }
.c-tool[data-ink="wait"][data-state="gained"] .c-tool__name { color: var(--faded); }

/* The foot and the link line */
.p-under { display: flex; flex-direction: column; gap: var(--space-2); }
.p-closing { max-width: var(--measure); text-wrap: balance; }
.p-quotes { align-items: start; }
.p-quotes .c-quote__slot { transition: none; }
.p-quotes .c-quote__slot[data-shown] { transition: opacity var(--dur-ui) var(--ease-out), visibility 0s; }
.p-tenth { text-wrap: balance; }
/* An inset shadow snaps to one device pixel */
.p-links { list-style: none; padding: var(--step-in) 0 0; box-shadow: inset 0 var(--hairline) 0 0 var(--hairline-color);
  display: flex; align-items: baseline; column-gap: var(--step-out); font-size: var(--text-body); line-height: var(--leading-display); }
.p-links > li { display: flex; }

/* The 404 page */
.p-404 { display: flex; flex-direction: column; align-items: flex-start; gap: var(--step-in); padding: var(--step-out); }

/* Phones: one column; a job opens as a sheet */
.p-sheet { display: none; border: 0; padding: 0; }
@media (max-width: 47.99rem), (max-height: 31.24rem) {
  /* Clear of a side notch; a reading-width column */
  .p-page { place-items: start center; padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
  .p-block {
    display: flex; flex-direction: column; gap: var(--step-out); width: 100%; max-width: calc(var(--phone-column) + 2 * var(--space-4));
    padding-block: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-8), env(safe-area-inset-bottom));
    padding-inline: var(--space-4);
  }
  .p-intro { display: flex; flex-direction: column; gap: var(--step-out); }
  .p-headline { font-size: var(--text-lead); }
  .p-story { display: none; }
  [data-story] .p-story { display: block; }
  [data-story] .p-headline { display: none; }
  .p-faces:not(.p-sheet .p-faces) { display: none; }
  .p-footer { display: flex; flex-direction: column; gap: var(--step-out); }
  .p-pen { min-height: var(--hit); }
  /* A row: tile and year, the title under them, a chevron; one tap. Roles stacked beside it. */
  .p-list { grid-template-columns: var(--tile-row) minmax(0, 1fr) var(--phone-roles); row-gap: var(--space-2); }
  .p-list .c-row { grid-template-rows: var(--tile-row) auto; min-height: calc(3 * var(--pen-caption) * var(--leading-display)); align-items: center; }
  .p-list .c-row > .c-tile { grid-column: 1; grid-row: 1; justify-self: start; }
  .p-list .c-row > .c-year { grid-column: 2; grid-row: 1; }
  .p-list .c-row > .c-title { --font-print: var(--font-print-text); grid-column: 1 / 3; grid-row: 1 / 3; align-self: stretch; justify-self: stretch; font-size: var(--text-body); letter-spacing: 0; text-wrap: wrap;
    padding-block-start: var(--space-6); padding-inline-end: var(--space-3); }
  .p-list .c-row > .c-title:is(button) { min-height: var(--hit); display: flex; flex-direction: column; justify-content: flex-start; } /* text at the top, not centered */
  .p-list .c-title__phrase { white-space: normal; }
  .p-list .c-title__text { text-wrap: balance; }
  .p-list > .c-box { grid-column: 1 / 3; }
  .p-list .c-row > .c-role { grid-column: 3; grid-row: 1 / 3; align-self: center; margin-inline-start: var(--step-in); }
  .p-list .c-row > .c-role :is(.c-role__first, .c-role__rest) { display: block; font-size: var(--pen-caption); white-space: normal; }
  .p-list .c-row > .c-role .c-role__first { padding-inline-start: var(--plus); text-indent: calc(-1 * var(--plus)); }
  .p-list .c-row > .c-role .c-role__rest .c-role__phrase { display: block; padding-inline-start: var(--plus); text-indent: calc(-1 * var(--plus)); margin-inline-start: var(--plus); }
  .p-list .c-row > .c-role .c-role__phrase { white-space: normal; overflow-wrap: break-word; } /* a role wraps inside its column; nothing pushes the page sideways */
  .p-list .c-row > .c-role { min-width: 0; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .p-list .c-row[data-last] .c-year { color: var(--ink); text-decoration-color: var(--pen); } /* the job you ended on stays marked after the sheet closes */
  .p-list .c-row > .c-role :is(.c-role__comma, .c-role__sep) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* The cue sits above the box, on the first screen, at its right end. */
  .p-list { margin-block-start: var(--space-8); } /* room for the cue */
  [data-view="job"] :is(.p-list .c-row > .c-role, .p-tenth, .p-headline) { opacity: 1; visibility: visible; }
  .p-links { flex-direction: column; align-items: stretch; padding: 0; line-height: var(--leading-text); box-shadow: none; }
  .p-links > li + li { box-shadow: inset 0 var(--hairline) 0 0 var(--hairline-color); }
  .p-links .c-link { min-height: var(--hit); flex: 1; align-items: center; }
  .p-links .c-link::after { content: none; }
  .p-links .c-link__mark { translate: none; }

  .p-sheet[open] {
    display: flex; flex-direction: column; position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: calc(var(--phone-column) + 2 * var(--space-4)); max-height: none;
    height: calc(var(--screen) - var(--under-name) - var(--space-8)); padding: 0; /* one height for every job */ border: 0; border-start-start-radius: var(--radius-sheet); border-start-end-radius: var(--radius-sheet);
    background: var(--paper); color: var(--ink); box-shadow: 0 0 0 var(--hairline) var(--sheet-edge);
    transform: var(--sheet-away); transition: transform var(--dur-page) var(--ease-drawer);
    overflow: hidden; overscroll-behavior: contain;
  }
  .p-sheet[data-in] { transform: translateY(0); }
  .p-sheet[open]:not([data-in]) { transition: transform var(--dur-sheet-exit) var(--ease-exit); } /* the exit */
  .p-sheet::backdrop { background: var(--scrim); backdrop-filter: blur(var(--scrim-blur)); -webkit-backdrop-filter: blur(var(--scrim-blur)); opacity: 0; transition: opacity var(--dur-page) var(--ease-drawer); }
  .p-sheet[data-in]::backdrop { opacity: 1; }
  .p-sheet:not([data-in])::backdrop { transition: opacity var(--dur-sheet-exit) var(--ease-exit); }
  /* The bar: the handle, then previous, back and next */
  .p-sheet__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; row-gap: 0; padding: 0 var(--space-4) var(--space-2); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  /* The handle draws 4px inside a 44px grab row of its own. */
  .p-sheet__handle { grid-column: 1 / -1; justify-self: center; display: grid; place-items: center; width: calc(var(--tile-large) * 3); height: var(--hit); }
  .p-sheet__handle::before { content: ""; width: var(--tile-large); height: var(--space-1); border-radius: var(--radius); background: var(--faded); }
  .p-sheet__step { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--hit); min-width: var(--hit); font-variant-numeric: tabular-nums; color: var(--ink); transition: scale var(--dur-press) var(--ease-out); }
  .p-sheet__step[data-step="-1"] { justify-self: start; }
  .p-sheet__step[data-step="1"] { justify-self: end; }
  .p-sheet__step:active { scale: var(--press-scale); }
  .p-sheet__step[hidden] { display: inline-flex; visibility: hidden; } /* hidden without moving the bar */
  .p-sheet__chev { width: calc(var(--chev) * 2 / 3); height: var(--chev); fill: none; stroke: currentColor; stroke-width: var(--stroke-print); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
  .p-sheet__close { justify-self: center; }
  /* The controls sit at the bottom, in thumb reach, over a strip the content scrolls under */
  .p-sheet__bar::before { content: ""; position: absolute; inset: auto 0 0 0; height: calc(var(--hit) + 2 * var(--space-2) + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: inset 0 var(--hairline) 0 0 var(--hairline-color); z-index: var(--z-raised); }
  .p-sheet__step, .p-sheet__close { position: absolute; inset-block-end: calc(var(--space-2) + env(safe-area-inset-bottom)); z-index: var(--z-over); }
  .p-sheet__step[data-step="-1"] { inset-inline-start: max(var(--space-4), env(safe-area-inset-left)); }
  .p-sheet__step[data-step="1"] { inset-inline-end: max(var(--space-4), env(safe-area-inset-right)); }
  .p-sheet__close { inset-inline-start: var(--half); translate: calc(-1 * var(--half)) 0; }
  .p-sheet__close::after { content: none; } /* already 44px tall; the handle row stays draggable */
  .p-sheet__body {
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; /* a horizontal swipe moves between jobs */
    padding-inline: max(var(--space-4), env(safe-area-inset-left)) max(var(--space-4), env(safe-area-inset-right));
  }
  .p-sheet__body::after { content: ""; display: block; height: calc(var(--hit) + var(--space-8) + env(safe-area-inset-bottom)); } /* room for the controls strip */
  .p-sheet .p-faces { display: grid; margin: 0; padding: 0; }
  .p-sheet .p-face:not([data-shown]) { display: none; }
  .p-sheet .p-face .p-back { display: none; }
  .p-sheet .p-face__quote { display: block; padding-block-start: var(--step-out); }
  .p-quotes .c-quote__slot:not([data-shown]) { display: none; }
  .p-sheet .c-note__item:not([data-shown]) { display: flex; }
  .p-sheet .c-note__item { scroll-margin-block: var(--step-in); }
}
/* Short windows: the sheet takes the height, less a small gap */
@media (max-height: 31.24rem) {
  .p-sheet[open] { height: calc(var(--screen) - var(--space-4) - env(safe-area-inset-top)); }
}
/* 360 to 389 wide: a wider box */
@media (min-width: 22.5rem) and (max-width: 24.36rem) {
  .p-list { grid-template-columns: var(--tile-row) minmax(0, 1fr) var(--phone-roles-mid); }
}
/* Under 22.5rem the roles beside the rows are one pen step smaller */
@media (max-width: 22.49rem) {
  .p-list { grid-template-columns: var(--tile-row) minmax(0, 1fr) var(--phone-roles-narrow); }
  .p-list .c-row { min-height: calc(3 * var(--pen-small) * var(--leading-display)); }
  .p-list .c-row > .c-role :is(.c-role__first, .c-role__rest) { font-size: var(--pen-small); }
}

/* A large reader font (under 20rem): roles under each title */
@media (max-width: 19.99rem) {
  .p-list { grid-template-columns: var(--tile-row) minmax(0, 1fr); }
  .p-list .c-row { grid-template-rows: var(--tile-row) auto auto; }
  .p-list .c-row > .c-role { grid-column: 1 / -1; grid-row: 3; margin-inline-start: 0; }
  .p-list .c-row > .c-role .c-role__phrase { white-space: normal; }
  .c-name, .c-penline, .c-headline, .p-opening { overflow-wrap: anywhere; min-width: 0; }
}

/* Keyboard moves never animate: page.js marks the root while Tab is in use. */
:root[data-keys] *, :root[data-keys] *::before, :root[data-keys] *::after { transition: none !important; }

@media print {
  html { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .p-pen, .p-hint, .p-sheet, .p-skip { display: none; }
  .p-page { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .p-chev, .p-sheet__step, .p-sheet[open], .p-sheet::backdrop, .p-face, .p-story, .p-headline, .p-tenth, .p-list .c-row > .c-role, .p-list .c-year { transition: none; }
}

.p-name { display: flex; align-items: center; gap: var(--step-out); contain: inline-size; align-self: stretch; }
@media (max-width: 47.99rem), (max-height: 31.24rem) { .p-name { position: relative; } .p-name .c-mark { --mark-size: var(--mark-phone); position: absolute; inset-inline-end: 0; inset-block-start: calc(var(--fill) + var(--step-in) - (var(--mark-phone) - var(--hit)) / 2); } }
@media (min-width: 48rem) and (min-height: 31.25rem) { .p-name > .c-name { flex: none; } }

@media (min-width: 64rem) and (min-height: 31.25rem) { .p-tenth.c-statement { font-size: var(--pen-display); line-height: var(--leading-display); text-wrap: balance; align-self: center; height: 0; display: grid; align-content: center; } }
@media (max-width: 63.99rem) { .p-block { --title-max: var(--fill); } }

.p-hint::after { content: ""; position: absolute; inset-block-start: var(--fill); inset-inline-end: var(--space-3); width: var(--space-6); height: var(--hit); background: var(--pen); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2C6 13 7 26 12 40M5 32l7 9 6-8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2C6 13 7 26 12 40M5 32l7 9 6-8'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (min-width: 48rem) and (min-height: 31.25rem) { .p-hint::after { width: var(--space-4); height: var(--space-8); inset-inline-end: var(--space-6); } }
.p-list[data-mark="check"] .c-title[data-state="struck"] { color: var(--ink); }
@media (min-width: 48rem) and (min-height: 31.25rem) { .p-list[data-mark="check"] .c-title[data-state="struck"] .c-title__text::after { content: ""; display: inline-block; width: var(--check-room); } }
@media (max-width: 47.99rem), (max-height: 31.24rem) { .p-list[data-mark="check"] .c-row:has(> .c-title[data-state="struck"]) > .c-year::after { content: ""; display: inline-block; width: var(--check-w); height: var(--check-h); margin-inline-start: var(--space-2); vertical-align: baseline; background: var(--pen); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13c3 2 5 5 6 8C12 13 17 6 23 2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13c3 2 5 5 6 8C12 13 17 6 23 2'/%3E%3C/svg%3E") center / contain no-repeat; } }
[data-mark="check"] .p-faces .c-title[data-state="struck"] { color: var(--ink); }
[data-mark="check"] .p-faces .c-title[data-state="struck"] .c-title__text::after { content: ""; display: inline-block; width: var(--check-room); }
@media (min-width: 64rem) and (min-height: 31.25rem) { .p-quotes .c-quote blockquote p { max-width: var(--quote-max); } }
.p-pen .c-penpick__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.p-pen .c-penpick__pen { display: none; }
.p-pen .c-penpick__pen:has(:checked) + .c-penpick__pen, .p-pen .c-penpick__pens:has(.c-penpick__pen:last-child :checked) .c-penpick__pen:first-child { display: inline-grid; --swatch: var(--pen); }
@media (max-width: 47.99rem), (max-height: 31.24rem) {
  .p-pen { position: absolute; inset-block-start: var(--space-6); inset-inline-end: var(--space-4); min-height: var(--hit); z-index: var(--z-raised); }
}
@media (min-width: 48rem) and (max-width: 63.99rem) and (min-height: 31.25rem) {
  .p-pen { position: absolute; inset-block-start: var(--pad-y); inset-inline-end: var(--step-out); height: calc(var(--text-name) * var(--leading-name)); min-height: 0; }
}
@media (max-width: 22.49rem) { .p-pen { inset-block-start: calc(var(--space-4) + var(--text-name) * var(--leading-name)); } }
[data-tools="learned"] .p-faces .c-tools > :has(> .c-tool[data-state="unlit"]), [data-tools="learned"] .p-faces .c-tool[data-state="unlit"] { display: none; }
/* the pen dot on the i (page.js sets --dot-*) */
.p-block[data-pen-on="i"] .p-pen[data-placed] { inset: auto; inset-inline-start: calc(var(--dot-x) - var(--dot-w) / 2); inset-block-start: calc(var(--dot-y) - var(--dot-h) / 2); width: var(--dot-w); height: var(--dot-h); min-height: 0; display: grid; place-items: center; z-index: var(--z-over); }
.p-block[data-pen-on="i"] .p-pen[data-placed] .c-penpick__pen input { inset: 0; }
.p-block[data-pen-on="i"] .p-pen[data-placed] .c-penpick__pen, .p-block[data-pen-on="i"] .p-pen[data-placed] .c-penpick__pen::before { width: var(--dot-w); height: var(--dot-h); border-radius: var(--dot-round); }
.p-block[data-pen-on="i"] .p-pen:not([data-placed]) { visibility: hidden; }
.p-block[data-pen-on="i"] .p-pen[data-placed] .c-penpick__pen::before, .p-block[data-pen-on="i"] .p-pen[data-placed] .c-penpick__pen:hover::before { box-shadow: none; outline: 0; }
[data-tools="learned"] .p-faces .c-tool[data-state="gained"] .c-tool__name { position: relative; font-weight: var(--weight-voice); }
[data-tools="learned"] .p-faces .c-tool[data-state="gained"] .c-tool__name::before { content: "+"; position: absolute; inset-inline-end: calc(var(--fill) + var(--space-1)); inset-block-start: var(--half); translate: 0 calc(-1 * var(--half) - var(--plus-rise)); font-family: var(--font-pen); font-weight: var(--weight-pen); font-size: var(--pen-caption); line-height: var(--leading-name); color: var(--pen); }
@media (max-width: 47.99rem), (max-height: 31.24rem) {
  .p-list .c-row > .c-role .c-role__rest { margin-inline-start: var(--plus); }
  .p-list .c-row > .c-role .c-role__rest .c-role__phrase { font-size: var(--pen-small); margin-inline-start: 0; padding-inline-start: 0; text-indent: 0; }
}
.p-block[data-pen-on="i"] .c-name__button, .p-block[data-pen-on="i"] .c-name__button:hover, .p-block[data-pen-on="i"] .c-name__button:active { color: inherit; scale: none; transition: none; }
@media (min-width: 48rem) and (max-width: 63.99rem) and (min-height: 31.25rem) { [data-tools="learned"] .p-faces .c-tool[data-state="gained"] .c-tool__name::before { position: static; translate: none; margin-inline-end: var(--space-1); line-height: 0; } }
@media (max-width: 47.99rem), (max-height: 31.24rem) {
  .p-sheet .c-tools > :nth-child(4n of :not(:has(> .c-tool[data-state="unlit"]))) .c-tool[data-long] { align-items: flex-end; }
  .p-sheet .c-tools > :nth-child(4n of :not(:has(> .c-tool[data-state="unlit"]))) .c-tool[data-long] .c-tool__name { max-width: none; white-space: nowrap; margin-inline-end: calc(-1 * var(--space-3)); }
}
@media (max-width: 47.99rem), (max-height: 31.24rem) {
  [data-tools="learned"] .p-sheet .c-tools > :nth-child(4n + 1 of :not(:has(> .c-tool[data-state="unlit"]))) .c-tool[data-state="gained"] { align-items: flex-start; }
  [data-tools="learned"] .p-sheet .c-tools > :nth-child(4n + 1 of :not(:has(> .c-tool[data-state="unlit"]))) .c-tool[data-state="gained"] .c-tool__name { max-width: none; white-space: nowrap; }
}
@media (min-width: 64rem) and (min-height: 31.25rem) { .p-list .c-row > .c-role :is(.c-role__rest, .c-role__comma) { font-size: var(--pen-caption); } }