/* Tulosarkiston esittely; yhteinen RaceData-ilme tulee styles.css-tiedostosta. */
.wrap { margin-inline: auto; width: min(1440px, 92%); }
.archive-page { overflow-wrap: break-word; }
.archive-page :target { scroll-margin-top: 8rem; }
.archive-page :focus-visible, .nav a:focus-visible { outline: 3px solid var(--green-2); outline-offset: 6px; }
.skip-link { position: fixed; z-index: 50; top: -5rem; left: 1rem; padding: 1rem; background: var(--green); color: #03100c; }
.skip-link:focus { top: 1rem; }
.nav [aria-current="page"] { color: var(--green-2); }
.archive-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: 5rem 4rem; }
.archive-hero h1 { font-size: clamp(2.8rem, 4.9vw, 5.3rem); line-height: 1.04; letter-spacing: -.045em; }
.archive-page em { color: var(--green-2); font-style: normal; }
.hero-description { color: var(--muted); line-height: 1.75; max-width: 35rem; }
.hero-mobile-link { display: inline-block; margin-top: 1.5rem; color: var(--muted); font-size: .88rem; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.hero-mobile-link span { color: var(--green-2); }
.hero-product { position: relative; min-width: 0; margin: 0; padding-bottom: 2rem; }
.browser-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: #14201e; padding: .85rem 1rem; font-size: .72rem; color: var(--muted); }
.browser-bar span:first-child { color: #68948a; letter-spacing: .2em; }
.image-button { position: relative; display: block; width: 100%; border: 0; padding: 0; background: transparent; color: inherit; cursor: zoom-in; overflow: hidden; font: inherit; }
.hero-capture { height: clamp(26rem, 43vw, 38rem); border: 1px solid var(--line); border-radius: 0 0 8px 8px; box-shadow: var(--shadow); }
.hero-capture img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero-product figcaption { margin-top: .8rem; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.product-label { display: flex; align-items: center; gap: .7rem; position: absolute; left: -1.2rem; bottom: 7rem; border: 1px solid #376450; border-radius: 6px; padding: 1rem; background: #0e251e; box-shadow: var(--shadow); font-size: .62rem; font-weight: 700; letter-spacing: .035em; }
.status-dot { width: .5rem; height: .5rem; background: var(--green-2); border-radius: 100%; box-shadow: 0 0 12px #47f0bb66; }
.zoom-hint { position: absolute; bottom: .8rem; right: .8rem; padding: .45rem .65rem; border: 1px solid #ffffff33; background: #050808dd; color: #fff; border-radius: 4px; font-size: .75rem; }
.section-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; border-block: 1px solid var(--line); padding-block: 1.4rem; }
.section-nav a { color: var(--soft); text-decoration: none; font-size: .88rem; }
.section-nav a:hover, .text-link:hover { color: var(--green-2); }
.section-nav span { margin-left: .3rem; color: var(--green-2); font-size: .65rem; text-transform: uppercase; }
.archive-section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.archive-page h2 { font-size: clamp(2.1rem, 3.6vw, 3.8rem); line-height: 1.08; letter-spacing: -.035em; }
.archive-page h3 { line-height: 1.2; letter-spacing: -.02em; }
.section-lead { color: var(--soft); line-height: 1.7; font-size: 1.12rem; max-width: 43rem; }
.race-journey { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 3rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.race-journey li { padding: 2rem 2rem 0 0; }
.race-journey li + li { padding-left: 2rem; border-left: 1px solid var(--line); }
.journey-number { display: block; margin-bottom: 2rem; color: var(--green-2); font-size: .73rem; font-weight: 800; letter-spacing: .05em; }
.race-journey p, .audience-card p, .event-features p, .mobile-copy > p:not(.eyebrow):not(.section-lead), .office-copy > p:not(.eyebrow):not(.section-lead) { color: var(--muted); line-height: 1.75; }
.audience-section { border-top: 1px solid var(--line); }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.audience-card { padding: clamp(1.5rem, 3vw, 2.6rem); border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(140deg, #15211f, #0c1212); }
.audience-card .card-number { margin-bottom: 1.7rem; font-size: .72rem; }
.audience-card details { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.audience-card summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; padding-top: 1rem; font-size: .88rem; font-weight: 650; list-style: none; }
.audience-card summary::-webkit-details-marker { display: none; }
.audience-card summary span { color: var(--green-2); font-size: 1.4rem; }
.audience-card details[open] summary span { transform: rotate(45deg); }
.audience-card ul { padding-left: 1.15rem; color: var(--muted); font-size: .92rem; line-height: 1.75; }
.audience-card li + li { margin-top: .55rem; }
.availability-note { color: var(--muted); font-size: .8rem; line-height: 1.6; margin: 1.5rem 0 0; }
.mobile-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); border-block: 1px solid var(--line); }
.mobile-devices { display: flex; align-items: start; justify-content: center; gap: 1.5rem; padding: 1rem; background: radial-gradient(ellipse, #164d3838, transparent 70%); }
.app-device { width: 43%; max-width: 235px; margin: 0; }
.app-device button { border: 5px solid #26312d; border-radius: 24px; box-shadow: var(--shadow); }
.app-device img { width: 100%; height: auto; }
.app-device figcaption { color: var(--muted); text-align: center; margin-top: 1rem; font-size: .75rem; }
.android-device { margin-top: 4rem; }
.store-links { display: flex; flex-wrap: wrap; gap: .8rem; margin-block: 2rem 1rem; }
.store-links a { min-width: 10rem; border: 1px solid #75897e; padding: .75rem 1rem; border-radius: 8px; text-decoration: none; background: #080c0b; }
.store-links a:hover { border-color: var(--green-2); }
.store-links span, .store-links strong { display: block; }
.store-links span { font-size: .7rem; color: var(--muted); margin-bottom: .25rem; }
.store-links strong { font-size: 1.05rem; }
.mobile-copy .image-note { font-size: .75rem; }
.event-features { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.event-screen { margin: 0 0 2rem; padding: .6rem; border: 1px solid var(--line); border-radius: 8px; background: #14201e; }
.event-screen .image-button { aspect-ratio: 1.6; border-radius: 3px; }
.event-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.event-features .eyebrow { color: var(--green-2); font-size: .75rem; }
.office-section { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(1.5rem, 4vw, 4rem); background: radial-gradient(ellipse at top left, #126b4433, transparent 75%), #101b17; border: 1px solid #3c604c; border-radius: 8px; margin-bottom: 6rem; }
.new-label { display: inline-block; background: var(--green-2); color: #082417; border-radius: 3px; padding: .3rem .5rem; margin-right: .6rem; }
.office-copy .button { margin-top: 1rem; }
.office-process { padding: 1.7rem; border: 1px solid #ffffff1f; border-radius: 8px; background: #050d0980; }
.process-caption { color: var(--green-2); font-size: .65rem; font-weight: 700; letter-spacing: .04em; }
.office-process ol { list-style: none; padding: 0; margin: 2rem 0; }
.office-process li { display: flex; gap: 1rem; position: relative; padding-bottom: 2rem; }
.office-process li:last-child { padding-bottom: 0; }
.office-process li > span { align-self: start; padding-top: .7rem; flex-shrink: 0; width: 2.5rem; height: 2.5rem; text-align: center; border: 1px solid #376450; border-radius: 50%; background: #132b20; color: var(--green-2); font-size: .75rem; }
.office-process h3 { margin: .45rem 0 .5rem; font-size: 1.1rem; }
.office-process li p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .9rem; }
.process-note { color: var(--muted); margin: 0; font-size: .7rem; }
.archive-contact { max-width: 1440px; margin-inline: auto; width: 92%; }
.contact-card .contact-label { color: var(--muted); font-weight: 500; font-size: .8rem; }
.text-link { color: var(--green-2); text-underline-offset: 5px; line-height: 1.7; }
.image-dialog { max-width: min(94vw, 1200px); max-height: 94svh; padding: 3.8rem 1rem 1rem; background: #0c1212; color: var(--text); border: 1px solid #ffffff40; border-radius: 8px; }
.image-dialog::backdrop { background: #000d; backdrop-filter: blur(8px); }
.image-dialog figure { margin: 0; }
.image-dialog img { max-height: 76svh; width: auto; margin: auto; object-fit: contain; }
.image-dialog figcaption { padding-top: 1rem; font-size: .85rem; color: var(--soft); text-align: center; }
.dialog-close { position: absolute; right: 1rem; top: 1rem; color: var(--text); border: 1px solid var(--line); background: #1c3028; padding: .5rem .8rem; border-radius: 4px; cursor: pointer; }
@media (min-width: 1700px) { .archive-contact { width: min(1440px, 92%); } }
@media (max-width: 1000px) { .archive-hero { grid-template-columns: 1fr 1fr; gap: 2rem; } .archive-hero h1 { font-size: clamp(2.6rem, 5vw, 4rem); } .product-label { left: -.7rem; padding: .75rem; font-size: .52rem; } .mobile-feature { gap: 2rem; } .office-section { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .archive-hero { grid-template-columns: 1fr; padding-block: 3rem; } .archive-hero h1 { font-size: clamp(2.6rem, 9vw, 4.5rem); } .hero-capture { height: 34rem; } .hero-product { max-width: 560px; width: 100%; margin-inline: auto; } .product-label { left: -.5rem; font-size: .6rem; } .section-nav { justify-content: flex-start; gap: 1.25rem; } .audience-grid, .event-features, .mobile-feature, .race-journey { grid-template-columns: 1fr; } .race-journey li, .race-journey li + li { border-left: 0; padding: 1.5rem 0; border-bottom: 1px solid var(--line); } .journey-number { margin-bottom: 1rem; } .mobile-copy { grid-row: 1; } .mobile-devices { max-width: 550px; width: 100%; margin: auto; } .office-section { margin-bottom: 3.5rem; } .archive-contact { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .nav { flex-wrap: wrap; gap: .8rem 1rem; justify-content: flex-start; font-size: .85rem; } .product-label { font-size: .5rem; } .hero-capture { height: 28rem; } .office-process { padding: 1rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }