/* BIN ARIFF · THE UNSEEN — editorial typography and tactile RSVP controls.
   Visual-only overrides. No changes to scene/navigation/RSVP state logic. */
:root{
  --bg:#020906;--forest:#061710;--cream:#f6f0e4;
  --gold:#d6bd8a;--green:#bbd8ba;--emerald:#0d5942;
  --muted:#b1b6a9;--line:rgba(210,186,130,.22);
  --serif:'Bodoni Moda','Didot','Bodoni MT',Georgia,serif;
  --sans:'Manrope','Helvetica Neue',Arial,sans-serif;
}
html,body{font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button, input, select{font-family:var(--sans)}
.device{background:#020a07}
.ambient{opacity:.77}
.brand{gap:7px!important}
.brand-icon{height:47px;width:44px;filter:drop-shadow(0 4px 22px rgba(245,225,168,.08))}
.brand .wordmark{
  font-family:var(--sans);font-size:13px;letter-spacing:.32em;
  font-weight:600;color:#f1ebdf;text-indent:.32em
}
.eyebrow{
  font-family:var(--sans);font-size:10px;letter-spacing:.17em;
  font-weight:700;color:#dfc89b;line-height:1.5;
}
.display,.overview h1{
  font-family:var(--serif);font-weight:500;
  text-transform:none;letter-spacing:-.045em;line-height:1.08;
  color:#f8f1e4;text-wrap:balance;
}
.display em,.overview h1 em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:#e4cb95;letter-spacing:-.052em;
}
.display{font-size:clamp(36px,4vw,48px)}
.subcopy{
  color:#c6cabd;font-size:13.5px;line-height:1.77;
  letter-spacing:.003em;max-width:330px;font-weight:400;
  text-wrap:pretty;
}
.hairline{height:1px;width:54px;background:linear-gradient(90deg,transparent,#dfc68c,transparent)}
.tiny{
  font-family:var(--sans);font-size:9.5px;line-height:1.65;
  letter-spacing:.09em;color:#aeb5a7;text-transform:uppercase;
  font-weight:500;text-align:center;
}
/* The actions should look like collectible invitations, not flat HTML bars. */
.btn,.btn.emerald,.btn.outline{
  -webkit-appearance:none;appearance:none;isolation:isolate;
  position:relative;overflow:hidden;display:flex;
  min-height:64px;flex-shrink:0;width:100%;
  justify-content:space-between;align-items:center;
  gap:14px;padding:9px 11px 9px 23px;border-radius:11px;
  font-size:12.5px;line-height:1.3;font-weight:700;
  letter-spacing:.012em;text-align:left;text-transform:none;
  transition:box-shadow .3s ease,background .3s ease,transform .25s ease,filter .2s ease;
  border:1px solid #f2dcac;color:#142017;
  background:linear-gradient(116deg,#ead9ae 0%,#dec592 42%,#c6a86d 100%);
  box-shadow:inset 0 1px 0 rgba(255,250,217,.75),0 16px 35px rgba(0,0,0,.33),0 3px 21px rgba(202,164,95,.13);
}
.btn.emerald{
  border-color:#d1bb87;
  background:linear-gradient(112deg,#eadbb7 0%,#d9be88 48%,#bda06b 100%);
  color:#172018;
}
.btn:not(.plain)::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;background:linear-gradient(105deg,transparent 12%,rgba(255,255,255,.25) 42%,transparent 65%);
  transform:translateX(-150%);transition:transform .75s cubic-bezier(.2,.7,.2,1);
}
.btn:not(.plain):hover::before{transform:translateX(145%)}
.btn:not(.plain):hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:inset 0 1px 0 rgba(255,250,217,.9),0 18px 40px rgba(0,0,0,.42),0 0 30px rgba(202,164,95,.18)}
.btn:not(.plain):active{transform:translateY(0) scale(.989);filter:brightness(.98)}
.btn:not(.outline):not(.plain)>span:last-child{
  position:relative;z-index:1;display:grid;place-items:center;
  width:42px;height:42px;min-width:42px;border-radius:8px;
  font-family:var(--sans);font-size:19px;font-weight:400;
  color:#f8eed6;background:linear-gradient(140deg,#102f23,#06140e);
  border:1px solid rgba(255,243,199,.22);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.12),0 2px 8px rgba(18,31,17,.24);
  transition:transform .3s ease,background .3s ease;
}
.btn:not(.outline):not(.plain):hover>span:last-child{transform:translate(2px,-2px)}
.btn.outline{
  background:rgba(6,28,20,.55);
  border:1px solid rgba(219,190,128,.52);
  color:#efddba;box-shadow:inset 0 0 18px rgba(16,61,38,.18);
  min-height:56px;justify-content:center;text-align:center;
}
.btn.outline:hover{background:rgba(18,57,38,.62)}
.btn.outline>span:last-child{
  display:inline;font-size:16px;margin-left:4px;color:#ddc089;
}
.btn.plain{background:transparent;color:#d0c4a6;box-shadow:none;border:0;min-height:44px}
.bottom-cta{width:min(100%,430px);gap:11px;padding-top:20px}
.bottom-cta .tiny{display:block;margin-top:3px}
.header{top:18px;height:45px;padding:0 18px;gap:10px}
.header-label{
  color:#ded4bb;font-family:var(--sans);font-size:9px;
  font-weight:600;letter-spacing:.12em;text-align:center;line-height:1.35;
}
.header-sep{margin:0 5px;color:#8a826f}
.icon-btn{
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid rgba(215,194,140,.36);
  background:rgba(5,22,16,.55);
  color:#f6ead0;border-radius:50%;font-size:24px;
}
.header-actions{gap:8px}
.sound-toggle{
  min-height:36px;min-width:51px;font-size:10px;
  letter-spacing:.04em;border-radius:20px;padding:7px 10px;
  font-weight:600;color:#efdcaf;
  border-color:rgba(214,191,137,.45);
}
.sound-toggle[aria-pressed=true]{color:#e7d39b;border-color:#d7b875}
.skip{min-height:42px;padding:0 2px;font-size:10px;font-weight:700;letter-spacing:.04em;color:#d0c9af}
.icon-btn:hover,.skip:hover{color:#f5ddb0}
.scene{padding-top:88px;padding-bottom:max(86px,env(safe-area-inset-bottom) + 72px)}
/* Screen 01 — majestic typographic counterpoint to the cinematic mountain. */
.device[data-step="0"] .s0 .brand{margin-top:6px!important}
.s0 h1,.device[data-step="0"] .s0 h1{
  font-family:var(--serif);font-size:clamp(42px,10.1vw,57px);
  font-weight:500;line-height:1.035;letter-spacing:-.048em;
  max-width:390px;margin:16px 0 0;text-wrap:balance;
}
.s0 .subcopy{font-size:13.5px;margin:23px 0 0;line-height:1.67;color:#e3e4d8;max-width:350px}
.s0 .eyebrow{font-size:10px}
.s0 .bottom-cta{padding-top:25px}
/* Screen 02 — invitation is personal, title case lets the contrast work. */
.s1 .brand{margin-bottom:25px}
.s1 .eyebrow{margin-top:24px}
.s1 h2.display{
  font-size:clamp(34px,7.2vw,44px)!important;
  line-height:1.13;letter-spacing:-.036em;
  margin:18px 0 0!important;
}
.s1 .nameplate{
  font-family:var(--serif);font-size:clamp(65px,14vw,86px);
  line-height:.96;letter-spacing:-.065em;font-weight:400;
  color:#e8cb8d;font-style:italic;margin-top:4px;
}
.s1 .subcopy{font-size:13px;line-height:1.7;color:#e2e3d7}
.s1 .hairline{margin-top:19px}
/* Ritual screens — large readable editorial text. */
.s2 .display{font-size:clamp(43px,9vw,56px);line-height:1.06}
.s2 .subcopy{margin-top:11px}
.drag-label{font-size:10px;letter-spacing:.12em;color:#dbc797;font-weight:700}
.slider{height:62px;border:1px solid rgba(224,196,134,.57);border-radius:40px;box-shadow:0 8px 26px rgba(0,0,0,.28)}
.slider-hint{font-size:11px;letter-spacing:.07em;color:#e1ddc9;font-weight:700}
.slider-thumb{width:50px;height:50px;border-radius:50%;font-size:21px;background:linear-gradient(140deg,#e5d5ad,#b58e4e)}
.s3 .eyebrow{margin-top:36px}
.fragment-no{font-size:18px;letter-spacing:.16em;color:#dbbf85}
.s3 .message{
  font-family:var(--serif);font-size:clamp(32px,8vw,43px)!important;
  text-transform:none;line-height:1.21;letter-spacing:-.035em;
  color:#f6edde;max-width:335px;text-wrap:balance;
}
.s3 .message em{font-style:italic;color:#dec18a}
.s3 .message-orbit:before{border-color:rgba(211,183,126,.2);box-shadow:0 0 65px rgba(12,95,58,.22)}
.s3 .message-orbit:after{border-color:rgba(212,194,143,.16)}
.s3 .subcopy{font-size:13px}
.stars b.on{background:#e8ca8e;border-color:#e8ca8e;box-shadow:0 0 14px rgba(238,204,137,.6)}
/* Screen 05 — a boutique invitation rather than a utilitarian data table. */
.s4 .brand{margin-bottom:20px}
.s4 .eyebrow{margin-bottom:13px}
.s4 h2.display{
  font-size:clamp(34px,7.45vw,43px);line-height:1.08;
  letter-spacing:-.04em;margin-bottom:20px;max-width:390px;
}
.invite-panel{
  width:100%;max-width:390px;
  border:1px solid rgba(220,186,120,.52);border-radius:16px;
  padding:20px 21px 19px;
  background:radial-gradient(ellipse at 90% 0%,rgba(40,106,79,.23),transparent 51%),
    linear-gradient(148deg,rgba(16,49,34,.82),rgba(1,13,9,.96) 60%,rgba(8,37,24,.78));
  box-shadow:0 22px 58px rgba(0,0,0,.42),inset 0 1px 0 rgba(230,208,151,.12),inset 0 0 50px rgba(10,70,45,.15);
}
.invite-panel:before,.invite-panel:after{width:23px;height:23px;border-color:#e4c88b}
.invite-flourish{font-size:25px;margin-bottom:12px;color:#e3c88c}
.event-row{gap:14px;align-items:center;padding:11px 0}
.event-row .glyph{
  width:36px;height:36px;min-width:36px;border-radius:8px;
  border-color:rgba(216,187,122,.32);
  background:rgba(208,184,121,.08);font-size:17px;color:#ebd5a6;
}
.event-row .rowkey{font-size:10px;letter-spacing:.1em;font-weight:700;color:#d4bb8d}
.event-row .rowvalue{font-size:13px;font-weight:600;line-height:1.45;margin-top:3px;color:#f6f1e7}
.s4 .bottom-cta{margin-top:14px;padding-top:8px;gap:9px}
.s4 .btn{min-height:60px}
.s4 .btn.outline{min-height:53px}
.s4 .tiny{font-size:9px;color:#a2aa9d}
/* RSVP, ritual, pass & return: one consistent type system. */
.s5 h2,.s6 h2,.s7 h2,.s8 h2{font-size:clamp(33px,8vw,46px);line-height:1.09}
.s5 .subcopy,.s6 .subcopy,.s8 .subcopy{font-size:13.5px}
.field label{font-size:10.5px;letter-spacing:.085em;color:#dfca9f;font-weight:700}
.field input,.field select{
  border-radius:11px;height:54px;font-size:14px;
  background:rgba(8,30,21,.92);
  border:1px solid rgba(208,186,130,.35);
  color:#f6f1e5;
}
.field input:focus,.field select:focus{border-color:#e4c78c;box-shadow:0 0 0 3px rgba(228,199,140,.13)}
.formhelp{font-size:10.5px;line-height:1.6}
.hold-caption{font-size:11.5px;letter-spacing:.1em}
.pass .guest-name,.return-name{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-.018em}
.lounge-item{min-height:57px;border-color:rgba(211,187,130,.26);font-size:11.5px;letter-spacing:.04em}
.lounge-item:hover{background:rgba(27,68,48,.55)}
.progress-dots i{height:3px;background:rgba(185,182,151,.28)}
.progress-dots i.on{background:#e5cd9d;box-shadow:0 0 12px rgba(229,205,157,.26)}
.demo-chip{font-size:9px;letter-spacing:.04em;border-radius:6px;padding:6px 9px;bottom:47px}
.film-bottom .eyebrow{font-family:var(--serif);font-size:24px;letter-spacing:-.025em}
.film-skip{font-size:12px;letter-spacing:.08em;min-height:44px}
.overview h1{letter-spacing:-.07em;line-height:.95}
.overview .lede{font-size:15px;line-height:1.9}
.overview .topline{font-size:11px;letter-spacing:.16em}
.overview .editorial-stamp{font-size:11px}
@media(max-width:940px){
  .scene{padding-left:clamp(22px,6.2vw,34px);padding-right:clamp(22px,6.2vw,34px)}
  .header{top:max(18px,env(safe-area-inset-top) + 8px)}
  .s0 h1,.device[data-step="0"] .s0 h1{font-size:clamp(42px,10.15vw,56px)}
  .s4 .invite-panel{max-width:410px}
}
@media(max-width:385px){
  .header{padding:0 13px;gap:6px}
  .header-label{font-size:8.5px;letter-spacing:.06em}
  .header-actions{gap:4px}
  .icon-btn{width:39px;height:39px}
  .sound-toggle{padding:7px 8px;min-width:46px}
  .scene{padding-left:22px;padding-right:22px}
  .s0 h1,.device[data-step="0"] .s0 h1{font-size:42px}
  .s4 h2.display{font-size:34px}
  .invite-panel{padding:16px 17px}
  .event-row{padding:9px 0}
}
@media(max-height:740px){
  .scene{padding-top:68px;padding-bottom:max(69px,env(safe-area-inset-bottom) + 52px)}
  .brand-icon{height:34px;width:32px}
  .brand .wordmark{font-size:11px}
  .eyebrow{font-size:9px}
  .s0 h1,.device[data-step="0"] .s0 h1{font-size:39px}
  .s0 .subcopy{margin-top:14px;font-size:12.5px}
  .s1 h2.display{font-size:32px!important}
  .s1 .nameplate{font-size:59px}
  .s4 h2.display{font-size:32px;margin-bottom:13px}
  .invite-panel{padding:13px 16px}
  .invite-flourish{margin-bottom:6px}
  .event-row{padding:7px 0}
  .event-row .glyph{width:32px;height:32px;min-width:32px}
  .s4 .bottom-cta{margin-top:9px}
  .s4 .btn{min-height:55px}
  .s4 .btn.outline{min-height:48px}
  .s4 .tiny{font-size:8.5px}
  .btn,.btn.emerald,.btn.outline{min-height:59px}
  .btn:not(.outline):not(.plain)>span:last-child{width:39px;height:39px;min-width:39px}
}
@media(prefers-reduced-motion:reduce){
  .btn::before{display:none}
}
/* Avoid double-exposed type during cinematic scene changes. */
.scene{
  transition:opacity .20s ease,transform .38s ease,visibility 0s linear .20s;
}
.scene.active{
  transition:opacity .42s ease .16s,transform .54s cubic-bezier(.18,.7,.25,1),visibility 0s;
}
/* The immersive chapters have progress dots; conversion forms must stay uncluttered. */
@media(max-width:940px){
  .demo-chip{display:none}
  .device[data-step="4"] .progress-dots,
  .device[data-step="5"] .progress-dots,
  .device[data-step="6"] .progress-dots,
  .device[data-step="7"] .progress-dots,
  .device[data-step="8"] .progress-dots{display:none}
}
@media(max-width:940px) and (max-height:900px){
  .s4 .brand{margin-bottom:13px}
  .s4 .eyebrow{margin-bottom:9px}
  .s4 h2.display{margin-bottom:13px}
  .s4 .invite-panel{padding:14px 18px}
  .s4 .invite-flourish{margin-bottom:7px}
  .s4 .event-row{padding:8px 0}
  .s4 .bottom-cta{margin-top:9px;gap:8px}
  .s4 .tiny{margin-top:0;font-size:9px}
}