/* ==========================================================================
   Ryan Lussing — portfolio styles
   Source of truth: design/reference.html. Values match the reference exactly.
   Mobile-first: base styles are the reference's phone layout (up to 720px),
   then tablet (721px and up) and desktop (1081px and up) build on them.
   ========================================================================== */

/* Design tokens ------------------------------------------------------------ */
:root{
  /* Palette from the reference */
  --bg:#0b0f14;
  --panel:#111824;
  --panel2:#0f1621;
  --soft:#161f2d;
  --text:#f4f7fb;
  --muted:#a5b0c1;
  --line:rgba(255,255,255,.08);
  --gold:#ffb52e;
  --blue:#71a9ff;
  --cyan:#80d8ff;
  --pink:#ff6ec7;

  /* Colours the reference uses inline */
  --text-lead:#dde6f2;
  --text-kicker:#d8e0eb;
  --text-eyebrow:#b4c1d5;
  --text-role:#c3d1e5;
  --text-footer:#95a2b5;
  --gold-light:#ffbb3c;
  --gold-deep:#f59f00;
  --orange:#ff7b00;
  --on-gold:#111;
  --bg-top:#091018;
  --header-bg:rgba(9,13,18,.72);
  --modal-scrim:rgba(3,5,8,.84);
  --modal-bg:#0b1119;

  /* Type */
  --font-body:'DM Sans',Arial,sans-serif;
  --font-display:'Space Grotesk',Arial,sans-serif;

  /* Shape, depth and layout */
  --radius:22px;
  --shadow:0 24px 60px rgba(0,0,0,.35);
  --shell-max:1180px;
}

/* Base --------------------------------------------------------------------- */
*{box-sizing:border-box}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--font-body);background:radial-gradient(circle at top right, rgba(113,169,255,.14), transparent 28%),radial-gradient(circle at top left, rgba(255,181,46,.08), transparent 20%),linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 100%);color:var(--text)}
body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-display)}
.shell{width:min(100% - 24px,var(--shell-max));margin:0 auto}

/* Skip link: off-screen until focused with the keyboard */
.skip-link{position:absolute;left:12px;top:-80px;z-index:100}
.skip-link:focus{top:12px}

/* Header ------------------------------------------------------------------- */
header{position:static;top:0;z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:var(--header-bg);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0}
.wordmark{font-family:var(--font-display);font-size:1.06rem;font-weight:700;letter-spacing:-.05em}
.wordmark i{color:var(--gold);font-style:normal}
.nav{display:none;gap:16px;flex-wrap:wrap;font-size:.95rem;color:var(--muted)}

/* Phone menu: the reference hides the nav on phones; this reuses the modal
   close button and the Connect link tiles so the links stay reachable.
   The negative margin sits the 38px button inside the header padding, so the
   header keeps the reference height. */
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:0;background:rgba(255,255,255,.08);color:#fff;width:38px;height:38px;border-radius:10px;font-size:1.25rem;padding:0;margin:-8px 0}
.menu-toggle .close-icon,.menu-toggle[aria-expanded="true"] .menu-icon{display:none}
.menu-toggle[aria-expanded="true"] .close-icon{display:inline}
@media (max-width: 720px){
  .header-inner{flex-wrap:wrap}
  .nav.is-open{display:flex;flex-direction:column;flex-basis:100%;gap:10px}
  .nav.is-open a{padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-weight:700;color:var(--text)}
}

/* Hero --------------------------------------------------------------------- */
.hero{padding:46px 0 42px;display:grid;grid-template-columns:1fr;gap:28px;align-items:end}
.kicker{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);font-size:.85rem;color:var(--text-kicker);letter-spacing:.12em;text-transform:uppercase}
.kicker::before{content:"";width:8px;height:8px;border-radius:999px;background:linear-gradient(180deg,var(--gold),var(--orange))}
h1{font-size:3.05rem;font-weight:600;line-height:.94;letter-spacing:-.085em;margin:.7rem 0 1rem}
h1 em{font-style:normal;color:var(--gold)}
h2{font-weight:600;letter-spacing:-.065em}
.lead{font-family:var(--font-display);font-size:1.08rem;line-height:1.55;letter-spacing:-.025em;color:var(--text-lead);max-width:640px}
.hero-copy p{font-size:1.02rem;line-height:1.7;color:var(--muted);max-width:62ch}
.quick-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* Buttons ------------------------------------------------------------------ */
.button{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);font-weight:700;transition:.2s ease;cursor:pointer}
.button:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.button.primary{background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));color:var(--on-gold)}
/* <button> elements don't inherit type or colour by default */
button.button{font:inherit;font-weight:700;color:inherit}

/* "At a glance" card ------------------------------------------------------- */
.side-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:var(--shadow)}
.side-card h3{margin:0 0 8px;font-size:1rem;color:#fff;letter-spacing:.08em;text-transform:uppercase}
.side-card p{margin:0;color:var(--muted);line-height:1.7}
.badge-strip{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
.mini{padding:14px 15px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.mini strong{display:block;font-family:var(--font-display);font-size:1.55rem;line-height:1;margin-bottom:4px}

/* Section heading block ---------------------------------------------------- */
.section{padding:28px 0 0}
.eyebrow{font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-eyebrow);margin-bottom:12px}
/* .bottom h2: the reference left the Connect heading unstyled (it sits outside
   a .section); it now matches the other section headings, as approved. */
.section h2,.bottom h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.02;letter-spacing:-.05em;margin:0 0 12px}
.section h2 em,.bottom h2 em{font-style:normal;color:var(--gold)}
.section-intro{max-width:780px;color:var(--muted);font-size:1.03rem;line-height:1.7;margin-bottom:26px}

/* Highlight tiles ---------------------------------------------------------- */
.highlights{display:grid;grid-template-columns:1fr;gap:16px}
.highlight{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:20px;padding:18px 18px 20px}
.highlight .num{font-family:var(--font-display);font-size:2rem;font-weight:800;letter-spacing:-.04em;margin-bottom:10px;color:#fff}
.highlight h3{font-size:1rem;margin:0 0 8px}
.highlight p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}
.highlight.award{display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.highlight.award img{width:190px;max-width:100%;height:auto;opacity:.98}

/* Project cards ------------------------------------------------------------ */
.grid{display:grid;grid-template-columns:1fr;gap:18px;padding-bottom:40px}
.card{overflow:hidden;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid var(--line);box-shadow:var(--shadow)}
.thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel2)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .overlay{position:absolute;inset:auto 0 0 0;padding:18px;background:linear-gradient(180deg,transparent,rgba(6,9,13,.86))}
.thumb .chipline{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.73rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.card-body{padding:18px 18px 20px}
.card-title{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.card-title h3{margin:0;font-size:1.22rem;line-height:1.15}
.role{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--text-role);font-weight:700}
.card p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.actions .button{padding:11px 14px;border-radius:12px;font-size:.92rem}
.actions .button.secondary{background:rgba(255,255,255,.03)}

/* Text-only thumbnail for projects without artwork (the reference's Cadillac card) */
.text-thumb{position:absolute;inset:0;padding:24px;background:radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 35%),linear-gradient(135deg,#151922 0%, #0b0d12 58%, #161d28 100%);display:flex;flex-direction:column;justify-content:space-between}
.text-thumb-lines{height:100%;background:linear-gradient(180deg, transparent 0%, transparent 65%, rgba(255,255,255,.08) 65%, rgba(255,255,255,.08) 66%, transparent 66%), radial-gradient(circle at 74% 26%, rgba(255,181,46,.18), transparent 22%)}
.text-thumb .brand{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:#d7dde8}
.text-thumb .name{font-family:var(--font-display);font-size:2rem;font-weight:800;letter-spacing:-.04em;max-width:260px}
.text-thumb .meta{display:flex;gap:8px;flex-wrap:wrap}

/* Connect link tiles ------------------------------------------------------- */
.bottom{padding:18px 0 56px}
.links{display:grid;grid-template-columns:1fr;gap:14px}
.links a{padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-weight:700}

/* Footer ------------------------------------------------------------------- */
footer{padding:24px 0 40px;color:var(--text-footer);font-size:.9rem}
.footerline{display:flex;flex-direction:column;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:18px;flex-wrap:wrap}

/* Video modal -------------------------------------------------------------- */
.modal{position:fixed;inset:0;background:var(--modal-scrim);display:none;align-items:center;justify-content:center;padding:24px;z-index:80}
.modal.open{display:flex}
.modal-panel{width:min(980px,100%);background:var(--modal-bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.modal-top{padding:16px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.modal-top h3{margin:0;font-size:1rem}
.modal-close{cursor:pointer;border:0;background:rgba(255,255,255,.08);color:#fff;width:38px;height:38px;border-radius:10px;font-size:1.25rem}
.modal-body{padding:0;background:#000}
.modal-body iframe{display:block;width:100%;aspect-ratio:16/9;max-height:78vh;border:0;background:#000}

/* Tablet: 721px and up ----------------------------------------------------- */
@media (min-width: 721px){
  .shell{width:min(var(--shell-max),calc(100% - 40px))}
  header{position:sticky}
  /* Keep anchored sections clear of the sticky header */
  .section,.bottom{scroll-margin-top:60px}
  .menu-toggle{display:none}
  .nav{display:flex}
  .hero{padding-top:72px}
  h1{font-size:clamp(3.2rem,8vw,6.6rem)}
  .lead{font-size:1.25rem}
  .badge-strip{grid-template-columns:repeat(2,1fr)}
  .highlights{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .footerline{flex-direction:row}
}

/* Desktop: 1081px and up --------------------------------------------------- */
@media (min-width: 1081px){
  .hero{grid-template-columns:1.2fr .95fr}
  .highlights{grid-template-columns:repeat(4,1fr)}
  .grid{grid-template-columns:repeat(3,1fr)}
  .links{grid-template-columns:repeat(3,1fr)}
}