.sb-mail {
display: grid; grid-template-columns: 200px 260px 1fr;
min-height: 480px;
font-family: 'Georgia', 'Times New Roman', serif;
background: #f4f0e6; color: #1a1a1a;
border-radius: 4px; overflow: hidden;
border: 1px solid #1a1a1a;
}
.sb-mail-folders {
padding: 18px 14px;
background: #efe9da;
border-right: 1px solid #1a1a1a;
display: flex; flex-direction: column; gap: 14px;
}
.sb-mail-folders header { padding-bottom: 12px; border-bottom: 2px solid #1a1a1a; }
.sb-mail-folders strong { display: block; font-family: 'Playfair Display', 'Georgia', serif; font-size: 19px; font-weight: 900; letter-spacing: -0.01em; color: #1a1a1a; line-height: 1; }
.sb-mail-folders small { display: block; font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; color: #c43a2c; text-transform: uppercase; margin-top: 4px; }
.sb-mail-folders ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-mail-folders a {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 4px; border-bottom: 1px dotted #c0b6a0;
font-family: 'Georgia', serif;
font-size: 13.5px; color: #1a1a1a; text-decoration: none;
transition: color 0.12s, padding-left 0.12s;
}
.sb-mail-folders a:hover { padding-left: 8px; color: #c43a2c; }
.sb-mail-folders a[aria-current="page"] { color: #c43a2c; font-weight: 700; padding-left: 8px; border-bottom-color: #c43a2c; }
.sb-mail-folders a span { font-family: 'Inter', sans-serif; font-size: 10.5px; padding: 1px 7px; border-radius: 0; background: #c43a2c; color: #fff; font-weight: 700; letter-spacing: 0.04em; }
.sb-mail-folders a span.sb-mail-muted { background: transparent; color: #6a6055; border: 1px solid #6a6055; }
.sb-mail-folders footer { margin-top: auto; padding-top: 10px; border-top: 1px solid #1a1a1a; font-family: 'Inter', sans-serif; font-size: 10.5px; color: #6a6055; letter-spacing: 0.06em; text-align: center; font-style: italic; }
.sb-mail-bullet { color: #c43a2c; }
.sb-mail-list { background: #fdf9ec; border-right: 1px solid #1a1a1a; display: flex; flex-direction: column; overflow-y: auto; }
.sb-mail-list-head { padding: 14px 16px 10px; border-bottom: 1px solid #c0b6a0; display: flex; align-items: baseline; justify-content: space-between; }
.sb-mail-list-head h3 { margin: 0; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #6a6055; }
.sb-mail-list-head span { font-family: 'Inter', sans-serif; font-size: 10px; color: #c43a2c; font-weight: 700; }
.sb-mail-item { position: relative; padding: 14px 18px 14px 16px; border-bottom: 1px solid #e0d8c4; cursor: pointer; transition: background 0.12s; }
.sb-mail-item:hover { background: rgba(196,58,44,0.04); }
.sb-mail-item.active { background: #fff; padding-left: 22px; }
.sb-mail-item.active::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; background: #c43a2c; }
.sb-mail-item strong { display: block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: #1a1a1a; text-transform: uppercase; }
.sb-mail-item em { display: block; font-family: 'Playfair Display', 'Georgia', serif; font-size: 15px; font-style: italic; color: #1a1a1a; margin-top: 2px; line-height: 1.2; }
.sb-mail-item span { display: block; font-family: 'Georgia', serif; font-size: 12.5px; color: #4a4035; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.sb-mail-item time { position: absolute; top: 14px; right: 18px; font-family: 'Inter', sans-serif; font-size: 10.5px; color: #6a6055; font-weight: 600; }
.sb-mail-read { padding: 28px 32px; overflow-y: auto; background: #fdf9ec; }
.sb-mail-read header { padding-bottom: 14px; border-bottom: 2px solid #1a1a1a; margin-bottom: 18px; }
.sb-mail-rule { display: inline-block; width: 32px; height: 3px; background: #c43a2c; margin-bottom: 10px; }
.sb-mail-cat { display: block; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; color: #c43a2c; margin-bottom: 6px; }
.sb-mail-read h2 { margin: 0 0 8px; font-family: 'Playfair Display', 'Georgia', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: #1a1a1a; line-height: 0.96; letter-spacing: -0.02em; }
.sb-mail-read header p { margin: 0; font-family: 'Inter', sans-serif; font-size: 11.5px; color: #6a6055; letter-spacing: 0.04em; }
.sb-mail-read header p strong { color: #1a1a1a; font-weight: 700; }
.sb-mail-body { margin: 0 0 12px; font-size: 14.5px; color: #2a241c; line-height: 1.7; max-width: 540px; }
.sb-mail-lead { font-size: 16px; }
.sb-mail-drop { float: left; font-family: 'Playfair Display', 'Georgia', serif; font-size: 56px; font-weight: 900; line-height: 0.85; padding: 4px 8px 0 0; color: #c43a2c; }
@media (max-width: 720px) {
.sb-mail { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
.sb-mail-folders, .sb-mail-list { border-right: 0; border-bottom: 1px solid #1a1a1a; }
} <div class="sb-mail">
<aside class="sb-mail-folders" aria-label="Folders">
<header>
<strong>The Inbox</strong>
<small>Vol. XII · No. 47</small>
</header>
<nav aria-label="Folders">
<ul>
<li><a href="#!" aria-current="page">Inbox<span>12</span></a></li>
<li><a href="#!">Starred</a></li>
<li><a href="#!">Drafts<span class="sb-mail-muted">3</span></a></li>
<li><a href="#!">Sent</a></li>
<li><a href="#!">Archive</a></li>
<li><a href="#!">Trash</a></li>
</ul>
</nav>
<footer>
<span class="sb-mail-bullet" aria-hidden="true">•</span>
Editorial since 1923
</footer>
</aside>
<section class="sb-mail-list" aria-label="Message list">
<header class="sb-mail-list-head">
<h3>This morning</h3>
<span>4 unread</span>
</header>
<article class="sb-mail-item">
<strong>Anya Petrova</strong>
<em>Re: Q3 launch deck</em>
<span>Looks great — one tweak on slide 14.</span>
<time>9:14</time>
</article>
<article class="sb-mail-item active">
<strong>Daichi Sato</strong>
<em>Friday demo recap</em>
<span>Here's the recording + the action items we…</span>
<time>11:42</time>
</article>
<article class="sb-mail-item">
<strong>Lena Müller</strong>
<em>Invoice #2143</em>
<span>Attached, due in 30 days.</span>
<time>13:08</time>
</article>
<article class="sb-mail-item">
<strong>Carlos Reyes</strong>
<em>Coffee Thursday?</em>
<span>I'll be near the office around 11.</span>
<time>14:30</time>
</article>
</section>
<article class="sb-mail-read">
<header>
<span class="sb-mail-rule" aria-hidden="true"></span>
<span class="sb-mail-cat">DAILY DIGEST · OPS</span>
<h2>Friday demo recap.</h2>
<p>From <strong>Daichi Sato</strong> · <time>11:42 AM</time> · 4 min read</p>
</header>
<p class="sb-mail-body sb-mail-lead"><span class="sb-mail-drop">H</span>ey team — here's the recording from today plus the four action items we landed on. I'll send a separate Loom for the dashboard rewrite tomorrow.</p>
<p class="sb-mail-body">A short follow-up on Anya's slide-14 tweak: I think we can land that before the demo on Tuesday.</p>
</article>
</div> Live preview Edit any tab — preview updates live Ready