/*
 * Fianna concept: the structure every direction shares. Colours, type and
 * the character of each direction live in its own look.css, which sets the
 * tokens below and restyles what it needs to. Nothing here should need to
 * know which direction it is in.
 */
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 360deg }

/*
 * A size or a nudge chosen in the website editor (in-context-text-sizing.md,
 * the ecosystem's rule; lib/fianna/site-style.ts writes the inline half). A
 * size is a multiplier, --fce-s, and the rule that sizes the text multiplies
 * by --fce-k, so it is the design's own size at every width that grows.
 * ⚠ inherits: false, or a scaled paragraph scales every span in it again;
 * --fce-k is declared on *, not :root, so it resolves on each element. Below
 * 760px only 60% of a change above 1x reaches the page. A nudge is two
 * positions, the desktop's and the phone's, and these switches pick one.
 */
@property --fce-s { syntax: '<number>'; inherits: false; initial-value: 1 }
* { --fce-k: calc(1 + (var(--fce-s, 1) - 1) * var(--fce-damp, 1)) }
:root { --fce-damp: 1; --fce-nd: 1; --fce-nm: 0 }
@media (max-width: 760px) { :root { --fce-damp: 0.6; --fce-nd: 0; --fce-nm: 1 } }
:where([style*='--fce-s']) { font-size: calc(1em * var(--fce-k, 1)) }

:root {
  color-scheme: light;
  --bg: #fff; --bg-alt: #dde2cc; --card: #fff; --ink: #3a3a3a; --muted: #5e5e5e; --heading: #577a18; --title: #2c2c2c;
  --accent: #80b324; --accent-ink: #fff; --btn-bg: #111; --btn-ink: #fff; --line: #dbdbdb; --logo-ink: #203729;
  --hdr-bg: #fff; --announce-bg: #fff; --announce-ink: #2c2c2c; --ftr-bg: #f6f6f6; --ftr-ink: #474747; --art: #9fb86a;
  --font-display: 'Cinzel', Georgia, serif; --font-body: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  --radius: 0px; --gutter: clamp(16px, 4vw, 40px);
  --tone-0: #d97b3f; --tone-1: #5f8f3a; --tone-2: #3e7c93; --tone-3: #577a18; --tone-4: #b58a1b; --tone-5: #8a5a9e;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
button, input, select, textarea { font: inherit; color: inherit }
img { max-width: 100%; display: block; height: auto }
a { color: inherit; text-underline-offset: 3px }
p { margin: 0 0 1em }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.15; color: var(--title) }
main { overflow-x: clip; display: block }
[hidden] { display: none !important }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
/* The forms' honeypot: off screen for people, present for robots. */
.hp { position: absolute !important; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--btn-bg); color: var(--btn-ink); padding: 10px 16px; text-decoration: none }
.skip:focus { top: 12px }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter) }
.narrow { max-width: 820px }
.center { text-align: center }
.sec { padding-block: clamp(56px, 8vw, 110px); position: relative }
.band { position: relative; background: var(--bg-alt); padding-block: clamp(56px, 8vw, 100px); overflow: hidden }
.h3 { font-size: calc(clamp(1.45rem, 2.4vw, 1.9rem) * var(--fce-k, 1)); margin-bottom: .6em }
.h4 { font-size: calc(1.15rem * var(--fce-k, 1)); margin-bottom: .5em; font-weight: 600 }
.kicker { font-size: calc(.78rem * var(--fce-k, 1)); letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--heading); margin-bottom: .8em }
.lede { font-size: calc(clamp(1.1rem, 1.6vw, 1.28rem) * var(--fce-k, 1)); line-height: 1.6 }
.fine { font-size: calc(.9rem * var(--fce-k, 1)); color: var(--muted) }
.linkish { background: none; border: 0; padding: 0; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
.concept-note { font-size: .88rem; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 12px; margin-top: 16px }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 11px 22px; border: 1.5px solid var(--btn-bg); background: transparent; color: var(--btn-bg); border-radius: var(--radius); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s, color .3s, transform .3s var(--ease-out) }
.btn.primary { background: var(--btn-bg); color: var(--btn-ink) }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.btn.ghost:hover, .btn:not(.primary):hover { background: var(--btn-bg); color: var(--btn-ink) }
.btn.small { min-height: 38px; padding: 7px 16px; font-size: .74rem }
.btn .arw { width: 26px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .4s var(--ease-out) }
.btn:hover .arw { transform: translateX(5px) }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px }

/* ── announcement bar and header ────────────────────────────────────────── */
.announce { background: var(--announce-bg); color: var(--announce-ink); text-align: center; font-size: 1.05rem; padding: 8px 16px 0 }
.announce__in { display: inline-flex; align-items: center; gap: 10px }
.art--sprig { width: 22px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4 }
.hdr { position: sticky; top: 0; z-index: 50; background: var(--hdr-bg); transition: box-shadow .4s, background .4s }
.is-scrolled .hdr { box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .45) }
.hdr__in { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: '. brand tools' 'nav nav nav'; align-items: center; max-width: 1180px; margin: 0 auto; padding: 14px var(--gutter) 10px; transition: padding .4s var(--ease-out) }
.hdr__brand { grid-area: brand; display: block; width: clamp(140px, 16vw, 200px); transition: width .45s var(--ease-out) }
.is-scrolled .hdr__brand { width: clamp(96px, 9vw, 120px) }
.is-scrolled .hdr__in { padding-top: 8px; padding-bottom: 6px }
.hdr__nav { grid-area: nav; justify-self: center; margin-top: 10px }
.hdr__tools { grid-area: tools; justify-self: end; display: flex; align-items: center; gap: 10px }
.hdr__register { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 8px 14px; border: 1.5px solid currentColor; transition: background .3s, color .3s }
.hdr__register:hover { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg) }
.hdr__account { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50% }
.hdr__account svg, .menu__portal svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5 }
.hdr__account:hover { background: rgba(0, 0, 0, .06) }
.hdr__menu { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 10px }
.hdr__burger { display: grid; gap: 5px }
.hdr__burger i { display: block; height: 1.6px; background: currentColor; transition: transform .35s var(--ease-out), opacity .25s }
.menu-open .hdr__burger i:nth-child(1) { transform: translateY(6.6px) rotate(45deg) }
.menu-open .hdr__burger i:nth-child(2) { opacity: 0 }
.menu-open .hdr__burger i:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg) }

.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin: 0; padding: 0; list-style: none }
.nav > li { position: relative }
.nav a, .nav .sub-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; background: none; border: 0; cursor: pointer; position: relative }
.nav > li > a::after, .nav > li > .sub-btn::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out) }
.nav > li > a:hover::after, .nav > li > a[aria-current]::after, .nav > .is-current > .sub-btn::after, .nav > li > .sub-btn:hover::after { transform: none }
.sub-btn svg { width: 10px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s }
.is-open > .sub-btn svg { transform: rotate(180deg) }
.nav .sub { position: absolute; top: 100%; left: 50%; min-width: 210px; margin: 0; padding: 10px 0; list-style: none; background: var(--card); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .35); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .25s, transform .35s var(--ease-out), visibility 0s .35s; z-index: 5 }
.nav .is-open > .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s, transform .35s var(--ease-out) }
.nav .sub a { display: block; padding: 9px 20px; text-transform: none; letter-spacing: .02em; font-size: .95rem }
.nav .sub a:hover, .nav .sub a[aria-current] { color: var(--heading) }

.menu { position: fixed; inset: 0; z-index: 45; background: var(--bg); overflow-y: auto; opacity: 0; transition: opacity .4s }
.menu.is-open { opacity: 1 }
.menu__in { position: relative; min-height: 100%; padding: 150px var(--gutter) 60px; max-width: 560px; margin: 0 auto }
.mnav { list-style: none; margin: 0; padding: 0 }
.mnav > li { border-bottom: 1px solid var(--line) }
.mnav a, .mnav .sub-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 0; font-family: var(--font-display); font-size: 1.35rem; text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer; color: var(--title) }
.mnav .sub-btn svg { width: 14px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s }
.mnav .sub { list-style: none; padding: 0 0 10px 14px; margin: 0; display: none }
.mnav .is-open > .sub { display: block }
.mnav .sub a { font-family: var(--font-body); font-size: 1.05rem; padding: 8px 0 }
.mnav a[aria-current] { color: var(--heading) }
.menu__foot { display: grid; gap: 16px; margin-top: 30px }
.menu__portal { display: inline-flex; align-items: center; gap: 10px; text-decoration: none }
.menu__fern { position: absolute; right: -10px; bottom: 10px; width: 120px; height: auto; fill: none; stroke: var(--art); stroke-width: 1.2; opacity: .6; pointer-events: none }
@media (max-width: 1020px) {
  .hdr__nav { display: none }
  .hdr__menu { display: block }
  .hdr__in { grid-template-areas: '. brand tools'; padding-bottom: 12px }
  .hdr__register { display: none }
}

/* ── the layered logo ───────────────────────────────────────────────────── */
.flogo { position: relative; display: block; width: 100%; aspect-ratio: 1896 / 1232 }
.flogo > i { position: absolute; display: block; background: var(--logo-ink); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat }
.flogo__arc {
  -webkit-mask-image: var(--m), conic-gradient(from 250deg at 49% 88%, #000 var(--sweep), transparent calc(var(--sweep) + .5deg)) !important;
  mask-image: var(--m), conic-gradient(from 250deg at 49% 88%, #000 var(--sweep), transparent calc(var(--sweep) + .5deg)) !important;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.flogo__deer, .flogo__word { -webkit-mask-image: var(--m) !important; mask-image: var(--m) !important }

/* ── motion: every resting state is the finished state ──────────────────── */
.motion [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0ms) }
.motion [data-reveal].is-in { opacity: 1; transform: none }
.motion [data-reveal="clip"] { opacity: 1; transform: none }
.motion [data-reveal="clip"] > * { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1); transition-delay: var(--d, 0ms) }
.motion [data-reveal="clip"].is-in > * { clip-path: inset(0 0 0 0) }
.motion [data-reveal="clip"] img { transform: scale(1.12); transition: transform 2.2s var(--ease-out) }
.motion [data-reveal="clip"].is-in img { transform: none }
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em }
[data-split] .w > span { display: inline-block }
.motion [data-split] .w > span { transform: translateY(108%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 55ms) }
.motion [data-split].is-in .w > span { transform: none }
.art { fill: none; stroke: var(--art); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; overflow: visible }
.icon { width: 64px; height: 64px; fill: none; stroke: var(--heading); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.motion [data-draw] path, .motion [data-draw] circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out); transition-delay: calc(var(--k, 0) * 45ms + 150ms) }
.motion [data-draw].is-in path, .motion [data-draw].is-in circle { stroke-dashoffset: 0 }
.art--trail { width: 100%; height: auto; fill: var(--art); stroke: none }
.motion .art--trail .track { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .5s, transform .6s var(--ease-out); transition-delay: calc(var(--i) * 150ms) }
.motion .art--trail.is-in .track { opacity: .85; transform: none }
.art--trail .track { opacity: .85 }
.rulehead { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); margin-bottom: clamp(24px, 4vw, 40px) }
.rulehead__line { flex: 1; height: 1.5px; background: var(--accent); min-width: 20px }
.rulehead__title { font-family: var(--font-display); color: var(--heading); font-size: calc(clamp(1.6rem, 3.4vw, 2.3rem) * var(--fce-k, 1)); text-align: center; max-width: 24ch }
.motion .rulehead__line { transform: scaleX(0); transition: transform 1.4s var(--ease-out) .2s }
.motion .rulehead__line:first-child { transform-origin: right }
.motion .rulehead__line:last-child { transform-origin: left }
.motion .rulehead.is-in .rulehead__line { transform: none }

.motion.is-entering #app { opacity: 0 }
.motion #app { transition: opacity .5s ease }
.motion.is-leaving #app { opacity: 0; transition-duration: .35s }

/* ── page heroes ────────────────────────────────────────────────────────── */
.phero { padding-top: clamp(40px, 6vw, 72px) }
.phero--plain { padding-bottom: 0 }
.phero--plain + .sec { padding-top: clamp(16px, 3vw, 36px) }
.phero__fiddle { display: block; width: 44px; height: auto; margin: 0 auto 4px }
.phero__sub { text-align: center; font-size: calc(1.12rem * var(--fce-k, 1)); font-weight: 600; color: var(--muted); max-width: 60ch; margin: -10px auto 0 }
.phero__media { margin-top: clamp(20px, 3vw, 34px) }
.phero__frame { position: relative; overflow: hidden; aspect-ratio: 2 / 1; max-height: 560px; width: 100% }
.phero__par { position: absolute; inset: -9% 0; will-change: transform }
.phero__media img { width: 100%; height: 100%; object-fit: cover }
@media (max-width: 700px) { .phero__frame { aspect-ratio: 4 / 3 } .phero__media.wrap { padding-inline: 0 } }

/* ── shared page parts ──────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding-block: 0 }
.split__text { padding: clamp(40px, 6vw, 80px) clamp(20px, 6vw, 90px); align-self: center; position: relative }
.split__block + .split__block { margin-top: 12px }
.split__cedar { display: block; width: 150px; height: auto; margin: 18px 0 22px }
.split__media { overflow: hidden; min-height: 420px; position: relative }
.split__media > div { position: absolute; inset: -8% 0; }
.split__media img { width: 100%; height: 100%; object-fit: cover }
@media (max-width: 860px) { .split { grid-template-columns: 1fr } .split__media { min-height: 0; aspect-ratio: 4 / 3 } }
.pillars__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 }
.pillars__grid li { display: grid; justify-items: center; text-align: center; gap: 16px; padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 48px); font-size: clamp(1.1rem, 1.8vw, 1.32rem); color: var(--title) }
.pillars__grid li:nth-child(odd) { border-right: 1px solid rgba(0, 0, 0, .14) }
.pillars__grid li p { margin: 0; max-width: 26ch }
.pillars__fern { position: absolute; right: 2%; bottom: -20px; width: 110px; height: auto; opacity: .7 }
@media (max-width: 640px) { .pillars__grid { grid-template-columns: 1fr } .pillars__grid li:nth-child(odd) { border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, .14) } }
.carry__trail { display: block; max-width: 520px; margin: 0 auto 30px }
.questions { list-style: none; padding: 0; margin: 0 0 1.4em; text-align: center; display: grid; gap: 6px }
.questions li::before { content: '– ' }
.closing { font-weight: 600; font-size: calc(1.2rem * var(--fce-k, 1)); max-width: 36ch; margin: 30px auto 0; color: var(--title) }

.team { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(48px, 7vw, 90px) }
.member { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 64px); align-items: start }
.member--flip .member__photo { order: 2 }
.member__photo { overflow: hidden; aspect-ratio: 4 / 5 }
.member__photo img { width: 100%; height: 100%; object-fit: cover }
.member__name { font-family: var(--font-display); font-size: calc(clamp(1.5rem, 2.8vw, 2rem) * var(--fce-k, 1)); color: var(--heading) }
.member__role { font-weight: 600; letter-spacing: .04em; margin: 6px 0 18px; color: var(--muted) }
.member__bio.is-clamped { max-height: 16.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent) }
.more-btn { background: none; border: 0; padding: 6px 0; color: var(--heading); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; cursor: pointer }
@media (max-width: 760px) { .member { grid-template-columns: 1fr } .member--flip .member__photo { order: 0 } .member__photo { aspect-ratio: 4 / 3 } }

.work { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 70px); align-items: start }
.work__photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; position: sticky; top: 140px }
.work__photo > div, .work__photo img { height: 100%; width: 100% }
.work__photo img { object-fit: cover }
.work__fiddle { position: absolute; right: 6%; bottom: 10px; width: 90px; height: auto }
@media (max-width: 860px) { .work { grid-template-columns: 1fr } .work__photo { position: static; aspect-ratio: 4 / 3 } .work__fiddle { display: none } }
.positions { border: 1.5px dashed var(--line); padding: 26px; text-align: center; margin-top: 10px }
.positions__empty { font-family: var(--font-display); font-size: calc(1.2rem * var(--fce-k, 1)); margin: 0 }

.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 36px) }
.pcard { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px }
.pcard__photo { display: block; overflow: hidden; aspect-ratio: 2 / 1; width: 100% }
.pcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out) }
.pcard:hover .pcard__photo img { transform: scale(1.05) }
.pcard__title { font-size: 1.3rem; margin-top: 8px; order: -1 }
.pcard__title a { text-decoration: none }
.pcard p { color: var(--muted); max-width: 46ch }
@media (max-width: 720px) { .cards2 { grid-template-columns: 1fr } }
.gab__waves { display: block; width: 100%; height: 60px; margin-bottom: -6px; opacity: .8 }

.notice { margin: 28px 0; padding: 26px clamp(20px, 4vw, 34px); border: 1.5px solid var(--accent); text-align: center }
.notice__title { font-family: var(--font-display); color: var(--heading); font-size: calc(1.4rem * var(--fce-k, 1)); margin-bottom: 10px }
.camps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 8vw, 100px) }
.camp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 60px); align-items: start }
.camp:nth-child(even) .camp__photo { order: 2 }
.camp__photo { overflow: hidden; aspect-ratio: 4 / 3; position: sticky; top: 140px }
.camp__photo img { width: 100%; height: 100%; object-fit: cover }
.camp__when { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: calc(.85rem * var(--fce-k, 1)); color: var(--heading); margin-bottom: 6px }
.camp__title { font-family: var(--font-display); font-size: calc(clamp(1.7rem, 3vw, 2.3rem) * var(--fce-k, 1)); margin-bottom: 14px }
@media (max-width: 860px) { .camp { grid-template-columns: 1fr } .camp:nth-child(even) .camp__photo { order: 0 } .camp__photo { position: static } }

.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 22px 0; padding: 20px 0; border-block: 1px solid var(--line) }
.details dt { font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--heading); margin-bottom: 4px }
.details dd { margin: 0; line-height: 1.5 }
@media (max-width: 520px) { .details { grid-template-columns: 1fr } }
.grps { display: grid; gap: 10px }
.grp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line) }
.grp__text { display: grid; gap: 2px }
.grp__text > span:first-of-type { color: var(--muted); font-size: .95rem }
.seats { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--heading) }
.seats::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2.4s infinite }
.seats--low { color: #9a5b12 } .seats--low::before { background: #d08a2c }
.seats--full { color: #8c3b26 } .seats--full::before { background: #c0583a; animation: none }
.seats--past { color: var(--muted) } .seats--past::before { background: #aaa; animation: none }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(128, 179, 36, .55) } 70% { box-shadow: 0 0 0 8px rgba(128, 179, 36, 0) } 100% { box-shadow: 0 0 0 0 rgba(128, 179, 36, 0) } }

.yl { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(64px, 9vw, 120px) }
.yl__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start }
.yl__item--flip .yl__media { order: 2 }
.yl__media { overflow: hidden; aspect-ratio: 4 / 5; position: sticky; top: 140px }
.yl__media > div, .yl__media img { width: 100%; height: 100% }
.yl__media img { object-fit: cover }
.yl__title { font-family: var(--font-display); font-size: calc(clamp(2rem, 4vw, 3rem) * var(--fce-k, 1)); color: var(--heading); margin-bottom: 16px }
.yl__back { margin-top: 18px; font-size: .95rem }
@media (max-width: 860px) { .yl__item { grid-template-columns: 1fr } .yl__item--flip .yl__media { order: 0 } .yl__media { position: static; aspect-ratio: 4 / 3 } }

.policy { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: start }
.policy__toc { position: sticky; top: 150px; font-size: .95rem }
.policy__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; border-left: 1.5px solid var(--line); padding-left: 14px }
.policy__toc a { text-decoration: none; color: var(--muted) }
.policy__toc a:hover { color: var(--heading) }
.policy__greet { font-family: var(--font-display); font-size: calc(1.3rem * var(--fce-k, 1)); color: var(--heading) }
.policy__sec { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--line) }
.policy__grp { margin: 20px 0 }
.policy__grp ul, .policy__grp ol { padding-left: 1.2em; display: grid; gap: 8px }
@media (max-width: 860px) { .policy { grid-template-columns: 1fr } .policy__toc { position: static } }

.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 70px); align-items: start }
.contact__card { padding: 24px; border: 1px solid var(--line); background: var(--card); margin-bottom: 18px }
.contact__place { font-family: var(--font-display); color: var(--heading); font-size: calc(1.1rem * var(--fce-k, 1)) }
.contact__big { font-size: 1.15rem; font-weight: 600 }
.hours { display: grid; gap: 4px; margin: 0 }
.hours div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--line); padding: 4px 0 }
.hours dt { font-weight: 600 } .hours dd { margin: 0 }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr } }

.fld { display: grid; gap: 6px; margin-bottom: 16px }
.fld > span { font-size: .85rem; font-weight: 600; letter-spacing: .03em; color: var(--muted) }
.fld input, .fld textarea, .fld select, .reg__pickups input, .mailing input { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--line); background: var(--card); border-radius: var(--radius); transition: border-color .25s, box-shadow .25s }
.fld textarea { min-height: 96px; resize: vertical }
.fld small { font-size: .82rem; color: var(--muted) }
.fld input:focus, .fld textarea:focus, .reg__pickups input:focus, .mailing input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent) }
.chk { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 16px; cursor: pointer }
.chk input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); flex: none }
.cform__note, .lform__note, .mailing__note { font-size: .95rem; color: var(--heading); margin: 12px 0 0; min-height: 1.2em }
.login__fiddle { width: 70px; height: auto; margin: 0 auto 10px }
.lform { text-align: left; max-width: 440px; margin: 20px auto 0 }
.login__alt { margin-top: 30px }

.mailing { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px }
.mailing input { flex: 1 1 220px }
.mailing .mailing__note { flex-basis: 100% }
.mailing.is-sent input { border-color: var(--accent) }

/* ── calendar ───────────────────────────────────────────────────────────── */
.cal { position: relative }
.cal__bar { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 14px }
.cal__title { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); min-width: 10ch; text-align: center; color: var(--heading) }
.cal__nav { width: 46px; height: 46px; border: 1.5px solid var(--line); background: var(--card); border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: border-color .3s }
.cal__nav .arw { width: 22px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transform: scaleX(-1) }
.cal__nav--next .arw { transform: none }
.cal__nav:hover:not([disabled]) { border-color: var(--accent) }
.cal__nav[disabled] { opacity: .3; cursor: default }
.cal__legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 0; margin: 0 0 20px; font-size: .9rem }
.cal__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--c) }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line) }
.cal__wd { padding: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card) }
.cal__cell { min-height: 104px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; gap: 4px; position: relative }
.cal__cell.is-empty { background: transparent }
.cal__cell.is-past { background: color-mix(in srgb, var(--card) 70%, var(--line)) }
.cal__cell.is-today { box-shadow: inset 0 0 0 2px var(--accent) }
.cal__cell.is-break { background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--line) 70%, transparent) 7px 8px) }
.cal__d { font-size: .82rem; font-weight: 600; color: var(--muted) }
.is-today .cal__d { color: var(--heading) }
.cal__chip { display: block; width: 100%; text-align: left; font-size: .76rem; font-weight: 600; line-height: 1.25; padding: 4px 6px; border: 0; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 14%, var(--card)); color: var(--title); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform .2s }
.cal__chip:hover { transform: translateX(2px) }
/* The month fills in day by day when it comes into view, and again on each
   change of month (the grid is new each time). `backwards` only, so a chip's
   own hover still moves it once the animation is over. */
.motion .cal__body:not(.is-in) .cal__cell { opacity: 0 }
.motion .cal__body.is-in .cal__cell { animation: cal-cell .6s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 12ms) }
.motion .cal__body.is-in .cal__chip { animation: cal-chip .5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 12ms + 240ms) }
@keyframes cal-cell { from { opacity: 0; transform: translateY(10px) } }
@keyframes cal-chip { from { opacity: 0; transform: translateX(-8px) } }
.cal__chip.is-cancelled { text-decoration: line-through; opacity: .6; background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--c) 14%, transparent) 5px 7px) }
.cal__chip.is-makeup { box-shadow: inset 0 0 0 1.5px var(--c) }
.cal__tag { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700 }
.cal__cancel { font-weight: 600; color: #8c3b26 }
.cal__cancel--makeup { color: var(--heading) }
.cal__brk { font-size: .7rem; color: var(--muted); font-style: italic }
.tone-0 { --c: var(--tone-0) } .tone-1 { --c: var(--tone-1) } .tone-2 { --c: var(--tone-2) } .tone-3 { --c: var(--tone-3) } .tone-4 { --c: var(--tone-4) } .tone-5 { --c: var(--tone-5) }
.cal__pop { position: absolute; left: var(--x); top: var(--y); z-index: 10; width: min(300px, calc(100% - 24px)); padding: 18px 18px 16px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .45) }
.cal__pop h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 6px }
.cal__pop p { margin: 0 0 6px; font-size: .95rem }
.cal__popbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.cal__popbtns .btn { min-height: 38px; padding: 6px 14px; font-size: .7rem }
.cal__x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 4px }
.cal__foot { display: grid; justify-items: center; gap: 8px; margin-top: 24px; text-align: center }
@media (max-width: 700px) {
  .cal__cell { min-height: 64px; padding: 3px }
  .cal__wd { padding: 6px 2px; font-size: .62rem; letter-spacing: .04em; text-align: center }
  .cal__chip { font-size: 0; padding: 0; height: 8px; border-left: 0; border-radius: 4px; background: var(--c) }
  .cal__brk { display: none }
}

/* ── registration ───────────────────────────────────────────────────────── */
.reg { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: 'steps steps' 'form aside'; gap: 26px clamp(24px, 4vw, 56px); align-items: start }
.reg.is-done { display: block }
.reg__steps { grid-area: steps; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; counter-reset: s }
.reg__steps li { display: grid; gap: 8px; font-size: .82rem; color: var(--muted); position: relative; padding-top: 14px }
.reg__steps li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--line); transition: background .5s }
.reg__steps li.is-done::before, .reg__steps li.is-on::before { background: var(--accent) }
.reg__steps li.is-on { color: var(--title); font-weight: 700 }
.reg__n { display: none }
.reg__form { grid-area: form; min-width: 0 }
.reg__form fieldset { border: 0; padding: 0; margin: 0; min-width: 0 }
.reg__form legend { padding: 0; font-family: var(--font-display); color: var(--heading) }
.reg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px }
@media (max-width: 560px) { .reg__grid { grid-template-columns: 1fr } .reg__steps .reg__l { font-size: 0 } .reg__steps li { padding-top: 10px } }
.reg__progs { display: grid; gap: 12px }
.reg__prog, .reg__plan { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 12px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .3s var(--ease-out); position: relative }
.reg__prog:hover, .reg__plan:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)) }
.reg__prog.is-on, .reg__plan.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) }
.reg__prog input, .reg__plan input { position: absolute; opacity: 0; pointer-events: none }
.reg__prog:has(input:focus-visible), .reg__plan:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px }
.reg__progphoto { width: 96px; height: 80px; overflow: hidden }
.reg__progphoto img { width: 100%; height: 100%; object-fit: cover }
.reg__progtext { display: grid; gap: 2px; font-size: .95rem; min-width: 0 }
.reg__progtext strong { font-size: 1.05rem; color: var(--title) }
.reg__started { font-size: .82rem; color: var(--muted) }
.reg__past { margin-top: 16px }
.reg__plan { grid-template-columns: 22px 1fr }
.reg__plan::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); transition: border-width .2s, border-color .2s }
.reg__plan.is-on::before { border: 6px solid var(--accent) }
.reg__plan > span { display: grid; gap: 2px }
.reg__plan em { font-style: normal; font-size: .85rem; color: var(--heading) }
.reg__plans { display: grid; gap: 10px; margin: 16px 0 }
.reg__total { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 16px 18px; background: var(--bg-alt); margin-bottom: 8px }
.reg__total strong { font-size: 1.6rem; grid-row: span 2; align-self: center; color: var(--title) }
.reg__total small { color: var(--muted) }
.reg__agecheck .ok { color: var(--heading); font-weight: 600 }
.reg__agecheck .warn, .reg__warn { color: #8c3b26; font-weight: 600 }
.reg__more { margin: 6px 0 16px }
.reg__more summary { cursor: pointer; color: var(--heading); font-weight: 600 }
.reg__label { font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 8px }
.reg__pickups { display: grid; gap: 8px; margin-top: 10px }
.reg__pickups .linkish { justify-self: start }
.reg__consent { padding: 16px 0; border-bottom: 1px solid var(--line) }
.reg__private { font-size: .95rem; color: var(--muted); background: var(--bg-alt); padding: 10px 14px; margin-bottom: 16px }
.reg__photointro { color: var(--muted) }
.reg__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px }
.reg__photo { position: relative; display: grid; align-content: start; gap: 8px; padding: 18px 16px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .3s var(--ease-out) }
.reg__photo input { position: absolute; opacity: 0; pointer-events: none }
.reg__photo svg { width: 40px; height: 40px; fill: none; stroke: var(--heading); stroke-width: 1.6; stroke-linecap: round }
.reg__photo strong { color: var(--title); line-height: 1.3 }
.reg__photo span { font-size: .9rem; color: var(--muted) }
.reg__photo:hover { transform: translateY(-2px) }
.reg__photo.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) }
.reg__photo::after { content: ''; position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card) no-repeat center / 12px 12px }
.reg__photo.is-on::after { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.reg__photo--none svg { stroke: #9b4a2e }
.reg__photo--none.is-on { border-color: #b45a38; background: #fbf1ed; box-shadow: 0 0 0 3px rgba(180, 90, 56, .2) }
.reg__photo--none.is-on::after { border-color: #b45a38; background-color: #b45a38 }
.reg__photo:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px }
@media (max-width: 700px) { .reg__photos { grid-template-columns: 1fr } }
.reg__consent p { color: var(--muted); font-size: .95rem }
.reg__review { display: grid; gap: 0; margin: 0 }
.reg__review div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.reg__review dt { font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--heading) }
.reg__review dd { margin: 0; overflow-wrap: anywhere }
@media (max-width: 560px) { .reg__review div { grid-template-columns: 1fr; gap: 2px } }
.reg__problem { color: #8c3b26; font-weight: 600; margin-top: 14px }
.reg__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px }
.reg__nav [data-next] { margin-left: auto }
.reg__aside { grid-area: aside; position: sticky; top: 150px }
.reg__sum { padding: 20px; background: var(--card); border: 1px solid var(--line); position: relative; overflow: hidden }
.reg__sum h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 8px }
.reg__sumphoto { margin: -20px -20px 16px; aspect-ratio: 16 / 10; overflow: hidden }
.reg__sumphoto img { width: 100%; height: 100%; object-fit: cover }
.reg__sumtotal { font-size: 1.6rem; font-weight: 600; margin: 10px 0 0; color: var(--title) }
.reg__fern { width: 80px; height: auto; margin: 10px auto 0; display: block }
@media (max-width: 900px) { .reg { grid-template-columns: 1fr; grid-template-areas: 'steps' 'aside' 'form' } .reg__aside { position: static } .reg__sumphoto, .reg__fern { display: none } .reg__aside:has(.reg__sum--empty) { display: none } .reg__sum { padding: 14px 16px } .reg__sum h3 { font-size: 1.1rem } }
.reg__done { max-width: 720px; margin: 0 auto; text-align: center }
.reg__donetitle { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--heading); margin: 8px 0 18px }
.reg__done .btns { justify-content: center }
.reg__trail { max-width: 460px; margin: 0 auto 20px; display: block }
.reg__try { margin-top: 26px }

/* ── shop ─────────────────────────────────────────────────────────────────── */
.hdr__cart { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; border-radius: 50%; cursor: pointer }
.hdr__cart:hover { background: rgba(0, 0, 0, .06) }
.hdr__cart svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round }
.hdr__cartn { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center }
.hdr__cart.is-bump { animation: cart-bump .5s var(--ease-out) }
@keyframes cart-bump { 0% { transform: scale(1) } 40% { transform: scale(1.25) rotate(-8deg) } 100% { transform: none } }

.shop__note { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px); color: var(--muted); font-size: .95rem; text-align: center; justify-content: center }
.shop__note span { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--heading); border: 1.5px solid currentColor; padding: 1px 8px }
.shop__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px) }
@media (max-width: 960px) { .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 600px) { .shop__grid { grid-template-columns: 1fr } }
.prod { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); transition: box-shadow .5s, transform .5s var(--ease-out) }
.prod:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(20, 40, 10, .5) }
.prod__art { aspect-ratio: 1 / 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #fff 0, #f2f2ea 70%); overflow: hidden }
.prod__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1 }
.prod__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px }
.prod__name { font-family: var(--font-display); font-size: 1.35rem; color: var(--title) }
.prod__price { font-weight: 700; font-size: 1.1rem; color: var(--title) }
.prod__blurb { color: var(--muted); margin: 0; font-size: .95rem }
.prod__swatches { display: flex; align-items: center; gap: 8px; margin-top: 4px }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: var(--sw); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .25s, transform .25s }
.swatch.is-on { box-shadow: 0 0 0 2px var(--title); transform: scale(1.08) }
.prod__cname { font-size: .88rem; color: var(--muted); margin-left: 4px }
.prod__buy { display: flex; gap: 10px; margin-top: auto; padding-top: 10px }
.prod__buy select { flex: 1; min-width: 0; min-height: 38px; padding: 6px 10px; border: 1.5px solid var(--line); background: var(--card); border-radius: var(--radius) }
.prod__stock { font-size: .85rem; color: var(--heading); min-height: 1.2em; margin: 0 }
.shop__trail { display: block; max-width: 460px; margin: clamp(40px, 6vw, 70px) auto 10px }
.shop__how { max-width: 720px; margin: 0 auto; text-align: center }
.shop__how ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--muted) }
.shop__how strong { color: var(--title) }

/* the drawn products: a garment in its colour, the logo printed on it */
.pa { position: relative; display: block; width: 78%; aspect-ratio: 1 / 1; transition: transform .6s var(--ease-out) }
.prod:hover .pa { transform: rotate(-2deg) translateY(-3px) }
.pa__shape { width: 100%; height: 100%; fill: var(--g); stroke: rgba(0, 0, 0, .12); stroke-width: 1; transition: fill .45s; filter: drop-shadow(0 14px 16px rgba(30, 40, 20, .18)) }
.pa__shape .pa__fold { fill: none; stroke: rgba(0, 0, 0, .14); stroke-width: 1.4 }
.pa__shape .pa__brim { fill: var(--g); filter: brightness(.88) }
.pa__shape circle { fill: var(--g); filter: brightness(.9) }
.pa__print { position: absolute; display: block }
.pa__print--tee { left: 35%; top: 31%; width: 30% }
.pa__print--tee.is-kids { left: 35%; width: 30% }
.pa__print--cap { left: 43%; top: 34%; width: 15%; aspect-ratio: 440 / 599 }
.pa__print--toque { left: 45%; top: 64%; width: 10%; aspect-ratio: 440 / 599 }
.flogo--print > i { transition: background .45s }
.pa__deer { position: absolute; inset: 0; display: block; background: var(--logo-ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: background .45s }
.pa__stickers { position: relative; display: block; width: 100%; height: 100% }
.pa__sticker { position: absolute; display: grid; place-items: center; background: #fff; box-shadow: 0 8px 18px -8px rgba(30, 40, 20, .45), 0 0 0 1px rgba(0, 0, 0, .06) }
.pa__sticker--round { left: 4%; top: 10%; width: 52%; aspect-ratio: 1; border-radius: 50%; padding: 10%; transform: rotate(-8deg); --logo-ink: #203729 }
.pa__sticker--deer { right: 6%; top: 18%; width: 32%; aspect-ratio: 440 / 599; border-radius: 14px; background: #2d4634; transform: rotate(9deg) }
.pa__sticker--deer .pa__deer { inset: 12%; background: #efe8d4 }
.pa__sticker--motto { left: 16%; bottom: 10%; width: 72%; padding: 8px 12px; border-radius: 99px; background: #80b324; color: #14210b; font: 700 clamp(8px, 1.1vw, 11px)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; text-align: center; transform: rotate(-3deg) }
.pa--ghost .pa__shape { filter: none }

/* the cart drawer */
.cart { position: fixed; inset: 0; z-index: 80 }
.cart__scrim { position: absolute; inset: 0; background: rgba(15, 22, 12, .45); opacity: 0; transition: opacity .4s }
.cart.is-open .cart__scrim { opacity: 1 }
.cart__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--bg); color: var(--ink); display: flex; flex-direction: column; box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .5); transform: translateX(104%); transition: transform .45s var(--ease-out) }
.cart.is-open .cart__panel { transform: none }
.cart__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line) }
.cart__title { font-family: var(--font-display); color: var(--heading); font-size: 1.5rem }
.cart__x { border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 4px 8px }
.cart__body { flex: 1; overflow-y: auto; padding: 18px 22px 28px }
.cart__empty, .cart__done { text-align: center; padding: 30px 0; display: grid; justify-items: center; gap: 12px }
.cart__fern { width: 70px; height: auto }
.cart__trail { width: 260px; max-width: 100% }
.cart__donetitle { font-family: var(--font-display); color: var(--heading); font-size: 1.7rem }
.cart__lines { list-style: none; margin: 0; padding: 0 }
.cline { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: 'art text sum' 'art qty qty'; gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line) }
.cline__art { grid-area: art; width: 64px; height: 64px; display: grid; place-items: center; background: #f4f4ee }
.cline__art .pa { width: 90% }
.cline__art .pa__sticker--motto, .pa--ghost .pa__sticker--motto { display: none }
.cline__text { grid-area: text; display: grid; font-size: .95rem; min-width: 0 }
.cline__text span { color: var(--muted); font-size: .88rem }
.cline__sum { grid-area: sum; font-weight: 700 }
.cline__qty { grid-area: qty; display: inline-flex; align-items: center; gap: 10px }
.cline__qty button { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; font-size: 1rem; line-height: 1 }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 2px; font-size: 1.05rem }
.cart__total strong { font-size: 1.4rem }
.cart__form fieldset { border: 0; padding: 0; margin: 18px 0 0 }
.cart__form legend { padding: 0; margin-bottom: 8px }
.cart__go { width: 100%; margin-top: 8px }
.cart__problem { color: #8c3b26; font-weight: 600; margin: 8px 0 0; min-height: 1em }
.cart-open { overflow: hidden }

/* ── footer ─────────────────────────────────────────────────────────────── */
.ftr { background: var(--ftr-bg); color: var(--ftr-ink); position: relative; padding-top: 70px; margin-top: 0 }
.ftr__art { position: absolute; top: 0; left: 0; right: 0; height: 60px; transform: translateY(-58px); pointer-events: none }
.ftr__ridge { width: 100%; height: 60px; stroke: var(--art) }
.ftr__top { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); align-items: center; padding-bottom: 40px; border-bottom: 1px solid var(--line) }
.ftr__brand { width: 200px }
.ftr__h { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 10px; color: var(--title) }
.ftr__list .ftr__h { font-size: 1.5rem }
.ftr__motto { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--title); margin: 0 }
.ftr__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-block: 40px }
.ftr__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .95rem }
.ftr__links a { text-decoration: none }
.ftr__links a:hover { color: var(--heading); text-decoration: underline }
.ftr__land { font-size: .9rem; font-style: italic; color: var(--muted); padding-bottom: 18px }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 18px 90px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted) }
.ftr__base a { color: inherit; text-decoration: underline; text-underline-offset: 2px }
.ftr__base a:hover { color: var(--heading) }
@media (max-width: 860px) { .ftr__top { grid-template-columns: 1fr } .ftr__brand { width: 160px } .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
/* The live site's footer: key information only, one band (site.js) */
.ftr__key { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 64px); align-items: center; padding-bottom: 32px; border-bottom: 1px solid var(--line) }
.ftr--key .ftr__brand { width: 180px }
.ftr__info { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: .98rem }
.ftr__acts { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .98rem; font-weight: 700 }
.ftr__info a, .ftr__acts a { text-decoration: none }
.ftr__info a:hover, .ftr__acts a:hover { color: var(--heading); text-decoration: underline }
.ftr--key .ftr__land { padding-top: 22px }
.ftr--key .ftr__base { padding-bottom: 28px }
@media (max-width: 860px) { .ftr__key { grid-template-columns: 1fr; gap: 18px } .ftr--key .ftr__brand { width: 150px } }

/* ── the direction switcher ─────────────────────────────────────────────── */
.dock { position: fixed; left: 16px; bottom: 16px; z-index: 60; font: 400 14px/1.4 'Source Sans 3', system-ui, sans-serif; color: #1d2a22 }
.dock__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 99px; background: #1d2a22; color: #eef3e6; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); font-size: 13px }
.dock__btn strong { color: #fff }
.dock__btn svg { width: 10px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s }
.dock.is-open .dock__btn svg { transform: rotate(180deg) }
.dock__dot { width: 8px; height: 8px; border-radius: 50%; background: #9ccc3d; box-shadow: 0 0 0 3px rgba(156, 204, 61, .3) }
.dock__panel { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(330px, calc(100vw - 32px)); background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); color: #1d2a22 }
.dock__h { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6b776d; margin: 4px 6px 8px }
.dock__look { display: grid; gap: 1px; padding: 9px 10px; border-radius: 9px; text-decoration: none; color: #1d2a22 }
.dock__look span { font-size: 12.5px; color: #5c6a5f }
.dock__look:hover { background: #eef1e4 }
.dock__look.is-current { background: #203729; color: #fff }
.dock__look.is-current span { color: #cfdcc3 }
.dock__links { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 6px }
.dock__links a { padding: 6px 10px; border-radius: 99px; background: #eef1e4; text-decoration: none; font-size: 13px; color: #1d2a22 }
.dock__links a:hover { background: #dde2cc }
.dock__note { font-size: 12px; color: #6b776d; margin: 8px 6px 2px }
.menu-open .dock { opacity: 0; pointer-events: none }
@media (max-width: 560px) { .dock { left: 10px; bottom: 10px } .dock__btn { padding: 8px 12px; font-size: 12px } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
}
@media print { .dock, .hdr, .announce, .ftr, .menu, .fce-launch { display: none } }

/* The ecosystem's edit launcher on the live site (site.js launcher()), drawn
   only for a signed-in editor: the same pill as every Folklore site's
   (src/components/editor/editor.css), copied because the live pages load no
   studio stylesheet. */
.fce-launch { position: fixed; right: 20px; bottom: 20px; z-index: 900 }
.fce-launch-row { display: flex; align-items: center; gap: 8px; background: rgba(20, 16, 12, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 8px; border-radius: 999px; box-shadow: 0 10px 30px rgba(20, 16, 12, .4) }
.fce-launch .fce-btn { font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; border-radius: 999px; border: 1px solid #f6f1e7; background: #f6f1e7; color: #1a1712; text-decoration: none; white-space: nowrap }
.fce-launch .fce-btn.ghost { background: transparent; color: #f6f1e7; border-color: rgba(246, 241, 231, .35) }
.fce-launch .fce-btn:hover { filter: brightness(1.06) }
.fce-launch .fce-btn:focus-visible { outline: 2px solid #b08748; outline-offset: 2px }
.fce-launch-glyph { font-style: normal; margin-right: 2px }
@media (max-width: 560px) { .fce-launch { right: 12px; bottom: 12px } .fce-launch .fce-btn { padding: 9px 12px } }