/* ============================================================
   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;}

.odt-sp{flex:1;}
.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:3px 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{position:relative;display:block;padding:8px 18px;font-size:14px;color:var(--ink);transition:background-color .28s ease,color .28s ease,padding-left .28s ease;}
.odt-mainmenu ul ul li a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--heather);transform:scaleY(0);transform-origin:top;transition:transform .28s ease;}
.odt-mainmenu ul ul li a:hover{background:var(--heather-tint);color:var(--heather-deep);padding-left:26px;}
.odt-mainmenu ul ul li a:hover::before{transform:scaleY(1);}
/* "Magic line": hand-drawn crayon underline (drawn by organic-nav.js, see
   .odt-magic-line in organic-skin.css) that slides to the hovered top-level
   item and rests under the current page's item. Progressive enhancement;
   without JS the static border-bottom below still marks the page. */
/* 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:transparent;}
.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.
   .odc-card excluded too (2026-09-19: the Experimen Tor article was the first
   article ever to use an .odc-card as a link - everywhere else .odc-card lives
   outside .com-content-article__body, so this rule underlining its whole
   heading+paragraph never showed up until now). */
.com-content-article__body a:not(.odc-btn):not(.odc-card){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):not(.odc-card):hover,.com-content-article__body a:not(.odc-btn):not(.odc-card):focus{color:var(--heather-deep);text-decoration-color:var(--heather);}
.com-content-article__body a.odc-card{text-decoration:none;}

/* 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/.odt-section/.odt-intro/.odt-cats/.odt-cta (the old homepage's
   hero band, section headers, category grid and CTA band) removed 2026-09-18
   simplify pass - confirmed zero references in any template or component
   markup (the real hero is the "hero" module position rendered via
   jdoc:include, styled by the module itself, not these classes). The base
   .odt-btn rule below is kept - error.php still uses it. */
.odt-btn{display:inline-flex;align-items:center;gap:7px;font-weight:600;border-radius:8px;font-size:16px;padding:12px 24px;}

/* 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;}

@media(max-width:900px){
  .odt-stories{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .odt-stories{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-foot-cta{display:block;}
}
@media(max-width:560px){
  .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:linear-gradient(90deg,var(--heather),var(--gorse),var(--green)) top/100% 3px no-repeat,linear-gradient(120deg,var(--heather-tint),#fff 62%);border:1px solid var(--line);border-top-color:transparent;border-radius:14px;padding:26px 28px 24px;position:relative;margin:1.6rem 0;overflow:hidden;box-shadow:0 1px 2px rgba(40,44,30,.04),0 10px 28px -12px rgba(74,103,65,.16);}
.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;}}

/* ---- Reproduced letter / document -------------------------------------
   Sibling to .odc-cutting. Sets a reproduced personal document (e.g. the
   cover letter that started Our Dartmoor) visibly APART from the author's
   own article prose, without the aged-newsprint cues of a cutting. A warm
   paper card, a green letterhead spine, a serif body so it reads as a
   letter rather than as the surrounding sans-serif commentary.
   Structure:
     <section class="odc-letter" aria-label="...">
       <div class="odc-letter-head">
         <p class="odc-letter-eyebrow">...</p>
         <p class="odc-letter-meta">...</p>
       </div>
       <div class="odc-letter-body">
         <p class="odc-letter-lead">opening line</p>
         <p>...</p>
         <p class="odc-letter-sign">Paul</p>          (optional signature)
         <p class="odc-letter-foot">*disclaimer ...</p> (optional footnote)
       </div>
     </section>
   Kept a light "paper" object in dark mode too, exactly like .odc-cutting. */
.odc-letter{--let-paper:#fcfbf6;--let-ink:#393d34;--let-edge:#e6e6dc;--let-faint:#8a8570;max-width:44rem;margin:2.4rem auto;padding:2rem 2.2rem 1.6rem;background:var(--let-paper);color:var(--let-ink);border:1px solid var(--let-edge);border-left:4px solid var(--green);border-radius:5px;box-shadow:0 1px 0 #fff inset,0 10px 30px rgba(74,103,65,.12);}
.odc-letter-head{margin:0 0 1.4rem;padding-bottom:.8rem;border-bottom:1px solid var(--let-edge);}
.odc-letter-eyebrow{margin:0;font-family:var(--od-font);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green);}
.odc-letter-meta{margin:.28rem 0 0;font-family:var(--od-font);font-size:.85rem;font-style:italic;color:var(--let-faint);}
.odc-letter-body{font-family:Georgia,'Times New Roman',serif;font-size:1.04rem;line-height:1.72;}
.odc-letter-body p{margin:0 0 1rem;}
.odc-letter-lead{font-size:1.3rem;line-height:1.45;color:var(--green);font-style:italic;margin:0 0 1.3rem;}
.odc-letter-sign{margin:1.6rem 0 .2rem;font-family:var(--od-display);font-weight:700;font-size:1.7rem;color:var(--ink);line-height:1;}
.odc-letter-foot{margin:1.2rem 0 0;padding-top:.7rem;border-top:1px solid var(--let-edge);font-size:.82rem;font-style:italic;color:var(--let-faint);}
@media(max-width:560px){.odc-letter{padding:1.4rem 1.3rem;}}
/* Redaction bar. The hidden text is NOT in the markup (that would leave it
   scrapeable); put the real words in the aria-label only if it is safe to
   expose to a screen reader, otherwise leave it generic. Fill the span with
   block glyphs sized to roughly the length you are covering. */
.odc-redact{background:#2b2620;color:#2b2620;border-radius:2px;padding:0 .12em;letter-spacing:-.02em;-webkit-user-select:none;user-select:none;box-decoration-break:clone;-webkit-box-decoration-break:clone;}

/* ---- Folklore / Legend article helpers (Myths & Legends pages) --------
   Small additions on top of the .odc-* article kit, used by the long-form
   legend articles. Built on the site colour variables so the pages sit in
   the house style.
     .od-legend-facts  = a compact 'the story at a glance' strip (a <dl>).
     .od-legend-draft  = a clearly-marked EDITABLE zone for Paul to fill in
                         over time; the dashed edge reads as a placeholder,
                         not finished copy, so a half-written page still looks
                         deliberate. Delete the class (keep the content) when
                         a section is finished and you want it to read as prose.
     .od-legend-sources = the 'Sources and further reading' box that closes
                          every legend page. */
.od-legend-facts{display:flex;flex-wrap:wrap;gap:12px 30px;margin:1.5rem 0;padding:14px 20px;background:var(--paper,#f7f5ef);border:1px solid var(--line,#e4e2d9);border-radius:10px;}
.od-legend-facts > div{min-width:130px;}
.od-legend-facts dt{margin:0;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--green,#4a6741);}
.od-legend-facts dd{margin:.18rem 0 0;font-size:15px;color:var(--ink,#2b2b2b);}
.od-legend-draft{margin:1.7rem 0;padding:18px 22px;border:2px dashed var(--heather,#8a7a9e);border-radius:10px;background:var(--heather-tint,#f2eef6);}
.od-legend-draft-tag{display:inline-block;margin-bottom:.5rem;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--heather-deep,#5a4a6e);}
.od-legend-draft :last-child{margin-bottom:0;}
.od-legend-sources{margin:2rem 0 0;padding:18px 24px;background:var(--green-tint,#eef2ea);border-radius:10px;}
.od-legend-sources h3{margin:0 0 .5rem;font-size:18px;color:var(--ink,#2b2b2b);}
.od-legend-sources ul{margin:0;padding-left:1.2rem;}
.od-legend-sources li{margin:.4rem 0;line-height:1.5;}

/* 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;}

/* Smooth in-page anchor scrolling (e.g. the All Dartmoor Maps card links), unless
   the visitor has asked to reduce motion via the OS or the site toggle. */
@media (prefers-reduced-motion: no-preference){html:not(.rc-motion){scroll-behavior:smooth;}}

.rc-links a:not(.od-btn):not(.odc-btn):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-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 h1,.rc-dark h2,.rc-dark h3,.rc-dark h4{color:#f2efe8;}
.rc-dark .odt-main h2{color:#eae7de;}
.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;}

/* Share bar - single source of truth for BOTH the com_ourdartmoor listing
   template and the plg_content_odshare article plugin. Tracker-free share-intent
   links, copy-link + native share sheet. The component's site.css defines
   --od-green* (used on listing pages); on article pages those are absent, so we
   fall back to the template palette (--sage/--green/--green-tint) - visually the
   same family, and no regression on listings. */
.od-share { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1.6rem; }
.od-share-article { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line, #E2E4E1); }
.od-share-label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--od-green-d, var(--green)); margin-right: .15rem; }
.od-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 2.15rem; height: 2.15rem; padding: 0 .6rem; border-radius: .45rem; border: 1px solid var(--od-green, var(--sage)); background: #fff; color: var(--od-green-d, var(--green)); font-weight: 600; font-size: .9rem; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.od-share-btn:hover { background: var(--od-green-l, var(--green-tint)); color: var(--od-green-d, var(--green)); }
.od-share-btn i { font-size: 1.02rem; }
.od-share-native { background: var(--od-green, var(--sage)); color: #fff; border-color: var(--od-green, var(--sage)); }
.od-share-native:hover { background: var(--od-green-d, var(--green)); color: #fff; }
.od-share-copy.is-copied { background: var(--od-green, var(--sage)); color: #fff; border-color: var(--od-green, var(--sage)); }