/* ROHIUDOH — 1964. Cloudflare Pages, one-page mailing-list landing site.
   BACKGROUND: replace tartan.jpg in this ZIP with your own tartan photograph. */
:root { font-family: Arial, Helvetica, sans-serif; color-scheme: dark; font-synthesis: none; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: #2b1e1a; }
body { color: white; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; border-radius: 0; }

.announcement {
  position: relative; z-index: 2;
  height: 42px; display: flex; align-items: center;
  overflow: hidden; background: #f6f5f0; color: #191919;
  font-size: 13px; font-weight: 450; text-transform: uppercase;
  white-space: nowrap; letter-spacing: -.15px;
}
.announcement-track {
  display: flex; align-items: center; width: max-content;
  animation: marquee 28s linear infinite;
}
.announcement-copy { display: inline-flex; align-items: center; flex: none; padding-right: 28px; gap: 28px; }
.announcement-copy b { font-size: 13px; font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }

.hero {
  position: relative; isolation: isolate;
  min-height: calc(100vh - 42px);
  min-height: calc(100svh - 42px);
  min-height: max(620px, calc(100svh - 42px));
  background: #5c4439 url('tartan.jpg') center center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 55px 24px 64px;
}
.hero-shade { position:absolute; z-index:-1; inset:0; background:rgba(16,9,8,.23); pointer-events:none; }
.content { position:relative; width:100%; max-width:780px; margin:0 auto; transform: translateY(-10px); }
.brand h1 { font-weight: 850; font-size: clamp(35px, 5.3vw, 58px); line-height: .98; letter-spacing: -2px; margin:0; text-shadow: 0 1px 3px rgba(0,0,0,.08); }
.brand p { margin: 10px 0 0; padding-left: 7px; font-size: 14px; font-weight: 600; letter-spacing: 7px; line-height: 1.2; }
.signup { margin-top: clamp(75px, 12vh, 117px); }
.signup h2 { margin:0; font-size: clamp(20px, 2vw, 25px); font-weight: 670; line-height: 1.2; }
.intro { margin: 14px auto 0; font-size: clamp(12px, 1.22vw, 15px); line-height: 1.45; }
#signup-form { width:min(100%, 500px); margin: 24px auto 0; }
.form-line { display:flex; align-items:stretch; width:100%; height:51px; }
#email { width:100%; min-width: 0; flex:1 1 auto; padding:0 20px; border:1px solid #fff; color:#111; background:#fff; font-size:15px; font-weight:400; outline:0; -webkit-appearance:none; appearance:none; }
#email::placeholder { color:#676767; opacity:1; }
#email:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#email[aria-invalid="true"] { border-color: #ff2a2a; box-shadow: inset 0 0 0 1px #ff2a2a; }
#join-button { flex:0 0 128px; cursor:pointer; background:#e00905; color:#fff; border: 1px solid #e00905; font-size:15px; font-weight:550; transition:background-color .15s ease; }
#join-button:hover { background:#b90604; border-color:#b90604; }
#join-button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
#join-button:disabled { opacity:.75; cursor:wait; }
.status { font-size:13px; margin:13px 0 0; font-weight:600; line-height:1.45; }
.status:empty { display:none; }
.fine-print { margin:17px auto 0; font-size:10.5px; font-weight:400; line-height:1.45; color:rgba(255,255,255,.91); text-shadow:0 1px 3px rgba(0,0,0,.45); }
.fine-print a, .fine-print a:visited { color:inherit; text-underline-offset:2px; }
.footer-note { position:absolute; left:12px; right:12px; bottom:17px; text-align:center; font-size:10px; font-weight:650; letter-spacing:2px; color:rgba(255,255,255,.79); }
.honeypot, .sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

@media (max-width: 650px) {
  .announcement { height:36px; font-size:12px; }
  .announcement-track { animation-duration:32s; }
  .hero {
    min-height:calc(100vh - 36px);
    min-height:calc(100svh - 36px);
    min-height:max(610px,calc(100svh - 36px));
    padding:50px 18px 60px;
    background-position:center center;
    background-size: 1040px auto;
    background-repeat:repeat;
  }
  .hero-shade { background:rgba(17,7,5,.20); }
  .content { transform:translateY(-6px); }
  .brand h1 { font-size:clamp(28px, 8.4vw, 36px); line-height:1.05; letter-spacing:-.65px; }
  .brand p { margin-top:6px; font-size:12px; letter-spacing:5.8px; padding-left:6px; }
  .signup { margin-top:clamp(110px,17vh,155px); }
  .signup h2 { font-size:clamp(21px, 5.7vw, 25px); }
  .intro { max-width:345px; margin-top:16px; font-size:clamp(12px, 3.15vw, 13px); }
  #signup-form { width:min(100%, 300px); margin-top:29px; }
  .form-line { display:flex; flex-direction:column; gap:11px; height:auto; }
  #email { background:rgba(15,10,8,.07); border:1.5px solid #fff; color:#fff; flex:none; height:53px; font-size:16px; padding:0 20px; }
  #email::placeholder { color:#fff; }
  #join-button { flex:none; height:53px; font-size:17px; font-weight:450; }
  .fine-print { max-width:330px; margin-top:17px; font-size:10px; }
  .footer-note { bottom:17px; font-size:9px; letter-spacing:1.6px; }
}
@media (max-width:350px) { .hero { padding-left:12px; padding-right:12px; } .signup { margin-top:93px; } .signup h2 { font-size:20px; } }
@media (max-height:670px) and (min-width:651px) { .hero { min-height:650px; } }
@media (prefers-reduced-motion: reduce) { .announcement-track { animation:none; } #join-button { transition:none; } }