@font-face{font-family:"Inter Tight";src:url("assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --paper:#f3f1ec; --ink:#151214; --muted:#7a726c; --crimson:#cc1449; --line:rgba(21,18,20,.14);
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(18px,3vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;min-height:100svh;overflow-x:hidden;
  display:grid;grid-template-rows:auto 1fr auto;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* film grain (MacMillan Studio) */
.grain{position:fixed;inset:-50%;width:200%;height:200%;background:url("assets/grain.png");pointer-events:none;z-index:50;opacity:.55;animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}50%{transform:translate(-6%,-2%)}67%{transform:translate(5%,4%)}83%{transform:translate(-2%,6%)}100%{transform:translate(0,0)}}

/* corner labels + live clock (Monument / North) */
.meta{display:flex;justify-content:space-between;align-items:center;padding:var(--pad);padding-top:max(var(--pad),env(safe-area-inset-top));font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;position:relative}
.meta--bottom{padding-top:var(--pad);padding-bottom:max(var(--pad),env(safe-area-inset-bottom))}
.meta__dim{color:var(--muted)}
.clock{font-variant-numeric:tabular-nums}
.meta__item{opacity:0;transform:translateY(6px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.is-ready .meta__item,.no-js .meta__item{opacity:1;transform:none}

/* stage */
.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad);position:relative}

.logo{all:unset;cursor:pointer;display:block;position:relative;width:min(400px,30vw,46vh);aspect-ratio:900/666;overflow:hidden;background:var(--paper);-webkit-tap-highlight-color:transparent}
.logo:focus-visible{outline:2px solid var(--crimson);outline-offset:8px}
.logo__video,.logo__still{position:absolute;display:block;max-width:none;mix-blend-mode:multiply;pointer-events:none}
.logo__video{width:120%;height:auto;aspect-ratio:1/1;left:-10%;top:-31.0811%}
.logo__still{width:103.8696%;height:auto;left:-1.8792%;top:-3.2903%;opacity:0;transition:opacity .7s ease}
.logo.is-settled .logo__still,.no-js .logo__still{opacity:1}
.logo.is-settled .logo__video{opacity:0;transition:opacity .7s ease}
.no-js .logo__video{display:none}

/* hairline preloader synced to the logo animation (Studio Mirage) */
.progress{width:min(400px,30vw,46vh);height:1px;background:var(--line);margin-top:clamp(14px,2.4vh,26px);overflow:hidden;transition:opacity .8s ease .2s}
.progress__bar{display:block;height:100%;width:100%;background:var(--crimson);transform-origin:left;transform:scaleX(0)}
.is-done .progress{opacity:0}

/* slogan: serif aside vs. heavy grotesk statement (Kiss Branding), masked line reveals */
.slogan{margin:clamp(22px,4vh,44px) 0 0;display:flex;flex-direction:column;align-items:center;gap:.2em}
.slogan__line{display:block;overflow:hidden;padding:.06em .1em .14em}
.slogan__inner{display:block;transform:translateY(110%);transition:transform 1.2s var(--ease)}
.slogan__line--a{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:clamp(24px,2.7vw,42px);line-height:1.1;color:var(--muted);letter-spacing:-.005em}
.slogan__line--b{font-weight:780;font-size:clamp(40px,6.1vw,96px);line-height:.98;letter-spacing:-.045em;color:var(--ink)}
.slogan__line--b em{font-style:normal;color:var(--crimson)}
.show-a .slogan__line--a .slogan__inner,.show-b .slogan__line--b .slogan__inner,.no-js .slogan__inner{transform:none}
.scramble-char{color:var(--crimson);opacity:.75}

/* contact: magnetic pill with fill sweep */
.cta{margin-top:clamp(26px,5vh,52px);opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.show-cta .cta,.no-js .cta{opacity:1;transform:none}
.btn{position:relative;display:inline-flex;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;align-items:center;gap:.7em;padding:1.05em 2em 1.05em 2.2em;border-radius:999px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;overflow:hidden;isolation:isolate;transition:color .5s var(--ease),border-color .5s var(--ease);will-change:transform}
.btn__fill{position:absolute;inset:0;background:var(--ink);border-radius:inherit;z-index:-1;transform:translateY(101%);transition:transform .6s var(--ease)}
.btn__fill::after{content:"";position:absolute;inset:0;background:var(--crimson);transform:translateY(101%);transition:transform .6s var(--ease) .05s;border-radius:inherit}
.btn__arrow{display:inline-block;font-size:1.15em;transition:transform .5s var(--ease)}
.btn:hover,.btn:focus-visible{color:#fff;border-color:var(--crimson)}
.btn:hover .btn__fill,.btn:focus-visible .btn__fill,.btn:hover .btn__fill::after,.btn:focus-visible .btn__fill::after{transform:none}
.btn:hover .btn__arrow,.btn:focus-visible .btn__arrow{transform:translate(2px,-2px) rotate(45deg)}
.btn:focus-visible{outline:2px solid var(--crimson);outline-offset:4px}
.btn__label,.btn__arrow{position:relative}

/* contact form sheet */
[hidden]{display:none!important}
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:var(--pad);overflow-y:auto;-webkit-overflow-scrolling:touch;visibility:hidden;pointer-events:none}
.sheet.is-open{visibility:visible;pointer-events:auto}
.sheet__backdrop{position:fixed;inset:0;background:rgba(243,241,236,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .5s var(--ease)}
.sheet__panel{position:relative;width:min(460px,100%);background:var(--paper);border:1px solid var(--ink);border-radius:22px;padding:22px 26px 26px;box-shadow:0 30px 80px -30px rgba(21,18,20,.35);opacity:0;transform:translateY(18px) scale(.985);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.sheet.is-open .sheet__backdrop{opacity:1}
.sheet.is-open .sheet__panel{opacity:1;transform:none}
.sheet__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.sheet__close{all:unset;cursor:pointer;width:34px;height:34px;margin-right:-8px;display:grid;place-items:center;font-size:22px;line-height:1;color:var(--ink);border-radius:50%;transition:color .3s,transform .4s var(--ease);-webkit-tap-highlight-color:transparent}
.sheet__close:hover{color:var(--crimson);transform:rotate(90deg)}
.sheet__close:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.form{display:flex;flex-direction:column;gap:14px;text-align:left}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.field:focus-within .field__label{color:var(--crimson)}
.field__input{appearance:none;-webkit-appearance:none;width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:6px 0 9px;font:inherit;font-size:17px;color:var(--ink);outline:none;transition:border-color .3s}
.field__input:focus{border-bottom-color:var(--crimson);box-shadow:0 1px 0 0 var(--crimson)}
.field__input--area{resize:none;min-height:76px;line-height:1.4}
.field.is-invalid .field__input{border-bottom-color:var(--crimson)}
.field[hidden]{display:none}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field--choice{border:0;margin:0;padding:0;min-width:0}
.field--choice legend{padding:0;margin-bottom:8px}
.field--choice:focus-within .field__label{color:var(--crimson)}
.toggle{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);border-radius:999px;padding:3px;width:min(220px,100%)}
.toggle__opt{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.toggle__opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.toggle__opt span{display:block;text-align:center;padding:.62em 0;border-radius:999px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:background .35s var(--ease),color .35s var(--ease)}
.toggle__opt input:checked+span{background:var(--ink);color:#fff}
.toggle__opt input:focus-visible+span{outline:2px solid var(--crimson);outline-offset:2px}
.toggle__opt:hover input:not(:checked)+span{color:var(--crimson)}
.field--choice.is-invalid .toggle{border-color:var(--crimson)}
.field--cond{animation:fieldIn .45s var(--ease)}
@keyframes fieldIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.select{position:relative;display:block}
.select::after{content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;margin-top:-7px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.field__input--select{cursor:pointer;padding-right:22px}
.field__input--select:invalid{color:var(--muted)}
.field__input::placeholder{color:var(--muted);opacity:.6}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px}
.form__status{margin:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.04em;line-height:1.4;color:var(--crimson);flex:1}
.btn--solid{background:var(--ink);color:#fff;flex:none;padding:1em 1.6em 1em 1.8em}
.btn--solid .btn__fill{background:var(--crimson)}
.btn--solid .btn__fill::after{display:none}
.btn--solid:hover,.btn--solid:focus-visible{border-color:var(--crimson)}
.btn--solid:hover .btn__arrow,.btn--solid:focus-visible .btn__arrow{transform:translateX(3px)}
.btn--solid[disabled]{opacity:.55;cursor:progress}
.sheet__done{padding:26px 0 14px;text-align:left}
.sheet__thanks{margin:0;font-weight:780;font-size:clamp(30px,8vw,40px);line-height:1.02;letter-spacing:-.04em}
.sheet__thanks em{font-style:normal;color:var(--crimson)}
.sheet-open{overflow:hidden}

/* bracket cursor (North) — fine pointers only */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .has-cursor,.has-cursor a,.has-cursor button{cursor:none}
  .has-cursor input,.has-cursor textarea{cursor:text}
  .has-cursor .cursor{display:block;position:fixed;left:0;top:0;pointer-events:none;z-index:60}
  .cursor__dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--crimson);transition:opacity .3s,transform .3s var(--ease)}
  .cursor__frame{position:fixed;left:0;top:0;width:34px;height:34px}
  .cursor__frame i{position:absolute;width:8px;height:8px;border:1.5px solid var(--ink)}
  .cursor__frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
  .cursor__frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
  .cursor__frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
  .cursor__frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
  .cursor.is-hover .cursor__frame i{border-color:var(--crimson)}
  .cursor.is-hover .cursor__dot{transform:scale(0)}
  .cursor.is-hidden{opacity:0}
}

/* mobile */
@media (max-width:700px){
  .meta{font-size:10px}
  .logo,.progress{width:min(72vw,300px,40vh)}
  .slogan{margin-top:clamp(20px,4vh,36px)}
  .slogan__line--a{font-size:clamp(21px,6vw,28px)}
  .slogan__line--b{font-size:clamp(38px,12.4vw,56px);text-wrap:balance;max-width:9em}
  .cta{margin-top:clamp(28px,5.5vh,48px)}
  .btn{font-size:12px;padding:1.15em 2.2em 1.15em 2.4em}
  .btn--solid{padding:1.05em 1.7em 1.05em 1.9em}
  .sheet{align-items:flex-end;padding:12px}
  .sheet__panel{padding:18px 20px 22px;border-radius:20px;margin-bottom:max(0px,env(safe-area-inset-bottom))}
  .form{gap:11px}
  .form__row{gap:12px}
  .field__input{font-size:16px;padding:5px 0 8px}
  .sheet__panel{max-height:calc(100dvh - 24px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}
@media (max-height:560px) and (min-width:701px){
  .logo,.progress{width:min(260px,40vh)}
}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .slogan__inner,.cta,.meta__item,.sheet__panel,.sheet__backdrop{transition:none!important}
}