/* v70_light additions. Loaded after site.css. */

/* ---------- picture grid: Sectors, Functions, Value chain ---------- */
.pg { list-style: none; display: grid; grid-template-columns: repeat(var(--pg-n, 3), minmax(0, 1fr)); gap: var(--s8) var(--gut); }
.pg--5 { --pg-n: 5; column-gap: var(--s4); }
.pg-i { display: flex; flex-direction: column; min-width: 0; }
.pg-m { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--panel); }
.pg-m > picture, .pg-m img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-t { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-strong); --rule-c: var(--line-strong); flex: 1; }
.pg-t .k { font: 500 var(--fs-label)/var(--lh-label) var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); font-variant-numeric: lining-nums tabular-nums; }
.pg-t .k + * { margin-top: var(--s1); }
.pg-t > .t-body { color: var(--fg-2); max-width: 44ch; }
.pg-t > .sector-f { margin-top: var(--s2); }
.pg-t > .sector-m { margin-top: auto; padding-top: var(--s3); }
.pg--5 .pg-t > .t-small { color: var(--fg-2); }
@media (hover: hover) and (pointer: fine) {
  .pg-m img { transition: scale var(--t-pic) var(--e-out); }
  .pg-i:hover .pg-m img { scale: 1.03; }
}
@media (max-width: 1199px) {
  .pg--6 { --pg-n: 2; }
  .pg--5 { --pg-n: 1; row-gap: var(--s6); }
  .pg--5 .pg-i { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--gut); align-items: start; }
  .pg--5 .pg-t { margin-top: 0; }
}
@media (max-width: 809px) {
  .pg, .pg--6 { --pg-n: 1; row-gap: var(--s7); }
  .pg-i { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--s4); align-items: start; }
  .pg-t { margin-top: 0; }
}

/* ---------- Atlas: the 35 materials as one ranked bar chart ---------- */
.rd-grid { display: none !important; }
.rd-strip { display: grid; list-style: none; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 18), auto); column-gap: calc(var(--gut) * 3); border-top: 1px solid var(--line-strong); }
.rd-strip > .rs { display: grid; grid-template-columns: 168px minmax(0, 1fr) 56px; align-items: center; column-gap: var(--s4); min-height: 44px; border-bottom: 1px solid var(--line); }
.rd-strip .rs-n { font: 500 var(--fs-ui-s)/var(--lh-ui-s) var(--sans); min-width: 0; }
.rd-strip svg.rs-bar { display: block; width: 100%; height: 6px; background: none; }
.rd-strip .rs-bar rect { fill: var(--dep-imp); }
.rd-strip .rs-bar rect.o { fill: var(--dep-own); }
.rd-strip .rs-v { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .rd-strip:has(.rs:hover) .rs:not(:hover) { opacity: 0.4; }
  .rd-strip .rs { transition: opacity var(--t-small) linear; }
}
@media (max-width: 1199px) {
  .rd-strip { grid-auto-flow: row; grid-template-rows: none; }
  .rd-strip > .rs { grid-template-columns: minmax(0, 1fr) 120px 56px; }
}

/* ---------- map panel: one column for the figure, shared descriptions as a heading ---------- */
.map-panel .map-row { display: grid !important; grid-template-columns: 124px minmax(0, 1fr); column-gap: var(--s5); align-items: baseline; }
.map-panel .map-fig { white-space: nowrap; }
.map-panel .map-g { margin-top: var(--s5); padding-top: var(--s3); color: var(--fg-2); font: 400 var(--fs-small)/var(--lh-small) var(--sans); }
.map-panel .map-g:first-of-type { margin-top: var(--s2); }
.map-panel .map-row.is-grouped { padding-block: var(--s3); }
.map-panel .map-row.is-grouped .map-txt { align-self: center; }

/* ---------- Journal: papers as covers ---------- */
.papers { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8) var(--gut); }
.paper { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
.paper-c { position: relative; aspect-ratio: 210 / 297; margin: 0 12% 0 0; }
.paper-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: 0 1px 2px rgba(15, 25, 19, 0.10), 0 12px 32px -12px rgba(15, 25, 19, 0.28); }
.paper-c .p2 { transform: translate(7%, 3%) rotate(2deg); transform-origin: 50% 100%; opacity: 0.96; transition: transform var(--t-med) var(--e-out); }
.paper-c .p1 { transition: transform var(--t-med) var(--e-out); }
.paper-t { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line-strong); --rule-c: var(--line-strong); flex: 1; }
.paper-t .card-meta { margin: 0; }
.paper-t .t-body { color: var(--fg-2); }
.paper-t .lnk { margin-top: auto; padding-top: var(--s2); }
@media (hover: hover) and (pointer: fine) {
  .paper:hover .p2 { transform: translate(14%, 2%) rotate(5deg); }
  .paper:hover .p1 { transform: translate(-2%, -1%) rotate(-1deg); }
}
@media (max-width: 1199px) { .papers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) {
  .papers { grid-template-columns: minmax(0, 1fr); row-gap: var(--s7); }
  .paper { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--s5); align-items: start; }
  .paper-t { margin-top: 0; }
}

/* ---------- header: Contact button stays readable on hover over light pictures ---------- */
@media (hover: hover) and (pointer: fine) {
  .hdr:not(.is-menu):not(.is-peek) .tools > .btn-secondary:hover,
  .hdr:not(.is-menu):not(.is-peek) .tools > .btn-secondary[data-t]:hover { color: var(--bg); border-color: var(--fg); }
}

/* 35 materials: the bar is the imported share, Forest is what Europe supplies itself */
.rd { --dep-imp: color-mix(in srgb, var(--limestone) 52%, var(--night)); --dep-own: #4F9A6B; }
[data-s="limestone"] .rd, [data-s="lichen"] .rd { --dep-imp: color-mix(in srgb, var(--night) 55%, var(--limestone)); --dep-own: #1F6538; }
.rd-strip .rs-v { font: 400 20px/24px var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.rd-key i { border-radius: 0; width: 12px; height: 6px; }