/* public.css is the front door's own layout over hq.css's theme: the landing, the five pages and the legal two (spec 16.4). */
body.pub { overflow-x: hidden; }
nav.top { display: flex; align-items: center; gap: 1.1rem; max-width: 64rem; margin: 0 auto; padding: .8rem 1rem; font-size: .9rem; }
nav.top a { color: var(--dim); text-decoration: none; }
nav.top a:hover { color: var(--ink); }
/* A subpage says the way back in words beside the crest, home for whoever is looking (16.4.3). */
nav.top .back { margin-right: auto; color: var(--ink); }
nav.top .signin { border: 1px solid var(--line); border-radius: 1rem; padding: .1rem .8rem; color: var(--ink); }
nav.top .account { position: relative; }
nav.top .account summary { list-style: none; cursor: pointer; }
nav.top .account summary::-webkit-details-marker { display: none; }
nav.top .circle { width: 2rem; height: 2rem; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: inline-flex; align-items: center; justify-content: center; font: 700 .75rem/1 var(--read); }
nav.top .account .menu { position: absolute; right: 0; top: 2.5rem; z-index: 4; min-width: 15rem; background: var(--card); border: 1px solid var(--line); border-radius: .6rem; padding: .4rem 0; font-size: .85rem; }
/* The landing is home, so its banner has no name to go home by: the crest names it, and the links sit right. */
body.home nav.top { position: absolute; left: 0; right: 0; z-index: 3; justify-content: flex-end; }
main.wide { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem 2rem; }
main.legal { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1rem 2rem; }
main.legal li { color: var(--dim); margin: .35rem 0; }
main.legal p { color: var(--dim); }
main.legal b { color: var(--ink); }
.pub h1 { font: 500 clamp(1.8rem, 4.5vw, 2.4rem)/1.2 var(--display); margin: 1rem 0 .5rem; }
.pub h2 { font: 500 1.5rem var(--display); margin: 2.2rem 0 .8rem; }
.pub h3 { font: 500 1.2rem var(--display); margin: 1.8rem 0 .7rem; }
.pub .lede { color: var(--dim); margin: 0 0 1.2rem; }
.pub a { color: var(--gold); }
.cta { display: inline-block; background: var(--gold); color: var(--on-gold); border-radius: 1.2rem; padding: .65rem 1.3rem; font-weight: 700; text-decoration: none; }
.pub a.cta { color: var(--on-gold); }
.end { text-align: center; padding: 2.4rem 0 .6rem; }
.more { color: var(--dim); margin-top: 1.4rem; }

/* The landing: the castle fills the first screen behind the crest; the ways in wait below it. */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 5rem 1.2rem 3rem; overflow: hidden; }
.hero .art { position: absolute; inset: 0; z-index: 0; }
.hero .art img { width: 100%; height: 100%; object-fit: cover; opacity: .6; filter: saturate(.85); }
.hero .art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 75%, transparent) 0%, color-mix(in srgb, var(--bg) 30%, transparent) 42%, color-mix(in srgb, var(--bg) 70%, transparent) 75%, var(--bg) 100%); }
.hero > *:not(.art) { position: relative; z-index: 1; }
.hero .crest { width: min(190px, 42vw); margin-bottom: 1.2rem; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .6)); }
/* The title is two lines that never break: the longer, 12.95em, fits 320px at 6.6vw (16.4.1). */
.hero h1 { font-size: clamp(1.25rem, 6.6vw, 3rem); margin: 0; max-width: 40rem; }
.hero h1 span { display: block; white-space: nowrap; color: var(--gold); }
.hero h1 .line { color: inherit; }
.hero .pitch { color: var(--ink); max-width: 36rem; margin: 1.1rem 0 1.8rem; font-size: 1.05rem; }
.hero .free { margin-top: .7rem; font-size: .85rem; color: var(--dim); }
.hero .cue { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); color: var(--dim); font-size: 1.5rem; text-decoration: none; animation: drift 2.6s ease-in-out infinite; }
@keyframes drift { 50% { transform: translate(-50%, 6px); } }
.ways { text-align: center; }
.ways h2 { margin-top: .6rem; }
.branches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; text-align: left; }
.branches a { display: block; padding: .8rem .95rem; border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); border-radius: .8rem; background: var(--sheet); text-decoration: none; transition: opacity .5s, transform .5s, border-color .2s; }
html.fade .branches a:not(.seen) { opacity: 0; transform: translateY(.8rem); }
.branches a:hover { border-color: var(--gold); }
.branches b { display: block; color: var(--gold); font: 500 1.05rem var(--display); }
.branches span { display: block; color: var(--dim); font-size: .88rem; margin-top: .15rem; }

/* Why Ellor. */
.nothing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.6rem; }
.nothing div, .list3 div, .abils div { border-left: 3px solid var(--gold); padding: .1rem 0 .1rem .9rem; }
.nothing b { display: block; font: 500 1.2rem var(--display); }
.nothing span, .list3 span, .tiles span, .parts span { color: var(--dim); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.tiles div, .parts div { background: var(--sheet); border: 1px solid var(--line); border-radius: .8rem; padding: .7rem .85rem; }
.tiles b, .parts b { display: block; font: 500 1.05rem var(--display); color: var(--gold); }
.tiles span { font-size: .9rem; }
.vs { display: grid; grid-template-columns: auto 1fr 1fr; border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; font-size: .93rem; }
.vs > div { padding: .6rem .8rem; border-top: 1px solid var(--line); color: var(--dim); }
.vs .vh { border-top: 0; font-weight: 700; color: var(--mute); font-size: .85rem; }
.vs .vk { color: var(--ink); font-weight: 700; }
.vs .hq { background: color-mix(in srgb, var(--gold) 8%, var(--sheet)); color: var(--ink); }
.vs .vh.hq { color: var(--gold); }

/* How it works: the engine, then a turn walked step by step. */
.works { background: var(--sheet); border: 1px solid var(--line); border-radius: 1rem; padding: .4rem 1.2rem 1.4rem; }
.works h2 { margin-top: 1rem; }
.parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.parts div { background: var(--bg); }
.parts em { display: block; font-style: normal; font-size: .8rem; color: var(--mute); margin-bottom: .4rem; }
.parts span { font-size: .92rem; }
.list3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem 1.2rem; }
.list3 b { display: block; }
.list3 span { font-size: .92rem; }
.walk { max-width: 46rem; }
.tabs { display: flex; gap: .4rem; margin: 0 0 .6rem; }
.tabs button { flex: 1; background: var(--sheet); border: 1px solid var(--line); color: var(--dim); border-radius: 1rem; padding: .3rem .6rem; font: inherit; font-size: .88rem; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--on-gold); background: var(--gold); border-color: var(--gold); font-weight: 700; }
.said-in { background: color-mix(in srgb, var(--gold) 12%, var(--sheet)); border-right: 3px solid var(--gold); border-radius: .5rem; padding: .5rem .8rem; margin: .4rem 0 1rem; }
.said-in b { display: block; font-size: .8rem; color: var(--gold); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.steps li { display: grid; grid-template-columns: 2rem 1fr; gap: .7rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--sheet); opacity: .55; transition: opacity .3s, border-color .3s; }
.steps li.now { opacity: 1; border-color: var(--gold); }
.steps li.done { opacity: 1; }
.steps li.roll-step.done, .steps li.roll-step.now { border: 2px solid var(--gold); }
.steps li > i { font: 600 1.1rem var(--figures); color: var(--gold); font-style: normal; text-align: center; }
.steps b { font: 500 1.05rem var(--display); }
.steps .what { display: block; color: var(--mute); font-size: .85rem; }
.steps .out:not(:empty) { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.kv { margin: 0; font-size: .9rem; color: var(--dim); }
.kv b { font: 700 .8rem var(--read); color: var(--gold); margin-right: .2rem; }
.kv.cut { margin-top: .4rem; color: var(--bad); }
.prose { margin: 0; color: var(--ink); }
.bl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: center; font-size: .9rem; margin-bottom: .3rem; }
.bl .hx { grid-row: span 2; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1.6px solid var(--good); border-radius: .45rem; color: var(--good); font: 700 .95rem var(--figures); }
.bl .hx.lo { border-color: var(--bad); color: var(--bad); }
.bl .hx.roll { border-color: var(--mute); color: var(--mute); }
.bl .s { grid-column: 2; font: .8rem var(--mono); color: var(--dim); }
.again { margin-top: .6rem; background: none; border: 0; color: var(--gold); font: inherit; font-size: .9rem; cursor: pointer; padding: 0; }

/* How to play. */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.4rem; }
.st { display: flex; gap: .7rem; }
.st i { font: 600 1.1rem var(--figures); color: var(--gold); font-style: normal; min-width: 1rem; }
.st b { display: block; }
.st span { color: var(--dim); font-size: .95rem; }
.ex { background: var(--sheet); border-radius: .8rem; padding: .7rem .9rem; margin: 0 0 .8rem; }
.ex .lab { font-size: .8rem; color: var(--gold); font-weight: 700; margin: 0 0 .3rem; }
.ex .you { padding: .35rem .7rem; border-right: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--sheet)); }
.ex .why { margin: .4rem 0 0; color: var(--dim); font-size: .9rem; }

/* Classes and skills, drawn from the game's own data. */
.clist { display: grid; gap: .5rem; }
.cls { background: var(--sheet); border: 1px solid var(--line); border-radius: .8rem; padding: .7rem .9rem; }
.cls summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; list-style: none; }
.cls summary::-webkit-details-marker { display: none; }
.cls summary b { display: block; font: 500 1.15rem var(--display); color: var(--gold); }
.cls summary em { display: block; font-style: normal; color: var(--dim); font-size: .9rem; }
.cls .tag { font: 700 .85rem var(--figures); color: var(--mute); white-space: nowrap; }
.cls dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; margin: .8rem 0 0; font-size: .92rem; }
.cls dt { color: var(--mute); }
.cls dd { margin: 0; }
.cls h4 { font: 700 .85rem var(--read); color: var(--gold); margin: .9rem 0 .3rem; }
.feats { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; color: var(--dim); }
.feats i { font: 700 .85rem var(--figures); font-style: normal; color: var(--gold); margin-right: .4rem; }
.feats b { color: var(--ink); }
.pub .note { color: var(--mute); font-size: .9rem; margin-top: .8rem; }
.abils { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem 1.2rem; }
.abils b { font: 500 1.05rem var(--display); }
.abils .ab { font: 700 .8rem var(--figures); color: var(--mute); margin-left: .3rem; }
.abils span:last-child { display: block; color: var(--dim); font-size: .9rem; }
.skills { width: 100%; border-collapse: collapse; font-size: .92rem; }
.skills th { text-align: left; color: var(--mute); font-weight: 700; font-size: .8rem; padding: .3rem .5rem; border-bottom: 1px solid var(--line); }
.skills td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--dim); }
.skills td:first-child { color: var(--ink); white-space: nowrap; }
.skills td:nth-child(2) { font: 700 .85rem var(--figures); color: var(--gold); }

/* Questions: one fold-open answer each. */
main.wide > details { border-top: 1px solid var(--line); padding: .7rem 0; }
main.wide > details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; }
main.wide > details summary::-webkit-details-marker { display: none; }
main.wide > details summary::after { content: '+'; color: var(--mute); }
main.wide > details[open] summary::after { content: '−'; }
main.wide > details p { margin: .4rem 0 0; color: var(--dim); }

.pubfoot { max-width: 60rem; margin: 2rem auto 0; padding: 1rem 1rem 2rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--mute); }
.pubfoot p { margin: .3rem 0; }
.pubfoot .links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.pubfoot a { color: var(--dim); text-decoration: none; }
.pubfoot a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .branches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parts { grid-template-columns: 1fr; }
  .list3, .abils { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  nav.top .page { display: none; }
  .nothing, .grid, .list3, .abils { grid-template-columns: 1fr; }
  .vs { grid-template-columns: 1fr 1fr; }
  .vs .vk { grid-column: 1 / -1; padding-bottom: 0; border-top: 1px solid var(--line); }
  .vs .vk + div, .vs .vk + div + div { border-top: 0; }
  .vs .vh:first-child { display: none; }
  .skills td:first-child { white-space: normal; }
}
@media (max-width: 420px) { .branches, .parts, .tiles { grid-template-columns: 1fr; } }