@font-face {
  font-family: "Unbounded";
  src: url("/fonts/unbounded.woff2") format("woff2");
  font-weight: 300 700;
  font-display: optional;
}

@font-face {
  font-family: "Literata";
  src: url("/fonts/literata.woff2") format("woff2");
  font-weight: 300 500;
  font-display: optional;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument.woff2") format("woff2");
  font-weight: 400 600;
  font-display: optional;
}

/* ————————————————————————————————————————————————————————————————
   Palette

   Every page is two surfaces: the ink band at the top and the paper
   below it. The tokens are named for the surface, not the colour, so
   the dark theme can swap both without any rule downstream knowing.
   Contrast of every text/background pair clears WCAG AA at 4.5:1.
   ———————————————————————————————————————————————————————————————— */
:root {
  --band-bg: #101317;
  --band-fg: #F2F0EA;
  --band-dim: #9A9E9C;
  --band-rule: #2A2E33;

  --page-bg: #F2F0EA;
  --page-fg: #101317;
  --page-dim: #67655E;
  --page-rule: #CFCBC1;
  --page-edge: #101317;
  --page-hover: #EAE7DE;

  --accent: #8F5320;
  --accent-fg: #F2F0EA;

  /* in light the band/page boundary is its own hard edge; dark needs a line */
  --seam: transparent;

  --serif: "Literata", ui-serif, Georgia, serif;
  --sans: "Instrument Sans", -apple-system, system-ui, sans-serif;
  --pad: clamp(1.4rem, 4.5vw, 4rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --band-bg: #080A0D;
    --band-fg: #EDEBE4;
    --band-dim: #979C9F;
    --band-rule: #23272C;

    --page-bg: #1A1E24;
    --page-fg: #E6E3DB;
    --page-dim: #9D9C95;
    --page-rule: #33383F;
    --page-edge: #4A515A;
    --page-hover: #20252C;

    /* the light amber reads as mud on a dark surface, so it lifts */
    --accent: #CE9058;
    --accent-fg: #14171B;

    --seam: #33383F;
  }
}

* {
  box-sizing: border-box;
}

/* the canvas behind the page: band colour where the header is, page colour
   where the footer is, so rubber-band scrolling never reveals the wrong one */
html {
  background: linear-gradient(var(--band-bg) 0 50%, var(--page-bg) 50% 100%);
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--band-bg);
  color: var(--page-fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* keyboard users get a ring the mouse never sees; it flips to paper on the
   ink band, where amber has too little contrast to read as a focus state */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.band :focus-visible {
  outline-color: var(--band-fg);
}

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

/* ————— the ink band ————— */
.band {
  flex: none;
  background: var(--band-bg);
  color: var(--band-fg);
  padding: 0 var(--pad) clamp(2rem, 5.5vh, 3.2rem);
}

.bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: clamp(1.2rem, 3.2vh, 1.8rem);
  margin-bottom: clamp(1.8rem, 5vh, 3rem);
  border-bottom: 1px solid var(--band-rule);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bar .mark {
  font-family: "Unbounded", var(--sans);
  font-weight: 400;
  font-size: .8rem;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: opacity .2s ease;
}

.bar .mark:hover {
  opacity: .68;
}

.bar .contact {
  color: var(--band-dim);
  transition: color .2s ease;
}

.bar .contact:hover,
.bar .contact[aria-current] {
  color: var(--band-fg);
}

h1 {
  margin: 0;
  max-width: 20ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.95rem, 1.1rem + 3.1vw, 3.8rem);
  line-height: 1.16;
  letter-spacing: -.014em;
  text-wrap: balance;
}

.home h1 {
  max-width: 22ch;
}

.model {
  margin: clamp(1.3rem, 3.4vh, 1.9rem) 0 0;
  max-width: 52ch;
  font-size: clamp(.98rem, .92rem + .3vw, 1.12rem);
  color: var(--band-dim);
}

.model b {
  font-weight: 500;
  color: var(--band-fg);
}

/* ————— label strip ————— */
.strip {
  flex: none;
  background: var(--page-bg);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .85rem var(--pad);
  /* drawn as a shadow, not a border: a transparent 1px border would still
     take up a row of layout in the light theme and shift the page down */
  box-shadow: inset 0 1px 0 var(--seam);
  border-bottom: 1px solid var(--page-rule);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--page-dim);
}

/* ————— the cells: two up by default, six on the front page ————— */
.quads {
  flex: 1;
  background: var(--page-bg);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
}

.quad {
  padding: clamp(1.6rem, 4.5vh, 3rem) var(--pad);
  border-left: 1px solid var(--page-rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quad:first-child {
  border-left: 0;
}

.quads.six {
  grid-template-columns: repeat(3, 1fr);
}

.six .quad {
  padding: clamp(1.3rem, 3.4vh, 2.1rem) var(--pad);
  border-top: 1px solid var(--page-rule);
  transition: background .2s ease;
}

.six .quad:nth-child(3n + 1) {
  border-left: 0;
}

.six .quad:nth-child(-n + 3) {
  border-top: 0;
}

.six .quad:hover {
  background: var(--page-hover);
}

.quad .n {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: .7rem;
}

.six .quad .n {
  margin-bottom: .6rem;
}

.quad h2 {
  margin: 0 0 .45rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.05rem, .96rem + .45vw, 1.35rem);
  letter-spacing: -.01em;
}

.quad a.addr {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.05rem, .9rem + .75vw, 1.5rem);
  letter-spacing: -.012em;
  border-bottom: 1px solid var(--page-rule);
  padding-bottom: .12em;
  align-self: flex-start;
  overflow-wrap: anywhere;
  transition: color .2s ease, border-color .2s ease;
}

.quad a.addr:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.quad p {
  margin: .9rem 0 0;
  max-width: 38ch;
  font-size: .9rem;
  color: var(--page-dim);
}

.six .quad p {
  margin: 0;
  max-width: 34ch;
}

/* ————— foot ————— */
.foot {
  flex: none;
  background: var(--page-bg);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem 2rem;
  padding: clamp(.9rem, 2.4vh, 1.4rem) var(--pad);
  border-top: 1px solid var(--page-edge);
  font-size: .78rem;
  letter-spacing: .05em;
  color: var(--page-dim);
}

.foot a {
  transition: color .2s ease;
}

.foot a:hover {
  color: var(--accent);
}

@media (max-width: 62rem) {
  .quads.six {
    grid-template-columns: repeat(2, 1fr);
  }

  .six .quad:nth-child(3n + 1) {
    border-left: 1px solid var(--page-rule);
  }

  .six .quad:nth-child(odd) {
    border-left: 0;
  }

  .six .quad:nth-child(-n + 3) {
    border-top: 1px solid var(--page-rule);
  }

  .six .quad:nth-child(-n + 2) {
    border-top: 0;
  }
}

@media (max-width: 40rem) {
  .quads,
  .quads.six {
    grid-template-columns: 1fr;
  }

  .quad {
    border-left: 0;
    border-top: 1px solid var(--page-rule);
  }

  .quad:first-child {
    border-top: 0;
  }

  .six .quad:nth-child(3n + 1),
  .six .quad:nth-child(odd) {
    border-left: 0;
  }

  .six .quad:nth-child(-n + 3),
  .six .quad:nth-child(-n + 2) {
    border-top: 1px solid var(--page-rule);
  }

  .six .quad:first-child {
    border-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .01ms !important;
  }
}