/* Sobre: uma folha comprida feita de várias folhas emendadas.
   Cada capítulo é uma folha de papel própria, com estoque, borda, largura e
   inclinação ligeiramente diferentes, sobreposta na anterior e presa por fita.
   O que dá unidade é o material (papel, tinta, fita, margem), não o layout. */

:root{
  --desk:        #0d1014;
  --deep:        #07090c;

  /* estoques de papel */
  --stock-warm:  #cbc2b0;
  --stock-deep:  #c3b9a5;
  --stock-pale:  #d1c8b7;
  --stock-cool:  #c6c9c1;

  --ink:         #24221d;
  --ink-soft:    #46423a;
  --muted:       #635d52;
  --ink-faint:   #6d675b;
  --blue:        #3e5f72;
  --rule:        rgba(62,95,114,0.20);

  --tape-fill:   rgba(198,191,161,0.42);
  --tape-edge:   rgba(120,116,90,0.26);

  --sans:  "Instrument Sans", sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --display: "Newsreader Display", "Newsreader", Georgia, serif;
  --mono:  "IBM Plex Mono", monospace;

  --ease: cubic-bezier(.22,.61,.36,1);

  /* fibra do papel, quase subliminar */
  --fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23f)' opacity='.05'/%3E%3C/svg%3E");
}

*{ box-sizing: border-box }
html{ scroll-behavior: smooth; scroll-padding-top: 5.5rem }

body{
  margin: 0;
  color: #e8e3d8;
  background: var(--desk);
  font: 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 70% at 50% -10%, #1a2027 0, transparent 58%),
    linear-gradient(118deg, var(--deep), var(--desk) 52%, #12171d);
}

.lang-en{ display: none }
html[data-lang="en"] .lang-pt{ display: none !important }
html[data-lang="en"] .lang-en{ display: inline !important }

.skip-link{
  position: fixed; z-index: 90; top: .6rem; left: .6rem;
  padding: .5rem .8rem; color: #171a1c; background: #f1eee5;
  transform: translateY(-200%);
}
.skip-link:focus{ transform: none }

main{ padding: 6.4rem clamp(.7rem, 3vw, 3rem) 0 }

/* ============================================================
   0. Cabeçalho do documento, sobre a mesa, antes da pilha
   ============================================================ */

.about-head{
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 clamp(.7rem, 3vw, 3rem) clamp(1.6rem, 3vw, 2.4rem);
}
.about-head .ah-eyebrow{
  margin: 0 0 .7rem;
  font: 500 .64rem/1.5 var(--mono);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: #8b9aa3;
}
.about-head h1{
  margin: 0;
  max-width: 16ch;
  font: 430 clamp(2rem, 5vw, 3.3rem)/1.06 var(--display);
  letter-spacing: -.028em;
  color: #ede8db;
  text-wrap: balance;
}

/* ============================================================
   1. A pilha
   ============================================================ */

.sheets{
  position: relative;
  max-width: 1260px;
  margin: 0 auto;
  padding-bottom: 3.4rem;
}
/* luz quente rebatida do papel na mesa */
.sheets::before{
  content: "";
  position: absolute;
  inset: -3% -4% 4%;
  z-index: -1;
  background: radial-gradient(58% 42% at 50% 30%, rgba(206,192,160,.13), transparent 72%);
  pointer-events: none;
}

.sheet{
  --w: 100%;
  --ml: 0%;
  --rot: 0deg;
  --pad-x: clamp(1.4rem, 5.4vw, 5.6rem);
  --pad-t: clamp(3.2rem, 6vw, 5.4rem);
  --pad-b: clamp(3.2rem, 6vw, 5.4rem);
  --rail: clamp(0px, 7vw, 6.5rem);
  --colgap: clamp(1.4rem, 3.6vw, 4rem);
  --stock: var(--stock-warm);
  --radius: 3px 7px 4px 6px;
  --age: 0;

  position: relative;
  width: var(--w);
  margin-left: var(--ml);
  padding: var(--pad-t) var(--pad-x) var(--pad-b);
  color: var(--ink);
  transform: rotate(var(--rot));
  border-radius: var(--radius);
  filter:
    sepia(calc(var(--age) * .16))
    saturate(calc(1 - var(--age) * .08));

  background-color: var(--stock);
  background-image:
    var(--fiber),
    repeating-linear-gradient(90deg, rgba(255,251,240,.055) 0 1px, transparent 1px 3px),
    radial-gradient(126% 82% at 14% 0%, rgba(255,249,232,.20), transparent 58%),
    radial-gradient(96% 74% at 92% 100%, rgba(64,55,40,.13), transparent 60%);
  background-size: 190px 190px, auto, auto, auto;

  /* espessura: aresta iluminada no topo, aresta escura embaixo, e a folha
     projetando sombra sobre a que ficou por baixo */
  box-shadow:
    inset  0  1px 0 rgba(255,248,230,.46),
    inset  0 -1px 0 rgba(58,50,36,.20),
    inset  1px 0 0 rgba(255,248,230,.16),
    inset -1px 0 0 rgba(58,50,36,.14),
    0 -7px 16px -9px rgba(0,0,0,.55),
    0 24px 46px -28px rgba(0,0,0,.8);
}

/* a emenda: cada folha nova pousa por cima do fim da anterior */
.sheet + .sheet{ margin-top: -1.15rem }

/* fita atravessando a emenda */
.sheet + .sheet::before,
.sheet.tape-2::after{
  content: "";
  position: absolute;
  top: -.72rem;
  z-index: 3;
  width: clamp(3.2rem, 6.5vw, 5.6rem);
  height: 1.5rem;
  background:
    linear-gradient(102deg, rgba(255,252,240,.16), transparent 42%, rgba(255,252,240,.12)),
    var(--tape-fill);
  border-left: 1px solid var(--tape-edge);
  border-right: 1px solid var(--tape-edge);
  box-shadow: 0 1px 2px rgba(30,26,18,.16);
  pointer-events: none;
}
.sheet + .sheet::before{ left: var(--tape-x, 13%); transform: rotate(var(--tape-rot, -1.5deg)) }
.sheet.tape-2::after   { left: var(--tape-x2, 72%); transform: rotate(var(--tape-rot2, 1.2deg)) }

/* composição: só largura/inclinação, alterna a cada folha (v1-v6) pra nenhuma
   folha ficar idêntica à vizinha. Não decide material nem fita, só onde a
   folha cai na mesa. "Liberdade na composição". */
.sheet.v1{ --w: 100%;    --ml: 0;    --rot: -.08deg }
.sheet.v2{ --w: 99.3%;   --ml: .2%;  --rot: .1deg   }
.sheet.v3{ --w: 99%;     --ml: .4%;  --rot: -.1deg  }
.sheet.v4{ --w: 99.4%;   --ml: 0;    --rot: .08deg  }
.sheet.v5{ --w: 99.2%;   --ml: .3%;  --rot: -.06deg }
.sheet.v6{ --w: 100%;    --ml: 0;    --rot: .12deg  }

/* material: estoque de papel, corte de canto, fita e idade do papel são do
   CAPÍTULO, não da folha. Toda folha do mesmo capítulo compartilha o mesmo
   remendo (mesma posição de fita), como um maço real seria colado uma vez só.
   "Consistência nos materiais". Cronologia decide a idade (--age 1 = mais
   surrado/amarelado, 0 = papel novo de hoje). Famílias de corte: abertura/
   agora ficam com o corte padrão (abre e fecha o dossiê); ufpr/monitoria/fora
   têm o corte mais "arrancado de caderno"; senai/trabalho, mais reto e formal
   (documento); ciência da computação/pesquisa, corte técnico de ficha. */
.sheet.ch-abertura{ --stock: var(--stock-pale); --tape-x: 15%;                 --age: 1   }
.sheet.ch-ufpr    { --stock: var(--stock-warm); --tape-x: 20%; --tape-x2: 68%; --age: .85; --radius: 4px 9px 5px 8px }
.sheet.ch-senai   { --stock: var(--stock-cool); --tape-x: 55%; --tape-x2: 12%; --age: .8;  --radius: 2px 5px 2px 5px }
.sheet.ch-cc      { --stock: var(--stock-deep); --tape-x: 30%; --tape-x2: 74%; --age: .55; --radius: 3px 6px 3px 7px }
.sheet.ch-mon     { --stock: var(--stock-pale); --tape-x: 42%; --tape-x2: 8%;  --age: .35; --radius: 4px 9px 5px 8px }
.sheet.ch-trabalho{ --stock: var(--stock-deep); --tape-x: 18%; --tape-x2: 70%; --age: .3;  --radius: 2px 5px 2px 5px }
.sheet.ch-pesquisa{ --stock: var(--stock-cool); --tape-x: 60%; --tape-x2: 20%; --age: .25; --radius: 3px 6px 3px 7px }
.sheet.ch-fora    { --stock: var(--stock-warm); --tape-x: 25%; --tape-x2: 66%; --age: .12; --radius: 4px 9px 5px 8px }
.sheet.ch-agora   { --stock: var(--stock-deep); --tape-x: 35%; --tape-x2: 78%; --age: 0    }

/* textura de superfície, só nos dois capítulos que são literalmente caderno
   de aula (Monitoria, pautado) e caderno de laboratório (Pesquisa, grade).
   Elemento próprio (não pseudo-elemento) pra não disputar o ::before/::after
   já usados pela fita. Nenhum outro capítulo ganha textura, pra não virar
   papel de parede repetido a página inteira. */
.paper-tx{ position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit }
.sheet.ch-mon .paper-tx{
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(62,95,114,.08) 27px 28px);
}
.sheet.ch-pesquisa .paper-tx{
  background-image:
    linear-gradient(rgba(62,95,114,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62,95,114,.065) 1px, transparent 1px);
  background-size: 23px 23px;
}
/* a última folha fecha a pilha, com a mesa aparecendo mais embaixo dela.
   (uma borda "rasgada" foi tentada aqui e removida: virou uma fileira de
   triângulos regulares demais, lia como enfeite de bandeirinha, não como
   papel rasgado. Não recriar sem achar uma técnica que pareça real.) */
.sheet.s-close{
  box-shadow:
    inset  0  1px 0 rgba(255,248,230,.46),
    inset  0 -1px 0 rgba(58,50,36,.20),
    inset  1px 0 0 rgba(255,248,230,.16),
    inset -1px 0 0 rgba(58,50,36,.14),
    0 -7px 16px -9px rgba(0,0,0,.55),
    0 44px 78px -28px rgba(0,0,0,.94);
}

/* ============================================================
   2. Grade interna da folha: margem, coluna de leitura, coluna de artefatos
   ============================================================ */

.sheet-in{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    [rail] minmax(0, var(--rail))
    [main] minmax(0, 1.34fr)
    [side] minmax(0, .66fr) [end];
  column-gap: var(--colgap);
  row-gap: clamp(2rem, 4vw, 3.4rem);
  align-items: start;
}

/* fio de margem, como o de uma folha pautada */
.sheet-in::after{
  content: "";
  position: absolute;
  top: calc(var(--pad-t) * -.55);
  bottom: calc(var(--pad-b) * -.55);
  left: calc(var(--rail) + var(--colgap) / 2);
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--rule) 7%, var(--rule) 93%, transparent);
  pointer-events: none;
}

.sheet-head{ grid-column: main / end }
.sheet-head h2{
  margin: 0;
  font: 430 clamp(1.7rem, 3vw, 2.55rem)/1.02 var(--display);
  letter-spacing: -.026em;
  color: var(--ink);
  text-wrap: balance;
}
.sheet-head h2::after{
  content: "";
  display: block;
  width: 2.6rem;
  height: 1px;
  margin-top: .95rem;
  background: var(--blue);
  opacity: .38;
}

.sheet-main{ grid-column: main }
.sheet-side{ grid-column: side }
.sheet-wide{ grid-column: main / end }

/* a foto vira a âncora da folha: ocupa a coluna inteira, largura e altura,
   sem caber apertada num p-sm/p-md com sobra em volta. Foto à esquerda,
   texto à direita, os dois esticados pra mesma altura. Essas fotos não usam
   .p-sm/.p-md/.p-lg nem .to-end nem tilt-*, a coluna já dá o tamanho e a
   inclinação ficaria estranha numa foto grande. */
.sheet-in.photo-lead{
  grid-template-columns:
    [rail] minmax(0, var(--rail))
    [photo] minmax(200px, .62fr)
    [main] minmax(0, 1.38fr) [end];
  align-items: stretch;
}
.sheet-in.photo-lead > .sheet-main{ grid-column: main; grid-row: 1; align-self: center }
.sheet-in.photo-lead > .print{
  grid-column: photo; grid-row: 1;
  display: flex;
  flex-direction: column;
  --rot-p: 0deg;
}
.sheet-in.photo-lead > .print .paper{ flex: 1; min-height: 220px }
.sheet-in.photo-lead > .print picture{ height: 100% }
.sheet-in.photo-lead > .print img{ height: 100% }

/* mesma ideia, foto grande sem sobra, mas do lado padrão (direita), sem
   inverter a ordem das colunas. */
.sheet-in.photo-trail{ align-items: stretch }
.sheet-in.photo-trail > .sheet-main{ align-self: center }
.sheet-in.photo-trail > .sheet-side.print{
  display: flex;
  flex-direction: column;
  --rot-p: 0deg;
}
.sheet-in.photo-trail > .sheet-side.print .paper{ flex: 1; min-height: 220px }
.sheet-in.photo-trail > .sheet-side.print picture{ height: 100% }
.sheet-in.photo-trail > .sheet-side.print img{ height: 100% }
.sheet-full{ grid-column: rail / end }

.prose{ max-width: 66ch }
.prose p{ margin: 0 0 1.05rem; color: var(--ink-soft); text-wrap: pretty }
.prose p:last-child{ margin-bottom: 0 }

/* as frases-batida do texto ("Passei.", "Mas não.", "E tem o Max."): mesma
   fonte e tamanho da prosa, só com mais respiro em volta e tinta cheia em vez
   de suave, pra ler como uma pausa proposital. Usado só nos pontos de virada
   de verdade (uns 8 no total), nunca em toda frase curta, senão perde o efeito. */
.prose p.beat{
  margin: 1.5rem 0;
  color: var(--ink);
}

.kicker{
  grid-column: main / end;
  margin: 0 0 1.4rem;
  font: 500 .63rem/1.5 var(--mono);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--blue);
}

/* nota de margem: as 4 vezes em que o texto aponta pra outra página do site.
   Em vez de link azul no meio da frase, uma referência discreta na margem
   esquerda (como uma anotação à mão numa folha), só existe onde há mesmo
   outra página real por trás. Centralizada na altura do parágrafo (não no
   topo) e ligada a ele por um traço, pra não parecer que aponta pra uma
   linha específica do texto, e sim pro parágrafo inteiro. */
.prose p.side-ref{ position: relative }
.margin-note{
  display: block;
  margin-top: .6rem;
  font: 500 .68rem/1.4 var(--mono);
  letter-spacing: .03em;
  color: var(--blue);
  text-decoration: none;
  opacity: .82;
}
.margin-note:hover,
.margin-note:focus-visible{ color: var(--ink); opacity: 1 }

@media (min-width: 900px){
  .margin-note{
    position: absolute;
    top: 50%;
    left: calc(-1 * (var(--rail) + var(--colgap)));
    width: var(--rail);
    margin-top: 0;
    transform: translateY(-50%);
    text-align: right;
  }
  .margin-note::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: var(--colgap);
    height: 1px;
    background: var(--rule);
  }
}

/* uma pausa: as perguntas soltas que abrem a curiosidade por IA na Pesquisa.
   Mesma família tipográfica da prosa (sans, não serifa/itálico), só com mais
   respiro e tinta cheia em vez de suave: a pausa vem do espaço em branco e do
   peso, não de um componente estranho à página. */
.q-stack{ margin: 1.6rem 0 }
.q-stack p{
  margin: 0 0 .6rem;
  font: 460 clamp(1.02rem, 1.4vw, 1.14rem)/1.5 var(--sans);
  color: var(--ink) !important;
}
.q-stack p:last-child{ margin-bottom: 0 }

/* ============================================================
   3. Fotografia impressa
   ============================================================ */

.print{
  position: relative;
  margin: 0;
  --rot-p: 0deg;
}
.print picture{ display: block }
.print .paper{
  position: relative;
  display: block;
  padding: 8px;
  border-radius: 2px 5px 3px 4px;
  background:
    var(--fiber),
    linear-gradient(158deg, #ded5c2, #cec4b0);
  background-size: 190px 190px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255,250,236,.5),
    0 1px 2px rgba(30,26,18,.24),
    0 18px 30px -18px rgba(8,10,14,.68);
  transform: rotate(var(--rot-p));
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.print img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(40,36,28,.24);
}
.print figcaption{
  margin-top: .7rem;
  font: 500 .6rem/1.55 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.print[data-lightbox-trigger]{ cursor: zoom-in }
.print[data-lightbox-trigger]:hover .paper,
.print[data-lightbox-trigger]:focus-visible .paper{
  transform: rotate(var(--rot-p)) translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,250,236,.5),
    0 2px 4px rgba(30,26,18,.28),
    0 26px 42px -18px rgba(8,10,14,.78);
}
.print[data-lightbox-trigger]:focus{ outline: none }
.print[data-lightbox-trigger]:focus-visible .paper{ outline: 2px solid var(--blue); outline-offset: 4px }

/* álbum: cantoneiras seguram a foto no papel. só nas fotos pessoais. */
.print.mounted .paper::after{
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 2;
  pointer-events: none;
  --cn: rgba(52,46,35,.42);
  background-image:
    linear-gradient(135deg, var(--cn) 0 16px, transparent 16px),
    linear-gradient(225deg, var(--cn) 0 16px, transparent 16px),
    linear-gradient(45deg,  var(--cn) 0 16px, transparent 16px),
    linear-gradient(315deg, var(--cn) 0 16px, transparent 16px);
  background-size: 23px 23px;
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
}

/* foto encaixada no meio do texto corrido, o parágrafo contorna em vez de a
   foto virar um bloco à parte depois do texto. Só onde o assunto é leve o
   bastante pra aguentar o texto abraçando a imagem (Fora disso). */
.print.inline-float{
  float: right;
  width: clamp(240px, 46%, 400px);
  margin: .15rem 0 1.2rem 1.8rem;
}
@media (max-width: 760px){
  .print.inline-float{ float: none; width: min(100%, 380px); margin: 1.6rem auto }
}

/* tiras de fotos lado a lado, como uma folha de contato */
.strip{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.1rem, 2.6vw, 2.4rem);
  align-items: start;
}

/* ============================================================
   4. Vagas reservadas (material que ainda não existe)
   ============================================================ */

.slot{
  position: relative;
  display: grid;
  place-content: center;
  gap: .55rem;
  aspect-ratio: 4/3;
  min-height: 172px;
  padding: 1.5rem;
  text-align: center;
  border-radius: 2px 5px 3px 4px;
  background-color: rgba(247,242,228,.26);
  background-image: var(--slot-grade, none);
  box-shadow:
    inset 0 0 0 1px rgba(66,60,46,.22),
    inset 0 2px 12px rgba(56,50,38,.09);
}
/* marcas de canto: o espaço está reservado, não quebrado */
.slot::before{
  content: "";
  position: absolute;
  inset: 10px;
  --mk: rgba(62,95,114,.42);
  background-image:
    linear-gradient(var(--mk), var(--mk)), linear-gradient(var(--mk), var(--mk)),
    linear-gradient(var(--mk), var(--mk)), linear-gradient(var(--mk), var(--mk)),
    linear-gradient(var(--mk), var(--mk)), linear-gradient(var(--mk), var(--mk)),
    linear-gradient(var(--mk), var(--mk)), linear-gradient(var(--mk), var(--mk));
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}
.slot-label{
  max-width: 24ch;
  font: 500 .63rem/1.65 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5d574c;
}
.slot-file{
  font: 400 .58rem/1.4 var(--mono);
  letter-spacing: .05em;
  color: rgba(62,95,114,.62);
  word-break: break-all;
}
.slot.grade{ --slot-grade:
  linear-gradient(rgba(62,95,114,.10) 1px, transparent 1px),
  linear-gradient(90deg, rgba(62,95,114,.10) 1px, transparent 1px);
  background-size: 19px 19px }
.slot.ruled{ --slot-grade: repeating-linear-gradient(to bottom, transparent 0 28px, rgba(62,95,114,.14) 28px 29px) }
.slot.dotted{ --slot-grade: radial-gradient(rgba(62,95,114,.32) .6px, transparent .8px); background-size: 12px 12px }
.slot.plain{ --slot-grade: none }

/* ============================================================
   5. Rodapé: a mesa embaixo da pilha
   ============================================================ */

.about-footer{
  max-width: 1260px;
  margin: 0 auto;
  padding: 2.6rem clamp(.7rem, 3vw, 3rem) 3.6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.6rem 2.4rem;
  align-items: start;
  color: #a7a49b;
  font-size: .84rem;
}
.about-footer > div:first-child strong{
  display: block;
  font: 500 1.05rem/1.3 var(--display);
  letter-spacing: -.01em;
  color: #ded9cd;
}
.about-footer p{
  margin: .3rem 0 0;
  font: .74rem/1.5 var(--mono);
  letter-spacing: .09em;
  color: #85837b;
}
.about-footer nav{
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.15rem;
  justify-content: flex-end;
}
.about-footer nav a{
  color: #c3bfb4;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.16);
  padding-bottom: 1px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.about-footer nav a:hover,
.about-footer nav a:focus-visible{ color: #eae5d9; border-bottom-color: rgba(255,255,255,.5) }

.about-signature{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(236,232,220,.09);
  font: .71rem/1.6 var(--mono);
  letter-spacing: .05em;
  color: #7d7b73;
}
.about-signature .fine-print{ margin: 0; font: inherit; letter-spacing: inherit; color: inherit }
.about-signature a{ color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.16) }
.about-signature .term-open{
  display: inline-flex; align-items: baseline; gap: .3rem;
  font: inherit; color: inherit; border: 0; text-decoration: none;
}
.about-signature .term-open:hover,
.about-signature .term-open:focus-visible{ color: #b9c9bd }
.about-signature .term-open-cursor{ animation: tblink 1.15s steps(1) infinite }
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@keyframes tblink{ 50%{ opacity: 0 } }

/* ============================================================
   6. Ampliação
   ============================================================ */

.lightbox{ padding: 2rem; border: 0; background: #071016f2 }
.lightbox::backdrop{ background: #071016f2 }
.lightbox img{
  display: block;
  max-width: min(92vw, 1100px);
  max-height: 76vh;
  object-fit: contain;
  box-shadow: 0 0 0 8px #cbc2b0, 0 30px 60px -20px #000;
}
.lightbox figcaption{
  margin-top: 1.1rem;
  font: 500 .64rem/1.5 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #cfc9bc;
  text-align: center;
}
.lightbox button{
  position: absolute; top: 1rem; right: 1rem;
  padding: .55rem .9rem;
  color: #eee7dc; background: none;
  border: 1px solid rgba(238,231,220,.42);
  border-radius: 2px 5px 3px 4px;
  font: 500 .64rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
}
.lightbox button:hover{ border-color: #eee7dc }

/* ============================================================
   7. Telas estreitas: a pilha vira uma coluna, as folhas continuam folhas
   ============================================================ */

@media (max-width: 900px){
  .sheet{ --rail: 0px; --colgap: clamp(1.1rem, 3vw, 2rem) }
  .sheet-in{ grid-template-columns: [rail] 0 [main] minmax(0, 1fr) [side] minmax(0, .62fr) [end] }
  .sheet-in::after{ display: none }
}

@media (max-width: 760px){
  main{ padding: 5rem .5rem 0 }
  .sheet{
    --w: 100% !important;
    --ml: 0 !important;
    --rot: 0deg !important;
    --pad-x: 1.35rem;
    --pad-t: 2.9rem;
    --pad-b: 2.9rem;
  }
  .sheet + .sheet{ margin-top: -.85rem }
  .sheet-in{
    display: block;
  }
  .sheet-in > * + *{ margin-top: 1.9rem }
  .sheet-head h2::after{ margin-top: .7rem }
  .prose{ max-width: none }
  .strip{ grid-template-columns: 1fr; gap: 1.5rem }
  .slot{ min-height: 152px }
  .about-footer{
    grid-template-columns: 1fr;
    padding: 2.2rem 1rem 2.8rem;
  }
  .about-footer nav{ justify-content: flex-start }
  .lightbox{ padding: 1rem }
  .lightbox img{ box-shadow: 0 0 0 5px #cbc2b0, 0 20px 40px -18px #000 }
}

@media (max-width: 420px){
  .sheet{ --pad-x: 1.1rem }
  .print .paper{ padding: 6px }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto }
  *{ animation: none !important; transition: none !important }
  .print[data-lightbox-trigger]:hover .paper{ transform: rotate(var(--rot-p)) }
}

@media (prefers-contrast: more){
  .prose p{ color: var(--ink) }
  .slot-label{ color: #3d382e }
  .sheet-in::after{ background: rgba(62,95,114,.4) }
}

@media print{
  body::before, .sheets::before, .skip-link, .lightbox, #nav{ display: none !important }
  .sheet{ box-shadow: none; background: #fff; transform: none; width: 100%; margin: 0; filter: none }
  .sheet + .sheet::before, .sheet.tape-2::after{ display: none }
  .paper-tx, .torn-edge, .margin-note{ display: none !important }
}

/* ============================================================
   8. Utilitárias de composição (tamanho e assentamento dos objetos)
   ============================================================ */

.p-sm{ max-width: 210px }
.p-md{ max-width: 300px }
.p-lg{ max-width: 440px }
.p-xl{ max-width: 560px }
.to-end{ justify-self: end }
.strip.two{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
.slot.page{ aspect-ratio: 3/4 }
.slot.w16{ aspect-ratio: 16/9; min-height: 0 }
.tilt-a{ --rot-p:  1.15deg }
.tilt-b{ --rot-p: -1deg }
.tilt-c{ --rot-p:  .6deg }
.tilt-d{ --rot-p: -.55deg }

@media (max-width: 760px){
  .p-sm, .p-md, .p-lg, .p-xl{ max-width: min(100%, 420px) }
  .to-end{ justify-self: start }
  .strip.two{ grid-template-columns: 1fr }
  .slot.w16{ aspect-ratio: 4/3 }
}