/* adamgtm.com/hair: the subscribe page. Tokens come from shared/style.css (inlined above this
   file); this file only lays out the hero, its arrival, the break and the confirmation. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.hr{overflow-x:hidden}
body.hr.in-deep{overflow:hidden;background:var(--ink)}
.crust{position:relative}
.hr-wrap{max-width:760px;margin:0 auto;padding:88px 24px 80px}

/* ---- the hero, alone and centered: the icon, the name, Adam's hello, the card ---- */
.hr-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0;border:0}
.hr-h1{font:400 84px/.95 "Instrument Serif",Georgia,serif;-webkit-text-stroke:.6px var(--ink);letter-spacing:-.012em;margin:0;padding:0 .06em .1em}
.hr-h1 span{display:inline-block}
.hr-mark.brand-mark{width:58px;height:58px;padding:5px;margin:0 0 18px}   /* the site's icon box, larger */
.hr-mark.brand-mark img{width:46px;height:46px}
.hr-intro{font-size:19px;line-height:1.55;color:var(--soft);margin:22px 0 0;max-width:31em}
.hr-intro b{font-weight:600;color:var(--ink)}
.hr-form{position:relative;z-index:6;display:flex;gap:6px;background:#fff;border:1px solid var(--ink);padding:6px;width:100%;max-width:520px;text-align:left}
.hr-form input[type=email]{flex:1;min-width:0;border:0;background:transparent;padding:12px 12px;
  font:400 16px var(--mono);color:var(--ink);outline:none}
.hr-form input::placeholder{color:var(--faint)}
.hr-form:focus-within{box-shadow:0 0 0 3px var(--gold-soft)}
.hr-btn{border:0;background:var(--ink);color:var(--gold);font:600 15px var(--mono);padding:0 22px;
  cursor:pointer;letter-spacing:.01em;min-height:46px}
.hr-btn:hover{color:#fff}
.hr-btn:disabled{cursor:progress;color:var(--gold)}
.hr-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hr-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hr-form.nope{animation:hr-nope .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes hr-nope{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* the seismograph under the form: quiet until you type */
.hr-seis{position:relative;width:100%;max-width:520px;height:30px;margin:8px 0 0}
.hr-seis canvas{display:block;width:100%;height:100%}
.hr-mag{position:absolute;right:0;top:-2px;font:600 11px var(--mono);letter-spacing:.06em;color:var(--gold-ink);
  opacity:0;transition:opacity .3s}
.hr-mag.on{opacity:1}
.hr-msg{font:500 13px/1.5 var(--mono);color:var(--soft);margin:2px 0 0;min-height:0}
.hr-msg.err{color:var(--red-ink);margin-top:6px}
.hr-proof{font:400 12px var(--mono);letter-spacing:.04em;color:var(--faint);margin:10px 0 0;display:inline-flex;align-items:center;gap:9px}
.hr-proof::before,.hr-proof::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft);flex:none}
.hr-nopitch{font:400 12.5px/1.6 var(--mono);color:var(--soft);margin:26px 0 0;max-width:46ch}

/* ---- the card: its report side shows during the arrival, then it turns over to the form. Both
   sides share one grid cell, so the card is one size on either side and never jumps ---- */
.card{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:580px;margin:30px 0 0;text-align:left}   /* minmax: a phone narrows it below the form's natural width */
.card > div{grid-area:1/1;background:#fff;border:1px solid var(--ink);box-shadow:6px 6px 0 #e3ddd0}
.card-back{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 30px 24px;text-align:center}
.card-h{font:400 32px/1.1 "Instrument Serif",Georgia,serif;letter-spacing:-.005em;color:var(--ink);margin:0 0 18px}
.card-front{visibility:hidden;padding:16px 20px 20px}
.rp-top{display:flex;justify-content:space-between;gap:12px;margin:0 0 16px;padding:0 0 8px;border-bottom:3px double var(--ink);
  font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.rp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 20px}
.rp-tile{margin:0}
.rp-tile svg{display:block;width:100%;height:auto;overflow:visible}
.rp-tile figcaption{margin-top:7px;font:500 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.rp-paper{fill:#fff;stroke:var(--ink);stroke-width:1}
.rp-ink,.rp-dot{fill:var(--ink)}
.rp-soft{fill:#ddd6c8}
.rp-goldfill,.rp-dot.rp-goldfill{fill:var(--gold)}
.rp-rule{stroke:#ddd6c8;stroke-width:1}
.rp-box{fill:none;stroke:#b9b1a2;stroke-width:1}
.rp-frame{fill:none;stroke:var(--ink);stroke-width:1}
.rp-line{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.rp-gold{stroke:var(--gold);stroke-width:2.2}
.rp-grey{stroke:#a39b8c}

/* the arrival: html.hr-arrive hides the parts until hair.js brings them in. One line draws across the
   page, trembles once, the name rises out of it, and the line becomes the seismograph under the form */
.hr-arrive .hr-h1{overflow:hidden}
.hr-arrive .hr-h1 span{transform:translateY(105%)}
.hr-arrive .hr-mark,.hr-arrive .hr-intro,.hr-arrive .card-back,.hr-arrive .hr-nopitch,
.hr-arrive .aud,.hr-arrive .foot{opacity:0;pointer-events:none}
.hr-arrive .card-front{visibility:visible;clip-path:inset(0 0 100% 0)}
/* the report prints: each sketch in turn, its lines drawn, its bars grown, its dots dropped */
.hr-arrive .rp-tile{opacity:0}
.rp-print .rp-tile{animation:rp-show .3s ease-out both;animation-delay:calc(var(--i) * 100ms)}
.rp-print .rp-pg,.rp-print .rp-row,.rp-print .rp-cell{animation:rp-up .4s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:calc(var(--i) * 100ms + var(--d,0) * 70ms)}
.rp-print .rp-line{stroke-dasharray:1;animation:rp-draw .7s cubic-bezier(.5,0,.3,1) both;
  animation-delay:calc(var(--i) * 100ms + 120ms + var(--d,0) * 80ms)}
.rp-print .rp-bar{transform-box:fill-box;transform-origin:0 50%;animation:rp-grow .5s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:calc(var(--i) * 100ms + 80ms + var(--d,0) * 50ms)}
.rp-print .rp-dot{animation:rp-in .18s ease-out both;animation-delay:calc(var(--i) * 100ms + 60ms + var(--d,0) * 14ms)}
@keyframes rp-show{from{opacity:0}to{opacity:1}}   /* to 1: the tile's own rule holds it at 0 */
@keyframes rp-in{from{opacity:0}}
@keyframes rp-up{from{opacity:0;transform:translateY(5px)}}
@keyframes rp-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rp-grow{from{transform:scaleX(0)}}
.arrive-line{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:30;pointer-events:none}
.hr-arrive .arrive-line{display:block}

/* shared by the tracker door's chart and the hype's Skip button */
.sp{display:block;width:100%;height:36px;overflow:visible}
.sp polyline{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cap-in{from{opacity:0;transform:translateY(10px)}}

/* ---- audience wall: the homepage's, centered under the form ---- */
.aud{margin:44px auto 0;max-width:640px;text-align:center}
.aud-head{font:400 11.5px var(--mono);letter-spacing:.03em;color:var(--faint);margin:0 0 14px}
.aud-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 22px;max-height:58px;overflow:hidden}   /* two rows */
.aud-logo{display:inline-flex;align-items:center;height:15px}
.aud-logo--tall{height:23px}
.aud-logo img{height:100%;width:auto;filter:brightness(0);opacity:.5}

/* ---- the cracks ---- */
.cracks{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:hidden}
.cracks path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cracks .ck-hi{stroke:#fff;stroke-width:1.4;opacity:.9}
.cracks .ck{stroke:var(--ink);stroke-width:1.7}
.cracks .ck-br{stroke-width:1.1}
.cracks .ck-au{stroke:var(--gold);stroke-width:.8;opacity:var(--glow,0);transition:opacity .4s}
.cracks.calm .ck{stroke:rgba(20,19,15,.42);stroke-width:1.1}
.cracks.calm .ck-hi{opacity:.45}
.cracks.calm .ck-au{opacity:0}

/* ---- the break ---- */
.shard{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:60;overflow:hidden}
.shard > .crust{position:absolute;margin:0;background:var(--paper)}
.shard *{animation:none!important;transition:none!important}
.deep{position:fixed;inset:0;z-index:40;overflow:hidden;color:#f4f0e8;
  background:radial-gradient(120% 90% at 50% 46%,#24211b 0%,#151410 55%,#0d0c0a 100%)}
.deep::before{content:"";position:absolute;inset:0;opacity:.25;
  background-image:linear-gradient(#211e19 1px,transparent 1px),linear-gradient(90deg,#211e19 1px,transparent 1px);background-size:36px 36px}
.hy-seis{position:absolute;left:0;top:76%;width:100%;height:200px;margin-top:-100px;opacity:.9;transition:top .5s cubic-bezier(.6,0,.2,1)}
.deep.finale .hy-seis{top:50%}
.hy-flags{transition:opacity .25s}
.deep.finale .hy-flags{opacity:0}
.hy-flag{position:absolute;left:0;top:76%;margin:0;display:flex;align-items:center;gap:10px;max-width:min(76vw,640px);padding:9px 14px 9px 9px;
  background:#f4f0e8;color:var(--ink);border:1px solid #000;box-shadow:0 10px 26px rgba(0,0,0,.5);opacity:0;z-index:3;white-space:nowrap}
.hy-flag img{width:30px;height:30px;object-fit:contain;background:#fff;flex:none}
.hy-flag em{font:600 11.5px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink)}
.hy-flag span{font:600 17px Inter,system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis}
.hy-flag::after{content:"";position:absolute;right:17px;top:100%;width:1px;height:var(--stem,60px);background:#f4f0e8}
.hy-you{top:50%;padding:12px 18px 12px 12px;gap:12px;border-color:var(--gold);box-shadow:0 0 0 4px rgba(232,154,71,.35),0 18px 40px rgba(0,0,0,.6)}
.hy-you img{width:40px;height:40px}
.hy-you span{font:600 21px/1.25 Inter,system-ui,sans-serif;white-space:normal;max-width:min(64vw,520px)}
.hy-you em{font-size:14px}
.hy-you{padding:14px 22px 14px 18px}
.hy-you::after{background:var(--gold);width:2px}
/* what subscribing opens, counted, as the page falls away */
.hy-count{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:4;display:flex;gap:44px;width:max-content;max-width:94vw}
.hy-count p{margin:0;text-align:center;opacity:0}
.hy-count b{display:block;font:400 clamp(44px,6.4vw,92px)/1 "Instrument Serif",Georgia,serif;color:#f4f0e8;-webkit-text-stroke:.6px #f4f0e8;
  font-variant-numeric:tabular-nums}
.hy-count span{display:block;margin-top:8px;font:500 clamp(10px,1.05vw,13px) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.hy-beat{position:absolute;left:50%;top:40%;margin:0;width:min(92vw,1100px);transform:translate(-50%,-50%);text-align:center;opacity:0;z-index:3}
.hy-beat b{display:block;font:400 clamp(54px,10.5vw,148px)/.92 "Instrument Serif",Georgia,serif;-webkit-text-stroke:1px #f4f0e8;letter-spacing:-.015em;
  text-shadow:0 6px 40px rgba(0,0,0,.6)}
.hy-beat span{display:inline-block;margin-top:18px;font:500 clamp(12px,1.35vw,16px) var(--mono);letter-spacing:.08em;color:var(--gold);
  background:rgba(13,12,10,.72);padding:6px 10px}
.hy-cv{position:absolute;left:50%;top:50%;width:clamp(120px,17vw,250px);height:auto;background:#fff;border:4px solid #fff;
  box-shadow:0 24px 60px rgba(0,0,0,.6);opacity:0;z-index:2}
.hy-skip{position:absolute;right:22px;bottom:22px;z-index:5;opacity:0;animation:cap-in .4s ease-out .5s forwards;border:1px solid #4a463d;background:rgba(13,12,10,.6);color:#f4f0e8;
  font:500 13px var(--mono);padding:10px 14px;cursor:pointer}
.hy-skip:hover{border-color:var(--gold);color:var(--gold)}
.hy-skip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.deep.out{clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.7,0,.25,1)}
.flash{position:fixed;inset:0;z-index:70;pointer-events:none;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),#fff7e8 0%,rgba(232,154,71,.55) 22%,rgba(250,248,243,0) 60%)}

/* ---- confirmed ---- */
.done{background:var(--paper);color:var(--ink);padding:96px 32px 112px;min-height:100vh}
.done-in{max-width:1120px;margin:0 auto}
.done-h{font:400 clamp(56px,8vw,104px)/.95 "Instrument Serif",Georgia,serif;-webkit-text-stroke:.6px var(--ink);margin:0 0 22px;letter-spacing:-.012em;outline:none}
.done-p{font:500 21px/1.5 Inter,system-ui,sans-serif;color:var(--ink);margin:0;max-width:36em}
.done-next{font:500 14px var(--mono);letter-spacing:.02em;color:var(--gold-ink);margin:14px 0 0}
.done-gmail{display:flex;align-items:center;gap:20px;max-width:780px;margin:26px 0 0;padding:16px 18px;border:1px solid var(--line);background:var(--card)}
.done-gmail[hidden]{display:none}
.done-gmail p{margin:0;font:400 14.5px/1.5 Inter,system-ui,sans-serif;color:var(--soft)}
.done-gbtn{flex:none;background:var(--ink);color:var(--gold);font:600 14px var(--mono);padding:12px 16px;text-decoration:none}
.done-gbtn:hover{color:#fff;text-decoration:none}
.done-gbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.done-q{font:400 34px/1.1 "Instrument Serif",Georgia,serif;margin:60px 0 22px;color:var(--ink)}
.nx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nx{display:flex;flex-direction:column;background:var(--card);color:var(--ink);border:1px solid var(--ink);text-decoration:none;
  box-shadow:6px 6px 0 #e3ddd0;transition:transform .15s,box-shadow .15s}
.nx:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.nx:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.nx-vis{display:block;height:190px;overflow:hidden;border-bottom:1px solid var(--ink);background:#fff}
.nx-vis img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.nx-vis--trend{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px 24px;background:#1c1a16}
.nx-vis--trend .sp{height:96px}
.hr-motion .done.is-in .nx-vis--trend .sp{animation:reveal 1.3s cubic-bezier(.5,0,.3,1) 1.1s both}
.nx-vis--trend .sp polyline{stroke-width:3}
.nx-vis--trend b{font:600 22px var(--mono);color:var(--gold)}
.nx-vis--empty{background:#1c1a16}
.nx-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px;flex:1}
.nx-t{font:600 19px/1.25 Inter,system-ui,sans-serif}
.nx-t i{font-style:normal;font-family:var(--mono);margin-left:6px;display:inline-block;transition:transform .15s}
.nx:hover .nx-t i{transform:translateX(4px)}
.nx-why{font:400 14.5px/1.5 Inter,system-ui,sans-serif;color:var(--soft)}
.hr-motion .done.is-in .done-h{animation:done-in .7s cubic-bezier(.2,.8,.3,1) both}
.hr-motion .done.is-in .done-p{animation:done-in .7s cubic-bezier(.2,.8,.3,1) .12s both}
.hr-motion .done.is-in .done-next,.hr-motion .done.is-in .done-gmail{animation:done-in .7s cubic-bezier(.2,.8,.3,1) .2s both}
.hr-motion .done.is-in .done-q{animation:done-in .7s cubic-bezier(.2,.8,.3,1) .3s both}
.hr-motion .done.is-in .nx{animation:nx-in .7s cubic-bezier(.2,.8,.3,1.15) both;animation-delay:calc(var(--i) * .12s + .42s)}
@keyframes done-in{from{opacity:0;transform:translateY(24px)}}
@keyframes nx-in{from{opacity:0;transform:translateY(60px) rotate(1.5deg)}}

/* ---- tablet and phone ---- */
@media (max-width:960px){
  .nx-grid{grid-template-columns:1fr;max-width:620px}
  .nx{flex-direction:row}
  .nx-vis{width:38%;height:auto;min-height:170px;border-bottom:0;border-right:1px solid var(--ink)}
}
@media (max-width:640px){
  .hr-wrap{padding:48px 16px 56px}
  .hr-h1{font-size:54px}
  .hr-mark.brand-mark{width:50px;height:50px;padding:4px;margin-bottom:14px}
  .hr-mark.brand-mark img{width:40px;height:40px}
  .hr-intro{font-size:16.5px;margin-top:18px}
  .card{margin-top:24px}
  .card-back{padding:22px 14px 18px}
  .card-h{font-size:27px;margin-bottom:14px}
  .card-front{padding:12px 12px 14px}
  .rp-top{font-size:9.5px;margin-bottom:12px}
  .rp-grid{gap:14px 12px}
  .rp-tile figcaption{font-size:8.5px;letter-spacing:.04em}
  .hr-btn{padding:0 16px;font-size:14px}
  .hr-form input[type=email]{font-size:16px;padding:12px 8px}
  .aud-grid{gap:12px 20px;max-height:23px;overflow:hidden}   /* one row of logos on a phone */
  .aud-logo{height:15px}
  .aud-logo--tall{height:23px}
  .done{padding:64px 16px 88px}
  .done-p{font-size:17px}
  .done-q{font-size:28px;margin-top:44px}
  .done-gmail{flex-direction:column;align-items:flex-start;gap:12px}
  .nx{flex-direction:column}
  .nx-vis{width:auto;min-height:0;height:150px;border-right:0;border-bottom:1px solid var(--ink)}
  .hy-skip{right:14px;bottom:14px}
  .hy-seis{top:84%}
  .hy-flag{max-width:calc(100vw - 40px)}
  .hy-flag span{font-size:13px}
  .hy-you span{font-size:15px}
  .hy-count{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;width:92vw}
  .hy-count b{font-size:44px}
}
@media (max-width:340px){   /* the narrowest phones: the button goes under the field, so the field keeps its words */
  .hr-form{flex-wrap:wrap}
  .hr-form input[type=email]{flex-basis:100%}
  .hr-btn{flex:1 0 100%}
}