/* Austin Drywall Guide: Field Manual design. Prefix dw- on all classes. */
:root {
  --dw-paper: oklch(96.5% 0.008 90);
  --dw-sheet: oklch(99% 0.004 90);
  --dw-ink: oklch(24% 0.02 255);
  --dw-ink-soft: oklch(44% 0.02 255);
  --dw-rule: oklch(82% 0.015 90);
  --dw-clay: oklch(50% 0.14 38);
  --dw-clay-deep: oklch(40% 0.12 38);
  --dw-clay-tint: oklch(93% 0.04 55);
  --dw-blue: oklch(42% 0.09 250);
  --dw-tape: oklch(88% 0.11 95);
  --dw-night: oklch(22% 0.02 255);
  --dw-night-text: oklch(93% 0.008 90);
  --dw-focus: oklch(52% 0.2 262);
  --dw-font-display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --dw-font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --dw-font-label: "Martian Mono", ui-monospace, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--dw-paper); color: var(--dw-ink); font-family: var(--dw-font-body); font-size: 1.0625rem; line-height: 1.7; }
img, svg, iframe { max-width: 100%; }
a { color: var(--dw-blue); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--dw-clay-deep); }
:focus-visible { outline: 3px solid var(--dw-focus); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--dw-font-display); font-weight: 700; font-style: normal; line-height: 1.12; margin: 0 0 0.55em; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: clamp(2.3rem, 7vw, 4.2rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.55rem, 4vw, 2.1rem); margin-top: 1.6em; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.05em; }
ul, ol { padding-left: 1.2rem; }
.dw-label { font-family: var(--dw-font-label); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dw-clay-deep); margin: 0 0 0.6rem; }
.dw-wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.1rem; }
.dw-skip { position: absolute; left: -9999px; }
.dw-skip:focus { left: 0.5rem; top: 0.5rem; background: var(--dw-sheet); padding: 0.5rem; z-index: 99; }

/* Masthead + chapter ruler */
.dw-mast { background: var(--dw-sheet); border-bottom: 3px solid var(--dw-ink); position: relative; z-index: 5; }
.dw-mast-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.7rem; }
.dw-mark { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--dw-ink); min-width: 0; }
.dw-mark svg { flex: none; }
.dw-mark span { font-family: var(--dw-font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.05; display: flex; flex-direction: column; }
.dw-mark small { font-family: var(--dw-font-label); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dw-ink-soft); margin-top: 0.25rem; }
.dw-mast-links { display: none; list-style: none; margin: 0; padding: 0; gap: 1.4rem; }
.dw-mast-links a { color: var(--dw-ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 0.4rem 0; border-bottom: 3px solid transparent; }
.dw-mast-links a:hover, .dw-mast-links a[aria-current] { border-bottom-color: var(--dw-clay); }
.dw-menu-btn { font: 600 0.9rem var(--dw-font-body); background: var(--dw-ink); color: var(--dw-paper); border: 0; padding: 0.6rem 1rem; min-height: 2.75rem; cursor: pointer; white-space: nowrap; }
.dw-ruler { display: none; background: var(--dw-paper); border-top: 1px solid var(--dw-rule); }
.dw-ruler ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.dw-ruler li { border-left: 1px solid var(--dw-rule); }
.dw-ruler li:last-child { border-right: 1px solid var(--dw-rule); }
.dw-ruler a { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.6rem 0.6rem; text-decoration: none; color: var(--dw-ink); font-size: 0.8rem; line-height: 1.25; height: 100%; }
.dw-ruler b { font-family: var(--dw-font-label); font-weight: 500; font-size: 0.72rem; color: var(--dw-clay-deep); }
.dw-ruler a:hover { background: var(--dw-clay-tint); }
.dw-ruler a[aria-current] { background: var(--dw-ink); color: var(--dw-paper); }
.dw-ruler a[aria-current] b { color: var(--dw-tape); }
@media (min-width: 64rem) {
  .dw-mast-links { display: flex; }
  .dw-menu-btn { display: none; }
  .dw-ruler { display: block; }
}

/* Contents panel (phones and tablets) */
.dw-panel { position: fixed; inset: 0; background: var(--dw-sheet); z-index: 50; padding: 1rem 1.1rem 3rem; overflow-y: auto; display: none; }
.dw-panel.is-open { display: block; }
.dw-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.dw-panel-head > a { font-family: var(--dw-font-display); font-weight: 700; font-size: 1.3rem; text-decoration: none; color: var(--dw-ink); }
.dw-panel h2 { font-family: var(--dw-font-label); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dw-clay-deep); margin: 1.6rem 0 0.3rem; }
.dw-panel a:not(.dw-panel-head > a) { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--dw-rule); color: var(--dw-ink); text-decoration: none; font-weight: 600; min-height: 2.75rem; }
.dw-panel a[aria-current] { color: var(--dw-clay-deep); }
.dw-panel b { font-family: var(--dw-font-label); font-weight: 500; color: var(--dw-clay-deep); margin-right: 0.4rem; }

/* Heroes */
.dw-hero { padding-block: 2.2rem 1.4rem; }
.dw-crumbs { font-size: 0.85rem; color: var(--dw-ink-soft); margin: 0 0 0.9rem; }
.dw-lede { font-size: 1.2rem; max-width: 42rem; color: var(--dw-ink-soft); margin: 0; }
.dw-hero-ch h1 { border-bottom: 4px solid var(--dw-ink); padding-bottom: 0.3em; }

/* Home title page */
.dw-title { padding-block: 2.4rem 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
.dw-title h1 { margin-bottom: 0.3em; }
.dw-levels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.dw-levels li { background: var(--dw-sheet); border: 2px solid var(--dw-ink); padding: 0.4rem 0.3rem 0.5rem; font-family: var(--dw-font-label); font-size: 0.62rem; line-height: 1.3; text-align: center; }
.dw-levels i { display: block; height: 3.4rem; margin-bottom: 0.4rem; border: 1px solid var(--dw-rule); background: repeating-linear-gradient(90deg, var(--dw-paper) 0 4px, oklch(88% 0.012 90) 4px 5px); }
.dw-levels li:nth-child(2) i { background: repeating-linear-gradient(90deg, var(--dw-paper) 0 9px, oklch(78% 0.02 90) 9px 11px); }
.dw-levels li:nth-child(3) i { background: linear-gradient(90deg, var(--dw-paper), oklch(90% 0.01 90)); border-top: 8px solid oklch(80% 0.02 90); }
.dw-levels li:nth-child(4) i { background: linear-gradient(180deg, oklch(94% 0.008 90), oklch(92% 0.01 90)); }
.dw-levels li:nth-child(5) i { background: oklch(96% 0.006 90); }
.dw-levels li:nth-child(6) i { background: oklch(98.5% 0.003 90); border-color: var(--dw-clay); }
.dw-levels b { display: block; font-weight: 500; font-size: 0.7rem; color: var(--dw-clay-deep); }
@media (min-width: 56rem) {
  .dw-title { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 2.4rem; }
}

/* Contents list with dotted leaders */
.dw-toc { list-style: none; padding: 0; margin: 0; counter-reset: ch; border-top: 3px solid var(--dw-ink); }
.dw-toc li { border-bottom: 1px solid var(--dw-rule); }
.dw-toc a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.2rem 0.6rem; padding: 0.95rem 0.2rem; text-decoration: none; color: var(--dw-ink); }
.dw-toc a:hover { background: var(--dw-clay-tint); }
.dw-toc .n { font-family: var(--dw-font-label); font-size: 0.85rem; color: var(--dw-clay-deep); padding-top: 0.25rem; }
.dw-toc strong { font-family: var(--dw-font-display); font-size: 1.35rem; line-height: 1.15; display: block; }
.dw-toc span.b { color: var(--dw-ink-soft); font-size: 0.97rem; display: block; line-height: 1.5; }

.dw-section { padding-block: 1.6rem; }
.dw-measure { max-width: 44rem; }

/* Cards */
.dw-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 48rem) { .dw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dw-card { background: var(--dw-sheet); border: 2px solid var(--dw-ink); padding: 1.1rem 1.15rem; }
.dw-card h3 { margin-bottom: 0.4em; }
.dw-card p:last-child { margin-bottom: 0; }

/* Chapter layout */
.dw-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; padding-block: 1.4rem 2rem; }
@media (min-width: 64rem) { .dw-cols { grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; } }
.dw-main { max-width: 44rem; min-width: 0; }
.dw-main > h2:first-child { margin-top: 0; }
.dw-margin { background: var(--dw-clay-tint); border-left: 6px solid var(--dw-clay); padding: 1rem 1.1rem; align-self: start; font-size: 0.95rem; line-height: 1.55; }
@media (min-width: 64rem) { .dw-margin { position: sticky; top: 1rem; } }
.dw-margin h2 { font-family: var(--dw-font-label); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dw-clay-deep); margin: 0 0 0.6rem; }
.dw-margin ul { margin: 0; padding-left: 1.1rem; }
.dw-margin li { margin-bottom: 0.6rem; }
.dw-callout { background: var(--dw-sheet); border: 2px solid var(--dw-ink); border-left: 8px solid var(--dw-tape); padding: 0.9rem 1.1rem; margin: 1.4rem 0; }
.dw-callout p:last-child { margin: 0; }

/* Tables */
.dw-tablewrap { overflow-x: auto; margin: 1.2rem 0; border: 2px solid var(--dw-ink); background: var(--dw-sheet); }
.dw-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; min-width: 30rem; }
.dw-table th { text-align: left; font-family: var(--dw-font-label); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--dw-ink); color: var(--dw-paper); padding: 0.6rem 0.75rem; font-weight: 500; }
.dw-table td { padding: 0.7rem 0.75rem; border-top: 1px solid var(--dw-rule); vertical-align: top; }
.dw-table td:first-child { font-weight: 600; white-space: nowrap; }
.dw-facts { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.dw-facts th { text-align: left; width: 11rem; font-family: var(--dw-font-label); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dw-clay-deep); font-weight: 500; vertical-align: top; padding: 0.65rem 0.75rem 0.65rem 0; border-top: 1px solid var(--dw-rule); }
.dw-facts td { padding: 0.6rem 0; border-top: 1px solid var(--dw-rule); }
@media (max-width: 39.99rem) { .dw-facts th, .dw-facts td { display: block; width: auto; } .dw-facts th { padding-bottom: 0; border-bottom: 0; } .dw-facts td { border-top: 0; padding-top: 0.1rem; } }

/* FAQ, sources, pager, chips */
.dw-faq h3 { margin-top: 1.3em; padding-top: 1em; border-top: 1px solid var(--dw-rule); }
.dw-sources { font-size: 0.82rem; color: var(--dw-ink-soft); margin-top: 2rem; line-height: 1.8; overflow-wrap: anywhere; }
.dw-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; border-top: 3px solid var(--dw-ink); padding-block: 1.2rem 2.4rem; }
.dw-pager a { text-decoration: none; color: var(--dw-ink); font-family: var(--dw-font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; padding: 0.6rem 0; display: block; }
.dw-pager span { display: block; font-family: var(--dw-font-label); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dw-clay-deep); margin-bottom: 0.2rem; }
.dw-next { text-align: right; }
.dw-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0.8rem 0 0; }
.dw-chips a { display: inline-block; padding: 0.55rem 0.95rem; border: 2px solid var(--dw-ink); background: var(--dw-sheet); color: var(--dw-ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; min-height: 2.75rem; }
.dw-chips a:hover { background: var(--dw-clay-tint); }

/* Community block */
.dw-community { background: var(--dw-sheet); border: 2px solid var(--dw-ink); border-left: 8px solid var(--dw-clay); padding: 1.2rem 1.3rem; margin: 2rem 0; }
.dw-community h2 { font-size: 1.45rem; margin: 0 0 0.7rem; }
.dw-entry { padding-bottom: 0.9rem; margin-bottom: 0.9rem; border-bottom: 1px dashed var(--dw-rule); }
.dw-entry:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.dw-entry p { margin: 0; }
.dw-entry address, .dw-addr { font-style: normal; color: var(--dw-ink-soft); font-size: 0.9rem; }
.dw-community p:last-child { margin-bottom: 0; }

.dw-map { border: 2px solid var(--dw-ink); background: var(--dw-sheet); margin: 1.2rem 0; }
.dw-map iframe { display: block; width: 100%; height: 18rem; border: 0; }
.dw-address { font-style: normal; }

.dw-note { font-size: 0.92rem; color: var(--dw-ink-soft); margin: 0.2rem 0 0; }
.dw-dir td:first-child { white-space: normal; }
.dw-dir { min-width: 36rem; }

/* Footer: back-of-book index */
.dw-footer { background: var(--dw-night); color: var(--dw-night-text); margin-top: 3rem; padding-block: 2.4rem 2rem; }
.dw-footer a { color: var(--dw-night-text); text-decoration-color: oklch(60% 0.03 90); }
.dw-footer a:hover { color: var(--dw-tape); }
.dw-index-title { font-family: var(--dw-font-label); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dw-tape); margin: 0 0 0.8rem; font-weight: 500; }
.dw-index { list-style: none; padding: 0; margin: 0 0 2rem; columns: 1; column-gap: 2rem; }
@media (min-width: 40rem) { .dw-index { columns: 2; } }
@media (min-width: 64rem) { .dw-index { columns: 3; } }
.dw-index li { break-inside: avoid; padding: 0.4rem 0; border-bottom: 1px dotted oklch(45% 0.02 255); }
.dw-foot-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; border-top: 1px solid oklch(40% 0.02 255); padding-top: 1.6rem; }
@media (min-width: 48rem) { .dw-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dw-footer h3 { font-family: var(--dw-font-label); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dw-tape); font-weight: 500; }
.dw-footer ul { list-style: none; padding: 0; margin: 0; }
.dw-footer li { padding: 0.3rem 0; }
.dw-footer p { font-size: 0.95rem; }
.dw-fine { font-size: 0.82rem; color: oklch(75% 0.015 90); margin: 1.6rem 0 0; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (min-width: 40rem) {
  .dw-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .dw-levels li { font-size: 0.72rem; padding: 0.55rem 0.5rem 0.6rem; }
  .dw-levels i { height: 4.6rem; }
  .dw-levels b { font-size: 0.78rem; }
}
.dw-dir td:nth-child(3) { white-space: nowrap; }
.dw-dir td:nth-child(4) { overflow-wrap: anywhere; }

/* Contact form */
.dw-form { background: var(--dw-sheet); border: 2px solid var(--dw-ink); padding: 1.2rem 1.25rem; margin: 0 0 1.4rem; }
.dw-form h2 { margin: 0 0 0.8rem; font-size: 1.5rem; }
.dw-form label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.9rem; }
.dw-form input[type=text], .dw-form input[type=email], .dw-form textarea { display: block; width: 100%; margin-top: 0.3rem; padding: 0.7rem 0.75rem; font: inherit; border: 2px solid var(--dw-ink); background: var(--dw-paper); color: var(--dw-ink); border-radius: 0; min-height: 2.75rem; }
.dw-form textarea { resize: vertical; }
.dw-hp { position: absolute; left: -9999px; }
.dw-btn { font: 600 1rem var(--dw-font-body); background: var(--dw-ink); color: var(--dw-paper); border: 0; padding: 0.8rem 1.6rem; min-height: 2.75rem; cursor: pointer; }
.dw-btn:hover { background: var(--dw-clay-deep); }
.dw-btn[disabled] { opacity: 0.6; cursor: default; }
