/* === Shapes-only banner system ========================================= */
/* color swatches and sizing */
:root {
  --bg:        #ffffff;     /* page background */
  --panel:     #ffffff;     /* cards / main panels */
  --nav-panel: #003976;     /* side navbar background */
  --ink:       #003976;     /* primary text */
  --accent:    #EFAB00;     /* gold: headings, tags, buttons */
  --accent-2:  #003976;     /* deep blue: outlines / emphasis */
  --nav-bg:    #2c8ecd;     /* top navbar background */
  --border:    #96A0A5;     /* dark grey borders */
  --blue:       #002b5c;
  --light-blue: #0072ce;
  --gold:       #ffcc00;
  --white:      #ffffff;
  --container: min(1280px, 100% - 2rem); 
}

/* Banner grid */
.banner{
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  height: var(--banner-h);
  width: 100%;
  --banner-h: 80px;        /* banner strip height */
  --cols: 8;               /* number of tiles */
  --unit: 20px;            /* pattern cell size */
}

/* Base tile style */
.tile{
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  block-size: 100%;
  background-color: var(--blue);
}

/* ——— Patterns ——— */

/* Circle pattern (gold bullseye + ring on blue) */

.circle{
  background:
    radial-gradient(circle at 50% 50%, var(--gold) 25%, transparent 26%) center/100% 100% no-repeat,
    radial-gradient(closest-side, transparent 65%, var(--gold) 66% 66%, transparent 67%) center/100% 100% no-repeat,
    var(--blue);
}

/* Half triangle (diagonal split) */
.half{
  background: linear-gradient(135deg, var(--light-blue) 50%, var(--gold) 0);
}

/* Triangles (diagonal hatching) */
.triangles{
  background:
    repeating-linear-gradient(
      45deg,
      var(--white) 0 calc(var(--unit) * 1),
      transparent calc(var(--unit) * 1) calc(var(--unit) * 2)
    ),
    var(--blue);
}

/* Checker (efficient via conic-gradient) */
.checker{
  --size: calc(var(--unit) * 2);
  background:
    conic-gradient(
      from 90deg,
      var(--gold) 0 90deg,
      var(--blue) 0 180deg,
      var(--gold) 0 270deg,
      var(--blue) 0 360deg
    );
  background-size: var(--size) var(--size);
}

/* Stripes (vertical) */
.stripes{
  background:
    repeating-linear-gradient(
      90deg,
      var(--white) 0 calc(var(--unit) * 1),
      var(--blue)  calc(var(--unit) * 1) calc(var(--unit) * 2)
    );
}

/* Diagonals (\\ hatch) */
.diagonals{
  background:
    repeating-linear-gradient(
      135deg,
      var(--white) 0 calc(var(--unit) * 1),
      var(--blue)  calc(var(--unit) * 1) calc(var(--unit) * 2)
    );
}

/* Vertical bars (gold/blue) */
.bars{
  background:
    repeating-linear-gradient(
      90deg,
      var(--gold) 0 calc(var(--unit) * 0.5),
      var(--blue)  calc(var(--unit) * 0.5) calc(var(--unit) * 1)
    );
}

/* Arc (light-blue circle bleeding from left with gold edge) */
.arc{
  background:
    radial-gradient(circle at left center, var(--light-blue) 40%, var(--gold) 41% 41%, transparent 42%),
    var(--blue);
}

/* Optional: quick density tweak for smaller screens */
@media (max-width: 560px){
  :root{ --unit: 14px; }
}

/* base sizes and html helpers */
*, *::before, *::after { box-sizing: border-box; }

html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 400 16px/1.6 ui-serif, Georgia, "Times New Roman", Times, serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* Header */
.site-header.css-banner{
  /* gradient base */
  background:
    linear-gradient(110deg, rgba(255,255,255,.04) 0 55%, transparent 55% 100%),
    linear-gradient(to right, var(--ink), var(--nav-panel));
  color:#fff;
  border-radius: 0;
  margin: 0;
  max-width: none;        
}

/* subtle right-side chevrons */
.site-header.css-banner::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right,
      transparent 0 58%,
      rgba(255,255,255,.06) 58% 64%,
      transparent 64% 70%,
      rgba(255,255,255,.06) 70% 76%,
      transparent 76% 100%
    );
  pointer-events:none;
}

.header-inner.wrap, .layout {
  width: var(--container);
  max-width: none;
  margin-inline: auto;
}


.brand a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1.05rem;
}

.page-title{
  margin:.35rem 0 0;
  font-weight: 800;
  line-height: 1.1;
  font-size: 2rem;
}

/* optional subtitle */
.tagline{
  margin:.25rem 0 0;
  opacity:.9;
}

/* Larger screens */
@media (min-width: 768px){
  .site-header.css-banner{ padding: 3rem 2rem; }
  .page-title{ font-size: 2.4rem; }
}

/* Remove image-specific rules when using css-banner */
.site-header.css-banner picture,
.site-header.css-banner img{ display:none; }

/* Global layout */
/* Use either .wrap OR .layout in HTML; both map to the same grid */
.wrap, .layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  display: grid;
  grid-template-columns: 280px 1fr; /* sidebar + main */
  gap: 1rem;
  align-items: start;
}

/* Vertical sidebar (secondary nav) */
.sidenav { position: sticky; top: 4.5rem; }
.sidenav__title { margin: .25rem 0 .5rem; font: 700 1rem/1 var(--font, inherit); color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
.sidenav__list,
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }

.sidenav a,
.nav-list a {
  display: block;
  text-decoration: none;
  background: var(--nav-panel);
  padding: .65rem .8rem;
  border-radius: 10px;
  border: 1px solid var(--accent);   /* gold outline */
  font-weight: 600;
  color: var(--accent);               /* gold text */
}

.sidenav a:hover, .sidenav a:focus-visible,
.nav-list a:hover, .nav-list a:focus-visible { outline: 2px solid var(--accent-2); }

.sidenav a[aria-current="page"],
.nav-list a[aria-current="page"] { outline: 2px solid var(--accent-2); }

/* Main content panel */
main {
  background: var(--panel);
  border-radius: 14px;
  padding: 1.2rem;
  border: 1px solid var(--border);
}

/* Intro block with headshot */
.intro {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: center;
}
.intro img {
  width: 100%; height: auto;
  border-radius: 12px;
  border: 1px solid #ddd;
}

/* Section headings */
h2 {
  margin-top: 1.25rem;
  color: var(--accent);
  border-bottom: 2px solid #ececec;
  padding-bottom: .25rem;
}

/* Footer */
footer { text-align: center; font-size: .9rem; color: #6c5858; padding: 2rem 1rem; }

/* Responsive: collapse sidebar on small screens */
@media (max-width: 900px) {
  .wrap, .layout { grid-template-columns: 1fr; }
  .sidenav { position: static; order: 2; }       /* place below main if you like */
  .intro { grid-template-columns: 1fr; text-align: center; }
}

/* Top (primary) navbar */
.navbar{
  --bg: #2c8ecd;        /* light blue bar */
  --fg: #EFAB00;        /* gold links */
  --hover: rgba(255,255,255,.10);
  --active: rgba(255,255,255,.18);

  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  border-top: 2px solid rgba(255,255,255,.05);
  border-bottom: 2px solid rgba(0,0,0,.12);
}
.navbar__inner.wrap, .layout {
  width: var(--container);
  max-width: none;          
  margin-inline: auto;
}

.navbar a{
  color: var(--fg);
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: .5rem;
  font-weight: 600; letter-spacing: .02em; line-height: 1.2;
}
.navbar a:hover,
.navbar a:focus-visible{ background: var(--hover); outline: none; }
.navbar a[aria-current="page"]{ background: var(--active); }

/* On very small screens, let it scroll horizontally */
@media (max-width: 480px){
  .navbar__inner{
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .navbar a{ display: inline-block; }
}

/* Cards / projects */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  display: flex; flex-direction: column;
}
.card figure { margin: 0 0 .5rem 0; }
.card figure img {
  border-radius: 10px;
  border: 1px solid #ddd;
}
.card h3 { margin: .25rem 0 .25rem; color: var(--accent); }
.summary { margin: 0 0 .5rem 0; }

.meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .6rem;
  margin: .25rem 0 .5rem;
}
.meta dt { font-weight: 600; color: var(--accent); }
.meta dd { margin: 0; }

.highlights { margin: .25rem 0 .5rem; }
.highlights li { margin-left: 1rem; }

/* Buttons */
.cta { margin-top: auto; }
.button {
  display: inline-block;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  color: var(--accent);
  background: var(--panel);
  margin-right: .5rem;
}
.button:hover,
.button:focus-visible { outline: 2px solid var(--accent-2); }

/* Contact form */
.contact-form { max-width: 720px; }
.field { display: grid; gap: .35rem; margin: .6rem 0; }
.field label { font-weight: 600; color: var(--accent); }
.field input, .field textarea {
  padding: .6rem .7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit; background: #fff;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent-2); }

/* Tag pills */
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1rem; }
.tag {
  display: inline-block;
  padding: .3rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: .9rem; font-weight: 600;
  color: var(--accent);
}

/* Responsive video */
.video-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0; display: block;
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}