@import url("fonts.css");

/* MatchaStories Workbench System
   Materials: dark wood, kraft, cream tape, charcoal ink, matcha, gaffer.
   Surfaces feel used. Motion: short fade and hold. Hover is a warm lift. */

:root {
  --cream: #f4efe6;
  --paper: #ebe3d4;
  --paper-handled: #e4d9c4;
  --ink: #1c1a17;
  --ink-soft: #3a352e;
  --matcha: #5f7a4a;
  --matcha-deep: #3e5232;
  --amber: #c4a574;
  --kraft: #c9a36a;
  --tape: #f3ead8;
  --tape-shadow: rgba(20, 16, 10, 0.35);
  --gaffer: #12100e;
  --wood: #14110e;
  --pink: #a3446e;
  --print: #f0ebe0;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  color: var(--cream);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.55;
  background-color: var(--wood);
  background-image:
    url("../textures/coffee-ring.png"),
    url("../textures/coffee-ring.png"),
    url("../textures/coffee-ring.png"),
    url("../textures/wood-scuffed.jpg"),
    url("../textures/wood-worn.jpg"),
    radial-gradient(1200px 700px at 18% 8%, rgba(92, 70, 40, 0.28), transparent 55%),
    radial-gradient(900px 600px at 92% 78%, rgba(40, 50, 32, 0.2), transparent 50%),
    radial-gradient(ellipse 280px 120px at 8% 92%, rgba(180, 170, 150, 0.07), transparent 70%),
    radial-gradient(ellipse 220px 100px at 96% 6%, rgba(180, 170, 150, 0.05), transparent 70%),
    linear-gradient(180deg, #1a1511 0%, #12100d 42%, #0c0b09 100%);
  background-size:
    190px 190px,
    140px 140px,
    110px 110px,
    420px 420px,
    560px 560px,
    auto, auto, auto, auto, auto;
  background-position:
    10% 34%,
    72% 58%,
    88% 18%,
    0 0,
    40px 20px,
    0 0, 100% 100%, 0 100%, 100% 0, 0 0;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed;
}

/* Soft desk dust from real wood scuffs (no SVG feTurbulence) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0.32;
  mix-blend-mode: soft-light;
  background-image: url("../textures/wood-scuffed.jpg");
  background-size: 420px 420px;
  background-repeat: repeat;
}

/* Uneven wear patches and corner dust */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    url("../textures/coffee-ring.png"),
    url("../textures/coffee-ring.png"),
    radial-gradient(ellipse 180px 90px at 4% 96%, rgba(200, 185, 160, 0.07), transparent 70%),
    radial-gradient(ellipse 140px 70px at 97% 4%, rgba(200, 185, 160, 0.06), transparent 70%),
    radial-gradient(ellipse 220px 140px at 55% 48%, rgba(0, 0, 0, 0.2), transparent 65%),
    radial-gradient(ellipse 160px 100px at 22% 70%, rgba(60, 40, 20, 0.14), transparent 70%);
  background-size: 200px 200px, 130px 130px, auto, auto, auto, auto;
  background-position: 14% 42%, 76% 68%, 0 100%, 100% 0, 55% 48%, 22% 70%;
  background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.95;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--matcha);
  outline-offset: 3px;
}

.wrap {
  width: min(1120px, calc(100% - 2.2rem));
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Short fade: no 2-3s blank flash */
.fade { animation: hold-in 0.42s var(--ease) both; }
.fade-2 { animation-delay: 0.04s; }
.fade-3 { animation-delay: 0.08s; }
.fade-4 { animation-delay: 0.12s; }
.fade-5 { animation-delay: 0.16s; }

@keyframes hold-in {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

.site-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.6rem 0 0.4rem;
}
.brand {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-start;
}
.wordmark {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background:
    url("../textures/masking-tape-strip.png") center / 105% 130% no-repeat,
    var(--tape);
  padding: 0.48rem 0.9rem 0.38rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.28), 1px 3px 5px rgba(0,0,0,0.18);
  transform: rotate(-1.4deg);
  position: relative;
  border-radius: 0;
  clip-path: polygon(
    0% 22%, 1.5% 4%, 4% 12%, 7% 0%, 14% 8%, 22% 1%, 38% 7%, 52% 0%, 68% 6%, 82% 1%, 93% 9%, 98% 0%, 100% 30%,
    99% 70%, 100% 100%, 88% 92%, 72% 100%, 55% 93%, 38% 100%, 22% 91%, 8% 100%, 1% 82%, 0% 55%
  );
}
.wordmark::after {
  content: "";
  position: absolute;
  left: 8%;
  width: 62%;
  bottom: -7px;
  height: 11px;
  background: url("../textures/matcha-tape.png") center / cover no-repeat;
  transform: rotate(1.1deg);
  opacity: 0.92;
  filter: saturate(0.9);
}
.place {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.52);
}

/* One rail of real masking tape: wrinkle, torn ends, fiber, opacity */
.nav-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.15rem 1.15rem;
  color: var(--ink);
  padding: 0.46rem 1.2rem 0.38rem 1.25rem;
  transform: rotate(-1.1deg);
  position: relative;
  background:
    url("../textures/masking-tape-strip.png") center / 110% 160% no-repeat,
    var(--tape);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.25),
    0 4px 10px rgba(0,0,0,0.22);
  border-radius: 0;
  opacity: 0.93;
  clip-path: polygon(
    0% 24%, 1% 6%, 3% 14%, 6% 0%, 11% 9%, 17% 1%, 25% 8%, 34% 0%, 46% 7%, 57% 1%, 69% 6%, 80% 0%, 90% 10%, 96% 2%, 100% 32%,
    98% 68%, 100% 100%, 90% 91%, 78% 100%, 65% 92%, 52% 100%, 40% 90%, 28% 100%, 16% 91%, 7% 100%, 1% 80%, 0% 58%
  );
}
.nav-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../textures/masking-tape.png") 20% 40% / 180% 220% no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.35;
}
.nav-rail .nav-link {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  box-shadow: none;
  transform: none;
  padding: 0.12rem 0;
  position: relative;
  z-index: 1;
}
.nav-rail .nav-link[aria-current="page"] {
  color: var(--ink);
  box-shadow: 0 2px 0 var(--matcha-deep);
}
.nav-rail .nav-link:hover {
  color: var(--ink);
  transition: color 0.45s var(--ease);
}

.tape-label {
  display: inline-block;
  font-family: "Permanent Marker", "IBM Plex Mono", cursive;
  color: var(--ink);
  background:
    url("../textures/masking-tape-strip.png") center / 120% 150% no-repeat,
    var(--tape);
  padding: 0.28rem 0.72rem 0.18rem;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25), 1px 3px 5px rgba(0,0,0,0.16);
  transform: rotate(var(--r, -1.6deg));
  clip-path: polygon(
    1% 18%, 3% 0%, 8% 10%, 18% 1%, 40% 8%, 62% 0%, 82% 9%, 94% 2%, 100% 28%,
    98% 78%, 100% 100%, 86% 92%, 60% 100%, 32% 90%, 10% 100%, 0% 70%
  );
}

.paper, .kraft-note, .card {
  position: relative;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 10px 28px rgba(0,0,0,0.38);
}
.kraft-note {
  background:
    url("../textures/kraft-torn.png") center / 108% 112% no-repeat,
    url("../textures/kraft-grain.jpg") center / cover no-repeat,
    linear-gradient(168deg, #d7b07a 0%, #c4a06a 48%, #b08a52 100%);
  background-blend-mode: normal, multiply, normal;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.48),
    2px 4px 0 rgba(0,0,0,0.1),
    inset 0 -10px 18px rgba(90, 55, 20, 0.16),
    inset 0 1px 0 rgba(255, 230, 190, 0.2);
  border-radius: 0;
  clip-path: polygon(
    0% 6%, 2% 1%, 8% 5%, 18% 0%, 32% 4%, 48% 0%, 64% 5%, 78% 1%, 90% 6%, 97% 0%, 100% 8%,
    100% 88%, 98% 96%, 90% 100%, 76% 95%, 60% 100%, 42% 94%, 28% 100%, 14% 95%, 4% 100%, 0% 90%
  );
}
/* Dog-ear curl on kraft corner */
.kraft-note::before {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 32px;
  height: 32px;
  background: linear-gradient(225deg, transparent 40%, rgba(90, 55, 20, 0.28) 56%, rgba(160, 120, 70, 0.95) 70%);
  pointer-events: none;
  z-index: 2;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.9;
  transform: rotate(-2deg);
}
.paper::after, .kraft-note::after, .card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: multiply;
  background-image: url("../textures/kraft-grain.jpg");
  background-size: 280px 280px;
  z-index: 1;
}

/* Physical pin + punched hole */
.pin {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d7d2c8, #5a564c 55%, #2a2824);
  box-shadow: 0 2px 4px rgba(0,0,0,0.45), inset 0 -1px 1px rgba(0,0,0,0.35);
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(40, 30, 20, 0.28);
  background: radial-gradient(circle, rgba(20, 14, 8, 0.22) 0 28%, transparent 42%);
  z-index: -1;
}

.coffee-ring {
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 7px solid rgba(92, 58, 28, 0.16);
  box-shadow: inset 0 0 0 2px rgba(92, 58, 28, 0.08);
  pointer-events: none;
  transform: rotate(-12deg);
  background: url("../textures/coffee-ring.png") center / contain no-repeat;
  border: 0;
  opacity: 0.55;
}

.print {
  background:
    url("../textures/cream-handled.png") center / 110% 115% no-repeat,
    linear-gradient(180deg, #efe6d6 0%, #e6dcc8 55%, #dccfb8 100%);
  padding: 10px 10px 36px;
  box-shadow:
    0 16px 34px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.14) inset,
    inset 0 0 0 1px rgba(40, 30, 20, 0.1);
  position: relative;
  color: var(--ink);
  display: block;
  transform: rotate(var(--r, -2deg));
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
  border-radius: 0;
  filter: contrast(0.98) saturate(0.96);
  clip-path: polygon(
    0.5% 1.5%, 2% 0%, 98% 0.8%, 100% 2%, 99.5% 97%, 98% 100%, 2% 99%, 0% 97%
  );
}
.print img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(0.82) sepia(0.06);
  background: #1a1814;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.print .caption {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 7px;
  font-family: "Permanent Marker", "IBM Plex Mono", cursive;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  opacity: 0.88;
  z-index: 2;
  transform: rotate(var(--cr, -0.6deg));
}
.print .gaff {
  position: absolute;
  top: -11px;
  left: 50%;
  width: var(--tw, 62px);
  height: 20px;
  background: url("../textures/gaffer-tape.png") center / 100% 100% no-repeat;
  transform: translateX(-50%) rotate(var(--gr, -3deg));
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  z-index: 3;
  opacity: 0.95;
}
.print .gaff.left { left: 18%; }
.print .mask {
  position: absolute;
  top: -10px;
  left: var(--ml, 12%);
  width: var(--tw, 64px);
  height: 17px;
  background: url("../textures/masking-tape-strip.png") center / 110% 130% no-repeat;
  transform: rotate(var(--mr, -9deg));
  box-shadow: 0 2px 3px rgba(0,0,0,0.35);
  opacity: 0.94;
  z-index: 3;
}
a.print:hover {
  transform: rotate(var(--r, -1.2deg)) translateY(-4px);
  box-shadow:
    0 18px 36px rgba(0,0,0,0.48),
    0 0 0 1px rgba(196, 165, 116, 0.28);
}

/* Grease-pencil X / crossed corner on Selects */
.print.grease-x::before {
  content: "X";
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 4;
  font-family: "Permanent Marker", cursive;
  font-size: 1.55rem;
  line-height: 1;
  color: rgba(28, 26, 23, 0.55);
  transform: rotate(8deg);
  pointer-events: none;
  text-shadow: 0.5px 0.5px 0 rgba(0,0,0,0.15);
}
.print.grease-corner::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 46%, rgba(28,26,23,0.45) 48%, rgba(28,26,23,0.45) 52%, transparent 54%),
    linear-gradient(45deg, transparent 46%, rgba(28,26,23,0.35) 48%, rgba(28,26,23,0.35) 52%, transparent 54%);
  opacity: 0.7;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 1fr);
  gap: 3.6rem;
  align-items: start;
  padding: 1.8rem 0 2.8rem;
}
.hero-still { width: min(100%, 560px); justify-self: start; }
.hero-still img { aspect-ratio: 16 / 10; object-fit: cover; }
.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
  /* room for tilted print corners so they do not eat the aside */
  padding-right: 1.75rem;
  position: relative;
  z-index: 1;
}
.hero-aside {
  padding-top: 1.6rem;
  padding-left: 0.75rem;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.quiet-id {
  margin: 0 0 1.1rem;
  font-size: 0.76rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(244, 239, 230, 0.58);
  max-width: 22rem;
  transform: rotate(-0.4deg);
}
.scrap {
  padding: 1.15rem 1.15rem 1.3rem;
  max-width: 22rem;
  transform: rotate(1.4deg);
}
.scrap p {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.kicker {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--matcha-deep);
}

.essence {
  width: min(26rem, 100%);
  padding: 1.45rem 1.4rem 1.35rem;
  transform: rotate(-2.2deg);
  margin-left: 0;
}
.essence p {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: clamp(0.98rem, 1.55vw, 1.14rem);
  line-height: 1.48;
  margin: 0;
  font-weight: 400;
  position: relative;
  z-index: 2;
  color: #2a241c;
}

.zone { padding: 0.6rem 0 3.6rem; }
.zone-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.zone-head p {
  margin: 0;
  color: rgba(244,239,230,0.62);
  font-size: 0.82rem;
}
.contact {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.05rem 0.95rem;
}
.cell { min-width: 0; }
.cell.w7 { grid-column: span 7; }
.cell.w5 { grid-column: span 5; }
.cell.w6 { grid-column: span 6; }
.cell.w4 { grid-column: span 4; }
.cell.w8 { grid-column: span 8; }
.contact .print img { aspect-ratio: 4 / 3; }
.cell.tall .print img { aspect-ratio: 3 / 4; }
.cell.wide .print img { aspect-ratio: 16 / 10; }

.who {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  padding-bottom: 3.4rem;
  align-items: start;
}
.card {
  padding: 1.4rem 1.35rem 1.5rem;
  background:
    url("../textures/cream-handled.png") center / 112% 118% no-repeat,
    radial-gradient(circle at 12% 8%, rgba(90, 70, 40, 0.08), transparent 40%),
    linear-gradient(180deg, #f0e8d6 0%, var(--paper-handled) 100%);
  border-radius: 0;
  clip-path: polygon(
    0% 3%, 3% 0%, 97% 1%, 100% 4%, 99% 96%, 96% 100%, 4% 98%, 0% 95%
  );
}
.card.yes {
  transform: rotate(-2.4deg);
  z-index: 2;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45), 1px 3px 0 rgba(0,0,0,0.08);
}
.card.no {
  transform: rotate(1.8deg);
  margin-left: -0.55rem;
  margin-top: 1.1rem;
  z-index: 1;
  padding-left: 1.55rem;
  background:
    url("../textures/cream-handled.png") 60% 40% / 120% 125% no-repeat,
    radial-gradient(circle at 80% 20%, rgba(90, 70, 40, 0.1), transparent 45%),
    linear-gradient(185deg, #e4d6bc 0%, #d8c9aa 100%);
  box-shadow: 0 14px 30px rgba(0,0,0,0.4), -1px 3px 0 rgba(0,0,0,0.06);
}
.card h2 {
  margin: 0 0 0.85rem;
  font-family: "Permanent Marker", "IBM Plex Mono", cursive;
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 3;
  opacity: 0.92;
}
.card.no h2 {
  padding-left: 0.15rem;
}
.card ul { margin: 0; padding: 0; list-style: none; position: relative; z-index: 2; }
.card li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.2rem;
  color: var(--ink-soft);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.98rem;
}
/* Stamped checkboxes, not perfect UI squares */
.card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 9px;
  height: 9px;
  border: 1.8px solid rgba(28, 26, 23, 0.78);
  border-radius: 0.5px;
  transform: rotate(var(--stamp, -4deg));
  box-shadow: 0.5px 0.5px 0 rgba(28, 26, 23, 0.15);
  opacity: 0.85;
}
.card.yes li:nth-child(1)::before { --stamp: -6deg; }
.card.yes li:nth-child(2)::before { --stamp: 3deg; background: rgba(95,122,74,0.32); }
.card.yes li:nth-child(3)::before { --stamp: -2deg; background: rgba(95,122,74,0.28); }
.card.no li:nth-child(1)::before { --stamp: 5deg; }
.card.no li:nth-child(2)::before { --stamp: -7deg; }
.card.no li:nth-child(3)::before { --stamp: 2deg; }
.card.yes li::before { background: rgba(95,122,74,0.22); }

.cta-zone {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 1.5rem;
  align-items: start;
  padding-bottom: 4rem;
}
.cta-note {
  padding: 1.65rem 1.6rem 1.75rem;
  transform: rotate(-1.5deg);
}
.cta-note h2 {
  font-family: "Permanent Marker", "IBM Plex Mono", cursive;
  font-size: 1.32rem;
  margin: 0 0 0.55rem;
  font-weight: 400;
  position: relative;
  z-index: 2;
  opacity: 0.94;
}
.cta-note p {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1rem;
  margin: 0 0 1rem;
  color: #3a3228;
  position: relative;
  z-index: 2;
}
.mail {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: url("../textures/masking-tape-strip.png") center / 112% 135% no-repeat, var(--tape);
  padding: 0.55rem 1.15rem 0.5rem;
  box-shadow: 0 2px 0 rgba(0,0,0,0.28), 1px 3px 5px rgba(0,0,0,0.15);
  transform: rotate(-1.2deg);
  transition: transform 0.6s var(--ease), background 0.6s var(--ease);
  position: relative;
  z-index: 2;
  white-space: nowrap;
  /* Soft torn tape edge — keep @ and full address inside the clip */
  clip-path: polygon(0.5% 10%, 3% 0, 97% 2%, 100% 18%, 99.5% 88%, 97% 100%, 3% 98%, 0 80%);
}
.mail:hover {
  background:
    linear-gradient(100deg, rgba(255,255,255,0.2), transparent 40%),
    #fff6e6;
  transform: rotate(-1.2deg) translateY(-2px);
}

/* Dirty / faded magenta sticky, not product-UI hot pink */
.sticky {
  width: 7.5rem;
  min-height: 7.5rem;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 200, 220, 0.2), transparent 50%),
    radial-gradient(circle at 20% 90%, rgba(80, 20, 50, 0.16), transparent 45%),
    url("../textures/kraft-grain.jpg") center / 200% 200% no-repeat,
    linear-gradient(165deg, #b85a82 0%, var(--pink) 48%, #7a3358 100%);
  background-blend-mode: normal, normal, soft-light, normal;
  color: #2a1020;
  padding: 0.9rem 0.75rem;
  font-family: "Permanent Marker", "IBM Plex Mono", cursive;
  font-size: 1.08rem;
  line-height: 1.2;
  transform: rotate(7.2deg);
  box-shadow:
    0 12px 20px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -8px 14px rgba(60, 10, 35, 0.14);
  margin-top: 0.6rem;
  border-radius: 1px;
  opacity: 0.86;
}

.entry {
  padding: 2.4rem 0 1.4rem;
  max-width: 38rem;
}
.entry h1 {
  font-family: "Permanent Marker", "IBM Plex Mono", cursive;
  font-weight: 400;
  font-size: clamp(1.65rem, 3.2vw, 2.25rem);
  margin: 0.45rem 0 0.7rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--cream);
  opacity: 0.92;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3), 1px 1px 0 rgba(0,0,0,0.12);
  transform: rotate(-0.8deg);
}
.studio-note {
  padding: 1.2rem 1.25rem 1.3rem;
  transform: rotate(-1.6deg);
  margin: 1.1rem 0 1.6rem;
  max-width: 40rem;
  background:
    url("../textures/cream-handled.png") center / 110% 120% no-repeat,
    radial-gradient(circle at 90% 10%, rgba(90,70,40,0.08), transparent 40%),
    linear-gradient(180deg, #efe6d4 0%, var(--paper-handled) 100%);
  box-shadow: 0 12px 26px rgba(0,0,0,0.4), 1px 3px 0 rgba(0,0,0,0.08);
  border-radius: 0;
  clip-path: polygon(
    0% 4%, 2% 0%, 98% 2%, 100% 6%, 99% 95%, 96% 100%, 3% 98%, 0% 92%
  );
}
.studio-note p {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.98rem;
  color: var(--ink-soft);
  position: relative;
  z-index: 2;
}


/* Selects intro scrap: handled kraft, not clean cream card */
.kraft-note.studio-note {
  background:
    url("../textures/kraft-torn.png") center / 108% 115% no-repeat,
    url("../textures/kraft-grain.jpg") center / cover no-repeat,
    linear-gradient(168deg, #d7b07a 0%, #c4a06a 48%, #b08a52 100%);
  background-blend-mode: normal, multiply, normal;
  clip-path: polygon(
    0% 5%, 2% 0%, 12% 4%, 30% 0%, 55% 5%, 78% 0%, 94% 6%, 100% 2%, 100% 92%,
    96% 100%, 70% 94%, 42% 100%, 18% 93%, 4% 100%, 0% 88%
  );
}
.kraft-note.studio-note p {
  color: #2a241c;
}

/* Selects filters: tape scraps, not pill buttons */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.7rem;
  margin: 0 0 1.5rem;
  align-items: center;
}
.filter {
  font-family: "Permanent Marker", "IBM Plex Mono", cursive;
  font-size: 1rem;
  color: var(--ink);
  background:
    url("../textures/masking-tape-strip.png") center / 130% 170% no-repeat,
    var(--tape);
  border: 0;
  padding: 0.34rem 0.85rem 0.22rem;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.28), 1px 3px 4px rgba(0,0,0,0.14);
  transform: rotate(var(--r, -1.2deg));
  border-radius: 0;
  clip-path: polygon(
    2% 16%, 5% 0%, 18% 9%, 40% 1%, 70% 8%, 90% 0%, 100% 30%,
    97% 100%, 72% 92%, 40% 100%, 12% 90%, 0% 60%
  );
  opacity: 0.92;
}
.filter:nth-child(1) { padding-right: 0.95rem; }
.filter:nth-child(2) { padding-left: 0.55rem; padding-right: 0.7rem; }
.filter:nth-child(3) { padding: 0.28rem 0.88rem 0.18rem 0.65rem; }
.filter:nth-child(4) { padding: 0.32rem 0.72rem 0.16rem 0.9rem; }
.filter[aria-pressed="true"] {
  background:
    linear-gradient(100deg, rgba(255,255,255,0.08), transparent 40%),
    #cfc09a;
  box-shadow: 0 0 0 1px rgba(62,82,50,0.35), 0 2px 0 rgba(0,0,0,0.2);
  opacity: 1;
}
.filter:hover { filter: brightness(1.04); }

.masonry {
  columns: 3 220px;
  column-gap: 1rem;
}
.masonry .cell {
  break-inside: avoid;
  margin-bottom: 1.05rem;
  display: block;
}
.masonry .print img { aspect-ratio: auto; height: auto; }
.truth {
  margin: 0.45rem 0 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.92rem;
  color: rgba(244,239,230,0.78);
}
.tags { margin-top: 0.35rem; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tag {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: url("../textures/masking-tape-strip.png") center / cover no-repeat, var(--tape);
  padding: 0.16rem 0.42rem 0.1rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  clip-path: polygon(3% 12%, 8% 0, 100% 10%, 96% 100%, 0 88%);
  opacity: 0.9;
  transform: rotate(-1.5deg);
}

.case {
  display: grid;
  grid-template-columns: minmax(0, 38rem) minmax(0, 1fr);
  gap: 2rem;
  padding: 2rem 0 3.5rem;
  align-items: start;
}
.prose h1 {
  font-family: "Permanent Marker", "IBM Plex Mono", cursive;
  font-weight: 400;
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  margin: 0.4rem 0 0.9rem;
  letter-spacing: 0.01em;
  opacity: 0.94;
}
.prose p {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.62;
  color: rgba(244,239,230,0.86);
}
.prose .lede {
  font-size: 1.15rem;
  color: var(--cream);
}
.case-stills { display: grid; gap: 1.1rem; }
.scraps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.2rem;
}
.scrap-sm {
  background: var(--paper-handled);
  color: var(--ink);
  padding: 0.7rem 0.8rem;
  font-size: 0.78rem;
  transform: rotate(-1.5deg);
  box-shadow: 0 6px 14px rgba(0,0,0,0.28);
}

.room {
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0 4rem;
}
.room-note {
  width: min(32rem, 100%);
  padding: 2rem 1.7rem 1.8rem;
  transform: rotate(-0.8deg);
}
.room-note h1 {
  font-family: "Permanent Marker", "IBM Plex Mono", cursive;
  font-size: 1.6rem;
  margin: 0 0 0.7rem;
  font-weight: 400;
  position: relative;
  z-index: 2;
}
.room-note p {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.02rem;
  margin: 0 0 0.8rem;
  color: var(--ink-soft);
  position: relative;
  z-index: 2;
}

/* Approach: process zones (bolted labels + short copy) */
.process-zones {
  padding: 0.4rem 0 2.8rem;
}
.zones-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.05rem;
}
.pzone {
  position: relative;
  padding: 0.85rem 0 0.95rem 0.15rem;
  border-left: 3px solid rgba(18, 16, 14, 0.85);
  padding-left: 1.05rem;
  background:
    linear-gradient(90deg, rgba(20, 16, 10, 0.35), transparent 55%);
  box-shadow: inset 2px 0 0 rgba(95, 122, 74, 0.35);
}
.pzone .tape-label {
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
}
.pzone p {
  margin: 0.5rem 0 0;
  max-width: 38rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgba(244, 239, 230, 0.82);
}
.approach-still {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.8rem 0 3.8rem;
  max-width: 26rem;
}
.approach-still .print {
  width: min(100%, 20rem);
  margin: 0 0 0.45rem;
  padding-bottom: 12px;
}
.hero-stack .print {
  padding-bottom: 12px;
}
.approach-still .print img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.approach-still .caption.kraft-cut {
  margin: 0.2rem 0 0;
  max-width: 16rem;
}
.approach-still .truth.kraft-cut {
  margin: 0.25rem 0 0;
  max-width: 24rem;
}

/* Studio: origin scrap sits under hero */
.origin-scrap {
  max-width: 28rem;
  margin: 0 0 2.2rem;
  padding-top: 1.45rem;
}
.origin-scrap .tape-label {
  display: inline-block;
  margin-bottom: 0.55rem;
}
.studio-stills .truth {
  margin-top: 0.7rem;
}
.studio-stills .cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}
.studio-stills .print {
  margin-bottom: 0.15rem;
}
/* Extra row air so tilted prints do not kiss neighbors */
.contact.studio-stills {
  gap: 1.55rem 1.25rem;
}


/* Orange kraft cutout captions: same material language as kraft notes / tilted prints */
.kraft-cut,
.truth.kraft-cut,
.caption.kraft-cut {
  display: inline-block;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0.55rem 0 0;
  max-width: 100%;
  padding: 0.42rem 0.75rem 0.38rem 0.8rem;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #2a241c;
  opacity: 1;
  background:
    url("../textures/kraft-torn.png") center / 115% 130% no-repeat,
    url("../textures/kraft-grain.jpg") center / cover no-repeat,
    linear-gradient(168deg, #d7b07a 0%, #c4a06a 48%, #b08a52 100%);
  background-blend-mode: normal, multiply, normal;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.42),
    1px 2px 0 rgba(0,0,0,0.1),
    inset 0 -6px 12px rgba(90, 55, 20, 0.14),
    inset 0 1px 0 rgba(255, 230, 190, 0.18);
  border-radius: 0;
  transform: rotate(var(--r, -2.2deg));
  clip-path: polygon(
    0% 18%, 1.5% 4%, 7% 12%, 14% 0%, 28% 9%, 42% 1%, 58% 10%, 72% 0%, 86% 11%, 95% 2%, 100% 26%,
    98% 72%, 100% 100%, 86% 90%, 68% 100%, 50% 91%, 32% 100%, 16% 89%, 5% 100%, 0% 82%, 1% 55%
  );
  z-index: 2;
}
.caption.kraft-cut {
  font-family: "Permanent Marker", "IBM Plex Mono", cursive;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: #241e16;
  opacity: 0.94;
  padding: 0.36rem 0.72rem 0.28rem 0.78rem;
}
.print .caption.kraft-cut {
  /* sit below the cream mount instead of absolute in-border UI */
  position: static;
  display: inline-block;
  margin-top: 0.55rem;
  transform: rotate(var(--r, -1.6deg));
}
.hero-stack > .caption.kraft-cut {
  margin-top: 0.15rem;
  margin-left: 0.35rem;
}

/* Soften ethics overlap on Approach (titles stay readable; Home keeps crook overlap) */
.page-approach .who {
  padding-top: 0.75rem;
}
.page-approach .who .card.no {
  margin-left: 0.15rem;
}

/* Start: studio-note form */
.start-room {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(12rem, 0.65fr);
  gap: 1.6rem;
  align-items: start;
  padding: 0.4rem 0 3.6rem;
}
.form-note {
  padding: 1.55rem 1.45rem 1.7rem;
  transform: rotate(-1.3deg);
  max-width: 40rem;
}
.form-lede {
  margin: 0 0 1.15rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.02rem;
  color: #2a241c;
  position: relative;
  z-index: 2;
}
.field {
  display: block;
  margin: 0 0 0.85rem;
  position: relative;
  z-index: 2;
}
.field-label {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.28rem;
  opacity: 0.85;
}
.field input,
.field textarea {
  width: 100%;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1rem;
  color: var(--ink);
  background: rgba(244, 239, 230, 0.55);
  border: 0;
  border-bottom: 1.5px solid rgba(28, 26, 23, 0.35);
  border-radius: 0;
  padding: 0.45rem 0.35rem 0.4rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--matcha-deep);
  background: rgba(255, 250, 240, 0.7);
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(58, 53, 46, 0.45);
  font-style: italic;
}
.honesty {
  margin: 1rem 0 1.1rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  position: relative;
  z-index: 2;
}
button.submit-tape {
  border: 0;
  cursor: pointer;
  font-family: "Permanent Marker", "IBM Plex Mono", cursive;
  position: relative;
  z-index: 2;
}
button.submit-tape:hover {
  filter: brightness(1.05);
}
.start-aside {
  padding-top: 1.2rem;
}
.start-aside .mail {
  white-space: nowrap;
}

.site-foot {
  border-top: 10px solid #0c0b09;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.04);
  padding: 1.3rem 0 2.2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: rgba(244,239,230,0.5);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-foot a {
  text-transform: none;
  letter-spacing: 0.04em;
}
.site-foot a:hover { color: var(--cream); }

.is-hidden { display: none !important; }

@media (max-width: 860px) {
  .hero, .who, .cta-zone, .case, .start-room, .approach-still { grid-template-columns: 1fr; }
  .hero { padding-top: 1.6rem; gap: 1.6rem; }
  .hero-aside { padding-top: 0.4rem; padding-left: 0; }
  .hero-stack { padding-right: 0; }
  .site-head { flex-direction: column; }
  nav { justify-content: flex-start; }
  .cell.w7, .cell.w5, .cell.w6, .cell.w4, .cell.w8 { grid-column: span 6; }
  .masonry { columns: 2 160px; }
  .sticky { margin: 0 auto 0 0; }
  .card.no { margin-left: 0; margin-top: 0.4rem; }
  .page-approach .who .card.no { margin-left: 0; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 1.25rem); }
  .contact { grid-template-columns: 1fr; }
  .cell.w7, .cell.w5, .cell.w6, .cell.w4, .cell.w8 { grid-column: span 1; }
  .masonry { columns: 1; }
  .essence { padding: 1.4rem 1.15rem; }
  .print { padding-bottom: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .fade { animation: none; }
  a.print, .mail, .nav-rail { transition: none; }
}