/* The Mail Gaze — shared design tokens & primitives
   Palette derives from the subject's materials: typewriter-ribbon black with a
   blue cast, carbon-paper violet, onionskin stock, ribbon red, postmark grey. */

:root{
  --carbon:#1B1830;
  --carbon-lift:#262240;
  --onionskin:#E6E4DA;
  --ribbon:#C8352C;
  --postmark:#8B8AA0;

  --display:"Bodoni Moda", Georgia, serif;
  --body:"Spectral", Georgia, serif;
  --mono:"Courier Prime", "Courier New", monospace;
  --hand:"Caveat", cursive;

  --gutter:clamp(20px, 5vw, 64px);
  --measure:64rem;

  /* Stamp geometry lives here so the form can reserve room for it. */
  --stamp-w:clamp(52px, 7vw, 66px);
  --stamp-top:1.1rem;
  --stamp-ratio:.82;
  --ef-pad:clamp(1.5rem, 3.4vw, 2.2rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--carbon);
  color:var(--onionskin);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.65;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background:
    radial-gradient(ellipse 90% 60% at 20% -10%, rgba(139,138,160,.13), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 110%, rgba(139,138,160,.16), transparent 60%);
}
.wrap{position:relative;z-index:1;max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:44rem}

a{color:inherit}
:focus-visible{outline:2px solid var(--ribbon);outline-offset:3px}

.eyebrow{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--postmark);margin:0 0 1.1rem;
}
.rule-line{height:1px;background:rgba(230,228,218,.16);border:0;margin:0}

/* masthead ---------------------------------------------------------------- */
.masthead{padding-block:1.8rem 1.2rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.logotype{font-family:var(--display);font-size:1.1rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;text-decoration:none}
.gloss{font-family:var(--mono);font-size:.64rem;color:var(--postmark);letter-spacing:.06em;max-width:32ch}

/* buttons ----------------------------------------------------------------- */
.btn{
  display:inline-block;font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.95rem 1.5rem;text-decoration:none;border:1px solid var(--onionskin);background:none;color:inherit;
  cursor:pointer;transition:background .22s ease,color .22s ease;
}
.btn:hover{background:var(--onionskin);color:var(--carbon)}
.btn--ribbon{background:var(--ribbon);border-color:var(--ribbon);color:var(--onionskin)}
.btn--ribbon:hover{background:transparent;color:var(--ribbon)}
.btn--block{width:100%;text-align:center}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* paper surface ----------------------------------------------------------- */
.paper{background:var(--onionskin);color:var(--carbon)}

/* form primitives (rendered on paper) ------------------------------------- */
.field{margin-bottom:1.15rem}
.field label{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(27,24,48,.55);margin-bottom:.4rem;
}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(27,24,48,.32);
  font-family:var(--mono);font-size:.95rem;color:var(--carbon);padding:.5rem 0;border-radius:0;
  transition:border-color .2s ease;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(27,24,48,.3)}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ribbon)}
.field .hint{font-family:var(--mono);font-size:.64rem;color:rgba(27,24,48,.5);margin:.45rem 0 0;line-height:1.6}
.field .hint b{color:var(--carbon);font-weight:400}

.choices{display:flex;gap:.5rem;flex-wrap:wrap}
.choice{
  flex:1 1 auto;min-width:8rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.85rem .8rem;border:1px solid rgba(27,24,48,.3);background:transparent;color:var(--carbon);
  cursor:pointer;text-align:center;transition:all .18s ease;
}
.choice{min-height:44px}
.choice:hover{border-color:var(--carbon)}

/* Touch: iOS Safari zooms the viewport whenever a focused field computes under
   16px, which fires on every input in the signup flow. Bump on coarse pointers
   only so the desktop type scale is untouched. */
@media (pointer:coarse){
  .field input,.field textarea{font-size:16px}
  .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .logotype{display:inline-block;padding-block:.35rem}
}
.choice[aria-pressed="true"]{background:var(--carbon);color:var(--onionskin);border-color:var(--carbon)}

.err{font-family:var(--mono);font-size:.68rem;color:var(--ribbon);margin:.5rem 0 0;min-height:1rem}

/* stamp & postmark -------------------------------------------------------- */
.stamp{
  position:absolute;top:var(--stamp-top);right:1.1rem;width:var(--stamp-w);aspect-ratio:var(--stamp-ratio)/1;
  background:var(--carbon);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.3rem;text-align:center;
  /* Two mask layers, unioned. The tiled circles punch the perforations; the
     solid inset rect holds the middle opaque so the denomination stays
     readable. With only the tiled layer the holes repeat across the whole
     stamp and the number disappears into a dot grid. */
  -webkit-mask:
    radial-gradient(circle 3.1px, transparent 96%, #000 100%) -3.1px -3.1px / 9px 9px,
    linear-gradient(#000 0 0) 50% / calc(100% - 9px) calc(100% - 9px) no-repeat;
  mask:
    radial-gradient(circle 3.1px, transparent 96%, #000 100%) -3.1px -3.1px / 9px 9px,
    linear-gradient(#000 0 0) 50% / calc(100% - 9px) calc(100% - 9px) no-repeat;
}
.stamp b{font-family:var(--display);color:var(--onionskin);font-size:1.35rem;line-height:1;font-weight:500}
.stamp span{font-family:var(--mono);color:var(--postmark);font-size:.4rem;letter-spacing:.1em;text-transform:uppercase}

.postmark{
  width:clamp(84px,13vw,112px);aspect-ratio:1;border:1.5px solid var(--carbon);border-radius:50%;
  color:var(--carbon);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;
  transform:rotate(-11deg);text-align:center;
  animation:stampdown .5s cubic-bezier(.34,1.7,.5,1) both;
}
.postmark strong{font-weight:700;font-size:.62rem}
@keyframes stampdown{from{opacity:0;transform:rotate(-11deg) scale(1.8)}to{opacity:.8;transform:rotate(-11deg) scale(1)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}