/* ============================================================================
   RAEWAY DESIGN — site stylesheet
   Brand tokens are canonical (see raeway/brand.css + brand colors.png).
   Layout/editorial structure carried over from the original marketing site.
   This file is hand-authored; build.mjs only generates HTML that links to it.
   ============================================================================ */

:root {
  /* --- Brand color (canonical) --- */
  --c-ink:        #0D0A0B;   /* near-black — headings, primary text */
  --c-slate:      #454955;   /* body text, the "way" in the logo    */
  --c-muted:      #6c707b;   /* secondary / labels                  */
  --c-paper:      #F3EFF5;   /* page background                      */
  --c-white:      #ffffff;   /* card / panel surface                */
  --c-green:      #72B01D;   /* primary brand / actions             */
  --c-green-d:    #3F7D20;   /* deep green — links, emphasis        */
  --c-green-tint: #eef5e2;   /* soft fill for chips / callouts      */
  --c-rule:       #e3dee7;   /* hairline border                     */
  --c-rule-2:     #d9d3de;   /* stronger border                     */

  /* --- Type (carried from the original site) --- */
  --f-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, 'Consolas', monospace;

  /* --- Spacing --- */
  --sp-xs: 8px; --sp-sm: 16px; --sp-md: 28px; --sp-lg: 44px; --sp-xl: 72px;

  /* --- Layout --- */
  --max-w: 1200px;
  --gutter: clamp(24px, 6vw, 96px);
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--c-paper);
  color: var(--c-slate);
  font-family: var(--f-sans);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 { color: var(--c-ink); line-height: 1.12; letter-spacing: -0.02em; }

a { color: var(--c-green-d); text-decoration: underline; text-underline-offset: 3px;
    transition: opacity .15s ease; }
a:hover { opacity: .65; }
a:focus-visible { outline: 2px solid var(--c-green-d); outline-offset: 3px; border-radius: 2px; }

ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: absolute; top: -120px; left: var(--gutter); background: var(--c-ink);
             color: var(--c-paper); padding: 10px 18px; font-size: 14px; font-weight: 600;
             text-decoration: none; z-index: 200; border-radius: 2px; transition: top .15s ease; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 760px; }

/* Eyebrow — monospace section label */
.eyebrow { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
           text-transform: uppercase; color: var(--c-muted); margin-bottom: 20px; }

/* ---- Header ---- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: var(--c-paper);
               border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.site-header.scrolled { border-bottom-color: var(--c-rule); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 48px; width: auto; }
.brand:hover { opacity: .7; }
.nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
.nav a { font-size: 14px; font-weight: 500; color: var(--c-slate); text-decoration: none; }
.nav a:hover { color: var(--c-green-d); opacity: 1; }
.nav a.cta { font-weight: 600; color: var(--c-ink); border-bottom: 1.5px solid var(--c-ink); padding-bottom: 2px; }

main { padding-top: 0; }

/* ---- Hero ---- */
.hero { min-height: 62vh; padding-top: clamp(96px, 11vh, 128px); padding-bottom: var(--sp-xl);
        display: flex; align-items: center; }
.hero-headline { font-size: clamp(48px, 8vw, 104px); font-weight: 700; line-height: 1.04;
                 letter-spacing: -0.03em; max-width: 880px; margin-bottom: clamp(24px, 4vw, 44px); color: var(--c-ink); }
.hero-headline .t-light { font-weight: 300; }
.hero-headline .t-green { color: var(--c-green-d); }
.hero-sub { font-size: clamp(18px, 1.8vw, 22px); color: var(--c-muted); max-width: 46ch; line-height: 1.55; }

/* ---- Section ---- */
.section { padding: var(--sp-xl) 0; border-top: 1px solid var(--c-rule); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
                margin-bottom: var(--sp-lg); flex-wrap: wrap; }
.section-title { font-size: clamp(26px, 3vw, 40px); font-weight: 700; }
.section-more { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--c-green-d);
                text-decoration: none; border-bottom: 1px solid var(--c-green-d); padding-bottom: 2px; }
.section-more:hover { opacity: .65; }

/* ---- What I do ---- */
.what-grid { display: grid; gap: var(--sp-lg); }
@media (min-width: 768px) { .what-grid { grid-template-columns: 260px 1fr; gap: clamp(64px, 8vw, 140px); align-items: start; } }
.what-heading { font-size: clamp(24px, 3vw, 38px); font-weight: 700; line-height: 1.15; }
.what-body p { max-width: 54ch; margin-bottom: var(--sp-md); color: var(--c-slate); }
.what-body p:last-of-type { margin-bottom: 0; }
.services { margin-top: var(--sp-md); }
.services li { display: flex; gap: var(--sp-sm); align-items: baseline; padding: 13px 0;
               border-top: 1px solid var(--c-rule); font-size: 16px; }
.services li:last-child { border-bottom: 1px solid var(--c-rule); }
.svc-n { font-family: var(--f-mono); font-size: 10px; color: var(--c-green-d); flex-shrink: 0;
         padding-top: 3px; min-width: 20px; }

/* ---- Work grid (cards with screenshots) ---- */
.work-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 720px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }

.card { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--c-rule);
        border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit;
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(13,10,11,.35);
              border-color: var(--c-rule-2); opacity: 1; }
.card-shot { aspect-ratio: 16 / 10; background: var(--c-green-tint); position: relative; overflow: hidden;
             border-bottom: 1px solid var(--c-rule); }
.card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.card-shot .placeholder { position: absolute; inset: 0; display: grid; place-items: center;
             background: linear-gradient(135deg, var(--c-green-tint), #fff);
             font-family: var(--f-mono); color: var(--c-green-d); font-size: 12px; letter-spacing: .1em;
             text-transform: uppercase; }
.card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-cat { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
            color: var(--c-muted); }
.card-name { font-size: 22px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.02em; }
.card-desc { font-size: 15px; color: var(--c-muted); line-height: 1.5; }
.card-tags { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; color: var(--c-green-d);
       background: var(--c-green-tint); padding: 4px 9px; border-radius: 999px; }

.section-lede { font-size: 16px; color: var(--c-muted); max-width: 60ch; margin: -28px 0 var(--sp-md); }

/* ---- Behind-the-build note pieces ---- */
.note-proj { display: inline-block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em;
             text-transform: uppercase; color: var(--c-green-d); background: var(--c-green-tint);
             padding: 3px 9px; border-radius: 999px; margin-left: 10px; vertical-align: 2px; }
.related-notes { margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--c-rule); }
.related-title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; margin-bottom: 8px; }
.empty-note { font-family: var(--f-mono); font-size: 14px; color: var(--c-muted); }
.note-cta { margin-top: var(--sp-lg); padding: 28px 30px; background: var(--c-green-tint);
            border: 1px solid var(--c-rule); border-radius: var(--radius); display: flex;
            flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.note-cta p { font-size: 17px; color: var(--c-ink); font-weight: 500; max-width: 40ch; }

/* ---- Post list ---- */
.post-list { border-top: 1px solid var(--c-rule); }
.post-row { display: flex; align-items: baseline; gap: clamp(16px, 3vw, 40px); padding: 22px 0;
            border-bottom: 1px solid var(--c-rule); text-decoration: none; color: inherit; }
.post-row:hover { opacity: 1; }
.post-row:hover .post-title { color: var(--c-green-d); }
.post-date { font-family: var(--f-mono); font-size: 12px; color: var(--c-muted); min-width: 130px; flex-shrink: 0; }
@media (max-width: 600px) { .post-row { flex-direction: column; gap: 4px; } .post-date { min-width: 0; } }
.post-title { font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; color: var(--c-ink); letter-spacing: -0.02em; transition: color .15s; }
.post-excerpt { font-size: 15px; color: var(--c-muted); margin-top: 4px; line-height: 1.5; max-width: 60ch; }

/* ---- Article (blog post + project detail) ---- */
.article { padding: clamp(96px, 11vh, 132px) 0 var(--sp-xl); }
.article-head { margin-bottom: var(--sp-lg); }
.article-title { font-size: clamp(34px, 5vw, 60px); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 14px; }
.article-meta { font-family: var(--f-mono); font-size: 13px; color: var(--c-muted); }
.prose { font-size: 18px; line-height: 1.7; color: var(--c-slate); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin-top: 1.8em; }
.prose h3 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; margin-top: 1.5em; }
.prose strong { color: var(--c-ink); font-weight: 600; }
.prose a { color: var(--c-green-d); }
.prose ul { padding-left: 1.2em; }
.prose ul li { list-style: disc; margin-top: .5em; }
.prose code { font-family: var(--f-mono); font-size: .88em; background: var(--c-green-tint);
              color: var(--c-green-d); padding: 2px 6px; border-radius: 5px; }
.prose hr { border: none; border-top: 1px solid var(--c-rule); margin: 2em 0; }
.prose img { border-radius: var(--radius); border: 1px solid var(--c-rule); margin: 1.4em 0; }
.back-link { display: inline-block; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
             color: var(--c-muted); text-decoration: none; margin-bottom: var(--sp-md); }
.back-link:hover { color: var(--c-green-d); opacity: 1; }

.detail-shot { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
               border-radius: var(--radius); border: 1px solid var(--c-rule);
               margin-bottom: var(--sp-lg); background: var(--c-green-tint); }
.detail-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-top: var(--sp-md);
               padding-top: var(--sp-md); border-top: 1px solid var(--c-rule); }
.detail-meta .label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px;
       text-decoration: none; padding: 11px 20px; border-radius: 10px; background: var(--c-green-d);
       color: #fff; transition: background .15s, transform .15s; }
.btn:hover { background: var(--c-green); opacity: 1; transform: translateY(-1px); }

/* ---- Page intro (work/blog index) ---- */
.page-intro { padding: clamp(96px, 11vh, 132px) 0 var(--sp-lg); }
.page-title { font-size: clamp(40px, 6vw, 72px); font-weight: 700; letter-spacing: -0.03em; }
.page-lede { font-size: clamp(18px, 1.8vw, 21px); color: var(--c-muted); max-width: 50ch; margin-top: 18px; }

/* ---- Contact ---- */
.contact-intro { font-size: clamp(18px, 1.8vw, 22px); color: var(--c-muted); max-width: 44ch; margin-bottom: var(--sp-md); }
.contact-email { display: inline-block; font-size: clamp(26px, 3.6vw, 48px); font-weight: 700; letter-spacing: -0.025em;
                 color: var(--c-ink); text-decoration: none; border-bottom: 2.5px solid var(--c-ink); padding-bottom: 4px;
                 transition: color .15s, border-color .15s; }
.contact-email:hover { color: var(--c-green-d); border-color: var(--c-green-d); opacity: 1; }
.contact-meta { margin-top: var(--sp-md); display: flex; flex-direction: column; gap: 6px; }
.contact-row { display: flex; align-items: baseline; gap: 18px; }
.contact-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
                 color: var(--c-muted); min-width: 68px; flex-shrink: 0; }
.contact-value { font-size: 16px; color: var(--c-slate); }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--c-rule); padding: 28px 0; }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.foot-copy { font-family: var(--f-mono); font-size: 12px; color: var(--c-muted); }
.foot-credo { font-size: 13px; font-style: italic; color: var(--c-muted); }
.foot-nav { display: flex; gap: 18px; }
.foot-nav a { font-size: 13px; color: var(--c-slate); text-decoration: none; }
.foot-nav a:hover { color: var(--c-green-d); }

/* ---- Responsive ---- */
@media (max-width: 767px) { :root { --sp-xl: 80px; --sp-lg: 44px; } .hero { align-items: flex-start; } }
@media (min-width: 1280px) { :root { --sp-xl: 150px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }