/* ═══ living layer (2026-10-20) ══════════════════════════════════════
   Subtle motion that makes the site feel alive. Works with living.js.
   Everything here switches off for visitors who turn motion off.
   How to use each effect: reference/site-guide.md, "Living layer".   */

:root{
  /* deep time palette: real local rock, top (today) to bottom (oldest) */
  --dt-surface:#f7f2ea;  /* today */
  --dt-clay:#e8dfcf;     /* Ice Age clay, ~20,000 years */
  --dt-sandstone:#d8a48a;--dt-sandstone-deep:#a85a3c;--dt-sandstone-pale:#e9c9b5; /* Triassic red sandstone, ~240 million (Chester) */
  --dt-coal:#3a3632;     --dt-coal-mid:#8a8378;       /* Carboniferous Coal Measures, ~310 million (Flintshire) */
  --dt-lime:#d6d3c9;     --dt-lime-mid:#a9a597;       /* Carboniferous limestone, ~340 million (Great Orme) */
  --dt-slate:#4b525a;    --dt-slate-deep:#2c3035;     /* Ordovician volcanic rock + slate, ~450 million (Cwm Idwal) */
  --dt-mercia:#d9b8a8;   /* Triassic Mercia Mudstone, 242-201 million (Libby's column): the About Libby section */
  --breath:5.5s;        /* one slow breath: the pace for anything that loops */
}

/* ── 1. hand-drawn lines draw themselves (.horizon, any svg.draw) ─── */
.js-live .horizon path,.js-live svg.draw path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease)}
.js-live .horizon.in path,.js-live svg.draw.in path{stroke-dashoffset:0}

/* ── 2. the logo grows up out of the ground ───────────────────────── */
.js-live .mark{
  -webkit-mask:url(logo.svg) center/contain no-repeat,linear-gradient(to top,#000 45%,transparent 55%) 0 0/100% 300% no-repeat;
  mask:url(logo.svg) center/contain no-repeat,linear-gradient(to top,#000 45%,transparent 55%) 0 0/100% 300% no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transition:-webkit-mask-position 2.2s var(--ease),mask-position 2.2s var(--ease)}
.js-live .mark.in{-webkit-mask-position:center,0 100%;mask-position:center,0 100%}

/* ── 3. headings grow: words settle in, thin to full weight ───────── */
.gw .w{display:inline-block;opacity:0;transform:translateY(.32em);filter:blur(4px);font-weight:300 !important;
  transition:opacity 1s var(--ease),transform 1.3s var(--ease),filter 1s var(--ease),font-weight 1.6s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms + var(--d,0ms))}
.gw.in .w{opacity:1;transform:none;filter:none;font-weight:var(--fw,500) !important}

/* ── 4. photos: uncovered with an organic edge, bottom up ── */
/* trimmed: photos keep sharp edges (Tim's soft, faded edges made them look blurred) */
:root{--soft-x:linear-gradient(#000,#000);--soft-y:linear-gradient(#000,#000)}
.js-live .grow-in{
  -webkit-mask:url(reveal-mask.svg) 0 0/100% 300% no-repeat,var(--soft-x),var(--soft-y);-webkit-mask-composite:source-in;
  mask:url(reveal-mask.svg) 0 0/100% 300% no-repeat,var(--soft-x),var(--soft-y);mask-composite:intersect;
  transform:scale(1.05);
  transition:-webkit-mask-position 1.8s var(--ease),mask-position 1.8s var(--ease),transform 2.4s var(--ease)}
.js-live .grow-in.in{-webkit-mask-position:0 100%,0 0,0 0;mask-position:0 100%,0 0,0 0;transform:none}
/* sunlight follows the cursor across the pillar cards (living.js 8d) */
.card .glint{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);mix-blend-mode:soft-light;
  background:radial-gradient(circle 260px at var(--gx,50%) var(--gy,30%),rgba(255,236,196,.75),transparent 70%)}
.card:hover .glint{opacity:1}

/* ── 5. pencil underline on text links ────────────────────────────── */
.about .link,.offer .link,.offerings .link{border-bottom:0 !important;position:relative}
.about .link::after,.offer .link::after,.offerings .link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:6px;background:currentColor;opacity:.75;
  -webkit-mask:var(--pencil) 0 0/100% 100% no-repeat;mask:var(--pencil) 0 0/100% 100% no-repeat;
  clip-path:inset(0 0 0 0);transition:clip-path .7s var(--ease)}
.about .link:hover::after,.offer .link:hover::after,.offerings .link:hover::after{animation:redraw .8s var(--ease)}
@keyframes redraw{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
:root{--pencil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6C14 2.2 27 4.4 41 3.1S70 2.4 84 3.7 108 2.6 119 3.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
/* nav underline becomes a hand-drawn line too */
.nav a::after{height:5px;bottom:-2px;background:var(--peach);
  -webkit-mask:var(--pencil) 0 0/100% 100% no-repeat;mask:var(--pencil) 0 0/100% 100% no-repeat}
/* arrows give a small nudge */
.btn:hover svg,.link:hover svg{transform:translateX(4px)}

/* ── 6. hero: cloud shadows, drifting light, depth, dig-deeper cue ─ */
.hero .clouds{position:absolute;inset:-10% -40%;z-index:2;pointer-events:none;mix-blend-mode:multiply}
.hero .clouds i{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(28,26,23,.34),rgba(28,26,23,.12) 55%,transparent);
  animation:cloud var(--t,70s) linear infinite;animation-delay:var(--dl,0s);will-change:transform}
.hero .clouds i:nth-child(1){width:70vw;height:40vh;top:5%;--t:85s;--dl:-20s}
.hero .clouds i:nth-child(2){width:55vw;height:34vh;top:45%;--t:110s;--dl:-70s}
.hero .clouds i:nth-child(3){width:80vw;height:45vh;top:25%;--t:140s;--dl:-35s;opacity:.7}
@keyframes cloud{from{transform:translateX(-60vw)}to{transform:translateX(130vw)}}
/* light: shafts of low sun with pollen and dust turning in them (drawn by living.js) */
.hero .motes{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen}
.hero .slides{will-change:transform}
.hero .slides.leans{inset:-14px}                   /* a little spare photo so it can shift with the cursor */
/* time of day: a faint wash over the photo (class set by living.js) */
.hero .tod{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;opacity:.5;transition:opacity 2s}
.tod-morning .hero .tod{background:linear-gradient(160deg,rgba(255,214,150,.55),transparent 60%)}
.tod-day .hero .tod{opacity:0}
.tod-evening .hero .tod{background:linear-gradient(200deg,rgba(214,120,90,.55),rgba(90,60,90,.25) 70%)}
.tod-night .hero .tod{background:linear-gradient(180deg,rgba(60,80,130,.6),rgba(20,24,40,.3))}
.dig{position:absolute;right:max(4vw,calc((100vw - 1200px)/2));bottom:clamp(1.6rem,5vh,3rem);z-index:4;display:flex;flex-direction:column;align-items:center;gap:.7rem;
  color:var(--bone);opacity:.8;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.dig::after{content:"";width:1px;height:46px;background:linear-gradient(var(--bone),transparent);transform-origin:top;animation:breathe var(--breath) ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scaleY(.45);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@media (max-width:600px){.dig{display:none}}

/* ── 7. deep time: the homepage digs down through real rock ───────── */
.deep [data-layer]{position:relative;transition:none}
.deep [data-layer=surface]{background:transparent}
.deep [data-layer=clay]{background:var(--dt-mercia)}  /* Libby's column: About Libby is the Mercia Mudstone */
.deep [data-layer=sandstone]{background:var(--dt-sandstone-pale)}
.deep [data-layer=sandstone] .label{color:var(--ironstone)}
.deep [data-layer=coal]{background:var(--dt-coal);color:var(--bone)}
.deep [data-layer=coal] h2,.deep [data-layer=coal] h2 em{color:var(--bone)}
.deep [data-layer=coal] .label{color:var(--sandstone)}
.deep [data-layer=lime]{background:var(--dt-lime)}
.deep [data-layer=slate]{background:var(--dt-slate)}
.deep footer{background:var(--dt-slate-deep)}
/* the label above the first rock band: what the dig is (Libby's column) */
.dig-note{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;margin:clamp(2.5rem,6vw,4rem) 0 0;text-align:right;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
.dig-note b{font-weight:500;color:var(--rust)}
.dig-note span::after{content:" ↓"}
/* rock core: replaces the scroll bar on the homepage, right edge (living.js part 7) */
html.has-rail{scrollbar-width:none}
html.has-rail::-webkit-scrollbar{display:none}
.rail{position:fixed;right:0;top:0;bottom:0;width:30px;z-index:60;cursor:grab;touch-action:none;color:var(--ink);
  opacity:0;transition:opacity .8s var(--ease),color .8s}
.rail.on,.rail:hover{opacity:1}
.rail.drag{cursor:grabbing}
.rail.dark{color:var(--bone)}
.rail .core{position:absolute;right:9px;top:10px;bottom:10px;width:7px;border-radius:4px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(28,26,23,.18);transition:width .3s var(--ease)}
.rail:hover .core,.rail.drag .core{width:10px}
.rail .core i{position:absolute;left:0;right:0;border-top:1px solid rgba(28,26,23,.25)}
.rail .core .sky{background:linear-gradient(#c9d6d9,#9fb08f);border:0}
.rail .core [data-layer=surface]{background:linear-gradient(var(--moss) 0 6%,var(--dt-surface) 6%)}
/* Libby's column (21 Oct 2026), top to bottom */
.rail .core [data-layer=ice]{background:var(--dt-clay)}
.rail .core [data-layer=mercia]{background:repeating-linear-gradient(#a8644c 0 6px,#9a7d6a 6px 7px,#a8644c 7px 11px,#8f9a86 11px 12px)}  /* red-brown mudstone, grey-green bands */
.rail .core [data-layer=sherwood]{background:repeating-linear-gradient(var(--dt-sandstone-pale) 0 5px,var(--dt-sandstone) 5px 7px)}
.rail .core [data-layer=coal]{background:repeating-linear-gradient(var(--dt-coal) 0 9px,#1e1c1a 9px 10px,var(--dt-coal-mid) 10px 11px)}
.rail .core [data-layer=grit]{background:radial-gradient(circle at 30% 40%,#8f7c5e 0 1px,transparent 1.5px) 0 0/5px 5px,#c2ad88}  /* coarse buff gritstone */
.rail .core [data-layer=dinantian]{background:repeating-linear-gradient(var(--dt-lime) 0 8px,var(--dt-lime-mid) 8px 9px)}
.rail .core [data-layer=arenig]{background:repeating-linear-gradient(var(--dt-slate) 0 2px,#5d656e 2px 3px)}
.rail .core .foot{background:var(--dt-slate-deep)}
/* the window: where you are now */
.rail .win{position:absolute;right:5px;width:15px;min-height:18px;border:1.5px solid currentColor;border-radius:8px;
  box-shadow:0 0 0 3px rgba(247,242,234,.18)}
.rail .read{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;
  padding:.45rem .7rem;border-radius:6px;background:rgba(247,242,234,.92);color:var(--ink);box-shadow:0 2px 14px rgba(28,26,23,.12);
  font:400 .6rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.rail .read b{font-weight:500;color:var(--rust)}
.rail .read span{color:var(--taupe)}
@media (max-width:899px){.rail .read{display:none}}
@media (pointer:coarse){.rail{pointer-events:none;width:16px}.rail .core{right:4px;width:5px}.rail .win{right:1px;width:11px}}

/* ── 9. artwork: contours, rock bands, fossils (living.js part 6) ─── */
.js-live body{background-image:none}               /* one map per section replaces the repeating tile */
.js-live .page-head::after{display:none}           /* fossils from data-fossils replace doodle.svg */
.has-art{position:relative}
.has-art > .wrap{position:relative;z-index:1}
/* contour maps: draw in level by level, then drift very slowly */
@property --far{syntax:'<number>';inherits:true;initial-value:1}
.topo{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:var(--clay);--far:1;opacity:calc(var(--topo-o,.17) / var(--far));transition:--far 1s var(--ease);
  -webkit-mask:radial-gradient(circle 300px at var(--mx,-999px) var(--my,-999px),#000 20%,rgb(0 0 0 / var(--far)));mask:radial-gradient(circle 300px at var(--mx,-999px) var(--my,-999px),#000 20%,rgb(0 0 0 / var(--far)))}
.topo.near{--far:.5}  /* lines round the cursor darken, like a lamp held over the map (living.js 8a) */
.topo svg{position:absolute;inset:-4%;width:108%;height:108%;animation:drift 160s ease-in-out infinite alternate}
.topo path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 3.2s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
.topo.in path{stroke-dashoffset:0}
.page-head .topo,.deep [data-layer=coal] .topo,.deep [data-layer=slate] .topo{color:var(--bone);--topo-o:.08}
@keyframes drift{from{transform:translate(-1.5%,-1%) rotate(-.4deg)}to{transform:translate(1.5%,1%) rotate(.4deg)}}
/* rock textures on the homepage layers: marks drawn like a geological map, plus a fine grain */
.rock{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rock::before,.rock::after{content:"";position:absolute;inset:0;background:var(--tx-c,var(--ink))}
.rock::before{-webkit-mask:var(--tx) 0 0 repeat;mask:var(--tx) 0 0 repeat;opacity:var(--tx-o,.22)}
.rock::after{-webkit-mask:var(--grain) 0 0 repeat;mask:var(--grain) 0 0 repeat;opacity:var(--gr-o,.12)}
/* hand lens: round the cursor the rock shows more clearly (living.js 8b) */
.rock .lens{position:absolute;inset:0;background:var(--tx-c,var(--ink));opacity:0;transition:opacity 1.1s var(--ease);
  -webkit-mask:var(--tx) 0 0 repeat,radial-gradient(circle 190px at var(--mx,50%) var(--my,50%),#000,rgba(0,0,0,.5) 45%,transparent) 0 0/100% 100% no-repeat;-webkit-mask-composite:source-in;
  mask:var(--tx) 0 0 repeat,radial-gradient(circle 190px at var(--mx,50%) var(--my,50%),#000,rgba(0,0,0,.5) 45%,transparent) 0 0/100% 100% no-repeat;mask-composite:intersect}
.rock.near .lens{opacity:var(--ln-o,.32)}
/* trimmed: textures turned down so they never sit noisily behind text */
[data-layer=surface] .rock{--tx-c:var(--moss);--tx-o:.07;--gr-o:.04}
[data-layer=clay] .rock{--tx-c:#8c7a5c;--tx-o:.06;--gr-o:.05}
[data-layer=sandstone] .rock{--tx-c:var(--dt-sandstone-deep);--tx-o:.12;--gr-o:.08}
[data-layer=coal] .rock{--tx-c:#c9bfae;--tx-o:.08;--gr-o:.1}
[data-layer=lime] .rock{--tx-c:#6f6b60;--tx-o:.1;--gr-o:.08}
[data-layer=slate] .rock{--tx-c:#c3cad1;--tx-o:.08;--gr-o:.1}
/* rock bands: sit between two sections, the colour above and below split behind them */
.stratum{position:relative;line-height:0;height:clamp(64px,calc(100vw * var(--r,.13)),280px);
  background:linear-gradient(var(--above,var(--bone)) 50%,var(--below,var(--bone)) 50%)}
.stratum{overflow:clip}
/* Libby's column: the cross-bedded band stands in for the Millstone Grit, so it is buff, not red */
.stratum.grit{--edge:#4a3d28;--l2:#d6c3a0;--l3:#c2ad88;--l5:#7d6a4c}
.stratum svg{display:block;width:106%;margin-left:-3%;height:100%;overflow:visible}  /* extra width hides the ends while layers slide */
.stratum [data-depth]{translate:0 calc(var(--dp,0) * 7px);opacity:0;
  transition:translate 1.6s var(--ease),opacity 1.2s var(--ease);transition-delay:calc(var(--dp,0) * 140ms)}
.stratum.in [data-depth]{translate:0 0;opacity:1}
/* fossils: drawn in line by line (trimmed: no sway, fossils stay still) */
.fossil{display:block;line-height:0}
.fossil svg{display:block;width:100%;height:100%;overflow:visible}
.fossil path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease) var(--dl,0s)}
.fossil.in path{stroke-dashoffset:0}
.page-head .fossils{position:absolute;right:4vw;top:50%;transform:translateY(-50%);width:clamp(210px,27vw,360px);aspect-ratio:16/10;
  display:grid;grid-template-columns:58% 1fr;align-items:end;gap:4%;color:var(--sand);opacity:.6;pointer-events:none}
.page-head .fossil:first-child{align-self:start;aspect-ratio:1}
.page-head .fossil:nth-child(2){aspect-ratio:1;width:90%;justify-self:start;opacity:.85}
@media (max-width:820px){.page-head .fossils{width:140px;opacity:.32;top:.8rem;transform:none;right:16px}}
.fossil.margin{position:absolute;top:var(--y,25%);width:clamp(70px,calc((100vw - 1200px) / 2 - 36px),120px);aspect-ratio:1;color:var(--moss);opacity:.5;z-index:0;pointer-events:none}
.fossil.margin.left{left:max(14px,calc((100vw - 1200px) / 4 - 50px))}
.fossil.margin.right{right:max(14px,calc((100vw - 1200px) / 4 - 50px))}
[data-layer=sandstone] .fossil.margin{color:var(--rust)}
[data-layer=coal] .fossil.margin,[data-layer=slate] .fossil.margin{color:var(--sand);opacity:.45}
@media (max-width:1379px){.fossil.margin{display:none}}
.card .fossil.tag{position:absolute;top:14px;right:14px;width:46px;aspect-ratio:1;color:var(--bone);opacity:.8;z-index:2;pointer-events:none}

/* ── 0. first visit: the logo sketches itself, then flies into the header (living.js part 0) ── */
html.intro{overflow:hidden}
html.intro body::after{content:"";position:fixed;inset:0;z-index:998;background:var(--bone);animation:veil-off .6s 6s forwards}  /* covers the page before any script runs */
@keyframes veil-off{to{opacity:0;visibility:hidden}}
.intro-veil{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:var(--bone);color:var(--forest);cursor:pointer;
  transition:background-color .9s cubic-bezier(.65,0,.25,1)}
.intro-veil>svg{position:relative;z-index:1;height:min(34vh,46vw);width:auto;overflow:visible;transform-origin:0 0}
.intro-veil.gone{background-color:transparent;pointer-events:none}
/* behind the drawing: a contour map surveys itself in while the land settles closer, and a low sun warms the paper */
.intro-land{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:var(--clay);transition:opacity .9s}
.intro-land::before{content:"";position:absolute;inset:-20%;background:radial-gradient(closest-side,var(--sandstone),rgb(224 179 153 / .35) 55%,transparent);
  opacity:0;animation:sun-up 3.4s cubic-bezier(.2,.6,.3,1) .1s forwards}
@keyframes sun-up{from{opacity:0;transform:translate(-6%,22%) scale(.8)}to{opacity:.55;transform:none}}
.intro-land svg{position:absolute;inset:0;width:100%;height:100%;opacity:.26;animation:land-settle 4s cubic-bezier(.2,.6,.3,1) both}
@keyframes land-settle{from{transform:scale(1.14) rotate(-2deg)}to{transform:none}}
.intro-land path{stroke-dasharray:1}
.intro-veil.gone .intro-land{opacity:0}

/* the homepage title stays hidden until living.js has split it (shown anyway after 3s if it never runs).
   trimmed: only the homepage title animates; every other heading shows straight away */
.js-live .hero h1:not(.gw){opacity:0;animation:show 0s 3s forwards}
@keyframes show{to{opacity:1}}

/* ── 8. everything still for visitors who turn motion off ─────────── */
@media (prefers-reduced-motion:reduce){
  .js-live .horizon path,.js-live svg.draw path{stroke-dashoffset:0;transition:none}
  .js-live .mark{-webkit-mask-position:center,0 100%;mask-position:center,0 100%;transition:none}
  .js-live main :is(h1,h2){opacity:1;animation:none}
  .gw .w{opacity:1;transform:none;filter:none;font-weight:var(--fw,500) !important;transition:none}
  .js-live .grow-in{-webkit-mask:none;mask:none;transform:none;transition:none}
  .hero .clouds,.hero .motes,.dig::after{display:none}
  html.intro body::after,.intro-veil{display:none}
  .about .link:hover::after,.offer .link:hover::after,.offerings .link:hover::after{animation:none}
  .topo path,.fossil path{stroke-dashoffset:0;transition:none}
  .topo svg,.fossil .sway{animation:none}
  .stratum [data-depth]{translate:none;opacity:1;transition:none}
}

/* ── Libby's choice, 22 Oct 2026: long text sits on a solid panel ───
   Blog posts, About and event pages: the contour map stays at the sides, but not behind the words. */
.has-art .prose{position:relative;z-index:1;background:var(--bone);padding:clamp(1.2rem,3.5vw,2.6rem) clamp(1rem,3.5vw,2.8rem);border-radius:4px;box-sizing:content-box}
@media (max-width:600px){.has-art .prose{box-sizing:border-box;margin-left:-.6rem;margin-right:-.6rem;padding:1.2rem .6rem}}