/* =============================================================================
ERB ACADEMY V2 — erb.css
Single shared stylesheet. Loaded by every page.
Concept: "Academic Editorial" (see ERB-Academy-V2-Design-System.md)
Fonts are loaded via in each page , not @import,
so they start downloading before this file is parsed.
ORDER OF THIS FILE
1 Tokens (colour, type, space, grid, radius, motion)
2 Reset
3 Type primitives
4 Layout: shell, section, the ruled margin, grids
5 Annotation (signature device)
6 Buttons / links / forms / chips
7 Header + navigation + footer
8 Rows, cards, badges, product, testimonial, quotation, dividers, tables
9 Focus + motion
10 Mobile patterns
11 Page blocks (homepage)
12 Utilities
========================================================================== */
/* -----------------------------------------------------------------------------
1 · COLOUR TOKENS
Four hues only: paper, ink, cobalt, marking red. Gold is a fifth, rationed.
-------------------------------------------------------------------------- */
:root{
/* Grounds — warm off-white paper stock */
--paper: #FAF7F1; /* primary ground */
--paper-sunk: #F2EEE5; /* recessed panel, table stripe, code */
--paper-edge: #E3DDD0; /* hairline rule on paper */
--paper-rule: #CFC7B6; /* stronger rule, margin line */
/* Ink — deep navy, used for text and for dark grounds */
--ink: #0E1B30; /* body text · dark section ground */
--ink-raised: #16263F; /* raised surface on a dark ground */
--ink-rule: #2A3A54; /* hairline on dark */
--ink-soft: #4E5A6E; /* secondary text on paper */
--ink-faint: #666C77; /* captions, meta, disabled — 4.9:1 on paper, 4.6:1 on paper-sunk */
/* Cobalt — the academic accent. Links, focus, free resources, actions. */
--cobalt: #1D3FD6;
--cobalt-deep: #142CA0; /* hover / pressed */
--cobalt-wash: #E6EAFB; /* tint fill */
--cobalt-on-dark:#7086E5; /* cobalt as text on a dark ground */
/* Marking red — the examiner's pen. Annotation and correction ONLY. */
--red: #C4382C;
--red-on-dark: #D46F67; /* the same ink, legible on a dark ground */
--red-wash: #F8E9E5;
/* Gold — premium and editorial moments. AD ASTRA. Rationed. */
--gold: #B8891F; /* RULES AND BORDERS ONLY — 2.96:1, fails as text */
--gold-ink: #8A6617; /* gold as TEXT on paper — 4.9:1 on paper, 4.5:1 on paper-sunk */
--gold-bright: #D8A23B; /* on ink grounds only */
--gold-wash: #F6EEDC;
/* Text on dark grounds */
--on-ink: #F3EFE6;
--on-ink-soft: #A9B4C6;
/* ---------------------------------------------------------------------------
2 · TYPOGRAPHY
------------------------------------------------------------------------ */
--font-display: "Newsreader", Georgia, "Times New Roman", serif;
--font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--w-light:300; --w-book:400; --w-med:500; --w-semi:600; --w-bold:700;
/* 3 · RESPONSIVE TYPE SCALE — fluid, no breakpoint jumps */
--t-2xs: 0.6875rem; /* 11 · mark allocations */
--t-xs: 0.75rem; /* 12 · eyebrows, meta */
--t-sm: 0.8125rem; /* 13 · captions, legal */
--t-md: 0.9375rem; /* 15 · UI, table cells */
--t-base: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);/* 17→19 · body */
--t-lead: clamp(1.1875rem, 1.10rem + 0.40vw, 1.375rem); /* 19→22 · standfirst */
--t-h4: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
--t-h3: clamp(1.375rem, 1.22rem + 0.72vw, 1.75rem);
--t-h2: clamp(1.75rem, 1.42rem + 1.55vw, 2.625rem);
--t-h1: clamp(2.25rem, 1.66rem + 2.80vw, 3.75rem);
--t-hero: clamp(2.75rem, 1.80rem + 4.40vw, 5.25rem);
--lh-tight: 1.08;
--lh-head: 1.16;
--lh-snug: 1.35;
--lh-body: 1.62;
--lh-loose: 1.75;
--tr-tight: -0.02em;
--tr-none: 0em;
--tr-wide: 0.06em;
--tr-caps: 0.13em; /* eyebrows and labels */
--measure: 66ch; /* body column */
--measure-tight:52ch; /* standfirst, pull quotes */
/* 4 · SPACING SCALE — 4px base, editorial generosity at the top end */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
--s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
--section-y: clamp(56px, 8vw, 128px); /* vertical rhythm between sections */
--gutter: clamp(20px, 4.5vw, 40px); /* page edge padding */
/* 5 · GRID */
--maxw: 1180px; /* standard content shell */
--maxw-wide: 1400px; /* full-bleed editorial moments */
--maxw-text: 720px; /* long-form reading column */
--margin-col: clamp(0px, 8vw, 132px); /* THE MARGIN — signature device */
--col-gap: clamp(20px, 3vw, 40px);
/* 6 · RADIUS — deliberately near-zero. Not everything is a pill. */
--r-0: 0; /* cards, panels, dividers, images — the default */
--r-1: 2px; /* buttons, inputs, chips — touch affordance only */
--r-2: 4px; /* maximum permitted anywhere in the system */
--r-full: 999px; /* PERMITTED ONLY on the status dot and the avatar */
/* 7 · ELEVATION — paper does not float. Rules and tint before shadow. */
--shadow-none: none;
--shadow-lift: 0 1px 0 var(--paper-rule), 0 12px 28px -22px rgba(14,27,48,.45);
--shadow-dark: 0 18px 44px -26px rgba(0,0,0,.7);
/* 8 · BORDERS */
--hair: 1px solid var(--paper-edge);
--rule: 1px solid var(--paper-rule);
--hair-dark: 1px solid var(--ink-rule);
--bar: 3px; /* the margin rule weight */
/* 9 · MOTION */
--dur-micro: 140ms;
--dur-base: 240ms;
--dur-enter: 420ms;
--ease: cubic-bezier(.2,.62,.24,1);
--ease-out: cubic-bezier(0,.64,.28,1);
}
/* -----------------------------------------------------------------------------
RESET
-------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--font-body);
font-size:var(--t-base);
line-height:var(--lh-body);
font-variant-numeric:tabular-nums;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
/* -----------------------------------------------------------------------------
TYPE PRIMITIVES
Newsreader carries every heading. Instrument Sans carries everything read
at speed: UI, tables, prices, timetables.
-------------------------------------------------------------------------- */
.erb-h1{ font-family:var(--font-display); font-size:var(--t-h1); font-weight:var(--w-book);
line-height:var(--lh-tight); letter-spacing:var(--tr-tight); margin:0; }
.erb-h2{ font-family:var(--font-display); font-size:var(--t-h2); font-weight:var(--w-book);
line-height:var(--lh-head); letter-spacing:var(--tr-tight); margin:0; }
.erb-h3{ font-family:var(--font-display); font-size:var(--t-h3); font-weight:var(--w-med);
line-height:var(--lh-head); margin:0; }
.erb-h4{ font-family:var(--font-body); font-size:var(--t-h4); font-weight:var(--w-semi);
line-height:var(--lh-snug); margin:0; }
.erb-lead{ font-size:var(--t-lead); line-height:var(--lh-snug); color:var(--ink-soft);
max-width:var(--measure-tight); font-weight:var(--w-book); }
.erb-body{ max-width:var(--measure); }
.erb-caption{ font-size:var(--t-sm); line-height:var(--lh-snug); color:var(--ink-faint); }
/* Eyebrow — the section's classification mark, set like a paper's header line */
.erb-eyebrow{
font-family:var(--font-body); font-size:var(--t-xs); font-weight:var(--w-semi);
letter-spacing:var(--tr-caps); text-transform:uppercase; color:var(--ink-faint);
margin:0 0 var(--s-3);
}
.erb-eyebrow--cobalt{ color:var(--cobalt); }
.erb-eyebrow--gold{ color:var(--gold-ink); }
/* Drop the first-paragraph indent convention of print; use a standfirst instead */
.erb-standfirst{
font-family:var(--font-display); font-size:var(--t-lead); font-weight:var(--w-light);
line-height:var(--lh-snug); color:var(--ink-soft); max-width:var(--measure-tight);
}
/* -----------------------------------------------------------------------------
5 · GRID + THE MARGIN (signature)
-------------------------------------------------------------------------- */
.erb-shell{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.erb-shell--wide{ max-width:var(--maxw-wide); }
.erb-shell--text{ max-width:var(--maxw-text); }
.erb-section{ padding-block:var(--section-y); }
.erb-section--tight{ padding-block:calc(var(--section-y) * .55); }
/* Ruled margin: content sits to the right of a vertical rule, as on a script. */
.erb-ruled{
display:grid;
grid-template-columns:var(--margin-col) minmax(0,1fr);
column-gap:var(--col-gap);
align-items:start;
}
.erb-ruled__margin{
position:relative;
min-height:100%;
padding-right:var(--s-4);
border-right:var(--rule);
text-align:right;
}
.erb-ruled__body{ min-width:0; }
/* 12-column editorial grid for card and row layouts */
.erb-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--col-gap); }
.erb-grid--2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--col-gap); }
.erb-grid--3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--col-gap); }
/* Dark ground */
.erb-ink{ background:var(--ink); color:var(--on-ink); }
.erb-ink .erb-lead,
.erb-ink .erb-standfirst{ color:var(--on-ink-soft); }
.erb-ink .erb-eyebrow{ color:var(--on-ink-soft); }
.erb-ink .erb-ruled__margin{ border-right-color:var(--ink-rule); }
/* -----------------------------------------------------------------------------
14 · ACADEMIC ANNOTATION (signature)
The examiner's hand: Newsreader italic in marking red, set in the margin.
-------------------------------------------------------------------------- */
.erb-mark{ /* [4] — a mark allocation */
font-family:var(--font-body); font-size:var(--t-2xs); font-weight:var(--w-semi);
letter-spacing:var(--tr-wide); color:var(--ink-faint);
font-variant-numeric:tabular-nums;
}
.erb-annot{ /* an examiner's margin note */
font-family:var(--font-display); font-style:italic; font-weight:var(--w-book);
font-size:var(--t-sm); line-height:1.4; color:var(--red);
display:block;
}
.erb-annot--ink{ color:var(--gold-bright); }
.erb-tick{ /* the marking tick */
color:var(--red); font-size:var(--t-lead); line-height:1;
display:inline-block; transform:rotate(-8deg);
}
/* Inline underline in marking red — "this is the thing to notice" */
.erb-underscore{
background-image:linear-gradient(var(--red),var(--red));
background-size:100% 2px; background-repeat:no-repeat; background-position:0 92%;
padding-bottom:2px;
}
/* Section number, set as a question number would be */
.erb-qnum{
font-family:var(--font-display); font-size:var(--t-h3); font-weight:var(--w-light);
color:#958F83; line-height:1; font-variant-numeric:lining-nums; /* 3.0:1 */
}
.erb-ink .erb-qnum{ color:#5A677B; } /* 3.0:1 */
/* -----------------------------------------------------------------------------
6 · BUTTONS
Square-ish, weighted, no gradients, no glow. Three ranks only.
-------------------------------------------------------------------------- */
.erb-btn{
--_bg:var(--ink); --_fg:var(--paper); --_bd:var(--ink);
display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
padding:14px 26px; min-height:48px;
background:var(--_bg); color:var(--_fg); border:1px solid var(--_bd);
border-radius:var(--r-1);
font-family:var(--font-body); font-size:var(--t-md); font-weight:var(--w-semi);
letter-spacing:0.01em; text-decoration:none; cursor:pointer;
transition:background var(--dur-micro) var(--ease),
color var(--dur-micro) var(--ease),
border-color var(--dur-micro) var(--ease),
transform var(--dur-micro) var(--ease);
}
.erb-btn:hover{ transform:translateY(-1px); }
.erb-btn:active{ transform:translateY(0); }
.erb-btn--primary{ --_bg:var(--cobalt); --_fg:#fff; --_bd:var(--cobalt); }
.erb-btn--primary:hover{ --_bg:var(--cobalt-deep); --_bd:var(--cobalt-deep); }
.erb-btn--ink{ --_bg:var(--ink); --_fg:var(--paper); --_bd:var(--ink); }
.erb-btn--ink:hover{ --_bg:var(--ink-raised); --_bd:var(--ink-raised); }
.erb-btn--outline{ --_bg:transparent; --_fg:var(--ink); --_bd:var(--paper-rule); }
.erb-btn--outline:hover{ --_bd:var(--ink); --_bg:var(--paper-sunk); }
.erb-btn--gold{ --_bg:var(--gold-bright); --_fg:var(--ink); --_bd:var(--gold-bright); }
.erb-btn--gold:hover{ --_bg:#E9B451; --_bd:#E9B451; }
.erb-btn--quiet{ --_bg:transparent; --_fg:var(--cobalt); --_bd:transparent;
padding-inline:0; min-height:auto; }
.erb-btn--quiet:hover{ --_fg:var(--cobalt-deep); }
.erb-btn--block{ display:flex; width:100%; }
.erb-btn--sm{ padding:9px 16px; min-height:40px; font-size:var(--t-sm); }
.erb-ink .erb-btn--outline{ --_fg:var(--on-ink); --_bd:var(--ink-rule); }
.erb-ink .erb-btn--outline:hover{ --_bd:var(--on-ink); --_bg:var(--ink-raised); }
.erb-btn[disabled],.erb-btn[aria-disabled="true"]{
opacity:.45; pointer-events:none;
}
/* -----------------------------------------------------------------------------
7 · LINKS
Inline links are underlined from rest. Underline offset does the styling work.
-------------------------------------------------------------------------- */
.erb-link{
color:var(--cobalt); text-decoration:underline;
text-decoration-thickness:1px; text-underline-offset:3px;
text-decoration-color:color-mix(in srgb, var(--cobalt) 40%, transparent);
transition:text-decoration-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.erb-link:hover{ text-decoration-color:var(--cobalt); color:var(--cobalt-deep); }
.erb-ink .erb-link{ color:var(--gold-bright);
text-decoration-color:color-mix(in srgb, var(--gold-bright) 45%, transparent); }
.erb-ink .erb-link:hover{ text-decoration-color:var(--gold-bright); color:var(--gold-bright); }
/* Standalone directional link — the editorial "read on" */
.erb-link-arrow{
display:inline-flex; align-items:baseline; gap:var(--s-2);
font-weight:var(--w-semi); font-size:var(--t-md); color:var(--cobalt);
text-decoration:none; border-bottom:1px solid var(--paper-rule); padding-bottom:3px;
transition:border-color var(--dur-micro) var(--ease), gap var(--dur-micro) var(--ease);
}
.erb-link-arrow:hover{ border-bottom-color:var(--cobalt); gap:var(--s-3); }
/* -----------------------------------------------------------------------------
8 · FORM ELEMENTS
Underline-first inputs — a form on a page, not a control panel.
-------------------------------------------------------------------------- */
.erb-field{ display:block; margin-bottom:var(--s-5); }
.erb-label{
display:block; font-size:var(--t-xs); font-weight:var(--w-semi);
letter-spacing:var(--tr-caps); text-transform:uppercase;
color:var(--ink-soft); margin-bottom:var(--s-2);
}
.erb-input,.erb-textarea,.erb-select{
width:100%; padding:12px 0; min-height:48px;
background:transparent; color:var(--ink);
border:0; border-bottom:2px solid var(--paper-rule); border-radius:0;
font-size:var(--t-base);
transition:border-color var(--dur-micro) var(--ease);
}
.erb-input::placeholder,.erb-textarea::placeholder{ color:var(--ink-faint); }
.erb-input:hover,.erb-textarea:hover,.erb-select:hover{ border-bottom-color:var(--ink-soft); }
.erb-input:focus,.erb-textarea:focus,.erb-select:focus{
outline:none; border-bottom-color:var(--cobalt);
}
.erb-textarea{ min-height:120px; resize:vertical; line-height:var(--lh-body); }
.erb-select{ appearance:none; padding-right:28px;
background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
background-position:calc(100% - 14px) 55%, calc(100% - 8px) 55%;
background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.erb-hint{ font-size:var(--t-sm); color:var(--ink-faint); margin-top:var(--s-2); }
.erb-error{ font-size:var(--t-sm); color:var(--red); margin-top:var(--s-2);
font-family:var(--font-display); font-style:italic; }
.erb-input[aria-invalid="true"],.erb-textarea[aria-invalid="true"]{ border-bottom-color:var(--red); }
/* Checkbox / radio — square, ink-weighted */
.erb-check{ display:flex; gap:var(--s-3); align-items:flex-start;
font-size:var(--t-md); line-height:var(--lh-snug); cursor:pointer; }
.erb-check input{ appearance:none; flex:none; width:20px; height:20px; margin-top:2px;
border:2px solid var(--paper-rule); border-radius:var(--r-1); background:transparent;
cursor:pointer; transition:all var(--dur-micro) var(--ease); }
.erb-check input:checked{ background:var(--cobalt); border-color:var(--cobalt); }
.erb-check input:checked::after{ content:"✓"; display:block; color:#fff;
font-size:13px; line-height:16px; text-align:center; }
/* Filter chip — the finder's control, not a pill */
.erb-chip{
display:inline-flex; align-items:center; min-height:40px; padding:8px 16px;
background:transparent; color:var(--ink-soft);
border:1px solid var(--paper-rule); border-radius:var(--r-1);
font-size:var(--t-md); font-weight:var(--w-med); cursor:pointer;
transition:all var(--dur-micro) var(--ease);
}
.erb-chip:hover{ border-color:var(--ink); color:var(--ink); }
.erb-chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
/* -----------------------------------------------------------------------------
9 · NAVIGATION
-------------------------------------------------------------------------- */
.erb-head{
position:sticky; top:0; z-index:60;
background:color-mix(in srgb, var(--paper) 88%, transparent);
backdrop-filter:saturate(1.2) blur(10px);
border-bottom:var(--hair);
}
.erb-nav{ display:flex; align-items:center; gap:var(--s-6);
min-height:68px; }
.erb-brand{ display:flex; align-items:baseline; gap:var(--s-2);
min-height:44px; align-items:center;
text-decoration:none; color:var(--ink); margin-right:auto; }
.erb-brand__name{ font-family:var(--font-display); font-size:var(--t-h4);
font-weight:var(--w-med); letter-spacing:var(--tr-tight); white-space:nowrap; }
.erb-brand__mark{ font-size:var(--t-2xs); letter-spacing:var(--tr-caps);
text-transform:uppercase; color:var(--ink-faint); }
.erb-nav__links{ display:flex; align-items:center; gap:var(--s-5); }
.erb-nav__link{
position:relative; padding:10px 0; white-space:nowrap;
font-size:var(--t-md); font-weight:var(--w-med); color:var(--ink-soft);
text-decoration:none; transition:color var(--dur-micro) var(--ease);
}
.erb-nav__link:hover{ color:var(--ink); }
.erb-nav__link[aria-current="page"]{ color:var(--ink); font-weight:var(--w-semi); }
.erb-nav__link[aria-current="page"]::after{
content:""; position:absolute; left:0; right:0; bottom:0;
height:2px; background:var(--cobalt);
}
/* Start Here — the one visually distinct action in the bar */
.erb-nav__start{
display:inline-flex; align-items:center; gap:var(--s-2);
padding:11px 20px; min-height:44px;
background:var(--cobalt); color:#fff; border-radius:var(--r-1);
font-size:var(--t-md); font-weight:var(--w-semi); text-decoration:none;
white-space:nowrap; flex:none;
transition:background var(--dur-micro) var(--ease);
}
.erb-nav__start:hover{ background:var(--cobalt-deep); }
/* Breadcrumb — set as a running head */
.erb-crumb{ font-size:var(--t-xs); letter-spacing:var(--tr-wide);
text-transform:uppercase; color:var(--ink-faint); }
/* -----------------------------------------------------------------------------
10 · RESOURCE ROWS + CARDS
Rows are the default. Cards are the exception, used only where items must be
compared side by side.
-------------------------------------------------------------------------- */
.erb-rows{ border-top:var(--rule); }
.erb-row{
display:grid; grid-template-columns:1fr auto; gap:var(--s-4) var(--s-5);
align-items:start; padding:var(--s-5) 0;
border-bottom:var(--hair);
transition:background var(--dur-micro) var(--ease);
}
.erb-row:hover{ background:var(--paper-sunk); }
.erb-row__meta{ font-size:var(--t-xs); letter-spacing:var(--tr-wide);
text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--s-2); }
.erb-row__title{ font-family:var(--font-display); font-size:var(--t-h4);
font-weight:var(--w-med); line-height:var(--lh-snug); margin:0 0 var(--s-2); }
.erb-row__desc{ font-size:var(--t-md); color:var(--ink-soft); max-width:56ch; margin:0; }
.erb-row__side{ display:flex; flex-direction:column; align-items:flex-end;
gap:var(--s-3); text-align:right; }
.erb-price{ font-family:var(--font-body); font-size:var(--t-h4);
font-weight:var(--w-bold); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.erb-price__unit{ font-size:var(--t-sm); font-weight:var(--w-med); color:var(--ink-faint); }
.erb-price--free{ color:var(--cobalt); }
/* Badges — flat, square, quiet */
.erb-badge{
display:inline-block; padding:4px 9px;
font-size:var(--t-2xs); font-weight:var(--w-bold);
letter-spacing:var(--tr-caps); text-transform:uppercase;
border-radius:var(--r-1); border:1px solid transparent;
}
.erb-badge--free{ background:var(--cobalt-wash); color:var(--cobalt-deep); border-color:#C9D3F7; }
.erb-badge--premium{ background:var(--gold-wash); color:var(--gold-ink); border-color:#E7D6AE; }
.erb-badge--best{ background:var(--gold-bright); color:var(--ink); }
.erb-badge--new{ background:var(--red-wash); color:var(--red); border-color:#EFCFC9; }
/* Card — used sparingly */
.erb-card{
background:var(--paper); border:var(--rule); border-radius:var(--r-0);
padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-4);
transition:border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.erb-card:hover{ border-color:var(--ink); }
.erb-card--sunk{ background:var(--paper-sunk); }
.erb-card--free{ border-left:var(--bar) solid var(--cobalt); }
.erb-card--premium{ border-left:var(--bar) solid var(--gold); }
.erb-card__foot{ margin-top:auto; padding-top:var(--s-4); border-top:var(--hair); }
.erb-ink .erb-card{ background:var(--ink-raised); border-color:var(--ink-rule); }
.erb-ink .erb-card__foot{ border-top-color:var(--ink-rule); }
/* -----------------------------------------------------------------------------
11 · PRODUCT PRESENTATION
A product is presented as a specimen page, not a shop tile.
-------------------------------------------------------------------------- */
.erb-product{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px);
gap:var(--s-7); align-items:start;
padding-block:var(--s-7); border-top:var(--rule);
}
.erb-product__spec{
display:grid; grid-template-columns:auto 1fr; gap:var(--s-2) var(--s-4);
font-size:var(--t-md); border-top:var(--hair); padding-top:var(--s-4);
}
.erb-product__spec dt{ font-size:var(--t-xs); letter-spacing:var(--tr-wide);
text-transform:uppercase; color:var(--ink-faint); }
.erb-product__spec dd{ margin:0; }
.erb-product__buy{
border:var(--rule); padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-4);
position:sticky; top:88px;
}
.erb-contents{ list-style:none; margin:0; padding:0; }
.erb-contents li{
display:grid; grid-template-columns:auto 1fr; gap:var(--s-3);
padding:var(--s-2) 0; border-bottom:var(--hair); font-size:var(--t-md);
}
.erb-contents li::before{ content:"—"; color:var(--paper-rule); }
/* -----------------------------------------------------------------------------
12 · TESTIMONIAL
Attributed, restrained, never a floating card with a five-star row.
-------------------------------------------------------------------------- */
.erb-testimonial{
display:grid; grid-template-columns:auto 1fr; gap:var(--s-4);
padding:var(--s-5) 0; border-top:var(--hair);
max-width:var(--measure);
}
.erb-testimonial__avatar{
width:44px; height:44px; border-radius:var(--r-full);
background:var(--paper-sunk); border:var(--hair);
display:grid; place-items:center;
font-family:var(--font-display); font-size:var(--t-md); color:var(--ink-soft);
}
.erb-testimonial__quote{
font-size:var(--t-base); line-height:var(--lh-snug); margin:0 0 var(--s-3);
}
.erb-testimonial__who{
font-size:var(--t-sm); color:var(--ink-faint);
display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:baseline;
}
.erb-testimonial__who strong{ color:var(--ink); font-weight:var(--w-semi); }
/* -----------------------------------------------------------------------------
13 · EDITORIAL QUOTATION
The pull quote is a break in the page, not an ornament inside it.
-------------------------------------------------------------------------- */
.erb-pull{
margin:var(--s-8) 0; padding-left:var(--s-5);
border-left:var(--bar) solid var(--gold);
font-family:var(--font-display); font-style:italic; font-weight:var(--w-light);
font-size:var(--t-h3); line-height:1.32; letter-spacing:var(--tr-tight);
max-width:var(--measure-tight);
}
.erb-pull cite{
display:block; margin-top:var(--s-3);
font-family:var(--font-body); font-style:normal; font-size:var(--t-xs);
font-weight:var(--w-semi); letter-spacing:var(--tr-caps); text-transform:uppercase;
color:var(--ink-faint);
}
.erb-ink .erb-pull{ border-left-color:var(--gold-bright); }
/* Creole line — a bilingual device, set as a footnote gloss */
.erb-creole{ border-left:2px solid var(--paper-rule); padding-left:var(--s-4); }
.erb-creole__kr{ font-family:var(--font-display); font-style:italic;
font-size:var(--t-lead); display:block; }
.erb-creole__en{ font-size:var(--t-sm); color:var(--ink-faint); display:block;
margin-top:var(--s-1); }
.erb-creole--on-ink{ border-left-color:var(--ink-rule); }
.erb-creole--on-ink .erb-creole__kr{ color:var(--on-ink); }
.erb-creole--on-ink .erb-creole__en{ color:var(--on-ink-soft); }
/* -----------------------------------------------------------------------------
15 · SECTION DIVIDERS
Rules, not shadows. Three weights, each meaning something different.
-------------------------------------------------------------------------- */
.erb-div{ border:0; border-top:var(--hair); margin:var(--s-6) 0; } /* within a section */
.erb-div--rule{ border-top:var(--rule); } /* between subjects */
.erb-div--heavy{ border-top:2px solid var(--ink); margin:var(--s-8) 0; } /* between sections */
.erb-div--mark{ /* the end-of-section mark */
border:0; margin:var(--s-8) 0; text-align:center;
color:var(--paper-rule); font-family:var(--font-display); font-size:var(--t-h4);
}
.erb-div--mark::before{ content:"§"; }
.erb-ink .erb-div{ border-top-color:var(--ink-rule); }
.erb-ink .erb-div--heavy{ border-top-color:var(--on-ink-soft); }
/* -----------------------------------------------------------------------------
TABLE — timetables and price lists are data, set as data
-------------------------------------------------------------------------- */
.erb-table{ width:100%; border-collapse:collapse; font-size:var(--t-md); }
.erb-table caption{ text-align:left; font-size:var(--t-xs);
letter-spacing:var(--tr-caps); text-transform:uppercase;
color:var(--ink-faint); padding-bottom:var(--s-3); }
.erb-table th{ text-align:left; font-weight:var(--w-semi); font-size:var(--t-xs);
letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--ink-soft);
padding:var(--s-3) var(--s-4) var(--s-3) 0; border-bottom:2px solid var(--ink); }
.erb-table td{ padding:var(--s-3) var(--s-4) var(--s-3) 0;
border-bottom:var(--hair); vertical-align:top; }
.erb-table tbody tr:hover{ background:var(--paper-sunk); }
.erb-table .erb-time{ font-variant-numeric:tabular-nums; font-weight:var(--w-semi);
white-space:nowrap; }
/* -----------------------------------------------------------------------------
17 · FOCUS + KEYBOARD STATES
Never removed, never subtle.
-------------------------------------------------------------------------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
outline:2px solid var(--cobalt);
outline-offset:3px;
border-radius:var(--r-1);
}
.erb-ink :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
outline-color:var(--gold-bright);
}
.erb-skip{
position:absolute; left:var(--s-4); top:-100px; z-index:100;
padding:12px 20px; background:var(--ink); color:var(--paper);
text-decoration:none; border-radius:var(--r-1);
transition:top var(--dur-micro) var(--ease);
}
.erb-skip:focus{ top:var(--s-4); }
/* -----------------------------------------------------------------------------
18 · MOTION
Motion clarifies arrival and state. It never decorates.
-------------------------------------------------------------------------- */
.erb-reveal{
opacity:0; transform:translateY(14px);
transition:opacity var(--dur-enter) var(--ease-out),
transform var(--dur-enter) var(--ease-out);
}
.erb-reveal.is-in{ opacity:1; transform:none; }
.erb-reveal--d1{ transition-delay:70ms; }
.erb-reveal--d2{ transition-delay:140ms; }
.erb-reveal--d3{ transition-delay:210ms; }
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important;
}
.erb-reveal{ opacity:1; transform:none; }
}
/* -----------------------------------------------------------------------------
16 · MOBILE PATTERNS
-------------------------------------------------------------------------- */
@media (max-width:900px){
.erb-product{ grid-template-columns:1fr; gap:var(--s-6); }
.erb-product__buy{ position:static; }
.erb-grid--3{ grid-template-columns:1fr; }
}
@media (max-width:720px){
:root{ --margin-col:0px; }
/* The margin collapses: the rule moves above the content as a short mark */
.erb-ruled{ grid-template-columns:1fr; row-gap:var(--s-3); }
.erb-ruled__margin{
display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-2) var(--s-3);
border-right:0; border-top:0;
padding:0 0 var(--s-3); text-align:left; width:100%; min-height:0;
}
.erb-ruled__margin::before{
content:""; display:block; flex:none; width:44px; height:var(--bar);
background:var(--ink);
}
.erb-ink .erb-ruled__margin::before{ background:var(--on-ink-soft); }
.erb-ruled__margin .erb-annot{ display:inline; }
.erb-grid--2{ grid-template-columns:1fr; }
.erb-nav__links{ display:none; }
.erb-row{ grid-template-columns:1fr; }
.erb-row__side{ align-items:flex-start; text-align:left;
flex-direction:row; flex-wrap:wrap; align-items:center; }
.erb-testimonial{ grid-template-columns:1fr; }
.erb-btn{ width:100%; } /* full-width actions in flow */
.erb-nav__start{ width:auto; } /* except the nav action */
/* Superseded in Phase 7: the timetable is grouped by day and reflows to a
single column, so nothing on the site needs a horizontal scroll region. */
}
/* Sticky action bar — ONE WhatsApp entry point sitewide, mobile only */
.erb-actionbar{
position:fixed; left:0; right:0; bottom:0; z-index:70;
display:none; gap:1px;
background:var(--paper-rule); border-top:1px solid var(--paper-rule);
}
.erb-actionbar a{
flex:1; display:flex; align-items:center; justify-content:center; gap:var(--s-2);
min-height:56px; padding:10px;
background:var(--paper); color:var(--ink); text-decoration:none;
font-size:var(--t-sm); font-weight:var(--w-semi);
}
.erb-actionbar a.is-primary{ background:var(--cobalt); color:#fff; }
@media (max-width:720px){
.erb-actionbar{ display:flex; }
body{ padding-bottom:56px; }
}
/* -----------------------------------------------------------------------------
UTILITIES — a deliberately short list
-------------------------------------------------------------------------- */
/* Spacing utilities — the only sanctioned way to nudge vertical rhythm.
Anti-pattern 31: never hand-tune a section's padding inline. */
.erb-mt-4{ margin-top:var(--s-4); }
.erb-mt-6{ margin-top:var(--s-6); }
.erb-my-6{ margin-block:var(--s-6); }
.erb-stack > * + *{ margin-top:var(--s-4); }
.erb-stack-lg > * + *{ margin-top:var(--s-6); }
.erb-flow > * + *{ margin-top:var(--s-5); }
.erb-center{ margin-inline:auto; text-align:center; }
.erb-vh{ position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap; }
/* =============================================================================
7b · MOBILE NAVIGATION (drawer)
The toggle is a real