/* Jennifer Allen. Printed-portfolio palette (charcoal #58585B, pale blue #92C2C9, Helvetica Neue), no outlines, blue used as space rather than trim. */
:root{
  --paper:#FFFFFF; --ink:#58585B; --ink-strong:#3F3F42; --muted:#6A6A6E;
  --sky:#92C2C9; --sky-wash:#E6F1F3; --sky-mist:#F3F8F9; --sky-deep:#7FA9B7; --rule:#D9DCDD; --bar-bg:#E3E8EA;
  --hero-top:#9DC3CF; --hero-mid:#92BACA; --hero-low:#82AABA;
  --sans:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 1px 2px rgba(63,63,66,.06), 0 12px 32px -12px rgba(63,63,66,.18);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip}
a{color:inherit; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px}
a:hover{color:var(--ink-strong)}
:focus-visible{outline:2px solid var(--ink-strong); outline-offset:3px}
h1,h2,h3{text-wrap:balance; color:var(--ink-strong)}

.wrap{max-width:1200px; margin:0 auto; padding-inline:clamp(16px,4vw,44px)}
.frame{background:var(--paper); box-shadow:var(--shadow)}

/* Header: transparent over the hero, condenses into a glass bar on scroll, hides on scroll down */
header.site{position:sticky; top:0; z-index:30; transition:transform .45s var(--ease)}
header.site .headbar{display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px; transition:height .4s var(--ease)}
header.site::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.78); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); box-shadow:0 1px 0 rgba(63,63,66,.07), 0 10px 30px -18px rgba(63,63,66,.35); transition:opacity .4s ease}
header.site.over-hero:not(.scrolled)::before, header.site.menu-open::before{opacity:0}
header.site.scrolled .headbar{height:58px}
header.site.tucked{transform:translateY(-100%)}
.progress{position:absolute; left:0; right:0; bottom:0; height:2px; pointer-events:none}
.progress i{display:block; height:100%; background:linear-gradient(90deg, var(--sky), var(--ink-strong)); transform:scaleX(0); transform-origin:left}

.mark{display:inline-flex; align-items:center; gap:12px; text-decoration:none; font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-strong); white-space:nowrap}
.mark .mono{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--ink-strong); color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; transition:transform .5s var(--ease), background-color .3s ease}
.mark:hover .mono{transform:rotate(-12deg) scale(1.06); background:#2E2E30}
.mark .full{transition:letter-spacing .4s var(--ease)}
.mark:hover .full{letter-spacing:.24em}

nav.primary{position:relative; display:flex; gap:2px; align-items:center; font-size:14px; padding:4px; border-radius:999px; background:rgba(255,255,255,.32); box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); transition:background-color .4s ease, box-shadow .4s ease}
header.site.scrolled nav.primary, header.site:not(.over-hero) nav.primary{background:rgba(63,63,66,.05); box-shadow:none}
nav.primary a{position:relative; z-index:1; padding:8px 16px; border-radius:999px; text-decoration:none; color:var(--ink-strong); transition:color .3s ease}
nav.primary a[aria-current="true"]{color:#fff}
nav.primary .pill{position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:0; border-radius:999px; background:#fff; box-shadow:0 2px 10px -4px rgba(63,63,66,.35); opacity:0; transition:transform .45s var(--ease), width .45s var(--ease), opacity .3s ease, background-color .3s ease}
nav.primary .pill.on{opacity:1}
nav.primary .pill.active{background:var(--ink-strong)}
.head-actions{display:flex; align-items:center; gap:10px}

/* Lock opens on hover */
.lock .shackle{transition:transform .4s var(--ease); transform-origin:10.5px 7px}
.lock-btn:hover .lock .shackle, .mobile-menu .btn:hover .lock .shackle{transform:translateY(-1.5px) rotate(18deg)}

/* Mobile menu */
.menu-btn{display:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--ink-strong); color:#fff; cursor:pointer; place-items:center; transition:transform .3s var(--ease)}
.menu-btn:hover{transform:scale(1.06)}
.bars-icon{position:relative; display:block; width:18px; height:10px}
.bars-icon i{position:absolute; left:0; right:0; height:1.5px; background:currentColor; border-radius:2px; transition:transform .4s var(--ease), top .4s var(--ease)}
.bars-icon i:first-child{top:0}
.bars-icon i:last-child{top:8.5px}
.menu-btn[aria-expanded="true"] .bars-icon i:first-child{top:4.25px; transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars-icon i:last-child{top:4.25px; transform:rotate(-45deg)}
.mobile-menu{position:fixed; inset:0; z-index:-2; background:linear-gradient(180deg, var(--hero-top), var(--hero-low)); padding:96px clamp(16px,6vw,44px) 40px; overflow-y:auto}
.mobile-menu nav{display:flex; flex-direction:column; gap:4px}
.mobile-menu nav a:not(.btn){font-size:clamp(34px,10vw,52px); font-weight:300; text-transform:uppercase; letter-spacing:.01em; line-height:1.2; text-decoration:none; color:var(--ink-strong); padding:4px 0}
.mobile-menu nav .btn{align-self:flex-start; margin-top:28px}
.mobile-menu.open nav > *{animation:fade-up .6s var(--ease) both; animation-delay:calc(var(--i) * 55ms + 60ms)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
body.menu-open{overflow:hidden}
@media (max-width:860px){
  nav.primary{display:none}
  .menu-btn{display:grid}
}
@media (max-width:480px){
  .mark .full{display:none}
  .lock-btn .label{display:none}
  .lock-btn{padding:12px 14px}
}

.btn{display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:14px; font-weight:500; letter-spacing:.02em; padding:12px 20px; border:0; background:var(--ink-strong); color:#fff; cursor:pointer; text-decoration:none; border-radius:0; transition:background-color .25s ease, color .25s ease, transform .25s var(--ease)}
.btn:hover{background:#2E2E30; color:#fff}
.btn .arrow{display:inline-block; transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn.line{background:rgba(255,255,255,.55); color:var(--ink-strong); box-shadow:inset 0 0 0 1px rgba(63,63,66,.35)}
.btn.line:hover{background:#fff; color:var(--ink-strong)}
.btn svg{width:14px; height:14px}

/* Hero: full-bleed blue matched to the portrait backdrop, Jenny large on the right */
.hero{position:relative; margin-top:-72px; padding-top:72px; min-height:min(100svh, 940px); display:flex; align-items:center; overflow:hidden; isolation:isolate}
.hero-bg{position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg, var(--hero-top) 0%, var(--hero-mid) 55%, var(--hero-low) 100%)}
.hero-bg .glow{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55}
.hero-bg .g1{width:46vw; height:46vw; left:-10vw; top:-14vw; background:#C7DFE5; animation:drift 22s ease-in-out infinite alternate}
.hero-bg .g2{width:34vw; height:34vw; left:28vw; bottom:-18vw; background:#6F9AAA; opacity:.35; animation:drift 28s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(6vw,4vw) scale(1.08)}}
.portrait{position:absolute; right:0; bottom:0; top:40px; width:min(58vw, 820px); margin:0; z-index:-1; animation:portrait-in 1.6s var(--ease) both}
.portrait img{display:block; width:100%; height:100%; object-fit:cover; object-position:center 12%;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 26%); mask-image:linear-gradient(to right, transparent 0, #000 26%);
  will-change:transform}
@keyframes portrait-in{from{opacity:0; transform:scale(1.06) translateY(16px)}}
.hero-inner{width:100%}
.hero-text{max-width:none; padding-block:clamp(48px,8vh,96px)}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-strong); margin:0 0 22px}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--ink-strong); box-shadow:0 0 0 0 rgba(63,63,66,.4); animation:pulse 2.6s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(63,63,66,0)} 100%{box-shadow:0 0 0 0 rgba(63,63,66,0)}}
.hero h1{font-weight:300; font-size:clamp(56px,10.5vw,148px); line-height:.9; letter-spacing:-.01em; text-transform:uppercase; margin:0 0 28px; color:var(--ink-strong)}
.hero h1 .line{display:block; overflow:hidden; padding-bottom:.04em}
.hero h1 .line > span{display:block; animation:rise 1.1s var(--ease) both; animation-delay:calc(var(--d) * 110ms + 150ms)}
@keyframes rise{from{transform:translateY(105%)}}
.load{animation:fade-up .9s var(--ease) both; animation-delay:calc(var(--d) * 110ms + 150ms)}
@keyframes fade-up{from{opacity:0; transform:translateY(18px)}}
.hero .role{font-size:clamp(14px,1.3vw,16px); color:var(--ink-strong); margin:0 0 18px; max-width:44ch}
.hero .lede{font-size:clamp(19px,2vw,24px); line-height:1.45; color:var(--ink-strong); max-width:30ch; margin:0 0 34px; font-weight:300}
.hero .actions{display:flex; flex-wrap:wrap; gap:10px}
.scroll-cue{position:absolute; left:50%; bottom:24px; width:22px; height:36px; margin-left:-11px; border-radius:12px; box-shadow:inset 0 0 0 1.5px rgba(63,63,66,.55)}
.scroll-cue span{position:absolute; left:50%; top:8px; width:3px; height:7px; margin-left:-1.5px; border-radius:2px; background:var(--ink-strong); animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0; transform:translateY(-3px)} 40%{opacity:1} 80%,100%{opacity:0; transform:translateY(10px)}}
@media (max-width:820px){
  .hero{flex-direction:column; align-items:stretch; min-height:0}
  .portrait{position:relative; top:auto; width:100%; aspect-ratio:1/1; max-height:70svh; order:-1}
  .portrait img{-webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 100%); mask-image:linear-gradient(to bottom, #000 80%, transparent 100%); object-position:center 8%}
  .hero-text{padding-block:0 72px; margin-top:-6vw; position:relative}
  .scroll-cue{display:none}
}

/* Proof strip: white card lifted over the hero's edge */
.proof-wrap{position:relative; z-index:2; margin-top:-56px}
.proof{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:var(--paper); box-shadow:var(--shadow)}
.proof div{padding:26px 26px 24px; position:relative}
.proof div + div::before{content:""; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:var(--rule)}
.proof strong{display:block; font-size:clamp(26px,2.8vw,36px); font-weight:300; color:var(--ink-strong); font-variant-numeric:tabular-nums; line-height:1.1; margin-bottom:4px}
.proof span{font-size:13px; color:var(--muted)}
@media (max-width:820px){
  .proof-wrap{margin-top:-28px}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof div:nth-child(3)::before{display:none}
  .proof div:nth-child(-n+2){box-shadow:inset 0 -1px 0 var(--rule)}
}

/* Sections */
section.block{padding-block:clamp(72px,9vw,120px)}
section h2{font-weight:700; font-size:clamp(22px,2.2vw,28px); letter-spacing:.05em; text-transform:uppercase; margin:0 0 14px}
.intro{color:var(--muted); max-width:62ch; margin:0 0 44px; font-size:17px}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:56px}
.split > *{min-width:0}
@media (max-width:820px){ .split{grid-template-columns:1fr; gap:20px} }
.about-body{font-size:clamp(18px,1.8vw,22px); line-height:1.6; max-width:58ch; font-weight:300; color:var(--ink-strong)}
.about-body p{margin:0 0 1em}
.about-body p:first-child{font-size:1.2em; line-height:1.4}

/* Sectors */
#sectors{padding-top:0}
.sectors{border-top:1px solid var(--rule)}
.sector{position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.7fr) auto; gap:24px; padding:24px 0; border-bottom:1px solid var(--rule); align-items:baseline; transition:padding-left .45s var(--ease)}
.sector::before{content:""; position:absolute; left:0; top:-1px; height:2px; width:100%; background:var(--sky); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease)}
.sector:hover{padding-left:14px}
.sector:hover::before{transform:scaleX(1)}
.sector h3{margin:0; font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.sector p{margin:0; color:var(--muted)}
.sector .scale{font-size:13px; color:var(--ink-strong); white-space:nowrap; background:var(--sky-wash); padding:3px 12px; transition:background-color .3s ease}
.sector:hover .scale{background:var(--sky)}
@media (max-width:700px){ .sector{grid-template-columns:1fr; gap:6px} .sector .scale{justify-self:start} }

/* Project wall */
.wall-band{background:linear-gradient(180deg, var(--sky-mist) 0%, var(--sky-wash) 100%)}
.clients{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px}
.client{position:relative; display:flex; flex-direction:column; gap:14px; padding:18px; background:var(--paper); font:inherit; color:inherit; text-align:left; text-decoration:none; box-shadow:0 1px 2px rgba(63,63,66,.05); transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.client:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.client .logo{display:flex; align-items:center; justify-content:center; height:96px; padding:0 12px; text-align:center; font-weight:700; font-size:14px; letter-spacing:.07em; text-transform:uppercase; line-height:1.25; color:var(--ink-strong); background:var(--sky-mist); transition:background-color .4s ease}
.client:hover .logo{background:var(--sky-wash)}
.client .logo img{max-width:100%; max-height:56px; width:auto; height:auto; display:block}
.client .name{font-size:14px; color:var(--ink-strong); line-height:1.35}
.client .meta{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:var(--muted); padding-top:10px; box-shadow:inset 0 1px 0 var(--rule)}
.client .meta svg{width:13px; height:13px; flex:none; transition:transform .4s var(--ease)}
.client:hover .meta svg{transform:translateY(-2px) rotate(-8deg)}
.client[data-plain]{background:rgba(255,255,255,.6); box-shadow:none}
.client[data-plain]:hover{transform:none; box-shadow:none}
.wall-note{font-size:13px; color:var(--muted); margin:24px 0 0}

/* Recognition: solid pale blue band */
.band-sky{background:var(--sky)}
.band-sky .intro{color:var(--ink-strong)}
.awards{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:36px; counter-reset:award}
.awards li{position:relative; padding-top:18px; counter-increment:award}
.awards li::before{content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:rgba(255,255,255,.75)}
.awards li::after{content:"0" counter(award); position:absolute; right:0; top:14px; font-size:13px; letter-spacing:.1em; color:var(--ink-strong); opacity:.6}
.awards strong{display:block; font-weight:700; font-size:17px; color:var(--ink-strong); margin:0 36px 6px 0}
.awards span{color:var(--ink-strong); font-size:15px}

/* Skills, echoing the printed proficiency bars */
.skillgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px}
@media (max-width:760px){ .skillgrid{grid-template-columns:1fr} }
.skillgrid h3{font-size:15px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin:0 0 14px; display:flex; justify-content:space-between; align-items:baseline}
.skillgrid h3 small{font-size:11px; font-weight:400; letter-spacing:.08em; color:var(--muted)}
.bars{list-style:none; padding:0; margin:0}
.bars li{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:16px; align-items:center; padding:7px 0; font-size:14px}
.bar{height:6px; background:var(--bar-bg); border-radius:3px; overflow:hidden}
.bar i{display:block; height:100%; background:linear-gradient(90deg, var(--ink) 0%, var(--ink-strong) 100%); border-radius:3px; transform-origin:left}
.exploring{margin-top:52px; padding:26px 28px; background:var(--sky-wash); max-width:76ch; position:relative; overflow:hidden}
.exploring::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--sky)}
.exploring::after{content:""; position:absolute; right:-60px; top:-60px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(146,194,201,.55), transparent 70%); animation:drift 14s ease-in-out infinite alternate}
.exploring h3{margin:0 0 6px; font-size:15px; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.exploring p{margin:0; position:relative}

/* Experience timeline */
#experience{padding-top:0}
.timeline{list-style:none; padding:0; margin:0; position:relative}
.timeline li{position:relative; display:grid; grid-template-columns:160px minmax(0,1fr); gap:28px; padding:20px 0 20px 28px; border-bottom:1px solid var(--rule)}
.timeline li::before{content:""; position:absolute; left:0; top:28px; width:9px; height:9px; border-radius:50%; background:var(--sky); transition:transform .35s var(--ease), background-color .35s ease}
.timeline li:hover::before{transform:scale(1.5); background:var(--ink-strong)}
.timeline .when{color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums}
.timeline strong{font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:14px; color:var(--ink-strong)}
.timeline p{margin:4px 0 0; color:var(--muted); font-size:15px}
@media (max-width:600px){ .timeline li{grid-template-columns:1fr; gap:4px} }

/* Contact + footer: charcoal band */
.band-ink{background:var(--ink-strong); color:#E9ECED}
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:40px; align-items:end}
.contact-grid > *{min-width:0}
@media (max-width:760px){ .contact-grid{grid-template-columns:1fr; gap:24px} }
.contact h2{font-size:clamp(48px,8vw,112px); font-weight:300; letter-spacing:-.01em; line-height:.92; margin:0; color:#fff}
.contact p{color:#D4D8DA}
.contact .email{font-size:clamp(20px,2.6vw,30px); color:#fff; word-break:break-word; text-decoration-color:var(--sky)}
.contact a{color:#fff}
.contact .btn.line{background:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.contact .btn.line:hover{background:#fff; color:var(--ink-strong)}
.copyrow{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:8px 0 18px}
footer{padding-block:28px 44px; font-size:13px; color:#BFC4C6}
footer.band-ink{box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
footer:not(.band-ink){color:var(--muted)}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}

/* Scroll reveal: only hidden when scripting is available, so content never disappears without JS */
@media (scripting: enabled){
  [data-reveal], [data-stagger] > *{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--i,0) * 80ms)}
  [data-reveal].in, [data-stagger].in > *{opacity:1; transform:none}
  .bar i{transform:scaleX(0); transition:transform 1.4s var(--ease); transition-delay:calc(var(--i,0) * 60ms + 200ms)}
  .in .bar i{transform:scaleX(1)}
  /* Safety net if the script never runs */
  html:not(.js) [data-reveal], html:not(.js) [data-stagger] > *{animation:fade-up .01s 2s forwards}
  html:not(.js) .bar i{transform:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  [data-reveal], [data-stagger] > *{opacity:1 !important; transform:none !important}
  .bar i{transform:none !important}
}

/* Private case photography */
.photos figure{margin:0}
.photos img{display:block; width:100%; height:auto; background:var(--sky-wash)}
.photos figcaption{font-size:12px; color:var(--muted); margin-top:6px}
.case{scroll-margin-top:80px}

/* Private portfolio */
.private-band{background:linear-gradient(180deg, var(--sky-mist) 0%, var(--sky-wash) 100%)}
.private-head{display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap; margin-bottom:36px}
.case{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:44px; padding:clamp(24px,4vw,48px); margin-bottom:28px}
.case > *{min-width:0}
.case h3{font-weight:300; font-size:clamp(30px,3.6vw,46px); line-height:1.05; text-transform:uppercase; margin:0 0 6px; color:var(--ink-strong)}
.case .where{color:var(--muted); margin:0 0 20px; font-size:14px}
.facts{display:grid; grid-template-columns:auto 1fr; gap:4px 18px; font-size:14px; margin:0 0 20px}
.facts dt{font-weight:700; color:var(--ink-strong)}
.facts dd{margin:0}
.case .summary{font-size:16px; margin:0 0 16px}
.case ul.did{margin:0; padding-left:18px; color:var(--muted); font-size:14px}
.case ul.did li{margin:3px 0}
.case .award{margin-top:16px; font-size:14px; color:var(--ink-strong); border-left:4px solid var(--sky); padding-left:12px}
.photos{display:grid; gap:12px; align-content:start}
.photo{aspect-ratio:4/3; max-width:100%; display:flex; align-items:flex-end; padding:12px; font-size:12px; color:var(--muted);
  background:repeating-linear-gradient(135deg, var(--sky-wash) 0 12px, var(--sky-mist) 12px 24px)}
.photo.wide{aspect-ratio:16/9}
@media (max-width:820px){ .case{grid-template-columns:1fr; gap:22px} .photos{order:-1} }

/* Login page (served by the edge function) */
.login-wrap{min-height:calc(100vh - 72px); display:grid; place-items:center; padding:32px 16px; background:linear-gradient(180deg, var(--hero-top), var(--hero-low))}
.gate{background:var(--paper); box-shadow:var(--shadow); padding:34px; width:min(440px,100%); animation:fade-up .7s var(--ease) both}
.gate h1{font-weight:700; font-size:20px; letter-spacing:.04em; text-transform:uppercase; margin:0 0 8px; color:var(--ink-strong)}
.gate p{color:var(--muted); margin:0 0 20px; font-size:15px}
.gate label{display:block; font-size:13px; font-weight:700; margin-bottom:6px}
.gate input{width:100%; font:inherit; font-size:16px; padding:12px 14px; border:0; border-radius:0; background:var(--sky-mist); box-shadow:inset 0 -2px 0 var(--ink); color:var(--ink-strong); transition:box-shadow .25s ease}
.gate input:focus{outline:none; box-shadow:inset 0 -2px 0 var(--ink-strong), 0 0 0 3px var(--sky-wash)}
.gate .err{color:#A3402E; font-size:14px; min-height:1.4em; margin:8px 0 12px}
.gate .row{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.gate .hint{font-size:13px; margin:16px 0 0; padding-top:12px; border-top:1px solid var(--rule)}