/* Aevon V2: shared by The House, the legal pages and the not-found page. home.html and piece.html still carry their own copy until the build is consolidated. */
/* The two typefaces, kept on this site. Baskervville and IBM Plex Mono are both under the SIL Open Font License; see fonts/README.txt. */
@font-face { font-family: 'Baskervville'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/baskervville-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Baskervville'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/baskervville-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Baskervville'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/baskervville-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Baskervville'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/baskervville-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --paper: #f3efe4; --ink: #1b2233; --soft: #5c6170; --water: #d6dfdd; --route: #a63f2a; --rule: rgba(27, 34, 51, 0.2); --gap: 4px; --m: clamp(18px, 3.4vw, 52px);
  --serif: "Baskervville", "Baskerville", Georgia, serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
* { box-sizing: border-box; }
/* links and glides land below the pinned header. This is set on the targets, not on the page, so focusing something in the header never moves the page */
main section, main [id] { scroll-margin-top: var(--hdr-h, 80px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.5 var(--serif); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.mono { font: 400 11px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.sc { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.go { font: 400 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 6px; }
h1 em, h2 em { font-style: italic; }
.skip { position: absolute; left: var(--m); top: -60px; z-index: 80; background: var(--ink); color: var(--paper); padding: 10px 16px; font: 400 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

header { display: flex; align-items: baseline; justify-content: space-between; padding: 22px var(--m) 18px; }
header.ruled { border-bottom: 1px solid var(--rule); }
.wordmark { font-size: 22px; letter-spacing: 0.34em; text-transform: uppercase; text-decoration: none; }
header nav { display: flex; gap: clamp(16px, 2.6vw, 40px); margin-left: auto; }
.tools { display: flex; gap: 6px; margin-left: clamp(16px, 2.6vw, 40px); align-self: center; }
.icon { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; }
.icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
header nav a { text-decoration: none; } header nav a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* a photograph with its words on it, low and left */
.tile { position: relative; overflow: hidden; background: #2a2622; color: #fff; }
.tile::after { content: ""; position: absolute; inset: 42% 0 0 0; background: linear-gradient(0deg, rgba(14, 12, 10, 0.64), rgba(14, 12, 10, 0)); pointer-events: none; }
.tile .words { position: absolute; z-index: 1; left: var(--m); right: var(--m); bottom: clamp(22px, 3.2vw, 48px); }
.tile .mono { color: #f0d9cf; }
.tile h1 { font: 400 clamp(46px, 6vw, 84px)/0.98 var(--serif); margin: 8px 0 12px; letter-spacing: -0.01em; }
.tile h2 { font: 400 clamp(30px, 3.2vw, 44px)/1.04 var(--serif); margin: 6px 0 8px; }
.tile p { margin: 0 0 16px; max-width: 24rem; font-size: 18px; }
.tile .links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.wide { aspect-ratio: 2 / 1; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-block: var(--gap); }
.pair .tile { aspect-ratio: 3 / 4; }

section.band { padding: clamp(48px, 7vw, 104px) var(--m) 0; }
.head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: 0; }
.head h2 { font: 400 clamp(28px, 3vw, 40px)/1.05 var(--serif); margin: 0; }

/* ruled rows: a numeral, a name, a line */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 5em minmax(0, 1fr) minmax(0, 2fr); gap: 6px 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.rows .n { font: 400 11px/1.5 var(--mono); color: var(--route); letter-spacing: 0.08em; }
.rows b { font-weight: 400; font-size: 24px; line-height: 1.15; }
.rows p { margin: 0; font-size: 19px; max-width: 34rem; }
.rows .state { color: var(--soft); }

dl.facts { margin: 0; }
dl.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
dl.facts dt { color: var(--soft); } dl.facts dd { margin: 0; text-align: right; }

/* long reading: the legal pages */
.read { max-width: 42rem; padding: clamp(40px, 6vw, 88px) var(--m) 0; }
.read h1 { font: 400 clamp(38px, 4.6vw, 60px)/1.02 var(--serif); margin: 10px 0 8px; }
.read h2 { font: 400 26px/1.15 var(--serif); margin: 40px 0 8px; padding-top: 18px; border-top: 1px solid var(--rule); }
.read p, .read li { font-size: 18px; } .read ul { padding-left: 1.1em; }

/* the list, as the back of a postcard */
.tell { position: relative; margin: clamp(48px, 7vw, 104px) var(--m) 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); background: #fbf8f0; }
.tell > div:first-child { grid-row: 1 / span 2; padding: clamp(24px, 3.4vw, 48px); border-right: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(260px, 30vw, 380px); }
.tell h2 { font: 400 clamp(26px, 3vw, 38px)/1.1 var(--serif); margin: 6px 0 0; }
.tell form { display: flex; border-bottom: 1px solid var(--ink); align-self: end; margin: clamp(140px, 13vw, 170px) clamp(24px, 3.4vw, 48px) 0; }
.tell input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; font: inherit; color: var(--ink); padding: 0; border-radius: 0; }
.tell input:focus { outline: none; } .tell form:focus-within { border-bottom-width: 2px; }
.tell button { border: 0; background: none; cursor: pointer; color: var(--ink); padding: 0 0 0 16px; }
.tell small { grid-column: 2; color: var(--soft); font-size: 14px; line-height: 34px; margin: 10px clamp(24px, 3.4vw, 48px) clamp(24px, 3.4vw, 44px); background: repeating-linear-gradient(180deg, transparent 0 33px, var(--rule) 33px 34px); min-height: 102px; }   /* each line of the reply sits on its own ruled line */
.pc-post { position: absolute; top: clamp(18px, 2.2vw, 30px); right: clamp(18px, 2.2vw, 30px); display: flex; align-items: flex-start; }
.pc-post svg { display: block; overflow: visible; }
.pc-mark { width: 104px; height: 104px; transform: rotate(-9deg); margin-right: -14px; opacity: 0.72; }
.pc-mark circle { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.pc-mark text { fill: var(--ink); font-family: var(--mono); }
.pc-mark .ring { font-size: 9px; letter-spacing: 0.16em; } .pc-mark .date { font-size: 15px; font-weight: 500; letter-spacing: 0.04em; } .pc-mark .yr { font-size: 8.5px; letter-spacing: 0.08em; }
.pc-waves { width: 74px; height: 50px; margin: 28px -44px 0 0; opacity: 0.6; position: relative; z-index: 1; } .pc-waves path { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.pc-stamp { width: 78px; height: auto; background: var(--paper); }
.pc-stamp rect { fill: none; stroke: var(--ink); stroke-width: 5; stroke-dasharray: 2 9; stroke-linecap: round; }
.pc-stamp .w { fill: var(--water); stroke: var(--ink); stroke-width: 4; } .pc-stamp .r { fill: none; stroke: var(--route); stroke-width: 7; }
.pc-stamp text { font-family: var(--mono); font-size: 44px; letter-spacing: 0.08em; fill: var(--ink); }

/* the postmark and its cancelling lines are not on the card until the sign-up is received; then the postmark lands */
.tell .pc-mark, .tell .pc-waves { opacity: 0; }
.tell.sent .pc-mark { animation: postmark 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
.tell.sent .pc-waves { animation: cancel 0.25s ease 0.12s forwards; }
@keyframes postmark { 0% { opacity: 0; transform: rotate(-20deg) scale(1.9); } 60% { opacity: 0.8; transform: rotate(-8deg) scale(0.96); } 100% { opacity: 0.72; transform: rotate(-9deg) scale(1); } }
@keyframes cancel { to { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .tell.sent .pc-mark { animation: none; opacity: 0.72; } .tell.sent .pc-waves { animation: none; opacity: 0.6; } }
.tell small a, .f-sign small a { text-underline-offset: 3px; }

/* one line above the header */
header { flex-wrap: wrap; }
.notice { flex: 0 0 calc(100% + var(--m) * 2); margin: -22px calc(var(--m) * -1) 18px; padding: 9px var(--m); background: var(--ink); color: var(--paper); text-align: center; }
.notice a { text-underline-offset: 4px; }

/* the name sits in the centre, two links either side of it, the tools on the right */
header .wordmark { position: absolute; left: 50%; bottom: 21px; transform: translateX(-50%); margin-right: -0.34em; }
@media (min-width: 821px) {
  header nav { flex: 1; margin-left: 0; align-self: center; }
  header nav a:nth-child(3) { margin-left: auto; }
}
@media (min-width: 821px) and (max-width: 1100px) { header nav { gap: 16px; } header nav a { font-size: 10.5px; letter-spacing: 0.14em; } .tools { margin-left: 10px; gap: 0; } .icon { width: 36px; } }

/* The header behaves as Ralph Lauren's does, measured on their homepage on 6 October 2026: the notice line scrolls away with the page,
   the row of links then stays pinned at the top for the whole page, and nothing slides or hides. The only movement is the ground fading in
   over half a second. It is one sticky element, so the browser does the pinning and it cannot lag behind the scroll. */
header { position: sticky; top: calc(var(--notice-h, 35px) * -1); z-index: 12; background: var(--paper); border-bottom: 1px solid transparent; transition: background-color 0.5s ease, border-color 0.5s ease; }
header.solid { border-bottom-color: var(--rule); }
/* where a page opens with a photograph the header lies on it, clear, until the page has moved */
.hdr-over header { margin-bottom: calc(var(--hdr-full, 112px) * -1); color: #fff; background: transparent; }
.hdr-over header.solid { color: var(--ink); background: var(--paper); }
@media (prefers-reduced-motion: reduce) { header { transition: none; } }
.hdr-over main > .tile.wide:first-child { aspect-ratio: auto; height: 100vh; height: 100svh; min-height: 480px; }
.hdr-over main > .tile.wide:first-child::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 340px; background: linear-gradient(180deg, rgba(14, 12, 10, var(--veil, 0.56)) 0, rgba(14, 12, 10, var(--veil, 0.56)) 190px, rgba(14, 12, 10, 0) 340px); pointer-events: none; z-index: 1; }   /* above the photograph even while it drifts or is mirrored */

/* the menu on phones */
.menu-btn { display: none; border: 0; background: none; color: inherit; cursor: pointer; padding: 8px 0; font-family: var(--serif); }

/* a trail back up */
.trail { padding: 14px var(--m); display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--soft); border-bottom: 1px solid var(--rule); }
.trail a { text-decoration: none; } .trail a:hover { text-decoration: underline; text-underline-offset: 4px; }
.trail [aria-current] { color: var(--ink); }

footer { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 32px clamp(20px, 3vw, 48px); margin-top: clamp(48px, 7vw, 104px); padding: clamp(40px, 5vw, 76px) var(--m) calc(26px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--paper); }
footer .wordmark { font-size: 24px; }
.f-lake { display: block; width: 26px; height: auto; margin-bottom: 14px; } .f-lake path { fill: var(--paper); }
footer .f-mark p { margin: 14px 0 0; font-style: italic; color: rgba(243, 239, 228, 0.72); }
.f-sign { margin-top: 26px; max-width: 22rem; } .f-sign label { color: rgba(243, 239, 228, 0.62); }
.f-sign div { display: flex; border-bottom: 1px solid rgba(243, 239, 228, 0.6); margin-top: 6px; } .f-sign div:focus-within { border-bottom-color: var(--paper); }
.f-sign input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--paper); font: inherit; padding: 0; border-radius: 0; } .f-sign input:focus { outline: none; }
.f-sign input::placeholder { color: rgba(243, 239, 228, 0.58); }
.f-sign button { border: 0; background: none; color: var(--paper); cursor: pointer; padding: 0 0 0 16px; }
.f-sign small { display: block; min-height: 1.4em; margin-top: 8px; font-size: 14px; color: rgba(243, 239, 228, 0.72); }
footer h3 { margin: 4px 0 14px; color: rgba(243, 239, 228, 0.62); font-weight: 400; }
footer nav a { display: block; padding: 5px 0; text-decoration: none; overflow-wrap: anywhere; }
footer nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
footer .f-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; margin-top: clamp(16px, 3vw, 40px); padding-top: 18px; border-top: 1px solid rgba(243, 239, 228, 0.2); color: rgba(243, 239, 228, 0.62); }

@media (max-width: 820px) {
  .menu-btn { display: block; position: relative; z-index: 31; order: -1; margin-left: 0; }
  .notice { order: -2; }
  .tools { margin-left: auto; gap: 0; } .icon { width: 34px; }
  header .wordmark { font-size: 19px; letter-spacing: 0.3em; margin-right: -0.3em; bottom: 23px; }
  header nav { position: fixed; inset: 0; z-index: 30; background: var(--paper); color: var(--ink); flex-direction: column; justify-content: center; align-items: flex-start; gap: 28px; padding: 0 var(--m); visibility: hidden; opacity: 0; transition: opacity 0.25s ease, visibility 0.25s; }
  header nav a { font-family: var(--serif); font-size: 34px; letter-spacing: 0; text-transform: none; }
  .menu-open header nav { visibility: visible; opacity: 1; }
  .menu-open header { color: var(--ink) !important; }
  .menu-open header .wordmark { z-index: 31; }
  .menu-open { overflow: hidden; }
  .notice { font-size: 10px; }
  .tile .words { right: calc(var(--m) + 46px); }   /* keep titles clear of the small chart in the corner */
  .head { flex-direction: column; align-items: flex-start; gap: 6px; }
  dl.facts { margin-top: 18px; }
  footer { grid-template-columns: 1fr 1fr; } footer .f-mark { grid-column: 1 / -1; }
  .wide { aspect-ratio: 4 / 5; }
  .pair { grid-template-columns: 1fr; }
  .rows li { grid-template-columns: 5.6em minmax(0, 1fr); } .rows p { grid-column: 2; }
  .tell { grid-template-columns: 1fr; }
  .tell > div:first-child { grid-row: auto; border-right: 0; border-bottom: 1px solid var(--rule); min-height: 0; padding-top: 150px; }
  .tell form { margin-top: 28px; } .tell small { grid-column: 1; }
}

/* pieces in a row, and the loupe */
.head + .grid, .head + .worn { margin-top: 22px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.card { text-decoration: none; display: block; }
.card .ph { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #e6e0d2; }
/* a piece is mounted like a print: a hairline just inside its photograph. The photographs of the day run to the edge */
.card .ph:not(.tocome)::after, .shot.mounted::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, 0.8); pointer-events: none; z-index: 1; }
.card .mono { color: var(--route); display: block; margin-top: 12px; }
.card b { display: block; font-weight: 400; font-size: 19px; }
.card span.c { color: var(--soft); font-size: 15px; }
.lens { display: none; position: absolute; z-index: 2; width: clamp(130px, 13vw, 190px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; background-repeat: no-repeat; background-color: #e6e0d2; border: 1px solid rgba(255, 255, 255, 0.95); outline: 1px solid rgba(27, 34, 51, 0.4); }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr 1fr; row-gap: 24px; } }

/* search and the bag open as a sheet from the right */
.sheet-back { position: fixed; inset: 0; z-index: 40; background: rgba(27, 34, 51, 0.38); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; }
.sheet { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--paper); color: var(--ink); border-left: 1px solid var(--rule); padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; transform: translateX(102%); visibility: hidden; transition: transform 0.3s ease, visibility 0.3s; overflow-y: auto; }
.sheet-open .sheet-back { opacity: 1; visibility: visible; }
.sheet-open .sheet { transform: none; visibility: visible; }
.sheet-open { overflow: hidden; }
.sheet .top { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.sheet h2 { font: 400 28px/1.1 var(--serif); margin: 0; }
.sheet .close { border: 0; background: none; cursor: pointer; color: var(--ink); padding: 8px 0; }
.sheet .field { display: flex; border-bottom: 1px solid var(--ink); margin-top: 22px; }
.sheet .field input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; font: inherit; font-size: 19px; color: var(--ink); padding: 0; border-radius: 0; }
.sheet .field input:focus { outline: none; } .sheet .field:focus-within { border-bottom-width: 2px; }
.sheet ul { list-style: none; margin: 8px 0 0; padding: 0; }
.sheet li a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 20px; }
.sheet li a:hover b { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.sheet li b { font-weight: 400; } .sheet li span { color: var(--soft); white-space: nowrap; }
.sheet .empty { margin: 26px 0 0; font-size: 20px; }
.sheet .after { margin: 10px 0 22px; color: var(--soft); }
.sheet .btn { display: flex; align-items: center; justify-content: center; min-height: 52px; background: var(--ink); color: var(--paper); text-decoration: none; font: 400 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-back { transition: none; } }
.sheet input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
h1, h2 { text-wrap: balance; }

/* The opening, on the first page of a visit when that page is the homepage: the lake draws itself on a dark ground, the name appears, and it
   lifts to show the photograph. It runs once, for under two seconds, and it leaves by itself even if no script runs. Any click, key or scroll ends it. */
.opener { display: none; }
.opening .opener { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: var(--ink); color: var(--paper); cursor: pointer; animation: opener-out 0.6s ease 1.75s forwards; }
.opening .opener.out { animation: opener-out 0.45s ease forwards; }
.opener svg { height: min(46vh, 380px); width: auto; overflow: visible; }
.opener path { fill: none; stroke: var(--paper); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: lake-draw 1.15s cubic-bezier(0.4, 0, 0.2, 1) 0.05s forwards; }
.opener span { font-size: 22px; letter-spacing: 0.34em; text-transform: uppercase; margin-right: -0.34em; opacity: 0; animation: name-in 0.5s ease 0.75s forwards; }
@keyframes opener-out { to { opacity: 0; visibility: hidden; } } @keyframes lake-draw { to { stroke-dashoffset: 0; } } @keyframes name-in { to { opacity: 1; } }

/* One page carries into the next: the old page fades out as the new one fades in, and a piece's photograph travels from its card to its
   own page (cross-document view transitions). Browsers without them simply load the page. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  ::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: cover; }
  ::view-transition-old(root), ::view-transition-new(root) { height: auto; object-fit: none; animation-duration: 0.45s; animation-timing-function: ease; }
}