/**
 * Oasis by ELEVEN28 — the outward-facing page (/oasis/)
 *
 * Oasis is the part of ELEVEN28 that outsiders can follow, so it borrows the
 * house's materials and loosens its manners:
 *
 *   Kept from ELEVEN28   Warm Paper and Near-Black Ink, the ink hairline, the
 *                        frosted header pill, Sweet Sans Pro for labels, and
 *                        the circular arrow (used once, pointing at the house).
 *   Oasis's own          The logo's two voices: heavy sentence-case display
 *                        (TT Commons Pro Black, matched to Klein Black in the
 *                        wordmark) over tracked Sweet Sans; the Oasis PDF's
 *                        cocoa, cream and deep sea; full pills, tactile
 *                        controls with a pressed edge, and motion that is
 *                        allowed to travel.
 *
 * Self-contained: this sheet does not load theme.css, so nothing here can
 * leak into the house pages and nothing there can reach in.
 */

@font-face { font-family: 'Oasis TT'; src: url('../oasis/fonts/oasis-tt-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oasis TT'; src: url('../oasis/fonts/oasis-tt-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oasis TT'; src: url('../oasis/fonts/oasis-tt-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oasis TT'; src: url('../oasis/fonts/oasis-tt-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oasis Sweet'; src: url('../oasis/fonts/oasis-sweet-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oasis Sweet'; src: url('../oasis/fonts/oasis-sweet-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
    --paper: #F8F2E5;      /* ELEVEN28 Warm Paper */
    --paper-hi: #FFFBF3;   /* the slip and raised controls */
    --ink: #03090D;        /* ELEVEN28 Near-Black Ink */
    --cream: #F9E9D0;      /* Oasis cream */
    --cocoa: #65413A;      /* Oasis cocoa: 7.9:1 on paper */
    --sea: #0B2532;        /* Oasis deep sea */
    --hair: rgba(3, 9, 13, .376);   /* the ink hairline, #03090D60 */
    --hair-soft: rgba(3, 9, 13, .13);
    --cream-hair: rgba(249, 233, 208, .28);

    --display: 'Oasis TT', 'TT Commons Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text: 'Oasis TT', 'TT Commons Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --label: 'Oasis Sweet', 'Sweet Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --gutter: clamp(16px, 3.4vw, 56px);
    --radius: 16px;
    --header-h: 64px;
}

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

/* Components set their own display; [hidden] must still win. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1.0625rem/1.45 var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--cream); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }

.o-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.o-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.o-skip {
    position: fixed; top: 12px; left: 12px; z-index: 100;
    padding: .7em 1em; border-radius: 999px;
    background: var(--ink); color: var(--cream); text-decoration: none;
    transform: translateY(-160%); transition: transform .3s var(--ease);
}
.o-skip:focus { transform: none; }

/* ---------- type ---------- */

.o-label {
    margin: 0;
    font: 500 .6875rem/1.25 var(--label);
    letter-spacing: .2em;
    text-transform: uppercase;
}

.o-display {
    margin: 0;
    font: 900 clamp(3rem, 8.6vw, 9rem)/.88 var(--display);
    letter-spacing: -.04em;
    text-wrap: balance;
}

.o-h2 {
    margin: 0;
    font: 900 clamp(2.5rem, 6.2vw, 6rem)/.9 var(--display);
    letter-spacing: -.038em;
    text-wrap: balance;
}

/* ---------- buttons ---------- */

/* Tactile: a pressed lower edge drawn inside the button, not a drop shadow.
   It travels a pixel on press, which is the whole effect. */
.o-btn {
    --bg: var(--ink);
    --fg: var(--cream);
    --edge: rgba(0, 0, 0, .38);
    --lip: rgba(255, 255, 255, .12);
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: 1.02em 1.45em .98em;
    border: 0;
    border-radius: 999px;
    background: var(--bg);
    color: var(--fg);
    font: 700 1rem/1 var(--display);
    letter-spacing: -.005em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 0 -2.5px 0 var(--edge), inset 0 1px 0 var(--lip);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .3s ease, color .3s ease;
    -webkit-tap-highlight-color: transparent;
}
.o-btn:hover { transform: translateY(-1px); }
.o-btn:active { transform: translateY(1.5px); box-shadow: inset 0 -.5px 0 var(--edge), inset 0 1px 0 var(--lip); }
.o-btn[disabled] { opacity: .55; cursor: progress; transform: none; }
.o-btn--sm { padding: .78em 1.05em .74em; font-size: .9rem; }
.o-btn--cream { --bg: var(--cream); --fg: var(--ink); --edge: rgba(101, 65, 58, .45); --lip: rgba(255, 255, 255, .6); }
.o-btn--ghost {
    background: transparent;
    color: currentColor;
    box-shadow: inset 0 0 0 1px var(--hair);
}
.o-btn--ghost:active { box-shadow: inset 0 0 0 1px var(--hair); }
.o-btn__icon { width: 1.1em; height: 1.1em; flex: none; }

.o-textbtn {
    padding: .4em 0;
    border: 0;
    background: none;
    font: 500 .95rem/1.2 var(--text);
    color: var(--cocoa);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(101, 65, 58, .35);
    text-underline-offset: .25em;
    transition: color .25s ease, text-decoration-color .25s ease;
}
.o-textbtn:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---------- header: the house's glass pill, in daylight ---------- */

.o-header {
    position: fixed;
    inset: 12px 0 auto;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: 0 12px;
    pointer-events: none;
}

.o-header__pill {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(44rem, 100%);
    padding: 6px 6px 6px 20px;
    border-radius: 999px;
    border: 1px solid rgba(3, 9, 13, .08);
    background: rgba(248, 242, 229, .64);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    color: var(--ink);
    transition: background-color .45s ease, color .45s ease, border-color .45s ease, transform .6s var(--ease);
}

.o-header.is-dark .o-header__pill {
    background: rgba(3, 9, 13, .3);
    border-color: rgba(249, 233, 208, .14);
    color: var(--cream);
}
.o-header.is-dark .o-btn { --bg: var(--cream); --fg: var(--ink); --edge: rgba(101, 65, 58, .45); --lip: rgba(255, 255, 255, .6); }

.o-header__logo { display: block; flex: none; color: inherit; }
.o-header__logo svg { height: 21px; width: auto; fill: currentColor; }

.o-header__links {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: clamp(16px, 2.4vw, 30px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.o-header__links a {
    font: 500 .97rem/1 var(--text);
    text-decoration: none;
    opacity: .78;
    transition: opacity .25s ease;
}
.o-header__links a:hover { opacity: 1; }

@media (max-width: 560px) {
    .o-header__links { display: none; }
    .o-header__pill { justify-content: space-between; }
}

/* ---------- hero ---------- */

.o-hero { position: relative; height: 290vh; }

.o-hero__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: var(--ink);
    isolation: isolate;
}

.o-hero__reel {
    position: absolute;
    inset: 0;
    z-index: 0;            /* keeps the stills' own z-index under the paper and scrim */
    overflow: hidden;
    background: var(--ink);
}
.o-hero__still {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.o-hero__still.is-on { opacity: 1; }
.o-hero__still img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    will-change: transform;
}

.o-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(3, 9, 13, .28) 0%, rgba(3, 9, 13, 0) 32%),
        linear-gradient(0deg, rgba(3, 9, 13, .72) 0%, rgba(3, 9, 13, .18) 52%, rgba(3, 9, 13, 0) 78%);
    opacity: 0;
}

.o-hero__window {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.o-hero__paper { fill: var(--paper); }
.o-hero__byline { fill: var(--ink); }

.o-hero__static { display: none; }

.o-hero__corner {
    position: absolute;
    bottom: clamp(18px, 3.4vh, 32px);
    color: var(--ink);
    z-index: 2;
}
.o-hero__corner--left { left: var(--gutter); }
.o-hero__corner--right { right: var(--gutter); display: flex; align-items: center; gap: 12px; }
/* Below this the count line would run into the scroll hint, so it centres alone. */
@media (max-width: 960px) {
    .o-hero__corner--left { right: var(--gutter); text-align: center; }
    .o-hero__corner--right { display: none; }
}

.o-hero__tick {
    position: relative;
    width: 1px;
    height: 34px;
    overflow: hidden;
    background: var(--hair-soft);
}
.o-hero__tick::after {
    content: '';
    position: absolute;
    left: 0;
    top: -40%;
    width: 1px;
    height: 40%;
    background: var(--ink);
    animation: o-tick 2.2s var(--ease) infinite;
}
@keyframes o-tick { to { top: 100%; } }

.o-hero__caption {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: clamp(36px, 9vh, 104px);
    z-index: 2;
    max-width: 72rem;
    color: var(--cream);
    opacity: 0;
    visibility: hidden;
}
.o-hero__caption .o-label { margin-bottom: 22px; color: rgba(249, 233, 208, .82); }
.o-hero__caption .o-display { max-width: 9.5em; }
.o-hero__lede {
    max-width: 30rem;
    margin: clamp(18px, 2.6vh, 28px) 0 0;
    font: 500 clamp(1.06rem, 1.35vw, 1.3rem)/1.4 var(--text);
    color: rgba(249, 233, 208, .88);
    text-wrap: pretty;
}

/* No JavaScript: the logo, set plainly, with the line beneath it. */
.no-js .o-hero { height: auto; }
.no-js .o-hero__stage { position: relative; height: auto; min-height: 100svh; background: var(--paper); display: flex; flex-direction: column; justify-content: center; padding: 120px var(--gutter) 80px; }
.no-js .o-hero__reel, .no-js .o-hero__window, .no-js .o-hero__scrim, .no-js .o-hero__corner { display: none; }
.no-js .o-hero__static { display: flex; flex-direction: column; align-items: center; gap: 4vw; }
.no-js .o-hero__static svg:first-child { width: min(86vw, 1100px); fill: var(--ink); }
.no-js .o-hero__static svg:last-child { width: min(62vw, 790px); fill: var(--ink); }
.no-js .o-hero__caption { position: relative; inset: auto; margin-top: 12vh; opacity: 1; visibility: visible; color: var(--ink); }
.no-js .o-hero__caption .o-label, .no-js .o-hero__lede { color: var(--cocoa); }

/* Reduced motion: the window stays a window. No zoom, no playing film;
   the line sits beneath the logo on paper. */
.is-static .o-hero { height: auto; }
.is-static .o-hero__stage { position: relative; height: auto; min-height: 100svh; }
.is-static .o-hero__corner { display: none; }
.is-static .o-hero__caption {
    position: absolute;
    opacity: 1;
    visibility: visible;
    color: var(--ink);
}
.is-static .o-hero__caption .o-label, .is-static .o-hero__lede { color: var(--cocoa); }
.is-static .o-hero__caption .o-display { font-size: clamp(2.4rem, 5.6vw, 5.6rem); }

/* ---------- films ---------- */

.o-films {
    position: relative;
    z-index: 2;
    padding: clamp(96px, 15vh, 180px) var(--gutter) clamp(96px, 14vh, 160px);
    background: var(--paper);
}

.o-films__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    grid-template-areas: "label label" "title intro";
    align-items: end;
    gap: 22px clamp(24px, 4vw, 64px);
}
.o-films__eyebrow { grid-area: label; display: flex; flex-direction: column; gap: 10px; }
.o-films__eyebrow .o-label { color: var(--cocoa); }
.o-films__count {
    margin: 0;
    font: 500 1rem/1 var(--text);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.o-films__head .o-h2 { grid-area: title; }
@media (min-width: 821px) { .o-films__head .o-h2 span { display: block; } }
.o-films__aside { grid-area: intro; }
.o-films__intro {
    margin: 0;
    max-width: 24rem;
    font-size: clamp(1.05rem, 1.2vw, 1.2rem);
    line-height: 1.4;
    color: var(--cocoa);
    text-wrap: pretty;
}
.o-films__cta { margin-top: 24px; }
.o-hero__cta { margin-top: clamp(22px, 3.2vh, 34px); }

@media (max-width: 820px) {
    .o-films__head { grid-template-columns: 1fr; grid-template-areas: "label" "title" "intro"; }
}

.o-films__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin: clamp(40px, 6vh, 64px) calc(var(--gutter) * -1) 0;
    padding: 12px var(--gutter);
}

.o-chips {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    margin: -4px;
    padding: 4px;
}
.o-chips::-webkit-scrollbar { display: none; }

.o-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .42em;
    flex: none;
    padding: .62em 1.05em .58em;
    border: 1px solid var(--hair-soft);
    border-radius: 999px;
    background: transparent;
    font: 500 .97rem/1 var(--text);
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .15s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.o-chip:hover { border-color: var(--hair); }
.o-chip:active { transform: scale(.95); }
.o-chip span { font-size: .74em; color: var(--cocoa); font-variant-numeric: tabular-nums; transition: color .3s ease; }
.o-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.o-chip[aria-pressed="true"] span { color: rgba(249, 233, 208, .66); }

.o-films__tools { display: flex; align-items: center; gap: 18px; }

/* Segmented control with a sliding thumb. */
.o-seg {
    position: relative;
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: rgba(3, 9, 13, .065);
}
.o-seg button {
    position: relative;
    z-index: 1;
    padding: .55em 1.05em .5em;
    border: 0;
    border-radius: 999px;
    background: none;
    font: 500 .93rem/1 var(--text);
    color: rgba(3, 9, 13, .56);
    cursor: pointer;
    transition: color .3s ease;
}
.o-seg button[aria-pressed="true"] { color: var(--ink); }
.o-seg__thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: var(--w, 0);
    transform: translateX(var(--x, 3px));
    border-radius: 999px;
    background: var(--paper-hi);
    box-shadow: 0 1px 2px rgba(3, 9, 13, .1), inset 0 -1px 0 rgba(3, 9, 13, .06);
    transition: transform .5s var(--ease), width .5s var(--ease);
}

/* Switch. */
.o-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    font: 500 .93rem/1 var(--text);
    cursor: pointer;
}
.o-switch__track {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: rgba(3, 9, 13, .16);
    transition: background-color .3s ease;
}
.o-switch__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--paper-hi);
    box-shadow: 0 1px 2px rgba(3, 9, 13, .22);
    transition: transform .4s var(--ease);
}
.o-switch[aria-pressed="true"] .o-switch__track { background: var(--ink); }
.o-switch[aria-pressed="true"] .o-switch__knob { transform: translateX(14px); }

@media (max-width: 720px) {
    /* nowrap matters: a wrapping column flexbox sizes each line to the chips'
       full natural width and pushes the whole layout viewport sideways. */
    .o-films__bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .o-films__tools { justify-content: space-between; }
}

/* ---------- the wall ---------- */

.o-wall {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(34px, 3.6vw, 52px) clamp(14px, 1.6vw, 26px);
    margin-top: clamp(28px, 4vh, 44px);
}
@media (max-width: 1180px) { .o-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .o-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; } }

.o-wall[hidden], .o-film[hidden] { display: none; }

/* "View all": a quiet row under the grid, only when there are more films. */
.o-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: clamp(48px, 7vh, 80px);
    padding-top: clamp(28px, 4vh, 40px);
    border-top: 1px solid var(--hair-soft);
}
.o-more .o-label { color: var(--cocoa); font-variant-numeric: tabular-nums; }
.o-btn__down { width: .95em; height: .95em; flex: none; transition: transform .3s var(--ease); }
.o-btn:hover .o-btn__down { transform: translateY(2px); }

.o-film__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: #E4DACA;
    cursor: pointer;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}
.o-film__media img,
.o-film__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease), opacity .6s ease;
}
.o-film__media video { opacity: 0; }
.o-film.is-playing .o-film__media video { opacity: 1; }
@media (hover: hover) {
    .o-film:hover .o-film__media img,
    .o-film:hover .o-film__media video { transform: scale(1.04); }
}

.o-film__no,
.o-film__new {
    position: absolute;
    top: 10px;
    z-index: 2;
    padding: .62em .78em .56em;
    border-radius: 999px;
    background: rgba(3, 9, 13, .26);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--cream);
    font: 500 .6rem/1 var(--label);
    letter-spacing: .18em;
    text-transform: uppercase;
}
.o-film__no { left: 10px; }

.o-film__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
}
.o-film__title {
    margin: 0;
    font: 700 1.22rem/1.08 var(--display);
    letter-spacing: -.018em;
    text-wrap: balance;
}
.o-film__sub { margin: 5px 0 0; font-size: .95rem; line-height: 1.3; color: var(--cocoa); }
.o-film__price {
    flex: none;
    margin: 0;
    font: 500 .95rem/1.08 var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.o-film__price.is-muted { color: var(--cocoa); }

@media (max-width: 760px) {
    .o-film__meta { flex-direction: column; gap: 4px; padding-top: 10px; }
    .o-film__title { font-size: 1.02rem; }
    .o-film__sub { font-size: .86rem; margin-top: 2px; }
    .o-film__price { font-size: .88rem; }
}

/* Arrivals rise into place. Oasis may travel; the house only fades. */
[data-rise], .o-film {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .9s var(--ease), transform 1.1s var(--ease);
    transition-delay: var(--d, 0s);
}
.is-in[data-rise], .o-film.is-in { opacity: 1; transform: none; }
.no-js [data-rise], .no-js .o-film { opacity: 1; transform: none; }

/* ---------- the index ---------- */

.o-index {
    margin: clamp(28px, 4vh, 44px) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hair);
}
.o-index[hidden] { display: none; }
.o-index li[hidden] { display: none; }

.o-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 2.3fr) minmax(0, 1.5fr) minmax(0, 8rem);
    align-items: baseline;
    gap: 20px;
    width: 100%;
    padding: clamp(18px, 2.4vh, 26px) 0;
    border: 0;
    border-bottom: 1px solid var(--hair);
    background: none;
    text-align: left;
    cursor: pointer;
    transition: opacity .35s ease;
}
.o-row__no { font: 500 .66rem/1 var(--label); letter-spacing: .18em; color: var(--cocoa); }
.o-row__title {
    font: 900 clamp(1.55rem, 3vw, 3rem)/.98 var(--display);
    letter-spacing: -.035em;
    transition: transform .6s var(--ease);
}
.o-row__kind { font-size: 1rem; line-height: 1.3; color: var(--cocoa); }
.o-row__price { font: 500 1rem/1.2 var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.o-row__thumb { display: none; }

@media (hover: hover) {
    .o-index:hover .o-row { opacity: .32; }
    .o-index:hover .o-row:hover { opacity: 1; }
    .o-row:hover .o-row__title { transform: translateX(14px); }
}

@media (max-width: 760px) {
    .o-row { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; padding: 14px 0; }
    .o-row__thumb {
        display: block;
        grid-row: 1 / span 3;
        width: 56px;
        aspect-ratio: 9 / 16;
        border-radius: 8px;
        object-fit: cover;
        background: #E4DACA;
    }
    .o-row__no { grid-column: 2; }
    .o-row__title { grid-column: 2; font-size: 1.4rem; }
    .o-row__kind { grid-column: 2; font-size: .9rem; }
    .o-row__kind::after { content: ' · ' attr(data-price); color: var(--ink); }
    .o-row__price { display: none; }
}

/* Floating preview that follows the pointer over the index. */
.o-peek {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 40;
    width: clamp(180px, 15vw, 250px);
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;
    pointer-events: none;
    background: #E4DACA;
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity .35s ease;
}
.o-peek.is-on { opacity: 1; }
.o-peek img, .o-peek video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* "Open" disc that replaces the pointer over a film. */
.o-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 45;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    pointer-events: none;
    will-change: transform;
}
.o-cursor span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--cream);
    color: var(--ink);
    font: 500 .62rem/1 var(--label);
    letter-spacing: .18em;
    text-transform: uppercase;
    transform: scale(0);
    transition: transform .45s var(--ease);
}
.o-cursor.is-on span { transform: scale(1); }
@media (hover: none), (pointer: coarse) { .o-cursor, .o-peek { display: none; } }
@media (hover: hover) and (pointer: fine) { .has-cursor .o-film__media { cursor: none; } }

/* ---------- about: deep sea ---------- */

.o-about {
    position: relative;
    z-index: 2;
    padding: clamp(120px, 20vh, 240px) var(--gutter) clamp(110px, 17vh, 200px);
    background: var(--sea);
    color: var(--cream);
}
.o-about .o-label { color: rgba(249, 233, 208, .7); }

.o-about__statement {
    max-width: 17em;
    margin: clamp(28px, 4vh, 44px) 0 clamp(48px, 7vh, 80px);
    font: 900 clamp(2.15rem, 5.1vw, 5.1rem)/1 var(--display);
    letter-spacing: -.035em;
    text-wrap: pretty;
}
.o-about__statement p { margin: 0; }
.o-about__statement p + p { margin-top: .5em; }
.o-about__statement .o-word { opacity: .16; transition: opacity .2s linear; }
.no-js .o-about__statement .o-word, .is-static .o-about__statement .o-word { opacity: 1; }

/* The circular arrow, used once: pointing at the house, in the house's voice. */
.o-house-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font: 500 .8125rem/1 var(--label);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
}
.o-arrow { width: 22px; height: 22px; }
.o-arrow__disc { fill: var(--cream); transition: fill .3s ease; }
.o-arrow__glyph { fill: var(--sea); transition: fill .3s ease; }
.o-house-link:hover .o-arrow__disc { fill: transparent; stroke: var(--cream); stroke-width: 1; }
.o-house-link:hover .o-arrow__glyph { fill: var(--cream); }

/* ---------- show us: cocoa ---------- */

.o-showus {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end;
    gap: 40px clamp(32px, 6vw, 96px);
    padding: clamp(110px, 17vh, 200px) var(--gutter);
    background: var(--cocoa);
    color: var(--cream);
}
.o-showus .o-label { margin-bottom: 22px; color: rgba(249, 233, 208, .72); }
.o-showus .o-h2 { max-width: 8.5em; }
.o-btn__ne { width: .95em; height: .95em; flex: none; transition: transform .3s var(--ease); }
.o-btn:hover .o-btn__ne { transform: translate(1.5px, -1.5px); }
.o-showus__body p {
    max-width: 30rem;
    margin: 0 0 18px;
    font-size: clamp(1.08rem, 1.3vw, 1.3rem);
    line-height: 1.42;
    color: rgba(249, 233, 208, .9);
    text-wrap: pretty;
}
.o-showus__body p:last-of-type { margin-bottom: 30px; }
.o-showus__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.o-showus__aside { font-size: .95rem; color: rgba(249, 233, 208, .72); }

@media (max-width: 820px) { .o-showus { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */

.o-footer {
    position: relative;
    z-index: 2;
    padding: clamp(100px, 16vh, 180px) var(--gutter) 28px;
    background: var(--paper);
}
.o-footer > .o-label { color: var(--cocoa); }

.o-footer__handle {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 18px 0 clamp(28px, 4vh, 44px) -.04em;
    /* "@oasis.eleven" sets about 6.15em wide: fill the measure, edge to edge. */
    font: 900 min(calc((100vw - 2 * var(--gutter)) / 6.2), 19rem)/.86 var(--display);
    letter-spacing: -.05em;
    text-decoration: none;
    white-space: nowrap;
}
.o-footer__handle .o-ch {
    display: inline-block;
    transition: transform .6s var(--ease), color .4s ease;
    transition-delay: calc(var(--i) * 18ms);
}
@media (hover: hover) {
    .o-footer__handle:hover .o-ch { transform: translateY(-.07em); color: var(--cocoa); }
}

.o-footer__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.o-footer__base {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px 40px;
    margin-top: clamp(80px, 13vh, 150px);
    padding-top: 24px;
    border-top: 1px solid var(--hair);
    font-size: .88rem;
    line-height: 1.4;
    color: var(--cocoa);
}
.o-footer__lockup { display: grid; justify-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.o-footer__wordmark { width: 88px; fill: currentColor; }
.o-footer__byline { width: 64px; fill: currentColor; }
.o-footer__fine { max-width: 34rem; margin: 0; }
.o-footer__legal { margin: 0; white-space: nowrap; }
.o-footer__legal a { text-underline-offset: .2em; text-decoration-color: rgba(101, 65, 58, .4); }

@media (max-width: 820px) {
    .o-footer__base { grid-template-columns: 1fr; justify-items: start; }
    .o-footer__lockup { justify-items: start; }
}

/* ---------- sheet ---------- */

.o-sheet {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    overflow: hidden;
}
.o-sheet::backdrop {
    background: rgba(3, 9, 13, .46);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .45s ease;
}
.o-sheet.is-open::backdrop { opacity: 1; }

.o-sheet__inner {
    position: absolute;
    inset: 0;
    width: min(1120px, calc(100% - 32px));
    height: min(780px, calc(100% - 32px));
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
    border-radius: 24px;
    overflow: hidden;
    background: var(--paper);
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(.985);
    transition: opacity .45s var(--ease), transform .7s var(--ease);
}
.o-sheet.is-open .o-sheet__inner { opacity: 1; transform: none; }

.o-sheet__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(3, 9, 13, .06);
    cursor: pointer;
    transition: background-color .25s ease, transform .2s var(--ease);
}
.o-sheet__close:hover { background: rgba(3, 9, 13, .12); }
.o-sheet__close:active { transform: scale(.94); }

.o-sheet__media { position: relative; background: var(--ink); overflow: hidden; }
.o-sheet__media video,
.o-sheet__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.o-sheet__no {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: .62em .8em .56em;
    border-radius: 999px;
    background: rgba(3, 9, 13, .28);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--cream);
}

.o-sheet__body {
    position: relative;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(28px, 5vh, 56px) clamp(24px, 4vw, 56px) 28px;
}

.o-sheet__details { display: flex; flex-direction: column; min-height: 100%; }
.o-sheet__details[hidden] { display: none; }
.o-sheet__details > .o-label { color: var(--cocoa); padding-right: 48px; }
.o-sheet__title {
    margin: 16px 0 0;
    font: 900 clamp(2.1rem, 4vw, 3.6rem)/.92 var(--display);
    letter-spacing: -.036em;
    text-wrap: balance;
}
.o-sheet__sub { margin: 12px 0 0; font-size: 1.05rem; color: var(--cocoa); }

.o-sheet__price {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: clamp(22px, 3.4vh, 34px);
    padding: 16px 0;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}
.o-sheet__price .o-label { color: var(--cocoa); min-width: 6.5em; }
.o-sheet__price strong { font: 900 clamp(1.5rem, 2.4vw, 2rem)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.o-sheet__price[hidden] { display: none; }

.o-sheet__hook {
    margin: clamp(20px, 3vh, 30px) 0 0;
    font: 700 clamp(1.2rem, 1.6vw, 1.45rem)/1.25 var(--display);
    letter-spacing: -.012em;
    text-wrap: pretty;
}

.o-sheet__facts { margin: 18px 0 0; padding: 0; list-style: none; }
.o-sheet__facts li {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--hair-soft);
    font-size: 1rem;
}
.o-sheet__facts li::before {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: .5em;
    border-radius: 50%;
    background: var(--cocoa);
}

.o-sheet__note { margin: 16px 0 0; font-size: .92rem; line-height: 1.4; color: var(--cocoa); }
.o-sheet__note:empty { display: none; }

.o-sheet__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(24px, 3.6vh, 34px); }
.o-sheet__story { margin: 0; font: 700 1.05rem/1.2 var(--display); color: var(--cocoa); }

.o-sheet__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: auto;
    padding-top: clamp(28px, 5vh, 48px);
}
.o-sheet__credit { margin: 0; font: 500 .6rem/1.4 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--cocoa); }
.o-sheet__nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.o-sheet__nav .o-textbtn[aria-label] { font-size: 1.2rem; text-decoration: none; padding: .2em .3em; }

/* Offer mode: no film, just the slip, centred. */
.o-sheet.is-offer .o-sheet__inner { grid-template-columns: 1fr; width: min(620px, calc(100% - 32px)); height: min(820px, calc(100% - 32px)); }
.o-sheet.is-offer .o-sheet__media { display: none; }

@media (max-width: 760px) {
    .o-sheet__inner {
        inset: auto 0 0;
        width: 100%;
        height: calc(100% - 28px);
        grid-template-columns: 1fr;
        grid-template-rows: 40svh minmax(0, 1fr);
        border-radius: 22px 22px 0 0;
        transform: translate3d(0, 60px, 0);
    }
    .o-sheet.is-offer .o-sheet__inner { width: 100%; height: calc(100% - 28px); grid-template-rows: minmax(0, 1fr); }
    .o-sheet__close { background: rgba(248, 242, 229, .8); }
    .o-sheet.is-offer .o-sheet__close { background: rgba(3, 9, 13, .06); }
}

/* ---------- the slip ---------- */

/* An enquiry slip: raised paper, a perforation, and it prints downward
   when it appears. */
.o-slip {
    position: relative;
    padding: clamp(24px, 3.4vh, 32px) clamp(22px, 2.6vw, 32px) 26px;
    border-radius: 18px;
    background: var(--paper-hi);
    box-shadow: 0 0 0 1px rgba(3, 9, 13, .06), 0 1px 2px rgba(3, 9, 13, .05);
}
.o-slip[hidden], .o-done[hidden] { display: none; }
.o-slip.is-printing { animation: o-print .9s var(--ease) both; }
@keyframes o-print {
    from { clip-path: inset(0 0 100% 0 round 18px); transform: translateY(-14px); }
    to { clip-path: inset(0 0 0 0 round 18px); transform: none; }
}

.o-slip__head .o-label { color: var(--cocoa); }
.o-slip__title {
    margin: 12px 0 0;
    font: 900 clamp(1.7rem, 3vw, 2.4rem)/.95 var(--display);
    letter-spacing: -.032em;
    text-wrap: balance;
}
.o-slip__lede { margin: 12px 0 0; color: var(--cocoa); line-height: 1.4; }

.o-slip__perf {
    position: relative;
    height: 24px;
    margin: 18px calc(clamp(22px, 2.6vw, 32px) * -1) 4px;
}
.o-slip__perf::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 50%;
    border-top: 1.5px dashed rgba(3, 9, 13, .2);
}
.o-slip__perf::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 0 50%, var(--paper) 11px, transparent 11.5px),
        radial-gradient(circle at 100% 50%, var(--paper) 11px, transparent 11.5px);
}

.o-field { position: relative; margin-top: 8px; }
.o-field[hidden] { display: none; }
.o-field input,
.o-field textarea {
    display: block;
    width: 100%;
    padding: 24px 0 9px;
    border: 0;
    border-bottom: 1px solid var(--hair);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 500 1.06rem/1.3 var(--text);
    outline: none;
    resize: vertical;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.o-field textarea { min-height: 84px; }
.o-field label {
    position: absolute;
    left: 0;
    top: 24px;
    font: 400 1.06rem/1.3 var(--text);
    color: rgba(3, 9, 13, .56);
    pointer-events: none;
    transform-origin: left top;
    transition: transform .35s var(--ease), color .25s ease;
}
.o-field label em { font-style: normal; font-size: .8em; color: rgba(3, 9, 13, .4); margin-left: .3em; }
.o-field input:focus,
.o-field textarea:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.o-field input:focus + label,
.o-field textarea:focus + label,
.o-field input:not(:placeholder-shown) + label,
.o-field textarea:not(:placeholder-shown) + label { transform: translateY(-19px) scale(.72); color: var(--cocoa); }
.o-field.is-invalid input,
.o-field.is-invalid textarea { border-bottom-color: #9B2C1F; box-shadow: 0 1px 0 #9B2C1F; }
.o-field__error { margin: 6px 0 0; font-size: .85rem; color: #9B2C1F; }

.o-slip__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.o-slip__status { min-height: 1.4em; margin: 14px 0 0; font-size: .95rem; color: var(--cocoa); }
.o-slip__status.is-error { color: #9B2C1F; }
.o-slip__alt { margin: 6px 0 0; font-size: .9rem; color: var(--cocoa); }
.o-slip__alt a { color: var(--ink); text-underline-offset: .2em; }
.o-inline-ne { display: inline-block; width: .78em; height: .78em; margin-left: .25em; vertical-align: -.02em; }

.o-sheet.is-asking .o-sheet__details { display: none; }

/* Received. */
.o-done { padding: clamp(24px, 6vh, 72px) 4px 12px; }
.o-done .o-label { color: var(--cocoa); }
.o-done__stamp {
    width: 150px;
    height: 150px;
    margin: 0 0 22px -6px;
    color: var(--cocoa);
    font: 500 15px var(--label);
    letter-spacing: .24em;
    animation: o-stamp .7s var(--ease) both;
}
.o-done__stamp text { fill: currentColor; }
.o-done__stamp-date { font: 900 22px var(--display); letter-spacing: -.02em; }
@keyframes o-stamp {
    0% { opacity: 0; transform: scale(1.6) rotate(-18deg); }
    60% { opacity: 1; transform: scale(.96) rotate(-8deg); }
    100% { opacity: 1; transform: scale(1) rotate(-9deg); }
}
.o-done__text { margin: 12px 0 22px; color: var(--cocoa); max-width: 26rem; line-height: 1.4; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
    [data-rise], .o-film { opacity: 1; transform: none; }
}