/* rishabhverma.ca - original implementation. Palette: two-ink risograph. */

@font-face { font-family: "Anton"; src: url(fonts/Anton.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(fonts/Fraunces-Black.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(fonts/Fraunces-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(fonts/Fraunces-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/JetBrainsMono-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --c1: #f40c3f;            /* paper */
  --c2: #160000;            /* ink */
  --display: "Anton", sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --line: 1px solid var(--c2);
}
html.theme-contrasted {
  --c1: #fff0eb;
  --c2: #160000;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--c2);
  color: var(--c2);
  font: 300 18px/1.5 var(--serif);
  transition: background 0.4s;
}
main, header, footer { background: var(--c1); transition: background 0.4s; }
a { color: inherit; }
.s-label {
  display: block;
  background: var(--c2);
  color: var(--c1);
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.55rem 0;
}

/* ---------- header ---------- */
.head {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 5rem 1fr auto auto minmax(16rem, auto) 6rem;
  align-items: stretch;
  border-bottom: var(--line);
  min-height: 6rem;
}
.head > * { border-right: var(--line); }
.head > *:last-child { border-right: 0; }
.head__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 2rem/1 var(--serif);
  letter-spacing: -0.04em;
  text-decoration: none;
}
.head__console {
  padding: 0.9rem 1.1rem;
  font: 700 9px/1.6 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  overflow: hidden;
}
.head__nav {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  padding: 0 3rem;
}
.head__nav a {
  font: 700 12px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
}
.head__nav a:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  border-bottom: 2px solid var(--c2);
}
.head__icons { display: flex; align-items: center; gap: 0; }
.head__icons > * {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 100%;
  border-right: var(--line);
  color: var(--c2);
}
.head__icons > *:last-child { border-right: 0; }
.head__contrast { background: none; border: 0; cursor: pointer; }
.head__contrast span {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--c2);
  background: linear-gradient(90deg, var(--c2) 50%, transparent 50%);
  display: block;
}
.head__avail { display: flex; align-items: center; }
.head__avail p { display: flex; flex-direction: column; width: 100%; }
.head__avail span {
  padding: 0.55rem 1.1rem;
  font: 400 17px/1.4 var(--serif);
}
.head__avail span + span { border-top: var(--line); }
.head__avail a { font-weight: 900; text-decoration: none; }
.head__avail a:hover { text-decoration: underline; }
.head__qr { display: flex; align-items: center; justify-content: center; }
.head__qr img { display: block; width: 64px; height: 64px; }

/* ---------- separators ---------- */
.sep {
  border-top: var(--line);
  border-bottom: var(--line);
  padding: 3px 8px;
  font: 700 8px/1 var(--mono);
  letter-spacing: 0.18em;
  white-space: nowrap;
  overflow: hidden;
  background: var(--c1);
  transition: background 0.4s;
}

/* ---------- hero ---------- */
.hero { display: flex; flex-direction: column; }
.hero__waves {
  display: block;
  width: 100%;
  height: min(66vh, 700px);
}
.hero__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5vw;
  padding: 2.2rem 1rem 2.6rem;
  font: 400 min(11.8vw, 15rem)/0.82 var(--display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  cursor: default;
}
.hero__word { display: block; }
.hero__title.has-particles .hero__word { opacity: 0; }
#glyph-canvas { position: absolute; inset: 0; pointer-events: none; }
.hero__stamp {
  position: absolute;
  right: 1.25rem;
  bottom: 0.5rem;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.18em;
  opacity: 0.75;
}

/* ---------- about ---------- */
.about {
  background:
    linear-gradient(var(--c2) 1px, transparent 1px),
    linear-gradient(90deg, var(--c2) 1px, transparent 1px),
    var(--c1);
  background-size: 120px 120px;
  background-position: center top;
  padding: 7rem 1.5rem;
  transition: background 0.4s;
}
.about__inner { max-width: 640px; margin: 0 auto; }
.about__block { border: var(--line); background: var(--c1); margin-bottom: 3.5rem; }
.about__copy { padding: 2.5rem 3rem; font-size: 1.55rem; line-height: 1.45; }
.about__copy p + p { margin-top: 1.4em; }

/* highlights collage */
.hl {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(110px, auto);
  background: repeating-linear-gradient(-45deg, var(--c1), var(--c1) 9px, var(--c2) 10px, var(--c2) 11px);
}
.hl__tile {
  background: var(--c1);
  outline: var(--line);
  outline-offset: -0.5px;
  padding: 1rem;
  position: relative;
}
.hl--a { grid-area: 1 / 1 / 2 / 3; }
.hl--b { grid-area: 2 / 1 / 4 / 3; }
.hl--c { grid-area: 2 / 3 / 3 / 5; }
.hl--d { grid-area: 4 / 1 / 5 / 3; }
.hl--e { grid-area: 4 / 3 / 6 / 5; }
.hl--f { grid-area: 6 / 2 / 7 / 4; }
.hl--g { grid-area: 7 / 1 / 8 / 3; }
.hl--h { grid-area: 7 / 3 / 8 / 5; }
.hl--i { grid-area: 8 / 1 / 9 / 3; }
.hl--j { grid-area: 8 / 3 / 9 / 5; }
.hl--text { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.35rem; line-height: 1.25; }
.hl--big { display: flex; flex-direction: column; justify-content: flex-end; }
.hl--big strong {
  font: 400 clamp(2.4rem, 5.4vw, 4.2rem)/0.88 var(--display);
  text-transform: uppercase;
  word-break: break-word;
}
.hl--big em { font-style: normal; font-size: 1.05rem; }
.hl--tools b {
  display: block;
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.6em;
}
.hl--tools span { font-size: 1rem; line-height: 1.35; display: block; }
.hl__globe { position: absolute; top: 8%; left: 6%; width: 42%; height: auto; }
.hl__mini-star { position: absolute; }
.hl__mini-star--tl { top: 6%; right: 6%; }
.hl__mini-star--br { bottom: 8%; right: 6%; }

/* ---------- work ---------- */
.work { height: 520vh; position: relative; background: var(--c2); }
.work__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(var(--c1) 0.75px, transparent 0.75px),
    var(--c2);
  background-size: 42px 42px;
}
.work__letters {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vw;
  pointer-events: none;
}
.work__letters span {
  font: 400 52vh/1 var(--display);
  color: var(--c1);
  text-shadow: 0.04em 0.04em 0 color-mix(in srgb, var(--c2) 60%, var(--c1) 15%);
}
.work__track {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  gap: 6vw;
  padding: 0 8vw;
  will-change: transform;
}
.work-card {
  transform: translateY(-50%);
  flex: 0 0 auto;
  width: min(56vw, 760px);
  text-decoration: none;
  color: var(--c2);
}
.work-card__panel {
  background-size: 256px 160px;
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  aspect-ratio: 16 / 9.4;
  background: var(--c1);
  border: 1px solid var(--c2);
  padding: 1.5rem;
  text-align: center;
}
.work-card:hover .work-card__panel { background: var(--c2); color: var(--c1); }
.work-card__name {
  font: 400 clamp(1.8rem, 3.4vw, 3.3rem)/0.92 var(--display);
  text-transform: uppercase;
  max-width: 90%;
}
.work-card__stack, .work-card__key {
  font: 700 11px/1.4 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.work-card__key { opacity: 0.7; }

/* ---------- my way ---------- */
.myway {
  position: relative;
  min-height: 90vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c1);
  transition: background 0.4s;
}
.myway__grid {
  position: absolute;
  inset: -2%;
  background:
    linear-gradient(var(--c2) 1px, transparent 1px),
    linear-gradient(90deg, var(--c2) 1px, transparent 1px);
  background-size: 130px 130px;
  opacity: 0.85;
  transform: perspective(900px) rotateX(8deg) scale(1.06);
}
.myway__text {
  position: relative;
  font: 400 min(15vw, 13rem)/0.9 var(--display);
  text-transform: uppercase;
  text-align: center;
  
}
.myway__go {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c2);
  color: var(--c1);
  font: 700 15px/1 var(--mono);
  letter-spacing: 0.15em;
  text-decoration: none;
  transition: transform 0.3s;
}
.myway__go:hover { transform: translateX(-50%) scale(1.15) rotate(8deg); }
.myway__star { position: absolute; animation: spin 14s linear infinite; }
.myway__star--1 { top: 22%; left: 12%; }
.myway__star--2 { bottom: 18%; right: 14%; animation-duration: 9s; }
.myway__star--3 { bottom: 28%; left: 22%; animation-duration: 20s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- cta ---------- */
.cta {
  position: relative;
  padding: 9rem 1rem 7rem;
  text-align: center;
  border-top: var(--line);
  background: var(--c1);
  transition: background 0.4s;
}
.cta__big {
  font: 400 min(22vw, 19rem)/0.82 var(--display);
  text-transform: uppercase;
}
.cta .myway__star--1 { top: 18%; left: 16%; }
.cta .myway__star--2 { bottom: 22%; right: 18%; }
.cta__mail {
  display: inline-block;
  margin-top: 2.5rem;
  font: 400 clamp(1.3rem, 3vw, 2.2rem)/1 var(--serif);
  font-style: italic;
}

/* ---------- footer ---------- */
.foot {
  position: relative;
  border-top: var(--line);
  text-align: center;
  padding: 3.5rem 1rem 2.5rem;
}
.foot__logo {
  display: inline-block;
  font: 900 min(28vw, 15rem)/0.8 var(--serif);
  letter-spacing: -0.04em;
  text-decoration: none;
}
.foot__machine {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.7;
}
.foot__machine:hover { opacity: 1; text-decoration: underline; }
.foot__meta { margin-top: 1.5rem; font-size: 0.95rem; opacity: 0.8; }

/* ---------- tuner / theme panel ---------- */
#glyph-tuner {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 99;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--c2);
  color: var(--c1);
  font: 700 11px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--c1);
  min-width: 230px;
}
#glyph-tuner.is-open { display: flex; }
#glyph-tuner label { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; }
#glyph-tuner input[type="range"] { width: 110px; accent-color: var(--c1); }
#glyph-tuner .gt-head { display: flex; justify-content: space-between; }
#glyph-tuner button {
  background: var(--c1);
  color: var(--c2);
  border: 0;
  padding: 2px 8px;
  font: inherit;
  cursor: pointer;
}
#glyph-tuner .tp-swatches { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
#glyph-tuner .tp-swatch { width: 22px; height: 22px; padding: 0; border: 1px solid var(--c1); cursor: pointer; }
#glyph-tuner #tp-custom { width: 30px; height: 24px; padding: 0; border: 1px solid var(--c1); background: none; cursor: pointer; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .head {
    grid-template-columns: 4rem 1fr auto;
    min-height: 4rem;
  }
  .head__console, .head__avail, .head__qr { display: none; }
  .head__nav { gap: 1.4rem; padding: 0 1rem; }
  .hero__title { flex-direction: column; gap: 0.25em; font-size: 24vw; }
  .hero__star { display: none; }
  .about { padding: 4rem 1rem; }
  .about__copy { padding: 1.5rem; font-size: 1.25rem; }
  .hl { display: block; }
  .hl__tile { min-height: 0; }
  .hl--big strong { font-size: 2.2rem; }
  .work-card { width: 82vw; }
  .work__letters span { font-size: 24vh; }
}