/* Served outside the app shell: own faces and tokens, files from wwwroot/fonts. */
@font-face {
    font-family: "Libre Franklin";
    src: url("/fonts/libre-franklin-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Caslon Display";
    src: url("/fonts/libre-caslon-display-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* the wordmark: the TrueType the legacy header shipped, not a woff2 subset */
@font-face {
    font-family: "Young Serif";
    src: url("/fonts/YoungSerif-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Caslon Text";
    src: url("/fonts/libre-caslon-text-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Caslon Text";
    src: url("/fonts/libre-caslon-text-latin-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    --ink: #0b1a13;
    --forest: #0a1810;
    --pine: #13291d;
    --spruce: #16382a;
    --moss: #25563f;
    --gold: #c9a24b;
    --gold-warm: #e5c57e;
    --gold-light: #e6c879;
    --gold-deep: #c29a45;
    --gold-soft: #e0c074;
    --paper: #f4ead7;
    --sand: #c7bca8;
    --parchment: #f3ebda;
    --brass: #9c7a33;
    --cocoa: #6e5f52;
    --bark: #22302a;
    --border: #d8c9b0;
    --slate: #84968a;
    --sage-light: #9fb1a4;

    /* the heritage chrome — the header and the drawer — names its own paper,
       so the one drawer resolves to the same colour in both stylesheets */
    --chrome-text: #f4ead7;
    --scrim: rgba(6, 14, 9, 0.62);

    --frieze-name: rgba(231, 210, 156, 0.34);
    --frieze-title: rgba(231, 210, 156, 0.3);
    --rule: rgba(244, 234, 215, 0.32);
    --rule-soft: rgba(244, 234, 215, 0.22);
    --rule-faint: rgba(244, 234, 215, 0.16);
    --gold-soft-line: rgba(224, 192, 116, 0.5);
    --gold-glow: rgba(201, 162, 75, 0.32);
    --moss-glow: rgba(37, 86, 63, 0.35);

    --ff: "Libre Franklin", system-ui, sans-serif;
    --ff-display: "Libre Caslon Display", Georgia, serif;
    --ff-text: "Libre Caslon Text", Georgia, serif;
    --ff-brand: "Young Serif", var(--ff-display);

    /* one display scale for the hero and the closing — the one line to retune */
    --display: clamp(38px, calc(29.34px + 3.935vw), 86px);
}

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

[hidden] { display: none !important; }

/* dark green so an iOS rubber-band pull shows pine, not a beige flash */
html {
    background-color: var(--pine);
}

body {
    margin: 0;
    font-family: var(--ff);
    color: var(--bark);
    background: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* the paper grain: an element, not body::after, for the reason site.css
   gives — Safari's edge search reads a pseudo-element as the body — and back
   on body::after while the menu is open, so the menu's edges take the
   document colour below */
.paper-grain,
body.sidebar-open::after {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 182px;
}
body.sidebar-open::after {
    content: "";
}
body.sidebar-open .paper-grain {
    display: none;
}

/* Past either end of the page iOS Safari clips what the page paints and fills
   the gap with the document's own background colour — under the status bar
   at the top, under the toolbar at the end. The page starts on the hero and
   ends on the closing band, so each end takes the colour its section reaches
   along that edge, averaged across the width, rather than the ink behind the
   page. hero.js marks the root .at-end once the reader is nearer the end. */
html:not(.at-end) body {
    background-color: color-mix(in srgb, var(--moss) 27%, var(--spruce));
}
html.at-end body {
    background-color: color-mix(in srgb, var(--forest) 29%, var(--spruce));
}
/* while the menu is open the clipped strips sit against the menu: the panel's
   spruce top at the page's top, its forest foot at the page's end */
html body.sidebar-open {
    background-color: color-mix(in srgb, var(--spruce) 73%, var(--pine));
}
html.at-end body.sidebar-open {
    background-color: color-mix(in srgb, var(--forest) 75%, var(--pine));
}

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: calc(var(--display) * 0.95);
    min-height: 100vh;
    min-height: 100svh;
    /* no overflow clip: the cycling word swaps inside this section */
    padding: 104px 0 80px;
    background:
        radial-gradient(120% 90% at 50% 100%, var(--moss-glow) 0%, transparent 60%),
        radial-gradient(135% 120% at 50% 32%, var(--moss) 0%, var(--spruce) 46%, var(--forest) 100%);
}

/* the copy centres between the friezes on half a display step above centre: the
   capped reservation below it is the lift, the flex gap its floor */
.hero::before { content: ""; order: 1; flex: 1 1 0; max-height: var(--display); margin-top: calc(var(--display) * -0.95); }
.hero > * { flex: none; }

/* the drifting pages, leaves, and gold motes behind the copy; hero.js sizes it */
.hero-drift {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 14px;
}

.hero-brand {
    display: flex;
    align-items: center;
    gap: 0;
    color: var(--paper);
    text-decoration: none;
}
.hero-brand img {
    display: block;
    width: 56px;
    height: 56px;
    filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.45));
}
.hero-brand span {
    margin-left: -3px;
    font-family: var(--ff-brand);
    font-size: 22px;
    letter-spacing: -0.01em;
}

.hero-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 1.5px solid var(--rule);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.hero-menu:hover,
.hero-menu:focus-visible {
    border-color: var(--gold);
}
.hero-menu i {
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: var(--gold-warm);
}

/* The one global drawer, and the only menu either runtime serves: the legacy
   heritage panel, dark pine behind a gold edge, sliding in from the right over
   a blurred scrim. Every rule from here to the drawer's call to action is the
   same text in site.css and home.css — one menu, not two that resemble each
   other. */
.sidebar-backdrop {
    position: fixed;
    right: 0;
    bottom: -140px;
    left: 0;
    height: calc(100% + 280px);
    z-index: 90;
    background: var(--scrim);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* the visibility waits out the fade, so the scrim is gone when it is done
       and never sits invisible over the page catching clicks */
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.sidebar-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.4s ease;
}

/* The panel runs 140px past each screen edge — the reach the scrim beside it
   already has — so it spans the whole physical screen even where iOS 26 keeps
   fixed boxes inside the safe area (WebKit 301108). Both edges get one
   treatment: the box anchors at the bottom reach that holds on iOS and its
   height carries the same reach past the top — no top inset for the engine
   to clamp — and the header's and footer's safe-area padding folds the
   overrun back into the content. No painted band, mask, or shadow covers
   either edge; the panel itself reaches. */
.sidebar-drawer {
    position: fixed;
    right: 0;
    bottom: -140px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: min(88vw, 374px);
    height: calc(100% + 280px);
    background-color: var(--pine);
    background-image: linear-gradient(180deg, var(--spruce) 0%, var(--pine) 46%, var(--forest) 100%);
    border-left: 1px solid rgba(201, 162, 75, 0.28);
    transform: translateX(calc(100% + 80px));
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.1, 1);
}
.sidebar-drawer.open {
    transform: translateX(0);
}

/* the pinned top zone: the mark and the wordmark against the close control,
   over the gold rule the legacy ruled under them */
.sidebar-header {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(162px + env(safe-area-inset-top, 0px)) 20px 22px;
    border-bottom: 1px solid rgba(201, 162, 75, 0.24);
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0;
    color: var(--chrome-text);
    text-decoration: none;
}
.sidebar-brand img {
    display: block;
    width: 42px;
    height: 42px;
    filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.45));
}
.sidebar-brand span {
    margin-left: -3px;
    font-family: var(--ff-brand);
    font-size: 23px;
    letter-spacing: -0.01em;
}

.sidebar-close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: none;
    border: 1px solid rgba(244, 234, 215, 0.18);
    border-radius: 50%;
    color: var(--sand);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.sidebar-close:hover {
    border-color: var(--gold);
    color: var(--gold-warm);
}

/* the scrolling middle, faded at both edges the way the legacy masked it, so a
   link half past the fold reads as more to come rather than as a cut */
.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 16px 10px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
}

.sidebar-section + .sidebar-section {
    margin-top: 24px;
}
.sidebar-section-label {
    margin: 0 0 8px 14px;
    color: var(--sand);
    font-family: var(--ff);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    opacity: 0.7;
    text-transform: uppercase;
}

.sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 2px;
    padding: 11px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--sand);
    font-family: var(--ff);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}
.sidebar-item:hover {
    background: rgba(244, 234, 215, 0.06);
    color: var(--chrome-text);
}

/* the legacy item reserves a 12px gap for an icon column; this is that column */
.sidebar-icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: inherit;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the page you are on, marked the way the legacy drawer marked it: a gold bar
   down the item's left edge, and the item itself lit */
.sidebar-item.active {
    background: rgba(201, 162, 75, 0.12);
    color: var(--chrome-text);
    font-weight: 600;
}
.sidebar-item.active::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--gold);
}
.sidebar-item:focus-visible,
.sidebar-close:focus-visible,
.sidebar-cta:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* the guest zone the legacy pinned to the foot of the drawer */
.sidebar-footer {
    flex: none;
    padding: 14px 16px calc(160px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(201, 162, 75, 0.24);
}

/* the drawer's call to action, full width: once at the head of the links and
   again in the guest footer, as the legacy served it */
.sidebar-cta {
    display: block;
    margin: 0 0 16px;
    padding: 14px 18px;
    background-image: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
    border-radius: 5px;
    color: var(--ink);
    font-family: var(--ff);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

body.sidebar-open {
    overflow: hidden;
}

.hero-copy {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: auto auto 0;
    padding: 0 20px;
    text-align: center;
}

.eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 clamp(18px, 3vh, 30px);
    color: var(--gold-warm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}
.eyebrow i {
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow i:last-child {
    background: linear-gradient(90deg, var(--gold), transparent);
}

.hero-copy h1 {
    margin: 0;
    color: var(--paper);
    font-family: var(--ff-display);
    font-size: var(--display);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.cycler {
    position: relative;
    display: inline-block;
    overflow: visible;
    vertical-align: baseline;
    text-align: center;
    color: var(--gold-warm);
    font-family: var(--ff-text);
    font-style: italic;
}

/* The word slides on `top` and fades on `color`: the compositor animates
   neither, so the glyph repaints in place instead of being cut against a layer. */
.cycler-word {
    position: relative;
    top: 0;
    display: inline-block;
    overflow: visible;
    white-space: nowrap;
    transition: top 560ms cubic-bezier(0.33, 0, 0.2, 1), color 560ms ease-in-out;
}
.cycler-word.leaving {
    top: -0.3em;
    color: transparent;
}
.cycler-word.entering {
    top: 0.3em;
    color: transparent;
    transition: none;
}

.cycler-measure {
    position: absolute;
    left: -9999px;
    top: 0;
    white-space: nowrap;
    visibility: hidden;
    pointer-events: none;
}

.motto {
    margin: clamp(16px, 2.6vh, 26px) 0 0;
    color: var(--sand);
    font-family: var(--ff-text);
    font-size: calc(var(--display) * 0.379);
    font-style: italic;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(26px, 4vh, 40px);
}

.cta {
    position: relative;
    display: inline-block;
    padding: 17px 32px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease,
        color 0.2s ease;
}

/* the magnet pulls this on its own tween, and inline-block keeps the text as it was */
.cta-label {
    display: inline-block;
}

.cta-gold {
    padding: 18px 34px;
    background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
    border: none;
    color: var(--ink);
    box-shadow: 0 10px 26px var(--gold-glow);
}

.cta-ghost {
    border: 1px solid var(--rule);
    color: var(--paper);
}

/* only the plain button lifts, and on translate: gsap owns .cta's transform */
.cta:not(.magnetic):hover {
    translate: 0 -1px;
}

.cta-ghost:hover,
.cta-ghost:focus-visible,
.cta-ghost:active {
    border-color: var(--gold-soft-line);
    color: var(--gold-soft);
}

.cta-compact {
    padding: 11px 20px;
    letter-spacing: 0.1em;
}

.frieze {
    position: relative;
    z-index: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent);
}

/* the closing band rides the fold edge at every height */
.frieze-titles { margin-top: auto; order: 2; }

.frieze-track {
    display: flex;
    width: max-content;
}

/* the track only loops seamlessly once hero.js has doubled its contents */
.frieze-track.looped {
    animation: frieze-scroll 68s linear infinite;
}

.frieze-titles .frieze-track.looped {
    animation-duration: 84s;
    animation-direction: reverse;
}

@keyframes frieze-scroll {
    to {
        transform: translateX(-50%);
    }
}

.frieze span {
    display: flex;
    align-items: center;
    gap: 1.6em;
    padding-right: 1.6em;
    white-space: nowrap;
}
.frieze span::after {
    color: var(--gold);
    font-size: 0.7em;
    opacity: 0.6;
}

.frieze-authors span {
    color: var(--frieze-name);
    font-size: clamp(13px, 1.5vw, 18px);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.frieze-authors span::after {
    content: "✦";
}

.frieze-titles span {
    color: var(--frieze-title);
    font-family: var(--ff-text);
    font-size: clamp(14px, 1.6vw, 20px);
    font-style: italic;
}
.frieze-titles span::after {
    content: "·";
    font-size: 1em;
}

.scroll-cue {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--slate);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}
.scroll-cue i {
    width: 1px;
    height: 30px;
    background: linear-gradient(180deg, var(--gold), transparent);
}

.curriculum {
    position: relative;
    padding: clamp(80px, 13vh, 150px) clamp(22px, 5vw, 64px);
    background: var(--parchment);
}

.botanical {
    display: block;
    width: clamp(56px, 7vw, 82px);
    height: auto;
    margin: 0 auto 22px;
    opacity: 0.92;
}

.kicker {
    margin: 0 0 18px;
    color: var(--brass);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-align: center;
    text-transform: uppercase;
}

.curriculum h2 {
    max-width: 1080px;
    margin: 0 auto clamp(40px, 7vh, 72px);
    font-family: var(--ff-display);
    font-size: clamp(40px, 4.8vw, 62px);
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1.04;
    text-align: center;
}

.parts {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.parts li {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: clamp(18px, 4vw, 52px);
    align-items: baseline;
    padding: clamp(26px, 4vh, 38px) 0;
    border-top: 1px solid var(--border);
}
.parts li:last-child {
    border-bottom: 1px solid var(--border);
}

.part-body {
    display: grid;
    gap: clamp(8px, 2vw, 40px);
}

.numeral {
    color: var(--brass);
    font-family: var(--ff-display);
    font-size: clamp(40px, 4.2vw, 62px);
    line-height: 1;
}

.parts h3 {
    margin: 0;
    font-family: var(--ff-display);
    font-size: clamp(25px, 2.5vw, 36px);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.05;
}
.parts p {
    margin: 0;
    color: var(--cocoa);
    font-family: var(--ff-text);
    font-size: 15.5px;
    line-height: 1.6;
}

.closing {
    position: relative;
    padding: clamp(80px, 13vh, 150px) 20px clamp(40px, 6vh, 70px);
    text-align: center;
    background:
        radial-gradient(135% 120% at 50% 32%, var(--moss) 0%, var(--spruce) 46%, var(--forest) 100%);
}

.closing-mark {
    width: calc(var(--display) * 2.14);
    height: calc(var(--display) * 2.14);
    filter: drop-shadow(0 6px 18px var(--gold-glow));
}

.closing h2 {
    max-width: 700px;
    margin: 8px auto 0;
    color: var(--paper);
    font-family: var(--ff-display);
    font-size: calc(var(--display) * 0.803);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.12;
}
.closing h2 em {
    color: var(--gold-warm);
    font-family: var(--ff-text);
}
.closing .motto {
    max-width: 780px;
    margin-inline: auto;
}

/* the phone stacks the pair; above 561px they share the wider label's track */
.closing .cta-row {
    display: grid;
    grid-auto-columns: 1fr;
    gap: 15px;
    margin-top: 38px;
}

.closing-login {
    margin: 34px 0 0;
    color: var(--sage-light);
    font-family: var(--ff-text);
    font-size: 15px;
    line-height: 1.5;
}
.closing-login a {
    border-bottom: 1px solid var(--gold-soft-line);
    color: var(--gold-soft);
    text-decoration: none;
}

.closing-footer {
    color: var(--sand);
    font-size: 13px;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    max-width: 1080px;
    margin: clamp(60px, 11vh, 110px) auto 0;
    padding-top: 26px;
    border-top: 1px solid var(--rule-faint);
}

.footer-brand {
    margin: 0;
    color: var(--paper);
    font-family: var(--ff-brand);
    font-size: 24px;
    line-height: 1;
}

.footer-blurb {
    margin: 18px 0 0;
    color: var(--slate);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.footer-instagram {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--rule-soft);
    border-radius: 9px;
    color: var(--sand);
    transition: color 140ms ease, border-color 140ms ease;
}
.footer-instagram:hover,
.footer-instagram:focus-visible {
    border-color: var(--gold-soft-line);
    color: var(--gold-soft);
}

.fineprint {
    max-width: 1080px;
    margin: 14px auto 0;
    color: var(--slate);
    font-size: 12px;
}
.fineprint a {
    color: var(--gold-warm);
}

@media (min-width: 561px) {
    .closing .cta-row {
        grid-auto-flow: column;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-brand img {
        width: 88px;
        height: 88px;
    }
    .hero-brand span {
        font-size: 28px;
    }

    .hero {
        padding-top: 136px;
    }
}

@media (min-width: 821px) {
    .hero-nav {
        padding: calc(18px + env(safe-area-inset-top, 0px)) 40px 18px;
    }
    .part-body {
        grid-template-columns: 1fr 1.3fr;
    }
}

/* past the 86px ceiling the same curve climbs on and the measure rides with it */
@media (min-width: 1441px) { .hero { --display: calc(29.34px + 3.935vw); } .hero-copy { max-width: calc(var(--display) * 8.14); } }

@media (prefers-reduced-motion: reduce) {
    .frieze-track.looped {
        animation: none;
    }

    .cta,
    .cycler-word,
    .footer-instagram,
    .sidebar-drawer,
    .sidebar-drawer.open,
    .sidebar-backdrop,
    .sidebar-backdrop.open {
        transition: none;
    }
}