<style>
/* ============================================================
   THE READING ROOM — cosy literary bookshop
   Deep green · brass · parchment. Square corners. Dust jackets.
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* ---------- Palette ---------- */
:root{
  /* core palette */
  --green-900:#0e1f18;
  --green-800:#12281f;
  --green-700:#173327;
  --green-600:#1e4232;
  --green-500:#2a5a44;
  --brass-500:#c9a24a;
  --brass-400:#dcbb6b;
  --brass-300:#e8d29a;
  --parchment:#f3ead8;
  --parchment-dim:#d9cdb4;
  --ink:#0b1a14;

  /* semantic */
  --bg:var(--green-900);
  --surface:var(--green-800);
  --surface-2:var(--green-700);
  --text:var(--parchment);
  --muted:#b9ae95;          /* ~7:1 on --bg */
  --accent:var(--brass-500);
  --accent-ink:var(--ink);  /* dark ink on brass ≈ 8:1 */
  --border:rgba(201,162,74,.34);
  --border-soft:rgba(201,162,74,.18);

  /* type */
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --font-body:Georgia,"Times New Roman",Times,serif;
  --font-ui:"Helvetica Neue",Arial,sans-serif;

  /* scale */
  --step--1:.82rem;
  --step-0:1.02rem;
  --step-1:1.2rem;
  --step-2:1.5rem;
  --step-3:2rem;
  --step-4:2.6rem;
  --step-5:3.4rem;

  /* space */
  --sp-1:.4rem;
  --sp-2:.75rem;
  --sp-3:1.15rem;
  --sp-4:1.75rem;
  --sp-5:2.6rem;
  --sp-6:4rem;
  --radius:0px;
  --maxw:1180px;

  /* HOST-UI TOKEN ALIASES — public contract */
  --wv-bg:var(--bg);
  --wv-surface:var(--surface);
  --wv-text:var(--text);
  --wv-muted:var(--muted);
  --wv-accent:var(--accent);
  --wv-accent-ink:var(--accent-ink);
  --wv-border:var(--border);
  --wv-font-display:var(--font-display);
  --wv-font-body:var(--font-body);
  --wv-radius:var(--radius);
}

/* ---------- Base ---------- */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.68;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.012em;
  overflow-wrap:break-word;
  word-break:break-word;
}
h1{font-size:clamp(2rem,4.4vw,var(--step-5))}
h2{font-size:clamp(1.6rem,3vw,var(--step-4))}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
p{max-width:68ch}
strong{font-weight:700;color:var(--brass-300)}
a:hover{color:var(--brass-400)}
::selection{background:var(--brass-500);color:var(--ink)}

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,2.5rem);
}
.section{padding-block:clamp(2.6rem,6vw,4.6rem);border-top:1px solid var(--border-soft)}
.section:first-of-type{border-top:0}
.band{
  width:100%;
  background:var(--green-800);
  border-block:1px solid var(--border);
  padding-block:clamp(2.4rem,6vw,4.4rem);
}
.center{text-align:center}
.center p{margin-inline:auto}
.muted{color:var(--muted)}
.lead{font-size:var(--step-1);line-height:1.6;color:var(--parchment-dim);max-width:60ch}
.eyebrow{
  font-family:var(--font-ui);
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:600;
  color:var(--brass-400);
  display:block;
  margin-bottom:var(--sp-2);
}
hr{border:0;border-top:1px solid var(--border);margin-block:var(--sp-5)}

/* ---------- Grids & cards ---------- */
.grid{
  display:grid;
  gap:clamp(1.1rem,2.4vw,1.9rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.grid--sidebar{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  padding:clamp(1.1rem,2.2vw,1.7rem);
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  box-shadow:inset 0 0 0 1px rgba(243,234,216,.04);
}
.card h3{font-size:var(--step-1)}
.card p{font-size:var(--step-0);color:var(--parchment-dim)}
.card .eyebrow{margin-bottom:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-ui);
  font-size:var(--step--1);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  padding:.85em 1.7em;
  border:1px solid var(--brass-500);
  background:transparent;
  color:var(--brass-300);
  cursor:pointer;
  border-radius:var(--radius);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn:hover,.btn:focus-visible{background:var(--brass-500);color:var(--ink)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--brass-400);border-color:var(--brass-400);color:var(--ink)}

/* ---------- Media (only way an image may appear) ---------- */
.media{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--green-700);
  border:1px solid var(--border-soft);
  box-shadow:inset 0 0 0 1px rgba(243,234,216,.06);
  position:relative;
}
.media > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media--wide{aspect-ratio:16/9}
.media--tall{aspect-ratio:2/3}
.split .media{width:100%;height:auto;align-self:start}

/* ---------- Frame (holds a .media without clipping) ---------- */
.frame{
  border:1px solid var(--border);
  padding:clamp(.6rem,1.4vw,1rem);
  background:var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(243,234,216,.05);
  display:block;
}
.frame > .media{border:0;box-shadow:none}
.frame > .media > img{display:block}

/* ---------- Split / stat ---------- */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3.2rem);
  align-items:center;
}
.split > *{min-width:0}
/* headings inside a split size against the COLUMN, not the viewport */
.split h1{font-size:clamp(1.6rem,2.4vw,2.35rem)}
.split h2{font-size:clamp(1.35rem,2vw,1.95rem)}
.split--wide-left{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.split--wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}

.stat{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding-block:var(--sp-2);
  border-top:1px solid var(--border);
}
.stat strong,.stat .stat-num{
  font-family:var(--font-display);
  font-size:var(--step-3);
  line-height:1;
  color:var(--brass-400);
  white-space:nowrap;
}
.stat span{font-family:var(--font-ui);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}

/* values that must never break */
.nowrap,.stat strong,.stat .stat-num,.price,.hours,.tel{white-space:nowrap}

/* ---------- Hero ---------- */
.hero{
  padding-block:clamp(3rem,8vw,6rem);
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(201,162,74,.10),transparent 60%),
    var(--green-900);
}
.hero .lead{margin-top:var(--sp-3)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4)}

/* ---------- Site header ---------- */
body.wpb-canvas .site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(14,31,24,.96);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(6px);
}
body.wpb-canvas .header-inner{
  display:flex;
  align-items:center;
  gap:clamp(.8rem,2.4vw,2rem);
  flex-wrap:wrap;
  padding-block:.85rem;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,2.5rem);
}
body.wpb-canvas .brand{
  font-family:var(--font-display);
  font-size:var(--step-1);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--parchment);
  white-space:nowrap;
  flex:0 0 auto;
}
body.wpb-canvas .brand::after{content:"";display:block;height:2px;background:var(--brass-500);margin-top:.28rem}
body.wpb-canvas .nav{
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
body.wpb-canvas .nav::-webkit-scrollbar{display:none}
body.wpb-canvas .nav ul{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.7rem)}
body.wpb-canvas .nav li{flex:0 0 auto}
body.wpb-canvas .nav a{
  font-family:var(--font-ui);
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:600;
  color:var(--parchment-dim);
  padding-block:.4rem;
  border-bottom:1px solid transparent;
  white-space:nowrap;
  display:inline-block;
}
body.wpb-canvas .nav a:hover, body.wpb-canvas .nav a[aria-current="page"]{color:var(--brass-300);border-bottom-color:var(--brass-500)}
body.wpb-canvas .nav-cta{flex:0 0 auto;margin-left:auto}

/* ---------- Site footer ---------- */
body.wpb-canvas .site-footer{
  background:var(--green-800);
  border-top:1px solid var(--border);
  padding-block:clamp(2.4rem,5vw,3.6rem) 0;
  margin-top:var(--sp-6);
}
body.wpb-canvas .footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(1.4rem,3vw,2.6rem);
  padding-bottom:var(--sp-5);
}
body.wpb-canvas .footer-col{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
body.wpb-canvas .footer-heading{
  font-family:var(--font-ui);
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:700;
  color:var(--brass-400);
  margin-bottom:var(--sp-1);
}
body.wpb-canvas .footer-col a, body.wpb-canvas .footer-col p, body.wpb-canvas .footer-col li{color:var(--muted);font-size:var(--step-0)}
body.wpb-canvas .footer-col a:hover{color:var(--brass-300)}
body.wpb-canvas .footer-col ul{display:flex;flex-direction:column;gap:.45rem}
body.wpb-canvas .footer-bottom{
  border-top:1px solid var(--border-soft);
  padding-block:var(--sp-3);
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2) var(--sp-4);
  justify-content:space-between;
  align-items:center;
  font-family:var(--font-ui);
  font-size:var(--step--1);
  letter-spacing:.06em;
  color:var(--muted);
}

/* ---------- Breakpoints ---------- */
@media (max-width:1024px){
  .grid--sidebar{grid-template-columns:minmax(0,1fr)}
  .split,.split--wide-left,.split--wide-right{grid-template-columns:minmax(0,1fr)}
  .split h1{font-size:clamp(1.6rem,4vw,2.2rem)}
  .split h2{font-size:clamp(1.35rem,3.2vw,1.8rem)}
}

@media (max-width:768px){
  :root{--step-5:2.6rem;--step-4:2.1rem;--step-3:1.7rem}
  body.wpb-canvas .header-inner{flex-wrap:nowrap;gap:.7rem}
  body.wpb-canvas .nav{order:3;flex-basis:100%;margin-top:.35rem}
  body.wpb-canvas .nav ul{gap:1.1rem}
  body.wpb-canvas .nav-cta{margin-left:auto}
  .btn{padding:.7em 1.2em;letter-spacing:.12em}
  .hero{padding-block:2.6rem}
  body.wpb-canvas .footer-grid{grid-template-columns:minmax(0,1fr)}
  body.wpb-canvas .footer-bottom{flex-direction:column;align-items:flex-start}
  .stat strong,.stat .stat-num{font-size:var(--step-2)}
}

@media (max-width:768px){
  body.wpb-canvas .header-inner{flex-wrap:wrap !important;row-gap:.5rem}
  body.wpb-canvas .nav{max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.wpb-canvas .nav ul{flex-wrap:wrap !important}
  body.wpb-canvas .nav li{flex:0 0 auto}
  body.wpb-canvas .nav a{white-space:nowrap}
  body.wpb-canvas .footer-grid{grid-template-columns:1fr !important;gap:1.5rem}
}

.media{display:block;width:100%;max-width:100%;overflow:hidden}
.media img{display:block;width:100%;max-width:100%;height:auto}

h1,h2,h3,h4{overflow-wrap:break-word;word-break:normal}
.split h1,.split h2{font-size:clamp(1.5rem,3.6vw,3.25rem);max-width:100%}
</style>