/* =====================================================================
   embeds.css — players, pictures and link cards pasted onto a letter
   (sky/embeds.js). each sits on the paper like a print tucked into a
   notebook: a pale mount, a soft shadow, two bits of tape.
   ===================================================================== */

.letter figure.embed,
.content figure.embed,
.letter figure.taped,
.content figure.taped {
    position: relative;
    margin: 1.6em auto;
    padding: 9px 9px 6px;
    max-width: 100%;
    background: #f6ecd2;
    box-shadow: 0 0 0 1px rgba(80, 55, 25, .25), 0 6px 14px rgba(60, 35, 15, .35), inset 0 0 18px rgba(140, 100, 50, .18);
    transform: rotate(-.5deg);
}
.letter figure.embed:nth-of-type(even),
.content figure.embed:nth-of-type(even) { transform: rotate(.6deg); }
/* the tape */
.letter figure.embed::before, .letter figure.embed::after,
.content figure.embed::before, .content figure.embed::after,
.letter figure.taped::before, .letter figure.taped::after,
.content figure.taped::before, .content figure.taped::after {
    content: "";
    position: absolute;
    top: -9px;
    width: 64px;
    height: 20px;
    background: linear-gradient(to bottom, rgba(236, 226, 196, .78), rgba(214, 198, 160, .7));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    pointer-events: none;
    z-index: 2;
}
.letter figure.embed::before, .content figure.embed::before,
.letter figure.taped::before, .content figure.taped::before { left: 12px; transform: rotate(-7deg); }
.letter figure.embed::after, .content figure.embed::after,
.letter figure.taped::after, .content figure.taped::after { right: 12px; transform: rotate(6deg); }

/* a picture of your own, alone on its line: the mount fits the picture, the tape on its top corners, and each at
   its own angle (--tilt, --nudge, --tape-*: set per picture by DavEmbed.taped, from its name) */
.letter figure.taped,
.content figure.taped {
    width: fit-content;
    max-width: 92%;                                   /* (room for the shift and the tilt, so a wide one stays on the paper) */
    padding-bottom: 9px;
    margin-top: 2em;
    transform: translateX(var(--nudge, 0%)) rotate(var(--tilt, -1.5deg));
}
.letter figure.taped::before, .content figure.taped::before {
    left: var(--tape-lx, 12px); width: var(--tape-w, 64px); transform: rotate(var(--tape-l, -7deg));
}
.letter figure.taped::after, .content figure.taped::after {
    right: var(--tape-rx, 12px); width: var(--tape-w, 64px); transform: rotate(var(--tape-r, 6deg));
}
figure.taped img { display: block; max-width: 100%; height: auto; margin: 0; box-shadow: none; }

/* a player: as wide as the page, the shape it asks for */
.em-frame {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: var(--em-ratio, 56.25%);
    background: #1e1610;
    overflow: hidden;
}
.em-frame.em-fixed { height: var(--em-h, 166px); padding-top: 0; background: #e8dcbc; }
.em-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* phone-shaped things (a short, a reel, a post) stay narrow */
figure.embed.em-tall { width: min(100%, 360px); }

/* a picture, a video, a sound */
figure.embed.em-image img,
figure.embed.em-video video { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; background: #1e1610; }
/* (16:9 until it knows its own shape: its file isn't fetched till it's on the screen) */
figure.embed.em-video video { aspect-ratio: auto 16 / 9; }
/* (a moving picture, like a gif: its own size, like a picture, and a see-through one shows the mount through it) */
.letter figure.embed.em-moving, .content figure.embed.em-moving { width: fit-content; }
figure.embed.em-video.em-moving video { width: auto; max-width: 100%; background: none; }
/* (no caption: nothing under it) */
figure.embed.em-video figcaption:empty { display: none; }
figure.embed.em-audio { padding-top: 14px; }
figure.embed.em-audio audio { display: block; width: 100%; }

/* what it is, and where to open it */
figure.embed figcaption {
    margin: 5px 2px 0;
    font-size: .78rem;
    font-style: italic;
    text-align: right;
    line-height: 1.3;
}
figure.embed figcaption a { color: #6e5236; text-decoration: none; }
figure.embed figcaption a:hover { color: #9a3b1f; text-decoration: underline; }

/* a link it has no player for: a little card, like a ticket */
figure.embed.em-card { padding: 0; background: none; box-shadow: none; transform: rotate(-.4deg); }
figure.embed.em-card::before, figure.embed.em-card::after { display: none; }
.em-card a.em-card,
a.em-card {
    display: flex;
    gap: 14px;
    align-items: stretch;
    padding: 12px 16px;
    border: 1.5px dashed rgba(110, 82, 54, .55);
    border-radius: 6px;
    background: rgba(246, 236, 210, .75);
    color: #3a2716;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(60, 35, 15, .18);
}
a.em-card:hover { background: rgba(252, 245, 228, .9); border-color: #9a3b1f; }
.em-pic { flex: 0 0 auto; width: 120px; overflow: hidden; border-radius: 3px; background: #e8dcbc; }
.em-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.em-words { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 2px; }
.em-site { font-family: "IM Fell English SC", Georgia, serif; font-size: .82rem; letter-spacing: .05em; color: #9a3b1f; }
.em-title { font-size: 1.05rem; line-height: 1.3; }
.em-url { font-size: .74rem; font-style: italic; color: #6e5236; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) {
    .em-pic { width: 76px; }
}

/* ---------- a page written by hand (sky/inkpad.js): straight on the paper, as wide as the writing, no tape ---------- */
.letter figure.handwritten,
.content figure.handwritten {
    margin: .3em 0 1.1em;
    padding: 0;
    transform: none;
}
.letter figure.handwritten img,
.content figure.handwritten img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    filter: none;
    box-shadow: none;
}

/* ---------- a song of your own (DavEmbed.songHtml): a record half out of its sleeve, taped on, its name and a play button beside it.
   the sleeve and the record as the record player draws them (records.css: .rp-sleeve), so a song given to the record player
   looks the same there ---------- */
.letter figure.em-song,
.content figure.em-song {
    display: flex;
    align-items: center;
    gap: 22px;
    width: fit-content;
    max-width: 100%;
    margin: 2em auto 1.8em;
    padding: 0;
    background: none;
    box-shadow: none;
    transform: rotate(-1.2deg);
}
.letter figure.em-song::before, .content figure.em-song::before { left: -14px; top: -6px; width: 58px; transform: rotate(-38deg); }
.letter figure.em-song::after, .content figure.em-song::after { display: none; }
.em-song .es-record {
    position: relative;
    flex: none;
    width: 150px;
    height: 150px;
    margin-right: 46px;                               /* (room for the record peeking out) */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.em-song .es-disc {
    position: absolute;
    left: 6%;
    top: 6%;
    width: 88%;
    height: 88%;
    transform: translateX(30%);
    transition: transform .6s cubic-bezier(.3, .7, .3, 1.2);
}
.em-song .es-disc svg { display: block; width: 100%; height: 100%; }
.em-song .es-record:hover .es-disc { transform: translateX(38%); }
.em-song.playing .es-disc { transform: translateX(52%); }
.em-song.playing .es-disc svg { animation: es-spin 1.8s linear infinite; }
@keyframes es-spin { to { transform: rotate(360deg); } }
.em-song .es-sleeve {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 2px;
    background: var(--sl, #9a3b1f);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 26px rgba(0, 0, 0, .18);
}
.em-song .es-sleeve img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; box-shadow: none; filter: none; }
.em-song .es-plain {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 14%;
    text-align: center;
    color: #f3e6c2;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.15;
    background: radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(255, 240, 210, .14) 30.5% 31.5%, transparent 32% 44%, rgba(255, 240, 210, .1) 44.5% 45.5%, transparent 46%),
                linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .18));
}
.em-song .es-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 260px; margin: 0; text-align: left; }
.em-song .es-title { font: normal 1.25rem/1.15 "IM Fell English SC", Georgia, serif; }
.em-song .es-note { font-style: italic; font-size: .88rem; color: var(--ink-faded, #6e5236); line-height: 1.3; }
.em-song .es-controls { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.em-song .es-play {
    flex: none;
    padding: 3px 14px;
    border: 0;
    border-radius: 999px;
    background: #3a2716;
    color: #f3e6c2;
    font: italic .95rem "IM Fell English", Georgia, serif;
    cursor: pointer;
}
.em-song .es-play:hover { background: #9a3b1f; }
.em-song .es-seek { flex: 1; min-width: 60px; accent-color: #9a3b1f; }
.em-song .es-time { flex: none; font-size: .8rem; color: var(--ink-faded, #6e5236); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
    .letter figure.em-song, .content figure.em-song { flex-direction: column; align-items: flex-start; gap: 10px; }
    .em-song .es-record { width: 120px; height: 120px; }
}

/* in the content manager and at the desk: what each will do, written over it (the site itself doesn't say) */
.preview figure.em-video[data-autoplay] figcaption:empty, .dk-preview figure.em-video[data-autoplay] figcaption:empty,
.preview figure.em-moving figcaption:empty, .dk-preview figure.em-moving figcaption:empty,
.preview figure.em-video[data-loop] figcaption:empty, .dk-preview figure.em-video[data-loop] figcaption:empty { display: block; }
.preview figure.embed[data-loop] > figcaption::after, .dk-preview figure.embed[data-loop] > figcaption::after {
    content: " · \221E  starts again whenever it ends";
    color: #9a3b1f;
}
.preview figure.em-moving > figcaption::before, .dk-preview figure.em-moving > figcaption::before {
    content: "\21BB  a moving picture: silent, round and round · ";
    color: #9a3b1f;
}
.preview figure.embed:not(.em-song)[data-autoplay] > figcaption::before, .dk-preview figure.embed:not(.em-song)[data-autoplay] > figcaption::before,
.preview figure.em-song[data-autoplay] .es-note::before, .dk-preview figure.em-song[data-autoplay] .es-note::before {
    content: "\25B6\FE0E  plays by itself when the letter's opened · ";
    color: #9a3b1f;
}
.preview figure.em-song[data-gift] .es-note::after, .dk-preview figure.em-song[data-gift] .es-note::after {
    content: " · it falls out for whoever opens the letter (the first time), plays, and goes in their record player";
    color: #9a3b1f;
}