picture{display:contents}
/* Self-hosted fonts (2026-07-22). Previously loaded from fonts.googleapis.com,
   which PageSpeed flagged as a render-blocking request costing ~750ms on mobile
   plus two extra third-party handshakes (googleapis + gstatic). These faces are
   byte-identical to the Google-served ones; serving them from our own origin,
   inside this already-blocking stylesheet, removes the extra request entirely.
   unicode-range is preserved so browsers still only fetch the subsets they need. */
@font-face{font-family:'Cormorant SC';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/CormorantSC-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant SC';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/CormorantSC-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant SC';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/CormorantSC-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant SC';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/CormorantSC-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/IBMPlexMono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/IBMPlexMono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/IBMPlexMono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/IBMPlexMono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/Spectral-400i-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/Spectral-400i-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Spectral-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Spectral-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/Spectral-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/Spectral-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Spectral-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Spectral-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* The Castle Rolls - shared stylesheet
   Persona: a Domesday-book / manorial muster-roll, not a fantasy castle skin.
   Parchment, iron-gall ink, wax-seal red, aged brass - not heraldic cliché. */

:root{
  --parchment: #EDE6D3;
  --parchment2: #F4EFE1;
  --parchment-dark: #DED4B8;
  --ink: #2A2318;
  --ink-soft: #55492F;
  --iron: #3B3226;
  --seal: #7A2E27;
  --seal-deep: #5C211C;
  --brass: #7B5F29;
  --brass-light: #B79A4F;
  --line: #C9BC98;
  --shadow: rgba(42,35,24,0.18);
  --radius: 3px;
  --serif: 'Spectral', Georgia, serif;
  --display: 'Cormorant SC', 'Spectral', serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* A local()-based metric-override fallback (matching Georgia's metrics to
   Spectral/Cormorant SC, to stop the hero heading reflowing on font swap)
   was tried 2026-07-20 and reverted - PageSpeed's own test runner measured
   it WORSE (CLS 0.416 vs 0.101 without it), almost certainly because their
   Chrome instance runs on Linux with neither Georgia nor Times New Roman
   installed, so local() can't resolve there and something about the failed
   match made timing worse rather than neutral. Real Windows/Mac visitors
   would likely have benefited, but shipping a fix that regresses on the
   very tool used to grade it isn't worth it - reverted to the plain stack. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.55;
}
a{color:var(--seal-deep)}
a:hover{color:var(--seal)}
img{max-width:100%;display:block}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* Masthead */
.masthead{
  background:var(--iron);
  color:var(--parchment2);
  border-bottom:4px double var(--brass-light);
  padding:14px 0;
}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.masthead-title{
  font-family:var(--display);
  font-size:1.5rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--parchment2);
  text-decoration:none;
}
.masthead-title small{
  display:block;
  font-family:var(--mono);
  font-size:0.6rem;
  letter-spacing:0.15em;
  color:var(--brass-light);
  text-transform:none;
  margin-top:2px;
}
.masthead-nav{display:flex;gap:4px 14px;flex-wrap:wrap;font-family:var(--mono);font-size:0.78rem;letter-spacing:0.03em;text-transform:uppercase}
.masthead-nav a{display:inline-block;color:var(--parchment2);text-decoration:none;padding:10px 2px}
.masthead-nav a:hover{text-decoration:underline;text-decoration-color:var(--brass-light);text-underline-offset:4px}

/* Hero */
.hero{
  padding:56px 0 40px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse at top left, rgba(122,46,39,0.06), transparent 60%),
    var(--parchment);
}
/* Tighter vertical rhythm on phones - the hero (with its stacked Featured card)
   was leaving a large gap before the first section. */
@media (max-width:640px){
  .hero{padding:34px 0 22px}
  section{padding:28px 0}
}
.eyebrow{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--seal-deep);
  margin:0 0 10px;
}
h1.ap-title{
  font-family:var(--display);
  font-size:3.2rem;
  line-height:1.02;
  margin:0 0 14px;
  color:var(--iron);
}
.tagline{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--seal-deep);margin:0 0 16px;max-width:640px}
.standfirst{font-size:1.15rem;color:var(--ink-soft);max-width:640px;margin:0 0 20px}
.stat-row{display:flex;gap:28px;flex-wrap:wrap;margin-top:24px}
.stat{
  font-family:var(--mono);background:none;border:none;padding:0;text-align:left;cursor:pointer;
}
.stat:hover b{color:var(--seal)}
.stat:hover span{color:var(--ink)}
/* Non-interactive variant for secondary hero pages (no stat-button filter
   to click into) - same look, no pointer cursor or hover affordance. */
.stat.static{cursor:default}
.stat.static:hover b{color:var(--seal-deep)}
.stat.static:hover span{color:var(--ink-soft)}
.stat b{display:block;font-size:1.8rem;color:var(--seal-deep);font-family:var(--display)}
.stat span{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft)}

/* Sections */
section{padding:44px 0}
h2.sec-title{
  font-family:var(--display);
  font-size:1.9rem;
  color:var(--iron);
  border-bottom:2px solid var(--brass-light);
  padding-bottom:8px;
  margin:0 0 22px;
}
h2.sec-title .count{font-family:var(--mono);font-size:0.85rem;color:var(--ink-soft);font-weight:400}

/* Regional browse */
.circuit{margin-bottom:34px}
.circuit h3{
  font-family:var(--mono);
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--seal-deep);
  border-left:3px solid var(--seal);
  padding-left:10px;
  margin:0 0 12px;
}
.roll-list{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
@media (max-width:720px){.roll-list{columns:1}}
.roll-list li{break-inside:avoid;margin-bottom:9px;padding-bottom:9px;border-bottom:1px dotted var(--line);display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.roll-list a{text-decoration:none;font-weight:600}
.roll-list .region{font-family:var(--mono);font-size:0.72rem;color:var(--ink-soft);white-space:nowrap}

.showcase-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin:20px 0}
@media (max-width:980px){.showcase-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.showcase-grid{grid-template-columns:repeat(2,1fr)}}
.showcase-card{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);position:relative;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--parchment2);transition:transform 0.15s, box-shadow 0.15s;
}
.showcase-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px var(--shadow)}
.showcase-card img{width:100%;height:170px;object-fit:cover;display:block;filter:sepia(8%) contrast(1.03) saturate(0.95)}
.showcase-rank{
  position:absolute;top:10px;left:10px;z-index:1;
  font-family:var(--mono);font-size:0.75rem;font-weight:600;
  background:var(--iron);color:var(--brass-light);padding:3px 9px;border-radius:2px;
  letter-spacing:0.03em;
}
.showcase-card-body{padding:14px 16px;flex:1;display:flex;flex-direction:column}
.showcase-tag{font-family:var(--mono);font-size:0.65rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--seal-deep)}
.showcase-card h3{margin:6px 0 4px;font-family:var(--serif);font-size:1.1rem;color:var(--iron)}
.showcase-card p{margin:0;font-size:0.8rem;color:var(--ink-soft);font-family:var(--mono)}

/* Shared two-line location/rating pattern for gallery card previews
   (showcase-card, find-card, nearby-card) - location and rating on
   separate lines so they don't wrap mid-phrase in narrow cards.
   card-location and stay-note both reserve fixed multi-line height
   (2 lines / 3 lines) so every card in a row lines up at exactly the
   same points regardless of how much its own text actually wraps -
   content-driven whitespace is what made the grid look uneven. */
.card-location{margin:0 0 3px;min-height:3.1em}
.card-rating{padding-top:8px;font-weight:600;white-space:nowrap}
.showcase-card .card-rating{color:var(--seal-deep);text-align:center;margin-top:auto;font-size:0.78rem}
.nearby-card .card-rating{color:var(--seal-deep);margin-top:auto}

/* Castle detail page */
.castle-topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:22px}
.castle-topbar-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rating-pill{font-family:var(--mono);font-size:0.8rem;color:var(--ink-soft)}
/* Prominent rating lead under the castle H1 - review-intent is the top way
   searchers reach this site (Search Console 2026-07-21), so it leads. */
.castle-locale{color:var(--ink-soft);font-family:var(--mono);font-size:0.9rem;margin:0 0 8px}
.castle-rating-lead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-size:1.05rem;color:var(--iron)}
.castle-rating-lead strong{color:var(--seal-deep);font-family:var(--serif)}
.rating-lead-count{color:var(--ink-soft);font-family:var(--mono);font-size:0.82rem}
.stars{display:inline-block;font-size:1.15rem;line-height:1}
.stars::before{
  content:"★★★★★";letter-spacing:2px;
  background:linear-gradient(90deg,var(--brass-light) calc(var(--rating)/5*100%),var(--line) calc(var(--rating)/5*100%));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* The castle's most search-worthy named figure, surfaced near the top.
   Same visual weight as .callout ("Worth the trip" / "Before you go") -
   the earlier inline-sentence version read weak/scrappy next to those two
   boxes (Stewart, 2026-07-21). Iron accent keeps it visually distinct from
   the seal (Worth the trip) and brass (Before you go) callouts, so all
   three read as related but separate categories, not duplicates. */
.castle-figure{
  border-left:4px solid var(--iron);
  background:var(--parchment2);
  padding:16px 20px;
  margin:0 0 20px;
  max-width:720px;
}
.castle-figure h4{
  font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--seal-deep);margin:0 0 6px;
}
.castle-figure p{margin:0;font-size:0.95rem;color:var(--iron)}
.castle-figure strong{color:var(--seal-deep)}
.ticket-badge{
  font-family:var(--mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:0.06em;
  padding:5px 12px;border:1px solid var(--iron);color:var(--iron);border-radius:2px;
  text-decoration:none;display:inline-block;transition:opacity 0.15s;
}
a.ticket-badge:hover{opacity:0.72}
.ticket-badge.free{border-color:var(--seal);color:var(--seal-deep);background:#F6E8E1}
.ticket-badge.dog{border-color:var(--brass);color:var(--brass);background:var(--parchment2)}
/* Matches the FEATURED graphic on the hero Featured Castle card (Amazon
   orange, Stewart's call 2026-07-22 - previously brass). */
.ticket-badge.featured{border-color:#FF9900;color:#3B3226;background:#FF9900}
.ticket-badge.wedding{border-color:var(--seal);color:var(--seal-deep);background:var(--parchment2)}
.ticket-badge.garden{border-color:var(--brass);color:var(--brass);background:var(--parchment2)}
.ticket-badge.tearoom{border-color:var(--brass);color:var(--brass);background:var(--parchment2)}
.ticket-badge.haunted{border-color:var(--iron);color:var(--iron);background:var(--parchment2)}
.ticket-badge.coastal{border-color:var(--brass);color:var(--brass);background:var(--parchment2)}
.ticket-badge.family{border-color:var(--brass);color:var(--brass);background:var(--parchment2)}
.ticket-badge.train{border-color:var(--brass);color:var(--brass);background:var(--parchment2)}
/* margin-top only (not shorthand margin) - deliberately leaves margin-left/
   right/bottom untouched so .wrap's margin:0 auto centering (same specificity,
   declared earlier) isn't silently overridden. The shorthand version of this
   rule was doing exactly that site-wide on every <hr class="ap-rule wrap">
   (428 castle pages): it zeroed the left/right margin, so on any viewport
   wider than 1120px the divider hugged the left edge instead of centering,
   visibly stopping short of the right edge. Found and fixed 2026-07-21. */
.ap-rule{border:none;border-top:3px double var(--brass-light);margin-top:18px}

.castle-head{padding-top:14px;padding-bottom:20px}
.breadcrumb{font-family:var(--mono);font-size:0.75rem;color:var(--ink-soft);margin-bottom:14px}
.breadcrumb a{color:var(--ink-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--seal)}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.badge{
  font-family:var(--mono);
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  padding:4px 10px;
  border:1px solid var(--brass);
  border-radius:20px;
  color:var(--ink-soft);
  background:var(--parchment2);
}
.badge.stay{border-color:var(--seal);color:var(--seal-deep);background:#F6E8E1}
.rating-line{font-family:var(--mono);font-size:0.9rem;color:var(--ink-soft);margin-top:6px}
.rating-line b{color:var(--seal-deep);font-size:1.1rem}

.castle-columns{display:grid;grid-template-columns:1fr 1.25fr;gap:44px;padding-top:26px}
.castle-col-left,.castle-col-right{min-width:0}
@media (max-width:860px){.castle-columns{grid-template-columns:1fr}}
.castle-hero-boxed{width:100%;height:auto;border-radius:var(--radius);display:block;filter:sepia(8%) contrast(1.03) saturate(0.95);border:1px solid var(--line)}
.photo-credit{margin:4px 0 0;font-family:var(--mono);font-size:0.62rem;color:var(--ink-soft);text-align:right}
.thumb-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.thumb-row img{width:100%;height:110px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);filter:sepia(8%) contrast(1.03) saturate(0.95)}

.col-label{
  font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--seal-deep);border-bottom:1px solid var(--brass-light);padding-bottom:6px;margin:24px 0 12px;
}
.fact-list{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:0;font-size:0.92rem}
.fact-list dt{font-family:var(--mono);font-size:0.75rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.04em}
.fact-list dd{margin:0;color:var(--ink)}
.contact-grid p{margin:0 0 8px;font-size:0.9rem}

/* Review-sourced parking / guided-tour notes: quoted, attributed, never asserted. */
.note-caveat{margin:0 0 12px;font-family:var(--mono);font-size:0.72rem;color:var(--ink-soft);max-width:520px}
.visitor-notes{gap:10px 16px;align-items:baseline}
.visitor-notes dd{font-style:italic;color:var(--ink);line-height:1.5}
.visitor-notes .note-cite{display:block;font-style:normal;font-family:var(--mono);font-size:0.72rem;color:var(--ink-soft);margin-top:3px}

.field-label{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);margin-right:6px}

.pull-quote{
  border-left:3px solid var(--brass-light);margin:24px 0;padding:2px 0 2px 20px;
  font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--iron);max-width:720px;
}
.pull-quote cite{display:block;margin-top:8px;font-family:var(--mono);font-style:normal;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft)}

.blurb{font-size:1.18rem;line-height:1.6;max-width:720px;margin:24px 0}

/* Essay media - inline photos, image rows and video embeds used in
   long-form supplement pages (the-concentric-castle.html and similar). */
.essay-figure{margin:30px 0}
.essay-figure img{width:100%;height:auto;max-height:480px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);display:block;filter:sepia(8%) contrast(1.03) saturate(0.95)}
.essay-figure figcaption{margin-top:8px;font-family:var(--mono);font-size:0.75rem;color:var(--ink-soft);text-align:center}

.video-figure{margin:30px 0}
.video-embed{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-figure figcaption{margin-top:8px;font-family:var(--mono);font-size:0.75rem;color:var(--ink-soft);text-align:center}

.callout{
  border-left:4px solid var(--seal);
  background:var(--parchment2);
  padding:16px 20px;
  margin:20px 0;
  max-width:720px;
}
.callout h4{
  font-family:var(--mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--seal-deep);
  margin:0 0 6px;
}
.callout p{margin:0}
.callout.intel{border-left-color:var(--brass)}
.callout.intel h4{color:var(--brass)}

.hours-table{font-family:var(--mono);font-size:0.85rem;border-collapse:collapse;margin:16px 0 0;width:100%;max-width:420px;table-layout:fixed}
.hours-table td{padding:7px 0;border-bottom:1px solid var(--line)}
.hours-table td:first-child{width:60%;color:var(--ink);padding-right:12px}
.hours-table td:last-child{text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.hours-table tr:last-child td{border-bottom:none}
.hours-disclaimer{font-size:0.78rem;color:var(--ink-soft);font-style:italic;margin:10px 0 0;max-width:420px;line-height:1.4}
.hours-disclaimer a{font-style:normal}
.hours-note{font-size:0.8rem;color:var(--ink-soft);font-style:italic;margin:8px 0 0;max-width:420px}
.hours-facts{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.hours-facts dt{color:var(--seal-deep)}


.ai-summary{
  border:1px solid var(--brass);
  background:linear-gradient(135deg, var(--parchment2) 0%, #EFE9D6 100%);
  padding:20px 24px;
  border-radius:var(--radius);
  margin:18px 0;
  position:relative;
}
.ai-summary-label{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  color:var(--brass);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.ai-summary-label::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--seal);
  display:inline-block;
}
.ai-summary p{margin:0;font-size:1.05rem;line-height:1.6;color:var(--ink)}

.affiliate-note{margin:6px 0 14px;font-family:var(--mono);font-size:0.72rem;color:var(--ink-soft);max-width:520px}
.affiliate-note a{color:var(--ink-soft);text-decoration:underline}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:16px 0;max-width:760px}
.product-card{border:1px solid var(--line);background:var(--parchment2);padding:14px;border-radius:var(--radius);display:flex;flex-direction:column}
.product-card a{margin-top:auto;align-self:flex-start}
.product-card img{width:100%;height:150px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;padding:6px;box-sizing:border-box}
.product-card a.product-img-link{margin:0;align-self:stretch;border:none;padding:0;display:block;background:none;border-radius:0}
.product-card a.product-img-link:hover{background:none}
.nearby-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:16px 0;max-width:760px}
.nearby-card{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--parchment2);transition:transform 0.15s, box-shadow 0.15s;
}
.nearby-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px var(--shadow)}
.nearby-card img{width:100%;height:100px;object-fit:cover;display:block;filter:sepia(8%) contrast(1.03) saturate(0.95)}
.nearby-card-placeholder{
  width:100%;height:100px;box-sizing:border-box;background:var(--parchment);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;
  font-family:var(--mono);font-size:0.65rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-soft);
}
.nearby-card-body{padding:10px 12px;flex:1;display:flex;flex-direction:column}
.guide-date{margin:0 0 4px;font-family:var(--mono);font-size:0.66rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--seal-deep)}
.nearby-card h5{margin:0 0 4px;font-family:var(--serif);font-size:0.92rem;color:var(--iron);line-height:1.25}
.nearby-card p{margin:0;font-size:0.72rem;color:var(--ink-soft);font-family:var(--mono)}
.nearby-card .stay-note{margin-top:5px;font-family:var(--serif);font-style:italic;font-size:0.8rem;color:var(--ink);min-height:4.65em}
.showcase-card .stay-note{margin-top:5px;font-family:var(--serif);font-style:italic;font-size:0.78rem;color:var(--ink);min-height:4.65em}
.star{color:#FF9900}

/* Bigger variant for full-page galleries (sleep-in page, essay galleries) */
.stay-grid{max-width:none;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.stay-grid img,.stay-grid .nearby-card-placeholder{height:160px}
.stay-grid .nearby-card-body{padding:14px 16px}
.stay-grid .nearby-card h5{font-size:1.05rem}
.stay-grid .nearby-card p{font-size:0.78rem}
.stay-grid .nearby-card .stay-note{font-size:0.88rem}
/* Access cards (/accessible-castles). The note is the operator's own words
   about their site, so it is set upright rather than in the italic used for
   visitor quotes elsewhere - it is a statement of fact, not a quotation -
   and it is never clamped to a fixed height, because truncating "ground
   floor of the keep only" would be worse than useless. The card is a plain
   div, not a link, so the source link inside it is reachable. */
.access-card{cursor:default}
.access-card .stay-note{font-family:var(--sans,inherit);font-style:normal;min-height:0;line-height:1.5}
.access-card h5 a{color:inherit;text-decoration:none}
.access-card h5 a:hover{text-decoration:underline}
.access-card .card-source{margin-top:9px;font-size:0.74rem;line-height:1.45;color:var(--muted,#6b6257)}
.access-card .card-source a{color:var(--seal-deep);text-decoration:underline}
/* Per-castle access note. Set apart from the ordinary callouts with a solid
   left rule so it reads as a statement of fact from the operator rather than
   site editorial. */
.access-note{border-left:4px solid var(--seal-deep);max-width:none}
.access-note .access-provenance{margin-top:10px;font-size:0.76rem;line-height:1.5;color:var(--muted,#6b6257)}
.ticket-badge.access{background:#2f4858;color:#fff}
.ticket-badge.playground{background:#6b8e4e;color:#fff}

.product-cover-placeholder{
  width:100%;height:150px;box-sizing:border-box;margin-bottom:10px;
  background:var(--parchment);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;
  font-family:var(--mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);
}
.product-card .ptype{font-family:var(--mono);font-size:0.65rem;text-transform:uppercase;color:var(--brass);letter-spacing:0.08em}
.product-card h5{margin:6px 0 4px;font-size:0.98rem;font-family:var(--serif)}
.product-card p{font-size:0.85rem;color:var(--ink-soft);margin:0 0 10px}
.product-card a{font-family:var(--mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em;text-decoration:none;color:var(--seal-deep);border:1px solid var(--seal-deep);padding:5px 10px;display:inline-block;border-radius:var(--radius)}
.product-card a:hover{background:var(--seal-deep);color:var(--parchment2)}

.tag-chips{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.tag-chip{font-family:var(--mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:0.05em;background:var(--iron);color:var(--parchment2);padding:4px 10px;border-radius:20px;text-decoration:none}
.tag-chip:hover{background:var(--seal-deep);color:var(--parchment2)}

.related{margin-top:8px}
.related ul{list-style:none;padding:0;margin:0}
.related li{margin-bottom:6px}

/* Table (the roll ledger) */
table.ledger{width:100%;border-collapse:collapse;font-size:0.92rem}
table.ledger th{
  font-family:var(--mono);
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  text-align:left;
  padding:8px 10px;
  background:var(--iron);
  color:var(--parchment2);
  position:sticky;top:0;
}
table.ledger td{padding:7px 10px;border-bottom:1px solid var(--line)}
table.ledger tr:nth-child(even) td{background:var(--parchment2)}
table.ledger a{text-decoration:none;font-weight:600}
.ledger-wrap{overflow-x:auto;border:1px solid var(--line)}
/* Sortable headers + filter controls for the Full Ledger */
table.ledger th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
table.ledger th.sortable:hover{background:var(--seal-deep)}
table.ledger th.sortable::after{content:"\2195";opacity:0.4;margin-left:6px;font-size:0.9em}
table.ledger th.sort-asc::after{content:"\2191";opacity:1}
table.ledger th.sort-desc::after{content:"\2193";opacity:1}
.ledger-filters{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 16px}
.ledger-filters label{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);display:flex;align-items:center;gap:6px}
.ledger-filters select{
  font-family:var(--serif);
  font-size:0.9rem;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--parchment2);
  color:var(--ink);
}
.ledger-count{font-family:var(--mono);font-size:0.72rem;color:var(--seal);margin-left:auto}
.ledger-checks{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 16px}
/* Shown only when a filter arrives via URL (?filter=...), e.g. clicking a
   badge on a castle's own page - makes clear why the visitor landed here
   filtered rather than on the full 428-castle table, and what for. */
.ledger-head-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.ledger-filter-label{display:inline-flex;align-items:center;gap:10px;background:#F6E8E1;border:1px solid var(--seal);color:var(--seal-deep);font-family:var(--mono);font-size:0.82rem;padding:9px 16px;border-radius:var(--radius);margin:0}
.ledger-filter-label strong{font-weight:700;color:var(--seal)}
.ledger-filter-label button{font-family:var(--mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.04em;background:none;border:none;color:var(--seal-deep);text-decoration:underline;cursor:pointer;padding:0}
.ledger-check{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);display:flex;align-items:center;gap:6px;cursor:pointer}
.ledger-check input{accent-color:var(--seal);width:15px;height:15px;cursor:pointer}
.ledger-reset{
  font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--seal-deep);background:none;border:none;padding:0;margin-left:auto;
  text-decoration:underline;cursor:pointer;
}
.ledger-reset:hover{color:var(--seal)}
.ledger-view-toggle{display:flex;gap:0;margin:0 0 20px;width:fit-content;border:1px solid var(--seal-deep);border-radius:var(--radius);overflow:hidden}
.ledger-view-btn{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--seal-deep);background:var(--parchment2);border:none;padding:8px 16px;cursor:pointer}
.ledger-view-btn + .ledger-view-btn{border-left:1px solid var(--seal-deep)}
.ledger-view-btn.active{background:var(--seal-deep);color:var(--parchment2)}
.ledger-view-btn:not(.active):hover{background:#F6E8E1}
/* On phones, stack the filters and right-justify the selects into a clean
   column so their edges line up instead of stepping with the label widths. */
@media (max-width:640px){
  .ledger-filters{flex-direction:column;align-items:stretch;gap:10px}
  .ledger-filters label{width:100%;justify-content:space-between}
  .ledger-filters select{width:60%}
  .ledger-count{margin-left:0;width:100%}
  .ledger-checks{gap:10px 16px}
  .ledger-reset{margin-left:0;width:100%;text-align:right}
}

.search-box{margin:20px 0}
.search-box input{
  width:100%;
  max-width:420px;
  font-family:var(--serif);
  font-size:1.05rem;
  padding:10px 14px;
  border:1px solid var(--brass);
  background:var(--parchment2);
  border-radius:var(--radius);
}

/* Map */
#castle-map{height:420px;border:1px solid var(--line);margin:20px 0;filter:sepia(15%) contrast(1.02)}
#ledger-map{height:420px;border:1px solid var(--line);margin:16px 0;filter:sepia(15%) contrast(1.02)}
.castle-map-tooltip{background:var(--parchment2);border:1px solid var(--iron);color:var(--ink);font-family:var(--serif);font-size:0.85rem;padding:4px 10px;border-radius:2px;box-shadow:0 2px 8px var(--shadow)}
.castle-map-tooltip a{color:var(--seal-deep);text-decoration:none}
.castle-map-tooltip a:hover{text-decoration:underline}
.castle-map-tooltip::before{border-top-color:var(--iron)}
.station-map-icon{width:10px;height:10px;background:#2E5C8A;border:1px solid var(--parchment2);box-shadow:0 0 0 1px #2E5C8A}
.postcode-map-icon{width:16px;height:16px;border-radius:50%;background:#B79A4F;border:2px solid var(--parchment2);box-shadow:0 0 0 2px #B79A4F,0 2px 6px var(--shadow)}

/* End-of-page "where next" links - was a bare paragraph of default-underlined
   links separated by a middot, now a row of chips matching the Shop's
   "Find it on Amazon" button style for a consistent look across the site. */
.next-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.next-links a{font-family:var(--mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em;text-decoration:none;color:var(--seal-deep);border:1px solid var(--seal-deep);padding:8px 14px;border-radius:var(--radius);display:inline-block}
.next-links a:hover{background:var(--seal-deep);color:var(--parchment2)}

/* Footer */
footer{
  border-top:4px double var(--brass-light);
  background:var(--iron);
  color:var(--parchment2);
  padding:30px 0;
  margin-top:40px;
  font-size:0.88rem;
}
footer a{color:var(--brass-light);display:block;padding:6px 2px}
footer .foot-grid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* Nav v2 footer: the nine facet pages the masthead used to carry live here,
   grouped under headings, so a five-item nav doesn't cost them their sitewide
   internal link. Columns are narrow and equal so five of them wrap cleanly
   rather than one long column dragging the footer's height. */
footer .foot-grid>div{flex:1 1 150px;min-width:140px}
footer .foot-grid>div:first-child{flex:2 1 260px}
.foot-head{display:block;margin:0 0 8px;font-family:var(--mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--parchment2);opacity:0.75}

.faq-item{margin-bottom:18px;max-width:760px}
.faq-item h3{font-size:1.05rem;margin:0 0 6px}
.faq-item p{margin:0;color:var(--ink-soft)}
/* /faq body: .wrap zeroes the section's vertical padding, which left the first
   question glued to the hero divider. Restore the standard section rhythm so
   the answers sit clear of the rule, and give each Q–A pair room to breathe. */
.faq-page{padding-top:40px;padding-bottom:56px}
/* Site-wide version of the same fix (2026-07-22). The hero draws each page's
   divider with its border-bottom, and .wrap carries no vertical padding - so
   whatever section follows sat flush against that rule. Measured 0px on the
   homepage, the ledger, the country hubs and /about; only /faq had been
   patched, one page at a time. This generalises that 40px rhythm to every
   page. The `+ div +` variant covers any page with a div between the hero and
   the first real section - it was written for the homepage's gallery modal,
   which was removed on 2026-07-27 when the finder replaced it; kept because
   the rule is generic and costs nothing. Zeroing the first
   child's top margin keeps the gap at exactly 40px rather than stacking on
   top of an existing margin (the county hubs' essay-figure had 30px). */
.hero + section.wrap,
.hero + div + section.wrap{padding-top:40px}
.hero + section.wrap > :first-child,
.hero + div + section.wrap > :first-child{margin-top:0}
.faq-page .faq-item{margin-bottom:26px}
.castle-faq{max-width:760px}
.castle-faq .faq-item{margin-bottom:14px}

.go-deeper ul{list-style:none;margin:10px 0 0;padding:0}
.go-deeper li{margin:0 0 8px}
.go-deeper a{font-weight:500}

.two-col{display:grid;grid-template-columns:1.3fr 0.9fr;gap:40px}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}

/* Photo lightbox */
.lightbox-modal{
  display:none;position:fixed;inset:0;z-index:1000;
  background:#15110A;
  grid-template-rows:auto 1fr auto;
  padding:16px;
}
.lightbox-modal.open{display:grid}
.lightbox-top{display:flex;justify-content:space-between;align-items:center;color:var(--parchment2)}
.lightbox-counter{font-family:var(--mono);font-size:0.85rem;color:var(--brass-light);letter-spacing:0.04em}
.lightbox-close{
  font-family:var(--mono);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em;
  background:none;border:1px solid var(--brass-light);color:var(--parchment2);
  padding:7px 14px;border-radius:2px;cursor:pointer;
}
.lightbox-close:hover{background:var(--brass-light);color:var(--iron)}
.lightbox-image{
  grid-row:2;justify-self:center;align-self:center;
  max-width:min(92vw,1100px);max-height:72vh;object-fit:contain;
  border:1px solid var(--brass-light);
}
.lightbox-nav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:1001;
  width:46px;height:46px;border-radius:50%;
  background:rgba(42,35,24,0.6);border:1px solid var(--brass-light);color:var(--parchment2);
  font-size:1.2rem;cursor:pointer;
}
.lightbox-nav:hover{background:var(--seal-deep)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
.lightbox-strip{
  grid-row:3;display:flex;gap:8px;justify-content:center;overflow-x:auto;padding-top:12px;
}
.lightbox-strip img{
  width:64px;height:48px;object-fit:cover;border-radius:2px;cursor:pointer;
  opacity:0.55;border:2px solid transparent;
}
.lightbox-strip img:hover{opacity:0.85}
.lightbox-strip img.active{opacity:1;border-color:var(--seal)}
@media (max-width:600px){
  .lightbox-nav{width:38px;height:38px;font-size:1rem}
  .lightbox-prev{left:6px}
  .lightbox-next{right:6px}
}

/* Stat gallery modal - reused by all 4 hero stats */

/* ---- Live-search gallery view -------------------------------------------
   When the visitor types a name query, showRegionalListing() adds .gallery
   to #regional-listing and the result rows flip from the 2-column text list
   into a grid of photo cards. The <img> is hidden outside gallery mode, so
   it costs nothing in the default list view.
   These selectors key off the .gallery CLASS rather than #regional-listing
   specifically, so the same card styling also applies to the postcode
   "nearest castles" results (#nearest-results.gallery) - one gallery look
   shared by both search modes rather than a second copy of these rules. */
.gallery-thumb{display:none}
.gallery-rating{display:none}  /* shown only in the search gallery, below */

/* Cards are sized to match the "top-rated castles" showcase grid exactly:
   5 across (3 on tablet, 2 on mobile), 170px photo, same padding + fonts. */
#regional-listing.gallery .circuit h3{margin-bottom:20px}
.gallery .roll-list{
  columns:auto;                /* undo the 2-column text flow */
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
@media (max-width:980px){.gallery .roll-list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.gallery .roll-list{grid-template-columns:repeat(2,1fr)}}
/* Phones: one full-width card per row so the rating line can't be clipped and
   single results don't leave an empty second column. */
@media (max-width:520px){.gallery .roll-list{grid-template-columns:1fr}}
/* Safety net: in any narrow card the rating wraps rather than clipping. */
@media (max-width:640px){.card-rating,.gallery-rating{white-space:normal}}
.gallery .roll-list li{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  margin:0;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--parchment2);
  overflow:hidden;
  transition:transform 0.15s, box-shadow 0.15s;
}
.gallery .roll-list li:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 16px var(--shadow);
}
.gallery .gallery-thumb{
  display:block;
  width:100%;
  height:170px;
  object-fit:cover;
  filter:sepia(8%) contrast(1.03) saturate(0.95);
  background:var(--parchment-dark);
}
.gallery .roll-list li a{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.1rem;
  line-height:1.2;
  color:var(--iron);
  padding:14px 16px 4px;
}
.gallery .roll-list li .region{
  font-family:var(--mono);
  font-size:0.8rem;
  color:var(--ink-soft);
  padding:0 16px 6px;
  white-space:normal;
}
/* rating line, matched to the top-rated cards; margin-top:auto pins it to the
   bottom so ratings align across a row regardless of name/region length */
.gallery .roll-list li .gallery-rating{
  display:block;
  margin-top:auto;
  padding:8px 16px 14px;
  font-family:var(--mono);
  font-weight:600;
  font-size:0.78rem;
  color:var(--seal-deep);
  text-align:center;
  white-space:nowrap;
}
/* whole card is one click target */
.gallery .roll-list li a::after{content:"";position:absolute;inset:0}
/* lettered parchment fallback for the few castles with no hero photo */
.gallery .roll-list li.no-photo::before{
  content:attr(data-letter);
  display:flex;
  align-items:center;
  justify-content:center;
  height:170px;
  font-family:var(--display);
  font-size:3rem;
  color:var(--brass-light);
  background:var(--parchment-dark);
}

/* ---- Homepage hero: content + Featured Castle ad slot ------------------- */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:44px;align-items:start}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  /* Below 900px the grid drops to one column, so the featured-castle card
     (sized for a fixed 380px sidebar) would otherwise stretch to the full
     content width - on an iPad in portrait that reads as an oversized
     banner rather than a compact card. Cap it and center it instead. */
  .hero-aside{max-width:420px;margin:0 auto}
}

.hero-aside{align-self:start}
.ad-card{
  display:block;position:relative;text-decoration:none;color:var(--ink);
  border:1px solid var(--brass-light);border-radius:var(--radius);overflow:hidden;
  background:var(--parchment2);box-shadow:0 2px 8px var(--shadow);
  transition:transform .15s, box-shadow .15s;
}
.ad-card:hover{transform:translateY(-2px);box-shadow:0 7px 18px var(--shadow)}
.ad-card img,.ad-media-fallback,.ad-media-logo{display:block;width:100%;height:220px;object-fit:cover}
.ad-media-fallback{background:var(--iron);display:flex;align-items:center;justify-content:center}
.ad-media-logo{background:var(--iron)}
.ad-house-icon{width:104px;height:auto}
.ad-label{
  position:absolute;top:10px;right:10px;z-index:1;
  font-family:var(--mono);font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;
  background:rgba(42,35,24,0.82);color:var(--parchment2);padding:3px 9px;border-radius:2px;
}
.ad-label-house{background:var(--brass)}
.ad-label-editorial{background:#FF9900;color:#3B3226;letter-spacing:0.06em}
.ad-rating{font-family:var(--mono);font-weight:600;font-size:0.9rem;color:var(--seal-deep);margin:0 0 16px}
.ad-body{padding:20px 22px 24px;text-align:center}
.ad-eyebrow{font-family:var(--mono);font-size:0.66rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--brass);margin:0 0 8px}
.ad-title{font-family:var(--serif);font-weight:600;font-size:1.55rem;color:var(--iron);margin:0 0 6px;line-height:1.12}
.ad-location{font-family:var(--mono);font-size:0.78rem;color:var(--ink-soft);margin:0 0 14px}
.ad-tagline{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--ink);margin:0 0 18px}
.ad-cta{
  display:inline-block;font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--iron);border:1px solid var(--iron);border-radius:var(--radius);padding:9px 18px;transition:background .15s,color .15s;
}
.ad-card:hover .ad-cta{background:var(--iron);color:var(--parchment2)}

/* Ranked national list (best-castles-to-visit-uk) */
.rank-entry{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start;margin-bottom:38px}
.rank-photo{position:relative;display:block}
.rank-photo img{width:100%;height:190px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);display:block;filter:sepia(8%) contrast(1.03) saturate(0.95)}
.rank-photo .nearby-card-placeholder{height:190px;border-radius:var(--radius)}
.rank-no{position:absolute;top:10px;left:10px;background:var(--iron);color:var(--parchment2);font-family:var(--mono);font-size:0.8rem;letter-spacing:0.08em;padding:4px 10px;border-radius:var(--radius);box-shadow:0 1px 4px var(--shadow)}
.rank-body h3{margin:0 0 5px;font-family:var(--serif);font-size:1.35rem;line-height:1.25}
.rank-body h3 a{color:var(--iron);text-decoration:none}
.rank-body h3 a:hover{text-decoration:underline}
.rank-meta{margin:0 0 4px;font-family:var(--mono);font-size:0.75rem;color:var(--ink-soft)}
.rank-rating{margin:0 0 10px;font-family:var(--mono);font-size:0.85rem;color:var(--seal-deep)}
.rank-blurb{margin:0 0 8px;font-size:0.95rem;line-height:1.55}
.rank-link{margin:0;font-size:0.85rem}
@media(max-width:720px){.rank-entry{grid-template-columns:1fr;gap:12px}.rank-photo img{height:200px}}
.free-flag{display:inline-block;background:var(--brass);color:var(--parchment2);font-family:var(--mono);font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;padding:1px 7px;border-radius:var(--radius);vertical-align:1px}
.shop-tile{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.shop-tile img{width:100%;height:79px;object-fit:contain;background:#fff;display:block;padding:6px;box-sizing:border-box}

/* ---- Ask The Castle Keeper (site-wide bubble) --------------------------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

#keeper{position:fixed;right:20px;bottom:20px;z-index:900;font-family:var(--serif)}

#keeper-launch{
  display:flex;align-items:center;gap:10px;
  padding:13px 20px;cursor:pointer;
  font-family:var(--mono);font-size:0.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.07em;
  color:var(--parchment2);background:var(--seal-deep);
  border:1px solid var(--seal-deep);border-radius:999px;
  box-shadow:0 4px 14px var(--shadow);
  transition:transform 0.15s, box-shadow 0.15s;
}
#keeper-launch:hover{transform:translateY(-2px);box-shadow:0 7px 20px var(--shadow)}
/* Drawn close-helm. Inline SVG rather than an image file so it inherits
   currentColor and costs no extra request on every page of the site. */
.keeper-launch-icon{width:19px;height:auto;flex:none;color:var(--brass-light)}
.keeper-head-icon{width:26px;height:auto;flex:none;color:var(--brass-light);margin-right:2px}
#keeper.open #keeper-launch{display:none}

#keeper-panel{
  display:flex;flex-direction:column;
  width:min(400px,calc(100vw - 40px));height:min(560px,calc(100vh - 40px));
  background:var(--parchment);
  border:1px solid var(--iron);border-radius:var(--radius);
  box-shadow:0 10px 40px var(--shadow);overflow:hidden;
}
#keeper-panel[hidden]{display:none}

.keeper-head{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;background:var(--iron);color:var(--parchment2);
}
/* Helm and title group at the left; the controls keep the right edge. */
.keeper-head-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
/* Turnstile mounts here. In interaction-only mode it renders nothing at all
   for the overwhelming majority of visitors, so it must not reserve space -
   it only becomes visible if Cloudflare decides a challenge is warranted. */
/* Do NOT hide this with display:none - Turnstile refuses to execute inside a
   non-rendered container and token minting fails silently, taking the whole
   chat down with it (learned the hard way). Making the widget invisible is a
   DASHBOARD setting: the widget must be created in Invisible mode. In that
   mode this element stays empty and collapses on its own. */
#keeper-turnstile:empty{display:none}
#keeper-turnstile{padding:0 16px 6px}
#keeper-clear{
  background:none;border:1px solid rgba(244,236,216,0.35);border-radius:999px;
  color:var(--parchment2);font-family:var(--mono);font-size:0.62rem;
  text-transform:uppercase;letter-spacing:0.06em;padding:4px 9px;cursor:pointer;
  transition:border-color 0.15s, background 0.15s;
}
#keeper-clear:hover{border-color:var(--brass-light);background:rgba(244,236,216,0.08)}
#keeper-title{margin:0;font-family:var(--display);font-size:1.15rem;letter-spacing:0.02em}
#keeper-close{
  flex:none;width:28px;height:28px;cursor:pointer;font-size:1.3rem;line-height:1;
  color:var(--parchment2);background:none;border:1px solid rgba(244,239,225,0.3);border-radius:var(--radius);
}
#keeper-close:hover{background:rgba(244,239,225,0.12)}

#keeper-thread{flex:1;overflow-y:auto;padding:16px;font-size:0.95rem;line-height:1.55}
.keeper-turn{margin-bottom:14px;padding:11px 14px;border-radius:var(--radius);border:1px solid var(--line)}
.keeper-turn p{margin:0 0 8px}
.keeper-turn p:last-child{margin-bottom:0}
.keeper-turn ul{margin:0 0 8px;padding-left:18px}
.keeper-turn li{margin-bottom:5px}
.keeper-you{background:var(--parchment-dark);border-color:var(--parchment-dark);font-family:var(--mono);font-size:0.82rem}
.keeper-bot{background:var(--parchment2)}
.keeper-pending{opacity:0.6;font-style:italic}
.keeper-error{border-color:var(--seal);color:var(--seal-deep)}
.keeper-sources{margin-top:9px !important;padding-top:8px;border-top:1px dotted var(--line);font-family:var(--mono);font-size:0.7rem;color:var(--ink-soft)}

/* Preview cards for the castles an answer cites. Horizontal strip: an answer
   can name ten castles and a stacked list would bury the answer itself.
   The count and the right-edge fade exist because without them a reader sees
   only the ~3 cards that fit and assumes the rest are missing. */
/* The "not from the roll" paragraph the prompt requires - visually set apart
   so the distinction between sourced and recalled is obvious at a glance,
   not just present in the wording. */
.keeper-turn p.from-memory{
  border-left:2px solid var(--brass);padding-left:10px;
  color:var(--ink-soft);font-size:0.9rem;
}
.near-city-line{font-size:0.9rem;color:var(--ink-soft);margin:18px 0 0;padding-top:12px;border-top:1px dotted var(--line)}
.history-facts{font-family:var(--mono);font-size:0.78rem;color:var(--brass);margin:0 0 6px}
.history-credit{font-size:0.76rem;color:var(--ink-soft);margin-top:6px}
.keeper-sources-label{
  margin:10px 0 0 !important;padding-top:9px;
  border-top:1px dotted var(--line);
  font-family:var(--mono);font-size:0.66rem;color:var(--ink-soft);
}
/* Auto-fill grid: every cited castle is visible by scrolling the thread the
   reader is already scrolling - nothing hides past a horizontal edge. */
.keeper-cards{
  display:grid;gap:8px;margin-top:8px;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
}
.keeper-card{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:6px;background:var(--parchment2);
  transition:border-color 0.15s, transform 0.15s;
}
.keeper-card:hover{border-color:var(--brass);transform:translateY(-2px)}
.keeper-card-thumb{display:block;position:relative;width:100%;aspect-ratio:4/3;
  border-radius:2px;overflow:hidden;background:var(--parchment)}
.keeper-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Lettered fallback for the few castles with no photo on file. */
.keeper-card.no-photo .keeper-card-thumb::after{
  content:attr(data-letter);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.5rem;color:var(--brass)
}
.keeper-card-name{display:block;margin-top:5px;font-size:0.72rem;line-height:1.25;font-weight:600}
.keeper-card-meta{display:block;margin-top:2px;font-family:var(--mono);font-size:0.62rem;color:var(--ink-soft)}

.keeper-suggestions{margin:0;padding:0 16px 10px;display:flex;flex-wrap:wrap;gap:6px}
.keeper-chip{
  padding:5px 11px;cursor:pointer;font-family:var(--mono);font-size:0.7rem;
  color:var(--seal-deep);background:var(--parchment2);
  border:1px solid var(--line);border-radius:999px;
}
.keeper-chip:hover{border-color:var(--brass);color:var(--seal)}

#keeper-form{display:flex;gap:8px;padding:0 16px 10px}
#keeper-input{
  flex:1;min-width:0;padding:11px 13px;font-family:var(--serif);font-size:1rem;
  color:var(--ink);background:var(--parchment2);
  border:1px solid var(--line);border-radius:var(--radius);
}
#keeper-input:focus{outline:2px solid var(--brass);outline-offset:1px}
#keeper-send{
  flex:none;width:46px;cursor:pointer;font-size:1.1rem;
  color:var(--parchment2);background:var(--seal-deep);
  border:1px solid var(--seal-deep);border-radius:var(--radius);
}
#keeper-send:hover:not(:disabled){background:var(--seal)}
#keeper-send:disabled{opacity:0.5;cursor:default}
.keeper-foot{margin:0;padding:0 16px 14px;font-family:var(--mono);font-size:0.66rem;line-height:1.45;color:var(--ink-soft)}

/* Phones: the panel takes the screen, so it behaves like a sheet rather than
   a cramped floating card. */
@media (max-width:520px){
  #keeper{right:14px;bottom:14px;left:14px}
  #keeper-launch{width:100%;justify-content:center}
  #keeper-panel{width:100%;height:min(78vh,560px)}
}
/* Very short viewports (landscape phones): don't let the panel exceed the screen. */
@media (max-height:520px){
  #keeper-panel{height:calc(100vh - 28px)}
}
@media print{#keeper{display:none}}

/* --- /find : faceted finder ------------------------------------------------
   Structure borrowed from a job board's results page (twin search, facet rail,
   result cards, live count); everything visual stays on the roll's own
   parchment/iron-gall palette. The one deliberate departure from a job board's
   layout is the card: jobs are text records so they stack one per row, castles
   are a visual choice so they go in a photo-led grid. */
.find-searchbar-wrap{margin:24px auto 8px}
.find-searchbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;background:var(--parchment2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.find-field{display:flex;flex-direction:column;gap:5px;flex:1 1 200px;position:relative}
.find-field-radius{flex:0 0 auto}
.find-field label,.find-group-label{font-family:var(--mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft);margin:0}
.find-field input,.find-field select,.find-rail select{
  font-family:var(--serif);font-size:0.95rem;color:var(--ink);background:var(--parchment);
  border:1px solid var(--line);border-radius:var(--radius);padding:9px 11px;width:100%}
.find-field input:focus,.find-field select:focus,.find-rail select:focus{outline:2px solid var(--brass-light);outline-offset:1px}
/* Suggestion list under "Where?" - keyboard-navigable, so it needs a real
   focus/active state rather than hover alone. */
.find-suggest{
  position:absolute;top:100%;left:0;right:0;z-index:30;margin:2px 0 0;padding:0;list-style:none;
  background:var(--parchment2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 16px var(--shadow);max-height:260px;overflow-y:auto}
.find-suggest li{padding:8px 11px;font-family:var(--serif);font-size:0.9rem;color:var(--ink);cursor:pointer}
.find-suggest li:hover,.find-suggest li.active{background:#F6E8E1;color:var(--seal-deep)}

.find-resulthead{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:22px 0 10px}
.find-count{font-family:var(--display);font-size:2rem;color:var(--seal-deep);margin:0}
.find-sort-wrap{display:flex;align-items:center;gap:8px}
.find-sort-wrap label{font-family:var(--mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft)}
.find-sort-wrap select{font-family:var(--serif);font-size:0.9rem;color:var(--ink);background:var(--parchment2);border:1px solid var(--line);border-radius:var(--radius);padding:7px 10px}

.find-active{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.find-active button{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:0.7rem;
  text-transform:uppercase;letter-spacing:0.04em;background:#F6E8E1;border:1px solid var(--seal);
  color:var(--seal-deep);border-radius:var(--radius);padding:6px 10px;cursor:pointer}
.find-active button::after{content:"\00d7";font-size:0.95rem;line-height:1}
.find-active button:hover{background:var(--seal-deep);color:var(--parchment2);border-color:var(--seal-deep)}

.find-layout{display:grid;grid-template-columns:225px 1fr;gap:32px;align-items:start}
.find-rail{position:sticky;top:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--parchment2);padding:16px 16px 18px}
.find-rail-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}
.find-rail-head h2{font-family:var(--display);font-size:1.15rem;color:var(--seal-deep);margin:0}
.find-reset{font-family:var(--mono);font-size:0.66rem;text-transform:uppercase;letter-spacing:0.05em;background:none;border:none;color:var(--ink-soft);text-decoration:underline;cursor:pointer;padding:0}
.find-reset:hover{color:var(--seal)}
.find-group{margin:0 0 16px}
.find-group-label{display:block;margin:0 0 6px}
/* Facets are visible checkboxes, not collapsed accordions: the whole value of
   this page is stacking four at once, which you can't judge behind carets. */
.find-facet{display:flex;align-items:center;gap:8px;padding:3px 0;font-family:var(--serif);font-size:0.88rem;color:var(--ink);cursor:pointer}
.find-facet input{accent-color:var(--seal);width:15px;height:15px;cursor:pointer;flex:0 0 auto}
.find-facet.empty{opacity:0.4}

.find-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
/* [hidden] is a UA style at the lowest specificity, so any class rule that
   sets display beats it - filtering a card out set the attribute and changed
   nothing on screen. Every .find-* rule below that sets display needs this
   companion, hence the two explicit overrides rather than one blanket
   [hidden]{display:none!important}. */
.find-card[hidden],.find-active[hidden]{display:none}
.find-card{display:flex;flex-direction:column;background:var(--parchment2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform 0.15s,box-shadow 0.15s}
.find-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px var(--shadow)}
.find-card img{width:100%;height:140px;object-fit:cover;display:block;filter:sepia(8%) contrast(1.03) saturate(0.95)}
.find-card .nearby-card-placeholder{height:140px}
.find-card-body{padding:12px 13px 13px;flex:1;display:flex;flex-direction:column}
.find-card-body h3{margin:0 0 4px;font-family:var(--serif);font-size:1rem;line-height:1.25;color:var(--iron)}
.find-card-place{margin:0;font-family:var(--mono);font-size:0.7rem;color:var(--ink-soft)}
.find-card-rating{margin:7px 0 0;font-family:var(--mono);font-size:0.74rem;font-weight:600;color:var(--seal-deep)}
.find-card-distance{margin:5px 0 0;font-family:var(--mono);font-size:0.72rem;color:var(--brass)}
.find-card-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.find-chip{font-family:var(--mono);font-size:0.6rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--brass);border:1px solid var(--line);border-radius:var(--radius);padding:3px 6px}
.find-empty{font-family:var(--serif);font-style:italic;color:var(--ink-soft);padding:32px 0;max-width:44ch}

/* Mobile: the desktop rail becomes a bottom sheet, so filters never push the
   results themselves below the fold on the screen most of this traffic uses. */
.find-sheet-toggle,.find-sheet-done{display:none}
@media (max-width:820px){
  .find-layout{grid-template-columns:1fr;gap:0}
  .find-searchbar{padding:13px 14px}
  .find-field{flex:1 1 100%}
  .find-count{font-size:1.6rem}
  .find-sheet-toggle{
    display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:0.74rem;
    text-transform:uppercase;letter-spacing:0.05em;color:var(--parchment2);background:var(--seal-deep);
    border:1px solid var(--seal-deep);border-radius:var(--radius);padding:11px 18px;cursor:pointer;margin:0 0 18px}
  .find-rail{
    display:none;position:fixed;inset:auto 0 0 0;top:auto;max-height:82vh;overflow-y:auto;z-index:60;
    border-radius:var(--radius) var(--radius) 0 0;border-bottom:none;box-shadow:0 -8px 28px var(--shadow);
    padding:18px 20px 22px}
  .find-rail.open{display:block}
  .find-sheet-done{
    display:block;width:100%;font-family:var(--mono);font-size:0.76rem;text-transform:uppercase;
    letter-spacing:0.05em;color:var(--parchment2);background:var(--seal-deep);border:none;
    border-radius:var(--radius);padding:13px;cursor:pointer;margin-top:6px}
  .find-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}
  .find-card img,.find-card .nearby-card-placeholder{height:110px}
}

.find-related-head{font-family:var(--display);font-size:1.4rem;color:var(--seal-deep);margin:44px 0 6px}
.find-showall{
  display:block;margin:22px auto 0;font-family:var(--mono);font-size:0.74rem;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--seal-deep);background:var(--parchment2);border:1px solid var(--seal-deep);
  border-radius:var(--radius);padding:11px 22px;cursor:pointer}
.find-showall:hover{background:#F6E8E1}
.find-showall[hidden]{display:none}
.find-where-error{margin:6px 0 0;font-family:var(--mono);font-size:0.72rem;color:var(--seal)}
.find-where-error[hidden]{display:none}
/* Cards / Table toggle - /roll only. */
.find-view-toggle{display:flex;width:fit-content;margin:0 0 16px;border:1px solid var(--seal-deep);border-radius:var(--radius);overflow:hidden}
.find-view-btn{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--seal-deep);background:var(--parchment2);border:none;padding:8px 16px;cursor:pointer}
.find-view-btn + .find-view-btn{border-left:1px solid var(--seal-deep)}
.find-view-btn.active{background:var(--seal-deep);color:var(--parchment2)}
.find-view-btn:not(.active):hover{background:#F6E8E1}
#find-map{height:420px;margin:0 0 20px;border:1px solid var(--line)}
#find-table-wrap[hidden],.find-grid[hidden]{display:none}

/* Photo focal points. object-fit:cover crops from the vertical CENTRE of a
   photo, which is wrong for a castle sitting high on a crag - the centre band
   is rock and the roofline gets clipped at the top edge of the card. These
   nudge the crop window up so the building is fully in frame. Keyed on the
   filename so one line fixes the photo everywhere it appears (every guide
   gallery, cluster page and nearby grid) rather than per-template.
   The percentage is the standard object-position Y: 0% = top of the photo,
   50% = the default centre. Add a line here when a card crop clips a subject. */
.nearby-card img[src*="edinburgh-castle-card.jpg"]{object-position:50% 25%}
.nearby-card img[src*="clitheroe-castle-card.jpg"]{object-position:50% 17%}
.nearby-card img[src*="st-leonard-s-tower-card.jpg"]{object-position:50% 21%}
.nearby-card img[src*="herstmonceux-castle-card.jpg"]{object-position:50% 18%}
.nearby-card img[src*="lulworth-castle-card.jpg"]{object-position:50% 20%}
.nearby-card img[src*="craigston-castle-card.jpg"]{object-position:50% 12%}
.nearby-card img[src*="tattershall-castle-card.jpg"]{object-position:50% 29%}
.nearby-card img[src*="carsluith-castle-card.jpg"]{object-position:50% 30%}
.nearby-card img[src*="haverfordwest-castle-card.jpg"]{object-position:50% 30%}
.nearby-card img[src*="dundonald-castle-card.jpg"]{object-position:50% 38%}
.nearby-card img[src*="hastings-castle-card.jpg"]{object-position:50% 20%}
.nearby-card img[src*="knaresborough-castle-card.jpg"]{object-position:50% 15%}
.nearby-card img[src*="castle-of-st-john-stranraer-card.jpg"]{object-position:50% 34%}
.nearby-card img[src*="kidwelly-castle-card.jpg"]{object-position:50% 40%}
.nearby-card img[src*="restormel-castle-card.jpg"]{object-position:50% 21%}