/* bethsullivan.com */

/* Layout: no boxes. Content sits directly on a deep oxblood ground with wide margins and hairline rules;
   the clashing colors live only in the background layer, kept dark enough that all text stays AA. Single dark theme by design. */
:root {
  --ground: #33130F;       /* deep red-brown */
  --ground-2: #3E1913;
  --ink: #F2E7DA;          /* 13:1 on ground */
  --ink-soft: #CDB9A9;     /* 8.8:1 */
  --apricot: #EBA98B;      /* text accent, 7.6:1 */
  --rule: #6A3A30;
  --field: #9C857A;        /* form borders, 4.7:1 non-text */
  /* background-only clash colors */
  --clash-pink: #B8457A;
  --clash-olive: #6E7A2A;
  --clash-teal: #2C6E6E;

  --f-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Newsreader", Georgia, "Times New Roman", serif;
  --f-ui: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 400 1.2rem/1.6 var(--f-body);
  font-optical-sizing: auto;
  color: var(--ink);
  background-color: var(--ground);
  background-attachment: fixed;
  padding-inline: clamp(16px, 5vw, 72px);
  padding-block: 0 6rem;
  background-image:
    radial-gradient(60vmax 45vmax at 92% 8%, color-mix(in srgb, var(--clash-pink) 38%, transparent), transparent 70%),
    radial-gradient(55vmax 40vmax at 4% 96%, color-mix(in srgb, var(--clash-olive) 42%, transparent), transparent 70%),
    radial-gradient(30vmax 30vmax at 10% 30%, color-mix(in srgb, var(--clash-teal) 30%, transparent), transparent 70%);
}

.wrap { max-width: 1180px; margin: 0 auto; }

a { color: var(--apricot); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--apricot); outline-offset: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ground); color: var(--ink); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 16px; }

h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; line-height: 1.04; font-weight: 600; }
h2 { font-size: clamp(2rem, 4vw, 3rem); font-variation-settings: "wdth" 85; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; font-weight: 600; }
.eyebrow { font: 600 .78rem/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--apricot); }
p { margin: 0; max-width: 62ch; }

/* header */
header.top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; padding-block: 32px; }
.mark { font: 700 1.25rem/1 var(--f-display); text-decoration: none; color: var(--ink); letter-spacing: .01em; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; }
nav a { color: var(--ink-soft); text-decoration: none; font: 500 .95rem var(--f-ui); }
nav a:hover { color: var(--ink); }
/* hamburger below the width where the nav would wrap */
.menu-toggle { display: none; }
@media (max-width: 640px) {
  header.top { position: relative; flex-wrap: nowrap; align-items: center; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -11px; background: none; border: 0; color: var(--ink); padding: 0; cursor: pointer; }
  .bars, .bars::before, .bars::after { display: block; width: 22px; height: 2px; background: currentColor; }
  .bars { position: relative; }
  .bars::before, .bars::after { content: ""; position: absolute; left: 0; }
  .bars::before { top: -7px; } .bars::after { top: 7px; }
  nav.open .bars { background: transparent; }
  nav.open .bars::before { top: 0; transform: rotate(45deg); }
  nav.open .bars::after { top: 0; transform: rotate(-45deg); }
  nav ul { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding-block: 6px 12px;
    background: var(--ground); box-shadow: 0 0 0 100vmax var(--ground), 0 1px 0 100vmax var(--rule); clip-path: inset(0 -100vmax -1px -100vmax); }
  nav.open ul { display: flex; }
  nav ul a { display: block; padding-block: 12px; font-size: 1.1rem; color: var(--ink); border-top: 1px solid var(--rule); }
  nav ul li:first-child a { border-top: 0; }
}

section { padding-block: clamp(72px, 10vw, 140px); border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; padding-top: clamp(40px, 7vw, 96px); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); /* with photo: minmax(0, 1fr) minmax(0, 300px) */ gap: clamp(28px, 4vw, 56px); align-items: start; }
.portrait { order: 2; aspect-ratio: 4 / 5; max-width: 100%; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--rule); display: grid; place-items: center; text-align: center; }
.portrait small { font: 500 .85rem/1.4 var(--f-ui); color: var(--ink-soft); }
.hero .copy { display: grid; gap: 28px; min-width: 0; max-width: 66%; }
@media (max-width: 900px) { .hero .copy { max-width: none; } }
.hero h1 { font-size: clamp(2.75rem, 6.5vw, 5.25rem); font-weight: 700; font-variation-settings: "wdth" 80, "opsz" 96; letter-spacing: -.02em; }
.lede { font-size: clamp(1.35rem, 2.2vw, 1.6rem); line-height: 1.4; color: var(--ink); text-wrap: balance; }
.bio { color: var(--ink-soft); max-width: none; }

/* section heads */
.head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(32px, 6vw, 96px); margin-bottom: clamp(40px, 6vw, 72px); align-items: end; }
.head > div { display: grid; gap: 14px; }
.head p { color: var(--ink-soft); }
#offer .head { grid-template-columns: minmax(0, 1fr); }
#offer h2 { max-width: 38ch; }

/* offer */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 96px); }
.offer { padding-block: 28px 32px; display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--rule); min-width: 0; }
.offer p { color: var(--ink-soft); font-size: 1.1rem; }
.offer .tools { font: 500 .82rem var(--f-ui); color: var(--apricot); letter-spacing: .02em; }

/* work */
.grid9 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px); }
.shot { display: grid; gap: 14px; align-content: start; min-width: 0; }
.screen { aspect-ratio: 16 / 10; max-width: 100%; display: grid; place-items: center; border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  font: 500 .75rem var(--f-ui); color: var(--ink-soft); letter-spacing: .1em; text-transform: uppercase; }
a.screen { overflow: hidden; }
.screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
@media (prefers-reduced-motion: no-preference) { .screen img { transition: transform .4s ease; } a.screen:hover img { transform: scale(1.03); } }
.cap a.url { text-decoration: none; justify-self: start; }
.cap a.url:hover { text-decoration: underline; }
.cap { display: grid; gap: 4px; }
.cap h3 { font-size: 1.1rem; }
.cap p { font-size: 1rem; color: var(--ink-soft); }
.cap .url { font: 500 .8rem var(--f-ui); color: var(--apricot); letter-spacing: .02em; overflow-wrap: anywhere; }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.contact .side { display: grid; gap: 18px; align-content: start; }
.contact .side p { color: var(--ink-soft); }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.email-row code { font: 500 1rem var(--f-ui); color: var(--ink); user-select: all; overflow-wrap: anywhere; }
form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
label { font: 600 .85rem var(--f-ui); letter-spacing: .02em; }
label .opt { font-weight: 400; color: var(--ink-soft); }
input, select, textarea { font: inherit; font-size: 1.1rem; color: var(--ink); background: color-mix(in srgb, var(--ground) 70%, transparent); border: 1px solid var(--field); border-radius: 2px; padding: 12px 14px; width: 100%; }
select option { background: var(--ground); color: var(--ink); }
textarea { min-height: 160px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--apricot); outline-offset: 2px; }
[aria-invalid="true"] { border-color: var(--apricot); }
.btn { font: 600 1rem var(--f-ui); border: 0; border-radius: 2px; padding: 14px 28px; background: var(--ink); color: var(--ground); cursor: pointer; justify-self: start; }
.btn:hover { background: var(--apricot); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--field); padding: 7px 14px; font-size: .85rem; }
.btn.ghost:hover { border-color: var(--ink); }
.status { grid-column: 1 / -1; font: 500 .95rem var(--f-ui); color: var(--apricot); min-height: 1.5em; }

/* why */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); }
.why > div { padding-block: 26px 30px; display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--rule); min-width: 0; }
.why p { color: var(--ink-soft); font-size: 1.1rem; }
@media (max-width: 900px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .why { grid-template-columns: minmax(0, 1fr); } }
/* client list */
.clients { margin-top: clamp(72px, 9vw, 120px); padding-top: 32px; border-top: 1px solid var(--rule); display: grid; gap: 28px; }
.clients .clients-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.2rem); letter-spacing: -0.005em; line-height: 1.1; }
.client-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px clamp(28px, 4vw, 56px); }
.client-cols h4 { margin: 0 0 16px; }
.client-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.client-cols li { font: 500 1rem/1.35 var(--f-ui); color: var(--ink); }
.client-cols li a { color: var(--ink); text-decoration: none; }
.client-cols li a:hover { color: var(--apricot); text-decoration: underline; }
.client-cols li span { display: block; font-weight: 400; font-size: .88rem; color: var(--ink-soft); }
@media (max-width: 760px) { .client-cols { grid-template-columns: minmax(0, 1fr); } }
/* testimonials */
.quotes { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); }
.quotes .side { display: grid; gap: clamp(40px, 5vw, 56px); align-content: start; }
blockquote { margin: 0; display: grid; gap: 18px; }
blockquote p { margin: 0; max-width: 46ch; }
.quote-lg p { font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.42; text-wrap: pretty; }
.quote-sm p { font-size: 1.25rem; line-height: 1.5; text-wrap: pretty; }
blockquote .by { border: 0; padding: 0; font: 500 .9rem/1.45 var(--f-ui); color: var(--ink-soft); }
blockquote .by strong { display: block; color: var(--apricot); font-weight: 600; letter-spacing: .02em; }
#palette-next { background: none; border: 0; padding: 0; font: inherit; color: var(--apricot); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#palette-next:hover { text-decoration-thickness: 2px; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--rule); padding-block: 28px; font: 400 .9rem var(--f-ui); color: var(--ink-soft); }


@media (max-width: 900px) {
  .hero, .head, .contact, .quotes { grid-template-columns: minmax(0, 1fr); }
  .portrait { max-width: 220px; }
  .grid9 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  body { font-size: 1.1rem; }
  .offers, .grid9, form { grid-template-columns: minmax(0, 1fr); }
}

/* Direction: Night Swim. Deep navy ground, one bright green accent, a high-contrast editorial serif for display,
   a bookish serif for reading, a crisp grotesk for labels. Washes of teal, green, and violet stay in the background. */
:root {
  /* Tobacco: warm dark brown ground, saffron accent; rust, olive, and a cool teal note in the background only */
  --ground: #241A13; --ground-2: #2E2219;
  --ink: #F3EADF; --ink-soft: #CDBFAE;
  --apricot: #F0B23C;      /* accent: saffron, 9:1 */
  --rule: #4A3829; --field: #9A8673;
  --clash-pink: #8A3B1C; --clash-olive: #5C6326; --clash-teal: #1F4E4F;
  color-scheme: dark;
  --f-display: "Gloock", "Didot", Georgia, serif;
  --f-body: "Literata", Georgia, "Times New Roman", serif;
  --f-ui: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { font-weight: 350; font-size: 1.15rem; line-height: 1.65; font-optical-sizing: auto; }
h1, h2 { font-weight: 400; font-variation-settings: normal; letter-spacing: -0.005em; line-height: 1.08; }
.hero h1 { font-weight: 400; font-variation-settings: normal; letter-spacing: -0.015em; font-size: clamp(2.8rem, 6.4vw, 5.4rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
h3, .cap h3 { font-family: var(--f-ui); font-weight: 600; font-size: 1.12rem; letter-spacing: 0; line-height: 1.25; }
.lede { font-family: var(--f-ui); font-weight: 400; font-size: clamp(1.3rem, 2.1vw, 1.55rem); line-height: 1.38; letter-spacing: -0.005em; }
.mark { font: 400 1.4rem/1 var(--f-display); letter-spacing: 0; }
.eyebrow { font-weight: 600; letter-spacing: .18em; color: var(--ink-soft); }
blockquote p { font-weight: 400; }
.quote-lg p { font-family: var(--f-display); font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.32; }
.btn:hover { background: var(--apricot); color: var(--ground); }
/* work intro: one line under the heading, in the grotesk */
#work .head { grid-template-columns: minmax(0, 1fr); }
#work .head p { font-family: var(--f-ui); font-weight: 400; font-size: 1.05rem; max-width: none; }
/* why heading: half the content width on desktop */
#why .head { grid-template-columns: minmax(0, 1fr); }
#why h2 { max-width: 50%; }
@media (max-width: 900px) { #why h2 { max-width: none; } }
/* sticky header */
html { scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; padding-block: 18px; align-items: center; }
/* full-bleed bar drawn on a pseudo-element, so the mobile menu can drop below the header unclipped */
header.top::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--ground) 94%, transparent), 0 1px 0 100vmax var(--rule);
  clip-path: inset(0 -100vmax -1px -100vmax); }
header.top.scrolled::before, header.top:has(nav.open)::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { header.top::before { transition: opacity .25s ease; } }
/* name as a '70s book title: bigger, set tight */
.mark { font: 400 clamp(1.53rem, 2.34vw, 1.98rem)/0.95 var(--f-display); letter-spacing: -0.045em; word-spacing: -0.02em; color: var(--apricot); }
body { background-image:
    radial-gradient(60vmax 45vmax at 92% 8%, color-mix(in srgb, var(--clash-pink) 45%, transparent), transparent 70%),
    radial-gradient(55vmax 40vmax at 4% 96%, color-mix(in srgb, var(--clash-olive) 45%, transparent), transparent 70%),
    radial-gradient(30vmax 30vmax at 10% 30%, color-mix(in srgb, var(--clash-teal) 35%, transparent), transparent 70%); }

/* Rotating palettes. Tobacco is the default (no JS, crawlers). Each set redefines only color tokens. */
:root[data-palette="nightswim"] {
  --ground: #0C1733; --ground-2: #111E42; --ink: #EDF1F7; --ink-soft: #B4C0D6;
  --apricot: #B4E35C; --rule: #263764; --field: #7E8CAD;
  --clash-pink: #1F6B8A; --clash-olive: #5A7A26; --clash-teal: #4A3B8F;
}
:root[data-palette="forest"] {
  --ground: #0F2A22; --ground-2: #143329; --ink: #EEF0E6; --ink-soft: #B9C6B9;
  --apricot: #FF9B80; --rule: #2A4A3E; --field: #7E9A8C;
  --clash-pink: #8A3B5C; --clash-olive: #5A5A1C; --clash-teal: #1F4E6E;
}
:root[data-palette="plum"] {
  --ground: #2A1530; --ground-2: #331A3A; --ink: #F3EAF0; --ink-soft: #CDBACB;
  --apricot: #FF8FB0; --rule: #4C2E54; --field: #9C86A0;
  --clash-pink: #8A2E4A; --clash-olive: #3E6B5A; --clash-teal: #B5652A;
}

html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.cf-turnstile { min-height: 65px; }