/* A member's page (profiles): the canvas they dress, on the Floor and at /@handle.
   One file for both, so a palette means the same thing everywhere. Members choose
   names (profiles/dressing.py), never CSS: every rule here is the House's. Inside the
   canvas the Floor's own colour names (--paper, --ink, --accent …) take the palette's
   values, so the House's components wear the member's colours there and only there:
   the sidebar, the top bar, the wallet and the signature cards are never restyled. */

.pg-canvas {
  --pg-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --pg-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --pg-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* the House palette (onyx and lantern) */
  --pg-acc-h: 75; --pg-acc-l: 0.80; --pg-acc-c: 0.15;
  --pg-bg: #0a0b0f; --pg-bg-2: #11131a;
  --pg-ink: #f2efe6; --pg-ink-2: #c9ccd3; --pg-ink-3: #9299a6;
  --pg-rule: rgba(148, 158, 176, 0.16); --pg-rule-2: rgba(148, 158, 176, 0.30);
  --pg-card: rgba(255, 255, 255, 0.035);
  --pg-veil: 0, 0, 0;          /* the backdrop's dimming colour (rgb) */
  --pg-on-accent: #170f02;

  --pg-accent: oklch(var(--pg-acc-l) var(--pg-acc-c) var(--pg-h, var(--pg-acc-h)));
  --pg-tint: color-mix(in oklch, var(--pg-accent) 14%, transparent);

  /* the Floor's names, so its components follow the palette in here */
  --paper: var(--pg-bg); --paper-2: var(--pg-bg-2); --paper-3: var(--pg-bg-2);
  --ink: var(--pg-ink); --ink-2: var(--pg-ink-2); --ink-3: var(--pg-ink-3); --ink-4: var(--pg-ink-3);
  --rule: var(--pg-rule); --rule-2: var(--pg-rule-2);
  --accent: var(--pg-accent); --accent-on: var(--pg-on-accent);
  --accent-tint: var(--pg-tint); --accent-ink: var(--pg-accent);
  --cheshire: var(--pg-accent);

  position: relative;
  color: var(--pg-ink);
  background: var(--pg-bg);
  border-radius: 20px;
  border: 1px solid var(--pg-rule);
  overflow: hidden;
  font-family: var(--pg-sans);
  isolation: isolate;
}

.pg-canvas[data-palette="parchment"] {
  --pg-acc-h: 40; --pg-acc-l: 0.52; --pg-acc-c: 0.13;
  --pg-bg: #f3ecdc; --pg-bg-2: #ebe2cc; --pg-ink: #2a2419; --pg-ink-2: #4a3f2e; --pg-ink-3: #75684f;
  --pg-rule: rgba(60, 40, 10, 0.14); --pg-rule-2: rgba(60, 40, 10, 0.26);
  --pg-card: rgba(255, 252, 244, 0.72); --pg-veil: 243, 236, 220; --pg-on-accent: #fff;
  color-scheme: light;
}
.pg-canvas[data-palette="rose"] {
  --pg-acc-h: 0; --pg-acc-l: 0.55; --pg-acc-c: 0.15;
  --pg-bg: #fbeef0; --pg-bg-2: #f5e0e4; --pg-ink: #3a1d26; --pg-ink-2: #5c3340; --pg-ink-3: #8a6170;
  --pg-rule: rgba(90, 20, 40, 0.13); --pg-rule-2: rgba(90, 20, 40, 0.24);
  --pg-card: rgba(255, 250, 251, 0.75); --pg-veil: 251, 238, 240; --pg-on-accent: #fff;
  color-scheme: light;
}
.pg-canvas[data-palette="velvet"] {
  --pg-acc-h: 330; --pg-acc-l: 0.74; --pg-acc-c: 0.14;
  --pg-bg: #150a16; --pg-bg-2: #1f1121; --pg-ink: #f4e6f1; --pg-ink-2: #d6bfd1; --pg-ink-3: #a58aa0;
  --pg-rule: rgba(230, 170, 220, 0.14); --pg-rule-2: rgba(230, 170, 220, 0.26);
  --pg-card: rgba(255, 220, 250, 0.04); --pg-veil: 21, 10, 22;
}
.pg-canvas[data-palette="moss"] {
  --pg-acc-h: 145; --pg-acc-l: 0.76; --pg-acc-c: 0.12;
  --pg-bg: #0b130e; --pg-bg-2: #121d16; --pg-ink: #e8efe5; --pg-ink-2: #c3d0bf; --pg-ink-3: #8c9c88;
  --pg-rule: rgba(170, 210, 170, 0.13); --pg-rule-2: rgba(170, 210, 170, 0.25);
  --pg-card: rgba(220, 255, 220, 0.035); --pg-veil: 11, 19, 14;
}
.pg-canvas[data-palette="ember"] {
  --pg-acc-h: 35; --pg-acc-l: 0.72; --pg-acc-c: 0.16;
  --pg-bg: #150b07; --pg-bg-2: #20120c; --pg-ink: #f6e9df; --pg-ink-2: #dcc5b6; --pg-ink-3: #a88a78;
  --pg-rule: rgba(240, 170, 130, 0.14); --pg-rule-2: rgba(240, 170, 130, 0.26);
  --pg-card: rgba(255, 220, 200, 0.04); --pg-veil: 21, 11, 7;
}
.pg-canvas[data-palette="midnight"] {
  --pg-acc-h: 240; --pg-acc-l: 0.76; --pg-acc-c: 0.12;
  --pg-bg: #070b18; --pg-bg-2: #0e1426; --pg-ink: #e6ecff; --pg-ink-2: #c0c9e4; --pg-ink-3: #8691b3;
  --pg-rule: rgba(160, 180, 240, 0.14); --pg-rule-2: rgba(160, 180, 240, 0.26);
  --pg-card: rgba(200, 215, 255, 0.04); --pg-veil: 7, 11, 24;
}

/* fonts */
.pg-canvas { --pg-head: var(--pg-serif); --pg-text: var(--pg-sans); }
.pg-canvas[data-font="serif"] { --pg-head: var(--pg-serif); --pg-text: var(--pg-serif); }
.pg-canvas[data-font="sans"] { --pg-head: var(--pg-sans); --pg-text: var(--pg-sans); }
.pg-canvas[data-font="mono"] { --pg-head: var(--pg-mono); --pg-text: var(--pg-mono); }
.pg-canvas { font-family: var(--pg-text); }
.pg-canvas[data-font="serif"] .pg-block-body { font-size: 1.12em; }

/* the lantern glow at the top of the page */
.pg-canvas[data-glow="true"]::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 520px; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 360px at 50% -80px, color-mix(in oklch, var(--pg-accent) 20%, transparent), transparent 70%);
}

/* the backdrop: a banner (fill), or wallpaper across the whole canvas (tile, the old way) */
.pg-banner {
  height: 220px; position: relative;
  background:
    linear-gradient(180deg, transparent 40%, var(--pg-bg)),
    radial-gradient(600px 220px at 30% 0%, var(--pg-tint), transparent 70%),
    var(--pg-bg-2);
}
/* no picture chosen: their own stretch of corridor (profiles.banner), over the page's tint */
.pg-banner:not(.has-image) {
  background:
    linear-gradient(180deg, transparent 45%, var(--pg-bg)),
    var(--pg-pattern, none) 50% 50% / cover no-repeat,
    radial-gradient(600px 220px at 30% 0%, var(--pg-tint), transparent 70%),
    var(--pg-bg-2);
}
.pg-banner.has-image {
  background:
    linear-gradient(180deg, rgba(var(--pg-veil), var(--pg-dim, 0.45)) 0%, rgba(var(--pg-veil), calc(var(--pg-dim, 0.45) + 0.2)) 70%, var(--pg-bg) 100%),
    var(--pg-backdrop) var(--pg-fx, 50%) var(--pg-fy, 50%) / cover no-repeat,
    var(--pg-bg-2);
}
.pg-canvas[data-fit="tile"].has-backdrop {
  background:
    linear-gradient(rgba(var(--pg-veil), var(--pg-dim, 0.45)), rgba(var(--pg-veil), var(--pg-dim, 0.45))),
    var(--pg-backdrop) 0 0 / auto repeat,
    var(--pg-bg);
}
.pg-canvas[data-fit="tile"] .pg-banner.has-image { background: transparent; height: 140px; }

/* the name card, overlapping the banner */
.pg-hero { position: relative; margin: -110px 22px 0; z-index: 1; }

/* the blocks */
.pg-body { padding: 18px 22px 26px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); max-width: 864px; margin: 0 auto; }
/* two columns only when there is something for the side one */
.pg-body.is-rail { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; max-width: none; }
.pg-col { display: grid; gap: 16px; min-width: 0; }

.pg-block { border-radius: 14px; padding: 16px 18px 18px; min-width: 0; }
.pg-canvas[data-cards="glass"] .pg-block,
.pg-canvas[data-cards="glass"] .pg-card {
  background: var(--pg-card); border: 1px solid var(--pg-rule);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pg-canvas[data-cards="paper"] .pg-block,
.pg-canvas[data-cards="paper"] .pg-card {
  background: var(--pg-bg-2); border: 1px solid var(--pg-rule-2);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}
.pg-canvas[data-cards="ink"] .pg-block,
.pg-canvas[data-cards="ink"] .pg-card {
  background: var(--pg-bg); border: 1px solid var(--pg-rule); border-left: 3px solid var(--pg-accent);
  border-radius: 4px;
}
.pg-canvas[data-cards="bare"] .pg-block { padding: 6px 2px 10px; border-bottom: 1px solid var(--pg-rule); border-radius: 0; }

.pg-block-title {
  margin: 0 0 10px; font-family: var(--pg-head); font-weight: 600;
  font-size: 20px; line-height: 1.2; color: var(--pg-accent); letter-spacing: 0.01em;
  display: flex; align-items: baseline; gap: 10px;
}
.pg-block-title::after { content: ""; flex: 1; height: 1px; background: var(--pg-rule-2); transform: translateY(-4px); }
.pg-audience {
  font: 600 10px/1 var(--pg-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pg-ink-3); border: 1px solid var(--pg-rule-2); border-radius: 99px; padding: 4px 7px;
  font-family: var(--pg-mono);
}
.pg-audience.is-public { color: var(--pg-accent); border-color: color-mix(in oklch, var(--pg-accent) 50%, transparent); }

/* what Markdown makes */
.pg-block-body, .pg-bio { color: var(--pg-ink-2); line-height: 1.62; overflow-wrap: anywhere; font-size: 15.5px; }
.pg-public .pg-block-body, .pg-public .pg-bio { font-size: 17px; }
.pg-block-body > :first-child, .pg-bio > :first-child { margin-top: 0; }
.pg-block-body > :last-child, .pg-bio > :last-child { margin-bottom: 0; }
.pg-block-body p, .pg-bio p { margin: 0 0 0.8em; }
.pg-block-body h3, .pg-block-body h4, .pg-block-body h5, .pg-block-body h6 {
  font-family: var(--pg-head); color: var(--pg-ink); margin: 1.1em 0 0.4em; line-height: 1.25;
}
.pg-block-body h3 { font-size: 19px; } .pg-block-body h4 { font-size: 17px; }
.pg-block-body h5, .pg-block-body h6 { font-size: 15px; }
.pg-block-body a, .pg-bio a { color: var(--pg-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pg-block-body strong, .pg-bio strong { color: var(--pg-ink); }
.pg-block-body blockquote {
  margin: 0.6em 0; padding: 0.2em 0 0.2em 14px; border-left: 2px solid var(--pg-accent);
  font-family: var(--pg-serif); font-style: italic; font-size: 1.1em; color: var(--pg-ink);
}
.pg-block-body ul, .pg-block-body ol { padding-left: 1.3em; margin: 0 0 0.8em; }
.pg-block-body li { margin: 0.2em 0; }
.pg-block-body code { font-family: var(--pg-mono); font-size: 0.88em; background: var(--pg-tint); padding: 0.1em 0.35em; border-radius: 4px; }
.pg-block-body pre { background: var(--pg-bg-2); padding: 12px 14px; border-radius: 10px; overflow-x: auto; border: 1px solid var(--pg-rule); }
.pg-block-body pre code { background: none; padding: 0; }
.pg-block-body img { display: block; max-width: 100%; height: auto; border-radius: 10px; margin: 0.6em 0; }
.pg-block-body hr { border: 0; height: 1px; background: var(--pg-rule-2); margin: 1.2em 0; }
.pg-block-body table { width: 100%; border-collapse: collapse; font-size: 0.94em; margin: 0 0 0.8em; display: block; overflow-x: auto; }
.pg-block-body th, .pg-block-body td { border-bottom: 1px solid var(--pg-rule); padding: 6px 8px; text-align: left; }
.pg-block-body th { color: var(--pg-ink); }

/* the widgets */
.pg-said { margin: 0.2em 0 0.6em; color: var(--pg-ink); }
.pg-said-k { font: 600 10.5px/1 var(--pg-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-accent); margin-right: 6px; }
.pg-joined { font-family: var(--pg-serif); font-style: italic; color: var(--pg-ink-3); }
.pg-divider { display: flex; align-items: center; gap: 12px; color: var(--pg-accent); margin: 1em 0; }
.pg-divider::before, .pg-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--pg-rule-2), transparent); }
.pg-empty { color: var(--pg-ink-3); font-style: italic; }
.pg-canvas ul.pg-corridor { list-style: none; padding: 0; margin: 0.2em 0 0.6em; display: grid; gap: 14px 10px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.pg-corridor a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--pg-ink-2); text-align: center; }
.pg-corridor a:hover .pg-face { box-shadow: 0 0 0 2px var(--pg-accent); }
.pg-face { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--pg-bg-2); transition: box-shadow 0.15s; }
.pg-initial { font-family: var(--pg-serif); font-size: 26px; color: var(--pg-on-accent); background: var(--pg-accent); }
.pg-initial[data-hue="2"] { background: oklch(0.62 0.04 250); }
.pg-initial[data-hue="3"] { background: oklch(0.74 0.09 70); }
.pg-initial[data-hue="4"] { background: oklch(0.54 0.17 27); }
.pg-initial[data-hue="5"] { background: oklch(0.64 0.07 145); }
.pg-initial[data-hue="6"] { background: oklch(0.58 0.11 40); }
.pg-face-name { font-size: 12.5px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pg-canvas ul.pg-signals, .pg-canvas ul.pg-pieces, .pg-canvas ul.pg-seats { list-style: none; padding: 0; margin: 0.2em 0 0.6em; display: grid; gap: 8px; }
.pg-canvas ul.pg-signals { gap: 0; }
.pg-canvas .pg-signals li { display: grid; gap: 4px; padding: 8px 0; margin: 0; border-bottom: 1px dashed var(--pg-rule); }
.pg-signals li:last-child { border-bottom: 0; }
.pg-signals time { font: 11px/1 var(--pg-mono); color: var(--pg-ink-3); }
.pg-signal-text { color: var(--pg-ink); }
.pg-pieces a { font-family: var(--pg-serif); font-size: 1.08em; }

/* voice: their latest words, set as a quotation */
.hw-voice { margin: 4px 0 2px; }
.hw-voice blockquote { margin: 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--pg-accent); }
.hw-voice p { margin: 0; font-family: var(--pg-serif); font-style: italic; font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.38; color: var(--pg-ink); text-wrap: pretty; }
.hw-voice-when { margin: 10px 0 0 20px; font: 11px/1 var(--pg-mono); letter-spacing: .06em; color: var(--pg-ink-3); }

/* pieces as covers: the picture, the title, when */
.pg-canvas ul.hw-pieces.is-covers { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.hw-pieces.is-covers a { display: grid; gap: 6px; text-decoration: none; color: var(--pg-ink); }
.hw-cover { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--pg-rule); background: var(--pg-bg-2); transition: transform .18s ease, box-shadow .18s ease; }
.hw-cover.is-bare { display: grid; place-items: center; font: italic 34px/1 var(--pg-serif); color: var(--pg-ink-3); }
.hw-pieces.is-covers a:hover .hw-cover { transform: translateY(-2px); box-shadow: 0 8px 22px -12px var(--pg-accent); }
.hw-piece-title { font-family: var(--pg-serif); font-size: 1.02em; line-height: 1.25; }
.hw-pieces.is-covers time { font: 10.5px/1 var(--pg-mono); letter-spacing: .05em; color: var(--pg-ink-3); }

/* rooms: where they host and write */
.pg-canvas ul.hw-rooms { list-style: none; padding: 0; margin: 0.3em 0 0.4em; display: grid; gap: 2px; }
.hw-rooms a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0;
  border-bottom: 1px dashed var(--pg-rule); text-decoration: none; color: var(--pg-ink); }
.hw-rooms li:last-child a { border-bottom: 0; }
.hw-room-name { font-family: var(--pg-serif); font-size: 1.05em; }
.hw-room-role { font: 10.5px/1 var(--pg-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pg-ink-3); }

/* the name card's own bits */
.pg-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; }
.pg-links a { color: var(--pg-accent); font-size: 13.5px; text-decoration: none; border-bottom: 1px solid color-mix(in oklch, var(--pg-accent) 40%, transparent); }
.pg-links a:hover { border-bottom-color: var(--pg-accent); }
.pg-pronouns { font: 600 10.5px/1 var(--pg-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-ink-3); border: 1px solid var(--pg-rule-2); border-radius: 99px; padding: 4px 8px; vertical-align: middle; }
.pg-bio { margin-top: 10px; max-width: 64ch; }

@media (max-width: 860px) {
  .pg-body.is-rail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pg-banner { height: 160px; }
  .pg-hero { margin: -80px 12px 0; }
  .pg-body { padding: 14px 12px 20px; }
  .pg-block { padding: 14px 14px 16px; }
  .pg-canvas { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { .pg-face { transition: none; } }

/* ── The open-web page (/@handle), inside the House's own frame ─────────────── */
.pg-public { padding: 28px 16px 10px; }
.pg-public .pg-canvas { max-width: 1120px; margin: 0 auto; }
.pg-public .pg-namecard { padding: 22px 24px; border-radius: 16px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.pg-public .pg-portrait { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 3px solid var(--pg-bg); box-shadow: 0 0 0 1px var(--pg-rule-2), 0 0 30px -6px color-mix(in oklch, var(--pg-accent) 45%, transparent); }
.pg-public .pg-portrait.pg-initial { display: inline-flex; align-items: center; justify-content: center; font-size: 52px; }
.pg-public .pg-eyebrow { font: 600 10.5px/1 var(--pg-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pg-accent); }
.pg-public .pg-name { font-family: var(--pg-head); font-size: clamp(32px, 5vw, 50px); line-height: 1.02; margin: 6px 0 4px; color: var(--pg-ink); font-weight: 600; }
.pg-public .pg-handle { font: 13px/1.4 var(--pg-mono); color: var(--pg-ink-3); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pg-public .pg-notice { max-width: 1120px; margin: 0 auto 14px; padding: 12px 16px; border-radius: 12px; border: 1px dashed rgba(148, 158, 176, 0.4); color: #c9ccd3; font-size: 14px; }
@media (max-width: 560px) {
  .pg-public { padding: 16px 12px 6px; }
  .pg-public .pg-namecard { grid-template-columns: 1fr; text-align: left; padding: 18px; }
  .pg-public .pg-portrait { width: 96px; height: 96px; }
}

/* The stage frame: a member's sections, sealed in their own document (profiles.stage). */
.pg-stage-frame { display: block; width: 100%; height: 420px; min-height: 120px; border: 0; background: transparent; }
.pg-stage-wrap { max-width: none; }
.pg-canvas[data-layout="single"] .pg-stage-wrap { max-width: 864px; }