/* The Key — stylesheet.
   House palette: off-white ground, black type, white type on red/blue/green/black blocks, black on yellow and cream.
   Type: Suisse Works (serif, titles and the House's lines), Suisse Int'l (sans, everything else).
   Fonts are self-hosted only (license). Drop the .otf files from the website into /public/fonts; until then, system fallbacks. */
@font-face { font-family: "Suisse Works"; src: url("/fonts/SuisseWorks-Regular.otf"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Works"; src: url("/fonts/SuisseWorks-RegularItalic.otf"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("/fonts/SuisseBPIntl-Regular.otf"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("/fonts/SuisseBPIntl-RegularItalic.otf"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("/fonts/SuisseIntl-Medium.otf"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Int'l"; src: url("/fonts/SuisseBPIntl-Light.otf"); font-weight: 300; font-style: normal; font-display: swap; }

:root {
  --ground: #F3EFEE;
  --cream: #E6DBD3;
  --white: #FFFFFF;
  --ink: #000000;
  --red: #FF3C00;
  --blue: #2A60FE;
  --green: #46A14A;
  --yellow: #FFC233;
  --muted: rgba(0, 0, 0, 0.55);
  --muted-on-dark: rgba(255, 255, 255, 0.6);
  --line: rgba(0, 0, 0, 0.16);
  --hair: 1px solid var(--ink);
  --serif: "Suisse Works", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Suisse Int'l", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --max: 680px;
  --top: 56px;
  --tabs: 64px;
  --r: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body { font-family: var(--sans); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font: inherit; color: inherit; }
img, svg { display: block; }

/* ---------- Chrome: black top bar, bottom tab bar (left rail on desktop) ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; height: var(--top); background: var(--ink); color: var(--white); z-index: 20; padding-top: env(safe-area-inset-top); }
.top .in { max-width: var(--max); margin: 0 auto; height: var(--top); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.top .mark { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 19px; letter-spacing: -0.02em; color: var(--white); }
.top .mark svg { width: 14px; height: 22px; fill: var(--white); }
.top .hobb { height: 20px; width: auto; opacity: 0.95; }
.tabs { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--tabs) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--ground); border-top: var(--hair); z-index: 20; }
.tabs .in { max-width: var(--max); margin: 0 auto; height: var(--tabs); display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; }
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; letter-spacing: 0.02em; color: var(--muted); }
.tabs a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.tabs a.on { color: var(--ink); }
.tabs a.key { color: var(--ink); }
.tabs a.key .hole { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; margin-top: -2px; }
.tabs a.key .hole svg { width: 12px; height: 19px; stroke: none; fill: var(--ground); }
.tabs a.key.on .hole { background: var(--blue); }
.wrap { max-width: var(--max); margin: 0 auto; padding: calc(var(--top) + 22px + env(safe-area-inset-top)) 18px calc(var(--tabs) + 32px + env(safe-area-inset-bottom)); }
.bare .wrap { padding-top: 24px; }

@media (min-width: 900px) {
  :root { --max: 720px; }
  .top { left: 0; right: 0; }
  .top .in { max-width: none; padding: 0 28px; }
  .tabs { top: var(--top); bottom: 0; left: 0; right: auto; width: 200px; height: auto; border-top: 0; border-right: var(--hair); padding: 24px 0; }
  .tabs .in { display: flex; flex-direction: column; height: auto; gap: 2px; }
  .tabs a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 24px; font-size: 15px; }
  .tabs a.key .hole { width: 28px; height: 28px; margin: 0; }
  .tabs a.key .hole svg { width: 9px; height: 14px; }
  .wrap { margin-left: max(200px, calc((100% - var(--max)) / 2)); margin-right: auto; padding-top: calc(var(--top) + 40px); padding-bottom: 80px; padding-left: 40px; padding-right: 40px; }
  body.bare .wrap { margin-left: auto; }
}

/* ---------- Type ---------- */
h1 { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.0; letter-spacing: -0.035em; margin: 0 0 16px; }
h1 em, h2 em, .lead em, .q em, .house em { font-style: italic; }
h2 { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 36px 0 12px; }
h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 8px; }
p { margin: 0 0 12px; }
.lead { font-family: var(--serif); font-size: 22px; line-height: 1.22; letter-spacing: -0.015em; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.serif { font-family: var(--serif); }
.date { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }

/* ---------- Cards ----------
   Editorial card: hairline border, optional image or color head, serif title, rule, sans body (the 2021 card, in the current palette).
   Block card: a solid color field with its own text color. Blue = the House speaks. Red = needs you. Yellow = the question. Green = people. Cream = board and dates. */
.card { border: var(--hair); border-radius: var(--r); background: var(--white); padding: 18px 18px 16px; margin: 0 0 14px; overflow: hidden; }
.card .k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.card .t { font-family: var(--serif); font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 10px; }
.card .t + .rule, .rule { border-top: var(--hair); margin: 12px 0; }
.card p:last-child { margin-bottom: 0; }
.card .head { margin: -18px -18px 16px; height: 120px; background: var(--cream); }
.card .head img { width: 100%; height: 100%; object-fit: cover; }
a.card { display: block; }
.block { border-radius: var(--r); padding: 20px 18px 18px; margin: 0 0 14px; }
.block .k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; margin: 0 0 10px; }
.block .t { font-family: var(--serif); font-size: 26px; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 12px; }
.block p:last-child { margin-bottom: 0; }
.block.blue { background: var(--blue); color: var(--white); }
.block.red { background: var(--red); color: var(--white); }
.block.green { background: var(--green); color: var(--white); }
.block.black { background: var(--ink); color: var(--white); }
.block.yellow { background: var(--yellow); color: var(--ink); }
.block.cream { background: var(--cream); color: var(--ink); }
.block.white { background: var(--white); color: var(--ink); border: var(--hair); }
.block.blue .btn, .block.red .btn, .block.green .btn, .block.black .btn { border-color: var(--white); color: var(--white); }
.block.blue .btn.primary, .block.red .btn.primary, .block.green .btn.primary, .block.black .btn.primary { background: var(--white); color: var(--ink); }
.block.blue .muted, .block.red .muted, .block.green .muted, .block.black .muted { color: var(--muted-on-dark); }
.block.blue .field, .block.red .field, .block.green .field, .block.black .field { border-bottom-color: var(--white); color: var(--white); }
.block.blue .field::placeholder, .block.red .field::placeholder, .block.green .field::placeholder, .block.black .field::placeholder { color: var(--muted-on-dark); }
.block.yellow .field::placeholder, .block.cream .field::placeholder { color: rgba(0,0,0,0.5); }
.row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.grow { flex: 1; }
.stack { display: grid; gap: 14px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Avatars: initials in a circle, the House's colors. */
.av { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 16px; background: var(--cream); color: var(--ink); flex: none; }
.av.voice { background: var(--ink); color: var(--white); }
.av.lg { width: 64px; height: 64px; font-size: 24px; }
.who { display: flex; align-items: center; gap: 12px; }
.who .n { font-weight: 500; }
.who .s { font-size: 13px; color: var(--muted); }

/* Horizontal strip (people, voices out tonight). */
.strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 0 8px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip .one { flex: none; width: 72px; text-align: center; font-size: 12px; color: var(--muted); }
.strip .one .av { margin: 0 auto 6px; width: 56px; height: 56px; font-size: 20px; }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; border: var(--hair); border-radius: 999px; padding: 11px 18px; font-size: 15px; line-height: 1; background: transparent; white-space: nowrap; }
.btn.primary { background: var(--ink); color: var(--white); }
.btn.blue { background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn.quiet { border-color: var(--line); color: var(--muted); }
.btn.live { box-shadow: 0 0 0 3px rgba(42,96,254,0.25); border-color: var(--blue); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.small { padding: 7px 12px; font-size: 13px; }
.hr.door .q { font-size: 18px; line-height: 1.3; margin: 10px 0 0; }
.journey { border-left: 1px solid var(--line); margin-left: 6px; padding-left: 18px; }
.jentry { display: flex; gap: 14px; margin: 0 0 22px; position: relative; }
.jentry::before { content: ""; position: absolute; left: -23px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); }
.jdate { flex: 0 0 56px; font-size: 13px; color: var(--muted); padding-top: 2px; }
.jbody p { margin: 0 0 6px; }
.top .house { margin-left: auto; margin-right: 14px; font-size: 13px; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 4px 10px; }
.top .house.on { background: var(--white); color: var(--ink); }
.block input { border: none; border-radius: 999px; padding: 10px 14px; font: inherit; font-size: 15px; }
.field { width: 100%; border: 0; border-bottom: var(--hair); background: transparent; padding: 10px 0; font-size: 17px; outline: none; border-radius: 0; }
textarea.field { resize: vertical; min-height: 88px; line-height: 1.4; }
select.field { appearance: none; -webkit-appearance: none; padding-right: 20px; }
.actions { display: flex; gap: 10px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
.pill { display: inline-block; border: var(--hair); border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.seg { display: inline-flex; border: var(--hair); border-radius: 999px; padding: 3px; margin: 0 0 20px; }
.seg a { padding: 7px 16px; border-radius: 999px; font-size: 14px; color: var(--muted); }
.seg a.on { background: var(--ink); color: var(--white); }

/* ---------- The walk through the House (interview) ---------- */
.chat { display: flex; flex-direction: column; gap: 20px; }
.q { font-family: var(--serif); font-size: 23px; line-height: 1.18; letter-spacing: -0.02em; }
.a { padding: 14px 16px; background: var(--white); border: var(--hair); border-radius: var(--r); border-top-left-radius: 2px; white-space: pre-wrap; max-width: 92%; align-self: flex-end; }
.rooms { display: flex; gap: 6px; margin: 0 0 24px; }
.rooms span { flex: 1; height: 3px; background: var(--line); border-radius: 2px; }
.rooms span.on { background: var(--blue); }
.rooms span.done { background: var(--ink); }
.roomname { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: -16px 0 20px; }
.compose { margin-top: 20px; }
@media (min-width: 900px) { .compose { bottom: 8px; } }

/* ---------- Portrait: six rooms ---------- */
.portrait-head { margin: 0 0 24px; }
.portrait-head .line { font-family: var(--serif); font-size: 26px; line-height: 1.12; letter-spacing: -0.025em; }
.room { border: var(--hair); border-radius: var(--r); background: var(--white); padding: 18px; margin: 0 0 14px; }
.room h2 { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.room h2 i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); display: inline-block; }
.room.door h2 i { background: var(--ink); } .room.kitchen h2 i { background: var(--red); } .room.cellar h2 i { background: var(--blue); }
.room.garden h2 i { background: var(--green); } .room.library h2 i { background: var(--white); border: 1px solid var(--ink); } .room.window h2 i { background: var(--yellow); } .room.roof h2 i { background: var(--cream); border: 1px solid var(--ink); }
.room .house { font-family: var(--serif); font-size: 21px; line-height: 1.22; letter-spacing: -0.015em; margin: 0; }
.room .theirs { margin: 14px 0 0; padding: 12px 0 0; border-top: var(--hair); }
.room .quote { font-size: 16px; line-height: 1.42; margin: 0 0 8px; }
.room .quote::before { content: "“"; } .room .quote::after { content: "”"; }
.room .quote:last-child { margin-bottom: 0; }
.room.ask { background: var(--blue); color: var(--white); border-color: var(--blue); }
.room.ask h2 { color: var(--white); opacity: 0.75; }
[contenteditable="true"] { outline: none; box-shadow: inset 0 -1px 0 var(--line); }
.portrait { font-family: var(--serif); font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; white-space: pre-wrap; }
.portrait[contenteditable="true"] { padding-left: 14px; border-left: 2px solid var(--blue); }

/* ---------- A walk ---------- */
.walking { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--muted); margin: 28px 4px 20px; }
.overheard { border-radius: var(--r); background: var(--cream); padding: 16px 18px; margin: 0 0 14px; }
.overheard .serif { font-size: 19px; line-height: 1.3; margin: 6px 0 8px; }
.enc { border: var(--hair); border-radius: var(--r); background: var(--white); padding: 0; margin: 0 0 18px; overflow: hidden; }
.enc .top-of { padding: 16px 18px 14px; border-bottom: var(--hair); display: flex; align-items: center; gap: 12px; }
.enc.voice .top-of { background: var(--ink); color: var(--white); border-bottom: 0; }
.enc .seam { font-family: var(--serif); font-size: 19px; line-height: 1.28; letter-spacing: -0.015em; padding: 16px 18px 6px; margin: 0; }
.enc .script { padding: 6px 18px 4px; }
.enc .ps { padding: 0 18px; }
.enc .pf { padding: 8px 18px 16px; border-top: var(--hair); margin-top: 8px; }
.enc .pf .field { font-size: 15px; }
.script .turn { margin: 0 0 14px; }
.script .who, .ps .who { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; display: block; }
.ps .turn { margin: 8px 0 14px; padding-left: 12px; border-left: 2px solid var(--blue); }
.letter p { font-family: var(--serif); font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; }
.letter .card { color: var(--ink); }

/* ---------- Login ---------- */
.gate { min-height: 100vh; min-height: 100dvh; background: var(--ink); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; }
.gate .hole { width: 56px; height: 90px; margin: 0 0 40px; }
.gate h1 { font-size: 40px; margin-bottom: 14px; }
.gate p { max-width: 360px; color: var(--muted-on-dark); }
.gate form { width: 100%; max-width: 360px; margin-top: 24px; }
.gate .field { border-bottom-color: var(--white); text-align: center; color: var(--white); }
.gate .field::placeholder { color: var(--muted-on-dark); }
.gate .btn { border-color: var(--white); color: var(--white); }
.gate .btn.primary { background: var(--white); color: var(--ink); }
.gate .hobb { height: 22px; margin-top: 56px; opacity: 0.7; }

.empty { color: var(--muted); font-family: var(--serif); font-size: 21px; line-height: 1.25; padding: 8px 0 24px; }
.err { background: var(--red); color: var(--white); padding: 12px 14px; border-radius: var(--r); font-size: 14px; }
.hidden { display: none !important; }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }

@media (max-width: 380px) { h1 { font-size: 32px; } .q { font-size: 21px; } }

/* ---------- The portrait page ---------- */
.phead { display: flex; align-items: center; gap: 16px; margin: 0 0 6px; }
.phead .photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; border: var(--hair); }
.phead.has { align-items: center; }
.phead.mine { cursor: pointer; }
.phead .pname h1 { margin: 0; }
.phead .s { font-size: 14px; color: var(--muted); margin-top: 4px; }
.av.ph { overflow: hidden; background: var(--cream); }
.av.ph img { width: 100%; height: 100%; object-fit: cover; }
.room .rh { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.room .rh h2 { margin: 0; }
.room.mine { cursor: pointer; }
.room.mine:active { background: var(--ground); }
.room .rf { margin: 0 0 14px; }
.room .rf:last-child { margin-bottom: 0; }
.rf .k, .room .rf .k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.room .ans { font-family: var(--serif); font-size: 20px; line-height: 1.24; letter-spacing: -0.015em; margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag { display: inline-block; border: var(--hair); border-radius: 999px; padding: 6px 12px; font-size: 14px; line-height: 1.1; background: var(--white); }
.tag.place { background: var(--yellow); border-color: var(--yellow); }
.tag.pick { cursor: pointer; user-select: none; color: var(--muted); border-color: var(--line); }
.tag.pick.on { color: var(--ink); border-color: var(--ink); background: var(--ink); color: var(--white); }
.tagin { width: auto; flex: 1; min-width: 160px; border-bottom: 0; font-size: 14px; padding: 6px 4px; }
.strip a.one { color: var(--muted); }

/* ---------- Room editor ---------- */
.rhead { margin-bottom: 22px; }
.fe { margin: 0 0 26px; }
.fl { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 6px; }
.fe .field { font-size: 16px; }
.fe textarea.field { min-height: 56px; }
.photoprev { width: 72px; height: 72px; border-radius: 50%; background: var(--cream); overflow: hidden; flex: none; }
.photoprev img { width: 100%; height: 100%; object-fit: cover; }
input[type="file"] { font-size: 14px; max-width: 200px; }

/* ---------- Voice first ---------- */
.fm { margin: -2px 0 10px; line-height: 1.35; }
.vf { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; }
.fe .field.hidden { display: none; }
.walkthru .listen { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 26px 0 18px; }
.micbig { width: 88px; height: 88px; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; border: 0; }
.micbig svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.micbig.live { background: var(--red); box-shadow: 0 0 0 10px rgba(255,60,0,0.18); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 8px rgba(255,60,0,0.16); } 50% { box-shadow: 0 0 0 18px rgba(255,60,0,0.06); } }
.tidynote { margin: 6px 0 0; min-height: 1em; }
.tidynote a { border-bottom: 1px solid var(--line); }

/* ---------- Board posts ---------- */
.lnk { border-bottom: 1px solid var(--ink); word-break: break-all; }
.postimg { width: 100%; border-radius: 8px; margin: 10px 0 4px; display: block; }
.pimg { position: relative; margin: 12px 0; }
.pimg img { width: 100%; border-radius: 8px; display: block; }
.pimg a { position: absolute; top: 8px; right: 8px; background: var(--ink); color: var(--white); padding: 4px 10px; border-radius: 999px; }
.linkcard { display: flex; gap: 12px; border: var(--hair); border-radius: 8px; overflow: hidden; margin: 12px 0 4px; background: var(--ground); align-items: stretch; }
.linkcard img { width: 110px; min-height: 90px; object-fit: cover; flex: none; }
.linkcard .lt { padding: 10px 12px; min-width: 0; }
.linkcard .lt .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linkcard .lt .t { margin: 2px 0 4px; }
.linkcard .lt p { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- The house: a cross-section ---------- */
.house { display: grid; gap: 10px; margin: 6px 0 22px; }
.house .floor { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.house .floor.street { grid-template-columns: 3fr 2fr; }
.hr { display: block; border-radius: var(--r); padding: 16px 16px 14px; min-height: 96px; position: relative; color: var(--ink); background: var(--white); border: var(--hair); }
.hr .k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 8px; opacity: 0.75; }
.hr .ans { font-family: var(--serif); font-size: 18px; line-height: 1.22; letter-spacing: -0.015em; margin: 0; }
.hr .ans.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hr .tags .tag { font-size: 13px; padding: 5px 10px; }
.hr.shut { border-style: dashed; background: transparent; }
.hr.shut .pill { display: inline-block; margin-top: 8px; }
.hr.roof { background: var(--cream); border-color: var(--cream); border-radius: 18px 18px var(--r) var(--r); }
.hr.roof .ans { font-size: 22px; }
.hr.library { background: var(--white); }
.hr.kitchen { background: var(--red); color: var(--white); border-color: var(--red); }
.hr.kitchen .muted, .hr.cellar .muted, .hr.door .muted { color: rgba(255,255,255,0.7); }
.hr.door { background: var(--ink); color: var(--white); border-color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.hr.door .photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.hr.door .pname h1 { font-size: 28px; margin: 0; color: var(--white); }
.hr.door .street { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; margin-top: 2px; }
.hr.door .ans { font-size: 16px; opacity: 0.95; }
.hr.door .plaque { margin: 4px 0 0; opacity: 0.75; font-style: italic; }
.hr.garden { background: var(--green); color: var(--white); border-color: var(--green); }
.hr.garden .tag { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); color: var(--white); }
.hr.window { background: var(--yellow); border-color: var(--yellow); min-height: 0; }
.hr.window .tag.place { background: var(--white); border-color: var(--white); }
.house .ground { border-top: 2px solid var(--ink); margin: 6px 0 0; }
.hr.cellar { background: var(--blue); color: var(--white); border-color: var(--blue); }
.hr.shut.kitchen, .hr.shut.garden, .hr.shut.cellar, .hr.shut.door { background: transparent; color: var(--ink); }
.hr.shut.roof, .hr.shut.window { background: transparent; }
.card.feed .head { height: 160px; }
@media (min-width: 900px) { .hr .ans.clamp { -webkit-line-clamp: 5; } .hr.roof .ans { font-size: 26px; } }