/* ============================================================
   Our Dartmoor — organic/woodcut redesign, Phase 1 (nav, search, footer)
   Loaded AFTER template.css. Restyles the live nav/search/footer markup
   in place — no new HTML classes, so nothing here can silently break
   the real menu module, search autocomplete, or accessibility panel.
   Source mock: organic-trial/redesign-mockup.html (2026-09-16), confirmed
   baseline. Sensible-mode toggle lets a visitor drop back to a plain,
   calm nav (own accessibility feature, separate from Reading Comfort).
   ============================================================ */

:root{
  /* Pastel accents for the rainbow strip — matched to redesign-mockup.html's
     own values (the existing --*-tint vars are too pale to read as a strip). */
  --p-heather:#c7aecd; --p-gorse:#f0d69a; --p-moor:#aec089; --p-rust:#dba28f;
  --rainbow-organic:linear-gradient(90deg,var(--p-heather),var(--p-gorse),var(--p-moor),var(--p-rust));
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --follow:cubic-bezier(.30,2.0,.45,1);
  --od-serif:'Cinzel',serif;              /* section headings — Phase 2 use */
  --od-lead:'EB Garamond',Georgia,serif;  /* lead text / pull-quotes — Phase 2 use */
  /* Footer photo default — same image the live original template uses
     (confirmed via ourdartmoor.co.uk's own computed style). Set here (shipped
     by the deploy zip) rather than in user.css (hand-maintained on the server,
     never overwritten), so this template works out of the box with no manual
     server edit. user.css can still override this var later if you ever want
     a different footer photo — it loads after this file, so it wins. */
  --odt-footer-img: url('/images/ourdartmoor/hero-photos/view-to-oke-tor-dartmoor-sunrise.webp');
}

/* New self-hosted faces (Phase 2 will use these on listing/section content;
   declared now so both phases share one @font-face block). */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/cinzel-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/eb-garamond-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/eb-garamond-latin-400-italic.woff2') format('woff2');}

/* ---- nav: rainbow top edge + granite texture background (pale wash over a
   real granite photo, not a flat white bar — this replaces template.css's
   plain #fff background). Restored 2026-09-17: this rule went missing from
   an earlier edit pass and was the reason the texture never showed. ---- */
.odt-navwrap{
  position:sticky;
  background:
    linear-gradient(rgba(247,244,237,.82),rgba(242,238,230,.88)),
    url('../images/textures/granite-band.webp') center/cover no-repeat;
  /* Eased back from #7a7669 - too dark once seen in context (Paul,
     2026-09-18: "please make the grey line below the navigation not so
     dark"), then thinned from 2px to 1px ("Line needs to be thinner"). */
  border-bottom:1px solid #a29c8c;
}
.odt-navwrap::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--rainbow-organic);z-index:1;}

/* ---- nav: bounce on hover (top-level links + social icons) ----
   Hover colour is --green (not --heather-deep) to match the mock's final
   pick (redesign-mockup.html line 106 overrides an earlier heather-deep try) —
   it also keeps hover visually distinct from the current-page indicator,
   which already owns heather-deep+heather underline (template.css:139). */
.odt-mainmenu>ul>li>a{position:relative;z-index:2;transition:color .2s,transform .24s var(--bounce),border-color .2s;}
.odt-mainmenu>ul>li>a:hover{transform:translateY(-3px) scale(1.08);color:var(--green);}
.odt-nav-social{position:relative;}
.odt-nav-social a{position:relative;z-index:2;transition:color .2s,transform .24s var(--bounce);}
.odt-nav-social a:hover{transform:translateY(-3px) scale(1.14) rotate(-4deg);}
/* Paul's own hand-drawn social icons (images/social/*-mine.svg), inlined by index.php,
   with fill:currentColor baked in so `color` below tints them. Heather to match the
   nav's own colour language (not --green, which template.css already spends on the
   top-level-link hover state above). */
.odt-nav-social a.odt-soc-mine{color:var(--heather-deep);}
.odt-nav-social a.odt-soc-mine:hover{color:var(--heather);}
.odt-nav-social a.odt-soc-mine svg{display:block;width:36px;height:36px;}
.odt-nav-social a[aria-label="Instagram"].odt-soc-mine svg{width:42px;height:42px;}
.odt-nav-social a[aria-label="Threads"].odt-soc-mine svg{width:30px;height:30px;}
/* Footer icons stay plain white, not heather (Paul, redesign-mockup.html session 8:
   "just make the icons white and move on mouseover - leave out the rainbow effect
   for those please") - only the nav copy gets colour. Same bounce lift on hover though. */
.odt-foot-social a.odt-soc-mine{color:#fff;position:relative;z-index:2;transition:transform .24s var(--bounce);}
.odt-foot-social a.odt-soc-mine:hover{color:#fff;transform:translateY(-3px) scale(1.14) rotate(-4deg);}
.odt-foot-social a.odt-soc-mine svg{display:block;width:26px;height:26px;}
/* Footer link hover picks up Gorse instead of template.css's plain white-on-white. */
.odt-footer a:hover{color:var(--p-gorse);}

/* ---- "Loopy Scribble" hover highlight (ported from redesign-mockup.html /
   granite-carved-newnav.html) — a hand-drawn wandering crayon-scribble trail
   drawn behind whichever link/icon is hovered, in the site's own 4 pastel
   accents. Drawn/positioned by organic-nav.js; this is just the paint layer. ---- */
.blob{position:absolute;top:0;left:0;height:0;width:0;opacity:0;z-index:1;pointer-events:none;
  overflow:visible;
  transition:left .4s var(--follow),width .4s var(--follow),top .4s var(--follow),height .4s var(--follow),opacity .15s;}
.blob path{fill:none;stroke-linecap:round;stroke-linejoin:round;}
body.sensible-on .blob{display:none;}

/* Hand-drawn magic-line: a single-colour crayon-scribble underline (drawn by
   organic-nav.js with the same wander-path mechanic as the hover scribble
   above, just one colour/pass and underline-thin) that rests under the
   current page's nav item and slides to whichever item is hovered/focused —
   replaces the old flat 3px bar (Paul, 2026-09-18: "an obvious one colour
   crayon line"). Position/size are set inline per-move; only paint/transition
   styling lives here. Sits at z-index:2 so it's not masked by the mainmenu
   link's own z-index:2 stacking (position:relative on this element only
   matters for that stacking, not layout — left/top below are already
   absolute px from organic-nav.js). */
.odt-magic-line{position:absolute;top:0;left:0;height:0;width:0;opacity:0;z-index:2;pointer-events:none;
  transition:left .32s var(--follow),top .32s var(--follow),opacity .2s ease;}
.odt-magic-line path{fill:none;stroke-linecap:round;stroke-linejoin:round;}
body.sensible-on .odt-magic-line{display:none;}

/* ---- nav: dropdown items bounce in, rainbow top edge, staggered pop-in
   (matches the mock's @keyframes pop; --i is set per item by organic-nav.js
   so items cascade in one after another instead of all fading at once). ---- */
/* border-top:0 (was a flat heather border) — with overflow:hidden on this box,
   a ::before positioned at top:-4px sat OUTSIDE the box and got clipped, so
   the rainbow never showed, only the flat heather border underneath it. The
   fix moves the strip to top:0, inside the box. */
/* Dropdown panels sit at a small random jaunty angle (--dd-rot, set once per
   dropdown by organic-nav.js) — same "propped, hand-placed" feel as the torn-
   paper card frames elsewhere in the redesign. Combined with template.css's
   own open/close transform (translateY), not replacing it. */
.odt-mainmenu ul ul{border-top:0;position:absolute;overflow:hidden;transform-origin:top left;
  transform:translateY(6px) rotate(var(--dd-rot,0deg));}
.odt-mainmenu li:hover>ul{transform:translateY(0) rotate(var(--dd-rot,0deg));}
.odt-mainmenu ul ul::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--rainbow-organic);z-index:2;}

/* Dropdown items: replace the site's original single-column hover (left
   accent bar + growing left padding, template.css:142-145) with the mock's
   jaunty scale/translate/rotate + randomised highlight colour — the two were
   fighting, and the padding-left GROWING on hover was a layout change (not
   just paint), which is what broke the row height/wrap on longer items
   inside the narrower mega-grid columns. --ir/--ix/--iy/--hl/--hlbg are set
   per item by organic-nav.js. */
.odt-mainmenu ul ul li a{padding-left:18px;transform-origin:left center;
  transition:background-color .22s var(--bounce),color .22s,transform .22s var(--bounce);}
.odt-mainmenu ul ul li a::before{display:none;}
.odt-mainmenu ul ul li a:hover{padding-left:18px;background:var(--hlbg,var(--heather-tint));color:var(--hl,var(--heather-deep));
  transform:scale(1.08) translate(var(--ix,4px),var(--iy,-2px)) rotate(var(--ir,0deg));}
@keyframes odt-pop{from{opacity:0;transform:translateY(8px) scale(.9);}to{opacity:1;transform:none;}}
.odt-mainmenu li.parent:hover>ul>li>a{animation:odt-pop .3s var(--bounce) backwards;animation-delay:calc(var(--i,0) * .03s);}
body.sensible-on .odt-mainmenu li.parent:hover>ul>li>a{animation:none;}
body.sensible-on .odt-mainmenu ul ul li a:hover{transform:none;padding-left:18px;}

/* Self-detecting mega layout: any dropdown with 6+ items (Maps, Directory,
   About all currently qualify) becomes a 3-column grid instead of a long
   single list. No admin config needed — adding/removing category menu items
   just works. */
.odt-mainmenu li.parent:has(>ul>li:nth-child(6))>ul{
  display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));
  min-width:520px;max-width:calc(100vw - 24px);column-gap:4px;row-gap:0;
}
/* The "Browse the directory" header (::after, grid order:-1 so it paints
   first regardless of DOM position) is specific to the Directory dropdown's
   own content — scoped to its menu item id (item-370), NOT to every mega-grid
   dropdown, else Maps/About (also 6+ items) wrongly inherit a header that
   doesn't describe what they link to (Paul, 2026-09-19). */
.odt-mainmenu li.item-370:has(>ul>li:nth-child(6))>ul::after{
  content:'Browse the directory';grid-column:1/-1;order:-1;
  font:700 .66rem/1 var(--od-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--heather-deep);margin:2px 6px 6px;padding-top:6px;
}

/* ---- search band: hand-cut corners (a full pill read as too "AI generic";
   these slightly uneven radii instead match the site's torn-paper/hand-drawn
   language) + a jaunty solid-Gorse button in the display font (Paul's steer
   2026-09-17: a solid block colour reads calmer than the rainbow gradient
   here — the rainbow scribble already carries the "many colours" idea via
   the field's own hover/focus highlight, wired in organic-nav.js). ---- */
/* Granite grey instead of template.css's pale sage --green-tint (Paul's steer
   2026-09-18), matching the nav's own granite texture above. A faint stone
   texture sits under the wash too (Paul, 2026-09-18: "I kind of like the
   search bar having a texture as well... it can be a really compressed
   image as it's barely noticeable") - same technique as granite-band.webp
   above: a short cropped band, resized+recompressed. Swapped to a paler
   source texture (granite-card-pale.webp, not the darker paper-granite.webp)
   and a near-white overlay wash, so this band reads distinctly LIGHTER than
   the nav above it, not the same tone (Paul, 2026-09-18: "pick another
   texture for the search bar and make the section much lighter than the
   navigation"). */
.odt-searchband{background:linear-gradient(rgba(250,249,246,.85),rgba(250,249,246,.9)),
  url('../images/textures/search-band-tex.webp') center/cover;}
/* ---- search textboxes (+ .od-select dropdowns, 2026-09-18): the buttons' own sketch-button family (ink border +
   asymmetric blob radius + shadow), turned right down - Paul, 2026-09-18:
   first asked for "slightly lighter than the buttons" (a small single-radius
   wobble, no ink border), then "the full treatment - but as toned back as
   possible on these things" once he'd seen it next to the fully-treated
   Events cards. So: same elliptical two-radius blob shape and ink border as
   .od-btn, just at a fraction of the amplitude/weight, and no rotation or
   scribble - a text field still needs to read as a field to type into, not
   a shape to click. Covers the main nav field too now (was on its own
   lighter radius from an earlier session) so every search box on the site
   reads as one family. Scoped by type=search / specific ids rather than the
   shared .od-input class, so the Contact form's name/email/message fields
   (also .od-input, not "search textboxes") are left alone. */
/* border-width whole-pixel, not e.g. 1.5px - Chromium silently snaps a
   fractional border-width to the nearest whole device pixel on native form
   controls (appearance:auto), so a half-pixel value here just renders (and
   computes) as 1px regardless of !important - confirmed via the CSSOM, not
   a cascade/specificity issue. */
/* Radius uses the SAME technique as .od-btn's blob shape, not just small
   flat corner values: the vertical (second, post-"/") radii are set bigger
   than the field's own half-height on purpose, so the browser's own
   border-radius clamping algorithm scales them back down proportionally -
   that's what turns "four mismatched corner sizes" into a proper one-piece
   hand-drawn curve instead of a rounded rectangle with uneven corners
   (which is what the earlier small-flat-values version actually looked
   like - Paul, 2026-09-18: "properly hand drawn... like the search button").
   Toned down from the button's own 255/225/15px by using a gentler size,
   not a gentler TECHNIQUE - a text field a little less wild, not a
   different shape language. */
/* Also covers .od-select now (Paul, 2026-09-18: "added to the dropdowns as
   well") - same box model as .od-input in site.css (shared rule, same
   height), so the same formula fits without adjustment.
   Border-radius itself is set directly as an inline style by organic-nav.js
   (randomised per element, then swapped again on focus/blur) rather than
   through var() here - an 8-argument border-radius shorthand built from
   eight separate var(...,fallback) calls did not reliably resolve to the
   custom properties' actual values in testing (kept computing to the
   fallback numbers even with the custom properties confirmed set on the
   element) - so this rule only supplies the base shape for anyone with JS
   off; everything else (border colour/width/shadow) still lives here. */
.odt-field,input[type="search"],#od-search-input,#od-keyword,.od-select{
  border-radius:90px 20px 70px 22px / 22px 65px 18px 58px;
  border-width:3px !important;border-color:rgba(58,50,38,.45) !important;
  box-shadow:0 2px 6px rgba(74,59,50,.1);
  transition:border-radius .3s cubic-bezier(.4,0,.2,1),box-shadow .2s,border-color .2s;}
.odt-field:focus-within,input[type="search"]:focus,#od-search-input:focus,#od-keyword:focus,.od-select:focus{
  border-color:var(--p-heather,#c7aecd) !important;
  box-shadow:0 3px 9px rgba(74,59,50,.14),0 0 0 3px rgba(199,174,205,.3);
  outline:none;}
/* Semi-transparent so the scribble (bounced in behind it on hover, see
   organic-nav.js's wireScribbleBounce) shows through the gold. Paul,
   2026-09-18: the button itself never changes colour any more - the
   scribble bouncing in/out IS the hover highlight, so no background-color
   transition here (was rotate(-1.2deg)->rotate(0)+translateY too; dropped -
   the scribble does the work now). */
/* No z-index here any more (was 2) - that made .odt-go establish its OWN
   stacking context, which traps ALL its children (incl. the label) below
   any higher-z-index SIBLING (the scribble) no matter what z-index the
   label itself has. Dropping it lets the label span's own z-index compete
   directly against the scribble in the shared parent context instead, so
   text can sit above the scribble while the button's own gold background
   (painted with no z-index of its own) stays below it. */
/* overflow:hidden - Paul, 2026-09-18: "can the scribble for the search
   button go behind like with the other buttons - I think hiding it is
   working better" - clips the bounce-in to the button's own shape, same as
   .od-btn/.od-share-btn, instead of letting it spill past the edges. */
/* Softer, pastel gorse at rest (--p-gorse, the same pale tone the rainbow
   strip/wash use, instead of the more saturated rgba(224,165,38,...)) -
   fully transparent on hover so the granite texture + scribble show through
   clean, nothing tinting them (Paul, 2026-09-18: "the original colour of
   the button be a more pastel gorse and can onmouseover make it
   transparent?"). */
.odt-go{background:rgba(240,214,154,.55);color:#33301f;position:relative;overflow:hidden;
  border:2px solid #3a3226;border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;
  font-family:var(--od-font);font-weight:700;letter-spacing:.02em;
  transform:rotate(-1.2deg);
  transition:border-radius .4s cubic-bezier(.4,0,.2,1),background-color .3s ease;}
/* template.css's own .odt-go:hover sets background:transparent directly now
   (was var(--heather-hover), overridden here every time - simplify pass,
   2026-09-18) so this rule no longer needs to repeat it. */
.odt-go:hover{border-radius:215px 30px 195px 35px / 30px 195px 35px 215px;}
.odt-go-label{position:relative;z-index:4;}
/* Scribble bounces in from the right on hover, and back out on mouseleave -
   organic-nav.js sets --scr-x (its resting-offscreen X) and toggles .in.
   z-index above .odt-go's own (2) so it paints OVER the gold background,
   not hidden underneath it (Paul, 2026-09-18: "the scribble should appear
   above that layer") - the strokes are thin/partly transparent so "Search"
   still reads fine through them, same as the nav links' own hover scribble. */
.blob.odt-search-scribble{opacity:0;z-index:3;transform:translateX(var(--scr-x,28px));
  transition:opacity .3s var(--bounce),transform .4s var(--bounce);}
.blob.odt-search-scribble.in{opacity:1;transform:translateX(0);}

/* ---- site-wide "sketch buttons" (com_ourdartmoor's .od-btn / .od-share-btn,
   used on every content view - directory filters, listing actions, contact
   forms, kind-words, share bars etc) - hand-carved asymmetric corners +
   ink border, same bounce-in scribble as the search button, clipped to the
   button's own shape (background layer, not spilling past the edges).
   Originally built for just the listing page's action/share buttons, then
   rolled out everywhere (Paul, 2026-09-18: "please put this site wide
   (including the search button)"). Wired up by organic-nav.js's
   wireManyButtonScribbles(). Reference: a file Paul found,
   Sharing/organic-buttons.html - recoloured to the theme's own tokens. */
/* .od-chip-btn (Map page: Filter / Map Layers / Help) added 2026-09-18 -
   Paul: "Can the 'filter' 'Map Layers' sections be styled like the Share
   buttons?... the hand drawn effect fits the style". */
.od-btn,.od-share-btn,.od-chip-btn{position:relative;overflow:hidden;
  border-width:2px !important;border-color:#3a3226 !important;
  border-radius:255px 15px 225px 15px / 15px 225px 15px 255px !important;
  box-shadow:0 4px 10px rgba(74,59,50,.15);
  transform:rotate(var(--btn-tilt,0deg));
  transition:border-radius .4s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;}
.od-btn:hover,.od-share-btn:hover,.od-chip-btn:hover{
  border-radius:215px 30px 195px 35px / 30px 195px 35px 215px !important;
  box-shadow:0 8px 16px rgba(74,59,50,.2);transform:rotate(var(--btn-tilt,0deg)) translateY(-2px);}
.od-btn-label{position:relative;z-index:4;}
.od-btn-scribble{position:absolute;opacity:0;z-index:3;pointer-events:none;left:-5px;top:-1px;
  transform:translateX(var(--scr-x,18px));transition:opacity .3s var(--bounce),transform .4s var(--bounce);}
.od-btn-scribble.in{opacity:1;transform:translateX(0);}
.od-btn-scribble path{fill:none;stroke-linecap:round;stroke-linejoin:round;}
/* "Copy link" (.od-share-copy) used to be the only .od-share-btn with a text
   label next to its icon, ~3x wider than the icon-only share buttons at the
   same height - the shared blob radius below is tuned for a near-square box,
   so it clamped unevenly into a lopsided, "badly drawn" corner on that much
   wider button. Fixed then with a custom radius scaled for a wide pill, but
   Paul preferred reverting to the plain squarer shared look (2026-09-18) now
   that the button just says "Copy" (icon covers "link") - back to a near-
   square box like the others, so the shared .od-btn radius fits it cleanly
   again with no override needed. */
/* ---- Map page: Filter / Map layers / How-to-use popovers (.od-pop, from
   com_ourdartmoor's site.css) - re-skinned to the organic theme, same "torn
   card" ink-border + rainbow-strip language as the nav dropdowns, instead of
   the plain white/grey default. Only paint properties are touched here
   (border/background/colour/checkbox tint) - position, width, the dock's
   open/collapse mechanics etc. all stay exactly as site.css sets them, since
   this is a functional control panel, not a card to redesign (Paul,
   2026-09-19: the chip BUTTONS already got the sketch treatment on
   2026-09-18; the popover CONTENTS - the actual filter checkbox list - never
   did). Covers both the Filter/Help popovers and the docked Map-layers panel,
   which share the same .od-pop class. */
.od-pop{background:var(--paper,#fdfcf8);border:2px solid #3a3226 !important;
  border-radius:16px 8px 14px 8px/8px 14px 8px 16px;
  box-shadow:0 8px 22px rgba(74,59,50,.16);}
/* Rainbow top strip only on the simple Filter/Help popovers - the docked Map
   layers panel (.od-pop-layers) has its own header bar (.od-layers-head)
   with zero padding on the outer element, so the negative-margin trick here
   would misalign against it; that header is recoloured separately below. */
.od-pop:not(.od-pop-layers)::before{content:'';display:block;height:4px;margin:-12px -12px 10px;
  border-radius:14px 6px 0 0/6px 0 0 14px;background:var(--rainbow-organic);}
.od-pop h4{color:var(--heather-deep);font-family:var(--od-font);}
.od-pop .od-type-filter,.od-pop .od-lyr{border-radius:8px;transition:background-color .18s ease;}
.od-pop .od-type-filter:hover,.od-pop .od-lyr:hover{background:var(--heather-tint) !important;}
.od-pop input[type="checkbox"],.od-pop input[type="radio"]{accent-color:var(--heather-deep);width:15px;height:15px;}
.od-allnone button{border-radius:8px 3px 8px 3px/3px 8px 3px 8px !important;border-color:#3a3226 !important;
  font-family:var(--od-font);}
.od-allnone button:hover{background:var(--heather-tint) !important;}
/* Map layers panel's own header bar - recoloured to match instead of the
   plain grey default. */
.od-layers-head{background:var(--heather-tint) !important;border-bottom:2px solid #3a3226 !important;}
.od-layers-title{color:var(--heather-deep) !important;font-family:var(--od-font);}
.od-layers-head button:hover{background:rgba(58,50,38,.12) !important;color:var(--heather-deep) !important;}

/* ---- Latest Articles module (mod_ourdartmoor_stories): heading in the
   decorative display face like everywhere else (Paul, 2026-09-18: "Latest
   Articles heading should be in Cabin Font"), and the article cards pick up
   the Directory results' own language - material tinge frame, big auto-fit
   title, hover lift - instead of a plain full-bleed photo+caption tile
   (Paul: "need to be styled more like the listing results are"). Randomised
   by organic-nav.js's wireStoryCards(). ---- */
.od-stories-head h2{font-family:var(--od-display,'Cabin Sketch',cursive);font-weight:700;color:#33301f;}
.odc-story{position:relative;display:flex;flex-direction:column;overflow:visible !important;
  border-radius:3px;padding:10px 10px 14px;background-size:cover;background-repeat:no-repeat;
  background-position:var(--bp,center);box-shadow:0 6px 14px rgba(48,40,26,.12),0 2px 5px rgba(48,40,26,.08);
  transform:rotate(var(--cr,0deg));transition:transform .3s cubic-bezier(.2,.75,.25,1),box-shadow .3s ease;
  aspect-ratio:auto !important;color:inherit !important;text-decoration:none !important;}
.odc-story.wall  {background-color:#e9eae7;background-image:linear-gradient(rgba(233,234,230,.85),rgba(236,237,233,.92)),var(--tex);}
.odc-story.wood  {background-color:#efe7d1;background-image:linear-gradient(rgba(245,235,205,.83),rgba(247,238,212,.90)),var(--tex);}
.odc-story.lichen{background-color:#eae0ec;background-image:linear-gradient(rgba(237,227,240,.83),rgba(240,231,242,.90)),var(--tex);}
/* Title above the photo, not below (Paul, 2026-09-18) - flex order swap,
   markup itself stays image-then-caption. */
.odc-story img{order:2;}
.odc-story-cap{order:1;}
/* Kookier now - Paul, 2026-09-18: "can we go a little crazier? More
   randomness, larger titles (more movement). Photos etc can pop out of
   their area like the listing results" - same hovA-E random-hover-shape
   pool + escaping photo zoom as the Directory cards (organic-cards.css). */
.odc-story:hover{cursor:pointer;z-index:5;box-shadow:0 18px 30px rgba(48,40,26,.22),0 5px 10px rgba(48,40,26,.14);}
.odc-story.hovA:hover{transform:translateY(-9px) rotate(calc(var(--cr,0deg) - 1.8deg));}
.odc-story.hovB:hover{transform:translateY(-9px) rotate(calc(var(--cr,0deg) + 1.8deg));}
.odc-story.hovC:hover{transform:translateY(-12px) scale(1.035) rotate(var(--cr,0deg));}
.odc-story.hovD:hover{transform:translateY(-6px) rotate(calc(var(--cr,0deg) - 1deg)) scale(1.02);}
.odc-story.hovE:hover{animation:odc-story-wobble .7s ease;}
@keyframes odc-story-wobble{0%,100%{transform:translateY(-6px) rotate(var(--cr,0deg))}30%{transform:translateY(-9px) rotate(calc(var(--cr,0deg) - 2.4deg))}65%{transform:translateY(-9px) rotate(calc(var(--cr,0deg) + 2deg))}}
.odc-story img{position:static !important;height:150px !important;width:100%;object-fit:cover;
  border-radius:2px;box-shadow:0 3px 8px rgba(30,24,12,.24);
  transition:transform .5s cubic-bezier(.2,.75,.25,1),box-shadow .5s ease;}
.odc-story:hover img{z-index:6;transform:scale(1.24) rotate(var(--wr,0deg));box-shadow:0 16px 30px rgba(20,16,8,.4);}
.odc-story-cap{position:static !important;background:none !important;padding:10px 2px 0 !important;color:inherit !important;}
.odc-story-over{font:600 .66rem/1 var(--od-font,'Cabin',sans-serif);letter-spacing:.1em;text-transform:uppercase;
  color:var(--moor,#4f6a2c);}
/* Bigger cap + more slide-on-hover than the sidebar cards (Paul: "larger
   titles (more movement)"). */
.odc-story-cap h3{font-family:var(--od-display,'Cabin Sketch',cursive) !important;font-weight:700;
  line-height:1.0;margin:6px 0 0;white-space:nowrap;overflow:hidden;display:inline-block;
  transform:translateX(var(--tx,0px));transition:transform .4s cubic-bezier(.2,.85,.3,1);}
.odc-story:hover .odc-story-cap h3{transform:translateX(calc(var(--tx,0px) + var(--slide,20px))) scale(1.08);}
.odc-story.wall   .odc-story-cap h3{color:#5d5748;}
.odc-story.wood   .odc-story-cap h3{color:#3a2f22;}
.odc-story.lichen .odc-story-cap h3{color:#4a3550;}
.odc-story-cap p{color:#413d34 !important;font-size:.88rem;margin:.35rem 0 0 !important;
  max-height:none !important;opacity:1 !important;transform:none !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ---- footer: distinct display face on column headings (Cabin bold at this
   size reads as barely different from the fallback; Cabin Sketch is
   unmistakable, matching every other heading in the redesign). ---- */
.odt-footer h4{font-family:var(--od-display);font-weight:700;font-size:1.05rem;color:var(--p-gorse);}

/* ---- "Sensible mode" — an escape hatch, own toggle button in the nav.
   Turns off the rainbow/bounce/mega-grid for anyone who'd rather have a
   plain, calm nav. Distinct from (and independent of) the Reading Comfort
   panel, which already handles reduced-motion/contrast/text-size. ---- */
.odt-sensible{flex:none;width:34px;height:34px;border-radius:9px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;margin-left:6px;
  border:1px dashed var(--line);background:none;color:var(--green);font-size:1.05rem;line-height:1;}
.odt-sensible:hover{color:#3a5233;border-color:var(--green);}
/* Same footprint as the social icons (34px box, ~26px glyph), Gorse gold rather
   than heather so it reads as its own control, not a sixth social icon. */
.odt-sensible svg{display:block;width:26px;height:26px;transition:transform .5s ease;}
.odt-sensible:hover svg{transform:rotate(180deg);}
body.sensible-on .odt-navwrap::before,
body.sensible-on .odt-magic-line,
body.sensible-on .odt-mainmenu ul ul::before{display:none;}
body.sensible-on .odt-mainmenu>ul>li>a:hover,
body.sensible-on .odt-nav-social a:hover,
body.sensible-on .odt-mainmenu ul ul li a:hover{transform:none;}
body.sensible-on .odt-go{background:var(--heather);border-radius:10px;transform:none;}
body.sensible-on .od-btn,body.sensible-on .od-share-btn{border-radius:.45rem !important;transform:none !important;}
body.sensible-on .od-btn-scribble{display:none !important;}
body.sensible-on .odt-mainmenu li.parent:has(>ul>li:nth-child(6))>ul{display:block;min-width:235px;}

@media(max-width:900px){
  .odt-mainmenu li.parent:has(>ul>li:nth-child(6))>ul{grid-template-columns:1fr 1fr;min-width:0;}
}

/* ---- Events page: date tile gets the fading rainbow wash (same --rainbow-organic
   + mask-fade recipe as the active nav tab / kind-words bar) instead of the flat
   --od-green fill from site.css. The gradient is pale, so white text (site.css's
   default) disappeared into it - switched to a dark ink tone to stay legible.
   Event titles set explicitly to --od-font (Cabin); belt-and-braces, since
   body.odt already cascades Cabin here, but Paul asked for it directly. */
.od-event-date{position:relative;background:var(--od-stone,#f4f1e8);color:#33301f;overflow:hidden;
  flex-basis:176px !important;} /* Paul, 2026-09-18: "the Date area extended to twice the width" (was 88px) */
.od-event-date::before{content:'';position:absolute;inset:0;background:var(--rainbow-organic);opacity:.6;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%);}
.od-event-date .day,.od-event-date .mon,.od-event-date .yr{position:relative;z-index:1;}
.od-event-date .yr{color:#4a4732;}
.od-event-date .day{font-size:2.3rem;}
/* 2026-09-18: confirmed via a live font-load diagnostic (both my browser and
   Paul's) that plain Cabin WAS already applying correctly here - the mismatch
   was that "Cabin" in Paul's head meant the bold hand-drawn face used for
   every other heading on the site (the "Dartmoor Events" h1 itself, Kind
   Words card titles, About callout headings - all var(--od-display), i.e.
   Cabin SKETCH, a different font family despite the shared name), not the
   plain body Cabin these titles were actually set in. Switched to match that
   convention. .od-cal-event (tiny mini-calendar pills) kept in plain Cabin -
   Cabin Sketch is a display face, illegible that small. */
.od-event-body h2,.od-event-body h2 a,.od-event-single h1{font-family:var(--od-display) !important;font-weight:700;}
.od-cal-event{font-family:var(--od-font) !important;}

/* ---- Events page: bring the card itself up to the rest of the site's card
   language (rounded 14px, soft rest-state shadow + a stronger one on hover,
   like .odc-quotecard/.odc-callout/the search field) rather than site.css's
   flat 10px-radius bordered box with no shadow until hover. Each card also
   gets a small random hand-set tilt (--cr, same mechanic/range as the "You
   might also like" cards on a listing page - organic-listing.js's
   .od-related-card wiring), straightening + lifting together on hover -
   Paul, 2026-09-18: "possibly angle them all a little?". Wired by
   organic-nav.js (site-wide file - organic-listing.js no-ops off the
   Events page, since it's guarded on .od-listing existing). */
.od-event{position:relative;border-radius:14px;border-color:rgba(50,60,30,.10);
  transform:rotate(var(--cr,0deg));cursor:pointer;
  box-shadow:0 1px 2px rgba(40,44,30,.04),0 8px 20px -12px rgba(74,103,65,.18);
  transition:box-shadow .2s,transform .2s;}
.od-event:hover{box-shadow:0 4px 12px rgba(40,44,30,.07),0 16px 32px -14px rgba(74,103,65,.28);
  transform:rotate(0deg) translateY(-1px);}
/* ---- whole card clickable (Paul, 2026-09-18: "can the whole card on an
   event be a link?"). "Stretched link" technique: the title's own <a> grows
   an invisible ::after that covers the full card, rather than wrapping
   everything in one big <a> (which would nest the title/venue/thumb links
   inside it - invalid HTML and broken click targets). The venue link and
   thumbnail link stay reachable above the overlay (z-index 2); everywhere
   else on the card now activates the title's link underneath. */
.od-event-body h2 a::after{content:'';position:absolute;inset:0;z-index:1;}
.od-event-venue a,.od-event-thumb{position:relative;z-index:2;}

/* ---- About page callouts (.odc-callout, markup lives in the article's own HTML -
   "What's it going to cost?" etc., not a template file). Restyled to the organic
   card language (soft gradient fill, rounded corners, coloured top edge, shadow -
   same recipe as .odc-quotecard in template.css) using the p-* pastel palette,
   instead of template.css's flat left-border box on the old --green/--heather/
   --gorse vars. NOTE: those vars live in template.css's own :root and are shared
   by dozens of unrelated rules across the live site (nav, buttons, CTAs) - I did
   not touch that block. This overrides on selector alone, loaded after
   template.css so it wins outright. */
.odc-callout{position:relative;background:linear-gradient(160deg,#eef1e4,#fff 65%);
  border:1px solid rgba(50,60,30,.08);border-left:none;border-radius:14px;
  padding:22px 24px 20px;box-shadow:0 1px 2px rgba(40,44,30,.04),0 10px 28px -14px rgba(74,103,65,.18);}
.odc-callout::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  border-radius:14px 14px 0 0;background:var(--p-moor);}
.odc-callout.gorse{background:linear-gradient(160deg,#faf3dd,#fff 65%);}
.odc-callout.gorse::before{background:var(--p-gorse);}
.odc-callout.heather{background:linear-gradient(160deg,#f3ecf5,#fff 65%);}
.odc-callout.heather::before{background:var(--p-heather);}
.odc-callout h3.odc-display{color:#33301f;}

/* ---- Kind Words page (Reviews view, tmpl/reviews/default.php). The
   individual quotes (.od-kw/.od-kw-body) already pick up the rainbow-wash
   treatment above - that block is global, not scoped to the listing page -
   but the page's OWN chrome (the per-listing card grid + the closing CTA
   box) was still sitting on site.css's flat white/green-tint boxes with no
   shadow or rounding to match the rest of the site. Card language matches
   .od-event/.odc-quotecard: 14px radius, soft rest shadow, lift on hover.
   Top edge cycles the p-* pastel palette (same idea as the FAQ accordion's
   shade-cycle) so a grid of cards reads as one woven set. */
.od-kw-card{position:relative;border-radius:14px;border-color:rgba(50,60,30,.10);
  border-top:4px solid var(--p-moor);
  box-shadow:0 1px 2px rgba(40,44,30,.04),0 8px 20px -12px rgba(74,103,65,.18);
  transition:box-shadow .2s,transform .2s;}
.od-kw-card:nth-of-type(4n+2){border-top-color:var(--p-gorse);}
.od-kw-card:nth-of-type(4n+3){border-top-color:var(--p-heather);}
.od-kw-card:nth-of-type(4n){border-top-color:var(--p-rust);}
.od-kw-card:hover{box-shadow:0 4px 12px rgba(40,44,30,.07),0 16px 32px -14px rgba(74,103,65,.28);
  transform:translateY(-1px);}
.od-kw-card-title a{color:#33301f;}
.od-kw-card-title a:hover{color:var(--heather-deep,#6B4763);}

.od-kw-cta{position:relative;background:linear-gradient(160deg,#f3ecf5,#fff 65%);
  border:1px solid rgba(50,60,30,.08);border-radius:14px;
  box-shadow:0 1px 2px rgba(40,44,30,.04),0 10px 28px -14px rgba(74,103,65,.18);}
.od-kw-cta::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  border-radius:14px 14px 0 0;background:var(--p-heather);}

/* ---- Events page mobile fix, 2026-09-18: the 176px date tile (doubled
   from site.css's 88px earlier this session, per Paul's "extend to twice
   the width") was never checked at phone widths - on a ~375px viewport it
   eats most of the card, squeezing the title into an awkward 3-line wrap.
   site.css already drops the thumbnail below 620px for the same reason
   (not enough room); scale the date tile back down at the same breakpoint
   rather than introducing a new one. */
@media(max-width:620px){
  .od-event-date{flex-basis:110px !important;}
  .od-event-date .day{font-size:1.9rem;}
}

/* ---- "Explore the Moor" hub cards (.od-catcard, tmpl/explore/default.php) -
   Paul, 2026-09-18: "we need to stylize the Explore cards... fitting in a
   little better". Untouched by the redesign until now - still site.css's
   plain white box. These cards have no images yet (the PHP's own comment:
   "cards have no images") - Paul: "I'll make sure there are images
   eventually" - so for now this is the same soft-gradient-card language as
   the About page callouts / Kind Words CTA (no photo needed), not the
   photo-texture language of Directory/Places cards. Top edge cycles the
   p-* palette so a grid of 17 of these reads as one woven set. --cr random
   tilt wired by organic-nav.js. */
.od-catcard{position:relative;background:linear-gradient(160deg,#eef1e4,#fff 65%);
  border:1px solid rgba(50,60,30,.08);border-radius:14px;overflow:visible;
  box-shadow:0 1px 2px rgba(40,44,30,.04),0 8px 20px -12px rgba(74,103,65,.18);
  transform:rotate(var(--cr,0deg));
  transition:box-shadow .2s,transform .2s;}
.od-catcard:hover{box-shadow:0 4px 12px rgba(40,44,30,.07),0 16px 32px -14px rgba(74,103,65,.28);
  transform:rotate(0deg) translateY(-3px);}
.od-catcard::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  border-radius:14px 14px 0 0;background:var(--p-moor);}
.od-catcard:nth-of-type(4n+2){background:linear-gradient(160deg,#faf3dd,#fff 65%);}
.od-catcard:nth-of-type(4n+2)::before{background:var(--p-gorse);}
.od-catcard:nth-of-type(4n+3){background:linear-gradient(160deg,#f3ecf5,#fff 65%);}
.od-catcard:nth-of-type(4n+3)::before{background:var(--p-heather);}
.od-catcard:nth-of-type(4n){background:linear-gradient(160deg,#f7ece7,#fff 65%);}
.od-catcard:nth-of-type(4n)::before{background:var(--p-rust);}
.od-catcard-title{color:#33301f;}