/* The Black Lion — traditional Yorkshire pub-hotel. Warm cream, bottle green, brass. */
:root{
  --green:#173a2b; --green-deep:#102a1f; --cream:#f6f1e6; --cream-2:#efe7d4;
  --brass:#b8862f; --brass-soft:#d9b45c; --ink:#2b241a; --muted:#6f6350;
  --line:#e2d8c2; --card:#fffdf7; --radius:14px;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 14px;color:var(--green-deep)}
h1{font-size:clamp(40px,5.4vw,64px)}
h2{font-size:clamp(30px,3.6vw,44px)}
h2 em,h1 em{font-style:italic;color:var(--brass)}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:10px}
.lede{font-size:18px;color:var(--muted);max-width:640px}
section{padding:72px 0}
figure{margin:0}
figure img{border-radius:var(--radius)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(23,58,43,.96);backdrop-filter:blur(10px);border-bottom:2px solid var(--brass)}
.head-in{display:flex;align-items:center;gap:20px;padding:12px 24px}
.brand{font-family:var(--serif);font-size:26px;font-weight:700;color:#f3ead6;text-decoration:none;line-height:1.1}
.brand small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-soft);font-weight:500}
nav.main{margin-left:auto;display:flex;gap:26px}
nav.main a{color:#e9dfc8;text-decoration:none;font-size:15px;letter-spacing:.04em}
nav.main a:hover{color:var(--brass-soft)}
.lang-pill{display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(217,180,92,.5);border-radius:999px;padding:3px}
.lang-pill button{border:0;background:transparent;color:#e9dfc8;font-family:var(--sans);font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer}
.lang-pill button.active{background:var(--brass);color:#1d1a12;font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-family:var(--sans);font-weight:600;letter-spacing:.06em;border-radius:999px;transition:transform .15s ease,background .15s ease;cursor:pointer}
.btn-primary{background:var(--brass);color:#1d1a12;padding:15px 38px;font-size:16px;border:2px solid var(--brass)}
.btn-primary:hover{background:var(--brass-soft);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--green-deep);border:2px solid var(--green);padding:13px 34px;font-size:16px}
.btn-ghost:hover{background:var(--green);color:#f3ead6}
.btn-sm{padding:9px 22px;font-size:14px}
.hero .btn-ghost{color:#f3ead6;border-color:var(--brass-soft)}
.hero .btn-ghost:hover{background:var(--brass-soft);color:#1d1a12}

/* ---------- hero (solid block + separate photo) ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;background:var(--green);color:#efe8d4}
.hero-grid{display:flex;align-items:center}
.hero-in{padding:72px 24px;max-width:600px;margin-left:auto}
.badge{display:inline-block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-soft);border:1px solid rgba(217,180,92,.55);border-radius:999px;padding:7px 16px;margin-bottom:20px}
.hero h1{color:#f5efdd}
.hero .lede{color:#cfc4a8}
.hero-ctas{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.hero-photo{min-height:420px}
.hero-photo img{width:100%;height:100%;object-fit:cover;border-radius:0}

/* ---------- glance ---------- */
.glance{background:var(--cream)}
.glance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.g-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.g-item .ico{font-size:28px;margin-bottom:10px}
.g-item b{display:block;font-family:var(--serif);font-size:21px;color:var(--green-deep);margin-bottom:4px}
.g-item span{color:var(--muted);font-size:15px}

/* ---------- rooms ---------- */
#rooms{background:var(--cream-2)}
.room-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:34px}
.room-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.room-card .ph{aspect-ratio:4/3;overflow:hidden}
.room-card .ph img{width:100%;height:100%;object-fit:cover}
.room-body{padding:26px 28px}
.room-body h3{font-size:26px;margin-bottom:8px}
.room-body p{color:var(--muted);margin:0 0 16px}
.room-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-bottom:18px}
.detail-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.detail-strip img{aspect-ratio:4/3;object-fit:cover;width:100%}
.rooms-note{margin-top:28px;background:var(--card);border-left:4px solid var(--brass);border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;color:var(--muted);font-size:16px}

/* ---------- pub ---------- */
.pub{background:var(--green);color:#e9dfc8}
.pub h2{color:#f5efdd}
.pub .lede{color:#cfc4a8}
.pub-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.pub-grid figure img{border:3px solid rgba(217,180,92,.4)}
.tick-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.tick-list li{background:rgba(255,255,255,.05);border:1px solid rgba(217,180,92,.3);border-radius:var(--radius);padding:18px 22px}
.tick-list b{display:block;font-family:var(--serif);font-size:20px;color:var(--brass-soft);margin-bottom:2px}
.tick-list span{font-size:15px;color:#cfc4a8}
.pub-breakfast{margin-top:26px}
.pub-breakfast img{border:3px solid rgba(217,180,92,.4)}

/* ---------- visit ---------- */
.visit{background:var(--cream)}
.v-addr{font-family:var(--serif);font-size:24px;color:var(--green-deep);margin:6px 0 30px}
.visit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.v-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px}
.v-item .ico{font-size:26px;margin-bottom:8px}
.v-item b{display:block;font-family:var(--serif);font-size:19px;color:var(--green-deep);margin-bottom:2px;word-break:break-word}
.v-item span{color:var(--muted);font-size:14px;word-break:break-word}
.v-item span,.foot-mail{overflow-wrap:anywhere}

/* ---------- practical ---------- */
.practical{background:var(--cream-2)}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.i-item{background:var(--green);border-radius:var(--radius);padding:26px 24px;color:#e9dfc8}
.i-item b{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:8px}
.i-item span{font-family:var(--serif);font-size:24px;color:#f5efdd}

/* ---------- reviews ---------- */
.reviews{background:var(--cream);text-align:center;padding:56px 0}
.rev-note{font-size:17px;color:var(--muted)}

/* ---------- booking band ---------- */
.booking{background:var(--green-deep);color:#e9dfc8;text-align:center}
.booking h2{color:#f5efdd}
.booking p{color:#cfc4a8;max-width:560px;margin:0 auto 26px}

/* ---------- footer ---------- */
footer{background:#0d2118;color:#b9ac8d;padding:48px 0}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
footer .brand{color:#f3ead6}
footer p{margin:8px 0;font-size:15px}
footer a{color:var(--brass-soft);text-decoration:none}
footer a:hover{text-decoration:underline}
.preview-note{font-size:13px;color:#8a7d63;margin-top:14px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.on{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .glance-grid{grid-template-columns:repeat(2,1fr)}
  .room-grid{grid-template-columns:1fr}
  .pub-grid{grid-template-columns:1fr}
  .visit-grid{grid-template-columns:repeat(2,1fr)}
  .info-grid{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr}
  .hero-in{margin:0;max-width:none;padding:56px 24px}
  .hero-photo{min-height:280px}
}
/* mobile header: keep language pill visible (sticky header occupies layout space) */
@media(max-width:800px){
  .head-in{flex-wrap:wrap;row-gap:10px}
  .head-in nav.main{order:3;flex-basis:100%;margin-left:0;gap:16px;flex-wrap:wrap}
  .head-in .lang-pill{margin-left:auto}
  .head-book{margin-left:0}
  section{padding:52px 0}
}
@media(max-width:560px){
  .glance-grid,.visit-grid,.info-grid{grid-template-columns:1fr}
  .detail-strip{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%;text-align:center}
}