/* ══════════════════════════════════════════════════════════════════
Frank Schlichting — Site-wide styles
Loaded after Saaga's app.min.css. All classes are prefixed "fs-" so
nothing collides with Saaga's own component classes.
══════════════════════════════════════════════════════════════════ */
/* Smooth in-page scrolling, except for readers who ask their device for less motion (Build 2) */
@media (prefers-reduced-motion: no-preference) { html.fs-site { scroll-behavior: smooth; } }
body.fs-site {
margin: 0;
background: var(--fs-dark-base);
color: var(--fs-body-dark);
font-family: var(--fs-font-serif);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h2{
color: #2A2622;
}
body.fs-site a { text-decoration: none; }
/* ---- Layout helpers ---- */
.fs-wrap { max-width: var(--fs-max); margin: 0 auto; padding-right: 40px !important; padding-left: 40px !important; }
.fs-signage { font-family: var(--fs-font-signage); }
.fs-kick {
font-family: var(--fs-font-signage);
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
}
.fs-kick--gold { color: var(--fs-gold); }
.fs-kick--red { color: var(--fs-red); }
.fs-kick--bronze { color: var(--fs-bronze); }
.fs-kick--muted { color: var(--fs-muted-dark-2); }
.fs-section--cream { background: var(--fs-cream); color: var(--fs-ink); }
.fs-section--dark { background: var(--fs-dark-base); color: var(--fs-body-dark); }
.fs-section--raised { background: var(--fs-dark-raised); }
.fs-section--deepest { background: var(--fs-dark-deepest); }
/* ---- Grain overlay (optional per spec, on by default) ---- */
.fs-grain {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.05;
mix-blend-mode: overlay;
background-repeat: repeat;
background-size: 128px 128px;
/* fractal noise generated inline via SVG filter — no JS/canvas needed */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---- Announcement bar ---- */
.fs-announcement {
display: block;
background: var(--fs-dark-deepest);
border-bottom: 1px solid var(--fs-border-dark);
color: var(--fs-gold);
font-size: 13px;
letter-spacing: 1.2px;
padding: 11px 16px;
text-align: center;
text-transform: uppercase;
z-index: 1;
}
@media (max-width:767px){
.fs-announcement{
font-size: 10px;
}
}
.fs-announcement strong { color: var(--fs-bone); font-weight: 700; }
/* ---- Header / nav ---- */
.fs-header {
background: var(--fs-dark-base);
border-bottom: 1px solid var(--fs-border-dark);
position: sticky;
top: 0;
z-index: 10;
}
.fs-header__row {
padding-top: 16px;
padding-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.fs-wordmark {
font-family: var(--fs-font-signage);
font-size: 24px;
font-weight: 700;
letter-spacing: 1px;
color: var(--fs-bone);
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.fs-wordmark span { color: var(--fs-gold); }
.fs-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: flex-end; }
.fs-nav__link {
position: relative; /* for the active-page line (::after, end of this file) */
font-family: var(--fs-font-signage);
color: var(--fs-muted-dark);
font-size: 16px;
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 600;
padding: 2.5px 0; /* was 3px + a 2px border below: words centred, same height */
}
.fs-nav__link:hover { color: var(--fs-bone); }
.fs-btn-subscribe {
font-family: var(--fs-font-signage);
background: var(--fs-gold);
color: var(--fs-dark-base);
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 9px 20px;
border-radius: var(--fs-radius);
font-size: 15px;
border: none;
cursor: pointer;
display: inline-block;
}
.fs-btn-subscribe:hover { background: var(--fs-gold-hover); color: var(--fs-dark-base); }
/* The active-page line (every section, header and phone menu): see
"1.19.18 · The active-page line" at the end of this file. */
/* 1.21.3: the links give way to the Menu button below 1161px (was 781px): eight
links ("In Memory" added) no longer fit beside the wordmark below about 1140px,
and the row used to wrap onto a second line from about 1000px down. With the
ninth link ("Stories", when Fs show stories is on) the switch is at 1261px. */
/* 1.22.6: a ninth link, "Map": the switch moves to 1241px (1341px with Stories on). */
/* 1.25.0: the Journal (Design setting "Fs journal nav"). Off: nine links, 1241px as
before. On: eight links (Journal in, Map and Contact out), the switch at 1161px
(fs-header--jn). On, keep Map and Contact: ten links, 1341px (fs-header--jn-all,
where Stories was). */
@media (max-width: 1240px) {
.fs-header:not(.fs-header--jn) .fs-nav__link { display: none; }
}
@media (max-width: 1160px) {
.fs-header--jn .fs-nav__link { display: none; }
}
@media (max-width: 1340px) {
.fs-header--jn-all .fs-nav__link { display: none; }
}
/* ---- Buttons ---- */
.fs-btn {
font-family: var(--fs-font-signage);
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
border-radius: var(--fs-radius);
border: none;
cursor: pointer;
display: inline-block;
text-align: center;
line-height: 23px !important;
height: fit-content;
}
/* Size variants — verified against the canonical file: hero/closer
buttons, excerpt-panel/inline-form buttons, and the museum outline
button are three genuinely different sizes, not one. */
.fs-btn--lg { font-size: 16px; padding: 11px 24px; }
.fs-btn--md { font-size: 15px; padding: 10px 20px; }
.fs-btn--sm { font-size: 14.5px; padding: 10px 18px; }
.fs-btn-gold { background: var(--fs-gold); color: var(--fs-dark-base); }
.fs-btn-gold:hover { background: var(--fs-gold-hover); color: var(--fs-dark-base); }
.fs-btn-outline-red {
border: 1.5px solid var(--fs-red);
color: var(--fs-red);
background: transparent;
}
.fs-btn-outline-red:hover { background: var(--fs-red); color: var(--fs-cream); }
/* ---- Forms (newsletter + contact share these) ---- */
.fs-field {
border-radius: var(--fs-radius);
font-family: var(--fs-font-serif);
box-sizing: border-box;
outline: none;
}
/* Size variants — verified against the canonical file: hero/closer
newsletter fields, the excerpt-panel field, and Contact's form
fields are three genuinely different sizes, not one. */
.fs-field--lg { padding: 13px 16px; font-size: 15.5px; }
.fs-field--sm { padding: 11px 14px; font-size: 14.5px; }
.fs-field--form { padding: 12px 14px; font-size: 15.5px; }
.fs-field--dark {
border: 1px solid #4A4238;
background: var(--fs-dark-raised);
color: var(--fs-bone);
}
.fs-field--dark:focus { border-color: var(--fs-gold); }
.fs-field--cream {
border: 1px solid var(--fs-border-cream);
background: #FFFFFF;
color: var(--fs-ink);
}
.fs-field--cream:focus { border-color: var(--fs-gold); }
.fs-newsletter-form { display: flex; flex-wrap: wrap; gap: 10px; }
.fs-newsletter-form input[type="email"] { flex: 1 1 200px; min-width: 0; }
.fs-newsletter-form__note { margin: 12px 0 0; font-size: 13.5px; color: var(--fs-muted-dark-2); }
.fs-newsletter-form__success {
font-family: var(--fs-font-serif);
font-size: 15.5px;
}
.fs-newsletter-form__error {
margin-top: 8px;
font-size: 13.5px;
color: var(--fs-red);
}
/* ---- Cards (letter cards, channel cards, mine cards) ---- */
.fs-card {
background: var(--fs-panel);
border: 1px solid var(--fs-border-cream);
border-radius: var(--fs-radius);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--fs-shadow-card);
transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
color: inherit;
}
a.fs-card:hover, .fs-card--hover:hover {
border-color: var(--fs-gold);
box-shadow: var(--fs-shadow-card-hover);
transform: translateY(-4px);
color: inherit;
}
/* Build 5b: 16:9 instead of a 190px strip, and framed a little high, so heads aren't cut off */
.fs-card__media { height: auto; min-height: 190px; aspect-ratio: 16 / 9; background-size: cover; background-position: 50% 30%; }
.fs-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.fs-card__title { font-family: var(--fs-font-serif); font-size: 21px; line-height: 1.25; margin: 8px 0 0; font-weight: 700; }
.fs-card__blurb { font-size: 15px; color: var(--fs-body-cream-2); margin: 10px 0 0; }
.fs-card__footer { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: auto; padding-top: 16px; }
.fs-card__date { font-size: 13px; color: var(--fs-muted-dark-2); }
.fs-card__cta { color: var(--fs-red); font-size: 14px; font-weight: bold; }
.fs-card__cta:hover { text-decoration: underline; color: var(--fs-red); }
/* dashed "coming soon" card variant (mines index) */
.fs-card--dashed { border-style: dashed; opacity: 0.75; }
.fs-card--dashed .fs-card__media { filter: grayscale(0.4); }
/* ---- Stat band ---- */
.fs-statband { display: flex; justify-content: space-around; text-align: center; flex-wrap: wrap; gap: 18px 28px; }
.fs-stat__n { font-family: var(--fs-font-signage); font-size: 36px; font-weight: 700; color: var(--fs-gold); }
.fs-stat__l { font-family: var(--fs-font-signage); font-size: 12.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--fs-muted-dark-2); margin-top: 2px; }
/* ---- Chips (nearby workings) ---- */
.fs-chip {
display: inline-block;
border: 1.5px solid var(--fs-red);
color: var(--fs-red);
padding: 10px 18px;
border-radius: 999px;
font-family: var(--fs-font-signage);
font-weight: 700;
font-size: 13.5px;
letter-spacing: 1.4px;
text-transform: uppercase;
transition: background 0.2s ease, color 0.2s ease;
}
.fs-chip:hover { background: var(--fs-red); color: #FFFFFF; }
/* ---- Film / video trigger block ---- */
.fs-filmblock {
position: relative;
border: 1px solid var(--fs-border-dark);
border-radius: var(--fs-radius);
overflow: hidden;
cursor: pointer;
box-shadow: var(--fs-shadow-media);
background: #0C0A08;
transition: border-color 0.28s ease, transform 0.28s ease;
}
.fs-filmblock:hover { border-color: var(--fs-gold); transform: translateY(-4px); }
/* Still image — aspect-ratio based (was a fixed 430px height), and now
a real ![]()
with object-fit instead of a CSS background-image, so
it scales correctly at the new wider max-width instead of looking
disproportionately tall. */
.fs-filmblock__still { position: relative; aspect-ratio: 2.4 / 1; overflow: hidden; }
.fs-filmblock__still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a placeholder still pasted into post content (PASTE_URL_…) stays out of sight until fs-site.js (0) swaps in the film's still */
.fs-filmblock__still img[src*="PASTE_URL"] { visibility: hidden; }
.fs-filmblock__play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 92px; height: 92px; border-radius: 50%;
background: rgba(20,17,14,0.55); border: 2px solid var(--fs-gold);
display: flex; align-items: center; justify-content: center;
transition: background 0.25s ease, transform 0.25s ease;
}
.fs-filmblock:hover .fs-filmblock__play { background: rgba(20,17,14,0.85); transform: translate(-50%,-50%) scale(1.08); }
.fs-filmblock__play-tri {
width: 0; height: 0; margin-left: 6px;
border-left: 25px solid var(--fs-gold);
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
/* Caption — no longer an absolute-positioned gradient overlay on the
photo. Sits as a normal block below the still image, on the card's
own dark background. */
.fs-filmblock__caption {
padding: 28px 34px 34px;
color: var(--fs-bone);
}
.fs-filmblock__caption h3 { font-family: var(--fs-font-serif); font-size: 28px; margin: 8px 0 0; font-weight: 700; }
.fs-filmblock__caption p { margin: 12px 0 0; font-size: 16.5px; color: var(--fs-body-dark); max-width: 1160px; line-height: 1.62; }
.fs-filmblock__pill {
position: absolute; top: 14px; right: 14px;
background: rgba(13,12,10,0.9); border: 1.5px solid var(--fs-gold); color: var(--fs-gold);
font-family: var(--fs-font-signage); font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
padding: 10px 18px; border-radius: var(--fs-radius); cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.fs-filmblock__pill:hover { background: var(--fs-gold); color: var(--fs-dark-base); }
/* ---- Danger & respect notice (mine pages) ---- */
.fs-notice {
margin-top: 22px;
border: 1px solid rgba(201,162,39,0.45);
border-radius: var(--fs-radius);
padding: 20px 24px;
background: rgba(201,162,39,0.05);
}
.fs-notice p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--fs-muted-dark); }
/* ---- Video lightbox ---- */
.fs-lightbox {
position: fixed; inset: 0; background: #000; z-index: 200;
display: none; align-items: center; justify-content: center; padding: 4vh 4vw;
cursor: pointer;
}
.fs-lightbox.is-open { display: flex; }
.fs-lightbox__inner {
position: relative; width: min(1100px, 92vw); aspect-ratio: 16/9;
background: #000; border: 1px solid var(--fs-border-dark);
box-shadow: 0 40px 120px rgba(0,0,0,0.8); cursor: default;
}
.fs-lightbox__inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
/* a Wistia film (the home page's two) plays without the frame's border (1.14.4) */
.fs-lightbox.is-wistia .fs-lightbox__inner { border: 0; }
/* Shown instead of the iframe when a trigger has no real video-src
yet — keeps the person in context rather than silently redirecting
them away, matching both mockups' .lbx .player placeholder. */
.fs-lightbox__demo {
position: absolute; inset: 0; background: #0B0908; border: 1px solid var(--fs-border-dark);
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px;
}
.fs-lightbox__demo-kick { font-family: var(--fs-font-signage); font-weight: 600; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--fs-gold); }
.fs-lightbox__demo-title { margin-top: 8px; color: var(--fs-bone); font-size: 19px; font-family: var(--fs-font-serif); }
.fs-lightbox__demo-desc { margin-top: 6px; color: var(--fs-muted-dark); font-size: 13.5px; max-width: 480px; }
.fs-lightbox__close {
position: absolute; top: -46px; right: 0;
background: rgba(13,12,10,0.9); border: 1.5px solid var(--fs-gold); color: var(--fs-gold);
font-family: var(--fs-font-signage); font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
padding: 8px 16px; border-radius: var(--fs-radius); cursor: pointer;
}
.fs-lightbox__close:hover { background: var(--fs-gold); color: var(--fs-dark-base); }
/* ---- Footer ---- */
.fs-footer { padding: 44px 0 54px; color: var(--fs-muted-dark-2); font-size: 14.5px; background: var(--fs-dark-deepest); border-top: 1px solid var(--fs-border-dark); }
.fs-footer__row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; }
.fs-footer__brand { display: flex; align-items: center; gap: 14px; }
.fs-footer__brand-name { font-family: var(--fs-font-signage); font-weight: 700; color: var(--fs-bone); font-size: 18px; letter-spacing: 1px; text-transform: uppercase; }
.fs-footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.fs-footer__col { display: flex; flex-direction: column; gap: 8px; }
.fs-footer__col-title { font-family: var(--fs-font-signage); font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; }
.fs-footer a { color: var(--fs-muted-dark-2); }
.fs-footer a:hover { color: var(--fs-gold); }
/* ---- Plain text link hover (underline) — for links with no other
component class, e.g. "Watch on YouTube", "More about Frank" ---- */
.fs-underline-hover:hover { text-decoration: underline; }
/* ---- Channel card (Films & Archive section) ---- */
.fs-channel-card {
border: 1px solid var(--fs-border-dark);
border-radius: var(--fs-radius);
background: var(--fs-dark-raised);
padding: 26px 28px;
transition: border-color 0.2s ease;
}
.fs-channel-card:hover { border-color: var(--fs-gold); }
/* ---- Callout box (gold left border, cream bg) ---- */
.fs-callout--gold {
background: var(--fs-panel);
border-left: 4px solid var(--fs-gold);
border-radius: 0 2px 2px 0;
padding: 26px 30px;
margin: 30px 0;
}
/* ---- Form labels (contact page) ---- */
.fs-form-label {
font-family: var(--fs-font-signage);
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--fs-body-cream-2);
font-weight: 600;
margin: 18px 0 6px;
display: block;
}
.fs-field--textarea { resize: vertical; }
/* ---- Info card (Contact page's "Work with Frank" cards) ---- */
.fs-info-card {
background: var(--fs-panel);
border: 1px solid var(--fs-border-cream);
border-radius: 2px;
padding: 20px 22px;
}
.fs-info-card h3 {
font-family: var(--fs-font-signage);
font-size: 19px;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.fs-info-card p {
margin: 8px 0 0;
font-size: 14.5px;
color: var(--fs-body-cream-2);
line-height: 1.6;
}
/* ══════════════════════════════════════════════════════════════════
Contact page components (new design — rich form, profile card,
file dropzone, Work with Frank band)
══════════════════════════════════════════════════════════════════ */
/* Two-column layout: form left, profile card right */
.fs-contact-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 56px; align-items: start; }
@media (max-width: 940px) { .fs-contact-grid { grid-template-columns: 1fr; gap: 36px; } }
/* Rich form fields — a heavier variant than .fs-field, matching the
Contact mockup exactly (its own border color/shadow, not reusing
the plainer .fs-field--form used elsewhere) */
.fs-rfield { margin-bottom: 18px; }
.fs-rfield input, .fs-rfield select, .fs-rfield textarea {
width: 100%; font-family: var(--fs-font-serif); font-size: 15.5px; color: var(--fs-ink);
background: #FFFDF8; border: 1.5px solid #C9BFA8; border-radius: var(--fs-radius);
padding: 12px 14px; box-sizing: border-box;
transition: border-color 0.28s ease, box-shadow 0.28s ease;
}
.fs-rfield textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.fs-rfield input:focus, .fs-rfield select:focus, .fs-rfield textarea:focus {
outline: none; border-color: var(--fs-gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.18);
}
.fs-sendrow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.fs-btn-send {
display: inline-block; background: var(--fs-closer-accent); border: 1.5px solid var(--fs-closer-accent); color: #fff;
border-radius: var(--fs-radius); padding: 13px 30px;
font-family: var(--fs-font-signage); font-weight: 700; font-size: 13px; letter-spacing: 1.8px; text-transform: uppercase;
text-decoration: none; cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; box-shadow: var(--fs-shadow-card);
}
.fs-btn-send:hover { background: #A93227; border-color: #A93227; transform: translateY(-1px); }
.fs-sendnote { font-size: 13.5px; color: var(--fs-body-cream-2); font-style: italic; max-width: 340px; line-height: 1.5; }
/* File dropzone (the contact form sends its files since 1.18.3;
see the 1.18.3 section at the end) */
.fs-dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fs-dropzone {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center;
border: 1.5px dashed #C9BFA8; border-radius: 3px; background: #FFFDF8; padding: 24px 20px; cursor: pointer;
transition: border-color 0.28s ease, background 0.28s ease, transform 0.28s ease;
}
.fs-dropzone:hover, .fs-dropzone.fs-dropzone--over { border-color: var(--fs-gold); background: #FFFCF2; transform: translateY(-1px); }
.fs-dropzone__main { font-family: var(--fs-font-signage); font-weight: 700; font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fs-ink); }
.fs-dropzone__sub { font-size: 13.5px; color: var(--fs-body-cream-2); line-height: 1.6; }
.fs-droplist { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.fs-droplist .fs-fitem {
display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--fs-body-cream-2);
background: #FFFDF8; border: 1px solid #E4DCC8; border-radius: var(--fs-radius); padding: 7px 11px;
}
.fs-droplist .fs-fitem b { font-weight: 400; color: var(--fs-ink); }
.fs-droplist .fs-fitem .fs-fitem__size { margin-left: auto; color: var(--fs-muted-dark-2); font-size: 12.5px; }
.fs-dropnote { font-size: 13px; color: var(--fs-body-cream-2); line-height: 1.6; margin-top: 10px; font-style: italic; max-width: 560px; }
/* Profile card (right column) */
.fs-profile-card { border: 1px solid var(--fs-border-cream); border-radius: 3px; overflow: hidden; background: #fff; box-shadow: var(--fs-shadow-card); }
.fs-profile-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 58%; display: block; }
.fs-profile-card__body { padding: 20px 22px 22px; }
.fs-profile-card__kick { font-family: var(--fs-font-signage); font-weight: 700; font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-closer-accent); }
.fs-profile-card h3 { font-size: 21px; margin-top: 6px; font-family: var(--fs-font-serif); }
.fs-profile-card p { font-size: 14.5px; line-height: 1.65; margin-top: 9px; color: var(--fs-body-cream-2); }
.fs-profile-meta { margin-top: 16px; border-top: 1px solid #E4DCC8; padding-top: 14px; font-size: 13.5px; color: var(--fs-body-cream-2); line-height: 1.7; }
.fs-profile-meta b { color: var(--fs-ink); }
/* Work with Frank — photo + 3 cards, light variant */
.fs-wband { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 44px; align-items: center; margin-top: 22px; }
@media (max-width: 1000px) { .fs-wband { grid-template-columns: 1fr; gap: 28px; } }
.fs-wimg { width: 100%; aspect-ratio: 3/2; object-fit: cover; object-position: center 50%; border-radius: 3px; display: block; box-shadow: var(--fs-shadow-card); }
.fs-wgrid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.fs-wcard { border: 1.5px solid var(--fs-ink); border-radius: var(--fs-radius); padding: 22px 24px; background: #FFFDF8; transition: transform 0.28s ease, box-shadow 0.28s ease; }
.fs-wcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(43,35,23,0.12); }
.fs-wcard__kick { font-family: var(--fs-font-signage); font-weight: 700; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--fs-closer-accent); }
.fs-wcard p { font-size: 14.5px; line-height: 1.65; margin-top: 10px; color: var(--fs-body-cream-2); }
/* Work with Frank — dark band variant */
.fs-workdark { background: var(--fs-dark-base); padding: 64px 0 72px; }
.fs-workdark .fs-wcard { background: rgba(255,255,255,0.03); border: 1.5px solid rgba(201,162,39,0.42); }
.fs-workdark .fs-wcard:hover { background: rgba(255,255,255,0.05); box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
.fs-workdark .fs-wcard__kick { color: var(--fs-gold); }
.fs-workdark .fs-wcard p { color: #CFC5B0; }
.fs-workdark .fs-wimg { box-shadow: 0 12px 30px rgba(0,0,0,0.5); border: 1px solid var(--fs-border-dark); }
/* ═════════════════════════════════════════════════
The old Films page's components (feature grid, channel cards, mission
quote, series grid, records band) were removed in Build 5: the page is
rebuilt as page-films.hbs (.fs-fm), and no page or post used them.
═════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
Mine page components (custom-mine.hbs + the HTML content block
Frank/Colleen paste into each mine post's editor)
══════════════════════════════════════════════════════════════════ */
/* Breadcrumb (dark, under header) */
.fs-breadcrumb {
background: var(--fs-dark-base);
border-bottom: 1px solid var(--fs-border-dark);
}
.fs-breadcrumb__row {
padding: 12px 0;
font-size: 13px;
letter-spacing: 2px;
color: var(--fs-muted-dark-2);
}
.fs-breadcrumb__row a { font-weight: 600; }
.fs-breadcrumb__current { color: var(--fs-bone); }
/* Hero "plaque" (staked/closed dates) — NOT auto-positioned into the
hero anymore. That required either a fragile CSS overlap trick
(fought Saaga's own blockquote styling and lost) or a Ghost field
that doesn't exist (Post only has Title/Feature Image/Excerpt/Tags,
all already spoken for). Dates now fold into the Excerpt sentence
itself instead — genuinely inside the hero, no CSS trick needed.
This class stays available as a manual style if ever wanted
directly in an HTML block, just not auto-applied to a blockquote. */
.fs-plaque {
margin-top: 22px;
display: inline-block;
border: 1px solid rgba(201,162,39,0.55);
border-radius: var(--fs-radius);
padding: 9px 16px;
font-size: 12.5px;
letter-spacing: 2.4px;
color: var(--fs-gold);
background: rgba(13,12,10,0.45);
font-family: var(--fs-font-signage);
text-transform: uppercase;
}
/* Mine page's stat band uses a smaller size than the homepage's —
verified against mines/phoenix/index.html directly (32px/12px vs
Home's 36px/12.5px). */
.fs-statband--mine .fs-stat__n { font-size: 32px; }
.fs-statband--mine .fs-stat__l { font-size: 12px; letter-spacing: 2.2px; }
/* The Record card (sticky sidebar) */
/* Sticky wrapper — NEW: now holds both the record card AND the audio
player together, so they scroll as one unit. Moved position:sticky
here from .fs-record-card itself, since a single card no longer
covers the whole sticky column. */
.fs-record-wrap {
flex: 0 0 340px;
position: sticky;
top: 86px;
display: flex;
flex-direction: column;
gap: 22px;
}
.fs-record-card {
background: var(--fs-panel);
border: 1px solid var(--fs-border-cream);
border-radius: var(--fs-radius);
padding: 24px 26px;
box-shadow: var(--fs-shadow-card);
}
.fs-record-card__label {
font-family: var(--fs-font-signage);
font-size: 11.5px;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--fs-muted-dark-2);
margin-top: 13px;
}
.fs-record-card__label:first-of-type { margin-top: 0; }
.fs-record-card__value {
font-size: 14.5px;
margin-top: 3px;
line-height: 1.5;
}
.fs-record-card__value--mono {
font-family: var(--fs-font-mono);
font-weight: bold;
letter-spacing: 0.5px;
}
/* Download-the-record block, inside the Record card */
.fs-dlblock { margin-top: 22px; border-top: 1px solid var(--fs-border-cream); padding-top: 20px; }
.fs-dlblock__kick { font-family: var(--fs-font-signage); font-weight: 700; font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-dlblock__desc { margin: 8px 0 14px; font-size: 13.5px; color: var(--fs-muted-dark-2); line-height: 1.6; }
.fs-btn-dl {
display: block; text-align: center; background: var(--fs-closer-accent); border: 1.5px solid var(--fs-closer-accent); color: #fff;
border-radius: var(--fs-radius); padding: 12px 18px;
font-family: var(--fs-font-signage); font-weight: 700; font-size: 13px; letter-spacing: 1.8px; text-transform: uppercase;
text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; box-shadow: var(--fs-shadow-card);
}
.fs-btn-dl:hover { background: #A93227; border-color: #A93227; transform: translateY(-1px); }
.fs-inboxline { margin-top: 10px; text-align: center; font-size: 13.5px; color: var(--fs-muted-dark-2); }
.fs-inboxline a { color: var(--fs-closer-accent); font-weight: bold; text-decoration: none; }
.fs-inboxline a:hover { text-decoration: underline; }
.fs-rfine { margin-top: 14px; font-size: 12px; font-style: italic; color: var(--fs-muted-dark-2); line-height: 1.5; }
/* Audio player (Frank's narrated overview) */
.fs-audio {
background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-left: 3px solid var(--fs-gold);
border-radius: var(--fs-radius); padding: 16px 20px; box-shadow: var(--fs-shadow-card);
display: flex; align-items: center; gap: 14px;
}
.fs-aplay {
flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--fs-dark-base); position: relative; cursor: pointer;
transition: transform 0.25s ease, background 0.25s ease;
}
.fs-aplay:hover { transform: scale(1.08); background: var(--fs-border-dark); }
.fs-aplay::after {
content: ""; position: absolute; left: 15px; top: 11px;
border-left: 12px solid var(--fs-gold); border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.fs-audio__kick { font-family: var(--fs-font-signage); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-audio__desc { margin-top: 2px; font-size: 13.5px; color: var(--fs-muted-dark-2); }
/* Record in Full — long-form section with sticky in-page nav */
.fs-rifgrid { display: grid; grid-template-columns: minmax(0, 68ch) 250px; gap: 54px; justify-content: start; align-items: start; margin-top: 22px; }
@media (max-width: 1080px) { .fs-rifgrid { grid-template-columns: 1fr; gap: 26px; } }
.fs-rifgrid h3 { font-size: 24px; margin: 30px 0 8px; letter-spacing: 0.2px; }
.fs-rifgrid p { max-width: 70ch; line-height: 1.75; margin: 0 0 6px; }
.fs-rifnav { position: sticky; top: 96px; border-left: 2px solid var(--fs-gold); padding-left: 18px; }
.fs-rifnav__kick { font-family: var(--fs-font-signage); font-weight: 700; font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-rifnav a { display: block; margin-top: 11px; font-size: 14.5px; line-height: 1.45; color: var(--fs-body-cream-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.28s ease, border-color 0.28s ease; }
.fs-rifnav a:hover { color: var(--fs-red); border-color: var(--fs-gold); }
@media (max-width: 1080px) { .fs-rifnav { position: static; display: none; } }
/* FAQ grid — odd-count rule spans the last item full-width so it
doesn't end up orphaned alone in a 2-column layout */
.fs-qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 56px; margin-top: 22px; }
@media (max-width: 900px) { .fs-qgrid { grid-template-columns: 1fr; gap: 24px; } }
.fs-qgrid .fs-qa h3 { margin-top: 0; font-size: 21px; }
.fs-qgrid .fs-qa { break-inside: avoid; }
.fs-qgrid .fs-qa:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fs-qgrid .fs-qa:last-child:nth-child(odd) p { max-width: none; column-count: 2; column-gap: 56px; }
@media (max-width: 900px) { .fs-qgrid .fs-qa:last-child:nth-child(odd) p { column-count: 1; } }
/* Timeline (The Story) */
.fs-timeline { margin-top: 26px; border-left: 2px solid var(--fs-border-cream); }
.fs-timeline-item { position: relative; padding: 0 0 26px 30px; }
.fs-timeline-item:last-child { padding-bottom: 6px; }
.fs-timeline-dot {
position: absolute; left: -7px; top: 7px;
width: 12px; height: 12px; border-radius: 50%;
background: var(--fs-cream); border: 3px solid var(--fs-red);
}
.fs-timeline-dot--gold { border-color: var(--fs-gold); }
.fs-timeline-date {
font-family: var(--fs-font-signage);
font-size: 14px; letter-spacing: 2.4px; text-transform: uppercase;
color: var(--fs-red); font-weight: 700;
}
.fs-timeline-date--gold { color: #A8861B; }
.fs-timeline-item h3 { font-family: var(--fs-font-serif); font-size: 20px; margin: 3px 0 0; }
.fs-timeline-item p { margin: 7px 0 0; font-size: 15.5px; color: var(--fs-body-cream); line-height: 1.65; }
/* Archive photo cards (simpler than .fs-card — no title/blurb, just
a photo + one caption line) */
.fs-photocard {
background: var(--fs-panel);
border: 1px solid var(--fs-border-cream);
border-radius: var(--fs-radius);
overflow: hidden;
box-shadow: var(--fs-shadow-card);
}
.fs-photocard__media { height: 230px; background-size: cover; background-position: center; }
.fs-photocard__caption { padding: 14px 16px; font-size: 13.5px; color: var(--fs-body-cream); line-height: 1.5; }
/* ---- Prose (letter body, about, museum copy) ---- */
.fs-prose { max-width: 720px; margin: 0 auto; }
.fs-prose p { margin: 0 0 16px; }
.fs-prose--letter { font-size: 17.5px; line-height: 1.8; }
.fs-prose--letter a { color: var(--fs-red); font-weight: bold; }
.fs-prose--letter a:hover { text-decoration: underline; }
/* Ghost's Blockquote card — used for the "— Frank" signature line.
background/box-shadow explicitly cleared — Saaga's own blockquote
styling includes a background for its own pull-quotes, which was
bleeding through since our override never cleared it. */
.fs-prose--letter blockquote {
font-family: var(--fs-font-serif);
font-size: 22px;
font-style: italic;
color: #5C4630;
margin: 18px 0 0;
border: none;
padding: 0;
background: none;
box-shadow: none;
}
/* Template-generated author signature (custom-letter.hbs) — separate
from the blockquote rule above, which stays available if a letter
ever needs a genuine in-content quote. */
.fs-letter-signature {
font-family: var(--fs-font-serif);
font-size: 22px;
font-style: italic;
color: #5C4630;
margin: 18px 0 0;
}
/* ---- Responsive photo/card grids ---- */
.fs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.fs-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fs-grid--closer { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* Fixed 3-column grid (Letters archive) — the generic .fs-grid is
auto-fit and was fitting 4 columns at the site's new 1565px width;
the mockup specifies a genuinely fixed 3 columns, not "as many as
fit." */
.fs-grid--fixed3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) { .fs-grid--fixed3 { grid-template-columns: 1fr; } }
/* ---- Hero shared ---- */
.fs-hero { background-size: cover; background-position: center; color: var(--fs-bone); border-bottom: 1px solid var(--fs-border-dark); }
.fs-hero--inset { box-shadow: var(--fs-shadow-hero-inset); }
.fs-hero h1 { font-family: var(--fs-font-serif); font-weight: 700; margin: 8px 0 0; }
/* -----my css applied later------ */
.fs-h-museum-photo{
flex: 0 0 440px;}
.fs-h-excerpt-photo{
flex: 1 1 180px;
}
.fs-h-about-photo{
flex: 0 0 340px;
}
input:focus {
border-color: #C9A227;
outline: none;
box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
}
@media (max-width:915px){
.fs-h-museum-photo, .fs-h-excerpt-photo, .fs-h-about-photo{
flex: 100%;}
}
@media screen and (max-width: 767px) {
.fs-wrap {
padding-right: 20px !important;
padding-left: 20px !important;
}
.fs-filmblock__play {
top: 13% !important;
}
.fs-h-about-photo{
max-width: 100% !important;
}
.fs-h-museum-photo{
max-width: 100% !important;
}
.fs-wordmark{
font-size: 20px;
}
.fs-btn-subscribe{
font-size: 13px;
}
}
/* ══════════════════════════════════════════════════════════════════
Build 1 · home page (Sept 2026)
══════════════════════════════════════════════════════════════════ */
/* Saaga's own slide-out menu has no opener in this design. It sat 320px
off the right edge (sideways overflow on older phones) and its links
were still reachable with Tab while invisible. Hidden, not removed:
Saaga's script expects its colour-scheme select to exist. */
.menu.js-menu { display: none !important; }
/* Visible keyboard focus */
.fs-site a:focus-visible,
.fs-site button:focus-visible,
.fs-site [role="button"]:focus-visible { outline: 2px solid var(--fs-gold); outline-offset: 3px; }
/* ---- Phone menu ---- */
.fs-menu-toggle {
display: none; align-items: center; gap: 9px;
background: transparent; color: var(--fs-bone);
border: 1.5px solid var(--fs-border-dark); border-radius: var(--fs-radius);
font-family: var(--fs-font-signage); font-weight: 700; font-size: 14px;
letter-spacing: 1.5px; text-transform: uppercase; line-height: 1;
padding: 9px 12px; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.fs-menu-toggle[aria-expanded="true"] { border-color: var(--fs-gold); }
.fs-menu-toggle__bars,
.fs-menu-toggle__bars::before,
.fs-menu-toggle__bars::after { display: block; width: 16px; height: 2px; background: var(--fs-gold); }
.fs-menu-toggle__bars { position: relative; }
.fs-menu-toggle__bars::before,
.fs-menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.fs-menu-toggle__bars::before { top: -5px; }
.fs-menu-toggle__bars::after { top: 5px; }
.fs-mobile-nav { background: var(--fs-dark-base); border-top: 1px solid var(--fs-border-dark); }
.fs-mobile-nav[hidden] { display: none; }
.fs-mobile-nav .fs-wrap { display: flex; flex-direction: column; padding-top: 4px; padding-bottom: 20px; }
.fs-mobile-nav a:not(.fs-btn) {
font-family: var(--fs-font-signage); font-weight: 600; font-size: 18px;
letter-spacing: 1.5px; text-transform: uppercase; color: var(--fs-muted-dark);
padding: 13px 0; border-bottom: 1px solid var(--fs-border-dark);
}
.fs-mobile-nav a:not(.fs-btn):hover { color: var(--fs-bone); }
.fs-mobile-nav .fs-mobile-nav__cta { margin-top: 18px; align-self: flex-start; }
.fs-mobile-nav .fs-mobile-nav__signin { margin-top: 12px; padding: 4px 0 0; border: 0; font-size: 12.5px; letter-spacing: 0.16em; color: var(--fs-gold); } /* 1.23.0 */
@media (min-width: 1241px) { .fs-header:not(.fs-header--jn):not(.fs-header--jn-all) .fs-mobile-nav { display: none !important; } }
@media (min-width: 1161px) { .fs-header--jn .fs-mobile-nav { display: none !important; } }
@media (min-width: 1341px) { .fs-header--jn-all .fs-mobile-nav { display: none !important; } }
@media (max-width: 1240px) {
.fs-header:not(.fs-header--jn) .fs-menu-toggle { display: inline-flex; }
.fs-header:not(.fs-header--jn) .fs-nav { gap: 12px; flex-wrap: nowrap; }
}
@media (max-width: 1160px) {
.fs-header--jn .fs-menu-toggle { display: inline-flex; }
.fs-header--jn .fs-nav { gap: 12px; flex-wrap: nowrap; }
}
@media (max-width: 1340px) {
.fs-header--jn-all .fs-menu-toggle { display: inline-flex; }
.fs-header--jn-all .fs-nav { gap: 12px; flex-wrap: nowrap; }
}
/* Smallest phones: the letter button moves into the menu (the bar at the
very top still links to the sign-up on every page) */
@media (max-width: 480px) {
.fs-header .fs-nav .fs-btn-subscribe { display: none; }
}
/* ---- Film blocks: real play buttons, and no play affordance without a film ---- */
button.fs-filmblock__play { padding: 0; font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.fs-filmblock__play-tri { display: block; }
.fs-filmblock--static { cursor: default; }
.fs-filmblock--static:hover { transform: none; border-color: var(--fs-border-dark); }
/* ---- Lightbox close is a real button now ---- */
button.fs-lightbox__close { line-height: 1.2; -webkit-appearance: none; appearance: none; }
/* ---- Exploring Abandoned Mines block (replaced the museum band) ---- */
.fs-h-eam {
background: var(--fs-band-cream); color: var(--fs-ink);
padding: 66px 0 72px; scroll-margin-top: 80px;
}
.fs-h-eam-row {
display: flex; flex-direction: row-reverse; gap: 48px;
align-items: center; justify-content: space-between; flex-wrap: wrap; max-width: 1200px;
}
.fs-h-eam-content { flex: 1 1 380px; min-width: 0; }
.fs-h-eam .fs-h-eam-title {
font-family: var(--fs-font-serif); font-size: clamp(26px, 3vw, 32px); font-weight: 700;
line-height: 1.2; letter-spacing: 0; color: var(--fs-ink); margin: 6px 0 0;
}
.fs-h-eam-desc { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; max-width: 520px; color: var(--fs-body-cream); }
.fs-h-eam-stat { margin-top: 14px; font-size: 15px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-h-eam-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.fs-h-eam-playlists { display: inline-block; margin-top: 16px; font-weight: bold; font-size: 15.5px; color: var(--fs-red); }
.fs-h-eam-playlists:hover { color: var(--fs-red); }
.fs-h-eam-thumb {
flex: 0 0 600px; max-width: 600px; display: block; overflow: hidden;
border-radius: var(--fs-radius); border: 1px solid var(--fs-border-cream); box-shadow: var(--fs-shadow-card);
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.fs-h-eam-thumb:hover { transform: translateY(-4px); box-shadow: var(--fs-shadow-card-hover); }
.fs-h-eam-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 1100px) { .fs-h-eam-thumb { flex-basis: 480px; max-width: 480px; } }
@media (max-width: 915px) {
.fs-h-eam-row { gap: 30px; }
.fs-h-eam-thumb { flex: 1 1 100%; max-width: 100%; }
}
@media (max-width: 767px) { .fs-h-eam { padding: 48px 0 54px; } }
/* ---- Sign-up form states ----
Ghost's members script adds .loading / .success / .error to the form. */
.fs-newsletter-form__msg { display: none; flex: 1 1 100%; margin: 4px 0 0; font-size: 14.5px; }
.fs-newsletter-form.success .fs-newsletter-form__msg--ok,
.fs-newsletter-form.error .fs-newsletter-form__msg--err { display: block; }
.fs-newsletter-form.success input,
.fs-newsletter-form.success button { display: none; }
.fs-newsletter-form__msg--err { color: var(--fs-red); }
.fs-newsletter-form.loading button[type="submit"] { opacity: 0.65; pointer-events: none; }
.fs-newsletter-form__soon { margin: 8px 0 0; font-size: 14px; }
/* Bug fix (Sept 2026): the "Coming soon" panel's display:flex overrode the
hidden attribute, so it sat on top of the Wistia player even when a film
ID was set. Visitors saw "Coming soon" instead of the film. */
.fs-lightbox__demo[hidden] { display: none !important; }
/* Phones: the thumbnail leads the channel block (reading order stays heading-first) */
@media (max-width: 915px) { .fs-h-eam-thumb { order: -1; } }
/* Phones held sideways: the open menu scrolls instead of running off-screen */
.fs-mobile-nav:not([hidden]) { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
/* ══════════════════════════════════════════════════════════════════
Build 2 · The Yankee Boy Story (page-yankee-boy-story.hbs), Sept 2026
Everything is scoped to .fs-yb. Saaga's global element styles
(h1–h3 fonts, p/ol/ul margins, the pink blockquote, grey figcaptions,
the grey button fill) are reset here for this page only.
══════════════════════════════════════════════════════════════════ */
.fs-yb { background: var(--fs-dark-base); color: var(--fs-body-dark); }
/* Resets use :where() so they beat Saaga's bare element rules (0,0,1) but
never the page's own class rules below. */
:where(.fs-yb) :is(p, ol, ul, dl, dd, figure, blockquote) { margin: 0; }
:where(.fs-yb) :is(ol, ul) { padding: 0; list-style: none; }
:where(.fs-yb) :is(h1, h2, h3) { font-family: var(--fs-font-serif); letter-spacing: 0; word-break: normal; text-wrap: balance; }
:where(.fs-yb) img { max-width: 100%; }
:where(.fs-yb) p { text-wrap: pretty; }
/* Keyboard focus on cream: the site's gold ring is too faint there */
.fs-site .fs-yb-story :focus-visible { outline-color: var(--fs-ink); }
.fs-yb [id] { scroll-margin-top: 92px; }
.fs-yb-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---- Buttons ---- */
.fs-yb-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 11px;
font-family: var(--fs-font-signage); font-weight: 700; font-size: 16px; line-height: 1.1;
letter-spacing: 1.6px; text-transform: uppercase; text-decoration: none;
padding: 13px 24px; border-radius: var(--fs-radius); border: 1.5px solid transparent;
background: transparent; cursor: pointer; width: auto; -webkit-appearance: none; appearance: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.fs-yb-btn--gold { background: var(--fs-gold); border-color: var(--fs-gold); color: var(--fs-dark-base); }
.fs-yb-btn--gold:hover { background: var(--fs-gold-hover); border-color: var(--fs-gold-hover); color: var(--fs-dark-base); }
.fs-yb-btn--line { border-color: rgba(244,238,226,0.5); color: var(--fs-bone); }
.fs-yb-btn--line:hover { border-color: var(--fs-gold); color: var(--fs-gold); }
.fs-yb-btn--ink { border-color: var(--fs-ink); color: var(--fs-ink); }
.fs-yb-btn--ink:hover { background: var(--fs-ink); color: var(--fs-cream); }
.fs-yb-btn__tri { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
/* ---- 1. Hero ---- */
.fs-yb-hero {
position: relative; isolation: isolate; overflow: hidden;
display: flex; align-items: flex-end;
min-height: min(90vh, 880px); background: var(--fs-dark-deepest); color: var(--fs-bone);
}
.fs-yb-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.fs-yb-hero__shade {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(90deg, rgba(13,12,10,0.95) 0%, rgba(13,12,10,0.84) 30%, rgba(13,12,10,0.45) 54%, rgba(13,12,10,0.12) 76%, rgba(13,12,10,0) 100%),
linear-gradient(0deg, rgba(13,12,10,0.92) 0%, rgba(13,12,10,0) 34%);
}
.fs-yb-hero__inner { width: 100%; padding-top: clamp(90px, 14vh, 160px); padding-bottom: clamp(60px, 10vh, 104px); }
.fs-yb-sign {
display: inline-flex; align-items: center; gap: 14px;
font-weight: 600; font-size: 15px; letter-spacing: 4px; text-transform: uppercase; color: var(--fs-gold);
}
.fs-yb-sign::before, .fs-yb-sign::after { content: ""; width: 40px; height: 1.5px; background: currentColor; opacity: 0.8; }
.fs-yb .fs-yb-hero__title {
margin: 18px 0 0; max-width: 820px;
font-family: var(--fs-font-signage); font-weight: 700; text-transform: uppercase;
font-size: clamp(58px, 8.6vw, 132px); line-height: 0.88; letter-spacing: 0.5px; color: var(--fs-bone);
text-shadow: 0 6px 30px rgba(0,0,0,0.55);
}
.fs-yb-hero__the { display: block; font-size: 0.3em; letter-spacing: 0.32em; line-height: 1; margin-bottom: 0.18em; color: var(--fs-bone); }
.fs-yb-hero__name { display: block; }
.fs-yb-hero__story { display: block; color: var(--fs-gold); }
.fs-yb .fs-yb-hero__deck { margin-top: 26px; max-width: 600px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: #DDD3BE; }
.fs-yb-hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.fs-yb .fs-yb-hero__caption {
position: absolute; right: 40px; bottom: 22px;
font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
color: rgba(244,238,226,0.8); background: rgba(13,12,10,0.6); padding: 5px 10px; border-radius: var(--fs-radius);
}
/* ---- 2. Numbers ---- */
.fs-yb-numbers { background: var(--fs-dark-deepest); border-top: 1px solid var(--fs-border-dark); border-bottom: 1px solid var(--fs-border-dark); padding: 34px 0 26px; }
.fs-yb-numbers__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; }
.fs-yb-numbers__list li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fs-yb-numbers__list li + li { border-left: 1px solid var(--fs-border-dark); }
.fs-yb-numbers__n { font-family: var(--fs-font-signage); font-weight: 700; font-size: clamp(36px, 3.6vw, 50px); line-height: 1; color: var(--fs-gold); font-variant-numeric: tabular-nums; }
.fs-yb-numbers__l { font-family: var(--fs-font-signage); font-weight: 600; font-size: 13px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-muted-dark); max-width: 220px; }
.fs-yb .fs-yb-numbers__src { margin-top: 18px; text-align: center; font-size: 13px; font-style: italic; color: var(--fs-muted-dark-2); }
/* ---- 3. The film ---- */
.fs-yb-film { background: var(--fs-dark-raised); padding: 84px 0 76px; }
.fs-yb-film__row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 54px; align-items: center; }
.fs-yb-film__thumb {
display: block; width: 100%; padding: 0; margin: 0; cursor: pointer; background: #0C0A08;
border: 1px solid var(--fs-border-dark); border-radius: var(--fs-radius); overflow: hidden;
box-shadow: var(--fs-shadow-media); -webkit-appearance: none; appearance: none;
transition: transform 0.28s ease, border-color 0.28s ease;
}
.fs-yb-film__thumb:hover { transform: translateY(-4px); border-color: var(--fs-gold); }
.fs-yb-film__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.fs-yb .fs-yb-film__title { margin: 10px 0 0; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.18; font-weight: 700; color: var(--fs-bone); }
.fs-yb .fs-yb-film__meta { margin-top: 12px; font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-yb .fs-yb-film__desc { margin-top: 16px; font-size: 17px; line-height: 1.65; color: var(--fs-body-dark); }
.fs-yb-film__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.fs-yb .fs-yb-film__more { margin-top: 22px; font-size: 14.5px; line-height: 1.6; color: var(--fs-muted-dark); }
.fs-yb-film__more a { color: var(--fs-gold); font-weight: 700; }
.fs-yb-film__more a:hover { color: var(--fs-gold-hover); text-decoration: underline; }
.fs-yb-film__subs { display: block; margin-top: 4px; color: var(--fs-muted-dark-2); }
.fs-yb-jump { margin-top: 64px; border-top: 1px solid var(--fs-border-dark); padding-top: 30px; }
.fs-yb .fs-yb-jump__title { margin: 0 0 18px; font-family: var(--fs-font-signage); font-weight: 700; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: var(--fs-gold); }
.fs-yb-jump__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 10px; }
.fs-yb-jump__btn {
display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; text-align: left; cursor: pointer;
padding: 12px 16px; background: var(--fs-card-dark); border: 1px solid var(--fs-border-dark); border-radius: var(--fs-radius);
color: var(--fs-bone); font-family: var(--fs-font-serif); font-weight: 400; font-size: 16px; line-height: 1.35;
-webkit-appearance: none; appearance: none; transition: border-color 0.2s ease, background 0.2s ease;
}
.fs-yb-jump__btn:hover { border-color: var(--fs-gold); background: #262017; }
.fs-yb-jump__t {
flex: 0 0 auto; min-width: 70px; display: inline-flex; align-items: center; gap: 8px;
font-family: var(--fs-font-signage); font-weight: 700; font-size: 15px; letter-spacing: 1px; color: var(--fs-gold); font-variant-numeric: tabular-nums;
}
.fs-yb-jump__t::before { content: ""; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
/* Build 2b: chapter buttons fill their grid cell, and on wider screens every row is as tall as the
tallest, so a two-line title no longer leaves uneven gaps under the buttons beside it. */
.fs-yb-jump__list > li { display: flex; margin: 0; }
.fs-yb-jump__btn { flex: 1 1 auto; }
@media (min-width: 768px) { .fs-yb-jump__list { grid-auto-rows: 1fr; } }
.fs-yb-nowrap { white-space: nowrap; }
/* ---- 4. The story ---- */
.fs-yb-story { background: var(--fs-cream); color: var(--fs-ink); padding: 90px 0 0; }
.fs-yb-story__head { max-width: 1000px; margin: 0 auto 30px; text-align: center; }
.fs-yb-story__head > h2, .fs-yb-story__head > p { max-width: 760px; margin-left: auto; margin-right: auto; }
.fs-yb .fs-yb-story__title { margin: 8px auto 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; font-weight: 700; color: var(--fs-ink); }
.fs-yb .fs-yb-story__standfirst { margin-top: 14px; font-size: 17px; font-style: italic; color: var(--fs-body-cream-2); text-wrap: balance; }
.fs-yb-toc { margin-top: 30px; }
.fs-yb-toc ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.fs-yb-toc a {
display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px;
border: 1px solid var(--fs-border-cream); border-radius: 999px; background: var(--fs-panel);
font-family: var(--fs-font-signage); font-weight: 600; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--fs-ink);
transition: border-color 0.2s ease, color 0.2s ease;
}
.fs-yb-toc__n { font-family: var(--fs-font-serif); font-weight: 700; color: var(--fs-bronze); letter-spacing: 0; }
.fs-yb-toc a:hover { border-color: var(--fs-red); color: var(--fs-ink); }
.fs-yb-ch {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 700px) minmax(0, 1fr);
column-gap: 48px; padding: 72px 0 8px; border-top: 1px solid var(--fs-border-cream);
}
.fs-yb-story__head + .fs-yb-ch { border-top: 0; }
.fs-yb-ch__num {
grid-column: 1; grid-row: 1 / span 2; justify-self: end; align-self: start; position: sticky; top: 104px;
font-family: var(--fs-font-serif); font-weight: 700; font-size: 92px; line-height: 0.9;
color: transparent; -webkit-text-stroke: 1.5px var(--fs-bronze);
}
@supports not (-webkit-text-stroke: 1px black) { .fs-yb-ch__num { color: var(--fs-bronze); } }
.fs-yb-ch__body { grid-column: 2; grid-row: 1; min-width: 0; }
.fs-yb .fs-yb-ch__era { font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-yb .fs-yb-ch__title { margin: 6px 0 20px; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; font-weight: 700; color: var(--fs-ink); }
.fs-yb .fs-yb-ch__body > p:not(.fs-yb-ch__era) { font-size: 18.5px; line-height: 1.75; color: var(--fs-body-cream); margin: 0 0 1.1em; }
.fs-yb #est-1900 .fs-yb-ch__title + p::first-letter {
float: left; font-family: var(--fs-font-serif); font-weight: 700; font-size: 4.1em; line-height: 0.86;
padding: 6px 10px 0 0; color: var(--fs-red);
}
.fs-yb .fs-yb-quote {
width: auto; margin: 30px 0; padding: 2px 0 2px 24px; background: none; border: 0; border-left: 3px solid var(--fs-gold); border-radius: 0;
font-family: var(--fs-font-serif); font-style: normal; font-size: inherit; line-height: inherit;
}
.fs-yb .fs-yb-quote blockquote { width: auto; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font: inherit; }
.fs-yb .fs-yb-quote p { margin: 0; font-style: italic; font-size: 21px; line-height: 1.55; color: var(--fs-ink); }
.fs-yb .fs-yb-quote figcaption { margin-top: 10px; padding: 0; text-align: left; font-family: var(--fs-font-signage); font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-yb .fs-yb-quote figcaption::before { content: "\2014\00a0"; content: "\2014\00a0" / ""; }
.fs-yb .fs-yb-quote--big { margin: 40px 0; padding: 26px 0 0; border-left: 0; position: relative; }
.fs-yb .fs-yb-quote--big::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px; background: var(--fs-gold); }
.fs-yb .fs-yb-quote--big p { font-size: clamp(23px, 2.3vw, 29px); line-height: 1.42; }
.fs-yb-watch {
display: inline-flex; align-items: center; gap: 10px; margin: 10px 0 0; cursor: pointer;
padding: 7px 16px 7px 7px; background: transparent; border: 1.5px solid rgba(42,38,34,0.3); border-radius: 999px;
font-family: var(--fs-font-signage); font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fs-ink);
-webkit-appearance: none; appearance: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.fs-yb-watch__icon { position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--fs-gold); }
.fs-yb-watch__icon::after { content: ""; position: absolute; left: 11px; top: 8px; border-left: 9px solid var(--fs-dark-base); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.fs-yb-watch__t { color: var(--fs-bronze); font-variant-numeric: tabular-nums; }
.fs-yb-watch:hover { background: var(--fs-ink); border-color: var(--fs-ink); color: var(--fs-cream); }
.fs-yb-watch:hover .fs-yb-watch__t { color: var(--fs-gold); }
.fs-yb .fs-yb-fig { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 1100px; margin: 44px 0 40px; }
.fs-yb-fig img { display: block; width: 100%; height: auto; border-radius: var(--fs-radius); box-shadow: 0 18px 44px rgba(43,35,23,0.22); }
.fs-yb .fs-yb-fig figcaption { padding: 12px 0 0; font-family: var(--fs-font-serif); font-style: italic; font-weight: 400; font-size: 15px; color: var(--fs-body-cream-2); text-align: left; }
/* Pinned photographs: in the right margin on wide screens */
.fs-yb .fs-yb-fig--pin { grid-column: 3; grid-row: 1; justify-self: start; align-self: start; max-width: 300px; margin: 64px 0 0; }
.fs-yb .fs-yb-fig--pin-tall { max-width: 270px; margin-top: 120px; }
.fs-yb-fig--pin img { border: 8px solid var(--fs-panel); border-radius: 1px; box-shadow: 0 10px 28px rgba(43,35,23,0.25); }
.fs-yb .fs-yb-fig--pin figcaption { padding-top: 10px; font-size: 14px; }
/* Count board */
.fs-yb-count {
margin: 30px 0 34px; padding: 22px 26px 12px; border-radius: var(--fs-radius);
background: var(--fs-card-dark); color: var(--fs-bone); border: 1px solid var(--fs-border-dark);
box-shadow: 0 16px 36px rgba(43,35,23,0.22);
}
.fs-yb .fs-yb-count__head { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--fs-gold); }
.fs-yb-count__tally { flex: 0 0 auto; color: var(--fs-gold); }
.fs-yb-count__list { margin-top: 10px; }
.fs-yb-count__list li { display: flex; align-items: baseline; gap: 18px; padding: 11px 0; border-top: 1px dashed rgba(244,238,226,0.16); }
.fs-yb-count__n { flex: 0 0 118px; font-family: var(--fs-font-signage); font-weight: 700; font-size: 34px; line-height: 1; color: var(--fs-bone); font-variant-numeric: tabular-nums; }
.fs-yb-count__list li:last-child .fs-yb-count__n { color: var(--fs-gold); }
.fs-yb-count__l { font-family: var(--fs-font-serif); font-style: italic; font-size: 16.5px; line-height: 1.4; color: var(--fs-muted-dark); }
/* Found-underground tags */
.fs-yb-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 26px; }
.fs-yb-tags li {
position: relative; padding: 7px 13px 7px 27px; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: var(--fs-radius);
font-family: var(--fs-font-signage); font-weight: 600; font-size: 14.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--fs-ink);
box-shadow: 0 1px 0 var(--fs-border-cream);
}
.fs-yb-tags li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -4.5px; border-radius: 50%; border: 1.5px solid var(--fs-bronze); }
.fs-yb-nowrap { white-space: nowrap; }
/* The heart of it */
.fs-yb-heart {
margin: 72px 0 0; padding: 96px 0 88px; text-align: center; color: var(--fs-bone);
background: radial-gradient(ellipse 60% 90% at 50% 0%, rgba(201,162,39,0.14), rgba(201,162,39,0) 70%), var(--fs-dark-deepest);
border-top: 1px solid var(--fs-border-dark); border-bottom: 1px solid var(--fs-border-dark);
}
.fs-yb-heart blockquote { width: auto; max-width: 1000px; margin: 0 auto; padding: 0; background: none; border: 0; border-radius: 0; font-style: normal; }
.fs-yb-heart blockquote::before { content: ""; display: block; width: 64px; height: 3px; margin: 0 auto 34px; background: var(--fs-gold); }
.fs-yb .fs-yb-heart blockquote p { margin: 0; font-family: var(--fs-font-serif); font-style: italic; font-size: clamp(24px, 3vw, 38px); line-height: 1.38; color: var(--fs-bone); text-wrap: balance; }
.fs-yb .fs-yb-heart figcaption { margin-top: 26px; padding: 0; font-style: normal; color: var(--fs-gold); text-align: center; font-size: 14px; }
/* Coda */
.fs-yb-coda { text-align: center; padding: 70px 0 96px; border-top: 1px solid var(--fs-border-cream); margin-top: 64px; }
.fs-yb .fs-yb-coda__quote { max-width: 820px; margin: 0 auto; font-family: var(--fs-font-serif); font-style: italic; font-size: clamp(26px, 3vw, 36px); line-height: 1.35; color: var(--fs-ink); text-wrap: balance; }
.fs-yb .fs-yb-coda .fs-kick { margin-top: 14px; font-size: 13px; }
.fs-yb-coda__actions { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* ---- 5. On the record ---- */
.fs-yb-record { background: var(--fs-dark-base); padding: 88px 0 80px; border-top: 1px solid var(--fs-border-dark); }
.fs-yb .fs-yb-record__title { margin: 8px 0 0; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.12; font-weight: 700; color: var(--fs-bone); }
.fs-yb-record__grid { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.fs-yb-timeline { margin-left: 7px; }
.fs-yb-timeline li { position: relative; padding: 0 0 24px 30px; border-left: 2px solid var(--fs-border-dark); }
.fs-yb-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.fs-yb-timeline li:nth-child(5), .fs-yb-timeline li:nth-child(6) { border-left-style: dashed; }
.fs-yb-timeline li::before {
content: ""; position: absolute; left: -8px; top: 5px; width: 14px; height: 14px; border-radius: 50%;
background: var(--fs-dark-base); border: 2px solid var(--fs-muted-dark-2);
}
.fs-yb-timeline li.fs-yb-timeline__frank::before { background: var(--fs-gold); border-color: var(--fs-gold); }
.fs-yb-timeline__y { display: block; font-family: var(--fs-font-signage); font-weight: 700; font-size: 21px; line-height: 1.1; letter-spacing: 1px; color: var(--fs-bone); }
.fs-yb-timeline__frank .fs-yb-timeline__y { color: var(--fs-gold); }
.fs-yb .fs-yb-timeline li p { margin-top: 4px; font-size: 16.5px; line-height: 1.55; color: var(--fs-body-dark); }
.fs-yb-card {
position: relative; background: var(--fs-panel); color: var(--fs-ink); border-radius: var(--fs-radius);
padding: 28px 30px 24px; box-shadow: 0 22px 50px rgba(0,0,0,0.45); border-top: 6px solid var(--fs-gold);
}
.fs-yb .fs-yb-card__kick { font-size: 13px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--fs-red); }
.fs-yb .fs-yb-card__title { margin: 6px 0 16px; padding-bottom: 14px; font-size: 26px; font-weight: 700; color: var(--fs-ink); border-bottom: 3px double rgba(181,80,46,0.55); }
.fs-yb-card__list > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--fs-border-cream); }
.fs-yb-card__list dt { font-family: var(--fs-font-signage); font-weight: 600; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fs-bronze); padding-top: 3px; }
.fs-yb-card__list dd { font-size: 16px; line-height: 1.45; color: var(--fs-body-cream); }
.fs-yb .fs-yb-card__kick--prod { margin-top: 22px; }
/* Saaga styles every table (inline-block, white, sans-serif, cell borders); reset for this card */
.fs-yb .fs-yb-card__table {
display: table; width: 100%; max-width: none; margin: 8px 0 0; overflow: visible; align-self: auto;
background: none; border: 0; border-collapse: collapse; font-family: var(--fs-font-serif); font-size: 16px;
}
.fs-yb .fs-yb-card__table tr { border: 0; }
.fs-yb .fs-yb-card__table th, .fs-yb .fs-yb-card__table td { padding: 8px 0; border: 0; border-bottom: 1px dashed var(--fs-border-cream); line-height: 1.4; text-align: right; font-variant-numeric: tabular-nums; }
.fs-yb .fs-yb-card__table thead th { font-family: var(--fs-font-signage); font-weight: 600; font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-yb .fs-yb-card__table tbody th { text-align: left; font-weight: 400; color: var(--fs-body-cream); }
.fs-yb .fs-yb-card__table td { color: var(--fs-ink); font-weight: 700; padding-left: 12px; }
.fs-yb .fs-yb-card__src { margin-top: 14px; font-size: 13.5px; font-style: italic; color: var(--fs-body-cream-2); }
.fs-yb-notice { margin-top: 64px; }
.fs-yb .fs-yb-notice .fs-kick { font-size: 12.5px; letter-spacing: 2.2px; }
.fs-yb .fs-yb-notice p + p { margin-top: 10px; }
.fs-yb .fs-yb-sources { margin-top: 30px; max-width: 980px; font-size: 14px; line-height: 1.6; color: var(--fs-muted-dark-2); }
.fs-yb-sources b { color: var(--fs-muted-dark); }
/* ---- 6. Newsletter strip ---- */
.fs-yb-strip { background: var(--fs-dark-deepest); padding: 0 0 84px; border-top: 1px solid var(--fs-border-dark); }
.fs-yb-strip__film { position: relative; background: #080706; padding: 34px 0; }
.fs-yb-strip__film::before, .fs-yb-strip__film::after {
content: ""; position: absolute; left: 0; right: 0; height: 11px;
background: repeating-linear-gradient(90deg, rgba(244,238,226,0.15) 0 16px, transparent 16px 30px);
}
.fs-yb-strip__film::before { top: 11px; }
.fs-yb-strip__film::after { bottom: 11px; }
.fs-yb-strip__frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.fs-yb-strip__frames li { position: relative; overflow: hidden; border-radius: var(--fs-radius); background: #14110e; }
.fs-yb-strip__frames img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(0.92) contrast(1.04); }
.fs-yb-strip__frames span {
position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; border-radius: var(--fs-radius);
background: rgba(13,12,10,0.8); color: var(--fs-bone); font-weight: 600; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase;
}
.fs-yb-strip__body { text-align: center; padding-top: 56px; }
.fs-yb .fs-yb-strip__title { margin: 8px 0 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; font-weight: 700; color: var(--fs-bone); }
.fs-yb .fs-yb-strip__sub { margin: 14px auto 0; max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--fs-body-dark); }
.fs-yb-strip__form { margin: 28px auto 0; max-width: 520px; text-align: left; }
.fs-yb .fs-yb-strip__note { margin-top: 12px; font-size: 13.5px; color: var(--fs-muted-dark-2); }
/* ---- Responsive ---- */
@media (max-width: 1180px) {
.fs-yb-ch { grid-template-columns: 130px minmax(0, 700px); column-gap: 36px; justify-content: center; }
.fs-yb-ch__num { grid-column: 1; font-size: 62px; }
.fs-yb-ch__body { grid-column: 2; }
.fs-yb .fs-yb-fig { grid-column: 2; justify-self: stretch; max-width: none; }
.fs-yb .fs-yb-fig--pin { grid-column: 2; grid-row: auto; max-width: 340px; margin: 30px 0 30px; }
.fs-yb .fs-yb-fig--pin-tall { max-width: 300px; }
}
@media (max-width: 1100px) {
.fs-yb-film__row { gap: 36px; }
.fs-yb-record__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
.fs-yb-card { max-width: 640px; }
}
@media (max-width: 915px) {
.fs-yb-film__row { grid-template-columns: minmax(0, 1fr); }
.fs-yb-ch { display: block; padding-top: 56px; }
.fs-yb-ch__num { position: static; justify-self: start; text-align: left; font-size: 56px; margin-bottom: 6px; -webkit-text-stroke-width: 1.2px; }
.fs-yb .fs-yb-fig { margin: 32px 0 28px; }
.fs-yb-strip__frames { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 20px; gap: 10px; }
.fs-yb-numbers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
.fs-yb-numbers__list li + li { border-left: 0; }
.fs-yb-numbers__list li:nth-child(even) { border-left: 1px solid var(--fs-border-dark); }
}
@media (max-width: 767px) {
/* Phones: the photo sits on top and the title rises out of it */
.fs-yb-hero { display: block; min-height: 0; }
.fs-yb-hero__img { position: relative; inset: auto; z-index: 0; display: block; height: min(54vh, 460px); height: min(54svh, 460px); object-position: 62% 50%; }
.fs-yb-hero__shade {
bottom: auto; height: min(54vh, 460px); height: min(54svh, 460px); z-index: 1;
background: linear-gradient(180deg, rgba(13,12,10,0.1) 0%, rgba(13,12,10,0) 40%, rgba(13,12,10,0.82) 84%, var(--fs-dark-deepest) 100%);
}
.fs-yb-hero__inner { position: relative; z-index: 2; margin-top: -118px; padding-top: 0; padding-bottom: 48px; }
.fs-yb .fs-yb-hero__caption { display: none; }
.fs-yb-sign::before, .fs-yb-sign::after { width: 26px; }
.fs-yb-film { padding: 56px 0 52px; }
.fs-yb-story { padding-top: 64px; }
.fs-yb .fs-yb-ch__body > p:not(.fs-yb-ch__era) { font-size: 17.5px; line-height: 1.7; }
.fs-yb .fs-yb-quote p { font-size: 19px; }
.fs-yb .fs-yb-quote--big p { font-size: 22px; }
.fs-yb-count { padding: 18px 18px 8px; }
.fs-yb-count__n { flex-basis: 92px; font-size: 28px; }
.fs-yb-heart { padding: 70px 0 64px; margin-top: 56px; }
.fs-yb-coda { padding: 56px 0 72px; }
.fs-yb-record { padding: 64px 0 60px; }
.fs-yb-card { padding: 24px 20px 20px; }
.fs-yb-card__list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.fs-yb-strip__film { padding: 30px 0; }
.fs-yb-strip__frames span { font-size: 10px; letter-spacing: 1.4px; left: 6px; bottom: 6px; padding: 3px 6px; }
.fs-yb-strip__body { padding-top: 44px; }
}
@media (max-width: 480px) {
.fs-yb-hero__actions .fs-yb-btn, .fs-yb-film__actions .fs-yb-btn, .fs-yb-coda__actions .fs-yb-btn { flex: 1 1 100%; }
.fs-yb-strip__form .fs-newsletter-form button { flex: 1 1 100%; }
.fs-yb-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: left; }
.fs-yb-toc a { display: flex; height: 100%; align-items: center; border-radius: var(--fs-radius); }
.fs-yb-jump__list { grid-template-columns: minmax(0, 1fr); }
.fs-yb-numbers__l { font-size: 12px; letter-spacing: 1.6px; }
.fs-yb-toc a { font-size: 13px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
.fs-yb-film__thumb, .fs-yb-film__thumb:hover { transition: none; transform: none; }
}
/* ---- Lightbox markup cleanup (Build 2): the "not ready" title is a now (was an empty
) ---- */
p.fs-lightbox__demo-title { margin: 8px 0 0; font-weight: 700; line-height: 1.3; }
/* ---- Header: the Yankee Boy link (Build 2) ---- */
.fs-nav__link--yb::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 2px 0; border-radius: 50%; background: var(--fs-gold); vertical-align: middle; }
/* ══════════════════════════════════════════════════════════════════
Build 2 · Links: one system, site-wide
Text links sit inside their sentence, never on a line of their own.
Gold on dark sections, rust on cream (gold can't be read on cream),
bold, with an arrow when the link takes you somewhere. Buttons stay
buttons for the main actions (sign-up, play, subscribe).
… on dark
… on cream
Also used on inside a block that is itself the link (film blocks,
channel cards), so the words look the same wherever they appear.
══════════════════════════════════════════════════════════════════ */
body.fs-site .fs-link { color: var(--fs-gold); font-weight: 700; text-decoration: none; }
body.fs-site a.fs-link:hover,
body.fs-site a:hover .fs-link,
body.fs-site .fs-filmblock:hover .fs-link { color: var(--fs-gold-hover); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
body.fs-site .fs-link--cream,
body.fs-site a.fs-link--cream:hover { color: var(--fs-red-link); }
.fs-breadcrumb__row a { color: var(--fs-gold); }
.fs-breadcrumb__row a:hover { color: var(--fs-gold-hover); text-decoration: underline; }
/* The home page's channel stills carry a play icon: the whole still now opens the channel */
.fs-h-channel-hit { position: absolute; inset: 0; z-index: 2; border-radius: 2px; }
.fs-h-channel-hit:hover ~ .fs-h-channel-play { background: rgba(13,12,10,0.85) !important; transform: translate(-50%,-50%) scale(1.08) !important; }
.fs-h-channel-play { transition: background 0.25s ease, transform 0.25s ease; }
/* Sign-up forms land below the sticky header when reached by a link */
.fs-newsletter, #fs-signup, #fs-signup-closer { scroll-margin-top: 120px; scroll-margin-bottom: 40px; }
/* ══ Build 2c (Sept 25, 2026 review of the Yankee Boy page) ══ */
/* Kinder line breaks: headings, captions, labels and short quotes balance their lines, and body
text and quotes avoid one word alone on the last line (balance stops working past six lines).
Browsers without support simply ignore these. */
.fs-yb :is(figcaption, .fs-yb-numbers__l, .fs-yb-count__l, .fs-yb-jump__n, .fs-yb-toc__t, .fs-yb-tag, .fs-yb-hero__deck, .fs-yb-strip__sub, .fs-yb-film__meta) { text-wrap: balance; }
/* The big quote runs past six lines on phones, where balance gives up; keep its last word company instead */
@media (max-width: 767px) { .fs-yb .fs-yb-heart blockquote p { text-wrap: pretty; } }
.fs-announcement { text-wrap: balance; }
/* 1.8.6: the two pinned snapshots (portal sign, Erebus) are straight now; they keep the white print border */
/* A bigger tap area for the small Subscribe link, without moving the text */
.fs-yb-film__subs a { padding-block: 12px; }
/* Tablets: two columns of chapter buttons instead of one long list */
@media (min-width: 600px) and (max-width: 900px) { .fs-yb-jump__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ══════════════════════════════════════════════════════════════════
Build 3 (Sept 26, 2026): the home page, rebuilt around the archive.
Everything is scoped to .fs-h3 (home.hbs) and #fs-photobox. Resets use
:where() so they beat Saaga's bare element rules but never our classes.
══════════════════════════════════════════════════════════════════ */
.fs-h3 { background: var(--fs-dark-base); color: var(--fs-body-dark); }
:where(.fs-h3) :is(p, ul, ol, figure, blockquote, h1, h2, h3) { margin: 0; }
:where(.fs-h3) :is(ul, ol) { padding: 0; list-style: none; }
:where(.fs-h3) :is(h1, h2, h3) { font-family: var(--fs-font-serif); letter-spacing: 0; word-break: normal; text-wrap: balance; }
.fs-h3 :is(.fs-h3-title, .fs-h3-hero__title, .fs-h3-film h3) { color: var(--fs-bone); }
:where(.fs-h3) p { text-wrap: pretty; }
:where(.fs-h3) img { max-width: 100%; }
.fs-h3 blockquote { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; width: auto; font-family: var(--fs-font-serif); font-size: inherit; line-height: inherit; }
.fs-h3 figcaption { padding: 0; }
.fs-h3 [id] { scroll-margin-top: 92px; }
.fs-h3-sec { padding: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--fs-border-dark); }
.fs-h3 .fs-h3-title { margin-top: 8px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; font-weight: 700; }
.fs-h3 .fs-h3-title.fs-h3-title--ink { color: var(--fs-ink); }
.fs-h3 .fs-h3-dek { margin-top: 12px; max-width: 660px; font-size: 17px; line-height: 1.6; color: var(--fs-muted-dark); }
.fs-h3 .fs-h3-dek--cream { color: var(--fs-body-cream-2); }
/* ---- 1. Hero: the newest film ---- */
.fs-h3-hero { position: relative; display: flex; align-items: flex-end; min-height: min(86vh, 860px); overflow: hidden; background: var(--fs-dark-deepest); }
.fs-h3-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
.fs-h3-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,9,7,0.94) 0%, rgba(10,9,7,0.78) 36%, rgba(10,9,7,0.18) 70%, rgba(10,9,7,0.05) 100%), linear-gradient(0deg, rgba(10,9,7,0.8) 0%, rgba(10,9,7,0) 40%); }
.fs-h3-hero__inner { position: relative; z-index: 1; width: 100%; padding-top: 110px; padding-bottom: clamp(60px, 9vw, 110px); }
.fs-h3 .fs-h3-hero__kick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: var(--fs-font-signage); font-weight: 700; font-size: 14px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--fs-gold); }
.fs-h3-new { display: inline-block; padding: 5px 10px 4px; background: var(--fs-gold); color: var(--fs-dark-base); border-radius: 2px; letter-spacing: 1.8px; }
.fs-h3 .fs-h3-hero__title { margin-top: 20px; max-width: 780px; font-size: clamp(40px, 5.6vw, 76px); line-height: 1.03; font-weight: 700; }
.fs-h3 .fs-h3-hero__title .fs-h3-hero__accent { color: var(--fs-gold); }
.fs-h3 .fs-h3-hero__deck { margin-top: 22px; max-width: 580px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: #E6DCC8; }
.fs-h3-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.fs-h3 .fs-h3-hero__letter { margin-top: 24px; font-size: 15.5px; color: var(--fs-muted-dark); }
.fs-h3 .fs-h3-hero__cap { position: absolute; right: 16px; bottom: 14px; z-index: 1; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: rgba(244,238,226,0.88); background: rgba(13,12,10,0.7); padding: 5px 10px; border-radius: 2px; }
@media (max-width: 767px) {
.fs-h3-hero { display: block; min-height: 0; }
.fs-h3-hero__img { position: relative; display: block; height: min(58svh, 480px); object-position: 62% 40%; }
.fs-h3-hero__shade { bottom: auto; height: min(58svh, 480px); background: linear-gradient(0deg, var(--fs-dark-deepest) 0%, rgba(13,12,10,0.35) 34%, rgba(13,12,10,0) 60%); }
.fs-h3-hero__inner { margin-top: -84px; padding-top: 0; padding-bottom: 54px; }
.fs-h3 .fs-h3-hero__cap { top: 12px; bottom: auto; right: 12px; font-size: 10.5px; }
.fs-h3-hero__actions .fs-yb-btn { flex: 1 1 100%; }
}
/* ---- 2. Numbers ---- */
.fs-h3-numbers { background: var(--fs-dark-deepest); border-top: 1px solid var(--fs-border-dark); padding: 26px 0; }
.fs-h3-numbers__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.fs-h3-numbers__row > div + div { border-left: 1px solid var(--fs-border-dark); }
.fs-h3 .fs-h3-numbers .fs-stat__n { margin: 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; }
.fs-h3 .fs-h3-numbers .fs-stat__l { margin-top: 4px; }
@media (max-width: 480px) { .fs-h3 .fs-h3-numbers .fs-stat__l { font-size: 11px; letter-spacing: 1.6px; } }
/* ---- 3. From the archive: the photo wall ---- */
.fs-h3-archive { background: var(--fs-dark-base); }
.fs-h3 .fs-h3-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 240px); grid-auto-flow: dense; gap: 10px; margin-top: 36px; }
.fs-h3-wall__item { min-width: 0; }
.fs-h3-wall__item--big { grid-column: span 2; grid-row: span 2; }
.fs-h3-wall__item--wide { grid-column: span 2; }
.fs-h3 .fs-h3-wall__btn { position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 2px; overflow: hidden; background: #000; cursor: zoom-in; -webkit-appearance: none; appearance: none; }
.fs-h3-wall__btn img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.96); transition: transform 0.6s ease, filter 0.3s ease; }
.fs-h3-wall__btn:hover img, .fs-h3-wall__btn:focus-visible img { transform: scale(1.04); filter: none; }
.fs-h3-wall__cap { position: absolute; left: 10px; bottom: 9px; max-width: calc(100% - 20px); font-family: var(--fs-font-signage); font-weight: 600; font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fs-bone); background: rgba(13,12,10,0.74); padding: 4px 8px; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .fs-h3 .fs-h3-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 30vw, 230px); gap: 8px; } }
@media (max-width: 480px) { .fs-h3-wall__cap { font-size: 10px; letter-spacing: 1.4px; left: 6px; bottom: 6px; } }
@media (prefers-reduced-motion: reduce) { .fs-h3-wall__btn img { transition: none; } .fs-h3-wall__btn:hover img, .fs-h3-wall__btn:focus-visible img { transform: none; } }
/* ---- 4. Watch ---- */
.fs-h3-watch { background: var(--fs-dark-raised); }
.fs-h3 .fs-h3-films { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; margin-top: 36px; }
@media (max-width: 1100px) { .fs-h3 .fs-h3-films { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fs-h3 .fs-h3-films { grid-template-columns: minmax(0, 1fr); } }
.fs-h3-film { min-width: 0; }
.fs-h3 .fs-h3-film__still { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 1px solid var(--fs-border-dark); border-radius: 2px; overflow: hidden; background: #000; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color 0.2s ease; }
.fs-h3-film__still img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.fs-h3-film__still:hover, .fs-h3-film__still:focus-visible { border-color: var(--fs-gold); }
.fs-h3-film__still:hover img { transform: scale(1.03); }
.fs-h3-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--fs-gold); background: rgba(13,12,10,0.62); transition: background 0.2s ease; }
.fs-h3-film__still:hover .fs-h3-play { background: rgba(13,12,10,0.85); }
.fs-h3-play__tri { width: 0; height: 0; margin-left: 5px; border-left: 17px solid var(--fs-gold); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.fs-h3-badge { position: absolute; left: 10px; top: 10px; font-family: var(--fs-font-signage); font-weight: 700; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fs-bone); background: rgba(13,12,10,0.8); padding: 4px 8px; border-radius: 2px; }
.fs-h3 .fs-h3-film .fs-kick { margin-top: 16px; font-size: 12.5px; }
.fs-h3 .fs-h3-film h3 { margin-top: 6px; font-size: 22px; line-height: 1.25; font-weight: 700; }
.fs-h3 .fs-h3-film__p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--fs-muted-dark); }
.fs-h3 .fs-h3-notice { margin-top: 44px; }
.fs-h3 .fs-h3-notice .fs-kick { margin: 0; font-size: 12.5px; letter-spacing: 2.2px; }
.fs-h3 .fs-h3-newhere { margin-top: 16px; font-size: 15.5px; color: var(--fs-muted-dark-2); }
.fs-h3 .fs-h3-newhere b { color: var(--fs-bone); }
@media (prefers-reduced-motion: reduce) { .fs-h3-film__still img { transition: none; } .fs-h3-film__still:hover img { transform: none; } }
/* ---- 5. About ---- */
.fs-h3-frank { background: var(--fs-dark-base); }
.fs-h3-frank__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 56px; align-items: center; }
@media (max-width: 900px) { .fs-h3-frank__row { grid-template-columns: minmax(0, 1fr); gap: 34px; } }
.fs-h3 .fs-h3-frank__roles { margin-top: 12px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 13.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--fs-muted-dark); }
/* only the dots are rust; the words keep the line's stone colour (each word and its dot sit in a
no-wrap span so a dot never starts a line, so the rule must not reach those spans) */
.fs-h3-frank__roles [aria-hidden="true"] { color: var(--fs-rust-dark, var(--fs-red)); margin: 0 6px; }
.fs-h3 .fs-h3-frank__p { margin-top: 16px; max-width: 600px; font-size: 17px; line-height: 1.7; color: var(--fs-body-dark); }
.fs-h3 .fs-h3-frank__photo img { display: block; width: 100%; height: auto; border: 1px solid var(--fs-border-dark); border-radius: 2px; box-shadow: var(--fs-shadow-photo-dark); }
.fs-h3 .fs-h3-frank__photo figcaption { margin-top: 10px; font-family: var(--fs-font-serif); font-style: italic; font-size: 14.5px; color: var(--fs-muted-dark-2); text-align: left; }
.fs-h3 .fs-h3-quote { margin-top: 26px; max-width: 560px; border-left: 3px solid var(--fs-gold); padding: 4px 0 4px 18px; }
.fs-h3 .fs-h3-quote blockquote p { font-family: var(--fs-font-serif); font-style: italic; font-size: 20px; line-height: 1.45; color: var(--fs-bone); }
.fs-h3 .fs-h3-quote figcaption { margin-top: 8px; font-family: var(--fs-font-signage); font-style: normal; font-weight: 600; font-size: 12.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fs-gold); text-align: left; }
/* ---- 6. The letters ---- */
.fs-h3-letters { padding: clamp(60px, 8vw, 96px) 0 clamp(50px, 7vw, 80px); border-top: 1px solid var(--fs-border-dark); background: var(--fs-band-cream); }
.fs-h3-letters .fs-h-letters-grid { margin: 34px 0 0; }
/* ---- 7. The quote band ---- */
.fs-h3-quoteband { padding: clamp(80px, 10vw, 120px) 0; text-align: center; border-top: 1px solid var(--fs-border-dark); background: linear-gradient(rgba(10,9,7,0.88), rgba(10,9,7,0.88)), url('https://storage.ghost.io/c/c8/0a/c80a91e6-c619-41ac-8b88-f50e1b4cfccb/content/images/2026/08/img-19.jpg') center 35% / cover no-repeat; }
.fs-h3 .fs-h3-quote--band { margin: 0 auto; max-width: 900px; border: 0; padding: 0; }
.fs-h3 .fs-h3-quote--band blockquote p { font-size: clamp(24px, 3vw, 36px); line-height: 1.4; }
.fs-h3 .fs-h3-quote--band figcaption { margin-top: 18px; text-align: center; }
/* ---- Photo viewer (#fs-photobox) ---- */
.fs-photobox { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; padding: 64px 84px 56px; background: #0A0908; }
.fs-photobox.is-open { display: flex; }
.fs-photobox__fig { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.fs-photobox__img { display: block; max-width: 100%; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); width: auto; height: auto; border-radius: 2px; box-shadow: 0 30px 90px rgba(0,0,0,0.7); }
.fs-site .fs-photobox__cap { margin-top: 14px; padding: 0; font-family: var(--fs-font-serif); font-style: italic; font-weight: 400; font-size: 16px; color: var(--fs-muted-dark); text-align: center; }
.fs-site .fs-photobox__count { position: absolute; left: 20px; top: 20px; margin: 0; font-family: var(--fs-font-signage); font-weight: 600; font-size: 13px; letter-spacing: 2px; color: var(--fs-muted-dark-2); }
.fs-site .fs-photobox__close { position: absolute; top: 14px; right: 16px; margin: 0; background: rgba(13,12,10,0.9); border: 1.5px solid var(--fs-gold); color: var(--fs-gold); font-family: var(--fs-font-signage); font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: 2px; text-transform: uppercase; padding: 8px 16px; border-radius: var(--fs-radius); cursor: pointer; -webkit-appearance: none; appearance: none; }
.fs-site .fs-photobox__close:hover { background: var(--fs-gold); color: var(--fs-dark-base); }
.fs-site .fs-photobox__nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 0; padding: 0 0 4px; border-radius: 50%; border: 1.5px solid rgba(244,238,226,0.35); background: rgba(13,12,10,0.6); color: var(--fs-bone); font-size: 34px; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; }
.fs-site .fs-photobox__nav:hover { border-color: var(--fs-gold); color: var(--fs-gold); }
.fs-photobox__prev { left: 16px; }
.fs-photobox__next { right: 16px; }
@media (max-width: 767px) {
.fs-photobox { padding: 60px 12px 92px; }
.fs-photobox__img { max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); }
.fs-site .fs-photobox__nav { top: auto; bottom: 18px; transform: none; }
.fs-photobox__prev { left: calc(50% - 66px); }
.fs-photobox__next { right: calc(50% - 66px); }
}
/* ══════════════════════════════════════════════════════════════════
Build 4 (Sept 26, 2026): the About page (page-about.hbs).
The page reuses the Yankee Boy page's system (.fs-yb: chapters,
quotes, pinned photos, the heart band, coda, timeline and card);
what follows is only what About adds or changes, scoped to .fs-ab.
══════════════════════════════════════════════════════════════════ */
/* ---- 1. Hero: words on the left, Frank on the right ---- */
/* The hero is the shared photo banner (.fs-banner, Build 8h) since 1.14.6: Frank underground in 2021,
his headlamp lighting a rusted relic in his hands. He stands in the middle of the frame, so tablets
show a little more above him and phones get a 4:5 crop (tests_about.py keeps him clear of the words). */
.fs-ab-hero { --fs-banner-pos: 50% 40%; --fs-banner-pos-tab: 50% 43%; --fs-banner-phone: 4 / 5; }
.fs-ab-hero__text { min-width: 0; max-width: 640px; }
.fs-yb .fs-ab-hero__title { margin: 20px 0 0; max-width: 640px; font-size: clamp(42px, 5.4vw, 78px); line-height: 1.02; font-weight: 700; color: var(--fs-bone); }
.fs-ab-hero__accent { color: var(--fs-gold); }
.fs-yb .fs-ab-hero__roles { display: flex; flex-wrap: wrap; row-gap: 4px; margin-top: 20px; }
.fs-ab-hero__roles li { font-weight: 600; font-size: 15px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--fs-gold); }
/* the dot trails each role, so a wrapped line never starts with one */
.fs-ab-hero__roles li { white-space: nowrap; }
.fs-ab-hero__roles li:not(:last-child)::after { content: "\00b7"; content: "\00b7" / ""; margin: 0 12px; color: var(--fs-muted-dark-2); }
.fs-yb .fs-ab-hero__deck { margin-top: 22px; max-width: 560px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: #E6DCC8; text-wrap: pretty; }
/* ---- 3. The story: a drop cap to open it ---- */
.fs-yb.fs-ab #before-the-mines .fs-yb-ch__title + p::first-letter {
float: left; font-family: var(--fs-font-serif); font-weight: 700; font-size: 4.1em; line-height: 0.86;
padding: 6px 10px 0 0; color: var(--fs-red);
}
/* Two snapshots from 2026 stacked in the right margin of chapter V (side by side on narrower screens) */
.fs-yb .fs-ab-pins { grid-column: 3; grid-row: 1; justify-self: start; align-self: start; display: grid; gap: 34px; width: 100%; max-width: 270px; margin: 64px 0 0; }
.fs-yb .fs-ab-pins .fs-yb-fig--pin { grid-column: auto; grid-row: auto; justify-self: stretch; max-width: none; margin: 0; }
/* The channel card (chapter III) */
.fs-ab-channel {
display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; align-items: center;
margin: 34px 0 12px; padding: 22px 24px; background: var(--fs-dark-deepest); color: var(--fs-bone);
border: 1px solid var(--fs-border-dark); border-radius: var(--fs-radius); box-shadow: 0 16px 36px rgba(43,35,23,0.22);
}
.fs-ab-channel__badge { display: block; width: 112px; height: 112px; border-radius: 50%; }
.fs-yb .fs-ab-channel__kick { font-size: 12.5px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--fs-gold); }
.fs-yb .fs-ab-channel__name { margin-top: 4px; font-family: var(--fs-font-serif); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--fs-bone); text-wrap: balance; }
.fs-ab-channel__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fs-ab-channel__actions .fs-yb-btn { padding: 10px 16px; font-size: 14px; }
/* ---- 4. The road so far: the two undated entries get a dashed line; the Yankee Boy page's
dashed 5th and 6th entries (its 1936–1982 gap) don't apply here ---- */
.fs-ab .fs-yb-timeline li:nth-child(5), .fs-ab .fs-yb-timeline li:nth-child(6) { border-left-style: solid; }
.fs-ab .fs-yb-timeline li:nth-child(1), .fs-ab .fs-yb-timeline li:nth-child(2) { border-left-style: dashed; }
.fs-ab .fs-yb-card__list > div { grid-template-columns: 150px minmax(0, 1fr); }
/* ---- Responsive ---- */
@media (max-width: 1180px) { .fs-yb .fs-ab-pins { grid-column: 2; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 620px; margin: 30px 0; } }
@media (max-width: 1100px) {
.fs-ab-hero__roles li { font-size: 13.5px; letter-spacing: 1.8px; }
.fs-ab-hero__roles li:not(:last-child)::after { margin: 0 8px; }
}
@media (max-width: 767px) {
.fs-yb .fs-ab-hero__title { margin-top: 16px; }
.fs-ab-hero__roles li { font-size: 13.5px; letter-spacing: 2px; }
.fs-ab-hero__roles li:not(:last-child)::after { margin: 0 8px; }
.fs-ab .fs-yb-card__list > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
.fs-ab-channel { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 18px; }
.fs-ab-channel__badge { width: 72px; height: 72px; }
.fs-yb .fs-ab-channel__name { font-size: 21px; }
}
/* ══════════════════════════════════════════════════════════════════
Build 5 (Sept 26, 2026): the Films page (page-films.hbs).
A screening room: the headlamp hero, a marquee over the feature, two
short films, behind the camera, the tag board, place signs, then the
safety notice and the channel. Uses the .fs-yb resets and buttons;
everything new is scoped to .fs-fm.
══════════════════════════════════════════════════════════════════ */
.fs-fm { --fs-fm-night: #0B0A09; background: var(--fs-fm-night); }
.fs-fm [id] { scroll-margin-top: 92px; }
.fs-fm-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.fs-fm .fs-fm-meta { font-weight: 600; font-size: 14px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-fm-head { max-width: 760px; margin: 0 0 46px; }
.fs-fm .fs-fm-head__title { margin-top: 10px; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; font-weight: 700; color: var(--fs-bone); }
.fs-fm .fs-fm-head__dek { margin-top: 16px; max-width: 640px; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.65; color: var(--fs-body-dark); }
/* Stills that play (feature and short films): a gold play button in the middle */
.fs-fm-still {
position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden;
border: 0; border-radius: var(--fs-radius); background: #000; cursor: pointer;
box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}
.fs-fm-still img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, filter 0.4s ease; }
.fs-fm-still:hover img, .fs-fm-still:focus-visible img { transform: scale(1.03); filter: brightness(1.08); }
.fs-fm-play {
position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
background: rgba(13,12,10,0.55); border: 2px solid var(--fs-gold);
box-shadow: 0 0 0 8px rgba(201,162,39,0.14), 0 10px 30px rgba(0,0,0,0.5);
transition: transform 0.25s ease, background 0.25s ease;
}
.fs-fm-play::after {
content: ""; position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -8px;
border-left: 24px solid var(--fs-gold); border-top: 13px solid transparent; border-bottom: 13px solid transparent;
}
.fs-fm-still:hover .fs-fm-play, .fs-fm-still:focus-visible .fs-fm-play { transform: scale(1.08); background: rgba(201,162,39,0.94); }
/* The short films' posters: the still, lettered along its bottom edge (the h3 below carries the title for
assistive tech; the lettering is decoration), with the play button in the top right corner, clear of it */
.fs-fm-poster .fs-fm-play { left: auto; top: 18px; right: 18px; width: 64px; height: 64px; margin: 0; }
.fs-fm-poster .fs-fm-play::after { margin: -10px 0 0 -6px; border-left-width: 19px; border-top-width: 10px; border-bottom-width: 10px; }
.fs-fm-poster__still::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(11,10,9,0) 40%, rgba(11,10,9,0.55) 68%, rgba(11,10,9,0.9) 100%);
}
.fs-fm-poster__art { position: absolute; z-index: 1; left: 26px; right: 26px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; pointer-events: none; }
.fs-fm-poster__art-kick { font-weight: 600; font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--fs-gold); }
.fs-fm-poster__art-kick::after { content: ""; display: block; width: 34px; height: 1.5px; margin: 8px 0 10px; background: var(--fs-gold); opacity: 0.85; }
.fs-fm-poster__art-title { font-weight: 700; font-size: clamp(34px, 3.4vw, 52px); line-height: 0.92; letter-spacing: 1px; text-transform: uppercase; color: var(--fs-bone); text-shadow: 0 4px 22px rgba(0,0,0,0.6); }
.fs-fm-poster__art-sub { margin-top: 9px; font-weight: 600; font-size: clamp(13px, 1.15vw, 16px); letter-spacing: 2.4px; text-transform: uppercase; color: var(--fs-gold); }
.fs-fm-still:hover .fs-fm-play::after, .fs-fm-still:focus-visible .fs-fm-play::after { border-left-color: var(--fs-dark-base); }
/* ---- 1. Hero: the photo waits in the dark; the pointer is a headlamp ---- */
@property --fs-hx { syntax: ""; inherits: true; initial-value: 33%; }
@property --fs-hy { syntax: ""; inherits: true; initial-value: 22%; }
.fs-fm-hero {
position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
min-height: min(92vh, 900px); background: var(--fs-fm-night); color: var(--fs-bone);
}
.fs-fm-hero__pic { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; z-index: -1; --fs-hr: clamp(190px, 21vw, 330px); }
.fs-fm-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; }
.fs-fm-hero__img--dark { filter: brightness(0.26) saturate(0.5) contrast(1.05); }
.fs-fm-hero__img--lit {
filter: brightness(1.1) saturate(1.06) contrast(1.04);
-webkit-mask-image: radial-gradient(circle var(--fs-hr) at var(--fs-hx) var(--fs-hy), #000 0%, rgba(0,0,0,0.95) 30%, rgba(0,0,0,0.5) 62%, rgba(0,0,0,0) 100%);
mask-image: radial-gradient(circle var(--fs-hr) at var(--fs-hx) var(--fs-hy), #000 0%, rgba(0,0,0,0.95) 30%, rgba(0,0,0,0.5) 62%, rgba(0,0,0,0) 100%);
}
.fs-fm-hero__glow {
position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
background: radial-gradient(circle calc(var(--fs-hr) * 0.9) at var(--fs-hx) var(--fs-hy), rgba(255,232,180,0.16), rgba(255,232,180,0) 70%);
}
/* the picture melts into the dark along its left and bottom edges */
.fs-fm-hero__pic::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(90deg, var(--fs-fm-night) 0%, rgba(11,10,9,0.78) 13%, rgba(11,10,9,0) 40%),
linear-gradient(0deg, var(--fs-fm-night) 0%, rgba(11,10,9,0) 26%),
linear-gradient(180deg, rgba(11,10,9,0.55) 0%, rgba(11,10,9,0) 18%);
}
/* before anyone moves a pointer (and on touch screens) the light looks around by itself,
starting and resting on Frank's face; with reduced motion it stays there */
.fs-fm-hero__pic.is-idle { animation: fs-fm-look 18s ease-in-out infinite; }
@keyframes fs-fm-look {
0%, 18%, 100% { --fs-hx: 33%; --fs-hy: 22%; }
38% { --fs-hx: 50%; --fs-hy: 70%; }
58% { --fs-hx: 24%; --fs-hy: 60%; }
78% { --fs-hx: 42%; --fs-hy: 40%; }
}
.fs-fm-hero__inner { position: relative; width: 100%; padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(80px, 12vh, 140px); }
.fs-fm-hero__text { max-width: 600px; }
.fs-fm .fs-fm-hero__title {
margin: 18px 0 0; font-weight: 700; text-transform: uppercase;
font-size: clamp(54px, 7.4vw, 118px); line-height: 0.9; letter-spacing: 0.5px; color: var(--fs-bone);
text-shadow: 0 6px 30px rgba(0,0,0,0.6);
}
.fs-fm-hero__accent { color: var(--fs-gold); text-shadow: 0 0 28px rgba(201,162,39,0.35); }
.fs-fm .fs-fm-hero__deck { margin-top: 26px; max-width: 540px; font-size: clamp(17.5px, 1.5vw, 20px); line-height: 1.6; color: #E1D7C3; }
.fs-fm .fs-fm-hero__stats { display: flex; flex-wrap: wrap; row-gap: 8px; margin-top: 34px; }
.fs-fm-hero__stats li { font-weight: 600; font-size: 14px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-muted-dark); white-space: nowrap; }
.fs-fm-hero__stats b { color: var(--fs-bone); font-weight: 700; }
.fs-fm-hero__stats li:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 14px; margin: 0 16px; vertical-align: -2px; background: rgba(201,162,39,0.55); }
.fs-fm .fs-fm-hero__cap {
position: absolute; right: 40px; bottom: 22px; font-size: 12px; font-weight: 600; letter-spacing: 2px;
text-transform: uppercase; color: rgba(244,238,226,0.72);
}
/* ---- 2. Feature Presentation: a marquee sign, then the film ---- */
.fs-fm-feature {
position: relative; padding: clamp(70px, 9vw, 120px) 0;
background:
radial-gradient(ellipse 55% 42% at 50% 0%, rgba(255,196,90,0.13), rgba(255,196,90,0) 70%),
linear-gradient(180deg, #0F0D0A, var(--fs-dark-raised));
}
.fs-fm .fs-fm-marquee { display: flex; justify-content: center; margin: 0 0 clamp(42px, 5vw, 66px); line-height: 1; }
.fs-fm-marquee__sign {
--fs-bulb-inset: 12px; /* where the bulbs' track runs, from the sign's edge */
--fs-bulb-pitch: 17px; /* the spacing the bulbs are laid out to (fs-site.js 1f) */
--fs-bulb-size: 8px;
--fs-sign-glow: 0 0 1px rgba(255,246,220,0.95), 0 0 6px rgba(255,206,110,0.72), 0 0 16px rgba(255,170,56,0.42), 0 0 34px rgba(255,150,40,0.2);
position: relative; display: inline-block; padding: 36px clamp(46px, 5.6vw, 78px); border-radius: 6px;
font-weight: 700; font-size: clamp(19px, 2.5vw, 34px); line-height: 1; letter-spacing: 0.32em; text-indent: 0.32em;
text-transform: uppercase; color: #FFF6DC; text-shadow: var(--fs-sign-glow);
background: linear-gradient(180deg, #2A2013 0%, #1A130B 55%, #140E08 100%);
box-shadow: inset 0 1px 0 rgba(255,226,160,0.14), inset 0 0 0 1px rgba(0,0,0,0.55), inset 0 0 28px rgba(0,0,0,0.5),
0 0 0 2px #75592F, 0 0 0 8px #110C07, 0 0 0 9px #57442A, 0 26px 60px rgba(0,0,0,0.6), 0 0 110px rgba(255,180,60,0.13);
}
/* the bulbs (1.18.0): built by fs-site.js 1f, evenly round the sign and turning its corners, in
three sets that light one after another, so the light runs clockwise round the sign. Unlit, a
bulb is dark amber glass; lit, a white-hot centre in a warm halo. (1.15.0 had two soft sets that
glowed slowly in turn, and it read as no movement at all.) */
.fs-fm-bulbs, .fs-fm-bulbs__lit, .fs-fm-bulbs__set { position: absolute; inset: 0; pointer-events: none; }
.fs-fm-bulbs::after { /* a hairline between the bulbs' track and the letters */
content: ""; position: absolute; inset: calc(var(--fs-bulb-inset) * 2 - 2px); border-radius: 3px;
border: 1px solid rgba(255,214,140,0.1);
}
.fs-fm-bulb {
position: absolute; width: var(--fs-bulb-size); height: var(--fs-bulb-size); border-radius: 50%;
transform: translate(-50%, -50%);
}
.fs-fm-bulbs__set--dark .fs-fm-bulb {
background: radial-gradient(circle at 38% 34%, #7D6238 0 20%, #4A3920 58%, #2A1F11 100%);
box-shadow: 0 0 0 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(0,0,0,0.35);
}
.fs-fm-bulbs__lit .fs-fm-bulb {
background: radial-gradient(circle at 40% 36%, #FFFFFF 0 22%, #FFF2C4 40%, #FFD06A 72%, #F2AA3E 100%);
box-shadow: 0 0 0 1px rgba(92,62,20,0.55), 0 0 5px 1px rgba(255,210,115,0.95), 0 0 14px 4px rgba(255,176,56,0.4);
}
/* the chase: each set is lit a third of the time, with a quick warm fade either side, like a filament */
.fs-fm-bulbs__set--a, .fs-fm-bulbs__set--b, .fs-fm-bulbs__set--c { animation: fs-fm-chase 1.05s linear infinite; }
.fs-fm-bulbs__set--b { animation-delay: -0.7s; }
.fs-fm-bulbs__set--c { animation-delay: -0.35s; }
@keyframes fs-fm-chase { 0%, 30% { opacity: 1; } 36%, 94% { opacity: 0; } 100% { opacity: 1; } }
/* the power-up, the first time the sign is in view (fs-site.js 1f): the letters flicker on, then
the chase lights */
.fs-fm-marquee__sign.is-powering { color: #5E4D34; text-shadow: none; }
.fs-fm-marquee__sign.is-powering .fs-fm-bulbs__lit { opacity: 0; }
.fs-fm-marquee__sign.is-lit { animation: fs-fm-power 1.2s linear both; }
.fs-fm-marquee__sign.is-lit .fs-fm-bulbs__lit { animation: fs-fade-in 0.3s linear 0.62s both; }
@keyframes fs-fm-power {
0% { color: #5E4D34; text-shadow: none; }
7% { color: #FFF6DC; text-shadow: var(--fs-sign-glow); }
12% { color: #6A583C; text-shadow: none; }
21% { color: #FFF6DC; text-shadow: var(--fs-sign-glow); }
26% { color: #8A7550; text-shadow: none; }
34%, 100% { color: #FFF6DC; text-shadow: var(--fs-sign-glow); }
}
/* without the script: a still row of lit bulbs, spaced evenly */
.fs-fm-marquee__sign:not(.has-bulbs)::before {
--fs-bulb: radial-gradient(circle, #FFF6DA 0 2px, rgba(255,208,112,0.9) 2.8px, rgba(255,190,80,0) 5.5px);
content: ""; position: absolute; inset: 6px; pointer-events: none;
background: var(--fs-bulb) 0 0 / 12px 12px space no-repeat, var(--fs-bulb) 0 100% / 12px 12px space no-repeat,
var(--fs-bulb) 0 0 / 12px 12px no-repeat space, var(--fs-bulb) 100% 0 / 12px 12px no-repeat space;
}
.is-offscreen .fs-fm-bulbs__set { animation-play-state: paused !important; }
.fs-fm-feature__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(34px, 4.5vw, 64px); align-items: center; }
/* the film number, stamped on a brass tag like the ones on the tag board */
.fs-fm .fs-fm-no {
display: inline-flex; align-items: baseline; gap: 9px; padding: 8px 16px 7px; border-radius: 40px;
font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: 1.4px; color: #3B2A0A;
background: radial-gradient(circle at 30% 25%, #F2D98E, #C9A04A 45%, #8F6A24);
text-shadow: 0 1px 0 rgba(255,240,200,0.5);
box-shadow: inset 0 -2px 5px rgba(60,40,10,0.4), 0 4px 12px rgba(0,0,0,0.45);
}
.fs-fm-no__label { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; }
.fs-fm .fs-fm-feature__title { margin-top: 20px; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.12; font-weight: 700; color: var(--fs-bone); }
.fs-fm .fs-fm-feature__info .fs-fm-meta { margin-top: 14px; }
.fs-fm .fs-fm-feature__desc { margin-top: 18px; max-width: 520px; font-size: 18px; line-height: 1.65; color: var(--fs-body-dark); }
/* ---- 3. Two short films ---- */
.fs-fm-shorts { padding: clamp(70px, 8vw, 110px) 0; background: var(--fs-dark-base); border-top: 1px solid var(--fs-border-dark); }
.fs-fm-shorts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 4vw, 56px); }
.fs-fm-poster { display: flex; flex-direction: column; min-width: 0; }
.fs-fm-poster__body { padding-top: 24px; }
.fs-fm .fs-fm-poster__title { margin-top: 10px; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; font-weight: 700; color: var(--fs-bone); }
.fs-fm .fs-fm-poster__syn { margin-top: 14px; max-width: 560px; font-size: 17px; line-height: 1.65; color: var(--fs-body-dark); }
.fs-fm .fs-fm-credits {
display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 34px;
margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--fs-border-dark);
}
.fs-fm-credits dt { font-family: var(--fs-font-signage); font-weight: 600; font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-gold); }
.fs-fm .fs-fm-credits dd { margin-top: 3px; font-size: 16px; color: var(--fs-bone); }
/* ---- 4. Behind the camera (cream) ---- */
.fs-fm-craft { padding: clamp(80px, 9vw, 120px) 0 clamp(70px, 8vw, 110px); background: var(--fs-cream); color: var(--fs-body-cream); }
.fs-site .fs-fm-craft :focus-visible { outline-color: var(--fs-ink); }
.fs-fm-craft__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.fs-fm .fs-fm-craft__photo { position: relative; isolation: isolate; margin: 0 18px 18px 0; }
.fs-fm-craft__photo::before { content: ""; position: absolute; z-index: -1; top: 18px; left: 18px; right: -18px; bottom: -18px; border: 1.5px solid rgba(110,91,34,0.55); border-radius: 2px; }
.fs-fm-craft__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--fs-radius); box-shadow: 0 30px 60px rgba(43,35,23,0.28); }
.fs-fm .fs-fm-craft__photo figcaption {
position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: var(--fs-radius);
font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
color: rgba(244,238,226,0.92); background: rgba(13,12,10,0.72);
}
.fs-fm .fs-fm-craft__title { margin-top: 10px; font-size: clamp(34px, 3.8vw, 54px); line-height: 1.05; font-weight: 700; color: var(--fs-ink); }
.fs-fm .fs-fm-craft__quote { width: auto; margin: 26px 0 0; padding: 0 0 0 22px; background: none; border: 0; border-left: 3px solid var(--fs-red); border-radius: 0; box-shadow: none; font: inherit; }
.fs-fm .fs-fm-craft__quote p { margin: 0; font-family: var(--fs-font-serif); font-size: clamp(22px, 2.1vw, 29px); line-height: 1.35; font-style: italic; font-weight: 400; color: var(--fs-ink); }
.fs-fm .fs-fm-craft__quote footer { margin-top: 12px; font-weight: 600; font-size: 13px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-fm .fs-fm-air__title { margin-top: 36px; font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: 3px; text-transform: uppercase; color: var(--fs-ink); }
.fs-fm .fs-fm-air { margin-top: 12px; border-top: 1px solid var(--fs-border-cream); }
.fs-fm-air li { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); gap: 4px 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--fs-border-cream); }
.fs-fm-air__what { font-size: 17px; font-weight: 700; color: var(--fs-ink); }
.fs-fm-air__detail { font-size: 15px; color: var(--fs-body-cream-2); }
/* A contact sheet: five frames on a strip of film */
.fs-fm-sheet { margin-top: clamp(56px, 7vw, 90px); }
.fs-fm .fs-fm-sheet__strip {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 30px 14px 46px;
border-radius: 3px; background-color: #15110E;
background-image:
linear-gradient(90deg, var(--fs-cream) 0 11px, transparent 11px),
linear-gradient(90deg, var(--fs-cream) 0 11px, transparent 11px);
background-size: 24px 9px, 24px 9px; background-position: 6px 10px, 6px calc(100% - 10px); background-repeat: repeat-x;
box-shadow: 0 24px 50px rgba(43,35,23,0.3);
}
.fs-fm-sheet__frame { position: relative; min-width: 0; }
.fs-fm-sheet__frame img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.fs-fm-sheet__no { position: absolute; left: 4px; bottom: -20px; line-height: 1; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11px; letter-spacing: 1.5px; color: var(--fs-gold); }
/* ---- 5. The tag board ---- */
.fs-fm-board { padding: clamp(80px, 9vw, 120px) 0; color: var(--fs-body-dark); background: linear-gradient(180deg, #1C1611, #120E0A); }
/* the board itself: dark boards with faint seams, the tags hung on nails */
.fs-fm-board__panel {
padding: clamp(30px, 4vw, 50px) clamp(18px, 3.5vw, 48px); border-radius: 4px;
background:
repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 158px, rgba(0,0,0,0.38) 158px 160px, rgba(255,235,200,0.035) 160px 161px),
linear-gradient(180deg, #17120D, #100C09);
box-shadow: inset 0 0 0 1px rgba(201,162,39,0.18), inset 0 20px 60px rgba(0,0,0,0.35), 0 30px 60px rgba(0,0,0,0.35);
}
.fs-fm .fs-fm-board__row { display: flex; align-items: center; gap: 16px; margin: 0 0 26px; font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: 3px; text-transform: uppercase; color: var(--fs-gold); }
.fs-fm-board__row::after { content: ""; flex: 1; height: 1px; background: rgba(201,162,39,0.3); }
.fs-fm .fs-fm-tags + .fs-fm-board__row { margin-top: 56px; }
.fs-fm .fs-fm-tags { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 26px; }
.fs-fm-tag {
position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%;
padding: 22px 10px 12px; border: 0; border-radius: 6px; background: none; color: inherit;
font: inherit; text-align: center; text-decoration: none; cursor: pointer;
}
/* the nail the tag hangs on, sitting in the tag's punched hole */
.fs-fm-tag::before {
content: ""; position: absolute; z-index: 2; top: 32px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #D9D3C7, #6D665C 55%, #2B2723); box-shadow: 0 2px 3px rgba(0,0,0,0.7);
}
.fs-fm-tag__disc {
position: relative; display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%; transform-origin: 50% 15px;
background: radial-gradient(circle at 32% 26%, #F6E3A4 0%, #D2A94D 30%, #A47B2C 64%, #6E5019 100%);
box-shadow: inset 0 0 0 3px rgba(255,238,180,0.28), inset 0 -8px 16px rgba(70,45,10,0.55), 0 12px 20px rgba(0,0,0,0.55);
}
.fs-fm-tag__disc::before {
content: ""; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
background: #16110C; box-shadow: inset 0 2px 3px rgba(0,0,0,0.9), 0 1px 0 rgba(255,240,200,0.35);
}
.fs-fm-tag__no {
margin-top: 12px; font-family: var(--fs-font-signage); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: 0.5px;
color: #4A3510; text-shadow: 0 1px 0 rgba(255,244,205,0.6), 0 -1px 0 rgba(60,38,8,0.55);
}
.fs-fm-tag__title { margin-top: 20px; font-family: var(--fs-font-serif); font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--fs-bone); text-wrap: balance; transition: color 0.2s ease; }
.fs-fm-tag__meta { margin-top: 8px; font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-muted-dark); }
/* a brass tag sways on its nail when the pointer finds it (1.15.0: a little less than before) */
.fs-fm-tag:hover .fs-fm-tag__disc, .fs-fm-tag:focus-visible .fs-fm-tag__disc { animation: fs-fm-sway 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.fs-fm-tag:hover .fs-fm-tag__title, .fs-fm-tag:focus-visible .fs-fm-tag__title { color: var(--fs-gold); }
@keyframes fs-fm-sway {
0% { transform: rotate(0); } 20% { transform: rotate(5deg); } 44% { transform: rotate(-3.5deg); }
66% { transform: rotate(1.8deg); } 84% { transform: rotate(-0.7deg); } 100% { transform: rotate(0); }
}
/* "every film": a steel tag */
.fs-fm-tag--more .fs-fm-tag__disc {
background: radial-gradient(circle at 32% 26%, #DEDBD5 0%, #A29D94 34%, #6B675F 70%, #3E3B36 100%);
box-shadow: inset 0 0 0 3px rgba(255,255,255,0.18), inset 0 -8px 16px rgba(20,18,15,0.55), 0 12px 20px rgba(0,0,0,0.55);
}
.fs-fm-tag--more .fs-fm-tag__no { font-size: 58px; margin-top: 8px; color: #2C2A27; text-shadow: 0 1px 0 rgba(255,255,255,0.45); }
/* 1.18.11: a film from his second channel, which doesn't number its films: a copper tag with his initials */
.fs-fm-tag--second .fs-fm-tag__disc {
background: radial-gradient(circle at 32% 26%, #F3CDAE 0%, #C9834F 32%, #9B5629 66%, #5F3315 100%);
box-shadow: inset 0 0 0 3px rgba(255,222,196,0.26), inset 0 -8px 16px rgba(60,26,8,0.55), 0 12px 20px rgba(0,0,0,0.55);
}
.fs-fm-tag--second .fs-fm-tag__no { color: #3B1C08; text-shadow: 0 1px 0 rgba(255,226,202,0.55), 0 -1px 0 rgba(48,20,5,0.55); }
/* ---- 6. By place: enamel signs ---- */
.fs-fm-places { padding: clamp(70px, 8vw, 110px) 0; background: var(--fs-dark-base); border-top: 1px solid var(--fs-border-dark); }
.fs-fm .fs-fm-signs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.fs-fm-sign {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 128px;
padding: 22px 30px; border-radius: 10px; text-align: center; text-decoration: none;
background: linear-gradient(180deg, #F7F0E0, #E9DEC4); color: var(--fs-ink);
box-shadow: inset 0 0 0 4px #F7F0E0, inset 0 0 0 6px var(--fs-ink), 0 14px 26px rgba(0,0,0,0.5);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fs-fm-sign::before, .fs-fm-sign::after {
content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #D6CFC2, #7B7367 60%, #3B3631); box-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.fs-fm-sign::before { left: 13px; }
.fs-fm-sign::after { right: 13px; }
.fs-fm-sign__name { font-weight: 700; font-size: clamp(23px, 2.1vw, 31px); line-height: 1.05; letter-spacing: 3px; text-transform: uppercase; color: var(--fs-ink); text-wrap: balance; }
.fs-fm-sign__where { margin-top: 10px; font-weight: 600; font-size: 13px; line-height: 1.2; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-fm-sign:hover, .fs-fm-sign:focus-visible {
transform: translateY(-4px) rotate(-0.6deg);
box-shadow: inset 0 0 0 4px #F7F0E0, inset 0 0 0 6px var(--fs-red), 0 20px 34px rgba(0,0,0,0.55);
}
/* ---- 7. Safety, then the channel ---- */
.fs-fm-end { padding: clamp(70px, 8vw, 100px) 0 clamp(80px, 9vw, 120px); background: var(--fs-dark-deepest); border-top: 1px solid var(--fs-border-dark); }
.fs-fm .fs-fm-end .fs-yb-notice { max-width: 980px; margin: 0 auto; }
/* the notice's title is a heading on every page (Build 5b), styled as the kicker it replaced */
body.fs-site .fs-notice__title { margin: 0; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12.5px; line-height: 1.3; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-gold); text-wrap: balance; }
#work { scroll-margin-top: 100px; }
.fs-fm-channel { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 36px; align-items: center; max-width: 980px; margin: clamp(52px, 6vw, 80px) auto 0; }
.fs-fm-channel__badge { display: block; width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(201,162,39,0.4), 0 0 0 10px rgba(201,162,39,0.07), 0 20px 50px rgba(0,0,0,0.6); }
.fs-fm .fs-fm-channel__title { margin-top: 8px; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; font-weight: 700; color: var(--fs-bone); }
.fs-fm .fs-fm-channel__subs { margin-top: 10px; font-weight: 600; font-size: 15px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-fm-channel__subs b { color: var(--fs-gold); }
.fs-fm .fs-fm-channel .fs-fm-actions { margin-top: 22px; }
.fs-fm .fs-fm-channel__also { margin-top: 20px; font-size: 16px; color: var(--fs-body-dark); }
.fs-fm .fs-fm-note { margin-top: 10px; font-size: 13px; font-style: italic; color: var(--fs-muted-dark-2); }
/* ---- Less motion: the light rests on Frank, the bulbs stay lit, the tags stay still ---- */
@media (prefers-reduced-motion: reduce) {
.fs-fm-hero__pic.is-idle, .fs-fm-bulbs__set, .fs-fm-marquee__sign.is-lit, .fs-fm-marquee__sign.is-lit .fs-fm-bulbs__lit { animation: none; }
.fs-fm-tag:hover .fs-fm-tag__disc, .fs-fm-tag:focus-visible .fs-fm-tag__disc { animation: none; }
.fs-fm-still img, .fs-fm-sign { transition: none; }
}
/* ---- Responsive ---- */
@media (max-width: 1100px) {
.fs-fm-hero__pic { width: 70%; }
.fs-fm-air li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 915px) {
.fs-fm-feature__row { grid-template-columns: minmax(0, 1fr); }
.fs-fm-craft__grid { grid-template-columns: minmax(0, 1fr); }
.fs-fm .fs-fm-craft__photo { max-width: 520px; }
.fs-fm .fs-fm-tags, .fs-fm .fs-fm-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.fs-fm-hero { display: block; min-height: 0; }
.fs-fm-hero__pic { position: relative; width: 100%; aspect-ratio: 1 / 0.92; --fs-hr: 42vw; }
.fs-fm-hero__img { object-position: 36% 28%; }
.fs-fm-hero__pic::after { background: linear-gradient(0deg, var(--fs-fm-night) 0%, rgba(11,10,9,0) 34%), linear-gradient(180deg, rgba(11,10,9,0.5) 0%, rgba(11,10,9,0) 20%); }
.fs-fm-hero__inner { margin-top: -34px; padding-top: 0; padding-bottom: 60px; }
.fs-fm .fs-fm-hero__cap { top: 14px; right: 16px; bottom: auto; }
.fs-fm .fs-fm-hero__stats { column-gap: 20px; }
.fs-fm-hero__stats li:not(:last-child)::after { display: none; }
.fs-fm-marquee__sign { --fs-bulb-inset: 10px; --fs-bulb-pitch: 15px; --fs-bulb-size: 7px; padding: 30px 34px; font-size: 18px; letter-spacing: 0.2em; text-indent: 0.2em; text-align: center; }
.fs-fm-shorts__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.fs-fm .fs-fm-credits { grid-template-columns: minmax(0, 1fr); }
.fs-fm-credits > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.fs-fm .fs-fm-credits dd { margin-top: 0; }
.fs-fm .fs-fm-sheet__strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 66%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.fs-fm-sheet__frame { scroll-snap-align: center; }
.fs-fm-channel { grid-template-columns: 96px minmax(0, 1fr); gap: 22px; }
.fs-fm-channel__badge { width: 96px; height: 96px; }
.fs-fm-poster__art { left: 16px; right: 16px; bottom: 14px; }
.fs-fm-poster__art-title { font-size: 30px; }
.fs-fm-poster__art-sub { font-size: 12px; letter-spacing: 2px; }
.fs-fm-poster .fs-fm-play { top: 12px; right: 12px; width: 52px; height: 52px; }
.fs-fm-poster .fs-fm-play::after { margin: -8px 0 0 -5px; border-left-width: 15px; border-top-width: 8px; border-bottom-width: 8px; }
.fs-fm-play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
.fs-fm-play::after { margin: -11px 0 0 -6px; border-left-width: 20px; border-top-width: 11px; border-bottom-width: 11px; }
}
@media (max-width: 480px) {
.fs-fm .fs-fm-tags { gap: 34px 12px; }
.fs-fm-tag { padding-left: 4px; padding-right: 4px; }
.fs-fm-tag__disc { width: 104px; height: 104px; }
.fs-fm-tag__no { font-size: 38px; }
.fs-fm-tag--more .fs-fm-tag__no { font-size: 50px; }
.fs-fm-tag__title { font-size: 16px; }
.fs-fm .fs-fm-signs { gap: 16px; }
.fs-fm-sign { min-height: 110px; padding: 18px 22px; }
.fs-fm-sign__name { font-size: 20px; letter-spacing: 2px; }
.fs-fm-sign__where { font-size: 11.5px; letter-spacing: 1.6px; }
.fs-fm-sign::before { left: 9px; }
.fs-fm-sign::after { right: 9px; }
.fs-fm-channel { grid-template-columns: minmax(0, 1fr); }
.fs-fm .fs-fm-hero__stats li { font-size: 13px; letter-spacing: 1.8px; }
.fs-fm-actions .fs-yb-btn { flex: 1 1 100%; }
.fs-fm-marquee__sign { --fs-bulb-inset: 9px; --fs-bulb-pitch: 14px; --fs-bulb-size: 6px; font-size: 16px; letter-spacing: 0.16em; text-indent: 0.16em; padding: 27px 28px; }
}
/* ══════════════════════════════════════════════════════════════════
Build 5b (Sept 26, 2026, evening): word balance, site-wide.
Headings, short quotes and card titles balance their lines everywhere
(the Yankee Boy, home and Films layers already did this for their own
elements); paragraphs avoid a lone word on the last line.
══════════════════════════════════════════════════════════════════ */
body.fs-site :is(h1, h2, h3, h4) { text-wrap: balance; }
body.fs-site :is(.fs-h3-quote p, .fs-h-closer-title, .fs-card__title, .fs-chcard h3, .fs-filmblock h3, .fs-kick, figcaption) { text-wrap: balance; }
body.fs-site :is(p, li, dd) { text-wrap: pretty; }
.fs-h3 .fs-h3-quote--band blockquote p { text-wrap: balance; }
/* A text link never breaks across two lines (they are all a few words long) */
body.fs-site .fs-link { white-space: nowrap; }
/* ══════════════════════════════════════════════════════════════════
Build 6 (Sept 26, 2026): the Letters archive (collection-letters.hbs).
A box of prints: each letter is a matted photograph with a postmark
stamp. Uses the .fs-yb resets and buttons; everything new is .fs-lt.
══════════════════════════════════════════════════════════════════ */
.fs-lt { background: var(--fs-cream); color: var(--fs-body-cream); }
.fs-lt [id] { scroll-margin-top: 92px; }
.fs-site .fs-lt-latest :focus-visible, .fs-site .fs-lt-archive :focus-visible { outline-color: var(--fs-ink); }
/* ---- Prints: a white mat, a paper shadow, the photograph at 3:2 ---- */
.fs-lt .fs-lt-print { position: relative; margin: 0; padding: 10px 10px 12px; background: #FFFDF8; border-radius: 2px; box-shadow: 0 1px 0 rgba(43,35,23,0.08), 0 14px 30px rgba(43,35,23,0.16); }
.fs-lt .fs-lt-print img, .fs-lt-print__blank { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #2B2622; }
.fs-lt-print__blank { background: radial-gradient(circle at 50% 40%, #3A332A, #1B1815 70%); }
/* the postmark: a double ring, stamped slightly askew across the print's corner */
/* The postmark (partials/letter-postmark.hbs): an SVG cancellation stamp in red ink on a paper disc,
struck a little askew across the print's corner */
.fs-lt-stamp {
position: absolute; top: -14px; right: -14px; z-index: 1; display: none;
width: 104px; height: 104px; border-radius: 50%; transform: rotate(-11deg);
background: rgba(255,253,248,0.94); box-shadow: 0 6px 16px rgba(43,35,23,0.22); pointer-events: none;
}
.fs-lt-card.is-numbered .fs-lt-stamp { display: block; }
.fs-lt-pm { display: block; width: 100%; height: 100%; overflow: visible; color: var(--fs-red); }
.fs-lt-pm__ring { fill: none; stroke: currentColor; stroke-width: 2.4; }
.fs-lt-pm__ring--in { stroke-width: 1.2; }
.fs-lt-pm__dot { fill: currentColor; }
.fs-lt-pm__rule { stroke: currentColor; stroke-width: 1; }
.fs-lt-pm text { fill: currentColor; font-family: var(--fs-font-signage); text-transform: uppercase; }
.fs-lt-pm__arc { font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; }
.fs-lt-pm__n { font-size: 23px; font-weight: 700; letter-spacing: 0.5px; }
.fs-lt-pm__date { font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; }
/* ---- 1. Hero: the letter on the photograph (1.15.0) ----
Computers (1280px and up): the tram tower photograph fills the hero edge to edge, in its own
colours, and settles slowly (the site's hero movement, --fs-settle). The words sit on a cream
letter over the open sky left of Frank: the photograph always fills the width there, so Frank's
elbow is at 34% of the screen, and the letter ends before 33.3% less 16px (tests_letters.py
measures it at seven computer sizes). The hero grows with the screen's width as well as its
height, so Frank is seen head to boots on wide screens too.
Tablets and phones: the photograph on top (16:9; phones get a 4:5 crop of their own), fading
into the dark at its foot, and the letter rising over it. */
.fs-lt-hero {
--fs-lt-edge: clamp(24px, 3.4vw, 110px);
/* below 1600px the photograph starts a little in from the left and the sky is carried out to the
edge in its own colour (sampled down the photograph's left edge, which is open sky), so the
letter keeps its width on laptops */
--fs-lt-shift: clamp(0px, calc((1600px - 100vw) * 0.55), 176px);
position: relative; isolation: isolate; overflow: hidden;
display: flex; align-items: center;
min-height: max(clamp(600px, calc(100vh - 120px), 960px), calc(100vw / 2.1));
padding: clamp(40px, 4.4vw, 72px) 0;
background:
linear-gradient(180deg, rgba(13,12,10,0.34) 0%, rgba(13,12,10,0) 9%),
linear-gradient(180deg, #AFD3FF 0%, #B7D9FF 30%, #C0DEFE 52%, #C6E1FE 72%, #C7E2FF 100%);
}
/* while the photograph loads, its colours in outline: sky on the left, spruce on the right */
.fs-lt-hero .fs-lt-hero__photo {
position: absolute; top: 0; right: 0; bottom: 0; left: var(--fs-lt-shift); z-index: -1; margin: 0; padding: 0; overflow: hidden;
background: linear-gradient(90deg, #BBDCFD 0%, #B3D6FD 36%, #46553A 46%, #2F3B27 100%);
-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 min(72px, var(--fs-lt-shift)));
mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 min(72px, var(--fs-lt-shift)));
}
.fs-lt-hero__photo picture { display: block; width: 100%; height: 100%; }
.fs-lt-hero .fs-lt-hero__photo img {
display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 36%;
border-radius: 0; box-shadow: none; transform-origin: 45% 47%;
animation: fs-banner-push var(--fs-settle-time, 16s) var(--fs-ease-settle, cubic-bezier(0.2, 0.6, 0.2, 1)) both;
}
/* a light shade under the header */
.fs-lt-hero__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13,12,10,0.34) 0%, rgba(13,12,10,0) 9%); }
.fs-lt-hero .fs-lt-hero__credit {
position: absolute; z-index: 1; right: clamp(20px, 2.6vw, 40px); bottom: clamp(18px, 2.4vw, 32px);
margin: 0; padding: 6px 12px; border-radius: var(--fs-radius);
font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
color: rgba(244,238,226,0.92); background: rgba(13,12,10,0.62);
}
.fs-lt-hero__inner { position: relative; width: 100%; padding: 0 var(--fs-lt-edge); }
/* The letter: cream paper with a hairline rule inside its edge, lifted off the sky by a soft shadow */
.fs-lt .fs-lt-letter {
position: relative; box-sizing: border-box;
width: min(calc(400px + 9vw), calc(33.3% + 0.667 * var(--fs-lt-shift) - 0.334 * var(--fs-lt-edge) - 16px));
container-type: inline-size;
padding: clamp(34px, 2.7vw, 48px) clamp(28px, 2.5vw, 46px) clamp(30px, 2.5vw, 42px);
color: var(--fs-body-cream); background: var(--fs-cream); border-radius: var(--fs-radius);
box-shadow: 0 1px 2px rgba(13,12,10,0.10), 0 12px 24px rgba(13,12,10,0.12), 0 34px 70px rgba(13,12,10,0.26);
animation: fs-rise 0.9s var(--fs-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 0.15s both;
}
.fs-lt-letter::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(110,91,34,0.22); border-radius: 1px; pointer-events: none; }
/* rust a shade deeper than --fs-red for the letter's words, so the small ones read at 4.8:1 on the cream */
.fs-lt .fs-lt-letter { --fs-lt-rust: #AD4C2B; }
.fs-lt .fs-lt-letter .fs-yb-sign { color: var(--fs-lt-rust); font-size: 14px; letter-spacing: 3.6px; gap: 12px; }
.fs-lt .fs-lt-letter .fs-yb-sign::before, .fs-lt .fs-lt-letter .fs-yb-sign::after { width: 28px; }
/* the title keeps to two lines, "Letters from a / Retired Madman": sized to the letter's own width
("Retired Madman" is 8.7 times the type size in Georgia) */
.fs-lt .fs-lt-hero__title { margin: 16px 0 0; font-size: clamp(30px, 3vw, 54px); font-size: clamp(26px, 11cqi, 60px); line-height: 1.04; font-weight: 700; color: var(--fs-ink); }
.fs-lt-hero__accent { display: inline-block; color: var(--fs-lt-rust, var(--fs-red)); }
.fs-lt .fs-lt-hero__deck { margin-top: 18px; font-size: clamp(16.5px, 1.2vw, 19px); line-height: 1.6; color: var(--fs-body-cream); }
.fs-lt-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; }
.fs-lt .fs-lt-hero__stats { display: flex; flex-wrap: wrap; row-gap: 6px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(110,91,34,0.2); }
.fs-lt-hero__stats li { font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-bronze); white-space: nowrap; }
.fs-lt-hero__stats b { color: var(--fs-ink); font-weight: 700; }
.fs-lt-hero__stats li:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 13px; margin: 0 14px; vertical-align: -2px; background: rgba(110,91,34,0.45); }
/* The postmark: struck across the letter's top corner, red ink on a paper disc like the prints below,
carrying the month of the latest letter */
.fs-lt-letter__pm {
position: absolute; top: -46px; right: 20px; z-index: 1; display: block;
width: 112px; height: 112px; border-radius: 50%; transform: rotate(-11deg);
background: rgba(255,253,248,0.96); box-shadow: 0 8px 20px rgba(13,12,10,0.22); pointer-events: none;
animation: fs-strike 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.75s both;
}
.fs-lt-letter__pm .fs-lt-pm__n { font-size: 25px; letter-spacing: 1.5px; }
/* ---- 2. The latest letter: one wide print, words beside it ---- */
.fs-lt-latest { padding: clamp(56px, 7vw, 90px) 0 clamp(30px, 4vw, 50px); }
.fs-lt-card { position: relative; min-width: 0; }
.fs-lt-card__link { display: block; color: inherit; text-decoration: none; }
.fs-lt-card--wide { margin-top: 22px; }
.fs-lt-card--wide .fs-lt-card__link { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(30px, 4.5vw, 64px); align-items: center; }
.fs-lt-card--wide .fs-lt-print { padding: 12px 12px 14px; }
.fs-lt .fs-lt-card__meta { font-weight: 600; font-size: 13px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-lt .fs-lt-card__title { margin-top: 10px; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.15; font-weight: 700; color: var(--fs-ink); transition: color 0.2s ease; }
.fs-lt .fs-lt-card__excerpt { margin-top: 14px; font-size: 17.5px; line-height: 1.65; color: var(--fs-body-cream-2); }
.fs-lt-card__cta { display: inline-block; margin-top: 18px; font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-red); border-bottom: 1.5px solid transparent; transition: border-color 0.2s ease; }
.fs-lt-card__link:hover .fs-lt-card__title, .fs-lt-card__link:focus-visible .fs-lt-card__title { color: var(--fs-red); }
.fs-lt-card__link:hover .fs-lt-card__cta, .fs-lt-card__link:focus-visible .fs-lt-card__cta { border-color: var(--fs-red); }
.fs-lt-card__link .fs-lt-print { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.fs-lt-card__link:hover .fs-lt-print, .fs-lt-card__link:focus-visible .fs-lt-print { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(43,35,23,0.08), 0 22px 40px rgba(43,35,23,0.22); }
/* ---- 3. The archive grid ---- */
.fs-lt-archive { padding: clamp(40px, 5vw, 70px) 0 clamp(70px, 8vw, 110px); }
.fs-lt-archive--empty { padding-top: clamp(56px, 7vw, 90px); }
.fs-lt-archive__head { max-width: 720px; margin-bottom: 8px; }
.fs-lt .fs-lt-archive__title { margin-top: 10px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; font-weight: 700; color: var(--fs-ink); }
.fs-lt .fs-lt-archive__dek { margin-top: 12px; font-size: 17px; font-style: italic; color: var(--fs-body-cream-2); }
.fs-lt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3.5vw, 48px) clamp(24px, 3vw, 40px); margin-top: 28px; }
.fs-lt-grid .fs-lt-card__title { font-size: 22px; line-height: 1.25; }
.fs-lt-grid .fs-lt-card__body { padding-top: 20px; }
.fs-lt-grid .fs-lt-card__excerpt { font-size: 16px; }
/* the year line spans the grid, ruled like a page in a ledger */
.fs-lt .fs-lt-year { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; margin: 18px 0 -6px; font-weight: 700; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-lt-year::after { content: ""; flex: 1; height: 1px; background: var(--fs-border-cream); }
.fs-lt-grid .fs-lt-year:first-child { margin-top: 0; }
/* pagination on cream */
.fs-lt .pagination { margin-top: 48px; }
/* The same prints on the home page (Build 7b): no background of their own, the site's focus ring on cream */
.fs-lt--inline { background: transparent; color: inherit; }
.fs-lt--inline .fs-lt-grid { margin-top: 34px; }
.fs-site .fs-lt--inline :focus-visible { outline-color: var(--fs-ink); }
.fs-h3 .fs-h3-letters__none { margin-top: 30px; font-size: 18px; color: var(--fs-body-cream-2); }
/* ---- Responsive ---- */
@media (max-width: 1279px) {
/* the photograph on top, fading into the dark at its foot; the letter rises over it */
.fs-lt-hero { --fs-lt-lift: clamp(40px, 5vw, 56px); --fs-lt-shift: 0px; display: block; min-height: 0; padding: 0 0 clamp(52px, 7vw, 76px); background: var(--fs-dark-deepest); }
/* width 100%: with only a max-height, the 16:9 ratio would carry that limit across and narrow the photograph */
.fs-lt-hero .fs-lt-hero__photo { position: relative; inset: auto; z-index: 0; width: 100%; aspect-ratio: 16 / 9; max-height: 76vh; -webkit-mask-image: none; mask-image: none; }
.fs-lt-hero .fs-lt-hero__photo img { position: absolute; inset: 0; object-position: 50% 45%; }
.fs-lt-hero__photo::after { background: linear-gradient(0deg, var(--fs-dark-deepest) 0%, rgba(13,12,10,0.45) 9%, rgba(13,12,10,0) 22%), linear-gradient(180deg, rgba(13,12,10,0.34) 0%, rgba(13,12,10,0) 12%); }
/* the credit moves to the top corner, clear of the letter and its postmark */
.fs-lt-hero .fs-lt-hero__credit { top: 14px; bottom: auto; right: 16px; }
.fs-lt-hero__inner { z-index: 1; margin-top: calc(-1 * var(--fs-lt-lift)); padding: 0 clamp(20px, 5vw, 56px); }
/* centred, with the postmark struck across its top corner, clear of Frank's boots */
.fs-lt .fs-lt-letter { width: auto; max-width: 620px; margin: 0 auto; }
.fs-lt-letter__pm { top: -40px; right: -18px; }
}
@media (max-width: 1100px) {
.fs-lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.fs-lt-card--wide .fs-lt-card__link { grid-template-columns: minmax(0, 1fr); }
.fs-lt-card--wide .fs-lt-card__body { padding-top: 24px; }
}
@media (max-width: 767px) {
.fs-lt-hero { --fs-lt-lift: 28px; padding-bottom: 52px; }
.fs-lt-hero .fs-lt-hero__photo { aspect-ratio: 4 / 5; max-height: none; }
.fs-lt-hero .fs-lt-hero__photo img { object-position: 50% 50%; }
.fs-lt-hero .fs-lt-hero__credit { top: 12px; right: 12px; padding: 4px 9px; font-size: 11px; letter-spacing: 1.6px; }
.fs-lt-hero__inner { padding: 0 16px; }
.fs-lt .fs-lt-letter { padding: 32px 24px 26px; }
.fs-lt-letter__pm { width: 84px; height: 84px; top: -34px; right: 14px; }
.fs-lt .fs-lt-hero__stats { column-gap: 18px; }
.fs-lt-hero__stats li:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
.fs-lt-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.fs-lt-stamp { width: 88px; height: 88px; top: -8px; right: 0; }
}
@media (max-width: 480px) {
.fs-lt-hero__actions .fs-yb-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
.fs-lt-card__link .fs-lt-print, .fs-lt-card__title, .fs-lt-card__cta { transition: none; }
.fs-lt-hero .fs-lt-hero__photo img, .fs-lt .fs-lt-letter, .fs-lt-letter__pm { animation: none; }
}
/* ══════════════════════════════════════════════════════════════════
Build 7 (Sept 26, 2026): the Contact page (page-contact.hbs).
The handshake banner (1.14.5; the shared .fs-banner since 1.14.6), three "ways in", a warm form on cream,
the Work band on dark. Uses the .fs-yb resets and buttons; new
pieces are .fs-ct. (The older .fs-rfield/.fs-profile-card/.fs-wband
rules above are no longer used by this page.)
══════════════════════════════════════════════════════════════════ */
.fs-ct { background: var(--fs-cream); color: var(--fs-body-cream); }
.fs-ct [id] { scroll-margin-top: 92px; }
.fs-site .fs-ct-ways :focus-visible, .fs-site .fs-ct-write :focus-visible { outline-color: var(--fs-ink); }
.fs-ct-head { max-width: 760px; }
.fs-ct .fs-ct-head__title { margin-top: 10px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; font-weight: 700; color: var(--fs-ink); }
/* ---- 1. Hero: the handshake banner (1.14.5) ----
Frank shaking hands with an old miner (a mannequin), 2020.
The layout is the shared photo banner (.fs-banner, Build 8h below); these are the words.
Tablets frame the photo at 52% down (1.15.0: the photo now runs the full width there, so its crop is shallower).
1.19.16: the title is "Help Tell the Story" (was "Say Hello"), two lines balanced. */
.fs-ct-hero { --fs-banner-pos-tab: 50% 52%; }
.fs-ct-hero__text { max-width: 600px; }
.fs-ct .fs-ct-hero__title { margin: 20px 0 0; font-size: clamp(54px, 7.4vw, 118px); line-height: 0.92; font-weight: 700; color: var(--fs-bone); text-shadow: 0 6px 30px rgba(0,0,0,0.5); text-wrap: balance; }
.fs-ct-hero__accent { color: var(--fs-gold); }
.fs-ct .fs-ct-hero__deck { margin-top: 24px; max-width: 440px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: #E6DCC8; }
@media (min-width: 1440px) { .fs-ct .fs-ct-hero__deck { max-width: 500px; } } /* narrower below, clear of Frank's vest */
.fs-ct-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.fs-ct .fs-ct-hero__stats { display: flex; flex-wrap: wrap; row-gap: 8px; margin-top: 30px; }
.fs-ct-hero__stats li { font-weight: 600; font-size: 14px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-muted-dark); white-space: nowrap; }
.fs-ct-hero__stats b { color: var(--fs-bone); font-weight: 700; }
.fs-ct-hero__stats li:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 14px; margin: 0 16px; vertical-align: -2px; background: rgba(201,162,39,0.55); }
/* ---- 2. Three ways in ---- */
.fs-ct-ways { padding: clamp(56px, 7vw, 90px) 0 clamp(40px, 5vw, 64px); }
.fs-ct .fs-ct-waylist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 30px); margin-top: 34px; }
.fs-ct-way {
display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 100%; padding: 26px 26px 24px; text-align: left;
font: inherit; color: inherit; cursor: pointer; background: #FFFDF8; border: 1px solid var(--fs-border-cream); border-top: 3px solid var(--fs-red); border-radius: 2px;
box-shadow: 0 1px 0 rgba(43,35,23,0.06), 0 12px 30px rgba(43,35,23,0.08); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fs-ct-way:hover, .fs-ct-way:focus-visible { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(43,35,23,0.06), 0 20px 40px rgba(43,35,23,0.16); }
.fs-ct-way__num { font-weight: 700; font-size: 13px; letter-spacing: 3px; color: var(--fs-bronze); }
.fs-ct-way__title { margin-top: 12px; font-family: var(--fs-font-serif); font-size: 23px; line-height: 1.2; font-weight: 700; color: var(--fs-ink); text-wrap: balance; }
.fs-ct-way__p { margin-top: 12px; font-size: 15.5px; line-height: 1.65; color: var(--fs-body-cream-2); text-wrap: pretty; }
.fs-ct-way__go { margin-top: auto; padding-top: 18px; font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-red); border-bottom: 1.5px solid transparent; transition: border-color 0.2s ease; }
.fs-ct-way:hover .fs-ct-way__go, .fs-ct-way:focus-visible .fs-ct-way__go { border-color: var(--fs-red); }
/* ---- 3. The form ---- */
.fs-ct-write { padding: clamp(40px, 5vw, 64px) 0 clamp(72px, 8vw, 110px); }
.fs-ct-write__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.fs-ct .fs-ct-write__p { margin-top: 16px; font-size: 17.5px; line-height: 1.6; color: var(--fs-body-cream-2); text-wrap: balance; } /* 1.19.16: one sentence a line, no stray "to you." */
.fs-ct .fs-ct-notes { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--fs-border-cream); display: grid; gap: 14px; }
.fs-ct-notes li { padding-left: 22px; position: relative; font-size: 15px; line-height: 1.6; color: var(--fs-body-cream-2); }
.fs-ct-notes li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 1.5px; background: var(--fs-red); }
.fs-ct-notes b { color: var(--fs-ink); }
.fs-ct-form { padding: clamp(24px, 3vw, 40px); background: #FFFDF8; border: 1px solid var(--fs-border-cream); border-radius: 3px; box-shadow: 0 1px 0 rgba(43,35,23,0.06), 0 22px 50px rgba(43,35,23,0.10); }
.fs-ct-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fs-ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.fs-ct-field { margin-bottom: 20px; }
.fs-ct-label { display: block; margin: 0 0 8px; font-weight: 600; font-size: 12.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-ct-label em { font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fs-muted-cream); margin-left: 6px; }
.fs-ct-form input[type="text"], .fs-ct-form input[type="email"], .fs-ct-form select, .fs-ct-form textarea {
width: 100%; box-sizing: border-box; padding: 13px 15px; font-family: var(--fs-font-serif); font-size: 16px; line-height: 1.5; color: var(--fs-ink);
background: #fff; border: 1.5px solid #CFC5AE; border-radius: var(--fs-radius); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fs-ct-form textarea { min-height: 176px; resize: vertical; }
.fs-ct-form input:focus, .fs-ct-form select:focus, .fs-ct-form textarea:focus { outline: none; border-color: var(--fs-gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.22); }
.fs-ct-form .is-missing { border-color: var(--fs-red); }
.fs-ct-select { position: relative; }
.fs-ct-select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
/* 1.19.16: the topic list opens on "Choose one" (no value; the select is required), shown muted until a
topic is picked. The topics keep the ink colour in the open list. */
.fs-ct-select select:invalid, .fs-ct-select option[value=""] { color: var(--fs-muted-cream); }
.fs-ct-select option:not([value=""]) { color: var(--fs-ink); }
.fs-ct-select::after { content: ""; position: absolute; right: 17px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 1.5px solid var(--fs-ink); border-bottom: 1.5px solid var(--fs-ink); transform: rotate(45deg); pointer-events: none; }
.fs-ct-drop {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px 20px; text-align: center; cursor: pointer;
color: var(--fs-bronze); background: #fff; border: 1.5px dashed #CFC5AE; border-radius: 3px; transition: border-color 0.2s ease, background 0.2s ease;
}
.fs-ct-drop:hover, .fs-ct-drop.fs-dropzone--over { border-color: var(--fs-gold); background: #FFFCF2; }
.fs-ct-drop:focus-within { outline: 2px solid var(--fs-ink); outline-offset: 3px; }
.fs-ct-drop__main { font-weight: 700; font-size: 12.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fs-ink); }
.fs-ct-drop__sub { font-size: 14px; line-height: 1.6; color: var(--fs-body-cream-2); }
.fs-ct-send { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.fs-ct .fs-ct-send__note { flex: 1 1 260px; font-size: 14px; line-height: 1.55; font-style: italic; color: var(--fs-body-cream-2); }
.fs-ct .fs-ct-form__note { margin-top: 12px; min-height: 1.4em; font-size: 15px; line-height: 1.5; color: var(--fs-body-cream-2); }
.fs-ct .fs-ct-form__note.is-error { color: var(--fs-red); }
.fs-ct .fs-ct-form__note:empty { margin-top: 0; min-height: 0; }
.fs-ct .fs-droplist { margin-top: 10px; }
/* ---- 4. Work with Frank (dark) ---- */
.fs-ct-work { padding: clamp(72px, 8vw, 110px) 0; background: var(--fs-dark-deepest); color: var(--fs-body-dark); border-top: 1px solid var(--fs-border-dark); }
.fs-ct-work__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.fs-ct .fs-ct-work__photo { position: relative; margin: 0 18px 18px 0; isolation: isolate; }
.fs-ct-work__photo::before { content: ""; position: absolute; z-index: -1; top: 18px; left: 18px; right: -18px; bottom: -18px; border: 1.5px solid rgba(201,162,39,0.5); border-radius: 2px; }
.fs-ct-work__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--fs-radius); box-shadow: 0 30px 70px rgba(0,0,0,0.55); }
.fs-ct .fs-ct-work__photo figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: var(--fs-radius); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(244,238,226,0.9); background: rgba(13,12,10,0.7); }
.fs-ct .fs-ct-work__title { margin-top: 10px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; font-weight: 700; color: var(--fs-bone); }
.fs-ct .fs-ct-offer { display: grid; gap: 18px; margin-top: 28px; }
.fs-ct-offer > div { padding-left: 20px; border-left: 2px solid rgba(201,162,39,0.6); }
.fs-ct-offer dt { font-family: var(--fs-font-signage); font-weight: 700; font-size: 14px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--fs-gold); }
.fs-ct .fs-ct-offer dd { margin-top: 6px; font-size: 16.5px; line-height: 1.6; color: var(--fs-body-dark); }
.fs-ct-work__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
/* ---- Responsive ---- */
@media (max-width: 1279px) {
.fs-ct-hero__text { max-width: 680px; }
.fs-ct .fs-ct-hero__deck { max-width: 580px; }
}
@media (max-width: 1100px) {
.fs-ct .fs-ct-waylist { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.fs-ct-write__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 915px) {
.fs-ct-work__grid { grid-template-columns: minmax(0, 1fr); }
.fs-ct .fs-ct-work__photo { max-width: 620px; }
}
@media (max-width: 767px) {
.fs-ct .fs-ct-hero__title { margin-top: 12px; }
.fs-ct .fs-ct-hero__stats { column-gap: 18px; }
.fs-ct-hero__stats li:not(:last-child)::after { display: none; }
}
@media (max-width: 600px) {
.fs-ct-row { grid-template-columns: minmax(0, 1fr); }
.fs-ct-form { padding: 20px 16px; }
}
@media (max-width: 480px) {
.fs-ct-hero__actions .fs-yb-btn, .fs-ct-work__actions .fs-yb-btn, .fs-ct-send__btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
.fs-ct-way, .fs-ct-way__go, .fs-ct-form input, .fs-ct-form select, .fs-ct-form textarea, .fs-ct-drop { transition: none; }
}
/* ══════════════════════════════════════════════════════════════════
Build 8h (Sept 27, 2026): the photo banner, shared by the Contact and
About heroes. One 3:2 photo, no frame. From 1280px it fills the right of
a full-height banner (under the header and the announcement bar) and
fades into the dark behind the words; the photo panel is never wider
than the photo (1.5 x the banner's height), so very wide screens don't
zoom it. Below 1280px the photo runs the full width above the words
(16:9); phones get a crop of their own, the words rising over its foot.
A slow push-in as the page opens (none with reduced motion).
Markup: section.fs-banner > figure.fs-banner__photo (picture + img, and
figcaption.fs-banner__credit), then .fs-wrap.fs-banner__inner >
.fs-banner__text. A page says where its photo sits:
--fs-banner-left where the photo panel starts (default 33%)
--fs-banner-pos object-position from 1280px (default 50% 40%)
--fs-banner-pos-tab object-position below 1280px (default 50% 64%)
--fs-banner-phone the phone crop's shape (default 1 / 1)
══════════════════════════════════════════════════════════════════ */
.fs-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(600px, calc(100vh - 120px), 880px); padding: clamp(56px, 7vw, 96px) 0; color: var(--fs-bone); background: var(--fs-dark-deepest); }
.fs-banner .fs-banner__photo { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: max(var(--fs-banner-left, 33%), calc(100% - 1.5 * clamp(600px, calc(100vh - 120px), 880px))); margin: 0; padding: 0; overflow: hidden; background: var(--fs-dark-deepest); }
.fs-banner__photo picture { display: block; width: 100%; height: 100%; }
.fs-banner .fs-banner__photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--fs-banner-pos, 50% 40%); border-radius: 0; box-shadow: none; transform-origin: 55% 45%; animation: fs-banner-push 16s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
@keyframes fs-banner-push { from { transform: scale(1.06); } to { transform: scale(1); } }
/* the shades belong to the photo panel: its left edge fades into the dark behind the words, with a light shade top and bottom */
.fs-banner__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
linear-gradient(90deg, var(--fs-dark-deepest) 0%, rgba(13,12,10,0.78) 7%, rgba(13,12,10,0.32) 16%, rgba(13,12,10,0) 24%),
linear-gradient(0deg, rgba(13,12,10,0.7) 0%, rgba(13,12,10,0) 22%),
linear-gradient(180deg, rgba(13,12,10,0.5) 0%, rgba(13,12,10,0) 12%); }
.fs-banner .fs-banner__credit { position: absolute; z-index: 1; top: auto; left: auto; right: clamp(20px, 2.6vw, 40px); bottom: clamp(18px, 2.4vw, 32px); margin: 0; padding: 6px 12px; border-radius: var(--fs-radius); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(244,238,226,0.92); background: rgba(13,12,10,0.62); }
.fs-banner__inner { position: relative; width: 100%; }
@media (max-width: 1279px) {
.fs-banner { display: block; min-height: 0; padding: 0 0 clamp(52px, 7vw, 76px); }
/* width 100% (1.15.0): with only a max-height, the 16:9 ratio carried that limit across and left a dark strip at the right on landscape tablets */
.fs-banner .fs-banner__photo { position: relative; z-index: 0; top: auto; right: auto; bottom: auto; left: auto; width: 100%; aspect-ratio: 16 / 9; max-height: 76vh; }
.fs-banner .fs-banner__photo img { position: absolute; inset: 0; object-position: var(--fs-banner-pos-tab, 50% 64%); }
.fs-banner__photo::after { background: linear-gradient(0deg, var(--fs-dark-deepest) 0%, rgba(13,12,10,0.45) 9%, rgba(13,12,10,0) 22%), linear-gradient(180deg, rgba(13,12,10,0.4) 0%, rgba(13,12,10,0) 16%); }
.fs-banner .fs-banner__credit { right: 16px; bottom: 14px; }
.fs-banner__inner { z-index: 1; }
.fs-banner .fs-banner__text { margin-top: calc(-1 * clamp(28px, 4.5vw, 56px)); }
}
@media (max-width: 767px) {
.fs-banner .fs-banner__photo { aspect-ratio: var(--fs-banner-phone, 1 / 1); max-height: none; }
.fs-banner .fs-banner__photo img { object-position: 50% 50%; }
.fs-banner .fs-banner__credit { right: 12px; bottom: 12px; padding: 4px 9px; font-size: 11px; letter-spacing: 1.6px; }
.fs-banner .fs-banner__text { margin-top: -26px; }
}
@media (prefers-reduced-motion: reduce) { .fs-banner .fs-banner__photo img { animation: none; } }
/* ══════════════════════════════════════════════════════════════════
Build 8 (Sept 26, 2026): the Mines index (collection-mines.hbs) and
the camp, region and metal pages (partials/tag-mines.hbs): the record
room. Uses the .fs-yb resets and buttons; everything new is .fs-mn.
══════════════════════════════════════════════════════════════════ */
.fs-mn { background: var(--fs-cream); color: var(--fs-body-cream); }
.fs-mn [hidden] { display: none !important; }
.fs-mn [id] { scroll-margin-top: 150px; }
.fs-site .fs-mn-index :focus-visible, .fs-site .fs-mn-regions :focus-visible, .fs-site .fs-mn-bar :focus-visible { outline-color: var(--fs-ink); }
/* ---- 1. Hero ---- */
.fs-mn-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(62vh, 620px); color: var(--fs-bone); background: var(--fs-dark-deepest); }
.fs-mn-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; filter: brightness(0.62) saturate(0.85); }
.fs-mn-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13,12,10,0.94) 0%, rgba(13,12,10,0.8) 40%, rgba(13,12,10,0.35) 70%, rgba(13,12,10,0.1) 100%), linear-gradient(0deg, rgba(13,12,10,0.9) 0%, rgba(13,12,10,0) 45%); }
.fs-mn-hero__inner { width: 100%; padding-top: clamp(90px, 12vh, 140px); padding-bottom: clamp(48px, 7vh, 72px); }
.fs-mn .fs-mn-hero__title { margin: 18px 0 0; max-width: 820px; font-family: var(--fs-font-signage); font-weight: 700; text-transform: uppercase; font-size: clamp(50px, 7vw, 108px); line-height: 0.92; letter-spacing: 0.5px; color: var(--fs-bone); text-shadow: 0 6px 30px rgba(0,0,0,0.55); }
.fs-mn-hero__accent { display: block; color: var(--fs-gold); }
.fs-mn .fs-mn-hero__deck { margin-top: 24px; max-width: 620px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: #E1D7C3; }
.fs-mn .fs-mn-hero__count { margin-top: 26px; font-weight: 600; font-size: 14px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-mn-hero__count b { color: var(--fs-gold); font-weight: 700; }
/* ---- 2. The search bar (one line, sticky under the site header) and the filter row beneath it ---- */
.fs-mn-bar { position: sticky; top: 75px; z-index: 5; padding: 14px 0; background: rgba(245,239,227,0.96); border-bottom: 1px solid var(--fs-border-cream); box-shadow: 0 8px 24px rgba(43,35,23,0.08); backdrop-filter: blur(6px); }
.fs-mn-bar__inner { display: flex; align-items: center; gap: 12px 28px; }
.fs-mn-search { flex: 1 1 auto; min-width: 0; max-width: 760px; }
.fs-mn-search__box { position: relative; display: flex; align-items: stretch; min-width: 0; padding: 5px 5px 5px 16px; background: #FFFDF8; border: 1.5px solid #CFC5AE; border-radius: 3px; color: var(--fs-bronze); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.fs-mn-search__field { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; cursor: text; }
.fs-mn-search__box:focus-within { border-color: var(--fs-gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.22); }
.fs-mn-search__box input { flex: 1; min-width: 0; margin: 0; padding: 9px 0; font-family: var(--fs-font-serif); font-size: 17px; color: var(--fs-ink); background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none; }
.fs-mn-search__box input::placeholder { color: #8E8472; }
.fs-mn-search__box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; background: linear-gradient(45deg, transparent 43%, var(--fs-bronze) 45%, var(--fs-bronze) 55%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--fs-bronze) 45%, var(--fs-bronze) 55%, transparent 57%); }
/* the Search button, gold like the sign-up form's, inside the box's border */
.fs-mn .fs-mn-search__go { flex: none; margin: 0 0 0 10px; padding: 0 26px; font-size: 14.5px; letter-spacing: 2px; border-radius: 2px; }
.fs-site .fs-mn .fs-mn-search__go:focus-visible { outline: 2px solid var(--fs-ink); outline-offset: 2px; }
.fs-mn .fs-mn-status { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0; min-height: 1.4em; font-weight: 600; font-size: 12.5px; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mn-status b { color: var(--fs-ink); font-weight: 700; }
.fs-mn-clear { margin: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--fs-red); background: none; border: 0; border-bottom: 1.5px solid currentColor; cursor: pointer; white-space: nowrap; }
.fs-mn-filterbar { padding: 12px 0 14px; background: var(--fs-cream); border-bottom: 1px solid var(--fs-border-cream); }
.fs-mn-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fs-mn-select { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.fs-mn-select--sort { margin-left: auto; }
.fs-mn-select__lbl { font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mn-select select { appearance: none; -webkit-appearance: none; margin: 0; padding: 11px 36px 11px 14px; box-shadow: none; font-family: var(--fs-font-signage); font-weight: 600; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fs-ink); background: #FFFDF8; border: 1.5px solid #CFC5AE; border-radius: 3px; cursor: pointer; max-width: 260px; }
.fs-mn-select select:focus { outline: none; border-color: var(--fs-gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.22); }
.fs-mn-select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 1.5px solid var(--fs-ink); border-bottom: 1.5px solid var(--fs-ink); transform: rotate(45deg); pointer-events: none; }
.fs-mn-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fs-mn-chips__lbl { margin: 0 4px 0 6px; font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mn-chip { margin: 0; padding: 9px 13px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fs-ink); background: #FFFDF8; border: 1.5px solid #CFC5AE; border-radius: 40px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.fs-mn-chip:hover { border-color: var(--fs-ink); }
.fs-mn-chip[aria-pressed="true"] { background: var(--fs-ink); border-color: var(--fs-ink); color: var(--fs-cream); }
.fs-mn-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; font-weight: 600; font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fs-ink); background: #FFFDF8; border: 1.5px solid #CFC5AE; border-radius: 40px; cursor: pointer; white-space: nowrap; }
/* the On film box, drawn in full (1.18.0): Saaga draws every checkbox as a 3% tint, which on the cream chip
was invisible until the pointer found it, and turned it Saaga's blue when ticked */
.fs-mn .fs-mn-toggle input[type="checkbox"] {
-webkit-appearance: none; appearance: none; flex: none; display: block;
width: 16px; height: 16px; margin: 0; padding: 0; border-radius: 3px;
background: #FFFDF8 no-repeat center / 12px 12px; border: 1.5px solid var(--fs-ink); box-shadow: none;
cursor: pointer; transition: background-color 0.2s var(--fs-ease, ease), border-color 0.2s var(--fs-ease, ease);
}
.fs-mn .fs-mn-toggle input[type="checkbox"]:hover, .fs-mn .fs-mn-toggle input[type="checkbox"]:active, .fs-mn .fs-mn-toggle input[type="checkbox"]:focus { background-color: #FFFDF8; box-shadow: none; }
.fs-mn .fs-mn-toggle input[type="checkbox"]:checked {
background-color: var(--fs-gold); border-color: var(--fs-gold); box-shadow: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%232A2622' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5 10.5 3.2 3.2L15 7'/%3E%3C/svg%3E");
}
.fs-mn .fs-mn-toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--fs-ink); outline-offset: 2px; }
.fs-mn .fs-mn-toggle:has(input:checked) input[type="checkbox"]:focus-visible { outline-color: var(--fs-gold); }
.fs-mn-toggle:has(input:checked) { background: var(--fs-ink); border-color: var(--fs-ink); color: var(--fs-cream); }
/* ---- 3. Browse by region: index tabs ---- */
.fs-mn-regions { padding: clamp(40px, 5vw, 64px) 0 0; }
.fs-mn .fs-mn-regions__title { margin: 0 0 16px; font-size: 12.5px; letter-spacing: 2.4px; }
.fs-mn .fs-mn-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.fs-mn-tab { display: flex; flex-direction: column; gap: 4px; min-width: 190px; padding: 16px 20px 14px; text-decoration: none; color: var(--fs-ink); background: #FFFDF8; border: 1px solid var(--fs-border-cream); border-top: 3px solid var(--fs-bronze); border-radius: 2px 2px 0 0; box-shadow: 0 1px 0 rgba(43,35,23,0.05), 0 10px 24px rgba(43,35,23,0.07); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.fs-mn-tab:hover, .fs-mn-tab:focus-visible { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(43,35,23,0.05), 0 16px 32px rgba(43,35,23,0.14); }
.fs-mn-tab.is-on { border-top-color: var(--fs-red); background: var(--fs-ink); color: var(--fs-cream); }
.fs-mn-tab__name { font-family: var(--fs-font-serif); font-size: 19px; font-weight: 700; line-height: 1.2; }
.fs-mn-tab__n { font-weight: 600; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mn-tab.is-on .fs-mn-tab__n { color: var(--fs-gold); }
/* ---- 4. The index ---- */
.fs-mn-index { padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 90px); }
.fs-mn-index--tag { padding-top: clamp(28px, 4vw, 48px); }
.fs-mn-index__head { margin-bottom: 26px; }
.fs-mn .fs-mn-index__title { margin-top: 10px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; font-weight: 700; color: var(--fs-ink); }
/* the letter strip */
.fs-mn-jump { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 26px; }
.fs-mn-jump__l { width: 34px; height: 34px; margin: 0; padding: 0; font: inherit; font-weight: 700; font-size: 13px; color: var(--fs-ink); background: #FFFDF8; border: 1px solid var(--fs-border-cream); border-radius: 2px; cursor: pointer; }
.fs-mn-jump__l:hover { border-color: var(--fs-ink); }
.fs-mn-jump__l.is-off { color: #C4BBA7; background: transparent; border-color: transparent; cursor: default; }
/* group headings (a letter, a camp, a region), ruled like a ledger */
.fs-mn .fs-mn-group { display: flex; align-items: baseline; gap: 14px; margin: 34px 0 18px; font-weight: 700; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mn .fs-mn-group:first-child { margin-top: 0; }
.fs-mn-group::after { content: ""; flex: 1; height: 1px; background: var(--fs-border-cream); }
.fs-mn-group__sub { font-weight: 600; font-size: 12px; letter-spacing: 2px; color: var(--fs-muted-dark-2); }
.fs-mn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 34px) clamp(20px, 2.5vw, 30px); }
/* the record card */
.fs-mn-card { min-width: 0; }
.fs-mn-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: #FFFDF8; border: 1px solid var(--fs-border-cream); border-radius: 3px; overflow: hidden; box-shadow: 0 1px 0 rgba(43,35,23,0.05), 0 10px 26px rgba(43,35,23,0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; }
a.fs-mn-card__link:hover, a.fs-mn-card__link:focus-visible { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(43,35,23,0.05), 0 20px 40px rgba(43,35,23,0.16); }
.fs-mn-card__media { position: relative; background: #2B2622; }
.fs-mn-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.fs-mn-card__blank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 3 / 2; color: var(--fs-gold); background: radial-gradient(circle at 50% 30%, #3A332A, #1B1815 70%); }
.fs-mn-card__blank span { font-weight: 600; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-mn-card__blank b { font-weight: 700; font-size: 30px; letter-spacing: 2px; }
.fs-mn-card__badge { position: absolute; left: 12px; top: 12px; padding: 5px 9px; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-dark-base); background: var(--fs-gold); border-radius: 2px; }
.fs-mn-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.fs-mn .fs-mn-card__where { font-weight: 600; font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mn .fs-mn-card__title { margin-top: 8px; font-size: 22px; line-height: 1.22; font-weight: 700; color: var(--fs-ink); text-wrap: balance; transition: color 0.2s ease; }
a.fs-mn-card__link:hover .fs-mn-card__title { color: var(--fs-red); }
.fs-mn .fs-mn-card__aka { margin-top: 5px; font-size: 14px; font-style: italic; line-height: 1.5; color: var(--fs-body-cream-2); }
.fs-mn .fs-mn-card__era { margin-top: 8px; font-weight: 600; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-mn .fs-mn-card__hook { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--fs-body-cream-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fs-mn .fs-mn-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fs-border-cream); font-weight: 600; font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mn-card__minfile { font-family: var(--fs-font-mono); font-size: 12.5px; letter-spacing: 0.5px; text-transform: none; color: var(--fs-muted-cream); }
.fs-mn-card__cta { margin-top: auto; padding-top: 14px; font-weight: 700; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-red); }
/* one record on show: the card opens out, photo left, the record right */
.fs-mn-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.fs-mn-grid.is-single .fs-mn-card__link { flex-direction: row; min-height: 380px; }
.fs-mn-grid.is-single .fs-mn-card__media { flex: 0 0 52%; }
.fs-mn-grid.is-single .fs-mn-card__media img, .fs-mn-grid.is-single .fs-mn-card__blank { height: 100%; aspect-ratio: auto; }
.fs-mn-grid.is-single .fs-mn-card__body { justify-content: center; padding: clamp(28px, 3.6vw, 52px); }
.fs-mn .fs-mn-grid.is-single .fs-mn-card__title { margin-top: 12px; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08; }
.fs-mn .fs-mn-grid.is-single .fs-mn-card__aka { font-size: 16px; }
.fs-mn .fs-mn-grid.is-single .fs-mn-card__era { margin-top: 14px; font-size: 13px; }
.fs-mn .fs-mn-grid.is-single .fs-mn-card__hook { display: block; margin-top: 16px; font-size: 18px; line-height: 1.65; -webkit-line-clamp: unset; }
.fs-mn .fs-mn-grid.is-single .fs-mn-card__meta { margin-top: 22px; }
.fs-mn-grid.is-single .fs-mn-card__cta { margin-top: 22px; font-size: 13.5px; }
.fs-mn-card.is-soon .fs-mn-card__link { border-style: dashed; background: transparent; box-shadow: none; }
.fs-mn-card.is-soon .fs-mn-card__cta { color: var(--fs-muted-dark-2); }
.fs-mn mark { background: rgba(201,162,39,0.35); color: inherit; border-radius: 2px; padding: 0 1px; }
/* empty, more */
.fs-mn-empty { max-width: 640px; padding: 40px 0 10px; }
.fs-mn .fs-mn-empty__title { font-family: var(--fs-font-serif); font-size: 24px; font-weight: 700; color: var(--fs-ink); }
.fs-mn .fs-mn-empty__p { margin-top: 10px; font-size: 16.5px; line-height: 1.6; color: var(--fs-body-cream-2); }
.fs-mn-more { margin-top: 34px; text-align: center; }
/* the source list: the plain ledger without JavaScript; hidden once the cards are built */
.fs-mn .fs-mn-source { margin-top: 8px; columns: 3; column-gap: 40px; }
.fs-mn.has-js .fs-mn-source { display: none; }
.fs-mn-src { break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--fs-border-cream); font-size: 16px; line-height: 1.4; }
.fs-mn-src a { font-weight: 700; color: var(--fs-ink); }
.fs-mn-src__where { display: block; font-family: var(--fs-font-signage); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mn:not(.has-js) .fs-mn-bar, .fs-mn:not(.has-js) .fs-mn-filterbar, .fs-mn:not(.has-js) .fs-mn-more { display: none; }
/* ---- 5. Safety and sources ---- */
.fs-mn-end { padding: 0 0 clamp(64px, 8vw, 100px); }
.fs-mn .fs-mn-end .fs-yb-notice { margin-top: 0; }
.fs-mn .fs-mn-sources { max-width: 820px; margin-top: 26px; font-size: 14.5px; line-height: 1.65; color: var(--fs-body-cream-2); }
/* ---- The camp, region and metal pages ---- */
.fs-mn-tag { padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 44px); background: var(--fs-dark-deepest); color: var(--fs-bone); border-bottom: 1px solid var(--fs-border-dark); }
.fs-mn .fs-mn-tag__crumb { font-weight: 600; font-size: 13px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--fs-muted-dark-2); }
.fs-mn-tag__crumb a { color: var(--fs-gold); }
.fs-mn .fs-mn-tag__title { margin-top: 14px; font-size: clamp(40px, 5vw, 70px); line-height: 1.02; font-weight: 700; color: var(--fs-bone); }
.fs-mn .fs-mn-tag__line { margin-top: 12px; font-weight: 600; font-size: 14px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-gold); }
.fs-mn .fs-mn-tag__desc { margin-top: 16px; max-width: 640px; font-size: 18px; line-height: 1.6; color: #E1D7C3; }
.fs-mn .fs-mn-tag__camps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.fs-mn-tag .fs-mn-chip { color: var(--fs-bone); background: transparent; border-color: rgba(244,238,226,0.35); }
.fs-mn-tag .fs-mn-chip:hover { border-color: var(--fs-gold); color: var(--fs-gold); }
.fs-mn .fs-mn-tag__all { margin-top: 26px; }
/* ---- Responsive ---- */
@media (max-width: 1100px) { .fs-mn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fs-mn .fs-mn-source { columns: 2; } }
@media (max-width: 860px) {
.fs-mn-bar { position: static; padding-bottom: 12px; }
/* while a search is typed on a phone, the region tabs and the index heading step aside so the results sit right under the box */
.fs-mn.is-searching .fs-mn-regions, .fs-mn.is-searching .fs-mn-index__head { display: none; }
.fs-mn.is-searching .fs-mn-index { padding-top: 24px; }
.fs-mn-bar__inner { flex-direction: column; align-items: stretch; gap: 10px; }
.fs-mn-search { max-width: none; }
.fs-mn .fs-mn-status { font-size: 12px; }
}
@media (max-width: 767px) {
.fs-mn-hero { min-height: 0; }
.fs-mn-hero__inner { padding-top: 64px; padding-bottom: 40px; }
.fs-mn-tab { min-width: 0; flex: 1 1 calc(50% - 5px); padding: 14px 14px 12px; }
.fs-mn-tab__name { font-size: 17px; }
}
@media (max-width: 760px) {
.fs-mn-grid.is-single .fs-mn-card__link { flex-direction: column; min-height: 0; }
.fs-mn-grid.is-single .fs-mn-card__media { flex: none; }
.fs-mn-grid.is-single .fs-mn-card__media img, .fs-mn-grid.is-single .fs-mn-card__blank { height: auto; aspect-ratio: 3 / 2; }
}
@media (max-width: 640px) {
.fs-mn-grid { grid-template-columns: minmax(0, 1fr); }
.fs-mn .fs-mn-source { columns: 1; }
/* the filters on a phone: the two menus share a row, the metals scroll sideways in one row, On film and Sort share the last */
.fs-mn-filters { gap: 8px; }
.fs-mn-filters > .fs-mn-select:not(.fs-mn-select--sort) { flex: 1 1 calc(50% - 4px); min-width: 0; }
.fs-mn-filters > .fs-mn-select:not(.fs-mn-select--sort) select { width: 100%; max-width: none; }
.fs-mn-filters > .fs-mn-chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px; }
.fs-mn-filters > .fs-mn-chips::-webkit-scrollbar { display: none; }
.fs-mn-chips__lbl { margin-left: 0; }
.fs-mn-select--sort { margin-left: auto; }
.fs-mn-jump__l { width: 30px; height: 30px; font-size: 12px; }
.fs-mn-search__box { padding-left: 14px; }
.fs-mn-search__field { gap: 10px; }
.fs-mn-search__box input { font-size: 16px; } /* 16px, not less, or phones zoom in on the box */
.fs-mn .fs-mn-search__go { margin-left: 8px; padding: 0 15px; font-size: 13.5px; letter-spacing: 1.6px; }
}
@media (max-width: 360px) {
/* the smallest phones: room for the words */
.fs-mn-search__field svg { display: none; }
.fs-mn .fs-mn-search__go { margin-left: 6px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
.fs-mn-card__link, .fs-mn-tab, .fs-mn-chip, .fs-mn-search__box { transition: none; }
}
/* ══════════════════════════════════════════════════════════════════
Build 9 (Sept 27, 2026, 1.15.0): one way of moving, site-wide.
Colleen, on the Contact banner: "note the beautiful movement on this
hero image". That slow settle is now the signature for every hero
photograph, and everything else that moves comes into line with it:
the same few easings and times, a small lift, a small zoom, one
family of shadows, nothing that sticks on touch screens, and nothing
at all for readers who ask their device for less motion.
══════════════════════════════════════════════════════════════════ */
:root {
--fs-ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* colour and borders: 0.2s */
--fs-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* things arriving: lifts and shadows 0.35s, zooms 0.7s, a hero's words 0.9s */
--fs-ease-settle: cubic-bezier(0.2, 0.6, 0.2, 1); /* the hero photographs' slow settle */
--fs-settle-time: 16s;
--fs-lift: translateY(-3px); /* a card or print under the pointer (was 4px on most) */
--fs-lift-tilt: translateY(-3px) rotate(-0.5deg); /* the Films page's enamel signs */
--fs-zoom: scale(1.03); /* a photograph inside its frame (the wall was 1.04) */
--fs-zoom-play: 1.06; /* a play button (was 1.08) */
--fs-shadow-rest: 0 1px 0 rgba(43,35,23,0.06), 0 10px 26px rgba(43,35,23,0.08); /* white cards on cream */
--fs-shadow-raised: 0 1px 0 rgba(43,35,23,0.06), 0 18px 38px rgba(43,35,23,0.15);
}
/* touch screens can't hover: nothing lifts or zooms and then stays that way after a tap */
@media (hover: none) { :root { --fs-lift: none; --fs-lift-tilt: none; --fs-zoom: none; --fs-zoom-play: 1; } }
@keyframes fs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fs-strike { 0% { opacity: 0; transform: rotate(-11deg) scale(1.35); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(-11deg) scale(1); } }
@keyframes fs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fs-zoom-in { from { opacity: 0; transform: scale(0.965); } to { opacity: 1; transform: none; } }
/* ---- 1. Every hero photograph settles the same way, and its words rise to meet it ----
The Contact, About and Letters photographs already do (the banner and the letter); now the home
page, the Yankee Boy Story and the Mines index too. On phones the home and Yankee Boy photographs
sit above their words, so they settle from their foot and never spill below it. The Films page
keeps its own movement (the headlamp); its words rise with the rest. */
.fs-h3-hero__img, .fs-yb-hero__img, .fs-mn-hero__img {
transform-origin: 55% 45%;
animation: fs-banner-push var(--fs-settle-time) var(--fs-ease-settle) both;
}
@media (max-width: 767px) { .fs-h3-hero__img, .fs-yb-hero__img { transform-origin: 50% 100%; } }
.fs-h3-hero__inner, .fs-yb-hero__inner, .fs-mn-hero__inner, .fs-fm-hero__text, .fs-banner .fs-banner__text {
animation: fs-rise 0.9s var(--fs-ease-out) 0.15s both;
}
/* ---- 2. Cards and prints: one small lift, one family of shadows, the same for the keyboard ---- */
a.fs-card, .fs-card--hover, .fs-filmblock, .fs-wcard, .fs-h-eam-thumb, .fs-yb-film__thumb, .fs-ct-way, .fs-mn-card__link, .fs-mn-tab, .fs-fm-sign, .fs-lt-card__link .fs-lt-print {
transition: transform 0.35s var(--fs-ease-out), box-shadow 0.35s var(--fs-ease-out), border-color 0.2s var(--fs-ease), background-color 0.2s var(--fs-ease);
}
a.fs-card:hover, a.fs-card:focus-visible, .fs-card--hover:hover,
.fs-filmblock:hover, .fs-filmblock:focus-visible,
.fs-wcard:hover, .fs-wcard:focus-visible,
.fs-h-eam-thumb:hover, .fs-h-eam-thumb:focus-visible,
.fs-yb-film__thumb:hover, .fs-yb-film__thumb:focus-visible,
.fs-ct-way:hover, .fs-ct-way:focus-visible,
a.fs-mn-card__link:hover, a.fs-mn-card__link:focus-visible,
.fs-mn-tab:hover, .fs-mn-tab:focus-visible,
.fs-lt-card__link:hover .fs-lt-print, .fs-lt-card__link:focus-visible .fs-lt-print { transform: var(--fs-lift); }
.fs-filmblock--static:hover, .fs-filmblock--static:focus-visible { transform: none; }
.fs-fm-sign:hover, .fs-fm-sign:focus-visible { transform: var(--fs-lift-tilt); }
a.fs-card:focus-visible { border-color: var(--fs-gold); box-shadow: var(--fs-shadow-card-hover); }
.fs-filmblock:focus-visible, .fs-yb-film__thumb:focus-visible { border-color: var(--fs-gold); }
/* the white cards on cream share one resting shadow and one raised shadow */
.fs-ct-way, .fs-mn-card__link, .fs-mn-tab { box-shadow: var(--fs-shadow-rest); }
.fs-ct-way:hover, .fs-ct-way:focus-visible, a.fs-mn-card__link:hover, a.fs-mn-card__link:focus-visible,
.fs-mn-tab:hover, .fs-mn-tab:focus-visible, .fs-wcard:hover { box-shadow: var(--fs-shadow-raised); }
/* buttons change colour; they don't jump */
.fs-btn-send:hover, .fs-btn-dl:hover, .fs-dropzone:hover, .fs-dropzone.fs-dropzone--over { transform: none; }
.fs-dropzone { transition: border-color 0.2s var(--fs-ease), background-color 0.2s var(--fs-ease); }
/* ---- 3. Photographs inside their frames: one slow zoom; play buttons: one small swell ---- */
.fs-h3-wall__btn img { transition: transform 0.7s var(--fs-ease-out), filter 0.3s var(--fs-ease); }
.fs-h3-film__still img, .fs-fm-still img { transition: transform 0.7s var(--fs-ease-out), filter 0.4s var(--fs-ease); }
.fs-h3-wall__btn:hover img, .fs-h3-wall__btn:focus-visible img,
.fs-h3-film__still:hover img, .fs-h3-film__still:focus-visible img,
.fs-fm-still:hover img, .fs-fm-still:focus-visible img { transform: var(--fs-zoom); }
.fs-filmblock__play, .fs-h-channel-play, .fs-h3-play { transition: background-color 0.25s var(--fs-ease), transform 0.35s var(--fs-ease-out); }
.fs-fm-play, .fs-aplay { transition: background-color 0.25s var(--fs-ease), transform 0.35s var(--fs-ease-out); }
.fs-filmblock:hover .fs-filmblock__play, .fs-filmblock:focus-visible .fs-filmblock__play,
.fs-h3-film__still:hover .fs-h3-play, .fs-h3-film__still:focus-visible .fs-h3-play { transform: translate(-50%, -50%) scale(var(--fs-zoom-play)); }
.fs-h-channel-hit:hover ~ .fs-h-channel-play { transform: translate(-50%, -50%) scale(var(--fs-zoom-play)) !important; }
.fs-fm-still:hover .fs-fm-play, .fs-fm-still:focus-visible .fs-fm-play, .fs-aplay:hover { transform: scale(var(--fs-zoom-play)); }
.fs-h3-film__still:focus-visible .fs-h3-play { background: rgba(13,12,10,0.85); }
/* ---- 4. The Films page's own touches, quieter ----
A brass tag sways a little less (changed where it is defined, Build 5 above). The marquee's bulbs
glowed slowly in turn from 1.15.0; since 1.18.0 they chase round the sign again (Build 5, fs-site.js 1f).
The bulbs and the headlamp rest while they are off screen (fs-site.js 1e marks them). */
.is-offscreen, .is-offscreen::before, .is-offscreen::after { animation-play-state: paused !important; }
/* ---- 5. The film player and the photo viewer open softly ---- */
.fs-lightbox.is-open, .fs-photobox.is-open { animation: fs-fade-in 0.3s var(--fs-ease) both; }
.fs-lightbox.is-open .fs-lightbox__stage, .fs-photobox.is-open .fs-photobox__fig { animation: fs-zoom-in 0.45s var(--fs-ease-out) 0.04s both; }
/* stepping through the wall, each photograph fades in as it arrives (fs-site.js 1b) */
.fs-photobox__img { transition: opacity 0.35s var(--fs-ease); }
.fs-photobox__img.is-loading { opacity: 0; transition: none; }
/* captions set in the signage face stay upright (Barlow Condensed is loaded upright only, so Saaga's
italic captions came out as a synthetic slant on the banner credits) */
.fs-site figcaption.fs-signage, .fs-site figcaption.fs-kick { font-style: normal; }
/* the Letters hero's second way in: a quiet link rather than a second button */
.fs-lt-hero__latest {
display: inline-flex; align-items: center; padding: 5px 0 3px;
font-weight: 700; font-size: 15px; letter-spacing: 1.8px; text-transform: uppercase;
color: var(--fs-lt-rust, var(--fs-red)); border-bottom: 1.5px solid rgba(173,76,43,0.35);
transition: border-color 0.25s var(--fs-ease), color 0.25s var(--fs-ease);
}
.fs-lt-hero__latest:hover, .fs-lt-hero__latest:focus-visible { color: #8F3A1E; border-bottom-color: currentColor; }
.fs-site .fs-lt-letter :focus-visible { outline-color: var(--fs-ink); }
/* ---- 6. Less motion, everywhere ----
Readers who ask their device for less motion get none of it: the photographs are still, the words
are there at once, nothing lifts, zooms, sways or glows, and nothing eases. (The rules for each
page above say the same; this is the net under them.) */
@media (prefers-reduced-motion: reduce) {
:root { --fs-lift: none; --fs-lift-tilt: none; --fs-zoom: none; --fs-zoom-play: 1; }
.fs-h3-hero__img, .fs-yb-hero__img, .fs-mn-hero__img, .fs-h3-hero__inner, .fs-yb-hero__inner, .fs-mn-hero__inner, .fs-fm-hero__text, .fs-banner .fs-banner__text { animation: none; }
.fs-fm-bulbs__set, .fs-fm-marquee__sign.is-lit, .fs-fm-marquee__sign.is-lit .fs-fm-bulbs__lit, .fs-fm-tag:hover .fs-fm-tag__disc, .fs-fm-tag:focus-visible .fs-fm-tag__disc { animation: none; }
.fs-lightbox.is-open, .fs-photobox.is-open, .fs-lightbox.is-open .fs-lightbox__stage, .fs-photobox.is-open .fs-photobox__fig { animation: none; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}
/* ══════════════════════════════════════════════════════════════════
Build 10 (Sept 28, 2026, 1.16.0): the mine record page, Phoenix first
(partials/mines/phoenix.hbs, rendered by custom-mine.hbs for its slug).
From the canvas design "Mine Record Design", Version 2. Everything is
.fs-mr; the page also wears .fs-yb for its resets and buttons.
The story goes down through the levels, 1891 to now, then below: the
ledger, the names, the record, and back up into daylight for the
questions. From 1180px (on screens at least 600px tall) a rail rides
down beside it with a year counter that rolls back as the reader goes
down; narrower or shorter screens get the level bar under the header.
══════════════════════════════════════════════════════════════════ */
.fs-mr {
--fs-mr-top: 75px; /* the sticky header's height; fs-site.js 4 measures it */
--fs-mr-rust: #AD4C2B; /* rust for small type on cream (4.8:1) */
--fs-mr-rule: #D8CFBC;
--fs-mr-q: 'Old Standard TT', var(--fs-font-serif);
background: var(--fs-cream); color: var(--fs-body-cream);
}
:where(.fs-mr) :is(h1, h2, h3, h4) { margin: 0; }
:where(.fs-mr) :is(dl, dt, dd) { margin: 0; padding: 0; }
/* Saaga's element styles, undone with the lowest weight so the page's own classes always win */
:where(.fs-mr) blockquote { margin: 0; padding: 0; width: auto; border: 0; border-radius: 0; background: none; font-style: normal; font-size: inherit; line-height: inherit; color: inherit; }
:where(.fs-mr) blockquote::before, :where(.fs-mr) blockquote::after { content: none; }
:where(.fs-mr) figure { margin: 0; padding: 0; }
:where(.fs-mr) figcaption { margin: 0; padding: 0; text-align: left; font-style: normal; font-weight: inherit; font-size: inherit; color: inherit; }
.fs-mr li { line-height: inherit; }
.fs-mr table { display: table; width: 100%; margin: 0; background: none; border: 0; border-collapse: collapse; border-spacing: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; white-space: normal; overflow: visible; }
.fs-mr tr { border: 0; background: none; }
.fs-mr :is(th, td) { margin: 0; padding: 0; background: none; border: 0; text-align: left; vertical-align: baseline; font-weight: inherit; line-height: inherit; color: inherit; }
/* Saaga boxes every and adds its own + and pink; the page's two have their own look */
.fs-mr details { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.fs-mr details > * { margin: 0; padding-top: 0; color: inherit; }
.fs-mr details > :nth-child(2) { border-top: 0; }
.fs-mr details > summary { position: static; margin: 0; padding: 0; font-size: inherit; font-weight: inherit; color: inherit; list-style: none; }
.fs-mr details > summary::after { content: none; display: none; }
.fs-mr details > summary::-webkit-details-marker { display: none; }
.fs-mr [id] { scroll-margin-top: calc(var(--fs-mr-top) + 20px); }
.fs-mr .fs-kick { font-size: 12.5px; line-height: 1.4; letter-spacing: 0.22em; text-wrap: balance; }
.fs-site .fs-mr :is(.fs-mr-lv--cream, .fs-mr-lv--stone) :focus-visible { outline-color: var(--fs-ink); }
/* ---- Buttons that open photographs: no button look of their own ---- */
.fs-mr :is(.fs-mr-print__frame, .fs-mr-shot__btn, .fs-mr-film__still) {
display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; font: inherit; color: inherit;
background: #1F1A14; cursor: zoom-in; -webkit-appearance: none; appearance: none; text-align: left;
}
.fs-mr .fs-mr-film__still { cursor: pointer; }
.fs-mr :is(.fs-mr-print__frame, .fs-mr-shot__btn, .fs-mr-film__still) img {
display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; box-shadow: none;
transition: transform 0.7s var(--fs-ease-out), filter 0.3s var(--fs-ease);
}
.fs-mr :is(.fs-mr-print__frame, .fs-mr-shot__btn, .fs-mr-film__still):is(:hover, :focus-visible) img { transform: var(--fs-zoom); }
.fs-mr .fs-mr-print__frame--pinned:is(:hover, :focus-visible) img { transform: none; } /* the pins stay on their relics */
/* ---- 1. Hero (the shared photo banner) ---- */
.fs-mr-hero { --fs-banner-left: 36%; --fs-banner-pos: 32% 34%; --fs-banner-pos-tab: 50% 30%; --fs-banner-phone: 1 / 1; }
.fs-mr-hero__text { max-width: 620px; }
.fs-mr .fs-mr-hero__title { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; font-weight: 700; color: var(--fs-bone); }
.fs-mr-hero__name { font-family: var(--fs-font-serif); font-size: clamp(74px, 9.4vw, 136px); line-height: 0.88; letter-spacing: -0.02em; text-shadow: 0 6px 30px rgba(0,0,0,0.45); }
.fs-mr-hero__sub { font-family: var(--fs-font-serif); font-weight: 400; font-style: italic; font-size: clamp(20px, 2.2vw, 31px); line-height: 1.22; color: #E9DFC9; text-wrap: balance; }
.fs-mr .fs-mr-hero__deck { margin-top: 24px; max-width: 560px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-mr-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.fs-mr-hero__actions .fs-yb-btn svg { flex: none; }
.fs-mr .fs-mr-hero__dates { margin-top: 26px; font-weight: 600; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-muted-dark); }
/* ---- 2. The record band ---- */
.fs-mr-band { background: var(--fs-dark-deepest); color: var(--fs-body-dark); border-top: 1px solid #2A2622; border-bottom: 1px solid #2A2622; }
.fs-mr-band__stats, .fs-mr-band__facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.13fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.13fr); }
.fs-mr-band__stat { display: flex; flex-direction: column; gap: 13px; min-width: 0; padding: 34px 26px 30px; border-left: 1px solid #2A2622; }
.fs-mr-band__stat:first-child { padding-left: 0; border-left: 0; }
.fs-mr-band__n { font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(26px, 2.35vw, 38px); line-height: 1; letter-spacing: -0.01em; color: var(--fs-bone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-mr-band__l { max-width: 210px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11.5px; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-muted-dark); text-wrap: balance; }
.fs-mr-band__facts { border-top: 1px solid #2A2622; }
.fs-mr-band__cell { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 22px 26px 26px; border-left: 1px solid #2A2622; }
.fs-mr-band__cell:first-child { padding-left: 0; border-left: 0; }
.fs-mr-band__cell--aka { grid-column: span 3; }
.fs-mr .fs-mr-band__k { font-weight: 600; font-size: 11px; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-gold); }
.fs-mr .fs-mr-band__v { font-size: 16.5px; line-height: 1.55; color: var(--fs-body-dark); text-wrap: balance; }
.fs-mr-band__v a { color: var(--fs-gold); border-bottom: 1px solid rgba(201,162,39,0.35); transition: border-color 0.2s var(--fs-ease), color 0.2s var(--fs-ease); }
.fs-mr-band__v a:hover, .fs-mr-band__v a:focus-visible { color: var(--fs-gold-hover); border-bottom-color: currentColor; }
/* ---- 3. The levels: sections, the rail and the level bar ---- */
.fs-mr-levels { position: relative; }
.fs-mr-lv { position: relative; }
.fs-mr-lv__in { container-type: inline-size; box-sizing: border-box; max-width: 1140px; margin: 0 auto; padding: 96px 40px 96px; display: flex; flex-direction: column; gap: 24px; }
.fs-mr-lv--flow > .fs-mr-lv__in { padding-top: 0; }
.fs-mr-lv--last > .fs-mr-lv__in { padding-bottom: 120px; }
.fs-mr-lv--end > .fs-mr-lv__in { padding-bottom: 140px; gap: 60px; }
.fs-mr-lv--cream { background: var(--fs-cream); color: var(--fs-body-cream); }
.fs-mr-lv--stone { background: #E7DFCF; color: var(--fs-body-cream); --fs-mr-rule: #C9BFA9; }
.fs-mr-lv--pit { background: #3A332A; color: var(--fs-body-dark); --fs-mr-rule: #5C5142; }
.fs-mr-lv--dark { background: var(--fs-dark-base); color: var(--fs-body-dark); --fs-mr-rule: #3A332A; }
.fs-mr-lv--deep { background: var(--fs-dark-deepest); color: var(--fs-body-dark); --fs-mr-rule: #3A332A; }
.fs-mr-lv--raised { background: var(--fs-dark-raised); color: var(--fs-body-dark); --fs-mr-rule: #3A332A; }
.fs-mr-lv--ruled { border-top: 1px solid #2A2622; }
.fs-mr-lv--pit, .fs-mr-lv--dark, .fs-mr-lv--deep, .fs-mr-lv--raised { --fs-mr-ink: var(--fs-bone); }
/* the level's head: the year, a rule, the kicker */
.fs-mr-head { display: flex; align-items: flex-end; gap: 26px; }
.fs-mr .fs-mr-head__year { flex: none; font-weight: 700; font-size: clamp(72px, 8vw, 108px); line-height: 0.82; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--fs-red); }
.fs-mr-head__rule { flex: 1 1 auto; height: 1px; margin-bottom: 14px; background: var(--fs-mr-rule); }
.fs-mr .fs-mr-head__kick { flex: 0 1 auto; margin-bottom: 10px; font-size: 12.5px; line-height: 1.4; letter-spacing: 0.22em; color: var(--fs-bronze); text-wrap: balance; }
:is(.fs-mr-lv--pit, .fs-mr-lv--dark) .fs-mr-head__year, :is(.fs-mr-lv--pit, .fs-mr-lv--dark) .fs-mr-head__kick { color: var(--fs-gold); }
.fs-mr .fs-mr-h2 { max-width: 820px; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -0.01em; color: var(--fs-mr-ink, var(--fs-ink)); text-wrap: balance; }
.fs-mr .fs-mr-h2--sm { font-size: clamp(28px, 3vw, 38px); }
.fs-mr .fs-mr-h3 { font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(23px, 2.2vw, 27px); line-height: 1.15; color: var(--fs-mr-ink, var(--fs-ink)); text-wrap: balance; }
.fs-mr-prose { display: flex; flex-direction: column; gap: 18px; max-width: 700px; }
.fs-mr :is(.fs-mr-prose p, .fs-mr-p) { font-size: 18.5px; line-height: 1.66; color: inherit; text-wrap: pretty; }
.fs-mr-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 44px; align-items: start; }
.fs-mr-split--names { grid-template-columns: minmax(0, 1fr) 400px; }
/* clippings: cream paper on light levels, dark card on dark ones */
.fs-mr-clip { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; padding: 26px 28px 22px; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: 2px; box-shadow: 0 1px 0 var(--fs-border-cream), 0 8px 24px rgba(43,35,23,0.08); color: var(--fs-body-cream); }
.fs-mr-clip--dark { background: #1F1A14; border-color: #3A332A; box-shadow: none; color: var(--fs-body-dark); }
.fs-mr-lv--pit .fs-mr-clip--dark { background: #2A2622; border-color: #5C5142; }
.fs-mr-clip--ink { justify-content: center; background: #2A2622; border-color: #2A2622; box-shadow: none; color: var(--fs-body-dark); }
.fs-mr .fs-mr-dl { font-family: var(--fs-font-signage); font-weight: 700; font-size: 11.5px; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-mr-rust); text-wrap: balance; }
.fs-mr .fs-mr-dl--bronze { color: var(--fs-bronze); }
.fs-mr :is(.fs-mr-clip--dark, .fs-mr-clip--ink, .fs-mr-cup) .fs-mr-dl { color: var(--fs-gold); }
.fs-mr .fs-mr-q p { font-family: var(--fs-mr-q); font-size: 21px; line-height: 1.48; color: var(--fs-ink); text-wrap: balance; }
.fs-mr .fs-mr-q p + p { margin-top: 10px; }
.fs-mr :is(.fs-mr-clip--dark, .fs-mr-clip--ink) .fs-mr-q p { color: var(--fs-bone); }
.fs-mr .fs-mr-q--big p { font-size: 27px; line-height: 1.3; }
.fs-mr .fs-mr-q--mid p { font-size: 25px; line-height: 1.3; }
.fs-mr .fs-mr-q--small p { font-size: 20px; }
.fs-mr .fs-mr-q--hand p { font-style: italic; }
.fs-mr .fs-mr-q .fs-mr-q--after { font-size: 19px; }
.fs-mr .fs-mr-src { font-family: var(--fs-font-signage); font-weight: 500; font-size: 11px; line-height: 1.55; letter-spacing: 0.15em; text-transform: uppercase; color: #7C6F5F; text-wrap: balance; }
.fs-mr :is(.fs-mr-lv--pit, .fs-mr-lv--dark, .fs-mr-lv--deep, .fs-mr-lv--raised, .fs-mr-clip--dark, .fs-mr-clip--ink, .fs-mr-cup) .fs-mr-src { color: var(--fs-muted-dark); }
.fs-mr .fs-mr-note { font-size: 15.5px; line-height: 1.6; color: var(--fs-body-cream-2); text-wrap: balance; }
.fs-mr .fs-mr-note--lg { font-size: 16.5px; }
.fs-mr :is(.fs-mr-lv--pit, .fs-mr-lv--dark, .fs-mr-lv--deep, .fs-mr-lv--raised) .fs-mr-note { color: var(--fs-body-dark); }
/* prints: the old photographs, with a label beneath */
.fs-mr-print { display: flex; flex-direction: column; margin-top: 12px; }
.fs-mr .fs-mr-print__frame { position: relative; overflow: hidden; box-shadow: 0 1px 0 var(--fs-mr-rule), 0 12px 30px rgba(43,35,23,0.16); }
.fs-mr-print__frame--south { aspect-ratio: 1060 / 640; }
.fs-mr-print__frame--south img { object-position: 50% 88%; }
.fs-mr-print__frame--west { aspect-ratio: 1060 / 580; }
.fs-mr-print__frame--west img { object-position: 50% 92%; }
.fs-mr-print__frame--shops { aspect-ratio: 340 / 236; }
.fs-mr-print__frame--shops img { object-position: 50% 70%; }
.fs-mr-print__frame--pinned { aspect-ratio: 1440 / 941; }
.fs-mr-print__frame--shaft { aspect-ratio: 1432 / 640; }
:is(.fs-mr-lv--pit, .fs-mr-lv--dark) .fs-mr-print__frame { box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
.fs-mr-label { display: flex; justify-content: space-between; align-items: baseline; gap: 30px; padding: 14px 0; border-bottom: 1px solid var(--fs-mr-rule); }
.fs-mr-label__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fs-mr-label__t { font-family: var(--fs-font-serif); font-weight: 700; font-size: 17.5px; line-height: 1.3; color: var(--fs-mr-ink, var(--fs-ink)); text-wrap: balance; }
.fs-mr-label__note { font-size: 14.5px; line-height: 1.55; color: var(--fs-body-cream-2); text-wrap: balance; }
:is(.fs-mr-lv--pit, .fs-mr-lv--dark) .fs-mr-label__note { color: var(--fs-body-dark); }
.fs-mr-label > .fs-mr-src { flex: none; max-width: 40%; text-align: right; }
.fs-mr-label--small { padding: 10px 0 0; border-bottom: 0; gap: 12px; }
.fs-mr-label--small .fs-mr-label__t { font-size: 15px; }
.fs-mr-label--stack { flex-direction: column; align-items: flex-start; gap: 5px; }
.fs-mr-label--stack > .fs-mr-src { max-width: none; text-align: left; }
/* 1891: the claims */
.fs-mr-claims { max-width: 900px; }
.fs-mr-claims__table tr + tr :is(th, td) { border-top: 1px solid var(--fs-border-cream); }
.fs-mr-claims__table :is(th, td) { padding: 11px 16px 11px 0; }
.fs-mr-claims__table th { width: 170px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-ink); }
.fs-mr-claims__table td { font-size: 16.5px; line-height: 1.5; color: var(--fs-body-cream); }
.fs-mr-claims__table td:last-child { width: 150px; padding-right: 0; color: var(--fs-body-cream-2); }
.fs-mr-claims__table .is-phoenix th { color: var(--fs-mr-rust); }
/* 1900: where the copper went */
.fs-mr-flow { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.fs-mr-flow__svg { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.fs-mr-flow__box { fill: var(--fs-panel); stroke: var(--fs-border-cream); }
.fs-mr-flow__h { font-family: var(--fs-font-signage); font-weight: 700; font-size: 19px; letter-spacing: 2.5px; fill: var(--fs-ink); }
.fs-mr-flow__p { font-family: var(--fs-font-serif); font-size: 14.5px; fill: var(--fs-body-cream); }
.fs-mr-flow__p--dim { fill: var(--fs-body-cream-2); }
.fs-mr-flow__p--sm { font-size: 13.5px; }
.fs-mr-flow__arrow { stroke: var(--fs-bronze); stroke-width: 1.5; }
.fs-mr-flow__head { fill: var(--fs-bronze); }
.fs-mr-flow__via { font-family: var(--fs-font-signage); font-weight: 600; font-size: 11.5px; letter-spacing: 1.8px; fill: var(--fs-bronze); }
.fs-mr-flow__list { display: none; }
/* 1910: the town in its own words */
.fs-mr-voices { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.fs-mr-voices__head { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; padding-top: 16px; border-top: 2px solid var(--fs-ink); }
.fs-mr-voices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.fs-mr-voices__col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.fs-mr-voices .fs-mr-clip { padding: 28px 28px 22px; }
.fs-mr-voices .fs-mr-print { margin-top: 0; }
.fs-mr-menu { align-items: center; text-align: center; gap: 10px; }
.fs-mr-voices .fs-mr-menu { padding: 30px 26px 22px; }
.fs-mr .fs-mr-menu__date { font-size: 19px; color: var(--fs-ink); }
.fs-mr-menu__rule { display: block; width: 60px; height: 1px; margin: 6px 0; background: #C9BFA9; }
.fs-mr .fs-mr-menu__list { font-family: var(--fs-mr-q); font-size: 20px; line-height: 1.7; color: var(--fs-ink); }
.fs-mr .fs-mr-menu__list li + li { margin-top: 2px; }
.fs-mr .fs-mr-stones__from { font-family: var(--fs-font-serif); font-size: 16.5px; line-height: 1.75; color: var(--fs-ink); text-wrap: pretty; }
.fs-mr-stones__one { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--fs-border-cream); }
.fs-mr-cup { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 4px; padding: 26px 32px; background: #2A2622; border-radius: 2px; color: var(--fs-bone); }
.fs-mr-cup__k { display: flex; flex-direction: column; gap: 6px; }
.fs-mr .fs-mr-cup__t { font-family: var(--fs-font-serif); font-weight: 700; font-size: 24px; line-height: 1.15; color: var(--fs-bone); }
.fs-mr-cup__b { display: flex; flex-direction: column; gap: 8px; }
.fs-mr .fs-mr-cup__b p:first-child { font-family: var(--fs-font-serif); font-size: 19px; line-height: 1.5; color: var(--fs-bone); text-wrap: pretty; }
/* 1919: the cenotaph, Forepaw, the last resident */
.fs-mr-ceno { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 32px; align-items: stretch; margin-top: 22px; }
.fs-mr-ceno__story { display: flex; flex-direction: column; gap: 18px; }
.fs-mr-ceno__stone { display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; padding: 34px 36px 30px; background: #2A2622; border-radius: 2px; }
.fs-mr .fs-mr-ceno__k { color: var(--fs-gold); text-align: center; font-size: 12.5px; letter-spacing: 0.22em; }
.fs-mr-ceno__rule { display: block; height: 1px; background: #5C5142; }
.fs-mr .fs-mr-ceno__names { display: grid; grid-template-rows: repeat(8, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 11px 24px; font-family: var(--fs-font-serif); font-size: 15px; line-height: 1.35; letter-spacing: 0.09em; text-transform: uppercase; text-align: center; color: var(--fs-bone); }
.fs-mr-ceno__stone .fs-mr-src { color: var(--fs-muted-dark); text-align: center; }
.fs-mr-boss { display: flex; flex-direction: column; gap: 18px; margin-top: 44px; }
.fs-mr .fs-mr-boss__t { padding-top: 16px; border-top: 2px solid var(--fs-ink); }
.fs-mr-boss__quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.fs-mr-last { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 12px; }
.fs-mr-last__text { display: flex; flex-direction: column; gap: 12px; }
.fs-mr-last__text .fs-mr-note { font-size: 14.5px; }
.fs-mr-stone { display: flex; flex-direction: column; align-items: center; gap: 7px; box-sizing: border-box; padding: 28px 20px 26px; background: #CFC4B0; border-radius: 2px; font-family: var(--fs-font-serif); text-align: center; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fs-ink); box-shadow: inset 0 0 0 1px rgba(42,38,34,0.08), 0 10px 26px rgba(43,35,23,0.12); }
.fs-mr-stone__sm { font-size: 11.5px; line-height: 1.4; }
.fs-mr-stone__name { font-size: 19px; line-height: 1.25; font-weight: 700; }
.fs-mr-stone__d { font-size: 13px; }
.fs-mr-stone__yrs { font-size: 16px; font-weight: 700; }
.fs-mr-stone__rule { display: block; width: 34px; height: 1px; margin: 4px 0; background: #7C6F5F; }
.fs-mr-stone--big { gap: 8px; padding: 30px 24px; }
.fs-mr-stone--big .fs-mr-stone__name { font-size: 21px; }
.fs-mr-stone--big .fs-mr-stone__sm { font-size: 13px; }
.fs-mr-stone--big .fs-mr-stone__rule { width: 40px; }
/* 1959: the pit */
.fs-mr-pin { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -100%); pointer-events: none; }
.fs-mr-pin b { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--fs-gold); color: var(--fs-dark-base); font-family: var(--fs-font-signage); font-weight: 700; font-size: 16px; line-height: 28px; text-align: center; box-shadow: 0 0 0 3px rgba(19,17,16,0.35), 0 4px 14px rgba(0,0,0,0.45); }
.fs-mr-pin i { display: block; width: 2px; height: 20px; background: var(--fs-gold); }
.fs-mr-keys { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 14.5px; line-height: 1.5; color: var(--fs-body-dark); }
.fs-mr-keys > span { display: inline-flex; align-items: center; gap: 9px; }
.fs-mr-keys b { display: block; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--fs-gold); color: var(--fs-dark-base); font-family: var(--fs-font-signage); font-weight: 700; font-size: 12.5px; line-height: 20px; text-align: center; }
.fs-mr-print--pit { margin-top: 18px; }
.fs-mr-then { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.fs-mr-then .fs-mr-print { margin-top: 0; }
.fs-mr-twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 18px; }
.fs-mr-twin__i { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid #5C5142; }
.fs-mr-twin__n { font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(34px, 3.6vw, 44px); line-height: 1.05; color: var(--fs-bone); font-variant-numeric: tabular-nums; }
.fs-mr-twin__n--gold { color: var(--fs-gold); }
.fs-mr-twin__l { font-weight: 600; font-size: 12.5px; line-height: 1.45; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-muted-dark); text-wrap: balance; }
/* Now: Frank's photographs, the film, the rule */
.fs-mr-shot { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fs-mr .fs-mr-shot__btn { position: relative; overflow: hidden; aspect-ratio: 340 / 256; }
.fs-mr-shot--lead { margin-top: 6px; }
.fs-mr .fs-mr-shot--lead .fs-mr-shot__btn { aspect-ratio: 1060 / 515; }
.fs-mr .fs-mr-cap { font-weight: 500; font-size: 11.5px; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-muted-dark); text-wrap: balance; }
.fs-mr-shot--lead .fs-mr-cap { padding-bottom: 12px; border-bottom: 1px solid #3A332A; }
.fs-mr-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.fs-mr-essay { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; padding-top: 22px; border-top: 1px solid #3A332A; }
.fs-mr-essay__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; }
.fs-mr-essay__big { grid-column: span 2; }
.fs-mr .fs-mr-essay__big .fs-mr-shot__btn { aspect-ratio: 3 / 2; }
.fs-mr-film { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 40px; padding: 20px; background: #161310; border: 1px solid #3A332A; border-radius: 2px; }
.fs-mr .fs-mr-film__still { position: relative; overflow: hidden; aspect-ratio: 560 / 421; }
.fs-mr-play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--fs-gold); color: var(--fs-dark-base); box-shadow: 0 16px 40px rgba(0,0,0,0.45); transition: transform 0.35s var(--fs-ease-out), background-color 0.25s var(--fs-ease); }
.fs-mr-play svg { margin-left: 5px; }
.fs-mr-film__still:is(:hover, :focus-visible) .fs-mr-play { transform: scale(var(--fs-zoom-play)); background: var(--fs-gold-hover); }
.fs-mr-film__text { display: flex; flex-direction: column; gap: 16px; padding-right: 16px; }
.fs-mr .fs-mr-film__t { font-family: var(--fs-font-serif); font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: 0.02em; color: var(--fs-bone); }
.fs-mr .fs-mr-film__p { font-size: 17.5px; line-height: 1.6; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-mr-film__acts { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 4px; }
.fs-mr-safety { display: flex; flex-direction: column; gap: 14px; margin-top: 36px; padding: 32px 36px 28px; background: #1F1A14; border: 1px solid #3A332A; border-radius: 2px; }
.fs-mr .fs-mr-safety__t { font-family: var(--fs-font-serif); font-weight: 700; font-size: 27px; line-height: 1.15; color: var(--fs-bone); }
.fs-mr .fs-mr-safety p:not(.fs-kick) { max-width: 820px; font-size: 17.5px; line-height: 1.65; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-mr-safety b { color: var(--fs-bone); }
/* The ledger */
.fs-mr .fs-mr-lg__intro { max-width: 720px; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-mr-lg__how--touch { display: none; }
@media (hover: none) { .fs-mr-lg__how--point { display: none; } .fs-mr-lg__how--touch { display: inline; } }
.fs-mr-lg { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.fs-mr .fs-mr-lg__read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-height: 40px; }
.fs-mr-lg__year { font-family: var(--fs-font-serif); font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--fs-gold); font-variant-numeric: tabular-nums; }
.fs-mr-lg__line { font-family: var(--fs-font-serif); font-size: 19px; line-height: 1.4; color: var(--fs-bone); }
.fs-mr-lg__scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #3A332A transparent; }
.fs-mr-lg__chart { position: relative; cursor: crosshair; touch-action: pan-y; -webkit-user-select: none; user-select: none; border-radius: 2px; }
.fs-site .fs-mr-lg__chart:focus-visible { outline: 2px solid var(--fs-gold); outline-offset: 4px; }
.fs-mr-lg__svg { display: block; width: 100%; height: auto; overflow: visible; }
.fs-mr-lg__svg--phone { display: none; }
.fs-mr-lg__base { stroke: #8C8271; stroke-width: 1; }
.fs-mr-lg__rule { stroke: #2A2622; stroke-width: 1; }
.fs-mr-lg__ax, .fs-mr-lg__yr { font-family: var(--fs-font-signage); font-size: 11.5px; letter-spacing: 1px; fill: #8C8271; }
.fs-mr-lg__yr { font-size: 12px; }
.fs-mr-lg__hi { fill: var(--fs-gold); fill-opacity: 0.14; transition: x 0.15s var(--fs-ease); }
.fs-mr-lg__bar { fill: #D9CFBA; }
.fs-mr-lg__bar--peak { fill: var(--fs-gold); }
.fs-mr-lg__bar--quiet { fill: #8C8271; }
.fs-mr-lg__bar--milled { fill: none; stroke: #8C8271; stroke-width: 1.2; stroke-dasharray: 3 2; }
.fs-mr-lg__peak { font-family: var(--fs-font-signage); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; fill: var(--fs-gold); }
.fs-mr-lg__peak--sub { font-weight: 600; font-size: 11.5px; letter-spacing: 1.2px; }
.fs-mr-lg__note { font-family: var(--fs-font-signage); font-weight: 600; font-size: 11.5px; letter-spacing: 1.5px; fill: var(--fs-muted-dark); }
.fs-mr-lg__note--dim { letter-spacing: 1.8px; fill: #6E6354; }
.fs-mr-lg__note--milled { font-size: 11px; letter-spacing: 1.2px; fill: #8C8271; }
.fs-mr-lg__brace { fill: none; stroke: #8C8271; stroke-width: 1; }
.fs-mr-lg__key { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; font-weight: 600; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-mr-lg__key li { display: inline-flex; align-items: center; gap: 8px; }
.fs-mr-lg__sw { display: inline-block; flex: none; width: 10px; height: 10px; box-sizing: border-box; background: #D9CFBA; }
.fs-mr-lg__sw--peak { background: var(--fs-gold); }
.fs-mr-lg__sw--milled { background: none; border: 1px dashed #8C8271; }
.fs-mr-lg__totals { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) minmax(0, 1fr) minmax(0, 1.16fr) minmax(0, 0.84fr); gap: 24px; margin-top: 26px; padding-top: 28px; border-top: 1px solid #3A332A; }
.fs-mr-lg__totals li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fs-mr-lg__tn { font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(22px, 2.05vw, 29px); line-height: 1.1; letter-spacing: -0.01em; color: var(--fs-bone); font-variant-numeric: tabular-nums; }
.fs-mr-lg__tl { font-weight: 600; font-size: 11.5px; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-muted-dark-2); text-wrap: balance; }
.fs-mr .fs-mr-lg__table { margin-top: 4px; border-top: 1px solid #2A2622; border-bottom: 1px solid #2A2622; }
.fs-mr .fs-mr-lg__table > summary { display: flex; align-items: center; gap: 10px; padding: 14px 0; cursor: pointer; font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-gold); }
.fs-mr .fs-mr-lg__table > summary::before { content: "+"; display: inline-block; width: 14px; font-size: 18px; line-height: 1; transition: transform 0.3s var(--fs-ease); }
.fs-mr .fs-mr-lg__table[open] > summary::before { transform: rotate(45deg); }
.fs-mr .fs-mr-lg__tablewrap { max-height: 380px; overflow: auto; margin-bottom: 16px; }
.fs-mr-lg__table table { max-width: 620px; font-family: var(--fs-font-serif); font-size: 15.5px; font-variant-numeric: tabular-nums; color: var(--fs-body-dark); }
.fs-mr-lg__table :is(th, td) { padding: 7px 18px 7px 0; border-bottom: 1px solid #2A2622; }
.fs-mr-lg__table thead th { position: sticky; top: 0; background: var(--fs-dark-deepest); font-family: var(--fs-font-signage); font-weight: 600; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-mr-lg__table tbody th { color: var(--fs-bone); font-weight: 700; }
/* The names */
.fs-mr .fs-mr-names { columns: 3 240px; column-gap: 40px; margin-top: 24px; border-bottom: 1px solid #3A332A; }
.fs-mr-nm { display: flex; flex-direction: column; gap: 4px; padding: 14px 0 16px; border-top: 1px solid #3A332A; break-inside: avoid; }
.fs-mr .fs-mr-nm__n { font-family: var(--fs-font-serif); font-size: 18.5px; line-height: 1.3; color: var(--fs-bone); }
.fs-mr .fs-mr-nm__d { font-weight: 600; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-gold); }
.fs-mr .fs-mr-nm__c { font-family: var(--fs-mr-q); font-style: italic; font-size: 15.5px; line-height: 1.45; color: var(--fs-muted-dark); text-wrap: pretty; }
.fs-mr-fall { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 32px; align-items: stretch; margin-top: 44px; }
.fs-mr-fall__stones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* The record, and the PDF */
.fs-mr-lv--raised > .fs-mr-lv__in { gap: 40px; }
.fs-mr-rec { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 56px; align-items: center; }
.fs-mr-pages { position: relative; width: 440px; height: 520px; }
.fs-mr-pg { position: absolute; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; width: 340px; height: 440px; padding: 26px 26px 22px; border-radius: 2px; box-shadow: 0 14px 36px rgba(0,0,0,0.42); }
.fs-mr-pg--3 { left: 96px; top: 0; background: #EDE6D8; }
.fs-mr-pg--2 { left: 48px; top: 36px; background: #F3EEE3; }
.fs-mr-pg--1 { left: 0; top: 72px; gap: 0; padding: 0; overflow: hidden; background: #FCFAF6; }
.fs-mr .fs-mr-pg__h { font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mr .fs-mr-pg__h--rust { color: var(--fs-mr-rust); }
.fs-mr-pg__rows { display: flex; flex-direction: column; margin-top: 6px; }
.fs-mr .fs-mr-pg__rows p { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #E0D7C7; font-family: var(--fs-font-mono); font-size: 11.5px; color: var(--fs-body-cream); }
.fs-mr .fs-mr-pg__name { font-size: 13px; color: var(--fs-ink); }
.fs-mr-pg__bar { display: block; height: 6px; border-radius: 1px; background: #D8CFBC; }
.fs-mr-pg--2 .fs-mr-pg__bar:nth-of-type(4) { width: 70%; }
.fs-mr-pg--2 .fs-mr-pg__bar:last-child { width: 55%; }
.fs-mr-pg--2 .fs-mr-pg__h + .fs-mr-pg__bar ~ .fs-mr-pg__h { margin-top: 8px; }
.fs-mr .fs-mr-pg--1 img { display: block; width: 100%; height: 214px; max-width: none; object-fit: cover; object-position: 50% 30%; border-radius: 0; }
.fs-mr-pg__cover { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; }
.fs-mr .fs-mr-pg__title { font-family: var(--fs-font-serif); font-weight: 700; font-size: 30px; line-height: 1.05; color: var(--fs-ink); }
.fs-mr .fs-mr-pg__sub { font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-body-cream-2); }
.fs-mr-pg__line { display: block; height: 1px; margin: 10px 0 4px; background: var(--fs-border-cream); }
.fs-mr .fs-mr-pg__by { font-size: 12.5px; color: var(--fs-body-cream-2); }
.fs-mr-rec__text { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fs-mr .fs-mr-rec__text .fs-mr-p { color: var(--fs-body-dark); }
.fs-mr-parts { display: flex; flex-direction: column; border-top: 1px solid #3A332A; }
.fs-mr-parts li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid #3A332A; font-size: 16.5px; line-height: 1.5; color: var(--fs-bone); }
.fs-mr-parts__k { flex: none; width: 64px; padding-top: 3px; font-weight: 600; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-muted-dark-2); }
.fs-mr .fs-mr-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; }
.fs-mr-soon__btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px; border: 1.5px dashed rgba(201,162,39,0.55); border-radius: 2px; font-weight: 700; font-size: 14.5px; line-height: 1.1; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-gold); }
.fs-mr-soon__tag { padding: 5px 10px; border-radius: 2px; background: #2A2622; font-weight: 600; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-body-dark); }
.fs-mr-also { display: flex; gap: 18px; align-items: flex-start; box-sizing: border-box; max-width: 640px; margin-top: 10px; padding: 22px 24px; border: 1px solid #3A332A; border-radius: 2px; color: var(--fs-gold); }
.fs-mr-also svg { flex: none; margin-top: 2px; }
.fs-mr-also__t { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fs-mr .fs-mr-also__k { font-weight: 600; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-mr .fs-mr-also__h { font-family: var(--fs-font-serif); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--fs-bone); text-wrap: balance; }
.fs-mr .fs-mr-also__p { font-size: 16px; line-height: 1.6; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-mr .fs-mr-also__soon { margin-top: 4px; font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-mr-card { display: flex; flex-direction: column; gap: 18px; padding: 28px 32px; background: #1F1A14; border: 1px solid #3A332A; border-radius: 2px; }
.fs-mr-card__grid { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px minmax(0, 1fr); gap: 14px 22px; align-items: baseline; padding-top: 18px; border-top: 1px solid #3A332A; }
.fs-mr-card__grid > div { display: contents; }
.fs-mr .fs-mr-card__grid dt { font-weight: 600; font-size: 11.5px; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-muted-dark-2); }
.fs-mr .fs-mr-card__grid dd { font-size: 16.5px; line-height: 1.5; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-mr .fs-mr-card__grid .fs-mr-card__no { font-size: 17px; color: var(--fs-bone); font-variant-numeric: tabular-nums; }
/* Back in daylight: questions, sources, the write-in */
.fs-mr-faq { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.fs-mr-faq__list { display: flex; flex-direction: column; margin-top: 6px; border-bottom: 1px solid var(--fs-border-cream); }
.fs-mr .fs-mr-qa { border-top: 1px solid var(--fs-border-cream); }
.fs-mr .fs-mr-qa > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; font-family: var(--fs-font-serif); font-weight: 700; font-size: 21px; line-height: 1.3; color: var(--fs-ink); text-wrap: balance; }
.fs-mr .fs-mr-qa > summary:hover { color: var(--fs-red); }
.fs-mr-qa__pm { flex: none; width: 24px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 26px; line-height: 1; text-align: center; color: var(--fs-red); transition: transform 0.3s var(--fs-ease); }
.fs-mr-qa[open] .fs-mr-qa__pm { transform: rotate(45deg); }
.fs-mr .fs-mr-qa__a { padding: 0 48px 24px 0; }
.fs-mr .fs-mr-qa__a p { font-size: 17.5px; line-height: 1.65; color: var(--fs-body-cream); text-wrap: pretty; }
.fs-mr-sources { display: flex; flex-direction: column; gap: 10px; max-width: 900px; padding-top: 18px; border-top: 2px solid var(--fs-ink); }
.fs-mr .fs-mr-sources__k { font-size: 12.5px; letter-spacing: 0.22em; color: #7C6F5F; }
.fs-mr .fs-mr-sources__p { font-size: 15px; line-height: 1.75; color: var(--fs-body-cream-2); text-wrap: pretty; }
.fs-mr .fs-mr-sources__small { font-size: 13.5px; line-height: 1.6; color: #7C6F5F; }
.fs-mr-write { display: flex; align-items: center; justify-content: space-between; gap: 24px 32px; box-sizing: border-box; max-width: 900px; padding: 28px 32px; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: 2px; box-shadow: var(--fs-shadow-rest); }
.fs-mr-write__t { display: flex; flex-direction: column; gap: 8px; }
.fs-mr .fs-mr-write__t .fs-kick { font-size: 12.5px; letter-spacing: 0.22em; color: var(--fs-mr-rust); }
.fs-mr .fs-mr-write__p { max-width: 560px; font-size: 17.5px; line-height: 1.55; color: var(--fs-body-cream); text-wrap: balance; }
.fs-mr-write .fs-yb-btn { flex: none; }
/* The closing sign-up */
.fs-mr-closer { padding: 72px 0 76px; background: var(--fs-dark-deepest); border-top: 1px solid #3A332A; text-align: center; }
.fs-mr-closer .fs-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fs-mr .fs-mr-closer__t { max-width: 760px; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(27px, 3vw, 34px); line-height: 1.2; color: var(--fs-bone); text-wrap: balance; }
.fs-mr .fs-mr-closer__p { max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--fs-muted-dark); text-wrap: balance; }
.fs-mr-closer__form { width: 540px; max-width: 100%; margin-top: 16px; }
.fs-mr .fs-mr-closer__small { font-size: 13.5px; color: var(--fs-muted-dark-2); }
/* ---- The rail (1180px and wider, on screens at least 600px tall) ---- */
.fs-mr-railbox { display: none; }
.fs-mr-rail { color: var(--fs-ink); transition: color 0.4s var(--fs-ease); }
.fs-mr-rail.is-dark { color: var(--fs-bone); }
.fs-mr-ctr { display: flex; flex-direction: column; gap: 9px; width: 210px; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid rgba(124,111,95,0.35); }
.fs-mr .fs-mr-ctr__l { font-weight: 600; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.7; }
.fs-mr .fs-mr-ctr__n { font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fs-mr-rust); transition: color 0.4s var(--fs-ease); }
.fs-mr-rail.is-dark .fs-mr-ctr__n { color: var(--fs-gold); }
.fs-mr-wheels { display: flex; gap: 4px; }
.fs-mr-wheel { position: relative; display: block; width: 36px; height: 50px; overflow: hidden; border-radius: 2px; background: #FCFAF6; box-shadow: inset 0 0 0 1px #D8CFBC; transition: background-color 0.4s var(--fs-ease), box-shadow 0.4s var(--fs-ease); }
.is-dark .fs-mr-wheel { background: #1F1A14; box-shadow: inset 0 0 0 1px #5C5142; }
.fs-mr-wheel::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(124,111,95,0.18); pointer-events: none; }
.fs-mr-strip { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -50px)); transition: transform 1.1s cubic-bezier(0.2, 0.75, 0.25, 1); }
.fs-mr-strip span { display: block; height: 50px; font-family: var(--fs-font-signage); font-weight: 700; font-size: 35px; line-height: 50px; text-align: center; font-variant-numeric: tabular-nums; }
.fs-mr-wheel:nth-child(2) .fs-mr-strip { transition-delay: 0.08s; }
.fs-mr-wheel:nth-child(3) .fs-mr-strip { transition-delay: 0.16s; }
.fs-mr-wheel:nth-child(4) .fs-mr-strip { transition-delay: 0.24s; }
.fs-mr-shaft { position: relative; }
.fs-mr-shaft__line { position: absolute; left: 5px; top: 9px; bottom: 22px; width: 2px; background: currentColor; opacity: 0.2; }
.fs-mr-cage { position: absolute; left: 1px; top: 0; z-index: 2; width: 10px; height: 18px; border-radius: 2px 2px 0 0; background: var(--fs-red); box-shadow: 0 0 0 3px rgba(181,80,46,0.15); transform: translateY(var(--cage-y, 0px)); transition: transform 0.35s var(--fs-ease-out), background-color 0.4s var(--fs-ease); }
.fs-mr-rail.is-dark .fs-mr-cage { background: var(--fs-gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.18); }
.fs-mr-stations { display: flex; flex-direction: column; gap: 10px; }
.fs-mr .fs-mr-st { position: relative; z-index: 1; display: flex; gap: 14px; align-items: flex-start; min-height: 40px; color: inherit; opacity: 0.5; transition: opacity 0.25s var(--fs-ease); }
.fs-mr .fs-mr-st:hover, .fs-mr .fs-mr-st:focus-visible { opacity: 0.85; color: inherit; }
.fs-mr .fs-mr-st.is-on { opacity: 1; }
.fs-mr-st__dot { flex: none; width: 12px; height: 12px; margin-top: 3px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; }
.fs-mr-st.is-on .fs-mr-st__dot { background: var(--fs-red); border-color: var(--fs-red); }
.fs-mr-rail.is-dark .fs-mr-st.is-on .fs-mr-st__dot { background: var(--fs-gold); border-color: var(--fs-gold); }
.fs-mr-st__t { display: flex; flex-direction: column; }
.fs-mr-st__yr { font-weight: 700; font-size: 12px; line-height: 1.25; letter-spacing: 0.18em; text-transform: uppercase; }
.fs-mr-st__lb { margin-top: 1px; font-size: 14.5px; line-height: 1.25; }
.fs-mr-st.is-on .fs-mr-st__lb { font-weight: 700; }
.fs-mr-below { display: flex; flex-direction: column; gap: 8px; width: 210px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(124,111,95,0.35); }
.fs-mr .fs-mr-below a { display: flex; gap: 14px; align-items: center; font-size: 14.5px; line-height: 1.3; color: inherit; opacity: 0.55; transition: opacity 0.25s var(--fs-ease); }
.fs-mr .fs-mr-below a:hover, .fs-mr .fs-mr-below a:focus-visible { opacity: 0.9; color: inherit; }
.fs-mr .fs-mr-below a.is-on { opacity: 1; font-weight: 700; }
.fs-mr-below__sq { flex: none; width: 12px; height: 2px; background: currentColor; }
.fs-mr-below a.is-on .fs-mr-below__sq { height: 3px; background: var(--fs-red); }
.fs-mr-rail.is-dark .fs-mr-below a.is-on .fs-mr-below__sq { background: var(--fs-gold); }
.fs-mr .fs-mr-railpdf { display: flex; align-items: center; gap: 14px; box-sizing: border-box; width: 210px; margin-top: 28px; padding: 14px 16px; border: 1px solid rgba(181,80,46,0.55); border-radius: 2px; color: var(--fs-red); transition: background-color 0.25s var(--fs-ease), color 0.25s var(--fs-ease), border-color 0.25s var(--fs-ease); }
.fs-mr .fs-mr-railpdf:hover, .fs-mr .fs-mr-railpdf:focus-visible { background: var(--fs-red); border-color: var(--fs-red); color: var(--fs-cream); }
.fs-mr .fs-mr-rail.is-dark .fs-mr-railpdf { color: var(--fs-gold); border-color: rgba(201,162,39,0.55); }
.fs-mr .fs-mr-rail.is-dark .fs-mr-railpdf:hover, .fs-mr .fs-mr-rail.is-dark .fs-mr-railpdf:focus-visible { background: var(--fs-gold); border-color: var(--fs-gold); color: var(--fs-dark-base); }
.fs-mr-railpdf svg { flex: none; }
.fs-mr-railpdf__t { display: flex; flex-direction: column; gap: 4px; }
.fs-mr-railpdf__1 { font-weight: 700; font-size: 13.5px; line-height: 1.1; letter-spacing: 0.14em; text-transform: uppercase; }
.fs-mr-railpdf__2 { font-weight: 600; font-size: 11px; line-height: 1.1; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; }
/* ---- The level bar (below 1180px, or on short screens): the rail, folded into one line ---- */
.fs-mr-lvbar { position: sticky; top: var(--fs-mr-top); z-index: 6; display: flex; align-items: center; gap: 14px; box-sizing: border-box; height: 60px; padding: 0 max(40px, calc((100% - 1060px) / 2)); background: rgba(245,239,227,0.97); border-bottom: 1px solid var(--fs-border-cream); box-shadow: 0 6px 18px rgba(43,35,23,0.08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 0.4s var(--fs-ease), border-color 0.4s var(--fs-ease); }
.fs-mr-lvbar.is-dark { background: rgba(22,19,16,0.97); border-bottom-color: #3A332A; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.fs-mr-wheels--bar { gap: 3px; flex: none; }
.fs-mr-wheels--bar .fs-mr-wheel { width: 26px; height: 36px; color: var(--fs-ink); }
.fs-mr-lvbar.is-dark .fs-mr-wheel { color: var(--fs-bone); }
.fs-mr-wheels--bar .fs-mr-strip { transform: translateY(calc(var(--d, 0) * -36px)); }
.fs-mr-wheels--bar .fs-mr-strip span { height: 36px; font-size: 25px; line-height: 36px; }
.fs-mr-lvbar__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fs-mr .fs-mr-lvbar__tag { font-weight: 600; font-size: 10.5px; line-height: 1.3; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-mr-rust); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-mr .fs-mr-lvbar__title { font-family: var(--fs-font-serif); font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--fs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-mr .fs-mr-lvbar.is-dark .fs-mr-lvbar__tag { color: var(--fs-gold); }
.fs-mr .fs-mr-lvbar.is-dark .fs-mr-lvbar__title { color: var(--fs-bone); }
.fs-mr-lvbar__prog { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--fs-red); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.fs-mr-lvbar.is-dark .fs-mr-lvbar__prog { background: var(--fs-gold); }
.fs-mr-levels [id] { scroll-margin-top: calc(var(--fs-mr-top) + 76px); }
@media (min-width: 1180px) and (min-height: 600px) {
.fs-mr-lvbar { display: none; }
.fs-mr-levels [id] { scroll-margin-top: calc(var(--fs-mr-top) + 20px); }
.fs-mr-railbox { display: block; position: absolute; z-index: 3; top: 110px; bottom: 110px; left: max(40px, calc((100% - 1565px) / 2 + 40px)); width: 250px; pointer-events: none; }
.fs-mr-rail { position: sticky; top: calc(var(--fs-mr-top) + 30px); pointer-events: auto; }
/* the rail lines up with the site's own left edge (the header, the hero's words, the band) */
.fs-mr-lv__in { max-width: 1440px; margin-left: max(0px, calc((100% - 1565px) / 2)); margin-right: auto; padding: 110px 40px 104px 340px; }
.fs-mr-lv--flow > .fs-mr-lv__in { padding-top: 0; }
.fs-mr-lv--last > .fs-mr-lv__in { padding-bottom: 128px; }
.fs-mr-lv--dark > .fs-mr-lv__in { padding-bottom: 140px; }
.fs-mr-lv--deep > .fs-mr-lv__in { padding-bottom: 96px; }
.fs-mr-lv--end > .fs-mr-lv__in { padding: 104px 40px 150px 340px; }
}
@media (min-width: 1180px) and (max-width: 1439px) and (min-height: 600px) {
.fs-mr-railbox { width: 222px; }
.fs-mr-lv__in, .fs-mr-lv--end > .fs-mr-lv__in { padding-left: 300px; }
.fs-mr-ctr, .fs-mr-below, .fs-mr .fs-mr-railpdf { width: 200px; }
}
/* screens that are wide but not very tall: a tighter rail, without the PDF box */
@media (min-width: 1180px) and (min-height: 600px) and (max-height: 820px) {
.fs-mr-ctr { gap: 6px; margin-bottom: 14px; padding-bottom: 14px; }
.fs-mr-wheel { height: 42px; }
.fs-mr-strip { transform: translateY(calc(var(--d, 0) * -42px)); }
.fs-mr-strip span { height: 42px; font-size: 30px; line-height: 42px; }
.fs-mr-stations { gap: 4px; }
.fs-mr .fs-mr-st { min-height: 32px; }
.fs-mr-st__lb { font-size: 13.5px; }
.fs-mr-below { gap: 5px; margin-top: 12px; padding-top: 12px; }
.fs-mr .fs-mr-railpdf { display: none; }
}
/* ---- Inside a level, the layout follows the level's own width ---- */
@container (max-width: 980px) {
.fs-mr-voices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-mr-voices__col:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.fs-mr-ceno { grid-template-columns: minmax(0, 1fr) 400px; }
.fs-mr-fall { grid-template-columns: minmax(0, 1fr) 440px; }
.fs-mr-rec { grid-template-columns: 400px minmax(0, 1fr); gap: 40px; }
.fs-mr-pages { zoom: 0.9; }
.fs-mr-lg__totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 880px) {
.fs-mr-split, .fs-mr-split--names { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.fs-mr-split > .fs-mr-clip { max-width: 640px; }
.fs-mr-ceno, .fs-mr-fall { grid-template-columns: minmax(0, 1fr); }
.fs-mr-ceno__stone { max-width: 560px; }
.fs-mr-fall__stones { max-width: 560px; }
.fs-mr-boss__quotes { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.fs-mr-then { grid-template-columns: minmax(0, 1fr); }
.fs-mr-then .fs-mr-clip { max-width: 640px; }
.fs-mr-rec { grid-template-columns: minmax(0, 1fr); justify-items: start; }
.fs-mr-film { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.fs-mr-film__text { padding: 0 8px 8px; }
.fs-mr-essay__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-mr-card__grid { grid-template-columns: 150px minmax(0, 1fr); }
.fs-mr-cup { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
/* ---- Tablets and phones ---- */
@media (max-width: 1099px) {
.fs-mr-band__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-mr-band__stat { padding-left: 20px; padding-right: 20px; }
.fs-mr-band__n { font-size: clamp(22px, 3.2vw, 34px); }
.fs-mr-band__stat:nth-child(4) { padding-left: 0; border-left: 0; }
.fs-mr-band__stat:nth-child(n+4) { border-top: 1px solid #2A2622; }
.fs-mr-band__stat:nth-child(5) { grid-column: span 2; }
.fs-mr-band__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-mr-band__cell--aka { grid-column: 1 / -1; padding-right: 0; }
.fs-mr-band__cell:nth-child(2) { padding-left: 0; border-left: 0; }
.fs-mr-band__cell:nth-child(n+2) { border-top: 1px solid #2A2622; }
}
@media (max-width: 767px) {
.fs-mr-hero .fs-banner__credit { top: 12px; bottom: auto; }
.fs-mr-hero__actions { flex-direction: column; align-items: stretch; }
.fs-mr-hero__actions .fs-yb-btn { justify-content: center; }
.fs-mr .fs-mr-hero__dates { text-align: center; }
.fs-mr-hero__name { font-size: min(19vw, 96px); }
}
@media (max-width: 699px) {
.fs-mr-band__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-mr-band__stat { padding: 24px 0 22px 14px; gap: 10px; }
.fs-mr-band__stat:nth-child(odd) { padding-left: 0; border-left: 0; }
.fs-mr-band__stat:nth-child(4) { padding-left: 14px; border-left: 1px solid #2A2622; }
.fs-mr-band__stat:nth-child(n+3) { border-top: 1px solid #2A2622; }
.fs-mr-band__stat:last-child { grid-column: 1 / -1; }
.fs-mr-band__n { font-size: clamp(18px, 6vw, 30px); }
.fs-mr-band__stat:nth-child(5) { grid-column: 1 / -1; }
.fs-mr-band__facts { grid-template-columns: minmax(0, 1fr); }
.fs-mr-band__cell, .fs-mr-band__cell:nth-child(n) { padding: 18px 0 20px; border-left: 0; }
.fs-mr-lvbar { height: 56px; padding: 0 20px; gap: 12px; }
.fs-mr-wheels--bar .fs-mr-wheel { width: 23px; height: 32px; }
.fs-mr-wheels--bar .fs-mr-strip { transform: translateY(calc(var(--d, 0) * -32px)); }
.fs-mr-wheels--bar .fs-mr-strip span { height: 32px; font-size: 22px; line-height: 32px; }
.fs-mr-levels [id] { scroll-margin-top: calc(var(--fs-mr-top) + 68px); }
.fs-mr-lv__in { padding: 56px 20px 64px; gap: 20px; }
.fs-mr-lv--flow > .fs-mr-lv__in { padding-top: 8px; }
.fs-mr-lv--last > .fs-mr-lv__in, .fs-mr-lv--end > .fs-mr-lv__in { padding-bottom: 80px; }
.fs-mr-lv--end > .fs-mr-lv__in { gap: 44px; }
.fs-mr-head { flex-wrap: wrap; gap: 10px 14px; }
.fs-mr-head__rule { margin-bottom: 9px; }
.fs-mr .fs-mr-head__kick { flex-basis: 100%; margin: 4px 0 0; font-size: 11.5px; }
.fs-mr :is(.fs-mr-prose p, .fs-mr-p) { font-size: 17px; line-height: 1.62; }
.fs-mr-clip { padding: 20px 20px 18px; }
.fs-mr .fs-mr-q p { font-size: 19px; }
.fs-mr .fs-mr-q--big p { font-size: 23px; }
.fs-mr .fs-mr-q--mid p { font-size: 21px; }
.fs-mr-label { flex-direction: column; align-items: flex-start; gap: 6px; }
.fs-mr-label > .fs-mr-src { max-width: none; text-align: left; }
.fs-mr .fs-mr-print__frame--south, .fs-mr .fs-mr-print__frame--west { aspect-ratio: auto; }
.fs-mr .fs-mr-print__frame--south img, .fs-mr .fs-mr-print__frame--west img { height: auto; }
.fs-mr-claims__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; }
.fs-mr-claims__table tr + tr { border-top: 1px solid var(--fs-border-cream); }
.fs-mr-claims__table tr + tr :is(th, td) { border-top: 0; }
.fs-mr-claims__table :is(th, td), .fs-mr-claims__table td:last-child { width: auto; padding: 0; }
.fs-mr-claims__table th { grid-column: 1 / -1; font-size: 14px; }
.fs-mr-claims__table td { font-size: 15.5px; }
.fs-mr-claims__table td:last-child { text-align: right; }
.fs-mr-flow__svg { display: none; }
.fs-mr-flow__list { display: flex; flex-direction: column; gap: 0; }
.fs-mr-flow__list li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: 2px; font-size: 15.5px; line-height: 1.5; color: var(--fs-body-cream); }
.fs-mr-flow__list li + li { margin-top: 44px; }
.fs-mr-flow__list li + li::before { content: "\2193"; position: absolute; left: 50%; top: -38px; transform: translateX(-50%); font-size: 22px; line-height: 1; color: var(--fs-bronze); }
.fs-mr .fs-mr-flow__lh { font-weight: 700; font-size: 17px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-ink); }
.fs-mr .fs-mr-flow__ld { color: var(--fs-body-cream-2); }
.fs-mr .fs-mr-flow__lv { position: absolute; left: calc(50% + 18px); bottom: -34px; font-weight: 600; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fs-bronze); white-space: nowrap; }
.fs-mr-voices__grid, .fs-mr-voices__col:nth-child(3) { grid-template-columns: minmax(0, 1fr); }
.fs-mr-voices__head { flex-direction: column; gap: 6px; }
.fs-mr-voices .fs-mr-clip { padding: 22px 20px 18px; }
.fs-mr-cup { padding: 22px 20px; }
.fs-mr-ceno__stone { padding: 26px 20px 22px; }
.fs-mr .fs-mr-ceno__names { gap: 10px 14px; font-size: 13px; letter-spacing: 0.05em; }
.fs-mr-last { grid-template-columns: minmax(0, 1fr); }
.fs-mr-stone--big { max-width: 330px; }
.fs-mr-twin { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.fs-mr-pin b { width: 24px; height: 24px; font-size: 14px; line-height: 24px; }
.fs-mr-pin i { height: 12px; }
.fs-mr .fs-mr-shot--lead .fs-mr-shot__btn { aspect-ratio: 3 / 2; }
.fs-mr-trio { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.fs-mr .fs-mr-trio .fs-mr-shot__btn { aspect-ratio: 3 / 2; }
.fs-mr-essay__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.fs-mr-essay__big { grid-column: 1 / -1; }
.fs-mr .fs-mr-essay__grid li:not(.fs-mr-essay__big) .fs-mr-shot__btn { aspect-ratio: 1 / 1; }
.fs-mr .fs-mr-essay__grid li:not(.fs-mr-essay__big) .fs-mr-cap { font-size: 10.5px; letter-spacing: 0.14em; }
.fs-mr-film { padding: 12px; }
.fs-mr .fs-mr-film__t { font-size: 30px; }
.fs-mr-film__acts { flex-direction: column; align-items: stretch; }
.fs-mr-film__acts .fs-yb-btn { justify-content: center; }
.fs-mr-safety { padding: 24px 20px 22px; }
.fs-mr .fs-mr-safety__t { font-size: 23px; }
.fs-mr .fs-mr-lg__intro { font-size: 16.5px; }
.fs-mr-lg__svg--wide { display: none; }
.fs-mr-lg__svg--phone { display: block; }
.fs-mr-lg__year { font-size: 30px; }
.fs-mr-lg__line { font-size: 16.5px; }
.fs-mr-lg__totals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.fs-mr-lg__totals li:first-child { grid-column: 1 / -1; }
.fs-mr-lg__tn { font-size: clamp(19px, 6vw, 26px); }
.fs-mr-lg__table table { font-size: 14.5px; }
.fs-mr .fs-mr-names { columns: 1; }
.fs-mr-fall__stones { gap: 10px; }
.fs-mr-stone { padding: 22px 10px 20px; }
.fs-mr-stone__name { font-size: 16px; }
.fs-mr-pages { zoom: 0.68; margin: 0 auto; }
.fs-mr-rec { justify-items: stretch; }
.fs-mr .fs-mr-soon { flex-direction: column; align-items: stretch; }
.fs-mr-soon__btn { justify-content: center; }
.fs-mr-soon__tag { align-self: center; }
.fs-mr-also { padding: 18px; gap: 14px; }
.fs-mr-card { padding: 22px 20px; }
.fs-mr-card__grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.fs-mr .fs-mr-card__grid dd + dt, .fs-mr .fs-mr-card__grid > div + div dt { margin-top: 12px; }
.fs-mr .fs-mr-qa > summary { font-size: 18.5px; padding: 18px 0; }
.fs-mr .fs-mr-qa__a { padding-right: 0; }
.fs-mr .fs-mr-qa__a p { font-size: 16.5px; }
.fs-mr-write { flex-direction: column; align-items: stretch; padding: 22px 20px; }
.fs-mr-write .fs-yb-btn { justify-content: center; }
.fs-mr-closer { padding: 56px 0 60px; }
}
@media (max-width: 400px) {
.fs-mr .fs-mr-ceno__names { font-size: 12px; letter-spacing: 0.03em; gap: 10px 10px; }
.fs-mr-ceno__stone { padding: 24px 14px 20px; }
}
@supports not (zoom: 1) {
@media (max-width: 699px) { .fs-mr-pages { display: none; } }
}
/* ---- Less motion: the year is set, not rolled; nothing zooms ---- */
@media (prefers-reduced-motion: reduce) {
.fs-mr-strip, .fs-mr-cage, .fs-mr-rail, .fs-mr-wheel, .fs-mr-lvbar, .fs-mr-lg__hi { transition: none; }
.fs-mr :is(.fs-mr-print__frame, .fs-mr-shot__btn, .fs-mr-film__still) img { transition: none; }
}
/* ══════════════════════════════════════════════════════════════════
Build 11 (Sept 28, 2026, 1.17.0): the Anyox record page
(partials/mines/anyox.hbs), on the Phoenix page's design (Build 10).
Anyox's own story on it: Hidden Creek named its levels for their height
in feet above the sea, so the page's levels take the mine's names in
order (700 down to minus 360); the rail shows each station's level and a
sea-level line crosses its shaft between the 150 and Zero; a band marks
the same line across the page, and the levels below it are the colour of
deep water. Also new here: the claims register, the blast card, Frank's
lines from the films, the town directory and the historical prints.
══════════════════════════════════════════════════════════════════ */
.fs-mr--sea {
--fs-mr-sea: #172226; /* the levels below the sea */
--fs-mr-sea-raised: #1D2A2E;
--fs-mr-sea-rule: #34494F;
--fs-mr-tide: #2F6F78; /* the sea line on light ground (5.1:1 on cream) */
--fs-mr-tide-dark: #86BDC4; /* the sea line on dark ground */
}
/* ---- Hero: the powerhouse sits right of the fade ---- */
.fs-mr-hero--anyox { --fs-banner-left: 36%; --fs-banner-pos: 60% 50%; --fs-banner-pos-tab: 50% 40%; --fs-banner-phone: 1 / 1; }
/* ---- The rail: each station carries its level; the sea line crosses the shaft ---- */
.fs-mr .fs-mr-railkey { display: flex; justify-content: space-between; box-sizing: border-box; width: 210px; margin: -6px 0 12px; padding-left: 26px; font-weight: 600; font-size: 10.5px; line-height: 1.2; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; }
.fs-mr--sea .fs-mr-stations { width: 210px; }
.fs-mr--sea .fs-mr-st__t { flex: 1 1 auto; min-width: 0; }
.fs-mr--sea .fs-mr-st__yr { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fs-mr-st__lvl { flex: none; font-weight: 600; font-size: 11px; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; opacity: 0.85; }
.fs-mr-railsea { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 210px; margin: 0 0 10px; color: var(--fs-mr-tide); transition: color 0.4s var(--fs-ease); }
.fs-mr-rail.is-dark .fs-mr-railsea { color: var(--fs-mr-tide-dark); }
.fs-mr-railsea__wave { flex: 1 1 auto; height: 8px; overflow: visible; }
.fs-mr-railsea__wave path { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.fs-mr .fs-mr-railsea__t { flex: none; font-weight: 700; font-size: 10.5px; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; }
.fs-mr-stations__sea { display: flex; flex-direction: column; }
/* ---- The level key (top of 1889): a sign like the ones the levels were painted with ---- */
.fs-mr-levelkey { display: flex; align-items: center; gap: 16px; box-sizing: border-box; max-width: 780px; margin: 0 0 22px; padding: 12px 20px 12px 12px; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: 2px; box-shadow: 0 1px 0 var(--fs-border-cream); }
.fs-mr .fs-mr-levelkey__n { flex: none; display: flex; align-items: center; justify-content: center; min-width: 60px; height: 42px; padding: 0 10px; box-sizing: border-box; background: #2A2622; border-radius: 2px; font-weight: 700; font-size: 23px; line-height: 1; letter-spacing: 0.06em; color: var(--fs-bone); }
.fs-mr .fs-mr-levelkey__t { font-size: 15px; line-height: 1.5; color: var(--fs-body-cream-2); text-wrap: pretty; }
/* ---- 1889: the eight claims ---- */
.fs-mr-register { max-width: 900px; }
.fs-mr .fs-mr-register__names { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; margin: 4px 0 2px; }
.fs-mr .fs-mr-register__names li { padding: 11px 0; border-top: 1px solid var(--fs-border-cream); font-family: var(--fs-font-signage); font-weight: 600; font-size: 15.5px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-ink); }
/* ---- 1910: the Phoenix thread ---- */
.fs-mr-thread { margin-top: 14px; }
.fs-mr .fs-mr-thread__go { margin-top: 2px; font-size: 16px; }
/* ---- Historical prints and Frank's lines ---- */
.fs-mr-print__frame--hist { aspect-ratio: 433 / 251; }
.fs-mr-print__frame--miners img { object-position: 50% 42%; } /* the two miners, mid-frame */
.fs-mr-print__frame--shell { aspect-ratio: 16 / 9; }
.fs-mr-voices--works { margin-top: 36px; }
.fs-mr-clip--frank { border-left: 3px solid var(--fs-mr-rust); }
.fs-mr-clip--frank.fs-mr-clip--dark, :is(.fs-mr-lv--sea, .fs-mr-lv--dark) .fs-mr-clip--frank { border-left-color: var(--fs-gold); }
.fs-mr .fs-mr-q--frank p { font-family: var(--fs-font-serif); font-style: italic; font-size: 21px; line-height: 1.45; }
.fs-mr-clip--wide { max-width: 820px; }
.fs-mr .fs-mr-watch { align-self: flex-start; margin: 4px 0 0; }
.fs-mr-directory { gap: 8px; }
.fs-mr .fs-mr-directory .fs-mr-menu__date { font-size: 16px; font-style: italic; color: var(--fs-body-cream-2); }
.fs-mr .fs-mr-directory .fs-mr-menu__list { font-size: 18px; line-height: 1.65; }
.fs-mr-lv--shore > .fs-mr-lv__in { padding-bottom: 80px; }
/* ---- Sea level: a band across the page where the story goes below it ---- */
.fs-mr-sealine { position: relative; background: var(--fs-mr-sea); color: var(--fs-body-dark); }
.fs-mr-sealine__wave { display: block; width: 100%; height: 48px; margin-top: -1px; background: var(--fs-cream); }
.fs-mr-sealine__water { fill: var(--fs-mr-sea); }
.fs-mr-sealine__line { fill: none; stroke: var(--fs-mr-tide-dark); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fs-mr-sealine__in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; box-sizing: border-box; max-width: 1140px; margin: 0 auto; padding: 16px 40px 0; }
.fs-mr .fs-mr-sealine__k { font-weight: 700; font-size: 13px; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fs-mr-tide-dark); }
.fs-mr .fs-mr-sealine__p { font-size: 15.5px; line-height: 1.5; color: var(--fs-body-dark); text-wrap: balance; }
/* ---- The levels below the sea ---- */
.fs-mr-lv--sea { background: var(--fs-mr-sea); color: var(--fs-body-dark); --fs-mr-rule: var(--fs-mr-sea-rule); --fs-mr-ink: var(--fs-bone); }
.fs-mr-sealine + .fs-mr-lv--sea > .fs-mr-lv__in { padding-top: 64px; }
.fs-mr-lv--sea .fs-mr-head__year, .fs-mr-lv--sea .fs-mr-head__kick { color: var(--fs-gold); }
.fs-mr :is(.fs-mr-lv--sea) :is(.fs-mr-src) { color: var(--fs-muted-dark); }
.fs-mr .fs-mr-lv--sea :is(.fs-mr-note, .fs-mr-label__note) { color: var(--fs-body-dark); }
.fs-mr-lv--sea .fs-mr-clip--dark { background: var(--fs-mr-sea-raised); border-color: var(--fs-mr-sea-rule); }
.fs-mr-lv--sea .fs-mr-clip--dark .fs-mr-dl { color: var(--fs-gold); }
.fs-mr-lv--sea .fs-mr-twin__i { border-top-color: var(--fs-mr-sea-rule); }
.fs-mr-lv--sea .fs-mr-print__frame { box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
/* ---- 1934: the blast, as a schoolboy saw it ---- */
.fs-mr-blast { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; padding: 26px 30px 22px; background: var(--fs-mr-sea-raised); border: 1px solid var(--fs-mr-sea-rule); border-radius: 2px; }
.fs-mr .fs-mr-blast__k { color: var(--fs-gold); }
.fs-mr-blast__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-mr-blast__list li { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 28px 8px 0; border-top: 1px solid var(--fs-mr-sea-rule); }
.fs-mr-blast__list li + li { padding-left: 28px; border-left: 1px solid var(--fs-mr-sea-rule); }
.fs-mr .fs-mr-blast__t { font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: 0.04em; color: var(--fs-gold); }
.fs-mr .fs-mr-blast__w { font-size: 16.5px; line-height: 1.5; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-mr .fs-mr-blast .fs-mr-q p { font-size: 22px; line-height: 1.4; color: var(--fs-bone); }
/* ---- Now: Frank, the photo essay of five, the film and its chapters ---- */
.fs-mr-frank { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 8px; }
.fs-mr-frank__photo { display: flex; flex-direction: column; gap: 10px; }
.fs-mr .fs-mr-frank__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; box-shadow: var(--fs-shadow-photo-dark); }
.fs-mr-frank__text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.fs-mr-essay__grid--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fs-mr-essay__grid--five > li { grid-column: span 2; }
.fs-mr-essay__grid--five > li.fs-mr-essay__big { grid-column: span 3; }
.fs-mr .fs-mr-essay__grid--five .fs-mr-shot__btn { aspect-ratio: 4 / 3; }
.fs-mr .fs-mr-essay__grid--five .fs-mr-essay__big .fs-mr-shot__btn { aspect-ratio: 3 / 2; }
.fs-mr-prose--after { margin-top: 30px; }
.fs-mr .fs-mr-film--anyox .fs-mr-film__t { font-size: clamp(27px, 2.6vw, 34px); line-height: 1.1; letter-spacing: 0; text-wrap: balance; }
.fs-mr .fs-mr-film--anyox .fs-mr-film__still { aspect-ratio: 4 / 3; }
.fs-mr .fs-mr-jump { margin-top: 22px; padding-top: 24px; border-top-color: #3A332A; }
.fs-mr .fs-mr-jump .fs-yb-jump__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
/* ---- The ledger: the names still to come ---- */
.fs-mr .fs-mr-lg__names { max-width: 720px; margin-top: 8px; font-size: 16.5px; color: var(--fs-body-dark); }
/* ---- Wide screens with the rail: the sea band's words line up with the levels' ---- */
@media (min-width: 1180px) and (min-height: 600px) {
.fs-mr-sealine__in { max-width: 1440px; margin-left: max(0px, calc((100% - 1565px) / 2)); margin-right: auto; padding: 20px 40px 0 340px; }
.fs-mr-sealine + .fs-mr-lv--sea > .fs-mr-lv__in { padding-top: 72px; }
}
@media (min-width: 1180px) and (max-width: 1439px) and (min-height: 600px) {
.fs-mr .fs-mr-railkey, .fs-mr--sea .fs-mr-stations, .fs-mr-railsea { width: 200px; }
.fs-mr-sealine__in { padding-left: 300px; }
}
/* short screens: the tighter rail (Build 10) with room for eight stations and the sea line */
@media (min-width: 1180px) and (min-height: 600px) and (max-height: 820px) {
.fs-mr .fs-mr-railkey { margin: -4px 0 8px; }
.fs-mr-railsea { margin-bottom: 4px; }
.fs-mr--sea .fs-mr-st { min-height: 30px; }
}
/* ---- Inside a level, by the level's own width ---- */
@container (max-width: 880px) {
.fs-mr-frank { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 26px; }
.fs-mr-essay__grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-mr-essay__grid--five > li, .fs-mr-essay__grid--five > li.fs-mr-essay__big { grid-column: auto; }
.fs-mr-essay__grid--five > li.fs-mr-essay__big, .fs-mr-essay__grid--five > li:last-child { grid-column: 1 / -1; }
}
@container (max-width: 640px) {
.fs-mr .fs-mr-register__names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-mr-blast__list { grid-template-columns: minmax(0, 1fr); }
.fs-mr-blast__list li + li { padding-left: 0; border-left: 0; }
.fs-mr-frank { grid-template-columns: minmax(0, 1fr); }
.fs-mr-frank__photo { max-width: 320px; }
}
/* ---- Phones ---- */
@media (max-width: 699px) {
.fs-mr-levelkey { align-items: flex-start; padding: 12px 14px 12px 12px; gap: 14px; }
.fs-mr .fs-mr-levelkey__n { min-width: 52px; height: 36px; font-size: 20px; }
.fs-mr .fs-mr-levelkey__t { font-size: 14.5px; }
.fs-mr .fs-mr-register__names li { font-size: 14.5px; letter-spacing: 0.12em; }
.fs-mr-sealine__wave { height: 32px; }
.fs-mr-sealine__in { padding: 12px 20px 0; }
.fs-mr .fs-mr-sealine__k { font-size: 12px; }
.fs-mr .fs-mr-sealine__p { font-size: 14.5px; }
.fs-mr-sealine + .fs-mr-lv--sea > .fs-mr-lv__in { padding-top: 40px; }
.fs-mr-blast { padding: 20px 20px 16px; }
.fs-mr .fs-mr-blast__t { font-size: 26px; }
.fs-mr .fs-mr-blast .fs-mr-q p { font-size: 19.5px; }
.fs-mr .fs-mr-q--frank p { font-size: 19px; }
.fs-mr .fs-mr-essay__grid--five li:not(.fs-mr-essay__big) .fs-mr-shot__btn { aspect-ratio: 1 / 1; }
.fs-mr .fs-mr-essay__grid--five li:last-child .fs-mr-shot__btn { aspect-ratio: 4 / 3; }
.fs-mr-lv--shore > .fs-mr-lv__in { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) { .fs-mr-railsea { transition: none; } }
/* the powerhouse's white sky: a deeper shade at the top, so the photo meets the dark banner quietly */
@media (min-width: 1280px) {
.fs-mr-hero--anyox .fs-banner__photo::after { background:
linear-gradient(90deg, var(--fs-dark-deepest) 0%, rgba(13,12,10,0.78) 7%, rgba(13,12,10,0.32) 16%, rgba(13,12,10,0) 24%),
linear-gradient(0deg, rgba(13,12,10,0.7) 0%, rgba(13,12,10,0) 22%),
linear-gradient(180deg, rgba(13,12,10,0.68) 0%, rgba(13,12,10,0.3) 18%, rgba(13,12,10,0) 36%); }
}
@media (max-width: 1279px) {
.fs-mr-hero--anyox .fs-banner__photo::after { background:
linear-gradient(0deg, var(--fs-dark-deepest) 0%, rgba(13,12,10,0.45) 9%, rgba(13,12,10,0) 22%),
linear-gradient(180deg, rgba(13,12,10,0.6) 0%, rgba(13,12,10,0.22) 16%, rgba(13,12,10,0) 32%); }
}
/* Anyox's record band: its numbers run wider than Phoenix's ("6.6 million"), so the columns share the width differently */
.fs-mr--sea .fs-mr-band__stats, .fs-mr--sea .fs-mr-band__facts { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.8fr); }
.fs-mr--sea .fs-mr-band__n { font-size: clamp(24px, 2.2vw, 38px); }
@media (max-width: 1099px) {
.fs-mr--sea .fs-mr-band__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-mr--sea .fs-mr-band__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-mr--sea .fs-mr-band__n { font-size: clamp(22px, 3.2vw, 34px); }
}
@media (max-width: 699px) {
.fs-mr--sea .fs-mr-band__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-mr--sea .fs-mr-band__facts { grid-template-columns: minmax(0, 1fr); }
.fs-mr--sea .fs-mr-band__n { font-size: clamp(18px, 6vw, 30px); }
}
/* ---- Anyox, the town's photographs (UBC Library, Sept 28): one frame for every scan (7:4, within
a few per cent of each crop), a print that stands in a split's side column, and the golf club's
card set in type ---- */
.fs-mr-print__frame--ubc { aspect-ratio: 7 / 4; }
.fs-mr-split__side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.fs-mr-print--side { margin-top: 0; }
.fs-mr-split > .fs-mr-print--side { margin-top: 6px; }
.fs-mr-label--stack .fs-mr-label__note { font-size: 14px; }
.fs-mr-label__note sub { font-size: 0.72em; line-height: 0; }
.fs-mr-rules { gap: 8px; }
.fs-mr-voices .fs-mr-rules { padding: 28px 24px 22px; }
.fs-mr .fs-mr-rules .fs-mr-menu__date { font-size: 16px; font-style: italic; color: var(--fs-body-cream-2); }
.fs-mr-rules__list { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 2px; }
.fs-mr-rules__list li { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fs-mr .fs-mr-rules__n { font-weight: 700; font-size: 10.5px; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mr .fs-mr-rules__q { font-family: var(--fs-mr-q); font-size: 17.5px; line-height: 1.5; color: var(--fs-ink); text-wrap: balance; }
@container (max-width: 880px) {
.fs-mr-split > :is(.fs-mr-split__side, .fs-mr-print--side) { max-width: 640px; }
.fs-mr-split > .fs-mr-print--side { margin-top: 0; }
}
/* ---- Anyox, the town in photographs (the album) and the gallery's prints: an album of seven in a
six-column grid (two, three, two), 3:2 frames that hold prints of any shape well enough; the
postcards and the dam keep their own shapes beside the text ---- */
.fs-mr-print__frame--album { aspect-ratio: 3 / 2; }
.fs-mr-print__frame--card { aspect-ratio: 1600 / 1008; }
.fs-mr-print__frame--dam { aspect-ratio: 1600 / 1236; }
.fs-mr-album__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 22px; }
.fs-mr-album__grid > li { grid-column: span 2; min-width: 0; }
.fs-mr-album__grid > li.fs-mr-album__wide { grid-column: span 3; }
.fs-mr-album .fs-mr-print { margin-top: 0; }
.fs-mr-voices--cards { margin-top: 40px; }
@container (max-width: 880px) {
.fs-mr-album__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.fs-mr-album__grid > li, .fs-mr-album__grid > li.fs-mr-album__wide { grid-column: auto; }
.fs-mr-album__grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container (max-width: 560px) {
.fs-mr-album__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
.fs-mr-print__frame--pano { aspect-ratio: 2000 / 765; }
.fs-mr-print--works { margin-top: 0; }
.fs-mr-print__frame--steam { aspect-ratio: 602 / 997; }
.fs-mr .fs-mr-film__credit { position: absolute; z-index: 1; right: 12px; bottom: 10px; padding: 5px 10px; border-radius: var(--fs-radius); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244,238,226,0.92); background: rgba(13,12,10,0.62); pointer-events: none; }
/* ══════════════════════════════════════════════════════════════════
1.18.0 (Sept 29, 2026): the strip under the film player
(default.hbs #fs-lightbox; fs-site.js section 1). The close button and the
player look as they did. Under the player, the same width, sits one strip:
the film and its record on the left, the letters on the right, the other
films on the page along the bottom. It is never over the film. Where a
screen is too short for all of it, the player gives up some height so the
strip still shows (never narrower than 560px), and anything left over
scrolls inside the dialog. When a YouTube film ends, the end card takes the
player's place and the letters line changes (.is-ended).
══════════════════════════════════════════════════════════════════ */
.fs-lightbox {
--fs-lb-chrome: 290px; /* the close button's row, the strip and the margins */
align-items: flex-start; justify-content: flex-start; /* the stage's auto margins centre it, and let a tall one scroll from its top */
padding: 2vh 4vw; overflow-y: auto; overscroll-behavior: contain;
}
.fs-lightbox:has(.fs-lightbox__steps[hidden]) { --fs-lb-chrome: 244px; }
.fs-lightbox__stage {
position: relative; margin: auto; padding: 46px 0 0; cursor: default; container-type: inline-size;
width: clamp(min(560px, 92vw), (100vh - var(--fs-lb-chrome)) * 16 / 9, min(1100px, 92vw));
}
@supports (height: 100svh) {
.fs-lightbox__stage { width: clamp(min(560px, 92vw), (100svh - var(--fs-lb-chrome)) * 16 / 9, min(1100px, 92vw)); }
}
.fs-lightbox__stage .fs-lightbox__inner { width: 100%; }
/* the strip */
.fs-lightbox__strip {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; align-items: center;
margin-top: 14px; color: var(--fs-body-dark); font-family: var(--fs-font-serif); text-align: left;
}
.fs-lightbox__strip p { margin: 0; }
.fs-lightbox__about { min-width: 0; padding: 4px 0; }
.fs-lightbox__kick { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-gold); }
.fs-lightbox__strip .fs-lightbox__title { margin-top: 6px; font-size: clamp(18px, 2.1cqi, 23px); font-weight: 700; line-height: 1.25; color: var(--fs-bone); text-wrap: balance; }
.fs-lightbox__strip .fs-lightbox__mine { margin-top: 9px; font-size: 15px; line-height: 1.45; color: var(--fs-muted-dark); }
.fs-lightbox__kick[hidden], .fs-lightbox__mine[hidden], .fs-lightbox__steps[hidden], .fs-lightbox__end[hidden] { display: none !important; }
.fs-lightbox__letter {
min-width: 0; padding: 13px 16px 15px;
background: #0F0D0B; border: 1px solid var(--fs-border-dark); border-radius: var(--fs-radius);
transition: border-color 0.4s var(--fs-ease, ease), box-shadow 0.4s var(--fs-ease, ease);
}
.fs-lightbox__strip .fs-lightbox__letter-title { font-family: var(--fs-font-signage); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fs-gold); }
.fs-lightbox__strip .fs-lightbox__letter-text { margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--fs-body-dark); }
.fs-lightbox__letter .fs-newsletter { margin-top: 10px; }
.fs-lightbox__letter .fs-newsletter-form { gap: 8px; align-items: center; }
.fs-lightbox__letter .fs-newsletter-form input[type="email"] { flex-basis: 150px; height: 42px; margin: 0; padding: 0 14px; box-shadow: none; }
.fs-lightbox__letter .fs-newsletter-form .fs-btn { height: 42px; padding: 0 18px; }
.fs-lightbox__letter .fs-newsletter-form__msg, .fs-lightbox__letter .fs-newsletter-form__soon { font-size: 14px; color: var(--fs-body-dark); }
.fs-lightbox__letter .fs-newsletter-form__msg--err { color: #E07A55; } /* rust lifted for the dark panel */
/* the film has ended: the letters panel is the thing to look at now */
.fs-lightbox.is-ended .fs-lightbox__letter { border-color: rgba(201,162,39,0.7); box-shadow: 0 0 0 1px rgba(201,162,39,0.25), 0 10px 36px rgba(201,162,39,0.10); }
/* the other films on the page, along the bottom */
.fs-lightbox__steps {
grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: stretch; gap: 20px;
margin-top: 12px; padding-top: 2px; border-top: 1px solid var(--fs-border-dark);
}
.fs-lightbox .fs-lightbox__step {
display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; max-width: calc(50% - 10px);
margin: 0; padding: 9px 0 3px; border: 0; border-radius: 0; background: none; box-shadow: none;
font-family: var(--fs-font-serif); font-size: 15px; font-weight: 400; line-height: 1.35; letter-spacing: 0; text-transform: none;
color: var(--fs-body-dark); text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.fs-lightbox .fs-lightbox__step--next { margin-left: auto; justify-content: flex-end; text-align: right; }
.fs-lightbox__step-dir { flex: none; font-weight: 700; font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fs-gold); transition: color 0.2s var(--fs-ease, ease); }
.fs-lightbox__step-film { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.2s var(--fs-ease, ease), text-decoration-color 0.2s var(--fs-ease, ease); }
.fs-lightbox .fs-lightbox__step:hover .fs-lightbox__step-film, .fs-lightbox .fs-lightbox__step:focus-visible .fs-lightbox__step-film { color: var(--fs-bone); text-decoration-color: currentColor; }
.fs-lightbox .fs-lightbox__step:hover .fs-lightbox__step-dir { color: var(--fs-gold-hover); }
/* the end card: the film's still, dimmed, with the title and a way to watch again */
.fs-lightbox__end {
position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 24px; text-align: center;
background: #0B0908 center / cover no-repeat;
}
.fs-lightbox__end::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,9,8,0.72), rgba(11,9,8,0.86)); }
.fs-lightbox__end > * { position: relative; }
.fs-lightbox__end p { margin: 0; }
.fs-lightbox__end-kick { font-size: 14px; font-weight: 600; letter-spacing: 3.2px; text-transform: uppercase; color: var(--fs-gold); }
.fs-lightbox__end .fs-lightbox__end-title { max-width: 24ch; margin-bottom: 8px; font-family: var(--fs-font-serif); font-size: clamp(20px, 2.3vw, 30px); font-weight: 700; line-height: 1.2; color: var(--fs-bone); text-wrap: balance; }
.fs-lightbox.is-ended .fs-lightbox__end { animation: fs-fade-in 0.5s var(--fs-ease, ease) both; }
/* narrower players: the two halves sit a little closer */
@media (max-width: 1023px) {
.fs-lightbox__strip { gap: 0 22px; }
}
/* phones: one column, the film first, then the letters, then the other films */
@media (max-width: 767px) {
.fs-lightbox { padding: 12px 4vw 20px; }
.fs-lightbox__strip { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.fs-lightbox__steps { margin-top: 2px; gap: 14px; }
.fs-lightbox .fs-lightbox__step { flex-direction: column; align-items: flex-start; gap: 2px; max-width: calc(50% - 7px); font-size: 14.5px; }
.fs-lightbox .fs-lightbox__step--next { align-items: flex-end; }
.fs-lightbox__step--next .fs-lightbox__step-dir { order: -1; }
.fs-lightbox__step-film { max-width: 100%; }
.fs-lightbox__end { gap: 6px; padding: 14px; }
.fs-lightbox__end-kick { font-size: 12px; }
.fs-lightbox__end .fs-lightbox__end-title { font-size: 17px; margin-bottom: 4px; }
.fs-lightbox__end .fs-yb-btn { padding: 9px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.fs-lightbox.is-ended .fs-lightbox__end { animation: none; }
}
/* ══════════════════════════════════════════════════════════════════
1.18.1 (Sept 29, 2026): the site review. What every page shares:
contrast, the sign-up forms, the safety notice on cream, the
announcement bar, a skip link, the site's own fonts where Saaga's
templates still show, the page-not-found page and the members pages.
══════════════════════════════════════════════════════════════════ */
/* ---- The sign-up forms: Saaga rings every input with a light 1px shadow (a grey outline round the dark
fields) and gives it a bottom margin, so the row stood 15px taller than it looked and the button sat
2px short of the field. The fields keep their own border; the button matches the field's height; the
keyboard gets a soft gold ring. On phones a wrapped button runs the full width. ---- */
.fs-site .fs-newsletter-form input[type="email"] { margin: 0; box-shadow: none; }
.fs-site .fs-newsletter-form input[type="email"]:focus { box-shadow: 0 0 0 3px rgba(201,162,39,0.24); }
.fs-newsletter-form .fs-btn { align-self: stretch; height: auto; }
@media (max-width: 600px) {
.fs-newsletter-form .fs-btn { flex: 1 1 100%; }
.fs-lightbox__letter .fs-newsletter-form .fs-btn { flex: 0 0 auto; }
}
/* ---- The safety notice on the cream pages (the Mines index and the mine tag pages): it was drawn for
dark pages, so on cream its gold title and grey words were hard to read (2.0:1 and 2.3:1), and gold
text on cream is against the house rules. It is the record pages' dark card here too. ---- */
.fs-mn .fs-notice { padding: 28px 32px 26px; background: #1F1A14; border: 1px solid #3A332A; border-radius: 2px; }
.fs-mn .fs-notice p { max-width: 900px; font-size: 15.5px; line-height: 1.65; color: var(--fs-body-dark); }
.fs-mn .fs-notice b { color: var(--fs-bone); }
@media (max-width: 767px) { .fs-mn .fs-notice { padding: 22px 20px 20px; } }
/* ---- The announcement bar: a landmark of its own (partials/announcement-bar.hbs), and readable on
phones (it was 10px) ---- */
.fs-announce-wrap { display: block; margin: 0; }
.fs-announcement__part { display: inline-block; }
@media (max-width: 767px) { .fs-announcement { font-size: 11.5px; letter-spacing: 1px; line-height: 1.5; } }
/* ---- Skip link: the first thing the keyboard reaches; it shows only when focused ---- */
.fs-skip {
position: absolute; z-index: 400; top: 10px; left: 10px; padding: 10px 16px; border-radius: var(--fs-radius);
font-family: var(--fs-font-signage); font-weight: 700; font-size: 14px; letter-spacing: 1.6px; text-transform: uppercase;
color: var(--fs-dark-base); background: var(--fs-gold); transform: translateY(-160%);
}
.fs-skip:focus, .fs-skip:focus-visible { transform: none; outline: 2px solid var(--fs-bone); outline-offset: 2px; color: var(--fs-dark-base); }
#fs-main:focus { outline: none; }
/* ---- Saaga's own templates (a letter's title, the tag pages Saaga still draws, the members pages)
use the site's faces: Saaga's font setting (Sora) is gone (package.json), and so is its web font ---- */
body.fs-site { --font-headings: var(--gh-font-heading, var(--fs-font-serif)); --font-body: var(--gh-font-body, var(--fs-font-serif)); } /* Ghost's own font choice (Design, when set) still reaches them */
/* ---- Page not found (error-404.hbs) and other errors (error.hbs): the shared photo banner ---- */
.fs-err { --fs-banner-left: 38%; --fs-banner-pos: 46% 42%; --fs-banner-pos-tab: 50% 38%; --fs-banner-phone: 4 / 5; }
.fs-err__text { max-width: 560px; }
.fs-err .fs-err__title { margin: 20px 0 0; font-size: clamp(44px, 5.6vw, 84px); line-height: 0.98; font-weight: 700; color: var(--fs-bone); text-shadow: 0 6px 30px rgba(0,0,0,0.5); text-wrap: balance; }
.fs-err__accent { color: var(--fs-gold); }
.fs-err .fs-err__deck { margin-top: 22px; max-width: 460px; font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.6; color: #E6DCC8; }
.fs-err__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.fs-err .fs-err__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; }
.fs-err__links a { font-weight: 600; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-muted-dark); border-bottom: 1.5px solid transparent; transition: color 0.2s var(--fs-ease, ease), border-color 0.2s var(--fs-ease, ease); }
.fs-err__links a:hover, .fs-err__links a:focus-visible { color: var(--fs-gold); border-bottom-color: currentColor; }
.fs-err__code { color: var(--fs-muted-dark); }
@media (max-width: 767px) {
.fs-err__actions .fs-yb-btn { flex: 1 1 100%; }
.fs-err .fs-banner__credit { top: 12px; bottom: auto; } /* the sign line rises over the photo's foot */
}
/* ---- The members pages (signup.hbs, signin.hbs): the site's page, its words and its form ---- */
.fs-mb { padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 9vw, 120px); background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,162,39,0.08), rgba(201,162,39,0) 70%), var(--fs-dark-base); }
.fs-mb__card { max-width: 560px; margin: 0 auto; padding: clamp(28px, 4vw, 44px); text-align: center; background: #16120E; border: 1px solid var(--fs-border-dark); border-radius: 2px; box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.fs-mb .fs-mb__title { margin: 14px 0 0; font-family: var(--fs-font-serif); font-size: clamp(32px, 4vw, 44px); line-height: 1.1; font-weight: 700; color: var(--fs-bone); text-wrap: balance; }
.fs-mb .fs-mb__deck { margin: 14px auto 0; max-width: 430px; font-size: 17px; line-height: 1.6; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-mb__form { margin-top: 26px; text-align: left; }
.fs-mb .fs-mb__small { margin-top: 18px; font-size: 14.5px; line-height: 1.6; color: var(--fs-muted-dark); }
.fs-mb .fs-mb__small a { color: var(--fs-gold); font-weight: 700; }
.fs-mb .fs-mb__small a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ---- Ghost's notices after a sign-up or sign-in (?action=…&success=…): below the header, never over its
links; on phones they span the top of the screen ---- */
.fs-site .notification { top: 134px; right: 20px; max-width: min(420px, calc(100vw - 40px)); background: #16120E; border: 1px solid rgba(201,162,39,0.55); box-shadow: 0 18px 50px rgba(0,0,0,0.5); color: var(--fs-bone); }
.fs-site .notification .notification-msg { font-family: var(--fs-font-serif); color: var(--fs-bone); }
@media (max-width: 767px) { .fs-site .notification { top: 132px; left: 12px; right: 12px; max-width: none; } }
/* ══════════════════════════════════════════════════════════════════
1.18.2 (Sept 29, 2026): the letters beside the Films page's short
films, the "Unsubscribe anytime." notes, and Close buttons that say
hello when a lightbox opens.
══════════════════════════════════════════════════════════════════ */
/* ---- The Films page: the letters beside the short films (page-films.hbs). Dressed like the channel card
(Frank's badge in its gold ring, the kicker, the serif title), on a quiet panel. Its foot lines up with
UNDERMINE's credits when the column has room (the column stretches with its row, the panel sits at its
foot); narrower, the form runs the panel's full width ---- */
.fs-fm-shorts__col { display: flex; flex-direction: column; min-width: 0; }
.fs-fm-shorts__col > .fs-fm-poster { margin-bottom: 30px; }
.fs-fm-letters {
display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "badge body" "badge form";
column-gap: 24px; align-items: start; margin-top: auto; padding: 24px 26px 22px;
background: linear-gradient(180deg, rgba(201,162,39,0.06), rgba(201,162,39,0) 55%), #15110D;
border: 1px solid var(--fs-border-dark); border-radius: 2px;
}
.fs-fm-letters__badge { grid-area: badge; display: block; width: 88px; height: 88px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(201,162,39,0.4), 0 0 0 7px rgba(201,162,39,0.07), 0 14px 36px rgba(0,0,0,0.55); }
.fs-fm-letters__body { grid-area: body; min-width: 0; }
.fs-fm .fs-fm-letters .fs-kick { font-size: 12.5px; letter-spacing: 2.4px; }
.fs-fm .fs-fm-letters__title { margin-top: 6px; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.15; font-weight: 700; color: var(--fs-bone); text-wrap: balance; }
.fs-fm .fs-fm-letters__line { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--fs-body-dark); }
.fs-fm-letters__form { grid-area: form; min-width: 0; margin-top: 16px; }
.fs-fm-letters__form .fs-newsletter-form input[type="email"] { flex-basis: 180px; }
.fs-fm .fs-fm-letters__note { margin-top: 10px; font-size: 13.5px; color: var(--fs-muted-dark); }
@media (max-width: 1100px) {
.fs-fm-letters { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "badge body" "form form"; column-gap: 18px; padding: 22px 20px 20px; }
.fs-fm-letters__badge { width: 64px; height: 64px; box-shadow: 0 0 0 1px rgba(201,162,39,0.4), 0 0 0 5px rgba(201,162,39,0.07), 0 10px 26px rgba(0,0,0,0.5); }
.fs-fm-letters__body { align-self: center; }
}
/* ---- The small note under the sign-up page's form ---- */
.fs-mb .fs-mb__note { margin-top: 12px; font-size: 13.5px; color: var(--fs-muted-dark); }
/* ---- Every lightbox's Close button says hello as the box opens: it drops into place, then a gold ring pulses
out from it twice, so the way back to the site is seen before anyone reaches for YouTube's own links. With
reduced motion it is simply there. ---- */
.fs-lightbox__close::after, .fs-photobox__close::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none; }
.fs-lightbox.is-open .fs-lightbox__close, .fs-photobox.is-open .fs-photobox__close { animation: fs-close-in 0.45s var(--fs-ease-out, ease-out) 0.3s backwards; }
.fs-lightbox.is-open .fs-lightbox__close::after, .fs-photobox.is-open .fs-photobox__close::after { animation: fs-close-ping 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 2; }
@keyframes fs-close-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes fs-close-ping { 0% { box-shadow: 0 0 0 0 rgba(201,162,39,0.85); } 75%, 100% { box-shadow: 0 0 0 16px rgba(201,162,39,0); } }
@media (prefers-reduced-motion: reduce) {
.fs-lightbox.is-open .fs-lightbox__close, .fs-photobox.is-open .fs-photobox__close,
.fs-lightbox.is-open .fs-lightbox__close::after, .fs-photobox.is-open .fs-photobox__close::after { animation: none; }
}
/* ══════════════════════════════════════════════════════════════════
1.18.3 (Oct 18, 2026): the contact form sends, through FormSubmit,
straight to Frank's inbox. The file list's running total and Remove
buttons, the Send button while it sends, and the card that says the
message is on its way.
══════════════════════════════════════════════════════════════════ */
.fs-ct-form[hidden], .fs-ct-sent[hidden] { display: none; }
/* ---- The file list: each file with its size and a Remove button, then the total against 10 MB ---- */
.fs-ct .fs-droplist .fs-fitem { flex-wrap: wrap; row-gap: 2px; background: #fff; }
.fs-ct .fs-droplist .fs-fitem b { min-width: 0; overflow-wrap: anywhere; }
.fs-ct .fs-droplist .fs-fitem .fs-fitem__size { color: var(--fs-muted-cream); font-variant-numeric: tabular-nums; }
.fs-fitem__x {
-webkit-appearance: none; appearance: none; margin: -6px -6px -6px 2px; padding: 6px 8px; min-height: 32px;
font: 600 12px/1 var(--fs-font-signage); letter-spacing: 1.4px; text-transform: uppercase;
color: var(--fs-red); background: none; border: 0; border-radius: var(--fs-radius); cursor: pointer;
}
.fs-fitem__x:hover { text-decoration: underline; text-underline-offset: 3px; }
.fs-site .fs-ct-write .fs-fitem__x:focus-visible { outline: 2px solid var(--fs-ink); outline-offset: 1px; }
.fs-ct .fs-droplist__total { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fs-muted-cream); }
.fs-ct .fs-droplist__total.is-over { color: var(--fs-red); }
/* ---- Send, while the message goes ---- */
.fs-ct-send__btn[disabled] { cursor: progress; opacity: 0.75; }
/* ---- Sent: the card takes the form's place (the form's white panel with a gold head rule; the
page's kicker; a serif title; one plain line; a way back to the form) ---- */
.fs-ct-sent {
padding: clamp(32px, 4vw, 56px) clamp(24px, 3.4vw, 48px); background: #FFFDF8;
border: 1px solid var(--fs-border-cream); border-top: 3px solid var(--fs-gold); border-radius: 3px;
box-shadow: 0 1px 0 rgba(43,35,23,0.06), 0 22px 50px rgba(43,35,23,0.10); scroll-margin-top: 140px;
}
/* The script puts the focus on the card so a screen reader starts there; there is nothing on it to operate
but its button (which keeps its own focus ring), so the card itself draws no ring */
.fs-site .fs-ct-sent:focus, .fs-site .fs-ct-sent:focus-visible { outline: none; }
.fs-ct .fs-ct-sent__title { margin-top: 10px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 700; color: var(--fs-ink); text-wrap: balance; }
.fs-ct .fs-ct-sent__p { margin-top: 14px; font-size: 17.5px; line-height: 1.6; color: var(--fs-body-cream-2); }
.fs-ct-sent__again { margin-top: 26px; }
@media (max-width: 480px) { .fs-ct-sent__again { width: 100%; justify-content: center; } }
/* ══════════════════════════════════════════════════════════════════
1.18.5 (Oct 18, 2026): the thank-you page (/thank-you/, thank-you.hbs),
where the contact form sends people once their message has gone: the
thanks, Frank's newest film (the Yankee Boy page's film block) and the
letters sign-up (the shared closing band).
══════════════════════════════════════════════════════════════════ */
.fs-ty-hero { background: var(--fs-dark-base); padding: clamp(64px, 9vw, 116px) 0 clamp(44px, 6vw, 70px); text-align: center; border-bottom: 1px solid var(--fs-border-dark); }
.fs-ty-hero__inner { display: flex; flex-direction: column; align-items: center; }
.fs-yb .fs-ty-hero__title { margin: 18px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(38px, 5.2vw, 66px); line-height: 1.06; color: var(--fs-bone); text-wrap: balance; }
.fs-yb .fs-ty-hero__deck { margin-top: 18px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: #DDD3BE; text-wrap: balance; }
.fs-yb .fs-ty-hero__more { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--fs-muted-dark); text-wrap: balance; }
/* ---- The poster: Frank's photograph with the site's play button and a corner credit ---- */
.fs-ty .fs-yb-film__thumb { position: relative; }
.fs-ty .fs-yb-film__thumb .fs-h3-play { width: 72px; height: 72px; }
.fs-ty .fs-yb-film__thumb .fs-h3-play__tri { margin-left: 6px; border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
.fs-ty .fs-yb-film__thumb:hover .fs-h3-play, .fs-ty .fs-yb-film__thumb:focus-visible .fs-h3-play { background: rgba(13,12,10,0.85); transform: translate(-50%, -50%) scale(var(--fs-zoom-play, 1.06)); }
.fs-ty-film__credit {
position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: var(--fs-radius);
font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(244,238,226,0.9); background: rgba(13,12,10,0.7);
}
@media (prefers-reduced-motion: reduce) {
.fs-ty .fs-yb-film__thumb:hover .fs-h3-play, .fs-ty .fs-yb-film__thumb:focus-visible .fs-h3-play { transform: translate(-50%, -50%); }
}
/* ══════════════════════════════════════════════════════════════════
1.18.7 (Oct 18, 2026): the Contact page's print beside the form.
Under the three notes, Frank on a baby woolly mammoth (Colleen's
pick), dressed like the About page's pinned prints; the notes' column
stretches with the form and the print sits at its foot, so the two
end level, and it follows the form down when files are listed. Below
1101px the form comes after the notes and the print isn't shown.
══════════════════════════════════════════════════════════════════ */
.fs-ct-print { display: none; }
@media (min-width: 1101px) {
.fs-ct-write__aside { align-self: stretch; display: flex; flex-direction: column; }
.fs-ct .fs-ct-print { display: block; width: 100%; max-width: clamp(380px, 31vw, 520px); margin: auto 0 0; padding-top: 28px; }
.fs-ct-print img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 8px solid var(--fs-panel); border-radius: 1px; box-shadow: 0 10px 28px rgba(43,35,23,0.25); }
.fs-ct .fs-ct-print figcaption { padding-top: 10px; font-family: var(--fs-font-serif); font-style: italic; font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--fs-body-cream-2); }
}
/* ══════════════════════════════════════════════════════════════════
Build 12 (Oct 20, 2026, 1.19.0): the Yankee Boy record page
(partials/mines/yankee-boy.hbs), on the Phoenix page's design (Build 10)
with Anyox's rail (Build 11). The Yankee Boy's own story on it: the old
plans give each level's height to the foot and Frank still calls the levels
by those heights, so the rail carries them beside the years (.fs-mr--yb,
the same three station rules as .fs-mr--sea). New here: "Frank and the
Record" (.fs-mr-pairs), his lines from the film beside the province's
reports, as a grid of cards after the Now level.
══════════════════════════════════════════════════════════════════ */
/* ---- Hero: Frank and the ore car sit right of the fade, the portal behind them ---- */
.fs-mr-hero--yb { --fs-banner-left: 36%; --fs-banner-pos: 56% 42%; --fs-banner-pos-tab: 52% 4%; --fs-banner-phone: 1 / 1; }
/* ---- The rail: each station carries the level's height, as Anyox's does ---- */
.fs-mr--yb .fs-mr-stations { width: 210px; }
.fs-mr--yb .fs-mr-st__t { flex: 1 1 auto; min-width: 0; }
.fs-mr--yb .fs-mr-st__yr { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
@media (min-width: 1180px) and (max-width: 1439px) and (min-height: 600px) { .fs-mr--yb .fs-mr-stations { width: 200px; } }
/* ---- 1899: three claims, not eight. At every width the strip ends where the story's column ends:
700px when the side boxes sit under the story (.fs-mr-prose's own limit), and beside them the
story's grid column (the split's side is 360px with a 44px gap), so it no longer runs under the
boxes (Colleen, October 21, 1.19.12) ---- */
.fs-mr--yb .fs-mr-register { max-width: 700px; }
@container (min-width: 881px) { .fs-mr--yb .fs-mr-register { max-width: calc(100cqi - 404px); } }
.fs-mr--yb .fs-mr-register__names { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ---- Now: the lead photograph keeps Frank's head in its wide crop; the film still is 3:2 ---- */
.fs-mr.fs-mr--yb .fs-mr-shot--lead .fs-mr-shot__btn { aspect-ratio: 1060 / 600; }
.fs-mr.fs-mr--yb .fs-mr-shot--lead img { object-position: 50% 55%; }
.fs-mr .fs-mr-film--yb .fs-mr-film__still { aspect-ratio: 3 / 2; }
@media (max-width: 699px) { .fs-mr.fs-mr--yb .fs-mr-shot--lead .fs-mr-shot__btn { aspect-ratio: 3 / 2; } }
/* ---- Frank and the record: his lines beside the province's ---- */
.fs-mr .fs-mr-pairs__intro { max-width: 640px; }
.fs-mr .fs-mr-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 10px 0 0; padding: 0; list-style: none; }
.fs-mr-pair { display: flex; flex-direction: column; gap: 10px; min-width: 0; box-sizing: border-box; padding: 20px 24px 18px; background: #1F1A14; border: 1px solid #3A332A; border-top: 3px solid #C9A227; border-radius: 2px; }
.fs-mr .fs-mr-pair__tag { margin: 0; font-weight: 700; font-size: 10.5px; line-height: 1.3; letter-spacing: 0.22em; text-transform: uppercase; color: #C9A227; }
.fs-mr .fs-mr-pair__t { margin: 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: 21px; line-height: 1.2; color: #F4EEE2; text-wrap: balance; }
.fs-mr .fs-mr-pair__q { margin: 2px 0 0; padding: 0 0 0 14px; border-left: 3px solid #C9A227; }
.fs-mr .fs-mr-pair__q p { margin: 0; font-family: var(--fs-mr-q); font-style: italic; font-size: 18.5px; line-height: 1.45; color: #F4EEE2; text-wrap: pretty; }
.fs-mr .fs-mr-pair__r { margin: 0; font-size: 16px; line-height: 1.55; color: #D9CFBA; text-wrap: pretty; }
.fs-mr .fs-mr-pair > .fs-mr-src { margin-top: auto; padding-top: 6px; }
@container (max-width: 880px) { .fs-mr .fs-mr-pairs { grid-template-columns: minmax(0, 1fr); } }
/* ---- Places held for photographs still to come ---- */
.fs-mr .fs-mr-slot { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; box-sizing: border-box; width: 100%; padding: 18px 20px; background: repeating-linear-gradient(135deg, #EDE6D6 0 14px, #E4DCCA 14px 28px); border: 1px dashed #8C7A55; color: #3B362F; text-align: center; cursor: default; box-shadow: none; }
.fs-mr .fs-mr-print__frame.fs-mr-slot { aspect-ratio: 1600 / 1008; }
.fs-mr .fs-mr-slot--dark { background: repeating-linear-gradient(135deg, #1F1A14 0 14px, #262017 14px 28px); border-color: #5C5142; color: #D9CFBA; }
.fs-mr .fs-mr-slot__k { margin: 0; font-weight: 700; font-size: 10.5px; line-height: 1.3; letter-spacing: 0.22em; text-transform: uppercase; color: #6E5B22; }
.fs-mr .fs-mr-slot--dark .fs-mr-slot__k { color: #C9A227; }
.fs-mr .fs-mr-slot__t { margin: 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: 17px; line-height: 1.3; text-wrap: balance; }
.fs-mr .fs-mr-slot__n { margin: 0; max-width: 300px; font-size: 13.5px; line-height: 1.5; color: #5C5142; text-wrap: pretty; }
.fs-mr .fs-mr-essay__grid li:not(.fs-mr-essay__big) .fs-mr-slot__t { font-size: 14.5px; }
/* ---- 2021: the same drift, before and after ----
Without the script the two photographs sit side by side. With it (fs-site.js, the
before-and-after section) they share one 3:2 frame: the rebuilt drift is drawn over the
old one from a gold line the reader drags with a pointer or a finger; the arrow keys move
it from a hidden slider, which screen readers announce. */
.fs-mr-ba { display: flex; flex-direction: column; margin: 6px 0 0; }
.fs-mr-ba__frame { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fs-mr .fs-mr-ba__img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; box-shadow: none; }
.fs-mr-ba__line, .fs-mr-ba__knob { display: none; }
.fs-mr .fs-mr-ba__range { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; }
.fs-mr-ba.is-live .fs-mr-ba__frame { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #1F1A14; box-shadow: 0 1px 0 #5C5142, 0 16px 40px rgba(0,0,0,0.45); cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.fs-mr .fs-mr-ba.is-live .fs-mr-ba__img { position: absolute; inset: 0; height: 100%; }
.fs-mr-ba.is-live .fs-mr-ba__img--after { clip-path: inset(0 0 0 var(--ba, 50%)); }
.fs-mr-ba.is-live .fs-mr-ba__line { display: block; position: absolute; top: 0; bottom: 0; left: var(--ba, 50%); width: 2px; margin-left: -1px; background: var(--fs-gold); box-shadow: 0 0 0 1px rgba(13,12,10,0.3); pointer-events: none; }
.fs-mr-ba.is-live .fs-mr-ba__knob { display: flex; position: absolute; top: 50%; left: var(--ba, 50%); width: 52px; height: 52px; margin: -26px 0 0 -26px; align-items: center; justify-content: center; border-radius: 50%; background: var(--fs-gold); color: #131110; box-shadow: 0 4px 16px rgba(0,0,0,0.5); pointer-events: none; transition: transform 0.2s var(--fs-ease); }
.fs-mr-ba.is-dragging .fs-mr-ba__knob { transform: scale(1.06); }
.fs-mr-ba__range:focus-visible ~ .fs-mr-ba__knob { outline: 2px solid var(--fs-bone); outline-offset: 3px; }
.fs-mr .fs-mr-ba__tag { position: absolute; top: 14px; z-index: 1; padding: 7px 10px 6px; background: rgba(13,12,10,0.74); color: var(--fs-bone); font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; pointer-events: none; }
.fs-mr-ba__tag--before { left: 14px; }
.fs-mr-ba__tag--after { right: 14px; }
@media (max-width: 699px) {
.fs-mr-ba.is-live .fs-mr-ba__knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.fs-mr .fs-mr-ba__tag { top: 10px; padding: 6px 8px 5px; font-size: 10px; letter-spacing: 0.16em; }
.fs-mr-ba__tag--before { left: 10px; }
.fs-mr-ba__tag--after { right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .fs-mr-ba.is-live .fs-mr-ba__knob { transition: none; } }
/* ---- 2021: the rebuild in figures (the ledger's totals, larger, in gold) ---- */
.fs-mr .fs-mr-feat { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 6px; border-top-color: #5C5142; }
.fs-mr .fs-mr-feat .fs-mr-lg__tn { font-size: clamp(30px, 3.3vw, 46px); color: var(--fs-gold); }
.fs-mr .fs-mr-feat .fs-mr-lg__tl { color: var(--fs-body-dark); }
@media (max-width: 699px) {
.fs-mr .fs-mr-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-mr .fs-mr-feat li:first-child { grid-column: auto; }
}
/* ---- 1934: the crew print, at its own shape (no one cropped) ---- */
.fs-mr-print__frame--crew { aspect-ratio: 1779 / 1040; }
/* ---- 1899: an invitation to the letters, in the side column (the sign-up form inside it) ---- */
.fs-mr-letter { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; padding: 24px 28px 26px; background: #1F1A14; border-top: 3px solid var(--fs-gold); border-radius: 2px; box-shadow: 0 8px 24px rgba(43,35,23,0.18); color: var(--fs-body-dark); }
.fs-mr .fs-mr-letter .fs-mr-dl { color: var(--fs-gold); }
.fs-mr .fs-mr-letter__t { margin: 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: 23px; line-height: 1.2; color: var(--fs-bone); text-wrap: balance; }
.fs-mr .fs-mr-letter__p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-mr-letter .fs-newsletter { margin-top: 4px; }
.fs-mr-letter .fs-newsletter-form { flex-direction: column; align-items: stretch; gap: 8px; }
.fs-mr-letter .fs-newsletter-form input[type="email"] { flex: none; width: 100%; box-sizing: border-box; }
.fs-mr-letter .fs-newsletter-form .fs-newsletter-form__msg { color: var(--fs-body-dark); }
/* ---- Little-known facts: side-column boxes on the levels (bronze on cream, gold on dark) ---- */
.fs-mr-tidbit { display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; padding: 22px 26px 20px; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-top: 3px solid var(--fs-bronze); border-radius: 2px; box-shadow: 0 8px 24px rgba(43,35,23,0.08); color: var(--fs-body-cream); }
.fs-mr .fs-mr-tidbit .fs-mr-dl { color: var(--fs-bronze); }
.fs-mr .fs-mr-tidbit__t { margin: 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: 20px; line-height: 1.22; color: var(--fs-mr-ink, var(--fs-ink)); text-wrap: balance; }
.fs-mr .fs-mr-tidbit__p { margin: 0; font-size: 16px; line-height: 1.58; text-wrap: pretty; }
.fs-mr :is(.fs-mr-lv--pit, .fs-mr-lv--dark) .fs-mr-tidbit { background: #1F1A14; border-color: #3A332A; border-top-color: var(--fs-gold); box-shadow: none; color: var(--fs-body-dark); }
.fs-mr :is(.fs-mr-lv--pit, .fs-mr-lv--dark) .fs-mr-tidbit .fs-mr-dl { color: var(--fs-gold); }
/* ---- Frank and the record: Frank in the old timbers, a wide print; on phones a
taller crop that keeps him near the middle ---- */
.fs-mr-print__frame--found { aspect-ratio: 1600 / 904; }
.fs-mr .fs-mr-print--found { margin-top: 0; }
.fs-mr .fs-mr-lv--raised .fs-mr-label__note { color: var(--fs-body-dark); }
@media (max-width: 699px) {
.fs-mr .fs-mr-print__frame--found { aspect-ratio: 4 / 3; }
.fs-mr .fs-mr-print__frame--found img { object-position: 54% 50%; }
}
/* ---- A little-known fact as a wide card under a level (the Phoenix Thread's form) ---- */
.fs-mr-cup--fact { margin-top: 14px; }
/* ---- 1937: Frank's blacksmith shop, two upright photographs with a line of explanation ---- */
.fs-mr .fs-mr-essay__lede { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-mr .fs-mr-essay--smith .fs-mr-essay__big .fs-mr-shot__btn { aspect-ratio: 4 / 5; }
/* ---- 1.19.5: each photograph is a (WebP first, JPEG fallback); the wrapper takes no box of its own ---- */
picture.fs-pic { display: contents; }
/* ---- 1.19.9: the Yankee Boy Story page (page-yankee-boy-story.hbs) ----
The letters card in chapter II's side column (the record page's card, .fs-mr-letter), and
"The Yankee Boy Record", a section after the story that leads to the mine record. */
.fs-yb .fs-yb-ch__side { grid-column: 3; grid-row: 1; justify-self: start; align-self: start; width: 100%; max-width: 300px; margin: 64px 0 0; }
.fs-yb .fs-mr-letter .fs-mr-dl { margin: 0; font-family: var(--fs-font-signage); font-weight: 700; font-size: 11.5px; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-gold); }
.fs-yb .fs-mr-letter__t { margin: 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: 23px; line-height: 1.2; color: var(--fs-bone); text-wrap: balance; }
.fs-yb .fs-mr-letter__p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-yb-history { background: var(--fs-dark-deepest); color: var(--fs-body-dark); padding: 84px 0; border-top: 3px solid var(--fs-gold); }
.fs-yb-history__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.fs-yb .fs-yb-history__photo { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.fs-yb .fs-yb-history__photo img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
.fs-yb .fs-yb-history__cap { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-yb .fs-yb-history__title { margin: 8px 0 0; font-family: var(--fs-font-serif); font-size: clamp(32px, 3.4vw, 44px); line-height: 1.12; font-weight: 700; color: var(--fs-bone); text-wrap: balance; }
.fs-yb .fs-yb-history__p { margin: 18px 0 0; max-width: 560px; font-size: 18px; line-height: 1.7; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-yb .fs-yb-history__facts { display: flex; flex-wrap: wrap; gap: 18px 34px; margin: 26px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid #3A332A; }
.fs-yb .fs-yb-history__facts li { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.fs-yb .fs-yb-history__n { font-family: var(--fs-font-signage); font-weight: 700; font-size: 30px; line-height: 1; color: var(--fs-gold); }
.fs-yb .fs-yb-history__l { font-family: var(--fs-font-signage); font-weight: 600; font-size: 11.5px; line-height: 1.3; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-body-dark); }
.fs-yb .fs-yb-history__go { margin: 30px 0 0; }
@media (max-width: 1180px) { .fs-yb .fs-yb-ch__side { grid-column: 2; grid-row: auto; max-width: 420px; margin: 30px 0 30px; } }
@media (max-width: 915px) {
.fs-yb-history { padding: 60px 0; }
.fs-yb-history__in { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
/* ---- The level bar's menu (October 21, 2026, 1.19.15): wherever the rail folds into the level
bar (phones, tablets, short screens), "Levels" at the bar's right end opens the rail's list
under the bar: the levels with their years and elevations, then the sections after them. The
whole bar is the button's tap area (its ::after covers the bar). On phones the list is a sheet
the width of the screen; from 768px a dropdown under the button. On the narrowest phones the
button shows only its arrow, so the level's name keeps its room. The list is opaque (a
translucent one let the page show through under the bar's blur). yb_jump.js opens and closes it. ---- */
.fs-mr-lvbar__t { flex: 1 1 auto; }
.fs-mr-lvbar__menu { flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 13px; border: 1px solid rgba(124,111,95,0.45); border-radius: 2px; background: transparent; color: var(--fs-ink); font-weight: 700; font-size: 11.5px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fs-mr-lvbar__menu::after { content: ""; position: absolute; inset: 0; }
.fs-mr-lvbar__menu svg { flex: none; transition: transform 0.2s var(--fs-ease); }
.fs-mr-lvbar__menu[aria-expanded="true"] svg { transform: rotate(180deg); }
.fs-mr-lvbar:hover .fs-mr-lvbar__menu { border-color: currentColor; }
.fs-mr-lvbar__menu:focus-visible { outline: 2px solid var(--fs-gold); outline-offset: 2px; }
.fs-mr-lvbar.is-dark .fs-mr-lvbar__menu { color: var(--fs-bone); border-color: rgba(232,222,204,0.35); }
.fs-mr-lvbar__menu[hidden], .fs-mr-lvmenu[hidden] { display: none; }
.fs-mr-lvmenu { position: absolute; left: 0; right: 0; top: calc(100% + 1px); box-sizing: border-box; margin: 0; max-height: calc(100vh - var(--fs-mr-top) - 76px); max-height: calc(100dvh - var(--fs-mr-top) - 76px); overflow-y: auto; overscroll-behavior: contain; padding: 14px max(40px, calc((100% - 1060px) / 2)) 22px; background: #F5EFE3; color: var(--fs-ink); border-bottom: 1px solid var(--fs-border-cream); box-shadow: 0 16px 30px rgba(43,35,23,0.18); }
.fs-mr-lvbar.is-dark .fs-mr-lvmenu { background: #161310; color: var(--fs-bone); border-bottom-color: #3A332A; box-shadow: 0 16px 30px rgba(0,0,0,0.5); }
.fs-mr .fs-mr-lvmenu__k { display: flex; justify-content: space-between; max-width: 560px; margin: 0 0 6px; padding-left: 26px; font-weight: 600; font-size: 10.5px; line-height: 1.2; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; }
.fs-mr-lvmenu__list, .fs-mr-lvmenu__below { list-style: none; margin: 0; padding: 0; max-width: 560px; }
.fs-mr .fs-mr-lvmenu a { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 4px 0; border-top: 1px solid rgba(124,111,95,0.22); color: inherit; text-decoration: none; opacity: 0.72; }
.fs-mr .fs-mr-lvmenu a:hover, .fs-mr .fs-mr-lvmenu a:focus-visible { opacity: 1; color: inherit; }
.fs-mr .fs-mr-lvmenu a.is-on { opacity: 1; }
.fs-mr-lvmenu__dot { flex: none; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; }
.fs-mr-lvmenu a.is-on .fs-mr-lvmenu__dot { background: var(--fs-red); border-color: var(--fs-red); }
.fs-mr-lvbar.is-dark .fs-mr-lvmenu a.is-on .fs-mr-lvmenu__dot { background: var(--fs-gold); border-color: var(--fs-gold); }
.fs-mr-lvmenu__yr { flex: none; width: 44px; font-weight: 700; font-size: 12px; line-height: 1.25; letter-spacing: 0.16em; text-transform: uppercase; }
.fs-mr-lvmenu__lb { flex: 1 1 auto; min-width: 0; font-family: var(--fs-font-serif); font-size: 16px; line-height: 1.3; }
.fs-mr-lvmenu a.is-on .fs-mr-lvmenu__lb { font-weight: 700; }
.fs-mr-lvmenu__lvl { flex: none; font-weight: 600; font-size: 11.5px; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; opacity: 0.85; }
.fs-mr-lvmenu__below { margin-top: 12px; padding-top: 6px; border-top: 1px solid rgba(124,111,95,0.35); }
.fs-mr .fs-mr-lvmenu__below a { font-family: var(--fs-font-serif); font-size: 15.5px; border-top: 0; }
.fs-mr-lvmenu__sq { flex: none; width: 12px; height: 2px; background: currentColor; }
.fs-mr-lvmenu__below a.is-on .fs-mr-lvmenu__sq { height: 3px; background: var(--fs-red); }
.fs-mr-lvbar.is-dark .fs-mr-lvmenu__below a.is-on .fs-mr-lvmenu__sq { background: var(--fs-gold); }
@media (min-width: 768px) {
/* tablets and short screens: a dropdown under the button, its right edge on the button's */
.fs-mr-lvmenu { left: auto; right: max(40px, calc((100% - 1060px) / 2)); width: 440px; padding: 14px 24px 20px; border: 1px solid var(--fs-border-cream); border-top: 0; }
.fs-mr-lvbar.is-dark .fs-mr-lvmenu { border-color: #3A332A; }
}
@media (max-width: 767px) {
.fs-mr-lvbar__menu { height: 36px; padding: 0 10px; gap: 6px; font-size: 11px; letter-spacing: 0.12em; }
.fs-mr-lvmenu { padding: 10px 20px 18px; max-height: calc(100vh - var(--fs-mr-top) - 68px); max-height: calc(100dvh - var(--fs-mr-top) - 68px); }
}
@media (max-width: 389px) {
.fs-mr-lvbar__menu { width: 36px; padding: 0; }
.fs-mr-lvbar__menu-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .fs-mr-lvbar__menu svg { transition: none; } }
/* ══════════════════════════════════════════════════════════════════
1.19.18 (Oct 25, 2026) · The active-page line
Colleen, with a screenshot of the Mines page: "We need an active page
line for navigation, please". The gold line under the menu word now
marks the section the reader is in, on every page of it. Before, only
Home, About, Films, Contact and the Yankee Boy Story had one; Letters
and Mines had none, on their own pages or below them.
══════════════════════════════════════════════════════════════════ */
/* ---- Which link is "here": one list, from Ghost's own {{body_class}} ----
Home home-template
Letters page-letters (the archive), tag-hash-letter (each letter)
About page-about
Mines page-mines (the index), tag-hash-mine (every mine record,
the Yankee Boy record included), and the region, camp and
metal pages (a tag page carrying the Mines listing, .fs-mn--tag)
Map page-mines-map (the map, /mines/map/) and page-send-a-position
(the position form, which belongs to the map) (1.22.6)
In Memory page-in-memory (the memorial), page-tell-us-about-him (the
family page that belongs to it) (1.21.3)
Films page-films
Yankee Boy page-yankee-boy-story (the Story page; /mines/yankee-boy/ is a
mine record, so there the line is under Mines)
Contact page-contact
The thank-you page and the 404 are in no section and mark nothing.
The list sets --fs-nav-here: 1. The header's line, the phone menu's bar
and aria-current (fs-site.js, 2c) all read that one flag, so a new
section is one more line here and nothing else. */
body.home-template .fs-nav__link--home,
body.page-letters .fs-nav__link--letters,
body.tag-hash-letter .fs-nav__link--letters,
body.page-about .fs-nav__link--about,
body.page-mines .fs-nav__link--mines,
body.tag-hash-mine .fs-nav__link--mines,
body.tag-template:has(.fs-mn--tag:not(.fs-rd)) .fs-nav__link--mines,
body.tag-template:has(.fs-rd) .fs-nav__link--map, /* a reader's page (1.24.10): their finds live on the map */
body.tag-template:has(.fs-jn--tag) .fs-nav__link--journal, /* a Journal tag's page (1.25.0): /tag/phoenix/ with stories */
body.page-mines-map .fs-nav__link--map,
body.page-send-a-position .fs-nav__link.fs-nav__link--map, /* the header's Map; in the phone menu only Send a Position is marked */
body.page-send-a-position .fs-nav__link--position,
body.page-in-memory .fs-nav__link--memory,
body.page-tell-us-about-him .fs-nav__link--memory,
body.page-films .fs-nav__link--films,
body.page-yankee-boy-story .fs-nav__link--yb,
body.page-contact .fs-nav__link--contact {
--fs-nav-here: 1;
color: var(--fs-bone);
}
/* ---- The header's line ----
Gold, 3px (the phone menu's bar is 3px too), under the word only: the
space the letter-spacing leaves after the last letter and the Yankee Boy
dot are left out, so the line is centred on what the eye reads. Its foot
meets the foot of "Get the next letter": the button is 42px tall and the
link 30.6px, both centred on the row, so the line ends 5.7px below the
link, about as far below the words as the capitals are tall.
Hovering or tabbing to another link draws a softer line in from the
centre, so the reader sees where the line would go. */
.fs-nav__link::after {
content: "";
position: absolute;
left: 0;
right: 1.2px;
bottom: -5.7px;
height: 3px;
background: var(--fs-gold);
opacity: calc(0.4 + 0.6 * var(--fs-nav-here, 0));
transform: scaleX(var(--fs-nav-here, 0));
pointer-events: none;
}
.fs-nav__link--yb::after { left: 13px; } /* after the 6px dot and its 7px gap */
.fs-nav__link:hover::after,
.fs-nav__link:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
.fs-nav__link::after { transition: transform 0.2s ease-out; }
}
/* ---- The phone menu's bar ----
The same flag: a 3px gold bar at the left of the open section's row,
the word stepped in 12px from it. Nothing on the other rows. */
.fs-mobile-nav a:not(.fs-btn) {
box-shadow: inset calc(3px * var(--fs-nav-here, 0)) 0 0 var(--fs-gold);
padding-left: calc(12px * var(--fs-nav-here, 0));
}
/* ══════════════════════════════════════════════════════════════════
1.19.19 (Oct 25, 2026) · The guiding line on the Mines page
"The mine is the place. The people are the story. Frank shows us what
remains." Colleen: its one prominent home is the Mines page, directly
under the main heading, in simple type with room around it and no
decorative box. It reads in Charter, bone, balanced over two lines on a
computer; the explanatory paragraph under it drops a size.
══════════════════════════════════════════════════════════════════ */
.fs-mn .fs-mn-hero__line { margin: 26px 0 0; max-width: 640px; font-family: var(--fs-font-serif); font-size: clamp(22px, 2vw, 29px); line-height: 1.32; color: var(--fs-bone); text-wrap: balance; text-shadow: 0 4px 24px rgba(0,0,0,0.5); }
.fs-mn .fs-mn-hero__line + .fs-mn-hero__deck { margin-top: 18px; max-width: 560px; font-size: clamp(16px, 1.25vw, 17.5px); color: #CFC4AE; }
/* ══════════════════════════════════════════════════════════════════
1.20.0 (Oct 25, 2026) · The publishing system: the Letter (rebuilt), the
Mine Overview, the Story, the Photo Essay and the Stories index, on shared
components. From the mockups approved the same day. The dark masthead, the
photograph bridging into the cream, the caption line in signage, Charter
for reading, the record card, one invitation, the gate at a real break.
══════════════════════════════════════════════════════════════════ */
/* ---- The header: the subtitle under the wordmark, and Stories (proposed) ---- */
.fs-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex-shrink: 0; }
.fs-brand .fs-wordmark { line-height: 1; }
.fs-brand__sub { font-family: var(--fs-font-signage); font-weight: 600; font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--fs-muted-dark); white-space: nowrap; line-height: 1; }
@media (max-width: 780px) { .fs-brand__sub { font-size: 9.5px; letter-spacing: 2px; } }
body.tag-hash-journal .fs-nav__link--journal { --fs-nav-here: 1; color: var(--fs-bone); } /* 1.25.0: a Journal post (was Stories) */
/* ---- The masthead: dark, then the anchor photograph bridging into the cream ---- */
.fs-pub-head, .fs-pub-body { --bridge: 170px; }
.fs-pub-head { background: var(--fs-dark-deepest); color: var(--fs-bone); padding: 48px 0 0; }
.fs-pub-head__in { max-width: 760px; margin: 0 auto; padding: 0 28px; }
.fs-pub-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fs-pub-label { font-family: var(--fs-font-signage); font-weight: 600; font-size: 13px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-gold); }
.fs-pub-label span { color: var(--fs-muted-dark); }
.fs-pub-label a { color: inherit; }
.fs-pub-back { font-family: var(--fs-font-signage); font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-gold); }
.fs-pub-back:hover { text-decoration: underline; }
.fs-pub-title { margin: 14px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.2px; color: var(--fs-bone); text-wrap: balance; }
.fs-pub-title em { font-style: normal; color: var(--fs-gold); }
.fs-pub-dek { margin: 16px 0 0; max-width: 640px; font-family: var(--fs-font-serif); font-size: clamp(18px, 1.6vw, 21.5px); line-height: 1.45; color: #CFC4AE; text-wrap: balance; }
.fs-pub-from { margin: 14px 0 0; font-family: var(--fs-font-serif); font-style: italic; font-size: 16px; color: var(--fs-muted-dark-2); }
.fs-pub-meta { margin: 16px 0 0; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-pub-meta b { color: var(--fs-bone); font-weight: 600; }
/* The Letter's masthead: the newsletter's name with its stamp */
.fs-pub-mast { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
.fs-pub-mast__stamp { width: 104px; height: 104px; flex: none; color: var(--fs-gold); transform: rotate(-7deg); }
.fs-pub-mast__stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fs-pub-mast__stamp .fs-lt-pm__ring { fill: none; stroke: currentColor; stroke-width: 2.4; }
.fs-pub-mast__stamp .fs-lt-pm__ring--in { stroke-width: 1.2; }
.fs-pub-mast__stamp .fs-lt-pm__dot { fill: currentColor; }
.fs-pub-mast__stamp .fs-lt-pm__rule { stroke: currentColor; stroke-width: 1; }
.fs-pub-mast__stamp text { fill: currentColor; font-family: var(--fs-font-signage); text-transform: uppercase; }
.fs-pub-mast__stamp .fs-lt-pm__arc { font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; }
.fs-pub-mast__stamp .fs-lt-pm__n { font-size: 25px; font-weight: 700; letter-spacing: 1px; }
.fs-pub-mast__stamp .fs-lt-pm__date { font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; }
.fs-pub-mast__name { font-family: var(--fs-font-serif); font-size: 20px; line-height: 1.2; color: var(--fs-bone); }
.fs-pub-mast__name i { color: var(--fs-gold); }
.fs-pub-mast__no { margin-top: 6px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-muted-dark); }
/* The anchor photograph */
.fs-pub-anchor { position: relative; z-index: 2; max-width: 860px; margin: 36px auto calc(-1 * var(--bridge)); padding: 0 28px; }
.fs-pub-anchor img { display: block; width: 100%; height: auto; border-radius: 2px; border: 1px solid var(--fs-border-cream); box-shadow: 0 1px 0 var(--fs-border-cream), 0 22px 50px rgba(0,0,0,0.35); background: var(--fs-dark-raised); }
.fs-pub-cap { margin: 10px 0 0; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; line-height: 1.5; color: var(--fs-muted-cream); text-wrap: balance; }
.fs-pub-cap span { color: var(--fs-body-cream-2); font-weight: 500; }
.fs-pub-head .fs-pub-cap { color: var(--fs-muted-cream); }
/* ---- The cream page and the reading column ---- */
.fs-pub-body { background: var(--fs-cream); color: var(--fs-ink); padding: calc(var(--bridge) + 52px) 0 8px; }
.fs-pub-col { max-width: 700px; margin: 0 auto; padding: 0 28px; }
.fs-pub-prose { font-family: var(--fs-font-serif); font-size: 18.5px; line-height: 1.7; color: var(--fs-body-cream); }
.fs-pub-prose p { margin: 0 0 18px; }
.fs-pub-prose a { color: var(--fs-red); font-weight: 700; }
.fs-pub-prose a:hover { text-decoration: underline; }
.fs-pub-prose .fs-pub-lead { font-size: 21px; line-height: 1.55; color: var(--fs-ink); }
.fs-pub-kick { margin: 36px 0 10px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-pub-h2 { margin: 0 0 14px; font-family: var(--fs-font-serif); font-weight: 700; font-size: 27px; line-height: 1.15; color: var(--fs-ink); text-wrap: balance; }
/* Frank's words */
.fs-pub-quote { margin: 26px 0 26px; padding: 4px 0 4px 22px; border-left: 3px solid var(--fs-gold); background: none; box-shadow: none; border-radius: 0; }
.fs-pub-quote p { margin: 0; font-family: var(--fs-font-serif); font-style: italic; font-size: 22px; line-height: 1.45; color: var(--fs-ink); text-wrap: balance; }
.fs-pub-quote cite { display: block; margin-top: 10px; font-style: normal; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-muted-cream); }
/* The record's words */
.fs-pub-doc { margin: 24px 0; padding: 18px 22px; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: 2px; }
.fs-pub-doc__kick { font-family: var(--fs-font-signage); font-weight: 600; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-pub-doc p { margin: 8px 0 0; font-family: var(--fs-font-serif); font-size: 17px; line-height: 1.6; color: var(--fs-body-cream); }
.fs-pub-doc cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fs-muted-cream); }
/* Watch this moment */
.fs-pub-moment { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 24px; padding: 10px 16px 10px 12px; border: 1px solid var(--fs-border-cream); border-radius: 2px; background: var(--fs-panel); color: var(--fs-ink); text-decoration: none; font-family: var(--fs-font-signage); font-weight: 600; font-size: 13.5px; letter-spacing: 1.8px; text-transform: uppercase; }
.fs-pub-moment:hover { border-color: var(--fs-gold); }
.fs-pub-moment__tri { width: 0; height: 0; border-left: 11px solid var(--fs-red); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.fs-pub-moment span { color: var(--fs-muted-cream); }
/* Figures in the body */
.fs-pub-fig { margin: 28px 0; }
.fs-pub-fig img { display: block; width: 100%; height: auto; border-radius: 2px; border: 1px solid var(--fs-border-cream); background: var(--fs-dark-raised); }
.fs-pub-fig--wide { max-width: 1060px; margin-left: auto; margin-right: auto; padding: 0 28px; }
.fs-pub-fig--wide .fs-pub-cap { max-width: 700px; margin-left: auto; margin-right: auto; }
.fs-pub-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; }
.fs-pub-pair figure { margin: 0; }
.fs-pub-pair img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; border: 1px solid var(--fs-border-cream); }
/* The Overview's facts */
.fs-pub-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 8px 0 8px; border-top: 1px solid var(--fs-ink); border-bottom: 1px solid var(--fs-border-cream); }
.fs-pub-facts div { padding: 14px 18px 16px 0; border-bottom: 1px solid var(--fs-border-cream); }
.fs-pub-facts div:nth-last-child(-n+3) { border-bottom: 0; }
.fs-pub-facts dt { font-family: var(--fs-font-signage); font-weight: 600; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-pub-facts dd { margin: 5px 0 0; font-family: var(--fs-font-serif); font-size: 17px; line-height: 1.4; color: var(--fs-ink); }
.fs-pub-facts dd small { display: block; font-size: 14px; color: var(--fs-body-cream-2); }
/* The Letter's sign-off and P.S. */
.fs-pub-sig { margin: 26px 0 0; font-family: var(--fs-font-serif); font-style: italic; font-size: 22px; color: var(--fs-body-cream-2); }
.fs-pub-ps { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--fs-border-cream); font-size: 17px; line-height: 1.65; }
.fs-pub-ps b { font-family: var(--fs-font-signage); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-bronze); margin-right: 6px; }
/* The record card */
.fs-pub-record { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: center; margin: 40px 0 0; padding: 26px 0; border-top: 1px solid var(--fs-border-cream); border-bottom: 1px solid var(--fs-border-cream); }
.fs-pub-record img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; border: 1px solid var(--fs-border-cream); }
.fs-pub-record__kick { font-family: var(--fs-font-signage); font-weight: 600; font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-pub-record__title { margin: 6px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: 26px; line-height: 1.15; color: var(--fs-ink); }
.fs-pub-record__when { margin: 4px 0 0; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-pub-record__line { margin: 10px 0 0; max-width: 34ch; font-family: var(--fs-font-serif); font-size: 16.5px; line-height: 1.5; color: var(--fs-body-cream-2); text-wrap: balance; }
.fs-pub-record__links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 12px; font-family: var(--fs-font-serif); font-size: 17px; font-weight: 700; }
.fs-pub-record__links a { color: var(--fs-red); text-decoration: none; }
.fs-pub-record__links a.is-all { color: var(--fs-muted-cream); }
.fs-pub-record__links a:hover { text-decoration: underline; }
/* The Overview's way on: two buttons */
.fs-pub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 36px 0 0; padding: 26px 0; border-top: 1px solid var(--fs-ink); }
.fs-pub-actions .fs-yb-btn { font-size: 14.5px; letter-spacing: 1.8px; }
.fs-pub-actions__note { flex-basis: 100%; margin: 4px 0 0; font-family: var(--fs-font-serif); font-size: 15.5px; color: var(--fs-body-cream-2); }
/* The invitation (one per page; not shown to a reader on the list) */
.fs-pub-invite { margin: 40px 0 0; padding: 26px 28px 28px; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: 2px; }
.fs-pub-invite__kick { font-family: var(--fs-font-signage); font-weight: 600; font-size: 12.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-pub-invite p { margin: 8px 0 0; font-family: var(--fs-font-serif); font-size: 16.5px; line-height: 1.5; color: var(--fs-body-cream-2); max-width: 52ch; }
.fs-pub-invite .fs-newsletter { margin-top: 14px; max-width: 460px; }
.fs-pub-invite__signin { margin: 12px 0 0 !important; font-size: 14px !important; color: var(--fs-muted-cream) !important; }
.fs-pub-invite__signin a { color: var(--fs-red); font-weight: 700; }
/* The gate: a door at a natural break, not a wall */
.fs-pub-gate { margin: 34px 0 0; padding: 34px 32px 36px; background: var(--fs-dark-deepest); color: var(--fs-bone); border-radius: 2px; border-top: 3px solid var(--fs-gold); }
.fs-pub-gate__kick { font-family: var(--fs-font-signage); font-weight: 600; font-size: 12.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--fs-gold); }
.fs-pub-gate h2 { margin: 10px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: 28px; line-height: 1.15; color: var(--fs-bone); text-wrap: balance; }
.fs-pub-gate p { margin: 12px 0 0; max-width: 52ch; font-family: var(--fs-font-serif); font-size: 17px; line-height: 1.55; color: var(--fs-body-dark); }
.fs-pub-gate .fs-newsletter { margin-top: 18px; max-width: 460px; }
.fs-pub-gate__signin { font-size: 14.5px !important; color: var(--fs-muted-dark) !important; }
.fs-pub-gate__signin a { color: var(--fs-gold); font-weight: 700; }
.fs-pub-gate__rest { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--fs-border-dark); font-family: var(--fs-font-signage); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-muted-dark); line-height: 1.7; }
.fs-pub-gate__rest b { color: var(--fs-bone); font-weight: 600; }
/* Ending and spacing */
.fs-pub-end { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--fs-border-cream); font-family: var(--fs-font-serif); font-size: 20px; line-height: 1.5; color: var(--fs-ink); }
.fs-pub-space { height: 72px; }
/* ---- Phones and tablets ---- */
@media (max-width: 900px) {
.fs-pub-facts { grid-template-columns: 1fr 1fr; }
.fs-pub-facts div:nth-last-child(-n+3) { border-bottom: 1px solid var(--fs-border-cream); }
.fs-pub-facts div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 600px) {
.fs-pub-head, .fs-pub-body { --bridge: 96px; }
.fs-pub-head { padding-top: 34px; }
.fs-pub-body { padding-top: calc(var(--bridge) + 76px); }
.fs-pub-head__in, .fs-pub-col, .fs-pub-anchor, .fs-pub-fig--wide { padding-left: 20px; padding-right: 20px; }
.fs-pub-mast { gap: 16px; margin-top: 22px; }
.fs-pub-mast__stamp { width: 84px; height: 84px; }
.fs-pub-mast__name { font-size: 18px; }
.fs-pub-prose { font-size: 17.5px; line-height: 1.68; }
.fs-pub-prose .fs-pub-lead { font-size: 19.5px; }
.fs-pub-quote p { font-size: 20px; }
.fs-pub-record { grid-template-columns: 1fr; gap: 16px; }
.fs-pub-record img { aspect-ratio: 4 / 3; }
.fs-pub-pair { grid-template-columns: 1fr; }
.fs-pub-facts { grid-template-columns: 1fr; }
.fs-pub-facts div { border-bottom: 1px solid var(--fs-border-cream) !important; padding-right: 0; }
.fs-pub-facts div:last-child { border-bottom: 0 !important; }
.fs-pub-actions .fs-yb-btn { width: 100%; justify-content: center; }
.fs-pub-invite, .fs-pub-gate { padding-left: 20px; padding-right: 20px; }
}
/* ---- The post's own content (Ghost's cards) inside the column ---- */
.fs-pub-content > p:first-child { font-size: 21px; line-height: 1.55; color: var(--fs-ink); }
.fs-pub-content h2 { margin: 36px 0 10px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-pub-content h3 { margin: 28px 0 12px; font-family: var(--fs-font-serif); font-weight: 700; font-size: 26px; line-height: 1.15; color: var(--fs-ink); text-wrap: balance; }
.fs-pub-content h4 { margin: 24px 0 8px; font-family: var(--fs-font-serif); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--fs-ink); }
.fs-pub-content hr { margin: 30px 0; border: 0; border-top: 1px solid var(--fs-border-cream); }
.fs-pub-content ul, .fs-pub-content ol { margin: 0 0 18px; padding-left: 1.3em; }
.fs-pub-content li { margin: 0 0 8px; }
.fs-pub-content blockquote { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--fs-gold); background: none; box-shadow: none; border-radius: 0; font-family: var(--fs-font-serif); font-style: italic; font-size: 22px; line-height: 1.45; color: var(--fs-ink); text-wrap: balance; }
.fs-pub-content blockquote p { margin: 0; }
.fs-pub-content blockquote p + p { margin-top: 10px; }
.fs-pub-content blockquote cite, .fs-pub-content blockquote p:last-child:has(> em:only-child) { display: block; margin-top: 10px; font-style: normal; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-pub-content blockquote p:last-child:has(> em:only-child) em { font-style: normal; }
.fs-pub-content figure { margin: 28px 0; }
.fs-pub-content figure img { display: block; width: 100%; height: auto; border-radius: 2px; border: 1px solid var(--fs-border-cream); background: var(--fs-dark-raised); }
.fs-pub-content figcaption { margin: 10px 0 0; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; line-height: 1.5; color: var(--fs-muted-cream); text-wrap: balance; }
.fs-pub-content figcaption a { color: inherit; }
.fs-pub-content .kg-width-wide { position: relative; width: min(1060px, calc(100vw - 40px)); left: 50%; transform: translateX(-50%); }
.fs-pub-content .kg-width-full { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); }
.fs-pub-content .kg-width-full img { border-radius: 0; border: 0; }
.fs-pub-content .kg-width-wide figcaption, .fs-pub-content .kg-width-full figcaption { max-width: 700px; margin-left: auto; margin-right: auto; padding: 0 28px; }
.fs-pub-content .kg-gallery-card figcaption { max-width: none; padding: 0; }
.fs-pub-content p.fs-pub-ps { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--fs-border-cream); font-size: 17px; line-height: 1.65; }
.fs-pub-content p.fs-pub-ps b.fs-pub-ps__k { font-family: var(--fs-font-signage); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-bronze); margin-right: 6px; }
.fs-pub-content .fs-pub-doc p { font-size: 17px; }
.fs-pub-content .fs-pub-pair figure { margin: 0; }
.fs-pub-content .fs-pub-pair img { aspect-ratio: 4 / 3; object-fit: cover; }
/* ---- The Stories index ---- */
.fs-pub-head--index { padding-bottom: 48px; }
.fs-pub-head--index .fs-pub-head__in { max-width: var(--fs-max); margin: 0 auto; padding: 0 40px; }
.fs-pub-body--index { padding-top: 44px; padding-bottom: 72px; }
.fs-pub-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.fs-pub-card { margin: 0; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: 2px; overflow: hidden; transition: box-shadow 0.25s var(--fs-ease, ease), transform 0.25s var(--fs-ease, ease); }
.fs-pub-card:hover { box-shadow: var(--fs-shadow-card-hover); transform: translateY(-2px); }
.fs-pub-card__link { display: block; color: inherit; text-decoration: none; }
.fs-pub-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fs-dark-raised); }
.fs-pub-card__body { padding: 18px 20px 22px; }
.fs-pub-card__kick { font-family: var(--fs-font-signage); font-weight: 600; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-bronze); min-height: 1em; }
.fs-pub-card__kick span { color: var(--fs-muted-cream); }
.fs-pub-card__title { margin: 8px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--fs-ink); text-wrap: balance; }
.fs-pub-card__line { margin: 8px 0 0; font-family: var(--fs-font-serif); font-size: 15.5px; line-height: 1.5; color: var(--fs-body-cream-2); }
.fs-pub-card__mine { margin: 12px 0 0; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-pub-card--empty { grid-column: 1 / -1; padding: 40px 20px; text-align: center; font-family: var(--fs-font-serif); font-size: 18px; color: var(--fs-body-cream-2); }
.fs-pub-body--index .pagination { margin-top: 36px; }
@media (max-width: 900px) { .fs-pub-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fs-pub-grid { grid-template-columns: 1fr; gap: 18px; } .fs-pub-content > p:first-child { font-size: 19.5px; } .fs-pub-content blockquote { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .fs-pub-card { transition: none; } .fs-pub-card:hover { transform: none; } }
/* The label and meta lines list a post's tags with middle dots; the facts band lists them one to a line, or with commas */
.fs-pub-label__more span::before, .fs-pub-meta__more span::before { content: "\00b7"; padding: 0 0.5em; color: var(--fs-muted-dark); }
/* Frank's words, as typed in the editor: the quote, two line breaks, then the attribution in italics */
.fs-pub-content blockquote > em:last-child { display: block; margin-top: 10px; font-style: normal; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-pub-content blockquote:has(> em:last-child) br { display: none; }
.fs-pub-label__kind:empty + span::before { content: ""; }
.fs-pub-facts__list span { display: block; }
.fs-pub-facts__list--comma span { display: inline; }
.fs-pub-facts__list--comma span + span::before { content: ", "; }
/* ---- 1.20.6 · The Letters archive: between the letters; a reader on the list ---- */
.fs-lt-between { padding: clamp(40px, 5vw, 64px) 0 clamp(20px, 3vw, 36px); border-top: 1px solid var(--fs-border-cream); }
.fs-lt-between__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.fs-lt-between__title { margin: 6px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; color: var(--fs-ink); }
.fs-lt-between__all { font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-red); padding-bottom: 6px; }
.fs-lt-between__all:hover { text-decoration: underline; }
.fs-lt-between .fs-pub-card__title { font-size: 21px; }
.fs-newsletter__member { margin: 0; font-family: var(--fs-font-serif); font-size: 16.5px; line-height: 1.5; color: var(--fs-body-cream-2); text-wrap: balance; }
.fs-newsletter__member b { font-weight: 600; color: var(--fs-ink); }
.fs-newsletter__member a { color: var(--fs-red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fs-newsletter__member--dark { color: var(--fs-body-dark); }
.fs-newsletter__member--dark b { color: var(--fs-bone); }
.fs-newsletter__member--dark a { color: var(--fs-gold); }
/* ======================================================================
1.21.0 · The Letters archive, rebuilt (Oct 25, 2026): Frank's desk
partials/letters-page.hbs · partials/letter-row.hbs
The masthead (dark) with the portrait print; the open letter (a sheet laid
over the desk's edge); the drawer of letters as rows. The print and
postmark rules above (.fs-lt-print, .fs-lt-stamp, .fs-lt-pm) are shared.
====================================================================== */
.fs-ltd { --fs-ltd-overlap: 112px; --fs-ltd-max: 1360px; }
.fs-ltd .fs-wrap { max-width: calc(var(--fs-ltd-max) + 80px); }
/* ---- 1. The masthead ---- */
.fs-lm { position: relative; background: var(--fs-dark-deepest); color: var(--fs-bone); padding: clamp(44px, 5.5vw, 76px) 0 calc(var(--fs-ltd-overlap) + clamp(36px, 4vw, 56px)); overflow: hidden; }
.fs-lm::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 78% 40%, rgba(201,162,39,0.075), transparent 70%); }
.fs-lm__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 440px); gap: clamp(40px, 6vw, 96px); align-items: center; }
.fs-lm__kick { margin: 0; font-weight: 600; font-size: 13px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--fs-gold); }
.fs-lm__kick span { margin: 0 8px; color: var(--fs-muted-dark-2); }
.fs-lm__title { margin: 18px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(44px, 6.4vw, 94px); line-height: 0.98; letter-spacing: -0.6px; color: var(--fs-bone); text-wrap: balance; }
.fs-lm__title em { font-style: italic; color: var(--fs-gold); }
.fs-lm__from { margin: 22px 0 0; font-family: var(--fs-font-serif); font-style: italic; font-size: clamp(17px, 1.3vw, 20px); color: var(--fs-muted-dark); }
.fs-lm__promise { margin: 18px 0 0; max-width: 56ch; font-family: var(--fs-font-serif); font-size: clamp(17.5px, 1.35vw, 20.5px); line-height: 1.6; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-lm__promise a { color: var(--fs-gold); text-decoration: underline; text-underline-offset: 3px; }
.fs-lm__form { margin-top: 30px; max-width: 560px; }
.fs-lm__form .fs-newsletter__member { font-size: 17.5px; }
.fs-lm__terms { margin: 12px 0 0; font-family: var(--fs-font-serif); font-size: 14.5px; line-height: 1.5; color: var(--fs-muted-dark); }
.fs-lm__stats { display: flex; flex-wrap: wrap; row-gap: 8px; margin: 30px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(244,238,226,0.14); list-style: none; }
.fs-lm__stats li { font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-muted-dark); white-space: nowrap; }
.fs-lm__stats b { color: var(--fs-bone); font-weight: 700; }
.fs-lm__stats li:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 13px; margin: 0 14px; vertical-align: -2px; background: rgba(244,238,226,0.28); }
/* the portrait print laid on the desk */
.fs-lm__print { position: relative; margin: 0; justify-self: end; width: 100%; transform: rotate(1.6deg); }
.fs-lm__mat { padding: 12px 12px 14px; background: #FFFDF8; border-radius: 2px; box-shadow: 0 2px 0 rgba(0,0,0,0.35), 0 30px 60px rgba(0,0,0,0.55), 0 8px 18px rgba(0,0,0,0.35); }
.fs-lm__mat img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #2B2622; }
.fs-lm__cap { margin: 12px 0 0; font-weight: 600; font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; color: #8E8373; text-align: right; }
.fs-lm__pm { position: absolute; top: -36px; left: -34px; z-index: 1; width: 118px; height: 118px; border-radius: 50%; transform: rotate(-12deg); background: rgba(255,253,248,0.96); box-shadow: 0 10px 24px rgba(0,0,0,0.4); pointer-events: none; animation: fs-strike 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.6s both; }
.fs-lm__pm .fs-lt-pm { color: var(--fs-red); }
.fs-lm__pm .fs-lt-pm__n { font-size: 26px; letter-spacing: 1.5px; }
/* ---- 2. The open letter: a sheet laid over the desk's edge ---- */
.fs-lo { position: relative; z-index: 1; margin-top: calc(-1 * var(--fs-ltd-overlap)); padding-bottom: clamp(28px, 4vw, 48px); }
.fs-lo__sheet { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; padding: clamp(28px, 3.4vw, 52px); background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: 2px; box-shadow: 0 1px 0 rgba(43,35,23,0.06), 0 30px 70px rgba(13,12,10,0.28), 0 10px 24px rgba(13,12,10,0.14); }
.fs-lo__sheet::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(110,91,34,0.16); border-radius: 1px; pointer-events: none; }
.fs-lo__sheet { position: relative; }
.fs-lo__photo { position: relative; min-width: 0; }
.fs-lo__photo > a { display: block; color: inherit; text-decoration: none; }
.fs-lt .fs-lo__print { padding: 12px 12px 14px; }
.fs-lo__print .fs-lt-stamp { width: 112px; height: 112px; top: -18px; right: -18px; }
.fs-lo__cap { margin: 14px 4px 0; font-family: var(--fs-font-serif); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--fs-body-cream-2); }
.fs-lo__cap span { white-space: normal !important; }
.fs-lo__body { min-width: 0; }
.fs-lo__kick { margin: 0; font-weight: 600; font-size: 13px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-lo__kick span { margin: 0 6px; }
.fs-lt .fs-lo__title { margin: 14px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -0.3px; color: var(--fs-ink); text-wrap: pretty; }
.fs-lo__title a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.fs-lo__title a:hover, .fs-lo__title a:focus-visible { color: var(--fs-red); }
.fs-lt .fs-lo__dek { margin: 16px 0 0; font-family: var(--fs-font-serif); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--fs-body-cream-2); text-wrap: pretty; }
.fs-lo__open { position: relative; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--fs-border-cream); max-height: 10.6em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%); }
.fs-lt .fs-lo__open { font-size: 18px; line-height: 1.7; color: var(--fs-body-cream); }
.fs-lo__open p { margin: 0 0 16px; }
.fs-lo__open p:first-child::first-letter { float: left; margin: 7px 10px 0 0; font-weight: 700; font-size: 3.5em; line-height: 0.78; color: var(--fs-red); }
.fs-lo__open img, .fs-lo__open figure, .fs-lo__open blockquote, .fs-lo__open hr { display: none; }
.fs-lo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 8px; }
.fs-lo__time { font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-muted-cream); }
/* "Between the letters" sits between the sheet and the drawer */
.fs-ltd .fs-lt-between { border-top: 0; padding-top: clamp(28px, 4vw, 52px); }
/* ---- 4. The drawer: every letter as a row ---- */
.fs-ld { padding: clamp(40px, 5vw, 72px) 0 clamp(70px, 8vw, 110px); }
.fs-ld--empty { padding-top: clamp(56px, 7vw, 90px); }
.fs-ld__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 2px solid var(--fs-ink); }
.fs-lt .fs-ld__title { margin: 8px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; color: var(--fs-ink); }
.fs-lt .fs-ld__dek { margin: 0 0 6px; font-family: var(--fs-font-serif); font-style: italic; font-size: 17.5px; color: var(--fs-body-cream-2); }
.fs-ld__list { display: block; }
.fs-lt .fs-ld__list .fs-lt-year { display: flex; align-items: center; gap: 18px; margin: 0; padding: 30px 0 0; font-weight: 700; font-size: clamp(22px, 2vw, 28px); letter-spacing: 2px; text-transform: uppercase; color: var(--fs-ink); }
.fs-lt .fs-ld__list .fs-lt-year::after { content: ""; flex: 1; height: 1px; background: rgba(42,38,34,0.18); }
.fs-ld__row { border-bottom: 1px solid var(--fs-border-cream); }
.fs-ld__row:last-child { border-bottom: 0; }
.fs-ld__link { display: grid; grid-template-columns: 250px minmax(0, 1fr) auto; gap: clamp(22px, 3vw, 44px); align-items: center; padding: clamp(24px, 2.6vw, 36px) 0; color: inherit; text-decoration: none; }
.fs-lt .fs-ld__print { padding: 8px 8px 10px; }
.fs-ld__print .fs-lt-stamp { width: 78px; height: 78px; top: -12px; right: -12px; }
.fs-ld__body { min-width: 0; }
.fs-ld__meta { margin: 0; font-weight: 600; font-size: 13px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-bronze); }
.fs-lt .fs-ld__t { margin: 8px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.14; color: var(--fs-ink); transition: color 0.2s ease; text-wrap: pretty; }
.fs-lt .fs-ld__x { margin: 10px 0 0; max-width: 62ch; font-family: var(--fs-font-serif); font-size: 16.5px; line-height: 1.55; color: var(--fs-body-cream-2); }
.fs-ld__go { align-self: center; font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-red); white-space: nowrap; border-bottom: 1.5px solid transparent; transition: border-color 0.2s ease; }
.fs-ld__link:hover .fs-ld__t, .fs-ld__link:focus-visible .fs-ld__t { color: var(--fs-red); }
.fs-ld__link:hover .fs-ld__go, .fs-ld__link:focus-visible .fs-ld__go { border-color: var(--fs-red); }
.fs-ld .pagination { margin-top: 40px; }
/* ---- Tablets and phones ---- */
@media (max-width: 1100px) {
.fs-lm__in { grid-template-columns: minmax(0, 1fr) clamp(260px, 32vw, 360px); gap: 44px; }
.fs-ld__link { grid-template-columns: 200px minmax(0, 1fr); }
.fs-ld__go { display: none; }
}
@media (max-width: 767px) {
.fs-ltd { --fs-ltd-overlap: 56px; }
.fs-lm { padding-top: 36px; }
.fs-lm__in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
.fs-lm__kick { font-size: 12px; letter-spacing: 2.2px; }
.fs-lm__kick span { display: block; height: 0; overflow: hidden; margin: 0; }
.fs-lm__title { font-size: clamp(44px, 12.5vw, 60px); }
.fs-lm__stats { display: grid; gap: 9px; }
.fs-lm__stats li { white-space: normal; }
.fs-lm__stats li:not(:last-child)::after { display: none; }
.fs-lm__print { width: calc(100% - 28px); margin: 8px auto 0; transform: rotate(1.2deg); }
.fs-lm__pm { width: 98px; height: 98px; top: -30px; left: -22px; }
.fs-lo__sheet { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 22px 18px 26px; }
.fs-lo__sheet::before { inset: 7px; }
.fs-lo__print .fs-lt-stamp { width: 92px; height: 92px; top: -14px; right: -12px; }
.fs-lt .fs-lo__title { font-size: clamp(28px, 8vw, 36px); }
.fs-lo__open { max-height: 9.4em; }
.fs-lt .fs-lo__open { font-size: 17px; }
.fs-lo__actions .fs-yb-btn { width: 100%; justify-content: center; text-align: center; }
.fs-ld__head { display: block; }
.fs-lt .fs-ld__dek { margin: 10px 0 0; }
.fs-lt .fs-ld__list .fs-lt-year { padding-top: 22px; }
.fs-ld__link { grid-template-columns: 118px minmax(0, 1fr); gap: 18px; padding: 20px 0; align-items: start; }
.fs-lt .fs-ld__print { padding: 5px 5px 6px; }
.fs-ld__print .fs-lt-stamp { width: 54px; height: 54px; top: -9px; right: -9px; }
.fs-ld__meta { font-size: 11.5px; letter-spacing: 1.8px; }
.fs-lt .fs-ld__t { font-size: 19px; margin-top: 6px; }
.fs-lt .fs-ld__x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
.fs-lm__pm { animation: none; }
}
/* ======================================================================
1.21.1 · /subscribe/ (Oct 25, 2026): the letters' sign-up page
page-subscribe.hbs. Shares the print, postmark and open-letter sheet
rules (.fs-lt-print, .fs-lt-stamp, .fs-lo__*) with the Letters page.
====================================================================== */
.fs-sub { background: var(--fs-cream); }
.fs-sub .fs-wrap { max-width: 1440px; }
.fs-sub-kick { margin: 0; font-weight: 600; font-size: 13px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--fs-gold); }
/* 1. the masthead */
.fs-sub-hero { position: relative; background: var(--fs-dark-deepest); color: var(--fs-bone); padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.fs-sub-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(201,162,39,0.08), transparent 70%); }
.fs-sub-hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.fs-sub-title { margin: 18px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(40px, 5vw, 74px); line-height: 1.02; letter-spacing: -0.5px; color: var(--fs-bone); text-wrap: balance; }
.fs-sub-title em { font-style: italic; color: var(--fs-gold); }
.fs-sub-lede { margin: 24px 0 0; max-width: 54ch; font-family: var(--fs-font-serif); font-size: clamp(17.5px, 1.4vw, 21px); line-height: 1.6; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-sub-form { margin-top: 30px; max-width: 560px; }
.fs-sub-form .fs-newsletter__member { font-size: 17.5px; }
.fs-sub-terms { margin: 12px 0 0; font-family: var(--fs-font-serif); font-size: 14.5px; line-height: 1.5; color: var(--fs-muted-dark); }
.fs-sub-already { margin: 18px 0 0; font-family: var(--fs-font-serif); font-size: 15.5px; color: var(--fs-muted-dark); }
.fs-sub-already a { color: var(--fs-gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* the last three letters, fanned out on the desk */
.fs-sub-fan { position: relative; height: clamp(360px, 36vw, 520px); }
.fs-sub-fan__item { position: absolute; display: block; width: min(60%, 380px); color: inherit; text-decoration: none; transform-origin: 50% 100%; transition: transform 0.35s var(--fs-ease-out, ease); }
.fs-sub-fan__item:nth-child(1) { z-index: 3; left: 19%; top: 22%; transform: rotate(-2deg); }
.fs-sub-fan__item:nth-child(2) { z-index: 2; left: 40%; top: 2%; transform: rotate(6deg); }
.fs-sub-fan__item:nth-child(3) { z-index: 1; left: 0; top: 6%; transform: rotate(-8deg); }
.fs-sub-fan__item:hover, .fs-sub-fan__item:focus-visible { z-index: 4; transform: rotate(0deg) translateY(-6px); }
.fs-sub-fan .fs-lt-print { padding: 10px 10px 12px; box-shadow: 0 2px 0 rgba(0,0,0,0.35), 0 26px 50px rgba(0,0,0,0.55), 0 8px 16px rgba(0,0,0,0.3); }
.fs-sub-fan .fs-lt-stamp { width: 92px; height: 92px; top: -14px; right: -14px; }
.fs-sub-fan__cap { margin: 10px 2px 0; font-weight: 600; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: #8E8373; text-align: right; }
/* 2. a note from Frank (the page's body) */
.fs-sub-note { padding: clamp(40px, 5vw, 64px) 0 0; }
.fs-sub-note__sheet { max-width: 860px; margin: 0 auto; padding: clamp(26px, 3vw, 40px) clamp(24px, 3.4vw, 48px); background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: 2px; box-shadow: 0 1px 0 rgba(43,35,23,0.06), 0 14px 34px rgba(13,12,10,0.10); }
.fs-sub-note__body { margin-top: 12px; }
/* 3. what comes */
.fs-sub-what { padding: clamp(48px, 6vw, 84px) 0 clamp(20px, 3vw, 36px); }
.fs-sub-what__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
.fs-sub-what__list li { position: relative; padding-top: 18px; border-top: 2px solid var(--fs-ink); }
.fs-sub-what__n { display: block; font-weight: 700; font-size: 13px; letter-spacing: 2.6px; color: var(--fs-red); }
.fs-sub .fs-sub-what__t { margin: 10px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.1; color: var(--fs-ink); }
.fs-sub-what__list p { margin: 12px 0 0; font-family: var(--fs-font-serif); font-size: 17px; line-height: 1.6; color: var(--fs-body-cream-2); text-wrap: pretty; }
/* section heads (4, 6, 7) */
.fs-sub-sec-head { margin-bottom: 26px; }
.fs-sub-sec-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px 60px; align-items: end; }
.fs-sub .fs-sub-sec-title { margin: 8px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; color: var(--fs-ink); }
.fs-sub-sec-dek { margin: 0 0 6px; font-family: var(--fs-font-serif); font-size: 17.5px; line-height: 1.55; color: var(--fs-body-cream-2); text-wrap: pretty; }
.fs-sub-all { font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-red); border-bottom: 1.5px solid transparent; transition: border-color 0.2s ease; }
.fs-sub-all:hover, .fs-sub-all:focus-visible { border-color: var(--fs-red); }
/* 4. read one first */
.fs-sub-sample { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); }
.fs-sub .fs-lo__sheet { margin-top: 0; }
/* 5. from Frank */
.fs-sub-frank { background: var(--fs-dark-base); color: var(--fs-bone); padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--fs-border-dark); border-bottom: 1px solid var(--fs-border-dark); }
.fs-sub-frank__in { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 1140px; }
.fs-sub-frank__photo { margin: 0; transform: rotate(-2deg); }
.fs-sub .fs-sub-frank__print { padding: 9px 9px 10px; box-shadow: 0 2px 0 rgba(0,0,0,0.35), 0 22px 44px rgba(0,0,0,0.5); }
.fs-lt .fs-sub-frank__print img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #2B2622; }
.fs-sub-frank__cap { margin: 10px 2px 0; font-weight: 600; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-muted-dark-2); text-align: right; }
.fs-sub .fs-sub-frank__title { margin: 10px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; color: var(--fs-bone); }
.fs-sub-frank__text > p:not(.fs-sub-kick):not(.fs-sub-frank__links) { margin: 16px 0 0; max-width: 62ch; font-family: var(--fs-font-serif); font-size: 18px; line-height: 1.62; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-sub-frank__links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; }
.fs-sub-frank__links a { font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-gold); border-bottom: 1.5px solid transparent; transition: border-color 0.2s ease; }
.fs-sub-frank__links a:hover, .fs-sub-frank__links a:focus-visible { border-color: var(--fs-gold); }
/* 6. between the letters */
.fs-sub-between { padding: clamp(48px, 6vw, 84px) 0 clamp(30px, 4vw, 48px); }
.fs-sub-between .fs-pub-grid { margin-top: 10px; }
.fs-sub-between__all { margin: 26px 0 0; }
/* 7. plain answers */
.fs-sub-faq { padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 110px); }
.fs-sub-faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); margin: 0; border-top: 2px solid var(--fs-ink); }
.fs-sub-faq__list > div { padding: 24px 0 26px; border-bottom: 1px solid var(--fs-border-cream); }
.fs-sub-faq__list dt { margin: 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: 21px; line-height: 1.25; color: var(--fs-ink); }
.fs-sub-faq__list dd { margin: 10px 0 0; font-family: var(--fs-font-serif); font-size: 17px; line-height: 1.6; color: var(--fs-body-cream-2); text-wrap: pretty; }
.fs-sub-faq__list a { color: var(--fs-red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* 8. the sign-up, once more */
.fs-sub-end { background: var(--fs-dark-deepest); color: var(--fs-bone); padding: clamp(56px, 7vw, 96px) 0; text-align: center; }
.fs-sub-end__in { max-width: 760px; }
.fs-sub .fs-sub-end__title { margin: 14px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; color: var(--fs-bone); text-wrap: balance; }
.fs-sub-end__title em { font-style: italic; color: var(--fs-gold); }
.fs-sub-form--end { margin: 30px auto 0; max-width: 540px; text-align: left; }
.fs-sub-form--end .fs-sub-terms { text-align: center; }
/* tablets and phones */
@media (max-width: 1100px) {
.fs-sub-hero__in { grid-template-columns: minmax(0, 1fr); gap: 52px; }
.fs-sub-fan { height: clamp(300px, 52vw, 420px); max-width: 620px; }
.fs-sub-sec-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 767px) {
.fs-sub-hero { padding-top: 36px; }
.fs-sub-title { font-size: clamp(36px, 10vw, 48px); }
.fs-sub-fan { height: 0; padding-bottom: 92%; max-width: none; }
.fs-sub-fan__item { width: 62%; }
.fs-sub-fan__item:nth-child(1) { left: 17%; top: 22%; }
.fs-sub-fan__item:nth-child(2) { left: 32%; top: 0; transform: rotate(5deg); }
.fs-sub-fan__item:nth-child(3) { left: 2%; top: 7%; }
.fs-sub-fan .fs-lt-stamp { width: 66px; height: 66px; top: -10px; right: -10px; }
.fs-sub-what__list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.fs-sub-frank__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.fs-sub-frank__photo { width: 200px; }
.fs-sub-faq__list { grid-template-columns: minmax(0, 1fr); }
.fs-sub-faq__list dt { font-size: 19px; }
.fs-sub-end { text-align: left; }
.fs-sub-form--end .fs-sub-terms { text-align: left; }
}
/* ══════════════════════════════════════════════════════════════════
1.21.2 · In Memory on the Mines page (Oct 26, 2026)
One quiet dark band between the hero and the search bar: five brass
tags (the memorial page's motif: a man's numbered tag on the board as
he went underground), the kicker, one line, the gold button. The band
is in collection-mines.hbs and shows only while /in-memory/ is published.
══════════════════════════════════════════════════════════════════ */
.fs-mn-mem { background: var(--fs-dark-base); color: var(--fs-body-dark); border-top: 1px solid var(--fs-border-dark); border-bottom: 1px solid var(--fs-border-dark); }
.fs-mn-mem__inner { display: flex; align-items: center; gap: 22px 36px; padding-top: 26px; padding-bottom: 26px; }
.fs-mn-mem__tags { flex: 0 0 auto; display: flex; gap: 5px; padding-top: 2px; }
.fs-mn-mem__tags i { display: block; position: relative; width: 11px; height: 15px; border-radius: 2px 2px 3px 3px; background: linear-gradient(160deg, #DCBD6C 0%, #B08A37 55%, #8A6A26 100%); box-shadow: inset 0 0 0 1px rgba(90,62,16,0.35); }
.fs-mn-mem__tags i::before { content: ""; position: absolute; top: 2.5px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--fs-dark-base); box-shadow: inset 0 0 0 0.5px rgba(90,62,16,0.5); }
.fs-mn-mem__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fs-mn .fs-mn-mem__kick { margin: 0; font-size: 13px; }
.fs-mn-mem__line { margin: 0; max-width: 640px; font-family: var(--fs-font-serif); font-size: 18px; line-height: 1.5; color: var(--fs-bone); text-wrap: pretty; }
.fs-mn-mem__link { flex: 0 0 auto; }
@media (max-width: 767px) {
.fs-mn-mem__inner { flex-wrap: wrap; gap: 16px 20px; padding-top: 22px; padding-bottom: 24px; }
.fs-mn-mem__text { flex-basis: calc(100% - 75px); }
.fs-mn-mem__line { font-size: 17px; }
.fs-mn-mem__link { width: 100%; }
}
/* ══════════════════════════════════════════════════════════════════
1.21.4 · No sign-up on the memorial (Oct 26, 2026)
On In Memory (/in-memory/) and its family page (/tell-us-about-him/),
the invitations to the letters stand aside: the bar at the top of the
screen, "Get the next letter" in the header, and the same button in the
phone menu. On a page about the dead, an invitation to sign up can feel
like selling (Colleen, 13:18: "That is a beautiful idea"). The menu,
the footer and everything else stay as on every page.
══════════════════════════════════════════════════════════════════ */
body.page-in-memory .fs-announce-wrap,
body.page-tell-us-about-him .fs-announce-wrap,
body.page-in-memory .fs-header .fs-btn-subscribe,
body.page-tell-us-about-him .fs-header .fs-btn-subscribe,
body.page-in-memory .fs-mobile-nav__cta,
body.page-tell-us-about-him .fs-mobile-nav__cta,
body.page-in-memory .fs-mobile-nav__signin,
body.page-tell-us-about-him .fs-mobile-nav__signin { display: none !important; }
/* Without the 42px button the header row would be 4px shorter on these two pages;
keep it the height it is everywhere else, so the header doesn't shift between
pages. Phones are left alone: the button is hidden on every page there. */
@media (min-width: 481px) {
body.page-in-memory .fs-nav,
body.page-tell-us-about-him .fs-nav { min-height: 42px; }
}
/* ======================================================================
1.22.0 · The mines map (October 26, 2026): the Position cell on a record's
band, the small maps, and /mines/map/ (Find a Mine by Area).
Pins: a gold dot is a position taken on site; a hollow gold diamond is a
camp (the pin for everyone who isn't signed in, and for a mine whose
position is held back); grey is a record to come; an ink ring is the
place that was searched. Leaflet's own CSS loads beside this.
====================================================================== */
/* ---- 1. The Position cell in the band ---- */
.fs-mr-band__facts--pos { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.75fr); }
.fs-mr-band__facts--pos .fs-mr-band__cell--aka { grid-column: auto; }
/* 1.22.2: Anyox's band (.fs-mr--sea) gives both its rows five columns of its own, which left the
Position cell a narrow fourth column; its facts row keeps the four the cell was given */
.fs-mr--sea .fs-mr-band__facts--pos { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.75fr); }
.fs-nw { white-space: nowrap; } /* a coordinate never breaks inside itself, only between the parts */
.fs-mr-band__cell--pos { border-left-color: var(--fs-gold); }
.fs-mr .fs-mr-band__cell--pos .fs-mr-band__k { color: var(--fs-gold); }
.fs-mr-band__cell--pos .fs-mr-band__k span { color: var(--fs-muted-dark); }
.fs-mr-band__cell--pos .fs-mr-band__k span::before { content: " · "; }
.fs-pos__row { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.fs-pos__thumb { position: relative; display: block; flex: 0 0 150px; width: 150px; height: 88px; overflow: hidden; border: 1px solid var(--fs-border-dark); border-radius: 2px; background: var(--fs-card-dark) radial-gradient(circle at 50% 40%, #3A332A, #1B1815 72%); }
.fs-pos__thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--fs-gold); border: 1.5px solid var(--fs-ink); opacity: 0.9; }
.fs-pos__thumb.has-map::after { display: none; }
.fs-pos__map { display: block; width: 100%; height: 100%; }
.fs-pos__map .leaflet-control-container { display: none; }
.fs-pos__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.fs-mr .fs-pos__where { font-size: 16px; }
.fs-pos__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fs-muted-dark); text-wrap: pretty; }
.fs-pos__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 0; }
.fs-pos__link { font-weight: 700; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-gold); border-bottom: 1px solid rgba(201,162,39,0.35); }
.fs-pos__link:hover, .fs-pos__link:focus-visible { color: var(--fs-gold-hover); border-bottom-color: currentColor; }
.fs-pos__btn { margin: 0; padding: 6px 10px; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-bone); background: var(--fs-card-dark); border: 1px solid var(--fs-border-dark); border-radius: 2px; cursor: pointer; white-space: nowrap; }
.fs-pos__btn:hover { border-color: var(--fs-gold); color: var(--fs-gold); }
.fs-pos__btn--gps { border-color: var(--fs-gold); color: var(--fs-gold); }
.fs-pos__btn--gps:hover { background: var(--fs-gold); color: var(--fs-dark-base); }
.fs-pos__btn.is-done { color: var(--fs-gold); border-color: var(--fs-gold); }
/* a member's positions: the card's own lines until the script dresses them */
.fs-pos__src { display: flex; flex-direction: column; gap: 6px; }
.fs-pos__src p, .fs-pos__src .fs-positions p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fs-body-dark); font-variant-numeric: tabular-nums; }
.fs-pos__src:has([data-fs-positions]) + [data-fs-pos-tocome] { display: none; }
.fs-pos__src .fs-positions { display: flex; flex-direction: column; gap: 6px; }
.fs-pos__pt { display: flex; flex-direction: column; gap: 2px; }
.fs-pos__pt-n { font-family: var(--fs-font-signage); font-weight: 600; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-pos__pt-d { font-size: 16px; line-height: 1.35; color: var(--fs-bone); font-variant-numeric: tabular-nums; }
.fs-pos__pt-s { font-size: 12.5px; line-height: 1.5; color: var(--fs-muted-dark); }
/* the positions card never shows inside a post's flow (the Mine overview and the plain record wrapper render {{content}} in the page) */
.fs-positions { display: none; }
.fs-pos__src .fs-positions { display: flex; }
.fs-pos__camps, .fs-camps { display: none; } /* the camps card never shows in a page's flow either */
@media (max-width: 1100px) {
.fs-mr-band__facts--pos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-mr--sea .fs-mr-band__facts--pos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-mr-band__facts--pos .fs-mr-band__cell--aka { grid-column: 1 / -1; }
.fs-mr-band__facts--pos .fs-mr-band__cell--pos { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
}
@media (max-width: 767px) {
.fs-mr-band__facts--pos { grid-template-columns: minmax(0, 1fr); }
.fs-mr--sea .fs-mr-band__facts--pos { grid-template-columns: minmax(0, 1fr); }
.fs-pos__row { flex-direction: column; }
.fs-pos__thumb { width: 100%; max-width: 420px; height: 120px; }
}
/* ---- 2. Pins (shared by the small maps and the map page) ---- */
.fs-pin { box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; background: var(--fs-gold); border: 2px solid var(--fs-ink); box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.fs-pin--camp { border-radius: 2px; transform: rotate(45deg); background: #FFFDF8; border: 3px solid var(--fs-gold); box-shadow: 0 0 0 1.5px var(--fs-ink), 0 2px 6px rgba(0,0,0,0.35); }
.fs-pin--soon { background: #CFC5AE; border-color: #736958; }
.fs-pin--place { background: transparent; border: 3px solid var(--fs-ink); box-shadow: 0 0 0 2px rgba(255,253,248,0.9); }
.fs-pin--small { width: 12px; height: 12px; border-width: 1.5px; }
.fs-pin.is-open { box-shadow: 0 0 0 5px rgba(173,76,43,0.38), 0 2px 8px rgba(0,0,0,0.4); border-color: var(--fs-red); }
/* the cluster's count sits in the middle of its circle: Leaflet's own stylesheet loads after this one and
sets .leaflet-marker-icon to display:block, so the rule needs its class too (1.22.2) */
.fs-cl, .leaflet-marker-icon.fs-cl { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 34px; height: 34px; border-radius: 50%; background: var(--fs-gold); border: 2px solid var(--fs-ink); box-shadow: 0 0 0 4px rgba(201,162,39,0.35), 0 2px 8px rgba(0,0,0,0.35); font-family: var(--fs-font-signage); font-weight: 700; font-size: 14px; line-height: 1; color: var(--fs-ink); }
.fs-cl span { display: block; line-height: 1; }
.fs-cl--camp, .leaflet-marker-icon.fs-cl--camp { background: #FFFDF8; border-color: var(--fs-gold); border-width: 3px; box-shadow: 0 0 0 1.5px var(--fs-ink), 0 2px 8px rgba(0,0,0,0.35); } /* every pin inside is at a camp */
.fs-lbl { padding: 3px 7px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fs-ink); background: rgba(255,253,248,0.94); border: 1px solid #CFC5AE; border-radius: 2px; white-space: nowrap; }
.leaflet-container .fs-lbl.leaflet-tooltip { padding: 3px 7px; border-radius: 2px; box-shadow: none; }
.leaflet-container .fs-lbl.leaflet-tooltip::before { display: none; }
/* ---- 3. The map page ---- */
.fs-mp { background: var(--fs-cream); }
.fs-mp-hero { background: var(--fs-dark-base); color: var(--fs-bone); border-bottom: 1px solid var(--fs-border-dark); }
.fs-mp-hero__in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; padding: 40px 0 36px; }
.fs-mp-hero__title { margin: 12px 0 0; font-family: var(--fs-font-signage); font-weight: 700; text-transform: uppercase; font-size: clamp(44px, 5.5vw, 76px); line-height: 0.92; letter-spacing: 0.5px; color: var(--fs-bone); text-wrap: balance; }
.fs-mp-hero__title span { color: var(--fs-gold); }
.fs-mp-hero__deck { margin: 16px 0 0; max-width: 660px; font-size: 19px; line-height: 1.6; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-mp-hero__note { max-width: 380px; font-size: 12.5px; line-height: 1.75; color: var(--fs-muted-dark); letter-spacing: 0.14em; font-weight: 600; text-transform: uppercase; }
.fs-mp-hero__note b { color: var(--fs-bone); }
.fs-mp-hero__note em { font-style: normal; color: var(--fs-gold); }
.fs-mp-sug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; margin: 0; padding: 6px 0; list-style: none; background: #FFFDF8; border: 1.5px solid #CFC5AE; border-radius: 3px; box-shadow: 0 10px 26px rgba(43,35,23,0.14); }
.fs-mp-sug[hidden] { display: none; }
.fs-mp-sug li { margin: 0; }
.fs-mp-sug button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0; padding: 9px 16px; font: inherit; font-size: 15.5px; text-align: left; color: var(--fs-ink); background: none; border: 0; cursor: pointer; }
.fs-mp-sug button:hover, .fs-mp-sug button[aria-selected="true"] { background: var(--fs-cream); }
.fs-mp-sug button b { font-weight: 700; }
.fs-mp-sug button small { flex: none; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mp-sug__h { padding: 6px 16px 2px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-mp-area { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 24px; align-items: start; padding: 24px 0 36px; }
.fs-mp-frame { position: relative; isolation: isolate; scroll-margin-top: 84px; height: min(74vh, 760px); min-height: 440px; overflow: hidden; border: 1px solid #CFC5AE; border-radius: 3px; background: #E9E3D3; box-shadow: var(--fs-shadow-card); }
.fs-mp-map { position: absolute; inset: 0; z-index: 0; font-family: var(--fs-font-serif); }
.fs-mp-frame .leaflet-container { font: inherit; background: #E9E3D3; }
.fs-mp-frame .leaflet-control-zoom { border: 1.5px solid #CFC5AE; border-radius: 3px; box-shadow: 0 1px 0 rgba(43,35,23,0.06), 0 10px 26px rgba(43,35,23,0.12); overflow: hidden; }
.fs-mp-frame .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; font-family: var(--fs-font-serif); font-size: 22px; color: var(--fs-ink); background: #FFFDF8; border-bottom: 1px solid #E8E1D4; }
.fs-mp-frame .leaflet-control-zoom a:hover { background: var(--fs-cream); color: var(--fs-ink); }
.fs-mp-frame .leaflet-bar a.leaflet-disabled { color: #BBB; }
.fs-mp-frame .leaflet-control-attribution { font-family: var(--fs-font-signage); font-weight: 500; font-size: 10.5px; letter-spacing: 0.04em; color: var(--fs-body-cream); background: rgba(255,253,248,0.85); }
.fs-mp-frame .leaflet-control-attribution a { color: var(--fs-red); }
.fs-mp-frame .leaflet-control-scale-line { font-family: var(--fs-font-signage); font-weight: 600; font-size: 10.5px; letter-spacing: 0.12em; color: var(--fs-ink); background: rgba(255,253,248,0.8); border-color: var(--fs-ink); }
.fs-mp-tools { position: absolute; left: 12px; top: 96px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
/* 1.22.6: the map alone, the size of the screen. Pinned over the window where the browser's own full
screen isn't allowed; in the browser's full screen the same rules apply to the frame. */
.fs-mp-frame.is-full { position: fixed; inset: 0; z-index: 4000; width: auto; height: 100vh; height: 100dvh; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.fs-mp-frame:fullscreen { width: 100%; height: 100%; }
html.fs-mp-locked, html.fs-mp-locked body { overflow: hidden; }
.fs-mp-frame.is-full .fs-mp-card { max-height: 70%; }
.fs-mp-tool { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 14px; font-weight: 700; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-ink); background: #FFFDF8; border: 1.5px solid #CFC5AE; border-radius: 3px; cursor: pointer; box-shadow: 0 1px 0 rgba(43,35,23,0.06), 0 10px 26px rgba(43,35,23,0.12); }
.fs-mp-tool[aria-expanded="true"], .fs-mp-tool:hover { border-color: var(--fs-ink); }
.fs-mp-tool svg { flex: none; }
.fs-mp-layers { position: absolute; left: 12px; top: 144px; z-index: 1001; width: 290px; max-width: calc(100% - 24px); padding: 14px 16px 16px; background: #FFFDF8; border: 1.5px solid #CFC5AE; border-radius: 3px; box-shadow: 0 1px 0 rgba(43,35,23,0.06), 0 14px 34px rgba(43,35,23,0.18); display: flex; flex-direction: column; gap: 10px; }
.fs-mp-layers[hidden] { display: none; }
.fs-mp-layers__h { display: flex; align-items: center; justify-content: space-between; font-family: var(--fs-font-signage); font-weight: 700; font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-ink); }
.fs-mp-layer { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.fs-mp-layer input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--fs-ink); flex: none; }
.fs-mp-layer b { display: block; font-size: 15px; color: var(--fs-ink); }
.fs-mp-layer small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--fs-muted-cream); }
.fs-mp-layer.is-off { opacity: 0.75; }
.fs-mp-key { position: absolute; right: 12px; top: 12px; z-index: 1000; display: flex; flex-direction: column; gap: 6px; padding: 9px 12px; background: rgba(255,253,248,0.94); border: 1px solid #CFC5AE; border-radius: 3px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fs-ink); }
.fs-mp-key div { display: flex; align-items: center; gap: 8px; }
.fs-mp-key .fs-pin { width: 12px; height: 12px; border-width: 1.5px; flex: none; }
.fs-mp-key .fs-pin--camp { width: 11px; height: 11px; border-width: 2.5px; }
.fs-mp-mock { position: absolute; left: 12px; bottom: 44px; z-index: 1000; padding: 5px 9px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-red); background: rgba(255,253,248,0.94); border: 1px solid #CFC5AE; border-radius: 2px; }
.fs-mp-frame .leaflet-popup-content-wrapper { padding: 0; border-radius: 3px; background: #FFFDF8; color: var(--fs-ink); box-shadow: 0 1px 0 rgba(43,35,23,0.06), 0 18px 44px rgba(43,35,23,0.28); border: 1px solid #CFC5AE; }
.fs-mp-frame .leaflet-popup-content { margin: 0; width: 330px !important; max-width: calc(100vw - 60px); max-height: max(300px, calc(min(74vh, 760px) - 150px)); overflow: auto; overscroll-behavior: contain; font-family: var(--fs-font-serif); line-height: 1.5; }
.fs-mp-frame .leaflet-popup-tip { background: #FFFDF8; border: 1px solid #CFC5AE; border-top: 0; border-left: 0; }
.fs-mp-frame .leaflet-popup-close-button { right: 8px; top: 8px; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: rgba(19,17,16,0.72); color: var(--fs-bone); font: 20px/30px var(--fs-font-serif); text-align: center; }
.fs-mp-frame .leaflet-popup-close-button:hover { background: var(--fs-ink); color: var(--fs-bone); }
.fs-mp-pop__photo { display: block; width: 100%; height: 118px; object-fit: cover; object-position: 50% 35%; border-radius: 3px 3px 0 0; }
.fs-mp-pop__plate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 72px; color: var(--fs-gold); background: radial-gradient(circle at 50% 30%, #3A332A, #1B1815 70%); font-family: var(--fs-font-signage); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; border-radius: 3px 3px 0 0; }
.fs-mp-pop__plate small { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-mp-pop__body { display: flex; flex-direction: column; gap: 7px; padding: 12px 16px 14px; }
.fs-mp-pop__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mp-kind { display: inline-block; padding: 3px 7px; border-radius: 2px; font-family: var(--fs-font-signage); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; background: var(--fs-ink); color: var(--fs-cream); }
.fs-mp-kind--soon { background: #E8E1D4; color: var(--fs-body-cream-2); }
.fs-mp-kind--camp { background: var(--fs-gold); color: var(--fs-dark-base); }
.fs-mp-pop__title { margin: 0; font-size: 25px; line-height: 1.08; font-weight: 700; color: var(--fs-ink); }
.fs-mp-pop__pic { display: block; }
.fs-mp-pop__tl { color: inherit; text-decoration: none; }
.fs-mp-pop__tl:hover, .fs-mp-pop__tl:focus-visible { color: var(--fs-red); }
.fs-mp-pop__pic:focus-visible, .fs-mp-pop__tl:focus-visible { outline: 2px solid var(--fs-gold); outline-offset: 2px; }
.fs-mp-pop__meta { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fs-body-cream); }
.fs-mp-pos { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--fs-cream); border: 1px solid var(--fs-border-cream); border-radius: 2px; }
.fs-mp-pos__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mp-pos__acts { display: flex; gap: 6px; }
.fs-mp-pos__n { font-size: 15px; line-height: 1.35; color: var(--fs-ink); font-variant-numeric: tabular-nums; }
.fs-mp-pos__n b { display: block; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mp-pos__d { font-size: 12px; line-height: 1.5; color: var(--fs-muted-cream); }
.fs-mp-mini { margin: 0; padding: 4px 8px; font-family: var(--fs-font-signage); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-ink); background: #FFFDF8; border: 1px solid #CFC5AE; border-radius: 2px; cursor: pointer; white-space: nowrap; }
.fs-mp-mini:hover { border-color: var(--fs-ink); }
.fs-mp-mini--g { border-color: var(--fs-gold); background: rgba(201,162,39,0.16); }
.fs-mp-mini.is-done { background: var(--fs-ink); color: var(--fs-cream); border-color: var(--fs-ink); }
.fs-mp-gate { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--fs-dark-base); color: var(--fs-body-dark); border-radius: 2px; }
.fs-mp-gate__h { display: flex; align-items: center; gap: 8px; font-family: var(--fs-font-signage); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-gold); }
.fs-mp-gate p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.fs-mp-gate a { color: var(--fs-gold); font-weight: 700; }
.fs-mp-pop__btn { display: block; margin: 2px 0 0; padding: 11px 20px; text-align: center; font-family: var(--fs-font-signage); font-weight: 700; font-size: 13.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fs-dark-base); background: var(--fs-gold); border-radius: 2px; text-decoration: none; }
.fs-mp-pop__btn:hover { background: var(--fs-gold-hover); color: var(--fs-dark-base); }
.fs-mp-pop__btn--line { background: #FFFDF8; color: var(--fs-ink); border: 1.5px solid #CFC5AE; }
.fs-mp-pop__btn--line:hover { background: #FFFDF8; border-color: var(--fs-ink); color: var(--fs-ink); }
.fs-mp-pop__foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; line-height: 1.5; color: var(--fs-body-cream-2); }
.fs-mp-pop__foot a { color: var(--fs-red); font-family: var(--fs-font-signage); font-weight: 700; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.fs-mp-camp-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fs-mp-camp-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--fs-ink); background: var(--fs-cream); border: 1px solid var(--fs-border-cream); border-radius: 2px; text-decoration: none; }
.fs-mp-camp-list a:hover { border-color: var(--fs-gold); }
.fs-mp-camp-list img, .fs-mp-camp-list .fs-mp-pop__plate { width: 52px; height: 40px; flex: none; object-fit: cover; border-radius: 2px; font-size: 10px; }
.fs-mp-camp-list .fs-mp-pop__plate small { font-size: 8px; }
.fs-mp-camp-list b { display: block; font-size: 16px; line-height: 1.2; }
.fs-mp-camp-list small { display: block; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-bronze); }
/* Leaflet's own stylesheet loads after this one and gives every link in the map its blue and every
paragraph in a popup a 1.3em margin; the card's own colours and spacing win here (1.22.2) */
.leaflet-container .fs-mp-pop a { color: var(--fs-red); }
.leaflet-container .fs-mp-pop a.fs-mp-pop__tl, .leaflet-container .fs-mp-pop a.fs-mp-pop__pic { color: inherit; }
.leaflet-container .fs-mp-pop a.fs-mp-pop__tl:hover, .leaflet-container .fs-mp-pop a.fs-mp-pop__tl:focus-visible { color: var(--fs-red); }
.leaflet-container .fs-mp-pop .fs-mp-gate a { color: var(--fs-gold); }
.leaflet-container .fs-mp-pop a.fs-mp-pop__btn { color: var(--fs-dark-base); }
.leaflet-container .fs-mp-pop a.fs-mp-pop__btn--line { color: var(--fs-ink); }
.leaflet-container .fs-mp-pop .fs-mp-camp-list a { color: var(--fs-ink); }
.leaflet-popup-content .fs-mp-pop p { margin: 0; }
/* 1.22.6: the province's record for a clicked MINFILE symbol */
.fs-mp-mf { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 12px; font-family: var(--fs-font-serif); }
.fs-mp-mf p { margin: 0; }
.fs-mp-mf__k { font-family: var(--fs-font-signage); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mp-mf__item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--fs-cream); border: 1px solid var(--fs-border-cream); border-radius: 2px; }
.fs-mp-mf__n { font-size: 16px; line-height: 1.3; color: var(--fs-ink); }
.fs-mp-mf__n b { font-family: var(--fs-font-signage); font-weight: 700; letter-spacing: 0.06em; }
.fs-mp-mf__d { font-size: 13px; line-height: 1.5; color: var(--fs-body-cream-2); font-variant-numeric: tabular-nums; }
.fs-mp-mf__own { font-size: 13.5px; line-height: 1.5; color: var(--fs-ink); }
.fs-mp-mf__own span { color: var(--fs-body-cream-2); }
.fs-mp-mf__l { font-family: var(--fs-font-signage); font-weight: 700; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.fs-mp-mf__none { font-size: 14px; line-height: 1.5; color: var(--fs-body-cream); }
.fs-mp-mf__src { font-size: 12px; line-height: 1.5; color: var(--fs-muted-cream); }
.leaflet-container .fs-mp-mf a { color: var(--fs-red); }
.fs-mp-frame .fs-mp-mfpop .leaflet-popup-content { width: 300px !important; }
.leaflet-popup-content .fs-mp-mf p { margin: 0; }
/* the card on a phone: a sheet over the foot of the map */
.fs-mp-card { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1002; max-height: 74%; overflow: auto; background: #FFFDF8; border-top: 1px solid #CFC5AE; border-radius: 12px 12px 0 0; box-shadow: 0 -12px 30px rgba(43,35,23,0.22); }
.fs-mp-card[hidden] { display: none; }
.fs-mp-card__x { position: absolute; right: 8px; top: 8px; z-index: 2; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(19,17,16,0.72); color: var(--fs-bone); font: 20px/30px var(--fs-font-serif); text-align: center; cursor: pointer; }
.fs-mp-card .fs-mp-pop__photo { border-radius: 12px 12px 0 0; height: 132px; }
.fs-mp-card .fs-mp-pop__plate { border-radius: 12px 12px 0 0; }
/* the list beside the map */
.fs-mp-list { display: flex; flex-direction: column; min-width: 0; max-height: min(74vh, 760px); min-height: 440px; background: #FFFDF8; border: 1px solid #CFC5AE; border-radius: 3px; box-shadow: var(--fs-shadow-card); overflow: hidden; }
.fs-mp-list__h { padding: 16px 20px 12px; border-bottom: 1px solid var(--fs-border-cream); }
.fs-mp-list__t { margin: 0; font-size: 21px; font-weight: 700; color: var(--fs-ink); }
.fs-mp-list__c { margin: 4px 0 0; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mp-list__c b { color: var(--fs-ink); }
.fs-mp-rows { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 0; list-style: none; }
.fs-mp-rows li { margin: 0; }
/* a row (1.22.2; reversed in 1.30.2: the row shows the mine on the map, the link at the right opens the record) */
.fs-mp-row { display: flex; align-items: stretch; margin: 0; border-bottom: 1px solid var(--fs-border-cream); }
.fs-mp-row:hover, .fs-mp-row.is-on { background: var(--fs-cream); }
.fs-mp-row.is-on { box-shadow: inset 3px 0 0 var(--fs-gold); }
.fs-mp-row__main { display: flex; flex: 1; min-width: 0; gap: 14px; align-items: center; margin: 0; padding: 12px 8px 12px 20px; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; text-align: left; color: inherit; text-decoration: none; cursor: pointer; }
.fs-mp-row__main:hover .fs-mp-row__t { color: var(--fs-red); }
.fs-mp-row__main:focus-visible { outline: 2px solid var(--fs-gold); outline-offset: -2px; }
.fs-mp-row__thumb { display: block; flex: none; width: 64px; height: 48px; overflow: hidden; border-radius: 2px; background: var(--fs-dark-base); }
.fs-mp-row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-mp-row__thumb .fs-mp-pop__plate { height: 100%; font-size: 10.5px; border-radius: 2px; }
.fs-mp-row__thumb .fs-mp-pop__plate small { font-size: 8px; }
.fs-mp-row__b { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.fs-mp-row__w { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mp-row__t { display: block; margin: 0; font-family: var(--fs-font-serif); font-size: 17px; line-height: 1.2; font-weight: 700; color: var(--fs-ink); }
.fs-mp-row__d { display: block; font-family: var(--fs-font-serif); font-size: 13px; line-height: 1.45; color: var(--fs-body-cream-2); }
.fs-mp-row__d i { font-style: normal; color: var(--fs-muted-cream); }
.fs-mp-empty { padding: 28px 20px; font-size: 15px; line-height: 1.6; color: var(--fs-body-cream-2); }
.fs-mp-list__f { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 16px; border-top: 1px solid var(--fs-border-cream); background: var(--fs-cream); font-family: var(--fs-font-signage); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mp-list__f a { color: var(--fs-red); font-weight: 700; }
.fs-mp-url { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fs-mp-url code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 10px; font-family: var(--fs-font-mono); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--fs-ink); background: #FFFDF8; border: 1px solid #CFC5AE; border-radius: 2px; }
.fs-mp-list__f p { margin: 0; font-family: var(--fs-font-serif); font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; line-height: 1.5; color: var(--fs-body-cream); }
.fs-mp.has-js .fs-mp-source { display: none; }
.fs-mp-source { columns: 3; column-gap: 40px; margin: 0 0 30px; padding: 0; list-style: none; }
/* the strip under the map (1.22.2: ruled columns under the title, the site's notice the full
width below them, the sources as four entries) */
.fs-mp-strip { padding: 56px 0 46px; background: var(--fs-panel); border-top: 1px solid var(--fs-border-cream); border-bottom: 1px solid var(--fs-border-cream); }
.fs-mp-strip__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.fs-mp-strip__k { font-size: 12.5px; letter-spacing: 0.24em; color: var(--fs-red); }
.fs-mp-strip__t { margin: 10px 0 0; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.08; font-weight: 700; color: var(--fs-ink); text-wrap: balance; }
.fs-mp-strip__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 0 0 2px; }
.fs-mp-strip__more { font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-red); border-bottom: 1px solid rgba(173,76,43,0.35); }
.fs-mp-strip__more:hover, .fs-mp-strip__more:focus-visible { border-bottom-color: currentColor; }
.fs-mp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; border-top: 1px solid var(--fs-border-cream); }
.fs-mp-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 26px 34px 4px; border-left: 1px solid var(--fs-border-cream); }
.fs-mp-col:first-child { padding-left: 0; border-left: 0; }
.fs-mp-col:last-child { padding-right: 0; }
.fs-mp-col h3 { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 21px; line-height: 1.2; font-weight: 700; color: var(--fs-ink); text-wrap: balance; }
.fs-mp-col h3 .fs-pin { flex: none; width: 15px; height: 15px; margin-top: 5px; box-shadow: none; } /* on the first line's middle when the title wraps */
.fs-mp-col h3 .fs-pin--camp { width: 13px; height: 13px; margin: 6px 1px 0; border-width: 2.5px; box-shadow: 0 0 0 1.5px var(--fs-ink); }
.fs-mp-col p { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.62; color: var(--fs-body-cream); text-wrap: pretty; }
.fs-mp-col p a { color: var(--fs-red); font-weight: 700; }
.fs-mp .fs-mp-notice { margin-top: 38px; }
/* on a wide screen the notice reads in two parts: the warning, and beside it, past a rule, the men it is about */
@media (min-width: 900px) {
.fs-mp .fs-mp-notice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 0.38fr); grid-template-rows: auto 1fr; column-gap: 44px; }
.fs-mp-notice .fs-notice__title, .fs-mp-notice p { grid-column: 1; }
.fs-mp-notice p { grid-row: 2; }
.fs-yb .fs-mp-notice p + p { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; gap: 6px; margin: 0; padding: 4px 0 4px 30px; border-left: 1px solid #3A332A; text-wrap: balance; }
}
.fs-mp-srcs { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.55fr) minmax(0, 0.85fr) minmax(0, 1.3fr); gap: 16px 34px; margin: 34px 0 0; padding: 20px 0 0; border-top: 1px solid var(--fs-border-cream); }
.fs-mp-srcs div { min-width: 0; }
.fs-mp-srcs dt { font-weight: 600; font-size: 11px; line-height: 1.3; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mp-srcs dd { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--fs-muted-cream); text-wrap: pretty; }
@media (max-width: 1100px) {
.fs-mp-srcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
.fs-mp-cols { grid-template-columns: minmax(0, 1fr); }
.fs-mp-col, .fs-mp-col:first-child, .fs-mp-col:last-child { padding: 22px 0 2px; border-left: 0; }
.fs-mp-col + .fs-mp-col { margin-top: 20px; border-top: 1px solid var(--fs-border-cream); }
.fs-mp-col p { max-width: 680px; }
}
@media (max-width: 599px) {
.fs-mp-strip { padding: 44px 0 36px; }
.fs-mp-strip__acts .fs-yb-btn { flex: 1 1 100%; }
.fs-mp-srcs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 1100px) {
.fs-mp-area { grid-template-columns: minmax(0, 1fr); }
.fs-mp-frame { height: 62vh; min-height: 380px; }
.fs-mp-list { max-height: none; min-height: 0; }
.fs-mp-rows { max-height: 480px; }
.fs-mp-source { columns: 2; }
}
@media (max-width: 767px) {
.fs-mp-hero__in { padding: 30px 0 28px; }
.fs-mp-hero__note { max-width: none; }
.fs-mp-area { padding: 14px 0 28px; gap: 14px; }
.fs-mp-frame { height: 58vh; min-height: 340px; border-left: 0; border-right: 0; border-radius: 0; margin: 0 -20px; } /* full width: the wrap's phone gutter is 20px */
.fs-mp-tools { top: 86px; }
.fs-mp-layers { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; border-radius: 12px 12px 0 0; border-left: 0; border-right: 0; border-bottom: 0; }
.fs-mp-key { display: none; }
.fs-mp-source { columns: 1; }
.fs-mp-frame .leaflet-popup-content { width: 290px !important; }
}
@media (prefers-reduced-motion: reduce) {
.fs-mp-frame .leaflet-zoom-anim .leaflet-zoom-animated, .fs-mp-frame .leaflet-fade-anim .leaflet-popup { transition: none; }
}
/* ---- 4. The links in: the Mines page's button beside Browse by Region ---- */
.fs-mn-regions__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; margin: 0 0 16px; }
.fs-mn .fs-mn-regions__head .fs-mn-regions__title { margin: 0; }
.fs-mn-regions__map { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; }
.fs-mn-regions__map .fs-signage { font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mn-tag__all { display: flex; flex-wrap: wrap; gap: 10px; }
/* ======================================================================
1.22.3 · Send a Position (page-send-a-position.hbs): the Contact form's
system, with the fields a position needs
====================================================================== */
.fs-sp .fs-ct-write { padding-top: clamp(36px, 4.5vw, 56px); }
.fs-sp-form textarea.fs-sp-pos { min-height: 0; height: auto; font-variant-numeric: tabular-nums; }
.fs-sp-form textarea.fs-sp-more { min-height: 112px; }
.fs-ct .fs-sp-hint { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fs-muted-cream); }
.fs-ct .fs-sp-hint--up { margin: -2px 0 10px; }
.fs-sp-ask { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.fs-sp-ask legend { padding: 0; float: left; width: 100%; } /* the label's own type; the float clears the legend's own box */
.fs-sp-ask__opts { display: flex; flex-wrap: wrap; gap: 10px 12px; clear: both; }
.fs-sp-opt { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: 15.5px; line-height: 1.3; color: var(--fs-ink); background: #fff; border: 1.5px solid #CFC5AE; border-radius: var(--fs-radius); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.fs-sp-opt:hover { border-color: var(--fs-gold); }
.fs-sp-opt input { -webkit-appearance: none; appearance: none; display: inline-grid; place-content: center; flex: none; box-sizing: border-box; width: 18px; height: 18px; margin: 0; border: 1.5px solid #8F8370; border-radius: 50%; background: #fff; cursor: pointer; } /* 1.23.5: drawn, so it is a round button in every browser and every screen capture */
.fs-sp-opt input::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fs-ink); transform: scale(0); transition: transform 0.12s ease; }
.fs-sp-opt input:checked { border-color: var(--fs-ink); }
.fs-sp-opt input:checked::before { transform: scale(1); }
.fs-sp-opt input:focus-visible { outline: none; }
.fs-sp-opt:has(input:checked) { border-color: var(--fs-gold); background: #FFFCF2; }
.fs-sp-opt:has(input:focus-visible) { outline: 2px solid var(--fs-ink); outline-offset: 2px; }
.fs-sp-ask.is-missing .fs-sp-opt { border-color: var(--fs-red); }
.fs-sp-back { padding: 38px 0 44px; background: var(--fs-panel); border-top: 1px solid var(--fs-border-cream); }
.fs-sp-back__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.fs-sp .fs-sp-back__t { margin: 0; font-size: 20px; font-weight: 700; color: var(--fs-ink); }
.fs-sp .fs-sp-back .fs-yb-btn--line { border-color: var(--fs-ink); color: var(--fs-ink); }
.fs-sp .fs-sp-back .fs-yb-btn--line:hover { background: var(--fs-ink); color: var(--fs-cream); }
@media (max-width: 599px) {
.fs-sp-opt { flex: 1 1 100%; }
.fs-sp-back .fs-yb-btn { flex: 1 1 100%; }
}
/* ======================================================================
1.23.0 · The gate (partials/gate.hbs): sign in with a code, or join the
list, without leaving the page. Dark by default (the band, the map
card's box, the sign-in page); .fs-gate--light on cream.
====================================================================== */
.fs-gate { display: flex; flex-direction: column; gap: 10px; min-width: 0; font-family: var(--fs-font-serif); color: var(--fs-body-dark); text-align: left; }
.fs-gate p { margin: 0; }
.fs-gate [hidden] { display: none !important; }
.fs-gate__form, .fs-gate__sent, .fs-gate__code { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fs-gate__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fs-gate__lbl { font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-gate__email, .fs-gate__digits { width: 100%; box-sizing: border-box; margin: 0; padding: 11px 13px; font-family: var(--fs-font-serif); font-size: 16px; line-height: 1.4; color: var(--fs-bone); background: var(--fs-dark-raised); border: 1px solid #4A4238; border-radius: var(--fs-radius); outline: none; }
.fs-gate__email:focus, .fs-gate__digits:focus { border-color: var(--fs-gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.22); }
.fs-gate__digits { max-width: 200px; font-family: var(--fs-font-mono); font-size: 22px; letter-spacing: 0.3em; text-align: center; }
.fs-gate__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-gate__btn { flex: 1 1 auto; margin: 0; padding: 10px 14px; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; border-radius: var(--fs-radius); cursor: pointer; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.fs-gate__btn--in { color: var(--fs-dark-base); background: var(--fs-gold); border: 1.5px solid var(--fs-gold); }
.fs-gate__btn--in:hover { background: var(--fs-gold-hover); border-color: var(--fs-gold-hover); }
.fs-gate__btn--up { color: var(--fs-bone); background: transparent; border: 1.5px solid rgba(244,238,226,0.45); }
.fs-gate__btn--up:hover { border-color: var(--fs-gold); color: var(--fs-gold); }
.fs-gate__btn:disabled { opacity: 0.6; cursor: wait; }
.fs-gate__how { font-size: 13px; line-height: 1.55; color: var(--fs-muted-dark); text-wrap: pretty; }
.fs-gate__how b { color: var(--fs-body-dark); font-weight: 600; }
.fs-gate__to { font-size: 14.5px; line-height: 1.5; color: var(--fs-body-dark); }
.fs-gate__to b { color: var(--fs-bone); word-break: break-all; }
.fs-gate__txt { margin: 0; padding: 0; font: inherit; color: var(--fs-gold); background: none; border: 0; border-bottom: 1px solid rgba(201,162,39,0.4); cursor: pointer; }
.fs-gate__txt:hover { border-bottom-color: currentColor; }
.fs-gate__msg { min-height: 0; font-size: 13.5px; line-height: 1.5; color: var(--fs-body-dark); }
.fs-gate__msg:empty { display: none; }
.fs-gate__msg.is-error { color: #E2A08A; }
.fs-gate__msg.is-ok { color: var(--fs-gold); }
.fs-gate :focus-visible { outline: 2px solid var(--fs-gold); outline-offset: 2px; }
/* compact: in a record's Position cell and in a map card */
.fs-gate--compact { gap: 8px; }
.fs-gate--compact .fs-gate__email, .fs-gate--compact .fs-gate__digits { padding: 9px 12px; font-size: 15px; }
.fs-gate--compact .fs-gate__btn { padding: 9px 12px; font-size: 11px; }
.fs-gate--compact .fs-gate__how { font-size: 12.5px; }
/* in the band's Position cell */
.fs-pos .fs-gate { margin-top: 4px; max-width: 520px; }
/* in the map card's dark box */
.fs-mp-gate .fs-gate { margin-top: 2px; }
.fs-mp-gate .fs-gate__btn { flex: 1 1 100%; }
.leaflet-container .fs-mp-gate .fs-gate__txt { color: var(--fs-gold); }
/* the sign-in page */
.fs-mb .fs-gate { gap: 14px; }
.fs-mb .fs-gate__email { font-size: 17px; padding: 13px 16px; }
.fs-mb .fs-gate__btn { padding: 13px 18px; font-size: 13px; }
/* light, on cream */
.fs-gate--light { color: var(--fs-body-cream); }
.fs-gate--light .fs-gate__lbl { color: var(--fs-bronze); }
.fs-gate--light .fs-gate__email, .fs-gate--light .fs-gate__digits { color: var(--fs-ink); background: #fff; border-color: #CFC5AE; }
.fs-gate--light .fs-gate__btn--up { color: var(--fs-ink); border-color: var(--fs-ink); }
.fs-gate--light .fs-gate__how, .fs-gate--light .fs-gate__msg { color: var(--fs-body-cream-2); }
.fs-gate--light .fs-gate__to b { color: var(--fs-ink); }
.fs-gate--light .fs-gate__txt { color: var(--fs-red); border-bottom-color: rgba(173,76,43,0.4); }
.fs-gate--light .fs-gate__msg.is-error { color: var(--fs-red); }
/* 1.23.1 · MINFILE's colours: the key when the layer is on, the list under its tick, the mark in the card */
.fs-mf-x { flex: none; display: inline-block; vertical-align: -2px; }
.fs-mp-key__mf { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 7px; border-top: 1px solid #E2DAC8; }
.fs-mp-key__mf[hidden] { display: none; }
.fs-mp-key__h { font-weight: 700; font-size: 10px; letter-spacing: 0.2em; color: var(--fs-bronze); }
.fs-mp-key__mf div { display: flex; align-items: center; gap: 8px; }
.fs-mp-mfkey { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 2px 0 0 27px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-ink); }
.fs-mp-mfkey label { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.fs-mp-mfkey input { width: 15px; height: 15px; margin: 0; accent-color: var(--fs-ink); flex: none; }
.fs-mp-mfkey label:has(input:not(:checked)) { color: var(--fs-muted-cream); }
.fs-mp-mfkey label:has(input:not(:checked)) .fs-mf-x { opacity: 0.35; }
.fs-mp-key__mf div.is-off { opacity: 0.35; text-decoration: line-through; }
.fs-mp-mf__d .fs-mf-x { margin-right: 5px; }
/* 1.23.1 · the Send a Position page's print: what a checked position becomes, under the notes, on a computer only
(below 1101px the form follows the notes and there is no space to fill, as on the Contact page) */
.fs-sp-print { display: none; }
@media (min-width: 1101px) {
.fs-ct .fs-sp-print { display: block; width: 100%; max-width: none; margin: auto 0 0; padding-top: 34px; } /* 1.23.2: the full width of the column, at the foot of it */
.fs-sp .fs-ct-form { align-self: stretch; display: flex; flex-direction: column; } /* the form's panel reaches the same line as the picture's foot */
.fs-sp .fs-sp-grow { flex: 1 1 auto; display: flex; flex-direction: column; } /* 1.23.5: any room left goes to "Anything else", so Send to Frank sits on that line */
.fs-sp .fs-sp-grow textarea { flex: 1 1 auto; }
.fs-sp-print img { display: block; width: 100%; height: auto; border: 8px solid var(--fs-panel); border-radius: 1px; box-shadow: 0 10px 28px rgba(43,35,23,0.16), 0 1px 0 rgba(43,35,23,0.06); }
.fs-ct .fs-sp-print figcaption { padding: 0; font-family: var(--fs-font-serif); font-style: italic; font-size: 14px; line-height: 1.45; color: var(--fs-body-cream-2); }
}
@media (min-width: 1101px) {
.fs-sp-print__go { display: inline-block; margin: 8px 0 16px; font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-red); border-bottom: 1px solid rgba(173,76,43,0.35); }
.fs-sp-print__go:hover, .fs-sp-print__go:focus-visible { border-bottom-color: currentColor; }
}
/* ================================================================
1.24.0 · The map's last pass (October 27, 2026)
Colleen, 00:07: the pins "kind of hard to get the curser to get them to open"; the key
left-aligned; "really give this a world class look". The pins get a 40 px target and a
clickable label; MINFILE is drawn point by point (fs-mfpt) with a name on hover; the key's
MINFILE rows are switches with a count; the frame's top controls keep clear of the sticky
search bar (--fs-mp-cover, set by fs-map.js); the list's Map button in the site's red.
================================================================ */
/* the pins: the mark in a 40 px box (the whole box takes the click), a little larger, lifting under the pointer */
.fs-pinbox, .leaflet-marker-icon.fs-pinbox { display: flex; align-items: center; justify-content: center; background: none; border: 0; }
.fs-pinbox .fs-pin { width: 22px; height: 22px; border-width: 2.5px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.fs-pinbox .fs-pin--camp { width: 19px; height: 19px; border-width: 3px; }
.fs-pinbox.is-hover .fs-pin, .fs-pinbox:focus-visible .fs-pin { transform: scale(1.18); box-shadow: 0 0 0 4px rgba(201,162,39,0.4), 0 3px 8px rgba(0,0,0,0.4); }
.fs-pinbox.is-hover .fs-pin--camp, .fs-pinbox:focus-visible .fs-pin--camp { transform: rotate(45deg) scale(1.18); box-shadow: 0 0 0 1.5px var(--fs-ink), 0 0 0 5px rgba(201,162,39,0.4), 0 3px 8px rgba(0,0,0,0.4); }
.fs-pinbox.is-open .fs-pin { border-color: var(--fs-red); box-shadow: 0 0 0 5px rgba(173,76,43,0.38), 0 2px 8px rgba(0,0,0,0.4); }
.fs-pinbox.is-open .fs-pin--camp { border-color: var(--fs-gold); box-shadow: 0 0 0 1.5px var(--fs-red), 0 0 0 6px rgba(173,76,43,0.38), 0 2px 8px rgba(0,0,0,0.4); }
.fs-pinbox:focus-visible { outline: none; }
/* the name label is part of the pin: it takes the click too */
.fs-lbl--pin { cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.leaflet-container .fs-lbl--pin.leaflet-tooltip:hover { background: #FFFDF8; border-color: var(--fs-ink); box-shadow: 0 2px 8px rgba(43,35,23,0.18); }
/* MINFILE, point by point: a 26 px target, the mark grows under the pointer, the keyboard reaches it */
.fs-mfpt, .leaflet-marker-icon.fs-mfpt { display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.fs-mfpt svg { display: block; transition: transform 0.12s ease; }
.fs-mfpt:hover svg, .fs-mfpt:focus-visible svg { transform: scale(1.35); }
.fs-mfpt:focus-visible { outline: 2px solid var(--fs-gold); outline-offset: -1px; border-radius: 50%; }
.fs-lbl--mf b { display: block; font-weight: 700; }
.fs-lbl--mf small { display: block; margin-top: 1px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--fs-bronze); }
.leaflet-container .fs-lbl--mf.leaflet-tooltip { padding: 4px 8px 5px; text-align: left; box-shadow: 0 2px 8px rgba(43,35,23,0.18); }
/* the key: two headings, the rows left-aligned (the panel's centring rule no longer reaches the MINFILE block),
the MINFILE rows switches with the count in view */
.fs-mp-key { gap: 5px; padding: 10px 12px 11px; min-width: 164px; }
.fs-mp-key .fs-mp-key__h { display: block; margin: 0 0 1px; font-weight: 700; font-size: 10px; letter-spacing: 0.2em; color: var(--fs-bronze); }
.fs-mp-key .fs-mp-key__mf { display: flex; flex-direction: column; align-items: stretch; gap: 3px; margin: 5px -4px 0; padding: 8px 4px 0; border-top: 1px solid #E2DAC8; }
.fs-mp-key .fs-mp-key__mf .fs-mp-key__h { padding: 0 4px; margin-bottom: 2px; }
.fs-mp-key__row { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 3px 4px; border: 0; border-radius: 2px; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; cursor: pointer; }
.fs-mp-key__row:hover { background: rgba(201,162,39,0.16); }
.fs-mp-key__row:focus-visible { outline: 2px solid var(--fs-gold); outline-offset: -2px; }
.fs-mp-key__row > span:first-of-type { flex: 1; }
.fs-mp-key__n { flex: none; min-width: 18px; text-align: right; font-size: 10px; letter-spacing: 0.04em; color: var(--fs-muted-cream); font-variant-numeric: tabular-nums; }
.fs-mp-key__row.is-off { opacity: 0.45; }
.fs-mp-key__row.is-off > span:first-of-type { text-decoration: line-through; }
.fs-mp-key__row.is-off .fs-mp-key__n { visibility: hidden; }
.fs-mp-key__busy { font-weight: 600; letter-spacing: 0.1em; color: var(--fs-muted-cream); }
.fs-mp-key__busy[hidden] { display: none; }
/* the layers panel: the four statuses one under the other (two columns broke every name in two) */
.fs-mp-mfkey { grid-template-columns: 1fr; gap: 7px; }
/* the frame's top controls keep clear of the sticky search bar (fs-map.js sets --fs-mp-cover to the overlap) */
.fs-mp-frame { --fs-mp-cover: 0px; }
.fs-mp-frame .leaflet-top { top: var(--fs-mp-cover); }
.fs-mp-tools { top: calc(96px + var(--fs-mp-cover)); }
.fs-mp-layers { top: calc(144px + var(--fs-mp-cover)); }
.fs-mp-key { top: calc(12px + var(--fs-mp-cover)); }
@media (max-width: 767px) { .fs-mp-tools { top: calc(86px + var(--fs-mp-cover)); } }
/* a card's close button: the cross white on hover (Leaflet's own rule turned it grey; Colleen, 00:17) */
.fs-mp-frame .leaflet-container a.leaflet-popup-close-button { color: #FFFDF8; }
.fs-mp-frame .leaflet-container a.leaflet-popup-close-button:hover, .fs-mp-frame .leaflet-container a.leaflet-popup-close-button:focus { background: var(--fs-ink); color: #FFFDF8; }
/* the list beside the map: a touch more room (the Map button that was here, in the site's red, went in 1.30.2) */
.fs-mp-row__main { padding: 13px 8px 13px 20px; }
.fs-mp-row__thumb { width: 72px; height: 54px; }
.fs-mp-row__t { font-size: 18px; }
.fs-mp-list__f p.fs-mp-list__tip { margin-top: -2px; font-size: 13px; color: var(--fs-muted-cream); }
/* "This spot": the coordinates of a right-clicked point, Copy, and the way to the position form */
.fs-mp-spot__d { margin: 0; font-family: var(--fs-font-serif); font-size: 19px; line-height: 1.3; color: var(--fs-ink); font-variant-numeric: tabular-nums; }
.fs-mp-spot__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 2px; }
.fs-mp-spot__acts a.fs-mp-mini { display: inline-block; text-decoration: none; }
.fs-mp-mf__l--send a { color: var(--fs-red); }
/* the Yankee Boy Story's record card: the whole record's total under MINFILE's one year (1.24.0) */
.fs-yb .fs-yb-card__src.fs-yb-card__all { margin-top: 6px; font-style: normal; color: var(--fs-ink); }
/* My Position (1.24.0): the dot, its ring, the button while it looks */
.fs-me, .leaflet-marker-icon.fs-me { box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; background: #1F5FD1; border: 3px solid #FFFDF8; box-shadow: 0 0 0 1.5px rgba(31,95,209,0.6), 0 2px 8px rgba(0,0,0,0.35); }
.fs-me::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(31,95,209,0.55); animation: fs-me-pulse 2.2s ease-out infinite; }
@keyframes fs-me-pulse { 0% { transform: scale(0.45); opacity: 0.9; } 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fs-me::after { animation: none; opacity: 0.5; transform: none; } }
.fs-mp-frame .fs-me-ring { fill: #1F5FD1; fill-opacity: 0.08; stroke: rgba(31,95,209,0.45); }
.fs-mp-tool[aria-pressed="true"] { background: var(--fs-ink); color: var(--fs-cream); border-color: var(--fs-ink); }
.fs-mp-tool.is-busy svg { animation: fs-me-spin 1.1s linear infinite; }
@keyframes fs-me-spin { to { transform: rotate(360deg); } }
/* ================================================================
1.24.1 · The Mines index: Find a Mine by Area, and the cards (October 27, 2026)
Colleen, 00:31: "sometimes we are a little flat on styling". The region tabs become a dark band
with a live map of the province (the camps, the regions named) and the regions as rows; the cards
get the years stamped on the photograph, a slow zoom under the pointer, and a firmer foot.
================================================================ */
.fs-mn-area { padding: clamp(44px, 5.5vw, 72px) 0; background: var(--fs-dark-base); color: var(--fs-body-dark); border-top: 1px solid var(--fs-border-dark); border-bottom: 1px solid var(--fs-border-dark); }
.fs-mn-area__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: clamp(26px, 4vw, 56px); align-items: center; }
.fs-mn-area__map { position: relative; display: block; height: clamp(300px, 34vw, 420px); border: 1px solid #3A332A; border-radius: 3px; overflow: hidden; background: #E9E3D3; box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 24px 60px rgba(0,0,0,0.45); isolation: isolate; text-decoration: none; transition: transform 0.4s var(--fs-ease-out, ease-out), box-shadow 0.4s var(--fs-ease-out, ease-out); }
.fs-mn-area__map:hover, .fs-mn-area__map:focus-visible { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 30px 70px rgba(0,0,0,0.55); }
.fs-mn-area__map:focus-visible { outline: 3px solid var(--fs-gold); outline-offset: 3px; }
.fs-mn-area__minimap { position: absolute; inset: 0; z-index: 0; }
.fs-mn-area__minimap .leaflet-control-container { display: none; }
.fs-mn-area__minimap .leaflet-marker-icon.fs-pin { pointer-events: none; }
.fs-mn-area__map::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,253,248,0.12), inset 0 -80px 70px -50px rgba(19,17,16,0.55); }
.fs-mn-area__open { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 9px 14px; font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-dark-base); background: var(--fs-gold); border-radius: 2px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); transition: transform 0.25s ease; }
.fs-mn-area__map:hover .fs-mn-area__open { transform: translateX(3px); }
.fs-lbl--region { padding: 4px 8px; background: rgba(19,17,16,0.86); border-color: rgba(201,162,39,0.6); color: var(--fs-bone); letter-spacing: 0.14em; }
.fs-lbl--region small { display: block; margin-top: 1px; font-size: 9.5px; letter-spacing: 0.16em; color: var(--fs-gold); }
.fs-mn-area__side { min-width: 0; }
.fs-mn .fs-mn-area__title { margin: 10px 0 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; font-weight: 700; color: var(--fs-bone); text-wrap: balance; }
.fs-mn .fs-mn-area__p { margin: 14px 0 0; max-width: 46ch; font-size: 16.5px; line-height: 1.6; color: var(--fs-body-dark); }
.fs-mn .fs-mn-area__k { margin: 26px 0 10px; }
/* the regions as rows */
.fs-mn-area .fs-mn-tabs { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--fs-border-dark); }
.fs-mn-area .fs-mn-tab { flex-direction: row; align-items: baseline; gap: 12px; min-width: 0; padding: 12px 6px 12px 2px; background: none; border: 0; border-bottom: 1px solid var(--fs-border-dark); border-radius: 0; box-shadow: none; color: var(--fs-bone); transition: background 0.2s ease, padding 0.2s ease; }
.fs-mn-area .fs-mn-tab:hover, .fs-mn-area .fs-mn-tab:focus-visible { transform: none; box-shadow: none; background: rgba(255,253,248,0.04); padding-left: 8px; }
.fs-mn-area .fs-mn-tab.is-on { background: rgba(201,162,39,0.12); color: var(--fs-bone); padding-left: 8px; box-shadow: inset 3px 0 0 var(--fs-gold); }
.fs-mn-area .fs-mn-tab__name { font-size: 18px; }
.fs-mn-area .fs-mn-tab__n { color: var(--fs-muted-dark-2, #9E9282); font-size: 11px; }
.fs-mn-area .fs-mn-tab.is-on .fs-mn-tab__n { color: var(--fs-gold); }
.fs-mn-tab__arrow { display: none; margin-left: auto; font-family: var(--fs-font-serif); font-size: 18px; color: var(--fs-gold); transition: transform 0.2s ease; }
.fs-mn-area .fs-mn-tab__arrow { display: inline; }
.fs-mn-area .fs-mn-tab:hover .fs-mn-tab__arrow { transform: translateX(3px); }
.fs-mn .fs-mn-area__go { margin: 22px 0 0; }
@media (max-width: 1100px) {
.fs-mn-area__in { grid-template-columns: minmax(0, 1fr); }
.fs-mn-area__map { height: clamp(260px, 46vw, 380px); }
}
@media (max-width: 767px) {
.fs-mn-area { padding: 36px 0 40px; }
.fs-mn-area__map { height: 250px; }
.fs-mn-area .fs-mn-tab { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .fs-mn-area__map, .fs-mn-area__open, .fs-mn-tab__arrow { transition: none; } }
/* the cards: the years on the photograph, the photograph breathing under the pointer, the foot */
.fs-mn-card__media { overflow: hidden; }
.fs-mn-card__media img { transition: transform 0.7s var(--fs-ease-out, ease-out); }
a.fs-mn-card__link:hover .fs-mn-card__media img, a.fs-mn-card__link:focus-visible .fs-mn-card__media img { transform: scale(1.04); }
.fs-mn-card__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 48%; pointer-events: none; background: linear-gradient(180deg, rgba(19,17,16,0) 0%, rgba(19,17,16,0.58) 100%); }
.fs-mn-card__stamp { position: absolute; left: 14px; bottom: 12px; z-index: 1; font-weight: 600; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-bone); text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.fs-mn-card__badge { z-index: 1; }
.fs-mn .fs-mn-card__hook { margin-top: 12px; }
.fs-mn-card__cta { display: flex; align-items: center; gap: 8px; padding-top: 16px; }
.fs-mn-card__cta::after { content: ""; flex: 1; height: 1px; background: var(--fs-border-cream); transition: background 0.2s ease; }
a.fs-mn-card__link:hover .fs-mn-card__cta::after { background: var(--fs-red); }
@media (prefers-reduced-motion: reduce) { .fs-mn-card__media img { transition: none; } a.fs-mn-card__link:hover .fs-mn-card__media img { transform: none; } }
/* the camp always on its own line between the badge and the mine's name, in the map's rows and cards (Colleen, 00:53 and 00:56) */
.fs-mp-row__camp { display: block; margin: 2px 0 1px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-bronze); }
.leaflet-popup-content .fs-mp-pop p.fs-mp-pop__where, .fs-mp-pop__where { margin: 0 0 -2px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mp-spot__t { margin: 0; font-family: var(--fs-font-serif); font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--fs-ink); }
.fs-mp-mf__d b { font-weight: 700; color: var(--fs-ink); }
/* 1.24.2 · the height under the pointer, in the map's corner */
.fs-mp-elev { position: absolute; left: 12px; bottom: 34px; z-index: 1000; display: flex; align-items: baseline; gap: 10px; padding: 6px 10px 6px 11px; background: rgba(255,253,248,0.94); border: 1px solid #CFC5AE; border-radius: 2px; font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fs-ink); font-variant-numeric: tabular-nums; }
.fs-mp-elev__u { margin: 0 0 0 -4px; padding: 2px 7px; border: 1px solid #CFC5AE; border-radius: 2px; background: #FFFDF8; font: inherit; font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: none; color: var(--fs-bronze); cursor: pointer; }
.fs-mp-elev__u:hover, .fs-mp-elev__u:focus-visible { border-color: var(--fs-ink); color: var(--fs-ink); }
.fs-mp-spot .fs-mp-elev__u { margin-left: 6px; vertical-align: 1px; }
.fs-mp-elev[hidden] { display: none; }
.fs-mp-elev__h { font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: none; }
.fs-mp-elev__ll { color: var(--fs-muted-cream); }
@media (max-width: 767px) { .fs-mp-elev { display: none; } }
/* 1.24.3 · the layers panel: never past the frame's foot (it scrolls inside itself), and movable by its header */
.fs-mp-layers { max-height: calc(100% - 156px - 70px - var(--fs-mp-cover)); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-top: 0; } /* 70px: the height readout and the scale stay clear */
.fs-mp-layers__h { position: sticky; top: 0; z-index: 1; margin: 0 -16px; padding: 14px 16px 10px; background: #FFFDF8; cursor: grab; touch-action: none; user-select: none; }
.fs-mp-layers__h:active { cursor: grabbing; }
.fs-mp-layers__t { display: inline-flex; align-items: center; gap: 9px; }
.fs-mp-layers__grip { fill: #B8AD98; flex: none; }
.fs-mp-layers.is-moved { max-height: calc(100% - 16px); }
@media (max-width: 767px) {
.fs-mp-layers { max-height: 70%; }
.fs-mp-layers__h { cursor: default; touch-action: auto; }
.fs-mp-layers__grip { display: none; }
}
/* 1.24.4 · a reader on the list, in the centred strips: the line centred and balanced, no "Unsubscribe anytime" under it
(Colleen, 01:20, on the Story page's strip: "can we clean this up?") */
.fs-yb-strip__form .fs-newsletter__member, .fs-mr-closer__form .fs-newsletter__member { text-align: center; font-size: 18px; line-height: 1.55; max-width: 44ch; margin: 0 auto; text-wrap: balance; }
.fs-yb-strip__form .fs-newsletter__member b, .fs-mr-closer__form .fs-newsletter__member b { display: inline-block; }
.fs-yb-strip__form .fs-newsletter__member a, .fs-mr-closer__form .fs-newsletter__member a { display: block; width: max-content; max-width: 100%; margin: 12px auto 0; padding-bottom: 1px; font-family: var(--fs-font-signage); font-weight: 700; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border-bottom: 1.5px solid rgba(201,162,39,0.5); }
.fs-yb-strip__form .fs-newsletter__member a:hover, .fs-mr-closer__form .fs-newsletter__member a:hover { border-bottom-color: currentColor; }
/* ================================================================
1.24.4 · The footer (October 27, 2026; Colleen, 01:23: "footer, this needs works please")
Four balanced groups on a gold hairline: the brand with its line and the reader's own link, then
The Record, Watch and Write to Frank; a bottom bar with the year and the site's one rule.
================================================================ */
.fs-footer { position: relative; padding: 56px 0 0; color: var(--fs-muted-dark-2); font-size: 15px; background: var(--fs-dark-deepest); border-top: 1px solid var(--fs-border-dark); }
.fs-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, rgba(201,162,39,0) 0%, var(--fs-gold) 18%, var(--fs-gold) 82%, rgba(201,162,39,0) 100%); opacity: 0.85; }
.fs-footer__row { display: grid; grid-template-columns: minmax(280px, 1.35fr) minmax(0, 2fr); gap: 40px clamp(40px, 6vw, 110px); align-items: start; padding-bottom: 44px; }
.fs-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 420px; }
.fs-footer__mark { display: flex; align-items: center; gap: 14px; }
.fs-footer__mark img { display: block; width: 52px; height: 52px; border-radius: 2px; }
.fs-footer__brand-name { font-family: var(--fs-font-signage); font-weight: 700; color: var(--fs-bone); font-size: 19px; letter-spacing: 1px; text-transform: uppercase; line-height: 1.1; }
.fs-footer__brand-sub { margin-top: 4px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fs-gold); }
.fs-footer__line { margin: 0; font-family: var(--fs-font-serif); font-size: 15.5px; line-height: 1.6; color: var(--fs-body-dark); }
.fs-footer__you { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 2px 0 0; font-family: var(--fs-font-serif); font-size: 14.5px; color: var(--fs-muted-dark-2); }
.fs-footer__you > a { font-family: var(--fs-font-signage); font-weight: 700; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-gold); text-decoration: none; border-bottom: 1.5px solid rgba(201,162,39,0.45); padding-bottom: 1px; }
.fs-footer__you > a:hover { color: var(--fs-bone); border-bottom-color: var(--fs-bone); }
.fs-footer .fs-footer__or a { color: var(--fs-bone); text-decoration: underline; text-decoration-color: rgba(244,238,226,0.55); text-underline-offset: 3px; }
.fs-footer .fs-footer__or a:hover { color: var(--fs-gold); text-decoration-color: currentColor; }
.fs-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.fs-footer__col { display: flex; flex-direction: column; gap: 9px; }
.fs-footer__col-title { margin-bottom: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--fs-border-dark); font-family: var(--fs-font-signage); font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fs-gold); }
.fs-footer__col a { width: max-content; max-width: 100%; font-family: var(--fs-font-serif); font-size: 15.5px; line-height: 1.35; color: var(--fs-body-dark); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; }
.fs-footer__col a:hover, .fs-footer__col a:focus-visible { color: var(--fs-bone); border-bottom-color: rgba(244,238,226,0.5); }
.fs-footer__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding-top: 18px; padding-bottom: 26px; border-top: 1px solid var(--fs-border-dark); font-family: var(--fs-font-signage); font-weight: 600; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-muted-dark-2); }
.fs-footer__rule { font-family: var(--fs-font-serif); font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--fs-muted-dark-2); }
.fs-footer__rule b { font-weight: 700; color: var(--fs-body-dark); }
/* the memorial and its family page: no invitation to the letters, as in the header (1.21.4) */
body.page-in-memory .fs-footer__you, body.page-tell-us-about-him .fs-footer__you { display: none; }
@media (max-width: 1100px) {
.fs-footer__row { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.fs-footer__brand { max-width: 520px; }
}
@media (max-width: 767px) {
.fs-footer { padding-top: 40px; }
.fs-footer__row { padding-bottom: 30px; }
.fs-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
.fs-footer__foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 350px) { .fs-footer__cols { grid-template-columns: minmax(0, 1fr); } }
/* 1.24.5 · MINFILE on from the start, past producers only; a MINFILE record Frank holds: the symbol ringed in gold, the card's
main link to his record (Colleen, 01:39 and 01:43) */
.fs-mfpt--ours::before { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2.5px solid var(--fs-gold); box-shadow: 0 0 0 1px rgba(19,17,16,0.35), 0 1px 4px rgba(0,0,0,0.3); pointer-events: none; }
.fs-mfpt--ours svg { position: relative; }
.leaflet-container .fs-lbl--ours.leaflet-tooltip { border-color: var(--fs-gold); }
.fs-mp-mf__item--ours { border-color: rgba(201,162,39,0.6); box-shadow: inset 3px 0 0 var(--fs-gold); }
.fs-mp-mf__go { margin: 4px 0 2px; }
.fs-mp-mf .fs-mp-mf__go { display: block; }
.leaflet-container .fs-mp-mf a.fs-mp-pop__btn { color: var(--fs-dark-base); }
/* the key's close cross and its tab (1.24.5) */
.fs-mp-key { padding-right: 34px; }
.fs-mp-key[hidden] { display: none; }
.fs-mp-key__x { position: absolute; right: 6px; top: 5px; width: 26px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; font: 18px/26px var(--fs-font-serif); color: var(--fs-muted-cream); cursor: pointer; }
.fs-mp-key__x:hover, .fs-mp-key__x:focus-visible { background: rgba(43,35,23,0.08); color: var(--fs-ink); }
.fs-mp-key-tab { position: absolute; right: 12px; top: calc(12px + var(--fs-mp-cover)); z-index: 1000; display: inline-flex; align-items: center; gap: 7px; height: 34px; margin: 0; padding: 0 12px; background: rgba(255,253,248,0.94); border: 1px solid #CFC5AE; border-radius: 3px; font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-ink); cursor: pointer; box-shadow: 0 1px 0 rgba(43,35,23,0.06), 0 8px 20px rgba(43,35,23,0.1); }
.fs-mp-key-tab[hidden] { display: none; }
.fs-mp-key-tab:hover, .fs-mp-key-tab:focus-visible { border-color: var(--fs-ink); }
.fs-mp-key-tab svg { color: var(--fs-gold); }
@media (max-width: 767px) { .fs-mp-key-tab { display: none; } }
/* 1.24.7 · at the wide band (zoom 11) the showings wait: their key row says so */
.fs-mf-wide .fs-mp-key__row[data-mf="OTHER"] .fs-mp-key__n { visibility: visible; min-width: 0; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
/* ══════════════════════════════════════════════════════════════════════
1.24.8 · Works and Sites (October 27, 2026; Colleen, 10:26: "markers that fit
into a map layer that we already have … I see all kinds of interesting sites
but we may never locate the mine"). The mark says what and where: a square
is a site (a mine is a circle or a diamond); solid ink is where it really is,
white with an ink edge is "at the camp", as a mine's diamond is.
══════════════════════════════════════════════════════════════════════ */
.fs-pin--site { border-radius: 2px; background: var(--fs-ink); border: 2px solid #FFFDF8; box-shadow: 0 0 0 1.5px var(--fs-ink), 0 2px 6px rgba(0,0,0,0.35); }
.fs-pin--site.fs-pin--atcamp { background: #FFFDF8; border: 3px solid var(--fs-ink); box-shadow: 0 0 0 1.5px #FFFDF8, 0 2px 6px rgba(0,0,0,0.35); }
.fs-pin--site.fs-pin--soon { background: #CFC5AE; border-color: #FFFDF8; box-shadow: 0 0 0 1.5px #736958, 0 2px 6px rgba(0,0,0,0.35); }
.fs-pin--site.fs-pin--atcamp.fs-pin--soon { background: #FFFDF8; border-color: #736958; }
.fs-pinbox .fs-pin--site { width: 20px; height: 20px; border-width: 2.5px; }
.fs-pinbox .fs-pin--site.fs-pin--atcamp { width: 19px; height: 19px; border-width: 3px; }
.fs-pinbox.is-hover .fs-pin--site, .fs-pinbox:focus-visible .fs-pin--site { transform: scale(1.18); box-shadow: 0 0 0 1.5px var(--fs-ink), 0 0 0 5px rgba(201,162,39,0.4), 0 3px 8px rgba(0,0,0,0.4); }
.fs-pinbox.is-open .fs-pin--site { border-color: #FFFDF8; box-shadow: 0 0 0 1.5px var(--fs-red), 0 0 0 6px rgba(173,76,43,0.38), 0 2px 8px rgba(0,0,0,0.4); }
.fs-pinbox.is-open .fs-pin--site.fs-pin--atcamp { border-color: var(--fs-ink); }
.fs-mp-key .fs-pin--site { width: 11px; height: 11px; border-width: 1.5px; border-radius: 1.5px; }
.fs-mp-key .fs-pin--site.fs-pin--atcamp { border-width: 2.5px; }
.fs-mp-key__works { margin-top: 2px; }
.fs-mp-key .fs-mp-key__works > div { padding: 3px 4px; }
.fs-mp-col h3 .fs-pin--site { width: 14px; height: 14px; margin-top: 5px; box-shadow: 0 0 0 1.5px var(--fs-ink); }
/* the badge: the kind of thing it is, in rust */
.fs-mp-kind--site { background: var(--fs-red); color: var(--fs-cream); }
/* the card: the one line under the name, and the record the site belongs to */
.leaflet-popup-content .fs-mp-pop p.fs-mp-pop__hook, .fs-mp-pop__hook { margin: 0; font-family: var(--fs-font-serif); font-style: italic; font-size: 15.5px; line-height: 1.45; color: var(--fs-body-cream); text-wrap: pretty; }
.fs-mp-pop__near a { color: var(--fs-red); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(173,76,43,0.4); }
.fs-mp-pop__near a:hover { border-bottom-color: var(--fs-red); }
.fs-mp-pop__plate--site { color: var(--fs-cream); background: radial-gradient(circle at 50% 30%, #6B4A2E, #2A2622 72%); }
.fs-mp-pop__plate--site small { color: rgba(245,239,227,0.6); }
/* the strip's four columns: four across on a wide screen, two by two in between, one on a phone */
@media (min-width: 1100px) { .fs-mp-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fs-mp-cols--4 .fs-mp-col { padding: 26px 26px 4px; } .fs-mp-cols--4 .fs-mp-col:first-child { padding-left: 0; } .fs-mp-cols--4 .fs-mp-col:last-child { padding-right: 0; } .fs-mp-cols--4 .fs-mp-col h3 { font-size: 19px; } }
@media (min-width: 900px) and (max-width: 1099px) {
.fs-mp-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-mp-cols--4 .fs-mp-col:nth-child(2n+1) { padding-left: 0; border-left: 0; }
.fs-mp-cols--4 .fs-mp-col:nth-child(2n) { padding-right: 0; }
.fs-mp-cols--4 .fs-mp-col:nth-child(n+3) { margin-top: 14px; border-top: 1px solid var(--fs-border-cream); }
}
/* ---- The Site's page (custom-site.hbs) ---- */
.fs-st-body { padding-bottom: 52px; }
.fs-st-facts { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr); }
.fs-st-facts dd a { color: var(--fs-ink); text-decoration: none; border-bottom: 1px solid var(--fs-border-cream); }
.fs-st-facts dd a:hover { border-bottom-color: var(--fs-ink); }
.fs-st-facts__rec a { color: var(--fs-red); font-weight: 700; border-bottom-color: rgba(173,76,43,0.35); }
.fs-st-facts__rec a:hover { border-bottom-color: var(--fs-red); }
.fs-st-facts__none { display: block; color: var(--fs-body-cream-2); }
.fs-st-facts__rec:has(a) .fs-st-facts__none { display: none; }
/* the position band: the record's band, one cell wide, the small map larger */
.fs-st-pos { background: var(--fs-dark-deepest); }
.fs-st-band__facts { display: block; max-width: 760px; margin: 0 auto; border-top: 0; }
.fs-st-band .fs-mr-band__cell, .fs-st-band .fs-mr-band__cell--pos { padding: 34px 0 38px; border-left: 0; }
.fs-st-band .fs-pos__thumb { flex-basis: 230px; width: 230px; height: 136px; }
.fs-st-band .fs-pos__body { gap: 8px; }
.fs-st-after { padding: 44px 0 8px; } /* the padding, not a margin on the first child, which would collapse through and show the dark ground */
.fs-st-after .fs-pub-actions { margin-top: 0; border-top: 0; padding-top: 0; }
.fs-st-notice { margin-top: 40px; }
.fs-st-prose [data-fs-positions] { display: none; } /* the card is read in the band; without JavaScript its plain lines still show */
.fs-st-prose p:first-of-type { font-size: 21px; line-height: 1.55; color: var(--fs-ink); }
@media (max-width: 599px) {
.fs-st-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fs-st-band .fs-pos__thumb { width: 100%; max-width: 420px; height: 130px; }
}
@media (max-width: 899px) { .fs-st-band .fs-pos__row { flex-direction: column; } }
/* ---- A camp's or region's page: the sites here (partials/tag-mines.hbs) ---- */
.fs-mn-sites { padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5vw, 60px); border-top: 1px solid var(--fs-border-cream); }
.fs-mn-sites__head { max-width: 680px; margin-bottom: 26px; }
.fs-mn-sites__k { margin: 0; color: var(--fs-bronze); }
.fs-mn-sites__t { margin: 8px 0 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; font-weight: 700; color: var(--fs-ink); }
.fs-mn-sites__p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--fs-body-cream); text-wrap: pretty; }
.fs-mn-sites__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.fs-mn-site { position: relative; display: flex; align-items: stretch; background: #FFFDF8; border: 1px solid var(--fs-border-cream); border-radius: 2px; box-shadow: var(--fs-shadow-rest); transition: transform 0.35s var(--fs-ease-out), box-shadow 0.35s var(--fs-ease-out), border-color 0.2s var(--fs-ease); }
.fs-mn-site:hover { transform: var(--fs-lift); box-shadow: var(--fs-shadow-raised); border-color: #CFC5AE; }
.fs-mn-site__a { display: flex; flex: 1; min-width: 0; gap: 14px; padding: 12px; color: var(--fs-ink); text-decoration: none; }
.fs-mn-site__pic { flex: 0 0 96px; width: 96px; height: 72px; overflow: hidden; border-radius: 2px; background: var(--fs-dark-deepest); }
.fs-mn-site__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-mn-site__plate { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 50% 30%, #6B4A2E, #2A2622 72%); }
.fs-mn-site__plate::after { content: ""; position: absolute; left: 50px; top: 38px; width: 14px; height: 14px; border-radius: 2px; background: var(--fs-ink); border: 2px solid #FFFDF8; box-shadow: 0 0 0 1.5px var(--fs-ink); }
.fs-mn-site__b { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.fs-mn-site__kind { display: inline-block; align-self: flex-start; padding: 3px 7px; border-radius: 2px; font-weight: 700; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--fs-red); color: var(--fs-cream); }
.fs-mn-site__name { font-family: var(--fs-font-serif); font-weight: 700; font-size: 18px; line-height: 1.2; }
.fs-mn-site__line { font-size: 13.5px; line-height: 1.45; color: var(--fs-body-cream-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fs-mn-site__map { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 58px; margin: 9px 10px 9px 0; border: 1px solid rgba(173,76,43,0.45); border-radius: 3px; background: #FFFDF8; font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-red); text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.fs-mn-site__map svg { width: 17px; height: 17px; }
.fs-mn-site__map:hover, .fs-mn-site__map:focus-visible { background: var(--fs-red); border-color: var(--fs-red); color: var(--fs-cream); }
@media (prefers-reduced-motion: reduce) { .fs-mn-site:hover { transform: none; } }
.fs-st .fs-notice { padding: 28px 32px 26px; background: #1F1A14; border: 1px solid #3A332A; border-radius: 2px; } /* the dark notice, as on the Mines pages */
.fs-st .fs-notice p { max-width: 900px; font-size: 15.5px; line-height: 1.65; color: var(--fs-body-dark); }
.fs-st .fs-notice b { color: var(--fs-bone); }
/* ---- Send a Position: "What are you sending?" and the site's two fields (1.24.8) ---- */
.fs-sp-ask--what { margin-bottom: 22px; }
.fs-sp-ask__opts--col { flex-direction: column; align-items: stretch; gap: 8px; }
.fs-sp-ask__opts--col .fs-sp-opt { align-items: flex-start; }
.fs-sp-ask__opts--col .fs-sp-opt input { margin-top: 2px; }
.fs-sp-ask__opts--col .fs-sp-opt span { display: block; }
.fs-sp-opt em { display: block; margin-top: 2px; font-style: normal; font-size: 13px; line-height: 1.4; color: var(--fs-muted-cream); }
.fs-sp-ask__opts--col .fs-sp-opt:has(input:checked) { border-color: var(--fs-ink); background: #FFFDF8; }
.fs-sp-site { margin: 0 0 20px; padding: 18px 18px 6px; border: 1px solid #CFC5AE; border-left: 3px solid var(--fs-red); border-radius: var(--fs-radius); background: #FFFDF8; }
.fs-sp-site .fs-ct-field + .fs-ct-field { margin-top: 16px; }
/* ══════════════════════════════════════════════════════════════════════
1.24.9 · Credit: "Found and reported by", and a reader's page (October 27,
2026; Colleen, 12:18). A public tag "Reader: Dave L." names the finder.
══════════════════════════════════════════════════════════════════════ */
.fs-st-by:not(:has(a)) { display: none; }
.fs-pub-head .fs-st-by { margin-top: 14px; font-size: 17px; color: var(--fs-muted-dark); }
.fs-st-by a { color: var(--fs-gold); font-style: normal; font-weight: 700; border-bottom: 1px solid rgba(201,162,39,0.4); }
.fs-st-by a:hover, .fs-st-by a:focus-visible { color: var(--fs-gold-hover); border-bottom-color: currentColor; }
.fs-st-by__n + .fs-st-by__n::before { content: " and "; }
/* the map's card */
.fs-mp-pop__by a { color: var(--fs-red); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(173,76,43,0.4); }
.fs-mp-pop__by a:hover { border-bottom-color: var(--fs-red); }
/* the cards' camp line, between the badge and the name */
.fs-mn-site__camp { display: block; margin-top: 2px; font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-mn-site__kind--rec { background: var(--fs-ink); }
/* a reader's page */
.fs-rd-head__in { display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 36px); }
.fs-rd-head__pic { flex: none; width: 132px; height: 132px; object-fit: cover; border-radius: 2px; border: 1px solid var(--fs-border-dark); box-shadow: 0 10px 26px rgba(0,0,0,0.35); }
.fs-rd-head__text { min-width: 0; }
.fs-rd-count span + span::before { content: " · "; }
.fs-rd-band + .fs-rd-band { border-top: 0; padding-top: 0; }
.fs-rd-end { padding-top: clamp(28px, 4vw, 44px); }
.fs-rd-checked { max-width: 760px; margin: 0 0 28px; font-size: 16.5px; line-height: 1.6; color: var(--fs-body-cream); text-wrap: pretty; }
.fs-rd-checked a { font-weight: 700; }
@media (max-width: 599px) {
.fs-rd-head__in { flex-direction: column; }
.fs-rd-head__pic { width: 104px; height: 104px; }
}
/* the map's filter bar: Show beside Sort, the two at the right end (1.24.9) */
.fs-mp .fs-mn-select--show { margin-left: auto; }
.fs-mp .fs-mn-select--show + .fs-mn-select--sort { margin-left: 0; }
@media (max-width: 640px) {
.fs-mp .fs-mn-filters > .fs-mn-select--show { flex: 1 1 calc(50% - 4px); margin-left: 0; }
.fs-mp .fs-mn-filters > .fs-mn-select--show + .fs-mn-select--sort { flex: 1 1 calc(50% - 4px); }
.fs-mp .fs-mn-filters > .fs-mn-select--show + .fs-mn-select--sort select { width: 100%; max-width: none; }
}
.fs-sp-site__note { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--fs-body-cream); text-wrap: pretty; }
.fs-sp-site__note b { color: var(--fs-ink); }
/* ══════════════════════════════════════════════════════════════════════
1.24.9 · GPS Tips on Send a Position (Colleen, 12:31: "a color reverse
section for GPS tips"): the dark band under the form.
══════════════════════════════════════════════════════════════════════ */
.fs-gps { position: relative; padding: clamp(56px, 7vw, 96px) 0 clamp(52px, 6vw, 84px); color: var(--fs-body-dark); background: radial-gradient(ellipse 55% 70% at 85% 0%, rgba(201,162,39,0.10), rgba(201,162,39,0) 70%), var(--fs-dark-deepest); border-top: 1px solid var(--fs-border-dark); border-bottom: 1px solid var(--fs-border-dark); scroll-margin-top: 90px; }
.fs-gps__head { max-width: 760px; }
.fs-sp .fs-gps__k { margin: 0; }
.fs-gps__title { margin: 12px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -0.01em; color: var(--fs-bone); text-wrap: balance; }
.fs-gps__title span { color: var(--fs-gold); }
.fs-sp .fs-gps__deck { margin: 18px 0 0; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.6; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-gps__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(34px, 4vw, 52px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--fs-border-dark); }
.fs-sp .fs-gps__h { margin: 0 0 18px; font-weight: 700; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fs-gold); }
/* what the record needs: a checklist, each line with a gold tick */
.fs-gps__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.fs-gps__list li { position: relative; padding-left: 32px; font-size: 15.5px; line-height: 1.6; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-gps__list li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 16px; height: 16px; border: 1.5px solid var(--fs-gold); border-radius: 2px; }
.fs-gps__list li::after { content: ""; position: absolute; left: 8px; top: 6px; width: 5px; height: 10px; border-right: 2px solid var(--fs-gold); border-bottom: 2px solid var(--fs-gold); transform: rotate(45deg); }
.fs-gps__list b, .fs-gps__cards b { color: var(--fs-bone); }
/* a better fix: six numbered cards, two across */
.fs-gps__cards { counter-reset: fs-gps; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fs-gps__cards li { counter-increment: fs-gps; position: relative; padding: 18px 18px 18px 58px; font-size: 15px; line-height: 1.55; color: var(--fs-body-dark); background: var(--fs-card-dark); border: 1px solid var(--fs-border-dark); border-radius: 2px; text-wrap: pretty; }
.fs-gps__cards li::before { content: counter(fs-gps); position: absolute; left: 18px; top: 14px; font-family: var(--fs-font-serif); font-weight: 700; font-size: 30px; line-height: 1; color: var(--fs-gold); }
.fs-gps__cards b { display: block; margin-bottom: 4px; font-size: 16.5px; }
/* the ten-minute question */
.fs-gps__q { display: grid; grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr); gap: 10px 32px; align-items: baseline; margin-top: clamp(30px, 3.5vw, 44px); padding: 24px 28px; background: rgba(201,162,39,0.07); border: 1px solid rgba(201,162,39,0.35); border-left: 3px solid var(--fs-gold); border-radius: 2px; }
.fs-sp .fs-gps__q-k { margin: 0; font-weight: 700; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-gold); }
.fs-sp .fs-gps__q-p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--fs-body-dark); text-wrap: pretty; }
.fs-gps__q-p b { color: var(--fs-bone); }
.fs-sp .fs-gps__safe { margin: 26px 0 0; max-width: 900px; font-size: 15px; line-height: 1.6; color: var(--fs-muted-dark); }
.fs-gps__safe b { color: var(--fs-bone); }
.fs-gps__up { margin-left: 6px; font-weight: 700; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-gold); border-bottom: 1px solid rgba(201,162,39,0.4); white-space: nowrap; }
.fs-gps__up:hover, .fs-gps__up:focus-visible { color: var(--fs-gold-hover); border-bottom-color: currentColor; }
.fs-sp-hint__a { margin-left: 4px; font-weight: 700; color: var(--fs-red); white-space: nowrap; border-bottom: 1px solid rgba(173,76,43,0.4); }
.fs-sp-hint__a:hover { border-bottom-color: var(--fs-red); }
.fs-mp-list__gps { margin-left: 8px; font-family: var(--fs-font-signage); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-bronze); border-bottom: 1px solid rgba(110,91,34,0.4); white-space: nowrap; }
@media (max-width: 1023px) {
.fs-gps__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.fs-gps__cards { grid-template-columns: minmax(0, 1fr); }
.fs-gps__q { grid-template-columns: minmax(0, 1fr); padding: 20px; }
}
.fs-rd .fs-mn-tag__crumb a { text-decoration: underline; text-decoration-color: rgba(201,162,39,0.55); text-underline-offset: 3px; } /* a link beside words: marked by more than its colour */
/* MINFILE's caution (1.24.9): first on its card, and in the key */
.leaflet-popup-content .fs-mp-mf p.fs-mp-mf__warn, .fs-mp-mf__warn { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 10px; padding: 8px 10px; font-size: 13px; line-height: 1.45; color: #5C4A12; background: rgba(201,162,39,0.14); border-left: 3px solid var(--fs-gold); border-radius: 2px; }
.fs-mp-mf__warn svg { flex: none; margin-top: 2px; color: #8A6D12; }
.fs-mp-key .fs-mp-key__warn { display: flex; align-items: center; gap: 5px; margin: 0 4px 4px; font-weight: 600; font-size: 9.5px; letter-spacing: 0.12em; color: #8A6D12; }
.fs-mp-key__warn svg { flex: none; }
/* ---- Header: the Map link's pin (1.24.9; Colleen, 12:42: "can we do something like this that really makes the map
page stand out … could even be with a red map icon"; 12:43: "Maybe not red"). The same pin as the list's Map
buttons, filled, in gold: gold on dark, rust on cream, as everywhere. It lifts a little under the pointer. The
line under the word starts after it, as it does after the Yankee Boy dot. The phone menu shows it too. ---- */
.fs-nav__link--map::before {
content: ""; display: inline-block; width: 0.62em; height: 0.82em; margin: 0 6px 0 0; vertical-align: -0.07em; background: var(--fs-gold);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.fs-nav__link.fs-nav__link--map::after { left: calc(0.62em + 6px); }
@media (prefers-reduced-motion: no-preference) {
.fs-nav__link--map::before { transition: transform 0.2s ease-out; }
.fs-nav__link--map:hover::before, .fs-nav__link--map:focus-visible::before { transform: translateY(-2px); }
}
/* ---- A reader on the list (partials/newsletter-form.hbs, 1.24.9; Colleen's phone, 12:45): the check and "You're on
the list", the address on its own line, the link under it. Blocks and inline boxes, so the form's own alignment
carries through: centred in the closers, left in the side panels. ---- */
.fs-newsletter div.fs-newsletter__member { margin: 0; font-family: var(--fs-font-serif); text-wrap: initial; }
.fs-newsletter .fs-newsletter__member-k { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: 13px; line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-newsletter .fs-newsletter__member-k svg { flex: none; color: var(--fs-gold); }
.fs-newsletter .fs-newsletter__member-to { margin: 10px 0 0; font-size: 16.5px; line-height: 1.45; color: var(--fs-body-cream-2); }
.fs-newsletter .fs-newsletter__member-to b { display: block; margin-top: 2px; font-weight: 700; font-size: 1.12em; color: var(--fs-ink); overflow-wrap: anywhere; }
.fs-newsletter .fs-newsletter__member-a { display: inline-block; width: auto; margin: 12px 0 0; padding-bottom: 2px; font-weight: 700; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--fs-red); border-bottom: 1.5px solid rgba(173,76,43,0.45); }
.fs-newsletter .fs-newsletter__member-a:hover, .fs-newsletter .fs-newsletter__member-a:focus-visible { border-bottom-color: currentColor; }
/* on dark */
.fs-newsletter .fs-newsletter__member--dark .fs-newsletter__member-k { color: var(--fs-gold); }
.fs-newsletter .fs-newsletter__member--dark .fs-newsletter__member-to { color: var(--fs-body-dark); }
.fs-newsletter .fs-newsletter__member--dark .fs-newsletter__member-to b { color: var(--fs-bone); }
.fs-newsletter .fs-newsletter__member--dark .fs-newsletter__member-a { color: var(--fs-gold); border-bottom-color: rgba(201,162,39,0.5); }
/* the closers and strips that centred the old line (1.24.4) keep their width; the parts now carry the layout */
.fs-yb-strip__form .fs-newsletter__member, .fs-mr-closer__form .fs-newsletter__member { max-width: none; }
.fs-yb-strip__form .fs-newsletter .fs-newsletter__member-a, .fs-mr-closer__form .fs-newsletter .fs-newsletter__member-a { display: inline-block; width: auto; margin: 12px 0 0; }
/* the map's height (1.24.9; Colleen, 12:50: three mines in full view in the list, not the third cut off): taller on a
large screen, the same on a laptop; the list beside it the same height; the list's foot tighter (map.hbs) */
@media (min-width: 1101px) { /* the side-by-side layout only: the tablet and phone heights stay as they were */
/* tall, but never taller than the screen below the search bar and the filters, so after the arrival glide the whole
map is in view (Colleen, 13:14) */
.fs-mp-area { --fs-mp-h: max(480px, min(80vh, 880px, calc(100vh - 232px))); }
.fs-mp-frame:not(.is-full) { height: var(--fs-mp-h); }
.fs-mp-list { max-height: var(--fs-mp-h); height: var(--fs-mp-h); } /* its foot on the map's foot (1.24.10; Colleen, 14:02: "can we align") */
/* the card as tall as it needs, up to the map's own height less the pin and a margin (Colleen, 13:03: "scroll bar
required cannot be elastic?"); Leaflet pans the map so the whole card is in view */
.fs-mp-frame:not(.is-full) .leaflet-popup-content { max-height: max(300px, calc(var(--fs-mp-h) - 68px)); }
}
.fs-mp-list__f { gap: 9px; padding: 12px 18px 14px; }
.fs-mp-list__f .fs-mp-url code { padding: 6px 9px; }
.fs-mp-list__f p.fs-mp-list__tip { margin-top: -3px; }
/* the link row: Copy beside the address, on its middle (Saaga's own margin on code had pushed the button low) */
.fs-mp-url code { margin: 0; }
/* the key's rows: the mark keeps its size, the words take the room (a square stretched into a bar for a visitor) */
.fs-mp-key .fs-mp-key__row > span.fs-pin { flex: none; }
.fs-mp-key .fs-mp-key__row > span.fs-pin + span { flex: 1; }
.fs-mp-key .fs-mp-key__row.is-off > span.fs-pin + span { text-decoration: line-through; }
.fs-mp-key .fs-mp-key__row.is-off > span.fs-pin { text-decoration: none; }
/* ---- The ping (1.24.9; Colleen, 12:54: "could we put any subtle animation on franks markers?"): a thin gold ring
grows out of a record's pin and fades, every 4 seconds, each pin on its own beat (fs-map.js sets the delay). At
rest while the pin is open or under the pointer; none at all for a reader who asks for less motion. ---- */
.fs-pin-ping { display: none; }
@media (prefers-reduced-motion: no-preference) {
.fs-pinbox--rec .fs-pin-ping { display: block; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 2px solid rgba(201,162,39,0.95); box-shadow: 0 0 0 1px rgba(255,253,248,0.5); opacity: 0; pointer-events: none; animation: fs-ping 4s cubic-bezier(0.2, 0.6, 0.35, 1) infinite; will-change: transform, opacity; }
.fs-pinbox--rec.is-open .fs-pin-ping, .fs-pinbox--rec.is-hover .fs-pin-ping { animation: none; opacity: 0; }
}
@keyframes fs-ping {
0% { transform: scale(0.85); opacity: 0; }
8% { opacity: 0.85; }
55% { opacity: 0; }
100% { transform: scale(2.6); opacity: 0; }
}
/* ---- Every card's close (1.24.9; Colleen, 12:57: "quick close record button"): a round ink button with a white
cross, the same on every card. Leaflet's own rule (a.leaflet-popup-close-button inside .leaflet-container)
outweighed ours, so the button was a bare white cross: fine over a photograph, invisible on the MINFILE, This spot
and My position cards. ---- */
.fs-mp-frame .leaflet-container a.leaflet-popup-close-button { top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: rgba(19,17,16,0.78); color: #FFFDF8; font: 400 22px/1 var(--fs-font-serif); text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,0.25); z-index: 2; }
.fs-mp-frame .leaflet-container a.leaflet-popup-close-button span { display: block; margin-top: -2px; }
.fs-mp-frame .leaflet-container a.leaflet-popup-close-button:hover, .fs-mp-frame .leaflet-container a.leaflet-popup-close-button:focus-visible { background: var(--fs-ink); color: #FFFDF8; outline: none; box-shadow: 0 0 0 2px var(--fs-gold), 0 1px 4px rgba(0,0,0,0.25); }
.fs-mp-frame .fs-mp-mf__k { padding-right: 36px; } /* the heading clear of it */
/* the card elastic on a tablet too, and the scroll bars thin where one is still needed (1.24.9; Colleen, 13:03) */
@media (min-width: 768px) and (max-width: 1100px) { .fs-mp-frame:not(.is-full) .leaflet-popup-content { max-height: max(280px, calc(62vh - 76px)); } }
.fs-mp-frame .leaflet-popup-content, .fs-mp-rows, .fs-mp-layers, .fs-mp-card { scrollbar-width: thin; scrollbar-color: #CFC5AE transparent; }
.fs-mp-frame .leaflet-popup-content::-webkit-scrollbar, .fs-mp-rows::-webkit-scrollbar, .fs-mp-layers::-webkit-scrollbar, .fs-mp-card::-webkit-scrollbar { width: 6px; height: 6px; }
.fs-mp-frame .leaflet-popup-content::-webkit-scrollbar-track, .fs-mp-rows::-webkit-scrollbar-track, .fs-mp-layers::-webkit-scrollbar-track, .fs-mp-card::-webkit-scrollbar-track { background: transparent; }
.fs-mp-frame .leaflet-popup-content::-webkit-scrollbar-thumb, .fs-mp-rows::-webkit-scrollbar-thumb, .fs-mp-layers::-webkit-scrollbar-thumb, .fs-mp-card::-webkit-scrollbar-thumb { background: #CFC5AE; border-radius: 3px; }
.fs-mp-frame .leaflet-popup-content::-webkit-scrollbar-thumb:hover, .fs-mp-rows::-webkit-scrollbar-thumb:hover { background: #A99C85; }
/* ---- The map page opens on the map (1.24.9; Colleen, 13:13: "the map page opens to this and we need to scroll down to
the map to fully see"; an automatic scroll was weighed and set aside: it takes the page out of the reader's hands,
there is no hover on a phone, and it upsets readers who ask for less motion). On a computer the title band is slim:
the kicker, the title on one line, the signed-in note beside it; the line under the title goes (the search box's
own words say it); the bars under it tighter. The map's middle, where the home view lands, is in view on arrival. ---- */
@media (min-width: 768px) {
#fs-mines-map .fs-mp-hero__in { align-items: center; padding: 16px 0 18px; }
#fs-mines-map .fs-mp-hero__title { margin-top: 6px; font-size: clamp(34px, 3.3vw, 48px); line-height: 0.95; }
#fs-mines-map .fs-mp-hero__deck { display: none; }
#fs-mines-map .fs-mp-hero__note { font-size: 11.5px; line-height: 1.7; }
#fs-mines-map .fs-mn-bar { padding: 10px 0; }
#fs-mines-map .fs-mn-filterbar { padding: 8px 0 10px; }
#fs-mines-map .fs-mp-area { padding-top: 16px; }
}
@media (min-width: 1101px) {
.fs-mp-list__h { padding: 13px 20px 10px; } /* three mines in full beside the map at 1440 × 900 (1.24.9) */
}
/* ══════════════════════════════════════════════════════════════════
1.25.0 (November 2026) · The Journal
Stories, discoveries and news from BC's mining country, between the
Letters: the Journal page (/journal/) and its six archives, a Journal
post (the Story and Photo Essay templates), From the Journal on the
records, the home page's band and the tag pages. From the boards
"Frank Schlichting — The Journal" (30 October to 3 November 2026),
in the site's own tokens; the masthead, the record card and the
invitation are the publishing system's of 1.20.0.
══════════════════════════════════════════════════════════════════ */
.fs-jn { --fs-jn-line: #D8CFBC; --fs-jn-max: 1280px; background: var(--fs-cream); color: var(--fs-body-cream); }
.fs-jn-head { padding-bottom: 48px; }
.fs-jn-head .fs-jn-head__in { max-width: var(--fs-jn-max); padding: 0 40px; }
.fs-jn-head .fs-pub-label { margin: 0; }
.fs-jn-head .fs-pub-top + .fs-pub-title { margin-top: 14px; }
.fs-jn-body { padding: 0 0 8px; }
/* ---- The kicker: category and format, a middle dot between, the readers' mark beside ---- */
.fs-jn-k > span + span::before { content: "\00a0\00b7\0020"; padding: 0 0.2em 0 0.25em; }
.fs-jn-k > span:first-child::before { content: none; }
.fs-jn-k--one > .fs-jn-k__fmt ~ .fs-jn-k__cat { display: none; } /* the format alone where it is set (From the Journal, the home band) */
.fs-pub-label .fs-jn-k, .fs-pub-label .fs-jn-k > span { color: var(--fs-gold); } /* over 1.20.0's muted label spans */
.fs-pub-label .fs-jn-k > span + span, .fs-pub-label .fs-jn-k > span + span::before { color: var(--fs-muted-dark); }
.fs-pub-label .fs-jn-k:not(:has(span))::before { content: "The Journal"; }
.fs-jn-readers, .fs-jn-flag { display: inline-block; margin-left: 10px; padding: 2px 7px; border-radius: 2px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }
.fs-jn-readers { color: var(--fs-bronze); border: 1px solid var(--fs-jn-line, #D8CFBC); background: var(--fs-panel); }
.fs-jn-flag { color: var(--fs-panel); background: var(--fs-ink); }
/* an event's state in the feed's kicker (Coming up, then Past): seen beside a photograph; where the
plate shows it, kept for screen readers only (the plate is hidden from them) */
.fs-jn-flag--when { color: var(--fs-red); background: transparent; border: 1px solid currentColor; padding: 1px 6px; }
.fs-jn-entry.is-past .fs-jn-flag--when { color: var(--fs-muted-cream); }
.fs-jn-entry:not(.fs-jn-entry--photo) .fs-jn-flag--when { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* one when tag: a second one (a slip in the tags) stays out of the meta lines, as out of the plate */
.fs-jn-meta .fs-jn-when ~ .fs-jn-when, .fs-jn-post-meta .fs-jn-when ~ .fs-jn-when { display: none; }
/* a Journal tag's page: anything else carrying the tag, after the stories */
.fs-jn-also { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--fs-border-cream); }
.fs-jn-also:not(:has(li)) { display: none; }
.fs-jn-also__t { margin: 0 0 8px; font-family: var(--fs-font-serif); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--fs-ink); }
.fs-jn-also__list { margin: 0; padding: 0; list-style: none; }
.fs-jn-also__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--fs-border-cream); }
.fs-jn-also__list a { font-family: var(--fs-font-serif); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--fs-ink); }
.fs-jn-also__list a:hover { color: var(--fs-red); }
.fs-jn-also__k { font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-pub-card__kick .fs-jn-k, .fs-pub-card__kick .fs-jn-k span { color: inherit; }
/* ---- The meta line: when · places (with commas) · Published and the date ---- */
.fs-jn-meta { margin: 0; font-family: var(--fs-font-signage); font-weight: 500; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-muted-cream); line-height: 1.45; }
/* the separators end in a plain space, so a long line can break after any of them */
.fs-jn-meta > * + *::before { content: "\00a0\00b7\0020"; padding: 0 0.2em 0 0.25em; }
.fs-jn-meta > .fs-jn-place + .fs-jn-place::before { content: ",\0020"; padding: 0; }
.fs-jn-post-meta > * + *::before { content: "\00a0\00b7\0020"; padding: 0 0.3em 0 0.3em; color: var(--fs-muted-dark); }
.fs-jn-post-meta .fs-jn-by { color: var(--fs-bone); }
.fs-jn-post-meta .fs-jn-pub, .fs-jn-post-meta .fs-jn-read, .fs-jn-post-meta .fs-jn-by, .fs-jn-meta .fs-jn-pub { white-space: nowrap; }
.fs-jn-post-meta .fs-jn-mine { color: var(--fs-bone); font-weight: 600; }
/* ---- The featured story ---- */
.fs-jn-featured { max-width: var(--fs-jn-max); margin: 0 auto; padding: 44px 40px 8px; }
.fs-jn-feat { display: flex; flex-wrap: wrap; overflow: hidden; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: var(--fs-radius); box-shadow: var(--fs-shadow-card); }
.fs-jn-feat__media { position: relative; flex: 1 1 560px; min-width: 0; margin: 0; background: var(--fs-dark-base); }
.fs-jn-feat__media a { display: block; height: 100%; }
.fs-jn-feat__media img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.fs-jn-feat__cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 30px 16px 10px; font-family: var(--fs-font-signage); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; color: var(--fs-body-dark); background: linear-gradient(to top, rgba(13,12,10,0.86), rgba(13,12,10,0)); pointer-events: none; }
.fs-jn-feat__cap a { color: inherit; pointer-events: auto; }
.fs-jn-feat__body { flex: 1 1 380px; min-width: 0; padding: 40px 40px 36px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.fs-jn-feat__kick, .fs-jn-entry__kick, .fs-jn-more__kick, .fs-jn-band__kick, .fs-jn-from__kick { margin: 0; font-family: var(--fs-font-signage); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-red); }
.fs-jn-feat__title { margin: 0; font-family: var(--fs-font-serif); font-weight: 600; font-size: clamp(30px, 3vw, 40px); line-height: 1.1; color: var(--fs-ink); text-wrap: balance; }
.fs-jn-feat__title a, .fs-jn-entry__title a, .fs-jn-more__t a, .fs-jn-band__item-t a, .fs-jn-from__item-t a, .fs-jn-coming__t a, .fs-jn-booklet__t a { color: var(--fs-ink); text-decoration: none; }
.fs-jn-feat__title a:hover, .fs-jn-entry__title a:hover, .fs-jn-more__t a:hover, .fs-jn-band__item-t a:hover, .fs-jn-from__item-t a:hover, .fs-jn-coming__t a:hover, .fs-jn-booklet__t a:hover { color: var(--fs-red); }
.fs-jn-feat__line { margin: 0; font-family: var(--fs-font-serif); font-size: 18px; line-height: 1.5; color: var(--fs-body-cream); }
.fs-jn-go { font-family: var(--fs-font-serif); font-weight: 700; font-size: 17px; color: var(--fs-red); text-decoration: none; }
.fs-jn-go:hover { text-decoration: underline; }
/* ---- The feed and the rail ---- */
.fs-jn-main { max-width: var(--fs-jn-max); margin: 0 auto; padding: 40px 40px 56px; }
.fs-jn-main__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "head rail" "feed rail"; grid-template-rows: auto 1fr; column-gap: 48px; align-items: start; }
.fs-jn-feedhead { grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-bottom: 16px; }
.fs-jn-feedhead__t { margin: 0; font-family: var(--fs-font-serif); font-weight: 600; font-size: 34px; line-height: 1.15; color: var(--fs-ink); }
.fs-jn-feedhead__note { font-weight: 500; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-jn-feed { grid-area: feed; }
.fs-jn-rail { grid-area: rail; display: flex; flex-direction: column; gap: 24px; }
.fs-jn-main--tag .fs-jn-main__in { display: block; max-width: 900px; }
.fs-jn-main--tag .fs-pub-record { margin: 0 0 8px; }
.fs-jn-empty { margin: 0; padding: 28px 0; border-top: 1px solid var(--fs-border-cream); font-family: var(--fs-font-serif); font-size: 18px; color: var(--fs-body-cream-2); }
.fs-jn-main__in:has(.fs-jn-empty) .fs-jn-feedhead__note { display: none; }
/* the filter chips (twelve stories and up) */
.fs-jn-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fs-jn-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--fs-jn-line, #D8CFBC); border-radius: var(--fs-radius); background: var(--fs-panel); font-family: var(--fs-font-signage); font-weight: 500; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fs-body-cream); text-decoration: none; white-space: nowrap; }
.fs-jn-chip:hover { color: var(--fs-ink); border-color: var(--fs-ink); }
.fs-jn-chip.is-on { background: var(--fs-ink); border-color: var(--fs-ink); color: var(--fs-bone); }
/* one entry: the photograph or the year plate, then the words */
.fs-jn-entry { display: flex; gap: 28px; align-items: flex-start; padding: 28px 0; border-top: 1px solid var(--fs-border-cream); }
.fs-jn-entry__media { flex: 0 0 200px; display: block; }
.fs-jn-entry__media img { display: block; width: 200px; height: 134px; object-fit: cover; border-radius: var(--fs-radius); background: var(--fs-dark-raised); }
.fs-jn-entry__body { flex: 1 1 auto; min-width: 0; }
.fs-jn-entry__title { margin: 6px 0 8px; font-family: var(--fs-font-serif); font-weight: 600; font-size: 27px; line-height: 1.15; color: var(--fs-ink); text-wrap: balance; }
.fs-jn-entry__line { margin: 0 0 10px; font-family: var(--fs-font-serif); font-size: 17px; line-height: 1.5; color: var(--fs-body-cream); }
.fs-jn-plate { flex: 0 0 200px; height: 134px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 12px; text-align: center; border: 1px solid var(--fs-jn-line, #D8CFBC); border-radius: var(--fs-radius); background: var(--fs-panel); }
.fs-jn-plate__top { font-family: var(--fs-font-signage); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-jn-plate__top:not(:has(span)) { display: none; }
.fs-jn-plate__top .fs-jn-k__fmt + .fs-jn-k__fmt { display: none; }
.fs-jn-plate__big { font-family: var(--fs-font-signage); font-weight: 600; font-size: 30px; line-height: 1.05; color: var(--fs-ink); text-wrap: balance; }
.fs-jn-plate__big:not(:has(span)):not(.fs-jn-plate__big--pub) { display: none; }
.fs-jn-plate__big:has(span) + .fs-jn-plate__big--pub { display: none; }
.fs-jn-plate__big .fs-jn-when + .fs-jn-when { display: none; }
.fs-jn-plate__where { font-family: var(--fs-font-signage); font-weight: 500; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-jn-plate__where .fs-jn-place + .fs-jn-place { display: none; }
/* the foot of the feed: "Six stories so far", or the pages */
.fs-jn-feedfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 24px 0 0; border-top: 1px solid var(--fs-border-cream); }
.fs-jn-feedfoot__nav { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-jn-feedfoot__count { font-weight: 500; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-muted-cream); }
/* the rail's panels */
.fs-jn-panel__kick { margin: 0; font-family: var(--fs-font-signage); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-red); }
.fs-jn-panel__kick--gold { color: var(--fs-gold); }
.fs-jn-panel__kick--muted { color: var(--fs-muted-cream); font-size: 12px; }
.fs-jn-panel { padding: 24px 26px 22px; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: var(--fs-radius); box-shadow: var(--fs-shadow-card); }
.fs-jn-letter { padding: 28px 28px 26px; background: var(--fs-dark-base); border: 1px solid var(--fs-border-dark); border-radius: var(--fs-radius); color: var(--fs-body-dark); }
.fs-jn-letter__t { margin: 10px 0 6px; font-family: var(--fs-font-serif); font-weight: 600; font-size: 26px; line-height: 1.15; color: var(--fs-bone); }
.fs-jn-letter__promise { margin: 0 0 12px; font-family: var(--fs-font-serif); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--fs-bone); }
.fs-jn-letter__note { margin: 0 0 18px; font-family: var(--fs-font-serif); font-size: 15px; line-height: 1.5; color: var(--fs-muted-dark); }
.fs-jn-letter__btn { font-size: 15px; padding: 11px 18px; }
.fs-jn-letter__small { margin: 12px 0 0; font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-muted-dark-2); }
.fs-jn-letter__on { margin: 0; font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-jn-letter__on a { color: var(--fs-gold); }
.fs-jn-coming__list { list-style: none; margin: 0; padding: 0; }
.fs-jn-coming__item + .fs-jn-coming__item { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--fs-border-cream); }
.fs-jn-coming__when { margin: 12px 0 6px; font-weight: 600; font-size: 28px; line-height: 1.05; color: var(--fs-ink); }
.fs-jn-coming__when:not(:has(span)) { display: none; }
.fs-jn-coming__t { margin: 0 0 8px; font-family: var(--fs-font-serif); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--fs-ink); }
.fs-jn-coming__p { margin: 0 0 10px; font-family: var(--fs-font-serif); font-size: 15px; line-height: 1.5; color: var(--fs-body-cream-2); }
.fs-jn-coming__go { font-family: var(--fs-font-serif); font-weight: 600; font-size: 15px; color: var(--fs-red); text-decoration: none; }
.fs-jn-coming__go:hover { text-decoration: underline; }
.fs-jn-coming__rule { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--fs-border-cream); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-jn-booklet__row { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; }
.fs-jn-booklet__cover { flex: 0 0 auto; }
.fs-jn-booklet__cover img { display: block; width: 110px; height: 146px; object-fit: cover; border-radius: var(--fs-radius); box-shadow: 0 8px 20px rgba(43,35,23,0.25); }
.fs-jn-booklet__body { min-width: 0; }
.fs-jn-booklet__t { margin: 0 0 6px; font-family: var(--fs-font-serif); font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--fs-ink); }
.fs-jn-booklet__p { margin: 0 0 10px; font-family: var(--fs-font-serif); font-size: 15px; line-height: 1.5; color: var(--fs-body-cream-2); }
.fs-jn-booklet__go { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.fs-jn-booklet__go a { font-family: var(--fs-font-serif); font-weight: 600; font-size: 15px; color: var(--fs-red); text-decoration: none; }
.fs-jn-booklet__go a:hover { text-decoration: underline; }
.fs-jn-browse__t { margin: 0 0 12px; font-family: var(--fs-font-serif); font-weight: 600; font-size: 22px; color: var(--fs-ink); }
.fs-jn-browse__list { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 6px 0 14px; font-family: var(--fs-font-serif); font-size: 16px; line-height: 1.6; }
.fs-jn-browse__a { color: var(--fs-red); text-decoration: none; }
.fs-jn-browse__a:hover { text-decoration: underline; }
.fs-jn-browse__all { margin: 0; font-family: var(--fs-font-serif); font-size: 16px; }
.fs-jn-browse__all a { color: var(--fs-red); font-weight: 600; text-decoration: none; }
/* ---- A Journal post ---- */
.fs-jn-post-head .fs-pub-label { margin: 0; }
.fs-jn-post-head--plain { padding-bottom: 44px; }
.fs-pub-body.fs-jn-body--plain { padding-top: 44px; }
.fs-jn-content blockquote + p:has(> em:only-child) { margin: -14px 0 26px; font-family: var(--fs-font-signage); font-weight: 500; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-jn-content blockquote + p:has(> em:only-child) em { font-style: normal; }
.fs-pub-space--sm { height: 40px; }
/* the gate on a story kept for readers sits inside the text, where the text's own h2 rule
(a small bronze label, .fs-pub-content h2) outranked the gate's heading; the gate's wins */
/* the Letters masthead's link to the Journal: its underline (.fs-lm__promise a) was outranked
by body.fs-site a, leaving gold on bone told apart by colour alone */
body.fs-site .fs-lm__promise a { text-decoration: underline; text-underline-offset: 3px; }
.fs-pub-content .fs-pub-gate h2 { margin: 10px 0 0; font-family: var(--fs-font-serif); font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: normal; text-transform: none; color: var(--fs-bone); text-wrap: balance; }
.fs-jn-content .fs-jn-known { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0 0 36px; padding: 18px 22px; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: var(--fs-radius); box-shadow: var(--fs-shadow-card); }
.fs-jn-content .fs-jn-known > div { flex: 1 1 260px; min-width: 0; }
.fs-jn-content .fs-jn-known strong { display: block; font-family: var(--fs-font-signage); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-jn-content .fs-jn-known p { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--fs-body-cream); }
.fs-jn-content > p:first-child, .fs-jn-content > .fs-jn-known + p, .fs-jn-content > .fs-jn-note + p { font-size: 21px; line-height: 1.55; color: var(--fs-ink); }
.fs-jn-content .fs-jn-sources { margin: 36px 0 0; padding: 26px 28px; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: var(--fs-radius); box-shadow: var(--fs-shadow-card); }
.fs-jn-sources__kick { font-family: var(--fs-font-signage); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-bronze); }
.fs-jn-content .fs-jn-sources ol { margin: 12px 0 0; padding-left: 22px; }
.fs-jn-content .fs-jn-sources li { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--fs-body-cream-2); }
.fs-jn-content .fs-jn-sources a { font-weight: 600; }
.fs-jn-content .fs-jn-sources__updates { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--fs-border-cream); font-family: var(--fs-font-signage); font-weight: 500; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-jn-note { display: block; margin: 0 0 32px; padding: 14px 18px; border: 1px solid var(--fs-jn-line, #D8CFBC); border-left: 3px solid var(--fs-red); border-radius: var(--fs-radius); background: var(--fs-panel); font-family: var(--fs-font-serif); font-size: 15px; line-height: 1.5; color: var(--fs-body-cream); }
.fs-jn-note[hidden] { display: none; }
.fs-jn-note__kick { margin-right: 8px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-red); }
.fs-jn-note--ended { border-left-color: var(--fs-muted-cream); }
.fs-jn-note--ended .fs-jn-note__kick { color: var(--fs-muted-cream); }
.fs-jn-note--cancelled { border-left-color: var(--fs-ink); }
.fs-jn-note--cancelled .fs-jn-note__kick { color: var(--fs-ink); }
.fs-jn-content .fs-jn-note { font-size: 15px; }
.fs-jn-content .fs-jn-event { margin: 0 0 24px; padding: 18px 20px; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: var(--fs-radius); box-shadow: var(--fs-shadow-card); }
.fs-jn-content .fs-jn-event dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 16px; line-height: 1.45; }
.fs-jn-content .fs-jn-event dt { margin: 0; padding-top: 3px; font-family: var(--fs-font-signage); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-jn-content .fs-jn-event dd { margin: 0; color: var(--fs-ink); }
.fs-jn-content .fs-jn-event__checked { display: block; margin-top: 2px; font-family: var(--fs-font-signage); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-jn-content .fs-jn-event.is-past { opacity: 0.78; }
/* More from the Journal */
.fs-jn-more { background: var(--fs-cream); border-top: 1px solid var(--fs-border-cream); }
.fs-jn-more__in { max-width: 1100px; margin: 0 auto; padding: 48px 40px 64px; }
.fs-jn-more__k { margin: 0; font-family: var(--fs-font-signage); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-red); }
.fs-jn-more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 14px; }
.fs-jn-more__item { padding-top: 18px; border-top: 1px solid var(--fs-border-cream); }
.fs-jn-more__kick { font-size: 12px; color: var(--fs-muted-cream); }
.fs-jn-more__t { margin: 6px 0 8px; font-family: var(--fs-font-serif); font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--fs-ink); text-wrap: balance; }
.fs-jn-more__all { margin: 28px 0 0; }
/* ---- From the Journal, on a record ---- */
.fs-jn-from { margin: 36px 0 0; padding: 30px 0 8px; border-top: 1px solid var(--fs-border-cream); color: var(--fs-body-cream); }
.fs-jn-from__t { margin: 8px 0 6px; font-family: var(--fs-font-serif); font-weight: 600; font-size: 32px; line-height: 1.1; color: var(--fs-ink); text-wrap: balance; }
.fs-jn-from__p { margin: 0 0 10px; max-width: 62ch; font-family: var(--fs-font-serif); font-size: 16px; line-height: 1.5; color: var(--fs-body-cream-2); }
.fs-jn-from__list { list-style: none; margin: 0; padding: 0; }
.fs-jn-from__item { display: flex; gap: 18px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--fs-border-cream); }
.fs-jn-from__media { flex: 0 0 auto; }
.fs-jn-from__media img { display: block; width: 120px; height: 80px; object-fit: cover; border-radius: var(--fs-radius); }
.fs-jn-from__body { min-width: 0; }
.fs-jn-from__kick { font-size: 12px; color: var(--fs-muted-cream); }
.fs-jn-from__item-t { margin: 4px 0 4px; font-family: var(--fs-font-serif); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--fs-ink); }
.fs-jn-from__all { margin: 0; padding: 16px 0 20px; border-top: 1px solid var(--fs-border-cream); }
.fs-jn-from-wrap .fs-jn-from { margin-top: 28px; }
/* ---- The home page's band ---- */
.fs-jn-band { padding: 56px 0; background: var(--fs-cream); }
.fs-jn-band .fs-wrap { max-width: var(--fs-jn-max, 1280px); }
.fs-jn-band__card { padding: 36px 40px 32px; background: var(--fs-panel); border: 1px solid var(--fs-border-cream); border-radius: var(--fs-radius); box-shadow: var(--fs-shadow-card); }
.fs-jn-band__t { margin: 8px 0 6px; font-family: var(--fs-font-serif); font-weight: 600; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; color: var(--fs-ink); text-wrap: balance; }
.fs-jn-band__p { margin: 0 0 6px; font-family: var(--fs-font-serif); font-size: 17px; line-height: 1.5; color: var(--fs-body-cream-2); }
.fs-jn-band__p a { color: var(--fs-red); font-weight: 600; text-decoration: none; }
.fs-jn-band__p a:hover { text-decoration: underline; }
.fs-jn-band__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 18px; }
.fs-jn-band__item { padding-top: 14px; border-top: 1px solid var(--fs-border-cream); }
.fs-jn-band__media img { display: block; width: 100%; height: 140px; object-fit: cover; border-radius: var(--fs-radius); margin-bottom: 10px; }
.fs-jn-band__item .fs-jn-plate { height: 140px; margin-bottom: 10px; }
.fs-jn-band__kick { font-size: 12px; color: var(--fs-muted-cream); }
.fs-jn-band__item-t { margin: 6px 0 6px; font-family: var(--fs-font-serif); font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--fs-ink); text-wrap: balance; }
/* ---- The shorter pieces on the Letters and Subscribe pages: a year plate for a story with no photograph ---- */
.fs-pub-card .fs-jn-plate { width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid var(--fs-border-cream); border-radius: 0; }
.fs-pub-card .fs-jn-plate__big { font-size: 34px; }
.fs-jn-cardplace:not(:has(span)) { display: none; }
.fs-jn-cardplace .fs-jn-place + .fs-jn-place::before { content: ", "; }
/* ---- Place pages: the stories that carry the camp's or the region's tag ---- */
.fs-jn-placed { padding: 8px 0 40px; background: var(--fs-cream); }
.fs-jn-placed__in { max-width: 900px; }
.fs-jn-placed__t { margin: 8px 0 6px; font-family: var(--fs-font-serif); font-weight: 600; font-size: 32px; line-height: 1.1; color: var(--fs-ink); }
.fs-jn-placed__all { margin: 16px 0 0; }
/* ---- The header and the footer ---- */
.fs-footer__col a.fs-footer__journal { color: var(--fs-gold); }
/* ---- Tablets and phones ---- */
/* a tablet or a phone: one column, the rail after the first three stories (the feed's own
box steps aside, display: contents, so its entries and the rail can be put in order) */
@media (max-width: 980px) {
.fs-jn-main:not(.fs-jn-main--tag) .fs-jn-main__in { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.fs-jn-main:not(.fs-jn-main--tag) .fs-jn-feed { display: contents; }
.fs-jn-feedhead { order: 0; min-width: 0; }
.fs-jn-chips { max-width: 100%; min-width: 0; }
.fs-jn-feed > .fs-jn-entry:nth-child(-n+3), .fs-jn-feed > .fs-jn-empty { order: 1; }
.fs-jn-rail { order: 2; margin: 28px 0 8px; }
.fs-jn-feed > .fs-jn-entry:nth-child(n+4) { order: 3; }
.fs-jn-feedfoot { order: 4; }
}
@media (max-width: 600px) {
.fs-jn-post-head--plain { padding-bottom: 34px; }
.fs-pub-body.fs-jn-body--plain { padding-top: 34px; }
}
@media (max-width: 700px) {
.fs-jn-head .fs-jn-head__in { padding: 0 20px; }
.fs-jn-head { padding-bottom: 36px; }
.fs-jn-featured { padding: 28px 16px 0; }
.fs-jn-feat__media { flex-basis: 100%; }
.fs-jn-feat__media img { min-height: 0; height: 240px; }
.fs-jn-feat__cap { font-size: 11px; padding: 24px 12px 8px; }
.fs-jn-feat__body { padding: 20px 18px 22px; gap: 10px; }
.fs-jn-feat__title { font-size: 28px; }
.fs-jn-feat__line { font-size: 16px; }
.fs-jn-feat__kick .fs-jn-k__fmt ~ .fs-jn-k__cat { display: none; }
.fs-jn-main { padding: 28px 16px 40px; }
.fs-jn-feedhead__t { font-size: 28px; }
.fs-jn-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: thin; }
.fs-jn-entry { flex-direction: column; gap: 12px; padding: 22px 0; }
.fs-jn-entry--photo .fs-jn-entry__media { flex-basis: auto; width: 100%; }
.fs-jn-entry__media img { width: 100%; height: 200px; }
/* a story with no photograph: the plate beside the kicker, then the title, the line and the meta
line across the width (the entry's body steps aside, display: contents) */
.fs-jn-entry:not(.fs-jn-entry--photo) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center; }
.fs-jn-entry:not(.fs-jn-entry--photo) > .fs-jn-entry__body { display: contents; }
.fs-jn-entry:not(.fs-jn-entry--photo) > .fs-jn-plate { grid-column: 1; grid-row: 1; margin-bottom: 8px; }
.fs-jn-entry:not(.fs-jn-entry--photo) .fs-jn-entry__kick { grid-column: 2; grid-row: 1; margin-bottom: 8px; }
.fs-jn-entry:not(.fs-jn-entry--photo) .fs-jn-entry__body > :not(.fs-jn-entry__kick) { grid-column: 1 / -1; }
.fs-jn-entry .fs-jn-plate__where { display: none; }
.fs-jn-plate { flex: 0 0 auto; height: auto; padding: 8px 12px; }
.fs-jn-plate__top { font-size: 11px; }
.fs-jn-plate__big { font-size: 22px; }
.fs-jn-entry__title { font-size: 23px; }
.fs-jn-entry__line { font-size: 16px; }
.fs-jn-meta { font-size: 13px; }
.fs-jn-panel, .fs-jn-letter { padding: 20px 18px; }
.fs-jn-coming__when { font-size: 26px; }
.fs-jn-more__in { padding: 36px 20px 48px; }
.fs-jn-more__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.fs-jn-band { padding: 36px 0; }
.fs-jn-band__card { padding: 24px 20px; }
.fs-jn-band__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fs-jn-from__t, .fs-jn-placed__t { font-size: 27px; }
.fs-jn-from__item { gap: 14px; }
.fs-jn-from__media img { width: 96px; height: 64px; }
.fs-jn-content .fs-jn-event dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.fs-jn-content .fs-jn-event dt { padding-top: 10px; }
.fs-jn-content .fs-jn-sources { padding: 20px 18px; }
}
/* 1.25.1 · a held-back note starts with its reason from the tag; make it read as a sentence however it was typed */
.fs-pos__note::first-letter { text-transform: uppercase; }
/* 1.25.2 · a note under a position ("Private land, and closed. No visiting."), from the card's data-note */
.fs-pos__pt-note { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; font-style: italic; color: var(--fs-muted-dark); }
.fs-mp-pos__note { margin-top: 3px; font-size: 12px; line-height: 1.45; font-style: italic; color: var(--fs-muted-cream); }
/* 1.25.2 · the MINFILE card's "Frank's record: …" button may wrap, but never between the mine's name and its arrow */
.fs-mp-mf .fs-mp-mf__go { line-height: 1.35; padding-left: 14px; padding-right: 14px; }
/* ---- 1.25.3 · a position taken on site is a pointed pin (Colleen, November 4, 2026: "lets go with B").
The tip is the exact point: the map's divIcon is anchored on it (fs-map.js pinIcon, pin), so nothing here moves the
mark, it only turns it. Camps keep the diamond, sites the square, the province its X. The label sits beside the head
(the icon's tooltipAnchor), the slow gold ping ripples from the tip, and hovering grows the head about the tip. ---- */
.fs-pin--pt { position: relative; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: -1.4px 1.4px 5px rgba(0,0,0,0.38); }
.fs-pin--pt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36%; height: 36%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--fs-ink); }
.fs-pinbox .fs-pin--pt { width: 24px; height: 24px; border-width: 2.5px; }
.fs-pinbox--pt.is-hover .fs-pin--pt, .fs-pinbox--pt:focus-visible .fs-pin--pt { transform: translateY(17px) scale(1.18) translateY(-17px) rotate(-45deg); box-shadow: 0 0 0 4px rgba(201,162,39,0.4), -2px 2px 8px rgba(0,0,0,0.4); }
.fs-pinbox--pt.is-open .fs-pin--pt { border-color: var(--fs-red); box-shadow: 0 0 0 5px rgba(173,76,43,0.38), -1.4px 1.4px 8px rgba(0,0,0,0.4); }
.fs-pinbox--pt .fs-pin-ping { top: 37px; }
.fs-pinbox--sm .fs-pin--pt { width: 14px; height: 14px; border-width: 2px; box-shadow: -1px 1px 3px rgba(0,0,0,0.35); }
.fs-pinbox--md .fs-pin--pt { width: 18px; height: 18px; }
.leaflet-marker-icon.fs-pinbox--sm { pointer-events: none; }
.fs-mp-key .fs-pin--pt { width: 12px; height: 12px; border-width: 1.5px; margin-top: -3px; box-shadow: none; }
.fs-mp-col h3 .fs-pin--pt { width: 14px; height: 14px; margin-top: 4px; border-width: 2px; box-shadow: none; }
/* the card of a pointed pin opens 33 px higher, above the head (fs-map.js), so it is 33 px shorter: a tall card still
leaves the open pin in view at the map's foot, as the gold dot's card did */
.fs-mp-frame .fs-mp-ptpop .leaflet-popup-content { max-height: max(300px, calc(min(74vh, 760px) - 183px)); }
@media (min-width: 1101px) { .fs-mp-frame:not(.is-full) .fs-mp-ptpop .leaflet-popup-content { max-height: max(300px, calc(var(--fs-mp-h) - 101px)); } }
@media (min-width: 768px) and (max-width: 1100px) { .fs-mp-frame:not(.is-full) .fs-mp-ptpop .leaflet-popup-content { max-height: max(280px, calc(62vh - 109px)); } }
/* ---------- 1.26.0 · The Union record (Build 13, November 5, 2026): the register of four claims.
The Yankee Boy's .fs-mr--yb rule sets the register to three columns for its three claims; the Union's
carries fs-mr-register--four: four across from 700px of container width, two by two below. ---------- */
.fs-mr--yb .fs-mr-register--four { max-width: 900px; }
.fs-mr--yb .fs-mr-register--four .fs-mr-register__names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 700px) { .fs-mr--yb .fs-mr-register--four .fs-mr-register__names { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ---------- 1.26.1 · Every Leaflet map keeps its layers inside its own box (Colleen, November 5, 2026: "the thumb map
is sliding over the nav"). Leaflet gives its panes z-index 200 to 1000. Nothing around the small maps (a record's
Position cell, the Mines index's area map) made a stacking context, so as the page scrolled the panes painted over
the sticky menu (.fs-header, z-index 10), a record's level bar (6) and the Mines index's search bar (5). Isolation
makes each map its own stacking context, so the panes keep their order inside it and the map sits in the page's
flow like any other box. The big map's frame (.fs-mp-frame) already had it. ---------- */
.leaflet-container, .fs-pos__thumb, .fs-mn-area__map { isolation: isolate; }
/* ---------- 1.26.2 · A record's figures can size their own columns (Colleen, November 5, 2026: on a computer the
Union's "1.39 million" ran up against its divider). The band's five columns are fixed at 1 : 1.13 : 0.9 : 0.9 : 1.13,
which suits the Yankee Boy's figures. The Union's longest figure falls in a narrow column and its shortest (64) in a
wide one. A figures row marked fs-mr-band__stats--fit sizes each column to its figure and label and shares the rest of
the width equally, so every figure has the same room after it. Computer widths only: from 1099px down the band keeps
its three- and two-column layouts. ---------- */
@media (min-width: 1100px) { .fs-mr-band__stats--fit { grid-template-columns: repeat(5, auto); } }
/* ---------- 1.26.3 · A record's opening (Colleen, November 5, 2026: "we want people to come to the pages and feel
great power in the writing with a story of heart"). A dark band of its own between the band of figures and the
levels, a few lines in the reading serif, italic, centred: on the Union, the dates the miners wrote on the walls.
The section carries no data-fs-mr-level, so the rail, the level bar and the stations ignore it. ---------- */
.fs-mr-prologue { background: radial-gradient(120% 100% at 50% 0%, var(--fs-card-dark, #1F1A14) 0%, var(--fs-dark-base, #131110) 72%); border-bottom: 1px solid #2A2622; padding: clamp(64px, 9vw, 124px) 0; }
.fs-mr-prologue__in { display: grid; gap: clamp(14px, 1.7vw, 22px); max-width: 800px; margin: 0 auto; padding: 0 max(20px, 4vw); text-align: center; }
.fs-mr .fs-mr-prologue__p { margin: 0; font-family: var(--fs-font-serif); font-style: italic; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.42; color: var(--fs-bone); text-wrap: balance; }
/* ---------- 1.26.4 · A brass tag on a record's names list (Colleen, November 5, 2026: "should we provide his brass
tags"). The man a record names who died in the mine carries the tag every man carries on In Memory, beside his name,
and his year links to his place there. The tag is In Memory's own: the same brass, with its hole cut through by a
mask so the page shows through on any background. On the Union: Joseph Sanigala, 1930. ---------- */
.fs-mr .fs-mr-nm__tag { display: inline-block; position: relative; width: 12px; height: 16px; margin-left: 11px; vertical-align: -1px; border-radius: 2px 2px 3px 3px; background: linear-gradient(160deg, #DCBD6C 0%, #B08A37 55%, #8A6A26 100%); box-shadow: inset 0 0 0 1px rgba(90, 62, 16, 0.35); -webkit-mask: radial-gradient(circle at 50% 4px, transparent 1.6px, #000 1.9px); mask: radial-gradient(circle at 50% 4px, transparent 1.6px, #000 1.9px); }
.fs-mr .fs-mr-nm__d .fs-mr-nm__mem { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(201, 162, 39, 0.4); transition: border-color 0.2s var(--fs-ease); }
.fs-mr .fs-mr-nm__d .fs-mr-nm__mem:hover, .fs-mr .fs-mr-nm__d .fs-mr-nm__mem:focus-visible { border-bottom-color: currentColor; }
/* 1.26.5 (November 5, 2026): an image at its regular width in a Story, Photo Essay or Letter stays inside the text
column on a phone. The base theme gives every .kg-card width: 100vw and, on small screens, .kg-image-card
max-width: 100vw, which ran an image 20 px past the right edge of the screen (first seen on the Union's Journal
post, the first Story with regular-width photographs). Wide and full-width images keep their own widths. */
.fs-pub-content .kg-image-card:not(.kg-width-wide):not(.kg-width-full) { width: auto; max-width: 100%; }
/* 1.26.6 (November 5, 2026; Colleen, of the footer: "are you ok with the alignment of franks logo?"): a
is display: contents, so its became a zero-width item of whatever flex box held it, and the box's gap was added
before the image. That pushed Frank's logo 14 px in from the footer's left edge on every page, and put 10 px of extra
space above the photographs in Frank and the Record (the Union and the Yankee Boy) and in the Yankee Boy Story's history.
A is never drawn, and the browser still picks the image from it with display: none. */
picture.fs-pic > source { display: none; }
/* ---- 1.27.1 · the base map softened (Colleen, November 6, 2026: "Go with softer it will be better"): OpenTopoMap's
orange high ground and bright green forest are calmed under the pins and the province's marks, which keep their
colours. The filter sits on the base tiles only, the first layer of each map's tile pane (the MINFILE picture
layer, when it stands in for the WFS, is a later layer): the big map, the records' small maps and the Mines
index's area map alike. An interim look until the site's own map is built. */
.leaflet-tile-pane > .leaflet-layer:first-child { filter: saturate(0.55) sepia(0.12) brightness(1.04) contrast(0.92); }
/* ═══════════════════ 1.28.0 · THE RECORD on the home page (November 6, 2026) ═══════════════════
partials/h3-record.hbs: the newest records as cards, the In Memory band (the Mines page's own,
.fs-mn-mem, with one override below), and the map door. The cards are dark (the section sits
between the numbers and the cream Journal band); the Mines index keeps its cream cards. */
.fs-h3-record { padding-bottom: 0; }
.fs-h3 .fs-h3-recs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; margin-top: 36px; }
.fs-h3-rec { min-width: 0; }
.fs-h3-rec__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; background: var(--fs-card-dark); border: 1px solid var(--fs-border-dark); border-radius: 3px; overflow: hidden; transition: transform 0.4s var(--fs-ease-out), border-color 0.25s var(--fs-ease), box-shadow 0.4s var(--fs-ease-out); }
.fs-h3-rec__link:hover, .fs-h3-rec__link:focus-visible { transform: translateY(-3px); border-color: rgba(201,162,39,0.55); box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
.fs-h3-rec__link:focus-visible { outline: 3px solid var(--fs-gold); outline-offset: 3px; }
.fs-h3-rec__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #2B2622; }
.fs-h3-rec__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--fs-ease-out); }
.fs-h3-rec__link:hover img, .fs-h3-rec__link:focus-visible img { transform: scale(1.03); }
.fs-h3-rec__blank { display: flex; align-items: center; justify-content: center; height: 100%; padding: 20px; font-family: var(--fs-font-signage); font-size: 26px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-gold); background: radial-gradient(circle at 50% 30%, #3A332A, #1B1815 70%); }
.fs-h3-rec__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.fs-h3 .fs-h3-rec__where { margin: 0; font-weight: 600; font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--fs-gold); }
.fs-h3 .fs-h3-rec__title { margin: 8px 0 0; font-size: 23px; line-height: 1.2; font-weight: 700; color: var(--fs-bone); text-wrap: balance; transition: color 0.2s var(--fs-ease); }
.fs-h3-rec__link:hover .fs-h3-rec__title { color: var(--fs-gold); }
.fs-h3 .fs-h3-rec__era { margin: 8px 0 0; font-weight: 600; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fs-muted-dark); }
.fs-h3-rec__era span { white-space: normal !important; }
.fs-h3 .fs-h3-rec__hook { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--fs-body-dark); }
.fs-h3 .fs-h3-rec__cta { margin: auto 0 0; padding-top: 14px; font-weight: 700; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--fs-gold); }
/* the In Memory band: the Mines page's rules apply (.fs-mn-mem); here it sits inside the section, so no top
border of its own against the cards, and room above it */
.fs-h3-record .fs-h3-mem { margin-top: clamp(44px, 5vw, 64px); border-top: 1px solid var(--fs-border-dark); }
/* the map door */
.fs-h3 .fs-h3-map { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: clamp(26px, 4vw, 56px); align-items: center; padding-top: clamp(44px, 5vw, 64px); padding-bottom: clamp(60px, 8vw, 100px); }
.fs-h3-map__pic { position: relative; display: block; border: 1px solid var(--fs-border-dark); border-radius: 3px; overflow: hidden; background: #E9E3D3; box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 24px 60px rgba(0,0,0,0.45); text-decoration: none; transition: transform 0.4s var(--fs-ease-out), box-shadow 0.4s var(--fs-ease-out); }
.fs-h3-map__pic:hover, .fs-h3-map__pic:focus-visible { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 30px 70px rgba(0,0,0,0.55); }
.fs-h3-map__pic:focus-visible { outline: 3px solid var(--fs-gold); outline-offset: 3px; }
.fs-h3-map__pic img { display: block; width: 100%; height: auto; }
.fs-h3-map__pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,253,248,0.12), inset 0 -80px 70px -50px rgba(19,17,16,0.55); }
.fs-h3-map__open { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 9px 14px; font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-dark-base); background: var(--fs-gold); border-radius: 2px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); transition: transform 0.25s var(--fs-ease); }
.fs-h3-map__pic:hover .fs-h3-map__open { transform: translateX(3px); }
.fs-h3-map__side { min-width: 0; }
.fs-h3 .fs-h3-map__title { margin: 10px 0 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; font-weight: 700; color: var(--fs-bone); text-wrap: balance; }
.fs-h3 .fs-h3-map__p { margin: 14px 0 0; max-width: 46ch; font-size: 16.5px; line-height: 1.6; color: var(--fs-body-dark); }
.fs-h3 .fs-h3-map__go { margin: 24px 0 0; }
@media (max-width: 1100px) {
.fs-h3 .fs-h3-recs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.fs-h3 .fs-h3-map { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.fs-h3-map__side { max-width: 620px; }
}
@media (max-width: 600px) {
/* on a phone each record is a list row: a square of the picture at the top left, the words beside
it and in full (a clamp cuts mid-word), so the four read as one list, not four screens */
.fs-h3 .fs-h3-recs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.fs-h3-rec__link { flex-direction: row; align-items: flex-start; }
.fs-h3-rec__media { flex: 0 0 34%; aspect-ratio: 1 / 1; margin: 14px 0 14px 14px; border-radius: 2px; }
.fs-h3-rec__media img { position: absolute; inset: 0; }
.fs-h3-rec__body { padding: 14px 16px 14px; }
.fs-h3 .fs-h3-rec__where { font-size: 10.5px; letter-spacing: 1.8px; }
.fs-h3 .fs-h3-rec__title { margin-top: 6px; font-size: 21px; }
.fs-h3 .fs-h3-rec__era { margin-top: 6px; font-size: 11px; }
.fs-h3 .fs-h3-rec__hook { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.fs-h3 .fs-h3-rec__cta { padding-top: 10px; font-size: 11.5px; }
/* the map door on a phone: a taller crop of the province, centred on the camps, the chip at the left
so it covers sea, not pins */
.fs-h3-map__pic { aspect-ratio: 4 / 3; }
.fs-h3-map__pic img { height: 100%; object-fit: cover; object-position: 58% 50%; }
.fs-h3-map__open { right: auto; left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.fs-h3-rec__link, .fs-h3-rec__media img, .fs-h3-map__pic, .fs-h3-map__open { transition: none; }
.fs-h3-rec__link:hover, .fs-h3-map__pic:hover { transform: none; }
.fs-h3-rec__link:hover img { transform: none; }
}
/* the hero's last line (1.28.0): the mine's record, in place of the letter link (the sign-up still has the bar
at the top, the header's button and the closing band) */
.fs-h3-hero__record { margin-top: 24px; font-size: 15.5px; color: var(--fs-muted-dark); }
/* ---- 1.29.0 · the reader's notebook (Mines-Map-Plan §13; Colleen, October 27, 2026: "what if a user wants to save a
minfile card or a frank mine as they are researching"). Keep on every card; the drawer beside the map, a panel like
Layers (the same frame, drag and phone sheet); kept in the browser only. */
.fs-mp-keep { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 0 auto; padding: 3px 8px 3px 7px; font-family: var(--fs-font-signage); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; color: var(--fs-ink); background: #FFFDF8; border: 1px solid #CFC5AE; border-radius: 2px; cursor: pointer; white-space: nowrap; }
.fs-mp-keep:hover { border-color: var(--fs-ink); }
.fs-mp-keep[aria-pressed="true"] { background: var(--fs-ink); color: var(--fs-cream); border-color: var(--fs-ink); }
.fs-mp-keep svg { flex: none; }
.fs-mp-keep.is-done { background: var(--fs-red); color: var(--fs-cream); border-color: var(--fs-red); }
.fs-mp-camp-list li { display: flex; align-items: center; gap: 8px; }
.fs-mp-camp-list li a { flex: 1; min-width: 0; }
.fs-mp-camp-list .fs-mp-keep { flex: none; }
.fs-mp-mf__n .fs-mp-keep { float: right; margin: 1px 0 0 10px; }
.fs-mp-spot__acts .fs-mp-keep { margin-left: 0; padding: 4px 8px; font-size: 11px; }
.fs-mp-tool__n { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 9px; font-size: 10.5px; letter-spacing: 0.04em; text-align: center; color: var(--fs-cream); background: var(--fs-ink); }
.fs-mp-tool[aria-expanded="true"] .fs-mp-tool__n { background: var(--fs-gold); color: var(--fs-dark-base); }
.fs-mp-nb { width: 340px; z-index: 1001; }
.fs-mp-nb__lead { margin: 0; font-family: var(--fs-font-serif); font-size: 13px; line-height: 1.5; color: var(--fs-muted-cream); }
.fs-mp-nb__fail, .fs-mp-nb__warn { color: var(--fs-red); }
.fs-mp-nb__empty { margin: 0; font-family: var(--fs-font-serif); font-size: 15px; line-height: 1.5; color: var(--fs-body-cream); }
.fs-mp-nb__empty b { color: var(--fs-ink); }
.fs-mp-nb__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fs-mp-nb__e { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 11px; background: var(--fs-cream); border: 1px solid var(--fs-border-cream); border-radius: 2px; }
.fs-mp-nb__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fs-mp-kind--minfile { background: #C8157F; color: #FFFDF8; }
.fs-mp-kind--spot, .fs-mp-kind--me { background: var(--fs-gold); color: var(--fs-dark-base); }
.fs-mp-kind--mine { background: var(--fs-ink); color: var(--fs-cream); }
.fs-mp-nb__date { font-family: var(--fs-font-signage); font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-mp-nb__t { font-family: var(--fs-font-serif); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--fs-ink); }
.fs-mp-nb__t small { font-family: var(--fs-font-signage); font-weight: 700; font-size: 10.5px; letter-spacing: 0.08em; color: var(--fs-bronze); }
.fs-mp-nb__s, .fs-mp-nb__w { font-family: var(--fs-font-signage); font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-bronze); line-height: 1.5; }
.fs-mp-nb__w { text-transform: none; letter-spacing: 0.02em; font-family: var(--fs-font-serif); font-weight: 400; font-size: 13px; color: var(--fs-muted-cream); }
.fs-mp-nb__pt { font-family: var(--fs-font-serif); font-size: 15.5px; line-height: 1.35; color: var(--fs-ink); font-variant-numeric: tabular-nums; }
.fs-mp-nb__pt b { display: block; font-size: 13px; }
.fs-mp-nb__pt small { display: block; font-size: 12.5px; color: var(--fs-body-cream-2); }
.fs-mp-nb__note { width: 100%; box-sizing: border-box; margin: 4px 0 2px; padding: 6px 9px; font-family: var(--fs-font-serif); font-style: italic; font-size: 14px; line-height: 1.4; color: var(--fs-ink); background: #FFFDF8; border: 1px solid #CFC5AE; border-radius: 2px; }
.fs-mp-nb__note:focus { outline: none; border-color: var(--fs-gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.25); }
.fs-mp-nb__note::placeholder { color: #A89D86; font-style: italic; }
.fs-mp-nb__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fs-mp-nb__acts a { font-family: var(--fs-font-signage); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-red); text-decoration: none; }
.fs-mp-nb__acts a:hover { text-decoration: underline; }
.fs-mp-nb__rm { margin-left: auto; color: var(--fs-muted-cream); border-color: transparent; }
.fs-mp-nb__rm:hover { color: var(--fs-red); border-color: var(--fs-red); }
.fs-mp-nb__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--fs-border-cream); }
.fs-mp-nb__clear { margin-left: auto; color: var(--fs-muted-cream); }
.fs-mp-nb__clear[data-armed="1"] { color: var(--fs-cream); background: var(--fs-red); border-color: var(--fs-red); }
.fs-mp-list__nb { margin: 0; }
.fs-mp-list__nbbtn { margin: 0; padding: 0; font: inherit; font-weight: 700; letter-spacing: inherit; text-transform: inherit; color: var(--fs-red); background: none; border: 0; cursor: pointer; }
.fs-mp-list__nbbtn:hover { text-decoration: underline; }
@media (max-width: 767px) { .fs-mp-nb { width: auto; } }
/* ---- 1.30.0 · the site's own map under the pins (Mines-Map-Plan §17). MapLibre's canvas sits in a box of its own in
Leaflet's tile pane; the 1.27.1 softening is for the raster tiles only and leaves this box alone. */
.leaflet-gl-layer { position: absolute; left: 0; top: 0; }
.leaflet-gl-layer .maplibregl-canvas { position: absolute; left: 0; top: 0; }
.leaflet-tile-pane > .leaflet-gl-layer + .leaflet-layer { filter: none; }
/* ---- 1.30.2 · the list beside the map, reversed (Colleen, November 6: "people just are going to miss the click on map
icons … maybe a reverse?"). The row itself shows the mine on the map, the whole width of it, and its pin lights up
while the pointer rests on the row; the record's page is the link in words at the right, in its own column. */
.fs-mp-list__how { margin: 5px 0 0; font-family: var(--fs-font-serif); font-style: italic; font-size: 13px; line-height: 1.4; color: var(--fs-muted-cream); }
.fs-mp-list__how b { font-style: normal; font-weight: 700; font-family: var(--fs-font-signage); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-red); }
.fs-mp-row__main { position: relative; }
.fs-mp-row__main:hover .fs-mp-row__t, .fs-mp-row__main:focus-visible .fs-mp-row__t { color: var(--fs-red); }
/* the thumb tells what the row does: the map's own pointed pin in its corner, gold at rest, red under the pointer */
.fs-mp-row__thumb { position: relative; }
.fs-mp-row__thumb::after { content: ""; position: absolute; right: 5px; bottom: 5px; box-sizing: border-box; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 1.5px solid var(--fs-ink); background: radial-gradient(circle, var(--fs-ink) 0 1.8px, var(--fs-gold) 2.4px); box-shadow: -1px 1px 3px rgba(0,0,0,0.45); transition: background 0.15s ease; }
.fs-mp-row__main:hover .fs-mp-row__thumb::after, .fs-mp-row__main:focus-visible .fs-mp-row__thumb::after, .fs-mp-row.is-on .fs-mp-row__thumb::after { background: radial-gradient(circle, #FFFDF8 0 1.8px, var(--fs-red) 2.4px); }
.fs-mp-row__go { display: flex; flex: none; align-self: stretch; align-items: center; justify-content: center; width: 84px; margin: 0; padding: 0 6px; border: 0; border-left: 1px solid var(--fs-border-cream); background: rgba(255,253,248,0.5); font-family: var(--fs-font-signage); font-weight: 700; font-size: 10px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; text-decoration: none; color: var(--fs-red); transition: background 0.15s ease, color 0.15s ease; }
a.fs-mp-row__go:hover, a.fs-mp-row__go:focus-visible { background: var(--fs-red); color: var(--fs-cream); outline: none; }
.fs-mp-row:hover a.fs-mp-row__go:not(:hover) { background: #FFFDF8; }
.fs-mp-row__go--soon { color: var(--fs-muted-cream); font-weight: 600; }
.fs-mp-row.is-on .fs-mp-row__go { border-left-color: var(--fs-ink); }
@media (max-width: 767px) { .fs-mp-row__go { width: 74px; padding: 0 4px; } }
/* the notebook: every entry the same shape (Colleen: "some are 2 line, some are 1 line"); the links on a line of their
own, then Show on map at the left and Remove at the right */
.fs-mp-nb__links { display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 1px 0 0; }
.fs-mp-nb__links a { font-family: var(--fs-font-signage); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-red); text-decoration: none; }
.fs-mp-nb__links a:hover { text-decoration: underline; }
.fs-mp-nb__acts { flex-wrap: nowrap; justify-content: space-between; }
/* ---- 1.30.3 · the chosen row lit whole (Colleen, November 6, 23:38, from the live list: "when we click on a card
everything should light up including the record button, see how it stands out"): the row warmer with its gold
bar, the name red, the pin red, and the Record column filled red like its own hover; ink under the pointer. */
.fs-mp-row.is-on { background: #F8EEDA; box-shadow: inset 4px 0 0 var(--fs-gold); }
.fs-mp-row.is-on .fs-mp-row__t { color: var(--fs-red); }
.fs-mp-row.is-on .fs-mp-row__go, .fs-mp-row.is-on a.fs-mp-row__go:not(:hover) { background: var(--fs-red); border-left-color: var(--fs-red); color: var(--fs-cream); }
.fs-mp-row.is-on a.fs-mp-row__go:hover, .fs-mp-row.is-on a.fs-mp-row__go:focus-visible { background: var(--fs-ink); border-left-color: var(--fs-ink); color: var(--fs-cream); }
.fs-mp-row.is-on .fs-mp-row__go--soon { background: #CFC5AE; border-left-color: #CFC5AE; color: var(--fs-ink); }
/* ---- 1.31.0 · the Province's roads (Mines-Map-Plan §19; Colleen, November 6, 23:29): the key's line swatches, drawn
as the Province's service draws the roads in the site's hand, and the road card. */
.fs-mp-key__ln { display: inline-block; flex: none; width: 22px; height: 0; border-top: 2px solid #8C6E42; }
.fs-mp-key__row > span.fs-mp-key__ln { flex: none; width: 22px; }
.fs-mp-key__row > span.fs-mp-key__ln + span { flex: 1; }
.fs-mp-key__ln--paved { border-top: 2.5px solid #9C8763; }
.fs-mp-key__ln--gravel { border-top: 2px solid #8C6E42; }
.fs-mp-key__ln--rough { border-top: 2px dashed #8C6E42; }
.fs-mp-key__ln--overgrown { border-top: 2px dotted #6B5636; }
.fs-mp-key__ln--retired { border-top: 2px dashed #AD4C2B; }
.fs-mp-key__sub { padding-left: 12px; color: var(--fs-body-cream-2); }
.fs-mp-key__sub[hidden] { display: none; }
.fs-mp-road .fs-mp-mf__d i { font-style: italic; color: var(--fs-muted-cream); }
.fs-mp-kind--road { background: #8C6E42; color: #FFFDF8; }
/* ---- 1.31.1 · the key within the frame (Colleen, November 7, 00:56: the Roads group pushed the key past the frame's foot on her
screen, where it was clipped: "the roads do not work on the key, it's much"): the key never taller than the frame, scrolling
inside itself when it must; the three surfaces on one line. */
.fs-mp-key { max-height: calc(100% - 24px - var(--fs-mp-cover, 0px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #CFC5AE transparent; }
.fs-mp-key::-webkit-scrollbar { width: 6px; }
.fs-mp-key::-webkit-scrollbar-thumb { background: #CFC5AE; border-radius: 3px; }
.fs-mp-key__mf { flex: none; }
.fs-mp-key__surfaces { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-left: 12px; font-size: 9.5px; letter-spacing: 0.08em; }
.fs-mp-key__surfaces > span { display: inline-flex; align-items: center; gap: 5px; }
.fs-mp-key__surfaces .fs-mp-key__ln { width: 14px; } /* the line no wider than the key was before the roads (1.32.0) */
/* ---- 1.32.0 · the field tools (Colleen, November 7, 01:12–01:14: "compass?", "should we move forward with this?"): the
heading arrow on the reader's own dot, the truck mark and the faint line back to it, daylight on the cards. */
.fs-me__arrow { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; transform-origin: 50% 50%; transition: transform 0.25s ease; }
.fs-me__arrow::before { content: ""; position: absolute; left: 50%; top: -12px; width: 0; height: 0; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #1F5FD1; filter: drop-shadow(0 0 1.5px #FFFDF8) drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.fs-me__arrow[hidden] { display: none; }
.fs-truck, .leaflet-marker-icon.fs-truck { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 26px; height: 26px; border-radius: 4px; background: #FFFDF8; border: 2px solid var(--fs-ink); color: var(--fs-ink); box-shadow: 0 2px 6px rgba(0,0,0,0.35); cursor: pointer; }
.fs-truck:hover, .leaflet-marker-icon.fs-truck:hover { background: var(--fs-gold); }
.fs-me-line { stroke: #1F5FD1; stroke-opacity: 0.7; }
.fs-mp-sun b, .fs-mp-truckline b { font-weight: 700; color: var(--fs-ink); }
.fs-mp-mf__live { font-weight: 600; letter-spacing: 0.1em; color: #1F5FD1; }
@media (prefers-reduced-motion: reduce) { .fs-me__arrow { transition: none; } }
/* ---- 1.33.0 · the site's own layers from the bucket (Mines-Map-Plan §19, Colleen's decision of November 7): the Province's
roads and trails drawn from the site's own tiles; the trails' key row and badge; 1.32.1's rough-position note. */
.fs-mp-key__ln--trail { border-top: 2px dashed #4E7A38; }
.fs-mp-key__trails { margin-top: 2px; padding-top: 6px; }
.fs-mp-key__trails[hidden] { display: none; }
.fs-mp-kind--trail { background: #4E7A38; color: #FFFDF8; }
.fs-mp-rough { padding: 6px 9px; background: rgba(201,162,39,0.14); border-left: 3px solid var(--fs-gold); }
.fs-mp-rough b { color: var(--fs-ink); }
/* ---- 1.34.0 · the field tools, second part (Colleen, November 7, 11:58: "We will do them all… Lets build it."): marks
with a word on each (the truck became the first of them), breadcrumbs, where you last had signal, the text message
with your position, and the card of what to tell 911. */
.fs-mark--camp, .leaflet-marker-icon.fs-mark--camp { border-color: #4E7A38; color: #4E7A38; }
.fs-mark--parted, .leaflet-marker-icon.fs-mark--parted { border-color: #AD4C2B; color: #AD4C2B; border-radius: 50%; }
.fs-mark--trailhead, .leaflet-marker-icon.fs-mark--trailhead { border-color: #3B5A2B; color: #3B5A2B; }
.fs-mark--spot, .leaflet-marker-icon.fs-mark--spot { border-color: var(--fs-gold); color: var(--fs-ink); border-radius: 50%; }
.leaflet-tooltip.fs-mark__tip { font: 700 11px/1.2 var(--fs-font-signage); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fs-ink); background: #FFFDF8; border: 1px solid #CFC5AE; border-radius: 3px; padding: 3px 7px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.leaflet-tooltip.fs-mark__tip::before { border-right-color: #CFC5AE; }
.fs-track { stroke: #AD4C2B; stroke-opacity: 0.85; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 6; stroke-width: 3.5; }
.fs-mp-mark__row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed #D9D0BB; }
.fs-mp-mark__lead { flex: none; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fs-body-cream-2); margin-right: 2px; }
.fs-mp-mini--mark { padding: 3px 8px; }
.fs-mp-mark__word { margin: 4px 0 6px; }
.fs-mp-mark__word, .fs-mp-mf .fs-mp-nb__note { width: 100%; box-sizing: border-box; font-size: 14px; padding: 5px 8px; border: 1px solid #CFC5AE; border-radius: 3px; background: #FFFDF8; color: var(--fs-ink); }
.fs-mp-marks { margin: 6px 0 2px; padding: 6px 9px; background: rgba(27,26,24,0.04); border-left: 3px solid #CFC5AE; }
.fs-mp-marks .fs-mp-truckline { margin: 2px 0; }
.fs-mp-mark__go { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--fs-ink); text-decoration: underline; text-decoration-color: #CFC5AE; text-underline-offset: 2px; cursor: pointer; }
.fs-mp-mark__go:hover { text-decoration-color: var(--fs-ink); }
.fs-mp-signal { padding: 6px 9px; background: rgba(173,76,43,0.1); border-left: 3px solid #AD4C2B; }
.fs-mp-signal b { color: #AD4C2B; }
.fs-mp-trackline b { color: var(--fs-ink); }
.fs-mp-mini--help { border-color: #AD4C2B; color: #AD4C2B; font-weight: 700; }
.fs-mp-mini--help:hover { background: #AD4C2B; color: #FFFDF8; }
.fs-mp-help .fs-mp-mf__k { color: #AD4C2B; }
.fs-mp-help .fs-mp-spot__t { font-weight: 600; margin: 4px 0 8px; }
.fs-mp-nb__track { margin: 10px 0 2px; padding: 10px 12px; border: 1px dashed #AD4C2B; border-radius: 4px; }
.fs-mp-nb__track[hidden] { display: none; }
.fs-mp-nb__track-t { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.fs-mp-nb__track-t b { font-size: 15px; }
/* ---------- 1.35.0 · the field tools, third part (Colleen, November 7, 11:52 and 13:14): a GPX file from a handheld laid over
the map, a photo placed where it was taken, the weather for a spot when asked, the trip note. */
.fs-gpx-track { stroke: #4A6B8A; stroke-opacity: 0.85; stroke-linecap: round; stroke-linejoin: round; }
.fs-gpx-wpt, .leaflet-marker-icon.fs-gpx-wpt { display: flex; align-items: center; justify-content: center; color: #4A6B8A; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.35)); cursor: pointer; }
.fs-mp-kind--gpx { background: #4A6B8A; color: #FFFDF8; }
.fs-mp-kind--photo { background: #7A5C3A; color: #FFFDF8; }
.fs-photo, .leaflet-marker-icon.fs-photo { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 30px; height: 30px; border-radius: 5px; background: #FFFDF8; border: 2px solid #7A5C3A; color: #7A5C3A; box-shadow: 0 2px 6px rgba(0,0,0,0.35); overflow: hidden; cursor: pointer; }
.fs-photo__pic { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; }
.fs-mp-photo__img { display: block; max-width: 100%; max-height: 260px; width: auto; margin: 4px 0 8px; border-radius: 3px; border: 1px solid #D9D0BB; object-fit: contain; }
.fs-mp-nb__thumb { float: right; width: 56px; height: 56px; object-fit: cover; border-radius: 3px; border: 1px solid #D9D0BB; margin: 0 0 6px 10px; }
.fs-mp-nb__own { margin: 10px 0 2px; padding: 10px 12px 6px; border-top: 1px dashed #D9D0BB; }
.fs-mp-nb__own-t { margin: 0 0 4px; }
.fs-mp-nb__own .fs-mp-nb__list { margin-top: 8px; }
.fs-mp-nb__note-line { background: rgba(201,162,39,0.14); border-left: 3px solid var(--fs-gold); padding: 6px 9px; }
.fs-mp-nb__note-line[hidden] { display: none; }
.fs-mp-file { position: relative; overflow: hidden; display: inline-block; }
.fs-mp-file input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.fs-mp-file:focus-within { outline: 2px solid var(--fs-gold); outline-offset: 2px; }
.fs-mp-frame.is-drop { outline: 3px dashed var(--fs-gold); outline-offset: -6px; }
.fs-mp-wx { margin: 6px 0 2px; padding: 6px 9px; background: rgba(74,107,138,0.08); border-left: 3px solid #4A6B8A; }
.fs-mp-wx .fs-mp-mf__d { margin: 2px 0; }
.fs-mp-wx .fs-mp-mf__src { margin-top: 4px; }
.fs-mp-trip__f { display: block; margin: 6px 0; }
.fs-mp-trip__f > span { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fs-body-cream-2); margin-bottom: 2px; }
.fs-mp-trip__f input { width: 100%; box-sizing: border-box; }
.fs-mp-trip__bear { padding: 6px 9px; background: rgba(27,26,24,0.04); border-left: 3px solid #CFC5AE; }
.fs-mp-tripline.is-late { padding: 6px 9px; background: rgba(173,76,43,0.1); border-left: 3px solid #AD4C2B; }
.fs-mp-tripline.is-late b { color: #AD4C2B; }
/* ---------- 1.36.0 · Advisories (Mines-Map-Plan §23): warnings where people plan, read live and marked by kind. */
.fs-adv, .leaflet-marker-icon.fs-adv { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; background: #AD4C2B; color: #FFFDF8; border: 2px solid #FFFDF8; box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer; }
.fs-adv--wildlife, .leaflet-marker-icon.fs-adv--wildlife { background: #8A3A1E; }
.fs-adv--closure, .leaflet-marker-icon.fs-adv--closure { background: #5C5346; }
.fs-adv--fire, .leaflet-marker-icon.fs-adv--fire, .fs-adv--ban, .leaflet-marker-icon.fs-adv--ban { background: #C9402B; }
.fs-adv--avalanche, .leaflet-marker-icon.fs-adv--avalanche { background: #4A6B8A; }
.fs-adv--road, .leaflet-marker-icon.fs-adv--road { background: #3B3A36; }
.fs-adv.is-high, .leaflet-marker-icon.fs-adv.is-high { border-color: #FFD36B; box-shadow: 0 0 0 2px rgba(201,64,43,0.35), 0 1px 4px rgba(0,0,0,0.4); }
.fs-adv-line { stroke-linecap: round; }
.fs-adv-area { stroke-opacity: 0.5; }
.fs-mp-key__dot { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #AD4C2B; border: 2px solid #FFFDF8; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); box-sizing: border-box; }
.fs-mp-key__row > span.fs-mp-key__dot { flex: none; width: 12px; }
.fs-mp-key__dot--wildlife { background: #8A3A1E; } .fs-mp-key__dot--closure { background: #5C5346; } .fs-mp-key__dot--fire { background: #C9402B; } .fs-mp-key__dot--av { background: #4A6B8A; } .fs-mp-key__dot--road { background: #3B3A36; }
.fs-mp-key__adv { margin-top: 2px; padding-top: 6px; }
.fs-mp-key__advkinds .fs-mp-key__dot { width: 10px; height: 10px; }
.fs-mp-advnear { margin: 6px 0 2px; padding: 6px 9px; background: rgba(173,76,43,0.08); border-left: 3px solid #AD4C2B; }
.fs-mp-advnear .fs-mp-mf__d { margin: 2px 0; }
p.fs-mp-advnear { background: none; border-left: 3px solid #CFC5AE; }
.fs-mp-adv .fs-mp-spot__t { margin: 2px 0 6px; }
.fs-mp-key__world { margin: 6px 0 2px; padding: 6px 9px; max-width: 230px; white-space: normal; font-size: 10.5px; letter-spacing: 0.04em; text-transform: none; line-height: 1.4; background: rgba(201,162,39,0.14); border-left: 3px solid var(--fs-gold); }
.fs-mp-key__world[hidden] { display: none; }
/* 1.36.0: the key keeps its old width; a long row (the advisories' kinds) wraps rather than widening it */
.fs-mp-key { max-width: 262px; }
/* ---------- 1.37.0 · the map's own home: the line under the map, and Take it offline for a reader on the list. */
.fs-mp-home { padding: 8px 10px; background: rgba(201,162,39,0.10); border-left: 3px solid var(--fs-gold); }
.fs-mp-home .fs-mp-mini { margin-left: 6px; vertical-align: middle; }
.fs-mp-beacon { margin: 8px 0 4px; padding: 8px 10px; border: 1px dashed #AD4C2B; border-radius: 4px; }
.fs-mp-beacon.is-on { border-style: solid; background: rgba(78,122,56,0.08); border-color: #4E7A38; }
.fs-mp-beacon .fs-mp-mf__k { margin-top: 0; }
.fs-mp-beacon.is-on .fs-mp-mf__k { color: #4E7A38; }
.fs-mp-beacon__note { font-style: italic; }
.fs-mp-beaconline { padding: 6px 9px; background: rgba(78,122,56,0.08); border-left: 3px solid #4E7A38; }
/* 1.37.0 · the signal map: the squares, the key's swatch, the opt-in's tick, the cards' line */
.fs-mp-key__sq { flex: none; display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid rgba(0,0,0,0.2); }
.fs-mp-key__row > span.fs-mp-key__sq { flex: none; width: 14px; }
.fs-mp-key__sq--sig { background: rgba(31,122,90,0.5); }
.fs-mp-key__sig { margin-top: 2px; padding-top: 6px; }
.fs-mp-key__sig .fs-mp-key__sub { max-width: 230px; white-space: normal; text-transform: none; letter-spacing: 0.04em; font-size: 10.5px; line-height: 1.4; }
.fs-mp-layer--share { margin-left: 14px; padding-left: 10px; border-left: 3px solid rgba(31,122,90,0.45); }
.fs-mp-layer--share.is-off { opacity: 0.85; }
.fs-mp-sighere { padding: 6px 9px; background: rgba(31,122,90,0.08); border-left: 3px solid #1F7A5A; }
/* 1.37.0 · Before you go: the panel, its day, its ticks */
.fs-mp-byg { width: 360px; z-index: 1001; gap: 6px; }
.fs-mp-byg .fs-mp-mf__d { margin: 4px 0; font-family: var(--fs-font-serif); font-size: 13px; line-height: 1.5; color: var(--fs-ink); }
.fs-mp-byg .fs-mp-mf__src { margin: 6px 0 0; }
.fs-mp-byg__day label { display: flex; align-items: center; gap: 8px; font-family: var(--fs-font-signage); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-mp-byg__day select { font-family: var(--fs-font-serif); font-size: 13px; padding: 3px 6px; border: 1px solid #CFC5AE; border-radius: 3px; background: #FFFDF8; color: var(--fs-ink); max-width: 100%; }
.fs-mp-byg__src { color: var(--fs-muted-cream); font-size: 12px; }
.fs-mp-byg__av { padding: 6px 9px; border-left: 3px solid #4A6B8A; background: rgba(74,107,138,0.08); }
.fs-mp-byg__av.is-medium { border-left-color: #C98A27; background: rgba(201,138,39,0.10); }
.fs-mp-byg__av.is-high { border-left-color: #C9402B; background: rgba(201,64,43,0.10); }
.fs-mp-byg__ban { padding: 6px 9px; border-left: 3px solid #C9402B; background: rgba(201,64,43,0.08); }
.fs-mp-byg__bear { padding: 6px 9px; background: rgba(43,35,23,0.05); border-left: 3px solid #CFC5AE; }
.fs-mp-byg__kit { margin-top: 2px; padding-top: 6px; border-top: 1px dashed #CFC5AE; }
.fs-mp-byg__tick { display: flex; align-items: flex-start; gap: 8px; margin: 3px 0; font-family: var(--fs-font-serif); font-size: 13px; line-height: 1.45; color: var(--fs-ink); cursor: pointer; }
.fs-mp-byg__tick input { margin-top: 3px; flex: none; }
.fs-mp-byg__tick input:checked + span { color: var(--fs-muted-cream); text-decoration: line-through; text-decoration-color: rgba(43,35,23,0.35); }
@media (max-width: 767px) { .fs-mp-byg { width: auto; } }
/* 1.37.0 · the drawn line: the bar while drawing, the crosshair, the notebook's block and the profile */
.fs-mp-drawbar { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 1002; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 8px 12px; background: #FFFDF8; border: 1.5px solid #6B2D5C; border-radius: 3px; box-shadow: 0 10px 28px rgba(43,35,23,0.22); font-family: var(--fs-font-serif); font-size: 13px; color: var(--fs-ink); }
.fs-mp-drawbar[hidden] { display: none; }
.fs-mp-drawbar .fs-mp-mini[disabled] { opacity: 0.45; cursor: default; }
.fs-mp-page.is-drawing .fs-mp-map, .is-drawing .leaflet-container, .is-drawing .leaflet-grab { cursor: crosshair !important; }
.fs-mp-kind--line { background: #6B2D5C; color: #FFFDF8; }
.fs-mp-nb__name { width: 100%; font-family: var(--fs-font-serif); font-size: 14px; font-weight: 700; padding: 2px 6px; border: 1px solid transparent; background: transparent; color: var(--fs-ink); }
.fs-mp-nb__name:hover, .fs-mp-nb__name:focus { border-color: #CFC5AE; background: #FFFDF8; }
.fs-mp-profile { display: block; width: 100%; height: auto; max-width: 300px; margin: 4px 0 2px; }
.fs-mp-profile__t { font-family: var(--fs-font-signage); font-size: 9px; letter-spacing: 0.06em; fill: var(--fs-muted-cream); }
@media (max-width: 767px) { .fs-mp-drawbar { bottom: 12px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; } }
/* 1.37.0 · Print this view: the page's chrome goes, the map and the words for the glovebox stay */
.fs-mp-print { display: none; }
.fs-mp-byg__day { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
@media print {
html.fs-print-map body > *:not(main), html.fs-print-map .fs-mp-hero, html.fs-print-map .fs-mn-bar, html.fs-print-map .fs-mn-filterbar, html.fs-print-map .fs-mp-list, html.fs-print-map .fs-mp-strip, html.fs-print-map .fs-mp-breadcrumb__row, html.fs-print-map .fs-breadcrumb__row,
html.fs-print-map .fs-mp-tools, html.fs-print-map .fs-mp-layers, html.fs-print-map .fs-mp-drawbar, html.fs-print-map .leaflet-control-container, html.fs-print-map .fs-mp-key, html.fs-print-map .fs-mp-elev, html.fs-print-map [data-fs-map-card], html.fs-print-map .fs-mp-home, html.fs-print-map .fs-mp-area ~ * { display: none !important; }
html.fs-print-map, html.fs-print-map body, html.fs-print-map main { background: #fff !important; color: #000; min-height: 0 !important; }
html.fs-print-map main, html.fs-print-map .fs-wrap { max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
html.fs-print-map .fs-mp-area { display: block !important; }
html.fs-print-map .fs-mp-frame { position: relative !important; width: 100% !important; height: 15.5cm !important; max-height: none !important; aspect-ratio: auto !important; border: 1px solid #2A2622 !important; box-shadow: none !important; break-inside: avoid; }
html.fs-print-map .fs-mp-map { width: 100% !important; height: 100% !important; }
html.fs-print-map .fs-mp-print { display: block !important; margin: 8px 0 0; font-family: Georgia, "Times New Roman", serif; color: #000; }
.fs-mp-print__h { margin: 0 0 4px; font-size: 13pt; font-weight: 700; }
.fs-mp-print__d { margin: 2px 0; font-size: 9.5pt; line-height: 1.4; }
.fs-mp-print__l { margin: 0 0 4px 16px; padding: 0; font-size: 9pt; line-height: 1.35; }
.fs-mp-print__s { margin: 6px 0 0; font-size: 8pt; line-height: 1.35; color: #333; }
html.fs-print-map .leaflet-popup { display: none !important; }
}
/* 1.37.0 · the plan's link */
.fs-mp-nb__planlink { width: 100%; margin: 6px 0 2px; font-size: 11.5px; }
.fs-mp-nb__planlink[hidden] { display: none; }
.fs-plan-mark { cursor: default; }
/* 1.38.0 · the off-road people: the motorized trails' line, the snowmobile areas' swatches, the trail card's record */
.fs-mp-key__ln--motor { border-top: 3px solid #C96A1E; }
.fs-mp-key__sq--sled-closed { background: rgba(179,38,30,0.35); border-color: #B3261E; }
.fs-mp-key__sq--sled-sma { background: rgba(78,122,56,0.18); border-color: #4E7A38; border-style: dashed; }
.fs-mp-key__sq--sled-limited { background: rgba(201,138,39,0.3); border-color: #C98A27; }
.fs-mp-key__sq--sled-open { background: rgba(78,122,56,0.12); border-color: #4E7A38; }
.fs-mp-key__sledkinds .fs-mp-key__sq { width: 11px; height: 11px; }
.fs-mp-trailinfo { margin: 4px 0; }
.fs-mp-trailinfo .fs-mp-mf__d { margin: 3px 0; }
.fs-mp-trailinfo__closure { padding: 6px 9px; background: rgba(179,38,30,0.08); border-left: 3px solid #B3261E; }
.fs-mp-sled__class { padding: 6px 9px; border-left: 3px solid #4E7A38; background: rgba(78,122,56,0.08); }
.fs-mp-sled__class.is-closed { border-left-color: #B3261E; background: rgba(179,38,30,0.08); }
.fs-mp-sled__class.is-limited { border-left-color: #C98A27; background: rgba(201,138,39,0.10); }
.fs-sled { cursor: pointer; }
.fs-mp-key__sq--log { background: rgba(139,90,43,0.25); border-color: #8B5A2B; border-style: dashed; }
.fs-mp-key__log .fs-mp-key__sub { max-width: 230px; white-space: normal; text-transform: none; letter-spacing: 0.04em; font-size: 10.5px; line-height: 1.4; }
.fs-log { cursor: pointer; }
.fs-mp-key__ln--sledtrail { border-top: 3px dashed #2E7D4F; }
/* 1.38.0 · the Layers panel's groups */
.fs-mp-layers__g { margin: 6px 0 -2px; padding-top: 8px; border-top: 1px dashed #CFC5AE; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-muted-cream); }
.fs-mp-layers__h + .fs-mp-layers__g { margin-top: 0; padding-top: 0; border-top: 0; }