:root {
  /* Paper layers */
  --page:        #F5F5F5;   /* the main page — aged cream */
  --page-ruled:  #EEE8D5;   /* slightly warmer for ruled sections */
  --page-deep:   #E6DEC8;   /* deeper cream for recessed areas */
  --cover:       #2C1A0E;   /* worn leather dark brown */
  --cover-mid:   #3D2410;   /* slightly lighter leather */

  /* Ink colours */
  --ink:         #1A1410;   /* dark brown-black — fountain pen */
  --ink-faint:   rgba(26,20,16,0.1);
  --ink-lighter: rgba(26,20,16,0.65);
  --ink-ghost:   rgba(26,20,16,0.055);

  /* Accent — burnt orange-red, like old wax seal or dried ink */
  --violet:      #B85C38;
  --violet-dim:  #9A4A2C;
  --violet-ink:  rgba(184, 92, 56, 0.18);
  --violet-ghost:rgba(184, 92, 56, 0.07);
  --violet-soft: rgba(184, 92, 56, 0.12);
  --violet-mist: rgba(184, 92, 56, 0.055);
  --tape:        rgba(184, 92, 56, 0.13);
  --tape-edge:   rgba(184, 92, 56, 0.22);

  /* Ruling lines — classic field notebook */
  --rule-blue:   rgba(134,152,190,0.28);
  --margin-red:  rgba(190,80,60,0.22);

  --f-serif:     'Special Elite', 'Courier New', monospace; /* typewriter body */
  --f-hand:      'Caveat', cursive;           /* handwritten annotations */
  --f-mono:      'DM Mono', monospace;        /* typewritten labels */
  --f-stamp:     'Coustard', serif;             /* chunky slab — field guide headings */
}

html { font-size: 112.5%; scroll-behavior: smooth; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── BODY: the open notebook ── */
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: 1rem;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ════════════════════════════════════════════
   NAV — ink stamp trigger + full-screen
   table-of-contents overlay
   ════════════════════════════════════════════ */

.field-nav {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 500;
  pointer-events: none;
}

/* ── NOTEBOOK ANNOTATIONS — highlighted / circled words ── */

/* Highlighter streak — like a yellow marker swiped across */
.hl {
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(184, 92, 56, 0.18) 40%,
    rgba(184, 92, 56, 0.18) 88%,
    transparent 88%
  );
  padding: 0 2px;
  border-radius: 1px;
}

/* Circled word — hand-drawn SVG oval as outline */
.circled {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.circled::before {
  content: '';
  position: absolute;
  inset: -3px -6px;
  border: 1.5px solid var(--violet-dim);
  border-radius: 50% 48% 52% 50% / 40% 42% 58% 60%;
  transform: rotate(-1.5deg);
  opacity: 0.55;
  pointer-events: none;
}
.hero-coffee-stain {
  position: absolute;
  top: 5%;
  right: clamp(0px, 2vw, 60px);
  transform: rotate(52deg);
  width: clamp(340px, 42vw, 680px);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
/* ── THE HORIZONTAL BAR ── */
.field-nav-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 64px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  pointer-events: all;
  z-index: 10;
  box-shadow: 0 1px 0 rgba(26,20,16,0.08);
  padding-left: 32px;
}

/* Hide bar when overlay is open */
.field-nav[open] .field-nav-bar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ── BOOKMARK LOGO — left edge, protrudes below the bar ── */
.field-nav-bookmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  text-decoration: none;
  user-select: none;

  background: var(--violet);
  padding: 10px 18px 36px;
  width: 88px;
  height: 120px;
  align-self: flex-start;

  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
  box-shadow: 2px 4px 16px rgba(26,20,16,0.28);
  transition: height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.field-nav-bookmark:hover {
  height: 130px;
  box-shadow: 2px 10px 28px rgba(26,20,16,0.34);
}

.field-nav-logo {
  width: 55px;
  height: 55px;
  object-fit: contain;
  display: block;
  opacity: 0.92;
  border-radius: 50%;
}

.field-nav-stamp-sub {
  font-family: var(--f-mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,240,227,0.3);
  text-align: center;
}

/* ── NAV ITEMS — the "Contents:" label + linked items ── */
.field-nav-items {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 32px;
  height: 100%;
}

.field-nav-label {
  font-family: var(--f-mono);
  font-size: 0.467rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(26,20,16,0.35);
  margin-right: 20px;
  user-select: none;
  flex-shrink: 0;
}

.field-nav-link {
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26,20,16,0.6);
  background: none;
  border: none;
  border-left: 1px solid rgba(26,20,16,0.08);
  padding: 0 22px;
  height: 100%;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-nav-link:hover {
  color: var(--ink);
  background: rgba(26,20,16,0.03);
}



/* ── THE OVERLAY — inside cover of the notebook ── */
.field-nav-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--page);
  background-image:
    linear-gradient(to right, transparent 72px, var(--margin-red) 72px, var(--margin-red) 73px, transparent 73px),
    repeating-linear-gradient(to bottom, transparent 0px, transparent 27px, var(--rule-blue) 27px, var(--rule-blue) 28px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.2'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");

  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;

  display: flex;
  flex-direction: column;
  /* Top padding clears the close button, bottom clears the footer */
  padding: 100px clamp(80px, 10vw, 160px) 80px;
  overflow: hidden;
}

.field-nav[open] .field-nav-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* Table of contents label — fixed, doesn't scroll */
.field-nav-toc-label {
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink-lighter);
  margin-bottom: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.field-nav-toc-label::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--ink-lighter);
  opacity: 0.4;
}

/* Entries — scrollable if list grows long */
.field-nav-entries {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;

  /* Elegant minimal scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) transparent;
  padding-right: 16px;

  /* Fade out at bottom to hint there's more */
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

.field-nav-entries::-webkit-scrollbar { width: 3px; }
.field-nav-entries::-webkit-scrollbar-track { background: transparent; }
.field-nav-entries::-webkit-scrollbar-thumb {
  background: rgba(26,20,16,0.15);
  border-radius: 99px;
}

/* Close button — top right */
.field-nav-close {
  position: absolute;
  top: 28px; right: 36px;
  font-family: var(--f-mono);
  font-size: 0.556rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-lighter);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}

.field-nav-close:hover { color: var(--violet-dim); }

.nav-close-x {
  display: block;
  flex-shrink: 0;
  color: currentColor;
}

/* Nav entries — large, beautiful, like a real table of contents */
.field-nav-entries {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.field-nav-overlay a {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 16px 0;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: padding-left 0.3s ease;
}

.field-nav-overlay a:first-child {
  border-top: none;
}

.field-nav-overlay a:hover {
  padding-left: 8px;
}

/* Entry number */
.nav-entry-num {
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: var(--violet-dim);
  margin-right: 24px;
  flex-shrink: 0;
  padding-top: 6px;
}

/* Entry title — the big bit */
.nav-entry-title {
  font-family: var(--f-stamp);
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  color: var(--ink);
  line-height: 1;
  transition: color 0.2s;
  flex: 1;
}

.field-nav-overlay a:hover .nav-entry-title { color: var(--violet-dim); }
.field-nav-overlay a.active .nav-entry-title { color: var(--violet-dim); }

/* Dot leader + page number — right side */
.nav-entry-year {
  font-family: var(--f-mono);
  font-size: 0.556rem;
  letter-spacing: 0.1em;
  color: var(--ink-lighter);
  flex-shrink: 0;
  padding-top: 6px;
}

/* Avail dot in overlay — bottom left */
.field-nav-overlay-footer {
  position: absolute;
  bottom: 32px;
  left: clamp(80px, 10vw, 160px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-nav-overlay-footer .nav-avail-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--violet);
  animation: breathe 3.5s ease-in-out infinite;
}

.field-nav-overlay-footer span {
  font-family: var(--f-mono);
  font-size: 0.467rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violet-dim);
}

/* Offset content below the fixed nav bar */
.main {
  padding-top: 64px;
  transition: none;
}

.field-nav[open] ~ .main { padding-top: 64px; }

/* ════════════════════════════════════════════
   MAIN — full width now, no sidebar
   Capped and centred for large screens
   ════════════════════════════════════════════ */
.main {
  width: 100%;
  /*max-width: 1600px;*/
  margin: 0 auto;
  position: relative; /* for polaroid absolute positioning */
}

/* On very large screens, show a paper edge either side */
body {
  background: var(--cover); /* the leather peeking out on ultra-wide */
}

/* ════════════════════════════════════════════
   PAGE WRAPPER — common ruled-paper look
   ════════════════════════════════════════════ */
.page {
  background: var(--page);
  position: relative;

  /* Horizontal rules — 28px line height grid */
  background-image:
    /* Left margin red line */
    linear-gradient(to right, transparent 72px, var(--margin-red) 72px, var(--margin-red) 73px, transparent 73px),
    /* Ruling lines */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 27px,
      var(--rule-blue) 27px,
      var(--rule-blue) 28px
    ),
    /* Paper grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.2'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════
   HERO — the first page / opening observation
   ════════════════════════════════════════════ */
.hero {
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
  overflow: visible;
}

/* Ruled page base */
.hero {
  background-color: var(--page);
  background-image:
    linear-gradient(to right, transparent 72px, var(--margin-red) 72px, var(--margin-red) 73px, transparent 73px),
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 27px,
      var(--rule-blue) 27px,
      var(--rule-blue) 28px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.2'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
}



/* Page number — top right corner */
.hero-pagenum {
  position: absolute;
  top: 26px;
  right: 40px;
  font-family: var(--f-mono);
  font-size: 0.611rem;
  letter-spacing: 0.1em;
  color: var(--ink-lighter);
  z-index: 2;
}

/* The main content area — text fills everything left of the polaroids */
.hero-content {
  flex: 1;
  padding: clamp(48px, 6vw, 120px) clamp(48px, 6vw, 120px) clamp(48px, 6vw, 120px) clamp(72px, 8vw, 160px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Leave room for polaroids: their width is ~32vw, plus a comfortable gap */
  max-width: calc(68vw - 140px);
  /* But never let it get unreasonably wide on ultra-wide screens */
  width: min(calc(68vw - 140px), 780px);
}

/* Handwritten date / location stamp at top of page */
.hero-field-header {
  display: flex;
  gap: 32px;
  align-items: baseline;
  margin-bottom: 48px;
  padding-top: 8px;
  opacity: 0;
  animation: inkIn 1.2s ease forwards 0.2s;
}

.hero-field-date {
  font-family: var(--f-hand);
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 400;
}

.hero-field-location {
  font-family: var(--f-hand);
  font-size: 0.95rem;
  color: var(--violet-dim);
}

.hero-field-location::before {
  content: '📍 ';
  font-size: 0.75rem;
}

/* The big headline — typewritten feel, Garamond weight */
.hero-headline {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 5vw, 7.5rem);
  line-height: 1.06;
  color: var(--ink);
  margin-bottom: 0;
  letter-spacing: -0.015em;
  opacity: 0;
  animation: inkIn 1.5s ease forwards 0.5s;
}

.hero-headline .small-lead {
  display: block;
  font-size: 0.22em;
  font-family: var(--f-mono);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-lighter);
  margin-bottom: 12px;
}

/* Rotating word — slab font, big and alive */
.mainword {
  font-family: var(--f-stamp);
  font-weight: 900;
  color: var(--violet);
  position: relative;
  display: inline-block;
  font-size: 1.15em;
  letter-spacing: -0.01em;
  line-height: 1;
  transition: color 0.4s ease;
}

.mainword::after { display: none; }

/* Body text — like a first observation entry */
.hero-body-wrap {
  margin-top: 40px;
  opacity: 0;
  animation: inkIn 1.5s ease forwards 0.85s;
}

.hero-body {
  font-family: var(--f-serif);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  color: var(--ink);
  max-width: 100%;
  line-height: 1.85;
  margin-bottom: 0;
}

/* Small handwritten note beside the body */
.hero-annotation {
  font-family: var(--f-hand);
  font-size: 0.9rem;
  color: var(--violet-dim);
  margin-top: 10px;
  transform: rotate(-1deg);
  display: inline-block;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 25px;
  opacity: 0;
  animation: inkIn 1.5s ease forwards 1.15s;
}

@keyframes inkIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── MARGIN ANNOTATIONS (decorative, down the left gutter) ── */
.margin-bird {
  font-size: 1.1rem;
  opacity: 0.18;
  transform: rotate(-90deg);
  transition: opacity 0.3s;
  line-height: 1;
}

.margin-note-text {
  font-family: var(--f-hand);
  font-size: 0.65rem;
  color: var(--ink-lighter);
  opacity: 0.35;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  letter-spacing: 0.05em;
}

/* ── BUTTONS ── */
.btn-primary {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--page);
  background: var(--ink);
  padding: 11px 22px;
  border-radius: 1px;
  transition: background 0.25s, transform 0.2s;

  /* Rubber stamp effect — slightly rough edges via box-shadow */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.btn-primary:hover {
  background: var(--violet-dim);
  transform: translateY(-1px);
}

.btn-ghost {
  font-family: var(--f-hand);
  font-size: 1rem;
  color: var(--violet-dim);
  border-bottom: 1px dashed rgba(184,92,56,0.4);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}

.btn-ghost:hover {
  color: var(--violet);
  border-color: rgba(184,92,56,0.7);
}

/* ── TICKER — kraft paper tape strip ── */
.logo-ticker-wrap {
  padding: 30px 100px 32px;
  position: relative;
  z-index: 1;
  overflow: visible; /* allow polaroid to bleed behind from above */

  background: var(--violet);
  border-top: none;
}

.ticker-label {
  font-family: var(--f-hand);
  font-size: 0.9rem;
  color: rgba(245,240,227,0.7);
  margin-bottom: 8px;
  position: relative;
  z-index: 3;
}

.ticker-track {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  position: relative;
  z-index: 3;
}

.ticker-inner {
  display: flex;
  gap: 60px;
  align-items: center;
  animation: ticker 32s linear infinite;
  flex-shrink: 0;
  padding-right: 48px;
  width: max-content;
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* Consistent height for all logos — width scales automatically */
  height: 80px;
}

.ticker-item img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  /* Sit naturally on the kraft paper — no white boxes */
  mix-blend-mode: screen;
  /* Subtle tone-down so no single logo screams louder than others */
  opacity: 0.75;
}

/* Fallback: if image fails to load, alt text shows in the same style as before */
.ticker-item img::after {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.833rem;
  color: rgba(245,240,227,0.65);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .ticker-item { height: 24px; }
  .ticker-item img { max-width: 90px; }
  .ticker-inner { gap: 32px; }
}

/* ════════════════════════════════════════════
   SECTION DIVIDER — tabbed page divider
   ════════════════════════════════════════════ */
.section-divider {
  height: 32px;
  background: var(--page-deep);
  border-top: 1px solid var(--ink-faint);
  border-bottom: 1px solid var(--ink-faint);
  display: flex;
  align-items: center;
  padding: 0 100px;
  position: relative;
  overflow: hidden;
}

.section-divider::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    var(--ink-ghost) 3px,
    var(--ink-ghost) 4px
  );
  opacity: 0.5;
}

/* ════════════════════════════════════════════
   ALL SECTIONS — ruled paper treatment
   ════════════════════════════════════════════ */
section {
  background-color: var(--page);
  background-image:
    linear-gradient(to right, transparent 72px, var(--margin-red) 72px, var(--margin-red) 73px, transparent 73px),
    repeating-linear-gradient(to bottom, transparent 0px, transparent 27px, var(--rule-blue) 27px, var(--rule-blue) 28px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.2'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  padding: clamp(48px, 6vw, 120px) clamp(48px, 6vw, 120px) clamp(56px, 7vw, 140px) clamp(72px, 8vw, 160px);
  border-bottom: 1px solid var(--ink-faint);
  position: relative;
}

/* Section-header — like a notebook section title with stamp */
.section-header {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 56px;
}

.section-hand {
  font-family: var(--f-hand);
  font-size: 1rem;
  color: var(--ink-lighter);
  flex-shrink: 0;
  transform: rotate(-1deg);
  display: inline-block;
  opacity: 0.75;
}

.section-title {
  font-family: var(--f-stamp);
  font-size: clamp(1.4rem, 3vw, 3rem);
  color: var(--ink);
  line-height: 1;
  letter-spacing: 0.02em;
}

.section-rule {
  flex: 1;
  height: 1px;
  background: var(--ink-faint);
}

/* Rubber-stamp accent beside section title */
.section-stamp {
  font-family: var(--f-mono);
  font-size: 0.556rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violet-dim);
  border: 1px solid rgba(106,90,153,0.5);
  padding: 3px 8px;
  border-radius: 1px;
  transform: rotate(1.5deg);
  display: inline-block;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════
   ABOUT — field observation log
   ════════════════════════════════════════════ */
/* ── ABOUT — visible paper texture on original cream ── */
.about {
  background-color: #FFFFFF;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.6  0 0 0 0 0.45  0 0 0 0 0.3  0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23a)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='6' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.28  0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23b)'/%3E%3C/svg%3E") !important;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.about-lead {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.5vw, 1.5rem);
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 24px;
}

.about-body {
  font-family: var(--f-serif);
  font-size: clamp(0.88rem, 1.1vw, 1.15rem);
  color: var(--ink);
  line-height: 1.85;
  margin-bottom: 18px;
}

/* Handwritten note in the margin */
.about-hand-note {
  font-family: var(--f-hand);
  font-size: 0.95rem;
  color: var(--violet-dim);
  transform: rotate(-1.5deg);
  display: inline-block;
  margin-top: 8px;
  line-height: 1.5;
}

.about-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 16px 24px;
  position: relative;
}

/* Each discipline = a typed index card pinned directly to the page */
.discipline-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background-color: #FFFFFF;
  background-image:
    /* Pink header line at 44px */
    linear-gradient(to bottom,
      transparent 44px,
      rgba(220, 100, 110, 0.6) 44px,
      rgba(220, 100, 110, 0.6) 45.5px,
      transparent 45.5px,
      /* First ruling line starts at 69px (44 + 24 gap + 1px line) */
      transparent 69px,
      rgba(100, 195, 185, 0.45) 69px,
      rgba(100, 195, 185, 0.45) 70.5px,
      transparent 70.5px,
      transparent 93px,
      rgba(100, 195, 185, 0.45) 93px,
      rgba(100, 195, 185, 0.45) 94.5px,
      transparent 94.5px,
      transparent 117px,
      rgba(100, 195, 185, 0.45) 117px,
      rgba(100, 195, 185, 0.45) 118.5px,
      transparent 118.5px,
      transparent 141px,
      rgba(100, 195, 185, 0.45) 141px,
      rgba(100, 195, 185, 0.45) 142.5px,
      transparent 142.5px,
      transparent 165px,
      rgba(100, 195, 185, 0.45) 165px,
      rgba(100, 195, 185, 0.45) 166.5px,
      transparent 166.5px,
      transparent 189px,
      rgba(100, 195, 185, 0.45) 189px,
      rgba(100, 195, 185, 0.45) 190.5px,
      transparent 190.5px
    );
  border: none;
  position: relative;
  min-height: 160px;
  box-shadow:
    0 2px 4px rgba(26,20,16,0.07),
    0 6px 16px rgba(26,20,16,0.09),
    0 14px 36px rgba(26,20,16,0.07),
    2px 2px 0 rgba(26,20,16,0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Header zone — above the pink line */
.discipline-item .discipline-header {
  padding: 10px 18px 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Body zone — below the pink line, on the ruled lines */
.discipline-item .discipline-body {
  padding: 10px 18px 24px;
}

/* Alternate slight rotations — pinned at different angles */
.discipline-item:nth-child(1) { transform: rotate(-0.8deg) translateX(-10px); margin-bottom: -32px; z-index: 1; }
.discipline-item:nth-child(2) { transform: rotate(0.5deg)  translateX(14px);  margin-bottom: -32px; z-index: 2; }
.discipline-item:nth-child(3) { transform: rotate(-1deg)   translateX(-6px);  margin-bottom: -32px; z-index: 3; }
.discipline-item:nth-child(4) { transform: rotate(0.8deg)  translateX(10px);  z-index: 4; }

.discipline-item:hover {
  transform: rotate(0deg) translateY(-6px) !important;
  z-index: 10 !important;
  box-shadow:
    0 4px 8px rgba(26,20,16,0.09),
    0 12px 28px rgba(26,20,16,0.13),
    0 22px 50px rgba(26,20,16,0.08),
    3px 3px 0 rgba(26,20,16,0.03);
}

/* No pushpin */
.discipline-item::before { display: none; }

.discipline-item:hover { }

.discipline-icon {
  font-size: 1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  color: var(--violet);
  opacity: 0.8;
  transition: opacity 0.2s;
}

.discipline-item:hover .discipline-icon { opacity: 1; }

.discipline-name {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink);
}

.discipline-desc {
  font-family: var(--f-mono);
  font-size: 0.611rem;
  color: var(--ink-lighter);
  line-height: 1.9;
  letter-spacing: 0.01em;
}

.discipline-tag {
  position: absolute;
  right: 12px;
  top: 10px;
  font-family: var(--f-hand);
  font-size: 0.8rem;
  color: var(--violet-dim);
  transform: rotate(2deg);
}

/* ════════════════════════════════════════════
   TESTIMONIALS — letters pasted onto
   dark construction paper
   ════════════════════════════════════════════ */
.testimonials {
  background-color: #2D3B2A !important;  /* deep forest green construction paper */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E") !important;
  /* No ruling lines on construction paper */
}

/* Override the section rules lines for this section */
.testimonials .section-title { color: rgba(255,255,255,0.88) !important; }
.testimonials .section-rule  { background: rgba(255,255,255,0.1) !important; }
.testimonials .section-hand  { color: rgba(255,255,255,0.45) !important; }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}

/* Wrapper — carries the tape above the card, no clip-path */
.testimonial-wrap {
  position: relative;
  padding-top: 12px; /* room for tape to sit above the card */
}

/* Washi tape on the wrapper — genuinely overlaps the surface above */
.testimonial-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 52px; height: 18px;
  background: var(--tape);
  border-top: 1px solid var(--tape-edge);
  border-bottom: 1px solid var(--tape-edge);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23B85C38' opacity='0.25'/%3E%3C/svg%3E");
  z-index: 3;
}

/* Each card = a letter pasted down, slightly crooked */
.testimonial-card {
  background: var(--page);
  padding: 28px 24px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  clip-path: polygon(0 4px, 8px 0, 20px 3px, 35px 1px, 50px 4px, 65px 0, 80px 3px, 95px 1px, 100% 3px, 100% 100%, 0 100%);
  box-shadow: 3px 5px 18px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-wrap:nth-child(2)::before {
  top: 15px;
}
.testimonial-wrap:nth-child(2) .testimonial-card { transform: rotate(0.7deg) translateY(8px); }
.testimonial-wrap:nth-child(3) .testimonial-card { transform: rotate(-0.5deg) translateY(-5px); }

.testimonial-wrap:hover .testimonial-card {
  transform: rotate(0deg) translateY(-4px) !important;
  box-shadow: 6px 12px 32px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3);
}

.testimonial-wrap:nth-child(2):hover .testimonial-card {
  transform: rotate(0deg) translateY(5px) !important;
}

.quote-mark {
  font-family: var(--f-serif);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--violet);
  opacity: 0.5;
  font-style: italic;
}

.testimonial-text {
  font-family: var(--f-serif);
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.75;
  flex: 1;
}

.testimonial-attribution {
  padding-top: 14px;
  border-top: 1px dashed rgba(26,20,16,0.12);
}

.attr-name {
  font-family: var(--f-hand);
  font-size: 0.95rem;
  color: var(--violet-dim);
  font-weight: 600;
}

.attr-role {
  font-family: var(--f-mono);
  font-size: 0.578rem;
  color: var(--ink-lighter);
  margin-top: 2px;
  letter-spacing: 0.06em;
}

/* ════════════════════════════════════════════
   CONTACT — the back page / mailing label
   ════════════════════════════════════════════ */
.contact {
  background-color: var(--page) !important;
  position: relative;
}

/* Torn paper edge across the top */
.contact::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0; right: 0;
  height: 20px;
  background-color: var(--page);
  /* Irregular torn edge using SVG clip-path */
  clip-path: polygon(
    0% 100%,
    0% 60%,
    0.8% 20%, 1.6% 55%, 2.5% 15%, 3.3% 50%, 4.1% 10%,
    5.0% 45%, 5.8% 80%, 6.7% 30%, 7.5% 65%, 8.3% 15%,
    9.2% 50%, 10.0% 85%, 10.8% 25%, 11.7% 60%, 12.5% 10%,
    13.3% 45%, 14.2% 75%, 15.0% 20%, 15.8% 55%, 16.7% 5%,
    17.5% 40%, 18.3% 70%, 19.2% 15%, 20.0% 50%, 20.8% 85%,
    21.7% 25%, 22.5% 60%, 23.3% 10%, 24.2% 45%, 25.0% 80%,
    25.8% 20%, 26.7% 55%, 27.5% 5%,  28.3% 40%, 29.2% 75%,
    30.0% 15%, 30.8% 50%, 31.7% 85%, 32.5% 25%, 33.3% 60%,
    34.2% 10%, 35.0% 45%, 35.8% 80%, 36.7% 20%, 37.5% 55%,
    38.3% 5%,  39.2% 40%, 40.0% 70%, 40.8% 15%, 41.7% 50%,
    42.5% 85%, 43.3% 25%, 44.2% 60%, 45.0% 10%, 45.8% 45%,
    46.7% 75%, 47.5% 20%, 48.3% 55%, 49.2% 0%,  50.0% 35%,
    50.8% 70%, 51.7% 15%, 52.5% 50%, 53.3% 85%, 54.2% 25%,
    55.0% 60%, 55.8% 5%,  56.7% 40%, 57.5% 75%, 58.3% 20%,
    59.2% 55%, 60.0% 90%, 60.8% 30%, 61.7% 65%, 62.5% 10%,
    63.3% 45%, 64.2% 80%, 65.0% 20%, 65.8% 55%, 66.7% 5%,
    67.5% 40%, 68.3% 70%, 69.2% 15%, 70.0% 50%, 70.8% 85%,
    71.7% 25%, 72.5% 60%, 73.3% 10%, 74.2% 45%, 75.0% 80%,
    75.8% 20%, 76.7% 55%, 77.5% 0%,  78.3% 35%, 79.2% 65%,
    80.0% 15%, 80.8% 50%, 81.7% 85%, 82.5% 25%, 83.3% 60%,
    84.2% 10%, 85.0% 45%, 85.8% 75%, 86.7% 20%, 87.5% 55%,
    88.3% 5%,  89.2% 40%, 90.0% 70%, 90.8% 15%, 91.7% 50%,
    92.5% 85%, 93.3% 30%, 94.2% 65%, 95.0% 10%, 95.8% 45%,
    96.7% 80%, 97.5% 25%, 98.3% 55%, 99.2% 10%, 100% 40%,
    100% 100%
  );
  pointer-events: none;
  z-index: 1;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
}

.contact-num   { font-family: var(--f-hand) !important; color: var(--violet-dim) !important; }
.contact-title { font-family: var(--f-stamp) !important; }
.contact-rule  { background: var(--ink-faint) !important; }

.contact-lead {
  font-family: var(--f-serif);
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.8;
  margin-top: 8px;
}

/* Mailing label / postcard form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 26px;

  background-color: #FFFFFF;
  padding: 32px 36px;
  border: 1px solid var(--ink-faint);
  position: relative;

  /* Corner fold */
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

/* Corner fold triangle */
.contact-form::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent var(--page-deep) transparent transparent;
}

.contact-form::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 20px; height: 20px;
  border-bottom: 1px solid var(--ink-faint);
  border-left: 1px solid var(--ink-faint);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-family: var(--f-mono);
  font-size: 0.556rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-lighter);
}

.form-field input,
.form-field textarea {
  font-family: var(--f-hand);
  font-size: 1.05rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-faint);
  border-radius: 0;
  padding: 8px 0;
  line-height: 1.5;
  transition: border-color 0.25s;
  resize: none;
  outline: none;
  width: 100%;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  font-family: var(--f-hand);
  color: rgba(26,20,16,0.2);
}

.form-field input:focus,
.form-field textarea:focus { border-color: var(--violet); }

.form-field textarea { min-height: 90px; resize: vertical; }

.form-submit {
  font-family: var(--f-mono);
  font-size: 0.611rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--page);
  background: var(--ink);
  border: none;
  padding: 12px 26px;
  align-self: flex-start;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.form-submit:hover {
  background: var(--violet-dim);
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════
   CASE STUDY — another page in the notebook
   ════════════════════════════════════════════ */
.cs-hero {
  position: relative;
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-color: var(--page);
  background-image:
    linear-gradient(to right, transparent 72px, var(--margin-red) 72px, var(--margin-red) 73px, transparent 73px),
    repeating-linear-gradient(to bottom, transparent 0px, transparent 27px, var(--rule-blue) 27px, var(--rule-blue) 28px);
  border-bottom: 1px solid var(--ink-faint);
}

.cs-hero-image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.12;
  mix-blend-mode: screen;
}

.cs-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(245,240,227,0) 20%,
    rgb(255, 255, 255) 70%,
    rgb(255, 255, 255) 100%
  );
}

.cs-hero-content {
  position: relative;
  z-index: 2;
  padding: 48px 72px 44px 100px;
}

.cs-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-hand);
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 32px;
  transition: color 0.2s;
}

.cs-back-link:hover { color: var(--violet-dim); }

.cs-hero-title {
  font-family: var(--f-stamp);
  font-size: clamp(2rem, 5vw, 4rem);
  color: var(--ink);
  line-height: 1;
  margin-bottom: 18px;
}

.cs-hero-subtitle {
  font-family: var(--f-serif);
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  color: var(--ink);
  max-width: 540px;
  line-height: 1.65;
  margin-bottom: 32px;
}

.cs-meta-bar {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
}

.cs-meta-item { display: flex; flex-direction: column; gap: 2px; }

.cs-meta-label {
  font-family: var(--f-mono);
  font-size: 0.556rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-lighter);
}

.cs-meta-value {
  font-family: var(--f-mono);
  font-size: 0.667rem;
  color: var(--ink);
  letter-spacing: 0.04em;
}

.cs-meta-value.highlight { color: var(--violet-dim); }

.cs-meta-divider {
  width: 1px; height: 24px;
  background: var(--ink-faint);
  align-self: center;
}

.cs-layers {
  background-color: #FFFFFF !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.6  0 0 0 0 0.45  0 0 0 0 0.3  0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23a)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='6' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.28  0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23b)'/%3E%3C/svg%3E") !important;
}

.cs-layer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.cs-layer-card {
  background: var(--page);
  border: 1px solid var(--ink-faint);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}

/* No corner decoration on cs-layer-card */



.cs-layer-card:hover {
  transform: translateY(-2px) rotate(0.3deg);
  box-shadow: 2px 6px 20px rgba(26,20,16,0.1);
}

.cs-layer-image {
  width: 100%; object-fit: cover; display: block;
  border-bottom: 1px solid var(--ink-faint);
}

.cs-layer-meta { padding: 18px 20px; }

.cs-layer-num {
  font-family: var(--f-hand);
  font-size: 0.85rem;
  color: var(--violet-dim);
  margin-bottom: 3px;
}

.cs-layer-name {
  font-family: var(--f-serif);
  font-weight: 600;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 6px;
}

.cs-layer-desc {
  font-family: var(--f-serif);
  font-size: 0.83rem;
  color: var(--ink-lighter);
  line-height: 1.7;
}

.cs-notes {
  background-color: #2D3B2A !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E") !important;
}

/* Flip text colours for dark green background */
.cs-notes .section-title { color: rgba(255,255,255,0.88) !important; }
.cs-notes .section-rule  { background: rgba(255,255,255,0.1) !important; }
.cs-notes .section-hand  { color: rgba(255,255,255,0.45) !important; }
.cs-notes .cs-body       { color: rgba(245,240,227,0.75) !important; }
.cs-notes .cs-callout    { background: rgba(184,92,56,0.12); border-color: rgba(184,92,56,0.3); border-left-color: var(--violet); }
.cs-notes .cs-callout-text { color: rgba(245,240,227,0.9); }
.cs-notes .cs-callout-label { color: rgba(184,92,56,0.8); }

.cs-notes-inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
  align-items: start;
}

.cs-body {
  font-family: var(--f-serif);
  font-size: 0.88rem;
  color: var(--ink-lighter);
  line-height: 1.85;
  margin-bottom: 16px;
}

/* Design note — matches testimonial card style */
.cs-design-note-wrap {
  position: relative;
  padding-top: 12px;
}

.cs-design-note-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 52px; height: 18px;
  background: var(--tape);
  border-top: 1px solid var(--tape-edge);
  border-bottom: 1px solid var(--tape-edge);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23B85C38' opacity='0.25'/%3E%3C/svg%3E");
  z-index: 3;
}

.cs-design-note {
  background: var(--page);
  padding: 28px 24px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  clip-path: polygon(0 4px, 8px 0, 20px 3px, 35px 1px, 50px 4px, 65px 0, 80px 3px, 95px 1px, 100% 3px, 100% 100%, 0 100%);
  box-shadow: 3px 5px 18px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
  transform: rotate(-0.5deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cs-design-note-wrap:hover .cs-design-note {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 6px 12px 32px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3);
}

/* Callout = Post-it / margin annotation card */
.cs-callout {
  background: rgba(184,92,56,0.07);
  border: 1px solid rgba(184,92,56,0.2);
  border-left: 3px solid var(--violet);
  padding: 24px;
  position: relative;
  transform: rotate(-0.5deg);
}

.cs-callout::before {
  content: '✎';
  position: absolute;
  top: -10px; left: 12px;
  font-size: 1rem;
  color: var(--violet);
  opacity: 0.4;
}

.cs-callout-label {
  font-family: var(--f-mono);
  font-size: 0.467rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violet-dim);
  opacity: 0.75;
  margin-bottom: 12px;
}

.cs-callout-text {
  font-family: var(--f-hand);
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.7;
}

.cs-callout-attr {
  font-family: var(--f-mono);
  font-size: 0.467rem;
  color: var(--ink-lighter);
  letter-spacing: 0.08em;
  margin-top: 12px;
}

.cs-overview {
  background-color: var(--page) !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.cs-lead {
  font-family: var(--f-serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 18px;
}

.cs-spec-table {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-faint);
}

.cs-spec-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  border-bottom: 1px solid var(--ink-faint);
}

.cs-spec-key {
  padding: 12px 14px 12px 0;
  font-family: var(--f-mono);
  font-size: 0.467rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-lighter);
}

.cs-spec-val {
  padding: 12px 0 12px 14px;
  font-family: var(--f-serif);
  font-size: 0.875rem;
  color: var(--ink);
  border-left: 1px solid var(--ink-faint);
}

.cs-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
}

.cs-feature-item img {
  width: 100%; display: block;
  border: 1px solid var(--ink-faint);
}

/* 5th card — centred in last row via grid placement */
.cs-layer-grid .cs-layer-card:last-child {
  grid-column: 2 / 3;
}

.cs-nav {
  background-color: var(--page-deep) !important;
  padding: 0 !important;
  border-bottom: none;
}

.cs-nav-item {
  padding: 32px clamp(48px, 8vw, 100px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  transition: background 0.2s;
  text-decoration: none;
}

.cs-nav-item:hover { background: rgba(26,20,16,0.03); }

.cs-nav-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
}

.cs-nav-arrow {
  color: var(--violet-dim);
  font-size: 1.1rem;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.cs-nav-item:hover .cs-nav-arrow { transform: translateX(-4px); }

/* ════════════════════════════════════════════
   POLAROIDS — fluid, fills the right space
   ════════════════════════════════════════════ */
.hero-polaroids {
  position: absolute;
  right: -24px;
  bottom: -20px;
  width: clamp(300px, 32vw, 580px);
  height: clamp(420px, 48vw, 800px);
  pointer-events: none;
  z-index: 2;
}

.polaroid {
  position: absolute;
  background: #fff;
  padding: clamp(8px, 1vw, 14px) clamp(8px, 1vw, 14px) clamp(40px, 5vw, 64px);
  box-shadow: 3px 6px 24px rgba(26,20,16,0.22), 0 1px 4px rgba(26,20,16,0.1);
  width: clamp(220px, 23vw, 420px);
  pointer-events: all;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.polaroid:hover {
  box-shadow: 6px 12px 40px rgba(26,20,16,0.32), 0 2px 8px rgba(26,20,16,0.12);
  z-index: 10;
}

/* Back polaroid — tilted right, upper */
.polaroid--back {
  top: 0;
  right: 0;
  transform: rotate(12deg);
  z-index: 1;
}

.polaroid--back:hover { transform: rotate(13.5deg) translateY(-6px); }

/* Front polaroid — same size, tilted left, lower-left */
.polaroid--front {
  bottom: 0;
  left: 0;
  transform: rotate(-12deg);
  z-index: 2;
}

.polaroid--front:hover { transform: rotate(-13.5deg) translateY(-6px); }

/* Photo area */
.polaroid-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #B8B4AC;
  display: block;
  position: relative;
  overflow: hidden;
}

.polaroid-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}

.polaroid-caption {
  font-family: var(--f-hand);
  font-size: clamp(0.8rem, 1.2vw, 1.1rem);
  color: rgba(26,20,16,0.5);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Washi tape */
.polaroid::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: clamp(40px, 4vw, 60px);
  height: 18px;
  background: var(--tape);
  border-top: 1px solid var(--tape-edge);
  border-bottom: 1px solid var(--tape-edge);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23B85C38' opacity='0.22'/%3E%3C/svg%3E");
  z-index: 3;
}

.polaroid--back::before {
  transform: translateX(-30%) rotate(3deg);
}

.polaroid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1000px) {
  .hero-polaroids { display: none; }
  .hero-text { max-width: 100%; width: 100%; }
}
/* ── LARGE SCREENS (1400px+) ── */
@media (min-width: 1400px) {
  .about-grid        { gap: 120px; }
  .testimonial-grid  { gap: 56px; }
  .contact-inner     { gap: 120px; }
  .section-header    { margin-bottom: 80px; }
  .hero-body         { font-size: 1.1rem; line-height: 1.85; }
  .contact-lead      { font-size: 1.05rem; }
  .discipline-desc   { font-size: 0.75rem; }
  .about-right       { gap: 16px; }
  .testimonial-text  { font-size: 1rem; line-height: 1.8; }
  .hero-text         { width: min(calc(68vw - 160px), 900px); }
}

@media (max-width: 1024px) {
  .cs-layer-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-layer-grid .cs-layer-card:last-child { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; width: 100%; }


  .testimonial-grid  { grid-template-columns: 1fr; gap: 40px; }
  .about-grid        { grid-template-columns: 1fr; gap: 48px; }
  .contact-inner     { grid-template-columns: 1fr; gap: 48px; }
  .form-row          { grid-template-columns: 1fr; }
  .cs-overview       { grid-template-columns: 1fr; gap: 40px; }
  .cs-notes-inner    { grid-template-columns: 1fr; gap: 40px; }
  .cs-nav            { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   MOBILE — 768px and below
   ════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV BAR ── */
  .field-nav-bar {
    height: 56px;
    padding-left: 16px;
  }
  .main { padding-top: 56px; }

  /* Bookmark: tighter on mobile */
  .field-nav-bookmark {
    width: 64px;
    height: 70px;
    padding: 8px 12px 22px;
    transition: none; /* no hover bounce on touch */
  }
  .field-nav-bookmark:hover {height: 70px;}
  .field-nav-logo { width: 36px; height: 36px; }
  .field-nav-stamp-sub { display: none; }

  /* Hide "Contents:" label — just show the button */
  .field-nav-label { display: none; }

  /* Nav link: slightly larger tap target */
  .field-nav-link {
    font-size: 0.56rem;
    padding: 0 16px;
    border-left: none;
  }

  /* ── FULL-SCREEN OVERLAY ── */
  .field-nav-overlay {
    padding: 80px 32px 60px;
  }

  .field-nav-toc-label { margin-bottom: 24px; }

  .nav-entry-title {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }

  .field-nav-close {
    top: 20px;
    right: 24px;
  }

  /* ── SECTIONS: consistent breathing room ── */
  section,
  .hero {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: clamp(48px, 8vw, 80px);
    padding-bottom: clamp(48px, 8vw, 80px);
  }

  /* Remove margin line on mobile — too tight */
  section {
    background-image:
      repeating-linear-gradient(to bottom, transparent 0px, transparent 27px, var(--rule-blue) 27px, var(--rule-blue) 28px);
  }

  /* ── HERO ── */
  .hero { padding-top: 48px; }

  .hero-field-header {
    flex-direction: column;
    gap: 4px;
    margin-bottom: 28px;
  }

  .hero-headline {
    font-size: clamp(2.4rem, 10vw, 4rem);
  }

  .hero-body-wrap { margin-top: 24px; }

  .about-lead {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 28px;
  }

  .btn-primary { width: 100%; text-align: center; }

  /* Coffee stain — hide on mobile, too distracting */
  .hero-coffee-stain { display: none; }

  /* ── SECTION HEADERS ── */
  .section-header {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
  }

  .section-hand { display: none; }

  .section-title { font-size: clamp(1.4rem, 6vw, 2rem); }

  /* ── ABOUT ── */
  .about-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Cards: reduce tilt on small screens */
  .discipline-item:nth-child(1) { transform: rotate(-0.4deg) translateX(-4px); }
  .discipline-item:nth-child(2) { transform: rotate(0.3deg)  translateX(6px); }
  .discipline-item:nth-child(3) { transform: rotate(-0.5deg) translateX(-3px); }
  .discipline-item:nth-child(4) { transform: rotate(0.4deg)  translateX(5px); }

  /* ── TESTIMONIALS ── */
  .testimonial-grid { grid-template-columns: 1fr; gap: 36px; }

  /* Flatten rotation on small screens */
  .testimonial-wrap:nth-child(2) .testimonial-card { transform: rotate(0.3deg) translateY(4px); }
  .testimonial-wrap:nth-child(3) .testimonial-card { transform: rotate(-0.2deg) translateY(-2px); }

  /* ── CONTACT ── */
  .contact-inner { grid-template-columns: 1fr; gap: 36px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 24px 20px; }
  .form-submit { width: 100%; text-align: center; }

  /* ── TICKER ── */
  .hero { padding-bottom: 0 !important; }
  .logo-ticker-wrap { padding: 18px 0 22px; margin-left: -24px; margin-right: -24px; margin-bottom: 0; }
  .ticker-label { padding-left: 24px; }
  .ticker-item { height: 100%; }
  .ticker-item img { max-width: 100px; }
  .ticker-inner { gap: 28px; }

  /* ── CASE STUDY ── */
  .cs-hero-content { padding: 40px 24px 36px; }
  .cs-nav-item { padding: 24px; }
  .cs-layer-grid { grid-template-columns: 1fr; }
  .cs-layer-grid .cs-layer-card:last-child { grid-column: auto; max-width: 100%; margin: 0; }
  .cs-nav-item { padding: 24px 28px; }
  .margin-notes { display: none; }
  .cs-meta-divider { display: none; }
}

/* ── EXTRA SMALL (iPhone SE, etc.) ── */
@media (max-width: 390px) {
  .hero-headline { font-size: 2.2rem; }
  .field-nav-link { font-size: 0.5rem; padding: 0 12px; }
}
/* ════════════════════════════════════════════
   LIGHTBOX — dimmed overlay + enlarged image
   ════════════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(26,20,16,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  transform: scale(0.96);
  transition: transform 0.3s ease;
}

.lightbox.open .lightbox-img {
  transform: scale(1);
}

.lightbox-close {
  position: fixed;
  top: 24px;
  right: 28px;
  background: rgba(245,240,227,0.1);
  border: 1px solid rgba(245,240,227,0.2);
  color: rgba(245,240,227,0.8);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.lightbox-close:hover {
  background: rgba(245,240,227,0.2);
  color: rgba(245,240,227,1);
}

/* Cards — show pointer so they feel clickable */
.lightbox-trigger {
  cursor: zoom-in;
}

/* ════════════════════════════════════════════
   SPLINE 3D VIEWER SECTION
   ════════════════════════════════════════════ */
.cs-spline {
  padding: 0 !important;
  background: var(--page-deep) !important;
  border-bottom: 1px solid var(--ink-faint);
  background-image: none !important;
}

.cs-spline spline-viewer {
  width: 100%;
  height: 600px;
  display: block;
}

@media (max-width: 768px) {
  .cs-spline spline-viewer { height: 360px; }
}

/* 2×2 grid override — used on pages with exactly 4 cards */
.cs-layer-grid--2col {
  grid-template-columns: repeat(2, 1fr) !important;
}

.cs-layer-grid--2col .cs-layer-card:last-child {
  grid-column: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .cs-layer-grid--2col {
    grid-template-columns: 1fr !important;
  }
}