/* The Palimpsest — a reading room for one leaf. Builds on style.css tokens. */
.palimpsest-page{
  --vault:#15131b;
  --vault-deep:#0d0a12;
  --vellum:#eee8da;
  --faded:#aaa497;
  --rubric-lit:#d0806d;
  --gilt:#c4ae7f;
  --hair:#3a3642;
  --uv:#a99bff;
  --uncial:'Uncial Antiqua',Georgia,serif;
  background:var(--vault);
  color:var(--vellum);
}
.palimpsest-page header.leaf-header{border-bottom-color:var(--hair)}
.leaf-back{font-size:.9375rem;min-height:44px;display:inline-flex;align-items:center;color:var(--faded);border-bottom:1px solid transparent}
.leaf-back:hover{color:var(--gilt)}
.palimpsest-page .brand-star{color:var(--gilt)}
.palimpsest-page a:focus-visible,.palimpsest-page button:focus-visible{outline-color:var(--gilt)}

/* Intro: three sentences, one after another. */
.leaf-intro{padding-block:clamp(2.5rem,5vw,4rem) clamp(1.25rem,2.5vw,2rem)}
.leaf-lines{margin:0;max-width:none;font:500 clamp(2.1rem,4.2vw,3.9rem)/1.12 var(--serif);letter-spacing:-.025em}
.leaf-lines span{display:block;opacity:0;animation:inkIn 1.6s ease forwards}
.leaf-lines span:nth-child(2){animation-delay:.9s;color:var(--faded);text-decoration:line-through;text-decoration-thickness:.045em;text-decoration-color:rgba(208,128,109,.55)}
.leaf-lines span:nth-child(3){animation-delay:1.9s}
@keyframes inkIn{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}

/* The leaf. */
.leaf-stage{background:radial-gradient(ellipse 60% 55% at 50% 40%,#1d1b25 0%,var(--vault) 70%);overflow-x:hidden}
.plate{position:relative;margin:0 auto;max-width:min(1560px,calc((100svh - 6rem) * 1.791));opacity:0;animation:inkIn 1.8s ease 2.6s forwards;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent),linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent),linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
          mask-composite:intersect}
.plate img,.plate canvas{transition:filter .6s ease}.plate img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
.plate canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:crosshair}
.plate #uv-glow{pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .8s ease}.plate.uv #uv-glow{opacity:1}
.plate.uv img,.plate.uv #scrape{filter:grayscale(.55) brightness(.42) contrast(1.25) sepia(.35) hue-rotate(205deg) saturate(1.6)}

.marks{position:absolute;inset:0;pointer-events:none}
.mark{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;padding:0;background:none;cursor:pointer;pointer-events:auto;opacity:0;animation:markIn .8s ease forwards;animation-delay:calc(3.6s + var(--i) * .12s)}
.mark:before{content:'';position:absolute;inset:12px;border:2px solid rgba(118,30,20,.9);border-radius:50%;background:radial-gradient(circle,rgba(118,30,20,.9) 0 2.5px,rgba(238,228,205,.55) 3.5px);box-shadow:0 0 0 1px rgba(238,228,205,.6),0 1px 6px rgba(0,0,0,.35);transition:transform .25s ease,background .25s ease}
.mark:hover:before,.mark[aria-pressed="true"]:before{transform:scale(1.3);background:radial-gradient(circle,rgba(238,228,205,.95) 0 2.5px,rgba(118,30,20,.9) 3.5px)}
.mark:focus-visible{outline:2px solid var(--gilt);outline-offset:-4px;border-radius:50%}
@keyframes markIn{to{opacity:1}}

.plate-tools{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap;padding-top:1.25rem;padding-bottom:.5rem}
.plate-hint{font:italic 1.25rem/1.45 var(--serif);color:var(--faded);margin:0}
.uv-toggle{background:none;color:var(--vellum);border:1px solid #57516a;min-height:44px;padding:.6rem 1.1rem;font-size:.875rem;letter-spacing:.02em;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.uv-toggle:hover{border-color:var(--uv)}
.uv-toggle[aria-pressed="true"]{background:#2a2540;border-color:var(--uv);color:#dcd5ff}

/* Study: notes and transcription side by side. */
.leaf-study{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(2.5rem,6vw,6rem);padding-block:clamp(3rem,6vw,5rem)}
.leaf-study h2{font-size:clamp(2rem,3.2vw,2.8rem);margin:0 0 .5rem}
.notes-lede{color:var(--faded);font-size:.9375rem;margin:0 0 1.5rem}
.mark-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.mark-list li{border-bottom:1px solid var(--hair)}
.mark-list button{width:100%;text-align:left;background:none;border:0;color:var(--vellum);font:1.2rem/1.4 var(--serif);padding:.7rem 0;min-height:44px;cursor:pointer;display:flex;justify-content:space-between;gap:1rem}
.mark-list button:after{content:'';width:.55rem;height:.55rem;border:1.5px solid var(--gilt);border-radius:50%;align-self:center;flex:none}
.mark-list button[aria-pressed="true"]{color:var(--gilt)}
.mark-list button[aria-pressed="true"]:after{background:var(--gilt)}
.mark-list button:hover{color:var(--gilt)}
.note-card{margin-top:1.75rem;min-height:7.5rem;padding-left:1.25rem;border-left:2px solid var(--rubric-lit)}
.note-card h3{font:italic 500 1.35rem/1.3 var(--serif);color:var(--rubric-lit);margin:0 0 .5rem}
.note-card p{font:1.3rem/1.55 var(--serif);margin:0;max-width:40ch}
.note-card .note-empty{color:var(--faded);font-style:italic}

.transcription-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.share-link{font-size:.875rem;font-weight:600;letter-spacing:.03em;border-bottom:1px solid currentColor;color:var(--gilt);min-height:44px;display:inline-flex;align-items:center}
.share-link[hidden]{display:none}
.passages{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.passage{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:.25rem 1rem;padding:1.4rem 0;border-bottom:1px solid var(--hair)}
.passage-num{font:italic 1.5rem/1.2 var(--serif);color:var(--gilt)}
.passage-latin{font:1.35rem/1.45 var(--uncial);color:#e2d6bd;margin:0;letter-spacing:.01em}
.passage-latin .rubric{color:var(--rubric-lit)}
.passage-latin.lifted{animation:inkIn 1.4s ease}
.passage-en{font:italic 1.35rem/1.45 var(--serif);margin:.45rem 0 0}
.passage-where{font-size:.875rem;color:var(--faded);margin:.5rem 0 0}
.passage.pending .passage-latin{font:italic 1.2rem/1.5 var(--serif);color:var(--faded)}
.passage .lift-button{justify-self:start;background:none;border:0;border-bottom:1px solid #5b566a;color:var(--faded);font-size:.8125rem;padding:.35rem 0;margin-top:.5rem;min-height:36px;cursor:pointer}
.passage .lift-button:hover{color:var(--vellum);border-color:var(--vellum)}
.passage-more{padding:1.2rem 0 0;font:italic 1.2rem/1.5 var(--serif);color:var(--faded)}
.passage a{color:var(--gilt);border-bottom:1px solid currentColor}

.leaf-close{text-align:center;padding-block:clamp(3rem,6vw,5rem);border-top:1px solid var(--hair)}
.leaf-statement{font:italic 500 clamp(2rem,4vw,3.4rem)/1.2 var(--serif);max-width:none;margin:0 0 1.5rem}
.leaf-links{display:flex;justify-content:center;gap:1rem 2.5rem;flex-wrap:wrap}
.leaf-links .text-link{color:var(--gilt)}

.leaf-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2rem;padding-block:1.75rem 2.5rem;border-top:1px solid var(--hair);color:var(--faded)}
.leaf-footer>span{font-size:.75rem;letter-spacing:.04em}
.leaf-footer p{font-size:.875rem;margin:0}
.reset-link{background:none;border:0;padding:0;margin-left:.35rem;color:var(--faded);text-decoration:underline;text-underline-offset:3px;font-size:.875rem;cursor:pointer}
.reset-link:hover{color:var(--vellum)}

.leaf-toast{position:fixed;left:50%;bottom:clamp(1rem,4vw,2.25rem);transform:translate(-50%,1rem);background:var(--vellum);color:var(--ink);padding:.9rem 1.4rem;font:1.15rem/1.4 var(--serif);border:1px solid var(--gilt);box-shadow:0 12px 40px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease;z-index:30;width:max-content;max-width:min(92vw,34rem);text-align:center}
.leaf-toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width: 900px){
  .leaf-study{grid-template-columns:minmax(0,1fr)}
  .leaf-footer{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .mark{width:30px;height:30px;margin:-15px 0 0 -15px}
  .mark:before{inset:7px}
  .plate{width:112%;max-width:none;margin-left:-6%}
}
@media (max-width: 560px){
  .leaf-back{font-size:.875rem}
  .plate-hint{font-size:1.1rem}
  .uv-toggle{width:100%}
}
@media (prefers-reduced-motion: reduce){
  .leaf-lines span,.plate,.mark{opacity:1}
}