/* Homepage only. Palette comes from the logo: indigo + its orange "o". Images: the existing ones only. */

.home{--ink:#0B2A47;--indigo:#14436B;--orange:#F09000;--pale:#E8F0F8;--paper:#fff;
  --sans:Archivo,"Helvetica Neue",Arial,sans-serif;--serif:Newsreader,Georgia,"Times New Roman",serif;
  background:var(--paper);color:var(--ink);font-family:var(--serif)}
.home .h-wrap{max-width:1180px;margin:0 auto;padding:0 50px}
@media (max-width:1024px){.home .h-wrap{padding:0 20px}}

/* hero */
.h-hero{position:relative;overflow:hidden;padding:clamp(120px,16vh,168px) 0 clamp(96px,13vw,170px);background:#fff}
.h-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(16px,3vw,56px)}
.h-title{margin:0;font:800 clamp(46px,6.1vw,92px)/.95 var(--sans);font-stretch:116%;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.h-lead{max-width:30em;margin:clamp(22px,3vw,34px) 0 0;font:400 clamp(19px,1.7vw,23px)/1.5 var(--serif);color:#27425c}
.h-lead strong{font-weight:700;color:var(--ink)}
.h-actions{margin-top:clamp(28px,3.4vw,42px)}
.h-cta{display:inline-flex;align-items:center;gap:.7em;padding:19px 32px;background:var(--indigo);color:#fff;font:700 19px/1 var(--sans);font-stretch:104%;border-radius:8px;box-shadow:0 2px 0 var(--ink),0 10px 26px rgba(20,67,107,.28);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.h-cta .fa{font-size:.95em;transition:transform .25s ease}
.h-cta:hover,.h-cta:focus-visible{background:var(--ink);color:#fff;transform:translateY(-2px);box-shadow:0 4px 0 var(--orange),0 16px 32px rgba(11,42,71,.3)}
.h-cta:hover .fa,.h-cta:focus-visible .fa{transform:translateY(3px)}
.h-cta:active{transform:translateY(0);box-shadow:0 1px 0 var(--orange),0 4px 12px rgba(11,42,71,.3)}
.h-cta:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.h-note{margin:.7rem 0 0;font:400 16px/1.4 var(--serif);color:#4d6680}
.h-shops{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:clamp(26px,3vw,36px)}
.h-shops p{flex:0 0 100%;margin:0 0 2px;font:400 17px/1.3 var(--serif);color:#27425c}
.h-cover-wrap{position:relative;justify-self:end;width:min(100%,520px);aspect-ratio:5/6}
.h-hero-copy{position:relative;z-index:2}
.h-cover-wrap{pointer-events:none}
.h-cover{pointer-events:none;position:absolute;left:50%;top:50%;width:250%;max-width:none;height:auto;transform:translate(-73%,-50%);-webkit-mask-image:radial-gradient(ellipse 21% 33% at 73% 52%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 21% 33% at 73% 52%,#000 58%,transparent 100%)}

/* counter band: the slash echoes the crack across the cover */
.h-counter{--cut:clamp(30px,5.5vw,84px);position:relative;margin-top:calc(var(--cut) * -1);padding:calc(var(--cut) + clamp(44px,6vw,84px)) 0 clamp(52px,7vw,92px);background:var(--ink);color:#fff;clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}
.h-counter::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--cut);background:linear-gradient(to bottom right,transparent calc(50% - 2.5px),var(--orange) calc(50% - 2.5px),var(--orange) calc(50% + 2.5px),transparent calc(50% + 2.5px))}
.h-count{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,34px) clamp(18px,3vw,44px)}
.h-count-pre,.h-count-post{margin:0;font:400 clamp(20px,2.3vw,30px)/1.2 var(--serif);color:rgba(255,255,255,.82)}
.h-digits{display:flex;align-items:center;gap:clamp(5px,.8vw,10px);font-size:clamp(58px,9.6vw,128px)}
.h-digits .d{position:relative;display:grid;place-items:center;width:.66em;height:1.08em;border-radius:.09em;background:linear-gradient(#1d5a8c 0,#14436B 49.6%,#0f3556 50.4%,#12406a 100%);font:800 1em/1 var(--sans);font-stretch:100%;font-variant-numeric:tabular-nums;color:#fff;box-shadow:inset 0 .02em 0 rgba(255,255,255,.18),0 .05em .12em rgba(0,0,0,.35)}
.h-digits .d::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(5,22,40,.55)}
.h-digits .sp{width:.18em}

/* intro */
.h-intro{padding:clamp(76px,9vw,132px) 0}
.h-intro-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.h-photo{position:relative;margin:0 0 0 14px}
.h-photo::before{content:"";position:absolute;inset:16px -16px -16px 16px;background:var(--pale);border-radius:4px}
.h-photo img{position:relative;display:block;width:100%;height:auto;border-radius:4px}
.h-photo figcaption{position:relative;margin:38px 0 0 -14px;font:400 16px/1.4 var(--serif);color:#4d6680}
.h-ask{max-width:20em;margin:0;font:500 clamp(30px,3.6vw,50px)/1.14 var(--serif);letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.h-body{max-width:34em;margin:clamp(22px,2.6vw,32px) 0 0;font:400 clamp(20px,1.7vw,23px)/1.6 var(--serif);color:#27425c}
.h-credit{max-width:36em;margin:clamp(26px,3vw,40px) 0 0;padding-top:clamp(22px,2.4vw,30px);border-top:2px solid var(--ink);font:400 18px/1.6 var(--serif);color:#27425c}
.h-intro .h-cta{margin-top:clamp(28px,3vw,40px)}

/* reader quote */
.h-quote{padding:clamp(76px,9vw,130px) 0;background:var(--indigo);color:#fff}
.h-quote figure{max-width:900px;margin:0 auto;position:relative}
.h-quote blockquote{margin:0;padding:0;border:0;font:500 clamp(27px,3.5vw,46px)/1.28 var(--serif);letter-spacing:-.008em;color:#fff;text-indent:-.5em;text-wrap:pretty}
.h-quote blockquote::before{content:none}
.h-quote figcaption{margin-top:clamp(22px,2.6vw,34px);font:400 19px/1.4 var(--serif);color:rgba(255,255,255,.74)}
.h-quote figcaption::before{content:"";display:inline-block;width:46px;height:3px;margin:0 14px .28em 0;background:var(--orange)}

@media (max-width:900px){
  .h-hero-grid{grid-template-columns:1fr;gap:6px}
  .h-cover-wrap{order:-1;justify-self:center;width:min(78%,360px);margin:0 0 4px}
  .h-intro-grid{grid-template-columns:1fr}
  .h-photo{width:min(260px,70%);margin:0 0 20px 14px}
}
@media (max-width:767px){
  .home .h-wrap{padding:0 20px}
  .h-hero{padding:96px 0 80px}
  .h-title{font-size:clamp(40px,12vw,56px)}
  .h-cta{display:flex;justify-content:center;width:100%;padding:19px 20px}
  .h-shops{gap:10px}
  .h-shops .shop{flex:1}
  .h-count{flex-direction:column;gap:10px}
  .h-digits{font-size:clamp(50px,17vw,84px)}
  .h-ask{font-size:30px}
  .h-quote blockquote{text-indent:0}
}
@media (prefers-reduced-motion:reduce){.h-cta,.h-cta .fa{transition:none}}