Studio North — Creative Portfolio Coming Soon

<main class="st-wrap"><div class="st-inner">
  <header class="st-top"><span class="st-brand">Studio North</span><span class="st-loc">Reykjavík · Est. 2026</span></header>
  <section class="st-hero">
    <p class="st-kicker">A new creative studio is arriving</p>
    <h1>We make <em>quiet</em> work that speaks <em>loudly</em>.</h1>
    <p class="st-lead">Brand, art direction and photography for people who care about craft. Our portfolio opens soon — leave your email and we'll send you the first look.</p>
    <form class="st-form" novalidate><label class="visually-hidden" for="st-e">Email</label>
      <input id="st-e" type="email" placeholder="your email" autocomplete="email" required><button type="submit">Notify me</button></form>
  </section>
  <div class="st-marquee" aria-hidden="true"><span>Branding — Art Direction — Photography — Editorial — Identity — Motion — Branding — Art Direction — Photography — Editorial —</span></div>
  <footer class="st-foot"><nav class="st-social" aria-label="Social"><a href="#">Instagram</a><a href="#">Behance</a><a href="#">Contact</a></nav><span class="x-by">Powered by <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></span></footer>
</div></main>

*{box-sizing:border-box}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.st-wrap{min-height:100vh;background:#11100e;color:#e8e2d4;font-family:Georgia,'Times New Roman',serif;display:flex;flex-direction:column;padding:40px 28px}
.st-inner{flex:1;width:100%;max-width:1000px;margin:0 auto;display:flex;flex-direction:column}
.st-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;font-family:'Inter',sans-serif}
.st-brand{font-weight:700;letter-spacing:.02em;font-size:1.05rem}
.st-loc{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#8a8475}
.st-hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:60px 0;max-width:20ch}
.st-kicker{font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:#b3a98f;margin:0 0 24px}
.st-hero h1{font-weight:400;font-size:clamp(2.6rem,8vw,6rem);line-height:.98;letter-spacing:-.02em;margin:0 0 30px;max-width:none}
.st-hero h1 em{font-style:italic;color:#c9a35a}
.st-lead{font-family:'Inter',sans-serif;font-size:1.05rem;line-height:1.7;color:#a39c8c;max-width:48ch;margin:0 0 34px}
.st-form{display:flex;gap:0;max-width:430px;border-bottom:1px solid #4a463c;font-family:'Inter',sans-serif}
.st-form input{flex:1;padding:14px 4px;border:0;background:transparent;color:#e8e2d4;font:inherit;font-size:1.02rem}
.st-form input::placeholder{color:#7a7565}.st-form input:focus{outline:none}
.st-form:focus-within{border-color:#c9a35a}
.st-form button{border:0;background:transparent;color:#c9a35a;font:inherit;font-weight:700;cursor:pointer;padding:0 6px;font-size:1rem;letter-spacing:.02em}
.st-form button:focus-visible{outline:2px solid #c9a35a;outline-offset:3px}
.st-marquee{overflow:hidden;white-space:nowrap;border-top:1px solid #2a2823;border-bottom:1px solid #2a2823;padding:16px 0;margin:10px 0 30px}
.st-marquee span{display:inline-block;font-size:1.1rem;letter-spacing:.04em;color:#5f5a4e;animation:stM 26s linear infinite}
@keyframes stM{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.st-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:'Inter',sans-serif}
.st-social{display:flex;gap:22px}.st-social a{color:#a39c8c;text-decoration:none;font-size:.9rem}.st-social a:hover{color:#e8e2d4}.st-social a:focus-visible{outline:2px solid #c9a35a;outline-offset:3px}
.x-by{font-size:.82rem;color:#7a7565}.x-by a{color:#c9a35a;text-decoration:none;font-weight:600}.x-by a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.st-marquee span{animation:none}}

(function(){var f=document.querySelector('.st-form');if(!f)return;f.addEventListener('submit',function(e){e.preventDefault();var i=f.querySelector('input');if(!i.value||!i.checkValidity()){i.focus();return;}f.innerHTML='<p style="margin:0;color:#c9a35a;font-weight:700;font-family:Inter,sans-serif">✓ Thank you — the first look is on its way.</p>';});})();