/* Galilee Homes */

/* Fonts are self-hosted, so visitors' browsers never contact Google. Latin subset
   only, with the unicode-range Google itself declares for these files. The arrow
   character was never in these fonts and still comes from the system font. */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fraunces-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;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  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: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-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 {
  --paper: #F1EADB;
  --paper-2: #E9E0CC;
  --paper-3: #E1D5BA;
  --ink: #1C2A2E;
  --ink-soft: #4B5B5F;
  --line: rgba(28, 42, 46, .16);
  --teal: #1F5C5A;
  --brick: #A5512F;
  --wood: #8A6446;
  --glow: #F2B35B;
  --glow-soft: #FBE2B0;
  --red: #C0392B;
  --brass: #C99A3C;
  --band-bg: #1C2A2E;
  --band-fg: #EFE6D3;
  --band-line: #D6B476;
  --hole: #2A3336;
  --fresh: #E9B98F;

  --maxw: 1180px;
  --gutter: clamp(16px, 4vw, 44px);
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 7 L3 1 L6 7 L9 1 L12 7' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10171A;
    --paper-2: #162024;
    --paper-3: #1D292D;
    --ink: #ECE3D0;
    --ink-soft: #A7B1AC;
    --line: rgba(236, 227, 208, .14);
    --teal: #63B5AD;
    --brick: #C9744F;
    --wood: #9C7657;
    --glow: #FFC66E;
    --glow-soft: #FFE3AE;
    --red: #F0735F;
    --brass: #E0B458;
    --band-bg: #0A1012;
    --band-fg: #ECE3D0;
    --band-line: #D9B97C;
    --hole: #05090A;
    --fresh: #6E4B36;
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------- base */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(84px + env(safe-area-inset-top, 0px));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Paper grain: the page reads as a drawing sheet rather than a screen. Attached to
   the page, not the screen: Safari 26 reads fixed elements at the top edge to
   colour the strip behind the clock, and this one must never be in the running. */
body { position: relative; }
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  body::before { opacity: .05; filter: invert(1); }
}

img, svg { display: block; }
p { margin: 0 0 1em; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
}

h1 em, h2 em { font-style: italic; color: var(--teal); }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  /* Clear the notch when a phone is held sideways. */
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.skip {
  position: absolute;
  left: -999px;
  top: 12px;
  z-index: 200;
  padding: .6em 1em;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
.skip:focus { left: 16px; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0;
  font: 600 .74rem/1 var(--f-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
}
.kicker::before {
  content: "";
  width: 22px;
  height: 8px;
  background: currentColor;
  -webkit-mask: var(--zig) repeat-x center / 11px 8px;
  mask: var(--zig) repeat-x center / 11px 8px;
}

/* --------------------------------------------------------------- buttons */

.btn {
  --b: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .9em 1.3em;
  border: 1.5px solid var(--b);
  border-radius: 999px;
  background: var(--b);
  color: var(--paper);
  font: 600 .95rem/1 var(--f-body);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s, background-color .25s, color .25s;
}
.btn .arr { display: inline-block; transition: transform .25s; }
.btn--ghost { background: transparent; color: var(--ink); }
/* Hover effects only where there is a pointer that hovers, so a tap on a phone
   does not leave a button stuck in its lifted state. */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn:hover .arr { transform: translateX(3px); }
  .btn--ghost:hover { background: var(--ink); color: var(--paper); }
}
.btn--teal { --b: var(--teal); }
.btn--sm { padding: .65em 1.05em; font-size: .86rem; }

/* ---------------------------------------------------------------- header */

/* On iPhones the page runs up behind the clock and battery. Safari 26 colours that
   strip from any fixed element touching the top edge, and a see-through or frosted
   background there makes the strip see-through too, so page text shows above the
   header. The header is therefore always solid, in the same colour as the page,
   and grows up into the strip. Scrolling only adds the hairline. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--paper);
  transition: box-shadow .3s;
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--ink);
  text-decoration: none;
}
.brand svg { width: 24px; height: 30px; color: var(--teal); flex: none; }
.brand__name {
  font-family: var(--f-display);
  font-size: 1.35rem;
  letter-spacing: -.01em;
  font-variation-settings: "SOFT" 50, "opsz" 36;
}
.brand__name em { font-style: italic; color: var(--ink-soft); }

.nav { display: flex; align-items: center; gap: 1.7rem; }
.nav a:not(.btn) {
  position: relative;
  font-size: .93rem;
  text-decoration: none;
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 820px) {
  .nav a:not(.btn) { display: none; }
}

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

.hero {
  position: relative;
  height: 290vh;
  --s1: 1; --s2: 1; --s3: 1; --s4: 1; --s5: 1;
}
.js .hero { --s1: 0; --s2: 0; --s3: 0; --s4: 0; --s5: 0; }

/* Pinned to the top edge while the house restores, so Safari 26 also reads this
   element's background for the strip behind the clock. Solid, same as the page. */
.hero__stick {
  position: sticky;
  top: 0;
  background: var(--paper);
  height: 100svh;
  min-height: 560px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: calc(96px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 2rem;
  align-items: end;
}

.hero h1 {
  max-width: 11ch;
  font-size: clamp(2.6rem, 7.2vw, 6.6rem);
  line-height: .98;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
}
.hero h1 em { font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }

.hero__lede {
  max-width: 34ch;
  margin-bottom: 1.2rem;
  color: var(--ink-soft);
  font-size: 1.08rem;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: .7rem; }

.hero__art {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 8px;
}
.hero__art svg { width: 100%; height: 100%; }

.hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.revs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem clamp(.8rem, 2.6vw, 2.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .84rem;
  color: var(--ink-soft);
}
.revs li {
  display: flex;
  align-items: center;
  gap: .5em;
  opacity: .5;
  transition: opacity .35s, color .35s;
}
.revs b {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border: 1px solid currentColor;
  border-radius: 5px;
  font: 600 .7rem/1 var(--f-body);
  transition: background-color .35s, color .35s, border-color .35s;
}
.revs li[aria-current] { opacity: 1; color: var(--ink); }
.revs li[aria-current] b { background: var(--teal); border-color: var(--teal); color: var(--paper); }

.cue {
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0;
  font-size: .8rem;
  color: var(--ink-soft);
  transition: opacity .4s;
}
.cue i {
  position: relative;
  width: 1px;
  height: 26px;
  overflow: hidden;
  background: var(--line);
}
.cue i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: var(--ink);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { to { top: 100%; } }
.hero.is-done .cue { opacity: 0; }

@media (max-width: 820px) {
  .hero__head { grid-template-columns: 1fr; gap: .9rem; }
  .hero__lede { font-size: 1rem; margin-bottom: .9rem; }
  /* Size the drawing by the height that is left rather than by width, so a short
     phone shows the whole house smaller instead of cropping off its roof. */
  .hero__art { overflow: hidden; }
  .hero__art svg { flex: none; width: auto; height: 100%; max-width: none; aspect-ratio: 1200 / 630; }
  .cue { display: none; }
}
@media (max-width: 560px) {
  .hero__ctas .btn--ghost { display: none; }
}
@media (max-height: 560px) {
  .hero__stick { min-height: 0; padding-top: 80px; }
  .hero__lede { display: none; }
}

/* --------------------------------------------------- the street drawing */

.street .ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.street .thin { stroke-width: 1.1; }
.street .heavy { stroke-width: 2.4; }

.street .facade { fill: url(#bricks); }
.street .solid { fill: var(--paper); }
.street .roof { fill: url(#slates); }
.street .brick-line,
.street .slate-line { fill: none; stroke: var(--ink); stroke-width: .7; opacity: .13; }

.street .nb { opacity: .5; }

.street .glass,
.street .glass-nb,
.street .lamp-glass { fill: url(#glow); }
.street .glass { opacity: var(--s3); }
.street .glass-nb { opacity: .28; }
.street .lamp-glass { opacity: .18; }
.street .lamp-halo { fill: url(#halo); opacity: 0; }
.street .moon { fill: var(--glow-soft); opacity: 0; }
.street .star { fill: var(--ink); opacity: 0; }

@media (prefers-color-scheme: dark) {
  .street .glass-nb { opacity: .7; }
  .street .lamp-glass { opacity: 1; }
  .street .lamp-halo { opacity: .5; }
  .street .moon { opacity: .9; }
  .street .star { opacity: .6; }
}

.street .fresh { fill: var(--fresh); opacity: calc(var(--s2) * .26); }
.street .door-paint { fill: var(--teal); opacity: var(--s4); }
.street .brass { fill: var(--brass); opacity: var(--s4); }

.street .board {
  opacity: calc(1 - var(--s2));
  transform: translateY(calc(var(--s2) * 46px)) rotate(calc(var(--s2) * 9deg));
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.street .plank { fill: var(--wood); stroke: var(--ink); stroke-width: 1.2; }
.street .nail { fill: var(--ink); }

.street .crack { fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: calc(1 - var(--s1)); }
.street .weed {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: calc(1 - var(--s1));
  transform: scaleY(calc(1 - var(--s1) * .8));
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.street .roof-hole { opacity: calc(1 - var(--s1)); }
.street .hole { fill: var(--hole); }
.street .gutter-broken { opacity: calc(1 - var(--s1)); }
.street .gutter-new { opacity: var(--s2); }

.street .sign {
  opacity: calc(1 - var(--s1));
  transform: rotate(calc(var(--s1) * -16deg)) translateY(calc(var(--s1) * 70px));
  transform-box: fill-box;
  transform-origin: 0 0;
}
.street .sign-board { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.street .sign-text {
  font: 700 11px/1 var(--f-body);
  letter-spacing: .14em;
  fill: var(--red);
}

.street .bloom {
  opacity: var(--s5);
  transform: scale(calc(.5 + var(--s5) * .5));
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.street .planter { fill: var(--brick); stroke: var(--ink); stroke-width: 1.2; }
.street .petal { fill: var(--red); }
.street .petal.alt { fill: var(--glow); }
.street .leaf { fill: var(--teal); }

.street .smoke {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: calc(var(--s5) * .55);
}
.street .smoke path {
  animation: smoke 5.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.street .smoke path:nth-child(2) { animation-delay: -1.8s; }
.street .smoke path:nth-child(3) { animation-delay: -3.6s; }
@keyframes smoke {
  0%   { transform: translate(0, 8px) scale(.9); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translate(7px, -24px) scale(1.15); opacity: 0; }
}

/* The drawing inks itself in on arrival. */
.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 2.4s cubic-bezier(.65, .05, .25, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.fade-in { opacity: 0; animation: fadein 1.4s ease forwards; animation-delay: var(--d, .8s); }
@keyframes fadein { to { opacity: 1; } }

@media (max-width: 820px) {
  .street .ink { stroke-width: 2.6; }
  .street .thin { stroke-width: 1.7; }
  .street .heavy { stroke-width: 3.2; }
  .street .crack { stroke-width: 2.2; }
}

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

.sec { padding-block: clamp(80px, 11vw, 150px); }

.sec__head {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.sec h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
}
.sec__sub { max-width: 44ch; margin: 0; color: var(--ink-soft); }

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--rd, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Lines that draw once their section arrives. */
.al, .pencil {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.js .reveal:not(.is-in) .al,
.js .reveal:not(.is-in) .pencil { stroke-dashoffset: 1; }

/* ----------------------------------------------------------- the sheets */

.sheets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
@media (max-width: 1080px) { .sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .sheets { grid-template-columns: 1fr; } }

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 0;
  border: 1px solid var(--line);
  background: var(--paper-2);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s;
}
.sheet::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--line);
  pointer-events: none;
}
@media (hover: hover) {
  .sheet:hover {
    transform: translateY(-6px) rotate(-.4deg);
    box-shadow: 0 22px 40px -24px rgba(0, 0, 0, .4);
  }
}

.sheet__art { height: 150px; margin: 4px 0 16px; }
.sheet__art svg { width: 100%; height: 100%; overflow: visible; }
.sheet__art .ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sheet__art .thin { stroke-width: 1.1; }
.sheet__art .light { fill: var(--glow); opacity: .5; }
.sheet__art .spill { fill: var(--glow); opacity: .28; }
.sheet__art .leaf-fill { fill: var(--teal); opacity: .9; }
.sheet__art .pencil {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.3;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(.6, .1, .2, 1) .5s;
}

.sheet h3 { font-size: 1.95rem; font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 72; }
.sheet p { margin: .55rem 0 1.4rem; color: var(--ink-soft); font-size: .98rem; }

.tblock {
  display: grid;
  grid-template-columns: 1fr 1fr 44px;
  margin: auto -15px 7px;
  border-top: 1px solid var(--line);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tblock > div { padding: 8px 10px 9px; border-left: 1px solid var(--line); }
.tblock > div:first-child { border-left: 0; }
.tblock dt { color: var(--ink-soft); }
.tblock dd { margin: 3px 0 0; font-weight: 600; letter-spacing: .08em; }
.tblock .proj { grid-column: 1 / 3; border-bottom: 1px solid var(--line); }
.tblock .tickcell { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; padding: 0; }
.tblock > div:nth-child(3) { border-left: 0; }
.tick { width: 22px; height: 19px; }
.tick path {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .5s .1s;
}
.sheet:hover .tick path,
.sheet:focus-within .tick path { stroke-dashoffset: 0; }
/* Touch screens never hover, so the tick signs each sheet off as it arrives. */
@media (hover: none) {
  .sheet.is-in .tick path { stroke-dashoffset: 0; transition-delay: 1.4s; }
}

/* -------------------------------------------------------------- selling */

.sell {
  border-block: 1px solid var(--line);
  background: var(--paper-2);
}
.sell__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.sell__quote {
  margin: 1.1rem 0 1.4rem;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.u {
  padding-bottom: .06em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M1 8 C 20 3, 40 11, 60 6 S 100 3, 119 7' fill='none' stroke='%23D0493A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1.3s cubic-bezier(.6, .1, .2, 1) .5s;
}
.js .reveal:not(.is-in) .u { background-size: 0% .3em; }
.sell__body { max-width: 40ch; color: var(--ink-soft); margin-bottom: 1.6rem; }

.promises { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.promises li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: .8rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}
.promises .n { font: 600 .72rem/2.1 var(--f-body); letter-spacing: .12em; color: var(--teal); }
.promises strong {
  display: block;
  margin-bottom: .15rem;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1.25;
  font-variation-settings: "SOFT" 50, "opsz" 36;
}
.promises li > div > span { color: var(--ink-soft); font-size: .97rem; }

@media (max-width: 860px) {
  .sell__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- doors */

.doors {
  --gap: clamp(10px, 1.8vw, 26px);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.door {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Without this a long name like Northumberland widens its own door, and because
     the doors keep their shape, a wider door is also a taller one. */
  min-width: 0;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.door__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 2.05;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 24.4% 24.4% 0 0;
  background: var(--paper-3);
}

/* Fanlight: sunburst glazing bars over warm glass. */
.door__fan {
  position: absolute;
  inset: 0 0 auto 0;
  height: 24.4%;
  border-bottom: 2px solid var(--ink);
  background:
    conic-gradient(from 0deg at 50% 100%,
      var(--ink) 0 1.4deg, transparent 1.4deg 43.6deg,
      var(--ink) 43.6deg 46.4deg, transparent 46.4deg 313.6deg,
      var(--ink) 313.6deg 316.4deg, transparent 316.4deg 358.6deg,
      var(--ink) 358.6deg),
    linear-gradient(var(--glow-soft), var(--glow));
}

.door__way {
  position: absolute;
  inset: 24.4% 0 0 0;
  display: grid;
  place-items: center;
  perspective: 700px;
  background: radial-gradient(120% 70% at 50% 80%, var(--glow-soft), var(--glow) 55%, #B9772F);
  /* The open leaf covers the left third of the doorway, so the postcode centres in
     the lit gap beside it. The leaf is positioned absolutely and ignores this. */
  padding-left: 34%;
}
.door__code {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  color: #4A2F12;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s .25s, transform .4s .25s;
}

.door__leaf {
  position: absolute;
  inset: 0;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  transform-origin: 0 50%;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .8s;
}
.door__leaf::before,
.door__leaf::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  border: 2px solid rgba(0, 0, 0, .28);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .06);
  background: linear-gradient(90deg,
    transparent calc(50% - 1px), rgba(0, 0, 0, .28) calc(50% - 1px),
    rgba(0, 0, 0, .28) calc(50% + 1px), transparent calc(50% + 1px));
}
.door__leaf::before { top: 8%; height: 40%; }
.door__leaf::after { bottom: 8%; height: 32%; }
.door__knob {
  position: absolute;
  right: 12%;
  top: 53%;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}

/* Front doors here open inwards, so the leaf swings away into the hall and stays
   inside its frame, darkening as it turns from the light. A tap opens a door on
   touch screens, which have no hover. */
.door.is-open .door__leaf,
.door:focus-visible .door__leaf { transform: rotateY(72deg); filter: brightness(.72); }
.door.is-open .door__code,
.door:focus-visible .door__code { opacity: 1; transform: none; }
@media (hover: hover) {
  .door:hover .door__leaf { transform: rotateY(72deg); filter: brightness(.72); }
  .door:hover .door__code { opacity: 1; transform: none; }
}
.door:focus-visible .door__frame { outline: 2px solid var(--teal); outline-offset: 4px; }

/* Each step is widened across the gap so together they form the pavement. */
.door__step {
  width: calc(100% + var(--gap));
  height: 6px;
  background: var(--ink);
}
.door__name {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--f-display);
  font-size: 1.02rem;
  line-height: 1.2;
  font-variation-settings: "opsz" 24;
}
.door__name small {
  display: block;
  margin-top: 3px;
  font: 600 .66rem/1.4 var(--f-body);
  letter-spacing: .14em;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .doors {
    display: flex;
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .doors::-webkit-scrollbar { display: none; }
  .door { flex: 0 0 clamp(104px, 30%, 150px); scroll-snap-align: center; }
  .door__name { font-size: .95rem; }

  /* The street fades out at whichever edge has more doors beyond it. */
  .doors {
    --fade: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
    -webkit-mask-image: var(--fade);
    mask-image: var(--fade);
  }
  .doors[data-at="middle"] { --fade: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 64px), transparent); }
  .doors[data-at="end"] { --fade: linear-gradient(90deg, transparent, #000 44px); }
  .doors[data-at="none"] { -webkit-mask-image: none; mask-image: none; }

  /* A thin rail under the pavement shows how far along the street you are. */
  .doors-rail {
    position: relative;
    height: 3px;
    margin-top: 22px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--line);
  }
  .doors-rail span {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--rail-w, 40%);
    border-radius: 3px;
    background: var(--teal);
    transform: translateX(var(--rail-x, 0%));
  }
  .doors-hint {
    justify-content: flex-end;
    align-items: center;
    gap: .45em;
    margin: 12px 0 0;
    font-size: .84rem;
    color: var(--ink-soft);
    transition: opacity .5s;
  }
  .doors-hint span { display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
  .doors-wrap.has-scrolled .doors-hint { opacity: 0; }
}
.doors-rail, .doors-hint { display: none; }
@media (max-width: 860px) {
  .doors-rail { display: block; }
  .doors-hint { display: flex; }
}
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* ------------------------------------------------------------- the name */

.name { background: var(--band-bg); color: var(--band-fg); }
.name .kicker { color: var(--band-line); }
.name h2 { color: var(--band-fg); }
.name h2 em { color: var(--band-line); }
.name__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.name__copy { display: grid; gap: 1.1rem; }
.name__copy p {
  max-width: 40ch;
  margin: 0;
  color: var(--band-fg);
  color: color-mix(in srgb, var(--band-fg) 78%, transparent);
  font-size: 1.06rem;
}
.arches { width: 100%; height: auto; }
.arches .al {
  fill: none;
  stroke: var(--band-line);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 2.6s cubic-bezier(.6, .05, .2, 1);
  transition-delay: var(--d, 0s);
}
.arches .thin { stroke-width: 1; }
.arches .bay { fill: url(#bayglow); opacity: .55; transition: opacity 2s 1.6s; }
.js .reveal:not(.is-in) .arches .bay { opacity: 0; }

@media (max-width: 860px) {
  .name__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- contact */

.contact { padding-block: clamp(84px, 12vw, 160px); }
.contact__card {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 2rem;
  align-items: end;
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 2px solid var(--ink);
}
.contact h2 {
  margin-top: 1rem;
  font-size: clamp(2.3rem, 5.4vw, 4.8rem);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144;
}
.contact__card > p { max-width: 36ch; margin: 0; color: var(--ink-soft); }

@media (max-width: 860px) {
  .contact__card { grid-template-columns: 1fr; }
}

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

.foot {
  padding-top: 28px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--ink-soft);
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.foot p { margin: 0; }
.foot .brand__name { font-size: 1.1rem; }

.zig {
  height: 10px;
  background: currentColor;
  color: var(--teal);
  opacity: .45;
  -webkit-mask: var(--zig) repeat-x center / 15px 10px;
  mask: var(--zig) repeat-x center / 15px 10px;
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: auto; }
  .hero__stick { position: relative; height: auto; min-height: 100svh; }
  .cue { display: none; }
  .draw { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .fade-in { animation: none; opacity: 1; }
  .street .smoke path { animation: none; }
  .doors-hint span { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .al, .pencil, .tick path, .u, .door__leaf, .door__code { transition: none !important; }
}