/*! © 2026 FXP · fxps.io — document pages, House.Rev006 (Hostinger.Manager). Loaded after house.css by Home, Resume
   and YouTube. The reference is the resume's own sheet (Hostinger.Resume Rev019); the wide layout starts at
   1200 × 760 on every document page (owner, 2026-10-14); the contents is always a vertical list (House.Rev003); the page heading is 19 px 600, the app title (House.Rev004); on wide windows only the body scrolls (House.Rev006). Do not edit a site's copy. */

:root { --gutter: 44px; }

/* ---- page ---- */
body { max-width: 900px; margin: 0 auto; padding: 34px 24px 40px; overflow-wrap: break-word; }

/* ---- running header (each page keeps its own; the banner layer shows the house top line over it) ---- */
.run { display: flex; justify-content: space-between; gap: 1em; padding-bottom: 5px; border-bottom: 1px solid var(--rule);
  font-size: 13px; font-style: italic; color: var(--muted); }

/* ---- title block ---- */
/* the page heading has the app title's style (owner, 2026-10-15: "Same font please", like "Mandelbrot set"; House.Rev004) */
h1 { margin: 34px 0 2px; font-size: 19px; font-weight: 600; line-height: 30px; }
p.sub { margin: 0; font-size: 18px; line-height: 1.4; font-style: italic; color: var(--ink-2); }
.addr, .avail { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
.avail { margin-top: 2px; }

/* ---- contents: numbered entries in the gutter ---- */
.contents { margin-top: 26px; }
.contents ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.contents li { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); align-items: baseline; counter-increment: toc; }
.contents li::before { content: counter(toc); font-size: 14px; font-weight: 600; color: var(--accent); }
.contents a { text-decoration: none; }
.contents a:hover { text-decoration: underline; }

/* ---- sections: small-caps heading under an accent rule ---- */
.body { margin-top: 34px; }
h2 { margin: 34px 0 12px; padding-top: 6px; border-top: 1px solid var(--accent); font-size: 19px; font-weight: 600;
  line-height: 1.4; letter-spacing: 0.05em; font-variant-caps: small-caps; color: var(--accent); }
section:first-child > h2 { margin-top: 0; }
.sec-no { margin-right: 0.4em; }

/* ---- clauses: the number in the gutter, the text at a reading measure ---- */
.clause { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); align-items: baseline; margin: 0 0 18px; }
.cl-no { font-size: 13px; font-weight: 600; color: var(--accent); }
.cl-body, .core { max-width: 33em; }   /* about 70 characters */
.cl-body h3 { margin: 0; font-size: inherit; font-weight: 600; line-height: inherit; }
.cl-body .when { white-space: nowrap; }
.cl-body p { margin: 0; }
.cl-body .site { color: var(--ink-2); }
.cl-body .site + p { margin-top: 0.3em; }
.core { margin: 0 0 18px; padding-left: var(--gutter); }
.core .lead, .cl-body .lead { font-style: italic; }

/* ---- sub-items (a), (b) … ---- */
ol.sub { margin: 0.3em 0 0; padding: 0; list-style: none; }
ol.sub > li { position: relative; padding-left: 2.2em; }
ol.sub > li + li { margin-top: 0.15em; }
ol.sub > li::before { position: absolute; left: 0; color: var(--ink-2); }
ol.alpha { counter-reset: alpha; }
ol.alpha > li { counter-increment: alpha; }
ol.alpha > li::before { content: "(" counter(alpha, lower-alpha) ")"; }

/* ---- side notes: after the text below 960 px, beside it from 960 px ---- */
#notes { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
#notes h3 { margin: 0 0 3px; font-size: 14px; font-weight: 600; letter-spacing: 0.05em; font-variant-caps: small-caps; color: var(--accent); }
.note { padding-left: var(--gutter); }
.note + .note { margin-top: 16px; }
#notes p, #notes ul { margin: 0; padding: 0; list-style: none; }
#notes li + li { margin-top: 2px; }

/* ---- page foot ---- */
.foot { margin-top: 48px; padding-top: 6px; border-top: 1px solid var(--rule); font-size: 13px; font-style: italic; color: var(--muted); }

@media screen and (min-width: 960px) {
  .body { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 34px; }
  #notes { align-self: start; padding-left: 14px; border-left: 1px solid var(--rule); }
  .note { padding-left: 0; }
  .notes-h { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---- wide layout, 1200 × 760 and up (every document page): larger text; only the body scrolls ----
   The top block (title, contact lines, the vertical contents list, the picture) and the side notes stay in view; only
   the body moves up and down (owner, 2026-10-15: "It was agreed that only the body shall move up and down",
   House.Rev006). --top-h is the tallest top block measured with the vertical list (YouTube 383 px, the resume 351 px,
   381 px where its title wraps beside the photo) plus a margin, the same on every page so they look alike. A page
   whose top block grows sets its own --top-h in its own sheet. */
@media screen and (min-width: 1200px) and (min-height: 760px) {
  :root { --top-h: 396px; }
  html { scroll-padding-top: var(--top-h); }
  body { max-width: 1440px; padding: 0 48px 40px; font-size: 18px; }
  .top { position: sticky; top: 0; z-index: 2; height: var(--top-h); box-sizing: border-box; padding-top: 24px;
    border-bottom: 1px solid var(--rule); background: var(--paper); }
  .top p, .top h1 { white-space: nowrap; }
  h1 { margin-top: 16px; }
  .body { grid-template-columns: minmax(0, 1fr) max-content; gap: 56px; margin-top: 0; }
  .cl-body, .core { max-width: 40em; }
  #notes { position: sticky; top: var(--top-h); max-height: calc(100vh - var(--top-h)); box-sizing: border-box;
    overflow-y: auto; padding-top: 34px; padding-bottom: 24px; }
  #notes h3, #notes li { white-space: nowrap; }
}

/* ---- phone ---- */
@media (max-width: 480px) {
  :root { --gutter: 32px; }
  body { padding: 20px 16px 32px; font-size: 16px; }
  .run-ed { display: none; }
  h1 { margin-top: 24px; }
  ol.sub > li { padding-left: 1.9em; }
}

/* ---- print (A4): black on white, no contents list, links as plain text ---- */
@page { size: A4; margin: 18mm; }
@media print {
  :root:root:root { --paper: #fff;   /* three times :root, so it beats the theme blocks of house.css */ --paper-2: #fff; --ink: #000; --ink-2: #000; --muted: #000; --accent: #000; --rule: #999; color-scheme: light; }
  body { max-width: none; padding: 0; font-size: 11pt; line-height: 1.45; }
  h1 { margin-top: 18pt; font-size: 14pt; }
  .contents { display: none; }
  a { color: inherit; text-decoration: none; }
  h2, .cl-body h3, .cl-body .site { break-after: avoid; }
  ol.sub li { break-inside: avoid; }
}