/* ============================================================
   Cartório do Gosto — design system
   Paper-and-ink archival / cartorial aesthetic.
   Brazilian Portuguese. Light "paper" theme only (a museum
   isn't dark mode). Serif for editorial voice, mono for
   institutional officialese.
   ============================================================ */

:root {
  --ink:      #2C2C2A;   /* near-black, all text & rules        */
  --paper:    #E8E2CF;   /* folder body                         */
  --paper-2:  #F2EEDF;   /* lighter inset panels (testimony)    */
  --well:     #DAD5C1;   /* image wells                         */
  --desk:     #8AA1B5;   /* dusty blue background ("the desk")  */
  --muted:    #5F5E5A;   /* secondary mono text                 */
  --rule:     #888780;   /* hairline inner rules                */
  --stamp:    #993C1D;   /* red stamp / status accent           */
  --grid-size: 3;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "Space Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.6;
  padding: 2rem 1rem 3rem;
}

/* ---- shared layout shell ---------------------------------- */

.sheet {  margin: 0 auto; }

.folder {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  position: relative; z-index: 2;   /* sits above inactive tabs, below the active tab */
}

/* ---- mono officialese helpers ----------------------------- */

.mono       { font-family: var(--mono); }
.eyebrow    { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
              text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.band {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; border-bottom: 1.5px solid var(--ink);
}
.band > span { padding: 7px 14px; }
.band > span + span { border-left: 1.5px solid var(--ink); }
.band--muted { color: var(--muted); border-bottom: 1.5px solid var(--ink); }
.band--muted > span + span { border-left: 1px solid var(--rule); }

/* ---- titles ----------------------------------------------- */

.title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 6vw, 34px); line-height: 1.08;
  margin: 0 0 8px;
}
.masthead-name { font-family: var(--serif); font-style: italic; font-size: 14px; }

/* ---- the seal / stamp ------------------------------------- */

.stamp {
  border: 1.5px double var(--stamp); color: var(--stamp);
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 6px 7px; text-align: center;
  line-height: 1.5; transform: rotate(-7deg); display: inline-block;
}

/* ---- contributor grid (A Coleção) ------------------------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(calc(3*2), 1fr);
  /* border-top: 1.5px solid var( --ink); */
}

.cell {
  grid-column: span 2;
  border-bottom: 1.5px solid var(--ink);
  border-right: 1.5px solid var(--ink);
  border-left: none;
}

.cell:nth-child(3n) {
  border-right: none;
  border-left: none;
}

/* first row */
.cell:nth-child(-n+3) {
  border-top: 1.5px solid var(--ink);
}

/* last row */
.cell:nth-child(3n+1):nth-last-child(-n+3),
  .cell:nth-child(3n+1):nth-last-child(-n+3) ~ .cell {
    border-bottom: none;
}

/* Dealing with 2 orphan items */
.cell:last-child:nth-child(3n - 1) {
  grid-column-end: -2;
}
.cell:nth-last-child(2):nth-child(3n + 1) {
  grid-column-end: 4;
  border-left: 1.5px solid var(--ink);
}
/* Dealing with single orphan */
.cell:last-child:nth-child(3n - 2) {
  grid-column-end: 5;
  border-left: 1.5px solid var(--ink);
}

.well {
  aspect-ratio: 1; background: var(--well);
  border-bottom: 1.5px solid var(--ink);
  position: relative; display: flex; align-items: center; justify-content: center;
}
.well svg { width: 62px; height: 62px; }
.well .fig {
  position: absolute; bottom: 5px; left: 7px; pointer-events: none;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--muted);
}
.cell__body { padding: 12px 14px 16px; }
.cell__name {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 5px;
}
.cell__quote { font-family: var(--mono); font-size: 11px; line-height: 1.6; margin: 0; }

/* ---- metadata table --------------------------------------- */

.meta { border-top: 1.5px solid var(--ink); font-family: var(--mono); font-size: 12px; }
.meta__row { display: flex; border-bottom: 1px solid var(--rule); }
.meta__row:last-child { border-bottom: none; }
.meta__key {
  width: 40%; padding: 7px 14px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); border-right: 1px solid var(--rule);
}
.meta__val { padding: 7px 14px; }
.meta__val--stamp { color: var(--stamp); letter-spacing: 0.06em; }

/* ---- footer seal ------------------------------------------ */

.seal-footer {
  border-top: 1.5px solid var(--ink); text-align: center; padding: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}

/* ---- site nav (masthead) ---------------------------------- */

.masthead { text-align: center; padding: 22px 1rem 14px 1rem; border-bottom: 1.5px solid var(--ink); }
.masthead .kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 6px;
}
.masthead h1 { font-family: var(--serif); font-weight: 400; font-size: 34px; margin: 0; }
.masthead .sub {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--stamp); margin: 6px 0 0;
}
/* Filing tabs: each link is a manila folder tab that sits on top of the
   folder body. The active tab is the same paper colour and loses its
   bottom edge, so it reads as the open folder; inactive tabs are recessed
   (darker, nudged down) like folders filed behind it. */
.nav {
  display: flex; align-items: flex-end; gap: 5px;
  padding: 0 0 0 22px; margin: 0; position: relative;   /* no z-index: don't trap children in a separate context */
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav a {
  padding: 7px 20px 9px; color: var(--muted); text-decoration: none;
  background: var(--well);
  border: 1.5px solid var(--ink); border-bottom: none;
  border-radius: 7px 7px 0 0;       /* rounded top corners, flush base — a real folder tab */
  margin-bottom: -1.5px;            /* tuck the base under the folder edge */
  position: relative; top: 4px;     /* inactive tabs sit lower...          */
  z-index: 1;                       /* ...and BEHIND the folder body        */
  transition: top 0.12s ease, background 0.12s ease;
}
.nav a:hover { top: 2px; background: var(--paper-2); color: var(--ink); z-index: 3; }
.nav a[aria-current="page"] {
  background: var(--paper);         /* merges with the folder body          */
  color: var(--ink); top: 0; z-index: 3;   /* ...in FRONT of the folder      */
}

/* ---- on-page breadcrumb (filing path) --------------------- */
/* The record's path, set as the first line inside the folder, styled like
   the mono officialese bands. Ancestors link up; the leaf is the record. */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 7px 14px; border-bottom: 1.5px solid var(--ink);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.crumbs__up { color: var(--muted); text-decoration: none; }
.crumbs__up:hover { color: var(--ink); text-decoration: underline; }
.crumbs__sep { color: var(--rule); }
.crumbs__here { color: var(--ink); }

/* ---- era tabs --------------------------------------------- */

.eras {
  display: flex; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; border-bottom: 1.5px solid var(--ink); flex-wrap: wrap;
}
.eras a { padding: 9px 14px; color: var(--muted); text-decoration: none;
          border-right: 1px solid var(--rule); }
.eras a[aria-current="true"] { background: var(--ink); color: var(--paper); }

/* ---- archive index: folder cards -------------------------- */

.folders { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; }
.fcard { border: 1.5px solid var(--ink); background: var(--paper-2); text-decoration: none; color: inherit; display: block; }
.fcard:hover { background: var(--well); }
.fcard__head {
  display: flex; justify-content: space-between; border-bottom: 1px solid var(--ink);
  padding: 5px 10px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.fcard__cover { border-bottom: 1.5px solid var(--ink); overflow: hidden; }
.fcard__cover img { display: block; width: 100%; height: 200px; object-fit: cover; }
.fcard__quote { height: 64px; border-bottom: 1px solid var(--rule); display: flex;
                align-items: center; justify-content: center; background: #E3DDC8;
                font-family: var(--serif); font-style: italic; font-size: 13px;
                color: var(--muted); padding: 0 10px; text-align: center; }
.fcard__body { padding: 10px 12px 12px; }
.fcard__title { font-family: var(--serif); font-size: 18px; line-height: 1.12; margin: 0 0 4px; }
.fcard__aesthetic { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
                    text-transform: uppercase; color: var(--muted); margin: 0; }

/* ---- reading table (Notas de Campo) ----------------------- */

.note-row { padding: 16px; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit;
            display: flex; gap: 14px; align-items: flex-start; }
.note-row:hover { background: var(--paper-2); }
.note-row__cover { flex: 0 0 88px; border: 1.5px solid var(--ink); overflow: hidden; }
.note-row__cover img { display: block; width: 88px; height: 88px; object-fit: cover; }
.note-row__main { min-width: 0; flex: 1; }
.note-row__top { display: flex; justify-content: space-between; font-family: var(--mono);
                 font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
                 color: var(--muted); margin-bottom: 6px; }
.note-row__title { font-family: var(--serif); font-weight: 400; font-size: 22px;
                   line-height: 1.1; margin: 0 0 6px; }
.note-row__stand { font-family: var(--serif); font-size: 13px; line-height: 1.5;
                   color: var(--muted); margin: 0 0 6px; }
.note-row__by { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
                text-transform: uppercase; color: var(--stamp); margin: 0; }

/* ---- field-note byline (author snippet) ------------------- */

.byline { display: flex; align-items: center; gap: 10px; margin: 0; }
.byline__avatar { flex: 0 0 40px; width: 40px; height: 40px;
                  border: 1.5px solid var(--ink); overflow: hidden; }
.byline__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.byline__text { font-size: 12px; letter-spacing: 0.06em; margin: 0; }

/* ---- article body (Field Notes detail) -------------------- */

.article { padding: 24px 22px 28px; }
.article p { font-family: var(--serif); font-size: 16px; line-height: 1.7; }
.article p:first-of-type::first-letter { /* drop cap, restrained */
  font-size: 3.2em; line-height: 0.8; float: left; padding: 4px 8px 0 0; font-weight: 400;
}

/* ---- generic detail header padding ------------------------ */

.pad { padding: 20px 22px 16px; position: relative; }
.stamp--abs { position: absolute; top: 14px; right: 16px; }

/* ---- responsive ------------------------------------------- */

@media (max-width: 520px) {
  .grid-3 { grid-template-columns: 1fr; }
  /* Single column: drop the desktop 2-of-6 span and the orphan
     column-line pins, otherwise they force implicit columns and the
     cells overflow sideways instead of stacking. */
  .cell,
  .cell:last-child:nth-child(3n - 1),
  .cell:nth-last-child(2):nth-child(3n + 1),
  .cell:last-child:nth-child(3n - 2) {
    grid-column: auto;
  }
  .cell { border-right: none; border-left: none; border-bottom: 1.5px solid var(--ink); }
  .cell:last-child { border-bottom: none; }
  .folders { grid-template-columns: 1fr; }
}

/* ---- real images (the design mocked these with inline SVG) - */

.well img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.article img, .cell__quote img { max-width: 100%; height: auto; }
.article figure { margin: 0 0 1.2rem; }
.article figure img { display: block; width: 100%; height: auto; }
.article figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--muted); padding: 6px 0 0;
}

/* richtext inside the padded intro keeps the serif reading voice */
.pad-intro { margin-top: 12px; font-size: 15px; }
.pad-intro p { margin: 0 0 0.6em; }

/* ---- click-to-expand vitrine ------------------------------ */

/* Each expandable image is wrapped in a link to its full rendition (works
   with no JS); the zoom cursor invites the closer look. */
a.zoom { cursor: zoom-in; }
.well a.zoom { position: absolute; inset: 0; display: block; }
.article figure a.zoom { display: block; }

.lightbox-open { overflow: hidden; }

/* A controlled dim — an ink wash over the desk, not a theme switch. */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 5vw, 56px);
  background: rgba(44, 44, 42, 0.82); /* --ink, washed */
}
.lightbox[hidden] { display: none; }

/* The image is lifted onto paper and framed in ink, like a museum vitrine. */
.lightbox__frame {
  position: relative; margin: 0;
  max-width: min(1100px, 100%);
  display: flex; flex-direction: column;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  padding: 10px;
}
.lightbox__img {
  display: block; cursor: zoom-out;
  max-width: 100%; max-height: calc(100vh - 6rem);
  object-fit: contain;
}

/* Closing stamp, set into the frame's top-right corner. */
.lightbox__close {
  position: absolute; top: -1.5px; right: -1.5px;
  width: 34px; height: 34px; line-height: 1;
  font-family: var(--mono); font-size: 22px;
  color: var(--paper-2); background: var(--ink);
  border: 1.5px solid var(--ink); cursor: pointer;
}
.lightbox__close:hover { background: var(--stamp); border-color: var(--stamp); }

/* ---- accessibility ---------------------------------------- */

a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--stamp); outline-offset: 2px;
}