/* Oskenmoor · Look B · The Tapestry of the Crossing
   Loaded after style.css: the same pages, embroidered in wool on linen. The frieze and the banners live in the first
   fold and the titles only; the Ship's Log, the Pilot's Book, the tables and the questions stay clean text on linen.
   Light theme only. Mobile-first. */

:root {
  --t-linho: #efe6d1;         /* linen: page background */
  --t-linho-claro: #f8f2e4;   /* cards, header */
  --t-linho-escuro: #e3d7bb;  /* shaded linen: page bands */
  --t-indigo: #23324a;        /* text and line (10.4:1 on linen) */
  --t-indigo-suave: #4d5a6e;  /* secondary text (5.6:1 on linen) */
  --t-garanca: #a5432a;       /* madder: main button, notes (5.5:1 with light linen) */
  --t-garanca-escura: #86331f;
  --t-gualda: #c8902c;        /* weld: gold, stitching; never text */
  --t-salvia: #5f7a4a;        /* sage: leaves and threads; never text */
  --t-pastel: #3f6488;        /* woad: links (5.3:1 on linen) */

  /* the base look's names, set to the wool */
  --p-pele: var(--t-linho); --p-pele-clara: var(--t-linho-claro); --p-pele-escura: var(--t-linho-escuro);
  --p-mesa: var(--t-indigo); --p-tinta: var(--t-indigo); --p-tinta-suave: var(--t-indigo-suave);
  --p-vermelhao: var(--t-garanca); --p-vermelhao-escuro: var(--t-garanca-escura); --p-verde: var(--t-salvia);
  --p-azul: var(--t-pastel); --p-ouro: var(--t-gualda);
  --siena: #8a5a2e; --ouro-luz: #e6c06a;

  --f-titulo: "Grenze", Georgia, serif;
  --f-texto: "Cardo", "Iowan Old Style", Georgia, serif;
  --ponto: 1.5px dashed var(--t-gualda);
  --trama: repeating-linear-gradient(0deg, rgba(35, 50, 74, .035) 0 1px, transparent 1px 3px),
           repeating-linear-gradient(90deg, rgba(35, 50, 74, .03) 0 1px, transparent 1px 4px);
  /* an embroidered rosette, where the chart drew its compass */
  --regua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg stroke='%2323324a' stroke-width='1.3' stroke-dasharray='3 2'%3E%3Cellipse cx='22' cy='11' rx='6' ry='9' fill='%23a5432a'/%3E%3Cellipse cx='22' cy='33' rx='6' ry='9' fill='%23a5432a'/%3E%3Cellipse cx='11' cy='22' rx='9' ry='6' fill='%235f7a4a'/%3E%3Cellipse cx='33' cy='22' rx='9' ry='6' fill='%235f7a4a'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='5' fill='%23c8902c' stroke='%2323324a' stroke-width='1.3'/%3E%3C/svg%3E");
  /* a thread of wool with its knots, under a name and a title */
  --tecido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='26' viewBox='0 0 96 26'%3E%3Crect width='96' height='26' fill='%23e9dcbd'/%3E%3Cpath d='M14 3 l-6 20 h4 l6 -20 Z M22 3 l-6 20 h4 l6 -20 Z' fill='%23a5432a'/%3E%3Cpath d='M62 3 l-6 20 h4 l6 -20 Z M70 3 l-6 20 h4 l6 -20 Z' fill='%235f7a4a'/%3E%3Cpath d='M32 15 h12 q-2 5 -6 5 h-1 q-4 0 -5 -5 Z' fill='%23c8902c'/%3E%3Cpath d='M38 14 V7 l5 7 Z' fill='%233f6488'/%3E%3Cpath d='M80 15 h12 q-2 5 -6 5 h-1 q-4 0 -5 -5 Z' fill='%23c8902c'/%3E%3Cpath d='M86 14 V7 l5 7 Z' fill='%233f6488'/%3E%3Ccircle cx='4' cy='13' r='1.6' fill='%23c8902c'/%3E%3Ccircle cx='52' cy='13' r='1.6' fill='%23c8902c'/%3E%3Cpath d='M0 1 H96 M0 25 H96' stroke='%2323324a' stroke-width='2' stroke-dasharray='3 2'/%3E%3C/svg%3E");
  --fio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12'%3E%3Cpath d='M0 6 q12.5 -5 25 0 t25 0 t25 0 t25 0' fill='none' stroke='%23c8902c' stroke-width='2.4'/%3E%3Ccircle cx='50' cy='6' r='3.4' fill='%23a5432a' stroke='%2323324a'/%3E%3C/svg%3E");
}
body { background: var(--t-linho) var(--trama); font-size: 1.1875rem; }
:focus-visible { outline-color: var(--t-pastel); }
h1, h2, h3 { font-weight: 700; }

/* the header: light linen over an indigo hem stitched in weld */
.topo { background: var(--t-linho-claro); border-bottom: 0; box-shadow: none; }
.topo::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; }
.marca span { font: 800 1.75rem/1 var(--f-titulo); color: var(--t-garanca); padding-bottom: 7px; background: var(--fio) left bottom / 100px 12px repeat-x; }
.topo nav a { font-size: 1.125rem; }

/* buttons: cloth with a stitch inside */
.btn { font: 700 1.1875rem/1 var(--f-titulo); letter-spacing: .02em; border-radius: 4px; }
.btn-vermelhao, .btn-vermelhao:hover { box-shadow: 0 0 0 2px var(--t-indigo); outline: var(--ponto); outline-offset: -6px; }
.btn-vermelhao:hover { background: var(--t-garanca-escura); }
.btn-pele { font-size: 1.0625rem; outline: 1.5px dashed var(--t-indigo-suave); outline-offset: -5px; }
.btn:focus-visible { outline: 3px solid var(--t-pastel); outline-offset: 3px; }

/* ---------- hero: the words and the wool button on the left, the five banners on a rod on the right, a woven band
   above and below (the brand reference); the frieze of the crossing right after it ---------- */
.topo::after { height: 26px; background: var(--tecido) left top / 96px 26px repeat-x; }
.topo .marca span { font: 700 1.625rem/1 var(--f-titulo); letter-spacing: .03em; text-transform: uppercase; color: var(--t-indigo); }
.topo nav a { font: 700 .9375rem/1 var(--f-titulo); letter-spacing: .09em; text-transform: uppercase; }
.topo .entrar { font: 700 1rem/1 var(--f-titulo); letter-spacing: .03em; border-radius: 8px; outline-offset: -6px; }
.heroi.tapecaria { background-color: var(--t-linho); background-image: var(--trama); margin-top: 26px; border-bottom: 0; }
.heroi.tapecaria::after { content: ""; display: block; height: 26px; background: var(--tecido) left top / 96px 26px repeat-x; }
.heroi .titulo-carta { font: 700 1rem/1.3 var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--t-garanca); }
.heroi h1 { font: 800 var(--t-h1)/1.05 var(--f-titulo); max-width: 14ch; color: var(--t-indigo); }
.heroi .chamada { max-width: 34rem; }
.heroi .btn-vermelhao, .heroi .btn-vermelhao:hover { border-radius: 8px;
  background-image: repeating-linear-gradient(-38deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 5px);
  box-shadow: 0 0 0 2px var(--t-indigo), 0 3px 0 2px var(--t-garanca-escura);
  outline: 2px dashed var(--t-linho-claro); outline-offset: -8px; }
.estandartes { display: none; }
/* below 1000 px the banners hang between the line above the title and the title */
.estandartes.estandartes-tel { display: block; width: 100%; max-width: 520px; height: auto; margin: 4px 0 2px; }
/* the genre: stitched patches under the title, the first one in madder */
.generos { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; padding: 0; list-style: none; }
.generos li { padding: 5px 12px 4px; border-radius: 999px; background: var(--t-linho-claro); color: var(--t-indigo);
  font: 700 .875rem/1.2 var(--f-titulo); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 0 0 1.5px var(--t-indigo); outline: 1.5px dashed var(--t-gualda); outline-offset: -5px; }
.generos li:first-child { background: var(--t-garanca); color: var(--t-linho-claro); outline-color: var(--t-linho-claro); }
/* where else the game lives: each store's own mark on a light linen patch, centred under the banners on a wide
   screen, after the button on a phone; the studio's credit under them */
.flamulas { display: grid; gap: 14px; justify-items: start; margin-top: 18px; }
.lojas { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.lojas li { display: grid; justify-items: center; align-content: start; gap: 4px; }
.loja { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; min-width: 52px; padding: 0 16px;
  border-radius: 8px; background: var(--t-linho-claro); color: #111; text-decoration: none;
  box-shadow: 0 0 0 1.5px var(--t-indigo); outline: 1.5px dashed var(--t-gualda); outline-offset: -6px; }
a.loja:hover { box-shadow: 0 0 0 2px var(--t-garanca); }
.marca-loja { display: block; height: 26px; width: auto; }
.marca-s-patreon { height: 22px; width: 22px; }
.marca-s-itch { height: 24px; }
.marca-s-steam { height: 26px; }
.nome-loja { font: 700 1rem/1 var(--f-titulo); letter-spacing: .02em; color: #111; }
.lojas small { font: italic 400 .875rem/1 var(--f-texto); color: var(--t-indigo-suave); }
.estudio { font: italic 400 1rem/1.3 var(--f-texto); color: var(--t-indigo-suave); }
.estudio a { color: var(--t-indigo); font-style: normal; font-weight: 700; }
.friso-faixa { background: var(--t-linho-claro); border-bottom: 1.5px solid var(--t-indigo); }
.friso { display: none; }
.friso-tel { display: block; width: 100%; height: auto; }
.diario { border-radius: 4px; box-shadow: 0 0 0 1.5px var(--t-indigo); border: 0; outline: var(--ponto); outline-offset: -7px; }
.diario .medalha { box-shadow: 0 0 0 1.5px var(--t-indigo), inset 0 0 0 5px var(--t-linho-claro), inset 0 0 0 6px var(--t-indigo); }

/* ---------- sections: a stitched seam with a rosette between them, a knotted thread under each title ---------- */
.secao + .secao::before { background: var(--regua) center / 40px 40px no-repeat,
  repeating-linear-gradient(90deg, var(--t-indigo) 0 8px, transparent 8px 13px) center / 100% 1.5px no-repeat; }
.cab .titulo-carta { font: 700 1rem/1.3 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; }
.cab h2 { font-weight: 700; }
.cab h2::after { content: ""; display: block; width: 200px; height: 12px; margin-top: 12px; background: var(--fio) left center / 100px 12px repeat-x; }

/* the four scenes: blue cloth stitched in weld, the HERE caption above the picture */
.curso .inset, .lenda .inset { background: var(--t-indigo); border: 0; border-radius: 4px; box-shadow: none; outline: 2px dashed var(--t-gualda); outline-offset: -7px; padding: 46px 14px 14px; }
.curso .inset img, .lenda .inset img { box-shadow: 0 0 0 2px var(--t-gualda); }
.curso .inset figcaption, .lenda .inset figcaption { top: 14px; bottom: auto; left: 18px; right: 18px; max-width: none; padding: 0; border: 0; background: none;
  color: var(--t-linho-claro); font: 700 .9375rem/1.3 var(--f-titulo); font-style: normal; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.curso .inset figcaption::before, .lenda .inset figcaption::before { content: "Here · "; color: var(--t-gualda); }
.curso h3 { font-size: 1.75rem; }
/* the Auto's styles: round patches */
.estilos li { border-radius: 999px; border: 1.5px dashed var(--t-indigo-suave); padding: 8px 18px; }
.estilos .ativo { border: 2px solid var(--t-garanca); }
/* the hours: embroidery hoops */
.hora .disco { background: var(--t-gualda); box-shadow: 0 0 0 1.5px var(--t-indigo), 0 0 0 5px var(--t-linho-claro), 0 0 0 6.5px var(--t-siena, #8a5a2e); }
.hora b { font-weight: 700; }

/* the reading parts stay plain: linen, text, a thin line */
.legenda, .vento { border-radius: 4px; box-shadow: none; }
.entrada h3 { font: italic 400 1.375rem/1.25 var(--f-texto); }
.verbete b { font-size: 1.25rem; }

/* the final call: a patch of light linen on indigo cloth */
.final { background: var(--t-indigo) linear-gradient(90deg, rgba(200, 144, 44, .14) 0 2px, transparent 2px 12px) 0 0 / 12px 100%; }
.pele-final { background: var(--t-linho-claro) var(--trama); border-radius: 6px; outline: 2px dashed var(--t-gualda); outline-offset: -12px; box-shadow: 0 0 0 3px var(--t-gualda); }
.pele-final .ditado { font: 700 1rem/1.3 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; }
.navio-final { width: 120px; height: auto; }

/* inner pages: a linen band with a stitched hem */
.pag-cab { border-bottom: 0; box-shadow: 0 1.5px 0 var(--t-indigo); background: var(--t-linho-escuro); position: relative; }
.pag-cab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; border-bottom: 1.5px dashed var(--t-gualda); }
.pag-cab h1, .artigo h2 { font-weight: 700; }
.sumario { border-radius: 4px; }
.artigo figure.inset { outline: 0; border-radius: 0; }
.artigo code { font-family: var(--f-texto); }

@media (min-width: 760px) {
  .friso { display: block; width: 100%; max-width: 1600px; height: auto; margin: 0 auto; }
  .friso-tel { display: none; }
  .heroi .envoltorio { padding-block: 36px 44px; }
}
@media (min-width: 1000px) {
  .heroi.tapecaria { height: auto; min-height: 0; max-height: none; background-color: var(--t-linho); background-image: var(--trama); }
  .heroi.tapecaria .heroi-grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: start;
    padding: 36px max(16px, env(safe-area-inset-right, 0px)) 44px max(16px, env(safe-area-inset-left, 0px)); max-width: 1312px; }
  .heroi.tapecaria .texto { max-width: none; }
  .heroi.tapecaria .titulo-carta { display: block; }
  .estandartes { display: block; width: 100%; height: auto; margin-top: 4px; }
  .flamulas { justify-items: center; margin-top: 0; gap: 18px; }
  .estandartes.estandartes-tel { display: none; }
  .lojas { justify-content: center; }
}
@media (min-width: 1100px) { :root { --t-h1: 4.25rem; } }
/* phones held sideways: the words and the button on the left, the banners on the right */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1099px) {
  .heroi.tapecaria { display: block; padding: 0; }
  .lojas, .estudio { display: none; }
  .estandartes.estandartes-tel { display: none; }
  .flamulas { margin-top: 0; }
  .generos li { font-size: .75rem; padding: 4px 9px 3px; }
  .heroi.tapecaria .heroi-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; padding-block: 12px 16px; }
  .estandartes { display: block; width: 100%; height: auto; max-height: 210px; }
  .heroi h1 { max-width: none; }
}
@media (max-width: 1099px) { .heroi.tapecaria .envoltorio { padding-bottom: 24px; } }
@media (max-width: 419px) { .topo .marca span { font-size: 1.25rem; letter-spacing: .01em; } .topo .marca svg { width: 28px; height: 32px; } }
/* between 760 and 1099 px the uppercase menu tightens so the Sign in button keeps its place */
@media (min-width: 760px) and (max-width: 1099px) {
  .topo nav { gap: 12px; }
  .topo nav a { font-size: .8125rem; letter-spacing: .05em; }
  .topo .marca span { font-size: 1.375rem; }
}
@media (min-width: 760px) and (max-width: 899px) { .topo nav a { font-size: .75rem; letter-spacing: .03em; } .topo nav { gap: 10px; } }
/* the smallest phones: Sign in and Continue stay in the first fold. Lying down at 380 px high or less the hero's top
   padding, the genres and the account card's top padding shrink (the gap under the frieze stays: the frieze covers
   it); standing at 700 px high or less the banners on the rod are 100 px high, centred. */
@media (orientation: landscape) and (max-height: 380px) and (max-width: 1099px) {
  .heroi.tapecaria .heroi-grade { padding-top: 4px; }
  .generos li { padding: 2px 8px 1px; }
  .heroi .diario { padding-top: 6px; }
}
@media (orientation: portrait) and (max-height: 700px) and (max-width: 759px) {
  .estandartes.estandartes-tel { height: 100px; width: auto; max-width: 100%; margin: 4px auto 2px; }
}