/* ---------------------------------------------------------------------------
   Posh Club — "The Key and the Aperture"
   Tokens follow DESIGN.md. Petrol is sampled from logos/colored.png: #003d4f.
   --------------------------------------------------------------------------- */

:root{
  /* Colors */
  --petrol:#003d4f;
  --brass:#a8823f;
  --white:#ffffff;
  --plaster:#f4f2ef;
  --ink:#0b2029;
  --haze:#8fa6ae;

  /* Sparse spacing scale — the large steps are the point */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px; --s7:168px;

  /* Type */
  --display:"Bodoni Moda",Didot,"Bodoni 72",serif;
  --ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ease-out:cubic-bezier(.16,1,.3,1);
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--ui);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,video{max-width:100%;display:block}

/* --- utilities ----------------------------------------------------------- */

.u-defs{position:absolute;width:0;height:0;overflow:hidden}

.u-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.u-skip{
  position:absolute;inset-block-start:-100%;inset-inline-start:var(--s2);
  z-index:100;background:var(--petrol);color:var(--white);
  padding:var(--s2) var(--s3);font-size:.75rem;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;
}
.u-skip:focus{inset-block-start:var(--s2)}

/* --- brand mark ----------------------------------------------------------- */
/* The logo is masked rather than drawn, so the system controls its color and it
   inverts onto film or petrol without needing a second asset. */

.lockup{
  display:block;aspect-ratio:1920/800;
  -webkit-mask:url("/assets/img/colored.png") no-repeat center/contain;
          mask:url("/assets/img/colored.png") no-repeat center/contain;
}
.lockup--full{width:clamp(240px,24vw,360px);background:var(--petrol)}
.lockup--light{width:clamp(230px,26vw,400px);background:var(--white)}

/* --- buttons -------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:.75rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  border-radius:0;                     /* engraved plates have square corners */
  transition:background-color .4s var(--ease-out),color .4s var(--ease-out),
             border-color .4s var(--ease-out);
}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.btn--solid{
  background:var(--petrol);color:var(--white);
  padding:var(--s2) var(--s4);border:1px solid var(--petrol);
}
.btn--solid:hover{background:var(--ink);border-color:var(--ink)}

.btn--light{
  background:transparent;color:var(--white);
  padding:var(--s2) var(--s4);border:1px solid rgba(255,255,255,.62);
}
.btn--light:hover{background:var(--white);color:var(--petrol);border-color:var(--white)}

.btn--quiet{
  color:var(--petrol);padding:var(--s2) 0;border:0;
  border-block-end:1px solid var(--haze);
}
.btn--quiet:hover{border-block-end-color:var(--brass);color:var(--brass)}

/* The one rationed piece of metal in the system. */
.rule{
  display:block;inline-size:64px;block-size:1px;background:var(--brass);
  border:0;margin-block:var(--s3);
}

/* --- hero ----------------------------------------------------------------- */

.hero{
  position:relative;
  min-block-size:100svh;
  overflow:hidden;
  background:var(--white);
}

/* The aperture is the clipped element itself: depth comes from the opening,
   never from a shadow. Both the film and the still live inside it. */
.hero__aperture{
  position:absolute;inset:0;
  clip-path:url(#apertureClip);
  will-change:clip-path;
}

.hero__video,
.hero__still{
  position:absolute;inset:0;
  inline-size:100%;block-size:100%;
  object-fit:cover;
  will-change:transform;
}
.hero__video{object-position:50% 50%}
.hero__still{object-position:50% 30%;opacity:0}

/* During the hand-off the aperture leaves the hero's flow and holds still in
   the viewport while the page scrolls the privileges section up beneath it, so
   it can land exactly on the first card. */
.hero__aperture.is-handoff{position:fixed;inset:0;z-index:6}
.hero__aperture.is-done{opacity:0;pointer-events:none}

/* Sized to the aperture's own bounds each frame, so its crop matches the card
   it is about to become rather than the full viewport. */
.hero__handoff{
  position:absolute;inset:auto;
  object-fit:cover;opacity:0;
  will-change:top,left,width,height,opacity;
}

/* Legibility only: the film runs bright, and the opening titles sit on it. */
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,61,79,.46) 0%,
    rgba(0,61,79,.14) 42%,
    rgba(0,61,79,.58) 100%);
}

/* Opening state — over the film */
.hero__open{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding-inline:var(--s3);
}
.hero__mark{margin:0}
.hero__whisper{
  margin:var(--s4) 0 0;
  font-family:var(--ui);font-size:.75rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--white);
}
.hero__open-cta{margin-block-start:var(--s5)}

/* Names the action that turns the key, so the device is never a puzzle. */
.hero__cue{
  position:absolute;inset-block-end:clamp(var(--s3),5vh,var(--s4));
  inset-inline:0;margin:0;
  font-size:.6875rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(255,255,255,.78);
}
.hero__cue::after{
  content:"";display:block;inline-size:1px;block-size:26px;
  background:var(--brass);margin:var(--s2) auto 0;
  transform-origin:top;animation:cue 2.8s var(--ease-out) infinite;
}
@keyframes cue{
  0%,100%{transform:scaleY(.35);opacity:.5}
  50%    {transform:scaleY(1);opacity:1}
}

/* Resting state — the opened arch */
.hero__rest{
  position:absolute;inset-block:0;inset-inline-start:0;
  inline-size:min(42%,520px);
  display:flex;flex-direction:column;justify-content:center;
  padding-inline-start:clamp(var(--s4),6vw,var(--s7));
  padding-inline-end:var(--s4);
  opacity:0;
}
/* The wordmark leads; the tagline answers it. */
.hero__tagline{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.35rem,2vw,1.8rem);
  font-weight:400;line-height:1.25;letter-spacing:.01em;
  color:var(--petrol);
  text-wrap:balance;
}
.hero__lede{margin:var(--s3) 0 0;max-inline-size:34ch;color:var(--ink)}
.hero__actions{
  display:flex;align-items:center;gap:var(--s4);
  margin-block-start:var(--s5);flex-wrap:wrap;
}

/* --- privileges ----------------------------------------------------------- */
/* A hand of key tags on one brass ring. Every tag pivots at its punched hole,
   so the hand swings the way keys actually swing. */

/* The hand runs the full width; the copy sits beneath it. */
.privileges{
  position:relative;
  min-block-size:100svh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:clamp(var(--s3),3vh,var(--s4));
  padding-inline:clamp(var(--s3),5vw,var(--s6));
  padding-block:var(--s6);
  background:var(--white);
}

.privileges__label{
  margin:0;
  font-size:.6875rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--haze);
}

.detail{
  inline-size:100%;
  max-inline-size:min(100%,880px);
  text-align:start;
}
.detail__heading{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.55rem,2.6vw,2.4rem);
  font-weight:400;line-height:1.15;letter-spacing:.01em;
  color:var(--petrol);
  text-wrap:balance;
}
/* Two columns keep the measure short under a full-width fan instead of
   stringing one long line across the page. */
.detail__list{
  margin:var(--s4) 0 0;padding:0;list-style:none;
  columns:2;column-gap:var(--s5);
}
.detail__list li{
  position:relative;
  padding-inline-start:var(--s3);
  margin-block-end:var(--s2);
  color:var(--ink);
  break-inside:avoid;
}
/* The bit of a key, cut small. The system's one rationed metal. */
.detail__list li::before{
  content:"";position:absolute;
  inset-inline-start:0;inset-block-start:.82em;
  inline-size:13px;block-size:1px;background:var(--brass);
}
.detail{transition:opacity .32s var(--ease-out),transform .32s var(--ease-out)}
.detail.is-swapping{opacity:0;transform:translateY(7px)}

.fan{
  position:relative;
  inline-size:100%;
  block-size:clamp(300px,44vh,420px);
  --card-w:clamp(150px,16.5vw,236px);
}

.card{
  position:absolute;
  inset-block-start:50%;inset-inline-start:50%;
  inline-size:var(--card-w);aspect-ratio:3/4;
  appearance:none;border:0;padding:0;background:none;
  cursor:pointer;overflow:hidden;
  /* A key card has a radius; engraved plates elsewhere in the system do not. */
  border-radius:14px;
  opacity:0;
  transition:transform .55s var(--ease-out);
  will-change:transform,opacity;
}
/* While the hand is fanning open under the scroll, transform is driven frame
   by frame — a transition here would lag a half second behind the scroll. */
.fan.is-settling .card{transition:none}

/* While the hero's arch is flying toward the first card, the card itself must
   not also be on screen. It appears the instant the aperture lands on it. */
.handing-off .privileges .card:first-child{opacity:0 !important}
.card picture{position:absolute;inset:0}
.card__photo{
  inline-size:100%;block-size:100%;object-fit:cover;
  filter:saturate(.62) contrast(.94);
  transition:filter .55s var(--ease-out);
}
.card.is-active .card__photo{filter:none}

/* Unfocused cards recede into the white ground. On a white page a plain
   opacity drop reads as broken, so they lose colour and sit back instead. */
.card__veil{
  position:absolute;inset:0;pointer-events:none;
  background:var(--white);opacity:.52;
  transition:opacity .55s var(--ease-out);
}
.card.is-active .card__veil{opacity:0}

.card__label{
  position:absolute;z-index:2;inset-inline:0;inset-block-end:0;
  padding:var(--s5) var(--s2) var(--s2);
  color:var(--white);
  font-size:.625rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;text-align:center;
  /* Legibility only, and only where the label sits. */
  background:linear-gradient(180deg,rgba(0,41,58,0) 0%,rgba(0,41,58,.72) 72%);
  opacity:.75;
  transition:opacity .55s var(--ease-out);
}
.card.is-active .card__label{opacity:1}

.card:focus-visible{outline:2px solid var(--brass);outline-offset:4px}

/* Only the deck needs telling; on a pointer device the focused card and the
   panel beside it already explain themselves. */
.privileges__hint{display:none}

/* --- narrow screens ------------------------------------------------------- */
/* The frame device persists; it flattens rather than disappearing. */

@media (max-width:899px){
  .privileges{
    grid-template-columns:1fr;
    align-content:center;
    gap:var(--s4);
    padding-inline:var(--s3);
    padding-block:var(--s5);
  }
  /* The arc becomes a native scroll-snap deck. No invented gesture, no hover
     dependency, and the centred card is the focused one. */
  .fan{
    block-size:auto;
    --card-w:min(62vw,240px);
    display:flex;
    gap:var(--s3);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-block:var(--s2);
    padding-inline:calc(50% - var(--card-w) / 2);
  }
  .fan::-webkit-scrollbar{display:none}
  .card{
    position:static;
    flex:0 0 var(--card-w);
    scroll-snap-align:center;
    transform:none;
  }
  .card.is-active{transform:none}
  /* One column: at this width two columns cut the lines into ribbons. */
  .detail__list{columns:1;margin-block-start:var(--s3)}
  .detail__list li{font-size:1rem}
  .privileges__hint{
    display:block;position:static;margin:var(--s2) 0 0;
    font-size:.6875rem;font-weight:500;letter-spacing:.24em;
    text-transform:uppercase;color:var(--haze);
  }
}
  /* Starts below the arch's foot so the wordmark can never ride onto the photo. */
  .hero__rest{
    inset-block:53% 0;inset-inline:0;
    inline-size:auto;
    justify-content:flex-start;
    padding-inline:var(--s3);
    padding-block-start:var(--s3);
  }
  .hero__tagline{font-size:clamp(1.2rem,5vw,1.5rem)}
  .hero__lede{max-inline-size:none;font-size:1rem}
  .hero__actions{gap:var(--s3);margin-block-start:var(--s4)}
  .lockup--full{width:clamp(150px,40vw,200px)}
  .hero__open-cta{margin-block-start:var(--s4)}
  .rule{margin-block:var(--s2) var(--s3)}
  /* The image is cropped hard at this width; bias it toward the sea window. */
  .hero__still{object-position:34% 28%}
}

/* --- reduced motion ------------------------------------------------------- */
/* Lands on the opened, readable end state immediately. Nothing waits. */

@media (prefers-reduced-motion:reduce){
  .hero__open{display:none}
  .hero__scrim{display:none}
  .hero__video{display:none}
  .hero__still{opacity:1 !important}
  .hero__rest{opacity:1 !important;transform:none !important}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}