/* Production layer on top of the approved prototype cascade.
   Everything here either adapts a prototype component to real markup
   (labels instead of buttons, fieldsets, server-rendered states) or styles a
   screen the prototype never had (preferences, unsubscribe, dev tools). */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #20201e;
  color: #f7f6f2;
  padding: 10px 16px;
  z-index: 20;
}
.skip-link:focus { left: 8px; top: 8px; }

.site-foot {
  max-width: 1280px;
  margin: 60px auto 0;
  padding: 24px 40px 46px;
  border-top: 1px solid #d9d8d2;
  font: 11px/1.7 Arial, Helvetica, sans-serif;
  letter-spacing: .3px;
  color: #60605b;
  text-align: center;
}
.site-foot a { color: #38489e; }

/* ---- interest chips: labels wrapping a real checkbox ---- */
.topic { cursor: pointer; justify-content: space-between; }
.topic input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.topic:focus-within { outline: 2px solid #38489e; outline-offset: 3px; }
.topic.selected b { color: #38489e; }
.topic.small { font-size: 14px; min-height: 42px; padding: 10px 16px; }

.topic-set { border: 0; padding: 0; margin: 26px 0 0; }
.topic-set legend {
  font: 13px/1.5 Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
  color: #20201e;
  padding: 0;
}
.topic-set legend i { font-weight: 400; color: #60605b; font-style: italic; }
.interest-group { margin-top: 18px; }
.interest-group h3 {
  font: 10px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 1.2px;
  color: #60605b;
  margin: 0;
  text-transform: uppercase;
}
.interest-group[hidden], .topic-set[hidden] { display: none; }

/* ---- signup tail under the personalized preview ---- */
.signup-tail {
  border-top: 1px solid #d9d8d2;
  margin: 70px auto 0;
  max-width: 640px;
  padding-top: 48px;
}
.tail-inner h2 {
  font: 44px/1.05 'Instrument Serif','Instrument Fallback', Georgia, serif;
  letter-spacing: -1px;
  margin: 14px 0 12px;
}
.tail-inner > p { font: 15px/1.7 Arial, Helvetica, sans-serif; color: #60605b; max-width: 30em; }
.tail-inner .email-field { margin-top: 26px; max-width: 420px; }
.tail-inner .button { margin-top: 22px; }
.email-field label {
  font: 13px/1.5 Arial, Helvetica, sans-serif;
  font-weight: 700;
  display: block;
  margin-bottom: 9px;
}
.email-field .hint,
.hint {
  display: block;
  font: 12px/1.6 Arial, Helvetica, sans-serif;
  color: #60605b;
  margin-top: 8px;
}
.consent-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
  font: 12px/1.6 Arial, Helvetica, sans-serif;
  color: #60605b;
  max-width: 34em;
}
.consent-check input { margin-top: 3px; accent-color: #38489e; }
.fine { font: 11px/1.7 Arial, Helvetica, sans-serif; color: #60605b; margin-top: 14px; }
.notice {
  border: 1px solid #c9c8c2;
  border-left: 3px solid #38489e;
  background: #ffffff5c;
  padding: 14px 16px;
  font: 13px/1.65 Arial, Helvetica, sans-serif;
  color: #20201e;
  margin: 20px 0 0;
  max-width: 34em;
}
.error {
  font: 13px/1.6 Arial, Helvetica, sans-serif;
  color: #8e352d;
  margin: 14px 0 0;
}
.button[disabled], .button.is-sending { opacity: .55; pointer-events: none; }

/* ---- delivery screen ----
   The envelope rides in the beak, then travels into the postbox and passes
   behind it. Geometry is tuned to the drawn content of each asset, which sits
   inside transparent padding. */
.delivery .quiet { display: inline-block; margin-top: 26px; }
.beak-mail { width: 74px; left: 168px; top: 50px; animation-name: post; }
.mail-arrived { right: 112px; top: 92px; animation-name: posted; }

/* The tick only appears once the envelope is inside the box. */
@keyframes posted {
  0%, 90% { opacity: 0; transform: scale(.5); }
  97%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes post {
  0%, 50% { opacity: 1; transform: rotate(13deg); }
  70% { opacity: 1; transform: translate(122px, 26px) rotate(34deg) scale(.86); }
  80% { opacity: 1; transform: translate(152px, 46px) rotate(52deg) scale(.6); }
  88%, 100% { opacity: 0; transform: translate(160px, 56px) rotate(58deg) scale(.42); }
}

@media (max-width: 700px) {
  .courier { animation-name: arrive-narrow; }
  .beak-mail { width: 56px; left: 124px; top: 38px; animation-name: post-mobile; }
  .mail-arrived { right: 24px; top: 60px; }
}

/* Serius stops short of the box on a narrow screen instead of standing on it. */
@keyframes arrive-narrow {
  0% { transform: translateX(-150px) translateY(-20px); }
  40% { transform: translateX(72px) translateY(-7px); }
  55%, 80% { transform: translateX(78px); }
  100% { transform: translateX(62px); }
}

/* Narrower travel: the box stands much closer to the beak on a phone. */
@keyframes post-mobile {
  0%, 50% { opacity: 1; transform: rotate(13deg); }
  70% { opacity: 1; transform: translate(44px, 14px) rotate(34deg) scale(.86); }
  80% { opacity: 1; transform: translate(62px, 26px) rotate(52deg) scale(.6); }
  88%, 100% { opacity: 0; transform: translate(68px, 32px) rotate(58deg) scale(.42); }
}

/* Below 360px the scene is clamped to the viewport, pulling the box closer again. */
@media (max-width: 360px) {
  .courier { animation-name: arrive-tiny; }
  .beak-mail { animation-name: post-narrow; }
}

@keyframes arrive-tiny {
  0% { transform: translateX(-150px) translateY(-20px); }
  40% { transform: translateX(44px) translateY(-7px); }
  55%, 80% { transform: translateX(50px); }
  100% { transform: translateX(34px); }
}

@keyframes post-narrow {
  0%, 50% { opacity: 1; transform: rotate(13deg); }
  70% { opacity: 1; transform: translate(50px, 12px) rotate(34deg) scale(.86); }
  80% { opacity: 1; transform: translate(66px, 24px) rotate(52deg) scale(.6); }
  88%, 100% { opacity: 0; transform: translate(72px, 30px) rotate(58deg) scale(.42); }
}

@media (prefers-reduced-motion: reduce) {
  .beak-mail { animation: none; }
}

/* ---- generic document pages (preferences, unsubscribe, messages) ---- */
.sheet {
  max-width: 1280px;
  margin: auto;
  padding: 40px 40px 70px;
}
.sheet.narrow { max-width: 720px; }
.sheet h1 {
  font: 58px/1 'Instrument Serif','Instrument Fallback', Georgia, serif;
  letter-spacing: -1.5px;
  margin: 14px 0 18px;
}
.sheet h2 {
  font: 30px/1.15 'Instrument Serif','Instrument Fallback', Georgia, serif;
  letter-spacing: -.5px;
  margin: 38px 0 12px;
}
.sheet h3 { font: 15px/1.4 Arial, Helvetica, sans-serif; margin: 26px 0 8px; }
.dateline {
  font: 10px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #60605b;
}
.lede { font: 17px/1.75 Georgia, 'Times New Roman', serif; color: #20201e; max-width: 34em; }
.sheet p { font: 15px/1.75 Arial, Helvetica, sans-serif; color: #20201e; max-width: 36em; }
.sheet p.fine, .sheet .hint { color: #60605b; }
.sheet a { color: #38489e; }
.sheet .field { border: 0; padding: 0; margin: 0 0 30px; }
.sheet legend { font-size: 14px; font-weight: 700; margin-bottom: 9px; }
.choice, .choice-row label, .choice-grid label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font: 14px/1.6 Arial, Helvetica, sans-serif;
  margin: 0 0 10px;
}
.choice input { margin-top: 3px; accent-color: #38489e; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 26px; }
.choice strong { display: block; }
.choice em { font-style: normal; color: #60605b; font-size: 13px; }
.text-input, .sheet input[type=text], .sheet input[type=email], .sheet select {
  border: 1px solid #a4a49e;
  border-radius: 999px;
  padding: 14px 20px;
  min-height: 52px;
  font: 16px/1.4 Arial, Helvetica, sans-serif;
  background: #f7f6f270;
  outline: none;
  max-width: 420px;
  width: 100%;
}
.sheet input:focus, .sheet select:focus {
  border-color: #38489e;
  box-shadow: 0 0 0 3px #38489e24;
}
.cta-row { margin-top: 26px; }
.dev-box, .dev-list {
  border: 1px dashed #a4a49e;
  padding: 14px 18px;
  font: 13px/1.7 Arial, Helvetica, sans-serif;
  margin-top: 28px;
}
.state-note { font: 11px/1.7 Arial, Helvetica, sans-serif; color: #60605b; margin-top: 18px; }
.address strong { word-break: break-word; }

@media (max-width: 700px) {
  .site-foot, .sheet { padding-left: 22px; padding-right: 22px; }
  .sheet h1 { font-size: 40px; letter-spacing: -1px; }
  .signup-tail { margin-top: 48px; padding-top: 34px; }
  .tail-inner h2 { font-size: 34px; }
}

/* Micro-feedback: the drawn button presses in, and its arrow leans the way
   it is taking you. */
.button:active { transform: translateY(0) scale(.975); }
.button span { transition: transform 160ms cubic-bezier(.2,.6,.2,1); }
.button:hover span { transform: translate(3px,-3px); }
@media (prefers-reduced-motion: reduce) {
  .button:active { transform: none; }
  .button:hover span { transform: none; }
}