/* ─────────────────────────────────────────────────────────────────────────────
   Experiment Inc — site.css
   v20260827e

   Design decisions this file implements, all recorded in
   projects/experiment-inc/website/CLAUDE.md § Visual direction:

   · Organising idea: the LAB NOTEBOOK — a record of an experiment in progress.
     Ruled grid, figure numbers, dated entries, revisions left visible.
   · Type: Literata (display) / Public Sans (body) / IBM Plex Mono (labels).
   · Neutrals do the structural work. Ink is the parent's working accent.
   · GOLD #FFD400 IS FILL ONLY. 1.43:1 on white — it can never be text, a thin
     rule under 3px, or an icon stroke. Black on gold is 13.67:1.
     Small gold text, where unavoidable, uses --gold-text #866F00.
   · Colour is TAXONOMY: gold means "Experiment Inc is speaking". Every other
     bold colour belongs to an enterprise. Murram #A15224 is Kingdom Worx.

   ⚠️ BUMP THE ?v= QUERY IN EVERY <link> AFTER EDITING THIS FILE.
      /css/* is cached 24h in _headers. Without a bump, changes are invisible
      to returning visitors — and to Clint reviewing them — for a full day.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  /* neutrals — every value contrast-checked against #FFFFFF */
  --ground:#FFFFFF;        /* now a PLATE surface, not the page default */
  --ground-2:#F6F7F8;
  --rule:#E2E5E9;
  --rule-soft:#EFF1F3;

  /* ── THE FOUR SURFACES, 08/26/26 ─────────────────────────────────────────
     Clint: "no texture or depth, no areas of background", and the ruled lines
     "so light you can't tell what they are". Both were true. The site was one
     white plane with 1px dividers. Root fix: four surfaces, not one.
       PAPER  the reading ground, ruled EDGE TO EDGE at 1.37:1 (was 1.13:1 and
              confined to the text column, which is why it read as a glitch)
       WHITE  no longer the default — reserved for plates that sit ON the paper,
              which is where depth comes from, with no shadows needed
       INK    a dark band. Gives the page a top and a bottom, divides the hero
              from the thesis, and makes gold sing at 12.8:1
       GOLD   bands and fills, as before                                      */
  --paper:#F6F6F2;
  --paper-rule:#D8D4C6;    /* 1.37:1 on paper — visible as a rule, not as haze */
  --ink-band:#14150F;      /* warm-dark, to complement gold rather than fight it */
  --on-ink:#F4F2EA;        /* 16.38:1 */
  --on-ink-quiet:#8A8778;  /*  5.09:1 */
  --quiet:#666D76;        /*  5.23:1 */
  --slate:#3F4751;        /*  9.41:1 */
  --body:#33383F;         /* 11.81:1 */
  --ink:#0B0C0E;          /* 19.57:1 */

  /* the parent's colour — FILL ONLY */
  --gold:#FFD400;
  --gold-mid:#E8BC00;
  --gold-wash:#FFF7D1;
  --gold-text:#866F00;    /*  4.86:1 on white, 4.55:1 on --ground-2. Verified on BOTH,
                             because .fig sits on plain and filled bands alike. */

  /* Kingdom Worx, for entity-scoped blocks on parent pages */
  --murram:#A15224;       /*  5.60:1 */
  --murram-wash:#FBEDE4;

  --display:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Public Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --measure:65ch;
  --gutter:clamp(20px,5vw,44px);
  --shell:1120px;
  --rhythm:28px;          /* the ruled-grid unit. line-heights key to this. */
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  /* Must equal --rhythm EXACTLY or the ruled grid drifts and the rules cut
     through the text. 17px x 1.68 = 28.56px, which drifted 5.6px over ten
     lines. Fixed 08/26/26 after seeing it rendered. */
  line-height:28px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── the ruled ground ─────────────────────────────────────────────────────────
   The notebook rule. Applied to prose columns only, never whole pages — a
   full-bleed rule reads as wallpaper and fights the type. */
/* SUPERSEDED 08/26/26 — the rule now lives on .band--paper and runs edge to
   edge. A column-scoped rule read as a striped patch behind the paragraphs
   rather than as the substrate. Kept as a no-op so old markup does not break. */
.ruled{}

/* ── the notebook spread ──────────────────────────────────────────────────────
   Prose left, marginalia in an actual margin. Added 08/26/26: the first build
   left ~55% of a 1400px viewport empty to the right of every prose column,
   which read as unfinished rather than deliberate — and it wasted the one thing
   the notebook idea is built on. Marginalia belongs in the margin. */
.notebook{
  display:grid;
  grid-template-columns:minmax(0,var(--measure)) minmax(0,25ch);
  column-gap:clamp(26px,4vw,60px);
  align-items:start;
}
.notebook__margin{min-width:0; padding-top:6px}
.notebook__margin .marg{margin-bottom:20px}
.notebook__margin .marg:last-child{margin-bottom:0}
@media (max-width:1040px){
  .notebook{grid-template-columns:1fr}
  .notebook__margin{padding-top:0}
}

/* ── layout ───────────────────────────────────────────────────────────────── */
.shell{max-width:var(--shell); margin:0 auto; padding-inline:var(--gutter)}
.col{max-width:var(--measure)}
.band{padding-block:clamp(48px,7vw,88px); border-top:1px solid var(--rule)}
.band--flush{border-top:0}
.band--fill{background:var(--ground-2)}

/* PAPER — ruled edge to edge. Padding is a multiple of --rhythm so the rules
   land between the lines of type rather than through them. */
.band--paper{
  background-color:var(--paper);
  background-image:repeating-linear-gradient(
    to bottom,transparent 0 calc(var(--rhythm) - 1px),
    var(--paper-rule) calc(var(--rhythm) - 1px) var(--rhythm));
  background-position:0 0;
  padding-block:84px;      /* 3 x 28 */
  border-top:0;
}
.band--paper + .band--paper{padding-top:0}

/* INK — the dark band. Not for sustained reading; for the hero and the close. */
.band--ink{
  background:var(--ink-band); color:var(--on-ink); border-top:0;
  padding-block:clamp(56px,9vw,120px);
}
.band--ink-compact{padding-block:clamp(40px,5vw,64px)}
.band--ink h1,.band--ink h2,.band--ink h3{color:var(--on-ink)}
.band--ink .lede{color:var(--on-ink-quiet)}
.band--ink .label{color:var(--on-ink-quiet)}
.band--ink .fig{color:var(--gold)}          /* gold on ink is 12.8:1 — safe as text HERE only */
.band--ink p{color:var(--on-ink-quiet)}
.band--ink a{color:var(--on-ink); text-decoration-color:var(--gold)}
.band--ink .marg{color:var(--on-ink-quiet); border-left-color:var(--gold)}

/* WHITE plate lifting off the paper — the depth cue, no shadow required */
.plate{background:var(--ground); border:1px solid var(--ink)}
.lift{background:var(--ground); border:1px solid var(--rule); border-radius:3px;
      padding:clamp(22px,3vw,34px)}
.stack{display:flex; flex-direction:column; gap:var(--rhythm)}
.stack--tight{gap:14px}

/* ── type ─────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--display); font-weight:600; color:var(--ink);
  margin:0; text-wrap:balance;
}
h1{font-size:clamp(31px,4.2vw,46px); line-height:1.07; letter-spacing:-0.022em}
h2{font-size:clamp(23px,2.6vw,29px); line-height:1.18; letter-spacing:-0.014em}
h3{font-size:19px; line-height:1.24; letter-spacing:-0.008em}
h4{font-size:17px; line-height:1.3; letter-spacing:-0.006em}

p{margin:0 0 var(--rhythm)}
p:last-child{margin-bottom:0}

.lede{font-size:19px; line-height:30px; color:var(--slate)}
/* ledes sit outside .ruled columns, so they need not key to the grid */
.caption{font-size:14px; line-height:1.5; color:var(--quiet)}

/* the mono voice: labels, figure numbers, dated entries, marginalia */
.label{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.10em; text-transform:uppercase; color:var(--quiet);
}
.fig{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.10em; text-transform:uppercase; color:var(--gold-text);
  display:block; margin-bottom:10px;
}
/* Marginalia — the notebook's load-bearing device. This is where a revision
   lives visibly, which is the whole reason this direction was chosen. */
.marg{
  font-family:var(--mono); font-size:13px; line-height:1.68; color:var(--quiet);
  border-left:3px solid var(--gold);   /* 3px minimum — gold as fill, not a hairline */
  padding-left:14px; margin:0 0 var(--rhythm);
}
.marg s{opacity:0.6; text-decoration-thickness:1px}

/* ── links: ink, underlined. Gold never carries a link. ───────────────────── */
a{color:var(--ink); text-decoration-line:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:var(--quiet)}
a:hover{text-decoration-color:var(--ink); text-decoration-thickness:2px}
a:focus-visible{outline:3px solid var(--gold); outline-offset:2px; text-decoration:none}

/* a forward link, the site's recurring "→" gateway */
.onward{
  font-family:var(--sans); font-weight:600; font-size:16px;
  display:inline-flex; align-items:baseline; gap:8px;
  text-decoration-color:var(--ink);
}
.onward .arw{font-family:var(--mono); transition:transform .18s ease}
.onward:hover .arw{transform:translateX(3px)}

/* ── gold, used only as a surface ─────────────────────────────────────────── */
.mark-hl{background:var(--gold); color:var(--ink); padding:1px 5px; border-radius:2px}
.bar{height:5px; background:var(--gold); border-radius:2px; width:132px}
.btn{
  display:inline-block; font-family:var(--sans); font-weight:600; font-size:16px;
  background:var(--gold); color:var(--ink); padding:13px 22px; border-radius:3px;
  text-decoration:none; border:2px solid transparent;
}
.btn:hover{background:var(--gold-mid); text-decoration:none}
.btn:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
.wash{background:var(--gold-wash); border-radius:3px; padding:clamp(20px,3vw,30px)}

/* ── the mark ─────────────────────────────────────────────────────────────── */
.mark{width:34px; height:34px; display:block; flex:none; color:var(--ink)}
.mark--disc{
  width:42px; height:42px; border-radius:50%; background:var(--gold);
  display:grid; place-items:center; flex:none;
}
.mark--disc svg{width:27px; height:27px; color:var(--ink)}

/* ── header ───────────────────────────────────────────────────────────────── */
.site-head{border-bottom:1px solid var(--rule)}
.site-head__in{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding-block:18px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand:hover{text-decoration:none}
.brand__name{font-family:var(--display); font-size:20px; font-weight:400; color:var(--ink); letter-spacing:-0.01em}
/* 400, not 600: the mark's stroke is ~1.6px at this size and Literata 600's stem is
   2.65px, so a semibold name reads a third heavier than the logo beside it. At 400 the
   stem is 1.86px and the two match. Changed 08/27/26 with the real mark. */
.nav{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}
.nav a{
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--quiet); text-decoration:none; padding-block:4px;
}
.nav a:hover,.nav a[aria-current]{color:var(--ink); box-shadow:inset 0 -3px 0 var(--gold)}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(52px,8vw,104px)}
.hero h1{max-width:22ch}
.hero .lede{max-width:52ch; margin-top:22px}

/* ── the Separation ↔ Connection contrast ────────────────────────────────────
   Locked layout for the Worldview page. The two columns differ by SATURATION,
   never by lightness — an earlier attempt made the Separation column literally
   harder to read, which editorialises through legibility. Both columns use the
   same body colour; the chips carry the distinction. */
.contrast{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:3px; overflow:hidden}
.contrast>div{background:var(--ground); padding:clamp(20px,3vw,30px)}
.contrast p{font-size:16px; margin-bottom:18px}
.chip{
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:0.10em; text-transform:uppercase; padding:5px 11px;
  border-radius:2px; margin-bottom:16px;
}
.chip--sep{background:var(--slate); color:#FFFFFF}
.chip--con{background:var(--gold); color:var(--ink)}
.contrast__note{font-family:var(--mono); font-size:12px; color:var(--quiet); margin-top:4px}
@media (max-width:760px){ .contrast{grid-template-columns:1fr} }

/* ── the entity block: Kingdom Worx on a parent page ─────────────────────────
   Murram appears ONLY inside a block scoped to the enterprise. That is what
   makes colour mean "a specific enterprise is speaking". */
.entity{
  border:1px solid var(--rule); border-left:5px solid var(--murram);
  border-radius:0 3px 3px 0; padding:clamp(22px,3.4vw,34px); background:var(--ground);
}
.entity__where{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--murram); display:block; margin-bottom:9px}
.entity h2{margin-bottom:16px}
.entity .onward{text-decoration-color:var(--murram)}

/* ── the avenues list ─────────────────────────────────────────────────────── */
.avenues{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:3px; overflow:hidden}
.avenue{background:var(--ground); padding:26px 22px 26px; display:flex; flex-direction:column}
.avenue h3{margin-bottom:9px}
.avenue p{font-size:15px; line-height:1.6; margin-bottom:16px}
.avenue .onward{font-size:15px; margin-top:auto}
.avenue:hover{box-shadow:inset 0 -4px 0 var(--gold)}
.avenue--lead:hover{box-shadow:inset 0 5px 0 var(--gold), inset 0 -4px 0 var(--gold)}

/* ── footer ───────────────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--rule); margin-top:clamp(56px,8vw,96px);
  padding-block:40px 52px; background:var(--ground-2)}
.site-foot p{font-size:14px; color:var(--quiet); margin-bottom:12px}
.site-foot .label{display:block; margin-bottom:14px}


/* ═════════════════════════════════════════════════════════════════════════════
   SET PIECES — added 08/26/26 after Clint saw the first build and said, fairly,
   that it was "too clean". The system was sound; the page had nothing on it but
   paragraphs and hairlines. These are the notebook's own devices, finally used:
   a struck stamp, real figures under the figure numbers, plates, and gold at a
   scale you can actually see.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── the stamp: the mark struck onto the page, not an icon in a header ─────── */
.stamp{
  width:clamp(96px,11vw,148px); height:clamp(96px,11vw,148px);
  color:var(--gold); transform:rotate(-11deg); flex:none;
}
.stamp--ink{color:var(--ink); opacity:.09; transform:rotate(9deg)}
.stamp--sm{width:64px; height:64px; transform:rotate(-8deg)}

/* ── the pull quote: the thesis line, at the size a thesis deserves ───────── */
.pull{
  font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:clamp(26px,3.6vw,40px); line-height:1.14; letter-spacing:-0.02em;
  max-width:28ch; margin:0;
}
.pull em{font-style:normal; background:var(--gold); padding:0 8px; border-radius:2px}
.pull-block{
  display:flex; gap:clamp(22px,4vw,52px); align-items:center; flex-wrap:wrap;
  border-block:3px solid var(--gold); padding-block:clamp(30px,4vw,46px);
}
/* the thesis line, on gold, full bleed — gold used at a scale you can see */
.band--gold{background:var(--gold); border-top:0; padding-block:clamp(44px,6vw,84px)}
.band--gold .pull{max-width:34ch}
.band--gold .pull em{background:var(--ink); color:var(--gold); padding:0 10px}
.band--gold .label{color:#6B5A00}
.band--gold .stamp{color:var(--ink); opacity:1}

/* ── plates: a bordered figure with a caption, the way a notebook holds one ── */
.plate{border:1px solid var(--ink); border-radius:3px; background:var(--ground)}
.plate__body{padding:clamp(22px,3vw,34px)}
.plate__cap{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--quiet);
  border-top:1px solid var(--rule); padding:11px 16px; background:var(--ground-2);
}

/* ── the numbers, set as display objects — this is what "human numbers" means */
.figures{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:1px; background:var(--rule);
}
.figures>div{background:var(--ground); padding:20px 18px 22px}
.figures b{
  display:block; font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:clamp(38px,5vw,58px); line-height:1; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums; margin-bottom:9px;
}
.figures span{
  display:block; font-family:var(--sans); font-size:13.5px; line-height:1.42;
  color:var(--quiet);
}
.figures>div:first-child b{box-shadow:inset 0 -12px 0 var(--gold)}

/* ── the ownership flow: an abstract claim, drawn ─────────────────────────── */
.flow{display:flex; align-items:stretch; gap:0; flex-wrap:wrap}
.flow__node{
  flex:1 1 168px; border:1px solid var(--rule); padding:17px 18px 19px;
  background:var(--ground); min-width:0;
}
.flow__node--own{border-color:var(--ink); border-width:2px}
.flow__node b{
  display:block; font-family:var(--display); font-size:16px; font-weight:600;
  color:var(--ink); margin-bottom:6px; letter-spacing:-0.008em;
}
.flow__node span{font-size:13px; line-height:1.45; color:var(--quiet)}
.flow__arrow{
  flex:0 0 42px; display:grid; place-items:center;
  font-family:var(--mono); font-size:17px; color:var(--ink);
}
.flow__return{
  margin-top:14px; padding:11px 16px; background:var(--gold);
  border-radius:2px; font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.04em; color:var(--ink);
}
@media (max-width:720px){
  .flow{flex-direction:column}
  .flow__arrow{flex:0 0 30px; transform:rotate(90deg)}
}

/* ── dividers with a marker, instead of a bare hairline ──────────────────── */
.band--marked{position:relative}
.band--marked::before{
  content:""; position:absolute; top:-3px; left:0; width:88px; height:5px;
  background:var(--gold); border-radius:0 0 2px 2px;
}

/* ── a full-bleed gold rule, for rhythm between pillars ─────────────────── */
.rule-band{height:8px; background:var(--gold)}

/* ── a lead cell, for the avenue Clint expects to carry the most weight ──── */
/* Clint 08/26/26: the soft yellow wash "doesn't look great". Replaced with a
   gold top rule and heavier type — weight without tinting the card. */
.avenue--lead{box-shadow:inset 0 5px 0 var(--gold)}
.avenue--lead h3{font-size:22px}


/* ═════════════════════════════════════════════════════════════════════════════
   PHOTOGRAPHY + THE REAL MARK — 08/27/26
   The logo stand-in is gone. The site now uses the FINAL-X5 package:
   dist/brand/wordmark.svg in the header, dist/brand/mark.svg as the symbol.
   Both are -currentcolor, so they take the colour of whatever they sit on —
   which is why the same file works on paper, on ink and on gold.
   Per the brand README: a GOLD logo is not an option. Gold is a fill; the mark
   sits on gold, it is never drawn in it.
   ═════════════════════════════════════════════════════════════════════════════ */

img{max-width:100%; height:auto; display:block}

/* the wordmark in the header — height-driven, aspect preserved */
.wordmark-svg{height:30px; width:auto; display:block; color:var(--ink); flex:none}
.band--ink .wordmark-svg,.site-head--ink .wordmark-svg{color:var(--on-ink)}
@media (max-width:560px){.wordmark-svg{height:24px}}

/* ── a full-bleed photograph with type over its empty half ───────────────── */
.photo-band{position:relative; overflow:hidden; background:var(--paper)}
.photo-band img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center bottom;
}
/* a whisper of a scrim at the top only, so type never depends on the photo
   staying pale where the words are. 1.5% is invisible; it is insurance. */
.photo-band::before{
  content:""; position:absolute; inset:0 0 auto 0; height:62%;
  background:linear-gradient(to bottom,rgba(246,246,242,.72),rgba(246,246,242,0));
  pointer-events:none;
}
.photo-band__in{z-index:1}
.photo-band__in{
  position:relative;
  padding-top:clamp(52px,7vw,96px);
  /* the objects occupy roughly the bottom third of the frame — clear it */
  padding-bottom:clamp(200px,30vw,420px);
}
.photo-band__copy{max-width:44ch}
.photo-band h2{color:var(--ink)}
.photo-band .label{color:var(--quiet)}
.photo-band p{color:var(--body)}

/* ── the photographic hero ───────────────────────────────────────────────────
   there-is-enough.jpg is lit on the RIGHT and in deep shadow on the LEFT, so
   the type lives left and needs no scrim at all — the photograph already is
   the scrim. object-position keeps the lit handwriting in frame as the viewport
   narrows; below 900px the image drops behind at low opacity so the words win. */
.hero-photo{position:relative; overflow:hidden; background:var(--ink-band)}
.hero-photo > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:86% center;
}
.hero-photo__in{position:relative; z-index:1; padding-block:clamp(64px,10vw,132px)}
.hero-photo__copy{max-width:34ch}
@media (max-width:900px){
  .hero-photo > img{opacity:.34; object-position:center}
}

/* ── an image inside the ink hero ────────────────────────────────────────── */
.hero__media{
  border-radius:3px; overflow:hidden; border:1px solid rgba(244,242,234,.16);
  align-self:center;
}
.hero__media img{width:100%; height:auto}

/* ── a photograph as a plate, with a caption, like a figure ──────────────── */
.figplate{border:1px solid var(--rule); border-radius:3px; overflow:hidden; background:var(--ground)}
.figplate img{width:100%; height:auto}
.figplate__cap{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--quiet);
  border-top:1px solid var(--rule); padding:11px 16px; background:var(--ground-2);
}
.band--ink .figplate{border-color:rgba(244,242,234,.18); background:transparent}
.band--ink .figplate__cap{background:transparent; border-top-color:rgba(244,242,234,.18); color:var(--on-ink-quiet)}

/* the hero grid, once it carries an image */
.hero-split{display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:900px){.hero-split{grid-template-columns:1fr}}

/* ── a11y & motion ────────────────────────────────────────────────────────── */
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--gutter); top:10px; z-index:9; background:var(--gold); color:var(--ink);
  padding:11px 18px; border-radius:3px; text-decoration:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
}

/* ── print: the notebook, printed ─────────────────────────────────────────── */
@media print{
  .site-head,.site-foot,.nav{display:none}
  body{font-size:11pt; color:#000}
  .ruled{background-image:none}
  a{text-decoration:none; color:#000}
  .band{border-top:1px solid #999; padding-block:18pt}
}