/* =========================================================================
   moondragon-pages.css
   Inner content pages and the shared footer.
   Loaded after moondragon-hero.css on every page, so it reuses the same
   tokens, palette and buttons. The hero stylesheet is left untouched, and
   nothing here changes the home page except the shared footer, which is
   intentionally site wide. Inner page rules are scoped to body.inner so the
   hero pages cannot be affected.
   ========================================================================= */

/* ---------------- Inner page header: solid bar, not over a photo ---------- */
body.inner .nav{
  position:static;
  background:var(--cream);
  border-bottom:1px solid var(--rule);
}

/* ---------------- Inner page shell ---------------- */
body.inner main{ padding:0 0 3.5rem; }

.page{
  width:min(100%, 64rem);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.page-narrow{ max-width:46rem; }   /* healings and other single column pages */

.page-head{ padding:3.4rem 0 1.4rem; }
.page-head h1{
  font-size:clamp(2.2rem, 4.4vw, 3.4rem);
  letter-spacing:-.01em; margin-bottom:.6rem;
}
.page-head .lede{
  font-size:clamp(1.1rem,1.5vw,1.3rem);
  color:var(--ink-soft); max-width:48ch; margin:0;
}

/* ---------------- Prose ---------------- */
.prose{ max-width:42rem; }
.prose p{ margin:0 0 1.1rem; }
.prose h2{
  font-family:var(--display); font-variation-settings:var(--wonk); font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2rem); margin:2.6rem 0 1rem; line-height:1.1;
}
.prose h3{ font-size:1.2rem; margin:1.8rem 0 .5rem; }
.prose ul{ margin:0 0 1.2rem; padding-left:1.2rem; }
.prose li{ margin:.3rem 0; }

/* A soft display quotation used to open a page, such as the Gibran line. */
.epigraph{
  font-family:var(--display); font-variation-settings:var(--wonk); font-style:italic;
  font-size:clamp(1.15rem,1.8vw,1.5rem); color:var(--hedge-near);
  max-width:38ch; margin:1.4rem 0 2rem; line-height:1.32;
}
.epigraph cite{
  display:block; font-style:normal; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:.6rem;
}

/* Full width divider for the content column. */
.page-rule{ width:100%; height:1px; background:var(--rule); border:0; margin:2.6rem 0; }

/* ---------------- Price list: a vertical stack of cards ---------------- */
.prices{ display:flex; flex-direction:column; gap:1.2rem; margin:1.4rem 0 0; max-width:46rem; }
.price{
  background:var(--cream); border:1px solid var(--rule);
  border-radius:14px; padding:1.4rem 1.6rem;
}
.price h3{
  font-family:var(--display); font-variation-settings:var(--wonk); font-weight:400;
  font-size:1.35rem; margin:0 0 .35rem; line-height:1.15;
}
.price .meta{
  display:flex; flex-wrap:wrap; gap:.35rem 1.2rem;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--hedge-near); margin:0 0 .7rem;
}
.price .meta .cost{ color:var(--accent); font-weight:500; }
.price p{ margin:0 0 .6rem; }
.price p:last-child{ margin-bottom:0; }
.price ul{ margin:.5rem 0 0; padding-left:1.2rem; }
.price li{ margin:.25rem 0; }

/* ---------------- Testimonial ---------------- */
.quote{
  background:var(--page-alt); border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0; padding:1.4rem 1.6rem;
  max-width:44rem; margin:2.4rem 0;
}
.quote p{
  font-family:var(--display); font-variation-settings:var(--wonk); font-style:italic;
  font-size:1.15rem; margin:0 0 .6rem; color:var(--ink); line-height:1.4;
}
.quote cite{
  font-style:normal; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* Small muted note line, for example the disclaimer reminder. */
.note{ font-size:.9rem; color:var(--ink-soft); }

/* Call to action row at the foot of a page. Buttons reuse the hero .btn set. */
.page-cta{ margin:2.6rem 0 0; display:flex; flex-wrap:wrap; gap:.85rem; }

/* ---------------- Shared footer (every page) ----------------
   Kept a light warm bar so the coloured logo reads. No black, no dark slab. */
.site-footer{
  background:var(--page-alt); color:var(--ink);
  border-top:1px solid var(--rule);
}
body.inner .site-footer{ margin-top:1.5rem; }
.site-footer .foot-inner{
  width:min(100%, 1180px); margin-inline:auto;
  padding:3rem var(--gutter);
  display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:2rem;
}
.foot-brand img{ height:60px; width:auto; display:block; margin-bottom:.9rem; }
.foot-brand p{ margin:0; color:var(--ink-soft); max-width:36ch; font-size:.95rem; }
.site-footer h4{
  font-family:var(--display); font-variation-settings:var(--wonk); font-weight:400;
  font-size:1.05rem; margin:0 0 .8rem; color:var(--ink);
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin:.35rem 0; }
.site-footer a{ color:var(--ink-soft); text-decoration:none; font-size:.92rem; }
.site-footer a:hover{ color:var(--accent); text-decoration:underline; }
.foot-contact p{ margin:.3rem 0; color:var(--ink-soft); font-size:.92rem; }
.foot-secondary{ margin-top:.9rem; }
.foot-bar{
  border-top:1px solid var(--rule);
  padding:1.1rem var(--gutter); text-align:center;
  font-size:.8rem; color:var(--ink-soft);
}
.foot-bar a{ color:var(--ink-soft); }

@media (max-width:760px){
  .site-footer .foot-inner{ grid-template-columns:1fr; gap:1.6rem; }
  .page-head{ padding-top:2.4rem; }
}

/* ---------------- Contact form ---------------- */
.contact-form{ max-width:38rem; margin-top:1.5rem; }
.field{ margin:0 0 1.1rem; }
.field label{ display:block; font-size:.85rem; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 .35rem; }
.field input, .field textarea{
  width:100%; font:inherit; color:var(--ink);
  background:var(--cream); border:1px solid var(--rule); border-radius:10px;
  padding:.7rem .85rem;
}
.field textarea{ resize:vertical; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent); }
.contact-form .btn{ cursor:pointer; }

/* =========================================================================
   Richer inner page styling: banner header, drop cap, benefit grid, session
   cards, moon divider and pull quote. Adds warmth and rhythm to content pages
   while staying inside the locked palette and type. Used by the *.php pages.
   ========================================================================= */

/* Banner header: the page's own photo under the nav, title over a soft veil. */
.page-banner{
  position:relative; isolation:isolate;
  min-height:clamp(210px, 32vh, 340px);
  display:flex; align-items:flex-end; padding:var(--gutter);
  overflow:hidden;
}


.page-banner::before{
  content:""; position:absolute; inset:0; z-index:-2;
  /* --pos sets which part of the photo is held in frame. Default center, so
     every existing banner behaves exactly as before; events.php passes top. */
  background:var(--img) var(--pos, center)/cover no-repeat; background-color:#cdd2b4;
}


/* The veil that lifts the title off the photograph. Every number below is a
   variable with today's value as its fallback, so a banner that sets nothing
   renders exactly as it always has. A page whose photo is busy or bright can
   pass its own on the section tag, next to --img.

     --veil-angle  direction of the sweep; 95deg reads left to right
     --veil-a      opacity at the left edge, where the words sit
     --veil-b      opacity at the middle stop
     --veil-mid    where that middle stop falls; push it right to hold the
                   veil further across the frame
     --veil-c      opacity at the right edge, where the photo is left alone
     --veil-foot   opacity of the soft green shadow rising off the bottom

   The colour is the page cream, 244,240,227, and is not a variable: rgba()
   needs the channels separately, and the palette has no split token. */
.page-banner::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(var(--veil-angle, 95deg),
      rgba(244,240,227, var(--veil-a, .94)) 0%,
      rgba(244,240,227, var(--veil-b, .6)) var(--veil-mid, 46%),
      rgba(244,240,227, var(--veil-c, .12)) 100%),
    linear-gradient(0deg,
      rgba(44,59,40, var(--veil-foot, .22)) 0%,
      rgba(44,59,40, 0) 55%);
}
.page-banner .banner-inner{ width:min(100%,64rem); margin-inline:auto; position:relative; z-index:1; }
.page-banner.narrow .banner-inner{ max-width:46rem; }
.page-banner h1{ font-size:clamp(2.3rem,4.8vw,3.7rem); letter-spacing:-.01em; margin:0 0 .35rem; }
.page-banner .lede{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--ink-soft); max-width:46ch; margin:0; }

/* Space below the banner before the content column starts. */
body.inner main > .page:first-of-type{ padding-top:2.6rem; }

/* Drop cap on the first paragraph of an intro. */
.prose.lead > p:first-of-type::first-letter{
  font-family:var(--display); font-variation-settings:var(--wonk);
  float:left; font-size:3.6rem; line-height:.72; padding:.35rem .5rem 0 0; color:var(--accent);
}

/* Benefits: a scannable two column list with a small leaf marker. */
.benefits{
  --leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 6 4 10 4 15a8 8 0 0016 0c0-5-3-9-8-13z'/%3E%3C/svg%3E");
  list-style:none; margin:1rem 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.6rem; max-width:44rem;
}
.benefits li{ position:relative; padding-left:1.7rem; }
.benefits li::before{
  content:""; position:absolute; left:0; top:.42em; width:.85rem; height:.85rem;
  background:var(--hedge-mid);
  -webkit-mask:var(--leaf) center/contain no-repeat; mask:var(--leaf) center/contain no-repeat;
}

/* Session cards: a coloured edge and a prominent price pill. */
.sessions{ display:flex; flex-direction:column; gap:1.2rem; margin:1.4rem 0 0; max-width:47rem; }
.session{
  position:relative; background:var(--cream); border:1px solid var(--rule);
  border-radius:16px; padding:1.5rem 1.6rem 1.5rem 1.9rem; overflow:hidden;
}
.session::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--hedge-mid); }
.session .price-tag{
  float:right; margin:.1rem 0 .5rem 1rem;
  background:var(--accent); color:var(--cream);
  font-family:var(--display); font-variation-settings:var(--wonk); font-size:1.1rem;
  padding:.3rem .85rem; border-radius:999px; white-space:nowrap;
}
.session h3{ font-family:var(--display); font-variation-settings:var(--wonk); font-weight:400; font-size:1.4rem; margin:0 0 .3rem; line-height:1.12; }
.session .meta{ font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--hedge-near); margin:0 0 .85rem; display:flex; gap:1rem; flex-wrap:wrap; }
.session p{ margin:0 0 .6rem; } .session p:last-child{ margin-bottom:0; }
.session ul{ margin:.5rem 0 0; padding-left:1.2rem; } .session li{ margin:.25rem 0; }

/* A quiet section aside, e.g. "what a session is like". */
.aside-card{
  background:var(--page-alt); border-radius:14px; padding:1.5rem 1.7rem;
  max-width:44rem; margin:1.6rem 0;
}
.aside-card h2{ margin-top:0; }

/* Moon divider between sections. */
.divider{ display:flex; align-items:center; gap:1.1rem; margin:2.6rem 0; max-width:47rem; }
.divider::before, .divider::after{ content:""; height:1px; background:var(--rule); flex:1; }
.divider svg{ width:20px; height:20px; color:var(--hedge-mid); flex:0 0 auto; }

/* Pull quote testimonial. */
.pullquote{
  position:relative; max-width:44rem; margin:2.8rem 0;
  padding:1.7rem 1.8rem 1.5rem 3.3rem; background:var(--page-alt); border-radius:14px;
}
.pullquote::before{
  content:"\201C"; position:absolute; left:.7rem; top:.05rem;
  font-family:var(--display); font-size:4rem; line-height:1; color:var(--accent); opacity:.5;
}
.pullquote p{ font-family:var(--display); font-variation-settings:var(--wonk); font-style:italic; font-size:1.2rem; line-height:1.4; margin:0 0 .6rem; color:var(--ink); }
.pullquote cite{ font-style:normal; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }

@media (max-width:760px){
  .benefits{ grid-template-columns:1fr; }
}

/* =========================================================================
   Atmosphere on inner pages: a soft hedgerow wash behind the content and the
   dragon large on the right, half off the page. Applied to every inner page
   via the .page-atmos layer injected by inc-hero-head.php. Tune the two
   opacities below to taste. The home page is untouched.
   ========================================================================= */
html{ background:var(--page); }
body.inner{ background:transparent; }

.page-atmos{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.page-atmos::before{           /* the hedgerow photo, very faint */
  content:""; position:absolute; inset:0;
  background:var(--hero-image) center/cover no-repeat;
  opacity:.09;
}
.page-atmos::after{            /* the dragon, ghosted, hanging off the right */
  content:""; position:absolute; top:50%; right:-7vw; transform:translateY(-50%);
  width:50vw; height:94vh;
  background:var(--mark-image) right center/contain no-repeat;
  filter:brightness(0); opacity:.11;
}
@media (max-width:760px){
  .page-atmos::after{ right:-26vw; width:88vw; opacity:.07; }
}

/* Let the faint wash show through the content column and cards sit on cream. */
body.inner .page{ position:relative; z-index:1; }

/* =========================================================================
   Navigation tweaks: white highlight on hover; the logo graphic carries the
   name, so the separate wordmark is dropped and the mark is doubled in size.
   Placed here so moondragon-hero.css stays untouched; these load after it and
   win. Applies to every page. To keep the larger logo to the HOME page only,
   change the two ".nav-logo" selectors below to ".hero-page .nav-logo".
   ========================================================================= */
.nav-links a{
  padding-inline:.6rem; border-radius:7px;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.nav-links a:hover{ background:#fff; color:var(--ink); border-color:transparent; }

.nav-logo .wordmark{ display:none; }   /* the logo already says the name */
.nav-logo img{ height:84px; }          /* twice the original 42px */

/* ---------------- Nav moon dial, enlarged ----------------
   Overrides moondragon-hero.css, which loads first. The SVG has a 0 0 40 40
   viewBox and the script draws in viewBox coordinates, so scaling here cannot
   affect the phase geometry. Text raised to match the nav links exactly. */
.moon-dial svg{ width:52px; height:52px; }
.moon-dial .moon-text{ font-size:.82rem; letter-spacing:.12em; }


/* =========================================================================
   The events diary. Two pages share this block.

   events.php  a quiet list. A heading each time the month changes, then each
               event as a two column row: the words on the left, a small
               greyscaled flyer on the right. The flyer lifts most of the way
               back into colour on hover, gently, so it rewards attention
               without shouting across the page.
   event.php   one event in full. The flyer at proper size and full colour,
               the facts as a list, the description in prose.

   Everything below reuses the locked palette and type from
   moondragon-hero.css. No new colours, no new fonts.
   ========================================================================= */

/* ---------------- events.php: the list ---------------- */

.events-list{ max-width:47rem; margin:0; }

.month-head{
  font-family:var(--display); font-variation-settings:var(--wonk); font-weight:400;
  font-size:clamp(1.4rem, 2.2vw, 1.85rem); line-height:1.1;
  color:var(--hedge-near); letter-spacing:.01em;
  margin:3rem 0 1.2rem; padding-bottom:.5rem;
  border-bottom:1px solid var(--rule);
}
.events-list > .month-head:first-child{ margin-top:0; }

/* One row. The media column is auto, so an event with no flyer simply lets
   the words run the full width; no placeholder, no empty frame. */
.event{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:1.6rem; align-items:start;
  padding:1.4rem 0 1.6rem;
  border-bottom:1px solid var(--rule);
}
.event:last-child{ border-bottom:0; }

.event-body{ min-width:0; }

/* The whole details block is one link, to the map, or to the organiser's page
   when there is no map. Colour is inherited so it does not read as a raw
   hyperlink; the cue is the small goto line and the title lifting on hover. */
.event-detail{
  display:block; color:inherit; text-decoration:none;
  border-radius:10px; padding:.2rem .4rem; margin:-.2rem -.4rem;
  transition:background-color .25s ease;
}
a.event-detail:hover{ background:var(--cream); }
a.event-detail:hover h3{ color:var(--accent); }

.event-date{
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--hedge-near); margin:0 0 .3rem;
}
.event-detail h3{
  font-family:var(--display); font-variation-settings:var(--wonk); font-weight:400;
  font-size:clamp(1.25rem, 2vw, 1.5rem); line-height:1.14;
  margin:0 0 .35rem; color:var(--ink);
  transition:color .25s ease;
}
.event .meta{
  font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 .3rem;
  display:flex; gap:1rem; flex-wrap:wrap;
}
.event-where{ margin:0; color:var(--ink-soft); font-size:.95rem; }

/* The small cue inside the details block, saying where the words lead. */
.event-goto{
  margin:.5rem 0 0; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
}
a.event-detail:hover .event-goto{ color:var(--accent-lift); }

.event-links{ margin:.9rem 0 0; }
.event-links .btn{ font-size:.7rem; padding:.6rem 1.2rem; }

/* The flyer. Held to 300px high, greyscaled so it sits back into the page,
   and eased most of the way into colour on hover. */
.event-media{ max-width:15rem; }
.event-media a{ display:block; border-radius:12px; overflow:hidden; }
.event-media img{
  display:block; width:auto; max-width:100%; max-height:300px;
  border:1px solid var(--rule); border-radius:12px;
  filter:grayscale(1); opacity:.86;
  transition:filter .4s ease, opacity .4s ease;
}
.event-media a:hover img,
.event-media a:focus-visible img{ filter:grayscale(.3); opacity:1; }

@media (prefers-reduced-motion: reduce){
  .event-media img{ transition:none; }
}

/* Below the fold width the two columns cannot hold. Words first, flyer under,
   still capped and still greyscaled; the flyer leading would push the date
   and the title off the screen. */
@media (max-width:760px){
  .event{ grid-template-columns:1fr; gap:1.1rem; }
  .event-media{ max-width:100%; }
  .event-media img{ max-height:300px; }
}

/* ---------------- event.php: one event in full ---------------- */

.event-full{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:2.6rem; align-items:start; max-width:64rem; margin:0;
}
.event-full .prose{ max-width:none; }

/* Here the flyer is the point, so it runs at size and in full colour. */
.event-flyer img{
  display:block; width:100%; height:auto;
  border:1px solid var(--rule); border-radius:14px;
}
.event-flyer figcaption{
  margin-top:.6rem; font-size:.82rem; color:var(--ink-soft);
}

/* The facts, as a plain description list rather than a paragraph, so the
   date, the time and the address can be found at a glance. */
.event-facts{
  background:var(--cream); border:1px solid var(--rule); border-radius:14px;
  padding:1.3rem 1.5rem; margin:0 0 1.6rem;
  display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.2rem;
}
.event-facts dt{
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hedge-near); padding-top:.18rem;
}
.event-facts dd{ margin:0; color:var(--ink); }

/* A quiet line on a date that has already been and gone. The page stays, so
   the search listing it has earned is not thrown away. */
.event-past{
  background:var(--page-alt); border-left:3px solid var(--hedge-mid);
  border-radius:0 10px 10px 0; padding:.9rem 1.2rem;
  margin:0 0 1.6rem; color:var(--ink-soft); font-size:.95rem;
}

@media (max-width:900px){
  .event-full{ grid-template-columns:1fr; gap:1.8rem; }
  .event-flyer{ max-width:32rem; }
  .event-facts{ grid-template-columns:1fr; gap:.15rem; }
  .event-facts dt{ margin-top:.6rem; }
}

/* =========================================================================
   Footer social icons. Bold bramble discs under the brand paragraph, in the
   widest of the three footer columns. 44px is a comfortable thumb target as
   well as a confident size. The rules below sit above the general
   .site-footer a colours by specificity, so the discs keep their own look.
   ========================================================================= */

.foot-social{
  list-style:none; margin:1.3rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.7rem;
}
.foot-social li{ margin:0; }

.foot-social .soc{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px;
  background:var(--accent); color:var(--cream);
  text-decoration:none;
  transition:background-color .25s ease, transform .25s ease;
}
.foot-social .soc:hover,
.foot-social .soc:focus-visible{
  background:var(--accent-lift); color:var(--cream);
  text-decoration:none; transform:translateY(-2px);
}
.foot-social svg{ width:22px; height:22px; display:block; }

@media (prefers-reduced-motion: reduce){
  .foot-social .soc{ transition:none; }
  .foot-social .soc:hover{ transform:none; }
}

/* =========================================================================
 */

.page-banner::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--img);
  background-repeat:no-repeat;
  background-size:cover;
  /* --pos sets which part of the photo is held in frame. Default center, so
     every existing banner behaves exactly as before; events.php passes top. */
  background-position:var(--pos, center);
  background-color:#cdd2b4;
}
   About page portraits. Scoped to body.about, so nothing else on the site can
   be touched by these rules. Two photographs float in the text column, one
   right and one left, and the words wrap around them. Below 760px they go
   full width and centre, because a float in a narrow column leaves the text
   running in a gutter two words wide.
   ========================================================================= */

body.about .prose .portrait{
  float:right; width:16rem; max-width:45%;
  margin:.4rem 0 1.2rem 1.8rem;
}
body.about .prose .portrait.left{
  float:left;
  margin:.4rem 1.8rem 1.2rem 0;
}
body.about .prose .portrait img{
  display:block; width:100%; height:auto;
  border:1px solid var(--rule); border-radius:14px;
}

/* A heading landing alongside a float reads as a mistake, so every section
   starts on a clean line. */
body.about .prose h2{ clear:both; }

/* Contain the floats, so a short list cannot let a photograph hang down into
   the buttons underneath. */
body.about .prose::after{ content:""; display:table; clear:both; }

@media (max-width:760px){
  body.about .prose .portrait,
  body.about .prose .portrait.left{
    float:none; width:100%; max-width:22rem;
    margin:1.4rem auto 1.6rem;
  }
}

/* =========================================================================
   Share me modal. Appended for inc-share.php.
   One panel serves every button on the page; the script writes the words in.

   IMPORTANT: .share-modal is display:flex, which would override the hidden
   attribute on its own. The [hidden] rule below puts that right, and it
   wins on specificity regardless of source order. Do not remove it, or the
   modal will sit open on every page load.
   ========================================================================= */

html.share-open { overflow: hidden; }

.share-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.share-modal[hidden] { display: none; }

.share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 59, 40, .74);
}

.share-panel {
  position: relative;
  z-index: 1;
  width: min(30rem, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.75rem 1.5rem 1.5rem;
  background: #f4f0e3;
  color: #2c3b28;
  border: 1px solid rgba(109, 74, 99, .3);
  border-radius: .75rem;
  box-shadow: 0 1.25rem 3rem rgba(44, 59, 40, .38);
  font-family: "Alegreya Sans", system-ui, sans-serif;
}

.share-x {
  position: absolute;
  top: .4rem;
  right: .55rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #6d4a63;
  cursor: pointer;
}

.share-x:hover,
.share-x:focus-visible {
  background: rgba(109, 74, 99, .14);
  color: #2c3b28;
}

.share-title {
  margin: 0 2.25rem .25rem 0;
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 1.35rem;
  color: #2c3b28;
}

.share-what {
  margin: 0 0 1.1rem;
  font-size: .95rem;
  color: #6d4a63;
}

.share-what:empty { display: none; }

.share-choices {
  display: grid;
  gap: .6rem;
}

.share-choice {
  display: block;
  width: 100%;
  padding: .7rem .9rem;
  text-align: left;
  font: inherit;
  color: #2c3b28;
  background: #fbf8ee;
  border: 1px solid rgba(44, 59, 40, .18);
  border-radius: .5rem;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.share-choice:hover,
.share-choice:focus-visible {
  background: #fffdf6;
  border-color: #6d4a63;
}

.share-choice-name {
  display: block;
  font-weight: 600;
  font-size: 1.02rem;
}

.share-choice-note {
  display: block;
  margin-top: .1rem;
  font-size: .84rem;
  color: rgba(44, 59, 40, .68);
}

.share-said {
  min-height: 1.3em;
  margin: .9rem 0 0;
  font-size: .9rem;
  line-height: 1.45;
  color: #6d4a63;
}

.share-small {
  margin: 1rem 0 0;
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(44, 59, 40, .55);
}

@media (max-width: 30rem) {
  .share-modal { padding: .75rem; align-items: flex-end; }
  .share-panel { border-radius: .75rem .75rem 0 0; max-height: 92vh; }
}