/* NORTHWEST — one pattern sheet. Oak-tag card, graphite line, washed grey. */

/* Fonts are self-hosted (SIL Open Font License, see assets/fonts/*-OFL.txt):
   variable Source Serif 4 (opsz, wght) and Archivo (wdth, wght). */

/* Archivo, latin-ext */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo, latin */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  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;
}

/* Source Serif 4, latin-ext */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Serif 4, latin */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-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 {
  --oak: #d9be7a;
  --oak-shade: #cdb06a;
  --graphite: #1f1e1b;
  --graphite-2: #574312;
  --rule: rgb(31 30 27 / 0.32);
  --rule-strong: rgb(31 30 27 / 0.7);
  --error: #7a1d12;

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1rem, 0.4rem + 3vw, 3.5rem);
  --measure: 34rem;
  --page: 90rem;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;
  --s10: 8rem;

  --line: 1.25px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
  accent-color: var(--graphite);
}

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

html {
  background: var(--oak);
  color: var(--graphite);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--graphite) var(--oak-shade);
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  font-stretch: 100%;
  background: var(--oak);
  caret-color: var(--graphite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--graphite);
  color: var(--oak);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: var(--line);
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 4px;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: var(--s2) var(--s4);
  background: var(--graphite);
  color: var(--oak);
  text-decoration: none;
  font-weight: 600;
}

.skip:focus {
  top: var(--s3);
}

/* Small capitals used for piece codes, field names and the title block. */
.label {
  font-family: var(--sans);
  font-stretch: 75%;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ strip */

.strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s4) var(--gutter);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--serif);
  font-size: 1.125rem;
  font-variation-settings: "opsz" 60; /* the embroidered mark's high contrast */
  letter-spacing: 0.09em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--s2);
}

.mark:hover {
  text-decoration: none;
}

.mark .compass {
  width: 1.15em;
  height: 1.15em;
}

.strip nav {
  display: flex;
  gap: clamp(var(--s4), 3vw, var(--s6));
}

.strip nav a {
  position: relative;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--s2);
}

.strip nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2rem;
  height: var(--line);
  background: var(--graphite);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.strip nav a:hover::after,
.strip nav a[aria-current="page"]::after {
  transform: none;
}

/* ------------------------------------------------------------- fold line */

.fold {
  /* dash-dot fold line, as drawn on a pattern */
  height: 2px;
  border: 0;
  margin: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='2'%3E%3Cpath d='M0 1h22M29 1h3' stroke='%231f1e1b' stroke-width='1.25'/%3E%3C/svg%3E") 0 0 / 39px 2px repeat-x;
  opacity: 0.6;
}

/* ---------------------------------------------------------------- pieces */

.piece {
  margin: 0;
  position: relative;
}

.piece__plate {
  position: relative;
  aspect-ratio: var(--w) / var(--h);
}

.piece__plate img {
  width: 100%;
  height: 100%;
}

.piece__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.piece__cut {
  fill: none;
  stroke: var(--graphite);
  stroke-width: var(--line);
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
}

.piece__reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 60;
  stroke-linecap: round;
}

.piece__notches {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.piece__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-top: var(--s3);
}

.piece__code .grain {
  width: 0.55rem;
  height: 1.25rem;
  flex: none;
}

.piece__letter {
  font-weight: 700;
}

/* The trace: a plotter pen running the cut line once. Visible by default;
   the animation only plays where motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .piece[data-trace] .piece__reveal {
    stroke-dasharray: 100 100;
    stroke-dashoffset: 0;
  }

  .piece[data-trace="ready"] .piece__reveal {
    stroke-dashoffset: 100;
  }

  .piece[data-trace="ready"] .piece__notches,
  .piece[data-trace="ready"] .piece__code {
    opacity: 0;
  }

  .piece[data-trace="run"] .piece__reveal {
    animation: trace 1.9s var(--ease-out) var(--delay, 0s) both;
  }

  .piece[data-trace="run"] .piece__notches,
  .piece[data-trace="run"] .piece__code {
    animation: settle 0.7s var(--ease-out) calc(var(--delay, 0s) + 1.05s) both;
  }

  .hero-set .piece:nth-child(1) { --delay: 0.15s; }
  .hero-set .piece:nth-child(2) { --delay: 0.3s; }
  .hero-set .piece:nth-child(3) { --delay: 0.45s; }
  .hero-set .piece:nth-child(4) { --delay: 0.6s; }
  .views .piece:nth-child(2) { --delay: 0.18s; }
}

@keyframes trace {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------ tag button */

/* A hang tag: chamfered at the hole end, punched, flat graphite. The shape is
   painted on ::before so the button itself keeps an unclipped focus ring. */
.tag {
  --hole: 0.22rem;
  --cut: 0.95rem;
  --hole-x: 1.3rem;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 3.25rem;
  padding: 0 var(--s5) 0 2.6rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--oak);
  font: inherit;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform-origin: var(--hole-x) 50%;
  transition: transform 0.6s var(--ease-out);
}

.tag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--graphite);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  -webkit-mask: radial-gradient(circle at var(--hole-x) 50%, transparent var(--hole), #000 calc(var(--hole) + 0.5px));
  mask: radial-gradient(circle at var(--hole-x) 50%, transparent var(--hole), #000 calc(var(--hole) + 0.5px));
  transition: background-color 0.2s ease;
}

.tag svg {
  width: 1.1rem;
  height: 0.75rem;
  flex: none;
  transition: transform 0.35s var(--ease-out);
}

.tag:hover {
  text-decoration: none;
}

.tag:hover svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: no-preference) {
  .tag:hover {
    transform: rotate(-2.5deg);
  }
}

.tag:active::before {
  background: #000;
}

.tag:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 4px;
}

.tag[aria-busy="true"] {
  cursor: progress;
}

.tag[aria-busy="true"] .tag__text::after {
  content: "…";
}

/* --------------------------------------------------------------- opening */

.opening {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(var(--s5), 4vh, var(--s8)) var(--gutter) clamp(var(--s7), 7vh, var(--s9));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.opening h1 {
  font-size: clamp(3rem, 1.9rem + 4.6vw, 6rem);
  font-weight: 380;
  letter-spacing: -0.03em;
}

.hero-set {
  --set-gap: clamp(0.75rem, 2vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  column-gap: var(--set-gap);
  row-gap: var(--s5);
  width: 100%;
  margin: clamp(var(--s5), 4vh, var(--s7)) auto clamp(var(--s5), 4vh, var(--s7));
  padding: 0;
  list-style: none;
}

/* Phones: the set as the founder's render, two by two, one shared scale. */
.hero-set .piece {
  flex: 0 0 calc((100% - var(--set-gap)) * var(--w) / 1440);
}

@media (min-width: 48rem) {
  .hero-set {
    flex-wrap: nowrap;
    /* hold the whole opening inside the first screen on short laptops */
    max-width: min(100%, max(40rem, calc((100svh - 20.5rem) * 2.42)));
  }

  .hero-set .piece {
    flex: var(--w) 1 0;
    min-width: 0;
  }
}

.opening .status {
  margin-top: var(--s4);
  font-size: 0.9375rem;
  color: var(--graphite-2);
}

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

.section {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(var(--s8), 9vw, var(--s10)) var(--gutter);
}

.section > h2,
.section-head h2 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

.section-head {
  display: grid;
  gap: var(--s5);
  max-width: 46rem;
}

.section-head p {
  font-size: 1.1875rem;
  max-width: var(--measure);
}

/* Landing: two pieces, one composition each. */
.pair {
  display: grid;
  gap: clamp(var(--s8), 8vw, var(--s9)) clamp(var(--s6), 5vw, var(--s9));
  margin-top: clamp(var(--s7), 6vw, var(--s9));
}

.solo {
  display: grid;
  gap: var(--s5);
}

@media (min-width: 48rem) {
  /* Both pieces stand on one baseline, their captions on one line. */
  .pair {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: 0;
  }

  .solo {
    grid-row: span 2;
    grid-template-rows: subgrid;
  }

  .solo .piece {
    align-self: end;
  }
}

.solo .piece {
  width: min(100%, calc(var(--w) / 723 * 30rem));
  margin-inline: auto;
}

.solo h3 {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
}

.solo__text {
  display: grid;
  gap: var(--s3);
  max-width: 28rem;
  margin-inline: auto;
  text-align: center;
}

.more {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--s7), 6vw, var(--s9));
}

/* ------------------------------------------------------- drop page: title */

.drop-title {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(var(--s5), 4vw, var(--s7)) var(--gutter) clamp(var(--s6), 4vw, var(--s7));
  display: grid;
  gap: var(--s5);
}

@media (min-width: 64rem) {
  .drop-title {
    grid-template-columns: auto minmax(0, 34rem);
    justify-content: space-between;
    align-items: end;
    column-gap: var(--s8);
  }
}

.drop-title h1 {
  font-size: clamp(3rem, 1.9rem + 4.6vw, 6rem);
  font-weight: 380;
  letter-spacing: -0.03em;
}

.drop-title__aside {
  display: grid;
  gap: var(--s5);
}

.drop-title p {
  font-size: 1.1875rem;
  max-width: var(--measure);
}

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  align-items: center;
}

.jump__links {
  display: flex;
  gap: var(--s5);
  white-space: nowrap;
}

.jump__links a {
  padding-block: var(--s2);
}

/* ------------------------------------------------- drop page: one piece */

/* Phones see the garment first; desktop sets the words beside it. */
.garment {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(var(--s7), 6vw, var(--s9)) var(--gutter);
  display: grid;
  grid-template-areas: "head" "visuals" "body";
  gap: var(--s6);
}

@media (min-width: 64rem) {
  .garment {
    grid-template-columns: minmax(17rem, 3fr) 9fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "head visuals" "body visuals";
    column-gap: var(--s8);
    row-gap: var(--s5);
    align-items: start;
  }
}

.garment > h2 {
  grid-area: head;
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
}

.garment__visuals {
  grid-area: visuals;
  min-width: 0;
}

.garment__body {
  grid-area: body;
  display: grid;
  gap: var(--s5);
  align-content: start;
}

.garment__body > p {
  max-width: 30rem;
}

/* Both views at one shared scale: every garment uses the same px per unit. */
.views {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--s7) var(--s5);
  margin: 0;
  padding: 0;
}

.views .piece {
  flex: 0 0 100%;
  max-width: calc(var(--w) * 1px * 0.62);
}

@media (min-width: 40rem) {
  .views .piece {
    flex: 0 0 calc((100% - var(--s5)) * var(--w) / 1440);
    max-width: none;
  }
}

/* Detail views: each placement ring enlarged, the way a technical drawing
   calls out a detail beside the piece. */
/* Lenses top out at the crops' own 196px, so a close-up is never upscaled
   on a 1x screen; phones get two to a row so each stays near that size. */
.details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 12.25rem));
  justify-content: center;
  gap: var(--s5) clamp(var(--s4), 3vw, var(--s7));
  margin: clamp(var(--s6), 5vw, var(--s8)) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 39.99rem) {
  .details > .detail:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.5rem);
  }
}

@media (min-width: 40rem) {
  .details {
    grid-template-columns: repeat(var(--n, 3), minmax(0, 12.25rem));
  }
}

.detail {
  display: grid;
  gap: var(--s3);
  justify-items: center;
}

.detail__lens {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: var(--line) dashed var(--graphite);
  padding: 4px;
}

.detail__lens img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.detail__cap {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-align: center;
  white-space: nowrap;
}

.detail__cap .num,
.notes .num,
.steps .num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--graphite);
  color: var(--oak);
  font-stretch: 75%;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0;
  line-height: 1;
  transition: transform 0.3s var(--ease-out);
}

/* placement marks: rings around each embroidery, drill holes at the pockets */
.place {
  fill: none;
  stroke: var(--graphite);
  stroke-width: var(--line);
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.place-tag circle {
  fill: var(--graphite);
}

.place-tag text {
  fill: var(--oak);
  font-family: var(--sans);
  font-stretch: 75%;
  font-weight: 700;
  font-size: 22px;
  text-anchor: middle;
  dominant-baseline: central;
}

.drill {
  fill: none;
  stroke: var(--graphite);
  stroke-width: var(--line);
  vector-effect: non-scaling-stroke;
}

.place-group,
.detail__lens {
  transition: opacity 0.25s ease;
}

.garment[data-active] .place-group {
  opacity: 0.35;
}

.garment[data-active] .detail:not(.is-active) .detail__lens {
  opacity: 0.45;
}

.garment[data-active] .place-group.is-active,
.garment[data-active] .place-group.is-active .place {
  stroke-dasharray: none;
  stroke-width: 2.5px;
}

.garment[data-active] .detail.is-active .detail__lens {
  border-style: solid;
  border-width: 2px;
  padding: 3px;
}

.notes {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--line) solid var(--rule-strong);
}

.notes li {
  border-bottom: var(--line) solid var(--rule);
}

.note,
.notes .plain {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
}

.note {
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.note:hover > span:last-child,
.note[aria-pressed="true"] > span:last-child {
  text-decoration: underline;
  text-decoration-thickness: var(--line);
  text-underline-offset: 0.22em;
}

.note:focus-visible {
  outline-offset: 2px;
}

.notes .num {
  transform: translateY(0.3rem);
}

.note.is-active .num {
  transform: translateY(0.3rem) scale(1.18);
}

.notes .dash {
  display: block;
  width: 0.75rem;
  height: var(--line);
  margin-top: 0.75rem;
  background: var(--graphite);
  justify-self: center;
}

/* spec label block, the way a pattern piece carries its info */
.spec {
  display: grid;
  grid-template-columns: max-content 1fr;
  margin: 0;
  border-top: var(--line) solid var(--rule-strong);
}

.spec dt,
.spec dd {
  margin: 0;
  padding: var(--s3) 0;
  border-bottom: var(--line) solid var(--rule);
}

.spec dt {
  padding-right: var(--s6);
  padding-top: calc(var(--s3) + 0.2rem);
}


.fineprint {
  font-size: 0.875rem;
  color: var(--graphite-2);
  max-width: 30rem;
}

/* ---------------------------------------------------------------- notify */

.notify {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(var(--s8), 9vw, var(--s10)) var(--gutter);
  display: grid;
  gap: var(--s7);
}

@media (min-width: 64rem) {
  .notify {
    grid-template-columns: 5fr 7fr;
    gap: var(--s8);
    align-items: start;
  }
}

.notify__intro {
  display: grid;
  gap: var(--s5);
}

.notify__intro h2 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

.notify__intro p {
  max-width: 28rem;
  font-size: 1.1875rem;
}

.sheet-form {
  display: grid;
  border-top: var(--line) solid var(--rule-strong);
}

.field {
  display: grid;
  gap: var(--s2) var(--s5);
  padding: var(--s4) 0;
  border-bottom: var(--line) solid var(--rule);
  margin: 0;
  min-width: 0;
}

@media (min-width: 40rem) {
  .field {
    grid-template-columns: 9rem 1fr;
    align-items: center;
  }
}


.field input[type="email"] {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0 0.1rem;
  border: 0;
  border-bottom: var(--line) solid var(--graphite);
  border-radius: 0;
  background: transparent;
  color: var(--graphite);
  font: inherit;
  font-size: 1.1875rem;
  -webkit-appearance: none;
  appearance: none;
}

.field input[type="email"]::placeholder {
  color: var(--graphite-2);
  opacity: 1;
}

.field input[type="email"]:focus {
  outline: none;
  border-bottom-width: 2px;
}

.field input[type="email"]:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 6px;
}

.field input[aria-invalid="true"] {
  border-bottom-color: var(--error);
}








.form-end {
  display: grid;
  gap: var(--s4);
  justify-items: start;
  padding-top: var(--s5);
}

.form-msg {
  min-height: 1.55em;
  font-size: 0.9375rem;
}

.form-note {
  font-size: 0.875rem;
  color: var(--graphite-2);
  max-width: 30rem;
}

.sent:focus {
  outline: none;
}

.sent:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 4px;
}

.form-msg[data-tone="error"] {
  color: var(--error);
  font-weight: 600;
}

.sheet-form[data-state="sent"] .field,
.sheet-form[data-state="sent"] .form-end > .tag,
.sheet-form[data-state="sent"] .form-note {
  display: none;
}

.sent {
  display: none;
  gap: var(--s3);
  padding: var(--s5) 0;
  border-bottom: var(--line) solid var(--rule);
}

.sheet-form[data-state="sent"] .sent {
  display: grid;
}

.sent p:first-child {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  line-height: 1.1;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------------------- pre-order */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s4) var(--s6);
}

.hero-actions__more,
.quiet-link {
  font-stretch: 75%;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-block: var(--s3);
}

.preorder {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(var(--s7), 6vw, var(--s9)) var(--gutter);
  display: grid;
  gap: var(--s6);
}

@media (min-width: 64rem) {
  .preorder {
    grid-template-columns: minmax(17rem, 3fr) 9fr;
    column-gap: var(--s8);
    align-items: start;
  }
}

.preorder > h2 {
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
}

.preorder__body {
  display: grid;
  gap: var(--s6);
  justify-items: start;
  max-width: 40rem;
}

.preorder__body > .spec,
.preorder__body > .steps {
  width: 100%;
}

.preorder__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s5);
}

.preorder__amount {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem);
  font-weight: 380;
  line-height: 1;
  letter-spacing: -0.02em;
}

.preorder__note {
  max-width: 22rem;
  font-size: 0.9375rem;
  color: var(--graphite-2);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--line) solid var(--rule-strong);
}

.steps li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: var(--line) solid var(--rule);
}

.steps .num {
  transform: translateY(0.3rem);
}

.steps strong {
  font-weight: 600;
}

/* Outlined numerals: the steps are read, not pressed (the filled discs above
   are the interactive placement notes). */
.steps .num {
  background: transparent;
  color: var(--graphite);
  box-shadow: inset 0 0 0 var(--line) var(--graphite);
}

.doc-cta {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(var(--s8), 8vw, var(--s10));
}

/* Phones: a slim pre-order bar while no Pre-order button is on screen. */
.preorder-bar {
  display: none;
}

@media (max-width: 47.99rem) {
  .preorder-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
    background: var(--graphite);
    color: var(--oak);
    text-decoration: none;
    transition: transform 0.35s var(--ease-out), visibility 0s;
  }

  .preorder-bar:focus-visible {
    outline: 2px solid var(--oak);
    outline-offset: -6px;
  }

  html {
    scroll-padding-bottom: calc(3.5rem + env(safe-area-inset-bottom));
  }

  .preorder-bar.is-hidden {
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.35s var(--ease-out), visibility 0s 0.35s;
  }

  .preorder-bar__what {
    font-size: 0.9375rem;
  }

  .preorder-bar__cta {
    font-stretch: 75%;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 0.22em;
  }

  .sheet-end {
    padding-bottom: calc(var(--s9) + env(safe-area-inset-bottom));
  }
}

.testmode {
  margin: 0;
  padding: var(--s2) var(--gutter);
  background: var(--oak-shade);
  font-size: 0.8125rem;
  text-align: center;
  color: var(--graphite);
}

.sheet-end__links span {
  white-space: nowrap;
}

/* ------------------------------------------------- privacy and other docs */

/* Ruled rows, like the spec block: the heading left, the text right. */
.doc {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(var(--s6), 5vw, var(--s8)) var(--gutter) clamp(var(--s8), 8vw, var(--s10));
}

.doc__row {
  display: grid;
  gap: var(--s3) var(--s8);
  padding: var(--s5) 0 var(--s6);
  border-top: var(--line) solid var(--rule-strong);
}

.doc__row:last-child {
  border-bottom: var(--line) solid var(--rule-strong);
}

@media (min-width: 64rem) {
  .doc__row {
    grid-template-columns: minmax(17rem, 3fr) 9fr;
  }
}

.doc__row h2 {
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  line-height: 1.1;
}

.doc__text {
  display: grid;
  gap: var(--s4);
  max-width: 40rem;
}

.doc-date {
  font-size: 0.9375rem;
  color: var(--graphite-2);
}

.form-note a {
  color: var(--graphite);
}

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

.lost {
  max-width: var(--page);
  min-height: 60svh;
  margin: 0 auto;
  padding: clamp(var(--s8), 10vw, var(--s10)) var(--gutter);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--s5);
}

.lost h1 {
  font-size: clamp(3rem, 1.9rem + 4.6vw, 6rem);
  font-weight: 380;
  letter-spacing: -0.03em;
}

.lost p {
  font-size: 1.1875rem;
  max-width: var(--measure);
}

/* ------------------------------------------------------- sheet end (footer) */

.sheet-end {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s8) var(--gutter) var(--s6);
  display: grid;
  gap: var(--s6);
}

.titleblock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-top: var(--line) solid var(--graphite);
  border-left: var(--line) solid var(--graphite);
}

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

.titleblock div {
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding: var(--s3) var(--s4) var(--s4);
  border-right: var(--line) solid var(--graphite);
  border-bottom: var(--line) solid var(--graphite);
}

.titleblock dt {
  color: var(--graphite-2);
}

.titleblock dd {
  margin: 0;
  font-size: 1rem;
}

.titleblock .brand dd {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--serif);
  font-variation-settings: "opsz" 60;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.titleblock .brand,
.titleblock div:last-child {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  .titleblock .brand,
  .titleblock div:last-child {
    grid-column: auto;
  }
}

.titleblock .brand .compass {
  width: 1.1em;
  height: 1.1em;
}

.sheet-end__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3) var(--s6);
  font-size: 0.875rem;
  color: var(--graphite-2);
}

.sheet-end__base a {
  color: var(--graphite);
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 26rem) {
  .strip {
    padding-block: var(--s3);
  }

  .mark {
    font-size: 1rem;
  }

  .strip nav {
    gap: var(--s4);
  }

  .strip nav a {
    font-size: 0.75rem;
  }
}

@media (max-width: 22rem) {
  .strip {
    gap: var(--s3);
  }

  .mark {
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
  }

  .strip nav {
    gap: var(--s3);
  }

  .strip nav a {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
  }
}

@media print {
  .strip nav,
  .notify,
  .tag {
    display: none;
  }

  .piece[data-trace] .piece__reveal {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }

  .piece[data-trace] .piece__notches,
  .piece[data-trace] .piece__code {
    opacity: 1 !important;
    animation: none !important;
  }
}