/* One type scale for the site. The illustrated computer and its map keep
   their own proportionate instrument lettering. */
:root {
  --type-h2: clamp(36px, 4vw, 58px);
  --type-h3: 24px;
  --type-product: 20px;
  --type-body: 15px;
  --type-control: 13px;
  --type-small: 12px;
  --type-label: 11px;
  --type-dialog: 34px;
  --text-secondary: #606956;
  --text-on-dark: #c5ceb9;
}

body { font-size: var(--type-body); line-height: 1.7; }

/* Section titles share a single size, weight, tracking and line height. */
.edition-heading h2,
.fit-lab .edition-heading h2,
.service-course-intro h2,
.pitlane-heading h2,
.section-heading h2,
.people-story h2,
.archive-section h2,
.team-teaser-v3 h2,
.feature-split h2,
.story-content h2,
.contact-card h2,
.footer-invitation h2 {
  font-size: var(--type-h2);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.08;
}

.fit-contact-panel h3,
.price-plan h3,
.process-item h3,
.credentials h3 {
  font-size: var(--type-h3);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.2;
}

.product-info h3 {
  font-size: var(--type-product);
  line-height: 1.4;
  letter-spacing: -.025em;
  min-height: 56px;
}

.hero-copy-v3 p,
.edition-heading > p,
.fit-lab .edition-heading p,
.section-heading p,
.service-course-intro > p,
.fit-contact-panel p,
.pitlane-heading > p,
.team-teaser-v3 p,
.chapter-head p,
.feature-split p,
.story-content p,
.process-item p,
.credentials p,
.people-heading > p,
.people-columns p,
.archive-section p,
.contact-card p,
.project-copy p,
.project-copy li {
  font-size: var(--type-body);
  line-height: 1.8;
}

.edition-heading > p,
.fit-lab .edition-heading p,
.section-heading p,
.fit-contact-panel p,
.pitlane-heading > p,
.team-teaser-v3 p,
.chapter-head p,
.feature-split p,
.story-content p,
.process-item p,
.credentials p,
.people-columns p,
.archive-section p,
.project-copy p,
.project-copy li { color: var(--text-secondary); }

.service-course-intro > p,
.people-heading > p { color: var(--text-on-dark); }

/* Labels are always legible, rather than shrinking at each breakpoint. */
.micro-label,
.eyebrow,
.hero-copy-v3 .micro-label,
.edition-heading .micro-label,
.service-course-intro .micro-label,
.pitlane-heading .micro-label,
.team-teaser-v3 .micro-label,
.chapter-head .micro-label,
.people-topline .micro-label,
.people-story .micro-label,
.archive-section .micro-label,
.footer-invitation .micro-label,
.section-heading .eyebrow,
.feature-split .eyebrow,
.price-plan .eyebrow,
.brands-top .eyebrow,
.footer-contact .eyebrow,
.footer-hours .eyebrow,
.arrival-dialog-header .micro-label,
.arrival-route-details .micro-label {
  font-family: var(--mono);
  font-size: var(--type-label);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .045em;
  color: var(--text-secondary);
}

.service-course-intro .micro-label,
.people-topline .micro-label,
.footer-invitation .micro-label,
.footer-contact .eyebrow,
.footer-hours .eyebrow { color: var(--text-on-dark); }

.discipline-strip > span:first-child {
  display: block;
  font: 500 var(--type-small)/1.5 var(--mono);
  letter-spacing: .035em;
  color: #46503e;
}

.discipline-strip > a {
  font: 500 18px/1.5 var(--display);
  letter-spacing: -.03em;
}

.desktop-nav a,
.header-contact,
.btn,
.btn.outline,
.btn.orange,
.text-link,
.text-link.light,
.edition-aside .text-link,
.hero-catalog-link,
.fit-contact-panel .text-link,
.team-teaser-v3 .btn,
.head-split .btn,
.price-plan .btn,
.work-order .btn,
.contact-form .btn,
.detail-copy .btn,
.detail-copy > .text-link,
.site-footer .text-link {
  font-family: var(--mono);
  font-size: var(--type-control);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -.02em;
}

.hero-topline,
.hero-topline > span:last-child,
.hero-bottomline,
.hero-route-mark span,
.cycle-model-tag,
.cycle-photo-caption,
.cycle-photo-caption small,
.computer-hint,
.people-topline > span:last-child,
.people-portrait figcaption,
.people-pitlane figcaption,
.service-course-intro figcaption,
.image-caption,
.pitlane-photo-label,
.pitlane-bottom,
.measurement-rule,
.measurement-footer,
.fit-detail-label,
.contact-point-label,
.fit-price-row > span,
.brands-top p,
.breadcrumbs,
.chapter-head .breadcrumbs {
  font-family: var(--mono);
  font-size: var(--type-label);
  line-height: 1.7;
}

.product-type,
.product-info .spec,
.badge,
.badge.orange,
.product-price del,
.product-price:after,
.catalog-note,
.catalog-summary,
.reset,
.field label,
.category-tabs button,
.gallery-switch button,
.pagination-info,
.notice,
.plan-note,
.ticket-top,
.ticket-top > div,
.ticket-material,
.ticket-footer > span,
.fit-hotspot span,
.source-note,
.detail-status,
.detail-specs,
.detail-copy .eyebrow,
.clothes-card a,
.race-archive span,
.archive-files button > span,
.archive-files small,
.opening-hours,
.contact-form small,
.project-copy table,
.arrival-attribution,
.arrival-route-details dt,
.arrival-route-details > p {
  font-family: var(--mono);
  font-size: var(--type-label);
  line-height: 1.8;
  letter-spacing: 0;
}

.product-type,
.product-info .spec,
.catalog-note,
.catalog-summary,
.reset,
.field label,
.pagination-info,
.notice,
.plan-note,
.ticket-top > div,
.ticket-material,
.ticket-footer > span,
.measurement-rule,
.measurement-footer,
.fit-detail-label,
.contact-point-label,
.fit-price-row > span,
.brands-top p,
.image-caption,
.source-note,
.detail-status,
.detail-specs dt,
.clothes-card a,
.archive-files button > span,
.contact-form small,
.arrival-attribution,
.arrival-route-details dt,
.arrival-route-details > p { color: var(--text-secondary); }

.service-course-intro figcaption,
.pitlane-photo-label { color: var(--text-on-dark); }

.ticket-checklist li,
.price-plan li {
  font: 400 var(--type-small)/1.8 var(--mono);
  color: #506242;
}

.ticket-title > span { font-size: 10px; color: var(--text-secondary); }
.ticket-package h4 { font-size: var(--type-product); line-height: 1.3; }
.ticket-package strong { font-size: 52px; }
.ticket-package > div > span,
.plan-price small { font: 500 var(--type-label)/1.5 var(--mono); }
.product-price strong,
.fit-price-row b { font: 500 18px/1.6 var(--display); letter-spacing: -.035em; }
.badge { padding: 4px 7px; }
.product-type { min-height: 20px; }
.product-info .spec { min-height: 22px; }
.product-badges { top: 15px; }
.catalog-note { row-gap: 8px; }
.field input,
.field select,
.field textarea,
.contact-form .field input,
.contact-form .field select { font-size: var(--type-control); line-height: 1.6; }
.category-tabs button,
.gallery-switch button { padding: 10px 14px; }
.detail-copy h2,
.arrival-dialog-header h2,
.contact-form h3 { font-size: var(--type-dialog); line-height: 1.12; letter-spacing: -.045em; }
.detail-description { font-size: var(--type-small); line-height: 1.9; }
.archive-files button { min-height: 230px; }
.archive-files small { display: block; }
.archive-files strong { font-size: 45px; margin: 37px 0 24px; }
.arrival-route-details dd { font-size: var(--type-body); }
.arrival-route-details dd small { font-size: var(--type-small); }
.arrival-route-details .btn { font-size: var(--type-control); }
.project-copy h2 { font-size: var(--type-h3); line-height: 1.2; letter-spacing: -.035em; }
.feature-split p[style*="font-size"],
.contact-card p[style*="font-size"] { font-size: var(--type-small) !important; }

.inventory-number small { font: 500 var(--type-label)/1.7 var(--mono); letter-spacing: .02em; }
.inventory-number { letter-spacing: -.065em; }
.edition-aside { max-width: 250px; }
.people-portrait,
.people-pitlane { padding-bottom: 14px; }
.people-portrait figcaption,
.people-pitlane figcaption { color: var(--text-secondary); }
.footer-contact > a { font: 400 var(--type-control)/1.8 var(--mono); }
.footer-invitation p,
.footer-contact > p,
.footer-hours dl,
.footer-hours p,
.footer-social,
.footer-nav,
.footer-bottom {
  font-family: var(--mono);
  font-size: var(--type-label);
  line-height: 1.8;
  color: var(--text-on-dark);
}

@media (max-width: 1000px) {
  .desktop-nav { gap: 20px; margin-right: 25px; }
  .desktop-nav a { font-size: 11px; }
  .hero-route-mark { width: 170px; }
  .cycle-photo-caption { right: 4%; gap: 20px; }
  .cycle-photo-caption > span { max-width: 150px; }
  .ticket-package { align-items: flex-start; }
  .ticket-package h4 { max-width: 145px; }
}

@media (max-width: 800px) {
  :root { --type-h2: 42px; --type-h3: 22px; --type-product: 18px; }
  .discipline-strip { flex-wrap: wrap; gap: 12px 24px; }
  .discipline-strip > span:first-child { flex: 0 0 100%; }
  .discipline-strip > a { font-size: 16px; }
  .hero-topline > span:last-child { max-width: 180px; }
  .hero-bottomline { flex-wrap: wrap; gap: 8px 24px; min-height: 58px; height: auto; padding-block: 12px; }
  .hero-bottomline > span:nth-child(2) { display: none; }
  .cycle-photo-caption { display: none; }
  .ticket-package h4 { font-size: 18px; }
  .ticket-package strong { font-size: 44px; }
  .ticket-checklist li { font-size: 11px; }
  .edition-heading > p,
  .section-heading p { max-width: 320px; }
  .footer-contact > a { overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
  :root {
    --type-h2: 36px;
    --type-h3: 22px;
    --type-product: 16px;
    --type-body: 14px;
    --type-control: 12px;
    --type-small: 12px;
    --type-label: 11px;
    --type-dialog: 30px;
  }
  .header-contact { font-size: var(--type-label); padding: 9px 11px; }
  .hero-topline { flex-wrap: wrap; gap: 5px 18px; padding-block: 13px; min-height: 62px; height: auto; }
  .hero-topline > span:first-child { flex-basis: 100%; }
  .hero-topline > span:last-child { max-width: none; text-align: left; }
  .hero-route-mark { top: 245px; width: 120px; }
  .hero-route-mark span { font-size: 9px; }
  .hero-copy-v3 .micro-label { max-width: none; }
  .hero-copy-v3 p { line-height: 1.8; }
  .hero-catalog-link { margin-top: 18px; }
  .computer-hint { font-size: 11px; letter-spacing: -.025em; }
  .cycle-model-tag { top: 4px; right: 15%; font-size: 10px; line-height: 1.5; }
  .cycle-platform { top: 330px; }
  .computer-scene { top: 610px; }
  .hero-body { height: 1110px; }
  .discipline-strip { padding-block: 20px; gap: 12px 20px; }
  .discipline-strip > span:first-child { margin-bottom: 1px; font-size: 12px; }
  .discipline-strip > a { font-size: 16px; }
  .edition-heading { gap: 20px; align-items: flex-start; }
  .edition-heading h2 { max-width: 235px; }
  .edition-aside { min-width: 0; max-width: 115px; }
  .edition-aside .text-link { font-size: 11px; }
  .inventory-number { font-size: 36px; }
  .inventory-number small { font-size: 10px; line-height: 1.7; }
  .product-image { height: 180px; padding-top: 38px; }
  .product-badges { left: 12px; top: 12px; gap: 4px; }
  .badge { font-size: 10px; padding: 3px 5px; line-height: 1.5; }
  .product-info h3 { min-height: 68px; line-height: 1.4; margin-top: 8px; }
  .product-type { font-size: 11px; min-height: 20px; line-height: 1.7; }
  .product-info .spec { font-size: 11px; min-height: 40px; line-height: 1.8; }
  .product-price strong { font-size: 15px; white-space: nowrap; }
  .product-price del { font-size: 11px; }
  .product-price:after { font-size: 10px; }
  .catalog-note { display: block; font-size: 11px; line-height: 1.9; }
  .catalog-note > span { display: block; margin-top: 5px; }
  .catalog-summary { align-items: flex-start; flex-wrap: wrap; }
  .reset { white-space: normal; }
  .ticket-top { font-size: 12px; }
  .ticket-top > div { font-size: 11px; }
  .ticket-title > span { font-size: 9px; }
  .ticket-title h3 { font-size: 34px; line-height: 1.1; }
  .ticket-tabs button { font-size: 12px; }
  .ticket-package h4 { font-size: 19px; max-width: 150px; }
  .ticket-package strong { font-size: 46px; }
  .ticket-checklist li { font-size: 12px; line-height: 1.8; }
  .ticket-footer { gap: 18px; }
  .ticket-barcode { width: 100px; flex-shrink: 0; }
  .ticket-footer > span { font-size: 10px; }
  .fit-hotspot span { font-size: 11px; padding: 3px 5px; }
  .fit-lab .edition-heading { display: block; }
  .fit-lab .edition-heading h2 { max-width: none; }
  .fit-contact-panel { display: block; }
  .fit-contact-panel h3 { margin-bottom: 18px; }
  .fit-contact-panel p { max-width: calc(100% - 28px); min-height: 0; }
  .fit-technical-icon { right: 4px; top: 47px; width: 52px; opacity: .4; }
  .fit-price-row { margin-top: 23px; gap: 35px; }
  .fit-contact-panel > .text-link { margin-top: 22px; }
  .measurement-footer { gap: 20px; }
  .measurement-footer > span:first-child { max-width: 255px; }
  .pitlane-photo-label { font-size: 11px; }
  .pitlane-photo-cta { font-size: 12px; }
  .pitlane-bottom { font-size: 11px; line-height: 1.8; gap: 20px; }
  .pitlane-bottom > span { max-width: 195px; }
  .people-topline { gap: 20px; align-items: flex-start; }
  .people-topline .micro-label { max-width: 215px; }
  .people-topline > span:last-child { max-width: 110px; font-size: 10px; }
  .people-heading > p { max-width: 260px; }
  .people-portrait figcaption,
  .people-pitlane figcaption { font-size: 10px; line-height: 1.7; }
  .people-montage { height: 560px; }
  .people-pitlane { top: 315px; }
  .archive-files { grid-template-columns: 1fr; gap: 12px; }
  .archive-files button { min-height: 0; padding: 25px 20px 20px; }
  .archive-files button > span,
  .archive-files small { font-size: 11px; }
  .archive-files strong { margin: 22px 0 18px; font-size: 42px; }
  .arrival-route-details .micro-label { max-width: none; }
  .arrival-attribution { font-size: 11px; }
  .footer-invitation p,
  .footer-contact > p,
  .footer-hours dl,
  .footer-hours p,
  .footer-social,
  .footer-nav,
  .footer-bottom { font-size: 12px; line-height: 1.8; }
  .footer-contact > a { font-size: 13px; }
  .footer-hours .eyebrow,
  .footer-contact .eyebrow { font-size: 11px; }
}

@media (max-width: 370px) {
  :root { --type-h2: 32px; --type-product: 15px; }
  .edition-aside { max-width: 100px; }
  .product-price strong { font-size: 14px; }
  .product-price:after { font-size: 9px; }
  .computer-scene { top: 590px; }
  .hero-body { height: 1090px; }
}
/* Shared roles also cover secondary pages and media captions. */
.chapter-identifier { font: 400 var(--type-label)/1.7 var(--mono); }
.clothes-card h3,.empty-state h3 { font-size: var(--type-product); line-height: 1.4; }
.clothes-card strong { font: 500 18px/1.6 var(--display); letter-spacing: -.035em; }
.clothes-card a { font-size: var(--type-control); line-height: 1.8; }
.video-label { font: 400 var(--type-small)/1.7 var(--mono); }
.large-note { font-size: var(--type-body) !important; line-height: 1.8 !important; }
.cycle-photo-caption { bottom: -64px; }
.cycle-photo-caption > span { max-width: 200px; }
.hero-route-mark span { font-size: var(--type-label); }
@media(max-width:560px){.hero-route-mark{width:130px}.people-topline>span:last-child{font-size:var(--type-label)}.people-portrait figcaption,.people-pitlane figcaption{font-size:var(--type-label)}}
.people-columns .text-link { font-size: var(--type-control); line-height: 1.7; }
.process-item > span,.ticket-title > span { font: 400 var(--type-label)/1.7 var(--mono); }
.ticket-checklist li > span { font-size: var(--type-small); }
.hero-copy-v3 .micro-label,.hero-route-mark span { color: var(--ink); }
/* Allow the larger labels to breathe without touching the illustrated hardware. */
.hero-body{--type-hero-height:850px;height:calc(var(--type-hero-height) + 28px)}
.computer-scene{margin-top:20px}
@media(min-width:1700px){.hero-body{--type-hero-height:870px}}
@media(max-width:1200px){.hero-body{--type-hero-height:830px}}
@media(max-width:950px){.hero-body{--type-hero-height:810px}}
@media(max-width:800px){.hero-body{--type-hero-height:790px}}
@media(max-width:560px){
  .hero-body{--type-hero-height:1110px}
  .selection-section .edition-heading{display:block}
  .selection-section .edition-heading h2{max-width:none}
  .selection-section .edition-aside{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:none;margin-top:25px;text-align:left}
  .selection-section .inventory-number{display:flex;align-items:center;gap:12px;font-size:34px;line-height:1;margin:0}
  .selection-section .inventory-number small{font-size:10px;line-height:1.6;max-width:90px;margin:0}
  .selection-section .edition-aside .text-link{font-size:12px;white-space:nowrap}
}
@media(max-width:370px){.hero-body{--type-hero-height:1090px}.selection-section .edition-aside .text-link{font-size:11px}}
@media(max-width:560px){.selection-section .inventory-number small{font-size:var(--type-label);max-width:110px}}
@media(max-width:370px){.selection-section .edition-aside{gap:12px}.selection-section .inventory-number{font-size:32px;gap:8px}.selection-section .inventory-number small{max-width:80px}}