/* ============================================================
   Its Personal — Work + Case Study pages (shared)
   File:   wp-content/themes/itspersonal/assets/work.css
   Scope:  Two namespaces share this file:
             .ip-work-root  — /work/ landing page (Take B: anchored grid)
             .ip-case-root  — /work/case-studies/* teaser pages (Take B:
                              asymmetric two-column with figures rail)
   Brand:  Locked palette and type from colors_and_type.css v1.3.
           Plus Jakarta Sans + Caveat only. No em dashes anywhere.
   ============================================================ */

.ip-work-root,
.ip-case-root {
  --ip-terracotta: #7A3828;
  --ip-sienna:     #C4714A;
  --ip-copper:     #EDE0D8;
  --ip-linen:      #F5EDE7;
  --ip-parchment:  #FDFAF8;
  --ip-sage:       #4A6858;
  --ip-charcoal:   #1E1A18;
  --ip-ash:        #8A7A74;
  --ip-divider:    #E5DAD2;
  --ip-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ip-charcoal);
  background: var(--ip-parchment);
}

/* Hide Kadence entry-hero on Work + each case-study page.
   Slug-based selectors are more durable than page-id-X. */
body.page-work .entry-hero,
body.page-work .entry-hero-container-inner,
body.page-work .entry-hero-section,
body.parent-pageid-work .entry-hero,
body.parent-pageid-case-studies .entry-hero,
[class*="page-japan-industrial-cio"] .entry-hero,
body.single-case-study .entry-hero {
  display: none !important;
}
body.page-work .content-container.site-container,
body.page-work #main.site-main,
body.page-work .content-wrap,
body.page-work .entry-content-wrap,
body.page-work .entry-content,
[class*="page-japan-industrial-cio"] .content-container.site-container,
[class*="page-japan-industrial-cio"] #main.site-main,
[class*="page-japan-industrial-cio"] .content-wrap,
[class*="page-japan-industrial-cio"] .entry-content-wrap,
[class*="page-japan-industrial-cio"] .entry-content {
  max-width: none !important; padding: 0 !important; margin: 0 !important;
  background: transparent !important;
}

/* Reset */
.ip-work-root *, .ip-work-root *::before, .ip-work-root *::after,
.ip-case-root *, .ip-case-root *::before, .ip-case-root *::after { box-sizing: border-box; }
/* :where() drops the selector specificity to (0,0,0) so any classed margin rule
   below wins without needing to repeat the root prefix. This was the cause of
   the 2026-05-14 spacing fixes silently failing. */
.ip-work-root :where(p, h1, h2, h3),
.ip-case-root :where(p, h1, h2, h3) { margin: 0; }
.ip-work-root ::selection,
.ip-case-root ::selection { background: var(--ip-terracotta); color: var(--ip-parchment); }
.ip-work-root a, .ip-case-root a { color: inherit; }

/* Shared primitives */
.ip-work-label,
.ip-case-label {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ip-terracotta);
}
.ip-work-script,
.ip-case-script {
  font-family: "Caveat", "Apple Chancery", cursive;
  font-weight: 400;
  color: var(--ip-sienna);
  letter-spacing: 0;
  line-height: 1.05;
}

/* ============================================================
   /work/ landing — Take B: anchored grid with confident whitespace
   ============================================================ */
.ip-work-root {
  padding: 0;
}

.ip-work-head {
  padding: 120px 32px 80px;
}
.ip-work-head-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.ip-work-head-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: end;
  margin-top: 32px;
}
.ip-work-title {
  font-weight: 300;
  font-size: clamp(48px, 5.6vw, 72px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ip-charcoal);
  text-wrap: pretty;
}
.ip-work-head-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ip-ash);
  max-width: 380px;
}
.ip-work-head-sub em {
  font-style: italic;
  color: var(--ip-charcoal);
}

.ip-work-filters {
  margin-top: 56px;
  display: flex;
  gap: 32px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ip-ash);
  font-weight: 600;
  flex-wrap: wrap;
}
.ip-work-filter {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color 200ms var(--ip-ease);
}
.ip-work-filter:hover { color: var(--ip-charcoal); }
.ip-work-filter.is-active { color: var(--ip-terracotta); cursor: default; }
.ip-work-filter-note {
  letter-spacing: 0;
  text-transform: none;
  font-style: italic;
  color: var(--ip-divider);
  margin-left: 8px;
  font-weight: 400;
}

.ip-work-grid-section {
  padding: 0 32px 120px;
}
.ip-work-grid-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.ip-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ip-work-grid.is-n1 { grid-template-columns: repeat(3, 1fr); }
.ip-work-grid.is-n4 { grid-template-columns: repeat(2, 1fr); }
.ip-work-grid.is-n8 { grid-template-columns: repeat(3, 1fr); }

/* Tile */
.ip-work-tile {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: var(--ip-parchment);
  border: 1px solid var(--ip-divider);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  min-height: 360px;
  transition: border-color 240ms var(--ip-ease);
}
.ip-work-tile:hover { border-color: var(--ip-charcoal); }
.ip-work-tile.is-large {
  padding: 40px 36px;
  min-height: 460px;
}
.ip-work-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.ip-work-tile.is-large .ip-work-tile-head { margin-bottom: 40px; }
.ip-work-tile-type {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ip-terracotta);
  font-weight: 600;
}
.ip-work-tile-num {
  font-family: "Caveat", cursive;
  font-size: 28px;
  color: var(--ip-sienna);
  line-height: 1;
}
.ip-work-tile-title {
  font-weight: 300;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ip-charcoal);
  /* Brand rule: heading-to-body gap ~1.5x heading font-size (28px on 24px landing tile, 40px on 36px is-large variant via direct override would also work but 28px reads correctly at both scales). */
  margin-bottom: 28px;
  text-wrap: pretty;
}
.ip-work-tile.is-large .ip-work-tile-title { font-size: 36px; }
.ip-work-tile-excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ip-ash);
  margin-bottom: 20px;
  max-width: 480px;
}
.ip-work-tile-spacer { flex: 1; }
.ip-work-tile-foot {
  padding-top: 20px;
  border-top: 1px solid var(--ip-divider);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.ip-work-tile-meta {
  font-size: 12px;
  color: var(--ip-ash);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.ip-work-tile-cta {
  font-size: 13px;
  color: var(--ip-terracotta);
  font-weight: 600;
  white-space: nowrap;
}

/* Intentional empty cells — restraint, not absence */
.ip-work-empty {
  padding: 40px 36px;
  min-height: 460px;
  background: transparent;
  border: 1px dashed var(--ip-divider);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ip-work-empty-num {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ip-ash);
  font-weight: 600;
  margin-bottom: 16px;
}
.ip-work-empty-script {
  font-family: "Caveat", cursive;
  font-size: 38px;
  color: var(--ip-sienna);
  line-height: 1.08;
  margin-bottom: 16px;
}
.ip-work-empty-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ip-ash);
}
.ip-work-empty-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--ip-terracotta);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.ip-work-empty-link:hover { color: var(--ip-charcoal); border-bottom-color: var(--ip-charcoal); }

/* Index ledger row */
.ip-work-ledger {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--ip-divider);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ip-ash);
  letter-spacing: 0.06em;
  gap: 24px;
  flex-wrap: wrap;
}

@media (max-width: 880px) {
  .ip-work-head-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .ip-work-head-sub { max-width: none; }
  .ip-work-grid,
  .ip-work-grid.is-n1,
  .ip-work-grid.is-n4,
  .ip-work-grid.is-n8 { grid-template-columns: 1fr; }
  .ip-work-tile,
  .ip-work-tile.is-large,
  .ip-work-empty { min-height: 0; }
}

/* ============================================================
   /work/case-studies/* teaser — Take B: asymmetric two-column with rail
   ============================================================ */
.ip-case-root {
  padding: 0;
}

.ip-case-hero {
  padding: 80px 32px 60px;
}
.ip-case-hero-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.ip-case-crumbs {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ip-ash);
  font-weight: 600;
}
.ip-case-crumbs a { color: var(--ip-ash); text-decoration: none; transition: color 200ms var(--ip-ease); }
.ip-case-crumbs a:hover { color: var(--ip-charcoal); }
.ip-case-crumbs-sep { color: var(--ip-divider); }
.ip-case-crumbs-type { color: var(--ip-terracotta); }

.ip-case-title {
  font-weight: 300;
  font-size: clamp(40px, 5vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ip-charcoal);
  text-wrap: pretty;
  max-width: 880px;
}
.ip-case-frame {
  /* H1 → subtitle gap. Halved from clamp(56,6vw,80px) after 2026-05-14 visual check. */
  margin-top: clamp(28px, 3vw, 40px);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--ip-ash);
  max-width: 720px;
  font-weight: 400;
}

/* Two-column body */
.ip-case-body {
  padding: 0 32px 80px;
}
.ip-case-body-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 80px;
  align-items: start;
}

.ip-case-section {
  padding-top: 56px;
  border-top: 1px solid var(--ip-divider);
}
.ip-case-section + .ip-case-section {
  margin-top: 64px;
}

.ip-case-summary-script {
  font-family: "Caveat", cursive;
  font-size: 36px;
  color: var(--ip-sienna);
  line-height: 1;
  margin-bottom: 24px;
}
.ip-case-summary-body {
  font-size: 20px;
  line-height: 1.6;
  color: var(--ip-charcoal);
  text-wrap: pretty;
}

.ip-case-section-eyebrow {
  margin-bottom: 20px;
}
.ip-case-section-title {
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ip-charcoal);
  /* H2 → body gap. Halved from 64px to 32px after 2026-05-14 visual check. ~1.15x heading font. */
  margin-bottom: 32px;
}

/* Inside-list (numbered, Caveat numeral) */
.ip-case-inside { list-style: none; padding: 0; margin: 0; }
.ip-case-inside li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--ip-divider);
}
.ip-case-inside li:first-child { border-top: 0; padding-top: 0; }
.ip-case-inside-num {
  font-family: "Caveat", cursive;
  font-size: 24px;
  color: var(--ip-sienna);
  line-height: 1.1;
}
.ip-case-inside-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ip-charcoal);
}

/* Useful-for cluster (definition-list style) */
.ip-case-useful { display: block; }
.ip-case-useful-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--ip-divider);
}
.ip-case-useful-row:first-child { border-top: 0; padding-top: 0; }
.ip-case-useful-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ip-terracotta);
  font-weight: 600;
  padding-top: 4px;
}
.ip-case-useful-items {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ip-charcoal);
}
.ip-case-useful-items > span:not(.ip-case-useful-sep) { display: inline; }
.ip-case-useful-sep {
  color: var(--ip-ash);
  margin: 0 12px;
}

/* Right rail — figures */
.ip-case-rail {
  position: relative;
}
.ip-case-rail-sticky {
  position: sticky;
  top: 96px;
}
.ip-case-rail-card {
  padding: 28px 28px 32px;
  background: var(--ip-linen);
  border: 1px solid var(--ip-divider);
  border-radius: 4px;
}
.ip-case-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  /* Brand rule: heading-to-body gap ~1.5x heading font-size (rail head ~14px, gap 22px). */
  margin-bottom: 22px;
}
.ip-case-rail-head-title {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--ip-charcoal);
}
.ip-case-rail-register {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ip-ash);
  font-weight: 600;
  font-style: italic;
}
.ip-case-rail-lede {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ip-ash);
  margin: 0 0 8px;
}
.ip-case-rail-row {
  padding: 24px 0;
  border-top: 1px solid var(--ip-divider);
}
.ip-case-rail-row-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.ip-case-rail-figure {
  font-weight: 300;
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ip-charcoal);
  font-variant-numeric: tabular-nums;
}
.ip-case-rail-marker {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ip-terracotta);
  font-weight: 600;
  font-style: italic;
  margin-left: auto;
}
.ip-case-rail-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--ip-charcoal);
  margin-bottom: 6px;
}
.ip-case-rail-basis {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ip-ash);
}
.ip-case-rail-foot {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ip-ash);
  font-style: italic;
}

/* Form section */
.ip-case-form-section {
  padding: 60px 32px 120px;
  background: var(--ip-linen);
}
.ip-case-form-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 80px;
  align-items: start;
}
.ip-case-form-title {
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ip-charcoal);
  margin-bottom: 40px;
}

.ip-case-honesty {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: var(--ip-parchment);
  border-radius: 4px;
  border-left: 2px solid var(--ip-terracotta);
  margin-bottom: 32px;
}
.ip-case-honesty-mark {
  font-family: "Caveat", cursive;
  font-size: 32px;
  color: var(--ip-sienna);
  line-height: 0.9;
  margin-top: 2px;
}
.ip-case-honesty-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ip-charcoal);
}
.ip-case-honesty-text strong { font-weight: 700; }
.ip-case-honesty-text code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 13px;
  background: transparent;
}

/* The form itself */
.ip-case-form {
  display: grid;
  gap: 32px;
}
.ip-case-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ip-case-form-row.is-uneven { grid-template-columns: 1.4fr 1fr; }
.ip-case-field { display: flex; flex-direction: column; gap: 8px; }
.ip-case-field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ip-ash);
}
.ip-case-field input {
  font-family: inherit;
  font-size: 17px;
  color: var(--ip-charcoal);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ip-divider);
  padding: 14px 0 12px;
  outline: none;
  border-radius: 0;
  transition: border-bottom-color 200ms var(--ip-ease);
}
.ip-case-field input:focus { border-bottom-color: var(--ip-charcoal); }
.ip-case-field input:invalid:not(:placeholder-shown) {
  border-bottom-color: var(--ip-sienna);
}
.ip-case-field-hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ip-sienna);
  display: none;
  align-items: center;
  gap: 8px;
}
.ip-case-field-hint::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background: var(--ip-sienna);
}
.ip-case-field input:invalid:not(:placeholder-shown) + .ip-case-field-hint {
  display: flex;
}

.ip-case-form-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ip-case-submit {
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  color: var(--ip-parchment);
  background: var(--ip-terracotta);
  padding: 18px 36px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: background 280ms var(--ip-ease);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ip-case-submit:hover { background: var(--ip-charcoal); }
.ip-case-submit.is-submitting { opacity: 0.8; cursor: wait; }
.ip-case-submit-spinner {
  width: 12px;
  height: 12px;
  border-radius: 12px;
  border: 2px solid rgba(253,250,248,0.4);
  border-top-color: var(--ip-parchment);
  animation: ip-case-spin 0.7s linear infinite;
  display: none;
}
.ip-case-submit.is-submitting .ip-case-submit-spinner { display: inline-block; }
@keyframes ip-case-spin { to { transform: rotate(360deg); } }
.ip-case-promise {
  font-size: 13px;
  color: var(--ip-ash);
  max-width: 320px;
  line-height: 1.55;
}
.ip-case-promise strong { color: var(--ip-charcoal); font-weight: 700; }

/* Form aside — why we gate */
.ip-case-form-section aside {
  /* Push the aside down so "Why we gate it." reads as a deliberate side-note
     rather than a sibling of the form's eyebrow. Calibrated 2026-05-14. */
  padding-top: 96px;
}
.ip-case-form-aside-script {
  font-family: "Caveat", cursive;
  font-size: 44px;
  color: var(--ip-sienna);
  line-height: 1.05;
  margin-bottom: 20px;
}
.ip-case-form-aside-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ip-charcoal);
}

/* Thank-you state — replaces the form, no reload */
.ip-case-thanks { display: none; }
.ip-case-thanks.is-active { display: grid; gap: 24px; padding: 32px 0; border-top: 1px solid var(--ip-divider); }
.ip-case-thanks-script {
  font-family: "Caveat", cursive;
  font-size: 48px;
  color: var(--ip-sienna);
  line-height: 1;
}
.ip-case-thanks-title {
  font-weight: 300;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ip-charcoal);
  max-width: 480px;
}
.ip-case-thanks-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ip-charcoal);
  max-width: 520px;
}
.ip-case-thanks-body code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 15px;
  background: transparent;
}
.ip-case-thanks-actions {
  display: flex;
  gap: 32px;
  margin-top: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}
.ip-case-thanks-actions a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.ip-case-thanks-actions .is-primary { color: var(--ip-terracotta); font-weight: 600; }
.ip-case-thanks-actions .is-secondary { color: var(--ip-charcoal); font-weight: 500; border-bottom-color: var(--ip-divider); }

/* When the form has been submitted, hide the live form + show thanks */
.ip-case-form-wrap.is-submitted .ip-case-form { display: none; }
.ip-case-form-wrap.is-submitted .ip-case-honesty { display: none; }
.ip-case-form-wrap.is-submitted .ip-case-thanks { display: grid; }

/* Responsive */
@media (max-width: 980px) {
  .ip-case-body-inner,
  .ip-case-form-inner { grid-template-columns: 1fr; gap: 48px; }
  .ip-case-rail-sticky { position: static; }
}
@media (max-width: 560px) {
  .ip-case-form-row,
  .ip-case-form-row.is-uneven { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ip-work-tile,
  .ip-case-field input,
  .ip-case-submit { transition: none; }
  .ip-case-submit-spinner { animation: none; }
}