/* Oskenmoor · Fourth round · Portulano of the Drowned Moor
   The site is a medieval sailing chart drawn on a single calfskin, laid on a walnut table. The lore of the
   Drowned Moor is written on the chart itself: the old shore around every isle, the Moor road, drowned
   Glimwich, the Hollowback lying on the road, the winds, the barrows and the orcs on the north shore.
   Light theme only (skin and ink). Mobile-first. */

:root {
  --p-pele: #f3e4c0;          /* skin: page background */
  --p-pele-clara: #faf2dc;    /* insets, cards, header */
  --p-pele-escura: #e9d4a4;   /* shaded skin: bands */
  --p-mesa: #4a3628;          /* the walnut table under the chart (desktop hero, final band); no text is ever set on it */
  --p-tinta: #2b2118;         /* ink: text and line */
  --p-tinta-suave: #5a4734;   /* secondary text (7.0:1 on skin) */
  --p-vermelhao: #a8302a;     /* vermilion: ports, notes, primary button (5.3:1 on skin) */
  --p-vermelhao-escuro: #86241f;
  --p-verde: #3d7a4f;         /* half-winds and strokes only: 4.07:1 on skin, never text */
  --p-azul: #2f5f9e;          /* water names, drowned things (5.1:1 on skin) */
  --p-ouro: #d4a53a;          /* rose, medallion rims */

  /* names used by the shared drawings */
  --lapis: var(--p-azul); --minio: var(--p-vermelhao); --tinta: var(--p-tinta); --velino-claro: var(--p-pele-clara);
  --siena: #8b5a2b; --ouro: var(--p-ouro); --ouro-luz: #ecd27a; --verdete: var(--p-verde);

  --f-titulo: "Grenze Gotisch", "Old English Text MT", Georgia, serif;
  --f-texto: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --t-h1: 2.125rem;
  --t-h2: 2.125rem;
  --madeira: repeating-linear-gradient(92deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px, rgba(255,255,255,.035) 9px 10px, transparent 10px 23px),
             linear-gradient(180deg, #553e2e, #45321f 60%, #3d2c1d);
  --regua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 2 L25 19 L42 22 L25 25 L22 42 L19 25 L2 22 L19 19 Z' fill='%23a8302a' stroke='%232b2118' stroke-width='1.2'/%3E%3Ccircle cx='22' cy='22' r='3' fill='%23faf2dc' stroke='%232b2118'/%3E%3C/svg%3E");
  --pele-borda: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 800%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M70.0 26.0 L148.7 23.3 L227.5 20.1 L306.2 17.1 L384.8 11.7 L463.6 14.6 L542.4 16.4 L621.2 16.4 L700.0 14.0 L785.0 16.6 L870.0 17.0 L955.0 19.7 L1040.0 19.5 L1125.0 21.9 L1210.0 23.2 L1295.0 21.6 L1380.0 22.0 L1385.5 26.8 L1391.0 31.5 L1396.6 36.2 L1402.2 40.7 L1407.7 45.5 L1413.4 50.1 L1418.7 55.0 L1424.0 60.0 L1423.1 102.5 L1422.8 145.0 L1424.0 187.5 L1424.2 230.0 L1424.4 272.5 L1425.7 315.0 L1426.7 357.5 L1428.0 400.0 L1427.3 446.3 L1425.9 492.5 L1424.5 538.8 L1421.7 584.9 L1422.0 631.2 L1423.4 677.5 L1420.9 723.7 L1420.0 770.0 L1415.1 772.7 L1410.1 775.2 L1405.2 778.0 L1400.4 780.9 L1395.3 783.2 L1390.2 785.5 L1385.1 787.8 L1380.0 790.0 L1294.9 793.2 L1209.9 795.0 L1124.8 799.0 L1039.9 804.6 L955.1 796.8 L870.2 791.4 L785.0 790.1 L700.0 786.0 L621.3 782.5 L542.5 779.7 L463.7 779.8 L384.9 777.4 L306.1 777.9 L227.3 779.7 L148.7 785.3 L70.0 790.0 L66.2 786.3 L62.3 782.7 L58.5 779.0 L54.6 775.4 L51.0 771.5 L47.5 767.5 L43.8 763.7 L40.0 760.0 L39.6 735.0 L39.5 710.0 L39.0 685.0 L39.3 659.9 L41.3 635.0 L43.0 610.0 L43.1 585.0 L44.0 560.0 L39.9 548.5 L36.1 536.8 L31.6 525.5 L27.2 514.1 L21.7 503.1 L16.1 492.3 L10.9 481.2 L6.0 470.0 L4.9 461.3 L4.1 452.5 L3.6 443.8 L2.9 435.0 L2.0 426.3 L1.2 417.5 L0.7 408.8 L0.0 400.0 L1.7 391.3 L3.1 382.6 L4.1 373.9 L5.2 365.1 L5.8 356.3 L6.5 347.6 L7.3 338.8 L8.0 330.0 L12.9 320.0 L17.6 310.0 L22.3 300.0 L26.9 290.0 L31.6 279.9 L36.2 269.9 L41.2 260.0 L46.0 250.0 L46.0 226.2 L45.2 202.5 L44.8 178.7 L44.3 155.0 L43.0 131.2 L41.8 107.5 L41.1 83.7 L40.0 60.0 L43.5 55.6 L47.1 51.2 L50.7 46.8 L54.4 42.5 L58.4 38.4 L62.2 34.3 L66.1 30.1 Z%22 fill=%22%23f3e4c0%22 stroke=%22%23b89a64%22 stroke-width=%223%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--p-tinta); background: var(--p-pele); font: 400 1.1875rem/1.55 var(--f-texto); }
img { max-width: 100%; display: block; height: auto; }
a { color: var(--p-azul); text-underline-offset: .16em; }
a:hover { color: var(--p-vermelhao); }
:focus-visible { outline: 3px solid var(--p-azul); outline-offset: 3px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; }
.envoltorio { width: 100%; max-width: 1312px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nota-carta { color: var(--p-vermelhao); font-style: italic; }
.nota-carta::before { content: "☞ "; font-style: normal; }

/* ---------- header ---------- */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--p-pele-clara); border-bottom: 1.5px solid var(--p-tinta); box-shadow: 0 3px 0 var(--p-pele-clara), 0 4.5px 0 var(--p-tinta); }
.topo .envoltorio { display: flex; align-items: center; gap: 20px; height: 64px; }
.marca { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; text-decoration: none; color: var(--p-tinta); }
.marca svg { width: 34px; height: 38px; flex: none; }
.marca span { font: 600 1.875rem/1 var(--f-titulo); color: var(--p-vermelhao); }
.topo nav { display: none; gap: 22px; margin-left: auto; }
.topo nav a { display: inline-flex; align-items: center; min-height: 48px; color: var(--p-tinta); text-decoration: none; font-size: 1.125rem; white-space: nowrap; }
.topo nav a:hover, .topo nav a[aria-current] { color: var(--p-vermelhao); }
.topo .acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topo nav + .acoes { margin-left: 0; }
.menu-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--p-tinta); background: var(--p-pele); color: var(--p-tinta); border-radius: 2px; }
.conta-chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px; color: var(--p-tinta); text-decoration: none; }
.conta-chip i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--p-ouro); box-shadow: 0 0 0 1.5px var(--p-tinta), inset 0 0 0 3px var(--p-pele-clara); font: 400 1.3rem/1 var(--f-texto); font-style: normal; color: var(--p-tinta); }
.conta-chip i { flex: none; }
.conta-chip .nome { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15em; }

/* ---------- buttons ---------- */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 26px; border: 0; border-radius: 2px; font: 400 1.25rem/1 var(--f-texto); text-decoration: none; cursor: pointer; }
.btn-vermelhao { background: var(--p-vermelhao); color: var(--p-pele-clara); box-shadow: 0 0 0 2px var(--p-tinta), inset 0 0 0 4px var(--p-vermelhao), inset 0 0 0 5px var(--p-ouro); }
.btn-vermelhao:hover { background: var(--p-vermelhao-escuro); color: var(--p-pele-clara); box-shadow: 0 0 0 2px var(--p-tinta), inset 0 0 0 4px var(--p-vermelhao-escuro), inset 0 0 0 5px var(--p-ouro); }
.btn-pele { min-height: 48px; padding: 0 16px; background: var(--p-pele); color: var(--p-tinta); box-shadow: 0 0 0 1.5px var(--p-tinta); font-size: 1.0625rem; }
.btn-pele:hover { background: var(--p-pele-escura); color: var(--p-tinta); }
.btn .g { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--p-pele-clara); margin-left: -6px; }
.btn .g svg { width: 18px; height: 18px; }
.link-rumo { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--p-tinta); text-decoration: underline dashed var(--p-vermelhao) 1.5px; text-underline-offset: .3em; }
.link-rumo::after { content: "⟶"; color: var(--p-vermelhao); text-decoration: none; }

/* ---------- hero ---------- */
.heroi { position: relative; overflow: hidden; }
.carta-faixa { display: block; width: 100%; height: auto; aspect-ratio: 664 / 304; max-height: 46vh; border-bottom: 1.5px solid var(--p-tinta); background: var(--p-pele); }
.carta-inteira { display: none; }
.heroi .envoltorio { position: relative; padding-block: 16px 34px; }
.heroi .texto { display: grid; gap: 14px; }
.titulo-carta { font-style: italic; color: var(--p-vermelhao); }
.marca-grande { display: none; width: 100%; max-width: 420px; height: auto; margin-left: -6px; }
.heroi h1 { font: 400 var(--t-h1)/1.1 var(--f-texto); max-width: 20ch; }
.heroi .chamada { max-width: 33rem; }
.cta { display: grid; gap: 10px; margin-top: 4px; }
.cta .btn { width: 100%; }
.nota { font-style: italic; color: var(--p-tinta-suave); font-size: 1.0625rem; }

/* the account panel: one state shown at a time (account.js sets data-state); signed in, the log */
[hidden] { display: none !important; }
.conta .state { display: none; gap: 14px; }
.conta[data-state="loading"] .state-loading, .conta[data-state="out"] .state-out, .conta[data-state="in"] .state-in, .conta[data-state="off"] .state-off { display: grid; }
.conta .state-in { display: none; }
.conta[data-state="in"] .state-in { display: block; }
.diario { display: grid;
  grid-template-columns: 78px minmax(0, 1fr); gap: 16px; align-items: start; max-width: 31rem;
  background: var(--p-pele-clara); border: 1.5px solid var(--p-tinta); box-shadow: inset 0 0 0 4px var(--p-pele-clara), inset 0 0 0 5px var(--p-tinta);
  padding: 18px 20px 14px;
}
.diario .medalha { width: 76px; height: 76px; border-radius: 50%; background: var(--p-ouro); box-shadow: 0 0 0 1.5px var(--p-tinta), inset 0 0 0 5px var(--p-pele-clara), inset 0 0 0 6px var(--p-tinta); display: grid; place-content: center; text-align: center; }
.diario .medalha b { font: 600 2rem/1 var(--f-titulo); }
.diario .medalha small { font-size: .8125rem; font-style: italic; line-height: 1; }
.diario .corpo { display: grid; gap: 4px; min-width: 0; }
.diario .corpo > * { min-width: 0; overflow-wrap: anywhere; }
/* No saved character yet: no medal, and the log spans the whole card instead of the medal's column. */
.diario .medalha[hidden] + .corpo { grid-column: 1 / -1; }
.diario .de { font-style: italic; color: var(--p-vermelhao); }
.diario strong { font: 600 2.125rem/1 var(--f-titulo); }
.diario .meta { color: var(--p-tinta-suave); font-size: 1.0625rem; }
.diario .btn { width: 100%; min-height: 60px; margin-top: 10px; font-size: 1.375rem; white-space: normal; text-align: center; line-height: 1.15; padding-block: 8px; }
.diario .device { display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1.5px dashed var(--p-vermelhao); }
.diario .device .btn { min-height: 48px; margin-top: 0; font-size: 1.125rem; white-space: normal; }
.diario .sair { justify-self: start; min-height: 48px; padding: 0; border: 0; background: none; color: var(--p-azul); font: 400 1.0625rem/1 var(--f-texto); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* ---------- sections ---------- */
.secao { padding-block: 64px; position: relative; }
.secao + .secao::before { content: ""; position: absolute; top: 0; left: max(16px, calc((100% - 1280px) / 2)); right: max(16px, calc((100% - 1280px) / 2)); height: 44px; transform: translateY(-50%);
  background: var(--regua) center / 44px 44px no-repeat, linear-gradient(var(--p-tinta), var(--p-tinta)) center / 100% 1px no-repeat; }
.cab { display: grid; gap: 8px; margin-bottom: 34px; max-width: 46rem; }
.cab .titulo-carta { font-size: 1.125rem; }
.cab h2 { font: 600 var(--t-h2)/1.08 var(--f-titulo); color: var(--p-tinta); }
.cab h2::first-letter { color: var(--p-vermelhao); }
.cab p:not(.titulo-carta) { color: var(--p-tinta-suave); }
h3 { font: 600 1.75rem/1.1 var(--f-titulo); }

/* the legend */
.lenda { display: grid; gap: 32px; align-items: start; }
.lenda .texto { display: grid; gap: 14px; min-width: 0; max-width: 38rem; }
.lenda .texto > p:first-child::first-letter { float: left; font: 600 4.2em/.8 var(--f-titulo); color: var(--p-vermelhao); margin: .04em .08em 0 0; }
.cronica-inteira { margin-top: 6px; border-top: 1.5px solid var(--p-tinta); }
.cronica-inteira summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; gap: 10px; color: var(--p-vermelhao); font-size: 1.1875rem; list-style: none; }
.cronica-inteira summary::-webkit-details-marker { display: none; }
.cronica-inteira summary::before { content: "+"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--p-tinta); color: var(--p-tinta); font-size: 1rem; }
.cronica-inteira[open] summary::before { content: "−"; }
.cronica-inteira .partes { display: grid; gap: 18px; padding: 8px 0 12px; }
.cronica-inteira h3 { font-size: 1.5rem; color: var(--p-vermelhao); }
.cronica-inteira p + p { margin-top: 10px; }

/* insets: harbour plans on the chart */
.inset { margin: 0; background: var(--p-pele-clara); border: 1.5px solid var(--p-tinta); box-shadow: inset 0 0 0 4px var(--p-pele-clara), inset 0 0 0 5px var(--p-tinta); padding: 10px; position: relative; }
.inset img { width: 100%; box-shadow: 0 0 0 1.5px var(--p-tinta); }
.inset figcaption { position: absolute; left: 22px; bottom: 22px; background: var(--p-pele-clara); border: 1.5px solid var(--p-tinta); padding: 3px 12px; font-style: italic; color: var(--p-vermelhao); font-size: 1rem; max-width: calc(100% - 44px); }
.cursos { display: grid; gap: 44px; }
.curso { display: grid; gap: 18px; align-content: start; }
.curso .texto { display: grid; gap: 10px; min-width: 0; }
.curso .texto p { color: var(--p-tinta); }
.tarifas { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid rgba(43, 33, 24, .3); }
.tarifas li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(43, 33, 24, .2); font-variant-numeric: lining-nums tabular-nums; }
.estilos { display: grid; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.estilos li { display: grid; grid-template-columns: 50px auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 8px 12px; border: 1.5px solid rgba(43, 33, 24, .3); background: var(--p-pele-clara); }
.estilos i { height: 0; border-top: 2px solid; }
.estilos .c i { border-color: var(--p-verde); } .estilos .b i { border-color: var(--p-tinta); border-top-width: 3px; } .estilos .a i { border-color: var(--p-vermelhao); border-top-style: dashed; }
.estilos .ativo { border-color: var(--p-vermelhao); }
.estilos span { color: var(--p-tinta-suave); }
.horas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 8px; }
.hora { display: grid; justify-items: center; gap: 8px; text-align: center; }
.hora .disco { width: 100%; max-width: 170px; aspect-ratio: 1; border-radius: 50%; padding: 6px; background: var(--p-ouro); box-shadow: 0 0 0 1.5px var(--p-tinta); }
.hora img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--p-tinta); }
.hora b { font: 600 1.5rem/1 var(--f-titulo); color: var(--p-vermelhao); }
.hora span { font-style: italic; color: var(--p-tinta-suave); font-size: 1rem; }

/* the ship's log */
.diario-bordo { display: grid; gap: 0; position: relative; padding-left: 38px; }
.diario-bordo::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; border-left: 2px dashed var(--p-vermelhao); }
.entrada { position: relative; padding: 0 0 28px; display: grid; gap: 6px; }
.entrada::before { content: ""; position: absolute; left: -38px; top: 2px; width: 28px; height: 28px; background: var(--regua) center / 28px 28px no-repeat; }
.entrada .data { font-style: italic; color: var(--p-vermelhao); }
.entrada h3 { font: 400 1.375rem/1.2 var(--f-texto); font-style: italic; }
.entrada ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.entrada li::marker { content: "– "; color: var(--p-vermelhao); }

/* the pilot's book */
.legenda { background: var(--p-pele-clara); border: 1.5px solid var(--p-tinta); box-shadow: inset 0 0 0 4px var(--p-pele-clara), inset 0 0 0 5px var(--p-tinta); padding: 22px 20px; display: grid; gap: 22px; }
.grupo { min-width: 0; }
.grupo > p { font-style: italic; color: var(--p-vermelhao); border-bottom: 1px solid var(--p-tinta); padding-bottom: 4px; }
.grupo ul { list-style: none; margin: 0; padding: 0; }
.verbete { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 10px 0; color: var(--p-tinta); text-decoration: none; border-bottom: 1px dotted rgba(43, 33, 24, .35); align-items: start; }
.verbete svg { width: 38px; height: 38px; }
.verbete b { display: block; font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
.verbete span { color: var(--p-tinta-suave); font-size: 1.0625rem; line-height: 1.4; }
.verbete:hover b { color: var(--p-vermelhao); }

/* questions */
.perguntas { max-width: 50rem; border-top: 1.5px solid var(--p-tinta); }
.perguntas details { border-bottom: 1px solid rgba(43, 33, 24, .25); }
.perguntas summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; min-height: 58px; padding: 10px 0; font-size: 1.25rem; line-height: 1.3; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::before { content: ""; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='7' r='3' fill='none' stroke='%232b2118' stroke-width='2.2'/%3E%3Cpath d='M18 10v21M11 15h14M6 21c1 6 6 10 12 10s11-4 12-10' fill='none' stroke='%232b2118' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.perguntas details[open] summary { color: var(--p-vermelhao); }
.perguntas details > div { padding: 0 0 18px 38px; display: grid; gap: 8px; }

/* uncharted waters */
.mares { display: grid; gap: 30px; }
.mar { display: grid; gap: 10px; align-content: start; }
.mar svg.costa { width: 120px; height: 40px; }
.mar h3 { font-size: 1.875rem; }
.mar .estado { font-style: italic; color: var(--p-tinta-suave); }
.mar ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.mar li::marker { content: "✦ "; color: var(--p-vermelhao); font-size: .8em; }

/* final call */
.final { background: var(--madeira); background-color: var(--p-mesa); padding-block: 40px; }
.pele-final {
  position: relative; background: var(--pele-borda) center / 100% 100% no-repeat; padding: 52px 28px 44px; display: grid; gap: 14px; justify-items: center; text-align: center;
}
.pele-final h2 { font: 600 var(--t-h2)/1.05 var(--f-titulo); max-width: 20ch; }
.pele-final h2::first-letter { color: var(--p-vermelhao); }
.pele-final p { max-width: 34rem; }
.pele-final .serpente { width: min(380px, 92%); height: auto; }
.pele-final .ditado { font-style: italic; color: var(--p-vermelhao); }

/* footer */
.rodape { padding-block: 36px 48px; }
.rodape .envoltorio { display: grid; gap: 16px; justify-items: center; text-align: center; }
.rodape nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; }
.rodape nav a { color: var(--p-tinta); text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; }
.rodape small { color: var(--p-tinta-suave); font-size: .9375rem; font-style: italic; }

/* ---------- from 760px ---------- */
@media (min-width: 760px) {
  :root { --t-h1: 3rem; --t-h2: 3rem; }
  .topo nav { display: flex; }
  .menu-btn { display: none; }
  .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
  .cta .btn { width: auto; }
  .secao { padding-block: 96px; }
  .cursos { grid-template-columns: 1fr 1fr; gap: 56px 48px; }
  .horas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .legenda { padding: 30px 32px; }
  .mares { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .mar { padding: 0 28px; border-left: 1px solid rgba(43, 33, 24, .3); }
  .mar:first-child { padding-left: 0; border-left: 0; }
  .lado { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
  .lado .cab { position: sticky; top: 110px; margin-bottom: 0; }
  .cronica-inteira .partes { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .pele-final { padding: 64px 48px 56px; }
}
@media (min-width: 760px) and (max-width: 1099px) { .topo nav { gap: 16px; } .topo nav a { font-size: 1.0625rem; } }
@media (min-width: 760px) and (max-width: 919px) { .topo .envoltorio { gap: 14px; } .topo nav { gap: 12px; } .topo nav a { font-size: 1rem; } .marca span { font-size: 1.625rem; } }
@media (min-width: 900px) { .legenda { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 36px; } }

/* ---------- desktop ---------- */
@media (min-width: 1100px) {
  :root { --t-h1: 3.25rem; --t-h2: 3.5rem; }
  .conta-chip .nome { display: inline; }
  .heroi { background: var(--madeira); background-color: var(--p-mesa); height: calc(100vh - 70px); min-height: 760px; max-height: 860px; }
  .heroi .titulo-carta { display: none; }
  .carta-faixa { display: none; }
  .carta-inteira { display: block; position: absolute; inset: 14px 0 0; width: 100%; height: calc(100% - 14px); }
  .heroi .envoltorio { padding-block: 64px 40px; padding-left: max(110px, calc((100% - 1280px) / 2 + 60px)); max-width: none; }
  .heroi .texto { max-width: 520px; gap: 16px; }
  .marca-grande { display: block; }
  .lenda { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
}

/* narrow phones: the card's medal and its button a little smaller */
@media (max-width: 379px) {
  .diario { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 16px 16px 12px; }
  .diario .medalha { width: 62px; height: 62px; }
  .diario .medalha b { font-size: 1.625rem; }
  .diario .btn { font-size: 1.25rem; padding-inline: 14px; }
}
/* short phones */
@media (max-width: 759px) and (max-height: 700px) {
  :root { --t-h1: 1.75rem; }
  .heroi .envoltorio { padding-block: 12px 28px; }
  .heroi .texto { gap: 9px; }
  .heroi .chamada { font-size: 1.0625rem; line-height: 1.45; }
}
/* phones held sideways: the chart on the right, the title and the button on the left, never an empty page */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1099px) {
  :root { --t-h1: 1.75rem; }
  .heroi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0 4px; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 18px 0; }
  .carta-faixa { grid-column: 2; grid-row: 1; max-height: none; border: 1.5px solid var(--p-tinta); box-shadow: 0 0 0 4px var(--p-pele-clara), 0 0 0 5.5px var(--p-tinta); }
  .heroi .envoltorio { grid-column: 1; grid-row: 1; padding-block: 0; padding-right: 16px; }
  .heroi .chamada, .heroi .nota { display: none; }
  .heroi .texto { gap: 10px; }
  .heroi .titulo-carta { font-size: 1rem; }
  html[data-account="in"] .heroi h1, html[data-account="in"] .heroi .titulo-carta { display: none; }
  html[data-account="in"] .diario { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 12px 14px 8px; }
  html[data-account="in"] .diario .medalha { width: 58px; height: 58px; }
  html[data-account="in"] .diario .medalha b { font-size: 1.5rem; }
  html[data-account="in"] .diario strong { font-size: 1.75rem; }
  html[data-account="in"] .diario .meta { font-size: .9375rem; }
}
/* On the phone the Legend follows the first fold closely: no empty skin between the note and the Chronicle. */
@media (max-width: 1099px) { .heroi .envoltorio { padding-bottom: 8px; } .heroi + .secao { padding-top: 32px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---------- the phone's menu (landing.js opens it) ---------- */
.menu-aberto .topo nav { display: grid; gap: 0; position: absolute; top: 100%; left: 0; right: 0; margin: 4.5px 0 0; padding: 6px max(16px, env(safe-area-inset-left, 0px)) 12px; background: var(--p-pele-clara); border-bottom: 1.5px solid var(--p-tinta); }
.menu-aberto .topo nav a { min-height: 48px; display: flex; align-items: center; border-bottom: 1px dotted rgba(43, 33, 24, .35); }

/* ---------- inner pages: the Pilot's Book and the Ship's Log ---------- */
.pag-cab { border-bottom: 1.5px solid var(--p-tinta); background: var(--p-pele-escura); }
.pag-cab .envoltorio { padding-block: 28px 30px; display: grid; gap: 8px; }
.trilha { font-style: italic; color: var(--p-tinta-suave); }
/* the crumb's links: 48 px to the finger by their padding, the line as drawn */
.trilha a { color: var(--p-tinta); padding-block: 12px; }
.pag-cab h1 { font: 600 2.75rem/1 var(--f-titulo); }
.pag-cab h1::first-letter { color: var(--p-vermelhao); }
.pag-cab .resumo { font-style: italic; max-width: 40rem; }
.folio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 28px 80px; }
.sumario { min-width: 0; background: var(--p-pele-clara); border: 1.5px solid var(--p-tinta); order: 2; }
.sumario h2 { margin: 0; min-height: 52px; display: flex; align-items: center; padding: 0 16px; font: italic 400 1.1875rem/1.2 var(--f-texto); color: var(--p-vermelhao); border-bottom: 1px solid rgba(43,33,24,.25); }
.sumario .lista { display: grid; padding: 0 8px 12px; }
.sumario .lista p { padding: 12px 8px 2px; font-style: italic; color: var(--p-tinta-suave); font-size: 1rem; }
.sumario .lista a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 8px; color: var(--p-tinta); text-decoration: none; }
.sumario .lista a svg { width: 26px; height: 26px; flex: none; }
.sumario .lista a[aria-current="page"] { background: var(--p-tinta); color: var(--p-pele-clara); }
.sumario .lista a[aria-current="page"] svg { filter: invert(1) brightness(1.4); }
.artigo { min-width: 0; max-width: 44rem; display: grid; gap: 44px; }
.artigo section { display: grid; gap: 14px; scroll-margin-top: 90px; }
.artigo h2 { font: 600 2.25rem/1.05 var(--f-titulo); display: flex; align-items: center; gap: 12px; }
.artigo h2 .escudo { width: 34px; height: 41px; flex: none; }
.artigo h2::first-letter { color: var(--p-vermelhao); }
.artigo code { font: italic 400 1em var(--f-texto); color: var(--p-vermelhao); }
.carta-rotas { margin: 0; overflow-x: auto; overscroll-behavior-x: contain; box-shadow: 0 0 0 1.5px var(--p-tinta); }
.carta-rotas svg { display: block; width: 100%; min-width: 690px; height: auto; }
.carta-rotas figcaption { display: none; padding: 6px 10px; font-style: italic; color: var(--p-tinta-suave); font-size: 1rem; }
@media (max-width: 721px) { .carta-rotas figcaption { display: block; position: sticky; left: 0; width: max-content; max-width: 100%; } }
.tabela-rolagem { overflow-x: auto; }
.passagens { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.passagens th { text-align: left; font-weight: 400; font-style: italic; color: var(--p-vermelhao); padding: 8px 12px 8px 0; border-bottom: 1.5px solid var(--p-tinta); }
.passagens td { padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(43,33,24,.22); }
.passagens .num { text-align: right; }
.cidade-cab { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; }
.cidade-cab .disco { width: 84px; height: 84px; border-radius: 50%; padding: 5px; background: var(--p-ouro); box-shadow: 0 0 0 1.5px var(--p-tinta); }
.cidade-cab .disco img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--p-tinta); }
.cidade-cab h2 { font-size: 2.125rem; }
.cronica-nota { border-left: 3px solid var(--p-azul); padding: 4px 0 4px 14px; color: var(--p-azul); font-style: italic; }
.cronica-nota b { display: block; font-weight: 400; font-style: normal; color: var(--p-tinta-suave); font-size: .9375rem; }
.gente { margin: 0; }
.gente div { display: grid; padding: 10px 0; border-bottom: 1px dotted rgba(43,33,24,.35); }
.gente dt { font-size: 1.25rem; }
.gente dd { margin: 0; color: var(--p-tinta-suave); }
.aqui { border: 1.5px solid var(--p-vermelhao); background: var(--p-pele-clara); padding: 10px 14px; color: var(--p-vermelhao); font-style: italic; }
.aqui::before { content: "☞ "; font-style: normal; }
.folhas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.folhas a { display: grid; gap: 2px; padding: 14px 16px; background: var(--p-pele-clara); border: 1.5px solid var(--p-tinta); color: var(--p-tinta); text-decoration: none; }
.folhas a:last-child { text-align: right; }
.folhas a span { font-style: italic; color: var(--p-vermelhao); font-size: 1rem; }
.folhas a b { font-weight: 400; font-size: 1.25rem; }
@media (min-width: 760px) { .cidade-cab { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; } .cidade-cab .disco { width: 112px; height: 112px; } .cidade-cab h2 { font-size: 2.5rem; } .pag-cab h1 { font-size: 3.5rem; } .gente div { grid-template-columns: 210px 1fr; gap: 16px; } }
@media (min-width: 1100px) {
  .folio { grid-template-columns: 270px minmax(0, 44rem); gap: 64px; align-items: start; }
  .sumario { position: sticky; top: 96px; order: 0; }
}
.livro-bordo { display: grid; gap: 40px; padding-block: 40px 80px; }
.livro-bordo .diario-bordo { max-width: 46rem; }
.livro-bordo .entrada { padding-bottom: 36px; }
.livro-bordo .entrada h3 { font-size: 1.625rem; }
.vento { display: grid; gap: 10px; align-content: start; background: var(--p-pele-clara); border: 1.5px solid var(--p-tinta); box-shadow: inset 0 0 0 4px var(--p-pele-clara), inset 0 0 0 5px var(--p-tinta); padding: 22px; }
.vento h2 { font: 600 1.875rem/1.05 var(--f-titulo); }
.vento h2::first-letter { color: var(--p-vermelhao); }
.vento svg { width: 100%; max-width: 280px; height: auto; }
@media (min-width: 1100px) { .livro-bordo { grid-template-columns: minmax(0, 46rem) 300px; gap: 72px; align-items: start; } .vento { position: sticky; top: 96px; } }
.artigo > p, .artigo section > p { margin: 0; }
.artigo ul:not(.gente), .artigo ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.artigo li::marker { color: var(--p-vermelhao); }
.artigo h3 { font-size: 1.5rem; }
.artigo figure.inset { margin: 0; }
.artigo figure.inset figcaption { position: static; margin-top: 8px; display: block; max-width: none; }
.livro-indice { padding-block: 40px 80px; }
.vento ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.horas-cab { margin: 72px 0 18px; }
/* the final call's Sign in with Google: its G drawn by the style (landing.js rewrites the link's text) */
.btn-g::before { content: ""; width: 30px; height: 30px; margin-left: -6px; border-radius: 50%; flex: none;
  background: var(--p-pele-clara) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%234285F4' d='M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.91c1.7-1.57 2.69-3.87 2.69-6.62z'/%3E%3Cpath fill='%2334A853' d='M9 18c2.43 0 4.47-.8 5.96-2.18l-2.91-2.26c-.8.54-1.84.86-3.05.86-2.34 0-4.33-1.58-5.04-3.71H.96v2.33A9 9 0 0 0 9 18z'/%3E%3Cpath fill='%23FBBC05' d='M3.96 10.71A5.41 5.41 0 0 1 3.68 9c0-.59.1-1.17.28-1.71V4.96H.96A9 9 0 0 0 0 9c0 1.45.35 2.83.96 4.04l3-2.33z'/%3E%3Cpath fill='%23EA4335' d='M9 3.58c1.32 0 2.51.45 3.44 1.35l2.58-2.58A9 9 0 0 0 .96 4.96l3 2.33C4.67 5.16 6.66 3.58 9 3.58z'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
html[data-account="in"] .btn-g::before { display: none; }