/* oethus.com — base styles (Claude-owned) */
/* Palette source: _docs/steagus-palette-system-v1.0.md — oethus.com section */
:root {
    --surface: #17130F;
    --surface-container: #241E17;
    --text: #EDE3D3;
    --text-muted: #B3A78E;
    --accent: #C2792F;
    --accent-secondary: #6C55A3;
    --border: #3A3226;
    --system-voice: #3b6d11;
    --system-voice-bg: #eaf3de;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Georgia, serif;
    line-height: 1.6;
}

.site-header {
    padding: 24px 20px 0;
    text-align: center;
}

.site-header .wordmark {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: 28px;
    letter-spacing: .06em;
    color: var(--text);
    text-decoration: none;
}

main {
    max-width: 640px;
    margin: 0 auto;
    padding: 0px 20px 60px;
    text-align: center;
}

.hero-art {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: linear-gradient(160deg, var(--surface-container), var(--surface));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
    letter-spacing: .05em;
    margin-bottom: 28px;
}

.tagline {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--text);
    margin: 0 0 16px;
}

.teaser {
    font-size: 15px;
    color: var(--text-muted);
    max-width: 52ch;
    margin: 0 auto 32px;
}

/* rotating quote pill */
#oethus-quote {
    --quote-color: #C2792F;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;

    /* ← vertical centering */
    align-items: center;

    /* horizontal centering */
    gap: 6px;
    align-items: center;
    padding: 16px 22px;
    border-radius: 10px;
    background: var(--surface-container);
    border: 1px solid var(--quote-color);
    margin: 0 auto 32px;
    max-width: 480px;
    min-height: 150px;
    transition: opacity .25s ease, border-color .25s ease;
}

#oethus-quote.is-fading {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce){
    #oethus-quote {
        transition: none;
    }
}

.quote-category {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--quote-color);
}

.quote-text {
    margin: 0;
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-style: italic;
    font-size: 16px;
    color: var(--text);
}

.status-line {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 32px;
}

/* ---- essay page (e.g. setting-the-stage.html) ----
   oethus.com is a single splash page by design, so interior pages like
   this one get a small back-link instead of a persistent nav bar —
   keeps the minimal feel while still being navigable. Body copy uses
   the site's existing default serif (Georgia) rather than introducing
   a new font, unlike games.steagus.com's essay which pairs a separate
   heading/body font. */
/* Ghost button, violet rather than the amber --accent, so it stays
   clearly secondary to the signup CTA on the splash page. Sits 10px
   off the viewport edge — it lives outside <main>, so it is not
   constrained by main's 640px centered column. Appears twice on the
   essay: once above the text, once below it, so a reader who has just
   finished the last paragraph doesn't have to scroll back up to leave. */
.back-link {
    display: inline-block;
    margin-left: 10px;
    padding: 7px 15px;
    border: 1px solid var(--accent-secondary);
    border-radius: 6px;
    color: var(--accent-secondary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.back-link:hover {
    background: var(--accent-secondary);
    color: #17130F;
}
.back-link--top {
    margin-top: 20px;
    margin-bottom: 4px;
}
.back-link--bottom {
    margin-bottom: 44px;
}
@media (prefers-reduced-motion: reduce){
    .back-link { transition: none; }
}
.essay {
    text-align: left;
}
.essay h1 {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--text);
    margin: 8px 0 28px;
}
.essay p {
    font-size: 16px;
    color: var(--text);
    margin: 0 0 20px;
}
.essay .signoff {
    margin-top: 32px;
    font-style: italic;
    color: var(--text-muted);
}

.essay-link {
    display: inline-block;
    color: var(--accent-secondary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--accent-secondary);
    margin-bottom: 40px;
}

.essay-link:hover {
    opacity: .8;
}

.signup-lede {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 12px;
}

.signup-btn {
    display: inline-block;
    background: var(--accent);
    color: #17130F;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 40px;
}

.signup-btn:hover {
    opacity: .9;
}

.site-footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid var(--border);
}

/* Links above the social icons — forum before socials. Sizing matches
   the steagus.com Customizer values (18px / 400 / 0.5px). */
.site-footer .footer-links {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.site-footer .footer-links a {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--accent-secondary);
    text-decoration: none;
}

.site-footer .footer-links a:hover {
    text-decoration: underline;
}

.site-footer .social-links {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 10px;
}

.site-footer .social-links a {
    color: var(--text-muted);
    font-size: 12.5px;
    text-decoration: none;
}

.site-footer .social-links a:hover {
    color: var(--text);
}

.site-footer .copyright {
    font-size: 11px;
    color: var(--text-muted);
}

/* ============================================================
   3d6 EASTER EGG  —  spec: _docs/dice-easter-egg-spec-v1.0.md
   Oethus variant: no button, no label. One of the four inscription
   corners is *slightly* brighter and thicker, and which one changes
   every reload. Myst/Riven-style: found, not advertised.
   ============================================================ */

/* The live corner. Deliberately restrained — a visitor should half-notice
   it, not be pointed at it. Border goes 2px -> 3px, colour lifts toward
   the cream text, and a slow ember pulse matches the frame's existing
   gold-ember rhythm rather than introducing a new tempo. */
.ins-corner{
  transition: border-color .5s ease, filter .5s ease;
}
.ins-corner.egg-live{
  border-color: #E8C98A;
  filter: drop-shadow(0 0 6px rgba(226, 178, 106, .75));
  cursor: pointer;
  animation: egg-breathe 4.2s ease-in-out infinite;
}
@keyframes egg-breathe{
  0%,100%{ filter: drop-shadow(0 0 5px rgba(226,178,106,.55)); }
  50%    { filter: drop-shadow(0 0 11px rgba(226,178,106,.95)); }
}
/* 18px of visible bracket is a small target, especially on touch. This
   pads the hit area out to 40px without changing what is drawn. */
.ins-corner.egg-live::after{
  content: "";
  position: absolute;
  inset: -12px;
}
.ins-corner.egg-live:active{ transform: scale(.94); }

/* ---- dice ---- */
/* position:fixed so a roll stays put while the page scrolls — the dice
   persist until dismissed, per spec, and should not drift off with the
   document. */
.egg-die{
  /* Anchored at the viewport origin: the simulator writes position into
     `transform`, not left/top, so the compositor handles every die on one
     property. No CSS animation or transition here — the solver owns motion
     entirely, and anything easing `transform` would fight it. */
  position: fixed;
  top: 0; left: 0;
  width: 46px; height: 46px;
  /* Without a perspective the preserve-3d cube projects orthographically and
     reads as a flat pip tile rather than a die. */
  perspective: 320px;
  z-index: 9000;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}
.egg-die.dragging{ cursor: grabbing; z-index: 9100; }

.egg-d6{
  width: 46px; height: 46px;
  position: relative;
  transform-style: preserve-3d;
  /* No transition: rotation is integrated from angular velocity every frame.
     Easing it would smear the solver's output and reintroduce the snap. */
}
.egg-d6 .f{
  position: absolute; inset: 0;
  border-radius: 8px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  padding: 6px;
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1.5px rgba(23,19,15,.55);
}
.egg-d6 .f1{ transform: rotateY(0deg)   translateZ(23px); }
.egg-d6 .f2{ transform: rotateX(90deg)  translateZ(23px); }
.egg-d6 .f3{ transform: rotateY(90deg)  translateZ(23px); }
.egg-d6 .f4{ transform: rotateY(-90deg) translateZ(23px); }
.egg-d6 .f5{ transform: rotateX(-90deg) translateZ(23px); }
.egg-d6 .f6{ transform: rotateY(180deg) translateZ(23px); }
.egg-pip{
  width: 7px; height: 7px;
  border-radius: 50%;
  place-self: center;
  background: #17130F;               /* --surface: pips read on every one of the 18 */
}

/* ---- dismiss ---- */
/* A real control, not a timeout — the spec is explicit that dice never
   auto-fade. Only appears once something is on the table. */
.egg-dismiss{
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 9200;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #EDE3D3;
  background: rgba(36,30,23,.92);
  border: 1px solid #C2792F;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.egg-dismiss.show{ opacity: 1; transform: none; pointer-events: auto; }
.egg-dismiss:hover{ background: #C2792F; color: #17130F; }

/* ---- primary success: three sixes ---- */
/* "Embers of Oethus flare out and sparkle." Uses the site's own amber and
   violet accents so it reads as this world's magic, not generic confetti. */
.egg-ember{
  position: fixed;
  width: 7px; height: 7px;
  border-radius: 50%;
  z-index: 9050;
  pointer-events: none;
  animation: egg-ember-fly var(--dur, 1.5s) cubic-bezier(.15,.6,.4,1) forwards;
}
@keyframes egg-ember-fly{
  0%  { transform: translate(0,0) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100%{ transform: translate(var(--dx), var(--dy)) scale(.25); opacity: 0; }
}
.egg-flare{
  position: fixed; inset: 0;
  z-index: 9040;
  pointer-events: none;
  background: radial-gradient(circle at var(--fx) var(--fy),
              rgba(226,178,106,.55), rgba(108,85,163,.22) 38%, transparent 68%);
  animation: egg-flare-out 1.5s ease-out forwards;
}
@keyframes egg-flare-out{ from{ opacity: 1 } to{ opacity: 0 } }

/* ---- primary failure: three ones ---- */
/* The whole page dims and comes back. No text — the world simply turns
   its back on you for five seconds. */
.egg-dim{
  position: fixed; inset: 0;
  z-index: 9030;
  pointer-events: none;
  background: #050403;
  opacity: 0;
  animation: egg-dim-cycle 5s ease-in-out forwards;
}
@keyframes egg-dim-cycle{
  0%  { opacity: 0 }
  12% { opacity: .93 }
  80% { opacity: .93 }
  100%{ opacity: 0 }
}

@media (prefers-reduced-motion: reduce){
  .ins-corner.egg-live{ animation: none; }
  /* The dice themselves are simulated, not animated — there is no CSS
     animation to disable, and freezing the solver would leave dice stranded
     mid-air. The decorative burst is what gets suppressed. */
  .egg-ember, .egg-flare{ display: none; }
  .egg-dim{ animation-duration: 5s; }
}

/* ---- outcome states on the dice that caused them ----
   Previously the payoff happened to the page, not to the dice, so there was
   no way to tell which three had rolled it. Both outcomes now mark their
   own dice. */

/* Primary failure: the guilty dice sit ABOVE the dim overlay (z 9030) and
   keep their light while everything else goes dark — so the roll that did
   it is the one thing still visible. */
.egg-die.lit{
  z-index: 9060;
  filter: drop-shadow(0 0 14px rgba(226, 178, 106, .85));
}
/* ...then crumble once the world comes back. Ash, not an explosion: it
   drifts up slightly, desaturates, and is gone. */
.egg-die.disintegrate{
  animation: egg-crumble 1.15s ease-in forwards;
  pointer-events: none;
}
@keyframes egg-crumble{
  0%  { transform: none; opacity: 1; filter: brightness(1) blur(0); }
  22% { transform: translateY(-6px) scale(1.06); filter: brightness(1.8) blur(0); }
  100%{ transform: translateY(-46px) scale(.28) rotate(24deg);
        opacity: 0; filter: brightness(.4) blur(3px); }
}

/* Primary success: the winning dice hold a glow for six seconds, then it
   fades and they carry on as ordinary dice. */
.egg-die.blessed{ animation: egg-blessed 6s ease-out forwards; }
@keyframes egg-blessed{
  0%  { filter: drop-shadow(0 0 20px rgba(226,178,106,1)) drop-shadow(0 0 34px rgba(108,85,163,.8)); }
  70% { filter: drop-shadow(0 0 16px rgba(226,178,106,.9)) drop-shadow(0 0 26px rgba(108,85,163,.6)); }
  100%{ filter: none; }
}

@media (prefers-reduced-motion: reduce){
  .egg-die.disintegrate{ animation-duration: .4s; }
  .egg-die.blessed{ animation: none; }
}

/* ---- the ledger ----
   Persistent tally of rolls / primary successes / primary failures. The
   point is the mystery: a first-time roller sees "Primary Successes 0"
   with no explanation of what that means or how to get one, and the only
   way to find out is to keep rolling. The count surviving a page close is
   what makes coming back worth it.

   Styled as an inscribed tablet to match .ins-frame — corner brackets,
   amber rule, Cinzel numerals — so it reads as part of the world rather
   than a UI panel bolted on. */
.egg-ledger{
  position: fixed;
  left: 18px; bottom: 18px;
  z-index: 9200;
  min-width: 208px;
  background: rgba(26, 21, 16, .94);
  border: 1px solid var(--border, #3A3226);
  border-radius: 4px;
  padding: 13px 16px 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
  backdrop-filter: blur(3px);
}
.egg-ledger.show{ opacity: 1; transform: none; }

/* Corner brackets, quoting the hero inscription's own frame. */
.egg-ledger::before,
.egg-ledger::after{
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  border-color: var(--accent, #C2792F);
  border-style: solid;
  opacity: .75;
}
.egg-ledger::before{ top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.egg-ledger::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* Close control, upper-left of the tablet. Non-destructive — it hides the
   panel, the tally itself is untouched — so one click is right and no
   confirm is needed.

   pointer-events MUST be re-enabled here. The panel itself is set to
   `none` so it never blocks the page beneath it, and `.show` does not undo
   that — which meant this button inherited click-through and no real click
   could ever reach it. (A scripted .click() still fired, so the original
   test passed while the control was dead in a browser.)

   Sized for a fingertip rather than a cursor: it is on a phone that the
   tally takes a real bite out of the viewport, so it is on a phone that
   this gets used. */
.egg-ledger-close{
  position: absolute;
  top: 4px; left: 4px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted, #B3A78E);
  cursor: pointer;
  opacity: .65;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s ease, color .2s ease, background .2s ease;
}
.egg-ledger-close:hover,
.egg-ledger-close:focus-visible,
.egg-ledger-close:active{
  opacity: 1;
  color: var(--accent, #C2792F);
  background: rgba(194,121,47,.18);
}

.egg-ledger h3{
  font-family: 'Cinzel', Georgia, serif;
  padding-left: 26px;        /* clear the close button */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent, #C2792F);
  margin: 0 0 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(194,121,47,.28);
  text-align: center;
}
.egg-ledger dl{
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 14px;
  align-items: baseline;
}
.egg-ledger dt{
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--text-muted, #B3A78E);
}
.egg-ledger dd{
  margin: 0;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text, #EDE3D3);
  transition: color .3s ease;
}
.egg-ledger dd.is-success{ color: #E2B26A; }
.egg-ledger dd.is-failure{ color: #9A7BC8; }

/* A number that just changed gets one pulse — enough to notice a success
   was recorded without a popup explaining it. */
@keyframes egg-tally{
  0%  { transform: scale(1);   text-shadow: none; }
  35% { transform: scale(1.32); text-shadow: 0 0 14px currentColor; }
  100%{ transform: scale(1);   text-shadow: none; }
}
.egg-ledger dd.bumped{ animation: egg-tally .7s ease-out; }

@media (max-width: 560px){
  /* Stack above the dismiss button rather than fighting it for the corner. */
  .egg-ledger{ left: 12px; right: 12px; bottom: 70px; min-width: 0; }
}
@media (prefers-reduced-motion: reduce){
  .egg-ledger dd.bumped{ animation: none; }
}