:root{
  --ink:#0b0c0c;--ink-soft:#37474d;--paper:#eaf1f5;--paper-warm:#dce8ef;
  --line:#c8d7de;--accent:#4f6f68;--night:#07090a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --rail:clamp(1.25rem,4vw,4.5rem);--wide:72rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:clamp(1rem,.42vw + .9rem,1.0625rem);line-height:1.65;letter-spacing:.004em}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.5rem,7vw,5.2rem)}
h2{font-size:clamp(1.9rem,4.1vw,3.25rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.2}
h4{font-size:.72rem;font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
em{font-style:italic}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--rail);width:100%}
.eyebrow{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0 0 1.3rem;font-weight:500}
.large-copy{font-family:var(--serif);font-size:clamp(1.18rem,2vw,1.55rem);line-height:1.36;letter-spacing:-.01em}
.small-copy,.results-note{font-size:.86rem;color:var(--ink-soft);line-height:1.6}
.muted{color:var(--ink-soft)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1.1rem;z-index:40}
.skip-link:focus{left:.75rem;top:.75rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.text-link{display:inline-flex;gap:.45rem;align-items:baseline;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.3rem;transition:opacity .18s ease,gap .18s ease;margin-top:.4rem}
.text-link:hover{gap:.7rem;opacity:.68}
/* header */
.site-header{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1.5rem var(--rail);flex-wrap:wrap;max-width:var(--wide)}
.wordmark{font-family:var(--serif);font-size:1.02rem;letter-spacing:.3em;text-decoration:none;text-transform:uppercase;line-height:1.3;display:inline-flex;flex-direction:column;gap:.3rem}
.wordmark span{font-family:var(--sans);font-size:.53rem;letter-spacing:.26em;color:var(--ink-soft);text-transform:uppercase}
.site-header nav{display:flex;gap:clamp(.9rem,2.2vw,2.2rem);flex-wrap:wrap}
.site-header nav a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding-bottom:.25rem;border-bottom:1px solid transparent;transition:border-color .18s ease}
.site-header nav a:hover,.site-header nav a[aria-current=page]{border-color:var(--ink)}
/* hero */
.hero{position:relative;background:var(--night);color:#eef5f8;min-height:min(94vh,860px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;isolation:isolate}
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;z-index:-1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,7,.72) 0%,rgba(4,6,7,.18) 38%,rgba(4,6,7,.44) 72%,rgba(4,6,7,.86) 100%);z-index:-1}
.hero .eyebrow{color:#a9bdb6}
.hero h1{margin:0 0 1.5rem;max-width:22ch}
.hero-copy{position:relative;padding-top:clamp(1.5rem,7vh,5rem);padding-bottom:clamp(2rem,6vh,4rem);margin-top:auto}
.hero-intro{font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.3rem);color:#cfdae1;max-width:30ch}
.hero-actions{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:baseline;margin-top:.9rem}
.hero-link{color:#e8f1f5}
.hero-cta{display:inline-flex;gap:.6rem;align-items:baseline;background:#eef5f8;color:#0b0c0c;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:.9rem 1.4rem;font-weight:500;transition:background .18s ease}
.hero-cta:hover{background:#fff}
.hero-bottom{position:relative;display:flex;justify-content:space-between;gap:1rem;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:#9aa5a1;padding-bottom:1.6rem;flex-wrap:wrap}
.preview-label{color:#c2b79c}
/* sections */
section{padding:clamp(3.6rem,9vh,7rem) 0}
.section-light{background:var(--paper)}
.section-dark{background:var(--night);color:#dce8ef}
.section-dark .eyebrow{color:#9db3ab}
.section-dark .small-copy,.section-dark .muted{color:#9ba19c}
.editorial-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;border-top:1px solid var(--line);padding-top:1.1rem;margin-bottom:clamp(2rem,5vh,3.2rem);flex-wrap:wrap}
.section-heading .eyebrow{margin:0}
.quiet-label{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.section-dark .section-heading{border-color:rgba(255,255,255,.16)}
.section-dark .quiet-label{color:#9ba19c}
.pending-note{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;color:var(--ink-soft);border:1px solid var(--line);padding:1rem 1.15rem;margin-top:1.6rem;max-width:34rem;background:rgba(79,111,104,.045)}
.small-dot{width:.44rem;height:.44rem;border-radius:50%;background:var(--accent);flex:none;margin-top:.5rem}
/* race */
.annual-flag{display:flex;align-items:center;gap:.9rem;margin:0 0 1.8rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.annual-flag::after{content:"";flex:1;min-width:2.5rem;height:1px;background:var(--line)}
.race-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,4vw,3.4rem);margin:clamp(2.8rem,7vh,4.4rem) 0 0;padding:0;border-top:1px solid var(--line)}
.race-steps li{padding-top:1.6rem}
.step-number{font-family:var(--serif);font-size:.8rem;letter-spacing:.22em;color:var(--accent);display:block;margin-bottom:1rem}
.race-steps h3{margin-bottom:.65rem}
.race-steps p{font-size:.9rem;color:var(--ink-soft);margin:0}
.race-footnote{display:flex;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;margin-top:clamp(2.6rem,6vh,4rem);border-top:1px solid var(--line);padding-top:1.4rem;align-items:center}
.race-footnote p{margin:0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
/* lore */
.lore-heading{align-items:end}
.walrus-photo{margin:clamp(3rem,8vh,5.5rem) 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.6rem,5vw,4rem);align-items:end}
.walrus-photo img{width:100%;max-width:34rem;background:#0d1112}
.walrus-photo figcaption{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#8e9691;padding-bottom:.4rem}
.archive-heading{margin:clamp(3.2rem,8vh,5.5rem) 0 clamp(1.6rem,4vh,2.4rem);border-top:1px solid rgba(255,255,255,.16);padding-top:1.6rem;display:flex;justify-content:space-between;gap:2rem;align-items:baseline;flex-wrap:wrap}
.archive-heading p:last-child{max-width:34ch;color:#b9beb8;margin:0}
.artwork{margin:0 0 clamp(2.4rem,6vh,4rem)}
.artwork-link{position:relative;display:block;overflow:hidden;background:#0d1112;line-height:0}
.artwork-link img{width:100%;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.artwork-link:hover img{transform:scale(1.012);opacity:.94}
.enlarge-mark{position:absolute;top:.9rem;right:.9rem;background:rgba(7,9,10,.72);color:#e8f1f5;font-size:.85rem;width:2.1rem;height:2.1rem;display:grid;place-items:center;line-height:1}
.artwork figcaption{display:flex;justify-content:space-between;gap:1rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#8e9691;padding-top:.85rem;flex-wrap:wrap}
.artwork figcaption span:first-child{color:#dcdad2;letter-spacing:.14em;font-size:.72rem}
.second-artwork{max-width:64%}
.film-row{display:flex;justify-content:space-between;gap:2rem;align-items:flex-end;border-top:1px solid rgba(255,255,255,.16);margin-top:clamp(2rem,5vh,3rem);padding-top:1.8rem;flex-wrap:wrap}
.film-row h3{margin:.6rem 0 .5rem}
.film-row p{margin:0;color:#9ba19c;font-size:.9rem;max-width:46ch}
/* illuminated chronicle — medieval insanity inside the minimal frame */
.illuminated{--gold:#8a6a2f;--parchment:#e2ecf1;--parchment-deep:#e5d9c2;--ink-deep:#241f16;background:linear-gradient(180deg,var(--parchment) 0%,var(--parchment-deep) 100%);color:var(--ink-deep);padding:clamp(2.2rem,6vw,4.5rem) clamp(1.4rem,5vw,4.2rem);margin:clamp(3rem,8vh,5rem) 0 clamp(2rem,5vh,3rem);border:1px solid rgba(36,31,22,.22);box-shadow:inset 0 0 0 6px rgba(36,31,22,.06)}
.ornament-rule{width:min(100%,34rem);margin:0 auto 1.6rem;color:var(--gold);opacity:.85}
.script-label{text-align:center;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:#6d5a34;margin:0 0 1.1rem}
.chronicle-title{text-align:center;font-size:clamp(1.9rem,4.4vw,3.2rem);margin-bottom:1.5rem;letter-spacing:.005em}
.chronicle-title em{font-style:italic;color:#463a25}
.chronicle-lede{max-width:46rem;margin:0 auto 2.6rem;font-family:var(--serif);font-size:clamp(1.02rem,1.6vw,1.24rem);line-height:1.55;text-align:center}
.chronicle-lede::first-letter{font-size:3.1em;line-height:.82;float:left;padding:.06em .12em 0 0;color:var(--gold)}
.annals{list-style:none;margin:0 0 3rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));gap:clamp(1.4rem,3vw,2.4rem);counter-reset:annal}
.annals li{border-top:1px solid rgba(36,31,22,.28);padding-top:1.1rem}
.annal-number{display:block;font-family:var(--serif);font-size:.86rem;letter-spacing:.26em;color:var(--gold);margin-bottom:.7rem}
.annals h3{font-size:1.12rem;margin-bottom:.55rem;letter-spacing:.01em}
.annals p{font-size:.9rem;margin:0;color:#3b3225}
.bestiary{border-top:1px solid rgba(36,31,22,.28);padding-top:2rem}
.bestiary-title{font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);margin-bottom:.7rem}
.bestiary-lede{font-size:.88rem;color:#4a4030;max-width:44rem;margin-bottom:1.8rem}
.bestiary-list{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(9.5rem,45%),1fr));gap:clamp(1rem,2.4vw,1.8rem);text-align:center}
.bestiary-list li{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.device{width:clamp(3rem,7vw,4.4rem);height:auto;color:#3f3524}
.device-name{font-family:var(--serif);font-size:1.02rem;letter-spacing:.04em}
.device-note{font-size:.72rem;color:#5b5040;line-height:1.4;max-width:14rem}
.lore-footnote{font-size:.75rem;color:#5b5040;border-top:1px solid rgba(36,31,22,.2);padding-top:1rem;margin:0;font-style:italic}
.section-dark .illuminated h2,.section-dark .illuminated h3{color:var(--ink-deep)}
.section-dark .illuminated .script-label{color:#6d5a34}
/* sound dock (landing page) */
.sound-dock{position:absolute;right:var(--rail);bottom:clamp(4.2rem,9vh,5.4rem);z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;max-width:min(24rem,72%)}
.sound-toggle{display:inline-flex;align-items:center;gap:.7rem;background:rgba(7,9,10,.55);border:1px solid rgba(240,239,232,.45);color:#eef5f8;font:inherit;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;padding:.62rem 1rem;cursor:pointer;backdrop-filter:blur(4px);transition:background .18s ease,border-color .18s ease}
.sound-toggle:hover{background:rgba(7,9,10,.75);border-color:#eef5f8}
.sound-icon{display:inline-flex;align-items:flex-end;gap:2px;height:.85rem}
.sound-icon span{display:block;width:2px;background:currentColor;height:35%;opacity:.6}
.sound-icon span:nth-child(2){height:70%}
.sound-icon span:nth-child(3){height:100%}
.sound-toggle[aria-pressed=true]{border-color:#eef5f8;background:rgba(7,9,10,.72)}
.sound-toggle[aria-pressed=true] .sound-icon span{opacity:1;animation:sound-pulse 2.6s ease-in-out infinite}
.sound-toggle[aria-pressed=true] .sound-icon span:nth-child(2){animation-delay:.35s}
.sound-toggle[aria-pressed=true] .sound-icon span:nth-child(3){animation-delay:.7s}
@keyframes sound-pulse{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)}}
.sound-note{margin:0;font-size:.68rem;line-height:1.5;color:#b7bdb8;text-align:right}
@media (max-width:640px){
 .sound-dock{position:static;order:3;align-items:flex-start;max-width:none;padding:0 var(--rail) 1.4rem}
 .sound-note{text-align:left}
 /* keep both tusks in frame and clear of the copy on narrow screens */
 .hero-art{object-position:63% 50%;transform:translateY(-8%)}
 .hero::after{background:linear-gradient(180deg,rgba(4,6,7,.78) 0%,rgba(4,6,7,.28) 24%,rgba(4,6,7,.66) 46%,rgba(4,6,7,.93) 66%,rgba(4,6,7,.97) 100%)}
 .entry p{font-size:1.03rem}
 .quote{padding:1rem 1rem}
 .tale-progress{width:100%;margin-left:0}
}
/* ---- founding tale: a long-form chronicle ---- */
.tale-page{background:var(--paper)}
.tale-intro{padding-top:clamp(2.6rem,7vh,4.6rem);padding-bottom:clamp(1.6rem,4vh,2.4rem)}
.tale-intro h1{margin-bottom:1.2rem}
.tale-lede{max-width:44rem;font-family:var(--serif);font-size:clamp(1.06rem,1.7vw,1.28rem);line-height:1.5;margin-top:1.6rem}
.tale-provenance{max-width:46rem;font-size:.86rem;color:var(--ink-soft);margin-top:1.2rem}
.tale-hint{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:1.6rem}
.tale-nav{position:sticky;top:0;z-index:5;background:rgba(247,246,243,.94);backdrop-filter:blur(6px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tale-nav-inner{display:flex;align-items:center;gap:1.6rem;padding-top:.75rem;padding-bottom:.75rem;flex-wrap:wrap}
.tale-nav a{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:.2rem}
.tale-nav a:hover{border-color:var(--ink)}
.tale-progress{margin-left:auto;display:block;width:min(16rem,45%);height:3px;background:rgba(43,47,43,.16);border-radius:2px;overflow:hidden}
.tale-progress-fill{display:block;height:100%;width:0;background:var(--accent)}
.tale-body{padding-top:clamp(2rem,5vh,3.4rem);padding-bottom:clamp(2rem,5vh,3rem);max-width:var(--wide)}
.tale-part{padding-bottom:clamp(2.4rem,6vh,4rem)}
.tale-part+.tale-part{border-top:1px solid var(--line);padding-top:clamp(2.4rem,6vh,4rem)}
.part-head{max-width:44rem;margin:0 auto clamp(2rem,5vh,3rem)}
.part-label{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin:0 0 .9rem}
.part-head h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin-bottom:1rem}
.part-intro{font-size:.95rem;color:var(--ink-soft);border-left:2px solid var(--line);padding-left:1.1rem}
.part-diary-heading{font-family:var(--serif);font-style:italic;font-size:1.05rem;letter-spacing:.02em;margin:1.6rem 0 0;border-top:1px solid var(--line);padding-top:1.1rem}
.entry{max-width:38rem;margin:0 auto clamp(1.8rem,4vh,2.6rem);padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.entry:last-child{border-bottom:0}
.entry-date{font-family:var(--serif);font-size:1.06rem;letter-spacing:.06em;margin-bottom:.9rem;color:#2f342f}
.entry p{font-size:clamp(1.01rem,1.05vw,1.08rem);line-height:1.78;margin-bottom:1.1em;text-wrap:pretty}
.entry-held{border-bottom:1px dashed rgba(43,47,43,.32)}
.entry-hold{border:1px dashed var(--line);background:rgba(79,111,104,.05);padding:1.1rem 1.2rem}
.hold-label{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 .6rem}
.entry-hold p:last-child{font-size:.85rem;color:var(--ink-soft);margin:0}
.quote{margin:clamp(1.4rem,3vh,2rem) 0;padding:1.2rem 1.3rem;background:#fff;border:1px solid var(--line)}
.quote-label{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.8rem}
.quote blockquote{margin:0;font-family:var(--serif);font-size:1.03rem;line-height:1.65}
.quote blockquote p{margin-bottom:.9em;font-size:inherit}
.quote blockquote p:last-child{margin-bottom:0}
.quote-source{font-size:.76rem;color:var(--ink-soft);margin:.95rem 0 0;border-top:1px solid var(--line);padding-top:.8rem}
.quote-telegram{background:var(--paper-warm);border-style:dashed}
.quote-telegram blockquote{font-family:var(--sans);font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.9}
.quote-letter blockquote{font-style:italic}
.quote-reading,.quote-literary{background:#fff;border-left:3px solid var(--accent-soft);border-top:0;border-right:0;border-bottom:0}
.tale-foot{padding-bottom:clamp(3rem,8vh,5rem)}
.tale-foot-panel{max-width:44rem;margin:0 auto}
.foot-title{font-size:clamp(1.3rem,2.6vw,1.8rem);margin-bottom:1rem}
.tale-held{font-size:.86rem;color:#3b3225}
/* team page */
.team-intro{padding-top:clamp(2.8rem,7vh,5rem);padding-bottom:clamp(1.6rem,4vh,2.6rem)}
.team-intro h1{margin-bottom:1.4rem}
.team-preview-note{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-top:1.7rem}
.card-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:end;margin-bottom:clamp(2.4rem,6vh,3.6rem)}
.sort-control label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.6rem}
.sort-control select{width:100%;max-width:22rem;font:inherit;font-size:.9rem;padding:.7rem .9rem;background:#fff;border:1px solid var(--line);color:var(--ink)}
.sort-note{font-size:.78rem;color:var(--ink-soft);margin:.8rem 0 0;max-width:34rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(21rem,100%),1fr));gap:clamp(1.4rem,3vw,2.2rem)}
.member-card{border:1px solid var(--ink);background:#fff;display:flex;flex-direction:column;position:relative}
.card-topline{display:flex;justify-content:space-between;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.card-portrait{position:relative;background:var(--paper-warm);border-bottom:1px solid var(--line)}
.card-portrait img{width:100%;aspect-ratio:12/13;object-fit:contain;padding:1.4rem}
/* White Fang: last home in the previous race carries the title and starts first next
   time. It has to be legible at a glance, so it sits on the portrait rather than in
   the small print. */
.fang-badge{position:absolute;left:.85rem;top:.85rem;background:var(--paper-warm);color:var(--ink);border:1px solid var(--ink);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;padding:.42rem .7rem}
.fang-badge::before{content:"❖ ";color:var(--accent)}
.member-card[data-whitefang="true"]{border-width:2px}
/* On a phone the deck scrolls sideways with a snap, so a card fills the screen and
   the next one is a swipe away. */
@media (max-width:720px){
 .card-grid{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:1rem;padding:0 0 1.2rem;margin:0 calc(-1 * var(--rail));padding-left:var(--rail);padding-right:var(--rail)}
 .card-grid>.member-card{flex:0 0 min(84%,22rem);scroll-snap-align:center}
 .card-grid::-webkit-scrollbar{height:6px}
 .card-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
}
.card-content{padding:1.4rem 1.25rem 1.3rem;display:flex;flex-direction:column;flex:1}
.card-nickname{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--accent);margin:0 0 .35rem;min-height:1.4em}
.card-name{font-size:1.45rem;margin-bottom:.7rem}
.card-name a{text-decoration:none;border-bottom:1px solid transparent}
.card-name a:hover{border-color:currentColor}
.card-bio{font-size:.88rem;color:var(--ink-soft);margin-bottom:1.3rem}
.card-stats{margin:0 0 1.1rem;padding:0;border-top:1px solid var(--line)}
.card-stats div{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.card-stats dt{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);align-self:center}
.card-stats dd{margin:0;font-family:var(--serif);font-size:1.05rem;color:var(--ink-soft);text-align:right}
/* A trait is a phrase the member adds. The lines sit close together: the list is one thought,
   not a table, and a card with six of them should still read as a card. */
.card-traits{margin:0 0 .8rem;padding:0;list-style:none}
.card-traits li{font-size:.86rem;letter-spacing:.02em;color:var(--ink-soft);padding:.08rem 0;line-height:1.45}
.card-traits li::before{content:'·  ';color:var(--line)}
.card-pending{font-size:.78rem;color:var(--ink-soft);border-left:2px solid var(--accent);padding-left:.8rem;margin:0 0 1.1rem}
.card-links{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;flex-wrap:wrap;margin-top:auto;padding-top:.4rem}
.card-cta{display:inline-flex;gap:.5rem;align-items:baseline;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.28rem}
.card-cta{color:var(--ink)}
.card-explanation{margin-top:clamp(3rem,8vh,5rem);border-top:1px solid var(--line);padding-top:clamp(2rem,5vh,3rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5rem)}
/* results */
.results-intro{padding-top:clamp(2.8rem,7vh,5rem);padding-bottom:clamp(1.6rem,4vh,2.6rem)}
.results-intro h1{margin-bottom:1.4rem}
.scope-label{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-top:1.7rem}
.season{padding-top:clamp(2.4rem,6vh,3.6rem);border-top:1px solid var(--line);margin-top:clamp(2.4rem,6vh,3.6rem)}
.season:first-child{border-top:0;margin-top:0;padding-top:0}
.season-year{font-size:clamp(1.6rem,3vw,2.3rem)}
.results-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.4rem,7vw,6rem);align-items:start}
.results-lead{font-family:var(--serif);font-size:clamp(1.02rem,1.6vw,1.26rem);line-height:1.4}
.source-note{font-size:.72rem;color:var(--ink-soft);margin-top:1.4rem}
.block-title{margin-bottom:1.1rem}
.award-grid{margin:0;border-top:1px solid var(--line)}
.award-grid div{display:flex;justify-content:space-between;gap:1.2rem;padding:.68rem 0;border-bottom:1px solid var(--line)}
.award-grid dt{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.award-grid dd{margin:0;font-family:var(--serif);font-size:1.02rem;text-align:right}
.podium{list-style:none;margin:0 0 1.6rem;padding:0;border-top:1px solid var(--line)}
.podium li{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.1rem;padding:.9rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.podium .rank{font-family:var(--serif);font-size:.9rem;color:var(--accent)}
.podium .who{font-family:var(--serif);font-size:1.12rem}
.podium .score{grid-column:2;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.podium .score em{font-style:normal}
.archive-foot{margin-top:clamp(2.6rem,6vh,4rem);border-top:1px solid var(--line);padding-top:1.6rem;display:flex;justify-content:space-between;gap:2rem;align-items:center;flex-wrap:wrap}
.archive-foot p{margin:0;font-size:.82rem;color:var(--ink-soft);max-width:52ch}
.results-empty{border:1px dashed var(--line);padding:1.5rem 1.35rem;max-width:38rem}
.results-empty h3{margin-bottom:.6rem}
.results-empty p{margin:0;font-size:.86rem;color:var(--ink-soft)}
/* member page */
.member-head{position:relative;padding-top:clamp(1.8rem,4vh,3rem);padding-bottom:clamp(.7rem,1.6vh,1rem)}
/* A card is the point of the page, so the card sits close under the name that heads it: the
   general section spacing leaves a hole there, and a hole between a name and its card reads as
   something missing rather than as room to breathe. */
.card-page .section-light,.member-page .section-light{padding-top:clamp(1rem,2.2vh,1.5rem)}
.member-head h1{margin-bottom:.7rem}
.member-head .card-nickname{font-size:1.2rem}
.member-results-head{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;border-top:1px solid var(--line);padding-top:1.1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.member-stats{margin-bottom:2rem}
.member-results{list-style:none;margin:0 0 1.6rem;padding:0;border-top:1px solid var(--line)}
.member-results li{display:grid;gap:.25rem 1.2rem;grid-template-columns:auto 1fr;padding:.85rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.result-year{font-family:var(--serif);color:var(--accent)}
.result-event{font-family:var(--serif);font-size:1.05rem}
.result-detail{grid-column:2;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
/* footer */
.site-footer{padding:clamp(2.4rem,6vh,3.4rem) var(--rail) 2.2rem;border-top:1px solid var(--line);background:var(--paper)}
.footer-top{display:flex;justify-content:space-between;gap:1.6rem;align-items:baseline;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:1.6rem}
.social-links{display:flex;gap:1.4rem;flex-wrap:wrap}
.social-links a{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.22rem}
.social-links a:hover{border-color:var(--ink)}
.help-area{margin:1.8rem 0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.panic-button{display:inline-flex;gap:.5rem;align-items:baseline;border:1px solid var(--ink);padding:.8rem 1.25rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;background:#fff;transition:background .18s ease,color .18s ease}
.panic-button:hover{background:var(--ink);color:#fff}
.help-area p{margin:0;font-size:.72rem;color:var(--ink-soft)}
.footer-bottom{display:flex;justify-content:space-between;gap:1.4rem;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);flex-wrap:wrap;padding-top:1.4rem}
.footer-legal{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.footer-legal a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.22rem;color:var(--ink-soft)}
.footer-legal a:hover{border-color:var(--ink);color:var(--ink)}
.footer-legal a[aria-current="page"]{border-color:var(--ink);color:var(--ink)}
/* policy pages */
.legal-intro{padding:clamp(3.4rem,8vw,6.4rem) 0 clamp(2rem,4vw,3rem)}
.legal-intro h1{font-size:clamp(2.2rem,5vw,3.9rem)}
.legal-summary{font-family:var(--serif);font-size:clamp(1.12rem,1.9vw,1.45rem);line-height:1.4;letter-spacing:-.01em;max-width:38rem;margin-top:1.6rem;color:var(--ink)}
.legal-meta{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-top:1.6rem}
.legal-body{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:clamp(1.6rem,5vw,4.5rem);padding:clamp(2.6rem,6vw,4.4rem) 0 clamp(1.6rem,4vw,3rem)}
.legal-toc{align-self:start;position:sticky;top:1.5rem}
.legal-toc h2{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.legal-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.78rem;line-height:1.4}
.legal-toc a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:.15rem}
.legal-toc a:hover{border-color:currentColor}
.legal-section{max-width:44rem;margin-bottom:clamp(2.2rem,4.5vw,3.4rem)}
.legal-section:last-child{margin-bottom:0}
.legal-section h2{font-size:clamp(1.32rem,2.4vw,1.85rem);margin-bottom:.85rem;padding-top:.4rem}
.legal-section h3{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:1.7rem 0 .5rem}
.legal-section ul{margin:.6rem 0 1.05rem;padding-left:1.15rem}
.legal-section li{margin-bottom:.55rem}
.legal-section li::marker{color:var(--accent)}
.legal-callout{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--paper-warm);padding:1.1rem 1.3rem;margin:1.5rem 0 0;font-size:.9rem;line-height:1.6}
.legal-callout p:last-child{margin-bottom:0}
/* the policy pages are written in the club's older tongue, with the English kept one
   click away beneath each section, so the wording stays legible as well as comic */
.norse-note{margin-top:1.2rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.norse-note a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.18rem}
.norse-note a:hover{border-color:var(--ink)}
.legal-section .norse{font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.55;letter-spacing:-.005em}
.legal-english{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:.8rem;color:var(--ink-soft)}
.legal-english summary{cursor:pointer;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);list-style:none}
.legal-english summary::-webkit-details-marker{display:none}
.legal-english summary::after{content:" ↓"}
.legal-english[open] summary::after{content:" ↑"}
.legal-english summary:hover{color:var(--ink)}
.legal-english p,.legal-english li{font-size:.86rem;line-height:1.62}
.legal-english h3{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:1.1rem 0 .4rem}
.legal-english ul{padding-left:1.1rem}
@media (max-width:820px){
 .legal-body{grid-template-columns:1fr;gap:1.8rem}
 .legal-toc{position:static;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.2rem 0}
 .footer-legal{gap:.5rem 1.1rem}
}
/* lightbox */
.lightbox{border:0;padding:0;background:rgba(5,7,8,.94);max-width:none;max-height:none;width:100%;height:100%;color:#eee}
.lightbox::backdrop{background:rgba(5,7,8,.9)}
.lightbox img{width:100%;height:auto;max-height:84vh;object-fit:contain;margin:0 auto;padding:clamp(1rem,4vw,2.6rem) clamp(1rem,4vw,2.6rem) 0}
.lightbox-close{position:fixed;top:1rem;right:1rem;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font:inherit;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;padding:.6rem .9rem;cursor:pointer}
.lightbox-hint{text-align:center;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#8e9691;padding-bottom:1rem;margin:0}
@media (max-width:900px){
 .editorial-grid,.results-layout,.card-controls,.card-explanation,.walrus-photo{grid-template-columns:1fr;gap:2rem}
 .illuminated{padding:2rem 1.3rem}
 .chronicle-lede::first-letter{font-size:2.4em}
 .walrus-photo img{max-width:none}
 .race-steps{grid-template-columns:1fr;gap:0}
 .race-steps li{padding:1.5rem 0;border-bottom:1px solid var(--line)}
 .second-artwork{max-width:none}
 .hero{min-height:88vh}
}
@media (max-width:520px){
 .site-header{padding-top:1.2rem;gap:1rem}
 .site-header nav{gap:.9rem}
 .site-header nav a{font-size:.66rem}
 .hero{min-height:88vh}
 .hero-copy{padding-top:clamp(1rem,4vh,3rem)}
 .hero-bottom{flex-direction:column;gap:.5rem}
 .footer-bottom{flex-direction:column;gap:.5rem}
 .panic-button{width:100%;justify-content:center}
 .hero-actions{gap:1.1rem}
 .card-grid{gap:1.2rem}
}
@media (prefers-reduced-motion:reduce){
 *{animation-duration:.001ms !important;transition-duration:.001ms !important}
 .artwork-link:hover img{transform:none}
 .sound-toggle[aria-pressed=true] .sound-icon span{animation:none;transform:none;opacity:1}
}
@media print{.hero{min-height:auto}}

/* A block can be both .wrap and something else that sets vertical padding with a
   shorthand. The shorthand zeroes the side padding and the page then runs to the
   screen edge, so the rails are asserted last, once, for every wrapper. */
.wrap{padding-left:var(--rail);padding-right:var(--rail)}

/* The finishing order is the club's real record: one line per finisher, readable at
   thirty-odd rows without turning into a spreadsheet. */
.finish-list{margin-top:.6rem}
.finish-list li{display:flex;align-items:baseline;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.finish-list .rank{min-width:1.4rem;font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;color:var(--ink-soft)}
.finish-list .who{flex:1 1 auto}
.finish-list .score{margin-left:auto;font-family:var(--serif);font-size:.98rem;white-space:nowrap}
.finish-list li:first-child .who{font-weight:600}
.finish-list li:last-child{border-bottom:0}
.award-grid dd .quiet-label{display:block;margin-top:.15rem;font-size:.58rem}

/* The cabinet: the roll of honour is a proper honours board, so a year reads across
   and each trophy keeps its own column on a wide screen and stacks on a phone. */
.trophy-grid{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.trophy-grid dd{font-family:var(--serif);font-size:1.02rem;line-height:1.35}
.trophy-grid .retired{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--accent)}
.roll-heading{margin-top:clamp(2.4rem,6vw,4rem)}
.roll{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.roll li{display:grid;grid-template-columns:5rem 1fr 1fr 1fr;gap:.9rem;padding:.7rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.roll-year{font-family:var(--serif);font-size:1.12rem}
.roll-cell{font-size:.9rem}
.roll-label{display:block;font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.12rem}
.roll-time{color:var(--ink-soft);font-family:var(--serif)}
.roll-open{color:var(--ink-soft);font-style:italic}
/* The rules are numbered deliberately: an event rulebook that nobody can count is
   just an opinion. */
.rules{margin:.6rem 0 0;padding-left:1.6rem}
.rules li{padding:.4rem 0 .4rem .2rem;font-size:.95rem;line-height:1.55}
.rules li::marker{font-family:var(--sans);font-size:.8rem;color:var(--ink-soft)}
@media (max-width:720px){
 .roll li{grid-template-columns:4rem 1fr;row-gap:.5rem}
 .roll-cell{grid-column:2}
}

/* The club's own commissioned artwork: a carved tusk frieze under every masthead. */
.frieze{margin:0;padding:0;line-height:0;background:var(--ink);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.frieze img{width:100%;height:clamp(3.4rem,7vw,5.6rem);object-fit:cover;object-position:center 42%;opacity:.94}
.plate{margin:0;border:1px solid var(--ink);background:#fff}
.plate img{display:block;width:100%;height:auto}
.plate figcaption{padding:.7rem 1rem;border-top:1px solid var(--line);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.hero-plate{margin:clamp(1.8rem,4vw,2.8rem) 0 0}
/* The almanac: dates read down the left, everything else to the right of them. */
.races-forward{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;margin:0 0 clamp(2rem,5vw,3.4rem)}
.race-forward{border:1px solid var(--ink);padding:1.2rem 1.3rem;background:#fff}
.race-forward h3{margin:0;font-size:clamp(1.3rem,2.4vw,1.7rem)}
.race-when{margin:.3rem 0 .7rem;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.race-forward p:last-child{margin:0;font-size:.92rem}
.almanac{list-style:none;margin:1.2rem 0 0;padding:0;border-top:1px solid var(--ink)}
.almanac li{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.almanac-when{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);line-height:1.6}
.almanac-what strong{display:block;font-family:var(--serif);font-size:1.08rem;font-weight:500}
.almanac li[data-kind="water"] .almanac-what strong::after{content:" ≈";color:var(--accent)}
.norse-year{margin-top:0}
@media (max-width:720px){
 .almanac li{grid-template-columns:1fr;gap:.3rem}
}

/* The reigning White Fang. Henry: "heavily highlighted." The trophy nobody trains for
   gets the loudest band on the site, because that is the joke and the club's best one. */
.fang-reign{display:block;position:relative;background:var(--ink);color:#eef5f8;text-decoration:none;
 padding:clamp(1.6rem,4vw,2.6rem) var(--rail);border-bottom:1px solid var(--ink)}
.fang-reign::after{content:"";position:absolute;inset:auto 0 0 0;height:6px;background:var(--accent);opacity:.85}
.fang-reign-eyebrow{margin:0;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:#c9a227}
.fang-reign-title{margin:.35rem 0 .1rem;font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.3rem);font-weight:500;
 display:flex;align-items:center;gap:.6rem;color:#eef5f8}
.fang-glyph{font-size:1.25em;line-height:1;color:#e8e2d6;transform:scaleX(-1)}
.fang-reign-holder{margin:.1rem 0 .3rem;font-family:var(--serif);font-size:clamp(2.4rem,10vw,4.6rem);line-height:.98;
 letter-spacing:-.01em;color:#fff}
.fang-reign-detail{margin:0;font-size:.82rem;letter-spacing:.05em;color:#cdc7bd}
.fang-reign-cta{margin:.9rem 0 0;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#c9a227}
.fang-reign:hover .fang-reign-holder{color:#c9a227}

/* The countdown: the next second Saturday in September, worked back from the rule. */
.countdown{margin:clamp(1.8rem,4vw,2.8rem) var(--rail) 0;border:1px solid var(--ink);background:#fff;padding:1.3rem 1.4rem}
.countdown-eyebrow{margin:0;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.countdown-clock{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin:.7rem 0 .4rem}
.count-unit{display:flex;align-items:baseline;gap:.35rem;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.count-unit strong{font-family:var(--serif);font-size:clamp(1.7rem,6vw,2.6rem);line-height:1;font-weight:500;color:var(--ink);min-width:1.6ch}
.countdown-date{margin:0;font-size:.85rem;color:var(--ink-soft)}
@media (max-width:520px){.fang-reign-holder{font-size:clamp(2rem,12vw,3rem)}}

.race-rule{grid-column:1/-1;margin:.2rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--ink);
 font-size:.95rem;color:var(--ink-soft);font-style:italic}

/* Every card in the archive: a plain index, because 120 names is a list, not a poster. */
.card-index{list-style:none;margin:1rem 0 0;padding:0;columns:2;column-gap:2.4rem}
.card-index li{break-inside:avoid;padding:.28rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.card-index a{text-decoration:none;border-bottom:1px solid transparent}
.card-index a:hover{border-bottom-color:var(--accent)}
.card-index .quiet-label{font-size:.55rem;letter-spacing:.12em;text-align:right;color:var(--accent)}
@media (max-width:640px){.card-index{columns:1}}
.member-honours{margin:1.4rem 0 .6rem}
.member-honours h2{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .5rem}
.member-honours .roll{margin:0}

/* ---------- the tab bar ----------
   Henry, 2 October: the site should land somewhere clean, with tabs for the sections. One
   row of plain labels, sticky under the masthead, scrolling sideways on a phone rather than
   wrapping into a paragraph. */
.tabbar{position:sticky;top:0;flex-wrap:nowrap;width:100%;z-index:20;display:flex;gap:0;overflow-x:auto;background:var(--paper);
 border-bottom:1px solid var(--ink);padding:0 var(--rail);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabbar::-webkit-scrollbar{display:none}
.tabbar a{flex:0 0 auto;padding:.85rem 1.1rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
 text-decoration:none;color:var(--ink-soft);border-bottom:3px solid transparent;white-space:nowrap}
.tabbar a:hover{color:var(--ink)}
.tabbar a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
@media (max-width:560px){.tabbar a{padding:.75rem .85rem;font-size:.62rem;letter-spacing:.12em}}

/* ---------- the club page (clean landing) ---------- */
.club-hero{padding:clamp(2rem,6vw,3.6rem) var(--rail) clamp(1.4rem,3vw,2rem)}
.club-hero h1{margin:.2rem 0 .8rem;font-size:clamp(2.3rem,7vw,4.2rem);line-height:1.02}
.club-hero .club-lede{font-family:var(--serif);font-size:clamp(1.05rem,2.4vw,1.35rem);max-width:44ch;color:#333}
.fact-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:0;margin:clamp(1.4rem,3vw,2.2rem) 0 0;border-top:1px solid var(--ink)}
.fact{padding:1rem 1.1rem 1.1rem;border-bottom:1px solid var(--ink);border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact dt{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.fact dd{margin:.35rem 0 0;font-family:var(--serif);font-size:1.12rem;line-height:1.3}
.club-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:0 0 clamp(1.6rem,4vw,2.4rem)}
.club-section{border:1px solid var(--ink);padding:1.2rem 1.3rem;background:#fff;text-decoration:none;display:block}
.club-section:hover{background:var(--paper-warm)}
.club-section h3{margin:.2rem 0 .4rem;font-size:1.25rem}
.club-section p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.club-section .quiet-label{font-size:.55rem}
@media (max-width:560px){.tabbar{position:static}}

/* The wall of cards: dense, square-ish, four or five across on a desktop and two on a phone. */
.card-mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.7rem}
.mosaic-tile{position:relative;display:block;text-decoration:none;background:var(--ink);overflow:hidden;border:1px solid var(--ink)}
.mosaic-tile img{display:block;width:100%;height:9.5rem;object-fit:cover;opacity:.82;transition:opacity .2s ease,transform .3s ease}
.mosaic-tile:hover img{opacity:1;transform:scale(1.03)}
.mosaic-body{position:absolute;inset:auto 0 0 0;padding:.5rem .6rem .55rem;background:linear-gradient(transparent,rgba(10,10,10,.86) 42%);color:#eef5f8;display:block}
.mosaic-name{display:block;font-family:var(--serif);font-size:.98rem;line-height:1.15;color:#fff}
.mosaic-nick{display:block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#c9c3b8;margin-top:.15rem}
.mosaic-tag{display:inline-block;margin:.35rem .25rem 0 0;padding:.12rem .34rem;font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;background:#eef5f8;color:#111}
.mosaic-tag.fang{background:var(--accent);color:#fff}
@media (max-width:560px){.card-mosaic{grid-template-columns:repeat(auto-fill,minmax(7.6rem,1fr));gap:.45rem}.mosaic-tile img{height:7.6rem}.mosaic-name{font-size:.85rem}}

/* The record book: counted from the archive, so it is a table of facts rather than a boast. */
.record-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.record{background:#fff;padding:1.1rem 1.2rem 1.2rem}
.record-value{margin:0;font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1;color:var(--ink)}
.record-label{margin:.5rem 0 .2rem;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.record-note{margin:0;font-size:.82rem;color:var(--accent)}

/* The club's own statistic: likelihood of a full mental breakdown, out of ten. */
.breakdown{margin:1rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--line)}
.breakdown-label{margin:0 0 .5rem;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.breakdown-meter{display:flex;gap:3px;margin:0 0 .5rem}
.breakdown-meter .pip{flex:1 1 0;height:.42rem;background:#e6e2da;border:1px solid #d8d3c9}
.breakdown-meter .pip.on{background:var(--ink);border-color:var(--ink)}
.breakdown-high .breakdown-meter .pip.on{background:var(--accent);border-color:var(--accent)}
.breakdown-score{margin:0;font-family:var(--serif);font-size:1.02rem}
.breakdown-high .breakdown-score{color:var(--accent)}
.breakdown-note{margin:.35rem 0 0;font-size:.82rem;color:var(--ink-soft)}
.member-breakdown{margin:1.4rem 0}
.member-breakdown .breakdown-label{font-size:.62rem}

/* ---------- quiet furniture on the landing page ---------- */
.section-footnote{margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding-top:1rem;border-top:1px solid var(--rule, rgba(0,0,0,.14));
 font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.quiet-links{margin-top:1.4rem}
.quiet-arrow{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;font-size:1.05rem;line-height:1;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:50%;transition:background .18s ease,color .18s ease,gap .18s ease}
.quiet-arrow:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mosaic-tag.more{background:rgba(246,243,238,.28);color:#fff}
/* the wall should start as soon as the eye reaches it */
.team-intro{padding-bottom:clamp(.9rem,2vh,1.4rem)}
.team-showcase{padding-top:clamp(1.2rem,3vh,2rem)}

/* ---------- the club's own photographs ----------
   A phone library, shown at the size it deserves: a strip of three on the landing
   page and a set of frames elsewhere, cropped square so the rows stay tidy whatever
   shape the original was. */
.photo-band{background:var(--paper-warm);padding:clamp(1.6rem,4vw,2.6rem) 0}
.photo-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:0}
.photo-strip img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;filter:saturate(.92)}
.photo-strip figcaption{grid-column:1/-1;margin-top:.5rem;font-size:.66rem;letter-spacing:.16em;
 text-transform:uppercase;color:var(--ink-soft)}
.album-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.4rem;margin:0}
.album-grid figure{margin:0}
.album-grid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--ink)}
.album-grid figcaption{margin-top:.5rem;font-size:.68rem;line-height:1.45;letter-spacing:.02em;color:var(--ink-soft)}
.album-grid .album-note{grid-column:1/-1;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;border-top:1px solid var(--line);padding-top:.9rem}
.album-grid-two{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.album-page .section-dark .album-grid img{background:#000}
.album-page .section-dark .album-grid figcaption{color:rgba(242,241,234,.72)}
.album-page .section-dark .album-grid .album-note{border-top-color:rgba(242,241,234,.24)}

/* The parts of the race: every finisher's swim, transitions, ride and run. Wide by nature,
   so it scrolls inside its own frame rather than pushing the page sideways on a phone. */
.results-block-wide{grid-column:1/-1;margin-top:clamp(1.2rem,3vw,1.8rem);border-top:1px solid var(--line);padding-top:1.1rem}
.splits-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:#fff}
.splits-table{border-collapse:collapse;width:100%;min-width:34rem;font-family:var(--sans);font-size:.82rem;font-variant-numeric:tabular-nums}
.splits-table caption{text-align:left;padding:.5rem .7rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.splits-table th,.splits-table td{border-bottom:1px solid var(--line);padding:.42rem .7rem;text-align:right;white-space:nowrap}
.splits-table thead th{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;border-bottom:1px solid var(--ink)}
.splits-table tbody th{text-align:left;font-weight:400;white-space:nowrap}
.splits-table tbody tr:last-child th,.splits-table tbody tr:last-child td{border-bottom:none}
.splits-table tbody tr:hover{background:rgba(59,195,211,.09)}
.split-rank{display:inline-block;min-width:1.6rem;color:var(--ink-soft)}
.split-total{font-weight:600}
.split-blank{color:var(--line)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.photo-frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.7rem;margin:0 0 clamp(1.6rem,4vw,2.4rem)}
.photo-frames figure{margin:0}
.photo-frames img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.photo-frames figcaption{margin-top:.45rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
@media (max-width:640px){.photo-strip{grid-template-columns:1fr}}
/* The day's three steps and the editorial block below them: they ran into each other. */
.race-steps + .editorial-grid{margin-top:clamp(2.4rem,6vh,3.6rem)}
.race-steps h3{font-size:clamp(1.6rem,3vw,2.1rem)}
/* The carved band under the masthead: a thin slice of the tusk, and no more than that. */
.frieze img{height:clamp(2.2rem,4.2vw,3.2rem);object-position:center 46%;opacity:.9}
/* The card wall: the name belongs on its own strip under the engraving. Laid over the
   portrait it landed on a cheekbone or a bearskin and vanished. */
.mosaic-tile{display:flex;flex-direction:column;background:var(--ink)}
.mosaic-body{position:static;display:block;padding:.45rem .55rem .5rem;background:var(--ink);border-top:1px solid rgba(246,243,238,.22)}
.mosaic-name{font-size:.92rem}
@media (max-width:560px){.mosaic-name{font-size:.8rem}}

/* ---------- the club letter ----------
   One restrained band above the photographs: the explanation on the left, the form on the
   right, and nothing that shouts. The honeypot is moved off-screen rather than hidden, so a
   script filling every field still fills it in. */
.newsletter{background:var(--night);color:#dce8ef;padding:clamp(3rem,8vh,6rem) 0}
.newsletter .eyebrow{color:#9db3ab}
.newsletter h2{color:#eef5f8;margin:0 0 1.2rem}
.newsletter-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,6vw,5rem);align-items:end}
.newsletter-blurb{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.45;color:#cfdae1;max-width:46ch;margin:0}
.newsletter-label{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#9ba19c;margin:0 0 .6rem}
.newsletter-row{display:flex;gap:.6rem;flex-wrap:wrap}
.newsletter-row input[type=email]{flex:1 1 14rem;min-width:0;background:transparent;border:1px solid rgba(255,255,255,.28);color:#eef5f8;padding:.85rem 1rem;font:inherit;font-size:.95rem;border-radius:0}
.newsletter-row input[type=email]::placeholder{color:#7e8a85}
.newsletter-row input[type=email]:focus-visible{outline:2px solid #9db3ab;outline-offset:2px}
.newsletter-submit{background:#eef5f8;color:#0b0c0c;border:0;padding:.85rem 1.5rem;font:inherit;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:background .18s ease}
.newsletter-submit:hover{background:#fff}
.newsletter-submit[disabled]{opacity:.6;cursor:default}
.newsletter-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.newsletter-status{margin:.9rem 0 0;font-size:.82rem;color:#c9d3cf;min-height:1.2em}
.newsletter-status.is-error{color:#e2b9a8}
.newsletter-privacy{margin:.4rem 0 0;font-size:.72rem;color:#8e9691}
.newsletter-privacy a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
@media (max-width:720px){.newsletter-grid{grid-template-columns:1fr;gap:1.6rem;align-items:start}.newsletter-row input[type=email]{flex:1 1 100%}.newsletter-submit{width:100%}}

/* The club badge: the only colour on the site that isn't ink, paper or rust. */
.wordmark{display:inline-grid;grid-template-columns:auto 1fr;column-gap:.6rem;align-items:center}
.wordmark .crest{grid-row:1/3;width:auto;height:clamp(2.7rem,5vw,3.5rem);display:block}
.wordmark>span{grid-column:2}
.wordmark::after{content:"";display:none}
.wordmark{text-align:left}

/* ---------- notes under a card ----------
   Members only. Signed out, the section is a single quiet line; signed in, the thread and a
   small form appear. Everything uses the site's existing ink, paper and accent variables. */
.comments{background:var(--night);color:#dce8ef}
.comments-wrap{max-width:46rem}
.comments-head{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;border-top:1px solid rgba(255,255,255,.22);padding-top:1.1rem;margin-bottom:1.3rem;flex-wrap:wrap}
.comments-head h2{color:#eef5f8;font-size:clamp(1.7rem,3.2vw,2.4rem)}
.comments-blurb{font-family:var(--serif);font-size:1.06rem;line-height:1.45;color:#cfdae1;max-width:52ch;margin:0 0 1.7rem}
.comments-note{margin:0;font-size:.92rem;color:#9ba19c}
.comments-list{list-style:none;margin:0 0 1.7rem;padding:0;display:grid;gap:1.1rem}
.comment{border-top:1px solid rgba(255,255,255,.14);padding-top:.9rem}
.comment-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.35rem}
.comment-author{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#c9d3cf}
.comment-date{font-size:.72rem;color:#8e9691}
.comment-body{margin:0;font-family:var(--serif);font-size:1.08rem;line-height:1.45;color:#dce8ef;white-space:pre-wrap;overflow-wrap:anywhere}
.comment-delete{background:none;border:0;padding:0;font:inherit;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#8e9691;cursor:pointer;border-bottom:1px solid currentColor}
.comment-delete:hover{color:#e2b9a8}
.comment-empty{color:#8e9691;font-size:.9rem;list-style:none}
.comments-form{margin-top:.4rem}
.comments-label{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#9ba19c;margin-bottom:.55rem}
.comments-input{width:100%;background:transparent;border:1px solid rgba(255,255,255,.28);color:#eef5f8;padding:.85rem 1rem;font:inherit;font-size:.95rem;border-radius:0;resize:vertical;min-height:4.5rem}
.comments-input::placeholder{color:#7e8a85}
.comments-input:focus-visible{outline:2px solid #9db3ab;outline-offset:2px}
.comments-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.7rem;flex-wrap:wrap}
.comments-count{font-size:.72rem;color:#8e9691}
.comments-submit{background:#eef5f8;color:#0b0c0c;border:0;padding:.8rem 1.4rem;font:inherit;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:background .18s ease}
.comments-submit:hover{background:#fff}
.comments-submit[disabled]{opacity:.6;cursor:default}
.comments-status{margin:1rem 0 0;font-size:.82rem;color:#c9d3cf;min-height:1.2em}
.comments-status.is-error{color:#e2b9a8}
@media (max-width:640px){.comments-head{flex-direction:column;gap:.4rem}.comments-actions{flex-direction:column;align-items:stretch}.comments-submit{width:100%}}

/* --- the race page photography, rebuilt 2 October 2026 -------------------------------
   Six of the club's own photographs, large enough to show people and weather rather than
   a row of thumbnails. Three columns by two rows on a wide screen, one at a time on a
   phone, where the club will actually look at it. */
.photo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.6vw,1rem);margin:1.6rem 0 .4rem}
.photo-gallery figure{margin:0;background:var(--paper-warm);border:1px solid var(--line)}
.photo-gallery img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.photo-gallery figcaption{padding:.6rem .7rem .7rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.gallery-heading{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.1;margin:.2rem 0 .4rem}
@media (max-width:820px){.photo-gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.photo-gallery{grid-template-columns:1fr}.photo-gallery img{aspect-ratio:4/3}}

/* --- the record book: eight statistics, four by two ---------------------------------- */
.record-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.record-grid{grid-template-columns:repeat(2,1fr)}}

/* --- the nine worlds ladder, now on the lore page, where the mythology lives ---------- */
.worlds-block{margin:clamp(2rem,5vw,3.4rem) 0 0;border-top:1px solid rgba(255,255,255,.18);padding-top:clamp(1.2rem,3vw,2rem)}
.worlds{list-style:none;margin:1.2rem 0 0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.worlds li{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
.worlds h3{margin:0 0 .3rem;font-family:var(--serif);font-weight:500;font-size:1.06rem}
.worlds p{margin:0;font-size:.92rem;color:#c9d3cf}
.world-grade{font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--accent)}
@media (max-width:520px){.worlds li{grid-template-columns:2.2rem 1fr;gap:.7rem}.world-grade{font-size:1.15rem}}

/* --- the section strip on a phone: it scrolls by design, so it must look scrollable.
   A soft fade at the right edge says "there is more" instead of looking clipped.
   (The masthead itself carries only the crest and the wordmark.) */
@media (max-width:760px){
  .tabbar{mask-image:linear-gradient(to right,#000 82%,rgba(0,0,0,.15));-webkit-mask-image:linear-gradient(to right,#000 82%,rgba(0,0,0,.15))}
}
@media (max-width:520px){
  .tabbar a{padding:.7rem .62rem;font-size:.6rem;letter-spacing:.1em}
  .tabbar a[aria-current="page"]{font-weight:700}
}

/* --- the expedition list on the almanac: the club's plan, with real cards on it ------- */
.expeditions{margin:1.2rem 0 clamp(1.6rem,4vw,2.4rem)}
.expedition{border:1px solid var(--ink);background:#fff;padding:1.2rem 1.3rem 1.3rem}
.expedition h3{margin:0 0 .3rem;font-family:var(--serif);font-weight:500;font-size:1.35rem}
.expedition-when{margin:0 0 .6rem;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.expedition p{margin:.5rem 0;max-width:60ch}
.expedition-cards{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.expedition-card{display:block;width:8.5rem;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:var(--paper-warm)}
.expedition-card img{display:block;width:100%;aspect-ratio:6/6.5;object-fit:cover}
.expedition-name{display:block;padding:.45rem .55rem .5rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:520px){.expedition-card{width:calc(50% - .35rem)}}

/* --- member accounts, 2 October 2026 -------------------------------------------------
   Join and Log in in the masthead of every page; the four small forms; the account page
   where a member edits their half of a card; and the trait list that both the club's own
   cards and a member's own card are made of. Ink, paper and accent only, like everything
   else here. No third-party anything. */
.account-actions{display:flex;gap:.85rem;align-items:baseline;flex-wrap:wrap}
.account-actions>span{display:inline-flex;gap:.85rem;align-items:baseline}
/* Both halves of the account actions are in the masthead on every page; the script reveals one
   of them. A display rule beats the hidden attribute, so it is enforced here, or a signed-out
   reader is offered "My card" and "Sign out" as well as "Join". */
[hidden]{display:none !important}
.account-link{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:none;border:0;border-bottom:1px solid transparent;padding:.15rem 0 .25rem;cursor:pointer;transition:border-color .18s ease,color .18s ease}
.account-link:hover,.account-link:focus-visible{border-color:var(--ink)}
.account-login{color:var(--accent);border-bottom-color:var(--accent)}
.account-mine{border-bottom-color:var(--ink)}
.account-signout{color:var(--ink-soft);padding-left:0}
.account-signout:hover{color:var(--ink)}

.account-wrap{padding-top:clamp(2.6rem,7vh,4.6rem);padding-bottom:clamp(2.2rem,6vh,3.6rem)}
.account-wrap h1{margin-bottom:1.1rem}
.account-wrap .large-copy{max-width:60ch}
.account-form{max-width:34rem;border-top:1px solid var(--line);padding-top:clamp(1.2rem,3vw,1.8rem);margin-top:clamp(1.8rem,4vh,2.6rem)}
.account-form-head{font-size:clamp(1.3rem,2.6vw,1.9rem);margin-bottom:1.3rem}
.account-field{display:flex;flex-direction:column;margin-bottom:1.35rem}
.account-label{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.45rem;font-weight:500}
.account-optional{color:var(--ink-soft)}
.account-input{width:100%;font-family:var(--sans);font-size:1rem;line-height:1.4;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:0;padding:.72rem .8rem}
.account-input:focus{border-color:var(--ink);outline:none}
.account-textarea{resize:vertical;min-height:3.3rem}
.account-file{padding:.55rem .6rem;background:var(--paper-warm);font-size:.85rem;width:100%}
.account-hint{font-size:.8rem;line-height:1.55;color:var(--ink-soft);margin:.5rem 0 0;max-width:48ch}
.account-submit{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:0;padding:.95rem 1.5rem;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.account-submit:hover:enabled{background:var(--accent);border-color:var(--accent)}
.account-submit:disabled{opacity:.55;cursor:progress}
.account-status{font-size:.86rem;line-height:1.55;color:var(--accent);margin:1rem 0 0;max-width:52ch;min-height:1.3em}
.account-status.is-error{color:#8c3f27}
.account-aside{font-size:.95rem;margin-top:1.9rem;max-width:52ch}
.account-nojs{border-left:2px solid var(--accent);padding-left:.9rem;margin:1.6rem 0}
.account-claim-card{font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.35;border:1px solid var(--line);background:var(--paper-warm);padding:1rem 1.15rem;margin:1.6rem 0 0;max-width:34rem}
.account-slug-line{font-size:.8rem;color:var(--ink-soft);margin-top:1.6rem}
.account-slug{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:.85rem;color:var(--ink)}

/* the account page: the card on the left, the member's own half on the right */
.account-grid{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:clamp(1.8rem,4vh,2.6rem)}
.account-preview .eyebrow{margin-bottom:.8rem}
.account-card-preview{width:100%;max-width:20rem}
.account-actions-row{display:flex;gap:1.4rem;align-items:baseline;flex-wrap:wrap;margin-top:1rem}
.account-share{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.account-share:hover:enabled{background:var(--ink);color:#fff;border-color:var(--ink)}

/* the trait list: a short phrase per line, and a way to take it off again */
.trait-list{display:flex;flex-direction:column;gap:.45rem;margin-top:.2rem}
.trait-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:center}
.trait-label{font-family:var(--sans);font-size:.92rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:0;padding:.55rem .6rem;width:100%}
.trait-label:focus{border-color:var(--ink);outline:none}
.trait-remove{font-family:var(--sans);font-size:.74rem;background:#fff;border:1px solid var(--line);color:var(--ink-soft);padding:.45rem .7rem;cursor:pointer}
.trait-remove:hover{color:var(--ink);border-color:var(--ink)}
.account-add,.account-remove{align-self:flex-start;font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--ink-soft);padding:.6rem .85rem;cursor:pointer;margin-top:.7rem}
.account-add:hover,.account-remove:hover{color:var(--ink);border-color:var(--ink)}

/* the member's own traits on their card page, in the card's own type */
.profile-traits{margin:1rem 0 1.2rem}
.profile-traits .card-traits{margin:0}

@media (max-width:900px){
  .account-grid{grid-template-columns:minmax(0,1fr)}
  .account-card-preview{max-width:22rem}
}
@media (max-width:560px){
  .account-actions{gap:.7rem}
  .account-actions>span{gap:.7rem}
  .account-link{font-size:.66rem;letter-spacing:.12em}
  .account-submit,.account-add,.account-remove{width:100%}
  .account-actions-row{flex-direction:column;align-items:stretch;gap:.8rem}
  .trait-row{grid-template-columns:minmax(0,1fr) auto;gap:.4rem}
  .trait-remove{padding:.45rem .5rem}
}

/* Source split positions remain leg-specific, including unavailable positions. */
.split-position{display:block;font-size:.64rem;line-height:1.5;font-weight:400;color:var(--ink-soft)}
.split-unavailable{font-size:.72rem;color:var(--ink-soft)}
.member-race-splits{margin:2rem 0;min-width:0}
/* The card page: the card itself, and the club's record of the member beside it. Both halves
   of the page hold something, so neither the card column nor the record stretches to fill a
   width its content does not need — that is where the empty half-pages were coming from. */
.card-layout{display:grid;grid-template-columns:minmax(0,24rem) minmax(0,1fr);gap:clamp(2rem,6vw,4.5rem);align-items:start}
.card-layout>div{min-width:0}
.card-layout>.member-card{max-width:24rem}
@media (max-width:900px){.card-layout{grid-template-columns:1fr;gap:2.2rem}.card-layout>.member-card{max-width:min(24rem,100%)}}
.splits-scroll:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.split-scroll-hint{font-size:.75rem;color:var(--ink-soft);margin:.5rem 0}

/* ============ the four sections ============
   Home is deliberately almost empty: the club, the way in, and the three doors. Everything else
   lives behind a tab. */
.home-hero{padding:clamp(2.4rem,7vh,5rem) var(--rail) clamp(1.6rem,4vh,2.6rem)}
.home-hero h1 em{font-style:italic;color:var(--accent)}
.home-hero .club-lede{max-width:44rem;margin-top:1.4rem}
.home-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin:1.8rem 0 0}
.home-cta{display:inline-block;padding:.85rem 1.5rem;background:var(--ink);color:var(--paper);text-decoration:none;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;transition:background .18s ease}
.home-cta:hover{background:var(--accent)}
.home-cta-quiet{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.home-cta-quiet:hover{background:var(--ink);color:var(--paper)}
.home-count{margin:1.4rem 0 0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.home-doors{display:grid;gap:0;background:#fff;border:1px solid var(--line);margin:clamp(1.6rem,4vh,2.6rem) auto}
.home-door+.home-door{border-left:1px solid var(--line)}
.home-door{display:block;background:#fff;padding:1.5rem 1.6rem 1.7rem;text-decoration:none;transition:background .18s ease}
.home-door:hover{background:var(--paper-warm)}
.home-door-label{display:block;font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.1}
.home-door-note{display:block;margin-top:.6rem;font-size:.86rem;color:var(--ink-soft);max-width:34rem}
.home-stat{margin:0 0 2rem;padding:0 clamp(1.25rem,4vw,4.5rem);font-size:.86rem;color:var(--ink-soft);max-width:var(--wide);margin-left:auto;margin-right:auto}
@media (min-width:760px){
 .home-doors{grid-template-columns:repeat(3,1fr)}
 /* The doors' words line up with the words either side of them. */
 .home-door:first-child{padding-left:calc(var(--rail) + 1.6rem)}
 .home-door:last-child{padding-right:calc(var(--rail) + 1.6rem)}
}
.redirect-page .intro{padding:clamp(2rem,6vh,4rem) 0}

/* the race: one sub-tab per annual edition, newest first */
.edition-nav-band{background:var(--night);color:#eef5f8;padding:clamp(1.6rem,4vh,2.4rem) 0}
.edition-nav-band .eyebrow{color:rgba(242,241,234,.6)}
.band-title{font-size:clamp(1.9rem,4.4vw,3.2rem);color:#eef5f8;margin:0 0 1.1rem}
.edition-nav-band .results-note{color:rgba(242,241,234,.62);margin-top:1rem;max-width:52rem}
.year-tabs{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem 0 .6rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.year-tabs a{flex:0 0 auto;padding:.5rem .85rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
 color:rgba(242,241,234,.72);border:1px solid rgba(242,241,234,.28);font-variant-numeric:tabular-nums}
.year-tabs a:hover{color:#fff;border-color:#fff}
.year-tabs a[aria-current="page"]{background:var(--sand,#f0d68c);color:var(--ink);border-color:var(--sand,#f0d68c)}
.year-tabs .year-tab-all{border-style:solid;font-family:var(--sans)}

/* an edition on the index */
.edition-block{padding:clamp(1.6rem,4vh,2.4rem) 0;border-top:1px solid var(--line)}
.edition-block:first-of-type{border-top:1px solid var(--ink)}
.section-heading .season-year{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.6rem)}

/* the grid: every recorded column, laid out to be read sideways */
.grid-hint{margin:.6rem 0 .7rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.grid-scroll{--grid-pos:2.4rem;--grid-who:9rem;
 overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
 border:1px solid var(--line);background:#fff;max-width:100%}
.grid-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.race-grid{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;
 font-family:var(--sans);font-size:.82rem;font-variant-numeric:tabular-nums}
.race-grid th,.race-grid td{padding:.44rem .62rem;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
.race-grid .col-leg{width:5.4rem}
.race-grid .col-pace{width:4.5rem}
.race-grid .col-total{width:5.8rem}
.race-grid thead th{position:sticky;top:0;z-index:3;background:var(--paper-warm);border-bottom:1px solid var(--ink);
 font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.race-grid thead th.grid-pos,.race-grid thead th.grid-who{z-index:5;text-align:left}
.race-grid .grid-pos{position:sticky;left:0;width:var(--grid-pos);min-width:var(--grid-pos);z-index:2;background:#fff;
 color:var(--ink-soft);font-weight:400;font-variant-numeric:tabular-nums}
.race-grid thead .grid-pos{background:var(--paper-warm)}
.race-grid .grid-who{position:sticky;left:var(--grid-pos);width:var(--grid-who);min-width:var(--grid-who);z-index:2;background:#fff;text-align:left;
 box-shadow:inset -1px 0 0 var(--line)}
.race-grid thead .grid-who{background:var(--paper-warm)}
.race-grid .grid-who a{text-decoration:none;border-bottom:1px solid var(--line)}
.race-grid .grid-who a:hover{border-bottom-color:var(--ink)}
.race-grid tbody tr:hover td,.race-grid tbody tr:hover th{background:var(--paper-warm)}
.race-grid .grid-leg.is-best{color:var(--accent);font-weight:600}
.race-grid .leg-rank{display:inline-block;margin-left:.35rem;font-size:.56rem;color:var(--ink-soft);vertical-align:super}
.race-grid .leg-rank-note{display:block;font-size:.5rem;letter-spacing:.1em;color:var(--ink-soft)}
.race-grid .grid-pace{color:var(--ink-soft)}
.race-grid .grid-total{font-weight:600}
.race-grid .grid-missing{color:var(--line)}
.race-grid tbody tr:last-child th,.race-grid tbody tr:last-child td{border-bottom:none}
.grid-also{margin:1.6rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line)}
.also-list{list-style:none;margin:.8rem 0;padding:0;display:grid;gap:.5rem}
.also-list li{display:grid;gap:.15rem;font-size:.86rem}
.also-name{font-family:var(--serif);font-size:1.05rem}
.also-note{color:var(--ink-soft);font-size:.78rem;letter-spacing:.02em}
@media (max-width:720px){
 .grid-hint{margin-top:.9rem}
 .grid-scroll{--grid-who:7.4rem;font-size:.78rem}
 .race-grid th,.race-grid td{padding:.4rem .5rem}
}
/* phone on its side: the whole grid, no truncation, header and names held */
@media (orientation:landscape) and (max-height:560px){
 .site-header{padding:.7rem var(--rail)}
 .tabbar a{padding:.5rem .8rem}
 .year-tabs a{padding:.4rem .7rem;font-size:.6rem}
 .grid-scroll{--grid-pos:2rem;--grid-who:6.6rem}
 .race-grid{font-size:.72rem}
 .race-grid th,.race-grid td{padding:.34rem .42rem}
 .edition-page .club-hero,.race-page .club-hero{padding:1.2rem 0}
}

/* records by course, and who has most of what */
.record-group{margin-top:clamp(1.6rem,4vh,2.4rem)}
.record-group:first-of-type{margin-top:0}
.record-group .eyebrow{margin-bottom:.9rem}
.record-grid-five{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.record-grid-five{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.record-grid-five{grid-template-columns:repeat(2,1fr)}}
.record-holder{margin:0;font-size:.82rem;color:var(--ink-soft)}
.record-when{color:var(--accent);font-variant-numeric:tabular-nums}

/* honours on a card, and in full on a member's own page */
.card-honours{display:flex;flex-wrap:wrap;gap:.25rem;margin:.5rem 0 0}
.card-honour{padding:.14rem .38rem;font-size:.53rem;letter-spacing:.1em;text-transform:uppercase;background:var(--paper-warm);color:var(--ink-soft)}
.card-honour.record{background:var(--accent);color:#fff}
.card-honour.record-course{background:var(--ink);color:var(--paper)}
.card-honour.more{background:transparent;color:var(--ink-soft);padding-left:0}
.mosaic-tag.record{background:var(--accent);color:#fff}
.member-honours{margin:clamp(1.6rem,4vh,2.4rem) 0 0;padding-top:1.2rem;border-top:1px solid var(--line)}
.member-honours h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:1rem}
.honour-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.honour-list li{display:grid;gap:.2rem;background:#fff;padding:.8rem 1rem}
.honour-what{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.honour-list li.win .honour-what{color:var(--ink-soft)}
.honour-when{font-family:var(--serif);font-size:1.05rem}
@media (min-width:720px){.honour-list{grid-template-columns:repeat(2,1fr)}}

/* the almanac points at everything that is no longer a tab */
.rest-links{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.rest-links a{display:grid;gap:.3rem;background:#fff;padding:1rem 1.2rem;text-decoration:none;transition:background .18s ease}
.rest-links a:hover{background:var(--paper-warm)}
.rest-links strong{font-family:var(--serif);font-weight:400;font-size:1.15rem}
.rest-links span{font-size:.84rem;color:var(--ink-soft)}
@media (min-width:820px){.rest-links{grid-template-columns:repeat(2,1fr)}}

/* A phone on its side has very little height: the decoration goes, the hero shrinks to a line, and
   the grid comes up. Nothing is lost — rotate back and the page is whole again. */
@media (orientation:landscape) and (max-height:560px){
 .frieze{display:none}
 .site-header{padding:.45rem var(--rail)}
 .site-header .wordmark span{display:none}
 .tabbar a{padding:.45rem .75rem}
 .club-hero{padding:.6rem 0 .4rem}
 .club-hero .eyebrow,.club-hero .club-lede,.club-hero .small-copy,.club-hero .fact-row{display:none}
 .club-hero h1{font-size:clamp(1.3rem,6vh,1.8rem)}
 .club-hero h1 br{display:none}
 .club-hero h1 em{font-style:normal;color:inherit}
 .club-hero h1 em::before{content:' · ';color:var(--ink-soft)}
 .edition-nav-band{padding:.5rem 0 .3rem}
 .edition-nav-band .eyebrow,.edition-nav-band .results-note{display:none}
 .band-title{margin-bottom:.7rem}
 .section-light{padding-top:.6rem}
 .section-heading{margin:0 0 .3rem}
 .section-heading .quiet-label{display:none}
 .edition-page .section-heading+.grid-hint{margin:.4rem 0}
}

/* ---------- the club's own colours ----------
   Read off the crest and the kit (assets/club-crest.png, assets/club-badge.jpg,
   photography/four-kit.jpg, photography/finish-pair.jpg): the ring of the crest and the upper
   panels of the tri-suits are a clear cyan #42c4e6; the shorts, the outlines and the "SEXY
   WALRUS" lettering are near-black #18191b; the walrus and the crest's inner field are a cool
   grey #858b92; the tusks are white; and the retro stripes across the badge and the thigh cuffs
   run sand #ecce96 and poppy coral #d6434f. The paper-and-ink base stays as it is; the kit's
   cyan goes where the page needs a jolt — the open tab, the section labels, the record badges —
   with the coral and sand kept for the two other kinds of honour. */
:root{
  --kit-cyan:#42c4e6;
  --kit-cyan-deep:#0e6f8c;   /* the kit hue, dark enough to read as text on paper */
  --kit-coral:#d6434f;
  --kit-sand:#ecce96;
  --kit-grey:#858b92;
  --accent:var(--kit-cyan-deep);
  --accent-wash:#eaf7fc;
}
.tabbar a[aria-current="page"]{border-bottom-color:var(--kit-cyan);border-bottom-width:3px}
.tabbar a:hover{border-bottom-color:var(--accent-wash)}
.year-tabs a[aria-current="page"]{background:var(--kit-sand);border-color:var(--kit-sand);color:var(--ink)}
.year-tabs a:hover{background:var(--accent-wash);border-color:var(--accent-wash)}
.race-grid thead th{background:var(--accent-wash);border-bottom-color:var(--kit-cyan)}
.race-grid thead .grid-pos,.race-grid thead .grid-who{background:var(--accent-wash)}
.card-honour.record{background:var(--kit-cyan);color:#08333f}
.card-honour.record-course{background:var(--ink);color:var(--paper)}
.mosaic-tag.record{background:var(--kit-cyan);color:#08333f}
.honour-list li.record{border-left:3px solid var(--kit-cyan)}
.honour-list li.record-course{border-left:3px solid var(--kit-coral)}
.honour-list li.win{border-left:3px solid var(--kit-sand)}

/* ---------- the club's own stripe ----------
   Read off the vest George wore in Thailand: a white ground with a coral and a light-blue stripe
   running across it, and the crest on the chest. The stripe sits under the masthead on the
   club's own three pages — Home, The Walri and The race. */
.club-stripes{display:grid;grid-template-rows:repeat(3,5px);border-bottom:1px solid var(--line)}
.club-stripes span{display:block}
.club-stripes span:nth-child(1){background:#fff;border-top:1px solid var(--line)}
.club-stripes span:nth-child(2){background:var(--kit-coral)}
.club-stripes span:nth-child(3){background:var(--kit-cyan)}
/* A member's own photograph is shown in the card's own greyscale, whatever was sent. The colour
   original is never published. */
.member-portrait{filter:grayscale(1) contrast(1.07) brightness(1.02)}

/* The blank card that opens the wall: the invitation, drawn as a card. Nothing on it but a
   mark and the words, in the same frame as the cards around it. */
.mosaic-add{background:var(--paper-warm);border:1px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;min-height:9.5rem;color:var(--ink-soft);transition:border-color .18s ease,color .18s ease}
.mosaic-add:hover{border-color:var(--ink);color:var(--ink)}
.mosaic-add-mark{font-family:var(--serif);font-size:2.1rem;line-height:1}
.mosaic-add-label{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}

/* A card opens where it sits: a near-full-screen reading of the same card. The panel is the
   card's own paper, the portrait on the left, the whole record on the right, and it scrolls
   inside itself so the wall stays where it was. */
dialog.card-dialog{width:min(96vw,74rem);max-width:96vw;height:min(92vh,54rem);max-height:92vh;margin:auto;padding:0;border:1px solid var(--ink);background:var(--paper);color:var(--ink);overflow:hidden}
dialog.card-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
dialog.card-dialog::backdrop{background:rgba(7,9,10,.86)}
.card-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--paper-warm)}
.card-dialog-bar .quiet-label{color:var(--ink-soft)}
.card-dialog-close{font:inherit;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--ink);padding:.45rem .7rem;cursor:pointer}
.card-dialog-close:hover{border-color:var(--ink)}
.card-dialog-body{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);min-height:0}
.card-dialog-portrait{margin:0;position:relative;background:var(--ink)}
.card-dialog-photo{width:100%;height:100%;max-height:100%;object-fit:cover;object-position:50% 30%;display:block;opacity:.92}
.card-dialog-portrait figcaption{position:absolute;inset:auto 0 0 0;padding:.5rem .7rem;background:linear-gradient(transparent,rgba(10,10,10,.86) 40%);color:#fff;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.card-dialog-detail{overflow-y:auto;padding:clamp(1.1rem,2.4vw,2rem)}
.card-dialog-detail h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin:0 0 .3rem}
.card-dialog-head{margin-bottom:1.1rem}
.detail-stats{margin:1.2rem 0 0}
.detail-head{font-size:.68rem;font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:1.8rem 0 .8rem;padding-top:1rem;border-top:1px solid var(--line)}
.detail-results{list-style:none;margin:0;padding:0}
.detail-results li{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:.3rem .9rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.detail-results .result-year{font-size:.78rem;letter-spacing:.1em;color:var(--accent)}
.detail-results .result-event{font-family:var(--serif);font-size:1.02rem}
.detail-results .result-detail{grid-column:2;font-size:.82rem;color:var(--ink-soft)}
.detail-cabinet{margin:0}
.detail-foot{margin:1.6rem 0 0}
@media (max-width:820px){
 dialog.card-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0}
 .card-dialog-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
 .card-dialog-portrait{max-height:38vh}
}

/* One stroke per finish: a tally row, drawn in the accent so the count reads at a glance. */
.tally-row{display:flex;flex-wrap:wrap;gap:.16rem;margin:.85rem 0 0;color:var(--accent);font-size:1.05rem;line-height:1;letter-spacing:0}
.tally-row span{display:block}

/* ==========================================================================================
   Joining: the club's record first. The name is typed, the archive is asked, and the matches
   are offered as plain buttons — pick one, read the times, confirm. New racers get nothing to
   pick, and the card says so in as many words.
   ========================================================================================== */
.join-record{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.join-record-choices{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0 0}
.join-record-choice{display:flex;flex-direction:column;gap:.28rem;text-align:left;font-family:var(--sans);background:none;border:1px solid var(--line);padding:.85rem 1rem;cursor:pointer;transition:border-color .18s ease,background .18s ease}
.join-record-choice:hover:enabled{border-color:var(--accent);background:rgba(0,0,0,.02)}
.join-record-choice:disabled{opacity:.6;cursor:default}
.join-record-choice-name{font-family:var(--serif);font-size:1.12rem}
.join-record-choice-detail{font-size:.78rem;line-height:1.5;color:var(--ink-soft)}
.join-record-sheet{margin:1.4rem 0 0;padding:1.2rem 1.2rem 1.3rem;border:1px solid var(--accent);background:rgba(0,0,0,.015)}
.join-record-sheet-name{font-family:var(--serif);font-size:1.3rem;margin:0 0 .2rem}
.join-record-races{margin:1rem 0 0}
.join-record-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:1.2rem 0 0}

/* Setting the statistic: the slider, what the number means, and the member's own line. */
.breakdown-set{display:flex;align-items:center;gap:.9rem;margin:.2rem 0 .6rem}
.account-range{flex:1 1 auto;-webkit-appearance:none;appearance:none;height:1.6rem;background:none;cursor:pointer}
.account-range::-webkit-slider-runnable-track{height:.42rem;background:#e6e2da;border:1px solid #d8d3c9}
.account-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1rem;height:1.4rem;margin-top:-.55rem;background:var(--ink);border:1px solid var(--ink)}
.account-range::-moz-range-track{height:.42rem;background:#e6e2da;border:1px solid #d8d3c9}
.account-range::-moz-range-thumb{width:1rem;height:1.4rem;border-radius:0;background:var(--ink);border:1px solid var(--ink)}
.breakdown-readout{font-family:var(--serif);font-size:1rem;min-width:11rem;text-align:right}
.account-breakdown-note{margin-bottom:.5rem}
.breakdown-actions{margin:.2rem 0 0}
.card-breakdown .breakdown{margin-top:1rem}

/* A locked tile on the public wall: the club's own name for the card, and no card. */
.mosaic-locked{background:repeating-linear-gradient(135deg,#f4f1ec 0 8px,#eae6df 8px 16px);border-color:var(--line);align-items:flex-end;min-height:11rem}
.mosaic-locked .mosaic-name{color:var(--ink)}
.mosaic-locked .mosaic-nick{color:var(--ink-soft)}
.mosaic-locked:hover{border-color:var(--ink)}
.card-members-note{margin-top:clamp(1.6rem,4vh,2.4rem);max-width:44rem}

/* The Edit control on a card the signed-in member owns: top right of the card's head, and
   nowhere else. It sits above the card's name, level with the eyebrow line beside it. */
.card-edit{position:absolute;top:clamp(1.1rem,2.6vh,2rem);right:var(--rail);font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--line);padding:.4rem .7rem;background:#fff;transition:border-color .18s ease,color .18s ease}
.card-edit:hover,.card-edit:focus-visible{border-color:var(--ink)}

/* The locked half of a card page: a signed-out reader is told whose it is and how in. */
.card-locked{background:var(--paper,#f4f1ec);border:1px solid var(--line);padding:clamp(1.6rem,4vw,2.6rem);display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.card-locked .eyebrow{margin:0}
.card-locked .large-copy{margin:0;max-width:34rem}
.card-locked-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin:0}