/* Doorclue — hand-written. No framework, no generated assets. */

:root {
  --paper: #fbfaf8;
  --panel: #ffffff;
  --ink: #16191c;
  --ink-soft: #4a5158;
  --ink-faint: #838d96;
  --rule: #e3e0da;
  --rule-strong: #c9c5bd;
  --accent: #1b4b6b;
  --accent-soft: #eef3f6;
  --flag: #9a5b18;
  --good: #2f6b46;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14161a;
    --panel: #1a1d22;
    --ink: #eceae5;
    --ink-soft: #b0b6bd;
    --ink-faint: #7f878f;
    --rule: #2a2f36;
    --rule-strong: #3a4048;
    --accent: #8fc0dd;
    --accent-soft: #1c262e;
    --flag: #d9a05b;
    --good: #7dbd97;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 44rem; }

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

header.site {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
header.site .bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; padding: 1.4rem 0; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.32rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.wordmark .mark {
  display: inline-block; width: .5rem; height: .5rem;
  background: var(--accent); margin-right: .5rem;
  transform: rotate(45deg);
}
nav.site a {
  color: var(--ink-soft); text-decoration: none;
  margin-left: 1.5rem; font-size: .93rem;
}
nav.site a:first-child { margin-left: 0; }
nav.site a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
nav.site a[aria-current="page"] { color: var(--ink); }

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

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }

h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.35rem);
  margin: 0 0 1rem;
  max-width: 17ch;
}
h2 {
  font-size: clamp(1.4rem, 2.7vw, 1.85rem);
  margin: 0 0 1rem;
}
h3 { font-size: 1.06rem; margin: 0 0 .35rem; font-family: var(--sans); font-weight: 650; letter-spacing: 0; }

.lede {
  font-size: clamp(1.06rem, 1.7vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 0 0 2rem;
}

p { margin: 0 0 1.1rem; }
a { color: var(--accent); }

.eyebrow {
  font-family: var(--mono);
  font-size: .73rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}

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

section { padding: 4rem 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }
.hero { padding: 5.5rem 0 4rem; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media (max-width: 46rem) { .cols { grid-template-columns: 1fr; gap: 2rem; } }

/* numbered steps */
ol.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
ol.steps > li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1.1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--rule);
}
ol.steps > li:first-child { border-top: 0; }
ol.steps > li::before {
  content: counter(s);
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--accent);
  padding-top: .22rem;
}
ol.steps p { margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* plain list with a rule */
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain > li {
  padding: 1rem 0; border-top: 1px solid var(--rule);
  color: var(--ink-soft); font-size: .97rem;
}
ul.plain > li:first-child { border-top: 0; }
ul.plain strong { color: var(--ink); font-weight: 650; }

/* ---------- the product mock (hand-built, not a screenshot) ---------- */

.mock {
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
  font-family: var(--sans);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.mock .chrome {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .85rem; border-bottom: 1px solid var(--rule);
  background: var(--accent-soft);
  font-size: .78rem; color: var(--ink-faint);
  font-family: var(--mono);
}
.mock .chrome .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--rule-strong); }
.mock table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.mock th {
  text-align: left; font-weight: 600; color: var(--ink-faint);
  font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  padding: .6rem .85rem; border-bottom: 1px solid var(--rule);
}
.mock td { padding: .62rem .85rem; border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
.mock tr:last-child td { border-bottom: 0; }
.mock td.name { color: var(--ink); font-weight: 550; }
.mock td.num { font-family: var(--mono); font-size: .78rem; }
.chip {
  display: inline-block; font-size: .7rem; padding: .12rem .45rem;
  border-radius: 3px; border: 1px solid var(--rule-strong);
  font-family: var(--mono); color: var(--ink-soft); white-space: nowrap;
}
.chip.ok { color: var(--good); border-color: currentColor; }
.chip.warn { color: var(--flag); border-color: currentColor; }
.mock figcaption, figure.mock + .cap {
  font-size: .8rem; color: var(--ink-faint); margin-top: .7rem;
}
figure { margin: 0; }
.scroll-x { overflow-x: auto; }

/* ---------- callout ---------- */

.callout {
  border-left: 2px solid var(--accent);
  padding: .2rem 0 .2rem 1.2rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.5;
  max-width: 38rem;
}

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

.mailto {
  font-family: var(--mono);
  font-size: .95rem;
  border-bottom: 1px solid var(--rule-strong);
  text-decoration: none;
  padding-bottom: 1px;
}
.mailto:hover { border-color: var(--accent); }

footer.site {
  border-top: 1px solid var(--rule);
  padding: 2.5rem 0 3.5rem;
  font-size: .87rem;
  color: var(--ink-faint);
}
footer.site .row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
footer.site a { color: var(--ink-faint); }

.note { font-size: .9rem; color: var(--ink-faint); }

/* ---------- editorial layout: asymmetric text column + rail ---------- */

.spread {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}
@media (max-width: 52rem) { .spread { grid-template-columns: 1fr; gap: 2rem; } }

.rail { font-size: .93rem; color: var(--ink-soft); }
.rail h3 { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
  font-family: var(--mono); color: var(--ink-faint); font-weight: 500; margin-bottom: .7rem; }
.rail p { font-size: .93rem; }

/* definition rows — used instead of feature cards */
dl.spec { margin: 0; display: grid; grid-template-columns: 11rem 1fr; gap: 0; }
@media (max-width: 40rem) { dl.spec { grid-template-columns: 1fr; } }
dl.spec dt {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 1.05rem 1rem 1.05rem 0; border-top: 1px solid var(--rule);
}
dl.spec dd {
  margin: 0; padding: 1.05rem 0; border-top: 1px solid var(--rule);
  color: var(--ink-soft); font-size: .98rem;
}
@media (max-width: 40rem) {
  dl.spec dt { padding-bottom: .2rem; border-bottom: 0; }
  dl.spec dd { border-top: 0; padding-top: 0; padding-bottom: 1.1rem; }
}
dl.spec strong { color: var(--ink); font-weight: 600; }

.lead-para { font-size: 1.1rem; }
.tight { max-width: 34rem; }
hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 3.5rem 0; }
.smallcaps { font-variant-caps: all-small-caps; letter-spacing: .06em; }

/* ---------- fixes: alignment, rhythm, orphans ---------- */

/* .tight must NOT re-centre the wrapper — it constrains the measure only,
   so every section keeps the same left edge. */
.wrap.tight { max-width: 62rem; }
.wrap.tight > * { max-width: 36rem; }

/* one padding band everywhere; no section starts flush against its own rule */
section { padding: 4.2rem 0; }
section[style*="padding-top:0"] { padding-top: 2.6rem !important; }
.hero { padding: 5.25rem 0 3.25rem; }

/* stop single-word orphans in display type */
h1, h2 { text-wrap: balance; }

/* the rail follows the argument instead of leaving a dead gutter */
@media (min-width: 52.01rem) {
  .rail { position: sticky; top: 2.5rem; }
}

/* ---------- Doorclue voice: engineered, dense, sans.
   Deliberately NOT the editorial-serif treatment used on the other brand. ---------- */

.wordmark {
  font-family: var(--sans);
  font-weight: 680;
  letter-spacing: -0.025em;
  font-size: 1.24rem;
}
h1, h2 {
  font-family: var(--sans);
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
h1 { font-size: clamp(2rem, 4.6vw, 3rem); max-width: 20ch; }
h2 { font-size: clamp(1.32rem, 2.4vw, 1.7rem); }
.callout { font-family: var(--sans); font-weight: 550; font-size: 1.08rem; letter-spacing: -0.01em; }

/* rail labels: plain bold sans, not the mono all-caps device */
.rail h3 {
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 660;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: .45rem;
}
.rail { border-left: 1px solid var(--rule); padding-left: 1.4rem; }

/* spec rows read as a schema, not a feature list */
dl.spec dt { font-family: var(--sans); font-size: .82rem; text-transform: none; letter-spacing: 0; font-weight: 620; color: var(--ink); }
.eyebrow { font-family: var(--sans); letter-spacing: .01em; text-transform: none; font-size: .84rem; font-weight: 560; color: var(--ink-faint); }