/* Quiet Watch design system.
   Malewicz: big or small, never medium. One focal point per screen. Depth in
   layers, not in gloss. A single accent that only ever means "we found
   something". Left-aligned editorial, because centred everything reads as a
   template.
   Zeldman: this file is an enhancement. Every page is readable without it. */

:root {
  --paper:      #fbfaf8;
  --paper-2:    #ffffff;
  --sunk:       #f2efe9;
  --ink:        #16171a;
  --ink-soft:   #5b5c66;
  --rule:       #e4e1db;
  --green:      #17503f;
  --green-soft: #eef4f1;
  --amber:      #8a5a00;
  --amber-soft: #fdf3e2;
  --on-green:   #fbfaf8;

  --lift-1: 0 1px 2px rgba(20,22,26,.05), 0 2px 8px rgba(20,22,26,.04);
  --lift-2: 0 2px 4px rgba(20,22,26,.06), 0 12px 28px rgba(20,22,26,.07);
  --inset:  inset 0 1px 0 rgba(255,255,255,.9);

  --r-lg: 16px;
  --r-md: 10px;
  --r-sm: 6px;
  --col: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:#131417; --paper-2:#1b1d21; --sunk:#101114;
    --ink:#ecedf1; --ink-soft:#a5a7b2; --rule:#2b2d33;
    --green:#7fd8b8; --green-soft:#172a24;
    --amber:#e0a955; --amber-soft:#2a2016; --on-green:#0f211b;
    --lift-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
    --lift-2: 0 2px 4px rgba(0,0,0,.5), 0 14px 32px rgba(0,0,0,.45);
    --inset:  inset 0 1px 0 rgba(255,255,255,.05);
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.62 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1;
}

.wrap { max-width: var(--col); margin: 0 auto; padding: 0 26px; }

/* --- type scale: deliberate jumps, nothing in the middle ---------------- */
.display {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 680;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.14; letter-spacing: -.024em; font-weight: 660;
  margin: 0 0 .55em; text-wrap: balance;
}
h3 { font-size: 1.06rem; letter-spacing: -.012em; font-weight: 650; margin: 0 0 .4em; }

.eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 1.1rem; display: flex; align-items: center; gap: .7rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink); max-width: 40ch; }
.muted { color: var(--ink-soft); }
p { margin: 0 0 1.05em; max-width: 66ch; }

a { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

code, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--sunk); padding: .12em .42em; border-radius: var(--r-sm);
  border: 1px solid var(--rule);
}

/* --- focus, never removed --------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--green); outline-offset: 3px; border-radius: var(--r-sm);
}
.skip {
  position: absolute; left: -9999px; z-index: 20;
  background: var(--green); color: var(--on-green);
  padding: 14px 20px; border-radius: 0 0 var(--r-md) 0;
  font-weight: 650; text-decoration: none;
}
.skip:focus { left: 0; top: 0; }

/* --- masthead: real links to real pages -------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 66px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 680; letter-spacing: -.02em; text-decoration: none; color: var(--ink);
  font-size: 1.03rem;
}
.mark { width: 22px; height: 22px; color: var(--green); flex: none; }
.masthead nav ul {
  list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0;
  font-size: .93rem; flex-wrap: wrap;
}
.masthead nav a { color: var(--ink-soft); text-decoration: none; padding: .3rem 0; display: block; }
.masthead nav a:hover { color: var(--ink); }
.masthead nav a[aria-current="page"] {
  color: var(--ink); font-weight: 620;
  box-shadow: inset 0 -2px 0 var(--green);
}

/* --- surfaces: depth in layers ----------------------------------------- */
.card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1), var(--inset);
  padding: 26px 28px;
}
.card--raised { box-shadow: var(--lift-2), var(--inset); }
.card--sunk {
  background: var(--sunk); box-shadow: none;
}
.card--accent {
  background: var(--green-soft);
  border-color: color-mix(in srgb, var(--green) 26%, var(--rule));
}

/* --- bento: asymmetric on purpose -------------------------------------- */
.bento {
  display: grid; gap: 16px;
  grid-template-columns: repeat(6, 1fr);
}
.bento > * { grid-column: span 6; }
@media (min-width: 760px) {
  .span-2 { grid-column: span 2; }
  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; }
  .span-6 { grid-column: span 6; }
}

/* --- the number, as a brand device ------------------------------------- */
.figure { display: block; font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1; letter-spacing: -.04em; font-weight: 700; }
.figure--accent { color: var(--amber); }
.figure-label { font-size: .78rem; color: var(--ink-soft); margin-top: .55rem;
  letter-spacing: .01em; }

/* --- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--green); color: var(--on-green);
  padding: 13px 22px; border-radius: var(--r-md);
  font-weight: 650; text-decoration: none; border: 0;
  box-shadow: var(--lift-1);
}
.btn:hover { background: color-mix(in srgb, var(--green) 87%, var(--ink)); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule); box-shadow: none;
}
.btn--ghost:hover { background: var(--sunk); }

/* --- refuse list ------------------------------------------------------- */
.refuse { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.refuse li {
  display: grid; grid-template-columns: 26px 1fr; gap: .8rem;
  align-items: start; padding: 14px 16px;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.refuse .no {
  color: var(--amber); font-weight: 700; line-height: 1.5;
}

/* --- price ------------------------------------------------------------- */
.price { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; }
.price small { font-size: .82rem; font-weight: 500; color: var(--ink-soft);
  letter-spacing: 0; display: block; margin-top: .2rem; }

/* --- rhythm ------------------------------------------------------------ */
.band { padding: clamp(3.4rem, 8vw, 6rem) 0; }
.band + .band { border-top: 1px solid var(--rule); }
.band--sunk { background: var(--sunk); }
.stack > * + * { margin-top: 1rem; }

/* --- footer ------------------------------------------------------------ */
.pagefoot { border-top: 1px solid var(--rule); padding: 2.6rem 0 3.4rem;
  color: var(--ink-soft); font-size: .92rem; background: var(--sunk); }
.pagefoot a { color: var(--green); }
.footgrid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footgrid { grid-template-columns: 1.4fr 1fr 1fr; } }
.pagefoot ul { list-style: none; margin: .4rem 0 0; padding: 0; }
.pagefoot li { margin: .35rem 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .masthead, .skip, .btn { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card { border: 1px solid #999; box-shadow: none; }
}