/* MineCloudCraft Press — minecloudcraftpress.com Bolder pass: dropping the editorial-typographic reflex lane (display italic + tracked uppercase + ruled separators + mono catalog card). Same locked brand palette and fonts; committed amber color strategy; broadsheet-manifesto rhythm with extreme scale jumps and asymmetric splits. Fonts are loaded from the HTML with preconnect, not @import here. */ /* ───────────────────────── Tokens ───────────────────────── */ :root { /* Identity-locked palette */ --ink: #16202E; --ink-2: #0E1722; /* one shade deeper for the WHY band */ --ink-soft: #36465A; --ink-mute: #6A7588; --ink-faint: #97A0AE; --paper: #FAF7F0; --paper-2: #F2EDE0; --rule: #D9D3C4; --amber: #C97515; --amber-2: #B26410; /* one shade deeper for the JUNE 9 band */ --amber-3: #8F4F0A; /* darker amber for type on amber surface */ --amber-ink: #2A1908; /* amber so dark it reads as a brown ink */ --terra: #B0431F; --sage: #4F6B4A; /* Type families — locked by brand */ --serif: 'Source Serif 4', Georgia, serif; --sans: 'Inter Tight', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* Display sizes — committed scale, large jumps */ --display-1: clamp(3.6rem, 11vw, 9rem); /* hero billboards */ --display-2: clamp(2.6rem, 6vw, 5.4rem); /* section titles */ --display-3: clamp(1.8rem, 3.4vw, 2.8rem); /* sub-display */ /* Rhythm */ --gutter: 2rem; --section: clamp(5rem, 9vw, 8.5rem); --shell-x: clamp(1.4rem, 4vw, 3rem); --shell-max: 88rem; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ink); background: var(--paper); font-feature-settings: "kern", "liga", "onum", "ss01"; font-variant-numeric: oldstyle-nums proportional-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--amber); color: var(--paper); } a { color: inherit; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color 0.18s, color 0.18s; } a:hover { text-decoration-color: currentColor; color: var(--amber); } a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; } p { margin: 0 0 1em; max-width: 60ch; } /* ───────────────────────── Layout primitives ───────────────────────── */ .wrap { max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--shell-x); } .wrap--bleed { max-width: none; padding: 0; } .band { position: relative; padding: var(--section) 0; } .band--paper { background: var(--paper); color: var(--ink); } .band--ink { background: var(--ink-2); color: var(--paper); } .band--amber { background: var(--amber); color: var(--amber-ink); } .band--ink p, .band--ink h1, .band--ink h2, .band--ink h3 { color: var(--paper); } .band--ink a { color: var(--paper); text-decoration-color: var(--amber); } .band--ink a:hover { color: var(--amber); } /* ───────────────────────── Top bar ───────────────────────── */ .topbar { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 1.1rem var(--shell-x); background: rgba(250, 247, 240, 0.9); border-bottom: 1px solid var(--rule); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); } .topbar a { text-decoration: none; } .imprint-mark { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 0.75rem; color: var(--ink); text-decoration: none; } .imprint-mark .mark-cube { display: block; width: 2rem; height: 2rem; } .imprint-mark .mark-cube .ink { fill: var(--ink); } .imprint-mark .mark-cube .acc { fill: var(--amber); } .imprint-mark .wordmark { font-family: var(--sans); font-weight: 700; font-size: 0.92rem; letter-spacing: -0.005em; color: var(--ink); line-height: 1; } .imprint-mark .wordmark span { display: block; font-family: var(--sans); font-weight: 500; font-size: 0.84rem; letter-spacing: 0.005em; color: var(--ink-soft); margin-top: 0.15rem; } .nav { display: flex; align-items: center; gap: 1.6rem; font-family: var(--sans); font-weight: 500; font-size: 0.88rem; } .nav a { color: var(--ink-soft); text-decoration: none; } .nav a:hover { color: var(--ink); } .nav .nav-cta { /* Tap-target safe: 44px min-height while keeping the slim visual padding. */ display: inline-flex; align-items: center; min-height: 44px; padding: 0.55rem 0.95rem; background: var(--ink); color: var(--paper); font-weight: 600; letter-spacing: 0.01em; border-radius: 1px; } .nav .nav-cta:hover { background: var(--amber); color: var(--paper); } @media (max-width: 720px) { .nav > a:not(.nav-cta) { display: none; } } /* ── CSS-only mobile menu (details/summary, no JS) ── */ .nav-menu { display: none; position: relative; } @media (max-width: 720px) { .nav-menu { display: block; order: -1; margin-right: 0.4rem; } } .nav-menu > summary { list-style: none; cursor: pointer; display: grid; gap: 4px; padding: 0.55rem 0.55rem; border-radius: 1px; background: transparent; } .nav-menu > summary::-webkit-details-marker { display: none; } .nav-menu > summary:hover { background: var(--paper-2); } .nav-menu > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } .nav-menu .menu-bar { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform 0.18s ease-out, opacity 0.18s ease-out; } .nav-menu[open] .menu-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav-menu[open] .menu-bar:nth-child(2) { opacity: 0; } .nav-menu[open] .menu-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .menu-panel { position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 60; display: grid; gap: 0; min-width: 14rem; padding: 0.6rem 0; background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; box-shadow: 0 18px 40px -16px rgba(22, 32, 46, 0.25); font-family: var(--sans); font-size: 0.96rem; } .menu-panel a { display: flex; align-items: center; min-height: 44px; padding: 0.85rem 1.1rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-soft, #E5DFD0); font-weight: 500; } .menu-panel a:last-child { border-bottom: 0; } .menu-panel a:hover { background: var(--paper-2); color: var(--amber); } .menu-panel .menu-cta { background: var(--amber); color: var(--paper); font-weight: 700; letter-spacing: 0.01em; border-bottom: 0; } .menu-panel .menu-cta:hover { background: var(--amber-2); color: var(--paper); } /* ───────────────────────── Buttons ───────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.4rem; font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.005em; border: 2px solid var(--ink); border-radius: 1px; background: var(--ink); color: var(--paper); text-decoration: none; transition: transform 0.16s cubic-bezier(0.2,1,0.3,1), background 0.18s, color 0.18s, border-color 0.18s; cursor: pointer; line-height: 1; } .btn:hover { transform: translateY(-1px); background: var(--amber); border-color: var(--amber); color: var(--paper); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); } .btn--paper:hover { background: var(--amber); color: var(--paper); border-color: var(--amber); } .btn--amber { background: var(--amber); color: var(--paper); border-color: var(--amber); } .btn--amber:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .btn--ink-on-amber { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--ink-on-amber:hover { background: var(--amber-ink); border-color: var(--amber-ink); color: var(--amber); } .btn .ar { transition: transform 0.18s cubic-bezier(0.2,1,0.3,1); } .btn:hover .ar { transform: translateX(4px); } /* ───────────────────────── HERO ───────────────────────── */ .hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; background: radial-gradient(circle at 85% 30%, rgba(201, 117, 21, 0.06), transparent 50%), var(--paper); } .hero-grid { /* Mobile: flexbox column with explicit order so the cover image appears right after the headline, before the deck + CTAs. Visitors see the book on first scroll, not at the foot of the hero. */ display: flex; flex-direction: column; gap: 1.5rem; } .hero-grid > .hero-copy { display: contents; } .hero-grid .hero-meta { order: 1; } .hero-grid .hero-copy > h1 { order: 2; } .hero-grid .hero-cover-stage { order: 3; margin: 0.6rem auto; } .hero-grid .hero-deck { order: 4; } .hero-grid .hero-cta { order: 5; } .hero-grid .hero-spec { order: 6; } @media (min-width: 940px) { .hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: clamp(3rem, 6vw, 5.5rem); align-items: center; } /* Restore desktop nesting: hero-copy is a real child again, order resets. */ .hero-grid > .hero-copy { display: block; } .hero-grid .hero-meta, .hero-grid .hero-copy > h1, .hero-grid .hero-cover-stage, .hero-grid .hero-deck, .hero-grid .hero-cta, .hero-grid .hero-spec { order: 0; margin: revert; } } .hero-meta { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 0.8rem; font-family: var(--sans); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.005em; color: var(--ink-soft); margin-bottom: 1.4rem; } .hero-meta .pip { display: inline-block; width: 0.5rem; height: 0.5rem; background: var(--amber); border-radius: 50%; animation: pulse 2.4s cubic-bezier(0.4,0,0.6,1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.18); } } .hero h1 { font-family: var(--serif); font-weight: 600; font-size: var(--display-1); line-height: 0.96; letter-spacing: -0.035em; margin: 0 0 1.4rem; color: var(--ink); } .hero h1 .em { font-style: italic; font-weight: 400; color: var(--amber); } .hero h1 .underline { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 6px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 4px; } .hero-deck { font-family: var(--serif); font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.45; color: var(--ink-soft); max-width: 36rem; margin: 0 0 2rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2.6rem; } .hero-spec { display: grid; grid-template-columns: repeat(3, auto); gap: clamp(1.2rem, 3vw, 2.4rem); padding-top: 1.6rem; border-top: 1px solid var(--rule); max-width: 30rem; } .hero-spec .cell .k { font-family: var(--sans); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.35rem; } .hero-spec .cell .v { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); line-height: 1.1; } .hero-spec .cell .v small { display: block; font-family: var(--sans); font-weight: 500; font-size: 0.7rem; color: var(--ink-soft); margin-top: 0.2rem; letter-spacing: 0; text-transform: none; } /* Hero right: stacked book composition with depth */ .hero-cover-stage { position: relative; display: grid; place-items: center; padding: 2rem 0; perspective: 1400px; } /* The "pub-stamp" — repositioned as a corner mark, much more confident */ .pub-stamp { position: absolute; top: 1rem; right: 0; z-index: 4; font-family: var(--sans); text-align: right; transform: rotate(8deg); transform-origin: top right; } .pub-stamp .lab { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber-ink); margin-bottom: 0.35rem; } .pub-stamp .dt { font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1; letter-spacing: -0.025em; color: var(--ink); } .pub-stamp .dt em { font-style: italic; color: var(--amber); font-weight: 500; } @media (max-width: 940px) { .pub-stamp { top: 0; right: 0; transform: rotate(6deg); } } /* ───────────────────────── BOOK COVER ───────────────────────── */ /* Wrapper provides 3D tilt, depth, spine, and paper-edge highlight. The actual cover art is a raster image referenced via . */ .cover-rig { position: relative; width: min(360px, 92%); aspect-ratio: 5/7.3; transform-style: preserve-3d; transform: rotateY(-6deg) rotateX(2deg); transition: transform 0.6s cubic-bezier(0.2,1,0.3,1); border-radius: 1px; box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 30px 60px -22px rgba(22, 32, 46, 0.55), 0 60px 100px -40px rgba(22, 32, 46, 0.35); } .cover-rig:hover { transform: rotateY(-2deg) rotateX(0deg); } /* Spine slice on the left, faking book thickness */ .cover-rig::before { content: ''; position: absolute; left: -9px; top: 4px; bottom: 4px; width: 9px; background: linear-gradient(90deg, #060A12, var(--ink-2)); transform: skewY(-3deg); transform-origin: top right; box-shadow: -1px 0 0 rgba(0,0,0,0.45); border-radius: 1px 0 0 1px; z-index: 0; } /* Faint paper-edge highlight on the right */ .cover-rig::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, rgba(250, 247, 240, 0.16), transparent); pointer-events: none; z-index: 2; } .cover-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px; position: relative; z-index: 1; } /* ───────────────────────── SECTION HEADER ───────────────────────── */ .sec-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: end; margin-bottom: clamp(2.4rem, 5vw, 4rem); } .sec-head .num { font-family: var(--serif); font-weight: 600; font-size: clamp(3rem, 6vw, 5rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--amber); } .band--ink .sec-head .num { color: var(--amber); } .band--amber .sec-head .num { color: var(--ink); } .sec-head h2 { font-family: var(--serif); font-weight: 600; font-size: var(--display-2); line-height: 0.98; letter-spacing: -0.03em; margin: 0; color: inherit; } .sec-head h2 em { font-style: italic; font-weight: 400; color: var(--amber); } .band--amber .sec-head h2 em { color: var(--paper); } /* ───────────────────────── SECTION 01 — THE BOOK ───────────────────────── */ .book-spread { display: grid; grid-template-columns: 1fr; gap: clamp(2.4rem, 5vw, 4rem); align-items: start; } @media (min-width: 920px) { .book-spread { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 6vw, 5rem); } } .book-spread .cover-rig { transform: rotate(-1.5deg); width: min(330px, 84%); margin: 0 auto; } .book-spread .cover-rig:hover { transform: rotate(0deg) translateY(-4px); } .book-meta h3 { font-family: var(--serif); font-weight: 600; font-style: italic; font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: -0.025em; margin: 0 0 0.4rem; color: var(--ink); } .book-meta .byline { font-family: var(--sans); font-weight: 500; font-size: 0.95rem; color: var(--ink-soft); letter-spacing: 0; margin: 0 0 1.8rem; } .book-meta .byline strong { color: var(--ink); font-weight: 700; } .book-meta p { font-size: 1.1rem; line-height: 1.55; color: var(--ink-soft); } .book-meta p em { font-style: italic; color: var(--ink); } .book-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.8rem 0 2.4rem; } /* Bibliographic grid — replaces the mono catalog-card */ .biblio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 1px; } @media (min-width: 640px) { .biblio { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .biblio .cell { background: var(--paper); padding: 1rem 1.1rem 1.05rem; } .biblio .cell .k { font-family: var(--sans); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.3rem; } .biblio .cell .v { font-family: var(--serif); font-size: 1rem; font-weight: 500; color: var(--ink); line-height: 1.45; letter-spacing: -0.005em; } .biblio .cell .v em { font-style: italic; } /* ── Formats & prices: a typographic list, not a card grid ── */ .formats { margin-top: 2.6rem; padding-top: 2rem; border-top: 2px solid var(--ink); } .formats-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1.6rem; margin-bottom: 1.6rem; flex-wrap: wrap; } .formats-head h3 { font-family: var(--serif); font-weight: 600; font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; margin: 0; color: var(--ink); } .formats-head p { font-family: var(--sans); font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 30rem; } .format-row { display: grid; grid-template-columns: 1fr; gap: 0.6rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; } @media (min-width: 680px) { .format-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) auto auto; gap: 1.8rem; padding: 1.3rem 0; } } .format-row:first-of-type { border-top: 1px solid var(--rule); } .format-row .fmt-name { font-family: var(--serif); font-weight: 600; font-style: italic; font-size: 1.2rem; color: var(--ink); letter-spacing: -0.015em; } .format-row .fmt-desc { font-family: var(--serif); font-size: 0.95rem; color: var(--ink-soft); line-height: 1.45; } .format-row .fmt-price { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; } .format-row .fmt-price small { display: inline-block; margin-left: 0.2rem; font-family: var(--sans); font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; } .format-row .fmt-cta a { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-weight: 600; font-size: 0.86rem; color: var(--ink); text-decoration-color: var(--amber); white-space: nowrap; } .format-row .fmt-cta a:hover { color: var(--amber); } /* Featured row: bundle — gets a stronger background, no card border tricks */ .format-row--feat { background: var(--paper-2); border-bottom-color: var(--amber-hairline, #E8C58A); margin: 0 -0.9rem; padding-left: 0.9rem; padding-right: 0.9rem; position: relative; } .format-row--feat::after { content: 'Save $19'; position: absolute; top: 0.7rem; right: 0.9rem; font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-3); background: var(--paper); padding: 0.18rem 0.5rem; border: 1px solid var(--amber-hairline, #E8C58A); } @media (min-width: 680px) { .format-row--feat::after { display: none; } } .format-row--feat .fmt-name::before { content: 'Best value · '; font-family: var(--sans); font-weight: 700; font-style: normal; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-3); vertical-align: 0.18em; margin-right: 0.3rem; } /* ───────────────────────── SECTION 02 — WHY (INK BAND) ───────────────────────── */ .why-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; } @media (min-width: 880px) { .why-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(3rem, 5vw, 4.5rem); } } .pull { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--paper); margin: 0 0 1.6rem; max-width: 24ch; } .pull::before { content: '\201C'; display: inline-block; color: var(--amber); margin-right: 0.1em; font-style: normal; } .why-body p { font-size: 1.1rem; line-height: 1.65; color: rgba(250, 247, 240, 0.84); max-width: 38rem; } .attrib { margin-top: 2rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; font-family: var(--sans); font-size: 0.86rem; color: var(--paper); letter-spacing: 0; } .attrib .bar { display: block; width: 28px; height: 1px; background: var(--amber); } .attrib .who { font-weight: 600; } .attrib .role { color: rgba(250, 247, 240, 0.62); } /* Two-column commitment list (replaces dropcap publish/don't-publish) */ .commit { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 0.5rem; } @media (min-width: 720px) { .commit { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } .commit .col h3 { font-family: var(--sans); font-weight: 700; font-size: 0.88rem; letter-spacing: 0.04em; text-transform: none; color: var(--paper); margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(250, 247, 240, 0.18); } .commit .col h3 .ix { display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.05rem; color: var(--amber); margin-right: 0.5rem; } .commit .col--no h3 .ix { color: rgba(250, 247, 240, 0.55); } .commit ul { list-style: none; padding: 0; margin: 0; } .commit li { font-family: var(--serif); font-size: 1rem; line-height: 1.5; color: rgba(250, 247, 240, 0.82); padding: 0.7rem 0; border-bottom: 1px solid rgba(250, 247, 240, 0.08); } .commit li:last-child { border-bottom: 0; } .commit .col--no li { color: rgba(250, 247, 240, 0.62); text-decoration: line-through; text-decoration-color: rgba(250, 247, 240, 0.32); text-decoration-thickness: 1px; } /* ───────────────────────── SECTION 03 — THE LIST ───────────────────────── */ .list { margin-top: 0; border-top: 2px solid var(--ink); } /* The debut is large and dominant. Forthcoming titles are smaller, denser. */ .list-item { display: grid; grid-template-columns: 1fr; gap: 1.4rem; padding: 2.6rem 0; border-bottom: 1px solid var(--rule); align-items: start; } @media (min-width: 820px) { .list-item { grid-template-columns: 8rem minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.4rem; } } .list-item .li-num { font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 2rem; letter-spacing: -0.02em; color: var(--amber); line-height: 1; } .list-item .li-num span { display: block; margin-top: 0.4rem; font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .list-item .li-title { font-family: var(--serif); font-weight: 600; font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5rem; color: var(--ink); } .list-item .li-meta { font-family: var(--sans); font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 0.8rem; letter-spacing: 0.005em; } .list-item .li-deck { font-family: var(--serif); font-size: 1rem; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 42rem; } .list-item .li-side { font-family: var(--sans); font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; } .list-item .li-side .status { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 0.5rem; padding: 0.3rem 0.65rem; background: var(--paper-2); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); border-radius: 1px; margin-bottom: 0.7rem; } .list-item .li-side .status .pip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .list-item .li-side .status--press { background: var(--amber); color: var(--paper); } .list-item .li-side .status--dev { color: var(--amber-3); } .list-item .li-side .status--acq { color: var(--sage); } .list-item .li-side a { color: var(--ink); } /* Make the first list item (debut) larger */ .list-item--debut .li-title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); } .list-item--debut .li-deck { font-size: 1.08rem; } /* ───────────────────────── SECTION 04 — THE LAUNCH (AMBER DRENCHED) ───────────────────────── */ .launch { position: relative; padding: clamp(5rem, 9vw, 8rem) 0 clamp(4rem, 7vw, 6rem); background: var(--amber); color: var(--amber-ink); overflow: hidden; } .launch::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(255,255,255,0.18), transparent 50%), radial-gradient(ellipse at bottom left, rgba(42, 25, 8, 0.18), transparent 55%); pointer-events: none; } .launch-inner { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: end; } @media (min-width: 920px) { .launch-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem); } } .launch-lab { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.05rem; letter-spacing: 0.005em; color: var(--amber-ink); margin: 0 0 1.6rem; display: inline-grid; grid-template-columns: auto auto; gap: 0.8rem; align-items: center; } .launch-lab .rule { display: inline-block; width: 40px; height: 1.5px; background: var(--amber-ink); } /* The big date numeral set */ .launch-date { font-family: var(--serif); font-weight: 700; font-size: clamp(5rem, 16vw, 14rem); line-height: 0.82; letter-spacing: -0.05em; margin: 0 0 1rem; color: var(--amber-ink); font-variant-numeric: lining-nums tabular-nums; display: flex; align-items: baseline; gap: 0.04em; } .launch-date .dot { display: inline-block; width: 0.16em; height: 0.16em; border-radius: 50%; background: var(--paper); align-self: end; margin-bottom: 0.22em; flex-shrink: 0; } .launch-spell { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--paper); margin: 0; max-width: 22ch; } .launch-aside { font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; color: var(--amber-ink); max-width: 32rem; } .launch-aside p { color: var(--amber-ink); max-width: 36rem; } .launch-aside strong { color: var(--paper); font-weight: 600; } .launch-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; } /* Notify form */ .notify { display: grid; grid-template-columns: 1fr auto; gap: 0; background: var(--paper); border-radius: 1px; margin-top: 1.4rem; max-width: 28rem; border: 1.5px solid var(--ink); } .notify input[type="email"] { font-family: var(--sans); font-size: 0.95rem; border: 0; background: transparent; padding: 0.95rem 1rem; color: var(--ink); outline: none; min-width: 0; } .notify input[type="email"]::placeholder { color: var(--ink-mute); } .notify input[type="email"]:focus-visible { background: var(--paper-2); } .notify button { font-family: var(--sans); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.04em; padding: 0.95rem 1.2rem; background: var(--ink); color: var(--paper); border: 0; cursor: pointer; transition: background 0.18s; } .notify button:hover { background: var(--amber-ink); } .notify-note { font-family: var(--sans); font-size: 0.88rem; line-height: 1.5; color: var(--amber-ink); margin-top: 0.6rem; max-width: 28rem; } .notify-note a { color: var(--amber-ink); text-decoration-color: var(--paper); font-weight: 600; } .notify-note a:hover { color: var(--paper); } /* Form status (aria-live) */ .notify-status { font-family: var(--sans); font-size: 0.86rem; font-weight: 600; margin-top: 0.8rem; min-height: 1.2rem; color: var(--paper); display: none; } .notify-status.is-success { display: block; color: var(--paper); background: var(--amber-ink); padding: 0.65rem 0.9rem; border-radius: 1px; } .notify-status.is-error { display: block; color: var(--amber-ink); background: var(--paper); border: 1.5px solid var(--terra); padding: 0.65rem 0.9rem; border-radius: 1px; } .notify[data-state="sent"] input, .notify[data-state="sent"] button { opacity: 0.55; pointer-events: none; } /* ───────────────────────── SECTION 05 — WORKING WITH THE PRESS ───────────────────────── */ .working { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 940px) { .working { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4rem; } } .contact-list { border-top: 1px solid var(--rule); } .contact-row { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1.4rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .contact-row .who { font-family: var(--sans); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.06em; color: var(--amber-3); } .contact-row .desc { font-family: var(--serif); font-size: 1rem; line-height: 1.45; color: var(--ink-soft); } .contact-row .desc strong { color: var(--ink); font-weight: 600; } .contact-row .mail { font-family: var(--mono); font-size: 0.84rem; color: var(--ink); text-decoration-color: var(--amber); } @media (max-width: 720px) { .contact-row { grid-template-columns: 1fr; gap: 0.4rem; padding: 1.2rem 0; } } .submissions-card { padding: 2rem; background: var(--ink); color: var(--paper); position: relative; } .submissions-card::before { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 60px solid var(--amber); border-left: 60px solid transparent; } .submissions-card h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.8rem; line-height: 1.15; margin: 0 0 0.8rem; color: var(--paper); letter-spacing: -0.02em; max-width: 14ch; } .submissions-card p { font-family: var(--serif); font-size: 0.98rem; line-height: 1.55; color: rgba(250, 247, 240, 0.78); margin-bottom: 1.6rem; } .subm-list { list-style: none; padding: 0; margin: 0 0 2rem; counter-reset: s; } .subm-list li { counter-increment: s; position: relative; padding: 0.7rem 0 0.7rem 2.6rem; font-family: var(--serif); font-size: 0.98rem; line-height: 1.5; color: rgba(250, 247, 240, 0.88); border-top: 1px solid rgba(250, 247, 240, 0.1); } .subm-list li:last-child { border-bottom: 1px solid rgba(250, 247, 240, 0.1); } .subm-list li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0.78rem; font-family: var(--sans); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--amber); } .submissions-card .reply-note { font-family: var(--sans); font-size: 0.9rem; line-height: 1.5; color: rgba(250, 247, 240, 0.78); margin-bottom: 1.2rem; } /* ───────────────────────── FOOTER ───────────────────────── */ .foot { background: var(--ink); color: rgba(250, 247, 240, 0.8); padding: clamp(4rem, 7vw, 6rem) 0 2.4rem; } .foot a { color: var(--paper); text-decoration-color: rgba(201, 117, 21, 0.6); } .foot a:hover { color: var(--amber); } .foot-top { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 3rem; } @media (min-width: 880px) { .foot-top { grid-template-columns: 1.4fr 1fr 1fr; gap: 3.5rem; } } .foot-mark { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; } .foot-mark .mark-cube { display: block; width: 2.8rem; height: 2.8rem; } .foot-mark .mark-cube .ink { fill: var(--paper); } .foot-mark .mark-cube .acc { fill: var(--amber); } .foot-mark .name { font-family: var(--serif); font-weight: 600; font-style: italic; font-size: 1.4rem; letter-spacing: -0.015em; color: var(--paper); } .foot-mark .name small { display: block; font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); margin-top: 0.2rem; } .foot-blurb { font-family: var(--serif); font-size: 0.96rem; line-height: 1.55; color: rgba(250, 247, 240, 0.7); max-width: 30rem; } .foot-col h4 { font-family: var(--sans); font-weight: 700; font-size: 0.88rem; letter-spacing: 0.02em; text-transform: none; color: var(--paper); margin: 0 0 1rem; } .foot-col ul { list-style: none; padding: 0; margin: 0; } .foot-col li { font-family: var(--serif); font-size: 0.96rem; margin-bottom: 0.55rem; line-height: 1.4; } .foot-bottom { display: grid; grid-template-columns: 1fr; gap: 1.2rem; padding-top: 2rem; border-top: 1px solid rgba(250, 247, 240, 0.12); font-family: var(--sans); font-size: 0.88rem; line-height: 1.55; color: rgba(250, 247, 240, 0.85); } @media (min-width: 720px) { .foot-bottom { grid-template-columns: 1fr auto; align-items: center; } } .foot-bottom .legal { line-height: 1.5; } .foot-bottom .legal strong { color: var(--paper); font-weight: 600; } .foot-bottom .disclaim { font-size: 0.86rem; line-height: 1.55; color: rgba(250, 247, 240, 0.78); max-width: 36rem; font-style: italic; } /* ───────────────────────── A11Y ───────────────────────── */ .skip-link { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; font-family: var(--sans); font-size: 0.86rem; text-decoration: none; z-index: 100; } .skip-link:focus { left: 1rem; top: 1rem; outline: 2px solid var(--amber); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ───────────────────────── Reduced motion ───────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .cover-rig { transform: none !important; } } /* ───────────────────────── Tighter mobile ───────────────────────── Below 640px: size + density adjustments. Below 480px: tiny-screen overflow safety. Throughout mobile: 44×44 tap targets per WCAG 2.5.5. */ @media (max-width: 640px) { body { font-size: 17px; } .band { padding: 4.5rem 0; } .hero { padding: 2rem 0 3rem; } .hero-spec { grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; max-width: 22rem; } .sec-head { grid-template-columns: 1fr; gap: 0.6rem; align-items: start; } .sec-head .num { font-size: 3.2rem; } .biblio { grid-template-columns: 1fr 1fr; } .list-item { padding: 2rem 0; } .submissions-card { padding: 1.5rem; } .submissions-card::before { border-top-width: 40px; border-left-width: 40px; } /* Tap targets — every interactive element ≥ 44px on touch screens. */ .btn { min-height: 44px; padding: 0.85rem 1.4rem; } .format-row .fmt-cta a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.45rem 0; } .contact-row .mail { display: inline-flex; align-items: center; min-height: 44px; padding: 0.45rem 0; } .foot-col li { margin-bottom: 0; } .foot-col li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.45rem 0; } } @media (max-width: 480px) { /* Hero spec strip — 1-col on the smallest screens so the 22rem max-width doesn't overflow at 320px viewports. */ .hero-spec { grid-template-columns: 1fr; max-width: 18rem; gap: 0.9rem; } /* Launch date numeral — ensure dots don't collide at the smallest size. */ .launch-date { letter-spacing: -0.04em; gap: 0.06em; } /* Mobile menu panel — keep within viewport at 320px. */ .menu-panel { min-width: calc(100vw - 2.8rem); max-width: calc(100vw - 2.8rem); } }