@charset "utf-8";
/* About page (/about.asp) only | 2026-10-07
   Version: 1.1.0 (2026-10-29: type floor - .about-standard__number 14px, from 10.9px.)
   Version: 1.0.0 (2026-10-07: moved verbatim out of about.asp's inline style block, site-layout
   page content; linked by about.asp alone, after site.css. Every rule is scoped to .about-*.
   Earlier history of these rules is in about.asp's header, 2.0.4 to 2.1.0.) */
.about-page{background:#0c0f13;color:var(--color-muted-bright)}
.about-page main{overflow:hidden}
.about-inner{width:min(100% - (2 * var(--site-gutter)),1120px);margin-inline:auto}
.about-inner--narrow{max-width:780px}
.about-section{padding-block:clamp(4rem,8vw,7rem)}
/* eyebrow is now the sitewide .eyebrow (site.css); belief/standards use .eyebrow--on-light, closing uses .eyebrow--center */
.about-page h1,.about-page h2{font-family:var(--font-serif);font-weight:600}
.about-page h2{margin:0 0 1.25rem;font-size:clamp(2.4rem,5vw,4rem);line-height:1;letter-spacing:-.025em}
.about-page p{margin:0 0 1rem;font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.72}

.about-hero{position:relative;display:grid;min-height:clamp(520px,72vh,760px);align-items:center;overflow:hidden;background:radial-gradient(800px 520px at 78% 30%,rgba(203,161,53,.18),transparent 62%),linear-gradient(135deg,#1b2026,#0b0e12 68%);border-bottom:1px solid rgba(203,161,53,.28)}
.about-hero::after{content:"MMXXVI";position:absolute;right:-.04em;bottom:-.18em;color:rgba(203,161,53,.045);font:600 clamp(8rem,25vw,23rem)/1 var(--font-serif);letter-spacing:.02em;pointer-events:none}
.about-hero__copy{position:relative;z-index:1;max-width:860px;padding-block:clamp(4rem,8vw,7rem)}
.about-hero h1{max-width:13ch;margin:0 0 1.5rem;color:#f3eee4;font-size:clamp(3.6rem,8vw,7rem);line-height:.88;letter-spacing:-.045em}
.about-hero__lede{max-width:720px;margin:0;color:var(--color-muted-bright);font-family:var(--font-serif);font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.45}

.about-belief{background:var(--color-ivory);color:var(--color-ink)}
.about-belief__statement{max-width:720px;margin-bottom:1.3rem;font-family:var(--font-serif);font-size:clamp(1.2rem,2vw,1.45rem)!important;color:var(--color-ink)}
.about-belief__finish{max-width:680px;color:var(--color-ink-muted);font-style:italic}

.about-dream{position:relative;isolation:isolate;display:grid;min-height:clamp(520px,60vw,680px);align-items:center;overflow:hidden;background:#14181d}
/* A ::before rule here painted /logo/mens-shop-banner-est-mmxxvi.png as a background.
   Removed 2026-08-21. The ::after gradient below sat on top of it at 96% opacity on
   the left and 88% at 35%, and never dropped below 48% even at its clearest point, so
   the photograph was effectively invisible; behind the copy only 4-12% of it showed.
   A CSS background is still downloaded no matter what is painted over it: measured on
   the live page at 2,353 KB and 1,889 ms of fetch on every About view, for something
   a reader could not see.

   THE FILE ITSELF IS STILL IN USE - do not delete it. It is the og:image and
   twitter:image for this page (see the meta tags in about.asp), so it is fetched by social
   crawlers when the About page is shared, just not by visitors loading the page.

   The section keeps its background:#14181d from the rule above, which is what was
   actually visible. The ::after gradient is deliberately KEPT: it now tints that flat
   colour rather than a photo, preserving the left-to-right falloff the copy is set
   against. */
.about-dream::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(8,10,12,.96) 0%,rgba(8,10,12,.88) 35%,rgba(8,10,12,.48) 68%,rgba(8,10,12,.58) 100%),linear-gradient(0deg,rgba(8,10,12,.42),transparent 42%)}
.about-dream .about-inner{position:relative;z-index:1}
.about-dream__grid{display:grid;grid-template-columns:minmax(0,610px);gap:1.35rem;align-items:start}
.about-dream h2{color:#f1ece2}
.about-dream__body{max-width:590px;color:var(--color-muted-bright);text-shadow:0 1px 12px rgba(0,0,0,.45)}

.about-philosophy{background:#201b14;color:var(--color-muted-bright);border-block:1px solid rgba(203,161,53,.25)}
.about-philosophy h2{max-width:12ch;color:#f3ede1;font-size:clamp(3rem,6vw,5.25rem)}
.about-philosophy__body{max-width:720px;margin-left:auto}
.about-philosophy__finish{margin-top:1.6rem!important;color:var(--color-gold-bright);font-family:var(--font-serif);font-size:clamp(1.35rem,2vw,1.65rem)!important}

.about-standards{background:var(--color-ivory);color:var(--color-ink)}
.about-standards__head{max-width:760px;margin-bottom:clamp(2.5rem,5vw,4rem)}
.about-standards__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #d5cdbd;border-left:1px solid #d5cdbd}
.about-standard{min-width:0;padding:clamp(1.6rem,3.5vw,2.75rem);border-right:1px solid #d5cdbd;border-bottom:1px solid #d5cdbd}
.about-standard__number{display:block;margin-bottom:.65rem;color:var(--color-gold-muted);font:700 var(--fs-note)/1 var(--font-sans);letter-spacing:.18em}
.about-standard h3{margin:0 0 .7rem;color:var(--color-ink);font:700 clamp(.9rem,1.4vw,1.05rem)/1.25 var(--font-sans);letter-spacing:.09em}
.about-standard p{margin:0;color:var(--color-ink-muted);font-size:1rem}

.about-newness{background:radial-gradient(circle at 100% 0,rgba(203,161,53,.09),transparent 42%),#101419}
.about-newness__grid{display:grid;grid-template-columns:minmax(160px,.55fr) minmax(0,1.45fr);gap:clamp(2rem,7vw,6rem);align-items:start}
.about-newness__year{margin:0;color:rgba(203,161,53,.68);font:600 clamp(3rem,7vw,6rem)/.9 var(--font-serif);letter-spacing:.08em;writing-mode:vertical-rl;transform:rotate(180deg)}
.about-newness h2{color:#f2ede3}
.about-newness__standard{max-width:720px;margin-top:1.75rem!important;padding-left:1.25rem;border-left:1px solid var(--color-gold);color:var(--color-muted-bright);font-family:var(--font-serif);font-size:clamp(1.2rem,2vw,1.45rem)!important}

.about-closing{text-align:center;background:radial-gradient(ellipse at 50% 40%,rgba(203,161,53,.14),transparent 58%),#171713;border-block:1px solid rgba(203,161,53,.32)}
.about-closing h2{max-width:800px;margin-inline:auto;color:#f3eee4}
.about-closing .button{margin-top:1rem}

@media(max-width:760px){.about-dream__grid,.about-newness__grid{grid-template-columns:1fr}.about-newness__year{writing-mode:horizontal-tb;transform:none;font-size:2.75rem}.about-standards__grid{grid-template-columns:1fr}}
@media(max-width:600px){.about-section{padding-block:3.5rem}.about-hero{min-height:560px}.about-hero h1{font-size:clamp(3.4rem,15vw,5rem)}.about-hero__lede{font-size:1.2rem}.about-page h2{font-size:clamp(2.35rem,11vw,3.25rem)}.about-dream{min-height:620px}.about-dream::before{background-position:61% center}.about-dream::after{background:linear-gradient(90deg,rgba(8,10,12,.9),rgba(8,10,12,.68)),linear-gradient(0deg,rgba(8,10,12,.6),transparent 55%)}}