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

/* The attribute always wins. The islands show and hide with `hidden`, and a component's own
   `display` would otherwise override it: a sold design once offered its cart button that way. */
[hidden] {
    display: none !important;
}

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);
}

/* Two rings, so focus shows on every ground the site has: the ink outside, the page's own ground
   just inside it. One rose ring vanished on the rose band (1.1:1) and on the dark footer (2.8:1);
   now whichever of the two differs from what they sit on stands out, in either theme. A surface
   of its own colour sets `--focus-ring` and `--focus-halo`, as the rose band does. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--focus-ring, var(--ink));
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--focus-halo, var(--bgsolid));
}

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:not(:disabled) {
        background: var(--btnbgH);
        color: var(--btnink);
    }

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

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

.aw-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

.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);
}

/* A field shows its label above it, as the withdrawal form does: a placeholder is a hint that is
   gone the moment someone types, and most fields had nothing else on screen to name them. */
.aw-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aw-field__label {
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--ink);
    text-align: start;
}

::placeholder {
    color: var(--muted);
    opacity: 1;
}

.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. Should the script
   never arrive, the failsafe animation hands them back after three seconds;
   the script stops it for every reveal the moment it starts watching. Reduced
   motion shows everything at once anyway, so there nothing waits on it. */
@media (prefers-reduced-motion: no-preference) {
    html.js [data-reveal] {
        opacity: 0;
        translate: 0 22px;
        animation: awRevealFailsafe .7s cubic-bezier(.22, .61, .36, 1) 3s forwards;
    }

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

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

    html.aw-reveal-watching [data-reveal] {
        animation: none;
    }
}

@keyframes awRevealFailsafe {
    to {
        opacity: 1;
        translate: 0 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);
}

.aw-coming__legal {
    display: flex;
    gap: 18px;
}

.aw-notify__privacy {
    margin-block-start: 14px;
    max-inline-size: 480px;
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--muted);
}

@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;
}

/* Five links do not fit a phone's width in one row, least of all in Bosnian: they wrap. */
.aw-legal__footerlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}

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

/* The right of withdrawal has to be unmistakable, not one muted label among the legal ones,
   so it keeps the band's full-strength ink and an underline that says it does something. */
.aw-legal__footer a.aw-legal__footerlink--wd {
    color: var(--bandink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

@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: #65606A;
        --soft: #6C666E;
        --bandink: #332F38;
        --bandmuted: #65606A;
        --ghostink: #5C5660;
        --btnink: #332F38;

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

        --line: #D9C3C7;
        --inputline: #8C7A81;
        --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;
    }
}