/* Stallside Digital. Plain CSS, no framework, no external requests. */

/* Registered so the reveal radius can animate smoothly. Browsers without @property just snap, which is fine. */
@property --r {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}

/* Fonts, self hosted in public/fonts. Both are under the SIL Open Font Licence. Latin characters only. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette: off whites, warm greys, dark grey, earth browns, bronze. */
  --paper: #f2ede4;
  --paper-2: #e8e1d5;
  --cream: #fbf8f2;
  --ink: #1e1b18;
  --ink-2: #3a3531;
  --stone: #8c8580;
  --stone-2: #cdc5b9;
  --cocoa: #2b211c;
  --cocoa-2: #4a3328;
  --cocoa-3: #6a4a3a;
  --bronze: #9a6b3f;
  --clay: #c9955f;

  /* Fraunces for headings (soft serif), Instrument Sans for everything else. System fonts stand in while they load. */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 62ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 1.25rem;
}

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

html {
  /* Paper texture, tiled. The 1254 pixel tile is shown at half size so it stays sharp on phone screens.
     The colour underneath is the tile's average, so nothing jumps when the image arrives. */
  background: #ede9d9 url("images/paper.webp") 0 0 / 627px repeat;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 106.25%; /* 17px */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0; }

main { flex: 1; }

/* Header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--gutter);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.header-link {
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  transition: background-color 200ms, color 200ms;
}

.header-link:hover,
.header-link:focus-visible {
  background: var(--ink);
  color: var(--cream);
}

/* Hero */

.hero {
  padding: clamp(3rem, 10vw, 7rem) var(--gutter) clamp(2.5rem, 7vw, 5rem);
  max-width: 60rem;
}

.eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-size: clamp(2.6rem, 8.5vw, 6rem);
  max-width: 14ch;
}

.lede {
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-2);
  max-width: var(--measure);
}

/* Section headings */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 0 var(--gutter) 1.25rem;
}

h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
}

.hint {
  font-size: 0.9rem;
  color: var(--stone);
}

.hint-touch { display: none; }

@media (hover: none) {
  .hint-pointer { display: none; }
  .hint-touch { display: block; }
}

/* The four panels */

.panels { padding-bottom: clamp(2.5rem, 7vw, 5rem); }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr; /* every panel the same height as the tallest */
  gap: 0.9rem;
  padding: 0 var(--gutter);
}

@media (min-width: 42rem) {
  .grid { grid-template-columns: 1fr 1fr; }
}

.panel {
  --x: 50%;
  --y: 50%;
  --r: 0px;
  position: relative;
  display: grid;
  min-height: 18rem;
  border-radius: var(--radius);
  overflow: hidden; /* fallback for old browsers that don't know clip */
  overflow: clip; /* clips to the rounded corners without stopping the panel growing to fit long text */
  background: var(--paper-2);
  cursor: pointer;
  outline: none;
  transition: --r 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 42rem) {
  .panel { min-height: clamp(18rem, 36vw, 24rem); }
}

.panel:focus-visible {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--bronze);
}

/* Hovering opens a window that follows the pointer. Tapping, or keyboard focus, opens the whole panel. */
.panel.is-hover { --r: 10rem; }
.panel.is-open,
.panel:focus-visible { --r: 150%; }

/* Both sides sit in the same grid cell, so the panel is as tall as the taller side. */
.panel__front,
.panel__back {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
  padding: clamp(1.1rem, 4vw, 1.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.panel__front h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.panel__front .art {
  flex: 1 1 10rem;
  min-height: 8rem;
  width: 100%;
  margin-bottom: 1.25rem;
}

.panel__mark {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--bronze);
}

.panel__back {
  background: var(--cocoa);
  color: var(--cream);
  clip-path: circle(var(--r) at var(--x) var(--y));
}

.panel__back .art {
  position: absolute;
  top: -8%;
  right: -10%;
  width: 62%;
  height: 62%;
  opacity: 0.4;
}

.panel__copy { position: relative; }

.panel__back h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--clay);
}

.panel__back p {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 40ch;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel { transition: none; }
}

/* Artwork colours. Front is quiet line work, back is warm and filled.
   The shapes read these custom properties, which pass through the <use> elements. */

.art { display: block; overflow: visible; }

.panel__front {
  --art-fill: var(--paper);
  --art-stroke: var(--ink-2);
  --art-dot: var(--stone);
  --art-accent: var(--stone-2);
  --art-accent2: var(--bronze);
  --art-line: var(--stone-2);
  --art-bars: var(--stone-2);
  --art-accent-line: var(--bronze);
  --art-dash: var(--stone);
  --art-side: var(--stone-2);
  --art-side2: var(--stone);
}

.panel__back {
  --art-fill: var(--cocoa-2);
  --art-stroke: var(--cream);
  --art-dot: var(--clay);
  --art-accent: var(--bronze);
  --art-accent2: var(--clay);
  --art-line: var(--clay);
  --art-bars: var(--bronze);
  --art-accent-line: var(--clay);
  --art-dash: var(--clay);
  --art-side: var(--bronze);
  --art-side2: var(--cocoa-3);
}

/* The numbers. Stat tiles: the value is the chart, in the body sans, with the source under it. */

.numbers {
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter);
  border-top: 1px solid var(--stone-2);
}

.numbers__head { max-width: var(--measure); }

.numbers__head p {
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: 1.05rem;
}

.stats {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

@media (min-width: 36rem) {
  .stats { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 60rem) {
  .stats { grid-template-columns: repeat(3, 1fr); }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  background: var(--paper-2);
  border-radius: var(--radius);
}

.stat__value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(3rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.stat__label {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.5;
}

/* Small graphics inside the tiles. They draw themselves when the tile scrolls into view. */

.waffle {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  width: 100%;
  max-width: 8.5rem;
  aspect-ratio: 1;
  margin: 0.25rem 0;
}

.waffle i {
  display: block;
  background: var(--stone-2);
  border-radius: 1px;
  transition: background-color 350ms;
}

.stat.is-live .waffle i.is-on { background: var(--bronze); }

.bars {
  display: grid;
  gap: 0.45rem;
  margin: 0.4rem 0 0.25rem;
}

.bar {
  display: grid;
  grid-template-columns: 5.2rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--ink-2);
}

.bar__track {
  display: block;
  height: 10px;
  background: var(--paper);
  border-radius: 4px;
  overflow: hidden;
}

.bar__fill {
  display: block;
  height: 100%;
  width: 0;
  min-width: 4px;
  background: var(--bronze);
  border-radius: 4px;
  transition: width 1200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bar__fill--muted { background: var(--stone); }

.stat.is-live .bar__fill { width: var(--w); }

.bar__val {
  font-weight: 600;
  color: var(--ink);
}

.stat__link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bronze);
  text-decoration: none;
}

.stat__link:hover,
.stat__link:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }

.panel { scroll-margin-top: 1rem; }

/* On touch screens the reveal follows the scroll position, so it must not lag behind it. */
.touch-reveal .panel { transition: none; }
.touch-reveal .panel.is-open { transition: --r 450ms cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
  .waffle i, .bar__fill { transition: none; }
}

.stat__source {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--stone);
}

.stat__source a {
  color: inherit;
  text-underline-offset: 0.15em;
}

.stat__source a:hover,
.stat__source a:focus-visible { color: var(--bronze); }

/* About and contact */

.about,
.contact {
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter);
  max-width: calc(var(--measure) + 2 * var(--gutter));
}

.about { border-top: 1px solid var(--stone-2); }

.about p,
.contact p {
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: 1.05rem;
}

.contact {
  border-top: 1px solid var(--stone-2);
}

.button {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.9rem 1.4rem;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  border-radius: 999px;
  font-size: 1rem;
  overflow-wrap: anywhere;
  transition: background-color 200ms;
}

.button:hover,
.button:focus-visible {
  background: var(--bronze);
}

/* Footer */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding: 1.5rem var(--gutter) 2.5rem;
  font-size: 0.85rem;
  color: var(--stone);
  border-top: 1px solid var(--stone-2);
}