/* Prisma España: one page, three facets. Blush-lavender ground; indigo, rose and
   amber are the three colours of the prism. No cards, no borders, no shadows. */

:root {
  --bg: #F7F5FA;
  --ink: #1F1B2E;
  --ink-soft: #4A4560;

  --indigo: #4B3F72;
  --rose: #A23E5C;
  --amber: #C08A28;
  --amber-text: #8A6115; /* the amber, deepened so small text stays legible on the ground */

  /* Masthead colours sampled from logo.png */
  --logo-navy: #141824;
  --logo-crimson: #A00010;

  --font-head: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --font-body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mast: "Noto Serif Display", "Playfair Display", Georgia, serif;

  --gutter: 22px;
  --column: 680px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body.is-reading { overflow: hidden; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Per-section accent, used by dividers, story text and the reader. */
.sec-politica { --accent: var(--indigo); --accent-text: var(--indigo); --on-accent: #FBF9FF; }
.sec-business { --accent: var(--rose); --accent-text: var(--rose); --on-accent: #FFF8FA; }
.sec-sport { --accent: var(--amber); --accent-text: var(--amber-text); --on-accent: #2A1C04; }

button { font: inherit; color: inherit; }

/* Focus is shown as an underline and colour, never as a box. */
button:focus { outline: none; }
button:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
a:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  width: min(100%, var(--column));
  margin-inline: auto;
  padding: calc(30px + env(safe-area-inset-top)) var(--gutter) 30px;
}

.masthead::after { content: ""; display: block; clear: both; }

/* The wordmark block floats right of centre; the intro wraps down its left,
   following a slanted edge that echoes the prism cut. */
.mast-mark {
  position: relative;
  float: right;
  width: 60%;
  margin: 0 0 8px 8px;
  padding-top: 12px;
  shape-outside: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  shape-margin: 10px;
}

.beam {
  position: absolute;
  top: -8px;
  left: 4%;
  width: 82%;
  height: 26px;
  background: linear-gradient(90deg, #FEBC09 0%, rgba(254, 188, 9, 0.55) 40%, rgba(254, 188, 9, 0) 100%);
  clip-path: polygon(0 100%, 100% 0, 100% 62%);
  opacity: 0.85;
}

.wordmark {
  margin: 0;
  font-family: var(--font-mast);
  font-weight: 900;
  font-size: clamp(50px, 15.4vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  font-synthesis: none;
}

.wm-a, .wm-b { display: block; white-space: nowrap; }

.wm-a { color: var(--logo-navy); font-stretch: 75%; }
.wm-b { color: var(--logo-crimson); font-stretch: 62.5%; font-size: 0.88em; letter-spacing: -0.06em; margin-left: 0.34em; }

/* The initial carries the logo's crimson-to-gold facet colours as a text gradient. */
.wm-p { color: #D7041E; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .wm-p {
    background: linear-gradient(140deg, #D7041E 0%, #A00010 42%, #F89014 74%, #FEBC09 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.wm-rule {
  display: block;
  height: 8px;
  margin-top: 10px;
  background: linear-gradient(90deg, #D7041E 0%, #F89014 42%, #FEBC09 66%, rgba(254, 188, 9, 0) 100%);
  clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
}

.slogan {
  margin: 12px 0 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.intro {
  margin: 0;
  padding-top: 10px;
  font-family: var(--font-head);
  font-size: clamp(19px, 5.3vw, 25px);
  font-weight: 500;
  line-height: 1.26;
  color: var(--ink);
}

/* ---------------------------------------------------------------- dividers */

.section { position: relative; }

.divider {
  --h: clamp(150px, 42vw, 210px);
  --tilt: clamp(22px, 6.4vw, 36px);
  --spread: 0;
  position: relative;
  height: var(--h);
  margin-bottom: 68px;
}

.tilt-down { --cut: polygon(0 0, 100% var(--tilt), 100% 100%, 0 calc(100% - var(--tilt))); }
.tilt-up { --cut: polygon(0 var(--tilt), 100% 0, 100% calc(100% - var(--tilt)), 0 100%); }

.band, .fringe {
  position: absolute;
  inset: 0;
  clip-path: var(--cut);
}

/* Two thin refracted copies in the other prism colours slide out from under the band. */
.fringe { will-change: transform; }
.fringe-1 { background: var(--fringe-1); transform: translate3d(0, calc(9px + var(--spread) * 12px), 0); }
.fringe-2 { background: var(--fringe-2); transform: translate3d(0, calc(18px + var(--spread) * 26px), 0); }

.band {
  display: flex;
  align-items: center;
  background: var(--accent);
  color: var(--on-accent);
  padding-inline: max(var(--gutter), calc((100% - var(--column)) / 2 + var(--gutter)));
}

.tilt-down .band { padding-bottom: var(--tilt); }
.tilt-up .band { padding-top: var(--tilt); }

.band-text { max-width: 20ch; }

.section-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(44px, 12.4vw, 66px);
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.section-kicker {
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.92;
}

.band-prism {
  position: absolute;
  right: max(var(--gutter), calc((100% - var(--column)) / 2 + var(--gutter)));
  width: clamp(64px, 19vw, 92px);
  height: auto;
  transform: translateY(-50%);
}

.tilt-down .band-prism { top: calc(50% + var(--tilt) / 2); }
.tilt-up .band-prism { top: calc(50% - var(--tilt) / 2); }

.prism { display: block; }

/* ----------------------------------------------------------------- stories */

.stories { width: min(100%, var(--column)); margin-inline: auto; }

.story {
  margin-bottom: clamp(52px, 12vw, 76px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Cover image: the bottom edge is cut on a slant, with a thin band of the
   section colour running along the cut like a light edge on a facet. */
.shot {
  --slant: clamp(16px, 5.4vw, 30px);
  --edge: 5px;
  --yl: 100%;
  --yr: calc(100% - var(--slant));
  position: relative;
  margin: 0;
  isolation: isolate;
  aspect-ratio: var(--ratio);
  background: var(--bg);
}

.is-flip .shot { --yl: calc(100% - var(--slant)); --yr: 100%; }

.shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: var(--fit);
  object-position: var(--pos);
  clip-path: polygon(0 0, 100% 0, 100% calc(var(--yr) - var(--edge)), 0 calc(var(--yl) - var(--edge)));
}

/* Logo-style covers sit on white: multiply lets the ground show through. */
.shot.is-contain img { mix-blend-mode: multiply; }

.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  clip-path: polygon(0 calc(var(--yl) - var(--edge)), 100% calc(var(--yr) - var(--edge)), 100% var(--yr), 0 var(--yl));
  pointer-events: none;
}

.story-body { padding: 22px var(--gutter) 0; }

/* Every second story steps in from the left: an asymmetric rhythm. */
.is-flip .story-body { padding-left: calc(var(--gutter) + 7%); }

.story-title {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(29px, 8vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.008em;
  text-wrap: balance;
  color: var(--ink);
}

.story-preview {
  margin: 0 0 8px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.hl { color: var(--accent-text); font-weight: 700; }

.more {
  display: inline-block;
  padding: 10px 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-text);
}

.arrow { display: inline-block; transition: transform 0.25s var(--ease-out); }
.story:hover .arrow, .more:focus-visible .arrow { transform: translateX(5px); }

/* ------------------------------------------------------------------ footer */

.footer {
  width: min(100%, var(--column));
  margin: 8px auto 0;
  padding: 0 var(--gutter) calc(56px + env(safe-area-inset-bottom));
}

.footer-rays {
  display: block;
  height: 24px;
  margin: 0 calc(var(--gutter) * -1) 30px;
  background:
    linear-gradient(var(--indigo), var(--indigo)) 0 0 / 100% 6px no-repeat,
    linear-gradient(var(--rose), var(--rose)) 0 9px / 100% 6px no-repeat,
    linear-gradient(var(--amber), var(--amber)) 0 18px / 100% 6px no-repeat;
  clip-path: polygon(0 30%, 100% 0, 100% 70%, 0 100%);
}

.footer-name {
  margin: 0 0 4px;
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

.footer-mail {
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ------------------------------------------------------------------ reader */

.reader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.28s ease, transform 0.42s var(--ease-out), visibility 0s linear 0.42s;
}

.reader.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.28s ease, transform 0.42s var(--ease-out), visibility 0s;
}

.reader-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 4px;
  background: rgba(75, 63, 114, 0.08);
}

.reader-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.reader-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(16px + env(safe-area-inset-top)) var(--gutter) 10px;
}

.reader-back {
  padding: 8px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-text);
}

.reader-section {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.reader-section .prism { width: 30px; height: auto; }

.reader-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.reader-scroll:focus { outline: none; }

.reader-article {
  width: min(100%, 660px);
  margin-inline: auto;
  padding: 10px var(--gutter) calc(64px + env(safe-area-inset-bottom));
}

.reader-title {
  margin: 0 0 22px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(33px, 9.2vw, 46px);
  line-height: 1.03;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.reader-article .shot { margin: 0 calc(var(--gutter) * -1) 30px; }

/* Body copy: even margins on both sides, hyphenated, like a printed page. */
.reader-body p {
  margin: 0 0 1.05em;
  font-size: 17.5px;
  line-height: 1.66;
  color: var(--ink);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  overflow-wrap: break-word;
}

.pullquote {
  position: relative;
  margin: 1.5em 0 1.6em 7%;
  padding: 0;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(27px, 7.6vw, 33px);
  line-height: 1.16;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  color: var(--accent-text);
}

.pullquote::before {
  content: "";
  display: block;
  width: 58px;
  height: 7px;
  margin-bottom: 16px;
  background: var(--accent);
  clip-path: polygon(0 100%, 16px 0, 100% 0, calc(100% - 16px) 100%);
}

/* The quote's own paragraph must not pick up the body-copy rule above. */
.reader-body .pullquote p {
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.reader-end { padding-top: 18px; }

.reader-end-rule {
  display: block;
  width: 96px;
  height: 7px;
  background: linear-gradient(90deg, var(--indigo) 0 33.3%, var(--rose) 33.3% 66.6%, var(--amber) 66.6%);
  clip-path: polygon(0 100%, 16px 0, 100% 0, calc(100% - 16px) 100%);
}

@media (min-width: 720px) {
  .mast-mark { width: 52%; }
  .is-flip .story-body { padding-left: calc(var(--gutter) + 40px); }
}

@media (prefers-reduced-motion: reduce) {
  .reader, .reader.is-open, .arrow { transition: none; }
  .fringe { transition: none; will-change: auto; }
}