/* Berlin Harriers e.V. — no cookies, no storage, no third-party requests.
   One small local script for the next-run display. */

@font-face{font-family:'Alfa Slab One';src:url('fonts/alfaslab.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}

@layer tokens, base, layout, devices, components, motion;

@layer tokens{
  :root{
    color-scheme:light dark;
    --paper:      light-dark(oklch(99%   .003 308), oklch(18.7% .022 297));
    --surface:    light-dark(oklch(97.3% .006 308), oklch(22.7% .029 299));
    --line:       light-dark(oklch(89.8% .015 308), oklch(31%   .030 302));
    --ink:        light-dark(oklch(20.4% .025 307), oklch(92.5% .014 304));
    --ink-soft:   light-dark(oklch(34.5% .033 305), oklch(82%   .020 304));
    --muted:      light-dark(oklch(50.9% .033 308), oklch(70.4% .032 305));
    --purple:     oklch(40% .140 314.6);
    --purple-deep:oklch(32% .120 314.6);
    --brand:      light-dark(oklch(40% .140 314.6), oklch(74% .070 316));
    --on-purple:  oklch(99% .003 308);
    --volt:       oklch(83.5% .189 115.1);
    --volt-ink:   light-dark(oklch(46% .104 115.4), oklch(83.5% .189 115.1));
    --on-volt:    oklch(20.4% .025 307);

    --dsp:'Alfa Slab One',Rockwell,Georgia,serif;
    --body:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;

    --s--1:clamp(.86rem,.83rem + .15vw,.95rem);
    --s-0: clamp(1.10rem,1.06rem + .20vw,1.20rem);
    --s-1: clamp(1.45rem,1.32rem + .60vw,1.90rem);
    --s-2: clamp(2.00rem,1.70rem + 1.40vw,3.10rem);
    --s-3: clamp(2.80rem,2.20rem + 2.80vw,4.60rem);
    --s-4: clamp(3.40rem,2.20rem + 6.00vw,8.00rem);

    --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem;
    --gut:clamp(1.15rem,4vw,3rem);
    --stack:clamp(3rem,7vw,5.5rem);
    --measure:66ch;

    --lift-sm:4px 4px 0 var(--purple-deep);
    --lift-md:5px 5px 0 var(--on-volt);
    --lift-lg:0 14px 0 -7px var(--purple);
    --dur-fast:120ms; --dur-base:200ms; --dur-slow:350ms; --dur-draw:1400ms;
    --ease-out:cubic-bezier(.2,.7,.3,1);
  }
  :root[data-theme="light"]{color-scheme:light}
  :root[data-theme="dark"]{color-scheme:dark}
}

@layer base{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:4rem}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
    font-size:var(--s-0);line-height:1.6;font-synthesis:none;overflow-x:hidden;
    -webkit-font-smoothing:antialiased}
  h1,h2,h3{margin:0;font-family:var(--dsp);font-weight:400;line-height:.95;
    letter-spacing:-.008em;text-wrap:balance}
  p{margin:0;text-wrap:pretty}
  img{max-inline-size:100%;height:auto;display:block}
  a{color:var(--brand);text-underline-offset:.18em;text-decoration-thickness:.08em}
  a:hover{text-decoration-thickness:.14em}
  :focus-visible{outline:3px solid var(--volt-ink);outline-offset:3px}
  ::selection{background:var(--purple);color:var(--on-purple)}
  .num{font-variant-numeric:tabular-nums}
  .vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .skip{position:absolute;inset-block-start:-100%;inset-inline-start:0;z-index:99;
    background:var(--volt);color:var(--on-volt);padding:.7rem 1.1rem;font-weight:700;
    text-decoration:none;letter-spacing:.1em;text-transform:uppercase;font-size:var(--s--1)}
  .skip:focus{inset-block-start:0}
}

@layer layout{
  .wrap{max-inline-size:72rem;margin-inline:auto;padding-inline:var(--gut)}
  .band{padding-block:var(--stack)}
  .eyebrow{font-family:var(--body);font-weight:700;font-size:var(--s--1);text-transform:uppercase;
    letter-spacing:.2em;color:var(--brand);display:flex;align-items:center;gap:.8rem;
    margin-block-end:var(--sp-4)}
  .eyebrow::after{content:"";flex:1;block-size:2px;background:var(--line)}
  h2{font-size:var(--s-2);color:var(--brand)}
  .lede{font-size:var(--s-1);line-height:1.4;color:var(--ink-soft);margin-block-start:var(--sp-4);
    max-inline-size:52ch}
  .prose{max-inline-size:var(--measure);display:grid;gap:var(--sp-4);margin-block-start:var(--sp-5)}
  .duo{display:grid;gap:var(--sp-5);margin-block-start:var(--sp-6)}
  @container (min-width:46rem){}
  @media (min-width:52rem){.duo{grid-template-columns:1fr 1fr}}
}

/* ── DV1–DV4 ───────────────────────────────────────── */
@layer devices{
  .stripes{display:flex;gap:4px;block-size:10px;background:var(--purple-deep)}   /* DV1 */
  .stripes i{flex:1;background:var(--volt)}
  .stripes i:nth-child(2){opacity:.34}
  .stripes i:nth-child(3){opacity:.72}
  .stripes i:nth-child(4){opacity:.20}
  .stripes i:nth-child(5){opacity:.55}

  .numeral{font-family:var(--dsp);color:var(--volt);line-height:.8;    /* DV3 */
    -webkit-text-stroke:2px var(--on-volt);paint-order:stroke fill}

  .rosette{inline-size:5.5rem;aspect-ratio:1;border-radius:50%;        /* DV4 */
    border:3px solid var(--volt);display:grid;place-items:center;text-align:center;
    font-family:var(--dsp);font-size:.66rem;color:var(--volt);line-height:1.15;padding:.5rem}
}

@layer components{
  /* masthead M9 */
  .masthead{position:relative;isolation:isolate;background:var(--purple-deep);
    color:var(--on-purple);padding-block:clamp(2.75rem,8vw,5rem);text-align:center;overflow:hidden}
  .masthead .backdrop{position:absolute;inset:0;z-index:-2;inline-size:100%;block-size:100%;
    object-fit:cover;filter:saturate(.5) contrast(1.05)}
  .masthead .backdrop--still{display:none}
  .masthead::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,
      color-mix(in oklab,var(--purple-deep) 78%,transparent) 0%,
      color-mix(in oklab,var(--purple-deep) 86%,transparent) 62%,
      var(--purple-deep) 100%)}
  @media (prefers-reduced-motion:reduce){
    .masthead video.backdrop{display:none}
    .masthead .backdrop--still{display:block}
  }
  .masthead .wrap{display:grid;justify-items:center;gap:var(--sp-3)}
  .rule{inline-size:min(34rem,100%);block-size:4px;background:var(--volt)}
  .rule.soft{opacity:.5}
  .crest{inline-size:clamp(120px,20vw,200px)}
  .masthead h1{font-size:var(--s-4);color:var(--on-purple);line-height:.88}
  .est{font-family:var(--body);font-weight:700;font-size:var(--s--1);text-transform:uppercase;
    letter-spacing:.34em;text-indent:.34em;color:color-mix(in oklab,var(--on-purple) 72%,transparent)}

  /* sticky next-run band, DV2 angled */
  .next{position:sticky;inset-block-start:0;z-index:20;background:var(--volt);color:var(--on-volt);
    clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),0 100%);padding-block-end:12px}
  .next .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1.2rem;padding-block:.7rem}
  .next .lbl{font-family:var(--body);font-weight:700;font-size:var(--s--1);
    text-transform:uppercase;letter-spacing:.18em}
  .next b{font-family:var(--dsp);font-weight:400;font-size:var(--s-1);line-height:1}
  .next .where{font-size:var(--s--1);opacity:.85}

  /* photos — P4 */
  .shot{position:relative;overflow:hidden;background:var(--surface)}
  .shot img{inline-size:100%;filter:saturate(.55) contrast(1.1)}
  .shot::after{content:"";position:absolute;inset-block-end:9%;inset-inline-start:6%;
    inline-size:26%;block-size:6px;background:var(--volt)}
  .shot figcaption{font-size:var(--s--1);color:var(--muted);padding-block-start:.5rem}

  /* S1 fixtures / MO4 carousel */
  .fixtures{border:2px solid var(--ink);margin-block-start:var(--sp-6);container-type:inline-size}
  /* The wipe is a background-size transition, not an animated pseudo-element:
     the fill and the text colour are on the same element, so they can never
     desynchronise into white-on-white. */
  .fix{display:grid;grid-template-columns:auto 1fr;gap:.15rem 1rem;padding:1rem 1.1rem;
    border-block-end:1px solid var(--line);position:relative;
    background-image:linear-gradient(var(--purple),var(--purple));
    background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
    transition:background-size var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
  .fix:last-child{border-block-end:0}
  .fix:hover,.fix:focus-within{background-size:100% 100%;color:var(--on-purple)}
  .fix .day{font-family:var(--dsp);font-size:var(--s-1);color:var(--brand);line-height:.9;
    min-inline-size:4.2rem;transition:color var(--dur-base)}
  .fix:hover .day,.fix:focus-within .day{color:var(--volt)}
  .fix .name{font-weight:700;align-self:center;display:flex;align-items:center;gap:.5rem}
  .fix .mark{font-size:1.1em;line-height:1}
  .fix .when{font-size:var(--s--1);color:var(--muted);grid-column:1/-1;transition:color var(--dur-base)}
  .fix .after{font-size:var(--s--1);color:var(--muted);grid-column:1/-1;transition:color var(--dur-base)}
  .fix .rt{grid-column:1/-1;inline-size:100%;max-inline-size:14rem;color:var(--brand);
    opacity:.55;stroke-width:1;transition:color var(--dur-base),opacity var(--dur-base)}
  .fix:hover .rt,.fix:focus-within .rt{color:var(--volt);opacity:1}
  .fix:hover .when,.fix:hover .after,.fix:focus-within .when,.fix:focus-within .after{
    color:color-mix(in oklab,var(--on-purple) 78%,transparent)}
  .fix a{color:var(--brand);transition:color var(--dur-base)}
  .fix:hover a,.fix:focus-within a{color:var(--volt)}
  .fix.today{box-shadow:inset 4px 0 0 var(--volt)}
  .fix .todaytag{display:none;font-size:.62rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;background:var(--volt);color:var(--on-volt);padding:.1rem .4rem}
  .fix.today .todaytag{display:inline-block}

  @container (min-width:46rem){
    .fix{grid-template-columns:4.2rem minmax(0,1fr) auto 9rem;
      column-gap:1.5rem;align-items:baseline}
    .fix .day{grid-column:1;grid-row:1}
    .fix .name{grid-column:2;grid-row:1}
    .fix .when{grid-column:3;grid-row:1;text-align:end;white-space:nowrap}
    .fix .after{grid-column:2/4;grid-row:2}
    .fix .rt{grid-column:4;grid-row:1/3;max-inline-size:9rem;align-self:center;
      justify-self:end;margin:0}
  }
  @container (max-width:46rem){
    .fixtures{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:.6rem;border:0;
      overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
      scroll-padding-inline:var(--gut);padding-block:.25rem}
    .fix{scroll-snap-align:center;border:2px solid var(--ink)}
  }

  /* A4 season record */
  .season{border:2px solid var(--ink);margin-block-start:var(--sp-6)}
  .season .row{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem 1rem;
    padding:.85rem 1.1rem;border-block-end:1px solid var(--line);align-items:baseline}
  .season .row:last-child{border-block-end:0}
  .season .dt{font-size:var(--s--1);color:var(--muted);font-variant-numeric:tabular-nums;
    min-inline-size:4.2rem}
  .season .ev{font-weight:700}
  .season .rs{font-family:var(--dsp);color:var(--brand);font-size:var(--s--1);white-space:nowrap}
  .season .rs.win{color:var(--volt-ink)}
  .season .now{background:var(--purple);color:var(--on-purple);padding:.35rem 1.1rem;
    font-family:var(--body);font-weight:700;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
  .season .row.up .ev{color:var(--ink-soft)}
  .season .row.up .rs{color:var(--volt-ink)}

  /* buttons B1 */
  .btns{display:flex;flex-wrap:wrap;gap:.9rem;margin-block-start:var(--sp-5)}
  .btn{font-family:var(--dsp);font-weight:400;font-size:var(--s-0);padding:.62em 1.3em;
    text-decoration:none;display:inline-block;border:2px solid var(--on-volt);
    background:var(--volt);color:var(--on-volt);box-shadow:var(--lift-md);
    transition:transform var(--dur-fast),box-shadow var(--dur-base)}
  .btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--on-volt)}
  .btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--on-volt)}
  .btn.ghost{background:transparent;color:var(--brand);border-color:var(--brand);
    box-shadow:5px 5px 0 var(--line)}
  .btn.ghost:hover{box-shadow:7px 7px 0 var(--line)}

  /* C2 CTA bands */
  .cta{background:var(--purple);color:var(--on-purple);padding-block:var(--stack)}
  .cta h2{color:var(--volt)}
  .cta p{color:color-mix(in oklab,var(--on-purple) 84%,transparent);max-inline-size:50ch;
    margin-block-start:var(--sp-4);font-size:var(--s-1);line-height:1.4}
  .cta .btn.ghost{color:var(--volt);border-color:var(--volt);box-shadow:5px 5px 0 var(--purple-deep)}
  .cta--slim{padding-block:var(--sp-6)}
  .cta--slim .wrap{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;
    justify-content:space-between}
  .cta--slim h2{font-size:var(--s-1)}
  .cta--slim .btns{margin:0}

  /* cards + small print */
  .card{border:1px solid var(--line);background:var(--surface);padding:var(--sp-5);
    transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base),border-color var(--dur-base)}
  .card:hover{transform:translateY(-4px);box-shadow:var(--lift-lg);border-color:var(--purple)}
  .card h3{font-size:var(--s-1);color:var(--brand);margin-block-end:var(--sp-3)}
  .card p{color:var(--ink-soft);font-size:var(--s--1);line-height:1.55}
  .card .btns{margin-block-start:var(--sp-4)}
  .smallprint{margin-block-start:var(--sp-5);padding:1rem 1.1rem;background:var(--surface);
    border-inline-start:4px solid var(--line);color:var(--muted);font-size:var(--s--1);
    max-inline-size:var(--measure)}

  .quote{font-family:var(--dsp);font-size:var(--s-2);color:var(--brand);line-height:1.05;
    max-inline-size:20ch;margin-block-start:var(--sp-5)}

  footer{background:var(--purple-deep);color:var(--on-purple);padding-block:var(--sp-6)}
  footer .wrap{display:grid;gap:var(--sp-5);justify-items:start}
  @media (min-width:46rem){footer .wrap{grid-template-columns:auto 1fr;align-items:center}}
  footer h2{font-family:var(--dsp);font-size:var(--s-1);color:var(--volt)}
  footer p{color:color-mix(in oklab,var(--on-purple) 78%,transparent);font-size:var(--s--1);
    max-inline-size:60ch;margin-block-start:.5rem}
  footer a{color:var(--volt)}
  footer .legal{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-block-start:var(--sp-4)}
}

@layer motion{
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  }
  @media (prefers-reduced-motion:no-preference){
    @supports (animation-timeline:view()){
      .band > .wrap,.cta > .wrap{animation:rise linear both;animation-timeline:view();
        animation-range:entry 2% cover 14%}
      @keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
      #runs > .wrap{animation:none}        /* the schedule never animates in */
    }
  }
}