/* ==========================================================================
   A22 — site design system v3.0 (locked)
   Source of truth: ../brand-book/BRAND-BOOK.md
   Do not introduce a third colour. Do not pair "Astra" with the logo.
   ========================================================================== */

:root{
  /* Palette — locked, 3 tones, no third accent hue */
  --green:#3F4A38;          /* Deep Moss — primary section background */
  --gray:#3F3F3F;           /* Dark Gray — secondary section background */
  --cream:#F5F4F0;          /* text + light UI on both */
  --cream-soft:rgba(245,244,240,.74);
  --cream-faint:rgba(245,244,240,.4);
  --cream-card:rgba(245,244,240,.09);
  --cream-line:rgba(245,244,240,.16);

  /* Typography — locked pairing, roles never inverted */
  --font-display:'IM Fell English', Georgia, serif;   /* voice: headlines, logo, CTA text */
  --font-body:'Oxygen', -apple-system, BlinkMacSystemFont, sans-serif; /* structure: labels, body, UI */

  --ease:cubic-bezier(.22,.9,.32,1);
  --pad:clamp(24px,6vw,80px);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);line-height:1.6;background:var(--green);color:var(--cream);
  -webkit-font-smoothing:antialiased;}

/* ===== Alternating Rhythm — sections alternate the two colours, full bleed ===== */
.bg-green{background:var(--green);color:var(--cream);}
.bg-gray{background:var(--gray);color:var(--cream);}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad);}
section{padding:clamp(64px,10vh,120px) 0;}

/* ===== Logo — A22 only, always. Never paired with "Astra". ===== */
.logo{font-family:var(--font-display);font-weight:400;color:var(--cream);text-decoration:none;
  font-size:1.5rem;line-height:1;display:inline-block;}
.logo:hover{color:var(--cream);}
.logo-xl{font-size:clamp(4rem,16vw,11rem);line-height:.9;}

/* ===== Chrome — top bar / footer, shared across pages ===== */
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:28px var(--pad);max-width:1180px;margin:0 auto;gap:20px;}
.topbar nav{display:flex;gap:28px;align-items:baseline;flex-wrap:wrap;}

.kicker{font-family:var(--font-body);font-weight:700;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-faint);}

footer.site{padding:44px var(--pad) 56px;border-top:1px solid var(--cream-line);}
footer.site .inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;
  align-items:flex-end;flex-wrap:wrap;gap:16px;}
footer.site .legal{font-size:.72rem;color:var(--cream-faint);line-height:1.5;}

/* ===== CTA — "Bracket Whisper" hyperlinks. No button component exists. ===== */
.cta{font-family:var(--font-display);font-style:italic;color:var(--cream);text-decoration:none;
  display:inline-flex;align-items:baseline;gap:1px;font-size:1.05rem;}
.cta .br{font-family:var(--font-body);font-weight:300;color:var(--cream-faint);
  transition:opacity .25s ease;}
.cta:hover .br{opacity:0;}
.cta .u{text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1.4px;
  text-underline-offset:4px;text-decoration-color:transparent;transition:text-decoration-color .25s ease;}
.cta:hover .u{text-decoration-color:var(--cream);}
.cta-sm{font-size:.92rem;color:var(--cream-soft);}

/* ===== Type scale ===== */
h1,h2,h3{font-family:var(--font-display);font-weight:400;font-style:italic;}
h1{font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.25;}
h2{font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.3;}
.lead{font-family:var(--font-body);font-weight:300;font-size:1.05rem;color:var(--cream-soft);
  max-width:52ch;margin-bottom:40px;}

/* ===== Motion — locked: per-character reveal (A) + typewriter mask (C) ===== */
.char{display:inline-block;opacity:0;animation:charReveal .5s var(--ease) forwards;}
@keyframes charReveal{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.tw-wrap{overflow:hidden;max-width:46ch;}
.tw{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;
  animation:tw 1.8s 1.1s var(--ease) forwards;}
@keyframes tw{from{max-width:0;}to{max-width:100%;}}

.rise{opacity:0;animation:rise .6s var(--ease) forwards;}
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

@media (prefers-reduced-motion:reduce){
  .char,.tw,.rise{animation:none!important;opacity:1!important;max-width:none!important;
    white-space:normal!important;transform:none!important;}
}

/* A nowrap typewriter line cannot fit a narrow screen: below 520px it overflows the
   viewport and gets cut on both sides. Degrade to a wrapping fade-up instead. */
@media (max-width:520px){
  .tw-wrap{max-width:100%;overflow:visible;}
  .tw{white-space:normal;max-width:100%;opacity:0;
    animation:rise .6s 1.1s var(--ease) forwards;}
}

/* ===== Page layout — hero (home) and viewport-filling sections ===== */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:20px;position:relative;}
.hero-content{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:100%;}
.hero-tagline{margin:20px 0 0;}
.hero-subline{margin:12px 0 0;}
.hero-cta{margin-top:32px;}

/* fills the screen minus the top bar + footer, so short pages don't leave a gap */
.section-fill{min-height:calc(100vh - 210px);display:flex;flex-direction:column;justify-content:center;}

/* ===== Rows — used by the projects list ===== */
.rows{display:flex;flex-direction:column;max-width:900px;}
.row{display:grid;grid-template-columns:1fr auto;gap:12px 28px;align-items:baseline;
  padding:28px 0;border-top:1px solid var(--cream-line);}
.rows .row:last-child{border-bottom:1px solid var(--cream-line);}
.row .name{font-family:var(--font-display);font-style:italic;font-size:1.5rem;}
.row .meta{font-size:.95rem;color:var(--cream-soft);grid-column:1;}
.row .tag{font-family:var(--font-body);font-weight:700;font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--cream-faint);color:var(--cream-soft);
  padding:4px 10px;border-radius:100px;white-space:nowrap;grid-row:1;grid-column:2;}
.row .tag.live{border-color:var(--cream);color:var(--cream);}

/* ===== Form — used by the access page ===== */
.field{display:block;margin-bottom:20px;max-width:380px;}
.field span{display:block;font-family:var(--font-body);font-weight:700;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cream-faint);margin-bottom:8px;}
.field input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--cream-line);
  color:var(--cream);font-family:var(--font-body);font-size:1rem;padding:10px 0;
  transition:border-color .2s ease;}
.field input:focus{outline:none;border-bottom-color:var(--cream);}
.field input::placeholder{color:var(--cream-faint);}

.notice{margin-top:26px;padding:16px 18px;background:var(--cream-card);
  border:1px solid var(--cream-line);border-radius:8px;font-size:.88rem;color:var(--cream-soft);
  max-width:380px;}
.notice[hidden]{display:none;}

/* ===== Localhost-only banner — remove when this goes to production ===== */
.preview-banner{background:var(--cream);color:var(--green);text-align:center;
  font-family:var(--font-body);font-weight:700;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 16px;}