/* The smaller pages' own layouts: pricing, the profile, /create and
 * /custom.
 * Loaded after tokens.css and components.css by those pages (home has
 * home.css, the rooms page rooms.css); everything here places
 * components.css's pieces on one page.
 */

/* The pricing page (2026-11-09, from the approved mock): four bands on the
   grid. The brief beside a taped "schedule of fees" that names every price
   at once; the plans as torn sheets; the levels a room is sold at as
   evidence tags hanging from pins; the small print. Paddle's script fills
   every [data-price] (landing.js) — a plan's price is never typed here. */
.pricing-page { overflow-x: clip; background: var(--void-black) url(/web/images/bg-top.webp) center top / 100% auto no-repeat; }
.pricing-main { display: grid; gap: var(--space-96); width: var(--container); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) 0 0; }
.pricing-main > .profile-notice { margin: 0; }
.pricing-band { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: var(--space-48) var(--gutter); align-items: start; }
/* Subscribe is hidden until Paddle has loaded (landing.js): a label's own
   display must not outrank the browser's [hidden]. */
.pricing-main [hidden] { display: none; }

/* The brief. The board's red on black, as the home page's headline:
   whoever asks for more contrast reads it in cream. */
.pricing-brief { grid-column: 1 / span 7; min-width: 0; }
.pricing-kicker { margin: 0; font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.6rem); }
.pricing-kicker .worn { padding: .14em .55em .18em; }
.pricing-brief h1 { max-width: 11ch; margin: var(--space-16) 0 0; color: var(--headline-red); font-size: clamp(3rem, 6.4vw, 6.4rem); font-weight: 400; line-height: 1; text-wrap: balance; }
@media (prefers-contrast: more) { .pricing-brief h1 { color: var(--type-on-dark); } }
.pricing-lede { max-width: 42ch; margin: 1.6rem 0 0; color: var(--paper-dim); font-size: 1.1rem; line-height: 1.6; }
/* The plan the reader holds, or the staff word: one line under the lede. */
.pricing-on { display: flex; gap: .8rem; max-width: 42ch; margin: 1.4rem 0 0; color: var(--aged-paper); line-height: 1.5; }
.pricing-on span:first-child { color: var(--paper-dim); }
.pricing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-24) var(--space-32); margin-top: 2.4rem; }
.pricing-actions .label-red { font-size: 1.2rem; }
.pricing-actions .text-link { font-weight: 400; font-size: 1rem; }

/* The schedule of fees: one taped card, each line a link to its band. */
.pricing-schedule { --tape: 46%; position: relative; grid-column: 8 / span 5; margin-top: var(--space-32); padding: 3rem clamp(1.6rem, 2.6vw, 2.4rem) 2rem; background: url(/web/images/paper-sheet.webp) center / cover; color: var(--ink); rotate: 1.4deg; box-shadow: var(--shadow-md); }
.pricing-schedule::before, .pricing-sheet.is-taped::before { content: ""; position: absolute; top: -18px; left: 50%; width: var(--tape); aspect-ratio: 560 / 141; translate: -50% 0; rotate: -3deg; background: url(/web/images/tape.webp) center / 100% 100% no-repeat; }
.pricing-schedule-head { display: grid; gap: .25rem; padding-bottom: .9rem; border-bottom: 2px solid var(--ink); }
.pricing-schedule-head strong { color: var(--brand-mark-red); font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.pricing-schedule-head span { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; }
.pricing-rows { margin: 0; padding: 0; list-style: none; }
.pricing-rows a { display: flex; align-items: baseline; gap: .5rem; padding: .85rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent); color: var(--ink); text-decoration: none; }
.pricing-rows a:hover .pricing-row-what { text-decoration: underline; text-underline-offset: .2em; }
.pricing-rows a::after { content: ""; order: 2; flex: 1; min-width: 1.5rem; border-bottom: 2px dotted color-mix(in srgb, var(--ink) 45%, transparent); translate: 0 -.3em; }
.pricing-row-what { min-width: 0; }
.pricing-row-what small { display: block; color: color-mix(in srgb, var(--ink) 70%, var(--aged-paper)); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; }
.pricing-row-cost { order: 3; color: var(--brand-mark-red); font-family: var(--font-display); font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricing-row-cost small { font-size: .7em; }
.pricing-schedule-foot { margin: 1rem 0 0; font-size: var(--text-xs); line-height: 1.5; }

/* A band's head: the board's cream heading, a line of why beside it. */
.pricing-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-16) var(--gutter); }
.pricing-head h2 { color: var(--type-on-dark); font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1; }
.pricing-head p { max-width: 44ch; margin: 0; color: var(--paper-dim); font-size: var(--text-lg); line-height: 1.55; }

/* The plans: a torn sheet each, a degree off square like a print, in the
   middle ten columns however many are sold. */
.pricing-plans { grid-column: 2 / span 10; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--gutter); align-items: stretch; }
.pricing-sheet { --tape: 38%; position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(2.6rem, 4vw, 3.6rem) clamp(2rem, 3.4vw, 3.2rem) clamp(2.4rem, 3.6vw, 3.2rem); rotate: -1deg; }
.pricing-sheet:nth-child(even) { rotate: .8deg; }
.pricing-sheet.is-taped::before { top: -14px; rotate: 2deg; }
.pricing-sheet .strip-title { align-self: flex-start; margin: 0; font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
/* Paddle's total in the big type, its billing cycle small after it. */
.pricing-price { margin: 1.4rem 0 0; color: var(--brand-mark-red); font-family: var(--font-display); font-size: clamp(2.8rem, 4.4vw, 4.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.pricing-price small { color: var(--ink); font-family: var(--font-body); font-size: 1.05rem; }
.pricing-buys { margin: 1rem 0 0; color: var(--ink); font-size: 1.1rem; line-height: 1.5; }
.pricing-list { display: grid; gap: .6rem; margin: 1.4rem 0 0; padding: 1.2rem 0 0; border-top: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent); list-style: none; color: var(--ink); line-height: 1.45; }
.pricing-list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .7rem; }
/* The ✦ the brief uses, never icons/tick.svg: that one is drawn as an X. */
.pricing-list li::before { content: "\2726"; color: var(--brand-mark-red); }
.pricing-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: auto; padding-top: 1.8rem; }
.pricing-cta .label-red { font-size: 1.25rem; }
.pricing-manage { color: var(--ink); font-weight: 700; white-space: normal; }
.pricing-seller { margin: 1.2rem 0 0; color: color-mix(in srgb, var(--ink) 75%, var(--aged-paper)); font-size: .82rem; line-height: 1.5; }
.pricing-soon { display: inline-block; padding: .3rem .8rem; border: 2px solid var(--brand-mark-red); color: var(--brand-mark-red); font-family: var(--font-display); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; rotate: -3deg; }
/* The brown tag at the sheet's corner, on the plan the reader holds. */
.pricing-tag { position: absolute; top: -1rem; right: 1.6rem; z-index: 1; rotate: 2deg; }

/* The levels: evidence tags, each hung by a string from a pin, swinging a
   little when pointed at. --drop is the string, --hole its knot. */
.pricing-levels { --drop: 64px; --hole: 1.5rem; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--drop) + var(--space-24)) var(--gutter); margin: 0; padding: var(--drop) 0 0; list-style: none; }
.pricing-level { --r: -2.4deg; position: relative; display: block; color: var(--ink); text-decoration: none; transform-origin: 50% calc(var(--hole) - var(--drop)); rotate: var(--r); filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--void-black) 70%, transparent)); }
.pricing-levels li:nth-child(2) .pricing-level { --r: 1.6deg; }
.pricing-levels li:nth-child(3) .pricing-level { --r: -1deg; }
.pricing-levels li:nth-child(4) .pricing-level { --r: 2.6deg; }
.pricing-level::before { content: ""; position: absolute; top: calc(var(--hole) - var(--drop) - 7px); left: 50%; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--type-on-dark), var(--line-strong) 70%); box-shadow: var(--shadow-sm); }
.pricing-level::after { content: ""; position: absolute; top: calc(var(--hole) - var(--drop)); left: 50%; width: 2px; height: var(--drop); translate: -50% 0; background: var(--paper-dim); }
.pricing-level-card { position: relative; display: grid; justify-items: center; gap: .55rem; padding: calc(var(--hole) * 2 + .6rem) 1.2rem 1.8rem; background: url(/web/images/paper-sheet.webp) center / cover; text-align: center; clip-path: polygon(24% 0, 76% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); -webkit-mask: radial-gradient(circle at 50% var(--hole), transparent .5rem, var(--void-black) .55rem); mask: radial-gradient(circle at 50% var(--hole), transparent .5rem, var(--void-black) .55rem); }
.pricing-level-card::before { content: ""; position: absolute; top: calc(var(--hole) - .85rem); left: 50%; width: 1.7rem; height: 1.7rem; translate: -50% 0; border: .32rem solid color-mix(in srgb, var(--paper-dim) 70%, var(--ink)); border-radius: 50%; }
.pricing-level-word { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .16em; text-transform: uppercase; }
/* The level gauges are light-grey line icons: drawn in ink through a mask. */
.pricing-level-icon { width: 2.4rem; height: 2.4rem; background: var(--ink); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.pricing-level-icon.is-easy { --icon: url(/web/images/icons/easy.svg); }
.pricing-level-icon.is-medium { --icon: url(/web/images/icons/medium.svg); }
.pricing-level-icon.is-hard { --icon: url(/web/images/icons/hard.svg); }
.pricing-level-stamp { display: grid; place-items: center; height: 2.4rem; padding: 0 .6rem; border: 2px solid var(--brand-mark-red); color: var(--brand-mark-red); font-family: var(--font-display); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; rotate: -6deg; }
.pricing-level-price { color: var(--brand-mark-red); font-family: var(--font-display); font-size: clamp(2rem, 2.8vw, 2.7rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.pricing-level-price small { font-size: .5em; letter-spacing: .06em; text-transform: uppercase; }
.pricing-level-meta { padding-top: .6rem; border-top: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent); font-size: .92rem; line-height: 1.5; }
.pricing-level-go { margin-top: .3rem; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pricing-level:hover .pricing-level-go, .pricing-level:focus-visible .pricing-level-go { text-decoration: underline; text-underline-offset: .2em; }
.pricing-level:focus-visible { outline: none; }
.pricing-level:focus-visible .pricing-level-card { outline: 3px solid var(--aged-paper); outline-offset: -6px; }
@media (prefers-reduced-motion: no-preference) {
  .pricing-level:hover { animation: pricing-swing 1.4s var(--ease); }
}
@keyframes pricing-swing { 0%, 100% { rotate: var(--r); } 25% { rotate: 4deg; } 55% { rotate: -2.5deg; } 80% { rotate: 1deg; } }

/* What a room comes with, then the way in. */
.pricing-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin: 0; padding: var(--space-32) 0 0; border-top: 1px solid var(--line-strong); list-style: none; }
.pricing-facts h3, .pricing-print h3 { margin: 0; color: var(--aged-paper); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; }
.pricing-facts p, .pricing-print p { margin: .5rem 0 0; color: var(--paper-muted); line-height: 1.6; }
.pricing-make { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-24) var(--space-32); }
.pricing-make .label-red { font-size: 1.25rem; }
.pricing-make .text-link { font-weight: 400; font-size: 1rem; }
/* On black the stamp is the tan: the brand red does not read there. */
.pricing-make .pricing-soon { border-color: var(--paper-dim); color: var(--paper-dim); }

/* The small print: the questions asked before paying, three across. */
.pricing-print { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-48) var(--gutter); }
.pricing-print > div { min-width: 0; padding-top: var(--space-16); border-top: 1px solid var(--line); }
.pricing-print a { color: var(--aged-paper); }

@media (max-width: 1279px) {
  .pricing-brief { grid-column: 1 / span 6; }
  .pricing-schedule { grid-column: 7 / span 6; }
  .pricing-plans { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .pricing-brief, .pricing-schedule { grid-column: 1 / -1; }
  .pricing-schedule { justify-self: center; width: min(100%, 36rem); margin-top: var(--space-16); }
  .pricing-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-facts { grid-template-columns: 1fr; gap: var(--space-24); }
  .pricing-print { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pricing-main { gap: var(--space-64); }
  .pricing-plans { grid-auto-flow: row; gap: var(--space-48); }
  .pricing-sheet, .pricing-sheet:nth-child(even), .pricing-schedule { rotate: 0deg; }
  .pricing-levels { --drop: 44px; gap: calc(var(--drop) + var(--space-16)) var(--gutter); }
  .pricing-level-card { padding-inline: .7rem; }
  .pricing-level-meta { font-size: .82rem; }
  .pricing-print { grid-template-columns: 1fr; gap: var(--space-24); }
}

/* The reading pages — about, terms, privacy, refunds: one picture at the
   top, sunk into the black, the title at the display size and the text on
   the measure beneath it. The picture is an <img> (big, so never a url())
   pinned behind the page; it stops growing at the container's width like
   every section, so a wide monitor keeps the page's proportions. Its type
   grows a step with the screen: a 16px column under a 1440px picture read
   as a strip. */
.reading-page { position: relative; isolation: isolate; }
.reading-backdrop { position: absolute; top: 0; left: 50%; z-index: -1; width: min(1440px, 100vw); transform: translateX(-50%); pointer-events: none; }
.reading-backdrop img { display: block; width: 100%; height: auto; filter: brightness(.7); }
.reading-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--void-black) 55%, transparent) 45%, var(--void-black) 92%); }
.reading-main { width: var(--measure); margin: 0 auto; padding-bottom: 6rem; font-size: clamp(1rem, .9rem + .3vw, 1.2rem); }
.reading-main h1 { font-size: var(--text-display); line-height: var(--leading-tight); text-shadow: 0 2px 16px var(--scrim); }
.reading-main p { margin: 1.1rem 0 0; color: var(--aged-paper); line-height: 1.7; }
/* About: the four agents whole under the header, the text from their
   chests down, as the brief's mock. */
.about-main { padding-top: clamp(13rem, 36vw, 32rem); }
.about-main h1 + p { margin-top: 2rem; }
.about-main p + .about-break { margin-top: 2.2rem; }
/* Terms, privacy, refunds: the evidence wall's top, the lamp over the
   title. */
.legal-page .reading-backdrop { height: clamp(26rem, 52vw, 48rem); overflow: hidden; }
.legal-page .reading-backdrop img { height: 100%; object-fit: cover; object-position: 50% 0; filter: brightness(.85); }
.legal-main { width: var(--measure); margin: 0 auto; padding: clamp(11rem, 26vw, 22rem) 0 6rem; font-size: clamp(1rem, .9rem + .3vw, 1.2rem); }
.legal-main .kicker { text-shadow: 0 1px 8px var(--scrim); }
.legal-main h1 { margin-top: .6rem; font-size: var(--text-display); line-height: var(--leading-tight); text-shadow: 0 2px 16px var(--scrim); text-wrap: balance; }
.legal-updated { margin: 1.2rem 0 0; color: var(--paper-dim); font-size: .9rem; }
.legal-main h2 { margin: 2.8rem 0 0; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.15; }
.legal-main p, .legal-main ul { margin: .9rem 0 0; color: var(--aged-paper); line-height: 1.65; }
.legal-main ul { padding-left: 1.2rem; }
.legal-main li + li { margin-top: .4rem; }
.legal-main strong { color: var(--aged-paper); }

/* The player's own page (D42) on the board (2026-10-11): a dossier. Each
   section a worn kicker and a red title on black, its contents on torn
   paper. The room cards below are /create's too, and keep their panels. */
.profile-page { overflow-x: clip; background: var(--void-black) url(/web/images/bg-top.webp) center top / 100% auto no-repeat; }
.profile-main { width: var(--measure); min-height: calc(100vh - 194px); margin: 0 auto; padding: 4rem 0 7rem; }
.profile-kicker { margin: 0; font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.3rem); }
.profile-kicker .worn { padding: .14em .55em .18em; }
/* The board's red on black, as the home page's headline: whoever asks for
   more contrast reads it in cream. */
.profile-heading, .profile-plan h2 { margin: var(--space-16) 0 0; color: var(--headline-red); font-size: clamp(2.4rem, 4.6vw, 4.2rem); font-weight: 400; line-height: 1; overflow-wrap: anywhere; }
@media (prefers-contrast: more) { .profile-heading, .profile-plan h2 { color: var(--type-on-dark); } }
.profile-lede { max-width: 50ch; margin: 1.4rem 0 0; color: var(--paper-dim); font-size: 1.05rem; }
.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.profile-section + .profile-section { margin-top: clamp(3.5rem, 7vw, 6rem); }
/* A sheet of the torn paper: words in ink, labels in the small red caps,
   each sheet leaning a hair the other way from the one before. */
.profile-sheet { position: relative; box-sizing: border-box; margin-top: 2rem; padding: clamp(2.2rem, 3.6vw, 3rem) clamp(1.8rem, 3.2vw, 2.8rem) clamp(2rem, 3.2vw, 2.6rem); color: var(--ink); rotate: -.6deg; }
.profile-sheet:nth-of-type(even) { rotate: .6deg; }
.profile-sheet p { margin: .35rem 0 0; line-height: 1.5; }
.profile-panel-label, .profile-sheet label { margin: 0; color: var(--brand-mark-red); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.profile-sheet .profile-hint { color: var(--sort-marker); font-size: .92rem; line-height: 1.5; }
/* The identity: the photo as a print, the name on its strip beside it,
   Sign out on the brown label at the right. */
.profile-id { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1.2rem, 3vw, 2.2rem); }
.profile-photo { width: clamp(96px, 12vw, 132px); }
.profile-photo img, .profile-initial { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.profile-initial { display: grid; place-items: center; background: var(--paper-dim); color: var(--ink); font-family: var(--font-display); font-size: 3rem; }
.profile-id .strip-title { display: inline-block; margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.profile-email, .profile-since { margin: .6rem 0 0; color: var(--sort-marker); font-size: .92rem; overflow-wrap: anywhere; }
.profile-since { margin-top: .35rem; }
/* Name and photo: two sheets side by side, the field a typed line. */
.profile-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32); }
.profile-field { display: block; width: 100%; box-sizing: border-box; margin-top: .8rem; padding: .5rem .2rem; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--ink) 55%, transparent); background: transparent; color: var(--ink); font: inherit; font-size: 1.2rem; }
.profile-field:focus-visible { outline: 3px solid var(--void-black); outline-offset: 4px; }
.profile-sheet .label-red { margin-top: 1.4rem; font-size: 1rem; }
.profile-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1.4rem; }
.profile-panel-actions [hidden] { display: none; }
/* A quiet action on paper: a word in red, the scratch under it. */
.ink-link { position: relative; display: inline-block; padding: 0; border: 0; background: none; color: var(--brand-mark-red); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.ink-link::after { content: ""; position: absolute; right: -.05em; bottom: -.3em; left: 0; height: .42em; background: var(--brand-mark-red); opacity: .8; -webkit-mask: url(/web/images/scratch-underline.webp) center / 100% 100% no-repeat; mask: url(/web/images/scratch-underline.webp) center / 100% 100% no-repeat; }
.ink-link:focus-visible { outline: 3px solid var(--void-black); outline-offset: 4px; }
/* The plan's sheet: the tag at its corner, the ledger typed beneath. */
.profile-tag { position: absolute; top: -1rem; right: 1.6rem; rotate: 2deg; }
.profile-plan-line { margin: 0; }
.profile-ledger-head { margin-top: 1.6rem; }
.profile-payments { margin: .6rem 0 0; padding: 0; list-style: none; }
.profile-payment { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 5rem; gap: 1.2rem; align-items: baseline; padding: .6rem 0; border-top: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); font-size: .95rem; }
.profile-payment:last-child { border-bottom: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.profile-payment span:last-child { text-align: right; }
.profile-rooms { padding-top: 3.5rem; }
.profile-rooms h2 { margin-top: .5rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.profile-room-list { display: grid; gap: .9rem; margin-top: 1.5rem; }
.profile-room { display: grid; grid-template-columns: 168px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.profile-room-art { position: relative; min-height: 132px; background: var(--panel-raised); }
.profile-room-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-room-body { display: grid; align-content: center; gap: .4rem; min-width: 0; padding: 1rem 1.25rem; }
.profile-room-body .card-meta { margin: 0; }
.profile-room h3 { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; line-height: 1.1; overflow-wrap: anywhere; }
.profile-room-status { margin: 0; color: var(--paper-dim); font-size: .85rem; }
.profile-room-status.is-failed { color: var(--status-failed); }
.profile-room-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .35rem; }
.profile-room-actions [hidden] { display: none; }
.profile-empty { margin: 1.4rem 0 0; color: var(--paper-dim); font-size: 1.05rem; }
.profile-empty .text-link { font-size: inherit; }
/* The question asked before a room changes hands. A native <dialog>, so the
   browser owns the backdrop, the focus trap and Escape. */
/* Closed is hidden here too: a browser that does not know <dialog> knows no
   rule of its own, and would print the two buttons onto the page. */
.profile-ask:not([open]) { display: none; }
.profile-ask { max-width: min(30rem, calc(100% - 2rem)); padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--aged-paper); }
.profile-ask::backdrop { background: color-mix(in srgb, var(--void-black) 80%, transparent); }
.profile-ask p { margin: 0 0 1.25rem; line-height: 1.5; overflow-wrap: anywhere; }
.profile-ask-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }

@media (max-width: 760px) {
  .profile-main { padding-top: 2.5rem; }
  .profile-id { grid-template-columns: 1fr; justify-items: start; }
  .profile-id .strip-title { font-size: clamp(1.5rem, 7vw, 2rem); }
  .profile-pair { grid-template-columns: 1fr; }
  .profile-sheet, .profile-sheet:nth-of-type(even) { rotate: 0deg; }
  .profile-sheet:has(.profile-tag) { padding-top: 3rem; }
  .profile-payment { grid-template-columns: minmax(0, 1fr) auto; }
  .profile-room { grid-template-columns: 1fr; }
  .profile-room-art { min-height: 160px; }
}

/* /staff/rooms (D46): every player's room, one table, the page's full
   width. Read, never edited here. */
.staff-main { width: var(--container); }
.staff-title { margin-top: .5rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.staff-table { width: 100%; margin-top: 1.5rem; border-collapse: collapse; font-size: .9rem; }
.staff-table th, .staff-table td { padding: .7rem .8rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.staff-table th { color: var(--paper-dim); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.staff-table small { color: var(--paper-dim); }
.staff-table tr.is-failed td { color: var(--status-failed); }
.staff-table a { color: inherit; }

/* /create's column is the folder's width, not the profile's 960: the
   folder needs about 1080px to hold its form at the artwork's own ratio,
   and narrower it is stretched (14% at 960). The room list below shares
   the column. */
.create-page { position: relative; isolation: isolate; }
/* Its backdrop is home's Create Mission one, the evidence wall, at the
   page's full width from the top: it shows round the header and the
   heading and behind the folder, and fades out in the black above the
   room list. Stretched over the whole page it showed only its black top. */
.create-page > .create-backdrop { bottom: auto; height: auto; }
.create-page .profile-main { width: var(--container); }
.create-page .create-section { width: 100%; }
.create-page .profile-rooms { margin-top: 1rem; }
.create-section + .profile-rooms { padding-top: 0; }


/* /custom, the made-to-order room (D48), on the home page's structure:
   the hero and the occasions on the main background; how it works on the
   torn slab, as home's Popular rooms; the offer, the evidence tape and the
   questions on the evidence wall, as home's Create Mission, down to the
   footer. Every width is on the 12-column grid. */
.custom-page { overflow-x: clip; background: var(--void-black) url(/web/images/bg-top.webp) center top / 100% auto no-repeat; }
/* The page's type: each size grows with the screen and stops at both ends,
   so body text is never under 16px on a phone and about 20px on a big
   desktop, and a label never under 12px. */
.custom-page {
  --fs-label: clamp(.75rem, .7rem + .16vw, .9rem);
  --fs-small: clamp(.95rem, .88rem + .22vw, 1.08rem);
  --fs-body: clamp(1rem, .9rem + .35vw, 1.25rem);
  --fs-lede: clamp(1.08rem, .95rem + .45vw, 1.4rem);
  --fs-question: clamp(1.12rem, .98rem + .55vw, 1.5rem);
  --fs-sub: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
  --fs-reveal: clamp(1.4rem, 1.05rem + 1.25vw, 2.3rem);
  --fs-title: clamp(1.6rem, 1.15rem + 1.4vw, 2.7rem);
}
.custom-page .site-footer { margin-top: 0; }
.custom-main { width: var(--container); margin: 0 auto; }
.custom-section { padding-top: clamp(4.5rem, 9vw, 8rem); }
.custom-kicker { margin: 0; font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.6rem); }
.custom-kicker .worn { padding: .14em .55em .18em; }
.custom-title { margin: var(--space-16) 0 0; color: var(--type-on-dark); font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.02; text-wrap: balance; }
.custom-label { margin: 0; color: var(--brand-mark-red); font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* The hero: the promise on the left, an example brief on paper. The red
   headline as the pricing page's; whoever asks for more contrast reads it
   in cream. */
.custom-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--space-64) var(--gutter); padding-top: clamp(2.5rem, 6vw, 5rem); }
.custom-hero h1 { max-width: 13ch; margin: var(--space-16) 0 0; color: var(--headline-red); font-size: clamp(3rem, 6.4vw, 6.4rem); line-height: 1; text-wrap: balance; }
@media (prefers-contrast: more) { .custom-hero h1 { color: var(--type-on-dark); } }
.custom-lede { max-width: 46ch; margin: 1.2rem 0 0; color: var(--paper-dim); font-size: var(--fs-lede); line-height: 1.6; }
.custom-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-24) var(--space-32); margin-top: 2.4rem; }
.custom-actions .label-red { font-size: 1.2rem; }
.custom-actions .text-link { font-size: 1rem; font-weight: 400; }
.custom-brief { padding: clamp(2.6rem, 4vw, 3.6rem) clamp(2rem, 3.4vw, 3.2rem) clamp(2.4rem, 3.6vw, 3.2rem); rotate: 1.2deg; }
.custom-brief .strip-title { display: inline-block; margin: .6rem 0 0; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.custom-fields { margin: 1.4rem 0 0; }
.custom-fields div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .55rem 0; border-top: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.custom-fields div:last-child { border-bottom: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.custom-fields dt { padding-top: .2em; color: var(--brand-mark-red); font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.custom-fields dd { margin: 0; font-size: var(--fs-small); line-height: 1.45; }
.custom-answer { font-weight: 700; letter-spacing: .12em; }

/* The occasions: one case a row, the picture on five columns and the words
   on seven, swapping sides row by row, as a dossier. On the usual torn
   paper, so the words are ink. The paper's tears (paper-featured-v2,
   measured): the top bites up to 9% of a sheet's height, the left side
   4.9% of its width, the right 3.8%, the foot 1.4%; each side's padding is
   its tear plus room to breathe, the sides in percent so they grow with
   the row. Between the picture and the words, more than a gutter: the
   tape on the picture's corner reaches out about half its length. */
.custom-rows { display: grid; gap: clamp(2.4rem, 4.5vw, 4rem); margin: 2.6rem 0 0; padding: 0; list-style: none; }
.custom-row { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--space-32) clamp(3rem, 1.5rem + 4vw, 6rem); padding: clamp(4.6rem, 5.6vw, 5.4rem) calc(4% + clamp(1.4rem, 2.6vw, 2.6rem)) clamp(3rem, 4vw, 4rem) calc(5% + clamp(1.4rem, 2.6vw, 2.6rem)); rotate: -.4deg; }
.custom-row:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); rotate: .4deg; }
.custom-row:nth-child(even) .custom-row-print { order: 2; rotate: 1deg; }
.custom-row-print { --tape: clamp(84px, 9vw, 132px); position: relative; margin: 0; rotate: -1deg; }
.custom-row-print img { aspect-ratio: 4 / 3; }
/* Stuck to the paper with tape across its two top corners (tape.webp: one
   strip of frosted tape, drawn on black so its light became its opacity),
   the photograph showing faintly through it. */
.custom-row-print::before, .custom-row-print::after { content: ""; position: absolute; z-index: 1; top: calc(var(--tape) * -.06); width: var(--tape); aspect-ratio: 560 / 141; background: url(/web/images/tape.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 1px 1.5px color-mix(in srgb, var(--void-black) 22%, transparent)); pointer-events: none; }
.custom-row-print::before { left: calc(var(--tape) * -.4); rotate: -38deg; }
.custom-row-print::after { right: calc(var(--tape) * -.4); rotate: 41deg; }
.custom-row-text { display: grid; justify-items: start; gap: 1rem; min-width: 0; }
.custom-row:nth-child(even) .custom-row-text { padding-left: clamp(0rem, 3vw, 2.4rem); }
.custom-row-text .strip-title { margin: 0; font-size: var(--fs-title); }
.custom-row-text p { max-width: 56ch; margin: 0; color: var(--ink); font-size: var(--fs-body); line-height: 1.6; }
.custom-row-text .custom-row-kicker, .custom-row-reveal span { display: block; color: var(--brand-mark-red); font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.custom-row-reveal span { margin-bottom: .2rem; }
.custom-row-reveal strong { display: block; margin-top: .35rem; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-reveal); font-weight: 400; letter-spacing: .08em; line-height: 1.15; }
.custom-also { margin: 2.6rem 0 0; color: var(--paper-dim); font-size: var(--fs-body); }

/* How it works: the torn slab, its words crossing the tears. The slab's
   art bites up to 27% of its height at the top and 10% at the foot, so
   the padding clears both. */
.custom-steps { --word: clamp(3rem, 8.5vw, 7rem); z-index: 3; container-type: inline-size; margin-top: clamp(2.6rem, 4.5vw, 4rem); padding: clamp(180px, 14vw, 210px) 0 clamp(80px, 7vw, 105px); }
.custom-steps-inner { position: relative; width: var(--container); margin: 0 auto; }
/* "How it" behind the top tear at the left, "works" hanging under the
   bottom tear at the right, as "Popular" and "rooms" do on home. Placed
   from the slab's own height: its top tear is about 25% down at the left
   (torn-inner-v6, measured), its foot's tear about 8% up at the right;
   the slab is a layer above the wall (z-index 3), so "works" shows over
   it. */
.custom-word { position: absolute; z-index: -2; margin: 0; color: var(--type-on-dark); font-family: var(--font-display); font-size: var(--word); font-weight: 400; line-height: .9; text-shadow: 0 2px 16px var(--scrim); white-space: nowrap; }
.custom-word-a { top: calc(25% - 1em); left: calc((100% - var(--container)) / 2); }
.custom-word-b { top: calc(100% - .25em + var(--space-4)); right: calc((100% - var(--container)) / 2); }
/* The band as an evidence board: the keyhole's wall of photographs and red
   string behind it, darkened, inside the slab's torn shape. */
.custom-steps.torn-slab::after { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 66%, transparent), color-mix(in srgb, var(--void-black) 80%, transparent)), url(/web/images/keyhole-wall.webp) center 58% / cover no-repeat, var(--panel); }
/* The eight steps, one strip to scroll: four and a bit across a laptop,
   three and a bit on a tablet, one and a bit on a phone, each card sized
   from the container. The strip runs on to both edges of the screen, so a
   card is cut only where the screen ends; its padding and its snap start
   the first card on the container's edge. The bleed is measured on the
   band (a size container), not on 100vw, which counts a scrollbar. No
   scrollbar: the arrows, touch, the wheel and the keyboard move it. */
.custom-track { --bleed: calc((100cqw - var(--container)) / 2); display: flex; gap: var(--space-16); margin: 0 calc(-1 * var(--bleed)); padding: 1.1rem var(--bleed) .9rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--bleed); scroll-snap-type: x mandatory; scrollbar-width: none; }
.custom-track::-webkit-scrollbar { display: none; }
.custom-track:focus-visible { outline: 3px solid var(--aged-paper); outline-offset: -3px; }
/* Each step an index card pinned on one red thread, one to eight: a card
   draws its pin and the thread on to the next card's pin, and its phase
   is printed on it. */
.custom-card { position: relative; display: grid; flex: 0 0 calc((var(--container) - 3 * var(--space-16)) / 4.3); align-content: start; gap: .45rem; min-width: 0; padding: 1.9rem 1.3rem 1.5rem; background: var(--aged-paper); color: var(--ink); box-shadow: 0 8px 16px color-mix(in srgb, var(--void-black) 45%, transparent); rotate: -1.2deg; scroll-snap-align: start; }
.custom-card:nth-child(even) { rotate: 1deg; }
.custom-card::before { content: ""; position: absolute; top: -7px; left: 50%; z-index: 1; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--brand-mark-red); box-shadow: 0 2px 4px var(--scrim); translate: -50% 0; }
.custom-card::after { content: ""; position: absolute; top: -1px; left: 50%; z-index: -1; width: calc(100% + var(--space-16)); height: 2px; background: var(--brand-mark-red); }
.custom-card:last-child::after { content: none; }
.custom-step-phase { color: color-mix(in srgb, var(--ink) 70%, var(--aged-paper)); font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.custom-card-n { color: var(--brand-mark-red); font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.2vw, 3rem); line-height: 1; }
.custom-card h3 { margin: .2rem 0 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); font-weight: 400; line-height: 1.2; }
.custom-card p { margin: 0; color: color-mix(in srgb, var(--ink) 88%, var(--aged-paper)); font-size: var(--fs-small); line-height: 1.5; }
.custom-card-pay { background: var(--brand-mark-red); }
.custom-card-pay::before { background: var(--ink); }
.custom-card-pay .custom-card-n, .custom-card-pay h3, .custom-card-pay p, .custom-card-pay .custom-step-phase { color: var(--aged-paper); }
/* Under the strip: what it holds, and the two arrows. */
.custom-scroll { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .8rem; }
.custom-scroll-hint { margin-right: auto; color: var(--paper-dim); font-size: var(--fs-label); letter-spacing: .06em; }
.custom-scroll .feed-arrow { border: 1px solid var(--line-light); border-radius: var(--radius-full); color: var(--aged-paper); }
.custom-scroll .feed-arrow svg { width: 1rem; height: 1rem; }
.custom-scroll .feed-arrow:hover { border-color: var(--aged-paper); }

/* The evidence wall, home's Create Mission backdrop, from under the slab
   to the footer bar, whose splatter lands on it as on home. Pulled up
   under the slab, so the wall shows below its bottom tear; the padding
   brings the words back out from under it and past "works". */
.custom-stage { --wall-lift: clamp(160px, 15vw, 240px); --wall-h: 2800px; position: relative; isolation: isolate; margin-top: calc(-1 * clamp(60px, 7vw, 110px)); padding: clamp(200px, 20vw, 300px) 0 var(--space-64); }
/* The wall's picture never resizes with what it lies under (a question
   opening): a fixed height, measured to cover the section with every
   question closed (its height plus the lift), fading out at its foot. It
   starts above the stage, so its black top lies under the slab and the
   wall begins at the tear. */
.custom-stage > .create-backdrop { top: calc(-1 * var(--wall-lift)); bottom: auto; height: var(--wall-h); object-position: 50% 0; -webkit-mask-image: linear-gradient(180deg, var(--void-black) 82%, transparent); mask-image: linear-gradient(180deg, var(--void-black) 82%, transparent); }
.custom-offer-wrap { width: var(--container); margin: 0 auto; }

/* The offer: the range on paper, what a room may hold beside it. */
.custom-offer { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: var(--space-64) var(--gutter); margin-top: 2.6rem; }
.custom-price-sheet { padding: clamp(2.6rem, 4vw, 3.6rem) clamp(2rem, 3.4vw, 3.2rem) clamp(2.4rem, 3.6vw, 3.2rem); rotate: -1.2deg; }
.custom-price-sheet .strip-title { display: inline-block; margin: 0; font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
.custom-price { margin: 1.4rem 0 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1; }
.custom-price-note { max-width: 44ch; margin: .8rem 0 0; font-size: var(--fs-body); line-height: 1.5; }
.custom-includes { display: grid; gap: .55rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.custom-includes li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .6rem; font-size: var(--fs-body); line-height: 1.45; }
.custom-includes li::before { content: "\2713"; content: "\2713" / ""; color: var(--brand-mark-red); font-weight: 700; }
.custom-price-sheet .label-red { margin-top: 1.8rem; font-size: 1.2rem; }
.custom-seller { margin: 1.4rem 0 0; color: color-mix(in srgb, var(--ink) 75%, var(--aged-paper)); font-size: clamp(.82rem, .78rem + .12vw, .92rem); line-height: 1.5; }
.custom-limits { display: grid; gap: 2.4rem; }
.custom-limit h3 { margin: 0; color: var(--type-on-dark); font-family: var(--font-display); font-size: var(--fs-sub); font-weight: 400; line-height: 1.15; }
.custom-limit p { max-width: 50ch; margin: .8rem 0 0; color: var(--paper-dim); font-size: var(--fs-body); line-height: 1.6; }

/* The evidence tape: the board's red, across the page at a slant. */
.custom-tape { margin: clamp(3rem, 6vw, 5rem) 0; padding-block: 2.2rem; overflow-x: clip; }
.custom-tape div { width: 130vw; margin-left: -15vw; padding: .75rem 0; background: var(--brand-mark-red); color: var(--aged-paper); font-family: var(--font-display); font-size: clamp(.9rem, 1.4vw, 1.15rem); letter-spacing: .32em; text-transform: uppercase; white-space: nowrap; rotate: -2.5deg; box-shadow: var(--shadow-md); }

/* The questions: native details, the page's full width, each answer on
   a readable measure. */
.custom-faq-wrap { width: var(--container); margin: 0 auto; padding-bottom: var(--space-48); }
.custom-faq { padding-top: clamp(1rem, 3vw, 2.5rem); }
.custom-faq-list { margin-top: 2.2rem; border-bottom: 1px solid var(--line-strong); }
.custom-faq details { border-top: 1px solid var(--line-strong); }
.custom-faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; color: var(--aged-paper); font-family: var(--font-display); font-size: var(--fs-question); list-style: none; cursor: pointer; }
.custom-faq summary::-webkit-details-marker { display: none; }
.custom-faq summary::after { content: "+"; color: var(--paper-dim); }
.custom-faq details[open] summary::after { content: "\2212"; }
.custom-faq summary:focus-visible { outline: 3px solid var(--aged-paper); outline-offset: 3px; }
.custom-faq details p { max-width: 70ch; margin: 0 0 1.3rem; color: var(--paper-dim); font-size: var(--fs-body); line-height: 1.65; }
.custom-faq details a { color: var(--aged-paper); }

/* The last word: the button again, and the address as text. */
.custom-close { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; padding-top: clamp(3.5rem, 7vw, 6rem); }
.custom-close .label-red { font-size: 1.2rem; }
.custom-close p { margin: 0; color: var(--paper-dim); font-size: var(--fs-body); }
.custom-email { color: var(--aged-paper); user-select: all; }

@media (max-width: 1279px) {
  .custom-card { flex-basis: calc((var(--container) - 2 * var(--space-16)) / 3.3); }
  .custom-stage { --wall-h: 2450px; }
}
@media (max-width: 1023px) {
  .custom-hero, .custom-offer { grid-template-columns: 1fr; }
  .custom-brief, .custom-price-sheet { max-width: 38rem; }
  .custom-stage { --wall-h: 2650px; }
}
@media (max-width: 767px) {
  .custom-card { flex-basis: calc((var(--container) - var(--space-16)) / 1.35); }
  .custom-steps { padding-top: 205px; }
  .custom-stage { --wall-h: 3050px; }
  .custom-brief, .custom-price-sheet { rotate: 0deg; }
  .custom-fields div { grid-template-columns: 1fr; gap: .2rem; }
  /* The rows stack, picture first; the paper's tear needs more room over a
     taller row. */
  .custom-row, .custom-row:nth-child(even) { grid-template-columns: 1fr; padding-top: 6.4rem; rotate: 0deg; }
  .custom-row:nth-child(even) .custom-row-print { order: 0; }
  .custom-row:nth-child(even) .custom-row-text { padding-left: 0; }
}