/* ============================================================
Pedro Pyrrait — design tokens & shared styles
Pastel literary magazine. Aged paper, faded ink, soft sage.
Light/dark, four typography pairings, four palette variations.
============================================================ */
:root {
/* ---- Type stacks (swapped by tweaks via data-type on ) ---- */
--ff-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
--ff-body: "Cormorant Garamond", "EB Garamond", Georgia, serif;
--ff-meta: "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
/* ---- Type scale ---- */
--fs-eyebrow: 0.72rem;
--fs-meta: 0.82rem;
--fs-body: 1.125rem;
--fs-lead: 1.32rem;
--fs-h3: 1.5rem;
--fs-h2: clamp(1.8rem, 2.4vw, 2.6rem);
--fs-h1: clamp(2.4rem, 4.5vw, 4.4rem);
--fs-display: clamp(3rem, 7.5vw, 7rem);
--lh-body: 1.7;
--lh-display: 1.05;
--ls-eyebrow: 0.22em;
--ls-meta: 0.06em;
/* ---- Palette: variation 0 (default) -------------------------
Warm cream paper, dusty rose, terracotta, soft sage */
--paper: #f4ede0;
--paper-2: #ecdfca;
--paper-3: #e3d4ba;
--ink: #2a2520;
--ink-2: #5a5048;
--ink-3: #8a7f72;
--ink-4: #b6a999;
--rose: #b8836f;
--rose-soft:#c9a48a;
--terra: #a66a55;
--sage: #8a9a7e;
--sage-soft:#a7b39b;
--rule: rgba(42, 37, 32, 0.16);
--rule-strong: rgba(42, 37, 32, 0.32);
--accent: var(--rose);
--accent-2: var(--sage);
--shadow-soft: 0 1px 0 rgba(42,37,32,0.04), 0 8px 28px -16px rgba(42,37,32,0.22);
/* ---- Layout ---- */
--measure: 64ch;
--measure-narrow: 44ch;
--gutter: clamp(1.2rem, 3vw, 2.4rem);
--col: min(1180px, 100% - var(--gutter) * 2);
--col-narrow: min(720px, 100% - var(--gutter) * 2);
/* ---- Motion ---- */
--ease: cubic-bezier(.22,.61,.36,1);
color-scheme: light;
}
/* ---- Palette variations ---- */
:root[data-palette="rose"] {
--paper:#f4ede0; --paper-2:#ecdfca; --paper-3:#e3d4ba;
--ink:#2a2520; --ink-2:#5a5048; --ink-3:#8a7f72; --ink-4:#b6a999;
--rose:#b8836f; --rose-soft:#c9a48a; --terra:#a66a55;
--sage:#8a9a7e; --sage-soft:#a7b39b;
--rule:rgba(42,37,32,0.16); --rule-strong:rgba(42,37,32,0.32);
}
:root[data-palette="sage"] {
--paper:#efeadb; --paper-2:#e3decb; --paper-3:#d4cfb9;
--ink:#23271f; --ink-2:#4a5043; --ink-3:#7a8174; --ink-4:#a8b0a1;
--rose:#a48070; --rose-soft:#bda092; --terra:#8c5a4a;
--sage:#6f8470; --sage-soft:#90a290;
--rule:rgba(35,39,31,0.16); --rule-strong:rgba(35,39,31,0.32);
--accent: var(--sage);
}
:root[data-palette="rust"] {
--paper:#efe4d2; --paper-2:#e4d4bb; --paper-3:#d6c3a7;
--ink:#2b201a; --ink-2:#5a4538; --ink-3:#8c7361; --ink-4:#b59f87;
--rose:#9a5b46; --rose-soft:#b97c63; --terra:#7a3f2c;
--sage:#7d8a6c; --sage-soft:#9aa489;
--rule:rgba(43,32,26,0.18); --rule-strong:rgba(43,32,26,0.36);
}
:root[data-palette="bone"] {
--paper:#f6f1e7; --paper-2:#ebe4d3; --paper-3:#ddd3bd;
--ink:#1f1d1a; --ink-2:#544c41; --ink-3:#857a6b; --ink-4:#b6ac9b;
--rose:#a47666; --rose-soft:#c19a87; --terra:#8a5040;
--sage:#7a8a78; --sage-soft:#9caa97;
--rule:rgba(31,29,26,0.14); --rule-strong:rgba(31,29,26,0.3);
}
/* ---- Dark mode mirror ---- */
:root[data-theme="dark"] {
--paper: #16140f;
--paper-2: #1f1c16;
--paper-3: #28241d;
--ink: #ece3d0;
--ink-2: #b9ad97;
--ink-3: #847a6a;
--ink-4: #4f4a40;
--rose: #d6a896;
--rose-soft:#bd8e7a;
--terra: #c98873;
--sage: #a6b59a;
--sage-soft:#8a9a82;
--rule: rgba(236,227,208,0.14);
--rule-strong: rgba(236,227,208,0.28);
--shadow-soft: 0 1px 0 rgba(0,0,0,0.4), 0 8px 28px -16px rgba(0,0,0,0.6);
color-scheme: dark;
}
:root[data-theme="dark"][data-palette="sage"] {
--paper:#13160f; --paper-2:#1c1f18; --paper-3:#252920;
--ink:#e6e2d0; --ink-2:#b1ad97; --ink-3:#7c7a6a; --ink-4:#494c40;
--rose:#c9a190; --sage:#aab99b;
}
:root[data-theme="dark"][data-palette="rust"] {
--paper:#171110; --paper-2:#21181b; --paper-3:#2c2220;
--ink:#eedcc8; --ink-2:#bca18a; --ink-3:#866a58; --ink-4:#4d3f33;
--rose:#dc9580; --terra:#cf8060;
}
:root[data-theme="dark"][data-palette="bone"] {
--paper:#15140f; --paper-2:#1f1c15; --paper-3:#28241d;
--ink:#f0e8d6; --ink-2:#bdb19a; --ink-3:#8a8071; --ink-4:#534c40;
}
/* ---- Typography pairings (data-type on ) ---- */
:root[data-type="classical"] {
--ff-display: "Cormorant Garamond", Georgia, serif;
--ff-body: "Cormorant Garamond", Georgia, serif;
--ff-meta: "Inter", system-ui, sans-serif;
}
:root[data-type="bookish"] {
--ff-display: "EB Garamond", Georgia, serif;
--ff-body: "EB Garamond", Georgia, serif;
--ff-meta: "Work Sans", system-ui, sans-serif;
}
:root[data-type="modernist"] {
--ff-display: "Fraunces", Georgia, serif;
--ff-body: "Fraunces", Georgia, serif;
--ff-meta: "IBM Plex Sans", system-ui, sans-serif;
}
:root[data-type="editorial"] {
--ff-display: "Playfair Display", Georgia, serif;
--ff-body: "Source Serif 4", "Source Serif Pro", Georgia, serif;
--ff-meta: "Inter", system-ui, sans-serif;
}
/* ============================================================
Base
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--ff-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--ink);
background-color: var(--paper);
font-feature-settings: "kern", "liga", "onum", "pnum";
font-variant-numeric: oldstyle-nums proportional-nums;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
position: relative;
}
/* Paper grain — subtle SVG turbulence overlay */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.55;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
:root[data-theme="dark"] body::before {
mix-blend-mode: screen;
opacity: 0.10;
background-image: url("data:image/svg+xml;utf8,");
}
:root[data-grain="off"] body::before { display: none; }
/* Bring content above the grain layer */
main, .site-nav, .site-footer, .tweaks { position: relative; z-index: 2; }
/* ---- Headings ---- */
h1, h2, h3, h4, h5 {
font-family: var(--ff-display);
color: var(--ink);
margin: 0 0 0.6em;
line-height: var(--lh-display);
font-weight: 500;
letter-spacing: -0.01em;
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 500; }
h2 { font-size: var(--fs-h2); font-weight: 500; }
h3 { font-size: var(--fs-h3); font-weight: 500; }
p { margin: 0 0 1em; text-wrap: pretty; }
em, i, cite { font-style: italic; color: var(--ink-2); }
strong { font-weight: 600; }
a {
color: var(--ink);
text-decoration: none;
text-decoration-color: var(--rule-strong);
text-underline-offset: 0.18em;
transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }
hr {
border: none;
height: 1px;
background: var(--rule);
margin: 3rem 0;
}
::selection { background: var(--rose-soft); color: var(--ink); }
:root[data-theme="dark"] ::selection { background: var(--rose); color: var(--paper); }
img { max-width: 100%; height: auto; display: block; }
/* ============================================================
Repeating bits
============================================================ */
.eyebrow {
font-family: var(--ff-meta);
font-size: var(--fs-eyebrow);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
font-weight: 500;
color: var(--ink-3);
}
.meta {
font-family: var(--ff-meta);
font-size: var(--fs-meta);
letter-spacing: var(--ls-meta);
color: var(--ink-3);
}
.small-caps {
font-variant-caps: all-small-caps;
letter-spacing: 0.1em;
}
.rule {
display: block;
height: 1px;
background: var(--rule);
margin: 1.5rem 0;
}
.rule--strong { background: var(--rule-strong); }
.container { width: var(--col); margin-inline: auto; }
.container-narrow { width: var(--col-narrow); margin-inline: auto; }
.lead {
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--ink-2);
font-style: italic;
}
.dropcap::first-letter {
font-family: var(--ff-display);
font-size: 4.3em;
line-height: 0.9;
float: left;
padding-right: 0.12em;
padding-top: 0.08em;
color: var(--rose);
font-weight: 500;
}
.ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
color: var(--ink-3);
margin: 3rem auto;
width: max-content;
}
.ornament::before, .ornament::after {
content: "";
height: 1px;
width: 4.5rem;
background: var(--rule-strong);
}
.ornament svg { width: 14px; height: 14px; opacity: 0.7; }
/* Pull quote */
.pull {
font-family: var(--ff-display);
font-style: italic;
font-size: clamp(1.6rem, 2.4vw, 2.4rem);
line-height: 1.25;
color: var(--ink);
padding: 1.6rem 0 1.6rem 1.8rem;
border-left: 1px solid var(--rose);
margin: 2.4rem 0;
max-width: 36ch;
}
/* ============================================================
Construction banner (shown when data-construction is set on )
============================================================ */
.construction-banner {
width: 100%;
background: var(--paper-3);
border-bottom: 1px solid var(--rule);
padding: 0.55rem var(--gutter);
text-align: center;
font-family: var(--ff-meta);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--ink-2);
font-style: italic;
}
[data-theme="dark"] .construction-banner {
background: rgba(255,255,255,0.04);
border-bottom-color: var(--rule);
}
/* ============================================================
Site nav (injected by layout.js)
============================================================ */
.site-nav {
border-bottom: 1px solid var(--rule);
background: color-mix(in oklab, var(--paper) 92%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.site-nav__inner {
width: var(--col);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1.5rem;
padding: 1.4rem 0;
}
.site-nav__brand {
font-family: var(--ff-display);
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--ink);
}
.site-nav__brand small {
display: block;
font-family: var(--ff-meta);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--ink-3);
margin-top: 2px;
}
.site-nav__links {
display: flex;
gap: clamp(0.9rem, 2.4vw, 2.2rem);
align-items: center;
list-style: none;
margin: 0;
padding: 0;
justify-content: center;
}
.site-nav__links a {
font-family: var(--ff-meta);
font-size: 0.85rem;
letter-spacing: 0.04em;
color: var(--ink-2);
text-transform: lowercase;
}
.site-nav__links a[aria-current="page"] {
color: var(--ink);
position: relative;
}
.site-nav__links a[aria-current="page"]::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -8px;
height: 1px;
background: var(--accent);
}
.site-nav__actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
}
.icon-btn {
width: 36px; height: 36px;
border-radius: 999px;
border: 1px solid var(--rule);
background: transparent;
color: var(--ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .25s var(--ease);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { width: 16px; height: 16px; }
/* Mobile nav */
@media (max-width: 760px) {
.site-nav__inner {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
}
.site-nav__links {
grid-column: 1 / -1;
flex-wrap: wrap;
justify-content: flex-start;
padding-top: 0.6rem;
border-top: 1px solid var(--rule);
margin-top: 0.6rem;
}
.site-nav__brand { grid-column: 1; }
.site-nav__actions { grid-column: 2; }
}
/* ============================================================
Site footer
============================================================ */
.site-footer {
margin-top: 8rem;
padding: 3rem 0 2.5rem;
border-top: 1px solid var(--rule);
}
.site-footer__inner {
width: var(--col);
margin-inline: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: end;
gap: 2rem;
}
.site-footer__name {
font-family: var(--ff-display);
font-size: 1.4rem;
}
.site-footer__name small {
display: block;
font-family: var(--ff-meta);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 4px;
}
.site-footer__cols {
display: flex;
gap: clamp(1.5rem, 4vw, 3.5rem);
}
.site-footer__cols a {
display: block;
font-family: var(--ff-meta);
font-size: 0.82rem;
color: var(--ink-2);
padding: 0.18rem 0;
}
.site-footer__sig {
font-family: var(--ff-meta);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
}
/* ============================================================
Home page
============================================================ */
/* — Home, layout: "Discreto" (default) — */
.home-discreto {
min-height: calc(100vh - 200px);
display: grid;
place-items: center;
padding: 6rem 0 4rem;
}
.home-discreto__inner {
width: var(--col-narrow);
margin-inline: auto;
text-align: center;
}
.home-discreto__portrait,
.home-quiet__portrait /* alias for sobre.html aside */ {
width: 220px;
height: 280px;
margin: 0 auto 2.4rem;
background: linear-gradient(140deg, var(--paper-2), var(--paper-3));
border: 1px solid var(--rule);
position: relative;
overflow: hidden;
}
.home-discreto__portrait::after,
.home-quiet__portrait::after {
content: "retrato";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--ff-meta);
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
}
.home-discreto h1 {
font-size: clamp(2.6rem, 6vw, 5rem);
margin-bottom: 0.4rem;
font-style: italic;
}
.home-discreto .dates {
font-family: var(--ff-meta);
font-size: 0.85rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 2.6rem;
}
.home-discreto .tribute {
font-family: var(--ff-body);
font-style: italic;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--ink-2);
text-wrap: balance;
}
/* — Home, layout: "Íntimo" — name above a small cameo portrait, signed by the family — */
.home-intimo {
min-height: calc(100vh - 200px);
display: grid;
place-items: center;
padding: 5rem 0 4rem;
}
.home-intimo__inner {
width: var(--col-narrow);
margin-inline: auto;
text-align: center;
}
.home-intimo__pre {
font-family: var(--ff-meta);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 1.6rem;
}
.home-intimo h1 {
font-size: clamp(2.4rem, 5.4vw, 4.6rem);
line-height: 1.05;
margin-bottom: 1.8rem;
}
.home-intimo h1 em {
font-style: italic;
color: var(--accent);
}
.home-intimo__portrait {
width: 150px;
height: 150px;
margin: 0 auto 1.4rem;
border-radius: 50%;
background: linear-gradient(140deg, var(--paper-2), var(--paper-3));
border: 1px solid var(--rule);
position: relative;
overflow: hidden;
}
.home-intimo__portrait::after {
content: "retrato";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--ff-meta);
font-size: 0.6rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
}
.home-intimo .dates {
font-family: var(--ff-meta);
font-size: 0.85rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 2.2rem;
}
.home-intimo .tribute {
font-family: var(--ff-body);
font-style: italic;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--ink-2);
text-wrap: balance;
margin-bottom: 1.4rem;
}
.home-intimo__sig {
font-family: var(--ff-meta);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3);
}
/* — Home, layout: "Recolhido" — portrait beside the name, page-like — */
.home-recolhido {
min-height: calc(100vh - 200px);
display: grid;
place-items: center;
padding: 5rem 0 4rem;
}
.home-recolhido__inner {
width: min(820px, 100% - var(--gutter) * 2);
margin-inline: auto;
display: grid;
grid-template-columns: 180px 1fr;
gap: clamp(1.8rem, 4vw, 3.4rem);
align-items: start;
}
.home-recolhido__portrait {
width: 180px;
height: 230px;
background: linear-gradient(140deg, var(--paper-2), var(--paper-3));
border: 1px solid var(--rule);
position: relative;
overflow: hidden;
}
.home-recolhido__portrait::after {
content: "retrato";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--ff-meta);
font-size: 0.6rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
}
.home-recolhido__text .eyebrow {
margin-bottom: 0.8rem;
}
.home-recolhido h1 {
font-size: clamp(2.2rem, 4.6vw, 3.8rem);
line-height: 1.08;
margin-bottom: 0.6rem;
}
.home-recolhido h1 em {
font-style: italic;
color: var(--accent);
}
.home-recolhido .dates {
font-family: var(--ff-meta);
font-size: 0.8rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 1.6rem;
}
.home-recolhido .tribute {
font-family: var(--ff-body);
font-style: italic;
font-size: 1.18rem;
line-height: 1.6;
color: var(--ink-2);
text-wrap: pretty;
margin-bottom: 1.6rem;
}
.home-recolhido__rule {
width: 56px;
height: 1px;
background: var(--rule-strong);
margin-bottom: 1rem;
}
.home-recolhido__sig {
font-family: var(--ff-meta);
font-size: 0.74rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-3);
}
@media (max-width: 640px) {
.home-recolhido__inner {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.home-recolhido__rule {
margin-inline: auto;
}
}
/* — Home, layout: "editorial" — */
.home-editorial {
padding: 5rem 0 4rem;
}
.home-editorial__hero {
width: var(--col);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: end;
margin-bottom: 5rem;
}
.home-editorial__portrait {
aspect-ratio: 4/5;
background: linear-gradient(140deg, var(--paper-2), var(--paper-3));
border: 1px solid var(--rule);
position: relative;
overflow: hidden;
}
.home-editorial__portrait::after {
content: "retrato";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--ff-meta);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
}
.home-editorial h1 {
font-size: clamp(3rem, 7vw, 6rem);
font-style: italic;
margin-bottom: 1rem;
}
.home-editorial .dates {
font-family: var(--ff-meta);
font-size: 0.8rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 2rem;
}
.home-editorial .tribute {
font-size: var(--fs-lead);
font-style: italic;
color: var(--ink-2);
max-width: 38ch;
line-height: 1.55;
}
.home-editorial__latest {
width: var(--col);
margin-inline: auto;
}
.home-editorial__latest-header {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 1rem;
border-bottom: 1px solid var(--rule-strong);
margin-bottom: 1.5rem;
}
@media (max-width: 760px) {
.home-editorial__hero { grid-template-columns: 1fr; }
.home-editorial__portrait { max-width: 340px; }
}
/* — Home, layout: "cover" (asymmetric magazine cover) — */
.home-cover {
padding: 5rem 0 4rem;
min-height: calc(100vh - 200px);
}
.home-cover__grid {
width: var(--col);
margin-inline: auto;
display: grid;
grid-template-columns: 1.4fr 1fr;
grid-template-rows: auto auto;
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: start;
}
.home-cover__head {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid var(--rule-strong);
padding-bottom: 1rem;
margin-bottom: 2rem;
}
.home-cover__title {
grid-column: 1;
align-self: center;
}
.home-cover__title h1 {
font-size: clamp(3.2rem, 9vw, 8rem);
font-style: italic;
line-height: 0.95;
margin-bottom: 0;
letter-spacing: -0.02em;
}
.home-cover__title h1 .amp {
color: var(--rose);
font-style: italic;
}
.home-cover__title .dates {
font-family: var(--ff-meta);
font-size: 0.8rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 1.5rem;
display: inline-block;
border-top: 1px solid var(--rule);
padding-top: 0.6rem;
}
.home-cover__portrait {
grid-column: 2;
aspect-ratio: 3/4;
background: linear-gradient(140deg, var(--paper-2), var(--paper-3));
border: 1px solid var(--rule);
position: relative;
overflow: hidden;
transform: translateY(2rem);
}
.home-cover__portrait::after {
content: "retrato";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--ff-meta);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
}
.home-cover__quote {
grid-column: 1 / -1;
margin-top: 3rem;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(1.5rem, 4vw, 3.5rem);
border-top: 1px solid var(--rule);
padding-top: 2.5rem;
}
.home-cover__quote .pull {
border-left: none;
padding-left: 0;
margin: 0;
font-size: clamp(1.4rem, 2.2vw, 2rem);
max-width: 28ch;
}
.home-cover__tribute {
font-size: var(--fs-body);
color: var(--ink-2);
font-style: italic;
max-width: 50ch;
}
@media (max-width: 760px) {
.home-cover__grid { grid-template-columns: 1fr; }
.home-cover__portrait { grid-column: 1; transform: none; max-width: 320px; }
.home-cover__quote { grid-template-columns: 1fr; }
}
/* ============================================================
Home — additional layouts
4 catálogo · 5 necrológio · 6 pauta · 7 caderno · 8 mancha · 9 folha
============================================================ */
/* ---- 4. Catálogo (library catalogue card) ---- */
.home-catalogo {
min-height: calc(100vh - 200px);
padding: 6rem 0 5rem;
place-items: center;
}
.cat-card {
width: min(680px, 100% - 2 * var(--gutter));
background: var(--paper-2);
padding: 2.6rem 3rem 2.4rem;
border: 1px solid var(--rule-strong);
box-shadow: 0 1px 0 var(--rule), 0 24px 60px -32px rgba(42,37,32,0.35);
position: relative;
}
:root[data-theme="dark"] .cat-card {
box-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 24px 60px -28px rgba(0,0,0,0.7);
}
.cat-card__head {
display: flex;
justify-content: space-between;
font-family: var(--ff-meta);
font-size: 0.66rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-3);
padding-bottom: 1.4rem;
border-bottom: 1px solid var(--rule);
}
.cat-card__name {
margin: 2rem 0 2.4rem;
font-family: var(--ff-display);
display: flex;
align-items: baseline;
gap: 0.6rem;
flex-wrap: wrap;
}
.cat-card__surname {
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
letter-spacing: 0.04em;
font-variant-caps: all-small-caps;
}
.cat-card__given {
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
font-style: italic;
color: var(--rose);
}
.cat-card__meta { margin: 0; }
.cat-card__meta > div {
display: grid;
grid-template-columns: 2.4rem 1fr;
gap: 0.6rem;
padding: 0.85rem 0;
border-bottom: 1px dashed var(--rule);
align-items: baseline;
line-height: 1.5;
}
.cat-card__meta > div:last-child { border-bottom: none; }
.cat-card__meta dt {
font-family: var(--ff-meta);
font-variant-numeric: oldstyle-nums;
font-size: 0.72rem;
letter-spacing: 0.12em;
color: var(--ink-3);
text-transform: uppercase;
}
.cat-card__meta dd {
margin: 0;
font-size: 1rem;
color: var(--ink);
}
.cat-card__meta dd em { color: var(--ink-2); }
.cat-card__tribute {
margin: 2.2rem 0 0;
padding-top: 1.6rem;
border-top: 1px solid var(--rule);
font-family: var(--ff-display);
font-style: italic;
color: var(--ink-2);
font-size: 1.18rem;
line-height: 1.55;
text-wrap: balance;
}
/* ---- 5. Necrológio (formal obituary card) ---- */
.home-necrologio {
min-height: calc(100vh - 200px);
padding: 4rem 0 5rem;
place-items: center;
}
.necro {
width: min(560px, 100% - 2 * var(--gutter));
}
.necro__border {
border: 1px solid var(--ink-2);
padding: 3.4rem 2.6rem 3rem;
text-align: center;
background: var(--paper);
position: relative;
}
.necro__border::before {
content: "";
position: absolute;
inset: 8px;
border: 1px solid var(--rule-strong);
pointer-events: none;
}
.necro__mark {
width: 26px; height: 26px;
margin: 0 auto 1.6rem;
color: var(--ink-2);
display: block;
}
.necro__pre {
font-family: var(--ff-meta);
font-size: 0.7rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 1.6rem;
}
.necro__name {
font-family: var(--ff-display);
font-size: clamp(2.4rem, 5vw, 3.6rem);
letter-spacing: 0.06em;
line-height: 1.05;
margin: 0 0 1.4rem;
font-weight: 500;
font-variant-caps: all-small-caps;
}
.necro__dates {
font-family: var(--ff-meta);
font-size: 0.8rem;
letter-spacing: 0.22em;
color: var(--ink-2);
text-transform: uppercase;
margin-bottom: 1.6rem;
}
.necro__rule {
width: 56px; height: 1px;
background: var(--rule-strong);
margin: 0 auto 1.8rem;
}
.necro__body {
font-family: var(--ff-display);
font-style: italic;
color: var(--ink-2);
line-height: 1.65;
font-size: 1.08rem;
margin: 0 auto 2.2rem;
max-width: 38ch;
}
.necro__sig {
font-family: var(--ff-meta);
font-size: 0.7rem;
letter-spacing: 0.26em;
color: var(--ink-3);
text-transform: uppercase;
margin: 0;
}
/* ---- 6. Pauta (musical staff) ---- */
.home-pauta { padding: 5rem 0 4rem; }
.pauta {
width: var(--col);
margin-inline: auto;
position: relative;
min-height: 60vh;
}
.pauta__staff {
position: absolute;
inset: 5rem 0 auto 0;
height: 9.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
z-index: 0;
}
.pauta__staff span {
display: block;
height: 1px;
background: var(--rule-strong);
}
.pauta__clef {
position: absolute;
top: 3.4rem;
left: -0.3rem;
width: 50px;
height: 130px;
color: var(--rose);
z-index: 1;
}
.pauta__bar {
position: absolute;
right: 0;
top: 5rem;
width: 1px;
height: 9.5rem;
background: var(--ink-3);
z-index: 1;
}
.pauta__bar::before {
content: "";
position: absolute;
right: -7px;
top: 0; bottom: 0;
width: 4px;
background: var(--ink);
}
.pauta__content {
position: relative;
z-index: 1;
padding: 1rem 0 0 80px;
}
.pauta__tempo {
font-family: var(--ff-meta);
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 0.4rem;
}
.pauta__name {
font-family: var(--ff-display);
font-size: clamp(3rem, 8vw, 6.5rem);
line-height: 1;
margin: 0;
font-weight: 500;
}
.pauta__name em {
color: var(--rose);
font-style: italic;
display: inline-block;
}
.pauta__dates {
font-family: var(--ff-meta);
font-size: 0.82rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
margin: 1.2rem 0 0;
}
.pauta__tribute {
font-family: var(--ff-display);
font-style: italic;
font-size: 1.35rem;
max-width: 54ch;
margin: 3.5rem 0 0 80px;
color: var(--ink-2);
line-height: 1.55;
position: relative;
z-index: 1;
}
.pauta__movements {
margin: 2.4rem 0 0 80px;
display: flex;
gap: 2.4rem;
flex-wrap: wrap;
font-family: var(--ff-meta);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3);
border-top: 1px solid var(--rule);
padding-top: 1.4rem;
}
.pauta__movements span:first-child { color: var(--rose); }
@media (max-width: 760px) {
.pauta__clef { width: 38px; height: 100px; top: 3rem; }
.pauta__content { padding-left: 50px; }
.pauta__tribute, .pauta__movements { margin-left: 50px; }
}
/* ---- 7. Caderno (open notebook spread) ---- */
.home-caderno { padding: 3rem 0 5rem; }
.caderno {
width: var(--col);
margin-inline: auto;
}
.caderno__spread {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--paper);
border: 1px solid var(--rule);
box-shadow: 0 1px 0 var(--rule), 0 40px 80px -40px rgba(42,37,32,0.32);
min-height: 72vh;
position: relative;
}
:root[data-theme="dark"] .caderno__spread {
box-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 40px 80px -40px rgba(0,0,0,0.7);
}
.caderno__spread::before {
content: "";
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 36px;
transform: translateX(-50%);
background:
linear-gradient(to right,
transparent 0%,
rgba(42,37,32,0.04) 30%,
rgba(42,37,32,0.14) 50%,
rgba(42,37,32,0.04) 70%,
transparent 100%);
pointer-events: none;
z-index: 1;
}
:root[data-theme="dark"] .caderno__spread::before {
background: linear-gradient(to right,
transparent 0%,
rgba(0,0,0,0.3) 30%,
rgba(0,0,0,0.55) 50%,
rgba(0,0,0,0.3) 70%,
transparent 100%);
}
.caderno__page {
padding: 3rem clamp(2rem, 4vw, 4rem) 4rem;
position: relative;
display: flex;
flex-direction: column;
}
.caderno__page--left { border-right: 1px solid var(--rule); }
.caderno__portrait {
aspect-ratio: 4/5;
background: linear-gradient(140deg, var(--paper-2), var(--paper-3));
border: 1px solid var(--rule);
position: relative;
margin-bottom: 1.4rem;
}
.caderno__portrait::after {
content: "retrato";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--ff-meta);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
}
.caderno__caption {
font-family: var(--ff-meta);
font-size: 0.78rem;
color: var(--ink-3);
font-style: italic;
line-height: 1.5;
margin: 0;
}
.caderno__page--right .eyebrow { margin-bottom: 1rem; }
.caderno__page--right h1 {
font-family: var(--ff-display);
font-size: clamp(2.4rem, 4.5vw, 3.8rem);
font-style: italic;
margin: 0 0 0.6rem;
line-height: 1.05;
}
.caderno__dates {
font-family: var(--ff-meta);
font-size: 0.78rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 2rem;
}
.caderno__lead {
font-size: 1.12rem;
line-height: 1.7;
color: var(--ink-2);
margin-bottom: 1rem;
}
.caderno__pageno {
position: absolute;
bottom: 1.4rem;
font-family: var(--ff-meta);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
}
.caderno__page--left .caderno__pageno { left: clamp(2rem, 4vw, 4rem); }
.caderno__page--right .caderno__pageno { right: clamp(2rem, 4vw, 4rem); }
@media (max-width: 760px) {
.caderno__spread { grid-template-columns: 1fr; }
.caderno__spread::before { display: none; }
.caderno__page--left { border-right: none; border-bottom: 1px solid var(--rule); }
}
/* ---- 8. Mancha (massive typography) ---- */
.home-mancha { padding: 2rem 0 4rem; }
.mancha {
width: var(--col);
margin-inline: auto;
min-height: calc(100vh - 200px);
display: flex;
flex-direction: column;
}
.mancha__top {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid var(--rule-strong);
padding-bottom: 1rem;
margin-bottom: 1.5rem;
font-family: var(--ff-meta);
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-3);
}
.mancha__name {
font-family: var(--ff-display);
font-size: clamp(5rem, 20vw, 18rem);
line-height: 0.86;
letter-spacing: -0.04em;
margin: 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
font-weight: 500;
}
.mancha__name span { display: block; color: var(--ink); }
.mancha__name em {
display: block;
font-style: italic;
color: var(--rose);
padding-left: 0.35em;
}
.mancha__bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: end;
border-top: 1px solid var(--rule);
padding-top: 1.4rem;
margin-top: 2rem;
}
.mancha__caption {
font-family: var(--ff-meta);
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-3);
}
.mancha__tribute {
max-width: 44ch;
margin: 0 0 0 auto;
font-family: var(--ff-display);
font-style: italic;
color: var(--ink-2);
font-size: 1.1rem;
line-height: 1.55;
}
@media (max-width: 760px) {
.mancha__bottom { grid-template-columns: 1fr; }
.mancha__tribute { margin-left: 0; }
}
/* ---- 9. Folha (contact sheet of moments) ---- */
.home-folha { padding: 4rem 0; }
.folha__head {
width: var(--col);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: end;
border-bottom: 1px solid var(--rule-strong);
padding-bottom: 2.4rem;
margin-bottom: 2.4rem;
}
.folha__head .eyebrow { margin-bottom: 0.6rem; }
.folha__head h1 {
font-family: var(--ff-display);
font-size: clamp(2.4rem, 5.4vw, 4.2rem);
font-style: italic;
margin: 0 0 0.4rem;
line-height: 1;
}
.folha__head h1 em { color: var(--rose); }
.folha__head .dates {
font-family: var(--ff-meta);
font-size: 0.8rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
}
.folha__lead {
font-family: var(--ff-display);
font-style: italic;
color: var(--ink-2);
font-size: 1.1rem;
line-height: 1.55;
max-width: 44ch;
margin: 0;
}
.folha__grid {
width: var(--col);
margin-inline: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.1rem;
}
.folha__tile {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.3rem;
border: 1px solid var(--rule);
background: var(--paper-2);
min-height: 230px;
text-decoration: none;
font-family: var(--ff-meta);
font-size: 0.78rem;
color: var(--ink-2);
transition: transform .3s var(--ease), border-color .3s var(--ease);
position: relative;
overflow: hidden;
cursor: pointer;
}
.folha__tile:hover {
transform: translateY(-3px);
border-color: var(--rule-strong);
color: var(--ink-2);
}
.folha__tile .meta {
font-size: 0.66rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3);
}
.folha__title {
font-family: var(--ff-display);
font-style: italic;
font-size: 1.25rem;
color: var(--ink);
line-height: 1.25;
margin-top: 0.6rem;
}
.folha__tile--photo {
background: linear-gradient(140deg, var(--paper-2), var(--paper-3));
justify-content: flex-end;
}
.folha__tile--photo .folha__caption {
font-size: 0.66rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3);
position: relative;
}
.folha__tile--quote {
background: var(--paper);
justify-content: center;
align-items: flex-start;
}
.folha__tile--quote q {
font-family: var(--ff-display);
font-style: italic;
font-size: 1.3rem;
color: var(--ink);
line-height: 1.35;
quotes: "«" "»";
}
.folha__tile--quote q::before { content: open-quote; color: var(--rose); margin-right: 0.05em; }
.folha__tile--quote q::after { content: close-quote; color: var(--rose); margin-left: 0.05em; }
.folha__tile--audio { background: var(--paper-3); }
.folha__tile--audio .folha__duration {
display: inline-flex; align-items: center; gap: 0.4rem;
margin-top: auto;
font-size: 0.7rem;
letter-spacing: 0.18em;
color: var(--ink-3);
}
.folha__tile--audio .folha__duration::before {
content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--rose);
}
.folha__tile--year {
display: grid;
place-items: center;
font-family: var(--ff-display);
font-style: italic;
font-size: 3rem;
color: var(--rose);
background: var(--paper);
}
.folha__caption-bottom {
font-family: var(--ff-meta);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-3);
text-align: center;
margin: 2.4rem auto 0;
max-width: 60ch;
font-style: italic;
}
@media (max-width: 900px) {
.folha__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.folha__head { grid-template-columns: 1fr; align-items: start; }
.folha__grid { grid-template-columns: repeat(2, 1fr); }
.folha__tile { min-height: 170px; }
}
/* Visibility: only show the selected home layout */
.home-discreto, .home-intimo, .home-recolhido { display: none; }
:root[data-home="discreto"] .home-discreto { display: grid; }
:root[data-home="intimo"] .home-intimo { display: grid; }
:root[data-home="recolhido"] .home-recolhido { display: grid; }
/* Latest articles list (used on home/editorial and on archive) */
.article-list {
list-style: none;
margin: 0;
padding: 0;
}
.article-list li {
border-bottom: 1px solid var(--rule);
}
.article-list li:first-child { border-top: 1px solid var(--rule); }
.article-list a {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1.4rem;
align-items: baseline;
padding: 1.3rem 0;
transition: padding .25s var(--ease), color .25s var(--ease);
}
.article-list a:hover {
padding-left: 0.5rem;
color: var(--ink);
}
.article-list .num {
font-family: var(--ff-meta);
font-variant-numeric: tabular-nums;
font-size: 0.7rem;
letter-spacing: 0.12em;
color: var(--ink-3);
text-transform: uppercase;
min-width: 2.2rem;
}
.article-list .title {
font-family: var(--ff-display);
font-size: 1.32rem;
font-style: italic;
line-height: 1.25;
color: var(--ink);
}
.article-list .title small {
display: block;
font-family: var(--ff-meta);
font-style: normal;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 4px;
}
.article-list .date {
font-family: var(--ff-meta);
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@media (max-width: 640px) {
.article-list a { grid-template-columns: auto 1fr; gap: 1rem; }
.article-list .date { grid-column: 2; }
}
/* ============================================================
Biografia
============================================================ */
.bio-head {
width: var(--col);
margin-inline: auto;
padding: 5rem 0 3rem;
text-align: center;
border-bottom: 1px solid var(--rule);
}
.bio-head h1 {
font-style: italic;
margin-bottom: 0.6rem;
}
.bio-head .dates {
font-family: var(--ff-meta);
font-size: 0.85rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
}
.prose {
width: var(--col-narrow);
margin: 4rem auto;
font-size: var(--fs-body);
}
.prose p { max-width: var(--measure); }
.prose h2 {
margin-top: 3rem;
font-size: 1.8rem;
font-style: italic;
color: var(--rose);
}
.prose h2::before {
content: "§ ";
color: var(--ink-4);
font-style: normal;
}
/* Timeline */
.timeline {
width: var(--col-narrow);
margin: 4rem auto;
border-top: 1px solid var(--rule-strong);
}
.timeline__item {
display: grid;
grid-template-columns: 5rem 1fr;
gap: 1.5rem;
padding: 1.4rem 0;
border-bottom: 1px solid var(--rule);
align-items: baseline;
}
.timeline__year {
font-family: var(--ff-meta);
font-size: 0.8rem;
letter-spacing: 0.18em;
color: var(--rose);
font-variant-numeric: tabular-nums lining-nums;
}
.timeline__event {
font-family: var(--ff-body);
font-size: 1.05rem;
color: var(--ink);
}
.timeline__event em { color: var(--ink-2); }
/* ============================================================
Artigos — archive & single
============================================================ */
.archive-head {
width: var(--col);
margin-inline: auto;
padding: 5rem 0 2rem;
display: flex;
align-items: end;
justify-content: space-between;
border-bottom: 1px solid var(--rule-strong);
gap: 2rem;
flex-wrap: wrap;
}
.archive-head h1 { font-style: italic; margin-bottom: 0; }
.archive-head .meta { max-width: 30ch; text-align: right; }
.archive-filters {
width: var(--col);
margin: 2rem auto 0;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.archive-filters button {
font-family: var(--ff-meta);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
background: transparent;
border: 1px solid var(--rule);
color: var(--ink-2);
padding: 0.45rem 0.9rem;
border-radius: 999px;
cursor: pointer;
transition: all .25s var(--ease);
}
.archive-filters button:hover { color: var(--accent); border-color: var(--accent); }
.archive-filters button[aria-pressed="true"] {
color: var(--paper);
background: var(--ink);
border-color: var(--ink);
}
:root[data-theme="dark"] .archive-filters button[aria-pressed="true"] {
background: var(--ink);
color: var(--paper);
}
.archive-list {
width: var(--col);
margin: 2rem auto 4rem;
}
/* Article (single) */
.article {
width: var(--col-narrow);
margin: 0 auto 5rem;
padding-top: 4rem;
}
.article__kicker {
font-family: var(--ff-meta);
font-size: 0.78rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--rose);
margin-bottom: 1.5rem;
display: flex;
gap: 0.8rem;
align-items: center;
}
.article__kicker .dot {
width: 4px; height: 4px; border-radius: 999px; background: var(--ink-4);
}
.article h1 {
font-size: clamp(2rem, 4.5vw, 3.6rem);
font-style: italic;
margin-bottom: 1.2rem;
text-wrap: balance;
}
.article__dek {
font-size: var(--fs-lead);
color: var(--ink-2);
font-style: italic;
margin-bottom: 2rem;
line-height: 1.45;
max-width: 44ch;
}
.article__byline {
display: flex;
gap: 1.4rem;
padding: 1rem 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
font-family: var(--ff-meta);
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--ink-3);
margin-bottom: 2.5rem;
text-transform: uppercase;
}
.article__byline strong {
color: var(--ink-2);
font-weight: 500;
}
.article__body p { font-size: var(--fs-body); }
.article__body p + p { text-indent: 1.6em; margin-top: 0; }
.article__body p.no-indent + p { text-indent: 0; }
.article__body p:first-of-type { text-indent: 0; }
.article__body h2 {
font-size: 1.5rem;
font-style: italic;
color: var(--rose);
margin-top: 3rem;
margin-bottom: 0.6rem;
}
.article__nav {
width: var(--col-narrow);
margin: 4rem auto 5rem;
padding-top: 2rem;
border-top: 1px solid var(--rule);
display: flex;
justify-content: space-between;
gap: 1.5rem;
font-family: var(--ff-meta);
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.article__nav a { color: var(--ink-2); }
.article__nav a:hover { color: var(--accent); }
/* ============================================================
Article template B — Crítica de concerto (with sidebar)
============================================================ */
.review {
width: var(--col);
margin: 0 auto 5rem;
padding-top: 4rem;
}
.review__head {
border-bottom: 1px solid var(--rule-strong);
padding-bottom: 2.5rem;
margin-bottom: 3rem;
}
.review__head .article__kicker { margin-bottom: 1.5rem; }
.review__head h1 {
font-family: var(--ff-display);
font-size: clamp(2.2rem, 4.8vw, 3.8rem);
font-style: italic;
line-height: 1.05;
margin: 0 0 1.2rem;
max-width: 22ch;
text-wrap: balance;
}
.review__head .article__dek {
max-width: 56ch;
margin: 0;
}
.review__layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.review__body {
max-width: var(--measure);
}
.review__body p { font-size: var(--fs-body); }
.review__body p + p { text-indent: 1.6em; margin-top: 0; }
.review__body p.no-indent + p { text-indent: 0; }
.review__body p:first-of-type { text-indent: 0; }
.review__body h2 {
font-size: 1.45rem;
font-style: italic;
color: var(--rose);
margin: 3rem 0 0.6rem;
}
.review__photo {
aspect-ratio: 4/3;
background: linear-gradient(140deg, var(--paper-2), var(--paper-3));
border: 1px solid var(--rule);
margin: 2.4rem 0 0.6rem;
position: relative;
}
.review__photo::after {
content: "fotografia";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--ff-meta);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
}
.review__photo-caption {
font-family: var(--ff-meta);
font-size: 0.74rem;
letter-spacing: 0.04em;
color: var(--ink-3);
font-style: italic;
margin: 0 0 2.4rem;
line-height: 1.5;
}
/* Sidebar (ficha técnica) */
.review__aside {
position: sticky;
top: 6rem;
padding: 1.6rem;
background: var(--paper-2);
border: 1px solid var(--rule);
}
.review__aside-title {
font-family: var(--ff-meta);
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 1.2rem;
padding-bottom: 0.7rem;
border-bottom: 1px solid var(--rule);
}
.ficha { margin: 0; }
.ficha > div {
padding: 0.7rem 0;
border-bottom: 1px dashed var(--rule);
}
.ficha > div:last-child { border-bottom: none; }
.ficha dt {
font-family: var(--ff-meta);
font-size: 0.66rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 0.25rem;
}
.ficha dd {
margin: 0;
font-size: 0.95rem;
color: var(--ink);
line-height: 1.5;
}
.ficha dd em { color: var(--ink-2); font-style: italic; }
.review__rating {
display: flex;
gap: 0.35rem;
margin-top: 0.4rem;
color: var(--rose);
font-size: 0.95rem;
letter-spacing: 0.1em;
}
.review__rating .off { color: var(--ink-4); }
@media (max-width: 900px) {
.review__layout { grid-template-columns: 1fr; }
.review__aside { position: static; margin-top: 2rem; }
}
/* ============================================================
Article template C — Cadernos / Fragmentos
============================================================ */
.cadernos {
width: var(--col-narrow);
margin: 0 auto 5rem;
padding-top: 4rem;
}
.cadernos__head { margin-bottom: 3.5rem; text-align: center; }
.cadernos__head .article__kicker { justify-content: center; }
.cadernos__head h1 {
font-family: var(--ff-display);
font-size: clamp(2rem, 4.2vw, 3.2rem);
font-style: italic;
margin: 0 0 0.8rem;
}
.cadernos__head .article__dek {
max-width: 44ch;
margin: 0 auto;
text-align: center;
}
.cadernos__byline {
display: flex;
justify-content: center;
gap: 1.4rem;
font-family: var(--ff-meta);
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 1.4rem;
padding-top: 1.2rem;
border-top: 1px solid var(--rule);
}
.fragments {
list-style: none;
margin: 0;
padding: 0;
counter-reset: frag;
}
.fragment {
display: grid;
grid-template-columns: 4.5rem 1fr;
gap: 1.4rem;
padding: 2.4rem 0;
border-bottom: 1px solid var(--rule);
align-items: baseline;
}
.fragment:first-child { border-top: 1px solid var(--rule); }
.fragment__num {
font-family: var(--ff-display);
font-style: italic;
color: var(--rose);
font-size: 2.2rem;
line-height: 1;
font-variant-numeric: oldstyle-nums lining-nums;
text-align: right;
}
.fragment__date {
display: block;
font-family: var(--ff-meta);
font-size: 0.68rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 0.6rem;
}
.fragment__body p {
margin: 0 0 0.7rem;
font-size: 1.06rem;
line-height: 1.65;
}
.fragment__body p:last-child { margin-bottom: 0; }
.fragment__place {
display: block;
margin-top: 0.6rem;
font-family: var(--ff-meta);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
font-style: normal;
}
@media (max-width: 640px) {
.fragment { grid-template-columns: 3rem 1fr; gap: 1rem; }
.fragment__num { font-size: 1.6rem; }
}
/* ============================================================
Galeria
============================================================ */
.gallery-head {
width: var(--col);
margin-inline: auto;
padding: 5rem 0 3rem;
text-align: center;
border-bottom: 1px solid var(--rule);
}
.gallery-head h1 { font-style: italic; margin-bottom: 0.5rem; }
.gallery {
width: var(--col);
margin: 3rem auto 4rem;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.2rem;
}
.gallery figure {
margin: 0;
cursor: zoom-in;
position: relative;
overflow: hidden;
background: linear-gradient(140deg, var(--paper-2), var(--paper-3));
border: 1px solid var(--rule);
transition: transform .35s var(--ease);
}
.gallery figure:hover { transform: translateY(-3px); }
.gallery figure::after {
content: attr(data-caption);
position: absolute;
inset: 0;
display: grid;
place-items: end center;
padding-bottom: 0.8rem;
font-family: var(--ff-meta);
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-3);
pointer-events: none;
}
.gallery figure[data-size="lg"] { grid-column: span 6; aspect-ratio: 4/5; }
.gallery figure[data-size="md"] { grid-column: span 4; aspect-ratio: 3/4; }
.gallery figure[data-size="sm"] { grid-column: span 3; aspect-ratio: 1/1; }
.gallery figure[data-size="wide"] { grid-column: span 8; aspect-ratio: 16/10; }
@media (max-width: 760px) {
.gallery figure[data-size] { grid-column: span 6; }
}
/* Lightbox */
.lightbox {
position: fixed;
inset: 0;
background: color-mix(in oklab, var(--ink) 88%, transparent);
display: none;
align-items: center;
justify-content: center;
z-index: 999;
padding: 4rem 2rem 5rem;
opacity: 0;
transition: opacity .35s var(--ease);
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox__frame {
background: var(--paper);
max-width: 920px;
width: 100%;
aspect-ratio: 4/5;
border: 1px solid var(--rule);
position: relative;
}
.lightbox__frame::after {
content: "imagem";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--ff-meta);
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-3);
}
.lightbox__caption {
position: absolute;
bottom: -2.6rem;
left: 0; right: 0;
text-align: center;
font-family: var(--ff-meta);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--paper);
opacity: 0.85;
}
.lightbox__close {
position: absolute;
top: 1.5rem; right: 2rem;
background: transparent;
border: 1px solid color-mix(in oklab, var(--paper) 40%, transparent);
color: var(--paper);
width: 40px; height: 40px;
border-radius: 999px;
cursor: pointer;
display: grid; place-items: center;
}
.lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 1px solid color-mix(in oklab, var(--paper) 30%, transparent);
color: var(--paper);
width: 44px; height: 44px;
border-radius: 999px;
cursor: pointer;
display: grid; place-items: center;
}
.lightbox__nav--prev { left: 1.5rem; }
.lightbox__nav--next { right: 1.5rem; }
/* ============================================================
Audio
============================================================ */
.audio-list {
width: var(--col-narrow);
margin: 3rem auto 4rem;
}
.audio-item {
padding: 2rem 0;
border-bottom: 1px solid var(--rule);
}
.audio-item:first-child { border-top: 1px solid var(--rule); }
.audio-item__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.6rem;
}
.audio-item__title {
font-family: var(--ff-display);
font-size: 1.5rem;
font-style: italic;
color: var(--ink);
margin: 0;
}
.audio-item__meta {
font-family: var(--ff-meta);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
}
.audio-item__desc {
color: var(--ink-2);
max-width: 56ch;
font-style: italic;
margin-bottom: 1.4rem;
font-size: 1rem;
}
.player {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.9rem 1rem;
background: var(--paper-2);
border: 1px solid var(--rule);
}
.player__play {
width: 40px; height: 40px;
border-radius: 999px;
background: var(--ink);
color: var(--paper);
border: none;
cursor: pointer;
display: grid;
place-items: center;
transition: background .25s var(--ease);
flex-shrink: 0;
}
.player__play:hover { background: var(--rose); }
.player__play svg { width: 14px; height: 14px; }
.player__bar {
flex: 1;
height: 2px;
background: var(--rule-strong);
position: relative;
cursor: pointer;
}
.player__bar::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: var(--progress, 0%);
background: var(--rose);
}
.player__bar::after {
content: "";
position: absolute;
left: var(--progress, 0%);
top: 50%;
transform: translate(-50%, -50%);
width: 9px; height: 9px;
border-radius: 999px;
background: var(--rose);
}
.player__time {
font-family: var(--ff-meta);
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
min-width: 6ch;
text-align: right;
}
/* ============================================================
Sobre / Contact
============================================================ */
.about-grid {
width: var(--col);
margin: 4rem auto;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(2rem, 6vw, 5rem);
}
.about-grid h1 { font-style: italic; }
.about-grid .lead { margin-top: 1.5rem; }
.about-contact {
border-top: 1px solid var(--rule);
padding-top: 1.5rem;
font-family: var(--ff-meta);
}
.about-contact dt {
font-size: 0.7rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 1.2rem;
}
.about-contact dd {
margin-left: 0;
margin-top: 0.2rem;
font-size: 0.95rem;
color: var(--ink);
}
@media (max-width: 760px) {
.about-grid { grid-template-columns: 1fr; }
}
/* ============================================================
Tweaks panel (vanilla — built by layout.js)
============================================================ */
.tweaks {
position: fixed;
bottom: 20px;
right: 20px;
width: 280px;
background: var(--paper);
border: 1px solid var(--rule-strong);
box-shadow: var(--shadow-soft);
font-family: var(--ff-meta);
font-size: 0.78rem;
color: var(--ink);
z-index: 9999;
display: none;
}
.tweaks.is-open { display: block; }
.tweaks__head {
padding: 0.9rem 1rem;
border-bottom: 1px solid var(--rule);
display: flex;
align-items: center;
justify-content: space-between;
cursor: grab;
}
.tweaks__head:active { cursor: grabbing; }
.tweaks__title {
font-family: var(--ff-meta);
letter-spacing: 0.22em;
text-transform: uppercase;
font-size: 0.7rem;
color: var(--ink-3);
}
.tweaks__close {
background: transparent;
border: none;
color: var(--ink-3);
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
padding: 0;
width: 22px; height: 22px;
}
.tweaks__close:hover { color: var(--accent); }
.tweaks__body { padding: 1rem; max-height: 70vh; overflow: auto; }
.tweaks__section { margin-bottom: 1.1rem; }
.tweaks__label {
display: block;
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 0.55rem;
}
.tweaks__row { display: grid; gap: 6px; }
.tweaks__seg {
display: grid;
gap: 6px;
}
.tweaks__seg.cols-2 { grid-template-columns: 1fr 1fr; }
.tweaks__seg.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.tweaks__seg button {
background: transparent;
border: 1px solid var(--rule);
color: var(--ink-2);
padding: 0.5rem 0.6rem;
text-align: left;
font-family: var(--ff-meta);
font-size: 0.78rem;
cursor: pointer;
transition: all .2s var(--ease);
}
.tweaks__seg button:hover { color: var(--ink); border-color: var(--rule-strong); }
.tweaks__seg button[aria-pressed="true"] {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.tweaks__swatches {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.tweaks__swatch {
border: 1px solid var(--rule);
height: 44px;
cursor: pointer;
display: flex;
overflow: hidden;
padding: 0;
position: relative;
}
.tweaks__swatch[aria-pressed="true"] {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
.tweaks__swatch span { flex: 1; height: 100%; }
.tweaks__toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.45rem 0;
background: transparent;
border: none;
color: var(--ink-2);
font-family: var(--ff-meta);
font-size: 0.78rem;
cursor: pointer;
}
.tweaks__toggle-switch {
width: 32px;
height: 18px;
border-radius: 999px;
background: var(--rule-strong);
position: relative;
transition: background .2s var(--ease);
}
.tweaks__toggle-switch::after {
content: "";
position: absolute;
left: 2px; top: 2px;
width: 14px; height: 14px;
border-radius: 999px;
background: var(--paper);
transition: transform .2s var(--ease);
}
.tweaks__toggle[aria-pressed="true"] .tweaks__toggle-switch {
background: var(--rose);
}
.tweaks__toggle[aria-pressed="true"] .tweaks__toggle-switch::after {
transform: translateX(14px);
}
/* hide home-layout tweak section on non-home pages */
.tweaks__section[data-only-on="home"] { display: none; }
:root[data-page="home"] .tweaks__section[data-only-on="home"] { display: block; }
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}