/*
 * Global resets.  Set base colors and sizes here.  The body and html
 * elements are stretched to fill the viewport height.  We use system
 * fonts by default; you can override with a custom font if desired.
 */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  /* Prevent horizontal scrollbars due to negative margins or overflow. */
  overflow-x: hidden;
  color: #ddddc4;
  font-family: "Trebuchet MS", "Times New Roman", serif;
}

/*
 * Hero section.
 *
 * The `.hero` fills the entire viewport height and uses the supplied
 * background image.  We set a vertical offset on `background-position`
 * so the hooded figure's head and eyes remain visible on most screens.
 */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-image: url('assets/bg.png');
  background-size: cover;
  /* Center horizontally and raise the background a bit to reveal the eyes */
  background-position: center 28%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/*
 * Stack container for the title, email field, and button.  We push
 * the stack down from the top using padding.  The gaps between
 * children are controlled with `row-gap`.  Width is flexible but
 * remains centred.
 */
.stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Position the stack roughly over the summoner's chest on most screens.
     Use clamp() so smaller screens don't push it too far down, while
     larger screens gain some breathing room. */
  /*
     Push the stack down so the title aligns with the summoner's chest.
     We use 34vh as the preferred value, which places the content
     approximately one third down the screen on 16:9 displays.  The
     clamp bounds ensure a reasonable position on both very small and
     very large viewports.
  */
  /*
     Fine‑tune the vertical offset so that the top of the title sits
     approximately one third of the way down the viewport.  33vh
     offers a good balance between revealing the head and keeping the
     elements anchored to the chest area.  Clamp bounds confine the
     value on edge cases.
  */
  /*
     Lower the content further so the first line of the title sits
     just beneath the summoner's chin.  We target roughly 36vh on
     typical 16:9 displays.  The clamp bounds allow minor
     adjustments across device sizes while preventing the CTA from
     falling off the screen.
  */
  padding-top: clamp(170px, 35vh, 420px);
  padding-bottom: clamp(10px, 2vh, 40px);
  /*
     Reduce the vertical space between the title and the email field to
     more closely match the reference composition.  A smaller gap keeps
     the elements visually connected without crowding on very small
     screens.
  */
  /*
     Further tighten the space between the title and parchment field.  A
     target of around 0.6vh provides a small gap on desktop while
     remaining usable on mobile.  The clamp keeps it within a sane
     range across devices.
  */
  row-gap: clamp(2px, 0.4vh, 8px);
}

/*
 * Title image.  We scale its width responsively with clamp().  The
 * height auto adjusts to preserve the aspect ratio.  On very wide
 * screens the title won't exceed 500px.
 */
.title {
  width: clamp(300px, 26vw, 500px);
  height: auto;
  display: block;
}

/*
 * Promotional banner below the title.  This image contains the sign‑up
 * messaging for the free Demonic Critters STL pack.  Like the title,
 * we scale it responsively using clamp() to ensure readability on
 * smaller screens while preventing it from becoming excessively
 * large on wide desktops.  A bit of vertical margin separates it
 * from neighbouring elements without relying solely on row‑gap.
 */
.promo {
  width: clamp(280px, 90vw, 650px);
  height: auto;
  display: block;
  /* Remove extra margin so the banner hugs the title above.  The
     overall vertical spacing is now controlled by the `.stack` row gap. */
  /* Offset the parent's row‑gap so the banner sits snugly beneath the
     title.  Negative margin pulls the image up by roughly the same
     amount as the default gap (clamp(2px, 0.4vh, 8px)), effectively
     eliminating additional space between the title and promo while
     leaving space below unchanged. */
  margin-top: calc(-1 * clamp(2px, 0.4vh, 8px));
  margin-bottom: 0;
}

/*
 * Email form.  Children are centred and stacked vertically with a
 * consistent gap.  Form width is controlled implicitly by its children.
 */
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*
     Tighten the spacing between the parchment and the call‑to‑action
     button.  Lower gaps on smaller screens prevent the form area
     from stretching too far apart.
  */
  /*
     Reduce the gap between the parchment and call‑to‑action even
     further to match the tight composition of the reference image.
     On large screens this value remains subtle, while on very small
     screens it prevents overlap.
  */
  row-gap: clamp(2px, 0.3vh, 6px);
}

/*
 * Field wrapper for the parchment.  We use the parchment as a
 * background image.  Inputs fill the wrapper completely.  The
 * wrapper's width scales with the viewport.
 */
.field {
  overflow: hidden;
  position: relative;
  /*
     Slightly reduce the size of the parchment input to better fit
     within the composition.  The new clamp range uses a smaller
     preferred width and maximum, while maintaining the aspect
     ratio of the source asset.
  */
  /*
     Reduce the parchment width by about 10% from the previous
     settings to tighten the layout.  The clamp uses a smaller
     minimum, preferred, and maximum width.  Height is scaled
     accordingly to maintain the original aspect ratio (210/700).
  */
  /*
     Increase the parchment width slightly so that longer email addresses don't
     run off the parchment on narrow screens.  We raise the minimum value
     from 216px to 230px and bump the preferred viewport percentage.  The
     maximum remains generous to accommodate large displays.  The height is
     recalculated against the new width to preserve the original aspect ratio.
  */
  width: clamp(230px, 20vw, 380px);
  height: calc((210.0 / 700.0) * clamp(230px, 20vw, 380px));
  /* aspect ratio of the parchment: height / width from the asset (210 / 700) */
  background-image: url('assets/scroll.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
}

/*
 * The actual text input element.  Transparent background ensures
 * the parchment artwork shows through.  Padding on the left moves
 * the caret and typed text away from the wax seal.  We use clamp()
 * so the padding grows slightly on larger screens but doesn't
 * overwhelm the available space.
 */
.field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex: 1;
  height: 100%;
  padding-left: clamp(60px, 12%, 100px);
  padding-right: 16px;
  background: transparent;
  border: none;
  color: #5e3600;
  font-size: clamp(12px, 1.4vw, 16px);
  outline: none;
  font-family: inherit;
  /* Align text vertically within the parchment. */
  display: flex;
  align-items: center;
}

/*
 * Darken the placeholder text so it remains legible against the parchment
 * texture.  Without this declaration, most browsers render placeholder
 * text in a very light colour which makes it hard to see on the
 * light scroll background.  This colour complements the warm brown
 * palette used throughout the page.
 */
.field input::placeholder {
  color: #704415;
}

/*
 * Call‑to‑action button.  It contains an <img> with the artwork for
 * the button.  The wrapper controls the overall width and margin.
 */
.cta {
  border: none;
  padding: 0;
  background: none;
  /*
     Likewise shrink the call‑to‑action button for improved
     composition.  The preferred width is now 22vw with a slightly
     reduced maximum.
  */
  /*
     Reduce the call‑to‑action width by roughly 15% to harmonise
     proportions with the smaller parchment.  Decimal viewport units
     are rounded for simplicity.
  */
  width: clamp(221px, 19vw, 374px);
  cursor: pointer;
}

/* Make sure the CTA image fills the button wrapper */
.cta img {
  width: 100%;
  height: auto;
  display: block;
}

/* Add a simple hover effect: slightly brighten on hover */
.cta:hover img {
  filter: brightness(1.05);
}

/* Mobile fixes: keep input inside scroll and start text just past the red seal */
@media (max-width: 480px) {
  /*
     On very small screens the available text area can feel cramped when
     adhering to the larger left padding.  Reduce the left padding so that
     typed content starts a bit earlier while keeping enough space for
     the wax seal.  Also tighten the right padding slightly for extra
     breathing room.  This helps prevent long email addresses from spilling
     out of the visible parchment.
  */
  .field input {
    padding-left: clamp(55px, 14%, 90px);
    padding-right: clamp(6px, 2vw, 12px);
  }
}