/* perryidyll.com — landing page. Reads tokens.css. One living thing per viewport. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:420ms;animation-timing-function:var(--ease-out)}
::view-transition-group(mark){animation-duration:520ms;animation-timing-function:var(--ease-out)}

.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;font-family:var(--sans);font-size:14px;transition:top var(--t-ui)}
.skip:focus{top:16px}
main{position:relative;z-index:1}

/* ---------- nav: arrives when the ring docks ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:16px var(--gutter);transform:translateY(-110%);transition:transform 640ms var(--ease-out)}
.nav.show{transform:none}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(255 255 255 / .84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);opacity:0;transition:opacity 500ms var(--ease-out)}
.nav.solid::before{opacity:1}
.mark{display:inline-flex;align-items:center;gap:12px;font-family:var(--serif);font-size:19px;letter-spacing:-.012em;font-variation-settings:"opsz" 20,"SOFT" 30,"WONK" 1;height:28px}
.mark-slot{width:28px;height:28px;display:block;flex:none}
.mark-slot .ring{width:28px;height:28px}
.nav nav{display:flex;gap:clamp(18px,3vw,36px);font-size:14px;font-weight:500;color:var(--muted)}
.nav nav a{position:relative;padding:6px 0;transition:color var(--t-ui) var(--ease-out)}
.nav nav a:hover{color:var(--ink)}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--t-ui) var(--ease-out)}
.nav nav a:hover::after{transform:scaleX(1)}
.nav .nav-in{color:var(--ink)}
@media (max-width:560px){.nav nav a.hide-sm{display:none}}

/* ---------- the still point: a fixed ring that is the hero's breath, then the nav mark, then scroll progress ---------- */
.still{position:fixed;left:0;top:0;width:200px;height:200px;z-index:41;pointer-events:none;transform-origin:0 0;will-change:transform;view-transition-name:mark;opacity:0;transition:opacity 900ms var(--ease-out)}
.loaded .still{opacity:1}
.still .ring{width:100%;height:100%;transform:scale(calc(.975 + var(--breath) * .025))}
.still .ring .fill{transition:none}
.still .core{position:absolute;left:50%;top:50%;width:5%;height:5%;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%) scale(calc(.9 + var(--breath)*.35))}
.reduce .still,.still.static{position:static;opacity:1;transform:none!important}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:grid;place-content:center;justify-items:center;text-align:center;padding:max(24px,4vh) var(--gutter) calc(var(--gutter) + 56px);position:relative}
.still-anchor{width:clamp(120px,18vmin,180px);height:clamp(120px,18vmin,180px);margin-bottom:clamp(24px,4vh,44px);position:relative}
.hero h1{font-size:var(--fs-4);max-width:14ch;text-wrap:balance}
.hero .lede{margin-top:clamp(18px,3vh,30px);max-width:46ch;text-wrap:pretty}
.hero .cta{display:flex;gap:12px;margin-top:clamp(24px,3.6vh,40px);flex-wrap:wrap;justify-content:center}
@keyframes hintIn{from{opacity:0}to{opacity:1}}
.hint{animation:hintIn 1.2s var(--ease-out) 1.6s both;position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:10px}
.hint i{display:block;width:1px;height:40px;background:var(--line);position:relative;overflow:hidden}
.hint i::after{content:"";position:absolute;left:0;top:0;width:100%;height:50%;background:var(--ink);transform:translateY(calc(-100% + var(--breath) * 300%))}

/* ---------- the thread: one line from the ring to the end ---------- */
.thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.thread path{fill:none;stroke-width:1;stroke-linecap:round}
.thread .track{stroke:var(--line)}
.thread .draw{stroke:var(--ink);opacity:.45}
@media (max-width:720px){.thread{display:none}}

/* ---------- sections ---------- */
.sec{padding:clamp(96px,14vh,168px) 0;position:relative;z-index:1}
.sec-head{display:grid;grid-template-columns:28px 1fr;align-items:center;column-gap:12px;margin-bottom:clamp(28px,5vh,56px)}
.dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--line);background:var(--paper);justify-self:center;transition:background 500ms var(--ease-out),border-color 500ms var(--ease-out),transform 500ms var(--ease-out)}
.dot.lit{background:var(--ink);border-color:var(--ink);transform:scale(1.2)}
.sec-head .h-3{grid-column:2;margin-top:12px;max-width:18ch;text-wrap:balance}
@media (max-width:720px){.sec-head{grid-template-columns:1fr}.dot{display:none}.sec-head .h-3{grid-column:1}}

/* ---------- the breath scene ---------- */
.breath{height:300svh;position:relative;z-index:1}
.stage{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;align-items:center;overflow:hidden;padding:0 var(--gutter)}
.lung{position:relative;width:min(50vmin,380px);aspect-ratio:1;align-self:end;margin-bottom:clamp(24px,4vh,40px)}
.lung .ring{position:absolute;inset:0;width:100%;height:100%;transform:scale(calc(.9 + var(--breath) * .1))}
.lung .ring .fill{transition:none;stroke-dashoffset:calc(1 - var(--breath))}
.lung .glow{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgb(var(--light) / calc(var(--glow) * 1.8)),transparent 70%);transform:scale(calc(.75 + var(--breath) * .3))}
.lung .word{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:var(--fs-2);font-weight:340;letter-spacing:-.02em;font-variation-settings:"opsz" 96,"SOFT" 30,"WONK" 1}
.lung .word span{position:absolute;opacity:0}
.beats{position:relative;width:min(100%,34ch);min-height:9em;text-align:center}
.beat{position:absolute;inset:0 0 auto 0;opacity:0;text-wrap:pretty}
.beat p{font-size:var(--fs-1);line-height:1.45;color:var(--ink-2);font-variation-settings:"opsz" 20,"SOFT" 10}
.reduce .breath{height:auto;padding:clamp(80px,12vh,140px) 0}
.reduce .stage{position:static;height:auto;grid-template-rows:auto;gap:40px}
.reduce .beats{min-height:0;display:grid;gap:32px}
.reduce .beat{position:static;opacity:1}
.reduce .lung .word span{position:static;opacity:1}
.reduce .lung .word span+span{display:none}
.pull{text-align:center;max-width:34ch;margin:clamp(64px,10vh,120px) auto 0;font-size:var(--fs-2);line-height:1.25;font-variation-settings:"opsz" 72,"SOFT" 40,"WONK" 1;font-weight:330;letter-spacing:-.015em;text-wrap:balance}
.pull em{font-style:italic;font-weight:300}

/* ---------- the person ---------- */
.person .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,7vw,110px);align-items:center}
.person figure{position:relative;margin-right:10%}
.person .portrait{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.person .second{position:absolute;right:-16%;bottom:-16%;width:36%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--radius-s);box-shadow:0 40px 70px -36px rgb(20 20 18 / .45)}
.person figcaption{font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--faint);margin-top:16px}
.person .bio{max-width:52ch}
.person .bio p+p{margin-top:1.1em}
.person .bio .h-2{margin-bottom:28px;max-width:16ch;text-wrap:balance}
@media (max-width:860px){.person .grid{grid-template-columns:1fr}.person figure{margin-right:12%;margin-bottom:22%}.person .second{right:-12%;bottom:-20%}}

/* ---------- courses ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:clamp(44px,7vh,80px);padding-left:40px}
.nums b{display:block;font-family:var(--serif);font-weight:300;font-size:var(--fs-3);letter-spacing:-.035em;font-variation-settings:"opsz" 96,"SOFT" 20;line-height:1;font-variant-numeric:tabular-nums}
.nums span{display:block;font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:8px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;perspective:1000px}
.card{--c:var(--ink);position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,30px);border-radius:var(--radius);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);min-height:380px;transform-style:preserve-3d;transition:box-shadow 500ms var(--ease-out),translate 500ms var(--ease-out)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 500ms var(--ease-out);box-shadow:0 36px 70px -34px rgb(20 20 18 / .35),0 0 0 1px rgb(var(--light) / .35)}
.fine .card:hover{translate:0 -4px;box-shadow:inset 0 0 0 1px transparent}
.fine .card:hover::after{opacity:1}
.card .top{display:flex;align-items:center;justify-content:space-between}
.card .ring{width:40px;height:40px;color:var(--c)}
.card .eyebrow{color:var(--c)}
.card .h{font-size:var(--fs-2);margin-top:clamp(28px,4vh,48px);text-wrap:balance}
.card .tag{color:var(--muted);text-wrap:pretty}
.card .bottom{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:24px;font-family:var(--sans);font-size:13px;color:var(--muted)}
.card .price{font-family:var(--serif);font-size:var(--fs-2);color:var(--ink);font-weight:300;letter-spacing:-.03em;line-height:1;font-variation-settings:"opsz" 72}
.card .go{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500}
.card .go .arrow{transition:transform var(--t-ui) var(--ease-out)}
.fine .card:hover .go .arrow{transform:translateX(4px)}
.bundle{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(28px,4vh,40px)}
.bundle p{font-size:var(--fs-1);font-variation-settings:"opsz" 20,"SOFT" 20}
.bundle s{color:var(--faint);text-decoration-thickness:1px;margin-left:.4em;font-size:.8em}
.bundle small{display:block;font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:4px}
@media (max-width:960px){.cards{grid-template-columns:1fr}.card{min-height:0}.nums{grid-template-columns:repeat(2,1fr);padding-left:0;gap:28px 16px}}

/* ---------- coaching ---------- */
.coaching .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:clamp(32px,7vw,110px);align-items:center}
.coaching .text{max-width:50ch}
.coaching .text p+p{margin-top:1.1em}
.coaching .cta{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.coaching .cta small{font-family:var(--sans);font-size:13px;color:var(--muted)}
.coaching img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--radius)}
@media (max-width:860px){.coaching .grid{grid-template-columns:1fr}.coaching img{aspect-ratio:3/2;object-position:50% 25%}}

/* ---------- proof ---------- */
.quotes{columns:2 360px;column-gap:48px}
.quote{break-inside:avoid;padding:30px 0;border-top:1px solid var(--line);margin:0}
.quote p{font-size:var(--fs-1);line-height:1.42;font-style:italic;font-weight:330;font-variation-settings:"opsz" 20,"SOFT" 40,"WONK" 1;color:var(--ink-2);text-wrap:pretty}
.quote p+p{margin-top:.8em}
.quote footer{margin-top:16px;font-family:var(--sans);font-size:13px;color:var(--muted)}
.quote footer b{font-weight:500;color:var(--ink)}
.more{display:grid;grid-template-rows:0fr;transition:grid-template-rows 800ms var(--ease-out)}
.more.open{grid-template-rows:1fr}
.more>div{overflow:hidden}
.more-row{display:flex;justify-content:center;margin-top:36px}

/* ---------- close ---------- */
.close{text-align:center;padding:clamp(120px,22vh,240px) 0 clamp(60px,10vh,120px)}
.close .close-ring{width:56px;height:56px;margin:0 auto clamp(32px,5vh,56px);position:relative}
.close .close-ring .ring{width:100%;height:100%;transform:scale(calc(.96 + var(--breath) * .04))}
.close .close-ring .ring .fill{transition:none;stroke-dashoffset:calc(1 - var(--breath))}
.close h2{font-size:var(--fs-3);max-width:22ch;margin-inline:auto;text-wrap:balance}
.close .bw{display:inline-block;filter:blur(8px);opacity:.15;transition:filter 700ms var(--ease-out),opacity 700ms var(--ease-out);transition-delay:calc(var(--i) * 45ms)}
.close h2.in .bw{filter:blur(0);opacity:1}
.close .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(32px,5vh,52px)}

/* ---------- footer ---------- */
.site-foot{padding:40px 0 max(40px,env(safe-area-inset-bottom));font-family:var(--sans);font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.site-foot .row{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center}
.site-foot a{transition:color var(--t-ui)}
.site-foot a:hover{color:var(--ink)}
.site-foot .fine-print{margin-top:18px;color:var(--faint);max-width:60ch;text-wrap:pretty}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .nav{transform:none}
  .close .bw{filter:none;opacity:1}
  .hint i::after{transform:translateY(50%)}
}