:root {
  /* Base colour palette inspired by the card art */
  /* Grayscale palette – only shades of black and white */
  --color-bg: #ffffff;        /* pure white background */
  --color-dark: #f2f2f2;      /* very light grey for subtle panels */
  --color-primary: #111111;   /* near‑black accent for buttons and highlights */
  --color-secondary: #333333; /* dark grey for headings */
  --color-accent: #000000;    /* black used for text */
  --color-light: #ffffff;     /* white */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  color: var(--color-accent);
  line-height: 1.6;
  overflow-x: hidden;
  background-color: var(--color-bg);
  /* Apply the repeating doodle texture across the page.  Three layers are used:
     1. A fade gradient that gradually transitions the doodle into white near the top.
     2. A semi‑transparent white overlay to lighten the black lines of the texture.
     3. The texture image itself. */
  background-image:
    /* Fade layer: fades the doodle into white around two‑thirds up the viewport */
    linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 66%),
    /* Lighten layer: semi‑transparent white overlay to make the black graphics appear mid‑gray */
    linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%),
    /* Texture layer: the repeating doodle pattern */
    url('assets/texture.png');
  /* Size each layer: the fade and overlay cover the full viewport; the texture repeats at 320px
     so its elements appear twice as large. */
  background-size: 100% 100%, 100% 100%, 320px;
  /* Repeat only the texture; the gradient and overlay should not repeat */
  background-repeat: no-repeat, no-repeat, repeat;
  /* Align each layer to the bottom left so the fade originates from the bottom */
  background-position: bottom left, bottom left, bottom left;
  /* Lock all three layers relative to the viewport for a consistent scrolling experience */
  background-attachment: fixed, fixed, fixed;
}

/* sketchbook grid */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 10%,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0) 100%),
    /* Horizontal grid lines */
    repeating-linear-gradient(to right,
      rgba(0, 0, 0, 0.06) 0,
      rgba(0, 0, 0, 0.06) 2px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0) 50px
    ),
    /* Vertical grid lines */
    repeating-linear-gradient(to bottom,
      rgba(0, 0, 0, 0.06) 0,
      rgba(0, 0, 0, 0.06) 2px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0) 50px
    );
  /* Adjust the background sizes to match the new order: gradient spans the full area,
     horizontal lines repeat every 50px horizontally, vertical lines every 50px vertically. */
  background-size: 100% 100%, 50px 50px, 50px 50px;
  /* Anchor all background layers to the top-left so the fade originates from the very top */
  background-position: top left, top left, top left;
  /* The gradient does not repeat, but the grid lines do */
  background-repeat: no-repeat, repeat, repeat;
  z-index: -2;
}

/* Overlay to fade out the grid at the very top of the page.  This overlay sits
   above the grid lines but beneath other content, and it gradually fades
   from the page background colour to fully transparent. */

/* Navigation */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  z-index: 1000;
}

nav .logo {
  display: flex;
  align-items: center;
}
nav .logo img {
  height: 36px;
  width: auto;
  margin-right: 0;
  border-radius: 0;
}
nav .logo span {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-primary);
  text-transform: uppercase;
}
nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
nav ul li + li {
  margin-left: 1.5rem;
}
nav ul a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}
nav ul a:hover,
nav ul a:focus {
  color: var(--color-primary);
}

/* Hero Section */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 1rem 6rem;
  position: relative;
  color: var(--color-accent);
  /* no background image here – rely on page texture */
  background: transparent;
}

.hero-content {
  max-width: 800px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  padding: 1rem;
  border-radius: 12px;

  /* Ensure hero content appears above the scattered cards overlay */
  position: relative;
  z-index: 1;
}

/* Hero logo image styling */
.hero-logo {
  width: 90%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5rem;
}

/* Wrapper to align the volume title to the right underneath the logo */
.hero-volume-wrapper {
  width: 100%;
  text-align: right;
}

/* Volume title image styling – smaller than the main logo */
.hero-volume {
  width: 50%;
  max-width: 300px;
  height: auto;
}

/* Styling for the hero title image */
.hero-title {
  width: 80%;
  max-width: 500px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.hero h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  line-height: 1.1;
  color: var(--color-accent);
}
/* Subtitle styling for the volume text under the title image */
.hero .subtitle {
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--color-secondary);
  margin-top: 0.5rem;
}
.hero p {
  margin-top: 1rem;
  font-size: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.8;
  color: var(--color-accent);
}

/* Combined logo for Inkspawn and Underworld */
.hero-logo-release {
  /* Shrink the combined logo to roughly half its previous size */
  width: 50%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 auto 1rem;
}

/* Blurb beneath the combined logo */
.hero-blurb {
  margin-top: 0.5rem;
  font-size: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.8;
  color: var(--color-accent);
  text-align: justify;
}

/* Signup form inside the hero */
.hero-signup-form {
  /* Lay out the input and button on a single row */
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  /* No gap so the input and button sit flush against each other */
  gap: 0;
  margin-top: 1.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  /* Define a fixed height for the form so its children can stretch to fill it */
  height: 48px;
  /* Clip any child element overflowing its bounds to ensure clean edges */
  overflow: hidden;
}
.hero-signup-form input[type='email'] {
  /* The input takes up remaining space and fills the form’s height */
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  /* Provide horizontal padding only — the height controls vertical alignment */
  padding: 0 1rem;
  border: none;
  /* Round only the left corners since the right side touches the button */
  border-radius: 6px 0 0 6px;
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--color-accent);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  transition: background-color 0.3s ease;
}
.hero-signup-form input[type='email']::placeholder {
  /* Darker placeholder text because the form sits on a light panel */
  color: rgba(0, 0, 0, 0.4);
}
.hero-signup-form input[type='email']:focus {
  outline: none;
  background-color: #e6e6e6;
  border-color: var(--color-accent);
}
.hero-signup-form button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-primary);
  color: var(--color-light);
  height: 100%;
  min-height: 0;
  padding: 0 1.6rem;
  font-size: 1rem;
  border: none;
  /* Round only the right corners since the left side touches the input */
  border-radius: 0 6px 6px 0;
  font-weight: 400;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.hero-signup-form button:hover {
  background-color: #333333;
}
.cta-btn {
  display: inline-block;
  margin-top: 2rem;
  background-color: var(--color-primary);
  color: var(--color-light);
  padding: 0.9rem 2rem;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: none;
  transition: transform 0.3s ease, background-color 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}
.cta-btn:hover,
.cta-btn:focus {
  transform: translateY(-4px);
  /* Slightly lighter on hover */
  background-color: #333333;
}

/* Generic section styles */
/* Sections have generous padding and compensate for the fixed navigation bar
   using scroll-margin so that anchored navigation doesn’t hide headings. */
.section {
  padding: 5rem 1rem;
  scroll-margin-top: 6rem;
}

/* Scattered cards overlay behind the hero */
.cards-overlay {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  /* Adjust height to accommodate larger cards without overwhelming the page */
  height: 650px;
  /* Ensure the cards sit behind hero content */
  z-index: -1;
  /* Preserve hover effects on the cards */
  pointer-events: auto;
}

.cards-overlay img {
  /* Crop 35px off each side and add 16px corner rounding */
  clip-path: inset(8px round 12px);
}

.table-card {
  position: absolute;
  width: 280px;
  border-radius: 12px;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.table-card img {
  box-shadow: 77px 58px 5px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 77px 58px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 77px 58px 5px 0px rgba(0,0,0,0.75);
}

/* Individual card placements and rotations using custom properties */
.card-a {
  top: 0%;
  left: 0%;
  --rotation: -12deg;
  transform: rotate(-12deg);
  z-index: 4;
}
.card-b {
  top: 10%;
  left: 20%;
  --rotation: 6deg;
  transform: rotate(6deg);
  z-index: 5;
}
.card-c {
  top: 55%;
  left: 65%;
  --rotation: 4deg;
  transform: rotate(4deg);
  z-index: 6;
}
.card-d {
  top: 20%;
  left: 65%;
  --rotation: 8deg;
  transform: rotate(8deg);
  z-index: 2;
}
.card-e {
  top: 60%;
  left: 0%;
  width: 508px;
  --rotation: -7deg;
  transform: rotate(-7deg);
  z-index: 7;
}
.card-f {
  top: 50%;
  left: 75%;
  --rotation: -12deg;
  transform: rotate(-12deg);
  z-index: 3;
}

#signup-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
#signup-form input[type='email'] {
  flex: 1 1 260px;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--color-accent);
  font-size: 1rem;
  transition: background-color 0.3s ease;
}
#signup-form input[type='email']::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
#signup-form input[type='email']:focus {
  outline: none;
  background-color: #e6e6e6;
  border-color: var(--color-accent);
}
#signup-form button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-primary);
  color: var(--color-light);
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
#signup-form button:hover {
  background-color: #333333;
}
#signup-form button i {
  color: var(--color-light);
}

html, body {
  scrollbar-width: none; /* Firefox */
}

body::-webkit-scrollbar,
.cards-overlay::-webkit-scrollbar {
  display: none; /* Safari & Chrome */
}