/* =============================================================================
   KC Inks — main stylesheet
   Loads AFTER Bootstrap 5.3 (CDN). Everything here is an override or an addition.
   Depends on tokens.css.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Bootstrap overrides
   -------------------------------------------------------------------------- */
:root {
    --bs-primary: var(--kc-mauve);
    --bs-primary-rgb: 180, 137, 150;
    --bs-link-color: var(--kc-black);
    --bs-link-color-rgb: 17, 17, 17;
    --bs-link-hover-color: var(--kc-mauve-ink);
    --bs-body-bg: var(--kc-cream);
    --bs-body-color: var(--kc-black);
    --bs-body-font-family: var(--ff-body);
    --bs-body-font-size: var(--fs-base);
    --bs-body-line-height: var(--lh-body);
    --bs-border-color: var(--kc-taupe);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius);
    --bs-border-radius-lg: var(--radius);
    --bs-focus-ring-color: rgba(180, 137, 150, 0.55);
    --bs-emphasis-color: var(--kc-black);
}

.btn-primary {
    --bs-btn-bg: var(--kc-mauve);
    --bs-btn-border-color: var(--kc-mauve);
    --bs-btn-color: var(--kc-black);
    --bs-btn-hover-bg: var(--kc-mauve-deep);
    --bs-btn-hover-border-color: var(--kc-mauve-deep);
    --bs-btn-hover-color: var(--kc-black);
    --bs-btn-active-bg: var(--kc-mauve-deep);
    --bs-btn-active-border-color: var(--kc-mauve-deep);
    --bs-btn-active-color: var(--kc-black);
}

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--kc-cream);
    color: var(--kc-black);
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--ff-display);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
}

h1, .h1 { font-size: var(--fs-4xl); }
h2, .h2 { font-size: var(--fs-3xl); }
h3, .h3 { font-size: var(--fs-xl); }

h4, h5, h6 {
    font-family: var(--ff-body);
    font-weight: 600;
    line-height: var(--lh-snug);
}

p {
    max-width: var(--measure);
}

a {
    color: var(--kc-black);
    text-decoration-color: var(--kc-mauve);
    text-underline-offset: 0.2em;
    transition: color var(--transition);
}

a:hover {
    /* Ink, not the fill mauve: --kc-mauve-deep is only 3.2:1 on cream. */
    color: var(--kc-mauve-ink);
}

img {
    max-width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------------
   Focus — visible on every interactive element
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.btn-kc:focus-visible,
.btn-kc-outline:focus-visible,
.kc-chip:focus-visible {
    outline: 2px solid var(--kc-mauve);
    outline-offset: 2px;
    box-shadow: none;
}

/* Dark sections need a focus ring that survives on #111. */
.section-dark a:focus-visible,
.section-dark button:focus-visible,
.section-dark .btn:focus-visible,
.kc-header--dark a:focus-visible,
.kc-header--dark button:focus-visible {
    outline-color: var(--kc-mauve);
}

/* -----------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.kc-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

.kc-section {
    padding-block: var(--sp-section);
}

.section-dark {
    background-color: var(--kc-black);
    color: var(--kc-cream);
    padding-block: var(--sp-section);
}

.section-dark h1,
.section-dark h2,
.section-dark h3 {
    color: var(--kc-cream);
}

.section-dark p {
    color: var(--kc-cream);
}

.section-dark .kc-meta,
.section-dark .text-muted {
    color: var(--kc-taupe) !important;
}

.section-cream {
    background-color: var(--kc-cream);
    color: var(--kc-black);
    padding-block: var(--sp-section);
}

.section-cream-deep {
    background-color: var(--kc-cream-deep);
    color: var(--kc-black);
    padding-block: var(--sp-section);
}

/* Taupe is 6.9:1 on black but only 2.3:1 on cream, and .kc-meta appears on
   both. It therefore defaults to the readable ink and opts back into taupe on
   the dark sections, so a new use of the class is legible by default rather
   than illegible by default. */
.kc-meta {
    color: var(--kc-muted-ink);
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
}

/* -----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-kc,
.btn-kc-outline {
    display: inline-block;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--ls-button);
    line-height: 1;
    padding: var(--sp-4) var(--sp-7);
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn-kc {
    background-color: var(--kc-mauve);
    border-color: var(--kc-mauve);
    color: var(--kc-black);
}

.btn-kc:hover,
.btn-kc:active {
    background-color: var(--kc-mauve-deep);
    border-color: var(--kc-mauve-deep);
    color: var(--kc-black);
}

.btn-kc-outline {
    background-color: transparent;
    border-color: var(--kc-black);
    color: var(--kc-black);
}

.btn-kc-outline:hover,
.btn-kc-outline:active {
    background-color: var(--kc-black);
    color: var(--kc-cream);
}

/* Light variant, for use on .section-dark and the hero. */
.btn-kc-outline--light {
    border-color: var(--kc-cream);
    color: var(--kc-cream);
}

.btn-kc-outline--light:hover,
.btn-kc-outline--light:active {
    background-color: var(--kc-cream);
    color: var(--kc-black);
}

.btn-kc[disabled],
.btn-kc-outline[disabled],
.btn-kc.is-disabled {
    background-color: var(--kc-gray);
    border-color: var(--kc-gray);
    color: var(--kc-black);
    cursor: not-allowed;
    opacity: 0.7;
}

/* -----------------------------------------------------------------------------
   Rule — hairline divider with a centered diamond
   -------------------------------------------------------------------------- */
.rule {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    border: 0;
    margin-block: var(--sp-9);
    color: var(--kc-taupe);
    opacity: 1;
}

.rule::before,
.rule::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--kc-taupe);
}

.rule::marker {
    content: '';
}

.rule > .rule__glyph,
.rule-glyph {
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    line-height: 1;
    color: var(--kc-taupe);
}

/* When used as a bare <hr class="rule">, draw the diamond from a background. */
hr.rule {
    display: block;
    height: 1px;
    background-color: var(--kc-taupe);
    position: relative;
    overflow: visible;
}

hr.rule::before,
hr.rule::after {
    content: none;
}

hr.rule::after {
    content: '\2666';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--kc-cream);
    color: var(--kc-taupe);
    padding-inline: var(--sp-3);
    font-size: var(--fs-xs);
    line-height: 1;
}

.section-dark hr.rule::after {
    background-color: var(--kc-black);
}

/* -----------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.kc-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: var(--kc-cream);
    border-bottom: 1px solid var(--kc-taupe);
    transition: background-color var(--transition), border-color var(--transition);
}

/* Transparent over the hero on the homepage, until scrolled. */
.kc-header--transparent {
    background-color: transparent;
    border-bottom-color: transparent;
}

.kc-header--transparent .kc-nav__link,
.kc-header--transparent .kc-header__toggle {
    color: var(--kc-cream);
}

.kc-header.is-stuck {
    background-color: var(--kc-cream);
    border-bottom-color: var(--kc-taupe);
}

.kc-header.is-stuck .kc-nav__link,
.kc-header.is-stuck .kc-header__toggle {
    color: var(--kc-black);
}

.kc-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: var(--header-h);
    padding-block: var(--sp-3);
}

.kc-header__brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* The wordmark is a two-line lockup, so it needs more height than a single
   line of type would. Aspect is 2:1. */
.kc-header__logo {
    display: block;
    height: 54px;
    width: auto;
}

@media (min-width: 992px) {
    .kc-header__logo { height: 60px; }
}

/* The reversed-out logo shows only while the header is transparent. */
.kc-header__logo--light { display: none; }

.kc-header--transparent:not(.is-stuck) .kc-header__logo--dark  { display: none; }
.kc-header--transparent:not(.is-stuck) .kc-header__logo--light { display: block; }

.kc-nav {
    display: none;
    align-items: center;
    gap: var(--sp-6);
}

.kc-nav__link {
    font-family: var(--ff-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-display);
    text-decoration: none;
    color: var(--kc-black);
    padding-block: var(--sp-2);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition), color var(--transition);
}

.kc-nav__link:hover,
.kc-nav__link[aria-current='page'] {
    border-bottom-color: var(--kc-mauve);
    color: inherit;
}

.kc-header__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    color: var(--kc-black);
    cursor: pointer;
}

.kc-header__toggle span {
    display: block;
    height: 1.5px;
    width: 100%;
    background-color: currentColor;
}

@media (min-width: 992px) {
    .kc-nav { display: flex; }
    .kc-header__toggle { display: none; }
}

/* Pages other than the homepage start below the fixed header. */
.kc-page {
    padding-top: var(--header-h);
}

/* -----------------------------------------------------------------------------
   Mobile menu — full-screen overlay
   Opacity/visibility only, so prefers-reduced-motion can kill transforms safely.
   -------------------------------------------------------------------------- */
.kc-menu {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: var(--kc-black);
    color: var(--kc-cream);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Same reasoning as the lightbox: instant on open, deferred on close, so
       the overlay is focusable the moment it opens. */
    transition: opacity var(--transition), visibility 0s linear 240ms;
}

.kc-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--transition), visibility 0s linear 0s;
}

.kc-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-h);
    padding: var(--sp-3) var(--sp-5);
}

.kc-menu__close {
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    color: var(--kc-cream);
    font-size: var(--fs-xl);
    line-height: 1;
    cursor: pointer;
}

.kc-menu__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    padding: var(--sp-7) var(--sp-5) var(--sp-10);
}

.kc-menu__link {
    font-family: var(--ff-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-display);
    color: var(--kc-cream);
    text-decoration: none;
}

.kc-menu__link:hover {
    color: var(--kc-mauve);
}

body.kc-menu-open {
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.kc-footer {
    background-color: var(--kc-black);
    color: var(--kc-cream);
    padding-block: var(--sp-10) var(--sp-6);
}

.kc-footer a {
    color: var(--kc-cream);
    text-decoration: none;
}

.kc-footer a:hover {
    color: var(--kc-mauve);
}

.kc-footer__grid {
    display: grid;
    gap: var(--sp-8);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .kc-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

.kc-footer__logo {
    height: 76px;
    width: auto;
    margin-bottom: var(--sp-4);
}

.kc-footer__tagline {
    font-family: var(--ff-display);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--kc-taupe);
    max-width: 24ch;
}

.kc-footer__heading {
    font-family: var(--ff-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--kc-taupe);
    margin-bottom: var(--sp-4);
}

.kc-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.kc-footer__bar {
    margin-top: var(--sp-9);
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(168, 157, 147, 0.35);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--kc-taupe);
}

.kc-footer__bar a {
    color: var(--kc-taupe);
}

.kc-footer__bar-links {
    display: flex;
    gap: var(--sp-5);
}

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.kc-hero {
    position: relative;
    /* vh first so the hero still fills the screen where svh is unsupported;
       svh then refines it so mobile browser chrome does not cause a jump. */
    min-height: 100vh;
    min-height: 100svh;
    background-color: var(--kc-black);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.kc-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.kc-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
    display: block;
}

/* The artwork already lives on black with open space at the left, so it is
   shown near full strength and the type is set into the space it leaves,
   rather than washed out behind centred text. */
.kc-hero--image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg,
        rgba(17, 17, 17, 0.94) 0%,
        rgba(17, 17, 17, 0.86) 34%,
        rgba(17, 17, 17, 0.45) 62%,
        rgba(17, 17, 17, 0.25) 100%);
}

.kc-hero__inner {
    position: relative;
    z-index: 2;
    padding-block: var(--sp-12) var(--sp-11);
    text-align: center;
}

.kc-hero__logo {
    display: block;
    width: min(440px, 78vw);
    height: auto;
    margin: 0 auto var(--sp-6);
}

/* The hero leads with a positioning headline; the brand line has moved to the
   footer and the book CTA, where a signature belongs. A tagline cannot do both
   jobs at once — it either says what she does or it says who she is. */
.kc-hero__headline {
    font-family: var(--ff-display);
    font-size: var(--fs-3xl);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--kc-cream);
    max-width: 22ch;
    margin: 0 auto var(--sp-5);
}

.kc-hero__sub {
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
    color: var(--kc-taupe);
    max-width: 44ch;
    margin: 0 auto var(--sp-8);
}

.kc-hero__tagline {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--kc-taupe);
    max-width: 30ch;
    margin: 0 auto var(--sp-8);
}

.kc-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: center;
    margin: 0;
    max-width: none;
}

.kc-hero__cue {
    position: absolute;
    left: 50%;
    bottom: var(--sp-7);
    z-index: 2;
    width: 1px;
    height: 46px;
    background: linear-gradient(to bottom, rgba(243, 239, 233, 0), var(--kc-taupe));
}

@media (min-width: 992px) {
    /* The element already carries .kc-container, so it is on the same 1200px
       grid as the header and the rest of the site. It previously capped itself
       at 620px AND added a left padding derived from the viewport, which meant
       the text column got NARROWER as the screen got WIDER — at 1920px it was
       down to about 240px, which is what forced the tagline onto three lines
       and stacked the buttons. Left-align the children instead and let the
       container do the work, so the layout is identical at every width. */
    .kc-hero__inner {
        text-align: left;
    }

    .kc-hero__logo {
        margin-inline: 0;
        /* Grows with the screen so the mark keeps its presence on a wide
           monitor rather than shrinking into the corner. */
        width: clamp(380px, 30vw, 560px);
    }

    .kc-hero__headline {
        margin-inline: 0;
        font-size: var(--fs-4xl);
        max-width: 20ch;
    }

    .kc-hero__sub {
        margin-inline: 0;
        font-size: var(--fs-xl);
        max-width: 38ch;
    }

    .kc-hero__tagline {
        margin-inline: 0;
        font-size: var(--fs-xl);
        max-width: 26ch;
    }

    .kc-hero__cta { justify-content: flex-start; }
    .kc-hero__cue { left: var(--sp-7); }
}

/* -----------------------------------------------------------------------------
   Homepage blocks
   -------------------------------------------------------------------------- */
.kc-intro {
    position: relative;
    overflow: hidden;
}

.kc-intro__corner {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(120px, 18vw, 220px);
    height: auto;
    opacity: 0.35;
    pointer-events: none;
}

.kc-lede {
    font-size: var(--fs-lg);
    line-height: 1.6;
    max-width: 60ch;
}

.kc-feature-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(2, 1fr);
    margin-block: var(--sp-7);
}

@media (min-width: 768px) {
    .kc-feature-grid { grid-template-columns: repeat(3, 1fr); }
    .kc-feature-grid--four { grid-template-columns: repeat(4, 1fr); }
}

.kc-feature {
    position: relative;
    display: block;
    line-height: 0;
    background-color: var(--kc-black-soft);
}

.kc-feature img,
.kc-feature picture {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: opacity var(--transition);
}

.kc-feature:hover img {
    opacity: 0.85;
}

.kc-feature__price {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: var(--kc-black);
    color: var(--kc-cream);
    font-family: var(--ff-display);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    padding: var(--sp-2) var(--sp-3);
    line-height: 1;
}

.kc-section-cta {
    margin: 0;
    max-width: none;
}

.kc-split {
    display: grid;
    gap: var(--sp-8);
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .kc-split { grid-template-columns: 5fr 7fr; gap: var(--sp-10); }
}

.kc-split__media img {
    display: block;
    width: 100%;
    height: auto;
}

.kc-portrait-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    background-color: var(--kc-cream-deep);
    border: 1px solid var(--kc-taupe);
}

.kc-portrait-placeholder img {
    width: 120px;
    height: auto;
    opacity: 0.45;
}

/* --- The portrait, and its frame ------------------------------------------
   The photograph sits on two offset plates — a soft mauve block pushed down
   and left, a mauve hairline pushed up and right — with a fine-line botanical
   spray arcing out from behind its top-right corner. Layering it twice in
   opposite directions is what gives the picture somewhere to sit; the shadow
   alone only ever made it hover.

   Not an arch, which was the first thing tried. Her hair sits within a few
   pixels of the top edge of the crop, and every arch shallow enough to leave
   it intact was too shallow to read as an arch at all.

   The spray's room is bought as padding on this element rather than taken by
   hanging the artwork off the side, for two measured reasons:

     - to the right there is only the 64px grid gap before her copy starts, and
     - upward there is only the section's own padding, whose floor is 48px
       (--sp-section bottoms out at 3rem).

   So the overhang is 40px, which fits inside that floor at every viewport, and
   everything else lives inside the box. Nothing here can widen the page. */
.kc-portrait {
    /* Every offset in this block is derived from these two, so the frame can
       be retuned by changing them and nothing else. */
    --portrait-offset: var(--sp-6);
    --portrait-headroom: var(--sp-12);

    position: relative;
    isolation: isolate;
    padding:
        var(--portrait-headroom)
        var(--portrait-offset)
        var(--portrait-offset)
        var(--portrait-offset);
}

/* The solid plate, offset down and left. Mauve at low opacity rather than a
   hardcoded tint, so it stays tied to the palette. */
.kc-portrait::before {
    content: "";
    position: absolute;
    inset:
        calc(var(--portrait-headroom) + var(--portrait-offset))
        calc(var(--portrait-offset) * 2)
        0
        0;
    background-color: var(--kc-mauve);
    opacity: 0.28;
}

/* The hairline, offset up and right. */
.kc-portrait::after {
    content: "";
    position: absolute;
    inset:
        calc(var(--portrait-headroom) - var(--portrait-offset))
        0
        calc(var(--portrait-offset) * 2)
        calc(var(--portrait-offset) * 2);
    border: 1px solid var(--kc-mauve-ink);
    opacity: 0.55;
}

/* The photograph, and the only thing in here that is raised. Both plates and
   the spray stay at the default level, so the picture covers the parts of them
   that pass behind it instead of being crossed by a stray line. */
.kc-portrait__frame {
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: var(--shadow-lift);
}

/* Stated here as well as in .kc-split__media so the partial can be dropped
   anywhere later without arriving unstyled. */
.kc-portrait__frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* Scoped under .kc-portrait to outrank .kc-split__media img, which sets every
   image in that column to 100% and would otherwise blow the spray up to the
   full width of the photograph. */
.kc-portrait .kc-portrait__spray {
    position: absolute;
    top: calc(var(--sp-8) * -1);
    right: calc(var(--portrait-offset) * -1);
    width: 64%;
    height: auto;
    pointer-events: none;
}

/* One column below the breakpoint, so the media is as wide as the container
   and there is no grid gap to lean into. The overhang comes in to nothing and
   the headroom drops, because a phone cannot spare 96px of empty cream. */
@media (max-width: 767px) {
    .kc-portrait {
        --portrait-offset: var(--sp-5);
        --portrait-headroom: var(--sp-10);
    }

    .kc-portrait .kc-portrait__spray {
        top: calc(var(--sp-6) * -1);
        right: 0;
        width: 58%;
    }
}

.kc-divider {
    display: block;
    margin: var(--sp-9) auto;
    width: min(400px, 70%);
    height: auto;
    opacity: 0.8;
}

.kc-specialties {
    list-style: none;
    padding: 0;
    margin: var(--sp-5) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.kc-specialties li {
    font-family: var(--ff-display);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid var(--kc-taupe);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-5);
}

.kc-book-cta {
    text-align: center;
}

.kc-book-cta h2 {
    max-width: 26ch;
    margin: 0 auto var(--sp-5);
}

.kc-book-cta__lede {
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
    color: var(--kc-cream);
    max-width: 56ch;
    margin: 0 auto var(--sp-6);
}

/* The brand line signs off UNDER the button now, rather than competing with the
   heading above it. Smaller than it was for the same reason. */
.kc-book-cta__tagline {
    font-family: var(--ff-display);
    font-size: var(--fs-base);
    text-transform: uppercase;
    letter-spacing: var(--ls-display);
    color: var(--kc-taupe);
    margin: var(--sp-7) auto 0;
    max-width: 30ch;
}

/* -----------------------------------------------------------------------------
   Studio block and contact
   -------------------------------------------------------------------------- */
.kc-studio {
    display: grid;
    gap: var(--sp-7);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 768px) {
    .kc-studio:has(.kc-studio__map) { grid-template-columns: 1fr 1fr; }
}

.kc-studio__guest {
    font-size: var(--fs-sm);
    color: var(--kc-muted-ink);
    margin-bottom: var(--sp-1);
}

.kc-studio__name {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: var(--ls-display);
    margin-bottom: var(--sp-2);
}

.kc-studio__address,
.kc-studio__hours {
    margin-bottom: var(--sp-4);
}

.kc-studio__map img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--kc-taupe);
}

.kc-contact-grid {
    display: grid;
    gap: var(--sp-9);
    grid-template-columns: 1fr;
    margin-top: var(--sp-7);
}

@media (min-width: 768px) {
    .kc-contact-grid { grid-template-columns: 1fr 1fr; }
}

.kc-contact__heading,
.kc-studio h2 {
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    text-transform: uppercase;
    letter-spacing: var(--ls-display);
    margin-bottom: var(--sp-5);
}

.kc-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-7);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.kc-contact-list .kc-meta {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.kc-contact-list a {
    font-size: var(--fs-lg);
}

.kc-note {
    background-color: var(--kc-cream-deep);
    border-left: 2px solid var(--kc-mauve);
    padding: var(--sp-5);
}

.kc-note p {
    max-width: none;
}

/* -----------------------------------------------------------------------------
   Book page
   -------------------------------------------------------------------------- */
.kc-book .kc-container {
    max-width: 720px;
}

.kc-book__note {
    background-color: var(--kc-cream-deep);
    border-left: 2px solid var(--kc-mauve);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-7);
    max-width: none;
}

.kc-book__submit {
    width: 100%;
    border: 0;
    margin-top: var(--sp-4);
}

.kc-book__done {
    padding-block: var(--sp-7);
}

.kc-req {
    color: var(--kc-mauve-ink);
}

.kc-book .kc-field {
    margin-bottom: var(--sp-6);
}

.kc-book label,
.kc-book legend {
    display: block;
    font-family: var(--ff-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-2);
}

.kc-book input[type="text"],
.kc-book input[type="email"],
.kc-book input[type="tel"],
.kc-book select,
.kc-book textarea {
    width: 100%;
    padding: var(--sp-4);
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    color: var(--kc-black);
    background-color: #FFFFFF;
    border: 1px solid var(--kc-taupe);
    border-radius: var(--radius);
}

.kc-book textarea {
    resize: vertical;
}

.kc-book fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--sp-6);
}

.kc-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-right: var(--sp-6);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: var(--fs-base);
}

.kc-radio input {
    width: 18px;
    height: 18px;
    accent-color: var(--kc-mauve);
}

.kc-book .kc-field--check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

.kc-book .kc-field--check input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--kc-mauve);
    flex: 0 0 auto;
}

.kc-book .kc-field--check label {
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: var(--fs-base);
}

.kc-hint {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    /* Hints are instructions, not decoration: taupe is 2.3:1 on cream. */
    color: var(--kc-muted-ink);
}

.kc-error-text {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: #8E2F39;
}

.kc-field.has-error input,
.kc-field.has-error select,
.kc-field.has-error textarea {
    border-color: #8E2F39;
}

.kc-sms-disclosure {
    font-size: var(--fs-xs);
    /* Consent wording: it has to be readable, so ink rather than taupe. */
    color: var(--kc-muted-ink);
    line-height: 1.5;
    margin: calc(var(--sp-6) * -1 + var(--sp-2)) 0 var(--sp-6) 33px;
    max-width: 52ch;
}

/* Honeypot: off-canvas rather than display:none, so a bot that inspects
   computed styles still sees a normal field and fills it in. */
.kc-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kc-flash-ref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    background-color: var(--kc-cream-deep);
    border-left: 2px solid var(--kc-mauve);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-6);
}

.kc-flash-ref p {
    max-width: none;
}

.kc-flash-ref__close {
    background: none;
    border: 0;
    font-size: var(--fs-xl);
    line-height: 1;
    color: var(--kc-taupe);
    cursor: pointer;
    padding: 0 var(--sp-2);
}

.kc-flash-ref__close:hover {
    color: var(--kc-black);
}

.kc-flash {
    border: 1px solid var(--kc-taupe);
    border-left-width: 3px;
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-6);
}

.kc-flash--error {
    border-left-color: #8E2F39;
    background-color: #F8EFF0;
}

.kc-flash--error a {
    color: #8E2F39;
}

.kc-flash ul {
    padding-left: var(--sp-5);
}

/* The book page reuses the admin uploader component. */
.kc-book .kc-uploader__drop {
    border: 1px dashed var(--kc-taupe);
    border-radius: var(--radius);
    background-color: #FFFFFF;
    padding: var(--sp-7) var(--sp-5);
    text-align: center;
    cursor: pointer;
}

.kc-book .kc-uploader__drop:hover,
.kc-book .kc-uploader__drop.is-over {
    border-color: var(--kc-mauve);
}

.kc-book .kc-uploader__drop p {
    margin: 0;
    max-width: none;
}

.kc-book .kc-uploader input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.kc-book .kc-uploader__grid {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    margin-top: var(--sp-4);
}

.kc-book .kc-upload-item {
    border: 1px solid var(--kc-taupe);
    border-radius: var(--radius);
    background-color: #FFFFFF;
    padding: var(--sp-2);
}

.kc-book .kc-upload-item__thumb {
    aspect-ratio: 1 / 1;
    background-color: var(--kc-cream-deep);
    overflow: hidden;
    margin-bottom: var(--sp-2);
}

.kc-book .kc-upload-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kc-book .kc-upload-item__name,
.kc-book .kc-upload-item__msg {
    font-size: var(--fs-xs);
    color: var(--kc-muted-ink);
    margin: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kc-book .kc-upload-item__bar {
    height: 3px;
    background-color: var(--kc-cream-deep);
    overflow: hidden;
}

.kc-book .kc-upload-item__bar span {
    display: block;
    height: 100%;
    width: 0;
    background-color: var(--kc-mauve);
}

.kc-book .kc-upload-item.is-error { border-color: #8E2F39; }
.kc-book .kc-upload-item.is-error .kc-upload-item__msg { color: #8E2F39; }

.kc-book .kc-upload-item__retry {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    background: none;
    border: 1px solid var(--kc-black);
    border-radius: var(--radius);
    padding: var(--sp-1) var(--sp-3);
    cursor: pointer;
}

.kc-book .kc-uploader__ids { display: none; }

/* -----------------------------------------------------------------------------
   Booking flow
   -------------------------------------------------------------------------- */
.kc-steps {
    display: flex;
    gap: var(--sp-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-7);
    counter-reset: step;
    font-family: var(--ff-display);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.kc-steps li {
    counter-increment: step;
    flex: 1 1 0;
    padding: var(--sp-3) var(--sp-2);
    border-top: 2px solid var(--kc-gray);
    color: var(--kc-muted-ink);
    text-align: center;
}

.kc-steps li::before {
    content: counter(step) '. ';
}

.kc-steps li.is-current {
    border-top-color: var(--kc-mauve);
    color: var(--kc-black);
    font-weight: 600;
}

.kc-steps li.is-done {
    border-top-color: var(--kc-black);
    color: var(--kc-black);
}

.kc-step-heading {
    font-size: var(--fs-xl);
    margin-bottom: var(--sp-4);
}

.kc-step-heading:focus {
    outline: none;
}

.kc-step-heading:focus-visible {
    outline: 2px solid var(--kc-mauve);
    outline-offset: 4px;
}

.kc-tz-note {
    font-size: var(--fs-sm);
    color: var(--kc-muted-ink);
    background-color: var(--kc-cream-deep);
    border-left: 2px solid var(--kc-taupe);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-6);
    max-width: none;
}

/* --- day picker ----------------------------------------------------------- */
.kc-daypick {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-6);
    scrollbar-width: thin;
}

.kc-day {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 64px;
    padding: var(--sp-3) var(--sp-2);
    border: 1px solid var(--kc-taupe);
    border-radius: var(--radius);
    background-color: #FFFFFF;
    text-decoration: none;
    color: var(--kc-black);
    transition: border-color var(--transition), background-color var(--transition);
}

.kc-day:hover {
    border-color: var(--kc-mauve);
    color: var(--kc-black);
}

.kc-day.is-selected {
    background-color: var(--kc-mauve);
    border-color: var(--kc-mauve);
    color: var(--kc-black);
}

.kc-day__dow,
.kc-day__mon {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kc-day__num {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    line-height: 1;
    font-weight: 600;
}

/* --- slots ---------------------------------------------------------------- */
.kc-slots-heading {
    font-size: var(--fs-base);
    margin-bottom: var(--sp-4);
}

.kc-slots {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    margin-bottom: var(--sp-6);
}

.kc-slot {
    position: relative;
    display: block;
}

.kc-slot input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.kc-slot span {
    display: block;
    text-align: center;
    padding: var(--sp-3) var(--sp-2);
    border: 1px solid var(--kc-taupe);
    border-radius: var(--radius);
    background-color: #FFFFFF;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

.kc-slot span:hover {
    border-color: var(--kc-mauve);
}

.kc-slot input:checked + span {
    background-color: var(--kc-mauve);
    border-color: var(--kc-mauve);
    font-weight: 600;
}

.kc-slot input:focus-visible + span {
    outline: 2px solid var(--kc-mauve);
    outline-offset: 2px;
}

/* --- the chosen time and its countdown ------------------------------------ */
.kc-chosen {
    background-color: var(--kc-cream-deep);
    border-left: 2px solid var(--kc-mauve);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-6);
}

.kc-chosen p {
    max-width: none;
}

.kc-chosen__change {
    margin-left: var(--sp-3);
    font-size: var(--fs-sm);
}

.kc-hold-timer {
    font-size: var(--fs-xs);
    color: var(--kc-muted-ink);
    margin: var(--sp-2) 0 0;
}

.kc-hold-timer.is-warning {
    color: #8E2F39;
    font-weight: 600;
}

.kc-hold-timer.is-expired {
    color: #8E2F39;
    font-weight: 600;
}

/* --- confirm summary ------------------------------------------------------ */
.kc-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 var(--sp-6);
    border: 1px solid var(--kc-taupe);
    border-radius: var(--radius);
    background-color: #FFFFFF;
    padding: var(--sp-5);
}

@media (min-width: 560px) {
    .kc-summary { grid-template-columns: 160px 1fr; }
}

.kc-summary dt {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kc-muted-ink);
    padding-top: var(--sp-3);
}

.kc-summary dd {
    margin: 0;
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--kc-cream-deep);
}

@media (max-width: 559.98px) {
    .kc-summary dt { padding-top: var(--sp-4); }
    .kc-summary dd { border-bottom: 0; }
}

.kc-summary__idea {
    white-space: pre-wrap;
}

.kc-book__reference {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    letter-spacing: var(--ls-display);
}

.kc-confirm-actions {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.kc-legal .kc-container {
    max-width: 76ch;
}

.kc-legal h1 {
    font-size: var(--fs-3xl);
    margin-bottom: var(--sp-3);
}

.kc-legal h2 {
    font-size: var(--fs-lg);
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-3);
}

.kc-legal p,
.kc-legal li {
    max-width: none;
}

.kc-legal ul {
    margin-bottom: var(--sp-4);
}

.kc-legal li {
    margin-bottom: var(--sp-2);
}

.kc-legal__disclaimer {
    font-size: var(--fs-xs);
    color: var(--kc-muted-ink);
    letter-spacing: 0.04em;
    border: 1px solid var(--kc-taupe);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-7);
    max-width: none;
}

/* -----------------------------------------------------------------------------
   Gallery — portfolio and flash share this language
   -------------------------------------------------------------------------- */
.kc-portfolio__head {
    margin-bottom: var(--sp-7);
}

.kc-portfolio__head h1 {
    margin-bottom: var(--sp-2);
}

.kc-empty {
    color: var(--kc-taupe);
    font-size: var(--fs-lg);
    padding-block: var(--sp-9);
    max-width: 48ch;
}

.kc-empty a {
    color: var(--kc-cream);
    text-decoration-color: var(--kc-mauve);
}

/* --- filter chips --------------------------------------------------------- */
.kc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-7);
}

.kc-chip {
    font-family: var(--ff-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid var(--kc-taupe);
    border-radius: var(--radius);
    background-color: transparent;
    color: var(--kc-cream);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.kc-chip:hover {
    border-color: var(--kc-mauve);
}

.kc-chip.is-active {
    background-color: var(--kc-mauve);
    border-color: var(--kc-mauve);
    color: var(--kc-black);
}

/* Chips on a cream section, should one ever be used there. */
.section-cream .kc-chip {
    color: var(--kc-black);
}

/* --- masonry -------------------------------------------------------------- */
.kc-masonry {
    column-count: 1;
    column-gap: var(--sp-5);
}

@media (min-width: 576px) {
    .kc-masonry { column-count: 2; }
}

@media (min-width: 992px) {
    .kc-masonry { column-count: 3; }
}

.kc-tile {
    break-inside: avoid;
    margin: 0 0 var(--sp-5);
    display: block;
}

.kc-tile[hidden] {
    display: none;
}

.kc-tile__link {
    display: block;
    line-height: 0;
    background-color: var(--kc-black-soft);
}

.kc-tile__link img,
.kc-tile picture {
    display: block;
    width: 100%;
    height: auto;
}

.kc-tile__link:hover img {
    opacity: 0.88;
}

.kc-tile__link img {
    transition: opacity var(--transition);
}

.kc-tile__caption {
    font-size: var(--fs-xs);
    color: var(--kc-taupe);
    letter-spacing: 0.04em;
    padding-top: var(--sp-2);
    line-height: 1.4;
}

/* --- flash ---------------------------------------------------------------- */
.kc-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-7);
    color: var(--kc-cream);
    font-size: var(--fs-sm);
}

.kc-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--kc-mauve);
}

.kc-flash-grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.kc-flash-card[hidden] {
    display: none;
}

.kc-flash-card {
    display: flex;
    flex-direction: column;
    background-color: var(--kc-black-soft);
    border: 1px solid rgba(168, 157, 147, 0.28);
    border-radius: var(--radius);
    overflow: hidden;
}

.kc-flash-card__media {
    position: relative;
    line-height: 0;
    background-color: var(--kc-black);
}

.kc-flash-card__media img,
.kc-flash-card__media picture {
    display: block;
    width: 100%;
    height: auto;
}

/* Claimed pieces stay visible, banded rather than hidden. */
.kc-ribbon {
    position: absolute;
    top: var(--sp-4);
    right: 0;
    background-color: var(--kc-taupe);
    color: var(--kc-black);
    font-family: var(--ff-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
    padding: var(--sp-2) var(--sp-4);
}

.kc-flash-card__body {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    flex: 1 1 auto;
}

.kc-flash-card__title {
    font-family: var(--ff-display);
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--kc-cream);
    margin: 0;
}

.kc-flash-card__price {
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    color: var(--kc-cream);
    margin: 0 0 var(--sp-2);
}

.kc-flash-card__cta {
    margin-top: auto;
    text-align: center;
    padding: var(--sp-3) var(--sp-4);
}

/* --- lightbox ------------------------------------------------------------- */
.kc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background-color: rgba(10, 10, 10, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-7) var(--sp-5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Visibility flips instantly on open and only after the fade on close.
       Transitioning it in both directions leaves the dialog unfocusable for a
       frame or two, which silently defeats the focus trap. */
    transition: opacity var(--transition), visibility 0s linear 240ms;
}

.kc-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--transition), visibility 0s linear 0s;
}

body.kc-lightbox-open {
    overflow: hidden;
}

.kc-lightbox__figure {
    margin: 0;
    max-width: min(1100px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.kc-lightbox__figure picture,
.kc-lightbox__figure img {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    margin-inline: auto;
}

.kc-lightbox__caption {
    color: var(--kc-taupe);
    font-size: var(--fs-sm);
    text-align: center;
}

.kc-lightbox__close,
.kc-lightbox__nav {
    position: absolute;
    background: none;
    border: 0;
    color: var(--kc-cream);
    cursor: pointer;
    line-height: 1;
    padding: var(--sp-3);
}

.kc-lightbox__close {
    top: var(--sp-4);
    right: var(--sp-4);
    font-size: var(--fs-2xl);
}

.kc-lightbox__nav {
    top: 50%;
    font-size: var(--fs-4xl);
    width: 56px;
}

.kc-lightbox__nav--prev { left: var(--sp-2); }
.kc-lightbox__nav--next { right: var(--sp-2); }

.kc-lightbox__close:hover,
.kc-lightbox__nav:hover {
    color: var(--kc-mauve);
}

/* -----------------------------------------------------------------------------
   Error pages
   -------------------------------------------------------------------------- */
.kc-error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    text-align: center;
}

.kc-error-page .kc-container {
    max-width: 46rem;
}

.kc-error-page__code {
    font-family: var(--ff-display);
    font-size: var(--fs-4xl);
    color: var(--kc-taupe);
    letter-spacing: 0.1em;
    line-height: 1;
    margin: 0 0 var(--sp-3);
    max-width: none;
}

.kc-error-page .kc-empty {
    margin-inline: auto;
    padding-block: var(--sp-5);
}

.kc-error-page .kc-hero__cta {
    justify-content: center;
}

/* -----------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    /* Decorative transforms only; nothing structural depends on these. */
    .btn-kc:hover,
    .btn-kc-outline:hover,
    .kc-card:hover,
    .kc-card:hover img {
        transform: none !important;
    }
}

/* -----------------------------------------------------------------------------
   Long-form copy

   The About page is the only page on the site with real reading on it, so it
   gets a measure narrow enough to read comfortably rather than the full grid.
   -------------------------------------------------------------------------- */
.kc-prose {
    max-width: 68ch;
}

.kc-prose h2 {
    margin-bottom: var(--sp-5);
}

.kc-prose p {
    margin-bottom: var(--sp-5);
}

.kc-prose p:last-child {
    margin-bottom: 0;
}

/* The five promises about the chair. Each one is a commitment, so they are set
   as statements rather than bullets — no marker, a rule between them. */
.kc-promises {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-6);
    max-width: var(--measure);
}

.kc-promises li {
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--kc-gray);
}

.kc-promises li:first-child {
    border-top: 1px solid var(--kc-gray);
}

.kc-promises strong {
    font-family: var(--ff-display);
    letter-spacing: 0.03em;
}

.kc-wont {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-5);
    max-width: var(--measure);
}

.kc-wont li {
    position: relative;
    padding: var(--sp-3) 0 var(--sp-3) var(--sp-6);
    border-bottom: 1px solid var(--kc-gray);
}

.kc-wont li::before {
    content: '\00d7';
    position: absolute;
    left: 0;
    top: var(--sp-3);
    font-size: var(--fs-lg);
    line-height: 1.2;
    color: var(--kc-mauve-ink);
}

/* Intro paragraph under a page heading. Used on the dark portfolio and flash
   pages today, so it needs to be cream THERE — but a class whose only colour is
   cream is invisible the moment somebody puts it on a cream section. Same
   arrangement as .kc-meta: readable by default, light only where the background
   is dark. */
.kc-portfolio__intro {
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
    color: var(--kc-black);
    max-width: 58ch;
    margin: var(--sp-4) 0 var(--sp-3);
}

.section-dark .kc-portfolio__intro {
    color: var(--kc-cream);
}

.kc-book__intro {
    max-width: 60ch;
    margin-bottom: var(--sp-7);
}