<section class="tm-fas" aria-label="Client archive">
<header class="tm-fas-season-bar">
<div class="tm-fas-sb-brand">Maison Noir · Client Archive</div>
<div class="tm-fas-sb-meta">Est. MMXII · 8,400 Patrons</div>
</header>
<div class="tm-fas-top-row">
<article class="tm-fas-cell tm-fas-dark">
<div class="tm-fas-coll-label">A/W Collection · Maison</div>
<blockquote class="tm-fas-bq">"I wore the coat to the opening and three people asked me who designed it before I even reached the bar. <em>That is the effect.</em>"</blockquote>
<span class="tm-fas-deco-num" aria-hidden="true">01</span>
<figcaption class="tm-fas-author-area">
<div><cite class="tm-fas-an">Isabella Fontaine</cite><span class="tm-fas-ar">Paris · 12-year patron</span></div>
<div class="tm-fas-dots" aria-label="5 out of 5">
<span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
</div>
</figcaption>
</article>
<article class="tm-fas-cell">
<div class="tm-fas-coll-label">S/S Collection · Resort</div>
<blockquote class="tm-fas-bq">"The tailoring is so precise it feels <em>custom</em>, even off the rack. I've stopped buying anything else."</blockquote>
<span class="tm-fas-deco-num" aria-hidden="true">02</span>
<figcaption class="tm-fas-author-area">
<div><cite class="tm-fas-an">Mireille Auclair</cite><span class="tm-fas-ar">Montréal · Stylist</span></div>
<div class="tm-fas-dots" aria-label="5 out of 5">
<span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
</div>
</figcaption>
</article>
</div>
<div class="tm-fas-mid-row">
<article class="tm-fas-cell tm-fas-warm">
<div class="tm-fas-coll-label">Accessories</div>
<blockquote class="tm-fas-sq">"The bag is three seasons old and strangers still stop me to ask about it. <em>Timeless</em> is an overused word. Here it's accurate."</blockquote>
<span class="tm-fas-deco-num" aria-hidden="true">03</span>
<figcaption class="tm-fas-author-area">
<div><cite class="tm-fas-an">Yuki Tanaka</cite><span class="tm-fas-ar">Tokyo · Editor</span></div>
<div class="tm-fas-dots" aria-label="5 out of 5">
<span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
</div>
</figcaption>
</article>
<article class="tm-fas-cell">
<div class="tm-fas-coll-label">Ready-to-wear</div>
<blockquote class="tm-fas-sq">"Every single piece I've bought has survived five seasons of heavy wear without losing its shape. <em>Engineering dressed as fashion.</em>"</blockquote>
<span class="tm-fas-deco-num" aria-hidden="true">04</span>
<figcaption class="tm-fas-author-area">
<div><cite class="tm-fas-an">Dominique Peres</cite><span class="tm-fas-ar">São Paulo · Architect</span></div>
<div class="tm-fas-dots" aria-label="5 out of 5">
<span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
</div>
</figcaption>
</article>
<article class="tm-fas-cell tm-fas-dark">
<div class="tm-fas-coll-label">Bespoke</div>
<blockquote class="tm-fas-sq">"Three fittings, infinite patience. The result was a suit <em>nothing else in my wardrobe could compete with.</em>"</blockquote>
<span class="tm-fas-deco-num" aria-hidden="true">05</span>
<figcaption class="tm-fas-author-area">
<div><cite class="tm-fas-an">Raj Mehra</cite><span class="tm-fas-ar">London · Barrister</span></div>
<div class="tm-fas-dots" aria-label="5 out of 5">
<span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
</div>
</figcaption>
</article>
</div>
<div class="tm-fas-bot-row">
<article class="tm-fas-cell tm-fas-feat">
<div class="tm-fas-coll-label">Couture · Featured</div>
<blockquote class="tm-fas-bq">"I've dressed from the top maisons for thirty years. What separates <em>Maison Noir</em> is that every garment has a point of view — and the confidence not to explain it."</blockquote>
<figcaption class="tm-fas-author-area">
<div><cite class="tm-fas-an">Countess Vera Ostrovsky</cite><span class="tm-fas-ar">Moscow · Geneva · 30-year patron</span></div>
<div class="tm-fas-dots" aria-label="5 out of 5">
<span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
</div>
</figcaption>
</article>
<div class="tm-fas-score-panel">
<div class="tm-fas-sp-num">9.9</div>
<div class="tm-fas-sp-sub">Patron score</div>
<span class="tm-fas-sp-line" aria-hidden="true"></span>
<div class="tm-fas-sp-count">8,400 verified patrons</div>
</div>
</div>
</section> /* High Fashion — Bodoni Moda editorial. The season-bar ticker uses
::after marquee animation to scroll season tags behind the brand
name. Ghost watermark numbers (01-05) sit at 4% opacity bottom-right.
Five-dot rating system replaces stars for editorial restraint. */
.tm-fas {
--tm-fas-white: #fafafa;
--tm-fas-black: #0a0a0a;
--tm-fas-warm: #f5f2ee;
--tm-fas-offblack: #1a1a1a;
--tm-fas-gray: #888;
--tm-fas-lgray: #d8d5d0;
--tm-fas-text: #1a1a1a;
background: var(--tm-fas-white);
font-family: 'Montserrat', system-ui, sans-serif;
color: var(--tm-fas-text);
min-height: 520px;
overflow: hidden;
}
.tm-fas-season-bar {
background: var(--tm-fas-black);
color: rgba(255,255,255,0.5);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px clamp(20px, 4vw, 48px);
overflow: hidden;
position: relative;
}
.tm-fas-season-bar::after {
content: 'S/S 25 A/W 25 S/S 25 A/W 25 S/S 25 A/W 25 S/S 25 A/W 25 S/S 25 A/W 25';
position: absolute;
font-family: 'Montserrat', system-ui, sans-serif;
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255,255,255,0.12);
white-space: nowrap;
width: 200%;
animation: tm-fas-ticker 14s linear infinite;
}
@keyframes tm-fas-ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.tm-fas-sb-brand {
font-family: 'Bodoni Moda', 'Didot', serif;
font-size: 14px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
position: relative;
z-index: 1;
}
.tm-fas-sb-meta {
font-size: 9px;
letter-spacing: 0.25em;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.tm-fas-top-row {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 280px;
}
.tm-fas-mid-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-top: 1px solid var(--tm-fas-lgray);
}
.tm-fas-bot-row {
display: grid;
grid-template-columns: 2fr 1fr;
border-top: 1px solid var(--tm-fas-lgray);
}
.tm-fas-cell {
padding: clamp(28px, 4vw, 44px);
border-right: 1px solid var(--tm-fas-lgray);
position: relative;
overflow: hidden;
transition: background 0.4s;
display: flex;
flex-direction: column;
}
.tm-fas-cell:last-child { border-right: none; }
.tm-fas-dark { background: var(--tm-fas-black); }
.tm-fas-warm { background: var(--tm-fas-warm); }
.tm-fas-cell:not(.tm-fas-dark):hover { background: var(--tm-fas-warm); }
.tm-fas-dark:hover { background: #111; }
.tm-fas-bq {
font-family: 'Bodoni Moda', 'Didot', serif;
font-style: italic;
font-size: clamp(1.3rem, 2vw, 1.7rem);
line-height: 1.35;
color: var(--tm-fas-text);
margin: 0;
flex: 1;
}
.tm-fas-bq em { font-style: normal; font-weight: 700; }
.tm-fas-dark .tm-fas-bq { color: rgba(250,250,250,0.9); }
.tm-fas-dark .tm-fas-bq em { color: rgba(250,250,250,0.5); }
.tm-fas-sq {
font-family: 'Bodoni Moda', 'Didot', serif;
font-style: italic;
font-size: 1rem;
line-height: 1.5;
color: var(--tm-fas-text);
margin: 0;
flex: 1;
}
.tm-fas-sq em { font-style: normal; font-weight: 700; }
.tm-fas-dark .tm-fas-sq { color: rgba(250,250,250,0.85); }
.tm-fas-deco-num {
font-family: 'Bodoni Moda', 'Didot', serif;
font-size: 6.5rem;
font-weight: 700;
color: var(--tm-fas-text);
opacity: 0.04;
position: absolute;
bottom: -10px;
right: 20px;
line-height: 1;
pointer-events: none;
user-select: none;
}
.tm-fas-dark .tm-fas-deco-num { color: #fff; opacity: 0.05; }
.tm-fas-author-area {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 28px;
position: relative;
z-index: 1;
}
.tm-fas-an {
font-family: 'Montserrat', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
font-style: normal;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tm-fas-text);
line-height: 1.4;
display: block;
}
.tm-fas-dark .tm-fas-an { color: rgba(250,250,250,0.8); }
.tm-fas-ar {
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tm-fas-gray);
margin-top: 4px;
font-weight: 300;
display: block;
}
.tm-fas-dark .tm-fas-ar { color: rgba(250,250,250,0.3); }
.tm-fas-dots {
display: flex;
gap: 5px;
}
.tm-fas-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--tm-fas-text);
}
.tm-fas-dark .tm-fas-dot { background: rgba(250,250,250,0.6); }
.tm-fas-coll-label {
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--tm-fas-gray);
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 10px;
}
.tm-fas-coll-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--tm-fas-lgray);
}
.tm-fas-dark .tm-fas-coll-label { color: rgba(250,250,250,0.3); }
.tm-fas-dark .tm-fas-coll-label::after { background: rgba(255,255,255,0.08); }
.tm-fas-feat .tm-fas-bq { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.tm-fas-score-panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 32px 24px;
background: var(--tm-fas-black);
text-align: center;
}
.tm-fas-sp-num {
font-family: 'Bodoni Moda', 'Didot', serif;
font-size: 3.8rem;
font-weight: 400;
color: rgba(250,250,250,0.9);
line-height: 1;
}
.tm-fas-sp-sub {
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(250,250,250,0.3);
margin-top: 8px;
}
.tm-fas-sp-line {
display: block;
width: 40px;
height: 1px;
background: rgba(250,250,250,0.15);
margin: 18px auto;
}
.tm-fas-sp-count {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(250,250,250,0.4);
}
@media (max-width: 820px) {
.tm-fas-top-row,
.tm-fas-mid-row,
.tm-fas-bot-row { grid-template-columns: 1fr; }
.tm-fas-cell { border-right: none; border-bottom: 1px solid var(--tm-fas-lgray); }
.tm-fas-deco-num { font-size: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
.tm-fas-season-bar::after { animation: none; }
}