/* Main St. Sanctuary — implemented from "Main St Sanctuary.dc.html" (Claude Design)
   Palette: ink #0B0A09 · panel #12100D · cream #F2EDE3 · gold #C79A46 · text #EDE6D9
   Auto-deploy from GitHub verified 2026-08-06 */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0; background: #0B0A09; color: #EDE6D9;
  font-family: 'Spectral', Georgia, serif; -webkit-font-smoothing: antialiased;
}
a { color: #C79A46; text-decoration: none; }
a:hover { color: #EDE6D9; }
::selection { background: #A8823C; color: #0B0A09; }
:focus-visible { outline: 2px solid #C79A46; outline-offset: 3px; }
img { display: block; }

/* type utilities */
.eyebrow { font-family: 'Libre Caslon Text', serif; font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: #C79A46; }
.eyebrow--dark { color: #7A5E22; }
.eyebrow--dim { color: #8B7A5E; }
.display { font-family: 'Libre Caslon Display', serif; font-weight: 400; color: #F6F1E7; }
.caslon { font-family: 'Libre Caslon Text', serif; }

/* skip link */
.skip { position: absolute; left: -9999px; top: 0; padding: 12px 18px; background: #C79A46; color: #0B0A09; z-index: 200; }
.skip:focus { left: 12px; top: 12px; }

/* header */
.hdr { position: sticky; top: 0; z-index: 100; background: rgba(11,10,9,.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(199,154,70,.28); }
.hdr__in { max-width: 1440px; margin: 0 auto; padding: 10px clamp(18px,4vw,48px); display: flex; align-items: center; justify-content: space-between; gap: clamp(14px,2vw,28px); min-height: 76px; flex-wrap: wrap; }
.brand { display: flex; flex-direction: column; gap: 3px; color: inherit; }
.brand__name { font-family: 'Libre Caslon Text', serif; font-size: clamp(15px,1.5vw,19px); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #F2EDE3; white-space: nowrap; }
.brand__sub { font-family: 'Libre Caslon Text', serif; font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: #8B7A5E; }
.nav { display: flex; align-items: center; gap: clamp(11px,1.9vw,32px); flex-wrap: nowrap; justify-content: flex-end; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav__link { padding: 8px 0; font-family: 'Libre Caslon Text', serif; font-size: clamp(10px,1.05vw,11.5px); letter-spacing: .18em; text-transform: uppercase; color: #EDE6D9; border-bottom: 1px solid transparent; white-space: nowrap; flex: 0 0 auto; }
.nav__link:hover { color: #C79A46; }
.nav__link.is-active { color: #C79A46; border-bottom-color: #C79A46; }
.btn-gold { font-family: 'Libre Caslon Text', serif; font-size: clamp(9.5px,1vw,11px); letter-spacing: .18em; text-transform: uppercase; color: #0B0A09; background: #C79A46; padding: 9px clamp(11px,1.3vw,16px); border: 1px solid #C79A46; white-space: nowrap; flex: 0 0 auto; }
.btn-gold:hover { background: #0B0A09; color: #C79A46; }
/* The menu does not fit across a phone. It used to slide sideways with the scrollbar
   hidden, so there was nothing to tell you the rest of it was there, and then it wrapped
   onto two cramped lines. Below 1000px it now collapses behind a button instead, and the
   links stack full width where a thumb can hit them. */
.navtoggle { display: none; align-items: center; gap: 10px; background: none; border: 1px solid rgba(199,154,70,.45); color: #EDE6D9; padding: 10px 14px; cursor: pointer; font-family: 'Libre Caslon Text', serif; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; }
.navtoggle:hover, .navtoggle:focus-visible { border-color: #C79A46; color: #C79A46; }
.navtoggle__bars { display: block; position: relative; width: 19px; height: 13px; flex: 0 0 auto; }
.navtoggle__bars span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .25s ease, opacity .18s ease, top .25s ease; }
.navtoggle__bars span:nth-child(1) { top: 0; }
.navtoggle__bars span:nth-child(2) { top: 5.75px; }
.navtoggle__bars span:nth-child(3) { top: 11.5px; }
.navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(1) { top: 5.75px; transform: rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(3) { top: 5.75px; transform: rotate(-45deg); }

@media (max-width: 1000px) {
  .navtoggle { display: inline-flex; }
  /* Hidden rather than merely short, so the links are out of the tab order when the menu
     is shut and a keyboard cannot land on something nobody can see. */
  .nav { flex: 1 1 100%; max-width: 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: visible; gap: 0; max-height: 0; opacity: 0; visibility: hidden; transition: max-height .3s ease, opacity .22s ease, visibility .3s; }
  .nav.is-open { max-height: 72vh; opacity: 1; visibility: visible; overflow-y: auto; padding: 6px 0 14px; }
  .nav__link { padding: 15px 2px; font-size: 12px; letter-spacing: .2em; border-bottom: 1px solid rgba(199,154,70,.14); }
  .nav__link.is-active { border-bottom-color: #C79A46; }
  .nav .btn-gold { margin-top: 16px; padding: 15px; text-align: center; font-size: 11px; }
  .hdr__in { padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .navtoggle__bars span { transition: none; }
}
.btn-gold--lg { font-size: 11.5px; letter-spacing: .2em; padding: 14px 24px; display: inline-block; }
.btn-gold--lg:hover { background: transparent; color: #C79A46; }
.btn-line { display: inline-block; background: none; border: 1px solid rgba(199,154,70,.5); color: #C79A46; padding: 14px 24px; cursor: pointer; font-family: 'Libre Caslon Text', serif; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; }
.btn-line:hover { background: #C79A46; color: #0B0A09; }

/* walk-in (homepage) */
.walk { position: relative; height: 520vh; background: #0B0A09; }
/* Still hero. This is the state the page ships in: one screen, poster image, no long
   scroll. The script only opens it up to the full 520vh once the flight video is loaded
   and ready to scrub, so a slow phone connection can never leave a visitor scrolling
   five screens past a frozen picture (Mike, 2026-08-07). */
.walk--static { height: 100vh; }
.walk--static .walk__foot { display: none; }
.walk__hint--still { display: none; }
.walk--static .walk__hint--live { display: none; }
.walk--static .walk__hint--still { display: inline; }
.walk__formerly { margin-top: 16px; font-family: 'Libre Caslon Text', serif; font-size: clamp(10px,1.1vw,12px); letter-spacing: .3em; text-transform: uppercase; color: #C7BCA6; }
.walk__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.walk__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0B0A09; }
.walk__stop { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }
.walk__stop:first-child { opacity: 1; }
.walk__stop img { width: 100%; height: 100%; object-fit: cover; }
.walk__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(11,10,9,.94) 0%, rgba(11,10,9,.55) 30%, rgba(11,10,9,.05) 58%, rgba(11,10,9,.55) 100%); }
/* The words sit in the middle of the frame, which is the one part the veil leaves clear, so
   the small gold lines were landing on bright roof and brickwork. This lays a band of shade
   across the middle, under the type.
   It is a band and not an ellipse on purpose. An ellipse looked right on a wide screen but
   on a phone it was 250px across and 600px tall, which reads as an oval drawn on the
   photograph rather than as shading, with its edge cutting across the roof. A band has no
   left or right edge to notice at any width.
   It lives on the title block rather than on the veil so that it fades out with the words as
   you scroll, instead of dimming the middle of the flight the whole way down. */
.walk__title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; pointer-events: none; background: linear-gradient(to bottom, rgba(11,10,9,0) 0%, rgba(11,10,9,.34) 12%, rgba(11,10,9,.77) 26%, rgba(11,10,9,.77) 84%, rgba(11,10,9,.34) 95%, rgba(11,10,9,0) 100%); }
.walk__loc { font-family: 'Libre Caslon Text', serif; font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: #C79A46; }
.walk__h1 { margin: 22px 0 0; font-family: 'Libre Caslon Display', serif; font-weight: 400; font-size: clamp(44px,8.4vw,132px); line-height: .94; letter-spacing: -.01em; color: #F6F1E7; text-wrap: balance; }
.walk__rule { width: 1px; height: 56px; background: linear-gradient(to bottom, rgba(199,154,70,0), #C79A46); margin: 30px 0 22px; }
.walk__sub { margin: 0; max-width: 38ch; font-size: clamp(15px,1.5vw,19px); line-height: 1.6; color: #D6CDBB; }
.walk__hint { margin-top: 46px; font-family: 'Libre Caslon Text', serif; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: #BCB09A; }
.walk__ticks { position: absolute; left: clamp(18px,4vw,52px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; pointer-events: none; }
.walk__tick { display: flex; align-items: center; gap: 10px; opacity: .32; }
.walk__tick span:first-child { width: 22px; height: 1px; background: #C79A46; }
.walk__tick span:last-child { font-family: 'Libre Caslon Text', serif; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: #EDE6D9; }
.walk__foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(18px,4vw,52px) clamp(34px,5vw,64px); pointer-events: none; }
.walk__callouts { position: relative; max-width: 1240px; margin: 0 auto; min-height: 190px; }
.walk__callout { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; opacity: 0; max-width: 660px; }
.walk__callout figcaption { font-family: 'Libre Caslon Text', serif; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: #C79A46; margin-bottom: 12px; }
.walk__callout p { margin: 0; font-family: 'Libre Caslon Display', serif; font-size: clamp(22px,2.9vw,38px); line-height: 1.24; color: #F6F1E7; }
.walk__barwrap { max-width: 1240px; margin: 26px auto 0; height: 1px; background: rgba(199,154,70,.22); }
/* The flight ends on black, and a full-screen black panel needs a whole screen of
   scrolling to get out of the way, which reads as a dead stretch with nothing happening.
   Lifting the section that follows into the tail of that exit means the fade to black
   hands straight over to the page. The lift is a little less than half a screen, so the
   page starts rising as the picture begins to darken and has arrived by the time it is
   out. Only the homepage has a flight, so only the homepage carries this class. */
.sec--afterwalk { position: relative; z-index: 1; margin-top: -44vh; }
/* The lift above only makes sense against the full-length scrolling hero. When the flight
   does not load, the hero stays a single screen and keeps `walk--static`, and the same lift
   swallows nearly half of it: the subtitle and the scroll cue disappeared behind this
   section entirely. So the lift is cancelled whenever the hero is in its still state. */
.walk--static + .sec--afterwalk { margin-top: 0; }
.walk__bar { height: 1px; background: #C79A46; transform-origin: left center; transform: scaleX(0); }

/* sections */
.sec { padding: clamp(70px,9vw,130px) clamp(24px,6vw,96px); }
.sec--tall { padding: clamp(78px,10vw,150px) clamp(24px,6vw,96px); }
.sec--hero { padding: clamp(64px,8vw,120px) clamp(24px,6vw,96px) clamp(40px,5vw,70px); border-bottom: 1px solid rgba(199,154,70,.16); }
.sec--ink { background: #0B0A09; }
.sec--panel { background: #12100D; }
.sec--cream { background: #F2EDE3; color: #1A1713; }
.sec--topline { border-top: 1px solid rgba(199,154,70,.16); }
.wrap { max-width: 1240px; margin: 0 auto; }
.wrap--m { max-width: 1120px; margin: 0 auto; }
.wrap--s { max-width: 1000px; margin: 0 auto; }
.wrap--xs { max-width: 960px; margin: 0 auto; }

/* card grids (gold hairline gaps) — capped at 3 across */
.grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(199,154,70,.2); border: 1px solid rgba(199,154,70,.2); }
@media (max-width: 920px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-cards { grid-template-columns: 1fr; } }
/* Reveal cards. The photograph shows by default and is held back only where there is a real
   pointer to hover with, so a phone simply shows the picture as the card scrolls into view.
   Written this way round on purpose (Mike, 2026-08-16): hiding by default and revealing on
   hover left every touch screen needing a tap on each of the six cards, which he found
   awkward, and a device that matches neither query is then left with the harmless outcome. */
.grid-cards--reveal > div { position: relative; overflow: hidden; isolation: isolate; min-height: 340px; outline: none; }
.grid-cards--reveal .card-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .5s ease, transform 1.2s ease; }
/* Two different jobs, so two different gradients. On a touch screen the photograph is behind
   the words the whole time someone is reading them, so this one is heavy enough to read
   through: measured, the body gray holds 4.5:1 against the brightest part of all six
   photographs. The lighter one below is for the desktop hover, where the photograph appears
   over text that was already legible against the plain card. */
.grid-cards--reveal .card-scrim { position: absolute; inset: 0; z-index: -1; opacity: 1; transition: opacity .5s ease; background: linear-gradient(180deg, rgba(11,10,9,.95) 0%, rgba(11,10,9,.90) 40%, rgba(11,10,9,.84) 70%, rgba(11,10,9,.62) 100%); }
@media (hover: hover) and (pointer: fine) {
  .grid-cards--reveal .card-img { opacity: 0; transform: scale(1.05); }
  .grid-cards--reveal .card-scrim { opacity: 0; background: linear-gradient(180deg, rgba(11,10,9,.92) 0%, rgba(11,10,9,.55) 52%, rgba(11,10,9,.12) 100%); }
  .grid-cards--reveal > div:hover .card-img, .grid-cards--reveal > div:focus .card-img { opacity: 1; transform: none; }
  .grid-cards--reveal > div:hover .card-scrim, .grid-cards--reveal > div:focus .card-scrim { opacity: 1; }
}
.grid-cards--reveal > div:focus-visible { outline: 1px solid rgba(199,154,70,.6); outline-offset: -1px; }
@media (prefers-reduced-motion: reduce) { .grid-cards--reveal .card-img { transform: none; transition: opacity .2s linear; } }
/* lightbox */
.lightbox-link { display: block; cursor: zoom-in; }

/* Archive thumbnails are cropped to one shape so the grid reads as a set rather than
   a pile of different sizes. The crop is only the thumbnail: clicking still opens the
   whole picture, uncropped. 4:3 because the archive runs from a 0.5 newspaper page to
   a 1.6 painting, and this sits near the middle without gutting either end. */
.fig-thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.fig-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: clamp(18px, 4vw, 56px); background: rgba(8,7,6,.92); cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; box-shadow: 0 18px 60px rgba(0,0,0,.55); background: #FBF8F1; }
.lightbox[hidden] { display: none; }
/* A tall scan is not shrunk to fit the window. Fitting a newspaper page to a laptop
   screen leaves the body text too small to read, so anything this shape opens at its
   own size and the lightbox scrolls instead. site.js adds the class once the picture
   has loaded and its real proportions are known. */
.lightbox--tall { align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; }
.lightbox--tall img { max-height: none; cursor: default; }
.grid-cards > div { background: #0B0A09; padding: 34px 28px 38px; display: flex; flex-direction: column; gap: 12px; }
.grid-cards .num { font-family: 'Libre Caslon Text', serif; font-size: 11px; letter-spacing: .3em; color: #8B7A5E; }
.grid-cards h3 { margin: 0; font-family: 'Libre Caslon Text', serif; font-weight: 700; font-size: 23px; color: #F6F1E7; }
.grid-cards p { margin: 0; font-size: 15px; line-height: 1.7; color: #A99C86; }

/* the small line that tells people the cards have pictures behind them */
.card-hint { margin: 0 2px 18px; font-family: 'Libre Caslon Text', serif; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #8B7A5E; }
/* Only true where there is a pointer to hover with. On a touch screen the pictures are
   already showing, so the line would be telling people to do something with no effect. */
.card-hint--pointer { display: none; }
@media (hover: hover) and (pointer: fine) { .card-hint--pointer { display: block; } }

/* follow band (foot of every page) */
.social { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.social__link { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border: 1px solid #C0AE8C; color: #1A1713; font-family: 'Libre Caslon Text', serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.social__ico { flex: 0 0 auto; }
.social__link:hover, .social__link:focus-visible { background: #1A1713; border-color: #1A1713; color: #F2EDE3; }
@media (max-width: 430px) { .social { gap: 10px; } .social__link { padding: 12px 16px; font-size: 11px; letter-spacing: .12em; } }

/* signup band */
.signup input[type=email] { flex: 1 1 260px; min-width: 0; padding: 16px 18px; font-family: 'Spectral', Georgia, serif; font-size: 16px; color: #1A1713; background: #FBF8F1; border: 1px solid #C0AE8C; border-radius: 0; }
.signup input[type=email]:focus { border-color: #7A5E22; outline: none; }
.signup button { padding: 16px 28px; background: #1A1713; color: #F2EDE3; border: 1px solid #1A1713; cursor: pointer; font-family: 'Libre Caslon Text', serif; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; }
.signup button:hover { background: #7A5E22; border-color: #7A5E22; }
.signup .follow a { color: #7A5E22; font-size: 15px; border-bottom: 1px solid rgba(138,108,46,.4); }
.signup .follow a:hover { color: #1A1713; }
.signup .btn-dark { display: inline-block; padding: 16px 30px; background: #1A1713; color: #F2EDE3; border: 1px solid #1A1713; font-family: 'Libre Caslon Text', serif; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; }
.signup .btn-dark:hover { background: #7A5E22; border-color: #7A5E22; color: #F2EDE3; }
.visually-hidden { position: absolute; left: -9999px; }

/* contact form */
.cform { display: flex; flex-direction: column; gap: 22px; max-width: 520px; }
.cform__row { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cform label { font-family: 'Libre Caslon Text', serif; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: #8B7A5E; }
.cform input[type=text], .cform input[type=email], .cform input[type=tel], .cform textarea { width: 100%; padding: 14px 16px; font-family: 'Spectral', Georgia, serif; font-size: 16px; color: #F6F1E7; background: #0B0A09; border: 1px solid rgba(199,154,70,.35); border-radius: 0; }
.cform input[type=text]:focus, .cform input[type=email]:focus, .cform input[type=tel]:focus, .cform textarea:focus { border-color: #C79A46; outline: none; }
/* "optional" sits inside the label so nobody has to guess which fields they can skip */
.cform__opt { margin-left: 8px; letter-spacing: .18em; color: #6E6455; text-transform: none; font-style: italic; }
.cform textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.cform input[type=file] { font-family: 'Spectral', Georgia, serif; font-size: 14px; color: #A99C86; max-width: 100%; }
.cform__note { font-size: 13.5px; line-height: 1.6; color: #8B7A5E; }
.cform__trap { position: absolute; left: -9999px; }
.cform__files { list-style: none; margin: -10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cform__files li { font-size: 13.5px; line-height: 1.5; color: #A99C86; padding-left: 16px; position: relative; word-break: break-word; display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline; }
.cform__files li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: #C79A46; }
.cform__files li.is-bad { color: #E0A08A; }
.cform__files li.is-bad::before { background: #E0A08A; }
/* One bar per file, filled by the count of bytes that have actually left the browser.
   The width moves in a single smooth step and nothing here pulses or flashes. */
.cfile__state { font-size: 12px; letter-spacing: .04em; color: #8B7A5E; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cform__files li.is-done { color: #A99C86; }
.cform__files li.is-done .cfile__state { color: #C79A46; }
.cform__files li.is-done::before { background: #C79A46; }
.cfile__track { grid-column: 1 / -1; height: 2px; background: rgba(199,154,70,.18); overflow: hidden; }
.cfile__fill { display: block; height: 100%; width: 0; background: #C79A46; transition: width .25s linear; }
.cform__files li.is-bad .cfile__fill { background: #E0A08A; }
@media (prefers-reduced-motion: reduce) { .cfile__fill { transition: none; } }
.cform button { padding: 16px 30px; background: #C79A46; color: #0B0A09; border: 1px solid #C79A46; cursor: pointer; font-family: 'Libre Caslon Text', serif; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; }
.cform button:hover { background: transparent; color: #C79A46; }
.cform button[disabled] { opacity: .55; cursor: default; }
.cform button[disabled]:hover { background: #C79A46; color: #0B0A09; }

/* other properties (stay page) */
.prop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px,1fr)); gap: 1px; background: rgba(199,154,70,.2); border: 1px solid rgba(199,154,70,.2); }
.prop { position: relative; isolation: isolate; overflow: hidden; min-height: 260px; background: #0B0A09; padding: 30px 26px 34px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.prop__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .5s ease, transform 1.2s ease; }
/* Dark at the foot, clear at the head, so the photograph opens up behind the type without
   ever getting underneath it. The steep step at 56% is where the location line begins;
   measured, the gold reads at 6.8:1 against it on all three photographs. Over the plain
   card this layer is invisible, so a card with no photograph looks exactly as it did. */
.prop__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,10,9,.10) 0%, rgba(11,10,9,.30) 30%, rgba(11,10,9,.94) 56%, rgba(11,10,9,.99) 100%); }
/* The photograph is always showing, on every device. Mike asked for this on 2026-08-16:
   someone choosing between the three places wants to see all three at once, so nothing here
   is held back for a hover to reveal. */
.prop__where { font-family: 'Libre Caslon Text', serif; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: #C79A46; }
.prop__name { font-family: 'Libre Caslon Display', serif; font-size: clamp(22px,2.4vw,30px); line-height: 1.15; color: #F6F1E7; }
.prop__go { margin-top: 4px; font-family: 'Libre Caslon Text', serif; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #8B7A5E; }
.prop:hover .prop__go, .prop:focus-visible .prop__go { color: #C79A46; }
@media (prefers-reduced-motion: reduce) { .prop__img { transform: none; transition: opacity .2s linear; } }

/* footer */
.ftr { background: #0B0A09; border-top: 1px solid rgba(199,154,70,.22); padding: clamp(56px,7vw,96px) clamp(24px,6vw,96px) 46px; }
.ftr__grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 44px; }
.ftr__col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ftr__label { font-family: 'Libre Caslon Text', serif; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: #8B7A5E; margin-bottom: 4px; }
.ftr a.pg { color: #C79A46; font-family: 'Spectral', serif; font-size: 15px; }
.ftr a.pg:hover { color: #EDE6D9; }
.ftr__base { max-width: 1240px; margin: 56px auto 0; padding-top: 22px; border-top: 1px solid rgba(199,154,70,.14); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: 12.5px; color: #8B7A5E; }

/* reveal (JS sets initial state; this covers no-JS) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}