/* =========================================================================
   Northline Dental — demo practice site.

   Cool paper, deep navy ink, one mint accent. Hairlines instead of shadows,
   a mono face for labels and clock times. Deliberately nothing like carterlong.net
   (dark petrol) or Emberline (warm bone and charcoal): three demos that share
   a look are one demo shown three times.

   Contrast was measured, not eyeballed. Every text pair below is at least
   4.5:1 and every interactive border at least 3:1 against what it sits on.
   ========================================================================= */

:root{
  --paper:#fbfdff;
  --panel:#f1f6fa;
  --panel-2:#e6eef5;
  --line:#dbe6ee;         /* hairlines, decorative */
  --line-2:#c7d7e3;
  --edge:#7592a2;         /* control borders. 3.22:1 on paper, 3.02:1 on panel */
  --navy:#0b2233;         /* 15.96:1 on paper */
  --ink:#153245;          /* 13.08:1 on paper */
  --slate:#4e6a7a;        /* 5.62:1 on paper, 4.89:1 on panel-2 */
  --mint:#12d1b0;
  --mint-2:#0fb99c;
  --mint-deep:#067a67;    /* 5.17:1 on paper. mint as text, never the fill */
  --mint-ink:#05231e;     /* 8.51:1 on mint */
  --warn:#8a5a00;
  --bad:#a32b2b;

  --wrap:1160px;
  --display:Sora,system-ui,sans-serif;
  --sans:Manrope,system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.2,.8,.25,1);
  --r:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;line-height:1.08;letter-spacing:-.02em;color:var(--navy)}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--mint-deep);outline-offset:3px;border-radius:3px}
[hidden]{display:none !important}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.wrap.narrow{max-width:780px}
.wrap.mid{max-width:960px}
.section{padding:5.5rem 0}
.section.tight{padding:3.5rem 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:.7rem 1.1rem;z-index:100}
.skip:focus{left:0;top:0}

.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.muted{color:var(--slate)}
.lede{font-size:19.5px;color:var(--slate);max-width:56ch}
/* Money is set in the sans, not the mono. IBM Plex Mono's zero carries a
   centre dot, and at 14px a run like $1000 smears into what reads as a
   strikethrough on a bill. Tabular figures still line the columns up. */
.tabular{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(251,253,255,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:1.4rem;min-height:70px}
.mark{display:flex;align-items:center;gap:.55rem;text-decoration:none;margin-right:auto;
  font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:-.02em;color:var(--navy)}
.mark svg{width:26px;height:26px;flex:0 0 auto}
.mark i{font-style:normal;color:var(--slate);font-weight:500}
.nav{display:flex;gap:1.5rem;align-items:center}
/* :not(.btn) on every one of these. A nav rule that also matches the booking
   pill repaints its label and the button reads as empty. It has happened on
   both of the other sites. */
.nav a:not(.btn){text-decoration:none;color:var(--slate);font-size:15px;font-weight:500;
  position:relative;padding:.25rem 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--mint);transform:scaleX(0);transform-origin:right;transition:transform .28s var(--ease)}
.nav a:not(.btn):hover{color:var(--navy)}
.nav a:not(.btn):hover::after,.nav a:not(.btn)[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.nav a:not(.btn)[aria-current=page]{color:var(--navy)}

/* The checkbox stays in the accessibility tree (it is .sr-only in the markup,
   not display:none) so the menu is reachable from a keyboard. Only its label
   is hidden on desktop. */
.nav-label{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  text-decoration:none;font-family:var(--sans);font-weight:700;font-size:15px;
  padding:.7rem 1.35rem;border-radius:999px;border:1px solid var(--mint);
  background:var(--mint);color:var(--mint-ink);
  transition:background .18s,border-color .18s,color .18s,transform .18s var(--ease)}
.btn:hover{background:var(--mint-2);border-color:var(--mint-2);transform:translateY(-1px)}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.dark:hover{background:#0f2f45;border-color:#0f2f45}
.btn.ghost{background:transparent;border-color:var(--edge);color:var(--navy)}
.btn.ghost:hover{background:var(--panel);border-color:var(--navy)}
.btn.small{font-size:13.5px;padding:.45rem 1rem}
.btn.block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.actions{display:flex;gap:.7rem;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{padding:5.5rem 0 4rem;border-bottom:1px solid var(--line);position:relative;overflow:clip}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);max-width:16ch}
.hero h1 em{font-style:normal;color:var(--mint-deep)}
.hero .lede{margin:1.5rem 0 0;font-size:20px}
.hero .actions{margin-top:2rem}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:end}

/* The one piece of decoration on the site: a hairline field that reads as
   precision rather than ornament. It is a background gradient, so it costs
   nothing and cannot fail to load. */
.rulefield{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 64px),
    linear-gradient(180deg,transparent 55%,var(--paper));
  mask-image:linear-gradient(180deg,#000,transparent 78%)}

/* the open/closed pill, computed against opening hours */
.status{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--slate)}
.status.open{color:var(--mint-deep)}
.status.open .dot{background:var(--mint);box-shadow:0 0 0 3px rgba(18,209,176,.22)}

/* ---------- reveals ----------
   Gated on a .js class an inline head script sets and takes back off after
   2.5s unless site.js confirms it loaded. A CSS scroll timeline cannot be used
   here: view() never advances on a page too short to scroll, and whole
   sections sit at opacity 0 for ever on a tall screen. */
.js .rise{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .rise.in{opacity:1;transform:none}

/* ---------- section furniture ---------- */
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.2rem}
.sechead h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.sechead a{color:var(--mint-deep);font-weight:600;font-size:15px;text-decoration:none}
.sechead a:hover{text-decoration:underline}

.band{background:var(--navy);color:#e8f2f7}
.band h2,.band h3{color:#fff}
.band .lede,.band .muted{color:#a9c2d1}
.band .mono{color:var(--mint)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem}
.panel.plain{background:var(--paper)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}

/* numbered "every visit" list */
.always{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.always li{list-style:none;padding:1.6rem 1.6rem 1.8rem;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);position:relative}
.always li:nth-child(3n){border-right:0}
.always h3{font-size:1.12rem;margin-bottom:.4rem}
.always p{font-size:15px;color:var(--slate);margin:0}
.always .n{font-family:var(--mono);font-size:11px;color:var(--mint-deep);display:block;margin-bottom:.7rem}

/* service cards */
.svc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem 1.4rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;
  transition:border-color .2s,transform .2s var(--ease)}
.svc:hover{border-color:var(--edge);transform:translateY(-2px)}
.svc h3{font-size:1.2rem}
.svc p{font-size:15px;color:var(--slate);margin:0;flex:1}
.svc .meta{display:flex;gap:.8rem;align-items:baseline;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--slate);border-top:1px solid var(--line);
  padding-top:.75rem;margin-top:.4rem}
.svc .meta b{color:var(--navy);font-weight:600}

/* provider cards */
.who{display:flex;gap:1rem;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:1.3rem}
.who .initials{width:52px;height:52px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-2);color:var(--navy);font-family:var(--display);font-weight:600;font-size:18px;
  border:1px solid var(--line-2)}
.who h3{font-size:1.1rem}
.who .role{font-size:14px;color:var(--slate);margin:.1rem 0 .6rem}
.who p{font-size:15px;color:var(--slate);margin:0 0 .8rem}
.who .next{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mint-deep);display:block;margin-bottom:.7rem;min-height:1.1em}
.who .days{font-size:13.5px;color:var(--slate);font-family:var(--mono)}

/* ---------- forms ---------- */
.field{margin-bottom:1.1rem}
.field label,.legend{display:block;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:.35rem}
.field .hint{font-size:13.5px;color:var(--slate);margin:.3rem 0 0}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  width:100%;font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--paper);
  border:1px solid var(--edge);border-radius:10px;padding:.68rem .8rem;
  transition:border-color .15s,box-shadow .15s}
textarea{min-height:110px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234e6a7a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:12px;padding-right:2.2rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mint-deep);
  box-shadow:0 0 0 3px rgba(6,122,103,.16)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--bad)}
fieldset{border:0;padding:0;margin:0 0 1.1rem}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:15px;color:var(--ink);margin-bottom:.5rem}
.check input{margin-top:.25rem;width:17px;height:17px;accent-color:var(--mint-deep);flex:0 0 auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.err{color:var(--bad);font-size:14px;margin:.35rem 0 0}

/* honeypot. Off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- notices ---------- */
.notice{border:1px solid var(--line-2);background:var(--panel);border-radius:12px;
  padding:.9rem 1.1rem;font-size:15px;color:var(--ink)}
.notice.warn{border-color:#e6cf9a;background:#fdf6e6;color:var(--warn)}
.notice.good{border-color:rgba(18,209,176,.45);background:#e9fbf7;color:#04473c}
.notice.bad{border-color:#e8c3c3;background:#fdf0f0;color:var(--bad)}
.notice a{color:inherit}

/* the demo disclosure. Small, permanent, on every page. */
.disclosure{font-size:13.5px;color:var(--slate);border-top:1px solid var(--line);padding-top:1rem}
.disclosure b{color:var(--navy)}

/* ---------- with and without scripting ----------
   The inline head script adds .js before anything renders and takes it back
   off after 2.5s unless site.js confirms it loaded. So .js means "scripting is
   on and the site's own script arrived", which is the only condition under
   which the interactive flow is safe to show. */
.js-flow{display:none}
.js .js-flow{display:block}
.js .rail.js-flow{display:flex}
.js .btn.js-flow{display:inline-flex}
.js .nojs-flow{display:none}

/* ---------- booking ---------- */
.book-grid{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start}
/* A grid item defaults to min-width:auto, which means it refuses to be
   narrower than its widest child. The week strip is seven 260px cards inside
   an overflow-x:auto box, so without this the column opens to 1878px and the
   whole page scrolls sideways instead of just the calendar. */
.book-grid > *{min-width:0}
.picker{display:flex;flex-wrap:wrap;gap:.55rem}
/* Radios styled as chips. Real inputs underneath, so the keyboard and the
   screen reader both get a proper radio group and arrow keys work. */
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line-2);
  background:var(--paper);border-radius:999px;padding:.5rem 1rem;font-size:14.5px;font-weight:500;
  color:var(--ink);transition:border-color .18s,background .18s,color .18s}
.chip input:hover+span{border-color:var(--edge)}
.chip input:focus-visible+span{outline:2px solid var(--mint-deep);outline-offset:2px}
.chip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.chip input:checked+span .sub{color:#9fbccb}
.chip .sub{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.06em;color:var(--slate)}
.chip input:disabled+span{opacity:.4}

/* week strip */
.weekbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border:1px solid var(--line);border-radius:12px;padding:.5rem .6rem;background:var(--panel)}
.weekbar .range{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--navy);
  text-transform:uppercase}
.stepbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--edge);background:var(--paper);
  display:grid;place-items:center;color:var(--navy);transition:background .15s,border-color .15s}
.stepbtn:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:#fff}
.stepbtn:disabled{opacity:.35;cursor:not-allowed}

/* the week itself */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.55rem;margin-top:.9rem}
.day{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:.6rem .5rem;
  min-height:150px;display:flex;flex-direction:column;gap:.4rem}
.day.today{border-color:var(--mint);box-shadow:inset 0 0 0 1px var(--mint)}
.day .dh{text-align:center;padding-bottom:.45rem;border-bottom:1px solid var(--line)}
.day .dh .w{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate)}
.day .dh .d{display:block;font-family:var(--display);font-weight:600;font-size:16px;color:var(--navy);
  line-height:1.3}
.day .none{font-size:12px;color:var(--slate);text-align:center;margin:auto 0;font-family:var(--mono);
  letter-spacing:.03em}
.slot{border:1px solid var(--line-2);background:var(--paper);border-radius:8px;padding:.35rem .2rem;
  font-family:var(--mono);font-size:12.5px;color:var(--navy);text-align:center;width:100%;
  transition:background .15s,border-color .15s,color .15s}
.slot:hover{border-color:var(--navy);background:var(--panel)}
.slot[aria-pressed=true]{background:var(--mint);border-color:var(--mint);color:var(--mint-ink);font-weight:600}
.slot.more{border-style:dashed;color:var(--slate)}

/* Columns arrive one after another, left to right, and the direction the week
   moved decides which way they come in. It is the only motion in the calendar
   and it exists to make "these are different days" legible at a glance. */
.js .cal.turn .day{animation:dayin .34s var(--ease) both;animation-delay:calc(var(--i) * 32ms)}
.js .cal.turn.back .day{animation-name:dayin-back}
@keyframes dayin{from{opacity:0;transform:translateX(22px)}}
@keyframes dayin-back{from{opacity:0;transform:translateX(-22px)}}

.js .day .slot{animation:slotin .3s var(--ease) both;animation-delay:calc(var(--j) * 22ms)}
@keyframes slotin{from{opacity:0;transform:translateY(6px)}}

/* the sticky summary */
.summary{position:sticky;top:92px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);padding:1.3rem}
.summary h3{font-size:1.05rem;margin-bottom:.9rem}
.summary dl{margin:0 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;font-size:14.5px}
.summary dt{color:var(--slate)}
.summary dd{margin:0;text-align:right;color:var(--navy);font-weight:600}
.summary dd.empty{color:var(--slate);font-weight:400}

/* ---------- stepper (booking and intake) ---------- */
.rail{display:flex;gap:0;margin-bottom:2rem;counter-reset:step;position:relative}
.rail li{list-style:none;flex:1;position:relative;padding-top:1.7rem;font-size:13.5px;color:var(--slate);
  text-align:center}
.rail li::before{counter-increment:step;content:counter(step);position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:var(--paper);
  border:1px solid var(--line-2);color:var(--slate);font-family:var(--mono);font-size:12px;
  display:grid;place-items:center;z-index:2;transition:background .25s,border-color .25s,color .25s}
.rail li::after{content:"";position:absolute;top:12px;left:-50%;width:100%;height:1px;background:var(--line-2);z-index:1}
.rail li:first-child::after{display:none}
.rail li[data-state=done]::before{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
.rail li[data-state=now]::before{background:var(--navy);border-color:var(--navy);color:#fff}
.rail li[data-state=now]{color:var(--navy);font-weight:600}
.rail li[data-state=done]{color:var(--ink)}

/* ---------- statements ---------- */
.stmt{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden;
  margin-bottom:1.1rem}
.stmt-head{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:baseline;padding:1.1rem 1.3rem;
  background:var(--panel);border-bottom:1px solid var(--line)}
.stmt-head h3{font-size:1.05rem;margin-right:auto}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:.2rem .55rem;border-radius:999px;border:1px solid var(--line-2);color:var(--slate)}
.tag.due{border-color:#e6cf9a;background:#fdf6e6;color:var(--warn)}
.tag.paid{border-color:rgba(18,209,176,.45);background:#e9fbf7;color:#04473c}

.line{border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line-head{display:grid;grid-template-columns:auto 1fr auto auto;gap:.6rem 1rem;align-items:baseline;
  width:100%;background:none;border:0;padding:.9rem 1.3rem;text-align:left}
.line-head:hover{background:var(--panel)}
.line-head .code{font-family:var(--mono);font-size:12px;color:var(--slate)}
.line-head .nm{color:var(--navy);font-weight:600;font-size:15px}
.line-head .amt{font-variant-numeric:tabular-nums;font-size:14.5px;font-weight:600;color:var(--navy)}
.line-head .chev{width:14px;color:var(--slate);transition:transform .25s var(--ease)}
.line-head[aria-expanded=true] .chev{transform:rotate(90deg)}

/* A charge broken into who paid what, as one bar. Four numbers in a table is
   an invoice; the same four as widths is an explanation. */
.split{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--panel-2);margin:.2rem 0 .8rem}
.split span{display:block;height:100%;width:0;transition:width .7s var(--ease)}
.split .w-off{background:var(--line-2)}
.split .w-ins{background:var(--mint)}
.split .w-you{background:var(--navy)}
.key{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;font-size:13px;color:var(--slate);margin-bottom:.9rem}
.key i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:.4rem}
.key .w-off{background:var(--line-2)}
.key .w-ins{background:var(--mint)}
.key .w-you{background:var(--navy)}
.line-body{padding:0 1.3rem 1.2rem;font-size:14.5px;color:var(--slate)}
.line-body table{width:100%;border-collapse:collapse;font-size:14px}
.line-body td{padding:.32rem 0;border-bottom:1px solid var(--line)}
.line-body td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--navy)}
.line-body tr:last-child td{border-bottom:0;font-weight:700;color:var(--navy)}
.line-body .why{margin-top:.8rem;font-size:14px}

.totals{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:flex-end;padding:1rem 1.3rem;
  background:var(--panel);border-top:1px solid var(--line);font-size:14.5px}
.totals b{font-variant-numeric:tabular-nums;color:var(--navy)}

/* benefits meter */
.meter{height:10px;border-radius:999px;background:var(--panel-2);overflow:hidden;margin:.5rem 0 .35rem}
.meter span{display:block;height:100%;width:0;background:var(--mint);transition:width .8s var(--ease)}
.meter.warn span{background:var(--warn)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#a9c2d1;font-size:15px;padding:3rem 0 2rem;margin-top:5rem}
.site-footer .mark{color:#fff}
.site-footer .mark i{color:#7f9db0}
.site-footer h4{color:#fff;font-size:14px;margin-bottom:.7rem;font-family:var(--sans);font-weight:700;
  letter-spacing:.02em}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.4rem}
.site-footer a{color:#a9c2d1;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .base{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid #1c3d54;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:13.5px;color:#7f9db0}
.site-footer .base b{color:#c8dae5}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .hero-grid,.book-grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .always{grid-template-columns:1fr 1fr}
  .always li:nth-child(3n){border-right:1px solid var(--line)}
  .always li:nth-child(2n){border-right:0}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .summary{position:static}
  /* The week becomes a scrolling row of day cards. A 7-column grid on a phone
     is seven columns of nothing. */
  .cal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.6rem;
    padding-bottom:.6rem;-webkit-overflow-scrolling:touch}
  .day{flex:0 0 min(64vw,260px);scroll-snap-align:start}
}
@media (max-width:720px){
  .section{padding:4rem 0}
  .always{grid-template-columns:1fr}
  .always li{border-right:0 !important}
  .two{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr}
  .rail li{font-size:0}
  .rail li::before{font-size:12px}

  .nav-label{display:grid;place-items:center;width:40px;height:40px;cursor:pointer;
    border:1px solid var(--edge);border-radius:10px}
  .nav-label span{display:block;width:17px;height:1.5px;background:var(--navy);position:relative}
  .nav-label span::before,.nav-label span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;
    background:var(--navy)}
  .nav-label span::before{top:-5px}
  .nav-label span::after{top:5px}
  .nav{position:absolute;top:70px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1.5rem 1.2rem;display:none}
  .nav a:not(.btn){padding:.75rem 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:.8rem}
  .nav-toggle:checked~.nav{display:flex}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .js .rise{opacity:1;transform:none}
}

@media print{
  .site-header,.site-footer,.btn,.rail{display:none}
  body{background:#fff}
  .stmt{break-inside:avoid}
}