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

    /* Hold the footer at the bottom of the window on pages too short to fill it.
       Without this the holding page ends its footer partway down a tall window and the
       body background runs on below it, which reads as a rendering fault rather than a
       short page. Only the header, main and footer are in flow here -- the skip link is
       absolutely positioned -- so a column flexbox changes nothing on pages that already
       overflow.

       dvh first, then vh as the fallback for browsers without it: on mobile, 100vh is the
       viewport with the toolbars hidden, so using it alone leaves the footer pushed below
       the fold until the address bar retracts. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

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

/*
   Marks a field an editor can put HTML into. The element stops being a paragraph and becomes a
   container, so it has to hold block children without the browser's own margins fighting the
   spacing the design sets around it.

   Always paired with a type class rather than carrying any type of its own -- "ar-body ar-rich",
   "ar-lead ar-rich" -- and the paragraph gap is in em so it comes out right at whichever scale
   it is paired with.

   The matching view renders with Html.Raw into a div. Never a p: these fields hold paragraphs,
   and a p cannot contain one, so the browser would close the outer tag at the first child and
   drop the rest out of the styled block.
*/
.ar-rich > :first-child {
    margin-top: 0;
}

.ar-rich > :last-child {
    margin-bottom: 0;
}

.ar-rich p {
    margin: 0;
}

.ar-rich p + p {
    margin-top: 1em;
}

/* The base rule strips links to color: inherit and no underline, which is right for the
   navigation and the buttons but leaves a link inside body copy indistinguishable from the
   text around it. An editor who adds one has to be able to see it, so put it back here --
   the same bottom rule and red hover .ar-textlink uses, so inline links read as part of the
   same family. */
.ar-rich a {
    border-bottom: 1px solid rgba(30, 30, 30, 0.4);
}

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

/* Same story as the links. The reset above strips list-style and padding from every ul and ol,
   which is right for the navigation and the feature lists that are built as unstyled lists, but
   an editor typing a bullet list into one of these fields would get neither bullets nor indent
   and no way to tell why. Put both back, scoped to editor content only. */
.ar-rich ul,
.ar-rich ol {
    padding-left: 1.4em;
}

.ar-rich ul {
    list-style: disc;
}

.ar-rich ol {
    list-style: decimal;
}

.ar-rich li + li {
    margin-top: 0.4em;
}

.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-form-embed button,
.ar-form-embed input[type="submit"],
.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-form-embed button:hover,
.ar-form-embed input[type="submit"]:hover,
.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;

    /* Both columns start at the top. This was align-items: end, which sat the headline on the
       same baseline as the last line of the intro -- a nice effect while the two were a similar
       length, and the About page was the only thing using it. It does not survive a long intro:
       Annie's Story runs to 586px against a 115px headline, which left the headline stranded
       470px down the page with empty space above it and nothing to explain why. */
    align-items: start;
}

/* ------------------------------------------------------------ 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;

    /*
       Three across at most, then wrap. Read the track minimum from the inside out:

         (100% - 92px) / 3   one third of the row, once the two 46px gaps are removed.
                             Making every track at least this wide is what stops a fourth
                             column fitting, however wide the screen gets.
         max(262px, ...)     but never narrower than the comfortable reading measure, so
                             on a medium screen it drops to two across rather than three
                             cramped ones.
         min(100%, ...)      and never wider than the row itself, or a phone narrower than
                             262px would overflow sideways.

       auto-fit rather than a fixed repeat(3, 1fr) so a page with one or two values still
       fills the row: empty tracks collapse and the 1fr maximum lets the rest expand. A
       fixed three would leave two values sitting in two thirds with a hole beside them.
    */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(262px, (100% - 92px) / 3)), 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;
}

/*
   A form pasted in from a provider is styled by element, because we do not control the classes
   it ships with. It is added to these existing rules rather than given its own copy of them, so
   the two cannot drift apart. Deliberately no layout: the provider owns that, and imposing a
   flex column on top of whatever it is already doing would fight it.

   Checkboxes, radios and buttons are excluded -- the full-width text treatment is wrong for all
   three, and buttons are picked up by the .ar-button rule instead.
*/
.ar-form input,
.ar-form textarea,
.ar-form-embed input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.ar-form-embed textarea,
.ar-form-embed select {
    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,
.ar-form-embed input::placeholder,
.ar-form-embed textarea::placeholder {
    color: rgba(30, 30, 30, 0.45);
}

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

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

.ar-form-embed {
    margin-top: 20px;
}

.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.

   text-wrap is reset because body sets it to pretty, and the widget inherits it. The calendar's
   day cells are inline-blocks laid out as one run of text, seven to a line. Safari applies
   pretty to the whole run and moves a cell off the first week to fill the last one, which puts
   every date after it under the wrong weekday. Chrome only touches the last lines, so it never
   showed there. */
.ar-module__embed {
    padding: 0;
    min-height: 420px;
    text-wrap: wrap;
}

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