:root{
  /* Warm, cream-on-charcoal palette */
  --bg: #2B2726;            /* warm charcoal page background (not blue) */
  --surface: #F6F0E6;       /* cream card background */
  --text: #1E1A16;          /* inky brown-black for body text */
  --muted: #6E655C;         /* warm grey for secondary text */
  --line: #E7DFD3;          /* warm border/divider on cream */
  --footer-text: #EDE6DC;   /* footer text on dark bg */

  /* Accents */
  --accent: #FF6A2A;        /* safety orange (chips/links/hover) */
  --accent-2: #8A7C6B;      /* muted taupe (secondary accent, subtle) */

  /* Components */
  --chip-bg: #FF6A2A;
  --chip-border: #FF6A2A;
  --chip-text: #FFFFFF;

  --media-bg: #F2EDE4;        /* light tile bg inside cards */
  --media-fallback: #EDE6DA;  /* <img>/<video> fallback */
  --details-bg: #FAF6EE;      /* dropdown panel bg */
  --header-glass: rgba(255, 247, 236, .78); /* warm-tinted sticky header */
  --surface-soft: #F7F1E8;     /* soft chip/button bg */

  /* Layout/animation */
  --radius: 16px;
  --shadow: 0 1px 1px rgba(37,29,20,.05), 0 12px 30px rgba(37,29,20,.10);
  --space: clamp(16px, 2vw, 24px);
  --maxw: 2000px;
  --speed: 400ms;
  
  
  /* fonts  */
  --font-body: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-brand: "Space Grotesk", var(--font-body);
}



* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body  { font: 400 16px/1.6 var(--font-body); }
.brand{ font: 700 clamp(18px, 2.8vw, 24px)/1 var(--font-brand); }

/* Accessibility */
.skip { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus { position:static; width:auto; height:auto; padding:.5rem 1rem; background:var(--accent); color:white; }

.wrap { width:min(100% - 2*var(--space), var(--maxw)); margin-inline:auto; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(6px);
  background: var(--header-glass);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; }
.brand { font: 700 clamp(18px, 2.8vw, 24px)/1 "Space Grotesk", Inter, system-ui; margin:0; letter-spacing:.2px; }
.nav a{ color:var(--muted); text-decoration:none; margin-left:1rem; padding:.35rem .6rem; border-radius:999px; border:1px solid transparent; }
.nav a:hover{ color:var(--text); border-color:var(--line); background: var(--surface); }

/* Projects container → 1 col on narrow, 2 cols on wide */
.projects{
  padding: calc(var(--space)*1.5) var(--space);
  width: min(100% - 2*var(--space), var(--maxw));
  margin-inline: auto;

  display: grid;
  grid-template-columns: 1fr;            /* default: single column */
  gap: calc(var(--space)*1.25);          /* space between cards */
}

/* two columns when there’s room (tweak breakpoint if you like) */
@media (min-width: 1300px){
  .projects{ grid-template-columns: 1fr 1fr; }
}

/* Keep the dotted “seam” only for single-column stacks */
.project + .project{
  border-top: 1px solid var(--line);
  margin-top: calc(var(--space)*2);
  padding-top: calc(var(--space)*2);
}
@media (min-width: 900px){
  .project + .project{ border-top: 0; margin-top: 0; padding-top: 0; }
}


/* Project card (simple) */
.project{
  background: var(--surface);
  padding: var(--space);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 200ms cubic-bezier(.2,.8,.2,1);
}

.project:hover { transform: translateY(-3px) scale(1.01); }

.media { transition: transform 180ms cubic-bezier(.2,.8,.2,1); }
.media:hover { transform: translateY(-2px) scale(1.01); }

.blurb{ margin:.6rem 0 1rem; }

/* Masonry media grid (mixed aspect ratios welcome) */
.media-grid{ column-width:320px; column-gap:14px; }
.media{
  break-inside: avoid; margin: 0 0 14px 0;
  background: var(--media-bg);
  border:1px solid var(--line); border-radius:12px; overflow:clip;
}
.media img, .media video{ display:block; width:100%; height:auto; background: var(--media-fallback); }
.media figcaption{ padding:.5rem .75rem; font-size:.85rem; color:var(--muted); border-top:1px solid var(--line); }

/* Details / dropdown */
.more{
  margin-top:1rem; border:1px dashed var(--line); border-radius:12px; overflow:clip; background: var(--details-bg);
}
.more > summary{
  cursor:pointer; list-style:none; padding:.75rem 1rem; user-select:none; display:flex; align-items:center; gap:.6rem; color:var(--muted);
}
.more > summary::-webkit-details-marker{ display:none; }
.caret::before{ content:"▸"; display:inline-block; transform: translateY(-1px); transition: transform var(--speed); }
.more[open] .caret::before{ transform: rotate(90deg) translateY(-1px); }
.more-body{ padding:.25rem 1rem 1rem; color:var(--muted); }

.contact .wrap{
  width: min(100% - 2*var(--space), 720px); /* make the card narrower */
  margin-inline: auto;                      /* center it */
  padding: var(--space);
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.contact h2{ margin-top:0; font:700 clamp(20px,3vw,26px)/1.2 "Space Grotesk", Inter, system-ui; }
.socials{ list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-wrap:wrap; gap:.6rem; }

/* Social "chip" buttons (if you keep any) */
.chip{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; color: var(--text);
  padding:.45rem .7rem; border-radius:999px; border:1px solid var(--line); background: var(--surface-soft);
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms, border-color 160ms;
}
.chip:hover{
  border-color: var(--accent);
  /* Accent ring derived from --accent */
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 82%);
  transform: scale(1.02);
}

/* Footer */
.site-footer{ border-top:0px solid var(--line); color: var(--footer-text); }
.site-footer .wrap {
  padding: 1.1rem var(--space);
  text-align: center; /* center the text */
}


/* Media hover lift */
.media:hover{ transform: translateY(-2px); transition: transform 180ms cubic-bezier(.2,.8,.2,1); }

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

/* Tag chips next to the title */
.project-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 1rem;
}

.tags {
  list-style: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
}

.tags li {
  font-size: .8rem;
  color: var(--chip-text);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  padding: .18rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Plain email link style */
.email-link {
  text-decoration: underline;
  color: var(--text);
  font-weight: 600;
}
.email-link:hover { color: var(--accent); }

/* ===== Lightbox (click-to-expand) ===== */
.media { position: relative; }

/* Click-to-expand button (centered SVG icon) */
.media .expand{
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-soft); color: var(--text);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  opacity: 0; transform: translateY(-2px);
  transition: opacity .18s, transform .18s, border-color .18s, color .18s;
  cursor: pointer;
}
.media:hover .expand,
.media .expand:focus-visible { opacity: 1; transform: translateY(0); }
.media .expand:hover{ border-color: var(--accent); color: var(--accent); }
.media .expand svg{ width: 18px; height: 18px; display: block; stroke: currentColor; stroke-width: 2; fill: none; }


/* overlay */
.lightbox{
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(52,26,58,.55); /* purple-tinted glass; tweak if you like */
  backdrop-filter: blur(4px) saturate(1);
  z-index: 1000;
}
.lightbox.open{ display: flex; }

.lightbox .close{
  position: absolute; top: 14px; right: 16px;
  padding: .45rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); cursor: pointer;
}
.lightbox figure{
  margin: 0;
  width: min(96vw, 1600px);          /* wider cap so it can grow */
  max-height: calc(100vh - 80px);
  display: flex; gap: 10px;
}
.lightbox .media-wrap{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 8px; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;  /* center the media */
  flex: 1 1 auto;
}
.lightbox img,
.lightbox video{
  display: block;
  width: 100%;                      /* <- fill the container */
  height: auto;
  max-height: calc(100vh - 160px);  /* keep within viewport height */
  background: var(--media-fallback);
  border-radius: 8px;
}
.lightbox .caption{ color: var(--muted); text-align:center; font-size:.95rem; }

/* reduced motion: keep it instant */
@media (prefers-reduced-motion: reduce){
  .media .expand{ transition:none; }
}


/* Fixes alignment for the first project card title */
.projects > .project:first-of-type .project-head h2{
  margin-top: 0;
  line-height: 1.1;        /* slightly tighter box */
  position: relative;
  top: -3px;               /* tweak: -2px to -5px to taste */
}

body{
  background-color: var(--bg);

  /* Layer 1: diagonals — top-left, fixed 1920×1080 */
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'>\
<g fill='none' stroke='%23FF6A2A' stroke-linecap='round' stroke-width='26'>\
  <path d='M-200,300 L900,-800'/>\
  <path d='M-140,360 L960,-740'/>\
  <path d='M-80,420 L1020,-680'/>\
  <path d='M-20,480 L1080,-620'/>\
  <path d='M-20,600 L1140,-560'/>\
</g></svg>"),

  /* Layer 2: arcs — bottom-right, fixed 1450×700 (tight to arcs) */
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='1450' height='700' viewBox='500 500 1450 700'>\
<g fill='none' stroke='%23FF6A2A' stroke-linecap='round' stroke-width='26'>\
  <path d='M500,1200 A900,900 0 0 0 1950,500'/>\
  <path d='M600,1200 A800,800 0 0 0 1950,600'/>\
  <path d='M700,1200 A700,700 0 0 0 1950,700'/>\
</g></svg>");
  
  
  background-repeat: no-repeat, no-repeat;
  /* first layer (diagonals), second layer (arcs) */
background-position: top left, right -28px bottom -20px;

  background-size: auto, auto;                 /* use intrinsic px sizes */
}