/* Layout: modeled on The Magazine of Wall Street, Sept. 12, 1925. Masthead cartouche between chain bands,
   a framed lead department (standing head, bold deck, boxed initial, side-heads), boxed department heads,
   hand-lettered chart plates in black ink (hatched rises, stippled declines), a letterspaced
   MARKET STATISTICS table with dot leaders, and a running foot. Single theme: black ink on paper. */
:root {
  --paper: #EFECE3;
  --plate: #F8F6F0;
  --ink: #161512;
  --muted: #57534A;
  --minor: rgba(22,21,18,.12);   /* graph ruling */
  --major: rgba(22,21,18,.36);
  --display: "Fraunces", "Cheltenham", "Century Schoolbook", Georgia, serif;
  --body: "Old Standard TT", "Century Schoolbook", "New Century Schoolbook", Georgia, serif;
  --letter: "Architects Daughter", "Segoe Print", cursive;   /* draftsman's lettering on charts */
  --chain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cellipse cx='7' cy='5' rx='6' ry='2.8' fill='none' stroke='%23161512' stroke-width='1.2'/%3E%3Cline x1='0' y1='5' x2='14' y2='5' stroke='%23161512' stroke-width='.7'/%3E%3C/svg%3E");
  --stipple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23161512' fill-opacity='.55'%3E%3Ccircle cx='2' cy='3' r='.7'/%3E%3Ccircle cx='9' cy='1.5' r='.5'/%3E%3Ccircle cx='15' cy='5' r='.8'/%3E%3Ccircle cx='6' cy='9' r='.6'/%3E%3Ccircle cx='12' cy='11' r='.5'/%3E%3Ccircle cx='3' cy='15' r='.8'/%3E%3Ccircle cx='10' cy='16' r='.6'/%3E%3Ccircle cx='16' cy='14' r='.5'/%3E%3C/svg%3E");
  color-scheme: light;
}
/* Base reset (the mockup got this from its host page) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

body {
  background-color: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.page { max-width: 1040px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 22px 30px; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.chainband { height: 10px; background: var(--chain) repeat-x center; }

/* Masthead */
.mast { border: 4px double var(--ink); padding: 6px; }
.cartouche { border: 1.5px solid var(--ink); background: var(--plate); padding: 12px 10px 10px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.cartouche .orn { font-size: clamp(22px, 4vw, 40px); line-height: 1; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", serif; }
.mast h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 6.6vw, 68px); line-height: 1; letter-spacing: -.005em; text-transform: uppercase; text-align: center; }
.mast h1 i { font-family: var(--display); font-style: italic; font-weight: 600; text-transform: none; font-size: .62em; letter-spacing: 0; }
.credits { display: flex; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding: 10px 8px 4px; }
.credits div { text-align: center; font-family: var(--body); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.credits .lbl { display: block; font-style: italic; font-weight: 400; font-size: 11.5px; letter-spacing: .3em; }
.credits .motto { flex: 1 1 260px; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 15px; align-self: center; }
nav { border-bottom: 1px solid var(--ink); padding-block: 7px; margin-top: 8px; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
nav li { font-family: var(--body); font-weight: 700; font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; }
nav li + li::before { content: "\00B7"; margin: 0 14px; }
nav a { text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

/* Framed lead department */
.framed { margin-top: 26px; border: 4px double var(--ink); padding: 6px; }
.framed > .inner { border: 1px solid var(--ink); background: var(--plate); padding: 18px clamp(14px, 3vw, 34px) 22px; }
.framed > .chainband { margin: 0 0 6px; }
.framed > .chainband:last-child { margin: 6px 0 0; }
.dept-standing { margin: 0; text-align: center; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 5vw, 50px); line-height: 1.02; text-transform: uppercase; letter-spacing: -.01em; }
.deck { font-weight: 700; font-size: clamp(16px, 2vw, 20px); line-height: 1.32; text-align: center; margin: 12px auto 0; max-width: 46ch; text-wrap: balance; }
.byline { text-align: center; font-weight: 700; font-size: 14.5px; letter-spacing: .08em; margin: 12px 0 14px; text-transform: uppercase; }
.byline span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cols { column-count: 2; column-gap: 30px; text-align: justify; hyphens: auto; }
.cols p { margin: 0; text-indent: 1.2em; }
.cols p.dc { text-indent: 0; }
.cols p.dc::first-letter { float: left; font-family: var(--display); font-weight: 900; font-size: 3.5em; line-height: .78; padding: 7px 7px 3px; margin: 3px 9px 0 0; border: 1.5px solid var(--ink); background: var(--stipple) var(--plate); }
.cols p.dc .open { text-transform: uppercase; letter-spacing: .02em; }
.fleuron { display: flex; justify-content: center; margin: 14px 0 12px; break-inside: avoid; }
.side { float: left; width: 6.4em; font-style: italic; font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; text-align: left; margin: 2px 10px 4px 0; }

/* Boxed department heads, as on the 1925 group pages */
.dept { display: table; margin: 34px auto 16px; border: 3px double var(--ink); padding: 6px 26px; font-family: var(--body); font-weight: 700; font-size: clamp(16px, 2.4vw, 21px); letter-spacing: .32em; text-transform: uppercase; text-align: center; background: var(--plate); }

/* The week's count, and the 1925 note */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; }
.pair > * { min-width: 0; }
.statbox { border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; background: var(--plate); padding: 14px 16px 16px; margin: 4px; }
.statbox h3, .then h3 { margin: 0; text-align: center; font-family: var(--body); font-weight: 700; font-size: 15px; letter-spacing: .3em; text-transform: uppercase; }
.statbox .sub, .then .sub { text-align: center; font-style: italic; font-size: 14px; margin: 3px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.statbox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.statbox li { display: flex; align-items: baseline; gap: 6px; font-size: 15.5px; }
.statbox li .dots, .ld i { flex: 1; border-bottom: 2px dotted var(--ink); transform: translateY(-4px); min-width: 14px; opacity: .7; }
.statbox li .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.statbox li.gap { margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--ink); }
.split { height: 12px; display: flex; gap: 0; margin: 12px 0 4px; border: 1.5px solid var(--ink); }
.split .a { background: repeating-linear-gradient(45deg, var(--ink) 0 1.3px, transparent 1.3px 4px); border-right: 1.5px solid var(--ink); }
.split .d { background: var(--stipple); }
.splitcap { display: flex; justify-content: space-between; font-style: italic; font-size: 13.5px; }
.then { border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 12px 4px 14px; align-self: start; margin-top: 4px; }
.then blockquote { margin: 6px 0 10px; font-size: 19px; line-height: 1.42; font-style: italic; text-align: justify; hyphens: auto; }
.then blockquote::before { content: "\201C"; font-family: var(--display); font-weight: 900; font-style: normal; font-size: 2.4em; line-height: 0; vertical-align: -.38em; margin-right: 4px; }
.then .cite { font-size: 14px; margin: 0 0 8px; }
.then .cite b { letter-spacing: .04em; }
.then p.after { margin: 0; font-size: 15.5px; }

/* Chart plates */
.fig { margin: 0; }
.chart { position: relative; border: 3px solid var(--ink); background: var(--plate); padding: 8px 4px 4px; }
.chart .ctitle { font-family: var(--letter); font-variant: small-caps; font-size: clamp(19px, 2.6vw, 26px); letter-spacing: .05em; text-align: center; line-height: 1.15; margin: 0 6px 6px; text-wrap: balance; }
.chart .csub { text-align: center; font-family: var(--letter); font-size: 13px; letter-spacing: .08em; margin: -2px 0 6px; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart svg text { font-family: var(--letter); font-size: 12.5px; fill: var(--ink); }
.chart svg .band { font-size: 12px; letter-spacing: .08em; }
.chart svg .box { font-size: 13px; letter-spacing: .04em; }
.fig figcaption { font-size: 14.5px; line-height: 1.4; margin-top: 9px; text-align: justify; hyphens: auto; }
.figno { font-weight: 700; font-style: italic; }
.tip { position: absolute; pointer-events: none; background: var(--plate); color: var(--ink); border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 2px; font-family: var(--body); font-size: 13.5px; line-height: 1.45; padding: 6px 10px; white-space: nowrap; z-index: 2; }
.tip b { letter-spacing: .04em; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.duo > * { min-width: 0; }

/* MARKET STATISTICS */
.stats-head { margin: 40px 0 0; border-top: 5px solid var(--ink); border-bottom: 1px solid var(--ink); padding-block: 8px 6px; text-align: center; font-family: var(--body); font-weight: 400; font-size: clamp(24px, 5vw, 44px); letter-spacing: .3em; line-height: 1.05; }
.tbl { overflow-x: auto; border-bottom: 1px solid var(--ink); }
table { border-collapse: collapse; width: 100%; min-width: 700px; font-size: 16px; font-variant-numeric: tabular-nums; }
thead th { font-weight: 400; font-size: 15px; line-height: 1.15; text-align: right; padding: 4px 8px; vertical-align: bottom; }
thead tr:first-child th { padding-top: 10px; }
thead .span { text-align: center; white-space: nowrap; }
thead .span span { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
thead .span span::before, thead .span span::after { content: ""; flex: 1; border-top: 1px solid var(--ink); }
tbody td { text-align: right; padding: 2px 8px; }
tbody td:first-child { text-align: left; }
#weeks tbody td:first-child { width: 32%; }
tbody tr:last-child td { padding-bottom: 10px; }
.ld { display: flex; align-items: baseline; gap: 4px; }
.ld span, .ld a { white-space: nowrap; }
tr.now td { font-weight: 700; }
td .tone { font-style: italic; }
.tblnote { font-size: 14px; margin: 8px 0 0; font-style: italic; }

/* The editor on the name, and a house announcement */
.lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 290px); gap: 28px; }
.lower > * { min-width: 0; }
.essay h3 { margin: 0; text-align: center; font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.08; text-wrap: balance; }
.essay .edeck { text-align: center; font-style: italic; font-weight: 700; font-size: 16.5px; margin: 8px 0 14px; }
.essay blockquote { margin: 10px 0; padding: 6px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); text-align: center; font-style: italic; font-size: 17.5px; break-inside: avoid; }
.essay blockquote cite { display: block; font-style: normal; font-size: 13px; letter-spacing: .06em; margin-top: 3px; }
.ad { border: 2px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 4px; padding: 18px 16px; text-align: center; align-self: start; margin: 5px; background: var(--plate); }
.ad .k { font-style: italic; font-size: 14px; }
.ad h4 { margin: 4px 0 8px; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1.02; }
.ad p { margin: 0 0 12px; font-size: 15px; }
.ad hr { width: 60px; border: 0; border-top: 2px solid var(--ink); margin: 10px auto; }
.ad .links { display: grid; gap: 6px; }
.ad .links a { display: block; border: 1px solid var(--ink); padding: 7px; font-weight: 700; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.ad .links a:hover { background: var(--ink); color: var(--plate); }

/* Running foot */
footer { margin-top: 36px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 18px; font-style: italic; font-weight: 700; font-size: 14px; }
.foot .date { letter-spacing: .06em; text-transform: uppercase; }
.foot .mention b { font-style: italic; letter-spacing: .04em; text-transform: uppercase; }
.fine { font-size: 13px; margin: 10px 0 0; border-top: 1px solid var(--ink); padding-top: 8px; max-width: 80ch; }

@media (max-width: 820px) {
  .pair, .lower, .duo { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cols { column-count: 1; }
  .cartouche .orn { display: none; }
  .credits { justify-content: center; }
}

/* Without a centennial excerpt the week's count stands alone */
.pair.solo { grid-template-columns: minmax(0, 520px); justify-content: center; }

/* Back numbers */
.backnos td:first-child a { text-decoration: none; }
.backnos td:first-child a:hover { text-decoration: underline; }
.backnos .deckcell { min-width: 240px; text-align: left; font-style: italic; font-size: 14.5px; white-space: normal; }