@property --progress {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
:root {
--z-header: 60;
--z-menu: 90;
--z-drawer: 100;
--z-toast: 120;
--admin-offset: 0px;
--shell-scrim: color-mix(in oklab, var(--moss-950) 62%, transparent);
}
.admin-bar { --admin-offset: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
.admin-bar { --admin-offset: 0px; } } html.is-scroll-locked { overflow: hidden; }
html.is-scroll-locked body { padding-right: var(--scrollbar-comp, 0px); } .announce :focus-visible,
.site-header :focus-visible,
.mobile-menu :focus-visible,
.site-footer :focus-visible,
.ormus-drawer__head :focus-visible,
.ormus-toast :focus-visible { outline-color: var(--focus-on-moss); } .announce {
position: relative;
z-index: calc(var(--z-header) + 1);
background: var(--moss-950);
color: var(--on-moss-soft);
font-size: var(--fs-micro);
line-height: 1.35;
letter-spacing: .02em;
}
.announce__inner {
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
min-height: 2.25rem;
padding-block: .45rem;
text-align: center;
}
.announce__icon {
flex: none;
width: 1.15rem;
height: 1.15rem;
color: var(--gold-400);
}
.announce__text { margin: 0; }
.announce__text strong,
.announce__text .amount { color: var(--on-moss); font-weight: 650; }
.announce__sep {
display: inline-block;
width: 4px;
height: 4px;
margin: 0 .7em .18em;
border-radius: 50%;
background: var(--gold-500);
vertical-align: middle;
}
@media (max-width: 599px) {
.announce__extra { display: none; }
} .site-header {
position: sticky;
top: var(--admin-offset);
z-index: var(--z-header);
height: var(--header-h);
color: var(--on-moss);
background-color: var(--moss-900);
border-bottom: 1px solid transparent;
transition:
transform var(--d-3) var(--ease-out),
background-color var(--d-2) var(--ease-out),
border-color var(--d-2) var(--ease-out),
box-shadow var(--d-2) var(--ease-out);
}
.site-header:not(.is-ready) { transition: none; } .site-header::before {
content: "";
position: absolute;
inset: 0 0 -70%;
z-index: -1;
background: linear-gradient(to bottom, var(--shell-scrim), transparent);
opacity: 0;
pointer-events: none;
transition: opacity var(--d-2) var(--ease-out);
}
.site-header.is-scrolled { background-color: color-mix(in oklab, var(--moss-900) 94%, transparent);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
backdrop-filter: blur(16px) saturate(1.2);
border-bottom-color: var(--line-on-moss);
box-shadow: var(--shadow-1);
}
.site-header.is-hidden {
transform: translate3d(0, calc(-100% - var(--admin-offset) - 2px), 0);
box-shadow: none;
}
.site-header.is-hidden:focus-within { transform: none; } .has-hero .site-header { margin-bottom: calc(var(--header-h) * -1); }
.has-hero .site-header:not(.is-scrolled) { background-color: transparent; }
.has-hero .site-header:not(.is-scrolled)::before { opacity: 1; }
.site-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--s-5);
height: 100%;
} .brand {
justify-self: start;
display: inline-flex;
align-items: center;
gap: .7rem;
min-height: 44px;
color: inherit;
text-decoration: none;
border-radius: var(--r-sm);
}
.brand__logo {
width: auto;
height: 40px;
max-width: 76px;
object-fit: contain;
transform-origin: 50% 92%;
transition: transform var(--d-3) var(--ease-out);
}
.brand:hover .brand__logo { transform: rotate(-5deg) scale(1.05); } .brand__word {
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: 430;
line-height: 1;
letter-spacing: -.02em;
font-variation-settings: "opsz" 36;
} .primary-nav { justify-self: center; }
.primary-nav__list {
display: flex;
align-items: center;
gap: clamp(1.5rem, 3vw, 3rem);
margin: 0;
padding: 0;
list-style: none;
}
.primary-nav__list a {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: .2rem;
color: var(--on-moss-soft);
font-size: .9375rem;
font-weight: 600;
letter-spacing: .015em;
text-decoration: none;
transition: color var(--d-2) var(--ease-out);
} .primary-nav__list a::after {
content: "";
position: absolute;
left: 50%;
bottom: 2px;
width: 7px;
height: 7px;
margin-left: -3.5px;
border-radius: 0 50% 50% 50%;
background: radial-gradient(circle at 62% 62%, var(--gold-200), var(--gold-500) 55%, var(--gold-600));
opacity: 0;
transform: translateY(-14px) rotate(45deg) scale(.45);
transition: transform 560ms var(--ease-drop), opacity var(--d-1) var(--ease-out);
}
.primary-nav__list a:hover,
.primary-nav__list a:focus-visible { color: var(--on-moss); }
.primary-nav__list a:hover::after { opacity: .6; transform: translateY(0) rotate(45deg) scale(.72); }
.primary-nav__list .current-menu-item > a,
.primary-nav__list .is-current > a { color: var(--on-moss); }
.primary-nav__list .current-menu-item > a::after,
.primary-nav__list .is-current > a::after { opacity: 1; transform: translateY(0) rotate(45deg) scale(1); } .shell-actions {
justify-self: end;
display: flex;
align-items: center;
gap: .125rem;
margin-right: -.6rem;
}
.shell-icon {
position: relative;
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.shell-icon:hover { background-color: color-mix(in oklab, var(--lichen-50) 10%, transparent); }
.shell-icon:active { transform: scale(.93); }
.shell-icon .icon { width: 22px; height: 22px; } .shell-cart .icon--bag {
transform-origin: 50% 90%;
transition: transform var(--d-3) var(--ease-out);
}
.shell-cart:hover .icon--bag { transform: rotate(-7deg); }
.shell-cart__drop {
position: absolute;
top: 5px;
left: 50%;
width: 8px;
height: 8px;
margin-left: -4px;
border-radius: 0 50% 50% 50%;
background: radial-gradient(circle at 62% 62%, var(--gold-200), var(--gold-500) 60%);
opacity: 0;
transform: translateY(-16px) rotate(45deg) scale(.5);
pointer-events: none;
}
.shell-cart.is-dropping .shell-cart__drop { animation: shell-drop-fall 760ms var(--ease-drop) both; }
.shell-cart.is-dropping .icon--bag { animation: shell-bag-catch 560ms var(--ease-out) 480ms both; }
.shell-cart.is-dropping .ormus-cart-count { animation: shell-badge-pop 560ms var(--ease-out) 520ms both; }
@keyframes shell-drop-fall {
0% { opacity: 0; transform: translateY(-18px) rotate(45deg) scale(.45); }
22% { opacity: 1; }
78% { opacity: 1; transform: translateY(9px) rotate(45deg) scale(.95); }
100% { opacity: 0; transform: translateY(13px) rotate(45deg) scale(.35); }
}
@keyframes shell-bag-catch {
0% { transform: none; }
35% { transform: translateY(1.5px) scale(1.06, .9); }
100% { transform: none; }
}
@keyframes shell-badge-pop {
0% { transform: scale(1); }
40% { transform: scale(1.38); }
100% { transform: scale(1); }
} .ormus-cart-count {
position: absolute;
top: 3px;
right: 0;
display: grid;
place-items: center;
min-width: 19px;
height: 19px;
padding: 0 5px;
border-radius: var(--r-pill);
background: var(--gold-500);
color: var(--moss-950);
font-size: .6875rem;
font-weight: 750;
line-height: 1;
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 2px var(--moss-900);
pointer-events: none;
transition: transform var(--d-2) var(--ease-out), opacity var(--d-2) var(--ease-out);
}
.has-hero .site-header:not(.is-scrolled) .ormus-cart-count { box-shadow: 0 2px 8px -2px var(--shell-scrim); } .ormus-cart-count[data-cart-count="0"] { opacity: 0 !important; transform: scale(.3); } .shell-burger { display: none; }
.shell-burger__bars {
position: relative;
display: block;
width: 22px;
height: 11px;
}
.shell-burger__bars span {
position: absolute;
left: 0;
width: 22px;
height: 1.6px;
border-radius: 2px;
background: currentColor;
transform-origin: 0 50%;
transition: transform var(--d-3) var(--ease-out);
}
.shell-burger__bars span:first-child { top: 0; }
.shell-burger__bars span:last-child { bottom: 0; transform: scaleX(.59); }
.shell-burger:hover .shell-burger__bars span:last-child { transform: none; }
@media (max-width: 1023px) {
.site-header__inner { grid-template-columns: 1fr auto; gap: var(--s-3); }
.primary-nav { display: none; }
.shell-burger { display: inline-grid; }
.no-js .shell-burger { display: none; }
}
@media (max-width: 479px) {
.brand { gap: .55rem; }
.brand__logo { height: 34px; max-width: 60px; }
.brand__word { font-size: 1.25rem; }
} .mobile-menu {
--ox: calc(100% - 2.5rem);
--oy: 2.5rem;
position: fixed;
inset: 0;
z-index: var(--z-menu);
background: var(--moss-950);
color: var(--on-moss);
clip-path: circle(0px at var(--ox) var(--oy));
transition: clip-path 620ms var(--ease-in-out);
}
.mobile-menu.is-open {
clip-path: circle(150vmax at var(--ox) var(--oy));
transition: clip-path 1000ms var(--ease-out);
}
@media (min-width: 1024px) {
.mobile-menu { display: none !important; }
}
.mobile-menu__photo {
position: absolute;
inset: auto 0 0;
height: 58%;
pointer-events: none;
opacity: .42;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 72%);
mask-image: linear-gradient(to bottom, transparent, black 72%);
}
.mobile-menu__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 70%;
opacity: 0;
transform: scale(1.12);
transition: transform 1800ms var(--ease-out), opacity 1200ms var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__img.is-loaded,
.mobile-menu.is-open .mobile-menu__img[data-loaded] { opacity: 1; transform: none; }
.mobile-menu__scroll {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
padding-top: var(--menu-top, 0px);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.mobile-menu__bar {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-h);
}
.mobile-menu__close { margin-right: -.6rem; }
.mobile-menu__close .icon { transition: transform var(--d-3) var(--ease-out); }
.mobile-menu.is-open .mobile-menu__close .icon { transform: rotate(90deg); }
.mobile-menu__body {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
gap: var(--s-6);
padding-top: clamp(1rem, 4vh, 2.5rem);
padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
}
.mobile-menu__list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line-on-moss);
}
.mobile-menu__list li {
border-bottom: 1px solid var(--line-on-moss);
opacity: 0;
transform: translate3d(0, 28px, 0);
transition: opacity 500ms var(--ease-out), transform 900ms var(--ease-out);
transition-delay: calc(var(--i, 0) * 70ms + 200ms);
}
.mobile-menu.is-open .mobile-menu__list li { opacity: 1; transform: none; }
.mobile-menu__list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 4.25rem;
padding-block: .45rem;
color: var(--on-moss);
font-family: var(--font-display);
font-size: clamp(2.25rem, 1.5rem + 4.4vw, 3.5rem);
font-weight: 360;
line-height: 1.04;
letter-spacing: -.03em;
text-decoration: none;
font-variation-settings: "opsz" 72;
}
.mobile-menu__arrow {
width: 1.6rem;
height: 1.6rem;
color: var(--on-moss-soft);
transition: transform var(--d-3) var(--ease-out), color var(--d-2);
}
.mobile-menu__list a:hover .mobile-menu__arrow,
.mobile-menu__list a:focus-visible .mobile-menu__arrow { color: var(--gold-400); transform: translate(3px, -3px); }
.mobile-menu__list .current-menu-item > a,
.mobile-menu__list .is-current > a { font-style: italic; }
.mobile-menu__list .current-menu-item > a::before,
.mobile-menu__list .is-current > a::before {
content: "";
order: 2;
width: 10px;
height: 10px;
margin-left: auto;
border-radius: 0 50% 50% 50%;
background: radial-gradient(circle at 62% 62%, var(--gold-200), var(--gold-500) 55%, var(--gold-600));
transform: rotate(45deg);
}
.mobile-menu__list .current-menu-item .mobile-menu__arrow,
.mobile-menu__list .is-current .mobile-menu__arrow { order: 3; margin-left: .25rem; } .mobile-menu__late {
opacity: 0;
transform: translate3d(0, 18px, 0);
transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out);
transition-delay: calc(var(--late, 0) * 70ms + 420ms);
}
.mobile-menu.is-open .mobile-menu__late { opacity: 1; transform: none; } .menu-product {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--s-4);
padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
border: 1px solid var(--line-on-moss);
border-radius: var(--r-lg);
background: color-mix(in oklab, var(--moss-850) 80%, transparent);
color: var(--on-moss);
text-decoration: none;
transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.menu-product:hover { background: var(--moss-800); border-color: color-mix(in oklab, var(--gold-400) 40%, transparent); }
.menu-product__bottle {
display: grid;
place-items: center;
width: 3.75rem;
height: 5rem;
border-radius: var(--r-md);
background: radial-gradient(closest-side, color-mix(in oklab, var(--gold-400) 38%, transparent), transparent);
}
.menu-product__img { width: auto; height: 4.5rem; filter: drop-shadow(0 6px 8px color-mix(in oklab, var(--moss-950) 70%, transparent)); }
.menu-product__text { display: grid; gap: .1rem; min-width: 0; }
.menu-product__name {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 430;
line-height: 1.2;
letter-spacing: -.01em;
}
.menu-product__price { font-weight: 650; font-size: var(--fs-small); color: var(--on-moss); }
.menu-product__note { font-size: var(--fs-micro); color: var(--on-moss-soft); }
.menu-product__go {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--gold-500);
color: var(--moss-950);
transition: transform var(--d-2) var(--ease-out);
}
.menu-product:hover .menu-product__go { transform: translateX(3px); }
.mobile-menu__meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-3);
margin: 0;
padding: 0;
list-style: none;
--late: 1;
}
.mobile-menu__meta a {
position: relative;
display: flex;
align-items: center;
gap: .6rem;
min-height: 3.25rem;
padding: 0 1.1rem;
border: 1px solid var(--line-on-moss);
border-radius: var(--r-pill);
color: var(--on-moss);
font-size: var(--fs-small);
font-weight: 600;
text-decoration: none;
transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.mobile-menu__meta a:hover { background: color-mix(in oklab, var(--lichen-50) 7%, transparent); border-color: color-mix(in oklab, var(--lichen-50) 40%, transparent); }
.mobile-menu__meta .icon { width: 1.2rem; height: 1.2rem; color: var(--on-moss-soft); }
.mobile-menu__meta .ormus-cart-count { position: static; margin-left: auto; box-shadow: none; }
.mobile-menu__contact {
--late: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
}
.mobile-menu__mail {
display: inline-flex;
align-items: center;
gap: .55rem;
min-height: 44px;
color: var(--on-moss-soft);
font-size: var(--fs-small);
text-decoration: none;
}
.mobile-menu__mail:hover { color: var(--on-moss); }
.mobile-menu__mail .icon { width: 1.15rem; height: 1.15rem; } .social-links {
display: flex;
gap: .25rem;
margin: 0;
padding: 0;
list-style: none;
}
.social-links__link { color: var(--on-moss-soft); border: 1px solid var(--line-on-moss); }
.social-links__link:hover { color: var(--on-moss); } .ormus-drawer {
position: fixed;
inset: 0;
z-index: var(--z-drawer);
}
.ormus-drawer__overlay {
position: absolute;
inset: 0;
background: color-mix(in oklab, var(--moss-950) 52%, transparent);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
cursor: pointer;
transition: opacity var(--d-3) var(--ease-out);
}
.ormus-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
width: min(440px, 100vw);
background: var(--lichen-50);
color: var(--ink);
box-shadow: var(--shadow-3);
outline: none;
overflow: hidden;
touch-action: pan-y;
transform: translate3d(100%, 0, 0);
transition: transform 640ms var(--ease-out);
} .admin-bar .ormus-drawer__panel { top: var(--drawer-top, var(--admin-offset)); }
@media (min-width: 480px) {
.ormus-drawer__panel { border-radius: var(--r-lg) 0 0 var(--r-lg); }
}
.ormus-drawer.is-open .ormus-drawer__overlay { opacity: 1; }
.ormus-drawer.is-open .ormus-drawer__panel { transform: translate3d(var(--drag, 0px), 0, 0); }
.ormus-drawer.is-dragging .ormus-drawer__panel { transition: none; } .ormus-drawer__head {
position: relative;
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
min-height: 4.5rem;
padding: var(--s-2) var(--s-3) var(--s-2) var(--s-5);
background:
radial-gradient(120% 160% at 100% 0%, color-mix(in oklab, var(--gold-500) 16%, transparent), transparent 55%),
var(--moss-900);
color: var(--on-moss);
}
.ormus-drawer__title {
display: flex;
align-items: center;
gap: .6rem;
margin: 0;
font-size: 1.5rem;
font-weight: 420;
letter-spacing: -.02em;
}
.ormus-drawer__count {
display: inline-grid;
place-items: center;
min-width: 1.75rem;
height: 1.75rem;
padding: 0 .5rem;
border: 1px solid var(--line-on-moss);
border-radius: var(--r-pill);
font-family: var(--font-ui);
font-size: .8125rem;
font-weight: 700;
letter-spacing: 0;
color: var(--on-moss);
font-variant-numeric: tabular-nums;
}
.ormus-drawer__count[data-cart-count="0"] { display: none; }
.ormus-drawer__close .icon { transition: transform var(--d-3) var(--ease-out); }
.ormus-drawer__close:hover .icon { transform: rotate(90deg); } .ormus-drawer__content {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
} .ship-progress {
flex: none;
padding: var(--s-4) var(--s-5) 1.15rem;
background: var(--lichen-100);
border-bottom: 1px solid var(--line);
transition: --progress 1100ms var(--ease-out);
}
.ship-progress__text {
display: flex;
align-items: center;
gap: .55rem;
margin: 0 0 .8rem;
font-size: var(--fs-small);
line-height: 1.35;
color: var(--ink-soft);
}
.ship-progress__text strong { color: var(--ink); font-weight: 700; white-space: nowrap; }
.ship-progress__icon { flex: none; width: 1.2rem; height: 1.2rem; color: var(--moss-700); }
.ship-progress__track {
position: relative;
height: 6px;
border-radius: var(--r-pill);
background: var(--lichen-300);
}
.ship-progress__fill {
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--progress) * 100%);
border-radius: inherit;
background: linear-gradient(90deg, var(--gold-600), var(--gold-500) 60%, var(--gold-400));
}
.ship-progress__drop { position: absolute;
top: 50%;
right: 0;
width: 15px;
height: 15px;
border-radius: 0 50% 50% 50%;
background: radial-gradient(circle at 62% 62%, var(--gold-200), var(--gold-500) 52%, var(--gold-600));
box-shadow: 0 3px 8px -2px color-mix(in oklab, var(--gold-700) 70%, transparent);
transform: translate(50%, -62%) rotate(45deg);
}
.ship-progress__drop::after { content: "";
position: absolute;
top: 44%;
left: 44%;
width: 4px;
height: 3px;
border-radius: 50%;
background: var(--lichen-50);
opacity: .85;
}
.ship-progress.is-free .ship-progress__text { color: var(--success-700); font-weight: 650; }
.ship-progress.is-free .ship-progress__icon { color: var(--success-700); }
.ship-progress.is-free .ship-progress__track { overflow: visible; }
.ship-progress.is-free .ship-progress__fill { background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }
.ship-progress.is-free .ship-progress__fill::after { content: "";
position: absolute;
inset: -3px 0;
border-radius: inherit;
background: linear-gradient(100deg, transparent 35%, color-mix(in oklab, var(--gold-200) 90%, transparent) 50%, transparent 65%);
background-size: 260% 100%;
animation: ship-glint 2.4s var(--ease-out) .5s 1 both;
}
@keyframes ship-glint {
from { background-position: 100% 0; }
to { background-position: -60% 0; }
} .ormus-drawer__scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--lichen-400) transparent;
padding-bottom: var(--s-4);
}
.ormus-lines {
margin: 0;
padding: var(--s-2) var(--s-5) 0;
list-style: none;
}
.ormus-line {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: 5.5rem minmax(0, 1fr);
gap: var(--s-4);
padding-block: var(--s-4);
border-bottom: 1px solid var(--line);
}
.ormus-line:last-child { border-bottom-color: transparent; }
.ormus-line__media {
display: block;
align-self: start;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--r-md);
background: var(--lichen-200);
}
.ormus-line__media img {
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
transition: transform var(--d-3) var(--ease-out);
}
a.ormus-line__media:hover img { transform: scale(1.05); }
.ormus-line__body { display: flex; flex-direction: column; min-width: 0; }
.ormus-line__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-2);
}
.ormus-line__name {
padding-top: .1rem;
color: var(--ink);
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 450;
line-height: 1.25;
letter-spacing: -.01em;
text-decoration: none;
text-wrap: pretty;
}
a.ormus-line__name:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.ormus-line__remove {
flex: none;
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin: -.6rem -.75rem 0 0;
border-radius: 50%;
color: var(--ink-soft);
transition: color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.ormus-line__remove .icon { width: 1.15rem; height: 1.15rem; }
.ormus-line__remove:hover { color: var(--error-600); background: color-mix(in oklab, var(--error-600) 9%, transparent); }
.ormus-line__meta,
.ormus-line__unit {
margin: .2rem 0 0;
font-size: var(--fs-micro);
color: var(--ink-soft);
}
.ormus-line__unit { font-variant-numeric: tabular-nums; text-wrap: pretty; }
.ormus-line__unit-label { opacity: .8; }
.ormus-line__per { margin-inline: .35em; }
.ormus-line__each { white-space: nowrap; }
.ormus-line__foot {
display: flex;
flex-wrap: wrap; align-items: center;
justify-content: space-between;
gap: var(--s-2) var(--s-3);
margin-top: auto;
padding-top: var(--s-3);
}
.ormus-line__stepper.qty-stepper { height: 2.75rem; background: var(--lichen-50); }
.ormus-line__stepper button { width: 2.75rem; }
.ormus-line__stepper button .icon { width: 1rem; height: 1rem; }
.ormus-line__stepper button:disabled { opacity: .35; cursor: default; background: none; }
.ormus-line__stepper input { width: 2.25rem; font-size: .9375rem; }
.ormus-line__single { font-size: var(--fs-small); color: var(--ink-soft); }
.ormus-line__total {
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
transition: opacity var(--d-2) var(--ease-out);
} .ormus-line.is-busy .ormus-line__total { opacity: .35; }
.ormus-line.is-busy::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
background-size: 40% 100%;
background-repeat: no-repeat;
animation: line-busy 900ms var(--ease-in-out) infinite;
}
@keyframes line-busy {
from { background-position: -40% 0; }
to { background-position: 140% 0; }
} .ormus-line.is-removing {
opacity: 0;
transform: translate3d(24px, 0, 0);
padding-block: 0;
border-bottom-color: transparent;
overflow: hidden;
transition:
opacity 220ms var(--ease-out),
transform 360ms var(--ease-out),
height 360ms var(--ease-out) 80ms,
padding 360ms var(--ease-out) 80ms;
} .ormus-line.is-glint::before {
content: "";
position: absolute;
inset: 6px -12px;
z-index: -1;
border-radius: var(--r-md);
background:
linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--gold-300) 80%, transparent) 50%, transparent 70%) 110% 0 / 260% 100% no-repeat,
color-mix(in oklab, var(--gold-200) 62%, transparent);
animation: line-glint 1.9s var(--ease-out) .1s both;
pointer-events: none;
}
@keyframes line-glint {
0% { background-position: 110% 0, 0 0; opacity: 1; }
55% { background-position: -70% 0, 0 0; opacity: .95; }
100% { background-position: -70% 0, 0 0; opacity: 0; }
} .ormus-drawer.is-opening .ormus-line,
.ormus-drawer.is-opening .ship-progress,
.ormus-drawer.is-opening .ormus-drawer__empty > * {
animation: line-in 760ms var(--ease-out) both;
animation-delay: calc(var(--i, 0) * 70ms + 160ms);
}
.ormus-drawer.is-opening .ship-progress { animation-delay: 100ms; }
.ormus-drawer.is-opening .ormus-line.is-glint::before { animation-delay: .6s; }
@keyframes line-in {
from { opacity: 0; transform: translate3d(28px, 0, 0); }
to { opacity: 1; transform: none; }
} .ormus-upsell {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--s-3);
margin: var(--s-2) var(--s-5) 0;
padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
border: 1px solid color-mix(in oklab, var(--gold-600) 35%, transparent);
border-radius: var(--r-md);
background:
radial-gradient(90% 140% at 0% 0%, color-mix(in oklab, var(--gold-300) 26%, transparent), transparent 60%),
var(--lichen-100);
}
.ormus-upsell__icon {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: var(--moss-900);
color: var(--gold-300);
}
.ormus-upsell__icon .icon { width: 1.1rem; height: 1.1rem; }
.ormus-upsell__icon .icon--set { width: 1.3rem; height: 1.3rem; }
.ormus-upsell__title { margin: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 450; line-height: 1.25; }
.ormus-upsell__detail { margin: .15rem 0 0; font-size: var(--fs-micro); line-height: 1.45; color: var(--ink-soft); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.ormus-upsell__detail strong { color: var(--ink); font-weight: 650; }
.ormus-upsell__price { white-space: nowrap; }
.ormus-upsell__btn.btn--sm { min-height: 2.75rem; padding-inline: 1rem; }
.ormus-upsell__btn.is-loading { color: transparent; }
.ormus-drawer.is-opening .ormus-upsell { animation: line-in 760ms var(--ease-out) .42s both; }
@media (max-width: 439px) { .ormus-upsell { grid-template-columns: auto minmax(0, 1fr); align-items: start; row-gap: var(--s-2); }
.ormus-upsell__btn { grid-column: 2; justify-self: start; }
} .ormus-drawer__foot {
flex: none;
padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--line);
background: var(--lichen-50);
}
.ormus-drawer__sum {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-3);
}
.ormus-drawer__sum-label { font-weight: 650; font-size: var(--fs-small); }
.ormus-drawer__sum-value {
font-family: var(--font-display);
font-size: 1.625rem;
font-weight: 450;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.ormus-drawer__sum-value small,
.ormus-drawer__sum-value .tax_label { font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--ink-soft); letter-spacing: 0; }
.ormus-drawer__sum--discount { margin-top: .15rem; color: var(--success-700); }
.ormus-drawer__sum-small { font-weight: 650; font-variant-numeric: tabular-nums; }
.ormus-drawer__note { margin-top: .1rem; text-align: right; }
.ormus-drawer__note .price-note { display: inline; }
.ormus-drawer__actions {
display: grid;
gap: var(--s-2);
margin-top: var(--s-4);
}
.ormus-drawer__actions .btn--ghost { min-height: 3rem; }
.ormus-drawer__facts {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .35rem var(--s-5);
margin: var(--s-4) 0 0;
padding: 0;
list-style: none;
font-size: var(--fs-micro);
color: var(--ink-soft);
}
.ormus-drawer__facts li { display: inline-flex; align-items: center; gap: .4rem; }
.ormus-drawer__facts .icon { width: 1.05rem; height: 1.05rem; color: var(--moss-600); } @media (max-height: 820px) {
.ship-progress { padding-block: var(--s-3) var(--s-4); }
.ship-progress__text { margin-bottom: .6rem; }
.ormus-lines .ormus-line { padding-block: var(--s-3); }
.ormus-drawer__foot { padding-top: var(--s-3); }
.ormus-drawer__sum-value { font-size: 1.375rem; }
.ormus-drawer__actions { margin-top: var(--s-3); }
.ormus-drawer__actions .btn--lg { min-height: 3.25rem; padding-block: .8rem; }
.ormus-drawer__actions .btn--ghost { min-height: 2.75rem; padding-block: .55rem; }
.ormus-drawer__facts { display: none; }
} .ormus-drawer__empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s-3);
padding: var(--s-7) var(--s-6) calc(var(--s-7) + env(safe-area-inset-bottom, 0px));
text-align: center;
background: radial-gradient(70% 45% at 50% 34%, var(--lichen-100), transparent 70%);
}
.ormus-drawer__empty > * { --i: 0; }
.ormus-drawer__empty > :nth-child(2) { --i: 1; }
.ormus-drawer__empty > :nth-child(3) { --i: 2; }
.ormus-drawer__empty > :nth-child(4) { --i: 3; }
.ormus-drawer__empty > :nth-child(5) { --i: 4; }
.ormus-drawer__empty-title {
margin: var(--s-3) 0 0;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 400;
line-height: 1.15;
letter-spacing: -.02em;
text-wrap: balance;
}
.ormus-drawer__empty-text {
margin: 0 0 var(--s-3);
max-width: 26ch;
font-size: var(--fs-small);
color: var(--ink-soft);
}
.ormus-drawer__empty-price { display: block; margin-top: .15rem; color: var(--ink); font-weight: 650; }
.ormus-drawer__empty-note { margin-top: -.25rem; }
.dew-scene { width: 220px; height: auto; overflow: visible; }
.dew-scene__s0 { stop-color: var(--gold-200); }
.dew-scene__s1 { stop-color: var(--gold-400); }
.dew-scene__s2 { stop-color: var(--gold-600); }
.dew-scene__s3 { stop-color: var(--gold-700); }
.dew-scene__c0 { stop-color: var(--gold-200); stop-opacity: .95; }
.dew-scene__c1 { stop-color: var(--gold-200); stop-opacity: 0; }
.dew-scene__halo { fill: var(--gold-200); opacity: .35; }
.dew-scene__mound-back { fill: var(--moss-500); }
.dew-scene__mound { fill: var(--moss-700); }
.dew-scene__tufts { fill: none; stroke: var(--moss-300); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.dew-scene__stalk { fill: none; stroke: var(--moss-600); stroke-width: 1.8; stroke-linecap: round; }
.dew-scene__capsule { fill: var(--gold-600); }
.dew-scene__shadow { fill: var(--moss-950); opacity: .28; }
.dew-scene__spec { fill: var(--lichen-50); opacity: .92; }
.dew-scene__spec2 { fill: var(--lichen-50); opacity: .8; }
.dew-scene__fall,
.dew-scene__bead { fill: var(--gold-400); }
.dew-scene__fall { opacity: 0; }
.dew-scene__drop {
transform-box: fill-box;
transform-origin: 50% 100%;
animation: dew-breathe 4.8s var(--ease-in-out) infinite;
}
.dew-scene__fall { animation: dew-fall 4.8s var(--ease-drop) 1.2s infinite; }
@keyframes dew-breathe {
0%, 100% { transform: scale(1, 1); }
50% { transform: scale(1.025, .975); }
}
@keyframes dew-fall {
0%, 8% { opacity: 0; transform: translateY(0) scale(.6); }
14% { opacity: 1; transform: translateY(0) scale(1); }
34% { opacity: 1; transform: translateY(44px) scale(1, 1.1); }
38%, 100% { opacity: 0; transform: translateY(48px) scale(1.4, .4); }
} .ormus-toast {
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-out), visibility 0s linear var(--d-3);
}
.ormus-toast.is-visible {
pointer-events: auto;
visibility: visible;
opacity: 1;
transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-out), visibility 0s;
}
.ormus-toast__inner {
display: flex;
align-items: center;
gap: .7rem;
min-height: 3.25rem;
padding: .4rem .45rem .4rem 1rem;
border-radius: var(--r-pill);
background: var(--moss-950);
color: var(--on-moss);
font-size: var(--fs-small);
line-height: 1.35;
box-shadow: var(--shadow-2);
}
.ormus-toast__icon { flex: none; display: grid; color: var(--moss-300); }
.ormus-toast__icon .icon { width: 1.2rem; height: 1.2rem; }
.ormus-toast__icon .icon--info,
.ormus-toast.is-error .ormus-toast__icon .icon--check { display: none; }
.ormus-toast.is-error .ormus-toast__icon .icon--info { display: block; }
.ormus-toast__msg { flex: 1; padding-right: .6rem; }
.ormus-toast__action {
flex: none;
min-height: 44px;
padding: 0 1.1rem;
border: 0;
border-radius: var(--r-pill);
background: color-mix(in oklab, var(--lichen-50) 10%, transparent);
color: var(--gold-300);
font-weight: 700;
font-size: var(--fs-small);
transition: background-color var(--d-2) var(--ease-out);
}
.ormus-toast__action:hover { background: color-mix(in oklab, var(--lichen-50) 18%, transparent); }
.ormus-toast.is-error .ormus-toast__icon { color: var(--gold-300); }
.ormus-toast.is-error .ormus-toast__inner { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold-400) 45%, transparent), var(--shadow-2); }
.ormus-toast--global {
position: fixed;
left: 50%;
bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
z-index: var(--z-toast);
width: max-content;
max-width: calc(100vw - 2 * var(--gutter));
transform: translate3d(-50%, 140%, 0);
}
.ormus-toast--global.is-visible { transform: translate3d(-50%, 0, 0); } .ormus-toast--drawer {
flex: none;
display: grid;
grid-template-rows: 0fr;
padding-inline: var(--s-3);
transition:
grid-template-rows var(--d-3) var(--ease-out),
opacity var(--d-2) var(--ease-out),
padding var(--d-3) var(--ease-out),
visibility 0s linear var(--d-3);
}
.ormus-toast--drawer.is-visible {
grid-template-rows: 1fr;
padding-block: var(--s-3) 0;
transition: grid-template-rows var(--d-3) var(--ease-out), opacity var(--d-2) var(--ease-out), visibility 0s;
}
.ormus-toast--drawer .ormus-toast__inner { min-height: 0; overflow: hidden; border-radius: var(--r-md); box-shadow: none; }
.ormus-toast--drawer.is-visible .ormus-toast__inner { min-height: 3.25rem; } .site-footer {
position: relative;
overflow: hidden;
padding-top: clamp(4rem, 2.5rem + 6vw, 7.5rem);
background: var(--moss-950);
color: var(--on-moss);
}
.footer-top {
display: grid;
gap: var(--s-6) var(--s-8);
align-items: end;
padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
border-bottom: 1px solid var(--line-on-moss);
}
@media (min-width: 900px) {
.footer-top { grid-template-columns: minmax(0, 1fr) auto; }
}
.footer-top__brand {
display: flex;
align-items: flex-start;
gap: clamp(1rem, .5rem + 2vw, 2rem);
}
.footer-top__tree {
flex: none;
width: clamp(56px, 40px + 3vw, 84px);
height: auto;
margin-top: .2rem;
}
.footer-top__line {
margin: 0;
max-width: 24ch;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 370;
line-height: 1.22;
letter-spacing: -.02em;
text-wrap: balance;
}
.footer-top__line em { font-style: italic; color: var(--gold-300); font-weight: inherit; }
.footer-top__cta { display: grid; justify-items: start; gap: .7rem; }
@media (min-width: 900px) {
.footer-top__cta { justify-items: end; text-align: right; }
}
.footer-top__price { margin: 0; font-size: var(--fs-small); color: var(--on-moss-soft); }
.footer-top__from { color: var(--on-moss); font-weight: 650; margin-right: .35em; }
.footer-top__price .price-note { display: inline; color: var(--on-moss-soft); }
.footer-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-7) var(--s-5);
padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.footer-col--contact { grid-column: 1 / -1; }
@media (min-width: 900px) {
.footer-grid { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); }
.footer-col--contact { grid-column: auto; padding-right: var(--s-6); }
}
.footer-col__title {
margin: 0 0 var(--s-4);
font-family: var(--font-ui);
font-size: var(--fs-micro);
font-weight: 650;
letter-spacing: .1em;
line-height: 1.3;
text-transform: uppercase;
color: var(--on-moss-soft);
font-variation-settings: normal;
}
.footer-col__text { max-width: 30ch; margin-bottom: var(--s-3); font-size: var(--fs-small); color: var(--on-moss-soft); }
.footer-links {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.footer-links a,
.footer-mail {
display: inline-flex;
align-items: center;
min-height: 2.25rem;
color: var(--on-moss);
font-size: var(--fs-small);
text-decoration: none;
background: linear-gradient(currentColor, currentColor) 0 calc(100% - .45rem) / 0 1px no-repeat;
transition: background-size var(--d-3) var(--ease-out), color var(--d-2);
}
.footer-links a:hover,
.footer-links a:focus-visible,
.footer-mail:hover { background-size: 100% 1px; }
.footer-links .current-menu-item > a { color: var(--moss-200); }
.footer-mail { gap: .55rem; }
.footer-mail .icon { width: 1.15rem; height: 1.15rem; color: var(--gold-400); }
.footer-social { margin-top: var(--s-3); }
@media (pointer: coarse) {
.footer-links a,
.footer-mail { min-height: 2.75rem; }
}
.footer-pay {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3) var(--s-4);
padding-block: var(--s-5);
border-top: 1px solid var(--line-on-moss);
}
.footer-pay__label {
display: inline-flex;
align-items: center;
gap: .45rem;
margin: 0;
font-size: var(--fs-micro);
font-weight: 650;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--on-moss-soft);
}
.footer-pay__label .icon { width: 1rem; height: 1rem; }
.pay-pills {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 0;
padding: 0;
list-style: none;
}
.pay-pill {
padding: .35rem .9rem;
border: 1px solid var(--line-on-moss);
border-radius: var(--r-pill);
background: color-mix(in oklab, var(--lichen-50) 4%, transparent);
font-size: var(--fs-micro);
font-weight: 600;
color: var(--on-moss);
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem var(--s-5);
padding-block: var(--s-4);
border-top: 1px solid var(--line-on-moss);
font-size: var(--fs-micro);
color: var(--on-moss-soft);
}
.footer-bottom__item { margin: 0; }
.footer-bottom__notice { max-width: 62ch; text-wrap: pretty; }
.footer-bottom__item a { color: inherit; text-underline-offset: .2em; }
.footer-bottom__item a:hover { color: var(--on-moss); }
.footer-bottom__credit { margin-left: auto; }
@media (max-width: 599px) {
.footer-bottom { flex-direction: column; align-items: flex-start; }
.footer-bottom__credit { margin-left: 0; }
} .footer-mark {
position: relative;
display: flex;
justify-content: center;
height: .8em; margin-top: 0;
overflow: hidden;
font-family: var(--font-display);
font-size: clamp(4.25rem, 17.4vw, 20rem);
font-weight: 400;
line-height: 1;
letter-spacing: -.045em;
white-space: nowrap;
color: var(--moss-850);
-webkit-user-select: none;
user-select: none;
font-variation-settings: "opsz" 72;
}
.footer-mark::before { background: radial-gradient(38vw circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--gold-400) 16%, transparent), transparent 60%);
}
.footer-mark__word { display: block; padding-inline: .02em; }
.footer-mark__char { display: inline-block; }
.js .footer-mark .footer-mark__char {
transform: translate3d(0, 72%, 0);
transition: transform 1500ms var(--ease-out);
transition-delay: calc(var(--i, 0) * 65ms);
}
.js .footer-mark.is-in .footer-mark__char { transform: none; } .ormus-store-notice.woocommerce-store-notice {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: calc(var(--z-header) + 2);
margin: 0;
padding: .8rem var(--gutter);
background: var(--moss-950);
color: var(--on-moss);
font-size: var(--fs-small);
text-align: center;
box-shadow: var(--shadow-2);
}
.ormus-store-notice .woocommerce-store-notice__dismiss-link {
margin-left: .75rem;
color: var(--gold-300);
font-weight: 650;
} @media (prefers-reduced-motion: reduce) {
.mobile-menu,
.mobile-menu.is-open { clip-path: none; }
.mobile-menu__list li,
.mobile-menu__late,
.mobile-menu__img,
.js .footer-mark .footer-mark__char { opacity: 1; transform: none; }
.dew-scene__drop,
.dew-scene__fall,
.ormus-line.is-busy::after { animation: none; }
.ormus-drawer__panel { transition: none; }
}:root { --moss-edge-h: clamp(40px, 1.75rem + 2.5vw, 64px);
}
.c-main {
--measure: 41rem; --wide: 68rem;
--aside: 15rem;
--aside-gap: clamp(3rem, 1rem + 4vw, 5rem);
--drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13.2'%3E%3Cpath d='M5 0C6.9 2.6 10 5.6 10 8.1A5 5 0 0 1 0 8.1C0 5.6 3.1 2.6 5 0Z'/%3E%3C/svg%3E");
--drop-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13.2'%3E%3Cpath fill='%23b98d2a' d='M5 0C6.9 2.6 10 5.6 10 8.1A5 5 0 0 1 0 8.1C0 5.6 3.1 2.6 5 0Z'/%3E%3C/svg%3E");
display: block;
}
.c-main:focus { outline: none; } .c-band {
--band-top: clamp(2.5rem, 1.25rem + 4.5vw, 6rem);
--band-bottom: calc(clamp(3.75rem, 2rem + 5.5vw, 7.5rem) + var(--moss-edge-h) * .5);
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: var(--band-top) var(--band-bottom);
background:
radial-gradient(56rem 26rem at 6% 120%, rgb(79 122 42 / .26), transparent 70%),
var(--moss-900);
color: var(--on-moss); -webkit-mask:
linear-gradient(#000, #000) left top / 100% calc(100% - var(--moss-edge-h) + 1px) no-repeat,
url(//ormusshop.de/wp-content/themes/ormusshop/assets/img/brand/moss-edge.svg) left bottom / calc(var(--moss-edge-h) * 22.5) var(--moss-edge-h) repeat-x;
mask:
linear-gradient(#000, #000) left top / 100% calc(100% - var(--moss-edge-h) + 1px) no-repeat,
url(//ormusshop.de/wp-content/themes/ormusshop/assets/img/brand/moss-edge.svg) left bottom / calc(var(--moss-edge-h) * 22.5) var(--moss-edge-h) repeat-x;
}
.c-band__inner { position: relative; z-index: 1; }
.c-band__title {
max-width: 16ch;
color: var(--lichen-50);
font-size: var(--fs-h1);
font-weight: 400;
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
}
.c-band__title em {
color: var(--gold-200);
font-style: italic;
}
.c-band__lead { margin-top: var(--s-5); max-width: 34em; }
.c-band__lead p { margin: 0; }
.c-band__lead p + p { margin-top: .6em; }
.c-band .c-band__meta { margin-top: var(--s-5); } .c-band__photo {
position: relative;
z-index: 0;
height: calc(9.5rem + var(--moss-edge-h));
margin: var(--s-7) 0 calc(-1 * var(--band-bottom));
overflow: hidden;
}
.c-band__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 80%;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 calc(100% - var(--moss-edge-h) - .75rem), transparent calc(100% - var(--moss-edge-h) * .8));
mask-image: linear-gradient(180deg, transparent, #000 40%, #000 calc(100% - var(--moss-edge-h) - .75rem), transparent calc(100% - var(--moss-edge-h) * .8));
}
@media (min-width: 48rem) {
.c-band--photo {
display: flex;
align-items: center;
min-height: clamp(20rem, 13rem + 13vw, 28rem);
}
.c-band--photo .c-band__text { max-width: min(36rem, 52%); }
.c-band__photo {
position: absolute;
inset: 0 0 0 auto;
width: min(50%, 48rem);
height: auto;
margin: 0;
-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--moss-edge-h) - 3rem), transparent calc(100% - var(--moss-edge-h) * .8));
mask-image: linear-gradient(180deg, #000 calc(100% - var(--moss-edge-h) - 3rem), transparent calc(100% - var(--moss-edge-h) * .8));
}
.c-band__photo img { inset: -3rem 0;
height: calc(100% + 6rem);
object-position: 64% 52%;
-webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 62%);
mask-image: linear-gradient(90deg, transparent 2%, #000 62%);
}
} .c-frame {
width: min(100% - 2 * var(--gutter), var(--measure));
margin-inline: auto;
}
@media (min-width: 75rem) {
.c-frame--aside {
display: grid;
grid-template-columns: var(--aside) minmax(0, 1fr);
column-gap: var(--aside-gap);
width: min(100% - 2 * var(--gutter), var(--measure) + var(--aside) + var(--aside-gap));
}
.c-frame--aside > .c-band__text,
.c-frame--aside > .c-frame__main { grid-column: 2; }
}
.c-band--page .c-band__title {
max-width: 20ch;
font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
} .c-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .3rem .7rem;
margin: 0;
color: var(--ink-soft);
font-size: var(--fs-small);
line-height: 1.4;
font-variant-numeric: tabular-nums;
}
.c-meta__sep {
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
opacity: .55;
}
.c-meta__cat {
color: var(--moss-700);
font-weight: 650;
text-decoration: none;
}
a.c-meta__cat:hover { text-decoration: underline; }
.on-moss .c-meta { color: var(--on-moss-soft); }
.on-moss .c-meta__cat { color: var(--moss-300); } .c-section { padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--section-y); } .c-feature {
position: relative;
display: grid;
gap: var(--s-6);
}
.c-feature__media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: var(--r-xl);
background: var(--moss-800);
box-shadow: var(--shadow-2);
}
.c-feature__media img,
.c-row__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease-out), filter var(--d-3) var(--ease-out);
}
.c-feature__title {
font-size: var(--fs-h2);
font-weight: 400;
}
.c-feature__title a,
.c-row__title a,
.c-result__title a {
color: inherit;
text-decoration: none;
background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
transition: background-size var(--d-3) var(--ease-out);
}
.c-feature__title a::after,
.c-row__title a::after,
.c-result__title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: var(--r-lg);
}
.c-feature__title a:focus-visible,
.c-row__title a:focus-visible,
.c-result__title a:focus-visible { outline: none; }
.c-feature__title a:focus-visible::after,
.c-row__title a:focus-visible::after,
.c-result__title a:focus-visible::after {
outline: 2px solid var(--focus);
outline-offset: 6px;
}
.c-feature:hover .c-feature__title a,
.c-row:hover .c-row__title a,
.c-result:hover .c-result__title a,
.c-feature__title a:focus-visible,
.c-row__title a:focus-visible,
.c-result__title a:focus-visible { background-size: 100% 1px; }
.c-feature:hover .c-feature__media img,
.c-row:hover .c-row__media img { transform: scale(1.045); }
.c-feature__excerpt {
margin-top: var(--s-4);
max-width: 34em;
color: var(--ink-soft);
font-size: var(--fs-lead);
line-height: 1.55;
}
.c-feature .c-meta { margin-top: var(--s-5); }
.c-feature__more { margin-top: var(--s-6); color: var(--moss-800); }
.c-feature:hover .c-feature__more { background-size: 100% 1px; }
.c-feature:hover .c-feature__more .icon { transform: translateX(4px); }
@media (min-width: 56rem) {
.c-feature {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: clamp(2.5rem, 5vw, 5.5rem);
align-items: center;
}
.c-feature__media { aspect-ratio: 5 / 4; }
} .c-list { margin-top: clamp(4rem, 3rem + 4vw, 7.5rem); }
.c-list--flush { margin-top: 0; }
.c-list__title {
padding-bottom: var(--s-5);
font-size: var(--fs-h3);
font-weight: 420;
}
.c-row {
position: relative;
display: grid;
grid-template-areas: "media" "body" "meta";
gap: var(--s-4);
padding-block: var(--s-6);
border-top: 1px solid var(--line);
}
.c-row:last-child { border-bottom: 1px solid var(--line); }
.c-row__body { grid-area: body; min-width: 0; }
.c-row__meta { grid-area: meta; }
.c-row__media {
grid-area: media;
overflow: hidden;
aspect-ratio: 16 / 10;
border-radius: var(--r-lg);
background: var(--moss-800);
}
.c-row__title {
font-size: var(--fs-h3);
font-weight: 420;
line-height: 1.16;
}
.c-row__excerpt {
margin-top: var(--s-3);
max-width: 40em;
color: var(--ink-soft);
}
@media (min-width: 40rem) {
.c-row {
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
grid-template-areas: "media body" "media meta";
grid-template-rows: auto 1fr;
column-gap: var(--s-6);
row-gap: var(--s-4);
align-items: start;
}
.c-row__media { aspect-ratio: 4 / 3; }
}
@media (min-width: 64rem) {
.c-row {
grid-template-columns: 11rem minmax(0, 1fr) 18rem;
grid-template-areas: "meta body media";
grid-template-rows: auto;
column-gap: clamp(2rem, 4vw, 4.5rem);
padding-block: var(--s-7);
}
.c-row__meta {
flex-direction: column;
align-items: flex-start;
gap: .3rem;
padding-top: .45rem;
}
.c-row__meta .c-meta__sep { display: none; }
.c-row__title { padding-top: .1rem; }
} .c-pager { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.c-pager .nav-links,
.c-pagelinks,
.c-comments__nav .nav-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--s-2);
}
.c-pager .page-numbers,
.c-pagelinks__num,
.c-comments__nav a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .35rem;
min-width: 2.75rem;
height: 2.75rem;
padding: 0 .95rem;
border: 1px solid color-mix(in oklab, var(--humus-900) 18%, transparent);
border-radius: var(--r-pill);
color: var(--ink);
font-weight: 650;
font-variant-numeric: tabular-nums;
text-decoration: none;
transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out);
}
.c-pager a.page-numbers:hover,
.c-pagelinks a:hover .c-pagelinks__num,
.c-comments__nav a:hover {
border-color: var(--humus-900);
background: var(--lichen-50);
}
.c-pager .page-numbers.current,
.c-pagelinks .current .c-pagelinks__num {
border-color: var(--moss-900);
background: var(--moss-900);
color: var(--lichen-50);
}
.c-pager .page-numbers.dots {
min-width: 0;
padding: 0 .2rem;
border-color: transparent;
}
.c-pager .prev,
.c-pager .next { padding-inline: .8rem 1.05rem; }
.c-pager .next { padding-inline: 1.05rem .8rem; }
.c-pager .icon { width: 1.1rem; height: 1.1rem; }
.c-pager .page-numbers:focus-visible { outline-offset: 2px; border-radius: var(--r-pill); } @media (max-width: 29.99rem) {
.c-pager .prev,
.c-pager .next { min-width: 2.75rem; padding-inline: 0; }
.c-pager__text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.c-pagelinks { justify-content: flex-start; max-width: var(--measure); margin: var(--s-7) auto 0; }
.c-pagelinks a { text-decoration: none; }
.c-pagelinks__label {
margin-right: var(--s-2);
color: var(--ink-soft);
font-size: var(--fs-small);
font-weight: 650;
} .c-orb {
position: relative;
isolation: isolate;
overflow: hidden;
aspect-ratio: 1;
border-radius: 50%;
background: var(--moss-800);
box-shadow: var(--shadow-2);
}
.c-orb > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 63%;
}
.c-orb::before { content: "";
position: absolute;
z-index: 3;
top: 9%;
left: 19%;
width: 30%;
height: 15%;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(255 255 255 / .8), rgb(255 255 255 / 0));
transform: rotate(-30deg);
pointer-events: none;
}
.c-orb::after { content: "";
position: absolute;
z-index: 2;
inset: 0;
border-radius: inherit;
background:
radial-gradient(36% 14% at 64% 88%, rgb(246 226 166 / .5), transparent 70%),
radial-gradient(closest-side, transparent 66%, rgb(11 26 16 / .48) 100%);
box-shadow:
inset 0 2px 8px rgb(255 255 255 / .35),
inset 0 -24px 48px rgb(11 26 16 / .38),
inset 0 0 0 1px rgb(242 245 232 / .16);
pointer-events: none;
} .c-empty {
display: grid;
justify-items: start;
max-width: 42rem;
padding-block: clamp(.5rem, 2vw, 2rem);
}
.c-empty__orb { width: clamp(6.5rem, 5rem + 6vw, 9rem); margin-bottom: var(--s-6); }
.c-empty__title { font-size: var(--fs-h2); font-weight: 400; }
.c-empty__text {
margin-top: var(--s-4);
max-width: 34em;
color: var(--ink-soft);
font-size: var(--fs-lead);
line-height: 1.55;
}
.c-empty__actions { margin-top: var(--s-6); --cluster: var(--s-3); }
.c-suggest {
width: 100%;
margin: var(--s-6) 0 0;
padding: 0;
border-top: 1px solid var(--line);
list-style: none;
}
.c-suggest__link {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr) auto;
align-items: center;
gap: var(--s-4);
padding: var(--s-4) var(--s-2);
border-bottom: 1px solid var(--line);
color: var(--ink);
text-decoration: none;
transition: background-color var(--d-2) var(--ease-out);
}
.c-suggest__link:hover { background: color-mix(in oklab, var(--lichen-50) 70%, transparent); }
.c-suggest__icon {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--moss-900);
color: var(--gold-300);
}
.c-suggest__title {
display: block;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 450;
line-height: 1.25;
}
.c-suggest__text { display: block; margin-top: .15rem; color: var(--ink-soft); font-size: var(--fs-small); }
.c-suggest__arrow { color: var(--moss-700); transition: transform var(--d-2) var(--ease-out); }
.c-suggest__link:hover .c-suggest__arrow { transform: translateX(4px); } .c-main--single { padding-bottom: var(--section-y); } .c-article {
--article-r: var(--r-lg);
--overlap: max(clamp(3.5rem, 1rem + 9vw, 10rem), calc(var(--moss-edge-h) + var(--article-r) + 1.25rem));
}
@media (min-width: 40rem) {
.c-article { --article-r: var(--r-xl); }
}
.c-band--article {
padding-bottom: calc(var(--band-bottom) + var(--overlap));
text-align: center;
}
.c-article__head {
display: flex;
flex-direction: column;
align-items: center;
width: min(100% - 2 * var(--gutter), 58rem);
margin-inline: auto;
}
.c-article__title {
max-width: 22ch;
margin-top: var(--s-5);
font-size: clamp(2.25rem, 1.35rem + 3.4vw, 4.25rem);
line-height: 1.06;
}
.c-band--article .c-meta {
justify-content: center;
margin-top: var(--s-5);
}
.c-back {
display: inline-flex;
align-items: center;
gap: .3rem;
min-height: 2.75rem;
padding: .45rem 1.05rem .45rem .7rem;
border: 1px solid var(--line-on-moss);
border-radius: var(--r-pill);
color: var(--on-moss-soft);
font-size: var(--fs-small);
font-weight: 650;
text-decoration: none;
transition: color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.c-back .icon { width: 1.1rem; height: 1.1rem; transition: transform var(--d-2) var(--ease-out); }
.c-back:hover {
border-color: rgb(242 245 232 / .5);
background: rgb(242 245 232 / .06);
color: var(--lichen-50);
}
.c-back:hover .icon { transform: translateX(-3px); } .c-article__figure {
position: relative;
z-index: 3;
width: min(100% - 2 * var(--gutter), 76rem);
margin: calc(-1 * var(--overlap)) auto 0;
}
.c-article__media {
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: var(--article-r);
background: var(--moss-800);
box-shadow: var(--shadow-3);
}
.c-article__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-article__caption {
margin-top: var(--s-3);
color: var(--ink-soft);
font-size: var(--fs-small);
text-align: center;
}
@media (min-width: 40rem) {
.c-article__media { aspect-ratio: 16 / 9; }
}
.c-article__body { padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--gutter) 0; }
.c-article__comments { margin-top: clamp(4rem, 3rem + 3vw, 6rem); } .c-progress {
position: fixed;
z-index: 1000;
top: var(--wp-admin--admin-bar--height, 0px);
right: 0;
left: 0;
display: none;
height: 3px;
background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
}
@supports (animation-timeline: scroll()) {
.c-progress {
display: block;
animation: c-progress linear both;
animation-timeline: scroll(root block);
}
}
@keyframes c-progress { to { transform: scaleX(1); } } .c-prose.prose {
max-width: none;
color: var(--ink);
font-size: 1.125rem;
line-height: 1.72;
overflow-wrap: break-word; }
.c-prose > * {
max-width: var(--measure);
margin-block: 0;
margin-inline: auto;
}
.c-prose > * + * { margin-top: 1.25em; }
.c-prose > .alignwide { max-width: var(--wide); }
.c-prose > .alignfull {
max-width: none;
margin-inline: calc(50% - 50vw);
}
.c-prose > .alignleft {
float: left;
max-width: min(50%, 20rem);
margin: .35em 2rem 1rem max(0px, (100% - var(--measure)) / 2);
}
.c-prose > .alignright {
float: right;
max-width: min(50%, 20rem);
margin: .35em max(0px, (100% - var(--measure)) / 2) 1rem 2rem;
}
.c-prose::after { content: ""; display: block; clear: both; } .c-prose .wp-caption { max-width: 100%; }
.c-prose .aligncenter,
.c-prose img.aligncenter { margin-inline: auto; }
.c-prose .wp-caption img { width: 100%; }
.c-prose .wp-caption-text {
margin: .85rem 0 0;
color: var(--ink-soft);
font-size: var(--fs-small);
line-height: 1.5;
}
@media (max-width: 29.99rem) {
.c-prose > .alignleft,
.c-prose > .alignright { float: none; max-width: 100%; margin-inline: 0; }
}
.c-prose--flush > * { margin-inline: 0; }
.c-prose--flush > .alignleft { margin-left: 0; }
.c-prose--flush > .alignright { margin-right: 0; } .c-article .c-prose > p:first-child {
color: var(--ink);
font-size: var(--fs-lead);
line-height: 1.6;
} .c-prose > :is(h2, h3, h4, h5, h6) { clear: both; }
.c-prose h2 {
margin-top: clamp(2.75rem, 2rem + 2.5vw, 4rem);
font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.375rem);
font-weight: 420;
line-height: 1.14;
letter-spacing: -0.022em;
}
.c-prose h3 {
margin-top: 2.4rem;
font-family: var(--font-display);
font-size: clamp(1.3125rem, 1.15rem + .6vw, 1.625rem);
font-weight: 450;
line-height: 1.25;
letter-spacing: -0.012em;
}
.c-prose h4 {
margin-top: 2rem;
font-family: var(--font-ui);
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: 0;
}
.c-prose h5,
.c-prose h6 {
margin-top: 1.75rem;
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.c-prose > :is(h2, h3, h4, h5, h6) + * { margin-top: .7em; }
.c-prose p { text-wrap: pretty; }
.c-prose strong,
.c-prose b { font-weight: 700; }
.c-prose small { font-size: var(--fs-small); }
.c-prose abbr[title] { text-decoration: underline dotted; cursor: help; }
.c-prose mark:not([style]) {
padding: 0 .15em;
border-radius: 3px;
background: color-mix(in oklab, var(--gold-300) 55%, transparent);
color: inherit;
}
.c-prose .has-drop-cap:not(:focus)::first-letter {
float: left;
margin: .06em .12em 0 0;
color: var(--moss-700);
font-family: var(--font-display);
font-size: 4.4em;
font-weight: 400;
line-height: .8;
} .c-prose a:not(.wp-element-button):not(.wp-block-button__link):not(.btn) {
color: var(--moss-700);
text-decoration-line: underline;
text-decoration-color: color-mix(in oklab, var(--moss-700) 42%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: .22em;
transition: color var(--d-1) var(--ease-out), text-decoration-color var(--d-1) var(--ease-out);
}
.c-prose a:not(.wp-element-button):not(.wp-block-button__link):not(.btn):hover {
color: var(--moss-900);
text-decoration-color: var(--gold-600);
text-decoration-thickness: 2px;
} .c-prose :is(ul, ol) { padding-left: 1.6em; }
.c-prose li + li { margin-top: .5em; }
.c-prose li > :is(ul, ol) { margin-top: .5em; }
.c-prose :is(ul:not([class]), ul.wp-block-list) { list-style: none; }
.c-prose :is(ul:not([class]), ul.wp-block-list) > li { position: relative; }
.c-prose :is(ul:not([class]), ul.wp-block-list) > li::before {
content: "";
position: absolute;
top: .58em;
left: -1.15em;
width: .46em;
height: .6em;
background: var(--gold-600);
-webkit-mask: var(--drop) center / contain no-repeat;
mask: var(--drop) center / contain no-repeat;
}
.c-prose ol > li::marker {
color: var(--moss-700);
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-weight: 500;
} .c-prose > :is(figure, .wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-table, .wp-block-video, .wp-block-audio, .wp-block-pullquote, .wp-block-quote, blockquote, .wp-block-code, pre, .wp-block-media-text, .wp-block-cover, .wp-block-columns, .wp-block-buttons) {
margin-block: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.c-prose > :first-child { margin-top: 0; }
.c-prose > :last-child { margin-bottom: 0; } .c-prose :is(blockquote, .wp-block-quote) {
position: relative;
margin-inline: auto; padding: 1.6rem 0 0;
border: 0;
color: var(--moss-800);
font-family: var(--font-display);
font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
font-style: italic;
font-weight: 380;
line-height: 1.45;
}
.c-prose :is(blockquote, .wp-block-quote)::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3rem;
height: 1px;
background: var(--gold-600);
}
.c-prose :is(blockquote, .wp-block-quote) > * { margin: 0; }
.c-prose :is(blockquote, .wp-block-quote) > * + * { margin-top: .65em; }
.c-prose :is(blockquote, .wp-block-quote) cite,
.c-prose .wp-block-pullquote cite {
display: block;
margin-top: 1rem;
color: var(--ink-soft);
font-family: var(--font-ui);
font-size: var(--fs-micro);
font-style: normal;
font-weight: 650;
letter-spacing: .1em;
text-transform: uppercase;
}
.c-prose .wp-block-quote.is-style-large,
.c-prose .wp-block-quote.is-large { padding-inline: 0; }
.c-prose .wp-block-quote.is-style-large p,
.c-prose .wp-block-quote.is-large p {
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
font-style: italic;
line-height: 1.3;
} .c-prose .wp-block-pullquote {
position: relative;
padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0;
border: 0;
border-block: 1px solid var(--lichen-400);
text-align: center;
}
.c-prose .wp-block-pullquote::before {
content: "";
position: absolute;
top: -.65rem;
left: 50%;
width: 2.5rem;
height: 1.3rem;
background: var(--drop-gold) center / .8rem 1.05rem no-repeat, var(--lichen-100);
transform: translateX(-50%);
}
.c-prose .wp-block-pullquote blockquote {
margin: 0;
padding: 0;
color: var(--moss-900);
}
.c-prose .wp-block-pullquote blockquote::before { content: none; }
.c-prose .wp-block-pullquote p {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
font-style: italic;
font-weight: 380;
line-height: 1.3;
text-wrap: balance;
} .c-prose :is(.wp-block-image, figure, p) img { border-radius: var(--r-md); }
.c-prose .alignfull img,
.c-prose .wp-block-cover img { border-radius: 0; }
.c-prose .wp-block-image.is-style-rounded img { border-radius: 999px; }
.c-prose :is(figcaption, .wp-element-caption) {
margin: .85rem 0 0;
color: var(--ink-soft);
font-size: var(--fs-small);
line-height: 1.5;
}
.c-prose > :is(.wp-block-image, .wp-block-embed, .wp-block-video, .wp-block-audio, figure:not(.wp-block-table):not(.wp-block-gallery):not(.wp-block-pullquote)) > :is(figcaption, .wp-element-caption) {
display: flex;
gap: .7rem;
text-align: left;
}
.c-prose > :is(.wp-block-image, .wp-block-embed, .wp-block-video, .wp-block-audio, figure:not(.wp-block-table):not(.wp-block-gallery):not(.wp-block-pullquote)) > :is(figcaption, .wp-element-caption)::before {
content: "";
flex: 0 0 1.5rem;
height: 1px;
margin-top: .74em;
background: var(--gold-600);
} .c-prose .wp-block-gallery img { border-radius: var(--r-md); }
.c-prose .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
margin: 0;
padding: 2.5rem .75rem .65rem;
border-radius: 0 0 var(--r-md) var(--r-md);
background: linear-gradient(0deg, rgb(11 26 16 / .8), rgb(11 26 16 / 0));
color: var(--lichen-50);
font-size: var(--fs-micro);
text-shadow: none;
}
.c-prose .wp-block-gallery > figcaption { flex-basis: 100%; text-align: center; } .c-prose .wp-block-table {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--lichen-50);
}
.c-prose table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-small);
line-height: 1.5;
font-variant-numeric: tabular-nums;
}
.c-prose > table { display: block; overflow-x: auto; }
.c-prose :is(th, td) {
padding: .8rem 1rem;
border: 0;
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.c-prose thead th,
.c-prose thead td {
background: var(--moss-900);
color: var(--lichen-50);
font-weight: 650;
white-space: nowrap;
}
.c-prose tbody th { font-weight: 650; }
.c-prose tbody tr:nth-child(even),
.c-prose .wp-block-table.is-style-stripes tbody tr:nth-child(even) { background: color-mix(in oklab, var(--lichen-200) 45%, transparent); }
.c-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: transparent; }
.c-prose .wp-block-table.is-style-stripes { border-bottom: 1px solid var(--line); }
.c-prose tbody tr:last-child > * { border-bottom: 0; }
.c-prose tfoot td,
.c-prose tfoot th { border-top: 1px solid var(--line); border-bottom: 0; font-weight: 650; }
.c-prose .wp-block-table figcaption { margin: 0; padding: .75rem 1rem; border-top: 1px solid var(--line); } .c-prose :is(hr, .wp-block-separator) {
max-width: 10rem;
height: 14px;
margin-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
border: 0;
opacity: 1;
color: transparent;
background:
var(--drop-gold) center / 10px 13px no-repeat,
linear-gradient(var(--lichen-400), var(--lichen-400)) left center / calc(50% - 16px) 1px no-repeat,
linear-gradient(var(--lichen-400), var(--lichen-400)) right center / calc(50% - 16px) 1px no-repeat;
}
.c-prose .wp-block-separator.is-style-wide { max-width: var(--measure); }
.c-prose .wp-block-separator.is-style-dots {
max-width: 5rem;
background:
var(--drop-gold) left center / 9px 12px no-repeat,
var(--drop-gold) center / 9px 12px no-repeat,
var(--drop-gold) right center / 9px 12px no-repeat;
}
.c-prose .wp-block-separator.is-style-dots::before { content: none; } .c-prose :is(code, kbd, samp) {
padding: .12em .4em;
border-radius: var(--r-xs);
background: var(--lichen-200);
color: var(--humus-900);
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: .86em;
}
.c-prose :is(pre, .wp-block-code, .wp-block-preformatted) {
overflow-x: auto;
padding: 1.25rem 1.5rem;
border: 0;
border-radius: var(--r-md);
background: var(--moss-950);
color: var(--lichen-50);
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: .9rem;
line-height: 1.65;
tab-size: 2;
white-space: pre;
}
.c-prose :is(pre, .wp-block-code) code {
padding: 0;
background: none;
color: inherit;
font-size: inherit;
}
.c-prose .wp-block-preformatted { white-space: pre-wrap; }
.c-prose .wp-block-verse {
padding: 0;
background: none;
color: var(--moss-800);
font-family: var(--font-display);
font-style: italic;
white-space: pre-wrap;
} .c-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.c-prose .wp-block-button__link,
.c-prose a.btn { color: var(--btn-fg); text-decoration: none; }
.c-prose .wp-block-button.is-style-outline > .wp-block-button__link {
--btn-bg: transparent;
--btn-fg: var(--ink);
--btn-bd: color-mix(in oklab, var(--humus-900) 28%, transparent);
padding: .9rem 1.6rem;
border-width: 1px;
}
.c-prose .wp-block-button.is-style-outline > .wp-block-button__link:hover {
--btn-bg: color-mix(in oklab, var(--humus-900) 6%, transparent);
--btn-bd: var(--humus-900);
} .c-prose :is(.wp-block-embed__wrapper, video, iframe) { border-radius: var(--r-md); }
.c-prose .wp-block-embed__wrapper { overflow: hidden; }
.c-prose iframe { max-width: 100%; border: 0; }
.c-prose video { width: 100%; background: var(--moss-950); }
.c-prose audio { width: 100%; } .c-prose .wp-block-columns { gap: var(--s-6); }
.c-prose .wp-block-media-text__media img { border-radius: var(--r-md); }
.c-prose .wp-block-group.has-background {
padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
border-radius: var(--r-lg);
} .c-prose .post-password-form {
padding: clamp(1.25rem, 1rem + 2vw, 2rem);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--lichen-50);
}
.c-prose .post-password-form p + p {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--s-3);
margin-top: var(--s-4);
}
.c-prose .post-password-form label { display: grid; flex: 1 1 14rem; gap: .4rem; } .c-prose details { border-bottom: 1px solid var(--line); }
.c-prose > details:first-child,
.c-prose > :not(details) + details { border-top: 1px solid var(--line); }
.c-prose > details + details { margin-top: 0; }
.c-prose > :not(details) + details { margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.c-prose summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
min-height: 4.25rem;
padding-block: 1.1rem;
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(1.125rem, 1.04rem + .4vw, 1.3125rem);
font-weight: 450;
line-height: 1.3;
letter-spacing: -0.01em;
list-style: none;
cursor: pointer;
transition: color var(--d-2) var(--ease-out);
-webkit-tap-highlight-color: transparent;
}
.c-prose summary::-webkit-details-marker { display: none; }
.c-prose summary::marker { content: ""; }
.c-prose summary::after { content: "";
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
border: 1px solid color-mix(in oklab, var(--humus-900) 22%, transparent);
border-radius: 50%;
background:
linear-gradient(currentColor, currentColor) center / .85rem 1.6px no-repeat,
linear-gradient(currentColor, currentColor) center / 1.6px .85rem no-repeat;
color: var(--ink);
transition:
transform var(--d-3) var(--ease-out),
background-size var(--d-3) var(--ease-out),
background-color var(--d-2) var(--ease-out),
border-color var(--d-2) var(--ease-out),
color var(--d-2) var(--ease-out);
}
.c-prose summary:hover { color: var(--moss-700); }
.c-prose summary:hover::after { border-color: var(--moss-700); }
.c-prose summary:focus-visible { outline-offset: 4px; border-radius: var(--r-sm); }
.c-prose details[open]:not(.is-closing) > summary { color: var(--moss-800); }
.c-prose details[open]:not(.is-closing) > summary::after {
border-color: var(--moss-900);
background-color: var(--moss-900);
background-size: .85rem 1.6px, 1.6px 0;
color: var(--lichen-50);
transform: rotate(180deg);
}
.c-prose details > summary + * { margin-top: 0; }
.c-prose details > :not(summary) {
max-width: 38em;
color: var(--ink-soft);
}
.c-prose details > * + * { margin-block-start: .9em; }
.c-prose details > :last-child { margin-bottom: 1.6rem; }
.c-prose details[open] > :not(summary) { animation: c-acc-in var(--d-3) var(--ease-out); }
.c-prose details.is-closing > :not(summary) {
opacity: 0;
transform: translateY(-4px);
transition: opacity var(--d-1) var(--ease-out), transform var(--d-2) var(--ease-out);
}
@keyframes c-acc-in {
from { opacity: 0; transform: translateY(-6px); }
}
@media (min-width: 40rem) {
.c-prose details > :not(summary) { padding-right: 3.75rem; }
} .c-tags { max-width: var(--measure); margin: var(--s-7) auto 0; }
.c-tags__list {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
}
.c-tags__link {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
padding: .4rem 1rem;
border: 1px solid color-mix(in oklab, var(--humus-900) 18%, transparent);
border-radius: var(--r-pill);
color: var(--ink);
font-size: var(--fs-small);
font-weight: 600;
text-decoration: none;
transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.c-tags__link::before { content: "#"; margin-right: .15em; color: var(--gold-700); }
.c-tags__link:hover { border-color: var(--humus-900); background: var(--lichen-50); } .c-callout {
position: relative;
isolation: isolate;
display: grid;
justify-items: center;
width: min(100%, var(--wide));
margin: clamp(7.5rem, 5rem + 7vw, 10.5rem) auto 0;
padding: 0 clamp(1.25rem, .75rem + 3vw, 3rem) clamp(2rem, 1.5rem + 2vw, 3rem);
border-radius: var(--r-xl);
background: var(--moss-900);
box-shadow: var(--shadow-3);
color: var(--on-moss);
text-align: center;
}
.c-callout__stage {
position: absolute;
z-index: -2;
inset: 0;
overflow: hidden;
border-radius: inherit;
} .c-callout__stage img {
position: absolute;
inset: 0 0 auto;
width: 100%;
height: 12.5rem;
object-fit: cover;
object-position: 50% 62%;
opacity: .88;
-webkit-mask-image: linear-gradient(180deg, #000 42%, transparent);
mask-image: linear-gradient(180deg, #000 42%, transparent);
}
.c-callout__bottle {
position: relative;
z-index: 1;
margin-top: -5.5rem;
}
.c-callout__bottle::after { content: "";
position: absolute;
z-index: -1;
bottom: -.6rem;
left: 50%;
width: 210%;
height: 1.8rem;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(240 207 122 / .55), rgb(240 207 122 / 0));
filter: blur(3px);
transform: translateX(-50%);
transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out);
}
.c-callout__img {
width: auto;
height: 15rem;
filter: drop-shadow(0 22px 22px rgb(5 12 8 / .55));
transition: transform var(--d-4) var(--ease-out);
}
.c-callout:hover .c-callout__img { transform: translateY(-8px) rotate(-1.5deg); }
.c-callout:hover .c-callout__bottle::after { opacity: .7; transform: translateX(-50%) scale(.9); }
.c-callout__body { max-width: 32rem; margin-top: var(--s-5); }
.c-callout__title {
color: var(--lichen-50);
font-size: var(--fs-h3);
font-weight: 420;
}
.c-callout__ppm { white-space: nowrap; font-style: italic; }
.c-callout__text { margin-top: var(--s-3); color: var(--on-moss-soft); }
.c-callout__price {
display: flex;
flex-direction: column;
align-items: center;
gap: .2rem;
margin-top: var(--s-5);
}
.c-callout__amount {
color: var(--lichen-50);
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 420;
line-height: 1.1;
}
.c-callout__amount .woocommerce-Price-amount { font-weight: inherit; }
.c-callout__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-4);
margin-top: var(--s-5);
}
.c-callout__ship {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--on-moss-soft);
font-size: var(--fs-small);
}
.c-callout__ship .icon { color: var(--moss-300); }
.c-callout__notice {
max-width: 34rem;
margin-top: var(--s-5);
padding-top: var(--s-3);
border-top: 1px solid var(--line-on-moss);
color: var(--on-moss-soft);
font-size: var(--fs-micro);
line-height: 1.5;
}
@media (max-width: 29.99rem) {
.c-callout__actions { align-self: stretch; }
.c-callout__actions .btn { width: 100%; }
}
@media (min-width: 52rem) {
.c-callout {
--pad-y: clamp(2.5rem, 3.5vw, 3.5rem);
grid-template-columns: minmax(12rem, 19rem) minmax(0, 1fr);
align-items: center;
justify-items: start;
min-height: 19rem;
padding: var(--pad-y) clamp(2.5rem, 5vw, 5rem) var(--pad-y) 0;
column-gap: clamp(1rem, 3vw, 3rem);
text-align: left;
}
.c-callout__stage img {
inset: 0 auto 0 0;
width: 50%;
height: 100%;
object-position: 45% 60%;
-webkit-mask-image: linear-gradient(90deg, #000 28%, transparent 88%);
mask-image: linear-gradient(90deg, #000 28%, transparent 88%);
} .c-callout__bottle {
align-self: stretch;
justify-self: stretch;
margin: calc(-1 * var(--pad-y) - 4.5rem) 0 calc(-1 * var(--pad-y) + 1.5rem);
}
.c-callout__bottle::after { width: 12rem; }
.c-callout__img {
position: absolute;
bottom: 0;
left: 50%;
width: auto;
height: 100%;
max-height: 34rem;
translate: -50% 0;
}
.c-callout__body { margin: 0; max-width: 34rem; }
.c-callout__price { align-items: flex-start; }
.c-callout__actions { flex-flow: row wrap; align-items: center; gap: var(--s-4) var(--s-5); }
} .c-postnav {
display: grid;
gap: var(--s-4);
width: min(100%, var(--wide));
margin: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) auto 0;
}
.c-postnav__link {
position: relative;
display: flex;
align-items: center;
gap: var(--s-4);
min-height: 6.5rem;
padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--lichen-50);
color: var(--ink);
text-decoration: none;
transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.c-postnav__link:hover {
border-color: color-mix(in oklab, var(--humus-900) 30%, transparent);
box-shadow: var(--shadow-1);
transform: translateY(-2px);
}
.c-postnav__link--next { flex-direction: row-reverse; text-align: right; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); }
.c-postnav__orb {
flex: 0 0 4.5rem;
overflow: hidden;
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;
background: var(--moss-800);
}
.c-postnav__orb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-4) var(--ease-out); }
.c-postnav__link:hover .c-postnav__orb img { transform: scale(1.08); }
.c-postnav__text { min-width: 0; }
.c-postnav__dir {
display: flex;
align-items: center;
gap: .3rem;
color: var(--ink-soft);
font-size: var(--fs-micro);
font-weight: 650;
letter-spacing: .08em;
text-transform: uppercase;
}
.c-postnav__link--next .c-postnav__dir { justify-content: flex-end; }
.c-postnav__dir .icon { width: 1rem; height: 1rem; }
.c-postnav__title {
display: block;
margin-top: .3rem;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 450;
line-height: 1.25;
text-wrap: balance;
}
@media (min-width: 48rem) {
.c-postnav { grid-template-columns: 1fr 1fr; }
.c-postnav__link--next { grid-column: 2; }
} .c-comments {
max-width: var(--measure);
margin-inline: auto;
padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
border-top: 1px solid var(--line);
}
.c-comments__title {
margin-bottom: var(--s-4);
font-size: var(--fs-h3);
font-weight: 420;
}
.c-comment-list,
.c-comment-list .children {
margin: 0;
padding: 0;
list-style: none;
}
.c-comment-list > li + li { border-top: 1px solid var(--line); }
.c-comment-list .children {
margin-left: 1.35rem;
padding-left: clamp(1rem, 3vw, 2rem);
border-left: 1px solid var(--lichen-400);
}
.c-comment__body { padding-block: var(--s-5); }
.c-comment__head { display: flex; align-items: center; gap: .9rem; }
.c-comment__avatar {
display: grid;
flex: 0 0 2.75rem;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--moss-900);
color: var(--gold-300);
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 450;
line-height: 1;
}
.bypostauthor > .c-comment__body .c-comment__avatar { background: var(--gold-500); color: var(--moss-950); }
.c-comment__who { display: grid; gap: .05rem; min-width: 0; }
.c-comment__author { font-weight: 700; line-height: 1.3; }
.c-comment__date {
color: var(--ink-soft);
font-size: var(--fs-micro);
text-decoration: none;
}
.c-comment__date:hover { text-decoration: underline; }
.c-comment__pending {
margin-top: var(--s-3);
padding: .5rem .9rem;
border-radius: var(--r-sm);
background: var(--lichen-200);
font-size: var(--fs-small);
}
.c-comment__text { margin-top: var(--s-3); overflow-wrap: anywhere; }
.c-comment__text > * + * { margin-top: .8em; }
.c-comment__text a { color: var(--moss-700); }
.c-comment__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.c-comment__actions a {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
padding: .4rem 1rem;
border: 1px solid color-mix(in oklab, var(--humus-900) 18%, transparent);
border-radius: var(--r-pill);
color: var(--ink);
font-size: var(--fs-small);
font-weight: 650;
text-decoration: none;
transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.c-comment__actions a:hover { border-color: var(--humus-900); background: var(--lichen-50); }
@media (min-width: 40rem) {
.c-comment__text,
.c-comment__actions,
.c-comment__pending { margin-left: 3.65rem; }
}
.c-comments__nav { margin-top: var(--s-5); }
.c-comments__nav .nav-links { justify-content: space-between; }
.c-comments__closed { margin-top: var(--s-5); color: var(--ink-soft); font-size: var(--fs-small); }
.c-comments .comment-respond { margin-top: var(--s-7); }
.c-comment-list .comment-respond {
margin: 0 0 var(--s-5);
padding: var(--s-5);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--lichen-50);
}
.c-comments .comment-reply-title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--s-3);
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 420;
letter-spacing: -0.018em;
}
.c-comments .comment-reply-title small { font-family: var(--font-ui); font-size: var(--fs-small); letter-spacing: 0; }
.c-comments .comment-reply-title small a { color: var(--moss-700); font-weight: 650; }
.c-form {
display: grid;
gap: var(--s-4) var(--s-5);
margin-top: var(--s-5);
}
.c-form > * { grid-column: 1 / -1; margin: 0; }
.c-form label { display: block; margin-bottom: .4rem; }
.c-form .required { color: var(--error-600); }
.c-form .comment-notes,
.c-form .logged-in-as {
color: var(--ink-soft);
font-size: var(--fs-small);
}
.c-form .comment-notes a,
.c-form .logged-in-as a { color: var(--moss-700); }
.c-form .comment-form-cookies-consent {
display: flex;
align-items: flex-start;
gap: .7rem;
}
.c-form .comment-form-cookies-consent input { flex: 0 0 auto; margin-top: .2rem; }
.c-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.c-form .form-submit { margin-top: var(--s-2); }
@media (min-width: 40rem) {
.c-form { grid-template-columns: 1fr 1fr; }
.c-form > .comment-form-author { grid-column: 1; }
.c-form > .comment-form-email { grid-column: 2; }
} .c-page__body { padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--gutter) var(--section-y); }
.c-page__body > .c-frame { width: min(100%, var(--measure)); }
@media (min-width: 75rem) {
.c-page__body > .c-frame--aside { width: min(100%, var(--measure) + var(--aside) + var(--aside-gap)); }
}
.c-page__comments { margin-bottom: var(--section-y); }
.c-main--page .c-prose.prose { font-size: 1.0625rem; line-height: 1.7; }
.c-main--legal .c-prose h2 {
font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.25rem);
}
.c-main--legal .c-prose h3 { font-size: 1.25rem; }
.c-main--legal .c-prose { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } .c-legalnav { margin-top: var(--s-6); }
.c-legalnav__list {
display: flex;
gap: var(--s-2);
margin: 0 calc(-1 * var(--gutter));
padding: .25rem var(--gutter);
overflow-x: auto;
list-style: none;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent);
mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent);
}
.c-legalnav__list::-webkit-scrollbar { display: none; }
.c-legalnav__link {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
padding: .45rem 1.05rem;
border: 1px solid var(--line-on-moss);
border-radius: var(--r-pill);
color: var(--on-moss-soft);
font-size: var(--fs-small);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
scroll-snap-align: start;
transition: color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.c-legalnav__link:hover { border-color: rgb(242 245 232 / .5); color: var(--lichen-50); }
.c-legalnav__link[aria-current="page"] {
border-color: var(--lichen-50);
background: var(--lichen-50);
color: var(--moss-950);
}
@media (min-width: 48rem) {
.c-legalnav__list {
flex-wrap: wrap;
margin-inline: 0;
padding-inline: 0;
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
} .c-toc__list { margin: 0; padding: 0; list-style: none; }
.c-toc__list a {
display: block;
padding: .45rem 0 .45rem 1rem;
border-left: 2px solid transparent;
color: var(--ink-soft);
font-size: var(--fs-small);
line-height: 1.35;
text-decoration: none;
transition: color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.c-toc__list a:hover { color: var(--ink); }
.c-toc__list a.is-active {
border-left-color: var(--gold-600);
color: var(--moss-800);
font-weight: 650;
}
.c-toc-aside { display: none; }
.c-toc-inline {
margin-bottom: var(--s-6);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--lichen-50);
}
.c-toc-inline > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
min-height: 3.5rem;
padding: .75rem 1.25rem;
font-weight: 650;
list-style: none;
cursor: pointer;
}
.c-toc-inline > summary::-webkit-details-marker { display: none; }
.c-toc-inline > summary .icon { transition: transform var(--d-2) var(--ease-out); }
.c-toc-inline[open] > summary .icon { transform: rotate(180deg); }
.c-toc-inline .c-toc { padding: 0 1.25rem 1rem; }
.c-toc-inline .c-toc__list { border-left: 1px solid var(--line); }
@media (min-width: 75rem) {
.c-toc-inline { display: none; }
.c-toc-aside { display: block; }
.c-toc {
position: sticky;
top: calc(var(--header-h) + var(--s-6));
max-height: calc(100vh - var(--header-h) - var(--s-8));
overflow-y: auto;
}
.c-toc-aside .c-toc__list { border-left: 1px solid var(--line); }
.c-toc-aside .c-toc__list a { margin-left: -1px; }
}
.c-toc__title {
margin-bottom: var(--s-3);
color: var(--ink-soft);
font-size: var(--fs-micro);
font-weight: 650;
letter-spacing: .1em;
text-transform: uppercase;
} .c-help {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--s-4) var(--s-5);
max-width: var(--measure);
margin: clamp(3rem, 2rem + 3vw, 4.5rem) auto 0;
padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
border-radius: var(--r-xl);
background:
radial-gradient(28rem 14rem at 0% 0%, rgb(79 122 42 / .3), transparent 70%),
var(--moss-900);
color: var(--on-moss);
}
.c-help__orb { width: clamp(3.75rem, 3rem + 2vw, 4.75rem); box-shadow: none; }
.c-help__title {
color: var(--lichen-50);
font-size: var(--fs-h4);
font-weight: 450;
}
.c-help__text { margin-top: .3rem; color: var(--on-moss-soft); font-size: var(--fs-small); }
.c-help__text a { color: var(--lichen-50); text-underline-offset: .2em; }
.c-help__btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 40rem) {
.c-help { grid-template-columns: auto minmax(0, 1fr) auto; }
.c-help__btn { grid-column: auto; }
}
.c-prose--flush ~ .c-help,
.c-frame__main .c-help { margin-inline: 0; } .c-band__search { margin-top: var(--s-5); }
.c-band--search .c-band__title { max-width: 22ch; overflow-wrap: anywhere; }
.c-results {
max-width: 58rem;
margin: 0;
padding: 0;
list-style: none;
}
.c-result {
position: relative;
display: grid;
grid-template-columns: 4.75rem minmax(0, 1fr);
align-items: start;
gap: var(--s-4);
padding-block: var(--s-5);
border-top: 1px solid var(--line);
}
.c-result:last-child { border-bottom: 1px solid var(--line); }
.c-result__media {
display: grid;
place-items: center;
overflow: hidden;
aspect-ratio: 1;
border-radius: var(--r-lg);
background: var(--moss-800);
}
.c-result__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--d-4) var(--ease-out);
}
.c-result:hover .c-result__media img { transform: scale(1.06); }
.c-result__media--product {
border: 1px solid var(--line);
background: var(--lichen-50);
}
.c-result__media--product img {
object-fit: cover;
mix-blend-mode: multiply;
}
.c-result__media--bottle {
background: radial-gradient(closest-side at 50% 80%, var(--moss-700), var(--moss-900));
}
.c-result__media--bottle img {
width: auto;
height: 84%;
object-fit: contain;
}
.c-result__body { min-width: 0; }
.c-result__title {
font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
font-weight: 420;
line-height: 1.22;
}
.c-result__excerpt { margin-top: .4rem; color: var(--ink-soft); }
.c-result__meta { margin-top: .6rem; }
.c-result__type { color: var(--moss-700); font-weight: 650; }
.c-result__price { color: var(--ink); font-weight: 650; }
.c-result .price-note { margin-top: .2rem; }
.c-result .price-note a { position: relative; z-index: 2; }
.c-result__go { display: none; } .c-hit {
--hit: color-mix(in oklab, var(--gold-300) 60%, var(--lichen-100));
padding: 0;
border-radius: 2px;
background: var(--hit);
box-shadow: 0 0 0 .1em var(--hit);
color: inherit;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
@media (min-width: 40rem) {
.c-result {
grid-template-columns: 7rem minmax(0, 1fr) auto;
gap: var(--s-5) var(--s-6);
padding-block: var(--s-6);
}
.c-result__go {
display: grid;
place-items: center;
align-self: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid color-mix(in oklab, var(--humus-900) 18%, transparent);
border-radius: 50%;
color: var(--ink);
transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.c-result:hover .c-result__go {
border-color: var(--moss-900);
background: var(--moss-900);
color: var(--lichen-50);
transform: translate(2px, -2px);
}
} .c-404 {
position: relative;
isolation: isolate;
display: grid;
align-items: center;
min-height: calc(100svh - var(--header-h));
padding-block: clamp(2.5rem, 1.5rem + 4vw, 6rem);
overflow: hidden;
background:
radial-gradient(40rem 40rem at 74% 48%, rgb(79 122 42 / .3), transparent 68%),
radial-gradient(60rem 30rem at 0% 115%, rgb(11 26 16 / .7), transparent 70%),
var(--moss-900);
color: var(--on-moss);
}
.c-404__grid {
display: grid;
align-items: center;
gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.c-404__visual {
display: grid;
order: -1;
place-items: center;
}
.c-404__orb {
width: min(68vw, 20rem);
box-shadow: 0 40px 90px -30px rgb(0 0 0 / .7), 0 0 0 1px rgb(242 245 232 / .08);
animation: c-float 9s var(--ease-in-out) infinite;
}
.c-404__title {
max-width: 11ch;
color: var(--lichen-50);
font-size: var(--fs-display);
font-weight: 380;
line-height: .98;
letter-spacing: -0.035em;
}
.c-404__lead { margin-top: var(--s-5); }
.c-404__code {
margin-top: var(--s-3);
color: var(--moss-300);
font-size: var(--fs-micro);
font-weight: 650;
letter-spacing: .1em;
text-transform: uppercase;
}
.c-404__search { margin-top: var(--s-6); }
.c-404__links {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
margin-top: var(--s-5);
}
@media (min-width: 56rem) {
.c-404__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.c-404__visual { order: 0; }
.c-404__orb { width: min(100%, 30rem); }
}
@keyframes c-float {
0%, 100% { translate: 0 0; }
50% { translate: 0 -12px; }
} @media (prefers-reduced-motion: reduce) {
.c-404__orb { animation: none; }
.c-feature:hover .c-feature__media img,
.c-row:hover .c-row__media img,
.c-callout:hover .c-callout__img { transform: none; }
}
@media print {
.c-progress,
.c-band__photo,
.c-callout,
.c-postnav,
.c-legalnav,
.c-toc-aside,
.c-toc-inline,
.c-help,
.comment-respond { display: none !important; }
.c-band,
.c-404 { background: none; color: #000; }
.c-band { -webkit-mask: none; mask: none; }
.c-band__title,
.c-band .c-meta { color: #000; }
.c-article__figure { margin-top: 0; }
}.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;margin:0 0 -4px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left;padding:0}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin:0;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:var(--wc-form-color-background,#fff);color:var(--wc-form-color-text,#000);border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected],.select2-results__option[data-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#444}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none;margin:5px 5px 0 0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li:before{content:"";display:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#444;margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid #000 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--above .select2-selection--single{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--below .select2-selection--single{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:0 0;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true],.select2-container--default .select2-results__option[data-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted[data-selected]{background-color:var(--wp-admin-theme-color,#0073aa);color:#fff}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:linear-gradient(to bottom,#fff 50%,#eee 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--single:focus{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#444}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:linear-gradient(to bottom,#eee 50%,#ccc 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:0 0;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:linear-gradient(to bottom,#fff 0,#eee 50%);background-repeat:repeat-x}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:linear-gradient(to bottom,#eee 50%,#fff 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{float:right}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected],.select2-container--classic .select2-results__option--highlighted[data-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:var(--wp-admin-theme-color,#0073aa)}