/* Graywave — Rhys Gray UI/UX portfolio.
 *
 * Built from docs/GrayWave_Website_PrototypeHomepage.svg and aligned to the
 * client's design system in docs/graywave-styles.css: its tokens, type scale
 * and fonts (Rajdhani + Barlow) are adopted here, while keeping this site's
 * own class names, responsive layer and the components added since the
 * prototype (Process, the "Your project here" CTA card, logo thumbnails). */

:root {
  /* ---- client design tokens (docs/graywave-styles.css) ---- */
  --color-bg:          #2a2a2a;
  --color-surface:     #333333;
  --color-surface-2:   #3d3d3d;
  --color-nav-bg:      #1e1e1e;
  --color-border:      #4a4a4a;
  --color-text:        #e8e8e8;
  --color-text-muted:  #999999;
  --color-text-faint:  #555555;
  --color-aquamarine:  #85ffe8;   /* primary accent */
  --color-camel:       #be8e52;   /* secondary accent — sparingly */
  --color-vivid-royal: #3a21a3;   /* tertiary accent — sparingly */
  --color-coffee-bean: #210e05;   /* text on light / CTA fills */

  /* type scale (px, per the client sheet) */
  --text-hero: 54px; --text-heading-lg: 36px; --text-heading-md: 32px;
  --text-heading-sm: 17px; --text-nav: 20px; --text-nav-link: 12px;
  --text-body-lg: 15px; --text-body-md: 14px; --text-body-sm: 13px;
  --text-body-xs: 12px; --text-label: 11px; --text-micro: 10px;

  --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --tracking-wide: 1px; --tracking-wider: 1.5px; --tracking-widest: 2px; --tracking-display: 3px;
  --leading-tight: 1.04; --leading-snug: 1.1; --leading-normal: 1.65;
  --leading-relaxed: 1.75; --leading-loose: 1.85;

  --max-width: 1200px; --nav-height: 54px;
  --section-padding-x: 32px; --section-padding-y: 60px;
  --grid-gap: 16px; --card-gap: 48px;
  --radius-sm: 2px; --transition-fast: 0.2s ease;

  --font-display: 'Rajdhani', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;

  /* ---- aliases used throughout this stylesheet ---- */
  --bg: var(--color-bg);
  --bg-nav: var(--color-nav-bg);
  --panel: var(--color-surface);
  --panel-2: var(--color-surface-2);
  --line: var(--color-border);
  --line-soft: #3a3a3a;
  --text: var(--color-text);
  --body: var(--color-text-muted);
  --muted: var(--color-text-faint);
  --card-text: #888888;
  --mint: var(--color-aquamarine);
  --copper: var(--color-camel);
  --on-mint: var(--color-coffee-bean);
  --wrap: var(--max-width);
  --gap: var(--grid-gap);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); line-height: var(--leading-snug); margin: 0; font-weight: var(--weight-bold); }
p { margin: 0 0 1em; }
a { color: var(--mint); text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--section-padding-x); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--mint); color: var(--on-mint); padding: 10px 16px; z-index: 200; border-radius: var(--radius-sm); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* ---------- brand wordmark + two-tone underline ---------- */
.brand { display: inline-block; }
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  padding-bottom: 7px;
  position: relative;
}
.wordmark::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--mint) 0 70%, var(--copper) 70% 100%);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-nav-link);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  padding: 11px 26px; border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn-mint    { background: var(--mint); color: var(--on-mint); border-color: var(--mint); }
.btn-mint:hover { opacity: .88; }
.btn-outline { background: transparent; color: var(--body); border-color: var(--line); }
.btn-outline:hover { border-color: var(--body); color: var(--text); }
.btn-light   { background: #fff; color: var(--on-mint); border-color: #fff; }

/* ---------- primary nav ---------- */
.nav { position: sticky; top: 0; z-index: 99; background: var(--bg-nav); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; min-height: var(--nav-height); }
.nav .links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav .links a:not(.btn) {
  font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-nav-link);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: #ededed;
  padding-bottom: 2px; position: relative; transition: color var(--transition-fast);
}
.nav .links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--mint); transition: width var(--transition-fast);
}
.nav .links a:not(.btn):hover { color: var(--mint); }
.nav .links a:not(.btn):hover::after,
.nav .links a:not(.btn).active::after { width: 100%; }
.nav .links a:not(.btn).active { color: var(--mint); }

/* "Hire me" — outline CTA (per the client sheet) */
.nav-hire {
  font-size: var(--text-label); padding: 7px 18px; letter-spacing: var(--tracking-wider);
  background: transparent; color: var(--mint); border: 1px solid var(--mint);
}
.nav-hire:hover { background: var(--mint); color: var(--on-mint); opacity: 1; }

/* mobile nav toggle (checkbox hack, no JS) */
.navcb, .navtoggle { display: none; }
.navtoggle { margin-left: auto; width: 42px; height: 42px; cursor: pointer; position: relative; }
.navtoggle span, .navtoggle span::before, .navtoggle span::after {
  content: ""; position: absolute; left: 9px; width: 24px; height: 2px; background: var(--text); transition: .2s;
}
.navtoggle span { top: 20px; }
.navtoggle span::before { top: -7px; } .navtoggle span::after { top: 7px; }

/* ---------- section scaffold: label + trailing hairline ---------- */
main { display: block; }
.section { padding: var(--section-padding-y) 0; }
.section-head { display: flex; align-items: center; gap: var(--space-4, 16px); margin-bottom: 36px; }
.section-head h2 { font-family: var(--font-display); font-size: var(--text-heading-md); font-weight: var(--weight-bold); white-space: nowrap; }
.section-head::after { content: ""; flex: 1; height: 1px; background: var(--line); margin-left: 16px; }

/* full-width gradient divider between sections (echoes the prototype's wave line) */
.divider { border: 0; height: 2px; max-width: var(--wrap); margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--mint) 40%, var(--copper) 70%, transparent); }

.eyebrow {
  display: inline-block; font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-micro); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--mint);
}

/* ---------- hero ---------- */
.hero { padding: 80px 0 64px; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); align-items: center; }
.hero h1 { font-size: var(--text-hero); line-height: var(--leading-tight); margin-bottom: 22px; }
.hero h1 .accent { color: var(--mint); }
.hero p { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); color: #ededed; max-width: 32em; margin-bottom: 30px; }
.hero .row { display: flex; flex-wrap: wrap; gap: 14px; }
.placeholder {
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-display); font-size: var(--text-label); letter-spacing: var(--tracking-widest); text-transform: uppercase;
}
.hero-media { aspect-ratio: 4 / 3; }
img.hero-media  { width: 100%; height: auto; border: 1px solid var(--line); }
img.about-photo { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border: 1px solid var(--line); }

/* ---------- projects ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.card { border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; overflow: hidden; transition: border-color var(--transition-fast); }
.card:hover { border-color: var(--mint); }
/* fixed-height thumbnail so all cards match regardless of body-text length */
.card-thumb { position: relative; height: 220px; flex: 0 0 220px; background: var(--panel-2); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--text-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.card-thumb.logo { background: #f4f4f4; padding: 26px; }
/* max-height keeps a square mark (e.g. the Ask:Enact circle) at the same optical
   size as the wide wordmarks, which are limited by max-width instead. */
.card-thumb.logo img { max-width: 80%; max-height: 40%; width: auto; height: auto; object-fit: contain; }
/* outline tag (per client sheet); dark variant on light logo thumbs for contrast */
.card-badge { position: absolute; top: 8px; left: 8px; background: transparent; color: var(--mint);
  border: 1px solid var(--mint); font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 2px 8px; }
.card-thumb.logo .card-badge { color: var(--on-mint); border-color: rgba(33,14,5,.45); }
.card-body { padding: 16px; flex: 1 1 auto; display: flex; flex-direction: column; }
.card-body h3 { font-size: var(--text-heading-sm); color: var(--mint); margin-bottom: 6px; }
.card-body p { font-size: var(--text-body-xs); color: #ededed; line-height: var(--leading-normal); margin-bottom: 12px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.card-meta { font-family: var(--font-display); font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--copper); }
.card-arrow { font-size: 15px; color: var(--mint); }

/* "Your project here" — centred CTA below the project grid */
.project-cta {
  margin: 40px auto 0; max-width: 620px; text-align: center;
  border: 1px dashed #6a6a6a; padding: 40px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: border-color var(--transition-fast);
}
.project-cta:hover { border-color: var(--mint); }
.card-cta-plus { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 2.4rem; line-height: 1; color: var(--mint); }
.project-cta h3 { color: var(--text); font-size: var(--text-heading-sm); margin: 0; }
.project-cta p { font-size: var(--text-body-md); color: #ededed; margin: 0; max-width: 30em; }
.project-cta .btn { margin-top: 10px; }

/* ---------- process (extends the system) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.card.step .card-body { padding: 24px; }
.card.step h3 { color: var(--text); font-size: var(--text-heading-sm); margin-bottom: 10px; }
.card.step p { font-size: var(--text-body-xs); color: #ededed; margin: 0; line-height: var(--leading-normal); }
.step-num { display: block; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 26px;
  color: var(--mint); letter-spacing: var(--tracking-wide); margin-bottom: 12px; }

/* ---------- about ---------- */
.about .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); align-items: start; }
.about-photo { aspect-ratio: 3 / 4; height: 100%; }
.about-text h2 { font-size: var(--text-heading-lg); }
.tick { width: 48px; height: 2px; background: var(--mint); margin: 16px 0 20px; }
.about-text p { color: #ededed; line-height: var(--leading-loose); }
.about-rule { border: 0; height: 1px; background: var(--line-soft); margin: 24px 0; }

.tag-group { margin-top: 24px; }
.tag-group .tick { margin: 0 0 16px; }
.tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tag {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); padding: 8px 12px; color: #ededed;
  font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-body-xs); letter-spacing: .5px;
}
.tag::before { content: "▸"; color: var(--mint); }
.about-cv { margin-top: 24px; }

/* ---------- contact ---------- */
.contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); align-items: start; }
.contact-copy h2 { font-size: var(--text-heading-lg); margin-bottom: 18px; }
.contact-copy h2 .accent { color: var(--mint); }
.contact-intro { font-size: var(--text-body-md); color: #ededed; line-height: var(--leading-loose); max-width: 32em; margin-bottom: 28px; }
.contact-links { display: flex; flex-direction: column; gap: 10px; }
.contact-links a {
  display: block; background: #fff; color: #555; padding: 12px 14px;
  font-size: var(--text-body-sm); transition: color var(--transition-fast);
}
.contact-links a:hover { color: var(--on-mint); }

/* ---------- footer (dark, per the client sheet) ---------- */
footer { background: var(--bg); border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; gap: 32px; min-height: 96px; flex-wrap: wrap; padding-block: 28px; }
footer .wordmark { color: var(--mint); font-size: 15px; }
.footer-nav { display: flex; gap: 22px; margin: 0 auto; }
.footer-nav a { color: var(--muted); font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-label);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; transition: color var(--transition-fast); }
.footer-nav a:hover { color: var(--mint); }
.footer-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.footer-hire { color: var(--mint); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-label);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.footer-copy { margin: 0; font-size: var(--text-micro); color: var(--body); letter-spacing: .5px; }

/* ---------- section chrome for sub-pages (breadcrumbs / rail / 404) ---------- */
.sectionbar { background: var(--bg-nav); border-bottom: 1px solid var(--line-soft); }
.sectionbar .wrap { padding-block: 14px; }
.crumbs { color: var(--muted); font-size: var(--text-body-sm); }
.crumbs a { color: var(--body); font-size: var(--text-body-sm); }
.crumbs span[aria-current] { color: var(--text); }
.subnav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: var(--text-body-sm); }
.subnav-label { color: var(--body); }
.subnav a.active { color: var(--mint); }
.shell { display: flex; gap: 36px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--section-padding-x); }
.rail { flex: 0 0 220px; padding-top: 28px; }
.rail-title { font-family: var(--font-display); color: var(--text); font-weight: var(--weight-semibold); }
.rail nav { display: flex; flex-direction: column; gap: 8px; }
.rail a { color: var(--body); } .rail a.active { color: var(--mint); }
.rail-l2 { padding-left: 14px; font-size: var(--text-body-sm); }
.pagehead { padding: 60px 0 28px; }
.pagehead h1 { font-size: var(--text-heading-lg); margin: 8px 0 12px; }
.prose { max-width: 720px; }
.prose h2 { font-family: var(--font-display); font-size: 1.25rem; color: var(--text); margin: 28px 0 10px; }
.prose p, .prose li { color: #ededed; }
.prose ul { padding-left: 20px; margin: 0 0 1em; }
.prose li { margin-bottom: 6px; }
.prose .updated { color: var(--muted); font-size: var(--text-body-sm); margin-bottom: 24px; }
.notfound { text-align: center; padding: 80px 0; }
.notfound .big { font-family: var(--font-display); font-size: 72px; color: var(--mint); line-height: 1; }
.sec { padding: 48px 0; }
.row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; }

/* ---------- responsive (this site's own layer; the client sheet has none) ---------- */
@media (max-width: 900px) {
  .hero .wrap, .about .wrap, .contact .wrap { grid-template-columns: 1fr; gap: 40px; }
  .cards, .steps { grid-template-columns: 1fr; }
  .hero-media { aspect-ratio: 16 / 10; }
  .about-photo { aspect-ratio: 16 / 10; }
}
@media (min-width: 901px) and (max-width: 1100px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hero h1 { font-size: 38px; } .about-text h2, .contact-copy h2 { font-size: 28px; } }
@media (max-width: 760px) {
  .navtoggle { display: block; }
  .nav .links {
    position: absolute; top: var(--nav-height); left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--bg-nav); border-bottom: 1px solid var(--line-soft);
    max-height: 0; overflow: hidden; transition: max-height .25s ease; margin: 0;
  }
  .navcb:checked ~ .links { max-height: 420px; }
  .nav .links a:not(.btn) { padding: 16px 32px; width: 100%; }
  .nav-hire { margin: 12px 32px 20px; }
  .footer-inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-nav { margin: 0; flex-wrap: wrap; }
  .footer-right { text-align: left; align-items: flex-start; }
  .tags { grid-template-columns: 1fr; }
}