@import url("strips.css");
/* christo.studio shared system v1
   Single source for every page. Values mirror Source/design_tokens.md.
   Framer mapping: each :root variable becomes a Framer color/number variable;
   each .t-* class becomes a Framer text style. Layout uses flex stacks and
   simple grids only, so pages translate to Framer stacks one-to-one. */

@import url("https://api.fontshare.com/v2/css?f[]=satoshi@500,700,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* core palette (locked) */
  --matte: #152024;
  --charcoal: #04445E;
  --butterscotch: #E18B00;
  --copper: #BB6100;
  --off-white: #F8F3F2;
  /* derived */
  --deep: #0F181B;
  --text-2: rgba(248, 243, 242, 0.8);
  --muted: #A7AEAC;
  --rule: rgba(248, 243, 242, 0.12);
  --rule-accent: rgba(225, 139, 0, 0.32);
  --header-bg: rgba(21, 32, 36, 0.88);

  --display: "Satoshi", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --body: "Inter", "Segoe UI", Arial, sans-serif;

  --page: 1180px;
  --gutter: 48px;
  --read: 680px;
  --rail: 220px;
  --rail-gap: 80px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 180ms;
  --std: 280ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--matte); scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--matte);
  color: var(--text-2);
  font: 400 18px/1.66 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--butterscotch); color: var(--matte); }
:focus-visible { outline: 2px solid var(--butterscotch); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(var(--page), calc(100% - var(--gutter) * 2)); margin-inline: auto; }

/* ---------- text styles ---------- */
.t-display { margin: 0; font: 750 clamp(64px, 8vw, 120px)/0.92 var(--display); letter-spacing: -0.05em; color: var(--off-white); }
.t-h2 { margin: 0; font: 700 clamp(38px, 5vw, 62px)/1.03 var(--display); letter-spacing: -0.04em; color: var(--off-white); }
.t-h3 { margin: 0; font: 700 clamp(26px, 3vw, 36px)/1.12 var(--display); letter-spacing: -0.025em; color: var(--off-white); }
.t-lead { margin: 0; font: 600 clamp(22px, 2.2vw, 30px)/1.38 var(--display); letter-spacing: -0.012em; color: var(--off-white); }
.t-body { margin: 0; }
.t-small { font: 500 13px/1.5 var(--body); color: var(--muted); }
.t-label { display: block; font: 700 12px/1.4 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--butterscotch); }

/* ---------- links and buttons ---------- */
.link {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--off-white); text-decoration: none; font: 600 16px/1.3 var(--body);
  background: linear-gradient(var(--butterscotch), var(--butterscotch)) 0 100% / 0 2px no-repeat;
  padding-bottom: 4px; transition: background-size var(--std) var(--ease);
}
.link::after { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--butterscotch); border-right: 2px solid var(--butterscotch); transform: rotate(45deg); transition: transform var(--fast) var(--ease); }
.link:hover { background-size: 100% 2px; }
.link:hover::after { transform: translateX(3px) rotate(45deg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: 5px; border: 1px solid transparent; font: 650 15px/1 var(--body); text-decoration: none; cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--butterscotch); color: var(--matte); }
.btn--primary:hover { background: #CC7A00; }
.btn--secondary { background: transparent; color: var(--off-white); border-color: rgba(248, 243, 242, 0.28); }
.btn--secondary:hover { border-color: rgba(248, 243, 242, 0.6); background: rgba(248, 243, 242, 0.04); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--rule); }
.site-header--over { position: fixed; inset: 0 0 auto; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; transition: background-color var(--std) var(--ease), border-color var(--std) var(--ease); }
.site-header--over.is-scrolled { background: var(--header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--rule); }
.header-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.wordmark { font: 760 15px/1 var(--display); letter-spacing: 0.06em; color: var(--off-white); text-decoration: none; }
.wordmark span { color: var(--butterscotch); }
.primary-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 40px); }
.primary-nav a, .primary-nav button {
  position: relative; padding: 8px 0; background: none; border: 0; cursor: pointer;
  color: var(--text-2); font: 600 14px/1 var(--body); text-decoration: none; transition: color var(--fast) var(--ease);
}
.primary-nav a:hover, .primary-nav button:hover { color: var(--off-white); }
/* current page = Butterscotch text, no dot. Contact gets no special color. */
.primary-nav a[aria-current="page"], .primary-nav a[aria-current="page"]:hover { color: var(--butterscotch); }
.menu-toggle { display: none; }

/* ---------- signal rail (Approach, Work, Resume) ---------- */
.page-shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--rail-gap); align-items: start; }
.rail { position: sticky; top: 112px; max-height: calc(100vh - 140px); overflow-y: auto; scrollbar-width: none; padding: 4px 0 8px 22px; border-left: 1px solid var(--rule-accent); }
.rail-group { display: block; margin: 26px 0 12px; color: var(--muted); font: 600 11px/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; }
.rail-group:first-child { margin-top: 0; }
.rail a { position: relative; display: block; margin-bottom: 12px; color: var(--muted); font: 500 14px/1.35 var(--body); text-decoration: none; transition: color var(--fast) var(--ease); }
.rail a::before { content: ""; position: absolute; top: 0.42em; left: -27px; width: 9px; height: 9px; border-radius: 50%; background: var(--butterscotch); transform: scale(0); transition: transform var(--fast) var(--ease); }
.rail a:hover, .rail a.is-active { color: var(--off-white); }
.rail a.is-active::before { transform: scale(1); }
.rail a small { display: block; color: var(--butterscotch); font: 650 11px/1.3 var(--body); letter-spacing: 0.04em; margin-bottom: 2px; }

/* ---------- film-strip page header (Approach, Work, Resume) ---------- */
/* Content is anchored to the top (not the bottom) so the kicker, title, and rule land at the
   same height on every page, whatever sits below them. Contact matches these numbers. */
.film-hero { position: relative; display: flex; align-items: flex-start; overflow: hidden; background: var(--deep); }
/* The strip keeps a fixed height (so panels and --zoom look the same on every page) while the
   header itself is only as tall as its text. The scrims fade the strip out before the header ends. */
.film-strip { position: absolute; inset: 0 0 auto; height: clamp(600px, 82vh, 820px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.film-strip .strip-cell { position: relative; margin: 0; overflow: hidden; min-width: 0; background: var(--matte); }
/* Each panel reads --x, --y, --zoom, --bright from assets/strips.css.
   --zoom is measured against the panel height: 1 = image fills the panel top to bottom,
   below 1 = pull back to show more of the image (it sits at --y and dissolves into the dark at its lower edge),
   above 1 = push in. */
.film-strip img { position: absolute; left: var(--x, 50%); top: var(--y, 0%); display: block; max-width: none;
  height: calc(100% * var(--zoom, 1)); width: auto; min-width: calc(100% * var(--zoom, 1)); object-fit: cover; object-position: var(--x, 50%) var(--y, 0%);
  transform: translate(calc(var(--x, 50%) * -1), calc(var(--y, 0%) * -1));
  filter: saturate(0.85) brightness(var(--bright, 1));
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
/* Two scrims. Tune here; all three pages follow.
   --scrim-fade: distance above the title baseline where the bottom scrim reaches 0.
   --scrim-top / --scrim-top-h: nav-legibility scrim at the top edge (fades to 0). */
.film-hero { --scrim-fade: clamp(200px, 20vw, 290px); --scrim-top: 0.72; --scrim-top-h: 200px; }
.film-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(21, 32, 36, var(--scrim-top)) 0, rgba(21, 32, 36, calc(var(--scrim-top) * 0.6)) calc(var(--scrim-top-h) * 0.4), rgba(21, 32, 36, 0) var(--scrim-top-h)); }
/* Bottom scrim is anchored to the title, so it lands at the same place on every page. */
.film-hero h1 { position: relative; }
.film-hero h1::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: -100vw; right: -100vw; top: calc(100% - var(--scrim-fade)); bottom: -1200px;
  background: linear-gradient(180deg, rgba(21, 32, 36, 0) 0, rgba(21, 32, 36, 0.4) calc(var(--scrim-fade) * 0.35), rgba(21, 32, 36, 0.75) calc(var(--scrim-fade) * 0.65), rgba(21, 32, 36, 0.9) var(--scrim-fade), var(--matte) calc(var(--scrim-fade) + 260px)); }
.film-hero-inner { position: relative; z-index: 1; width: min(var(--page), calc(100% - var(--gutter) * 2)); margin-inline: auto; padding: 180px 0 clamp(40px, 5vw, 64px); }
.film-kicker { display: block; margin-bottom: 14px; color: var(--butterscotch); font: 650 17px/1.3 var(--display); letter-spacing: -0.005em; text-shadow: 0 1px 14px rgba(21, 32, 36, 0.7); }
.film-hero h1 { margin: 0 0 clamp(28px, 4vw, 44px); font: 760 clamp(76px, 11vw, 168px)/0.86 var(--display); letter-spacing: -0.06em; color: var(--off-white); }
.film-cols { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-top: 28px; border-top: 1px solid rgba(248, 243, 242, 0.22); }
.film-cols .t-lead { max-width: 24ch; }
.film-cols p:not(.t-lead) { margin: 0; color: rgba(248, 243, 242, 0.84); }

/* Header list under the lead (Approach commitments, Work cases). Orange key word, linked.
   The paragraph on the right is vertically centered on the left block (Oct 13; was last-baseline).
   Approach indents it to drop from the period after "lead."; Work uses a short indent (longer titles). */
.hero-commits { list-style: none; margin: 14px 0 0; padding: 0 0 0 7.2em; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; }
.hero-commits--cases { padding-left: 1.4em; }
.film-cols:has(.hero-commits) { align-items: center; }
.film-cols:has(.hero-commits) > p { max-width: 46ch; }
.hero-commits a { display: inline-block; padding: 3px 0; color: var(--off-white); text-decoration: none; font: 650 clamp(20px, 1.9vw, 25px)/1.35 var(--display); letter-spacing: -0.012em; }
.hero-commits b { color: var(--butterscotch); font-weight: 750; }
.hero-commits a:hover { text-decoration: underline; text-decoration-color: var(--butterscotch); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---------- shared long-form pieces ---------- */
.chapter-no { display: block; margin-bottom: 18px; color: var(--butterscotch); font: 750 15px/1 var(--display); letter-spacing: 0.02em; }

/* ---------- next chapter (one component on every page) + footer ---------- */
.next-chapter { border-top: 1px solid var(--rule); }
.next-chapter > div { display: flex; justify-content: flex-end; padding: clamp(56px, 7vw, 96px) 0; }
.next-chapter--inline { border-top: 0; }
.next-chapter--inline > div { padding: 0; }
.next-link { display: inline-flex; align-items: center; gap: 22px; text-align: right; text-decoration: none; }
.next-text { display: flex; flex-direction: column; }
.next-kicker { color: var(--muted); font: 500 14px/1.4 var(--body); }
.next-title { color: var(--off-white); font: 750 clamp(32px, 3.4vw, 48px)/1.05 var(--display); letter-spacing: -0.035em; transition: color var(--fast) var(--ease); }
.next-arrow { flex: none; position: relative; width: 60px; height: 60px; border: 1.5px solid var(--butterscotch); border-radius: 50%; transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.next-arrow::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; margin: -6px 0 0 -8px; border-top: 2px solid var(--butterscotch); border-right: 2px solid var(--butterscotch); transform: rotate(45deg); }
.next-link:hover .next-title, .next-link:focus-visible .next-title { color: var(--butterscotch); }
.next-link:hover .next-arrow { background: rgba(225, 139, 0, 0.14); transform: translateX(3px); }

.site-footer { background: var(--deep); border-top: 1px solid var(--rule); padding: 56px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.footer-grid h2 { margin: 0 0 14px; font: 700 13px/1.4 var(--body); color: var(--off-white); }
.footer-grid p, .footer-grid li { margin: 0; font-size: 15px; line-height: 1.9; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid a { color: var(--text-2); text-decoration: none; }
.footer-grid a:hover { color: var(--off-white); text-decoration: underline; text-decoration-color: var(--butterscotch); text-underline-offset: 4px; }
.footer-base { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 13px; }

/* ---------- availability line (one component: Home, Resume header, footer) ---------- */
.availability { margin: 0; color: var(--off-white); font: 500 15px/1.6 var(--body); }
.availability .avail-dot { display: inline-block; margin-right: 12px; vertical-align: 0.08em; }
.availability .avail-link { margin-left: 8px; white-space: nowrap; }
.avail-dot { flex: none; position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--butterscotch); box-shadow: 0 0 0 4px rgba(225, 139, 0, 0.18); }
.avail-link { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--butterscotch); text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: color var(--fast) var(--ease); }
.avail-link:hover { color: var(--butterscotch); }
.film-hero .availability { margin-top: 26px; text-shadow: 0 1px 14px rgba(21, 32, 36, 0.7); }
/* Resume: status sits under the right paragraph, link on its own line under the text */
.availability--stack { display: grid; grid-template-columns: 8px 1fr; column-gap: 12px; margin-top: 24px !important; }
.availability--stack .avail-dot { margin: 0.6em 0 0; }
.availability--stack .avail-link { grid-column: 2; justify-self: start; margin: 6px 0 0; }
/* footer availability box: Butterscotch outline, links to Contact */
.footer-grid a.footer-avail { display: inline-flex; align-items: baseline; gap: 12px; max-width: 30ch; margin-top: 24px; padding: 12px 16px; border: 1px solid var(--butterscotch); border-radius: 5px; color: var(--off-white); font: 500 14px/1.5 var(--body); text-decoration: none; transition: background-color var(--fast) var(--ease); }
.footer-avail .avail-dot { transform: translateY(-1px); }
.footer-grid a.footer-avail:hover { background: rgba(225, 139, 0, 0.1); text-decoration: none; }
/* solid variant (comparison only): add class footer-avail--solid */
.footer-grid a.footer-avail--solid { background: var(--butterscotch); color: var(--matte); font-weight: 600; }
.footer-grid a.footer-avail--solid:hover { background: #CC7A00; }
.footer-avail--solid .avail-dot { background: var(--matte); box-shadow: none; }

/* ---------- copy button (Contact page) ---------- */
.copy-btn { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid rgba(248, 243, 242, 0.24); border-radius: 4px; background: none; color: var(--text-2); font-size: 13px; cursor: pointer; }
.copy-btn:hover { border-color: var(--butterscotch); color: var(--off-white); }

/* ---------- mockup review flags (remove before Framer) ---------- */
.flag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px; background: rgba(225, 139, 0, 0.16); color: var(--butterscotch); font: 700 11px/1.5 var(--body); vertical-align: middle; cursor: help; }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  :root { --gutter: 24px; }
  body { font-size: 17px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--off-white); font: 600 14px/1 var(--body); cursor: pointer; }
  .menu-toggle span { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .primary-nav { position: fixed; inset: 72px 0 auto; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px; background: var(--matte); border-bottom: 1px solid var(--rule); display: none; }
  .primary-nav.is-open { display: flex; }
  .primary-nav a, .primary-nav button { padding: 18px 0; font-size: 20px; text-align: left; border-bottom: 1px solid var(--rule); }
  .page-shell { display: block; }
  .rail { display: none; }
  .film-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; }
  .film-strip { height: 640px; }
  .film-hero-inner { padding-top: 220px; }
  .film-cols { grid-template-columns: 1fr; gap: 18px; }
  .hero-commits { padding-left: 1.4em; }
  .film-cols:has(.hero-commits) { align-items: start; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .next-arrow { width: 52px; height: 52px; }
  .next-chapter--inline .next-link { flex-direction: row-reverse; text-align: left; }
}
@media (max-width: 400px) { :root { --gutter: 20px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}