/* Vermilion Boatworks — Boatworks
   Scene: a welding shop at night. Bare aluminium under a work light, the
   orange of a fresh weld, and everything else in shadow.
   The hull is the page: a pinned WebGL stage you scroll down the length of.
   Type is condensed and heavy because it is stencilled on a transom, and the
   numbers are mono because on a boat every number is a specification. */

:root{
  --night:#0B1014;
  --night-2:#0F161B;
  --steel:#1A232A;
  --alum:#C9D4DC;
  --alum-2:rgba(201,212,220,.70);
  --alum-3:rgba(201,212,220,.44);
  --weld:#E08A3C;
  --edge:rgba(201,212,220,.12);

  --display:'Anton', system-ui, sans-serif;
  --body:'Barlow', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --page:1240px;
  --pad:clamp(20px,5vw,64px);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0; background:var(--night); color:var(--alum);
  font-family:var(--body); font-size:clamp(16px,1.05vw,17.5px); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--display); font-weight:400; margin:0; line-height:.98; letter-spacing:.005em; text-transform:uppercase; }
a{ color:inherit; }
/* height:auto is required: the width/height attributes on every <img> would
   otherwise beat aspect-ratio and render images at their intrinsic height. */
img,canvas,svg{ display:block; max-width:100%; height:auto; }
:focus-visible{ outline:2px solid var(--weld); outline-offset:3px; }
.wrap{ max-width:var(--page); margin:0 auto; padding-inline:var(--pad); }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--weld); color:var(--night); padding:12px 18px; }
.skip:focus{ left:10px; top:10px; }

.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--weld); margin:0 0 14px; }
.section-title{ font-size:clamp(30px,4.4vw,60px); margin-bottom:18px; }
.section-sub{ color:var(--alum-2); margin:0 0 clamp(28px,3.4vw,46px); max-width:58ch; }

.btn{
  display:inline-block; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--weld); color:var(--night); border:1px solid var(--weld); border-radius:2px;
  padding:14px 28px;
  font-family:var(--display); font-size:17px; text-transform:uppercase; letter-spacing:.05em;
  transition:background .18s ease, color .18s ease;
}
.btn:hover{ background:transparent; color:var(--weld); }
.btn-sm{ padding:9px 18px; font-size:14px; }
.btn-wide{ display:block; width:100%; }

/* ---------------------------------- nav */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:22px;
  padding:16px var(--pad);
  background:linear-gradient(180deg, rgba(11,16,20,.92), rgba(11,16,20,0));
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; font-family:var(--display); font-size:19px; text-transform:uppercase; letter-spacing:.02em; }
.mark{ width:26px; height:26px; color:var(--alum); }
.brand em{ display:block; font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--weld); }
.links{ display:flex; gap:26px; margin-left:auto; }
.links a{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--alum-3); text-decoration:none; }
.links a:hover{ color:var(--alum); }
@media (max-width:860px){ .links{ display:none; } .nav .btn-sm{ margin-left:auto; } }

/* ================= THE PINNED HULL STAGE =================
   Tall section, sticky viewport inside it. Scrolling the section drives the
   camera; the canvas never moves. */
.stage{ position:relative; height:420vh; background:var(--night); }
.stage-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
#hullCanvas{ position:absolute; inset:0; width:100%; height:100%; }

/* a faint deck grid so the hull is sitting in a place, not floating in a void */
.stage-sticky::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 50% at 50% 58%, rgba(224,138,60,.10), transparent 70%),
    radial-gradient(90% 70% at 50% 120%, rgba(143,199,255,.07), transparent 70%);
}

.fallback{ position:absolute; inset:0; display:none; place-items:center; padding:0 6vw; }
.stage.is-fallback .fallback{ display:grid; }
.stage.is-fallback #hullCanvas{ display:none; }

.stage-ui{ position:absolute; inset:0; pointer-events:none; display:flex; flex-direction:column; justify-content:flex-end; }
.stage-badge{
  position:absolute; top:96px; left:var(--pad); margin:0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--alum-3);
}
.stage-badge::before{ content:'▾ '; color:var(--weld); }

.specs{ position:relative; padding:0 var(--pad) clamp(48px,8vh,90px); max-width:640px; }
.spec{
  position:absolute; bottom:clamp(48px,8vh,90px); left:var(--pad); right:var(--pad);
  opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease;
}
.spec.is-on{ opacity:1; transform:none; }
.spec-n{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--weld); margin:0 0 14px; }
.spec h2{ font-size:clamp(32px,5.4vw,72px); margin-bottom:16px; }
.spec p{ margin:0; color:var(--alum-2); max-width:46ch; font-size:clamp(15px,1.3vw,17px); }
/* the stack needs height even though the items are absolute */
.specs::after{ content:''; display:block; height:clamp(190px,26vh,260px); }

/* ---------------------------------- spec band */
.band{ background:var(--steel); border-block:1px solid var(--edge); }
.band-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:22px; padding-block:clamp(28px,4vw,44px); }
.fig{ font-family:var(--display); font-size:clamp(30px,3.8vw,46px); margin:0 0 6px; color:var(--alum); }
.fig-l{ margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--alum-3); }

/* ---------------------------------- sections */
.section{ padding-block:clamp(56px,7vw,104px); }
.section--dark{ background:var(--night-2); border-block:1px solid var(--edge); }

.hulls{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2px; background:var(--edge); border:1px solid var(--edge); }
.hull{ background:var(--night); padding:28px 26px 32px; }
.hull--on{ background:var(--steel); box-shadow:inset 3px 0 0 var(--weld); }
.hull-len{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--weld); margin:0 0 14px; }
.hull h3{ font-size:30px; margin-bottom:12px; }
.hull p{ color:var(--alum-2); font-size:15.5px; margin:0 0 18px; }
.hull dl{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; padding-top:16px; border-top:1px solid var(--edge); }
.hull dt{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--alum-3); }
.hull dd{ margin:0; font-family:var(--mono); font-size:13px; color:var(--alum); }

/* ---------------------------------- steps */
.steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:34px 30px; }
.steps span{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--weld); margin-bottom:16px; }
.steps h3{ font-size:23px; margin-bottom:11px; }
.steps p{ margin:0; color:var(--alum-2); font-size:15.5px; }

/* ---------------------------------- order */
.order{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,64px); align-items:start; }
@media (max-width:860px){ .order{ grid-template-columns:1fr; } }
.order-info{ display:grid; grid-template-columns:auto 1fr; gap:14px 26px; margin:0; }
.order-info dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--weld); padding-top:3px; }
.order-info dd{ margin:0; color:var(--alum-2); }
.form label{ display:block; margin-bottom:15px; }
.form span{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--alum-3); margin-bottom:8px; }
.form input,.form select,.form textarea{
  width:100%; font-family:var(--body); font-size:16px; color:var(--alum);
  background:var(--steel); border:1px solid var(--edge); border-radius:2px; padding:13px 15px;
}
.form textarea{ resize:vertical; }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--weld); outline:none; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .row{ grid-template-columns:1fr; } }
.sent{ margin:14px 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--weld); text-align:center; }

/* ---------------------------------- footer */
.foot{ border-top:1px solid var(--edge); padding-block:clamp(40px,5vw,68px); color:var(--alum-2); font-size:15px; }
.foot p{ margin:0 0 8px; }
.foot-mark{ font-family:var(--display); font-size:30px; text-transform:uppercase; color:var(--alum); }
.fine{ margin-top:22px; font-family:var(--mono); font-size:11px; line-height:1.85; color:var(--alum-3); max-width:78ch; }

/* ---------------------------------- demo tag */
.demo-tag{
  position:fixed; right:14px; bottom:14px; z-index:70;
  display:flex; flex-direction:column; gap:1px;
  background:var(--weld); color:var(--night);
  padding:10px 18px; border-radius:2px; text-decoration:none; text-align:center;
  font-size:11px; line-height:1.5;
}
.demo-tag span{ font-family:var(--mono); opacity:.75; text-transform:uppercase; font-size:9px; letter-spacing:.16em; }
.demo-tag strong{ font-family:var(--display); font-weight:400; font-size:13px; text-transform:uppercase; }
.demo-tag:hover{ background:var(--alum); }