/* Paul Parker(TM) - www.paulparker.de
   Two colours only: brand navy (measured from the logo) and white.
   Every tint on the page is navy at reduced opacity over white. */

@font-face{font-family:"Porsche Next";src:url("fonts/PorscheNext-Thin.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Porsche Next";src:url("fonts/PorscheNext-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Porsche Next";src:url("fonts/PorscheNext-ThinBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Porsche Next";src:url("fonts/PorscheNext-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --navy:#12225E;
  --white:#FFFFFF;
  --navy-line:rgba(18,34,94,.14);
  --white-soft:rgba(255,255,255,.62);
  --white-line:rgba(255,255,255,.22);
  --gutter:clamp(1.5rem,6vw,6rem);
  --haze:clamp(130px,24vh,300px);
  --bar:1.9355s; /* one bar at 124 BPM; every drift lasts a whole number of bars */
  --ease-out:cubic-bezier(.16,.84,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--white);color:var(--navy);
  font-family:"Porsche Next","Porsche Next TT","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:1.0625rem;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--navy);color:var(--white)}
.tide ::selection{background:var(--white);color:var(--navy)}
:focus-visible{outline:2px solid currentColor;outline-offset:5px;border-radius:1px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- The tide: navy field whose edge dissolves into the white ------------- */
.tide{position:relative;background:var(--navy);color:var(--white)}
.haze{
  position:absolute;left:-4px;right:-4px;bottom:calc(100% - 1px);height:var(--haze);
  overflow:hidden;pointer-events:none;transform-origin:50% 100%;
  animation:breathe calc(var(--bar)*8) ease-in-out infinite alternate;
  background:linear-gradient(180deg,
    rgba(18,34,94,0) 0%,rgba(18,34,94,.013) 12%,rgba(18,34,94,.049) 24%,rgba(18,34,94,.104) 35%,
    rgba(18,34,94,.175) 45%,rgba(18,34,94,.259) 54%,rgba(18,34,94,.352) 62%,rgba(18,34,94,.45) 69%,
    rgba(18,34,94,.55) 75%,rgba(18,34,94,.648) 81%,rgba(18,34,94,.741) 86%,rgba(18,34,94,.825) 90%,
    rgba(18,34,94,.896) 94%,rgba(18,34,94,.951) 97%,#12225E 100%);
}
.c{position:absolute;display:block;border-radius:50%;will-change:transform;
   animation:ease-in-out infinite alternate}
/* navy clouds rise into the white */
.n1,.n2,.n3,.n4{background:radial-gradient(closest-side,rgba(18,34,94,.62),rgba(18,34,94,.28) 50%,rgba(18,34,94,0))}
/* white clouds sink into the navy */
.l1,.l2,.l3{background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(255,255,255,.2) 55%,rgba(255,255,255,0))}

.n1{left:-15%;top:30%;width:60%;height:80%;animation-name:n1;animation-duration:calc(var(--bar)*16)}
.n2{left:40%;top:18%;width:45%;height:92%;animation-name:n2;animation-duration:calc(var(--bar)*12)}
.n3{left:70%;top:34%;width:50%;height:76%;animation-name:n3;animation-duration:calc(var(--bar)*24)}
.n4{left:18%;top:14%;width:24%;height:92%;animation-name:n4;animation-duration:calc(var(--bar)*20)}
.l1{left:6%;top:30%;width:32%;height:58%;animation-name:l1;animation-duration:calc(var(--bar)*14)}
.l2{left:52%;top:34%;width:28%;height:54%;animation-name:l2;animation-duration:calc(var(--bar)*18)}
.l3{left:80%;top:28%;width:24%;height:60%;animation-name:l3;animation-duration:calc(var(--bar)*22)}

/* fine navy grain keeps the soft gradients from banding */
.haze::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .133 0 0 0 0 .369 0 0 0 .55 -.22'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(180deg,transparent 10%,#000 45%,#000 75%,transparent);
  mask-image:linear-gradient(180deg,transparent 10%,#000 45%,#000 75%,transparent);
}
@keyframes breathe{to{transform:scaleY(1.14)}}
@keyframes n1{to{transform:translate3d(18vw,-10%,0) scale(1.15)}}
@keyframes n2{to{transform:translate3d(-14vw,5%,0) scale(.9)}}
@keyframes n3{to{transform:translate3d(-22vw,-12%,0) scale(1.2)}}
@keyframes n4{to{transform:translate3d(26vw,-18%,0) scale(1.1)}}
@keyframes l1{to{transform:translate3d(22vw,3%,0) scale(1.1)}}
@keyframes l2{to{transform:translate3d(-18vw,-8%,0) scale(.85)}}
@keyframes l3{to{transform:translate3d(-12vw,3%,0) scale(1.08)}}

/* ---- Links inside the tide ------------------------------------------------ */
.tide a{
  color:var(--white);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.28em;text-decoration-color:var(--white-line);
  transition:text-decoration-color .25s ease;
}
.tide a:hover,.tide a:focus-visible{text-decoration-color:var(--white)}

.legal{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;
  font-size:.875rem;color:var(--white-soft);
}
.legal p{margin:0}
.legal nav{display:flex;gap:1.75rem}
.legal a{color:var(--white-soft);text-decoration-color:transparent}
.legal a:hover,.legal a:focus-visible,.legal a[aria-current="page"]{color:var(--white);text-decoration-color:var(--white-line)}

/* ---- Homepage ------------------------------------------------------------- */
.stage{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow:clip}

.sky{
  display:flex;align-items:center;
  padding:clamp(2rem,7vh,5rem) var(--gutter) calc(var(--haze) * .52 + 1rem);
}
.ident{width:clamp(17rem,74vw,70rem)}
.brand{margin:0}
.brand img{width:100%}
.claims{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15em;
  margin:clamp(.9rem,2vw,1.9rem) 0 0;
  font-size:clamp(1.0625rem,2vw,1.875rem);line-height:1.2;letter-spacing:-.005em;
}

.home .tide{
  min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(1.25rem,4vh,3rem);
  padding:clamp(.5rem,2vh,1.5rem) var(--gutter) clamp(1.25rem,3vh,2rem);
}
.links{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem clamp(3rem,8vw,8rem)}
.link{font-size:clamp(1.625rem,3.4vw,2.75rem);line-height:1.2;letter-spacing:-.01em}
.home .legal{padding-top:1.25rem}

/* One orchestrated load: the logo is drawn in, the claims appear, the tide rises, the links surface. */
.brand img{animation:draw 1.2s cubic-bezier(.7,0,.2,1) .15s both}
.home .tide{animation:rise 1.5s var(--ease-out) .55s both}
.claims{animation:surface .8s ease-out 1.2s both}
.home .links,.home .legal{animation:surface .7s ease-out 1.6s both}
@keyframes draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rise{from{transform:translateY(calc(100% + var(--haze)))}}
@keyframes surface{from{opacity:0}}

/* ---- Sound button --------------------------------------------------------
   Small, quiet, top right. Pressed means the jingle is running. */
.sound{
  position:absolute;top:clamp(1rem,3.5vh,2.25rem);right:var(--gutter);z-index:2;
  width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:50%;
  background:none;color:var(--navy);cursor:pointer;
  display:grid;place-items:center;
  opacity:.45;transition:opacity .25s ease,transform .25s ease;
  animation:surface .8s ease-out 2s both;
}
.sound:hover,.sound:focus-visible{opacity:1}
.sound:active{transform:scale(.92)}
.sound svg{width:1.5rem;height:1.5rem;overflow:visible}
.sound .cone{fill:currentColor}
.sound .wave,.sound .cross{
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;
}
/* waves while it plays, a cross while it is silent */
.sound .wave{opacity:0;transition:opacity .2s ease}
.sound .cross{opacity:1;transition:opacity .2s ease;transform:translateX(1px) scale(1.15);transform-origin:17.9px 12px}
.sound[aria-pressed="true"] .wave{opacity:1}
.sound[aria-pressed="true"] .cross{opacity:0}
.sound[aria-pressed="true"] .w-a{animation:pulse 1.6s ease-in-out infinite}
.sound[aria-pressed="true"] .w-b{animation:pulse 1.6s ease-in-out .2s infinite}
@keyframes pulse{50%{opacity:.35}}

@media (prefers-reduced-motion:reduce){
  .sound,.sound .w-a,.sound .w-b{animation:none}
}

/* ---- Legal pages ---------------------------------------------------------- */
.masthead{padding:clamp(1.75rem,5vh,3rem) var(--gutter) 0}
.mark{display:inline-block;width:clamp(10rem,20vw,14rem)}

.doc{
  max-width:calc(40rem + 2 * var(--gutter));
  padding:clamp(3rem,10vh,6rem) var(--gutter) calc(var(--haze) * .7 + 3rem);
}
.doc h1{
  margin:0 0 1.25rem;font-weight:200;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(2.5rem,6.5vw,4.75rem);
}
.doc .lede{font-size:1.1875rem;line-height:1.55;margin-bottom:3rem;max-width:34em}
.doc h2{
  margin:2.75rem 0 .6rem;padding-top:1.25rem;border-top:1px solid var(--navy-line);
  font-size:1.0625rem;font-weight:600;letter-spacing:0;
}
.doc p{margin:0 0 1rem;max-width:65ch}
.doc address{font-style:normal;margin:0 0 1rem}
.doc a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:var(--navy-line);transition:text-decoration-color .25s ease;
}
.doc a:hover,.doc a:focus-visible{text-decoration-color:var(--navy)}
.doc .stamp{margin-top:3rem;font-size:.875rem;opacity:.7}

.tide--foot{padding:clamp(3.5rem,12vh,6rem) var(--gutter) clamp(1.25rem,3vh,2rem)}

/* ---- Small screens -------------------------------------------------------- */
@media (max-width:640px){
  .links{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .home .tide{min-height:0}
  .ident{width:84vw}
  :root{--haze:240px}
  .c{width:95%}
  .n1{left:-45%}.n2{left:15%}.n3{left:50%}.n4{left:-5%;width:70%}
  .l1{left:-25%}.l2{left:25%}.l3{left:60%}
  .legal{flex-direction:column;gap:.75rem}
}

/* ---- Short windows: laptops and phones held sideways ----------------------
   The homepage is meant to fit the window without scrolling, so on a low
   viewport the band and the paddings give way first. */
@media (max-height:800px){
  :root{--haze:clamp(120px,20vh,220px)}
  .sky{padding-top:clamp(1.25rem,4vh,3rem)}
  .home .tide{gap:clamp(1rem,3vh,2rem)}
}
@media (max-height:560px){
  :root{--haze:clamp(90px,17vh,150px)}
  .sky{padding-top:clamp(.75rem,3vh,1.5rem);padding-bottom:calc(var(--haze) * .45 + .5rem)}
  .ident{width:clamp(15rem,52vw,40rem)}
  .claims{font-size:clamp(.9375rem,1.6vw,1.125rem);margin-top:.6rem}
  .link{font-size:clamp(1.125rem,2.4vw,1.5rem)}
  .home .tide{gap:.75rem;padding-bottom:.75rem}
}

/* ---- Reduced motion: everything is in place, nothing moves ---------------- */
@media (prefers-reduced-motion:reduce){
  .haze,.c,.brand img,.claims,.home .tide,.home .links,.home .legal{animation:none}
}

/* ---- Variant A: sunset plume, particles ------------------------------------
   A canvas on top of the navy tide. Screen blending means the warm colour only
   shows where the ground is dark, so it fades out by itself towards the white. */
.plume{
  position:absolute;left:0;top:calc(var(--haze) * -1.25);
  width:100%;height:calc(100% + var(--haze) * 1.25);display:block;
  pointer-events:none;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 42%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 42%);
}
.home .tide,.tide--foot{isolation:isolate}