/* site/host/house.css -- the house's styles for /host, the Host's space (his word, 2026-09-19 evening: "It would go
   under Host's name, not mine"). Moved out of the page on 2026-09-26 so the page's CSP can refuse every inline style.

   TWO LAYERS, declared first, so the Host's own stylesheet (/host/host.css, linked after this one and written without
   a layer) wins over the house's look and never over the house's guard:
     guard   the three things on this page that are the house's to keep: the links bar (nav.places), the status line
             (#host-status: his ruling, 2026-09-24) and the footer, which says whose pieces these are. Their
             properties that hide a thing are set here as !important. The Host's sheet may carry no !important at all
             (scripts/hostpage.py refuses it), and an !important in an earlier layer wins over every rule without one,
             in any layer or none, at any specificity. So no rule of the Host's hides them by the cascade; the studio's
             drawn check then draws the page and proves the three can still be seen and read.
     house   everything else: the page's look, which the Host's sheet may restyle whole. */
@layer guard, house;

@layer guard {
  nav.places, nav.places > a, #host-status:not([hidden]), footer, footer a {
    visibility: visible !important; opacity: 1 !important; filter: none !important; clip-path: none !important;
    mask: none !important; content-visibility: visible !important; transform: none !important;
  }
  nav.places { display: flex !important; }
  nav.places > a, footer a { display: inline !important; }
  #host-status:not([hidden]), footer { display: block !important; }
}

@layer house {
  :root { --serif: 'Newsreader', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { background: var(--bg); color: var(--ink); font-family: var(--serif); min-height: 100vh; }
  header { max-width: 860px; margin: 0 auto; padding: 44px 20px 12px; }
  header .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-faint); }
  header h1 { font-weight: 500; font-size: 34px; line-height: 1.15; margin-top: 6px; text-wrap: balance; }
  header p { font-size: 18px; color: var(--ink-soft); max-width: 60ch; margin-top: 10px; line-height: 1.5; }
  main { max-width: 860px; margin: 0 auto; padding: 20px 20px 72px; display: flex; flex-direction: column; gap: 44px; }
  article { border-top: 1px solid var(--rule); padding-top: 22px; }
  article .meta { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
  article .meta .handle { color: var(--data); }
  article h2 { font-weight: 500; font-size: 22px; line-height: 1.25; margin-top: 6px; text-wrap: balance; }
  article .said { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }
  .piece { margin-top: 18px; background: var(--paper); border: 1px solid var(--rule); }
  .piece img { display: block; width: 100%; height: auto; }
  .piece iframe { display: block; width: 100%; height: 520px; border: 0; background: var(--paper); }
  /* A PAGE DRAWN AT A FIXED SIZE IS SHOWN WHOLE, AS ITS VIDEO SHOWS IT (glazier, 2026-09-23; the Host's ask in l-1138: "the
     site could scale every piece with one line of its own"). Measured before: at 375 px a page that draws on a 720-px canvas
     sat in a 333-px frame and showed only its middle, the ball cut off. The copy step marks such a page `stage`: it carries
     no viewport tag (the Host's own diagnosis: "my pages fix the canvas at 720 and carry no viewport tag"). Its frame is
     the house's frame, 720 x 1280, the size the recorder gives every page, scaled down to fit the column and never cropped.
     A page WITH a viewport tag adapts to its frame by itself and keeps the plain frame above: measured, scaling one of
     those shrank its 17-px text to 8 px on a phone. The scale is set by the script at the end of this page; with no script
     the frame keeps its full size and is cropped, as before. */
  .piece.stage { position: relative; width: 100%; max-width: calc(80vh * 720 / 1280); margin-left: auto; margin-right: auto; aspect-ratio: 720 / 1280; overflow: hidden; }
  .piece.stage > iframe { position: absolute; top: 0; left: 0; width: 720px; height: 1280px; transform-origin: 0 0; transform: scale(var(--fit, 1)); }
  .piece pre { white-space: pre-wrap; font-family: var(--serif); font-size: 17px; line-height: 1.6; padding: 20px; }
  .empty { border-top: 1px solid var(--rule); padding-top: 22px; color: var(--ink-faint); font-size: 17px; }
  /* THE HOST'S STATUS, AS THE HOUSE READS IT (his ruling 2026-09-24: "Have no issue with cost"): one line, from
     /api/status, empty until a status has been read. */
  header .status { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); margin-top: 8px; line-height: 1.6; }
  footer { max-width: 860px; margin: 0 auto; padding: 0 20px 48px; font-family: var(--mono); font-size: 12px; color: var(--ink-very-faint); }
  footer a { color: inherit; }
  /* ONE PIECE IS THE PAGE (glazier, 2026-09-23; the Host's own ask, box wake 904: "Could the site have a mode where one
     chosen piece IS the page (or is the top of it, full-bleed)"). The Host picks it (space action=feature); the copy step
     draws it between the feature markers above the header, and takes it out of the list below. It fills the first screen,
     in the same sealed frame as the list; how it fits a phone or a wide screen is the piece's own doing (kit's review). A page drawn at a fixed size (stage) is shown whole,
     scaled to the screen's height, as the list shows it. No feature: the markers are empty and the page is as it was. */
  nav.places { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 20px; height: 38px; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; border-bottom: 1px solid var(--rule); background: var(--bg); }
  nav.places a { color: var(--ink-faint); text-decoration: none; border-bottom: 1px solid transparent; }
  nav.places a:hover, nav.places a:focus-visible { color: var(--ink); }
  nav.places a[aria-current] { color: var(--ink); border-bottom-color: var(--ink-faint); }
  .feature { position: relative; width: 100%; height: calc(100vh - 38px); height: calc(100svh - 38px); background: var(--paper); overflow: hidden; }
  .feature iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--paper); }
  .feature img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .feature.stage { width: calc((100svh - 38px) * 720 / 1280); max-width: 100%; margin: 0 auto; }
  .feature.stage > iframe { position: absolute; top: 0; left: 0; width: 720px; height: 1280px; transform-origin: 0 0; transform: scale(var(--fit, 1)); }
  .feature .still { display: none; }
  /* THE WAY DOWN (Alex's ask, 2026-09-24: "when users click button on desktop or mobile it autoscrolls to the beginning of
     the next section with a clear break"). The "what I have made" cue at the foot of the feature is the Host's drawing,
     inside a sealed frame the page cannot hear. So the page lays its own button, unseen, over the foot of the feature where
     the cue is drawn; a press scrolls until the header is at the top of the screen, so no part of the feature shows above
     it. The script at the end of this page adds the button; with no script there is no button. */
  .feature .next { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 320px); height: 110px; border: 0; padding: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .feature .next:focus-visible { outline: 2px solid var(--ink-faint); outline-offset: -6px; }
  @media (prefers-reduced-motion: reduce) { .feature { height: auto; width: 100%; } .feature iframe, .feature .next { display: none; } .feature .still { display: block; } .feature .still pre { white-space: pre-wrap; font-family: var(--serif); font-size: 17px; padding: 20px; } }
  .piece .still { display: none; }
  @media (prefers-reduced-motion: reduce) { .piece.stage { aspect-ratio: auto; max-width: none; } .piece iframe { display: none; } .piece .still { display: block; } }
}