/* ── PRIVATE OFFICE — family layer ──────────────────────────────────────────
   One institution, three rooms:

     I    /intelligence               the public room   — open, editorial
     II   /private-office/access      the working room  — relational, slower
     III  /private-office/invitation  the private room  — quietest, fewest choices

   This file carries only what the three surfaces genuinely share: the room
   folio, the arrival motion, the dossier (paper-on-ink document) grammar and
   the quiet-continuation link. Everything page-specific stays in each page's
   own <style>, tokens come from global.css. This is a family stylesheet, not
   a framework.

   The privacy gradient is material, not theatrical:
     ground     I: var(--ink) hero on ivory body → II: #070605 hero, alternating
                body → III: #070605 for the entire page
     density    I: highest (editorial sections, media) → II: medium (ruled
                sequences, one image) → III: lowest (one column, two actions)
     enclosure  I: open grids → II: ledgers and rules → III: rules only        */

/* Running-head folio — the room numeral. Sits right of the hero eyebrow.
   Reads like a chapter number in a bound document: quiet proof that the three
   pages are one volume. */
.po-hero-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.po-folio{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:17px;letter-spacing:0.22em;color:rgba(184,154,106,0.85);
  white-space:nowrap;flex-shrink:0;
}
.po-folio small{
  font-family:'Didact Gothic',sans-serif;font-style:normal;
  font-size:9px;letter-spacing:0.3em;text-transform:uppercase;
  color:rgba(245,242,236,0.5);margin-right:12px;vertical-align:1px;
}

/* Arrival — the family's one motion. CSS-only so it cannot depend on
   JavaScript, `both` so browsers without animation simply show the content,
   and guarded so reduced-motion readers never see it at all. Used on hero
   inners only; nothing below the fold animates. */
@media (prefers-reduced-motion: no-preference){
  .po-arrive{animation:po-arrive 1.15s 0.1s cubic-bezier(0.22,0.61,0.36,1) both}
  @keyframes po-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
}

/* Dossier — paper on ink. The family's way of saying "a document, not a
   product": used where the work itself is being shown (Private Intelligence
   forms). One sheet per page at most. */
.po-doss{
  background:var(--paper);color:var(--ink);
  padding:0;max-width:820px;
  box-shadow:0 24px 80px rgba(0,0,0,0.5);
}
.po-doss-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:22px 40px;border-bottom:1px solid var(--rule);
}
.po-doss-head-label{
  font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--warm-grey);
}
.po-doss-head-folio{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:14px;letter-spacing:0.14em;color:var(--gold);white-space:nowrap;
}
.po-doss-row{
  display:grid;grid-template-columns:64px 200px 1fr;gap:28px;align-items:baseline;
  padding:30px 40px;border-bottom:1px solid var(--rule);
}
.po-doss-row:last-of-type{border-bottom:none}
.po-doss-num{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:24px;color:rgba(184,154,106,0.75);line-height:1;
}
.po-doss-name{
  font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;
  color:var(--ink);letter-spacing:0.02em;line-height:1.25;
}
.po-doss-text{font-size:13.5px;line-height:1.85;color:#4a4743;letter-spacing:0.02em}
.po-doss-foot{
  padding:20px 40px 24px;border-top:1px solid var(--rule);
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:15px;line-height:1.7;letter-spacing:0.04em;color:var(--warm-grey);
}

/* Quiet continuation — the family's link grammar for moving one room deeper.
   A line, not a button: underlined by a hairline that warms on hover. */
.po-continue{
  display:inline-flex;align-items:baseline;gap:14px;
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(184,154,106,0.35);padding-bottom:6px;
  transition:border-color 0.25s,color 0.25s;
}
.po-continue:hover{border-color:var(--gold)}
.po-continue::after{content:'→';font-size:13px}
.po-continue:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

@media(max-width:767px){
  .po-hero-row{flex-direction:column;align-items:flex-start;gap:14px}
  .po-doss-row{grid-template-columns:40px 1fr;gap:16px}
  .po-doss-row .po-doss-text{grid-column:2}
  .po-doss-head,.po-doss-row,.po-doss-foot{padding-left:24px;padding-right:24px}
}