/* Heads Up Penarth: the yellow "Saturday email" strip with its own sign-up form.
   Used on the home page (twice) and on other pages. Logic: signup.js. */
.sub-strip{--ss-ink:var(--ink,#10233F);container-type:inline-size;position:relative;margin:56px 0;padding:26px clamp(20px,3.2vw,40px);border-radius:28px;background:var(--accent,#FFC738);color:var(--ss-ink)}
.sub-strip-in{display:grid;grid-template-columns:124px minmax(0,1fr) minmax(300px,460px);gap:18px 40px;align-items:center}
.sub-strip[hidden]{display:none}
.sub-strip-art{display:block;width:100%;height:auto;overflow:visible}
.sub-strip .sw{fill:#fff;stroke:var(--ss-ink);stroke-width:3;stroke-linejoin:round}
.sub-strip .sl{fill:none;stroke:var(--ss-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sub-strip .sk{fill:var(--ss-ink)}
.sub-strip-copy{min-width:0}
.sub-strip-t{margin:0;font-family:var(--display,'Schibsted Grotesk',Inter,sans-serif);font-weight:800;font-size:clamp(25px,2.5vw,34px);line-height:1.04;letter-spacing:-0.02em;color:var(--ss-ink)}
.sub-strip-copy p:not(.sub-strip-t){margin:10px 0 0;max-width:50ch;font-size:16.5px;line-height:1.5;color:var(--ss-ink)}
.sub-strip-form{min-width:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sub-strip-form[hidden]{display:none}
.sub-strip-hand{flex:1 1 100%;margin:0 0 -8px;padding-right:58px;display:flex;justify-content:flex-end;align-items:flex-end;gap:2px;font:24px/1 'Gochi Hand',cursive;color:var(--ss-ink)}
.sub-strip-hand svg{flex:0 0 auto;margin-bottom:-16px}
.sub-strip-form input[type="email"]{flex:1 1 200px;min-width:0;height:56px;border-radius:14px;border:2px solid var(--ss-ink);padding:0 16px;font:17px Inter,sans-serif;color:var(--ss-ink);background:#fff}
.sub-strip-form input::placeholder{color:#5D6A80}
.sub-strip-form input[aria-invalid="true"]{box-shadow:0 0 0 3px #B4231A}
.sub-strip-form button[type="submit"]{flex:0 0 auto;height:56px;padding:0 26px;border:0;border-radius:14px;background:var(--ss-ink);color:#fff;font:700 17px Inter,sans-serif;cursor:pointer}
.sub-strip-form button[type="submit"]:disabled{opacity:.8;cursor:progress}
.sub-strip :focus-visible{outline:3px solid var(--ss-ink);outline-offset:3px}
.sub-strip .form-note{flex:1 1 100%;margin:0;font-size:14.5px;font-weight:600;color:var(--ss-ink)}
.sub-strip .form-note:empty{display:none}
.sub-strip .form-note.err{color:#8E1B12}
.sub-strip .linkish{border:0;background:none;padding:2px 0;color:var(--ss-ink);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sub-strip-fine{flex:1 1 100%;margin:0;font-size:13.5px;line-height:1.45;color:var(--ss-ink)}
.sub-strip-done{grid-column:3;min-width:0;padding:18px 20px;border-radius:16px;background:#fff;outline:none}
.sub-strip-done[hidden]{display:none}
.sub-strip-done .sub-strip-t{font-size:24px}
.sub-strip-done p:not(.sub-strip-t){margin:6px 0 0;font-size:15.5px;line-height:1.5}
.sub-strip-done b{word-break:break-all}
.sub-strip .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sub-strip .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@container (max-width:900px){
  .sub-strip-in{grid-template-columns:96px minmax(0,1fr);gap:18px 28px}
  .sub-strip-form,.sub-strip-done{grid-column:1 / -1}
  .sub-strip-hand{padding-right:64px}
}
@container (max-width:520px){
  .sub-strip-in{grid-template-columns:64px minmax(0,1fr);gap:14px 16px;align-items:start}
  .sub-strip-t{font-size:24px}
  .sub-strip-copy p:not(.sub-strip-t){font-size:15.5px}
  .sub-strip-form button[type="submit"]{flex:1 1 100%}
  .sub-strip-hand{display:none}
}
@media (max-width:560px){.sub-strip{margin:40px 0;padding:22px 18px 20px;border-radius:22px}}