/* Homepage experiment: pattern under glass, never printed over reading content. */
.styled-page main {
  background-color: var(--alabaster);
  background-image: url('/assets/home-pattern.svg'),radial-gradient(rgba(137,144,122,.13) .65px,transparent .85px);
  background-size: 360px 360px,6px 6px;
}
.styled-page .section.mushroom { background: rgba(216,206,194,.22); }
.styled-page :is(.section,.page-intro) .glass-panel {
  position: relative;
  isolation: isolate;
  padding: clamp(24px,3.2vw,46px);
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 4px;
}
.styled-page :is(.section,.page-intro) .glass-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; border-radius: inherit;
  background: var(--alabaster);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 16px 44px rgba(64,59,55,.07),inset 0 1px 0 rgba(255,255,255,.45);
  opacity: 1;
}
.styled-page :is(.section,.page-intro) .glass-panel::after { content: none; }
@supports ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))) {
  .styled-page :is(.section,.page-intro) .glass-panel::before {
    background: rgba(244,237,230,.66);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    opacity: var(--glass-strength,.8);
  }
}
.styled-page .hero-intro { background: rgba(244,237,230,.8); }
.styled-page .headline-phrase { display: inline-block; }
.styled-page .home-hero > img { position:absolute; inset:0; }
.styled-page .home-hero > .hero-incoming { opacity:0; }
.styled-page .hero-copy { z-index:3; }
.styled-page .hero-copy::before { opacity:var(--hero-arrival,1); }
.styled-page .text-link { position:relative; text-decoration:none; padding-bottom:4px; }
.styled-page .text-link::after { content:""; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--clay); transform:scaleX(var(--line-scale,.24)); transform-origin:left; transition:transform 220ms ease; }
.styled-page:not(.gsap-motion) .text-link:hover::after,.styled-page:not(.gsap-motion) .text-link:focus-visible::after { transform:scaleX(1); }
.styled-page .site-header nav a { border-bottom:0; text-decoration:none; }
.styled-page .site-header nav a::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--clay); transform-origin:left; transform:scaleX(var(--line-scale,0));
}
.styled-page .site-header nav a[aria-current] { --line-scale:1; }
.styled-page:not(.gsap-motion) .site-header nav a:hover::after,.styled-page:not(.gsap-motion) .site-header nav a:focus-visible::after { transform:scaleX(1); }
.styled-page footer a:not(.footer-name):not(.footer-credit a) { text-decoration:underline; text-decoration-color:transparent; text-underline-offset:5px; transition:text-decoration-color 220ms ease; }
.styled-page footer a:hover,.styled-page footer a:focus-visible { text-decoration-color:currentColor; }
.styled-page .motion-pending { opacity:0; transform:none; }
.styled-page .motion-pending:focus-within { opacity:1!important; transform:none!important; }
.styled-page .skip { z-index:100; }
@media(max-width:760px) {
  .styled-page :is(.section,.page-intro) .glass-panel { padding:25px 23px; }
  .styled-page .split { gap:28px; }
  .styled-page .text-link::after { transition:none; }
}
@media print {
  .styled-page .motion-pending { opacity:1!important; transform:none!important; }
}
/* Equal side columns keep Privacy on the page center, regardless of label widths. */
.footer-bottom { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:20px; }
.footer-bottom > :first-child { justify-self:start; }
.footer-bottom > a { justify-self:center; text-align:center; }
.footer-bottom > :last-child { justify-self:end; text-align:right; }
.styled-page .page-intro .reading.glass-panel { width:calc(100% - 2 * var(--gutter)); }
.styled-page .profile .glass-panel { position:relative; isolation:isolate; padding:clamp(24px,3vw,46px); }
.styled-page .profile .glass-panel::before { content:''; position:absolute; inset:0; z-index:-1; background:rgba(244,237,230,.66); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(244,237,230,.65); border-radius:4px; opacity:var(--glass-strength,.8); }
@media(max-width:760px) {
 .footer-bottom { grid-template-columns:1fr; gap:12px; text-align:center; }
 .footer-bottom > :first-child,.footer-bottom > :last-child,.footer-bottom > a { justify-self:center; text-align:center; }
}

@supports not ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))) {
 .styled-page .profile .glass-panel::before { background:var(--alabaster); opacity:1; }
}
@media(prefers-reduced-motion:reduce) {
 .styled-page .text-link::after { transition:none; }
 .styled-page .motion-pending { opacity:1!important; transform:none!important; }
}
/* The icon and underline follow the actual expanded state, including Escape. */
.menu-toggle { position:relative; cursor:pointer; }
.menu-toggle::after { content:''; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--clay); transform:scaleX(0); transform-origin:left; transition:transform 280ms ease; }
.menu-toggle > span { position:relative; display:block; width:16px; height:14px; font-size:0; }
.menu-toggle > span::before,.menu-toggle > span::after { content:''; position:absolute; left:0; top:6px; width:16px; height:1px; background:currentColor; transition:transform 280ms ease; }
.menu-toggle > span::before { transform:translateY(-3px); }
.menu-toggle > span::after { transform:translateY(3px); }
.menu-toggle[aria-expanded="true"]::after { transform:scaleX(1); }
.menu-toggle[aria-expanded="true"] > span::before { transform:rotate(45deg); }
.menu-toggle[aria-expanded="true"] > span::after { transform:rotate(-45deg); }
@media(prefers-reduced-motion:reduce) {
 .menu-toggle::after,.menu-toggle > span::before,.menu-toggle > span::after { transition:none; }
}

.styled-page.gsap-motion .text-link::after { transition:none; }
/* The reviewed clear lens is the resting treatment on every input device. */
.home-page .hero-copy::before {
 background:rgba(64,59,55,.08);
 backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
 border-color:rgba(244,237,230,.8);
 box-shadow:inset 0 1px 0 rgba(244,237,230,.6),inset 0 -1px 0 rgba(64,59,55,.14),0 14px 38px rgba(64,59,55,.12);
}
.home-page .hero-copy h1 {
 color:rgba(244,237,230,.8);
 text-shadow:0 1px 16px rgba(64,59,55,.45);
}

/* Portrait lens: a restrained N0X-inspired punch-in and warm specular pass. */
.portrait-lens { position:relative; overflow:hidden; isolation:isolate; }
.portrait-lens::after {
 content:""; position:absolute; z-index:2; inset:-25% -65%; pointer-events:none;
 background:linear-gradient(110deg,transparent 40%,rgba(244,237,230,.04) 44%,rgba(244,237,230,.24) 49%,rgba(255,255,255,.32) 50%,rgba(244,237,230,.07) 55%,transparent 60%);
 transform:translateX(-75%); opacity:0;
}
@keyframes portrait-glint {
 0% { transform:translateX(-75%); opacity:0; }
 16% { opacity:1; }
 80% { opacity:1; }
 100% { transform:translateX(75%); opacity:0; }
}
@media (prefers-reduced-motion:no-preference) {
 .portrait-lens img { transition:transform 1080ms cubic-bezier(.19,1,.22,1),filter 1080ms cubic-bezier(.19,1,.22,1); }
 .person:focus-within .portrait-lens img { transform:scale(1.03); }
 .person:focus-within .portrait-lens::after { animation:portrait-glint 1170ms cubic-bezier(.22,.61,.36,1) both; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .person:hover .portrait-lens img,.profile .portrait-lens:hover img { transform:scale(1.03); }
 .person:hover .portrait-lens::after,.profile .portrait-lens:hover::after { animation:portrait-glint 1170ms cubic-bezier(.22,.61,.36,1) both; }
}

/* The sheen resolves into a held inset rim, then releases on pointer/focus exit. */
.portrait-lens::before {
 content:""; position:absolute; z-index:3; inset:0; pointer-events:none;
 border:1px solid rgba(244,237,230,.12); opacity:0; transform:scale(.985);
 box-shadow:inset 0 0 0 1px rgba(64,59,55,.08);
 transition:transform 630ms cubic-bezier(.19,1,.22,1),opacity 630ms ease,border-color 630ms ease;
}
.person:focus-within .portrait-lens::before {
 opacity:1; transform:scale(.97); border-color:rgba(244,237,230,.65);
}
@media (hover:hover) and (pointer:fine) {
 .person:hover .portrait-lens::before,.profile .portrait-lens:hover::before {
  opacity:1; transform:scale(.97); border-color:rgba(244,237,230,.65);
 }
}
@media (prefers-reduced-motion:reduce) {
 .portrait-lens::before { transition:none; }
}

/* A subtle contrast-only focus shift, preserving the monochrome crop. */
.portrait-lens img { filter:grayscale(var(--portrait-monochrome,0)) contrast(1); }
.janira-portrait, .monochrome-portrait { --portrait-monochrome:1; }
.person:focus-within .portrait-lens img {
 filter:grayscale(var(--portrait-monochrome,0)) contrast(1.06);
}
@media (hover:hover) and (pointer:fine) {
 .person:hover .portrait-lens img,.profile .portrait-lens:hover img {
  filter:grayscale(var(--portrait-monochrome,0)) contrast(1.06);
 }
}

/* Added only after image observers initialize; no-script photos remain visible. */
.photo-awaiting { opacity:0; }
@media(prefers-reduced-motion:reduce) { .photo-awaiting { opacity:1; } }
@media print { .photo-awaiting { opacity:1; } }

/* Compact shared footer: a full-width signature above two useful link groups. */
.footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 48px; max-width:850px; }
.footer-brand { grid-column:1 / -1; text-align:center; }
.footer-name { font-size:clamp(27px,4vw,36px); }
.footer-brand p { margin:10px 0 0; }
.footer-grid > div { text-align:center; }
.footer-grid h2 { margin-bottom:14px; }
.footer-bottom { margin-top:36px; }
.footer-preview-label { display:block; margin-top:6px; opacity:.7; }
@media(max-width:760px) {
 footer { padding-top:38px; }
 .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; }
 .footer-grid h2 { font-size:12px; line-height:1.5; }
 .footer-brand p { font-size:11px; }
 .footer-grid>div>a:not(.footer-name) { font-size:12px; padding:5px 0; margin:3px 0; }
 .footer-bottom { margin-top:26px; }
}
@media(prefers-reduced-motion:reduce) { .styled-page .footer-credit a { transition:none; } }

/* Permanent light credit rule with a colored hover/focus pass. */
.styled-page .footer-credit a {
 position:relative; display:inline-block; padding-bottom:3px; color:var(--alabaster);
 text-decoration:none; border-bottom:1px solid currentColor; transition:none;
}
.styled-page .footer-credit a::after {
 content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
 background:#cfa9a4; transform:scaleX(0); transform-origin:left;
 transition:transform 220ms cubic-bezier(.215,.61,.355,1);
}
.styled-page .footer-credit a:hover,.styled-page .footer-credit a:focus-visible {
 color:var(--alabaster); text-decoration:none;
}
.styled-page .footer-credit a:hover::after,.styled-page .footer-credit a:focus-visible::after { transform:scaleX(1); }
@media(prefers-reduced-motion:reduce) { .styled-page .footer-credit a::after { transition:none; } }