.creative-section{position:relative}
.creative-section h2,.creative-index h2{margin:16px 0 24px}
.creative-intro,.creative-index>p:not(.eyebrow){max-width:640px;margin-bottom:28px;color:var(--muted);font-size:12px}
.creative-index nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.creative-index nav a,.creative-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;background:transparent;padding:11px 18px;font-size:11px;border-radius:2px}
.creative-index nav a:hover,.creative-button:hover{background:var(--ink);color:var(--paper)}
.comparison-tools{font-size:11px}
.comparison-tools input{display:inline-block;width:16px;height:16px;min-height:0;padding:0;border:0;vertical-align:middle;accent-color:var(--olive);margin:0 8px 0 0}
.paper-table{background:var(--soft);background-image:radial-gradient(#343a300d .7px,transparent .8px);background-size:5px 5px}
.print-table{height:650px;position:relative;isolation:isolate;margin:40px 0 22px;overflow:hidden}
.loose-print{--angle:-9deg;--x:0px;--y:0px;position:absolute;left:8%;top:9%;width:28%;max-width:320px;border:0;padding:12px 12px 0;background:#fffdf6 radial-gradient(#343a3010 .5px,transparent .6px) 0 0 / 4px 4px;box-shadow:0 16px 35px -14px #343a3077;transform:translate(var(--x),var(--y)) rotate(var(--angle));transform-origin:center;cursor:grab;user-select:none;touch-action:pan-y}
.loose-print:nth-child(2){--angle:7deg;left:34%;top:15%}
.loose-print:nth-child(3){--angle:-5deg;left:59%;top:5%}
.loose-print:nth-child(4){--angle:11deg;left:44%;top:38%}
.loose-print img{height:290px;pointer-events:none}
.loose-print span{display:block;padding:13px 0 17px;font:italic 23px/1.2 var(--serif);color:#343a30;pointer-events:none}
.loose-print:focus-visible{outline:3px solid #9a5d31;outline-offset:4px}
.loose-print.is-dragging{cursor:grabbing;box-shadow:0 30px 45px -15px #343a3099}
.cinema-section{background:#20251f;color:#f6f4ed}
.cinema-section .creative-intro{color:#c3c7b7}
.strip-controls{display:flex;gap:10px;margin-bottom:24px}
.film-track{display:flex;gap:28px;overflow-x:auto;overscroll-behavior-x:contain;padding:40px max(7%,24px);background:repeating-linear-gradient(90deg,#c3c7b766 0 12px,transparent 12px 28px) top / auto 8px repeat-x,repeating-linear-gradient(90deg,#c3c7b766 0 12px,transparent 12px 28px) bottom / auto 8px repeat-x;scrollbar-color:#9ea38f #20251f;cursor:grab}
.film-track.is-dragging{cursor:grabbing;user-select:none}
.film-frame{position:relative;flex:0 0 clamp(250px,32vw,460px);height:330px;padding:0;border:0;overflow:hidden;background:#30392d;color:#fff;text-align:left;touch-action:pan-x pan-y}
.film-frame:nth-child(even){height:290px;align-self:center}
.film-frame img{width:114%;max-width:none;margin-left:-7%;transform:translateX(var(--frame-drift,0px));pointer-events:none}
.film-frame>span{position:absolute;inset:auto 0 0;padding:45px 20px 18px;background:linear-gradient(transparent,#111c);font-size:12px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.film-frame:hover>span,.film-frame:focus-visible>span{opacity:1;transform:none}
.editing-comparison{--comparison:50%;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--soft);isolation:isolate}
.editing-comparison>img{position:absolute;inset:0;object-position:center}
.comparison-after{clip-path:inset(0 0 0 var(--comparison))}
.editing-comparison:not([data-real-grade]) .comparison-after{filter:sepia(.26) saturate(.88) contrast(1.08) brightness(1.03)}
.comparison-label{position:absolute;z-index:2;top:20px;padding:8px 12px;background:#20251fcc;color:white;font-size:10px;pointer-events:none}
.before-label{left:20px}.after-label{right:20px}
.comparison-divider{position:absolute;top:0;bottom:0;left:var(--comparison);width:2px;transform:translateX(-1px);background:#fff;box-shadow:0 0 6px #0006;pointer-events:none}
.comparison-divider i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;display:grid;place-items:center;background:#fff;color:#20251f;border-radius:50%;font-style:normal;font-size:22px}
.editing-comparison input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.editing-comparison:focus-within{outline:3px solid #9a5d31;outline-offset:4px}
.comparison-tools{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-top:20px}
.day-night-section{--day-tone:#f6f0e5;--day-ink:#343a30;background:var(--day-tone);color:var(--day-ink);transition:background-color .7s ease,color .7s ease}
.day-night-section .creative-intro{color:inherit}
.day-night-chapter{min-height:75vh;display:grid;grid-template-columns:1fr 1fr;align-content:center;align-items:center;column-gap:10%;padding:65px 0}
.day-night-chapter>span{font-size:9px;letter-spacing:.18em}
.day-night-chapter h3{grid-column:1;font-size:clamp(40px,5vw,74px);margin:25px 0}
.day-night-chapter img{grid-column:2;grid-row:1 / 4;height:450px;border:9px solid #fffdf6;transform:rotate(4deg);box-shadow:0 22px 40px -22px #0008}
.day-night-chapter:nth-child(even) img{transform:rotate(-4deg)}
.day-night-ending{display:block;text-align:center;align-content:center;min-height:60vh}
.day-night-ending p{font-size:12px}
.handwritten-section{background:#e8e7da;text-align:center}
.handwritten-art{width:100%;max-width:1050px;height:auto;color:var(--olive);overflow:visible}
.handwritten-art text{font:italic 62px var(--serif);fill:currentColor;stroke:currentColor;stroke-width:.7}
.handwritten-art path{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.handwritten-signoff{font:italic 25px var(--serif)}
.creative-motion .handwritten-section .handwritten-art text,.creative-motion .handwritten-section .handwritten-art path{stroke-dasharray:1400;stroke-dashoffset:1400}
.creative-motion .handwritten-section:not(.is-visible) .handwritten-art text{fill:transparent}
.creative-motion .handwritten-section.is-visible .handwritten-art text{animation:write-letters 2.8s ease both}
.creative-motion .handwritten-section.is-visible .handwritten-art text:nth-child(2){animation-delay:.6s}
.creative-motion .handwritten-section.is-visible .handwritten-art path{animation:write-line 1.5s 1.5s ease both}
@keyframes write-letters{0%{stroke-dashoffset:1400;fill:transparent}65%{fill:transparent}100%{stroke-dashoffset:0;fill:currentColor}}
@keyframes write-line{to{stroke-dashoffset:0}}
@media(max-width:700px){
  .print-table{height:530px;margin-top:30px}
  .loose-print{width:43%;padding:7px 7px 0;left:5%;top:8%}
  .loose-print:nth-child(2){left:47%;top:15%}
  .loose-print:nth-child(3){left:8%;top:48%}
  .loose-print:nth-child(4){left:48%;top:53%}
  .loose-print img{height:160px}
  .loose-print span{font-size:17px;padding:10px 0 14px}
  .film-frame{flex-basis:78vw;height:300px}
  .film-frame:nth-child(even){height:265px}
  .film-frame>span{opacity:1;transform:none}
  .editing-comparison{aspect-ratio:4/3}
  .comparison-label{top:10px;padding:5px 8px;font-size:9px}
  .before-label{left:10px}.after-label{right:10px}
  .day-night-chapter{grid-template-columns:1fr;min-height:85vh;gap:20px}
  .day-night-chapter img{grid-column:1;grid-row:auto;width:85%;height:350px;justify-self:center;margin-top:20px}
  .day-night-chapter h3{font-size:43px;margin:0}
  .day-night-ending{min-height:50vh}
  .handwritten-section .section-shell{width:96%}
  .handwritten-signoff{font-size:20px}
}
@media(hover:none){
  .film-frame>span{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .creative-section *, .creative-section *::before,.creative-section *::after{animation:none!important;transition:none!important}
  .film-frame img{transform:none}
  .handwritten-art text{fill:currentColor!important;stroke-dashoffset:0!important}
  .handwritten-art path{stroke-dashoffset:0!important}
  .memory-star{opacity:1!important;filter:none!important}
}
@media print{
  .creative-index,.creative-button,.strip-controls,.comparison-tools,.comparison-divider,.editing-comparison input{display:none!important}
  .creative-section{background:white!important;color:#222!important;break-inside:auto}
  .creative-intro{color:#333!important}
  .print-table{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px;overflow:visible}
  .loose-print{position:static!important;width:100%;transform:none!important}
  .film-track{display:grid;grid-template-columns:1fr 1fr;overflow:visible;background:none;padding:20px;gap:20px}
  .film-frame{height:230px!important}
  .film-frame>span{opacity:1;transform:none}
  .handwritten-art text{fill:currentColor!important;stroke-dashoffset:0!important}
  .handwritten-art path{stroke-dashoffset:0!important}
  .memory-star{opacity:1!important}
}