/* ============================================================
   OUR DARTMOOR TEMPLATE — Phase 1 chrome.
   PALETTE: tweak these variables to recolour everything.
   ============================================================ */
:root{
  --green:#4A6741; --sage:#798D53; --green-tint:#EDF2EC;
  --ink:#41454B; --slate:#6B7077; --line:#E2E4E1; --paper:#F8F8F6;
  --heather:#b98bb0; --heather-hover:#9d7695; --heather-deep:#6B4763; --heather-tint:#F4E9F0;
  --gorse:#E0A526; --gorse-deep:#8a5e0c; --gorse-tint:#FBF1D8;
  --bracken:#a48368; --peat:#c5a670;
  --od-font:'Cabin',system-ui,-apple-system,sans-serif;
  --od-display:'Cabin Sketch','Cabin',cursive;
  --nav-h:88px;
}

*{box-sizing:border-box;}
body.odt{margin:0;font-family:var(--od-font);color:var(--ink);background:var(--paper);line-height:1.6;}
body.odt a{color:inherit;text-decoration:none;}
body.odt img{max-width:100%;}

/* Faint round-logo watermark sitting behind the page content, a gentle reminder
   of which site you're on. Scoped to the content area (behind the container,
   above the page background) so it reliably shows through the gaps; low opacity
   and non-interactive so it never affects readability. */
.odt-main{position:relative;}
.odt-main > .odt-container{position:relative;z-index:1;}
.odt-main::before{
  content:'';
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(72vw,640px);
  height:min(72vw,640px);
  background:url('../images/ourdartmoor-logo-round-text.svg') center/contain no-repeat;
  opacity:.08;
  z-index:0;
  pointer-events:none;
}
.rc-dark .odt-main::before{background-image:url('../images/ourdartmoor-logo-round-text-inverted.svg');opacity:.1;}
/* Keep the watermark out of the footer. */
.odt-footer{z-index:1;}
/* Desktop: larger, out in the emptier right margin, and lower down the screen. */
@media(min-width:901px){
  .odt-main::before{
    top:auto;
    left:auto;
    right:-140px;
    bottom:-60px;
    transform:none;
    width:min(62vw,912px);
    height:min(62vw,912px);
    opacity:.06;
  }
}
/* Headings use the body font, EXCEPT h1, which takes the display face so every
   page title matches the logo.

   Doing it here, once, is deliberate. This blanket rule used to force the body
   font on ALL headings, so the component fought back with a hand-written list of
   view classes marked !important. Any view not on that list (Places, News, the
   map timeline) silently fell back to the body font, and every new view would
   have done the same. Setting h1 here covers component views, articles, modules
   and anything added later, with no list to maintain. */
.odt h2,.odt h3,.odt h4{font-family:var(--od-font);}
.odt h1{font-family:var(--od-display);font-weight:700;}

.odt-skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:200;}

/* Screen-reader-only text.
   Joomla core markup uses Bootstrap's .visually-hidden for accessibility
   labels, and this template deliberately does not load Bootstrap. Without this
   rule that text is simply VISIBLE: it is why the article prev/next links read
   as "Previous article: Exercise Baskerville Prev" all run together. Any other
   core output using it was leaking too. */
.visually-hidden,
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Article previous/next, from Joomla's "Content - Page Navigation" plugin.
   Its markup carries Bootstrap button classes we do not load, so it is styled
   from scratch here as two cards.
   Set the plugin's Show option to "Article Title" (not "Text") so the cards
   name the piece rather than saying Prev/Next. */
.pagenavigation{margin:2.8rem 0 0;padding-top:1.6rem;border-top:1px solid var(--line);}
.pagenavigation .pagination{display:flex;gap:1rem;align-items:stretch;margin:0;padding:0;list-style:none;}
.pagenavigation a{flex:0 1 50%;display:block;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;transition:transform .15s,box-shadow .15s,border-color .15s;}
.pagenavigation a:hover{border-color:var(--green);box-shadow:0 8px 20px rgba(0,0,0,.08);transform:translateY(-2px);}
/* Keep "next" hard right even when there is no "previous". */
.pagenavigation a.next{margin-left:auto;text-align:right;}
.pagenavigation a::before{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--slate);margin-bottom:.35rem;}
.pagenavigation a.previous::before{content:'\2190\00a0\00a0Previous';}
.pagenavigation a.next::before{content:'Next\00a0\00a0\2192';}
/* The label span has no class of its own; the chevrons do, and are hidden. */
.pagenavigation a span[aria-hidden]:not([class]){font-family:var(--od-display);font-weight:700;font-size:17px;line-height:1.3;color:var(--green);}
.pagenavigation a:hover span[aria-hidden]:not([class]){color:var(--heather-deep);}
.pagenavigation [class^='icon-chevron']{display:none;}
@media(max-width:560px){
  .pagenavigation .pagination{flex-direction:column;}
  .pagenavigation a{flex:1 1 auto;}
  .pagenavigation a.next{margin-left:0;}
}
.odt-skip:focus{left:8px;top:8px;border:2px solid var(--heather);border-radius:6px;}

/* header is a layout-less wrapper so the sticky bars pin to the page, not to it */
.odt-header{display:contents;}

/* ---- utility strip (scrolls away) ---- */
.odt-util{background:var(--paper);border-bottom:1px solid #ECEAE3;font-size:13px;color:var(--slate);}
.odt-util-in{max-width:none;margin:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:7px 32px;}
.odt-util-left{display:flex;align-items:center;gap:18px;}
.odt-util-right{display:flex;align-items:center;gap:16px;}
.odt-util a{display:inline-flex;align-items:center;gap:5px;}
.odt-util a:hover{color:var(--green);}
.odt-sp{flex:1;}
.odt-social{display:flex;gap:12px;font-size:17px;color:var(--green);}
.odt-social a:hover{color:var(--heather);}
.odt-suggest{background:var(--green);color:#fff !important;font-weight:600;padding:5px 13px;border-radius:7px;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;}
.odt-suggest:hover{background:#3c5435;color:#fff !important;}

/* ---- main nav (sticky) ---- */
.odt-navwrap{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;box-shadow:0 3px 12px rgba(0,0,0,.05);}
.odt-nav-in{max-width:none;margin:0;display:flex;align-items:center;gap:18px;padding:0 32px;height:var(--nav-h);}
.odt-logo{display:flex;align-items:center;}
.odt-logo::after{content:'';width:1px;height:48px;background:var(--line);margin-left:24px;}
.odt-logo-full{display:block;height:56px;}  /* full wordmark on desktop */
.odt-logo-round{display:none;}               /* square round mark, shown on mobile */
.odt-nav-social{display:flex;align-items:center;gap:16px;font-size:22px;}
.odt-nav-social::before{content:'';width:1px;height:48px;background:var(--line);margin-right:24px;}
.odt-nav-social a{color:var(--green);display:inline-flex;}
.odt-nav-social a:hover{color:var(--heather-deep);}
.odt-burger{display:none;background:none;border:0;font-size:28px;color:var(--ink);cursor:pointer;}

/* nav menu (styles Joomla's mod_menu output) */
.odt-mainmenu ul{list-style:none;margin:0;padding:0;}
.odt-mainmenu>ul{display:flex;gap:2px;margin-left:8px;position:relative;}
.odt-mainmenu li{position:relative;}
.odt-mainmenu>ul>li>a{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:500;color:var(--slate);padding:10px 12px;border-bottom:2px solid transparent;}
.odt-mainmenu>ul>li>a:hover{color:var(--ink);}
.odt-mainmenu>ul>li.current>a,.odt-mainmenu>ul>li.active>a{color:var(--heather-deep);border-bottom-color:var(--heather);}
.odt-mainmenu ul ul{position:absolute;top:100%;left:0;min-width:235px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--heather);border-radius:0 0 10px 10px;box-shadow:0 14px 34px rgba(0,0,0,.12);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease,visibility .25s;}
.odt-mainmenu li:hover>ul{opacity:1;visibility:visible;transform:translateY(0);}
.odt-mainmenu ul ul li a{display:block;padding:8px 18px;font-size:14px;color:var(--ink);}
.odt-mainmenu ul ul li a:hover{background:var(--heather-tint);color:var(--heather-deep);}
/* "Magic line": one heather underline that slides to the hovered top-level item
   and rests under the current page's item. Added by template.js as progressive
   enhancement; without JS the static border-bottom below still marks the page. */
.odt-magic-line{position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--heather);border-radius:2px;opacity:0;pointer-events:none;transition:left .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1),opacity .2s ease;}
/* When the sliding line is active, drop the per-item static border so there is
   only one accent (the line itself). Text colour on the current item stays. */
.odt-mainmenu.has-magic-line>ul>li>a{border-bottom-color:transparent;}

/* ---- search band (sticky under nav) ---- */
.odt-searchband{background:var(--green-tint);position:sticky;top:var(--nav-h);z-index:40;border-bottom:1px solid #dfe5da;}
.odt-search-in{max-width:1180px;margin:0 auto;display:flex;gap:12px;padding:14px 20px;position:relative;}
.odt-field{flex:1;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #D6DCCE;border-radius:10px;padding:0 16px;}
.odt-field i{font-size:19px;color:var(--green);}
.odt-field input{border:0;outline:0;flex:1;font-family:var(--od-font);font-size:15px;color:var(--ink);padding:12px 0;background:none;}
/* Focus the whole search pill softly, rather than a hard outline on the input. */
.odt-field:focus-within{border-color:var(--heather);box-shadow:0 0 0 2px var(--heather-tint);}
.odt-field input:focus-visible{outline:none;}
.odt-go{background:var(--heather);color:#fff;font-weight:600;font-size:15px;border:0;border-radius:10px;padding:0 26px;cursor:pointer;font-family:var(--od-font);}
.odt-go:hover{background:var(--heather-hover);}
.odt-suggest-box,.odt-suggest{position:absolute;}
#odt-suggest{left:20px;right:96px;top:calc(100% - 8px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.14);display:none;overflow:hidden;z-index:60;}
#odt-suggest a{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;color:var(--ink);font-size:14px;}
#odt-suggest a:hover{background:var(--green-tint);}
#odt-suggest .s{color:var(--slate);font-size:12px;text-transform:capitalize;white-space:nowrap;}

/* ---- main ---- */
.odt-main{min-height:50vh;overflow-x:clip;}
.odt-container{max-width:1180px;margin:0 auto;padding:26px 20px 48px;}
/* article/page heading colours by size — tweak each in user.css */
.odt-main h1{color:var(--green);}
.odt-main h2{font-family:var(--od-font);font-size:clamp(25px,3vw,31px);font-weight:600;color:#4a4e54;line-height:1.25;margin:1.6rem 0 .7rem;}
.odt-main h3{font-size:clamp(21px,2.4vw,25px);color:var(--heather-deep);line-height:1.3;margin:1.3rem 0 .5rem;}
.odt-main h4{font-size:clamp(18px,2vw,20px);color:var(--slate);line-height:1.3;margin:1.1rem 0 .4rem;}

/* Emphasis (<em>) in content: heather, not UIkit's default red (#f0506e). */
.odt-main em{color:var(--heather);font-style:italic;}

/* Links inside ARTICLE BODIES only (com_content). The site-wide reset
   (body.odt a{color:inherit}) makes links inherit grey body text with no
   underline — right for nav and listing cards, but leaves article/reference
   links hard to spot. Give those a clear resting colour + heather hover.
   Scoped to .com-content-article__body so it never touches listing/directory/
   map links (which previously got unwanted green underlines). Buttons excluded. */
.com-content-article__body a:not(.odc-btn){color:var(--green);text-decoration:underline;text-decoration-color:rgba(74,103,65,.4);text-underline-offset:2px;transition:color .15s,text-decoration-color .15s;}
.com-content-article__body a:not(.odc-btn):hover,.com-content-article__body a:not(.odc-btn):focus{color:var(--heather-deep);text-decoration-color:var(--heather);}

/* Light / dark colour toggle — add to ANY heading (keeps the H1/H2/H3 order).
   .odc-light  = white text for over images or dark panels
   .odc-dark   = dark ink text for on white/pale backgrounds */
.odt .odc-light,
.odt .odc-light h1,.odt .odc-light h2,.odt .odc-light h3,.odt .odc-light h4,.odt .odc-light p{
  color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.odt .odc-dark,
.odt .odc-dark h1,.odt .odc-dark h2,.odt .odc-dark h3,.odt .odc-dark h4,.odt .odc-dark p{
  color:var(--ink);text-shadow:none;
}

/* ---- footer ----
   Background image: set --odt-footer-img in css/user.css to swap the picture
   any time (survives template updates), e.g.
     :root{ --odt-footer-img: url('/images/ourdartmoor/footer/moor.jpg'); }
   A dark overlay keeps the light text readable; with no image it just shows
   the dark fallback colour. All footer text sits above the image. */
.odt-footer{
  position:relative;
  margin-top:30px;
  color:#f3ede2;
  background-color:#33372b;
  background-image:linear-gradient(rgba(26,30,20,.37), rgba(26,30,20,.43)), var(--odt-footer-img, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.odt-footer-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding:44px 20px;}
.odt-foot-logo{height:148px;width:auto;margin-bottom:14px;}
.odt-footer h4{color:#fff;font-size:15px;font-weight:600;margin:0 0 10px;}
.odt-footer p,.odt-footer a{color:#f3ede2;font-size:14px;}
.odt-footer a:hover{color:#fff;}
.odt-foot-social{display:flex;gap:16px;font-size:22px;}
.odt-foot-social a{font-size:22px;display:inline-flex;} /* beat .odt-footer a{font-size:14px} */
.odt-footer-base{border-top:1px solid rgba(255,255,255,.18);padding:14px 20px;text-align:center;font-size:13px;color:#fcf4ea;}
.odt-foot-cta{display:none;text-align:center;padding:6px 16px 22px;}

/* ---- mobile drawer ---- */
.odt-drawer{position:fixed;inset:0;z-index:100;visibility:hidden;}
.odt-drawer.open{visibility:visible;}
.odt-scrim{position:absolute;inset:0;background:rgba(20,18,16,.45);opacity:0;transition:opacity .3s ease;}
.odt-drawer.open .odt-scrim{opacity:1;}
.odt-panel{position:absolute;top:0;left:0;height:100%;width:300px;max-width:84vw;background:#fff;transform:translateX(-100%);transition:transform .3s ease;display:flex;flex-direction:column;}
.odt-drawer.open .odt-panel{transform:translateX(0);}
.odt-panel-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);flex-shrink:0;}
.odt-panel-top img{height:46px;width:auto;}
.odt-panel-top button{background:none;border:0;font-size:26px;color:var(--ink);cursor:pointer;}
.odt-drawer-menu{overflow:auto;flex:1 1 auto;min-height:0;padding-bottom:72px;}
.odt-drawer-menu ul{list-style:none;margin:0;padding:0;}
.odt-drawer-menu>ul>li{border-bottom:1px solid var(--line);}
.odt-drawer-menu a{display:block;padding:14px 20px;font-size:16px;color:var(--ink);}
.odt-drawer-menu li.current>a,.odt-drawer-menu li.active>a{color:var(--heather-deep);font-weight:600;background:var(--heather-tint);}
.odt-drawer-menu ul ul{background:#faf9f7;}
.odt-drawer-menu ul ul a{padding:11px 20px 11px 34px;font-size:14.5px;color:var(--slate);}
/* Collapsible submenus in the drawer (added by template.js): closed by default,
   tap the chevron to expand. Keeps a long menu (e.g. Directory) compact. */
.odt-drawer-menu .odt-has-sub{position:relative;}
.odt-drawer-menu .odt-has-sub > a{padding-right:56px;}
.odt-sub-toggle{position:absolute;top:0;right:0;width:52px;height:50px;background:none;border:0;color:var(--slate);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;}
.odt-sub-toggle i{transition:transform .25s ease;}
.odt-drawer-menu .odt-has-sub > ul{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.odt-drawer-menu .odt-has-sub.open > ul{max-height:3000px;}
.odt-drawer-menu .odt-has-sub.open > .odt-sub-toggle i{transform:rotate(180deg);}
.odt-drawer-suggest{position:absolute;left:18px;right:18px;bottom:16px;margin:0;justify-content:center;padding:12px;}

/* ---- error / offline ---- */
.odt-errbox{max-width:560px;margin:5rem auto;padding:0 1.2rem;text-align:center;}
.odt-errbox h1{font-size:3rem;margin:0 0 .4rem;color:var(--green);}

/* ============================================================
   HOME PAGE SECTIONS
   ============================================================ */
.odt-hero{position:relative;background:#3f4a32 center/cover;color:#fff;border-radius:14px;overflow:hidden;margin-bottom:40px;}
.odt-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,34,22,.62),rgba(30,34,22,.12));}
.odt-hero-in{position:relative;z-index:2;max-width:660px;padding:66px 42px;}
.odt-hero .odt-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:600;color:#e7d8c7;margin:0 0 10px;}
.odt-hero h1{font-size:38px;font-weight:600;line-height:1.15;letter-spacing:-.02em;margin:0 0 18px;}
.odt-hero p{font-size:18px;line-height:1.6;margin:0 0 22px;color:#f1ece4;}
.odt-btn{display:inline-flex;align-items:center;gap:7px;font-weight:600;border-radius:8px;font-size:16px;padding:12px 24px;}
.odt-hero .odt-btn{background:var(--heather);color:#fff;}
.odt-hero .odt-btn:hover{background:#b98bb0;color:#fff;}

.odt-section{margin:46px 0;}
.odt-section-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 18px;gap:14px;}
.odt-section-head h2{font-size:26px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0;}
.odt-section-head a{font-size:14px;font-weight:600;color:var(--heather);display:inline-flex;gap:5px;align-items:center;white-space:nowrap;}
.odt-intro{max-width:800px;font-size:18px;line-height:1.7;color:var(--slate);}
.odt-intro strong,.odt-intro b{color:var(--ink);}

/* latest stories — title on image, slides up to reveal more on hover */
.odt-stories{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.odt-story{position:relative;height:330px;border-radius:12px;overflow:hidden;display:block;background:#c3cdb4;}
.odt-story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.odt-story:hover img{transform:scale(1.05);}
.odt-story-cap{position:absolute;left:0;right:0;bottom:0;padding:20px;color:#fff;background:linear-gradient(transparent,rgba(20,18,14,.5) 42%,rgba(20,18,14,.85));transform:translateY(48px);transition:transform .45s ease;}
.odt-story:hover .odt-story-cap,.odt-story:focus .odt-story-cap{transform:translateY(0);}
.odt-story-over{display:block;text-transform:uppercase;letter-spacing:.09em;font-size:11px;font-weight:600;color:#eccfe6;margin-bottom:5px;}
.odt-story-cap h3{font-size:19px;font-weight:600;line-height:1.25;margin:0 0 8px;color:#fff;}
.odt-story-cap p{font-size:14px;line-height:1.5;margin:0;opacity:0;transition:opacity .4s ease .05s;color:#f0eae2;}
.odt-story:hover .odt-story-cap p,.odt-story:focus .odt-story-cap p{opacity:1;}

/* directory category grid */
.odt-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.odt-cat{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;transition:border-color .25s ease,transform .25s ease;}
.odt-cat:hover{border-color:var(--heather);transform:translateY(-2px);}
.odt-cat i{font-size:26px;color:var(--green);}
.odt-cat span{font-weight:600;font-size:15.5px;color:var(--ink);}

/* call to action band */
.odt-cta{background:var(--green-tint);border-radius:14px;padding:40px;text-align:center;margin:46px 0;}
.odt-cta h2{font-size:25px;font-weight:600;color:var(--ink);margin:0 0 10px;}
.odt-cta p{max-width:660px;margin:0 auto 20px;color:var(--slate);font-size:16px;line-height:1.7;}
.odt-cta .odt-btn{background:var(--green);color:#fff;}
.odt-cta .odt-btn:hover{background:#3c5435;color:#fff;}

@media(max-width:900px){
  .odt-stories,.odt-cats{grid-template-columns:1fr 1fr;}
  .odt-hero h1{font-size:30px;}
  .odt-hero-in{padding:44px 26px;}
}
@media(max-width:560px){
  .odt-stories,.odt-cats{grid-template-columns:1fr;}
}

/* ---- responsive ---- */
@media(max-width:900px){
  .odt-mainmenu{display:none;}
  .odt-nav-social{display:none;}
  .odt-logo::after{display:none;}
  .odt-logo-full{display:none;}
  .odt-logo-round{display:block;height:52px;width:auto;}
  .odt-nav-in{justify-content:space-between;}
  .odt-burger{display:block;margin-left:auto;}
  .odt-footer-in{grid-template-columns:1fr;}
  #odt-suggest{right:20px;}
}
@media(max-width:700px){
  .odt-util .odt-suggest{display:none;}
  .odt-foot-cta{display:block;}
}
@media(max-width:560px){
  .odt-util-in{flex-wrap:wrap;gap:10px;}
  .odt-go{padding:0 18px;}
  .odt-nav-in{padding:0 16px;}
  .odt-logo-round{height:46px;}
}

/* ============================================================
   CONTENT LAYOUT KIT  (classes: odc-*)
   Paste blocks from content-snippets.html into your articles to
   lay them out. Styling lives here so the look stays consistent.
   ============================================================ */
.odc-lead{font-size:20px;line-height:1.65;color:var(--ink);margin:0 0 1.2rem;}
/* Full-width hero: image runs edge-to-edge, text sits over it */
.odc-hero{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;margin-top:-26px;min-height:clamp(320px,46vw,520px);display:flex;align-items:center;background:#3f4a32 center/cover no-repeat;color:#fff;}
.odc-hero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(18,22,12,.4),rgba(18,22,12,.08));}
.odc-hero-in{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:64px 20px;}
/* Base eyebrow, usable anywhere. The hero rule below overrides the colour for
   white-on-photo; without this the class does nothing outside a hero. */
.odc-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:600;color:var(--slate);margin:0 0 8px;}
.odc-hero .odc-eyebrow{color:#e7d8c7;margin:0 0 10px;}

/* Header photograph: the establishing shot at the top of an article.
   Deliberately NOT a hero: no text over it, no full-bleed, nothing that makes
   the piece look like a site landing page. Articles here are written by other
   people and should read as contributions.
   Fixed 16:9 so every article opens the same shape whatever the photographer
   handed over; use .tall for a portrait-ish crop. */
.odc-headerpic{margin:0 0 1.5rem;}
.odc-headerpic img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;}
.odc-headerpic.tall img{aspect-ratio:3/2;}
.odc-headerpic figcaption{font-size:13.5px;color:var(--slate);margin-top:.5rem;}
@media(max-width:640px){.odc-headerpic img{aspect-ratio:4/3;}}

/* Byline for a contributed article. Articles here are written by other people,
   so the author's name is part of the piece, not site furniture. Deliberately
   quiet: it should sit under the title without competing with it. */
.odc-byline{font-size:15px;line-height:1.5;color:var(--slate);margin:-.2rem 0 1.6rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line);}
.odc-byline .nm{font-weight:600;color:var(--ink);}
.odc-byline a{color:var(--green);}
.odc-hero h1{font-family:var(--od-display);color:#fff;font-size:clamp(34px,5.2vw,54px);font-weight:700;line-height:1.05;letter-spacing:0;margin:0 0 16px;max-width:680px;text-shadow:0 2px 14px rgba(0,0,0,.3);}
/* Apply this class to any heading for the rustic Cabin Sketch look */
.odt .odc-display{font-family:var(--od-display);font-weight:700;}
.odc-hero p{font-size:clamp(16px,1.6vw,20px);line-height:1.55;margin:0 0 22px;max-width:560px;color:#f1ece4;}
.odc-hero .odc-btn{background:var(--heather);}
.odc-hero .odc-btn:hover{background:var(--heather-hover);}
/* Optional slow background zoom (Ken Burns), independent of the text. Add class "zoom". */
.odc-hero.zoom{overflow:hidden;}
.odc-hero.zoom::before{content:'';position:absolute;inset:-3%;z-index:0;background-image:inherit;background-size:cover;background-position:center;animation:od-kenburns 24s ease-in-out infinite alternate;}
@keyframes od-kenburns{from{transform:scale(1);}to{transform:scale(1.12);}}
/* Video background hero: add class "video" to .odc-hero and drop a
   <video class="odc-hero-vid"> as the first child. Keep a poster image on the
   hero (background-image) as a fallback for slow connections / reduced motion. */
.odc-hero.video{overflow:hidden;}
.odc-hero-vid{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;border:0;pointer-events:none;}
@media (prefers-reduced-motion: reduce){
  .odc-hero-vid{display:none;} /* falls back to the hero's poster image */
}
.odc-row{display:grid;gap:26px;margin:1.4rem 0;}
.odc-row.cols-2{grid-template-columns:1fr 1fr;}
.odc-row.cols-3{grid-template-columns:1fr 1fr 1fr;}
.odc-callout{background:var(--green-tint);border-left:4px solid var(--green);border-radius:8px;padding:18px 22px;margin:1.4rem 0;}
.odc-callout.heather{background:var(--heather-tint);border-left-color:var(--heather);}
.odc-callout.gorse{background:var(--gorse-tint);border-left-color:var(--gorse);}
.odc-callout h3{margin:0 0 .4rem;font-size:18px;color:var(--ink);}
.odc-callout :last-child{margin-bottom:0;}
/* Simple pull quote. Colour with .green / .gorse / .slate, default heather. */
.odc-quote{margin:1.6rem 0;padding:2px 0 2px 22px;border-left:3px solid var(--heather);font-size:22px;line-height:1.5;color:var(--ink);font-style:italic;}
.odc-quote cite{display:block;margin-top:.6rem;font-size:14px;font-style:normal;color:var(--slate);}
.odc-quote.green{border-left-color:var(--green);}
.odc-quote.gorse{border-left-color:var(--gorse);}
.odc-quote.slate{border-left-color:var(--slate);}

/* Quote / testimonial card.
   The big serif marks are decorative: an opening one top left and a matching
   closing one bottom right, so a quote is actually closed. They sit behind the
   text (z-index) and the card clips them, which is what keeps the closing mark
   tucked into the corner instead of colliding with the attribution. */
.odc-quotecard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px 24px;position:relative;margin:1.6rem 0;overflow:hidden;}
.odc-quotecard::before,
.odc-quotecard::after{position:absolute;font-family:Georgia,'Times New Roman',serif;font-size:66px;line-height:1;color:var(--heather);opacity:.45;pointer-events:none;z-index:0;}
.odc-quotecard::before{content:'\201C';top:0;left:16px;}
.odc-quotecard::after{content:'\201D';right:18px;bottom:-30px;opacity:.3;}
.odc-quote-text{position:relative;z-index:1;font-size:18px;line-height:1.6;color:var(--ink);font-style:italic;margin:0;}
.odc-quote-by{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-top:16px;}
.odc-quote-avatar{width:44px;height:44px;border-radius:50%;background:var(--green-tint) center/cover no-repeat;flex-shrink:0;}
.odc-quote-by .nm{font-weight:600;font-size:14px;color:var(--ink);}
.odc-quote-by .role{font-size:13px;color:var(--slate);}

/* Quote card colourways. Add one class: green / gorse / slate / dark / tinted. */
.odc-quotecard.green::before,.odc-quotecard.green::after{color:var(--green);}
.odc-quotecard.gorse::before,.odc-quotecard.gorse::after{color:var(--gorse);}
.odc-quotecard.slate::before,.odc-quotecard.slate::after{color:var(--slate);}

/* .tinted fills the card with the matching wash rather than white. */
.odc-quotecard.tinted{background:var(--heather-tint);border-color:transparent;}
.odc-quotecard.tinted.green{background:var(--green-tint);}
.odc-quotecard.tinted.gorse{background:var(--gorse-tint);}
.odc-quotecard.tinted.slate{background:var(--paper);}

/* .dark inverts the whole card, for a quote you really want to land. */
.odc-quotecard.dark{background:var(--ink);border-color:transparent;}
.odc-quotecard.dark .odc-quote-text{color:#fff;}
.odc-quotecard.dark .odc-quote-by .nm{color:#fff;}
.odc-quotecard.dark .odc-quote-by .role{color:#c9ccd0;}
.odc-quotecard.dark::before,.odc-quotecard.dark::after{color:var(--heather);opacity:.5;}
.odc-quotecard.dark.green::before,.odc-quotecard.dark.green::after{color:var(--sage);}
.odc-quotecard.dark.gorse::before,.odc-quotecard.dark.gorse::after{color:var(--gorse);}

/* .plain drops the decorative marks, for a quiet quote in a busy article. */
.odc-quotecard.plain{padding:22px 24px;}
.odc-quotecard.plain::before,.odc-quotecard.plain::after{content:none;}

/* .big for a single hero quote: larger type, centred, no avatar expected. */
.odc-quotecard.big{padding:34px 40px 32px;text-align:center;}
.odc-quotecard.big .odc-quote-text{font-size:24px;line-height:1.5;}
.odc-quotecard.big .odc-quote-by{justify-content:center;}
@media (max-width:640px){.odc-quotecard.big{padding:26px 22px;}.odc-quotecard.big .odc-quote-text{font-size:20px;}}
.odc-figure{margin:1.4rem 0;}
.odc-figure img{width:100%;border-radius:10px;display:block;}
.odc-figure figcaption{font-size:13.5px;color:var(--slate);margin-top:.5rem;}
/* .odc-figure-narrow for exhibits rather than views: book covers, engravings,
   screenshots. Full width makes a paperback cover look absurd. */
.odc-figure-narrow{max-width:420px;margin-left:auto;margin-right:auto;}
.odc-figure-narrow figcaption{text-align:center;}

/* Side-by-side text comparison (e.g. a poem's manuscript vs its printed page).
   Ported from the original Squarespace code block. On a phone the columns wrap
   so one sits below the other. .odc-marginal flags an editor's change inline. */
.odc-poem-compare{display:flex;gap:2rem;flex-wrap:wrap;margin:1.6rem 0;}
.odc-poem-col{flex:1 1 280px;}
.odc-poem-col h4{margin:0 0 .5rem;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:var(--green);}
.odc-poem-col pre{white-space:pre-wrap;font-family:inherit;font-size:.95rem;line-height:1.6;margin:0;}
.odc-marginal{color:#8a6d3b;font-style:italic;}

/* Newspaper-cutting card: a styled "olde newspaper" exhibit holding the full
   transcript of a historic cutting. The .odc-cutting-masthead (paper name +
   date) doubles as a default title for cuttings that have no scan image; when
   a scan exists, drop an <img> in just after the masthead. */
.odc-cutting{--cut-paper:#f5efe1;--cut-ink:#2c2720;--cut-edge:#d9cdae;--cut-faint:#7c6f54;max-width:46rem;margin:2.4rem auto;padding:1.7rem 1.9rem 1.4rem;background:var(--cut-paper);color:var(--cut-ink);border:1px solid var(--cut-edge);border-radius:4px;box-shadow:0 1px 0 #fffdf6 inset,0 8px 26px rgba(70,58,32,.16);background-image:radial-gradient(rgba(120,100,60,.05) 1px,transparent 1px);background-size:4px 4px;}
.odc-cutting-masthead{text-align:center;margin-bottom:1rem;}
.odc-cutting-rule{display:block;border:0;border-top:3px double #b6a377;margin:.45rem 0;}
.odc-cutting-paper{margin:.15rem 0;line-height:1.02;font-family:Georgia,'Times New Roman',serif;font-weight:800;font-size:clamp(1.7rem,5vw,2.6rem);letter-spacing:.01em;}
.odc-cutting-date{margin:.15rem 0 0;color:var(--cut-faint);font-style:italic;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;}
.odc-cutting-headline{text-align:center;margin:.1rem 0 .15rem;font-family:Georgia,serif;font-weight:700;font-size:1rem;letter-spacing:.2em;text-transform:uppercase;}
.odc-cutting-standfirst{text-align:center;margin:0 0 1rem;color:#5a4f3a;font-style:italic;font-size:.92rem;}
.odc-cutting-body{font-family:Georgia,'Times New Roman',serif;font-size:1.02rem;line-height:1.62;text-align:justify;-webkit-hyphens:auto;hyphens:auto;}
.odc-cutting-body p{margin:0 0 .8rem;text-indent:1.4em;}
.odc-cutting-body p.odc-cutting-lead{text-indent:0;}
.odc-cutting-body p.odc-cutting-lead::first-letter{float:left;font-size:3.1em;line-height:.78;font-weight:700;padding:.02em .09em 0 0;}
/* High specificity + full reset: bare <blockquote> is styled by UIkit (1.25rem
   italic) and often by Joomla content CSS, which would otherwise override a
   plain .odc-cutting-quote class. Keep this ahead of them. */
.odc-cutting blockquote.odc-cutting-quote{margin:.9rem 0;padding:.1rem 0 .1rem 1.1rem;border:0;border-left:2px solid #cbb98c;border-radius:0;background:none;color:#3b3527;font-family:Georgia,'Times New Roman',serif;font-size:.95rem;font-style:normal;line-height:1.62;quotes:none;}
.odc-cutting blockquote.odc-cutting-quote::before,.odc-cutting blockquote.odc-cutting-quote::after{content:none;}
.odc-cutting-foot{margin:1rem 0 0;padding-top:.6rem;border-top:1px solid var(--cut-edge);font-size:.8rem;font-style:italic;color:var(--cut-faint);}
.odc-cutting-cap{margin:.7rem 0 0;text-align:center;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#9a8b68;}
@media(max-width:560px){.odc-cutting{padding:1.2rem 1.1rem;}.odc-cutting-body{text-align:left;}}

/* Responsive video embed. Wrap the iframe in this: a raw iframe keeps whatever
   width/height the provider gave it and breaks out of the column on a phone.
   Put it inside an .odc-figure if it needs a caption.
   Always embed from youtube-nocookie.com, as the listing view already does:
   the ordinary youtube.com player sets third-party cookies on page load, before
   anyone presses play, which would undo the site's no-tracking position. */
.odc-video{position:relative;width:100%;aspect-ratio:16/9;margin:0;border-radius:10px;overflow:hidden;background:#000;}
.odc-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.odc-video.portrait{aspect-ratio:9/16;max-width:380px;margin-left:auto;margin-right:auto;}
.odc-figure > .odc-video{margin-bottom:0;}
.odc-imgtext{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin:1.6rem 0;}
.odc-imgtext img{width:100%;border-radius:10px;}
.odc-imgtext.flip .odc-media{order:2;}
.odc-btn{display:inline-flex;align-items:center;gap:7px;font-weight:600;border-radius:8px;font-size:16px;padding:11px 22px;background:var(--green);color:#fff !important;text-decoration:none;}
.odc-btn:hover{background:#3c5435;color:#fff !important;}
.odc-btn.heather{background:var(--heather);}
.odc-btn.heather:hover{background:var(--heather-hover);}
.odc-btn.gorse{background:var(--gorse);color:#5a3d08 !important;}
.odc-btn.gorse:hover{background:var(--gorse);filter:brightness(.95);color:#5a3d08 !important;}

/* Gorse accents — use sparingly (a featured flag, one standout moment) */
.odc-badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 11px;border-radius:20px;background:var(--gorse);color:#5a3d08;}
.odc-tag{display:inline-block;font-size:12px;font-weight:600;padding:3px 11px;border-radius:20px;background:var(--heather-tint);color:var(--heather-deep);}
.odc-tag.gorse{background:var(--gorse-tint);color:var(--gorse-deep);}

/* Content card, with an optional .featured (gorse) treatment */
.odc-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;display:block;color:inherit;}
.odc-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.09);}
.odc-card.static,.odc-card.static:hover{transform:none;box-shadow:none;transition:none;}
.odc-card.featured{border:1px solid var(--gorse);}
.odc-card-img{height:170px;background:var(--green-tint) center/cover no-repeat;position:relative;}
.odc-card-img .odc-badge{position:absolute;top:10px;left:10px;}
.odc-card-bd{padding:14px 16px 16px;}
.odc-card-bd h3{margin:0 0 4px;font-size:17px;color:var(--green);}
.odc-card-bd p{margin:0;font-size:14px;color:var(--slate);line-height:1.55;}
/* Soft tinted card backgrounds, for sectioning text on the info pages. Pair with
   .static to switch off the hover lift. Headings inside stay green (rule above). */
.odc-card.tint-green{background:var(--green-tint);border-color:#d3e0cd;}
.odc-card.tint-heather{background:var(--heather-tint);border-color:#e6d3e1;}
.odc-card.tint-gorse{background:var(--gorse-tint);border-color:#eddcae;}
/* Roomier padding for text-led panels. */
.odc-card-bd.roomy{padding:24px 28px;}
.odc-card-bd.roomy p{font-size:15px;}
.odc-card-bd.roomy p + p{margin-top:.9rem;}
/* In article copy, standalone cards clear the text above and below so they never
   butt against a paragraph. Inside a row the grid gap handles spacing instead. */
.odt-main .odc-card{margin:1.5rem 0;}
.odt-main .odc-row>.odc-card{margin:0;}
/* "Follow us" social card: brand icons in a row, to drop into an article or a
   static page. Full width by default (label left, icons right); add .center to
   stack and centre it inside a section, and a tint- class for a soft background. */
.odc-social{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin:1.5rem 0;}
.odc-social-label{margin:0;font-weight:600;font-size:16px;color:var(--ink);}
.odc-social-label .odc-social-sub{display:block;font-weight:400;font-size:13px;color:var(--slate);margin-top:2px;}
.odc-social-links{display:flex;flex-wrap:wrap;gap:12px;margin-left:auto;}
.odc-social-links a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--green-tint);color:var(--green);font-size:22px;text-decoration:none;transition:transform .2s ease,background .2s ease,color .2s ease;}
/* Hover states scoped to .odc-social so they outweigh the tinted-card white icon
   background below (equal specificity would otherwise keep the white background
   and hide the white icon). A solid green fallback covers any network without a
   brand class. */
.odc-social .odc-social-links a:hover{background:var(--green);color:#fff;transform:translateY(-2px);}
.odc-social .odc-social-links a.fb:hover{background:#1877f2;}
.odc-social .odc-social-links a.ig:hover{background:#d6249f;}
.odc-social .odc-social-links a.th:hover{background:#000;}
.odc-social .odc-social-links a.bs:hover{background:#1185fe;}
.odc-social.center{flex-direction:column;align-items:center;text-align:center;}
.odc-social.center .odc-social-links{margin-left:0;}
.odc-social.tint-green{background:var(--green-tint);border-color:#d3e0cd;}
.odc-social.tint-heather{background:var(--heather-tint);border-color:#e6d3e1;}
.odc-social.tint-gorse{background:var(--gorse-tint);border-color:#eddcae;}
.odc-social.tint-green .odc-social-links a:not(:hover),.odc-social.tint-heather .odc-social-links a:not(:hover),.odc-social.tint-gorse .odc-social-links a:not(:hover){background:#fff;}
@media(max-width:560px){.odc-social{flex-direction:column;align-items:flex-start;}.odc-social.center{align-items:center;}.odc-social-links{margin-left:0;}}
/* Coloured dividers for breaking up an article. odc-rule is a slim three-colour
   line (heather > gorse > green); odc-divider is the same broken by the round
   logo in the middle, the colours meeting green at the centre and fading out. */
.odc-rule{height:3px;border:0;border-radius:2px;margin:2.4rem 0;background:linear-gradient(90deg,var(--heather),var(--gorse),var(--green));}
.odc-divider{display:flex;align-items:center;gap:18px;margin:2.4rem 0;}
.odc-divider::before,.odc-divider::after{content:'';flex:1;height:3px;border-radius:2px;}
.odc-divider::before{background:linear-gradient(90deg,transparent,var(--heather),var(--gorse),var(--green));}
.odc-divider::after{background:linear-gradient(90deg,var(--green),var(--gorse),var(--heather),transparent);}
.odc-divider img{flex:0 0 auto;width:46px;height:auto;display:block;}
/* Latest-articles story cards: image tiles, caption slides up on hover */
/* Latest Stories module: a heading row above the cards, with an optional link
   off to the full list. The cards themselves are the odc-story design below. */
.od-stories-mod{margin:2rem 0;}
.od-stories-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.od-stories-head h2{margin:0;}
.od-stories-more{font-size:15px;font-weight:600;color:var(--green);text-decoration:none;white-space:nowrap;}
.od-stories-more:hover{color:var(--heather-deep);text-decoration:underline;}
/* Flick back through older stories in place. Every card stays in the DOM and is
   hidden with [hidden], so the module still shows the latest few but the rest
   remain crawlable, same approach as the Places index. */
.od-stories-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.1rem;}
.od-stories-arrow{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--green);font-size:16px;line-height:1;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.od-stories-arrow:hover:not(:disabled){background:var(--green);border-color:var(--green);color:#fff;}
.od-stories-arrow:disabled{opacity:.35;cursor:default;}
.od-stories-dots{display:flex;gap:.4rem;}
.od-stories-dot{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--line);cursor:pointer;transition:background .15s,transform .15s;}
.od-stories-dot:hover{background:var(--sage);}
.od-stories-dot.is-on{background:var(--green);transform:scale(1.25);}
.odc-story[hidden]{display:none;}
/* The "search all articles" tile that closes the run: no photo, a green field
   with a search glyph, styled to sit in the grid like any other odc-story. */
.odc-story--search{background:var(--green);display:flex;align-items:center;justify-content:center;text-align:center;}
.odc-story-search-inner{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:22px;}
.odc-story-search-icon{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s ease,color .2s ease,transform .2s ease;}
.odc-story-search-icon svg{width:26px;height:26px;}
.odc-story-search-text{font-size:18px;font-weight:600;line-height:1.3;color:#fff;max-width:11em;}
.odc-story--search:hover .odc-story-search-icon,.odc-story--search:focus-visible .odc-story-search-icon{background:#fff;color:var(--green);transform:scale(1.06);}
@media(prefers-reduced-motion:reduce){.odc-story-search-icon{transition:none;}}
.odc-stories{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:1.6rem 0;}
.odc-story{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/5;color:#fff;text-decoration:none;background:var(--green-tint);}
.odc-story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.odc-story:hover img,.odc-story:focus-visible img{transform:scale(1.05);}
.odc-story-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 16px 18px;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.35) 55%,rgba(0,0,0,0));}
.odc-story-over{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--gorse);color:#33301c;padding:3px 9px;border-radius:20px;margin-bottom:8px;}
.odc-story-cap h3{margin:0;font-size:19px;line-height:1.25;color:#fff;}
.odc-story-cap p{margin:6px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.9);max-height:0;opacity:0;overflow:hidden;transform:translateY(6px);transition:max-height .4s ease,opacity .3s ease,transform .4s ease;}
.odc-story:hover .odc-story-cap p,.odc-story:focus-visible .odc-story-cap p{max-height:6em;opacity:1;transform:translateY(0);}
@media(hover:none){.odc-story-cap p{max-height:6em;opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.odc-story img,.odc-story-cap p{transition:none;}.odc-story-cap p{max-height:6em;opacity:1;transform:none;}}
@media(max-width:820px){.odc-stories{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.odc-stories{grid-template-columns:1fr;}}
@media(max-width:700px){
  .odc-row.cols-2,.odc-row.cols-3,.odc-imgtext{grid-template-columns:1fr;}
  .odc-imgtext.flip .odc-media{order:0;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}

/* ============================================================
   ACCESSIBILITY FOUNDATIONS
   ============================================================ */
/* Clear, on-brand keyboard focus ring everywhere. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible,.od-tabbtn:focus-visible{
  outline:3px solid var(--heather);outline-offset:2px;border-radius:3px;
}
/* Skip link: off-screen until focused. */
.odt-skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--green);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none;}
.odt-skip:focus{left:8px;}

/* ============================================================
   READING COMFORT PANEL
   Preference classes live on <html> (applied pre-paint by the head
   script): rc-text-1/2 (larger), rc-dark, rc-font, rc-motion,
   rc-links, rc-guide.
   ============================================================ */
.odt-rc-btn{position:fixed;left:20px;bottom:20px;z-index:90;width:52px;height:52px;border:0;border-radius:50%;background:var(--heather);color:#fff;font-size:26px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.22);transition:background .2s ease,transform .2s ease;}
.odt-rc-btn:hover{background:var(--heather-hover);transform:translateY(-2px);}
.odt-rc-btn i{line-height:1;}
.odt-rc-panel{position:fixed;left:20px;bottom:84px;z-index:95;width:300px;max-width:calc(100vw - 40px);max-height:calc(100vh - 120px);overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 46px rgba(0,0,0,.22);padding:18px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease,visibility .22s;}
.odt-rc-panel.open{opacity:1;visibility:visible;transform:translateY(0);}
.odt-rc-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 4px;}
.odt-rc-head h2{font-family:var(--od-font);font-size:17px;font-weight:700;color:var(--ink);margin:0;}
.odt-rc-close{background:none;border:0;color:var(--slate);font-size:20px;cursor:pointer;display:inline-flex;padding:4px;border-radius:6px;}
.odt-rc-close:hover{color:var(--ink);background:var(--green-tint);}
.odt-rc-intro{font-size:12.5px;color:var(--slate);margin:0 0 14px;line-height:1.5;}
.odt-rc-group{margin:0 0 14px;}
.odt-rc-label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin:0 0 7px;}
.odt-rc-seg{display:flex;gap:6px;}
.odt-rc-seg button{flex:1;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;padding:8px 4px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--od-font);}
.odt-rc-seg button:hover{border-color:var(--heather);}
.odt-rc-seg button.is-active{background:var(--heather);border-color:var(--heather);color:#fff;}
.odt-rc-toggles{display:flex;flex-direction:column;gap:7px;margin:0 0 14px;}
.odt-rc-toggle{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 12px;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;font-family:var(--od-font);text-align:left;}
.odt-rc-toggle i{font-size:19px;color:var(--slate);flex:0 0 auto;}
.odt-rc-toggle span{flex:1;}
.odt-rc-toggle::after{content:'';width:14px;height:14px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;}
.odt-rc-toggle:hover{border-color:var(--heather);}
.odt-rc-toggle.is-on{background:var(--heather-tint);border-color:var(--heather);color:var(--heather-deep);}
.odt-rc-toggle.is-on i{color:var(--heather-deep);}
.odt-rc-toggle.is-on::after{background:var(--heather);border-color:var(--heather);box-shadow:0 0 0 3px var(--heather-tint);}
.odt-rc-reset{width:100%;border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px;font-size:13px;font-weight:600;color:var(--slate);cursor:pointer;font-family:var(--od-font);display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.odt-rc-reset:hover{color:var(--ink);border-color:var(--slate);}
.odt-rc-guide{position:fixed;left:0;right:0;height:44px;margin-top:-22px;background:rgba(185,139,176,.16);border-top:2px solid rgba(107,71,99,.35);border-bottom:2px solid rgba(107,71,99,.35);pointer-events:none;z-index:80;}
.odt-rc-voicegroup{margin:0 0 14px;}
.odt-rc-voice{width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;padding:8px 10px;font-size:13px;font-family:var(--od-font);cursor:pointer;}
.odt-rc-voice:hover{border-color:var(--heather);}
.rc-dark .odt-rc-voice{background:#26261d;color:#e9e7df;border-color:#3a3a2f;}

/* ---- Comfort effects (classes on <html>) ---- */
html.rc-text-1{zoom:1.12;}
html.rc-text-2{zoom:1.25;}

.rc-font *{font-family:'Atkinson Hyperlegible',var(--od-font) !important;}
.rc-font .ti,.rc-font [class*="ti-"]{font-family:'tabler-icons' !important;}

.rc-motion *,.rc-motion *::before,.rc-motion *::after{animation-duration:.001ms !important;animation-delay:0ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
.rc-motion [uk-scrollspy]>*{opacity:1 !important;transform:none !important;}

.rc-links a:not(.od-btn):not(.odc-btn):not(.odt-cat):not(.uk-button):not(.odt-rc-btn):not(.odt-rc-toggle):not(.odt-logo){text-decoration:underline !important;text-underline-offset:2px;}

/* Grayscale: mute all colour across the page */
html.rc-gray{filter:grayscale(100%);}

/* More spacing (letter/word/line) for easier reading */
.rc-spacing p,.rc-spacing li,.rc-spacing dd,.rc-spacing blockquote,.rc-spacing .odt-main,.rc-spacing .od-tile-text,.rc-spacing .odc-lead{letter-spacing:.04em !important;word-spacing:.14em !important;}
.rc-spacing p,.rc-spacing li,.rc-spacing dd,.rc-spacing blockquote{line-height:1.9 !important;}

/* Bigger cursor (an SVG pointer, no image file needed) */
.rc-cursor,.rc-cursor *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='44'%20viewBox='0%200%2044%2044'%3E%3Cpath%20d='M8%204%20L8%2036%20L17%2028%20L23%2040%20L29%2037%20L23%2026%20L34%2026%20Z'%20fill='black'%20stroke='white'%20stroke-width='2'/%3E%3C/svg%3E") 6 4,auto !important;}

/* Read aloud: hint that text blocks are clickable to be spoken */
.rc-tts p,.rc-tts h1,.rc-tts h2,.rc-tts h3,.rc-tts h4,.rc-tts li,.rc-tts blockquote,.rc-tts figcaption,.rc-tts .od-tile-text{cursor:pointer;}
.rc-tts p:hover,.rc-tts h1:hover,.rc-tts h2:hover,.rc-tts h3:hover,.rc-tts h4:hover,.rc-tts li:hover,.rc-tts blockquote:hover{outline:2px dashed var(--heather);outline-offset:3px;border-radius:3px;}
.odt-rc-speaking{background:var(--heather-tint) !important;box-shadow:0 0 0 2px var(--heather);}

/* ---- Dark mode: re-map the theme variables, then patch white surfaces ---- */
.rc-dark{
  --ink:#e9e7df;--slate:#b7b5ab;--line:#3a3a2f;--paper:#141410;--green-tint:#23241b;
  --heather-tint:#2b2231;--gorse-tint:#2b2716;
  --od-ink:#e9e7df;--od-muted:#b7b5ab;--od-line:#3a3a2f;--od-green-l:#23241b;--od-green-d:#b7cf8f;--od-stone:#1e1e17;
}
.rc-dark body{background:#141410;color:#e9e7df;}
.rc-dark .odt-navwrap{background:#1c1c15;border-color:#33332a;box-shadow:0 3px 12px rgba(0,0,0,.4);}
.rc-dark .odt-util{background:#181811;}
.rc-dark .odt-searchband{background:#20201a;border-color:#33332a;}
.rc-dark .odt-field{background:#141410;border-color:#44443a;}
.rc-dark .odt-field input,.rc-dark .odt-field input::placeholder{color:#cdcbc1;}
.rc-dark .odt-main{background:#141410;}
.rc-dark .odt-mainmenu>ul>li>a{color:#cdcbc1;}
.rc-dark .odt-mainmenu>ul>li>a:hover{color:#fff;}
.rc-dark .odt-mainmenu ul ul{background:#20201a;border-color:#33332a;}
.rc-dark .odt-util a{color:#cdcbc1;}
.rc-dark h1,.rc-dark h2,.rc-dark h3,.rc-dark h4{color:#f2efe8;}
.rc-dark .odt-main h2{color:#eae7de;}
.rc-dark .odt-cat,.rc-dark .odc-card,.rc-dark .od-tile,.rc-dark .od-card,.rc-dark .od-kw,.rc-dark .od-kw-card,.rc-dark .od-catcard,.rc-dark .od-catcard-body,.rc-dark .od-kw-card-body,.rc-dark .od-contact-form,.rc-dark .od-input,.rc-dark .od-select,.rc-dark .od-pagination .page-link,.rc-dark .od-slide-stage,.rc-dark .odt-panel,.rc-dark .od-map-controls,.rc-dark .od-event,.rc-dark .od-faq details{background:#20201a;border-color:#3a3a2f;color:#e9e7df;}
.rc-dark .od-ukss .uk-slideshow-items > li{background:#22221a;}
.rc-dark .odt-rc-panel{background:#20201a;border-color:#3a3a2f;}
.rc-dark .odt-rc-seg button,.rc-dark .odt-rc-toggle,.rc-dark .odt-rc-reset{background:#26261d;color:#e9e7df;}