/* ==========================================================================
   kawa.zip — ink on office paper
   Palette, type and structure all pull from one idea: a stack of photocopier
   sheets on a desk, marked up by hand.
   ========================================================================== */

@font-face {
  font-family: 'Shantell';
  src: url('../fonts/ShantellSans-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: 'PlexSans';
  src: url('../fonts/IBMPlexSans-var.woff2') format('woff2-variations');
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('../fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('../fonts/IBMPlexMono-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper:      #efece4;
  --sheet:      #f8f6f0;
  --ink:        #17181c;
  --biro:       #24379b;
  --stamp:      #bf3025;
  --marker:     #f2e14c;
  --pencil:     #8a8578;

  --hand:  'Shantell', 'Comic Sans MS', 'Segoe Print', cursive;
  --body:  'PlexSans', 'Segoe UI', system-ui, sans-serif;
  --mono:  'PlexMono', 'Cascadia Mono', Consolas, monospace;

  --gut:   clamp(1.25rem, 4vw, 3rem);
  --measure: 68rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-x: hidden;
}

/* --- the desk: procedural crumple, lit from the top-left ----------------- */

.crumple {
  position: fixed;
  inset: -10vmax;
  z-index: 0;
  pointer-events: none;
  filter: url(#f-crumple);
  mix-blend-mode: multiply;
  opacity: .5;
}
.crumple > div { width: 100%; height: 100%; background: #fff; }

/* Punched binder holes down the left margin — office, not sketchbook. */
.holes {
  position: fixed;
  left: max(.6rem, 1.5vw);
  top: 0;
  bottom: 0;
  width: 26px;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle 10px at 13px 112px, rgba(23,24,28,.30) 0 78%, rgba(23,24,28,.10) 79% 100%, transparent 100%);
  background-size: 26px 224px;
  background-repeat: repeat-y;
}
@media (max-width: 780px) { .holes { display: none; } }

.page {
  position: relative;
  z-index: 2;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gut) 5rem;
}

/* --- shared marks -------------------------------------------------------- */

/* Torn/wobbly rule, redrawn per instance via a displacement filter. */
.rule {
  height: 3px;
  border: 0;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0;
  background: var(--ink);
  filter: url(#f-rough);
  opacity: .82;
}
.rule--short { max-width: 9rem; margin-inline: 0; }

.eyebrow {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pencil);
  margin: 0 0 .5rem;
}

.hand {
  font-family: var(--hand);
  font-weight: 400;
  color: var(--biro);
}

a { color: inherit; }

a:focus-visible,
button:focus-visible,
.sheet:focus-visible {
  outline: 3px dashed var(--biro);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem;
  position: fixed; z-index: 99;
  background: var(--marker); color: var(--ink);
  padding: .5rem .9rem;
  font-family: var(--mono); font-size: .8rem;
}

/* --- masthead ------------------------------------------------------------ */

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.wordmark { display: inline-block; line-height: 0; transform: rotate(-1.1deg); }
.wordmark img {
  display: block;
  width: clamp(220px, 42vw, 430px);
  height: auto;
}
.wordmark--sm img { width: clamp(150px, 24vw, 210px); }

.nav {
  display: flex;
  gap: 1.35rem;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-bottom: .4rem;
}
.nav a { text-decoration: none; padding-bottom: 2px; }
.nav a:hover { color: var(--biro); }
/* Highlighter swipe marks the page you're on. */
.nav a[aria-current='page'] {
  background: linear-gradient(var(--marker), var(--marker)) 0 68% / 100% 62% no-repeat;
  box-decoration-break: clone;
}

.tagline {
  font-family: var(--hand);
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  color: var(--biro);
  transform: rotate(-.5deg);
  margin: 1.4rem 0 0;
  max-width: 34ch;
}
.tagline em { font-style: normal; border-bottom: 2px solid var(--biro); }

/* --- section headers ----------------------------------------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.section-head h2 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  margin: 0;
  letter-spacing: -.01em;
}
.section-head .count {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--pencil);
}

/* --- the sheets: each project is a piece of paper ------------------------ */

.stack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
.stack--three { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

/* The <li> carries the hatched shadow. It has to sit outside the sheet's own
   stacking context — a rotated element paints its background before any
   negative-z child, which would put the hatching on top of the text. */
.stack > li { position: relative; display: flex; }
.stack > li::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: rotate(var(--tilt, 0deg)) translate(14px, 15px);
  /* Pen hatching — the same mark that shades the kawa.zip wordmark. */
  background-image: repeating-linear-gradient(48deg, var(--ink) 0 1.5px, transparent 1.5px 5px);
  opacity: .6;
  filter: url(#f-rough);
  transition: transform .22s ease, opacity .22s ease;
}
.stack > li:hover::after { transform: rotate(0deg) translate(9px, 10px); opacity: .75; }

/* Tighter shadow on narrow screens so the offset does not run off the page. */
@media (max-width: 560px) {
  .stack > li::after { transform: rotate(var(--tilt, 0deg)) translate(8px, 9px); }
  .stack > li:hover::after { transform: rotate(0deg) translate(6px, 7px); }
}

.sheet {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  background: var(--sheet);
  padding: 1.35rem 1.3rem 1.15rem;
  text-decoration: none;
  color: inherit;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .22s ease;
}
/* Hand-inked border, wobbled by the rough filter so no two edges match. */
.sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--ink);
  filter: url(#f-rough);
  pointer-events: none;
}
.sheet:hover,
.sheet:focus-visible {
  transform: rotate(0deg) translate(-3px, -4px);
}

.sheet__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 74px;
  margin-bottom: .1rem;
}
/* Real product logos are colour prints taped onto the sheet. */
.sheet__mark img {
  height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  background: #fff;
  padding: .5rem .6rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
/* Everything else gets a monogram drawn in the same marker as the wordmark. */
.monogram {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  padding: .45rem .75rem .55rem;
  border: 3px solid var(--ink);
  filter: url(#f-rough);
  letter-spacing: -.02em;
}

.sheet__kind {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pencil);
}
/* Kind and forge share the eyebrow line, so a long kind wraps above the tag
   instead of squeezing it. */
.sheet__meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

/* Where the repo lives, pencilled in the margin — same ink as the kind, so
   it reads as an annotation and never competes with the stamp. */
.forge-tag {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pencil);
  border: 1.5px solid currentColor;
  border-radius: 2px;
  padding: .08rem .3rem .1rem;
  opacity: .8;
}
.eyebrow .forge-tag { margin-left: .3rem; vertical-align: .1em; }

.sheet__name {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.15;
  margin: 0;
}
.sheet__blurb {
  margin: 0;
  font-size: .93rem;
  line-height: 1.55;
  flex: 1;
}

/* --- signature: the rubber stamp ----------------------------------------
   Live release data lands on the page as an office stamp — red ink for a
   tagged release, blue biro for anything that has never been released.
   ------------------------------------------------------------------------ */

.stamp {
  align-self: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: .1rem;
  padding: .38rem .7rem .42rem;
  border: 2.5px solid currentColor;
  border-radius: 3px;
  color: var(--stamp);
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  transform: rotate(-3.2deg);
  filter: url(#f-ink);
  opacity: .88;
}
.stamp__tag { font-size: .9rem; letter-spacing: .04em; }
.stamp__date { font-size: .62rem; letter-spacing: .14em; font-weight: 500; }

.stamp--none {
  color: var(--biro);
  border-style: dashed;
  border-width: 2px;
  transform: rotate(1.6deg);
}
.stamp--loading {
  color: var(--pencil);
  border-style: dotted;
  filter: none;
  opacity: .55;
}
.stamp--custom {
  color: var(--stamp);
  transform: rotate(2.4deg);
}
.stamp--big {
  padding: .6rem 1.15rem .68rem;
  transform: rotate(-4deg);
}
.stamp--big .stamp__tag { font-size: 1.5rem; }
.stamp--big .stamp__date { font-size: .7rem; }

@keyframes thump {
  from { transform: rotate(-9deg) scale(1.5); opacity: 0; }
  60%  { transform: rotate(-3.2deg) scale(.97); opacity: 1; }
  to   { transform: rotate(-3.2deg) scale(1); opacity: .88; }
}
.stamp--in { animation: thump .26s cubic-bezier(.2,.9,.3,1.2) both; }

/* --- see-all call to action ---------------------------------------------- */

.more {
  display: inline-block;
  margin-top: 2.5rem;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--biro);
  text-decoration: none;
  transform: rotate(-1deg);
}
.more::after {
  content: '';
  display: block;
  height: 3px;
  background: var(--biro);
  filter: url(#f-rough);
  transform: scaleX(.96);
  transform-origin: left;
  transition: transform .18s ease;
}
.more:hover::after { transform: scaleX(1.06); }

/* --- project page -------------------------------------------------------- */

.crumbs {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pencil);
  margin: 2rem 0 1.1rem;
}
.crumbs a { color: var(--biro); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.dossier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 781px) { .dossier > aside { position: sticky; top: 1.5rem; } }
@media (max-width: 780px) { .dossier { grid-template-columns: 1fr; } }

.dossier h1 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  line-height: 1.05;
  margin: 0 0 .35rem;
}
.dossier__lede { font-size: 1.12rem; max-width: 46ch; margin: 1rem 0; }
.dossier__lede a { color: var(--biro); }

/* Art dropped into a blurb with ![alt](file.png) — see rich() in site.js.
   Block, so a screenshot sits on its own line instead of stretching the
   line box it was written into. */
.inline-shot {
  display: block;
  max-width: min(100%, 420px);
  height: auto;
  margin: .9rem 0;
  background: #fff;
  padding: .4rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.headmark { margin: .6rem 0 1.1rem; }
.headmark img {
  max-height: 84px;
  max-width: min(100%, 320px);
  background: #fff;
  padding: .6rem .7rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Right column reads like a form someone filled in by hand. */
.card {
  position: relative;
  background: var(--sheet);
  padding: 1.2rem 1.25rem 1.35rem;
  margin-bottom: 1.75rem;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--ink);
  filter: url(#f-rough);
  pointer-events: none;
}
.card h2 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 .9rem;
  color: var(--pencil);
}

.facts { margin: 0; font-family: var(--mono); font-size: .82rem; }
.facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem 0;
  border-bottom: 1px dotted rgba(23,24,28,.28);
}
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--pencil); }
.facts dd { margin: 0; text-align: right; font-weight: 500; }

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .6rem 1rem;
  background: var(--marker);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(23,24,28,.85);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 rgba(23,24,28,.85); }
.btn + .btn { margin-left: .6rem; }
.btn--plain { background: var(--sheet); }

.release-title {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.5rem;
  margin: .2rem 0 .3rem;
}

.release-body {
  font-size: .95rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 26rem;
  overflow-y: auto;
  padding-right: .5rem;
  border-left: 3px solid var(--marker);
  padding-left: .9rem;
  margin-top: 1rem;
}

.assets { list-style: none; padding: 0; margin: 1rem 0 0; font-family: var(--mono); font-size: .82rem; }
.assets li { padding: .35rem 0; border-bottom: 1px dotted rgba(23,24,28,.28); }
.assets a { color: var(--biro); }

.note {
  font-family: var(--hand);
  color: var(--biro);
  font-size: 1.05rem;
  transform: rotate(-.7deg);
  margin-top: .9rem;
}

.footer {
  margin-top: 4.5rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pencil);
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.footer a { color: var(--pencil); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .sheet:hover, .sheet:focus-visible { transform: rotate(var(--tilt, 0deg)); }
  .stack > li:hover::after { transform: rotate(var(--tilt, 0deg)) translate(14px, 15px); }
}