/* cathrynbeesonlynch.com — built from the Claude Design export (Oct 2026). */
:root { --pad: 40px; }
@media (max-width: 600px) { :root { --pad: 24px; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-wrap: pretty;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: .6; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: var(--fg); color: var(--bg); }

/* Page palettes from the design system */
.p-home     { --bg: #000000; --fg: #FFFFFF; }
.p-work     { --bg: #0B4F6C; --fg: #FFA98F; }
.p-approach { --bg: #3B2A20; --fg: #C8E6A0; }
.p-about    { --bg: #3A1F3D; --fg: #FF8C1A; }
.p-contact  { --bg: #3D5200; --fg: #FFB3D9; }

.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}
.p-home .page { gap: 32px; }

/* Top row: monogram + intro */
.top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 24px 32px; padding: 28px var(--pad) 0;
}
.mark {
  font-weight: 700; font-size: 22px; line-height: .95; letter-spacing: -.01em;
  display: flex; flex-direction: column;
}
.intro {
  font-weight: 400; font-size: clamp(18px, 1.75vw, 28px); line-height: 1.22; letter-spacing: -.01em;
  flex: 0 1 34ch; min-width: min(100%, 260px); margin: 0;
}

/* Shared body text sizes */
.body { margin: 0; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.4; max-width: 34ch; }
.meta { display: block; margin-top: 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.note { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; opacity: .7; }

/* Columns (Approach, About, Contact) */
.content { padding: 0 var(--pad); max-width: 1400px; }
.lead-line { margin: 0 0 24px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; }
.col { border-top: 1px solid currentColor; padding-top: 16px; }
.col h2 {
  margin: 0 0 10px; font-weight: 700; font-size: clamp(20px, 2vw, 30px);
  letter-spacing: -.01em; text-transform: uppercase;
}
.col .body + .meta + .body { margin-top: 20px; }

/* Work rows */
.rows { border-bottom: 1px solid currentColor; }
.row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 160px;
  gap: 40px; align-items: baseline; padding: 18px 0; border-top: 1px solid currentColor;
}
.row h2 { margin: 0; font-weight: 700; font-size: clamp(20px, 2.2vw, 34px); letter-spacing: -.01em; line-height: 1.05; }
.row .body { max-width: 40ch; }
.row .meta { margin: 0; white-space: nowrap; }
@media (max-width: 760px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* Contact */
.label { margin: 0 0 10px; font-weight: 400; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.big-link {
  display: block; font-weight: 700; font-size: clamp(20px, 2.2vw, 34px);
  letter-spacing: -.01em; line-height: 1.1; overflow-wrap: anywhere;
}
.big-link + .body { margin-top: 10px; max-width: 30ch; }

/* The big word: fills the content width. --k is the word's width in ems. */
.foot { container-type: inline-size; }
.word {
  margin: 0; padding: 0 var(--pad);
  font-weight: 700; line-height: .86; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
  font-size: max(48px, min(calc((100cqw - 2 * var(--pad)) / var(--k)), var(--cap, 60svh)));
}
.word span { display: block; }
.p-home .word { line-height: .8; letter-spacing: normal; }

/* Nav */
nav {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 8px var(--pad) 28px;
  font-weight: 400; font-size: clamp(16px, 1.9vw, 30px); letter-spacing: .01em; text-transform: uppercase;
}
nav [aria-current="page"] { text-decoration: underline 1px; text-underline-offset: 8px; }
@media (max-width: 600px) {
  nav { font-size: 14px; gap: 12px; }
}