/* ================================================================
   DANIEL BUNTINE — PERSONAL WEBSITE
   styles.css
   ================================================================ */


/* ----------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------- */
:root {
  /* Colour — dark theme */
  --color-bg:            #0E0E10;
  --color-surface:       #17171A;
  --color-surface-hover: #1E1E22;
  --color-text:          #EDEAE4;
  --color-text-muted:    #9A9896;
  --color-text-light:    #5A5858;
  --color-accent:        #7EB3E8;
  --color-accent-dark:   #5A96D4;
  --color-border:        #252528;
  --color-border-strong: #363639;
  --color-featured-bg:   #141A24;
  --color-featured-border: #2A3D58;

  /* Typography */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-4xl:  3.5rem;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* Layout */
  --max-w:      800px;
  --nav-height: 56px;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;

  /* Shadow */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   140ms ease;
  --t-base:   220ms var(--ease-out);
}


/* ----------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:                16px;
  scroll-behavior:          smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top:       calc(var(--nav-height) + 16px);
}

body {
  font-family:             var(--font-sans);
  font-size:               var(--text-base);
  line-height:             1.65;
  color:                   var(--color-text);
  background-color:        var(--color-bg);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:          optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family:    var(--font-display);
  font-weight:    400;
  line-height:    1.2;
  letter-spacing: -0.015em;
}


/* ----------------------------------------------------------------
   3. ACCESSIBILITY
   ---------------------------------------------------------------- */
.skip-link {
  position:      absolute;
  top:           -200%;
  left:          var(--sp-4);
  z-index:       9999;
  padding:       var(--sp-3) var(--sp-6);
  background:    var(--color-accent);
  color:         var(--color-bg);
  font-family:   var(--font-sans);
  font-size:     var(--text-sm);
  font-weight:   500;
  border-radius: var(--radius-md);
  transition:    top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); }

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

:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto !important;
  }
}


/* ----------------------------------------------------------------
   4. LAYOUT
   ---------------------------------------------------------------- */
.container {
  width:          100%;
  max-width:      var(--max-w);
  margin-inline:  auto;
  padding-inline: var(--sp-6);
}

@media (min-width: 640px) { .container { padding-inline: var(--sp-8); } }
@media (min-width: 900px) { .container { padding-inline: var(--sp-10); } }


/* ----------------------------------------------------------------
   5. NAVIGATION
   ---------------------------------------------------------------- */
.site-header {
  position:         sticky;
  top:              0;
  z-index:          100;
  background-color: rgba(14, 14, 16, 0.88);
  backdrop-filter:  blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:    1px solid transparent;
  transition:
    border-color var(--t-base),
    box-shadow   var(--t-base);
}

.site-header.scrolled {
  border-bottom-color: var(--color-border);
  box-shadow:          0 1px 12px rgba(0, 0, 0, 0.4);
}

.nav {
  display:         flex;
  align-items:     center;
  height:          var(--nav-height);
}

.nav-wordmark {
  font-family:     var(--font-display);
  font-size:       var(--text-base);
  font-weight:     400;
  color:           var(--color-text);
  letter-spacing:  -0.01em;
  text-decoration: none;
  transition:      color var(--t-fast);
}
.nav-wordmark:hover { color: var(--color-accent); }


/* ----------------------------------------------------------------
   6. HERO
   ---------------------------------------------------------------- */
.section-hero {
  padding-top:    var(--sp-16);
  padding-bottom: var(--sp-10);
}

.hero-heading {
  font-family:    var(--font-display);
  font-size:      clamp(var(--text-2xl), 6vw, var(--text-4xl));
  font-weight:    400;
  line-height:    1.15;
  letter-spacing: -0.025em;
  color:          var(--color-text);
  margin-bottom:  var(--sp-5);
}

.hero-body {
  font-size:   var(--text-md);
  line-height: 1.65;
  color:       var(--color-text-muted);
  max-width:   48ch;
}


/* ----------------------------------------------------------------
   7. LINKS GRID
   ---------------------------------------------------------------- */
.section-links {
  padding-top:    var(--sp-8);
  padding-bottom: var(--sp-20);
}

.links-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--sp-2);
}

@media (min-width: 580px) {
  .links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Base link card */
.link-card {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-4);
  padding:         var(--sp-4) var(--sp-5);
  background:      var(--color-surface);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-lg);
  text-decoration: none;
  transition:
    background-color var(--t-base),
    border-color     var(--t-base),
    transform        var(--t-fast);
}

.link-card:hover {
  background-color: var(--color-surface-hover);
  border-color:     var(--color-border-strong);
  transform:        translateY(-1px);
}

/* Featured card — spans full width */
.link-card-featured {
  grid-column:      1 / -1;
  padding:          var(--sp-5) var(--sp-5);
  background:       var(--color-featured-bg);
  border-color:     var(--color-featured-border);
  align-items:      flex-start;
}

.link-card-featured:hover {
  background-color: #19243A;
  border-color:     #3A5278;
}

/* Card internals */
.link-meta {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-1);
  min-width:      0;
}

.link-tag {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-accent);
}

.link-title {
  font-family: var(--font-display);
  font-size:   var(--text-lg);
  font-weight: 400;
  color:       var(--color-text);
  line-height: 1.25;
}

.link-card-featured .link-title {
  font-size: var(--text-xl);
}

.link-desc {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: 1.6;
  margin-top:  var(--sp-1);
}

.link-arrow {
  font-size:   var(--text-lg);
  color:       var(--color-text-light);
  flex-shrink: 0;
  transition:
    color     var(--t-fast),
    transform var(--t-fast);
}

.link-card:hover .link-arrow {
  color:     var(--color-accent);
  transform: translateX(3px);
}

.link-card-featured .link-arrow {
  align-self: center;
}


/* ----------------------------------------------------------------
   8. FOOTER
   ---------------------------------------------------------------- */
.site-footer {
  border-top:    1px solid var(--color-border);
  padding-block: var(--sp-6);
}

.footer-container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.footer-name {
  font-family: var(--font-display);
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
}

.footer-copy {
  font-size: var(--text-xs);
  color:     var(--color-text-light);
}


/* ----------------------------------------------------------------
   9. PRINT
   ---------------------------------------------------------------- */
@media print {
  .site-header { display: none !important; }

  body {
    background: #fff;
    color:      #000;
    font-size:  11pt;
  }

  .link-card {
    border:       1px solid #ccc;
    break-inside: avoid;
  }

  a::after {
    content:   ' (' attr(href) ')';
    font-size: 9pt;
    color:     #555;
  }
}