@import url("color.css");

/* ==========================================================================
   THE NEW JEWELLER — Editor's Note page ("Dear Reader" spread)
   Used only by the Editorial issue pages, on top of style.css. Moved here out
   of a <style> block that used to sit inside the page.

   LOAD ORDER MATTERS: .wrap.narrow below widens the 820px reading column that
   style.css sets, at the same specificity. This sheet has to be linked after
   style.css or the spread comes out narrow.
   ========================================================================== */

:root {
  /* The display serif for this spread's drop cap and the vertical
     "EDITORIAL" flag. Not --font-display: that is Playfair, and the spread is
     set in the plainer Georgia to sit closer to the printed page. */
  --editorial-serif: Georgia, 'Times New Roman', serif;
}

#content {
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  box-sizing: border-box;
}

.wrap.narrow {
  max-width: 950px;
}

.dear-reader-layout {
  width: 100%;
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  box-sizing: border-box;
}

/* -------------------- LEFT SIDE: title + cover fan -------------------- */
.dear-reader-left {
  width: 32%;
  padding: 10px 12px 20px;
  box-sizing: border-box;
  text-align: center;
  border-right: 5px solid var(--color-editorial-border);
  flex-shrink: 0;
}

.dear-reader-title {
  font-family: 'Brush Script MT', 'Segoe Script', cursive;
  font-size: 42px;
  font-weight: 400;
  color: var(--color-editorial-accent);
  line-height: 1;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-editorial-accent);
  margin-bottom: 30px;
  white-space: nowrap;
}

/* Three covers overlapping in a loose fan. The negative margins are what
   overlap them, so min-height has to hold the stack open — the covers no
   longer add up to their own height. */
.magazine-covers {
  width: 100%;
  min-height: 470px;
  position: relative;
  box-sizing: border-box;
}

.magazine-covers img {
  width: 62%;
  max-width: 145px;
  height: auto;
  display: block;
}

.cover-one   { margin: 0 auto; }
.cover-two   { margin: -18px 2% 0 auto; }
.cover-three { margin: -18px auto 0 2%; }

/* -------------------- RIGHT SIDE: the letter -------------------- */
.dear-reader-right {
  width: 68%;
  padding: 5px 55px 25px 40px;
  box-sizing: border-box;
  position: relative;
}

.dear-reader-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-editorial-text);
  text-align: justify;
}

.dear-reader-text p {
  margin: 0 0 15px;
}

.drop-cap {
  float: left;
  font-family: var(--editorial-serif);
  font-size: 65px;
  line-height: 52px;
  padding-right: 6px;
  color: var(--color-editorial-drop);
}

/* Sign-off: ranged left, not justified like the body, with extra air above
   it. Scoped through .dear-reader-text so it outranks the paragraph margin
   above on specificity — which is what the !important here stood in for. */
.dear-reader-text .closing-text {
  text-align: left;
  margin-top: 25px;
}

.signature {
  text-align: left;
  line-height: 1.6;
}

/* The word "EDITORIAL" set on its side down the outer edge of the spread. */
.editorial-text {
  position: absolute;
  right: -20px;
  top: 250px;
  font-family: var(--editorial-serif);
  font-size: 48px;
  font-style: italic;
  font-weight: 400;
  color: var(--color-editorial-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* ==========================================================================
   RESPONSIVE — not here.
   The spread's tablet rules (both panels side by side, everything shrunk) and
   its phone rules (panels stacked, the cover fan turned into a row, the
   vertical EDITORIAL flag laid flat) are in assets/tablet.css and
   assets/mobile.css. Link assets/responsive.css after this sheet to pull them
   in — after this one, not just after style.css, or the phone layout loses to
   the rules above.
   ========================================================================== */