body{margin:0;background:#fcf9f3}
a{color:#1f1a16}a:hover{color:#a8370a}
.g4.footg{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
@container (max-width:760px){.g4.footg{grid-template-columns:repeat(2,minmax(0,1fr))} .footg>div:first-child{grid-column:1/-1}}
/* hero: header plus hero fill about 75% of a 1440x900 screen. Copy and one button left; the site's only semicircle arch right */
.hero-band{background:var(--paper)}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center;padding-top:40px;padding-bottom:56px}
.hero-txt{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero h1{font-size:clamp(56px,5.3vw,76px);line-height:1.02;max-width:none;text-wrap:balance}
.hero .lead{max-width:36ch}
.hero-arch{height:clamp(420px,60vh,560px);width:100%;max-width:460px;justify-self:end}
.hero-arch>img{object-position:50% 60%}
/* phone banner slot (ENG-107, website/assets/islands/home-banners.js): fills the hero arch box, so nothing moves */
.hb,.hb-track{position:absolute;inset:0}
.hb-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.hb-track::-webkit-scrollbar{display:none}
.hb-slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always;position:relative}
.hb-slide a{display:block;position:absolute;inset:0}
.hb-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hb-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;pointer-events:none}
.hb-dots button{pointer-events:auto;width:24px;height:24px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.hb-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.4);transition:transform .2s}
.hb-dots button[aria-current=true]::before{background:#fff;transform:scale(1.35)}
.hb-dots button:focus-visible{outline:2px solid var(--ink,#000);outline-offset:-2px;border-radius:50%}
@media (prefers-reduced-motion:reduce){.hb-dots button::before{transition:none}}
/* shared */
.hsec{padding-block:80px}
.pg .hh{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.hrow{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.pg .hrow .hh{margin-bottom:0}
.hrow{margin-bottom:32px}
/* topics: the question, then the report it opens */
.topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.topic{display:flex;align-items:center;gap:16px;padding:12px 16px 12px 12px;border-radius:20px;background:var(--white);border:1px solid #e2d6c2;text-decoration:none;color:#1f1a16;transition:border-color .15s ease,transform .15s ease}
.topic img{width:96px;height:96px;border-radius:14px;flex:none;display:block;background:#f6f0e5}
.topic-t{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.topic-t .eyebrow{color:#6b6258}
.topic b{font:500 19px/1.25 "Fraunces",Georgia,serif}
.topic-to{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:14px;font-weight:600;color:#a8370a}
.topic-to svg{width:16px;height:16px;flex:none}
.topic:hover{border-color:#c2410c;transform:translateY(-2px)}
/* six readings */
.rds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rd{display:flex;flex-direction:column;gap:8px;padding:14px 14px 18px;border-radius:20px;background:var(--white);box-shadow:0 18px 30px -26px rgba(31,26,22,.35);border:1px solid #e2d6c2;text-decoration:none;color:#1f1a16}
.rd-im{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#fbe3d3;margin-bottom:6px}
.rd-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rd b{font:500 23px/1.2 "Fraunces",Georgia,serif;padding:0 4px}
.rd-l{font-size:15px;line-height:1.45;color:#4a423a;padding:0 4px}
.rd-go{margin-top:auto;padding:6px 4px 0;display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:#1f1a16}
.rd:hover b,.rd:hover .rd-go{color:#a8370a}
/* report previews: one cover size for all (5:7, at most a sliver trimmed), titles and lines aligned across the row */
.pvs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.pv{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:6px;align-content:start;text-decoration:none;color:#1f1a16}
.pv-im{display:block;aspect-ratio:5/7;margin-bottom:10px}
.pv-im img{width:100%;height:100%;object-fit:cover;display:block;filter:drop-shadow(0 14px 18px rgba(31,26,22,.18))}
.pv b{font:500 18px/1.25 "Fraunces",Georgia,serif}
.pv-l{font-size:14px;line-height:1.45;color:#4a423a}
.pv-n{margin-top:2px;font:500 11.5px/1.3 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#a8370a}
.pv:hover b{color:#a8370a}
/* app */
.app-sec{padding-bottom:80px}
.app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:22px;overflow:hidden;background:var(--sheet);border:1px solid #e2d6c2}
.app-im{position:relative;min-height:260px;background:#fff}
.app-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.app-txt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:32px 36px}
.stores{display:flex;flex-wrap:wrap;gap:10px}
.store{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:12px;background:var(--white);border:1px solid #e2d6c2;font-size:15px;font-weight:600;line-height:1.15;color:#1f1a16}
.store img{width:24px;height:24px;flex:none;display:block}
.store>span{display:flex;flex-direction:column}
.store small{font:500 10.5px/1.3 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#6b6258}
/* closing */
.close-band{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.close-band h2{max-width:18ch}
.close-band .lead{max-width:36ch}
.close-band .btn{margin-top:6px}
@container (max-width:1100px){
  .pvs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .topic b{font-size:18px}
}
@container (max-width:760px){
  /* phone: heading, line and button on the first screen; a small arch follows */
  .hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:20px;padding-bottom:44px}
  .hero-txt{gap:16px;display:contents}
  .hero{gap:16px}
  .hero-arch{order:1}
  .hero .btn{order:2}
  .hero h1{font-size:44px;max-width:none}
  .hero .btn{width:100%}
  .hero-arch{height:320px;max-width:320px;justify-self:center}
  .hsec{padding-block:52px}
  .pg .hh{margin-bottom:24px}
  .hrow{margin-bottom:24px}
  .topics{grid-template-columns:minmax(0,1fr);gap:10px}
  .topic{padding:10px 14px 10px 10px;border-radius:16px;gap:14px}
  .topic img{width:88px;height:88px;border-radius:12px}
  .topic b{font-size:17px}
  .topic-to{font-size:13.5px}
  .rds{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .rd{padding:10px 10px 14px;border-radius:16px;gap:6px}
  .rd-im{border-radius:10px}
  .rd b{font-size:19px;padding:0 2px}
  .rd-l{font-size:13.5px;padding:0 2px}
  .rd-go{font-size:13.5px;padding:4px 2px 0}
  /* report previews: a swipe row on phone */
  .pvs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;gap:16px;margin-inline:-16px;padding:0 16px 8px;scrollbar-width:none}
  .pvs::-webkit-scrollbar{display:none}
  .pv{display:flex;flex-direction:column;flex:0 0 44%;scroll-snap-align:start}
  .pv b{font-size:16.5px;min-height:2.5em}
  .stores{gap:8px}
  .store{padding:7px 12px 7px 10px;gap:8px;font-size:14px}
  .store small{font-size:9.5px}
  .pv-l{font-size:13.5px}
  .app-sec{padding-bottom:52px}
  .app{grid-template-columns:minmax(0,1fr)}
  .app-im{min-height:0;aspect-ratio:16/9}
  .app-txt{padding:22px 20px}
}