@font-face{font-family:"Fraunces";src:url("https://fonts.gstatic.com/s/fraunces/v31/6NUh8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib1603gg7S2nfgRYIctxujDvTShUtWNg.woff2") format("woff2");font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:"Montserrat";src:url("https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw0aXpsog.woff2") format("woff2");font-weight:100 900;font-display:swap;font-style:normal}

:root{
  --ink:#15151c;
  --text:#1c1c22;
  --slate:#54545f;
  --gold:#ffd200;
  --gold-deep:#e0b400;
  --gold-ink:#7a5e00;
  --paper:#f1f1ee;
  --white:#ffffff;
  --line:#dcdcd6;

  --measure:34rem;
  --gutter:clamp(1.25rem,4vw,3rem);
  --step:clamp(3.5rem,7vw,6rem);
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--white);padding:.75rem 1rem;
}
.skip:focus{left:0}

:where(a):focus-visible,
:where(button,select,input):focus-visible{
  outline:3px solid var(--ink);
  outline-offset:2px;
}

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

/* ---------- masthead ---------- */

.masthead{border-bottom:1px solid var(--line);background:var(--paper)}
.masthead-inner{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;padding-block:1.25rem;
}
.wordmark{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;font-size:1.3rem;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;line-height:1.1;
}
.wordmark-sub{
  display:block;font-family:"Montserrat",sans-serif;
  font-size:.7rem;font-weight:500;letter-spacing:.02em;
  color:var(--slate);margin-top:.15rem;
}
.masthead nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.masthead nav a{
  color:var(--slate);text-decoration:none;font-size:.9rem;font-weight:500;
  padding-block:.2rem;border-bottom:2px solid transparent;
}
.masthead nav a:hover{color:var(--ink);border-bottom-color:var(--gold)}

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

.hero{padding-block:var(--step)}
.hero-inner{
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1fr;align-items:start;
}
@media (min-width:62rem){
  .hero-inner{grid-template-columns:1.05fr .95fr}
}

h1{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;
  font-size:clamp(2.1rem,1.2rem + 3.6vw,3.6rem);
  line-height:1.08;
  letter-spacing:-.022em;
  margin:0 0 1.25rem;
  color:var(--ink);
}

.standfirst{
  max-width:var(--measure);
  font-size:clamp(1.05rem,1rem + .35vw,1.2rem);
  color:var(--text);
  margin:0 0 1.25rem;
}

.hero-note{
  max-width:var(--measure);
  font-size:.95rem;color:var(--slate);margin:0;
  padding-left:1rem;border-left:2px solid var(--gold);
}
.hero-note em{font-style:normal;color:var(--ink);font-weight:600}

/* ---------- calculator ---------- */

.calc{
  background:var(--white);
  border:1px solid var(--line);
  padding:clamp(1.5rem,3vw,2rem);
}

.calc-title{
  font-family:"Montserrat",sans-serif;
  font-size:.85rem;font-weight:600;letter-spacing:.01em;
  color:var(--slate);margin:0 0 1.5rem;
}

.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-size:.8rem;font-weight:600;color:var(--slate)}

.field select,.field input{
  font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:0;
  padding:.7rem .75rem;
  width:100%;
}
.field select:hover,.field input:hover{border-color:var(--slate)}

.field-row{display:flex;gap:.75rem;align-items:flex-end}
.field-row .field{flex:1 1 auto;margin-bottom:1.1rem}
.field-unit{flex:0 0 auto;margin-bottom:1.1rem}
.unit-label{
  display:block;padding:.7rem 0;font-size:.9rem;color:var(--slate);
}

.result{
  display:block;
  border-top:1px solid var(--line);
  padding-top:1.25rem;margin-top:.25rem;
}
.result-duration{
  display:block;font-size:.85rem;font-weight:600;color:var(--slate);
  margin-bottom:.35rem;
}
.result-total{display:block;margin-bottom:.5rem}

/* the one bold move: gold as marker tape behind the number */
.marker{
  background:var(--gold);
  color:var(--ink);
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;
  font-size:clamp(2.4rem,1.6rem + 3vw,3.4rem);
  line-height:1;
  letter-spacing:-.03em;
  padding:.06em .18em .12em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.marker-sm{
  font-size:1rem;
  letter-spacing:0;
  padding:.1em .35em .15em;
}

.result-rate{display:block;font-size:.9rem;color:var(--slate)}

.calc-small{
  font-size:.78rem;line-height:1.5;color:var(--slate);
  margin:1.1rem 0 1.5rem;
}

.btn{
  display:inline-block;
  background:var(--ink);color:var(--white);
  font-family:inherit;font-size:.92rem;font-weight:600;
  text-decoration:none;
  padding:.85rem 1.6rem;
  border:2px solid var(--ink);
}
.btn:hover{background:var(--white);color:var(--ink)}
.btn-ink{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-ink:hover{background:transparent;color:var(--gold)}

/* ---------- bands ---------- */

.band{padding-block:var(--step);border-top:1px solid var(--line)}
.band-ink{background:var(--ink);color:#e9e9ec;border-top:0}

h2{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
  line-height:1.15;letter-spacing:-.018em;
  margin:0 0 .9rem;color:var(--ink);
}
.band-ink h2{color:var(--white)}

.band-lede{max-width:var(--measure);color:var(--slate);margin:0 0 2rem}
.band-lede-ink{color:#b9b9c2}

.facts{
  list-style:none;padding:0;margin:0;
  display:grid;gap:1.5rem 2.5rem;
  grid-template-columns:1fr;
}
@media (min-width:40rem){
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:62rem){
  .facts{grid-template-columns:repeat(3,1fr)}
}
.facts li{
  font-size:.95rem;color:var(--slate);
  padding-top:.9rem;border-top:1px solid var(--line);
}
.facts strong{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem}
.facts-ink li{border-top-color:#33333d;color:#b9b9c2}
.facts-ink strong{color:var(--white)}
.band-ink .btn{margin-top:2.5rem}

/* ---------- comparison table ---------- */

.homes{padding-block:var(--step);border-top:1px solid var(--line)}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.compare{
  width:100%;border-collapse:collapse;
  font-size:.92rem;min-width:46rem;
}
.compare th,.compare td{
  text-align:left;padding:1.1rem .9rem;
  border-bottom:1px solid var(--line);vertical-align:baseline;
}
.compare thead th{
  font-size:.75rem;font-weight:600;color:var(--slate);
  border-bottom:1px solid var(--ink);padding-bottom:.6rem;
}
.compare tbody th{font-weight:400}
.home-name{
  display:block;font-family:"Fraunces",Georgia,serif;
  font-size:1.1rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;
}
.home-where{display:block;font-size:.8rem;color:var(--slate);margin-top:.1rem}
.compare .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.compare .yes{color:var(--ink)}
.compare .no{color:var(--slate)}
.compare tbody tr:hover{background:var(--white)}

.table-note{font-size:.8rem;color:var(--slate);margin-top:1.25rem;max-width:var(--measure)}

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

.foot{
  border-top:1px solid var(--line);
  padding-block:2.5rem 3.5rem;
  font-size:.8rem;color:var(--slate);
}
.foot-brand{
  font-family:"Fraunces",Georgia,serif;font-size:1.05rem;
  font-weight:600;color:var(--ink);margin:0 0 .75rem;
}
.foot-legal{max-width:44rem;margin:0 0 1rem;line-height:1.6}
.foot-links{display:flex;gap:1.25rem;flex-wrap:wrap;margin:0}
.foot-links a{color:var(--slate)}
.foot-links a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}