*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 16px;
    line-height: normal;
    color: var(--ink);
    background: var(--bgsolid);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-serif);
    font-weight: 600;
}

input,
button,
select,
textarea {
    font-family: inherit;
    color: inherit;
}

button {
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

a {
    color: var(--accent-text);
    text-decoration: none;
    transition: color .25s ease, background .25s ease, border-color .25s ease;
}

@media (hover: hover) {
    a:hover {
        color: var(--accent-hover);
    }
}

::selection {
    background: var(--selectionbg);
    color: var(--selectionink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}

img,
svg {
    max-inline-size: 100%;
    block-size: auto;
}

hr {
    border: none;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* A modal owns the viewport while it is up: the page behind it is inert already,
   it must not scroll away underneath either. */
html:has(dialog[open]) {
    overflow: hidden;
}

.aw-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.aw-skip {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -9999px;
    z-index: 100;
    padding: 14px 22px;
    background: var(--btnbg);
    color: var(--btnink);
    font-size: 11.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
}

.aw-skip:focus {
    inset-inline-start: 0;
    color: var(--btnink);
}

.aw-tap {
    position: relative;
}

/* Overlay height is a variable so stacked headers can shrink it to the
   element's own box - a 44px overlay on a 16px link bleeds into its neighbour
   and steals the tap. */
.aw-tap::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: var(--aw-tap-size, 44px);
    transform: translate(0, -50%);
}

.aw-card {
    background: var(--card);
    border: 1px solid var(--line);
}

@supports (backdrop-filter: blur(6px)) {
    .aw-card {
        backdrop-filter: blur(6px);
    }
}

.aw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 11.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
}

.aw-btn--solid {
    padding: 15px 32px;
    background: var(--btnbg);
    color: var(--btnink);
    box-shadow: var(--btnshadow);
}

.aw-btn--ghost {
    padding: 15px 32px;
    background: transparent;
    border: 1px solid var(--ghostline);
    color: var(--ghostink);
}

@media (hover: hover) {
    .aw-btn--solid:hover {
        background: var(--btnbgH);
        color: var(--btnink);
    }

    .aw-btn--ghost:hover {
        border-color: var(--accent);
        color: var(--ink);
    }
}

.aw-btn--wide {
    padding: 16px 36px;
}

.aw-btn[aria-busy="true"] {
    opacity: .62;
    cursor: progress;
}

.aw-pillgroup {
    display: inline-flex;
    min-block-size: var(--control-size);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 3px;
    background: var(--card);
}

.aw-pillgroup__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 13px;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 10.5px;
    letter-spacing: .14em;
    font-weight: 500;
    background: transparent;
    color: var(--muted);
}

.aw-pillgroup__item.active {
    background: var(--btnbg);
    color: var(--btnink);
}

@media (hover: hover) {
    .aw-pillgroup__item:hover {
        color: var(--ink);
    }

    .aw-pillgroup__item.active:hover {
        background: var(--btnbg);
        color: var(--btnink);
    }
}

/* Segmented controls -------------------------------------------------------
   The package tabs, the shop filters and the legal tabs carry sentence-long
   labels. Measured widest need is 380px ("Für Autor:innen" + "Für Produkte",
   "Korice knjiga" + siblings) against a page gutter that leaves viewport-40:
   below 420px they no longer fit one row, and `flex-wrap` drops the overflow
   into a second, left-hanging row inside the oval. 480px is that threshold
   plus room for the fallback font, which is wider than Jost.

   Below it the group stops pretending to be a row of separate pills and
   becomes the segmented control it already is: full width, one column per
   segment, same rounded container, same active state. The tap target is
   raised to 44px because these segments carry no `aw-tap` overlay.

   `minmax(min-content, 1fr)` rather than a plain `1fr`: equal columns are the
   intent, but three equal thirds of a 320px phone are 90px and the German
   "Datenschutz" needs 119. Flooring each column at its longest unbreakable
   word keeps every label readable - the columns come out equal wherever the
   labels allow it (all of English and Bosnian, and the two-item groups), and
   only lean towards the long word where German forces it. Measured at 320px:
   nothing overflows the container in any of the three locales, so no scroll
   fallback is needed. */
@media (width < 480px) {
    .aw-pillgroup--segmented {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(min-content, 1fr);
        inline-size: 100%;
        /* A grid inside a flex row keeps its content as its floor unless it is
           allowed to shrink; without this the shop toolbar would widen the
           page instead of the columns getting narrower. */
        min-inline-size: 0;
    }

    .aw-pillgroup--segmented .aw-pillgroup__item {
        min-block-size: 44px;
        padding-inline: 6px;
        text-align: center;
    }
}

.aw-input {
    box-sizing: content-box;
    inline-size: min(280px, 72vw);
    padding: 15px 20px;
    background: var(--inputbg);
    border: 1px solid var(--inputline);
    border-radius: var(--radius-pill);
    color: var(--ink);
    font-size: 14px;
    font-weight: 300;
}

.aw-input:focus {
    border-color: var(--accent);
}

.aw-input:user-invalid {
    border-color: var(--accent2);
}

.aw-diamond {
    box-sizing: content-box;
    position: absolute;
    border-style: solid;
    border-image: var(--diamond) 1;
    pointer-events: none;
}

.aw-diamond--thick {
    border-width: 1.5px;
}

.aw-diamond--thin {
    border-width: 1px;
}

.aw-diamond--masked {
    -webkit-mask-image: linear-gradient(135deg, #000 45%, transparent 80%);
    mask-image: linear-gradient(135deg, #000 45%, transparent 80%);
}

.aw-diamond--masked-alt {
    -webkit-mask-image: linear-gradient(128deg, #000 45%, transparent 80%);
    mask-image: linear-gradient(128deg, #000 45%, transparent 80%);
}

.aw-glow {
    position: absolute;
    pointer-events: none;
    animation: awGlow 9s ease-in-out infinite;
}

.aw-glow--slow {
    animation-duration: 12s;
}

.aw-decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

@keyframes awGlow {
    0%,
    100% {
        opacity: .72;
    }

    50% {
        opacity: 1;
    }
}

@keyframes awLogoIn {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }

    to {
        opacity: 1;
        clip-path: inset(0 -20% 0 0);
    }
}

@keyframes awFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.aw-logo-in {
    animation: awLogoIn 1.1s .1s cubic-bezier(.22, .61, .36, 1) both;
}

/* Content that ships visible so a scriptless visitor can read it. Its island
   hides it again with the `hidden` attribute on init and drops the attribute
   below; this rule only covers the gap until then. The `js` class lands before
   first paint, so neither path ever flashes - and no rule has to fight the
   `hidden` attribute the way an `html:not(.js) [hidden]` override would. */
html.js [data-closed] {
    display: none;
}

/* Reveals are hidden for scripted visitors only - aw-reveal.js is what hands
   them back, so without it nothing may ever be invisible. */
html.js [data-reveal] {
    opacity: 0;
    translate: 0 22px;
}

html.js [data-reveal="left"] {
    translate: -28px 0;
}

html.js [data-reveal="right"] {
    translate: 28px 0;
}

/* This rule outranks the hover transition the revealing cards declare on
   themselves, so their properties ride along; the stagger delay is a custom
   property to keep it off them. */
html.js [data-reveal].aw-revealed {
    opacity: 1;
    translate: 0 0;
    transition:
        opacity .7s cubic-bezier(.22, .61, .36, 1) var(--aw-reveal-delay, 0ms),
        translate .7s cubic-bezier(.22, .61, .36, 1) var(--aw-reveal-delay, 0ms),
        border-color .3s ease,
        box-shadow .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}

.aw-lockup {
    font-family: var(--font-serif);
}

.aw-lockup__first {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: .32em;
}

.aw-lockup__second {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--accent);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .aw-lockup__second {
        background: var(--gradtext);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.aw-lockup__sub {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: .5em;
    text-transform: uppercase;
    color: var(--soft);
    margin-block-start: 12px;
}

.aw-lockup--stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aw-lockup--stacked .aw-lockup__first {
    font-size: 30px;
}

.aw-lockup--stacked .aw-lockup__second {
    font-size: 36px;
    margin-block-start: 2px;
}

.aw-lockup--inline {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--ink);
}

@media (hover: hover) {
    .aw-lockup--inline:hover {
        color: var(--ink);
    }
}

.aw-lockup--inline .aw-lockup__first {
    font-size: 17px;
    letter-spacing: .3em;
}

.aw-lockup--inline .aw-lockup__second {
    font-size: 18px;
}

.aw-lockup--compact {
    gap: 9px;
}

.aw-lockup--compact .aw-lockup__first {
    font-size: 16px;
    letter-spacing: .28em;
}

.aw-lockup--compact .aw-lockup__second {
    font-size: 17px;
}

html:not(.js) aw-theme-toggle {
    display: none;
}

/* An inline custom element wraps its button in a line box, and the leading of
   that line box makes the toggle read taller than it is next to the pill. */
aw-theme-toggle {
    display: flex;
}

/* The preference pair. Language pill and theme toggle are peers - same family
   of capsule, same job - so they share one row, one gap and one apparent
   height, and the row stays centred as a unit when the toggle is absent
   (no JavaScript) instead of leaving a hole beside the pill. */
.aw-prefs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--control-gap);
}

.aw-themetoggle {
    box-sizing: content-box;
    inline-size: 52px;
    block-size: calc(var(--control-size) - 2px);
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--card);
    position: relative;
    cursor: pointer;
    padding: 0;
}

/* The knob keeps its share of the track (24 of 34, as 20 was of 28) and now
   sits on the track's own centre line, so the taller track stays symmetric. */
.aw-themetoggle__knob {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 5px;
    inline-size: 24px;
    block-size: 24px;
    border-radius: 50%;
    background: var(--btnbg);
    transition: transform .3s ease;
    transform: translate(0, -50%);
}

html.dark .aw-themetoggle__knob {
    transform: translate(18px, -50%);
}

.aw-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    background: var(--bg);
    color: var(--ink);
}

.aw-topbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 24px 34px;
}

.aw-topbar--end {
    justify-content: flex-end;
}

.aw-topbar--split {
    justify-content: space-between;
    gap: 14px;
}

.aw-main {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    scroll-margin-block-start: 90px;
}

.aw-kicker {
    font-size: 11px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--accent-text);
    font-weight: 500;
}

.aw-coming__main {
    padding: 20px 30px 60px;
}

.aw-coming__diamond-a {
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inline-size: 640px;
    block-size: 640px;
    transform: translate(-52%, -50%) rotate(45deg);
    opacity: .5;
}

.aw-coming__diamond-b {
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inline-size: 640px;
    block-size: 640px;
    transform: translate(-47%, -53%) rotate(52deg);
    opacity: .3;
}

.aw-coming__glow-a {
    inset-inline-end: -200px;
    inset-block-start: -180px;
    inline-size: 700px;
    block-size: 700px;
    background: var(--glowA);
}

.aw-coming__glow-b {
    inset-inline-start: -220px;
    inset-block-end: -160px;
    inline-size: 640px;
    block-size: 640px;
    background: var(--glowB);
}

.aw-coming__divider {
    inline-size: 56px;
    block-size: 2px;
    background: var(--btnbg);
    margin: 40px 0;
}

.aw-coming__h1 {
    font-size: clamp(36px, 7.5vw, 62px);
    line-height: 1.08;
    max-inline-size: 700px;
}

.aw-coming__h1 em {
    font-weight: 500;
    font-style: italic;
    color: var(--accent-display);
}

.aw-coming__sub {
    font-weight: 300;
    font-size: 17px;
    line-height: 1.65;
    color: var(--muted);
    max-inline-size: 480px;
    margin-block-start: 22px;
}

.aw-coming__kicker {
    margin-block-start: 26px;
}

.aw-coming__social {
    margin-block-start: 30px;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 500;
}

.aw-coming__social--text {
    color: var(--soft);
}

.aw-coming__footer {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 34px;
    border-block-start: 1px solid var(--line);
    font-size: 12px;
    font-weight: 300;
    color: var(--soft);
}

.aw-coming__footer a {
    color: var(--soft);
}

@media (hover: hover) {
    .aw-coming__footer a:hover {
        color: var(--accent);
    }
}

aw-notify-form {
    display: block;
    margin-block-start: 38px;
    inline-size: 100%;
}

.aw-notify__form:not([hidden]) {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.aw-notify__hp {
    position: absolute;
    inset-inline-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
}

.aw-notify__note,
.aw-notify__fallback {
    margin-block-start: 18px;
    padding: 16px 28px;
    font-size: 14px;
    font-weight: 300;
    background: var(--card);
    max-inline-size: 480px;
}

.aw-notify__note:not([hidden]),
.aw-notify__fallback:not([hidden]) {
    display: inline-block;
}

.aw-notify__note {
    border: 1px solid var(--accent);
    color: var(--accent-text);
}

.aw-notify__fallback {
    border: 1px solid var(--line);
    color: var(--muted);
}

.aw-notify__form[hidden] + .aw-notify__status > * {
    margin-block-start: 0;
}

html:not(.js) .aw-notify__form:not([hidden]) {
    display: none;
}

.aw-404__main {
    padding: 20px 30px 80px;
}

.aw-404__code {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(110px, 26vw, 190px);
    line-height: 1;
    color: var(--accent-display);
}

.aw-404__h1 {
    font-size: clamp(30px, 6vw, 44px);
    margin-block-start: 18px;
}

.aw-404__sub {
    font-weight: 300;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--muted);
    max-inline-size: 440px;
    margin-block-start: 16px;
}

.aw-404__actions {
    display: flex;
    gap: 16px;
    margin-block-start: 38px;
    flex-wrap: wrap;
    justify-content: center;
}

.aw-404__diamond-a {
    inset-inline-start: 50%;
    inset-block-start: 54%;
    inline-size: 560px;
    block-size: 560px;
    transform: translate(-52%, -50%) rotate(45deg);
    opacity: .45;
}

.aw-404__diamond-b {
    inset-inline-start: 50%;
    inset-block-start: 51%;
    inline-size: 560px;
    block-size: 560px;
    transform: translate(-47%, -53%) rotate(52deg);
    opacity: .28;
}

.aw-404__glow {
    inset-inline-end: -200px;
    inset-block-start: -180px;
    inline-size: 700px;
    block-size: 700px;
    background: var(--glowA);
}

.aw-legal {
    position: relative;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    background: var(--bg);
    color: var(--ink);
}

.aw-legal__bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px clamp(20px, 5vw, 54px);
    background: var(--navbg);
    border-block-end: 1px solid var(--line);
}

@supports (backdrop-filter: blur(14px)) {
    .aw-legal__bar {
        backdrop-filter: blur(14px);
    }
}

.aw-legal__navlinks {
    display: flex;
    gap: 34px;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.aw-legal__navlinks a {
    color: var(--muted);
}

@media (hover: hover) {
    .aw-legal__navlinks a:hover {
        color: var(--ink);
    }
}

.aw-legal__diamond-a {
    inset-inline-end: -150px;
    inset-block-start: -160px;
    inline-size: 430px;
    block-size: 430px;
    transform: rotate(45deg);
    opacity: .35;
}

.aw-legal__diamond-b {
    inset-inline-end: -115px;
    inset-block-start: -190px;
    inline-size: 430px;
    block-size: 430px;
    transform: rotate(52deg);
    opacity: .22;
}

.aw-legal__content {
    position: relative;
    max-inline-size: calc(820px + 2 * clamp(20px, 5vw, 40px));
    margin-inline: auto;
    padding: clamp(44px, 7vw, 70px) clamp(20px, 5vw, 40px) clamp(64px, 10vw, 110px);
    scroll-margin-block-start: 90px;
}

.aw-legal__kicker {
    font-size: 11px;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--accent-text);
    font-weight: 500;
}

.aw-legal__h1 {
    font-size: clamp(34px, 6vw, 54px);
    margin-block-start: 14px;
}

.aw-legal__notice {
    margin-block-start: 22px;
    padding: 14px 20px;
    border: 1px solid var(--accent);
    font-size: 13px;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.6;
}

aw-legal-tabs {
    display: block;
}

.aw-legal__tabs {
    margin-block-start: 34px;
    flex-wrap: wrap;
    max-inline-size: 100%;
    padding: 4px;
}

.aw-legal__tab {
    padding: 12px clamp(16px, 4vw, 28px);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: all .3s ease;
}

.aw-legal__panel {
    margin-block-start: 44px;
    scroll-margin-block-start: 100px;
}

.aw-legal__panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.aw-legal__panel h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 28px;
    margin-block-end: 10px;
}

.aw-legal__panel p,
.aw-legal__panel address {
    font-style: normal;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.8;
    color: var(--muted);
}

.aw-legal__panel strong {
    font-weight: 500;
    color: var(--ink);
}

html:not(.js) .aw-legal__tab.active {
    background: transparent;
    color: var(--muted);
}

.aw-legal__footer {
    position: relative;
    background: var(--bandbg);
    color: var(--bandmuted);
    padding: 34px clamp(20px, 5vw, 54px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 300;
}

.aw-legal__footerlinks {
    display: flex;
    gap: 26px;
}

.aw-legal__footer a {
    color: var(--bandmuted);
}

@media (hover: hover) {
    .aw-legal__footer a:hover {
        color: var(--bandlinkH);
    }
}

/* Phone menu ---------------------------------------------------------------
   One navigation, two presentations, one piece of markup. The header keeps the
   links and the controls; below the phone breakpoint a scripted visitor sees a
   slim bar instead, and the island lifts the elements marked `data-menu-item`
   into the dialog on open and hands them back on close. Nothing is mirrored, so
   nothing can drift. Without JavaScript nothing moves and nothing hides - the
   stacked header below stays exactly as it is. */
aw-menu {
    display: block;
}

/* The overlay stands on the page's own ground, so nothing shows through and the
   backdrop never becomes visible: a click on the panel's own ground closes it,
   next to the X, Escape and the focus restore that come with the top layer. */
.aw-menu__panel {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100%;
    max-block-size: 100%;
    margin: 0;
    padding: 84px 24px 44px;
    overflow: auto;
    border: none;
    background: var(--bgsolid);
    color: var(--ink);
}

/* An open dialog animates in; it cannot animate out without `overlay`, which is
   Baseline Limited, so closing is immediate. */
.aw-menu__panel[open] {
    display: flex;
    flex-direction: column;
    animation: awMenuIn .25s cubic-bezier(.22, .61, .36, 1);
}

@keyframes awMenuIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

.aw-menu__close {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    z-index: 2;
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
}

@media (hover: hover) {
    .aw-menu__close:hover {
        color: var(--ink);
        border-color: var(--accent);
    }
}

/* Three tiers, in DOM order: where to go, what to prefer, what to do. The
   preference pair arrives as one element (`.aw-prefs`), so the overlay only
   has to space three rows evenly - and give the action the wider break that
   sets it apart from the two rows of navigation above it. */
.aw-menu__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    margin-block: auto;
}

.aw-menu__body > .aw-btn {
    margin-block-start: 12px;
}

.aw-menu__diamond {
    inset-inline-start: 50%;
    inset-block-end: -210px;
    inline-size: 340px;
    block-size: 340px;
    transform: translate(-50%, 0) rotate(45deg);
    opacity: .28;
}

/* The bar's own affordance: phones with script only, hence hidden by default. */
.aw-menu__open {
    display: none;
    align-items: center;
    padding: 12px 4px;
    border: none;
    background: transparent;
    color: var(--ink);
    font-size: 11.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    cursor: pointer;
}

/* Phone headers -----------------------------------------------------------
   Below 560px every header variant runs out of room and `flex-wrap` leaves
   ragged, left-aligned rows with a dead gutter on the right. Re-lay them out
   as a deliberate centred stack in DOM order - logo, links, controls - and
   size every tap overlay to its own element so neighbouring rows cannot
   steal each other's taps. Header only; page content stays clamp()-fluid.
   A header that carries a menu overrides the stack again further down. */
@media (width < 560px) {
    .aw-topbar {
        padding-inline: 16px;
    }

    .aw-topbar--split,
    .aw-legal__bar {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        text-align: center;
    }

    .aw-topbar--split {
        padding-block: 12px;
    }

    .aw-legal__bar {
        padding: 12px 16px;
    }

    .aw-legal__navlinks {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 10px;
        line-height: 18px;
    }

    /* Wrapped link rows sit 30px apart, so the overlay is capped at the row
       pitch: overlays tile edge to edge instead of overlapping. */
    :is(.aw-nav, .aw-shopnav, .aw-legal__bar) :is(.aw-nav__links, .aw-shopnav__links, .aw-legal__navlinks) .aw-tap {
        --aw-tap-size: 30px;
    }

    /* Controls are already at least 27px tall - the overlay only has to cover
       the control itself. */
    :is(.aw-nav, .aw-shopnav, .aw-legal__bar, .aw-topbar, .aw-menu__body) :is(.aw-pillgroup__item, .aw-themetoggle) {
        --aw-tap-size: 100%;
    }

    /* `line-height: normal` derives every row height from the active font's
       metrics, so the stack resizes when Jost and Cormorant swap in over the
       fallbacks. Pin the row heights instead. */
    :is(.aw-nav, .aw-shopnav, .aw-legal__bar, .aw-topbar) .aw-lockup--inline {
        line-height: 22px;
    }

    :is(.aw-nav, .aw-shopnav, .aw-legal__bar, .aw-topbar, .aw-menu__body) :is(.aw-pillgroup__item, .aw-btn) {
        line-height: 16px;
    }

    /* The slim bar - lockup, whatever the bar keeps for itself, menu button.
       `nowrap` and the pinned line heights keep it one row and one height, at
       the top of the page and scrolled. */
    html.js [data-menu-bar] {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        text-align: start;
    }

    html.js .aw-menu__open {
        display: inline-flex;
    }

    /* Hidden by the stylesheet rather than by the island: the `js` class lands
       before first paint, so the stack never flashes on the way to the bar. */
    html.js [data-menu-bar] [data-menu-item] {
        display: none;
    }

    /* A wrapper whose every child belongs to the overlay has nothing left to
       show, and an empty flex row would still cost the bar a gap. The shop's
       controls keep the cart, so they stay. */
    html.js [data-menu-bar] > div:not(:has(> :not([data-menu-item]))) {
        display: none;
    }

    /* The bar is one row on a 375px phone, so the lockup drops to the compact
       metrics (see `.aw-lockup--compact`) to leave the cart and the button room. */
    html.js [data-menu-bar] .aw-lockup--inline {
        gap: 9px;
    }

    html.js [data-menu-bar] .aw-lockup--inline .aw-lockup__first {
        font-size: 16px;
        letter-spacing: .28em;
    }

    html.js [data-menu-bar] .aw-lockup--inline .aw-lockup__second {
        font-size: 17px;
    }

    /* Stacked, not wrapped: the overlay has the room the bar never had, and each
       link gets a tap target of its own instead of the bar's tiled 30px. */
    .aw-menu__body :is(.aw-nav__links, .aw-shopnav__links, .aw-legal__navlinks) {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
}

/* Paper ---------------------------------------------------------------------
   Whatever the visitor reads on screen, the printer gets the light palette on a
   white page. The three selectors are the ones the theme blocks in tokens.css
   use, so this block outranks them by source order rather than by weight; the
   structural rules carry an `html` prefix because the page stylesheets load
   after this file and would otherwise win at equal specificity. */
@media print {
    :root,
    html.dark,
    html:not(.light) {
        color-scheme: light;

        --bg: #FFFFFF;
        --bgsolid: #FFFFFF;
        --bg2: #FFFFFF;
        --card: #FFFFFF;
        --cardsolid: #FFFFFF;
        --navbg: #FFFFFF;
        --inputbg: #FFFFFF;
        --bandbg: #FFFFFF;

        --ink: #332F38;
        --muted: #6F6A73;
        --soft: #6C666E;
        --bandink: #332F38;
        --bandmuted: #6F6A73;
        --ghostink: #5C5660;
        --btnink: #332F38;

        --accent: #B77F88;
        --accent-text: #8E5962;
        --accent-display: #AD757E;
        --accent2: #C9868F;

        --line: #D9C3C7;
        --inputline: #D9C3C7;
        --ghostline: #C9AEB3;
        --btnbg: #FFFFFF;
        --btnbgH: #FFFFFF;
        --btnshadow: none;
        --cardshadow: none;
        --gradtext: none;
        --diamond: none;
        --glowA: none;
        --glowB: none;
    }

    @page {
        margin: 16mm;
    }

    html,
    body {
        background: #FFFFFF;
        color: var(--ink);
    }

    /* Every navigation affordance is a screen affordance: paper keeps the text. */
    html :is(.aw-skip,
        .aw-nav,
        .aw-shopnav,
        .aw-legal__bar,
        .aw-topbar,
        .aw-pillgroup,
        aw-theme-toggle,
        aw-menu,
        aw-cart-button,
        aw-cart-drawer,
        aw-product-modal,
        .aw-decor,
        .aw-diamond,
        .aw-glow) {
        display: none;
    }

    /* The wordmark paints itself with a clipped gradient, which has no colour
       left once the gradient is gone. */
    html .aw-lockup__second {
        background: none;
        color: var(--accent-text);
    }

    /* The dark bands flatten to plain text instead of a full page of ink. */
    html :is(.aw-footer, .aw-legal__footer, .aw-process, .aw-shop__how) {
        --bandaccent: var(--accent-text);

        background: #FFFFFF;
        color: var(--ink);
    }

    /* White on plum reads as nothing once the plum is not printed. */
    html :is(.aw-shopteaser__band, .aw-shopteaser__cta, .aw-shopcard__badge--sold) {
        background: #FFFFFF;
    }

    html :is(.aw-shopteaser__kicker,
        .aw-shopteaser__h2,
        .aw-shopteaser__text,
        .aw-shopteaser__cta,
        .aw-shopcard__badge--sold) {
        color: var(--ink);
    }

    html :is(.aw-shell, .aw-legal, .aw-shop, .aw-page) {
        min-block-size: 0;
        background: #FFFFFF;
    }

    /* Without their fill, buttons need an outline to still read as one. */
    html .aw-btn {
        border: 1px solid var(--line);
        box-shadow: none;
    }
}