/* ==========================================================================
   ISHLVLSTUDIOS — NEWSLETTER — Mockup 01
   Minimal, editorial, one destination (the email field). Same root
   variables, fonts, header/footer, and black-on-white language as every
   approved page; no orbit, no media, no card, no gradient/shadow.
   ========================================================================== */

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --gray-1:#6b6b6b;
  --gray-2:#b3b3b3;
  --gray-3:#dedede;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html,body{ height:100%; margin:0; }
body{
  background:var(--white); color:var(--black);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased; width:100%;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}

/* ==========================================================================
   TOP BAR — identical to every approved page.
   ========================================================================== */
.film-bar{
  position:absolute; top:0;left:0;right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(30px + env(safe-area-inset-top)) calc(36px + env(safe-area-inset-right)) 30px calc(36px + env(safe-area-inset-left)); pointer-events:none;
}
.film-bar > *{pointer-events:auto;}
.home-mark img{height:88px;width:auto;display:block;opacity:.92;transition:opacity .4s var(--ease);}
.home-mark:hover img{opacity:1;}
.home-mark:focus-visible{outline:2px solid var(--black); outline-offset:4px;}
.division-id{
  font-size:14px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--black);
  white-space:nowrap;
}

/* Page footer — matches every approved page exactly. */
.corner-id{
  width:100%; box-sizing:border-box;
  padding:0 36px 32px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--gray-2);
  display:flex; justify-content:flex-end; gap:8px;
}

/* ==========================================================================
   REVEAL — same one-time fade/lift pattern used on every approved page.
   ========================================================================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.newsletter-lead.reveal{transition-delay:.08s;}
.newsletter-copy.reveal{transition-delay:.16s;}
.newsletter-form.reveal{transition-delay:.26s;}

/* Masked line reveal — the single large NEWSLETTER heading, this page's
   one large typographic gesture. Letter-spacing gently settles closed
   as the line lifts and fades in — no letter-by-letter animation. */
.mask{display:block; overflow:hidden;}
.mask-inner{
  display:block;
  transform:translateY(115%);
  opacity:0;
  letter-spacing:.02em;
  transition:transform 1s var(--ease-soft), opacity 1s var(--ease-soft), letter-spacing 1.1s var(--ease-soft);
}
.mask-inner.is-visible{transform:translateY(0); opacity:1; letter-spacing:-.01em;}

/* ==========================================================================
   OPENING — near-full-screen, not forced 100vh: strong presence without
   pushing the form far down the page.
   ========================================================================== */
.newsletter-hero{
  width:100%; min-height:92vh; min-height:92svh; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:96px 36px 64px;
}
.newsletter-hero-inner{
  max-width:760px; width:100%; margin:0 auto;
}
.newsletter-heading{
  margin:0 0 30px;
  font-family:'Newsreader',Georgia,serif; font-style:normal; font-weight:400;
  font-size:clamp(52px,10vw,118px); line-height:1; letter-spacing:-.01em;
  color:var(--black);
}
.newsletter-lead{
  margin:0 0 22px;
  font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:400;
  font-size:clamp(21px,2.6vw,28px); line-height:1.45; color:var(--black);
  max-width:34ch;
}
.newsletter-copy{
  margin:0 0 52px;
  font-family:'Newsreader',Georgia,serif; font-style:normal; font-weight:400;
  font-size:19px; line-height:1.65; color:var(--black);
  max-width:52ch;
}
/* ==========================================================================
   FORM — integrated into the editorial layout, not a card. Large input
   with a thin bottom border; Subscribe sits beside it on desktop, beneath
   it on narrow screens.
   ========================================================================== */
.newsletter-form{
  width:100%;
  margin-bottom:14px;
}
.field-row{
  display:flex; align-items:flex-end; gap:28px;
  width:100%;
}
.email-field{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:10px;
}
.field-label{
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gray-1);
  transition:color .4s var(--ease-soft);
}
.email-field:focus-within .field-label{
  color:var(--black);
}
.email-input{
  width:100%;
  border:none; border-bottom:1px solid var(--gray-3);
  border-radius:0;
  background:transparent;
  padding:8px 2px 12px;
  font-family:'Newsreader',Georgia,serif; font-style:normal; font-weight:400;
  font-size:clamp(20px,3vw,28px); color:var(--black);
  transition:border-color .4s var(--ease-soft);
}
.email-input::placeholder{ color:var(--gray-2); }
.email-input:focus{
  outline:none;
  border-bottom:1px solid var(--black);
}
.email-input:focus-visible{
  outline:2px solid var(--black); outline-offset:6px;
}
/* Strengthen the underline further while the field holds focus, via a
   pseudo-line under the whole field so it can extend/thicken cleanly. */
.email-field{ position:relative; }
.email-field::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--black);
  transition:width .5s var(--ease-soft);
}
.email-field:focus-within::after{ width:100%; }

.subscribe-btn{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:none; border-radius:0; padding:10px 2px 12px;
  cursor:pointer;
  font-family:'Inter',sans-serif; font-weight:500; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--black);
}
.subscribe-text{
  border-bottom:1px solid rgba(10,10,10,.25);
  padding-bottom:2px;
  transition:border-color .4s var(--ease-soft);
}
.subscribe-btn:hover .subscribe-text,
.subscribe-btn:focus-visible .subscribe-text{
  border-color:var(--black);
}
.subscribe-arrow{
  display:inline-block;
  width:10px; height:10px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.6;
  transition:opacity .4s var(--ease), transform .4s var(--ease-soft);
}
.subscribe-btn:hover .subscribe-arrow,
.subscribe-btn:focus-visible .subscribe-arrow{
  opacity:1;
  transform:rotate(45deg) translate(3px,-3px);
}
.subscribe-btn:focus-visible{
  outline:2px solid var(--black); outline-offset:6px;
}
.subscribe-btn[disabled]{
  cursor:default; opacity:.5;
}

/* Status line — success / error / invalid-email messages. Always present
   in the DOM (aria-live) so screen readers announce updates; visually
   empty until a state is set. */
.form-status{
  min-height:20px;
  margin:16px 0 0;
  font-size:13px; letter-spacing:.01em; color:var(--black);
}
.form-status[data-state="success"]{ color:var(--black); }
.form-status[data-state="error"],
.form-status[data-state="invalid"]{ color:var(--black); }

.privacy-note{
  margin:0; padding-top:2px;
  font-size:11px; letter-spacing:.03em; color:var(--gray-1);
}

/* ==========================================================================
   REDUCED MOTION — everything visible with no reveal/hover animation;
   the form still validates and submits identically.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .reveal, .mask-inner{opacity:1 !important; transform:none !important; transition:none !important; letter-spacing:normal !important;}
  .home-mark img, .field-label, .email-input, .email-field::after,
  .subscribe-text, .subscribe-arrow{
    transition:none !important;
  }
}

/* ==========================================================================
   TOUCH — keep focus/active states so tapping still shows the response.
   ========================================================================== */
@media (hover:none){
  .subscribe-btn:active .subscribe-arrow{opacity:1; transform:rotate(45deg) translate(3px,-3px);}
  .subscribe-btn:active .subscribe-text{border-color:var(--black);}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .home-mark img{height:64px;}
  .division-id{font-size:12px;}
  .newsletter-hero{padding:84px 28px 56px;}
}
@media (max-width:680px){
  .film-bar{padding:calc(22px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 22px calc(20px + env(safe-area-inset-left));}
  .home-mark img{height:48px;}
  .division-id{font-size:11px;letter-spacing:.08em;}
  .corner-id{padding:0 20px 24px;font-size:9px;}

  .newsletter-hero{min-height:auto; padding:74px 20px 48px;}
  .newsletter-heading{font-size:clamp(42px,15vw,56px); margin-bottom:22px;}
  .newsletter-lead{font-size:19px; margin-bottom:18px; max-width:none;}
  .newsletter-copy{font-size:17px; line-height:1.6; margin-bottom:38px; max-width:none;}

  .field-row{flex-direction:column; align-items:stretch; gap:22px;}
  .subscribe-btn{
    justify-content:center;
    padding:14px 2px;
    border-bottom:1px solid var(--gray-3);
    width:100%;
  }
  .email-input{font-size:19px;}
}
@media (max-height:640px){
  .newsletter-hero{min-height:auto; padding-top:110px;}
}