/* ONAITIS — white / black / orange, mono chrome, the letters do the talking */
@font-face{
  font-family: 'Switzer';
  src: url(../assets/fonts/Switzer-Medium.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}
/* each project's real display face, straight from its own codebase */
@font-face{
  font-family: 'Tinvan';
  src: url(../assets/fonts/TINVAN5-Regular.otf) format('opentype');
  font-display: swap;
}
@font-face{
  font-family: 'Aileron';
  src: url(../assets/fonts/Aileron-Heavy.otf) format('opentype');
  font-weight: 900;
  font-display: swap;
}
@font-face{
  font-family: 'Newsreader';
  src: url(../assets/fonts/Newsreader-Italic.woff2) format('woff2');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}
:root{
  --paper: #ffffff;
  --ink: #0a0a0a;
  --orange: #ff4d00;
  --dim: rgba(10, 10, 10, .55);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Courier New", monospace;
  --disp: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --nav-h: 76px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--orange); color: #fff; }
a{ color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--orange); }
a:hover{ background: var(--orange); color: #fff; }
.o{ color: var(--orange); }
.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;
}

/* simple custom cursor: white arrow, orange over anything clickable */
@media (hover: hover) and (pointer: fine){
  body{
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.36Z" fill="white" stroke="%230a0a0a" stroke-width="1.4"/></svg>') 5 3, auto;
  }
  a, button, .rolo a,
  body[data-letter-hover="1"]{
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.36Z" fill="%23ff4d00" stroke="white" stroke-width="1.4"/></svg>') 5 3, pointer;
  }
}

/* the letters live on a fixed canvas: hero first, then they dock into the header */
#hero-canvas{
  position: fixed; inset: 0;
  width: 100%; height: 100svh;
  z-index: 6;
  pointer-events: none;
}

/* header: the balloon ONAITIS docks dead-centre; work left, icons right */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 7;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  height: var(--nav-h);
  padding: 0 24px;
}
.nav__work{ font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; border-bottom-width: 0; }
.nav__icons{ display: flex; gap: 10px; }
.nav__icons a{ border-bottom: 0; color: var(--ink); display: grid; place-items: center; padding: 8px; }
.nav__icons a:hover{ background: transparent; color: var(--orange); }
.nav__icons a[aria-current]{ color: var(--orange); }

/* scroll runway for the hero: the rolodex arrives right as the word finishes docking */
.hero-space{ position: relative; height: 130svh; touch-action: pan-y; }
.hero__fallback{
  position: sticky; top: 0; height: 100svh; display: grid; place-items: center; margin: 0;
  font-family: var(--disp); font-weight: 800; font-size: clamp(3rem, 14vw, 11rem); letter-spacing: -.03em;
}
.hero__strap{
  position: fixed; left: 24px; bottom: 20px; margin: 0; z-index: 5;
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--dim);
}

/* work: the focus-pull deck, spinning forever */
.rolo-wrap{ position: relative; height: 900svh; }
.rolo-sticky{
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
  perspective: 950px;
  background: transparent; /* the string passes behind the pinned names */
}
/* the flair: one word of colour on a white page — the centred name wears
   its project's own typeface and its project's own accent */
.theme-moyletts{ --racc: #c73e1d; }
.theme-zone68{ --racc: #922a37; }
.theme-aoife{ --racc: #e14fd2; }
.theme-billy{ --racc: #ec4f9a; }
.theme-moyletts .rolo a.is-center .rolo__t{
  font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500;
  text-transform: lowercase; letter-spacing: 0;
}
.theme-zone68 .rolo a.is-center .rolo__t{
  font-family: 'Tinvan', var(--mono); letter-spacing: .06em;
}
.theme-aoife .rolo a.is-center .rolo__t{
  font-family: 'Aileron', var(--disp); font-weight: 900;
  text-transform: lowercase; letter-spacing: -.02em;
}
.theme-billy .rolo a.is-center .rolo__t{
  font-family: var(--disp); font-weight: 800; letter-spacing: .01em;
}
.rolo-tick{
  position: absolute; left: 0; right: 0; overflow: hidden; white-space: nowrap;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--racc, var(--orange));
  opacity: 0; transition: opacity .55s ease, color .4s ease;
  pointer-events: none; z-index: 1;
}
.rolo-sticky[class*="theme-"] .rolo-tick{ opacity: .95; }
.rolo-tick--top{ top: calc(var(--nav-h) + 10px); }
.rolo-tick--bot{ bottom: 34px; }
.rolo-tick__track{ display: inline-flex; }
.rolo-tick__track span{ flex: 0 0 auto; padding-right: .5em; }
@media (prefers-reduced-motion: no-preference){
  .rolo-tick__track{ animation: tickmq 60s linear infinite; }
  .rolo-tick--bot .rolo-tick__track{ animation-direction: reverse; }
  @keyframes tickmq{ to{ transform: translateX(-50%); } }
}
.rolo{ position: relative; z-index: 1; width: 100%; height: 100%; transform-style: preserve-3d; }

/* solid orange blobs: living shapes at the edges of the page */
.blob{
  position: absolute; height: auto; aspect-ratio: 1;
  pointer-events: none; z-index: 0; user-select: none;
}
.blob svg{ display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference){
  .blob{ animation: blobfloat 16s ease-in-out infinite alternate; }
  .blob:nth-of-type(even){ animation-duration: 21s; animation-delay: -8s; }
  @keyframes blobfloat{
    from{ transform: translateY(-1.5%) rotate(var(--r, 0deg)); }
    to{ transform: translateY(2.5%) rotate(calc(var(--r, 0deg) + 3deg)); }
  }
}
.rolo a{
  position: absolute; left: 50%; top: 50%;
  white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  border-bottom: 0;
  color: var(--ink);
  transition: color .3s ease;
  will-change: transform, opacity, filter;
}
.rolo__t{
  font-family: 'Switzer', var(--disp); font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.7rem, 7.5vw, 5.6rem); letter-spacing: .07em; line-height: 1.05;
}
.rolo a.is-center{ color: var(--racc, var(--orange)); }
.rolo a:hover{ background: transparent; color: var(--racc, var(--orange)); }
.rolo__d{
  font-family: var(--mono); font-size: .72rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--dim);
}
.plainlist{ list-style: none; padding: 24px; }

.band{ max-width: 980px; margin: 0 auto; padding: 72px 24px 140px; border-top: 2px solid var(--ink); position: relative; z-index: 1; }
#contact{ border-top: 0; min-height: 72svh; display: flex; flex-direction: column; justify-content: center; z-index: 0; }
.locline{
  display: inline-block; margin-top: 14px;
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--dim);
}
.label{ font-size: .68rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--orange); margin: 0 0 22px; }
.prose{ max-width: 62ch; margin: 0; }
.bigmail{ font-family: var(--disp); font-weight: 800; font-size: clamp(1.4rem, 4.5vw, 2.6rem); letter-spacing: -.02em; }

/* about page */
.subpage main{ padding-top: var(--nav-h); position: relative; z-index: 1; }
.about{
  max-width: 1020px; margin: 0 auto; padding: 32px 24px 80px;
  min-height: calc(100svh - var(--nav-h));
  display: grid; grid-template-columns: minmax(260px, 440px) minmax(280px, 480px);
  gap: 56px; align-items: center; justify-content: center; align-content: center;
}
@media (max-width: 820px){
  .about{ grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 32px; }
}
.omask{ width: 100%; max-width: 440px; aspect-ratio: 1; }
.omask canvas{ display: none; }
.omask__img{
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 22%;
  display: block; border-radius: 50%; /* circle fallback until the O-mask draws */
}
.about__line{
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 24px; text-wrap: balance;
}
.caption{ font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); margin-top: 26px; }

/* just the copyright, fixed bottom-right, out of the strap's way */
.foot{
  position: fixed; right: 24px; bottom: 12px; z-index: 7;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
  pointer-events: none;
}
.subpage .about{ padding-bottom: 120px; }
@media (max-width: 640px){
  .nav{ padding: 0 14px; }
  .hero__strap{
    left: 14px; right: 14px; bottom: 38px;
    font-size: .62rem; letter-spacing: .2em; white-space: normal;
  }
  .foot{ right: 14px; bottom: 12px; }
  .rolo-tick--bot{ bottom: 56px; }
  .rolo-tick{ font-size: .58rem; letter-spacing: .18em; }
  .about{ padding-top: 24px; gap: 28px; }
}