/* Sinaracing visual identity */
:root {
  --carbon: #151515;
  --carbon-2: #222222;
  --paper: #f5f5f5;
  --ink: #181818;
  --ink-soft: #515151;
  --line: #dedede;
  --graphite: #333333;
  --graphite-deep: #202020;
  --lime-light: #dafe68;
  --signal: #dafe68;
  --font-body: Inter, system-ui, sans-serif;
  --font-label: "IBM Plex Mono", ui-monospace, monospace;
  --header-h: 76px;
  --maxw: 1600px;
  --gutter: clamp(1.125rem, 5vw, 5rem);
  --radius: 12px;
}

html { color-scheme: light; }
body { font-size: clamp(.97rem, .86rem + .25vw, 1.12rem); }
h1, h2, h3 { letter-spacing: -.015em; }
.skip { border: 2px solid var(--graphite); }
.site-header::before { background: rgb(22 22 22 / .94); }
.brand-mark { width: 27px; }
.brand-name { letter-spacing: .13em; }
.brand-tag { font-family: var(--font-label); font-size: .61rem; text-transform: uppercase; }
.submenu { top: 100%; }
.nav-link, .nav-trigger { font-size: .86rem; }
.nav-link.nav-price {
  border: 1px solid #5a5a5a;
  border-radius: 6px;
  margin-inline-start: .55rem;
  color: var(--signal);
}
.nav-price::after { display: none; }
.nav-price:hover, .nav-price[aria-current="page"] { color: var(--carbon); background: var(--signal); border-color: var(--signal); }

.btn { border-radius: 6px; font-size: .91rem; min-height: 52px; }
.btn-primary { background: var(--signal); color: var(--carbon); }
.btn-primary:hover { background: #ebff9d; color: var(--carbon); }
.btn-ghost { background: rgb(22 22 22 / .3); }
.btn span { font-size: 1.25rem; line-height: 1; }
.section { padding-block: clamp(3.5rem, 7vw, 8.5rem); }
.section-head h2, .approach-title, .contact h2 {
  font-size: clamp(3.35rem, 7vw, 7.8rem);
  line-height: .86;
  text-transform: uppercase;
  letter-spacing: -.025em;
}
.section-head h2 span { color: var(--graphite); }

.hero {
  min-height: 0;
  align-items: center;
  padding-top: var(--header-h);
  overflow: clip;
  background: #191919;
}
.hero-media { inset: var(--header-h) 0 0 36%; }
.hero-media img {
  object-position: 26% 46%;
  filter: grayscale(1) contrast(1.12) brightness(.86);
}
.hero::after {
  background:
    linear-gradient(90deg, #191919 32%, rgb(25 25 25 / .78) 43%, transparent 68%),
    linear-gradient(0deg, rgb(16 16 16 / .92), transparent 53%),
    linear-gradient(135deg, transparent 46%, rgb(87 87 87 / .31));
}
.hero-inner {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-height: clamp(39rem, 79svh, 66rem);
  padding-block: clamp(4rem, 8vw, 9rem) clamp(2.5rem, 5vw, 5rem);
}
.hero-copy { align-self: center; }
.hero :focus-visible { outline-color: var(--signal); }
.eyebrow, .hero-latest small {
  font: 500 .72rem/1.4 var(--font-label);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.eyebrow { display: flex; align-items: center; gap: .8rem; color: var(--signal); margin: 0 0 1.45rem; }
.eyebrow::before { content: ""; width: 1.8rem; height: 2px; background: currentColor; }
.hero h1 {
  font-size: clamp(5rem, 10vw, 11.25rem);
  line-height: .77;
  letter-spacing: -.026em;
  text-transform: uppercase;
}
.hero h1 span + span { margin-top: .08em; }
.hero h1 span:last-child { color: var(--signal); }
.hero-lead { font-size: clamp(1rem, 1.35vw, 1.24rem); margin-block: 1.7rem 1.45rem; }
.hero-latest {
  gap: .85rem;
  padding: .65rem .95rem .65rem .65rem;
  background: rgb(23 23 23 / .78);
  border-color: rgb(255 255 255 / .27);
}
.hero-latest small { color: var(--signal); margin-bottom: .25rem; letter-spacing: .075em; font-size: .64rem; }
.hero-latest img { width: 76px; }
.hero-latest strong { font-size: .88rem; }
.feature-arrow { margin-inline-start: .3rem; color: var(--signal); }

.lineup { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.product-card { border: 1px solid #dbdbdb; }
.product-card .plate { height: clamp(12rem, 25vw, 26rem); background: #ebebeb; overflow: hidden; }
.product-card .plate img { transition: transform .65s cubic-bezier(.2,.75,.25,1); }
.product-card .meta { flex: 1; align-content: start; position: static; padding: clamp(1rem, 2.4vw, 2.25rem); padding-inline-end: clamp(3.7rem, 6vw, 6rem); }
.product-card h3 { font-size: clamp(2rem, 4vw, 4rem); text-transform: uppercase; }
.product-card .price { color: var(--graphite-deep); font-family: var(--font-label); font-size: .82rem; }
.product-card .price small { font-size: inherit; }
.product-card .meta::after {
  content: "↗";
  position: absolute;
  right: clamp(.85rem, 2vw, 1.8rem);
  bottom: clamp(1rem, 2.4vw, 2.25rem);
  display: grid;
  place-items: center;
  width: clamp(2.35rem, 4vw, 3.25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  pointer-events: none;
  transition: background .2s, transform .2s;
}
.product-card:focus-within { outline: 2px solid var(--graphite); outline-offset: 3px; }
.product-card.is-soon .plate {
  background: linear-gradient(130deg, rgb(22 22 22 / .7), rgb(22 22 22 / .3)), url("../images/detail-carbon-800.jpg") center 48% / cover;
}
.product-card.is-soon .plate span {
  background: var(--carbon);
  border: 1px solid #676767;
  padding: .6rem .9rem;
  border-radius: 5px;
  font: 500 .77rem/1.4 var(--font-label);
  color: var(--signal);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.product-card.is-soon .price { color: var(--signal); }

.engineering { background: #212121; }
.engineering .photo-frame { border: 1px solid #484848; }
.engineering .principle { border-color: var(--carbon-line); }
.engineering .principle h3 { color: var(--signal); }
.engineering .principle p { color: #c8c8c8; }
.film { border-top: 1px solid var(--carbon-line); }
.film .video-wrap { max-width: none; }
.film .video { border: 1px solid #3c3c3c; }
.video-play .disc { background: var(--signal); color: var(--carbon); }
.video-play:hover .disc { box-shadow: 0 0 0 12px rgb(218 254 104 / .24); }
.section:has(> .contact) { background: var(--signal); color: var(--carbon); }
.contact p { color: #272727; }
.contact .mail-link { border-color: var(--carbon); }
.contact .mail-link:hover { color: var(--graphite-deep); }

.page-hero { min-height: clamp(24rem, 37vw, 39rem); display: grid; align-items: end; overflow: clip; }
.page-hero::after {
  background: linear-gradient(100deg, #151515 31%, rgb(22 22 22 / .95) 46%, rgb(22 22 22 / .16) 100%), linear-gradient(0deg, #151515, transparent 70%);
}
.page-hero:not(.has-art) { background: radial-gradient(ellipse at 90% 15%, #363636, var(--carbon) 74%); }
.page-hero h1 { font-size: clamp(3.6rem, 8.2vw, 9rem); max-width: 11ch; text-transform: uppercase; text-wrap: initial; line-height: .82; color: var(--signal); }
.page-hero .lead { max-width: 48ch; }
.page-art { position: absolute; inset: var(--header-h) 0 0 47%; z-index: -2; display: grid; }
.page-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.8); }
.specs dt, .crumbs { font-family: var(--font-label); font-size: .75rem; }
.specs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.block h2, .soon h2, .price-group h2 { text-transform: uppercase; }
.gallery, .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-group { border-top: 2px solid var(--ink); padding-top: 1rem; }
.zoom, .photo-frame, .product-card { isolation: isolate; }
.site-footer { background: #151515; }
.footer-grid h2 { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .12em; color: var(--signal); }

@media (hover: hover) {
  .product-card:hover .plate img { transform: scale(1.055); }
  .product-card:hover .meta::after { transform: rotate(10deg); background: var(--signal); }
}

@media (max-width: 959px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 1.6rem; }
  .hero h1 { font-size: clamp(4.2rem, 12vw, 7.5rem); }
  .hero-media { left: 20%; }
  .hero::after { background: linear-gradient(90deg, #191919, rgb(25 25 25 / .46) 70%), linear-gradient(0deg, #191919, transparent 67%); }
}
@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .nav-link, .nav-trigger { font-size: 1.8rem; }
  .nav-link.nav-price { border: 0; margin: 0; }
}
@media (max-width: 560px) {
  .hero-inner { padding-block: clamp(11rem, 54vw, 18rem) 1.5rem; }
  .hero-media { inset: var(--header-h) 0 auto; height: clamp(16rem, 74vw, 26rem); }
  .hero::after {
    background: linear-gradient(0deg, #191919 49%, rgb(25 25 25 / .75) 62%, transparent 93%);
  }
  .hero h1 { font-size: clamp(3.65rem, 14vw, 5.8rem); }
  .hero-lead { margin-block: 1.25rem; }
  .hero-actions { gap: .55rem; }
  .hero-actions .btn { padding-inline: .85rem; }
  .page-hero { min-height: 22rem; }
  .page-art { left: 26%; }
  .page-hero::after { background: linear-gradient(0deg, #151515 20%, rgb(22 22 22 / .58) 75%), linear-gradient(90deg, #151515, transparent); }
  .page-hero h1 { font-size: clamp(3.15rem, 12vw, 4.8rem); }
}
@media (min-width: 1800px) {
  .hero-media { left: 42%; }
  .hero::after { background: linear-gradient(90deg, #191919 38%, rgb(25 25 25 / .63) 49%, transparent 69%), linear-gradient(0deg, rgb(16 16 16 / .82), transparent 52%); }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
  @supports (animation-timeline: view()) {
    .product-card, .engineering .photo-frame, .film .video-wrap {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes reveal {
      from { opacity: .7; translate: 0 22px; }
      to { opacity: 1; translate: 0; }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-card .plate img, .product-card .meta::after { transition: none; transform: none; }
}