@import url('./free-drops.css');
@import url('./idea.css');

:root { scroll-behavior: auto; }
.sample-copy h1 { font-size: var(--fs-title); }
.sample-copy .meta { margin-top: 24px; }
.sample-inner { align-items: center; }
.sample-copy .sample-download { margin-top: 24px; font-weight: 600; }
.sample-shortcuts { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 10px; font-size: var(--fs-small); }
.sample-shortcuts a { display: inline-flex; align-items: center; min-height: 44px; }
.sample-hero-cover, .sample-story { display: none; }
.sample-hero-cover img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-card); }
.sample-post { display: grid; gap: 56px 80px; scroll-margin-top: 104px; }
body[data-page="free"] .sample-post.section { padding-top: var(--marketing-section-y, 72px); }
.sample-post h2 { font-size: var(--fs-h2); }
.sample-copy-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.sample-copy-help { margin-block: 24px; max-width: 48ch; }
.sample-caption { padding-block: 24px; border-block: 1px solid var(--line); }
.sample-caption p + p { margin-top: 1em; }
.sample-post p { max-width: 48ch; }
.sample-alt-list { margin-top: 24px; }
.sample-alt-list li { padding-block: 24px; border-top: 1px solid var(--line); }
.sample-alt-list li:last-child { border-bottom: 1px solid var(--line); }
.sample-alt-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sample-alt-heading h3 { font: 600 var(--fs-body)/1.4 var(--body); }
.sample-post .copy-button { flex-shrink: 0; font-size: 15px; min-height: 44px; }
.sample-post .sample-copy-quiet { min-width: 44px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
.sample-copy-quiet::before { display: none; }
.sample-copy .lead { max-width: 48ch; }
.sample-post-check { margin-top: 28px; }
.sample-post-help { margin-top: 16px; }
.sample-credit { font-size: var(--fs-small); max-width: 48ch; margin-top: 32px; }
.files h2 { font: 600 clamp(24px, 2.4vw, 30px)/1.2 var(--body); }
.sample-crop .scroll-crop-stage, .sample-crop-focus { display: none; }
.sample-crop-controls { display: none; }
.sample-crop .scroll-crop-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; margin-top: 0; }
.sample-crop .scroll-crop-step { min-height: 0; }
.scroll-crop-detail { --detail-start: 19%; --detail-end: 31%; }
.sample-crop {
  --crop-0-view: inset(0); --crop-1-view: inset(0); --crop-2-view: inset(0); --crop-3-view: inset(0); --crop-4-view: inset(0);
  --focus-width: 0px; --focus-height: 0px;
  --focus-2-width: 0px; --focus-2-height: 0px; --focus-3-width: 0px; --focus-3-height: 0px;
}
.scroll-crop-step figure { margin-inline: auto; }
.sample-slide-open { border-radius: var(--radius); }
.scroll-crop-step img { width: 100%; height: auto; border-radius: var(--radius); }
.scroll-crop-step figcaption { margin-top: 20px; font-size: var(--fs-small); font-weight: 600; }
.sample-post .copy-fallback { flex-basis: 100%; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (min-width: 1024px) {
  .sample-hero-cover, .sample-story { display: block; }
  .sample-hero-cover { width: min(100%, 390px); justify-self: center; }
  .sample-inner > .viewer { display: none; }
  .sample-post { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .files { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: start; }
  .files .section-head { margin: 0; }
  .files .file-list, .files .file-more { max-width: none; }
}
@supports (object-view-box: inset(0)) and (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    body[data-page="free"] .sample-story:has([data-scroll="crop"]).section { width: 100%; margin-inline: 0; padding-block: 0; }
    .sample-crop[data-scroll="crop"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; height: 200svh; view-timeline-inset: 0; }
    .sample-crop[data-scroll="crop"] .scroll-crop-stage { grid-column: 1; grid-row: 1; align-self: start; top: 0; height: 100svh; display: block; overflow: clip; }
    .sample-crop-window { position: relative; width: 100%; height: 100%; overflow: clip; }
    .scroll-crop-detail, .sample-crop-focus { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: crop-detail linear; animation-timeline: --crop-story; animation-range: contain var(--detail-start) contain var(--detail-end); }
    .scroll-crop-detail-first { object-position: left center; }
    .scroll-crop-detail-final { animation-name: crop-detail-last; animation-fill-mode: forwards; }
    .sample-crop-focus { display: block; inset: 50% auto auto 50%; width: var(--focus-width); height: var(--focus-height); translate: -50% -50%; outline: 2px solid var(--cream); outline-offset: 3px; }
    .sample-crop[data-scroll="crop"] .scroll-crop-photo { object-fit: cover; animation-name: sample-crop-view; }
    .sample-crop[data-scroll="crop"] .sample-crop-slides { grid-column: 2; grid-row: 1; position: sticky; align-self: start; top: 0; height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 20px; padding: max(104px, var(--header-height)) clamp(32px, 4vw, 64px) 24px; }
    .sample-crop[data-scroll="crop"] .scroll-crop-steps { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; }
    .sample-crop[data-scroll="crop"] .scroll-crop-step { grid-area: 1 / 1; min-height: 0; display: grid; align-items: center; padding: 0; opacity: 0; visibility: hidden; }
    .sample-crop:not([data-crop-ready]) .scroll-crop-step:first-child,
    .sample-crop[data-crop-ready] .scroll-crop-step[data-crop-active] { opacity: 1; visibility: visible; }
    .sample-crop[data-scroll="crop"] .scroll-crop-step figure { width: min(100%, 520px, calc((100svh - max(104px, var(--header-height)) - 120px) * .8)); }
    .sample-crop[data-scroll="crop"] .scroll-crop-step figcaption { display: none; }
    .sample-crop[data-scroll="crop"] .sample-crop-controls { display: flex; flex-wrap: nowrap; width: 100%; max-width: 520px; margin-inline: auto; }
    .sample-story .sample-credit-wrap { width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; }
    .sample-story .sample-credit { max-width: calc((100% - 80px) / 2); margin: 0; padding-top: 32px; }
  }
}
/* Native crops settle beside their slides; the windowsill retains its context. */
@keyframes sample-crop-view {
  0%, 6% { object-view-box: var(--crop-0-view); object-position: 50% 50%; }
  19%, 31% { object-view-box: var(--crop-1-view); object-position: 0% 50%; }
  44%, 56% { object-view-box: var(--crop-2-view); object-position: 50% 50%; }
  69%, 81% { object-view-box: var(--crop-3-view); object-position: 50% 50%; }
  94%, 100% { object-view-box: var(--crop-4-view); object-position: 50% 50%; }
}

/* Native crop renditions retain detail at rest without transferring the 7360px source. */
@keyframes crop-detail { 0%, 100% { opacity: 0; } 8%, 92% { opacity: 1; } }
@keyframes crop-detail-last { 0% { opacity: 0; } 15%, 100% { opacity: 1; } }

.files .file-list a { grid-template-columns: minmax(0, 1fr) 24px; column-gap: 16px; text-decoration: none; }
.files .file-list .file-name { font-weight: 600; font-size: var(--fs-body); color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.files .file-format { grid-column: 1; }
.file-download { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
@media (hover: hover) and (pointer: fine) { .files .file-list a:hover .file-name { text-decoration-color: var(--coral); text-decoration-thickness: 2px; } }