/* ============================================================
main26 — shared design-system stylesheet for the new site.
Plain static asset (not an EE template) — served directly by
the web server as a normal .css file, same as /assets19/ and
/assets23/, so its Content-Type is just whatever the server
gives any .css file. No EE Template Type setting involved.
Every new-design page links to it with:
This file is the single source of truth for every component
used across the new templates (header/footer, page-title,
subnav, hero-frame, letter-body, stage-card grid, staff
directory tabs, newsletter list, resource cards, data table).
Previously this CSS was pasted into the of every page
template individually — a one-line fix (e.g. the crest size,
the subnav padding bug) had to be hand-applied to 6+ files each
time. Centralising it here means every current and future page
template just links to this one file.
============================================================ */
:root{
--forest:#6E1F2B;
--forest-deep:#48141C;
--cream:#F6F1E4;
--paper:#FFFDF8;
--brass:#A9812F;
--brass-light:#D8B968;
--brick:#3E2A1A;
--ink:#1B1B17;
--ink-soft:#4B5049;
--line: rgba(27,27,23,0.12);
--radius: 2px;
--serif: "Fraunces", Georgia, serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
font-family: var(--sans);
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media (prefers-reduced-motion: reduce){
*{animation:none !important; transition:none !important;}
}
:focus-visible{
outline: 2px solid var(--brass);
outline-offset: 3px;
}
/* ---------- Eyebrow / small caps utility ---------- */
.eyebrow{
font-family: var(--sans);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brass);
}
/* ---------- Header ---------- */
header.site{
position: sticky;
top:0;
z-index: 40;
background: var(--cream);
border-bottom: 1px solid var(--brass);
box-shadow: 0 2px 18px rgba(27,27,23,0.06);
}
.header-row{
display:flex;
align-items:center;
justify-content:space-between;
gap: 24px;
padding: 16px 0;
}
.logo-block{
display:flex;
align-items:center;
gap:14px;
color: var(--forest-deep);
min-width:0;
flex-shrink:1;
}
.logo-mark{
width:76px; height:76px;
border:2px solid var(--forest);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
background: var(--paper);
overflow:hidden;
padding:5px;
box-shadow: 0 3px 10px rgba(27,27,23,0.14);
}
.logo-mark img{ width:100%; height:100%; object-fit:contain; }
.logo-text{
font-family: var(--serif);
font-weight: 600;
font-size: 23px;
letter-spacing: 0.005em;
line-height:1.15;
color: var(--forest-deep);
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
min-width:0;
}
.logo-text small{
display:block;
font-family: var(--sans);
font-weight: 600;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brass);
margin-top:5px;
}
nav.primary{
display:flex;
align-items:center;
gap: 28px;
}
nav.primary > ul{
list-style:none;
display:flex;
align-items:center;
gap: 26px;
margin:0; padding:0;
}
nav.primary > ul > li > a{
color: var(--forest-deep);
font-size: 14.5px;
font-weight: 600;
padding: 6px 2px;
border-bottom: 1px solid transparent;
transition: border-color .15s ease, color .15s ease;
}
nav.primary > ul > li > a:hover{
border-color: var(--brass);
color: var(--brick);
}
.nav-cta{
background: var(--forest-deep);
color: var(--cream) !important;
font-weight:700;
padding: 9px 18px;
border-radius: var(--radius);
font-size: 13.5px;
letter-spacing: 0.02em;
white-space:nowrap;
transition: background .15s ease;
}
.nav-cta:hover{ background: var(--forest); }
.menu-trigger{
display:none;
background:none;
border:1px solid var(--forest);
border-radius:3px;
width:40px; height:36px;
flex-shrink:0;
color: var(--forest-deep);
font-size: 18px;
cursor:pointer;
}
/* ---------- Dropdown menus ---------- */
nav.primary li{ position:relative; }
nav.primary li.has-dropdown > a{
display:inline-flex;
align-items:center;
gap:5px;
}
nav.primary li.has-dropdown > a::after{
content:"";
width:6px; height:6px;
border-right:1.5px solid currentColor;
border-bottom:1.5px solid currentColor;
transform: rotate(45deg);
opacity:0.75;
}
.dropdown{
list-style:none;
margin:0; padding:8px 0;
position:absolute;
top: calc(100% + 14px);
left:0;
min-width: 270px;
background: var(--paper);
border:1px solid var(--brass);
box-shadow: 0 18px 34px rgba(21,10,10,0.22);
opacity:0;
visibility:hidden;
transform: translateY(6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
z-index: 50;
}
nav.primary li.has-dropdown:hover > .dropdown,
nav.primary li.has-dropdown:focus-within > .dropdown{
opacity:1;
visibility:visible;
transform: translateY(0);
}
.dropdown li{ position:relative; }
.dropdown li > a{
display:block;
padding: 10px 20px;
font-size: 13.5px;
font-weight:500;
color: var(--ink);
border-bottom:1px solid transparent;
}
.dropdown li > a:hover{
background: var(--cream);
color: var(--forest-deep);
}
.dropdown .dropdown-divider{
height:1px;
margin: 6px 16px;
background: var(--line);
}
.dropdown li.has-dropdown.sub > .dropdown{
top: -9px;
left: calc(100% + 10px);
}
.dropdown li.has-dropdown.sub > a::after{
content:"";
float:right;
width:6px; height:6px;
border-right:1.5px solid currentColor;
border-bottom:1.5px solid currentColor;
transform: rotate(-45deg);
margin-top:4px;
opacity:0.6;
}
@media (max-width: 980px){
nav.primary{
position:fixed;
inset: 66px 0 0 0;
background: var(--cream);
flex-direction:column;
align-items:flex-start;
padding: 20px 24px 32px;
overflow-y:auto;
display:none;
gap: 0;
}
nav.primary.open{ display:flex; }
nav.primary > ul{
display:flex;
flex-direction:column;
width:100%;
gap:0;
}
nav.primary > ul > li{ width:100%; border-bottom:1px solid var(--line); }
nav.primary > ul > li > a{ display:flex; justify-content:space-between; padding:14px 4px; }
.dropdown{
position:static;
opacity:1; visibility:visible; transform:none;
display:none;
border:none;
box-shadow:none;
background: rgba(27,27,23,0.03);
min-width:0;
width:100%;
padding: 0 0 8px 14px;
}
li.has-dropdown.open > .dropdown{ display:block; }
.dropdown li > a{ color: var(--ink); padding: 9px 10px; font-size:13.5px; }
.dropdown li > a:hover{ background:transparent; color: var(--brick); }
.dropdown li.has-dropdown.sub > .dropdown{ position:static; }
.nav-cta{ margin-top:18px; }
.menu-trigger{ display:block; }
}
@media (max-width: 480px){
.wrap{ padding: 0 18px; }
.header-row{ gap:12px; padding: 14px 0 13px; }
.logo-block{ gap:10px; }
.logo-mark{ width:58px; height:58px; }
.logo-text{ font-size:17px; }
.logo-text small{
white-space: normal;
font-size: 8.5px;
letter-spacing: 0.04em;
line-height: 1.4;
margin-top: 4px;
}
}
/* ---------- Page title band (shared sub-page header) ---------- */
.page-title{
background: var(--cream);
border-bottom: 1px solid var(--brass);
padding: 40px 0 36px;
}
.breadcrumb{
display:flex;
align-items:center;
flex-wrap:wrap;
gap: 8px;
font-size: 13px;
color: var(--ink-soft);
margin: 0 0 14px;
}
.breadcrumb a:hover{ color: var(--forest); }
.breadcrumb .sep{ opacity:0.5; }
.breadcrumb [aria-current]{ color: var(--forest-deep); font-weight:600; }
.page-title .eyebrow{ display:block; margin-bottom: 10px; }
.page-title h1{
font-family: var(--serif);
font-weight: 500;
font-size: clamp(30px, 3.6vw, 44px);
line-height: 1.1;
margin: 0;
color: var(--forest-deep);
}
.page-title .lede{
margin: 16px 0 0;
max-width: 62ch;
font-size: 16px;
line-height:1.6;
color: var(--ink-soft);
}
/* ---------- Section sub-nav (shared "within this section" strip) ---------- */
.subnav{
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.subnav-row{
display:flex;
align-items:center;
gap: 28px;
padding-top: 14px;
padding-bottom: 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.subnav-label{
font-family: var(--sans);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brick);
flex-shrink:0;
white-space:nowrap;
}
.subnav ul{
list-style:none;
display:flex;
gap: 24px;
margin:0; padding:0;
white-space:nowrap;
}
.subnav a{
font-size: 13.5px;
font-weight:600;
color: var(--ink-soft);
padding-bottom: 3px;
border-bottom: 1px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.subnav a:hover{ color: var(--forest-deep); border-color: var(--brass); }
.subnav a[aria-current]{ color: var(--forest-deep); border-color: var(--brass); }
/* ---------- Hero (retained for site-wide reuse) ---------- */
.hero{
background: var(--forest-deep);
color: var(--cream);
position:relative;
overflow:hidden;
}
.btn{
display:inline-flex;
align-items:center;
gap:8px;
padding: 13px 26px;
border-radius: var(--radius);
font-weight:600;
font-size: 14.5px;
letter-spacing: 0.01em;
border: 1px solid transparent;
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-brass{
background: var(--brass);
color: var(--forest-deep);
}
.btn-brass:hover{ background: var(--brass-light); transform: translateY(-1px); }
.btn-outline{
border-color: rgba(246,241,228,0.4);
color: var(--cream);
}
.btn-outline:hover{ border-color: var(--brass-light); color: var(--brass-light); }
/* ---------- Section shell ---------- */
section{ padding: 88px 0; }
section.tight{ padding: 64px 0; }
.section-head{
max-width: 760px;
margin-bottom: 48px;
}
.section-head .eyebrow{ margin-bottom: 12px; display:block; }
.section-head h2{
font-family: var(--serif);
font-weight: 500;
font-size: clamp(28px, 3vw, 38px);
line-height:1.15;
margin: 0 0 12px;
color: var(--forest-deep);
}
.section-head p{
color: var(--ink-soft);
font-size: 16px;
line-height:1.6;
margin:0;
}
.section-head .link-arrow{ margin-top: 18px; }
/* ---------- Page intro (short lede under a page title) ---------- */
.page-intro{ max-width: 68ch; margin-bottom: 48px; }
.page-intro p{ font-size:17px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px; }
.page-intro p:last-child{ margin-bottom:0; }
/* ---------- Framed photo (reused from the homepage hero) ---------- */
.hero-frame{
position:relative;
border: 1px solid rgba(216,185,104,0.4);
padding: 14px;
}
.hero-frame img{
width:100%;
height: 420px;
object-fit: cover;
object-position: center 30%;
filter: saturate(0.92) contrast(1.03);
}
.hero-frame::before{
content:"";
position:absolute;
inset: -1px;
border: 1px solid rgba(216,185,104,0.18);
pointer-events:none;
}
.hero-frame-cap{
position:absolute;
left: 26px; bottom: 26px;
background: var(--forest-deep);
border: 1px solid var(--brass);
padding: 10px 16px;
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: var(--cream);
}
@media (max-width: 480px){
.hero-frame img{ height: 260px; }
.hero-frame-cap{ left: 16px; bottom: 16px; padding: 8px 13px; font-size: 13px; }
}
/* ---------- Content heading (heading-only intro block) ---------- */
.intro-block{ max-width: 62ch; }
.intro-block h2{
font-family: var(--serif);
font-weight:500;
font-size: clamp(26px,2.8vw,34px);
margin: 0 0 18px;
color: var(--forest-deep);
}
.intro-block .eyebrow{ display:block; margin-bottom: 16px; }
.intro-block p{
font-size: 18px;
line-height: 1.65;
color: var(--ink-soft);
margin: 0;
}
/* ---------- Letter body (full-width editorial columns for rich text) ---------- */
.letter-body{
column-count: 2;
column-gap: 56px;
}
.letter-body p{
font-size: 16px;
line-height: 1.75;
color: var(--ink);
margin: 0 0 22px;
}
.letter-body h3{
column-span: all;
font-family: var(--serif);
font-weight: 500;
font-size: 21px;
color: var(--forest-deep);
margin: 6px 0 16px;
}
.letter-body table,
.letter-body .data-table-wrap{
column-span: all;
margin: 4px 0 28px;
}
.letter-body table{
width: 100%;
border-collapse: collapse;
}
.letter-body table:not(.data-table) th,
.letter-body table:not(.data-table) td{
text-align: left;
padding: 14px 20px;
font-size: 14.5px;
line-height: 1.5;
color: var(--ink);
border-bottom: 1px solid var(--line);
border-top: none !important;
}
.letter-body table:not(.data-table){ border-top: 1px solid var(--brass); }
.letter-body table:not(.data-table) th:first-child,
.letter-body table:not(.data-table) td:first-child{ padding-left: 0; }
.letter-body table:not(.data-table) thead th{
font-family: var(--sans);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brick);
}
@media (max-width: 600px){
.letter-body table:not(.data-table) thead{ display:none; }
.letter-body table:not(.data-table),
.letter-body table:not(.data-table) tbody,
.letter-body table:not(.data-table) tr,
.letter-body table:not(.data-table) td{ display:block; width:100%; }
.letter-body table:not(.data-table) tr{ padding: 14px 0; border-bottom: 1px solid var(--line); }
.letter-body table:not(.data-table) td{ border-bottom:none; padding: 1px 0; }
}
.letter-body .signature{
column-span: all;
margin-top: 8px;
padding-top: 26px;
border-top: 1px solid var(--line);
}
.letter-body .signature .name{
display:block;
font-family: var(--serif);
font-style: italic;
font-size: 19px;
color: var(--forest-deep);
}
.letter-body .signature .role{
display:block;
font-family: var(--sans);
font-style: normal;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brass);
margin-top: 6px;
}
@media (max-width: 720px){
.letter-body{ column-count: 1; }
}
.link-arrow{
font-weight:600;
font-size: 14.5px;
color: var(--forest);
border-bottom: 1px solid var(--brass);
padding-bottom: 3px;
display:inline-flex;
align-items:center;
gap:8px;
}
.link-arrow:hover{ color: var(--brick); }
/* ---------- Stage / feature cards ---------- */
section.tours{ background: var(--cream); }
.stage-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.stage-card{
background: var(--paper);
border: 1px solid var(--line);
}
.stage-card img{ width:100%; height:190px; object-fit:cover; }
.stage-card-body{ padding: 24px; }
.stage-card .eyebrow{ display:block; margin-bottom:8px; }
.stage-card h3{
font-family: var(--serif);
font-weight:500;
font-size:21px;
margin: 0 0 10px;
color: var(--forest-deep);
}
.stage-card p{
color: var(--ink-soft);
font-size: 14.5px;
line-height:1.6;
margin: 0 0 18px;
}
.stage-card .link-arrow{ font-size:13.5px; }
@media (max-width: 900px){
.stage-grid{ grid-template-columns: 1fr; }
}
hr.rule{
border:none;
border-top: 1px solid var(--line);
margin: 0;
}
/* ---------- Staff directory tabs ---------- */
.tab-list{
display:flex;
align-items:center;
gap: 0 32px;
border-bottom: 1px solid var(--line);
margin-bottom: 56px;
}
.tab-btn{
font-family: var(--sans);
font-weight: 600;
font-size: 14px;
color: var(--ink-soft);
background: none;
border: none;
padding: 14px 2px;
margin-bottom: -1px;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.tab-btn:hover{ color: var(--forest-deep); }
.tab-btn[aria-selected="true"]{
color: var(--forest-deep);
border-bottom-color: var(--brass);
}
.tab-panel[hidden]{ display:none; }
.tab-panel:not([hidden]){ min-height: 520px; }
@media (max-width: 720px){
.tab-list{
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 0 26px;
}
.tab-btn{ white-space:nowrap; }
}
/* ---------- Staff group heading ---------- */
.group-heading{
font-family: var(--serif);
font-weight: 500;
font-size: 21px;
color: var(--forest-deep);
margin: 0 0 28px;
padding-bottom: 12px;
border-bottom: 1px solid var(--brass);
}
.group-heading:not(:first-child){ margin-top: 64px; }
/* ---------- Staff grid / card ---------- */
.staff-grid{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 36px 24px;
}
.staff-photo{
width:100%;
aspect-ratio: 1 / 1;
overflow:hidden;
border: 1px solid var(--line);
background: var(--cream);
margin-bottom: 14px;
}
.staff-photo img{
width:100%;
height:100%;
object-fit: cover;
object-position: center top;
}
.staff-photo.no-photo{
display:flex;
align-items:center;
justify-content:center;
background: var(--forest-deep);
border-color: var(--forest-deep);
}
.staff-photo.no-photo span{
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: 24px;
color: var(--brass-light);
}
.staff-name{
font-family: var(--serif);
font-weight: 600;
font-size: 15px;
line-height: 1.3;
color: var(--forest-deep);
margin: 0 0 4px;
}
.staff-quals{
font-size: 11.5px;
line-height: 1.5;
color: var(--ink-soft);
margin: 0 0 3px;
}
.staff-role{
font-size: 12.5px;
font-weight: 600;
line-height: 1.4;
color: var(--ink);
margin: 0;
}
@media (max-width: 480px){
.staff-grid{ grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 28px 16px; }
}
/* ---------- Newsletter list / document list ----------
Same row pattern used for two different content types: external
newsletter links (.newsletter-*) and downloadable documents
(.doc-*, used by policies) — kept as one shared rule set since
they're visually and structurally identical, just named for
whichever page is using them. ---------- */
.newsletter-list, .doc-list{ border-top: 1px solid var(--brass); }
.newsletter-row, .doc-row{
display:flex;
align-items:center;
justify-content:space-between;
gap: 24px;
padding: 20px 4px;
border-bottom: 1px solid var(--line);
transition: background .15s ease;
}
.newsletter-row:hover, .doc-row:hover{ background: var(--cream); }
.newsletter-title, .doc-title{
font-family: var(--serif);
font-weight: 500;
font-size: 17px;
color: var(--forest-deep);
}
.newsletter-cta, .doc-cta{
display:inline-flex;
align-items:center;
gap: 6px;
font-weight: 600;
font-size: 13.5px;
color: var(--forest);
white-space: nowrap;
flex-shrink:0;
}
.newsletter-cta .ext, .doc-cta .ext{ color: var(--brass); font-size:15px; }
.newsletter-row:hover .newsletter-cta, .doc-row:hover .doc-cta{ color: var(--brick); }
@media (max-width: 480px){
.newsletter-row, .doc-row{ flex-direction:column; align-items:flex-start; gap:8px; padding:18px 4px; }
}
/* ---------- Resource cards (single-download tiles) ---------- */
.resource-grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.resource-card{
border: 1px solid var(--line);
padding: 24px;
display:flex;
flex-direction:column;
gap: 16px;
transition: border-color .15s ease;
}
.resource-card:hover{ border-color: var(--brass); }
.resource-card h3{
font-family: var(--serif);
font-weight: 500;
font-size: 19px;
color: var(--forest-deep);
margin: 0;
}
.resource-card .link-arrow{ margin-top:auto; font-size: 13px; }
@media (max-width: 900px){
.resource-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
.resource-grid{ grid-template-columns: 1fr; }
}
/* ---------- Data table (events / dated listings) ---------- */
.data-table-wrap{ border-top: 1px solid var(--brass); }
.data-table{
width:100%;
border-collapse: collapse;
}
.data-table thead th{
text-align:left;
font-family: var(--sans);
font-weight:700;
font-size:12px;
letter-spacing:0.08em;
text-transform:uppercase;
color: var(--brick);
padding: 16px 20px;
border-bottom: 1px solid var(--line);
}
.data-table thead th:first-child, .data-table tbody td:first-child{ padding-left:0; }
.data-table tbody td{
padding: 15px 20px;
font-size: 14.5px;
color: var(--ink);
border-bottom: 1px solid var(--line);
}
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table .col-date{
font-family: var(--serif);
font-weight: 600;
color: var(--forest-deep);
white-space: nowrap;
width: 230px;
}
/* Section-divider row inside a longer table (e.g. fee bands within one table) */
.data-table tbody tr.row-group td{
padding: 22px 20px 10px;
font-family: var(--sans);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--forest-deep);
}
.data-table tbody tr.row-group:first-child td{ padding-top: 4px; }
/* Footnote row inside a table (asterisked caveats, "no charge" lines) */
.data-table tbody tr.row-note td{
font-family: var(--sans);
font-style: italic;
font-size: 13px;
color: var(--ink-soft);
}
.table-note{
margin: 28px 0 0;
font-size: 13.5px;
color: var(--ink-soft);
font-style: italic;
}
@media (max-width: 600px){
.data-table thead{ display:none; }
.data-table, .data-table tbody, .data-table tr, .data-table tbody td{ display:block; width:100%; }
.data-table tbody tr{ padding: 16px 0; border-bottom: 1px solid var(--line); }
.data-table tbody tr:last-child{ border-bottom:none; }
.data-table tbody td{ border-bottom:none; padding: 1px 0; }
.data-table .col-date{ font-size:13px; margin-bottom:3px; }
.data-table tbody tr.row-group td{ padding: 16px 0 4px; }
.data-table td[data-label]::before{
content: attr(data-label);
display:block;
font-family: var(--sans);
font-weight:700;
font-size:11px;
letter-spacing:0.06em;
text-transform:uppercase;
color: var(--brick);
margin-bottom:3px;
}
}
/* ---------- Term block (repeated heading + rich text, term_dates) ---------- */
.term-block{ max-width: 720px; }
.term-block:not(:first-child){
margin-top: 72px;
padding-top: 8px;
border-top: 1px solid var(--line);
}
.term-block .rich-text{
font-size: 16px;
line-height: 1.75;
color: var(--ink);
}
.term-block .rich-text p{ margin: 0 0 16px; }
.term-block .rich-text p:last-child{ margin-bottom: 0; }
.term-block .rich-text ul, .term-block .rich-text ol{ margin: 0 0 16px; padding-left: 22px; }
.term-block .rich-text li{ margin-bottom: 6px; }
.term-block .rich-text strong{ color: var(--forest-deep); }
.term-block .rich-text .data-table-wrap{ margin: 20px 0 4px; }
.term-block .rich-text .table-note{ margin-top: 16px; }
/* ---------- Doc body (single-column structured page: fees, policies, etc.)
Drop this wrapper into a .letter-body field to opt a page with mixed
prose + tables out of the newspaper-style two-column flow — the
column-count:2 layout that .letter-body normally uses (fine for a
single flowing letter) reads as jumbled once several full-width
tables interrupt half-width text columns. .doc-body reuses the
existing .term-block/.rich-text pattern from term_dates for a calm,
single-column, clearly-divided layout instead. ---------- */
.letter-body > .doc-body{ column-span: all; }
/* ---------- Clubs grid (beyond_classroom weekday timetable) ---------- */
.clubs-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.club-entry{
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
.club-entry:last-child{ border-bottom:none; }
.club-title{
font-weight: 600;
font-size: 14.5px;
color: var(--forest-deep);
margin: 0;
}
.club-desc{
font-size: 13.5px;
line-height: 1.5;
color: var(--ink-soft);
margin: 4px 0 0;
}
@media (max-width: 720px){
.clubs-grid{ grid-template-columns: 1fr; gap: 40px; }
}
/* ---------- Video frame (Bunny Stream embed, flythrough_main) ----------
We author the