@font-face {
  font-family: Share Fraunces;
  src: url('/assets/typeface/fraunces-roman.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
.wip-share-page {margin:0;background:#eae5db;color:#282a24;}
.share-study {
  --share-paper:#f6f2e9;
  --share-ink:#252922;
  --share-green:#30463a;
  --share-line:#363e3530;
  --share-title: "Share Fraunces", Fraunces, Georgia, serif;
  box-sizing:border-box;color:var(--share-ink);
  font:14px/1.45 Arial,sans-serif;
}
.share-study *, .share-study *::before, .share-study *::after {box-sizing:border-box;}
.wip-share-page .share-study {width:min(100%,780px);margin:auto;padding:18px 16px 32px;}
.share-study-dialog {
  width:min(430px,calc(100% - 20px));max-height:calc(100dvh - 24px);
  overflow:auto;border:1px solid #a4a99a;border-radius:18px;padding:17px;
  background:var(--share-paper);
}
.share-study-dialog::backdrop {background:#151b18b0;}
.share-study-close {position:absolute;right:9px;top:8px;}
.share-study-close button {width:44px;font-size:23px;}
.share-study h1,.share-study h2,.share-study h3,.share-study p,.share-study figure {margin:0;}
.share-study h1,.share-study h2 {font:400 clamp(28px,8vw,43px)/1.05 var(--share-title);}
.share-study h2 {font-size:29px;}
.share-study button,.share-study a {touch-action:manipulation;}
.share-study :is(a,button,input):focus-visible {outline:2px solid #457153;outline-offset:3px;}
.share-study button {
  border:1px solid var(--share-line);background:#fff8;border-radius:7px;
  color:var(--share-ink);min-height:44px;padding:6px 10px;font:600 13px Arial,sans-serif;
  cursor:pointer;
}
.share-masthead {
  min-height:35px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--share-line);
  padding-bottom:9px;margin-bottom:15px;font:500 19px var(--share-title);
}
.share-masthead small {margin-left:auto;font:600 10px Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em;}
.share-kicker {color:#525c52;font:600 10px/1.4 Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase;}
.share-study [data-share-options] {max-width:410px;margin:auto;}
.share-study [data-share-options] h2 {margin:3px 0 10px;}
.share-targets {display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:10px;}
.share-targets [aria-pressed=true], .share-copy button {
  background:var(--share-green);color:#fff;border-color:var(--share-green);
}
.share-message {overflow:hidden;border:1px solid var(--share-line);border-radius:13px;background:#f8f5ed;}
.share-message-picture {display:grid;place-items:center;background:#dedacf;padding:8px;}
.share-message-picture .share-art-card {width:min(100%,240px);}
.share-message-copy {padding:8px 12px 10px;}
.share-message-copy small {color:#53645a;font:600 10px Arial,sans-serif;letter-spacing:.12em;}
.share-message-copy h3 {font:500 20px/1.15 var(--share-title);margin:3px 0;}
.share-message-copy p {color:#4f594f;font-size:12px;}
.share-copy {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:9px;}
.share-copy input {width:100%;min-height:44px;padding:8px;border:1px solid var(--share-line);border-radius:7px;background:#fff9;color:#363e35;font-size:12px;}
.share-feedback {min-height:17px;color:#415f47;font-size:12px;}
.share-test-link {display:inline-flex;align-items:center;min-height:44px;color:#30463a;text-underline-offset:3px;}
.share-art-card {
  --art-paper:#e7d9c5;--art-ink:#723f36;
  display:grid;justify-items:center;gap:4px;min-width:0;padding:7px 8px 9px;
  background:var(--art-paper);color:var(--art-ink);border-radius:4px;
}
[data-art=chapter] {--art-paper:#151b1b;--art-ink:#eddfbf;}
[data-art=trail] {--art-paper:#ebe4cc;--art-ink:#254b3b;}
[data-art=melody] {--art-paper:#261826;--art-ink:#efd1f4;}
[data-art=movie] {--art-paper:#35291f;--art-ink:#e9dab8;}
[data-art=clock] {--art-paper:#060c13;--art-ink:#d7edf6;}
.share-card-date {font:600 9px Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;text-align:center;}
.share-humans {display:grid;justify-items:center;gap:2px;line-height:1;}
.share-humans strong {font:650 43px/.92 var(--share-title);letter-spacing:-.04em;}
@supports (background-clip:text) {
  .share-humans strong {
    background:radial-gradient(circle,var(--art-ink) 53%,transparent 68%) 0 0/3px 3px;
    background-clip:text;color:transparent;
  }
}
.share-humans span {font:700 13px/1.15 Arial,sans-serif;letter-spacing:.06em;}
.share-work {width:100%;min-width:0;}
.share-work svg {display:block;width:100%;height:100%;}
.share-art-card .share-work {height:146px;width:100%;display:grid;place-items:center;}
.share-art-card .share-work.share-canvas {width:auto;}
.share-message-picture .share-work.share-canvas {height:174px;}
.share-canvas {position:relative;aspect-ratio:558/671;isolation:isolate;}
.share-canvas .share-pixels {position:absolute;inset:8.4% 7.3%;width:85.4%;height:83.2%;image-rendering:pixelated;}
.share-canvas .share-frame {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.share-unavailable {display:grid;place-content:center;padding:8px;text-align:center;font-size:10px;}
.share-public-earth {display:block;width:100%;aspect-ratio:1;object-fit:contain;}
.share-chapter {
  display:grid;place-items:center;padding:6px 10px;background:#101719 url('/assets/sentence-paper-texture-v015ad.png') center/cover;
}
.share-scroll {
  position:relative;isolation:isolate;min-height:116px;width:100%;padding:14px 11px;
  display:grid;place-content:center;gap:3px;text-align:center;color:#eee0c1;
  font:400 11px/1.18 var(--share-title);
}
.share-scroll::before {
  content:'';position:absolute;z-index:-1;inset:0;border:0 solid transparent;
  border-image:url('/assets/chapter-scroll-approved.svg') 125 45 180 45 fill / 11px 6px 15px 6px stretch;
  filter:brightness(.45) saturate(1.4) hue-rotate(8deg) drop-shadow(1px 2px 3px #000a);
}
.share-scroll span {font-size:8px;font-style:italic;}
.share-art-card .share-one {display:grid;justify-items:center;font:500 24px/.94 var(--share-title);text-transform:capitalize;}
.share-signature {display:flex;align-items:center;gap:4px;font:600 9px Arial,sans-serif;}
.share-signature img {width:12px;height:12px;}
[data-art=chapter] .share-signature img,[data-art=melody] .share-signature img,
[data-art=movie] .share-signature img,[data-art=clock] .share-signature img {filter:invert(1);}
.share-project-cover {width:100%;background:#e8dfd0;color:#34473d;padding:8px;}
.share-project-cover > p {font:600 18px/1.1 var(--share-title);text-align:center;padding:2px 0 8px;}
.share-project-art {width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;align-items:stretch;}
.share-project-art figure {display:grid;grid-template-rows:126px auto;place-items:center;background:var(--art-paper,#ead9c3);color:var(--art-ink,#633c33);padding:3px;overflow:hidden;}
.share-project-art .share-work {width:100%;height:auto;max-height:122px;}
.share-project-art .share-work.share-canvas {width:min(100%,102px);}
.share-project-art .share-chapter {padding:0;}
.share-project-art .share-scroll {min-height:110px;padding:12px 4px;font-size:9px;}
.share-project-art figcaption {font:500 13px var(--share-title);text-transform:capitalize;padding:3px;}
.share-gallery {margin-top:22px;padding-top:16px;border-top:1px solid var(--share-line);}
.share-gallery > p {margin:4px 0 10px;color:#535d52;}
.share-gallery-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(134px,1fr));gap:9px;}
.share-arrival {max-width:530px;margin:auto;display:grid;justify-items:center;gap:9px;text-align:center;}
.share-arrival .share-canvas {width:min(100%,min(53dvh,370px));}
.share-arrival-caption,.share-arrival-invitation {font-size:12px;color:#51594e;}
.share-participate {
  display:grid;place-items:center;min-height:49px;width:min(100%,350px);padding:8px 12px;
  background:var(--share-green);color:#fff;border-radius:999px;font-weight:700;text-decoration:none;
}
