:root{
    /* Sand-colored light theme */
    --night: #e8dfce;        /* primary background — warm sand */
    --night-2: #ddd1bc;      /* slightly deeper sand for cards */
    --night-3: #d2c4ab;      /* deepest sand for layered cards */
    --paper: #1a1410;        /* deep ink text on sand */
    --paper-soft: #3a2f24;   /* secondary ink */
    --muted: #604f3c;        /* muted brown text — WCAG AA 5.5:1 on --night */
    --rule: rgba(26,20,16,.16);
    --rule-strong: rgba(26,20,16,.28);
    --brick: #003A8F;
    --brick-soft: #2a5fb0;
    --navy: #FFD100;
    --navy-soft: #ffd955;
    --sand: #b8843d;         /* deeper accent sand for highlights */
    --paper-on-dark: #f5ede0; /* used inside red/navy chips */
    --display: 'Barlow Condensed', sans-serif;
    --body: 'Inter', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
  }
  *{box-sizing:border-box}
  html, body{
    margin: 0; padding: 0;
    background: var(--night); color: var(--paper); font-family: var(--body);
  }
  /* Use overflow-x: clip on html only — does NOT create a scroll container,
     so we get exactly one vertical scrollbar (on html) and no horizontal page bleed. */
  html{ overflow-x: clip; }
  body{ width: 100%; overflow-x: clip; }
  a{ color: inherit }
  img{ max-width: 100%; display: block }

  /* ========== TOP NAV ========== */
  .nav{
    position: absolute; top: 0; left: 0; right: 0; z-index: 30;
    padding: 28px 56px;
    display:flex; align-items: flex-start; justify-content: space-between;
  }
  .logo{
    display: inline-flex; align-items: center;
    text-decoration: none; line-height: 1; color: var(--paper);
    font-family: var(--display);
  }
  .logo img{
    display: block;
    height: clamp(72px, 9vw, 130px);
    width: auto; max-width: 100%;
  }
  .logo .l1{
    display:block; font-weight: 800; font-style: italic;
    font-size: 16px; letter-spacing: .06em;
    color: var(--brick);
    line-height: 1;
  }
  .logo .l2{
    display:inline-block; margin-top: 4px;
    background: var(--navy); color: var(--paper); /* yellow chip needs dark text */
    font-weight: 700; font-style: italic;
    font-size: 10px; letter-spacing: .18em;
    padding: 2px 6px;
  }

  .menu-btn{
    width: 52px; height: 52px;
    border: 1px solid rgba(26,20,16,.25);
    background: rgba(13,20,29,.4);
    backdrop-filter: blur(10px);
    display:flex; flex-direction: column; gap: 5px;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
  }
  .menu-btn:hover{ border-color: var(--brick); }
  .menu-btn span{ display:block; width: 22px; height: 2px; background: var(--paper) }

  /* ========== MENU OVERLAY ========== */
  .menu-overlay{
    position: fixed; inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 80% 20%, rgba(0,58,143,.10), transparent 60%),
      radial-gradient(ellipse 60% 50% at 10% 90%, rgba(255,209,0,.10), transparent 60%),
      var(--paper);
    color: var(--paper-on-dark);
    z-index: 110;
    padding: 28px 56px 56px;
    display: flex; flex-direction: column;
    visibility: hidden;            /* fully removed from hit-testing while closed */
    opacity: 0; pointer-events: none;
    transform: translateY(-12px);
    transition:
      opacity .35s cubic-bezier(.2,.7,.2,1),
      transform .35s cubic-bezier(.2,.7,.2,1),
      visibility 0s linear .35s;
    overflow-y: auto;
  }
  body.menu-open .menu-overlay{
    visibility: visible;
    opacity: 1; pointer-events: auto;
    transform: none;
    transition:
      opacity .35s cubic-bezier(.2,.7,.2,1),
      transform .35s cubic-bezier(.2,.7,.2,1),
      visibility 0s linear 0s;
  }
  body.menu-open{ overflow: hidden; }
  body.menu-open #scroll-progress{ opacity: 0; }
  .menu-overlay::before{
    content:""; position: absolute; inset: 0;
    background-image: url("/assets/topo.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .05;
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .menu-overlay > *{ position: relative; }
  .menu-head{
    display: flex; align-items: flex-start; justify-content: space-between;
    padding-bottom: 28px;
    margin-bottom: 56px;
    border-bottom: 1px solid rgba(245,237,224,.12);
    gap: 24px;
  }
  .menu-eyebrow{
    font-family: var(--mono);
    font-size: 11px; letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--brick);
    display: inline-flex; align-items: center; gap: 14px;
  }
  .menu-eyebrow::before{
    content:""; width: 28px; height: 1px; background: var(--brick);
  }
  .menu-frame-id{
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: rgba(245,237,224,.45);
    margin-top: 8px;
  }
  .menu-frame-id .num{ color: var(--brick); }
  .menu-close{
    width: 52px; height: 52px;
    background: transparent;
    border: 1px solid rgba(245,237,224,.35);
    cursor: pointer; padding: 0;
    position: relative;
    flex-shrink: 0;
    transition: border-color .2s ease;
  }
  .menu-close:hover{ border-color: var(--brick); }
  .menu-close::before, .menu-close::after{
    content:""; position: absolute; left: 50%; top: 50%;
    width: 22px; height: 2px;
    background: var(--paper-on-dark);
  }
  .menu-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
  .menu-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
  .menu-list{
    list-style: none; padding: 0; margin: 0;
  }
  .menu-list li{
    border-bottom: 1px solid rgba(245,237,224,.10);
    transform: translateY(12px); opacity: 0;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s cubic-bezier(.2,.7,.2,1);
  }
  .menu-list li:first-child{ border-top: 1px solid rgba(245,237,224,.10); }
  body.menu-open .menu-list li{ transform: none; opacity: 1; }
  body.menu-open .menu-list li:nth-child(1){ transition-delay: .08s }
  body.menu-open .menu-list li:nth-child(2){ transition-delay: .14s }
  body.menu-open .menu-list li:nth-child(3){ transition-delay: .20s }
  body.menu-open .menu-list li:nth-child(4){ transition-delay: .26s }
  body.menu-open .menu-list li:nth-child(5){ transition-delay: .32s }
  body.menu-open .menu-list li:nth-child(6){ transition-delay: .38s }
  body.menu-open .menu-list li:nth-child(7){ transition-delay: .44s }
  .menu-list a{
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: baseline; gap: 24px;
    padding: 18px 4px;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: clamp(40px, 6.5vw, 80px);
    line-height: 1; letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--paper-on-dark);
    text-decoration: none;
    transition: padding-left .25s cubic-bezier(.2,.7,.2,1), color .2s ease;
  }
  .menu-list a:hover{
    padding-left: 28px;
    color: var(--brick);
  }
  .menu-list .num{
    font-family: var(--mono);
    font-style: normal; font-weight: 500;
    font-size: 11px; letter-spacing: .26em;
    color: rgba(245,237,224,.45);
    align-self: center;
  }
  .menu-list .meta{
    font-family: var(--mono);
    font-style: normal; font-weight: 500;
    font-size: 10px; letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(245,237,224,.45);
    align-self: center;
    text-align: right;
  }
  .menu-foot{
    margin-top: auto;
    padding-top: 32px;
    border-top: 1px solid rgba(245,237,224,.12);
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: rgba(245,237,224,.55);
    line-height: 1.7;
  }
  .menu-foot strong{
    display: block;
    font-family: var(--display); font-style: italic; font-weight: 700;
    font-size: 14px;
    color: var(--paper-on-dark);
    letter-spacing: .04em;
    margin-bottom: 6px;
    text-transform: uppercase;
  }

  /* ========== HERO ========== */
  .hero{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
      radial-gradient(ellipse 80% 60% at 50% 70%, #c79a5e 0%, #8c5a26 35%, #3d2410 75%, #0d141d 100%);
    isolation: isolate;
  }
  .hero::before{
    /* sky/atmosphere darkening for text legibility */
    content:""; position: absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(13,20,29,.45) 0%, rgba(13,20,29,.05) 30%, rgba(13,20,29,.15) 60%, rgba(13,20,29,.65) 100%),
      linear-gradient(90deg, rgba(13,20,29,.55) 0%, transparent 45%);
    z-index: 3;
    pointer-events: none;
  }
  .hero::after{
    /* vignette only */
    content:""; position: absolute; inset:0; z-index: 4;
    background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(13,20,29,.55) 100%);
    pointer-events: none;
  }
  .hero-bike{
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 2;
    filter: contrast(1.05) saturate(1.05);
    animation: heroBreath 24s ease-in-out infinite alternate;
    transform-origin: 60% 55%;
    /* Decorative — never block the user from scrolling/dragging the page through it */
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
  }
  @keyframes heroBreath{
    0%   { transform: scale(1.04) translate3d(0,0,0); filter: contrast(1.05) saturate(1.05) brightness(1); }
    50%  { transform: scale(1.10) translate3d(-1.2%, -0.6%, 0); filter: contrast(1.07) saturate(1.10) brightness(1.03); }
    100% { transform: scale(1.06) translate3d(0.6%, 0.2%, 0); filter: contrast(1.05) saturate(1.05) brightness(1); }
  }
  .hero::after{
    /* atmospheric flicker */
    animation: heroFlicker 7s ease-in-out infinite;
  }
  @keyframes heroFlicker{
    0%, 100% { opacity: 1 }
    50%      { opacity: 0.92 }
  }
  .dust-trail{
    position: absolute;
    left: 0; right: 30%;
    bottom: 28%;
    height: 2px;
    border-bottom: 1px dashed rgba(26,20,16,.45);
    transform: rotate(-4deg);
    z-index: 3;
  }
  .corner-tick{
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--paper);
    z-index: 5;
  }
  .corner-tick.tl{ top: 38%; left: 8% }
  .corner-tick.br{ bottom: 30%; right: 14% }
  .corner-tick.bl{ bottom: 12%; left: 14% }

  .hero-content{
    position: relative; z-index: 10;
    padding: 180px 56px 0;
  }
  .hero h1{
    margin: 0;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 132px;
    line-height: .88;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    max-width: 880px;
    color: var(--paper);
    text-shadow: 0 6px 30px rgba(0,0,0,.4);
  }
  .hero h1{ color: #ffffff; }
  .hero h1 .ac{ color: var(--brick) }
  .hero-coords{
    position: absolute;
    left: 56px; bottom: 92px;
    z-index: 12;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    color: rgba(26,20,16,.7);
  }
  .hero-coords::before{
    content:""; display:inline-block;
    width: 9px; height: 9px;
    border: 1px solid var(--paper);
    margin-right: 14px;
    vertical-align: middle;
  }

  /* yellow ticket replaced with brick ticket */
  .hero-ticket{
    position: absolute;
    right: 56px; bottom: 75px;
    z-index: 12;
    background: var(--brick);
    color: var(--paper-on-dark);
    display: grid;
    grid-template-columns: auto 1fr;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.4);
    z-index: 99999;
  }
  .hero-ticket .stub{
    background: rgba(0,0,0,.18);
    padding: 16px 14px;
    border-right: 1px dashed rgba(255,255,255,.25);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .26em;
    color: rgba(255,255,255,.95);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-transform: uppercase;
  }
  .hero-ticket .body{
    padding: 14px 22px 16px;
    min-width: 280px;
  }
  .hero-ticket .dates{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    margin-bottom: 4px;
    color: rgba(255,255,255,.95);
  }
  .hero-ticket h2{
    margin: 0 0 14px;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 32px; line-height: 1;
    text-transform: uppercase;
    letter-spacing: .01em;
  }
  .hero-ticket .countdown{
    display:grid;
    grid-template-columns: auto repeat(3, 1fr);
    gap: 10px;
    align-items: end;
  }
  .hero-ticket .next{
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .22em;
    color: rgba(255,255,255,.85);
    border-right: 1px dashed rgba(255,255,255,.4);
    padding-right: 10px;
    text-transform: uppercase;
    line-height: 1.5;
  }
  .hero-ticket .cd-cell{ text-align: center }
  .hero-ticket .cd-cell .l{
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .2em;
    color: rgba(255,255,255,.85);
    text-transform: uppercase;
  }
  .hero-ticket .cd-cell .v{
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 28px; line-height: 1;
  }

  .hero-edge-bot{
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 55px;
    background: url("/assets/edge-bottom-sand.webp") bottom/100% 100% no-repeat;
    pointer-events: none; z-index: 14;
  }
  /* ========== SECTION COMMON ========== */
  .section{
    padding: 140px 56px;
    position: relative;
    isolation: isolate;
    overflow: hidden;              /* clip watermark + topo overflow inside the section */
  }
  /* topo backdrop — only on select sections, behind no primary content */
  .section.with-topo::before{
    content:""; position: absolute; inset: 0;
    background-image: url("/assets/topo.png");
    /* Tile the contour-line pattern at its native size so it reads as
       a continuous topo map regardless of section height/width — instead
       of stretching one copy across the whole card. */
    background-size: auto;
    background-repeat: repeat;
    background-position: top left;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: multiply;
  }
  .section > *{ position: relative; z-index: 1; }
  /* topo also on specs/viajes/join (they extend .section) and odometer/footer */
  .odometer-band, .footer{ position: relative; isolation: isolate; }
  .footer::before{
    content:""; position: absolute; inset: 0;
    background-image: url("/assets/topo.png");
    background-size: auto;
    background-repeat: repeat;
    background-position: top left;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: multiply;
  }
  .odometer-band > *, .footer > *{ position: relative; z-index: 1; }
  .section-eyebrow{
    font-family: var(--mono);
    font-size: 11px; letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--brick);
    display: inline-flex; align-items: center; gap: 14px;
    margin-bottom: 18px;
  }
  .section-eyebrow::before{
    content:""; width: 28px; height: 1px; background: var(--brick);
  }
  h2.section-title{
    margin: 0;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 84px; line-height: .92;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--paper);
  }
  h2.section-title em{
    font-style: italic; color: var(--brick);
    font-family: var(--display); font-weight: 800;
  }
  .section-meta{
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .section-head{
    display:grid;
    grid-template-columns: 1fr auto;
    gap: 56px;
    align-items: end;
    margin-bottom: 80px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--rule);
  }

  /* big watermark in section bg */
  .watermark{
    position: absolute;
    bottom: 24px; right: -30px;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 240px;
    letter-spacing: 0.02em;
    color: rgba(26,20,16,.06);
    pointer-events: none;
    line-height: .8;
    text-transform: uppercase;
  }

  /* ========== STRIP STAGE NUM ========== */
  .stage-strip{
    display:flex; align-items: center; gap: 14px;
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 10px; letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .stage-strip .num{
    color: var(--brick); font-weight: 600;
  }

  /* ========== EL MITO ========== */
  .mito-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  .mito-body p{
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(26,20,16,.78);
    text-wrap: pretty;
    max-width: 56ch;
  }
  .mito-body p:first-of-type::first-letter{
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 96px; float: left;
    line-height: .82; margin: 6px 14px -4px 0;
    color: var(--brick);
  }
  .mito-pull{
    margin: 40px 0 0;
    padding: 28px 0 28px 28px;
    border-left: 4px solid var(--brick);
    font-family: var(--display);
    font-style: italic; font-weight: 700;
    font-size: 26px; line-height: 1.25;
    letter-spacing: 0;
    color: var(--paper);
  }
  .mito-pull cite{
    display: block; margin-top: 18px;
    font-family: var(--mono);
    font-style: normal;
    font-size: 10px; letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* timeline (Dakar history) */
  .timeline{
    position: relative;
    padding-left: 28px;
    border-left: 1px dashed rgba(26,20,16,.25);
  }
  .tl-item{
    position: relative;
    padding: 0 0 32px 24px;
  }
  .tl-item::before{
    content:""; position: absolute;
    left: -34px; top: 8px;
    width: 11px; height: 11px;
    background: var(--brick);
  }
  .tl-item.b::before{ background: var(--navy) }
  .tl-item.s::before{ background: var(--sand) }
  .tl-item .yr{
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 30px; letter-spacing: 0.01em;
    color: var(--paper);
    margin-bottom: 6px;
    line-height: 1;
  }
  .tl-item .yr em{ color: var(--brick); font-style: italic }
  .tl-item h3,
  .tl-item h4{
    margin: 0 0 6px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .02em;
    text-transform: uppercase;
  }
  .tl-item p{
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(26,20,16,.65);
    max-width: 44ch;
  }

  /* ========== FULL-BLEED IMAGE BAND ========== */
  .image-band{
    position: relative;
    height: 580px;
    overflow: hidden;
    background:
      radial-gradient(ellipse 90% 70% at 50% 60%, #d6a76b 0%, #a06a2a 35%, #5a3614 75%, #20120a 100%);
  }
  .image-band::before{
    content:""; position:absolute; inset:0;
    background-image: url("/assets/topo.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    mix-blend-mode: overlay;
  }
  .image-band::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(13,20,29,.6) 100%);
    z-index: 2;
  }
  .image-band .edge-top, .image-band .edge-bot{
    position: absolute; left: 0; right: 0;
    height: 130px;
    pointer-events: none; z-index: 4;
  }
  /* Use the sand PNG as a MASK and paint with the page-supplied colour
     variable, so the edge fades into whatever section sits next to the
     band (the previous rule used `background: url(...)` which baked the
     PNG's pixel colour in and ignored --edge-top-color / --edge-bot-color
     entirely — that's why the crossover never matched the next section). */
  .image-band .edge-top{
    top: 0;
    -webkit-mask: url("/assets/edge-top-sand.webp") top/100% 100% no-repeat;
            mask: url("/assets/edge-top-sand.webp") top/100% 100% no-repeat;
    background-color: var(--edge-top-color, var(--night));
    background-image: none;
  }
  .image-band .edge-bot{
    bottom: 0;
    -webkit-mask: url("/assets/edge-bottom-sand.webp") bottom/100% 100% no-repeat;
            mask: url("/assets/edge-bottom-sand.webp") bottom/100% 100% no-repeat;
    background-color: var(--edge-bot-color, var(--night));
    background-image: none;
  }
  /* Banner photo inside an image-band: fill the band like a background-cover image
     regardless of the photo's intrinsic size. Overrides any inline margin/width hacks. */
  .image-band > img{
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .image-band .quote{
    position: absolute; left: 56px; right: 56px; bottom: 155px;
    z-index: 6;
    font-family: var(--display);
    font-style: italic; font-weight: 700;
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--paper);
    max-width: 18ch;
    text-shadow: 0 4px 20px rgba(0,0,0,.5);
    color:#fff;
  }
  .image-band .quote em{ color: var(--brick); font-style: italic }
  .image-band .ib-meta{
    position: absolute; top: 32px; left: 56px;
    z-index: 6;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .26em; text-transform: uppercase;
    color: rgba(26,20,16,.7);
  }
  .image-band .ib-meta::before{
    content:""; display:inline-block;
    width: 8px; height: 8px;
    border: 1px solid var(--paper);
    margin-right: 12px; vertical-align: middle;
  }

  /* ========== SPECS ========== */
  .specs-section{ background: var(--night-2) }
  .specs-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--rule);
    background: var(--night-3);
  }
  .spec-col{
    padding: 36px 36px 32px;
    position: relative;
  }
  .spec-col + .spec-col{ border-left: 1px solid var(--rule) }
  .spec-col .head{
    display:flex; align-items: baseline; justify-content: space-between;
    padding-bottom: 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--rule);
  }
  .spec-col .head .stamp{
    width: 14px; height: 14px;
  }
  .spec-col.r .head .stamp{ background: var(--brick) }
  .spec-col.b .head .stamp{ background: var(--navy-soft) }
  .spec-col .head .name{
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 42px; letter-spacing: 0.01em;
    text-transform: uppercase; line-height: 1;
    flex:1; margin: 0 16px;
  }
  .spec-col .head .yrs{
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted); text-align: right;
  }
  .spec-list{ margin: 0; padding: 0; list-style: none }
  .spec-list li{
    display:grid; grid-template-columns: 1fr auto;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(26,20,16,.08);
    gap: 16px;
  }
  .spec-list li:last-child{ border-bottom: none }
  .spec-list .k{
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted);
  }
  .spec-list .v{
    font-family: var(--display); font-style: italic; font-weight: 700;
    font-size: 18px; letter-spacing: .01em;
    color: var(--paper); text-align: right;
  }
  .spec-list .v em{
    font-family: var(--mono); font-size: 11px;
    font-style: normal; color: var(--muted);
    margin-left: 4px; letter-spacing: .04em;
  }
  .spec-col .footer-note{
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
  }

  /* ========== LOGBOOK ========== */
  .logbook-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .logbook-entry{
    background: var(--night-2);
    border: 1px solid var(--rule);
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease;
  }
  .logbook-entry:hover{
    transform: translateY(-4px);
    border-color: var(--brick);
  }
  .logbook-entry .photo{
    aspect-ratio: 4/3;
    position: relative;
    background: linear-gradient(135deg, #d6a76b 0%, #a06a2a 55%, #3d2410 100%);
    overflow: hidden;
  }
  .logbook-entry:nth-child(2) .photo{
    background: linear-gradient(135deg, #6b7c8a 0%, #3d4a55 60%, #1a2026 100%);
  }
  .logbook-entry:nth-child(3) .photo{
    background: linear-gradient(135deg, #c89b6b 0%, #7c4f25 55%, #2c1d10 100%);
  }
  .logbook-entry .photo::before{
    content: "FOTO " attr(data-slot);
    position: absolute; inset: 14px;
    border: 1px dashed rgba(26,20,16,.4);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .25em; color: rgba(26,20,16,.7);
    z-index: 2;
    pointer-events: none;
  }
  .logbook-entry .photo::after{
    content:""; position:absolute; inset:0;
    background-image:
      radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(13,20,29,.5) 100%),
      url("/assets/topo.png");
    background-size: 100% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
  }
  .logbook-entry .stamp-date{
    position: absolute; bottom: 14px; left: 14px;
    z-index: 4;
    background: var(--brick);
    color: var(--paper-on-dark);
    padding: 5px 9px;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
  }
  .logbook-entry .body{
    padding: 24px 26px 28px;
  }
  .logbook-entry .meta{
    display:flex; justify-content: space-between;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(26,20,16,.1);
  }
  .logbook-entry h3{
    margin: 0 0 12px;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 28px; line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .logbook-entry p{
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(26,20,16,.7);
  }
  .logbook-entry .footer{
    display:flex; justify-content: space-between;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--brick);
    padding-top: 14px;
    border-top: 1px solid var(--rule);
  }

  /* ========== ODOMETER ========== */
  .odometer-band{
    background: var(--night-2);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 60px 56px;
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 56px;
  }
  .odometer-band .left, .odometer-band .right{
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted); line-height: 1.7;
  }
  .odometer-band .right{ text-align: right }
  .odometer-band strong{
    display:block;
    font-family: var(--display);
    font-weight: 700; font-style: italic;
    font-size: 16px; letter-spacing: .04em;
    color: var(--paper);
    margin-bottom: 6px;
    text-transform: uppercase;
  }
  .odo{
    display:flex;
    border: 1px solid var(--rule);
    background: var(--night-3);
  }
  .odo .digit{
    padding: 18px 16px;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 56px; line-height: 1;
    color: var(--paper);
    border-right: 1px dashed rgba(26,20,16,.1);
    min-width: 60px; text-align: center;
  }
  .odo .digit:last-child{ border-right: none }
  .odo .digit.km{
    background: var(--brick);
    color: var(--paper-on-dark);
    font-size: 22px;
    padding: 18px 14px;
    display:flex; align-items: center;
    letter-spacing: .14em;
  }

  /* ========== RUTAS ========== */
  .rutas-grid{
    display:grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
  }
  .map-frame{
    position: relative;
    background: var(--night-2);
    border: 1px solid var(--rule);
    aspect-ratio: 1 / 1;
    padding: 24px;
    overflow: hidden;
  }
  .map-frame .meta{
    position: absolute; top: 16px; left: 22px;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
  }
  .map-frame .meta-r{
    position: absolute; top: 16px; right: 22px;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
  }
  .iberia{ width: 100%; height: 100%; }
  .map-frame .compass{
    position: absolute; bottom: 18px; right: 18px;
    width: 44px; height: 44px; opacity: .7;
  }
  .map-frame .legend{
    position: absolute; bottom: 18px; left: 22px;
    display:flex; gap: 18px;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted);
  }
  .map-frame .legend .swatch{
    display:inline-block; width: 9px; height: 9px;
    margin-right: 6px; vertical-align: middle;
  }
  .map-frame .legend .s1{ background: var(--brick) }
  .map-frame .legend .s2{ background: var(--paper) }

  .rutas-list{
    display:flex; flex-direction: column; gap: 0;
    border-top: 1px solid var(--rule);
  }
  .ruta{
    display:grid;
    grid-template-columns: 96px 1fr auto;
    gap: 24px;
    padding: 22px 4px;
    border-bottom: 1px solid var(--rule);
    text-decoration: none; color: inherit;
    align-items: center;
    transition: background .25s ease, padding-left .25s ease;
  }
  .ruta:hover{ background: var(--night-2); padding-left: 16px; }
  .ruta .date{
    font-family: var(--display);
    font-style: italic; font-weight: 700;
    font-size: 13px; letter-spacing: .14em;
    color: var(--brick);
    text-transform: uppercase;
    line-height: 1.3;
  }
  .ruta .date .day{
    display:block;
    font-size: 38px; line-height: 1;
    color: var(--paper);
    letter-spacing: 0.01em;
  }
  .ruta .info h3,
  .ruta .info h4{
    margin: 0 0 4px;
    font-family: var(--display);
    font-style: italic; font-weight: 700;
    font-size: 22px; letter-spacing: 0.01em;
    text-transform: uppercase;
  }
  .ruta .info p{
    margin: 0;
    font-size: 13px; line-height: 1.5;
    color: var(--muted);
  }
  .ruta .right{
    text-align: right;
    font-family: var(--mono); font-size: 9px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
    line-height: 1.6;
  }
  .ruta .right .km{
    display:block;
    font-family: var(--display);
    font-style: italic; font-weight: 700;
    font-size: 16px;
    color: var(--paper);
    margin-bottom: 2px;
  }

  /* ========== VIAJES ========== */
  .viajes-section{ background: var(--night-2) }
  .viajes-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  .viaje{
    background: var(--night-2);
    border: 1px solid var(--rule);
    overflow: hidden;
    display:flex; flex-direction: column;
  }
  .viaje .viaje-img{
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
  }
  .viaje .viaje-img.v1{ background: linear-gradient(135deg, #d6a76b 0%, #a06a2a 55%, #3d2410 100%) }
  .viaje .viaje-img.v2{ background: linear-gradient(135deg, #7e95ad 0%, #344c6c 55%, #0f1828 100%) }
  .viaje .viaje-img.v3{ background: linear-gradient(135deg, #c89866 0%, #7e5022 60%, #2a1b0c 100%) }
  .viaje .viaje-img.v4{ background: linear-gradient(135deg, #b88158 0%, #5a3618 60%, #1a0f06 100%) }
  .viaje .viaje-img::before{
    content: "FOTO " attr(data-slot);
    position: absolute; inset: 14px;
    border: 1px dashed rgba(26,20,16,.4);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .25em; color: rgba(26,20,16,.65);
    z-index: 2;
    pointer-events: none;
  }
  .viaje .viaje-img::after{
    content:""; position:absolute; inset:0;
    background-image:
      radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(13,20,29,.55) 100%),
      url("/assets/topo.png");
    background-size: 100% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
  }
  /* When a real photo URL is set inline, hide the FOTO placeholder label.
     Two selectors here: the legacy `style="background-image:..."` (still
     used by some templates) and the modern `.has-photo` class set when
     we render a lazy <img.card-img> inside the placeholder. */
  .viaje .viaje-img[style*="background-image"]::before,
  .logbook-entry .photo[style*="background-image"]::before,
  .garage-card[style*="background-image"]::before,
  .viaje .viaje-img.has-photo::before,
  .logbook-entry .photo.has-photo::before{
    display: none;
  }
  /* And dim the topo overlay so the photo reads cleanly */
  .viaje .viaje-img[style*="background-image"]::after,
  .logbook-entry .photo[style*="background-image"]::after,
  .viaje .viaje-img.has-photo::after,
  .logbook-entry .photo.has-photo::after{
    background-image:
      linear-gradient(180deg, transparent 40%, rgba(13,20,29,.45) 100%),
      radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(13,20,29,.35) 100%);
    background-size: 100% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
  }
  /* Lazy-loaded card image — sits underneath the topo/gradient overlay
     (which is in the ::after pseudo-element with the default stacking).
     object-fit cover so any aspect-ratio source fills the slot. */
  .viaje .viaje-img .card-img,
  .logbook-entry .photo .card-img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
    z-index: 1;
  }
  /* The topo/gradient overlay must sit above the photo for legibility */
  .viaje .viaje-img.has-photo::after,
  .logbook-entry .photo.has-photo::after{
    z-index: 2;
  }
  /* Tag chips (top-left "Expedición", top-right "11 días", price) need to
     sit above both the photo and the overlay. */
  .viaje .viaje-img > .tag-tl,
  .viaje .viaje-img > .tag-tr,
  .viaje .viaje-img > .price-tag,
  .logbook-entry .photo > .stamp-date{
    position: relative; z-index: 3;
  }
  /* Garage card with a real photo: cover + add bottom shade for legible name/bike text */
  .garage-card[style*="background-image"]{
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: inset 0 -120px 80px -40px rgba(13,20,29,.65);
  }
  .viaje .tag-tl, .viaje .tag-tr{
    position: absolute; top: 16px; z-index: 4;
    /* Light text on a dark scrim so the pills stay legible over any
       photo content (sky, sand, dunes, etc.). */
    background: rgba(13,20,29,.78);
    color: #fff8e7;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 5px 10px;
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
  }
  .viaje .tag-tl{
    left: 16px;
    /* Brick is the brand accent — same livery as the price tag below.
       Keep the cream text from above so it pops against the navy chip. */
    background: var(--brick);
  }
  .viaje .tag-tr{ right: 16px; }
  .viaje .price-tag{
    position: absolute; bottom: 16px; right: 16px;
    z-index: 6;
    background: var(--brick);
    color: var(--paper-on-dark);
    padding: 10px 14px;
    text-align: right;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
  }
  .viaje .price-tag em{
    display:block;
    font-family: var(--mono); font-size: 9px;
    letter-spacing: .22em; text-transform: uppercase;
    font-style: normal;
    color: rgba(255,255,255,.85);
    margin-bottom: 2px;
  }
  .viaje .price-tag strong{
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 26px; letter-spacing: 0.01em;
    line-height: 1;
  }
  .viaje-body{
    padding: 28px 28px 28px;
    display:flex; flex-direction: column; flex: 1;
  }
  .viaje-meta{
    display:flex; gap: 10px; align-items: center;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
  }
  .viaje-meta .sep{ color: var(--brick) }
  .viaje-body h3{
    margin: 0 0 14px;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 36px; line-height: .95;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .viaje-body p{
    margin: 0 0 22px;
    font-size: 14px; line-height: 1.6;
    color: rgba(26,20,16,.7);
  }
  .viaje-stats{
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 0;
    border-top: 1px dashed rgba(26,20,16,.1);
    border-bottom: 1px dashed rgba(26,20,16,.1);
    margin-bottom: 22px;
  }
  .viaje-stats .k{
    font-family: var(--mono); font-size: 9px;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .viaje-stats .v{
    font-family: var(--display);
    font-style: italic; font-weight: 700;
    font-size: 18px; letter-spacing: .04em;
    color: var(--paper);
  }
  .viaje-stats .v em{
    font-family: var(--mono); font-size: 10px;
    font-style: normal; color: var(--muted);
    margin-left: 2px;
  }
  .viaje-foot{
    display:flex; gap: 12px;
    margin-top: auto;
  }
  .btn-ghost{
    flex: 1;
    text-align: center;
    padding: 14px 18px;
    border: 1px solid rgba(26,20,16,.25);
    color: var(--paper);
    text-decoration: none;
    font-family: var(--display);
    font-style: italic; font-weight: 700;
    font-size: 13px; letter-spacing: .18em;
    text-transform: uppercase;
  }
  .btn-ghost:hover{ background: var(--navy); border-color: var(--navy); color: var(--brick); }
  .btn-primary{
    flex: 1;
    display:inline-flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    background: var(--brick);
    color: var(--paper-on-dark);
    text-decoration: none;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 13px; letter-spacing: .18em;
    text-transform: uppercase;
  }
  .btn-primary:hover{ background: var(--navy); color: var(--brick); }
  .viajes-foot{
    display:grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    margin-top: 56px;
    border: 1px solid var(--rule);
    background: var(--night-3);
  }
  .vf-item{
    padding: 24px 28px;
    border-right: 1px solid var(--rule);
    font-size: 13px; line-height: 1.55;
    color: rgba(26,20,16,.7);
  }
  .vf-item:last-child{ border-right: none }
  .vf-item strong{
    display:block;
    font-family: var(--display);
    font-style: italic; font-weight: 700;
    color: var(--paper);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
    font-size: 15px;
  }

  /* ========== FORO ========== */
  .foro-section{ background: var(--night-2) }
  .foro-grid{
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 56px;
  }
  .foro-tabs{
    display:flex; gap: 6px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 28px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .foro-tabs::-webkit-scrollbar{ display: none }
  .foro-tab{
    background: transparent;
    border: none;
    color: var(--muted);
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .22em; text-transform: uppercase;
    padding: 14px 18px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
  }
  .foro-tab:hover{ color: var(--paper) }
  .foro-tab.active{
    color: var(--paper);
    border-bottom-color: var(--brick);
  }
  .thread{
    /* `position: relative` is the anchor for the stretched-link pseudo-
       element below — clicking anywhere on the card navigates to the
       thread, while inner links (author profile) remain clickable thanks
       to their own z-index. Each thread reads as a card now (filled
       background, subtle border) so it stays legible over the topo
       backdrop on the foro list. */
    position: relative;
    display:grid;
    grid-template-columns: 56px 1fr;
    gap: 22px;
    padding: 22px 22px;
    margin-bottom: 12px;
    background: var(--night-2);
    border: 1px solid var(--rule);
    transition: background .2s ease, border-color .2s ease;
    cursor: pointer;
  }
  .thread:last-child{ margin-bottom: 0; }
  .thread:hover{ background: var(--night-3); border-color: var(--rule-strong); }
  /* Stretched link: the title's <a> covers the whole card so clicking
     anywhere takes you to the thread. */
  .thread h3 a::before,
  .thread h4 a::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  /* Keep nested clickables above the stretched link. */
  .thread .thread-meta a,
  .thread .thread-meta .compatible-chip,
  .thread .like-form,
  .thread .like-btn,
  .thread .last-reply a{
    position: relative;
    z-index: 1;
  }
  /* The h4 link itself needs to sit above its own pseudo-element so the
     hover/focus styles still register on the title text. */
  .thread h3 a,
  .thread h4 a{ position: relative; }
  .thread.pinned{
    background: var(--brick);            /* navy (livery) */
    border-left: 4px solid #FFD100;      /* yellow accent stripe */
    padding-left: 20px;
    color: #FFD100;
  }
  .thread.pinned:hover{ background: #002a6b; }
  .thread.pinned h3,
  .thread.pinned h3 a,
  .thread.pinned h4,
  .thread.pinned h4 a{ color: #FFD100; }
  .thread.pinned p{ color: rgba(255,255,255,.82); }
  .thread.pinned .thread-meta{ color: rgba(255,209,0,.78); }
  .thread.pinned .thread-meta .cat{ color: #FFD100; }
  .thread.pinned .thread-meta .pin{ color: #FFD100; }
  .thread.pinned .thread-meta .sep{ color: rgba(255,209,0,.4); }
  .thread.pinned .thread-footer{ color: rgba(255,209,0,.7); }
  .thread.pinned .last-reply{ color: rgba(255,255,255,.7); }
  .thread.pinned .r-pill{
    border-color: rgba(255,209,0,.45);
    background: rgba(255,209,0,.06);
    color: rgba(255,209,0,.92);
  }
  .thread.pinned .r-pill.r-comments{ color: rgba(255,209,0,.92); }
  .thread.pinned .thread-avatar{
    border-color: rgba(255,209,0,.45);
  }
  .thread-avatar{
    width: 48px; height: 48px;
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    font-family: var(--display); font-style: italic;
    font-size: 18px; font-weight: 700;
    color: var(--paper-on-dark);
    border: 1px solid var(--rule);
    flex-shrink: 0;
  }
  .thread-meta{
    display:flex; align-items:center; flex-wrap: wrap; gap: 8px;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .thread-meta .cat{ color: var(--brick) }
  .thread-meta .pin{ color: var(--brick) }
  .thread-meta .sep{ color: var(--rule) }
  .thread h3,
  .thread h4{
    margin: 0 0 10px;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 28px; line-height: 1.1;
    color: var(--paper);
    text-transform: none;
    letter-spacing: -0.005em;
    text-wrap: balance;
  }
  .thread p{
    margin: 0 0 14px;
    font-size: 14px; line-height: 1.6;
    color: rgba(26,20,16,.72);
    max-width: 60ch;
  }
  /* `.thread-body` is the positioning context for both the price badge
     (top-right corner) and the absolutely-anchored last-reply chip
     (bottom-right corner) — keeps them in identical visual slots on
     every card, regardless of how many reaction pills wrap. */
  .thread-body{
    position: relative;
    padding-bottom: 28px; /* reserve room for the absolute last-reply line */
    min-width: 0;
  }
  .thread-footer{
    /* Just the reactions row now — last-reply is pulled out of flow. */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 8px;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted);
  }
  /* Pin "Última · X — hace Y" to the bottom-right of the card body so its
     visual position is identical across all cards on the list. */
  .thread-body > .thread-footer > .last-reply,
  .thread .last-reply{
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 60%;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .reactions{ display:flex; gap: 8px; flex-wrap: wrap }
  .r-pill{
    display:inline-flex; align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--rule);
    background: rgba(255,255,255,.02);
    color: rgba(26,20,16,.85);
    border-radius: 2px;
  }
  .r-pill.r-photo{ border-color: rgba(255,209,0,.5); color: var(--brick) }
  .r-pill.r-status{ border-color: rgba(0,58,143,.5); color: #e26075 }
  .foro-more{
    margin-top: 32px;
    width: 100%;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--paper);
    padding: 18px;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .25em; text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, border-color .2s;
  }
  .foro-more:hover{ background: var(--navy); border-color: var(--navy); color: var(--brick); }

  .foro-rail{ display:flex; flex-direction: column; gap: 28px }
  .rail-block{
    background: var(--night-2);
    border: 1px solid var(--rule);
    padding: 26px 26px 28px;
  }
  .rail-block.compose{
    border-color: var(--brick);
    background:
      linear-gradient(180deg, rgba(0,58,143,.08) 0%, transparent 60%),
      var(--night-2);
  }
  .rail-head{
    display:flex; justify-content: space-between;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 1px solid var(--rule);
  }
  .rail-num{ color: var(--brick) }
  .rail-block h3,
  .rail-block h4{
    margin: 0 0 8px;
    font-family: var(--display);
    font-style: italic; font-weight: 700;
    font-size: 22px; line-height: 1.1;
    text-transform: uppercase;
  }
  .rail-block p{
    margin: 0 0 16px;
    font-size: 13px; line-height: 1.6;
    color: rgba(26,20,16,.72);
  }
  .compose-cats{
    display:flex; flex-wrap: wrap; gap: 6px;
    margin: 14px 0 18px;
  }
  .compose-cats span{
    font-family: var(--mono); font-size: 9px;
    letter-spacing: .18em; text-transform: uppercase;
    padding: 5px 9px;
    border: 1px solid var(--rule);
    color: rgba(26,20,16,.78);
    background: rgba(255,255,255,.02);
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
  }
  .compose-cats span:hover{
    background: var(--navy);
    border-color: var(--navy);
    color: var(--brick);
  }
  .compose-btn{
    width: 100%;
    background: var(--brick);
    color: var(--paper-on-dark);
    border: none;
    padding: 14px;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .22em; text-transform: uppercase;
    cursor: pointer;
    transition: background .2s;
  }
  .compose-btn:hover{ background: var(--navy); color: var(--brick); }
  .garage-card{
    aspect-ratio: 4/3;
    background: linear-gradient(135deg,#7a4a25 0%, #3d2410 60%, #0d141d 100%);
    position: relative;
    display:flex; flex-direction: column; justify-content: flex-end;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--rule);
  }
  .garage-card::before{
    content: "FOTO " attr(data-slot);
    position: absolute; inset: 12px;
    border: 1px dashed rgba(26,20,16,.4);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .25em; color: rgba(26,20,16,.7);
    pointer-events: none;
  }
  .garage-name{
    position: relative; z-index: 1;
    font-family: var(--display); font-style: italic; font-weight: 700;
    font-size: 17px; text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .garage-bike{
    position: relative; z-index: 1;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .14em; color: rgba(26,20,16,.85);
    margin-top: 4px;
  }
  .rail-link{
    display:inline-block;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--brick);
    text-decoration: none;
    border-bottom: 1px solid var(--brick);
    padding-bottom: 4px;
  }
  .top-list{ list-style: none; padding: 0; margin: 0 }
  .top-list li{
    display:grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px; align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(26,20,16,.1);
    font-size: 13px;
  }
  .top-list li:last-child{ border-bottom: none }
  .top-list .rank{
    font-family: var(--mono); color: var(--brick); font-size: 11px;
  }
  .top-list .who{ color: var(--paper) }
  .top-list .score{
    font-family: var(--mono); font-size: 10px;
    color: var(--muted); letter-spacing: .14em;
  }

  /* ========== JOIN ========== */
  .join-section{
    position: relative;
    background:
      radial-gradient(ellipse 60% 70% at 80% 50%, rgba(255,209,0,.16), transparent 60%),
      var(--night);
    overflow: hidden;
  }
  .join-section .watermark{
    color: rgba(255,209,0,.06);
  }
  .join-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .join-left p{
    font-size: 17px; line-height: 1.65;
    color: rgba(26,20,16,.78);
    max-width: 52ch;
    margin: 0 0 18px;
  }
  .join-stats{
    display:flex; gap: 36px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
  }
  .join-stats > div{
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
  }
  .join-stats .v{
    display:block;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 38px; line-height: 1;
    color: var(--paper);
    letter-spacing: 0.01em;
    margin-bottom: 6px;
  }
  .join-stats .v.r{ color: var(--brick) }

  .join-card{
    background: var(--night-2);
    border: 1px solid var(--rule);
    padding: 36px 36px 32px;
  }
  .frame-id{
    display:flex; justify-content: space-between;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 18px; margin-bottom: 24px;
    border-bottom: 1px solid var(--rule);
  }
  .frame-id .num{ color: var(--brick) }
  .join-card h3{
    margin: 0 0 6px;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 28px;
    text-transform: uppercase;
  }
  .field{ margin-bottom: 20px }
  .field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .field label{
    display:block;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .field input, .field select{
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(26,20,16,.25);
    font-family: var(--body);
    font-size: 16px;
    padding: 8px 0;
    color: var(--paper);
  }
  .field input:focus, .field select:focus{ outline: none; border-bottom-color: var(--brick) }
  .field select{ cursor: pointer }
  .field select option{ background: var(--night-2); color: var(--paper) }
  .submit{
    width: 100%;
    padding: 18px 22px;
    background: var(--brick);
    color: var(--paper-on-dark);
    border: none;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 14px; letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    display:flex; justify-content: space-between; align-items: center;
    margin-top: 12px;
  }
  .submit:hover{ background: var(--navy); color: var(--brick); }

  /* ========== FOOTER ========== */
  .footer{
    background: var(--night-2);
    border-top: 1px solid var(--rule);
    padding: 100px 56px 60px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 56px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 56px;
  }
  .footer h3,
  .footer h5{
    margin: 0 0 18px;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 18px; letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brick);
  }
  .footer-brand p{
    font-size: 14px; line-height: 1.65;
    color: rgba(26,20,16,.7);
    margin: 0 0 18px;
    max-width: 42ch;
  }
  .footer ul{
    list-style: none; margin: 0; padding: 0;
    font-size: 13px; line-height: 1.95;
    color: rgba(26,20,16,.7);
  }
  .footer ul a{ text-decoration: none; }
  .footer ul a:hover{ color: var(--brick) }

  .hermanos{
    display:grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
    background: var(--night-3);
    border: 1px solid var(--rule);
    padding: 32px 36px;
  }
  .hermanos .seal{
    width: 88px; height: 88px;
    display:flex; align-items: center; justify-content: center;
    text-align: center;
    flex-shrink: 0;
  }
  .hermanos .seal span{
    background: var(--night-2);
    color: var(--paper);
    border-radius: 50%;
    width: 64px; height: 64px;
    display:flex; align-items: center; justify-content: center;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 9px; letter-spacing: .1em;
    line-height: 1.1;
    text-transform: uppercase;
  }
  .hermanos h3,
  .hermanos h4{
    margin: 0 0 6px;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .hermanos p{
    margin: 0;
    font-size: 13px; line-height: 1.55;
    color: rgba(26,20,16,.7);
    max-width: 60ch;
  }
  .hermanos .cross{
    padding: 14px 20px;
    background: var(--navy);
    color: var(--paper); /* yellow bg needs dark text */
    text-decoration: none;
    font-family: var(--display);
    font-style: italic; font-weight: 800;
    font-size: 13px; letter-spacing: .22em;
    text-transform: uppercase;
    display:inline-flex; align-items: center; gap: 10px;
  }
  .hermanos .cross:hover{ background: var(--navy); color: var(--brick); }

  .footer-bottom{
    margin-top: 40px;
    display:flex; justify-content: space-between;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
  }
  /* ========================================
     MOBILE OPTIMIZATION
     ======================================== */
  @media (max-width: 900px){
    html, body{ overflow-x: clip; }

    .nav{ padding: 12px 14px; align-items: center; }
    .logo{ gap: 0; padding: 0; }
    .logo img{ height: clamp(40px, 13vw, 56px); }
    .logo .l1{ font-size: 13px; line-height: 1.05 }
    .logo .l2{ font-size: 8px; padding: 1px 6px }
    .menu-btn{ width: 40px; height: 40px }
    .menu-btn span{ width: 16px }

    /* MENU OVERLAY */
    .menu-overlay{ padding: 14px 18px 32px }
    .menu-head{ margin-bottom: 28px; padding-bottom: 16px }
    .menu-close{ width: 40px; height: 40px }
    .menu-close::before, .menu-close::after{ width: 16px }
    .menu-list a{
      grid-template-columns: 36px 1fr;
      gap: 14px; padding: 14px 0;
    }
    .menu-list a:hover{ padding-left: 0 }
    .menu-list .meta{ display: none }
    .menu-list .num{ font-size: 9px; letter-spacing: .2em }
    .menu-foot{ grid-template-columns: 1fr; margin-top: 28px; gap: 14px; padding-top: 20px }
    .menu-foot strong{ font-size: 13px }
    .menu-eyebrow{ font-size: 9px; letter-spacing: .2em }

    /* HERO */
    .hero{ min-height: 88svh; height: auto; padding-bottom: 0; }
    .hero-content{ padding: 110px 18px 24px; position: relative; z-index: 12; min-height: 60svh; }
    .hero h1{
      font-size: clamp(40px, 13vw, 56px);
      line-height: .9;
      max-width: 100%;
      letter-spacing: -0.02em;
      word-break: normal;
      overflow-wrap: break-word;
      hyphens: none;
    }
    .hero-coords{
      position: relative;
      left: auto; bottom: auto;
      padding: 0 18px;
      margin-top: 18px;
      font-size: 9px;
      letter-spacing: .18em;
    }
    .hero-coords::before{ width: 6px; height: 6px; margin-right: 8px }
    .hero-ticket{
      position: relative;
      right: auto; bottom: auto;
      margin: 24px 18px 24px;
      display: grid;
      grid-template-columns: auto 1fr;
      box-shadow: 0 10px 24px rgba(0,0,0,.35);
    }
    .hero-ticket .stub{
      padding: 14px 10px;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 8px;
      letter-spacing: .22em;
    }
    .hero-ticket .body{ min-width: 0; padding: 14px 16px 16px }
    .hero-ticket .dates{ font-size: 10px; letter-spacing: .18em }
    .hero-ticket h2{ font-size: 26px; line-height: .95; margin: 6px 0 12px }
    .hero-ticket .countdown{ gap: 8px; flex-wrap: wrap }
    .hero-ticket .next{ font-size: 8px }
    .hero-ticket .cd-cell .v{ font-size: 22px }
    .hero-ticket .cd-cell .l{ font-size: 8px }
    .corner-tick{ display: none }
    .dust-trail{ display: none }

    /* On mobile, hero is content-driven, image is intrinsic-fit behind */
    .hero-bike{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 60% center;
      animation: none;
      transform: none !important;
    }
    .hero::before, .hero::after{ z-index: 3; }

    /* SECTIONS */
    .section{ padding: 70px 18px }
    .section-head{
      display: block;
      margin-bottom: 36px;
    }
    .section-meta{ margin-top: 14px; font-size: 9px; letter-spacing: .18em }
    .stage-strip{
      font-size: 8px;
      letter-spacing: .14em;
      flex-wrap: wrap;
      gap: 10px;
    }
    .stage-strip > *{ display: inline-block }
    .section-eyebrow{ font-size: 9px; letter-spacing: .2em; margin-top: 10px }
    .section-title{
      font-size: clamp(30px, 8.5vw, 42px) !important;
      line-height: .94;
      margin-top: 12px;
      letter-spacing: -0.01em;
    }
    .watermark{
      font-size: 22vw;
      top: 6%;
      letter-spacing: -0.03em;
    }

    /* MITO */
    .mito-grid{ grid-template-columns: 1fr; gap: 24px }
    .mito-body p{ font-size: 14.5px; line-height: 1.55; max-width: 100% }
    .mito-body p:first-of-type::first-letter{ font-size: 48px; line-height: .8 }
    .timeline{ gap: 22px }
    .timeline::before{ left: 6px }
    .tl-item{ padding-left: 24px }
    .tl-item .yr{ font-size: 24px }
    .tl-item h3,
    .tl-item h4{ font-size: 12px; letter-spacing: .14em }
    .tl-item p{ font-size: 12.5px; line-height: 1.5 }
    .mito-pull{ font-size: 19px; line-height: 1.35; padding: 18px 0 }

    /* IMAGE BAND */
    .image-band{
      height: auto;
      min-height: 360px;     /* tight, photo-driven band on phones */
      padding: 60px 18px;
    }
    .image-band .edge-top, .image-band .edge-bot{
      height: 60px;          /* smaller torn edges so they don't dominate the small band */
    }
    .image-band .quote{
      left: 18px; right: 18px; bottom: 80px;
      font-size: clamp(34px, 10vw, 48px);
      line-height: .95;
      max-width: 100%;
    }
    .image-band .ib-meta{
      top: 18px; left: 18px;
    }
    .ib-meta{ font-size: 9px; letter-spacing: .18em }

    /* SPECS */
    .specs-grid{ grid-template-columns: 1fr }
    .spec-col{ padding: 22px 18px }
    .spec-col .head h3{ font-size: 28px }
    .spec-col .head .sub{ font-size: 10px }
    .spec-row{ font-size: 12px }
    .spec-row .label{ font-size: 10px; letter-spacing: .14em }

    /* LOGBOOK */
    .logbook-grid{ grid-template-columns: 1fr; gap: 18px }
    .logbook-entry{ padding: 22px 18px }
    .logbook-entry h3{ font-size: 20px; line-height: 1.15 }
    .logbook-entry p{ font-size: 13px; line-height: 1.5 }
    .logbook-entry .meta{ font-size: 9px }

    /* ODOMETER */
    .odometer-band{
      grid-template-columns: 1fr;
      padding: 32px 18px;
      gap: 18px;
      text-align: left;
    }
    .odo-label{ font-size: 9px; letter-spacing: .18em }
    .odo{ display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px }
    .odo .digit{ width: 32px; height: 44px; font-size: 26px; flex: 0 0 auto }

    /* RUTAS */
    .rutas-grid{ grid-template-columns: 1fr; gap: 28px }
    .map-frame{ aspect-ratio: 1/1 }
    /* RUTA card on mobile — single-column compact stack:
       [ MAY · 17 · '26 ]
       Title
       description
       ───────────
       — km · ARGUEDAS · 04·D                                              */
    .ruta{
      display: block;
      padding: 18px 4px;
      gap: 0;
    }
    .ruta:hover{ padding-left: 4px; background: var(--night-2); }
    .ruta .date{
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      font-family: var(--display);
      font-style: italic; font-weight: 700;
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--brick);
      margin: 0 0 8px;
      padding: 4px 10px;
      border: 1px solid var(--rule);
    }
    .ruta .date .day{
      display: inline;
      font-size: 18px;
      line-height: 1;
      color: var(--paper);
      letter-spacing: .01em;
      margin: 0 2px;
    }
    .ruta .info{ margin: 0 0 10px; min-width: 0; }
    .ruta .info h3,
    .ruta .info h4{
      margin: 0 0 4px;
      font-size: 15px; line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .ruta .info p{
      margin: 0;
      font-size: 12.5px; line-height: 1.45;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .ruta .right{
      text-align: left;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted);
      line-height: 1.5;
      padding-top: 10px;
      border-top: 1px dashed var(--rule);
      margin-top: 0;
    }
    .ruta .right br{ display: none; }     /* drop the desktop linebreak */
    .ruta .right .km{
      display: inline-block;
      margin: 0;
      color: var(--paper);
      font-family: var(--display);
      font-style: italic; font-weight: 700;
      font-size: 12px;
      letter-spacing: .04em;
    }
    .ruta .right .km::after{
      content: " · ";
      color: var(--brick);
      margin: 0 4px;
    }

    /* VIAJES */
    .viajes-grid{ grid-template-columns: 1fr; gap: 18px }
    .viaje-card{ padding: 0 }
    .viaje-image{ aspect-ratio: 4/3 }
    .viaje-body{ padding: 22px 18px }
    .viaje-body h3{ font-size: 24px; line-height: 1.05 }
    .viaje-body p{ font-size: 13px; line-height: 1.55 }
    .viaje-features{
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      padding: 20px 18px;
    }
    .vf-item{ font-size: 11px }
    .vf-item strong{ font-size: 16px }

    /* FORO */
    .foro-grid{ grid-template-columns: 1fr; gap: 28px; min-width: 0 }
    .foro-grid > *{ min-width: 0 }    /* let grid tracks shrink below child content size */
    .foro-threads{ min-width: 0 }
    .foro-tabs{
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      flex-wrap: nowrap;
      margin: 0 -18px 28px;             /* let tabs bleed to viewport edges so cut-off feels intentional */
      padding: 0 18px;
      scrollbar-width: none;
    }
    .foro-tabs::-webkit-scrollbar{ display: none }
    .foro-tab{ padding: 10px 12px; font-size: 9px; white-space: nowrap; flex: 0 0 auto }
    .thread{
      grid-template-columns: 36px minmax(0, 1fr);  /* minmax(0,1fr) — track may shrink below content */
      gap: 12px;
      padding: 16px 14px;
      margin-bottom: 10px;
      min-width: 0;
    }
    .thread.pinned{ padding-left: 12px }
    .thread-avatar{ width: 36px; height: 36px; font-size: 13px }
    .thread-body{ min-width: 0 }
    .thread h3,
    .thread h4{
      font-size: 19px; line-height: 1.18;
      overflow-wrap: anywhere; word-break: break-word;
    }
    .thread p{
      font-size: 12.5px; line-height: 1.45;
      max-width: 100%;                  /* override desktop's 60ch */
      overflow-wrap: anywhere; word-break: break-word;
    }
    .thread-meta{ font-size: 9px; gap: 6px; flex-wrap: wrap; min-width: 0 }
    .thread-meta > *{ min-width: 0 }
    .thread-footer{ font-size: 9px; flex-wrap: wrap; gap: 6px 12px; min-width: 0 }
    .thread-footer > *{ min-width: 0 }
    .reactions{ flex-wrap: wrap; min-width: 0 }
    /* Mobile keeps the absolute bottom-right anchor so position stays
       identical; smaller font + tighter max-width so it doesn't crowd
       the reactions row. */
    .thread .last-reply{
      font-size: 9px;
      max-width: 55%;
    }
    /* Make sure reactions never run past the right-side last-reply chip. */
    .thread-body{ padding-bottom: 24px; }
    .r-pill{ padding: 3px 7px; font-size: 9px }
    /* RAIL (compose / garaje del mes / top socios) */
    .foro-rail{ min-width: 0 }
    .rail-block{ padding: 22px 18px; min-width: 0 }    /* was 26px on desktop */
    .rail-block h3,
    .rail-block h4{ font-size: 18px; line-height: 1.15; overflow-wrap: anywhere }
    .rail-block p{ font-size: 12.5px; line-height: 1.5; max-width: 100% }
    .compose-cats{ gap: 5px; margin: 12px 0 14px }
    .compose-cats span{ font-size: 8px; padding: 4px 7px; letter-spacing: .14em }
    .top-list li{ font-size: 12px; gap: 10px }
    .top-list .who{ overflow-wrap: anywhere; min-width: 0 }
    .garage-card{ padding: 14px }
    .garage-name{ font-size: 15px }
    .garage-bike{ font-size: 9px }

    /* JOIN */
    .join-grid{ grid-template-columns: 1fr; gap: 28px }
    .join-card{ padding: 26px 20px }
    .join-card h3{ font-size: 22px }
    .field-row{ grid-template-columns: 1fr; gap: 0 }
    .field input, .field select, .field textarea{ font-size: 16px }

    /* FOOTER */
    .footer{ padding: 60px 18px 32px }
    .footer-grid{ grid-template-columns: 1fr; gap: 32px }
    .hermanos{
      grid-template-columns: 1fr;
      text-align: left;
      gap: 14px;
      padding: 22px 18px;
    }
    .footer-bottom{
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      font-size: 9px;
    }
  }

  @media (max-width: 480px){
    .hero h1{ font-size: clamp(36px, 12vw, 46px) }
    .section-title{ font-size: clamp(26px, 8vw, 34px) !important }
    .image-band .quote{ font-size: clamp(28px, 9vw, 38px) }
    .watermark{ font-size: 24vw }
    .hero-ticket h2{ font-size: 22px }
    .hero-ticket .cd-cell .v{ font-size: 19px }
    .mito-pull{ font-size: 17px }
    .stage-strip{ font-size: 7.5px }
  }

  /* ========== EVENT BAR (sticky bottom — inner pages: foro / hilo / perfil / msg) ==========
     Shared with tenere.php's hero-ticket -> event-bar swap. On inner pages the bar is
     simply visible by default (no hero-ticket to swap with). tenere.php has its own
     inline <style> that hides it initially and toggles `is-visible` on scroll, which
     overrides these rules due to source order. */
  .event-bar{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: grid;
    grid-template-columns: 8px auto 1fr auto auto;
    align-items: stretch;
    background: var(--brick);
    color: var(--paper-on-dark);
    box-shadow: 0 -10px 30px rgba(0,0,0,.18);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .event-bar .stripe{ background: #FFCC00; }
  .event-bar .stub{
    display: flex; align-items: center; padding: 0 22px;
    background: rgba(0,0,0,.18);
    font-family: var(--mono); font-size: 11px; letter-spacing: .26em;
    color: rgba(255,255,255,.95);
    text-transform: uppercase;
    border-right: 1px dashed rgba(255,255,255,.25);
  }
  .event-bar .title{
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    padding: 12px 28px;
    border-right: 1px dashed rgba(255,255,255,.25);
    min-width: 0;
  }
  .event-bar .title .dates{
    font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
    color: rgba(255,255,255,.85);
  }
  .event-bar .title strong{
    font-family: var(--display); font-weight: 800; font-style: italic;
    font-size: 22px; line-height: 1; letter-spacing: .01em;
    text-transform: uppercase;
  }
  .event-bar .countdown{
    display: flex; align-items: center; gap: 22px;
    padding: 0 28px;
    border-right: 1px dashed rgba(255,255,255,.25);
  }
  .event-bar .cd{ display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .event-bar .cd .v{
    font-family: var(--display); font-weight: 800; font-style: italic;
    font-size: 24px; line-height: 1;
  }
  .event-bar .cd .l{
    font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
    color: rgba(255,255,255,.85); text-transform: uppercase;
  }
  .event-bar .cta{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 28px;
    background: #FFCC00; color: var(--paper);
    font-family: var(--display); font-weight: 800; font-style: italic;
    font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
    transition: background .2s ease, color .2s ease;
  }
  .event-bar .cta:hover{ background: var(--paper); color: #FFCC00; }
  .event-bar .cta .arr{
    font-family: var(--mono); font-style: normal; font-size: 16px; transform: translateY(-1px);
  }
  @media (max-width: 900px){
    .event-bar{ grid-template-columns: 6px auto 1fr auto; }
    .event-bar .stub{ font-size: 9px; padding: 0 12px; letter-spacing: .2em; }
    .event-bar .title{ padding: 10px 14px; gap: 3px; }
    .event-bar .title .dates{ font-size: 9px; letter-spacing: .14em; }
    .event-bar .title strong{ font-size: 15px; }
    .event-bar .countdown{ display: none; }
    .event-bar .cta{
      font-size: 12px; padding: 0 16px; letter-spacing: .1em;
      min-height: 48px;
    }
    .event-bar .cta .arr{ font-size: 14px; }
  }
  @media (max-width: 520px){
    .event-bar{ grid-template-columns: 5px 1fr auto; }
    .event-bar .stub{ display: none; }
    .event-bar .title{ padding: 9px 12px; border-right: 1px dashed rgba(255,255,255,.2); }
    .event-bar .title .dates{ font-size: 8.5px; letter-spacing: .12em; }
    .event-bar .title strong{ font-size: 14px; }
    .event-bar .cta{ font-size: 11px; padding: 0 14px; letter-spacing: .08em; }
    .event-bar .cta .arr{ display: none; }
  }