/* Hero built 1:1 from the client comp (1672x941). Every position is a percentage of
   that artboard and every size is in cqw, so the composition scales as one piece.
   Values were measured off the comp and fitted by rendering and comparing ink
   bounding boxes against it. See hero-exact/README.txt. */
@font-face{font-family:HxFraunces;src:url('../assets/fonts/fraunces-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:R3Fraunces;src:url('../assets/fonts/fraunces-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:R3Fraunces;src:url('../assets/fonts/fraunces-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:R3Fraunces;src:url('../assets/fonts/fraunces-400italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"NcBody";src:url('../assets/fonts/newsreader-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NcDisplay";src:url('../assets/fonts/fraunces-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:HxNewsreader;src:url('../assets/fonts/newsreader-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Frutiger";src:url('../assets/fonts/neue-frutiger-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ITC Galliard";src:url('../assets/fonts/itc-galliard-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:HxFrutiger;src:url('../assets/fonts/neue-frutiger-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --hx-paper:#f2ebe1; --hx-card:#f8f5ee; --hx-pine:#142d23; --hx-ink:#12291f;
  --hx-ochre:#af673c; --hx-ochre-deep:#8f5330; --hx-white:#fff;
  --hx-serif:HxNewsreader,Georgia,serif; --hx-display:HxFraunces,Georgia,serif;
  --hx-sans:HxFrutiger,"Helvetica Neue",Arial,sans-serif;
}
/* Scoped so the hero can be embedded in the letter page: every selector below is
   prefixed with .hx at generation time, which outranks the page's own `.r3-page main h1`
   and `p{max-width}` rules. */
.hx{font-family:var(--hx-sans);color:var(--hx-pine);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.hx *,.hx *::before,.hx *::after{box-sizing:border-box}
.hx a{color:inherit;text-decoration:none}
.hx p{max-width:none}

.hx{background:var(--hx-paper);overflow:clip}
.hx .hx__canvas{
  position:relative;width:100%;aspect-ratio:1672 / 941;
  container-type:inline-size;margin-inline:auto;
  font-family:var(--hx-sans);color:var(--hx-pine);
}
.hx .hx__canvas>*{position:absolute;margin:0}
.hx .hx__actions{position:static}
.hx .hx__bg{left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}

/* ---- artwork, cut from the comp at its own coordinates ---- */
.hx .hx__photo{left:33.1938%;top:1.2752%;width:66.8062cqw;height:auto;display:block}
.hx .hx__stamp{left:86.7225%;top:64.1870%;width:13.2775cqw;height:auto;display:block}
.hx .hx__sprig{left:0;top:57.3858%;width:14.3541cqw;height:auto;display:block;pointer-events:none}
.hx .hx__logo{left:5.3828%;top:1.4878%;width:11.4833cqw;line-height:0;border-radius:50%}
.hx .hx__logo img{width:100%;height:auto;display:block}

/* ---- header chrome ---- */
.hx .hx__tagline{
  left:18.0622%;top:9.7768%;
  font:0.7416cqw/1.1364cqw var(--hx-sans);letter-spacing:0.1321cqw;
  text-transform:uppercase;color:#3d4b41;white-space:nowrap;
}
.hx .hx__tagline::after{content:"";position:absolute;left:12.9187cqw;top:1.6746cqw;width:3.2297cqw;height:0.0598cqw;background:#bc8463}
.hx .hx__nav{left:52.8110%;top:4.2508%;display:flex;gap:2.1531cqw;white-space:nowrap}
.hx .hx__nav a{
  font:0.7416cqw/1 var(--hx-sans);letter-spacing:0.1427cqw;text-transform:uppercase;
  color:#2c3b37;transition:color .2s;
}
.hx .hx__nav a:hover{color:var(--hx-ochre)}
.hx .hx__nav a:nth-child(1){letter-spacing:0.1427cqw}
.hx .hx__nav a:nth-child(2){letter-spacing:0.1128cqw}
.hx .hx__nav a:nth-child(3){letter-spacing:0.1277cqw}
.hx .hx__nav a:nth-child(4){letter-spacing:0.1228cqw}

.hx .hx__menu{
  left:78.1878%;top:2.0191%;width:7.7153cqw;height:3.1100cqw;
  padding:0;border:0.0598cqw solid rgba(20,45,35,.62);border-radius:59.7488cqw;background:transparent;
  color:var(--hx-pine);cursor:pointer;font:1.0979cqw/1 var(--hx-serif);
  box-shadow:none;transform:none;
}
.hx .hx__menu span{position:absolute;left:1.4175cqw;top:1.0766cqw;line-height:1;white-space:nowrap}
/* the two bars: an SVG with a non-scaling 1.5px round-capped stroke, so they stay one crisp weight at every
   canvas width instead of a sub-pixel box that Chrome snaps to a blurred 2px or a faint 1px */
.hx .hx__menu .hx__bars{position:absolute;left:5.0658cqw;top:1.0766cqw;width:1.2560cqw;height:0.6578cqw;overflow:visible;display:block}
.hx .hx__menu .hx__bars line{stroke:currentColor;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hx .hx__menu:hover{background:rgba(20,45,35,.06);box-shadow:none;transform:none}
.hx .hx__menu:active{box-shadow:none;transform:none}
.hx .hx__book{
  left:86.8780%;top:2.0723%;width:8.9234cqw;height:3.1100cqw;
  border-radius:59.7488cqw;background:var(--hx-ochre);color:var(--hx-white);
  font:1.1770cqw/1 var(--hx-serif);text-align:center;
  display:flex;align-items:center;justify-content:center;
  box-shadow:none;transform:none;transition:background-color .22s;
}
/* Optically center the lettering, accounting for Newsreader's font metrics. */
.hx .hx__book span{position:relative;top:.15em;line-height:1;white-space:nowrap}
/* hover: the pill deepens and lifts a hair on a soft ochre shadow while a light sheen sweeps across it;
   :active presses it back down. The sheen is a ::before under the lettering (isolation keeps z-index local). */
.hx .hx__book{position:absolute;overflow:hidden;isolation:isolate;transition:background-color .28s ease,transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
.hx .hx__book::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 70%);transform:translateX(-110%);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hx .hx__book:hover{background:var(--hx-ochre-deep);transform:translateY(-.0598cqw);box-shadow:0 .55cqw 1.2cqw -.5cqw rgba(143,83,48,.55)}
.hx .hx__book:hover::before{transform:translateX(110%)}
.hx .hx__book:active{transform:translateY(0) scale(.985);box-shadow:0 .18cqw .5cqw -.3cqw rgba(143,83,48,.45);transition-duration:.12s}

/* ---- copy ---- */
.hx .hx__h1,
.c12 main .hx .hx__h1{
  left:4.8445%;top:31.6684%;
  font-family:"NcDisplay",Georgia,serif;font-weight:600;
  font-size:6.7883cqw;line-height:5.7416cqw;letter-spacing:-0.1376cqw;
  color:#16291c;white-space:nowrap;
  overflow:visible;padding-bottom:1.6cqw;
}
.hx .hx__l2{position:relative;left:0.2392cqw;font-family:R3Fraunces,Georgia,serif;font-style:italic;font-weight:400;color:#764620}   /* "together." in R3Fraunces italic (the 400 italic is the only italic cut, as on every other headline accent), brown (client request 2026-09-18) */
.hx .hx__lead{
  left:5.2632%;top:57.15%;
  font-family:"NcBody",Georgia,serif;font-weight:400;font-style:normal;
  font-size:14.74px;line-height:1.443;color:#12291f;white-space:nowrap;
}
.hx .hx__cta{
  position:absolute;display:block;border-radius:59.7488cqw;font:1.2855cqw/1 var(--hx-serif);white-space:nowrap;
  transition:background-color .22s,color .22s,border-color .22s;
}
.hx .hx__cta span{position:absolute;line-height:1}
.hx .hx__cta--fill{
  left:5.2333%;top:70.9617%;width:15.5951cqw;height:3.5885cqw;
  background:var(--hx-ochre);color:var(--hx-white);
  box-shadow:none;transform:none;
}
.hx .hx__cta--fill span{left:2.7213cqw;top:1.4055cqw}
.hx .hx__cta--fill svg{position:absolute;left:11.8720cqw;top:1.5251cqw;width:1.0167cqw;height:0.6579cqw;transition:transform .22s}
.hx .hx__cta{overflow:hidden;isolation:isolate}
.hx .hx__cta--fill{transition:background-color .28s ease,transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
.hx .hx__cta--fill::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 70%);transform:translateX(-110%);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hx .hx__cta--fill:hover{background:var(--hx-ochre-deep);transform:translateY(-.0598cqw);box-shadow:0 .6cqw 1.3cqw -.5cqw rgba(143,83,48,.55)}
.hx .hx__cta--fill:hover::before{transform:translateX(110%)}
.hx .hx__cta--fill:hover svg{transform:translateX(0.24cqw)}
.hx .hx__cta--fill svg{transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.hx .hx__cta--fill:active{transform:translateY(0) scale(.985);box-shadow:0 .18cqw .5cqw -.3cqw rgba(143,83,48,.45);transition-duration:.12s}
.hx .hx__cta--line{
  left:22.1651%;top:70.9617%;width:11.7045cqw;height:3.5885cqw;
  border:0.0598cqw solid rgba(175,103,60,.82);color:var(--hx-pine);font-size:1.2560cqw;
  background:transparent;box-shadow:none;transform:none;
}
.hx .hx__cta--line span{left:2.4761cqw;top:1.2859cqw}
.hx .hx__cta--line{transition:color .28s ease,border-color .28s ease,transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
.hx .hx__cta--line::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--hx-pine);transform:scaleX(0);transform-origin:0 50%;transition:transform .36s cubic-bezier(.2,.7,.2,1)}
.hx .hx__cta--line:hover{border-color:var(--hx-pine);color:var(--hx-white);transform:translateY(-.0598cqw);box-shadow:0 .6cqw 1.3cqw -.5cqw rgba(20,45,35,.45)}
.hx .hx__cta--line:hover::before{transform:scaleX(1)}
.hx .hx__cta--line:active{transform:translateY(0) scale(.985);box-shadow:none;transition-duration:.12s}

.hx .hx__canvas{--hx-d1:0.0598cqw;--hx-d2:0.1196cqw;--hx-d3:0.1794cqw;--hx-d6:0.3589cqw;--hx-d8:0.4785cqw;--hx-d14:0.8373cqw;--hx-d18:1.0766cqw}
.hx .hx__logo img{
  filter:drop-shadow(0 calc(-1 * var(--hx-d1)) 0 rgba(255,255,255,.55))
         drop-shadow(0 var(--hx-d1) var(--hx-d2) rgba(64,38,16,.28))
         drop-shadow(0 var(--hx-d8) var(--hx-d14) rgba(64,38,16,.24));
}

/* The artboard always spans the full width (no paper at the sides) and the section never
   runs past the first screen. Its height is the viewport's, but never less than the
   artboard needs to show the buttons (45vw) and never more than the artboard itself or the
   letter hero's 1040px cap when the artboard is shorter than the screen. The artboard is
   centred when it fits (paper above and below) and top-aligned when it does not, so the
   header and copy never move; the excess is clipped at the bottom. Flex auto margins do
   that switch on their own: they collapse to zero once the item overflows. */
@media (min-width:901px){
  .hx{height:max(min(100svh,max(56.2799vw,1040px)),45vw);display:flex;flex-direction:column}
  .hx .hx__canvas{flex:none;width:100%;margin-block:auto}
  /* the stamp runs off the bottom by design; on a short screen it slides up just enough
     that the clip never cuts through its ring and lettering */
  .hx .hx__stamp{top:min(64.1870%,calc(100svh - 13.935vw))}
}


:focus-visible{outline:3px solid #be7b36;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.hx .hx__cta,.hx .hx__cta svg,.hx .hx__cta::before,.hx .hx__book,.hx .hx__book::before,.hx .hx__menu,.hx .hx__nav a{transition:none}.hx .hx__book:hover,.hx .hx__cta:hover{transform:none}}

/* =====================================================================
   Below 900px the artboard cannot hold (the headline would be under 40px),
   so the same pieces reflow into a single column.
   ===================================================================== */
@media (max-width:900px){
  .hx .hx__canvas{aspect-ratio:auto;display:flex;flex-direction:column;padding:96px 0 0}
  .hx .hx__canvas{--hx-d1:1px;--hx-d2:2px;--hx-d3:3px;--hx-d6:6px;--hx-d8:8px;--hx-d14:14px;--hx-d18:18px}
  .hx .hx__canvas>*{position:static}
  .hx .hx__bg,.hx .hx__tagline,.hx .hx__nav,.hx .hx__stamp{display:none}
  .hx .hx__logo{order:1;display:block;width:104px;margin:0 24px 26px}
  .hx .hx__h1{order:3;margin:0 24px;font-size:clamp(2.6rem,11vw,3.6rem);line-height:1;letter-spacing:-.02em;white-space:normal}
  .hx .hx__lead{order:4;margin:18px 24px 0;font-size:14.74px;line-height:1.55;white-space:normal}
  .hx .hx__lead br{display:none}
  .hx .hx__actions{order:5;display:flex;flex-wrap:wrap;gap:12px;margin:26px 24px 0}
  .hx .hx__cta,.hx .hx__cta--fill,.hx .hx__cta--line{position:static;display:inline-flex;align-items:center;gap:12px;width:auto;height:50px;padding:0 24px;font-size:.95rem}
  .hx .hx__cta span{position:static}
  .hx .hx__cta--fill svg{position:static;width:17px;height:11px}
  .hx .hx__photo{order:6;position:static;width:calc(100% - 24px);margin:30px 0 0 24px}
  .hx .hx__sprig{order:8;position:static;width:140px;margin:10px 0 0 -30px}
  .hx .hx__menu,.hx .hx__book{position:absolute;top:26px;width:auto;height:44px;font-size:.95rem}
  .hx .hx__menu{left:24px;padding:0 44px 0 18px}
  .hx .hx__menu span{position:static}
  .hx .hx__menu .hx__bars{left:auto;right:16px;top:17px;width:18px;height:9px}
  .hx .hx__book{right:24px;left:auto;padding:0 18px;display:flex;align-items:center;justify-content:center}
  .hx .hx__book span{top:.12em}
}