/* ==========================================================================
   Maharshi Nahar — portfolio
   Scene: an engineer's notebook. Paper ground, dotted grid, hand annotations
   in the margin, sticker-boxes with hard shadows. Ink and one loud red.
   No framework, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Paper, not white. Warmth here is the whole point — this is a notebook. */
  --paper: oklch(0.965 0.008 85);        /* #f6f3ed */
  --paper-deep: oklch(0.94 0.012 85);    /* #efebe2 — alternating band */
  /* Card faces are slightly translucent so the cursor blush reads through them. */
  --card: oklch(0.995 0.004 85 / 0.86);
  --card-solid: oklch(0.995 0.004 85);   /* opaque, for contrast maths */

  --ink: oklch(0.17 0.012 60);           /* 17.3:1 on paper */
  --ink-muted: oklch(0.44 0.014 60);     /*  7.0:1 */
  --ink-faint: oklch(0.50 0.014 60);     /*  5.4:1 */

  --red: oklch(0.55 0.20 25);            /* the loud one. 4.9:1 */
  --red-deep: oklch(0.45 0.18 25);       /*  7.4:1 — for text on paper */
  --blue: oklch(0.50 0.15 250);          /* handwriting ink. 5.4:1 */
  --yellow: oklch(0.88 0.16 95);         /* highlighter, behind text only */

  --rule: oklch(0.86 0.012 85);
  --rule-ink: oklch(0.17 0.012 60);

  /* Type — irregular grotesque + handwriting. Deliberately not Inter. */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-hand: "Caveat", ui-rounded, cursive;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.10rem);
  --step-1: clamp(1.28rem, 1.21rem + 0.34vw, 1.50rem);
  --step-2: clamp(1.66rem, 1.53rem + 0.62vw, 2.08rem);
  --step-3: clamp(2.15rem, 1.93rem + 1.06vw, 2.85rem);
  --step-4: clamp(2.80rem, 2.40rem + 1.95vw, 4.10rem);
  --step-5: clamp(3.10rem, 2.28rem + 3.95vw, 5.40rem);

  --space-2xs: clamp(0.5rem, 0.48rem + 0.09vw, 0.55rem);
  --space-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.85rem);
  --space-s: clamp(1rem, 0.96rem + 0.18vw, 1.10rem);
  --space-m: clamp(1.5rem, 1.43rem + 0.36vw, 1.75rem);
  --space-l: clamp(2.25rem, 2.07rem + 0.89vw, 3rem);
  --space-xl: clamp(3.5rem, 3.05rem + 2.23vw, 5rem);
  --space-2xl: clamp(4.5rem, 3.68rem + 4.09vw, 7rem);

  --measure: 66ch;
  --shell: 72rem;
  --gutter: clamp(1.25rem, 0.9rem + 1.7vw, 3rem);

  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 600ms;

  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;

  /* The sticker shadow — hard, offset, no blur. Does a lot of the work. */
  --shadow-hard: 4px 4px 0 var(--rule-ink);
  --shadow-hard-sm: 3px 3px 0 var(--rule-ink);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  background-color: var(--paper);
  /* Dotted notebook grid. Two layers so it doesn't read as a flat tile. */
  background-image: radial-gradient(circle at 1px 1px,
                    oklch(0.72 0.02 85 / 0.55) 1px, transparent 0);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cursor blush. */
.blush {
  position: fixed;
  top: 0;
  left: 0;
  width: 46rem;
  height: 46rem;
  margin: -23rem 0 0 -23rem;   /* centre on the origin */
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity 700ms var(--ease-quart);
  /* Three separated blobs, so stacked alphas never push text under 4.5:1. */
  background:
    radial-gradient(circle at 30% 34%, oklch(0.72 0.17 25 / 0.20), transparent 42%),
    radial-gradient(circle at 70% 38%, oklch(0.74 0.15 250 / 0.18), transparent 42%),
    radial-gradient(circle at 48% 72%, oklch(0.86 0.16 95 / 0.22), transparent 42%);
  filter: blur(58px);
}

.blush.is-on { opacity: 1; }

/* Everything real sits above the blush. */
main, body > footer { position: relative; z-index: var(--z-base); }

img, picture, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--red-deep); text-underline-offset: 0.18em; }
a:hover { color: var(--red); }

:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--yellow); color: var(--ink); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: var(--z-overlay);
  transform: translateY(-120%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-quart);
}
.skip-link:focus-visible { transform: translateY(0); color: var(--paper); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Handwriting — the margin voice
   -------------------------------------------------------------------------- */

.hand {
  font-family: var(--font-hand);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  font-weight: 600;
  color: var(--blue);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.hand--red { color: var(--red); }
.hand--ink { color: var(--ink-muted); }

/* Rotations: small, varied, never uniform. Uniform tilt reads as a template. */
.tilt-l { transform: rotate(-1.6deg); }
.tilt-r { transform: rotate(1.3deg); }
.tilt-lg { transform: rotate(-2.6deg); }

/* Hand-drawn underline + circle, as inline SVG so they scale with the text. */
.scribble { position: relative; display: inline-block; }
.scribble svg {
  position: absolute;
  left: -4%;
  bottom: -0.45em;
  width: 108%;
  height: 0.5em;
  overflow: visible;
  pointer-events: none;
}
.scribble path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.circled { position: relative; display: inline-block; padding: 0 0.12em; }
.circled svg {
  position: absolute;
  left: -14%; top: -32%;
  width: 128%; height: 168%;
  overflow: visible;
  pointer-events: none;
}
.circled path {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* Highlighter — sits behind the text, ragged like a real marker. */
.marker {
  background-image: linear-gradient(
    to right,
    oklch(0.88 0.16 95 / 0) 0%,
    oklch(0.88 0.16 95 / 0.85) 3%,
    oklch(0.88 0.16 95 / 0.85) 97%,
    oklch(0.88 0.16 95 / 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.62em;
  background-position: 0 0.72em;
  padding: 0 0.1em;
}

/* --------------------------------------------------------------------------
   4. Shell & sections
   -------------------------------------------------------------------------- */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.spine {
  display: grid;
  gap: var(--space-m) var(--space-l);
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .spine {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--space-l) var(--space-xl);
  }
}

.rail { font-family: var(--font-hand); font-size: 1.28rem; color: var(--ink-muted); line-height: 1.25; }

/* The trail is part of the design, not a wide-screen bonus. */
.spine { position: relative; }

.spine::before {
  content: "";
  position: absolute;
  left: -0.55rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--rule-ink) 0 7px,
    transparent 7px 13px);
  opacity: 0.35;
  pointer-events: none;
}

.rail { position: relative; }

/* Dot on . */
.rail::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 0.5rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--paper-deep);
  z-index: 1;
}

.rail > * { transform: rotate(-1.4deg); transform-origin: left center; }

@media (min-width: 62rem) {
  /* NOTE: no transform on . */
  .rail { position: sticky; top: 6.5rem; align-self: start; }
  .spine::before { left: -1.15rem; }
  .rail::before { left: -1.5rem; }
}

.rail__title {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

/* Adjacent sections both contribute padding, so this doubles at every seam. */
.section { padding-block: var(--space-xl); }

/* A band's padding reads as visible space, so seams get pulled in. */
.section--band + .section { padding-top: var(--space-l); }
.section--band { padding-bottom: var(--space-l); }

/* Alternating paper bands. */
.section--band {
  position: relative;
  background: linear-gradient(
    to bottom,
    transparent 0,
    oklch(0.94 0.012 85 / 0.5) var(--space-xl),
    /* Fade length must match the padding or the tint runs out early. */
    oklch(0.94 0.012 85 / 0.5) calc(100% - var(--space-l)),
    transparent 100%
  );
}

/* Marks the seam across the middle only, so it trails off at both ends. */
.section--band::before,
.section--band::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(64rem, 88%);
  height: 1.5px;
  background: repeating-linear-gradient(
    to right,
    var(--rule) 0 7px,
    transparent 7px 14px
  );
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
  opacity: 0.75;
}

.section--band::before { top: 0; }
.section--band::after { bottom: 0; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1.5px solid var(--rule-ink);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-height: 4.25rem;
}

.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-decoration: none;
  color: var(--ink);
}

.wordmark b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.03em;
}

.wordmark i {
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 0.98rem;
  color: var(--blue);
}

.nav { display: none; margin-inline-start: auto; align-items: center; gap: clamp(1rem, 2.2vw, 1.9rem); }
@media (min-width: 54rem) { .nav { display: flex; } }

.nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  padding-block: 0.3rem;
  position: relative;
}

/* Hand-drawn underline on hover, drawn with a squiggly border image. */
.nav a::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: -1px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2c9-2.6 18 1.4 27-.6s21-2 31 .4' fill='none' stroke='%23cc272e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--dur-fast) var(--ease-quart), transform var(--dur-fast) var(--ease-quart);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   6. Buttons — sticker style, hard shadow, press on click
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 0.68rem 1.15rem;
  border-radius: 7px;
  text-decoration: none;
  border: 1.8px solid var(--rule-ink);
  cursor: pointer;
  box-shadow: var(--shadow-hard-sm);
  transition: transform var(--dur-fast) var(--ease-quart),
              box-shadow var(--dur-fast) var(--ease-quart),
              background var(--dur-fast) var(--ease-quart);
}

.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--rule-ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--rule-ink); }

.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--red-deep); color: var(--paper); }

.btn--outline { background: var(--card); color: var(--ink); }
.btn--outline:hover { background: var(--yellow); color: var(--ink); }

.header .btn { margin-inline-start: auto; }
@media (min-width: 54rem) { .header .btn { margin-inline-start: 0; } }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 5rem) var(--space-xl); }

.hero__grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 62rem) {
  /* Text column needs the larger share. */
  .hero__grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
  }
}

.hero__hey { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }

.hero__star { width: 1.15rem; height: 1.15rem; flex: none; color: var(--blue); }

.hero h1 {
  font-size: var(--step-5);
  font-weight: 800;
  letter-spacing: -0.038em;
  margin-bottom: var(--space-m);
}

.hero h1 .accent { color: var(--red); }

.hero__lede {
  font-size: var(--step-1);
  color: var(--ink-muted);
  max-width: 36ch;
  line-height: 1.5;
}

.hero__lede strong { color: var(--ink); font-weight: 600; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-m);
}

.icon-link {
  display: inline-grid;
  place-items: center;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease-quart), transform var(--dur-fast) var(--ease-quart);
}
.icon-link:hover { color: var(--red); transform: translateY(-2px) rotate(-6deg); }
.icon-link svg { width: 1.25rem; height: 1.25rem; }

/* Portrait. */
.portrait-wrap {
  position: relative;
  width: min(26rem, 100%);
  /* Pulled left so the frame sits closer to the text column instead of
     hugging the page edge. */
  margin-inline: 0 auto;
  justify-self: start;
}

.portrait-frame {
  position: relative;
  display: block;
  background: var(--card-solid);
  border: 2px solid var(--rule-ink);
  border-radius: 4px;
  /* Photo-print mat: even sides, deeper base like a Polaroid. */
  padding: 0.75rem 0.75rem 0.6rem;
  box-shadow: var(--shadow-hard);
  transform: rotate(2deg);
}

.portrait-frame picture { display: block; }

.portrait__cut {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* Caption written on the mat, in the handwriting voice. */
.portrait-frame figcaption {
  margin-top: 0.55rem;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--ink-muted);
}

/* Skill notes stuck around the portrait. */
.skill-notes {
  list-style: none;
  padding: 0;
  margin: var(--space-s) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-note {
  font-family: var(--font-hand);
  font-size: 1.42rem;
  line-height: 1.1;
  color: var(--ink);
  background: var(--skill-bg, oklch(0.9 0.13 95));
  padding: 0.42rem 0.9rem 0.46rem;
  border-radius: 1px;
  box-shadow: 1px 3px 5px oklch(0.17 0.012 60 / 0.2);
}

.skill-note--a { --skill-bg: oklch(0.9 0.13 95); }
.skill-note--b { --skill-bg: oklch(0.9 0.09 150); }
.skill-note--c { --skill-bg: oklch(0.9 0.07 245); }
.skill-note--d { --skill-bg: oklch(0.9 0.07 30); }
.skill-note--e { --skill-bg: oklch(0.91 0.1 320); }
.skill-note--f { --skill-bg: oklch(0.9 0.1 200); }

/* Scatter only when the column is wide enough for notes to hang off it. */
@media (min-width: 80rem) {
  .skill-notes {
    display: block;
    margin: 0;
  }

  .skill-note {
    position: absolute;
    z-index: 2;
    white-space: nowrap;
    box-shadow: 1px 3px 6px oklch(0.17 0.012 60 / 0.24);
  }

  /* A long label at this size (~10. */
  .skill-note--a { top: 3%;   left: -2.6rem;  transform: rotate(-7deg); }
  .skill-note--b { top: 23%;  right: -3.4rem; transform: rotate(6deg); }
  .skill-note--c { bottom: 31%; left: -4.4rem;  transform: rotate(4deg); }
  .skill-note--d { bottom: 11%; right: -3.8rem; transform: rotate(-5deg); }
  .skill-note--e { bottom: -1.9rem; left: 15%; transform: rotate(-2.5deg); }
  /* "DSA" is short, so it fits the tight gap above the right shoulder. */
  .skill-note--f { top: -1.4rem; right: 12%; transform: rotate(5deg); }
}

/* Hand-drawn speed lines, tucked outside the frame's top-left corner. */
.portrait__ray {
  position: absolute;
  top: -1.4rem;
  left: -1.6rem;
  width: 3.4rem;
  height: 2.9rem;
  color: var(--blue);
  z-index: 1;
  overflow: visible;
}

@media (max-width: 61.99rem) {
  .portrait-wrap { width: min(20rem, 88%); margin-inline: auto; margin-block-start: var(--space-m); }
  .portrait__ray { width: 2.6rem; top: -1rem; left: -0.9rem; }
}

/* Metrics — sticker cards, each tilted differently. */
.metrics {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-m);
  /* Three cards. The cap keeps them from sprawling if one ever drops to a
     row of its own. */
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.metric {
  display: flex;
  flex-direction: column-reverse; /* <dt> before <dd> in markup; number leads visually */
  gap: 0.25rem;
  background: var(--card);
  border: 1.8px solid var(--rule-ink);
  border-radius: 8px;
  padding: var(--space-s) var(--space-m);
  box-shadow: var(--shadow-hard-sm);
}

.metric:nth-child(1) { transform: rotate(-1.2deg); }
.metric:nth-child(2) { transform: rotate(0.9deg); }
.metric:nth-child(3) { transform: rotate(-0.6deg); }
.metric:nth-child(4) { transform: rotate(1.5deg); }

.metric__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* Two ratings share one card, so the value row becomes a pair of links
   instead of a single number. */
/* Two ratings split the width one big number gets on the cards beside it. */
.metric--split .metric__value {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  align-items: start;
}

.metric__rating {
  display: flex;
  flex-direction: column-reverse;  /* platform reads above its rating */
  gap: 0.1rem;
  min-width: 0;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-quart);
}

.metric__rating:hover,
.metric__rating:focus-visible { transform: translateY(-2px); color: var(--ink); }

.metric__rating-num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* Was 1.05rem in the script face, which was barely legible at that size. */
.metric__rating-where {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--red-deep);
  line-height: 1.2;
}

.metric__rating:hover .metric__rating-where { color: var(--red); }

.metric__label {
  font-family: var(--font-hand);
  font-size: 1.16rem;
  color: var(--ink-muted);
  line-height: 1.22;
}

/* --------------------------------------------------------------------------
   8. Section headings
   -------------------------------------------------------------------------- */

.section h2 { font-size: var(--step-3); letter-spacing: -0.036em; margin-bottom: var(--space-s); }

.section__intro {
  color: var(--ink-muted);
  max-width: var(--measure);
  margin-bottom: var(--space-l);
}

/* Underlined on hover only, with the arrow sliding out. */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--red-deep);
  text-decoration: none;
}

.link-arrow::after {
  content: "\2192";
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-quart);
}

.link-arrow:hover,
.link-arrow:focus-visible { color: var(--red); text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(4px); }


/* --------------------------------------------------------------------------
   9. Experience
   -------------------------------------------------------------------------- */

.role { display: block; }

.role__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-bottom: var(--space-s);
  border-bottom: 2px solid var(--rule-ink);
}

.role__title { font-size: var(--step-2); letter-spacing: -0.03em; }
.role__org { color: var(--ink-muted); font-weight: 500; }

.role__dates {
  font-family: var(--font-hand);
  font-size: 1.25rem;
  color: var(--red);
  white-space: nowrap;
}

.role__body {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
  margin-top: var(--space-m);
  /* Grid items stretch by default, which distorts the letter. */
  align-items: start;
}

@media (min-width: 58rem) {
  .role__body { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
}

/* Deliverables: index cards on the page. */
.deliverable__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: var(--space-2xs);
}

.deliverable__name { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.03em; }
.deliverable__desc { color: var(--ink-muted); max-width: var(--measure); }
.deliverable__desc strong { color: var(--ink); font-weight: 600; }

.deliverable__notes { margin: var(--space-xs) 0 0; padding-left: 0; list-style: none; max-width: var(--measure); }

.deliverable__notes li {
  font-size: var(--step--1);
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 0.35rem;
  padding-left: 1.4rem;
  position: relative;
}

/* Hand-drawn check instead of a bullet. */
.deliverable__notes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.36em;
  width: 0.85rem; height: 0.85rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5c1.8 1.2 3.2 3 4.3 4.8C8 9.4 10.6 5.2 14.2 2.2' fill='none' stroke='%230065b4' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Sticky notes: the detail lives in dialogs, so these only carry a title. */
.notes__lead {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: var(--ink-faint);
  margin: var(--space-m) 0 var(--space-s);
}

/* Hand-drawn arrow trailing the lead line into the notes. */
.notes__lead::after {
  content: "";
  display: inline-block;
  width: 2.6rem; height: 0.55rem;
  margin-left: 0.5rem;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 11'%3E%3Cpath d='M1 6c9-3 22-5 45-4M39 1l7 4-7 4' fill='none' stroke='%230065b4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
  gap: var(--space-m) var(--space-s);
  margin-bottom: var(--space-l);
}

.note {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.8rem;
  /* Tall enough that the longest title still clears the doodle below it. */
  min-height: 10.4rem;
  padding: 0.9rem 0.95rem 0.75rem;
  text-align: left;
  cursor: pointer;
  border: none;
  border-radius: 1px;
  color: var(--ink);
  /* Three layers: a pencil doodle filling the dead space, ruled pad lines,
     then the paper colour. */
  background-image:
    var(--note-doodle, none),
    repeating-linear-gradient(
      to bottom,
      transparent 0 1.42rem,
      oklch(0.17 0.012 60 / 0.07) 1.42rem 1.5rem
    );
  background-repeat: no-repeat, repeat;
  /* Bottom-right, tucked just above the footer row. */
  background-position: var(--note-doodle-pos, right 0.7rem bottom 1.6rem), 0 0;
  background-size: var(--note-doodle-size, 4.6rem), auto;
  background-color: var(--note-bg, oklch(0.9 0.13 95));
  box-shadow:
    0 1px 1px oklch(0.17 0.012 60 / 0.16),
    1px 4px 9px oklch(0.17 0.012 60 / 0.19);
  transition: transform var(--dur-fast) var(--ease-quart), box-shadow var(--dur-fast) var(--ease-quart);
}

/* Four pad colours, so it reads as a handful of notes rather than a swatch. */
.note:nth-child(4n+1) { --note-bg: oklch(0.9 0.13 95);  transform: rotate(-1.8deg); }
.note:nth-child(4n+2) { --note-bg: oklch(0.9 0.09 150); transform: rotate(1.4deg); }
.note:nth-child(4n+3) { --note-bg: oklch(0.9 0.07 245); transform: rotate(0.9deg); }
.note:nth-child(4n+4) { --note-bg: oklch(0.9 0.07 30);  transform: rotate(-1.1deg); }

/* Pencil doodles filling the empty lower half of each sheet. */

/* A little agent — the bot that answers, then hands over to a person. */
.note:nth-child(4n+1) {
  --note-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%23241f1a' stroke-opacity='0.42' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 9V5M23 5a2 2 0 1 1 0-.1'/%3E%3Cpath d='M12 10c-1.4 0-2.5 1.2-2.5 2.6v11c0 1.4 1.1 2.6 2.5 2.6h22c1.4 0 2.5-1.2 2.5-2.6v-11c0-1.4-1.1-2.6-2.5-2.6z'/%3E%3Cpath d='M17.5 17.5v2M28.5 17.5v2M19 22.5c2.5 1.2 5.5 1.2 8 0'/%3E%3Cpath d='M9.5 16H6.5M36.5 16h3'/%3E%3Cpath d='M16 27v6.5c0 1 .9 1.8 2 1.8h10c1.1 0 2-.8 2-1.8V27'/%3E%3C/svg%3E");
}

/* The WhatsApp glyph — bubble with a handset. */
.note:nth-child(4n+2) {
  --note-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%23241f1a' stroke-opacity='0.42' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 37.5l2.4-8a15 15 0 1 1 5.9 5.5z'/%3E%3Cpath d='M18 16.5c.4-.9 1-1 1.6-.9.5 0 .8.1 1.1.9l1.1 2.6c.2.5.1.9-.2 1.3l-.8.9c-.3.3-.4.7-.2 1.1a11 11 0 0 0 4.9 4.4c.4.2.8.1 1.1-.2l.9-1c.3-.4.7-.5 1.2-.3l2.6 1.2c.7.3.9.6.9 1.1s-.2 1.5-1.3 2.1c-1.1.6-2.7.9-4.4.2a17.5 17.5 0 0 1-9.4-9.3c-.7-1.7-.4-3.2.9-4.1z'/%3E%3C/svg%3E");
}

/* Stacked crates — inventory. */
.note:nth-child(4n+3) {
  --note-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%23241f1a' stroke-opacity='0.42' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 26.5l9-4.5 9.5 3.5-9 5zM15.5 30.5v9.5l9-5V25.5M6 26.5v9.5l9.5 4.5v-10'/%3E%3Cpath d='M25 15l8-4.5 8.5 3.5-8 4.5zM33.5 18.5v9l8-4.5v-9M25 15v9l8.5 3.5v-9'/%3E%3Cpath d='M11 24.3l9.2 3.4'/%3E%3C/svg%3E");
}

/* Cogs — the automation work. */
.note:nth-child(4n+4) {
  --note-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%23241f1a' stroke-opacity='0.42' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='19' r='7.5'/%3E%3Ccircle cx='18' cy='19' r='2.8'/%3E%3Cpath d='M18 7.5v-3M18 33.5v-3M29.5 19h3M3.5 19h3M26.2 11l2.1-2.1M7.8 29.2l2.1-2.1M26.2 27.1l2.1 2.1M7.8 8.9L9.9 11'/%3E%3Ccircle cx='34' cy='32' r='5'/%3E%3Ccircle cx='34' cy='32' r='1.8'/%3E%3Cpath d='M34 25.5v-2M34 40.5v-2M40.5 32h2M25.5 32h2'/%3E%3C/svg%3E");
}

/* Slight size variation: notes torn off a pad are not all the same height. */
.note:nth-child(4n+2) { margin-top: 0.55rem; }
.note:nth-child(4n+3) { margin-top: -0.3rem; }

/* Turned-up bottom-right corner. */
.note::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 1.15rem; height: 1.15rem;
  background: linear-gradient(
    315deg,
    var(--paper) 0 48%,
    oklch(0.17 0.012 60 / 0.22) 49% 51%,
    transparent 52%
  );
  transition: width var(--dur-fast) var(--ease-quart), height var(--dur-fast) var(--ease-quart);
}

.note:hover,
.note:focus-visible {
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow:
    0 1px 1px oklch(0.17 0.012 60 / 0.18),
    2px 9px 18px oklch(0.17 0.012 60 / 0.26);
}

.note:hover::after,
.note:focus-visible::after { width: 1.6rem; height: 1.6rem; }

.note__name {
  font-family: var(--font-hand);
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}

.note__foot {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-right: 1.1rem;
  font-family: var(--font-hand);
  font-size: 1.02rem;
  color: var(--ink-muted);
}

.note__live { display: inline-flex; align-items: center; gap: 0.3rem; }

.note__live::before {
  content: "";
  width: 0.42rem; height: 0.42rem;
  border-radius: 50%;
  background: var(--red-deep);
}

.note__cue { margin-left: auto; transition: transform var(--dur-fast) var(--ease-quart); }
.note:hover .note__cue { transform: translateX(3px); }

/* Popup detail. */
/* margin:auto is what centres a modal dialog; the global reset wipes it. */
.sheet {
  margin: auto;
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(84vh, 52rem);
  padding: 0;
  border: 2.4px solid var(--rule-ink);
  /* Uneven corners: the same hand-cut feel as the cards, not a rounded box. */
  border-radius: 14px 10px 16px 9px;
  background: var(--card-solid);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--rule-ink);
  overflow: hidden;
}

/* Paper grain, so the panel reads as the same stock as the page. */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

.sheet::backdrop {
  background: oklch(0.17 0.012 60 / 0.5);
  backdrop-filter: blur(2px);
}

.sheet__close-form { position: sticky; top: 0; z-index: 3; height: 0; }

.sheet__close {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  width: 2.3rem; height: 2.3rem;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  border: 1.9px solid var(--rule-ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--rule-ink);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-quart), background var(--dur-fast) var(--ease-quart);
}

.sheet__close:hover,
.sheet__close:focus-visible {
  background: var(--yellow);
  transform: rotate(90deg);
}

.sheet__body {
  position: relative;
  z-index: 1;
  padding: var(--space-m) var(--space-m) var(--space-l);
  overflow-y: auto;
  max-height: min(84vh, 52rem);
  overscroll-behavior: contain;
}

/* Torn-edge rule under the dialog heading, echoing the section titles. */
.sheet__body > .deliverable__head {
  padding-right: 2.6rem;
  padding-bottom: var(--space-2xs);
  border-bottom: 2px solid var(--rule-ink);
  margin-bottom: var(--space-s);
}

@media (max-width: 34rem) {
  .sheet { width: calc(100vw - 1.2rem); border-radius: 12px 9px 13px 8px; }
  .sheet__body { padding: var(--space-s) var(--space-s) var(--space-m); }
}

/* Tags: hand-cut labels, not pills. */
.tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.2rem 0.55rem;
  border: 1.5px solid var(--rule-ink);
  border-radius: 4px;
  background: var(--paper-deep);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* "Live" — a stamped mark, no pulsing dot. Stamps don't blink. */
.tag--live {
  font-family: var(--font-display);
  color: var(--red-deep);
  border: 2px solid var(--red-deep);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  font-size: 0.68rem;
  padding: 0.16rem 0.5rem;
  border-radius: 3px;
  transform: rotate(-3.5deg);
  opacity: 0.92;
}

.stack { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--space-s); }

/* Proof: the experience letter, shown as a pinned document. */
.proof-wrap { position: relative; }

@media (min-width: 58rem) {
  /* The deliverables list is long; keep the tile in view beside it. */
  .proof-wrap { position: sticky; top: 6.5rem; }
}

/* Small tile standing in for the letter. */
.proof-tile {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
  padding: var(--space-s) var(--space-m) var(--space-s) var(--space-s);
  text-align: left;
  cursor: pointer;
  background: var(--card-solid);
  border: 2px solid var(--rule-ink);
  border-radius: 8px;
  box-shadow: var(--shadow-hard);
  transform: rotate(-1.2deg);
  transition: transform var(--dur) var(--ease-quart), box-shadow var(--dur) var(--ease-quart);
}

.proof-tile:hover,
.proof-tile:focus-visible {
  transform: rotate(0deg) translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--rule-ink);
}

.proof-tile__icon {
  flex: none;
  width: 2.3rem;
  height: 2.6rem;
  fill: none;
  stroke: var(--red-deep);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.proof-tile__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.proof-tile__title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.proof-tile__sub {
  font-family: var(--font-hand);
  font-size: 1.12rem;
  color: var(--ink-muted);
  line-height: 1.15;
}

/* The letter is portrait and tall, so its dialog is narrower than the
   deliverable sheets and scrolls. */
.sheet--letter { width: min(38rem, calc(100vw - 2rem)); }
.letter-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-s);
  border: 1.5px solid var(--rule-ink);
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   10. Projects
   -------------------------------------------------------------------------- */

/* Sits straight under the h2 now that the intro paragraph is gone. */
.projects { display: grid; gap: var(--space-s); margin-top: var(--space-m); }

/* Wide, short rows. */
.prow {
  position: relative;
  background: var(--card);
  border: 2px solid var(--rule-ink);
  border-radius: 10px;
  box-shadow: var(--shadow-hard-sm);
  transition: transform var(--dur-fast) var(--ease-quart), box-shadow var(--dur-fast) var(--ease-quart);
}

.prow:nth-child(odd) { transform: rotate(-0.35deg); }
.prow:nth-child(even) { transform: rotate(0.3deg); }

.prow:hover, .prow:focus-within {
  transform: rotate(0deg) translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--rule-ink);
}

.prow__main {
  display: block;
  /* Right padding clears the repo icon sitting in the corner. */
  padding: var(--space-s) 3.6rem var(--space-s) var(--space-m);
  text-decoration: none;
  color: var(--ink);
}

.prow__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin-bottom: 0.3rem; }
.prow__name { font-size: var(--step-1); letter-spacing: -0.03em; }

/* The live URL under a project title. Plain text, not a link: the whole row is
   already one <a>, and the post it opens carries the clickable version. */
/* A row with two destinations. The title link is stretched over the whole card
   so the card still behaves like one big link, and anything that needs its own
   click (the live button, the repo mark) is raised above it. */
.prow__main--split { position: static; }
.prow__stretch { color: inherit; text-decoration: none; }
.prow__stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.prow__live {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.28rem 0.6rem;
  border: 2px solid currentColor;
  border-radius: 6px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--red-deep);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-quart);
}
.prow__live:hover, .prow__live:focus-visible {
  transform: translate(-1px, -1px);
  color: var(--ink);
  background: var(--yellow);
}

.prow__desc {
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: 1.55;
  max-width: var(--measure);
  margin-bottom: var(--space-xs);
}

/* The repo mark: its own link, above the row link. */
.prow__repo {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  color: var(--ink-faint);
  transition: color var(--dur-fast) var(--ease-quart), background var(--dur-fast) var(--ease-quart);
}

.prow__repo svg { width: 1.35rem; height: 1.35rem; }

.prow__repo:hover, .prow__repo:focus-visible {
  color: var(--ink);
  background: var(--yellow);
}

/* --------------------------------------------------------------------------
   11. Blog marquee
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-s);
  mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}

.marquee__track { display: flex; gap: var(--space-m); width: max-content; animation: slide 52s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }   /* track holds two identical halves */
}

.post-card {
  flex: 0 0 auto;
  width: min(20rem, 78vw);
  background: var(--card);
  border: 1.8px solid var(--rule-ink);
  border-radius: 9px;
  padding: var(--space-m);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  box-shadow: var(--shadow-hard-sm);
  transition: transform var(--dur-fast) var(--ease-quart), background var(--dur-fast) var(--ease-quart);
}

.post-card:nth-child(odd) { transform: rotate(-0.7deg); }
.post-card:nth-child(even) { transform: rotate(0.6deg); }
.post-card:hover { transform: rotate(0deg) translateY(-3px); background: var(--yellow); }

.post-card__meta { font-family: var(--font-hand); font-size: 1.1rem; color: var(--red); }
.post-card__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.post-card__excerpt { font-size: var(--step--1); color: var(--ink-muted); line-height: 1.5; }
.post-card--empty { border-style: dashed; background: var(--paper-deep); }

/* --------------------------------------------------------------------------
   12. Blog index
   -------------------------------------------------------------------------- */

.page-head { padding-block: var(--space-xl) var(--space-l); }
.page-head h1 { font-size: var(--step-4); letter-spacing: -0.038em; margin-bottom: var(--space-s); }
.page-head p { color: var(--ink-muted); max-width: var(--measure); font-size: var(--step-1); }

/* Article pages. */
/* Centre the article: the shell is much wider than a reading column. */
.post {
  padding-block: var(--space-m) var(--space-xl);
  max-width: calc(var(--measure) + 2rem);
  margin-inline: auto;
}

.post__head {
  max-width: var(--measure);
  padding-bottom: var(--space-m);
  margin-bottom: var(--space-m);
  border-bottom: 2px solid var(--rule-ink);
}

.post__title {
  font-size: var(--step-3);
  letter-spacing: -0.036em;
  margin: 0.2rem 0 var(--space-xs);
}

.post__standfirst {
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink-muted);
  font-weight: 400;
}

.post__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--space-s); }

.tag--link {
  text-decoration: none;
  background: var(--yellow);
  transition: transform var(--dur-fast) var(--ease-quart);
}
.tag--link:hover { transform: translate(-1px, -1px); }

.prose { max-width: var(--measure); }
.prose p { margin-bottom: var(--space-s); color: var(--ink-muted); }

/* Diagrams. */
.figure {
  margin: var(--space-m) 0;
  padding: var(--space-s) var(--space-s) var(--space-xs);
  background: var(--card-solid);
  border: 1.8px solid var(--rule-ink);
  border-radius: 8px;
  box-shadow: var(--shadow-hard-sm);
  /* Wide diagrams scroll inside their own box rather than the page. */
  overflow-x: auto;
}

.figure svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);
}

.figure figcaption {
  margin-top: var(--space-xs);
  font-family: var(--font-hand);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--ink-faint);
  text-align: center;
}

/* Diagram primitives, shared by every figure. */
.dg-box { fill: var(--paper); stroke: currentColor; stroke-width: 1.8; }
.dg-box--accent { fill: oklch(0.9 0.13 95); }
.dg-box--dim { fill: var(--paper-deep); stroke-dasharray: 5 4; }
.dg-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dg-line--dash { stroke-dasharray: 5 4; }
.dg-line--red { stroke: var(--red-deep); }
.dg-arrow { fill: currentColor; }
.dg-arrow--red { fill: var(--red-deep); }
.dg-t {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: middle;
}
.dg-t--sm { font-size: 10.5px; font-weight: 500; fill: var(--ink-muted); }
.dg-t--hand { font-family: var(--font-hand); font-size: 15px; fill: var(--red-deep); font-weight: 600; }

.prose h2 {
  font-size: var(--step-1);
  letter-spacing: -0.03em;
  margin: var(--space-l) 0 var(--space-xs);
  color: var(--ink);
}

.prose ul { margin: 0 0 var(--space-s); padding-left: 0; list-style: none; }

.prose li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.4rem;
  color: var(--ink-muted);
}

/* Same hand-drawn check the deliverable notes use. */
.prose li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 0.85rem; height: 0.85rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5c1.8 1.2 3.2 3 4.3 4.8C8 9.4 10.6 5.2 14.2 2.2' fill='none' stroke='%230065b4' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.05em 0.35em;
  color: var(--ink);
}

.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }

.post__foot {
  max-width: var(--measure);
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1.5px dashed var(--rule);
}

/* Back button sitting beside the breadcrumb. */
.crumb-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}

/* Breadcrumb line. */
.crumb {
  font-family: var(--font-hand);
  font-size: 1.22rem;
  color: var(--ink-faint);
  line-height: 1.25;
}

.crumb a { color: var(--ink-muted); text-decoration: none; }
.crumb a:hover { color: var(--red-deep); text-decoration: underline; }

/* A quiet text link, not a button. */
.back-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--font-hand);
  font-size: 1.22rem;
  color: var(--red-deep);
  text-decoration: none;
  white-space: nowrap;
}

.back-btn::before {
  content: "\2190";
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-quart);
}

.back-btn:hover,
.back-btn:focus-visible { color: var(--red); text-decoration: underline; }
.back-btn:hover::before { transform: translateX(-3px); }

.post-list { display: grid; gap: var(--space-m); }

.post-row {
  display: block;
  padding: var(--space-s) var(--space-m);
  background: var(--card);
  border: 1.8px solid var(--rule-ink);
  border-radius: 9px;
  box-shadow: var(--shadow-hard-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease-quart), background var(--dur-fast) var(--ease-quart);
}

/* The 8rem first column here used to hold the date. */

.post-row:nth-child(odd) { transform: rotate(-0.4deg); }
.post-row:nth-child(even) { transform: rotate(0.35deg); }
.post-row:hover { transform: rotate(0deg) translate(-2px, -2px); background: var(--yellow); }

.post-row__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 0.25rem; }
.post-row__excerpt { color: var(--ink-muted); font-size: var(--step--1); line-height: 1.5; max-width: var(--measure); }
.post-row__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--space-xs); }

.empty-note {
  padding: var(--space-m);
  border: 1.8px dashed var(--rule-ink);
  border-radius: 9px;
  background: var(--paper-deep);
  color: var(--ink-muted);
  max-width: var(--measure);
  transform: rotate(-0.5deg);
}
.empty-note strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   13. Contact & footer
   -------------------------------------------------------------------------- */

/* Same pad colours, rules and shadow as the deliverable notes above. */
.contact-notes {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-l);
  display: grid;
  /* auto-fill, not auto-fit: auto-fit stretches a short last row. */
  grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr));
  gap: var(--space-s);
}

@media (min-width: 52rem) {
  .contact-notes { grid-template-columns: repeat(4, 1fr); }
}

.cnote {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.1rem;
  height: 100%;
  min-height: 0;
  padding: 0.85rem 0.85rem 0.9rem;
  text-decoration: none;
  color: var(--ink);
  border-radius: 1px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 1.42rem,
    oklch(0.17 0.012 60 / 0.07) 1.42rem 1.5rem
  );
  background-color: var(--cnote-bg, oklch(0.9 0.13 95));
  box-shadow:
    0 1px 1px oklch(0.17 0.012 60 / 0.16),
    1px 5px 11px oklch(0.17 0.012 60 / 0.19);
  transition: transform var(--dur-fast) var(--ease-quart), box-shadow var(--dur-fast) var(--ease-quart);
}

/* Pad colour and the crayon the icon is drawn in, per note. */
.cnote--a { --cnote-bg: oklch(0.9 0.13 95);  --cnote-ink: oklch(0.52 0.19 30);  transform: rotate(-1.7deg); }
.cnote--b { --cnote-bg: oklch(0.9 0.09 150); --cnote-ink: oklch(0.46 0.14 155); transform: rotate(1.3deg); }
.cnote--c { --cnote-bg: oklch(0.9 0.07 245); --cnote-ink: oklch(0.45 0.16 265); transform: rotate(0.9deg); }
.cnote--d { --cnote-bg: oklch(0.9 0.07 30);  --cnote-ink: oklch(0.48 0.19 350); transform: rotate(-1.1deg); }
.cnote--e { --cnote-bg: oklch(0.9 0.1 200);  --cnote-ink: oklch(0.45 0.15 220); transform: rotate(1.5deg); }
.cnote--f { --cnote-bg: oklch(0.91 0.1 320); --cnote-ink: oklch(0.47 0.17 300); transform: rotate(-0.9deg); }

.cnote:hover,
.cnote:focus-visible {
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow:
    0 1px 1px oklch(0.17 0.012 60 / 0.18),
    2px 9px 18px oklch(0.17 0.012 60 / 0.26);
}

/* Crayon: thick, round-capped, slightly transparent so the rules read through. */
/* Crayon: thick, round-capped, slightly transparent so the rules read through. */
.cnote__icon {
  width: 3.2rem;
  height: 2.8rem;
  fill: none;
  stroke: var(--cnote-ink, var(--ink));
  stroke-opacity: 0.85;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur) var(--ease-quart), stroke-opacity var(--dur-fast) var(--ease-quart);
}

.cnote:hover .cnote__icon,
.cnote:focus-visible .cnote__icon {
  stroke-opacity: 1;
  transform: rotate(-4deg) scale(1.06);
}

.cnote__what {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  line-height: 1.05;
  color: var(--ink-faint);
}

/* The detail is the point of the note, so it outweighs the label. */
.cnote__val {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
  hyphens: none;
}

.footer {
  border-top: 2px solid var(--rule-ink);
  margin-top: var(--space-xl);
  padding-block: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-hand);
  font-size: 1.16rem;
  color: var(--ink-faint);
}

.footer a { color: var(--ink-muted); text-decoration: none; }
.footer a:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   14. Motion — enhances an already-visible page
   -------------------------------------------------------------------------- */

.rise { opacity: 1; transform: none; }

/* JS adds .js-motion; without it (or headless) content ships fully visible. */
.js-motion .rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-quint), transform var(--dur-slow) var(--ease-quint);
}
.js-motion .rise.is-in { opacity: 1; transform: none; }

/* Tilted elements keep their rotation through the reveal. */
.js-motion .stagger > * {
  opacity: 0;
  transform: translateY(18px);
  animation: rise-in var(--dur-slow) var(--ease-quint) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes rise-in { to { opacity: 1; transform: none; } }

/* The scribble draws itself once, on load. */
.js-motion .scribble path, .js-motion .circled path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw 900ms var(--ease-quart) 550ms forwards;
}
.js-motion .circled path { animation-delay: 950ms; }

@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .marquee { mask-image: none; overflow-x: auto; }
  .marquee__track { animation: none; width: auto; }

  .js-motion .rise, .js-motion .stagger > * { opacity: 1; }
  .js-motion .scribble path, .js-motion .circled path { stroke-dashoffset: 0; }
}

@media print {
  body { background: #fff; }
  .header, .marquee, .skip-link { display: none; }
  * { box-shadow: none !important; transform: none !important; }
}