/* subscribe.css — subscribe-260913. /subscribe and the three end states.
   Tokens, nav and footer come from home.css, which loads first. Nothing is redefined
   here except this page's measure and the two thank-you cuts. */

/* ---- the form page --------------------------------------------------------- */
/* round4c fix r1 F7 (G12): left edge on the page gutter, not centred. See about.css. */
/* F7 (G12): scoped to `main` - the class is on the body too, which doubled the gutter. */
main.sub{padding:clamp(48px,7vw,96px) var(--pad) clamp(56px,8vw,104px);max-width:calc(52ch + 2 * var(--pad));margin:0}
.sub h1{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:clamp(30px,4vw,44px);line-height:1.14;letter-spacing:-.01em;margin:0;max-width:17ch}
/* --muted-sm, not --muted: --muted measures 4.40:1 on this paper and fails AA. Same call
   as legal.css — a form nobody can read is not a form. */
.sub .blurb{font-size:17px;line-height:1.6;color:var(--muted-sm);max-width:52ch;margin:1.1em 0 0;padding-bottom:1.6em;border-bottom:1px solid var(--hair)}

.sform{margin:2em 0 0;display:flex;flex-direction:column;gap:22px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{font-size:13px;font-weight:400;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.fld .opt{text-transform:none;letter-spacing:0;color:var(--muted-sm);font-size:13px}
.fld input{font-family:inherit;font-weight:300;font-size:17px;color:var(--ink);background:#fff;
  border:1px solid var(--hair);border-radius:0;padding:0 14px;min-height:52px;width:100%}
.fld input:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-color:var(--ink)}
.fld input[aria-invalid="true"]{border-color:#B3261E;border-width:2px}

/* The honeypot. Not display:none — some bots skip hidden inputs, and a screen reader must
   be told to leave it alone, which aria-hidden + tabindex + the label do. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.err{font-size:15px;line-height:1.5;color:#B3261E;margin:0;padding:12px 14px;border-left:2px solid #B3261E;background:#fdf6f5}
.err:empty{display:none}

.sform button[type=submit]{font-family:inherit;font-size:15px;font-weight:400;letter-spacing:.07em;
  text-transform:uppercase;color:var(--paper);background:var(--ink);border:1px solid var(--ink);
  min-height:52px;padding:0 30px;cursor:pointer;align-self:flex-start}
.sform button[type=submit]:hover{background:#242222}
.sform button[type=submit]:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.sform button[type=submit][disabled]{background:var(--muted-sm);border-color:var(--muted-sm);cursor:not-allowed}

.fine{font-size:14px;line-height:1.55;color:var(--muted-sm);margin:0;max-width:52ch}
.fine a{color:var(--ink)}
/* Shown only when Turnstile cannot run (no JS, or no site key bound). */
.nojs{font-size:15px;line-height:1.55;color:var(--ink);margin:0;padding:14px 16px;border:1px solid var(--hair);background:#fff}
body[data-ts="on"] .nojs{display:none}
.no-js-only{display:none}

/* ---- the thank-you cuts ---------------------------------------------------- */
/* Cut A "the underscore": paper page, stacked logo, two lines, nothing else. */
.cutA{padding:clamp(64px,11vw,140px) var(--pad) clamp(56px,9vw,120px);max-width:calc(46ch + 2 * var(--pad));margin:0 auto;text-align:left}
.cutA .mk{width:clamp(148px,20vw,208px);height:auto;margin:0 0 clamp(34px,5vw,52px)}
.ln1{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:clamp(32px,6vw,52px);line-height:1.1;letter-spacing:-.015em;color:var(--ink);margin:0}
/* The underscore is the cursor: drawn as an element so it can blink, and so the glyph
   never gets line-broken away from the word it belongs to. */
.cur{display:inline-block;width:.52em;height:.11em;background:var(--green);vertical-align:baseline;margin-left:.10em;animation:blink 1.15s steps(1,end) infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cur{animation:none;opacity:1}}
.ln2{font-family:"Inter Tight",system-ui,sans-serif;font-weight:300;font-size:clamp(17px,2.3vw,20px);line-height:1.55;color:var(--muted-sm);margin:1.15em 0 0;max-width:34ch}
.bk{display:inline-flex;align-items:center;min-height:44px;margin-top:clamp(30px,4.5vw,46px);
  font-size:15px;letter-spacing:.02em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.bk:hover{border-color:var(--green)}

/* Cut B "the tile": one wall tile, muted, the site's own caption row under it. */
.cutB{margin:0 auto;max-width:1600px}
.cutB .stage{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden}
@media (max-width:767px){.cutB .stage{aspect-ratio:4/5}}
.cutB .stage video{width:100%;height:100%;object-fit:cover}
.cutB .capB{background:var(--paper);padding:13px var(--pad) 10px;display:flex;align-items:baseline;
  justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--hair)}
.cutB .capB .client{font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.cutB .capB .count{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--muted-sm)}
.cutB .say{padding:clamp(40px,6vw,72px) var(--pad) clamp(48px,7vw,88px);max-width:calc(46ch + 2 * var(--pad));margin:0 auto}

/* round4e-260918 D24: the .phnote placeholder block is removed with the mechanism. */