/* ═══════════════════════════════════════════════════════════════════
   THREE LETTERS ON A DESK
   Each course is a letter on umber felt. The envelope carries a stamp
   with the course's own painting, a handwritten address in IM Fell,
   and her star pressed into a pool of lavender wax with its drips.
   Open one: the wax cracks in two, the flap lifts and fades, the sheet
   rises with a letterhead, a salutation, three lines and her mark for
   a signature, and a postmark stamps itself onto the envelope with
   tonight's moon and today's date. The letter records the moment you
   opened it. One open at a time.
   ═══════════════════════════════════════════════════════════════ */
:root { --lt-felt:#7A6A56; --lt-felt-2:#5A4D3F; --lt-paper:#F4F0E8; --lt-paper-2:#E9E3D6; --lt-ink:#6B5E48; --lt-lav:#9998D0; --lt-lavd:#6F6DAE; --lt-text:#1E1D22; --lt-soft:#5E5852;
  --lt-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
html[data-sect] {
  --d-lt-felt:#7A6A56; --n-lt-felt:#3A3129;
  --d-lt-felt-2:#5A4D3F; --n-lt-felt-2:#1E1915;
  --d-lt-paper:#F4F0E8; --n-lt-paper:#EDE8DF;
  --d-lt-paper-2:#E9E3D6; --n-lt-paper-2:#E1DBCE;
}
html[data-sect] {
  --lt-felt:color-mix(in oklab, var(--d-lt-felt) var(--day-pct), var(--n-lt-felt));
  --lt-felt-2:color-mix(in oklab, var(--d-lt-felt-2) var(--day-pct), var(--n-lt-felt-2));
  --lt-paper:color-mix(in oklab, var(--d-lt-paper) var(--day-pct), var(--n-lt-paper));
  --lt-paper-2:color-mix(in oklab, var(--d-lt-paper-2) var(--day-pct), var(--n-lt-paper-2));
}

.desk { position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; align-items:end;
  margin:2.2rem auto 0; max-width:54rem; padding:1.9rem 1.8rem 1.9rem; border-radius:14px;
  background:radial-gradient(90% 80% at 50% 72%, var(--lt-felt), var(--lt-felt-2)); isolation:isolate; }
.desk::before { content:''; position:absolute; inset:0; border-radius:14px; pointer-events:none; opacity:.22; mix-blend-mode:multiply; background-image:var(--lt-grain); }

/* the desk grows to hold an open letter: the envelope stays put at the foot, the sheet comes all the way out above it */
.lt { position:relative; height:10.6rem; cursor:pointer; outline:none; transform:rotate(var(--tilt, 0deg));
  transition:transform .5s cubic-bezier(.2,.7,.3,1), height .85s cubic-bezier(.2,.75,.25,1); }
.lt.open { height:28.8rem; }
.lt:hover, .lt:focus-visible { transform:rotate(calc(var(--tilt, 0deg) * .4)) translateY(-6px); z-index:3; }
.lt.open { transform:rotate(0deg); z-index:4; }
.lt:focus-visible .lt-seal { filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)) drop-shadow(0 0 0 2px var(--lt-paper)) drop-shadow(0 0 0 4px var(--lt-lav)); }

/* ── the envelope ── */
.lt-env { position:absolute; left:0; right:0; bottom:0; height:10.6rem; perspective:700px; z-index:2; }
.lt-back, .lt-pocket, .lt-flap { position:absolute; left:0; right:0; }
.lt-back { top:0; bottom:0; background:var(--lt-paper-2); border:1px solid color-mix(in srgb, var(--lt-ink) 55%, transparent); border-radius:3px;
  box-shadow:0 24px 36px -22px rgba(0,0,0,.65); transition:background-color .3s ease .4s; }
/* the sheet leaves the envelope entirely now, so the back stays paper and the postmark has something to land on */
.lt-pocket { top:44%; bottom:0; z-index:2; background:var(--lt-paper); border:1px solid color-mix(in srgb, var(--lt-ink) 50%, transparent); border-top:0; border-radius:0 0 3px 3px;
  background-image:var(--lt-grain),
    linear-gradient(to top right, transparent 48.8%, rgba(60,50,30,.16) 50%, rgba(255,255,255,.5) 50.6%, transparent 52%),
    linear-gradient(to top left,  transparent 48.8%, rgba(60,50,30,.16) 50%, rgba(255,255,255,.5) 50.6%, transparent 52%);
  background-blend-mode:multiply, normal, normal; }
.lt-pocket::before { content:''; position:absolute; left:0; right:0; top:0; height:14px; background:linear-gradient(180deg, rgba(60,50,30,.14), transparent); }
.lt-flap { top:0; height:56%; z-index:3; transform-origin:50% 0; background:var(--lt-paper);
  background-image:var(--lt-grain), linear-gradient(180deg, rgba(255,255,255,.35), rgba(60,50,30,.08)); background-blend-mode:multiply, normal;
  clip-path:polygon(0 0, 100% 0, 50% 100%); transition:transform .75s cubic-bezier(.2,.7,.3,1), opacity .25s ease .45s;
  filter:drop-shadow(0 2px 2px rgba(60,50,30,.18)); }
.lt-flap::after { content:''; position:absolute; inset:0; clip-path:polygon(0 0, 100% 0, 50% 100%); border:1px solid color-mix(in srgb, var(--lt-ink) 45%, transparent); box-sizing:border-box; }
.lt.open .lt-flap { transform:rotateX(-168deg); opacity:0; }
/* the stamp: the course's painting, perforated in lilac */
.lt-stamp { position:absolute; right:.7rem; top:.6rem; z-index:4; width:2.3rem; height:2.8rem; padding:3px; background:var(--lt-paper);
  outline:2px dashed var(--lt-lav); outline-offset:-1px; box-shadow:0 1px 2px rgba(0,0,0,.2); transform:rotate(3deg); }
.lt-stamp img { display:block; width:100%; height:100%; object-fit:cover; filter:sepia(.25) saturate(.7); }
/* the postmark, which only exists once the letter has been opened */
.lt-mark { position:absolute; right:2.3rem; top:.1rem; z-index:5; width:3.9rem; height:3.9rem; overflow:visible; pointer-events:none;
  color:var(--lt-ink); opacity:0; transform:rotate(-14deg) scale(1.9); mix-blend-mode:multiply; }
.lt.stamped .lt-mark { opacity:.78; transform:rotate(-14deg) scale(1); transition:transform .32s cubic-bezier(.2,1.5,.4,1) .55s, opacity .12s ease .55s; }
.lt-mark circle { fill:none; stroke:currentColor; stroke-width:2; }
.lt-mark circle + circle { stroke-width:1.2; }
.lt-ringtext { font-family:var(--caps); font-size:8.6px; letter-spacing:.22em; fill:currentColor; }
.lt-mark .m-disc { fill:color-mix(in srgb, currentColor 22%, transparent); }
.lt-mark .m-lit { fill:currentColor; }
.lt-date { font-family:var(--caps); font-size:7.6px; letter-spacing:.12em; fill:currentColor; text-anchor:middle; }
/* the address */
.lt-addr { position:absolute; left:.8rem; right:.8rem; bottom:1rem; z-index:2; text-align:center;
  font-family:var(--quote); font-style:italic; font-size:.86rem; color:var(--lt-ink); pointer-events:none; }
/* the wax */
.lt-seal { position:absolute; left:50%; top:40%; width:2.7rem; height:3.2rem; transform:translate(-50%,-50%); z-index:4; overflow:visible;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.lt-seal path { fill:var(--lt-lav); stroke:var(--lt-lavd); stroke-width:.8; }
.lt-seal .wax-sheen { fill:rgba(255,255,255,.55); stroke:none; }
.lt-seal .wax-star { fill:var(--lt-paper); opacity:.95; }
.wax-l, .wax-r, .wax-star, .wax-sheen { transition:transform .6s cubic-bezier(.2,.7,.3,1), opacity .5s ease; transform-box:fill-box; transform-origin:center; }
.lt.open .wax-l { transform:translate(-9px, 4px) rotate(-12deg); opacity:0; }
.lt.open .wax-r { transform:translate(9px, 5px) rotate(12deg); opacity:0; }
.lt.open .wax-star, .lt.open .wax-sheen { transform:translateY(-6px) scale(.6); opacity:0; }

/* ── the sheet ── */
.lt-sheet { position:absolute; left:.6rem; right:.6rem; bottom:.3rem; height:9.9rem; z-index:1; padding:.85rem .9rem .75rem; overflow:hidden;
  background:var(--lt-paper); background-image:var(--lt-grain); background-blend-mode:multiply;
  border:1px solid color-mix(in srgb, var(--lt-ink) 40%, transparent); border-radius:2px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.22rem; color:var(--lt-text);
  transform:translateY(0); transition:transform .85s cubic-bezier(.2,.75,.25,1) .1s, height .85s cubic-bezier(.2,.75,.25,1) .1s, box-shadow .4s ease; }
.lt.open .lt-sheet { transform:translateY(-11rem); height:15.7rem; box-shadow:0 18px 30px -18px rgba(0,0,0,.6); }
.lt-head { font-family:var(--display); font-kerning:none; font-size:1.08rem; line-height:1.1; }
.lt-weeks { font-family:var(--caps); font-size:.46rem; letter-spacing:.28em; text-transform:uppercase; color:var(--lt-lavd); }
.lt-weeks::after { content:''; display:block; width:1.4rem; height:1px; margin:.4rem auto .25rem; background:var(--lt-lav); }
.lt-salute { font-family:var(--quote); font-style:italic; font-size:.88rem; color:var(--lt-text); align-self:flex-start; }
.lt-body { font-family:var(--quote); font-size:.8rem; line-height:1.36; color:var(--lt-soft); text-align:left; text-wrap:pretty; }
.lt-sign { display:flex; align-items:center; gap:.4rem; align-self:flex-end; font-family:var(--quote); font-style:italic; font-size:.8rem; color:var(--lt-text); margin-top:.1rem; }
.lt-sign img { height:1.3rem; width:auto; display:block; }
.lt-go { margin-top:.2rem; align-self:center; display:inline-flex; align-items:center; gap:.35rem; font-family:var(--caps); font-size:var(--caps-xxs);
  letter-spacing:.24em; text-transform:uppercase; text-decoration:none; color:var(--lt-lavd); padding:.3rem 0 .25rem; border-bottom:1px solid color-mix(in srgb, var(--lt-lav) 60%, transparent); }
.lt-go:hover { color:var(--lt-text); border-color:currentColor; }
.lt-star { width:.7rem; height:.7rem; fill:var(--lt-lav); }

@media (max-width:760px) {
  .desk { grid-template-columns:1fr; gap:1.6rem; max-width:22rem; padding:1.6rem 1.4rem 1.6rem; }
  .lt { transform:none; }
  .lt:hover { transform:none; }
}
@media (prefers-reduced-motion:reduce) { .lt, .lt-flap, .lt-sheet, .wax-l, .wax-r, .wax-star, .wax-sheen, .lt-mark { transition:none; } }

/* ═══ MORE MAGIC ═══ a fold, a flower, crumbs, ink, a glint, a breath. */
/* the sheet is two leaves: the top rises, the lower third unfolds after it */
.lt-sheet { padding:0; overflow:visible; display:block; perspective:900px; background:none; border:0; }
.lt-top, .lt-fold { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.22rem; padding:.85rem .9rem .6rem;
  background:var(--lt-paper); background-image:var(--lt-grain); background-blend-mode:multiply; border:1px solid color-mix(in srgb, var(--lt-ink) 40%, transparent); }
.lt-top { border-radius:2px 2px 0 0; border-bottom:0; }
.lt-fold { border-radius:0 0 2px 2px; padding:.5rem .9rem .7rem; transform-origin:50% 0; transform:rotateX(-180deg); opacity:0;
  transition:transform .7s cubic-bezier(.2,.75,.25,1) .75s, opacity .2s ease .75s; backface-visibility:hidden; }
.lt-fold::before { content:''; position:absolute; left:0; right:0; top:0; height:10px; background:linear-gradient(180deg, rgba(60,50,30,.12), transparent); }
.lt-fold { position:relative; }
.lt.open .lt-fold { transform:rotateX(0deg); opacity:1; }
.lt.open .lt-sheet { height:auto; overflow:visible; }
.lt-sheet { height:9.9rem; overflow:hidden; }
.lt:not(.open) .lt-top { height:9.9rem; overflow:hidden; }
/* the salutation writes itself once the sheet has arrived */
.lt-salute i { display:inline-block; font-style:italic; clip-path:inset(0 100% 0 0); transition:clip-path 0s; }
.lt.open .lt-salute i { clip-path:inset(0 0 0 0); transition:clip-path .9s cubic-bezier(.3,.6,.4,1) .85s; }
/* a pressed flower slips out beside the sheet: her own pressed specimens, tall sprigs */
.lt-flower { position:absolute; left:.2rem; bottom:1.2rem; width:5.4rem; z-index:0; opacity:0; pointer-events:none;
  transform:translateY(0) rotate(-10deg) scale(.8); filter:saturate(.92) drop-shadow(0 5px 7px rgba(0,0,0,.38));
  transition:transform 1s cubic-bezier(.2,.75,.25,1) .35s, opacity .4s ease .5s; }
.lt.open .lt-flower { opacity:1; transform:translate(-1.7rem, -9.2rem) rotate(-26deg) scale(1); z-index:3; }
.lt--2 .lt-flower { width:5rem; }
.lt--3 .lt-flower { width:5.2rem; left:auto; right:.2rem; transform:rotate(10deg) scale(.8); }
.lt--3.open .lt-flower { transform:translate(1.5rem, -9rem) rotate(22deg) scale(1); }
/* wax crumbs */
.lt-crumbs { position:absolute; left:50%; top:40%; width:0; height:0; z-index:5; pointer-events:none; }
.lt-crumbs i { position:absolute; left:0; top:0; width:5px; height:5px; border-radius:40%; background:var(--lt-lav); opacity:0; transform:translate(0,0); }
.lt.open .lt-crumbs i { animation:crumb .9s cubic-bezier(.2,.7,.4,1) forwards; }
.lt.open .lt-crumbs i:nth-child(1) { --dx:-26px; --dy:14px; } .lt.open .lt-crumbs i:nth-child(2) { --dx:22px; --dy:18px; animation-delay:.04s; }
.lt.open .lt-crumbs i:nth-child(3) { --dx:-14px; --dy:26px; animation-delay:.08s; } .lt.open .lt-crumbs i:nth-child(4) { --dx:30px; --dy:4px; animation-delay:.02s; }
.lt.open .lt-crumbs i:nth-child(5) { --dx:-32px; --dy:-6px; animation-delay:.06s; } .lt.open .lt-crumbs i:nth-child(6) { --dx:8px; --dy:30px; animation-delay:.1s; }
@keyframes crumb { 0% { opacity:1; transform:translate(0,0) scale(1); } 100% { opacity:0; transform:translate(var(--dx), var(--dy)) scale(.4) rotate(90deg); } }
/* the seal glints when a closed envelope is hovered */
.wax-glint { fill:rgba(255,255,255,.55); stroke:none; opacity:0; transform:translateX(-30px); transform-box:fill-box; }
.lt:not(.open):hover .wax-glint { animation:glint .8s ease-out 1; }
@keyframes glint { 0% { opacity:0; transform:translateX(-34px); } 30% { opacity:.9; } 100% { opacity:0; transform:translateX(34px); } }
/* the closed envelopes breathe on the desk */
@keyframes breathe-lt { 0%,100% { transform:rotate(var(--tilt, 0deg)) translateY(0); } 50% { transform:rotate(calc(var(--tilt, 0deg) * 1.25)) translateY(-2px); } }
.lt:not(.open):not(:hover):not(:focus-visible) { animation:breathe-lt 7s ease-in-out infinite; }
.lt--2 { animation-delay:-2.3s; } .lt--3 { animation-delay:-4.6s; }
@media (max-width:760px) { .lt:not(.open):not(:hover) { animation:none; } .lt.open .lt-flower { transform:translate(-1.2rem, -8.6rem) rotate(-24deg) scale(1); } .lt--3.open .lt-flower { transform:translate(1.2rem, -8.4rem) rotate(22deg) scale(1); } }
@media (prefers-reduced-motion:reduce) { .lt, .lt-fold, .lt-flower, .lt-salute i { animation:none; transition:none; } .lt.open .lt-crumbs i { animation:none; } }

/* ═══ USABILITY ═══ the way in is obvious from both states. */
/* closed: a return address names the course, a cue appears by the seal */
.lt-from { position:absolute; left:.8rem; top:.7rem; z-index:4; font-family:var(--caps); font-size:var(--caps-xxs); letter-spacing:.2em; text-transform:uppercase;
  color:var(--lt-ink); opacity:.85; pointer-events:none; max-width:60%; line-height:1.4; }
.lt-from i { font-style:normal; opacity:.75; }
.lt-hint { position:absolute; left:50%; top:62%; transform:translate(-50%, 4px); z-index:5; pointer-events:none; white-space:nowrap;
  font-family:var(--quote); font-style:italic; font-size:.78rem; color:var(--lt-lavd); background:color-mix(in srgb, var(--lt-paper) 92%, transparent);
  padding:.1rem .5rem; border-radius:999px; opacity:0; transition:opacity .25s ease, transform .25s ease; }
.lt:not(.open):hover .lt-hint, .lt:not(.open):focus-visible .lt-hint { opacity:1; transform:translate(-50%, 0); }
.lt.open .lt-from { opacity:.5; }
/* open: the whole sheet is the door, and the button says so */
.lt.open .lt-sheet { cursor:pointer; }
.lt.open .lt-top:hover, .lt.open .lt-fold:hover { background-color:#FBF8F2; }
.lt-go { margin-top:.35rem; padding:.62rem 1.1rem; border:0; border-radius:999px; background:var(--lt-lavd); color:#EDE8DF; letter-spacing:.22em; font-size:.56rem;
  box-shadow:0 10px 22px -12px rgba(111,109,174,.8); transition:background .25s ease, transform .2s ease; }
.lt-go:hover { background:var(--lt-lav); color:#1E1D22; border:0; transform:translateY(-1px); }
.lt-go .lt-star { fill:currentColor; }
/* the desk lights the open letter; the others step back */
.desk { transition:background .6s ease; }
.desk:has(.lt.open) .lt:not(.open) { opacity:.78; filter:saturate(.9); }
.desk:has(.lt.open) .lt:not(.open):hover { opacity:1; filter:none; }
.lt.open::before { content:''; position:absolute; left:50%; top:38%; width:32rem; height:32rem; transform:translate(-50%,-50%); border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,240,210,.14), transparent 70%); }
@media (max-width:760px) { .lt-from { max-width:70%; } }

/* ═══ ROUND FIVE: THE ENVELOPE STEPS ASIDE, AND THE DESK BECOMES AN OBJECT ═══ */
/* the bug: an invisible lifted flap was catching clicks on the button. Once a letter is out, its envelope takes no clicks at all */
.lt.open .lt-env { pointer-events:none; }
.lt.open .lt-flap { visibility:hidden; transition:transform .75s cubic-bezier(.2,.7,.3,1), opacity .25s ease .45s, visibility 0s linear .8s; }
/* the stamp is a shortcut on a sealed envelope */
.lt-stamp { pointer-events:auto; cursor:pointer; text-decoration:none; transition:transform .3s ease, box-shadow .3s ease; }
.lt:not(.open) .lt-stamp:hover { transform:rotate(0deg) scale(1.08); box-shadow:0 4px 10px rgba(0,0,0,.3); outline-color:var(--lt-lavd); }
.lt-stamp::after { content:'straight to the course'; position:absolute; right:0; top:calc(100% + .35rem); white-space:nowrap; font-family:var(--quote); font-style:italic; font-size:.72rem;
  color:var(--lt-lavd); background:color-mix(in srgb, var(--lt-paper) 94%, transparent); padding:.1rem .45rem; border-radius:999px; opacity:0; transform:translateY(-3px); transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
.lt:not(.open) .lt-stamp:hover::after { opacity:1; transform:translateY(0); }
/* a letter opener for a cursor, over sealed envelopes */
.lt:not(.open) { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M4 30 L22 12' stroke='%236B5E48' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M20 14 L31 3 L29 9 L23 17 Z' fill='%23EDE8DF' stroke='%236B5E48' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='28' r='2.6' fill='%239998D0'/%3E%3C/svg%3E") 6 28, pointer; }
.lt:not(.open) .lt-stamp { cursor:pointer; }
/* put it back */
.lt-close { position:absolute; right:.55rem; top:.45rem; z-index:3; border:0; background:none; cursor:pointer; font-family:var(--quote); font-style:italic; font-size:.74rem; color:var(--lt-soft);
  padding:.15rem .4rem; border-radius:999px; opacity:0; transition:opacity .3s ease .9s, color .2s ease; }
.lt.open .lt-close { opacity:.85; }
.lt-close:hover { color:var(--lt-lavd); background:color-mix(in srgb, var(--lt-lav) 14%, transparent); }
/* the desk: a leather edge, her mark debossed in the corner, a line above */
.desk-note { margin:1.6rem 0 -1.2rem; text-align:center; font-family:var(--quote); font-style:italic; font-size:1.02rem; color:var(--dim); max-width:none; }
.desk { border:1px solid rgba(0,0,0,.35); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 7px rgba(0,0,0,.14), inset 0 0 0 8px rgba(255,255,255,.05), 0 24px 40px -30px rgba(0,0,0,.6); }
.desk::after { content:''; position:absolute; left:1.6rem; top:1.1rem; width:2.6rem; height:2.6rem; pointer-events:none; opacity:.22; mix-blend-mode:multiply;
  background:url('/images/logo.png') center / contain no-repeat; filter:grayscale(1) contrast(1.4); }
html[data-sect="nocturnal"] .desk::after { mix-blend-mode:screen; opacity:.16; filter:grayscale(1) invert(1); }
/* a remembered letter wears its postmark from the start, without the stamping flourish */
.lt.remembered:not(.open) .lt-mark { transition:none; }
@media (max-width:760px) { .desk-note { margin-bottom:-.6rem; } .lt-stamp::after { display:none; } .desk::after { width:2rem; height:2rem; left:1rem; top:.8rem; } }
/* the letterhead clears the put it back */
.lt-top { padding-top:1.45rem; }
.lt-close { right:.5rem; top:.4rem; }