/* Breathe Homes Technical White Papers — Notion dark mode */

:root {
  --bg: #191919;
  --text: rgba(255, 255, 255, 0.81);
  --text-muted: rgba(255, 255, 255, 0.443);
  --divider: rgba(255, 255, 255, 0.13);
  --callout-bg: rgba(255, 255, 255, 0.055);
  --card-bg: #252525;
  --card-bg-hover: #313131;
  --card-ring: rgba(255, 255, 255, 0.055);
  --table-border: rgba(255, 255, 255, 0.13);
  --table-header-bg: rgba(255, 255, 255, 0.03);
  --hover-bg: rgba(255, 255, 255, 0.055);
  --content-width: 708px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 96px 24px 180px;
}

/* ------------------------------------------------------------- typography */

.page-title {
  margin: 0 0 12px;
  padding: 3px 2px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.9);
}

h2.h1-blk,
h3.h2-blk,
h4.h3-blk {
  margin: 0;
  padding: 3px 2px;
  scroll-margin-top: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
}

h2.h1-blk {
  margin-top: 2em;
  margin-bottom: 4px;
  font-size: 1.875em;
}

h3.h2-blk {
  margin-top: 1.4em;
  margin-bottom: 1px;
  font-size: 1.5em;
}

h4.h3-blk {
  margin-top: 1em;
  margin-bottom: 1px;
  font-size: 1.25em;
}

p {
  margin: 1px 0 0;
  padding: 3px 2px;
}

em {
  font-style: italic;
}

.grey {
  color: var(--text-muted);
}

/* Named authorship on technical writing is a credibility signal, so it sits
   directly under the title rather than in a footer nobody reaches. Quiet
   enough not to compete with the abstract that follows. */
.byline {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 0.875em;
}

.red {
  color: rgb(255, 115, 105);
}

/* ----------------------------------------------------------- inline links */

/* House style: white with an underline. Deliberately a bare element selector,
   so the class-based link components below (.toc a, .back-link, .card) keep
   their own treatment without needing overrides. */

a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------ lists */

ul,
ol {
  margin: 1px 0 0;
  padding-left: 26px;
}

li {
  margin-top: 1px;
  padding: 3px 2px;
}

ul {
  list-style: disc;
}

ul ul {
  list-style: circle;
}

ul ul ul {
  list-style: square;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-top: 1px;
}

/* --------------------------------------------------------------- dividers */

hr {
  height: 0;
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--divider);
}

/* --------------------------------------------------------------- callouts */

/* The 5px/1px margins were the same as a paragraph's, which read as too little
   for a block that carries its own fill: it sat right up against the prose on
   either side. Kept in step with .doc-callout in app/globals.css. */
.callout {
  margin: 20px 0;
  padding: 16px;
  border-radius: 4px;
  background: var(--callout-bg);
}

.callout > *:first-child {
  margin-top: 0;
}

.callout p,
.callout li {
  padding-left: 0;
  padding-right: 0;
}

.callout ul,
.callout ol {
  padding-left: 24px;
}

/* Related Services: a callout in markup only. It carries no fill or padding, and
   is matched to the board cards instead, so the heading reads at card-title size
   and the copy and its links at card-message size and colour. */

.callout-services {
  padding: 0;
  background: none;
}

.callout-services p:first-child {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}

/* No margin: the 3px of padding top and bottom that every paragraph carries
   already adds up to the 6px a card puts between its title and its message. */
.callout-services p + p {
  margin-top: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.callout-services p + p a {
  color: inherit;
}

/* ----------------------------------------------------------------- tables */

.table-wrap {
  margin: 5px 0 1px;
  overflow-x: auto;
}

/* ------------------------------------------------------------ photographs */

/* Width and height are set on the img so the browser reserves the space
   before the file arrives and the text below does not jump. */
.fig {
  margin: 28px 0 24px;
}

/* Phone photographs are portrait, and a 3:4 image across a 708px column runs
   past a full screen, which turns a supporting picture into an interruption.
   Capping the height lets a portrait sit centred as a plate, while a
   landscape image still fills the column width. Both maxima preserve the
   aspect ratio, so nothing is distorted. */
.fig img {
  display: block;
  max-width: 100%;
  max-height: 68vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

.fig figcaption {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.875em;
  line-height: 1.5;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  line-height: 1.4;
}

th,
td {
  padding: 7px 9px;
  border: 1px solid var(--table-border);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--table-header-bg);
  font-weight: 600;
}

/* ------------------------------------------------------- table of contents */

.toc {
  margin: 5px 0 1px;
}

.toc a {
  display: block;
  padding: 3px 2px;
  color: var(--text);
  text-decoration: none;
  border-radius: 3px;
}

.toc a span {
  border-bottom: 1px solid var(--divider);
}

.toc a:hover {
  background: var(--hover-bg);
}

.toc a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: -2px;
}

.toc a.toc-l2 {
  padding-left: 26px;
}

.toc a.toc-l3 {
  padding-left: 50px;
}

/* --------------------------------------------------------------- database */

.database {
  margin: 14px 0 6px;
}

.board {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 2px;
}

.board-column {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px;
  border-radius: 4px;
}

.board-column.completed {
  background: #1c2b22;
}

.board-column-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 8px;
}

.board-count {
  font-size: 12px;
  color: var(--text-muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.pill-completed {
  background: #243d30;
  color: rgb(147, 213, 178);
}

.board-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card {
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--card-bg);
  box-shadow: 0 0 0 1px var(--card-ring), 0 1px 2px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  color: inherit;
}

.card-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}

.card-message {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

a.card-link:hover {
  background: var(--card-bg-hover);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13), 0 1px 2px rgba(0, 0, 0, 0.3);
}

a.card-link:hover .card-title {
  color: rgba(255, 255, 255, 0.95);
}

a.card-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  a.card-link {
    transition: background 120ms ease, box-shadow 120ms ease;
  }
}

/* -------------------------------------------------------------- back link */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px -6px;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
}

.back-link:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.back-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

.back-arrow {
  font-size: 15px;
  line-height: 1;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 640px) {
  .page {
    padding: 80px 16px 140px;
  }

  .page-title {
    font-size: 32px;
  }
}


/* ------------------------------------------------------------------ blog */



.post-list { display: flex; flex-direction: column; margin: 8px 0 24px; }

.post-card {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--table-border);
  text-decoration: none;
}
.post-card:hover { background: var(--hover-bg); }
.post-card strong { display: block; margin: 2px 0 4px; }
.post-card .post-kind { margin: 0; }
.post-card .post-desc { display: block; color: var(--text-muted); font-size: 0.9375em; }

/* Before-and-after sit side by side, stacking on a phone. Portrait phone
   photographs are the norm here, so the pair is capped by height for the same
   reason single figures are. */
.pair {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin: 28px 0 8px;
}
.pair figure { margin: 0; }
.pair img {
  display: block;
  width: 100%;
  max-height: 52vh;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}
.pair figcaption {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.8125em;
  line-height: 1.5;
}
.fig-tag {
  display: block;
  margin-bottom: 3px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 620px) { .pair { grid-template-columns: 1fr; } }

/* Rows of the article's own photographs. Unlike a before-and-after pair, these
   rows mix portrait and landscape, so every cell is given the same box and the
   pictures are cropped into it. Left to their natural heights the row would be
   as tall as its tallest picture and the rest would hang at the top of it.
   A row of three is all portrait, so 3:4 crops nothing at all; a row of two
   mixes orientations, and a square takes an even bite out of each. */
.figrow {
  display: grid;
  gap: 12px;
  margin: 28px 0 8px;
}
.figrow-3 { grid-template-columns: repeat(3, 1fr); }
.figrow-2 { grid-template-columns: repeat(2, 1fr); }
.figrow figure { margin: 0; }
.figrow img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}
.figrow-3 img { aspect-ratio: 3 / 4; }
.figrow-2 img { aspect-ratio: 1 / 1; }
.figrow figcaption {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.8125em;
  line-height: 1.5;
}
/* Stacked on a phone there is room for the whole picture, so stop cropping. */
@media (max-width: 620px) {
  .figrow-3,
  .figrow-2 { grid-template-columns: 1fr; }
  .figrow-3 img,
  .figrow-2 img { aspect-ratio: auto; }
}

/* A numbered specification, distinct from body prose. */
.spec {
  margin: 5px 0 1px;
  padding: 16px;
  border-radius: 4px;
  background: var(--callout-bg);
  font-size: 0.9375em;
}
.spec ol { margin: 0; padding-left: 20px; }
.spec li { padding: 2px 0; }
.spec p.grey { margin: 10px 0 0; padding: 0; }

/* Three photographs of real work, on each service page. */
.work-strip {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  margin: 24px 0 8px;
}
.work-strip figure { margin: 0; }
.work-strip img {
  display: block;
  width: 100%;
  /* height:auto is load-bearing. The img carries width/height attributes so
     the browser can reserve space before the file arrives, and those set an
     intrinsic size that aspect-ratio cannot override on its own. Without this
     the strip rendered 213px wide by 1416px tall. */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}
.work-strip figcaption {
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 0.75em;
  line-height: 1.45;
}
@media (max-width: 620px) {
  .work-strip { grid-template-columns: 1fr; }
  .work-strip img { aspect-ratio: 4 / 3; }
}