/* ---------- Self-hosted type ----------
   Served from this site's own assets so that no request leaves for a
   third party. The privacy policy states the site embeds no third-party
   resources; keep it that way.                                        */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;          /* variable */
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/ebgaramond-italic-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Shippori Mincho";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/shippori-500-latin.woff2") format("woff2");
}

/* ============================================================
   Munk — one page site
   Palette rule: cinnabar appears ONLY on the "Book a call"
   buttons and as a single small accent inside each illustration.
   Everything else is ink on paper.
   ============================================================ */

:root {
  --paper:  #F4F1EA;
  --paper-2:#FBF9F5;
  --ink:    #16161A;
  --soft:   #55524C;
  --red:    #A33B2A;
  --red-dk: #852E20;
  --hair:   #DEDACF;

  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Songti SC", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 1080px;
  --gutter: 32px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

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

/* ---------- Sticky header ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 241, 234, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.masthead.is-scrolled { border-bottom-color: var(--hair); }

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.brand img {
  width: 38px;
  height: 38px;
  display: block;
  mix-blend-mode: multiply;
}

.brand span {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 0.02em;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: var(--red);
  color: var(--paper-2);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 2px;
  transition: background 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

.btn:hover { background: var(--red-dk); }
.btn:active { transform: translateY(1px); }

.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-lg { padding: 15px 32px; font-size: 16px; }

/* ---------- Hero ---------- */

/* Top/bottom padding as longhand only: a `padding` shorthand here would
   wipe out the side gutters .wrap supplies. Keep the comment out of the
   declarations — a two-line comment between them swallows one. */
.hero {
  padding-top: 76px;
  padding-bottom: 88px;
}

.hero h1 { max-width: 880px; }

.hero h1 {
  font-size: clamp(42px, 6.2vw, 68px);
  letter-spacing: -0.02em;
}

.hero .sub {
  margin-top: 28px;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--soft);
  max-width: 620px;
}

.hero .cta { margin-top: 40px; }

/* ---------- Meet section ---------- */

.meet {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 88px 0;
}

.meet .wrap {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;   /* portrait follows the text instead of being
                               pushed out to the far right edge */
  gap: 44px;
  align-items: center;
}

.meet-copy { max-width: 600px; }

.meet-portrait {
  width: 280px;
  height: auto;
  display: block;
  mix-blend-mode: multiply;   /* sits on the paper rather than on a white tile */
}

.meet h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  max-width: 640px;
}

.meet p {
  margin-top: 24px;
  max-width: 560px;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--soft);
}

.meet strong {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- Features ---------- */

.features { padding-top: 24px; }   /* padding-top only — the shorthand would
                                       wipe out .wrap's side gutters */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 92px 0;
  border-bottom: 1px solid var(--hair);
}

.feature:last-child { border-bottom: 0; }

/* alternate: even-numbered features put the art on the right */
.feature:nth-child(even) .feature-art { order: 2; }
.feature:nth-child(even) .feature-copy { order: 1; }

.feature-copy h3 {
  font-size: clamp(26px, 3.2vw, 34px);
}

.feature-copy p.what {
  margin-top: 20px;
  color: var(--soft);
  font-size: 16.5px;
}

/* --- value statement: three treatments, switched by the body class ---
   Keep whichever wins and delete the other two.                        */

.feature-copy p.benefit { color: var(--ink); }

/* A — a short cinnabar rule, then the line in the heading serif */
.bt-a .feature-copy p.benefit {
  margin-top: 30px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.4;
}

/* italic trial — Shippori Mincho ships no italic, so .it-synth is a slant the
   browser fakes; .it-real swaps in a serif that actually has one.            */
.it-synth .feature-copy p.benefit { font-style: italic; }

.it-real .feature-copy p.benefit {
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: 23px;
}
.bt-a .feature-copy p.benefit::before {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  background: var(--red);
  margin-bottom: 18px;
}

/* B — quiet sans, led by an arrow */
.bt-b .feature-copy p.benefit {
  margin-top: 26px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-indent: -22px;
  padding-left: 22px;
}
.bt-b .feature-copy p.benefit::before {
  content: "\2192";
  color: var(--soft);
  padding-right: 10px;
}

/* C — no ornament at all; size and space do the work */
.bt-c .feature-copy p.benefit {
  margin-top: 30px;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.4;
}

.feature-art svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Teach him your own processes ---------- */

.teach {
  border-top: 1px solid var(--hair);
  padding: 92px 0 96px;
}

.teach h2 { font-size: clamp(26px, 3.4vw, 36px); max-width: 720px; }

.teach .lede {
  margin-top: 20px;
  max-width: 620px;
  color: var(--soft);
  font-size: 17px;
}

.teach-list {
  margin: 34px 0 0;
  padding-left: 22px;
  max-width: 620px;
}

.teach-list li {
  margin-top: 12px;
  font-size: 17.5px;
  color: var(--ink);
}

.teach-list li::marker { color: var(--soft); }

/* ---------- Closing banner ---------- */

.banner {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--hair);
  padding: 132px 0 140px;
  text-align: center;
}

.banner-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 88vw);
  transform: translate(-50%, -52%);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
}

.banner .wrap { position: relative; z-index: 1; }

.banner h2 {
  font-size: clamp(30px, 4.6vw, 48px);
  max-width: 760px;
  margin: 0 auto;
}

.banner .cta { margin-top: 40px; }

/* ---------- Footer ---------- */

.site-foot {
  border-top: 1px solid var(--hair);
  padding: 34px 0;
  font-size: 14px;
  color: var(--soft);
}

.site-foot .wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-foot a { text-decoration: none; border-bottom: 1px solid var(--hair); }
.site-foot a:hover { border-bottom-color: var(--soft); }

.dot { color: var(--hair); }

/* ---------- Privacy page ---------- */

.doc {
  max-width: 720px;
  padding-top: 80px;
  padding-bottom: 96px;
}

.doc h1 { font-size: clamp(34px, 5vw, 48px); }

.doc .updated {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
}

.doc h2 {
  font-size: 24px;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--hair);
}

.doc p, .doc li {
  margin-top: 16px;
  color: var(--soft);
  font-size: 16.5px;
}

.doc ul { margin: 0; padding-left: 22px; }

.doc .lead { font-size: 18.5px; margin-top: 26px; }

.doc table {
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
  font-size: 15.5px;
}

.doc th, .doc td {
  text-align: left;
  vertical-align: top;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--hair);
  color: var(--soft);
}

.doc th {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  padding-right: 28px;
}

.doc caption { display: none; }

.doc blockquote {
  margin: 24px 0 0;
  padding: 20px 24px;
  background: var(--paper-2);
  border-left: 2px solid var(--hair);
  font-size: 16px;
  color: var(--soft);
}

.doc a { text-decoration: none; border-bottom: 1px solid var(--hair); }
.doc a:hover { border-bottom-color: var(--soft); }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  :root { --gutter: 22px; }

  .hero { padding-top: 76px; padding-bottom: 68px; }
  .meet { padding: 64px 0; }

  .meet .wrap {
    grid-template-columns: 1fr;
    gap: 30px;
    justify-items: center;
    text-align: center;
  }

  .meet-portrait { width: 150px; }

  .teach { padding: 64px 0 68px; }

  .feature {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 64px 0;
  }

  /* on a phone the picture always sits above its words */
  .feature:nth-child(even) .feature-art  { order: 0; }
  .feature:nth-child(even) .feature-copy { order: 0; }

  .banner { padding: 96px 0 100px; }
  .doc { padding-top: 56px; }

  .masthead .wrap { height: 60px; }
  .brand img { width: 32px; height: 32px; }
  .brand span { font-size: 19px; }
}

@media (max-width: 420px) {
  body { font-size: 16px; }
  .brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Illustration primitives (inline SVG) ---------- */

.s-card   { fill: var(--paper-2); stroke: var(--hair); stroke-width: 1.5; }
.s-plain  { fill: var(--paper);   stroke: var(--hair); stroke-width: 1.5; }
.s-out    { fill: none;           stroke: var(--hair); stroke-width: 1.5; }
.s-rule   { stroke: var(--hair);  stroke-width: 1.5; fill: none; }
.s-arrow  { stroke: var(--soft);  stroke-width: 1.5; fill: none; }
.s-dash   { stroke: var(--soft);  stroke-width: 1.4; fill: none;
            stroke-dasharray: 3 4.5; opacity: 0.55; }
.s-bar    { fill: var(--hair); }
.s-bar-2  { fill: var(--hair); opacity: 0.6; }
.s-red    { fill: var(--red); }
.s-ink    { fill: var(--ink); }
.s-glyph  { fill: none; stroke: var(--soft); stroke-width: 1.5;
            stroke-linecap: round; stroke-linejoin: round; }
.s-check  { fill: none; stroke: var(--paper-2); stroke-width: 1.8;
            stroke-linecap: round; stroke-linejoin: round; }

.s-t      { font-family: var(--sans); font-size: 11.5px; fill: var(--soft); }
.s-t-dk   { font-family: var(--sans); font-size: 13px; fill: var(--ink); font-weight: 500; }
.s-t-sm   { font-family: var(--sans); font-size: 10.5px; fill: var(--soft); }
.s-t-rev  { font-family: var(--sans); font-size: 10.5px; fill: var(--paper-2); font-weight: 500; }
.s-t-cap  { font-family: var(--sans); font-size: 10px; fill: var(--soft);
            letter-spacing: 0.12em; text-transform: uppercase; }