/* ---------------------------------------------------------
Design @RJS° — clean consolidated stylesheet
(duplicates removed, disclaimer footer width fixed)
--------------------------------------------------------- */

/* =========================
   TOKENS
   ========================= */
:root{
  --bg: #0e0f12;
  --surface: #14161b;
  --text: #e8e9ef;
  --muted: #a9adba;

  /* brand / knuckle */
  --brand: #a07332;
  --knuckle: var(--brand);

  /* grid */
  --grid-max: 1040px;

  /* phase colors (used by footer pill + text accents) */
  --phase-1: #638372;               /* sage/mint */
  --phase-2: #9c2d12;               /* iron red */
  --phase-3: rgba(154,211,255,0.14);/* soft airy */
  --phase-4: rgb(73,29,139);        /* paw purple */
  --phase-5: rgba(154,211,255,0.14);
  --phaseBlueSoft: rgba(43,111,242,.42);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  line-height:1.5;
}

img{max-width:100%;height:auto;display:block}

/* =========================
   LAYOUT
   ========================= */
.wrap{
  width:100%;
  max-width:var(--grid-max);
  margin-inline:auto;
  padding:clamp(16px,2vw,24px);
}

.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{
  left:16px;
  top:12px;
  background:var(--surface);
  padding:8px 12px;
  border-radius:8px;
  outline:2px solid var(--brand);
}

/* watermark paw (20% opacity visual) */
.watermark{
  position:fixed;
  inset:auto -10vmin -10vmin auto;
  opacity:.2;
  z-index:0;
  filter:grayscale(1);
  pointer-events:none;
  width:min(28vmin,360px);
  transform:rotate(-12deg);
}

/* =========================
   HEADER
   ========================= */
.site-header{
  position:sticky;
  top:0;
  background:linear-gradient(180deg, rgba(20,22,27,0.9), rgba(20,22,27,0.6));
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  z-index:10;
  width:100%;
  display:flex;
  justify-content:center;
}

/* 3-zone grid so center stays centered */
.site-header .wrap{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding-top:12px;
  padding-bottom:12px;
}

/* If you use brand header rows in markup */
.brand-header-row{ display:contents; }

.brand-left{
  grid-column:1;
  justify-self:start;
  white-space:nowrap;
  font-size:15px;
  font-weight:600;
  letter-spacing:.2px;
  opacity:.75;
  color:var(--muted);
}

.brand-phases,
.brand-center{
  grid-column:2;
  justify-self:center;
  white-space:nowrap;
  margin:0;
  padding:0;
  font-size:17px;
  font-weight:600;
  letter-spacing:.25px;
  line-height:1;
}

.brand-right{
  grid-column:3;
  justify-self:end;
  white-space:nowrap;
  font-size:16px;
  font-weight:600;
  letter-spacing:.2px;
  opacity:.75;
  color:var(--muted);
}

/* Avoid extra line-box height from <b> */
.brand-phases b,
.brand-center b{
  display:inline;
  font-weight:600;
}

/* =========================
   NAV
   ========================= */
.nav a{
  color:var(--text);
  text-decoration:none;
  padding:10px 12px;
  border-radius:10px;
  opacity:.9;
}
.nav a:hover{
  background:rgba(255,255,255,0.05);
  opacity:1;
}

/* =========================
   HERO
   ========================= */
.hero{
  position:relative;
  padding:12vmin 0 8vmin;
  background:radial-gradient(80% 60% at 50% 0%, rgba(154,211,255,0.14), transparent 60%);
  min-height: 100vh;
  display:flex;
  align-items:center;      /* vertical centering */
  justify-content:center;  /* horizontal centering */
  text-align:center;
}

.hero .wrap{ width:100%; }

.display{
  font-size:clamp(28px,5vw,60px);
  line-height:1.05;
  letter-spacing:0.2px;
  margin:0 0 12px;
}

.knuckle{color:var(--brand)}

.lede{
  color:var(--muted);
  max-width:100%;
  margin:0 0 20px;
}

.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================
   BUTTONS
   ========================= */
.btn{
  display:inline-flex;
  gap:8px;
  align-items:center;
  background:var(--brand);
  color:#0b0c10;
  border:none;
  padding:12px 16px;
  border-radius:14px;
  font-weight:600;
  text-decoration:none;
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,0.16);
  color:var(--text);
}

/* =========================
   SECTIONS / CARDS
   ========================= */
section{position:relative;z-index:1}

.work .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:16px;
}

.card{
  background:var(--surface);
  padding:18px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
}
.card h3{margin:6px 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}

.about .facts{display:grid;gap:6px;padding-left:18px}

.contact-form{display:grid;gap:12px;max-width:760px}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form input,.contact-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:#0f1115;
  color:var(--text);
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--brand)}

/* =========================
   PHASE TEXT COLORS
   ========================= */
.phase1{ color: var(--phase-1); }
.phase2{ color: var(--phase-2); }
.phase3{ color: var(--phase-3); }
.phase4{ color: var(--phase-4); }
.phase5{ color: var(--phase-5); }

/* optional helper for readable contrast */
.soft-contrast{ color: rgb(236,232,245); }

.phase-link{ display:flex; flex-direction:column; }

.phase-pill-wrap{
  display:flex;
  justify-content:center;
  margin-top:24px;
  margin-bottom:24px;
}

/* base pill */
.phase-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
  text-decoration:none;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.25);
  color:var(--text);
  transition:all .2s ease;
}

.phase-pill:hover{
  background:rgba(255,255,255,0.06);
  transform:translateY(-1px);
}

/* Phase I */
.phase-pill.phase-1{
  color:var(--phase-1);
  border-color:var(--phase-1);
}
.phase-pill.phase-1:hover{
  background:rgba(99,131,114,0.14);
  box-shadow:0 0 0 1px rgba(99,131,114,0.35);
}

/* Phase II */
.phase-pill.phase-2{
  color:var(--phase-2);
  border-color:var(--phase-2);
}
.phase-pill.phase-2:hover{
  background:rgba(156,45,18,0.12);
  box-shadow:0 0 0 1px rgba(156,45,18,0.35);
}

/* locked pill */
.phase-pill.locked{
  opacity:0.35;
  cursor:not-allowed;
  pointer-events:none;
  filter:grayscale(1);
}
.phase-pill.locked::after{
  content:" 🔒";
  font-size:13px;
  opacity:.7;
}

/* Go.To.Phases pill */
.go-to-phases-wrap{
  display:flex;
  justify-content:center;
  margin:3rem 0 4rem;
}

.phase-pill.go-to-phases{
  background-color: var(--brand);
  color: rgba(232, 233, 239, 0.55);
  border: 1px solid rgba(232, 233, 239, 0.45);
  opacity: 0.75;

  transition:
    opacity 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease,
    filter 0.25s ease;
}
.phase-pill.go-to-phases:hover{
  opacity: 1;
  color: var(--text);
  border-color: var(--text);
  box-shadow: 0 0 10px rgba(232, 233, 239, 0.35);
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* =========================
   ROXIE APPROVED PILL
   ========================= */
.roxie-approved-pill{
  display:inline-block;
  padding:0.4rem 0.9rem;
  border-radius:999px;
  background-color:transparent;
  color:var(--text);
  border:1px solid var(--text);
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  opacity:0.85;
  pointer-events:none;
}

/* Inherit phase color from body class */
.phase-1 .roxie-approved-pill{ color:var(--phase-1); border-color:var(--phase-1); }
.phase-2 .roxie-approved-pill{ color:var(--phase-2); border-color:var(--phase-2); }
.phase-3 .roxie-approved-pill{ color:var(--phase-3); border-color:var(--phase-3); }
.phase-4 .roxie-approved-pill{ color:var(--phase-4); border-color:var(--phase-4); }
.phase-5 .roxie-approved-pill{ color:var(--phase-5); border-color:var(--phase-5); }

/* =========================
   HERO → HEADER DOCKING (centered, one line)
   ========================= */
.brand-center{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

#headerHeroSlot{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1;
}
#headerHeroSlot br{display:none;} /* never allow a second line in header */

.heroDockFloat{
  position:fixed;
  left:0;
  top:0;
  z-index:9999;
  pointer-events:none;
  margin:0;
  white-space:nowrap;
  transform-origin:center center;
  will-change: transform, opacity;
}
#heroTitle{ will-change: transform, opacity; }

/* =========================
   FOOTER — PILL SECTION (matches phase-pill vibe)
   ========================= */
.site-footer{
  margin-top: 4rem;
  padding: 0;
  border-top: none;
}

.site-footer .wrap{
  max-width: var(--grid-max);
  margin-inline: auto;
  padding: clamp(16px,2vw,24px);
}

.text-terminal{
  color: rgba(46, 235, 87, 1);
}
.text-terminal-soft{
  color: rgba(46, 235, 87, 0.65);
}

.text-terminal-dim{
  color: rgba(46, 235, 87, 0.45);
}

/* The pill container */
.footer-row{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 1rem;

  width: 100%;
  max-width: 100%;

  padding: 12px 18px;
  border-radius: 999px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.18);

  /* subtle lift like pills */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}

.footer-left,
.footer-right{
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: rgba(232,233,239,0.75);
}

.footer-left{ text-align:left; }
.footer-center{ text-align:center; }
.footer-right{ text-align:right; }

/* =========================
   DISCLAIMER PAGE (layout guardrails)
   Stops hero-centering rules from hijacking disclaimer layout
   ========================= */
body.disclaimer-page .hero{
  min-height: auto;
  display: block;
  text-align: left;
  padding: 7vmin 0 5vmin; /* matches disclaimer.html intent */
  background: radial-gradient(80% 60% at 50% 0%, rgba(154,211,255,0.14), transparent 60%);
}

body.disclaimer-page .brand-top,
body.disclaimer-page .display,
body.disclaimer-page .lede{
  text-align: center;
}

body.disclaimer-page .card{
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   DISCLAIMER FOOTER — PILL HARD LOCK
   Matches disclaimer card width exactly (860px)
   ========================= */
body.disclaimer-page .site-footer.disclaimer-footer{
  margin-top: 3rem;
  padding: 0 !important;
  border-top: none !important;
}

body.disclaimer-page .site-footer.disclaimer-footer .wrap{
  max-width: var(--grid-max);
  margin-inline: auto;
  padding: clamp(16px,2vw,24px);
}

/* Constrain the pill to match the disclaimer card */
body.disclaimer-page .site-footer.disclaimer-footer .footer-row--disclaimer{
  max-width: 860px;
  margin-inline: auto;
  width: 100%;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 820px){
  .brand-phases,
  .brand-center{ font-size:16px; }
}
@media (max-width: 720px){
  .contact-form .row{ grid-template-columns:1fr; }
  .brand-left{ font-size:14px; }
  .brand-right{ font-size:13px; }
  .brand-phases,
  .brand-center{ font-size:15px; }
}
@media (max-width: 640px){
  .footer-row{
    grid-template-columns: 1fr;
    text-align: center;
    padding: 14px 16px;
    border-radius: 18px; /* pill becomes card on small screens */
  }
  .footer-left,
  .footer-right{ text-align: center; }
}

/* =========================================================
   DISCLAIMER — PHASE V THEME (matches phase5.html look)
   Scoped to: body.disclaimer-page.phase5-theme
   ========================================================= */

body.disclaimer-page.phase5-theme{
  /* Phase V palette */
  --phase5: #c9a227; /* verdict gold */
  --ink: #f3ead0;
  --muted5: #d4c49a;

  --bg5: #07090a;
  --panel5: rgba(18,23,25,.78);
  --line5: rgba(255,255,255,.10);
  --shadow5: 0 18px 60px rgba(0,0,0,.55);
  --radius5: 18px;

  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 18% 18%, rgba(201,162,39,.16), transparent 62%),
    radial-gradient(900px 650px at 78% 28%, rgba(201,162,39,.12), transparent 58%),
    radial-gradient(1000px 780px at 55% 88%, rgba(255,255,255,.06), transparent 64%),
    linear-gradient(180deg, #050607, var(--bg5));
}

/* Use the same centered, card-stack layout as phase5.html */
body.disclaimer-page.phase5-theme main#main.wrap{
  max-width: none;
  padding: 22px;
}

body.disclaimer-page.phase5-theme .disclaimer-shell{
  width: min(920px, 100%);
  margin-inline: auto;
  display: grid;
  gap: 18px;
}

/* Topbar */
body.disclaimer-page.phase5-theme .disclaimer-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--line5);
  background: var(--panel5);
  backdrop-filter: blur(10px);
  border-radius: var(--radius5);
  box-shadow: var(--shadow5);
}

body.disclaimer-page.phase5-theme .disclaimer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

body.disclaimer-page.phase5-theme .phase-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--phase5);
  box-shadow: 0 0 18px rgba(201,162,39,.55);
  flex:0 0 auto;
}

body.disclaimer-page.phase5-theme .disclaimer-brand strong{
  font-weight:650;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Chips */
body.disclaimer-page.phase5-theme .chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  color: var(--muted5);
}
body.disclaimer-page.phase5-theme .chip{
  padding:6px 10px;
  border:1px solid var(--line5);
  border-radius:999px;
  background: rgba(0,0,0,.22);
}
body.disclaimer-page.phase5-theme .chip.phase{
  border-color: rgba(201,162,39,.70);
  color: #fff4cf;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Sheet card */
body.disclaimer-page.phase5-theme .disclaimer-card{
  border:1px solid var(--line5);
  background: var(--panel5);
  backdrop-filter: blur(10px);
  border-radius: var(--radius5);
  padding:18px;
  box-shadow: var(--shadow5);
}

body.disclaimer-page.phase5-theme .sheet{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18)),
    radial-gradient(900px 600px at 30% 10%, rgba(201,162,39,.20), transparent 65%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

body.disclaimer-page.phase5-theme .sheet-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}

body.disclaimer-page.phase5-theme .label{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  letter-spacing:.3px;
  color: rgba(243,234,208,.78);
}

body.disclaimer-page.phase5-theme .id{
  margin-top:6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  color: rgba(243,234,208,.58);
}

body.disclaimer-page.phase5-theme .seal{
  border:1px solid rgba(201,162,39,.75);
  color:#fff4cf;
  background: rgba(201,162,39,.10);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  padding:8px 10px;
  border-radius:10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  white-space:nowrap;
  transform: rotate(-.75deg);
}
body.disclaimer-page.phase5-theme .seal b{ font-weight:700; letter-spacing:.6px; }

body.disclaimer-page.phase5-theme .sheet-body{
  padding:14px;
  display:grid;
  gap:10px;
}

body.disclaimer-page.phase5-theme .sheet-body h1{
  margin:0;
  font-size: clamp(26px, 4vw, 44px);
  line-height:1.03;
  letter-spacing:.4px;
  text-align:left;
}

body.disclaimer-page.phase5-theme .sheet-body p{
  margin:0;
  line-height:1.65;
  font-size:14px;
  color: rgba(243,234,208,.90);
}

body.disclaimer-page.phase5-theme .sheet-body .muted{
  color: var(--muted5);
  font-size:13px;
}

/* Buttons (phase5 style pills) */
body.disclaimer-page.phase5-theme .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

body.disclaimer-page.phase5-theme .btn{
  appearance:none;
  border:1px solid var(--line5);
  background: rgba(0,0,0,.20);
  color: var(--ink);
  padding:10px 12px;
  border-radius:999px;
  text-decoration:none;
  font-size:13px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

body.disclaimer-page.phase5-theme .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(243,234,208,.24);
  background: rgba(0,0,0,.32);
}

body.disclaimer-page.phase5-theme .mini-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background: var(--phase5);
  box-shadow: 0 0 14px rgba(201,162,39,.55);
}

/* Footer (phase5 style) */
body.disclaimer-page.phase5-theme .phase5-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line5);
  background: rgba(0,0,0,.18);
  border-radius: var(--radius5);
  color: var(--muted5);
  font-size:12px;
}

body.disclaimer-page.phase5-theme .phase5-footer b{ color:#fff4cf; font-weight:650; }

body.disclaimer-page.phase5-theme .phase5-footer .status{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:#d7c79b;
}

/* Make Roxie pill match Phase V */
body.disclaimer-page.phase5-theme .roxie-approved-pill{
  color:#fff4cf;
  border-color: rgba(201,162,39,.70);
  background: rgba(201,162,39,.10);
  opacity: 1;
}

/* Phase Blue (future / alternate phase color) */
.text-phaseBlue{ color: var(--phaseBlueSoft); }

/* =========================================================
   INDEX GRID — ORDER FIX (ONLY CHANGE)
   Forces cards to follow DOM order:
   Row 1: Phases | Phase I | Phase II
   Row 2: Phase III | Phase IV | Phase V
   ========================================================= */
.work .grid > article{
  order: 0 !important;
}

/* Disclaimer background: Phase I–V image, fixed (no scroll) */
body.disclaimer-page {
  background-image: url("/assets/brand/Phase_I-V.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed; /* this is the no-scroll lock */
}