/* =========================================================
   Vikings Swemklub — core stylesheet
   Monochrome, matching the club's own black-and-white mark.
   ========================================================= */

:root{
  /* Surfaces */
  --black:      #0A0A0A;   /* header, footer, hero, dark bands */
  --black-2:    #1A1A1A;   /* raised dark panel (image placeholder) */
  --paper:      #FFFFFF;   /* main background */
  --paper-2:    #F1F1F1;   /* shaded section */
  --white:      #FFFFFF;

  /* Lines */
  --line:       #E2E2E2;   /* hairline on light surfaces */
  --line-dark:  rgba(255,255,255,.16);   /* hairline on dark surfaces */

  /* Text */
  --ink:        #111111;
  --ink-soft:   #5C5C5C;
  --ink-invert: #FFFFFF;
  --ink-invert-soft: #AFAFAF;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 66ch;
  --shell: 1180px;

  --r-sm: 3px;
  --r-md: 6px;

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; }

/* ---------- Type ---------- */
h1,h2,h3,h4,.plate__num,.stat__fig{
  font-family:"Archivo", ui-sans-serif, system-ui, sans-serif;
  font-variation-settings:"wdth" 118, "wght" 800;
  font-weight:800;
  letter-spacing:-.018em;
  line-height:1.02;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.6rem, 6.6vw, 5.1rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); line-height:1.06; }
h3{ font-size:clamp(1.18rem, 1.8vw, 1.45rem); font-variation-settings:"wdth" 112,"wght" 750; letter-spacing:-.012em; line-height:1.18; }
h4{ font-size:1.03rem; font-variation-settings:"wdth" 108,"wght" 700; letter-spacing:0; }
p{ margin:0 0 1.05em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }
h1 + p, h2 + p, h1 + .lede, h2 + .lede{ margin-top:.9rem; }
.lede{
  font-size:clamp(1.1rem, 1.35vw, 1.28rem);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:58ch;
}

/* ---------- Layout shell ---------- */
.shell{
  width:min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline:auto;
}
.band{ padding-block:clamp(3.4rem, 7vw, 6rem); }
.band--tight{ padding-block:clamp(2.4rem, 4.5vw, 3.6rem); }
.band--dark{ background:var(--black); color:var(--ink-invert); }
.band--dark .lede{ color:var(--ink-invert-soft); }
.band--sand{ background:var(--paper-2); }

.split{
  display:grid;
  gap:clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; }
  .split--lead{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  .split--tail{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
}

/* Section heading pattern: title sits on a short eyebrow bar */
.sec-head{ margin-bottom:clamp(1.5rem, 3vw, 2.4rem); max-width:60ch; }
.sec-head p{ color:var(--ink-soft); }
.band--dark .sec-head p{ color:var(--ink-invert-soft); }

/* ---------- Lane rope: the site's structural motif ----------
   A dashed rule in the current text colour, so it goes black on
   light sections and white on dark ones without extra markup. */
.rope{
  height:4px;
  border:0;
  margin:0;
  border-radius:99px;
  background:repeating-linear-gradient(90deg, currentColor 0 18px, transparent 18px 32px);
  opacity:.88;
}
.rope--slim{ height:3px; }
.rope--full{ width:100%; }

/* Section eyebrow: a short solid bar, quieter than the dashed rope,
   which stays reserved for the hero and page headers. */
.rope--stub{
  width:44px; height:4px; margin-bottom:1.1rem;
  background:currentColor; border-radius:99px; opacity:1;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.82rem 1.5rem;
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wdth" 108,"wght" 700;
  font-size:.97rem;
  letter-spacing:.005em;
  text-decoration:none;
  border-radius:var(--r-md);
  border:2px solid transparent;
  cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--solid{ background:var(--black); color:var(--white); }
.btn--solid:hover{ background:#2E2E2E; }
.btn--line{ border-color:currentColor; color:inherit; background:transparent; }
.btn--line:hover{ background:var(--black); color:var(--paper); border-color:var(--black); }

/* On dark surfaces a solid black button would vanish, so it flips to
   white; the outline button flips the other way on hover. */
:is(.masthead, .hero, .pagehead, .band--dark, .cta) .btn--solid{ background:var(--white); color:var(--black); }
:is(.masthead, .hero, .pagehead, .band--dark, .cta) .btn--solid:hover{ background:#DADADA; }
:is(.masthead, .hero, .pagehead, .band--dark, .cta) .btn--line:hover{ background:var(--white); color:var(--black); border-color:var(--white); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem; }

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:3px solid currentColor;
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:60;
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(9px);
  color:var(--ink-invert);
  border-bottom:1px solid var(--line-dark);
}
.masthead__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:.7rem;
}
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit; }
.brand__mark{ height:32px; width:auto; flex:none; display:block; }
@media (min-width:480px){ .brand__mark{ height:42px; } }
@media (min-width:900px){ .brand__mark{ height:48px; } }

.nav{ display:flex; align-items:center; gap:.2rem; }
.nav a{
  text-decoration:none; padding:.55rem .8rem; font-size:.94rem;
  color:var(--ink-invert-soft); border-radius:var(--r-sm);
  transition:color .18s var(--ease);
}
.nav a:hover{ color:var(--white); }
.nav a[aria-current="page"]{
  color:var(--white);
  box-shadow:inset 0 -3px 0 var(--white);
}
.nav .btn{ margin-left:.6rem; padding:.6rem 1.05rem; font-size:.9rem; }

.nav-toggle{
  display:none; background:none; border:1px solid rgba(255,255,255,.4);
  color:var(--ink-invert); border-radius:var(--r-sm);
  padding:.5rem .8rem; font-size:.9rem; cursor:pointer;
}
@media (max-width:880px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; inset:100% 0 auto 0;
    flex-direction:column; align-items:stretch;
    background:var(--black);
    padding:.5rem var(--gutter) 1.3rem;
    border-bottom:1px solid var(--line-dark);
    display:none;
  }
  .nav[data-open="true"]{ display:flex; }
  .nav a{ padding:.8rem .2rem; border-bottom:1px solid rgba(255,255,255,.12); }
  .nav a[aria-current="page"]{ box-shadow:none; color:var(--white); }
  .nav .btn{ margin:.9rem 0 0; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; background:var(--black); color:var(--white); overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.4) 38%, rgba(0,0,0,.94) 100%);
}
.hero__inner{
  position:relative;
  min-height:clamp(520px, 76vh, 760px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:clamp(3rem, 8vw, 5.5rem);
}
.hero h1{ max-width:14ch; text-shadow:0 2px 30px rgba(0,0,0,.5); }
.hero__sub{
  margin-top:1.2rem; max-width:50ch;
  font-size:clamp(1.05rem, 1.3vw, 1.22rem);
  color:#D8D8D8; line-height:1.5;
}
.hero .rope{ width:min(360px, 60%); margin-bottom:1.6rem; }

/* subtle single page-load reveal */
.hero h1,.hero__sub,.hero .btn-row,.hero .rope{ animation:rise .8s var(--ease) both; }
.hero .rope{ animation-delay:.05s; }
.hero__sub{ animation-delay:.14s; }
.hero .btn-row{ animation-delay:.2s; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* Page header for interior pages */
.pagehead{ background:var(--black); color:var(--ink-invert); padding-block:clamp(2.8rem, 6vw, 4.6rem); }
.pagehead h1{ font-size:clamp(2.3rem, 4.6vw, 3.6rem); }
.pagehead .rope{ width:120px; margin-bottom:1.25rem; }
.pagehead p{ color:var(--ink-invert-soft); margin-top:1rem; max-width:56ch; font-size:1.08rem; }

/* ---------- Stat strip ----------
   Plain numbers on white, separated by space alone — no boxes,
   no divider lines. */
.facts{
  background:var(--paper);
  padding-block:clamp(2.4rem, 5.5vw, 3.4rem);
}
.facts__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:2rem clamp(1.5rem, 4vw, 3rem);
}
@media (max-width:760px){
  .facts__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.8rem 1.5rem; }
}
.fact{ padding:0; }
.stat__fig{ font-size:clamp(2rem,3.2vw,2.6rem); color:var(--black); font-variation-settings:"wdth" 120,"wght" 800; }
.fact p{ margin:.4rem 0 0; font-size:.87rem; color:var(--ink-soft); line-height:1.45; max-width:24ch; }

/* ---------- Group plates (starting-block numerals) ---------- */
/* Each group is a lane: white water, a rule down the left edge,
   the rule darkening left to right as the squads get faster. */
.plates{ display:grid; gap:3px; }
.plate{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1rem,2.5vw,1.9rem);
  align-items:start;
  background:var(--white);
  border-left:7px solid var(--black);
  padding:clamp(1.3rem,2.6vw,1.85rem) clamp(1.2rem,2.6vw,2rem);
}
.plates > .plate:first-child{ border-radius:var(--r-md) var(--r-md) 0 0; }
.plates > .plate:last-child{ border-radius:0 0 var(--r-md) var(--r-md); }
.plate:nth-child(1){ border-left-color:#D6D6D6; }
.plate:nth-child(2){ border-left-color:#A8A8A8; }
.plate:nth-child(3){ border-left-color:#7A7A7A; }
.plate:nth-child(4){ border-left-color:#404040; }
.plate:nth-child(5){ border-left-color:#0A0A0A; }
.plate--masters{ background:var(--paper-2); border-left-color:var(--black); }
.plate__num{
  width:74px; height:74px; flex:none;
  display:grid; place-items:center;
  background:var(--white);
  border:1px solid #D8D8D8;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);
  border-radius:2px;
  font-size:2.4rem; color:var(--ink);
  font-variation-settings:"wdth" 118,"wght" 800;
}
.plate--masters .plate__num{ font-size:1.5rem; letter-spacing:.02em; }
@media (max-width:560px){
  .plate{ grid-template-columns:1fr; gap:.9rem; }
  .plate__num{ width:56px; height:56px; font-size:1.8rem; }
}
.plate__meta{
  margin:.45rem 0 .6rem;
  font-size:.83rem; letter-spacing:.02em;
  color:var(--ink-soft); font-weight:600;
}
.plate p{ color:var(--ink-soft); margin-bottom:0; }
.plate p + p{ margin-top:.7rem; }

/* ---------- Cards used sparingly (home preview) ---------- */
/* Progression rail: a rule per step, darkening left to right.
   No card fills — the rule carries the sequence. */
.ladder{ display:grid; gap:clamp(1.2rem,2.6vw,2rem); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.rung{ padding-top:1rem; border-top:4px solid var(--black); }
.rung:nth-child(1){ border-top-color:#D6D6D6; }
.rung:nth-child(2){ border-top-color:#A8A8A8; }
.rung:nth-child(3){ border-top-color:#7A7A7A; }
.rung:nth-child(4){ border-top-color:#0A0A0A; }
.rung__step{
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 118,"wght" 800;
  font-size:1.35rem; line-height:1; color:var(--ink-soft);
}
.rung h3{ margin:.5rem 0 .4rem; }
.rung p{ font-size:.95rem; color:var(--ink-soft); margin:0; }
.band--dark .rung:nth-child(1){ border-top-color:#4A4A4A; }
.band--dark .rung:nth-child(2){ border-top-color:#767676; }
.band--dark .rung:nth-child(3){ border-top-color:#A8A8A8; }
.band--dark .rung:nth-child(4){ border-top-color:var(--white); }
.band--dark .rung__step,.band--dark .rung p{ color:var(--ink-invert-soft); }
.band--dark .rung h3{ color:var(--white); }

/* ---------- Reviews ---------- */
.quotes{ display:grid; gap:clamp(1.4rem,3vw,2.2rem); grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.quote{ border-top:1px solid var(--line-dark); padding-top:1.2rem; }
.quote--rating{ border-top-color:rgba(255,255,255,.35); }
.quote--rating p{ margin:0 0 .8rem; font-size:.98rem; color:var(--ink-invert-soft); max-width:34ch; }
.quote--rating .stat__fig{ font-size:2.6rem; color:var(--white); margin-bottom:.4rem; }
.quote blockquote{
  margin:0 0 1rem;
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 106,"wght" 500;
  font-size:1.16rem; line-height:1.45; letter-spacing:-.008em;
}
.quote figcaption{ font-size:.9rem; color:var(--ink-invert-soft); }
.quote figcaption a{ color:var(--white); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4); }
.quote figcaption a:hover{ border-bottom-color:var(--white); }
.stars{ color:var(--white); letter-spacing:.16em; font-size:.9rem; margin-bottom:.7rem; }
.band--dark .quote p{ color:var(--ink-invert-soft); }

/* ---------- Media ---------- */
.frame{ position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--black-2); }
.frame img{ width:100%; height:100%; object-fit:cover; }
.frame--tall{ aspect-ratio:4/5; }
.frame--wide{ aspect-ratio:16/9; }
.frame--square{ aspect-ratio:1/1; }
.caption{ margin-top:.6rem; font-size:.85rem; color:var(--ink-soft); }
.band--dark .caption{ color:var(--ink-invert-soft); }

/* Bias the crop toward the top of the frame for portraits/group shots
   where heads sit close to the top edge — prevents cover-crop from
   trimming faces. */
.obj-top{ object-position:center top; }
.obj-high{ object-position:center 20%; }

.mosaic{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.mosaic figure{ margin:0; }
@media (min-width:820px){
  .mosaic{ grid-template-columns:repeat(6,1fr); grid-auto-rows:190px; }
  .mosaic figure{ display:flex; flex-direction:column; }
  .mosaic figure .frame{ flex:1; }
  .m-a{ grid-column:span 4; grid-row:span 2; }
  .m-b{ grid-column:span 2; grid-row:span 2; }
  .m-c{ grid-column:span 2; grid-row:span 2; }
  .m-d{ grid-column:span 4; grid-row:span 2; }
  .m-e{ grid-column:span 3; grid-row:span 2; }
  .m-f{ grid-column:span 3; grid-row:span 2; }
  .m-g{ grid-column:span 3; grid-row:span 2; }
  .m-h{ grid-column:span 3; grid-row:span 2; }
  .mosaic figure .frame{ aspect-ratio:auto; height:100%; }
}

/* ---------- Timeline (coach honours — a genuine sequence) ---------- */
.honours{ list-style:none; margin:0; padding:0; }
.honours li{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:1.1rem; padding:1rem 0;
  border-top:1px solid var(--line);
}
.honours li:last-child{ border-bottom:1px solid var(--line); }
.honours .yr{
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 112,"wght" 700;
  color:var(--black); font-size:.98rem; padding-top:.12rem; min-width:5.5ch;
}
.honours h4{ margin-bottom:.15rem; }
.honours p{ margin:0; font-size:.94rem; color:var(--ink-soft); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; gap:clamp(1.8rem,4vw,3rem); }
@media (min-width:940px){ .contact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); } }

.detail-list{ list-style:none; margin:0; padding:0; }
.detail-list li{ padding:1.05rem 0; border-bottom:1px solid var(--line); }
.detail-list li:first-child{ border-top:1px solid var(--line); }
.detail-list .k{
  font-size:.78rem; letter-spacing:.14em; color:var(--ink-soft);
  text-transform:uppercase; margin-bottom:.25rem;
}
.detail-list .v{ font-size:1.06rem; }
.detail-list a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(0,0,0,.3); text-underline-offset:2px; }
.detail-list a:hover{ text-decoration-color:var(--ink); }

.form h2{ font-size:clamp(1.35rem,2vw,1.65rem); }
.form{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:clamp(1.3rem,3vw,2rem); }
.field{ margin-bottom:1.05rem; }
.field label{ display:block; font-size:.87rem; font-weight:600; margin-bottom:.35rem; }
.field input,.field select,.field textarea{
  width:100%; padding:.7rem .85rem;
  border:1px solid #CCCCCC; border-radius:var(--r-sm);
  background:var(--paper-2); color:var(--ink); font:inherit; font-size:.97rem;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--black); background:var(--white); }
.field textarea{ min-height:118px; resize:vertical; }
.field-row{ display:grid; gap:1.05rem; grid-template-columns:1fr; }
@media (min-width:620px){ .field-row{ grid-template-columns:1fr 1fr; } }
.form-note{ font-size:.85rem; color:var(--ink-soft); margin-top:.9rem; }
.form-status{ margin-top:1rem; font-size:.92rem; padding:.75rem .9rem; border-radius:var(--r-sm); display:none; }
.form-status[data-show="true"]{ display:block; background:var(--paper-2); border-left:3px solid var(--black); }

.map-wrap{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; line-height:0; }
.map-wrap iframe{ width:100%; height:340px; border:0; }

/* Schedule table */
.sched{ width:100%; border-collapse:collapse; font-size:.96rem; }
.sched caption{ text-align:left; color:var(--ink-soft); font-size:.9rem; padding-bottom:.8rem; }
.sched th,.sched td{ text-align:left; padding:.78rem .9rem; border-bottom:1px solid var(--line); }
.sched thead th{
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 108,"wght" 700;
  font-size:.86rem; letter-spacing:.03em; border-bottom:2px solid var(--ink);
}
.sched tbody tr:nth-child(odd){ background:rgba(255,255,255,.6); }
.table-scroll{ overflow-x:auto; }

/* ---------- CTA band ---------- */
.cta{ background:var(--black); color:var(--white); }
.cta h2{ max-width:20ch; }
.cta p{ color:#CCCCCC; margin-top:.9rem; }

/* ---------- Footer ---------- */
.foot{ background:var(--black); color:var(--ink-invert-soft); padding-block:clamp(2.6rem,5vw,3.6rem) 1.6rem; font-size:.93rem; }
.foot a{ color:var(--ink-invert-soft); text-decoration:none; }
.foot a:hover{ color:var(--white); }
.foot__grid{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.foot h4{ color:var(--white); margin-bottom:.7rem; font-size:.92rem; letter-spacing:.02em; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ padding:.22rem 0; }
.foot .brand{ margin-bottom:.9rem; color:var(--white); }
.foot__base{
  margin-top:2.4rem; padding-top:1.2rem;
  border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between;
  font-size:.82rem;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--white); color:var(--black); padding:.7rem 1.1rem; z-index:99; font-weight:700;
  border:2px solid var(--black);
}
.skip:focus{ left:.6rem; top:.6rem; }

/* utilities */
.stack > * + *{ margin-top:1rem; }
.mt-lg{ margin-top:clamp(1.8rem,4vw,2.8rem); }
.center-narrow{ max-width:62ch; }