/*
======================================================================
  ARJADE PRODUCTIONS  -  LOOK AND FEEL  (style.css)
======================================================================
  This file controls colours, fonts, sizes and spacing.
  The words and links are in index.html, not here.

  WHAT YOU ARE MOST LIKELY TO CHANGE IS RIGHT BELOW:
    A. COLOURS
    B. FONTS
  Everything after that is layout. It is commented, but you should
  rarely need to touch it.

  A line starting with  --name:  is a setting. Change the value after
  the colon and it changes everywhere that setting is used.
======================================================================
*/


/* ------------------------------------------------------------------
   A. COLOURS
   Each colour is a "hex code": a # followed by six characters.
   Search online for "colour picker" to find the code for any colour.
   There is deliberately NO red anywhere in this file.
------------------------------------------------------------------ */
:root {
  /* The three dark greys used for page backgrounds. */
  --grey-darkest: #141516;   /* header bar, footer base            */
  --grey-dark:    #1c1d1f;   /* the darker page sections           */
  --grey-mid:     #26282a;   /* the slightly lighter page sections */

  /* Text colours. */
  --text:         #dfe2dc;   /* main reading text  */
  --text-soft:    #a4aaa3;   /* smaller, quieter text */
  --text-bright:  #f4f6f1;   /* headings           */

  /* The emerald greens, taken from your Logosheet palette. */
  --emerald-deep:   #014418; /* button shadow and pressed state */
  --emerald:        #0f6b26; /* buttons                         */
  --emerald-bright: #14811b; /* buttons when pointed at         */
  --emerald-light:  #6fd08a; /* small labels and text links     */

  /* The bronze picked from the edge of your Textbox card frame. */
  --bronze:       #8d7350;
  --bronze-dark:  #4f3c26;
}


/* ------------------------------------------------------------------
   B. FONTS
   The font files live in the "fonts" folder on your own hosting.
   Inlander is used for headings, Crimson Pro for everything else.
------------------------------------------------------------------ */
@font-face {
  font-family: "Inlander";
  src: url("../fonts/Inlander-Rough.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../fonts/CrimsonPro.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../fonts/CrimsonPro-Italic.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-heading: "Inlander", "Crimson Pro", Georgia, serif;
  --font-body:    "Crimson Pro", Georgia, "Times New Roman", serif;

  /* The widest the page content is allowed to get on a big screen. */
  --page-width: 1180px;

  /* The jagged shape used for the torn-paper edge between sections.
     Each pair of numbers is one point along the tear. */
  --tear: polygon(0 100%, 0 45%, 2% 62%, 4% 30%, 7% 55%, 9% 22%, 12% 48%, 15% 35%,
    17% 66%, 20% 28%, 23% 52%, 26% 18%, 28% 44%, 31% 60%, 34% 26%, 37% 50%,
    40% 14%, 42% 46%, 45% 64%, 48% 30%, 51% 52%, 54% 20%, 57% 42%, 60% 62%,
    63% 24%, 66% 50%, 69% 34%, 72% 60%, 75% 16%, 78% 46%, 81% 28%, 84% 58%,
    87% 36%, 90% 64%, 93% 22%, 96% 50%, 98% 32%, 100% 56%, 100% 100%);
}


/* ------------------------------------------------------------------
   C. BASICS  (applies to the whole page)
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Stops the menu bar covering a block's heading when a menu link jumps to it. */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grey-dark);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.1875rem;      /* about 19 pixels */
  line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: normal;
  color: var(--text-bright);
  line-height: 1.1;
  margin: 0 0 0.5em;
  text-wrap: balance;        /* stops one lonely word dropping onto a new line */
}

/* Inlander joins some letter pairs into one fancy shape (for example LL and WH).
   These lines switch that off so every letter is drawn separately.
   To bring the joined shapes back, delete this block. */
h1, h2, h3, .brand, .footer-brand {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h3 { font-size: 1.55rem; }

p { margin: 0 0 1em; }

a { color: var(--emerald-light); }

/* The glowing outline shown when someone moves around with the keyboard. */
:focus-visible {
  outline: 3px solid var(--emerald-light);
  outline-offset: 3px;
}

/* Keeps content centred with a gap at the screen edges. */
.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Hidden visually but still read out by screen readers. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--emerald); color: #fff; padding: 0.5rem 1rem;
}
.skip-link:focus { top: 1rem; }

/* Things shown only on phones, or only on bigger screens. */
.show-on-phone { display: none; }


/* ------------------------------------------------------------------
   D. SMALL REUSABLE PIECES
------------------------------------------------------------------ */

/* The small label above some headings. */
.kicker {
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald-light);
  margin-bottom: 0.9rem;
}

/* A sentence given extra weight. */
.standout {
  font-size: 1.3rem;
  font-style: italic;
  color: var(--text-bright);
}

/* BUTTONS */
.button {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--emerald);
  border: 1px solid var(--bronze);
  border-radius: 3px;
  box-shadow: 0 3px 0 var(--emerald-deep);
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.15s;
}
.button:hover { background: var(--emerald-bright); }
.button:active { box-shadow: none; transform: translateY(3px); }

/* The see-through second button. */
.button-outline {
  background: rgba(20, 21, 22, 0.55);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}
.button-outline:hover { background: var(--emerald-deep); }

.button-small { font-size: 0.95rem; padding: 0.55rem 1.1rem; }

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.6rem;
}

/* A plain underlined link. */
.text-link {
  color: var(--emerald-light);
  text-underline-offset: 0.2em;
}
.text-link:hover { color: var(--text-bright); }

/* A list with small diamond markers instead of dots. */
.plain-list { list-style: none; margin: 0 0 1.2em; padding: 0; }
.plain-list li { padding-left: 1.4em; position: relative; margin-bottom: 0.3em; }
.plain-list li::before {
  content: ""; position: absolute; left: 0.15em; top: 0.62em;
  width: 0.5em; height: 0.5em; background: var(--emerald-bright);
  transform: rotate(45deg);
}


/* ------------------------------------------------------------------
   1. HEADER  (the menu bar)
------------------------------------------------------------------ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  /* See-through while over the hero picture... */
  background: linear-gradient(rgba(10, 11, 12, 0.85), rgba(10, 11, 12, 0));
  transition: background-color 0.2s;
}
/* ...and solid once the visitor scrolls down. (site.js adds "is-solid".) */
.site-header.is-solid {
  background: var(--grey-darkest);
  box-shadow: 0 1px 0 var(--bronze-dark);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.brand {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  color: var(--text-bright);
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}

.site-nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 1.0625rem;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--text-bright); border-bottom-color: var(--emerald-bright); }

/* The hamburger button. Hidden on big screens. */
.menu-toggle {
  display: none;
  flex-shrink: 0;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 1px solid var(--bronze-dark); border-radius: 3px;
  cursor: pointer; padding: 0;
}
.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
  display: block; width: 1.3rem; height: 2px; background: var(--text-bright);
  margin: 0 auto; position: relative; content: "";
}
.menu-toggle-bars::before { position: absolute; top: -7px; }
.menu-toggle-bars::after  { position: absolute; top: 7px; }


/* ------------------------------------------------------------------
   2. HERO  (opening picture and headline)
------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(80vh, 760px);
  display: flex;
  align-items: center;
  padding: 7rem 0 5.5rem;
  background: var(--grey-darkest);
  overflow: hidden;
}
.hero-image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;   /* which part of the picture stays in view */
  /* Tones the photo down a little. Lower the first number for more colour;
     raise the second number (up to 1) for a brighter picture. */
  filter: grayscale(0.25) brightness(0.8);
}
/* The dark shading laid over the picture so the words stay readable. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 15, 16, 0.94) 0%, rgba(14, 15, 16, 0.8) 42%, rgba(14, 15, 16, 0.25) 100%);
}
.hero-content { position: relative; z-index: 1; }
.hero-content > * { max-width: 37.5rem; }   /* keeps the hero text to about 600 pixels wide */
.hero-lead { font-size: 1.3rem; color: var(--text-bright); }
.hero-signoff { margin: 1.6rem 0 0; font-style: italic; color: var(--text-soft); }


/* ------------------------------------------------------------------
   SECTIONS  (shared by blocks 3 to 8)
------------------------------------------------------------------ */
.section { position: relative; padding: 4.5rem 0 5.5rem; }

/* The background shades. A block picks one with class="... tone-dark" etc. */
.tone-dark { background-color: var(--grey-dark); }
.tone-mid  { background-color: var(--grey-mid); }

/* The green scales texture (your NewScalesBG artwork), darkened a long way
   so text stays readable. Change the two 0.78 numbers to make it lighter
   (smaller number) or darker (bigger number). */
.tone-scales {
  background-color: #10241a;
  background-image:
    linear-gradient(rgba(16, 20, 18, 0.78), rgba(16, 20, 18, 0.78)),
    url("../images/texture-scales.jpg");
  background-size: auto, 500px;
}

/* The same scales texture in black and white, used behind the sign-up form.
   Change the two 0.8 numbers to make it lighter (smaller) or darker (bigger). */
.tone-scales-grey {
  background-color: var(--grey-dark);
  background-image:
    linear-gradient(rgba(18, 19, 20, 0.8), rgba(18, 19, 20, 0.8)),
    url("../images/texture-scales-grey.jpg");
  background-size: auto, 500px;
}

/* The torn-paper edge along the top of a block. It copies the block's own
   background and pokes up into the block above. */
.torn::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -22px; height: 23px;
  background: inherit;
  background-attachment: scroll;
  clip-path: var(--tear);
  z-index: 2;
}

/* ------------------------------------------------------------------
   4. MYSTIC TIMES  (a block with a painting filling the background)
------------------------------------------------------------------ */
.picture-section { padding: 6rem 0 7rem; }

/* The painting is made 20% wider than the block and slid to the left by the
   same amount. That moves both characters toward the left, clear of the words.
   To slide it further, raise BOTH numbers together (for example -30% and 130%).
   To undo the slide, set them to 0 and 100%. */
.picture-section-image {
  position: absolute; top: 0; left: -20%; width: 120%; height: 100%;
  object-fit: cover;
  object-position: center 50%;   /* the second number moves the painting up (higher) or down (lower) */
}
/* The shading laid over the painting. There are two layers:
     1. A fade at the very top, from the block's dark grey to clear, so the
        painting melts into the torn edge instead of starting with a hard line.
        Change 7rem to make that fade taller or shorter.
     2. Dark shading that is light on the left, so the characters show
        through, and heavy on the right behind the words. The last number in
        each rgba(...) is the darkness, from 0 (none) to 1 (black). */
.picture-section::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--grey-dark) 0, rgba(28, 29, 31, 0) 7rem),
    linear-gradient(90deg, rgba(14, 16, 15, 0.4) 0%, rgba(14, 16, 15, 0.45) 48%, rgba(14, 16, 15, 0.88) 60%, rgba(14, 16, 15, 0.94) 100%);
}
.picture-section > .wrap { position: relative; z-index: 1; }
/* Keeps the words in a column on the right-hand side. */
.picture-section-text { max-width: 33rem; margin-left: auto; }

.section-head { max-width: 42rem; margin-bottom: 2.75rem; }
.section-head p { color: var(--text-soft); font-size: 1.2rem; margin: 0; }


/* ------------------------------------------------------------------
   CARDS  (used in blocks 3, 5 and 7)
------------------------------------------------------------------ */

/* Lays cards out in a row. When the screen is too narrow for all of them,
   the extras drop to the next row and sit in the middle. */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
}

/* One card. The border is your Textbox artwork, stretched to fit:
   the corners stay sharp and the sides stretch between them. */
.frame-card {
  display: flex;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
  border: 26px solid var(--bronze-dark);                           /* fallback if the picture fails to load */
  border-image: url("../images/frame-card.png") 48 fill / 26px stretch;
  padding: 0.4rem 0.4rem 0.6rem;   /* the gap between the frame and what is inside it */
  flex: 1 1 17rem;                /* a card is never squeezed narrower than about 270 pixels */
  max-width: 26rem;
  transition: filter 0.15s;
}
.frame-card:hover { filter: brightness(1.18); }

.frame-card img {
  width: 100%;
  /* The shape the picture is cropped to: 4 wide by 5 tall. This tall shape is
     what makes the picture fill roughly the top two thirds of the card.
     Make the second number smaller for a shorter picture. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid var(--bronze-dark);
  margin-bottom: 0.8rem;
}
/* Video thumbnails keep their wide shape so the words on them are not cut off. */
.frame-card img.wide-image { aspect-ratio: 16 / 9; }

/* The words inside a card get a little breathing room from the frame. */
.frame-card > :not(img) { margin-left: 0.4rem; margin-right: 0.4rem; }
.frame-card h3 { font-size: 1.4rem; margin-bottom: 0.35em; }
.frame-card p { font-size: 1.0625rem; line-height: 1.45; margin-bottom: 0.6em; }

.card-label {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emerald-light);
  margin-top: 0.3rem;
  margin-bottom: 0.6rem;
}
.card-audience { font-size: 0.95rem; font-style: italic; color: var(--text-soft); margin-bottom: 0.8rem; }

/* The link wording at the bottom of a card. "margin-top: auto" pushes it
   to the bottom so the cards in a row line up. */
.card-link {
  margin-top: auto;
  padding-top: 0.5rem;
  font-weight: 600;
  color: var(--emerald-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Cover cards (block 5) show the whole book cover, never cropped. */
.cover-card img {
  aspect-ratio: auto;
  width: auto;
  max-width: 100%;
  height: 21rem;
  object-fit: contain;
  align-self: center;
  border: 0;
  /* The shadow behind each cover. "drop-shadow" follows the outline of the
     cover itself. (An ordinary box shadow followed the fixed-size space the
     cover sits in, which left a lighter band above and below narrower covers.) */
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.65));
}


/* ------------------------------------------------------------------
   SPLIT LAYOUT  (words one side, picture the other: blocks 4, 6, 8)
------------------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3.5rem;
  align-items: center;
}
/* Puts the picture on the right instead of the left. */
.split-reverse .split-media { order: 2; }

.split-media img {
  width: 100%;
  border: 1px solid var(--bronze-dark);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.split-text { max-width: 36rem; }

/* Block 6: the magazine cover overlapping the table photo. */
.stacked-media { position: relative; padding: 0 0 2.5rem 2.5rem; }
.stacked-media .stacked-back { aspect-ratio: 1 / 1; object-fit: cover; filter: brightness(0.75); }
.stacked-media .stacked-front {
  position: absolute; left: 0; bottom: 0;
  width: 46%;
  transform: rotate(-4deg);
  border-color: var(--bronze);
}

/* Block 8: the novella cover, kept to a sensible size. */
.cover-media img { max-width: 22rem; margin: 0 auto; }


/* ------------------------------------------------------------------
   8. SIGN-UP FORM
------------------------------------------------------------------ */
.signup { margin: 1.5rem 0 1.25rem; }
.signup label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.signup-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.signup input[type="email"] {
  flex: 1 1 15rem;
  min-width: 0;
  font: inherit;
  color: var(--text-bright);
  background: var(--grey-darkest);
  border: 1px solid var(--bronze);
  border-radius: 3px;
  padding: 0.75rem 0.9rem;
}
.signup input::placeholder { color: #7d837d; }
.signup-note { font-size: 0.95rem; color: var(--text-soft); margin: 1rem 0 0; }

/* Hides the spam trap from real visitors. */
.trap { position: absolute; left: -9999px; }


/* ------------------------------------------------------------------
   9. FOOTER
------------------------------------------------------------------ */
.site-footer {
  position: relative;
  background-color: var(--grey-darkest);
  padding: 4rem 0 2rem;
  font-size: 1.0625rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-brand { font-family: var(--font-heading); font-size: 1.7rem; color: var(--text-bright); margin-bottom: 0.6rem; }
.footer-intro p { max-width: 26rem; color: var(--text-soft); }
.footer-intro .footer-brand { color: var(--text-bright); }

.footer-heading {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald-light);
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.15rem; }
.site-footer li a { display: inline-block; padding: 0.3rem 0; color: var(--text); text-decoration: none; }
.site-footer li a:hover { color: var(--emerald-light); text-decoration: underline; }

.footer-base {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bronze-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  color: var(--text-soft);
  font-size: 0.95rem;
}
.footer-base p { margin: 0; }
.footer-signoff { font-style: italic; color: var(--text); }


/* ------------------------------------------------------------------
   MESSAGE PAGES
   The small pages shown after someone signs up, confirms, leaves the
   list, or uses the contact form. Each has a Mystic Times painting
   behind it, darkened, with the message inside your card frame.

   TO SWAP A PAINTING: put the new picture in the images folder and
   change the file name on the matching "scene" line below.
   TO MAKE THE PAINTINGS LIGHTER OR DARKER: change the two numbers in
   --scene-shade (0 = no shading, 1 = black). The first is the top of
   the page, the second the bottom.
------------------------------------------------------------------ */
.message-page {
  --scene-shade: linear-gradient(rgba(14, 15, 16, 0.55), rgba(14, 15, 16, 0.8));
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 3rem 0;
  background-color: var(--grey-darkest);
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;   /* the painting stays still while the page scrolls */
}
.scene-waiting  { background-image: var(--scene-shade), url("../images/scene-waiting.jpg"); }
.scene-confirm  { background-image: var(--scene-shade), url("../images/scene-confirm.jpg"); }
.scene-welcome  { background-image: var(--scene-shade), url("../images/scene-welcome.jpg"); }
.scene-farewell { background-image: var(--scene-shade), url("../images/scene-farewell.jpg"); }
.scene-problem  { background-image: var(--scene-shade), url("../images/scene-problem.jpg"); }

/* ON COMPUTER SCREENS, some paintings are placed so their character
   stands beside the message panel instead of behind it:
     Kyne (waiting) and Demagorandix (farewell): panel on the left, character on the right.
     Rhynessa (welcome) and Saraahd (problem):   panel on the right, character on the left.

   How the placement works, for tweaking:
     background-size: the first value is how WIDE the painting is drawn,
       as a percentage of the screen width. Bigger = more zoomed in.
     background-position: the first value slides the painting sideways
       (0% = its left edge at the screen's left edge, 100% = its right edge
       at the screen's right edge). The second value slides it up and down
       (smaller = shows more of the top of the painting).
   The shading is lighter on the character's side so the art shows through. */
@media (min-width: 60em) {
  .message-page .wrap { max-width: none; padding: 0 6vw; }

  .scene-waiting, .scene-farewell {
    --scene-shade: linear-gradient(90deg, rgba(14, 15, 16, 0.8) 0%, rgba(14, 15, 16, 0.6) 45%, rgba(14, 15, 16, 0.12) 72%, rgba(14, 15, 16, 0.3) 100%);
  }
  .scene-welcome, .scene-problem {
    --scene-shade: linear-gradient(270deg, rgba(14, 15, 16, 0.8) 0%, rgba(14, 15, 16, 0.6) 45%, rgba(14, 15, 16, 0.12) 72%, rgba(14, 15, 16, 0.3) 100%);
  }
  .scene-waiting, .scene-farewell, .scene-welcome, .scene-problem {
    background-attachment: scroll;
  }

  /* Kyne, on the right. */
  .scene-waiting  { background-size: auto, 150% auto; background-position: 0 0, 0% 20%; }
  .scene-waiting .message-panel { margin: 0 auto 0 0; }

  /* Demagorandix, on the right. */
  .scene-farewell { background-size: auto, 145% auto; background-position: 0 0, 0% 12%; }
  .scene-farewell .message-panel { margin: 0 auto 0 0; }

  /* Rhynessa on her griffin, bursting out from the left of the panel. */
  .scene-welcome  { background-size: auto, 140% auto; background-position: 0 0, 100% 12%; }
  .scene-welcome .message-panel { margin: 0 0 0 auto; }

  /* Evil Saraahd, on the left. */
  .scene-problem  { background-size: auto, 135% auto; background-position: 0 0, 96% 14%; }
  .scene-problem .message-panel { margin: 0 0 0 auto; }
}

/* The framed panel holding the message: your Textbox artwork again. */
.message-panel {
  max-width: 36rem;
  margin: 0 auto;
  text-align: center;
  border: 26px solid var(--bronze-dark);
  border-image: url("../images/frame-card.png") 48 fill / 26px stretch;
  padding: 1.25rem 1.75rem 1.75rem;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.7));
}
.message-panel p { max-width: 30rem; margin-left: auto; margin-right: auto; }
.message-panel .button-row { justify-content: center; }
.message-panel form { margin: 0; }

/* The Mystic Times crest at the top of the panel. It links home. */
.message-logo { display: inline-block; margin-bottom: 0.75rem; }
.message-logo img { width: 6.5rem; height: auto; }
.message-panel h1 { font-size: clamp(2rem, 6vw, 2.9rem); }

/* Phones: a thinner frame, and the painting scrolls normally
   (fixed backgrounds are unreliable on phones). */
@media (max-width: 37.5em) {
  .message-page { padding: 1.5rem 0; background-attachment: scroll; }
  .message-panel { border-width: 20px; border-image-width: 20px; padding: 1rem 0.9rem 1.4rem; }
  .message-logo img { width: 5rem; }
}


/* ------------------------------------------------------------------
   READING PAGES  (privacy.html)
   A longer page of text inside the card frame, on the grey scales
   texture. Text is left-aligned for easier reading.
------------------------------------------------------------------ */
.reading-page {
  align-items: flex-start;
  background-color: var(--grey-dark);
  background-image:
    linear-gradient(rgba(18, 19, 20, 0.8), rgba(18, 19, 20, 0.8)),
    url("../images/texture-scales-grey.jpg");
  background-size: auto, 500px;
  background-attachment: scroll;
}
.reading-panel { max-width: 46rem; text-align: left; padding: 1.5rem 2rem 2rem; }
.reading-panel p { max-width: none; margin-left: 0; margin-right: 0; }
.reading-panel .message-logo { display: block; width: fit-content; margin: 0 auto 0.75rem; }
.reading-panel h1 { text-align: center; }
.reading-panel h2 { font-size: 1.6rem; margin: 1.8rem 0 0.5rem; }
.reading-panel .reading-date { text-align: center; color: var(--text-soft); font-style: italic; }
.reading-panel .button-row { justify-content: flex-start; }

@media (max-width: 37.5em) {
  .reading-panel { padding: 1rem 0.9rem 1.4rem; }
}


/* ------------------------------------------------------------------
   CONTACT FORM  (contact.html)
------------------------------------------------------------------ */
.contact-form { margin-top: 1.5rem; text-align: left; }
.contact-form .button-row { justify-content: flex-start; }
.contact-form label { display: block; font-weight: 600; margin: 1.1rem 0 0.4rem; }
.contact-form .optional { font-weight: normal; color: var(--text-soft); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--text-bright);
  background: var(--grey-darkest);
  border: 1px solid var(--bronze);
  border-radius: 3px;
  padding: 0.75rem 0.9rem;
}
.contact-form textarea { resize: vertical; min-height: 9rem; }


/* ==================================================================
   SMALLER SCREENS
   Everything below changes the layout for tablets and phones.
================================================================== */

/* Tablets and small laptops (narrower than about 960 pixels). */
@media (max-width: 60em) {
  /* The menu turns into a drop-down opened by the hamburger button. */
  .menu-toggle { display: block; order: 3; }
  .header-cta { order: 2; }
  .header-row { gap: 0.75rem; }
  .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--grey-darkest);
    border-top: 1px solid var(--bronze-dark);
    border-bottom: 1px solid var(--bronze-dark);
    padding: 0.5rem 1.25rem 1rem;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: 0.8rem 0; font-size: 1.15rem; border-bottom: 1px solid #2c2e30; }
  /* While the menu is open the bar must be solid so the words are readable. */
  .site-header.menu-open { background: var(--grey-darkest); }

  /* Side-by-side blocks stack: picture first, then the words. */
  .split { grid-template-columns: 1fr; gap: 2.25rem; }
  .split-reverse .split-media { order: 0; }
  .split-media { max-width: 34rem; }
  .cover-media img { max-width: 16rem; margin: 0; }

  /* Mystic Times block: on tablets and phones the words sit over the whole
     painting, so the slide to the left is switched off and the shading is
     even (plus the same fade at the top). */
  .picture-section-image { left: 0; width: 100%; object-position: 58% 40%; }
  .picture-section::after {
    background:
      linear-gradient(180deg, var(--grey-dark) 0, rgba(28, 29, 31, 0) 7rem),
      linear-gradient(rgba(14, 16, 15, 0.78), rgba(14, 16, 15, 0.78));
  }

  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-intro { grid-column: 1 / -1; }
}

/* Phones (narrower than about 600 pixels). */
@media (max-width: 37.5em) {
  body { font-size: 1.125rem; }

  .hide-on-phone { display: none; }
  .show-on-phone { display: block; }

  /* Shrinks the site name and button so the menu bar fits a narrow phone. */
  .brand { font-size: 1.05rem; }
  .header-row { gap: 0.5rem; }
  .header-cta { padding: 0.5rem 0.8rem; }

  .hero { min-height: 0; padding: 6.5rem 0 4.5rem; }
  .hero-image { object-position: 40% center; }
  /* On a phone the words sit over the whole picture, so the shading is even. */
  .hero::after { background: rgba(14, 15, 16, 0.82); }

  /* Buttons go full width and stack, main button first. */
  .button-row { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .button-row .text-link { text-align: center; padding: 0.4rem 0; }
  .signup-row { flex-direction: column; }
  .signup-row .button { width: 100%; }
  /* Overrides the 15rem starting width used on wider screens, which would
     otherwise become a 15rem HEIGHT once the row is stacked. */
  .signup input[type="email"] { flex: 0 0 auto; width: 100%; }

  .section { padding: 3.25rem 0 4.25rem; }

  .picture-section { padding: 4rem 0 5rem; }
  .section-head { margin-bottom: 2rem; }

  .frame-card { border-width: 20px; border-image-width: 20px; }
  .cover-card img { height: 16rem; }

  .stacked-media { padding: 0 0 2rem 1.5rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}

/* Very narrow phones (narrower than about 360 pixels):
   the site name is allowed onto two lines so the menu button still fits. */
@media (max-width: 22.5em) {
  .brand { white-space: normal; line-height: 1.05; }
}

/* Respects visitors who have asked their device to reduce movement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}