/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark · genre: editorial · macrostructure: Letter · theme: custom lamplit paper · enrichment: documentary portrait · nav: N1b · footer: Ft6 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34,49,50–57) */
html, body { overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--step-0); }
.shell { width: min(var(--content-wide), calc(100% - (2 * var(--page-gutter)))); }
:where(input, select, textarea) { outline: 2px solid transparent; }
:where(a, button, input, select, summary):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
h1, h2, h3, h4, .brand, .article-heading h1, .listing-heading > h1, .listing-shell > h1, .article-grid h2, .ross-100-grid h2, .about-copy h1 { font-family: var(--font-display); font-style: normal; }
h1 em, h2 em, h3 em { font-style: normal; }
:where(h1, h2, h3) { min-width: 0; overflow-wrap: anywhere; }

:where(nav a, .button, .text-link, .read-link, .site-footer a, .index-meta a) { white-space: nowrap; }
.utility { background: var(--color-ink); color: var(--color-paper); font-family: var(--font-mono); font-size: 0.67rem; letter-spacing: 0.1em; }
.site-header { min-height: 96px; border-bottom: 1px solid var(--color-rule); }
.brand { font-size: 1.45rem; font-weight: 600; }
.brand-mark { border-radius: 50%; background: var(--color-gold); font-family: var(--font-display); font-style: normal; }
.site-header nav { font-size: 0.82rem; }
.site-header nav a, .small-link { text-underline-offset: 5px; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--color-coral); }
.letter-hero { min-height: 670px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(17rem, 0.62fr); gap: clamp(2.5rem, 8vw, 8rem); align-items: center; padding-block-start: clamp(3rem, 6vw, 5rem); padding-block-end: clamp(4rem, 8vw, 6.5rem); }
.salutation { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: var(--step-2); }
.letter-copy h1 { max-width: 10ch; margin: 0; font-size: var(--step-4); font-weight: 500; line-height: 0.96; letter-spacing: -0.04em; }
.letter-copy .lede { max-width: 47ch; margin: var(--space-5) 0; color: var(--color-ink); font-family: var(--font-display); font-size: var(--step-1); line-height: 1.5; }
.letter-note { max-width: 54ch; padding-top: var(--space-4); border-top: 1px solid var(--color-rule); color: var(--color-ink-soft); }
.letter-note span { display: block; margin-top: var(--space-3); color: var(--color-ink); font-family: var(--font-display); font-size: var(--step-1); }
.letter-portrait { margin: 0; }
.letter-portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 52% center; }
.letter-portrait figcaption { margin-top: var(--space-2); color: var(--color-ink-soft); font-family: var(--font-mono); font-size: 0.68rem; text-align: right; }
.eyebrow { color: var(--color-coral); font-family: var(--font-mono); font-size: 0.67rem; letter-spacing: 0.1em; }
.start, .latest-guides { padding-block: var(--space-8); }
.section-heading h2, .calc-intro h2, .method h2, .safety h2 { font-weight: 500; font-size: var(--step-3); line-height: 1; letter-spacing: -0.035em; }
.guide-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); }
.guide-card { min-height: 17rem; padding: var(--space-5); border-color: var(--color-rule); background: var(--color-white); }
.guide-card:nth-child(1) { grid-column: span 5; }
.guide-card:nth-child(2) { grid-column: span 7; }
.guide-card:nth-child(3) { grid-column: 4 / span 6; }
.guide-card > span, .method li b { color: var(--color-coral); font-family: var(--font-mono); font-size: 1rem; }
.guide-card h3 { font-size: var(--step-2); font-weight: 500; }
.guide-card a, .read-link { text-decoration: underline; text-underline-offset: 5px; }
.rooms { background: var(--color-ink); color: var(--color-paper); }
.room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.room-card { min-height: 19rem; border-color: color-mix(in oklch, var(--color-paper) 22%, transparent); background: color-mix(in oklch, var(--color-paper) 5%, transparent); transition: border-color 160ms ease, transform 160ms ease; }
.room-card:hover, .room-card:focus-visible { transform: translateY(-1px); }
.room-diagram { background: color-mix(in oklch, var(--color-ink) 82%, black); }
.calculator { gap: clamp(2.5rem, 7vw, 6rem); padding-block: var(--space-8); }
.calc-panel { border: 1px solid var(--color-ink); box-shadow: 10px 10px 0 var(--color-gold); background: var(--color-white); }
.toggle { border: 1px solid var(--color-rule); background: var(--color-paper-deep); }
.toggle button, .calc-panel input, .calc-panel select { min-height: 44px; border-radius: 0; }
.toggle .active { background: var(--color-ink); color: var(--color-paper); }
.calc-panel output strong { font-family: var(--font-mono); font-size: clamp(1.75rem, 5vw, 2.6rem); }
.latest-guides .article-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.latest-guides .article-grid article { grid-column: span 6; }
.latest-guides .article-grid article:first-child { grid-column: span 12; }
.method { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.method li { grid-template-columns: 4.5rem 1fr; padding-block: var(--space-5); }
.safety { background: var(--color-accent); color: var(--color-accent-ink); }
.article-heading h1 { font-size: clamp(2.75rem, 5.8vw, 5.25rem); line-height: 0.98; font-weight: 500; }
.article-body { max-width: var(--content-read); font-family: var(--font-display); font-size: 1.14rem; line-height: 1.78; }
.article-body h2, .article-method h2, .article-faq h2, .article-sources h2 { font-family: var(--font-display); font-style: normal; font-weight: 500; }
.article-body h3, .article-body figcaption, .article-body table { font-family: var(--font-body); }
.listing-shell > h1, .listing-heading > h1 { font-size: var(--step-4); font-weight: 500; }
.article-grid article, .article-related a, .empty-library { border-color: var(--color-rule); background: var(--color-white); }
.interactive-tool { width: min(62rem, calc(100% - 40px)); }
.interactive-tool .article-heading { margin-bottom: var(--space-5); padding-bottom: var(--space-5); }
.interactive-tool .article-body { max-width: none; }
.interactive-tool .article-body > p:first-child { max-width: 58ch; font-size: 1.12rem; }
.interactive-tool .lighting-calculator { margin-block: var(--space-6); padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--color-ink); border-radius: 0; background: var(--color-white); box-shadow: 10px 10px 0 var(--color-gold); font-family: var(--font-body); }
.interactive-tool .lighting-calculator h2 { max-width: 16ch; margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; }
.interactive-tool .calculator-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.interactive-tool .calculator-fields input,
.interactive-tool .calculator-fields select { min-height: 44px; border-radius: 0; outline-offset: 1px; }
.interactive-tool .lighting-calculator button { min-height: 44px; border-radius: 0; background: var(--color-ink); color: var(--color-paper); }
.interactive-tool .lighting-calculator output { border-radius: 0; background: var(--color-paper-deep); }
.site-footer { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 0.6fr); align-items: end; gap: var(--space-6); padding-block: var(--space-7); border-top: 1px solid var(--color-rule); }
.footer-signoff { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; }
.footer-signoff span { display: block; margin-top: var(--space-3); font-size: var(--step-1); }
.footer-letter > p:last-child { max-width: 50ch; color: var(--color-ink-soft); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.site-footer .copyright { grid-column: 1 / -1; margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-rule); text-align: left; color: var(--color-ink-soft); }
:where(a, button, input, select):active { transform: translateY(1px); }
:where(button, input, select):disabled,
[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; filter: saturate(0.55); }
.section-heading.horizontal { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (max-width: 850px) {
  .letter-hero { min-height: auto; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .letter-portrait { max-width: 38rem; }
  .letter-portrait img { aspect-ratio: 16 / 11; }
  .guide-card:nth-child(n), .latest-guides .article-grid article:nth-child(n) { grid-column: 1 / -1; }
  .calculator, .method { grid-template-columns: 1fr; }
  .article-heading { margin-bottom: var(--space-5); padding-bottom: var(--space-5); }
}
@media (max-width: 540px) {
  .shell, .article-site-header, .article-shell, .listing-shell { width: min(100% - 1.75rem, var(--content-wide)); }
  .letter-hero { padding-block: var(--space-6); }
  .letter-copy h1 { font-size: clamp(3rem, 16vw, 4.1rem); }
  .room-grid, .field-row, .site-footer { grid-template-columns: 1fr; }
  .site-footer nav { justify-content: flex-start; }
  .calc-panel { padding: var(--space-4); box-shadow: 6px 6px 0 var(--color-gold); }
  .safety-inner { grid-template-columns: 3rem 1fr; }
  .article-heading h1 { font-size: clamp(2.5rem, 12vw, 3.45rem); }
  .article-byline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interactive-tool { width: min(100% - 1.75rem, 62rem); }
  .interactive-tool .calculator-fields { grid-template-columns: minmax(0, 1fr); }
  .interactive-tool .lighting-calculator { box-shadow: 6px 6px 0 var(--color-gold); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}