/* Noms newsletter page (D14): page-templates/template-newsletter.php, shipped as zeen-child/assets/css/pages/newsletter.css.
   Loads after site-chrome.css and homepage.css (form, sign, signup band). Yellow hero like the homepage band. */
body.noms-newsletter{margin:0;background:#fff}
.nn{background:var(--paper)}
.nn em.nh-teal{font-style:normal;color:var(--teal)}

.nn-hero{background:var(--yellow)}
.nn-hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,88px)}
.nn-hero h1{margin:0;font:900 clamp(52px,8.4vw,120px)/.9 var(--display);letter-spacing:-.05em;color:var(--ink)}
.nn-hero h1 span{display:block}
.nn-dek{margin:20px 0 0;font:500 clamp(18px,1.8vw,22px)/1.4 var(--sans);color:var(--ink);max-width:36ch}
.nn-form{margin-top:24px;max-width:560px}

.nn-inbox__k{margin:0 0 10px;font:700 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.nn-inbox__mail{display:block;text-decoration:none;background:var(--paper);border-radius:var(--r);box-shadow:inset 0 0 0 1.5px var(--ink);padding:20px 22px;transform:rotate(1.2deg)}
.nn-inbox__mail p{margin:0;font:400 15px/1.4 var(--sans);color:var(--ink)}
.nn-inbox__subj{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px !important}
.nn-inbox__shot{display:block;position:relative;max-height:440px;overflow:hidden;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
.nn-inbox__shot img{display:block;width:100%;height:auto}
.nn-inbox__shot::after{content:"";position:absolute;inset:auto 0 0;height:96px;background:linear-gradient(rgba(255,255,255,0),var(--paper))}
.nn-inbox__go{display:inline-block;margin-top:14px;font:700 16px/1.3 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.nn-inbox__mail:hover .nn-inbox__go,.nn-inbox__mail:focus-visible .nn-inbox__go{text-decoration-thickness:2px}
.nn-inside .d{width:9px;height:9px;border-radius:50%;background:var(--teal);flex:none}

.nn-sec{margin-top:clamp(48px,6vw,88px)}
.nn-head{padding-bottom:12px;border-bottom:1.5px solid var(--ink)}
.nn-head .nh-sign{margin-bottom:8px}
.nn-head h2{margin:0;font:900 clamp(32px,3.6vw,48px)/1 var(--display);letter-spacing:-.04em;color:var(--ink)}

.nn-inside{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.nn-inside li{padding:20px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-2)}
.nn-inside__k{display:flex;align-items:center;gap:8px;margin:0;font:700 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.nn-inside h3{margin:10px 0 6px;font:900 26px/1.05 var(--display);letter-spacing:-.03em;color:var(--ink)}
.nn-inside li p:last-child{margin:0;font-size:16px;line-height:1.45;color:var(--muted)}

.nn-recent{list-style:none;margin:0;padding:0;max-width:820px}
.nn-recent li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.nn-recent time{font:700 13px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.nn-recent span,.nn-recent a{font:800 20px/1.25 var(--display);letter-spacing:-.015em;color:var(--ink)}
.nn-recent a{text-decoration:none}
.nn-recent a:hover,.nn-recent a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.nn-recent a span{font:inherit}

.nn-faq{max-width:820px}
.nn-faq details{border-bottom:1px solid var(--line)}
.nn-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;font:800 19px/1.3 var(--display);color:var(--ink)}
.nn-faq summary::-webkit-details-marker{display:none}
.nn-faq summary::after{content:"+";font:400 26px/1 var(--sans)}
.nn-faq details[open] summary::after{content:"\2212"}
.nn-faq details p{margin:0 0 18px;font-size:17px;line-height:1.5;color:var(--body);max-width:60ch}

.nn .nh-news{margin-top:clamp(48px,6vw,88px)}

@media (max-width:900px){
  .nn-hero__grid{grid-template-columns:1fr}
  .nn-inbox__mail{transform:none}
  .nn-inbox__shot{max-height:340px}
  .nn-inside{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .nn-inside{grid-template-columns:1fr}
  .nn-recent li{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){.nn-inbox__mail{transform:none}}