/* Why Companies Die - whycompaniesdie.com
   Palette and motion tokens come from animation/src/brand/tokens.ts. */

@font-face{
  font-family:'WCD Display';
  src:url('/fonts/wcd-display-black-2965fd2b8662.otf') format('opentype');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Rubik';
  src:url('/fonts/rubik-latin-var.woff2') format('woff2-variations');
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url('/fonts/geistmono-latin-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --charcoal:#2F2D2D;
  --globe:#030000;
  --cream:#E4DCD3;
  --paper:#F2EEE6;
  --scarlet:#BA1C18;

  --brand-display:'WCD Display','Rubik','Helvetica Neue',Arial,sans-serif;
  --display:'Rubik','Helvetica Neue',Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;
  --enter:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(20px,4.4vw,56px);
}

*{box-sizing:border-box}
html,body{margin:0}

body{
  margin:0;
  background:#261409;
  color:var(--cream);
  font-family:var(--display);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* The page is a single canvas with the desktop artwork's exact proportions. */
.studio{
  position:relative;isolation:isolate;container-type:inline-size;
  width:100%;aspect-ratio:1672/941;
}
.studio-picture{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}
.studio-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* White social icons sit directly on the wall, inside the scene. */
.social{
  position:absolute;top:3%;right:3.4%;z-index:2;
  display:flex;justify-content:flex-end;gap:8px;
}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:#fff;text-decoration:none;
  transition:opacity 150ms ease,transform 150ms ease;
}
.social svg{display:block;width:24px;height:24px}
.social a:hover{opacity:.75}
.social a:active{transform:scale(.96)}

/* Anchor the form to the empty right-hand wall, independent of viewport height. */
.askcol{position:absolute;z-index:1;top:32%;left:70%;width:26%;min-width:0}
h1{
  font-family:var(--brand-display);font-weight:900;
  font-size:clamp(20px,3.05cqw,52px);
  line-height:.96;letter-spacing:normal;text-transform:uppercase;
  font-kerning:normal;font-feature-settings:'kern' 1;
  margin:0;text-wrap:balance;
}

form{position:relative;margin-top:clamp(14px,1.7cqw,28px);display:flex;flex-direction:column;gap:clamp(10px,1cqw,16px)}

/* the honeypot: off-screen, never focusable, never announced */
.trap{
  position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none;
}

.field{--drawably-ink:var(--cream);--drawably-width:2;display:block}
/* Keep the original field border when focused, without extra outlines. */
.field .drawably-focus{display:none}
.field input{
  width:100%;min-height:44px;
  font-family:var(--display);font-weight:500;font-size:clamp(16px,1.02cqw,17px);
  color:var(--paper);background:rgba(47,45,45,.16);border:0;border-radius:0;
  padding:clamp(11px,1cqw,15px) clamp(12px,1.1cqw,18px);
}
.field input::placeholder{
  font-family:var(--brand-display);font-weight:900;
  color:var(--cream);opacity:1;font-size:clamp(12px,2.3cqw,17px);
  letter-spacing:normal;text-transform:uppercase;
  font-kerning:normal;font-feature-settings:'kern' 1;
}
.field input:focus{outline:none}
.field:not(.drawably-host){border:2px solid var(--cream)}

.send{
  align-self:flex-start;position:relative;
  font-family:var(--brand-display);font-weight:900;
  font-size:16px;letter-spacing:normal;text-transform:uppercase;
  font-kerning:normal;font-feature-settings:'kern' 1;
  color:var(--charcoal);
  border:0;border-radius:0;
  min-height:44px;padding:clamp(12px,1.14cqw,19px) clamp(28px,2.75cqw,46px);cursor:pointer;
  background:url('/assets/send-paper.png') center/100% 100% no-repeat;
  filter:drop-shadow(0 3px 0 rgba(3,0,0,.34));
  transition:transform 150ms var(--enter),filter 150ms var(--enter);
}
.send:hover:not(:disabled){transform:translateY(-2px);filter:drop-shadow(0 5px 0 rgba(3,0,0,.34))}
.send:active:not(:disabled){transform:translateY(1px) scale(.96);filter:drop-shadow(0 2px 0 rgba(3,0,0,.34))}
.send:disabled{cursor:progress;opacity:.6}

.err{
  font-family:var(--display);font-size:14px;line-height:1.5;
  color:var(--paper);margin:0;min-height:1.5em;
  position:absolute;top:calc(100% + 12px);left:0;width:100%;
}
.err:empty{visibility:hidden}

/* ---------- sent ---------- */
.sent{display:none;margin-top:clamp(20px,3vw,28px);max-width:460px}
.again{
  background:none;border:0;padding:10px 0;min-height:44px;cursor:pointer;
  font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);text-decoration:underline;text-underline-offset:4px;
}
.again:hover{color:var(--paper)}
body.is-sent form{display:none}
body.is-sent .sent{display:block}

:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.drawably-host{font-family:inherit}

@media (prefers-reduced-motion:reduce){
  .drawably-svg{animation:none!important}
  .send,.social a{transition:none}
}

/* The portrait composition keeps the logo, form and cast within one image. */
@media (max-width:600px), (orientation:portrait){
  .studio{aspect-ratio:1/2;min-height:max(780px,100svh)}
  .social{top:12px;right:14px;gap:4px}
  .social svg{width:22px;height:22px}
  .askcol{top:30%;left:7%;width:86%}
  h1{font-size:clamp(28px,8.2cqw,52px)}
  form{margin-top:16px;gap:12px}
  .field input{min-height:50px;padding:13px 16px;font-size:16px}
  .field input::placeholder{font-size:16px}
  .send{min-height:48px;padding:14px 32px}
  .err{width:44%;font-size:12px;line-height:1.4}
}