/* Estudos de caso (estudos/*.html) — composição com os tokens e componentes do site:
   abertura 7/5 (.hero-grid), trilho 4/8 (.section-grid), Paper como campo de resultados, fichas com filetes,
   Newsreader só no H1. Faixa de imagens com rolagem e visualizador em tela cheia (galeria.js).
   Camada "page", como o CSS próprio de cada página: type.css e components.css (fora de camada) prevalecem. */
@layer page{
*{box-sizing:border-box}
body{margin:0;background:var(--gallery-white);color:var(--alpine-ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
figure{margin:0}
.hero .eyebrow a{text-decoration:none}
.hero .eyebrow a:hover{text-decoration:underline;text-underline-offset:4px}
.hero p.lead{max-width:640px;color:var(--graphite)}
.section{border-bottom:var(--rule)}
.section h2{margin:0 0 var(--s-5);max-width:760px}
.section-number{margin:0}

/* Ficha da abertura */
.cs-facts{margin:0;border-top:var(--rule-open)}
.cs-facts>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s-3);align-items:baseline;padding:14px 0;border-bottom:var(--rule)}
.cs-facts dt{font-size:var(--t-kicker);line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.cs-facts dd{margin:0;font-size:14px;line-height:1.5;color:var(--alpine-ink)}

/* Imagens sangradas (abertura e pausas entre seções) */
.cs-hero-photo,.cs-bleed{position:relative;height:min(62vw,640px);min-height:320px;overflow:hidden;background:var(--paper)}
.cs-hero-photo img,.cs-bleed img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 53%}
.cs-credit{position:absolute;left:var(--container-edge);bottom:var(--s-4);font-size:var(--t-kicker);line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:var(--gallery-white);text-shadow:0 1px 8px rgba(23,24,26,.6)}
.cs-caption{width:var(--container);margin:0 auto;padding:var(--s-2) 0 0;font-size:var(--t-meta);line-height:1.6;color:var(--graphite)}

/* Resultados em Paper */
.cs-paper{background:var(--paper)}
.cs-paper .section{border-bottom:0}
.cs-results-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:end;margin-bottom:var(--s-6)}
.cs-results-head h2{grid-column:1/span 7;margin:0}
.cs-results-head p{grid-column:9/-1;margin:0;color:var(--graphite)}
.cs-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--grid-gap);border-top:var(--rule-open)}
.cs-metrics.cs-metrics--4{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--s-6)}
.cs-metrics .metric{padding:var(--s-4) 0 var(--s-5)}
.cs-metric-label{margin:0;font-size:var(--t-kicker);line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.cs-metrics .metric .big{margin:var(--s-4) 0 var(--s-2);font-size:var(--t-destaque);line-height:1.05}
.cs-metrics--4 .metric .big{margin:0 0 var(--s-2)}
.cs-metrics .metric .big span{font-size:.5em}
.cs-metric-desc{margin:0;max-width:260px;color:var(--graphite)}
.cs-note{margin:var(--s-4) 0 0;max-width:800px;font-size:var(--t-meta);line-height:1.6;color:var(--graphite)}
.cs-paper .cs-note{border-top:var(--rule);padding-top:var(--s-3)}

/* Texto corrido */
.cs-prose{max-width:720px}
.cs-prose p{margin:0 0 var(--s-3);color:var(--graphite)}
.cs-prose p:last-child{margin-bottom:0}
.cs-prose p.lead{margin-bottom:var(--s-4);color:var(--alpine-ink)}
.cs-prose strong{font-weight:500;color:var(--alpine-ink)}
.cs-id{margin:0;font-size:var(--t-kicker);line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}

/* Itens paralelos (2 × 2 ou 3 colunas) e comparativo: filete Ink no topo, Veil entre linhas */
.cs-methods,.cs-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--grid-gap);margin-top:var(--s-6);border-top:var(--rule-open)}
.cs-methods.cs-methods--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-methods>div{padding:var(--s-4) 0 var(--s-5);border-bottom:var(--rule)}
.cs-methods h3,.cs-compare h3{margin:var(--s-2) 0 var(--s-2)}
.cs-methods p:not(.cs-id){margin:0;max-width:380px;color:var(--graphite)}
.cs-compare>div{padding:var(--s-4) 0 0}
.cs-compare h3{margin-bottom:var(--s-4)}
.cs-compare dl{margin:0}
.cs-compare dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:13px 0;border-top:var(--rule)}
.cs-compare dt{color:var(--graphite)}
.cs-compare dd{margin:0;font-weight:500;text-align:right}
.cs-compare dt,.cs-compare dd{font-size:14px;line-height:1.5}

/* Tabela financeira */
.cs-table{margin-top:var(--s-5);overflow-x:auto;border-top:var(--rule-open)}
.cs-table:focus-visible{outline:2px solid var(--alpine-ink);outline-offset:4px}
.cs-table table{width:100%;min-width:640px;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px;line-height:1.4}
.cs-table.cs-table--compact table{min-width:0}
.cs-table th,.cs-table td{padding:16px 12px;border-bottom:var(--rule);text-align:right;font-weight:400;white-space:nowrap}
.cs-table th:first-child,.cs-table td:first-child{text-align:left;padding-left:0;white-space:normal}
.cs-table thead th{font-size:var(--t-kicker);line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.cs-table tbody th{color:var(--alpine-ink)}
.cs-table tbody td{color:var(--graphite)}
.cs-table tbody tr.cs-total{background:var(--paper)}
.cs-table tbody tr.cs-total th{padding-left:12px}
.cs-table tbody tr.cs-total td{color:var(--alpine-ink)}

/* Texto (1–6) e imagem (8–12) */
.cs-feature-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:center}
.cs-feature-grid>div{grid-column:1/span 6}
.cs-feature-grid>div .section-number{margin-bottom:var(--s-4)}
.cs-feature-photo{grid-column:8/-1;aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.cs-feature-photo img{width:100%;height:100%;max-width:none;object-fit:cover}

/* Seção seguida de par de imagens: sem filete e sem espaço inferior (o par traz o próprio ritmo) */
.section.cs-no-rule{border-bottom:0;padding-bottom:0}

/* Par de imagens com legendas */
.cs-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--grid-gap);padding:var(--section-y) 0;border-bottom:var(--rule)}
.cs-pair img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--paper)}
.cs-pair figcaption,.cs-strip figcaption{padding-top:var(--s-2);font-size:var(--t-meta);line-height:1.6;color:var(--graphite)}

/* Imagens ampliáveis (galeria.js): cursor de lupa e foco visível */
[data-zoom]{cursor:zoom-in}
[data-zoom]:focus-visible{outline:2px solid var(--alpine-ink);outline-offset:4px}

/* Faixa de imagens: rolagem horizontal com encaixe, controles e barra de progresso */
.cs-docs .section-grid{margin-bottom:var(--s-6)}
.cs-strip{padding:var(--section-y) 0;border-bottom:var(--rule)}
.cs-strip-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);margin-bottom:var(--s-5)}
.cs-strip-head .section-number{margin:0}
.cs-strip-track{display:flex;gap:var(--grid-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--container-edge);padding:0 var(--container-edge);scrollbar-width:none}
.cs-strip-track::-webkit-scrollbar{display:none}
.cs-strip-track:focus-visible{outline:2px solid var(--alpine-ink);outline-offset:-2px}
.cs-strip figure{flex:0 0 auto;scroll-snap-align:start;max-width:calc(100vw - 2 * var(--gutter))}
.cs-strip img{height:clamp(240px,34vw,480px);width:auto;max-width:100%;object-fit:cover;background:var(--paper)}
.cs-strip figcaption{max-width:420px}
.cs-strip-bar{width:var(--container);margin:var(--s-5) auto 0;display:flex;align-items:center;gap:var(--s-4)}
.cs-strip-progress{flex:1;height:1px;background:var(--veil);position:relative}
.cs-strip-progress span{position:absolute;left:0;top:-1px;height:3px;background:var(--alpine-ink);width:0}
.cs-strip-count{font-size:var(--t-kicker);line-height:1.6;letter-spacing:.16em;color:var(--graphite);font-variant-numeric:tabular-nums;min-width:56px}
.cs-strip-bar button{background:none;border:0;padding:0;min-width:44px;min-height:44px;font:400 14px/1 var(--font-sans);color:var(--alpine-ink);cursor:pointer}
.cs-strip-bar button:disabled{color:var(--mist);cursor:default}
.cs-strip-bar .cs-strip-full{min-width:0;padding:0 0 0 var(--s-2);text-underline-offset:4px}
.cs-strip-bar button:hover:not(:disabled){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.cs-strip-bar button:focus-visible{outline:2px solid var(--alpine-ink);outline-offset:2px}

/* Visualizador em tela cheia: campo Alpine Ink, imagem inteira, legenda e contador */
.cs-lightbox{position:fixed;inset:0;width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--alpine-ink);color:var(--gallery-white);overflow:hidden}
.cs-lightbox::backdrop{background:var(--alpine-ink)}
.cs-lightbox[open]{display:grid;grid-template-rows:64px minmax(0,1fr) auto}
.cs-lb-top{display:flex;justify-content:space-between;align-items:center;padding:0 var(--gutter)}
.cs-lb-count{font-size:var(--t-kicker);letter-spacing:.16em;font-variant-numeric:tabular-nums;color:var(--veil)}
.cs-lb-stage{display:flex;align-items:center;justify-content:center;min-height:0;padding:0 var(--gutter);touch-action:pan-y}
.cs-lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
.cs-lb-bottom{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:var(--s-3);min-height:72px;padding:var(--s-2) var(--gutter) var(--s-3)}
.cs-lb-caption{margin:0;font-size:13px;line-height:1.5;color:var(--veil);text-align:center}
.cs-lightbox button{background:none;border:0;color:var(--gallery-white);font:400 14px/1 var(--font-sans);cursor:pointer;min-width:44px;min-height:44px}
.cs-lightbox button:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.cs-lightbox button:focus-visible{outline:2px solid var(--gallery-white);outline-offset:2px}
.cs-lb-prev,.cs-lb-next{font-size:22px}
.cs-lightbox button:disabled{color:var(--graphite);cursor:default;text-decoration:none}
html.cs-lb-open{overflow:hidden}

/* Conclusão */
.cs-closing{background:var(--paper);padding:var(--section-y-lg) 0}
.cs-closing .eyebrow{margin:0}
.cs-closing .accent{margin:var(--s-4) 0 var(--s-7);max-width:1000px}
.cs-closing .accent span{color:var(--stone)}
.cs-closing .closing-text{max-width:720px;margin:calc(-1 * var(--s-5)) 0 var(--s-6);color:var(--graphite)}
.cs-next{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);flex-wrap:wrap;border-top:var(--rule-open);padding-top:var(--s-4)}
.cs-next span{font-size:var(--t-kicker);line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.cs-closing .cs-note{margin-top:var(--s-6)}

@media (max-width:1040px){
 .cs-metrics.cs-metrics--4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cs-methods.cs-methods--3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:800px){
 .cs-results-head{grid-template-columns:minmax(0,1fr);row-gap:var(--s-3)}
 .cs-results-head h2,.cs-results-head p{grid-column:1/-1}
 .cs-metrics{grid-template-columns:minmax(0,1fr)}
 .cs-metrics .metric+.metric{border-top:var(--rule)}
 .cs-methods,.cs-compare{grid-template-columns:minmax(0,1fr)}
 .cs-compare>div+div{margin-top:var(--s-5);border-top:var(--rule-open)}
 .cs-feature-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--s-6)}
 .cs-feature-grid>div,.cs-feature-photo{grid-column:1/-1}
 .cs-feature-photo{aspect-ratio:4/3}
 .cs-pair{grid-template-columns:minmax(0,1fr);row-gap:var(--s-5)}
 .cs-facts>div{grid-template-columns:minmax(0,1fr);gap:2px}
 .cs-lb-stage{padding:0}
}
@media (max-width:600px){
 .cs-metrics.cs-metrics--4{grid-template-columns:minmax(0,1fr)}
 .cs-strip-head{flex-direction:column;gap:var(--s-2)}
}
}