/* ==========================================================================
   Coreter Limited
   One stylesheet. Tokens first, everything downstream references them.
   ========================================================================== */

/* --- Fonts ------------------------------------------------------------ */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("/assets/fonts/switzer.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Metrically-matched fallbacks. Measured CLS is already zero because both faces
   are small and preloaded, so they land before first paint, but that is an
   observation rather than a guarantee. On a connection slow enough for the
   fallback to paint first, font-display: swap would shift the text. These
   overrides scale Arial and Times to the webfonts' own x-height and vertical
   metrics, read out of the woff2 files, so the swap is metrically invisible.
   Values are expressed against the adjusted em, hence divided by size-adjust. */

@font-face {
  font-family: "Newsreader Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
  size-adjust: 95.25%;
  ascent-override: 77.17%;
  descent-override: 27.82%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Switzer Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 102.40%;
  ascent-override: 95.70%;
  descent-override: 24.41%;
  line-gap-override: 8.79%;
}

/* --- Tokens ----------------------------------------------------------- */

:root {
  /* Ground and ink. Warm, never blue-grey. */
  --ground:      #faf8f4;
  --band:        #f2ede3;
  --ink:         #191712;
  --muted:       #5a5449;
  --muted-soft:  #6b655a;
  --accent:      #2f4f3e;
  --accent-lift: #24402f;
  --rule:        #ddd5c5;
  --rule-strong: #c9c0ad;
  --on-accent:   #faf8f4;

  --font-display: "Newsreader", "Newsreader Fallback", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "Switzer", "Switzer Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid type. Display tops out at 76px, well under the 96px ceiling. */
  --t-hero:  clamp(2.5rem, 1.55rem + 4.2vw, 4.75rem);
  --t-h2:    clamp(1.6rem, 1.36rem + 1.05vw, 2.25rem);
  --t-h3:    clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);
  --t-lede:  clamp(1.2rem, 1.11rem + 0.4vw, 1.4rem);
  --t-body:  1.125rem;
  --t-small: 0.9375rem;

  /* Space scale */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  --gutter:  clamp(1.5rem, 1rem + 3vw, 5.5rem);
  --shell:   78rem;
  --measure: 62ch;

  --band-pad: clamp(3.5rem, 2.4rem + 5vw, 7rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #131210;
    --band:        #201e19;
    --ink:         #efeae0;
    --muted:       #a9a296;
    --muted-soft:  #9c958a;
    --accent:      #8fbfa1;
    --accent-lift: #a8d0b7;
    --rule:        #33302a;
    --rule-strong: #4a453c;
    --on-accent:   #131210;
  }
}

/* --- Reset ------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

body {
  margin: 0;
  /* Short pages (404, thanks) otherwise leave the ground bare below the footer:
     550px of it at 2560x1440. */
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
p, ul, ol { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-lift); }

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

::selection { background: var(--accent); color: var(--on-accent); }

/* --- Layout primitives ------------------------------------------------ */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure  { max-width: var(--measure); }
.measure-wide { max-width: 72ch; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--ground);
  padding: var(--s-3) var(--s-5);
  z-index: 10;
}
.skip:focus { left: 0; }

/* --- Masthead --------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
}

.masthead__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-block: var(--s-5);
}

.wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--ink); }

.masthead nav {
  display: flex;
  gap: clamp(var(--s-5), 3vw, var(--s-7));
  font-size: var(--t-small);
}
.masthead nav a {
  color: var(--muted);
  text-decoration: none;
  padding-block: var(--s-1);
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover,
.masthead nav a:focus-visible { color: var(--ink); border-bottom-color: var(--rule-strong); }

/* --- Sections --------------------------------------------------------- */

section { padding-block: var(--band-pad); }
.band {
  background: var(--band);
  border-block: 1px solid var(--rule);
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin-bottom: var(--s-6);
}

.prose > * + * { margin-top: var(--s-5); }
.prose { color: var(--muted); }
.prose strong { color: var(--ink); font-weight: 500; }

/* --- Hero ------------------------------------------------------------- */

.hero { padding-block: clamp(4rem, 2.5rem + 8vw, 9.5rem) clamp(3.5rem, 2.4rem + 5vw, 7rem); }

.hero h1 {
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 14ch;
}

.hero__lede {
  font-size: var(--t-lede);
  line-height: 1.45;
  max-width: 34ch;
  margin-top: var(--s-6);
}

.hero__rule {
  height: 1px;
  background: var(--rule-strong);
  margin-top: var(--s-7);
  max-width: 26rem;
  transform-origin: left center;
}

.hero__meta {
  margin-top: var(--s-5);
  max-width: 34ch;
  font-size: var(--t-small);
  color: var(--muted-soft);
  font-variant-numeric: lining-nums tabular-nums;
}

/* The one authored moment: the hero settles in once, on load. Nothing else
   in the page animates. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1        { animation: rise 800ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero__lede     { animation: rise 800ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both; }
  .hero__rule     { animation: draw 900ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both; }
  .hero__meta     { animation: rise 800ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.55rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- Businesses index ------------------------------------------------- */

.index { list-style: none; padding: 0; border-top: 1px solid var(--rule-strong); }

.index__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: var(--s-4) var(--s-7);
  align-items: start;
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--rule-strong);
}

.index__name {
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.index__descriptor {
  margin-top: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--muted-soft);
}

.index__body { color: var(--muted); max-width: 46ch; }

.index__link {
  justify-self: end;
  white-space: nowrap;
  font-size: var(--t-small);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.index__link[aria-disabled] {
  color: var(--muted-soft);
  border-bottom-style: dotted;
  cursor: default;
}

.index__note {
  margin-top: var(--s-6);
  color: var(--muted);
  max-width: 54ch;
}

@media (max-width: 60rem) {
  .index__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .index__link { justify-self: start; margin-top: var(--s-2); }
}

/* --- About ------------------------------------------------------------ */

.about__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.2;
  margin-bottom: var(--s-2);
}
.about__role {
  font-size: var(--t-small);
  color: var(--muted-soft);
  margin-bottom: var(--s-6);
}

/* --- Contact ---------------------------------------------------------- */

.contact__address {
  display: inline-block;
  margin-top: var(--s-6);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.24rem + 1.1vw, 1.9rem);
  letter-spacing: -0.015em;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: var(--s-2);
  overflow-wrap: anywhere;
}
.contact__address:hover { border-bottom-color: var(--accent); }


/* --- Footer ----------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-8) var(--s-7);
  font-size: var(--t-small);
  color: var(--muted);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7) var(--s-6);
}

/* Three items go one-up or three-up. An auto-fit two-column state strands the
   third cell alone on the second row, which reads as an accident.
   54rem rather than 52: at 52 the three cells are 229px and the statutory line
   "Registered in England and Wales" measures 222, so 7px of headroom (6px if the
   webfont fails and the fallback sets wider). 54rem takes that to roughly 27px. */
@media (min-width: 54rem) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.site-footer h3 {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: var(--s-3);
}

.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: var(--s-2); }
.site-footer address { font-style: normal; }
.site-footer a { color: var(--muted); text-decoration-color: var(--rule-strong); }
.site-footer a:hover { color: var(--ink); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  color: var(--muted-soft);
}

.site-footer__legal nav { display: flex; gap: var(--s-5); }

/* The rule and the gap above the legal bar only make sense when there is a
   column grid above it to separate from. Inner pages have no grid. */
.site-footer__grid + .site-footer__legal {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

/* --- Inner pages ------------------------------------------------------ */

.page { padding-block: clamp(3.5rem, 2.4rem + 5vw, 7rem) var(--band-pad); }

.page h1 {
  font-size: clamp(2rem, 1.6rem + 1.9vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.024em;
}

.page__updated {
  margin-top: var(--s-4);
  font-size: var(--t-small);
  color: var(--muted-soft);
  font-variant-numeric: lining-nums tabular-nums;
}

.page h2 {
  font-size: var(--t-h3);
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
}

.page .prose ul { padding-left: 1.15rem; }
.page .prose li + li { margin-top: var(--s-2); }

.back {
  display: inline-block;
  margin-top: var(--s-8);
  font-size: var(--t-small);
}

/* --- 404 -------------------------------------------------------------- */

.notice { padding-block: clamp(4rem, 2.5rem + 8vw, 9rem); }
.notice h1 {
  font-size: clamp(2rem, 1.6rem + 1.9vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.024em;
  max-width: 24ch;
}
.notice p { margin-top: var(--s-5); color: var(--muted); max-width: 48ch; }
.nowrap { white-space: nowrap; }