.share-button {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 13px;
  border:2px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
}
.share-button[hidden] { display:none; }
.share-button:focus-visible { outline:3px solid var(--pumpkin); outline-offset:3px; }
.share-button__glyph { width:16px; height:16px; flex:0 0 auto; }
.share-live {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.story-share { min-height:56px; margin-top:16px; }
.story-share[hidden] { display:none; }
html:not(.js) .story-share { display:none; }
.share-button--hero {
  width:100%;
  min-height:56px;
  padding:16px;
  border-width:3px;
  gap:10px;
  font-size:12px;
  letter-spacing:.18em;
  line-height:1.3;
  box-shadow:5px 5px 0 var(--pumpkin);
  transition:transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.share-button--hero .share-button__glyph { width:18px; height:18px; }
.share-button--hero:active { transform:translate(5px,5px); box-shadow:0 0 0 var(--pumpkin); }
@media (min-width:820px) {
  .story-share { margin-top:20px; }
  .share-button--hero { width:auto; min-width:260px; }
}

.share-button--on-dark {
  border-color:#F4ECD8;
  background:transparent;
  color:#F4ECD8;
  padding:0 14px;
  font-size:var(--t-micro);
}
.share-button--on-dark:focus-visible {
  outline-color:#E4A41A;
  background:#F4ECD8;
  color:#1A130F;
}

@media (hover:hover) {
  .share-button:hover { background:var(--pumpkin-dark); color:var(--paper); }
  .share-button--hero:hover {
    background:var(--ink);
    color:var(--paper);
    transform:translate(-3px,-3px);
    box-shadow:8px 8px 0 var(--pumpkin);
  }
  .share-button--hero:active {
    transform:translate(5px,5px);
    box-shadow:0 0 0 var(--pumpkin);
  }
  .share-button--on-dark:hover { background:#F4ECD8; color:#1A130F; }
}

.share-chooser {
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
}
.share-chooser::backdrop {
  background:rgba(42,32,26,.72);
  background:color-mix(in oklab, var(--ink) 72%, transparent);
}
.share-chooser__panel {
  padding:16px 18px calc(18px + env(safe-area-inset-bottom));
  border-top:4px solid var(--ink);
  background:var(--paper);
  background-image:var(--grain);
  background-size:200px 200px;
}
.share-chooser { position:fixed; inset:auto 0 0 0; }
@media (min-width:820px) {
  .share-chooser {
    position:fixed;
    inset:0;
    margin:auto;
    width:min(560px, calc(100% - 48px));
  }
  .share-chooser__panel {
    padding:20px 24px 24px;
    border:3px solid var(--ink);
    box-shadow:var(--shadow-lg);
  }
}
.share-chooser__bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.share-chooser__title {
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.share-chooser__close {
  width:44px;
  height:44px;
  padding:0;
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  font:700 22px/1 var(--font-mono);
}
.share-chooser__close:focus-visible { outline:3px solid var(--pumpkin); outline-offset:3px; }
.share-chooser__pair,
.share-chooser__captions {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  column-gap:14px;
}
.share-chooser__pair { align-items:end; }
.share-chooser__option {
  min-width:0;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  text-align:inherit;
  -webkit-tap-highlight-color:transparent;
}
.share-chooser__option:disabled { cursor:default; }
.share-chooser__option:focus-visible { outline:3px solid var(--pumpkin); outline-offset:4px; }
.share-chooser__link-art,
.share-chooser__story-art {
  display:block;
  width:100%;
  border:2px solid var(--ink);
  background:var(--paper);
  box-shadow:3px 3px 0 var(--ink);
  overflow:hidden;
}
.share-chooser__option:active:not(:disabled) .share-chooser__link-art,
.share-chooser__option:active:not(:disabled) .share-chooser__story-art {
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink);
}
.share-chooser__link-art img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1.91 / 1;
  object-fit:cover;
  object-position:center;
}
.share-chooser__link-art img[hidden] { display:none; }
.share-chooser__link-art[data-image-failed] .share-chooser__link-chrome {
  aspect-ratio:1.91 / 1;
}
.share-chooser__link-chrome {
  display:grid;
  align-content:end;
  gap:2px;
  padding:8px;
  border-top:2px solid var(--ink);
  font-family:var(--font-mono);
}
.share-chooser__link-title {
  display:-webkit-box;
  overflow:hidden;
  font-size:10px;
  line-height:1.25;
  letter-spacing:.04em;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.share-chooser__domain {
  font-size:10px;
  line-height:1.25;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--smoke);
}
.share-chooser__story-art {
  aspect-ratio:9 / 16;
  display:grid;
  place-items:center;
}
.share-chooser__story-art img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.share-chooser__story-art img[hidden] { display:none; }
.share-chooser__story-state {
  padding:8px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.4;
  text-align:center;
  text-transform:uppercase;
}
[data-share-story-state="pending"] .share-chooser__story-state {
  text-decoration:underline dotted;
  text-underline-offset:4px;
}
[data-share-story-state="exhausted"] .share-chooser__story-state { opacity:.5; }
.share-chooser__story-state[hidden] { display:none; }
.share-chooser__captions {
  padding-top:10px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
}
@keyframes share-rise {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:no-preference) {
  .share-chooser[open] [data-share-option="link"] {
    animation:share-rise 160ms ease-out both;
  }
  .share-chooser[open] [data-share-option="story"] {
    animation:share-rise 160ms ease-out 40ms both;
  }
}