@import url('fonts/fonts.css'); /* self-hosted webfonts — MUST stay first: an @import after any rule is ignored per CSS spec */

/* Ana Vanzin — bundled tokens */

/* ===== tokens/colors.css ===== */
/* Ana Vanzin — color tokens · MNEMOSYNE VIVA
   Editorial house for the archive, atlas and ICONOCRACIA research.
   Print black on cream paper, sienna as the single accent, old gold for
   ornament. No corporate gradients, no dashboard metaphors.
   Canonical source: tokens/source/mnemosyne-viva-design-tokens.json
   Tints are derived with color-mix so they follow the base automatically. */
:root {
  /* Papel claro por padrão; modo escuro somente por escolha explícita. */
  color-scheme: light;

  /* ---- Mnemosyne Viva canonical palette ---- */
  --ink: #111111;          /* preto de impressão — text, rules */
  --paper: #F5F0E6;        /* papel creme — page ground */
  --cream: #FFF9EF;        /* card / panel surface */
  --sienna: #8B3A1A;       /* primary accent */
  --sienna-dark: #632713;  /* hover / deep accent */
  --ochre: #D4AF37;        /* ouro antigo — ornament, frames */
  --aged: #7B5E3C;         /* tinta envelhecida — secondary */
  --soft: #E8DDC8;         /* soft fill / hairline ground */
  --line: #2A211A;         /* rule ink */
  --muted: #756451;        /* meta text */
  --night: #15110E;        /* dark ground — footer, cabinet, featured panel */

  /* Texture · fine paper grain (overlay) */
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");

  /* ---- Legacy alias layer ----
     The pre-rebrand names are kept so the ~55 pages, editorial.css and
     _ds_bundle.js that consume them follow the new palette with no edit.
     Prefer the canonical names above in new work. */
  --rubric: var(--sienna);            /* was #9B2C1C */
  --gold: var(--ochre);               /* was #9C7C3D */
  --gold-2: color-mix(in srgb, var(--ochre) 82%, var(--paper));
  --gold-soft: color-mix(in srgb, var(--gold) 45%, var(--paper));

  /* tertiary accent — was the lilac of the "notas" variant; the Mnemosyne
     system replaces it with aged ink so the site reads as one house. */
  --lilac: var(--aged);               /* was #B49AD4 */
  --lilac-2: var(--sienna-dark);      /* was #9579C0 */
  --lilac-bg: var(--soft);            /* was #ECE6F4 */

  /* derived tints (ink on paper at reduced strength) */
  --ink-70: color-mix(in srgb, var(--ink) 70%, var(--paper));
  --ink-50: color-mix(in srgb, var(--ink) 50%, var(--paper));
  --ink-30: color-mix(in srgb, var(--ink) 30%, var(--paper));
  --ink-15: color-mix(in srgb, var(--ink) 15%, var(--paper));
  --paper-deep: color-mix(in srgb, var(--paper) 96%, var(--ink));

  /* semantic aliases */
  --bg-page: var(--paper);
  --bg-inverse: var(--ink);
  --text-body: var(--ink);
  --text-muted: var(--ink-70);
  --text-faint: var(--ink-50);
  --text-inverse: var(--paper);
  --accent: var(--rubric);            /* links, blindfold elements, small-caps labels */
  --accent-2: var(--gold);            /* secondary: ornament, frames, desktop chrome */
  --accent-hover: color-mix(in srgb, var(--rubric) 85%, var(--ink));
  --rule-strong: var(--ink);          /* structural rules: 1px solid ink */
  --rule-hairline: var(--ink-30);     /* column rules, table rows */
  --rule-rubric: var(--rubric);       /* the blindfold line, active markers */
  --focus-ring: var(--rubric);
}

/* ===== Dark mode — "sala de leitura à noite" (2026-08) =====
   Explicit dark appearance; the default remains light in every OS theme. Only the 10 base
   tokens are redefined; every alias/derived tint (rubric, gold, ink-N,
   paper-deep, semantic text/bg) recomputes automatically from them.
   Manual override: <html data-theme="dark"> or "light" wins over the OS.
   Note: --night deepens (footer/cabinet stay darker than the page ground);
   the mesa icon tiles keep their baked cream padding by design — they read
   as paper miniatures pinned to a dark desk. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #EDE4D3;          /* ivory ink — text, rules */
  --paper: #1C1712;        /* night ground */
  --cream: #26201A;        /* panel surface, lifted from the ground */
  --sienna: #C96F45;       /* accent brightened for contrast on dark */
  --sienna-dark: #A85436;  /* hover — still luminous on dark */
  --aged: #A68A64;         /* secondary voice, lifted */
  --soft: #322820;         /* fills / hairline grounds */
  --line: #D8CCB4;         /* rules */
  --muted: #A89780;        /* meta text */
  --night: #14100C;        /* footer / cabinet — darker than the page */
}



/* ===== tokens/typography.css ===== */
/* Ana Vanzin — type tokens · MNEMOSYNE VIVA
   Two families only:
   - Playfair Display 400–800 — display, headings, tracked-out small caps
   - DM Sans 400–700 — body and UI
   Cormorant Garamond / Arial remain only as fallbacks in the stack.
   No italics for emphasis in UI; use sienna small caps instead. */
/* Webfonts moved to a self-hosted @import at the top of this file.
   An @import here (after :root) was being ignored by browsers, so the
   site had silently fallen back to Times New Roman / Helvetica Neue. */

:root {
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', Arial, sans-serif;

  /* scale (rem) — generous display, restrained body */
  --text-hero: clamp(4rem, 11vw, 9rem);     /* the name */
  --text-h1: 3rem;        /* page titles */
  --text-h2: 2rem;        /* section titles */
  --text-h3: 1.375rem;    /* sub-heads, entry titles */
  --text-lead: 1.1875rem; /* lead paragraphs (body family) */
  --text-base: 1rem;      /* body */
  --text-small: 0.875rem; /* metadata, footnotes */
  --text-eyebrow: 0.8125rem; /* small-caps labels */
  --text-footnote: 0.8125rem;

  --leading-display: 1.04;
  --leading-heading: 1.15;
  --leading-body: 1.62;
  --leading-tight: 1.3;

  /* tracked-out uppercase Garamond for eyebrows/labels */
  --tracking-eyebrow: 0.22em;
  --tracking-caps: 0.14em;

  --weight-display: 500;
  --weight-display-strong: 600;
  --weight-body: 400;
  --weight-body-strong: 600;
}


/* ===== tokens/spacing.css ===== */
/* Ana Vanzin — spacing, layout, borders, motion · MNEMOSYNE VIVA
   The page is a single strong text column with generous margins.
   No shadows, no gradients — ever. Corners are near-square: the Mnemosyne
   system allows a 2/4/8 radius scale (2 is the default), not the previous
   hard 0. Strokes are 1 / 1.5 / 2. */
:root {
  /* spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* layout */
  --measure: 62ch;            /* max width of running text */
  --column-max: 720px;        /* the single text column */
  --page-max: 1080px;         /* outer page incl. marginalia */
  --page-pad: clamp(24px, 6vw, 72px);

  /* rules & borders — Mnemosyne stroke scale 1 / 1.5 / 2 */
  --rule-w-hairline: 1px;
  --rule-w-mid: 1.5px;
  --rule-w-strong: 2px;

  /* radius scale 2 / 4 / 8 — near-square, never pill-shaped */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius: var(--radius-1);  /* default */
  --shadow: none;             /* fixed: no shadows */

  /* motion — one restrained reveal, nothing else */
  --ease-page: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --duration-reveal: 900ms; /* @kind other */
  --duration-ui: 150ms; /* @kind other */

  /* desktop-arquivo — the homepage interaction layer. These hard shadows
     belong to the movable archive windows, not to the editorial page system. */
  --desktop-titlebar-height: 46px;
  --desktop-dock-height: 36px;
  --desktop-dock-height-mobile: 48px;
  --desktop-hit-target: 44px;
  --desktop-control-glyph: 24px;
  --desktop-ui-text: 0.84375rem;
  --desktop-window-title-text: 0.9375rem;
  --desktop-meta-text: 0.6875rem;
  --desktop-elevation-idle: 3px 3px 0 0 var(--ink-50);
  --desktop-elevation-active: 5px 5px 0 0 var(--ink);
  --desktop-elevation-sheet: 0 -6px 0 0 var(--ink);
  --desktop-dock-rule: color-mix(in srgb, var(--paper) 35%, transparent);
  --desktop-hover-surface: var(--paper-deep);
}


/* ===== tokens/base.css ===== */
/* Ana Vanzin — base element styles (incunabulum page defaults) */
* { box-sizing: border-box; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

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

/* Desktop-arquivo interaction states: feedback stays inside the control's
   bounds so dragging and window geometry never jump. */
.window-control,
.desktop-menu-item,
.desktop-icon,
.desktop-dock-item {
  transition: background-color var(--duration-ui) ease, box-shadow var(--duration-ui) ease, transform var(--duration-ui) ease;
}

.window-control:hover > span {
  background: var(--desktop-hover-surface) !important;
}

.window-control:active > span {
  transform: translate(1px, 1px);
}

.desktop-menu-item:hover {
  box-shadow: inset 0 -3px 0 var(--ink-30);
}

.desktop-tile-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 10px;
}

.desktop-tile-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 69px;
  padding: 4px 2px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font: 700 8px var(--font-body);
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.desktop-tile-group[aria-pressed="true"] {
  border: 2px solid var(--sienna);
  color: var(--sienna);
}

.desktop-tile-group img { width: 30px; height: 30px; object-fit: cover; }
.desktop-tile-stage + .desktop-tile-stage { margin-top: 22px; }
.desktop-tile-heading {
  margin: 0 0 10px;
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--ink);
  color: var(--sienna);
  font: 600 18px var(--font-display);
  line-height: 1.2;
}
.desktop-tile-list { display: grid; gap: 4px; }

.desktop-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font: 500 12px var(--font-body);
}

.desktop-icon-image { flex: 0 0 52px; width: 52px; height: 52px; }
.desktop-icon-image img { display: block; width: 52px; height: 52px; object-fit: cover; }
.desktop-icon-label { padding: 2px; text-shadow: 0 1px var(--paper); }
.desktop-icon:hover .desktop-icon-label,
.desktop-icon:focus-visible .desktop-icon-label { background: var(--sienna); color: var(--paper); text-shadow: none; }

@media (max-width: 1024px) {
  .desktop-tile-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-icon { font-size: 13px; }
}

@media (max-width: 500px) {
  .desktop-tile-list { grid-template-columns: 1fr; }
}

.desktop-dock-item:hover {
  box-shadow: inset 0 0 0 1px var(--gold-2);
}

.desktop-enhanced #main:focus {
  outline: none;
}

@media (max-width: 520px) {
  .project-card-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1024px) {
  .dwin .mobile-action-link {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  [data-desktop-wallpaper="illuminated-justitia"] {
    right: -4% !important;
    height: 105% !important;
    max-width: 48% !important;
    opacity: 1 !important;
  }
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display-strong);
  line-height: var(--leading-heading);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duration-ui) ease;
}
a:hover { color: var(--accent-hover); }
a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--paper);
  transform: translateY(calc(-100% - 16px));
  transition: transform var(--duration-ui) ease;
}
.skip-link:focus-visible {
  color: var(--paper);
  transform: translateY(0);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: var(--rule-w-hairline) solid var(--rule-hairline);
  margin: var(--space-7) 0;
}

::selection { background: var(--rubric); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Motif B — illuminated initial (section / chapter openers) =====
   Decorated capital in sienna with ochre hairline frame. Use on ledes and
   verbete openers; prefer ::first-letter so copy stays plain text. */
.illuminated::first-letter{
  font-family:var(--font-display), 'Playfair Display', Georgia, serif;
  font-weight:700;
  font-size:3.05em;
  line-height:.82;
  float:left;
  margin:.06em .14em .02em 0;
  padding:.06em .1em .04em;
  color:var(--sienna, var(--rubric, #8B3A1A));
  background:
    linear-gradient(var(--paper, #F5F0E6), var(--paper, #F5F0E6)) padding-box,
    linear-gradient(135deg, var(--ochre, var(--gold, #D4AF37)), color-mix(in srgb, var(--sienna, #8B3A1A) 55%, var(--ochre, #D4AF37)), var(--aged, #7B5E3C)) border-box;
  border:1.5px solid transparent;
  border-radius:2px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
@media (max-width:560px){
  .illuminated::first-letter{font-size:2.45em; margin:.04em .1em 0 0}
}

/* ===== Motif D — seal + small-caps colophon (footer / print chrome) ===== */
.site-colophon{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin:clamp(28px,5vh,56px) auto 0; padding:22px 16px 36px;
  border-top:1px solid color-mix(in srgb, var(--ochre, var(--gold, #D4AF37)) 55%, transparent);
  max-width:720px; text-align:center;
}
.site-colophon .seal{
  width:48px; height:48px; display:block;
}
.site-colophon .mark{
  margin:0;
  font-family:var(--font-body), 'DM Sans', Arial, sans-serif;
  font-size:11px;
  font-variant:small-caps;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--muted, #756451);
}
.site-colophon .mark b{
  font-weight:600; color:var(--ink, #111111); letter-spacing:.14em;
}

/* ===== Dialectical Tarot App Styles ===== */
.tarot-app {
  font-family: var(--font-body);
  color: var(--ink);
  padding: 24px;
  min-height: 100%;
}
.tarot-deck {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.tarot-card {
  width: 130px;
  height: 200px;
  cursor: pointer;
  perspective: 1000px;
  transition: transform 0.2s;
}
.tarot-card:hover {
  transform: translateY(-4px);
}
.tarot-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
}
.tarot-card.active .tarot-card-inner {
  transform: rotateY(180deg);
}
.tarot-card-front, .tarot-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 6px;
  border: 1.5px solid var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tarot-card-front {
  background: var(--cream);
  transform: rotateY(180deg);
  border-color: hsl(var(--card-hue, 40), 50%, 30%);
  box-shadow: inset 0 0 20px hsla(var(--card-hue, 40), 50%, 30%, 0.1);
}
.tarot-card-back {
  background: var(--night);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarot-card-front img, .tarot-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tarot-card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: white;
  padding: 12px 4px 6px;
  text-align: center;
}
.tarot-card-num {
  font-family: var(--font-display);
  font-size: 1.2rem;
  display: block;
  line-height: 1;
  color: var(--gold);
}
.tarot-card-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  display: block;
  margin-top: 2px;
}
.tarot-tension {
  border-top: 3px double var(--ink);
  padding-top: 32px;
  animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.tarot-tension-head {
  text-align: center;
  margin-bottom: 32px;
}
.tarot-tension-head h3 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--rubric);
  margin-bottom: 8px;
}
.tarot-dialectic {
  font-style: italic;
  color: var(--ink-70);
  max-width: 60ch;
  margin: 0 auto;
}
.tarot-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 700px) {
  .tarot-evidence-grid { grid-template-columns: 1fr; }
}
.tarot-evidence-card {
  background: var(--paper);
  border: 1px solid var(--rule-hairline);
  padding: 12px;
}
.tarot-evidence-img {
  width: 100%;
  height: 120px;
  background: var(--night);
  margin-bottom: 12px;
  overflow: hidden;
}
.tarot-evidence-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  transition: filter 0.3s;
}
.tarot-evidence-card:hover img {
  filter: grayscale(0);
}
.tarot-evidence-card h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.tarot-evidence-card p {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-70);
}
.tarot-actions {
  display: flex;
  justify-content: center;
  padding-bottom: 24px;
}
.tarot-btn {
  background: var(--rubric);
  color: var(--paper);
  border: none;
  padding: 12px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 0.2s;
}
.tarot-btn:hover {
  background: var(--sienna-dark);
}
.tarot-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-50);
}