/* =============================================================================
   Fraley V2 - page compositions (HOME, WORK, case study, PUBLICATIONS, CONTACT)
   ============================================================================= */

/* ---------------------------------------------------------------- HOME */
.home-hero { padding-block: clamp(2.5rem, 1.5rem + 3vw, 5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); overflow: hidden; }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.home-hero__copy { display: grid; gap: var(--s-5); }
.home-hero__copy .display { max-width: 19ch; margin: 0; line-height: 1.02; }
.home-hero__copy .lede { max-width: 32rem; }
.home-hero__status { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }
.home-hero__visual { min-width: 0; }
@media (max-width: 1000px) {
  .home-hero__grid { grid-template-columns: 1fr; }
  .home-hero__copy .display { max-width: 18ch; }
}
.home-proof { padding-block: 0 var(--section-y); }
.home-identity .identity { max-width: 60rem; }
.home-work__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.home-work__note { font-family: var(--f-serif); color: var(--c-text-3); max-width: 40rem; font-size: 1rem; }
@media (max-width: 860px) { .home-work__grid { grid-template-columns: 1fr; } }
.home-themes .theme-list { max-width: 48rem; }
.home-standards__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
@media (max-width: 860px) { .home-standards__grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.home-status .prose { font-size: 1.125rem; }

/* ---------------------------------------------------------------- page hero (index pages) */
.page-hero { padding-block: clamp(3rem, 2rem + 3vw, 5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-7); align-items: end; }
.page-hero h1 { margin: var(--s-3) 0 var(--s-4); }
.page-hero .lede { max-width: 40rem; }
.page-hero__aside { justify-self: end; width: 100%; max-width: 22rem; }
@media (max-width: 900px) { .page-hero__grid { grid-template-columns: 1fr; gap: var(--s-5); } .page-hero__aside { justify-self: start; max-width: none; } }

/* index panel: theme jump list on WORK */
.index-panel { padding: var(--s-4) var(--s-5); }
.index-panel .label { margin-bottom: var(--s-3); display: flex; justify-content: space-between; }
.index-panel ol { list-style: none; display: grid; }
.index-panel li a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: 0.55rem 0; border-top: 1px solid var(--c-line-1); color: var(--c-text-2); font-size: var(--t-small); min-height: 2.5rem; }
.index-panel li a:hover { color: var(--c-text-1); text-decoration: none; }
.index-panel li a .mono { font-size: var(--t-micro); color: var(--c-accent); letter-spacing: 0.1em; }
.index-panel li a .count { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--c-text-4); letter-spacing: 0.1em; }

/* ---------------------------------------------------------------- WORK */
.work-theme { padding-block: var(--s-5) var(--s-8); }
.work-theme + .work-theme { padding-top: 0; }
.work-theme__flagships { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-bottom: var(--s-6); }
.work-theme__flagships > :only-child { grid-column: 1 / -1; }
.work-theme__flagships > :only-child .card__content { max-width: none; }
.work-theme__supporting { margin-top: var(--s-2); }
.work-theme__supporting-label { margin-bottom: var(--s-2); }
@media (max-width: 900px) { .work-theme__flagships { grid-template-columns: 1fr; } }
/* single wide flagship: side-by-side figure and content */
@media (min-width: 900px) {
  .card--flagship.card--wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .card--flagship.card--wide.card--slot-empty { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .card--flagship.card--wide .card__figure { border-bottom: 0; border-right: 1px solid var(--c-line-1); display: grid; }
  .card--flagship.card--wide .card__figure > * { height: 100%; }
}
.work-note { max-width: var(--w-read); }

/* ---------------------------------------------------------------- CASE STUDY */
.case-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.case-body { display: grid; gap: var(--section-y); min-width: 0; }
.case-section { scroll-margin-top: calc(var(--header-h) + 1.5rem); min-width: 0; }
.case-section__head { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-5); padding-top: var(--s-2); }
.case-section__index { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--track-label); color: var(--c-accent); flex: none; }
.case-section__head h2 { margin: 0; }
.case-section .prose { font-size: 1.0625rem; }
.case-section--lead .prose > p:first-of-type { font-family: var(--f-serif); font-size: 1.25rem; line-height: 1.5; color: var(--c-text-1); }
.case-section__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.case-figures { display: grid; gap: var(--s-5); }
.case-section .callout { margin-top: var(--s-5); }
.case-section .citation { margin-block: var(--s-5); }
.case-section .table-wrap { max-width: 52rem; }
@media (max-width: 1100px) { .case-layout { grid-template-columns: 1fr; gap: var(--s-6); } .rail { display: none; } }
@media (max-width: 800px) { .case-section__cols { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- PUBLICATIONS */
.pubs-section { max-width: 64rem; }
.pubs-standards { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-5); align-items: start; }
.pubs-standards__card { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.pubs-standards__card h3 { margin: var(--s-3) 0 var(--s-4); font-size: var(--t-h2); }
.pubs-standards__card .prose { max-width: none; }
.pubs-standards .callout { max-width: none; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.pubs-after { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-5); margin-top: var(--s-5); align-items: start; }
.pubs-contribution { display: grid; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--c-line-1); border-radius: var(--r-2); background: var(--c-bg-2); }
.pubs-contribution .prose { font-size: var(--t-small); }
.pubs-boundary .callout { max-width: none; }
@media (max-width: 900px) { .pubs-standards, .pubs-after { grid-template-columns: 1fr; } .pubs-standards .callout { position: static; } }
.pubs-credentials { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--c-line-1); border-radius: var(--r-2); background: var(--c-bg-2); max-width: 40rem; }
.pubs-credentials h3 { margin: 0; font-size: 1.1rem; }

/* ---------------------------------------------------------------- CONTACT */
.contact-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); align-items: start; }
.contact-cols h2 { font-size: var(--t-h3); margin-bottom: var(--s-4); }
.contact-cols .prose { margin-top: var(--s-4); font-size: var(--t-small); }
@media (max-width: 860px) { .contact-cols { grid-template-columns: 1fr; gap: var(--s-6); } }
.contact-reach { max-width: var(--w-read); }
.contact-note { max-width: var(--w-read); }

/* ---------------------------------------------------------------- fallback (not in this slice) */
.fallback { min-height: 50vh; display: grid; align-content: center; padding-block: var(--section-y); }
.fallback__panel { padding: clamp(2rem, 1.5rem + 2vw, 3rem); display: grid; gap: var(--s-4); max-width: 44rem; }
.fallback__panel h1 { font-size: var(--t-h2); margin: 0; }
.fallback__panel p { margin: 0; color: var(--c-text-2); }

/* ---------------------------------------------------------------- instrument (measured range) */
.instrument { display: grid; gap: var(--s-4); padding: var(--s-5); }
.instrument__head { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.instrument__head .label { font-size: var(--t-micro); }
.instrument__readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.instrument__readout { display: grid; gap: 0.45rem; padding: 0.85rem 1rem; border: 1px solid var(--c-line-1); border-radius: var(--r-2); background: rgba(11, 14, 19, 0.5); min-width: 0; }
.instrument__readout dt { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-text-3); white-space: nowrap; }
.instrument__readout dd { font-family: var(--f-mono); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 500; color: var(--c-text-1); line-height: 1; letter-spacing: -0.03em; display: inline-flex; align-items: baseline; gap: var(--metric-inline-gap); max-width: 100%; white-space: nowrap; }
.instrument__readout dd small { font-size: var(--t-metric-secondary); line-height: 1; color: var(--c-accent); letter-spacing: 0.04em; flex: 0 0 auto; }
.instrument__readout--derived dd { color: var(--c-text-2); }
.instrument__readout--derived dt::after { content: ' †'; color: var(--c-warm); }
.instrument__scale { position: relative; padding-top: 1.6rem; }
.instrument__scale svg { width: 100%; height: auto; display: block; }
.instrument__marker { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--f-mono); font-size: var(--t-micro); color: var(--c-accent); letter-spacing: 0.06em; white-space: nowrap; }
.instrument__marker::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 0.45rem; background: var(--c-accent-line); }
.instrument__axis { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--c-text-4); letter-spacing: 0.06em; padding-top: 0.35rem; }
.instrument__foot { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--c-text-3); letter-spacing: 0.02em; line-height: 1.5; }
.instrument__foot b { color: var(--c-warm); font-weight: 500; }
.instrument--compact { padding: var(--s-4); gap: var(--s-3); }
.instrument--compact .instrument__readout dd { font-size: 1.5rem; }

/* ---------------------------------------------------------------- method-adaptation diagram */
.diagram { display: grid; gap: var(--s-4); padding: var(--s-5); }
.diagram__head { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.diagram__stages { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr) auto minmax(0, 1fr); gap: var(--s-3); align-items: stretch; }
.diagram__stage { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); border: 1px solid var(--c-line-2); border-radius: var(--r-2); background: rgba(11, 14, 19, 0.5); min-width: 0; }
.diagram__stage--emphasis { border-color: var(--c-accent-line); box-shadow: 0 0 0 1px var(--c-accent-glow), inset 0 0 40px rgba(120, 198, 245, 0.04); }
.diagram__stage-title { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-accent); display: flex; align-items: center; gap: 0.5rem; }
.diagram__stage-title .n { color: var(--c-text-4); }
.diagram__stage p { margin: 0; font-size: var(--t-xs); color: var(--c-text-2); line-height: 1.5; }
.diagram__list { list-style: none; display: grid; gap: 0.45rem; }
.diagram__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; font-size: var(--t-xs); color: var(--c-text-2); line-height: 1.4; align-items: baseline; }
.diagram__list li .k { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--c-text-3); letter-spacing: 0.06em; text-transform: uppercase; }
.diagram__list li .v strong { color: var(--c-text-1); font-weight: 700; }
.diagram__list li .v .arrow-inline { color: var(--c-accent); margin: 0 0.3em; }
.diagram__arrow { display: grid; place-items: center; color: var(--c-accent); width: 1.5rem; }
.diagram__arrow svg { width: 1.25rem; height: 1.25rem; }
.diagram__lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.diagram__lane { display: grid; gap: 0.2rem; padding: 0.7rem 0.85rem; border: 1px solid var(--c-line-1); border-radius: var(--r-2); background: rgba(199, 216, 235, 0.02); position: relative; }
.diagram__lane::before { content: ''; position: absolute; left: 0; top: 0.7rem; bottom: 0.7rem; width: 2px; background: var(--c-accent); opacity: 0.7; border-radius: 1px; }
.diagram__lane .k { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-text-3); padding-left: 0.5rem; }
.diagram__lane .v { font-size: var(--t-xs); color: var(--c-text-1); padding-left: 0.5rem; font-weight: 700; }
.diagram__lanes-label { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-text-4); margin-bottom: 0.5rem; }
.diagram--compact { padding: var(--s-4); gap: var(--s-3); }
.diagram--compact .diagram__stage { padding: 0.75rem; gap: 0.35rem; }
.diagram--compact .diagram__stage p, .diagram--compact .diagram__list { display: none; }
.diagram--compact .diagram__stage-title { font-size: 0.625rem; }
@media (max-width: 760px) {
  .diagram__stages { grid-template-columns: 1fr; }
  .diagram__arrow { width: auto; height: 1.5rem; }
  .diagram__arrow svg { transform: rotate(90deg); }
  .diagram__lanes { grid-template-columns: 1fr; }
}