/* 2p.com.au - the 2P document system, set for the web.
   Palette taken from the 2P Document System artifact. Plain by intent: real
   rules instead of shadows, photographs at their own size, nothing that moves.
   Single theme, like the printed documents it matches.

   TYPOGRAPHY CHANGED 2026-09-01. The body face was an Iowan/Palatino old-style
   serif, matching the printed documents. It is now Roboto, self-hosted (see
   fonts.css), on owner direction, following tools.2p.com.au there so the two
   sites stay matched. Worth knowing that this is now the one place the web
   presence and the printed 2P documents deliberately disagree. */

:root {
  color-scheme: light;

  /* --- the ladder, anchored on 2P Blue = rgb(24, 90, 198) --- */
  --blue:      #185AC6;
  --blue-d:    #12428F;
  --blue-dd:   #0D295C;
  --azure:     #0a6bff;

  --ink:       #1b1d29;
  --ink-soft:  #4a4f63;
  --muted:     #6b7089;
  --rule:      #bcc0d2;
  --rule-soft: #e4e6ef;
  --tint:      #E8EEF9;
  --tint-soft: #F4F7FC;
  --paper:     #ffffff;

  /* One UI face, as on tools.2p.com.au. --serif and --sans are gone rather
     than repointed: two variable names claiming a distinction the design no
     longer makes is how a stylesheet starts lying about itself. Fallbacks are
     real faces, not a bare sans-serif, because first paint happens before a
     42 KB download lands. */
  --ui:   Roboto, "Helvetica Neue", Arial, "Liberation Sans", system-ui, sans-serif;

  /* Kept as Courier, owner direction 2026-09-01. It sets the client eyebrow on
     each work entry, which is a label rather than running prose. */
  --mono: "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.62 var(--ui);   /* 16.5 under the old serif: see the note above */
}

.page { max-width: 730px; margin: 0 auto; padding: 0 20px 70px; }

a       { color: var(--blue); }
a:hover { color: var(--azure); }

/* ---------- masthead ---------- */
.masthead { border-bottom: 2px solid var(--blue); margin-bottom: 26px; padding: 30px 0 12px; }
.masthead h1 { font-size: 26px; margin: 0 0 3px; letter-spacing: -.01em; color: var(--blue); }
.masthead h1 a { color: var(--blue); text-decoration: none; }
.masthead .sub { font-size: 15px; color: var(--muted); font-style: italic; margin: 0 0 12px; }
.masthead nav { font-family: var(--ui); font-size: 13px; }
.masthead nav a { margin-right: 4px; }
.masthead nav span { color: var(--rule); margin-right: 4px; }

/* ---------- structure ---------- */
/* The rule sits ABOVE the heading and IS the section separator, in 2P blue to
   match the 2px blue rules that already bracket the masthead and the footer.
   The space above the rule is deliberately larger than the space below it, so
   the rule reads as opening its own section rather than floating between two. */
h2 {
  font-size: 19px;
  color: var(--blue);
  margin: 56px 0 15px;
  padding-top: 15px;
  border-top: 1px solid var(--blue);
}

/* Alternating sections, tinted with --tint-soft (already in the palette, so
   this introduces no new colour). The tint has to run edge to edge or it reads
   as a card, and .sec lives inside the 730px column -- hence the huge shadow
   spread, clipped back to the section's own height. Deliberately subtle: it
   should be invisible unless looked for. */
.sec { padding: 2px 0 30px; }
.sec.alt {
  background: var(--tint-soft);
  box-shadow: 0 0 0 100vmax var(--tint-soft);
  clip-path: inset(0 -100vmax);
}
.sec.alt h2 { margin-top: 46px; }
h3 { font-size: 16.5px; margin: 28px 0 4px; color: var(--blue-dd); }
p  { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 6px; }
.lead { font-size: 17px; }

/* ---------- photographs ---------- */
figure { margin: 20px 0 22px; }
figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule);
  padding: 4px;                 /* the old photo-frame look, on purpose */
  background: var(--paper);
}
figcaption {
  font-family: var(--ui);
  font-size: 12px; line-height: 1.55;
  color: var(--muted);
  margin-top: 7px;
}
.pair { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.pair figure { flex: 1 1 300px; margin: 20px 0 6px; }
/* One portrait beside one landscape leaves the captions on different lines
   and the row looking broken. Crop both to a common box. */
.pair figure img { height: 215px; object-fit: cover; }

/* ---------- work entries ---------- */
.work { margin: 0 0 36px; }
.work .who {
  font-family: var(--mono);
  font-size: 12px; font-weight: bold;
  color: var(--azure);
  margin: 0 0 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.work .who.anon { color: var(--muted); font-weight: normal; font-style: normal; }

/* ---------- odds ---------- */
.note {
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--azure);
  background: var(--tint-soft);
  padding: 13px 16px;
  margin: 0 0 20px;
  font-size: 15px;
}
.note p:last-child { margin-bottom: 0; }

a.fn {
  font-family: var(--ui); font-size: 10px; font-weight: bold;
  vertical-align: super; line-height: 0; margin-left: 1px;
  text-decoration: none; padding: 0 1px;
}
.notes {
  border-top: 1px solid var(--rule); margin: 34px 0 0; padding: 12px 0 0;
}
.notes p {
  font-family: var(--ui); font-size: 12.5px; line-height: 1.65;
  color: var(--muted); margin: 0;
}
.notes a { color: var(--muted); }

table.plain { border-collapse: collapse; font-size: 14.5px; margin: 0 0 18px; width: 100%; }
table.plain th, table.plain td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 7px 10px 7px 0; text-align: left; vertical-align: top;
}
table.plain th { width: 34%; font-weight: bold; color: var(--ink-soft); }

.footer {
  border-top: 2px solid var(--blue);
  margin-top: 48px;
  padding-top: 16px;
  font-family: var(--ui);
  font-size: 12.5px; line-height: 1.7;
  color: var(--muted);
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .pair { display: block; }
}