/* Young family site skin: Aroostook night sky. Loaded on every page. */
@font-face{font-family:"Bricolage";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{--night:#070B1A;--deep:#0F1630;--edge:#262F5C;--ink:#F3F0E8;--green:#5CF2C0;--violet:#9B8CFF;--gold:#FFC857;--ease:cubic-bezier(.2,.7,.2,1)}
html{background:var(--night);scroll-padding-top:84px}
body{background:transparent!important;overflow-x:hidden}
#page-root>div{background:transparent!important}
::selection{background:var(--green);color:#06121a}
@view-transition{navigation:auto}
::view-transition-old(root){animation:fx-out .22s ease both}
::view-transition-new(root){animation:fx-in .38s var(--ease) both}
@keyframes fx-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes fx-in{from{opacity:0;transform:translateY(14px)}}

/* ---------- sky ---------- */
.fx-sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(120% 80% at 50% 110%,#101a44 0%,#070B1A 55%,#04060f 100%)}
.fx-stars{position:absolute;inset:-10% 0 0 0;opacity:.7;background-image:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 31% 62%,#cfe 50%,transparent 51%),radial-gradient(1.5px 1.5px at 54% 27%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 73% 71%,#dde 50%,transparent 51%),radial-gradient(1px 1px at 88% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 6% 83%,#ccf 50%,transparent 51%),radial-gradient(1.5px 1.5px at 44% 91%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 66% 44%,#fff 50%,transparent 51%);background-size:420px 380px;animation:fx-twinkle 7s ease-in-out infinite alternate}
@keyframes fx-twinkle{from{opacity:.35}to{opacity:.8}}
.fx-curtain{position:absolute;top:-25%;height:105%;width:46vmax;border-radius:50%;filter:blur(46px);mix-blend-mode:screen;opacity:.7;will-change:transform,opacity;transform-origin:50% 0}
.fx-c1{left:-8%;background:linear-gradient(to bottom,transparent 5%,rgba(92,242,192,.0) 20%,rgba(92,242,192,.8) 55%,rgba(155,140,255,.55) 80%,transparent);animation:fx-sway1 19s ease-in-out infinite alternate}
.fx-c2{left:30%;width:38vmax;background:linear-gradient(to bottom,transparent 10%,rgba(155,140,255,.75) 50%,rgba(92,242,192,.5) 78%,transparent);animation:fx-sway2 25s ease-in-out infinite alternate}
.fx-c3{right:-12%;background:linear-gradient(to bottom,transparent 8%,rgba(92,242,192,.65) 48%,rgba(255,200,87,.3) 82%,transparent);animation:fx-sway3 31s ease-in-out infinite alternate}
@keyframes fx-sway1{0%{transform:translateX(-6%) skewX(-14deg) scaleY(.9);opacity:.45}50%{opacity:.85}100%{transform:translateX(16%) skewX(10deg) scaleY(1.08);opacity:.6}}
@keyframes fx-sway2{0%{transform:translateX(10%) skewX(12deg) scaleY(1.05);opacity:.6}60%{opacity:.35}100%{transform:translateX(-14%) skewX(-16deg) scaleY(.88);opacity:.75}}
@keyframes fx-sway3{0%{transform:translateX(8%) skewX(-8deg);opacity:.35}40%{opacity:.75}100%{transform:translateX(-18%) skewX(14deg) scaleY(1.1);opacity:.5}}
.fx-veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,11,26,0) 0%,rgba(7,11,26,.5) 100%)}
.fx-name{position:absolute;left:0;right:0;bottom:-.14em;text-align:center;white-space:nowrap;font-family:"Bricolage",Anton,Impact,sans-serif;font-weight:800;font-stretch:75%;font-size:27vw;line-height:.8;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px rgba(243,240,232,.2);pointer-events:none;user-select:none}
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--green),var(--violet) 55%,var(--gold));pointer-events:none}
@supports (animation-timeline:scroll()){
  .fx-progress{animation:fx-grow linear both;animation-timeline:scroll(root)}
  .fx-sky .fx-curtain{}
  .fx-dim{animation:fx-dim linear both;animation-timeline:scroll(root);animation-range:0 120vh}
  .fx-name{animation:fx-sink linear both;animation-timeline:scroll(root);animation-range:0 70vh}
}
@keyframes fx-grow{to{transform:scaleX(1)}}
@keyframes fx-dim{to{opacity:.42}}
@keyframes fx-sink{to{opacity:0;transform:translateY(18%) scale(1.06)}}

/* ---------- type ---------- */
#page-root h1,#page-root h2[style*="Anton"],#page-root h3[style*="Anton"],.yf-head h1,.yf-brand,#page-root a[style*="Anton"]{font-family:"Bricolage",Anton,Impact,sans-serif!important;font-weight:800!important;font-stretch:75%;letter-spacing:-.012em!important}
#page-root h1{line-height:.9!important;text-wrap:balance}
#page-root button[style*="Anton"],#page-root span[style*="Anton"],#page-root p[style*="Anton"],#page-root div[style*="Anton"]{font-family:"Bricolage",Anton,Impact,sans-serif!important;font-weight:700;font-stretch:80%}
#page-root p{text-wrap:pretty}

/* ---------- header ---------- */
#page-root header:has(> div > nav),#page-root div:has(> nav[aria-label="Site"]),.yf-nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);background:rgba(7,11,26,.62)!important;border-bottom-color:rgba(120,135,220,.22)!important}
#page-root div:has(> nav[aria-label="Site"]),.yf-nav{margin-inline:calc(-1*clamp(16px,3vw,40px));padding-inline:clamp(16px,3vw,40px)!important}
#page-root header nav a,nav[aria-label="Site"] a{position:relative;transition:color .2s}
#page-root header nav a::after,nav[aria-label="Site"] a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--green),var(--violet));transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
#page-root header nav a:hover::after,nav[aria-label="Site"] a:hover::after,nav[aria-label="Site"] a[aria-current]::after{transform:scaleX(1)}

/* ---------- surfaces ---------- */
#page-root section[style*="background: #0A1024"]{background:rgba(10,16,36,.55)!important;border-color:rgba(120,135,220,.18)!important}
#page-root [style*="border-radius: 8px"]{border-radius:18px!important}
#page-root [style*="border-radius: 4px"]{border-radius:999px!important}
#page-root article,#page-root [style*="background: #0F1630"]:not(button):not(nav){background-color:rgba(15,22,48,.74)!important}
#page-root article{position:relative;transition:transform .35s var(--ease),border-color .3s,box-shadow .35s}
#page-root article::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(92,242,192,.16),rgba(155,140,255,.08) 40%,transparent 65%)}
#page-root article>*{position:relative}
@media (hover:hover){
  #page-root article:hover{border-color:rgba(92,242,192,.45)!important;box-shadow:0 18px 50px -24px rgba(92,242,192,.35)}
  #page-root article:hover::before{opacity:1}
  #page-root #stories article:hover,#page-root #famous article:not(#salem):hover{transform:translateY(-4px)}
  #page-root #stories article:hover img{transform:scale(1.05)}
}
#page-root #stories figure{overflow:hidden}
#page-root #stories img{transition:transform .8s var(--ease)}
#page-root img{border-radius:10px}
#page-root #stories figure img{border-radius:0}

/* selected person: slow turning aurora edge */
#page-root article[style*="border: 2px solid"]{border-color:transparent!important;background:linear-gradient(rgba(13,19,44,.96),rgba(13,19,44,.96)) padding-box,conic-gradient(from var(--ang),var(--green),var(--violet),var(--gold),var(--green)) border-box!important;animation:fx-turn 9s linear infinite;box-shadow:0 30px 80px -40px rgba(155,140,255,.5)}
@keyframes fx-turn{to{--ang:360deg}}

/* ---------- controls ---------- */
#page-root button,#page-root a[style*="min-height"]{transition:transform .18s var(--ease),background-color .2s,border-color .2s,color .2s,box-shadow .25s;-webkit-tap-highlight-color:transparent}
#page-root button:active,#page-root a[style*="min-height"]:active{transform:scale(.96)}
#page-root a[style*="background: #FFC857"],#page-root button[style*="background: #FFC857"]{background:linear-gradient(120deg,#FFC857,#FFE09A 45%,#FFC857 90%)!important;background-size:220% 100%!important;box-shadow:0 8px 28px -12px rgba(255,200,87,.7)}
@media (hover:hover){
  #page-root a[style*="background: #FFC857"]:hover,#page-root button[style*="background: #FFC857"]:hover{background-position:100% 0!important;transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(255,200,87,.85);color:#070B1A}
  #page-root button[style*="background: transparent"]:hover,#page-root a[style*="border: 1px solid #A3ADD6"]:hover{border-color:var(--green)!important;color:var(--green)!important;box-shadow:inset 0 0 0 1px rgba(92,242,192,.35)}
}
#page-root input{transition:border-color .2s,box-shadow .2s}
#page-root input:focus{outline:none;border-color:var(--green)!important;box-shadow:0 0 0 4px rgba(92,242,192,.18)}
button:focus-visible,a:focus-visible{outline:3px solid var(--green)!important;outline-offset:3px}

/* ---------- scroll driven moments (home) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    #page-root section h2[style*="Anton"]{animation:fx-head linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    #page-root #stories article,#page-root #famous article,#page-root #service [style*="border-radius: 8px"]{animation:fx-card linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    #page-root #stories figure img{animation:fx-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
@keyframes fx-head{from{opacity:0;font-stretch:100%;letter-spacing:.08em;transform:translateY(40px)}to{opacity:1}}
@keyframes fx-card{from{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1}}
@keyframes fx-drift{from{object-position:50% 35%;scale:1.12}to{scale:1}}

/* ---------- arrival, once ---------- */
@media (prefers-reduced-motion:no-preference){
  .fx-intro #page-root #top h1{animation:fx-h1 1.1s var(--ease) both}
  .fx-intro #page-root #top>div:first-child>*:not(h1){animation:fx-up .9s var(--ease) both;animation-delay:.35s}
  .fx-intro #page-root #top>div:last-child{animation:fx-up 1s var(--ease) both;animation-delay:.5s}
  .fx-intro #page-root #top>div:last-child button{animation:fx-up .7s var(--ease) both}
  .fx-intro #page-root #top>div:last-child button:nth-of-type(1){animation-delay:.6s}.fx-intro #page-root #top>div:last-child button:nth-of-type(2){animation-delay:.68s}.fx-intro #page-root #top>div:last-child button:nth-of-type(3){animation-delay:.76s}.fx-intro #page-root #top>div:last-child button:nth-of-type(4){animation-delay:.84s}.fx-intro #page-root #top>div:last-child button:nth-of-type(5){animation-delay:.92s}.fx-intro #page-root #top>div:last-child button:nth-of-type(6){animation-delay:1s}
  .fx-intro .fx-sky{animation:fx-dawn 2.2s ease both}
  .fx-intro #page-root header[style*="flex-end"] h1,.fx-intro .yf-head h1{animation:fx-h1 .9s var(--ease) both}
}
@keyframes fx-h1{from{opacity:0;font-stretch:100%;letter-spacing:.12em;transform:translateY(30px);filter:blur(10px)}to{opacity:1;filter:blur(0)}}
@keyframes fx-up{from{opacity:0;transform:translateY(22px)}to{opacity:1}}
@keyframes fx-dawn{from{opacity:0}}

/* stat strip numbers */
#page-root #top + section [style*="Anton"]{background:linear-gradient(100deg,var(--green),var(--violet) 60%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* ---------- phones ---------- */
@media (max-width:760px){
  html{scroll-padding-top:110px}
  #page-root header nav,nav[aria-label="Site"],.yf-nav nav{flex-wrap:nowrap!important;overflow-x:auto;width:100%;gap:0 20px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:28px}
  #page-root header nav::-webkit-scrollbar,nav[aria-label="Site"]::-webkit-scrollbar,.yf-nav nav::-webkit-scrollbar{display:none}
  #page-root header nav a,nav[aria-label="Site"] a,.yf-nav nav a{white-space:nowrap;flex:none}
  #page-root header>div,#page-root div:has(> nav[aria-label="Site"]),.yf-nav{padding-top:10px!important;padding-bottom:2px!important;gap:0 20px!important}
  #page-root #top h1{font-size:clamp(52px,17vw,96px)!important}
  #page-root #timeline>div:nth-of-type(2){flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:-18px;padding-inline:18px;padding-bottom:6px;scrollbar-width:none}
  #page-root #timeline>div:nth-of-type(2)::-webkit-scrollbar{display:none}
  #page-root #timeline>div:nth-of-type(2) button{flex:none;scroll-snap-align:center}
  #page-root #top + section>div{grid-template-columns:1fr 1fr!important;gap:22px 16px!important}
  .fx-curtain{filter:blur(34px);width:70vmax}
  .fx-name{font-size:38vw;bottom:-.1em}
}
@media (prefers-reduced-motion:reduce){
  .fx-curtain,.fx-stars,#page-root article[style*="border: 2px solid"]{animation:none!important}
  html{scroll-behavior:auto!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}