/* ============================================================
   ChristinaFletcher.com shared stylesheet for Mockup v2
   Design tokens and component classes per the build contract.
   The visual system is extracted from the approved rendered
   pages and must not drift. Pages may add small page-specific
   style blocks but must reuse these custom properties.
   ============================================================ */

/* ---------- Design tokens ---------- */

:root {
  /* Color */
  --cf-cream: #F5F1EB;
  --cf-paper: #EAE0CE;
  --cf-ink: #231A15;
  --cf-body: #4F4338;
  --cf-muted: #6E5D4C;
  --cf-muted-soft: #8A7765;
  --cf-terracotta: #C56A53;
  --cf-terracotta-deep: #A8503B;
  --cf-teal: #2E5D62;
  --cf-teal-deep: #244A4E;
  --cf-gold: #C9A24A;
  --cf-gold-light: #D9B25E;
  --cf-clay: #A99285;
  --cf-blush: #EEC6AF;
  --cf-dark: #231A15;
  --cf-footer: #1C1410;
  --cf-footer-text: #E2D5C2;
  --cf-footer-muted: #B6A892;
  --cf-dark-body: #D8C8B4;
  --cf-dark-heading: #FBF3E4;
  --cf-line: #E0CFB4;
  --cf-rule: #E0D6C4;

  /* Type */
  --cf-serif: 'Libre Baskerville', Georgia, serif;
  --cf-sans: 'Poppins', system-ui, sans-serif;
  --cf-script-font: 'Silhouetto', 'Caveat', cursive;
  --cf-fs-h1: clamp(40px, 5.4vw, 74px);
  --cf-fs-h2: clamp(30px, 3.8vw, 52px);
  --cf-fs-h3: 21px;
  --cf-fs-lede: 19px;
  --cf-fs-body: 17px;
  --cf-fs-small: 15px;
  --cf-fs-fine: 13px;

  /* Spacing */
  --cf-space-xs: 8px;
  --cf-space-sm: 16px;
  --cf-space-md: 24px;
  --cf-space-lg: 40px;
  --cf-space-xl: 64px;
  --cf-space-2xl: 100px;

  /* Effects */
  --cf-shadow-card: 0 8px 22px rgba(35, 26, 21, 0.07);
  --cf-shadow-lift: 0 10px 26px rgba(35, 26, 21, 0.14);
  --cf-radius: 3px;

  /* Motion. Slow, watery, nearly subconscious. Warm espresso
     tinted shadows, never hard gray or black. */
  --cf-ease: cubic-bezier(0.33, 0.72, 0.3, 1);
  --cf-dur-hover: 260ms;
  --cf-dur-reveal: 640ms;
  --cf-shadow-card-hover: 0 14px 30px rgba(43, 31, 20, 0.12);
  --cf-shadow-lift-hover: 0 16px 34px rgba(43, 31, 20, 0.19);
}

/* ---------- Fonts ---------- */

@font-face {
  font-family: 'Silhouetto';
  src: url('Silhouetto-Script.otf') format('opentype');
  font-display: swap;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--cf-paper);
  color: var(--cf-ink);
  font-family: var(--cf-sans);
  font-size: var(--cf-fs-body);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }

::selection {
  background: var(--cf-terracotta);
  color: var(--cf-cream);
}

/* Visible focus everywhere, with a light variant on dark surfaces */

:focus-visible {
  outline: 2px solid var(--cf-teal);
  outline-offset: 2px;
}

.cf-section--dark :focus-visible,
.cf-section--terracotta :focus-visible,
.cf-footer :focus-visible {
  outline-color: var(--cf-cream);
}

/* ---------- Skip link ---------- */
/* Hidden until focused, then pinned top left with high contrast */

.cf-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  font-family: var(--cf-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--cf-cream);
  background: var(--cf-teal-deep);
  padding: 12px 20px;
  border-radius: 0 0 var(--cf-radius) 0;
}

.cf-skip:focus {
  left: 0;
}

/* ---------- Header ---------- */

.cf-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(234, 224, 206, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.cf-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cf-brand {
  text-decoration: none;
  display: block;
  flex: none;
}

.cf-brand img {
  height: 72px;
  width: auto;
  display: block;
}

.cf-squiggle {
  display: block;
  width: 100%;
  height: 9px;
}

/* ---------- Primary nav, desktop row above 880px ---------- */

.cf-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.cf-nav a:not(.cf-btn) {
  font-family: var(--cf-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cf-ink);
  padding: 8px 2px;
  transition: color 160ms ease;
}

.cf-nav a:not(.cf-btn):hover,
.cf-nav a[aria-current="page"]:not(.cf-btn) {
  color: var(--cf-terracotta);
}

.cf-nav .cf-btn {
  font-size: 12px;
  letter-spacing: 0.13em;
  padding: 11px 20px;
}

/* ---------- Hamburger button, hidden above 880px ---------- */

.cf-menu-btn {
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid rgba(35, 26, 21, 0.25);
  border-radius: var(--cf-radius);
  cursor: pointer;
  font-family: var(--cf-sans);
  color: var(--cf-ink);
}

.cf-menu-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Three bar hamburger icon drawn with one span */

.cf-menu-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--cf-ink);
  transition: background 160ms ease;
}

.cf-menu-icon::before,
.cf-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--cf-ink);
  transition: transform 160ms ease;
}

.cf-menu-icon::before { top: -6px; }
.cf-menu-icon::after { top: 6px; }

/* Icon becomes an X while the panel is open */

.cf-menu-btn[aria-expanded="true"] .cf-menu-icon {
  background: transparent;
}

.cf-menu-btn[aria-expanded="true"] .cf-menu-icon::before {
  transform: translateY(6px) rotate(45deg);
}

.cf-menu-btn[aria-expanded="true"] .cf-menu-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

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

.cf-btn {
  display: inline-block;
  font-family: var(--cf-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--cf-cream);
  background: var(--cf-teal);
  padding: 15px 28px;
  border: 0;
  border-radius: var(--cf-radius);
  cursor: pointer;
  transition: background 160ms ease;
}

.cf-btn:hover {
  background: var(--cf-teal-deep);
}

.cf-btn--terracotta {
  background: var(--cf-terracotta);
}

.cf-btn--terracotta:hover {
  background: var(--cf-terracotta-deep);
}

/* Tactile button motion. A whisper of lift on hover, settled
   again on press. The translate property is used everywhere for
   motion so the design's rotated tape and script transforms are
   never overwritten. */

.cf-btn:not(.cf-btn--ghost) {
  box-shadow: 0 6px 16px rgba(43, 31, 20, 0.10);
  transition:
    background var(--cf-dur-hover) var(--cf-ease),
    translate var(--cf-dur-hover) var(--cf-ease),
    box-shadow var(--cf-dur-hover) var(--cf-ease);
}

.cf-btn:not(.cf-btn--ghost):hover {
  translate: 0 -1.5px;
  box-shadow: var(--cf-shadow-lift-hover);
}

.cf-btn:not(.cf-btn--ghost):active {
  translate: 0 0;
  box-shadow: 0 5px 12px rgba(43, 31, 20, 0.12);
}

/* Ghost variant, the gold underline text link from the source pages */

.cf-btn--ghost {
  background: transparent;
  color: var(--cf-terracotta);
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 0 0 3px;
  border-radius: 0;
  border-bottom: 2px solid var(--cf-gold);
  transition: color 160ms ease;
}

.cf-btn--ghost:hover {
  background: transparent;
  color: var(--cf-terracotta-deep);
}

/* ---------- Sections and containers ---------- */

.cf-section {
  padding: var(--cf-space-2xl) 0;
}

.cf-section--blush {
  background: var(--cf-blush);
  position: relative;
  overflow: hidden;
}

.cf-section--dark {
  background: var(--cf-dark);
  color: #EFE3D2;
  position: relative;
  overflow: hidden;
}

.cf-section--dark .cf-h1,
.cf-section--dark .cf-h2 {
  color: var(--cf-dark-heading);
}

.cf-section--dark .cf-lede,
.cf-section--dark p {
  color: var(--cf-dark-body);
}

.cf-section--dark .cf-eyebrow {
  color: var(--cf-gold-light);
}

.cf-section--terracotta {
  background: var(--cf-terracotta);
  color: #FBF3E8;
}

.cf-section--terracotta .cf-h1,
.cf-section--terracotta .cf-h2,
.cf-section--terracotta p {
  color: #FBF3E8;
}

.cf-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- Typography ---------- */

.cf-eyebrow {
  font-family: var(--cf-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cf-terracotta-deep);
  margin: 0 0 16px;
}

.cf-script {
  font-family: var(--cf-script-font);
  color: var(--cf-teal);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.15;
  display: inline-block;
  transform: rotate(-1deg);
  padding: 0.05em 0.1em;
}

.cf-script-gold {
  font-family: var(--cf-script-font);
  color: var(--cf-gold-light);
  font-size: 1.45em;
  line-height: 1.1;
}

.cf-h1 {
  font-family: var(--cf-serif);
  font-weight: 400;
  font-size: var(--cf-fs-h1);
  line-height: 1.02;
  letter-spacing: -1px;
  margin: 0;
  color: var(--cf-ink);
  text-wrap: balance;
}

.cf-h2 {
  font-family: var(--cf-serif);
  font-weight: 400;
  font-size: var(--cf-fs-h2);
  line-height: 1.08;
  margin: 0 0 18px;
  color: var(--cf-ink);
  text-wrap: balance;
}

.cf-lede {
  font-size: var(--cf-fs-lede);
  line-height: 1.72;
  color: var(--cf-body);
  text-wrap: pretty;
}

/* ---------- Cards ---------- */

.cf-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.cf-card {
  background: #FFFFFF;
  border-top: 4px solid var(--cf-teal);
  padding: 30px 26px 32px;
  box-shadow: var(--cf-shadow-card);
}

.cf-card[data-accent="terracotta"] { border-top-color: var(--cf-terracotta); }
.cf-card[data-accent="gold"] { border-top-color: var(--cf-gold); }
.cf-card[data-accent="clay"] { border-top-color: var(--cf-clay); }
.cf-card[data-accent="teal"] { border-top-color: var(--cf-teal); }

.cf-card h3 {
  font-family: var(--cf-serif);
  font-weight: 600;
  font-size: var(--cf-fs-h3);
  margin: 8px 0 6px;
  color: var(--cf-ink);
}

.cf-card p {
  font-size: var(--cf-fs-small);
  line-height: 1.6;
  margin: 0;
  color: var(--cf-muted);
}

/* ---------- Collaborator reflection quote ---------- */

.cf-quote {
  background: #FFFFFF;
  padding: 32px 30px;
  box-shadow: var(--cf-shadow-card);
  display: flex;
  flex-direction: column;
}

.cf-quote::before {
  content: "\201C";
  font-family: var(--cf-serif);
  font-style: italic;
  font-size: 54px;
  line-height: 0.4;
  color: var(--cf-gold);
  height: 26px;
}

.cf-quote p {
  font-size: 16.5px;
  line-height: 1.62;
  margin: 0 0 22px;
  color: #3F352C;
}

.cf-quote-name {
  font-family: var(--cf-serif);
  font-weight: 600;
  font-size: 16px;
  margin: auto 0 0;
  color: var(--cf-ink);
}

.cf-quote-role {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cf-clay);
  margin: 3px 0 0;
}

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

.cf-footer {
  background: var(--cf-footer);
  color: var(--cf-footer-text);
  padding: 80px 0 40px;
}

.cf-footer-grid {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr;
  gap: 48px;
}

.cf-footer-grid img {
  height: 72px;
  width: auto;
  display: block;
  margin: 0 0 18px -2px;
}

.cf-footer-tag {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--cf-footer-muted);
  max-width: 42ch;
  margin: 0;
}

.cf-footer-heading {
  font-family: var(--cf-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cf-muted-soft);
  margin: 0 0 16px;
}

.cf-footer-links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.cf-footer-links a {
  text-decoration: none;
  color: var(--cf-footer-text);
  font-size: 15px;
  transition: color 160ms ease;
}

.cf-footer-links a:hover {
  color: var(--cf-gold-light);
}

.cf-footer .cf-btn {
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 13px 24px;
}

.cf-footer-legal {
  max-width: 1080px;
  margin: 56px auto 0;
  padding: 22px 40px 0;
  border-top: 1px solid #3A2D22;
  text-align: center;
}

.cf-footer-legal p {
  font-size: 13px;
  color: var(--cf-muted-soft);
  margin: 0;
}

/* ---------- Mobile, at and below 880px ---------- */

@media (max-width: 880px) {

  /* Tighter section rhythm and container padding */
  .cf-section { padding: var(--cf-space-xl) 0; }
  .cf-container { padding: 0 20px; }
  .cf-header-inner { padding: 12px 20px; }
  .cf-brand img { height: 56px; }

  /* Hero script accents shrink instead of clipping */
  .cf-script { font-size: clamp(24px, 6.5vw, 32px); }

  /* Hamburger appears */
  .cf-menu-btn { display: inline-flex; }

  /* Nav becomes a slide down panel anchored under the header */
  .cf-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(234, 224, 206, 0.98);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 8px 20px 24px;
    border-bottom: 1px solid var(--cf-line);
    box-shadow: 0 18px 30px rgba(35, 26, 21, 0.14);
  }

  .cf-nav.is-open {
    display: flex;
    animation: cfNavSlide 200ms ease;
  }

  /* Comfortable 44px minimum touch targets */
  .cf-nav a:not(.cf-btn) {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 13px;
    border-bottom: 1px solid rgba(224, 207, 180, 0.6);
  }

  .cf-nav .cf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 14px;
  }

  /* Card grids stack */
  .cf-card-grid { grid-template-columns: 1fr; }

  /* Footer stacks */
  .cf-footer { padding: 56px 0 32px; }
  .cf-footer-grid { grid-template-columns: 1fr; gap: 36px; padding: 0 20px; }
  .cf-footer-legal { padding: 22px 20px 0; }
  .cf-footer-links a { min-height: 44px; display: flex; align-items: center; }
}

@keyframes cfNavSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Motion and depth
   Calm, organic, lightly alive. Everything below favors
   opacity, tiny translate moves, and gentle shadow shifts.
   Nothing bounces, snaps, spins, flashes, or zooms.
   ============================================================ */

/* ---------- Card and paper lift on hover ---------- */
/* Cards, testimonial blocks, deliverable panels, and paper
   style elements get a 3px lift with a soft warm shadow. */

.cf-card, .cf-quote,
.pg-asset, .pg-account, .pg-pillar, .pg-check-card, .pg-brc-card, .pg-note-card, .pg-quote-dark,
.hih-item, .hih-next-card, .hih-fit-card, .hih-quote,
.ab-quote, .ab-rail-item,
.lt-reassure {
  transition:
    translate var(--cf-dur-hover) var(--cf-ease),
    box-shadow var(--cf-dur-hover) var(--cf-ease);
}

.cf-card:hover, .cf-quote:hover,
.pg-asset:hover, .pg-account:hover, .pg-pillar:hover, .pg-check-card:hover, .pg-brc-card:hover, .pg-note-card:hover, .pg-quote-dark:hover,
.hih-item:hover, .hih-next-card:hover, .hih-fit-card:hover, .hih-quote:hover,
.ab-quote:hover, .ab-rail-item:hover,
.lt-reassure:hover {
  translate: 0 -3px;
  box-shadow: var(--cf-shadow-card-hover);
}

/* ---------- Editorial photos ---------- */
/* The taped photo frames get a slightly stronger presence on
   hover, shadow only, keeping the tactile paper feeling. */

.pg-photo, .ab-portrait-frame, .pg-quote-photo {
  transition:
    translate 320ms var(--cf-ease),
    box-shadow 320ms var(--cf-ease);
}

.pg-photo:hover, .ab-portrait-frame:hover, .pg-quote-photo:hover {
  translate: 0 -2px;
  box-shadow: var(--cf-shadow-lift-hover);
}

/* ---------- Scroll reveals ---------- */
/* The class is added by site.js, so content is never hidden
   when JavaScript is unavailable. Fade plus a small rise. */

.cf-reveal {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity var(--cf-dur-reveal) var(--cf-ease),
    translate var(--cf-dur-reveal) var(--cf-ease);
}

.cf-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Decorative Circle drift ---------- */
/* A quiet thread. Selected background circles drift a few
   pixels over long durations. site.js applies the class to
   alternating decorative circles only, never all at once. */

@keyframes cfDrift {
  from { translate: 0 0; }
  to { translate: 7px -9px; }
}

.cf-drift {
  animation: cfDrift 26s var(--cf-ease) infinite alternate;
}

/* ---------- Hand drawn underline draw ---------- */
/* Requires pathLength="1" on the path. Used on the three hero
   underlines only, triggered shortly after load by site.js. */

path.cf-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--cf-ease) 250ms;
}

path.cf-draw.is-visible {
  stroke-dashoffset: 0;
}

/* ---------- Reduced motion ---------- */
/* Transitions and the panel animation are disabled entirely */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  html { scroll-behavior: auto; }

  /* Reveals render fully visible, underlines render fully
     drawn, circles hold still, and hover lifts are removed so
     only instant essential state changes remain. */
  .cf-reveal { opacity: 1 !important; translate: none !important; }
  path.cf-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .cf-drift { animation: none !important; }
  *:hover { translate: none !important; }
}