/* Bikes inherits the site's navy, teal, type and spacing. */
#bikes { border-top: 1px solid rgba(129,164,191,.12); }
.ride-intro { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.photo-button { display:block; padding:0; border:0; width:100%; background:var(--bg-2); color:var(--text); cursor:zoom-in; overflow:hidden; position:relative; border-radius:var(--radius); }
.photo-button img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .65s ease; }
.ride-cover { aspect-ratio:4/3; border:1px solid var(--line); }
.ride-cover .cover-image { object-position:50% 50%; }
.photo-hint { position:absolute; right:16px; bottom:16px; padding:8px 12px; font-size:12px; background:rgba(7,16,27,.8); border:1px solid rgba(255,255,255,.16); border-radius:8px; }
.ride-note { padding:20px 0; }
.ride-note h3 { font-size:clamp(26px,3vw,38px); line-height:1.2; letter-spacing:-.03em; margin:14px 0 18px; }
.ride-note p { color:var(--muted); line-height:1.8; max-width:390px; }
.quiet-link { display:inline-block; margin-top:12px; color:var(--text); text-decoration:none; font-size:14px; border-bottom:1px solid var(--line); padding-bottom:7px; }
.quiet-link:hover { color:var(--teal); }
.ride-moments { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:38px; scroll-margin-top:110px; }
.ride-moment { margin:0; min-width:0; }
.ride-moment .photo-button { aspect-ratio:4/3; }
.ride-moment .moment-image { object-position:50% 68%; }
.ride-moment:nth-child(3) .moment-image { object-position:50% 76%; }
.ride-moment figcaption { padding:16px 1px 0; }
.ride-moment figcaption strong,.ride-moment figcaption span { display:block; }
.ride-moment figcaption strong { font-size:15px; font-weight:650; }
.ride-moment figcaption span { color:var(--muted); font-size:13px; line-height:1.6; margin-top:5px; }
.bike-shelf { display:grid; grid-template-columns:.8fr 1.2fr; margin-top:42px; overflow:hidden; }
.bike-shelf-copy { padding:32px; align-self:center; }
.bike-shelf h3 { font-size:26px; letter-spacing:-.025em; margin:12px 0 22px; }
.bike-picker { display:flex; gap:8px; flex-wrap:wrap; }
.bike-picker button { cursor:pointer; padding:10px 15px; min-height:44px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:var(--bg-2); font:600 13px/1.3 inherit; }
.bike-picker button[aria-pressed=true] { color:var(--teal); border-color:var(--teal); background:rgba(72,221,206,.07); }
#bike-description { min-height:100px; }
#bike-description h4 { font-size:16px; margin:22px 0 8px; }
#bike-description p { color:var(--muted); line-height:1.65; margin:0; font-size:14px; max-width:320px; }
.bike-images { min-width:0; background:#0a1522; }
.bike-panel { aspect-ratio:4/3; height:100%; border-radius:0; }
.bike-panel[hidden] { display:none; }
.bike-panel .bike-image { object-fit:contain; background:#0a1522; }
.ride-archive { margin-top:26px; border-top:1px solid var(--line); }
.ride-archive summary { display:flex; justify-content:space-between; gap:20px; padding:22px 0; cursor:pointer; font-size:14px; color:var(--muted); list-style:none; }
.ride-archive summary::-webkit-details-marker { display:none; }
.ride-archive[open] summary span { transform:rotate(45deg); }
.archive-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding-bottom:12px; }
.archive-grid figure { margin:0; }
.archive-grid .photo-button { aspect-ratio:4/3; }
.archive-grid figcaption { color:var(--muted); font-size:13px; line-height:1.6; padding-top:12px; }
.montage-label { display:block; color:var(--muted); font-size:11px; }
.photo-viewer { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:14px; padding:18px; width: min(1100px,94vw); max-height:94vh; max-height:94dvh; }
.photo-viewer::backdrop { background:rgba(2,7,12,.9); }
.photo-viewer figure { margin:0; }
.photo-viewer img { display:block; width:100%; max-height:74vh; max-height:74dvh; object-fit:contain; }
.photo-viewer figcaption { padding:16px 4px 2px; line-height:1.6; color:var(--muted); font-size:14px; }
.viewer-close { display:block; margin:0 0 14px auto; min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); font:inherit; cursor:pointer; }
.reveal { transition:opacity .65s ease,transform .65s ease; }
.awaiting-reveal { opacity:0; transform:translateY(14px); }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .photo-button:hover img { transform:scale(1.025); } }
@media(prefers-reduced-motion:no-preference) { .bike-panel:not([hidden]) { animation:bikeReveal .35s ease; } @keyframes bikeReveal { from {opacity:.35} to {opacity:1} } }
@media(max-width:900px) { .ride-intro { gap:28px; } .bike-shelf-copy { padding:24px; } }
@media(max-width:700px) {
  .ride-intro,.bike-shelf { grid-template-columns:1fr; }
  .ride-intro { gap:6px; }
  .ride-cover { aspect-ratio:5/4; }
  .ride-note { padding:20px 0 4px; }
  .ride-moments { display:flex; overflow-x:auto; scroll-snap-type:x proximity; gap:16px; padding:3px 3px 16px; margin-top:24px; }
  .ride-moment { flex:0 0 85%; scroll-snap-align:start; }
  .bike-panel { aspect-ratio:4/3; }
  .archive-grid { grid-template-columns:1fr; }
  .archive-grid .photo-button { aspect-ratio:4/3; }
  .bike-shelf { margin-top:24px; }
  .nav-links { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { .awaiting-reveal { opacity:1; transform:none; } }

.bike-picker button { font-family:inherit; font-size:13px; font-weight:600; line-height:1.3; }

/* A little more depth for the original indoor touring-bike photograph. */
[data-panel="trek"] .bike-image { filter:brightness(.88) contrast(1.08); }

/* Two interests, one visual language. */
[hidden] { display:none !important; }
.view-switch { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:12px; background:rgba(5,14,24,.7); }
.view-switch button { display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); font:600 14px/1.2 inherit; padding:11px 19px; min-height:44px; cursor:pointer; transition:background .25s ease,color .25s ease,border-color .25s ease; }
.view-switch button { font-family:inherit; font-size:14px; font-weight:600; }
.view-switch button span { color:var(--muted); font:13px Consolas,monospace; }
.view-switch button[aria-selected=true] { color:var(--text); background:rgba(72,221,206,.11); border-color:rgba(72,221,206,.3); box-shadow:0 2px 14px rgba(0,0,0,.15); }
.view-switch button[aria-selected=true] span { color:var(--teal); }
.view-switch button:hover { color:var(--text); }
.bikes-view { padding-top:64px; border-top:0 !important; }
.bikes-view .section-head { margin-bottom:38px; }
.bikes-view .section-head h1 { font-size:clamp(40px,5.5vw,70px); letter-spacing:-.045em; font-weight:650; line-height:1.1; margin-top:14px; }
.ride-thought { color:var(--text) !important; font-size:clamp(18px,1.7vw,22px); line-height:1.65 !important; letter-spacing:-.02em; margin-top:24px; border-left:2px solid rgba(72,221,206,.45); padding-left:18px; }
.ride-note h3 { font-weight:600; }
.view-link { color:var(--muted); background:transparent; }
.brand { letter-spacing:.065em; }
.bike-panel .bike-image { border-radius:0; }
.nav-inner { min-height:84px; }
body[data-view=bikes] .nav-links { margin-left:auto; }
@media(min-width:901px) { .nav-inner { display:grid; grid-template-columns:1fr auto 1fr; } .view-switch { margin-left:0; } .nav-links,body[data-view=bikes] .nav-links { margin-left:0; justify-self:end; } }
@media(prefers-reduced-motion:no-preference) { [role=tabpanel]:not([hidden]) { animation:viewIn .35s ease; } @keyframes viewIn { from {opacity:.65;transform:translateY(5px)} to {opacity:1;transform:translateY(0)} } }
@media(max-width:900px) { .nav-inner { flex-wrap:wrap; gap:12px; padding:12px 0; } .view-switch { margin-left:auto; } .nav-links { width:100%; justify-content:flex-end; gap:20px; } .bikes-view { padding-top:42px; } }
@media(max-width:500px) { .brand { font-size:13px; gap:8px; } .brand img { width:34px;height:34px; } .view-switch button { padding:9px 12px; } .view-switch { gap:2px; padding:3px; } .bikes-view .section-head { margin-bottom:26px; } .ride-thought { margin-top:20px; } .nav-links { font-size:12px; gap:18px; } }

.projects { grid-template-columns:repeat(2,minmax(0,1fr)); }
.workbench { margin-top:0; margin-bottom:24px; }
.workbench-heading { display:flex; justify-content:space-between; gap:24px; align-items:center; margin-bottom:20px; }
.workbench-heading p { font-size:14px; color:var(--muted); margin:0; line-height:1.6; }
.teaser-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.teaser { padding:25px 26px; border:1px dashed rgba(129,164,191,.25); border-radius:var(--radius); background:rgba(9,21,34,.35); }
.teaser-state { display:flex; align-items:center; gap:8px; color:var(--muted); font:11px Consolas,monospace; }
.teaser-state span { width:5px;height:5px;border-radius:50%;background:var(--teal);opacity:.65; }
.teaser h3 { font-size:19px; font-weight:600; letter-spacing:-.02em; margin:15px 0 10px; }
.teaser p { color:var(--muted);font-size:14px;line-height:1.6;margin:0; }
@media(max-width:640px) { .projects,.teaser-grid { grid-template-columns:1fr; } .workbench-heading { align-items:flex-start; flex-direction:column; gap:12px; } }

/* Selected wordmark, local preview only. */
.brand .brand-final-image { width:248px;height:auto;max-width:100%;border-radius:0;display:block; }
.hero .logo-heading { display:block;max-width:760px;margin:0;line-height:1; }
.logo-heading img { width:100%;height:auto;display:block; }

@media(max-width:500px) { .brand .brand-final-image { width:166px;height:auto; } .hero .logo-heading { max-width:100%; } }

/* Selected wordmark, local preview only. */
.brand .brand-final-image { width:248px;height:auto;max-width:100%;border-radius:0;display:block; }
.hero .logo-heading { display:block;max-width:760px;margin:0;line-height:1; }
.logo-heading img { width:100%;height:auto;display:block; }
@media(max-width:500px) { .brand .brand-final-image { width:166px;height:auto; } .hero .logo-heading { max-width:100%; } }