/* ============================================================
   ELEUSIS DESIGN FRAMEWORK  ·  eleusis.css
   The single stylesheet every product page inherits.
   Doctrines: cream+gold on official assets · sacred geometry
   structural · Apple-grade motion · pyramid not cloud.
   Pages import this and add only what is unique to their room.
   ============================================================ */

/* ---------- 1 · TOKENS ---------- */
:root{
  /* palette (v1 formula, founder-loved) */
  --cream:#F4F0E8; --cream-hi:#FBF8F1; --cream-lo:#EAE3D4;
  --ink:#2C2820; --deep:#1A1714;
  --gold:#C4A96A; --gold-light:#E2D4A8; --gold-deep:#7C5E26;
  --mid:#5C5448; --pale:#6C6455; --moss:#547046; /* moss darkened for AA at small sizes */
  /* the status palette, in the frame so it stops drifting: six pages each redeclared
     --wine, two overrode --moss, signin and gate each invented their own off-palette red.
     --ok is moss under a second name for the reading that wants it. */
  --wine:#7E3F47; --wine-soft:rgba(126,63,71,0.10); --warn:#B97F35; --alert:#A34141; --ok:#547046;
  --line:rgba(60,50,35,0.14);

  /* type */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;

  /* motion grammar */
  --ease-out:cubic-bezier(0.22,1,0.36,1);      /* settle */
  --ease-sheet:cubic-bezier(0.32,0.72,0,1);    /* exits, Apple sheet */
  --ease-spring:cubic-bezier(0.34,1.25,0.45,1);/* entrances, gentle overshoot */
  --breath:7s;                                  /* the universal breath cycle */
  --step:150ms;                                 /* choreography stagger unit */

  /* geometry strokes */
  --geo-hair:0.6px;
  --geo-line:0.9px;
  --geo-faint:rgba(196,169,106,0.10);
  --geo-soft:rgba(196,169,106,0.28);
  --geo-mid:rgba(196,169,106,0.5);
  --geo-strong:rgba(196,169,106,0.75);

  /* type scale: the micro range holds four roles, never ad-hoc sizes */
  --t-caption:11px; --t-over:11.5px; --t-quiet:12.5px; --t-label:13.5px;

  /* space and shape: one gutter, one radius per component class */
  --gutter:34px; --r-card:16px; --r-control:20px;

  /* THE DESKTOP MEASURE: one width the whole product stands on. The banner was chrome
     running edge to edge while every room sat in its own narrower band (1040 to 1240,
     a different number per page), so on a wide screen the rooms bunched to the right of
     a mark pinned far left, and nothing lined up with anything. One measure, one gutter:
     the mark begins where the room's first word begins, the last tab ends where the
     room's content ends, and the app uses the screen it was given. */
  --el-wide:1800px; --el-gut:clamp(20px, 3vw, 64px);

  /* gold hairlines */
  --gold-ring:rgba(196,169,106,0.55); --gold-border:rgba(196,169,106,0.65);

  /* staff register: aubergine chrome on cool cream (the Gold rule) */
  --aubergine:#403A45; --aubergine-line:rgba(64,58,69,0.12);
  --cream-cool-hi:#FAF8F3; --cream-cool:#F3F1EC; --cream-cool-lo:#ECE8DF;

  /* the staff banner: one gold chrome across every staff room, mobile and desktop */
  --staff-banner:linear-gradient(110deg, #EFE6CB 0%, #E7DAB0 30%, #F3ECD6 55%, #E2D4A8 80%, #EDE3C4 100%);
  --staff-banner-line:rgba(196,169,106,0.5);

  /* dark register text (Chamber, Cosmos) */
  --dark-hi:rgba(244,240,232,0.88); --dark-mid:rgba(244,240,232,0.58);
  --dark-lo:rgba(244,240,232,0.40); --gold-whisper:rgba(196,169,106,0.8);
}

/* keyboard light: one focus ring for the whole product */
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:4px;}
/* fields wear a tighter ring at the edge, not a 3px halo: browsers match :focus-visible
   on text inputs even on a mouse click, so the product ring looked wrong there and two
   halls answered with input:focus{outline:none}, which also blinded keyboard users. */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:1px solid var(--gold-deep);outline-offset:0;}

/* ---------- 2 · CANVAS ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
/* seamless room-to-room: the browser crossfades the old room's last frame
   into the new room (cross-document view transitions), and any blank frame
   between documents paints cream, never white */
@view-transition{navigation:auto;}
html{background-color:#F4F0E8;}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.5s;animation-timing-function:var(--ease-sheet);
}
body.el-page{
  font-family:var(--sans);color:var(--ink);
  background:radial-gradient(120% 90% at 50% 8%, var(--cream-hi) 0%, var(--cream) 55%, var(--cream-lo) 100%);
  overflow:hidden;
}

/* generated light beneath everything (fresh per room, soft-light, recedes) */
.el-bloom{
  position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;
  opacity:0;mix-blend-mode:soft-light;
  animation:el-bloom-in 2.4s var(--ease-out) .2s forwards;
}
@keyframes el-bloom-in{to{opacity:0.55;}}

/* the Flower of Life lattice: the perfect order beneath every page */
.el-lattice{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:0;animation:el-lattice-in 2.6s var(--ease-out) .4s forwards;
  -webkit-mask-image:radial-gradient(circle at 50% 46%, black 0%, rgba(0,0,0,0.55) 45%, transparent 78%);
  mask-image:radial-gradient(circle at 50% 46%, black 0%, rgba(0,0,0,0.55) 45%, transparent 78%);
}
.el-lattice circle{fill:none;stroke:var(--geo-faint);stroke-width:var(--geo-hair);vector-effect:non-scaling-stroke;}
@keyframes el-lattice-in{to{opacity:1;}}

/* ---------- 3 · THE STAGE ---------- */
.el-stage{
  position:relative;z-index:1;height:100vh;height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 var(--gutter);
}

/* the quiet way back: deep states earn a soft affordance, never a trap */
.el-back{
  position:absolute;top:calc(18px + env(safe-area-inset-top, 0px));left:calc(var(--gutter) - 14px);z-index:5;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;
  font-family:var(--sans);font-weight:400;font-size:var(--t-quiet);letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold-deep);background:transparent;border:0;cursor:pointer;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .45s var(--ease-out), visibility 0s .45s;
  -webkit-tap-highlight-color:transparent;
}
.el-back.show{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .45s var(--ease-out), visibility 0s;}
.el-back::before{content:'';width:7px;height:7px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);flex:none;}

/* the designed edge: rooms not yet built answer honestly (Eleusis.frontier) */
.el-frontier{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  /* a solid soft veil, no backdrop-filter: older compositors drop backgrounds under it */
  background:rgba(244,240,232,0.93);
  opacity:0;transition:opacity .4s var(--ease-out);
}
.el-frontier.show{opacity:1;}
.el-frontier .card{
  text-align:center;padding:0 var(--gutter);max-width:420px;
  transform:translateY(10px);transition:transform .4s var(--ease-spring);
}
.el-frontier.show .card{transform:translateY(0);}
.el-frontier h2{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--ink);}
.el-frontier p{margin-top:10px;font-weight:300;font-size:var(--t-label);color:var(--mid);line-height:1.7;}
.el-frontier button{
  margin-top:22px;font-family:var(--sans);font-weight:500;font-size:var(--t-quiet);
  letter-spacing:0.24em;text-transform:uppercase;color:var(--gold-deep);
  background:transparent;border:1px solid var(--gold-border);border-radius:999px;
  padding:12px 32px;min-height:44px;cursor:pointer;
  transition:transform .14s var(--ease-spring), border-color .3s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.el-frontier button:hover{border-color:var(--gold-deep);}
.el-frontier button.down{transform:scale(0.955);}

/* the vessel speaks: what will live here, said plainly */
.el-empty{
  margin:18px 0 6px;font-family:var(--sans);font-weight:300;
  font-size:var(--t-label);color:var(--pale);letter-spacing:0.03em;line-height:1.7;
  max-width:58ch;  /* it carries real sentences: unbounded, they ran to 80ch in a wide card */
}

/* ═══════════════════════════════ THE FRAME ═══════════════════════════════
   The frame is the product; the page is only the view inside it. It is drawn by
   the framework, never by a page, because chrome that lives in eighteen files
   drifts in eighteen directions (that is exactly how we got a .hall here, a .top
   there, and a .banner somewhere else).

   Two bars, one job each, and neither ever disappears while you are signed in:
     TOP    who you are, and which room you are standing in. Never changes.
     BOTTOM the rooms. Always, at every width. This is the only room navigation.
   The nav lives in the dock ALONE, so the two bars never say the same thing twice.

   Staff and participant carry the SAME construction, mirrored: same geometry, same
   two jobs, their own rooms and their own light. One product, read from either side.

   A page opts in with a body attribute and the framework does the rest:
     <body class="el-page" data-el-frame="staff" data-el-room="retreats">
   Rooms and Halls wear the frame. Passages, Thresholds and the bedside Chamber do
   NOT: you are moving through those, or holding a life in them, and a frame there
   is a distraction. Absence is a decision, not an oversight. */
:root{ --el-top-h:58px; --el-dock-h:56px; }

body.el-framed{
  padding-top:calc(var(--el-top-h) + env(safe-area-inset-top, 0px));
  padding-bottom:calc(var(--el-dock-h) + env(safe-area-inset-bottom, 0px));
  /* the base html,body{height:100%} clamps the body's content box to one viewport, so a
     room taller than that OVERFLOWS the box and the padding-bottom above never enters the
     scroll: the last line hides under the dock. A framed body must be free to grow, and
     then its own padding holds the floor. Measured, not guessed: without this the console
     lost 90px, the guest record clipped its access log, the hearth hid its last line by 8px. */
  height:auto;min-height:100%;
  /* AND IT MUST BE FREE TO SCROLL. body.el-page above sets overflow:hidden, which is right
     for a Threshold or a Passage (the Opening, the sign in: one viewport, one ceremony) but
     wrong for a room. When html is `visible` the BODY's overflow is what propagates to the
     viewport, so that hidden silently froze any framed room that forgot to override it:
     a finger and a wheel got nothing while scrollTo() still worked, which is why this hid
     from a scripted probe and only a real hand found it. Measured at 390px: Your account
     buried 644px, Retreats 731px, the Journal 633px. The rooms that scroll today each
     remembered this on their own; el-framed now remembers for all of them, the same way the
     A room with nothing to scroll is untouched: auto draws no bar. */
  overflow-y:auto;
}
/* ---- the top bar: who, and where ---- */
.el-top{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:14px;
  height:calc(var(--el-top-h) + env(safe-area-inset-top, 0px));
  padding:env(safe-area-inset-top, 0px) 16px 0;
  background:var(--staff-banner);border-bottom:1px solid var(--staff-banner-line);
}
.el-top .el-mark{flex:none;}
.el-top .el-mark-spin{height:26px;width:26px;}
/* the room name speaks the frame's own voice. Everything else in the bar and the dock is
   Jost, uppercase, letter-spaced; a Cormorant room name was the one serif in the chrome and
   it read as a title sitting ON the frame rather than a part of it. Now it joins them, and
   the hierarchy is carried by weight, size and ink instead of by a change of typeface:
     room  14px / 0.22em / 500 / ink        (the widest air: it names where you are)
     who   11px / 0.20em / 400 / gold-deep
     dock  10px / 0.13em / 500 / mid
   The serif keeps the rooms themselves, where the writing lives. The chrome is not writing. */
.el-top .el-room{
  font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.el-top .el-who{
  font-family:var(--sans);font-weight:400;font-size:var(--t-caption);letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gold-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.el-top .el-acts{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none;}
.el-top .el-act{
  width:36px;height:36px;border-radius:50%;border:1px solid transparent;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--mid);
  -webkit-tap-highlight-color:transparent;
  transition:color .3s var(--ease-out),border-color .3s var(--ease-out),background .35s var(--ease-out),
             box-shadow .3s var(--ease-out),transform .14s var(--ease-spring);
}
.el-top .el-act svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;flex:none;}
/* the GUESTS door: a named control, not a mute magnifier. It speaks the frame's voice
   (Jost, uppercase, tracked) like the room name, the who and the dock, so the bar reads
   as one line of type rather than an icon parked next to some words. */
.el-top .el-act.has-label{
  width:auto;border-radius:999px;padding:0 15px;gap:9px;height:34px;
  border-color:var(--gold-border);color:var(--mid);
}
.el-top .el-act-lbl{
  font-family:var(--sans);font-weight:500;font-size:var(--t-caption);letter-spacing:0.18em;
  text-transform:uppercase;white-space:nowrap;
}
@media (max-width:560px){
  /* the phone keeps the door, drops the word: the glyph alone is unambiguous at the top right */
  .el-top .el-act.has-label{width:36px;padding:0;border-radius:50%;}
  .el-top .el-act-lbl{display:none;}
}
.el-top .el-avatar{
  flex:none;width:32px;height:32px;border-radius:50%;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(64,58,69,0.08);border:1px solid var(--aubergine-line);
  font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:0.04em;color:var(--aubergine);
  -webkit-tap-highlight-color:transparent;
  transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out),transform .14s var(--ease-spring);
}

/* THE TOUCH LAW, KEPT WITHOUT MOVING A PIXEL. The bar is drawn small on purpose: a 26px
   mark, a 32px avatar, a 34px named door. A finger asks for 44px. Measured at 390px, all
   three sat under the law. So the DRAWING stays exactly as designed and only the TARGET
   grows: an invisible ::after, centred on the control, carries the finger's 44px. The bar
   is 58px tall, so the whole target fits inside it and nothing below is stolen. Nothing
   moves, nothing is painted, the bar simply stops missing thumbs. */
.el-top .el-home, .el-top .el-act, .el-top .el-avatar{position:relative;}
.el-top .el-home::after, .el-top .el-act::after, .el-top .el-avatar::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100%;height:44px;min-width:44px;
}

/* ---- the bottom bar: the rooms, always ---- */
.el-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  height:calc(var(--el-dock-h) + env(safe-area-inset-bottom, 0px));
  background:var(--staff-banner);border-top:1px solid var(--staff-banner-line);
  padding:0 6px env(safe-area-inset-bottom, 0px);
}
.el-dock a{
  flex:1;min-width:0;min-height:50px;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--mid);text-decoration:none;border-top:2px solid transparent;margin-top:-1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;
  -webkit-tap-highlight-color:transparent;
  transition:color .3s var(--ease-out),background .35s var(--ease-out);
}
/* the room you are standing in must be legible ON the gold banner: gold on gold
   measured 1.55:1, so the marker took the label's own colour instead (8.7:1) */
.el-dock a.on{color:var(--aubergine);border-top-color:currentColor;}

/* ---- the frame answers the hand ----
   THE RULE, learned by measuring rather than guessing: A GLOW MUST BE LIGHTER THAN ITS
   GROUND. The console's old chrome glowed gold because it sat on cream. Carried onto the
   gold banner unchanged, gold-on-gold vanished: side by side against a plain neighbour it
   was invisible at real size. So each register carries its OWN light, and the light always
   rises out of the ground it stands on:
     staff  gold banner  -> a near-white bloom lifts off it
     warm   cream banner -> a gold wash settles into it
   That is the whole trick, and it is why this is one token, not one colour.

   The light RISES from the dock's own edge behind the room, rather than haloing the text:
   at 10px uppercase a text halo is noise, a lit cell is an answer. Circles fill with light.

   Hover is gated behind (hover:hover) so a phone never inherits a stuck hover after a tap.
   :active carries the SAME light to the finger and is NOT a nicety: the tap highlight is
   suppressed here on purpose, so this glow is the only thing a finger gets back. */
.el-top, .el-dock{ --el-glow:255,251,235; --el-glow-a:0.95; --el-glow-b:0.40; }
.el-top.el-warm, .el-dock.el-warm{ --el-glow:196,169,106; --el-glow-a:0.34; --el-glow-b:0.14; }

@media (hover:hover){
  .el-top .el-act:hover{
    color:var(--aubergine);border-color:var(--gold-border);
    background:radial-gradient(circle, rgba(var(--el-glow),var(--el-glow-a)) 0%, rgba(var(--el-glow),var(--el-glow-b)) 60%, transparent 78%);
    box-shadow:0 0 16px rgba(var(--el-glow),var(--el-glow-a));
  }
  .el-top .el-avatar:hover{
    border-color:var(--gold-border);
    box-shadow:0 0 16px rgba(var(--el-glow),var(--el-glow-a));
  }
  .el-dock a:hover{
    color:var(--aubergine);
    background:radial-gradient(70% 120% at 50% 100%, rgba(var(--el-glow),var(--el-glow-a)) 0%, rgba(var(--el-glow),var(--el-glow-b)) 45%, transparent 75%);
  }
}
/* the finger gets the same light, a touch brighter, because it is a shorter moment */
.el-top .el-act:active{
  color:var(--aubergine);border-color:var(--gold-border);
  background:radial-gradient(circle, rgba(var(--el-glow),1) 0%, rgba(var(--el-glow),var(--el-glow-a)) 60%, transparent 80%);
  box-shadow:0 0 20px rgba(var(--el-glow),1);transform:scale(0.94);
}
.el-top .el-avatar:active{
  border-color:var(--gold-border);box-shadow:0 0 20px rgba(var(--el-glow),1);transform:scale(0.94);
}
.el-dock a:active{
  color:var(--aubergine);
  background:radial-gradient(70% 120% at 50% 100%, rgba(var(--el-glow),1) 0%, rgba(var(--el-glow),var(--el-glow-a)) 45%, transparent 78%);
}
/* the mark already blooms on hover (see .el-home); the finger gets the same bloom */
.el-home:active .el-mark-spin{
  filter:drop-shadow(0 2px 5px rgba(60,50,35,0.28)) drop-shadow(0 0 13px rgba(232,216,164,0.9));
}

/* ---- the participant's light: the same frame, their own warmth ---- */
.el-top.el-warm, .el-dock.el-warm{
  background:linear-gradient(110deg, var(--cream-hi) 0%, var(--cream) 55%, var(--cream-lo) 100%);
  border-color:var(--line);
}
.el-top.el-warm .el-room{color:var(--ink);}
.el-top.el-warm .el-who{color:var(--gold-deep);}
.el-dock.el-warm a.on{color:var(--ink);border-top-color:currentColor;}

/* the room name yields before the rooms do: on a narrow phone the frame keeps
   its two jobs and drops only the label that the room itself already says. */
@media (max-width:560px){
  .el-top .el-who{display:none;}
  /* the dock label holds its declared 10px/0.13em even at 390px: shortening 'The Board'
     to 'Board' gave the five tabs the room they were being shrunk to fit. */
}
@media (prefers-reduced-motion: reduce){
  /* the glow STAYS: it is the frame's answer to the hand, not an animation. Only the
     easing and the press-scale go, so the light arrives at once instead of moving. */
  .el-top .el-act, .el-top .el-avatar, .el-dock a{transition:none;}
  .el-top .el-act:active, .el-top .el-avatar:active{transform:none;}
}

/* the living mark: the gold logo turns slowly on its Y axis, forever, a 3D
   turntable (the mark is left-right symmetric, so the back reads the same).
   The parent must set `perspective` for the depth; the transform stays a pure
   rotateY so it interpolates as an angle (a full turn), not a collapsing matrix. */
/* the rotating gold 3D mark. .el-mark is the perspective wrapper (kept gentle and
   CONSISTENT so the turn never warps into a funny stretch); .el-home makes it a
   click-to-home link; .el-mark-spin is the image, always square, softly glowing gold. */
.el-mark{display:inline-flex;line-height:0;perspective:640px;align-self:center;flex:none;}
.el-home{cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;}
/* the mark in a working room HOLDS STILL: a still gold PNG. The 16s linear rotate is
   retired (linear belongs to the Cosmos, never to a Room or Hall), and the cosmic morph
   is gated off in eleusis.js. The mark is the frame's quiet anchor, not its ceremony. */
.el-mark-spin{
  transform-origin:center;
  align-self:center;flex:none;object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(60,50,35,0.24)) drop-shadow(0 0 7px rgba(214,190,128,0.55));
}
.el-home:hover .el-mark-spin{filter:drop-shadow(0 2px 5px rgba(60,50,35,0.28)) drop-shadow(0 0 13px rgba(232,216,164,0.9));}

/* the cosmic mark: eleusis.js keys the golden morph onto a canvas laid over the
   still mark (which stays as the reduced-motion / fallback face). The mark no
   longer spins on its axis; instead the molten gold reshapes through the sacred
   forms. Same gold glow. The wrapper turns relative so the canvas fills its box. */
.el-mark.has-cosmic{position:relative;perspective:none;}
/* while the film buffers the still mark HOLDS beneath the (empty) canvas; it must
   hold STILL. The turntable spin is retired: it never shows once the morph owns the box. */
.el-mark.has-cosmic .el-mark-spin{animation:none;}
.el-mark-cosmic{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(60,50,35,0.24)) drop-shadow(0 0 7px rgba(214,190,128,0.55));
}
.el-home:hover .el-mark-cosmic{filter:drop-shadow(0 2px 5px rgba(60,50,35,0.28)) drop-shadow(0 0 13px rgba(232,216,164,0.9));}

/* ---------- 4 · THE ROSETTE (Seed of Life halo, D6) ---------- */
.el-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  width:min(78vw,420px);aspect-ratio:1;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle, rgba(226,212,168,0.5) 0%, rgba(196,169,106,0.16) 45%, rgba(196,169,106,0) 70%);
  filter:blur(6px);opacity:0;
  animation:el-halo-in 1.6s var(--ease-out) forwards, el-breathe var(--breath) var(--ease-out) 1.6s infinite;
}
.el-rosette{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  width:min(72vw,392px);aspect-ratio:1;z-index:0;pointer-events:none;opacity:0;
  animation:el-halo-in 1.6s var(--ease-out) .1s forwards, el-breathe var(--breath) var(--ease-out) 1.7s infinite;
}
.el-rosette circle{fill:none;vector-effect:non-scaling-stroke;}
.el-rosette .bound{stroke:var(--geo-soft);stroke-width:0.8;}
.el-rosette .seed{stroke:var(--geo-mid);stroke-width:var(--geo-line);}
/* petals pulse in C6 rotation: each delayed by breath/6 */
.el-rosette .p{animation:el-petal var(--breath) var(--ease-out) infinite;}
.el-rosette .p1{animation-delay:0s;}
.el-rosette .p2{animation-delay:calc(var(--breath)/6);}
.el-rosette .p3{animation-delay:calc(var(--breath)/3);}
.el-rosette .p4{animation-delay:calc(var(--breath)/2);}
.el-rosette .p5{animation-delay:calc(var(--breath)*2/3);}
.el-rosette .p6{animation-delay:calc(var(--breath)*5/6);}
@keyframes el-petal{0%,100%{stroke-opacity:0.42;}50%{stroke-opacity:0.95;}}
.el-rosette.exhale,.el-glow.exhale{animation:el-exhale 1.1s var(--ease-sheet) forwards;}
@keyframes el-halo-in{from{opacity:0;transform:translate(-50%,-52%) scale(0.9);}to{opacity:1;transform:translate(-50%,-52%) scale(1);}}
@keyframes el-breathe{0%,100%{transform:translate(-50%,-52%) scale(0.955);}50%{transform:translate(-50%,-52%) scale(1.045);}}
/* explicit from-state: the exhale class REPLACES the halo-in/breathe animation list,
   so without a from it would inherit the base opacity:0 and snap instead of exhale */
@keyframes el-exhale{from{transform:translate(-50%,-52%) scale(1);opacity:1;}to{transform:translate(-50%,-52%) scale(1.16);opacity:0;}}

/* Kluver tunnel ring, spawned by Eleusis.tunnel() on morphs */
.el-tring{
  position:absolute;top:50%;left:50%;width:min(72vw,392px);aspect-ratio:1;border-radius:50%;
  border:0.9px solid var(--gold-ring);z-index:0;pointer-events:none;
  transform:translate(-50%,-52%) scale(0.42);
  animation:el-ring-out 1.35s var(--ease-sheet) forwards;
}
@keyframes el-ring-out{to{transform:translate(-50%,-52%) scale(2.6);opacity:0;border-color:rgba(196,169,106,0);}}

/* ---------- 5 · CHOREOGRAPHY (staggered entrance) ---------- */
/* invisible is untappable, for fingers AND keyboards: visibility holds during
   the delay (no tab stop), the keyframes flip it visible as the rise begins */
.el-rise{opacity:0;visibility:hidden;animation:el-rise 1s var(--ease-spring) forwards;pointer-events:none;}
.el-rise.el-done{pointer-events:auto;visibility:visible;}
.el-d1{animation-delay:calc(.35s + 0*var(--step));}
.el-d2{animation-delay:calc(.35s + 1*var(--step));}
.el-d3{animation-delay:calc(.35s + 2*var(--step));}
.el-d4{animation-delay:calc(.35s + 3.3*var(--step));}
.el-d5{animation-delay:calc(.35s + 4.7*var(--step));}
/* the sixth rung: home and itinerary already call el-d6, and without it those lines
   ran at delay 0, so the LAST line of the page rose FIRST and the entrance played backwards */
.el-d6{animation-delay:calc(.35s + 6*var(--step));}
@keyframes el-rise{from{opacity:0;visibility:visible;transform:translateY(16px);}to{opacity:1;visibility:visible;transform:translateY(0);}}
/* a returning visitor's room settles quickly; the full ritual plays once per session */
.el-settled .el-rise{animation-duration:.4s;animation-delay:.05s;}

/* ---------- 6 · PANELS AND MORPHS (continuity, never swaps) ---------- */
.el-panel{position:relative;z-index:2;max-width:560px;transition:opacity .5s var(--ease-sheet), transform .5s var(--ease-sheet);}
.el-panel.leaving{opacity:0;transform:translateY(-18px) scale(0.985);pointer-events:none;}
.el-actions{position:absolute;left:0;right:0;bottom:calc(7vh + env(safe-area-inset-bottom, 0px));z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;transition:opacity .45s var(--ease-sheet), transform .45s var(--ease-sheet);}
/* exits by animation replacement: .el-actions often carries .el-rise (forwards fill),
   which would defeat a transition; the .leaving animation overrides the whole list */
.el-actions.leaving{opacity:0;transform:translateY(10px);pointer-events:none;animation:el-leave .45s var(--ease-sheet) forwards;}
@keyframes el-leave{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(10px);}}
.el-after{
  position:absolute;left:var(--gutter);right:var(--gutter);top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;visibility:hidden;
}
.el-after.show{visibility:visible;}
.el-after > *{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease-spring), transform .8s var(--ease-spring);}
.el-after.show > :nth-child(1){transition-delay:.12s;}
.el-after.show > :nth-child(2){transition-delay:.26s;}
.el-after.show > :nth-child(3){transition-delay:.4s;}
.el-after.show > :nth-child(4){transition-delay:.54s;}
.el-after.show > *{opacity:1;transform:translateY(0);}

/* ---------- 7 · TYPE ROLES ---------- */
.el-over{font-size:var(--t-over);letter-spacing:0.3em;text-transform:uppercase;color:var(--gold-deep);}
.el-h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,9vw,44px);color:var(--ink);letter-spacing:0.01em;}
.el-h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,7vw,36px);color:var(--ink);}
.el-body{font-weight:300;font-size:clamp(14.5px,3.9vw,16px);color:var(--mid);line-height:1.8;}
.el-gold-note{font-size:var(--t-label);letter-spacing:0.14em;color:var(--gold-deep);}
.el-quiet{font-weight:300;font-size:var(--t-quiet);letter-spacing:0.06em;color:var(--pale);}

/* ---------- 8 · CONTROLS ---------- */
.el-btn{
  font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:0.22em;text-transform:uppercase;
  border-radius:999px;padding:17px 64px;cursor:pointer;border:none;
  transition:transform .14s var(--ease-spring), box-shadow .3s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.el-btn.gold{
  color:var(--deep);
  background:linear-gradient(110deg, #C9AE72 0%, #DCCB99 25%, #E7DAB0 50%, #DCCB99 75%, #C9AE72 100%);
  background-size:200% 100%;
  animation:el-sheen 6s ease-in-out infinite alternate;
  box-shadow:0 10px 30px rgba(124,94,38,0.22), inset 0 1px 0 rgba(255,255,255,0.55);
}
.el-btn.gold:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(124,94,38,0.28), inset 0 1px 0 rgba(255,255,255,0.55);}
.el-btn.quiet{color:var(--ink);background:transparent;border:1px solid var(--gold-border);padding:17px 40px;}
.el-btn.quiet:hover{transform:translateY(-1px);}
.el-btn.down{transform:scale(0.955);}
@keyframes el-sheen{0%{background-position:0% 0;}100%{background-position:100% 0;}}

/* ---------- 9 · GEOMETRY GLYPHS ---------- */
.el-vesica{margin:16px auto;display:block;}
.el-vesica circle{fill:none;stroke:var(--geo-strong);stroke-width:var(--geo-line);}
/* the wider family: one gold hairline treatment for every sacred-geometry motif
   (vesica, seed, merkaba, pyramid, triquetra, mandala, metatron, torus, sri yantra).
   Eleusis.motif(name) / [data-el-geo="name"] draw these; see eleusis.js MOTIFS. */
.el-geo{margin:16px auto;display:block;}
.el-geo circle,.el-geo line,.el-geo polygon,.el-geo polyline,.el-geo path{
  fill:none;stroke:var(--geo-strong);stroke-width:var(--geo-line);
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;}
.el-geo .bindu{fill:var(--geo-strong);stroke:none;}
.el-dots{display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle;}
.el-dots i{width:5px;height:5px;border-radius:50%;background:var(--gold);display:block;animation:el-dot 2.1s var(--ease-out) infinite;}
.el-dots i:nth-child(2){animation-delay:.7s;}
.el-dots i:nth-child(3){animation-delay:1.4s;}
@keyframes el-dot{0%,100%{opacity:0.25;transform:scale(0.85);}33%{opacity:1;transform:scale(1);}}

/* ---------- 10 · STILLNESS (reduced motion honors the doctrine) ---------- */
@media (prefers-reduced-motion: reduce){
  /* the one animation that plays on EVERY navigation: the user agent does not skip a
     view transition for reduced motion, the author must, and this block never said so */
  ::view-transition-old(root),::view-transition-new(root){animation-duration:1ms;}
  .el-bloom,.el-lattice,.el-glow,.el-rosette,.el-btn.gold,.el-dots i{animation:none;opacity:1;}
  .el-bloom{opacity:0.55;} /* its designed strength, not the reset's 1 */
  .el-rosette .p{animation:none;}
  .el-rise{animation:none;opacity:1;pointer-events:auto;visibility:visible;}
  .el-panel,.el-actions,.el-after > *{transition:none;}
  .el-tring{display:none;}
  .el-frontier,.el-frontier .card,.el-back{transition:none;}
  .el-mark-spin{animation:none;}
  /* morphs end in their settled states without motion */
  .el-rosette.exhale,.el-glow.exhale{animation:none;opacity:0;}
  .el-actions.leaving{animation:none;opacity:0;}
}

/* ---------- 11 · DESKTOP (the same door, wide open) ---------- */
@media (min-width:900px){
  .el-h1{font-size:54px;}
  .el-body{font-size:17px;}
  .el-glow{width:520px;}
  .el-rosette{width:480px;}
  .el-tring{width:480px;}
  .el-actions{bottom:9vh;}
  .el-btn{padding:19px 78px;font-size:15.5px;}
  .el-actions.row{flex-direction:row;justify-content:center;gap:16px;}
  /* THE FRAME GETS A DESKTOP: the rooms leave the bottom and join the top bar as tabs,
     so a 1280px console stops wearing a 56px phone tab strip with its labels marooned. */
  /* the banner is chrome, not reading: it spans the whole desktop rather than being boxed to
     the text column, which on a wide monitor left the mark and the rooms bunched toward the
     middle with dead cream either side. A gutter that scales, never cramped, never marooned. */
  .el-top{padding-inline:max(var(--el-gut), calc((100% - var(--el-wide)) / 2));}
  /* the bar spreads across instead of crowding one end. Two auto margins used to fight
     (the acts and the dock each claimed the slack), which stranded the search pill in the
     middle of the bar with the rooms jammed at the right. Now the rooms take the centre
     and the acts hold the far edge: left, middle, right, the way a wide bar should read. */
  .el-top .el-acts{order:3;margin-left:0;}
  /* the rooms take the whole middle span and stand apart in it. Held together by auto
     margins they read as one clump dropped in the centre of a very wide bar; given the
     span and spaced evenly inside it, the bar has three weights across its width and the
     labels are far enough apart to be read as separate doors. */
  .el-dock{position:static;order:2;height:auto;background:none;border:0;
    flex:1 1 auto;min-width:0;justify-content:space-evenly;
    padding:0 clamp(16px, 2.2vw, 52px);margin:0;}
  /* and they are read at arm's length on a desktop, not at thumb distance: the dock's
     10px phone label was the same 10px on an 1800px screen. */
  /* they may shrink before they collide: the acts never yield, so a tab that cannot
     fit ellipsises rather than sliding under the search pill. */
  .el-dock a{flex:0 1 auto;min-width:0;min-height:38px;padding:0 clamp(6px, 0.9vw, 18px);
    font-size:clamp(11px, 0.8vw, 14px);letter-spacing:0.18em;
    border-top:0;border-bottom:2px solid transparent;margin-top:0;}
  .el-dock a.on{border-bottom-color:currentColor;border-top-color:transparent;}
  body.el-framed{padding-bottom:0;}
}
/* between the two desktops the bar carries more than it can hold: five rooms, a search,
   an avatar and the coordinator's title. The title yields first, because the room already
   names itself and the rooms are the thing you navigate with. */
@media (min-width:900px) and (max-width:1319px){
  .el-top .el-who{display:none;}
  .el-dock{padding:0 clamp(8px, 1.2vw, 24px);}
}

/* ---------- 12 · THE SCHEDULER ----------
   One overlay, drawn by Eleusis.calls.open() for both registers. A call carries
   two clocks and the sheet SHOWS them both, live, before the time is set, so the
   zone can never be the thing that goes wrong. Warm by default (participant),
   .staff for the coordinator. On a phone it rises as a bottom sheet. */
.el-sched{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(44,40,32,0.30);opacity:0;pointer-events:none;
  transition:opacity .34s var(--ease-out);}
.el-sched.show{opacity:1;pointer-events:auto;}
.el-sched-card{width:min(440px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;
  background:var(--cream-hi);border:1px solid var(--gold-border);border-radius:var(--r-card);
  padding:24px 24px 20px;box-shadow:0 30px 80px rgba(44,40,32,0.22);
  transform:translateY(16px);transition:transform .4s var(--ease-spring);}
.el-sched.show .el-sched-card{transform:none;}
.el-sched.staff .el-sched-card{background:var(--cream-cool-hi);border-color:var(--gold-border);}
.el-sched-ttl{font-family:var(--serif);font-weight:500;font-size:25px;color:var(--ink);line-height:1.1;}
.el-sched-sub{margin-top:5px;font-family:var(--sans);font-weight:300;font-size:13.5px;color:var(--mid);}
.el-sched-fld{display:block;margin-top:14px;}
.el-sched-lbl{display:block;margin-bottom:6px;font-family:var(--sans);font-weight:500;
  font-size:var(--t-caption);letter-spacing:0.16em;text-transform:uppercase;color:var(--pale);}
.el-sched-in{width:100%;min-height:44px;font-family:var(--sans);font-weight:300;font-size:15px;color:var(--ink);
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-control);padding:10px 14px;outline:none;
  -webkit-appearance:none;appearance:none;}
select.el-sched-in{appearance:auto;-webkit-appearance:auto;}
.el-sched.staff .el-sched-in{border-color:var(--aubergine-line);background:var(--cream-cool);}
.el-sched-in:focus{border-color:var(--gold-border);}
.el-sched-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.el-sched-two .el-sched-fld{margin-top:0;}
.el-sched-inzone{margin-top:9px;font-family:var(--sans);font-weight:300;font-size:12.5px;color:var(--pale);}
.el-sched-inzone b{font-weight:500;color:var(--gold-deep);}
.el-sched-seg{display:flex;gap:6px;}
.el-sched-seg button{flex:1;min-height:44px;font-family:var(--sans);font-weight:400;font-size:12.5px;color:var(--mid);
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-control);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;}
.el-sched.staff .el-sched-seg button{background:var(--cream-cool);border-color:var(--aubergine-line);}
.el-sched-seg button.on{color:var(--gold-deep);border-color:var(--gold-border);background:rgba(196,169,106,0.10);font-weight:500;}
.el-sched-confirm{margin-top:18px;padding:14px 16px;border:1px solid var(--gold-border);border-radius:var(--r-card);
  background:rgba(196,169,106,0.07);}
.el-sched-confirm-lbl{font-family:var(--sans);font-weight:500;font-size:var(--t-caption);letter-spacing:0.18em;
  text-transform:uppercase;color:var(--gold-deep);}
.el-sched-clocks{margin-top:8px;}
.el-sched-clock{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:8px 0;}
.el-sched-clock + .el-sched-clock{border-top:1px solid var(--line);}
.el-sched-clock-t{font-family:var(--serif);font-weight:600;font-size:23px;color:var(--ink);min-width:92px;}
.el-sched-clock.lead .el-sched-clock-t{color:var(--gold-deep);}
.el-sched-clock-w{flex:1;min-width:150px;font-family:var(--sans);font-weight:300;font-size:12.5px;color:var(--mid);}
.el-sched-clock-z{color:var(--pale);}
.el-sched-clock-d{width:100%;font-family:var(--sans);font-weight:300;font-size:11.5px;color:var(--pale);letter-spacing:0.02em;}
.el-sched-clock.muted{font-family:var(--sans);font-weight:300;font-size:13px;color:var(--pale);display:block;}
.el-sched-same{margin-top:8px;font-family:var(--sans);font-weight:300;font-size:12px;color:var(--pale);}
.el-sched-same.warn{color:var(--warn);}
.el-sched-acts{display:flex;align-items:center;gap:12px;margin-top:20px;}
.el-sched-go{min-height:46px;padding:0 26px;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:0.02em;
  color:var(--deep);background:linear-gradient(180deg,var(--gold-light),var(--gold));border:0;border-radius:var(--r-control);
  cursor:pointer;box-shadow:0 8px 22px rgba(124,94,38,0.20);transition:transform .18s var(--ease-out),box-shadow .18s;}
.el-sched-go:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(124,94,38,0.26);}
.el-sched-go.down{transform:scale(0.97);}
.el-sched-no{margin-left:auto;min-height:44px;padding:0 14px;font-family:var(--sans);font-weight:400;font-size:12.5px;
  color:var(--pale);background:none;border:0;cursor:pointer;}
.el-sched-no:hover{color:var(--mid);}
.el-sched-no.down{transform:scale(0.97);}
@media (max-width:640px){
  .el-sched{align-items:flex-end;padding:0;}
  .el-sched-card{width:100%;max-width:none;max-height:88dvh;border-radius:var(--r-card) var(--r-card) 0 0;
    border-bottom:0;transform:translateY(102%);padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));}
}
@media (prefers-reduced-motion: reduce){
  .el-sched{transition:none;}
  .el-sched-card{transition:none;transform:none;}
  .el-sched-go{transition:none;}
}