@import url('https://fonts.googleapis.com/css2?family=Germania+One&family=Pirata+One&display=swap');

:root{
  --v97-heading:"Pirata One","Old English Text MT","Lucida Blackletter","Engravers Old English",Georgia,serif;
  --v97-body:"Germania One",Georgia,"Times New Roman",serif;
  --v97-white:#f8fdff;
  --v97-cyan:#66f5ff;
  --v97-blue:#426cff;
  --v97-red:#ff4e73;
  --v97-shadow:rgba(2,12,22,.92);
}

/* Readable Gothic system: decorative headings, calmer body text. */
html.v97-gothic-ready body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-family:var(--v97-body)!important;
}

html.v97-gothic-ready :where(p,li,label,small,strong,em,a,button,input,textarea,select,option){
  font-family:var(--v97-body)!important;
  letter-spacing:.012em;
}

html.v97-gothic-ready :where(h1,h2,h3,h4,h5,h6,.brand,.site-title,.hero-title,.menu-label,.project-link,.project-title,.project-gothic-title,.times-featured-v59__title,[data-v97-heading]){
  font-family:var(--v97-heading)!important;
  font-weight:400!important;
  letter-spacing:.015em;
  text-shadow:
    0 2px 2px var(--v97-shadow),
    -1px 0 3px rgba(66,108,255,.44),
    1px 0 3px rgba(102,245,255,.28);
}

.v97-readable-text{
  text-shadow:0 1px 2px rgba(0,0,0,.72);
}

.v97-readable-heading{
  position:relative;
  isolation:isolate;
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
}

/* Glitch remains a brief accent only on hover/focus; it never creates a permanent second title. */
.v97-readable-heading::before,
.v97-readable-heading::after{
  content:attr(data-v97-text);
  position:absolute;
  inset:0;
  z-index:-1;
  color:currentColor;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
  white-space:inherit;
  transition:opacity .16s ease;
}

@media (hover:hover) and (pointer:fine){
  .v97-readable-heading:hover::before,
  .v97-readable-heading:focus-visible::before{
    opacity:.16;
    clip-path:inset(18% 0 60% 0);
    transform:translateX(-1px);
    text-shadow:2px 0 var(--v97-blue);
    animation:v97-slice-a .42s steps(2,end) 1;
  }
  .v97-readable-heading:hover::after,
  .v97-readable-heading:focus-visible::after{
    opacity:.12;
    clip-path:inset(66% 0 10% 0);
    transform:translateX(1px);
    text-shadow:-2px 0 var(--v97-red);
    animation:v97-slice-b .5s steps(2,end) 1;
  }
}

/* Replacement for the original 3D title. The old 3D text is removed from the bundle in V97. */
#v97-hero-gothic{
  position:fixed;
  left:50%;
  top:42%;
  z-index:18;
  width:min(86vw,960px);
  transform:translate(-50%,-50%);
  text-align:center;
  color:var(--v97-white);
  pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.72));
  transition:opacity .28s ease,visibility .28s ease;
}
#v97-hero-gothic[hidden]{display:none!important}
#v97-hero-gothic .v97-hero-line{
  display:block;
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  font-family:var(--v97-heading)!important;
  font-size:clamp(3.3rem,6.9vw,7.25rem);
  font-weight:400;
  line-height:.84;
  letter-spacing:.012em;
  white-space:nowrap;
  transform:scaleX(.86);
  transform-origin:center;
  text-shadow:
    0 3px 3px rgba(0,0,0,.9),
    0 0 8px rgba(255,255,255,.3),
    -1px 0 3px rgba(66,108,255,.7),
    1px 0 3px rgba(102,245,255,.45);
}
#v97-hero-gothic .v97-hero-line + .v97-hero-line{margin-top:.12em}

/* Dynamic title in View Projects: maximum two clean lines, never wider than the viewport. */
.project-gothic-title,
.v97-project-title{
  box-sizing:border-box!important;
  width:min(86vw,980px)!important;
  max-width:86vw!important;
  margin-inline:auto!important;
  padding-inline:clamp(10px,2vw,24px)!important;
  font-family:var(--v97-heading)!important;
  font-size:clamp(2.35rem,5.4vw,6rem)!important;
  font-weight:400!important;
  line-height:.9!important;
  letter-spacing:.008em!important;
  text-align:center!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance!important;
  transform:scaleX(.9);
  transform-origin:center;
  text-shadow:
    0 3px 3px rgba(0,0,0,.9),
    -1px 0 3px rgba(66,108,255,.55),
    1px 0 3px rgba(102,245,255,.32)!important;
}

/* Ensure the ordinary white UI remains above the hero and is not obscured by decorative copies. */
.viewButtonTransition,
.viewLiveTransition,
.viewCodeTransition,
nav,
header,
[role="navigation"]{
  position:relative;
  z-index:60;
}

@keyframes v97-slice-a{
  0%{clip-path:inset(18% 0 60% 0);transform:translateX(-1px)}
  50%{clip-path:inset(52% 0 25% 0);transform:translateX(2px)}
  100%{clip-path:inset(30% 0 48% 0);transform:translateX(0)}
}
@keyframes v97-slice-b{
  0%{clip-path:inset(66% 0 10% 0);transform:translateX(1px)}
  50%{clip-path:inset(15% 0 70% 0);transform:translateX(-2px)}
  100%{clip-path:inset(58% 0 20% 0);transform:translateX(0)}
}

@media (max-width:700px){
  #v97-hero-gothic{
    top:40.5%;
    width:84vw;
  }
  #v97-hero-gothic .v97-hero-line{
    font-size:clamp(2.35rem,11.2vw,4.05rem);
    line-height:.9;
    letter-spacing:0;
    transform:scaleX(.76);
  }
  .project-gothic-title,
  .v97-project-title{
    width:82vw!important;
    max-width:82vw!important;
    padding-inline:4px!important;
    font-size:clamp(2rem,9.8vw,4rem)!important;
    line-height:.92!important;
    transform:scaleX(.78);
  }
  html.v97-gothic-ready :where(p,li,label,small,strong,em,a,button){
    letter-spacing:.006em;
  }
}

@media (max-width:390px){
  #v97-hero-gothic{width:82vw;top:40%}
  #v97-hero-gothic .v97-hero-line{
    font-size:clamp(2.1rem,10.7vw,3.45rem);
    transform:scaleX(.73);
  }
  .project-gothic-title,
  .v97-project-title{
    width:79vw!important;
    max-width:79vw!important;
    font-size:clamp(1.85rem,9.3vw,3.4rem)!important;
    transform:scaleX(.74);
  }
}

@media (prefers-reduced-motion:reduce){
  .v97-readable-heading::before,
  .v97-readable-heading::after{display:none!important;animation:none!important}
}


/* V98 — About must always be the frontmost readable content. */
html.v98-about-open #v97-hero-gothic{
  opacity:0!important;
  visibility:hidden!important;
  transform:translate(-50%,-50%) scale(.965)!important;
}
.v98-about-panel{
  position:relative!important;
  z-index:220!important;
  pointer-events:auto!important;
  max-height:min(78dvh,720px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(106,241,255,.85) rgba(1,24,36,.45);
  background:linear-gradient(155deg,rgba(2,45,62,.97),rgba(4,91,111,.92))!important;
  box-shadow:0 28px 90px rgba(0,0,0,.48),inset 0 0 0 1.5px rgba(102,241,255,.7)!important;
}
.v98-about-panel::-webkit-scrollbar{display:block;width:8px}
.v98-about-panel::-webkit-scrollbar-thumb{background:rgba(106,241,255,.8);border-radius:999px}
.v98-about-panel :where(p,li,strong,button){
  position:relative;
  z-index:2;
  text-shadow:0 2px 3px rgba(0,0,0,.92)!important;
}
.v98-about-panel h1{
  position:relative;
  z-index:3;
  color:#fff!important;
  text-shadow:0 3px 4px rgba(0,0,0,.95),0 0 12px rgba(102,241,255,.42)!important;
}
@media(max-width:700px){
  .v98-about-panel{max-height:76dvh!important;width:min(92vw,600px)!important}
}