/* Fenny Compton Water Company Limited (The)
   Palette, scale and layout per DESIGN_BRIEF.md.
   Six colour values, no seventh. No accent colour anywhere. */

:root {
  --paper:     #FFFFFF;
  --ink:       #000000;
  --ink-body:  #2E2E2E;
  --ink-quiet: #6B6B6B;
  --rule:      #DCDCDC;
  --focus:     #000000;

  --display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --text:    'Libre Caslon Text', Georgia, 'Times New Roman', serif;

  /* Type scale — 1.333 from a 19px body */
  --t-display: clamp(2rem, 8vw, 6rem);  /* home page display */
  --t-page:    2.75rem;                 /* page heading */
  --t-section: 1.75rem;                 /* section heading */
  --t-body:    1.1875rem;               /* body */
  --t-nav:     1.0625rem;               /* navigation */
  --t-small:   0.9375rem;               /* small print */

  /* Spacing scale — the large end is used freely */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6rem;
  --s7: 9rem;
  --s8: 13rem;

  --gutter:  clamp(1.5rem, 5vw, 3rem);
  /* ~68 characters: 34em at the 19px body size, fixed in rem so that every
     column lines up regardless of the font-size of the element it sits on. */
  --measure: 40.375rem;
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--text);
  font-size: var(--t-body);
  /* So the footer settles at the bottom on a page whose content does not fill
     the viewport — the contact page. Without it that page's footer floats into
     the middle of the screen and the page reads as unfinished rather than as
     intentionally short (DESIGN_BRIEF.md §6). No effect where content fills. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.65;
  font-weight: 400;
  font-synthesis-weight: none;   /* never synthesise a weight we do not have */
  text-rendering: optimizeLegibility;
}

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

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* ---------- structure ---------- */

body > main { flex: 1 0 auto; }


.page   { padding-inline: var(--gutter); }
.column { max-width: var(--measure); margin-inline: auto; }
.wide   { max-width: 72rem; margin-inline: auto; }

/* ---------- masthead ----------
   The company name in the same place on every page is what makes four
   separate pages read as one site. The nav sits beside it.

   The medium rule beneath it (§6) is a border on .masthead-inner rather than
   on <header>, which is full width — a border there would be full-bleed and
   would not align with the footer colophon rule. */

.masthead { padding-top: var(--s4); }

.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 2px solid var(--ink);
}

.masthead-name {
  font-size: clamp(0.6875rem, 2.7vw, var(--t-small));
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}

/* The tap engraving as a small mark before the name. Sized in em so it stays
   at twice the wordmark, and set on the baseline rather than in a flex row so
   the nav opposite still aligns to the wordmark's baseline. */
.masthead-mark {
  display: inline-block;
  height: 2em;
  width: auto;
  vertical-align: -0.67em;
  margin-right: 0.75em;
}

/* The rule underlines the words, not the mark. */
.masthead-name:hover .masthead-word,
.masthead-name:focus-visible .masthead-word { text-decoration: underline; }

/* Below this width the name and the nav are already on separate lines, so the
   lockup can become a row: the mark stands beside the name instead of sitting
   in the first line of it, and a wrapped "LTD" keeps to the text column. */
@media (max-width: 46rem) {
  .masthead-name {
    display: flex;
    align-items: center;
    gap: 0.75em;
  }
  .masthead-mark { vertical-align: baseline; margin-right: 0; }
}

/* The nav and the two contact marks travel together as one right-hand group,
   so .masthead-inner still distributes as two items and the nav stays where it
   was. Keeping them out of <nav aria-label="Pages"> matters: they are actions,
   not pages. */
.masthead-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) clamp(var(--s3), 3vw, var(--s4));
}

/* Phone and email, above the fold on every page. The footer carries them too,
   but that needs a scroll, and a household whose water has stopped should not
   have to. A hairline separates them from the page links — they are a
   different kind of thing. */
.masthead-quick {
  display: flex;
  align-items: center;
  gap: var(--s1);
  border-left: 1px solid var(--rule);
  padding-left: clamp(var(--s2), 2vw, var(--s3));
}

/* Padding takes the hit area to roughly 44px; the negative margin keeps it
   from adding height to the masthead row. */
.masthead-quick a {
  display: inline-block;
  padding: 0.8rem;
  margin-block: -0.8rem;
  line-height: 0;
  color: var(--ink-body);
}

.masthead-quick a:hover,
.masthead-quick a:focus-visible { color: var(--ink); }

/* stroke="currentColor" on the icons, so they follow the link colour. */
.masthead-quick svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

/* Stacked, the hairline would be separating two lines rather than two groups. */
@media (max-width: 46rem) {
  .masthead-quick { border-left: 0; padding-left: 0; }
}

.masthead-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--t-nav);
  line-height: 1.5;
  /* tightens on a phone so all four sit on one line, opens up on a laptop */
  gap: var(--s2) clamp(var(--s3), 3vw, var(--s4));
}

.masthead-nav a { color: var(--ink-body); text-decoration: none; }
.masthead-nav a:hover, .masthead-nav a:focus-visible { text-decoration: underline; }

.masthead-nav [aria-current="page"] { color: var(--ink); font-weight: 700; }

/* ---------- headings and prose ---------- */

.page-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-page);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--s5);
}

.prose h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-section);
  line-height: 1.25;
  color: var(--ink);
  margin: var(--s6) 0 var(--s3);
}

.prose > h2:first-child { margin-top: 0; }

.prose p {
  margin: 0 0 var(--s3);
  max-width: var(--measure);
}

/* Source extracts — set apart by indent and italic. No drawn quotation marks. */
blockquote {
  margin: var(--s5) 0 var(--s5) clamp(1rem, 4vw, 2.5rem);
  font-style: italic;
  max-width: var(--measure);
}

blockquote p { margin: 0; }

blockquote.has-credit { margin-bottom: var(--s3); }

.attribution {
  margin: 0 0 var(--s5) clamp(1rem, 4vw, 2.5rem);
  color: var(--ink-quiet);
  font-size: var(--t-small);
  max-width: var(--measure);
}

/* ---------- home ---------- */

/* The splash is held to a plate rather than run full bleed. At 100vw a 3:2
   photograph stands taller than the viewport, which stops it reading as a
   photograph at all. Held here it can be seen whole, with white either side
   and no crop — the file is used exactly as it is. */
.splash { margin: var(--s7) 0 0; }
.splash-plate { max-width: 60rem; margin-inline: auto; }
.splash-plate img { width: 100%; }

.home-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.1;
  letter-spacing: 0.06em;
  margin: 0 0 0 0.06em;   /* offsets the trailing letterspace so it centres true */
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}

/* Flanked by two short rules. This is an ornament marking one line of type,
   not a section divider — the three weights in DESIGN_BRIEF.md §6 do not
   apply to it, and it appears once on the site. The flex centring sits the
   rules on the optical middle of the line. */
.home-est {
  margin: var(--s4) 0 0;
  font-family: var(--display);
  font-size: 1.375rem;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
}

.home-est::before,
.home-est::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--ink);
}

/* The one place body text is centred. DESIGN_BRIEF.md §6 forbids it, and that
   clause holds everywhere else — it is aimed at the History page's continuous
   prose, where a ragged left edge costs real reading comfort. Three lines in a
   centred composition under a centred display heading is a title block.

   text-wrap: balance is what makes it work. The natural rag leaves a short
   third line, which floats when centred; balancing evens the three. Browsers
   without support fall back to the normal rag, still centred. */
.home-intro {
  max-width: var(--measure);
  margin: var(--s6) auto 0;
  text-align: center;
  text-wrap: balance;
}

/* The engraving and the three ways onward are one block, not two objects.
   Alone in the middle of the page the engraving has nothing to hold it;
   opposite the links it has a counterweight and the measure is filled. */
.home-pair {
  margin-top: var(--s6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5) var(--s6);
  align-items: center;
}

/* DESIGN_BRIEF.md §6: the engraving is where the boldness is spent. */
.engraving {
  width: 100%;
  max-width: 30rem;
  margin: 0 0 0 auto;
}

/* Divided down the middle rather than cut off above. No horizontal rule
   under the photograph: its own bottom edge is already the boundary, and a
   72rem rule beneath a 60rem plate aligns with nothing visible. Below the
   breakpoint the columns stack and the space does the job. */
@media (min-width: 60rem) {
  .home-pair-links {
    border-left: 1px solid var(--rule);
    padding-left: var(--s5);
  }
}

.home-pair-links > * + * { margin-top: var(--s4); }

.home-link {
  display: block;
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}

.home-link:hover, .home-link:focus-visible { text-decoration: underline; }

.home-teaser {
  margin: var(--s1) 0 0;
  max-width: 22rem;
  font-size: var(--t-small);
  color: var(--ink-quiet);
}

/* The pair holds its two columns at every width — the engraving stays beside
   the links rather than dropping below them. It gives up width to the text as
   the screen narrows, and the link sizes step down with it. Desktop is
   untouched: none of this applies above 52rem. */
@media (max-width: 52rem) {
  .home-pair {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--s4) var(--s3);
    margin-top: var(--s6);
  }
  .home-pair-links > * + * { margin-top: var(--s3); }
  .home-link { font-size: 1.375rem; }
  .home-teaser { font-size: 0.875rem; }
}

@media (max-width: 26rem) {
  .home-pair { gap: var(--s3) var(--s2); }
  .home-link { font-size: 1.1875rem; }
  .home-teaser { font-size: 0.8125rem; }
}

/* ---------- archive ---------- */

.archive-intro { max-width: var(--measure); margin: 0; }

.group { margin-top: var(--s6); }

/* A light hairline between the groups — four joints across five groups. At
   medium weight that would be far too much rule for one page, and a uniform
   hairline everywhere is what DESIGN_BRIEF.md §3 warns against; but these are
   peer sections in a list rather than turns in an argument, which is what the
   light weight in §6 is for.

   72rem, the width of the grid each rule divides — the same principle the
   history page settled on. The first group takes none: the intro above it is
   already a boundary. */
.group + .group {
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
  margin-top: var(--s5);
}

.group h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-section);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

/* Even cells so that a group of two reads as deliberate rather than as a
   broken column, and so rows line up. The photographs are fitted, never
   cropped — a portrait simply sits narrower in its cell, on white. */
.grid {
  display: grid;
  /* min() so the track can fall below 300px on a narrow phone rather than
     forcing the page wider than the screen */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--s4);
  margin-top: var(--s4);
}

.grid > a { display: block; cursor: zoom-in; }

.grid img {
  width: 100%;
  aspect-ratio: 4 / 3;   /* close to the set's dominant shape, so little sits idle */
  object-fit: contain;
  object-position: center;
}

/* Enlarged view. White ground, like a print on a wall. */
.viewer {
  position: relative;   /* anchors the close control */
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink-body);
  opacity: 0;
  transition: opacity 0.2s ease, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
}

.viewer[open] { opacity: 1; }

@starting-style { .viewer[open] { opacity: 0; } }

.viewer::backdrop { background: var(--paper); }

.viewer-frame {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s6) var(--gutter) var(--s5);
}

.viewer-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* A cross, not the word "Close" in quiet small print — that was easy to miss,
   which is the whole job of this control. Drawn in CSS rather than set as a
   glyph, for the same reason as the footer diamond: no dependency on the
   character being in the font subset. 2.75rem square, so it is a real touch
   target rather than the size of the mark inside it. The accessible name
   stays "Close". */
.viewer-close {
  position: absolute;
  top: var(--s3);
  right: var(--gutter);
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.viewer-close::before,
.viewer-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.25rem;
  height: 1px;
  background: var(--ink);
}

.viewer-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.viewer-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Thickens rather than changing colour — there is no second colour to use. */
.viewer-close:hover::before,
.viewer-close:hover::after,
.viewer-close:focus-visible::before,
.viewer-close:focus-visible::after { height: 2px; }

/* ---------- contact ---------- */

/* DESIGN_BRIEF.md §6 asks for these "set large enough to be the clear purpose
   of the page". At --t-section they were the size of a history subheading and
   competed with the same two details in the footer a few centimetres below.
   At this size the hierarchy is unarguable: the page states them, the footer
   merely carries them.

   The clamp still comes down on a phone, where the email address alone is
   wider than the column.

   Marked with the vertical hairline rather than a horizontal rule. On a page
   of four lines there is no section to divide, and a third horizontal rule —
   masthead above, colophon below — would be saturation rather than structure.
   Rule density has to scale with the amount of content. */
.contact-details {
  margin: var(--s5) 0 0;
  font-size: clamp(1.5rem, 6vw, 3rem);
  line-height: 1.3;
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.25rem, 4vw, 2.5rem);
}

.contact-details p { margin: 0 0 var(--s3); }

.contact-details a {
  font-family: var(--display);
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: break-word;
}

.contact-details a:hover,
.contact-details a:focus-visible { text-decoration: underline; }

/* The labels step back so the number and the address carry the line. The
   colon is kept because CONTENT.md gives the text as "Telephone: ...". */
.contact-label {
  display: block;
  font-family: var(--text);
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-bottom: var(--s1);
}

/* ---------- footer ---------- */

/* The footer is a colophon rather than three lines of small print: a thick
   rule over a hairline, broken at the centre by a diamond, then the registered
   name in letterspaced capitals.

   This departs from DESIGN_BRIEF.md §3, which forbids rules. Done at the
   client's explicit instruction after comparing five treatments; this is the
   only rule on the site and §3 otherwise holds. */

.site-footer {
  margin-top: var(--s7);
  padding-bottom: var(--s6);
  color: var(--ink-quiet);
  font-size: var(--t-small);
  line-height: 1.6;
  text-align: center;
}

.site-footer p { margin: 0; max-width: none; }

.colophon-rule {
  position: relative;
  height: 4px;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s5);
}

/* The device is drawn in CSS so it does not depend on a glyph being present
   in the font subset. ::before knocks a paper-coloured gap in the two rules;
   ::after is the diamond sitting in the gap. */
.colophon-rule::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.25rem;
  height: 12px;
  transform: translate(-50%, -50%);
  background: var(--paper);
}

.colophon-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--ink);
}

/* CONTENT.md gives the footer in two tiers. The contact details sit above the
   legal lines and stay visually distinct from them, so the registered office
   is not mistaken for an address anyone is invited to write to. */
.site-footer .footer-contact {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: var(--s4);
}

.site-footer .footer-contact a {
  color: var(--ink);
  text-decoration: none;
}

.site-footer .footer-contact a:hover,
.site-footer .footer-contact a:focus-visible { text-decoration: underline; }

.site-footer .footer-contact .sep {
  color: var(--ink-quiet);
  padding-inline: 0.5em;
}

/* Narrow: the separator goes and the two details stack, so a long email
   address never has to wrap mid-word. */
@media (max-width: 34rem) {
  .site-footer .footer-contact .sep { display: none; }
  .site-footer .footer-contact a { display: block; }
}

/* Capitals are applied here, not retyped in the markup, so the registered
   name stays exactly as CONTENT.md gives it. The text-indent offsets the
   trailing letterspace on the final letter, which would otherwise push the
   centred line very slightly left. */
.site-footer .footer-name {
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: var(--s3);
}

/* ---------- history: section rules and documents ---------- */

/* The act rules, at the two real joints in the argument rather than above
   every heading — six ruled headings is the DESIGN_BRIEF.md §3 failure in a
   new costume.

   Measure width, not the 72rem content width. What the home page taught is
   the better principle: a rule aligns with the block it divides. The masthead
   rule is 72rem because the masthead is; these divide a column of prose, so
   they span the prose. */
.rule-act {
  border: 0;
  border-top: 2px solid var(--ink);
  margin: var(--s6) 0 0;
}

/* The rule carries the break, so the heading beneath it no longer needs the
   full --s6 above it. */
.rule-act + h2 { margin-top: var(--s4); }

/* The source extracts. The vertical rule marks them as evidence and makes
   family with the hairline dividing the engraving from the links on the home
   page: both mean "a boundary within a section, not between sections".

   Smaller with more leading, the conventional setting for a long quoted
   passage. The second extract runs to about 260 words as one unbroken
   paragraph; CONTENT.md records the extracts as untouched, correctly, so
   typography is the only help available. */
.prose blockquote {
  margin-left: 0;
  padding-left: clamp(1.25rem, 4vw, 2.5rem);
  border-left: 1px solid var(--rule);
  font-size: 1.0625rem;
  line-height: 1.8;
}

/* The attribution lines up under the extract's text, not under its rule. */
.prose .attribution { margin-left: clamp(1.25rem, 4vw, 2.5rem); }

/* The memorandum's two pages read as one opening, recto and verso, so they
   sit as a pair inside the measure. A portrait A4 at the full measure would
   stand 56rem tall and outweigh the engraving, which §6 reserves as the thing
   you remember. */
.doc-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin: var(--s5) 0;
}

@media (max-width: 34rem) {
  .doc-pair { grid-template-columns: 1fr; }
}

/* The plan is landscape and its value is the detail, so it breaks the measure
   at 60rem — the same width as the home page splash plate. One plate width on
   the site, not a third arbitrary measure.

   It is a sibling of the prose column, never a child: a 60rem block inside the
   40rem column overflows to the right instead of centring. */
.doc-plate {
  max-width: 60rem;
  margin: var(--s6) auto;
}

.doc-pair figure,
.doc-plate figure { margin: 0; }

.doc-pair a,
.doc-plate a { display: block; }

/* A hairline defines the sheet's edge. These scans have near-white paper in
   places and without it the document bleeds into the page and stops reading
   as an object. Not a card — the edge of a physical thing. */
.doc-pair img,
.doc-plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

/* One line per document, transcribed from the document's own words.
   IMAGES.md rule 3 still holds for photographs: they are not captioned. */
.doc-pair figcaption,
.doc-plate figcaption {
  margin-top: var(--s2);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-quiet);
}

/* ---------- main spacing ---------- */

.main-inner  { padding-top: var(--s6); }
.main-home   { padding-top: var(--s6); }
.home-lower  { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}