/* ============================================================
   Peter Dooley — newsletter public pages
   Brand extension of peterdooley.ie: Fraunces / Inter, warm paper,
   forest green + burnt amber. One sheet brands every public page
   (subscribe / opt-in / unsubscribe / manage / message / 404).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --bg:#F4EFE4; --surface:#FBF9F1;
  --ink:#15201A; --ink-2:#4A5550; --ink-3:#8A8B83;
  --rule:#DCD5C2; --rule-2:#BCB5A0;
  --forest:#103626; --amber:#B8430A;
  --field:#FFFDF7;
  --shadow:30px 50px 90px -60px rgba(16,54,38,.45);
  --ring:0 0 0 3px rgba(16,54,38,.16);
  --on-forest:#F4EFE4;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E0F10; --surface:#181A1B;
    --ink:#EDE6D2; --ink-2:#B0AC9E; --ink-3:#7C7A70;
    --rule:#2A2B2C; --rule-2:#3A3B3C;
    --forest:#5AA07E; --amber:#E89752;
    --field:#121415;
    --shadow:30px 50px 90px -60px rgba(0,0,0,.7);
    --ring:0 0 0 3px rgba(90,160,126,.22);
    --on-forest:#0E0F10;
  }
}

*{box-sizing:border-box;}
html,body{
  background:var(--bg)!important; color:var(--ink)!important;
  font-family:var(--sans)!important; margin:0;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
}
body{
  min-height:100vh; position:relative;
  border-top:3px solid var(--forest);
  background-image:radial-gradient(140% 90% at 50% -15%, rgba(16,54,38,.06), transparent 55%)!important;
}

/* card ------------------------------------------------------ */
.container.wrap{
  position:relative; z-index:1;
  width:100%; max-width:468px!important;
  margin:8vh auto 5vh!important; padding:44px 44px 34px!important;
  background:var(--surface)!important;
  border:1px solid var(--rule);
  border-radius:5px;
  box-shadow:var(--shadow);
  animation:pd-rise .55s cubic-bezier(.2,.7,.15,1) both;
}
@keyframes pd-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* masthead / wordmark --------------------------------------- */
.header{
  border:0!important; margin:0 0 26px!important; padding:0 0 22px!important;
  text-align:center; border-bottom:1px solid var(--rule)!important; position:relative;
}
.header::after{
  content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  width:44px; height:2px; background:var(--amber);
}
.logo{display:block; line-height:1;}
.logo img{display:none!important;}
.logo::before{
  content:"AN INDEPENDENT NEWSLETTER"; display:block;
  font:600 10px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--amber); margin-bottom:11px;
}
.logo::after{
  content:"Peter Dooley"; display:block;
  font:500 33px/1.05 var(--serif); letter-spacing:-.02em; color:var(--ink);
}

/* headings -------------------------------------------------- */
h1,h2,h3{font-family:var(--serif)!important; font-weight:500!important; letter-spacing:-.02em!important; color:var(--ink)!important;}
.wrap h2{font-size:23px!important; margin:0 0 20px!important; line-height:1.15;}
/* "Lists" section label rendered as an eyebrow */
.lists h2{
  font-family:var(--sans)!important; font-size:11px!important; font-weight:600!important;
  letter-spacing:.14em!important; text-transform:uppercase; color:var(--ink-3)!important;
  margin:2px 0 12px!important;
}

/* form ------------------------------------------------------ */
.form label{
  display:block; margin:16px 0 7px;
  font:600 11px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
}
.form input[type=email], .form input[type=text]{
  width:100%; height:46px; padding:0 14px;
  font:400 15px/1 var(--sans); color:var(--ink)!important;
  background:var(--field)!important; border:1px solid var(--rule-2)!important;
  border-radius:2px!important; outline:none; box-shadow:none!important;
  transition:border-color .15s, box-shadow .15s; -webkit-appearance:none;
}
.form input::placeholder{color:var(--ink-3);}
.form input[type=email]:focus, .form input[type=text]:focus{border-color:var(--forest)!important; box-shadow:var(--ring);}
input.nonce{display:none!important;}

/* lists ----------------------------------------------------- */
.lists{list-style:none; margin:24px 0 0; padding:20px 0 0; border-top:1px solid var(--rule);}
.lists li{list-style:none; margin:0; padding:0;}
.lists label{
  display:inline; margin:0 0 0 4px;
  font:500 15px/1.5 var(--sans)!important; letter-spacing:0!important; text-transform:none!important; color:var(--ink)!important;
}
.lists input[type=checkbox]{width:16px; height:16px; accent-color:var(--forest); vertical-align:-2px;}
.lists .description{color:var(--ink-3)!important; font:400 12.5px/1.5 var(--sans); margin:5px 0 0 26px;}

/* button ---------------------------------------------------- */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:50px; margin-top:26px;
  font:600 13px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-forest)!important; background:var(--forest)!important;
  border:1px solid var(--forest)!important; border-radius:2px!important;
  cursor:pointer; transition:background .18s, transform .06s, box-shadow .18s;
}
.button:hover{background:var(--amber)!important; border-color:var(--amber)!important;}
.button:active{transform:translateY(1px);}
.button:focus-visible{outline:none; box-shadow:var(--ring);}

/* links ----------------------------------------------------- */
a{
  color:var(--forest)!important; text-decoration:none; font-weight:500;
  border-bottom:1px solid var(--rule-2); transition:color .15s, border-color .15s;
}
a:hover{color:var(--amber)!important; border-bottom-color:var(--amber);}
.right{margin-top:22px; text-align:right;}

/* message / confirm / unsubscribe / 404 --------------------- */
.wrap p{color:var(--ink-2); font:400 15px/1.6 var(--sans); margin:0 0 14px;}

/* footer ---------------------------------------------------- */
footer.container, .footer{
  max-width:468px!important; margin:0 auto 7vh!important; text-align:center!important;
  color:var(--ink-3)!important; font:400 11px/1.6 var(--sans)!important; letter-spacing:.02em;
}
footer.container a, .footer a{color:var(--ink-3)!important; border:0!important; font-weight:400;}
.pd-back{display:block; margin:0 auto 8px; color:var(--forest)!important; font-weight:600!important; letter-spacing:.03em;}

/* mobile ---------------------------------------------------- */
@media (max-width:520px){
  .container.wrap{margin:0 auto!important; min-height:100vh; border-radius:0; border-left:0; border-right:0; padding:38px 22px 30px!important; box-shadow:none;}
  .logo::after{font-size:29px;}
}