:root {
  --paper: #f6f2e8;
  --paper-soft: #fffdf8;
  --ink: #131210;
  --muted: rgba(19, 18, 16, 0.58);
  --line: rgba(19, 18, 16, 0.17);
  --blue: #302d9f;
  --bright-blue: #4254e6;
  --pink: #edc5e4;
  --yellow: #f5df72;
  --serif: "Times New Roman", Times, Georgia, serif;
  --sans: Arial, Helvetica, sans-serif;
  --edge: clamp(18px, 3.8vw, 58px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 16px; line-height: 1.42; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin-top: 0; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 8px 12px; background: var(--ink); color: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.project-header { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 74px; padding: 14px var(--edge); border-bottom: 1px solid var(--line); }
.brand-mark { display: block; width: 112px; height: 34px; color: #002fa7; }
.brand-mark span { display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: url("../assets/tafa-wordmark-v3-mask.png") center / contain no-repeat; mask: url("../assets/tafa-wordmark-v3-mask.png") center / contain no-repeat; }
.project-header nav, .hero-labels, .section-label, .ritual-flow span, .feature-card span, .roadmap-grid span, .project-close > p, .project-close a, .project-footer { font-family: var(--sans); font-size: 11px; letter-spacing: 0.09em; line-height: 1.2; text-transform: uppercase; }
.project-header nav { display: flex; gap: clamp(18px, 2.7vw, 40px); }
.project-header a, .hero-link, .project-close a, .project-footer a { position: relative; }
.project-header a::after, .hero-link::after, .project-close a::after, .project-footer a::after { position: absolute; right: 0; bottom: -5px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform 200ms ease; }
.project-header a:hover::after, .project-header a:focus-visible::after, .hero-link:hover::after, .hero-link:focus-visible::after, .project-close a:hover::after, .project-close a:focus-visible::after, .project-footer a:hover::after, .project-footer a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.project-hero { min-height: min(780px, calc(100svh - 74px)); padding: 24px var(--edge) 30px; }
.hero-labels { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); }
.hero-layout { display: grid; min-height: min(620px, calc(100svh - 190px)); grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.55fr); align-items: center; gap: clamp(30px, 6vw, 100px); }
.hero-copy h1 { margin: 0; font-size: clamp(62px, 9.2vw, 132px); font-weight: 400; letter-spacing: -0.06em; line-height: 0.79; text-transform: uppercase; }
.hero-copy > p { max-width: 500px; margin: clamp(26px, 3vw, 42px) 0 0 auto; color: var(--muted); font-size: clamp(20px, 2.1vw, 30px); line-height: 1.1; }
.oracle-portrait { display: grid; width: min(270px, 22vw); margin: 0; padding: clamp(12px, 2vw, 24px); border-radius: 50%; background: var(--pink); place-items: center; }
.oracle-portrait img { width: 100%; border-radius: 50%; mix-blend-mode: multiply; }
.hero-link { display: inline-block; padding-bottom: 5px; color: var(--blue); font-family: var(--sans); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; }
.hero-link::after { transform: scaleX(1); }

.intro-note { display: grid; grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr); gap: clamp(28px, 7vw, 120px); padding: clamp(48px, 6vw, 82px) var(--edge); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-soft); }
.section-label { color: var(--muted); }
.intro-note > p:last-child { max-width: 900px; margin: 0; font-size: clamp(28px, 3.5vw, 50px); letter-spacing: -0.035em; line-height: 1.02; }

.daily-loop, .personal-section { padding: clamp(48px, 6vw, 84px) var(--edge); border-bottom: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: minmax(90px, 0.35fr) minmax(0, 1fr) minmax(220px, 0.52fr); gap: clamp(24px, 5vw, 86px); align-items: start; margin-bottom: clamp(36px, 4vw, 58px); }
.section-heading h2 { margin: 0; font-size: clamp(42px, 5vw, 72px); font-weight: 400; letter-spacing: -0.045em; line-height: 0.9; }
.section-heading > p:last-child { max-width: 340px; margin: 0; color: var(--muted); font-size: 16px; }
.ritual-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ritual-flow article { min-width: 0; padding: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.icon-stage { display: grid; height: 150px; margin: -16px -16px 14px; overflow: hidden; background: var(--paper-soft); place-items: center; }
.icon-stage img { width: 76px; max-height: 84px; object-fit: contain; mix-blend-mode: multiply; }
.ritual-flow span, .feature-card span { color: var(--muted); }
.ritual-flow h3 { min-height: 2em; margin: 26px 0 12px; font-size: clamp(25px, 2.3vw, 34px); font-weight: 400; letter-spacing: -0.035em; line-height: 0.95; }
.ritual-flow p { min-height: 4.2em; margin-bottom: 2px; color: var(--muted); font-size: 15px; }

.personal-section { background: var(--paper-soft); }
.personal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature-card { display: grid; min-height: 270px; grid-template-rows: 130px auto; padding: 16px; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-card:nth-child(odd) { background: #faf3fa; }
.feature-card img { width: 84px; max-height: 92px; align-self: center; justify-self: center; object-fit: contain; mix-blend-mode: multiply; }
.feature-card h3 { margin: 10px 0 0; font-size: clamp(23px, 2vw, 30px); font-weight: 400; letter-spacing: -0.035em; line-height: 0.95; }
.feature-card p { max-width: 240px; margin: 10px 0 0; color: var(--muted); font-size: 14px; }

.roadmap-section { padding: clamp(48px, 6vw, 84px) var(--edge); background: var(--blue); color: #fff; }
.section-heading.inverse .section-label, .section-heading.inverse > p:last-child { color: rgba(255, 255, 255, 0.66); }
.roadmap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.28); border-left: 1px solid rgba(255, 255, 255, 0.28); }
.roadmap-grid article { display: grid; min-height: 210px; padding: 16px; border-right: 1px solid rgba(255, 255, 255, 0.28); border-bottom: 1px solid rgba(255, 255, 255, 0.28); grid-template-rows: 1fr auto; }
.roadmap-grid img { width: 76px; max-height: 88px; align-self: center; justify-self: center; object-fit: contain; mix-blend-mode: screen; }
.roadmap-grid span { color: rgba(255, 255, 255, 0.76); }

.project-close { display: grid; min-height: min(560px, 62svh); align-content: center; justify-items: center; padding: 70px var(--edge); text-align: center; }
.project-close > img { width: min(110px, 28vw); margin-bottom: 24px; border-radius: 50%; mix-blend-mode: multiply; }
.project-close > p { color: var(--muted); }
.project-close h2 { margin: 14px 0 32px; font-size: clamp(54px, 7vw, 98px); font-weight: 400; letter-spacing: -0.055em; line-height: 0.86; }
.project-close > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 36px; color: var(--blue); }
.project-footer { display: flex; justify-content: space-between; gap: 24px; padding: 24px var(--edge) 30px; border-top: 1px solid var(--line); color: var(--muted); }
.project-footer > div { display: flex; flex-wrap: wrap; gap: 24px; }

@media (max-width: 820px) {
  .project-header { grid-template-columns: 1fr; align-items: start; gap: 8px; min-height: 94px; }
  .brand-mark { width: 94px; height: 28px; }
  .project-header nav { gap: 16px; }
  .project-hero { min-height: auto; }
  .hero-layout { min-height: auto; grid-template-columns: 1fr; padding: 56px 0 48px; }
  .hero-copy h1 { font-size: clamp(56px, 14vw, 82px); }
  .hero-copy > p { margin-left: 0; }
  .oracle-portrait { width: min(190px, 48vw); justify-self: center; }
  .intro-note, .section-heading { grid-template-columns: 1fr; gap: 28px; }
  .ritual-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .personal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roadmap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .hero-labels span:last-child { display: none; }
  .ritual-flow, .personal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ritual-flow h3, .ritual-flow p { min-height: 0; }
  .feature-card { min-height: 245px; grid-template-rows: 112px auto; }
  .feature-card img { width: 70px; max-height: 78px; }
  .roadmap-grid article { min-height: 180px; }
  .project-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; transition-duration: 1ms !important; }
}