/* Fonts are hosted on this site (no Google Fonts request): faster, and no visitor data sent to Google.
   Licence: SIL Open Font License. Files in /fonts. */
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/libre-caslon-text-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/libre-caslon-text-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/libre-caslon-text-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/mulish-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/mulish-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/mulish-latin-700-normal.woff2) format("woff2")}

/* Hillside Bed & Breakfast - shared styles for every page */
  :root{
    --gold:#AA9A7A;      /* Hillside logo gold */
    --bronze:#6B5C41;    /* darker gold for text & links (AA contrast on white) */
    --ink:#2E2A24;
    --body:#55504A;
    --stone:#EFEBE3;
    --white:#FFFFFF;
    --serif:"Libre Caslon Text", Georgia, serif;
    --sans:"Mulish", system-ui, sans-serif;
    --wrap:1180px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;background:var(--white);color:var(--body);font:400 1.0625rem/1.7 var(--sans);-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:var(--bronze)}
  a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
  h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:400;line-height:1.2;margin:0 0 .6em}
  h1{font-size:clamp(2.2rem,5vw,3.6rem)}
  h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
  h3{font-size:1.45rem}
  p{margin:0 0 1.1em;max-width:66ch}
  .wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}

  /* ---------- Top bar & header ---------- */
  .topbar{background:var(--gold);color:var(--ink);font-size:.9rem}
  .topbar .wrap{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem;justify-content:center;padding:.5rem 0}
  .topbar a{color:var(--ink);text-decoration:none}
  .topbar a:hover{text-decoration:underline}
  header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--stone)}
  header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
  .logo img{width:200px;height:auto}
  nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.6rem;align-items:center}
  nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
  nav a:hover,nav a[aria-current]{color:var(--bronze);text-decoration:underline;text-underline-offset:6px}
  .btn{display:inline-block;background:var(--bronze);color:#fff !important;text-decoration:none !important;font-weight:700;font-size:.95rem;padding:.8em 1.4em;border-radius:2px;border:0;cursor:pointer}
  .btn:hover{background:var(--ink)}
  .menu-toggle{display:none;background:none;border:1px solid var(--gold);color:var(--ink);font:600 .95rem var(--sans);padding:.5em .9em;border-radius:2px}
  @media (max-width:900px){
    .menu-toggle{display:block}
    nav ul{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--stone)}
    nav ul.open{display:flex}
    nav li a{display:block;padding:.9rem 16px;border-top:1px solid var(--stone)}
    nav li .btn{margin:.9rem 16px;text-align:center}
    .logo img{width:160px}
  }

  /* ---------- Hero: the cottage, with booking set into it ---------- */
  .hero{position:relative;min-height:min(78vh,720px);display:grid;align-items:end;color:#fff;
        background:#3b352c url("../images/hillside-exterior.jpg") center/cover no-repeat}
  @media (max-width:800px){.hero{background-image:url("../images/hillside-exterior-mobile.jpg")}}
  .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,26,20,0) 25%,rgba(30,26,20,.55) 60%,rgba(30,26,20,.85))}
  .hero h1,.hero p{text-shadow:0 1px 12px rgba(0,0,0,.35)}
  .hero .wrap{position:relative;padding:0 0 7.5rem}
  .hero h1{color:#fff;max-width:14ch}
  .hero p{font-size:1.15rem;max-width:46ch;color:#F3EFE7}

  .booking{position:relative;z-index:2;margin-top:-4.5rem}
  .booking .panel{background:#fff;border-top:4px solid var(--gold);box-shadow:0 18px 40px rgba(46,42,36,.14);padding:1.75rem clamp(1.25rem,3vw,2.5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:2rem;align-items:center}
  .booking h2{font-size:1.6rem;margin-bottom:.3em}
  .booking p{margin:0;font-size:.98rem}
  .saving{font-family:var(--serif);font-style:italic;color:var(--bronze);font-size:1.1rem}
  /* Only split into text + widget columns when there's room for two dates and the button side by side */
  @media (max-width:1039px){.booking .panel{grid-template-columns:1fr;gap:1.5rem}}

  /* ---------- Welcome ---------- */
  section{padding:clamp(3.5rem,8vw,6.5rem) 0}
  .welcome .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:start}
  .welcome .lede{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.55rem);line-height:1.55;color:var(--ink)}
  .welcome figure{margin:0}
  .welcome figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
  .welcome figcaption{font-size:.9rem;color:var(--body);margin-top:.6rem;font-style:italic;font-family:var(--serif)}
  @media (max-width:800px){.welcome .wrap{grid-template-columns:1fr}.welcome figure img{aspect-ratio:3/2}}

  /* ---------- Rooms: three tall photos side by side ---------- */
  .rooms{padding-top:0}
  .rooms .intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 3rem;margin-bottom:2.25rem}
  .rooms .intro p{margin:0;max-width:52ch}
  .room-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
  .room a{display:block;color:inherit;text-decoration:none}
  .room .photo{overflow:hidden;margin-bottom:1.1rem}
  .room img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s ease}
  .room a:hover img{transform:scale(1.04)}
  .room h3{margin-bottom:.15em}
  .room .price{font-family:var(--serif);font-style:italic;color:var(--bronze);margin:0 0 .6em}
  .room p{font-size:.98rem;margin-bottom:.8em}
  .room .more{font-weight:700;color:var(--bronze);text-decoration:underline;text-underline-offset:5px}
  .textlink{font-weight:700;text-underline-offset:5px}
  @media (prefers-reduced-motion:reduce){.room img{transition:none}}
  /* On phones the rooms stack, with landscape photos so the section stays compact */
  @media (max-width:800px){
    .room-list{grid-template-columns:1fr;gap:2.5rem}
    .room img{aspect-ratio:3/2}
  }

  /* ---------- Breakfast & area ---------- */
  .duo .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
  .duo article img{width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:1.4rem}
  @media (max-width:800px){.duo .wrap{grid-template-columns:1fr}}

  /* ---------- Reviews ---------- */
  .reviews{background:var(--stone)}
  .reviews .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .quotes{list-style:none;margin:1.5rem 0 2rem;padding:0}
  .quotes li{padding:1.1rem 0;border-top:1px solid #DCD5C8}
  .quotes li:last-child{border-bottom:1px solid #DCD5C8}
  .quotes blockquote{margin:0;font-family:var(--serif);font-size:1.3rem;line-height:1.45;color:var(--ink)}
  /* Ratings strip: each score shown in its platform's own style */
  .ratings{list-style:none;margin:0 0 clamp(2.5rem,5vw,3.5rem);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #DCD5C8;border-bottom:1px solid #DCD5C8}
  .ratings li+li{border-left:1px solid #DCD5C8}
  .ratings a{display:flex;align-items:center;gap:1rem;padding:1.4rem clamp(.75rem,2vw,1.5rem);color:var(--ink);text-decoration:none;height:100%}
  .ratings a:hover{background:rgba(255,255,255,.55)}
  .ratings .score{font-family:var(--serif);font-size:2rem;line-height:1}
  .ratings .meta{display:block;font-size:.9rem;color:var(--body);margin-top:.35rem}
  .ratings .meta span{text-decoration:underline;text-underline-offset:4px;color:var(--bronze);font-weight:700}
  .ratings svg{display:block;height:20px;width:auto;margin-bottom:.45rem}
  .bk-box{flex:none;width:52px;height:52px;display:grid;place-items:center;background:#003B95;color:#fff;font:700 1.25rem/1 var(--sans);border-radius:8px 8px 8px 0}
  .bk-name{font-weight:700;color:#003B95;font-size:1.05rem}
  @media (max-width:800px){.ratings{grid-template-columns:1fr}.ratings li+li{border-left:0;border-top:1px solid #DCD5C8}}
  .ftb-reviews{background:#fff;padding:clamp(1rem,2.5vw,1.75rem)}
  .award{margin-top:1.5rem;max-width:300px}
  @media (max-width:800px){.reviews .cols{grid-template-columns:1fr}}
  .quotes{margin-top:0}

  /* ---------- freetobook widgets restyled to match the site ----------
     The widgets inject their own markup and inline styles, so these rules use !important.
     Scoped to .booking and .ftb-reviews so nothing else is affected. */

  /* Booking calendar - directions set explicitly; freetobook switches its own layout by width */
  .booking .ftb-bookingWidget__inner{background:transparent !important;padding:0 !important;display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:flex-end !important;justify-content:flex-start !important;gap:12px;font-family:var(--sans) !important;width:auto !important;max-width:none !important;height:auto !important}
  .booking .ftb-bookingWidget__dateSearchContainer{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:12px;margin:0 !important;padding:0 !important;width:auto !important;height:auto !important;flex:1 1 0 !important;min-width:0 !important;float:none !important}
  .booking .ftb-bookingWidget__dateSearch{margin:0 !important;padding:0 !important;width:auto !important;height:auto !important;flex:1 1 0 !important;min-width:0 !important;float:none !important}
  .booking .ftb-bookingWidget__dateSearch__title{display:block !important;font:600 .85rem/1.3 var(--sans) !important;color:var(--body) !important;margin:0 0 .35rem !important;text-align:left !important}
  .booking .ftb-bookingWidget__dateSearchButton{display:block !important;width:100% !important;height:50px !important;margin:0 !important;font:400 1rem var(--sans) !important;color:var(--ink) !important;background-color:#fff !important;border:1px solid #CFC7B8 !important;border-radius:2px !important;padding:0 2.4rem 0 .9rem !important;background-position:right .8rem center !important;background-size:16px !important;box-shadow:none !important;cursor:pointer}
  .booking .ftb-bookingWidget__dateSearchButton:focus{outline:3px solid var(--gold) !important;outline-offset:1px;border-color:var(--gold) !important}
  .booking .ftb-bookingWidget__checkAvailabilityContainer{margin:0 !important;padding:0 !important;width:auto !important;height:auto !important;flex:0 0 auto !important;float:none !important}
  .booking .ftb-bookingWidget__checkAvailability{display:block !important;height:50px !important;width:auto !important;padding:0 1.6rem !important;margin:0 !important;background:var(--bronze) !important;color:#fff !important;border:0 !important;outline:0 !important;border-radius:2px !important;font:700 1rem var(--sans) !important;white-space:nowrap;cursor:pointer}
  .booking .ftb-bookingWidget__checkAvailability:hover{background:var(--ink) !important}
  .booking .ftb-bookingWidget__checkAvailability:focus-visible{outline:3px solid var(--gold) !important;outline-offset:3px}
  /* Phones and small tablets: check-in, check-out and the button each get a full-width row
     (below ~600px two dates side by side run under their calendar icons) */
  @media (max-width:639px){
    .booking .ftb-bookingWidget__inner,.booking .ftb-bookingWidget__dateSearchContainer{flex-direction:column !important;align-items:stretch !important;gap:14px}
    .booking .ftb-bookingWidget__dateSearchContainer,.booking .ftb-bookingWidget__dateSearch,.booking .ftb-bookingWidget__checkAvailabilityContainer{flex:0 0 auto !important}
    .booking .ftb-bookingWidget__checkAvailability{width:100% !important}
  }

  /* Reviews */
  .ftb-reviews .ftb-reviewWidget{background:transparent !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important;font-family:var(--sans) !important;color:var(--body)}
  .ftb-reviews .ftb-reviewWidget__header{padding:0 0 1.25rem !important;text-align:left !important}
  .ftb-reviews .ftb-reviewWidget__header__first{display:flex !important;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;text-align:left !important}
  .ftb-reviews .ftb-reviewWidget__header__first__score{margin:0 !important;font:400 1rem var(--sans) !important;color:var(--body) !important}
  .ftb-reviews .ftb-reviewWidget__header__first__score__total{font:400 2.6rem/1 var(--serif) !important;color:var(--ink) !important;margin-right:.15em}
  .ftb-reviews .ftb-reviewWidget-review-hearts-lg{margin:0 !important}
  .ftb-reviews .ftb-reviewWidget-heart-colour{background-color:var(--gold) !important}
  .ftb-reviews .ftb-reviewWidget__header__first__title{flex-basis:100%;font:600 .95rem var(--sans) !important;color:var(--body) !important;text-decoration:none !important;margin:0 !important}
  .ftb-reviews .ftb-reviewWidget__hr{border:0 !important;border-top:1px solid #E5DFD4 !important;margin:0 0 1.25rem !important;height:0 !important;background:none !important}
  .ftb-reviews .ftb-reviewWidget__body{padding:0 !important}
  .ftb-reviews .ftb-reviewWidget__body__first{display:flex !important;justify-content:space-between;align-items:flex-start;gap:1rem;padding:0 !important;margin:0 0 .75rem !important}
  .ftb-reviews .ftb-reviewWidget__body__first__guestInfo{font-size:.9rem !important;color:var(--body) !important}
  .ftb-reviews .ftb-reviewWidget__body__first__guestInfo strong{font:400 1.15rem var(--serif) !important;color:var(--ink) !important}
  .ftb-reviews .ftb-reviewWidget__body__second,.ftb-reviews .ftb-reviewWidget__body__second__guest-review{padding:0 !important;margin:0 !important;display:block !important}
  .ftb-reviews .ftb-reviewWidget__body__second__guest-review__quotes{display:none !important}
  .ftb-reviews .ftb-reviewWidget__body__second__guest-review__text{display:block !important;margin:0 !important;padding:0 !important;font:400 1.25rem/1.5 var(--serif) !important;color:var(--ink) !important}
  .ftb-reviews .ftb-reviewWidget__body__third{text-align:left !important;padding:1.5rem 0 0 !important;margin:0 !important}
  .ftb-reviews .ftb-reviewWidget__body__third__button{display:inline-block !important;margin:0 !important;padding:.8em 1.4em !important;border:1px solid var(--bronze) !important;border-radius:2px !important;background:transparent !important;color:var(--bronze) !important;font:700 .95rem var(--sans) !important;text-decoration:none !important;box-shadow:none !important}
  .ftb-reviews .ftb-reviewWidget__body__third__button:hover{background:var(--bronze) !important;color:#fff !important}
  /* freetobook's heart graphic is a white mask over a coloured bar; enlarge it slightly to hide hairline edges */
  .ftb-reviews [class*="ftb-reviewWidget-review-hearts"]{background-size:calc(100% + 2px) calc(100% + 2px) !important;background-position:center !important}
  .ftb-reviews .ftb-reviewWidget-review-hearts-lg,.ftb-reviews .ftb-reviewWidget-review-hearts-sm{background-color:#F1EDE5 !important}
  .ftb-reviews .ftb-reviewWidget__hr{width:100% !important}

  /* ---------- Find us ---------- */
  .find{padding-bottom:0}
  .find .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(2rem,5vw,4rem);align-items:center}
  .find address{font-style:normal;margin-bottom:1.25rem;font-size:1.1rem;color:var(--ink)}
  .find iframe{display:block;width:100%;height:440px;border:0}
  @media (max-width:800px){.find .wrap{grid-template-columns:1fr}.find iframe{height:320px}}

  /* ---------- Footer ---------- */
  footer{background:#fff;border-top:4px solid var(--gold);padding:3rem 0 2rem;font-size:.95rem}
  footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}
  footer h3{font-size:1.15rem}
  footer ul{list-style:none;margin:0;padding:0}
  footer li{margin-bottom:.35rem}
  .small{grid-column:1/-1;max-width:none;border-top:1px solid var(--stone);padding-top:1.25rem;margin-top:1rem;font-size:.85rem}
  footer a{display:inline-block;padding:.3rem 0}   /* comfortable tap height for phone, email and page links */
  @media (max-width:800px){
    footer .wrap{grid-template-columns:1fr;gap:1.75rem}
    footer h3{margin-bottom:.35em}
    footer .pages ul{display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem}
    .small{margin-top:0}
  }

  /* =====================================================================
     Our Rooms page
     ===================================================================== */
  .page-intro{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2rem)}
  .page-intro p{font-size:1.1rem}

  /* Jump links to each room */
  .room-jump{list-style:none;margin:clamp(1.5rem,4vw,2.5rem) 0 clamp(1rem,3vw,2rem);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #DCD5C8;border-bottom:1px solid #DCD5C8}
  .room-jump li+li{border-left:1px solid #DCD5C8}
  .room-jump a{display:block;padding:1.1rem clamp(.75rem,2vw,1.5rem);color:var(--ink);text-decoration:none;height:100%}
  .room-jump a:hover{background:var(--stone)}
  .room-jump strong{display:block;font:400 1.3rem/1.25 var(--serif)}
  .room-jump a>span{display:block;font-size:.92rem;color:var(--body);margin-top:.2rem}
  @media (max-width:700px){.room-jump{grid-template-columns:1fr}.room-jump li+li{border-left:0;border-top:1px solid #DCD5C8}}

  .room-detail{scroll-margin-top:90px}
  .room-detail:nth-of-type(even){background:var(--stone)}

  /* Photo mosaic: one large photo and four smaller; the rest open in the viewer */
  .mosaic{position:relative;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;height:clamp(340px,40vw,520px);margin-bottom:clamp(2rem,4vw,3rem)}
  .mosaic--3{grid-template-columns:2fr 1fr}
  .mosaic a{position:relative;display:block;overflow:hidden;background:#D9D2C5}
  .mosaic a:first-child{grid-row:1/3}
  .mosaic a:nth-child(n+6){display:none}
  .mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
  .mosaic a:hover img{transform:scale(1.035)}
  .mosaic a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .view-all{position:absolute;right:14px;bottom:14px;z-index:2;background:#fff;color:var(--ink);border:1px solid var(--ink);border-radius:2px;font:700 .9rem var(--sans);padding:.65em 1em;cursor:pointer;display:flex;align-items:center;gap:.5em}
  .view-all:hover{background:var(--ink);color:#fff}
  .view-all svg{width:16px;height:16px}
  @media (prefers-reduced-motion:reduce){.mosaic img{transition:none}}
  @media (max-width:700px){
    .mosaic,.mosaic--3{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;height:auto;gap:6px}
    .mosaic a:first-child{grid-row:auto;grid-column:1/-1;aspect-ratio:3/2}
    .mosaic a{aspect-ratio:1}
    .mosaic--3 a:not(:first-child){grid-column:span 2;aspect-ratio:3/2}
    .view-all{right:10px;bottom:auto;top:10px;font-size:.85rem}
  }

  /* Room text + at-a-glance panel */
  .room-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .room-body h2{margin-bottom:.2em}
  .room-price{font:400 italic 1.25rem/1.4 var(--serif);color:var(--bronze);margin:0 0 .25rem}
  .room-price-note{font-size:.95rem;margin:0 0 1.5rem}
  .room-body .btn{margin-top:.6rem}
  .glance{background:var(--stone);padding:clamp(1.25rem,3vw,2rem);border-top:4px solid var(--gold)}
  .room-detail:nth-of-type(even) .glance{background:#fff}
  .glance h3{font-size:1.25rem;margin-bottom:1rem}
  .glance dl{margin:0}
  .glance dt{font-weight:700;color:var(--ink);font-size:.92rem}
  .glance dd{margin:0 0 .85rem;font-size:.98rem}
  .glance dd:last-child{margin-bottom:0}
  @media (max-width:860px){.room-body{grid-template-columns:1fr}}

  /* Full-screen photo viewer */
  .viewer{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--ink);color:#fff;overflow:hidden;overflow:clip}
  /* Stop fast clicks on the arrows selecting the photo/text (blue highlight), and stop the photo being dragged */
  .viewer{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
  .viewer img{-webkit-user-drag:none;user-drag:none}
  .viewer::backdrop{background:rgba(46,42,36,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:viewer-in .35s ease}
  @keyframes viewer-in{from{opacity:0}to{opacity:1}}
  /* Soft background glow: the current photo, heavily blurred and darkened with a warm tint, so the backdrop picks up each room's colours */
  .viewer-glow{position:absolute;inset:-15%;background:center/cover no-repeat;filter:blur(60px) saturate(1.3) brightness(.7);transform:scale(1.1);transition:background-image .6s ease;z-index:0}
  .viewer-glow::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(46,42,36,.25) 0%,rgba(46,42,36,.75) 80%)}
  .viewer>*:not(.viewer-glow){position:relative;z-index:1}
  .viewer-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px clamp(14px,3vw,28px)}
  .viewer-title{font:400 1.2rem var(--serif)}
  .viewer-count{font-size:.9rem;color:#CFC7B8;margin-left:.75rem}
  .viewer button{font:inherit;color:#fff;background:rgba(255,255,255,.1);border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s ease}
  .viewer button:hover{background:rgba(255,255,255,.22)}
  .viewer button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .viewer-close{width:44px;height:44px}
  .viewer-stage{position:relative;display:grid;place-items:center;min-height:0;padding:0 clamp(56px,7vw,96px);touch-action:pan-y}
  .viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .25s ease;box-shadow:0 20px 60px rgba(0,0,0,.45);border-radius:2px}
  .viewer-stage img.loading{opacity:0}
  .viewer-prev,.viewer-next{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px}
  .viewer-prev{left:clamp(6px,2vw,24px)}
  .viewer-next{right:clamp(6px,2vw,24px)}
  .viewer svg{width:22px;height:22px}
  .viewer-thumbs{position:relative;display:flex;gap:8px;overflow-x:auto;padding:14px clamp(14px,3vw,28px) 18px;justify-content:center}
  .viewer-thumbs button{flex:0 0 auto;padding:0;width:84px;height:56px;border:2px solid transparent;border-radius:2px;background:none;opacity:.5;overflow:hidden;-webkit-backdrop-filter:none;backdrop-filter:none;transition:opacity .2s ease}
  .viewer-thumbs button:hover{opacity:.85;background:none}
  .viewer-thumbs button[aria-current="true"]{border-color:var(--gold);opacity:1}
  .viewer-thumbs img{width:100%;height:100%;object-fit:cover}
  @media (max-width:700px){
    .viewer-stage{padding:0 8px}
    .viewer-prev,.viewer-next{top:auto;bottom:8px;transform:none}
    .viewer-thumbs{justify-content:flex-start}
    .viewer-thumbs button{width:64px;height:44px}
  }
  @media (prefers-reduced-motion:reduce){.viewer-stage img,.viewer-glow{transition:none}.viewer[open]{animation:none}}
  body.viewer-open{overflow:hidden}


  /* =====================================================================
     Breakfast page
     ===================================================================== */

  /* Menu card on a stone band */
  .bk-menu{background:var(--stone);padding:clamp(3rem,7vw,5.5rem) 0;scroll-margin-top:88px}
  .menu-card{background:#fff;max-width:960px;margin:0 auto;padding:clamp(2rem,5vw,4rem) clamp(1.25rem,5vw,4rem);border-top:3px solid var(--gold);text-align:center}
  .menu-card h2{font-size:clamp(1.9rem,3.5vw,2.5rem);margin-bottom:clamp(1.5rem,4vw,2.5rem)}
  .menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,6vw,5rem)}
  .menu-cols>div+div{border-left:1px solid #E5DFD4;padding-left:clamp(2rem,6vw,5rem);margin-left:calc(-1 * clamp(2rem,6vw,5rem) / 2)}
  .menu-card h3{font:italic 400 1.15rem var(--serif);color:var(--bronze);margin:0 0 1.1rem;display:flex;align-items:center;gap:.9rem}
  .menu-card h3::before,.menu-card h3::after{content:"";flex:1;height:1px;background:var(--gold);opacity:.6}
  .menu-card ul{list-style:none;margin:0 0 2.25rem;padding:0}
  .menu-card li{margin:0 0 1.25rem}
  .menu-card h4{font:400 1.2rem/1.35 var(--serif);color:var(--ink);margin:0}
  .menu-card li p{margin:.2rem auto 0;font-size:.95rem;line-height:1.6;max-width:34ch}
  .menu-card li p.menu-note{font-size:.88rem;font-style:italic;color:var(--bronze);margin-top:.35rem}
  @media (max-width:760px){
    .menu-cols{grid-template-columns:1fr}
    .menu-cols>div+div{border-left:0;padding-left:0;margin-left:0}
  }

  /* Closing call to action (shared by inner pages) */
  .page-cta{padding:clamp(3rem,7vw,5rem) 0;text-align:center;border-top:1px solid #E5DFD4}
  .page-cta h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:.3em}
  .page-cta p{margin:0 auto 1.5rem}
  .page-cta-actions{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;justify-content:center;align-items:center}

  /* Inner-page hero: full-width photo with the heading set over it (photo is an <img> so each page sets its own) */
  .page-hero{position:relative;min-height:min(60vh,540px);display:grid;align-items:end;color:#fff;background:#3b352c;overflow:hidden}
  .page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .page-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(30,26,20,.78) 0%,rgba(30,26,20,.45) 45%,rgba(30,26,20,0) 75%),linear-gradient(180deg,rgba(30,26,20,0) 40%,rgba(30,26,20,.55))}
  .page-hero .wrap{position:relative;z-index:2;padding:clamp(5rem,12vw,8rem) 0 clamp(2.5rem,6vw,4.5rem)}
  .page-hero h1{color:#fff;font-size:clamp(2.6rem,6vw,4.25rem);margin-bottom:.35em;text-shadow:0 1px 14px rgba(0,0,0,.3)}
  .page-hero p{max-width:46ch;font-size:1.12rem;color:#F3EFE7;text-shadow:0 1px 10px rgba(0,0,0,.35);margin:0 0 1.4rem}
  .page-hero h1::after{content:"";display:block;width:56px;height:2px;background:var(--gold);margin-top:.45em}
  .hero-link{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px}
  .hero-link:hover{color:var(--gold)}
  @media (max-width:700px){
    .page-hero{min-height:0}
    .page-hero::before{background:linear-gradient(180deg,rgba(30,26,20,.25) 0%,rgba(30,26,20,.65) 45%,rgba(30,26,20,.88) 100%)}
  }

  /* =====================================================================
     Tariff and terms page
     ===================================================================== */
  /* Hero with the booking panel set into its bottom edge, like the home page */
  .page-hero--booking .wrap{padding-bottom:clamp(6.5rem,10vw,8rem)}

  .tariff{padding:clamp(3rem,7vw,5rem) 0}
  .tariff h2,.terms h2{font-size:clamp(1.9rem,3.5vw,2.5rem)}
  .rate-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.75rem);margin:1.5rem 0 clamp(2rem,5vw,3rem)}
  .rate-card{border:1px solid #E5DFD4;border-top:4px solid var(--gold);padding:clamp(1.25rem,3vw,2rem);background:#fff}
  .rate-card h3{font-size:1.45rem;margin:0 0 .6rem}
  .rate-card h3 a{color:var(--ink);text-decoration:none}
  .rate-card h3 a:hover{color:var(--bronze);text-decoration:underline;text-underline-offset:4px}
  .rate-main{font:italic 400 2.4rem/1 var(--serif);color:var(--bronze);margin:0 0 .4rem}
  .rate-main span:not([data-price]){font:400 1rem var(--sans);color:var(--body)}
  .rate-sub{margin:0 0 1.1rem;font-size:.95rem}
  .rate-card dl{margin:0;padding-top:1rem;border-top:1px solid #E5DFD4;display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:.35rem 1rem;font-size:.95rem}
  .rate-card dt{font-weight:700;color:var(--ink)}
  .rate-card dd{margin:0;text-align:right}
  .tariff-notes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem)}
  .tariff-notes h3{font-size:1.3rem;margin-bottom:.4em}
  .tariff-notes p{margin:0}
  @media (max-width:860px){.rate-cards{grid-template-columns:1fr}}
  @media (max-width:700px){.tariff-notes{grid-template-columns:1fr}}

  .terms{background:var(--stone);padding:clamp(3rem,7vw,5rem) 0}
  .terms-list{margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#DCD5C8;border:1px solid #DCD5C8}
  .terms-list>div{background:#fff;padding:clamp(1.25rem,3vw,1.75rem)}
  .terms-list dt{font:italic 400 1.05rem var(--serif);color:var(--bronze);margin-bottom:.3rem}
  .terms-list dd{margin:0;font-size:.98rem}
  .terms-list dd strong{display:block;font:400 1.35rem/1.3 var(--serif);color:var(--ink);margin-bottom:.4rem}
  .terms-list>div:last-child:nth-child(odd){grid-column:1/-1}
  @media (max-width:700px){.terms-list{grid-template-columns:1fr}}

  /* =====================================================================
     The area page
     ===================================================================== */
  .room-jump--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  @media (max-width:900px){.room-jump--4{grid-template-columns:repeat(2,minmax(0,1fr))}.room-jump--4 li:nth-child(3){border-left:0}.room-jump--4 li:nth-child(n+3){border-top:1px solid #DCD5C8}}
  @media (max-width:700px){.room-jump--4{grid-template-columns:1fr}}
  .area-section{padding:clamp(3rem,7vw,5rem) 0;scroll-margin-top:88px}
  .area-section--stone{background:var(--stone)}
  .area-section h2{font-size:clamp(1.9rem,3.5vw,2.5rem)}
  .area-section h3{font-size:1.3rem;margin-bottom:.4em}
  .area-section h3 a{color:var(--ink);text-decoration:none}
  .area-section h3 a:hover{color:var(--bronze);text-decoration:underline;text-underline-offset:4px}
  .local-cols,.rail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);margin-top:1.25rem}
  .rail{margin-bottom:clamp(2rem,4vw,3rem)}
  @media (max-width:760px){.local-cols,.rail{grid-template-columns:1fr}}
  .places{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,2vw,1.25rem)}
  .place{background:#fff;padding:clamp(1.1rem,2.5vw,1.5rem);border-top:3px solid var(--gold)}
  .area-section:not(.area-section--stone) .place{background:var(--stone)}
  .place-where{margin:0 0 .3rem;font:italic 400 .95rem var(--serif);color:var(--bronze)}
  .place h3{font-size:1.2rem;line-height:1.3;margin:0 0 .45rem}
  .place p:last-child{margin:0;font-size:.95rem;line-height:1.6}
  @media (max-width:960px){.places{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:600px){.places{grid-template-columns:1fr}}

  /* 404 page */
  .not-found{padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(3rem,7vw,5rem)}
  .not-found h1{font-size:clamp(2.2rem,5vw,3.4rem);max-width:18ch}
  .not-found p{font-size:1.1rem;max-width:52ch}
  .not-found .room-jump{margin:2rem 0 2.25rem}
  .not-found .page-cta-actions{justify-content:flex-start}

  /* Find us: illustrated map of Devon (inline SVG, drawn in code - approximate, not to scale).
     Google's street map (and its cookies) only loads when the visitor taps "Show street map". */
  .map-consent{position:relative;height:440px;background:var(--stone);overflow:hidden}
  .devon-map{display:block;width:100%;height:100%}
  .devon-map .dm-town{font:600 17px var(--sans);fill:var(--ink)}
  .devon-map .dm-region{font:italic 400 26px var(--serif);fill:var(--bronze)}
  .devon-map .dm-sea{font:italic 400 19px var(--serif);fill:var(--gold)}
  .devon-map .dm-coast{font:italic 400 17px var(--serif);fill:var(--bronze)}
  .devon-map .dm-rail{font:italic 400 16px var(--serif);fill:var(--bronze)}
  .devon-map .dm-road rect{fill:#fff;stroke:#D9D1C1}
  .devon-map .dm-road text{font:700 11px var(--sans);fill:var(--body)}
  .devon-map .dm-here rect{fill:#fff;filter:drop-shadow(0 4px 10px rgba(46,42,36,.15))}
  .devon-map .dm-here text{font:400 19px var(--serif);fill:var(--ink)}
  .map-consent__bar{position:absolute;right:16px;bottom:16px;background:rgba(255,255,255,.94);padding:.85rem 1rem;box-shadow:0 8px 24px rgba(46,42,36,.12);border-top:3px solid var(--gold);max-width:15rem}
  .map-consent__bar .btn{width:100%}
  .map-consent__note{font-size:.78rem;line-height:1.45;margin:.5rem 0 0;color:var(--body)}
  .map-consent iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  @media (max-width:800px){
    .map-consent{height:auto}
    .devon-map{height:420px}
    .devon-map .dm-coast{display:none}
    .map-consent__bar{position:static;max-width:none;box-shadow:none;border-top:0;padding:.9rem 0 0;background:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
    .map-consent__bar .btn{width:auto}
    .map-consent__note{margin:0}
    .map-consent:has(iframe){height:360px}
  }

  /* Privacy and cookies page: plain, readable text column */
  .legal{padding:0 0 clamp(3rem,7vw,5rem)}
  .legal .wrap{max-width:46rem;margin-left:max(16px,calc((100% - var(--wrap)) / 2))}
  .legal h2{font-size:clamp(1.4rem,2.6vw,1.75rem);margin:2.2rem 0 .6rem;padding-top:1.4rem;border-top:1px solid #E5DFD4;scroll-margin-top:88px}
  .legal h2:first-child{margin-top:.5rem}
  .legal ul{padding-left:1.2rem;margin:0 0 1rem}
  .legal li{margin:0 0 .6rem}
  .legal li::marker{color:var(--gold)}
  .legal strong{color:var(--ink)}
  .legal a{text-underline-offset:3px}
  footer .small a{display:inline;padding:0;margin-left:.35em}