:root {
  /* Global CSS variables (design tokens) */
  --card-bg: rgba(255, 255, 255, 0.60);   /* Card background color (60% opacity) */
  --card-border: rgba(0, 0, 0, 0.08);     /* Subtle card border color */
  --text: #1a1a1a;                        /* Default text color */
  --muted: #4a4a4a;                       /* Secondary / muted text color */
  --link: #1a1a1a;                        /* Link color */
}

/* Apply border-box sizing model globally
   width/height now include padding + border */
* { box-sizing: border-box; }

html, body {
  height: 100%; /* Makes body able to fill viewport vertically */
  margin: 0;    /* Removes default browser margin */
  color: var(--text); /* Default text color */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  /* System font stack for performance + native appearance */
}


/* Fixed background implementation (mobile-safe alternative to background-attachment: fixed) */
body::before {
  content: "";           /* Required to generate pseudo-element */
  position: fixed;       /* Fixed relative to viewport */
  inset: 0;              /* Shorthand for top:0; right:0; bottom:0; left:0 */
  background: url("assets/background.jpg") 10% 50%  / cover no-repeat;
   /*50% 45% → move image slightly downward
     50% 35% → move image upward
     48% 50% → move slightly left
     center = image centered
     cover = fills viewport, crops if necessary
     no-repeat = prevents tiling */
  z-index: -1;           /* Places it behind all content */

  pointer-events: none;  /* ensures the background layer can never intercept clicks/taps */
  /* This is defensive: even if stacking/z-index changes later, the background stays non-interactive. */
}

/*
Commented-out alternative background implementation
(standard background on body instead of pseudo-element)
*/

/* body */
/*{*/ 
/* Background image (your generated image) */ 
/* background-image: url("assets/background.jpg"); 
/* background-size: cover;*/ 
/* background-position: center;*/ 
/* background-repeat: no-repeat;*/ 
/* Makes text readable even if background changes */ 
/* background-color: #ffffff; */
/*} */


/* Header (logo container) */
.site-header {
  position: fixed; /* Keeps header fixed in viewport */
  top: 18px;       /* Distance from top */
  left: 18px;      /* Distance from left */
  /* Change to:
     right: 18px;
     left: auto;
     to move logo to top-right */
  z-index: 10;     /* Ensures header appears above other content */
}

/* Logo image styling */
.logo {
  width: 120px;    /* Fixed width */
  height: auto;    /* Maintains aspect ratio */
  display: block;  /* Removes inline spacing below image */
  opacity: 0.9;    /* Slight transparency */
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.12));
  /* Subtle shadow for separation from background */
}

/* Main content container */
.content {
  min-height: 100vh; /* Ensures at least full viewport height */
  display: grid;    /* Enables CSS Grid layout */
  place-items: center;
  /* Shorthand for:
     align-items: center; (vertical)
     justify-items: center; (horizontal)
     → centers card in viewport */

  padding: 96px 18px 48px;
  /* 96px = top spacing (prevents overlap with fixed logo)
     18px = horizontal spacing
     48px = bottom spacing */
}

/* Card (main content block) */
.card {
  width: min(470px, 100%);
  /* Maximum width 470px
     Shrinks to 100% on small screens */

  padding: 28px 26px;
  /* 28px top/bottom padding
     26px left/right padding */

  border: 1px solid var(--card-border);
  /* Thin border using variable */

  border-radius: 16px;
  /* Rounded corners */

  background: var(--card-bg);
  /* Semi-transparent background */

  backdrop-filter: blur(6px);
  /* Blurs background behind card
     (depends on browser support) */

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  /* Soft drop shadow */
	
  /* OPTIONAL fine adjustment:
	 Use this if you want additional control
     without modifying .content padding */

margin-top: 400px;
  /* Positive value  → moves card DOWN
     Negative value  → moves card UP
     Use small values like ±20px for fine tuning */
	
}

/* Explicit fallback when backdrop-filter is not supported.
   This does not change the appearance in browsers that support blur,
   but makes the card more readable in browsers that ignore backdrop-filter. */
@supports not (backdrop-filter: blur(1px)) {
  .card {
    background: rgba(255, 255, 255, 092);
    /* Slightly less transparent than --card-bg to compensate for missing blur */
  }
}

/* Main heading */
.card h1 {
  margin: 0 0 8px 0;
  /* Removes default top margin
     Adds 8px bottom spacing */

  font-size: clamp(26px, 4vw, 38px);
  /* Responsive font sizing:
     Minimum: 26px
     Preferred: 4% of viewport width
     Maximum: 38px */

  letter-spacing: -0.02em;
  /* Slight tightening of characters */
}

/* Tagline text */
.tagline {
  margin: 0 0 18px 0;
  /* 18px space below tagline */

  color: var(--muted);
  /* Uses muted text variable */

  font-size: 16px;
  line-height: 1.4;
  /* Improves readability */
}

/* Paragraph spacing inside details section */
.details p {
  margin: 8px 0;  /* Vertical spacing between lines */
  line-height: 1.5;
}

/* Links container */
.links {
  display: flex;       /* Horizontal layout */
  flex-wrap: wrap;     /* Allows wrapping on small screens */
  gap: 12px;           /* Space between links */
  margin-top: 18px;    /* Space above link group */
}

/* Anchor styling */
a {
  color: var(--link); /* Link color variable */
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Moves underline slightly away from text */
}

/* Keyboard-focus styling for accessibility.
   Only appears when navigating by keyboard (Tab), not on mouse click in modern browsers. */
a:focus-visible {
  outline: 2px solid rgba(0,0,0,0.35); /* Visible focus ring */
  outline-offset: 3px;                 /* Separates ring from element */
}

/* Footer */
.site-footer {
  position: fixed; /* Fixed relative to viewport */
  left: 18px;      /* Distance from left */
  bottom: 14px;    /* Distance from bottom */
  color: rgba(0,0,0,0.55);
  /* Semi-transparent text */
}