/* The Stable Company site, the-fold.html styles, carried onto the design board. Light theme only; hero height pinned for artboards. */

:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* Layout: a sky hero with three planes, then one 1120px column of serif sections on cream; the process is a printed kit sheet; The Fold gets an ink band. Camp-guide details: double-ruled frames, serif italic captions, paper grain. */
:root{
  --surface:#fcf9f2; --paper:#f4efe5; --ink:#212020; --soft:#4a4845; --muted:#6b675f; --rule:#ddd6c8;
  --sky:#4587c2; --sky-deep:#1f4d77; --cream:#fcf9f2; --paper-light:#e7d6b4; --paper-mid:#cdb38a; --burgundy:#84433e;
  --band:#212020; --band-ink:#fcf9f2; --band-soft:#cfc8bb; --band-rule:#3d3b38;
  --grain-blend:multiply; --grain-op:.07; --show-light:block; --show-dark:none;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Albert Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono:'Source Code Pro', ui-monospace, Menlo, monospace;
  --wrap:1120px; --gutter:48px; --section:clamp(88px, 10vw, 150px);
  --ease-settle:cubic-bezier(.22,.61,.36,1); --ease-drift:cubic-bezier(.45,0,.55,1);
  --dur-quick:300ms; --dur-settle:600ms; --dur-moment:1350ms; --dur-draw:2400ms; --rise:8px;
}
@media (prefers-color-scheme: dark) and (max-width: 0px){ :root:not([data-theme="light"]){
  --surface:#1d1c1b; --paper:#262524; --ink:#fcf9f2; --soft:#d6cfc2; --muted:#a8a196; --rule:#3a3835;
  --sky-deep:#9cc3e6; --band:#2b2a29; --band-rule:#45423e;
  --grain-blend:screen; --grain-op:.05; --show-light:none; --show-dark:block; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --surface:#1d1c1b; --paper:#262524; --ink:#fcf9f2; --soft:#d6cfc2; --muted:#a8a196; --rule:#3a3835;
  --sky-deep:#9cc3e6; --band:#2b2a29; --band-rule:#45423e;
  --grain-blend:screen; --grain-op:.05; --show-light:none; --show-dark:block; color-scheme:dark;
}
@media (max-width:1000px){ :root{ --gutter:32px; } }
@media (max-width:640px){ :root{ --gutter:20px; } }

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--surface); color:var(--ink); font:400 17px/1.6 var(--serif); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:var(--grain-op); mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .38 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%; height:auto; display:block}
a{color:var(--sky-deep); text-underline-offset:3px; text-decoration-thickness:1px}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--sky); outline-offset:3px; border-radius:4px}
.wrap{max-width:calc(var(--wrap) + var(--gutter)*2); margin:0 auto; padding-inline:var(--gutter)}
.light-only{display:var(--show-light)} .dark-only{display:var(--show-dark)}
h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0; text-wrap:balance}
h2{font-size:clamp(38px, 5vw, 56px); line-height:1.04; letter-spacing:-.02em; max-width:15em}
h3{font-size:24px; line-height:1.25; letter-spacing:-.01em}
p{margin:0}
.lede{font-size:21px; line-height:1.55; color:var(--soft); max-width:32em}
.prose{display:grid; gap:1.05em; max-width:34em}
.prose p{font-size:19px; line-height:1.62}
.label{font:500 12.5px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.note{font-family:var(--sans); font-size:14px; line-height:1.45; color:var(--muted)}

/* buttons */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; padding:15px 30px; border-radius:999px; border:0; background:var(--ink); color:var(--surface); font:400 16px/1 var(--sans); cursor:pointer; text-decoration:none; white-space:nowrap}
.btn .lbl{display:inline-block; transition:transform var(--dur-quick) var(--ease-settle)}
.btn .arr{position:absolute; right:16px; top:50%; margin-top:-7px; width:14px; height:14px; opacity:0; transform:translateX(-6px); transition:opacity var(--dur-quick) var(--ease-settle), transform var(--dur-quick) var(--ease-settle)}
.btn:hover .lbl,.btn:focus-visible .lbl{transform:translateX(-8px)}
.btn:hover .arr,.btn:focus-visible .arr{opacity:1; transform:none}
.btn.small{padding:11px 22px; font-size:14px}
.btn.small .arr{right:10px; width:12px; height:12px; margin-top:-6px}
.btn.cream{background:var(--cream); color:#212020}
.btn.line{background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(252,249,242,.7)}
.btn.line:hover{box-shadow:inset 0 0 0 1px var(--cream)}
.btn.always .lbl{transform:none} .btn.always{gap:12px; padding-right:26px}
.btn.always .arr{position:static; margin:0; opacity:1; transform:none}
.btn.always:hover .arr{transform:translateX(4px)}

/* nav */
.bar{position:fixed; top:0; left:0; right:0; z-index:40; padding-top:env(safe-area-inset-top, 0px); color:var(--cream); transition:background var(--dur-settle) var(--ease-settle), color var(--dur-settle) var(--ease-settle), box-shadow var(--dur-settle) var(--ease-settle)}
.bar .wrap{display:flex; align-items:center; gap:32px; min-height:72px}
.bar .logo{flex:none; display:block; position:relative; height:38px; width:162px}
.bar .logo img{position:absolute; inset:0; height:38px; width:auto; transition:opacity var(--dur-settle) var(--ease-settle)}
.bar .logo .on-light{opacity:0}
.bar nav{display:flex; align-items:center; gap:28px; margin-left:auto}
.bar nav a.lk{font:400 15px/1 var(--sans); color:inherit; opacity:.86; text-decoration:none; padding-block:8px; transition:opacity var(--dur-quick) var(--ease-settle)}
.bar nav a.lk:hover{opacity:1}
.bar .btn{background:var(--cream); color:#212020}
.bar.solid{background:var(--surface); color:var(--ink); box-shadow:0 1px 0 var(--rule)}
.bar.solid .logo .on-sky{opacity:0}
.bar.solid .logo .on-light{opacity:1}
.bar.solid .btn{background:var(--ink); color:var(--surface)}
.menu-btn{display:none; margin-left:auto; background:none; border:0; padding:10px 0; font:400 15px/1 var(--sans); color:inherit; cursor:pointer}
@media (max-width:820px){
  .bar nav{display:none}
  .menu-btn{display:block}
  .bar.open{background:var(--surface); color:var(--ink); box-shadow:0 1px 0 var(--rule)}
  .bar.open .logo .on-sky{opacity:0} .bar.open .logo .on-light{opacity:1}
  .bar.open nav{display:grid; position:absolute; top:100%; left:0; right:0; gap:0; padding:8px var(--gutter) 24px; background:var(--surface); box-shadow:0 1px 0 var(--rule)}
  .bar.open nav a.lk{font-size:22px; font-family:var(--serif); padding-block:14px; border-bottom:1px solid var(--rule); opacity:1}
  .bar.open nav .btn{margin-top:20px; justify-self:start; background:var(--ink); color:var(--surface)}
}
@media (max-width:820px){ .bar.solid .logo .on-light{opacity:1} }
/* the light lockup becomes the cream one in dark mode */
.bar .logo .on-light.dark-swap{display:var(--show-dark)} .bar .logo .on-light.light-swap{display:var(--show-light)}

/* hero */
.hero{position:relative; overflow:hidden; background:var(--sky); color:var(--cream); isolation:isolate}
.hero .sky{position:absolute; inset:-2%; width:104%; height:104%; max-width:none; object-fit:cover; object-position:50% 20%; z-index:-2; animation:skyIn 4.2s var(--ease-settle) both}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(31,77,119,.28), rgba(31,77,119,0) 38%, rgba(31,77,119,0) 70%, rgba(31,77,119,.18))}
@keyframes skyIn{from{transform:scale(1.05)}}
.hero .wrap{position:relative; min-height:clamp(600px, var(--hero-vh, 774px), 880px); display:grid; align-content:center; padding-block:calc(120px + env(safe-area-inset-top, 0px)) 96px}
.hero h1{font-size:clamp(60px, 9.4vw, 136px); line-height:.96; letter-spacing:-.03em; max-width:7.5em; text-shadow:0 1px 30px rgba(31,77,119,.3)}
.hero .sub{margin-top:26px; font:400 clamp(21px, 2.2vw, 27px)/1.35 var(--sans); letter-spacing:-.005em; text-shadow:0 1px 18px rgba(31,77,119,.45)}
.hero .go{margin-top:40px}
.hero .in{animation:rise 1.65s var(--ease-settle) both}
.hero .sub.in{animation-delay:0.525s} .hero .go.in{animation-delay:0.9s}
@keyframes rise{from{opacity:0; transform:translateY(var(--rise))}}
.planes{position:absolute; inset:0; z-index:-1; pointer-events:none}
.pl{position:absolute; filter:drop-shadow(0 22px 26px rgba(31,77,119,.28))}
.pl .arrive{animation:arrive 3.3s var(--ease-settle) both}
.pl img{width:100%}
.pl.a{right:5%; top:44%; width:min(36vw, 500px)}
.pl.b{right:34%; top:16%; width:min(12vw, 160px); opacity:.94; filter:drop-shadow(0 10px 14px rgba(31,77,119,.22)) blur(.3px)}
.pl.c{right:9%; top:11%; width:min(7vw, 96px); opacity:.9; filter:drop-shadow(0 6px 10px rgba(31,77,119,.2)) blur(.6px)}
.pl.a .arrive{animation-delay:0.3s} .pl.b .arrive{animation-delay:0.75s} .pl.c .arrive{animation-delay:1.125s}
@keyframes arrive{from{opacity:0; transform:translate(-26px, 22px)}}
.drift{animation:drift 13.5s var(--ease-drift) infinite alternate}
.pl.b .drift{animation-duration:16.5s; animation-delay:-4.5s}
.pl.c .drift{animation-duration:15s; animation-delay:-9s}
@keyframes drift{to{transform:translate3d(4.4px,-6.6px,0)}}
@media (max-width:820px){
  .hero .wrap{min-height:0; align-content:start; padding-block:calc(128px + env(safe-area-inset-top, 0px)) 0}
  .planes{position:relative; inset:auto; height:clamp(260px, 72vw, 420px); margin-top:24px}
  .pl.a{right:2%; top:28%; width:min(64vw, 380px)}
  .pl.b{right:auto; left:6%; top:8%; width:min(20vw, 110px)}
  .pl.c{right:12%; top:0; width:min(12vw, 64px)}
  .drift{animation:none}
}

/* sections */
section{padding-block:var(--section); border-top:1px solid var(--rule)}
section.paper{background:var(--paper); border-top:0}
.hero + section{border-top:0}
.head{display:grid; gap:24px; margin-bottom:64px}
.rows{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.rows > li{display:grid; grid-template-columns:minmax(0, 15em) minmax(0, 1fr); gap:28px; padding-block:22px; border-bottom:1px solid var(--rule); align-items:baseline}
.rows .t{font-size:24px; line-height:1.25; letter-spacing:-.01em}
.rows .d{font-size:18px; line-height:1.55; color:var(--soft); max-width:34em}
@media (max-width:680px){ .rows > li{grid-template-columns:minmax(0,1fr); gap:6px} }

/* closing */
.close{position:relative; overflow:hidden; color:var(--cream); background:var(--sky); border-top:0; isolation:isolate}
.close > img.bg{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 70%; z-index:-1}
.close .wrap{display:grid; gap:28px; justify-items:start; position:relative}
.close h2{font-size:clamp(44px, 6vw, 80px); line-height:1; letter-spacing:-.025em; max-width:10em; text-shadow:0 1px 26px rgba(31,77,119,.35)}
.close .sub{font:400 21px/1.45 var(--sans); max-width:26em; text-shadow:0 1px 16px rgba(31,77,119,.45)}
.close .row{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:8px}
.close .note{color:var(--cream); opacity:.9}
.close .mini{position:absolute; right:8%; bottom:18%; width:min(18vw, 220px); filter:drop-shadow(0 16px 20px rgba(31,77,119,.28))}
@media (max-width:760px){ .close .mini{position:relative; right:auto; bottom:auto; width:120px; justify-self:end; margin-top:12px} }

/* footer */
footer{padding-block:56px 72px; border-top:1px solid var(--rule)}
footer .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px 48px; align-items:end}
@media (max-width:720px){ footer .wrap{grid-template-columns:minmax(0,1fr)} }
footer .brand{display:grid; gap:18px}
footer .brand img{height:38px; width:auto}
footer .links{display:flex; flex-wrap:wrap; gap:10px 24px; font-family:var(--sans); font-size:14px}
footer .links a{color:var(--ink); text-decoration:none} footer .links a:hover{text-decoration:underline}
.mail{display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:14px; color:var(--soft)}
.mail span{user-select:all}
.mail button{background:none; border:0; padding:4px 10px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--rule); font:400 12.5px/1 var(--sans); color:var(--muted); cursor:pointer}
.mail button:hover{color:var(--ink)}

/* settle-in for content that starts off screen */
.armed-up{opacity:0; transform:translateY(var(--rise))}
.up{transition:opacity var(--dur-settle) var(--ease-settle), transform var(--dur-settle) var(--ease-settle); transition-delay:calc(var(--i, 0) * 90ms)}

/* ---- The Fold page ---- */
body{background:var(--paper)}
.bar{background:var(--paper); color:var(--ink); box-shadow:0 1px 0 var(--rule)}
.bar .logo .on-sky{opacity:0} .bar .logo .on-light{opacity:1}
.bar .btn{background:var(--ink); color:var(--surface)}
.bar nav a.lk[aria-current="page"]{opacity:1; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px}
@media (max-width:820px){ .bar.open nav{background:var(--paper)} .bar.open{background:var(--paper)} }

.cover{padding-block:calc(104px + env(safe-area-inset-top, 0px)) 0}
.frame{position:relative; padding:clamp(36px, 5vw, 76px) clamp(24px, 5vw, 76px) clamp(32px, 4vw, 56px)}
.frame::before{content:""; position:absolute; inset:0; border:2px solid var(--ink); box-shadow:inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--ink); pointer-events:none}
.frame-top,.frame-foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; position:relative}
.cover-grid{display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:56px; align-items:center; margin-block:clamp(40px, 6vw, 80px)}
@media (max-width:860px){ .cover-grid{grid-template-columns:minmax(0,1fr); gap:24px} }
.cover h1{font-size:clamp(76px, 12vw, 172px); line-height:.9; letter-spacing:-.035em}
.cover .sub{margin-top:26px; font:400 clamp(21px, 2.2vw, 27px)/1.35 var(--sans)}
.cover .lede{margin-top:22px; max-width:24em}
.cover .in{animation:rise 1.65s var(--ease-settle) both}
.cover .sub.in{animation-delay:0.45s} .cover .lede.in{animation-delay:0.75s}
@keyframes rise{from{opacity:0; transform:translateY(var(--rise))}}
.kit{position:relative; aspect-ratio:300/360; width:100%; max-width:440px; justify-self:center}
.kit svg{position:absolute; inset:0; width:100%; height:100%; opacity:0; animation:kit 12s linear infinite}
.kit svg:nth-child(2){animation-delay:-9s} .kit svg:nth-child(3){animation-delay:-6s} .kit svg:nth-child(4){animation-delay:-3s}
@keyframes kit{0%{opacity:0} 3.75%{opacity:1} 25%{opacity:1} 28.75%{opacity:0} 100%{opacity:0}}
.kit .ink{stroke:var(--ink)}
.kit-cap{font-style:italic; font-size:17px; color:var(--soft); text-align:center; margin-top:8px}

section{border-top:0}
.statement h2{font-size:clamp(36px, 4.8vw, 60px); line-height:1.08; max-width:16em}
.statement .cols{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:56px; margin-top:48px}
@media (max-width:820px){ .statement .cols{grid-template-columns:minmax(0,1fr); gap:24px} }
.statement .cols p{font-size:19px; line-height:1.62; max-width:30em}

/* ask */
.ask-wrap{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:64px; align-items:start}
@media (max-width:900px){ .ask-wrap{grid-template-columns:minmax(0,1fr); gap:36px} }
.panel{background:var(--surface); border-radius:6px; box-shadow:0 0 0 1px var(--rule), 0 30px 60px -44px rgba(60,40,20,.45); overflow:hidden}
.panel-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-bottom:1px solid var(--rule); flex-wrap:wrap}
.panel-top .who{display:flex; align-items:center; gap:10px; font:400 15px/1 var(--sans)}
.panel-top .who svg{width:18px; height:17px; color:var(--ink)}
.chips{display:flex; flex-wrap:wrap; gap:8px; padding:18px 22px 0}
.chip{background:none; border:0; box-shadow:inset 0 0 0 1px var(--rule); border-radius:999px; padding:9px 14px; font:400 13.5px/1.2 var(--sans); color:var(--soft); cursor:pointer; text-align:left; transition:box-shadow var(--dur-quick) var(--ease-settle), color var(--dur-quick) var(--ease-settle), background var(--dur-quick) var(--ease-settle)}
.chip:hover{color:var(--ink); box-shadow:inset 0 0 0 1px var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--surface); box-shadow:none}
.q{margin:18px 22px 0; padding:15px 16px; border-radius:6px; box-shadow:inset 0 0 0 1px var(--rule); font:400 16px/1.4 var(--sans); color:var(--ink); min-height:52px}
.a{padding:22px 22px 26px; min-height:236px; display:grid; align-content:start; gap:16px}
.working{display:grid; gap:14px}
.working .who{display:flex; align-items:center; gap:10px; font:400 13px/1.3 var(--sans); color:var(--muted)}
.working svg.lines{width:100%; max-width:420px; height:64px; overflow:visible}
.working .ln{stroke:var(--ink); stroke-width:1.4; stroke-dasharray:7 6; fill:none; animation:crease 12s linear infinite}
.working .ln:nth-child(2){animation-delay:-4.05s; opacity:.75} .working .ln:nth-child(3){animation-delay:-7.95s; opacity:.55}
@keyframes crease{to{stroke-dashoffset:-52}}
.answer{font-size:20px; line-height:1.5; max-width:30em}
.srcs{display:flex; flex-wrap:wrap; gap:8px}
.src{font:500 11.5px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:7px 10px; border-radius:3px; background:var(--paper)}
.answer,.srcs{animation:settleIn var(--dur-settle) var(--ease-settle) both}
.srcs{animation-delay:180ms}
@keyframes settleIn{from{opacity:0; transform:translateY(var(--rise))}}

/* contents */
.contents{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:64px; align-items:start}
@media (max-width:900px){ .contents{grid-template-columns:minmax(0,1fr); gap:36px} }
.rows{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.rows > li{display:grid; grid-template-columns:minmax(0, 9em) minmax(0, 1fr); gap:28px; padding-block:22px; border-bottom:1px solid var(--rule); align-items:baseline}
.rows .t{font-size:24px; line-height:1.25; letter-spacing:-.01em}
.rows .d{font-size:18px; line-height:1.55; color:var(--soft)}
@media (max-width:600px){ .rows > li{grid-template-columns:minmax(0,1fr); gap:6px} }

/* yours */
.yours{background:var(--surface)}
.yours .big{font-size:clamp(40px, 5.6vw, 76px); line-height:1.02; letter-spacing:-.025em; max-width:12em}
.yours .turn{font-size:clamp(24px, 2.6vw, 32px); line-height:1.3; color:var(--soft); margin-top:28px}
.yours .prose{margin-top:40px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .cover .in,.drift,.answer,.srcs{animation:none !important}
  .kit svg{animation:none !important} .kit svg:nth-child(4){opacity:1}
  .btn .lbl,.btn .arr{transition-property:opacity}
  .btn:hover .lbl,.btn:focus-visible .lbl{transform:none}
}

/* buttons, softened: the label stays put, the arrow is always there and just leans in; a faint wash of the text colour rises on hover */
:root{--ease-soft:cubic-bezier(.33,1,.68,1)}
.btn{gap:10px; padding:15px 24px 15px 28px; isolation:isolate; transition:transform 675ms var(--ease-soft), box-shadow 1050ms var(--ease-soft)}
.btn.small{gap:8px; padding:11px 16px 11px 20px}
.btn::before{content:""; position:absolute; inset:0; border-radius:inherit; background:currentColor; opacity:0; z-index:-1; pointer-events:none; transition:opacity 1050ms var(--ease-soft)}
.btn:hover::before,.btn:focus-visible::before{opacity:.07}
.btn .lbl,.btn:hover .lbl,.btn:focus-visible .lbl,.btn.always .lbl{transform:none; transition:none}
.btn .arr,.btn.always .arr,.btn.small .arr{position:static; margin:0; width:13px; height:13px; opacity:.5; transform:none; transition:opacity 1050ms var(--ease-soft), transform 1350ms var(--ease-soft)}
.btn:hover .arr,.btn:focus-visible .arr,.btn.always:hover .arr,.hero .go .btn.always:hover .arr{opacity:1; transform:translateX(3px)}
.btn:active{transform:scale(.985); transition-duration:225ms}
.btn.line:hover{box-shadow:inset 0 0 0 1px rgba(252,249,242,.95)}
@media (prefers-reduced-motion: reduce){ .btn:hover .arr,.btn:focus-visible .arr,.btn.always:hover .arr{transform:none} .btn:active{transform:none} }

/* mobile pass (all pages) */
@media (max-width:640px){
  .btn{white-space:normal; text-align:left; line-height:1.25}
  h2{font-size:clamp(34px, 9.4vw, 44px)}
  .lede{font-size:19px}
  .prose p{font-size:18px}
  .close h2{font-size:clamp(40px, 11vw, 52px)}
  .close .sub{font-size:19px}
  footer .links{gap:10px 20px}
}

/* copy email: the plane leaves the logo, lights the address, and flies off */
footer .brand img.flying{-webkit-mask-image:linear-gradient(90deg, transparent 0 31%, #000 31%); mask-image:linear-gradient(90deg, transparent 0 31%, #000 31%)}
#mail{transition:filter 900ms ease}
#mail.glow{background:linear-gradient(90deg, #b98f6e, #c99a8a, #a88fae, #8ea3b8, #97a888, #c2a479, #b98f6e); background-size:400% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:mailglow 2.7s cubic-bezier(.45,0,.55,1) forwards; filter:drop-shadow(0 0 8px rgba(201,154,138,.45))}
@keyframes mailglow{from{background-position:0% 50%} to{background-position:100% 50%}}

@media (max-width:640px){ :root{ --hero-vh:726px; } }