/* Nova Wilde
   Palette and type locked at checkpoint 2. Every ratio in the comments was
   measured, not estimated. See brand/brand-kit.md. */

:root {
  --ground: #111111;   /* near-black surface                                  */
  --ink: #fefefe;      /* body text, 18.72:1 on ground, passes AA             */
  --accent: #fb875e;   /* coral, 7.85:1 on ground, safe at body size          */
  --display: #aa2330;  /* deep red, 2.69:1, DISPLAY SCALE ONLY, never < 40px  */
  --dim: #8d8d8a;      /* muted text, 6.42:1 on ground                        */
  --rule: #2a2a28;     /* hairlines and borders                               */
  --raise: #191918;    /* cards sitting above the ground                      */

  --display-face: "DotGothic16", "Courier New", monospace;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --marker: "Permanent Marker", cursive;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 62ch;
  --stack: clamp(4rem, 9vw, 8rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto is not optional. Every <img> carries width/height attributes so
   the browser can reserve space and not shift the layout, but without this the
   attribute height wins over the constrained width and the image renders at its
   intrinsic height inside a narrow column. */
img, video { max-width: 100%; height: auto; display: block; }

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

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

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--ground);
  padding: .75rem 1rem; font-family: var(--mono); z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap { width: min(100% - (var(--gutter) * 2), 82rem); margin-inline: auto; }

/* ---------------------------------------------------------------- type */

h1, h2, h3 {
  font-family: var(--display-face);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 8vw, 6.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }

/* The deep red only ever appears at display scale. Below 40px it measures
   2.69:1 against the ground, which fails AA and AA-large both. */
.display-red { color: var(--display); }

.kicker {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

.lede { font-size: clamp(1.0625rem, 1rem + .4vw, 1.375rem); color: var(--dim); max-width: var(--measure); }

p { max-width: var(--measure); }

.marker { font-family: var(--marker); color: var(--accent); font-size: 1.1em; }

/* ---------------------------------------------------------------- nav */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--gutter);
  background: linear-gradient(to bottom, rgba(17,17,17,.92), rgba(17,17,17,0));
  transition: background .3s;
}
.nav.solid { background: var(--ground); border-bottom: 1px solid var(--rule); }

.wordmark {
  font-family: var(--display-face);
  font-size: 1.25rem; letter-spacing: .02em;
  color: var(--ink); text-decoration: none;
}
.wordmark:hover { color: var(--accent); }

.nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent); }

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .5rem; color: var(--ink);
}
.burger span { display: block; width: 22px; height: 2px; background: currentColor; margin: 4px 0; transition: transform .25s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 800px) {
  .burger { display: block; }
  .nav-links {
    position: fixed; inset: 3.75rem 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--ground); border-bottom: 1px solid var(--rule);
    padding: 1rem var(--gutter) 2rem;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
}

/* ---------------------------------------------------------------- hero */

.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero video, .hero .hero-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* The reference site ships no poster, so there is a blank rectangle until the
   video paints. Ours comes from frame one of the same file, so there is no jump. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(17,17,17,.95) 0%, rgba(17,17,17,.6) 38%, rgba(17,17,17,0) 70%),
    linear-gradient(to top, rgba(17,17,17,.9) 0%, rgba(17,17,17,0) 45%);
}
.hero-inner { position: relative; z-index: 2; padding: 0 0 clamp(3rem, 8vh, 7rem); }
.hero h1 { margin-bottom: 1.5rem; }
.hero .lede { color: var(--ink); opacity: .82; }

.cta {
  display: inline-block; margin-top: 2.25rem;
  font-family: var(--mono); font-size: .875rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--accent); color: #14100e;   /* 7.85:1, dark ink on coral */
  padding: 1rem 2rem; text-decoration: none; border: 1px solid var(--accent);
  transition: background .2s, color .2s;
}
.cta:hover { background: transparent; color: var(--accent); }

.cta-ghost { background: transparent; color: var(--accent); }
.cta-ghost:hover { background: var(--accent); color: #14100e; }

/* ---------------------------------------------------------------- sections */

section { padding-block: var(--stack); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding-bottom: 1.5rem; margin-bottom: 3rem;
  border-bottom: 1px solid var(--rule);
}
.section-head a {
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap;
}

/* ---------------------------------------------------------------- carousel */

.rail-shell { position: relative; }
.rail {
  display: flex; gap: 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: .5rem;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 clamp(15rem, 30vw, 21rem); }

.rail-nav { display: flex; gap: .5rem; margin-top: 1.5rem; }
.rail-nav button {
  width: 2.75rem; height: 2.75rem; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); color: var(--ink);
  font-family: var(--mono); font-size: 1rem; line-height: 1;
  transition: border-color .2s, color .2s;
}
.rail-nav button:hover { border-color: var(--accent); color: var(--accent); }

.card { text-decoration: none; color: inherit; display: block; }
.card img { aspect-ratio: 4 / 5; object-fit: cover; background: var(--raise); }
.card-body { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.card h3 { font-size: 1.125rem; font-family: var(--body); font-weight: 500; line-height: 1.3; }
.card .price { font-family: var(--mono); font-size: .875rem; color: var(--accent); white-space: nowrap; }
.card:hover img { opacity: .82; }

/* ---------------------------------------------------------------- grids */

.grid-3 { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* The reference uses isotope for a masonry archive. CSS columns get the same
   reflow without the dependency. */
.masonry { columns: 3 18rem; column-gap: 1.25rem; }
.masonry figure { break-inside: avoid; margin: 0 0 1.25rem; position: relative; }
.masonry img { width: 100%; background: var(--raise); }
.masonry figcaption {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); padding-top: .625rem;
}

/* ---------------------------------------------------------------- tour rows */

.dates { border-top: 1px solid var(--rule); }
/* The section head already draws a rule. Two hairlines with a 3rem gap between
   them reads as an empty table row, which is what it looked like on a phone. */
.section-head + .dates { border-top: 0; }
.date-row {
  display: grid; gap: 1rem 2rem; align-items: center;
  grid-template-columns: 8rem 1fr auto;
  padding: 1.5rem 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
.date-row:hover { background: var(--raise); }
.date-row .when { font-family: var(--mono); font-size: .875rem; color: var(--accent); letter-spacing: .06em; }
.date-row .where { font-size: 1.0625rem; }
.date-row .where span { display: block; color: var(--dim); font-size: .9375rem; }
.date-row .status {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: .5rem 1rem; white-space: nowrap;
}
.date-row .status.gone { color: var(--dim); }
.date-row:hover .status:not(.gone) { border-color: var(--accent); color: var(--accent); }

@media (max-width: 640px) {
  .date-row { grid-template-columns: 1fr auto; }
  .date-row .when { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- forms */

.signup { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; max-width: 34rem; }
.signup input {
  flex: 1 1 15rem; min-width: 0;
  background: var(--raise); border: 1px solid var(--rule); color: var(--ink);
  padding: 1rem; font-family: var(--mono); font-size: .9375rem;
}
.signup input::placeholder { color: var(--dim); }
.signup input:focus { border-color: var(--accent); outline: none; }
.signup button {
  background: var(--accent); color: #14100e; border: 1px solid var(--accent);
  padding: 1rem 1.75rem; cursor: pointer;
  font-family: var(--mono); font-size: .875rem; letter-spacing: .12em; text-transform: uppercase;
}
.signup button:hover { background: transparent; color: var(--accent); }
.form-note { font-size: .875rem; color: var(--dim); margin-top: 1rem; }

/* ---------------------------------------------------------------- prose */

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 3.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2.5rem; font-family: var(--body); font-weight: 600; }
.prose p, .prose li { color: #d6d6d3; }  /* 12.1:1 on ground */
.prose ul { padding-left: 1.25rem; max-width: var(--measure); }
.prose li { margin-bottom: .5rem; }

.draft {
  border-left: 2px solid var(--accent);
  background: var(--raise);
  padding: 1.25rem 1.5rem; margin-bottom: 3rem;
  font-family: var(--mono); font-size: .875rem; color: var(--dim);
  max-width: var(--measure);
}

.page-head { padding-top: clamp(7rem, 16vh, 11rem); padding-bottom: 0; }

/* ---------------------------------------------------------------- footer */

footer { border-top: 1px solid var(--rule); padding-block: 4rem 3rem; margin-top: var(--stack); }
.foot-grid { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
footer h4 {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 1.25rem; font-weight: 400;
}
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: .75rem; }
footer a { color: var(--ink); text-decoration: none; font-size: .9375rem; }
footer a:hover { color: var(--accent); }
.colophon {
  margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .75rem; color: var(--dim);
}

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

.oops { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--gutter); }
.oops h1 { font-size: clamp(5rem, 22vw, 14rem); color: var(--display); line-height: .8; }