html { scroll-behavior: smooth; background: #E9E3D7; }
/* The hero film has no poster: the section carries the film’s own opening
frame inlined in the markup, so the first paint is the film rather than an
empty black rectangle, which is what a live preview of the site would
otherwise capture. The film itself fades up over that still once it runs. */
[data-hero-img] video {
opacity: 0;
animation: bm-film-in .7s ease .2s forwards;
}
@keyframes bm-film-in { to { opacity: 1 } }
body { margin: 0; background: #E9E3D7; color: #14120F; font-family: Archivo, "Helvetica Neue", Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #14120F; text-decoration: none; }
a:hover { color: #8A6A2C; }
::selection { background: #A6813C; color: #F4EFE4; }
/* Heroes lay out as a flex column with the copy in normal flow, so the
caption block can never be pushed past the fold on a short viewport.
min-height is clamped to the viewport rather than a fixed 620px. */
[data-hero] {
height: auto !important;
min-height: min(88vh, 620px) !important;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
[data-hero-copy] {
position: relative !important;
z-index: 2;
left: auto !important; right: auto !important; bottom: auto !important;
width: 100%;
padding: 0 40px 52px !important;
}
/* Scrim shaped to the type, not the frame: a bottom band plus an ellipse
anchored bottom-left. Composite alpha reaches ~0.9 under the headline and
falls to ~0.05 across the upper and right of the photograph. */
[data-hero-scrim] {
/* Two passes. A full-width band across the bottom carries the caption and the
hours block whatever the photograph is doing there, and a softer wash from
the left holds the headline. Tuned against the portico photograph, whose
lower half is bright Portland stone and pale sky. */
background:
linear-gradient(180deg,
rgba(9,8,7,.52) 0%,
rgba(9,8,7,.06) 26%,
rgba(9,8,7,.30) 56%,
rgba(9,8,7,.74) 79%,
rgba(9,8,7,.90) 100%),
linear-gradient(90deg,
rgba(9,8,7,.58) 0%,
rgba(9,8,7,.20) 44%,
rgba(9,8,7,0) 72%) !important;
}
[data-hero-copy] h1,
[data-hero-copy] p { text-shadow: 0 1px 30px rgba(9,8,7,.85), 0 1px 4px rgba(9,8,7,.7); }
[data-hero-hours] { text-shadow: 0 1px 22px rgba(9,8,7,.9), 0 1px 3px rgba(9,8,7,.8); }
@media (max-width: 1100px) { [data-freeentry] { display: none !important } }
/* Below ~1240px the seven nav links can no longer share a row with the wordmark
and the Book button, so drop the nav to its own full-width second row rather
than letting the button strand on a third line. */
@media (max-width: 1240px) {
[data-navbar] { row-gap: 10px !important }
[data-nav] { order: 3; flex: 1 0 100% !important; justify-content: flex-start !important; gap: 8px 18px !important }
[data-navcta] { order: 2 }
}
@media (max-width: 620px) {
[data-navbar] { padding-left: 20px !important; padding-right: 20px !important }
[data-nav] { font-size: 12px !important; gap: 8px 14px !important }
}
@media (max-width: 900px) {
section, footer { padding-left: 20px !important; padding-right: 20px !important }
section > div, footer > div { display: block !important }
section:not([data-hero]) > div > * { grid-column: auto !important; border-left-width: 0 !important; border-right-width: 0 !important; margin-bottom: 26px }
footer > div > * { margin-bottom: 30px }
[style*="repeat(3, 1fr)"], [style*="repeat(2, 1fr)"], [style*="repeat(4, 1fr)"], [style*="5fr 4fr"] { grid-template-columns: 1fr !important }
[data-hero] { min-height: 0 !important; padding: 0 !important }
[data-hero-img] { position: relative !important; inset: auto !important; height: 58vh !important }
[data-hero-scrim] { display: none !important }
[data-hero-copy] { padding: 30px 20px 42px !important; z-index: 2 }
[data-hero-hours] { text-align: left !important; margin-top: 26px; border-top: 1px solid #262218; padding-top: 18px }
[data-map] { aspect-ratio: 3 / 4 !important }
[data-lightbox] { padding: 20px !important; align-items: flex-start !important; overflow-y: auto !important }
}
/* ---- Printing a visit route -------------------------------------------
The route block is hidden on screen and is the only thing that survives
printing. visibility rather than display, so the block does not need every
ancestor un-hidden to show through. */
[data-print-route] { display: none; }
@media print {
body * { visibility: hidden !important; }
[data-print-route], [data-print-route] * { visibility: visible !important; }
[data-print-route] {
display: block !important;
position: absolute; left: 0; top: 0; width: 100%;
background: #fff; color: #000;
font-family: Archivo, "Helvetica Neue", Helvetica, sans-serif;
padding: 0 8mm;
}
[data-print-route] h1 { font-family: "Libre Baskerville", Georgia, serif; font-weight: 400; font-size: 22pt; margin: 0 0 2mm; }
[data-print-route] .pr-meta { font-size: 9pt; letter-spacing: .08em; text-transform: uppercase; color: #444; border-bottom: 1px solid #000; padding-bottom: 3mm; margin-bottom: 5mm; }
[data-print-route] .pr-floor { font-size: 10pt; letter-spacing: .12em; text-transform: uppercase; margin: 6mm 0 2mm; border-bottom: 1px solid #999; padding-bottom: 1.5mm; }
[data-print-route] .pr-row { display: flex; gap: 4mm; align-items: baseline; padding: 2mm 0; border-bottom: 1px dotted #bbb; page-break-inside: avoid; }
[data-print-route] .pr-box { flex: 0 0 auto; width: 4mm; height: 4mm; border: 1px solid #000; }
[data-print-route] .pr-room { flex: 0 0 26mm; font-size: 9pt; letter-spacing: .08em; text-transform: uppercase; }
[data-print-route] .pr-name { flex: 1 1 auto; font-family: "Libre Baskerville", Georgia, serif; font-size: 11pt; }
[data-print-route] .pr-date { flex: 0 0 auto; font-size: 9pt; color: #444; }
[data-print-route] .pr-foot { margin-top: 6mm; padding-top: 3mm; border-top: 1px solid #000; font-size: 9pt; color: #444; }
@page { margin: 12mm; }
}
/* ---- Buttons -------------------------------------------------------------
Three kinds, and every action on the site is one of them.
gold the one thing a screen most wants you to do: open the record, book,
join. Solid gold, a slow sheen crossing it every few seconds so the
eye finds it, and a cream ground that wipes in on hover.
ink the same weight for light pages, where gold on stone would sink.
line everything secondary. A border you can actually see, and the same
gold wipe on hover so it answers the pointer like the others.
The wipe and the sheen are pseudo-elements at z-index -1 inside an
isolated box: they paint over the button's own ground but under its label,
so no button's markup has to change to take part. They move by transform
only, so they are composited and cost nothing.
These are small, short, pointer-led movements and they carry meaning, so
they are deliberately not switched off by the reduced-motion preference,
which on Windows is set whenever system animation effects are off. */
[data-btn] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
isolation: isolate;
overflow: hidden;
cursor: pointer;
font-family: 'Archivo Narrow', Archivo, sans-serif !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: .17em !important;
text-transform: uppercase;
line-height: 1.2;
padding: 14px 22px !important;
border-radius: 0;
transition: color .36s ease, border-color .36s ease, box-shadow .36s ease, transform .36s cubic-bezier(.22,.72,.2,1);
-webkit-tap-highlight-color: transparent;
}
[data-btn]::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--btn-wipe);
transform: translateX(-101%);
transition: transform .46s cubic-bezier(.22,.72,.2,1);
}
[data-btn]:hover::before,
[data-btn]:focus-visible::before { transform: translateX(0); }
[data-btn]:hover,
[data-btn]:focus-visible { transform: translateY(-2px); }
[data-btn]:active { transform: translateY(0); transition-duration: .1s; }
[data-btn]:focus-visible { outline: 2px solid #EBCF95; outline-offset: 3px; }
[data-btn="gold"] {
--btn-wipe: #F4EFE4;
background: #C9A45C !important;
color: #14120F !important;
border: 1px solid #C9A45C !important;
box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px rgba(201,164,92,.18);
}
[data-btn="gold"]:hover, [data-btn="gold"]:focus-visible {
color: #14120F !important;
border-color: #F4EFE4 !important;
box-shadow: 0 12px 30px rgba(201,164,92,.34);
}
[data-btn="ink"] {
--btn-wipe: #C9A45C;
background: #14120F !important;
color: #F4EFE4 !important;
border: 1px solid #14120F !important;
box-shadow: 0 6px 18px rgba(20,18,15,.14);
}
[data-btn="ink"]:hover, [data-btn="ink"]:focus-visible {
color: #14120F !important;
border-color: #C9A45C !important;
box-shadow: 0 12px 28px rgba(20,18,15,.22);
}
/* The sheen: a soft diagonal of light that crosses the solid buttons once
every seven seconds and otherwise leaves them alone. */
[data-btn="gold"]::after, [data-btn="ink"]::after {
content: "";
position: absolute;
top: -20%; bottom: -20%;
left: 0;
width: 42%;
z-index: -1;
pointer-events: none;
background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%);
transform: translateX(-160%) skewX(-18deg);
animation: btn-sheen 7s cubic-bezier(.4,.1,.3,1) infinite;
}
[data-btn="ink"]::after { background: linear-gradient(100deg, rgba(235,207,149,0) 0%, rgba(235,207,149,.30) 50%, rgba(235,207,149,0) 100%); }
[data-btn]:hover::after, [data-btn]:focus-visible::after { animation: none; opacity: 0; }
@keyframes btn-sheen {
0%, 74% { transform: translateX(-160%) skewX(-18deg); }
90%, 100% { transform: translateX(340%) skewX(-18deg); }
}
/* line, on dark grounds (the default) and on light ones */
[data-btn="line"] {
--btn-wipe: #C9A45C;
background: transparent !important;
color: #F4EFE4 !important;
border: 1px solid rgba(244,239,228,.55) !important;
}
[data-btn="line-light"] {
--btn-wipe: #14120F;
background: transparent !important;
color: #14120F !important;
border: 1px solid rgba(20,18,15,.6) !important;
}
[data-btn="line"]:hover, [data-btn="line"]:focus-visible { color: #14120F !important; border-color: #C9A45C !important; }
[data-btn="line-light"]:hover, [data-btn="line-light"]:focus-visible { color: #F4EFE4 !important; border-color: #14120F !important; }
[data-btn][disabled] { opacity: .45; cursor: default; transform: none !important; }
[data-btn][disabled]::before { display: none; }
/* the arrow, which steps a little further than the eye expects */
[data-btn] .cta-a {
display: inline-block;
font-size: 15px;
transition: transform .46s cubic-bezier(.22,.72,.2,1);
}
[data-btn]:hover .cta-a,
[data-btn]:focus-visible .cta-a { transform: translateX(6px); }
[data-btn] .cta-down { display: inline-block; font-size: 15px; transition: transform .46s cubic-bezier(.22,.72,.2,1); }
[data-btn]:hover .cta-down, [data-btn]:focus-visible .cta-down { transform: translateY(4px); }
/* On a tile, the cue is hidden until the pointer arrives, then rises. */
[data-tile-cue] {
opacity: 0;
transform: translateY(6px);
transition: opacity .3s ease, transform .3s cubic-bezier(.22,.72,.2,1);
}
[data-tile]:hover [data-tile-cue],
[data-tile]:focus-visible [data-tile-cue] { opacity: 1; transform: translateY(0); }
[data-btn][data-btn-sm] { padding: 10px 18px !important; font-size: 12px !important; gap: 10px; }
/* A tile's own "read more" line: always visible, underlined in gold, and it
steps forward with the whole tile. */
[data-tile-link] {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 16px;
padding-bottom: 5px;
font-family: 'Archivo Narrow', Archivo, sans-serif;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: #EBCF95;
background: linear-gradient(#C9A45C, #C9A45C) left bottom / 34% 1px no-repeat;
transition: background-size .46s cubic-bezier(.22,.72,.2,1), color .3s ease;
}
[data-tile-link] .cta-a { display: inline-block; transition: transform .46s cubic-bezier(.22,.72,.2,1); }
[data-tile]:hover [data-tile-link], [data-tile]:focus-visible [data-tile-link] { background-size: 100% 1px; color: #F4EFE4; }
[data-tile]:hover [data-tile-link] .cta-a, [data-tile]:focus-visible [data-tile-link] .cta-a { transform: translateX(6px); }
/* Whole cards that act as one link keep a quieter version of the wipe. */
[data-cta] { position: relative; overflow: hidden; isolation: isolate; }
[data-cta]::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--cta-fill, #DCD3BE);
transform: translateX(-101%);
transition: transform .46s cubic-bezier(.22,.72,.2,1);
}
[data-cta]:hover::before, [data-cta]:focus-visible::before { transform: translateX(0); }
/* ---- Close ---------------------------------------------------------------
Every pop-up closes the same way, with a button that looks like a way out:
a drawn cross, the word, and the Esc key it also answers to. On the object
studies it is pinned to the top right corner, where people look first,
and it stays there while the study scrolls on a phone. */
[data-btn="close"] {
--btn-wipe: #F4EFE4;
background: rgba(20,18,15,.72) !important;
color: #F4EFE4 !important;
border: 1px solid rgba(244,239,228,.7) !important;
padding: 11px 14px 11px 16px !important;
gap: 11px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
[data-btn="close"]:hover, [data-btn="close"]:focus-visible { color: #14120F !important; border-color: #F4EFE4 !important; }
[data-btn="close"] .x {
position: relative;
width: 14px; height: 14px;
flex: 0 0 auto;
transition: transform .46s cubic-bezier(.22,.72,.2,1);
}
[data-btn="close"] .x::before, [data-btn="close"] .x::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 17px; height: 1.6px;
background: currentColor;
transform: translate(-50%, -50%) rotate(45deg);
}
[data-btn="close"] .x::after { transform: translate(-50%, -50%) rotate(-45deg); }
[data-btn="close"]:hover .x, [data-btn="close"]:focus-visible .x { transform: rotate(90deg); }
[data-btn="close"] kbd {
font: inherit;
font-size: 10px;
letter-spacing: .12em;
padding: 3px 6px 2px;
border: 1px solid currentColor;
opacity: .62;
}
[data-close-corner] {
position: fixed !important;
top: 22px; right: 26px;
z-index: 5;
margin: 0 !important;
}
@media (max-width: 900px) { [data-close-corner] { top: 14px; right: 14px; } [data-btn="close"] kbd { display: none; } }
/* ---- Chips and toggles ---------------------------------------------------
Filters, time slots, steppers and page numbers build their own colours in
code, including how they look when chosen, so this layer does not fight
them: it only makes the edge visible (half the strength of the text,
whatever the ground) and gives every one the same answer to the pointer. */
[data-chip] {
border-color: color-mix(in srgb, currentColor 52%, transparent) !important;
font-weight: 600;
transition: transform .3s cubic-bezier(.22,.72,.2,1), border-color .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease !important;
}
[data-chip]:hover, [data-chip]:focus-visible {
border-color: currentColor !important;
transform: translateY(-2px);
box-shadow: 0 7px 18px rgba(20,18,15,.16);
}
[data-chip]:active { transform: translateY(0); }
[data-chip]:focus-visible { outline: 2px solid #C9A45C; outline-offset: 3px; }
[data-chip][disabled], [data-chip][aria-disabled="true"] { transform: none; box-shadow: none; }
/* Word-only actions (Clear, Remove, Show more): underlined, heavier, and
the underline thickens toward you on hover. */
[data-textbtn] {
font-weight: 600 !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 5px;
border-bottom: 0 !important;
transition: color .3s ease, text-decoration-thickness .3s ease, text-underline-offset .3s ease;
}
[data-textbtn="dark"] { color: #EBCF95 !important; }
[data-textbtn="light"] { color: #7A5B22 !important; }
[data-textbtn]:hover, [data-textbtn]:focus-visible { text-decoration-thickness: 2px !important; text-underline-offset: 3px; }
[data-textbtn="dark"]:hover { color: #F4EFE4 !important; }
[data-textbtn="light"]:hover { color: #14120F !important; }
/* The header is fixed; in-page links land below it rather than under it. */
html { scroll-padding-top: calc(var(--header-h, 72px) + 12px); }