/* The About page: exactly one newspaper page, the same size and shape as the paper's own pages
   (as wide as the screen up to 1100px, height = 1.4 x width). Like paper.css, every size inside the
   sheet is a share of its width (cqw), so it looks identical on any screen. On phones it becomes a
   normal scrolling page with readable type. */
a.key { text-decoration: none; display: inline-block; }
.topline .tools:empty { display: block; }

.about-sheet {
  width: min(1100px, calc(100vw - 32px)); aspect-ratio: 1 / 1.4; overflow: hidden;
  container-type: inline-size; display: flex; flex-direction: column;
  padding: 2.4cqw 2.8cqw 2cqw; color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  font-family: "Libre Caslon Text", Georgia, serif;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Head: folio line, blackletter title, tagline */
.about-folio { display: flex; justify-content: space-between; border-bottom: 0.1cqw solid var(--ink); padding-bottom: 0.4cqw;
  font-family: "Old Standard TT", serif; font-size: 1.05cqw; letter-spacing: 0.2cqw; text-transform: uppercase; }
.about-mast { font-family: "UnifrakturMaguntia", serif; font-weight: 400; text-align: center; font-size: 5.6cqw;
  line-height: 1.05; margin: 1.3cqw 0 0.3cqw; color: var(--ink); white-space: nowrap; }
.about-tag { display: flex; justify-content: center; align-items: center; gap: 1.2cqw; font-family: "Old Standard TT", serif;
  font-style: italic; font-size: 1.5cqw; letter-spacing: 0.08cqw; margin: 0 auto 1.3cqw; }
.about-tag::before, .about-tag::after { content: ""; width: 6cqw; border-top: 0.12cqw solid var(--ink); }

/* Three columns: why, beliefs, reading. Sections stay whole and the column rules run full height. */
.about-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0.45cqw double var(--ink); padding-top: 1.4cqw; }
.about-cols section { padding: 0 1.5cqw; border-left: 0.1cqw solid var(--rule); }
.about-cols section:first-child { padding-left: 0; border-left: none; }
.about-cols section:last-child { padding-right: 0; }
.about-cols h2 { font-family: "Old Standard TT", serif; font-weight: 700; text-transform: uppercase; text-align: center;
  font-size: 1.55cqw; line-height: 1.1; letter-spacing: 0.06cqw; margin: 0 0 0.8cqw; padding-bottom: 0.6cqw; border-bottom: 0.1cqw solid var(--ink); }
.about-cols p, .about-cols li { font-size: 1.36cqw; line-height: 1.5; text-align: left; hyphens: auto; }
.about-cols p { margin: 0 0 0.8cqw; }
.about-cols .lede::first-letter { float: left; font-family: "Old Standard TT", serif; font-weight: 700; font-size: 4.4cqw; line-height: 0.82; padding: 0.5cqw 0.6cqw 0 0; }
.creed { list-style: none; margin: 0; padding: 0; }
.creed li { margin: 0 0 0.7cqw; padding-left: 1.5cqw; position: relative; }
.creed li::before { content: "\2756"; position: absolute; left: 0; top: 0.1cqw; font-size: 1cqw; }

/* Meet the Newsroom: a 4-column grid of staff boxes; the editor, the production desk and the publisher get double width. */
.about-wide { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 0.45cqw double var(--ink); margin-top: 0.6cqw; padding-top: 1.1cqw; }
.about-wide > h2 { font-family: "UnifrakturMaguntia", serif; font-weight: 400; text-align: center; font-size: 3.4cqw; line-height: 1.1; margin: 0; }
.about-wide .intro { text-align: center; font-style: italic; font-size: 1.4cqw; line-height: 1.45; max-width: 62cqw; margin: 0.3cqw auto 1.1cqw; }
.staff-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr;
  border-top: 0.1cqw solid var(--ink); border-left: 0.1cqw solid var(--ink); }
.staff { padding: 1cqw 1.1cqw; border-right: 0.1cqw solid var(--ink); border-bottom: 0.1cqw solid var(--ink); min-width: 0; }
.staff.chief, .staff.wide2 { grid-column: span 2; }
.staff .head { display: flex; align-items: center; gap: 0.9cqw; margin-bottom: 0.6cqw; padding-bottom: 0.6cqw; border-bottom: 0.08cqw dotted var(--ink-soft); }
.staff .who { font-family: "Old Standard TT", serif; font-weight: 700; font-size: 1.45cqw; line-height: 1.1; text-transform: uppercase; }
.staff .title { font-family: "Old Standard TT", serif; font-style: italic; font-size: 1.15cqw; letter-spacing: 0.04cqw; margin-top: 0.2cqw; }
.staff p { margin: 0; font-size: 1.3cqw; line-height: 1.5; text-align: left; hyphens: auto; }
.staff .mono { flex: none; width: 3.3cqw; height: 3.3cqw; border: 0.14cqw solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: "Old Standard TT", serif; font-weight: 700; font-size: 1.2cqw; }
.staff.chief .mono { width: 4.4cqw; height: 4.4cqw; font-family: "UnifrakturMaguntia", serif; font-weight: 400; font-size: 2.2cqw;
  box-shadow: inset 0 0 0 0.3cqw var(--paper), inset 0 0 0 0.4cqw var(--ink); }
.staff.chief .who { font-size: 1.7cqw; }
.staff.chief p { font-size: 1.4cqw; }
.staff.small { background: rgba(29, 26, 22, 0.035); }

/* Sign-off and the AI note share one line at the foot */
.about-close { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2cqw; align-items: center; margin-top: 1.1cqw; }
.signoff { margin: 0; font-style: italic; font-size: 1.35cqw; line-height: 1.5; }
.signoff b { font-style: normal; font-family: "Old Standard TT", serif; letter-spacing: 0.1cqw; }
.about-ai { margin: 0; padding: 0.7cqw 1cqw; border: 0.1cqw solid var(--ink); font-style: italic; font-size: 1.15cqw; line-height: 1.45; }
.about-foot { margin-top: 1cqw; padding-top: 0.6cqw; border-top: 0.45cqw double var(--ink); text-align: center; font-size: 1.2cqw; font-style: italic; }
.about-foot .orn { font-style: normal; margin-right: 0.6cqw; }

/* Phones: a normal page with readable type, one column. */
@media (max-width: 700px) {
  .about-sheet { aspect-ratio: auto; overflow: visible; padding: 22px 18px; }
  .about-folio { font-size: 10.5px; letter-spacing: 0.14em; padding-bottom: 5px; }
  .about-mast { font-size: clamp(30px, 9vw, 44px); white-space: normal; margin: 14px 0 4px; }
  .about-tag { font-size: 15px; gap: 10px; margin-bottom: 14px; white-space: nowrap; }
  .about-tag::before, .about-tag::after { width: 28px; border-top-width: 1.5px; }
  .about-cols { grid-template-columns: 1fr; border-top-width: 5px; padding-top: 16px; }
  .about-cols section { padding: 0 0 6px; border-left: none; }
  .about-cols h2 { font-size: 18px; margin-bottom: 8px; padding-bottom: 6px; border-bottom-width: 1px; }
  .about-cols p, .about-cols li { font-size: 16px; }
  .about-cols p { margin-bottom: 10px; }
  .about-cols .lede::first-letter { font-size: 52px; padding: 5px 7px 0 0; }
  .creed li { margin-bottom: 9px; padding-left: 18px; }
  .creed li::before { font-size: 12px; top: 2px; }
  .about-wide { border-top-width: 5px; margin-top: 8px; padding-top: 14px; }
  .about-wide > h2 { font-size: 32px; }
  .about-wide .intro { font-size: 16px; max-width: none; margin: 4px 0 14px; }
  .staff-grid { grid-template-columns: 1fr; grid-auto-rows: auto; border-left: none; border-top-width: 1px; }
  .staff, .staff.chief, .staff.wide2 { grid-column: auto; padding: 12px 2px; border-right: none; border-bottom-width: 1px; }
  .staff .head { gap: 10px; margin-bottom: 6px; padding-bottom: 6px; }
  .staff .who, .staff.chief .who { font-size: 17px; }
  .staff .title { font-size: 13.5px; }
  .staff p, .staff.chief p { font-size: 15.5px; }
  .staff .mono { width: 38px; height: 38px; font-size: 14px; border-width: 1.5px; }
  .staff.chief .mono { width: 48px; height: 48px; font-size: 24px; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--ink); }
  .about-close { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
  .signoff { font-size: 16px; }
  .about-ai { font-size: 14.5px; padding: 9px 12px; }
  .about-foot { font-size: 14px; margin-top: 14px; padding-top: 10px; border-top-width: 5px; }
}

/* Balance: the AI note sits in the Reading column; the last staff row fits its text; text sized to fill the page. */
.about-cols .about-ai { margin-top: 1.2cqw; font-size: 1.2cqw; }
.staff-grid { grid-auto-rows: auto; grid-template-rows: 1fr 1fr auto; }
.staff p { font-size: 1.42cqw; line-height: 1.52; }
.staff.chief p { font-size: 1.62cqw; line-height: 1.5; }
.staff.small p { font-size: 1.36cqw; }
.signoff { margin: 1.1cqw auto 0; max-width: 78cqw; text-align: center; font-size: 1.4cqw; }
@media (max-width: 700px) {
  .about-cols .about-ai { margin-top: 12px; font-size: 14.5px; }
  .staff-grid { grid-template-rows: none; }
  .staff p, .staff.chief p, .staff.small p { font-size: 15.5px; }
  .signoff { font-size: 16px; margin-top: 14px; max-width: none; }
}
.staff.chief { display: flex; flex-direction: column; }
.motto { margin: auto 0 0; padding: 1cqw 1cqw 0.4cqw; border-top: 0.35cqw double var(--ink); text-align: center;
  font-family: "Old Standard TT", serif; font-style: italic; font-size: 2.3cqw; line-height: 1.2; }
.staff:not(.chief):not(.small) p { font-size: 1.52cqw; line-height: 1.55; }
@media (max-width: 700px) {
  .motto { font-size: 20px; padding: 10px 6px 2px; border-top-width: 4px; margin-top: 10px; }
  .staff:not(.chief):not(.small) p { font-size: 15.5px; }
}
/* The writers' row has the shortest texts: a touch larger so the row is filled like the others. */
.staff-grid .staff:nth-child(n+4):nth-child(-n+7) p { font-size: 1.7cqw; line-height: 1.56; }
@media (max-width: 700px) { .staff-grid .staff:nth-child(n+4):nth-child(-n+7) p { font-size: 15.5px; } }
/* One text size for every staff box (consistent type); the top columns take a touch more room instead. */
.staff-grid .staff:nth-child(n+4):nth-child(-n+7) p, .staff:not(.chief):not(.small) p { font-size: 1.56cqw; line-height: 1.55; }
.staff.small p { font-size: 1.56cqw; line-height: 1.5; }
.about-cols p, .about-cols li { font-size: 1.5cqw; line-height: 1.5; }
.about-cols .about-ai { font-size: 1.28cqw; }
@media (max-width: 700px) {
  .staff-grid .staff:nth-child(n+4):nth-child(-n+7) p, .staff:not(.chief):not(.small) p, .staff.small p { font-size: 15.5px; }
  .about-cols p, .about-cols li { font-size: 16px; }
  .about-cols .about-ai { font-size: 14.5px; }
}
.about-cols .letters a { color: var(--ink); text-decoration-thickness: 0.08cqw; text-underline-offset: 0.2cqw; overflow-wrap: anywhere; }
@media (max-width: 700px) { .about-cols .letters a { text-decoration-thickness: 1px; } }