/* =====================================================================
AMSB · amillionstylesboxing.com
Design system inherited from the AMSB Credibility Dossier.
Black background, red primary accent, gold secondary accent.
Bebas Neue display, IBM Plex Mono body.
===================================================================== */
/* Fonts are loaded via + in index.html for faster paint. */
:root {
--bg-deep: #050505;
--bg: #0a0a0a;
--bg-elev: #0f0f0f;
--bg-card: #141414;
--fg: #f5f5f5;
--fg-dim: #ddd;
--fg-muted: #888;
--fg-faint: #555;
--line: #2a2a2a;
--line-soft: #1a1a1a;
--red: #E8001E;
--red-deep: #b00018;
--gold: #c8a84b;
--gold-glow: #e8c970;
--cream: #e8e0d0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
background: var(--bg-deep);
color: var(--fg);
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }
body {
background:
radial-gradient(ellipse 900px 700px at 50% 0%, #181818 0%, var(--bg-deep) 70%),
var(--bg-deep);
min-height: 100vh;
overflow-x: hidden;
}
/* ============ TYPOGRAPHY ============ */
h1, h2, h3, h4 {
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--fg);
line-height: 1;
}
a { color: var(--gold); text-decoration: none; transition: color 0.15s ease; }
a:hover, a:focus { color: var(--gold-glow); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
p { margin: 0 0 1.4em; max-width: 62ch; }
::selection { background: var(--red); color: var(--fg); }
/* ============ LAYOUT ============ */
.wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 28px;
}
.section {
padding: 120px 0;
border-bottom: 1px solid var(--line-soft);
}
.section:last-of-type { border-bottom: none; }
.section .label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.36em;
color: var(--red);
text-transform: uppercase;
margin-bottom: 32px;
font-weight: 600;
}
.kicker {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.4em;
color: var(--fg-muted);
text-transform: uppercase;
font-weight: 500;
}
/* ============ NAV ============ */
.nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(5, 5, 5, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line-soft);
}
.nav .wrap {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 18px;
padding-bottom: 18px;
}
.nav .mark {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.3rem;
letter-spacing: 0.24em;
color: var(--fg);
}
.nav .mark .system-name {
display: block;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.5rem;
letter-spacing: 0.32em;
color: var(--fg-faint);
margin-top: 2px;
font-weight: 400;
}
.nav ul {
list-style: none;
display: flex;
gap: 32px;
}
.nav a {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
font-weight: 500;
}
.nav a:hover { color: var(--gold); }
.nav a.cta { color: var(--red); }
.nav a.cta:hover { color: var(--gold); }
/* ============ HERO ============ */
.hero {
padding: 140px 0 110px;
text-align: center;
border-bottom: 1px solid var(--line-soft);
}
.hero .powered {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.4em;
color: var(--fg-faint);
text-transform: uppercase;
margin-bottom: 18px;
font-weight: 500;
}
.hero .wordmark {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(5rem, 20vw, 14rem);
letter-spacing: 0.08em;
line-height: 0.85;
color: var(--fg);
display: block;
margin: 0 0 22px;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hero .system-name {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.82rem;
letter-spacing: 0.42em;
color: var(--gold);
text-transform: uppercase;
font-weight: 500;
margin-bottom: 44px;
}
.hero .rule {
width: 80px;
height: 1px;
background: linear-gradient(to right, transparent, var(--red), transparent);
margin: 0 auto 40px;
}
.hero .coach {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.6rem, 3.4vw, 2.4rem);
letter-spacing: 0.22em;
color: var(--fg);
line-height: 1;
}
.hero .credential {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.68rem;
letter-spacing: 0.28em;
color: var(--fg-muted);
text-transform: uppercase;
margin-top: 14px;
font-weight: 400;
}
@media (max-width: 560px) {
.hero .system-name { font-size: 0.7rem; letter-spacing: 0.32em; }
.hero .credential { font-size: 0.6rem; letter-spacing: 0.22em; line-height: 1.6; }
}
/* ============ THESIS ============ */
.thesis {
padding: 160px 0;
text-align: center;
}
.thesis .line {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.2rem, 6vw, 4.5rem);
letter-spacing: 0.04em;
line-height: 1;
color: var(--fg);
}
.thesis .line em {
font-style: normal;
color: var(--red);
}
.thesis .attribution {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.32em;
color: var(--fg-faint);
text-transform: uppercase;
margin-top: 48px;
font-weight: 400;
}
/* ============ WHO ============ */
.who {
padding: 120px 0;
}
.who .grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
align-items: start;
}
.who h2 {
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: 0.08em;
color: var(--fg);
line-height: 1;
}
.who .body p {
font-size: 1.05rem;
line-height: 1.75;
color: var(--fg-dim);
max-width: 60ch;
}
.who .body p:first-of-type::first-letter {
font-family: 'Bebas Neue', sans-serif;
float: left;
font-size: 4.5rem;
line-height: 0.85;
padding: 6px 16px 0 0;
color: var(--red);
}
.who .stat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--line);
}
.who .stat .num {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.6rem;
color: var(--fg);
letter-spacing: 0.04em;
line-height: 1;
}
.who .stat .lbl {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.22em;
color: var(--fg-muted);
text-transform: uppercase;
margin-top: 10px;
font-weight: 500;
}
/* ============ ANCHOR (feature card linking to System / Essay) ============ */
.anchor {
padding: 120px 0;
position: relative;
}
.anchor .card {
background: var(--bg-elev);
border-left: 4px solid var(--red);
padding: 56px 64px;
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: center;
}
.anchor.secondary .card {
border-left-color: var(--gold);
padding: 44px 56px;
}
.anchor .card .kicker { margin-bottom: 14px; }
.anchor .card h3 {
font-size: clamp(2rem, 4.5vw, 3.4rem);
letter-spacing: 0.06em;
color: var(--fg);
margin-bottom: 18px;
line-height: 1;
}
.anchor.secondary .card h3 {
font-size: clamp(1.6rem, 3.6vw, 2.6rem);
}
.anchor .card p {
font-size: 1rem;
color: var(--fg-dim);
max-width: 56ch;
margin: 0;
}
.anchor .card .arrow {
font-family: 'Bebas Neue', sans-serif;
font-size: 1rem;
letter-spacing: 0.22em;
color: var(--gold);
text-transform: uppercase;
white-space: nowrap;
padding-left: 24px;
border-left: 1px solid var(--line);
}
.anchor.secondary .card .arrow { color: var(--gold); }
/* ============ ELSEWHERE ============ */
.elsewhere {
padding: 120px 0;
}
.elsewhere h2 {
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: 0.08em;
margin-bottom: 56px;
text-align: center;
}
.elsewhere .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
background: var(--line-soft);
border: 1px solid var(--line-soft);
}
@media (max-width: 760px) {
.elsewhere .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.elsewhere .grid { grid-template-columns: 1fr; }
}
.elsewhere .item {
background: var(--bg);
padding: 36px 28px 32px;
display: flex;
flex-direction: column;
gap: 14px;
transition: background 0.15s ease;
}
.elsewhere .item:hover { background: var(--bg-elev); }
.elsewhere .item .platform {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.3em;
color: var(--gold);
text-transform: uppercase;
font-weight: 600;
}
.elsewhere .item h4 {
font-size: 1.4rem;
letter-spacing: 0.04em;
color: var(--fg);
line-height: 1.1;
}
.elsewhere .item p {
font-size: 0.85rem;
color: var(--fg-muted);
margin: 0;
flex: 1;
}
.elsewhere .item .open {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.28em;
color: var(--red);
text-transform: uppercase;
margin-top: 8px;
font-weight: 600;
}
.elsewhere .item:hover .open { color: var(--gold); }
/* ============ PULL QUOTE ============ */
.quote {
padding: 180px 0;
text-align: center;
}
.quote .mark {
font-family: 'Bebas Neue', sans-serif;
font-size: 6rem;
color: var(--red);
line-height: 0.5;
display: block;
margin-bottom: 20px;
letter-spacing: 0;
}
.quote .line {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.8rem, 4.5vw, 3.2rem);
letter-spacing: 0.04em;
line-height: 1.1;
color: var(--cream);
max-width: 18ch;
margin: 0 auto;
}
.quote .source {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.32em;
color: var(--fg-faint);
text-transform: uppercase;
margin-top: 40px;
font-weight: 400;
}
/* ============ FOOTER ============ */
footer {
background: #030303;
padding: 80px 0 36px;
border-top: 1px solid var(--line);
}
footer .grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 56px;
margin-bottom: 56px;
}
footer h5 {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.32em;
color: var(--gold);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 18px;
}
footer p, footer li {
font-size: 0.85rem;
color: var(--fg-muted);
line-height: 1.7;
}
footer ul { list-style: none; }
footer a { color: var(--fg-dim); }
footer a:hover { color: var(--gold); }
footer form {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 460px;
}
footer form .row {
display: flex;
gap: 12px;
}
footer form .radio {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 4px;
}
footer form label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.22em;
color: var(--fg-muted);
text-transform: uppercase;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
footer form input[type="radio"] { accent-color: var(--red); }
footer form input[type="text"],
footer form input[type="email"],
footer form textarea {
background: var(--bg-elev);
border: 1px solid var(--line);
color: var(--fg);
padding: 10px 14px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
border-radius: 2px;
width: 100%;
}
footer form input:focus,
footer form textarea:focus {
outline: none;
border-color: var(--gold);
}
footer form textarea { min-height: 96px; resize: vertical; }
footer form button {
background: var(--red);
color: var(--fg);
border: none;
padding: 12px 24px;
font-family: 'Bebas Neue', sans-serif;
font-size: 0.9rem;
letter-spacing: 0.22em;
cursor: pointer;
border-radius: 2px;
transition: background 0.15s ease;
align-self: flex-start;
}
footer form button:hover { background: var(--gold); color: var(--bg-deep); }
footer .colophon {
border-top: 1px solid var(--line);
padding-top: 28px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--fg-faint);
}
footer .colophon a { color: var(--fg-faint); }
footer .colophon a:hover { color: var(--gold); }
footer .colophon .tm {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.18em;
color: var(--fg-faint);
}
/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
.who .grid { grid-template-columns: 1fr; gap: 36px; }
.who .stat-row { grid-template-columns: 1fr 1fr; }
.anchor .card { grid-template-columns: 1fr; padding: 40px 36px; gap: 24px; }
.anchor .card .arrow { border-left: none; border-top: 1px solid var(--line); padding: 18px 0 0; }
footer .grid { grid-template-columns: 1fr; gap: 40px; }
.nav ul { gap: 20px; }
.section { padding: 80px 0; }
.hero { padding: 90px 0 70px; }
.thesis { padding: 100px 0; }
.quote { padding: 110px 0; }
}
@media (max-width: 560px) {
.wrap { padding: 0 22px; }
.nav .mark { font-size: 1.1rem; }
.nav ul { gap: 14px; }
.nav a { font-size: 0.62rem; letter-spacing: 0.18em; }
.nav a.cta-label { display: none; }
}
/* =====================================================================
DOCUMENT PAGES (long-form: System Document, Architecture Essay, Record)
===================================================================== */
body.doc-page .wrap-narrow,
.doc .wrap {
max-width: 760px;
margin: 0 auto;
padding: 0 28px;
}
/* ============ DOC MASTHEAD ============ */
.doc-masthead {
padding: 120px 0 80px;
text-align: center;
border-bottom: 1px solid var(--line-soft);
}
.doc-masthead .kicker {
color: var(--gold);
margin-bottom: 22px;
}
.doc-masthead h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3.5rem, 9vw, 7rem);
letter-spacing: 0.06em;
line-height: 0.92;
color: var(--fg);
margin-bottom: 28px;
font-weight: 400;
}
.doc-masthead .doc-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.2em;
color: var(--fg-muted);
text-transform: uppercase;
max-width: 60ch;
margin: 0 auto 32px;
line-height: 1.7;
font-weight: 400;
}
.doc-masthead .rule {
width: 80px;
height: 1px;
background: linear-gradient(to right, transparent, var(--red), transparent);
margin: 0 auto 24px;
}
.doc-masthead .byline {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.22em;
color: var(--fg-muted);
text-transform: uppercase;
font-weight: 500;
}
/* ============ TABLE OF CONTENTS ============ */
.doc-toc {
padding: 70px 0 80px;
background: var(--bg);
border-bottom: 1px solid var(--line-soft);
}
.doc-toc .wrap { max-width: 760px; }
.doc-toc .kicker {
color: var(--red);
margin-bottom: 28px;
letter-spacing: 0.42em;
font-size: 0.7rem;
font-weight: 600;
}
.doc-toc ol {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--line-soft);
}
.doc-toc li {
border-bottom: 1px solid var(--line-soft);
}
.doc-toc a {
display: grid;
grid-template-columns: 60px 1fr;
gap: 24px;
padding: 22px 4px;
color: var(--fg-dim);
transition: color 0.15s ease, background 0.15s ease;
align-items: baseline;
}
.doc-toc a:hover { color: var(--gold); background: rgba(200, 168, 75, 0.04); }
.doc-toc .n {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.2em;
color: var(--red);
font-weight: 600;
}
.doc-toc .t {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.25rem;
letter-spacing: 0.08em;
line-height: 1.15;
}
/* ============ DOC SECTIONS (article body) ============ */
.doc-section {
padding: 100px 0 80px;
border-bottom: 1px solid var(--line-soft);
}
.doc-section:last-of-type { border-bottom: none; }
.doc-section .section-marker {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.42em;
color: var(--red);
text-transform: uppercase;
margin-bottom: 28px;
font-weight: 600;
}
.doc-section h2 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.4rem, 5.4vw, 4rem);
letter-spacing: 0.05em;
color: var(--fg);
line-height: 0.95;
margin-bottom: 44px;
font-weight: 400;
}
.doc-section .lede {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.05rem;
line-height: 1.7;
color: var(--gold);
margin-bottom: 36px;
font-weight: 400;
max-width: 60ch;
}
.doc-section p {
font-family: 'IBM Plex Mono', monospace;
font-size: 1rem;
line-height: 1.85;
color: var(--fg-dim);
margin-bottom: 1.5em;
max-width: 68ch;
font-weight: 400;
}
.doc-section a {
color: var(--gold);
border-bottom: 1px solid rgba(200, 168, 75, 0.35);
transition: border-color 0.15s ease, color 0.15s ease;
}
.doc-section a:hover {
color: var(--gold-glow);
border-color: var(--gold-glow);
}
.doc-section strong {
color: var(--fg);
font-weight: 600;
}
/* ============ LAYERS (Section 1's six layer entries) ============ */
.layers {
margin: 56px 0 56px;
display: flex;
flex-direction: column;
gap: 12px;
}
.layer {
background: var(--bg-elev);
border-left: 4px solid var(--gold);
padding: 36px 40px;
display: grid;
grid-template-columns: 80px 1fr;
gap: 32px;
align-items: start;
}
.layer:nth-child(odd) { border-left-color: var(--red); }
.layer .layer-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 4rem;
color: var(--gold);
line-height: 0.8;
letter-spacing: 0;
}
.layer:nth-child(odd) .layer-num { color: var(--red); }
.layer h3 {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.8rem;
letter-spacing: 0.06em;
color: var(--fg);
line-height: 1;
margin-bottom: 6px;
font-weight: 400;
}
.layer .layer-sub {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.24em;
color: var(--fg-muted);
text-transform: uppercase;
margin-bottom: 18px;
font-weight: 500;
}
.layer p { margin: 0; max-width: none; }
/* ============ SUBSECTIONS ============ */
.subsection {
margin: 48px 0;
padding-top: 32px;
border-top: 1px solid var(--line-soft);
}
.subsection:first-of-type { padding-top: 0; border-top: none; }
.subsection h4 {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.28em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 20px;
font-weight: 600;
line-height: 1.5;
}
/* ============ PULL QUOTES & SIGNED QUOTES ============ */
blockquote.pull {
border-left: 3px solid var(--red);
background: rgba(232, 0, 30, 0.04);
padding: 32px 36px;
margin: 48px 0;
max-width: 68ch;
}
blockquote.pull p {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
letter-spacing: 0.04em;
line-height: 1.2;
color: var(--cream);
margin: 0;
max-width: none;
}
blockquote.pull.mono p {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.05rem;
letter-spacing: 0;
line-height: 1.7;
font-weight: 500;
color: var(--gold);
}
blockquote.signed {
border-left: 3px solid var(--gold);
background: rgba(200, 168, 75, 0.05);
padding: 36px 40px;
margin: 56px 0;
max-width: 68ch;
}
blockquote.signed p {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.05rem;
line-height: 1.8;
color: var(--cream);
margin: 0 0 18px;
font-style: italic;
max-width: none;
}
blockquote.signed cite {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.24em;
color: var(--gold);
text-transform: uppercase;
font-style: normal;
font-weight: 600;
}
/* ============ FIVE HABITS (Section 3 ordered list) ============ */
.habits-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.6rem;
letter-spacing: 0.08em;
color: var(--fg);
margin: 64px 0 24px;
padding-top: 32px;
border-top: 1px solid var(--line-soft);
font-weight: 400;
}
.habits {
list-style: none;
counter-reset: habit;
padding: 0;
margin: 32px 0 0;
}
.habits li {
counter-increment: habit;
position: relative;
padding-left: 80px;
margin-bottom: 48px;
}
.habits li::before {
content: counter(habit);
position: absolute;
left: 0;
top: -8px;
font-family: 'Bebas Neue', sans-serif;
font-size: 3.2rem;
color: var(--red);
line-height: 1;
letter-spacing: 0;
}
.habits h5 {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.4rem;
letter-spacing: 0.04em;
color: var(--fg);
line-height: 1.1;
margin-bottom: 14px;
font-weight: 400;
}
/* ============ MATRIX (Section 5 six-layer comparison) ============ */
.matrix {
margin: 36px 0;
border-top: 1px solid var(--line);
}
.matrix-row {
display: grid;
grid-template-columns: 180px 1fr;
gap: 32px;
padding: 28px 0;
border-bottom: 1px solid var(--line);
}
.matrix-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.24em;
color: var(--gold);
text-transform: uppercase;
font-weight: 600;
padding-top: 4px;
}
.matrix-body p {
margin: 0;
max-width: none;
}
/* ============ CLOSING SIGNOFF ============ */
.doc-section.closing {
padding: 100px 0 140px;
text-align: left;
}
.doc-section.closing .signoff {
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--line-soft);
}
.doc-section.closing .signature {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.8rem;
letter-spacing: 0.1em;
color: var(--gold);
margin-bottom: 8px;
font-weight: 400;
}
.doc-section.closing .signature-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.22em;
color: var(--fg-muted);
text-transform: uppercase;
font-weight: 500;
}
/* ============ DOC PAGE RESPONSIVE ============ */
@media (max-width: 760px) {
.doc-masthead { padding: 80px 0 60px; }
.doc-toc { padding: 50px 0 60px; }
.doc-toc a { grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 4px; }
.doc-toc .t { font-size: 1.05rem; letter-spacing: 0.06em; }
.doc-section { padding: 70px 0 60px; }
.doc-section h2 { margin-bottom: 32px; }
.layer { grid-template-columns: 1fr; gap: 12px; padding: 28px 26px; }
.layer .layer-num { font-size: 3rem; line-height: 1; }
.habits li { padding-left: 52px; }
.habits li::before { font-size: 2.4rem; }
.matrix-row { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
blockquote.pull, blockquote.signed { padding: 24px 22px; }
}
/* =====================================================================
ESSAY PAGE (Architecture Essay)
===================================================================== */
.essay .wrap {
max-width: 680px;
}
/* ============ ESSAY MASTHEAD ============ */
.essay-masthead {
padding: 140px 0 100px;
text-align: center;
border-bottom: 1px solid var(--line-soft);
}
.essay-masthead .kicker {
color: var(--red);
margin-bottom: 32px;
letter-spacing: 0.42em;
font-size: 0.7rem;
font-weight: 600;
}
.essay-masthead h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3.5rem, 10vw, 8rem);
letter-spacing: 0.04em;
line-height: 0.92;
color: var(--fg);
margin-bottom: 40px;
font-weight: 400;
}
.essay-masthead .rule {
width: 80px;
height: 1px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
margin: 0 auto 28px;
}
.essay-masthead .dateline {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.68rem;
letter-spacing: 0.3em;
color: var(--fg-muted);
text-transform: uppercase;
margin-bottom: 12px;
font-weight: 400;
}
.essay-masthead .byline {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.32em;
color: var(--gold);
text-transform: uppercase;
font-weight: 600;
}
/* ============ ESSAY SECTIONS ============ */
.essay-section {
padding: 90px 0 70px;
}
.essay-section:first-of-type {
padding-top: 110px;
}
.essay-section.closing {
padding: 90px 0 120px;
}
.essay-section .roman {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.6rem;
color: var(--gold);
line-height: 1;
margin-bottom: 14px;
letter-spacing: 0.06em;
}
.essay-section h2 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2rem, 4.5vw, 3.2rem);
letter-spacing: 0.04em;
color: var(--fg);
line-height: 1.05;
margin-bottom: 40px;
font-weight: 400;
}
.essay-section p {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.02rem;
line-height: 1.9;
color: var(--fg-dim);
margin-bottom: 1.6em;
max-width: 64ch;
font-weight: 400;
}
.essay-section p em {
color: var(--cream);
font-style: italic;
}
.essay-section p strong {
color: var(--fg);
font-weight: 600;
}
.essay-section a {
color: var(--gold);
border-bottom: 1px solid rgba(200, 168, 75, 0.35);
transition: color 0.15s ease, border-color 0.15s ease;
}
.essay-section a:hover {
color: var(--gold-glow);
border-color: var(--gold-glow);
}
/* ============ ESSAY QUOTES (architect's voice — indented) ============ */
blockquote.essay-quote {
border-left: 2px solid var(--gold);
padding: 6px 0 6px 28px;
margin: 36px 0 36px 16px;
max-width: 60ch;
}
blockquote.essay-quote p {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.05rem;
line-height: 1.75;
color: var(--cream);
margin: 0;
font-style: italic;
max-width: none;
}
/* ============ ESSAY PULL QUOTES (Barry's own emphasized lines) ============ */
blockquote.essay-pull {
border-left: 3px solid var(--red);
background: rgba(232, 0, 30, 0.04);
padding: 32px 36px;
margin: 48px 0;
max-width: 64ch;
}
blockquote.essay-pull p {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.4rem, 2.8vw, 2rem);
letter-spacing: 0.04em;
line-height: 1.2;
color: var(--cream);
margin: 0;
max-width: none;
}
blockquote.essay-pull p em {
font-style: normal;
color: var(--red);
}
/* ============ ESSAY LIST (Section III bulleted sequence) ============ */
.essay-list {
list-style: none;
padding: 0;
margin: 24px 0 32px;
max-width: 60ch;
}
.essay-list li {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.98rem;
line-height: 1.8;
color: var(--fg-dim);
padding: 8px 0 8px 32px;
position: relative;
border-bottom: 1px solid var(--line-soft);
}
.essay-list li:last-child { border-bottom: none; }
.essay-list li::before {
content: "›";
position: absolute;
left: 0;
color: var(--gold);
font-weight: 600;
}
/* ============ ASIDE (editorial note) ============ */
.essay-section p.aside {
font-size: 0.88rem;
color: var(--fg-muted);
border-left: 2px solid var(--line);
padding-left: 18px;
margin: 32px 0;
max-width: 56ch;
}
.essay-section p.aside em { color: var(--fg-muted); font-style: italic; }
/* ============ ESSAY SIGNOFF ============ */
.essay-section.closing .signoff {
margin-top: 64px;
padding-top: 32px;
border-top: 1px solid var(--line-soft);
}
.essay-section.closing .signature {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.8rem;
letter-spacing: 0.1em;
color: var(--gold);
margin-bottom: 10px;
font-weight: 400;
}
.essay-section.closing .signature-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.68rem;
letter-spacing: 0.22em;
color: var(--fg-muted);
text-transform: uppercase;
font-weight: 500;
}
/* ============ ESSAY NEXT (read-more cards at the end) ============ */
.essay-next {
padding: 80px 0 100px;
background: var(--bg);
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
}
.essay-next .wrap { max-width: 1100px; }
.essay-next .kicker {
color: var(--red);
margin-bottom: 36px;
letter-spacing: 0.42em;
font-size: 0.7rem;
font-weight: 600;
text-align: center;
}
.essay-next .next-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 24px;
}
.essay-next .next-card {
background: var(--bg-elev);
border-left: 4px solid var(--line);
padding: 36px 40px;
display: flex;
flex-direction: column;
gap: 16px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.essay-next .next-card:hover {
background: var(--bg-card);
}
.essay-next .next-card.primary {
border-left-color: var(--gold);
}
.essay-next .next-card.primary:hover {
border-left-color: var(--gold-glow);
}
.essay-next .next-card:not(.primary) {
border-left-color: var(--red);
}
.essay-next .next-card:not(.primary):hover {
border-left-color: var(--gold);
}
.essay-next .next-platform {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.3em;
color: var(--gold);
text-transform: uppercase;
font-weight: 600;
}
.essay-next .next-card h3 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.6rem, 3vw, 2.2rem);
letter-spacing: 0.04em;
color: var(--fg);
line-height: 1.05;
margin: 0;
font-weight: 400;
}
.essay-next .next-card p {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.9rem;
line-height: 1.7;
color: var(--fg-muted);
margin: 0;
flex: 1;
}
.essay-next .next-cta {
font-family: 'Bebas Neue', sans-serif;
font-size: 1rem;
letter-spacing: 0.24em;
color: var(--red);
text-transform: uppercase;
margin-top: 8px;
}
.essay-next .next-card.primary .next-cta { color: var(--gold); }
/* ============ ESSAY PAGE RESPONSIVE ============ */
@media (max-width: 760px) {
.essay-masthead { padding: 80px 0 60px; }
.essay-masthead h1 { margin-bottom: 28px; }
.essay-section { padding: 60px 0 50px; }
.essay-section:first-of-type { padding-top: 70px; }
.essay-section h2 { margin-bottom: 28px; }
blockquote.essay-quote { margin-left: 0; padding-left: 20px; }
blockquote.essay-pull { padding: 22px 22px; }
.essay-next { padding: 60px 0 80px; }
.essay-next .next-grid { grid-template-columns: 1fr; gap: 16px; }
.essay-next .next-card { padding: 28px 26px; }
}
/* =====================================================================
RECORD PAGE (Coaching Record / Credibility Dossier)
===================================================================== */
.record .wrap { max-width: 880px; }
.record-masthead .kicker { color: var(--gold); }
/* ============ TIER KEY ============ */
.tier-key {
margin: 32px 0 8px;
border-top: 1px solid var(--line);
}
.tier-row {
display: grid;
grid-template-columns: 120px 1fr;
gap: 24px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
align-items: baseline;
}
.tier-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.4rem;
letter-spacing: 0.1em;
color: var(--gold);
line-height: 1;
}
.tier-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.95rem;
line-height: 1.7;
color: var(--fg-dim);
}
/* ============ DOSSIER CARDS (fighter then-vs-now) ============ */
.dossier-card {
background: var(--bg-elev);
border-left: 4px solid var(--red);
padding: 32px 36px;
margin: 32px 0;
}
.dossier-card .now-status {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.28em;
color: var(--gold);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 14px;
}
.dossier-card h3 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.6rem, 3vw, 2.2rem);
letter-spacing: 0.04em;
color: var(--fg);
line-height: 1.05;
margin-bottom: 22px;
font-weight: 400;
}
.dossier-card .then-vs-now {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin: 18px 0 22px;
padding: 22px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.dossier-card .thn-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.24em;
color: var(--fg-muted);
text-transform: uppercase;
margin-bottom: 8px;
font-weight: 500;
}
.dossier-card .thn-val {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.92rem;
line-height: 1.7;
color: var(--fg-dim);
}
.dossier-card p {
font-size: 0.98rem;
line-height: 1.8;
margin: 0 0 16px;
max-width: none;
}
.dossier-card .proof-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 18px;
}
.proof {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.58rem;
letter-spacing: 0.18em;
background: rgba(232, 0, 30, 0.10);
color: var(--red);
border: 1px solid var(--red);
padding: 4px 10px;
text-transform: uppercase;
font-weight: 600;
border-radius: 2px;
}
.proof.tier-1 {
background: rgba(200, 168, 75, 0.08);
color: var(--gold);
border-color: var(--gold);
}
/* ============ ADDITIONAL ROSTER ============ */
.additional-roster {
background: var(--bg);
border: 1px solid var(--line-soft);
padding: 28px 32px;
margin: 36px 0 0;
}
.additional-roster h4 {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.28em;
color: var(--gold);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 16px;
}
.additional-roster ul {
list-style: none;
padding: 0;
margin: 0 0 16px;
}
.additional-roster li {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.9rem;
line-height: 1.9;
color: var(--fg-dim);
padding-left: 16px;
position: relative;
}
.additional-roster li::before {
content: "›";
position: absolute;
left: 0;
color: var(--gold);
font-weight: 600;
}
.additional-roster code {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85em;
color: var(--gold);
background: rgba(200, 168, 75, 0.08);
padding: 1px 6px;
border-radius: 2px;
}
.roster-sport {
margin: 24px 0;
padding-top: 18px;
border-top: 1px solid var(--line-soft);
}
.roster-sport-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.32em;
color: var(--red);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 14px;
}
.roster-names {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 6px 24px;
}
.roster-names li {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.88rem;
line-height: 1.6;
color: var(--fg-dim);
padding-left: 14px;
position: relative;
}
.roster-names li::before {
content: "›";
position: absolute;
left: 0;
color: var(--gold);
font-weight: 600;
}
.footnote {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
color: var(--fg-muted);
line-height: 1.7;
margin: 0;
max-width: none;
}
/* ============ RECORD STATS ============ */
.record-stats {
margin: 36px 0 28px;
}
/* ============ SOURCE LISTS (Documentary Record) ============ */
.source-list {
background: var(--bg-elev);
border-left: 3px solid var(--gold);
padding: 24px 32px;
margin: 20px 0;
}
.source-list h5 {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.28em;
color: var(--gold);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 14px;
}
.source-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.source-list li {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.9rem;
line-height: 1.75;
color: var(--fg-dim);
padding: 8px 0 8px 18px;
border-bottom: 1px solid var(--line-soft);
position: relative;
}
.source-list li:last-child { border-bottom: none; }
.source-list li::before {
content: "›";
position: absolute;
left: 0;
color: var(--gold);
font-weight: 600;
}
.source-list li strong { color: var(--fg); }
.source-list code {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85em;
color: var(--gold);
background: rgba(200, 168, 75, 0.08);
padding: 1px 6px;
border-radius: 2px;
}
/* ============ TIMELINE ============ */
.timeline {
margin: 32px 0;
border-top: 1px solid var(--line);
}
.timeline-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 28px;
padding: 20px 0;
border-bottom: 1px solid var(--line);
align-items: baseline;
}
.timeline-year {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.4rem;
letter-spacing: 0.08em;
color: var(--red);
line-height: 1;
}
.timeline-event {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.95rem;
line-height: 1.75;
color: var(--fg-dim);
}
/* ============ COLOPHON SECTION ============ */
.record-colophon {
padding: 60px 0 90px;
background: #030303;
border-top: 1px solid var(--line);
}
.record-colophon .wrap { max-width: 880px; }
.record-colophon .kicker {
color: var(--red);
margin-bottom: 24px;
letter-spacing: 0.42em;
font-size: 0.7rem;
font-weight: 600;
}
.record-colophon p {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.82rem;
line-height: 1.8;
color: var(--fg-muted);
margin-bottom: 14px;
max-width: 78ch;
}
.record-colophon p strong { color: var(--gold); }
/* ============ RECORD CLOSING ============ */
.record .doc-section.closing .signoff {
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--line-soft);
}
.record .doc-section.closing .signature {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
letter-spacing: 0.12em;
color: var(--gold);
margin-bottom: 8px;
font-weight: 400;
}
.record .doc-section.closing .signature-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.22em;
color: var(--fg-muted);
text-transform: uppercase;
font-weight: 500;
}
/* ============ RECORD RESPONSIVE ============ */
@media (max-width: 760px) {
.tier-row { grid-template-columns: 70px 1fr; gap: 16px; padding: 14px 0; }
.tier-num { font-size: 1.1rem; }
.dossier-card { padding: 24px 22px; }
.dossier-card .then-vs-now { grid-template-columns: 1fr; gap: 18px; }
.additional-roster, .source-list, .record-colophon { padding-left: 22px; padding-right: 22px; }
.timeline-row { grid-template-columns: 90px 1fr; gap: 18px; }
.timeline-year { font-size: 1.1rem; }
}