/*
Theme Name: Northern Rep Coming Soon
Theme URI: https://thenorthernrepcompany.com
Author: The Northern Rep Company
Description: A one-page "coming soon" theme for The Northern Rep Company: the logo on slate, "Founded in Grimsby, 2026", and a MailPoet sign-up form for launch news.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: northern-rep
*/

/* Layout: one stage. A slate backdrop, a single warm spotlight falling from above onto the logo, then the line, the sign-up, and a quiet footer. */
@font-face{font-family:"Jost";src:url("assets/fonts/jost-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  color-scheme:dark;
  --slate:#1F2A33; --slate-deep:#161E25; --slate-line:#34424E;
  --cream:#F3EDE2; --muted:#B4AEA3; --gold:#C29455; --gold-hi:#E8C996; --ink:#121212; --error:#F0A99B;
  --sans:"Jost","Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100%;display:flex;flex-direction:column;
  background:var(--slate);color:var(--cream);font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* the spotlight */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 30%,rgba(232,201,150,.13),rgba(232,201,150,0) 70%),
    linear-gradient(180deg,rgba(0,0,0,0) 60%,var(--slate-deep));
}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
main{
  position:relative;flex:1;display:grid;place-items:center;
  padding-block:clamp(48px,10vh,120px) 40px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
}
.stage{width:100%;max-width:560px;display:grid;gap:36px;justify-items:center;text-align:center}
.logo{width:min(100%,460px);height:auto;display:block}
.founded{
  margin:0;font-size:13px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-hi);
  display:flex;align-items:center;gap:14px;
}
.founded::before,.founded::after{content:"";width:28px;height:1px;background:var(--gold);opacity:.7}
h1{margin:0;font-weight:400;font-size:clamp(40px,8vw,64px);line-height:1;letter-spacing:.01em;text-wrap:balance}
h1 .dots{color:var(--gold)}
.intro{margin:0;color:var(--muted);max-width:44ch;text-wrap:pretty}
.signup{width:100%;display:grid;gap:12px;text-align:left}
.signup-label{font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--cream);margin:0}
.privacy{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.privacy a,footer a{color:var(--cream);text-underline-offset:3px}
.admin-note{margin:0;padding:14px 16px;border:1px dashed var(--gold);border-radius:3px;font-size:14px;color:var(--gold-hi)}

/* MailPoet form, restyled to match. MailPoet adds its own inline styles, so these use !important. */
.signup .mailpoet_form{display:flex!important;flex-wrap:wrap!important;gap:10px!important;padding:0!important;margin:0!important;background:none!important;border:0!important;width:100%!important;max-width:none!important}
.signup .mailpoet_form_columns,.signup .mailpoet_form_column{display:contents}
.signup .mailpoet_paragraph{margin:0!important;padding:0!important}
.signup .mailpoet_paragraph:has(.mailpoet_text){flex:1 1 240px!important;min-width:0}
.signup .mailpoet_paragraph:has(.mailpoet_submit){flex:0 0 auto!important;position:relative}
.signup .mailpoet_text_label{display:block!important;margin:0 0 6px!important;font-size:14px!important;color:var(--cream)!important}
.signup .mailpoet_text{
  width:100%!important;height:52px!important;padding:0 16px!important;border-radius:3px!important;margin:0!important;
  border:1px solid var(--slate-line)!important;background:var(--slate-deep)!important;color:var(--cream)!important;
  font:inherit!important;font-size:17px!important;box-shadow:none!important;
}
.signup .mailpoet_text::placeholder{color:#7F8890!important;opacity:1}
.signup .mailpoet_text:focus{outline:2px solid var(--gold)!important;outline-offset:1px;border-color:var(--gold)!important}
.signup .mailpoet_submit{
  width:auto!important;height:52px!important;padding:0 24px!important;margin:0!important;border:0!important;border-radius:3px!important;cursor:pointer;
  background:var(--gold)!important;color:var(--ink)!important;font-family:var(--sans)!important;font-size:16px!important;font-weight:600!important;
  letter-spacing:.06em!important;text-transform:uppercase!important;box-shadow:none!important;transition:background .15s;
}
.signup .mailpoet_submit:hover{background:var(--gold-hi)!important}
.signup .mailpoet_submit:focus-visible{outline:2px solid var(--cream)!important;outline-offset:2px}
.signup .mailpoet_form_loading{position:absolute;right:8px;bottom:-18px}
.signup .mailpoet_message{flex:1 1 100%!important;margin:0!important;padding:0!important}
.signup .mailpoet_validate_success{margin:0!important;padding:18px 20px!important;border:1px solid var(--slate-line);border-radius:3px;background:rgba(22,30,37,.6);color:var(--gold-hi)!important;font-size:16px!important;text-align:center}
.signup .mailpoet_validate_error,.signup .parsley-errors-list{margin:6px 0 0!important;padding:0!important;list-style:none;color:var(--error)!important;font-size:14px!important}
@media (max-width:420px){
  .signup .mailpoet_paragraph:has(.mailpoet_submit){flex:1 1 100%!important}
  .signup .mailpoet_submit{width:100%!important}
  .founded{letter-spacing:.22em;font-size:12px;gap:10px}
  .founded::before,.founded::after{width:16px}
}

/* Ordinary pages such as the privacy notice */
.doc{width:100%;max-width:680px;display:grid;gap:18px;text-align:left}
.doc .logo{width:min(100%,280px)}
.doc h1{font-size:clamp(32px,6vw,44px)}
.doc h2,.doc h3{margin:12px 0 0;font-weight:500;font-size:20px;color:var(--gold-hi)}
.doc p,.doc li{margin:0;color:var(--muted);max-width:65ch}
.doc .entry{display:grid;gap:14px}
.doc ul,.doc ol{margin:0;padding-left:20px;display:grid;gap:6px}
.doc strong{color:var(--cream);font-weight:500}
.doc a{color:var(--cream);text-underline-offset:3px}

footer{
  position:relative;font-size:13px;color:var(--muted);text-align:center;
  padding-block:20px calc(20px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;
}
@media (prefers-reduced-motion:no-preference){
  .stage>*{animation:rise .8s ease-out both}
  .stage>*:nth-child(2){animation-delay:.12s}
  .stage>*:nth-child(3){animation-delay:.24s}
  .stage>*:nth-child(4){animation-delay:.36s}
  .stage>*:nth-child(5){animation-delay:.48s}
  @keyframes rise{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
}