@font-face{font-family:'Oceanic Text Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/oceanic.woff2') format('woff2');}

:root{
  --bg:#F6F6F6;
  --accent:#A55037;
  --btn:#AA4C30;
  --btn-hover:#97412a;
  --ink:#1D1E1C;
  --line:#cfc9c4;
  --muted:#8d847d;
  --mono:'Oceanic Text Mono',ui-monospace,'Courier New',monospace;
}

*{box-sizing:border-box;hyphens:none;-webkit-hyphens:none;}
html,body{margin:0;padding:0;width:100%;overflow-x:hidden;}
html{-webkit-text-size-adjust:100%;}

body{
  font-family:var(--mono);
  color:var(--ink);
  background-color:var(--bg);
  background-image:url('assets/bg.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  min-height:100vh;
  min-height:100dvh;
  text-transform:lowercase;
}

.stage{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 22px;
}

.view{display:none;width:100%;}
.view.is-active{display:flex;justify-content:center;animation:fade .35s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.card{
  width:100%;
  max-width:520px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.logo{
  width:84px;height:103px;
  background:url('assets/logo.svg') center/contain no-repeat;
  margin-bottom:26px;
}

.title{
  color:var(--accent);
  font-weight:400;
  font-size:24px;
  line-height:.9;
  letter-spacing:-.05em;
  margin:0 0 20px;
  overflow-wrap:normal;word-break:keep-all;hyphens:none;-webkit-hyphens:none;
  max-width:100%;
}
.title--sm{font-size:24px;}

.lead{
  color:var(--ink);
  font-size:14px;
  line-height:1.2;
  letter-spacing:-.05em;
  margin:0 auto 26px;
  max-width:360px;
}
.lead--wide{max-width:420px;margin-bottom:14px;}

.actions{
  width:100%;
  max-width:360px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:17px 20px;
  background:var(--btn);
  color:#fff;
  font-family:var(--mono);
  font-size:16px;
  letter-spacing:-.02em;
  text-transform:lowercase;
  text-decoration:none;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:background .2s ease,transform .05s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--btn-hover);}
.btn:active{transform:scale(.99);}
.btn[disabled]{opacity:.6;cursor:default;}
.btn--block{width:100%;margin-top:8px;}

.card--form{max-width:480px;}
#feedback-form{width:100%;max-width:420px;display:flex;flex-direction:column;gap:6px;}

.field{position:relative;margin-bottom:14px;}
.field input,.field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:12px 2px;
  font-family:var(--mono);
  font-size:15px;
  letter-spacing:-.02em;
  color:var(--ink);
  text-transform:lowercase;
  outline:none;
  resize:none;
}
.field textarea{min-height:46px;}
.field input::placeholder,.field textarea::placeholder{
  color:var(--muted);
  text-transform:lowercase;
  opacity:1;
}
.field input:focus,.field textarea:focus{border-bottom-color:var(--accent);}

.form-error{
  color:#b23b2e;
  font-size:13px;
  margin:2px 0 6px;
  text-align:left;
  letter-spacing:-.02em;
}

@media (min-width:640px){
  .title{font-size:40px;line-height:.9;letter-spacing:-.05em;white-space:nowrap;max-width:none;}
  .title--sm{font-size:32px;}
  .lead{font-size:16px;max-width:600px;}
  .lead--wide{max-width:660px;}
  .logo{width:96px;height:118px;}
  .actions{flex-direction:row;max-width:480px;}
  .actions .btn{flex:1;}
}