/* SWP adopts the homepage's viewport, brand tokens and type. */
:root { --blue:#0943c2; --paper:#f0f4d9; --red:#fc3c2d; }
* { box-sizing:border-box; }
html { background:var(--blue); }
body.swp-page {
  margin:0;
  height:100vh;
  height:100svh;
  height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  background:var(--blue);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:2px solid var(--paper); outline-offset:6px; }
h1,h2,p,figure { margin:0; }
.topbar {
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  padding: max(25px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) 25px max(var(--gutter),env(safe-area-inset-left));
  background:var(--blue);
}
.wordmark { display:inline-flex; align-items:center; font-weight:800; min-height:34px; }
.wordmark img { display:block; border-radius:50%; mix-blend-mode:screen; }
main {
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overflow-anchor:none;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-y:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
main::-webkit-scrollbar { display:none; }
main:focus { outline:none; }
main:focus-visible { outline:1px solid #f0f4d950; outline-offset:-1px; }
.campaign {
  position:relative;
  display:grid;
  grid-template-columns:48% 52%;
  align-items:center;
  height:100%;
  min-height:0;
  isolation:isolate;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:var(--blue);
}
.series-copy {
  position:relative;
  z-index:1;
  min-width:0;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-bottom:4%;
}
.series-copy :is(h1,h2) {
  font-family:'Nunchi Grotesk',Helvetica,Arial,sans-serif;
  font-size:clamp(52px,8.35vw,170px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.055em;
  white-space:nowrap;
}
.trademark {
  position:relative;
  top:.4em;
  margin-left:.18em;
  font-size:clamp(12px,.24em,36px);
  line-height:1;
  letter-spacing:0;
  vertical-align:top;
}
.series-copy p {
  margin-top:27px;
  font-size:clamp(16px,1.55vw,25px);
  line-height:1.4;
  letter-spacing:-.025em;
  max-width:26em;
  padding-right:12px;
}
.series-cta {
  display:inline-flex;
  align-items:center;
  gap:28px;
  margin-top:32px;
  font-family:'Nunchi Grotesk',Helvetica,Arial,sans-serif;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.02em;
  min-height:48px;
}
.cta-arrow { display:grid; place-items:center; width:48px; height:48px; flex:none; background:var(--red); transition:background 180ms ease,color 180ms ease; }
.cta-arrow svg { display:block; width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform 220ms ease; }
.series-cta:hover .cta-arrow { background:var(--paper); color:var(--blue); }
.series-cta:hover svg { transform:translate(2px,-2px); }
.series-art {
  position:relative;
  z-index:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  min-height:0;
  min-width:0;
  margin-left:-3%;
  margin-right:-3%;
  pointer-events:none;
}
.series-art img {
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  /* Blend only blue margins, keeping metal contours and shadows intact. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 87%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 87%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 88%,transparent);
  mask-composite:intersect;
}
.series-art,.series-copy { transition:opacity 650ms ease,transform 850ms cubic-bezier(.16,1,.3,1); }
.has-screen-motion .campaign:not(.is-active) .series-art { opacity:.2; transform:translateY(30px) scale(.96); }
.has-screen-motion .campaign:not(.is-active) .series-copy { opacity:.15; transform:translateY(28px); }
.is-loop-reset .series-art,.is-loop-reset .series-copy { transition:none; }
.footer {
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  margin:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));
  padding:0 0 env(safe-area-inset-bottom);
  min-height:44px;
  border-top:1px solid #f0f4d92b;
  background:var(--blue);
  color:#f0f4d9b3;
}
.footer-links { gap:24px; }
.footer a { display:flex; align-items:center; min-height:44px; }
.footer a:hover,.footer a[aria-current] { color:var(--paper); }
.footer a:hover { text-decoration:underline; text-underline-offset:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Portrait reserves separate rows for copy and art; neither can cover the other. */
@media (max-aspect-ratio:1/1) {
  .campaign { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); align-items:stretch; }
  .series-copy { padding:clamp(16px,3.5dvh,40px) var(--gutter) 0; }
  .series-copy :is(h1,h2) { font-size:clamp(48px,13.4vw,150px); }
  .series-copy p { margin-top:18px; font-size:clamp(16px,2.7vw,24px); }
  .series-cta { margin-top:20px; }
  .series-art { margin:0; }
  .series-art img { max-width:100%; }
}
@media (max-width:650px) {
  :root { --gutter:24px; }
  .topbar { padding: max(18px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 18px max(24px,env(safe-area-inset-left)); }
  .wordmark { font-size:16px; min-height:30px; gap:8px; }
  .wordmark img { width:30px; height:30px; }
  .series-copy :is(h1,h2) { font-size:12.8vw; }
  .series-copy p { margin-top:14px; font-size:16px; }
  .series-cta { font-size:14px; gap:22px; margin-top:18px; min-height:44px; }
  .cta-arrow { width:44px; height:44px; }
  .cta-arrow svg { width:21px; height:21px; }
  .footer { font-size:10px; }
  .footer-links { gap:20px; }
}
@media (max-height:560px) and (orientation:landscape) {
  .topbar { padding-top:max(10px,env(safe-area-inset-top)); padding-bottom:10px; }
  .wordmark img { width:28px; height:28px; }
  .series-copy :is(h1,h2) { font-size:7.7vw; }
  .series-copy p { margin-top:12px; font-size:15px; }
  .series-cta { margin-top:16px; font-size:14px; min-height:44px; }
  .cta-arrow { width:44px; height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  main { scroll-behavior:auto; }
  .series-art,.series-copy,.cta-arrow,.cta-arrow svg { transition:none; }
  .has-screen-motion .campaign:not(.is-active) .series-art,
  .has-screen-motion .campaign:not(.is-active) .series-copy { opacity:1; transform:none; }
}
