/* Osprey Tavern — site stylesheet */
:root{
  --harbor:#15303a;      /* deep lake blue-green: dark sections */
  --harbor-2:#1d3f4b;
  --tile:#2d5a6b;        /* barstool blue */
  --plume:#bbb495;       /* khaki from the osprey logo */
  --plume-deep:#6c6440;  /* plume dark enough for text on light */
  --oyster:#ecebe5;      /* shell grey page ground */
  --shell:#f7f7f3;
  --ink:#1b2226;
  --muted:#56625f;
  --line:#cfccc0;
  --serif:"Libre Caslon Display","Libre Caslon Text",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --tile-size:12px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--oyster);color:var(--ink);font:400 1.0625rem/1.65 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--tile);text-underline-offset:.18em}
a:hover{color:var(--harbor)}
:focus-visible{outline:2px solid var(--plume);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0 0 .5em;letter-spacing:-.005em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:0;background:var(--plume);color:var(--ink);padding:.6rem 1rem;z-index:99}
.skip:focus{left:1rem}

/* the bar-floor tile: signature motif */
.tiles{height:calc(var(--tile-size)*2);background:conic-gradient(var(--ink) 90deg,var(--shell) 0 180deg,var(--ink) 0 270deg,var(--shell) 0) 0 0/calc(var(--tile-size)*2) calc(var(--tile-size)*2)}
.tiles--plume{background:conic-gradient(var(--harbor) 90deg,var(--plume) 0 180deg,var(--harbor) 0 270deg,var(--plume) 0) 0 0/calc(var(--tile-size)*2) calc(var(--tile-size)*2)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--harbor);color:var(--shell);border-bottom:1px solid rgba(187,180,149,.25)}
.site-header .wrap{display:flex;align-items:center;gap:1.5rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--shell);text-decoration:none;margin-right:auto}
.brand img{width:58px;height:auto}
.brand span{font-family:var(--serif);font-size:1.4rem;line-height:1;white-space:nowrap}
@media (max-width:420px){.brand span{font-size:1.15rem}}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{color:var(--shell);text-decoration:none;font-size:.95rem;font-weight:500;padding:.3rem 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--plume);border-bottom-color:var(--plume)}
.nav .tel{color:var(--plume);font-variant-numeric:tabular-nums}
.btn{display:inline-block;font:600 .95rem/1 var(--sans);padding:.95rem 1.4rem;border-radius:2px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn--plume{background:var(--plume);color:var(--ink)}
.btn--plume:hover{background:#cfc9ad;color:var(--ink)}
.btn--ghost{border-color:rgba(247,247,243,.6);color:var(--shell)}
.btn--ghost:hover{border-color:var(--plume);color:var(--plume)}
.btn--ink{background:var(--harbor);color:var(--shell)}
.btn--ink:hover{background:var(--tile);color:var(--shell)}
.site-header .btn{padding:.75rem 1.1rem}
.menu-toggle{display:none;background:none;border:1px solid rgba(247,247,243,.4);color:var(--shell);padding:.55rem .75rem;font:500 .9rem var(--sans);border-radius:2px;cursor:pointer}
@media (max-width:900px){
  .menu-toggle{display:block}
  .site-header .btn{display:none}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--harbor);flex-direction:column;align-items:flex-start;gap:0;padding:.5rem var(--pad) 1.5rem;border-bottom:1px solid rgba(187,180,149,.25);display:none}
  .nav.open{display:flex}
  .nav a{padding:.85rem 0;width:100%;font-size:1.1rem;border-bottom:1px solid rgba(247,247,243,.1)}
  .nav .btn-mobile{margin-top:1rem;width:auto;border:0;padding:.95rem 1.4rem}
}
@media (min-width:901px){.nav .btn-mobile{display:none}}

/* ---------- home hero ---------- */
.hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;color:var(--shell);overflow:hidden;background:var(--harbor)}
.hero__slides,.hero__slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__slides img{opacity:0;transition:opacity 1.6s ease}
.hero__slides img.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,48,58,.15) 0%,rgba(21,48,58,.25) 45%,rgba(14,32,39,.88) 100%)}
.hero__body{position:relative;z-index:2;width:100%;padding-bottom:clamp(2.5rem,7vh,5rem)}
.hero__mark{width:clamp(170px,22vw,270px);margin-bottom:1.5rem;filter:drop-shadow(0 2px 12px rgba(0,0,0,.35))}
.hero__line{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.15;max-width:22ch;margin:0 0 1.75rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- visit strip ---------- */
.visit{background:var(--harbor);color:var(--shell);padding:2.6rem 0}
.visit .wrap{display:grid;grid-template-columns:1.1fr 2fr;gap:2.5rem;align-items:start}
.visit h2{font-size:1.1rem;font-family:var(--sans);font-weight:600;color:var(--plume);margin:0 0 .6rem;letter-spacing:.01em}
.visit a{color:var(--shell)}
.visit address{font-style:normal;font-size:1.15rem;line-height:1.5}
.hours{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.hours dl{margin:0}
.hours dt{font-family:var(--serif);font-size:1.3rem;margin-bottom:.35rem;color:var(--shell)}
.hours dd{margin:0;display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dotted rgba(187,180,149,.35);padding:.25rem 0;font-variant-numeric:tabular-nums;color:#dfe3df}
.hours dd b{font-weight:500;color:var(--shell)}
@media (max-width:820px){.visit .wrap{grid-template-columns:1fr}.hours{grid-template-columns:1fr}}

/* ---------- sections ---------- */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section--shell{background:var(--shell)}
.section--dark{background:var(--harbor);color:var(--shell)}
.section--dark a{color:var(--plume)}
.kicker{font:600 .95rem/1.2 var(--sans);color:var(--plume-deep);margin:0 0 .9rem}
.section--dark .kicker{color:var(--plume)}
.display{font-size:clamp(2.4rem,5.4vw,4.4rem)}
.lede{font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.6;max-width:60ch}

.intro{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem);align-items:end}
.intro .display{margin:0}
@media (max-width:820px){.intro{grid-template-columns:1fr}}

.wide-photo{height:clamp(260px,52vw,620px);object-fit:cover;width:100%}

/* experience rows */
.rooms{display:grid;gap:clamp(3rem,7vw,6rem)}
.room{display:grid;grid-template-columns:7fr 5fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.room:nth-child(even){grid-template-columns:5fr 7fr}
.room:nth-child(even) .room__img{order:2}
.room__img{position:relative}
.room__img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.room--tall .room__img img{aspect-ratio:4/5;max-height:640px}
.room h3{font-size:clamp(2rem,3.6vw,3rem)}
.room p{max-width:56ch}
.room__img::after{content:"";position:absolute;left:-10px;bottom:-10px;width:88px;height:24px;background:conic-gradient(var(--ink) 90deg,var(--shell) 0 180deg,var(--ink) 0 270deg,var(--shell) 0) 0 0/24px 24px}
.room:nth-child(even) .room__img::after{left:auto;right:-10px}
@media (max-width:820px){.room,.room:nth-child(even){grid-template-columns:1fr}.room:nth-child(even) .room__img{order:0}}

/* event cards */
.head-row{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:2.2rem}
.head-row h2{margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2rem)}
.card{display:flex;flex-direction:column;background:var(--shell);text-decoration:none;color:var(--ink);border-top:3px solid var(--harbor)}
.section--shell .card{background:#fff}
.card__img{aspect-ratio:4/3;overflow:hidden;background:var(--harbor)}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__img.poster img{object-fit:contain}
.card__body{padding:1.2rem 1.25rem 1.5rem}
.card time{font-size:.88rem;color:var(--muted)}
.card h3{font-size:1.45rem;margin:.35rem 0 .55rem}
.card p{font-size:.97rem;color:#3c4745;margin:0}
.card:hover h3{color:var(--tile);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

/* subscribe */
.subscribe .wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:2rem;align-items:center}
.subscribe h2{font-size:clamp(2rem,3.8vw,3rem);margin:0}
.subscribe form{display:grid;grid-template-columns:1fr 1.3fr auto;gap:.6rem}
.subscribe input{font:inherit;padding:.9rem 1rem;border:1px solid rgba(187,180,149,.5);background:rgba(255,255,255,.06);color:var(--shell);border-radius:2px;min-width:0}
.subscribe input::placeholder{color:#b9c3c2}
.subscribe .note{grid-column:1/-1;font-size:.9rem;color:#c9d1cf;margin:.2rem 0 0;min-height:1.4em}
@media (max-width:820px){.subscribe .wrap,.subscribe form{grid-template-columns:1fr}}

/* ---------- inner page banner ---------- */
.banner{position:relative;color:var(--shell);background:var(--harbor);min-height:clamp(260px,42vw,460px);display:flex;align-items:flex-end;overflow:hidden}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,48,58,.1),rgba(14,32,39,.82))}
.banner .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(1.75rem,4vw,3rem)}
.banner h1{font-size:clamp(2.8rem,7vw,5.6rem);margin:0}
.banner p{margin:.6rem 0 0;font-size:1.1rem;color:#e4e8e5;max-width:60ch}
.banner--plain{min-height:0;padding-top:clamp(3rem,7vw,5rem)}
.banner--plain::after{display:none}

/* ---------- about ---------- */
.prose{max-width:68ch}
.prose p{font-size:1.1rem;line-height:1.75}
.about-top{display:grid;grid-template-columns:4fr 7fr;gap:clamp(2rem,5vw,5rem)}
.about-top h2{font-size:clamp(2rem,4vw,3.2rem)}
@media (max-width:820px){.about-top{grid-template-columns:1fr}}
.team{display:grid;gap:clamp(3rem,6vw,5rem)}
.person{display:grid;grid-template-columns:minmax(220px,4fr) 8fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.person h3{font-size:clamp(2rem,3.4vw,2.8rem);margin:0 0 .2rem}
.person .role{color:var(--plume-deep);font-weight:600;margin:0 0 1.2rem}
.person p{max-width:64ch}
@media (max-width:700px){.person{grid-template-columns:1fr}.person img{max-width:360px}}

/* ---------- menu ---------- */
.menu-tabs{position:sticky;top:72px;z-index:30;background:var(--oyster);border-bottom:1px solid var(--line)}
.menu-tabs .wrap{display:flex;gap:.25rem;overflow-x:auto}
.menu-tabs a{flex:0 0 auto;padding:1.05rem 1.1rem .95rem;text-decoration:none;color:var(--ink);font-family:var(--serif);font-size:1.3rem;border-bottom:3px solid transparent}
.menu-tabs a:hover{color:var(--tile)}
.menu-tabs a[aria-selected="true"]{border-bottom-color:var(--harbor);color:var(--harbor)}
.menu-panel{padding:0 0 clamp(3rem,7vw,5rem)}
.js .menu-panel[hidden]{display:none}
.menu-panel__photo{height:clamp(170px,24vw,300px);width:100%;object-fit:cover}
.menu-panel__head{padding:clamp(2.5rem,5vw,3.5rem) 0 1rem}
.menu-panel__head h2{font-size:clamp(2.6rem,6vw,4.6rem);margin:0}
.menu-cats{display:grid;gap:clamp(2.5rem,5vw,3.5rem)}
.menu-cat h3{font-size:clamp(1.7rem,2.8vw,2.2rem);margin:0 0 1rem;padding-bottom:.6rem;border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:1rem}
.menu-cat h3::after{content:"";flex:1;height:10px;background:conic-gradient(var(--ink) 90deg,transparent 0 180deg,var(--ink) 0 270deg,transparent 0) 0 0/10px 10px;opacity:.85;max-width:120px;margin-left:auto}
.items{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,4.5rem);row-gap:1.35rem;margin:0;padding:0;list-style:none}
.item__top{display:flex;align-items:baseline;gap:.6rem}
.item__name{font-weight:600;font-variant-caps:all-small-caps;letter-spacing:.045em;font-size:1.28rem;line-height:1.3;margin:0}
.item__top::after{content:"";order:1;flex:1;border-bottom:1px dotted #9aa19c;transform:translateY(-.3em);min-width:1rem}
.item__price{order:2;font-variant-numeric:tabular-nums;font-weight:500;color:var(--harbor);text-align:right;max-width:55%}
.item__desc{margin:.2rem 0 0;color:#4a5552;font-size:.98rem;line-height:1.5}
@media (max-width:760px){.items{grid-template-columns:1fr}}

/* ---------- events / posts ---------- */
.event-note{display:flex;gap:1rem 2rem;justify-content:space-between;align-items:center;flex-wrap:wrap;background:var(--harbor);color:var(--shell);padding:1.4rem 1.6rem;margin-bottom:2.5rem}
.event-note p{margin:0;max-width:70ch}
.event-note a{color:var(--plume)}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;border-top:1px solid var(--line);padding-top:1.5rem}
.pager span{color:var(--muted)}
.post{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.post__body{font-size:1.1rem;line-height:1.7;max-width:64ch}
.post__body p{margin:0 0 .75em}
.post__body ul{margin:0 0 1em;padding-left:1.2em}
.post__meta{color:var(--muted);margin:0 0 1.5rem;font-size:.98rem}
.post__aside img{width:100%;border:1px solid var(--line);background:#fff}
.post__aside figcaption{font-size:.88rem;color:var(--muted);margin-top:.5rem}
.post__cta{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.back{display:inline-block;margin-bottom:1.5rem;font-weight:500}
@media (max-width:820px){.post{grid-template-columns:1fr}}

/* reservations */
.reserve{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,4.5rem)}
.reserve h2{font-size:clamp(2rem,4vw,3rem)}
.reserve .panel{background:var(--harbor);color:var(--shell);padding:1.75rem}
.reserve .panel h3{font-size:1.7rem;color:var(--plume)}
.reserve .panel dl{margin:0 0 1.3rem}
.reserve .panel dt{font-weight:600;margin-top:.8rem;color:var(--plume)}
.reserve .panel dd{margin:0;display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dotted rgba(187,180,149,.35);padding:.2rem 0}
@media (max-width:820px){.reserve{grid-template-columns:1fr}}

.map{width:100%;height:380px;border:0;display:block;filter:grayscale(.3)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#cfd6d3;font-size:.97rem}
.site-footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem;padding-top:3.5rem;padding-bottom:3rem}
.site-footer img.logo{width:130px;margin-bottom:1rem}
.site-footer h2{font:600 1rem/1.2 var(--sans);color:var(--plume);margin:0 0 .8rem}
.site-footer a{color:#e8ecea;text-decoration:none}
.site-footer a:hover{color:var(--plume);text-decoration:underline}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.site-footer address{font-style:normal;line-height:1.6}
.site-footer .fine{border-top:1px solid rgba(255,255,255,.1);padding:1.2rem 0;font-size:.88rem;color:#98a4a1}
.site-footer .fine .wrap{display:block;padding:0 var(--pad)}
.social{display:flex;gap:.6rem;margin-top:1rem}
.social a{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(187,180,149,.45);border-radius:50%}
.social svg{width:18px;height:18px;fill:currentColor}
@media (max-width:900px){.site-footer .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.site-footer .wrap{grid-template-columns:1fr}}

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