:root{
  --bg:#FBFAF8; --fg:#1B1A17; --mut:#5E5A52; --line:rgba(27,26,23,.13); --link:#1B1A17;
  --quote:rgba(27,26,23,.05);
  --vine-w:40px; --vine-o:.32; --vine-h:34px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#131211; --fg:#EDEAE4; --mut:#9A948A; --line:rgba(237,234,228,.15); --link:#EDEAE4;
         --quote:rgba(237,234,228,.05); --vine-o:.26; }
}
/* explicit choice always wins over the system preference */
:root[data-theme="dark"]{ --bg:#131211; --fg:#EDEAE4; --mut:#9A948A; --line:rgba(237,234,228,.15); --link:#EDEAE4;
         --quote:rgba(237,234,228,.05); --vine-o:.26; }
:root[data-theme="light"]{ --bg:#FBFAF8; --fg:#1B1A17; --mut:#5E5A52; --line:rgba(27,26,23,.13); --link:#1B1A17;
         --quote:rgba(27,26,23,.05); --vine-o:.32; }

/* theme toggle */
.topbar{display:flex;justify-content:flex-end;padding:18px 0 0}
.tt{
  font:inherit; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  background:none; border:0; padding:12px 2px; cursor:pointer; color:var(--mut);
  border-bottom:1px solid transparent; transition:color .2s,border-color .2s; min-height:44px;
}
.tt:hover,.tt:focus-visible{color:var(--fg); border-bottom-color:var(--line)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0 auto; max-width:660px; padding:0 22px 90px;
  background:var(--bg); color:var(--fg);
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px; line-height:1.72; -webkit-font-smoothing:antialiased;
}

/* ---- the vine, hard against both edges ---- */
.vine{
  position:fixed; top:0; bottom:0; z-index:2; pointer-events:none;
  width:var(--vine-w); overflow:hidden;
  color:var(--fg); opacity:var(--vine-o);
}
.vine--l{left:0}
.vine--r{right:0; transform:scaleX(-1)}
.vine svg{width:100%; height:auto; display:block; overflow:visible}
.vine path{fill:none; stroke:currentColor; stroke-width:1; stroke-linecap:round; stroke-linejoin:round}

/* leaves open one by one, just behind the growing stem */
.vine .leaf{
  opacity:0; transform:scale(.35);
  transform-box:fill-box; transform-origin:0% 50%;
  transition:opacity 420ms ease-out, transform 420ms cubic-bezier(.28,.9,.4,1);
}
.vine.is-grown .leaf{opacity:1; transform:scale(1)}
.vine.is-settled .leaf{opacity:1; transform:scale(1); transition:none}

/* on phones the side rails crowd the text — the vine lies across the page instead,
   once above the content and once below it */
.vine--t,.vine--b{display:none}
@media (max-width:700px){
  .vine--l,.vine--r{display:none}
  .vine--t,.vine--b{
    display:block; position:static; width:100%; height:var(--vine-h); overflow:hidden;
  }
  .vine--t{margin:6px 0 30px}
  .vine--b{margin:34px 0 0}
  .vine--t svg,.vine--b svg{height:100%; width:auto; max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .vine .leaf{opacity:1; transform:none; transition:none}
}

img,svg{max-width:100%;display:block}
a{color:var(--link); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid currentColor; outline-offset:3px; border-radius:2px}
::selection{background:var(--fg);color:var(--bg)}

header{padding:34px 0 0}
.me-link{display:inline-block;margin:0 0 22px;border-radius:50%;line-height:0}
.me{width:64px;height:64px;object-fit:cover;border-radius:50%;display:block;
    transition:transform .22s cubic-bezier(.22,.7,.3,1)}
.me-link:hover .me,.me-link:focus-visible .me{transform:scale(1.09)}
.me-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.me{transition:none}}

/* display serif — home hero and the About lede */
.hero,.intro{
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-weight:400; letter-spacing:-.012em; line-height:1.1;
}
.hero{font-size:clamp(32px,5.3vw,48px); margin:0 0 22px; text-wrap:balance}

h1{font-size:15px;font-weight:500;letter-spacing:.04em;margin:0 0 18px}
h1 a{text-decoration:none}
h1 a:hover{text-decoration:underline;text-decoration-thickness:1px}
.intro{font-size:clamp(26px,3.6vw,34px); line-height:1.18; margin:0 0 22px; text-wrap:balance}
p{margin:0 0 18px}
.mut{color:var(--mut)}
.back{display:inline-block;margin:0 0 30px;color:var(--mut);font-size:13.5px;letter-spacing:.02em}

hr{border:0;border-top:1px solid var(--line);margin:42px 0}

h2{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
   color:var(--mut);margin:0 0 24px}
h3{font-size:15px;font-weight:500;margin:0 0 6px;letter-spacing:.01em}

ul{list-style:none;margin:0;padding:0}
li{margin:0 0 22px}
li:last-child{margin-bottom:0}
.t{font-weight:600}
.yr{color:var(--mut);font-variant-numeric:tabular-nums}
.d{color:var(--mut);margin:2px 0 0}
strong{font-weight:600;color:var(--fg)}

.inline{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0;padding:0;list-style:none}
.inline li{margin:0}
.inline a{display:inline-block;padding:9px 0}

/* recommendations — the whole block is the link */
.rec{display:block;text-decoration:none;color:inherit;border-left:2px solid var(--line);
     padding:2px 0 2px 18px;margin:0 0 26px}
.rec:last-of-type{margin-bottom:0}
.rec:hover{border-left-color:var(--fg)}
.rec q{quotes:none;display:block;font-size:15px;line-height:1.66;margin:0 0 11px}
.rec cite{font-style:normal;color:var(--mut);font-size:13px;line-height:1.6;display:block}

.portrait{width:100%;max-width:280px;height:auto;aspect-ratio:4/5;object-fit:cover;
          border-radius:3px;display:block;margin:0 0 28px}

/* booking form */
form{margin:0}
label{display:block;margin:0 0 22px}
.k{display:block;font-size:13px;color:var(--mut);margin:0 0 8px;letter-spacing:.02em}
input,textarea{
  width:100%;font:inherit;font-size:16px;color:var(--fg);background:transparent;
  border:1px solid var(--line);border-radius:4px;padding:11px 12px;line-height:1.5;
}
textarea{min-height:130px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--fg)}
button{
  font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  background:var(--fg);color:var(--bg);border:0;border-radius:4px;padding:13px 22px;min-height:48px;
}
button:hover{opacity:.85}
.err,.ok{font-size:15px;margin:0 0 18px}
.err{color:#B4442E}
@media (prefers-color-scheme: dark){ .err{color:#E08D77} }

footer{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);
       color:var(--mut);font-size:12.5px;letter-spacing:.03em}
footer a{color:var(--mut)}

@media (max-width:879px){ :root{--vine-w:26px} }
@media (max-width:560px){ :root{--vine-w:16px} body{padding-left:28px; padding-right:28px} }
@media (max-width:359px){ body{padding-left:24px; padding-right:24px} }

@media (max-width:520px){
  body{font-size:14.5px}
  header{padding-top:40px}
  .rec q{font-size:14.5px}
}