@import url("/fonts/fonts.css");

/* =========================================================================
   Annie's Room — V1 "Board Creme"
   Tokens are lifted from the design handoff. Radius is 0 everywhere and the
   only shadow in the design is on the sticky Book button.
   ========================================================================= */

:root {
    /* Brand */
    --ar-black: #1e1e1e;
    --ar-board: #efdec5;
    --ar-page: #fbf7f1;
    --ar-card: #fffdfa;
    --ar-red: #c53a44;
    --ar-green: #42563c;

    /* Derived rules */
    --ar-rule: rgba(30, 30, 30, 0.14);
    --ar-divider: rgba(30, 30, 30, 0.16);
    --ar-input: rgba(30, 30, 30, 0.22);
    --ar-rule-on-dark: rgba(239, 222, 197, 0.18);
    --ar-box-on-dark: rgba(239, 222, 197, 0.28);

    /* Type */
    --ar-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ar-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Spacing */
    --ar-gutter: 48px;
    --ar-section-y: 88px;

    --ar-transition: 0.2s ease;
}

@media (max-width: 900px) {
    :root {
        --ar-gutter: 32px;
        --ar-section-y: 64px;
    }
}

@media (max-width: 560px) {
    :root {
        --ar-gutter: 20px;
        --ar-section-y: 52px;
    }
}

/* ------------------------------------------------------------------ base */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ar-page);
    color: var(--ar-black);
    font-family: var(--ar-mono);
    font-size: 14px;
    line-height: 1.75;
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
iframe {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--ar-transition), background-color var(--ar-transition), border-color var(--ar-transition);
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

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

:focus-visible {
    outline: 2px solid var(--ar-red);
    outline-offset: 2px;
}

.ar-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ar-black);
    color: var(--ar-board);
    padding: 14px 22px;
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.ar-skip-link:focus {
    left: 0;
}

.ar-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ------------------------------------------------------------- typography */

.ar-h1 {
    font-family: var(--ar-display);
    font-weight: 800;
    font-size: clamp(38px, 4.6vw, 74px);
    letter-spacing: 0.01em;
    line-height: 0.98;
    text-transform: uppercase;
    text-wrap: balance;
    margin: 0;
}

.ar-h1--hero {
    font-size: clamp(46px, 6.4vw, 104px);
    line-height: 0.92;
}

.ar-h2 {
    font-family: var(--ar-display);
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 58px);
    letter-spacing: 0.015em;
    line-height: 1;
    text-transform: uppercase;
    text-wrap: balance;
    margin: 0;
}

.ar-h2--small {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.ar-h2--tight {
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.08em;
}

.ar-h3 {
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.02em;
    line-height: 1.05;
    text-transform: uppercase;
    margin: 0;
}

.ar-h3--card {
    font-size: 23px;
    line-height: 1.1;
}

.ar-eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ar-green);
    margin: 0;
}

.ar-kicker {
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ar-green);
    margin: 0;
}

.ar-kicker--red {
    color: var(--ar-red);
}

.ar-lead {
    font-size: 16px;
    line-height: 1.85;
    opacity: 0.8;
}

.ar-body {
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.78;
}

.ar-meta {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.55;
}

.ar-price {
    font-family: var(--ar-display);
    font-weight: 800;
    font-size: clamp(34px, 3vw, 44px);
    letter-spacing: 0.01em;
    line-height: 1;
}

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

.ar-button {
    display: inline-block;
    border: 1px solid transparent;
    padding: 18px 34px;
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    background: var(--ar-black);
    color: var(--ar-page);
}

.ar-button:hover {
    background: var(--ar-red);
    color: var(--ar-page);
}

.ar-button--red {
    background: var(--ar-red);
    color: var(--ar-page);
}

.ar-button--red:hover {
    background: var(--ar-black);
    color: var(--ar-board);
}

.ar-button--board {
    background: var(--ar-board);
    color: var(--ar-black);
}

.ar-button--board:hover {
    background: var(--ar-red);
    color: var(--ar-page);
}

.ar-button--ghost {
    background: transparent;
    border-color: var(--ar-input);
    color: var(--ar-black);
}

.ar-button--ghost:hover {
    background: var(--ar-black);
    color: var(--ar-board);
    border-color: var(--ar-black);
}

.ar-button--block {
    display: block;
    width: 100%;
}

.ar-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ar-button:disabled:hover {
    background: var(--ar-red);
    color: var(--ar-page);
}

.ar-textlink {
    display: inline-block;
    align-self: start;
    border-bottom: 1px solid rgba(30, 30, 30, 0.4);
    padding-bottom: 4px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ar-textlink:hover {
    color: var(--ar-red);
    border-bottom-color: var(--ar-red);
}

/* ---------------------------------------------------------------- layout */

.ar-section {
    padding: var(--ar-section-y) var(--ar-gutter);
}

.ar-section--ruled {
    border-bottom: 1px solid var(--ar-rule);
}

.ar-section--flush {
    padding-inline: 0;
}

.ar-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.ar-split--gapped {
    gap: 0 64px;
}

.ar-split--wide-gap {
    gap: 72px;
}

.ar-split__pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: var(--ar-section-y) var(--ar-gutter);
}

.ar-split__media {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    background: var(--ar-board);
}

.ar-split__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ar-split__media--tall {
    min-height: 480px;
}

.ar-rule-left {
    border-left: 1px solid var(--ar-rule);
}

@media (max-width: 780px) {
    .ar-rule-left {
        border-left: 0;
        border-top: 1px solid var(--ar-rule);
    }
}

.ar-page-enter {
    animation: ar-fade 0.35s ease both;
}

@keyframes ar-fade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------- header */

.ar-header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 30px;
    padding: 26px var(--ar-gutter);
    background: rgba(251, 247, 241, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ar-rule);
}

.ar-header__logo {
    display: block;
    width: 231px;
    max-width: 55vw;
}

.ar-header__nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 30px;
}

.ar-header__link {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ar-header__link:hover,
.ar-header__link[aria-current="page"] {
    color: var(--ar-red);
}

.ar-header__cta {
    padding: 13px 26px;
    font-size: 11px;
}

.ar-header__toggle {
    display: none;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--ar-input);
    padding: 11px 16px;
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
}

.ar-header__toggle:hover {
    background: var(--ar-black);
    color: var(--ar-board);
    border-color: var(--ar-black);
}

@media (max-width: 880px) {
    .ar-header {
        padding-block: 18px;
    }

    .ar-header__toggle {
        display: block;
    }

    .ar-header__nav {
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        border-top: 1px solid var(--ar-rule);
    }

    .ar-header__nav[hidden] {
        display: none;
    }

    .ar-header__link {
        padding: 16px 2px;
        border-bottom: 1px solid var(--ar-rule);
    }

    .ar-header__cta {
        margin-top: 16px;
        text-align: center;
        padding: 16px 26px;
    }
}

/* -------------------------------------------------------------- sticky CTA */

.ar-sticky-book {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 80;
    padding: 19px 30px;
    background: var(--ar-red);
    color: var(--ar-page);
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(30, 30, 30, 0.28);
}

.ar-sticky-book:hover {
    background: var(--ar-black);
    color: var(--ar-board);
}

@media (max-width: 560px) {
    .ar-sticky-book {
        right: 16px;
        bottom: 16px;
        padding: 16px 24px;
    }
}

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

.ar-footer {
    background: var(--ar-black);
    color: var(--ar-board);
    padding: 72px var(--ar-gutter) 40px;
}

.ar-footer__top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--ar-rule-on-dark);
}

.ar-footer__logo {
    width: 230px;
    max-width: 100%;
}

.ar-footer__heading {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 18px;
}

.ar-footer__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
}

.ar-footer__list a:hover {
    color: var(--ar-red);
}

.ar-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding-top: 26px;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.45;
}

.ar-footer__credit {
    margin-top: 12px;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.45;
}

.ar-footer__credit a{
    text-decoration: underline;
}

.ar-footer__credit a:hover {
    color: var(--ar-red);
}

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

.ar-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    border-bottom: 1px solid var(--ar-rule);
}

.ar-hero__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 56px;
    padding: 96px var(--ar-gutter) 72px;
}

.ar-hero__intro {
    max-width: 43ch;
    font-size: 16px;
    line-height: 1.85;
    opacity: 0.8;
    margin-top: 28px;
}

.ar-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
}

.ar-hero__actions .ar-button {
    padding: 20px 40px;
}

.ar-hero__media {
    position: relative;
    min-height: 560px;
    border-left: 1px solid var(--ar-rule);
    overflow: hidden;
    background: var(--ar-board);
}

.ar-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 780px) {
    .ar-hero__body {
        padding-top: 56px;
        gap: 40px;
    }

    .ar-hero__media {
        min-height: 340px;
        border-left: 0;
        border-top: 1px solid var(--ar-rule);
    }
}

/* --------------------------------------------------------------- marquee */

.ar-marquee {
    background: var(--ar-black);
    color: var(--ar-board);
    padding: 15px 0;
    overflow: hidden;
}

.ar-marquee__track {
    display: flex;
    width: max-content;
    animation: ar-marquee 34s linear infinite;
}

.ar-marquee__item {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The separator carries the spacing so the duplicated track loops seamlessly at -50%. */
.ar-marquee__item::after {
    content: "·";
    margin: 0 46px;
    opacity: 0.6;
}

@keyframes ar-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ---------------------------------------------------------------- panels */

.ar-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(262px, 100%), 1fr));
    padding: 72px var(--ar-gutter);
    border-bottom: 1px solid var(--ar-rule);
}

.ar-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 34px 44px;
}

.ar-panel:first-child {
    padding-left: 0;
}

.ar-panel:last-child {
    padding-right: 0;
}

.ar-panel + .ar-panel {
    border-left: 1px solid var(--ar-rule);
}

@media (max-width: 800px) {
    .ar-panel {
        padding: 28px 0;
    }

    .ar-panel + .ar-panel {
        border-left: 0;
        border-top: 1px solid var(--ar-rule);
    }
}

/* ----------------------------------------------------------- rows & lists */

.ar-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ar-divider);
}

.ar-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 17px 0;
    border-bottom: 1px solid var(--ar-divider);
    font-size: 14px;
}

.ar-row--tight {
    padding: 13px 0;
}

.ar-row--roomy {
    padding: 18px 0;
}

.ar-row__label {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.ar-row__qualifier,
.ar-row__meta {
    opacity: 0.55;
    font-size: 12px;
}

.ar-row__value {
    text-align: right;
    white-space: pre-line;
}

.ar-row__key {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.55;
}

.ar-bullets {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ar-divider);
}

.ar-bullets li {
    display: flex;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--ar-divider);
    font-size: 13px;
}

.ar-bullets li::before {
    content: "—";
    opacity: 0.4;
}

/* -------------------------------------------------------- games (home) */

.ar-games-feature__list {
    margin-top: 34px;
}

/* --------------------------------------------------------- what's on */

.ar-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 22px;
}

.ar-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px;
    background: var(--ar-card);
    border: 1px solid var(--ar-divider);
}

.ar-card:hover {
    border-color: var(--ar-black);
}

.ar-card__media {
    position: relative;
    height: 150px;
    overflow: hidden;
    background: var(--ar-board);
}

.ar-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ar-card__day {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ar-red);
}

.ar-card__blurb {
    font-size: 13px;
    line-height: 1.75;
    opacity: 0.75;
}

.ar-section__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

/* ------------------------------------------------------------ booking CTA */

.ar-booking-cta {
    background: var(--ar-green);
    color: var(--ar-board);
    padding: 88px var(--ar-gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 56px;
    align-items: center;
}

.ar-booking-cta__panel {
    border: 1px solid var(--ar-box-on-dark);
    padding: 34px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ------------------------------------------------------------ page header */

.ar-page-header {
    padding: 88px var(--ar-gutter) 56px;
    border-bottom: 1px solid var(--ar-rule);
}

/* The stacking of eyebrow / headline / intro lives on the inner element rather than the
   section, so the section itself is free to become a two-column grid when there is an image.
   aboutPage builds its own header with --split and no __body, which is why the padding stays
   on the section. */
.ar-page-header__body {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.ar-page-header__intro {
    max-width: 62ch;
    font-size: 16px;
    line-height: 1.85;
    opacity: 0.8;
}

/* --- with a header image: headline left, image right, following the homepage hero --- */

.ar-page-header--media {
    /* Padding moves to the text column so the image can run to the edge of the page, the way
       the hero does. */
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.ar-page-header--media .ar-page-header__body {
    padding: 88px var(--ar-gutter) 56px;
    justify-content: center;
}

.ar-page-header__media {
    position: relative;
    min-height: 380px;
    border-left: 1px solid var(--ar-rule);
    overflow: hidden;
    background: var(--ar-board);
}

.ar-page-header__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Below the grid's wrap point the two columns stack, so the hairline moves from the side to
   the top to stay on the join. */
@media (max-width: 880px) {
    .ar-page-header__media {
        min-height: 260px;
        border-left: 0;
        border-top: 1px solid var(--ar-rule);
    }
}

.ar-page-header--split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: 64px;
    align-items: end;
}

/* ------------------------------------------------------------ darts page */

.ar-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    padding: 0 var(--ar-gutter);
    border-bottom: 1px solid var(--ar-rule);
}

.ar-two-col__cell {
    padding: 64px 0;
}

.ar-two-col__cell + .ar-two-col__cell {
    border-left: 1px solid var(--ar-rule);
    padding-left: 64px;
}

.ar-two-col__cell:first-child {
    padding-right: 64px;
}

@media (max-width: 820px) {
    .ar-two-col__cell {
        padding: 44px 0;
    }

    .ar-two-col__cell:first-child {
        padding-right: 0;
    }

    .ar-two-col__cell + .ar-two-col__cell {
        border-left: 0;
        border-top: 1px solid var(--ar-rule);
        padding-left: 0;
    }
}

.ar-formats {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 26px;
}

.ar-format__name {
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ar-format__blurb {
    font-size: 13px;
    line-height: 1.75;
    opacity: 0.75;
}

.ar-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(178px, 100%), 1fr));
    gap: 16px;
}

.ar-game {
    background: var(--ar-card);
    border: 1px solid var(--ar-divider);
    display: flex;
    flex-direction: column;
}

.ar-game:hover {
    border-color: var(--ar-black);
}

.ar-game__tile {
    aspect-ratio: 8 / 9;
    background-color: var(--ar-black);
    overflow: hidden;
}

.ar-game__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ar-game__body {
    padding: 15px 15px 19px;
}

.ar-game__name {
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ar-game__blurb {
    font-size: 11px;
    line-height: 1.65;
    opacity: 0.7;
}

.ar-cta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 28px;
    padding: 72px var(--ar-gutter);
}

/* ------------------------------------------------------------- menu page */

.ar-menu-rows {
    border-top: 1px solid var(--ar-divider);
}

.ar-menu-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 6px 24px;
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid var(--ar-divider);
}

.ar-menu-row__name {
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ar-menu-row__description {
    font-size: 13px;
    line-height: 1.7;
    opacity: 0.72;
}

.ar-menu-row__price {
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 15px;
    text-align: right;
}

@media (max-width: 620px) {
    .ar-menu-row__price {
        text-align: left;
    }
}

.ar-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 40px 56px;
}

.ar-columns--spaced {
    margin-top: 44px;
}

.ar-subhead {
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ar-green);
    margin-bottom: 12px;
}

/* ---------------------------------------------------------- gallery page */

.ar-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 14px;
    padding: 0 var(--ar-gutter) 88px;
}

.ar-gallery__item {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: var(--ar-board);
}

.ar-gallery__item--tall {
    height: 420px;
}

.ar-gallery__item--wide {
    grid-column: span 2;
}

@media (max-width: 620px) {
    .ar-gallery__item--wide {
        grid-column: auto;
    }
}

.ar-gallery__item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------- membership page */

.ar-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: 20px;
}

.ar-tier {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 36px 32px;
    background: var(--ar-card);
    border: 1px solid var(--ar-divider);
}

.ar-tier--featured {
    background: var(--ar-board);
    border-color: var(--ar-black);
}

.ar-tier__tag {
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ar-green);
}

.ar-tier--featured .ar-tier__tag {
    color: var(--ar-red);
}

.ar-tier__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.ar-tier__per {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.55;
}

.ar-tier__blurb {
    font-size: 13px;
    line-height: 1.75;
    opacity: 0.78;
}

.ar-tier__features {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ar-divider);
    margin-top: auto;
}

.ar-tier__features li {
    padding: 12px 0;
    border-bottom: 1px solid var(--ar-divider);
    font-size: 12px;
    line-height: 1.65;
}

.ar-smallprint {
    margin-top: 28px;
    font-size: 11px;
    line-height: 1.8;
    opacity: 0.55;
    max-width: 76ch;
}

/* ------------------------------------------------------------ about page */

.ar-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(262px, 100%), 1fr));
    gap: 46px;
    padding: 88px var(--ar-gutter);
    border-bottom: 1px solid var(--ar-rule);
}

.ar-value__kicker {
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ar-red);
    margin-bottom: 18px;
}

.ar-panel-board {
    background: var(--ar-board);
    padding: 72px var(--ar-gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
}

/* ----------------------------------------------------------------- forms */

.ar-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ar-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ar-form input,
.ar-form textarea {
    background: transparent;
    border: 1px solid var(--ar-input);
    border-radius: 0;
    padding: 15px;
    font-family: var(--ar-mono);
    font-size: 13px;
    color: var(--ar-black);
    width: 100%;
}

.ar-form input::placeholder,
.ar-form textarea::placeholder {
    color: rgba(30, 30, 30, 0.45);
}

.ar-form input:focus,
.ar-form textarea:focus {
    border-color: var(--ar-black);
}

.ar-form textarea {
    resize: vertical;
    min-height: 110px;
}

.ar-form__error {
    color: var(--ar-red);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.ar-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ar-notice {
    border: 1px solid var(--ar-divider);
    padding: 18px 20px;
    font-size: 13px;
    line-height: 1.7;
}

.ar-notice--success {
    border-color: var(--ar-green);
    color: var(--ar-green);
}

.ar-notice--error {
    border-color: var(--ar-red);
    color: var(--ar-red);
}

.ar-map {
    height: 250px;
    margin-bottom: 34px;
    background: var(--ar-board);
    border: 1px solid var(--ar-divider);
    overflow: hidden;
}

.ar-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* The map is pasted into the Contact page, so whatever provider it uses is a content decision.
   These rules only make it sit correctly in the panel and match the muted palette.

   The greyscale filter is what lets a keyless tile provider look right here. OpenStreetMap's
   own tiles are free and need no API key, but they are full colour and would shout against the
   rest of the page; desaturating them gets close to the paid light basemaps without an account
   or a key to leak. */
.ar-map .leaflet-container {
    width: 100%;
    height: 100%;
    background: var(--ar-board);
}

.ar-map .leaflet-tile-pane {
    filter: grayscale(1) contrast(0.92) brightness(1.04);
}

/* Leaflet's own controls and attribution, toned down to the site's type and rules. */
.ar-map .leaflet-control-attribution {
    font-family: var(--ar-mono);
    font-size: 9px;
    background: rgba(251, 247, 241, 0.86);
}

.ar-map .leaflet-bar a {
    color: var(--ar-black);
    border-bottom-color: var(--ar-divider);
}

/* --------------------------------------------------------- holding page */

/* A page outside the site's structure: logo, words, and whatever HTML the editor needs.
   Deliberately quiet -- no menus, no sticky Book button -- so it reads as a page that is
   standing in for something rather than a page that has lost its navigation. */

.ar-header--bare {
    position: static;
    backdrop-filter: none;
}

.ar-footer--bare {
    padding: 40px var(--ar-gutter);
}

.ar-footer--bare .ar-footer__bottom {
    padding-top: 0;
}

.ar-holding {
    padding: 96px var(--ar-gutter) 120px;
    max-width: 780px;
}

.ar-holding__text {
    margin-top: 32px;
}

.ar-holding__text p {
    max-width: 62ch;
    font-size: 16px;
    line-height: 1.85;
    opacity: 0.8;
}

.ar-holding__text p + p {
    margin-top: 20px;
}

/* The HTML block is editor-supplied, so it could be anything: a signup form, an iframe, a
   third-party widget. Contain it rather than style it -- guessing at the markup would only
   fight whatever actually arrives. */
.ar-holding__html {
    margin-top: 44px;
    max-width: 100%;
}

.ar-holding__html iframe,
.ar-holding__html img,
.ar-holding__html video {
    max-width: 100%;
}

@media (max-width: 780px) {
    .ar-holding {
        padding: 64px var(--ar-gutter) 88px;
    }
}

/* --------------------------------------------------------- booking page */

.ar-booking-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    gap: 28px;
    padding: 80px var(--ar-gutter) 40px;
}

.ar-booking-header__note {
    max-width: 38ch;
    font-size: 13px;
    line-height: 1.8;
    opacity: 0.7;
}

.ar-module {
    margin: 0 var(--ar-gutter) 88px;
    border: 1px solid rgba(30, 30, 30, 0.18);
    background: var(--ar-card);
}

.ar-module__bar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 26px;
    border-bottom: 1px solid var(--ar-rule);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
}

/* The pasted DesignMyNight widget. It renders inline rather than in an iframe, so its own
   containers are reachable -- and they need stretching, or the widget sits at its natural width
   in the middle of our full-width frame with most of the frame empty.

   Colours are not set here. The widget's internals are themed through its own stylesheet, whose
   colours are query parameters on the link inside the pasted embed; CSS from us would be
   fighting its rules rather than configuring them.

   Selectors are the widget's real structure as of the v2 partner widget: #dmn-partner-widget
   wraps everything, #dmn-widget-inner holds the steps, and each step is a .stage. Inactive
   stages carry inline display:none, so nothing here touches display. */
.ar-module__embed {
    padding: 0;
    min-height: 420px;
}

.ar-module__embed #dmn-partner-widget,
.ar-module__embed #dmn-widget-inner,
.ar-module__embed .stage,
.ar-module__embed .contents {
    width: 100%;
    max-width: none;
}

.ar-module__body {
    display: grid;
    grid-template-columns: minmax(min(340px, 100%), 1.5fr) minmax(min(260px, 100%), 1fr);
}

@media (max-width: 860px) {
    .ar-module__body {
        grid-template-columns: 1fr;
    }
}

.ar-module__form {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 40px;
    border-right: 1px solid var(--ar-rule);
}

.ar-module__summary {
    padding: 40px;
    background: var(--ar-board);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ar-step__label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 16px;
}

.ar-stepper {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ar-stepper__button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--ar-input);
    background: transparent;
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}

.ar-stepper__button:hover {
    background: var(--ar-black);
    color: var(--ar-board);
    border-color: var(--ar-black);
}

.ar-stepper__value {
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ar-datestrip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
    gap: 8px;
}

.ar-datecell {
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--ar-input);
    background: transparent;
    cursor: pointer;
}

.ar-datecell:hover {
    border-color: var(--ar-black);
}

.ar-datecell[aria-pressed="true"] {
    background: var(--ar-black);
    color: var(--ar-board);
    border-color: var(--ar-black);
}

.ar-datecell__weekday {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.65;
}

.ar-datecell__day {
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1;
}

.ar-datecell__month {
    font-size: 9px;
    opacity: 0.5;
    text-transform: uppercase;
}

.ar-times {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 8px;
}

.ar-time {
    min-height: 54px;
    border: 1px solid var(--ar-input);
    background: transparent;
    font-family: var(--ar-mono);
    font-size: 13px;
    cursor: pointer;
}

.ar-time:hover:not(:disabled) {
    border-color: var(--ar-black);
}

.ar-time[aria-pressed="true"] {
    background: var(--ar-black);
    color: var(--ar-board);
    border-color: var(--ar-black);
}

.ar-time:disabled {
    text-decoration: line-through;
    color: rgba(128, 128, 128, 0.55);
    cursor: not-allowed;
}

.ar-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ar-chip {
    border: 1px solid var(--ar-input);
    background: transparent;
    padding: 12px 18px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.ar-chip:hover {
    border-color: var(--ar-black);
}

.ar-chip[aria-pressed="true"] {
    background: var(--ar-black);
    color: var(--ar-board);
    border-color: var(--ar-black);
}

.ar-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(30, 30, 30, 0.16);
    font-size: 13px;
}

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .ar-marquee__track {
        animation: none;
        transform: none;
    }

    .ar-page-enter {
        animation: none;
    }
}