/* Signature layer: survey sheet + stone accents. Chosen over the plain layer in two blind A/B rounds (Sep 2026).
   Sources: Frahan StonePack design system (limestone canvas, granite ink, stone-named accents)
   and the Kuppam field language (painted survey grid, measured numbers). */

:root {
  --acc-A: #B85C44; /* masonry */
  --acc-B: #3E7C8C; /* ingest */
  --acc-C: #B0763E; /* voussoir */
  --acc-D: #7A8463; /* quarry */
  --survey: #D99A2B; /* painted-grid amber */
  --tick: #CFC9BD;
  --grid-line: rgba(52, 50, 122, .07);
}

/* ---- ruler rule under every section bar ---- */
.section__bar {
  border-bottom: 0;
  padding-bottom: 19px;
  background:
    linear-gradient(var(--tick), var(--tick)) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 60px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 12px) left bottom / 100% 4px no-repeat;
}
.dark .section__bar { --tick: rgba(233, 230, 242, .2); }
.feature .section__bar { --tick: rgba(217, 154, 43, .45); }

/* ---- faint survey grid in letterboxing and while images load ---- */
.card__media, .tile, .stepper__view, .compare {
  background-color: var(--frame);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 20px 20px;
}
.dark .tile, .case.is-dark .tile, .case.is-dark .stepper__view, .case.is-dark .compare { --grid-line: rgba(184, 178, 224, .08); background-color: var(--plate-2); }

/* ---- stone accents: contents letters, filter swatches, case header rule, sheet mark ---- */
.contents a .l { color: var(--acc, var(--indigo)); font-weight: 500; }
.case__bar { box-shadow: inset 0 -2px 0 var(--acc, transparent); }

/* ---- legend-style filters (drawing legend, not pills), compact so the view toggle stays on the row ---- */
.filters { gap: 6px; }
.filters button { border-radius: 2px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px 7px 9px; font-size: 11px; }
.filters button::before { content: ''; width: 8px; height: 8px; flex: none; background: var(--acc, var(--indigo)); }
.filters button[data-f="all"]::before { background: repeating-linear-gradient(90deg, var(--acc-A) 0 25%, var(--acc-B) 25% 50%, var(--acc-C) 50% 75%, var(--acc-D) 75% 100%); }
.filters button[data-f="robot"]::before { background: none; width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.filters button[data-f="robot"][aria-pressed="true"]::before { border-color: #fff; box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px #fff; }
.filters .view-toggle button::before { display: none; }
.filters .view-toggle button { letter-spacing: .08em; text-transform: uppercase; }

/* ---- cover: dimension line ---- */
.dimline { display: flex; align-items: center; gap: 12px; width: min(360px, 100%); margin-bottom: 20px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--indigo); }
.dimline i { flex: 1; height: 1px; background: var(--indigo); position: relative; }
.dimline i::before { content: ''; position: absolute; top: -5px; width: 1.5px; height: 11px; background: var(--indigo); transform: rotate(45deg); }
.dimline i:first-child::before { left: 0; }
.dimline i:last-child::before { right: 0; }
.dimline span { white-space: nowrap; }

/* ---- title block closing each case study ---- */
.tblock { display: grid; grid-template-columns: 2.2fr 1fr 1.8fr .8fr; border: 1px solid var(--rule); }
.case.is-dark .tblock { border-color: var(--on-dark-rule); }
.tblock > div { padding: 10px 12px 12px; border-left: 1px solid var(--rule); min-width: 0; }
.case.is-dark .tblock > div { border-color: var(--on-dark-rule); }
.tblock > div:first-child { border-left: 0; }
.tblock small { display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--meta); margin-bottom: 5px; }
.case.is-dark .tblock small { color: #8682A6; }
.tblock b { display: block; font-weight: 400; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.tblock > div:first-child b { font-family: var(--f-display); font-size: 18px; line-height: 1.15; }
.tblock .acc { width: 10px; height: 10px; display: inline-block; background: var(--acc); margin-right: 6px; }
@media (max-width: 900px) {
  .tblock { grid-template-columns: 1fr 1fr; }
  .tblock > div { border-left: 0; border-top: 1px solid var(--rule); }
  .tblock > div:nth-child(-n+2) { border-top: 0; }
  .tblock > div:nth-child(even) { border-left: 1px solid var(--rule); }
  .case.is-dark .tblock > div { border-color: var(--on-dark-rule); }
}

/* ---- measuring readout over images (desktop only) ---- */
.readout { position: fixed; z-index: 90; pointer-events: none; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: #fff; background: rgba(22, 20, 46, .78); padding: 3px 7px; transform: translate(14px, 14px); opacity: 0; transition: opacity .15s; white-space: nowrap; }
.readout.is-on { opacity: 1; }
.readout b { font-weight: 500; color: var(--survey); }
@media (prefers-reduced-motion: reduce) { .readout { display: none; } }
@media (hover: none), (pointer: coarse) { .readout { display: none; } }

/* ---- footer revision stamp ---- */
.rev { display: inline-flex; gap: 10px; align-items: center; }
.rev i { font-style: normal; border: 1px solid rgba(233, 230, 242, .3); padding: 1px 6px; color: var(--lavender); }