/*
 * Cottage Chair.
 *
 * The scene fills the viewport and everything else sits on it. There is no
 * panel, no card and no header bar: the name and nav sit straight on the sky, on
 * the same axis as the dock and the sun.
 */

/* Self-hosted, not Google Fonts. The CSP allows font-src 'self' only, so a
   Google URL is blocked in the browser and the page falls back to Georgia with
   nothing in any log to say why. It is also the difference between no third
   party watching this page load and one. Fetch with scripts/fetch_fonts.sh. */
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  /* swap, not block: the page should show the place immediately and let the
     letterforms settle, rather than hold a blank title while a font loads. */
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #fbf6ec;
  --sky: #1a2e5e;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--sky);
  font-family: var(--serif);
  /* The sky is behind everything, so a slow background transition keeps a
     minute's worth of change from arriving as a step. The scene itself is
     rebuilt whole and cannot be transitioned; this softens the edges of that. */
  transition: background-color 1.2s linear;
}

body { overflow: hidden; }

#stage { position: fixed; inset: 0; }

#scene, .cc-arms {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.cc-arms { pointer-events: none; }

/* -- the name and nav ------------------------------------------------------ */

#title {
  position: absolute;
  top: 92px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--ink);
  /* The ink switches by light state rather than fading, but the switch happens
     at most once between two redraws, so easing it costs nothing and stops it
     reading as a flicker. */
  transition: color 1.2s linear;
}

#title h1 {
  margin: 0;
  font-size: 46px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

#nav {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 26px;
}

#nav button {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.85;
}

#nav button:hover,
#nav button[aria-expanded="true"] { opacity: 1; }

#nav button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* -- what the nav opens ---------------------------------------------------- */

#pane {
  margin: 26px auto 0;
  max-width: 460px;
  padding: 0 24px;
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
}

.cc-line { margin: 0 0 8px; }
.cc-address { opacity: 0.8; margin-top: 18px; }

#pane a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* Fields read as fields without forming a panel: a faint translucent fill and a
   bottom rule, nothing else. `currentColor` throughout, so they follow the ink
   from dark to light with the rest of the page. */

.cc-contact { margin-top: 20px; text-align: left; }

.cc-field { display: block; margin-bottom: 14px; }

.cc-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.7;
  margin-bottom: 4px;
}

.cc-field input,
.cc-field textarea {
  width: 100%;
  background: rgb(255 255 255 / 8%);
  border: 0;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  padding: 6px 8px;
  resize: none;
}

.cc-field input:focus,
.cc-field textarea:focus { outline: 1px solid currentColor; outline-offset: 2px; }

/* The honeypot. Not display:none — some bots skip hidden inputs, and this one
   wants filling. Moved out of sight and out of the tab order instead. */
.cc-pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 6px;
}

.cc-legal { margin: 0; font-size: 14px; opacity: 0.8; }
.cc-legal span { opacity: 0.5; margin: 0 4px; }

.cc-row button {
  appearance: none;
  background: rgb(255 255 255 / 8%);
  border: 1px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 5px 18px;
  cursor: pointer;
}

.cc-row button[disabled] { opacity: 0.5; cursor: default; }

.cc-status { margin: 10px 0 0; font-size: 14px; min-height: 1.4em; opacity: 0.85; }

/* -- phone ----------------------------------------------------------------- */

@media (max-width: 759px) {
  #title { top: 120px; }
  #title h1 { font-size: 30px; }
  #nav { gap: 18px; }
  #nav button { font-size: 11px; }
  #pane { font-size: 16px; max-width: 340px; }
}

/* -- legal and error pages ------------------------------------------------- */

.cc-page {
  overflow: auto;
  background: #10161f;
  color: #e8e3d8;
}

.cc-page main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 14vh 24px 10vh;
  font-size: 17px;
  line-height: 1.6;
}

.cc-page h1 { font-weight: 400; font-size: 30px; margin: 0 0 6px; }
.cc-page h2 { font-weight: 400; font-size: 20px; margin: 32px 0 6px; }
.cc-page p { margin: 0 0 14px; }
.cc-page a { color: inherit; }
.cc-page .cc-back { margin-top: 40px; font-size: 15px; opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  html, body, #title { transition: none; }
}