/* Riverbend Family Dental
   The brief is one word: calm. Not "medical but friendly", which is the whole
   category and is why the whole category looks the same. Actually quiet. Few
   elements on a screen, margins wider than anyone would dare, a slow vertical
   rhythm, and no element anywhere that raises its voice. Someone arrives at a
   dentist's website already braced. The page's job is to lower that before it
   asks for anything.

   Type: Newsreader set light and large, a reading face with warmth in its
   italic, against Mulish, which is soft enough not to argue with it.
   Palette: white, a calm second surface, and ink that is deep pine teal rather
   than black. The accent is spent on three things and nothing else: the chosen
   appointment, links, and the booking action. The sand keeps it off cold. */

:root{
  --bg:#ffffff;
  --calm:#f2f7f6;
  --sand:#e9e1d4;
  --ink:#15343a;
  /* 4.21:1 on the calm surface at #5d7b80, which failed AA on the slot board
     and in the masthead line. Darkened until it clears 4.5 on all three
     surfaces: 6.25 on white, 5.78 on the calm, 4.82 on the sand. Still biased
     to the accent hue rather than dropped to a neutral gray. */
  --ink-soft:#4a656a;
  --line:#dce9ea;
  --line-soft:#eaf2f2;
  --accent:#1f7a86;
  --accent-deep:#14555e;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"Mulish","Helvetica Neue",Arial,sans-serif;
  --measure:62ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.7 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The measure is narrow and the margins are wide on purpose. This is the single
   loudest decision on the page and it is a decision about silence. */
.hold{max-width:1080px;margin:0 auto;padding:0 clamp(20px,6vw,72px)}
.narrow{max-width:var(--measure)}

h1,h2,h3,.wordmark{font-family:var(--display);font-weight:400;letter-spacing:-.012em}
h1{font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.1;margin:0 0 .6em;text-wrap:balance}
h2{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.18;margin:0 0 .7em;text-wrap:balance}
h3{font-size:1.18rem;line-height:1.3;margin:0 0 .4em}
p{margin:0 0 1.1em;max-width:var(--measure)}
.lede{font-size:1.14rem;color:var(--ink-soft);line-height:1.65}

/* ---------- masthead ----------
   Two rows. The practice above, and beneath it the one fact the caption promises
   is reachable from every screen: when the next appointment actually is. */
.mast{border-bottom:1px solid var(--line)}
/* padding-block, never the shorthand. .mast-row sits on the same element as
   .hold and has the same specificity, so a `padding: x 0` here silently zeroed
   .hold's side gutter and put the practice name against the left edge of every
   phone. The rest of the page was fine, which is what made it easy to miss. */
.mast-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 32px;padding-block:clamp(18px,3vw,28px)}
.wordmark{font-size:clamp(1.3rem,2.6vw,1.65rem);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.mast nav{display:flex;flex-wrap:wrap;gap:4px 28px}
.mast nav a{font-size:.97rem;text-decoration:none;color:var(--ink-soft);position:relative;display:inline-flex;align-items:center;min-height:44px}
.mast nav a:hover{color:var(--ink)}
.mast nav a[aria-current="page"]{color:var(--ink)}
.mast nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:10px;border-bottom:1px solid var(--accent)}

.nextbar{background:var(--calm);border-bottom:1px solid var(--line)}
.nextbar .hold{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;padding-block:2px}
.nextbar p{margin:0;max-width:none;font-size:.95rem;color:var(--ink-soft)}
.nextbar b{color:var(--ink);font-weight:600}
.nextbar a{color:var(--accent);text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px;font-size:.95rem;display:inline-flex;align-items:center;min-height:44px}

/* ---------- opening ---------- */
.open{padding-block:clamp(48px,9vw,120px) clamp(32px,5vw,64px)}
.open .sign{font-family:var(--display);font-style:italic;font-size:1.12rem;color:var(--ink-soft);margin:0}

.wide-photo{padding-bottom:clamp(40px,7vw,96px)}
.wide-photo img{width:100%;height:clamp(220px,34vw,420px);object-fit:cover}
.wide-photo figcaption{font-size:.88rem;color:var(--ink-soft);margin-top:10px;max-width:var(--measure)}

/* ---------- the slot board ----------
   The signature. Four real openings worked out from today against the practice's
   hours. Nothing else in the sample set has any reason to carry this, and no
   dental competitor publishes it at all. */
.slots{background:var(--calm);padding-block:clamp(40px,7vw,88px)}
.slots h2{margin-bottom:.35em}
.slots .lede{margin-bottom:2em}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 28px;padding:0;list-style:none;max-width:820px}
.slot{margin:0}
.slot button{
  width:100%;min-height:92px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;
  background:var(--bg);border:1px solid var(--line);border-radius:2px;padding:16px 18px;cursor:pointer;
  font-family:var(--body);color:var(--ink);text-align:left;
  transition:border-color .18s ease,background .18s ease;
}
.slot button:hover{border-color:var(--accent)}
.slot .day{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.slot .time{font-family:var(--display);font-size:1.5rem;line-height:1.1;font-variant-numeric:tabular-nums}
.slot button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.slot button[aria-pressed="true"] .day{color:#cfe6e9}

/* The one authored moment on the page: the chosen time arriving in the summary.
   It carries a state change, which is the only reason it is allowed to exist on
   a page whose entire argument is that it stays quiet. */
.picked{border-top:1px solid var(--line);padding-top:20px;max-width:820px}
.picked p{margin:0;max-width:none}
.picked .none{color:var(--ink-soft)}
.picked .got{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.picked .got strong{font-family:var(--display);font-weight:400;font-size:1.25rem}
.picked[data-arrived] .got{animation:arrive .32s cubic-bezier(.16,1,.3,1) both}
@keyframes arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:2px;
  font:600 1rem var(--body);text-decoration:none;padding:12px 26px;cursor:pointer;
  transition:background .18s ease;
}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-quiet{background:transparent;color:var(--accent)}
.btn-quiet:hover{background:var(--calm);color:var(--accent-deep)}

/* ---------- plain statements ----------
   Not cards. Three things worth knowing, separated by rules and space, because
   putting a border and a shadow around each one would be three objects shouting
   where three sentences will do. */
.says{padding-block:clamp(44px,8vw,104px)}
.say{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:8px clamp(24px,6vw,80px);padding:clamp(24px,4vw,40px) 0;border-top:1px solid var(--line-soft)}
.say:first-of-type{border-top:1px solid var(--line)}
.say h3{margin:0}
.say p{margin:0}
.say p+p{margin-top:.8em}

/* ---------- prose pages ---------- */
.page-head{padding-block:clamp(40px,7vw,96px) clamp(20px,3vw,40px)}
.page-body{padding-bottom:clamp(48px,8vw,112px)}
.page-body h2{margin-top:1.8em}
.page-body h2:first-child{margin-top:0}
.rule{border:0;border-top:1px solid var(--line);margin:clamp(32px,5vw,56px) 0}

.costs{width:100%;border-collapse:collapse;max-width:var(--measure);font-size:1rem;margin:0 0 1.4em}
.costs caption{text-align:left;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding-bottom:12px}
.costs th,.costs td{text-align:left;padding:13px 0;border-bottom:1px solid var(--line-soft);font-weight:400;vertical-align:top}
.costs td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.costs tr:last-child th,.costs tr:last-child td{border-bottom:0}

.people{list-style:none;margin:0;padding:0;display:grid;gap:clamp(28px,4vw,44px)}
.people li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:6px clamp(24px,5vw,64px);padding-top:clamp(22px,3vw,32px);border-top:1px solid var(--line-soft)}
.people li:first-child{border-top:1px solid var(--line)}
.people .who{font-family:var(--display);font-size:1.3rem;line-height:1.25}
.people .role{display:block;font-family:var(--body);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
.people p{margin:0;max-width:52ch}

/* ---------- booking form ---------- */
.book-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:start;padding-bottom:clamp(48px,8vw,112px)}
.form{display:grid;gap:18px}
.f{margin:0}
.form label{display:block;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.form input,.form textarea,.form select{width:100%;font:400 1rem/1.6 var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:2px;padding:13px 14px}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form-status{margin:0;color:var(--accent-deep);font-size:.98rem}
/* The only sand on the site, and it is under the appointment you are about to
   confirm. One warm surface at the one moment that matters keeps a page of
   white and pale teal from reading as cold. */
.chosen{background:var(--sand);border:1px solid #d9cdb9;padding:18px 20px;border-radius:2px}
.chosen p{margin:0;max-width:none}
.chosen .lab{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:6px}
.chosen .val{font-family:var(--display);font-size:1.3rem}

/* ---------- foot ---------- */
.foot{background:var(--calm);border-top:1px solid var(--line);padding-block:clamp(36px,6vw,64px)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px clamp(24px,5vw,64px)}
.foot p{margin:0 0 .4em;font-size:.97rem;color:var(--ink-soft);max-width:none}
.foot b{color:var(--ink);font-weight:600;display:block;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:10px}
.foot a{color:var(--accent)}

@media (max-width:820px){
  .say,.people li,.book-grid{grid-template-columns:1fr}
  .say{gap:4px}
}
@media (max-width:560px){
  .mast-row{gap:4px 20px}
  .mast nav{gap:2px 20px}
  .slot-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .picked[data-arrived] .got{animation:none}
  .btn,.slot button{transition:none}
}