/* Chicago 7 module - only what the theme does not already provide.
   The theme's own stylesheet supplies every base: type, color, layout,
   header and footer. Adam, 2026-09-27: "the design of the original is highly
   intentional. It needs to be respected and copied." So nothing here resets
   or overrides a theme rule - no body font, no link color, no container
   width. These are the pieces the theme has no equivalent for. */

:root{
  --c7-blue:#174970; --c7-blue-dark:#0f3350; --c7-accent:#4db2ec; --c7-red:#dd3333;
  --c7-rule:#dfe5ea; --c7-soft:#f4f7f9; --c7-muted:#5b6b7c;
  --c7-display:Roboto,"Helvetica Neue",Arial,sans-serif;
  --c7-meta:"Open Sans","Helvetica Neue",Arial,sans-serif;
}

/* The content column, matched to the theme: 1068px centered at desktop, with
   the same steps the theme uses. Measured on a live category page - the
   content there starts at left:121px in a 1310px viewport, which is a 1068
   column. The CSS subset lost the theme's own .td-container width rule, so
   the module ran edge to edge. */
/* 48px below the last element: measured on a live category page, where
   the last card clears the footer by exactly that. The theme leaves no
   gap of its own - its blocks carry their own bottom margin - so
   without this the module's cards sat flush against the footer. */
.c7-wrap{width:1068px;max-width:100%;margin:0 auto;padding:0 0 48px}
@media (max-width:1140px){.c7-wrap{width:980px}}
@media (max-width:1018px){.c7-wrap{width:740px}}
@media (max-width:767px){.c7-wrap{width:auto;padding:0 14px}}


/* breadcrumb ----------------------------------------------------------- */
/* the breadcrumb is untouched - it stays plain inline text. The chapter
   navigation is positioned over the same line from the right, so it costs no
   height and does not alter how the crumb itself lays out. */
.c7-crumb{position:relative;font:400 11px/1 var(--c7-meta);color:var(--c7-muted);
  padding:14px 0 0;min-height:1.9rem}
.c7-crumb .c7-yearnav{position:absolute;right:0;top:8px;gap:.8rem}
.c7-crumb .c7-pdf{padding:.28rem .45rem;font-size:12px}
.c7-crumb a{color:var(--c7-muted);text-decoration:none}
.c7-crumb a:hover{color:var(--c7-red)}
.c7-crumb span{padding:0 .35em;opacity:.65}

/* page opening --------------------------------------------------------- */
.c7-hero{padding:1.5rem 0 1.25rem;border-bottom:3px solid var(--c7-blue);
  margin-bottom:1.75rem}
.c7-hero h1{margin:0 0 .35rem;font:700 clamp(1.8rem,4vw,2.6rem)/1.1 var(--c7-display);
  color:var(--c7-blue-dark);letter-spacing:-.02em}
.c7-kicker{font:700 11px/1 var(--c7-meta);letter-spacing:.14em;
  text-transform:uppercase;color:var(--c7-red);margin:0 0 .6rem}
.c7-kicker a{color:inherit;text-decoration:none}
.c7-kicker a:hover{color:var(--c7-blue)}
.c7-lede{margin:0;color:var(--c7-muted);font-size:1rem;max-width:42rem}

/* The header: a heading, and the two arrows that step off it.
   One typeface, one size, one color. Everything else was repetition of
   something already on the page. */
.c7-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
  padding:1.5rem 0 1.15rem;margin:0 0 1.75rem;
  border-bottom:3px solid var(--c7-blue)}
/* Roboto 400, not 700. Measured off the version Adam picked: 41.75px,
   line-height 45.9, letter-spacing -0.835px, #0f3350. The regular weight is
   what makes it read taller and less bulky than the bold. */
/* A chapter page: the kicker and title sit centered above the photograph.
   No rules - the left bar only made sense when the title was joined to the
   fact panel below it, and a horizontal one cut the page in half. */
.c7-head-joined{display:block;border:none;text-align:center;
  padding:2.4rem 0 .4rem;margin:0 0 2.2rem}

/* Year page: the arrows and the book sit on the breadcrumb line, the title
   centered directly under it, the publication date centered beneath as its
   caption, and the blue rule closing the header. Because the navigation costs
   no row of its own, the top padding is small - the header holds the title,
   its date and the rule, and nothing else. */
.c7-head-year{padding:2rem 0 1.6rem;margin:0 0 2.6rem;
  border-bottom:3px solid var(--c7-blue)}
.c7-head-year .c7-pubdate{margin:1rem 0 0;text-align:center;
  font:400 11px/1 var(--c7-meta);color:var(--c7-muted);letter-spacing:.02em}
.c7-head-joined h1{margin:0;font-size:clamp(1.55rem,3.2vw,2.1rem)}
.c7-head-joined .c7-kicker{margin:0 0 1.5rem;font-size:14px;letter-spacing:.14em}

.c7-head h1{margin:0;font:400 clamp(1.8rem,4vw,2.6rem)/1.1 var(--c7-display);
  color:var(--c7-blue-dark);letter-spacing:-.02em}

.c7-yearnav{display:flex;align-items:baseline;gap:1.4rem;
  font:700 13px/1 var(--c7-meta)}
.c7-yearnav a{text-decoration:none;color:var(--c7-blue);white-space:nowrap}
.c7-yearnav a:hover{color:var(--c7-red)}
/* Fixed slots. Adam, 2026-09-27: "if a user clicks many of them in a row,
   it always has the same function. If they move, even slightly, between
   pages, the arrow click on page one might result in a PDF click on page
   two." So an absent control keeps its width instead of collapsing, and
   every control sits at the same x on every page. */
.c7-yearnav{align-items:center}
.c7-yearnav > *{flex:0 0 auto;text-align:center}
.c7-yearnav .c7-nav-prev,.c7-yearnav .c7-nav-next{width:2.2rem}
.c7-yearnav .c7-pdf,.c7-yearnav .c7-nav-mid{width:7.5rem;box-sizing:border-box}

/* the year's book, between the arrows. Same font, same color and same
   size as the arrows either side of it - only the pill marks it out. */
.c7-pdf{display:inline-block;padding:.34rem .5rem;
  border:1px solid currentColor;border-radius:3px;
  text-decoration:none;color:var(--c7-blue);
  font:700 13px/1 var(--c7-meta)}
.c7-pdf:hover{color:var(--c7-red)}


/* every photograph carries a thin black border */
.article img,.hero-shot img,.chapters img,.years img{
  border:1px solid rgba(0,0,0,.85);box-sizing:border-box}

/* the reader: the browser's own PDF view, full height */
.c7-reader{border:1px solid var(--c7-rule);background:var(--c7-soft);
  height:min(82vh,60rem);margin:0 0 .75rem}
.c7-reader object{width:100%;height:100%;display:block}
.c7-reader-fallback{padding:3rem 1.5rem;text-align:center;
  font-family:var(--c7-meta);color:var(--c7-muted)}
.c7-reader-foot{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;
  font:400 12px/1.6 var(--c7-meta);color:var(--c7-muted);margin:0 0 2rem}
.c7-reader-foot a{text-decoration:none;color:var(--c7-blue)}
.c7-reader-foot a:hover{color:var(--c7-red)}
.c7-reader-foot .sz{margin-right:auto;opacity:.8}

/* year index ----------------------------------------------------------- */
.years{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--c7-rule);border:1px solid var(--c7-rule);
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.years li{background:#fff}
.years a{display:block;text-decoration:none;height:100%}
.years a:hover{background:var(--c7-soft)}
.years img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.years .t{display:block;padding:.85rem 1rem}
.years .y{font:700 1.5rem/1 var(--c7-display);color:var(--c7-blue)}
.years .n{display:block;margin-top:.25rem;font:400 11px/1.3 var(--c7-meta);
  color:var(--c7-muted)}
.years li.gap{background:var(--c7-soft)}
.years li.gap div{padding:.85rem 1rem}
.years li.gap .y{color:var(--c7-muted)}

/* chapter cards - the photograph is the card, title laid over it -------- */
.chapters{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(24rem,1fr))}
.chapters li{position:relative;background:var(--c7-blue-dark);overflow:hidden}
.chapters a{display:block;text-decoration:none;color:#fff;position:relative}
.chapters img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .4s ease}
.chapters a:hover img{transform:scale(1.035)}
.chapters .t{position:absolute;left:0;right:0;bottom:0;z-index:2;
  text-align:center;padding:4rem 1.15rem 1.35rem;
  background:linear-gradient(to top,rgba(10,26,40,.92) 0%,
    rgba(10,26,40,.72) 38%,rgba(10,26,40,.28) 68%,rgba(10,26,40,0) 100%);
  /* matched to the live card titles: Roboto 500, 1.25, white, that shadow */
  font:500 clamp(1.125rem,.55rem + 1.1vw,1.5rem)/1.25 var(--c7-display);
  color:#fff;text-shadow:rgba(0,0,0,.2) 1px 1px 3px}
.chapters .by{display:block;margin-top:.5rem;font:400 11px/1.35 var(--c7-meta);
  color:#fff;text-shadow:rgba(0,0,0,.3) 1px 1px 1px}
.chapters .by b{font-weight:700}
.chapters .by .sep{opacity:.75;padding:0 .12rem}
.chapters a:focus-visible{outline:3px solid var(--c7-accent);outline-offset:2px}

/* download strip ------------------------------------------------------- */
.download{border:1px solid var(--c7-rule);border-left:4px solid var(--c7-red);
  background:var(--c7-soft);padding:.9rem 1.1rem;margin:0 0 1.75rem;
  display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;
  font-family:var(--c7-meta)}
.download strong{font:700 11px/1 var(--c7-meta);letter-spacing:.08em;
  text-transform:uppercase;color:var(--c7-blue-dark)}
.download .sz{color:var(--c7-muted);font-size:12px}

/* chapter page --------------------------------------------------------- */
/* the photograph leads the chapter; the title sits under it, against
   the address and architect it describes */
.hero-shot{margin:0 0 1.5rem}
.hero-shot img{width:100%;max-height:30rem;object-fit:cover;display:block}
.hero-shot figcaption{font:400 12px/1.45 var(--c7-meta);color:var(--c7-muted);
  padding:.5rem 0 0}

dl.facts{margin:0 0 1.5rem;padding:1rem 1.15rem;background:var(--c7-soft);
  border:1px solid var(--c7-rule);border-left:4px solid var(--c7-blue);
  display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;
  font-family:var(--c7-meta);font-size:14px}
dl.facts dt{font-weight:700;color:var(--c7-muted);text-transform:uppercase;
  letter-spacing:.05em;font-size:11px;padding-top:.3rem;white-space:nowrap}
dl.facts dd{margin:0;font-weight:600}

.article{max-width:46rem}
.article h2{font:700 1.3rem/1.25 var(--c7-display);color:var(--c7-blue-dark);
  margin:1.9rem 0 .6rem}
/* a named building inside a chapter that covers several */
.article h3{font:700 1.0625rem/1.3 var(--c7-display);color:var(--c7-blue);
  margin:1.6rem 0 .5rem}
.article h3 + dl.facts{margin-top:0}
.article img{display:block;max-width:100%;height:auto}
.article figure{margin:1.6rem 0}
.article figcaption{font:400 12px/1.45 var(--c7-meta);color:var(--c7-muted);
  margin-top:.4rem}

.note{background:var(--c7-soft);border:1px solid var(--c7-rule);
  padding:.9rem 1.1rem;font-size:13px;color:var(--c7-muted);margin:0 0 1.75rem;
  font-family:var(--c7-meta)}
.prevnext{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:2.5rem 0 1rem;padding-top:1.1rem;border-top:1px solid var(--c7-rule);
  font:400 13px/1.4 var(--c7-meta)}
.prevnext a{text-decoration:none;max-width:47%}

@media (max-width:52rem){
  .chapters{grid-template-columns:1fr;gap:1rem}
}
@media (max-width:30rem){
  dl.facts{grid-template-columns:1fr;gap:.1rem}
  dl.facts dd{margin-bottom:.5rem}
  .hero-shot img{max-height:15rem}
}
@media print{
  .td-header-template-wrap,.td-footer-template-wrap,.c7-crumb,
  .prevnext,.download{display:none}
}