/* Public stylesheet — hand-written, no build step, no framework.
*
* Rules that are load-bearing rather than taste:
* - NO inline styles anywhere in the markup, so the focal point of a photo is one of
* nine utility classes and the LQIP is a real ![]()
. That is what keeps the CSP at
* style-src 'self' (technical §12).
* - prefers-reduced-motion is a hard kill switch, not a softening.
* - No parallax at all: it costs scroll-linked layout work on exactly the phones this
* site is built for and buys almost nothing on a page that is already photography.
* - Display text over photographs carries font-weight >= 500 and a text-shadow, on top
* of the measured scrim — a 90th-percentile luminance can still be beaten by a small
* specular highlight behind a single word (design §7).
*/
/* ------------------------------------------------------------------ foundations */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--step-0);
line-height: var(--lh-body);
color: var(--c-ink-700);
background: #fff;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--c-ink-900);
line-height: var(--lh-snug);
letter-spacing: -0.015em;
margin: 0 0 var(--s-4);
font-weight: 600;
}
h1 { font-size: var(--step-4); line-height: var(--lh-tight); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p { margin: 0 0 var(--s-4); }
img { max-width: 100%; height: auto; }
a { color: var(--c-fjord-600); text-underline-offset: 3px; }
a:hover { color: var(--c-fjord-700); }
/* Visible focus everywhere. WCAG 2.2 AA is the floor, not the target. */
:focus-visible {
outline: 3px solid var(--c-fjord-400);
outline-offset: 2px;
border-radius: var(--r-1);
}
.visually-hidden {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
position: absolute; left: var(--s-4); top: -100px; z-index: 100;
background: #fff; color: var(--c-fjord-600);
padding: var(--s-3) var(--s-4); border-radius: var(--r-2);
transition: top var(--motion);
}
.skip-link:focus { top: var(--s-3); }
.container {
width: 100%; max-width: var(--container);
margin-inline: auto; padding-inline: var(--gutter);
}
.container--prose { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); }
.section--mist { background: var(--c-mist-50); }
.section__heading { font-size: var(--step-3); }
.lead { font-size: var(--step-1); color: var(--c-ink-700); }
.meta { font-size: var(--step--1); color: var(--c-ink-500); }
.eyebrow {
font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase;
font-weight: 600; color: var(--c-sand-600); margin-bottom: var(--s-2);
}
.prose { max-width: var(--measure); }
.prose h3 { margin-top: var(--s-6); }
/* ---- tables in prose --------------------------------------------------------------
There is one table on this site and it is the species/minimum-size/closed-season
list on the export-rules page, read by a guest deciding what is legal to take home.
It has to survive a 390px phone without a horizontal scrollbar hiding the third
column, because a column a reader does not know exists is worse than a cramped one.
`table-layout: auto` with wrapping cells does that; the wrapper only scrolls if a
single word cannot fit, which for these three columns it cannot.
Zebra striping rather than borders on every cell: the row is the unit of meaning
here — one species, its size, its caveat — and the eye has to keep the row together
across the full width of a phone. */
.prose__scroll { overflow-x: auto; }
.prose table {
width: 100%; border-collapse: collapse; margin: var(--s-5) 0;
font-size: var(--step--1);
}
.prose th, .prose td {
padding: var(--s-2) var(--s-3);
text-align: start; vertical-align: top;
border-bottom: 1px solid var(--c-line);
/* Second guard, with the scroll wrapper: a long unbreakable string breaks rather
than widening the table past the phone. */
overflow-wrap: anywhere;
}
.prose thead th {
border-bottom: 2px solid var(--c-ink-300);
font-weight: 700; color: var(--c-ink-900);
/* Long enough to say "Minstemål her" without becoming three stacked words. */
white-space: nowrap;
}
.prose tbody tr:nth-child(odd) { background: var(--c-mist-50); }
.prose td:first-child { font-weight: 600; color: var(--c-ink-900); }
.prose-invert, .prose-invert a { color: rgba(255, 255, 255, .92); }
/* ---------------------------------------------------------------------- buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 48px; padding: var(--s-3) var(--s-5);
border-radius: var(--r-pill); border: 2px solid transparent;
font-weight: 600; font-size: var(--step-0); text-decoration: none;
transition: background-color var(--motion), color var(--motion), border-color var(--motion);
}
/* Rowan is the booking accent and appears at most once per screen. It sits on the
PHONE call, not on the enquiry button: a tap-to-call works for a same-day tourist
right now; the form is a next-day channel (design §4). */
.btn--rowan { background: var(--c-rowan-600); color: #fff; }
.btn--rowan:hover { background: var(--c-rowan-700); color: #fff; }
.btn--ghost { border-color: rgba(255, 255, 255, .8); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.btn--ghost-ink { border-color: var(--c-fjord-600); color: var(--c-fjord-600); background: #fff; }
.btn--quiet { border-color: var(--c-line); color: var(--c-fjord-600); background: var(--c-mist-50); }
.btn--sm { min-height: 44px; padding: var(--s-2) var(--s-4); font-size: var(--step--1); }
/* ------------------------------------------------------------------ photographs */
.pic { display: block; }
.pic__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The 9-point focal grid as utility classes, not inline styles. Nine tap targets also
beat a draggable dot on a phone (technical §9). */
.focal--top-left { object-position: 0% 0%; }
.focal--top { object-position: 50% 0%; }
.focal--top-right { object-position: 100% 0%; }
.focal--left { object-position: 0% 50%; }
.focal--center { object-position: 50% 50%; }
.focal--right { object-position: 100% 50%; }
.focal--bottom-left { object-position: 0% 100%; }
.focal--bottom { object-position: 50% 100%; }
.focal--bottom-right { object-position: 100% 100%; }
.lqip {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; filter: blur(12px); transform: scale(1.05); z-index: 0;
}
/* Two-ended scrim over every photo.
*
* THE OVERLAY IS ATTACHED TO THE BAND, NOT TO THE CLASS THE SERVER SENDS. Every
* surface that puts display type over a photograph paints it unconditionally, and the
* `.scrim--*` classes only ADJUST the strength that is already there.
*
* That inversion is deliberate and it is the last line of the §6.4 contrast argument.
* The strength is measured at ingest from the photo's own 90th-percentile luminance
* and resolved by `scrim_for()`, but two bugs in one day showed how quietly that
* chain breaks: the resolver's answer was dropped in transit (the raw enum reached
* the markup, aliasing every photo to `normal`), and a row whose column defaults had
* not been applied resolved to `None`, which would have rendered `class="scrim--None"`
* — matching no rule, creating no ::after, and putting white display type on an
* unscrimmed photograph.
*
* Both were failures of a VALUE. A missing or unrecognised value can no longer remove
* the overlay, because nothing about its existence depends on the value any more. The
* worst a broken class name can now do is leave the strength at normal. */
.hero--photo::after, .band-full::after, .page-hero::after,
.scrim--light::after, .scrim--normal::after, .scrim--strong::after,
.scrim--auto::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to bottom, var(--scrim-a) 0%, var(--scrim-b) 45%, var(--scrim-c) 100%);
opacity: 1;
}
/* Lighter than the default, and only ever chosen from a measurement or a deliberate
override — never from a value falling through. */
.scrim--light::after { opacity: .72; }
/* `scrim--auto` should never appear in rendered HTML: the server resolves the
strength. It is kept, aliased to the default, for markup that bypasses
content.picture() — this alias is what hid the unwired measurement, so if it does
reappear the page is at least no lighter than it is now. */
.scrim--strong::after { filter: saturate(.9) brightness(.86); }
/* ------------------------------------------------------------------------ header */
.site-header {
position: fixed; inset-inline: 0; top: 0; z-index: 50;
background: var(--header-glass);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
backdrop-filter: blur(10px) saturate(1.1);
transition: background-color var(--motion), box-shadow var(--motion);
}
/* Goes opaque after 80px of scroll (design §8.7) — opaque INK, not white, so the nav
keeps one colour scheme on every page and in both states. */
.site-header.is-solid { background: var(--c-ink-900); box-shadow: 0 1px 0 rgba(15,30,43,.6); }
.site-header__inner {
display: flex; align-items: center; gap: var(--s-4);
min-height: var(--header-h);
max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter);
}
.brand { margin-inline-end: auto; text-decoration: none; }
.brand__name {
font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
color: #fff; text-shadow: 0 1px 3px rgba(15, 30, 43, .5);
}
.nav { display: none; }
.nav__list, .lang-switch, .sheet__list, .site-footer__links, .stats__list,
.grid, .shelf, .video-grid, .maplinks, .ticks, .chips, .departures__list {
list-style: none; margin: 0; padding: 0;
}
.nav__list { display: flex; gap: var(--s-5); }
.nav__link, .lang-switch__link {
color: #fff; text-decoration: none; font-weight: 500;
text-shadow: 0 1px 3px rgba(15, 30, 43, .5);
}
.nav__link:hover { text-decoration: underline; }
.lang-switch { display: none; gap: var(--s-3); font-size: var(--step--1); }
.lang-switch__link { display: inline-flex; align-items: center; gap: .35em; }
.lang-switch__link.is-current { text-decoration: underline; font-weight: 700; }
/* ---- flags ------------------------------------------------------------------------
Defined once at the top of and referenced with