:root {
    --bg: #f3ece1; --bg-2: #ebe2d2;
    --ink: #1a1614; --ink-soft: #5b4f47;
    --accent: #7a5fa3; --accent-2: #c45b3d;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--bg); color: var(--ink); }
  body {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px; line-height: 1.6;
    min-height: 100vh; overflow-x: hidden;
    background-image:
      radial-gradient(circle at 15% 10%, rgba(122, 95, 163, 0.10), transparent 45%),
      radial-gradient(circle at 85% 75%, rgba(196, 91, 61, 0.07), transparent 50%);
  }
  body::before {
    content: ""; position: fixed; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    pointer-events: none; z-index: 1;
  }
  .page {
    position: relative; z-index: 2;
    max-width: 1280px; margin: 0 auto;
    padding: 32px 48px; min-height: 100vh;
    display: flex; flex-direction: column;
  }
  header {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  header .brand { color: var(--ink); font-weight: 500; }
  header nav { display: flex; gap: 28px; }
  header nav a { color: var(--ink-soft); text-decoration: none; transition: color 0.2s; }
  header nav a:hover, header nav a.active { color: var(--accent); }

  main { flex: 1; padding: 80px 0 40px; }
  .eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 24px;
  }
  h1 {
    font-family: 'Fraunces', serif; font-weight: 350;
    font-size: clamp(48px, 9vw, 130px);
    line-height: 0.95; letter-spacing: -0.03em; color: var(--ink);
  }
  h1 em { font-style: italic; color: var(--accent); }
  .lede {
    font-family: 'Fraunces', serif; font-weight: 350;
    font-size: clamp(18px, 2vw, 24px); line-height: 1.4;
    color: var(--ink-soft); max-width: 640px; margin-top: 24px;
  }

  .work-list {
    list-style: none; padding: 0; margin-top: 80px;
    border-top: 1px solid rgba(26, 22, 20, 0.15);
  }
  .work-list li {
    display: grid;
    grid-template-columns: 60px 1fr 200px;
    gap: 32px;
    padding: 36px 0;
    border-bottom: 1px solid rgba(26, 22, 20, 0.12);
    align-items: baseline;
    transition: background 0.3s;
  }
  .work-list li:hover { background: rgba(122, 95, 163, 0.04); }
  .work-list .num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px; color: var(--ink-soft);
    letter-spacing: 0.04em;
  }
  .work-list .name {
    font-family: 'Fraunces', serif; font-weight: 400;
    font-style: italic;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1; color: var(--ink);
  }
  .work-list .desc {
    font-size: 15px; color: var(--ink-soft);
    margin-top: 10px; max-width: 540px;
  }
  .work-list .meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-soft);
    text-align: right;
  }

  footer {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-soft); margin-top: 64px;
  }
  footer a { color: var(--ink-soft); text-decoration: none; }
  footer a:hover { color: var(--accent); }

  @media (max-width: 760px) {
    .page { padding: 24px; }
    header nav { gap: 16px; }
    .work-list li { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
    .work-list .meta { text-align: left; }
  }

  main > * { opacity: 0; transform: translateY(16px); animation: in 0.9s cubic-bezier(.2,.7,.2,1) forwards; }
  .eyebrow { animation-delay: 0.05s; }
  h1 { animation-delay: 0.15s; }
  .lede { animation-delay: 0.3s; }
  .work-list { animation-delay: 0.45s; }
  @keyframes in { to { opacity: 1; transform: none; } }

body {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
  box-sizing: border-box;
}
/* Drop any inline grid-row placements that leave empty rows behind —
   sections always auto-flow vertically, only their column placement
   is user-controlled. */
body > * {
  min-width: 0; min-height: 0;
  grid-column: 1 / -1;
  grid-row: auto !important;
  max-width: 100%;
}
/* Media never overflows its container on a narrow viewport. */
body img, body video, body iframe, body svg {
  max-width: 100%;
  height: auto;
}
/* Mirrors the editor preview's mobile chrome (page_editor_controller.js
   GRID_CSS @media block) so what the owner sees in the iframe is what
   phone visitors see. The corpus's per-section CSS rarely ships its own
   mobile rules; these blanket overrides — !important so they win over
   the section-scoped class declarations — keep typography readable,
   padding sane, and inner grids / flex rows collapsed to a single
   column under 768px. */
@media (max-width: 768px) {
  body {
    grid-template-columns: 1fr !important;
  }
  body > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  body > section {
    padding-left:  clamp(14px, 4vw, 28px) !important;
    padding-right: clamp(14px, 4vw, 28px) !important;
    padding-top:    clamp(28px, 7vw, 56px) !important;
    padding-bottom: clamp(28px, 7vw, 56px) !important;
  }
  body > section h1 {
    font-size: clamp(26px, 8vw, 40px) !important;
    line-height: 1.15 !important;
    word-wrap: break-word;
  }
  body > section h2 {
    font-size: clamp(22px, 6.5vw, 32px) !important;
    line-height: 1.2 !important;
  }
  body > section h3 {
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.25 !important;
  }
  body > section[style*="grid"],
  body > section {
    grid-template-columns: 1fr !important;
  }
  body > section [style*="display: flex"],
  body > section [style*="display:flex"] {
    flex-wrap: wrap !important;
  }
}