/* Mr William Wolfe — house style
   Layout: a bound volume. Red leather boards (masthead, footer, section plates) around white pages of black review copy. */
:root{
  --paper:#ffffff;          /* the page */
  --ink:#16120f;            /* review copy, always black */
  --oxblood:#8f1a1d;        /* the leather */
  --oxblood-deep:#5e0e11;
  --gilt:#d6b46e;           /* gold tooling */
  --gilt-soft:#efe0b9;
  --rule:#e8ddd3;
  --muted:#6e625b;
  --display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --sc:"Cormorant SC","Cormorant Garamond",Garamond,serif;
  --body:"EB Garamond",Garamond,"Times New Roman",serif;
  --step-0:1.125rem; --step-1:1.4rem; --step-2:1.9rem; --step-3:2.6rem; --step-4:3.6rem;
  --measure:38rem;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--oxblood);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--oxblood-deep)}
:focus-visible{outline:2px solid var(--gilt);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.1;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:72rem;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sc{font-family:var(--sc);letter-spacing:.08em}
.eyebrow{font-family:var(--sc);font-size:1rem;letter-spacing:.14em;color:var(--oxblood);text-transform:lowercase}
.leather{background:var(--oxblood) url(../img/leather.jpg) center/700px auto repeat;color:var(--gilt-soft)}
.leather a{color:var(--gilt)}
/* gilt tooling: a double fillet like a book board */
.tooled{position:relative}
.tooled::before{content:"";position:absolute;inset:10px;border:1px solid rgba(214,180,110,.65);box-shadow:inset 0 0 0 4px transparent,inset 0 0 0 5px rgba(214,180,110,.35);pointer-events:none}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;box-shadow:0 2px 0 var(--oxblood-deep)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.6rem}
.brand img{height:52px;width:auto}
.nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.25rem 1.3rem;font-family:var(--sc);font-size:1.15rem;letter-spacing:.1em;text-transform:lowercase}
.nav a{color:var(--gilt-soft);text-decoration:none;padding-block:.2rem;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gilt);border-bottom-color:var(--gilt)}
.menu-btn{display:none;background:none;border:1px solid var(--gilt);color:var(--gilt);font-family:var(--sc);font-size:1rem;letter-spacing:.1em;padding:.3rem .7rem;cursor:pointer}
@media (max-width:560px){.ticker-label{font-size:.8rem;padding:.45rem .6rem}.hero{padding-block:2rem}}
@media (max-width:980px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;padding:1rem max(16px,env(safe-area-inset-left,0px));background:var(--oxblood-deep)}
  .nav.open{display:flex}
  .brand img{height:42px}
}

/* ---------- ticker ---------- */
.ticker{background:var(--ink);color:var(--gilt-soft);overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--gilt)}
.ticker-inner{display:flex;align-items:center}
.ticker-label{flex:none;font-family:var(--sc);letter-spacing:.12em;font-size:.95rem;background:var(--gilt);color:var(--ink);padding:.45rem .9rem;position:relative;z-index:2}
.ticker-track{display:inline-flex;gap:3rem;padding-left:2rem;animation:tick 70s linear infinite;font-style:italic;font-size:1.05rem}
.ticker-track span::after{content:"✦";font-style:normal;color:var(--gilt);margin-left:3rem}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;white-space:normal}}

/* ---------- hero ---------- */
.hero{padding-block:3rem 3.5rem}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center}
.hero-plate{padding:3rem 2.5rem;text-align:center}
.hero-plate img.logo{width:min(440px,100%);margin:0 auto 1rem}
.hero-plate .title{font-family:var(--sc);font-size:clamp(1.3rem,3vw,1.9rem);letter-spacing:.14em;color:var(--gilt);line-height:1.35;text-transform:uppercase}
.hero-plate .line{margin-top:1.5rem;font-style:italic;font-size:var(--step-1);color:var(--gilt-soft)}
.hero-figure img{border-radius:2px;margin:0 auto;max-height:560px;width:auto}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero-figure img{max-height:420px}}

/* ---------- generic sections ---------- */
section{padding-block:3.5rem}
.section-head{display:grid;gap:.6rem;margin-bottom:2rem;max-width:var(--measure)}
.section-head h2{font-size:var(--step-3)}
.section-head p{color:var(--muted);font-size:var(--step-1);font-style:italic;line-height:1.4}
.prose{max-width:var(--measure);display:grid;gap:1rem}
.prose p{hyphens:auto}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.fleuron{text-align:center;color:var(--oxblood);font-size:1.4rem;letter-spacing:1rem;padding-block:1rem}

/* the why */
.why{text-align:center}
.why .big{font-family:var(--display);font-size:clamp(3rem,9vw,6rem);color:var(--oxblood);line-height:1;font-weight:500}
.why .prose{margin:1rem auto 0;text-align:center}

/* three doors */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.door{display:grid;gap:.8rem;text-decoration:none;color:var(--ink)}
.door figure{margin:0;aspect-ratio:3/4;overflow:hidden;background:#fff}
.door img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.door:hover img{transform:scale(1.03)}
.door h3{font-size:var(--step-2);color:var(--oxblood)}
.door .hours{font-family:var(--sc);letter-spacing:.12em;color:var(--muted)}
@media (max-width:820px){.doors{grid-template-columns:1fr}.door figure{aspect-ratio:4/3}}

/* feature band (leather) */
.band{padding-block:3rem}
.band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.band h2{color:var(--gilt);font-size:var(--step-3)}
.band p{color:var(--gilt-soft)}
.band .prose{gap:.9rem}
.band .btn{border-color:var(--gilt);color:var(--gilt)}
@media (max-width:820px){.band .wrap{grid-template-columns:1fr}}
.btn{display:inline-block;font-family:var(--sc);letter-spacing:.12em;font-size:1.05rem;text-transform:lowercase;border:1px solid var(--oxblood);color:var(--oxblood);padding:.55rem 1.2rem;text-decoration:none;background:transparent;cursor:pointer}
.btn:hover{background:var(--oxblood);color:#fff}
.band .btn:hover{background:var(--gilt);color:var(--ink)}

/* ---------- guide ---------- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--rule);margin-bottom:2rem;overflow-x:auto}
.tab{flex:1;min-width:8rem;background:none;border:0;border-bottom:3px solid transparent;padding:1rem .5rem;font-family:var(--display);font-size:var(--step-2);color:var(--muted);cursor:pointer}
.tab[aria-selected="true"]{color:var(--oxblood);border-bottom-color:var(--oxblood)}
.tab small{display:block;font-family:var(--sc);font-size:.9rem;letter-spacing:.1em}
.intro{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.5rem;align-items:start;margin-bottom:2.5rem}
.intro img{width:100%;height:auto}
.intro .standfirst{font-family:var(--display);font-size:var(--step-2);font-style:italic;line-height:1.25;color:var(--oxblood)}
@media (max-width:820px){.intro{grid-template-columns:1fr}.intro img{max-width:320px}}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:2rem}
.chip{font-family:var(--sc);letter-spacing:.06em;font-size:1rem;background:#fff;border:1px solid var(--rule);color:var(--ink);padding:.3rem .8rem;cursor:pointer;border-radius:999px}
.chip[aria-pressed="true"]{background:var(--oxblood);border-color:var(--oxblood);color:#fff}
.search{flex:1 1 14rem;min-width:0;font:inherit;font-size:1rem;padding:.45rem .8rem;border:1px solid var(--rule);background:#fff;color:var(--ink)}
.entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 3.5rem}
@media (max-width:820px){.entries{grid-template-columns:1fr}}
.entry{display:grid;gap:.7rem;align-content:start;scroll-margin-top:7rem}
.entry .venue-img{aspect-ratio:3/2;overflow:hidden;background:var(--rule)}
.entry .venue-img img{width:100%;height:100%;object-fit:cover}
.entry h3{font-family:var(--sc);font-size:var(--step-2);color:var(--oxblood);letter-spacing:.06em;text-align:center}
.entry .addr{font-family:var(--sc);text-align:center;letter-spacing:.08em;font-size:1rem;color:var(--muted);line-height:1.4}
.entry .cat{justify-self:center;font-family:var(--sc);font-size:.85rem;letter-spacing:.14em;color:var(--oxblood);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:.1rem .8rem}
.entry .lead{font-family:var(--sc);font-size:1.15em;letter-spacing:.04em;text-transform:lowercase}
.entry p{text-indent:1.2em;hyphens:auto}
.entry p:first-of-type{text-indent:0}
.entry .see{font-style:italic;font-size:1rem;color:var(--muted)}
.entry .see a{font-style:normal;font-family:var(--sc);letter-spacing:.05em}
.empty{color:var(--muted);font-style:italic}

/* ---------- emblems ---------- */
.emblem{width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;background:var(--oxblood) url(../img/leather.jpg) center/220px;box-shadow:inset 0 0 0 2px var(--gilt),inset 0 0 0 4px var(--oxblood-deep),inset 0 0 0 5px rgba(214,180,110,.6);flex:none}
.emblem svg{width:22px;height:22px;stroke:var(--gilt);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.emblem.lg{width:64px;height:64px}
.emblem.lg svg{width:34px;height:34px}
.legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.2rem;margin-bottom:2.5rem}
.legend div{display:grid;justify-items:center;text-align:center;gap:.5rem}
.legend strong{font-family:var(--sc);font-weight:500;letter-spacing:.08em;font-size:1.1rem;color:var(--oxblood)}
.legend span{font-size:.95rem;color:var(--muted);line-height:1.35}
@media (max-width:820px){.legend{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- hotels ---------- */
.hotels{display:grid;gap:3rem}
.hotel{display:grid;grid-template-columns:320px minmax(0,1fr);gap:2rem;align-items:start;padding-top:2.5rem;border-top:1px solid var(--rule);scroll-margin-top:7rem}
.hotel:first-child{border-top:0;padding-top:0}
@media (max-width:820px){.hotel{grid-template-columns:1fr}}
.plate{position:relative;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.plate .mono{font-family:var(--display);font-style:italic;font-size:4.5rem;color:var(--gilt);line-height:1}
.plate .no{position:absolute;top:18px;left:22px;font-family:var(--sc);letter-spacing:.1em;color:var(--gilt);font-size:1rem}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hotel-body{display:grid;gap:.8rem;min-width:0}
.hotel-body .loc{font-family:var(--sc);letter-spacing:.12em;color:var(--muted);font-size:1rem}
.hotel-body h3{font-size:var(--step-3);color:var(--ink)}
.hotel-body h3 .num{color:var(--oxblood);font-size:.6em;vertical-align:.35em;margin-right:.35rem;font-family:var(--sc)}
.badges{display:flex;flex-wrap:wrap;gap:.4rem}
.from-guide{font-family:var(--sc);font-size:.9rem;letter-spacing:.12em;color:var(--oxblood)}
.links{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-family:var(--sc);letter-spacing:.08em}
.feature-dog{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:2.5rem;align-items:center;padding:2.5rem}
@media (max-width:820px){.feature-dog{grid-template-columns:1fr;padding:2rem 1.4rem}}
.dog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
@media (max-width:820px){.dog-grid{grid-template-columns:1fr}}
.dog-card{border:1px solid var(--rule);padding:1.2rem;display:grid;gap:.4rem;align-content:start}
.dog-card h4{font-family:var(--display);font-size:var(--step-1);margin:0;font-weight:500}
.dog-card .loc{font-family:var(--sc);letter-spacing:.1em;color:var(--muted);font-size:.95rem}
.dog-card p{font-size:1rem}
.intl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 3rem}
@media (max-width:820px){.intl{grid-template-columns:1fr}}
.intl h3{font-family:var(--sc);color:var(--oxblood);font-size:var(--step-1);letter-spacing:.1em;margin-bottom:.6rem}
.intl dl{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.35rem 1rem;margin:0}
.intl dt{font-family:var(--sc);letter-spacing:.06em;color:var(--muted)}
.intl dd{margin:0}

/* ---------- matchbox ---------- */
.matchboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem}
@media (max-width:820px){.matchboxes{grid-template-columns:1fr}}
.matchbox{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.5rem;align-items:start}
.box{position:relative;aspect-ratio:5/7;border-radius:3px;box-shadow:0 10px 18px -10px rgba(0,0,0,.5);display:grid;place-items:center;text-align:center;padding:1rem .7rem;overflow:hidden}
.box::after{content:"";position:absolute;top:0;bottom:0;right:0;width:12px;background:repeating-linear-gradient(45deg,#3a2a24 0 2px,#7a5b4a 2px 4px);opacity:.9}
.box .bn{font-family:var(--display);font-style:italic;font-size:1.5rem;line-height:1.1;color:var(--gilt);padding-right:10px}
.box .by{position:absolute;bottom:14px;left:0;right:12px;font-family:var(--sc);font-size:.8rem;letter-spacing:.1em;color:var(--gilt-soft)}
.matchbox h3{font-size:var(--step-2);color:var(--oxblood)}
.matchbox .where{font-family:var(--sc);letter-spacing:.1em;color:var(--muted);font-size:1rem;margin-bottom:.4rem}
.matchbox .prose{gap:.7rem}
@media (max-width:480px){.matchbox{grid-template-columns:110px minmax(0,1fr);gap:1rem}.box .bn{font-size:1.15rem}}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:340px minmax(0,1fr);gap:3rem;align-items:start}
@media (max-width:820px){.about{grid-template-columns:1fr}}
.clients{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.clients li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:1rem;padding-block:.45rem;border-bottom:1px solid var(--rule)}
.clients strong{font-family:var(--sc);font-weight:500;letter-spacing:.06em;color:var(--oxblood)}
@media (max-width:520px){.clients li{grid-template-columns:1fr;gap:0}}
.contact-row{display:flex;flex-wrap:wrap;gap:1rem}

/* ---------- instagram ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.ig-grid a{display:block;aspect-ratio:1;overflow:hidden;background:var(--rule)}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.ig-grid a:hover img{opacity:.85}
@media (max-width:820px){.ig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ig-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,326px),1fr));gap:1.5rem;justify-items:center}
.ig-card{border:1px solid var(--rule);padding:1.2rem;display:grid;gap:.6rem;align-content:start;width:100%}
.ig-card img{width:100%;aspect-ratio:1;object-fit:cover}
.ig-card .date{font-family:var(--sc);letter-spacing:.1em;color:var(--muted);font-size:.9rem}

/* ---------- footer ---------- */
.footer{padding-block:3rem 2rem}
.footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}
.footer img{height:56px;width:auto;margin-bottom:.8rem}
.footer h4{font-family:var(--sc);font-weight:500;letter-spacing:.14em;color:var(--gilt);margin:0 0 .6rem;font-size:1.05rem;text-transform:lowercase}
.footer p,.footer li{color:var(--gilt-soft);font-size:1rem}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.3rem}
.footer .small{grid-column:1/-1;border-top:1px solid rgba(214,180,110,.35);padding-top:1rem;font-size:.9rem;color:var(--gilt-soft);opacity:.85}
@media (max-width:820px){.footer .wrap{grid-template-columns:1fr}}
.page-title{padding-block:3rem 2rem;text-align:center}
.page-title h1{font-size:clamp(2.4rem,6vw,4rem);color:var(--gilt)}
.page-title p{max-width:40rem;margin:.8rem auto 0;font-style:italic;font-size:var(--step-1);color:var(--gilt-soft);line-height:1.4}

/* ---------- instagram additions ---------- */
.entry .venue-img img{object-position:center 30%}
.box .label{position:absolute;top:14%;left:12%;right:calc(12% + 12px);aspect-ratio:1;border:2px solid var(--gilt);box-shadow:0 0 0 3px var(--oxblood-deep);overflow:hidden;background:var(--oxblood-deep)}
.box .label img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) saturate(.9)}
.box:has(.label) .bn{position:absolute;bottom:12%;left:6px;right:18px;font-size:1.15rem}
.matchboxes.mine-list{grid-template-columns:1fr;gap:3.5rem}
.matchbox.mine{grid-template-columns:200px minmax(0,1fr);gap:2.5rem;scroll-margin-top:7rem}
.matchbox.mine .prose{max-width:var(--measure)}
@media (max-width:600px){.matchbox.mine{grid-template-columns:1fr}.matchbox.mine .box{max-width:200px}}
.ig-posts{align-items:start}
.ig-card{scroll-margin-top:7rem;background:#fff}
.ig-card h3{font-size:var(--step-1);color:var(--oxblood)}
.ig-card p{font-size:1.02rem;line-height:1.55}
.ig-card details{display:grid;gap:.6rem}
.ig-card details[open]{padding-top:.2rem}
.ig-card details p{margin-top:.6rem}
.ig-card summary{cursor:pointer;font-family:var(--sc);letter-spacing:.1em;color:var(--oxblood);list-style:none}
.ig-card summary::-webkit-details-marker{display:none}
.ig-card summary::after{content:" ›"}
.ig-card details[open] summary::after{content:" ‹"}
.ig-card:target{outline:2px solid var(--gilt);outline-offset:4px}

/* fixes */
[hidden]{display:none!important}
.hero-plate:not(.leather) .title{color:#a8853f}