/* Layout: a library you visit. The page opens inside Gaudí's hall, painted in layers that move with the visitor and
   whose lamps come on; each part after is a room with its picture beside its words; the skins are one stage that
   changes; the shelves are real spines. Ayvurenda's own system (DESIGN.md): paper, ink, green, sun, night. */
:root {
  --paper: #fbf6ec;
  --plate: #f3e6cc;
  --surface: #ffffff;
  --ink: #1e2b2a;
  --muted: #4f5b57;
  --green: #17574c;
  --green2: #2c7a6a;
  --link: #17574c;
  --on-green: #fbf6ec;
  --sun: #f0b43c;
  --night: #0f3a33;
  --wood: #8a5a3c;
  --wood2: #6d4630;
  --line: rgba(30, 43, 42, .14);
  --shadow: 0 1px 2px rgba(15, 58, 51, .08), 0 14px 40px rgba(15, 58, 51, .14);
  --title: "Literata", Georgia, "Times New Roman", serif;
  --text: "Andika", "Segoe UI", system-ui, sans-serif;
  --radius: 22px;
  /* The desk, as the library's own screen shows it, in each mode. */
  --desk: #fbf6ec; --desk-item: #ffffff; --desk-field: #f2eadb; --desk-edge: #e8dcc6; --desk-muted: #5f6b67; --desk-back: #e6f1ec;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1c1a; --plate: #1b2f2b; --surface: #142624; --ink: #ece4d4; --muted: #a6b1ad; --green: #1f6a5c;
    --green2: #2c7a6a; --link: #8fd3c1; --on-green: #fbf6ec; --wood: #5e3c28; --wood2: #4a2f1f;
    --line: rgba(236, 228, 212, .16); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 40px rgba(0, 0, 0, .4);
  --desk: #1a3330; --desk-item: #0e1c1a; --desk-field: #142624; --desk-edge: rgba(236, 228, 212, .16); --desk-muted: #a6b1ad; --desk-back: #17463d; --surface: #182c29;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e1c1a; --plate: #1b2f2b; --surface: #142624; --ink: #ece4d4; --muted: #a6b1ad; --green: #1f6a5c;
  --green2: #2c7a6a; --link: #8fd3c1; --on-green: #fbf6ec; --wood: #5e3c28; --wood2: #4a2f1f;
  --line: rgba(236, 228, 212, .16); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 40px rgba(0, 0, 0, .4);
  --desk: #1a3330; --desk-item: #0e1c1a; --desk-field: #142624; --desk-edge: rgba(236, 228, 212, .16); --desk-muted: #a6b1ad; --desk-back: #17463d; --surface: #182c29;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* The fixed header never covers the heading a link leads to. */
html { scroll-padding-top: 92px; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .6rem 1rem; border-radius: 12px; background: var(--night); color: #fbf6ec; font-weight: 700; }
.skip:focus { top: 1rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 1.0625rem; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: var(--link); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--title); font-weight: 600; line-height: 1.12; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
.mark-night { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark-day { display: none; } :root:not([data-theme="light"]) .mark-night { display: block; } :root:not([data-theme="light"]) .brand-house { color: var(--sun); } }
:root[data-theme="dark"] .mark-day { display: none; }
:root[data-theme="dark"] .mark-night { display: block; }
:root[data-theme="dark"] .brand-house { color: var(--sun); }

.draft { background: var(--night); color: #fbf6ec; font-size: .88rem; }
.draft .wrap { padding-block: .45rem; display: flex; gap: .3rem 1rem; flex-wrap: wrap; justify-content: space-between; }

.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); }
.top .wrap { display: flex; align-items: center; gap: 1rem; padding-block: .65rem; }
/* The logo as the brand sets it: the emblem with no ground, and the name in its own letters, in each mode's colours. */
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); }
.brand-mark { width: 46px; height: 46px; flex: none; }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-house { font: 700 .62rem/1 var(--text); letter-spacing: .32em; text-transform: uppercase; color: #17574c; margin: 0 0 .28rem .08em; }
.brand-word { font: 600 1.6rem/1 var(--title); color: var(--ink); letter-spacing: -.005em; }
.nav { display: flex; gap: .25rem 1.2rem; flex-wrap: wrap; margin-left: auto; align-items: center; }
.head-cta { min-height: 40px; padding-block: .35rem; white-space: nowrap; }
.nav .lang-switch { font-weight: 400; color: var(--muted); padding-left: 1rem; border-left: 1px solid var(--line); }
.nav a { text-decoration: none; font-weight: 700; color: var(--ink); }
.nav a:hover { color: var(--link); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .55rem 1.3rem; border-radius: 999px; font: 700 1rem var(--text); text-decoration: none; border: 2px solid var(--green); cursor: pointer; }
.button-main { background: var(--green); color: var(--on-green); }
.button-quiet { background: transparent; color: var(--link); border-color: currentColor; }
@media (max-width: 420px) {
  /* Four tabs do not fit in a row on a small phone: two rows of two, each tab whole. */
  .skin-tabs { flex-wrap: wrap; gap: .3rem; margin-bottom: .3rem; }
  .skin-tab { flex: 1 1 40%; min-height: 38px; border-radius: 12px; }
  .skin-tab[aria-pressed="true"] { min-height: 38px; }
  .skins .skin-stage { border-top-left-radius: 22px; }
  .top .wrap { gap: .6rem; }
  .brand { gap: .5rem; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-house { font-size: .55rem; letter-spacing: .28em; }
  .brand-word { font-size: 1.32rem; }
  .head-cta { padding-inline: .95rem; font-size: .92rem; }
}
@media (max-width: 360px) {
  .top .nav { font-size: .84rem; gap: .25rem .4rem; }
  .top .nav .lang-switch { font-size: 0; }
  .top .nav .lang-switch::after { font-size: .84rem; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-word { font-size: 1.18rem; }
  .brand-house { font-size: .5rem; }
  .head-cta { padding-inline: .8rem; font-size: .86rem; }
}

/* The hall: three painted layers, the board with the corners, the new books, the memory and the herald. The scene is
   2400 × 1350 like Gaudí's master, so every place is a percentage of it and every letter a share of its width. */
.diorama { position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; background: #2a2017; isolation: isolate; }
.layer { position: absolute; inset: 0; transform: translate3d(calc(var(--mx, 0) * var(--d) * -24px), calc(var(--my, 0) * var(--d) * -14px), 0) scale(1.07); will-change: transform; }
.layer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.4s ease; }
.layer > img.n { opacity: 0; }
.diorama.night .layer > img.n { opacity: 1; }
.diorama.night .layer > img.d { opacity: 0; }
.spot { position: absolute; }
@container (max-width: 560px) { .board, .pulse { visibility: hidden; } }
@supports not (font-size: 1cqw) { .board, .pulse { display: none; } }
.board { display: flex; flex-direction: column; justify-content: center; gap: 0; color: var(--ink-day); font-family: var(--title); font-weight: 600; font-size: 1.22cqw; line-height: 1.62; padding: 0 1.1cqw; transition: color 1.4s ease; }
.diorama.night .board { color: var(--ink-night); }
.board span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .5em; }
.board span::before { content: ""; width: .42em; height: .42em; border-radius: 50%; background: currentColor; opacity: .7; flex: none; }
.pulse { display: flex; flex-direction: column; justify-content: center; text-align: center; color: var(--ink-day); font-size: 1.05cqw; line-height: 1.35; padding: 0 1.2cqw; transition: color 1.4s ease; }
.diorama.night .pulse { color: var(--ink-night); }
.pulse b { font-family: var(--title); font-size: 1.45cqw; display: block; margin-bottom: .35em; }
.cover { position: absolute; object-fit: cover; border-radius: .2cqw; box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .35); }
.figure { position: absolute; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 .6cqw .6cqw rgba(0, 0, 0, .25)); }
.lamp { position: absolute; top: 1rem; right: 1rem; z-index: 5; display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: .4rem .95rem; border-radius: 999px; border: 0; background: rgba(15, 30, 27, .72); color: #fbf6ec; font: 700 .92rem var(--text); cursor: pointer; backdrop-filter: blur(6px); }
.lamp svg { width: 20px; height: 20px; }
.lamp:not(.off) svg .glow { fill: var(--sun); stroke: var(--sun); }

.hero { padding-block: 1.5rem 0; }
.hero .wrap { position: relative; }
.hero .diorama { border-radius: 28px; box-shadow: var(--shadow); }
.hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 2.5rem; align-items: start; }
.hero-foot .plate { grid-column: 2; grid-row: 1; }
.hero-foot .facts { grid-column: 1; grid-row: 1; }
/* On a computer, what it is and what to do first, beside the hall, all in the first screen; the three facts under both. */
@media (min-width: 1000px) {
  .hero { padding-block: 2.2rem 0; }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "plate scene" "facts facts"; gap: 2rem 3rem; align-items: center; }
  .hero .diorama { grid-area: scene; }
  .hero-foot { display: contents; }
  .hero-foot .plate { grid-area: plate; margin: 0; width: auto; padding: 0; background: none; box-shadow: none; }
  .hero-foot .facts { grid-area: facts; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding: .5rem 0 0; }
}
.for { color: var(--muted); font-size: .95rem; }
.facts { display: grid; gap: 1.3rem; padding: 1.6rem 0 0 .5rem; margin: 0; }
.facts div { display: grid; gap: .35rem; align-content: start; }
.facts dt { white-space: nowrap; font-family: var(--title); font-weight: 600; font-size: 2rem; line-height: 1; color: var(--link); font-variant-numeric: tabular-nums; }
.facts dd { margin: 0; color: var(--muted); }
.plate { position: relative; z-index: 6; margin: -3.5rem 2rem 0 0; width: calc(100% - 2rem); background: var(--surface); border-radius: var(--radius); padding: 1.8rem 2rem 2rem; box-shadow: var(--shadow); display: grid; gap: 1rem; }
.eyebrow { font-weight: 700; color: var(--link); letter-spacing: .05em; text-transform: uppercase; font-size: .82rem; }
.plate h1 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.lead { font-size: 1.15rem; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.room .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding-block: 3.5rem; }
.room.flip .shot { order: 2; }
.room-text { display: grid; gap: 1rem; min-width: 0; }
.room-text > p { color: var(--muted); }
.room-text ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.room-text li { padding-left: 1.6rem; position: relative; }
.room-text li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: .65rem; height: .65rem; border-radius: 50%; background: var(--green2); }
.shot { position: relative; min-width: 0; }
.shot img { border-radius: 16px; box-shadow: var(--shadow); width: 100%; }
.tag { position: absolute; right: .7rem; bottom: .7rem; background: var(--night); color: #fbf6ec; font-size: .78rem; padding: .2rem .6rem; border-radius: 999px; z-index: 4; }
.corners { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem .6rem; }
.corners figure { display: grid; gap: .3rem; justify-items: center; text-align: center; font-size: .86rem; line-height: 1.25; color: var(--muted); }
.corners img { width: 100%; max-width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #f4ead7; box-shadow: 0 0 0 4px var(--surface); }

/* The shelf: spines in the order of their call numbers, one gap for the book someone took home. */
.stacks { background: var(--plate); }
.stacks .wrap { padding-block: 3.5rem; display: grid; gap: 1.5rem; }
.visit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem; align-items: center; }
.hosts { display: grid; gap: 1rem; align-content: center; }
.host { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; align-items: center; }
.host img { width: 88px; height: 88px; object-fit: contain; }
.host p { color: var(--muted); }
.host b { display: block; color: var(--ink); font-family: var(--title); font-size: 1.1rem; }
.shelf-head { display: grid; gap: .4rem; margin-top: 1rem; }
.shelf-head p { color: var(--muted); }
.shelf-box { position: relative; min-width: 0; }
.stacks .wrap { grid-template-columns: minmax(0, 1fr); }
.shelf-arrow { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -10px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }
.shelf-arrow.prev { left: -6px; }
.shelf-arrow.next { right: -6px; }
.shelf-arrow[hidden] { display: none; }
.shelf-arrow .ico { width: 22px; height: 22px; }.shelf-scroll { overflow-x: auto; scrollbar-width: none; padding-top: 1.8rem; position: relative; }
.shelf-scroll::-webkit-scrollbar { display: none; }
.shelf { display: flex; align-items: flex-end; gap: 4px; width: max-content; margin: 0 auto; height: 290px; padding: 0 26px; border-bottom: 16px solid var(--wood); box-shadow: inset 0 -2px 0 var(--wood2), 0 18px 24px -18px rgba(0, 0, 0, .45); position: relative; }
.bookend { width: 14px; height: 120px; background: var(--wood2); border-radius: 6px 6px 0 0; flex: none; }
.spine { position: relative; flex: none; border: 0; padding: 10px 0 0; border-radius: 4px 4px 1px 1px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; cursor: pointer; transition: transform .25s cubic-bezier(.2, .8, .3, 1.2), box-shadow .25s ease; box-shadow: inset -3px 0 0 rgba(0, 0, 0, .14), inset 2px 0 0 rgba(255, 255, 255, .12); font-family: var(--title); }
.spine:hover, .spine:focus-visible, .spine.out { transform: translateY(-22px); box-shadow: inset -3px 0 0 rgba(0, 0, 0, .14), 0 14px 18px -10px rgba(0, 0, 0, .5); }
.spine:focus-visible { outline-offset: 2px; }
.spine .t { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .84rem; font-weight: 600; line-height: 1.05; max-height: calc(100% - 62px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.spine .lab { width: calc(100% - 6px); margin-bottom: 8px; background: #fbf6ec; color: #1e2b2a; border-radius: 2px; font: 700 .64rem/1.15 var(--text); text-align: center; padding: 2px 0; }
.gap { flex: none; width: 34px; height: 70%; background: none; cursor: pointer; font: inherit; padding: 0; border: 2px dashed color-mix(in srgb, var(--muted) 70%, transparent); border-bottom: 0; border-radius: 4px 4px 0 0; display: flex; align-items: center; justify-content: center; }
.gap span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .72rem; color: var(--muted); font-weight: 700; }
.shelf-say { min-height: 3.2em; font-size: 1.05rem; }
.shelf-say b { font-family: var(--title); }

/* The desk, working by itself: a card, two books lent, one back with its one-tap note, and again. */
.desk { position: relative; background: var(--desk); color: var(--ink); border-radius: 18px; box-shadow: var(--shadow); padding: 1.3rem; display: grid; gap: .9rem; min-height: 23rem; align-content: start; }
.desk-label { font-family: var(--title); font-weight: 600; font-size: .95rem; }
.desk-field { display: flex; align-items: center; gap: .6rem; min-height: 54px; padding: 0 1rem; border-radius: 14px; background: var(--desk-field); border: 2px solid var(--desk-edge); font: 700 1.15rem var(--text); letter-spacing: .06em; transition: border-color .2s ease, box-shadow .2s ease; }
.desk-field.flash { border-color: #f0b43c; box-shadow: 0 0 0 4px rgba(240, 180, 60, .25); }
.desk-field .bars { width: 22px; height: 18px; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 7px); opacity: .7; flex: none; }
.desk-field .caret { width: 2px; height: 1.3em; background: var(--link); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.desk-reader { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 14px; background: var(--desk-item); box-shadow: 0 1px 0 var(--line); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.desk-reader.on { opacity: 1; transform: none; }
.desk-reader .avatar { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #17574c; color: #fbf6ec; font: 600 1.3rem/1 var(--title); }
.desk-reader b { font-family: var(--title); font-size: 1.05rem; display: block; }
.desk-reader div span { font-size: .85rem; color: var(--desk-muted); }
.desk-loans { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; align-content: start; min-height: 9.6rem; }
.desk .tag { top: .7rem; bottom: auto; }
.desk-loans li { display: flex; align-items: center; gap: .8rem; padding: .5rem .8rem; border-radius: 12px; background: var(--desk-item); font-size: .92rem; animation: in .35s ease both; }
.desk-loans li.back { background: var(--desk-back); }
.desk-loans img { width: 30px; height: 44px; object-fit: cover; border-radius: 3px; flex: none; }
.desk-loans b { display: block; font-family: var(--title); }
.desk-notes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.desk-notes span { font-size: .78rem; padding: .15rem .55rem; border-radius: 999px; background: var(--desk-field); }
.desk-notes span.picked { background: #17574c; color: #fbf6ec; }
.desk-toast { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 1rem; border-radius: 12px; background: #0f3a33; color: #fbf6ec; font-size: .92rem; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
.desk-toast.on { opacity: 1; transform: none; }
.desk-toast u { text-decoration: none; font-weight: 700; color: #f0b43c; }
.desk-wrap { display: grid; gap: .6rem; justify-items: end; min-width: 0; }
.desk-wrap .desk { width: 100%; }
.replay { min-height: 40px; padding: .35rem 1rem; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 700 .92rem var(--text); cursor: pointer; }
@keyframes in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The cards that grow: the flower until primary school, the sky from twelve, both in four steps. */
.cards { display: grid; gap: 1.2rem; }
/* The card as the library shows it: green with its arcs, the drawing in its medal, the name, the group and the stage,
   and its code; under it, the four paths with the marks the reader has lit. */
.lcard { display: grid; gap: .6rem; }
.idcard { position: relative; overflow: hidden; display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 1rem 1.1rem; align-items: center; padding: 1.1rem 1.2rem; border-radius: 20px; color: #fbf6ec; box-shadow: var(--shadow);
  background: repeating-radial-gradient(circle at 115% 130%, rgba(251, 246, 236, .07) 0 1px, transparent 1.5px 15px), linear-gradient(135deg, #17574c, #2c7a6a); }
.medal { position: relative; width: 136px; aspect-ratio: 1; border-radius: 50%; }
.flower .medal { background: #f4ead7; box-shadow: 0 0 0 5px rgba(251, 246, 236, .22), 0 6px 14px rgba(0, 0, 0, .18); }
.sky .medal { box-shadow: 0 0 0 5px rgba(251, 246, 236, .12), 0 6px 14px rgba(0, 0, 0, .25); }
.medal img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.94); transition: opacity .4s ease, transform .7s ease; }
.lcard[data-stage="0"] .medal img:nth-child(1), .lcard[data-stage="1"] .medal img:nth-child(2),
.lcard[data-stage="2"] .medal img:nth-child(3), .lcard[data-stage="3"] .medal img:nth-child(4) { opacity: 1; transform: none; transition-delay: .4s; }
.id { display: grid; gap: .25rem; justify-items: start; min-width: 0; }
.id b { font: 600 1.35rem/1.15 var(--title); }
.id span { font-size: .88rem; opacity: .9; }
.stage-name { font-weight: 700; font-size: .85rem; padding: .2rem .7rem; border-radius: 999px; background: rgba(251, 246, 236, .16); opacity: 1 !important; }
.code { display: grid; gap: .2rem; justify-items: center; background: #fff; color: #1e2b2a; border-radius: 10px; padding: .45rem .55rem .3rem; }
.code img { width: 112px; height: 34px; }
.code span { font: 700 .72rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.paths-key { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.5rem; padding: 1rem 1.2rem; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.paths-key div { display: grid; gap: .1rem; align-content: start; }
.paths-key dt { font-weight: 700; }
.paths-key dd { margin: 0; color: var(--muted); font-size: .92rem; }
.cards .replay { justify-self: start; }
@media (max-width: 560px) {
  .idcard { grid-template-columns: 104px minmax(0, 1fr); }
  .medal { width: 104px; }
  .code { grid-column: 1 / -1; justify-self: start; grid-auto-flow: column; align-items: center; gap: .6rem; }
}
.age { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #17574c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .age { color: var(--sun); } }
:root[data-theme="dark"] .age { color: var(--sun); }

.band { background: var(--plate); }
.band .wrap { padding-block: 3.5rem; display: grid; gap: 1.5rem; }
.plain .wrap { padding-block: 3.5rem; display: grid; gap: 1.5rem; }
.together { margin: 0; display: grid; gap: 1.1rem; }
.together div { display: grid; gap: .25rem; padding-left: 1rem; border-left: 3px solid var(--sun); }
.together dt { font: 600 1.15rem/1.25 var(--title); }
.together dd { margin: 0; color: var(--muted); }
.section-head { display: grid; gap: .6rem; }
.section-head p { color: var(--muted); font-size: 1.1rem; }

/* The skins: one stage, three halls. */
.skins { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "tabs tabs" "stage side"; gap: 0 2rem; align-items: start; }
.skins .skin-stage { grid-area: stage; border-top-left-radius: 0; }
.skins .skin-side { grid-area: side; }
.skins .skin-tabs { grid-area: tabs; }
.skin-stage { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 9; }
.skin-stage .layer { transform: none; will-change: auto; }
.skin-stage .diorama { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.skin-stage .diorama.on { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.skin-side { display: grid; gap: 1.4rem; align-content: start; }
.skin-tabs { display: flex; gap: .3rem; align-items: flex-end; padding: 0; margin: 0; }
.skin-tab { min-height: 38px; padding: .35rem 1.1rem .3rem; border-radius: 12px 12px 0 0; border: 0; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); color: var(--ink); font: 700 1rem var(--text); cursor: pointer; }
.skin-tab[aria-pressed="true"] { background: var(--green); color: var(--on-green); box-shadow: none; min-height: 44px; }
.skin-tab:not([aria-pressed="true"]):hover { background: var(--paper); }
.skin-copy { display: grid; gap: .9rem; }
/* Whatever is hidden stays hidden, whatever display its class gives it (the skins showed all four at once). */
[hidden] { display: none !important; }
.skin-copy dl { margin: 0; display: grid; gap: .7rem; }
.skin-copy dt { font-weight: 700; }
.skin-copy dd { margin: 0; color: var(--muted); }

.bring { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.bring-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.yours { display: grid; gap: .7rem; padding: 1.5rem; border-radius: var(--radius); background: var(--night); color: #fbf6ec; }
.yours h3 { color: var(--sun); }
.more { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1.5rem; }
.more li { display: grid; gap: .35rem; align-content: start; color: var(--muted); }
.more b { font: 600 1.12rem/1.25 var(--title); color: var(--ink); }
.more .ico { width: 28px; height: 28px; color: var(--green2); margin-bottom: .2rem; }
.bring li { display: grid; gap: .25rem; align-content: start; padding-top: .9rem; border-top: 1px solid var(--line); color: var(--muted); }
.bring b { font-family: var(--title); font-weight: 600; font-size: 1.12rem; color: var(--ink); }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.plan { background: var(--surface); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.6rem; display: grid; gap: .7rem; align-content: start; grid-template-rows: auto auto 1fr auto; border: 2px solid var(--line); }
.plan .button { justify-self: start; }
.plan.featured { border-color: var(--green2); }
.price { font-family: var(--title); font-size: 2rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price small { font-family: var(--text); font-size: .95rem; font-weight: 400; color: var(--muted); }
.plan p:not(.price) { color: var(--muted); }
.price { color: var(--ink); }
.note { color: var(--muted); }

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; align-items: start; }
.closing { display: grid; gap: 1rem; justify-items: start; margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.safe { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; }
.safe li { display: grid; gap: .3rem; align-content: start; padding-top: .9rem; border-top: 3px solid var(--green2); color: var(--muted); }
.safe b { font: 600 1.08rem/1.25 var(--title); color: var(--ink); }
.faq details { background: var(--surface); border-radius: 16px; padding: 0 1.2rem; box-shadow: 0 0 0 1px var(--line); }
.faq summary { cursor: pointer; font-weight: 700; padding-block: 1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--title); font-size: 1.4rem; line-height: 1; color: var(--link); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 1rem; color: var(--muted); }
/* The demo: three doors into the same made-up library. */
.demo .wrap { padding-block: 2.5rem 1rem; display: grid; gap: 1.2rem; }
.demo-head { display: grid; gap: .4rem; }
.demo-head h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.demo-head p { color: var(--muted); }
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.door { display: grid; gap: .3rem; align-content: start; padding: 1.1rem 1.3rem 1.2rem; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.door:hover { box-shadow: 0 0 0 2px var(--green2), var(--shadow); transform: translateY(-2px); }
.door b { font: 600 1.2rem/1.2 var(--title); color: var(--link); }
.door b::after { content: " →"; }
.door span { color: var(--muted); }
@media (max-width: 900px) { .doors { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .door { transition: none; } .door:hover { transform: none; } }

/* The legal and company pages (aviso legal, privacidad, cookies, accesibilidad, quiénes somos): the same paper, read
   comfortably, the text as wide as its box. */
.legal .wrap { padding-block: 3rem 4rem; display: grid; gap: 1rem; }
.legal h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 .5rem; }
.legal h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 1.5rem 0 0; }
.legal p, .legal li { margin: 0; line-height: 1.6; }
.legal ul { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.legal .facts { margin: 0; display: grid; grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr); gap: .5rem 1.5rem; padding: 1.1rem 1.3rem; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.legal .facts dt { font: 700 1rem/1.5 var(--text); color: var(--ink); }
.legal .facts dd { margin: 0; font: 400 1rem/1.5 var(--text); color: var(--ink); overflow-wrap: anywhere; }
.legal a { overflow-wrap: anywhere; }
.legal .updated { color: var(--muted); font-size: .92rem; margin-top: 1rem; }
.legal .quote { margin: .5rem 0; padding: 1.2rem 1.5rem; border-left: 4px solid var(--sun); border-radius: 0 18px 18px 0; background: var(--surface); }
.legal .quote p { font: 600 clamp(1.25rem, 2.4vw, 1.6rem)/1.3 var(--title); }
.legal .quote cite { display: block; margin-top: .5rem; color: var(--muted); font-style: normal; font-size: .95rem; }
.legal .tribute { font: 500 1.12rem/1.8 var(--title); }
.legal .banner { margin: .5rem 0; }
.legal .banner img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.legal .dedication { font: 600 1.25rem/1.4 var(--title); color: var(--link); }
@media (max-width: 640px) {
  .legal .facts { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .legal .facts dd { margin-bottom: .6rem; }
}
/* The guide «Bring your library»: a second page that sells by showing how it is done. */
.guide-top .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 3rem; align-items: center; padding-block: 2.2rem 1.5rem; }
.guide-title { display: grid; gap: 1rem; min-width: 0; }
.guide-title h1 { font-size: clamp(2rem, 3.2vw, 2.75rem); }
.guide-art { margin: 0; min-width: 0; }
.guide-art img { width: 100%; height: auto; border-radius: 28px; box-shadow: var(--shadow); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 1.1rem; }
.steps li { position: relative; display: grid; gap: .2rem; padding-left: 3.4rem; color: var(--muted); counter-increment: paso; }
.steps li::before { content: counter(paso); position: absolute; left: 0; top: .1rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; background: var(--green); color: var(--on-green); font: 600 1.2rem/1 var(--title); }
.steps b { font: 600 1.15rem/1.25 var(--title); color: var(--ink); }
.origins { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.origin { display: grid; gap: .6rem; align-content: start; grid-template-rows: auto 1fr auto; padding: 1.3rem 1.4rem; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.origin p { color: var(--muted); }
.origin .brings { padding-top: .6rem; border-top: 1px solid var(--line); font-size: .95rem; }
.origin .brings b { color: var(--ink); }
.guide-safe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* The four steps in a row, joined like a path, and under them the screen as big as it deserves. */
.guide-steps .wrap { display: grid; gap: 1.5rem; }
.guide-steps .section-head { margin-bottom: 0; }
.guide-steps .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.guide-steps .steps li { align-content: start; padding: 3.1rem 0 0; }
.guide-steps .steps li::before { top: 0; }
.guide-steps .steps li:not(:last-child)::after { content: ""; position: absolute; top: 1.2rem; left: 3rem; right: -.9rem; border-top: 2px dotted var(--line); }
.guide-shot { margin: .75rem 0 0; }
.guide-shot img { height: auto; }
@media (max-width: 900px) {
  .guide-top .wrap { grid-template-columns: minmax(0, 1fr); }
  .guide-art { order: -1; }
  .guide-safe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-steps .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-steps .steps li:nth-child(2)::after { display: none; }
}
@media (max-width: 560px) {
  .guide-steps .steps { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .guide-steps .steps li { padding: 0 0 0 3.4rem; }
  .guide-steps .steps li::before { top: .1rem; }
  .guide-steps .steps li:not(:last-child)::after { display: none; }
  .guide-shot .tag { position: static; display: inline-block; margin-top: .6rem; }
  .guide-safe { grid-template-columns: minmax(0, 1fr); }
}
footer { border-top: 1px solid var(--line); }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; width: 100%; }
.foot-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font: 600 1.15rem/1 var(--title); }
.foot-brand img { width: 34px; height: 34px; }
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; }
.social { display: flex; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); }
.social a:hover { background: var(--plate); color: var(--link); }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem; width: 100%; padding-top: 1rem; border-top: 1px solid var(--line); }
footer .wrap { padding-block: 2rem 2.5rem; display: grid; gap: 1rem; color: var(--muted); font-size: .92rem; }

@media (max-width: 900px) {
  .room .wrap, .skins, .visit, .faq { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .skins { grid-template-areas: "tabs" "stage" "side"; gap: 0; }
  .skins .skin-side { margin-top: 1.5rem; }
  .skin-tabs { align-items: stretch; }
  .skin-tab { flex: 1 1 0; padding-inline: .4rem; font-size: .88rem; line-height: 1.15; }
  .room.flip .shot { order: 0; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans, .more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .safe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bring-row { grid-template-columns: minmax(0, 1fr); }
  .plate { margin: -2.5rem auto 0; width: calc(100% - 1.5rem); padding: 1.4rem 1.3rem 1.6rem; }
  .hero-foot { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-foot .plate, .hero-foot .facts { grid-column: 1; grid-row: auto; }
  .facts { padding: 2rem 0 0; }
}
@media (max-width: 560px) {
  .top { position: static; }
  .top .wrap { flex-wrap: wrap; row-gap: .35rem; }
  .head-cta { margin-left: auto; }
  .nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; gap: .25rem .6rem; font-size: .95rem; }
  /* On a phone the language is its two letters, so the row fits; the whole word stays for screen readers. */
  .nav .lang-switch { padding-left: 0; border-left: 0; font-size: 0; }
  .nav .lang-switch::after { content: attr(data-short); font-size: .95rem; font-weight: 700; }
  .plans, .bring, .more, .safe { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .lamp { display: none; }
  .hero .diorama { border-radius: 18px; }
  .plate { margin-top: -1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .layer { transform: scale(1.07); }
  .layer > img, .board, .pulse, .spine, .skin-stage .diorama { transition: none; }
}

/* The library's bookmark, as in the plugin (marcapaginas.js): the fore-edge of a book with its pages, a thumb index and a satin ribbon.
   Colours from Ayvurenda's tokens, so it follows light and dark mode. GPL v3 or later, with the plugin. */
html { scrollbar-color: var(--green2, #2c7a6a) transparent; scrollbar-width: thin; }

.ayv-bm { display: none; }

@media (min-width: 1000px) {
    html.ayv-has-bm body { padding-right: 34px; }

    .ayv-bm:not([hidden]) {
        position: fixed;
        z-index: 20;
        top: 0;
        right: 0;
        bottom: 0;
        display: block;
        width: 34px;
        pointer-events: none;
        user-select: none;
        /* The pages seen from the side: fine lines, a little darker towards the cover. */
        background:
            linear-gradient(90deg, rgba(30, 43, 42, .10), transparent 30%, transparent 85%, rgba(30, 43, 42, .08)),
            repeating-linear-gradient(to bottom, transparent 0 2px, var(--ayv-bm-page, rgba(30, 43, 42, .09)) 2px 3px),
            var(--plate, #f2eadb);
        border-left: 1px solid var(--line, rgba(30, 43, 42, .14));
        box-shadow: -6px 0 14px -10px rgba(15, 58, 51, .35);
    }
}

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ayv-bm { --ayv-bm-page: rgba(236, 228, 212, .07); } :root:not([data-theme="light"]) .ayv-bm-tab:not(.on) { background: #2f4a43; color: #ece4d4; } }
:root[data-theme="dark"] .ayv-bm { --ayv-bm-page: rgba(236, 228, 212, .07); }
:root[data-theme="dark"] .ayv-bm-tab:not(.on) { background: #2f4a43; color: #ece4d4; }

/* The ribbon: satin, coral, with a swallow-tailed end that sits where you are reading. */
.ayv-bm-ribbon {
    position: absolute;
    top: 0;
    right: 9px;
    width: 13px;
    background: linear-gradient(90deg, #c94f38, var(--coral, #e2654c) 35%, #f08a73 55%, var(--coral, #e2654c) 75%, #c94f38);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    transition: height .25s cubic-bezier(.3, .7, .3, 1);
}

/* The thumb index: a half-round notch in the edge of the pages, with the initial of the section. */
.ayv-bm-tab {
    position: absolute;
    left: -1px;
    width: 18px;
    height: 22px;
    margin-top: -11px;
    display: grid;
    place-items: center;
    padding-right: 3px;
    border-radius: 0 11px 11px 0;
    background: var(--night, #0f3a33);
    color: var(--paper, #fbf6ec);
    font: 600 11px/1 var(--title, "Literata", Georgia, serif);
    transition: background-color .2s ease-out, width .2s ease-out;
}

.ayv-bm-tab.on { width: 22px; background: var(--coral, #e2654c); color: #1e2b2a; }


/* The name of the section, for a moment, beside its notch. */
.ayv-bm-name {
    position: absolute;
    right: calc(100% + 8px);
    margin-top: -14px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--ink, #1e2b2a);
    box-shadow: 0 4px 14px -6px rgba(15, 58, 51, .45);
    font: 700 13px/20px var(--text, "Andika", system-ui, sans-serif);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .15s ease-out, transform .15s ease-out;
}

.ayv-bm-name.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .ayv-bm-ribbon, .ayv-bm-tab, .ayv-bm-name { transition: none; }
}

/* In the plugin, on wide screens it is the scrollbar: the browser's goes, the edge is pressed and dragged. */
html.ayv-has-bm { scrollbar-width: none; }
html.ayv-has-bm::-webkit-scrollbar { width: 0; height: 0; }
.ayv-bm:not([hidden]) { pointer-events: auto; cursor: grab; touch-action: none; }
.ayv-bm.ayv-bm-drag { cursor: grabbing; }
.ayv-bm-tab { cursor: pointer; height: 24px; margin-top: -12px; }
.ayv-bm-tab:hover { width: 24px; }

/* The marks of the card's paths, once (they were inside each inline SVG). */

/* What the page had in style="" attributes. */
.st1 { --ink-day: #3A2A1C !important; --ink-night: #2A1E14 !important; }
.st2 { --d: .18 !important; }
.st3 { left: 16.22% !important; top: 36.65% !important; width: 19.71% !important; height: 40.87% !important; }
.st4 { left: 40.65% !important; top: 13.42% !important; width: 19.64% !important; height: 22.44% !important; --ink-day: #F4F1E8 !important; --ink-night: #E8E2D2 !important; }
.st5 { --d: .45 !important; }
.st6 { left: 11.85% !important; top: 84.29% !important; width: 5.03% !important; height: 13.41% !important; }
.st7 { left: 20.23% !important; top: 84.29% !important; width: 5.03% !important; height: 13.41% !important; }
.st8 { left: 28.62% !important; top: 84.29% !important; width: 5.03% !important; height: 13.41% !important; }
.st9 { left: 37.00% !important; top: 84.29% !important; width: 5.03% !important; height: 13.41% !important; }
.st10 { left: 45.39% !important; top: 84.29% !important; width: 5.03% !important; height: 13.41% !important; }
.st11 { --d: .6 !important; }
.st12 { left: 22.36% !important; top: 24.34% !important; width: 6.85% !important; height: 12.17% !important; }
.st13 { left: 74.24% !important; top: 57.18% !important; width: 17.13% !important; height: 30.44% !important; }
.st14 { --d: 1 !important; }
.st15 { --ink-day: #F0B43C !important; --ink-night: #F4C25A !important; }
.st16 { left: 35.24% !important; top: 45.95% !important; width: 18.01% !important; height: 39.36% !important; }
.st17 { left: 61.86% !important; top: 48.76% !important; width: 4.70% !important; height: 12.31% !important; }
.st18 { left: 67.74% !important; top: 48.11% !important; width: 4.65% !important; height: 12.26% !important; }
.st19 { left: 73.61% !important; top: 48.80% !important; width: 4.63% !important; height: 12.23% !important; }
.st20 { left: 80.69% !important; top: 57.41% !important; width: 17.83% !important; height: 31.70% !important; }
.st21 { --ink-day: #1E2B2A !important; --ink-night: #16201F !important; }
.st22 { left: 60.69% !important; top: 38.19% !important; width: 14.66% !important; height: 21.32% !important; --ink-day: #1E2B2A !important; --ink-night: #1E2B2A !important; }
.st23 { left: .93% !important; top: 54.87% !important; width: 17.88% !important; height: 39.38% !important; }
.st24 { left: 12.22% !important; top: 8.82% !important; width: 8.54% !important; height: 15.19% !important; }