/* Site chrome shared by the homepage and the about page: the real footer
   from @snacknotes/ui (dark ground, four-colour stripe, brand block plus
   link columns) and the about band. */

.sitefoot{background:var(--text);color:var(--warm-white);width:100%;overflow:hidden}
.sitefoot__stripe{height:6px;background:linear-gradient(90deg,
  var(--coral) 0%, var(--coral) 25%,
  var(--yellow) 25%, var(--yellow) 50%,
  var(--green) 50%, var(--green) 75%,
  var(--blue) 75%, var(--blue) 100%)}
.sitefoot__inner{max-width:var(--site-max);margin:0 auto;
  padding:clamp(2.2rem,5vw,4rem) var(--gutter) 1.6rem;
  display:flex;flex-wrap:wrap;gap:clamp(1.6rem,4vw,2.5rem)}
.sitefoot__brand{flex:2 1 280px;min-width:220px;max-width:360px}
.sitefoot__logo{font-family:var(--font-display);font-weight:800;font-size:1.25rem;
  color:var(--warm-white);margin-bottom:.5rem;display:flex;align-items:baseline}
.sitefoot__logo .brand-dot{background:var(--coral)}
.sitefoot__blurb{font-size:.86rem;color:rgba(255,249,240,.55);line-height:1.6;max-width:300px}
.sitefoot__cta{margin-top:1.1rem}
.sitefoot__community{margin-top:1.6rem}
.sitefoot__community h4{font-family:var(--font-display);font-weight:700;font-size:.95rem;
  color:var(--warm-white);margin:0 0 .7rem}
.sitefoot__social{display:flex;gap:.6rem}
.sitefoot__social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,249,240,.10);color:rgba(255,249,240,.75);
  transition:background .18s ease, color .18s ease, transform .18s ease}
.sitefoot__social a:hover{background:var(--yellow);color:var(--text);transform:translateY(-2px)}
.sitefoot__social svg{width:20px;height:20px;display:block}

.sitefoot__col{flex:1 1 140px;min-width:130px}
.sitefoot__col h4{font-family:var(--font-display);font-weight:700;font-size:.95rem;
  margin-bottom:.8rem;color:var(--warm-white)}
.sitefoot__col ul{list-style:none;margin:0;padding:0}
.sitefoot__col li{margin-bottom:.5rem}
.sitefoot__col a{font-size:.86rem;color:rgba(255,249,240,.55);text-decoration:none;
  transition:color .2s ease}
.sitefoot__col a:hover{color:var(--yellow)}
.sitefoot__bar{max-width:var(--site-max);margin:0 auto;padding:1.2rem var(--gutter) 2rem;
  border-top:1px solid rgba(255,249,240,.14);display:flex;flex-wrap:wrap;gap:1rem;
  justify-content:space-between;align-items:center}
.sitefoot__bar p{font-family:var(--font-display);font-size:.95rem;color:var(--warm-white)}
.sitefoot__meta{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem}
.sitefoot__bar small{color:rgba(255,249,240,.45);font-size:.8rem}
.sitefoot__love{color:rgba(255,249,240,.68) !important}
.sitefoot__love i{color:var(--coral);font-style:normal}
@media (max-width:560px){
  .sitefoot__meta{align-items:flex-start}
}

/* ---- the note from Brian, on the homepage ----
   A large card that reads as a letter: photograph on one side, a short
   note and a signature on the other. Drop a real photo at
   assets/photos/brian-kids.jpg and it replaces the placeholder frame. */
.letterband{padding:clamp(3rem,6.5vw,4.6rem) 0;background:#F7F9FC}
.letter{background:#fff;border:1px solid rgba(45,42,38,.11);border-radius:var(--r-xl);
  overflow:hidden;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  box-shadow:0 3px 10px rgba(45,42,38,.08), 0 20px 44px rgba(45,42,38,.10);
  max-width:1040px;margin:0 auto}
.letter__photo{position:relative;min-height:clamp(320px,38vw,440px);background:#ECEEF1}
.letter__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.letter__photo img + .letter__slot{display:none}
.letter__slot{position:absolute;inset:14px;border:2px dashed rgba(45,42,38,.28);
  border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;text-align:center;padding:1.2rem}
.letter__slot span{font-size:2.2rem;line-height:1}
.letter__slot p{font-family:var(--font-display);font-size:.95rem;color:var(--text-muted);max-width:22ch}
.letter__slot small{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(45,42,38,.45)}
.letter__body{padding:clamp(1.6rem,3.6vw,3rem);display:flex;flex-direction:column;
  justify-content:center}
.letter__body .eyebrow{color:var(--coral-ink);margin-bottom:.9rem}
.letter__body h2{font-size:clamp(1.5rem,3vw,2.1rem);max-width:20ch}
.letter__body p{margin-top:1rem;font-size:1.05rem;line-height:1.7;color:var(--text-muted);
  max-width:46ch}
.letter__sign{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem}
.letter__sign b{font-family:var(--font-display);font-size:1.5rem;font-weight:800;
  transform:rotate(-3deg);display:inline-block}
.letter__sign small{font-family:var(--font-body);font-size:.85rem;color:var(--text-faint)}
.letter__link{font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:var(--coral-ink);text-decoration:none;margin-top:1.4rem;align-self:flex-start}
.letter__link:hover{text-decoration:underline}

@media (max-width:760px){
  .letter{grid-template-columns:1fr}
  .letter__photo{min-height:280px}
}

/* ---- the made-by banner (kept, in case a one-liner is wanted elsewhere) ---- */
.madeby{padding:clamp(1.6rem,3.5vw,2.4rem) 0;border-block:1px solid var(--line)}
.madeby__inner{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);flex-wrap:wrap}
.madeby__line{font-family:var(--font-display);font-size:clamp(1rem,1.9vw,1.22rem);
  line-height:1.5;flex:1 1 340px;min-width:0;margin:0}
.madeby__link{font-family:var(--font-display);font-weight:700;font-size:.98rem;
  color:var(--coral-ink);text-decoration:none;white-space:nowrap}
.madeby__link:hover{text-decoration:underline}
.postit.postit--sm{width:104px;padding:.55rem .6rem;transform:rotate(-4deg);
  box-shadow:3px 4px 0 rgba(45,42,38,.16)}
.postit.postit--sm .postit__doodle{font-size:1.5rem}
.postit.postit--sm p{font-size:.66rem;line-height:1.3}

@media (max-width:640px){
  .madeby__inner{flex-direction:column;text-align:center}
  .madeby__line{flex:none}
}

/* ---- about band on the homepage ---- */
.aboutband{padding:clamp(3rem,6.5vw,4.6rem) 0}
.aboutband__grid{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.8rem,5vw,3.4rem);align-items:center}
.aboutband h2{font-size:clamp(1.7rem,3.6vw,2.4rem);max-width:18ch}
.aboutband p{color:var(--text-muted);margin-top:.9rem;max-width:46ch;font-size:1.04rem}
.aboutband .btn{margin-top:1.5rem}

/* the post-it the whole company came off */
.postit{width:clamp(190px,24vw,250px);aspect-ratio:1;background:var(--yellow);
  padding:1.1rem;transform:rotate(-3deg);display:flex;flex-direction:column;
  justify-content:space-between;
  box-shadow:5px 7px 0 rgba(45,42,38,.16);
  background-image:linear-gradient(160deg, rgba(255,255,255,.35), rgba(0,0,0,.05))}
.postit__doodle{font-size:2.6rem;line-height:1}
.postit p{font-family:var(--font-display);font-size:.98rem;color:var(--text);margin:0;
  line-height:1.35}
.postit small{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:#6b5a20}

@media (max-width:760px){
  .aboutband__grid{grid-template-columns:1fr}
}


/* ---- header, narrow tier ----------------------------------------
   The pills used to wrap onto a second row, which doubled the height of
   a sticky header and sat on top of the mat. Below 860px the header is
   one row: wordmark, beta button, menu. Everything else moves into a
   drawer. Selectors are doubled up so they beat each page's own header
   rules, which live in an inline <style>. */

.hdr__menu{display:none;appearance:none;background:transparent;
  border:1.5px solid var(--line);border-radius:9px;padding:9px 8px;cursor:pointer;
  flex-shrink:0;line-height:0}
.hdr__menu span{display:block;width:20px;height:2px;background:var(--text);
  border-radius:2px;transition:transform .2s ease, opacity .15s ease}
.hdr__menu span + span{margin-top:5px}
.hdr--open .hdr__menu span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr--open .hdr__menu span:nth-child(2){opacity:0}
.hdr--open .hdr__menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.hdr__drawer{position:absolute;top:100%;left:0;right:0;display:none;
  flex-direction:column;align-items:flex-start;gap:.85rem;
  background:#fff;border-bottom:3px solid var(--yellow);
  padding:1.1rem var(--gutter) 1.3rem;
  box-shadow:0 14px 26px rgba(0,0,0,.14);
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:transform .2s ease, opacity .18s ease}
.hdr--open .hdr__drawer{transform:none;opacity:1;pointer-events:auto}
.hdr__drawer a.plain{font-size:.95rem;color:var(--text-muted);text-decoration:none;
  padding-top:.2rem;border-top:1px dashed var(--line);width:100%}

@media (max-width:860px){
  .hdr .hdr__inner{flex-wrap:nowrap;gap:.7rem}
  .hdr .hdr__nav{display:none}
  .hdr .hdr__actions{margin-left:auto;gap:.6rem}
  .hdr .hdr__actions a.plain{display:none}
  .hdr .hdr__menu{display:block}
  .hdr .hdr__drawer{display:flex}
  .hdr .wordmark{font-size:1.1rem}
}