/* ===========================================================================
   The side widget, for pages served from the SITE folder.
   ---------------------------------------------------------------------------
   The blog carries its own copy of these rules inside editorial.css, because
   the two stylesheets can never load into each other — the blog cannot load
   the site's main.css, and a site page must not load the blog's editorial.css
   or the whole page would be restyled. This file is the site-side copy, linked
   only into the pages PetalPress injects the widget into.

   Restyling the panel means editing BOTH this file and the .ew block in
   editorial.css. That duplication is deliberate and was chosen over merging
   the two stylesheets, which would have restyled the blog and the site at once.

   The block below is the blog's, verbatim, followed by two additions:
   the --ed-* variables it expects (the blog declares them, the site does not),
   and the Work variant, which is the same panel mirrored to the left.
   =========================================================================== */

/* The editorial theme's tokens, resolved from the site's own Warm Autumn
   palette so the panel matches the page it now sits on. */
.ew {
  --ed-ink: var(--wa-sage);
  --ed-soft: color-mix(in srgb, var(--wa-sage) 85%, var(--wa-cream));
  --ed-mute: color-mix(in srgb, var(--wa-espresso) 65%, var(--wa-cream));
  --ed-line: var(--wa-almond);
  --ed-raise: color-mix(in srgb, var(--wa-cream) 55%, #fff);
  --ed-page: var(--wa-cream);
  --ed-display: 'Libre Baskerville', Georgia, serif;
  --ed-label: 'Gentium Book Plus', Georgia, serif;
}

/* Above .masthead, which is sticky at z-index 100 — otherwise the translucent
   header paints over the top of the panel and swallows the LIFE line. */
.ew{position:fixed; inset:0; z-index:120; pointer-events:none}
.ew > *{pointer-events:auto}

/* --- the button ----------------------------------------------------------
   Not pinned to the edge: cursor.js moves it by transform so it trails the
   pointer at a distance. Its own transform is therefore owned by the script —
   the lift animation moves the FACE, never the button, or the two would fight
   over the same property. */
.ew-fab{
  position:fixed; top:0; left:0; will-change:transform;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:none; border:0; padding:0; cursor:pointer;
  transition:opacity .25s ease;
}
/* No pointer to follow — park it where a thumb can reach. */
.ew-fab.is-parked{top:auto; bottom:22px; left:auto; right:22px; transform:none}
/* A hexagon, like the pointer and its trail — nothing in the pointer is round.
   clip-path crops a box-shadow away, so the lift uses drop-shadow instead:
   that follows the six sides rather than a square around them. */
.ew-fab-face{
  width:64px; height:64px; display:block;
  background:var(--wa-linen) center/cover no-repeat;
  background-image:url('/theme/elyne.jpg');
  clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  animation:ew-lift 3.6s ease-in-out infinite;
}
.ew-fab-word{
  position:relative; padding-bottom:4px;
  font-family:var(--wa-label,Poppins,sans-serif); font-weight:700; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--wa-espresso);
}
/* The call to action. Poppins capitals, quieter than LIFE above it. */
.ew-fab-call{
  font-family:var(--wa-label,Poppins,sans-serif); font-weight:400; font-size:8px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--wa-rust);
}
.ew-fab-word::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; background:var(--wa-rust);
  animation:ew-underline 3.6s ease-in-out infinite;
}
/* Her choice, 25 Aug: 13 and 15 together. They share one 3.6s cycle on purpose —
   the rule reaches full width at 50%, exactly when the button is at the top of
   its lift, so the two read as a single gesture rather than two loops drifting
   against each other. */
@keyframes ew-lift{
  0%,100%{transform:translateY(0);    filter:drop-shadow(0 5px 7px rgba(44,33,25,.30))}
  50%    {transform:translateY(-4px); filter:drop-shadow(0 11px 9px rgba(44,33,25,.34))}
}
@keyframes ew-underline{
  0%  {width:0;    opacity:0}
  20% {            opacity:1}
  50% {width:100%; opacity:1}
  85% {width:100%; opacity:0}
  100%{width:0;    opacity:0}
}
.ew.is-open .ew-fab{opacity:0; pointer-events:none}

/* --- the panel ----------------------------------------------------------- */
.ew-panel{
  position:fixed; right:0; top:0; bottom:0; width:min(360px,92vw);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--ed-page); border-left:1px solid var(--ed-line);
  box-shadow:-18px 0 44px -30px rgba(44,33,25,.55);
  padding:26px 26px 34px; text-align:center;
}
.ew-close{
  position:absolute; top:12px; right:14px; background:none; border:0; cursor:pointer;
  font-size:22px; line-height:1; color:var(--ed-mute); padding:4px 6px;
}
.ew-close:hover{color:var(--wa-rust)}

/* LIFE — the same word and weight as the diagonal on the home page. Sizes and
   spacing below are her specification of 25 Aug, set in blog-widget-type.html. */
.ew-life{
  font-family:var(--wa-label,Poppins,sans-serif); font-weight:700;
  font-size:35px; letter-spacing:.10em; line-height:1; text-transform:uppercase;
  color:var(--wa-espresso); margin:6px 0 22px;
}
.ew-face{
  display:block; width:112px; height:112px; margin:0 auto 16px; border-radius:50%;
  border:1px solid var(--ed-line); background:var(--wa-linen) center/cover no-repeat;
  background-image:url('/theme/elyne.jpg');
}
/* The wordmark, then the tag beneath it — the footer lockup, repeated. */
.ew-mark{display:block; width:min(190px,74%); height:auto; margin:2px auto 9px}
.ew-tag{
  font-family:var(--wa-label,Poppins,sans-serif); font-weight:300; font-size:7.5px;
  letter-spacing:.30em; line-height:1; text-transform:uppercase; color:var(--ed-soft);
  margin:0 0 22px;
}

/* The creed — her choice of ten, 25 Aug: no visible label, two abreast, each
   with a short rust rule beneath. "I am" is still carried for screen readers,
   so the sense survives even though nothing prints it. */
.ew-creed{
  list-style:none; margin:0 0 24px; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:10px 12px;
}
.ew-creed li{text-align:center; padding:4px 0}
.ew-creed .v{
  font-family:var(--wa-label,Poppins,sans-serif); font-weight:300; font-size:7.5px;
  letter-spacing:.25em; line-height:1; text-transform:uppercase;
  color:var(--wa-espresso); display:block;
}
.ew-creed .r{display:block; width:18px; height:1px; background:var(--wa-rust); margin:7px auto 0}

/* --- socials ------------------------------------------------------------- */
.ew-social{list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px; margin:0 0 24px; padding:0; position:relative}
.ew-social > li > a{display:grid; place-items:center; width:30px; height:30px;
  border:1px solid transparent; border-radius:50%; color:var(--ed-soft)}
.ew-social > li > a:hover{color:var(--wa-rust); border-color:var(--ed-line)}
.ew-social svg{width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
/* A platform with more than one account opens a named list. <details> rather
   than a scripted popover: it is keyboard-operable and closes the others by
   itself through the shared name. */
.ew-social details > summary{
  display:grid; place-items:center; width:30px; height:30px; position:relative;
  border:1px solid transparent; border-radius:50%; color:var(--ed-soft);
  cursor:pointer; list-style:none;
}
.ew-social details > summary::-webkit-details-marker{display:none}
.ew-social details > summary:hover{color:var(--wa-rust); border-color:var(--ed-line)}
.ew-social details[open] > summary{color:var(--wa-rust); border-color:var(--wa-rust)}
.ew-social summary i{
  position:absolute; right:-3px; bottom:-3px; min-width:12px; height:12px; padding:0 2px;
  border-radius:6px; background:var(--wa-rust); color:var(--wa-cream);
  font-family:var(--wa-label,Poppins,sans-serif); font-style:normal; font-weight:400;
  font-size:7.5px; line-height:12px; text-align:center;
}
.ew-menu{
  position:absolute; left:0; right:0; top:100%; margin-top:10px; z-index:3;
  background:var(--ed-raise); border:1px solid var(--ed-line); padding:12px 14px;
  display:grid; gap:2px; text-align:left; max-height:46vh; overflow-y:auto;
  box-shadow:0 14px 30px -22px rgba(44,33,25,.6);
}
.ew-menu-cap{
  margin:0 0 7px; font-family:var(--wa-label,Poppins,sans-serif); font-weight:300;
  font-size:8px; letter-spacing:.25em; text-transform:uppercase; color:var(--wa-rust);
}
.ew-menu a{
  font-family:var(--ed-display); font-weight:400; font-size:11.5px; line-height:1.5;
  color:var(--ed-ink); text-decoration:none; padding:5px 0;
  border-bottom:1px solid rgba(199,179,147,.4);
}
.ew-menu a:last-child{border-bottom:0}
.ew-menu a:hover{color:var(--wa-rust)}

.ew-social-empty{font-family:var(--wa-label,Poppins,sans-serif); font-weight:300;
  font-size:10px; letter-spacing:.25em; line-height:2; text-transform:uppercase;
  color:var(--ed-mute); margin:0 0 24px}

/* --- lists -------------------------------------------------------------- */
.ew-sec{margin:0 0 22px}
.ew-sec h3{
  font-family:var(--wa-label,Poppins,sans-serif); font-weight:300; font-size:10px;
  letter-spacing:.25em; line-height:2; text-transform:uppercase; color:var(--wa-rust);
  margin:0 0 10px; padding-bottom:7px; border-bottom:1px solid var(--ed-line);
}
.ew-list{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.ew-list li{display:grid; gap:2px}
/* Libre Baskerville ships 400 and 700 only. 300 is her explicit choice and the
   browser will synthesise it — see the note in the master file. */
.ew-list a{font-family:var(--ed-display); font-weight:300; font-size:12px;
  letter-spacing:0; line-height:1.5; color:var(--ed-ink); text-decoration:none}
.ew-list a:hover{color:var(--wa-rust)}
.ew-list span{font-family:var(--ed-label); font-weight:400; font-size:9px;
  letter-spacing:.16em; line-height:1.5; text-transform:uppercase; color:var(--ed-mute)}

.ew-rss a{font-family:var(--ed-display); font-weight:700; font-size:10px;
  letter-spacing:.20em; line-height:1.5; text-transform:uppercase; color:var(--ed-soft);
  text-decoration:none}
.ew-rss a:hover{color:var(--wa-rust)}

/* --- the footer lockup, repeated from the site --------------------------- */
.ew-foot{margin-top:28px; padding-top:18px; border-top:1px solid var(--ed-line);
  display:grid; gap:8px}
.ew-foot-base{font-family:var(--wa-label,Poppins,sans-serif); font-weight:300;
  font-size:7.5px; letter-spacing:.35em; line-height:2; text-transform:uppercase;
  color:var(--ed-soft)}

@media (max-width:900px){
  .ew-fab-face{width:54px; height:54px}
}
@media (prefers-reduced-motion:reduce){
  .ew-fab, .ew-panel, .ew-fab *, .ew-fab-word::after{
    transition:none !important; animation:none !important;
  }
  /* With no animation the rule would be stuck at width:0 — show it at rest. */
  .ew-fab-word::after{width:100%; opacity:1}
}


/* ---------------------------------------------------------------------------
   WORK — the same panel, mirrored.
   Life slides in from the right; Work comes in from the left, so the two read
   as opposite sides of the same site rather than the same drawer twice. Only
   the handed properties are restated; everything else is inherited from above.
   --------------------------------------------------------------------------- */
.ew--work .ew-panel {
  right: auto; left: 0;
  border-left: 0; border-right: 1px solid var(--ed-line);
  box-shadow: 18px 0 44px -30px rgba(44, 33, 25, .55);
}
.ew--work .ew-close { right: auto; left: 14px; }
/* Parked, the button belongs on its own side too. */
.ew--work .ew-fab.is-parked { right: auto; left: 22px; }