/* The front door of messageinabottle.win. Colours are the Message In A Bottle
   set from the 2.0 app (hermes/palettes.json, "l7"). One type family: Lexend,
   hosted here, with a measured fallback so the page does not jump when it loads. */

@font-face{font-family:"Lexend";src:url("/lexend.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Lexend Fallback";src:local("Arial"),local("Helvetica Neue"),local("Roboto");size-adjust:112%;ascent-override:89%;descent-override:22%;line-gap-override:0%}

:root{
  --bg:#0b192c; --card:#132a47; --line:#1e3e62; --mid:#8ea6c4; --ink:#f2f5f9; --accent:#ff6500; --btnink:#0b192c; --black:#000;
  --font:"Lexend","Lexend Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--accent);color:var(--btnink);padding:10px 14px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- the first screen ---- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--black);isolation:isolate}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.shade{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%,rgba(11,25,44,.34),rgba(11,25,44,0) 70%),
    linear-gradient(to bottom,rgba(11,25,44,.92) 0%,rgba(11,25,44,.66) 24%,rgba(11,25,44,.62) 62%,rgba(11,25,44,.96) 100%)}

.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:1560px;margin:0 auto;
  padding:max(22px,env(safe-area-inset-top)) max(clamp(18px,4.6vw,148px),env(safe-area-inset-right)) 0 max(clamp(18px,4.6vw,148px),env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:clamp(8px,1vw,14px);text-decoration:none;min-width:0}
.bottle{flex:none;width:clamp(48px,5vw,76px);height:auto}
.bt{display:flex;flex-direction:column;min-width:0}
.name{font-weight:800;font-size:clamp(19px,2.15vw,32px);line-height:1.1;letter-spacing:-.02em;color:var(--accent)}
.slogan{font-weight:500;font-size:clamp(12px,1.05vw,16px);line-height:1.3;color:var(--ink);margin-top:3px;letter-spacing:.01em}
.signin{flex:none;background:var(--accent);color:var(--btnink);font-weight:700;font-size:16px;line-height:1;text-decoration:none;padding:12px 18px;border-radius:6px;white-space:nowrap;transition:background-color .15s}
.signin:hover{background:#ff7d26}
.signin:active{background:#e65b00}

.mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;max-width:1040px;margin:0 auto;padding:40px 20px 72px}
h1{margin:0;font-weight:800;font-size:clamp(31px,5.4vw,68px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.lead,.word{display:block}
.word{height:1.18em;overflow:hidden}
#word,#kind{display:inline-block;transition:opacity .16s ease,transform .16s ease}
#word.out,#kind.out{opacity:0;transform:translateY(.22em)}
.sub{margin:22px 0 0;font-size:clamp(17px,1.5vw,21px);font-weight:500;max-width:34em}

.join{display:flex;gap:10px;width:100%;max-width:740px;margin:22px auto 0;align-items:stretch}
.field{flex:1;min-width:0}
.join input[type=tel]{width:100%;height:58px;border-radius:6px;border:1px solid rgba(142,166,196,.7);background:rgba(19,42,71,.82);color:var(--ink);
  font-family:inherit;font-size:18px;font-weight:500;padding:0 18px;letter-spacing:.02em}
.join input[type=tel]::placeholder{color:var(--mid);opacity:1;letter-spacing:0}
.join input[type=tel]:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.join input[aria-invalid=true]{border-color:var(--accent);border-width:2px}
.join button{flex:none;height:58px;border:0;border-radius:6px;background:var(--accent);color:var(--btnink);font-family:inherit;font-weight:700;font-size:22px;padding:0 26px;cursor:pointer;white-space:nowrap;transition:background-color .15s}
.join button:hover{background:#ff7d26}
.join button:active{background:#e65b00}
.join button[disabled]{opacity:.7;cursor:progress}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.err{margin:10px 0 0;min-height:1.5em;font-weight:600;font-size:16px;color:var(--ink)}
.err:not(:empty)::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);margin-right:8px}
.hint{margin:2px 0 0;font-size:14px;color:var(--ink);opacity:.88;max-width:40em}

.pause{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(142,166,196,.6);background:rgba(11,25,44,.72);color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.pause svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pause .i-play{display:none;fill:currentColor;stroke-width:1.5}
.pause[aria-pressed=true] .i-pause{display:none}
.pause[aria-pressed=true] .i-play{display:block}
.pause:hover{background:var(--card)}

/* ---- under the first screen ---- */
.foot{background:var(--bg);border-top:1px solid var(--line);padding:26px max(20px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));text-align:center;color:var(--mid);font-size:14px}
.foot p{margin:0 auto 8px;max-width:62em}
.foot a{color:var(--ink);text-underline-offset:3px}

@media (max-width:640px){
  .signin{font-size:15px;padding:10px 14px}
  .mid{padding:28px 18px 76px}
  .join{flex-direction:column;gap:12px;max-width:420px}
  .join button{width:100%}
  .sub{margin-top:16px}
}
@media (max-width:380px){
  .slogan{font-size:11px}
  .name{font-size:17px}
  .bottle{width:38px}
}
@media (prefers-reduced-motion:reduce){
  #word,#kind,.signin,.join button{transition:none}
}