/* ------------------------------------------------------------------ VEDETTE — ink on aged paper, on a dark desk. The house style as published for Exploring Officer (WEBSITE_BRIEF §4) and carried unchanged into the Vedette design canvas. There is no grey in the system and adding one makes it a different product. The paper never inverts: dark mode changes the desk, not the sheet. The period is carried by the prints, their captions and three typographic conventions — not by new colours and not by new faces. ------------------------------------------------------------------ */ :root{ --paper:#F2E8D5; --ink:#3A2E21; --rule:#CBB894; --foxing:#8B6B45; --scarlet:#A6362C; --gold:#8F6F24; --fr:#1F2A55; --ru:#25331B; --desk:#241a12; --desk-ink:#D9CBB0; --desk-dim:#9A8A6E; --desk-line:rgba(217,203,176,.28); --display:"Playfair Display","Didot","Bodoni MT","Georgia",serif; --body:"EB Garamond","Garamond","Times New Roman",serif; color-scheme: light; } html{background:var(--desk);} body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.55; padding-inline:16px;padding-block:0 96px;-webkit-font-smoothing:antialiased;} *,*::before,*::after{box-sizing:border-box;} img{max-width:100%;height:auto;display:block;} a{color:inherit;} a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--scarlet);outline-offset:3px;} .skip{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:10px 16px;z-index:20;} .skip:focus{left:8px;top:8px;} /* ---------- the desk: the only chrome, and it stays off the paper ---------- */ .sitenav{max-width:1040px;margin:0 auto;padding:16px 0 20px; display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;} .sitenav .brand{font-family:var(--display);letter-spacing:.22em;text-transform:uppercase;font-size:13px; color:var(--desk-ink);margin-right:auto;text-decoration:none;} .sitenav a{color:var(--desk-dim);text-decoration:none;text-transform:uppercase;letter-spacing:.16em;font-size:12px;} .sitenav a:hover{color:var(--desk-ink);} .sitenav a[aria-current="page"]{color:var(--desk-ink);} .sitenav .brand[aria-current="page"]{color:var(--desk-ink);} /* ---------- the paper ---------- */ main{display:block;} .sheet{max-width:1040px;margin:0 auto;background:var(--paper);color:var(--ink);padding:56px 64px 64px;position:relative; box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4),inset 0 0 140px rgba(139,107,69,.16);} @media (max-width:700px){.sheet{padding:36px 22px 44px;}} /* type on paper */ .eyebrow{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:12.5px;color:var(--foxing);margin:0 0 10px;} .wordmark{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(32px,5vw,58px);line-height:1.05;margin:0;text-wrap:balance;} .wordmark.heavy{font-weight:900;letter-spacing:.02em;font-size:clamp(40px,6.4vw,76px);} .wordmark.italic{font-style:italic;font-weight:400;text-transform:none;letter-spacing:.02em;font-size:clamp(40px,6.2vw,72px);} h2.head,p.head{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.18;margin:0;text-wrap:balance;} p.head{margin-top:18px;max-width:30ch;} /* A masthead head that is a sentence, not a strapline, needs the line: 30ch wrapped it into empty paper (site-full-width-2026-09-17). */ p.head.wide{max-width:34ch;} @media (min-width:900px){p.head.wide{max-width:none;font-size:clamp(28px,3.4vw,40px);}} h2{font-family:var(--display);font-weight:400;font-size:clamp(23px,2.6vw,30px);line-height:1.2;margin:0 0 14px;text-wrap:balance;} .measure{max-width:66ch;} p{margin:0 0 1em;} .def{font-style:italic;margin:14px 0 0;} .lede{font-size:21px;margin:30px 0 0;} .statement{font-size:20px;margin:0;} .foot .one{font-style:italic;} .small{font-size:15px;} hr.rule{border:0;border-top:1px solid var(--rule);margin:32px 0;} hr.rule.short{width:96px;margin:22px 0 0;} hr.rule.double{border-top:3px double var(--ink);margin:0;} hr.rule.double.spaced{margin-top:44px;} .center{text-align:center;} .center hr.rule.short{margin-inline:auto;} .center p.head{margin-inline:auto;} section{margin-top:44px;} section.flush{margin-top:0;} section.tight{margin-top:30px;} strong{font-weight:500;} .trailing{margin-top:22px;} .trailing-tight{margin-top:10px;} p.flush{margin:0;} /* buttons and the one form */ .btn{display:inline-block;font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:13px; padding:13px 22px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;background:transparent;line-height:1;cursor:pointer;} .btn.cta{background:var(--scarlet);border-color:var(--scarlet);color:var(--paper);} .btn:hover{background:var(--ink);color:var(--paper);} .btn.cta:hover{background:#8f2d25;border-color:#8f2d25;} .cta-row{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:8px;} .mast .cta-row{margin-top:26px;} /* the badge above the home wordmark: a seal on the paper, not a banner */ .mast .mark{width:152px;height:auto;margin:0 auto 20px;} @media (max-width:700px){.mast .mark{width:116px;margin-bottom:16px;}} .cta-row .or{font-style:italic;} form.notify{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;max-width:560px;margin-top:10px;} form.notify label{flex:1 1 100%;font-size:15px;text-transform:uppercase;letter-spacing:.16em;color:var(--foxing);font-weight:500;} form.notify input{flex:1 1 240px;min-width:0;font:inherit;font-size:17px;padding:10px 12px;border:1px solid var(--rule);background:transparent;color:var(--ink);} form.notify input::placeholder{color:var(--foxing);opacity:.8;} form.notify .btn{flex:0 0 auto;} .notify-msg{flex:1 1 100%;margin:2px 0 0;font-size:15px;font-style:italic;color:var(--foxing);} /* The advert. It sits in the paper like a plate does, but it is a film: a thin frame, the poster filling it, and nothing loading until somebody presses play. */ figure.film{margin:26px 0;} /* BOTH FILMS ARE 1920x1080, so the box is 16:9 and stays 16:9. Without this the box takes the POSTER's shape until the film loads — the sample-map still is a tall sheet cut, so the frame stood 994 px deep and would have jumped the moment anybody pressed play. The still is cropped into the frame instead. */ figure.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover; background:#241a12;border:1px solid rgba(58,46,33,.22);box-shadow:0 1px 3px rgba(58,46,33,.10);} figure.film figcaption{font-size:14.5px;line-height:1.45;margin-top:10px;max-width:60ch;color:var(--foxing);} figure.film.second{max-width:620px;} .film-block h2{margin-bottom:.2em;} /* Andy's own photographs of his figures. NOT plates: a plate is a period print and is laid on the paper with multiply, which would drain the colour out of a photograph. These are his table, in colour, in a thin paper frame. */ figure.figphoto{margin:0;} figure.figphoto img{display:block;width:100%;height:auto;background:var(--paper,#F2E8D5); padding:6px;border:1px solid rgba(58,46,33,.22);box-shadow:0 1px 3px rgba(58,46,33,.10);} figure.figphoto figcaption{font-size:14.5px;line-height:1.45;margin-top:10px;max-width:60ch;color:var(--foxing);} figure.figphoto.band{margin:30px 0;} figure.figphoto.band figcaption{font-style:italic;} figure.figphoto.aside{max-width:340px;margin:18px 0;} .figpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:22px 0;} .buy-with-figure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:28px;align-items:center;} @media (max-width:760px){ .figpair{grid-template-columns:minmax(0,1fr);} .buy-with-figure{grid-template-columns:minmax(0,1fr);} figure.figphoto.aside{max-width:none;} } /* plates: prints laid on the paper */ figure.plate{margin:0;} figure.plate img{mix-blend-mode:multiply;} figure.plate figcaption{font-size:14.5px;line-height:1.45;margin-top:10px;max-width:60ch;} .cap-label{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;color:var(--foxing);font-weight:500;margin-bottom:3px;} .plates{display:grid;gap:36px 40px;margin-top:10px;} .plates.two{grid-template-columns:repeat(2,minmax(0,1fr));} .plates.three{grid-template-columns:repeat(3,minmax(0,1fr));} .plates.two.portrait-last{grid-template-columns:minmax(0,3fr) minmax(0,2fr);} @media (max-width:760px){.plates.two,.plates.three,.plates.two.portrait-last{grid-template-columns:minmax(0,1fr);}} figure.plate.cameo{max-width:300px;} .spaced{margin-top:28px;} /* screenshots of the app's own output: a document, not a print — so no multiply blend, full colour, and a plain card shadow to say it is a page rather than a plate */ figure.sample{margin:0 0 30px 0;} figure.sample img{width:100%;display:block;border:1px solid var(--rule); box-shadow:0 10px 30px -14px rgba(0,0,0,.35);border-radius:2px;} figure.sample figcaption{font-size:14.5px;line-height:1.45;margin-top:10px;max-width:70ch;} /* home — the doors */ .doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:36px;} @media (max-width:820px){.doors{grid-template-columns:minmax(0,1fr);}} /* the three doors are one row: the tiles align on their rule, and the status lines align at the foot however many lines the name and the description take */ a.door{text-decoration:none;display:flex;flex-direction:column;height:100%;} a.door .tile{margin:0 0 16px;height:250px;border-bottom:1px solid var(--rule);padding-bottom:16px;} a.door .tile img{width:100%;height:100%;object-fit:contain;object-position:center bottom;mix-blend-mode:multiply;} a.door .eyebrow{letter-spacing:.14em;font-size:12px;} a.door h3{font-family:var(--display);font-weight:400;font-size:27px;line-height:1.15;margin:0 0 10px;text-transform:uppercase;letter-spacing:.08em;} a.door h3.heavy{font-weight:900;letter-spacing:.01em;font-size:30px;} a.door h3.italic{font-style:italic;text-transform:none;letter-spacing:.01em;font-size:30px;} a.door p{margin:0 0 10px;font-size:17.5px;} a.door .status{font-size:14px;text-transform:uppercase;letter-spacing:.14em;color:var(--foxing);font-weight:500;margin-top:auto;padding-top:6px;} a.door .status.live{color:var(--scarlet);} a.door:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;} /* The Austerlitz proof strip under the Exploring Officer door (DESIGN-vedette §11.1). */ .doors > a.proof-strip{display:block;text-decoration:none;border-top:1px solid var(--rule);padding-top:12px;margin-top:-26px;} @media (min-width:821px){.doors > a.proof-strip{grid-column:1;grid-row:2;}} /* THE AUSTERLITZ CELL: the line that answers "is this only for big armies?", and the strip that raises the question, in one grid cell — the strip alone was the cell, and a second child would have landed in the next column. The rule and the spacing that made the strip a cell move here. */ @media (min-width:821px){.doors > .strip-cell{grid-column:1;grid-row:2;}} .doors > .strip-cell{border-top:1px solid var(--rule);padding-top:12px;margin-top:-26px;} .doors > .strip-cell > a.proof-strip{border-top:0;padding-top:0;margin-top:0;} .strip-note{font-size:14px;line-height:1.5;margin:0 0 12px;color:var(--ink-soft,#5A4A38);max-width:52ch;} .strip-note a{white-space:nowrap;} /* what a table takes, under a "three ways in" card */ .ways p.size{margin:8px 0 0;font-size:13px;font-style:italic;color:var(--foxing);} /* A door whose app is in preparation carries one line to the battle that IS built, under its own door rather than under the first one (Andy, 19 September: he could not see the new apps from the home page). */ @media (min-width:821px){.doors > a.first-battle.col2{grid-column:2;grid-row:2;} .doors > a.first-battle.col3{grid-column:3;grid-row:2;}} .first-battle .ps-line{margin-top:0;} .ps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;} .ps-grid.ps-two{grid-template-columns:repeat(2,minmax(0,1fr));} .ps-grid img{width:100%;height:auto;display:block;box-shadow:0 1px 2px rgba(58,46,33,.18);} a.proof-strip:hover .ps-grid{transform:translateY(-1px);} .ps-line{display:block;margin-top:9px;font-size:12px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--foxing);} .ps-line b{color:var(--scarlet);font-weight:500;} a.proof-strip:hover .ps-line{text-decoration:underline;text-underline-offset:3px;} @media (max-width:820px){.ps-grid{max-width:440px;}} /* Andy, 17 September: no page may carry a lone narrow column with blank paper beside it (site-full-width-2026-09-17). Two ways of obeying it, both keeping a readable line: .split puts the picture the text is about in the right column; .cols2 sets a block of prose in two columns across the whole width. Both fold to one column on a narrow screen. */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:10px 44px;align-items:start;} .split.plate-right{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);} .split > div > .measure{max-width:none;} .split figure{margin-top:0;} @media (max-width:860px){.split,.split.plate-right{grid-template-columns:minmax(0,1fr);}} /* Andy, 25 September: no lone narrow column of text with blank paper beside it. A run of paragraphs goes in .prose-cols; a single paragraph with room beside it takes .wide and uses the room, because two columns of one short paragraph reads as a mistake. */ .measure.wide{max-width:none;} @media (max-width:860px){.measure.wide{max-width:66ch;}} .prose-cols{columns:2;column-gap:48px;} .prose-cols > .measure{max-width:none;} @media (max-width:860px){.prose-cols{columns:1;}.prose-cols > .measure{max-width:66ch;}} .measure.cols2{max-width:none;columns:2;column-gap:48px;} @media (max-width:860px){.measure.cols2{columns:1;max-width:66ch;}} /* Technical, at the foot of an app page: two columns of short headed paragraphs, using the whole width (site-full-width-2026-09-17) and folding to one column on a narrow screen. */ .tech-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 48px;margin-top:8px;} @media (max-width:820px){.tech-cols{grid-template-columns:minmax(0,1fr);}} .tech-cols h3{margin:22px 0 6px;font-family:var(--display);font-weight:400;font-size:21px;line-height:1.2;} .tech-cols > div > h3:first-child{margin-top:0;} .tech-cols p{margin:0 0 10px;font-size:17px;max-width:none;} .method{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:12px;} @media (max-width:820px){.method{grid-template-columns:minmax(0,1fr);}} .method h4{margin:0 0 8px;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.2;} .method p{margin:0;font-size:17.5px;} .method .method-foot{margin-top:16px;font-size:15px;} /* Andy, 17 Sept: the Detaille plate under "Cut to your table", kept short ("dont make it to tall"), and its caption carried across to sit under "Ready to keep", level with the foot of the plate. On one column the caption simply follows the plate. */ .method .method-plate{margin-top:22px;position:relative;} .method .method-plate img{height:240px;width:auto;display:block;} @media (min-width:821px){.method .method-plate figcaption{position:absolute;left:calc(100% + 34px);bottom:0;width:100%;margin:0;}} footer.foot{margin-top:56px;padding-top:22px;border-top:1px solid var(--rule);} footer.foot p{margin:0 0 8px;} /* EO — the four choices, as an illustration, and the staff map the app draws */ .gen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:14px;align-items:end;} @media (max-width:820px){.gen{grid-template-columns:repeat(2,minmax(0,1fr));}.gen .btn{grid-column:1/-1;justify-self:start;}} .gen .fld{display:block;} .gen .lab{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--foxing);font-weight:500;} .gen .ctl{margin-top:6px;border:1px solid var(--rule);padding:10px 12px;font-size:17px;display:flex;justify-content:space-between;gap:8px;color:var(--ink);} .gen .ctl span{color:var(--foxing);} figure.map{margin:28px 0 0;} figure.map svg{width:100%;height:auto;display:block;border:1px solid var(--rule);} figure.map figcaption{font-size:14.5px;line-height:1.45;margin-top:10px;max-width:66ch;} .cameo-row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:44px;align-items:start;} @media (max-width:760px){.cameo-row{grid-template-columns:minmax(0,1fr);}} /* home: the statement with a battle beside it; stacks, picture second, on a phone */ .statement-row{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:44px;align-items:center;} @media (max-width:760px){.statement-row{grid-template-columns:minmax(0,1fr);gap:26px;}.statement-row figure.plate{max-width:440px;}} /* FPW — the illustrated weekly */ .dateline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin:8px 0; text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;font-weight:500;} .news-mast .wordmark{text-align:center;margin:18px 0 6px;} figure.plate.news figcaption{text-transform:uppercase;letter-spacing:.09em;font-size:12px;text-align:center;max-width:none;margin-top:12px;} .hero-split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr);gap:44px;align-items:start;} @media (max-width:820px){.hero-split{grid-template-columns:minmax(0,1fr);}} blockquote.epigraph{margin:0 0 26px;padding:0;} blockquote.epigraph p{font-family:var(--display);font-style:italic;font-size:clamp(21px,2.4vw,27px);line-height:1.3;margin:0 0 8px;text-wrap:balance;} blockquote.epigraph cite{font-style:normal;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--foxing);font-weight:500;} .news-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 40px;margin-top:8px;} @media (min-width:761px){.news-strip figure:nth-child(even){border-left:1px solid var(--ink);padding-left:40px;}} @media (max-width:760px){.news-strip{grid-template-columns:minmax(0,1fr);}} .masthead-strip{margin:0 0 30px;} .masthead-strip img{max-height:200px;width:auto;margin-inline:auto;} dl.gives{margin:10px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;} dl.gives.spaced{margin-top:34px;} dl.gives div{max-width:66ch;} dl.gives dt{text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;color:var(--foxing);font-weight:500;} dl.gives dd{margin:2px 0 0;} .status-block{margin-top:52px;} .status-block p{margin-top:22px;} /* WSS — the copperplate print */ .keybox{border:1.5px solid var(--ink);border-radius:0 0 28px 28px;padding:26px 30px 28px;margin-top:36px;} .keybox .key{font-style:italic;font-size:17.5px;line-height:1.5;column-width:22ch;column-gap:36px;margin:0 0 18px;} /* ---------- print: the desk goes, the paper stays ---------- */ @media print{ body{background:#fff;padding:0;} .sitenav,.skip,form.notify,.btn{display:none;} .sheet{max-width:none;box-shadow:none;padding:0;background:#fff;} figure.plate img{mix-blend-mode:normal;} a[href]{text-decoration:none;} } @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;}} html{scroll-behavior:smooth;} /* the live excerpt: the app's own output, framed rather than pictured */ figure.live{ margin:28px 0 0; } figure.live iframe{ width:100%; height:560px; border:1px solid var(--rule); display:block; box-shadow:0 10px 30px -14px rgba(0,0,0,.35); background:var(--paper); } figure.live figcaption{ font-size:14.5px; line-height:1.45; margin-top:10px; max-width:70ch; } @media (max-width:760px){ figure.live iframe{ height:760px; } } /* EO page, "How you drive it": four control crops at natural size, bottom-aligned on the captions (DESIGN-vedette §11.3); two by two on a phone. */ .controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;align-items:end;margin-top:18px;} @media (max-width:1180px){.controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}} @media (max-width:700px){.controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}} .controls figure.control{margin:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%;} .controls figure.control img{display:block;max-width:100%;height:auto;align-self:flex-start;border:1px solid var(--rule);} .controls figure.control figcaption{font-size:15px;line-height:1.45;margin-top:10px;min-height:6.2em;} /* ── Anything clickable says so ───────────────────────────────────────── Andy, 20 September. Discreet, and in this page’s own idiom: a hairline rule under a link and a turned arrow at the end of a card. The page is full of dim letterspaced capitals that are NOT links - "IN PREPARATION", "NAPOLEONIC WARS · 1798-1815" - so the ones that are cannot be left looking the same. */ /* a link in a sentence: a hairline rule, set off the baseline, not the browser’s heavy default */ .prose a, .measure a, p a, li a, dd a, figcaption a, .hb-note a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(58,46,33,.45);} .prose a:hover, .measure a:hover, p a:hover, li a:hover, dd a:hover, figcaption a:hover, .hb-note a:hover{text-decoration-color:currentColor;} /* the ones that are already something else keep their own marker */ .btn, a.door, a.proof-strip, .sitenav a, .skip{text-decoration:none;} /* the nav: a hairline that is there at rest, because dim caps alone say nothing here */ .sitenav a{border-bottom:1px solid rgba(217,203,176,.28); padding-bottom:3px;} .sitenav a:hover{border-bottom-color:currentColor;} .sitenav a[aria-current="page"]{border-bottom-color:currentColor;} /* a door is a card-sized link: it carries a turned arrow beside its name, and the arrow steps forward when the card is pointed at */ /* the arrow trails the LAST word, so a name that wraps does not strand it out to the right */ a.door h3::after{content:"\00a0\2192"; display:inline-block; font-size:.62em; vertical-align:.12em; color:var(--ink-soft); opacity:.65; transition:transform .18s ease, opacity .18s ease;} a.door:hover h3::after, a.door:focus-visible h3::after{transform:translateX(3px); opacity:1;} /* the strips already end in an arrow; give it the same step so the two read as one family */ a.proof-strip .ps-line{transition:text-decoration-color .18s ease;} /* nothing that is clickable may look unclickable to a pointer */ a[href], button, summary, label[for], .btn{cursor:pointer;} @media (prefers-reduced-motion:reduce){ a.door h3::after{transition:none;} a.proof-strip:hover .ps-grid{transform:none;}} /* ------------------------------------------------------------------ THE BATTLES PAGE (1 October 2026) ------------------------------------------------------------------ */ /* the strip of facts under the masthead: what a wargamer wants before he reads any prose. Set in the eyebrow's caps so it reads as a dateline rather than a feature list. */ ul.facts{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;margin:26px 0 0;padding:14px 0 0; border-top:1px solid var(--rule);text-transform:uppercase;letter-spacing:.13em; font-size:11.5px;line-height:1.5;color:var(--foxing);} ul.facts li{padding:0 16px;border-right:1px solid var(--rule);} ul.facts li:last-child{border-right:0;} ul.facts li:first-child{padding-left:0;} /* the strip closes the masthead, so the next section needs its own air above it */ .mast ul.facts{margin-bottom:8px;} .mast + section,.mast + .film-block{margin-top:34px;} @media (max-width:760px){ ul.facts{gap:8px 0;font-size:11px;} ul.facts li{padding:0 10px;} } /* THE BATTLE TABLE. The centrepiece of the page, so it is set as a table and not as cards: a wargamer reading it wants to compare rows. The battle name carries the row and the engagement names are in the caption face, as research asked. */ .battles-block h3.sub{font-family:var(--display);font-weight:400;font-size:1.15rem; margin:38px 0 10px;} table.battles{width:100%;border-collapse:collapse;margin:22px 0 6px;} table.battles th,table.battles td{text-align:left;vertical-align:baseline; padding:10px 14px 10px 0;border-bottom:1px solid var(--rule);} table.battles thead th{text-transform:uppercase;letter-spacing:.14em;font-size:11.5px; font-weight:500;color:var(--foxing);padding-bottom:8px;} table.battles tbody th[scope="row"]{font-family:var(--display);font-weight:500;font-size:1.05rem; white-space:normal;min-width:11ch;} table.battles td.n,table.battles th.n{text-align:right;font-variant-numeric:tabular-nums; white-space:nowrap;width:1%;padding-right:18px;} table.battles td.engs{font-size:14.5px;line-height:1.5;font-style:italic;color:var(--ink-soft,#5A4A38);} table.battles tfoot th,table.battles tfoot td{border-bottom:0;border-top:2px solid var(--rule); font-style:normal;padding-top:12px;} table.battles tfoot td.engs{font-style:normal;color:var(--foxing); text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;} /* the one link the page most wants pressed */ a.row-link{display:block;font-family:var(--body);font-style:italic;font-size:14px; margin-top:4px;color:var(--scarlet);} /* the engagement names: open on a wide screen, a tap on a phone. The marker is hidden where the names are already showing, so the row does not sprout a stray triangle. */ details.engfold summary{list-style:none;cursor:pointer;font-style:normal; text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--foxing);} details.engfold summary::-webkit-details-marker{display:none;} details.engfold summary::after{content:"\00a0\25BE";} details.engfold[open] summary{display:none;} @media (max-width:760px){ /* the row is a grid, not four cells: battle, year, count on one line, the names beneath */ table.battles,table.battles tbody,table.battles tfoot{display:block;} table.battles thead{display:none;} table.battles tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto; column-gap:12px;align-items:baseline;border-bottom:1px solid var(--rule);padding:12px 0;} table.battles th,table.battles td{border-bottom:0;padding:0;} /* width:1% is a table-layout trick and means nothing to a grid item, but it still wins the cascade and squeezed the labelled units cell to eighteen pixels */ table.battles td.n{width:auto;} table.battles tbody th[scope="row"]{grid-column:1;font-size:1rem;} table.battles td.engs{grid-column:1 / -1;padding-top:6px;width:auto;} /* the units figure drops to its own line here, where the column head that explained it is not drawn; it carries its own label instead of sitting under a battle name as a bare number */ table.battles td.units{grid-column:1;padding-top:2px;text-align:left;} table.battles td.units::after{content:"\00a0units on the table";font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--foxing);} table.battles tfoot td.units::after{content:"\00a0units on the table";} table.battles tfoot tr{border-bottom:0;border-top:2px solid var(--rule);} /* the row carries the rule; the cells must not each draw one of their own */ table.battles tfoot th,table.battles tfoot td{border-top:0;} table.battles tfoot td.engs{padding-top:4px;} details.engfold[open] summary{display:block;margin-bottom:4px;} } /* the six theatres: a line of cards, not a bulleted list */ ul.theatres{list-style:none;display:grid;gap:10px 14px;padding:0;margin:0 0 18px; grid-template-columns:repeat(3,minmax(0,1fr));} ul.theatres li{border:1px solid var(--rule);padding:10px 14px;font-family:var(--display); font-size:1rem;} @media (max-width:760px){ul.theatres{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:420px){ul.theatres{grid-template-columns:minmax(0,1fr);}} /* three ways in */ .ways{display:grid;gap:30px 40px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;} .ways h3{font-family:var(--display);font-weight:500;font-size:1.1rem;margin:0 0 8px;} .ways p{margin:0;} @media (max-width:760px){.ways{grid-template-columns:minmax(0,1fr);}} /* the print gallery at the foot: caption only, four across */ .plates.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 30px;} @media (max-width:900px){.plates.four{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:460px){.plates.four{grid-template-columns:minmax(0,1fr);}} /* the Sources cut is a tall photograph of a real sheet; it is the proof and it is allowed to be big, but not so big that the page becomes it */ figure.sample.sources-shot img{max-height:760px;object-fit:cover;object-position:top;} /* the fallback link inside a