:root {
--paper:  #e8e3d8;
--ink:    #2a2a2a;
--red:    #c13b1c;
--worn:   #5a5550;
--dirty:  #c8c2b5;
--font-display: 'Barlow Condensed', sans-serif;
--font-mono:    'Inter', sans-serif;
--border:      4px solid var(--ink);
--border-thin: 1px solid var(--dirty); --text-xs:    11px; --text-sm:    13px; --text-base:  15px; --text-stamp: 10px; } @media (min-width: 860px) {
:root {
--text-xs:    12px;
--text-sm:    14px;
--text-base:  16px;
}
} *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--font-mono);
overflow-x: hidden;
cursor: crosshair;
-webkit-font-smoothing: antialiased;
}
img  { display: block; max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; } body::before {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
opacity: 0.1;
pointer-events: none;
z-index: 9000;
mix-blend-mode: multiply;
} body::after {
content: '';
position: fixed; inset: 0;
background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
background-size: 6px 6px;
pointer-events: none;
z-index: 8999;
opacity: 0.25;
mix-blend-mode: multiply;
} .site-nav {
display: flex;
align-items: stretch;
height: 68px;
border-bottom: var(--border);
position: sticky;
top: 0;
background: var(--paper);
z-index: 500;
} .site-nav::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 4px;
background: var(--ink);
z-index: 502;
pointer-events: none;
}
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-right: var(--border);
flex-shrink: 0;
position: relative;
z-index: 501;
}
.nav-brand a {
display: flex;
align-items: center;
gap: 8px;
color: var(--ink);
}
.nav-logo-img {
height: 48px;
width: auto;
display: block;
} .nav-menu {
margin-left: auto;
display: none;
}
.nav-menu ul {
display: flex;
height: 100%;
}
.nav-menu li { border-left: 1px solid var(--dirty); }
.nav-menu a {
display: flex;
align-items: center;
height: 100%;
padding: 0 16px;
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--worn);
transition: background 0.08s, color 0.08s;
}
.nav-menu a:hover { background: var(--ink); color: var(--paper); }
.nav-order {
background: var(--red) !important;
color: var(--paper) !important;
font-family: var(--font-display) !important;
font-weight: 900 !important;
font-style: italic !important;
font-size: var(--text-base) !important;
letter-spacing: 0.1em !important;
border-left: var(--border) !important;
padding: 0 24px !important;
}
.nav-order:hover { background: var(--ink) !important; } .nav-hamburger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
padding: 0 20px;
margin-left: auto;
background: none;
border: none;
cursor: pointer;
height: 100%;
position: relative;
z-index: 501; }
.nav-hamburger span {
display: block;
width: 24px; height: 2px;
background: var(--ink);
transition: all 0.2s;
} .nav-hamburger.is-open span {
background: var(--ink);
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-menu.is-open {
display: flex;
position: fixed;
top: 68px; left: 0; right: 0; bottom: 0;
background: var(--paper);
z-index: 498;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 40px 40px 60px;
}
.nav-menu.is-open ul {
flex-direction: column;
width: 100%;
height: auto;
gap: 0;
}
.nav-menu.is-open li {
border-left: none;
border-bottom: 1px solid var(--dirty);
}
.nav-menu.is-open li:first-child {
border-top: 1px solid var(--dirty);
}
.nav-menu.is-open a {
height: auto;
padding: 22px 0;
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(36px, 9vw, 56px);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink);
transition: color 0.12s;
display: block;
width: 100%;
}
.nav-menu.is-open a:hover { color: var(--red); } .nav-menu.is-open .nav-order {
background: transparent !important;
border-left: none !important;
color: var(--red) !important;
font-size: clamp(36px, 9vw, 56px) !important;
padding: 22px 0 !important;
letter-spacing: 0.04em !important;
}
.nav-menu.is-open .nav-order:hover {
background: transparent !important;
color: var(--ink) !important;
} .nav-overlay-footer {
display: none;
position: absolute;
bottom: 32px;
left: 40px;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dirty);
font-style: italic;
}
.nav-overlay-footer .nav-heart {
color: var(--red);
}
.nav-menu.is-open .nav-overlay-footer {
display: block;
}
@media (min-width: 860px) {
.nav-hamburger { display: none; }
.nav-menu      { display: flex; }
.nav-brand-sub { display: block; }
} .hero {
min-height: 92vh;
border-bottom: var(--border);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.hero-bg {
position: absolute; inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.hero-bg-inner {
position: absolute; inset: -20px;
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: var(--text-sm);
letter-spacing: 0.12em;
line-height: 1.85;
text-transform: uppercase;
color: var(--ink);
opacity: 0.042;
word-break: break-all;
} .hero-inkbleed {
position: absolute;
top: 0; right: 0;
width: 44%; height: 100%;
background: var(--ink);
clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
z-index: 1;
display: none;
}
.hero-content {
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 48px 24px 32px;
}
.hero-stamp {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--red);
border: 1.5px solid var(--red);
padding: 4px 10px;
margin-bottom: 20px;
width: fit-content;
transform: rotate(-0.8deg);
}
.hero-stamp::before { content: '// '; }
.hero-h1 {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(72px, 19vw, 220px);
line-height: 0.82;
text-transform: uppercase;
letter-spacing: -0.02em;
}
.hero-h1 .l1 { display: block; color: var(--ink); }
.hero-h1 .l2 {
display: block;
color: transparent;
-webkit-text-stroke: 3px var(--ink);
text-shadow: 3px 3px 0 rgba(0,0,0,0.05);
}
.hero-h1 .l3 { display: block; color: var(--red); } .hero-right {
display: none;
position: absolute;
top: 0; right: 0;
width: 44%; height: 100%;
z-index: 2;
flex-direction: column;
justify-content: center;
padding: 48px 36px;
clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.hero-right-inner { padding-left: 16%; }
.hero-specs { display: flex; flex-direction: column; gap: 18px; }
.hspec {
display: flex;
flex-direction: column;
gap: 3px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hspec:last-child { border-bottom: none; padding-bottom: 0; }
.hspec-n {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.2em;
color: var(--red);
text-transform: uppercase;
}
.hspec-v {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-base);
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(232,227,216,0.85);
line-height: 1.3;
}
.hero-ghost-num {
position: absolute;
right: -20px; bottom: -30px;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(180px, 34vw, 360px);
color: rgba(255,255,255,0.05);
line-height: 1;
user-select: none;
pointer-events: none;
letter-spacing: -0.04em;
z-index: 1;
display: none;
} .hero-specs-mobile {
margin-top: 28px;
display: flex;
flex-direction: column;
}
.hspec-mobile {
display: flex;
align-items: baseline;
gap: 10px;
padding: 12px 0;
border-bottom: var(--border-thin);
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.7;
color: var(--worn);
}
.hspec-mobile::before { content: '→'; color: var(--red); flex-shrink: 0; } .hero-bar {
position: relative;
z-index: 3;
display: flex;
align-items: stretch;
border-top: var(--border);
background: var(--paper);
}
.hero-bar-cta {
display: flex;
align-items: center;
gap: 12px;
background: var(--red);
color: var(--paper);
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: 20px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 16px 28px;
border-right: var(--border);
transition: background 0.08s;
flex-shrink: 0;
}
.hero-bar-cta:hover { background: var(--ink); }
.hero-bar-url {
display: flex;
align-items: center;
padding: 0 20px;
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--worn);
font-style: italic;
flex: 1;
}
.hero-bar-tag {
display: none;
align-items: center;
padding: 0 20px;
border-left: var(--border-thin);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
color: var(--dirty);
text-transform: uppercase;
font-style: italic;
}
@media (min-width: 860px) {
.hero-inkbleed     { display: block; }
.hero-right        { display: flex; }
.hero-ghost-num    { display: block; }
.hero-content      { padding: 80px 48px 44px; }
.hero-specs-mobile { display: none; }
.hero-bar-cta      { padding: 20px 40px; }
.hero-bar-url      { padding: 0 28px; }
.hero-bar-tag      { display: flex; }
} .ticker {
overflow: hidden;
white-space: nowrap;
border-bottom: var(--border);
background: var(--ink);
}
.ticker-track {
display: inline-flex;
animation: tickroll 20s linear infinite;
}
@keyframes tickroll {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
.ticker-item {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: var(--text-base);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--paper);
padding: 12px 0 12px 28px;
display: inline-flex;
align-items: center;
gap: 28px;
}
.ticker-item .sep { color: var(--red); font-size: var(--text-base); } .statements {
display: grid;
grid-template-columns: 1fr;
border-bottom: var(--border);
}
.stmt {
padding: 36px 24px;
border-bottom: var(--border);
position: relative;
overflow: hidden;
transition: background 0.1s;
cursor: default;
}
.stmt:last-child { border-bottom: none; }
.stmt:hover { background: #dedad2; }
.stmt-overprint {
position: absolute;
right: -10px; bottom: -28px;
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(90px, 14vw, 140px);
color: rgba(0,0,0,0.04);
line-height: 1;
user-select: none;
pointer-events: none;
}
.stmt-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.stmt-label::before { content: '//'; font-weight: 700; }
.stmt-h {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(26px, 5vw, 44px);
line-height: 1;
text-transform: uppercase;
margin-bottom: 14px;
}
.stmt-p {
font-size: var(--text-sm);
line-height: 2;
color: var(--worn);
}
@media (min-width: 860px) {
.statements { grid-template-columns: 1fr 1fr 1fr; }
.stmt {
border-right: var(--border);
border-bottom: none;
padding: 44px 32px;
}
.stmt:last-child { border-right: none; }
} .section-steps {
border-bottom: var(--border);
padding: 52px 24px;
}
.steps-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 32px;
}
.section-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--worn);
margin-bottom: 12px;
border-bottom: var(--border-thin);
padding-bottom: 8px;
}
.section-label::before { content: '[ '; color: var(--red); font-weight: 700; }
.section-label::after  { content: ' ]'; color: var(--red); font-weight: 700; }
.section-title {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(44px, 9vw, 88px);
line-height: 0.88;
text-transform: uppercase;
}
.section-title .outline {
display: block;
color: transparent;
-webkit-text-stroke: 2.5px var(--ink);
}
.turnaround-badge {
border: 3px solid var(--ink);
padding: 12px 16px;
text-align: center;
transform: rotate(1deg);
flex-shrink: 0;
}
.ta-num {
font-family: var(--font-display);
font-weight: 900;
font-size: 32px;
color: var(--red);
line-height: 1;
}
.ta-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--worn);
display: block;
margin-top: 4px;
line-height: 1.6;
}
.steps-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3px;
}
.step-card {
background: #e0dcd4;
display: grid;
grid-template-columns: 60px 1fr;
cursor: default;
transition: background 0.08s, color 0.08s;
}
.step-card:hover              { background: var(--ink); color: var(--paper); }
.step-card:hover .step-num   { color: var(--red); border-color: #1e1e1e; }
.step-card:hover .step-desc  { color: rgba(232,227,216,0.45); }
.step-card.step-final { background: var(--red); color: var(--paper); }
.step-card.step-final .step-num  { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.15); }
.step-card.step-final .step-desc { color: rgba(255,255,255,0.55); }
.step-card.step-final:hover      { background: var(--ink); }
.step-num {
font-family: var(--font-display);
font-weight: 900;
font-size: 36px;
color: #b8b4ae;
border-right: 2px solid #ccc8c2;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.08s, border-color 0.08s;
line-height: 1;
}
.step-body   { padding: 18px; }
.step-title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-base);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 4px;
}
.step-desc {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.9;
color: var(--worn);
transition: color 0.08s;
}
@media (min-width: 700px)  { .steps-grid  { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px)  { .section-steps { padding: 64px 48px; } } .section-about {
border-bottom: var(--border);
display: grid;
grid-template-columns: 1fr;
}
.about-left {
background: var(--ink);
color: var(--paper);
padding: 52px 24px;
position: relative;
overflow: hidden;
border-bottom: var(--border);
}
.about-left::before {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
97deg,
transparent 0%, transparent 48%,
rgba(255,255,255,0.01) 48%, rgba(255,255,255,0.01) 52%,
transparent 52%
);
pointer-events: none;
}
.about-af-ghost {
position: absolute;
right: -30px; bottom: -50px;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(130px, 24vw, 260px);
color: rgba(255,255,255,0.04);
line-height: 1;
letter-spacing: -0.04em;
user-select: none;
pointer-events: none;
}
.tape-label {
display: inline-block;
background: var(--red);
color: var(--paper);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.24em;
text-transform: uppercase;
padding: 4px 10px;
margin-bottom: 24px;
transform: rotate(-1.2deg);
position: relative;
z-index: 2;
}
.about-pull {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(24px, 4.5vw, 46px);
line-height: 1.05;
text-transform: uppercase;
margin-bottom: 28px;
position: relative;
z-index: 2;
}
.about-pull .red { color: var(--red); }
.about-body {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 2.2;
color: rgba(232,227,216,0.4);
font-style: italic;
position: relative;
z-index: 2;
max-width: 460px;
}
.about-body strong {
color: rgba(232,227,216,0.65);
font-style: normal;
}
.about-right {
padding: 52px 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 36px;
}
.cred-row {
display: grid;
grid-template-columns: 68px 1fr;
gap: 16px;
padding: 16px 0;
border-bottom: var(--border-thin);
align-items: start;
}
.cred-row:first-child { border-top: var(--border-thin); }
.cred-year {
font-family: var(--font-display);
font-weight: 900;
font-size: 26px;
color: var(--red);
line-height: 1;
}
.cred-info strong {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 2px;
}
.cred-info span {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--worn);
font-style: italic;
}
.about-cta {
display: block;
background: var(--red);
color: var(--paper);
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: 22px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 18px;
text-align: center;
transition: background 0.08s;
}
.about-cta:hover { background: var(--ink); }
@media (min-width: 860px) {
.section-about { grid-template-columns: 55% 45%; }
.about-left {
border-right: var(--border);
border-bottom: none;
padding: 64px 48px;
}
.about-right { padding: 64px 48px; }
} .footer-cta-section {
border-bottom: var(--border);
padding: 60px 24px 56px;
position: relative;
overflow: hidden;
}
.fcta-ghost {
position: absolute;
right: -20px; top: 50%;
transform: translateY(-50%);
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(100px, 24vw, 280px);
color: rgba(0,0,0,0.04);
line-height: 1;
letter-spacing: -0.04em;
user-select: none;
pointer-events: none;
}
.fcta-pre {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.fcta-pre::before { content: '——'; }
.fcta-heading {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(52px, 13vw, 150px);
line-height: 0.84;
text-transform: uppercase;
margin-bottom: 36px;
position: relative;
z-index: 2;
}
.fcta-heading .s { display: block; color: var(--ink); }
.fcta-heading .o { display: block; color: transparent; -webkit-text-stroke: 3px var(--ink); }
.fcta-heading .r { display: block; color: var(--red); }
.fcta-actions {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
.fcta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--ink);
color: var(--paper);
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: 22px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 16px 36px;
transition: background 0.08s;
position: relative;
}
.fcta-btn::after {
content: '';
position: absolute;
bottom: -5px; right: -5px;
width: 100%; height: 100%;
border: 2px solid var(--ink);
pointer-events: none;
transition: all 0.1s;
}
.fcta-btn:hover { background: var(--red); }
.fcta-btn:hover::after { bottom: -8px; right: -8px; border-color: var(--red); }
.fcta-url {
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--worn);
font-style: italic;
}
@media (min-width: 860px) {
.footer-cta-section { padding: 88px 48px 80px; }
} .site-footer {
display: grid;
grid-template-columns: 1fr; border-top: var(--border);
}
.footer-col {
padding: 28px 24px;
border-bottom: var(--border-thin);
}
.footer-col:last-child { border-bottom: none; }
.f-logo {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: 20px;
text-transform: uppercase;
line-height: 1.1;
}
.f-logo em { font-style: normal; color: var(--red); }
.f-sub {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
color: var(--worn);
margin-top: 6px;
font-style: italic;
}
.f-links {
display: flex;
flex-direction: column;
gap: 0;
}
.f-links li {
border-bottom: var(--border-thin);
}
.f-links li:last-child { border-bottom: none; }
.f-links a {
display: block;
padding: 10px 0;
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--worn);
transition: color 0.08s; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.f-links a:hover { color: var(--red); }
.f-copy {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.1em;
color: var(--dirty);
line-height: 2.4;
font-style: italic;
}
.f-copy a { color: var(--worn); transition: color 0.08s; }
.f-copy a:hover { color: var(--red); } @media (min-width: 700px) {
.site-footer {
grid-template-columns: 1fr 1fr 1fr;
}
.footer-col {
padding: 32px 40px;
border-bottom: none;
border-right: var(--border-thin);
}
.footer-col:last-child { border-right: none; }
.f-links a {
white-space: normal;
overflow: visible;
text-overflow: unset;
}
} .contact-options {
display: grid;
grid-template-columns: 1fr;
border-bottom: var(--border);
}
.contact-card {
padding: 40px 24px;
border-bottom: var(--border);
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
overflow: hidden;
transition: background 0.08s;
}
.contact-card:last-child { border-bottom: none; }
.contact-card:hover { background: #dedad2; }
.contact-card--primary {
background: var(--ink);
color: var(--paper);
}
.contact-card--primary:hover { background: #1a1a1a; }
.cc-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--red);
}
.cc-title {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(32px, 6vw, 52px);
text-transform: uppercase;
line-height: 1;
letter-spacing: 0.01em;
}
.cc-desc {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.9;
color: var(--worn);
max-width: 420px;
}
.contact-card--primary .cc-desc {
color: rgba(232,227,216,0.45);
}
.cc-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--red);
color: var(--paper);
text-decoration: none;
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: 18px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 24px;
width: fit-content;
margin-top: 8px;
transition: background 0.08s;
}
.cc-cta:hover { background: var(--ink); }
.cc-cta--outline {
background: transparent;
color: var(--ink);
border: 2px solid var(--ink);
}
.cc-cta--outline:hover {
background: var(--ink);
color: var(--paper);
}
.contact-card--primary .cc-cta--outline {
color: var(--paper);
border-color: rgba(232,227,216,0.3);
}
@media (min-width: 700px) {
.contact-options { grid-template-columns: 1fr 1fr; }
.contact-card {
border-right: var(--border);
border-bottom: var(--border);
}
.contact-card:nth-child(2n) { border-right: none; }
.contact-card:nth-last-child(-n+2) { border-bottom: none; }
}
@media (min-width: 860px) {
.contact-card { padding: 52px 40px; }
} .contact-calendly {
border-bottom: var(--border);
padding: 52px 24px;
}
.contact-calendly-header {
margin-bottom: 32px;
}
.contact-calendly-sub {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--worn);
font-style: italic;
margin-top: 12px;
}
.contact-calendly-embed {
border: var(--border);
overflow: hidden;
} .calendly-inline-widget {
border-radius: 0 !important;
}
@media (min-width: 860px) {
.contact-calendly { padding: 64px 48px; }
} .contact-expect {
border-bottom: var(--border);
padding: 52px 24px;
}
.contact-expect-header {
margin-bottom: 40px;
}
.expect-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3px;
}
.expect-row {
display: grid;
grid-template-columns: 60px 1fr;
background: #e0dcd4;
cursor: default;
transition: background 0.08s, color 0.08s;
}
.expect-row:hover { background: var(--ink); color: var(--paper); }
.expect-row:hover .expect-num { color: var(--red); border-color: #1e1e1e; }
.expect-row:hover .expect-desc { color: rgba(232,227,216,0.45); }
.expect-num {
font-family: var(--font-display);
font-weight: 900;
font-size: 36px;
color: #b8b4ae;
border-right: 2px solid #ccc8c2;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.08s, border-color 0.08s;
line-height: 1;
}
.expect-body { padding: 20px 20px; }
.expect-title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-base);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 4px;
}
.expect-desc {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.9;
color: var(--worn);
transition: color 0.08s;
}
@media (min-width: 700px) {
.expect-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
.contact-expect { padding: 64px 48px; }
} .order-form-section {
display: grid;
grid-template-columns: 1fr;
border-bottom: var(--border);
}
.order-form-wrap {
padding: 52px 24px;
border-bottom: var(--border);
} .form-success {
padding: 48px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.fs-icon {
font-family: var(--font-display);
font-size: 48px;
color: var(--red);
line-height: 1;
}
.fs-title {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(32px, 6vw, 56px);
text-transform: uppercase;
color: var(--ink);
}
.fs-body {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 2;
color: var(--worn);
}
.fs-link {
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0.14em;
color: var(--red);
text-decoration: none;
text-transform: uppercase;
} .form-error {
padding: 24px;
background: var(--red);
color: var(--paper);
margin-bottom: 24px;
}
.fe-title {
font-family: var(--font-display);
font-weight: 900;
font-size: 20px;
text-transform: uppercase;
margin-bottom: 4px;
}
.fe-body {
font-family: var(--font-mono);
font-size: var(--text-sm);
opacity: 0.8;
} .form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: var(--border-thin);
} .form-field {
padding: 24px 0;
border-bottom: var(--border-thin);
position: relative;
background: transparent;
}
.form-field--full {
grid-column: 1 / -1;
} .form-label {
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-base);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 14px;
cursor: pointer;
}
.fl-num {
font-family: var(--font-display);
font-weight: 900;
font-size: 22px;
color: var(--red);
line-height: 1;
flex-shrink: 0;
}
.fl-required {
color: var(--red);
font-size: var(--text-xs);
}
.fl-optional {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.18em;
color: var(--worn);
font-weight: 400;
text-transform: none;
} .form-input,
.form-select,
.form-textarea {
width: 100%;
background: transparent;
border: none;
border-bottom: 2px solid var(--dirty);
border-radius: 0;
padding: 10px 0;
font-family: var(--font-mono);
font-size: var(--text-base);
color: var(--ink);
outline: none;
transition: border-color 0.12s;
-webkit-appearance: none;
appearance: none; box-shadow: none;
}
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
-webkit-text-fill-color: var(--ink);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--dirty);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-bottom-color: var(--ink);
}
.form-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.8;
} .form-select-wrap {
position: relative;
}
.form-select {
cursor: pointer;
padding-right: 32px;
color: var(--ink);
}
.form-select option[value=""][disabled] {
color: var(--dirty);
}
.form-select-arrow {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: var(--red);
pointer-events: none;
font-size: 14px;
} .form-radio-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.form-radio {
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.form-radio:last-child { border-bottom: none; } .form-radio input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
} .fr-box {
width: 20px;
height: 20px;
border: 2px solid var(--dirty);
border-radius: 50%;
flex-shrink: 0;
position: relative;
transition: border-color 0.08s;
background: transparent;
}
.form-radio input[type="radio"]:checked + .fr-box {
border-color: var(--red);
}
.form-radio input[type="radio"]:checked + .fr-box::after {
content: '';
position: absolute;
inset: 3px;
background: var(--red);
border-radius: 50%;
}
.fr-label {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--ink);
line-height: 1.5;
}
.form-radio:hover .fr-box { border-color: var(--ink); } .form-field.has-error .form-input,
.form-field.has-error .form-select,
.form-field.has-error .form-textarea {
border-bottom-color: var(--red);
background: transparent;
}
.form-field.has-error .fr-box {
border-color: var(--red);
}
.form-field-error {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--red);
margin-top: 8px;
display: none;
letter-spacing: 0.1em;
}
.form-field.has-error .form-field-error { display: block; } .form-submit-wrap {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 32px;
}
.form-submit {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--red);
color: var(--paper);
border: none;
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: 22px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 16px 36px;
cursor: pointer;
transition: background 0.08s;
position: relative;
}
.form-submit::after {
content: '';
position: absolute;
bottom: -5px; right: -5px;
width: 100%; height: 100%;
border: 2px solid var(--red);
pointer-events: none;
transition: all 0.1s;
}
.form-submit:hover { background: var(--ink); }
.form-submit:hover::after { bottom: -8px; right: -8px; border-color: var(--ink); }
.form-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.form-submit-note {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.18em;
color: var(--worn);
font-style: italic;
} .order-form-side {
padding: 52px 24px;
display: flex;
flex-direction: column;
gap: 40px;
background: #e0dcd4;
}
.ofs-block {}
.ofs-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 20px;
}
.ofs-steps {
display: flex;
flex-direction: column;
gap: 0;
}
.ofs-step {
display: flex;
align-items: baseline;
gap: 14px;
padding: 12px 0;
border-bottom: var(--border-thin);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--worn);
}
.ofs-step:first-child { border-top: var(--border-thin); }
.ofs-num {
font-family: var(--font-display);
font-weight: 900;
font-size: 20px;
color: var(--red);
flex-shrink: 0;
line-height: 1;
}
.ofs-step--final {
border-bottom: none;
color: var(--ink);
font-weight: 600;
}
.ofs-specs {
display: flex;
flex-direction: column;
gap: 0;
}
.ofs-spec-row {
display: grid;
grid-template-columns: 100px 1fr;
gap: 12px;
padding: 10px 0;
border-bottom: var(--border-thin);
}
.ofs-spec-row:first-child { border-top: var(--border-thin); }
.ofs-spec-key {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--worn);
}
.ofs-spec-val {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--ink);
}
@media (min-width: 700px) {
.form-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
.order-form-section {
grid-template-columns: 65% 35%;
}
.order-form-wrap {
padding: 64px 48px;
border-bottom: none;
border-right: var(--border);
}
.order-form-side { padding: 64px 40px; }
} .preloader {
position: fixed;
inset: 0;
background: var(--paper);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.6s ease, visibility 0.6s ease;
} .preloader-grain {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
opacity: 0.14;
pointer-events: none;
mix-blend-mode: multiply;
} .preloader-grain::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(0,0,0,0.09) 1px, transparent 1px);
background-size: 5px 5px;
opacity: 0.3;
mix-blend-mode: multiply;
}
.preloader.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
} .preloader-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
padding: 0 24px;
width: 100%;
max-width: 640px;
position: relative;
z-index: 2;
} .preloader-logo {
display: flex;
align-items: center;
justify-content: flex-start;
}
.preloader-logo-img {
height: clamp(80px, 14vw, 160px);
width: auto;
display: block;
} .preloader-terminal {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
.pre-line {
font-family: var(--font-mono);
font-size: clamp(10px, 2vw, 13px);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--worn);
display: flex;
align-items: center;
gap: 0;
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.pre-line.is-visible {
opacity: 1;
transform: translateX(0);
}
.pre-bracket {
color: var(--red);
font-weight: 700;
}
.pre-text {
color: var(--worn);
}
.pre-ok {
display: inline-block;
width: 0;
overflow: hidden;
color: var(--red);
font-weight: 700;
white-space: nowrap;
transition: width 0.2s ease 0.15s;
}
.pre-line.is-done .pre-ok {
width: 3ch; }
.pre-line.is-done .pre-ok::after {
content: ' ✓';
} .pre-line--final .pre-text {
color: var(--ink);
font-weight: 700;
}
.pre-line--final.is-visible .pre-bracket {
color: var(--red);
} .preloader-bar-wrap {
width: 100%;
height: 3px;
background: var(--dirty);
position: relative;
overflow: hidden;
}
.preloader-bar {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 0%;
background: var(--red);
transition: width 0.4s ease;
}  .page-hero {
border-bottom: var(--border);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 40vh;
justify-content: flex-end;
}
.page-hero-inner {
padding: 48px 24px 32px;
position: relative;
z-index: 2;
}
.page-hero-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 16px;
}
.page-hero-title {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(56px, 13vw, 140px);
line-height: 0.85;
text-transform: uppercase;
letter-spacing: -0.02em;
}
.ph-l1 { display: block; color: var(--ink); }
.ph-l2 {
display: block;
color: transparent;
-webkit-text-stroke: 3px var(--ink);
}
.page-hero-sub {
margin-top: 20px;
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.9;
color: var(--worn);
font-style: italic;
max-width: 480px;
}
.page-hero-bar {
border-top: var(--border);
padding: 14px 24px;
background: var(--paper);
position: relative;
z-index: 2;
}
.page-hero-bar-text {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--worn);
}
@media (min-width: 860px) {
.page-hero-inner { padding: 80px 48px 44px; }
.page-hero-bar   { padding: 14px 48px; }
} .process-not {
border-bottom: var(--border);
padding: 52px 24px;
}
.process-not-inner {
margin-bottom: 32px;
}
.process-not-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3px;
}
.not-item-card {
background: var(--ink);
color: var(--paper);
display: grid;
grid-template-columns: 48px 1fr;
align-items: start;
padding: 24px;
gap: 16px;
transition: background 0.08s;
}
.not-item-card:hover { background: #1a1a1a; }
.nic-x {
font-family: var(--font-display);
font-weight: 900;
font-size: 28px;
color: var(--red);
line-height: 1;
padding-top: 2px;
}
.nic-title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-base);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 6px;
color: var(--paper);
}
.nic-desc {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.9;
color: rgba(232,227,216,0.45);
}
@media (min-width: 700px) {
.process-not-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
.process-not { padding: 64px 48px; }
} .freq-wrong {
border-bottom: var(--border);
padding: 52px 24px;
}
.freq-wrong-header {
margin-bottom: 40px;
}
.freq-wrong-sub {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--worn);
font-style: italic;
margin-top: 12px;
}
.freq-wrong-list {
display: flex;
flex-direction: column;
gap: 0;
}
.fw-row {
display: grid;
grid-template-columns: 1fr;
border-bottom: var(--border);
transition: background 0.08s;
}
.fw-row:first-child { border-top: var(--border); }
.fw-row:hover { background: #dedad2; }
.fw-quote {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(20px, 3.5vw, 32px);
color: var(--worn);
padding: 20px 24px 0;
letter-spacing: 0.01em;
}
.fw-answer {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.9;
color: var(--ink);
padding: 12px 24px 20px;
display: flex;
gap: 12px;
align-items: baseline;
}
.fw-arrow {
color: var(--red);
font-weight: 700;
flex-shrink: 0;
font-size: var(--text-base);
}
@media (min-width: 860px) {
.freq-wrong { padding: 64px 48px; }
.fw-row {
grid-template-columns: 40% 60%;
border-bottom: var(--border);
}
.fw-quote {
padding: 28px 32px 28px 0;
border-right: var(--border);
}
.fw-answer {
padding: 28px 0 28px 32px;
}
} .fine-print {
border-bottom: var(--border);
padding: 52px 24px;
}
.fine-print-header {
margin-bottom: 40px;
}
.fine-print-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3px;
}
.fp-block {
background: #e0dcd4;
padding: 28px 24px;
}
.fp-block--dark {
background: var(--ink);
color: var(--paper);
}
.fp-block-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 16px;
} .fp-table {
width: 100%;
border-collapse: collapse;
}
.fp-table tr {
border-bottom: 1px solid var(--dirty);
}
.fp-table tr:first-child { border-top: 1px solid var(--dirty); }
.fp-table td {
padding: 10px 0;
font-family: var(--font-mono);
font-size: var(--text-sm);
vertical-align: middle;
}
.fp-size {
font-family: var(--font-display);
font-weight: 900;
font-size: 22px;
color: var(--ink);
width: 60px;
}
.fp-qty { color: var(--ink); }
.fp-note {
color: var(--worn);
text-align: right;
}
.fp-total td { 
border-top: 2px solid var(--ink);
font-weight: 700;
color: var(--red);
padding-top: 14px;
}
.fp-total .fp-size {
color: var(--red);
} .fp-list {
display: flex;
flex-direction: column;
gap: 0;
}
.fp-item {
display: flex;
align-items: baseline;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--dirty);
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.7;
color: var(--ink);
}
.fp-item:first-child { border-top: 1px solid var(--dirty); }
.fp-check {
color: var(--red);
flex-shrink: 0;
font-weight: 700;
} .fp-timeline {
display: flex;
flex-direction: column;
gap: 0;
}
.fp-tl-row {
display: grid;
grid-template-columns: 80px 1fr;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid var(--dirty);
align-items: baseline;
}
.fp-tl-row:first-child { border-top: 1px solid var(--dirty); }
.fp-tl-day {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-sm);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--red);
}
.fp-tl-desc {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--worn);
line-height: 1.7;
}
.fp-tl-final {
border-bottom: none;
}
.fp-tl-final .fp-tl-day {
font-size: 20px;
}
.fp-tl-final .fp-tl-desc {
color: var(--ink);
font-weight: 700;
} .fp-dark-title {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(36px, 6vw, 56px);
line-height: 1;
color: var(--paper);
margin-bottom: 16px;
}
.fp-dark-body {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 2;
color: rgba(232,227,216,0.45);
font-style: italic;
margin-bottom: 24px;
max-width: 380px;
}
.fp-dark-specs {
display: flex;
flex-direction: column;
gap: 0;
}
.fp-ds-row {
display: grid;
grid-template-columns: 90px 1fr;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fp-ds-row:first-child { border-top: 1px solid rgba(255,255,255,0.06); }
.fp-ds-key {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(232,227,216,0.3);
}
.fp-ds-val {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: rgba(232,227,216,0.7);
}
@media (min-width: 700px) {
.fine-print-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
.fine-print { padding: 64px 48px; }
.fp-block { padding: 36px 32px; }
} .about-photo {
border-bottom: var(--border);
}
.about-photo-inner {
display: grid;
grid-template-columns: 1fr;
} .about-photo-wrap {
position: relative;
overflow: hidden;
border-bottom: var(--border);
min-height: 320px;
} .about-photo-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(100%) contrast(1.3) sepia(20%);
}
.about-photo-placeholder {
width: 100%;
height: 320px;
background: var(--ink);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.2em;
color: rgba(255,255,255,0.2);
text-transform: uppercase;
} .about-photo-duotone {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
} .about-photo-duotone::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);
opacity: 1;
} .about-photo-duotone::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
opacity: 0.14;
mix-blend-mode: multiply;
} .about-photo-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px 24px;
background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 100%);
display: flex;
justify-content: space-between;
align-items: flex-end;
z-index: 2;
}
.apc-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(232,227,216,0.5);
}
.apc-text {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(232,227,216,0.7);
font-style: italic;
} .about-photo-side {
padding: 40px 24px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
background: var(--ink);
color: var(--paper);
}
.aps-quote {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(22px, 4vw, 36px);
line-height: 1.1;
text-transform: uppercase;
color: var(--paper);
}
.aps-attr {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red);
}
.aps-note {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 2;
color: rgba(232,227,216,0.35);
font-style: italic;
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 20px;
}
@media (min-width: 860px) {
.about-photo-inner {
grid-template-columns: 65% 35%;
}
.about-photo-wrap {
border-bottom: none;
border-right: var(--border);
min-height: 480px;
}
.about-photo-side {
padding: 48px 40px;
}
} .about-mission {
border-bottom: var(--border);
padding: 52px 24px;
}
.about-mission-inner {}
.mission-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3px;
margin-top: 32px;
}
.mission-block {
background: #e0dcd4;
display: grid;
grid-template-columns: 60px 1fr;
gap: 0;
transition: background 0.08s;
cursor: default;
}
.mission-block:hover { background: #d4d0c8; }
.mission-num {
font-family: var(--font-display);
font-weight: 900;
font-size: 36px;
color: #b8b4ae;
border-right: 2px solid #ccc8c2;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 20px;
line-height: 1;
}
.mission-body {
padding: 20px 20px;
}
.mission-title {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(20px, 3vw, 28px);
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 8px;
color: var(--ink);
}
.mission-text {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.9;
color: var(--worn);
}
@media (min-width: 860px) {
.about-mission { padding: 64px 48px; }
.mission-grid  { grid-template-columns: 1fr 1fr 1fr; }
} .about-tribute {
border-bottom: var(--border);
display: grid;
grid-template-columns: 1fr;
}
.about-tribute-left {
background: var(--ink);
color: var(--paper);
padding: 52px 24px;
position: relative;
overflow: hidden;
border-bottom: var(--border);
}
.tribute-ghost {
position: absolute;
right: -30px; bottom: -50px;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(130px, 24vw, 280px);
color: rgba(255,255,255,0.04);
line-height: 1;
letter-spacing: -0.04em;
user-select: none;
pointer-events: none;
}
.tribute-title {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(48px, 10vw, 100px);
line-height: 0.88;
text-transform: uppercase;
color: var(--paper);
margin-bottom: 28px;
position: relative;
z-index: 2;
}
.tribute-body {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 2.2;
color: rgba(232,227,216,0.4);
font-style: italic;
position: relative;
z-index: 2;
max-width: 480px;
}
.about-tribute-right {
padding: 52px 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 40px;
}
.tribute-quote {
position: relative;
}
.tq-mark {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(60px, 10vw, 100px);
color: var(--red);
line-height: 0.8;
display: block;
margin-bottom: 8px;
}
.tq-text {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(22px, 4vw, 36px);
line-height: 1.1;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 16px;
}
.tq-attr {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--worn);
font-style: italic;
}
.tribute-ig {
display: flex;
flex-direction: column;
gap: 6px;
padding: 20px 0;
border-top: var(--border-thin);
text-decoration: none;
transition: opacity 0.08s;
}
.tribute-ig:hover { opacity: 0.7; }
.tribute-ig-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--worn);
}
.tribute-ig-handle {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(24px, 5vw, 40px);
text-transform: uppercase;
color: var(--red);
letter-spacing: 0.02em;
} .ph-l3 {
display: block;
color: var(--red);
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
font-size: clamp(56px, 13vw, 140px);
}
@media (min-width: 860px) {
.about-tribute { grid-template-columns: 55% 45%; }
.about-tribute-left {
border-right: var(--border);
border-bottom: none;
padding: 64px 48px;
}
.about-tribute-right { padding: 64px 48px; }
} .page-cta-section {
border-bottom: var(--border);
padding: 60px 24px 56px;
position: relative;
overflow: hidden;
}
.page-cta-inner {
position: relative;
z-index: 2;
}
@media (min-width: 860px) {
.page-cta-section { padding: 88px 48px 80px; }
} .sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft   { float: left; margin-right: 1em; }
.alignright  { float: right; margin-left: 1em; } [id] { scroll-margin-top: 60px; }