/* ==========================================================================
   Missing Piece Studio, missingpiecestudio.ca
   One stylesheet for the whole site. Token block first.
   Palette sampled from Mika's own photographs of the Algarve coast:
   turquoise water, gold cliffs, a coral sunset, a violet dusk sky.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts, self hosted. Never hotlinked.
   Variable woff2, latin and latin-ext subsets. The browser fetches latin-ext
   only when a page actually uses those glyphs, which keeps the English pages
   lighter than the French ones.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/fraunces-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/karla-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: 'Karla';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/karla-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrainsmono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrainsmono-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens

   Contrast, measured, not guessed:
     night on cream     16.0:1    all body text
     night on sand      14.4:1
     violet on cream     7.6:1    headings and links
     cream on violet     8.1:1    primary button
     night on marigold  10.6:1    second button
     night on sunset     5.1:1    accent fills
     cream on sea        5.0:1    dark band UI
   Sunset and marigold never carry light text.
   -------------------------------------------------------------------------- */

:root {
  --cream:    #FFF6EC;
  --sand:     #FDE7CE;
  --night:    #241436;
  --violet:   #6A2CB0;
  --sea:      #0E7C7B;
  --sunset:   #F4552F;
  --marigold: #FFC24A;

  /* shades used only for the hard offset shadow under a coloured control */
  --violet-deep:   #4A1C7C;
  --marigold-deep: #D99A22;
  --sea-deep:      #0A5958;

  /* alphas, no new hues */
  --night-soft:  rgba(36, 20, 54, .74);
  --night-faint: rgba(36, 20, 54, .54);
  --night-edge:  rgba(36, 20, 54, .13);
  --cream-soft:  rgba(255, 246, 236, .80);
  --cream-faint: rgba(255, 246, 236, .60);

  /* type */
  --face-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --face-body:    'Karla', 'Helvetica Neue', Arial, sans-serif;
  --face-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-mono:  .75rem;
  --fs-small: .9375rem;
  --fs-body:  1.0625rem;
  --fs-lead:  clamp(1.1875rem, 1.09rem + .42vw, 1.4375rem);
  --fs-h3:    clamp(1.1875rem, 1.06rem + .55vw, 1.5rem);
  --fs-h2:    clamp(1.75rem, 1.32rem + 1.83vw, 2.75rem);
  --fs-h1:    clamp(2.25rem, 1.42rem + 3.54vw, 4.5rem);
  --fs-price: clamp(3rem, 2.19rem + 3.47vw, 5rem);

  /* space, mobile first */
  --gap-xs: .5rem;
  --gap-s:  .875rem;
  --gap-m:  1.5rem;
  --gap-l:  2.25rem;
  --gap-xl: clamp(3.25rem, 2.44rem + 3.47vw, 5.25rem);

  --wrap:    72rem;
  --measure: 62ch;

  /* shape */
  --r-s:  14px;
  --r-m:  22px;
  --r-l:  30px;
  --r-pill: 999px;

  /* the scalloped wave divider */
  --wave-h: 22px;
  --wave-w: 44px;
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--night);
  font-family: var(--face-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, p, ul, ol, dl, figure, table { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--violet); }

/* Focus is violet on light ground, marigold on dark, always visible. */
:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--night :focus-visible,
.site-foot :focus-visible,
.band--violet :focus-visible { outline-color: var(--marigold); }

::selection { background: var(--marigold); color: var(--night); }

/* --------------------------------------------------------------------------
   4. Signature: the scalloped wave divider
   A row of circles punched out of the incoming band colour, so one colour
   band appears to lap over the next like water on sand. Set --wave-to to the
   colour of the band below and --wave-from to the band above.
   -------------------------------------------------------------------------- */

.wave {
  height: var(--wave-h);
  background-color: var(--wave-from, var(--cream));
  background-repeat: repeat-x;
  background-size: var(--wave-w) var(--wave-h);
  background-image:
    radial-gradient(circle at calc(var(--wave-w) / 2) var(--wave-h),
      transparent calc(var(--wave-h) - 1px), var(--wave-to, var(--sand)) var(--wave-h));
  /* nudge up so the band above and the scallop meet with no seam */
  margin-bottom: -1px;
}

/* Flip it so the scallop bites upward instead of down. */
.wave--up {
  background-image:
    radial-gradient(circle at calc(var(--wave-w) / 2) 0,
      transparent calc(var(--wave-h) - 1px), var(--wave-to, var(--sand)) var(--wave-h));
}

/* The pairings actually used, named for the band above and the band below,
   so page markup never carries an inline style. */
.wave--cream-sand  { --wave-from: var(--cream);  --wave-to: var(--sand); }
.wave--sand-cream  { --wave-from: var(--sand);   --wave-to: var(--cream); }
.wave--cream-night { --wave-from: var(--cream);  --wave-to: var(--night); }
.wave--sand-night  { --wave-from: var(--sand);   --wave-to: var(--night); }
.wave--cream-violet{ --wave-from: var(--cream);  --wave-to: var(--violet); }
.wave--violet-cream{ --wave-from: var(--violet); --wave-to: var(--cream); }
.wave--night-cream { --wave-from: var(--night);  --wave-to: var(--cream); }
.wave--sand-violet { --wave-from: var(--sand);   --wave-to: var(--violet); }

/* --------------------------------------------------------------------------
   5. Layout and bands
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 46rem) { .wrap { padding-inline: 2rem; } }

.band { padding-block: var(--gap-xl); }
.band--sand   { background: var(--sand); }
.band--night  { background: var(--night); color: var(--cream); }
.band--violet { background: var(--violet); color: var(--cream); }

.band--night p, .band--violet p { color: var(--cream-soft); }
.band--night h2, .band--night h3,
.band--violet h2, .band--violet h3 { color: var(--cream); }
.band--night a, .band--violet a { color: var(--marigold); }

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

.skip {
  position: absolute;
  left: -9999px;
  background: var(--violet);
  color: var(--cream);
  padding: .8rem 1.1rem;
  border-radius: var(--r-pill);
  z-index: 60;
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { position: fixed; left: .75rem; top: .75rem; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-head { position: relative; z-index: 3; padding-block: 1.125rem .5rem; }

.head-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: .75rem;
  column-gap: 1rem;
}

.wordmark {
  font-family: var(--face-display);
  font-variation-settings: 'opsz' 40, 'SOFT' 30, 'WONK' 0;
  font-weight: 700;
  font-size: 1.4375rem;
  line-height: 1;
  letter-spacing: -.022em;
  color: var(--violet);
  text-decoration: none;
}
.wordmark:hover { color: var(--sunset); }

.nav {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .25rem;
  font-size: var(--fs-small);
  font-weight: 700;
}

.nav a {
  color: var(--night);
  text-decoration: none;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
}
.nav a:hover { background: var(--sand); color: var(--violet); }
.nav a[aria-current='page'] { background: var(--violet); color: var(--cream); }

.lang {
  /* Sit beside the wordmark on row one. Without this the nav, which spans
     both columns on row two, pushes the toggle down to a third row. */
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--cream);
  background: var(--night);
  text-decoration: none;
  border-radius: var(--r-pill);
  padding: .45rem .85rem;
  line-height: 1;
}
.lang:hover { background: var(--sea); }

@media (min-width: 50rem) {
  .head-inner { grid-template-columns: auto 1fr auto; }
  .nav { grid-column: 2; justify-content: flex-end; gap: .25rem; }
  .lang { grid-row: 1; grid-column: 3; }
  .wordmark { font-size: 1.625rem; }
}

/* --------------------------------------------------------------------------
   7. Type
   -------------------------------------------------------------------------- */

h1, .h1 {
  font-family: var(--face-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -.028em;
  color: var(--night);
  text-wrap: balance;
  max-width: 16ch;
}

/* The last phrase of the H1, set in the sunrise gradient. */
.sunrise {
  font-style: normal;
  background-image: linear-gradient(96deg, var(--violet) 0%, var(--sunset) 54%, var(--marigold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* if background-clip:text is unsupported the text stays violet and readable */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sunrise { color: var(--violet); -webkit-text-fill-color: currentColor; }
}

h2, .h2 {
  font-family: var(--face-display);
  font-variation-settings: 'opsz' 72, 'SOFT' 30, 'WONK' 0;
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -.022em;
  color: var(--night);
  text-wrap: balance;
  max-width: 20ch;
}

h3, .h3 {
  font-family: var(--face-display);
  font-variation-settings: 'opsz' 30, 'SOFT' 30, 'WONK' 0;
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -.014em;
  color: var(--night);
}

.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 44ch; }

p { max-width: var(--measure); }
p + p { margin-top: 1.05em; }
strong { font-weight: 800; }

/* Utility face: prices, tags, spec labels only. */
.spec {
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sea);
  font-variant-numeric: lining-nums tabular-nums;
}
.band--night .spec, .band--violet .spec { color: var(--marigold); }

/* A mono label in a coloured pill. */
.tag {
  display: inline-block;
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--night);
  font-variant-numeric: lining-nums tabular-nums;
}
.tag--sunset   { background: var(--sunset);   color: var(--night); }
.tag--marigold { background: var(--marigold); color: var(--night); }
.tag--sea      { background: var(--sea);      color: var(--cream); }
.tag--violet   { background: var(--violet);   color: var(--cream); }

.stack > * + * { margin-top: var(--gap-m); }

.mt-xs { margin-top: .5rem; }
.mt-s  { margin-top: var(--gap-s); }
.mt-m  { margin-top: var(--gap-m); }
.mt-l  { margin-top: var(--gap-l); }

/* --------------------------------------------------------------------------
   8. Buttons
   The house detail: a hard offset shadow, no blur, in a deeper shade of the
   button's own colour. It presses down on click.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--face-body);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  padding: .95rem 1.5rem;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-align: center;
  background: var(--violet);
  color: var(--cream);
  box-shadow: 0 4px 0 0 var(--violet-deep);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 0 var(--violet-deep); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 0 var(--violet-deep); }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }

.btn--marigold {
  background: var(--marigold);
  color: var(--night);
  box-shadow: 0 4px 0 0 var(--marigold-deep);
}
.btn--marigold:hover { box-shadow: 0 5px 0 0 var(--marigold-deep); }
.btn--marigold:active { box-shadow: 0 0 0 0 var(--marigold-deep); }

.btn--sea {
  background: var(--sea);
  color: var(--cream);
  box-shadow: 0 4px 0 0 var(--sea-deep);
}
.btn--sea:hover { box-shadow: 0 5px 0 0 var(--sea-deep); }
.btn--sea:active { box-shadow: 0 0 0 0 var(--sea-deep); }

.link-quiet {
  font-weight: 800;
  color: var(--violet);
  text-decoration-thickness: 2px;
  text-underline-offset: .26em;
  text-decoration-color: var(--marigold);
}
.link-quiet:hover { text-decoration-color: var(--sunset); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-s);
}

/* --------------------------------------------------------------------------
   9. Hero and the sunrise glow
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(1.5rem, .69rem + 3.47vw, 3.5rem) var(--gap-xl);
  overflow: clip;
}

/* The glow sits behind everything and never intercepts a click. */
.glow {
  position: absolute;
  top: clamp(-17rem, -13rem - 8vw, -9rem);
  right: clamp(-12rem, -8rem - 8vw, -5rem);
  width: clamp(21rem, 15rem + 26vw, 36rem);
  aspect-ratio: 1;
  /* closest-side so the gradient reaches full transparency exactly at the
     box edge. Anything else leaves a hard cut where the element stops. */
  background: radial-gradient(circle closest-side,
    var(--marigold) 0%, var(--sunset) 52%, rgba(244, 85, 47, 0) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: glow-up 1100ms ease-out 120ms forwards;
}
@keyframes glow-up { to { opacity: .55; } }

.hero > .wrap, .hero .wrap { position: relative; z-index: 1; }

.hero h1 { max-width: 15ch; }

/* The single sweep across the H1 gradient, once, on load. */
.sunrise {
  background-size: 220% 100%;
  background-position: 100% 0;
  animation: sweep 1200ms cubic-bezier(.22, .68, .18, 1) 220ms forwards;
}
@keyframes sweep { to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow { opacity: .55; animation: none; }
  .sunrise { background-size: 100% 100%; background-position: 0 0; animation: none; }
  .btn { transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   10. Photographs
   Generous radius, hard offset shadow in an accent colour, no blur.
   -------------------------------------------------------------------------- */

.shot {
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: 10px 10px 0 0 var(--sea);
  background: var(--sand);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--sunset   { box-shadow: 10px 10px 0 0 var(--sunset); }
.shot--marigold { box-shadow: 10px 10px 0 0 var(--marigold); }
.shot--violet   { box-shadow: 10px 10px 0 0 var(--violet); }
.shot--left     { box-shadow: -10px 10px 0 0 var(--violet); }

@media (min-width: 46rem) {
  .shot { box-shadow: 16px 16px 0 0 var(--sea); }
  .shot--sunset   { box-shadow: 16px 16px 0 0 var(--sunset); }
  .shot--marigold { box-shadow: 16px 16px 0 0 var(--marigold); }
  .shot--violet   { box-shadow: 16px 16px 0 0 var(--violet); }
  .shot--left     { box-shadow: -16px 16px 0 0 var(--violet); }
}

.hero-shot { margin-top: var(--gap-l); }
.hero-shot img { aspect-ratio: 16 / 10; }
@media (min-width: 46rem) { .hero-shot img { aspect-ratio: 16 / 6; } }

/* Photo beside prose */
.split { display: grid; gap: var(--gap-xl); align-items: center; }
@media (min-width: 52rem) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .split--flip > :first-child { order: 2; }
}
.split img { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   11. Panels, steps, lists, cards
   -------------------------------------------------------------------------- */

.panel {
  background: var(--cream);
  border-radius: var(--r-m);
  padding: var(--gap-m);
  box-shadow: 0 3px 0 0 var(--night-edge);
}
.band--sand .panel { background: var(--cream); }
.panel .tag { margin-bottom: .75rem; }

.pair { display: grid; gap: var(--gap-m); margin-top: var(--gap-l); }
@media (min-width: 46rem) { .pair { grid-template-columns: 1fr 1fr; gap: var(--gap-l); } }

.steps { display: grid; gap: var(--gap-m); margin-top: var(--gap-l); }
@media (min-width: 46rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* The steps sit on a cream band, so they take sand to read as cards. */
.step {
  background: var(--sand);
  border-radius: var(--r-m);
  padding: var(--gap-m);
}
.band--sand .step { background: var(--cream); }
.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-family: var(--face-mono);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .875rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.step:nth-child(1) .num { background: var(--sunset);   color: var(--night); }
.step:nth-child(2) .num { background: var(--marigold); color: var(--night); }
.step:nth-child(3) .num { background: var(--sea);      color: var(--cream); }
.step:nth-child(4) .num { background: var(--violet);   color: var(--cream); }
.step h3 { margin-bottom: .4rem; }

/* Included list. A coloured dot per item, cycling through the accents. */
.ticks { display: grid; gap: .8rem; margin-top: var(--gap-l); }
@media (min-width: 46rem) { .ticks { grid-template-columns: 1fr 1fr; column-gap: var(--gap-l); } }
.ticks li { position: relative; padding-left: 1.9rem; max-width: 42ch; }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .48em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--violet);
}
.ticks li:nth-child(4n+2)::before { background: var(--sunset); }
.ticks li:nth-child(4n+3)::before { background: var(--marigold); }
.ticks li:nth-child(4n+4)::before { background: var(--sea); }

/* Sample cards */
.cards { display: grid; gap: var(--gap-m); margin-top: var(--gap-l); }
@media (min-width: 46rem) { .cards { grid-template-columns: 1fr 1fr; gap: var(--gap-l); } }

.card {
  display: block;
  background: var(--cream);
  border-radius: var(--r-m);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 8px 8px 0 0 var(--violet);
  transition: transform .14s ease, box-shadow .14s ease;
}
.card--sunset   { box-shadow: 8px 8px 0 0 var(--sunset); }
.card--marigold { box-shadow: 8px 8px 0 0 var(--marigold); }
.card--sea      { box-shadow: 8px 8px 0 0 var(--sea); }
.card:hover { transform: translate(-2px, -2px); box-shadow: 12px 12px 0 0 var(--violet); }
.card--sunset:hover   { box-shadow: 12px 12px 0 0 var(--sunset); }
.card--marigold:hover { box-shadow: 12px 12px 0 0 var(--marigold); }
.card--sea:hover      { box-shadow: 12px 12px 0 0 var(--sea); }
.card--night { box-shadow: 8px 8px 0 0 var(--night); }
.card--night:hover { box-shadow: 12px 12px 0 0 var(--night); }

/* The restaurant sample carries no photograph, so its card shows the design
   itself rather than a picture of nothing. Same 16/10 box as .card img. */
.card-type {
  aspect-ratio: 16 / 10;
  background: var(--night);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  text-align: center;
  padding: var(--gap-m);
}
.card-type span {
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--marigold);
}
.card-type strong {
  font-family: var(--face-display);
  font-variation-settings: 'opsz' 72, 'SOFT' 30, 'WONK' 0;
  font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--cream);
}
.card-type em {
  font-style: normal;
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-top: .4rem;
}

.card img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.card-body { padding: var(--gap-m); }
.card h3 { margin-top: .75rem; }
.card p { margin-top: .5rem; color: var(--night-soft); font-size: var(--fs-small); }

@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }

/* --------------------------------------------------------------------------
   12. Pricing
   -------------------------------------------------------------------------- */

.price-block {
  background: var(--night);
  color: var(--cream);
  border-radius: var(--r-l);
  padding: var(--gap-m);
  margin-top: var(--gap-l);
  max-width: 36rem;
  box-shadow: 10px 10px 0 0 var(--violet);
}
@media (min-width: 46rem) { .price-block { padding: var(--gap-l); box-shadow: 16px 16px 0 0 var(--violet); } }
.price-block p { color: var(--cream-soft); }
.price-block strong { color: var(--cream); }
.price-block .spec { color: var(--marigold); }

.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .875rem; }

.price-was {
  font-family: var(--face-mono);
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  color: var(--cream-faint);
  text-decoration: line-through;
  text-decoration-color: var(--sunset);
  text-decoration-thickness: 3px;
  font-variant-numeric: lining-nums tabular-nums;
}
.price-now {
  font-family: var(--face-mono);
  font-size: var(--fs-price);
  font-weight: 700;
  line-height: 1;
  color: var(--marigold);
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.price-now .per { font-size: .28em; font-weight: 500; letter-spacing: .01em; color: var(--cream); }

.runon { margin-top: var(--gap-m); }

.addons { width: 100%; max-width: 36rem; margin-top: var(--gap-m); border-collapse: separate; border-spacing: 0 .5rem; }
.addons td {
  padding: .9rem 1.1rem;
  background: var(--cream);
  vertical-align: middle;
  font-weight: 600;
}
.addons tr td:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.addons tr td:last-child {
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  font-family: var(--face-mono);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--violet);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

.fineprint { display: grid; gap: var(--gap-m); margin-top: var(--gap-l); }
@media (min-width: 52rem) { .fineprint { grid-template-columns: 1fr 1fr; gap: var(--gap-l); } }
.fineprint > div {
  background: var(--sand);
  border-radius: var(--r-m);
  padding: var(--gap-m);
  max-width: 44ch;
}
.band--sand .fineprint > div { background: var(--cream); }
.fineprint h3 { margin-bottom: .4rem; }

/* --------------------------------------------------------------------------
   13. Prose, About and Privacy
   -------------------------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 1.9em; }
.prose ul { display: grid; gap: .55rem; }
.prose ul li { position: relative; padding-left: 1.7rem; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: .95rem;
  height: .95rem;
  border-radius: 50%;
  background: var(--sea);
}
.prose ul li:nth-child(even)::before { background: var(--marigold); }

.updated {
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--night-faint);
  margin-top: var(--gap-l);
}

/* --------------------------------------------------------------------------
   14. Contact form
   -------------------------------------------------------------------------- */

.contact-grid { display: grid; gap: var(--gap-xl); margin-top: var(--gap-l); }
@media (min-width: 52rem) {
  .contact-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}

.form-card {
  background: var(--cream);
  border-radius: var(--r-l);
  padding: var(--gap-m);
  box-shadow: 10px 10px 0 0 var(--sea);
}
@media (min-width: 46rem) { .form-card { padding: var(--gap-l); } }

.field { display: grid; gap: .4rem; margin-bottom: var(--gap-m); }
.field label { font-size: var(--fs-small); font-weight: 800; }

.field input, .field textarea {
  font-family: var(--face-body);
  font-size: var(--fs-body);
  color: var(--night);
  background: var(--cream);
  border: 2px solid var(--night-edge);
  border-radius: var(--r-s);
  padding: .8rem .9rem;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--sea); }
.field input:focus, .field textarea:focus { border-color: var(--violet); }
.field input[aria-invalid='true'] { border-color: var(--sunset); }

.form-status {
  margin-top: var(--gap-m);
  padding: .95rem 1.1rem;
  border-radius: var(--r-m);
  background: var(--marigold);
  color: var(--night);
  font-weight: 700;
  max-width: 46ch;
}
.form-status[hidden] { display: none; }
.form-status[data-state='error'] { background: var(--sunset); }

.aside {
  background: var(--violet);
  color: var(--cream);
  border-radius: var(--r-l);
  padding: var(--gap-m);
}
@media (min-width: 46rem) { .aside { padding: var(--gap-l); } }
.aside p { color: var(--cream); }
.aside p + p { margin-top: .75rem; }
.aside a { color: var(--marigold); font-weight: 800; }

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

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-foot { background: var(--night); color: var(--cream); padding-block: var(--gap-xl) var(--gap-l); }
.site-foot p { color: var(--cream-soft); font-size: var(--fs-small); }
.site-foot p + p { margin-top: .45rem; }
.site-foot a { color: var(--cream); text-underline-offset: .22em; text-decoration-color: var(--marigold); }
.site-foot a:hover { color: var(--marigold); }

.foot-name {
  font-family: var(--face-display);
  font-variation-settings: 'opsz' 40, 'SOFT' 30, 'WONK' 0;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cream) !important;
}

.foot-links { margin-top: var(--gap-m) !important; font-weight: 800; }
.foot-tag { margin-top: var(--gap-m) !important; color: var(--cream-faint) !important; }

@media (min-width: 46rem) {
  .foot-cols { display: grid; grid-template-columns: 1fr auto; gap: var(--gap-l); align-items: end; }
  .foot-links { margin-top: 0 !important; }
}

/* A placeholder that still needs a real value stays visibly bracketed. */
.needs-value {
  font-family: var(--face-mono);
  font-size: .8125em;
  color: var(--marigold);
}
.band--sand .needs-value, .band { }


/* --------------------------------------------------------------------------
   15b. Missing piece components
   Added when the studio was renamed. Everything here reuses the existing
   tokens: no new hues, no new faces, no new radii.
   -------------------------------------------------------------------------- */

/* The price, parked in the header so it is on screen at every scroll position.
   Sand chip on cream, Night text, so it never fails contrast. */
.pricepill {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .4rem .8rem;
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--night);
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
}
.pricepill:hover { background: var(--marigold); }
.pricepill .pricepill-alt { color: var(--sea); letter-spacing: .04em; }

/* The pill rides beside the language toggle, on row one, at every width. */
.head-end {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.head-end .lang { grid-row: auto; grid-column: auto; }
@media (min-width: 50rem) { .head-end { grid-column: 3; } }
@media (max-width: 30rem) { .pricepill-alt { display: none; } }

/* ---- The gap: a listing with the website line missing, then the site ---- */

.gapvis {
  display: grid;
  gap: var(--gap-m);
  justify-items: center;
  margin-top: var(--gap-l);
}
@media (min-width: 52rem) {
  .gapvis { grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gap-l); }
}

.listing, .preview {
  width: 100%;
  max-width: 22rem;
  background: var(--cream);
  border-radius: var(--r-m);
  padding: var(--gap-s);
  box-shadow: 10px 10px 0 0 var(--night);
  text-align: left;
}
.preview { box-shadow: 10px 10px 0 0 var(--sea); }

.listing-name, .preview-name {
  font-family: var(--face-display);
  font-variation-settings: 'opsz' 24, 'SOFT' 30, 'WONK' 0;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.15;
  color: var(--night);
}
.listing-meta {
  font-size: var(--fs-small);
  color: var(--night-soft);
  margin-top: .2rem;
}
.listing-stars { color: var(--sunset); letter-spacing: .06em; }

.listing-rows { margin-top: .8rem; display: grid; gap: .35rem; }
.listing-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .65rem;
  border-radius: var(--r-s);
  background: var(--sand);
  font-size: var(--fs-small);
  color: var(--night);
}
.listing-row span:last-child { color: var(--sea); font-weight: 700; }

/* The one row that is empty. Marigold fill, Night text, never light type. */
.listing-row--missing { background: var(--marigold); }
.listing-row--missing span:last-child {
  color: var(--night);
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  align-self: center;
}

.gaparrow {
  font-family: var(--face-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--violet);
  line-height: 1;
  transform: rotate(90deg);
}
@media (min-width: 52rem) { .gaparrow { transform: none; } }

.preview-bar {
  display: flex;
  gap: .3rem;
  padding-bottom: .55rem;
  margin-bottom: .6rem;
  border-bottom: 2px solid var(--night-edge);
}
.preview-bar i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--night-edge); }
.preview-line {
  height: .5rem;
  border-radius: var(--r-pill);
  background: var(--sand);
  margin-top: .45rem;
}
.preview-line--short { width: 55%; }
.preview-cta {
  display: inline-block;
  margin-top: .8rem;
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  background: var(--violet);
  color: var(--cream);
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
}
.gapcap {
  margin-top: var(--gap-m) !important;
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sea);
  text-align: center;
}

/* ---- The work order. Pricing as a document you have already read. ---- */

.order {
  background: var(--cream);
  border-radius: var(--r-l);
  padding: var(--gap-m);
  margin-top: var(--gap-l);
  max-width: 38rem;
  box-shadow: 12px 12px 0 0 var(--sea);
}
.band--sand .order { background: var(--cream); }
@media (min-width: 46rem) { .order { padding: var(--gap-l); box-shadow: 16px 16px 0 0 var(--sea); } }

.order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-s);
  flex-wrap: wrap;
  padding-bottom: .75rem;
  border-bottom: 3px solid var(--night);
}
.stamp {
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--marigold);
  border-radius: var(--r-pill);
  padding: .3rem .7rem;
}
.order-lines { margin-top: var(--gap-s); display: grid; gap: .1rem; }
.order-line {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding-block: .45rem;
  font-size: var(--fs-small);
  color: var(--night);
}
.order-line b { font-weight: 500; }
.order-line .dots {
  flex: 1;
  border-bottom: 2px dotted var(--night-edge);
  transform: translateY(-.2em);
}
.order-line .val {
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sea);
}
.order-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-s);
  flex-wrap: wrap;
  margin-top: var(--gap-s);
  padding-top: .75rem;
  border-top: 3px solid var(--night);
}
.order-total .label {
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--night);
}
.order-total .amount {
  font-family: var(--face-mono);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--violet);
  font-variant-numeric: lining-nums tabular-nums;
}
.order-total .amount .per {
  font-size: .3em;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--night);
}
.order-note { margin-top: var(--gap-s) !important; font-size: var(--fs-small); color: var(--night-soft); }

/* ---- The founding offer. A separate object, not a slash through the price. */

.offer {
  margin-top: var(--gap-m);
  padding: var(--gap-m);
  border-radius: var(--r-m);
  background: var(--sand);
  box-shadow: 8px 8px 0 0 var(--sunset);
  max-width: 38rem;
}
.band--sand .offer { background: var(--cream); }
.offer .price-now { color: var(--violet); font-size: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); }
.offer .price-now .per { color: var(--night); }
.offer p { color: var(--night); }
.offer .spec { color: var(--sunset); }

/* ---- Flat FAQ. Always open, no accordion, nothing hidden behind a click. */

.faq { display: grid; gap: var(--gap-m); margin-top: var(--gap-l); }
@media (min-width: 52rem) { .faq { grid-template-columns: 1fr 1fr; gap: var(--gap-l); } }
.faq > div { max-width: 46ch; }
.faq h3 { color: var(--violet); }
.band--night .faq h3, .band--violet .faq h3 { color: var(--marigold); }
.faq p { margin-top: .4rem; }

/* ---- A quiet instruction band. Used for "look yourself up right now". ---- */

.callout {
  margin-top: var(--gap-l);
  padding: var(--gap-m);
  border-radius: var(--r-m);
  background: var(--night);
  color: var(--cream);
  max-width: 46rem;
  box-shadow: 10px 10px 0 0 var(--marigold);
}
.callout p { color: var(--cream-soft); }
.callout strong { color: var(--cream); }
.callout .spec { color: var(--marigold); }

/* --------------------------------------------------------------------------
   16. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-head, .site-foot, .skip, .glow, .wave { display: none; }
  body { background: #fff; color: #000; }
  .shot, .card, .price-block { box-shadow: none; }
}

/* ---- The two of us: role cards and the photo strip on the About page ---- */

/* A jigsaw tab drawn on the corner of a role card, so the two cards read as
   pieces that fit together rather than two unrelated boxes. */
.role { position: relative; overflow: hidden; }
.role::after {
  content: '';
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 72px;
  height: 72px;
  border-radius: 50% 0 50% 50%;
  opacity: .16;
  background: var(--violet);
  pointer-events: none;
}
.role--dad::after { background: var(--sea); }

/* Three square photographs, each with the house offset shadow in a
   different accent so the strip does not read as a contact sheet. */
.crew {
  display: grid;
  gap: var(--gap-m);
  grid-template-columns: 1fr;
  margin-top: var(--gap-l);
}
@media (min-width: 34rem) { .crew { grid-template-columns: repeat(3, 1fr); gap: var(--gap-s); } }
@media (min-width: 52rem) { .crew { gap: var(--gap-m); } }

.crew figure { margin: 0; border-radius: var(--r-m); overflow: hidden; }
.crew img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.crew figure:nth-child(1) { box-shadow: 8px 8px 0 0 var(--violet); }
.crew figure:nth-child(2) { box-shadow: 8px 8px 0 0 var(--sunset); }
.crew figure:nth-child(3) { box-shadow: 8px 8px 0 0 var(--sea); }
@media (min-width: 52rem) {
  .crew figure:nth-child(1) { box-shadow: 12px 12px 0 0 var(--violet); }
  .crew figure:nth-child(2) { box-shadow: 12px 12px 0 0 var(--sunset); }
  .crew figure:nth-child(3) { box-shadow: 12px 12px 0 0 var(--sea); }
}

.crew-note {
  margin-top: var(--gap-m);
  font-size: var(--fs-small);
  color: var(--night-faint);
}

/* When a section is removed, two bands of the same colour can end up adjacent
   with no wave between them. Without this they stack two sets of padding and
   leave a dead gap. Collapse the join so they read as one continuous band. */
.band + .band { padding-top: 0; }