/* Century Publishing — animated home page (desktop layout, min width 1280px) */

:root {
  --ink: #1a1a1a;
  --body: #3a3632;
  --accent: #b0175f;
  --accent-dark: #7d0f43;
  --paper: #f2ede4;
  --stock: #f4f1ea;
  --backdrop: #2a2622;
  --rule: rgba(0, 0, 0, .08);
  --serif: 'Source Serif 4', serif;
  --sans: 'Inter', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body { margin: 0; background: #fff; font-family: var(--sans); color: var(--ink); }
img { display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
.serif { font-family: var(--serif); }

.page { background: #fff; min-height: 100vh; min-width: 1280px; }

/* ---------- Buttons ---------- */
.btn { padding: 11px 22px; font-size: 14px; font-weight: 500; border-radius: 2px; white-space: nowrap; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { color: #fff; }
.btn--light { background: #fff; color: var(--ink); padding: 14px 28px; font-size: 15px; }
.btn--light:hover { color: var(--ink); }

/* ---------- Header / nav ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 56px; border-bottom: 1px solid var(--rule);
}
.site-header__logo { display: flex; width: 170px; height: 44px; overflow: hidden; }
/* Matches the crop set on the design's logo slot (cover fit, nudged down) */
.site-header__logo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

.site-nav { display: flex; align-items: center; gap: 28px; font-size: 14.5px; color: var(--ink); white-space: nowrap; }
.site-nav > a { color: var(--ink); }
.navlink { position: relative; padding: 8px 0; cursor: default; }
.navlink--link { cursor: pointer; }
.navdrop {
  position: absolute; top: 100%; left: 0; z-index: 10;
  background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  min-width: 230px; padding: 10px 0;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s, transform .15s;
}
.navlink:hover .navdrop,
.navlink:focus-within .navdrop { opacity: 1; visibility: visible; transform: translateY(0); }
.navdrop a { display: block; padding: 9px 20px; font-size: 14px; color: var(--ink); }
.navdrop a:hover { color: var(--accent); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero__text { padding: 80px 64px 80px 56px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.hero__title { font-weight: 600; font-size: 44px; line-height: 1.18; margin: 0; color: var(--ink); }
.hero__text p { font-size: 17px; line-height: 1.6; color: var(--body); margin: 0; max-width: 520px; }
.hero__media { position: relative; min-width: 0; min-height: 520px; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Bands ---------- */
.band { padding: 76px 56px; border-top: 1px solid var(--rule); }
.band--paper { background: var(--paper); }
.h2 { font-weight: 600; font-size: 28px; margin: 0 0 14px; color: var(--ink); }
.h2--spaced { margin-bottom: 40px; }
.band__intro { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0 0 44px; max-width: 640px; }

.services { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.service { display: flex; flex-direction: column; gap: 16px; }
.service img { width: 100%; height: 190px; object-fit: cover; }
.service h3 { font-size: 18px; margin: 0; color: var(--ink); }
.service p { font-size: 14.5px; line-height: 1.6; color: var(--body); margin: 0; }

.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.tile { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.tile:hover { color: var(--accent); }
.tile img { width: 100%; height: 150px; object-fit: cover; }
.tile span { font-size: 14px; font-weight: 500; }

.band--quote { padding: 96px 56px; max-width: 680px; }
.band--quote p { font-size: 23px; line-height: 1.55; color: var(--ink); margin: 0 0 20px; }
.band--quote p:last-child { margin-bottom: 0; }

.work { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.work__card { display: block; padding: 24px; border: 1px solid rgba(0, 0, 0, .1); color: var(--ink); }
.work__card:hover { color: var(--ink); }
.work__card img { width: 100%; aspect-ratio: 600 / 779; object-fit: cover; margin-bottom: 18px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.work__title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.work__desc { font-size: 14px; color: var(--body); line-height: 1.5; }

/* ---------- Footer CTA ---------- */
.cta { padding: 80px 56px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; }
.cta h2 { font-weight: 600; font-size: 30px; margin: 0 0 14px; }
.cta p { font-size: 15px; color: rgba(255, 255, 255, .7); margin: 0; }

/* ---------- Sub page (issue embeds) ---------- */
.sub { padding: 96px 56px 80px; display: flex; flex-direction: column; gap: 20px; }
.sub__kicker { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.sub__title { font-weight: 600; font-size: 64px; line-height: 1.08; margin: 0; color: var(--ink); max-width: 900px; text-wrap: pretty; }
.sub__embed-slot:empty { display: none; }
.sub__embed { width: 100%; height: 78vh; min-height: 560px; margin-top: 36px; border: 1px solid rgba(0, 0, 0, .1); background: var(--paper); }
.sub__newtab { font-size: 14px; font-weight: 500; }
.sub__placeholder {
  display: flex; align-items: center; justify-content: center; height: 420px; margin-top: 36px;
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 11px);
  border: 1px solid var(--rule); font-size: 13px; color: rgba(0, 0, 0, .45);
}
.sub__back { font-size: 14.5px; font-weight: 500; margin-top: 12px; }

/* ---------- Full-screen issue page ("spread") ---------- */
.spread {
  position: relative; height: 100vh; width: 100vw; overflow: hidden;
  background: var(--backdrop); display: flex; justify-content: center;
}
.spread__img {
  height: 100vh; aspect-ratio: 1086 / 1448; max-width: 100%; flex: none;
  background: var(--stock) center / cover no-repeat;
  box-shadow: 0 0 60px rgba(0, 0, 0, .4);
}
.spread__btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
.spread__btn:hover { color: var(--accent); }
.spread__btn--home { top: 20px; left: 24px; gap: 8px; padding: 10px 16px; font-size: 13px; font-weight: 500; }
.spread__arrow { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 20px; }
.spread__arrow--prev { left: 24px; }
.spread__arrow--next { right: 24px; }
.spread__label {
  position: absolute; left: 24px; bottom: 22px;
  color: rgba(255, 255, 255, .8); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.spread__quote {
  position: absolute; top: 20px; right: 24px; padding: 10px 18px;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 500;
}
.spread__quote:hover { color: #fff; }

/* When a spread is showing, the page drops its desktop min-width so it centres on narrow windows */
.page.is-spread { min-width: 0; }

/* ---------- Intro + page-turn overlays (built in js/main.js) ---------- */
.intro { position: fixed; inset: 0; z-index: 9999; perspective: 2400px; }
.intro__backdrop { position: absolute; inset: 0; background: var(--backdrop); }
.intro__cover {
  position: absolute; transform-style: preserve-3d; transform-origin: left center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.intro__skip {
  position: absolute; right: 24px; bottom: 22px; cursor: pointer; white-space: nowrap;
  background: none; border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  font: 500 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 9px 14px;
}

.flip { position: fixed; inset: 0; z-index: 9998; perspective: 2400px; pointer-events: none; }
.flip__under { position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
.flip__leaf { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: left center; }
.flip__front { overflow: hidden; background: #fff; }

/* Shared faces for the intro cover and the page-turn leaf */
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face--cover { background: var(--stock) url('../assets/img/cp-cover.jpg') center / cover no-repeat; }
.face--shade { opacity: 0; pointer-events: none; background: linear-gradient(to left, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 70%); }
.flip .face--shade { background: linear-gradient(to left, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 65%); }
.face--back { transform: rotateY(180deg); background: linear-gradient(to left, #e9e2d4, #f6f1e7 40%); }