:root {
  color-scheme: dark;
  --midnight: #0A142B;
  --navy-blue: #1D3A7C;
  --moonlight: #E6ECF9;
  --moonlight-dim: rgba(230,236,249,.76);
  --line: rgba(230,236,249,.20);
  --font-art: 'Marcellus', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-label: 'Montserrat', Arial, sans-serif;
  --bottom-nav-height: 94px;
  background: var(--midnight);
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0; }
body { margin:0; background:var(--midnight); color:var(--moonlight); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { display:block; max-width:100%; }
.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-link { position:fixed; z-index:100; top:10px; left:10px; transform:translateY(-160%); padding:12px; background:var(--moonlight); color:var(--midnight); font:600 12px var(--font-label); }
.skip-link:focus { transform:translateY(0); }
.page { position:relative; display:flex; flex-direction:column; width:100%; min-height:100svh; padding:clamp(22px,4vw,54px) clamp(22px,5vw,70px) calc(var(--bottom-nav-height) + 38px + env(safe-area-inset-bottom)); }
.section-inner { width:100%; max-width:1100px; margin:0 auto; }

/* Main page */
.page--main { align-items:center; padding-top:clamp(18px,2.8vh,36px); }
.nav { display:flex; align-items:center; justify-content:center; }
.nav__item {
  text-decoration:none; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; position:relative; isolation:isolate;
  color:var(--moonlight); outline-offset:4px; border-radius:8px;
  -webkit-tap-highlight-color:transparent;
  /* Keep the clickable box still: scaling the link itself can switch :hover
     on/off at its edge and cause a visible snap as the cursor leaves. */
}
/* Soft aura behind each original Illustrator symbol. */
.nav__item::before {
  content:""; position:absolute; z-index:-1; inset:-8px -11px -2px;
  background:radial-gradient(ellipse at 50% 54%, rgba(149,187,255,.28) 0%, rgba(74,125,206,.15) 37%, transparent 73%);
  filter:blur(9px); border-radius:50%; opacity:0;
  transform:scale(.78); transition:opacity .3s ease, transform .32s ease;
  pointer-events:none;
}
/* A one-shot shimmer clipped to the ACTUAL transparent symbol silhouette.
   It never paints outside the icon and is completely invisible after passing. */
.nav__item[href="#main"] { --symbol-mask:url("assets/main.png"); }
.nav__item[href="#work"] { --symbol-mask:url("assets/work.png"); }
.nav__item[href="#legend"] { --symbol-mask:url("assets/legend.png"); }
.nav__item[href="#contacts"] { --symbol-mask:url("assets/contacts.png"); }
.nav__symbol {
  position:relative; display:block; width:var(--icon-size,52px);
  height:var(--icon-size,52px); flex:0 0 auto; isolation:isolate;
  transform:translateZ(0) scale(1);
  transform-origin:50% 50%;
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
  backface-visibility:hidden;
}
.nav__symbol img { width:100%; height:100%; }
.nav__symbol::after {
  content:""; position:absolute; z-index:2; inset:0; pointer-events:none;
  background:linear-gradient(105deg,
    transparent 39%, rgba(230,236,249,.15) 45%,
    rgba(255,255,255,.94) 50%, rgba(180,214,255,.40) 54%, transparent 61%);
  background-size:280% 100%; background-position:100% 50%;
  -webkit-mask-image:var(--symbol-mask); mask-image:var(--symbol-mask);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity:0; filter:drop-shadow(0 0 3px rgba(205,228,255,.4));
}
@keyframes symbol-glint {
  0% { background-position:100% 50%; opacity:0; }
  14% { opacity:.92; }
  75% { opacity:.90; }
  100% { background-position:0% 50%; opacity:0; }
}
.nav__item img {
  position:relative; z-index:1; object-fit:contain; opacity:.85;
  /* Same filter function list in BOTH states, so glow fades smoothly out. */
  filter:brightness(1.1) drop-shadow(0 0 0 rgba(143,187,255,0));
  transition:opacity .34s ease, filter .34s ease;
}
.nav__item > span:not(.nav__symbol) { position:relative; z-index:1; transition:color .25s ease, text-shadow .25s ease; }
@media (hover:hover) and (pointer:fine) {
  .nav__item:is(:hover,:focus-visible) .nav__symbol { transform:translateZ(0) scale(1.07); }
  .nav__item:is(:hover,:focus-visible)::before { opacity:1; transform:scale(1.08); }
  .nav__item:is(:hover,:focus-visible) img { opacity:1; filter:brightness(1.42) drop-shadow(0 0 8px rgba(143,187,255,.65)); }
  .nav__item:is(:hover,:focus-visible) > span:not(.nav__symbol) { text-shadow:0 0 7px rgba(230,236,249,.52); }
}
/* The one-shot glint has its own life cycle. Let it finish after mouseleave,
   instead of abruptly removing its animation with :hover. */
.nav__item.is-glinting .nav__symbol::after {
  animation:symbol-glint .72s cubic-bezier(.24,.72,.30,1) both;
}
/* Keyboard / touch click response does not resize the hit area. */
.nav__item:focus-visible::before,
.nav__item:active::before,
.nav__item.is-pressed::before { opacity:1; transform:scale(1.05); }
.nav__item:active .nav__symbol,
.nav__item.is-pressed .nav__symbol { transform:translateZ(0) scale(1.035); }
.nav__item:focus-visible img,
.nav__item:active img,
.nav__item.is-pressed img { opacity:1; filter:brightness(1.42) drop-shadow(0 0 11px rgba(143,187,255,.8)); }
.nav__item:focus-visible > span:not(.nav__symbol),
.nav__item:active > span:not(.nav__symbol),
.nav__item.is-pressed > span:not(.nav__symbol) { text-shadow:0 0 9px rgba(230,236,249,.6); }
.nav__divider { flex:0 0 1px; width:1px; height:40px; background:rgba(230,236,249,.85); }
.nav--top { min-height:78px; gap:clamp(12px,2.2vw,29px); align-self:center; }
.nav--top .nav__item { width:60px; height:60px; --icon-size:51px; }

.main__brand { width:min(100%,1100px); margin-top:clamp(31px,5.1vh,80px); }
.brand-logo { width:100%; height:auto; }
.main__center { width:min(100%,1120px); margin:auto 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:clamp(20px,4vw,70px); padding-top:clamp(45px,10vh,150px); }
.poem { margin:0; width:100%; justify-self:start; text-align:center; }
.poem blockquote { margin:0; font-family:var(--font-art); font-weight:400; font-size:clamp(15px,1.54vw,21px); line-height:2.25; letter-spacing:.01em; text-transform:uppercase; }
.poem blockquote span { display:block; }
.poem figcaption { position:relative; max-width:320px; margin:30px auto 0; padding-top:24px; font-family:var(--font-label); font-size:clamp(10px,.93vw,13px); font-style:italic; line-height:1.6; text-transform:uppercase; letter-spacing:.05em; }
.poem figcaption::before { content:""; position:absolute; top:0; left:3%; right:3%; height:1px; background:var(--moonlight); opacity:.65; }
.main__ibis { width:min(100%,490px); height:auto; justify-self:end; object-fit:contain; }
.main__spacer { height:1px; width:100%; }

/* Fixed bottom bar is FULL viewport width, not just as wide as the symbols. */
.nav--bottom {
  position:fixed; z-index:60; bottom:0; left:0; right:0;
  transform:none; width:100%; max-width:none;
  height:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  gap:clamp(15px,3.2vw,44px);
  padding:5px 20px calc(5px + env(safe-area-inset-bottom));
  background:linear-gradient(90deg,rgba(10,20,43,.92),rgba(14,29,59,.965) 50%,rgba(10,20,43,.92));
  border-top:1px solid rgba(230,236,249,.22);
  border-radius:0; box-shadow:0 -5px 25px rgba(0,0,0,.13);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.nav--bottom .nav__item {
  flex:0 0 69px; min-width:0; min-height:0; --icon-size:52px;
  height:calc(var(--bottom-nav-height) - 10px);
  touch-action:manipulation;
}

.nav--bottom .nav__item span { font:600 9px/1.4 var(--font-label); letter-spacing:.02em; }
.nav--bottom .nav__item[aria-current="page"] img {
  opacity:1;
  filter:brightness(1.24) drop-shadow(0 0 0 rgba(143,187,255,0));
}
.nav--bottom .nav__item[aria-current="page"] span { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
/* Shared long-form text for Work and Legend. */
.prose { font-family:var(--font-art); font-weight:400; color:var(--moonlight); font-size:clamp(15px,1.13vw,17px); line-height:1.73; letter-spacing:.012em; }
.prose p { margin:0 0 1.3em; text-indent:2.1em; }
.prose p:last-child { margin-bottom:0; }

/* Work */
.page--work { padding-top:clamp(50px,8vh,100px); }
.work-inner { display:flex; flex-direction:column; align-items:center; }
.work__header { width:min(100%,920px); margin-bottom:clamp(40px,6vh,74px); }
.brand-logo--work { width:100%; }
.showreel { width:min(100%,850px); }
.showreel__frame { width:100%; aspect-ratio:16/9; background:rgba(0,0,0,.35); border:1px solid rgba(230,236,249,.34); box-shadow:0 16px 65px rgba(0,0,0,.16); }
.showreel__frame iframe { display:block; width:100%; height:100%; border:0; }
.showreel__link { display:block; width:max-content; margin:14px 0 0 auto; font:500 10px/1.5 var(--font-label); letter-spacing:.16em; text-decoration:none; color:var(--moonlight-dim); border-bottom:1px solid var(--line); padding-bottom:5px; }
.showreel__link:hover,.showreel__link:focus-visible { color:var(--moonlight); border-bottom-color:var(--moonlight); }
.showreel-copy { width:min(100%,850px); margin-top:clamp(32px,5.5vh,66px); }

/* Legend */
.page--legend { padding-top:clamp(64px,10vh,110px); }
.legend-inner { display:flex; flex-direction:column; align-items:center; }
.legend__header { margin-bottom:clamp(30px,5vh,55px); }
.legend__ibis { width:clamp(180px,24vw,285px); height:auto; }
.legend-copy { width:min(100%,850px); }

/* Contacts — no fabricated contact information. */
.page--contacts { justify-content:center; align-items:center; }
.contacts-inner { width:min(100%,850px); display:flex; align-items:center; flex-direction:column; margin:auto 0; }
.contacts-logo { display:block; width:min(100%,780px); height:auto; margin-bottom:clamp(34px,6vh,62px); }
.contact-lines { width:min(100%,650px); }
.contact-line { display:grid; grid-template-columns:minmax(90px,.8fr) minmax(0,1.2fr); gap:20px; align-items:center; min-height:72px; border-top:1px solid var(--line); }
.contact-line:last-child { border-bottom:1px solid var(--line); }
.contact-line__name { font:500 11px/1.5 var(--font-label); letter-spacing:.14em; }
.contact-line__value { font:400 16px/1.6 var(--font-art); color:var(--moonlight-dim); }

/* The icon row has its own full-width grid row, independent of label/value columns.
   Both the contact form and this row are centred on the viewport. */
.contact-line--social {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-height:90px;
}
/* Four brand symbols in a single centred row; quiet silver styling. */
.contact-socials {
  display:flex; align-items:center; justify-content:center; flex-wrap:nowrap;
  width:max-content; max-width:100%;
  gap:clamp(10px,1.6vw,16px); padding:16px 0;
}
.social-link {
  --size:46px;
  position:relative; isolation:isolate;
  display:inline-flex; flex:0 0 var(--size); width:var(--size); height:var(--size);
  align-items:center; justify-content:center;
  color:var(--moonlight); border:1px solid rgba(230,236,249,.26);
  border-radius:12px; background:rgba(230,236,249,.035);
  text-decoration:none; overflow:hidden; cursor:default;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),
             border-color .26s ease, background .26s ease, box-shadow .26s ease;
}
.social-link[href] { cursor:pointer; }
.social-link img {
  display:block; width:23px; height:23px; object-fit:contain;
  /* Font Awesome's black SVG paths become moonlight-blue/white. */
  filter:brightness(0) saturate(100%) invert(93%) sepia(6%) saturate(787%) hue-rotate(186deg) brightness(106%);
  opacity:.95; transition:transform .27s ease, filter .27s ease;
}
.social-link::after {
  content:""; position:absolute; pointer-events:none; inset:0;
  background:linear-gradient(112deg, transparent 23%, rgba(255,255,255,.0) 40%,rgba(225,238,255,.27) 51%,transparent 66%);
  transform:translateX(-185%); opacity:0;
}
@keyframes social-glint {
  0% { opacity:0; transform:translateX(-185%); }
  25% { opacity:1; }
  100% { opacity:0; transform:translateX(185%); }
}
@media (hover:hover) and (pointer:fine) {
  .social-link:hover { transform:translateY(-2px) scale(1.055); border-color:rgba(230,236,249,.64);
    background:rgba(67,105,167,.14); box-shadow:0 0 23px rgba(128,180,255,.17),inset 0 0 12px rgba(175,211,255,.055); }
  .social-link:hover::after { animation:social-glint .7s ease-out both; }
  .social-link:hover img { transform:scale(1.06); filter:brightness(0) invert(1); }
}
.social-link:focus-visible { outline:2px solid var(--moonlight); outline-offset:4px; }
.social-link:active { transform:scale(.95); background:rgba(67,105,167,.22); }

@media (min-width:1350px) {
  .main__brand { margin-top:60px; }
}
@media (max-width:790px) {
  .page { padding-left:clamp(18px,4vw,40px); padding-right:clamp(18px,4vw,40px); }
  .nav--top { gap:clamp(6px,1.4vw,17px); }
  .nav--top .nav__item { width:50px; height:54px; --icon-size:45px; }

  .nav__divider { height:31px; }
  .main__brand { margin-top:clamp(46px,6vh,72px); }
  .main__center { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; padding-top:95px; }
  .main__ibis { width:100%; }
  .poem blockquote { font-size:clamp(13px,1.7vw,16px); line-height:2.1; }
  .poem figcaption { margin-top:20px; }
}
@media (max-width:570px) {
  :root { --bottom-nav-height: 84px; }
  .page--main { min-height:100svh; padding-top:18px; }
  .nav--top { min-height:57px; }
  .nav--top .nav__item { width:41px; height:43px; --icon-size:38px; }

  .nav--top .nav__divider { height:29px; }
  .main__brand { margin-top:clamp(60px,11vh,130px); }
  .main__center { display:flex; flex-direction:column-reverse; align-items:center; justify-content:center; gap:28px; padding-top:clamp(45px,7vh,85px); }
  .main__ibis { width:min(70vw,280px); align-self:center; }
  .poem { width:100%; }
  .poem blockquote { font-size:clamp(12px,3.1vw,15px); line-height:2.2; }
  .poem figcaption { font-size:10px; padding-top:16px; }
  .nav--bottom { gap:clamp(4px,3vw,16px); padding-left:8px; padding-right:8px; }
  .nav--bottom .nav__item { flex:0 1 60px; height:calc(var(--bottom-nav-height) - 10px); min-width:48px; --icon-size:42px; }

  .nav--bottom .nav__item span { font-size:8px; }
  .page--work { padding-top:60px; }
  .work__header { margin-bottom:33px; }
  .prose { font-size:14px; line-height:1.78; }
  .prose p { margin-bottom:1.2em; text-indent:1.7em; }
  .showreel-copy { margin-top:35px; }
  .page--legend { padding-top:55px; }
  .legend__ibis { width:195px; }
  .contacts-logo { margin-bottom:35px; }
  .contact-line { grid-template-columns:minmax(74px,.8fr) minmax(0,1.2fr); gap:12px; min-height:64px; }
  .contact-line__name { font-size:10px; }
  .contact-line__value { font-size:14px; }
  .contact-line--social { min-height:86px; }
  .contact-socials { gap:clamp(9px,3vw,15px); padding:15px 0; }
  .social-link { --size:44px; }

}
@media (max-width:360px) {
  .nav--top { gap:6px; }
  .nav--top .nav__item { width:38px; --icon-size:35px; }

  .nav--bottom { gap:2px; }
  .nav--bottom .nav__item { flex-basis:56px; min-width:44px; --icon-size:38px; }

  .poem blockquote { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}