/* ─────────────────────────────────────────────────────────
   Larkspur Recovery Suites
   Website concept by All In AI Vibes

   Look: a Southern guesthouse, not a clinic. Warm paper, ink
   brown text, deep garden green for anything you press, clay
   used sparingly. Deliberately not the dark glassy purple that
   every AI generated site defaults to, and deliberately not the
   navy and orange used elsewhere in the portfolio.
   ───────────────────────────────────────────────────────── */

:root{
  --paper:#f7f3ec;
  --paper-2:#efe9df;
  --card:#fffdf9;
  --ink:#241e1a;
  --ink-soft:#5b5049;
  /* Darkened from #8d8179 after review: at 3.4:1 it failed contrast
     on the paper background, and the worst place it landed was the
     refund policy under the deposit button. Money copy has to be
     readable. Now about 5.2:1. */
  --ink-faint:#6b6059;
  --green:#2f4a3f;
  --green-deep:#22372f;
  --clay:#b8654a;
  --line:rgba(36,30,26,.14);
  --line-soft:rgba(36,30,26,.08);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1140px;
  --r:4px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* faint paper grain so the flat cream does not read as a default */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block}

a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}

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

.skip{
  position:absolute;left:-999px;top:0;z-index:100;
  background:var(--green);color:#fff;padding:12px 18px
}
.skip:focus{left:8px;top:8px}

/* ── type ─────────────────────────────────────────────── */

h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;margin:0}

h1{
  font-size:clamp(2.6rem,6.2vw,4.5rem);
  line-height:1.03;
  letter-spacing:-.03em;
}

.h2{
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.1;
  margin-bottom:14px;
}

.eyebrow{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--clay);
  margin:0 0 14px;
}

.lede{
  font-size:1.16rem;
  color:var(--ink-soft);
  max-width:34em;
  margin:22px 0 0;
}

.section-lede{
  color:var(--ink-soft);
  max-width:36em;
  margin:0 0 40px;
}

.num{font-family:var(--serif);font-weight:600}

/* ── buttons ──────────────────────────────────────────── */

.btn{
  display:inline-block;
  font:inherit;
  font-weight:600;
  font-size:.98rem;
  padding:15px 28px;
  border:1px solid transparent;
  border-radius:var(--r);
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}

.btn-solid{background:var(--green);color:#fdfbf7;border-color:var(--green)}
.btn-solid:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn-solid:disabled{background:var(--paper-2);color:var(--ink-faint);border-color:var(--line);cursor:not-allowed}

.btn-quiet{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-quiet:hover{border-color:var(--ink);background:rgba(36,30,26,.03)}

.btn-wide{width:100%;padding:16px}

:focus-visible{outline:2px solid var(--clay);outline-offset:3px}

/* ── top bar ──────────────────────────────────────────── */

.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(247,243,236,.93);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}

.topbar-in{display:flex;align-items:center;justify-content:space-between;height:74px}

.mark{display:flex;align-items:center;gap:12px;text-decoration:none}

.mark-glyph{
  width:26px;height:26px;flex:none;
  border:1.5px solid var(--green);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
}

.mark-name{
  font-family:var(--serif);
  font-size:1.28rem;
  line-height:1;
  letter-spacing:-.02em;
}

.mark-sub{
  display:block;
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:4px;
}

.nav{display:flex;align-items:center;gap:30px}
.nav a{text-decoration:none;font-size:.95rem;color:var(--ink-soft)}
.nav a:hover{color:var(--ink)}

.nav-cta{
  border:1px solid var(--ink);
  border-radius:var(--r);
  padding:9px 18px;
  color:var(--ink) !important;
  font-weight:600;
}
.nav-cta:hover{background:var(--ink);color:var(--paper) !important}

/* ── hero ─────────────────────────────────────────────── */

.hero{padding:74px 0 60px}

.hero-in{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}

.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

.hero-frame{
  border:1px solid var(--line);
  padding:12px;
  background:var(--card);
}

.hero-img{
  aspect-ratio:4/5;
  background:var(--paper-2);
  background-size:cover;
  background-position:center;
}

.hero-caption{
  font-size:.82rem;
  color:var(--ink-faint);
  margin:12px 0 0;
  text-align:right;
  font-style:italic;
}

/* ── trust strip ──────────────────────────────────────── */

.strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--paper-2);
}

.strip-in{
  display:flex;
  flex-wrap:wrap;
  gap:14px 46px;
  padding-top:20px;
  padding-bottom:20px;
  font-size:.9rem;
  color:var(--ink-soft);
}

.strip-in span{position:relative;padding-left:20px}
.strip-in span::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:7px;height:7px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--clay);
}

/* ── the stay ─────────────────────────────────────────── */

.stay{padding:96px 0}

.thread{
  list-style:none;
  margin:48px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line);
}

.thread li{
  padding:34px 30px 10px 0;
  border-right:1px solid var(--line-soft);
  position:relative;
}
.thread li:last-child{border-right:0}

.thread li::before{
  content:"";
  position:absolute;top:-5px;left:0;
  width:9px;height:9px;
  background:var(--green);
  border-radius:50%;
}

.thread-num{
  font-family:var(--serif);
  font-size:.95rem;
  color:var(--clay);
  display:block;
  margin-bottom:10px;
}

.thread h3{font-size:1.32rem;margin-bottom:10px}

.thread p{margin:0 0 12px;font-size:.97rem;color:var(--ink-soft)}

.note{
  font-size:.9rem !important;
  color:var(--ink-faint) !important;
  border-left:2px solid var(--clay);
  padding-left:14px;
}

/* ── rooms ────────────────────────────────────────────── */

.rooms{padding:96px 0;background:var(--paper-2);border-top:1px solid var(--line)}

.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

.room{
  background:var(--card);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
}

.room-feature{border-color:var(--green);border-width:1.5px}

.room-img{
  aspect-ratio:3/2;
  background:var(--paper-2);
  background-size:cover;
  background-position:center;
  border-bottom:1px solid var(--line);
}

.room-body{padding:26px 24px 28px}

.tag{
  display:inline-block;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
  border:1px solid var(--green);
  border-radius:2px;
  padding:3px 8px;
  margin:0 0 12px;
}

.room h3{font-size:1.4rem;margin-bottom:6px}

.room-rate{
  font-size:1.02rem;
  color:var(--ink-soft);
  margin:0 0 14px;
}
.room-rate .num{font-size:1.5rem;color:var(--ink)}

/* max-width because at tablet size the third card spans two columns
   and this line was running to 86 characters. */
.room-body > p{font-size:.96rem;color:var(--ink-soft);margin:0 0 18px;max-width:46ch}

.ticks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft);padding-top:16px}
.ticks li{
  font-size:.9rem;
  color:var(--ink-soft);
  padding-left:19px;
  position:relative;
  margin-bottom:7px;
}
.ticks li::before{
  content:"";
  position:absolute;left:0;top:.6em;
  width:6px;height:6px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--clay);
}

/* ── booking ──────────────────────────────────────────── */

.book{padding:96px 0}

.booker{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:0 46px;
  align-items:start;
}

.step{
  grid-column:1;
  padding-bottom:34px;
  margin-bottom:34px;
  border-bottom:1px solid var(--line);
}
.step:last-of-type{border-bottom:0}

.step-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}

.step-num{
  width:30px;height:30px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--green);
  border-radius:50%;
  font-family:var(--serif);
  font-size:.92rem;
  color:var(--green);
}

.step-head h3{font-size:1.32rem}

.dates{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:460px}

.field{display:block}
.field span{
  display:block;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:8px;
}
.field input{
  width:100%;
  font:inherit;
  font-size:1rem;
  padding:13px 14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--ink);
}
.field input:focus{border-color:var(--green)}

.dates-msg{
  font-size:.9rem;
  color:var(--clay);
  margin:14px 0 0;
  min-height:1.2em;
}

/* The house is full. This has to be the loudest thing on the step,
   because someone who has just typed their dates needs to know the
   answer is no before they scroll past three greyed out rooms. */
.full-alert{
  background:#fbeee9;
  border:1.5px solid var(--clay);
  border-left-width:6px;
  border-radius:var(--r);
  padding:20px 24px;
  margin:22px 0 0;
  max-width:560px;
}
.full-alert[hidden]{display:none}

.full-head{
  font-family:var(--serif);
  font-size:1.6rem;
  line-height:1.15;
  color:#8f4530;
  margin:0 0 6px;
}

.full-sub{
  margin:0;
  font-size:1rem;
  color:var(--ink);
}
.full-sub b{font-weight:600}

.nights{margin-top:24px}

.nights-label{
  font-family:var(--serif);
  font-size:1.1rem;
  margin:0 0 12px;
}

.ribbon{display:flex;flex-wrap:wrap;gap:6px}

.ribbon i{
  width:34px;height:44px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:2px;
  position:relative;
}
.ribbon i::after{
  content:"";
  position:absolute;inset:auto 0 8px;
  margin:auto;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--green);
  opacity:.32;
}

/* Name runs the full width, phone and email share the row under it. */
.who{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:460px;margin-bottom:18px}
.who .field-wide{grid-column:1 / -1;max-width:none;margin-top:0}

.field-wide{max-width:460px;margin-top:14px}

/* "optional" sits beside the label without shouting. */
.field span em{
  font-style:normal;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--ink-faint);
  margin-left:6px;
}

.pick-flat{max-width:620px}

.who-note{
  font-size:.9rem;
  color:var(--clay);
  margin:14px 0 0;
  min-height:1.2em;
}

.picks{display:grid;gap:12px;max-width:620px}

.pick{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  cursor:pointer;
  transition:border-color .14s ease,background .14s ease;
}
.pick:hover{border-color:var(--ink-faint)}

.pick input{
  width:19px;height:19px;
  flex:none;
  accent-color:var(--green);
  margin:0;
}

/* A room somebody else already has. Greyed and unpickable, but still
   readable, because "why can I not have that one" is the first
   question and the answer has to be visible. */
.pick.is-taken{
  background:var(--paper-2);
  border-style:dashed;
  cursor:not-allowed;
  opacity:.72;
}
.pick.is-taken:hover{border-color:var(--line)}
.pick.is-taken .pick-price{text-decoration:line-through;color:var(--ink-faint)}

.pick-taken{
  display:inline-block;
  margin-top:6px;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--clay);
  border:1px solid var(--clay);
  border-radius:2px;
  padding:2px 7px;
}

.pick:has(input:checked){
  border-color:var(--green);
  background:#f4f7f4;
  box-shadow:inset 3px 0 0 var(--green);
}

.pick-body{flex:1;display:block}
.pick-name{display:block;font-weight:600;font-size:1rem}
.pick-meta{display:block;font-size:.87rem;color:var(--ink-faint);margin-top:2px}

.pick-price{
  font-family:var(--serif);
  font-size:1.24rem;
  text-align:right;
  flex:none;
  line-height:1.15;
}
.pick-price small{
  display:block;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  color:var(--ink-faint);
  letter-spacing:.02em;
}

/* summary */

.summary{
  grid-column:2;
  grid-row:1 / span 3;
  position:sticky;
  top:100px;
  background:var(--card);
  border:1px solid var(--ink);
  padding:28px 26px;
}

.summary h3{
  font-size:1.34rem;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}

.sum-empty{color:var(--ink-faint);font-size:.94rem;margin:0}

.sum-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:.94rem;
  padding:7px 0;
}
.sum-row span{color:var(--ink-soft)}
.sum-row strong{font-weight:600;white-space:nowrap}

.sum-lines .sum-row:last-child{padding-bottom:14px}

.sum-total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px}

.sum-row-big{
  font-size:1.04rem;
  padding-bottom:12px;
  margin-bottom:8px;
  border-bottom:1px solid var(--line-soft);
}
.sum-row-big strong{font-family:var(--serif);font-size:1.5rem;line-height:1}

.sum-due strong{color:var(--green);font-family:var(--serif);font-size:1.24rem}
.sum-later{color:var(--ink-faint)}
.sum-later strong{font-weight:500}

.summary .btn{margin-top:20px}

.sum-fine{
  font-size:.8rem;
  line-height:1.55;
  color:var(--ink-faint);
  margin:16px 0 0;
}

.privacy-note{
  margin:56px 0 0;
  padding:24px 26px;
  background:var(--paper-2);
  border-left:3px solid var(--green);
  font-size:.96rem;
  color:var(--ink-soft);
  max-width:70ch;
}
.privacy-note strong{color:var(--ink)}

/* ── costs ────────────────────────────────────────────── */

.costs{padding:96px 0;background:var(--paper-2);border-top:1px solid var(--line)}

.price-table{
  width:100%;
  max-width:680px;
  border-collapse:collapse;
  margin-bottom:56px;
}
.price-table th,.price-table td{
  text-align:left;
  padding:13px 0;
  border-bottom:1px solid var(--line-soft);
  font-weight:400;
}
.price-table th{color:var(--ink-soft);font-size:.98rem}
.price-table td{
  text-align:right;
  font-family:var(--serif);
  font-size:1.06rem;
}
.price-table tr.rule th,.price-table tr.rule td{border-top:1px solid var(--line);padding-top:20px}

.plain{display:grid;grid-template-columns:1fr 1fr;gap:44px;max-width:860px}
.plain h3{font-size:1.28rem;margin-bottom:10px}
.plain p{margin:0;color:var(--ink-soft);font-size:.98rem}

/* ── closer ───────────────────────────────────────────── */

.closer{
  padding:88px 0;
  background:var(--green);
  color:#f2efe8;
}
.closer-in{max-width:620px}
.closer h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:14px}
.closer p{color:rgba(242,239,232,.8);margin:0}

.phone{margin-top:26px !important}
.phone a{
  font-family:var(--serif);
  font-size:2rem;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);
}
.phone a:hover{border-color:#fff}

/* ── footer ───────────────────────────────────────────── */

.foot{padding:56px 0;font-size:.9rem;color:var(--ink-soft)}
.foot-in{display:grid;grid-template-columns:1fr 1.4fr;gap:56px}
.foot p{margin:0 0 5px}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}

.foot-name{font-family:var(--serif);font-size:1.16rem;color:var(--ink);margin-bottom:10px !important}

.foot-note{
  border-left:1px solid var(--line);
  padding-left:34px;
  font-size:.86rem;
  color:var(--ink-faint);
}
.foot-note strong{color:var(--ink-soft)}
.foot-note p{margin-bottom:9px}

/* ── modal ────────────────────────────────────────────── */

.modal{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;
  background:rgba(36,30,26,.55);
  padding:24px;
}
.modal[hidden]{display:none}

.modal-card{
  background:var(--card);
  border:1px solid var(--ink);
  padding:34px 32px;
  max-width:480px;
}
.modal-card h3{font-size:1.5rem;margin-bottom:14px}
.modal-card p{color:var(--ink-soft);font-size:.97rem;margin:0 0 14px}

.modal-sum{
  background:var(--paper-2);
  padding:14px 16px;
  font-size:.92rem !important;
  color:var(--ink) !important;
  border-left:3px solid var(--green);
}

.modal-demo{
  font-size:.86rem !important;
  border-top:1px solid var(--line);
  padding-top:14px;
  margin-top:18px !important;
}

/* ── photos ───────────────────────────────────────────────
   Paths are relative on purpose. A root absolute path like
   /images/hero.jpg shows a blank page when the folder is
   opened by double clicking index.html instead of through a
   server. That trap is already logged from a Studio 10K build.
   Until the files exist these blocks stay as warm paper, which
   still reads as an intentional layout rather than a break. */

[data-img="hero"]{background-image:url("images/magnolia-wide.jpg")}
[data-img="garden"]{background-image:url("images/garden.jpg")}
[data-img="magnolia"]{background-image:url("images/magnolia.jpg")}
[data-img="companion"]{background-image:url("images/companion.jpg")}

/* ── responsive ───────────────────────────────────────── */

@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:44px}
  .hero-art{max-width:420px}
  .thread{grid-template-columns:1fr 1fr}
  .thread li{border-right:0;padding-right:20px}
  .booker{grid-template-columns:1fr;gap:0}
  .summary{grid-column:1;grid-row:auto;position:static;margin-top:12px}
  .room-grid{grid-template-columns:1fr 1fr}
  .room:last-child{grid-column:span 2}
}

@media (max-width:720px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .nav a:not(.nav-cta){display:none}
  .hero{padding:48px 0 40px}
  .stay,.rooms,.book,.costs{padding:64px 0}
  .thread{grid-template-columns:1fr;border-top:0}
  .thread li{
    border-right:0;
    border-top:1px solid var(--line);
    padding:28px 0 6px;
  }
  .room-grid{grid-template-columns:1fr}
  .room:last-child{grid-column:auto}
  .dates,.who{grid-template-columns:1fr;max-width:none}
  .plain{grid-template-columns:1fr;gap:30px}
  .foot-in{grid-template-columns:1fr;gap:30px}
  .foot-note{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:24px}
  .pick{flex-wrap:wrap}
  .pick-price{text-align:left}
  .hero-caption{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}