/* ═══════════════════════════════════════
   WoGL — World of GL
   wogl.io | worldofgl.com | mundogl.com
   hello@wogl.io | hola@mundogl.com

   Proprietary. All rights reserved.
   ═══════════════════════════════════════ */

/* Academy additions on top of home.css and clase.css: the article for search engines (written into every page by
   npm run seo), the houses bar as plain links until the nav replaces it, the home's school, and the /learn and section
   views. */
[hidden] { display: none !important; }

/* ── The home's hero: the ten sections' pieces take turns on the right (home.js · heroCycle), crossfading; a fade
   joins them to the dark behind the words, and the placard names the section that runs. On a phone the piece sits in
   the upper part, above the words. ── */
.ahero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(68px + var(--s8)) 0 clamp(64px, 12vh, 120px); overflow: hidden; }
.ahero-art { position: absolute; top: 0; bottom: 0; right: 0; left: 36%; z-index: 0; background: #000;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.ahero-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease); }
.ahero-layer.on { opacity: 1; }
.ahero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 4, 3, .86), rgba(5, 4, 3, .45) 48%, rgba(5, 4, 3, 0) 78%), linear-gradient(to top, rgba(5, 4, 3, .92), rgba(5, 4, 3, 0) 58%); }
.ahero-in { position: relative; z-index: 2; }
.ahero-title { margin-top: var(--s5); font: 300 clamp(40px, 7vw, 104px)/.98 var(--sans); letter-spacing: -.035em; color: var(--cream); }
.ahero-lead { margin-top: var(--s5); max-width: 560px; }
.ahero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-top: var(--s6); }
.ahero-placard { left: auto; right: 33px; text-align: right; }
/* A label over a live piece: a pulsing dot, on dark glass so it reads over any light. */
.kicker.live { display: inline-flex; align-items: center; gap: 10px; }
.kicker.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 1.6s ease-in-out infinite; }
.kicker.glass { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(232, 200, 154, .3);
  background: rgba(5, 4, 3, .58); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); }
@media (max-width: 760px) {
  .ahero-art { left: 0; bottom: 42%; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .ahero-layer { transition: none; } .kicker.live i { animation: none; } }

/* ── The houses bar: plain links for a page read without scripts; with them, the new nav replaces it at once ── */
.houses .wh-bar { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: 14px; color: var(--muted); }
.houses .wh-bar .wh-rooms, .houses .wh-bar .wh-trigger i { display: none; }
.js .houses .wh-bar { visibility: hidden; }

/* ── The article: the same words a search engine reads, in the classroom's type ── */
.seo-page { max-width: 760px; color: rgba(239, 230, 216, .78); font: 300 18px/1.75 var(--sans); }
.seo-page h1 { font: 300 clamp(38px, 4.6vw, 60px)/1.04 var(--sans); letter-spacing: -.025em; color: var(--cream); }
.seo-page h2 { margin-top: var(--s8); font: 400 clamp(22px, 2.2vw, 28px)/1.25 var(--sans); color: var(--cream); }
.seo-page p { margin-top: var(--s4); }
.seo-page .seo-lead { margin-top: var(--lead-gap); font-size: clamp(19px, 1.9vw, 22px); line-height: 1.55; color: var(--text); }
.seo-page .seo-kicker { margin: 0 0 var(--s3); font: 500 11px/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.seo-page .seo-crumbs { margin-bottom: var(--s6); font: 400 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--quiet); }
.seo-page .seo-crumbs a { color: var(--muted); }
.seo-page a { color: var(--gold); transition: color .3s; }
.seo-page a:hover, .seo-page a:focus-visible { color: var(--cream); }
.seo-page code { font: 400 .84em/1 var(--mono); color: #ffe2b4; background: rgba(232, 200, 154, .1); border: 1px solid rgba(232, 200, 154, .16); border-radius: 6px; padding: 3px 6px; }
.seo-page em { color: var(--gold); font-style: normal; }
/* A catalogue reads like the lesson index: number, name, then its line. */
.seo-page .seo-list { list-style: none; margin-top: var(--s5); counter-reset: seo; border-top: 1px solid var(--line); }
.seo-page .seo-list li { counter-increment: seo; display: grid; grid-template-columns: 52px 1fr; column-gap: var(--s4); row-gap: var(--s1); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.seo-page .seo-list li::before { content: counter(seo, decimal-leading-zero); grid-row: 1 / span 2; padding-top: 6px; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; color: var(--quiet); }
.seo-page .seo-list li a { font-size: 20px; font-weight: 400; line-height: 1.35; color: var(--cream); }
.seo-page .seo-list li a:hover { color: var(--gold); }
.seo-page .seo-note { grid-column: 2; font-size: 16px; line-height: 1.55; color: var(--muted); }
.seo-page .seo-list--plain li { grid-template-columns: 1fr; }
.seo-page .seo-list--plain li::before { content: none; }
.seo-page .seo-list--plain .seo-note { grid-column: 1; }
.seo-page .seo-vibe { margin-top: var(--s5); color: var(--text); }
.seo-page .seo-code { margin-top: var(--s4); padding: var(--card-pad); overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); background: #070605; font: 400 13px/1.7 var(--mono); color: #c7b8a5; }
.seo-page .seo-pager { display: flex; justify-content: space-between; gap: var(--s4); margin-top: var(--s7); font-size: 16px; }
.seo-page .seo-next { margin-top: var(--s6); }
/* On a phone a numbered list keeps a narrower number column; a plain list (no numbers) keeps its single column. */
@media (max-width: 600px) { .seo-page { font-size: 16.5px; } .seo-page .seo-list:not(.seo-list--plain) li { grid-template-columns: 40px 1fr; } .seo-page .seo-pager { flex-direction: column; } }

/* On the home the article is its own section, between the questions and the first lesson, read as text: the school
   above is the catalogue. */
.seo-sec .seo-page { margin: 0 auto; }

/* ── The school (index.html · npm run seo): each section a card with its piece, its line, its lessons and its way in,
   on home.css's catalogue grid. The last section, alone in its row, closes the grid across its whole width. ── */
.school .school-sec { grid-template-rows: auto auto 1fr auto; }
.school .sec-art { position: relative; }
.school .sec-art canvas { position: absolute; inset: 0; }
.school .sec-txt h3 { font: 400 21px/1.2 var(--sans); color: var(--cream); }
.school .sec-txt h3 a { transition: color .3s; }
.school .sec-txt h3 a:hover, .school .sec-txt h3 a:focus-visible { color: var(--gold); }
.school-lessons { list-style: none; display: grid; align-content: start; gap: 1px; padding: var(--s3) calc(var(--card-pad) - 10px) 0; }
.school-lessons a { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; padding: 7px 10px; border-radius: 8px; font-size: 14.5px; line-height: 1.35; color: var(--text); transition: background .2s, color .2s; }
.school-lessons a span { font: 500 10.5px/1 var(--mono); color: var(--quiet); }
.school-lessons a:hover, .school-lessons a:focus-visible { background: rgba(232, 200, 154, .08); color: var(--gold); }
.school-lessons a:hover span, .school-lessons a:focus-visible span { color: var(--gold); }
.school .sec-open { padding-top: var(--s4); }
.school .sec-open:hover i { transform: translateX(5px); }
.cat.school .sec:last-child:nth-child(3n+1) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
.cat.school .sec:last-child:nth-child(3n+1) .sec-art { grid-row: 1 / 4; }
.cat.school .sec:last-child:nth-child(3n+1) .sec-txt { padding: var(--s6) var(--s6) var(--s1); }
.cat.school .sec:last-child:nth-child(3n+1) .school-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: calc(var(--s6) - 10px); }
.cat.school .sec:last-child:nth-child(3n+1) .sec-open { padding-inline: var(--s6); }
@media (max-width: 1080px) {
  .cat.school .sec:last-child:nth-child(3n+1) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
  .cat.school .sec:last-child:nth-child(3n+1) .sec-art { grid-row: auto; }
  .cat.school .sec:last-child:nth-child(3n+1) .sec-txt { padding: var(--card-pad) var(--card-pad) var(--s1); }
  .cat.school .sec:last-child:nth-child(3n+1) .school-lessons { padding-inline: calc(var(--card-pad) - 10px); }
  .cat.school .sec:last-child:nth-child(3n+1) .sec-open { padding-inline: var(--card-pad); }
}
/* On a phone the piece sits small beside the section's name and line; its lessons follow at full width. */
@media (max-width: 640px) {
  .cat.school .sec, .cat.school .sec:last-child:nth-child(3n+1) { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .cat.school .sec .sec-art, .cat.school .sec:last-child:nth-child(3n+1) .sec-art { grid-column: 1; grid-row: 1; min-height: 112px; }
  .cat.school .sec .sec-txt, .cat.school .sec:last-child:nth-child(3n+1) .sec-txt { grid-column: 2; grid-row: 1; padding: var(--s3) var(--s4); }
  .cat.school .sec-txt h3 { font-size: 17px; }
  .cat.school .school-lessons, .cat.school .sec:last-child:nth-child(3n+1) .school-lessons { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); padding: var(--s2) var(--s2) 0; border-top: 1px solid var(--line); }
  .cat.school .sec-open, .cat.school .sec:last-child:nth-child(3n+1) .sec-open { grid-column: 1 / -1; padding: var(--s3) var(--s4) var(--s4); }
}

/* ── The classroom ── */
/* The lesson is drawn inside #lessonView; its blocks keep the column of the lesson, its hero the full width. */
#lessonView { display: contents; }
#lessonView > :not(.lhero) { max-width: 920px; margin-left: auto; margin-right: auto; }
/* A lesson shows itself: its article stays in the page for crawlers and for a page read without scripts. */
.js .lesson-page .seo-page[data-seo-kind="lesson"] { display: none; }
/* /learn and a section: the hero carries the section's number and the way in; the article below is the page. */
.ov-hero .btn { margin-top: var(--content-gap); }
/* In the classroom the article shares the lesson's column (920 px), so it starts on the hero's edge; its paragraphs
   keep a reading measure. */
.lesson .seo-page { max-width: 920px; margin-top: var(--s2); padding-bottom: var(--s5); }
.lesson .seo-page > p, .lesson .seo-page > h1, .lesson .seo-page > h2 { max-width: 760px; }
.lesson .seo-page .seo-crumbs { margin-top: 0; }

/* ── Bug report (wogl-bug-report.js, shared with the museum), gold variant: the ladybug in the footer and the dialog,
   its glow, the field focus and the sent message. The widget injects its own styles later in the head, so each rule
   is one step more specific (html …). The error line keeps its warning red. ── */
html .wogl-bug-ladybug { filter: drop-shadow(0 0 7px rgba(232, 200, 154, .38)); }
html .wogl-bug-wing { border-color: rgba(232, 200, 154, .5);
  background: radial-gradient(circle at 27% 35%, #1b130c 0 9%, transparent 10%), radial-gradient(circle at 72% 34%, #1b130c 0 9%, transparent 10%),
    radial-gradient(circle at 28% 72%, #1b130c 0 8%, transparent 9%), radial-gradient(circle at 72% 70%, #1b130c 0 8%, transparent 9%),
    linear-gradient(90deg, #f1d9ae 0 47%, #1b130c 48% 52%, #d4a574 53% 100%);
  box-shadow: inset 0 2px 5px rgba(255, 244, 226, .35), 0 0 10px rgba(232, 200, 154, .25); }
html .wogl-bug-dialog { background: rgba(9, 7, 5, .97); box-shadow: 0 32px 100px rgba(0, 0, 0, .76), 0 0 70px rgba(212, 165, 116, .12); }
html .wogl-bug-panel { background: radial-gradient(100% 90% at 90% 0, rgba(212, 165, 116, .14), transparent 64%), linear-gradient(145deg, rgba(22, 16, 11, .98), rgba(7, 5, 4, .99)); }
html .wogl-bug-form textarea { background: rgba(5, 4, 3, .78); }
html .wogl-bug-form textarea:focus { border-color: rgba(232, 200, 154, .65); box-shadow: 0 0 0 3px rgba(232, 200, 154, .08), 0 0 30px rgba(232, 200, 154, .07); }
html .wogl-bug-status[data-state="success"] { color: var(--gold); }

/* ── Fuel (fuel.js): a gold pill with a drop under the bug; its dialog matches the bug's ── */
/* bug and fuel side by side, keeping the footer on one line */
.foot-help { display: inline-flex; align-items: center; gap: var(--s2); }
.foot .foot-line { align-items: center; }
.fuel-trigger { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(232, 200, 154, .2); border-radius: 999px;
  background: rgba(232, 200, 154, .025); color: var(--gold); cursor: pointer; font: 600 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.fuel-trigger:hover, .fuel-trigger:focus-visible { outline: none; border-color: rgba(232, 200, 154, .52); background: rgba(232, 200, 154, .075); transform: translateY(-1px); }
.fuel-drop { width: 15px; height: 18px; flex: none; filter: drop-shadow(0 0 7px rgba(232, 200, 154, .38)); overflow: visible; }
.fuel-glint { stroke-dasharray: 9; stroke-dashoffset: 9; animation: fuel-glint 4.8s ease-in-out infinite; }
@keyframes fuel-glint { 0%, 55% { stroke-dashoffset: 9; opacity: 0; } 70% { opacity: .9; } 85%, 100% { stroke-dashoffset: -9; opacity: 0; } }
@media (max-width: 560px) { .fuel-trigger { width: 44px; padding: 0; } .fuel-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .fuel-glint { animation: none; } }
.fuel-dialog { width: min(560px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); margin: auto; padding: 0; overflow: auto; border: 1px solid rgba(232, 200, 154, .28); border-radius: 28px;
  background: rgba(9, 7, 5, .97); color: var(--text); box-shadow: 0 32px 100px rgba(0, 0, 0, .76), 0 0 70px rgba(212, 165, 116, .12); }
.fuel-dialog::backdrop { background: rgba(3, 2, 1, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.fuel-panel { position: relative; background: linear-gradient(145deg, rgba(22, 16, 11, .98), rgba(7, 5, 4, .99)); }
.fuel-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 42px; height: 42px; border: 1px solid rgba(232, 200, 154, .25); border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: rgba(240, 232, 220, .8); font: 300 25px/1 var(--sans); cursor: pointer; }
.fuel-close:hover, .fuel-close:focus-visible { outline: none; color: var(--cream); border-color: rgba(232, 200, 154, .6); }
/* route over the live scene: five equal columns, the line runs from 10% to 90%, gold up to the next stop (50%) */
.fuel-art { position: relative; height: 230px; overflow: hidden; border-bottom: 1px solid var(--line); }
.fuel-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fuel-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(9, 7, 5, .85)); pointer-events: none; }
.fuel-next { position: absolute; z-index: 1; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(232, 200, 154, .35);
  background: rgba(0, 0, 0, .5); font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.fuel-next i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 1.6s ease-in-out infinite; }
.fuel-next b { font-weight: 500; color: var(--gold); }
.fuel-route { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 18px; display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; }
.fuel-route::before, .fuel-route::after { content: ''; position: absolute; top: 5px; height: 1px; }
.fuel-route::before { left: 10%; right: 10%; background: repeating-linear-gradient(90deg, rgba(232, 200, 154, .35) 0 4px, transparent 4px 9px); }
.fuel-route::after { left: 10%; width: 40%; height: 2px; top: 4.5px; background: linear-gradient(90deg, var(--gold-2), var(--gold) 40%, #fff4e2 50%, var(--gold) 60%) 0 0 / 200% 100%;
  box-shadow: 0 0 10px rgba(232, 200, 154, .6); animation: fuel-flow 2.4s linear infinite; }
@keyframes fuel-flow { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.fuel-route li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; }
.fuel-route i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(232, 200, 154, .5); background: #0b0806; }
.fuel-route .done i { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 10px rgba(232, 200, 154, .7); }
.fuel-route .next i { border: 2px solid var(--gold); background: #0b0806; box-shadow: 0 0 0 4px rgba(232, 200, 154, .15); animation: fuel-ring 1.8s ease-in-out infinite; }
@keyframes fuel-ring { 50% { box-shadow: 0 0 0 7px rgba(232, 200, 154, .05); } }
.fuel-route span { font: 500 9px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.fuel-route .done span { color: var(--cream); }
.fuel-route .next span { color: var(--gold); }
.fuel-body { padding: var(--s6) clamp(24px, 5vw, 44px) clamp(24px, 5vw, 40px); }
.fuel-k { display: flex; align-items: center; gap: var(--s2); font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.fuel-k .fuel-drop { width: 12px; height: 15px; }
.fuel-title { margin-top: var(--s3); font: 300 clamp(36px, 8vw, 54px)/.98 var(--sans); letter-spacing: -.035em; color: var(--cream); }
.fuel-lead { margin-top: var(--s4); font-size: 17px; line-height: 1.55; color: var(--muted); }
.fuel-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: var(--s5); border: 1px solid rgba(232, 200, 154, .5); border-radius: 999px;
  background: linear-gradient(135deg, #efd5ab, #cda878); color: #0b0708; font: 700 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; transition: filter .2s, transform .2s; }
a.fuel-go:hover { filter: brightness(1.06); transform: translateY(-1px); }
/* secondary action: hire us */
.fuel-hire { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.fuel-hire span { font-size: 15px; color: var(--muted); }
.fuel-hire b { font-weight: 400; color: var(--cream); }
.fuel-hire a { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.fuel-hire a:hover { color: var(--cream); }
@media (max-width: 560px) { .fuel-art { height: 190px; } .fuel-route span { display: none; } }
@media (prefers-reduced-motion: reduce) { .fuel-route::after, .fuel-route .next i, .fuel-next i { animation: none; } }