/* ==========================================================================
   Rahul Sehjal · Portfolio
   A dark desk, a sketchbook, and a pile of little objects.
   ========================================================================== */

:root {
  /* sampled from Rahul's fox avatar */
  --ink: #1e1b1c;
  --ink-2: #262223;
  --ink-3: #302b2c;
  --outline: #201d1f;
  --chalk: #fbf1e0;
  --chalk-2: rgba(251, 241, 224, .74);
  --chalk-3: rgba(251, 241, 224, .46);
  --paper: #f8e7d1;
  --paper-2: #f5e0b8;
  --paper-3: #fff8ec;
  --fox: #f77d02;
  --fox-deep: #d96a00;
  --fox-ink: #a94f00;
  --fox-soft: #ffb25e;
  --cream: #fbe2a9;
  --sky: #cdd8ea;
  --sky-deep: #8fa3c8;
  --blush: #f9797a;
  --wood: #e3a363;
  --steel: #a0acba;
  --blue-ink: #2f4fa8;
  --grid: rgba(110, 130, 180, .24);

  --f-serif: 'Instrument Serif', 'Times New Roman', serif;
  --f-hand: 'Caveat', 'Comic Sans MS', cursive;
  --f-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --f-pixel: 'Press Start 2P', var(--f-mono);

  --tile: 52px;
  --rail-gap: 14px;
  --gutter: calc(var(--tile) + var(--rail-gap) * 2 + 24px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* film grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  opacity: .07;
  pointer-events: none;
  z-index: 90;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--fox); color: var(--paper); }

:focus-visible {
  outline: 2.5px dashed var(--sky);
  outline-offset: 4px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  background: var(--sky);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 99px;
  font-weight: 700;
  z-index: 200;
  text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 12px; }

.hand { font-family: var(--f-hand); }

/* ==========================================================================
   Stamp rails
   ========================================================================== */

.rail {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--tile);
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
}
.rail-l { left: var(--rail-gap); }
.rail-r { right: var(--rail-gap); }

.rail-track {
  display: flex;
  flex-direction: column;
  gap: 7px;
  animation: rail-up 70s linear infinite;
  will-change: transform;
}
.rail-r .rail-track { animation-direction: reverse; }

@keyframes rail-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.tile {
  flex: none;
  width: var(--tile);
  height: var(--tile);
  border-radius: 8px;
  background: var(--fox);
  color: var(--ink);
  display: grid;
  place-items: center;
  position: relative;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1.5px solid rgba(27, 26, 25, .55);
  border-radius: 5px;
}
.tile.round::before { border-radius: 50%; inset: 5px; }
.tile.diamond::before { inset: 9px; transform: rotate(45deg); border-radius: 3px; }
.tile.dark { background: var(--ink-3); color: var(--fox); }
.tile.sky { background: var(--sky); color: var(--outline); }
.tile.sky::before { border-color: rgba(32, 29, 31, .4); }
.tile.dark::before { border-color: rgba(247, 125, 2, .45); }
.tile svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
}
.tile.diamond svg { width: 44%; height: 44%; }

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
}

.nav-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: background .35s, border-color .35s, box-shadow .35s;
}
.nav.scrolled .nav-pill {
  background: rgba(30, 27, 28, .94);
  border-color: rgba(243, 232, 216, .12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.nav-home {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--chalk);
  transition: transform .4s var(--ease-spring), color .2s;
}
.nav-home:hover { transform: rotate(-12deg) scale(1.1); color: var(--fox); }
.nav-home .ico {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-link {
  position: relative;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  padding: 8px 14px 12px;
  text-decoration: none;
  color: var(--chalk);
  transition: color .2s, transform .3s var(--ease-spring);
}
.nav-link:hover { color: var(--sky); transform: translateY(-2px) rotate(-2deg); }
.nav-sq {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  width: calc(100% - 24px);
  height: 9px;
  fill: none;
  stroke: var(--fox);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
  transition: stroke-dashoffset .5s var(--ease-out);
}
.nav-link:hover .nav-sq,
.nav-link.active .nav-sq { stroke-dashoffset: 0; }

/* ==========================================================================
   Doodles on the desk
   ========================================================================== */

.doodle {
  position: absolute;
  z-index: 1;
  color: var(--chalk);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
  pointer-events: none;
  rotate: var(--r, 0deg);
  animation: bob 7s ease-in-out infinite;
}
.doodle:nth-of-type(2n) { animation-duration: 9s; animation-delay: -2s; }
.doodle:nth-of-type(3n) { animation-duration: 8s; animation-delay: -4s; }
.doodle.twinkle {
  stroke: none;
  fill: var(--fox);
  opacity: 1;
  animation: twinkle 2.6s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@keyframes twinkle {
  0%, 100% { transform: scale(.55) rotate(0deg); opacity: .4; }
  50% { transform: scale(1) rotate(45deg); opacity: 1; }
}

/* ==========================================================================
   Hero · the sketchbook
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hero {
  position: relative;
  padding: 124px var(--gutter) 40px;
}

.book {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}

.page {
  position: relative;
  background: var(--paper);
  color: var(--fox-ink);
}
.page::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: .22;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}

/* top page: grid paper inside a thick cover */
.page-top {
  border-radius: 34px 34px 6px 6px;
  box-shadow:
    inset 0 -24px 26px -22px rgba(120, 60, 10, .3),
    0 0 0 20px var(--fox),
    0 0 0 22px var(--fox-deep),
    0 30px 60px rgba(0, 0, 0, .45);
  padding: 60px 52px 54px;
  z-index: 2;
  overflow: hidden;
}
.page-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--grid) 1.5px, transparent 1.5px);
  background-size: 34px 34px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(#000 50%, transparent 96%);
  mask-image: linear-gradient(#000 50%, transparent 96%);
  pointer-events: none;
}

/* the fold, with a ribbon running across it */
.fold { position: relative; height: 0; z-index: 6; }
.ribbon-band {
  position: absolute;
  left: -70px;
  width: 56%;
  top: 2px;
  height: 26px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 6px),
    var(--fox-soft);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .28);
  transform: rotate(-2.4deg);
  clip-path: polygon(0 0, 100% 0, 97% 50%, 100% 100%, 0 100%, 3% 50%);
}

/* bottom page leans towards you, so it flares out like an open notebook */
.page-bottom-wrap {
  position: relative;
  margin-top: 22px;
  perspective: 1500px;
  z-index: 1;
}
.page-bottom {
  min-height: 470px;
  padding: 54px 60px 70px;
  border-radius: 6px 6px 30px 30px;
  background:
    linear-gradient(rgba(120, 60, 10, .16), transparent 46px),
    var(--paper);
  box-shadow:
    0 0 0 20px var(--fox),
    0 0 0 22px var(--fox-deep),
    0 40px 70px rgba(0, 0, 0, .5);
  transform: rotateX(14deg);
  transform-origin: 50% 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 16px;
  align-items: center;
}





/* the illustration: one-colour line art, like a pen sketch */
.hero-art { position: relative; }
.scene { width: 100%; height: auto; display: block; overflow: visible; }
.scene .float { animation: float 3.4s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.scene .pupils { transition: transform .25s ease-out; }
.scene .fox { cursor: pointer; }
.scene .fox.hop { animation: hop .45s var(--ease-spring); }
@keyframes hop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-14px); }
}
.paw-wave {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pawwave 5s ease-in-out 3s infinite;
}
@keyframes pawwave {
  0%, 44%, 100% { transform: rotate(0deg) translateY(0); }
  6% { transform: rotate(-22deg) translateY(-10px); }
  14% { transform: rotate(14deg) translateY(-10px); }
  22% { transform: rotate(-18deg) translateY(-10px); }
  30% { transform: rotate(10deg) translateY(-6px); }
}
.scene .bubble {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: 20% 100%;
  animation: pop .55s var(--ease-spring) 3.2s both, bob 4s ease-in-out 3.8s infinite;
}
.scene .bubble.again { animation: pop .45s var(--ease-spring) both, bob 4s ease-in-out .5s infinite; }
@keyframes pop {
  from { transform: scale(0) rotate(-10deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* draw-in on load (paths get pathLength="1" from JS) */
.scene.drawing .d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.4s var(--ease-out) forwards;
  animation-delay: var(--dd, 0s);
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.scene.drawing .d[class*="f-"] {
  fill-opacity: 0;
  animation: draw 1.4s var(--ease-out) forwards, fillin .6s ease forwards;
  animation-delay: var(--dd, 0s), calc(var(--dd, 0s) + .7s);
}
.scene.drawing .f-ink,
.scene.drawing circle.f-blush:not(.d),
.scene.drawing text { opacity: 0; animation: fadein .5s ease 2.2s forwards; }
.scene.drawing .hl-fill { opacity: 0; animation: fadein-hl .5s ease 2.2s forwards; }
@keyframes fillin { to { fill-opacity: 1; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes fadein-hl { to { opacity: .25; } }

/* beliefs */
.beliefs-label {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 28px;
  color: var(--fox-deep);
}

.corner {
  position: absolute;
  fill: none;
  stroke: var(--fox);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.corner .pf { fill: var(--paper); }
.corner circle { fill: var(--fox); stroke: none; }
.corner-l { left: 18px; bottom: 14px; width: 240px; }
.corner-r { right: 10px; bottom: 8px; width: 150px; }

/* ==========================================================================
   Section heads
   ========================================================================== */

.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 110px;
}

.emblem {
  width: 116px;
  height: 116px;
  margin: 0 auto 26px;
  display: block;
}
.em-bg { fill: var(--fox); }
.em-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.em-text {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 9.6px;
  fill: var(--ink);
  letter-spacing: .04em;
}
.em-spin { transform-origin: 60px 60px; animation: spin 26s linear infinite; }
.em-leaf { fill: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

.section-title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(46px, 7vw, 92px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--chalk);
}
.section-title .hand {
  display: inline-block;
  font-weight: 700;
  font-size: .9em;
  color: var(--fox);
  transform: rotate(-3deg);
}
.section-sub {
  margin-top: 18px;
  font-size: 18px;
  color: var(--chalk-2);
}

/* ==========================================================================
   Work · project rows
   ========================================================================== */

.work {
  position: relative;
  padding: 150px var(--gutter) 60px;
}

.project {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto 180px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 28px;
  align-items: center;
}
.project .obj { grid-column: 1 / span 7; grid-row: 1; }
.project .notes-col { grid-column: 9 / span 4; grid-row: 1; }
.project.flip .obj { grid-column: 6 / span 7; }
.project.flip .notes-col { grid-column: 1 / span 4; }

.obj {
  position: relative;
  container-type: inline-size;
}

/* reveal: objects settle into place */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px) rotate(var(--in-rot, 0deg));
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
}
[data-reveal].in { opacity: 1; transform: none; }
.obj[data-reveal] { --in-rot: -4deg; }
.flip .obj[data-reveal] { --in-rot: 4deg; }

/* notes column */
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fox);
  margin-bottom: 14px;
}
.kicker span {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--fox);
  color: var(--ink);
  font-weight: 600;
}
.kicker.light { justify-content: flex-start; color: var(--sky); }

.p-name {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(42px, 4.4vw, 60px);
  line-height: .95;
  letter-spacing: -.015em;
  color: var(--chalk);
}
.p-tag {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.1;
  color: var(--fox);
  margin: 10px 0 16px;
}
.p-idea {
  font-size: 16.5px;
  color: var(--chalk-2);
  margin-bottom: 18px;
}
.p-list {
  list-style: none;
  font-family: var(--f-hand);
  font-size: 23px;
  line-height: 1.25;
  color: var(--chalk);
  margin-bottom: 24px;
}
.p-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 4px;
}
.p-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 16px;
  height: 14px;
  background: var(--fox);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M4 16 L15 26 L37 3' fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M4 16 L15 26 L37 3' fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.p-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--chalk);
  color: var(--ink);
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--fox);
  transition: transform .25s var(--ease-spring), box-shadow .25s, background .2s;
}
.pill:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--fox); background: #fff; }
.pill:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--fox); }
.text-link {
  font-weight: 500;
  font-size: 15.5px;
  color: var(--chalk-2);
  text-decoration: underline;
  text-decoration-color: var(--chalk-3);
  text-underline-offset: 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.text-link:hover { color: var(--chalk); text-decoration-color: var(--fox); }
.text-note {
  font-family: var(--f-hand);
  font-size: 21px;
  color: var(--chalk-3);
}

/* ==========================================================================
   Object 01 · Arcade cabinet (BidMy.App)
   ========================================================================== */

.arcade {
  position: relative;
  width: 74%;
  margin: 0 auto;
  padding: 4cqi 4cqi 3cqi;
  border-radius: 5cqi 5cqi 2.4cqi 2.4cqi;
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 8%, transparent 92%, rgba(0,0,0,.22)),
    var(--fox);
  box-shadow:
    inset 0 0 0 .6cqi var(--fox-deep),
    0 4cqi 7cqi rgba(0, 0, 0, .5);
  transition: transform .5s var(--ease-spring);
}
.obj-arcade:hover .arcade { transform: rotate(-1deg) translateY(-1cqi); }

.sticker-new {
  position: absolute;
  top: -6cqi;
  left: -9cqi;
  width: 20cqi;
  height: 20cqi;
  display: grid;
  place-items: center;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 5.4cqi;
  color: var(--outline);
  background: var(--blush);
  clip-path: polygon(50% 0, 60% 13%, 75% 6%, 77% 22%, 93% 22%, 87% 37%, 100% 46%, 88% 57%, 96% 72%, 80% 75%, 79% 92%, 64% 86%, 52% 100%, 41% 87%, 26% 95%, 23% 79%, 6% 77%, 12% 61%, 0 50%, 12% 39%, 5% 24%, 21% 21%, 23% 5%, 38% 12%);
  z-index: 3;
  animation: wobble 3s ease-in-out infinite;
}
@keyframes wobble {
  0%, 100% { transform: rotate(-14deg) scale(1); }
  50% { transform: rotate(-6deg) scale(1.06); }
}

.arc-top {
  background: var(--ink);
  border-radius: 2.4cqi;
  padding: 3cqi 2cqi;
  text-align: center;
  box-shadow: inset 0 0 0 .5cqi rgba(255, 255, 255, .06);
}
.arc-marquee {
  font-family: var(--f-pixel);
  font-size: 5.2cqi;
  color: var(--sky);
  letter-spacing: .06em;
  text-shadow: 0 0 1.2cqi rgba(205, 216, 234, .8), 0 0 4cqi rgba(205, 216, 234, .45);
  animation: flicker 5s infinite;
}
.arc-marquee i { font-style: normal; color: var(--fox); }
@keyframes flicker {
  0%, 92%, 96%, 100% { opacity: 1; }
  94% { opacity: .55; }
}

.arc-bezel {
  margin-top: 3.4cqi;
  background: #121110;
  border-radius: 3cqi;
  padding: 3.2cqi;
  box-shadow: inset 0 .6cqi 1.4cqi rgba(0, 0, 0, .8);
}
.crt {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: 3cqi / 3.6cqi;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #1a2744 0%, #0c1122 70%, #070a14 100%);
}
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(rgba(0, 0, 0, .28) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
}
.crt-in {
  position: absolute;
  inset: 0;
  padding: 7% 7% 6%;
  font-family: var(--f-pixel);
  font-size: 2.05cqi;
  line-height: 1;
  color: #e7efff;
  text-shadow: 0 0 .8cqi rgba(160, 200, 255, .55);
  display: flex;
  flex-direction: column;
}
.crt-title {
  text-align: center;
  font-size: 3.2cqi;
  color: var(--fox);
  text-shadow: 0 0 1cqi rgba(247, 125, 2, .8);
  margin-bottom: 7%;
  letter-spacing: .08em;
}
.crt-head {
  display: grid;
  grid-template-columns: 20% 1fr auto;
  color: #7f95c9;
  margin-bottom: 4%;
}
.board {
  position: relative;
  display: grid;
  grid-template-columns: 20% 1fr;
  --row: 3.9cqi;
}
.board-ranks, .board-rows { list-style: none; }
.board-ranks li { height: var(--row); display: flex; align-items: center; color: #7f95c9; }
.board-rows { position: relative; height: calc(var(--row) * 5); }
.board-rows li {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--row);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(calc(var(--pos) * 100%));
  transition: transform .8s steps(5);
}
.board-rows li.you { color: var(--fox-soft); text-shadow: 0 0 1cqi rgba(247, 125, 2, .9); z-index: 1; }
.board-rows li.you.flash { animation: blink .25s steps(2) 6; }
.crt-blink {
  margin-top: auto;
  text-align: center;
  color: var(--sky);
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.arc-panel {
  position: relative;
  margin: 3.4cqi -2cqi 0;
  height: 14cqi;
  border-radius: 2cqi;
  background: linear-gradient(var(--paper), var(--paper-2));
  box-shadow: inset 0 -.8cqi 0 rgba(0, 0, 0, .12), 0 1.2cqi 0 var(--fox-deep);
}
.stick {
  position: absolute;
  left: 16%;
  top: 50%;
  width: 7cqi;
  height: 3.4cqi;
  margin: -1.2cqi 0 0 -3.5cqi;
  border-radius: 50%;
  background: var(--ink);
}
.stick i {
  position: absolute;
  left: 50%;
  bottom: 40%;
  width: 1.3cqi;
  height: 6.5cqi;
  margin-left: -.65cqi;
  background: #3c3834;
  border-radius: 1cqi;
  transform-origin: bottom center;
  animation: joy 2.4s ease-in-out infinite;
}
.stick i::after {
  content: "";
  position: absolute;
  top: -3cqi;
  left: 50%;
  width: 5cqi;
  height: 5cqi;
  margin-left: -2.5cqi;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--fox-soft), var(--fox) 50%, var(--fox-deep));
}
@keyframes joy {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(14deg); }
}
.abtn {
  position: absolute;
  top: 36%;
  width: 6cqi;
  height: 6cqi;
  border-radius: 50%;
  box-shadow: inset 0 -.6cqi 0 rgba(0, 0, 0, .25), 0 .5cqi 0 rgba(0, 0, 0, .25);
}
.a1 { left: 50%; background: var(--cream); }
.a2 { left: 64%; top: 24%; background: var(--blush); }
.a3 { left: 78%; background: var(--sky); }
.obj-arcade:hover .a2 { transform: translateY(.4cqi); box-shadow: inset 0 -.2cqi 0 rgba(0, 0, 0, .25); }

.arc-coin {
  margin: 4cqi auto 0;
  width: 42%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.4cqi;
  padding: 2cqi;
  background: var(--ink);
  border-radius: 1.4cqi;
}
.slot {
  width: .9cqi;
  height: 4.4cqi;
  border-radius: 1cqi;
  background: #000;
  box-shadow: 0 0 0 .5cqi #3a3632, 0 0 1.4cqi rgba(205, 216, 234, .6);
}
.coin-lbl {
  font-family: var(--f-pixel);
  font-size: 2.2cqi;
  color: var(--sky);
}

/* ==========================================================================
   Object 02 · Ruler + swatch fan (DesignKit)
   ========================================================================== */

.kit {
  position: relative;
  aspect-ratio: 1 / .78;
}
.fan {
  position: absolute;
  left: 50%;
  bottom: 28cqi;
  width: 0;
  height: 0;
}
.sw {
  position: absolute;
  left: -9cqi;
  bottom: -4cqi;
  width: 18cqi;
  height: 40cqi;
  border-radius: 1.6cqi;
  background: #fffaf2;
  box-shadow: 0 1cqi 2cqi rgba(0, 0, 0, .35);
  padding: 1.4cqi;
  display: flex;
  flex-direction: column;
  transform-origin: 50% 90%;
  transform: rotate(calc(var(--i) * 3deg));
  transition: transform 1s var(--ease-spring);
  transition-delay: calc((var(--i) + 2) * 60ms);
}
.obj-kit.in .sw { transform: rotate(calc(var(--i) * 15deg)); }
.obj-kit.in:hover .sw { transform: rotate(calc(var(--i) * 19deg)) translateY(-1cqi); }
.sw b { flex: 1; border-radius: 1cqi; background: var(--c); }
.sw span {
  font-family: var(--f-mono);
  font-size: 1.7cqi;
  line-height: 1.35;
  color: var(--ink);
  padding-top: 1.2cqi;
  padding-bottom: 5.5cqi;
}
.rivet {
  position: absolute;
  left: -1.8cqi;
  bottom: -1.8cqi;
  width: 3.6cqi;
  height: 3.6cqi;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b7b0a5 60%, #7c766d);
  box-shadow: 0 .4cqi .8cqi rgba(0, 0, 0, .4);
  z-index: 2;
}

.measure {
  position: absolute;
  left: 2cqi;
  right: 2cqi;
  bottom: 23cqi;
  height: 0;
  border-top: .35cqi dashed var(--sky);
  opacity: .9;
}
.measure::before, .measure::after {
  content: "";
  position: absolute;
  top: -2cqi;
  width: .35cqi;
  height: 3.7cqi;
  background: var(--sky);
}
.measure::before { left: 0; }
.measure::after { right: 0; }
.measure span {
  position: absolute;
  right: 6cqi;
  top: -5.2cqi;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 4cqi;
  color: var(--sky);
}

.ruler {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2cqi;
  height: 17cqi;
  border-radius: 1.6cqi;
  transform: rotate(-3.5deg);
  background:
    repeating-linear-gradient(90deg, rgba(27,26,25,.85) 0 .26cqi, transparent .26cqi 8.8cqi) 4cqi 0 / 100% 42% no-repeat,
    repeating-linear-gradient(90deg, rgba(27,26,25,.75) 0 .22cqi, transparent .22cqi 4.4cqi) 4cqi 0 / 100% 28% no-repeat,
    repeating-linear-gradient(90deg, rgba(27,26,25,.55) 0 .18cqi, transparent .18cqi .88cqi) 4cqi 0 / 100% 16% no-repeat,
    linear-gradient(rgba(255,255,255,.4), transparent 30%, rgba(0,0,0,.06)),
    #efc58f;
  box-shadow: 0 .5cqi 0 #c98e4d, 0 2.5cqi 4cqi rgba(0, 0, 0, .45);
}
.ruler-nums span {
  position: absolute;
  top: 7.2cqi;
  width: 3cqi;
  margin-left: -1.4cqi;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 1.9cqi;
  color: var(--ink);
}
.ruler-nums span:nth-child(1) { left: 4.1cqi; }
.ruler-nums span:nth-child(2) { left: 12.9cqi; }
.ruler-nums span:nth-child(3) { left: 21.7cqi; }
.ruler-nums span:nth-child(4) { left: 30.5cqi; }
.ruler-nums span:nth-child(5) { left: 39.3cqi; }
.ruler-nums span:nth-child(6) { left: 48.1cqi; }
.ruler-nums span:nth-child(7) { left: 56.9cqi; }
.ruler-nums span:nth-child(8) { left: 65.7cqi; }
.ruler-nums span:nth-child(9) { left: 74.5cqi; }
.ruler-nums span:nth-child(10) { left: 83.3cqi; }
.ruler-nums span:nth-child(11) { left: 92.1cqi; }
.ruler-brand {
  position: absolute;
  left: 4cqi;
  bottom: 1.6cqi;
  display: flex;
  align-items: center;
  gap: 1.4cqi;
  color: var(--ink);
}
.ruler-brand img { width: 4.4cqi; height: 4.4cqi; border-radius: 1cqi; }
.ruler-brand b { font-family: var(--f-serif); font-weight: 400; font-size: 4cqi; line-height: 1; }
.ruler-brand em {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 1.6cqi;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(27, 26, 25, .6);
}
.ruler-hole {
  position: absolute;
  right: 3cqi;
  bottom: 4.4cqi;
  width: 4cqi;
  height: 4cqi;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 .4cqi .6cqi rgba(0, 0, 0, .6), 0 0 0 .3cqi #c98e4d;
}

/* ==========================================================================
   Object 03 · Report card (Rankify)
   ========================================================================== */

.report {
  position: relative;
  width: 86%;
  margin: 0 auto;
  padding: 7cqi 7cqi 13cqi 15cqi;
  background:
    linear-gradient(90deg, transparent 11.6cqi, rgba(247, 125, 2, .55) 11.6cqi 11.9cqi, transparent 11.9cqi),
    repeating-linear-gradient(transparent 0 calc(6.6cqi - 1px), rgba(47, 79, 168, .2) calc(6.6cqi - 1px) 6.6cqi),
    var(--paper-3);
  background-position: 0 0, 0 1.6cqi, 0 0;
  box-shadow: 0 3cqi 6cqi rgba(0, 0, 0, .45);
  transform: rotate(2.5deg);
  transition: transform .6s var(--ease-spring);
}
.obj-report:hover .report { transform: rotate(0deg) scale(1.01); }
.holes {
  position: absolute;
  left: 3.6cqi;
  top: 12%;
  bottom: 12%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.holes i {
  width: 3.6cqi;
  height: 3.6cqi;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 .4cqi .5cqi rgba(0, 0, 0, .7);
}
.clip {
  position: absolute;
  top: -5cqi;
  right: 14cqi;
  width: 5cqi;
  height: 13cqi;
  fill: none;
  stroke: #b9b3aa;
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(6deg);
  filter: drop-shadow(.3cqi .4cqi 0 rgba(0, 0, 0, .25));
}
.r-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 1.9cqi;
  letter-spacing: .12em;
  color: rgba(27, 26, 25, .65);
  margin-bottom: 3cqi;
}
.r-name {
  font-family: var(--f-serif);
  font-size: 3.6cqi;
  color: var(--ink);
  margin-bottom: 2cqi;
}
.ink-blue {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 5.2cqi;
  color: var(--blue-ink);
}
.r-list { list-style: none; width: 64%; }
.r-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6.6cqi;
  font-family: var(--f-hand);
  font-weight: 500;
  font-size: 4.4cqi;
  color: var(--blue-ink);
}
.tick {
  flex: none;
  width: 5.2cqi;
  height: 4cqi;
  fill: none;
  stroke: var(--fox);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset .5s ease-out;
}
.obj-report.in .tick { stroke-dashoffset: 0; }
.obj-report.in li:nth-child(1) .tick { transition-delay: .5s; }
.obj-report.in li:nth-child(2) .tick { transition-delay: .8s; }
.obj-report.in li:nth-child(3) .tick { transition-delay: 1.1s; }
.obj-report.in li:nth-child(4) .tick { transition-delay: 1.4s; }

.grade {
  position: absolute;
  right: 6cqi;
  top: 17cqi;
  width: 26cqi;
  height: 22cqi;
  display: grid;
  place-items: center;
}
.grade span {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 15cqi;
  line-height: 1;
  color: var(--fox);
  transform: rotate(-8deg) scale(.4);
  opacity: 0;
  transition: transform .6s var(--ease-spring) 1.8s, opacity .3s 1.8s;
}
.obj-report.in .grade span { transform: rotate(-8deg) scale(1); opacity: 1; }
.grade svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--fox);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1s ease-in-out 2.1s;
}
.obj-report.in .grade svg { stroke-dashoffset: 0; }
.r-note {
  position: absolute;
  right: 7cqi;
  bottom: 3cqi;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 5cqi;
  color: var(--fox);
  transform: rotate(-6deg);
}
.r-brand { display: inline-flex; align-items: center; gap: 1.4cqi; }
.r-icon {
  width: 4.4cqi;
  height: 4.4cqi;
  border-radius: 1cqi;
}

/* ==========================================================================
   Object 04 · Highlighted page (PageMark)
   ========================================================================== */

.bpage {
  position: relative;
  width: 84%;
  margin: 0 auto;
  padding: 9cqi 9cqi 7cqi;
  color: #2a2522;
  background:
    linear-gradient(90deg, rgba(90, 60, 30, .16), transparent 7%),
    var(--paper-3);
  box-shadow:
    .8cqi .8cqi 0 #efe3cf,
    1.6cqi 1.6cqi 0 #e6d7bf,
    0 3cqi 6cqi rgba(0, 0, 0, .45);
  transform: rotate(-2deg);
  transition: transform .6s var(--ease-spring);
}
.obj-page:hover .bpage { transform: rotate(-.5deg); }
.ribbon {
  position: absolute;
  top: -1cqi;
  right: 2.4cqi;
  width: 4cqi;
  height: 30cqi;
  background: var(--fox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%);
  box-shadow: 0 .5cqi 1cqi rgba(0, 0, 0, .2);
}
.bp-chapter {
  font-family: var(--f-mono);
  font-size: 1.8cqi;
  letter-spacing: .16em;
  color: var(--fox-ink);
  margin-bottom: 4cqi;
}
.bp-text {
  font-family: var(--f-serif);
  font-size: 4.3cqi;
  line-height: 1.5;
}
.bp-text::first-letter {
  float: left;
  font-size: 13cqi;
  line-height: .8;
  padding: 1cqi 1.6cqi 0 0;
  color: var(--fox);
}
.bp-text mark {
  color: inherit;
  background-image: linear-gradient(100deg, rgba(255, 170, 90, 0) 0, rgba(255, 170, 90, .85) 1.5%, rgba(255, 170, 90, .7) 96%, rgba(255, 170, 90, 0) 100%);
  background-repeat: no-repeat;
  background-size: 0% 78%;
  background-position: 0 60%;
  padding: 0 .1em;
  transition: background-size 1s cubic-bezier(.6, .1, .3, 1);
  transition-delay: var(--d, 0s);
}
.bp-text mark.g { background-image: linear-gradient(100deg, rgba(160, 185, 232, 0) 0, rgba(160, 185, 232, .8) 1.5%, rgba(160, 185, 232, .65) 96%, rgba(160, 185, 232, 0) 100%); }
.bp-text mark.p { background-image: linear-gradient(100deg, rgba(249, 121, 122, 0) 0, rgba(249, 121, 122, .8) 1.5%, rgba(249, 121, 122, .65) 96%, rgba(249, 121, 122, 0) 100%); }
.obj-page.in .bp-text mark { background-size: 100% 78%; }
.bp-num {
  text-align: center;
  margin-top: 4cqi;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 2.8cqi;
  color: rgba(42, 37, 34, .55);
}
.bp-margin {
  position: absolute;
  right: -16cqi;
  top: 30cqi;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 5.4cqi;
  color: var(--sky);
  transform: rotate(8deg);
}
.bp-margin svg {
  display: block;
  width: 14cqi;
  height: 9cqi;
  fill: none;
  stroke: var(--sky);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scaleX(-1) rotate(-30deg);
  margin-left: -6cqi;
}

.marker {
  position: absolute;
  right: 0;
  bottom: -2cqi;
  display: flex;
  align-items: center;
  height: 7.4cqi;
  transform: rotate(-24deg);
  filter: drop-shadow(0 1.6cqi 1.6cqi rgba(0, 0, 0, .45));
  transition: transform .6s var(--ease-spring);
}
.obj-page:hover .marker { transform: rotate(-30deg) translate(-2cqi, -2cqi); }
.m-tip {
  width: 4cqi;
  height: 5cqi;
  background: #ff9a2e;
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
}
.m-body {
  width: 30cqi;
  height: 100%;
  border-radius: .8cqi;
  background: linear-gradient(#ffa850, var(--fox) 60%, #c96300);
  display: grid;
  place-items: center;
}
.m-body b {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 2.2cqi;
  letter-spacing: .1em;
  color: var(--ink);
}
.m-cap {
  width: 11cqi;
  height: 108%;
  border-radius: .8cqi 2cqi 2cqi .8cqi;
  background: linear-gradient(#4a4540, var(--ink) 60%, #000);
}

/* ==========================================================================
   Object 05 · Manila folders (TabMan)
   ========================================================================== */

.folders {
  position: relative;
  aspect-ratio: 1.36;
  width: 92%;
  margin: 6cqi auto 0;
}
.folder {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 1.6cqi 1.6cqi 1.6cqi;
  box-shadow: 0 -.4cqi 0 rgba(255, 255, 255, .25) inset, 0 2cqi 4cqi rgba(0, 0, 0, .35);
  transition: transform .6s var(--ease-spring);
}
.folder::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: .25;
  mix-blend-mode: multiply;
  border-radius: inherit;
  pointer-events: none;
}
.f3 { top: 0; background: #cda45a; transform: rotate(-3deg); }
.f2 { top: 9%; background: #dcb66c; transform: rotate(1.5deg); }
.f1 { top: 19%; background: #ebc97f; }
.obj-folders:hover .f3 { transform: rotate(-5deg) translateY(-4cqi); }
.obj-folders:hover .f2 { transform: rotate(3deg) translateY(-2cqi); }

.ftab {
  position: absolute;
  top: -6.4cqi;
  left: var(--x);
  width: 28cqi;
  height: 6.6cqi;
  padding: 1.2cqi 2.4cqi 0;
  border-radius: 1.6cqi 1.6cqi 0 0;
  background: inherit;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 4.2cqi;
  line-height: 1;
  color: #5b4520;
  white-space: nowrap;
}
.f1 > .ftab, .f2 > .ftab, .f3 > .ftab { background: inherit; }
.folder > .ftab { background-color: inherit; }
.f3 .ftab { background: #cda45a; }
.f2 .ftab { background: #dcb66c; }
.f1 .ftab { background: #ebc97f; }

.sheet {
  position: absolute;
  left: 6%;
  right: 8%;
  height: 40%;
  background:
    repeating-linear-gradient(transparent 0 2.6cqi, rgba(47, 79, 168, .14) 2.6cqi calc(2.6cqi + 1px)),
    #fffaf1;
  border-radius: .6cqi;
  box-shadow: 0 .6cqi 1.2cqi rgba(0, 0, 0, .15);
}
.s2 { top: 4%; transform: rotate(-4deg); }
.s1 { top: 13%; left: 12%; transform: rotate(3deg); }

.flabel {
  position: absolute;
  left: 7%;
  top: 16%;
  display: flex;
  align-items: center;
  gap: 2.2cqi;
  padding: 2.4cqi 3.6cqi 2.4cqi 2.4cqi;
  background: #fffdf8;
  border-radius: .8cqi;
  box-shadow: 0 .4cqi 1cqi rgba(0, 0, 0, .12);
  transform: rotate(-1.5deg);
}
.flabel img { width: 8cqi; height: 8cqi; border-radius: 1.8cqi; }
.flabel b {
  display: block;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 6.4cqi;
  line-height: 1;
  color: var(--ink);
}
.flabel span {
  font-family: var(--f-mono);
  font-size: 2cqi;
  letter-spacing: .06em;
  color: rgba(27, 26, 25, .6);
}
.stamp {
  position: absolute;
  right: 7%;
  bottom: 16%;
  padding: 1.6cqi 2.6cqi;
  border: .7cqi double var(--fox-deep);
  border-radius: 1cqi;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 2.9cqi;
  line-height: 1.25;
  letter-spacing: .1em;
  text-align: center;
  color: var(--fox-deep);
  opacity: .88;
  transform: rotate(-10deg) scale(1.6);
  opacity: 0;
  mix-blend-mode: multiply;
  -webkit-mask-image: var(--noise), linear-gradient(#000, #000);
  -webkit-mask-composite: source-over;
  transition: transform .35s cubic-bezier(.5, 0, .75, 0) .5s, opacity .2s .5s;
}
.obj-folders.in .stamp { transform: rotate(-10deg) scale(1); opacity: .88; }
.tabcount {
  position: absolute;
  left: 7%;
  bottom: 9%;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 4.4cqi;
  color: #6b5226;
  transform: rotate(-2deg);
}

/* ==========================================================================
   Object 06 · Cassette (Enhancify)
   ========================================================================== */

.tape {
  position: relative;
  width: 88%;
  margin: 0 auto;
  aspect-ratio: 1.58;
  border-radius: 3cqi;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .08), transparent 40%),
    #2c2825;
  box-shadow: inset 0 0 0 .5cqi #3a3531, 0 3cqi 6cqi rgba(0, 0, 0, .55);
  transform: rotate(-3deg);
  transition: transform .6s var(--ease-spring);
}
.obj-tape:hover .tape { transform: rotate(-1deg) translateY(-1cqi); }
.screw {
  position: absolute;
  width: 3cqi;
  height: 3cqi;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d4cec5, #8a847b);
}
.screw::after {
  content: "";
  position: absolute;
  inset: 44% 18%;
  background: #4d4843;
  border-radius: 1px;
  transform: rotate(40deg);
}
.t-label {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 7%;
  height: 63%;
  border-radius: 1.8cqi;
  background: var(--paper);
  overflow: hidden;
  padding: 2.4cqi 4cqi;
}
.t-stripe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13%;
  height: 16%;
  background: linear-gradient(var(--fox) 0 55%, var(--sky) 55% 100%);
}
.t-title {
  position: relative;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 7cqi;
  line-height: 1;
  color: var(--ink);
}
.t-title small {
  font-size: .5em;
  color: var(--fox-ink);
  margin-left: 1.4cqi;
}
.t-window {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 36%;
  height: 26%;
  border-radius: 6cqi;
  background: #1c1917;
  box-shadow: inset 0 .6cqi 1cqi rgba(0, 0, 0, .7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.4cqi;
}
.reel {
  position: relative;
  z-index: 1;
  width: 12cqi;
  height: 12cqi;
  fill: #f6ecdc;
  stroke: #1c1917;
  stroke-width: 2.4;
  stroke-linecap: round;
  animation: spin 2.6s linear infinite;
  animation-play-state: paused;
}
.obj-tape.in .reel { animation-play-state: running; }
.obj-tape:hover .reel { animation-duration: .9s; }
.t-film {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 50%;
  height: 7cqi;
  margin-top: -3.5cqi;
  border-radius: 3cqi;
  background: #5a3a24;
}
.t-sides {
  position: absolute;
  left: 4cqi;
  right: 4cqi;
  bottom: 1.6cqi;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 2cqi;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.eq {
  position: absolute;
  right: 4cqi;
  top: 3cqi;
  display: flex;
  align-items: flex-end;
  gap: .8cqi;
  height: 6cqi;
}
.eq i {
  width: 1.2cqi;
  height: 100%;
  background: var(--fox);
  border-radius: .4cqi;
  transform-origin: bottom;
  animation: eq 1s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.obj-tape.in .eq i { animation-play-state: running; }
.eq i:nth-child(1) { animation-duration: .7s; }
.eq i:nth-child(2) { animation-duration: .45s; }
.eq i:nth-child(3) { animation-duration: .9s; }
.eq i:nth-child(4) { animation-duration: .55s; }
.eq i:nth-child(5) { animation-duration: .8s; }
.eq i:nth-child(6) { animation-duration: .5s; }
.eq i:nth-child(7) { animation-duration: .65s; }
@keyframes eq {
  from { transform: scaleY(.2); }
  to { transform: scaleY(1); }
}
.t-bottom {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 18%;
  background: #3a3531;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 16%;
}
.t-bottom i {
  width: 3cqi;
  height: 3cqi;
  border-radius: 50%;
  background: #1c1917;
}

/* ==========================================================================
   Object 07 · Kitchen timer (Leaf Auto Reloader)
   ========================================================================== */

.timer {
  position: relative;
  width: 64cqi;
  margin: 4cqi auto 8cqi;
}
.t-body {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffa347, var(--fox) 55%, var(--fox-deep));
  box-shadow: inset 0 -1.6cqi 0 rgba(0, 0, 0, .15), 0 3cqi 6cqi rgba(0, 0, 0, .5);
  animation: ring 7s infinite;
}
.t-face {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: var(--paper-3);
  box-shadow: inset 0 .8cqi 1.6cqi rgba(0, 0, 0, .25);
  overflow: hidden;
}
.t-dial {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: countdown 7s infinite;
}
.t-dial::before, .t-dial::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.t-dial::before {
  background: repeating-conic-gradient(from -.4deg, var(--ink) 0 .8deg, transparent .8deg 6deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 83%, #000 84% 92%, transparent 93%);
  mask: radial-gradient(circle closest-side, transparent 83%, #000 84% 92%, transparent 93%);
  opacity: .55;
}
.t-dial::after {
  background: repeating-conic-gradient(from -.8deg, var(--fox) 0 1.6deg, transparent 1.6deg 30deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 78%, #000 79% 92%, transparent 93%);
  mask: radial-gradient(circle closest-side, transparent 78%, #000 79% 92%, transparent 93%);
}
.t-num {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6cqi;
  margin-left: -3cqi;
  margin-top: -1.8cqi;
  text-align: center;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 3cqi;
  line-height: 3.6cqi;
  color: var(--ink);
  transform: rotate(var(--a)) translateY(-19cqi);
}
.t-pointer {
  position: absolute;
  left: 50%;
  top: 4.4%;
  width: 4cqi;
  height: 5cqi;
  margin-left: -2cqi;
  background: var(--fox);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 2;
}
.t-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22cqi;
  height: 22cqi;
  margin: -11cqi 0 0 -11cqi;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e6edf7, var(--sky) 60%, var(--sky-deep));
  box-shadow: 0 1cqi 2cqi rgba(0, 0, 0, .35), inset 0 0 0 .6cqi rgba(255, 255, 255, .15);
  display: grid;
  place-items: center;
  z-index: 2;
}
.t-knob svg {
  width: 60%;
  height: 60%;
  fill: none;
  stroke: var(--outline);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t-feet {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -3cqi;
  height: 5cqi;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 0, var(--fox-deep) 0 3cqi, transparent 3.1cqi),
    radial-gradient(circle at 88% 0, var(--fox-deep) 0 3cqi, transparent 3.1cqi);
}
.t-ding {
  position: absolute;
  right: -12cqi;
  top: 2cqi;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 7cqi;
  color: var(--sky);
  transform: rotate(12deg) scale(0);
  animation: ding 7s infinite;
}
.t-sticker {
  position: absolute;
  left: -13cqi;
  bottom: 4cqi;
  width: 21cqi;
  height: 21cqi;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--sky);
  color: var(--outline);
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 3.6cqi;
  line-height: 1;
  box-shadow: inset 0 0 0 .6cqi #fff, 0 1cqi 2cqi rgba(0, 0, 0, .35);
  transform: rotate(-12deg);
}
@keyframes countdown {
  0% { transform: rotate(160deg); }
  84% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes ring {
  0%, 84%, 100% { transform: rotate(0); }
  86% { transform: rotate(-5deg); }
  88% { transform: rotate(5deg); }
  90% { transform: rotate(-4deg); }
  92% { transform: rotate(3deg); }
  94% { transform: rotate(0); }
}
@keyframes ding {
  0%, 83% { transform: rotate(12deg) scale(0); opacity: 0; }
  86% { transform: rotate(12deg) scale(1.2); opacity: 1; }
  88%, 97% { transform: rotate(12deg) scale(1); opacity: 1; }
  100% { transform: rotate(12deg) scale(.6); opacity: 0; }
}

/* ==========================================================================
   The whole shelf · spiral notebook
   ========================================================================== */

.shelf {
  position: relative;
  padding: 40px var(--gutter) 150px;
}
.spiral {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  --in-rot: 2deg;
}
.rings {
  position: absolute;
  left: 22px;
  right: 22px;
  top: -18px;
  height: 46px;
  z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='46'%3E%3Ccircle cx='17' cy='36' r='5' fill='%231b1a19'/%3E%3Cpath d='M17 36 V11 a6 6 0 0 1 12 0 V20' fill='none' stroke='%23c9c2b6' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 34px 46px repeat-x;
}
.spiral-page {
  position: relative;
  padding: 64px 56px 40px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px 6px 18px 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
  transform: rotate(-.6deg);
}
.spiral-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: .22;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}
.shelf-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 26px;
}
.shelf-title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1;
  color: var(--ink);
}
.shelf-hand {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 26px;
  color: var(--fox);
  transform: rotate(-3deg);
}
.shelf-list { list-style: none; position: relative; z-index: 1; }
.shelf-list li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 12px;
  margin: 0 -12px;
  border-radius: 12px;
  background-image: linear-gradient(90deg, rgba(27, 26, 25, .22) 50%, transparent 50%);
  background-size: 10px 1.5px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  transition: background-color .25s;
}
.shelf-list li:last-child { background-image: none; }
.shelf-list li:hover { background-color: rgba(247, 125, 2, .12); }
.shelf-list img {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
  background: #fff;
}
.shelf-list img.ic-bid { padding: 9px; }
.sl-body b {
  display: block;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.05;
}
.sl-body span {
  font-size: 15px;
  color: #5b5047;
}
.sl-links {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}
.sl-links a {
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.sl-links a:not(.sl-priv) {
  padding: 0 16px;
  min-height: 38px;
  border-radius: 99px;
  border: 1.5px solid var(--ink);
  transition: background .2s, color .2s;
}
.sl-links a:not(.sl-priv):hover { background: var(--ink); color: var(--paper); }
.sl-priv {
  color: #6b5f55;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-weight: 500 !important;
}
.sl-priv:hover { color: var(--fox-ink); }
.sl-type {
  font-family: var(--f-hand);
  font-size: 19px;
  font-weight: 700;
  color: var(--fox-ink);
}

/* ==========================================================================
   Home · collage of screens
   ========================================================================== */

.collage {
  position: relative;
  max-width: calc(1180px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 150px var(--gutter) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 16%;
}
.col {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 140px;
}
.col-l { align-items: flex-start; }
.col-r { align-items: flex-end; padding-top: 240px; }

.shot-wrap {
  position: relative;
  width: min(var(--w, 100%), 100%);
  translate: var(--x, 0) 0;
  will-change: transform;
}
.shot {
  position: relative;
  display: block;
  padding: 10px;
  background: #fffdf8;
  border-radius: 22px;
  box-shadow: 0 24px 44px rgba(0, 0, 0, .5);
  transform: rotate(var(--r, 0deg));
  transition: transform .5s var(--ease-spring), box-shadow .4s;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 16 / 10);
  object-fit: cover;
  object-position: top center;
  border-radius: 13px;
  background: #e9e4dc;
}
.shot:hover,
.shot:focus-visible {
  transform: rotate(0deg) scale(1.035);
  box-shadow: 0 34px 60px rgba(0, 0, 0, .6);
  z-index: 3;
}
.shot-tag {
  position: absolute;
  left: 18px;
  bottom: -16px;
  padding: 3px 14px 5px;
  border-radius: 99px;
  background: var(--fox);
  color: var(--outline);
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  white-space: nowrap;
  opacity: 0;
  transform: rotate(-4deg) scale(.7);
  transition: opacity .25s, transform .35s var(--ease-spring);
  pointer-events: none;
}
.shot:hover .shot-tag,
.shot:focus-visible .shot-tag { opacity: 1; transform: rotate(-4deg) scale(1); }
@media (hover: none) {
  .shot-tag { opacity: 1; transform: rotate(-4deg); }
}

/* ==========================================================================
   Home · the cutting-mat board
   ========================================================================== */

.board-sec {
  position: relative;
  padding: 150px var(--gutter) 60px;
}
.board-fox {
  position: relative;
  z-index: 3;
  display: block;
  width: 240px;
  margin: 0 auto -10px;
  fill: none;
  stroke: var(--fox);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.board-fox .bf { fill: var(--ink); }
.board-fox .bfill { fill: var(--fox); stroke: none; }
.board-fox .bz {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 16px;
  fill: var(--chalk-3);
  stroke: none;
  animation: zzz 1.4s ease-in-out infinite;
}
.board-fox .bz.b2 { animation-delay: .7s; }

.board-wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  transform: rotate(-.6deg);
}
.board-card {
  position: absolute;
  left: 14%;
  right: -1.2%;
  top: -16px;
  bottom: -28px;
  border-radius: 16px;
  background: var(--fox);
  transform: rotate(-1.4deg);
}
.mat {
  position: relative;
  z-index: 1;
  padding: 46px 46px 84px 88px;
  border: 2px solid rgba(251, 241, 224, .6);
  border-radius: 28px;
  background:
    linear-gradient(rgba(251, 241, 224, .08) 1.5px, transparent 1.5px) 0 0 / 66px 66px,
    linear-gradient(90deg, rgba(251, 241, 224, .08) 1.5px, transparent 1.5px) 0 0 / 66px 66px,
    var(--ink-2);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
}
.mat::before {
  content: "";
  position: absolute;
  inset: 16px 16px 16px 62px;
  border: 1.5px solid rgba(251, 241, 224, .3);
  border-radius: 18px;
  pointer-events: none;
}
.board-nums {
  position: absolute;
  left: 16px;
  top: 30px;
  bottom: 30px;
  overflow: hidden;
  list-style: none;
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--chalk-2);
}
.board-nums li {
  width: 34px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cross {
  position: absolute;
  width: 30px;
  height: 30px;
  pointer-events: none;
}
.cross::before, .cross::after {
  content: "";
  position: absolute;
  background: rgba(251, 241, 224, .6);
}
.cross::before { left: 50%; top: 0; bottom: 0; width: 1.5px; }
.cross::after { top: 50%; left: 0; right: 0; height: 1.5px; }

.board-grid {
  position: relative;
  z-index: 1;
  columns: 3;
  column-gap: 26px;
}
.board-grid .shot-wrap {
  break-inside: avoid;
  width: 100%;
  margin-bottom: 26px;
}
.shot.sm { padding: 8px; border-radius: 18px; }
.shot.sm img { border-radius: 11px; }
.board-caption {
  position: absolute;
  right: 44px;
  bottom: 22px;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 27px;
  color: var(--chalk);
}

/* the ID badge hanging off the board */
.badge-wrap {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  margin-top: -34px;
}
.badge {
  position: relative;
  width: 230px;
  padding: 26px 18px 18px;
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 22px 40px rgba(0, 0, 0, .5);
  text-align: center;
  transform-origin: 50% -80px;
  animation: swing 6s ease-in-out infinite;
}
.badge::before {
  content: "";
  position: absolute;
  inset: -11px;
  border: 2px dashed var(--fox);
  border-radius: 20px;
  pointer-events: none;
}
.badge-slot {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 46px;
  height: 8px;
  margin-left: -23px;
  border-radius: 99px;
  background: var(--ink);
}
.badge img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}
.badge figcaption { margin-top: 10px; }
.badge-sig {
  display: block;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  color: var(--fox-deep);
  transform: rotate(-4deg);
}
.badge-role {
  display: block;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: #6b5f55;
}
@keyframes swing {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

.about-note {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 70px auto 0;
  text-align: center;
}
.about-note p {
  font-family: var(--f-serif);
  font-size: 26px;
  line-height: 1.3;
  color: var(--chalk-2);
}
.about-note a:not(.see-work) {
  color: var(--chalk);
  text-decoration: underline;
  text-decoration-color: var(--fox);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.see-work {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 32px;
  color: var(--fox);
  text-decoration: none;
  transform: rotate(-2deg);
  transition: color .2s, transform .4s var(--ease-spring);
}
.see-work svg {
  width: 64px;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--ease-spring);
}
.see-work:hover { color: var(--cream); transform: rotate(0deg); }
.see-work:hover svg { transform: translateX(8px); }

/* ==========================================================================
   Home · say hi
   ========================================================================== */

.connect {
  position: relative;
  padding: 150px var(--gutter) 150px;
}
.hello-card {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 40px;
  padding: 44px;
  border-radius: 30px;
  background: var(--paper);
  color: var(--outline);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}
.hc-title {
  padding: 10px 0 8px;
  border-top: 2px solid var(--fox);
  border-bottom: 2px solid var(--fox);
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  color: var(--fox-deep);
}
.hc-list { list-style: none; }
.hc-list li { border-bottom: 1.5px dashed rgba(247, 125, 2, .5); }
.hc-list label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  color: var(--fox-deep);
  cursor: pointer;
}
.hc-list input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.hc-box {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--fox-deep);
  border-radius: 4px 6px 4px 5px;
}
.hc-box svg {
  width: 24px;
  height: 20px;
  margin: -6px -8px 0 0;
  fill: none;
  stroke: var(--fox-deep);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset .3s ease-out;
}
.hc-list input:checked + .hc-box svg { stroke-dashoffset: 0; }
.hc-list input:focus-visible + .hc-box { outline: 2.5px dashed var(--fox); outline-offset: 3px; }

.hc-actions { margin-top: 28px; text-align: center; }
.chat-btn {
  display: inline-block;
  padding: 6px 30px 10px;
  border: 2.5px solid var(--fox-deep);
  border-radius: 6px 12px 7px 14px;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  color: var(--fox-deep);
  text-decoration: none;
  transform: rotate(-1.5deg);
  transition: background .2s, color .2s, transform .35s var(--ease-spring);
}
.chat-btn:hover { background: var(--fox); color: var(--paper-3); transform: rotate(1deg) scale(1.05); }
.hello-card.ready .chat-btn { animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: rotate(-1.5deg) scale(1); }
  50% { transform: rotate(1.5deg) scale(1.07); }
}
.hc-mail {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--f-mono);
  font-size: 13px;
  color: #6b5f55;
}
.hc-mail button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 99px;
  border: 1.5px solid #6b5f55;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 12.5px;
  color: #4a3f36;
  transition: background .2s, color .2s;
}
.hc-mail button:hover { background: var(--outline); color: var(--paper); border-color: var(--outline); }

.hc-frame {
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
}
.hc-scribble {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--fox);
  stroke-width: 9;
  stroke-linejoin: round;
}
.hc-fox {
  position: relative;
  width: 72%;
  fill: none;
  stroke: var(--fox-deep);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.hc-fox .bf2 { fill: var(--paper-3); }
.hc-fox .bfill { fill: var(--fox-deep); stroke: none; }
.hc-say {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 22px;
  text-anchor: middle;
  fill: var(--fox-deep);
  stroke: none;
}
.coffee-note {
  position: relative;
  z-index: 2;
  display: block;
  width: fit-content;
  margin: 34px auto 0;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 25px;
  color: var(--chalk-2);
  text-decoration: none;
  transition: color .2s;
}
.coffee-note:hover { color: var(--fox); }
.doodle.doodle-laptop {
  left: 50%;
  bottom: 30px;
  width: 120px;
  margin-left: -60px;
}

/* ==========================================================================
   Work page bits
   ========================================================================== */

.work-page { padding-top: 150px; }
.work-cta {
  text-align: center;
  padding: 10px var(--gutter) 130px;
}
.work-cta p {
  font-family: var(--f-serif);
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1;
  color: var(--chalk);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot { position: relative; padding: 0 var(--gutter) 34px; }
.sleepy {
  display: block;
  width: 190px;
  margin: 0 auto -8px;
  position: relative;
  z-index: 2;
  fill: none;
  stroke: var(--chalk);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sleepy .paper, .sleepy .tip { fill: var(--ink); }
.zzz {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 18px;
  fill: var(--sky);
  stroke: none;
  animation: zzz 3s ease-in-out infinite;
}
.zzz.z2 { font-size: 22px; animation-delay: .5s; }
.zzz.z3 { font-size: 26px; animation-delay: 1s; }
@keyframes zzz {
  0%, 100% { opacity: .2; transform: translateY(4px); }
  50% { opacity: 1; transform: translateY(-3px); }
}

.foot-band {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--fox);
  color: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1.5px var(--fox-deep);
}
.marquee { overflow: hidden; padding: 16px 0; }
.mq-track {
  display: flex;
  width: max-content;
  gap: 26px;
  animation: marquee 38s linear infinite;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.foot-band:hover .mq-track { animation-play-state: paused; }

.foot-sig {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  margin: 44px 0 4px;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 76px;
  line-height: 1;
  color: var(--fox);
  transform: rotate(-3deg);
}
.foot-sig svg {
  width: 36px;
  height: 28px;
  margin-bottom: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
}
.foot-sig svg circle { fill: currentColor; stroke: none; }

.foot-row {
  max-width: 1180px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 14px;
  color: var(--chalk-3);
}
.foot-row a { text-decoration: none; color: var(--chalk-2); }
.foot-row a:hover { color: var(--sky); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, calc(100% + 40px));
  visibility: hidden;
  padding: 12px 22px;
  border-radius: 99px;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 23px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  z-index: 120;
  transition: transform .45s var(--ease-spring), visibility 0s linear .45s;
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; transition: transform .45s var(--ease-spring), visibility 0s; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  :root { --tile: 42px; --rail-gap: 10px; }
  .page-top { padding: 52px 40px 46px; }
  .page-bottom { padding: 48px 40px 64px; }
  .collage { column-gap: 8%; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .hero-art { max-width: 560px; justify-self: center; width: 100%; }

  .collage { column-gap: 5%; }
  .col { gap: 90px; }
  .col-r { padding-top: 170px; }
  .shot-wrap { translate: 0 0; }
  .board-grid { columns: 2; }
  .hello-card { grid-template-columns: 1fr; }
  .hc-frame { width: 100%; max-width: 340px; min-height: 300px; justify-self: center; }

  .project, .project.flip { row-gap: 40px; margin-bottom: 140px; }
  .project .obj, .project.flip .obj { grid-column: 1 / -1; grid-row: 1; max-width: 640px; width: 100%; justify-self: center; }
  .project .notes-col, .project.flip .notes-col { grid-column: 2 / span 10; grid-row: 2; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .rail { display: none; }

  .nav { top: 10px; }
  .nav-pill { gap: 0; padding: 4px 8px 4px 4px; }
  .nav-link { font-size: 22px; padding: 8px 10px 12px; }
  .nav-sq { left: 8px; right: 8px; width: calc(100% - 16px); }

  .hero { padding-top: 92px; }
  .page-top {
    border-radius: 22px 22px 4px 4px;
    padding: 36px 22px 28px;
    box-shadow:
      inset 0 -20px 22px -20px rgba(120, 60, 10, .3),
      0 0 0 11px var(--fox),
      0 0 0 12.5px var(--fox-deep),
      0 20px 40px rgba(0, 0, 0, .45);
  }
  .page-top::before { background-size: 26px 26px; }
  .page-bottom-wrap { margin-top: 12px; }
  .page-bottom {
    min-height: 0;
    padding: 36px 20px 120px;
    border-radius: 4px 4px 18px 18px;
    box-shadow:
      0 0 0 11px var(--fox),
      0 0 0 12.5px var(--fox-deep),
      0 24px 44px rgba(0, 0, 0, .5);
    transform: rotateX(8deg);
  }
  .ribbon-band { left: -26px; width: 72%; height: 18px; }
  .beliefs-label { font-size: 23px; }
  .corner-l { width: 150px; left: 10px; }
  .corner-r { width: 92px; right: 4px; }

  .doodle { display: none; }
  .doodle.twinkle { display: block; }

  .collage { grid-template-columns: 1fr; padding-top: 80px; }
  .col, .col-r { gap: 50px; padding-top: 0; }
  .col-r { margin-top: 50px; }
  .col-l, .col-r { align-items: flex-start; }
  .shot-wrap { width: 90%; transform: none !important; }
  .col .shot-wrap:nth-child(even) { align-self: flex-end; }

  .board-sec { padding-top: 90px; }
  .board-fox { width: 180px; }
  .mat { padding: 26px 16px 64px 46px; border-radius: 20px; }
  .mat::before { inset: 10px 10px 10px 38px; border-radius: 12px; }
  .board-nums { left: 6px; top: 16px; font-size: 11px; }
  .board-nums li { width: 26px; height: 36px; }
  .board-grid { column-gap: 14px; }
  .board-grid .shot-wrap { margin-bottom: 14px; }
  .shot.sm { padding: 5px; border-radius: 12px; }
  .shot.sm img { border-radius: 8px; }
  .cross { display: none; }
  .board-caption { right: 18px; bottom: 16px; font-size: 20px; }
  .badge-wrap { margin-top: 26px; }
  .badge { width: 190px; }
  .about-note { margin-top: 56px; }
  .about-note p { font-size: 21px; }
  .see-work { font-size: 28px; }

  .connect { padding-top: 90px; padding-bottom: 170px; }
  .hello-card { padding: 26px 20px; border-radius: 22px; gap: 26px; }
  .hc-title { font-size: 38px; }
  .hc-list label { font-size: 23px; }
  .coffee-note { font-size: 22px; text-align: center; }
  .doodle.doodle-laptop { display: block; width: 96px; margin-left: -48px; }

  .work-page { padding-top: 110px; }
  .section-head { margin-bottom: 80px; }
  .emblem { width: 96px; height: 96px; }
  .section-sub { font-size: 16.5px; }
  .project, .project.flip { margin-bottom: 110px; row-gap: 34px; }
  .project .notes-col, .project.flip .notes-col { grid-column: 1 / -1; }
  .p-tag { font-size: 25px; }
  .p-list { font-size: 21px; }
  .sticker-new { left: -6cqi; }
  .bp-margin { display: none; }
  .t-sticker { left: -8cqi; }
  .t-ding { right: -6cqi; }

  .shelf { padding-bottom: 110px; }
  .spiral-page { padding: 50px 18px 24px; transform: none; }
  .rings { left: 12px; right: 12px; }
  .shelf-list li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 14px 8px; margin: 0 -8px; }
  .shelf-list img { width: 44px; height: 44px; border-radius: 11px; grid-row: span 2; }
  .shelf-list img.ic-bid { padding: 7px; }
  .sl-body b { font-size: 23px; }
  .sl-body span { font-size: 14px; }
  .sl-links { grid-column: 2; gap: 14px; }

  .mq-track { font-size: 25px; }
  .foot-sig { font-size: 54px; }
  .foot-row { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .rail-track, .mq-track, .em-spin, .badge { animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Nav · scribble circle + a doodle that pops up on hover
   ========================================================================== */

.nav-link .nav-circ {
  position: absolute;
  left: -4px;
  right: -4px;
  top: 0;
  width: calc(100% + 8px);
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--fox);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset .55s var(--ease-out);
  pointer-events: none;
}
.nav-link:hover .nav-circ,
.nav-link:focus-visible .nav-circ,
.nav-link.active .nav-circ { stroke-dashoffset: 0; }
.nav-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  width: 38px;
  height: 34px;
  margin-left: -19px;
  fill: none;
  stroke: var(--chalk);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateY(12px) scale(.3) rotate(-24deg);
  transition: opacity .2s, transform .45s var(--ease-spring);
  pointer-events: none;
}
.nav-spark {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: 60px;
  height: 30px;
  margin-left: -30px;
  fill: none;
  stroke: var(--fox);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s .1s, transform .4s var(--ease-spring) .1s;
  pointer-events: none;
}
.nav-link:hover .nav-pop,
.nav-link:focus-visible .nav-pop { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
.nav-link:hover .nav-spark,
.nav-link:focus-visible .nav-spark { opacity: 1; transform: scale(1); }
.nav-link:hover { transform: none; }
.nav { top: 34px; }
.nav.scrolled { top: 14px; }
.nav { transition: top .35s var(--ease-out); }

/* ==========================================================================
   Headline · the last word keeps rewriting itself
   ========================================================================== */


/* ==========================================================================
   Beliefs · three scraps of paper that leave the notebook and ride down the collage
   ========================================================================== */

.story { position: relative; }

/* the empty spot on the notebook page where the notes rest */
.beliefs-slot {
  position: relative;
  width: min(560px, 100%);
  height: 330px;
  margin: 18px auto 0;
}

/* one layer that travels: sticky inside a track that spans book + collage */
.notes-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  z-index: 6;
  pointer-events: none;
}
.notes-pin {
  position: sticky;
  top: 40vh;
  height: 0;
}
.notes-stage {
  --t: 0;
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sn {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  will-change: transform;
  transform: translate(-50%, -50%);
}
.sn[data-role="top"] { z-index: 3; }
.sn[data-role="next"] { z-index: 2; }
.sn[data-role="later"] { z-index: 1; }
.sn[data-role="gone"] { z-index: 4; pointer-events: none; }

.belief {
  position: relative;
  margin: 0;
  color: var(--outline);
}
/* the stack only animates when a note is dealt (not on every scroll frame) */
.sn[data-role="top"] .belief { transition: transform .35s var(--ease-spring); }
.notes-stage.dealing .sn .belief { transition: transform .8s var(--ease-spring), opacity .55s ease; }
/* how each note sits in the stack (scaled in by --t as the notes gather) */
.sn[data-role="top"] .belief { transform: rotate(calc(-3deg * var(--t))); }
.sn[data-role="next"] .belief { transform: translate(calc(16px * var(--t)), calc(-14px * var(--t))) rotate(calc(5deg * var(--t))); }
.sn[data-role="later"] .belief { transform: translate(calc(-14px * var(--t)), calc(-26px * var(--t))) rotate(calc(-7deg * var(--t))); }
.sn[data-role="gone"] .belief { transform: translate(10px, 120px) rotate(10deg); opacity: 0; }
.sn[data-role="top"]:hover .belief { transform: rotate(0deg) translateY(-4px) scale(1.03); }

/* torn page from a spiral notebook, handwritten */
.b-torn {
  width: 232px;
  padding: 1.1em .8em .5em 1.3em;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.02;
  background:
    linear-gradient(90deg, transparent .9em, rgba(228, 81, 63, .6) .9em calc(.9em + 2px), transparent calc(.9em + 2px)),
    repeating-linear-gradient(transparent 0 calc(1.02em - 2px), rgba(47, 79, 168, .42) calc(1.02em - 2px) 1.02em),
    #f6ecdd;
  background-position: 0 0, 0 1.12em, 0 0;
  clip-path: polygon(0 .5em, 5% .2em, 10% .45em, 15% .1em, 20% .4em, 25% .15em, 30% .45em, 35% .1em, 40% .4em, 45% .15em, 50% .45em, 55% .1em, 60% .4em, 65% .15em, 70% .45em, 75% .1em, 80% .4em, 85% .15em, 90% .45em, 95% .1em, 100% .35em, 100% 100%, 0 100%);
}
.sn:has(.b-torn) { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .3)); }
.b-rings {
  position: absolute;
  top: .55em;
  left: 1em;
  right: 1em;
  height: .28em;
  background: radial-gradient(circle, #3a3436 0 38%, transparent 42%) 0 0 / .62em .28em repeat-x;
}
/* grey graph-paper card, typewritten */
.b-grid {
  width: 238px;
  padding: .7em .8em;
  font-family: 'Special Elite', var(--f-mono);
  font-size: 23px;
  line-height: 1.12;
  background:
    linear-gradient(rgba(60, 60, 70, .14) 1px, transparent 1px) 0 0 / .6em .6em,
    linear-gradient(90deg, rgba(60, 60, 70, .14) 1px, transparent 1px) 0 0 / .6em .6em,
    #d9d6d0;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .3);
}
/* kraft square with a paperclip, set in serif */
.b-kraft {
  display: flex;
  align-items: flex-end;
  width: 190px;
  height: 164px;
  padding: .9em .7em .6em;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .12), transparent 60%),
    #c7ab88;
  box-shadow: 0 12px 20px rgba(0, 0, 0, .32);
}
.b-clip {
  position: absolute;
  top: -.55em;
  left: .6em;
  width: .5em;
  height: 1.3em;
  fill: none;
  stroke: #8b857c;
  stroke-width: 3;
  stroke-linecap: round;
}

/* ==========================================================================
   Collage · two columns of screens, a lane in the middle for the note
   ========================================================================== */

.collage { grid-template-columns: minmax(0, 1fr) 230px minmax(0, 1fr); column-gap: 0; }
.col-l { grid-column: 1; grid-row: 1; }
.col-r { grid-column: 3; grid-row: 1; padding-top: 180px; }
.col { gap: 100px; }

/* ==========================================================================
   The badge tucks under the board
   ========================================================================== */

.board-wrap { z-index: 2; }
.badge-wrap { z-index: 1; margin-top: -66px; }

/* ==========================================================================
   Say hi · strike-through, a frame that loads the fox, a reward for all three
   ========================================================================== */

.hello-wrap { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
.hello-card { z-index: 2; }

.hc-text { position: relative; transition: color .3s; }
.hc-text::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 54%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--fox-deep);
  transform: scaleX(0) rotate(-1deg);
  transform-origin: left;
  transition: transform .35s ease-out .1s;
}
.hc-list input:checked ~ .hc-text { color: rgba(217, 106, 0, .6); }
.hc-list input:checked ~ .hc-text::after { transform: scaleX(1) rotate(-1deg); }

.hc-frame { cursor: pointer; }
.hc-fox {
  opacity: 0;
  transform: scale(.88) rotate(-3deg);
  transition: opacity .35s ease .45s, transform .6s var(--ease-spring) .45s;
}
.hc-frame:hover .hc-fox,
.hc-frame.show .hc-fox { opacity: 1; transform: none; }
.hc-hint {
  position: absolute;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 24px;
  color: rgba(217, 106, 0, .55);
  transform: rotate(-4deg);
  transition: opacity .2s;
}
.hc-frame:hover .hc-hint,
.hc-frame.show .hc-hint { opacity: 0; }
.hc-spin {
  position: absolute;
  width: 34px;
  height: 34px;
  opacity: 0;
}
.hc-spin i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 10px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--fox);
  transform-origin: 50% 17px;
}
.hc-spin i:nth-child(2) { transform: rotate(120deg); }
.hc-spin i:nth-child(3) { transform: rotate(240deg); }
.hc-frame:hover .hc-spin,
.hc-frame.show .hc-spin { animation: spinload .5s linear; }
@keyframes spinload {
  0% { opacity: 1; transform: rotate(0deg); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: rotate(240deg); }
}

.hc-reward {
  position: relative;
  z-index: 1;
  display: block;
  width: min(420px, 90%);
  margin: -70px auto 0;
  padding: 90px 26px 22px;
  border-radius: 0 0 18px 18px;
  background:
    repeating-linear-gradient(transparent 0 30px, rgba(47, 79, 168, .16) 30px 31px),
    var(--paper-3);
  color: var(--outline);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 20px 36px rgba(0, 0, 0, .45);
  transform: translateY(-40px) rotate(0deg);
  opacity: 0;
  visibility: hidden;
  transition: transform .7s var(--ease-spring), opacity .3s, visibility 0s .7s;
}
.hc-reward span { display: block; font-family: var(--f-mono); font-size: 13px; color: #6b5f55; }
.hc-reward .hc-reward-big {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  color: var(--fox-deep);
  margin-bottom: 4px;
}
.hello-wrap.all .hc-reward {
  transform: translateY(0) rotate(-1.5deg);
  opacity: 1;
  visibility: visible;
  transition: transform .7s var(--ease-spring), opacity .3s, visibility 0s;
}
.hc-reward:hover .hc-reward-big { color: var(--fox); }

.confetti { position: absolute; left: 50%; top: 60%; width: 0; height: 0; z-index: 5; pointer-events: none; }
.confetti svg {
  position: absolute;
  width: 22px;
  height: 22px;
  fill: var(--fox);
  animation: burst 1.3s cubic-bezier(.2, .7, .3, 1) forwards;
}
.confetti svg.alt { fill: var(--cream); }
@keyframes burst {
  0% { transform: translate(0, 0) rotate(0deg) scale(.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 0; }
}

/* ==========================================================================
   Footer · a quiet little ticker instead of a band
   ========================================================================== */

.foot-band {
  max-width: 620px;
  background: none;
  box-shadow: none;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.foot-band .marquee { padding: 8px 0; }
.foot-band .mq-track { font-size: 21px; color: var(--chalk-2); gap: 20px; }
.foot-band .mq-track span:nth-child(2n) { color: var(--fox); }

@media (max-width: 980px) {
  .collage { grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .nav { top: 10px; }
  .nav.scrolled { top: 10px; }
  .nav-pop, .nav-spark { display: none; }
  .collage { grid-template-columns: 1fr; }
  .col-l, .col-r { grid-column: 1; grid-row: auto; }
  .col-r { padding-top: 0; }
  .col { gap: 50px; }
  .hc-reward { margin-top: -60px; padding-top: 80px; }
  .foot-band .mq-track { font-size: 19px; }
}

/* ==========================================================================
   The notebook's front page flips over to reveal "about me"
   ========================================================================== */

.page-top.sheets {
  display: grid;
  padding: 0;
  overflow: visible;
  perspective: 2000px;
}
.page-top.sheets::before { display: none; }
.nb-sheet {
  position: relative;
  grid-area: 1 / 1;
  padding: 60px 52px 54px;
  border-radius: 34px 34px 6px 6px;
  background: var(--paper);
  overflow: hidden;
}
.nb-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--grid) 1.5px, transparent 1.5px);
  background-size: 34px 34px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(#000 50%, transparent 96%);
  mask-image: linear-gradient(#000 50%, transparent 96%);
  pointer-events: none;
}
.sheet-hero {
  z-index: 2;
  transform-origin: 50% 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: inset 0 -24px 26px -22px rgba(120, 60, 10, .3);
  transition: transform 1.05s cubic-bezier(.6, .02, .25, 1), box-shadow 1.05s;
}
.sheet-about {
  z-index: 1;
  box-shadow: inset 0 -24px 26px -22px rgba(120, 60, 10, .3);
}
/* while the page is down, the one underneath sits a touch darker */
.sheet-about::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(90, 50, 10, .1);
  pointer-events: none;
  transition: opacity 1s;
}
.sheets.flipped .sheet-hero {
  transform: rotateX(180deg);
  box-shadow: 0 -40px 60px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.sheets.flipped .sheet-about::after { opacity: 0; }
.sheets:not(.flipped) .sheet-about { visibility: hidden; transition: visibility 0s 1.05s; }
.sheets.flipped .sheet-about { visibility: visible; }
.sheets:not(.flipped) .sheet-about * { visibility: hidden; }
.sheets.flipped .sheet-hero * { visibility: hidden; transition: visibility 0s .5s; }

/* without JavaScript the about page simply sits under the hero */
html:not(.js) .sheet-about { grid-area: 2 / 1; visibility: visible; }
html:not(.js) .sheet-about * { visibility: visible; }
html:not(.js) .dog-ear { display: none; }

/* the folded corner */
.dog-ear {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 62px;
  height: 62px;
  cursor: pointer;
  background: linear-gradient(to bottom right, transparent 49.5%, #e3c49c 50%, #f1dcc0 80%);
  border-radius: 14px 0 6px 0;
  filter: drop-shadow(-4px -4px 5px rgba(90, 50, 10, .18));
  transition: width .35s var(--ease-spring), height .35s var(--ease-spring);
}
.dog-ear::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top left, transparent 50%, var(--ink) 50.5%);
  opacity: .9;
  border-radius: inherit;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.dog-ear:hover, .dog-ear:focus-visible { width: 82px; height: 82px; }
.dog-ear-label {
  position: absolute;
  right: calc(100% + 6px);
  bottom: 14px;
  white-space: nowrap;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 23px;
  color: var(--fox-deep);
  transform: rotate(-6deg);
  transition: transform .35s var(--ease-spring);
}
.dog-ear-label::after { content: " ↷"; }
.sheet-about .dog-ear-label::after { content: " ↶"; }
.dog-ear:hover .dog-ear-label { transform: rotate(-3deg) translateX(-6px); }
.sheet-hero .dog-ear { animation: nudge-ear 5s ease-in-out 5s infinite; }
@keyframes nudge-ear {
  0%, 88%, 100% { width: 62px; height: 62px; }
  93% { width: 80px; height: 80px; }
}

/* the about page itself */
.about-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: center;
}
.about-photo {
  position: relative;
  justify-self: center;
  width: min(270px, 100%);
  padding: 12px 12px 52px;
  background: #fffdf8;
  box-shadow: 0 16px 30px rgba(80, 40, 10, .25);
  transform: rotate(-4deg);
}
.about-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.about-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 26px;
  color: var(--outline);
}
.about-tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 90px;
  height: 24px;
  margin-left: -45px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px), rgba(247, 125, 2, .55);
  transform: rotate(-3deg);
}
.about-kicker {
  display: inline-block;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 26px;
  color: var(--fox);
  transform: rotate(-3deg);
}
.about-h {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1;
  color: var(--fox-deep);
  margin: 4px 0 14px;
}
.about-body p:not(.about-kicker):not(.about-links) {
  font-size: 16.5px;
  line-height: 1.55;
  color: #4a3f36;
  margin-bottom: 10px;
}
.about-facts {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  margin: 14px 0 16px;
}
.about-facts li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.1;
  color: var(--fox-deep);
}
.about-facts svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--fox);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-links { display: flex; gap: 22px; flex-wrap: wrap; }
.about-links a {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 25px;
  color: var(--fox-deep);
  text-decoration: underline;
  text-decoration-color: rgba(247, 125, 2, .5);
  text-underline-offset: 4px;
}
.about-links a:hover { color: var(--fox); }

.about-note p {
  font-family: var(--f-serif);
  font-size: 23px;
  color: var(--chalk-2);
}
.about-note p a { color: var(--chalk); }

/* ==========================================================================
   Nav · doodles rise from behind the line, connect drops down
   ========================================================================== */

.nav-pop-box {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  width: 44px;
  height: 38px;
  margin-left: -22px;
  overflow: hidden;
  pointer-events: none;
}
.nav-pop-box .nav-pop {
  position: absolute;
  left: 3px;
  bottom: 0;
  width: 38px;
  height: 34px;
  margin: 0;
  opacity: 1;
  transform: translateY(105%);
  transition: transform .45s var(--ease-spring);
}
.nav-link:hover .nav-pop-box .nav-pop,
.nav-link:focus-visible .nav-pop-box .nav-pop { transform: translateY(0); }
.nav-link.active .nav-pop-box .nav-pop { transform: translateY(0); }
.nav-spark { bottom: calc(100% + 10px); }

.nav-item { position: relative; display: inline-flex; }
.nav-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  margin-left: -56px;
  width: 112px;
  border-radius: 14px;
  background: rgba(30, 27, 28, .92);
  border: 1.5px solid rgba(251, 241, 224, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .3s var(--ease-spring), visibility 0s .3s;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s, transform .3s var(--ease-spring), visibility 0s;
}
.nav-drop a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 6px;
  border-radius: 8px;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 21px;
  color: var(--chalk);
  text-decoration: none;
}
.nav-drop a:hover { background: rgba(247, 125, 2, .18); color: var(--fox-soft); }
.nav-drop svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 980px) {
  .about-grid { grid-template-columns: 1fr; gap: 26px; }
  .about-photo { width: 220px; }
}
@media (max-width: 760px) {
  .nb-sheet { padding: 36px 22px 28px; border-radius: 22px 22px 4px 4px; }
  .nb-sheet::before { background-size: 26px 26px; }
  .dog-ear { width: 52px; height: 52px; }
  .dog-ear-label { font-size: 20px; }
  @keyframes nudge-ear { 0%, 88%, 100% { width: 52px; height: 52px; } 93% { width: 66px; height: 66px; } }
  .about-facts { grid-template-columns: 1fr; }
  .sheet-about { padding-bottom: 76px; }
  .about-photo { width: 190px; }
  .beliefs-slot { height: 300px; }
  .b-torn { width: 176px; font-size: 26px; }
  .b-grid { width: 180px; font-size: 18px; }
  .b-kraft { width: 146px; height: 128px; font-size: 23px; }
  .nav-drop { display: none; }
}

.sheets.instant .sheet-hero,
.sheets.instant .sheet-about,
.sheets.instant .sheet-about::after,
.sheets.instant .sheet-hero * { transition: none !important; }

/* ==========================================================================
   Hero · the colourful front page (fox palette, outlined like the avatar)
   ========================================================================== */

.bookmark {
  position: absolute;
  top: -22px;
  right: 12px;
  width: 30px;
  height: 400px;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, transparent 2px 5px),
    var(--sky);
  z-index: 4;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 16px), 0 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
  transform-origin: top center;
  animation: sway 6s ease-in-out infinite;
}
@keyframes sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.2deg); }
}
.role {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--outline);
  background: var(--sky);
  padding: 7px 12px 6px;
  border-radius: 6px;
  margin-bottom: 10px;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--outline);
}
.role .ch {
  display: inline-block;
  transition: transform .35s var(--ease-spring), color .2s;
}
.role .ch.sp { width: .45em; }
.role:hover .ch { transform: translateY(-3px) rotate(-8deg); color: var(--fox-deep); }
.role:hover .ch:nth-child(2n) { transform: translateY(2px) rotate(6deg); }
.headline { font-weight: 400; }
.hi {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(76px, 9vw, 128px);
  line-height: .95;
  color: var(--fox);
  letter-spacing: -.01em;
  -webkit-text-stroke: 1.5px var(--outline);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--outline);
}
.hi-paw {
  width: .62em;
  height: .62em;
  fill: var(--fox);
  stroke: var(--outline);
  stroke-width: 3.4;
  stroke-linejoin: round;
  transform-origin: 50% 90%;
  animation: wave 4.5s ease-in-out 1.6s infinite;
  filter: drop-shadow(3px 3px 0 var(--outline));
}
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(-24deg); }
  16% { transform: rotate(16deg); }
  24% { transform: rotate(-20deg); }
  32% { transform: rotate(12deg); }
  40% { transform: rotate(-8deg); }
}
.im {
  display: block;
  font-family: var(--f-serif);
  font-size: clamp(44px, 4.8vw, 70px);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--outline);
  margin-top: 4px;
}
.name {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--fox-deep);
  font-style: italic;
}
.name-mark {
  position: absolute;
  left: -2%;
  bottom: -2px;
  width: 104%;
  height: .32em;
  overflow: visible;
  fill: none;
  stroke: var(--fox);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  opacity: .55;
  z-index: -1;
  animation: mark 1s var(--ease-out) 1.1s forwards;
}
@keyframes mark { to { stroke-dashoffset: 0; } }
.builds {
  margin-top: 20px;
  font-family: var(--f-serif);
  font-size: clamp(24px, 2.2vw, 31px);
  line-height: 1.25;
  color: var(--outline);
}
.rotator {
  position: relative;
  display: inline-block;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.22em;
  line-height: 1;
  color: var(--fox-ink);
  padding: 0 4px;
  background: linear-gradient(transparent 52%, rgba(205, 216, 234, .95) 52%, rgba(205, 216, 234, .95) 92%, transparent 92%);
  min-height: 1em;
}
.rotator::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: .8em;
  margin-left: 3px;
  vertical-align: -.05em;
  background: var(--fox);
  animation: blink 1s steps(2) infinite;
}
.hero-meta {
  margin-top: 18px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--fox-ink);
}
.psst {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 28px;
  font-family: var(--f-hand);
  font-size: 24px;
  font-weight: 500;
  color: var(--fox-ink);
  text-decoration: none;
  transform: rotate(-2deg);
}
.psst svg {
  width: 38px;
  height: 58px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 10px;
  transition: transform .4s var(--ease-spring);
}
.psst:hover { color: var(--fox); }
.psst:hover svg { transform: translateY(6px); }
.scene .ink {
  fill: none;
  stroke: var(--outline);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scene .dash { stroke-dasharray: 5 7; fill: none; }
.scene .f-paper { fill: var(--paper-3); }
.scene .f-white { fill: #fff; }
.scene .f-fox { fill: var(--fox); }
.scene .f-cream { fill: var(--cream); }
.scene .f-sky { fill: var(--sky); }
.scene .f-blush { fill: var(--blush); }
.scene .f-blush-soft { fill: #fcd2cf; }
.scene .f-wood { fill: var(--wood); }
.scene .f-ink { fill: var(--outline); stroke: none; }
.scene circle.f-blush:not(.d) { stroke: none; opacity: .75; }
.scene .hl-fill { fill: var(--fox); stroke: none; opacity: .35; }
.scene .svg-hand {
  font-family: var(--f-hand);
  font-size: 17px;
  font-weight: 700;
  fill: var(--outline);
  stroke: none;
}
.scene .svg-mono {
  font-family: var(--f-mono);
  font-size: 12px;
  fill: var(--fox-deep);
  stroke: none;
}
.scene .bubble-shape {
  fill: #fff;
  stroke: var(--outline);
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(3px 3px 0 var(--outline));
}
.scene .bubble-text {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 21px;
  text-anchor: middle;
  fill: var(--outline);
}

.sheet-hero .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 24px; }
.scene.drawing .hl-fill { animation-name: fadein-hl-strong; }
@keyframes fadein-hl-strong { to { opacity: .35; } }

@media (max-width: 980px) {
  .sheet-hero .hero-grid { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 760px) {
  .role { font-size: 11px; letter-spacing: .14em; }
  .hi { font-size: 76px; text-shadow: 3px 3px 0 var(--outline); }
  .im { font-size: 44px; }
  .builds { font-size: 22px; }
  .hero-meta { font-size: 18px; }
  .psst { font-size: 21px; }
  .bookmark { right: 16px; width: 22px; top: -14px; height: 150px; }
}

/* ==========================================================================
   Smooth scrolling (Lenis)
   ========================================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.doodle { will-change: transform; }