/* ============================================================
   FORTY-FIVE — MX rider portfolio (concept demo)
   cream / charcoal / Honda red — Lando-Norris-school layout
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --cream:#f1ede4;
  --cream-2:#e9e4d8;
  --ink:#16120f;
  --dark:#1b1512;
  --dark-2:#241c17;
  --red:#d3140f;
  --mono:'IBM Plex Mono',monospace;
  --anton:'Anton',sans-serif;
  --serif:'Instrument Serif',serif;
}

html { scroll-behavior:auto; }
html.lenis, html.lenis body { height:auto; }

body {
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',-apple-system,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* subtle topo-contour texture, Lando-style */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%2316120f' stroke-opacity='.05' stroke-width='1.4'%3E%3Cpath d='M-20 120 C 120 40, 240 210, 400 130 S 620 90, 620 90'/%3E%3Cpath d='M-20 190 C 130 110, 250 280, 410 200 S 630 160, 630 160'/%3E%3Cpath d='M-20 420 C 110 350, 260 500, 420 420 S 640 380, 640 380'/%3E%3Cpath d='M-20 490 C 120 420, 270 560, 430 490 S 650 450, 650 450'/%3E%3C/g%3E%3C/svg%3E");
}

.mono { font-family:var(--mono); letter-spacing:.14em; font-weight:500; }
.dot { color:var(--red); font-style:normal; }
.kick { font-size:11.5px; color:#7a7267; margin-bottom:22px; }
.kick.light { color:#b7a99b; }

.hline { display:block; overflow:hidden; }
.hline > span { display:block; will-change:transform; }

/* ---------- painted accent words ---------- */
.paint {
  font-family:var(--serif); font-style:italic; font-weight:400;
  color:var(--red); position:relative; white-space:nowrap;
}
.paint .paint-in {
  display:inline-block;
  clip-path:inset(-10% 100% -20% 0);
  will-change:clip-path;
}
.paint .swash {
  position:absolute; left:-4%; bottom:-.18em; width:108%; height:auto;
  color:var(--red); pointer-events:none;
}
.paint .swash path { stroke-dasharray:1; stroke-dashoffset:1; }

/* ---------- nav ---------- */
.nav {
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:34px;
  padding:18px 4vw;
  mix-blend-mode:normal;
}
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.logo .num {
  font-family:var(--anton); font-size:38px; line-height:1;
  color:var(--red);
}
.logo .wrap { display:flex; flex-direction:column; }
.logo .wrap em {
  font-style:normal; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.22em; text-transform:uppercase; color:#7a7267; line-height:1.6;
}
.links { display:flex; gap:26px; margin-left:auto; }
.links a {
  color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:600;
  position:relative;
}
.links a::after {
  content:''; position:absolute; left:0; bottom:-4px; height:2px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.links a:hover::after { transform:scaleX(1); }
.fan-btn {
  font-family:var(--anton); font-size:15px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cream); background:var(--ink); text-decoration:none;
  padding:12px 24px; border-radius:100px; transition:background .25s;
}
.fan-btn:hover { background:var(--red); }

/* ---------- hero ---------- */
.hero {
  position:relative; min-height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px 4vw 90px;
}
.hero-watermark {
  position:absolute; right:-4vw; top:50%; transform:translateY(-50%);
  font-family:var(--anton); font-size:64vh; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(22,18,15,.08);
  pointer-events:none; user-select:none;
}
.hero-grid {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.25fr 1fr; gap:5vw; align-items:center;
  max-width:1500px;
}
.hero-title {
  font-family:var(--anton); font-weight:400;
  font-size:clamp(70px, 12.5vw, 190px);
  line-height:.94; letter-spacing:.005em; text-transform:uppercase;
}
.paint-hero {
  display:block; font-size:clamp(44px, 6.2vw, 96px);
  margin:-.28em 0 0 .18em; transform:rotate(-4deg); transform-origin:left center;
  z-index:3; position:relative; width:max-content;
}
.hero-sub {
  margin-top:44px; max-width:400px;
  margin-left:clamp(0px, 19vw, 280px);
  font-size:16px; line-height:1.7; color:#575047;
}
.hero-photo {
  position:relative; justify-self:end;
  width:min(380px, 30vw);
}
.hero-photo img {
  width:100%; display:block; border-radius:16px;
  clip-path:inset(100% 0 0 0);
}
.hero-photo figcaption {
  margin-top:12px; font-size:10px; color:#7a7267; text-align:right;
}

.race-card {
  position:absolute; left:4vw; bottom:44px; z-index:5;
  width:196px; padding:18px 18px 14px;
  background:var(--cream); border:1.5px solid rgba(22,18,15,.18);
  border-radius:14px 14px 22px 22px;
  display:flex; flex-direction:column; gap:8px;
  box-shadow:0 14px 34px rgba(22,18,15,.08);
}
.rc-label { font-size:9.5px; color:#7a7267; }
.rc-track { width:100%; color:rgba(22,18,15,.55); }
.race-card strong { font-family:var(--anton); font-weight:400; font-size:17px; letter-spacing:.02em; }
.rc-round { font-size:9.5px; color:#7a7267; }
.race-card hr { border:none; border-top:1px solid rgba(22,18,15,.14); margin:4px 0; }
.rc-team { font-size:9px; color:#a49a8c; line-height:1.7; }

.scroll-cue {
  position:absolute; right:4vw; bottom:44px; z-index:5;
  display:flex; align-items:center; gap:12px;
  font-size:10px; color:#7a7267;
}
.scroll-cue .bar { width:52px; height:2px; background:rgba(22,18,15,.2); position:relative; overflow:hidden; }
.scroll-cue .bar::after {
  content:''; position:absolute; inset:0; background:var(--red);
  transform:translateX(-100%); animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue { 40%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ---------- tape marquee ---------- */
.tape { background:var(--dark); padding:34px 0 38px; overflow:hidden; position:relative; z-index:2; }
.tape-row { display:flex; width:max-content; }
.tape-row + .tape-row { margin-top:2px; }
.tape-set { display:flex; align-items:baseline; flex-shrink:0; }
.tape-row.serif .tape-set span {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(34px,4.4vw,60px); color:var(--red); padding:0 28px;
}
.tape-row.anton .tape-set span {
  font-family:var(--anton);
  font-size:clamp(40px,5.4vw,76px); color:var(--cream); padding:0 30px;
  letter-spacing:.02em;
}
.tape-set i { font-style:normal; color:rgba(241,237,228,.35); font-size:18px; }

/* ---------- manifesto ---------- */
.manifesto {
  background:var(--dark); color:var(--cream);
  padding:140px 6vw 120px; text-align:center; position:relative; z-index:2;
}
.team-tag { font-size:10.5px; color:#8d7f70; }
.mani-text {
  margin:44px auto 0; max-width:1150px;
  font-family:var(--anton); font-weight:400; text-transform:none;
  font-size:clamp(34px,5.4vw,76px); line-height:1.14; letter-spacing:.01em;
}
.mani-text .paint { font-size:1.06em; }
.signature {
  width:min(300px, 56vw); margin:54px auto 0; display:block; color:var(--red);
}
.sig-path { stroke-dasharray:1; stroke-dashoffset:1; }

/* ---------- stats ---------- */
.stats-band {
  background:var(--cream); position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1.5px solid rgba(22,18,15,.14);
  border-bottom:1.5px solid rgba(22,18,15,.14);
}
.stat {
  padding:52px 20px 44px; text-align:center;
  border-right:1.5px solid rgba(22,18,15,.14);
}
.stat:last-child { border-right:none; }
.stat .val {
  display:block; font-family:var(--anton);
  font-size:clamp(56px,7.5vw,110px); line-height:1; color:var(--ink);
}
.stat .lbl { display:block; margin-top:12px; font-size:10.5px; color:#7a7267; }

/* ---------- gallery ---------- */
.gallery { background:var(--cream); padding:130px 4vw 40px; position:relative; z-index:2; }
.gal-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; max-width:1500px; margin:0 auto; }
.gal-title {
  font-family:var(--anton); font-weight:400;
  font-size:clamp(60px,9vw,150px); line-height:.92; text-transform:uppercase;
}
.gal-grid {
  max-width:1500px; margin:70px auto 0;
  display:grid; grid-template-columns:repeat(12,1fr); gap:24px 24px;
}
.shot { position:relative; }
.shot .frame { overflow:hidden; border-radius:14px; }
.shot img {
  width:100%; height:100%; object-fit:cover; display:block;
  clip-path:inset(100% 0 0 0); will-change:clip-path, transform;
}
.shot figcaption { margin-top:10px; font-size:9.5px; color:#7a7267; }
.shot.a { grid-column:1 / span 5; margin-top:60px; }
.shot.a .frame { aspect-ratio:3/2.6; }
.shot.b { grid-column:6 / span 7; }
.shot.b .frame { aspect-ratio:21/10; }
.shot.c { grid-column:1 / span 4; margin-top:40px; }
.shot.c .frame { aspect-ratio:3/3.4; }
.shot.d { grid-column:5 / span 8; margin-top:90px; }
.shot.d .frame { aspect-ratio:21/9.5; }
.shot.e { grid-column:3 / span 8; margin-top:70px; }
.shot.e .frame { aspect-ratio:3/1.7; }

.quote {
  max-width:820px; margin:120px auto 0; text-align:center; padding-bottom:120px;
}
.quote p {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(28px,3.6vw,48px); line-height:1.3; color:var(--ink);
}

/* ---------- bike ---------- */
.bike { position:relative; min-height:96vh; overflow:hidden; z-index:2; display:flex; align-items:center; }
.bike-media { position:absolute; inset:0; }
.bike-media img { width:100%; height:116%; object-fit:cover; display:block; will-change:transform; }
.bike::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(18,12,9,.88) 0%, rgba(18,12,9,.45) 48%, rgba(18,12,9,.08) 78%);
}
.bike-panel { position:relative; z-index:2; padding:100px 4vw; max-width:640px; color:var(--cream); }
.bike-panel h2 {
  font-family:var(--anton); font-weight:400;
  font-size:clamp(60px,8vw,130px); line-height:1; letter-spacing:.01em;
}
.specs { list-style:none; margin-top:44px; }
.specs li {
  display:flex; align-items:baseline; justify-content:space-between; gap:26px;
  padding:15px 2px; border-top:1px solid rgba(241,237,228,.18);
}
.specs li:last-child { border-bottom:1px solid rgba(241,237,228,.18); }
.specs .mono { font-size:10px; color:#b7a99b; }
.specs strong { font-family:var(--anton); font-weight:400; font-size:clamp(17px,1.7vw,24px); letter-spacing:.03em; }

/* ---------- partners ---------- */
.partners { background:var(--cream); padding:130px 4vw 140px; position:relative; z-index:2; }
.partners .kick { max-width:1500px; margin:0 auto 30px; }
.partner-list { list-style:none; max-width:1500px; margin:0 auto; }
.partner-list li { border-top:1.5px solid rgba(22,18,15,.14); }
.partner-list li:last-child { border-bottom:1.5px solid rgba(22,18,15,.14); }
.partner-list a {
  display:block; padding:16px 2px;
  font-family:var(--anton); font-weight:400; text-decoration:none;
  font-size:clamp(40px,6.2vw,96px); line-height:1.06; letter-spacing:.015em;
  color:transparent; -webkit-text-stroke:1.5px rgba(22,18,15,.55);
  transition:color .35s, -webkit-text-stroke-color .35s, padding-left .35s;
}
.partner-list a:hover { color:var(--red); -webkit-text-stroke-color:var(--red); padding-left:18px; }

/* ---------- footer ---------- */
.foot {
  background:var(--dark); color:var(--cream);
  padding:150px 4vw 40px; text-align:center; position:relative; z-index:2;
}
.foot-giant {
  font-family:var(--anton); font-weight:400; text-transform:uppercase;
  font-size:clamp(64px,11.5vw,180px); line-height:.94;
}
.foot-links { display:flex; justify-content:center; gap:34px; margin-top:60px; flex-wrap:wrap; }
.foot-links a {
  color:var(--cream); text-decoration:none; font-size:14px; font-weight:600;
  border-bottom:1.5px solid rgba(241,237,228,.25); padding-bottom:4px;
  transition:border-color .25s, color .25s;
}
.foot-links a:hover { color:var(--red); border-color:var(--red); }
.foot-base {
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:90px; padding-top:26px;
  border-top:1px solid rgba(241,237,228,.14);
  font-size:9.5px; color:#8d7f70;
}
.foot-base a { color:#c9bfb2; text-decoration:none; }
.foot-base a:hover { color:var(--red); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns:1fr; gap:50px; }
  .hero-sub { margin-left:0; }
  .hero-photo { justify-self:start; width:min(340px, 70vw); }
  .hero-watermark { font-size:40vh; }
  .race-card { position:relative; left:0; bottom:0; margin-top:50px; }
  .scroll-cue { display:none; }
  .stats-band { grid-template-columns:1fr 1fr; }
  .stat:nth-child(2) { border-right:none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom:1.5px solid rgba(22,18,15,.14); }
  .gal-grid { grid-template-columns:1fr; gap:40px; }
  .shot { grid-column:1 / -1 !important; margin-top:0 !important; }
  .links { display:none; }
}