/* ============================================================
hormusjicama.com — main.css
Design language: Contemporary Heritage / Editorial Archive
Palette: mineral grey · deep forest green · stone · pale sage
· charcoal · antique gold (used sparingly)
============================================================ */
/* ---------- 1. Tokens ------------------------------------- */
:root {
/* Colour */
--ink: #16211C; /* charcoal with a green cast */
--ink-soft: #3C4741;
--grey: #656E67; /* metadata, captions */
--grey-light: #8A928B;
--forest: #1E3A31; /* deep forest green */
--forest-deep: #12241E;
--forest-tint: #2A4B40;
--sage: #DCE3D8; /* pale sage */
--sage-deep: #C2D0BE;
--stone: #E4E2DB; /* muted stone */
--mineral: #F2F2EE; /* soft mineral grey — page base */
--paper: #FAFAF8;
--gold: #A8894B; /* antique gold — accent only */
--gold-soft: #C7AC76;
--rule: rgba(22, 33, 28, .14);
--rule-strong: rgba(22, 33, 28, .30);
--rule-light: rgba(250, 250, 248, .22);
/* Type */
--font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype",
Palatino, Georgia, "Times New Roman", serif;
--font-ui: "Archivo", "Helvetica Neue", Helvetica, Arial,
"Segoe UI", system-ui, sans-serif;
--fs-display: clamp(2.55rem, 1.35rem + 4.4vw, 5.1rem);
--fs-h1: clamp(2.1rem, 1.3rem + 3.1vw, 3.9rem);
--fs-h2: clamp(1.6rem, 1.15rem + 1.7vw, 2.5rem);
--fs-h3: clamp(1.16rem, 1rem + .58vw, 1.5rem);
--fs-lead: clamp(1.06rem, .97rem + .42vw, 1.32rem);
--fs-body: clamp(1rem, .965rem + .16vw, 1.075rem);
--fs-small: .9rem;
--fs-meta: .715rem;
/* Space */
--sp-1: .5rem; --sp-2: .875rem; --sp-3: 1.25rem;
--sp-4: 2rem; --sp-5: 3rem; --sp-6: 4.5rem;
--sp-7: 6.5rem; --sp-8: 9rem;
--section-y: clamp(3.75rem, 2rem + 7vw, 8rem);
--gutter: clamp(1.25rem, .55rem + 2.9vw, 4.25rem);
--measure: 66ch;
--shell: 1440px;
/* Motion & form */
--ease: cubic-bezier(.22, .61, .36, 1);
--t-fast: 160ms var(--ease);
--t-mid: 320ms var(--ease);
--t-slow: 620ms var(--ease);
--radius: 2px;
}
/* ---------- 2. Reset -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--mineral);
color: var(--ink);
font-family: var(--font-ui);
font-size: var(--fs-body);
line-height: 1.68;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--stone); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 1px;
}
::selection { background: var(--sage-deep); color: var(--forest-deep); }
/* ---------- 3. Authentication gate ------------------------ */
/* auth.js removes .is-gated from the moment a valid
session is confirmed. Until then the page paints nothing,
so protected content never flashes before the redirect. */
html.is-gated body { visibility: hidden; }
html.is-gated { background: var(--mineral); }
/* Without JavaScript the gate cannot run, so the page stays
hidden — but the explanation must still be readable. */
html.is-gated noscript,
html.is-gated noscript * { visibility: visible; }
/* ---------- 4. Utilities ---------------------------------- */
.shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--gutter);
}
.shell--narrow { max-width: 1120px; }
.skip-link {
position: absolute;
left: var(--sp-3); top: -100px;
z-index: 300;
padding: .7rem 1.1rem;
background: var(--forest);
color: var(--paper);
font-size: var(--fs-small);
font-weight: 500;
text-decoration: none;
transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-3); }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
/* ---------- 5. Typography --------------------------------- */
.display, .h1, .h2, .h3 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -.017em;
color: var(--ink);
text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.028em; }
.h1 { font-size: var(--fs-h1); line-height: 1.06; }
.h2 { font-size: var(--fs-h2); line-height: 1.14; }
.h3 { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -.008em; }
.h2--rule {
padding-top: var(--sp-3);
border-top: 1px solid var(--rule-strong);
}
.lead {
font-size: var(--fs-lead);
line-height: 1.56;
color: var(--ink-soft);
max-width: 60ch;
}
.lead--display {
font-family: var(--font-display);
color: var(--ink);
line-height: 1.42;
}
.prose > * + * { margin-top: 1.15em; }
.prose p { max-width: var(--measure); color: var(--ink-soft); }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose .h3 { margin-top: 1.9em; }
.prose a {
color: var(--forest);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .22em;
text-decoration-color: rgba(30, 58, 49, .4);
transition: text-decoration-color var(--t-fast), color var(--t-fast);
}
.prose a:hover { color: var(--gold); text-decoration-color: var(--gold); }
.eyebrow {
display: flex;
align-items: baseline;
gap: .8rem;
font-family: var(--font-ui);
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: .19em;
text-transform: uppercase;
color: var(--grey);
}
.eyebrow__num {
font-variant-numeric: tabular-nums;
color: var(--gold);
letter-spacing: .12em;
}
.eyebrow::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--rule);
transform: translateY(-.28em);
}
.eyebrow--plain::after { display: none; }
.eyebrow--light { color: var(--sage); }
.eyebrow--light::after { background: var(--rule-light); }
.eyebrow--light .eyebrow__num { color: var(--gold-soft); }
.caption {
font-size: var(--fs-small);
line-height: 1.5;
color: var(--grey);
}
.caption strong { color: var(--ink); font-weight: 600; }
.meta {
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: .17em;
text-transform: uppercase;
color: var(--grey);
}
.pull {
font-family: var(--font-display);
font-size: clamp(1.35rem, 1.02rem + 1.35vw, 2.15rem);
line-height: 1.32;
letter-spacing: -.014em;
color: var(--forest);
max-width: 22ch;
}
/* ---------- 6. Links & buttons ---------------------------- */
.link {
display: inline-flex;
align-items: center;
gap: .55rem;
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: .04em;
color: var(--forest);
text-decoration: none;
padding-bottom: .3rem;
border-bottom: 1px solid var(--rule-strong);
transition: color var(--t-fast), border-color var(--t-fast), gap var(--t-fast);
}
.link::after { content: "\2192"; font-size: 1em; transition: transform var(--t-fast); }
.link:hover { color: var(--gold); border-color: var(--gold); }
.link:hover::after { transform: translateX(3px); }
.link--light { color: var(--sage); border-color: var(--rule-light); }
.link--light:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
min-height: 50px;
padding: .85rem 1.9rem;
border: 1px solid var(--forest);
border-radius: var(--radius);
background: var(--forest);
color: var(--paper);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: .06em;
text-decoration: none;
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
.btn--ghost { background: transparent; color: var(--forest); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--forest); color: var(--paper); border-color: var(--forest); }
/* ---------- 7. Masthead / sticky navigation ---------------- */
.masthead {
position: sticky;
top: 0;
z-index: 120;
background: rgba(242, 242, 238, .93);
border-bottom: 1px solid var(--rule);
transition: box-shadow var(--t-mid), background var(--t-mid);
}
@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
.masthead {
background: rgba(242, 242, 238, .80);
-webkit-backdrop-filter: saturate(150%) blur(14px);
backdrop-filter: saturate(150%) blur(14px);
}
}
.masthead.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 12px 30px -26px rgba(22, 33, 28, .5); }
.masthead__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
min-height: 74px;
padding-block: .7rem;
}
.masthead.is-stuck .masthead__inner { min-height: 64px; }
.wordmark {
display: inline-flex;
flex-direction: column;
gap: .18rem;
text-decoration: none;
line-height: 1;
}
.wordmark__name {
font-family: var(--font-display);
font-size: clamp(1.1rem, 1rem + .38vw, 1.36rem);
letter-spacing: -.012em;
color: var(--ink);
}
.wordmark__sub {
font-size: .62rem;
font-weight: 600;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold);
}
.nav__list { display: flex; align-items: center; gap: clamp(.7rem, .1rem + 1.3vw, 1.9rem); }
.nav__link {
position: relative;
display: block;
padding: .5rem .1rem;
font-size: .845rem;
font-weight: 500;
letter-spacing: .012em;
color: var(--ink-soft);
text-decoration: none;
transition: color var(--t-fast);
}
.nav__link::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: .1rem;
height: 1.5px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t-mid);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--forest); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav-toggle {
display: none;
align-items: center;
gap: .6rem;
min-height: 44px;
padding: .5rem .85rem .5rem .95rem;
border: 1px solid var(--rule-strong);
border-radius: var(--radius);
background: transparent;
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: .17em;
text-transform: uppercase;
cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 18px; height: 10px; flex: none; }
.nav-toggle__bars span {
position: absolute; left: 0;
width: 100%; height: 1.5px;
background: var(--ink);
transition: transform var(--t-mid), opacity var(--t-fast);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 8.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }
/* ---------- 8. Page opening ------------------------------- */
.page-head { padding-block: clamp(2.75rem, 1.5rem + 5vw, 6rem) 0; }
.page-head__grid {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--sp-4) clamp(1.5rem, .5rem + 3.5vw, 4.5rem);
align-items: end;
}
.page-head__title { margin-top: var(--sp-3); }
.page-head__note {
padding-top: var(--sp-3);
border-top: 1px solid var(--rule);
}
/* ---------- 9. Sections & rules --------------------------- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--forest { background: var(--forest-deep); color: var(--sage); }
.section--forest .h1, .section--forest .h2, .section--forest .h3, .section--forest .display { color: var(--paper); }
.section--forest .prose p, .section--forest .lead { color: rgba(220, 227, 216, .84); }
.section--forest .caption { color: rgba(220, 227, 216, .68); }
.section--sage { background: var(--sage); }
.section--stone { background: var(--stone); }
.section--paper { background: var(--paper); }
.rule { height: 1px; border: 0; margin: 0; background: var(--rule); }
.rule--strong { background: var(--rule-strong); }
.rule--double { height: 4px; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); background: none; }
/* ---------- 10. Editorial grid ---------------------------- */
.grid { display: grid; gap: var(--sp-4) clamp(1.5rem, .5rem + 3.2vw, 4rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.grid--align-start { align-items: start; }
.grid--align-end { align-items: end; }
.sticky-aside { position: sticky; top: 108px; }
/* ---------- 11. Photographic plate ------------------------ */
/* Photographs are NEVER cropped: the ![]()
keeps its intrinsic
aspect ratio (width:100%; height:auto) inside a mount. */
.plate { margin: 0; }
.plate__mount {
padding: clamp(.85rem, .4rem + 1.5vw, 1.6rem);
background: var(--paper);
border: 1px solid var(--rule);
box-shadow: 0 24px 44px -34px rgba(22, 33, 28, .55);
}
.plate__mount--sage { background: var(--sage); }
.plate__mount--stone { background: var(--stone); }
.plate__mount--forest { background: var(--forest); border-color: rgba(250,250,248,.14); }
.plate__img {
width: 100%;
height: auto;
object-fit: contain; /* never crops a face */
border: 1px solid var(--rule);
}
.plate__mount--forest .plate__img { border-color: rgba(250, 250, 248, .18); }
.plate__cap {
display: grid;
grid-template-columns: auto 1fr;
gap: .3rem .9rem;
margin-top: var(--sp-2);
padding-top: .7rem;
border-top: 1px solid var(--rule);
}
.plate__cap-num {
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: .16em;
color: var(--gold);
white-space: nowrap;
}
.plate__cap-text { font-size: var(--fs-small); line-height: 1.5; color: var(--grey); }
.plate--bordered .plate__mount { box-shadow: none; }
/* Constrain very small source photographs so they are never
scaled past a size their resolution can carry. */
.plate--sm { max-width: 340px; }
.plate--md { max-width: 420px; }
.plate--lg { max-width: 620px; }
.plate--xl { max-width: 720px; }
.plate--center { margin-inline: auto; }
/* ---------- 12. Index list (archive register) ------------- */
.register { border-top: 1px solid var(--rule-strong); }
.register__item {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr);
gap: 0 clamp(1rem, .4rem + 1.6vw, 2.25rem);
padding-block: clamp(1.4rem, 1rem + 1.2vw, 2.3rem);
border-bottom: 1px solid var(--rule);
}
.register__num {
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: .16em;
color: var(--gold);
padding-top: .45rem;
font-variant-numeric: tabular-nums;
}
.register__body > * + * { margin-top: .7rem; }
.register__body p { color: var(--ink-soft); max-width: 62ch; }
/* Register that behaves as a set of navigation cards */
a.register__item {
text-decoration: none;
transition: background var(--t-fast), padding var(--t-fast);
}
a.register__item:hover { background: rgba(220, 227, 216, .5); }
a.register__item .h3 { transition: color var(--t-fast); }
a.register__item:hover .h3 { color: var(--forest); }
/* ---------- 13. Fact ledger ------------------------------- */
.ledger { border-top: 1px solid var(--rule-strong); }
.ledger__row {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: .35rem clamp(1rem, .4rem + 1.6vw, 2.5rem);
padding-block: 1.05rem;
border-bottom: 1px solid var(--rule);
}
.ledger__key {
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--grey);
padding-top: .18rem;
}
.ledger__val { font-size: var(--fs-small); line-height: 1.6; color: var(--ink); }
.section--forest .ledger { border-color: var(--rule-light); }
.section--forest .ledger__row { border-color: var(--rule-light); }
.section--forest .ledger__key { color: var(--sage-deep); }
.section--forest .ledger__val { color: var(--paper); }
/* ---------- 14. Note / annotation ------------------------- */
.note {
padding: var(--sp-3) var(--sp-4);
background: var(--sage);
border-left: 2px solid var(--gold);
}
.note p { font-size: var(--fs-small); line-height: 1.62; color: var(--forest-deep); max-width: 68ch; }
.note p + p { margin-top: .6rem; }
.note__label {
display: block;
margin-bottom: .5rem;
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: .17em;
text-transform: uppercase;
color: var(--forest);
}
.note--forest { background: rgba(250, 250, 248, .06); border-left-color: var(--gold-soft); }
.note--forest p { color: rgba(220, 227, 216, .9); }
.note--forest .note__label { color: var(--gold-soft); }
/* ---------- 15. Closing panel ----------------------------- */
.closing { background: var(--forest-deep); color: var(--sage); }
.closing__inner {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--sp-4) clamp(1.5rem, .5rem + 3.5vw, 5rem);
align-items: end;
padding-block: clamp(3.5rem, 2rem + 5vw, 7rem);
}
.closing__title { color: var(--paper); }
.closing p { color: rgba(220, 227, 216, .82); max-width: 52ch; }
.closing__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.closing .btn { background: var(--paper); color: var(--forest-deep); border-color: var(--paper); }
.closing .btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--forest-deep); }
.closing .btn--ghost { background: transparent; color: var(--sage); border-color: var(--rule-light); }
.closing .btn--ghost:hover { background: var(--sage); color: var(--forest-deep); border-color: var(--sage); }
/* ---------- 16. Footer ------------------------------------ */
.site-footer {
background: var(--ink);
color: rgba(236, 238, 234, .78);
padding-block: clamp(2.75rem, 1.75rem + 3.5vw, 4.75rem) var(--sp-4);
font-size: var(--fs-small);
}
.site-footer a { color: inherit; text-decoration: none; }
.footer__top {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: var(--sp-5) clamp(1.5rem, .5rem + 3.2vw, 4rem);
padding-bottom: var(--sp-4);
border-bottom: 1px solid rgba(250, 250, 248, .16);
}
.footer__mark .wordmark__name { color: var(--paper); font-size: 1.28rem; }
.footer__mark p { margin-top: var(--sp-2); max-width: 34ch; color: rgba(236, 238, 234, .6); font-size: var(--fs-small); line-height: 1.6; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); }
.footer__title {
margin-bottom: var(--sp-2);
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: .17em;
text-transform: uppercase;
color: var(--gold-soft);
}
.footer__list li + li { margin-top: .5rem; }
.footer__list a {
display: inline-block;
padding-block: .12rem;
border-bottom: 1px solid transparent;
transition: color var(--t-fast), border-color var(--t-fast);
}
.footer__list a:hover { color: var(--paper); border-color: var(--gold-soft); }
.footer__contact dt {
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(236, 238, 234, .5);
}
.footer__contact dd { margin: .18rem 0 .95rem; }
.footer__contact dd a { border-bottom: 1px solid rgba(250, 250, 248, .28); padding-bottom: .1rem; transition: color var(--t-fast), border-color var(--t-fast); }
.footer__contact dd a:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-1); }
.social__link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border: 1px solid rgba(250, 250, 248, .22);
border-radius: 50%;
color: rgba(236, 238, 234, .8);
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.social__link svg { width: 17px; height: 17px; fill: currentColor; }
.social__link:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--forest-deep); }
.social__link[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--sp-2) var(--sp-4);
padding-top: var(--sp-4);
font-size: .8rem;
color: rgba(236, 238, 234, .58);
}
.footer__bottom a { border-bottom: 1px solid rgba(250, 250, 248, .3); padding-bottom: .1rem; transition: color var(--t-fast), border-color var(--t-fast); }
.footer__bottom a:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.footer__credit { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
/* ---------- 17. Reveal (restrained micro-interaction) ------ */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--t-slow), transform var(--t-slow); }
.no-js .reveal, html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ============================================================
18. HOME — editorial opening, asymmetric
============================================================ */
.opening {
position: relative;
padding-block: clamp(2.5rem, 1rem + 6vw, 6.5rem) clamp(3rem, 1.5rem + 6vw, 7rem);
overflow: hidden;
}
.opening::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 62%;
background:
linear-gradient(180deg, var(--sage) 0%, rgba(220, 227, 216, 0) 100%);
z-index: 0;
}
.opening__inner { position: relative; z-index: 1; }
.opening__grid {
display: grid;
grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr);
gap: clamp(2rem, 1rem + 3vw, 4rem) clamp(1.5rem, .4rem + 3.6vw, 4.5rem);
align-items: start;
}
.opening__name {
font-family: var(--font-display);
font-size: var(--fs-display);
line-height: .98;
letter-spacing: -.032em;
margin-top: var(--sp-3);
}
.opening__name span { display: block; }
.opening__name em {
display: block;
font-style: italic;
color: var(--forest);
letter-spacing: -.03em;
}
.opening__lead { margin-top: var(--sp-4); max-width: 46ch; }
.opening__strap {
margin-top: var(--sp-4);
padding-top: var(--sp-3);
border-top: 1px solid var(--rule-strong);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-3) var(--sp-2);
}
.opening__strap dt {
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--grey);
}
.opening__strap dd {
margin-top: .3rem;
font-family: var(--font-display);
font-size: 1.06rem;
line-height: 1.34;
color: var(--ink);
}
.opening__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.opening__plate { justify-self: end; width: 100%; max-width: 440px; }
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-strong); }
.highlights__item { padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) clamp(1rem, .5rem + 1.4vw, 2.25rem); border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.highlights__item:last-child { border-right: 0; }
.highlights__fig {
font-family: var(--font-display);
font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
line-height: 1;
letter-spacing: -.03em;
color: var(--forest);
}
.highlights__label { margin-top: .55rem; font-size: var(--fs-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.highlights__text { margin-top: .7rem; font-size: var(--fs-small); line-height: 1.58; color: var(--ink-soft); }
/* ============================================================
19. ABOUT — magazine profile
============================================================ */
.profile__grid {
display: grid;
grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
gap: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(1.5rem, .4rem + 3.6vw, 4.5rem);
align-items: start;
}
.profile__aside > * + * { margin-top: var(--sp-4); }
.dropcap::first-letter {
float: left;
font-family: var(--font-display);
font-size: 3.5em;
line-height: .82;
padding: .06em .1em 0 0;
color: var(--forest);
}
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-strong); }
.values__item { padding: clamp(1.4rem, 1rem + 1.3vw, 2.25rem) clamp(1rem, .5rem + 1.2vw, 2rem) clamp(1.4rem, 1rem + 1.3vw, 2.25rem) 0; border-bottom: 1px solid var(--rule); }
.values__item:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: clamp(1.25rem, .6rem + 1.8vw, 2.5rem); }
.values__item:nth-child(even) { padding-left: clamp(1.25rem, .6rem + 1.8vw, 2.5rem); padding-right: 0; }
.values__num { font-size: var(--fs-meta); font-weight: 600; letter-spacing: .18em; color: var(--gold); }
.values__item .h3 { margin-top: .5rem; }
.values__item > p:not(.values__num) { margin-top: .6rem; font-size: var(--fs-small); line-height: 1.62; color: var(--ink-soft); }
/* ============================================================
20. JOURNEY — chapters of an archive
============================================================ */
.chapter { border-top: 1px solid var(--rule-strong); padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 5.5rem); }
.chapter:first-of-type { border-top: 0; }
.chapter__head {
display: grid;
grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr);
gap: var(--sp-2) clamp(1.5rem, .5rem + 3.2vw, 4rem);
align-items: start;
}
.chapter__year {
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.35rem);
line-height: 1;
letter-spacing: -.02em;
color: var(--forest);
font-variant-numeric: lining-nums;
}
.chapter__marker { display: block; margin-bottom: .55rem; font-size: var(--fs-meta); font-weight: 600; letter-spacing: .19em; text-transform: uppercase; color: var(--gold); }
.chapter__body { margin-top: var(--sp-3); }
.chapter__body > * + * { margin-top: 1.1em; }
.chapter__body p { max-width: var(--measure); color: var(--ink-soft); }
.chapter--offset .chapter__head { grid-template-columns: minmax(0, 8.8fr) minmax(0, 3.2fr); }
.chapter--offset .chapter__year { grid-column: 2; grid-row: 1; text-align: right; }
.chapter--offset .chapter__title { grid-column: 1; grid-row: 1; }
.chapter__split {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--sp-4) clamp(1.5rem, .5rem + 3.2vw, 4rem);
align-items: start;
margin-top: var(--sp-4);
}
.chapter__split--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.chapter__split--rev .chapter__figure { order: -1; }
.spanner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 0;
border-top: 1px solid var(--rule-strong);
border-bottom: 1px solid var(--rule-strong);
}
.spanner__cell { padding: clamp(1.15rem, .9rem + 1vw, 1.8rem) clamp(1rem, .6rem + 1vw, 1.75rem) clamp(1.15rem, .9rem + 1vw, 1.8rem) 0; border-right: 1px solid var(--rule); }
.spanner__cell:last-child { border-right: 0; }
.spanner__yr { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--gold); }
.spanner__cell > p:not(.spanner__yr) { margin-top: .5rem; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
/* ============================================================
21. LEGACY — large typographic statements
============================================================ */
.statement { padding-block: clamp(3rem, 1.75rem + 5vw, 7rem); }
.statement__text {
font-family: var(--font-display);
font-size: clamp(1.85rem, 1.15rem + 2.9vw, 4rem);
line-height: 1.1;
letter-spacing: -.026em;
max-width: 19ch;
}
.statement__text em { font-style: italic; color: var(--gold-soft); }
.statement__grid {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--sp-4) clamp(1.5rem, .5rem + 3.2vw, 4.5rem);
align-items: end;
}
.strands { counter-reset: strand; border-top: 1px solid var(--rule-strong); }
.strands__item {
display: grid;
grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
gap: var(--sp-2) clamp(1.5rem, .5rem + 3.2vw, 4rem);
padding-block: clamp(1.6rem, 1.1rem + 1.7vw, 2.75rem);
border-bottom: 1px solid var(--rule);
}
.strands__item::before {
counter-increment: strand;
content: counter(strand, decimal-leading-zero);
grid-row: 1 / span 2;
align-self: start;
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: .16em;
color: var(--gold);
padding-top: .4rem;
}
.strands__item { grid-template-columns: 3rem minmax(0, 4fr) minmax(0, 7fr); }
.strands__title { align-self: start; }
.strands__text p { color: var(--ink-soft); max-width: 60ch; }
.strands__text p + p { margin-top: .8rem; }
/* ============================================================
22. WORK — structured professional grid
============================================================ */
.dossier {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--rule-strong);
border-left: 1px solid var(--rule);
}
.dossier__cell {
padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
border-right: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
background: var(--paper);
}
.dossier__org { font-size: var(--fs-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.dossier__cell .h3 { margin-top: .6rem; }
.dossier__term { margin-top: .5rem; font-size: var(--fs-small); color: var(--grey); font-variant-numeric: tabular-nums; }
.dossier__cell > p:not(.dossier__org):not(.dossier__term) { margin-top: .85rem; font-size: var(--fs-small); line-height: 1.62; color: var(--ink-soft); }
.workbench {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--sp-4) clamp(1.5rem, .5rem + 3.2vw, 4.5rem);
align-items: start;
}
.stack { border-top: 1px solid var(--rule-strong); }
.stack__row { padding-block: clamp(1.2rem, .95rem + .9vw, 1.85rem); border-bottom: 1px solid var(--rule); }
.stack__row .h3 { font-size: 1.14rem; }
.stack__row p { margin-top: .55rem; font-size: var(--fs-small); line-height: 1.62; color: var(--ink-soft); max-width: 62ch; }
/* ============================================================
23. INSIGHTS — premium journal
============================================================ */
.journal { border-top: 1px solid var(--rule-strong); }
.journal__lead {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--sp-4) clamp(1.5rem, .5rem + 3.2vw, 4.5rem);
align-items: start;
padding-block: clamp(2rem, 1.4rem + 2.2vw, 3.75rem);
border-bottom: 1px solid var(--rule-strong);
}
.essay { padding-block: clamp(2.25rem, 1.5rem + 2.6vw, 4.25rem); border-bottom: 1px solid var(--rule); }
.essay__grid {
display: grid;
grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr);
gap: var(--sp-3) clamp(1.5rem, .5rem + 3.2vw, 4.5rem);
align-items: start;
}
.essay__index { position: sticky; top: 108px; }
.essay__no { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--gold); letter-spacing: -.02em; }
.essay__cat { margin-top: .5rem; font-size: var(--fs-meta); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); }
.essay__body > * + * { margin-top: 1.1em; }
.essay__body p { max-width: var(--measure); color: var(--ink-soft); }
.essay__body .pull {
margin-block: 1.6em;
padding-left: clamp(1rem, .6rem + 1vw, 1.75rem);
border-left: 2px solid var(--gold);
max-width: 30ch;
}
/* ============================================================
24. CONTACT — quiet architecture
============================================================ */
.contact__grid {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
gap: clamp(2rem, 1rem + 3vw, 4rem) clamp(1.5rem, .4rem + 3.6vw, 5rem);
align-items: start;
}
.card-contact {
padding: clamp(1.6rem, 1.1rem + 2vw, 3rem);
background: var(--paper);
border: 1px solid var(--rule);
border-top: 2px solid var(--forest);
}
.card-contact__name { margin-top: .35rem; }
.contact-lines { margin-top: var(--sp-4); border-top: 1px solid var(--rule); }
.contact-lines__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .25rem 1rem; padding-block: 1.05rem; border-bottom: 1px solid var(--rule); align-items: baseline; }
.contact-lines__key { font-size: var(--fs-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.contact-lines__val a {
font-family: var(--font-display);
font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--rule-strong);
padding-bottom: .12rem;
overflow-wrap: anywhere;
transition: color var(--t-fast), border-color var(--t-fast);
}
.contact-lines__val a:hover { color: var(--gold); border-color: var(--gold); }
.contact-social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-3); }
.contact-social .social__link { border-color: var(--rule-strong); color: var(--forest); }
.contact-social .social__link:hover { background: var(--forest); border-color: var(--forest); color: var(--paper); }
/* Register body uses block-level spans so the whole row can be
a single anchor without invalid -inside--inside-. */
.register__body .h3,
.register__body .txt { display: block; }
.register__body .txt {
font-size: var(--fs-small);
line-height: 1.6;
color: var(--ink-soft);
max-width: 62ch;
}
.register__body > * + * { margin-top: .6rem; }
/* The panel footnote is shown only inside the mobile panel. */
.nav__foot { display: none; }
/* ---- Refinements after visual QA ------------------------- */
/* A note placed inside a sage band needs its own ground. */
.section--sage .note { background: var(--paper); }
/* Chapter prose aligns with the chapter title rather than the
year, so each chapter reads as one indented column. */
@media (min-width: 901px) {
.chapter__body {
display: grid;
grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr);
column-gap: clamp(1.5rem, .5rem + 3.2vw, 4rem);
}
.chapter__body > * { grid-column: 2; }
.chapter--offset .chapter__body { grid-template-columns: minmax(0, 8.8fr) minmax(0, 3.2fr); }
.chapter--offset .chapter__body > * { grid-column: 1; }
.chapter__split .chapter__body { display: block; }
}
/* Keep the About aside's plate and note on the same measure. */
.profile__aside { max-width: 420px; }