/* Krista A. Tobin, Hair and Color: design tokens and base rules.
   Direction "Atelier", locked 2026-09-06. Link this one file. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;1,400&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,600&display=swap');

:root {
  /* color */
  --kt-cocoa: #3F2E28;      /* headlines, body on light, dark panels, primary buttons */
  --kt-ivory: #F6F0E6;      /* page background, text on cocoa */
  --kt-rose: #B7826B;       /* accent only: italic sub-lines, rings, rules, display text 24px+ */
  --kt-blush: #E8D5CC;      /* tinted panels and cards */
  --kt-umber: #6B5A52;      /* body and secondary text on ivory */
  --kt-driftwood: #8A7E6E;  /* captions and labels 12px+ semibold only */
  --kt-cream: #FBF8F3;      /* cards on ivory */
  --kt-hairline: #E8DCCF;   /* borders */

  /* type */
  --kt-font-display: 'Libre Caslon Display', Georgia, serif;
  --kt-font-italic: 'Libre Caslon Text', Georgia, serif;
  --kt-font-sans: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
  --kt-ls-label: 0.2em;
  --kt-ls-caps: 0.3em;

  /* shape and motion */
  --kt-radius: 10px;
  --kt-ease: cubic-bezier(.32, .72, 0, 1);
  --kt-maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--kt-ivory);
  color: var(--kt-umber);
  font: 400 17px/1.6 var(--kt-font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .kt-display { font-family: var(--kt-font-display); font-weight: 400; color: var(--kt-cocoa); line-height: 1.1; margin: 0; }
h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 28px; }
.kt-sub { font-family: var(--kt-font-italic); font-style: italic; color: var(--kt-rose); font-size: 24px; }
.kt-label { font: 600 12px/1.4 var(--kt-font-sans); letter-spacing: var(--kt-ls-label); text-transform: uppercase; color: var(--kt-driftwood); }
a { color: var(--kt-cocoa); text-decoration: none; } a:hover { color: var(--kt-rose); }

/* buttons: 44px minimum, order on any page is Book online, Text, then Call */
.kt-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: var(--kt-radius); font: 600 12px/1 var(--kt-font-sans); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: background-color .22s var(--kt-ease), color .22s var(--kt-ease); }
.kt-btn-primary { background: var(--kt-cocoa); color: var(--kt-ivory); }
.kt-btn-primary:hover { background: #2A1F1B; }
.kt-btn-secondary { background: transparent; border-color: var(--kt-cocoa); color: var(--kt-cocoa); }
.kt-btn-secondary:hover { background: var(--kt-blush); }
.kt-btn-rose { background: var(--kt-rose); color: var(--kt-cocoa); font-size: 16px; letter-spacing: 0.06em; text-transform: none; } /* large text only: 3.93 contrast */
.kt-on-cocoa { background: var(--kt-cocoa); color: var(--kt-ivory); }
.kt-on-cocoa .kt-btn-primary { background: var(--kt-ivory); color: var(--kt-cocoa); }
.kt-on-cocoa .kt-btn-secondary { border-color: var(--kt-ivory); color: var(--kt-ivory); }
.kt-card { background: var(--kt-cream); border: 1px solid var(--kt-hairline); padding: 28px 32px; }
.kt-panel { background: var(--kt-blush); padding: 28px 32px; }


/* ============================================================
   katobin.com home page.
   Everything above this line is the brand kit's tokens and base
   rules. Everything below is this page, ported from the kit's
   Website tab: the desktop mock at 1440 and the phone mock at 390.
   ============================================================ */

:root {
  /* Neutrals lifted from the mocks themselves, not new brand colors:
     the stronger hairline, and the two soft tones used on cocoa panels. */
  --kt-rule: #D2C2B4;
  --kt-on-cocoa-soft: #D9CBBF;   /* 8.1 on cocoa */
  --kt-on-cocoa-mute: #B7A297;   /* 5.3 on cocoa */
}

/* ---------- shared shell ---------- */
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 64px; }
.section { padding: 96px 0; }
.section-ivory { background: var(--kt-ivory); }
.section-cream { background: var(--kt-cream); }
.section-blush { background: var(--kt-blush); }
img { max-width: 100%; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  display: inline-flex; align-items: center; min-height: 46px;
  background: var(--kt-cocoa); color: var(--kt-ivory);
  padding: 0 20px; font: 600 14px/1 var(--kt-font-sans);
}
.skip-link:focus { left: 0; color: var(--kt-ivory); }

:focus-visible { outline: 2px solid var(--kt-cocoa); outline-offset: 3px; }
.on-cocoa :focus-visible, .site-footer :focus-visible { outline-color: var(--kt-ivory); }

.eyebrow {
  font: 600 12px/1.4 var(--kt-font-sans);
  letter-spacing: var(--kt-ls-label); text-transform: uppercase;
  color: var(--kt-umber); margin: 0 0 14px;
}
.section-title { font-size: 44px; margin: 0 0 48px; }

/* ---------- buttons and call links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 17px 34px;
  font: 600 16px/1.2 var(--kt-font-sans); letter-spacing: .03em;
  border: 1px solid transparent; border-radius: var(--kt-radius);
  text-transform: none; text-align: center;
}
.btn-primary { background: var(--kt-cocoa); color: var(--kt-ivory); }
.btn-primary:hover { background: #2A1F1B; color: var(--kt-ivory); }
.btn-onlight { background: var(--kt-ivory); color: var(--kt-cocoa); }
.btn-onlight:hover { background: #FFFFFF; color: var(--kt-cocoa); }
.btn-outline-light { border-color: var(--kt-ivory); color: var(--kt-ivory); }
.btn-outline-light:hover { background: rgba(246,240,230,.12); color: var(--kt-ivory); }
.btn-outline-dark { border-color: var(--kt-cocoa); color: var(--kt-cocoa); }
.btn-outline-dark:hover { background: var(--kt-blush); color: var(--kt-cocoa); }
.btn-header { min-height: 48px; padding: 15px 28px; font-size: 15px; letter-spacing: .04em; }

.call-link {
  display: inline-flex; align-items: center; min-height: 46px;
  font: 400 16px/1.4 var(--kt-font-sans); color: var(--kt-umber);
  text-decoration: underline; text-underline-offset: 3px;
}
.call-link:hover { color: var(--kt-cocoa); }
.call-link-light { color: var(--kt-on-cocoa-soft); }
.call-link-light:hover { color: var(--kt-ivory); }

.actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.actions-center { justify-content: center; margin-top: 0; }

/* ---------- 1. header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--kt-ivory); border-bottom: 1px solid var(--kt-hairline);
}
.header-inner { height: 132px; display: flex; align-items: center; justify-content: space-between; }
.lockup { display: inline-flex; align-items: center; min-height: 46px; }
.lockup img, .lockup svg { display: block; width: 500px; height: 115px; }
.site-nav { display: flex; align-items: center; gap: 36px; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 46px;
  font: 400 16px/1.2 var(--kt-font-sans); color: var(--kt-cocoa);
}
.nav-link:hover { color: var(--kt-rose); }
.nav-toggle { display: none; }

/* ---------- 2. hero ---------- */
.hero { background: var(--kt-cocoa); }
.hero-inner { display: flex; gap: 64px; padding-top: 96px; padding-bottom: 96px; }
.hero-copy { flex: 1.1; display: flex; flex-direction: column; gap: 28px; justify-content: center; }
.hero h1 { font-size: 64px; line-height: 1.08; color: var(--kt-ivory); }
.hero-sub { font-size: 20px; line-height: 1.6; color: var(--kt-on-cocoa-soft); max-width: 34ch; margin: 0; }
.tagline {
  font-family: var(--kt-font-italic); font-style: italic;
  font-size: 20px; color: var(--kt-on-cocoa-mute); margin: 16px 0 0;
}
.hero-photo { flex: .9; display: flex; }
.photo-placeholder {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 320px; border: 2px dashed var(--kt-rule);
  font: 400 14px/1.4 var(--kt-font-sans); letter-spacing: .12em;
  color: var(--kt-umber); text-align: center; padding: 24px;
}
.photo-placeholder-dark { border-color: rgba(246,240,230,.4); color: var(--kt-on-cocoa-soft); }

/* ---------- 3. how a visit goes, and 6. visit ---------- */
.three-up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.ruled { border-top: 1px solid var(--kt-rule); padding-top: 26px; }
.ruled p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--kt-umber); }
.step-title { font-size: 36px; margin: 0 0 14px; }
.eyebrow-sub { margin: 0 0 10px; }
.visit-text { font-size: 19px; line-height: 1.55; color: var(--kt-cocoa); }
.visit-text-muted { color: var(--kt-umber); }
.directions { margin: 14px 0 0; }
.directions a {
  display: inline-flex; align-items: center; min-height: 46px;
  font: 600 16px/1.2 var(--kt-font-sans); color: var(--kt-cocoa);
  text-decoration: underline; text-underline-offset: 3px;
}
.directions a:hover { color: var(--kt-rose); }

/* ---------- 4. services ---------- */
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.service { border-bottom: 1px solid var(--kt-hairline); padding: 26px 0; }
.service-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.service-name { font-size: 26px; margin: 0; }
/* Deviation from the mock, on purpose: the mock sets the price in rose gold,
   which measures 2.89 against ivory and cream and fails at this size. Cocoa. */
.price { font: 600 17px/1.4 var(--kt-font-sans); color: var(--kt-cocoa); white-space: nowrap; }
.service p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var(--kt-umber); }
.fine-print { margin: 26px 0 0; font-size: 15px; line-height: 1.6; color: var(--kt-umber); }

/* ---------- 5. about ---------- */
.about-inner { display: flex; gap: 56px; align-items: center; }
.portrait {
  flex: 0 0 auto; display: block;
  width: 260px; height: 321px; object-fit: cover; object-position: center 22%;
}
.about-copy { flex: 1; }
.bio { font-size: 19px; line-height: 1.65; color: var(--kt-cocoa); max-width: 56ch; margin: 0; }

/* ---------- 8. book ---------- */
.book-inner { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.book-title { font-size: 48px; max-width: 20ch; margin: 0; }

/* ---------- 9. footer ---------- */
.site-footer { background: var(--kt-cocoa); padding: 56px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.footer-copy p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--kt-on-cocoa-soft); max-width: 60ch; }
.footer-copy .footer-domain { margin-top: 6px; }
.submark { flex: 0 0 auto; display: block; width: 72px; height: 72px; }

/* ---------- between the two mocks ---------- */
@media (max-width: 1180px) {
  .wrap { padding: 0 40px; }
  .section { padding: 72px 0; }
  .hero-inner { padding-top: 72px; padding-bottom: 72px; gap: 40px; }
  .hero h1 { font-size: 52px; }
  .section-title, .book-title { font-size: 38px; }
  .site-nav { gap: 24px; }
  .service-grid { gap: 0 40px; }
}

/* ---------- the phone mock, 390 wide ---------- */
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  .section { padding: 44px 0; }

  /* header */
  /* With scripting off the links stay in the header and it grows to hold them. */
  .header-inner { height: auto; min-height: 70px; flex-wrap: wrap; }
  .lockup img, .lockup svg { width: 236px; height: 54px; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 46px; padding: 0 4px;
    background: none; border: 0; cursor: pointer;
    font: 600 12px/1 var(--kt-font-sans); letter-spacing: var(--kt-ls-label);
    text-transform: uppercase; color: var(--kt-cocoa);
  }
  .nav-toggle-bars {
    width: 26px; height: 16px; display: block;
    border-top: 1.5px solid var(--kt-cocoa); border-bottom: 1.5px solid var(--kt-cocoa);
  }
  .site-nav { flex-wrap: wrap; gap: 4px 20px; padding: 0 0 16px; }
  .js .site-nav { display: none; }
  .js .site-header.nav-open .site-nav {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--kt-ivory); border-bottom: 1px solid var(--kt-hairline);
    padding: 8px 24px 20px; gap: 4px;
  }
  .js .site-header.nav-open .btn-header { margin-top: 8px; }

  /* hero */
  .hero-inner { flex-direction: column; gap: 18px; padding-top: 44px; padding-bottom: 44px; }
  .hero-copy { gap: 18px; }
  .hero h1 { font-size: 36px; line-height: 1.1; }
  .hero-sub { font-size: 16px; max-width: none; }
  .tagline { font-size: 18px; margin-top: 6px; }
  .actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 0; }
  .btn { width: 100%; min-height: 52px; padding: 16px; }
  .call-link { justify-content: center; font-size: 15px; }
  .hero-photo { display: block; }
  .photo-placeholder { min-height: 150px; font-size: 12px; letter-spacing: .1em; margin-top: 10px; }

  /* Headings: the phone mock carries each section on its small label,
     so the long titles stay in the markup but come off the screen. */
  .section-title {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .eyebrow { font-size: 11px; margin-bottom: 18px; }

  /* how a visit goes, and visit */
  .three-up { grid-template-columns: 1fr; gap: 24px; }
  .ruled { padding-top: 16px; }
  .step-title { font-size: 28px; margin-bottom: 8px; }
  .ruled p { font-size: 16px; }
  .visit-text { font-size: 17px; }
  .eyebrow-sub { font-size: 11px; }

  /* services */
  .service-grid { grid-template-columns: 1fr; gap: 0; }
  .service { padding: 16px 0; }
  .service-head { gap: 14px; }
  .service-name { font-size: 22px; }
  .price { font-size: 15px; }
  .service p { font-size: 15px; margin-top: 5px; }
  .fine-print { font-size: 14px; margin-top: 16px; }

  /* about */
  .about-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .portrait { width: 163px; height: 201px; }
  .bio { font-size: 16px; max-width: none; }

  /* book */
  .book-inner { gap: 14px; }
  .book-title { font-size: 30px; line-height: 1.15; }
  .actions-center { align-self: stretch; }

  /* footer */
  .site-footer { padding: 32px 0; }
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .footer-copy { order: 2; }
  .footer-copy p { font-size: 13px; }
  .submark { order: 1; width: 56px; height: 56px; }
}

@media print {
  .site-header { position: static; }
  .skip-link { display: none; }
}

/* ============================================================
   Rose gold and blush, restored (Shawn and Krista, 2026-09-06).
   The first build stripped rose gold from everything, prices
   included, and the page went brown. The kit permits rose gold
   as a button fill with cocoa text at large-text size, as the
   italic display line, and as rings and rules; blush as panels.
   Cocoa text on rose gold measures 3.93, which passes the
   large-text bar at 18px bold and above, so every button that
   carries it is set that way. Rose gold as small text on ivory
   still fails (2.89), so prices and labels stay cocoa or umber.
   ============================================================ */

/* Book online, everywhere: rose gold with cocoa text */
.btn-primary, .btn-onlight, .btn-header {
  background: var(--kt-rose); color: var(--kt-cocoa);
  font-size: 19px; font-weight: 700; letter-spacing: .02em;
}
.btn-primary:hover, .btn-onlight:hover, .btn-header:hover { background: #C4906F; color: var(--kt-cocoa); }
.btn-header { font-size: 19px; }

/* the outline buttons pick up a rose-gold border on cocoa, cocoa on ivory */
.btn-outline-light { border-color: var(--kt-rose); }
.btn-outline-light:hover { background: rgba(183,130,107,.18); }

/* the hero tagline: her one italic line, rose gold at display size */
.tagline { color: var(--kt-rose); font-size: 24px; }

/* rules and rings carry rose gold */
.site-header { border-bottom-color: var(--kt-rose); }
.ruled { border-top-color: var(--kt-rose); }
.service { border-bottom-color: #D9B9A8; }
.eyebrow::before {
  content: ""; display: block; width: 36px; height: 2px;
  background: var(--kt-rose); margin-bottom: 12px;
}
.eyebrow-sub::before { width: 24px; }

/* the closing Book section sits on blush */
.book { background: var(--kt-blush); }
.book .btn-outline-dark:hover { background: var(--kt-ivory); }

/* Get directions and the call links underline in rose gold */
.directions a, .call-link { text-decoration-color: var(--kt-rose); text-decoration-thickness: 1.5px; }

@media (max-width: 900px) {
  .tagline { font-size: 22px; }
  .btn-primary, .btn-onlight { font-size: 19px; }
}

/* ---- Shawn's ruling, 2026-09-06: buttons are blush; rose gold goes back
   where the mock had it, prices included. Cocoa on blush measures 9.08. ---- */
.btn-primary, .btn-onlight, .btn-header {
  background: var(--kt-blush); color: var(--kt-cocoa);
  font-size: 18px; font-weight: 600;
}
.btn-primary:hover, .btn-onlight:hover, .btn-header:hover { background: #E0C6BA; color: var(--kt-cocoa); }
.btn-header { font-size: 17px; }
.btn-outline-light { border-color: var(--kt-blush); }
.book { background: var(--kt-cream); }
.book .btn-primary { background: var(--kt-blush); }
.book .btn-outline-dark:hover { background: var(--kt-blush); }
/* prices in rose gold, as drawn in the kit's mock */
.price { color: var(--kt-rose); }
/* the About panel stays blush; the visit-steps band picks up blush too */
.section-blush { background: var(--kt-blush); }
@media (max-width: 900px) {
  .btn-primary, .btn-onlight { font-size: 18px; }
}

/* softer corners (Shawn, 2026-09-06): the radius token moves from 2px to 10px,
   and the pieces that were drawn square follow it */
.btn, .nav-toggle, .skip-link { border-radius: var(--kt-radius); }
.photo-placeholder { border-radius: var(--kt-radius); }
.portrait { border-radius: var(--kt-radius); }
.js .site-header.nav-open .site-nav { border-radius: 0 0 var(--kt-radius) var(--kt-radius); }

/* Anchors land below the sticky header (Shawn, 2026-09-06: the logo click
   was landing with the hero tucked under the header). #top goes to the true top. */
html { scroll-padding-top: 133px; }
@media (max-width: 900px) { html { scroll-padding-top: 90px; } }