/* ============================================================
   RILEY STILLMAN — Mental Performance Coaching
   A solo brand under DVLPMNT.

   v2 direction (athletic editorial): heavy Archivo grotesque set
   uppercase and tight, Space Mono for team-issue technical labels,
   bone paper against near-black ink, one burnt-orange blaze pulled
   from the moodboard, subtle film grain on the dark frames. Built
   to feel current to a young pro athlete, not formal.
   Signature element: The Center mark, kept small with a faint breath
   (placeholder, a motion mark to be redesigned later).
   ============================================================ */

:root {
  --bone:     #ECE7DD;
  --bone-2:   #E4DED1;
  --ink:      #15140F;
  --ink-2:    #100F0C;
  --soft:     #56534B;
  --whisper:  #8B8578;
  --hairline: #D6CFBF;
  --hairline-dark: #2B2924;

  --blaze:      #C75432;   /* primary accent */
  --blaze-deep: #A5421E;   /* accent text / hover on bone */
  --blaze-soft: #E07A55;   /* accent on dark */

  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1120px;
  --read: 720px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); color: var(--ink); }
h1 { font-size: clamp(2.7rem, 6.5vw, 5rem); font-weight: 900; line-height: 0.96; letter-spacing: -0.022em; text-transform: uppercase; }
h2 { font-size: clamp(1.95rem, 4vw, 3.05rem); font-weight: 800; line-height: 1.0; letter-spacing: -0.018em; text-transform: uppercase; }
h3 { font-size: 1.18rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
p { color: var(--soft); }
em { font-style: normal; color: var(--blaze-deep); }
.accent { color: var(--blaze-deep); }

.label {
  font-family: var(--mono);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--whisper);
  display: inline-block;
}

/* section rhythm (tightened) */
section { padding: clamp(54px, 7.5vw, 92px) 0; }
.section-head { max-width: var(--read); margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { margin: 12px 0 14px; }
.section-head p { font-size: 1.02rem; }
.alt { background: var(--bone-2); }

/* reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* film grain for dark frames */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.07; mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  background-size: 160px 160px;
}

/* ============================================================
   THE CENTER — small mark, faint breath (placeholder motion mark)
   ============================================================ */
.mark { width: 24px; height: 24px; flex: none; display: block; }
.mark .ring { fill: none; stroke: var(--blaze); transform-origin: center; transform-box: fill-box; }
.mark .core { fill: var(--blaze); transform-origin: center; transform-box: fill-box; }
.mark .r2 { opacity: 0.55; }
.mark .r3 { opacity: 0.28; }
.mark .core { animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.7); opacity: 0.78; } }

/* ---------- nav ---------- */
nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bone) 84%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s, background 0.4s;
}
nav.solid { border-bottom-color: var(--hairline); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-name { font-family: var(--display); font-size: 1.04rem; font-weight: 800; letter-spacing: 0.01em; line-height: 1; text-transform: uppercase; }
.brand-tag { font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--whisper); display: block; margin-top: 4px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; opacity: 0.66; transition: opacity 0.3s; text-transform: uppercase; }
.nav-links a:hover { opacity: 1; }
.nav-links a.btn-primary { color: var(--bone); opacity: 1; }
.nav-links a.btn-primary:hover { color: #fff; }

.btn {
  font-family: var(--display); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.btn-primary { background: var(--ink); color: var(--bone); padding: 13px 22px; border-radius: 3px; }
.btn-primary:hover { background: var(--blaze); color: #fff; transform: translateY(-1px); }
.nav-cta { padding: 11px 18px; }
.btn-text { color: var(--ink); padding: 13px 2px; position: relative; }
.btn-text::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 7px; height: 2px; background: var(--blaze); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.btn-text:hover::after { transform: scaleX(1); }
.btn-arrow::after { content: none; }
.btn-arrow { gap: 9px; }
.btn-arrow span.arr { transition: transform 0.3s var(--ease); }
.btn-arrow:hover span.arr { transform: translateX(4px); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: clamp(540px, 84vh, 820px); display: flex; align-items: center; background: var(--ink-2); overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% center; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(10,10,8,0.12) 0%, rgba(10,10,8,0.04) 32%, rgba(10,10,8,0.58) 76%, rgba(10,10,8,0.76) 100%); }
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero-inner { margin-left: auto; max-width: 580px; text-align: left; }
.hero-inner .label { color: #C7C2B6; }
.hero h1 { color: #F4F0E8; margin: 18px 0 20px; }
.hero h1 em { color: var(--blaze-soft); }
.hero-sub { color: #D2CEC5; font-size: 1.1rem; font-weight: 400; max-width: 480px; margin-bottom: 30px; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-actions .btn-text { color: #F0ECE4; }

/* ---------- thesis band (two fixed lines, no motif) ---------- */
.thesis { padding: clamp(60px, 8vw, 104px) 0; }
.thesis .wrap { max-width: 880px; }
.thesis p { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.018em; text-transform: uppercase; color: var(--ink); }
.thesis p.accent { color: var(--blaze-deep); margin-top: 2px; }

/* ---------- the path (1-2-3) ---------- */
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step { padding-top: 20px; border-top: 1.5px solid var(--ink); }
.step-n { font-family: var(--mono); font-size: 12px; color: var(--blaze-deep); letter-spacing: 0.08em; margin-bottom: 14px; text-transform: uppercase; display: flex; gap: 10px; }
.step-n b { font-weight: 700; color: var(--ink); }
.step h3 { margin-bottom: 9px; }
.step p { font-size: 0.98rem; }

/* ---------- who this is for (single stacked column) ---------- */
.who-col { max-width: var(--read); }
.who-lead { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 22px; }
.who-lead em { color: var(--blaze-deep); }
.who-col .body p { margin-bottom: 16px; }
.who-col .body p:last-child { margin-bottom: 0; }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 60px); align-items: center; }
.about-portrait { position: relative; }
.about-portrait img { width: 100%; border-radius: 4px; filter: grayscale(1) contrast(1.03); }
.about-portrait::after { content: ""; position: absolute; left: -12px; bottom: -12px; width: 56px; height: 56px; border-left: 2px solid var(--blaze); border-bottom: 2px solid var(--blaze); }
.about-body h2 { margin: 12px 0 18px; }
.about-body p { margin-bottom: 15px; }
.about-sign { font-family: var(--display); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink); margin-top: 4px; }

/* ---------- journal ---------- */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.jcard { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px; background: var(--bone); border: 1px solid var(--hairline); border-radius: 4px; text-decoration: none; color: var(--ink); transition: transform 0.4s var(--ease), border-color 0.4s; }
.jcard:hover { transform: translateY(-3px); border-color: var(--blaze); }
.jdate { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--whisper); }
.jcard h3 { font-size: 1.1rem; line-height: 1.18; }
.jcard p { font-size: 0.94rem; flex: 1; }
.jread { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blaze-deep); }
.journal-foot { margin-top: 28px; }

/* ---------- email capture (dark band) ---------- */
.capture { background: var(--ink-2); color: var(--bone); position: relative; overflow: hidden; }
.capture .wrap { position: relative; z-index: 2; max-width: 720px; }
.capture .label { color: #9C968A; }
.capture h2 { color: #F4F0E8; margin: 12px 0 14px; }
.capture .capture-sub { color: #BDB8AE; margin: 0 0 26px; max-width: 520px; }
.capture-form { display: flex; gap: 10px; max-width: 500px; }
.capture-form input[type=email] {
  flex: 1; font-family: var(--display); font-size: 15px; color: var(--bone);
  background: rgba(255,255,255,0.05); border: 1px solid var(--hairline-dark);
  border-radius: 3px; padding: 14px 18px; outline: none; transition: border-color 0.3s;
}
.capture-form input[type=email]::placeholder { color: #8A857A; }
.capture-form input[type=email]:focus { border-color: var(--blaze-soft); }
.capture-form .btn-primary { background: var(--blaze); color: #fff; }
.capture-form .btn-primary:hover { background: var(--blaze-deep); }
.capture-note { font-family: var(--mono); font-size: 11.5px; color: #837E73; margin-top: 14px; letter-spacing: 0.04em; }

/* ---------- inquiry ---------- */
.inquiry-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 6vw, 68px); align-items: start; }
.inquiry-intro h2 { margin: 12px 0 14px; }
.inquiry-intro .alt-contact { font-family: var(--mono); font-size: 0.84rem; letter-spacing: 0.02em; margin-top: 20px; color: var(--soft); }
.inquiry-intro .alt-contact a { color: var(--blaze-deep); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.inquiry-intro .alt-contact a:hover { border-bottom-color: var(--blaze-deep); }
.form { display: flex; flex-direction: column; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--whisper); }
.field input, .field textarea, .field select {
  font-family: var(--display); font-size: 15px; color: var(--ink);
  background: var(--bone); border: 1px solid var(--hairline); border-radius: 3px;
  padding: 13px 14px; outline: none; transition: border-color 0.3s, box-shadow 0.3s;
}
.alt .field input, .alt .field textarea, .alt .field select { background: #fff; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blaze); box-shadow: 0 0 0 3px rgba(199,84,50,0.13); }
.field textarea { resize: vertical; min-height: 112px; }
.form .btn-primary { align-self: flex-start; }

.form-feedback { font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; margin-top: 2px; min-height: 1.2em; }
.form-feedback.ok { color: var(--blaze-deep); }
.form-feedback.err { color: var(--blaze); }
.capture .form-feedback.ok { color: var(--blaze-soft); }
.capture .form-feedback { color: #BDB8AE; }

/* ---------- footer ---------- */
footer { background: var(--ink-2); color: #BDB8AE; padding: 52px 0 36px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #F4F0E8; }
.footer-brand .brand-tag { color: #837E73; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #BDB8AE; text-decoration: none; opacity: 0.78; transition: opacity 0.3s; }
.footer-links a:hover { opacity: 1; }
.footer-fine { width: 100%; font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: #6C685F; border-top: 1px solid var(--hairline-dark); padding-top: 20px; margin-top: 6px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; text-transform: uppercase; }

/* ---------- focus + motion ---------- */
:focus-visible { outline: 2px solid var(--blaze); outline-offset: 3px; border-radius: 3px; }
.capture-form input:focus-visible, .hero-actions a:focus-visible { outline-color: var(--blaze-soft); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .about-grid, .inquiry-grid { grid-template-columns: 1fr; }
  .about-grid { gap: 36px; }
  .about-portrait { max-width: 340px; }
  .path-grid { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 22px 0; }
  .journal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .nav-links a:not(.nav-cta) { display: none; }
  .hero { min-height: 84vh; }
  .hero-scrim { background: linear-gradient(0deg, rgba(10,10,8,0.86) 4%, rgba(10,10,8,0.3) 46%, rgba(10,10,8,0.34) 100%); }
  .hero-inner { margin-left: 0; max-width: 100%; }
  .capture-form { flex-direction: column; }
  .capture-form .btn-primary { justify-content: center; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}