/* Little Barn Willow: homepage styles.
   Palette from the logo and the willow itself: leaf-underside green, bark brown, buff willow honey, sage.
   Display: Besley (a Clarendon, the letter of farm sale bills and show schedules). Body: Schibsted Grotesk. */

@font-face { font-family: 'Besley'; src: url('../fonts/besley-latin-var.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Besley'; src: url('../fonts/besley-latin-italic-var.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('../fonts/schibsted-grotesk-latin-var.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
/* fallbacks shaped to the real fonts' metrics (measured), so text barely moves when the web fonts arrive */
@font-face { font-family: 'Besley Fallback'; src: local('Georgia'); font-style: normal; size-adjust: 100.26%; ascent-override: 124.67%; descent-override: 42.39%; line-gap-override: 0%; }
@font-face { font-family: 'Besley Fallback'; src: local('Georgia Italic'), local('Georgia-Italic'); font-style: italic; size-adjust: 110.61%; ascent-override: 113.01%; descent-override: 38.42%; line-gap-override: 0%; }
@font-face { font-family: 'Schibsted Fallback'; src: local('Arial'), local('ArialMT'); font-style: normal; size-adjust: 104.6%; ascent-override: 93.37%; descent-override: 24.65%; line-gap-override: 0%; }

:root {
  --pale: #E7E9DC;        /* willow leaf underside */
  --pale-2: #DCE0CC;
  --paper: #F3F3EA;
  --bark: #2A2017;        /* black maul bark */
  --bark-2: #36291E;
  --ink: #2A2017;
  --ink-2: #594C3F;
  --honey: #C38A4A;       /* buff willow */
  --honey-2: #D9A86A;
  --rod: #8A5A2B;         /* deep buff, text-safe on the pale grounds */
  --leaf: #7C8A57;
  --leaf-deep: #4C5832;
  --moss: #262F1E;
  --cream: #EFE9DA;
  --cream-2: #CFC6B3;
  --kraft: #D5B084;
  --barn: #9A3F2C;         /* barn-door red, for the 'Fully booked' stamp */
  --bch-teal: #256F71;     /* The British Craft House teal, darkened to read on paper */

  --f-display: 'Besley', 'Besley Fallback', Georgia, 'Times New Roman', serif;
  --f-body: 'Schibsted Grotesk', 'Schibsted Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.45rem, 3.9vw + .3rem, 4.9rem);
  --fs-h2: clamp(2rem, 3.2vw + .1rem, 3.75rem);
  --fs-h3: clamp(1.3rem, 1.2vw + .5rem, 2rem);
  --fs-lede: clamp(1.08rem, .45vw + .92rem, 1.22rem);
  --fs-body: clamp(1rem, .2vw + .94rem, 1.075rem);

  --gutter: clamp(16px, 3.4vw, 56px);
  --max: 1680px;
  --wrap-left: max(var(--gutter), calc((100vw - var(--max)) / 2));
  --sec-y: clamp(60px, 9vh, 120px);
  --hh0: 96px;            /* header height on load */
  --hh-s: 74px;           /* header height once scrolled */
  --hh: var(--hh0);
  --radius: 20px;
  --ease: cubic-bezier(.22, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--pale); }
body { margin: 0; background: var(--pale); color: var(--ink); font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.62; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 560; line-height: 1.06; letter-spacing: -.012em; margin: 0; }
h1 em, h2 em { font-style: italic; font-weight: 480; }
/* room for the word masks' side padding, so a word ending a line never pokes past the heading box */
[data-split] { padding-inline: .12em; margin-inline: -.12em; }
p { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--rod); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 300; background: var(--bark); color: var(--cream); padding: 12px 18px; border-radius: 10px; text-decoration: none; font-weight: 600; transition: top .3s; }
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------ buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; border: 1.5px solid transparent; font: 600 1rem/1 var(--f-body); letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .35s, color .35s, border-color .35s; will-change: transform; }
.btn svg { width: 20px; height: 20px; flex: none; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--sm { min-height: 46px; padding: 0 20px; font-size: .95rem; }
.btn--dark { background: var(--bark); color: var(--cream); }
.btn--dark:hover { background: var(--rod); }
.btn--ghost { border-color: rgba(42, 32, 23, .55); color: var(--ink); background: rgba(243, 243, 234, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: var(--paper); border-color: var(--ink); }
.btn--light { background: var(--cream); color: var(--bark); }
.btn--light:hover { background: var(--honey-2); }
.btn--ghost-light { border-color: rgba(239, 233, 218, .6); color: var(--cream); }
.btn--ghost-light:hover { border-color: var(--cream); background: rgba(239, 233, 218, .1); }
.btn--honey { background: var(--honey-2); color: var(--bark); }
.btn--honey:hover { background: var(--cream); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--rod); background: linear-gradient(currentColor, currentColor) left calc(100% - 8px) / 0 1.5px no-repeat; transition: background-size .5s var(--ease); }
.link-arrow svg { width: 20px; height: 20px; transition: transform .45s var(--ease); }
.link-arrow:hover { background-size: calc(100% - 30px) 1.5px; }
.link-arrow:hover svg { transform: translateX(5px); }
.link-arrow--light { color: var(--honey-2); }
.round-btn { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; cursor: pointer; transition: background-color .3s, color .3s; }
.round-btn svg { width: 20px; height: 20px; }
.round-btn--prev svg { transform: rotate(180deg); }
.round-btn:hover { background: var(--cream); color: var(--bark); border-color: var(--cream); }

/* ------------------------------------------------------------ header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hh); background: var(--pale); transition: height .5s var(--ease), box-shadow .5s; }
.site-header.is-scrolled { --hh: var(--hh-s); box-shadow: 0 1px 0 rgba(42, 32, 23, .1), 0 16px 34px -26px rgba(42, 32, 23, .5); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.brand { flex: none; display: block; border-radius: 8px; }
.brand__logo { width: auto; height: 70px; transform-origin: left center; transition: transform .5s var(--ease); }
.site-header.is-scrolled .brand__logo { transform: scale(.78); }
.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(12px, 1.45vw, 28px); list-style: none; margin: 0; padding: 0; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 46px; padding: 0 2px; border: 0; background: none; cursor: pointer; font: 500 .97rem/1 var(--f-body); color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px; background: var(--rod); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__item--menu.is-open .nav__link::after { transform: scaleX(1); transform-origin: left; }
.nav__trigger { padding-right: 21px; }
.nav__trigger::after { right: 21px; }
.nav__trigger::before { content: ''; position: absolute; right: 0; top: 50%; width: 15px; height: 15px; margin-top: -7px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .4s var(--ease); }
.nav__item--menu.is-open .nav__trigger::before { transform: rotate(180deg); }
.nav__item--menu { position: relative; }
.nav__panel { position: absolute; top: calc(100% + 16px); left: 50%; width: min(740px, 64vw); padding: 18px; border-radius: 22px; background: var(--paper); box-shadow: 0 30px 70px -30px rgba(42, 32, 23, .55), 0 0 0 1px rgba(42, 32, 23, .06); opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .3s, transform .45s var(--ease), visibility 0s linear .45s; }
.nav__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.nav__item--menu.is-open .nav__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s, transform .45s var(--ease), visibility 0s; }
.nav__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.nav__tile { display: grid; gap: 10px; padding: 8px; border-radius: 14px; text-decoration: none; transition: background-color .3s; }
.nav__tile:hover, .nav__tile:focus-visible { background: var(--pale); }
.nav__tile-img { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: clip; }
.nav__tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.nav__tile:hover .nav__tile-img img { transform: scale(1.06); }
.nav__tile-body { display: grid; gap: 2px; padding: 0 4px 4px; }
.nav__tile-title { font: 600 1.1rem/1.2 var(--f-display); }
.nav__tile-sub { font-size: .9rem; color: var(--ink-2); line-height: 1.35; }
.nav__all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 6px 12px 0; font-weight: 600; color: var(--rod); text-decoration: none; white-space: nowrap; }
.nav__all svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.nav__all:hover svg { transform: translateX(4px); }
.site-header__actions { flex: none; display: flex; align-items: center; gap: 14px; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: .97rem; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.header-phone svg { width: 20px; height: 20px; color: var(--rod); }
.burger { display: none; position: relative; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--bark); cursor: pointer; }
.burger__bar { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: var(--cream); transition: transform .45s var(--ease), top .45s var(--ease); }
.burger__bar:first-child { top: 19px; }
.burger__bar:last-child { top: 27px; }
.burger[aria-expanded="true"] .burger__bar:first-child { top: 23px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:last-child { top: 23px; transform: rotate(-45deg); }

/* mobile menu: a sibling of the header so the header never traps it */
.mnav { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: calc(var(--hh0) + 20px) var(--gutter) max(28px, env(safe-area-inset-bottom)); background: var(--pale); visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease), opacity .4s, visibility 0s linear .7s; }
.mnav.is-open { visibility: visible; opacity: 1; clip-path: inset(0); transition: clip-path .7s var(--ease), opacity .2s, visibility 0s; }
.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__list > li { border-bottom: 1px solid rgba(42, 32, 23, .12); }
.mnav__link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 6px 0; border: 0; background: none; font: 500 clamp(1.5rem, 6vw, 2rem)/1.1 var(--f-display); color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; }
.mnav__link svg { width: 22px; height: 22px; transition: transform .4s var(--ease); }
.mnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mnav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.mnav__sub.is-open { grid-template-rows: 1fr; }
.mnav__sub-inner { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 4px; }
.mnav__sub.is-open .mnav__sub-inner { padding-bottom: 10px; }
.mnav__sub a { display: flex; align-items: center; min-height: 46px; font-size: 1.08rem; text-decoration: none; color: var(--ink-2); }
.mnav__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.mnav__phone { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 600; text-decoration: none; }
.mnav__phone svg { width: 22px; height: 22px; color: var(--rod); }
html.menu-open, html.menu-open body { overflow: hidden; }

/* ------------------------------------------------------------ main + hero */
main { padding-top: var(--hh0); }
.hero { position: relative; display: flex; align-items: center; height: calc(100svh - var(--hh0)); min-height: 580px; overflow: hidden; background: #d9d3cf; }
.hero__media { position: absolute; inset: 0; overflow: clip; }
.hero__parallax { position: absolute; inset: -2.5%; will-change: transform; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero__loom { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; }
.hero__loom span { position: absolute; left: 0; width: 100%; background-repeat: no-repeat; will-change: transform; }
html.intro .hero__loom { display: block; }
.hero__mist { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(236, 231, 228, .9) 0%, rgba(236, 231, 228, .72) 24%, rgba(236, 231, 228, .28) 44%, rgba(236, 231, 228, 0) 58%); pointer-events: none; }
.hero__content { position: relative; z-index: 3; }
.hero__copy { max-width: min(44%, 780px); }
.hero__title { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.018em; color: var(--ink); }
.hero__title em { color: var(--rod); }
.hero__lede { margin-top: clamp(16px, 2.4vh, 26px); font-size: var(--fs-lede); line-height: 1.55; color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(22px, 3.4vh, 36px); }
.hero__toggle { position: absolute; right: var(--gutter); bottom: 26px; z-index: 4; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(42, 32, 23, .6); color: var(--cream); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color .3s; }
.hero__toggle:hover { background: var(--bark); }
.hero__toggle svg { width: 18px; height: 18px; }
.hero__toggle-play { display: none; }
.hero__toggle[aria-pressed="true"] .hero__toggle-play { display: block; }
.hero__toggle[aria-pressed="true"] .hero__toggle-pause { display: none; }

/* word masks for the woven heading reveals: padded so descenders and italic tails never clip */
.w { display: inline-block; overflow: hidden; overflow: clip; padding: calc(.42em + 4px) .08em calc(.4em + 4px); margin: calc(-.42em - 4px) -.08em calc(-.4em - 4px); vertical-align: baseline; }
.wi { display: inline-block; }

/* ------------------------------------------------------------ routes (three ways in) */
.routes { position: relative; padding: var(--sec-y) 0; background: var(--pale); }
.routes__title { font-size: var(--fs-h2); margin-bottom: clamp(26px, 4vh, 46px); }
.routes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 28px); }
.route { position: relative; display: block; height: min(58vh, 580px); min-height: 380px; border-radius: 24px; overflow: clip; isolation: isolate; color: var(--cream); text-decoration: none; background: var(--bark); }
.route__media { position: absolute; inset: 0; display: block; }
.route__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.route:hover .route__media img, .route:focus-visible .route__media img { transform: scale(1.06); }
.route::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(24, 18, 12, 0) 34%, rgba(24, 18, 12, .5) 58%, rgba(24, 18, 12, .88) 100%); }
.route__rod { position: absolute; inset: 12px; z-index: 3; width: calc(100% - 24px); height: calc(100% - 24px); overflow: visible; pointer-events: none; }
.route__rod rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); rx: 16px; fill: none; stroke: var(--honey-2); stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease); }
.route:hover .route__rod rect, .route:focus-visible .route__rod rect { stroke-dashoffset: 0; }
.route__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 8px; padding: clamp(20px, 2.1vw, 34px); }
.route__title { font-size: clamp(1.7rem, 2.1vw, 2.15rem); font-weight: 580; color: var(--cream); }
.route__text { font-size: 1rem; line-height: 1.5; color: rgba(239, 233, 218, .92); }
.route__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 600; color: var(--honey-2); }
.route__cta svg { width: 20px; height: 20px; transition: transform .45s var(--ease); }
.route:hover .route__cta svg { transform: translateX(5px); }

/* ------------------------------------------------------------ maker */
.maker { position: relative; padding: var(--sec-y) 0; background: var(--paper); overflow: hidden; }
.maker__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 5.5vw, 110px); align-items: center; }
.maker__art { position: relative; height: min(76vh, 720px); }
.frame { margin: 0; border-radius: var(--radius); overflow: clip; background: var(--pale-2); box-shadow: 0 34px 60px -34px rgba(42, 32, 23, .55); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.maker__main { position: absolute; left: 0; top: 0; width: 74%; height: 86%; }
.maker__outline { position: absolute; left: 5%; top: 6%; width: 74%; height: 86%; border: 1.5px solid var(--rod); border-radius: 26px; opacity: .55; }
.maker__inset { position: absolute; right: 0; bottom: 0; width: 42%; aspect-ratio: 4 / 5; border: 8px solid var(--paper); border-radius: 22px; }
.maker__inset figcaption { position: absolute; left: 10px; bottom: 10px; padding: 7px 12px; white-space: nowrap; border-radius: 10px; background: rgba(243, 243, 234, .92); font: italic 500 .95rem/1.1 var(--f-display); color: var(--ink); }
.maker__text h2 { font-size: var(--fs-h2); margin-bottom: clamp(16px, 2.6vh, 26px); }
.maker__lede { font-size: var(--fs-lede); line-height: 1.55; margin-bottom: 16px; }
.maker__text > p:not(.maker__lede) { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(20px, 3.4vh, 34px) 0 clamp(12px, 2vh, 20px); border-top: 1px solid rgba(42, 32, 23, .18); }
.facts__item { padding: 16px 16px 0 0; }
.facts__item + .facts__item { padding-left: 18px; border-left: 1px solid rgba(42, 32, 23, .14); }
.facts dt { font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rod); }
.facts dd { margin: 6px 0 0; font: 500 clamp(1.05rem, 1.1vw, 1.25rem)/1.3 var(--f-display); }
[data-fill] .fw { transition: none; }

/* ------------------------------------------------------------ menagerie (gallery shelf) */
.menagerie { position: relative; padding: 0 0 var(--sec-y); background: var(--bark); color: var(--cream); overflow: hidden; }
.marquee { overflow: clip; padding: 18px 0; margin-bottom: clamp(30px, 5.5vh, 60px); border-bottom: 1px solid rgba(239, 233, 218, .14); white-space: nowrap; }
.marquee__track { display: inline-flex; animation: marquee 46s linear infinite; }
.marquee__group { display: inline-flex; flex: none; }
.marquee__word { display: inline-flex; align-items: center; gap: .9em; padding-right: .9em; font: italic 420 clamp(1.3rem, 1.9vw, 1.9rem)/1.2 var(--f-display); color: var(--honey-2); }
.marquee__word::after { content: ''; width: .42em; height: .42em; border-radius: 50%; border: 1.5px solid rgba(217, 168, 106, .55); }
@keyframes marquee { to { transform: translateX(-50%); } }
.menagerie__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px 40px; margin-bottom: clamp(22px, 3.6vh, 40px); }
.menagerie__intro h2 { font-size: var(--fs-h2); }
.menagerie__intro p { margin-top: 12px; color: var(--cream-2); font-size: var(--fs-lede); }
.menagerie__controls { display: flex; align-items: center; gap: 14px; flex: none; }
.menagerie__count { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 4.5em; }
.menagerie__bar { position: relative; width: clamp(80px, 10vw, 160px); height: 2px; background: rgba(239, 233, 218, .2); overflow: hidden; }
.menagerie__bar-fill { position: absolute; inset: 0; background: var(--honey-2); transform-origin: left; transform: scaleX(.2); }
.shelf { --piece-h: min(46vh, 520px); position: relative; overflow: hidden; padding-left: max(var(--gutter), calc((100% - var(--max)) / 2)); cursor: grab; }
.shelf.is-dragging { cursor: grabbing; }
.shelf__track { display: flex; gap: clamp(16px, 2vw, 34px); width: max-content; margin: 0; padding: 0 var(--gutter) 0 0; list-style: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.piece { flex: none; }
.piece figure { margin: 0; }
.piece__frame { width: calc(var(--piece-h) * var(--ar)); height: var(--piece-h); border-radius: 20px; overflow: clip; background: var(--bark-2); }
.piece__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); pointer-events: none; }
.piece figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 14px; }
.piece__name { font: 500 clamp(1.2rem, 1.4vw, 1.5rem)/1.2 var(--f-display); }
.piece__where { font-size: .9rem; color: var(--cream-2); letter-spacing: .05em; }
.menagerie__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-top: clamp(18px, 3vh, 32px); }
.menagerie__hint { font-size: .95rem; color: var(--cream-2); }
.drag-cursor { position: fixed; left: 0; top: 0; z-index: 120; width: 92px; height: 92px; margin: -46px 0 0 -46px; display: grid; place-items: center; border-radius: 50%; background: var(--honey-2); color: var(--bark); font: 600 .95rem/1 var(--f-body); pointer-events: none; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--ease); }
.drag-cursor.is-on { opacity: 1; transform: scale(1); }
.drag-cursor.is-down { transform: scale(.8); }

/* static gallery (no JS, reduced motion): a grid that fits the screen */
html:not(.motion) .shelf { cursor: auto; padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); }
html:not(.motion) .shelf__track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: auto; padding: 0; align-items: start; }
html:not(.motion) .piece__frame { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 46vh; }
html:not(.motion) .piece__frame img { transform: none; }
html:not(.motion) .menagerie__controls, html:not(.motion) .menagerie__hint { display: none; }
html:not(.motion) .marquee__track { animation: none; }

/* ------------------------------------------------------------ process (commission scene) */
.process { position: relative; display: flex; align-items: center; min-height: 100svh; padding: calc(var(--hh-s) + 28px) 0 36px; background: var(--pale-2); overflow: hidden; }
.process__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(32px, 5vw, 96px); align-items: center; width: min(100% - 2 * var(--gutter), var(--max)); }
.process__text h2 { font-size: var(--fs-h2); }
.process__intro { margin: 14px 0 clamp(16px, 2.6vh, 26px); font-size: var(--fs-lede); color: var(--ink-2); }
.steps { list-style: none; margin: 0 0 clamp(18px, 3vh, 28px); padding: 0; }
.step { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: clamp(10px, 1.6vh, 16px) 0; border-top: 1px solid rgba(42, 32, 23, .16); transition: opacity .5s; }
.step:last-child { border-bottom: 1px solid rgba(42, 32, 23, .16); }
.step__num { position: relative; z-index: 1; font: 600 1.05rem/1.6 var(--f-display); color: var(--rod); font-variant-numeric: tabular-nums; }
.step__title { font-size: clamp(1.15rem, 1.2vw, 1.4rem); font-weight: 600; margin-bottom: 4px; }
.step p { font-size: .98rem; line-height: 1.5; color: var(--ink-2); }
.process--pinned .step { opacity: .4; }
.process--pinned .step.is-active { opacity: 1; }
.board { position: relative; height: min(calc(100svh - var(--hh-s) - 70px), 760px); min-height: 420px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 22px 26px 20px; border-radius: 26px; overflow: hidden; background: var(--bark); }
.board::before { content: ''; position: absolute; inset: 0; background: url('../img/weave-texture-1600.jpg') center / cover; opacity: .06; mix-blend-mode: screen; }
.board__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.board__art { position: relative; justify-self: center; align-self: center; height: 100%; max-height: 100%; aspect-ratio: 1000 / 1137; max-width: 100%; }
.board__svg, .board__finished { position: absolute; inset: 0; width: 100%; height: 100%; }
.board__finished { object-fit: contain; }
.board__svg path, .board__svg circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.board__svg .board__moon { fill: rgba(239, 233, 218, .05); stroke: rgba(239, 233, 218, .55); stroke-width: 2.5; }
.board__sketch { stroke: rgba(239, 233, 218, .75); stroke-width: 2.6; }
.board__rod--0 { stroke: var(--honey); stroke-width: 10; }
.board__rod--1 { stroke: #8A5A2B; stroke-width: 8; }
.board__rod--2 { stroke: var(--honey-2); stroke-width: 6; }
.board__rod--3 { stroke: #A8743F; stroke-width: 8; }
.board__weft { stroke-width: 5; opacity: .92; }
.board__weft--0 { stroke: var(--honey); }
.board__weft--1 { stroke: #7A4F28; }
.board__weft--2 { stroke: #B98A55; }
.board__caption { position: relative; z-index: 2; font: italic 450 1.05rem/1.3 var(--f-display); color: var(--cream-2); }
.board__count { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cream-2); }
.board__progress { position: relative; flex: 0 1 34%; height: 2px; background: rgba(239, 233, 218, .18); overflow: hidden; }
.board__progress-fill { position: absolute; inset: 0; background: var(--honey-2); transform-origin: left; transform: scaleX(1); }
/* static board: the finished hare over a faint echo of the drawing */
html:not(.motion) .board__svg { opacity: .32; }

/* ------------------------------------------------------------ reviews */
.reviews { position: relative; padding: var(--sec-y) 0; background: var(--moss); color: var(--cream); overflow: hidden; }
.reviews__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 100px); align-items: center; }
.reviews h2 { font-size: var(--fs-h2); margin-bottom: clamp(22px, 3.6vh, 36px); }
.quotes { display: grid; }
.quote { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s linear .6s; }
.quote.is-active { opacity: 1; visibility: visible; transition: opacity .7s .15s, visibility 0s; }
.quote blockquote { margin: 0; }
.quote p { font: italic 420 clamp(1.5rem, 2.25vw, 2.35rem)/1.3 var(--f-display); letter-spacing: -.005em; }
.quote figcaption { display: flex; align-items: baseline; gap: 14px; margin-top: 20px; }
.quote__name { font-weight: 600; font-size: 1.05rem; }
.quote__piece { color: var(--honey-2); font-size: 1rem; }
.quote__piece::before { content: ''; display: inline-block; width: 22px; height: 1.5px; margin-right: 12px; vertical-align: middle; background: currentColor; }
.quotes__controls { display: flex; align-items: center; gap: 16px; margin: clamp(26px, 4vh, 40px) 0 clamp(14px, 2vh, 22px); }
.quotes__count { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.2em; text-align: center; }
.quotes__timer { position: relative; width: clamp(70px, 8vw, 120px); height: 2px; background: rgba(239, 233, 218, .22); overflow: hidden; }
.quotes__timer-fill { position: absolute; inset: 0; background: var(--honey-2); transform-origin: left; transform: scaleX(0); }
.round-btn--light:hover { background: var(--cream); color: var(--moss); }
.reviews__media { display: flex; justify-content: flex-end; }
.reviews__stack { position: relative; width: min(100%, 620px, 70vh); aspect-ratio: 1; }
.frame--dark { background: #1d2417; }
.rv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.07); transition: opacity 1s var(--ease), transform 1.8s var(--ease); }
.rv-img.is-active { opacity: 1; transform: scale(1); }

/* ------------------------------------------------------------ shop */
.shop { position: relative; padding: var(--sec-y) 0; background: var(--pale); }
.shop__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 90px); align-items: end; margin-bottom: clamp(26px, 4vh, 44px); }
.shop__head h2 { font-size: var(--fs-h2); }
.shop__head p { color: var(--ink-2); font-size: var(--fs-lede); }
.shop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 34px); list-style: none; margin: 0; padding: 0; }
.product__link { position: relative; display: block; color: inherit; text-decoration: none; }
.product__media { display: block; aspect-ratio: 5 / 4; max-height: 40vh; width: 100%; border-radius: 20px; overflow: clip; background: var(--pale-2); }
.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.product__link:hover .product__media img { transform: scale(1.05); }
.product__body { display: grid; gap: 6px; padding-top: 16px; }
.product__name { font-size: clamp(1.25rem, 1.4vw, 1.55rem); font-weight: 580; }
.product__text { color: var(--ink-2); }
.product__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 600; color: var(--rod); }
.product__cta svg { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.product__link:hover .product__cta svg { transform: translateX(5px); }
/* her shop on The British Craft House (2026-10-14): the client's own badge beside her announcement */
.bch { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(22px, 3.4vw, 64px); margin-bottom: clamp(28px, 4.4vh, 52px); padding: clamp(16px, 1.8vw, 26px) clamp(22px, 4vw, 72px) clamp(16px, 1.8vw, 26px) clamp(16px, 1.8vw, 26px); border-radius: var(--radius); background: var(--paper); box-shadow: 0 30px 60px -40px rgba(42, 32, 23, .5); isolation: isolate; }
.bch::after { content: ''; position: absolute; inset: 9px; z-index: -1; border: 1.5px dashed rgba(37, 111, 113, .38); border-radius: calc(var(--radius) - 9px); pointer-events: none; }
.bch__badge { display: block; width: clamp(150px, 14vw, 230px); border-radius: 12px; text-decoration: none; transition: transform .6s var(--ease); }
.bch__badge img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 18px 34px -22px rgba(42, 32, 23, .6); }
.bch__badge:hover { transform: rotate(-3deg) scale(1.03); }
.bch__quote { margin: 0; font: italic 430 clamp(1.3rem, 1.25vw + .62rem, 2rem)/1.32 var(--f-display); color: var(--ink); text-wrap: pretty; }
.bch__quote em { font-style: italic; font-weight: 600; color: var(--bch-teal); }
.bch__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(14px, 2.2vh, 24px); }
.bch__note { margin: 0; color: var(--ink-2); }
@media (max-width: 599px) {
  .bch { grid-template-columns: 1fr; justify-items: start; padding: 20px 20px 24px; }
  .bch__badge { width: 132px; }
  .bch__actions .btn { width: 100%; }
}

/* 'Fully booked': a rubber stamp pressed onto the workshop ticket (client, 2026-10-14) */
.stamp { display: inline-block; margin: 0; padding: 9px 14px 8px; border: 2.5px solid currentColor; border-radius: 6px; color: var(--barn); font: 700 1.02rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transform: rotate(-7deg); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .0), inset 0 0 0 4.5px rgba(154, 63, 44, .0); }
.ticket .stamp { position: absolute; right: clamp(14px, 1.6vw, 24px); bottom: 16px; z-index: 2; background: rgba(239, 233, 218, .82); }
.stamp--hero { color: var(--honey-2); font-size: 1.08rem; padding: 12px 16px 11px; background: rgba(42, 32, 23, .35); }
.stamp--small { color: var(--honey-2); font-size: .9rem; transform: rotate(-4deg); }
.note-card__full { margin: 2px 0 0; }
.workshop__actions p a, .wsmake__note a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.workshop__actions p a { color: var(--honey-2); }
@media (max-width: 767px) {
  .ticket .stamp { position: relative; right: auto; bottom: auto; justify-self: end; margin: -4px 20px 18px 0; font-size: .92rem; }
}
.shop__foot { display: flex; justify-content: center; margin-top: clamp(24px, 4vh, 44px); }

/* ------------------------------------------------------------ workshop */
.workshop { position: relative; padding: var(--sec-y) 0; background: var(--bark); color: var(--cream); overflow: hidden; }
.workshop__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 100px); align-items: center; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.workshop__media { position: relative; margin: 0; height: min(78vh, 780px); border-radius: 26px; overflow: clip; }
.workshop__media img { width: 100%; height: 100%; object-fit: cover; }
.workshop__glow { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 110, .55), rgba(255, 196, 110, 0) 70%); mix-blend-mode: screen; pointer-events: none; opacity: .5; }
.workshop__glow--a { left: 52%; top: 38%; }
.workshop__glow--b { left: 68%; top: 31%; width: 16%; }
.workshop__panel h2 { font-size: var(--fs-h2); margin-bottom: clamp(18px, 3vh, 28px); }
.ticket { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; margin-bottom: clamp(18px, 3vh, 28px); border-radius: 18px; background: var(--cream); color: var(--bark); overflow: hidden; }
.ticket::before, .ticket::after { content: ''; position: absolute; left: calc(168px - 11px); width: 22px; height: 22px; border-radius: 50%; background: var(--bark); }
.ticket::before { top: -11px; }
.ticket::after { bottom: -11px; }
.ticket__date { --stub: 168px; width: var(--stub); display: grid; align-content: center; justify-items: center; gap: 0; padding: 20px 18px; text-align: center; border-right: 2px dashed rgba(42, 32, 23, .3); background: var(--honey-2); }
.ticket__day { font-size: .95rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ticket__big { font: 650 clamp(3.4rem, 4.4vw, 4.2rem)/1 var(--f-display); letter-spacing: -.02em; }
.ticket__month { font-weight: 600; white-space: nowrap; }
.ticket__rows { display: grid; gap: 10px; margin: 0; padding: 20px 24px; }
.ticket__rows div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.ticket__rows dt { font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rod); padding-top: 2px; }
.ticket__rows dd { margin: 0; font-weight: 500; line-height: 1.4; }
.workshop__text { color: var(--cream-2); margin-bottom: 18px; }
.included { list-style: none; margin: 0 0 clamp(20px, 3.4vh, 30px); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.included li { display: flex; align-items: center; gap: 10px; }
.included svg { width: 20px; height: 20px; flex: none; color: var(--honey-2); }
.workshop__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.workshop__actions p { color: var(--cream-2); }

/* ------------------------------------------------------------ contact */
.contact { position: relative; display: flex; align-items: center; min-height: min(100svh, 880px); padding: var(--sec-y) 0; color: var(--cream); overflow: hidden; background: #1f2418; }
.contact__bg { position: absolute; inset: 0; }
.contact__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transform-origin: 70% 50%; }
.contact__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 22, 14, .86) 0%, rgba(20, 22, 14, .7) 38%, rgba(20, 22, 14, .1) 70%); }
.contact__inner { position: relative; z-index: 1; }
.contact h2 { font-size: var(--fs-h2); margin-bottom: 18px; }
.contact__copy { max-width: min(54%, 780px); }
.contact__text { font-size: var(--fs-lede); color: var(--cream); }
.contact__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: clamp(22px, 3.6vh, 34px) 0 clamp(20px, 3vh, 30px); }
.contact__details { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; list-style: none; margin: 0; padding: 0; }
.contact__details li { display: flex; align-items: center; gap: 10px; }
.contact__details svg { width: 20px; height: 20px; color: var(--honey-2); flex: none; }
.contact__details a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.contact__details a:hover { text-decoration: underline; }
.contact__social { gap: 6px !important; }
.contact__social a { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(239, 233, 218, .35); transition: background-color .3s, color .3s; }
.contact__social a:hover { background: var(--cream); color: var(--bark); }
.contact__social svg { color: currentColor; }

/* ------------------------------------------------------------ footer */
.site-footer { position: relative; padding: clamp(56px, 8vh, 90px) 0 28px; background: var(--pale); color: var(--ink); overflow: hidden; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px clamp(24px, 4vw, 72px); }
.site-footer__logo { width: 240px; height: auto; margin-bottom: 18px; }
.site-footer__brand p { color: var(--ink-2); }
.site-footer__title { font-size: 1.25rem; font-weight: 600; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-footer__col a, .site-footer__col > ul > li > span { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; }
.site-footer__col a:hover { color: var(--rod); }
.site-footer__col svg { width: 19px; height: 19px; flex: none; color: var(--rod); }
.site-footer__shop { margin-top: 14px; color: var(--cream) !important; }
.site-footer__base { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(40px, 6vh, 64px); padding-top: 22px; border-top: 1px solid rgba(42, 32, 23, .15); color: var(--ink-2); font-size: .95rem; }
.site-footer__base a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__credit { margin-left: auto; }
.site-footer__credit a { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ motion: starting states (only when motion is on) */
html.motion [data-reveal] { opacity: 0; transform: translateY(26px); }
html.motion [data-split]:not(.is-split) { opacity: 0; }
html.motion.intro .site-header { transform: translateY(-100%); }
html.motion [data-hero-fade] { opacity: 0; transform: translateY(18px); }
html.motion .hero__video { opacity: 0; }
html.motion .route { opacity: 0; }
html.motion [data-wipe] { clip-path: inset(100% 0 0 0 round 20px); }
html.motion .board__finished { opacity: 0; }
html.motion [data-stamp] { opacity: 0; }
html.motion .bch__badge { opacity: 0; }
html.motion .ticket { opacity: 0; transform: translateY(30px) rotate(-2deg); }
html.motion .piece { opacity: 0; transform: translateY(60px); }
html.intro-done .site-header { transform: none; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1479px) {
  .header-phone__num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .header-phone { width: 44px; justify-content: center; border-radius: 50%; }
  .brand__logo { height: 64px; }
}
@media (max-width: 1359px) {
  .nav { display: none; }
  .burger { display: block; }
  .site-header__actions { margin-left: auto; }
  .brand__logo { height: 58px; }
}
@media (max-width: 1100px) {
  .routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routes__grid .route:last-child { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr; }
  .facts__item + .facts__item { padding-left: 0; border-left: 0; }
  .facts__item { padding: 12px 0; border-bottom: 1px solid rgba(42, 32, 23, .12); }
}
@media (max-width: 1023px) {
  .process { min-height: 0; padding: var(--sec-y) 0; }
  .process__grid { grid-template-columns: 1fr; }
  .process__board { order: -1; }
  .board { height: min(96vw, 620px, 74svh); }
  .workshop__grid { grid-template-columns: 1fr; }
  .workshop__media { height: min(60vw, 560px, 70svh); }
  .reviews__grid { grid-template-columns: 1fr; }
  .reviews__media { justify-content: flex-start; order: -1; }
  .reviews__stack { width: min(100%, 520px, 60svh); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  :root { --hh0: 78px; --hh-s: 66px; }
  .hero { flex-direction: column; align-items: stretch; height: auto; min-height: calc(100svh - var(--hh0)); background: var(--pale); }
  .hero__media { position: relative; inset: auto; height: 50svh; min-height: 300px; flex: none; }
  .hero__video { object-position: 66% 50%; }
  .hero__mist { display: none; }
  .hero__content { flex: 1; display: flex; align-items: center; padding: 26px 0 30px; }
  .hero__copy { max-width: none; }
  .hero__toggle { bottom: 14px; }
  .maker__grid { grid-template-columns: 1fr; }
  .maker__art { height: min(118vw, 640px); }
  .shop__head { grid-template-columns: 1fr; }
  .shop__grid { grid-template-columns: 1fr; max-width: 560px; }
  .product__media { max-height: none; }
  .menagerie__head { flex-direction: column; align-items: flex-start; }
  .shelf { --piece-h: min(62vw, 400px, 48svh); }
  html:not(.motion) .shelf__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:not(.motion) .piece:last-child { grid-column: 1 / -1; }
  html:not(.motion) .piece:last-child .piece__frame { aspect-ratio: 16 / 10; }
  html:not(.motion) .piece figcaption { flex-direction: column; gap: 2px; }
  .contact__bg img { object-position: 76% 50%; }
  .contact__bg::after { background: linear-gradient(0deg, rgba(20, 22, 14, .92) 0%, rgba(20, 22, 14, .72) 55%, rgba(20, 22, 14, .3) 100%); }
  .contact { align-items: flex-end; min-height: 0; padding-top: 42vh; }
}
@media (max-width: 767px) {
  .routes__grid { grid-template-columns: 1fr; }
  .routes__grid .route:last-child { grid-column: auto; }
  .route { height: min(112vw, 460px); min-height: 0; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__credit { margin-left: 0; }
  .included { grid-template-columns: 1fr; }
  .ticket { grid-template-columns: 1fr; }
  .ticket::before, .ticket::after { display: none; }
  .ticket__date { width: auto; border-right: 0; border-bottom: 2px dashed rgba(42, 32, 23, .3); grid-template-columns: auto auto auto; justify-content: start; justify-items: start; align-items: baseline; column-gap: 12px; padding: 14px 20px; text-align: left; }
  .ticket__big { font-size: 2.4rem; }
  .brand__logo { height: 50px; }
}
@media (max-width: 599px) {
  .header-shop { display: none; }
  .site-header__actions { gap: 8px; }
  .step { grid-template-columns: 44px minmax(0, 1fr); }
  .hero__actions .btn { flex: 1 1 auto; }
  .quotes__controls { gap: 12px; }
}
@media (max-width: 389px) {
  .brand__logo { height: 44px; }
  .site-header__inner { gap: 10px; }
}
@media (max-width: 370px) {
  .brand__logo { height: 40px; }
}
@media (max-width: 340px) {
  .brand__logo { height: 34px; }
  .site-header__actions { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* addresses set as deliberate lines */
.addr { display: grid; line-height: 1.35; }
.site-footer__contact .addr-item { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-top: 10px; }
.site-footer__contact .addr-item svg { margin-top: 2px; }
.site-footer__col .addr { display: grid; gap: 0; min-height: 0; line-height: 1.4; }
.ticket__rows .addr { display: grid; }
@media (max-width: 899px) { .contact__copy { max-width: none; } }

/* =================================================================================================================
   INNER PAGES (2026-09-25). Same tokens and motion language as the homepage; each page adds its own set piece.
   ================================================================================================================= */
.nav__item--menu.is-current .nav__link::after { transform: scaleX(1); transform-origin: left; }
.nav__tile[aria-current="page"] { background: var(--pale); }
.mnav__link[aria-current="page"], .mnav__sub a[aria-current="page"] { color: var(--rod); }
.site-footer__col a[aria-current="page"], .site-footer__base a[aria-current="page"] { color: var(--rod); }
.crumbs { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: clamp(10px, 1.6vh, 18px); font-size: .95rem; font-weight: 500; color: var(--ink-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--rod); }
.crumbs a:hover { text-decoration: underline; }
.crumbs--light { color: var(--cream-2); }
.crumbs--light a { color: var(--honey-2); }

/* ------------------------------------------------------------ page hero: split (text + framed photo) */
.phero { position: relative; overflow: hidden; }
.phero--split { display: flex; align-items: center; min-height: calc(100svh - var(--hh0)); padding: clamp(28px, 5vh, 56px) 0; background: var(--pale); }
.phero--split::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 40%; background: var(--bark) url('../img/weave-texture-1600.jpg') center / cover; background-blend-mode: soft-light; opacity: .96; }
.phero--split::after { content: ''; position: absolute; top: 0; bottom: 0; right: 40%; width: 1.5px; background: linear-gradient(180deg, transparent, rgba(138, 90, 43, .35) 20%, rgba(138, 90, 43, .35) 80%, transparent); }
.phero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.phero__title { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.018em; }
.phero__title em { color: var(--rod); }
.phero__lede { margin-top: clamp(16px, 2.4vh, 26px); font-size: var(--fs-lede); line-height: 1.55; }
.phero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(22px, 3.4vh, 36px); }
.phero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(26px, 4.4vh, 46px) 0 0; border-top: 1px solid rgba(42, 32, 23, .18); }
.phero__facts > div { padding: 14px 16px 0 0; }
.phero__facts > div + div { padding-left: 18px; border-left: 1px solid rgba(42, 32, 23, .14); }
.phero__facts dt { font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rod); }
.phero__facts dd { margin: 6px 0 0; font: 500 clamp(1.05rem, 1.1vw, 1.25rem)/1.3 var(--f-display); }
.phero__art { --cap: min(calc(100svh - var(--hh0) - 90px), 760px); position: relative; height: var(--cap); }
.phero__frame { position: absolute; left: 0; top: 0; height: 94%; aspect-ratio: var(--ar, .805); max-width: 92%; }
.phero__frame img { width: 100%; height: 100%; object-fit: cover; }
.phero__frame figcaption { position: absolute; left: 12px; bottom: 12px; padding: 7px 12px; border-radius: 10px; background: rgba(243, 243, 234, .92); font: italic 500 .95rem/1.2 var(--f-display); color: var(--ink); }
.phero__outline { position: absolute; left: 5%; bottom: 0; height: 94%; aspect-ratio: var(--ar, .805); max-width: 92%; border: 1.5px solid var(--honey-2); border-radius: 26px; opacity: .55; }

/* ------------------------------------------------------------ commissions: kinds of commission */
.kinds { position: relative; padding: var(--sec-y) 0; background: var(--paper); }
.kinds__head, .split-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px clamp(32px, 5vw, 90px); align-items: end; margin-bottom: clamp(26px, 4vh, 46px); }
.kinds__head h2, .split-head h2 { font-size: var(--fs-h2); }
.kinds__head p, .split-head p { color: var(--ink-2); font-size: var(--fs-lede); }
.kinds__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 34px); list-style: none; margin: 0; padding: 0; }
.kind__media { margin: 0 0 18px; aspect-ratio: 5 / 4; max-height: 42vh; width: 100%; border-radius: var(--radius); overflow: clip; background: var(--pale-2); }
.kind__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.kind:hover .kind__media img { transform: scale(1.05); }
.kind__title { font-size: clamp(1.3rem, 1.5vw, 1.65rem); font-weight: 580; margin-bottom: 8px; }
.kind p { color: var(--ink-2); }

/* ------------------------------------------------------------ commissions: the soaking scene */
.soak { position: relative; display: flex; align-items: center; min-height: 100svh; padding: calc(var(--hh-s) + 28px) 0 36px; background: var(--bark); color: var(--cream); overflow: hidden; }
.soak__bg { position: absolute; inset: 0; }
.soak__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; opacity: .5; transform-origin: 30% 60%; }
.soak__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 21, 14, .92) 0%, rgba(28, 21, 14, .8) 42%, rgba(28, 21, 14, .55) 100%); }
.soak__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.soak h2 { font-size: var(--fs-h2); }
.soak__intro { margin: 14px 0 clamp(18px, 3vh, 30px); font-size: var(--fs-lede); color: var(--cream-2); }
.soak__steps { list-style: none; margin: 0; padding: 0; counter-reset: soak; }
.soak__step { counter-increment: soak; }
.soak__step::before { content: '0' counter(soak); font: 600 1.05rem/1.6 var(--f-display); color: var(--honey-2); font-variant-numeric: tabular-nums; }
.soak__step { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: clamp(12px, 1.8vh, 18px) 0; border-top: 1px solid rgba(239, 233, 218, .16); transition: opacity .5s; }
.soak__step:last-child { border-bottom: 1px solid rgba(239, 233, 218, .16); }
.soak__step h3 { font-size: clamp(1.15rem, 1.25vw, 1.45rem); font-weight: 600; margin-bottom: 4px; }
.soak__step p { font-size: .98rem; line-height: 1.5; color: var(--cream-2); }
.soak--pinned .soak__step { opacity: .38; }
.soak--pinned .soak__step.is-active { opacity: 1; }
.soak__tank { position: relative; height: min(calc(100svh - var(--hh-s) - 80px), 720px); min-height: 420px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 22px 26px 20px; border-radius: 26px; background: rgba(20, 15, 10, .62); border: 1px solid rgba(239, 233, 218, .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.soak__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.soak__label { font: italic 500 1.1rem/1.2 var(--f-display); color: var(--honey-2); min-width: 7em; }
.soak__bar { position: relative; flex: 1 1 auto; max-width: 40%; height: 2px; background: rgba(239, 233, 218, .18); overflow: hidden; }
.soak__bar-fill { position: absolute; inset: 0; background: var(--honey-2); transform-origin: left; transform: scaleX(1); }
.soak__count { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cream-2); }
.soak__svg { width: 100%; height: 100%; overflow: visible; }
.soak__bubbles circle { fill: none; stroke: rgba(239, 233, 218, .5); stroke-width: 1.5; }
.soak__tub { fill: rgba(170, 180, 176, .07); }
.soak__metal path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.soak__outline { stroke: rgba(214, 220, 216, .7); stroke-width: 3; }
.soak__rib { stroke: rgba(214, 220, 216, .28); stroke-width: 2; }
.soak__rim { stroke: rgba(226, 230, 226, .85); stroke-width: 9; }
.soak__handle { stroke: rgba(214, 220, 216, .6); stroke-width: 4; }
.soak__surface { fill: none; stroke: rgba(239, 233, 218, .6); stroke-width: 2.5; }
.soak__rod { fill: none; stroke-linecap: round; stroke-width: 9; }
.soak__rod--0 { stroke: #C38A4A; }
.soak__rod--1 { stroke: #8A5A2B; stroke-width: 8; }
.soak__rod--2 { stroke: #D9A86A; stroke-width: 7; }
.soak__rod--3 { stroke: #A8743F; }
.soak__rod--4 { stroke: #7A4F28; stroke-width: 7; }
.soak__caption { font: italic 450 1.05rem/1.3 var(--f-display); color: var(--cream-2); }
html:not(.motion) .soak__bubbles { display: none; }

/* ------------------------------------------------------------ commissions: what to put in your message */
.brief { position: relative; padding: var(--sec-y) 0; background: var(--pale-2); overflow: hidden; }
.brief__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 5.5vw, 110px); align-items: center; }
.brief__art { --cap: min(76vh, 720px); position: relative; height: var(--cap); }
.brief__frame { position: absolute; left: 0; top: 0; height: 92%; aspect-ratio: .805; max-width: 94%; }
.brief__outline { position: absolute; left: 5%; top: 7%; height: 92%; aspect-ratio: .805; max-width: 94%; border: 1.5px solid var(--rod); border-radius: 26px; opacity: .55; }
.brief__text h2 { font-size: var(--fs-h2); margin-bottom: clamp(14px, 2.2vh, 22px); }
.brief__lede { font-size: var(--fs-lede); color: var(--ink-2); margin-bottom: clamp(16px, 2.6vh, 26px); }
.checks { list-style: none; margin: 0 0 clamp(20px, 3.4vh, 32px); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2.4vh, 24px) clamp(20px, 2.6vw, 40px); }
.check { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.check__tick { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--bark); }
.check__tick path { fill: none; stroke: var(--honey-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.check h3 { font-size: clamp(1.1rem, 1.15vw, 1.3rem); font-weight: 600; line-height: 1.25; margin: 7px 0 4px; }
.check p { color: var(--ink-2); font-size: .98rem; line-height: 1.5; }
.brief__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }

/* ------------------------------------------------------------ FAQ (moss) */
.faq-sec { position: relative; padding: var(--sec-y) 0; background: var(--moss); color: var(--cream); overflow: hidden; }
.faq-sec__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 100px); align-items: start; }
.faq-sec h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.faq-sec__side > p { color: var(--cream-2); font-size: var(--fs-lede); margin-bottom: clamp(20px, 3.4vh, 34px); }
.faq-sec__media { width: min(100%, 460px, calc(52vh * .808)); aspect-ratio: .808; }
.faq { border-top: 1px solid rgba(239, 233, 218, .18); }
.faq__item { border-bottom: 1px solid rgba(239, 233, 218, .18); }
.faq__q { margin: 0; font-size: inherit; }
.faq__q button { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 72px; padding: 16px 0; border: 0; background: none; color: var(--cream); cursor: pointer; text-align: left; font: 560 clamp(1.15rem, 1.4vw, 1.5rem)/1.3 var(--f-display); }
.faq__q button:hover { color: var(--honey-2); }
.faq__icon { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(239, 233, 218, .4); transition: background-color .3s, border-color .3s, transform .5s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.8px; margin: -.9px 0 0 -7px; border-radius: 2px; background: currentColor; transition: transform .5s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon { background: var(--honey-2); border-color: var(--honey-2); color: var(--bark); transform: rotate(180deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0deg); }
.faq__a { overflow: hidden; }
.faq__inner { padding: 0 60px 22px 0; color: var(--cream-2); }
.faq__inner a { color: var(--honey-2); font-weight: 600; }
html.js .faq__item:not(.is-open) .faq__a { height: 0; }
.faq__text { flex: 1 1 auto; min-width: 0; }
.ask { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 22px; margin-top: clamp(26px, 4vh, 40px); padding: clamp(18px, 2.4vw, 28px); border-radius: 20px; background: rgba(239, 233, 218, .07); border: 1px solid rgba(239, 233, 218, .14); }
.ask__icon { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--honey-2); color: var(--bark); }
.ask h3 { font-size: clamp(1.2rem, 1.4vw, 1.5rem); font-weight: 580; margin-bottom: 4px; }
.ask p { color: var(--cream-2); }
.ask__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; }
.ask--light { background: var(--paper); border-color: rgba(42, 32, 23, .1); }
.ask--light p { color: var(--ink-2); }
.faq--light { border-top-color: rgba(42, 32, 23, .16); }
.faq--light .faq__item { border-bottom-color: rgba(42, 32, 23, .16); }
.faq--light .faq__q button { color: var(--ink); }
.faq--light .faq__q button:hover { color: var(--rod); }
.faq--light .faq__icon { border-color: rgba(42, 32, 23, .35); }
.faq--light .faq__item.is-open .faq__icon { background: var(--bark); border-color: var(--bark); color: var(--cream); }
.faq--light .faq__inner { color: var(--ink-2); }
.faq--light .faq__inner a { color: var(--rod); }

/* ------------------------------------------------------------ onward cards (the homepage route cards) */
.routes--paper { background: var(--paper); }
.routes--pale2 { background: var(--pale-2); }

/* ------------------------------------------------------------ closing call to action band */
.cta-band { position: relative; display: flex; align-items: center; min-height: min(88svh, 800px); padding: var(--sec-y) 0; color: var(--cream); overflow: hidden; background: #1f2418; }
.cta-band__bg { position: absolute; inset: 0; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 22, 14, .88) 0%, rgba(20, 22, 14, .72) 38%, rgba(20, 22, 14, .12) 72%); }
.cta-band__inner { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--fs-h2); margin-bottom: 18px; }
.cta-band h2 em { color: var(--honey-2); }
.cta-band__copy { max-width: min(54%, 780px); }
.cta-band__text { font-size: var(--fs-lede); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(22px, 3.6vh, 34px); }

/* ------------------------------------------------------------ inner motion: starting states (only when motion is on) */
html.motion [data-hero-media] { clip-path: inset(100% 0 0 0 round 20px); }
html.motion .phero__outline { opacity: 0; }
html.motion .kind { opacity: 0; }
html.motion [data-check] { opacity: 0; }
html.motion .check__tick path { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ------------------------------------------------------------ inner pages: responsive */
@media (max-width: 1100px) {
  .phero__facts { grid-template-columns: 1fr; }
  .phero__facts > div + div { padding-left: 0; border-left: 0; }
  .phero__facts > div { padding: 10px 0; border-bottom: 1px solid rgba(42, 32, 23, .12); }
}
@media (max-width: 1023px) {
  .soak { min-height: 0; padding: var(--sec-y) 0; }
  .soak__grid { grid-template-columns: 1fr; }
  .soak__tank { height: min(96vw, 600px, 74svh); }
  .faq-sec__grid { grid-template-columns: 1fr; }
  .faq-sec__media { width: 100%; aspect-ratio: 16 / 9; max-height: 44svh; margin-bottom: 8px; }
  .faq-sec__media img { object-position: 50% 40%; }
}
@media (max-width: 899px) {
  .phero--split { --cap: min(110vw, 480px, 50svh); min-height: 0; padding: 20px 0 var(--sec-y); }
  .phero--split::before { bottom: auto; left: 0; width: 100%; height: calc(var(--cap) * .62 + 20px); }
  .phero--split::after { display: none; }
  .phero__grid { grid-template-columns: 1fr; gap: 26px; }
  .phero__art { --cap: inherit; height: var(--cap); order: -1; }
  .phero__outline { left: 16px; bottom: -14px; }
  .phero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phero__facts > div, .phero__facts > div + div { padding: 12px 10px 0 0; border: 0; }
  .phero__facts > div + div { padding-left: 12px; border-left: 1px solid rgba(42, 32, 23, .14); }
  .phero__facts dt { font-size: .875rem; letter-spacing: .04em; }
  .phero__facts dd { font-size: 1rem; }
  .kinds__head, .split-head { grid-template-columns: 1fr; }
  .kinds__grid { grid-template-columns: 1fr; max-width: 560px; }
  .kind__media { max-height: none; }
  .brief__grid { grid-template-columns: 1fr; }
  .brief__art { --cap: min(112vw, 560px, 66svh); }
  .cta-band { align-items: flex-end; min-height: 0; padding-top: 42vh; }
  .cta-band__bg::after { background: linear-gradient(0deg, rgba(20, 22, 14, .92) 0%, rgba(20, 22, 14, .72) 55%, rgba(20, 22, 14, .25) 100%); }
  .cta-band__copy { max-width: none; }
}
@media (max-width: 599px) {
  .phero__actions .btn { flex: 1 1 auto; }
  .soak__step { grid-template-columns: 44px minmax(0, 1fr); }
  .soak__tank { padding: 16px 16px 14px; }
  .faq__inner { padding-right: 0; }
}

/* ------------------------------------------------------------ gallery: hero (pieces laid out like work on a table) */
.ghero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: calc(100svh - var(--hh0)); padding: clamp(24px, 4vh, 48px) 0 0; background: var(--bark); color: var(--cream); overflow: hidden; }
.ghero::before { content: ''; position: absolute; inset: 0; background: url('../img/weave-texture-1600.jpg') center / cover; opacity: .09; mix-blend-mode: screen; }
.ghero__top { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 20px clamp(32px, 5vw, 96px); align-items: end; }
.ghero__title { font-size: clamp(2.8rem, 5.6vw + .2rem, 7rem); line-height: .98; letter-spacing: -.022em; color: var(--cream); }
.ghero__title em { color: var(--honey-2); }
.ghero__side p { font-size: var(--fs-lede); color: var(--cream-2); }
.ghero__stats { display: flex; gap: 36px; margin: clamp(16px, 2.6vh, 26px) 0 0; }
.ghero__stats dt { font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--honey-2); }
.ghero__stats dd { margin: 2px 0 0; font: 600 clamp(2rem, 2.8vw, 3rem)/1 var(--f-display); }
.ghero__strip { --card: min(15vw, calc((100svh - var(--hh0)) * .34 * .8), 260px); position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 1.6vw, 26px); list-style: none; margin: clamp(22px, 4vh, 44px) 0 0; padding: 0 var(--gutter) clamp(26px, 5vh, 56px); }
.ghero__card { flex: none; width: var(--card); transform: rotate(var(--r)); }
.ghero__card:nth-child(even) { margin-bottom: clamp(18px, 4vh, 44px); }
.ghero__card img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 16px; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .7); }
.ghero__card span { display: block; margin-top: 10px; font: italic 450 1rem/1.2 var(--f-display); color: var(--cream-2); text-align: center; }

/* ------------------------------------------------------------ gallery: filters and tiles */
.works { position: relative; padding: var(--sec-y) 0; background: var(--paper); }
.works__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(24px, 3.6vh, 40px); }
.works__head h2 { font-size: var(--fs-h2); }
.filters { position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; background: var(--pale); }
.filter { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: .98rem; text-decoration: none; color: var(--ink); white-space: nowrap; transition: color .35s; }
.filter:hover { color: var(--rod); }
.filter[aria-current="true"] { color: var(--cream); background: var(--bark); transition: color .35s, background-color 0s .6s; }
.filter__n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: rgba(42, 32, 23, .1); font-size: .875rem; font-variant-numeric: tabular-nums; transition: background-color .35s; }
.filter[aria-current="true"] .filter__n { background: rgba(239, 233, 218, .18); }
.filters__pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--bark); pointer-events: none; }
html:not(.js) .filter[aria-current="true"], .filters:not(.has-pill) .filter[aria-current="true"] { background: var(--bark); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 30px); list-style: none; margin: 0; padding: 0; }
.tile.is-out { display: none; }
.tile__link { position: relative; display: block; color: inherit; text-decoration: none; }
.tile__media { display: block; aspect-ratio: 4 / 5; max-height: 62vh; border-radius: 18px; overflow: clip; background: var(--pale-2); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile__link:hover .tile__media img, .tile__link:focus-visible .tile__media img { transform: scale(1.06); }
.tile__cap { display: grid; gap: 2px; padding-top: 12px; }
.tile__name { font: 560 clamp(1.1rem, 1.25vw, 1.35rem)/1.2 var(--f-display); }
.tile__where { font-size: .9rem; color: var(--ink-2); }
.tile__zoom { position: absolute; right: 12px; top: 12px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(243, 243, 234, .92); color: var(--bark); opacity: 0; transform: scale(.6); transition: opacity .35s, transform .5s var(--ease); }
.tile__zoom svg { width: 18px; height: 18px; }
.tile__link:hover .tile__zoom, .tile__link:focus-visible .tile__zoom { opacity: 1; transform: none; }

/* ------------------------------------------------------------ gallery: lightbox (sized from the viewport) */
.lb { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lb[hidden] { display: none; }
.lb__backdrop { position: absolute; inset: 0; background: rgba(22, 17, 11, .95); }
.lb__stage { position: relative; display: grid; place-items: center; padding: 24px var(--gutter) 10px; min-height: 0; pointer-events: none; }
.lb__img { width: auto; height: auto; max-width: min(92vw, 1400px); max-height: calc(100svh - 150px); border-radius: 14px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); pointer-events: auto; }
.lb__bar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 26px; padding: 14px var(--gutter) max(20px, env(safe-area-inset-bottom)); color: var(--cream); }
.lb__caption { display: grid; gap: 2px; }
.lb__name { font: 560 clamp(1.2rem, 1.5vw, 1.6rem)/1.2 var(--f-display); }
.lb__where { color: var(--cream-2); font-size: .95rem; }
.lb__count { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cream-2); }
.lb__nav { display: flex; gap: 10px; }
.lb__close { margin-left: 8px; }
html.lb-open, html.lb-open body { overflow: hidden; }

@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .ghero { min-height: 0; }
  .ghero__top { grid-template-columns: 1fr; }
  .ghero__strip { --card: min(40vw, 30svh); justify-content: flex-start; gap: 14px; padding-bottom: 36px; }
  .works__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 599px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { border-radius: 22px; }
  .filter { padding: 0 14px; }
  .lb__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .lb__nav { grid-column: 1 / -1; justify-content: space-between; }
  .lb__img { max-height: calc(100svh - 210px); }
}

/* ------------------------------------------------------------ collections: hero (copy beside a full-bleed photo) */
.chero { position: relative; overflow: hidden; }
.chero--bark { background: var(--bark); color: var(--cream); }
.chero--moss { background: var(--moss); color: var(--cream); }
.chero--pale { background: var(--pale-2); color: var(--ink); }
.chero::before { content: ''; position: absolute; inset: 0 50% 0 0; background: url('../img/weave-texture-1600.jpg') center / cover; opacity: .07; mix-blend-mode: screen; }
.chero--pale::before { mix-blend-mode: multiply; opacity: .05; }
.chero__media { position: relative; margin-right: calc(-1 * var(--wrap-left)); overflow: clip; }
.chero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 72px); min-height: min(calc(100svh - var(--hh0)), 86svh); }
.chero__copy { align-self: center; padding: clamp(28px, 5vh, 56px) 0; }
.chero__title { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.018em; }
.chero--bark .chero__title em, .chero--moss .chero__title em { color: var(--honey-2); }
.chero--pale .chero__title em { color: var(--rod); }
.chero__lede { margin-top: clamp(16px, 2.4vh, 26px); font-size: var(--fs-lede); line-height: 1.55; }
.chero--bark .chero__lede, .chero--moss .chero__lede { color: var(--cream-2); }
.chero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(22px, 3.4vh, 36px); }
.chero--pale .btn--light { background: var(--bark); color: var(--cream); }
.chero__count { font-size: 1rem; }
.chero__count strong { font: 600 1.5rem/1 var(--f-display); margin-right: 4px; }
.chero--pale .crumbs--light { color: var(--ink-2); }
.chero--pale .crumbs--light a { color: var(--rod); }

/* ------------------------------------------------------------ collections: the stage */
.stage { position: relative; background: #1b140d; color: var(--cream); }
.stage__pin { position: relative; display: flex; align-items: center; min-height: 100svh; padding: calc(var(--hh-s) + 24px) 0 32px; overflow: hidden; }
.stage__bgs { position: absolute; inset: 0; overflow: clip; }
.stage__bgs::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 18, 11, .9) 0%, rgba(24, 18, 11, .72) 45%, rgba(24, 18, 11, .5) 100%); }
.stage__bg { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover; filter: blur(38px) saturate(1.15); opacity: 0; transition: opacity 1s var(--ease); }
.stage__bg.is-active { opacity: .7; }
.stage__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.stage h2 { font-size: var(--fs-h2); }
.stage__text { margin: 12px 0 clamp(18px, 3vh, 30px); font-size: var(--fs-lede); color: var(--cream-2); }
.stage__list { list-style: none; margin: 0 0 clamp(16px, 2.6vh, 26px); padding: 0; display: grid; }
.stage__item { display: flex; align-items: baseline; gap: 14px; width: 100%; min-height: 44px; padding: 6px 0; border: 0; border-top: 1px solid rgba(239, 233, 218, .12); background: none; color: var(--cream-2); font: 500 clamp(1.05rem, 1.2vw, 1.3rem)/1.3 var(--f-display); text-align: left; cursor: pointer; transition: color .4s; }
.stage__item:hover { color: var(--cream); }
.stage__item.is-active { color: var(--honey-2); }
.stage__no { font: 600 .9rem/1 var(--f-body); letter-spacing: .06em; font-variant-numeric: tabular-nums; opacity: .7; }
.stage__meter { display: flex; align-items: center; gap: 16px; }
.stage__num { font-weight: 600; font-variant-numeric: tabular-nums; }
.stage__bar { position: relative; flex: 1 1 auto; max-width: 220px; height: 2px; background: rgba(239, 233, 218, .2); overflow: hidden; }
.stage__fill { position: absolute; inset: 0; background: var(--honey-2); transform-origin: left; transform: scaleX(0); }
.stage__frames { position: relative; height: min(calc(100svh - var(--hh-s) - 90px), 760px); }
.stage__frame { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; opacity: 0; visibility: hidden; }
.stage__frame.is-active { opacity: 1; visibility: visible; }
.stage__img { height: calc(100% - 56px); aspect-ratio: var(--ar); max-width: 100%; border-radius: 22px; overflow: clip; background: #2a2017; box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .8); }
.stage__img img { width: 100%; height: 100%; object-fit: cover; }
.stage__frame figcaption { display: flex; align-items: baseline; gap: 16px; }
/* pinned: every photo in one stack, the figures below it hold the captions */
.stage__stack { position: absolute; left: 0; right: 0; top: 0; bottom: 56px; }
.stage__stack img { position: absolute; top: 0; left: 50%; translate: -50% 0; width: auto; height: 100%; max-width: 100%; object-fit: cover; border-radius: 22px; background: #2a2017; box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .8); }
.stage--pinned .stage__frame { top: auto; height: 56px; justify-content: flex-end; }
.stage--pinned .stage__img { display: none; }
.stage__name { font: 560 clamp(1.25rem, 1.6vw, 1.7rem)/1.2 var(--f-display); }
.stage__where { color: var(--cream-2); }
/* flowing stage (reduced motion, no JavaScript, phones and short screens): every piece stacked */
html:not(.motion) .stage__pin { display: block; min-height: 0; padding: var(--sec-y) 0; }
html:not(.motion) .stage__grid { grid-template-columns: 1fr; gap: clamp(22px, 3.6vh, 36px); }
html:not(.motion) .stage__list, html:not(.motion) .stage__meter { display: none; }
html:not(.motion) .stage__frames { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
html:not(.motion) .stage__frame { position: static; opacity: 1; visibility: visible; align-items: stretch; }
html:not(.motion) .stage__img { height: auto; width: 100%; aspect-ratio: 4 / 5; max-height: 62vh; }
html:not(.motion) .stage__frame figcaption { flex-direction: column; gap: 2px; }
html:not(.motion) .stage__bg { opacity: 0; }
html:not(.motion) .stage__bg:first-child { opacity: .45; }
@media (max-width: 899px), (max-height: 599px) {
  .stage__pin { display: block; min-height: 0; padding: var(--sec-y) 0; }
  .stage__grid { grid-template-columns: 1fr; gap: clamp(22px, 3.6vh, 36px); }
  .stage__list, .stage__meter { display: none; }
  .stage__frames { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
  .stage__frame { position: static; opacity: 1; visibility: visible; align-items: stretch; }
  .stage__img { height: auto; width: 100%; aspect-ratio: 4 / 5; max-height: 62vh; }
  .stage__frame figcaption { flex-direction: column; gap: 2px; }
  .stage__bg { opacity: 0; }
  .stage__bg:first-child { opacity: .45; }
}

/* ------------------------------------------------------------ collections: get one of your own */
.getone { position: relative; padding: var(--sec-y) 0; background: var(--pale); overflow: hidden; }
.getone__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 5.5vw, 110px); align-items: center; }
.getone__art { --cap: min(76vh, 720px); position: relative; height: var(--cap); }
.getone h2 { font-size: var(--fs-h2); margin-bottom: clamp(14px, 2.2vh, 22px); }
.getone__lede { font-size: var(--fs-lede); color: var(--ink-2); margin-bottom: clamp(18px, 3vh, 28px); }
.mini-steps { list-style: none; margin: 0 0 clamp(20px, 3.4vh, 32px); padding: 0; }
.mini-steps li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: clamp(10px, 1.6vh, 16px) 0; border-top: 1px solid rgba(42, 32, 23, .16); }
.mini-steps li:last-child { border-bottom: 1px solid rgba(42, 32, 23, .16); }
.mini-steps span { font: 600 1.05rem/1.6 var(--f-display); color: var(--rod); }
.mini-steps h3 { font-size: clamp(1.15rem, 1.2vw, 1.4rem); font-weight: 600; margin-bottom: 4px; }
.mini-steps p { color: var(--ink-2); font-size: .98rem; line-height: 1.5; }
.getone__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }

/* ------------------------------------------------------------ collections: the shop with a note card */
.shop--collection { background: var(--pale); }
.product--note { display: flex; }
.note-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; width: 100%; min-height: 100%; padding: clamp(22px, 2.4vw, 34px); border-radius: 20px; background: var(--bark); color: var(--cream); text-decoration: none; overflow: hidden; }
.note-card::before { content: ''; position: absolute; inset: 0; background: url('../img/weave-texture-1600.jpg') center / cover; opacity: .12; mix-blend-mode: screen; }
.note-card > * { position: relative; }
.note-card p { color: var(--cream-2); }
.note-card .btn { align-self: flex-start; margin-top: 8px; background: var(--honey-2); color: var(--bark); }
.note-card__icon { width: 52px; height: 52px; padding: 13px; margin-bottom: auto; border-radius: 50%; background: var(--honey-2); color: var(--bark); }
.note-card__date { display: grid; justify-items: start; margin-bottom: auto; color: var(--honey-2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .875rem; }
.note-card__date strong { font: 650 clamp(3.4rem, 4.4vw, 4.4rem)/1 var(--f-display); letter-spacing: -.02em; text-transform: none; color: var(--cream); }
.note-card--link .product__cta { color: var(--honey-2); }
.note-card--link:hover .product__cta svg { transform: translateX(5px); }

/* ------------------------------------------------------------ collections: motion starting states */
html.motion [data-chero-media] { clip-path: circle(0% at 70% 50%); }

@media (max-width: 1100px) {
  html:not(.motion) .stage__frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .stage__frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chero { min-height: 0; padding: 0 0 var(--sec-y); }
  .chero::before { inset: 0; }
  .chero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .chero__media { order: -1; margin: 0 calc(-1 * var(--gutter)); height: 46svh; min-height: 280px; }
  .chero__copy { padding: 24px 0 0; }
  .getone__grid { grid-template-columns: 1fr; }
  .getone__art { --cap: min(112vw, 560px, 66svh); }
  .product--note { min-height: 280px; }
}
@media (max-width: 599px) {
  .stage__frames, html:not(.motion) .stage__frames { grid-template-columns: minmax(0, 1fr); }
  .stage__img, html:not(.motion) .stage__img { aspect-ratio: var(--ar); max-height: 70svh; }
  .mini-steps li { grid-template-columns: 44px minmax(0, 1fr); }
}

/* ------------------------------------------------------------ workshops: full-bleed hero */
.whero { position: relative; display: flex; align-items: center; min-height: calc(100svh - var(--hh0)); padding: clamp(28px, 5vh, 56px) 0; color: var(--cream); background: var(--bark); overflow: hidden; }
.whero__media { position: absolute; inset: 0; overflow: clip; }
.whero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.whero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 16, 10, .9) 0%, rgba(22, 16, 10, .78) 36%, rgba(22, 16, 10, .2) 70%, rgba(22, 16, 10, .05) 100%); }
.whero__inner { position: relative; z-index: 1; }
.whero__copy { max-width: min(52%, 820px); }
.whero__title { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.018em; color: var(--cream); }
.whero__title em { color: var(--honey-2); }
.whero__lede { margin-top: clamp(16px, 2.4vh, 26px); font-size: var(--fs-lede); line-height: 1.55; color: var(--cream); }
.whero__chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: clamp(20px, 3vh, 30px) 0 0; padding: 0; }
.whero__chips li { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(239, 233, 218, .1); border: 1px solid rgba(239, 233, 218, .22); font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.whero__chips svg { width: 18px; height: 18px; color: var(--honey-2); }
.whero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(22px, 3.4vh, 36px); }
.whero__count { font-size: 1.05rem; color: var(--cream-2); }
.whero__count strong { font: 650 clamp(2rem, 2.6vw, 2.8rem)/1 var(--f-display); color: var(--honey-2); font-variant-numeric: tabular-nums; margin-right: 4px; }

/* ------------------------------------------------------------ workshops: ticket and what you'll make */
.wsmake { position: relative; padding: var(--sec-y) 0; background: var(--pale); overflow: hidden; }
.wsmake__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5.5vw, 110px); align-items: center; }
.wsmake h2 { font-size: var(--fs-h2); margin-bottom: clamp(14px, 2.2vh, 22px); }
.wsmake__lede { font-size: var(--fs-lede); color: var(--ink-2); margin-bottom: clamp(20px, 3.2vh, 30px); }
.wsmake .ticket { box-shadow: 0 24px 50px -30px rgba(42, 32, 23, .55); }
.wsmake .ticket::before, .wsmake .ticket::after { background: var(--pale); }
.wsmake__note { color: var(--ink-2); }
.wsmake__art { --cap: min(76vh, 720px); position: relative; height: var(--cap); }
.wsmake__pic { position: absolute; }
.wsmake__pic img { width: 100%; height: 100%; object-fit: cover; }
.wsmake__pic figcaption { position: absolute; left: 12px; bottom: 12px; padding: 7px 12px; border-radius: 10px; background: rgba(243, 243, 234, .92); font: italic 500 .95rem/1.2 var(--f-display); color: var(--ink); }
/* each frame is a set share of the art box's height, its width that height times the photo's shape, capped by the
   box's width (the photo is cropped to fit when the cap applies) */
.wsmake__pic--a { left: 0; top: 0; height: 80%; width: min(70%, calc(var(--cap) * .8 * .847)); }
.wsmake__pic--b { right: 0; bottom: 0; height: 56%; width: min(52%, calc(var(--cap) * .56 * .98)); border: 8px solid var(--pale); border-radius: 24px; }

/* ------------------------------------------------------------ workshops: your morning (pinned, horizontal) */
.morning { position: relative; background: var(--bark); color: var(--cream); overflow: hidden; }
.morning::before { content: ''; position: absolute; inset: 0; background: url('../img/weave-texture-1600.jpg') center / cover; opacity: .06; mix-blend-mode: screen; }
.morning__pin { position: relative; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3.4vh, 36px); min-height: 100svh; padding: calc(var(--hh-s) + 24px) 0 32px; }
.morning__head { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; }
.morning h2 { font-size: var(--fs-h2); }
.clock { display: flex; align-items: center; gap: 18px; flex: none; }
.clock__face { width: clamp(92px, 8vw, 124px); height: auto; }
.clock__ring { fill: rgba(239, 233, 218, .06); stroke: var(--honey-2); stroke-width: 2.5; }
.clock__tick { stroke: rgba(239, 233, 218, .45); stroke-width: 1.5; stroke-linecap: round; }
.clock__tick--major { stroke: var(--cream); stroke-width: 2.5; }
.clock__hour, .clock__min { stroke-linecap: round; }
.clock__hour { stroke: var(--cream); stroke-width: 4.5; }
.clock__min { stroke: var(--honey-2); stroke-width: 3; }
.clock__pin { fill: var(--honey-2); }
.clock__time { min-width: 4.6em; font: 600 clamp(1.6rem, 2.2vw, 2.4rem)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.morning__track { position: relative; padding-left: var(--wrap-left); overflow: clip; }
.morning__cards { display: flex; gap: clamp(18px, 2.2vw, 36px); width: max-content; list-style: none; margin: 0; padding: 0 var(--wrap-left) 0 0; }
.mcard { width: 38vw; flex: none; }
.mcard__media { margin: 0; aspect-ratio: 16 / 10; max-height: 44vh; border-radius: 20px; overflow: clip; background: var(--bark-2); }
.mcard__media img { width: 100%; height: 100%; object-fit: cover; }
.mcard__body { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 4px 12px; padding-top: 16px; }
.mcard__no { grid-row: span 2; font: 600 1.05rem/1.6 var(--f-display); color: var(--honey-2); }
.mcard h3 { font-size: clamp(1.25rem, 1.5vw, 1.6rem); font-weight: 580; }
.mcard p { color: var(--cream-2); }
.morning__bar { display: block; position: relative; width: min(100%, 420px); height: 2px; background: rgba(239, 233, 218, .18); overflow: hidden; }
.morning__fill { position: absolute; inset: 0; background: var(--honey-2); transform-origin: left; transform: scaleX(0); }
/* flowing morning (reduced motion, no JavaScript, phones and short screens) */
html:not(.motion) .morning__pin { min-height: 0; padding: var(--sec-y) 0; }
html:not(.motion) .morning__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; padding: 0; }
html:not(.motion) .morning__track { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding: 0; }
html:not(.motion) .mcard { width: auto; }
html:not(.motion) .morning__foot { display: none; }
@media (max-width: 899px), (max-height: 599px) {
  .morning__pin { min-height: 0; padding: var(--sec-y) 0; }
  .morning__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; padding: 0; }
  .morning__track { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding: 0; }
  .mcard { width: auto; }
  .morning__foot { display: none; }
}

/* ------------------------------------------------------------ workshops: what's included */
.included-sec { position: relative; padding: var(--sec-y) 0; background: var(--paper); overflow: hidden; }
.included-sec__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5.5vw, 110px); align-items: center; }
.included-sec__media { height: min(76vh, 720px); width: min(100%, calc(min(76vh, 720px) * .805)); }
.included-sec h2 { font-size: var(--fs-h2); margin-bottom: clamp(14px, 2.2vh, 22px); }
.included-sec__lede { font-size: var(--fs-lede); color: var(--ink-2); margin-bottom: clamp(20px, 3.4vh, 32px); }
.perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.6vh, 26px) clamp(18px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.perk { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; }
.perk__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--pale-2); color: var(--rod); }
.perk__icon svg { width: 24px; height: 24px; }
.perk h3 { font-size: clamp(1.08rem, 1.15vw, 1.25rem); font-weight: 600; line-height: 1.25; }
.perk p { color: var(--ink-2); font-size: .98rem; }

/* ------------------------------------------------------------ workshops: venue and booking */
.venue { position: relative; padding: var(--sec-y) 0; background: var(--moss); color: var(--cream); overflow: hidden; }
.venue__title { font-size: var(--fs-h2); margin-bottom: clamp(24px, 4vh, 42px); }
.venue__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 34px); }
.vcard { display: grid; grid-template-rows: auto 1fr; border-radius: 24px; overflow: hidden; background: rgba(239, 233, 218, .06); border: 1px solid rgba(239, 233, 218, .12); }
.vcard__media { margin: 0; aspect-ratio: 16 / 8; max-height: 36vh; overflow: clip; }
.vcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.vcard:hover .vcard__media img { transform: scale(1.04); }
.vcard__body { display: grid; align-content: start; justify-items: start; gap: 10px; padding: clamp(20px, 2.4vw, 34px); }
.vcard h3 { font-size: clamp(1.4rem, 1.8vw, 1.9rem); font-weight: 580; }
.vcard p { color: var(--cream-2); }
.vcard__addr { color: var(--cream) !important; font-size: 1.08rem; }
.vcard .btn { margin-top: 6px; }
.vcard .btn svg { order: -1; }

/* ------------------------------------------------------------ workshops: questions (light) */
.wsfaq { position: relative; padding: var(--sec-y) 0; background: var(--pale-2); overflow: hidden; }
.wsfaq h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.wsfaq .faq-sec__side > p { color: var(--ink-2); font-size: var(--fs-lede); margin-bottom: clamp(20px, 3.4vh, 34px); }
.ask--light .ask__icon { background: var(--bark); color: var(--cream); }

/* ------------------------------------------------------------ workshops: motion starting states */
html.motion [data-whero-media] img { transform: scale(1.12); }
html.motion [data-perk], html.motion [data-vcard] { opacity: 0; }

@media (max-width: 1100px) {
  .perks { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .whero { flex-direction: column; align-items: stretch; min-height: 0; padding: 0 0 var(--sec-y); }
  .whero__media { position: relative; inset: auto; height: 46svh; min-height: 280px; }
  .whero__media::after { background: linear-gradient(0deg, rgba(42, 32, 23, 1) 0%, rgba(42, 32, 23, 0) 45%); }
  .whero__copy { max-width: none; padding-top: 8px; }
  .wsmake__grid, .included-sec__grid { grid-template-columns: 1fr; }
  .wsmake__art { --cap: min(100vw, 520px, 62svh); }
  /* the second photo overlaps the first one's lower corner here, so its caption moves to the top */
  .wsmake__pic--a figcaption { top: 12px; bottom: auto; }
  .included-sec__media { height: min(100vw, 520px, 60svh); width: min(100%, calc(min(100vw, 520px, 60svh) * .805)); }
  .morning__head { flex-direction: column; align-items: flex-start; }
  .venue__grid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .morning__cards, html:not(.motion) .morning__cards { grid-template-columns: minmax(0, 1fr); }
  .whero__chips li { width: 100%; }
  .whero__actions .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------ about: hero (full bleed, drawing in to a frame on scroll) */
.ahero { position: relative; display: flex; align-items: flex-end; min-height: calc(100svh - var(--hh0)); padding: clamp(40px, 8vh, 96px) 0; color: var(--cream); background: var(--pale); overflow: hidden; }
.ahero__media { position: absolute; inset: 0; overflow: clip; background: var(--bark); }
.ahero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.ahero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24, 20, 12, .82) 0%, rgba(24, 20, 12, .5) 34%, rgba(24, 20, 12, 0) 62%), linear-gradient(90deg, rgba(24, 20, 12, .5) 0%, rgba(24, 20, 12, 0) 60%); }
.ahero__inner { position: relative; z-index: 1; }
.ahero__copy { max-width: min(74%, 1180px); }
.ahero__title { font-size: clamp(2.6rem, 4.8vw + .2rem, 6.2rem); line-height: 1; letter-spacing: -.02em; color: var(--cream); }
.ahero__title em { color: var(--honey-2); }
.ahero__lede { margin-top: clamp(16px, 2.4vh, 26px); max-width: 60ch; font-size: var(--fs-lede); line-height: 1.55; }

/* ------------------------------------------------------------ about: the story along a willow rod */
.story { position: relative; padding: var(--sec-y) 0; background: var(--paper); overflow: hidden; }
.story__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 8vh, 90px); }
.story__list::before { content: ''; position: absolute; left: 50%; top: 22px; bottom: 22px; width: 0; border-left: 2px dashed rgba(138, 90, 43, .45); }
.story__list.has-rod::before { display: none; }
.story__rod { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.story__rod path { fill: none; stroke: var(--honey); stroke-width: 7; stroke-linecap: round; }
.story__rod .story__rod-b { stroke: var(--rod); stroke-width: 3; opacity: .6; }
.story__rod .story__leaf path { fill: var(--leaf-deep); stroke: var(--pale); stroke-width: 1.5; transform: scale(1.7); }
.chapter { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px); }
.chapter__media { grid-column: 1; height: min(52vh, 460px); width: 100%; }
.chapter__dot { grid-column: 2; justify-self: center; position: relative; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--bark); color: var(--honey-2); font: 600 1rem/1 var(--f-display); box-shadow: 0 0 0 8px var(--paper); }
.chapter__text { grid-column: 3; }
.chapter--right .chapter__media { grid-column: 3; grid-row: 1; }
.chapter--right .chapter__text { grid-column: 1; grid-row: 1; text-align: right; }
.chapter h3 { font-size: clamp(1.6rem, 2.2vw, 2.4rem); font-weight: 560; margin-bottom: 10px; }
.chapter p { font-size: var(--fs-lede); color: var(--ink-2); }

/* ------------------------------------------------------------ about: where the willow comes from */
.origin { position: relative; padding: var(--sec-y) 0; background: var(--moss); color: var(--cream); overflow: hidden; }
.origin::before { content: ''; position: absolute; inset: 0; background: url('../img/weave-texture-1600.jpg') center / cover; opacity: .06; mix-blend-mode: screen; }
.origin__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 100px); align-items: center; }
.origin h2 { font-size: var(--fs-h2); margin-bottom: clamp(14px, 2.2vh, 22px); }
.origin__lede { font-size: var(--fs-lede); color: var(--cream-2); margin-bottom: clamp(20px, 3.4vh, 32px); }
.origin__stops { display: grid; gap: 0; margin: 0; border-top: 1px solid rgba(239, 233, 218, .16); }
.origin__stops > div { padding: 16px 0; border-bottom: 1px solid rgba(239, 233, 218, .16); }
.origin__stops dt { display: flex; align-items: center; gap: 12px; font: 560 clamp(1.2rem, 1.4vw, 1.5rem)/1.2 var(--f-display); }
.origin__stops dd { margin: 6px 0 0 30px; color: var(--cream-2); }
.origin__key { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.origin__key--grow { background: var(--leaf); box-shadow: 0 0 0 4px rgba(124, 138, 87, .3); }
.origin__key--make { background: var(--honey-2); box-shadow: 0 0 0 4px rgba(217, 168, 106, .3); }
.origin__map { display: flex; justify-content: flex-start; }
.map { width: min(100%, calc(min(78vh, 720px) * .76)); height: auto; overflow: visible; }
.map__land { fill: rgba(239, 233, 218, .1); stroke: rgba(239, 233, 218, .55); stroke-width: 1.4; stroke-linejoin: round; }
.map__route { fill: none; stroke: var(--honey-2); stroke-width: 3; stroke-linecap: round; }
.map__ring { fill: none; stroke: var(--honey-2); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .8; }
.map__dot--grow { fill: var(--leaf); stroke: var(--cream); stroke-width: 2; }
.map__dot--make { fill: var(--honey-2); stroke: var(--cream); stroke-width: 2; }
.map__bundle path { stroke: var(--honey); stroke-width: 3; stroke-linecap: round; }
.map__bundle { opacity: 0; }
.map__label { fill: var(--cream); font: 600 17px/1 var(--f-body); letter-spacing: .02em; }

/* ------------------------------------------------------------ about: how I work */
.ways { position: relative; padding: var(--sec-y) 0; background: var(--pale); }
.ways__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); list-style: none; margin: 0; padding: 0; }
.way__media { margin: 0 0 16px; aspect-ratio: 4 / 5; max-height: 44vh; width: 100%; border-radius: 18px; overflow: clip; background: var(--pale-2); }
.way__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.way:hover .way__media img { transform: scale(1.05); }
.way h3 { font-size: clamp(1.2rem, 1.35vw, 1.5rem); font-weight: 580; line-height: 1.2; margin-bottom: 6px; }
.way p { color: var(--ink-2); }

/* ------------------------------------------------------------ about: in her words */
.pull { position: relative; display: flex; align-items: center; min-height: min(80svh, 720px); padding: var(--sec-y) 0; color: var(--cream); background: var(--bark); overflow: hidden; }
.pull__bg { position: absolute; inset: 0; }
.pull__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.pull__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(30, 23, 15, .55), rgba(30, 23, 15, .9)); }
.pull__inner { position: relative; z-index: 1; }
.pull__quote { margin: 0; }
.pull__quote p { font: italic 420 clamp(2rem, 3.6vw, 4.2rem)/1.18 var(--f-display); letter-spacing: -.01em; }
.pull__by { margin-top: clamp(18px, 3vh, 30px); color: var(--honey-2); font-weight: 600; letter-spacing: .06em; }
.pull__by::before { content: ''; display: inline-block; width: 36px; height: 1.5px; margin-right: 14px; vertical-align: middle; background: currentColor; }

/* ------------------------------------------------------------ about: motion starting states */
html.motion [data-chapter-media] { clip-path: inset(0 0 100% 0 round 20px); }
html.motion [data-chapter-text] { opacity: 0; }
html.motion .way { opacity: 0; }

@media (max-width: 1100px) {
  .ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .ahero { min-height: min(92svh, 760px); }
  .ahero__copy { max-width: none; }
  .story__list::before { left: 26px; }
  .chapter, .chapter--right { grid-template-columns: 52px minmax(0, 1fr); gap: 14px 18px; align-items: start; }
  .chapter__dot { grid-column: 1; grid-row: 1; }
  .chapter__media, .chapter--right .chapter__media { grid-column: 2; grid-row: 1; height: min(62vw, 360px); }
  .chapter__text, .chapter--right .chapter__text { grid-column: 2; grid-row: 2; text-align: left; }
  .origin__grid { grid-template-columns: 1fr; }
  .origin__map { order: -1; }
  .map { width: min(100%, 420px, calc(56svh * .76)); }
}
@media (max-width: 599px) {
  .ways__grid { grid-template-columns: 1fr; }
  .way__media { aspect-ratio: 16 / 11; max-height: none; }
}

/* ------------------------------------------------------------ reviews: hero (a quotation mark drawn in willow) */
.rhero { position: relative; display: flex; align-items: center; min-height: min(calc(100svh - var(--hh0)), 860px); padding: clamp(36px, 7vh, 80px) 0; background: var(--moss); color: var(--cream); overflow: hidden; }
.rhero::before { content: ''; position: absolute; inset: 0; background: url('../img/weave-texture-1600.jpg') center / cover; opacity: .08; mix-blend-mode: screen; }
.rhero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.rhero__art { display: flex; justify-content: center; }
.rhero__mark { width: min(100%, 560px, 56vh); height: auto; overflow: visible; }
.rhero__mark path { fill: none; stroke: var(--honey); stroke-width: 11; stroke-linecap: round; }
.rhero__mark path:nth-child(even) { stroke: var(--honey-2); stroke-width: 5; opacity: .8; }
.rhero__inner { position: relative; z-index: 1; }
.rhero__title { font-size: clamp(3rem, 5.2vw + .2rem, 6.8rem); line-height: .98; letter-spacing: -.022em; color: var(--cream); }
.rhero__title em { color: var(--honey-2); }
.rhero__row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; margin-top: clamp(22px, 4vh, 44px); }
.rhero__lede { flex: 1 1 360px; font-size: var(--fs-lede); color: var(--cream-2); }
.rhero__faces { display: flex; list-style: none; margin: 0; padding: 0; }
.rhero__faces li { width: clamp(76px, 7vw, 110px); aspect-ratio: 1; border-radius: 50%; overflow: clip; border: 4px solid var(--moss); }
.rhero__faces li + li { margin-left: -18px; }
.rhero__faces img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ reviews: the stack */
.rstack { position: relative; padding: var(--sec-y) 0; background: var(--pale); }
.rstack__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16vh; }
.rcard { position: sticky; top: calc(var(--hh-s) + 20px + var(--i) * 18px); }
.rcard:last-child { position: relative; top: 0; margin-top: calc(var(--i) * 18px); }
.rcard__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: min(calc(100svh - var(--hh-s) - 110px), 640px); min-height: 420px; border-radius: 28px; overflow: clip; background: var(--paper); box-shadow: 0 40px 70px -40px rgba(42, 32, 23, .55), 0 0 0 1px rgba(42, 32, 23, .06); transform-origin: 50% 0; }
.rcard:nth-child(2) .rcard__inner { background: var(--bark); color: var(--cream); }
.rcard:nth-child(3) .rcard__inner { background: var(--moss); color: var(--cream); }
.rcard__media { margin: 0; min-height: 0; overflow: clip; }
.rcard__media img { width: 100%; height: 100%; object-fit: cover; }
.rcard__body { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3vh, 30px); margin: 0; padding: clamp(28px, 4vw, 72px); }
.rcard__no { font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--rod); }
.rcard:nth-child(n+2) .rcard__no { color: var(--honey-2); }
.rcard blockquote { margin: 0; }
.rcard blockquote p { font: italic 420 clamp(1.6rem, 2.5vw, 2.7rem)/1.26 var(--f-display); letter-spacing: -.005em; }
.rcard figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.rcard__name { font-weight: 600; font-size: 1.1rem; }
.rcard__piece { color: var(--ink-2); }
.rcard:nth-child(n+2) .rcard__piece { color: var(--cream-2); }
.rcard__piece::before { content: ''; display: inline-block; width: 22px; height: 1.5px; margin-right: 12px; vertical-align: middle; background: currentColor; }

/* ------------------------------------------------------------ reviews: share your own */
.share { position: relative; padding: var(--sec-y) 0; background: var(--pale-2); overflow: hidden; }
.share__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 5.5vw, 110px); align-items: center; }
.share h2 { font-size: var(--fs-h2); margin-bottom: clamp(14px, 2.2vh, 22px); }
.share__lede { font-size: var(--fs-lede); color: var(--ink-2); margin-bottom: clamp(20px, 3.4vh, 32px); }
.share__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.share__actions .btn svg { order: -1; }
.share__art { --cap: min(66vh, 620px); position: relative; height: var(--cap); }
.share__pic { position: absolute; }
.share__pic--a { left: 0; top: 0; width: 76%; aspect-ratio: 1.12; }
.share__pic--b { right: 0; bottom: 0; width: 46%; aspect-ratio: 1; border: 8px solid var(--pale-2); border-radius: 24px; }

html.motion .rhero__mark path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.motion .rhero__faces li { opacity: 0; }

@media (max-width: 899px) {
  .rhero { min-height: 0; padding: clamp(30px, 6vh, 60px) 0 var(--sec-y); }
  .rhero__grid { grid-template-columns: 1fr; }
  .rhero__art { order: -1; justify-content: flex-start; }
  .rhero__mark { width: min(46vw, 220px); }
  .rstack__list { gap: 22px; }
  .rcard, .rcard:last-child { position: static; margin-top: 0; }
  .rcard__inner { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .rcard__media { aspect-ratio: 4 / 3; }
  .share__grid { grid-template-columns: 1fr; }
  .share__art { --cap: min(90vw, 460px, 56svh); }
}

/* ------------------------------------------------------------ contact: hero */
.cthero { position: relative; display: flex; align-items: center; min-height: calc(100svh - var(--hh0)); padding: clamp(28px, 5vh, 56px) 0; background: var(--pale); overflow: hidden; }
.cthero::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 42%; background: var(--moss) url('../img/weave-texture-1600.jpg') center / cover; background-blend-mode: soft-light; }
.cthero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.cthero__title { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.018em; }
.cthero__title em { color: var(--rod); }
.cthero__lede { margin-top: clamp(16px, 2.4vh, 26px); font-size: var(--fs-lede); line-height: 1.55; }
.ways-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: clamp(24px, 4vh, 40px) 0 0; padding: 0; }
.way-in { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px; height: 100%; min-height: 76px; padding: 14px 16px; border-radius: 18px; background: var(--paper); border: 1px solid rgba(42, 32, 23, .08); text-decoration: none; color: var(--ink); transition: background-color .35s, color .35s, transform .5s var(--ease); }
.way-in:hover, .way-in:focus-visible { background: var(--bark); color: var(--cream); transform: translateY(-3px); }
.way-in__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--pale-2); color: var(--rod); transition: background-color .35s, color .35s; }
.way-in:hover .way-in__icon { background: var(--honey-2); color: var(--bark); }
.way-in__icon svg { width: 20px; height: 20px; }
.way-in__label { display: block; font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rod); transition: color .35s; }
.way-in:hover .way-in__label { color: var(--honey-2); }
.way-in__value { display: block; font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.cthero__art { --cap: min(calc(100svh - var(--hh0) - 110px), 720px); position: relative; height: var(--cap); }
.cthero__pic { position: absolute; margin: 0; }
.cthero__pic--a { left: 0; top: 2%; height: 90%; aspect-ratio: .805; max-width: 92%; transform: rotate(2.5deg); }
.cthero__pic--b { left: -4%; bottom: 0; width: min(46%, 260px); padding: 10px 10px 0; background: #fbfaf5; border-radius: 6px; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .55); transform: rotate(-6deg); }
.cthero__pic--b img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 2px; }
.cthero__pic--b figcaption { padding: 10px 4px 12px; font: italic 500 1rem/1.2 var(--f-display); text-align: center; color: var(--ink); }

/* ------------------------------------------------------------ contact: the form */
.enquiry { position: relative; padding: clamp(48px, 7vh, 96px) 0; background: var(--paper); }
.enquiry__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.enquiry h2 { font-size: var(--fs-h2); margin-bottom: 10px; }
.enquiry__lede { color: var(--ink-2); margin-bottom: clamp(16px, 2.6vh, 26px); }
.form__label { display: block; margin-bottom: 8px; font-weight: 600; font-size: .98rem; }
.form__opt { font-weight: 400; color: var(--ink-2); }
.topics { margin: 0 0 clamp(16px, 2.4vh, 24px); padding: 0; border: 0; }
.topics__row { position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 26px; background: var(--pale); }
.topic { position: relative; z-index: 1; cursor: pointer; }
.topic input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topic span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 600; transition: color .35s, background-color .35s; }
.topic:hover span { color: var(--rod); }
.topic input:checked + span { color: var(--cream); background: var(--bark); transition: color .35s, background-color 0s .55s; }
.topic input:focus-visible + span { outline: 2px solid var(--rod); outline-offset: 2px; }
.topics__pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--bark); pointer-events: none; }
.topics__row:not(.has-pill) .topic input:checked + span { background: var(--bark); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px clamp(16px, 2vw, 26px); }
.field--wide { grid-column: 1 / -1; }
html.js .form[data-topic="commission"] [data-for]:not([data-for="commission"]),
html.js .form[data-topic="workshop"] [data-for]:not([data-for="workshop"]),
html.js .form[data-topic="shop"] [data-for]:not([data-for="shop"]),
html.js .form[data-topic="other"] [data-for] { display: none; }
.field input, .field select, .field textarea { display: block; width: 100%; min-height: 54px; padding: 13px 16px; border: 1.5px solid rgba(42, 32, 23, .22); border-radius: 14px; background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--f-body); transition: border-color .3s, box-shadow .3s; }
.field textarea { min-height: 124px; resize: vertical; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 52px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%238A5A2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 18px 18px; }
.field input::placeholder, .field textarea::placeholder { color: #8a7d70; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--rod); box-shadow: 0 0 0 4px rgba(138, 90, 43, .16); }
.field [aria-invalid="true"] { border-color: #a3372b; }
.field__error { min-height: 20px; margin: 4px 0 6px; color: #9c3326; font-size: .92rem; font-weight: 500; }
.form__alert { display: none; margin-bottom: 20px; padding: 14px 18px; border-radius: 14px; background: #f6e3dc; color: #7e2a1f; font-weight: 500; }
.form__alert.is-shown { display: block; }
.form__alert a { color: inherit; font-weight: 700; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 8px; }
.form__send[disabled] { opacity: .7; cursor: progress; }
.form__note { color: var(--ink-2); font-size: .95rem; }
.form__note a { color: var(--rod); font-weight: 600; }
.sent { padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: var(--pale); text-align: left; }
.sent[hidden] { display: none; }
.sent__tick { width: 72px; height: 72px; margin-bottom: 18px; }
.sent__tick circle { fill: var(--bark); stroke: var(--honey-2); stroke-width: 3; }
.sent__tick path { fill: none; stroke: var(--honey-2); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sent h3 { font-size: clamp(1.5rem, 2vw, 2.1rem); font-weight: 560; margin-bottom: 10px; }
.sent p { color: var(--ink-2); margin-bottom: 14px; }
.sent p a { color: var(--rod); font-weight: 600; }
.sent:focus { outline: none; }

/* ------------------------------------------------------------ contact: details card */
.details { position: sticky; top: calc(var(--hh-s) + 24px); }
.details__card { position: relative; padding: clamp(24px, 2.6vw, 40px); border-radius: 26px; background: var(--bark); color: var(--cream); overflow: hidden; }
.details__card::before { content: ''; position: absolute; inset: 0; background: url('../img/weave-texture-1600.jpg') center / cover; opacity: .1; mix-blend-mode: screen; }
.details__card > * { position: relative; }
.details__title { font-size: clamp(1.4rem, 1.7vw, 1.8rem); font-weight: 560; margin-bottom: 18px; }
.details__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 16px; }
.details__list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; }
.details__list svg { width: 22px; height: 22px; margin-top: 3px; color: var(--honey-2); }
.details__k { display: block; font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--honey-2); margin-bottom: 2px; }
.details__list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 1.05rem; text-decoration: none; overflow-wrap: anywhere; }
.details__list a:hover { text-decoration: underline; }
.details__social { display: flex; gap: 8px; margin-bottom: 20px; }
.details__social a { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(239, 233, 218, .35); transition: background-color .3s, color .3s; }
.details__social a:hover { background: var(--cream); color: var(--bark); }
.details__social svg { width: 20px; height: 20px; }
.details__shop { width: 100%; }

/* ------------------------------------------------------------ contact: map */
.where { position: relative; padding: var(--sec-y) 0; background: var(--moss); color: var(--cream); overflow: hidden; }
.where__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.where h2 { font-size: var(--fs-h2); margin-bottom: clamp(14px, 2.2vh, 22px); }
.where__lede { font-size: var(--fs-lede); color: var(--cream-2); margin-bottom: clamp(20px, 3.4vh, 32px); }
.where__cards { display: grid; gap: 14px; }
.spot { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 16px; padding: 18px 20px; border-radius: 18px; background: rgba(239, 233, 218, .07); border: 1px solid rgba(239, 233, 218, .14); }
.spot h3 { font-size: 1.25rem; font-weight: 580; margin-bottom: 4px; }
.spot p { color: var(--cream-2); }
.spot__key { width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; }
.spot__key--make { background: var(--honey-2); box-shadow: 0 0 0 4px rgba(217, 168, 106, .25); }
.spot__key--farm { background: var(--leaf); box-shadow: 0 0 0 4px rgba(124, 138, 87, .3); }
.where__frame { position: relative; height: min(66vh, 600px); border-radius: 24px; overflow: clip; background: var(--pale-2); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7); }
.where__frame iframe { display: block; width: 100%; height: 100%; border: 0; filter: sepia(.28) saturate(.85) contrast(.98); }
.where__open { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; color: var(--honey-2); font-weight: 600; text-decoration: none; }
.where__open svg { width: 18px; height: 18px; }
.where__open:hover { text-decoration: underline; }

/* ------------------------------------------------------------ contact: motion starting states */
html.motion [data-ct-polaroid] { opacity: 0; }
html.motion .details__card { opacity: 0; }
html.motion [data-spot] { opacity: 0; }
html.motion [data-map] { clip-path: inset(0 0 100% 0 round 24px); }

@media (max-width: 1100px) {
  .ways-in { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .enquiry__grid { grid-template-columns: 1fr; }
  .details { position: static; }
  .where__grid { grid-template-columns: 1fr; }
  .where__frame { height: min(70vw, 480px, 56svh); }
}
@media (max-width: 899px) {
  .cthero { min-height: 0; padding: 20px 0 var(--sec-y); }
  .cthero::before { bottom: auto; left: 0; width: 100%; height: calc(min(100vw, 460px, 52svh) * .7 + 20px); }
  .cthero__grid { grid-template-columns: 1fr; gap: 26px; }
  .cthero__art { --cap: min(100vw, 460px, 52svh); order: -1; }
}
@media (max-width: 599px) {
  .form__grid { grid-template-columns: 1fr; }
  .topic span { padding: 0 14px; }
}

/* ------------------------------------------------------------ legal pages: a smaller designed hero */
.lhero { position: relative; padding: clamp(36px, 7vh, 80px) 0; background: var(--pale-2); overflow: hidden; }
.lhero::before { content: ''; position: absolute; inset: 0 0 0 72%; background: var(--bark) url('../img/weave-texture-1600.jpg') center / cover; background-blend-mode: soft-light; }
.lhero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.lhero__title { font-size: clamp(2.4rem, 3.8vw + .2rem, 4.6rem); line-height: 1.02; letter-spacing: -.018em; }
.lhero__title em { color: var(--rod); }
.lhero__lede { margin-top: clamp(14px, 2vh, 22px); font-size: var(--fs-lede); }
.lhero__updated { margin-top: 14px; font-size: .95rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rod); }
.lhero__art { justify-self: start; width: min(100%, 340px, calc(46vh * .8)); aspect-ratio: .8; transform: rotate(2deg); }

/* ------------------------------------------------------------ legal pages: contents and long-form copy */
.legal { position: relative; padding: var(--sec-y) 0; background: var(--paper); }
.legal__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.legal__toc { position: sticky; top: calc(var(--hh-s) + 24px); padding: 22px 24px; border-radius: 20px; background: var(--pale); }
.legal__toc-img { margin: -8px -10px 16px; aspect-ratio: 16 / 7; border-radius: 14px; overflow: clip; background: var(--pale-2); }
.legal__toc-img img { width: 100%; height: 100%; object-fit: cover; }
.legal__toc-title { font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rod); margin-bottom: 8px; }
.legal__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal__toc li { counter-increment: toc; }
.legal__toc a { display: flex; gap: 10px; min-height: 44px; align-items: center; color: var(--ink); text-decoration: none; font-weight: 500; line-height: 1.3; }
.legal__toc a::before { content: counter(toc, decimal-leading-zero); font: 600 .875rem/1 var(--f-display); color: var(--rod); }
.legal__toc a:hover, .legal__toc a.is-active { color: var(--rod); }
.prose { display: grid; gap: clamp(28px, 4.4vh, 44px); }
.prose__part { scroll-margin-top: calc(var(--hh-s) + 24px); padding-bottom: clamp(22px, 3.6vh, 36px); border-bottom: 1px solid rgba(42, 32, 23, .12); }
.prose h2 { font-size: clamp(1.6rem, 2.1vw, 2.3rem); margin-bottom: 14px; }
.prose p, .prose li { font-size: 1.08rem; line-height: 1.7; color: var(--ink-2); }
.prose p + p, .prose ul + p { margin-top: 12px; }
.prose ul { margin: 12px 0 0; padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--rod); }
.prose a { color: var(--rod); font-weight: 600; }
.prose__ask { margin-top: 0; }

/* ------------------------------------------------------------ 404 */
.nf { position: relative; display: flex; align-items: center; min-height: calc(100svh - var(--hh0)); padding: clamp(28px, 5vh, 56px) 0; background: var(--pale); overflow: hidden; }
.nf::before { content: ''; position: absolute; inset: 0 0 0 55%; background: var(--pale-2) url('../img/weave-texture-1600.jpg') center / cover; background-blend-mode: soft-light; opacity: .9; }
.nf__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.nf__code { font-size: .95rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rod); margin-bottom: 12px; }
.nf__title { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.018em; }
.nf__title em { color: var(--rod); }
.nf__lede { margin-top: clamp(16px, 2.4vh, 26px); font-size: var(--fs-lede); }
.nf__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(22px, 3.4vh, 36px); }
.nf__links { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: clamp(22px, 3.4vh, 34px) 0 0; padding: 0; }
.nf__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rod); font-weight: 600; }
.nf__art { position: relative; height: min(70vh, 640px); display: grid; place-items: center; }
.nf__moon { position: absolute; width: min(80%, 460px); top: 4%; right: 6%; overflow: visible; }
.nf__moon circle { fill: rgba(243, 243, 234, .7); stroke: var(--rod); stroke-width: 1.5; }
.nf__hare { position: relative; height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .35)); }
html.motion [data-nf-hare] { opacity: 0; }

@media (max-height: 839px) {
  .legal__toc { position: static; }
}
@media (max-width: 1023px) {
  .legal__grid { grid-template-columns: 1fr; }
  .legal__toc { position: static; }
  .legal__toc ol { columns: 2; column-gap: 24px; }
}
@media (max-width: 899px) {
  .lhero { display: flex; align-items: center; min-height: calc(100svh - var(--hh0)); }
  .lhero::before { inset: auto 0 0 0; height: 30%; }
  .lhero__grid { grid-template-columns: 1fr; }
  .lhero__art { justify-self: start; width: min(56vw, 240px); }
  .nf { min-height: 0; padding-bottom: var(--sec-y); }
  .nf::before { inset: 0 0 auto 0; height: calc(min(90vw, 420px) + 20px); }
  .nf__grid { grid-template-columns: 1fr; }
  .nf__art { order: -1; height: min(90vw, 420px); }
}
@media (max-width: 599px) {
  .legal__toc ol { columns: 1; }
}

/* split headings: the line spacing the approved design shows, set explicitly (the old word masks used to add about
   6px per line as a side effect of overflow: hidden, and only once the heading had been split, which made the copy
   jump; now it is the same before and after the split, with or without JavaScript) */
h1[data-split], h2[data-split] { line-height: calc(1.06em + 6px); }
.hero__title[data-split], .phero__title[data-split], .whero__title[data-split], .chero__title[data-split], .cthero__title[data-split], .lhero__title[data-split], .nf__title[data-split] { line-height: calc(1.02em + 6px); }
.ghero__title[data-split], .rhero__title[data-split] { line-height: calc(.98em + 6px); }
.ahero__title[data-split] { line-height: calc(1em + 6px); }

/* ============================================================ member logos in the footer (2026-09-28) */
.site-footer__members { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(24px, 3vw, 48px); margin-top: clamp(36px, 5vh, 56px); padding-top: 24px; border-top: 1px solid rgba(42, 32, 23, .15); }
.site-footer__members-text { font: italic 500 clamp(1.1rem, 1.2vw, 1.3rem)/1.3 var(--f-display); color: var(--ink-2); }
.site-footer .site-footer__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(24px, 3vw, 44px); }
.site-footer__logos a { display: block; border-radius: 10px; transition: transform .45s var(--ease); }
.site-footer__logos a:hover { transform: translateY(-4px); }
.site-footer__logos img { width: auto; height: 104px; }
.site-footer__members + .site-footer__base { margin-top: 24px; }

/* ============================================================ home & garden: basket panels */
.baskets { position: relative; padding: var(--sec-y) 0; background: var(--paper); }
.baskets .split-head h2 em { color: var(--rod); }
.bpanels { display: flex; gap: clamp(8px, .9vw, 14px); height: min(52vh, 580px); margin: 0; padding: 0; list-style: none; }
.bpanel { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--radius); overflow: clip; background: var(--pale-2); transition: flex-grow .9s var(--ease); }
.bpanel.is-active { flex-grow: 4.2; }
.bpanel__fig { position: absolute; inset: 0; margin: 0; }
.bpanel__fig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24, 18, 11, .78) 0%, rgba(24, 18, 11, .25) 38%, transparent 60%); pointer-events: none; }
.bpanel__fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.bpanel.is-active .bpanel__fig img { transform: scale(1); }
.bpanel__cap { position: absolute; left: clamp(16px, 1.6vw, 26px); right: clamp(16px, 1.6vw, 26px); bottom: clamp(16px, 2vh, 24px); z-index: 2; display: grid; gap: 2px; color: var(--cream); opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .5s var(--ease); }
.bpanel.is-active .bpanel__cap { opacity: 1; transform: none; transition-delay: .3s; }
.bpanel__name { font: 600 clamp(1.3rem, 1.6vw, 1.75rem)/1.15 var(--f-display); }
.bpanel__where { font-size: .95rem; color: var(--cream-2); }
.bpanel__label { position: absolute; left: 50%; bottom: clamp(16px, 2vh, 24px); z-index: 2; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); color: var(--cream); font: 600 1.05rem/1 var(--f-display); white-space: nowrap; transition: opacity .35s; }
.bpanel.is-active .bpanel__label { opacity: 0; }
.bpanel__hit { position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.bpanel__hit:focus-visible { outline: 3px solid var(--honey-2); outline-offset: -5px; }
.bpanel.is-active .bpanel__hit { cursor: default; }
/* the timer along the top of the open panel while the row moves along by itself */
.bpanels.is-auto .bpanel.is-active::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 4px; background: var(--honey-2); transform-origin: 0 50%; animation: bp-timer 5s linear forwards; }
@keyframes bp-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.baskets__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(20px, 3vh, 34px); }
@media (max-width: 899px) {
  .bpanels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .bpanel { aspect-ratio: 4 / 5; }
  .bpanel__cap { opacity: 1; transform: none; }
  .bpanel__label, .bpanel__hit { display: none; }
  .bpanel__fig img { transform: none; }
}
@media (max-width: 479px) { .bpanel__name { font-size: 1.1rem; } .bpanel__where { font-size: .85rem; } }

/* ============================================================ events: the dates as luggage labels tied to a willow rod */
.page-events .phero__frame figcaption { max-width: calc(100% - 24px); }
.dates { position: relative; padding: var(--sec-y) 0; background: var(--pale-2); overflow: clip; }
.dates::before { content: ''; position: absolute; inset: 0; background: url('../img/weave-texture-1600.jpg') center top / 520px auto repeat; opacity: .09; mix-blend-mode: multiply; pointer-events: none; }
.dates__grid { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.dates__head h2 em { color: var(--rod); }
.dates__side { position: sticky; top: calc(var(--hh-s) + 28px); }
.dates__frame { position: relative; width: min(100%, calc(100svh - var(--hh-s) - 80px), 560px); aspect-ratio: 1; }
.dates__stack { position: absolute; inset: 0; }
/* every photo shares one box; only the one coming in eases down from a slight zoom */
.dates__stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); }
.dates__stack img.is-active { opacity: 1; animation: dates-zoom 1.4s var(--ease) both; }
@keyframes dates-zoom { from { transform: scale(1.07); } to { transform: none; } }
.dates__frame figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 7px 12px; border-radius: 10px; background: rgba(243, 243, 234, .92); font: italic 500 .95rem/1.2 var(--f-display); color: var(--ink); }
.dates__frame figcaption:empty { display: none; }

.dates__list { --pl: clamp(46px, 5vw, 76px); --eye: 22px; position: relative; padding-left: var(--pl); }
.dates__rod { position: absolute; left: 12px; top: 4px; bottom: 4px; width: 9px; border-radius: 9px; background: rgba(42, 32, 23, .1); }
.dates__rod-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--honey-2), var(--rod) 35%, var(--bark-2)); transform-origin: 50% 0; }
/* the rings where buds sat along the rod */
.dates__rod-fill::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(180deg, transparent 0 86px, rgba(42, 32, 23, .45) 86px 89px, transparent 89px 92px); }
.dates__items { display: grid; gap: clamp(14px, 2.2vh, 24px); margin: 0; padding: 0; list-style: none; }
.dates__month { position: relative; padding-top: clamp(4px, 1vh, 12px); }
.dates__month:first-child { padding-top: 0; }
.dates__month::before { content: ''; position: absolute; left: calc(16.5px - var(--pl) - 10px); top: calc(50% - 10px + clamp(2px, .5vh, 6px)); width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 3px solid var(--rod); box-sizing: border-box; }
.dates__month:first-child::before { top: calc(50% - 10px); }
.dates__month h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: italic 520 clamp(1.6rem, 2.1vw, 2.2rem)/1.1 var(--f-display); color: var(--rod); }
.dates__month h3 span { font: 600 .95rem/1 var(--f-body); letter-spacing: .06em; color: var(--ink-2); }

.etag-wrap { position: relative; filter: drop-shadow(0 16px 20px rgba(42, 32, 23, .16)); }
.etag__twine { position: absolute; left: calc(16.5px - var(--pl)); top: calc(50% - 1px); z-index: 0; width: calc(var(--pl) - 16.5px + var(--eye)); height: 2.5px; border-radius: 2px; background: repeating-linear-gradient(90deg, #7a5f42 0 5px, #a8895f 5px 8px); transform-origin: 0 50%; }
/* the metal ring round the label's hole */
.etag-wrap::after { content: ''; position: absolute; left: calc(var(--eye) - 10px); top: calc(50% - 10px); z-index: 2; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(243, 243, 234, .75); box-sizing: border-box; pointer-events: none; }
.etag { position: relative; z-index: 1; display: grid; grid-template-columns: clamp(126px, 10vw, 158px) minmax(0, 1fr); min-height: 150px; background: var(--kraft); color: var(--bark); clip-path: polygon(var(--eye) 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, var(--eye) 100%, 0 calc(100% - var(--eye)), 0 var(--eye)); -webkit-mask: radial-gradient(circle at var(--eye) 50%, transparent 7px, #000 7.5px); mask: radial-gradient(circle at var(--eye) 50%, transparent 7px, #000 7.5px); transform-origin: var(--eye) 50%; transition: transform .7s var(--ease); }
@media (any-hover: hover) { .etag-wrap:hover .etag { transform: rotate(-1.3deg); } }
.etag__date { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 16px 10px 16px calc(var(--eye) + 18px); text-align: center; border-right: 2px dashed rgba(42, 32, 23, .32); }
.etag__day { font-size: .95rem; font-weight: 600; line-height: 1.2; }
.etag__num { font: 650 clamp(2.7rem, 3.3vw, 3.6rem)/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
.etag__num--wide { font-size: clamp(1.9rem, 2.2vw, 2.4rem); padding-block: .12em; }
.etag__month { font-weight: 600; line-height: 1.2; }
.etag__body { display: grid; align-content: center; gap: 6px; padding: clamp(16px, 2.2vh, 22px) clamp(18px, 2vw, 30px); }
.etag__body > p:not([class]) { color: #3f3327; }
.etag__flags { display: flex; flex-wrap: wrap; gap: 8px; }
.etag__flag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--bark); color: var(--cream); font-size: .875rem; font-weight: 600; }
.etag__flag + .etag__flag { background: var(--leaf-deep); }
.etag__name { font: 600 clamp(1.3rem, 1.5vw, 1.6rem)/1.15 var(--f-display); }
.etag__addr { color: #3f3327; line-height: 1.4; }
.etag__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 2px; }
.etag .link-arrow { color: var(--bark); }
.etag .link-arrow svg { width: 18px; height: 18px; }
.etag--next { background: #DDB98C; }
.etag--note, .etag--provisional { background: var(--cream); }
.etag--note .etag__date { border-right-color: rgba(42, 32, 23, .22); }

@media (max-width: 899px) {
  .dates__grid { grid-template-columns: 1fr; }
  .dates__side { display: none; }
}
@media (max-width: 599px) {
  .dates__list { --pl: 38px; --eye: 18px; }
  .dates__rod { left: 8px; width: 8px; }
  .dates__month::before { left: calc(12px - var(--pl) - 10px); }
  .etag__twine { left: calc(12px - var(--pl)); width: calc(var(--pl) - 12px + var(--eye)); }
  .etag { grid-template-columns: 98px minmax(0, 1fr); min-height: 0; }
  .etag__date { padding: 14px 6px 14px calc(var(--eye) + 12px); }
  .etag__num { font-size: 2.4rem; }
  .etag__num--wide { font-size: 1.5rem; }
  .etag__day, .etag__month { font-size: .85rem; }
  .etag__body { padding: 14px 14px 14px 16px; }
  .etag__name { font-size: 1.2rem; }
  .site-footer__logos img { height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .bpanel, .bpanel__fig img, .bpanel__cap, .etag, .dates__stack img { transition: none; }
  .dates__stack img.is-active { animation: none; }
}