/* Resources section: long-form guides. Builds on brand.css + site.css. */
body.res .glow span { opacity: .32; }
.res-hero { padding: 72px 0 44px; }
.res-hero .crumbs { font-size: 14px; color: rgba(241,241,236,.55); margin-bottom: 22px; }
.res-hero .crumbs a { text-decoration: none; }
.res-hero .crumbs a:hover { color: var(--paper); }
.res-hero h1 { max-width: 19em; }
.h1-kick { display: block; font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--accent); margin-bottom: 14px; }
.res-hero .lede { margin-top: 20px; max-width: 40em; }
.res-hero .meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: rgba(241,241,236,.55); }

.res-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 40px; }
.toc { position: sticky; top: 92px; font-size: 14.5px; }
.toc b { display: block; font: 400 11px 'Silkscreen', monospace; letter-spacing: .1em; color: var(--accent); margin-bottom: 12px; }
.toc a { display: block; padding: 6px 0 6px 12px; border-left: 1px solid rgba(241,241,236,.14); text-decoration: none; color: rgba(241,241,236,.62); line-height: 1.3; }
.toc a:hover { color: var(--paper); border-color: var(--accent); }
.toc-m { display: none; margin-bottom: 26px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-size: 15px; }
.toc-m summary { cursor: pointer; font-weight: 500; }
.toc-m a { display: block; padding: 6px 0; text-decoration: none; color: rgba(241,241,236,.72); }

article { min-width: 0; font-size: 17px; line-height: 1.6; color: rgba(241,241,236,.84); }
article section { padding-top: 56px; scroll-margin-top: 70px; }
article section:first-child { padding-top: 0; }
article h2 { color: var(--paper); margin-bottom: 16px; font-size: clamp(27px, 3vw, 38px); }
article h3 { color: var(--paper); margin: 30px 0 10px; font-size: 20px; }
article p { margin-top: 14px; }
article h2 + p, article h3 + p { margin-top: 0; }
article a { color: var(--accent); text-underline-offset: 2px; }
article ul.list { margin: 12px 0 0 0; list-style: none; }
article ul.list li { position: relative; padding-left: 20px; margin-top: 8px; }
article ul.list li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; background: var(--accent); }
article sup a { font-size: 11.5px; text-decoration: none; padding-left: 1px; }
.step-tag { display: block; font: 400 11.5px 'Silkscreen', monospace; letter-spacing: .1em; color: var(--accent); margin-bottom: 10px; }

/* summary */
.tldr { background: linear-gradient(120deg, rgba(23,73,61,.5), rgba(47,90,51,.28)); border: 1px solid rgba(241,241,236,.14); border-radius: 14px; padding: 26px 28px; }
.tldr h2 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 12px; }
.tldr ol { list-style: none; counter-reset: t; }
.tldr li { counter-increment: t; position: relative; padding-left: 34px; margin-top: 10px; color: rgba(241,241,236,.92); }
.tldr li::before { content: counter(t); position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 50%; background: rgba(168,212,106,.18); color: var(--accent); font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.tldr li b { font-weight: 500; color: var(--paper); }

/* numbers */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.stat { border: 1px solid rgba(241,241,236,.1); border-radius: 12px; padding: 18px; background: rgba(20,21,20,.55); }
.stat b { display: block; font-size: 32px; font-weight: 400; letter-spacing: -.04em; color: var(--paper); line-height: 1.05; }
.stat span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.4; color: rgba(241,241,236,.68); }

/* flow */
.flow-n { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 20px; }
.flow-n .n { position: relative; border: 1px solid rgba(241,241,236,.12); border-radius: 10px; padding: 14px 12px; background: rgba(20,21,20,.6); text-decoration: none; color: inherit; display: block; }
.flow-n a.n:hover { border-color: var(--accent); }
.flow-n .n i { font: 400 11px 'Silkscreen', monospace; font-style: normal; color: var(--accent); }
.flow-n .n b { display: block; margin-top: 6px; font-weight: 500; color: var(--paper); font-size: 15.5px; line-height: 1.2; }
.flow-n .n span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.35; color: rgba(241,241,236,.62); }

/* tables */
.tw { margin-top: 18px; overflow-x: auto; border: 1px solid rgba(241,241,236,.12); border-radius: 12px; background: rgba(20,21,20,.6); }
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.42; }
th { text-align: left; font-weight: 500; font-size: 13px; color: rgba(241,241,236,.62); padding: 11px 14px; border-bottom: 1px solid rgba(241,241,236,.14); white-space: nowrap; }
td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid rgba(241,241,236,.07); }
tr:last-child td { border-bottom: 0; }
td:first-child { color: var(--paper); font-weight: 500; }
td.plain { font-weight: 400; color: inherit; }
td.dom { font-family: var(--mono); font-size: 14px; font-weight: 400; white-space: nowrap; color: rgba(241,241,236,.85); }
td mark { background: rgba(242,170,52,.22); color: #f6c26d; padding: 0 1px; border-radius: 2px; }
.pill { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pill.g { background: rgba(168,212,106,.15); color: var(--accent); }
.pill.a { background: rgba(242,170,52,.15); color: #f2b54a; }
.pill.w { background: rgba(241,241,236,.09); color: rgba(241,241,236,.75); }

/* callouts + case boxes */
.note { margin-top: 18px; padding: 15px 18px; border-left: 3px solid #f2aa34; background: rgba(242,170,52,.07); border-radius: 0 10px 10px 0; font-size: 15.5px; }
.note b { color: #f6c26d; font-weight: 500; }
.note.tip { border-color: var(--accent); background: rgba(168,212,106,.07); }
.note.tip b { color: var(--accent); }
.case { margin-top: 18px; border: 1px solid rgba(241,241,236,.12); border-radius: 12px; padding: 18px 20px; background: rgba(20,21,20,.55); font-size: 15.5px; }
.case .k { font: 400 11px 'Silkscreen', monospace; letter-spacing: .1em; color: var(--accent); }
.case h4 { font-weight: 500; font-size: 17.5px; color: var(--paper); margin-top: 6px; }
.case p { margin-top: 6px; }
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* evidence log + template */
.mono-card { margin-top: 18px; border: 1px solid rgba(241,241,236,.12); border-radius: 12px; overflow: hidden; background: rgba(12,13,12,.82); }
.mono-card .hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: rgba(241,241,236,.62); }
.mono-card pre { padding: 16px; font: 400 13.5px/1.6 var(--mono); color: rgba(241,241,236,.85); white-space: pre-wrap; overflow-wrap: anywhere; }
.copybtn { font: 500 13px var(--sans); background: var(--paper); color: #1b1c1b; border: 0; border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.log { display: grid; grid-template-columns: 150px minmax(0, 1fr); font-size: 14.5px; }
.log div { padding: 9px 16px; border-bottom: 1px solid rgba(241,241,236,.07); }
.log div:nth-child(odd) { color: rgba(241,241,236,.58); }
.log div:nth-child(even) { font-family: var(--mono); font-size: 13.5px; overflow-wrap: anywhere; color: rgba(241,241,236,.88); }
.log div:nth-last-child(-n+2) { border-bottom: 0; }

/* figure */
figure.fig { margin-top: 20px; border: 1px solid rgba(241,241,236,.12); border-radius: 12px; padding: 18px; background: rgba(16,17,16,.72); }
figure.fig figcaption { margin-top: 12px; font-size: 14px; color: rgba(241,241,236,.6); line-height: 1.4; }
figure.fig svg { display: block; width: 100%; height: auto; }

/* timeline */
.tl { position: relative; margin: 8px 0 6px; padding-top: 34px; padding-bottom: 54px; }
.tl .bar { height: 10px; border-radius: 6px; background: linear-gradient(90deg, #a8d46a 0%, #a8d46a 52%, rgba(242,170,52,.9) 68%, rgba(241,241,236,.12) 88%); }
.tl .pt { position: absolute; top: 34px; width: 2px; height: 22px; background: var(--paper); }
.tl .lab { position: absolute; top: 60px; transform: translateX(-50%); width: 20%; text-align: center; font-size: 12.5px; line-height: 1.25; color: rgba(241,241,236,.72); }
.tl .lab.first { transform: none; text-align: left; }
.tl .lab.last { transform: translateX(-100%); text-align: right; }
.tl .top { position: absolute; top: 0; font-size: 12.5px; color: var(--accent); }

/* annotated fake shop */
.shopmock { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.page { border-radius: 10px; overflow: hidden; background: #f4f4ef; color: #222; font-size: 13px; }
.page .url { display: flex; align-items: center; gap: 8px; background: #dedfd8; padding: 7px 10px; font-family: var(--mono); font-size: 12px; }
.page .in { padding: 14px; position: relative; }
.page .logo { font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.page .banner { margin-top: 8px; background: #c8392b; color: #fff; padding: 7px 10px; font-weight: 600; font-size: 13px; border-radius: 3px; }
.page .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.page .row div { background: #dfe2d6; height: 54px; border-radius: 3px; display: flex; align-items: flex-end; justify-content: center; font-size: 11.5px; padding-bottom: 3px; }
.page .pay { margin-top: 10px; background: #e9e9e2; padding: 7px 10px; font-size: 12px; border-radius: 3px; }
.page .foot { margin-top: 8px; font-size: 11px; color: #666; }
.pin { display: inline-flex; width: 19px; height: 19px; border-radius: 50%; background: #1b1c1b; color: #f2b54a; font-size: 11.5px; font-weight: 600; align-items: center; justify-content: center; flex: none; }
.signs { list-style: none; font-size: 15px; }
.signs li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; margin-top: 11px; line-height: 1.38; }
.signs li:first-child { margin-top: 0; }
.signs .pin { background: #f2aa34; color: #1b1c1b; }

/* pressure points */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.point { border: 1px solid rgba(241,241,236,.12); border-radius: 12px; padding: 16px; background: rgba(20,21,20,.6); font-size: 14.5px; line-height: 1.4; }
.point b { display: block; font-size: 16px; font-weight: 500; color: var(--paper); margin-bottom: 5px; }

/* FAQ + sources */
.faq details { border-bottom: 1px solid rgba(241,241,236,.12); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 500; color: var(--paper); }
.faq details p { margin-top: 8px; font-size: 16px; }
.src-box { border-top: 1px solid rgba(241,241,236,.12); border-bottom: 1px solid rgba(241,241,236,.12); }
.src-box summary { display: flex; align-items: center; gap: 14px; padding: 18px 0; cursor: pointer; list-style: none; }
.src-box summary::-webkit-details-marker { display: none; }
.src-box summary h2 { margin: 0; font-size: 22px; }
.src-box summary:hover .src-n { color: var(--paper); }
.src-box summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.src-n { font-size: 14px; color: rgba(241,241,236,.6); }
.src-chev { margin-left: auto; width: 9px; height: 9px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg); transition: transform .2s; }
.src-box[open] .src-chev { transform: rotate(-135deg); }
.src-box[open] .sources { margin: 0 0 20px; }
.sources li:target { color: var(--paper); }
.sources li:target a { color: var(--accent); }
.sources { margin-top: 12px; font-size: 13.5px; line-height: 1.45; padding-left: 22px; color: rgba(241,241,236,.62); }
.sources li { margin-top: 6px; overflow-wrap: anywhere; scroll-margin-top: 80px; }
.sources a { color: rgba(241,241,236,.78); }
.disclaimer { margin-top: 26px; font-size: 14px; color: rgba(241,241,236,.55); }

/* hub: one tile per guide. auto-fit, so a third guide makes it a three-column blog grid */
.hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; padding-bottom: 90px; }
.post { display: flex; flex-direction: column; text-decoration: none; border: 1px solid rgba(241,241,236,.14); border-radius: 16px; overflow: hidden; background: rgba(20,21,20,.6); transition: border-color .2s, transform .2s; }
.post:hover { border-color: var(--accent); transform: translateY(-2px); }
.post .art { position: relative; display: block; aspect-ratio: 16 / 7; overflow: hidden; border-bottom: 1px solid rgba(241,241,236,.1); }
.art.teal { background: linear-gradient(115deg, #0f2f28 0%, #17493d 55%, #2f5a33 100%); }
.art.amber { background: linear-gradient(115deg, #2a2413 0%, #5c4a17 50%, #7f7a2c 100%); }
.art.olive { background: linear-gradient(115deg, #1f2a12 0%, #47601f 55%, #7f9c3b 100%); }
.art.ink { background: linear-gradient(115deg, #141514 0%, #262926 60%, #3c423c 100%); }
.art .orb { position: absolute; right: -6%; top: 50%; width: 62%; height: auto; max-width: none; transform: translateY(-50%); image-rendering: pixelated; opacity: .9; transition: transform .5s; }
.post:hover .art .orb { transform: translateY(-50%) rotate(-6deg) scale(1.03); }
.art .chip { position: absolute; left: 24px; bottom: 22px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: rgba(20,21,20,.72); border: 1px solid rgba(241,241,236,.16); backdrop-filter: blur(6px); }
.post .txt { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 24px; }
.post .aud { font-size: 14px; color: var(--accent); }
.post h2 { margin-top: 10px; font-size: clamp(25px, 2.4vw, 31px); }
.post p { margin-top: 10px; color: rgba(241,241,236,.72); font-weight: 300; font-size: 16px; }
.post .foot { margin-top: auto; padding-top: 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.post .go { font-weight: 500; color: var(--paper); }
.post .mins { font-size: 13.5px; color: rgba(241,241,236,.55); white-space: nowrap; }

/* icons and logos */
.ic { display: inline-block; width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.lg { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: #f1f1ec; vertical-align: -5px; }
.lg img { display: block; width: 14px; height: 14px; }
.wi { display: flex; gap: 9px; align-items: flex-start; }
.wis { display: inline-flex; gap: 4px; flex: none; padding-top: 1px; }
.step-tag .ic { width: 15px; height: 15px; margin-right: 8px; vertical-align: -3px; }
.flow-n .n > .ic { display: block; margin-bottom: 8px; width: 20px; height: 20px; }
.pi { display: flex; gap: 4px; margin-bottom: 9px; min-height: 22px; align-items: center; }
.pi .ic { width: 20px; height: 20px; }
article h3 { scroll-margin-top: 80px; }
article h3 .lg { margin-right: 2px; }
th .lg { margin-right: 6px; }
table.law { font-size: 14px; }
table.law th { white-space: normal; vertical-align: bottom; }
td:first-child:has(> .jur) { white-space: nowrap; }
td small { display: block; font-size: 12px; font-weight: 400; color: rgba(241,241,236,.6); margin-top: 2px; }
.case .list { font-size: 15.5px; }
/* jurisdiction tag */
.jur { display: inline-block; font: 500 10.5px/1.5 var(--sans); letter-spacing: .04em; text-decoration: none; padding: 0 5px; border-radius: 4px; color: #1b1c1b; background: rgba(241,241,236,.78); vertical-align: 1.5px; margin-right: 3px; cursor: help; }
.note b .jur { margin-right: 5px; }

@media (max-width: 960px) {
  .res-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
  .toc-m { display: block; }
  .flow-n { grid-auto-flow: row; }
}
@media (max-width: 680px) {
  .stats, .cases, .points { grid-template-columns: minmax(0, 1fr); }
  .shopmock { grid-template-columns: minmax(0, 1fr); }
  .log { grid-template-columns: 112px minmax(0, 1fr); }
  .tl .lab { font-size: 11px; width: 26%; }
  article { font-size: 16.5px; }
  .res-hero { padding-top: 44px; }
  .hub { grid-template-columns: minmax(0, 1fr); }
}

/* adjacent source numbers: 6,7 rather than 67 */
article sup.c::before { content: ','; font-size: 11.5px; color: var(--accent); }

/* screen-reader and text-extractor only */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* easier footnote targets without shifting the line */
article sup a { position: relative; }
article sup a::after { content: ''; position: absolute; inset: -9px -5px; }

/* page menu shows where you are */
.toc a[aria-current] { color: var(--paper); border-color: var(--accent); }
.res-hero .meta a { color: inherit; text-underline-offset: 2px; }

/* back to top */
.totop { position: fixed; right: 20px; bottom: 20px; z-index: 15; padding: 9px 14px; font-size: 13.5px; text-decoration: none; color: var(--paper); background: rgba(20,21,20,.86); border: 1px solid rgba(241,241,236,.2); border-radius: 999px; backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.totop.on { opacity: 1; pointer-events: auto; }
.totop:hover { border-color: var(--accent); }

/* the other guide */
.related { margin-top: 44px; }
.related .k { display: block; font: 400 11px 'Silkscreen', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.related a { display: block; padding: 18px 20px; text-decoration: none; color: inherit; border: 1px solid rgba(241,241,236,.14); border-radius: 12px; background: rgba(20,21,20,.55); }
.related a:hover { border-color: var(--accent); }
.related b { display: block; font-weight: 500; font-size: 18px; color: var(--paper); }
.related span { display: block; margin-top: 4px; font-size: 15px; color: rgba(241,241,236,.68); }

/* long German words */
:lang(de) td, :lang(de) .stat span, :lang(de) .point { hyphens: auto; -webkit-hyphens: auto; }

/* phones: table rows become stacked cards, so no column starts off-screen */
@media (max-width: 680px) {
  .tw { overflow: visible; border: 0; background: none; border-radius: 0; }
  table, table.law, tbody, tr, td { display: block; width: 100%; min-width: 0; }
  table, table.law { font-size: 14.5px; line-height: 1.38; }
  tr:first-child:has(th) { display: none; }
  tr { margin-top: 8px; padding: 10px 12px; border: 1px solid rgba(241,241,236,.12); border-radius: 12px; background: rgba(20,21,20,.6); }
  td, tr:last-child td { padding: 3px 0; border: 0; }
  td:first-child { padding-bottom: 4px; white-space: normal !important; font-size: 15px; }
  td.dom { white-space: normal; overflow-wrap: anywhere; }
  td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 12px; font-weight: 500; color: rgba(241,241,236,.55); }
  .totop { right: 12px; bottom: 12px; }
}