/* ==========================================================
   Helia Soren – daydreamer
   HOME PAGE: full-screen hero with hidden overlay links
   ========================================================== */

:root {
  --ink:       #140b06;
  --walnut:    #3b2010;
  --burl:      #6b3a1a;
  --lamp:      #f4b942;
  --parchment: #ecd8ab;
  --monitor:   #8fe0a8;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --hand:  "Segoe Print", "Bradley Hand", "Noteworthy", "Comic Sans MS", cursive;

  /* Viewport height that behaves on mobile browsers */
  --vh: 100vh;
}

@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

*, *::before, *::after { box-sizing: border-box; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--lamp);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Page frame: no margins, no scrollbars ---- */
html:has(body.home),
body.home {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
}

/* ---- The stage ----
   This behaves exactly like `background-size: cover; background-position: center`
   on the viewport, but it is a real box with the image's own proportions.
   That means the links, which are positioned in % of the stage,
   stay glued to the artwork no matter how the screen crops it. */
.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  aspect-ratio: 848 / 1241;
  width: max(100vw, calc(var(--vh) * 848 / 1241));  /* never narrower than the screen */
  /* height follows from aspect-ratio, so it is never shorter than the screen either */

  margin: 0;
  padding: 0;
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 1em = 1% of the stage width, so link text scales with the art */
  font-size: calc(max(100vw, var(--vh) * 848 / 1241) / 100);
}

/* ---- Overlay links ----
   The words already exist in the painting, so the live text is
   transparent. It is still real text: selectable, readable by screen
   readers, and tabbable. Hover adds a soft lamp-light glow. */
.hot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);

  display: flex;
  align-items: center;
  justify-content: center;

  color: transparent;
  font-family: var(--hand);
  font-size: 1.6em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;

  border-radius: 0.5em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.hot:hover,
.hot:focus-visible {
  background-color: rgba(244, 185, 66, 0.12);
  box-shadow: 0 0 1.4em 0.35em rgba(244, 185, 66, 0.38);
  outline: none;
}

/* ---- Positions (percent of the 848 × 1241 artwork) ----
   Nudge a link by editing its --x / --y / --w / --h. */
.hot-inventions { --x: 15%;   --y: 61%;   --w: 8.5%;  --h: 2.8%; }
.hot-more       { --x: 78.6%; --y: 48.8%; --w: 4.8%;  --h: 2.6%; font-size: 1.1em; }
.hot-connect    { --x: 61%;   --y: 61.2%; --w: 8%;    --h: 2.4%; }
.hot-words      { --x: 79.8%; --y: 80.2%; --w: 12.4%; --h: 7.8%; font-size: 1.3em; white-space: normal; }
.hot-burning    { --x: 43.2%; --y: 84.1%; --w: 13.4%; --h: 2.2%; }
.hot-book       { --x: 13.2%; --y: 82.6%; --w: 27%;   --h: 14%; }
.hot-stories    { --x: 25.5%; --y: 96.6%; --w: 12.5%; --h: 2.9%; }
.hot-puzzle     { --x: 3.2%;  --y: 95.4%; --w: 8.8%;  --h: 2.4%; }
.hot-misc       { --x: 57.2%; --y: 94.9%; --w: 6.8%;  --h: 2.4%; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hot { transition: none; }
}

/* ====================================================
      INNER PAGES (connect.html and copies of it)
   ========================================================== */

body.page {
  margin: 0;
  min-height: 100vh;
  color: var(--parchment);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(ellipse at 50% -10%, #3a1f0e 0%, var(--ink) 60%) fixed, var(--ink);
}

.page__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
  font-family: var(--hand);
}

.page__back {
  color: var(--lamp);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

.page__back:hover { color: var(--parchment); }

.page__site {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.7;
}

.page__main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
}

.page__title {
  margin: 0 0 0.5rem;
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(2.5rem, 8vw, 4rem);
  line-height: 1.1;
  color: var(--lamp);
  text-shadow: 0 0 24px rgba(244, 185, 66, 0.35);
}

.page__lede {
  margin: 0 0 2.5rem;
  max-width: 34rem;
  font-size: 1.25rem;
  font-style: italic;
}

.card {
  margin: 0 0 1.5rem;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(160deg, rgba(107, 58, 26, 0.55), rgba(59, 32, 16, 0.75));
  border: 1px solid rgba(244, 185, 66, 0.3);
  border-left: 5px solid var(--burl);
  border-radius: 4px;
}

.card h2 {
  margin: 0 0 0.75rem;
  font-family: var(--hand);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--parchment);
}

.card p { margin: 0; max-width: 34rem; }

.links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.links li + li { margin-top: 0.4rem; }

.links a {
  color: var(--monitor);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.links a:hover { color: var(--lamp); }

.page__foot {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
  font-family: var(--hand);
}

.page__foot a {
  color: var(--parchment);
  opacity: 0.8;
}

.page__foot a:hover { color: var(--lamp); opacity: 1; }