/* Dear Hattie. Self hosted type, own origin only, no third party anything. */

@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FB00-FB04;
}
@font-face{
  font-family:"Outfit";
  src:url("/assets/fonts/outfit-var-latin.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FB00-FB04;
}

:root{
  color-scheme:light;
  --ink:#14172B;
  --cream:#F4F1EA;
  --pip:#FF5A36;
  /* The pack's #6F7283 is 4.22:1 on cream, just under AA for body text.
     Darkened two points of lightness at the same hue to clear 4.5:1. */
  --muted-on-cream:#666878;
  --muted-on-ink:#A9ABB8;
  --body-on-cream:#4A4F66;
  --rule:#DDD8CC;
  --rule-on-ink:rgba(244,241,234,.16);
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Outfit","Avenir Next",Helvetica,Arial,sans-serif;
  --gutter:clamp(1.25rem,6vw,2.5rem);
  --measure:34rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--body-on-cream);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
@media(min-width:48rem){body{font-size:1.125rem}}

.wrap{width:100%;max-width:64rem;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--measure)}

h1,h2,h3{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:400;
  color:var(--ink);
  margin:0;
  letter-spacing:-.015em;
  line-height:1.1;
  text-wrap:balance;
}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

/* Section label: small caps, wide tracking, with the brand dot as the only
   place orange appears outside the logo. */
.label{
  display:flex;align-items:center;gap:.6rem;
  margin:0 0 1.75rem;
  font-size:.6875rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-on-cream);
}
.label::before{
  content:"";width:.4375rem;height:.4375rem;border-radius:50%;
  background:var(--pip);flex:none;
}
.on-ink .label{color:var(--muted-on-ink)}

/* ---- header ---- */
.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:clamp(1.25rem,4vw,2rem);
}
.masthead img{width:clamp(8.5rem,26vw,11.5rem);height:auto;display:block}
.status{
  font-size:.625rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-on-cream);white-space:nowrap;
}

/* ---- hero ---- */
.hero{padding-block:clamp(3rem,12vw,7.5rem) clamp(3rem,10vw,6rem)}
.hero h1{font-size:clamp(2.75rem,10vw,5.75rem);max-width:12ch}
.hero .sub{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  font-size:clamp(1.125rem,2.6vw,1.4375rem);
  line-height:1.5;max-width:31rem;color:var(--body-on-cream);
}
.hero .quiet{margin-top:1.5rem;max-width:31rem;color:var(--muted-on-cream);font-size:1rem}

/* ---- sections ---- */
section{padding-block:clamp(3rem,9vw,5.5rem)}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
h2{font-size:clamp(1.875rem,5vw,3rem);max-width:18ch;margin-bottom:1.75rem}
h3{font-family:var(--sans);font-weight:600;font-size:1.0625rem;letter-spacing:0;color:var(--ink)}

.band{background:var(--ink);color:var(--muted-on-ink)}
.band h2,.band h3{color:var(--cream)}

/* ---- how it works ---- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:2.25rem}
@media(min-width:52rem){.steps{grid-template-columns:repeat(3,1fr);gap:3rem}}
.steps li{display:grid;gap:.6rem;align-content:start}
.steps .n{
  font-family:var(--serif);font-size:1.75rem;line-height:1;color:var(--muted-on-cream);
}
.band .steps .n{color:var(--muted-on-ink)}
.also-head{margin:3rem 0 1.5rem}

/* ---- message cards ---- */
.cards{display:grid;gap:2.5rem;margin-top:2.75rem}
@media(min-width:56rem){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 2.5rem}}
.exchange{display:grid;gap:.75rem}
.msg{border-radius:1.125rem;padding:1.375rem 1.5rem;font-size:1rem;line-height:1.6}
.msg.ask{
  background:#FFFFFF;border:1px solid var(--rule);color:var(--ink);
  border-bottom-left-radius:.375rem;
}
.msg.reply{
  background:var(--ink);color:var(--cream);
  border-bottom-right-radius:.375rem;
  margin-left:clamp(1.5rem,6vw,3.5rem);
}
.msg.reply .sig{
  display:block;margin-top:.85rem;font-family:var(--serif);font-size:1.0625rem;
  color:var(--cream);}

/* ---- lists ---- */
.also{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
@media(min-width:44rem){.also{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 2.5rem}}
.also li{padding-left:1.1rem;position:relative}
.also li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:.3125rem;height:.3125rem;border-radius:50%;background:var(--rule);
}
.band .also li::before{background:var(--rule-on-ink)}
.promises{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;gap:1rem;max-width:var(--measure)}
.promises li{padding-left:1.1rem;position:relative}
.promises li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:.3125rem;height:.3125rem;border-radius:50%;background:var(--rule-on-ink);
}

.kicker{margin-bottom:1.5rem;color:var(--muted-on-cream)}
.band .kicker{color:var(--muted-on-ink)}
.after{margin-top:1.75rem;color:var(--muted-on-cream)}
.band .after{color:var(--muted-on-ink)}

/* ---- closing panel ---- */
.closing{background:var(--ink);color:var(--muted-on-ink);text-align:center;
  padding-block:clamp(4rem,12vw,7rem)}
.closing .label{justify-content:center;color:var(--muted-on-ink)}
.closing h2{color:var(--cream);margin-inline:auto;font-size:clamp(2rem,6vw,3.5rem);max-width:16ch}
.closing p{margin-inline:auto;max-width:30rem;margin-top:1.25rem}

/* ---- footer ---- */
footer{background:var(--ink);color:var(--muted-on-ink);
  border-top:1px solid var(--rule-on-ink);padding-block:2.5rem}
.foot{display:grid;gap:.5rem;font-size:.9375rem}
@media(min-width:44rem){
  .foot{grid-template-columns:1fr auto;align-items:end;gap:1rem}
  .foot .right{text-align:right}
}
.foot .name{font-family:var(--serif);font-size:1.125rem;color:var(--cream)}
footer a{color:var(--cream);text-decoration:underline;text-underline-offset:.2em;
  text-decoration-thickness:1px;text-decoration-color:var(--rule-on-ink)}
footer a:hover,footer a:focus-visible{text-decoration-color:var(--cream)}
.fineprint{margin-top:1.75rem;font-size:.8125rem;color:var(--muted-on-ink)}

/* ---- inner pages ---- */
.page{padding-block:clamp(3rem,10vw,6rem) clamp(4rem,12vw,7rem)}
.page h1{font-size:clamp(2.25rem,7vw,3.75rem);margin-bottom:2rem;max-width:16ch}
.page .body{max-width:var(--measure)}
.page .body p{margin-bottom:1.35em}
.back{display:inline-block;margin-top:2.25rem;color:var(--ink);
  text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;
  text-decoration-color:var(--rule)}
.back:hover,.back:focus-visible{text-decoration-color:var(--ink)}

/* ---- motion: slow fades only ---- */
@keyframes rise{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}
.fade{animation:rise 1.1s cubic-bezier(.22,.61,.36,1) both}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}
@media(prefers-reduced-motion:reduce){
  .fade{animation:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

:focus-visible{outline:2px solid var(--pip);outline-offset:3px;border-radius:.25rem}
.band :focus-visible,.closing :focus-visible,footer :focus-visible{outline-color:var(--cream)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:.75rem;z-index:10;background:var(--ink);
  color:var(--cream);padding:.6rem 1rem;border-radius:.5rem;position:fixed}