/* Cove: a human scene, a quiet practice, everyday moments, invitation.
   Existing Cove palette and type take precedence over the parent NSM identity. */
@font-face{font-family:Bricolage;src:url('/assets/v3/fonts/bricolage-grotesque-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
:root{--linen:#f1ebdd;--soft:#f7f3ea;--mineral:#304a50;--night:#20383d;--evening:#302f2b;--muted:#50666a;--sea:#b7c9c4;--copper:#9f4f36;--gutter:clamp(24px,4.3vw,80px);--press:cubic-bezier(.3,.7,.4,1);--spring:linear(0, .077, .256, .474, .685, .863, .993, 1.076, 1.117, 1.126, 1.114, 1.09, 1.062, 1.036, 1.015, .999, .989, .985, .984, .986, .989, .993, .996, .999, 1)}
/* Taps: a button presses in fast (90 ms) and springs back on release (600 ms, a small overshoot), so every tap is acknowledged. */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:Bricolage,ui-sans-serif,system-ui,sans-serif;background:var(--linen);color:var(--mineral);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:5px}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--copper);outline-offset:5px}
::selection{background:var(--sea);color:var(--night)}
.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}
.skip{position:absolute;top:-80px;left:16px;padding:12px 20px;z-index:10;background:var(--linen);color:var(--mineral)}
.skip:focus{top:12px}
.site-header{position:absolute;inset:0 0 auto;z-index:3;height:100px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--soft)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:23px;letter-spacing:-.04em;font-weight:500;white-space:nowrap}
.brand img{filter:brightness(0) invert(1);opacity:.95}
.site-header nav{display:flex;align-items:center;gap:32px}
.site-header nav>a:not(.button){font-size:15px;text-decoration:none;padding:12px 0}
.site-header :focus-visible{outline-color:var(--linen)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 28px;border-radius:100px;text-decoration:none;background:var(--mineral);color:var(--linen);font-size:16px;font-weight:500;transition:background-color .2s ease,transform .6s var(--spring)}
.button:active{transform:scale(.96);transition:background-color .2s ease,transform .09s var(--press)}
.button-small{padding:12px 23px;min-height:44px;font-size:15px}
.site-header .button{background:var(--linen);color:var(--night)}
.quiet-link{display:inline-flex;align-items:center;gap:22px;min-height:44px;text-decoration-thickness:1px}
.quiet-link:hover{text-decoration-color:var(--copper)}
h1,h2{font-weight:500;letter-spacing:-.035em;line-height:1.01;text-wrap:balance}
.home-hero{position:relative;isolation:isolate;height:100svh;min-height:660px;max-height:1100px;color:var(--soft);background:#302f2b}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media picture{display:contents}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
.home-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(17,25,24,.42),transparent 57%),linear-gradient(180deg,rgba(15,20,19,.27),transparent 22%,transparent 76%,rgba(15,20,19,.28))}
.hero-copy{height:100%;padding:clamp(168px,24vh,280px) var(--gutter) 52px;display:flex;flex-direction:column;justify-content:space-between;gap:36px;pointer-events:none}
h1{font-size:clamp(64px,6.6vw,112px);max-width:10ch}
.hero-intro p{max-width:30ch;font-size:clamp(22px,1.8vw,28px);line-height:1.35;letter-spacing:-.015em;text-wrap:balance}
.hero-intro a{pointer-events:auto}
.hero-intro .quiet-link{margin-top:23px}
.down-link{width:44px;justify-content:center;text-decoration:none;border:1px solid rgba(247,243,234,.45);border-radius:50%;transition:background-color .2s ease,transform .6s var(--spring)}
.down-link span{font-size:24px;line-height:1;transition:transform .6s var(--spring)}
.hero-media .breath-toggle{z-index:4;pointer-events:auto}
.breath-toggle{position:absolute;bottom:24px;right:24px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(247,243,234,.45);border-radius:50%;background:rgba(28,25,22,.48);color:var(--soft);transition:background-color .2s ease,transform .6s var(--spring)}
.breath-toggle:focus-visible{outline-color:var(--linen)}
.breath-toggle svg{grid-area:1/1;width:15px;height:15px;fill:currentColor;transition:opacity .18s ease,transform .5s var(--spring)}
.breath-toggle .i-play,.breath-toggle[aria-pressed=true] .i-pause{opacity:0;transform:scale(.4)}
.breath-toggle[aria-pressed=true] .i-play{opacity:1;transform:none}   /* pause and play swap with a small pop instead of a cut */
/* Hover: the button inverts, its new colour spreading from where the pointer enters (550 ms) and drawing back toward
   where it leaves (400 ms). Pills redraw their label inside the spreading colour (::after, label from data-label), so the
   text flips exactly where the colour passes; round buttons fill solid and their icon flips. home.js sets --px/--py/--r.
   Pointer devices only, so a tap never leaves a stuck hover. */
@property --rr{syntax:'<length>';inherits:false;initial-value:0px}   /* only the radius animates; the centre jumps to the pointer */
.button,.down-link,.moments-controls button{position:relative}
.button,.down-link,.breath-toggle,.moments-controls button{overflow:hidden;isolation:isolate}
.button::after{content:attr(data-label);content:attr(data-label) / '';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;background:var(--wash);color:var(--wash-ink);box-shadow:inset 0 0 0 1.5px var(--wash-edge);--rr:0px;clip-path:circle(var(--rr) at var(--px,50%) var(--py,50%));transition:--rr .4s cubic-bezier(.65,0,.35,1);pointer-events:none}
.down-link::before,.breath-toggle::before,.moments-controls button::before{content:'';position:absolute;left:var(--px,50%);top:var(--py,50%);z-index:-1;width:220%;aspect-ratio:1;border-radius:50%;background:var(--wash);transform:translate(-50%,-50%) scale(0);transition:transform .4s cubic-bezier(.65,0,.35,1);pointer-events:none}
.down-link,.breath-toggle,.moments-controls button{transition:color .2s ease,background-color .2s ease,transform .6s var(--spring)}
@media(hover:hover) and (pointer:fine){
  .button:hover::after{--rr:var(--r,200px);transition:--rr .55s cubic-bezier(.33,1,.68,1)}
  .down-link:hover::before,.breath-toggle:hover::before,.moments-controls button:hover:not(:disabled)::before{transform:translate(-50%,-50%) scale(1);transition:transform .55s cubic-bezier(.33,1,.68,1)}
  .down-link:hover,.breath-toggle:hover,.moments-controls button:hover:not(:disabled){color:var(--wash-ink);transition:color .2s ease .12s,background-color .2s ease,transform .6s var(--spring)}
}
.button{--wash:var(--soft);--wash-ink:var(--mineral);--wash-edge:var(--mineral)}                 /* mineral pill turns cream, outlined */
.site-header .button{--wash:var(--evening);--wash-ink:var(--soft);--wash-edge:var(--soft)}     /* cream pill turns dark, outlined */
.down-link,.breath-toggle{--wash:var(--soft);--wash-ink:var(--evening)}                         /* outline circles fill cream */
.moments-controls button{--wash:var(--mineral);--wash-ink:var(--linen)}                         /* outline circles fill mineral */
/* Text links: the underline draws in from the left and leaves to the right. */
.site-header nav>a:not(.button),footer nav a{background:linear-gradient(currentColor,currentColor) 100% calc(100% - 9px)/0 1.5px no-repeat;transition:background-size .5s cubic-bezier(.65,0,.35,1)}
@media(hover:hover){.site-header nav>a:not(.button):hover,footer nav a:hover{background-position:0 calc(100% - 9px);background-size:100% 1.5px;transition:background-size .6s cubic-bezier(.33,1,.68,1)}}
/* Animation timing: expand to 40%, then give the settling phase more time.
   JS provides the cycle and photograph-relative centre. The image stays still. */
.calm-rings{position:absolute;z-index:1;width:clamp(100px,10vw,164px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;visibility:hidden;opacity:0;transition:opacity 1.6s ease,visibility 0s 1.6s}
.calm-ready .calm-rings{visibility:visible;opacity:1;transition:opacity 1.6s ease,visibility 0s}
.calm-rings span{position:absolute;inset:0;margin:auto;width:var(--ring-diameter);height:var(--ring-diameter);border:1px solid rgba(247,243,234,.65);border-radius:50%;opacity:.32;animation:calm-settle var(--calm-cycle,10000ms) cubic-bezier(.42,0,.36,1) infinite}
.calm-rings span:nth-child(2){border-color:rgba(247,243,234,.5)}
.calm-rings span:nth-child(3){border-color:rgba(247,243,234,.35)}
.calm-paused .calm-rings span{animation-play-state:paused}
@keyframes calm-settle{0%,100%{transform:scale(.88);opacity:.42}40%{transform:scale(1.13);opacity:.82}}
.practice{padding:clamp(80px,9vw,150px) var(--gutter) clamp(64px,7vw,110px);background:var(--evening);color:var(--linen);scroll-margin-top:0}
.practice-heading,.practice-media,.practice-foot{max-width:1450px;margin-inline:auto}
.practice-heading{margin-bottom:36px}
.practice h2{font-size:clamp(32px,7.1vw,108px);white-space:nowrap}
.practice-media{position:relative;overflow:hidden;aspect-ratio:1.85;background:#b5a38c;border-radius:8px;clip-path:inset(0 round 8px)}
.practice-media picture{display:contents}
.practice-media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.practice-media .calm-rings{width:clamp(110px,13vw,190px)}
.practice-foot{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-top:18px;color:#c4bcae;font-size:14px}
.practice a:focus-visible{outline-color:var(--linen)}
.moments{padding-top:clamp(65px,8vw,130px)}
.moments-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 var(--gutter);margin-bottom:38px}
.moments-heading h2{font-size:clamp(42px,5vw,74px);line-height:1.04}
.moments-controls{display:flex;gap:10px;flex-shrink:0}
.moments-controls button{display:grid;place-items:center;width:48px;height:48px;border:1px solid #87948d;border-radius:50%;background:transparent;font-size:25px;line-height:1;transition:background-color .2s ease,transform .6s var(--spring)}
.moments-controls span{transition:transform .6s var(--spring)}
.moments-controls button:disabled{opacity:.3;cursor:default}
.down-link:active,.breath-toggle:active,.moments-controls button:active:not(:disabled){transform:scale(.9);transition:background-color .2s ease,transform .09s var(--press)}
@media(hover:hover){.down-link:hover span{transform:translateY(3px)}[data-moments-prev]:hover:not(:disabled) span{transform:translateX(-3px)}[data-moments-next]:hover:not(:disabled) span{transform:translateX(3px)}}
.moments-track{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;padding:0 var(--gutter) 6px}
.moments-track::-webkit-scrollbar{display:none}
.moments-track:focus-visible{outline-offset:-3px}
.moments-list{display:flex;gap:18px;list-style:none;width:max-content}
.moment-card{position:relative;isolation:isolate;flex:none;width:clamp(300px,31vw,440px);aspect-ratio:4/5;min-height:430px;overflow:hidden;scroll-snap-align:start;border-radius:8px;background:var(--mineral);color:var(--soft)}
.moment-card::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(18,31,29,.08) 20%,rgba(18,31,29,.08) 38%,rgba(18,31,29,.76) 78%,rgba(18,31,29,.94))}
.moment-card img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.moment-bedtime img{object-position:65% 50%}
.moment-label{position:absolute;top:22px;left:22px;padding:7px 13px;border-radius:30px;background:rgba(247,243,234,.93);color:var(--night);font-size:13px;line-height:1.2}
.moment-copy{position:absolute;inset:auto 26px 29px}
.moment-copy h3{font-size:clamp(29px,2.5vw,36px);line-height:1.06;letter-spacing:-.035em;font-weight:500;text-wrap:balance}
.moment-copy p{font-size:15px;line-height:1.45;margin-top:13px;max-width:29ch;color:#edece1}
.quote-section{padding-inline:var(--gutter)}
.founder-quote{max-width:1000px;padding:clamp(65px,8vw,120px) 0 clamp(70px,9vw,135px);margin:auto;text-align:center}
.founder-quote blockquote{font-size:clamp(28px,3.8vw,54px);font-weight:400;line-height:1.17;letter-spacing:-.035em;text-wrap:pretty}
.founder-quote figcaption{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:32px;text-align:left}
.founder-quote figcaption img{width:58px;height:58px;object-fit:cover;object-position:50% 35%;border-radius:50%}
.quote-name,.quote-role{display:block}
.quote-name{font-size:16px;font-weight:500}
.quote-role{font-size:13px;color:var(--muted);margin-top:2px}
.cosy-band{margin:0;background:var(--soft)}
.cosy-band img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:50% 30%;max-height:80svh}
@media (max-width:720px){.cosy-band img{aspect-ratio:4/5;max-height:none}}
.invitation{display:grid;grid-template-columns:62fr 38fr;align-items:center;gap:3vw;padding:clamp(75px,9vw,140px) var(--gutter);background:var(--soft)}
.cove-portrait{position:relative;max-width:950px;justify-self:end;perspective:1100px}
.cove-portrait img{width:100%;height:auto}
/* Hover: Cove turns toward the pointer in 3D, lifts a little off a soft contact shadow, and a broad lamp-like light moves
   across the wool; it banks a few degrees as it turns, like a manta gliding. home.js drives --rx/--ry/--lift/--gx/--gy with a spring; pointer devices only, nothing moves on touch or reduced motion. */
.cove-turn{position:relative;transform:translateY(calc(var(--lift,0) * -12px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg)) scale(calc(1 + var(--lift,0) * .03));will-change:transform}
.cove-sheen{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,35%),rgba(255,240,222,.2),rgba(255,240,222,0) 48%);-webkit-mask:url('/assets/v3/img/cove-cutout-1300.webp') 0 0/100% 100% no-repeat;mask:url('/assets/v3/img/cove-cutout-1300.webp') 0 0/100% 100% no-repeat;mix-blend-mode:screen;opacity:var(--lift,0)}
.cove-portrait::after{content:'';position:absolute;left:16%;right:16%;bottom:-2%;height:9%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(38,44,42,.30),rgba(38,44,42,0));filter:blur(6px);transform:translateX(calc(var(--ry,0deg) / 1deg * -1.2px)) scale(calc(1 + var(--lift,0) * .08),calc(1 - var(--lift,0) * .1));opacity:calc(1 - var(--lift,0) * .35)}
.invitation-copy{padding:0 24px}
.invitation h2{font-size:clamp(70px,8.6vw,125px)}
.price{font-size:30px;line-height:1.2;margin-top:22px;letter-spacing:-.03em}
.availability{font-size:17px;margin-top:14px}
.invitation .button{margin-top:26px}
.shipping{font-size:13px;line-height:1.5;color:var(--muted);margin-top:16px;max-width:22ch}
footer{background:var(--soft);padding:0 var(--gutter)}
.footer-main{display:flex;justify-content:space-between;align-items:center;gap:40px;border-top:1px solid #d8d8cb;padding-top:42px}
.makers{display:block;max-width:200px}
.makers img{width:200px;height:auto;display:block}
footer nav{display:flex;gap:28px;align-items:center;flex-wrap:wrap;font-size:15px}
footer nav a{padding:12px 0;text-decoration:none}
.footer-notes a{color:inherit;text-underline-offset:3px}
.footer-notes{display:flex;justify-content:space-between;gap:20px;margin-top:40px;color:var(--muted);font-size:13px}
/* Kelly's waves close the page; capped at 200px tall on wide screens (a gentle horizontal stretch, same as site.css) */
.footer-art{margin:28px calc(-1 * var(--gutter)) 0;overflow:hidden}.footer-art img{width:100%;height:min(22.96vw,max(200px,12vw));object-fit:fill;display:block}
@media(min-width:801px) and (max-width:1100px){h1{font-size:clamp(58px,6.5vw,74px)}.hero-copy{padding-top:180px}.invitation{grid-template-columns:56fr 44fr}.invitation-copy{padding:0}}
@media(max-width:800px){
  .site-header{height:80px;gap:12px}.brand{font-size:21px;gap:8px}.brand img{width:24px;height:24px}.nav-story{display:none}.site-header nav{gap:0}.button-small{padding:11px 19px;font-size:14px}
  .home-hero{height:100svh;min-height:740px;max-height:1250px}.hero-copy{padding:112px var(--gutter) 25px;gap:24px}.hero-copy h1{font-size:clamp(49px,8.5vw,76px);max-width:10ch}.hero-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-right:58px}.hero-intro p{font-size:20px}.hero-intro .quiet-link{margin:0;flex-shrink:0}.home-hero::after{background:linear-gradient(180deg,rgba(15,20,19,.27),transparent 35%,transparent 68%,rgba(15,20,19,.76))}.breath-toggle{bottom:25px;right:var(--gutter)}.calm-rings{width:clamp(88px,24vw,135px)}
  .practice{padding:68px var(--gutter) 52px}.practice-heading{margin-bottom:30px}.practice h2{font-size:clamp(32px,9.7vw,76px)}.practice-media{aspect-ratio:4/5;margin-inline:calc(-1 * var(--gutter));border-radius:0;clip-path:none}.practice-foot{align-items:flex-start;font-size:12px;gap:18px}.practice-foot .quiet-link{font-size:13px;white-space:nowrap;min-height:44px;margin-top:-8px}
  .moments{padding-top:58px}.moments-heading{flex-wrap:wrap;gap:18px;margin-bottom:24px}.moments-heading h2{flex:1 1 100%}.moments-controls{margin-left:auto}.moments-heading h2{font-size:clamp(34px,7.2vw,54px)}.moments-controls{gap:8px}.moments-controls button{width:44px;height:44px;font-size:23px}.moments-list{gap:14px}.moment-card{width:82vw;max-width:390px;min-height:410px}.moment-copy{inset:auto 24px 26px}.moment-copy h3{font-size:31px}.moment-label{top:20px;left:20px}.founder-quote{padding:58px 0 65px}.founder-quote blockquote{font-size:clamp(29px,5.8vw,43px);line-height:1.2}.founder-quote figcaption{margin-top:26px}.founder-quote figcaption img{width:48px;height:48px}.quote-name{font-size:15px}.quote-role{font-size:12px}
  .invitation{display:flex;flex-direction:column;gap:30px;padding:65px var(--gutter) 65px;text-align:center}.cove-portrait{width:100%;max-width:560px}.invitation-copy{padding:0}.invitation h2{font-size:80px}.price{margin-top:18px;font-size:28px}.availability{margin-top:12px}.invitation .button{margin-top:22px}.shipping{max-width:none;margin-top:16px}
  footer{padding:0 var(--gutter)}.footer-main{flex-direction:column;align-items:flex-start;gap:16px;padding-top:34px}.makers,.makers img{width:170px;max-width:170px}footer nav{justify-content:flex-start;gap:0 24px;font-size:15px}.footer-notes{flex-direction:column;gap:6px;margin-top:20px}
}
@media(min-width:550px) and (max-width:800px){.hero-copy{padding-top:130px}.hero-copy h1{font-size:72px}.hero-intro p{font-size:22px}}
@media(max-width:360px){.moments-heading{align-items:flex-start;flex-direction:column;gap:20px}.moment-card{min-height:400px}.moment-copy h3{font-size:28px}.moment-copy p{font-size:14px}.brand{font-size:19px}.button-small{padding:10px 15px}.hero-copy h1{font-size:46px}.hero-intro p{font-size:18px}.hero-intro{gap:10px}.home-hero{min-height:690px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.calm-rings span{opacity:.3}.breath-toggle{display:none}}

/* belly breath (breath.js): the photograph redrawn on a canvas with the same cover crop; only the belly area moves */
.belly-breath{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .4s ease;pointer-events:none}
.belly-ready .belly-breath{opacity:1}
.practice-media .belly-breath{z-index:0}
/* the "Lie back and exhale" loop (loop.js); the still and its CSS rings stay underneath as the fallback */
.practice-loop{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;pointer-events:none}
.loop-on .practice-loop{opacity:1}
.loop-on .calm-rings{display:none}
/* Moment cards: on hover the photo eases in while the person breathes once every 10 s (breath.js); on a phone, the
   card that fills the carousel breathes. The canvas sits with the photo, under the shade and the words. */
.moment-card img,.moment-card .belly-breath{transition:opacity .4s ease,transform 1.4s cubic-bezier(.22,.61,.36,1)}
.moment-card .belly-breath{z-index:-2}
.moment-card::after{transition:opacity .8s ease}
@media(hover:hover) and (pointer:fine){.moment-card:hover img,.moment-card:hover .belly-breath{transform:scale(1.035)}.moment-card:hover::after{opacity:.86}}
.invitation .guarantee{margin-top:14px;font-size:14px;color:var(--muted)}
.moment-label{max-width:calc(100% - 44px);border-radius:16px;line-height:1.25}   /* practical labels wrap on the narrowest phones */
/* Footer email signup (signup.js), copy proposed 5 Oct: one quiet row above the makers and links, the line on the left and
   the field on the right, ending where the links end. The field matches the Cove page's waitlist field; the button is
   outlined so Shop Now leads. Focus rings the whole field; an invalid address turns its edge copper, matching the message.
   The honeypot is display:none so browser autofill never fills it. */
.footer-signup{display:flex;justify-content:space-between;align-items:center;gap:22px 48px;border-top:1px solid #d8d8cb;padding:42px 0}
.signup-copy h2{font-size:clamp(19px,1.6vw,22px);line-height:1.15;letter-spacing:-.03em}
.signup-copy p{margin-top:6px;font-size:15px;color:var(--muted)}
.signup{flex:0 1 460px;min-width:0}
.signup-row{display:flex;gap:6px;padding:5px;background:var(--linen);border:1px solid #d8d8cb;border-radius:100px;transition:border-color .2s ease}
.signup-row:focus-within{border-color:var(--mineral)}
.signup-row:has(input:focus-visible){border-color:var(--mineral);box-shadow:0 0 0 1px var(--mineral)}
.signup-row:has(input[aria-invalid=true]){border-color:var(--copper)}
.signup-row:has([aria-invalid=true]:focus-visible){box-shadow:0 0 0 1px var(--copper)}
.signup input[type=email]{flex:1;min-width:0;border:0;background:transparent;outline:none;text-align:left;font:400 16px/1.2 Bricolage,ui-sans-serif,system-ui,sans-serif;color:var(--mineral);padding:0 16px}
.signup input::placeholder{color:var(--muted);opacity:1}
.button-quiet{flex:none;border:0;min-height:44px;padding:12px 22px;font-size:15px;background:transparent;color:var(--mineral);box-shadow:inset 0 0 0 1px var(--mineral);--wash:var(--mineral);--wash-ink:var(--linen);--wash-edge:var(--mineral)}
.button-quiet:focus-visible{outline-offset:2px}
.button:disabled{opacity:.45;cursor:default;transform:none}
.signup-status{font-size:14px;line-height:1.4;font-weight:500}
.signup-status:not(:empty){margin-top:10px}
.signup-status.success{color:var(--mineral)}
.signup-status.error{color:var(--copper)}
.hp{display:none}
@media(max-width:800px){.footer-signup{flex-direction:column;align-items:stretch;gap:20px;padding:34px 0}.signup{flex:none;width:100%;max-width:460px}}
@media(max-width:360px){.signup-row{flex-direction:column;border-radius:22px;padding:6px}.signup input[type=email]{padding:13px 12px}}

/* hero variants (index.html head script sets html[data-for]); the home headline + night intro show when there is no choice or no JavaScript */
.v-sleep,.v-day,h1 .v-night{display:none}
[data-for=night] h1 .v-home,[data-for=sleep] .v-home,[data-for=day] .v-home{display:none}
[data-for=night] h1 .v-night{display:revert}
[data-for=sleep] .v-night,[data-for=day] .v-night{display:none}
[data-for=sleep] .v-sleep,[data-for=day] .v-day{display:revert}
/* the day hero is a bright room: on landscape screens it shows the wide photo with dark-on-light copy and header (a light
   ground while it loads, a soft wash under the line); portrait screens show the tall photo with light copy on a deeper shade */
@media(min-width:801px) and (orientation:landscape){
  [data-for=day] .home-hero{color:var(--night);background:#d8d2c7}
  [data-for=day] .home-hero::after{background:linear-gradient(180deg,rgba(247,243,234,.86),rgba(247,243,234,.5) 70px,rgba(247,243,234,0) 150px),linear-gradient(90deg,rgba(247,243,234,.6),rgba(247,243,234,.15) 45%,transparent 62%),linear-gradient(0deg,rgba(247,243,234,.55),transparent 30%)}
  [data-for=day] .site-header{color:var(--night)}
  [data-for=day] .brand img{filter:none}
  [data-for=day] .site-header :focus-visible{outline-color:var(--copper)}
  [data-for=day] .site-header .button{background:var(--night);color:var(--soft);--wash:var(--soft);--wash-ink:var(--night);--wash-edge:var(--night)}
  [data-for=day] .down-link{border-color:rgba(32,56,61,.45)}
}
@media(max-width:800px),(orientation:portrait){
  [data-for=day] .home-hero::after{background:linear-gradient(180deg,rgba(15,20,19,.5),transparent 38%,transparent 62%,rgba(15,20,19,.8))}
}