/* ============================================================
   The Reality of Human Existence.
   A proof in Euclid's order, on the site's ground: gold,
   parchment, the Fell serifs. Numbered propositions carry the
   argument; one construction (Elements I.1) draws itself in the
   hero and a dependency map shows how the ten hang together.
   Scoped to #page-reality.
   ============================================================ */

#page-reality {
  --rl-wide: min(var(--shell), 100% - 2 * var(--gutter));
  overflow-x: clip;
}
#page-reality em { color: var(--gold); font-style: italic; }
#page-reality h1,
#page-reality h2 { font-family: var(--serif-display); font-weight: 400; color: var(--parchment); line-height: 1.08; letter-spacing: .005em; }
#page-reality h3 { font-family: var(--serif-display); font-weight: 400; color: var(--parchment); line-height: 1.15; }
#page-reality a:not(.button) { color: var(--gold); text-decoration-color: var(--gold-a35); text-underline-offset: .18em; }
#page-reality a:not(.button):hover { color: var(--gold-bright); text-decoration-color: currentColor; }
#page-reality .rl-cite { white-space: nowrap; font-size: .92em; font-style: normal; }
#page-reality .rl-eyebrow,
#page-reality .rl-tag {
  margin: 0 0 .9rem;
  font-family: var(--serif-head);
  font-size: var(--t-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
#page-reality .rl-sub { max-width: var(--measure-lead); margin: 0 0 2rem; font-size: var(--t-read); line-height: 1.6; color: var(--ink); }
#page-reality .rl-fine { margin: 1.25rem 0 0; font-size: var(--t-label); line-height: 1.6; color: var(--ink-soft); max-width: var(--measure-prose); }

/* Reading progress */
#page-reality .rl-progress { position: fixed; z-index: 30; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gold-a60), var(--gold-bright)); pointer-events: none; }

/* ---------- Hero ---------- */

#page-reality .rl-hero {
  position: relative;
  width: var(--rl-wide);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
#page-reality .rl-hero::before {
  content: "";
  position: absolute;
  inset: 0 -20vw;
  z-index: -1;
  background:
    radial-gradient(ellipse 45% 60% at 78% 50%, rgb(212 175 55 / .11), transparent 70%),
    radial-gradient(ellipse 35% 45% at 10% 20%, rgb(212 175 55 / .05), transparent 70%);
  pointer-events: none;
}
#page-reality .rl-hero h1 { margin: 0 0 1.4rem; font-size: clamp(2.8rem, 7.4vw, 5.6rem); }
#page-reality .rl-lead { max-width: var(--measure-lead); margin: 0 0 2rem; font-size: clamp(1.12rem, 1.7vw, 1.36rem); line-height: 1.6; color: var(--parchment); }
#page-reality .rl-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
#page-reality .rl-hero-fig { margin: 0; display: grid; gap: 1rem; justify-items: center; }
#page-reality .rl-hero-fig figcaption { max-width: 34rem; font-family: var(--serif-head); font-style: italic; font-size: .98rem; line-height: 1.55; color: var(--ink-soft); }

/* The construction draws itself */
#page-reality .rl-fig { width: 100%; max-width: 480px; height: auto; overflow: visible; }
#page-reality .rl-c { fill: none; stroke: var(--gold); stroke-width: 1.3; opacity: .7; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rl-draw 3.2s ease-out .4s forwards; }
#page-reality .rl-c2 { animation-delay: 1.6s; }
#page-reality .rl-l { stroke: var(--parchment); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rl-draw 1.1s ease-out forwards; }
#page-reality .rl-l1 { animation-delay: .2s; }
#page-reality .rl-l2 { animation-delay: 3.4s; }
#page-reality .rl-l3 { animation-delay: 3.9s; }
#page-reality .rl-tri { fill: rgb(212 175 55 / .10); opacity: 0; animation: rl-fade 1.4s ease-out 4.5s forwards; }
#page-reality .rl-pt { fill: var(--gold-bright); }
#page-reality .rl-pt-l { fill: var(--parchment); font-family: var(--serif-display); font-size: 22px; }
@keyframes rl-draw { to { stroke-dashoffset: 0; } }
@keyframes rl-fade { to { opacity: 1; } }

/* ---------- Sections ---------- */

#page-reality .rl-section { width: var(--rl-wide); margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) 0 0; scroll-margin-top: 80px; }
#page-reality .rl-section > h2 { margin: 0 0 1.25rem; font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 24ch; }

/* Method */
#page-reality .rl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
#page-reality .rl-two p { margin: 0; max-width: var(--measure-prose); font-size: clamp(1.08rem, 1.5vw, 1.2rem); line-height: 1.7; color: var(--parchment); }

/* Glance */
#page-reality .rl-glance { list-style: none; margin: 1.5rem 0 2rem; padding: 0; counter-reset: gl; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--gold-a35); }
#page-reality .rl-glance li { counter-increment: gl; border-bottom: 1px solid var(--hairline); }
#page-reality .rl-glance a { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: baseline; padding: 1rem 0; min-height: 24px; text-decoration: none; font-family: var(--serif-head); font-size: clamp(1.12rem, 1.8vw, 1.3rem); line-height: 1.4; color: var(--parchment) !important; }
#page-reality .rl-glance a::before { content: counter(gl, upper-roman); font-family: var(--serif-display); color: var(--gold); font-size: 1.15em; }
#page-reality .rl-glance a:hover { color: var(--gold-bright) !important; }
#page-reality .rl-oneline { margin: 0; max-width: 52rem; padding: 1.4rem 1.6rem; background: var(--surface-1); border-left: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow-1), var(--edge-light); font-family: var(--serif-display); font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.25; color: var(--parchment); }
#page-reality .rl-oneline span { display: block; margin-bottom: .5rem; font-family: var(--serif-head); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* Definitions */
#page-reality .rl-defs { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
#page-reality .rl-def { padding: 1.3rem 1.3rem 1.2rem; background: var(--surface-1); border-radius: var(--radius); box-shadow: var(--shadow-1), var(--edge-light); border-top: 2px solid var(--gold-a35); display: grid; align-content: start; gap: .7rem; }
#page-reality .rl-def dt { display: flex; align-items: baseline; gap: .7rem; font-family: var(--serif-display); font-size: 1.55rem; color: var(--parchment); }
#page-reality .rl-def dt span { font-family: var(--serif-head); font-size: var(--t-label); letter-spacing: .18em; color: var(--gold); min-width: 2rem; }
#page-reality .rl-def dd { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink); }
#page-reality .rl-def dd em { font-family: var(--serif-head); }
#page-reality .rl-def small { display: block; margin-top: .6rem; font-size: .9rem; color: var(--ink-soft); }

/* Euclid table */
#page-reality .rl-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-1), var(--edge-light); background: var(--surface-1); }
#page-reality .rl-table { width: 100%; min-width: 46rem; border-collapse: collapse; }
#page-reality .rl-table th,
#page-reality .rl-table td { padding: 1.05rem 1.2rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); font-size: 1rem; line-height: 1.6; color: var(--ink); }
#page-reality .rl-table thead th { font-family: var(--serif-head); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--gold-a35); }
#page-reality .rl-table tbody th { width: 27%; font-family: var(--serif-head); font-weight: 400; font-size: 1.05rem; color: var(--parchment); }
#page-reality .rl-table td:last-child { color: var(--parchment); }
#page-reality .rl-table tr:last-child th,
#page-reality .rl-table tr:last-child td { border-bottom: 0; }

/* Map */
#page-reality .rl-map-wrap { overflow-x: auto; margin-bottom: 2.5rem; padding-bottom: .5rem; }
#page-reality .rl-map-fig { margin: 0; min-width: 660px; padding: 1.2rem 1rem .8rem; background: var(--surface-1); border-radius: var(--radius); box-shadow: var(--shadow-1), var(--edge-light); }
#page-reality .rl-map { width: 100%; height: auto; display: block; }
#page-reality .rl-edge { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .3; }
#page-reality .rl-node circle { fill: var(--surface-2); stroke: var(--gold); stroke-width: 1.4; transition: fill var(--t-ui); }
#page-reality .rl-node text { fill: var(--parchment); font-family: var(--serif-display); font-size: 15px; pointer-events: none; }
#page-reality .rl-node-def circle { stroke-dasharray: 3 4; }
#page-reality .rl-node-def text { font-size: 12px; fill: var(--ink-soft); }
#page-reality .rl-node-end circle { fill: var(--gold); }
#page-reality .rl-node-end text { fill: #100d08; font-size: 22px; }
#page-reality .rl-map a:hover circle,
#page-reality .rl-map a:focus-visible circle { fill: var(--gold-a35); }
#page-reality .rl-map a:focus-visible { outline: none; }
#page-reality .rl-map a:focus-visible circle { stroke-width: 3; stroke: var(--gold-bright); }
#page-reality .rl-map-fig figcaption { margin-top: .4rem; text-align: center; font-size: .92rem; color: var(--ink-soft); }
#page-reality .rl-tools { margin-bottom: 1.25rem; }
#page-reality .rl-tools .button[hidden] { display: none; }

/* Propositions */
#page-reality .rl-props { display: grid; gap: 1.25rem; }
#page-reality .rl-prop { padding: clamp(1.3rem, 3.2vw, 2.4rem); background: var(--surface-1); border-radius: var(--radius); box-shadow: var(--shadow-1), var(--edge-light); scroll-margin-top: 80px; display: grid; gap: 1.5rem; }
#page-reality .rl-prop > header { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
#page-reality .rl-num { font-family: var(--serif-display); font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: .9; color: var(--gold); opacity: .85; }
#page-reality .rl-tag { margin-bottom: .55rem; }
#page-reality .rl-prop h3 { margin: 0 0 .8rem; font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
#page-reality .rl-statement { margin: 0; max-width: var(--measure-prose); font-family: var(--serif-head); font-size: clamp(1.18rem, 2vw, 1.45rem); line-height: 1.5; color: var(--parchment); }

#page-reality .rl-demo { padding: 1.1rem 1.3rem 1.3rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface-2); }
#page-reality .rl-demo summary { cursor: pointer; font-family: var(--serif-head); font-size: var(--t-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); list-style: none; display: flex; align-items: center; gap: .6rem; min-height: 24px; }
#page-reality .rl-demo summary::-webkit-details-marker { display: none; }
#page-reality .rl-demo summary::before { content: "+"; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border: 1px solid var(--gold-a35); border-radius: 50%; font-size: 1rem; letter-spacing: 0; transition: transform var(--t-ui); }
#page-reality .rl-demo[open] summary::before { content: "\2212"; }
#page-reality .rl-demo summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
#page-reality .rl-steps { list-style: none; margin: 1.1rem 0 0; padding: 0; counter-reset: st; display: grid; gap: .15rem; }
#page-reality .rl-steps li { counter-increment: st; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px solid var(--hairline); }
#page-reality .rl-steps li::before { content: counter(st); font-family: var(--serif-display); color: var(--gold); }
#page-reality .rl-steps span { max-width: var(--measure-prose); font-size: 1.05rem; line-height: 1.6; color: var(--parchment); }
#page-reality .rl-steps em { font-family: var(--serif-head); font-size: .88rem; white-space: nowrap; color: var(--ink-soft); text-align: right; }
#page-reality .rl-qed { margin: 1rem 0 0; font-family: var(--serif-display); font-size: 1.15rem; letter-spacing: .2em; text-align: right; color: var(--gold); }

#page-reality .rl-words .rl-tag,
#page-reality .rl-scholium .rl-tag { margin-bottom: .6rem; }
#page-reality .rl-quote { margin: 0 0 .9rem; padding: .2rem 0 .2rem 1.1rem; max-width: var(--measure-prose); border-left: 2px solid var(--gold-a35); font-family: var(--serif-head); font-style: italic; font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); }
#page-reality .rl-scholium { padding: 1.1rem 1.3rem; background: var(--gold-a04); border: 1px solid var(--gold-a35); border-radius: var(--radius); }
#page-reality .rl-scholium p:last-child { margin: 0; max-width: var(--measure-prose); font-size: 1.08rem; line-height: 1.65; color: var(--parchment); }

/* Conclusion */
#page-reality .rl-theorem { margin: 0; max-width: 56rem; padding: clamp(1.4rem, 3.5vw, 2.4rem); background: var(--surface-1); border-left: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow-1), var(--edge-light); font-family: var(--serif-display); font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.4; color: var(--parchment); }
#page-reality .rl-theorem .rl-cite { font-size: .6em; }
#page-reality .rl-qed-big { max-width: 56rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* Corollaries */
#page-reality .rl-cors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
#page-reality .rl-cors li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .9rem; padding: 1.3rem; background: var(--surface-1); border-radius: var(--radius); box-shadow: var(--shadow-1), var(--edge-light); border-top: 2px solid var(--gold-a35); }
#page-reality .rl-cor-n { font-family: var(--serif-display); font-size: 2rem; line-height: 1; color: var(--gold); }
#page-reality .rl-cors h3 { margin: 0 0 .5rem; font-size: 1.3rem; }
#page-reality .rl-cors p { margin: 0 0 .6rem; font-size: 1rem; line-height: 1.6; color: var(--ink); }
#page-reality .rl-cors small { font-family: var(--serif-head); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* Not follow */
#page-reality .rl-not { margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
#page-reality .rl-not div { padding: 1.3rem; background: var(--surface-1); border-radius: var(--radius); box-shadow: var(--shadow-1), var(--edge-light); }
#page-reality .rl-not dt { margin-bottom: .6rem; font-family: var(--serif-head); font-size: 1.2rem; color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--gold-a60); }
#page-reality .rl-not dd { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--parchment); }

/* Close */
#page-reality .rl-close { padding-bottom: clamp(3rem, 7vw, 5rem); }
#page-reality .rl-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
#page-reality .rl-next a { display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.3rem; background: var(--surface-1); border-radius: var(--radius); box-shadow: var(--shadow-1), var(--edge-light); text-decoration: none; font-family: var(--serif-head); font-size: 1.25rem; color: var(--parchment) !important; transition: box-shadow var(--t-ui); }
#page-reality .rl-next a span { font-family: var(--serif-body); font-size: .95rem; color: var(--ink-soft); }
#page-reality .rl-next a:hover { box-shadow: var(--shadow-2), var(--edge-light); color: var(--gold-bright) !important; }

/* Reveal on scroll (only when script has marked the page) */
.rl-js #page-reality .rl-prop,
.rl-js #page-reality .rl-def,
.rl-js #page-reality .rl-cors li { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.rl-js #page-reality .is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  #page-reality .rl-defs,
  #page-reality .rl-cors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  #page-reality .rl-hero { grid-template-columns: minmax(0, 1fr); }
  #page-reality .rl-fig { max-width: 380px; }
  #page-reality .rl-two,
  #page-reality .rl-glance,
  #page-reality .rl-defs,
  #page-reality .rl-cors,
  #page-reality .rl-not,
  #page-reality .rl-next { grid-template-columns: minmax(0, 1fr); }
  #page-reality .rl-prop > header { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  #page-reality .rl-steps li { grid-template-columns: 1.8rem minmax(0, 1fr); }
  #page-reality .rl-steps em { grid-column: 2; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  #page-reality .rl-c,
  #page-reality .rl-l { animation: none; stroke-dashoffset: 0; }
  #page-reality .rl-tri { animation: none; opacity: 1; }
  .rl-js #page-reality .rl-prop,
  .rl-js #page-reality .rl-def,
  .rl-js #page-reality .rl-cors li { opacity: 1; transform: none; transition: none; }
}

@media print {
  #page-reality .rl-hero-fig,
  #page-reality .rl-actions,
  #page-reality .rl-map-wrap,
  #page-reality .rl-tools,
  #page-reality .rl-progress,
  #page-reality .rl-next { display: none !important; }
  #page-reality .rl-prop,
  #page-reality .rl-def { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
}