/* Self-hosted fonts (latin subset, from Google Fonts; SIL OFL, see
   fonts/OFL.txt) so the CSP can stay 'self' only. Archivo is one variable
   file covering both instances the page uses (500/100% and 900/112%). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 100% 112%;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  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: "Bodoni Moda";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bodoni-moda-italic-latin.woff2") format("woff2");
  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 {
  --bone: #E6E0D6;
  --merlot: #4B1E23;
  --olive: #6B6F4E;
  --midnight: #1C2430;
  --tobacco: #8A5A2B;
  --graphite: #121212;

  --tile: clamp(20px, 3vw, 32px);
  --gap: 5px;
  --step: calc(var(--tile) + var(--gap));
  --cycle: 12s;
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; }

body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(120% 90% at 50% 40%, #EEE9E1 0%, var(--bone) 55%, #D9D1C3 100%)
    var(--bone);
  color: var(--graphite);
  font-family: "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Header + footer */
.top, .foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem 1rem;
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 3rem);
  font-size: .7rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(18 18 18 / .66);
  animation: fade 1.2s var(--ease-out) 2.2s both;
}

.status { display: inline-flex; align-items: center; gap: .6em; }
.dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--olive);
  animation: pulse 2.4s ease-out infinite;
}

/* Hero */
.hero {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(1.25rem, 3.5vw, 2.25rem);
  padding: 2rem 1rem 3rem;
  text-align: center;
}

/* 2x2 "window" mark: four panes orbit clockwise */
.tiles {
  position: relative;
  width: calc(var(--tile) * 2 + var(--gap));
  height: calc(var(--tile) * 2 + var(--gap));
  animation: pop .9s var(--ease-out) .1s both;
}
.tiles span {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--tile);
  height: var(--tile);
  border-radius: 3px;
  animation: orbit var(--cycle) infinite;
}
.tiles span:nth-child(1) { background: var(--merlot); }
.tiles span:nth-child(2) { background: var(--olive);    animation-delay: calc(var(--cycle) * -.25); }
.tiles span:nth-child(3) { background: var(--midnight); animation-delay: calc(var(--cycle) * -.5); }
.tiles span:nth-child(4) { background: var(--tobacco);  animation-delay: calc(var(--cycle) * -.75); }

/* Wordmark */
.wordmark {
  overflow: hidden;
  padding: .04em .06em .02em;
  font-size: clamp(4.5rem, 21vw, 15rem);
  font-weight: 900;
  font-stretch: 112%;
  line-height: .82;
  letter-spacing: -.025em;
}
.rise { display: inline-block; animation: rise 1.1s var(--ease-out) .25s both; }
.sq {
  font-size: .42em;
  vertical-align: top;
  margin-left: .05em;
  color: var(--merlot);
}

/* Slogan */
.slogan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .3em;
  font-family: "Bodoni Moda", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 3.6vw, 2.4rem);
}
.w {
  display: inline-block;
  animation: word .9s var(--ease-out) both;
}
.w:nth-child(1) { animation-delay: 1.00s; }
.w:nth-child(2) { animation-delay: 1.16s; }
.w:nth-child(3) { animation-delay: 1.32s; }

/* "home" takes the colour of whichever pane currently sits top-left */
.home {
  position: relative;
  animation:
    word .9s var(--ease-out) 1.6s both,
    hue var(--cycle) infinite;
}
.home::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .02em;
  height: .055em;
  background: currentColor;
  transform-origin: left;
  animation: draw .8s var(--ease-out) 2.3s both;
}

/* Keyframes */
@keyframes orbit {
  0%, 18%   { transform: translate(0, 0); animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  25%, 43%  { transform: translate(var(--step), 0); animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  50%, 68%  { transform: translate(var(--step), var(--step)); animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  75%, 93%  { transform: translate(0, var(--step)); animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  100%      { transform: translate(0, 0); }
}
@keyframes hue {
  0%, 18%   { color: var(--merlot); }
  25%, 43%  { color: var(--tobacco); }
  50%, 68%  { color: var(--midnight); }
  75%, 93%  { color: var(--olive); }
  100%      { color: var(--merlot); }
}
@keyframes rise  { from { transform: translateY(105%); } to { transform: none; } }
@keyframes word  { from { opacity: 0; transform: translateY(.6em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes draw  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop   { from { opacity: 0; transform: scale(.6) rotate(-45deg); } to { opacity: 1; transform: none; } }
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgb(107 111 78 / .55); }
  100% { box-shadow: 0 0 0 .6rem rgb(107 111 78 / 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; }
  .home { color: var(--merlot); }
  .tiles span:nth-child(2) { transform: translate(var(--step), 0); }
  .tiles span:nth-child(3) { transform: translate(var(--step), var(--step)); }
  .tiles span:nth-child(4) { transform: translate(0, var(--step)); }
}