/* The portfolio as a weekly newsmagazine. Three levels in the magazine's own parts: the cover and contents (high),
   the feature (mid), the files (low, the existing case pages). A red nameplate, Franklin Gothic for cover lines and
   furniture, Bodoni for headlines and drop caps, a text serif for reading. Light only, like paper.
   Colour has one job each: ink and greys for structure, red for the nameplate (and case 01's alert, which is red),
   and each case its own colour, tuned once for paper and once for the night stage. */
:root {
  --paper: #ffffff;
  --ink: #1b1a19;
  --ink2: #4a4845;
  --ink3: #6e6a65;
  --rule: #d9d6d1;
  --tint: #f3f1ee;
  --brand: #d7261e;
  --night: #121212;
  --night-ink2: #a8a39c;
  --c01: #c8231b; --c01-n: #f0473c;
  --c02: #0f6e5c; --c02-n: #3cc9a9;
  --c03: #174ea6; --c03-n: #6e9dff;
  --c04: #7a5f00; --c04-n: #f2c500;
  --c05: #c92368; --c05-n: #ff62a2;
  --c06: #6236c0; --c06-n: #a98bff;
  --c07: #a84200; --c07-n: #ff8c42;
  --franklin: "Libre Franklin", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  --bodoni: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --text: "Source Serif 4", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 64px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 19px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-color: var(--ink3); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; }
.wrap { max-width: 76rem; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sans { font-family: var(--franklin); }
.kicker { font-family: var(--franklin); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin: 0; }
.rule-top { border-top: 4px solid var(--ink); }

/* The nameplate: a red block with the name, like a newsmagazine's. */
.plate { display: inline-flex; align-items: stretch; gap: .1em; background: var(--brand); color: #fff; font-family: var(--franklin); font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; line-height: 1; text-decoration: none; }
/* JAVIER runs up the left edge of the plate, read bottom to top, beside ALCÍVAR. */
.plate .first { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .205em; font-weight: 800; letter-spacing: .16em; line-height: 1; padding: 0 .35em 0 0; margin: -.02em 0; border-left: max(1px, .045em) solid rgba(255, 255, 255, .7); text-align: center; }
.plate .last { display: block; align-self: center; }
.plate.sm { font-size: 22px; padding: 5px 9px 4px 6px; }
.plate.sm .first { font-size: 8px; letter-spacing: .1em; padding-right: 3px; border-left-width: 1px; }

/* The masthead bar on every page: the plate, the issue, where you are. */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.mast { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--paper); border-bottom: 1px solid var(--ink); }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding-block: 8px; }
.mast .issue { font-family: var(--franklin); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.parts { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; font-family: var(--franklin); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.parts a, .parts span { display: block; padding: 7px 10px; color: var(--ink); text-decoration: none; }
.parts [aria-current] { background: var(--ink); color: #fff; }
.parts a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.cap { font-family: var(--franklin); font-size: 12.5px; line-height: 1.45; color: var(--ink2); margin: 10px 0 0; }
.cap b { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  @keyframes rise { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
  .drop { animation: drop 1.1s cubic-bezier(.2, .9, .25, 1.05) both .25s; }
  @keyframes drop { from { transform: translateY(-40px) rotate(-14deg); opacity: 0; } to { transform: rotate(var(--rot, -5deg)); opacity: 1; } }
}
@media (max-width: 760px) {
  .mast .issue { display: none; }
}