/* Plum Press — values from Figma file Z2pJDh8H33qyza676HJA0y */

:root {
  --plum: #8B0B43;
  --paper: #FEFBF2;

  --sans: "Inter Tight", system-ui, sans-serif;
  --mono: "Source Code Pro", ui-monospace, monospace;

  --margin: 40px;
  --list-width: 368px;           /* list column incl. its 40px padding */
  --footer-height: 126px;        /* "footer" frame height (sign-up, incl. its 40px padding) */
  --photo-ratio: 3130 / 2075;
  --fade: 400ms;
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;              /* the page never scrolls */
  background: var(--paper);
  color: var(--plum);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

p { margin: 0; }

/* ---------- Text styles ---------- */

.h1, .h2, .h3, .body-large, .body-small,
.landing-title, .landing-subtitle,
.mono-regular, .mono-bold {
  line-height: 1;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
}

.h1          { font: 700 160px/1 var(--sans); letter-spacing: -0.05em; }
.h2          { font: 700 64px/1 var(--sans);  letter-spacing: -0.03em; }
.h3          { font: 700 32px/1 var(--sans); }
.body-large  { font: 700 16px/1 var(--sans); }
.body-small  { font: 700 12px/1 var(--sans); }
.mono-regular { font: 400 12px/1 var(--mono); text-transform: uppercase; }
.mono-bold    { font: 700 12px/1 var(--mono); text-transform: uppercase; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Landing ---------- */

.landing {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  background: var(--paper);
  cursor: pointer;
  transition: opacity var(--fade) ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.landing.is-leaving { opacity: 0; pointer-events: none; }

.landing-logo {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: var(--margin);
}
.landing-logo .plum { width: 200px; height: 185px; flex-shrink: 0; }

.landing-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.landing-title    { font: 700 160px/1 var(--sans); letter-spacing: -0.05em; }  /* H1 */
.landing-subtitle { font: 700 32px/1 var(--sans); }                            /* H3 */

/* 1051px – 527px */
@media (max-width: 1051px) {
  .landing-logo { gap: 16px; }
  .landing-logo .plum { width: 120px; height: 110px; }
  .landing-text { gap: 16px; }
  .landing-title { font-size: 64px; letter-spacing: -0.03em; }                 /* H2 */
}

/* 527px – 314px, and mobile */
@media (max-width: 527px) {
  .landing-logo { gap: 8px; }
  .landing-logo .plum { width: 62px; height: 57.26px; }
  .landing-text { gap: 8px; }
  .landing-title { font-size: 32px; letter-spacing: 0; }                       /* H3 */
  .landing-subtitle { font-size: 12px; }                                       /* Body Small */
}

/* ---------- Main page (desktop, 840px and up) ---------- */

.main {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: var(--margin);
  width: var(--list-width);
}

.line {
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.5;
  -webkit-tap-highlight-color: transparent;
}
.line.is-selected { opacity: 1; }
.line:focus-visible { outline: 1px solid var(--plum); outline-offset: 4px; }

@media (hover: hover) {
  .line:hover .body-small { font-style: italic; }
}

.line > span {
  display: flex;
  align-items: center;
  height: 15px;
}
.line .issue-number  { width: 40px; }
.line .date-range    { width: 80px; }
.line .months        { width: 144px; }
.line .photo-count   { width: 24px; }

/* Media frame: fills the space right of the list (min 472px) until it reaches
   1017px, then holds while the gap to the list grows to 120px; past that it
   keeps scaling with a 120px gap. Aspect ratio locked. Max size: the frame's
   bottom edge (incl. its 40px bottom padding) touches the top of the footer's
   padding, so the page never scrolls. */
.media {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: var(--margin) var(--margin) var(--margin) 0;
  width: max(
    472px,
    min(
      100vw - var(--list-width),
      max(1017px, 100vw - var(--list-width) - 120px),
      (100dvh - var(--footer-height) - var(--margin) * 2 - 16px - 8px) * 3130 / 2075 + var(--margin)
    )
  );
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.media[hidden] { display: none; }

.media-image {
  position: relative;
  width: 100%;
  aspect-ratio: var(--photo-ratio);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.media-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}

.media-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Footer: plum + logo bottom-left, sign-up stuck bottom-right */

.plum--footer {
  position: absolute;
  left: -48px;
  bottom: -48px;
  width: 200px;
  height: 185px;
  pointer-events: none;
}

.footer-logo {
  position: absolute;
  left: 152px;
  bottom: 0;
  padding: var(--margin) 16px;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: var(--margin);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.email-sign-up {
  margin: 0;
  border: 1px solid var(--plum);
  padding: 8px;
  display: flex;
}
.email-sign-up input {
  width: 209px;
  height: 8px;                    /* cap height of 12px Source Code Pro, as in Figma */
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--plum);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.email-sign-up input::placeholder { color: var(--plum); opacity: 1; }
.email-sign-up:focus-within { outline: 1px solid var(--plum); outline-offset: 2px; }

/* ---------- Mobile (below 840px) ---------- */

@media (max-width: 839px) {
  .list {
    width: 100%;
    align-items: stretch;
  }

  .line { justify-content: space-between; width: 100%; }

  /* Photo opens inline under its line */
  .media {
    position: static;
    width: 100%;
    padding: 0 0 32px;
    gap: 8px;
  }

  .plum--footer { left: -133px; bottom: -94px; }

  .footer-logo {
    left: auto;
    right: 0;
    padding: 16px;
  }

  .footer {
    bottom: 79px;
    padding: 0 16px;
  }
}