/* Relatos desde Santiago — visual system A personal Sunday newspaper: warm paper, real ink, and a family of editorial colours that belong to a printed supplement rather than to a UI kit. Three rules govern everything below. 1. Colour is editorial, not decorative. Each story names one accent and the whole page borrows it — eyebrow, rules, drop cap, pull quote, links, figure marks. The paper, the type and the furniture never change, so the publication stays one publication and each page keeps its own mood. 2. Photographs are framed, never inserted. A phone portrait is 4000px tall; left to its own ratio it swallows a column and kills the rhythm. Every slot declares its crop. 3. Mobile is designed, not shrunk: its own measure, its own headline scale, photography to the edges, fewer rules. */ @font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } /* Source Serif 4 (OFL-1.1), self-hosted. The reading voice: a text face cut for continuous prose rather than the system book faces we borrowed before, which differ on every machine. Instrument Serif keeps the display work. */ @font-face { font-family: 'Source Serif 4'; src: url('/assets/fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('/assets/fonts/source-serif-4-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('/assets/fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } :root { --paper: #f6f1e5; --paper-deep: #ece3d0; --ink: #14120d; --ink-soft: #38312a; --muted: #6e6455; --rule: #c6b99f; --rule-soft: #ded3bc; /* The publication's chromatic family. Used one at a time, per story. */ --wine: #7d2231; --verde: #2f4b3a; --cobalto: #23406b; --ocre: #a8762a; --terracota: #a94f33; --accent: var(--wine); --accent-soft: rgba(125, 34, 49, .1); --display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; --serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --max: 1200px; --measure: 62ch; --gap: clamp(22px, 3vw, 40px); --edge: clamp(20px, 4vw, 40px); } /* One accent per page. Set on by the generator, and on individual cards so the front page shows the whole family at once. */ .accent-wine { --accent: var(--wine); --accent-soft: rgba(125, 34, 49, .1); } .accent-verde { --accent: var(--verde); --accent-soft: rgba(47, 75, 58, .1); } .accent-cobalto { --accent: var(--cobalto); --accent-soft: rgba(35, 64, 107, .1); } .accent-ocre { --accent: var(--ocre); --accent-soft: rgba(168, 118, 42, .12); } .accent-terracota { --accent: var(--terracota); --accent-soft: rgba(169, 79, 51, .11); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 19px; line-height: 1.62; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Paper grain. An inline SVG turbulence, so it costs no request and no image decode — just enough tooth that the page does not read as a flat screen colour. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"); } body > * { position: relative; z-index: 1; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; } img, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 16px; font: 600 12px/1 var(--mono); } .skip-link:focus { left: 8px; top: 8px; } .wrap, .masthead, .site-footer { width: min(var(--max), calc(100% - var(--edge) * 2)); margin-inline: auto; } /* ---------------------------------------------------------------- masthead */ .utility { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 13px 0 11px; border-bottom: 1px solid var(--ink); font: 600 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; } .utility ul { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; } .utility a { text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; } .utility a:hover { border-bottom-color: var(--accent); color: var(--accent); } .utility__note { margin: 0; color: var(--muted); font-weight: 400; } .masthead__brand { text-align: center; padding: clamp(18px, 2.6vw, 30px) 0 14px; } .wordmark { margin: 0; font-size: clamp(40px, 8.8vw, 108px); line-height: .88; letter-spacing: -.03em; } .wordmark a { text-decoration: none; } .wordmark__sub { margin: 16px auto 0; max-width: 44ch; text-wrap: balance; font-style: italic; font-size: clamp(15px, 1.5vw, 18px); color: var(--muted); } /* The masthead: set title over a drawn Santiago. ------------------------------------------------------------------------ The name is real text and the panorama is real geometry. The raster banner this replaces could not be both full-width on a desktop and uncropped on a phone — every attempt was another object-fit compromise, and the last one was cutting through the nameplate itself. Neither problem exists once the drawing is drawn rather than photographed. Title above, vignette below: they read as one nameplate, but they never fight for the same pixels, so the title can never be clipped by the artwork or the artwork by the title. */ /* Sized to span the measure, the way a nameplate does — the old raster banner never could, which is half of why it read as a hero image. */ .wordmark--plate { margin: 0; font-size: clamp(38px, 7.4vw, 92px); line-height: .94; letter-spacing: -.035em; } .wordmark--plate a { text-decoration: none; } .np { margin: 10px 0 0; } /* No text selection: the tower's secret is a triple click, and a triple click inside a drawing that contains a node otherwise selects it. */ .np__scene { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-select: none; } .np__scene--narrow { display: none; } .np__ridge--far { fill: var(--rule-soft); } .np__ridge--near { fill: var(--rule); } .np__city { fill: var(--muted); } .np__torre { fill: var(--ink-soft); pointer-events: auto; } .np__mast { stroke: var(--ink-soft); stroke-width: 1.4; fill: none; } .np__lights { fill: var(--ocre); opacity: .75; } .np__palm, .np__bici { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .np__bici circle { fill: none; } /* Both hidden until the tower is tapped three times. */ .np__stars { fill: var(--ink-soft); opacity: 0; } .np__coords { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; fill: var(--muted); opacity: 0; } .np[data-noche] .np__stars { opacity: .62; } .np[data-noche] .np__coords { opacity: .85; } .np[data-noche] .np__lights { opacity: .12; } .np[data-noche] .np__city { fill: var(--ink-soft); } /* The transition is on the drawing only, so nothing else on the page moves. */ .np__stars, .np__coords, .np__lights, .np__city { transition: opacity .5s ease, fill .5s ease; } /* The bicycle arrives once and then stays put. Written so the resting state is the final state and the animation only displaces the *start*: if it never runs — reduced motion, an old engine, anything — the bicycle is simply already where it belongs, rather than stuck off to one side. */ @keyframes np-bici-in { from { transform: translateX(-26px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .np__bici { animation: np-bici-in 1s cubic-bezier(.22,.61,.36,1) 1 both; } .masthead--compact .wordmark { font-size: clamp(23px, 3.2vw, 32px); } .masthead--compact .wordmark__sub { display: none; } .masthead--compact .masthead__brand { padding: 16px 0 14px; } .masthead--compact { border-bottom: 1px solid var(--ink); } /* The dateline: thick rule above, hairline below — a printed folio band. */ .edition { margin: 0; padding: 10px 0 11px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); text-align: center; font: 600 10px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); } /* ------------------------------------------------------------ front page */ .eyebrow { margin: 0 0 10px; font: 600 10px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .eyebrow__no { color: var(--muted); } .front-lead { display: grid; align-items: start; grid-template-columns: minmax(0, 1.62fr) minmax(270px, .92fr); gap: clamp(26px, 3.4vw, 52px); padding: clamp(30px, 4vw, 54px) 0 clamp(28px, 3.6vw, 46px); border-bottom: 3px double var(--ink); } .front-lead__main { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); } .front-lead__side { display: flex; flex-direction: column; gap: 26px; border-left: 1px solid var(--rule); padding-left: clamp(20px, 2.4vw, 34px); } .front-lead__side .card + .card { border-top: 1px solid var(--rule-soft); padding-top: 24px; } .card__title { margin: 0 0 11px; line-height: 1.03; } .card__title a { text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 92%; transition: background-size .32s cubic-bezier(.22,.61,.36,1); } .card__title a:hover { background-size: 100% 1px; } .card__deck { margin: 0 0 12px; color: var(--ink-soft); max-width: 54ch; } .card__meta { margin: 0; font: 600 10px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .card--lead .figure { margin-bottom: 20px; } .card--lead .card__title { font-size: clamp(36px, 5.6vw, 70px); letter-spacing: -.034em; } .card--lead .card__deck { font-size: clamp(18px, 1.9vw, 22px); line-height: 1.42; } .card--secondary .card__title { font-size: clamp(23px, 2.5vw, 29px); } .card--tertiary .card__title { font-size: clamp(21px, 2.1vw, 25px); } .card--postal .card__title, .card--dispatch .card__title { font-size: clamp(20px, 2.2vw, 25px); } .card--secondary .card__deck, .card--tertiary .card__deck { font-size: 16px; } /* Photographs keep the shape they were taken in. No house ratio, no cover crop: the layout is built around the picture instead of the picture being cut to fit the layout. The generator tags each figure with its own orientation, so this needs nothing from the author. */ .figure--card img { width: auto; max-width: 100%; height: auto; } /* A phone portrait as the lead: it sits beside the headline rather than being stretched across the column. The height cap is ratio-safe only because width is auto -- with width:100% the browser clamps the height and leaves the width alone, which squashes the picture. */ .card--lead.card--portrait { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(22px, 2.8vw, 40px); align-items: start; } .card--lead.card--portrait .figure--card { grid-row: span 4; } .card--lead.card--portrait .figure--card img { max-height: 84vh; } /* The lead carries the front page's largest photograph; the side column runs thumbnails. Without these caps the two secondary portraits plus the index made the side column 1500px taller than the lead, so the most important story on the page was also the smallest thing on it. The caps are height caps on auto-width images, so every ratio is still the camera's. */ .front-lead__side .figure--card img { max-height: 42vh; } .js .card .figure img { transition: transform .6s cubic-bezier(.22,.61,.36,1); } .js .card:hover .figure img { transform: scale(1.015); } /* The band: one story as type alone, full width. The front page's change of pace, so four cards do not arrive at the same volume. */ /* Photograph beside the type, not above it. Most of these images are phone portraits: a full-width band would crop straight through a face, while a tall column suits them and gives the front page a second kind of composition next to the lead's image-over-headline. */ .band { display: grid; align-items: center; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(24px, 3.2vw, 46px); padding: clamp(30px, 4vw, 52px) 0; border-bottom: 1px solid var(--rule); border-left: 3px solid var(--accent); padding-left: clamp(20px, 3vw, 40px); } .band .figure--band { margin: 0; } .band .figure--band img { width: auto; max-width: 100%; height: auto; max-height: 66vh; } .js .band .figure img { transition: transform .6s cubic-bezier(.22,.61,.36,1); } .js .band:hover .figure img { transform: scale(1.012); } .band__title { margin: 0 0 14px; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.02; letter-spacing: -.03em; max-width: 20ch; } .band__title a { text-decoration: none; } .band__title a:hover { color: var(--accent); } .band__deck { margin: 0 0 14px; max-width: 46ch; font-size: clamp(18px, 2vw, 23px); line-height: 1.42; color: var(--ink-soft); font-style: italic; } .band__meta { margin: 0; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .section-block { padding: clamp(28px, 3.6vw, 46px) 0; border-bottom: 1px solid var(--rule); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding-bottom: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--ink); position: relative; } /* A coloured rule that draws itself in under the section title. */ .section-head::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 3px; background: var(--accent); width: 0; } .reveal.is-in .section-head::after, .section-block.is-in .section-head::after { width: 84px; transition: width .7s cubic-bezier(.22,.61,.36,1) .1s; } .section-head h2 { margin: 0; font-size: clamp(21px, 2.3vw, 28px); } .section-head h2 a { text-decoration: none; } .section-head p { margin: 0; font: 600 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .section-block__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--gap); } /* The rail index — “En este número”. Fills the column beside a tall lead with the same content in a different register: an index, not more cards. */ .rail-index { border-top: 1px solid var(--ink); padding-top: 14px; } .rail-index__head { margin: 0 0 6px; font: 600 10px var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } .rows--rail a { grid-template-columns: 32px minmax(0, 1fr) 18px; gap: 10px; padding: 10px 0; } .rows--rail .row__title { font-size: 17px; line-height: 1.2; } .rail-index__more { margin: 12px 0 0; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; } .rail-index__more a { text-decoration: none; color: var(--accent); } .rail-index__more a:hover { text-decoration: underline; } /* archive rows */ .rows { list-style: none; margin: 0; padding: 0; } .rows li + li { border-top: 1px solid var(--rule-soft); } .rows a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 20px; align-items: baseline; gap: 16px; padding: 14px 0; text-decoration: none; } .rows a:hover .row__title { color: var(--accent); } .row__no { font: 600 10px var(--mono); letter-spacing: .08em; color: var(--accent); } .row__title { font-size: clamp(17px, 1.8vw, 20px); font-family: var(--display); transition: color .2s ease; } .row__date, .row__section { font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .row__read { font: 400 14px/1 var(--mono); color: var(--rule); text-align: right; } .row__read.is-read { color: var(--verde); } /* “Mientras tanto, en Santiago…” — a contact sheet, not a stories bar. */ .strip { padding: clamp(26px, 3.6vw, 44px) 0; border-bottom: 1px solid var(--rule); } .strip__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(148px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0; padding: 2px 0 12px; list-style: none; scrollbar-width: thin; } .strip__item { scroll-snap-align: start; } .strip__item a { text-decoration: none; display: block; } .strip__item .figure { margin: 0; } .strip__item img { aspect-ratio: 9 / 16; object-fit: cover; width: 100%; } .js .strip__item { transition: transform .4s cubic-bezier(.22,.61,.36,1); } .js .strip__rail:hover .strip__item { transform: translateY(3px); } .js .strip__rail .strip__item:hover { transform: translateY(-4px); } .strip__label { display: block; margin-top: 8px; font-size: 15px; line-height: 1.3; } .strip__place { display: block; margin-top: 3px; font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* Who writes this. Part of the newspaper, not a legal component. */ .intro { display: grid; grid-template-columns: minmax(120px, .26fr) minmax(0, 1.74fr); gap: var(--gap); padding: clamp(28px, 3.6vw, 46px) 0; border-bottom: 1px solid var(--rule); } .intro__body p { margin: 0 0 1em; max-width: 58ch; color: var(--ink-soft); } .intro__body p:first-child { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.46; color: var(--ink); } .intro__body a { color: var(--accent); text-decoration-color: var(--rule); } .intro__note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-soft); font: 400 13.5px/1.55 var(--mono); color: var(--muted); max-width: 56ch; } /* whatsapp */ .whatsapp { display: grid; grid-template-columns: minmax(120px, .26fr) minmax(0, 1.74fr); gap: var(--gap); padding: clamp(28px, 3.6vw, 46px) 0; border-bottom: 3px double var(--ink); } .label { margin: 0; font: 600 10px var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--accent); } .whatsapp h2 { margin: 0 0 10px; font-size: clamp(23px, 2.6vw, 31px); } .whatsapp p { margin: 0 0 16px; max-width: var(--measure); color: var(--ink-soft); } .channel-link { display: inline-block; margin-top: 2px; padding: 12px 17px; border: 1px solid var(--ink); text-decoration: none; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: background .18s ease, color .18s ease, border-color .18s ease; } .channel-link:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); } /* ------------------------------------------------------------ story pages */ .page-head { padding: clamp(26px, 3.6vw, 44px) 0 20px; border-bottom: 1px solid var(--ink); } .page-head h1 { margin: 0 0 10px; font-size: clamp(32px, 5vw, 54px); } .page-head p { margin: 0 0 10px; color: var(--muted); max-width: var(--measure); } .story-head { padding: clamp(28px, 4vw, 56px) 0 24px; border-bottom: 1px solid var(--accent); } .story-title { margin: 0 0 18px; font-size: clamp(34px, 6vw, 78px); line-height: .96; letter-spacing: -.034em; max-width: 17ch; } .deck { margin: 0 0 20px; font-size: clamp(18px, 2vw, 24px); line-height: 1.4; color: var(--ink-soft); max-width: 44ch; font-style: italic; } .story-meta { margin: 0; font: 600 10px var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); } /* Figures are numbered like plates in a supplement. */ .story-body { counter-reset: fig; } .figure { margin: 0 0 6px; } .figure figcaption { margin-top: 10px; font: 400 13px/1.5 var(--mono); color: var(--muted); padding-left: 12px; border-left: 2px solid var(--accent); max-width: 52ch; } .figure figcaption::before { counter-increment: fig; content: "Fig. " counter(fig) " · "; color: var(--accent); font-weight: 600; } .figure--cover { margin: 6px 0 clamp(26px, 3.4vw, 44px); } .figure--cover img { width: auto; max-width: 100%; height: auto; } /* A vertical photograph is not enlarged until it fills a desktop screen: it is given a column of its own and paper around it. */ .figure--cover[data-shape="portrait"] { max-width: 560px; margin-inline: auto; } .figure--cover[data-shape="square"] { max-width: 680px; margin-inline: auto; } .story-body { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); gap: clamp(30px, 4vw, 60px); padding-bottom: 32px; } .story-body--visual, .story-body--movement, .story-body--dispatch, .story-body--abierta, .story-body--texto { grid-template-columns: minmax(0, 1fr); } .prose { font-size: clamp(18px, 1.2vw, 20px); line-height: 1.72; max-width: var(--measure); } .prose p { margin: 0 0 1.35em; } .prose > p:first-of-type::first-letter { float: left; font-family: var(--display); font-size: 4.2em; line-height: .76; padding: 5px 10px 0 0; color: var(--accent); } .prose h2 { margin: 1.8em 0 .5em; font-size: 1.45em; } .prose blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 3px solid var(--accent); font-style: italic; font-size: 1.1em; color: var(--ink-soft); } .prose--short { max-width: 58ch; } .prose--short > p:first-of-type::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; } .prose--wide { max-width: none; } .prose--wide > p, .prose--wide > h2, .prose--wide > h3, .prose--wide > ul, .prose--wide > ol, .prose--wide > blockquote { max-width: var(--measure); margin-inline: auto; } .plate { margin: clamp(34px, 4.6vw, 66px) auto; } .plate .figure { margin: 0; } .plate--inset { max-width: var(--measure); } .plate--wide { max-width: 900px; } .plate--full { max-width: none; } .plate img { width: auto; max-width: 100%; height: auto; margin-inline: auto; } .plate[data-shape="portrait"], .plate .figure[data-shape="portrait"] { } .plate--wide:has([data-shape="portrait"]), .plate--full:has([data-shape="portrait"]) { max-width: 600px; } .plate--inset:has([data-shape="portrait"]) { max-width: 520px; } .plate figcaption { margin-inline: auto; max-width: var(--measure); } /* The portrait narrowing above is sized for one photograph filling the plate; a diptych or the carrete's grid manage their own width. */ .plate:has(.diptych) { max-width: 900px; } .plate:has(.carrete) { max-width: none; } /* Two related photographs shown together. Each keeps the ratio it was taken in -- neither is cropped or stretched to match the other, so a portrait beside a portrait sits at its own height, not a shared one. */ .diptych { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 26px); align-items: start; } .diptych .figure { margin: 0; } /* auto width, not 100%: a fixed width fights the mobile max-height cap below (74vh) because the browser can no longer shrink both dimensions together to satisfy it -- that mismatch is what squashed every mobile plate before this file's own .plate img rule was written the same way. */ .diptych img { width: auto; max-width: 100%; height: auto; } @media (max-width: 640px) { .diptych { grid-template-columns: 1fr; gap: 22px; } } /* Carrete del fin de semana: a contact sheet, not a carousel. CSS columns rather than a cropped grid, so every photograph keeps its own ratio -- the same hard rule that governs every other image in the story. No lightbox: the site does not have one, and this does not add one. */ .carrete__head { margin: 0 0 20px; font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; } .carrete__grid { columns: 3 210px; column-gap: clamp(14px, 2vw, 22px); } .carrete__grid .figure { margin: 0 0 clamp(14px, 2vw, 22px); break-inside: avoid; } .carrete__grid img { width: auto; max-width: 100%; height: auto; } .carrete__grid figcaption { font-size: 12px; } @media (max-width: 640px) { .carrete__grid { columns: 2 130px; column-gap: 10px; } .carrete__grid .figure { margin-bottom: 10px; } } .side-column { border-left: 1px solid var(--rule); padding-left: 24px; } .margin-note { position: sticky; top: 24px; font-style: italic; font-size: 17px; line-height: 1.46; color: var(--ink-soft); } .margin-note::before { content: "Nota al margen"; display: block; margin-bottom: 9px; font: 600 9px var(--mono); letter-spacing: .13em; text-transform: uppercase; font-style: normal; color: var(--accent); } .pull { max-width: 24ch; margin: clamp(32px, 4.6vw, 58px) auto; font-family: var(--display); font-size: clamp(24px, 3.2vw, 38px); line-height: 1.14; letter-spacing: -.02em; text-align: center; color: var(--accent); } .pull::before, .pull::after { content: ""; display: block; width: 44px; height: 2px; background: var(--accent); margin: 0 auto 20px; } .pull::after { margin: 20px auto 0; } /* Inside a running text column the pull quote floats rather than interrupts. */ .story-body--texto .pull { max-width: 32ch; font-size: clamp(21px, 2.6vw, 31px); } .gallery { display: grid; gap: clamp(18px, 2.4vw, 30px); } .gallery--inline { margin: 30px 0 6px; } .movement { display: grid; gap: 20px; justify-items: start; } .video--vertical { width: min(100%, 380px); aspect-ratio: 9 / 16; background: #0d0c0a; } .figure--video video { border: 1px solid var(--rule); } .story-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; border-top: 3px solid var(--accent); border-bottom: 1px solid var(--rule); } .story-foot__share { margin: 0; } .read-toggle { display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--rule); padding: 12px 16px; cursor: pointer; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); transition: border-color .18s ease, color .18s ease; } .read-toggle:hover { border-color: var(--accent); color: var(--accent); } .read-toggle__mark { font-size: 14px; line-height: 1; } .read-toggle[aria-pressed="true"] { border-color: var(--verde); color: var(--verde); } .colofon { padding: 22px 0 2px; } .colofon p { margin: 0; max-width: var(--measure); font: italic 400 15px/1.6 var(--serif); color: var(--muted); } .colofon a { color: var(--accent); text-decoration-color: var(--rule); } .colofon a:hover { text-decoration-color: currentColor; } .story-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 28px 0 46px; border-bottom: 3px double var(--ink); } .story-nav__next { text-align: right; } .story-nav a { text-decoration: none; display: block; } .story-nav span { display: block; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .story-nav b { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.15; } .story-nav a:hover b { color: var(--accent); } /* carta al autor A colophon line, not a contact form. The letter leaves in the reader's own mail client and arrives in a personal inbox: nothing is posted, stored or published, so there is no form to style and no endpoint to depend on. */ .carta { padding: clamp(24px, 3.2vw, 38px) 0; border-bottom: 1px solid var(--rule); } .carta__line { margin: 0 0 7px; font-family: var(--display); font-size: clamp(21px, 2.4vw, 27px); } .carta__mark { color: var(--accent); margin-right: 9px; font-size: .82em; } .carta__link { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 5px; } .carta__link:hover { color: var(--accent); text-decoration-color: currentColor; } .carta__note { margin: 0; color: var(--muted); font-size: 15px; max-width: 46ch; } .carta__note a { color: inherit; text-decoration-color: var(--rule); } .carta__note a:hover { color: var(--accent); } .site-footer__carta { margin: 12px 0 !important; font-size: 14px; } .site-footer__carta .carta__link { font-family: var(--display); font-size: 17px; } .site-footer__buzon { margin-left: 12px; color: var(--muted); } .site-footer__buzon a { color: inherit; } .btn { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 12px 16px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; } .btn--primary { background: var(--ink); color: var(--paper); } .btn--small { padding: 9px 12px; } /* archive page */ .archive-year { padding: 26px 0; border-bottom: 1px solid var(--rule); } .archive-year h2 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 34px); } .archive-month { margin: 20px 0 6px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .empty { color: var(--muted); padding: 40px 0; } /* footer + consent */ .site-footer { padding: 30px 0 44px; font: 600 10px/1.8 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .site-footer p { margin: 0 0 3px; } .site-footer a { text-decoration: none; } .site-footer a:hover { color: var(--accent); text-decoration: underline; } .site-footer__id { color: var(--ink); } .consent { position: fixed; left: 18px; bottom: 18px; z-index: 40; max-width: 370px; background: #f8f3e8; border: 1px solid var(--ink); border-top: 3px solid var(--accent); padding: 17px; box-shadow: 0 14px 44px rgba(0,0,0,.13); } .consent[hidden] { display: none; } .consent p { margin: 0 0 13px; font: 400 14px/1.5 var(--serif); color: var(--ink-soft); text-transform: none; letter-spacing: 0; } .consent__actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ------------------------------------------------------------- motion */ .reveal { opacity: 1; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .reveal--armed, .reveal--armed.is-in { opacity: 1; transform: none; transition: none; } .js .card:hover .figure img, .js .strip__rail:hover .strip__item, .js .strip__rail .strip__item:hover { transform: none; } .reveal.is-in .section-head::after { transition: none; } * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ------------------------------------------------------------- responsive */ @media (max-width: 980px) { .front-lead { grid-template-columns: 1fr; gap: 30px; } .front-lead__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 26px; } .story-body { grid-template-columns: 1fr; } .side-column { border-left: 0; border-top: 1px solid var(--rule); padding: 22px 0 0; } .margin-note { position: static; } .intro, .whatsapp, .carta { grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 640px) { :root { --edge: 18px; --measure: 100%; } body { font-size: 17.5px; line-height: 1.6; } .utility { font-size: 10px; letter-spacing: .05em; padding: 11px 0 9px; } .utility ul { gap: 15px; } /* The moon stays reachable on a phone; only the place name goes, because it is what pushed the utility bar onto a second line. */ .utility__place { display: none; } .utility__note { gap: 0; } .utility ul { gap: 14px; } .masthead__brand { padding: 20px 0 12px; } .wordmark { font-size: clamp(34px, 11vw, 46px); line-height: .94; } /* The narrow composition, edge to edge. Not the desktop panorama scaled down — a redrawn one: fewer peaks, a tighter skyline, no bicycle. */ .np { margin-inline: calc(50% - 50vw); width: 100vw; margin-top: 8px; } .np__scene--wide { display: none; } .np__scene--narrow { display: block; } .np__coords { font-size: 8px; letter-spacing: .1em; } .wordmark__sub { margin-top: 10px; font-size: 15px; max-width: 30ch; } .edition { font-size: 9px; letter-spacing: .12em; padding: 9px 0; border-top-width: 2px; } .front-lead { padding: 22px 0; border-bottom-width: 1px; border-bottom-style: solid; } .card--lead .card__title { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.04; } .card--lead .card__deck { font-size: 17px; } .card--secondary .card__title, .card--tertiary .card__title { font-size: 22px; } .band { grid-template-columns: 1fr; gap: 18px; padding: 24px 0; padding-left: 16px; border-left-width: 3px; } .band .figure--band img { max-height: 56vh; } .band__title { font-size: clamp(26px, 7.6vw, 34px); max-width: none; } .band__deck { font-size: 17px; } .story-title { font-size: clamp(30px, 8.6vw, 42px); line-height: 1.02; max-width: none; } .deck { font-size: 17.5px; max-width: none; } .prose { font-size: 17.5px; } .prose > p:first-of-type::first-letter { font-size: 3.4em; padding-right: 8px; } /* Margin, not transform: a transform moves the paint but leaves the layout box behind, which pushes the document's scroll width past the viewport. Only landscape photographs go edge to edge; a vertical one stays inside the column, because a full-bleed portrait swallows the whole screen. The [data-shape] selectors below outrank this one, so the full-bleed margin has to be restated there or the box keeps the column's offset while the width jumps to 100vw — that was an 18px horizontal scroll. */ .plate { width: 100vw; margin-left: calc(50% - 50vw); } .figure--cover[data-shape="landscape"], .figure--cover[data-shape="unknown"] { width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; } .plate img { max-height: 74vh; } .figure--cover[data-shape="landscape"] figcaption, .figure--cover[data-shape="unknown"] figcaption, .plate figcaption { margin-inline: var(--edge); font-size: 13.5px; } .figure--cover figcaption { font-size: 13.5px; } .figure--cover { margin-bottom: 26px; } .plate { margin-block: 28px; } .pull { font-size: clamp(22px, 6.6vw, 28px); max-width: 20ch; } .rows a { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 12px; padding: 15px 0; } .row__date, .row__section { display: none; } .story-foot { padding: 20px 0; gap: 14px; } .story-nav { grid-template-columns: 1fr; gap: 22px; padding-bottom: 34px; } .story-nav__next { text-align: left; } .consent { left: 10px; right: 10px; bottom: 10px; max-width: none; } .site-footer { padding: 26px 0 36px; line-height: 1.9; } } @media print { body::before { display: none; } .consent, .utility, .story-nav, .carta, .read-toggle, .whatsapp { display: none; } body { background: #fff; } .plate img, .figure--cover img { max-height: none; } } /* ========================================================================== EDICIÓN NOCTURNA The same newspaper at night, not a generic dark theme: warm charcoal paper, ivory ink, parchment rules, and the story accents desaturated so they stay themselves without glowing. Photographs are never altered. The paper edition stays the default. prefers-color-scheme is honoured by the script only for readers who have never chosen, so nobody's familiar page changes on them unannounced. ========================================================================== */ [data-edicion="noche"] { --paper: #17150f; --paper-deep: #100e0a; --ink: #f2e9d8; --ink-soft: #ddd2be; --muted: #9c9081; --rule: #4a4235; --rule-soft: #322c23; --wine: #c9788a; --verde: #8bb191; --cobalto: #8fb0dd; --ocre: #d9b268; --terracota: #dd9678; --accent: var(--wine); } [data-edicion="noche"] .accent-wine { --accent: var(--wine); } [data-edicion="noche"] .accent-verde { --accent: var(--verde); } [data-edicion="noche"] .accent-cobalto { --accent: var(--cobalto); } [data-edicion="noche"] .accent-ocre { --accent: var(--ocre); } [data-edicion="noche"] .accent-terracota { --accent: var(--terracota); } /* The grain multiplies against light paper; at night it would only smother. */ [data-edicion="noche"] body::before { mix-blend-mode: overlay; opacity: .22; } [data-edicion="noche"] .consent { background: #201d15; } [data-edicion="noche"] .btn--primary { background: var(--ink); color: var(--paper); } /* The drawing is geometry, so the night edition simply repaints it from the same variables — no filter, no inversion, nothing to wash out. */ [data-edicion="noche"] .np__lights { opacity: .5; } /* The control itself: a small moon in the masthead furniture, nothing more. */ .utility__note { display: inline-flex; align-items: center; gap: 12px; } .moon { background: none; border: 0; padding: 4px 2px; cursor: pointer; line-height: 1; font-size: 15px; color: var(--muted); transition: color .2s ease, transform .3s cubic-bezier(.22,.61,.36,1); } .moon:hover { color: var(--accent); } .moon[aria-pressed="true"] { color: var(--ocre); transform: rotate(-18deg); } /* --- burning the paper --------------------------------------------------- A brief char at the edges as the night edition comes up underneath. It is an overlay and nothing else: it never hides, moves or removes content, and never touches scrolling. */ .burn { position: fixed; inset: 0; z-index: 60; pointer-events: none; animation: burn-away 1200ms ease-out forwards; background: radial-gradient(120% 100% at 50% 50%, transparent 38%, rgba(120,50,20,.5) 62%, rgba(30,12,5,.92) 78%), radial-gradient(90% 70% at 8% 12%, rgba(255,150,40,.55), transparent 48%), radial-gradient(90% 70% at 92% 88%, rgba(255,120,30,.5), transparent 48%); mix-blend-mode: multiply; } @keyframes burn-away { 0% { opacity: 0; transform: scale(1.12); } 22% { opacity: 1; } 70% { opacity: .85; } 100% { opacity: 0; transform: scale(1); } } /* --- a few drawings fall out of the paper -------------------------------- */ .folio-drop { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; } .folio-drop__item { position: absolute; top: -8vh; width: 26px; height: 26px; fill: none; stroke: var(--ink-soft); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: folio-fall 2200ms cubic-bezier(.35,.05,.6,1) var(--d, 0s) forwards; } @keyframes folio-fall { 0% { opacity: 0; transform: translateY(0) rotate(0) scale(var(--s, 1)); } 12% { opacity: .78; } 85% { opacity: .55; } 100% { opacity: 0; transform: translateY(108vh) rotate(var(--r, 40deg)) scale(var(--s, 1)); } } @media (prefers-reduced-motion: reduce) { .burn { display: none; } .folio-drop { display: none; } .moon[aria-pressed="true"] { transform: none; } } /* Reveal is armed by the script, element by element, never by a blanket rule keyed on a class the script adds — see setupReveal() for why. */ .reveal--armed { opacity: 0; transform: translateY(12px); } .reveal--armed.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); } @media (max-width: 980px) { .card--lead.card--portrait { grid-template-columns: 1fr; } .card--lead.card--portrait .figure--card img { max-height: 62vh; } } @media (max-width: 640px) { /* Photographs use the natural width of the screen and keep their ratio. */ .figure--cover[data-shape="portrait"], .figure--cover[data-shape="square"] { max-width: none; } .plate--wide:has([data-shape="portrait"]), .plate--full:has([data-shape="portrait"]), .plate--inset:has([data-shape="portrait"]) { max-width: none; } }