/*
Theme Name: Visual Culture
Theme URI: https://visualculture.co
Author: Visual Culture
Author URI: https://visualculture.co
Description: The Visual Culture studio theme — a single, editorial-led home page built around the studio's visual identity. Strategy, design, build, and media, held in one practice.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: visualculture
*/

/* ---------- Tokens ---------- */
:root {
  --ink:           #0B0E24;
  --ink-2:         #11152F;
  --ink-3:         #1A1F3D;
  --paper:         #F2EEE6;
  --paper-2:       #ECE7DC;
  --bone:          #EFEEEB;
  --fog:           #E4E5EA;
  --rule:          #C9C7C0;
  --indigo:        #5B5FE0;
  --indigo-soft:   #8A8DEC;
  --coral:         #D97757;
  --muted-ink:     #4A5066;
  --muted-paper:   rgba(242,238,230,0.62);
  --muted-paper-2: rgba(242,238,230,0.42);

  --serif-headline: "IvyPresto Headline", "ivypresto-headline", serif;
  --serif-text:     "IvyPresto Text", "ivypresto-text", serif;
  --serif:          var(--serif-headline);
  --sans:           "Tenon", tenon, sans-serif;

  /* Type scale: fixed utility sizes and fluid editorial roles. */
  --font-size-10:   10px;
  --font-size-11:   11px;
  --font-size-12:   12px;
  --font-size-12-5: 12.5px;
  --font-size-13:   13px;
  --font-size-14:   14px;
  --font-size-14-5: 14.5px;
  --font-size-15:   15px;
  --font-size-16:   16px;
  --font-size-17:   17px;
  --font-size-18:   18px;
  --font-size-96:   96px;

  --font-size-body-fluid:      clamp(15px, 1.1vw, 17px);
  --font-size-body-lg:         clamp(16px, 1.15vw, 19px);
  --font-size-prose:           clamp(17px, 1.1vw, 19px);
  --font-size-title-sm-compact: clamp(18px, 1.45vw, 22px);
  --font-size-title-sm:        clamp(18px, 1.5vw, 22px);
  --font-size-subheading-sm:   clamp(20px, 1.6vw, 26px);
  --font-size-subheading:      clamp(21px, 1.8vw, 26px);
  --font-size-heading-sm:      clamp(22px, 1.8vw, 28px);
  --font-size-heading-sm-wide: clamp(22px, 1.9vw, 30px);
  --font-size-heading-md:      clamp(24px, 2.1vw, 32px);
  --font-size-heading-lg:      clamp(28px, 2.6vw, 38px);
  --font-size-quote:           clamp(28px, 3.4vw, 50px);
  --font-size-heading-xl-alt:  clamp(36px, 4vw, 56px);
  --font-size-heading-xl:      clamp(38px, 3.6vw, 56px);
  --font-size-display-md:      clamp(40px, 5vw, 68px);
  --font-size-display-lg:      clamp(64px, 8vw, 120px);
  --font-size-display-xl:      clamp(64px, 12vw, 140px);

  --max:   1320px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--font-size-16);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Type */
.display, h1, h2, h3 { font-family: var(--serif-headline); font-weight: 300; letter-spacing: -0.00em; }
h1 { font-size: var(--font-size-display-lg); line-height: 0.9; margin: 0; }
.hero h1 { font-family: var(--serif-headline); font-weight: 300; font-variant-ligatures: common-ligatures discretionary-ligatures; font-feature-settings: "liga" 1, "clig" 1, "dlig" 1; }
.hero h1 .italic { font-family: var(--serif-headline); font-weight: 100; font-style: italic; font-variant-ligatures: common-ligatures discretionary-ligatures; font-feature-settings: "liga" 1, "clig" 1, "dlig" 1; }
h2 { font-size: var(--font-size-heading-xl); line-height: 1.05; margin: 0; }
h3 { font-size: var(--font-size-heading-sm); line-height: 1.15; margin: 0; }
/* IvyPresto's italic cut reads visually heavier than its roman at the same
   nominal weight — the family has no 300 between 100 and 300, so Thin (100)
   italic is the closest available face to sit level with the Light (300)
   roman it's paired with. */
.italic { font-style: italic; font-weight: 100; color: var(--indigo-soft); }
.eyebrow {
  font-family: var(--sans);
  font-size: var(--font-size-12); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1.5px;
  background: var(--coral); display: inline-block;
}
.eyebrow.on-dark { color: var(--paper); }
.hero .eyebrow {
  align-items: flex-start;
}
.hero .eyebrow::before {
  flex: 0 0 28px;
  margin-top: 0.72em;
}

/* Header — transparent over dark hero, frosted on scroll, flips color on light sections */
header.site {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--paper);
  transition: background-color .35s ease, border-color .35s ease, color .25s ease;
  border-bottom: 1px solid transparent;
}
header.site.scrolled {
  background: rgba(11, 14, 36, 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: rgba(242,238,230,0.08);
}
header.site.on-light {
  background: rgba(239, 238, 235, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  color: var(--ink);
  border-bottom-color: rgba(11,14,36,0.08);
}
/* Clear the logged-in admin bar — it's fixed at the same top:0, so our
   own fixed header has to start below it instead of behind it. WP core
   already pushes in-flow content (the hero, etc.) down to match via its
   `html { margin-top }` rule, so this keeps the two in sync. */
body.admin-bar header.site { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar header.site { top: 46px; }
}
.nav {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px; height: 72px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-weight: 500; font-size: var(--font-size-14);
  letter-spacing: normal; text-transform: capitalize;
}

.disciplines {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 14px;
  font-size: var(--font-size-12); letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 500;
}
.disciplines .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .5;
}
.disciplines a { transition: opacity .2s ease; opacity: .82; }
.disciplines a:hover { opacity: 1; }
.nav-cta {
  grid-column: 3;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--font-size-13); letter-spacing: 0.04em;
  color: var(--indigo-soft); font-weight: 500;
}
header.site.on-light .nav-cta { color: var(--indigo); }
.nav-cta::after { content: "→"; font-family: var(--serif); transition: transform .25s ease; }
.nav-cta:hover::after { transform: translateX(4px); }
@media (max-width: 880px) { .disciplines { display: none; } }

/* Hero */
section.hero {
  background: var(--ink); color: var(--paper);
  position: relative; overflow: hidden;
  padding-top: clamp(140px, 16vh, 180px);
  padding-bottom: clamp(80px, 10vh, 140px);
  min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between;
}
.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero-inner.wrap { width: 100%; }
.hero h1 { color: var(--paper); margin-top: 36px; max-width: 18ch; }
.hero h1 .italic { color: var(--indigo-soft); font-style: italic; }
.hero-lede {
  margin-top: 56px; max-width: 46ch;
  font-size: var(--font-size-body-fluid); line-height: 1.6;
  color: var(--muted-paper); font-weight: 400;
}
.hero-foot {
  position: relative; z-index: 2; margin-top: 80px;
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%;
}
@media (max-width: 880px) {
  .hero-foot { justify-content: center; }
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 20px;
  background: var(--indigo); color: white;
  padding: 24px 44px; font-size: var(--font-size-17); font-weight: 500; letter-spacing: 0.02em;
  transition: transform .2s ease, background-color .2s ease;
}
.btn-primary:hover { background: #4F53D8; transform: translateY(-1px); }
.btn-primary .arrow { font-family: var(--serif); }

/* Studio note */
section.studio {
  background: var(--bone); color: var(--ink);
  padding: clamp(96px, 14vh, 160px) 0;
  border-bottom: 1px solid var(--rule);
}
.studio-grid {
  display: grid; grid-template-columns: 1.1fr 2fr;
  gap: clamp(24px, 4vw, 80px); align-items: start;
}
@media (max-width: 880px) {
  .studio-grid { grid-template-columns: 1fr; }
}
.studio h2 { max-width: 22ch; }
.studio h2 .italic { color: var(--indigo); }
.studio-body { margin-top: 0; transform: translateY(60px); }
@media (max-width: 880px) { .studio-body { transform: none; } }
.studio-body p {
  font-size: var(--font-size-body-lg); line-height: 1.55;
  margin: 0 0 1.2em 0; max-width: 56ch; color: #2A2F45;
}
/* Capabilities */
section.caps {
  background: var(--bone); color: var(--ink);
  padding: clamp(80px, 12vh, 140px) 0;
}
.caps-head {
  display: grid; grid-template-columns: 1.1fr 2fr;
  gap: clamp(24px, 4vw, 80px); align-items: start;
  margin-bottom: clamp(48px, 7vh, 80px);
}
@media (max-width: 880px) { .caps-head { grid-template-columns: 1fr; } }
.caps-head h2 { max-width: 22ch; }
.caps-head h2 .italic { color: var(--indigo); }
.caps-head .note {
  font-size: var(--font-size-body-lg); line-height: 1.55;
  color: #2A2F45; max-width: 56ch; margin: 0;
  transform: translateY(60px);
}
@media (max-width: 880px) { .caps-head .note { transform: none; } }
.cap-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1080px) { .cap-grid { grid-template-columns: 1fr; } }
@media (max-width: 540px)  { .cap-grid { grid-template-columns: 1fr; } }
.cap {
  padding: 36px 28px; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 320px; position: relative;
}
.cap-num {
  font-family: var(--sans); font-size: var(--font-size-12);
  letter-spacing: 0.22em; color: var(--muted-ink); font-weight: 500;
}
.cap h3 { font-family: var(--serif); margin-top: 18px; font-size: var(--font-size-heading-md); }
.cap-list {
  list-style: none; margin: 26px 0 0; padding: 0;
  font-size: var(--font-size-13); color: var(--muted-ink); line-height: 1.9;
}
.cap-list li {
  border-top: 1px solid var(--rule); padding: 8px 0 8px 18px; position: relative;
}
.cap-list li::before {
  content: "—"; position: absolute; left: 0; top: 8px; color: var(--coral);
}

/* Custom solutions */
section.custom {
  background: var(--bone); color: var(--ink);
  padding: clamp(96px, 14vh, 160px) 0;
  position: relative; overflow: hidden;
}
.custom-inner { position: relative; z-index: 2; }
.custom-head {
  display: grid; grid-template-columns: 1.1fr 2fr;
  gap: clamp(24px, 4vw, 80px); align-items: start;
}
@media (max-width: 880px) { .custom-head { grid-template-columns: 1fr; } }
.custom-head h2 { color: var(--ink); max-width: 22ch; }
.custom-head h2 .italic { color: var(--indigo); }
.custom-head .note {
  font-size: var(--font-size-body-lg); line-height: 1.55;
  color: #2A2F45; max-width: 56ch; margin: 0;
  transform: translateY(60px);
}
@media (max-width: 880px) { .custom-head .note { transform: none; } }
.custom-list {
  margin-top: clamp(48px, 7vh, 88px);
  border-top: 1px solid var(--rule);
}
.custom-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) 140px;
  gap: 32px; align-items: start;
  padding: 26px 0; border-bottom: 1px solid var(--rule);
  transition: padding-left .25s ease;
}
.custom-row:hover { padding-left: 16px; }
@media (max-width: 880px) {
  .custom-row { grid-template-columns: 1fr; gap: 12px; }
  .custom-row .desc, .custom-row .for { grid-column: 1; padding-left: 0; }
}
.custom-row .name {
  font-family: var(--sans);
  font-size: var(--font-size-title-sm-compact);
  line-height: 1.2;
  color: #3B4052;
}
.custom-row .desc { color: var(--muted-ink); font-size: var(--font-size-14); line-height: 1.55; max-width: 52ch; }
.custom-row .for {
  font-size: var(--font-size-12); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-ink); white-space: nowrap;
}

/* Process */
section.process {
  background: var(--bone); color: var(--ink);
  padding: clamp(96px, 14vh, 160px) 0;
}
.process-head { margin-bottom: clamp(48px, 7vh, 80px); max-width: 60ch; }
.process-head h2 { margin-top: 24px; }
.process-head h2 .italic { color: var(--indigo); }
.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 56px);
}
@media (max-width: 1080px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 0;
  position: relative;
}
.step .n {
  display: block; margin-bottom: 28px;
  font-family: var(--serif); font-size: var(--font-size-14);
  color: var(--coral); letter-spacing: 0.04em;
}
.step h3 { font-family: var(--serif); font-size: var(--font-size-heading-sm); }
.step p { margin-top: 16px; color: var(--muted-ink); font-size: var(--font-size-14-5); line-height: 1.55; }
@media (max-width: 540px) {
  .steps { grid-template-columns: 1fr; gap: 44px; }
  .step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }
  .step .n { grid-column: 1; grid-row: 1 / span 2; margin: 5px 0 0; }
  .step h3 { grid-column: 2; }
  .step p { grid-column: 2; margin-top: 10px; }
}

/* Selected work */
section.work { background: var(--bone); color: var(--ink); padding: 0 0 clamp(96px, 14vh, 140px); }
.work-head {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 24px;
  padding: clamp(64px, 10vh, 100px) 0 clamp(40px, 6vh, 56px);
  border-top: 1px solid var(--rule);
}
.work-head h2 { max-width: 16ch; }
.work-head .meta { font-size: var(--font-size-12); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-ink); }
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.case { grid-column: span 6; display: flex; flex-direction: column; gap: 18px; }
.case:nth-child(3) { grid-column: span 7; }
.case:nth-child(4) { grid-column: span 5; }
@media (max-width: 880px) { .case, .case:nth-child(3), .case:nth-child(4) { grid-column: span 12; } }
.thumb { aspect-ratio: 4 / 3; position: relative; overflow: hidden; }
.thumb.t-1 { background: linear-gradient(135deg, #DCD8CE, #C7C2B6); }
.thumb.t-2 { background: linear-gradient(135deg, #1B2042, #2B3268); }
.thumb.t-3 { background: linear-gradient(135deg, #E1DCCC, #C7BFA9); }
.thumb.t-4 { background: linear-gradient(135deg, #2B2F58, #4046A8); }
.thumb::after {
  content: attr(data-label); position: absolute; inset: auto 0 0 0;
  padding: 14px 16px; color: rgba(11,14,36,0.55);
  font-size: var(--font-size-11); letter-spacing: 0.22em; text-transform: uppercase;
}
.thumb.t-2::after, .thumb.t-4::after { color: rgba(242,238,230,0.7); }
.case-meta { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; }
.case h3 { font-family: var(--serif); font-size: var(--font-size-subheading-sm); line-height: 1.15; }
.case .tag { font-size: var(--font-size-11); letter-spacing: 0.22em; text-transform: uppercase; color: var(--coral); }
.case p { margin: 0; font-size: var(--font-size-14); color: var(--muted-ink); max-width: 50ch; }

.thumb .crop { position: absolute; width: 16px; height: 16px; border: 1.5px solid rgba(242,238,230,0.7); }
.thumb.t-1 .crop, .thumb.t-3 .crop { border-color: rgba(11,14,36,0.45); }
.crop.tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.crop.tr { top: 18px; right: 18px; border-left: 0; border-bottom: 0; }
.crop.bl { bottom: 38px; left: 18px; border-right: 0; border-top: 0; }
.crop.br { bottom: 38px; right: 18px; border-left: 0; border-top: 0; }
.thumb .frame-1 {
  position: absolute; inset: 22% 18% 28% 16%;
  background: linear-gradient(135deg, #B5AE9D, #8E8674);
  box-shadow: 0 16px 28px -10px rgba(11,14,36,0.35);
}
.thumb.t-2 .frame-1 { background: linear-gradient(135deg, #5B5FE0, #353888); }
.thumb.t-3 .frame-1 {
  inset: 18% 14% 22% 12%;
  background: linear-gradient(180deg, #F2EEE6, #DCD3BD);
}
.thumb.t-3 .frame-1::before {
  content: "Aa"; position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-size: var(--font-size-display-xl); color: var(--ink);
}
.thumb.t-4 .frame-1 {
  inset: 24% 22% 22% 22%;
  background: var(--paper); border-radius: 4px;
  box-shadow: 0 18px 30px -8px rgba(0,0,0,0.45);
}
.thumb.t-4 .frame-1::before {
  content: ""; position: absolute; inset: 12% 10%;
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) top left / 60% 6px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) 0 14px / 80% 4px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) 0 24px / 70% 4px no-repeat,
    linear-gradient(var(--coral), var(--coral)) 0 38px / 35% 28px no-repeat;
  opacity: .85;
}

/* Testimonial */
section.testimonial {
  background: var(--ink-2); color: var(--paper);
  padding: clamp(120px, 18vh, 200px) 0;
  position: relative; overflow: hidden;
}
.testimonial::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 30%, rgba(91,95,224,0.10), transparent 60%);
  pointer-events: none;
}
.test-grid {
  display: grid; grid-template-columns: 0.6fr 2fr;
  gap: clamp(24px, 4vw, 80px); align-items: start;
  position: relative; z-index: 2;
}
@media (max-width: 880px) { .test-grid { grid-template-columns: 1fr; } }
.test-label { display: flex; flex-direction: column; gap: 28px; }
.test-label .qmark {
  font-family: var(--serif); font-style: italic;
  font-size: var(--font-size-96); line-height: .7; color: var(--paper); opacity: .35;
}
.test-label .eyebrow { color: var(--paper); }
blockquote.test {
  font-family: var(--serif); font-style: italic;
  font-size: var(--font-size-quote); line-height: 1.18;
  margin: 0; color: var(--paper); max-width: 28ch; letter-spacing: -0.01em;
}
.attribution { margin-top: 48px; display: flex; align-items: flex-start; gap: 16px; }
.attribution::before {
  content: ""; width: 28px; height: 1.5px;
  background: var(--coral); margin-top: 10px; flex: 0 0 auto;
}
.attribution .role { color: var(--coral); font-size: var(--font-size-13); font-weight: 500; letter-spacing: 0.06em; }
.attribution .org { color: var(--muted-paper); font-size: var(--font-size-13); margin-top: 2px; }

/* Contact */
section.contact { background: var(--fog); color: var(--ink); padding: clamp(96px, 14vh, 160px) 0; }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 120px); align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
/* Grid items default to min-width: auto, so a track won't shrink below its
   content's min-content size. The channel email below is one unbreakable
   string with nothing to wrap at, and on narrow viewports that intrinsic
   width was winning and pushing this whole column (and the form column
   sharing its track under the 880px breakpoint) past the viewport edge. */
.contact-left,
.contact-form-wrap { min-width: 0; }
.contact-left h2 { margin-top: 24px; }
.contact-left h2 .italic { color: var(--indigo); }
.contact-left p.lede {
  margin-top: 32px; font-size: var(--font-size-16); line-height: 1.6;
  max-width: 36ch; color: var(--muted-ink);
}
.channels { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; }
.channel {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid rgba(11,14,36,0.10);
  transition: padding-left .2s ease;
}
.channel:hover { padding-left: 8px; }
.channel .ico {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-size: var(--font-size-12); color: var(--ink); flex: 0 0 32px;
}
.channel .label { font-weight: 500; font-size: var(--font-size-15); min-width: 0; overflow-wrap: anywhere; }
.footnote {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(11,14,36,0.10);
  font-size: var(--font-size-13); color: var(--muted-ink);
  line-height: 1.55; max-width: 38ch;
}

/* Contact form 7 — field/layout approach from references/visual-culture-v3.html
   (references/style03.css .form-group / .form-submit / .btn-submit), ported
   onto this theme's own fonts and color tokens rather than v3's. Restrained
   sans-serif fields and a muted label instead of the big serif/italic
   treatment this section used before. */
.wpcf7-form {
  display: flex;
  flex-direction: column;
}
/* CF7 6.x auto-wraps each form-tag's raw markup in <p>/<br> (its internal
   HTMLFormatter, same idea as wpautop). That adds paragraph margins between
   fields and breaks .submit-row onto two lines instead of a flex row —
   strip both so the .field/.submit-row layout below is what actually renders. */
.wpcf7-form p { margin: 0; display: contents; }
.wpcf7-form br { display: none; }
.wpcf7-form .field {
  /* .field is a flex item of the column-flex .wpcf7-form above; flex items
     default to min-width: auto, so they refuse to shrink below their
     content's intrinsic width. CF7's textarea carries a default cols="40"
     attribute, and that intrinsic width wins over `width: 100%` on narrow
     viewports, pushing the field past the viewport edge. */
  min-width: 0;
  border-bottom: 1.5px solid rgba(11,14,36,0.3);
  transition: background-color .2s ease;
}
.wpcf7-form .field:first-of-type { border-top: 1.5px solid rgba(11,14,36,0.3); }
.wpcf7-form .field:focus-within {
  background: rgba(11,14,36,0.035);
}
.wpcf7-form .field label {
  display: block; font-size: var(--font-size-10); letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 500; color: var(--muted-ink);
  padding: 20px 20px 6px;
}
.wpcf7-form .field input,
.wpcf7-form .field textarea,
.wpcf7-form .field select {
  display: block; width: 100%;
  background: transparent; border: 0;
  font-family: var(--sans);
  font-size: var(--font-size-15); font-weight: 400;
  color: var(--ink); padding: 0 20px 16px; line-height: 1.5; outline: none;
}
.wpcf7-form .field select {
  cursor: pointer;
  padding-left: 20px;
  padding-right: 52px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230B0E24' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 10px 6px;
}
.wpcf7-form .field select option { background: var(--bone); }
.wpcf7-form .field textarea { height: 160px; min-height: 90px; resize: vertical; }
.wpcf7-form .field .wpcf7-form-control-wrap { display: block; }
.wpcf7-form .field .wpcf7-not-valid-tip { display: block; font-family: var(--sans); font-size: var(--font-size-12); color: var(--coral); margin: -10px 20px 10px; }
.wpcf7-form .submit-row {
  margin: 32px 20px 0;
  display: flex; align-items: center;
}
.wpcf7-form input.btn-send {
  background: var(--ink); color: var(--paper);
  padding: 20px 36px; font-family: var(--sans);
  font-weight: 500; font-size: var(--font-size-13); letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px;
  width: auto; margin: 0; cursor: pointer;
  border: 0; appearance: none; -webkit-appearance: none;
  outline: none; box-shadow: none;
  transition: background-color .25s ease, gap .25s ease;
}
.wpcf7-form input.btn-send:hover { background: var(--indigo); gap: 16px; }
.wpcf7-form input.btn-send:focus,
.wpcf7-form input.btn-send:focus-visible,
.wpcf7-form input.btn-send:active {
  outline: none;
  box-shadow: none;
}
/* Plain small response text below the submit button. The extra ".wpcf7" ancestor
   in these selectors is needed to outrank CF7's own boxed/bordered default
   (includes/css/styles.css, `.wpcf7 form .wpcf7-response-output`). */
.wpcf7 .wpcf7-form .wpcf7-response-output {
  margin: 12px 20px 0; padding: 0; border: 0;
  font-size: var(--font-size-12); line-height: 1.5; color: var(--muted-ink);
}
.wpcf7 .wpcf7-form.sent .wpcf7-response-output { color: var(--indigo); }
.wpcf7 .wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 .wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 .wpcf7-form.payment-required .wpcf7-response-output,
.wpcf7 .wpcf7-form.failed .wpcf7-response-output,
.wpcf7 .wpcf7-form.aborted .wpcf7-response-output,
.wpcf7 .wpcf7-form.spam .wpcf7-response-output { color: var(--coral); }
.wpcf7-form .wpcf7-spinner { margin-left: 12px; }

/* Footer */
footer.site { background: var(--ink); color: var(--paper); padding: 80px 0 40px; }
.foot-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 40px;
  border-top: 1px solid rgba(242,238,230,0.12); padding-top: 60px;
}
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-mark {
  font-family: var(--serif);
  font-size: var(--font-size-heading-xl-alt); line-height: 1.0;
  max-width: 16ch; color: var(--paper);
}
.foot-mark .italic { color: var(--indigo-soft); }
.foot-col h4 {
  font-family: var(--sans); font-size: var(--font-size-11);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted-paper); margin: 0 0 20px; font-weight: 500;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--font-size-14); }
.foot-col a { color: var(--paper); opacity: .82; }
.foot-col a:hover { opacity: 1; color: var(--indigo-soft); }
.legal {
  margin-top: 60px; padding-top: 24px;
  border-top: 1px solid rgba(242,238,230,0.08);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  font-size: var(--font-size-12); color: var(--muted-paper); letter-spacing: 0.04em;
}
.legal .colophon { display: inline-flex; align-items: center; gap: 12px; }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--indigo-soft); font-size: var(--font-size-11);
}

/* ==========================================================================
   Blog — single post & archive
   ========================================================================== */

/* Post hero — a condensed version of the front page's dark hero treatment */
section.post-hero, section.archive-hero {
  background: var(--ink); color: var(--paper);
  padding: clamp(150px, 20vh, 200px) 0 clamp(56px, 8vh, 88px);
  position: relative; overflow: hidden;
}
section.post-hero::after {
  content: ""; position: absolute; right: -10%; bottom: -25%;
  width: 45%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(217,119,87,0.10), transparent 60%);
  pointer-events: none;
}
.post-hero-inner { position: relative; z-index: 2; max-width: 78ch; }
.post-hero h1, .archive-hero h1 {
  color: var(--paper); margin-top: 26px;
  font-size: var(--font-size-display-md);
}
.archive-hero h1 { max-width: 22ch; }
.archive-hero .desc {
  margin-top: 22px; max-width: 52ch;
  color: var(--muted-paper); font-size: var(--font-size-15); line-height: 1.6;
}
.post-meta {
  margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 16px; font-size: var(--font-size-13); letter-spacing: 0.02em; color: var(--muted-paper);
}
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

/* Post body */
section.post-body { background: var(--bone); color: var(--ink); padding: clamp(64px, 10vh, 120px) 0; }
.post-body-grid { max-width: 74ch; margin: 0 auto; }
.post-thumb { margin-bottom: clamp(40px, 6vh, 64px); aspect-ratio: 16 / 9; overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.entry-content { font-size: var(--font-size-prose); line-height: 1.75; color: #2A2F45; }
.entry-content > * + * { margin-top: 1.4em; }
.entry-content > p:first-of-type::first-letter {
  font-family: var(--serif); font-size: 3.2em; line-height: .85;
  float: left; padding: 4px 10px 0 0; color: var(--ink);
}
.entry-content h2 { font-size: var(--font-size-heading-lg); margin-top: 1.7em; color: var(--ink); }
.entry-content h3 { font-size: var(--font-size-subheading); margin-top: 1.5em; color: var(--ink); }
.entry-content h2 + *, .entry-content h3 + * { margin-top: 0.6em; }
.entry-content a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(91,95,224,0.35); }
.entry-content a:hover { text-decoration-color: var(--indigo); }
.entry-content strong { font-weight: 600; color: var(--ink); }
.entry-content blockquote {
  font-family: var(--serif); font-style: italic; color: var(--ink);
  font-size: var(--font-size-subheading-sm); line-height: 1.4;
  border-left: 2px solid var(--coral); padding-left: 28px; margin: 1.8em 0;
}
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li + li { margin-top: 0.5em; }
.entry-content img { width: 100%; height: auto; margin: 0.4em 0; }
.entry-content figcaption { font-size: var(--font-size-13); color: var(--muted-ink); margin-top: 10px; }
.entry-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
  background: var(--paper-2); padding: 2px 6px;
}
.entry-content pre {
  background: var(--ink); color: var(--paper);
  /* `overflow-x: auto` makes this a scroll container (a new block
     formatting context), and BFC roots use shrink-to-fit sizing rather
     than simply filling the containing block — so whenever the code's
     own content happens to be narrower than the column (as in the
     Skeleton Grid, Fluid post), the box shrinks and drifts off the left
     edge instead of spanning full width like its sibling paragraphs.
     Forcing width:100% overrides that and still scrolls fine when a
     line genuinely is wider than the column. */
  width: 100%;
  padding: 20px 24px; overflow-x: auto; font-size: var(--font-size-14); line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Older posts (e.g. the Skeleton Grid ones) align columns in their CSS
     snippets with literal tabs, authored assuming a 4-space tab stop —
     the browser default of 8 throws that off. */
  -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4;
}
/* `.entry-content code` sizes inline code at 0.9em for prose — but inside
   a <pre>, tab-stops are computed from the <pre>'s own (larger) font-size
   while the glyphs would render at that shrunk size, so the two scales
   drift apart across a run of tabs. Reset back to the <pre>'s own size. */
.entry-content pre code { background: none; padding: 0; font-size: 1em; }
.entry-content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }

/* Prism syntax highlighting — a restrained two-hue scheme (coral + indigo)
   instead of Prism's default rainbow, so highlighted code still reads as
   part of this palette rather than a foreign plugin default. */
.entry-content .token.comment,
.entry-content .token.prolog,
.entry-content .token.doctype,
.entry-content .token.cdata { color: rgba(242,238,230,0.45); font-style: italic; }
.entry-content .token.punctuation { color: rgba(242,238,230,0.55); }
.entry-content .token.property,
.entry-content .token.tag,
.entry-content .token.boolean,
.entry-content .token.number,
.entry-content .token.constant,
.entry-content .token.symbol { color: var(--coral); }
.entry-content .token.selector,
.entry-content .token.attr-name,
.entry-content .token.string,
.entry-content .token.char,
.entry-content .token.builtin { color: var(--indigo-soft); }
.entry-content .token.operator,
.entry-content .token.entity,
.entry-content .token.url { color: rgba(242,238,230,0.75); background: none; }
.entry-content .token.atrule,
.entry-content .token.attr-value,
.entry-content .token.keyword { color: var(--coral); }
.entry-content .token.function { color: var(--paper); font-weight: 500; }
.entry-content .token.regex,
.entry-content .token.important { color: var(--coral); font-weight: 600; }

/* Post tags + prev/next nav */
.post-tags {
  margin-top: clamp(48px, 7vh, 72px); padding-top: 28px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.post-tags a {
  font-size: var(--font-size-12); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-ink); border: 1px solid var(--rule); padding: 8px 14px;
  transition: border-color .2s ease, color .2s ease;
}
.post-tags a:hover { border-color: var(--indigo); color: var(--indigo); }

.post-nav {
  margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.post-nav a { display: flex; flex-direction: column; gap: 8px; }
.post-nav .next { text-align: right; align-items: flex-end; }
.post-nav .dir { font-size: var(--font-size-11); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-ink); }
.post-nav .title { font-family: var(--serif); font-size: var(--font-size-title-sm); line-height: 1.25; color: var(--ink); }
.post-nav a:hover .title { color: var(--indigo); }
@media (max-width: 640px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .next { text-align: left; align-items: flex-start; }
}

/* Archive list — cards that echo the single post's own layout: a 16:9
   image like .post-thumb, an eyebrow category, a serif title, a date/
   reading-time meta line reusing the .post-meta pattern, and prose-toned
   excerpt copy, all held in the same 74ch column as .post-body-grid. */
section.archive-list { background: var(--bone); color: var(--ink); padding: clamp(64px, 9vh, 100px) 0 clamp(96px, 14vh, 140px); }
.archive-body-grid { max-width: 74ch; margin: 0 auto; }

.archive-card {
  padding: clamp(48px, 7vh, 72px) 0;
  border-bottom: 1px solid var(--rule);
}
.archive-card:first-child { padding-top: 0; }

.archive-card-media {
  display: block; margin-bottom: 28px;
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2);
}
.archive-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.archive-card:hover .archive-card-media img { transform: scale(1.03); }

.archive-card-body h2 {
  margin-top: 18px; font-size: var(--font-size-heading-lg); font-weight: 300;
}
.archive-card-body h2 a { color: var(--ink); }
.archive-card-body h2 a:hover { color: var(--indigo); }

.archive-card-body p {
  margin-top: 18px; color: var(--muted-ink);
  font-size: var(--font-size-body-fluid); line-height: 1.65; max-width: 62ch;
}

.archive-card-more {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--font-size-13); font-weight: 500; letter-spacing: 0.04em; color: var(--ink);
}
.archive-card-more .arrow { font-family: var(--serif); transition: transform .2s ease; display: inline-block; }
.archive-card-more:hover { color: var(--indigo); }
.archive-card-more:hover .arrow { transform: translateX(3px); }

.archive-empty { padding: 60px 0; color: var(--muted-ink); font-size: var(--font-size-16); }

.pagination {
  margin-top: 56px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.pagination .page-numbers {
  font-size: var(--font-size-13); letter-spacing: 0.04em; color: var(--muted-ink);
  padding: 10px 16px; border: 1px solid var(--rule); display: inline-block;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.pagination a.page-numbers:hover { border-color: var(--indigo); color: var(--indigo); }
.pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pagination .page-numbers.dots { border: 0; padding: 10px 4px; }

/* 404 */
.error-body p { font-size: var(--font-size-body-lg); color: var(--muted-ink); max-width: 60ch; }
.error-actions { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.error-actions .archive-card-more { font-size: var(--font-size-16); }

:focus-visible { outline: 2px solid var(--indigo-soft); outline-offset: 3px; }