/* brettlabit.com — MY PROJECTS (session 16, 2026-10-03; paper: 01 Design & Rulings/BrettLabit-My-Projects-Design-v0.1-Oct3.md).
   The four /projects pages share this file. Tokens are Sky & Rock (R22), identical to the other pages. */
:root{ --white:#FFFFFF; --paper:#F5F8FC; --ink:#121A26; --blue:#0E2F58; --sky:#2F6FBF; --sky-soft:#DCE8F7; --muted:#5A6577; --hair:#E2E8F0; --ember:#D9653A;
       --sans:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --book:"Fraunces", Georgia, serif; }
*{ box-sizing:border-box; }
html{ background:var(--white); }
body{ margin:0; background:var(--white); color:var(--ink); font-family:var(--sans); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:inherit; } p{ margin:0 0 1.1em; } h1,h2,h3{ margin:0; text-wrap:balance; font-weight:500; letter-spacing:-.015em; }
.wrap{ width:min(1120px, 100% - 48px); margin-inline:auto; }
.kicker{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--sky); margin-bottom:14px; }
.kicker a{ text-decoration:none; } .kicker a:hover{ color:var(--blue); }

header.top .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:26px; }
.wordmark{ height:24px; width:auto; display:block; }
nav{ display:flex; gap:28px; font-size:14px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); }
nav a{ text-decoration:none; opacity:.8; } nav a:hover{ opacity:1; }

/* the opening */
.p-open{ padding-block:48px 64px; }
.p-open h1{ font-size:clamp(40px,5.4vw,68px); line-height:1.04; color:var(--blue); letter-spacing:-.025em; max-width:16ch; }
.p-open .lede{ font-size:clamp(19px,1.7vw,23px); line-height:1.55; margin-top:28px; max-width:46ch; }
.p-open .lede p:last-child{ margin-bottom:0; }

/* his thoughts (the Chamber page) */
.thoughts{ padding-block:8px 72px; }
.thoughts .t-body{ border-left:3px solid var(--ember); padding-left:26px; max-width:62ch; }
.thoughts p{ font-size:clamp(18px,1.5vw,20px); line-height:1.65; }
.thoughts .sign{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--muted); margin:6px 0 0; }

/* the cards */
.p-cards{ background:var(--paper); padding-block:72px 104px; }
.cards{ display:grid; gap:24px; grid-template-columns:repeat(3, minmax(0,1fr)); }
.cards.four{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:940px; margin-inline:auto; }
/* five cards (/projects since 10/3): three across, the last two centered beneath */
.cards.five{ grid-template-columns:repeat(6, minmax(0,1fr)); }
.cards.five > *{ grid-column:span 2; } .cards.five > :nth-child(4){ grid-column:2 / span 2; }
.card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--hair); border-radius:18px; overflow:hidden; text-decoration:none; color:var(--ink);
       transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(14,47,88,.12); border-color:var(--sky-soft); }
a.card:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; }
.tile{ height:168px; display:flex; align-items:center; justify-content:center; padding:28px; border-bottom:1px solid var(--hair); background:var(--white); }
.tile img{ max-width:78%; max-height:100%; width:auto; height:auto; display:block; }
.tile img.wide{ max-width:90%; }
.tile img.seal{ max-height:112px; } .tile img.rings{ max-height:116px; }
.tile.word{ background:var(--blue); color:#fff; font-family:var(--book); font-weight:300; font-style:italic; font-size:clamp(30px,3vw,38px); line-height:1.1; text-align:center; }
.c-body{ padding:24px 26px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
.c-body h2{ font-size:23px; line-height:1.2; color:var(--blue); }
.c-body p{ font-size:16px; line-height:1.55; color:var(--ink); margin:0; }
.c-go{ margin-top:auto; padding-top:12px; font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--blue); }
.c-soon{ margin-top:auto; padding-top:12px; }
.c-soon span{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); border:1px solid var(--ember); border-radius:999px; padding:5px 12px; }

@media (max-width:820px){ .wrap{ width:min(1120px, 100% - 32px); } nav.main{ display:none; } .p-open{ padding-block:8px 48px; } .p-cards{ padding-block:48px 72px; }
  .thoughts .t-body{ padding-left:18px; } .tile{ height:144px; } }
@media (max-width:900px){ .cards, .cards.five{ grid-template-columns:repeat(2, minmax(0,1fr)); } .cards.five > *, .cards.five > :nth-child(4){ grid-column:auto; } }
@media (max-width:620px){ .cards, .cards.four, .cards.five{ grid-template-columns:1fr; } }

/* TribeUp lockup, per TribeUp Brand Standards v1.0 (ratified 7/18/2026, 4 TribeUp/02 Product & Dev/PWA Build (Claude)/06-Assets/Brand):
   the Ascent U mark left; "tribeup" all lowercase, the app's system sans, 800, -0.03em; "up" in working orange on light.
   Proportions as the standard's own lockup (mark 46 : type 30 : gap 12), scaled 1.6x. */
.tu-lockup{ display:flex; align-items:center; gap:19px; }
.tu-lockup svg{ width:74px; height:74px; flex:none; }
.tu-word{ font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight:800; font-size:48px; letter-spacing:-.03em; line-height:1; color:#2b2926; }
.tu-up{ color:#a85a06; }
@media (max-width:820px){ .tu-lockup svg{ width:60px; height:60px; } .tu-word{ font-size:39px; } .tu-lockup{ gap:15px; } }