/* Product captures retain their own edges and material. The annotation is a
   separate photographed paper object with live, accessible HTML text. */
:root{--paper-note-shadow:drop-shadow(0 3px 3px #5e3b183d) drop-shadow(0 12px 11px #63401e3d) drop-shadow(0 25px 24px #63401e29)}
/* The shadow follows the raised paper, then returns to its resting contact.
   Never animate the text separately from the material it is printed on. */
@keyframes paper-land-shadow{
  0%{filter:var(--paper-note-shadow)}
  42%{filter:drop-shadow(0 7px 6px #5e3b1838) drop-shadow(0 24px 22px #63401e47) drop-shadow(0 38px 32px #8b5a2b1e)}
  80%{filter:drop-shadow(0 4px 4px #5e3b183d) drop-shadow(0 15px 14px #63401e3f) drop-shadow(0 28px 25px #8b5a2b1d)}
  100%{filter:var(--paper-note-shadow)}
}
[data-paper-state=playing]{will-change:transform,opacity}
[data-paper-state=playing]::before{animation:paper-land-shadow var(--paper-land-duration,1250ms) cubic-bezier(.2,.78,.18,1) both}
[data-paper-state=playing][data-paper-phase=prepared]::before{animation-play-state:paused}
[data-phone-state=playing] .phone-paper::before{animation:paper-land-shadow 1500ms cubic-bezier(.2,.78,.18,1) both}
[data-phone-state=playing][data-phone-phase=prepared] .phone-paper::before{animation-play-state:paused}
[data-phone-state=playing] .phone-paper-plan::before{animation-delay:650ms}
[data-phone-state=playing] .phone-paper-observation::before{animation-delay:1650ms;animation-duration:1450ms}
@media(max-width:767px){[data-phone-state=playing] .phone-paper-plan::before{animation-delay:520ms;animation-duration:1350ms}[data-phone-state=playing] .phone-paper-observation::before{animation-delay:1350ms;animation-duration:1300ms}}
@media(prefers-reduced-motion:reduce){[data-paper-state]::before,[data-phone-state] .phone-paper::before{animation:none!important}}
.software-figure,
.editorial-row .software-figure.product-scene,
.work-story .software-figure.work-story-frame,
.work-story[data-story-mode=scroll] .work-story-art:has(.software-figure){mix-blend-mode:normal}
.work-story .work-story-frame.work-story-phone{mix-blend-mode:normal}
.software-figure.work-story-conversation{background:transparent}
.software-figure{--software-card-width:350px;--software-overlap:140px;--software-note-inset:36px;--software-note-angle:1.5deg;min-width:0}
.software-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr);width:100%;min-width:0;margin-inline:auto;padding-bottom:12px;isolation:isolate;transform-origin:50% 60%}
.software-figure.hero-figure{width:min(1184px,calc(100% - 96px));padding-top:18px;margin-top:48px;--software-card-width:360px;--software-overlap:160px;--software-note-angle:-1.5deg}
.hero-figure .software-scene{max-width:1120px}
.software-figure.chapter-figure{width:min(1160px,calc(100% - 128px))}
.software-figure .app-window{position:relative;z-index:1;min-width:0;width:100%;overflow:hidden;border:0;border-radius:2.5%;padding:0;background:none;box-shadow:0 3px 8px #49321a14,0 24px 46px -20px #65452152,0 38px 66px -38px #8b5a2b2e}
.software-figure .ui-screen{display:block;min-width:0;mix-blend-mode:normal}
.software-figure .app-window .ui-screen>img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;border:0;border-radius:0;mask-image:none;-webkit-mask-image:none;mix-blend-mode:normal;filter:none}

/* Alpha margins and the curled corner are part of the asset. Reserve the
   complete note in flow so the scroll stage also fits enlarged text. */
.software-callout{position:relative;z-index:2;display:grid;grid-template-rows:26fr 57fr 17fr;justify-self:end;width:min(var(--software-card-width),calc(100% - var(--software-note-inset) - 8px));min-width:0;min-height:15rem;margin-top:calc(-1 * var(--software-overlap));margin-right:var(--software-note-inset);border:0;border-radius:0;padding:0;background:none;box-shadow:none;isolation:isolate;color:var(--ink);text-align:left;overflow-wrap:anywhere;transform:rotate(var(--software-note-angle));transform-origin:50% 45%}
.software-callout::before{content:'';position:absolute;inset:0;z-index:-1;background:url('./software/paper-note-amber-v1.webp') center/100% 100% no-repeat;filter:var(--paper-note-shadow);pointer-events:none}
.callout-content{position:relative;grid-row:2;align-self:start;min-width:0;padding:0 12% 0 9%}
.callout-label{display:flex;align-items:center;gap:7px;color:var(--copper);font-size:.75rem;font-weight:500;line-height:1.45}
.callout-label .icon{width:16px;height:16px}
.callout-title{font-family:Manrope,Inter,sans-serif;font-size:1.375rem;font-weight:600;line-height:1.24;letter-spacing:-.025em;margin-top:.5rem;text-wrap:balance}
.callout-detail{font-size:.8125rem;line-height:1.5;margin-top:.5rem;color:var(--ink-soft)}
.callout-meta{font-size:.6875rem;line-height:1.5;color:var(--copper);margin-top:.75rem}
.callout-content>.icon{position:absolute;top:0;right:12%;width:18px;height:18px;color:var(--copper)}
.callout-content:has(>.icon) .callout-label{padding-right:24px}
.software-figure .figure-foot{padding-top:6px}
.software-figure.hero-figure .figure-foot{padding-top:16px}
.software-figure.hero-figure .hero-story-tags{padding-top:18px}

/* Reading scenes use the same paper object, anchored at the lower right. */
.work-story .software-figure{--software-card-width:340px;--software-overlap:140px;--software-note-inset:24px}
.work-story .software-figure .figure-foot{padding-top:6px}
.work-story[data-story-mode=scroll] .software-figure>.software-scene{flex:none}
.software-figure.product-screen{--software-card-width:350px;--software-note-angle:-1.5deg}
.work-story-intake .app-window{width:min(330px,100%);justify-self:center;border-radius:3%}
.work-story-intake{--software-note-angle:1.75deg}

@media(min-width:1100px){
  /* The note deliberately overlaps the lower right of the portrait, while
     the questionnaire heading and its first answers remain in view. */
  .work-story-intake .app-window{width:min(390px,64%);justify-self:start;margin-left:4%}
  .work-story-intake .software-callout{width:min(340px,56%);margin-top:-210px}
}
@media(min-width:1600px){
  .software-figure.hero-figure{margin-top:56px}
}
@media(min-width:768px) and (max-width:1099px){
  .work-story .software-figure{--software-overlap:112px}
}
@media(min-width:768px) and (max-width:999px){
  .software-figure.hero-figure{width:calc(100% - 64px)}
  .software-figure.chapter-figure{width:calc(100% - 96px)}
}
@media(max-width:767px){
  .software-figure{--software-card-width:340px;--software-overlap:112px;--software-note-inset:12px;--software-note-angle:1deg}
  .software-figure.hero-figure{width:calc(100% - 44px);padding-top:4px;margin-top:38px;--software-card-width:340px;--software-overlap:112px;--software-note-angle:-1deg}
  .software-figure.chapter-figure{width:calc(100% - 44px);margin-top:40px}
  .software-figure .software-scene{max-width:370px;padding-bottom:10px}
  .software-figure .app-window{border-radius:3%;box-shadow:0 2px 5px #49321a12,0 17px 32px -17px #6545214a,0 28px 44px -30px #8b5a2b29}
  .callout-title{font-size:1.25rem}
  .work-story .software-figure{--software-overlap:112px;--software-note-inset:12px}
  .work-story .software-figure.work-story-frame{width:100%;margin-left:0;margin-right:0}
  .software-figure .figure-foot,.work-story .software-figure .figure-foot{padding:8px 4px 0}
  .software-figure.hero-figure .hero-story-tags{padding:18px 0 14px}
}

/* Keep the calendar introduction concise before the full-width product view. */
.practice-intro{max-width:660px;margin:32px auto 0;font-size:1.0625rem;line-height:1.75;text-align:center;color:var(--ink-soft)}
@media(max-width:767px){.practice-intro{margin-top:24px;text-align:left}}

/* The guardian's two notes use the same physical paper and alpha shadow.
   Three grid layers preserve the animation hooks while enlarged note text
   contributes to the measured scene height instead of overflowing it. */
.phone-scene{--phone-layer-height:min(60svh,550px);container:guardian-paper/inline-size;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(112px,1fr) auto auto minmax(24px,1fr);height:auto;min-height:var(--phone-layer-height)}
.work-story-frame .phone-scene .phone-device{grid-column:1/-1;grid-row:1/-1;align-self:center;justify-self:center;width:auto;height:var(--phone-layer-height);max-width:76%}
.phone-scene .phone-paper{position:relative;display:grid;grid-template-rows:26fr 57fr 17fr;align-self:start;width:100%;min-width:0;max-width:none;min-height:11.25rem;inset:auto;padding:0;border:0;border-radius:0;background:none;background-blend-mode:normal;box-shadow:none;isolation:isolate;overflow-wrap:anywhere}
.phone-scene .phone-paper::before{content:'';position:absolute;inset:0;z-index:-1;background:url('./software/paper-note-amber-v1.webp') center/100% 100% no-repeat;filter:var(--paper-note-shadow);pointer-events:none}
.phone-scene .phone-paper::after{content:none;display:none}
.phone-paper-content{position:relative;grid-row:2;align-self:start;min-width:0;padding:0 12% 0 9%}
.phone-scene .phone-paper-plan{grid-column:1/6;grid-row:2}
.phone-scene .phone-paper-observation{grid-column:8/-1;grid-row:3}
.phone-scene .phone-paper-kicker{font-size:.625rem;line-height:1.4;letter-spacing:.035em;margin-bottom:.5rem;gap:.375rem}
.phone-scene .phone-paper-kicker .icon{width:1rem;height:1rem}
.phone-scene .phone-paper-title{font-family:Manrope,Inter,sans-serif;font-size:1.125rem;line-height:1.24;font-weight:600}
.phone-scene .phone-paper-detail{font-size:.75rem;line-height:1.5;margin-top:.375rem}
.phone-scene .phone-paper-status{font-size:.625rem;line-height:1.45;border:0;padding-top:0;margin-top:.625rem;gap:.375rem}
.phone-scene .phone-paper-context{font-size:.625rem;line-height:1.45;margin-top:.625rem;gap:.375rem}
@media(max-width:999px){
  .phone-scene .phone-paper-plan{grid-column:1/7}
  .phone-scene .phone-paper-observation{grid-column:7/-1}
}
@media(max-width:767px){
  .phone-scene{--phone-layer-height:570px;grid-template-rows:minmax(108px,1fr) auto auto minmax(28px,1fr)}
  .work-story-frame .phone-scene .phone-device{max-width:86%}
  .phone-scene .phone-paper-plan{grid-column:1/8;margin-left:12px;width:calc(100% - 12px)}
  .phone-scene .phone-paper-observation{grid-column:6/-1;justify-self:end;margin-right:12px;width:calc(100% - 12px)}
  .phone-scene .phone-paper-title{font-size:1.0625rem}
  .phone-scene .phone-paper-kicker{font-size:.5625rem}
  .phone-scene .phone-paper-detail{font-size:.6875rem}
}
@media(max-width:359px){
  .phone-scene{--phone-layer-height:520px}
}
/* Text zoom changes rem-based thresholds as well. Wider notes prevent long,
   narrow columns and keep their rotated corners inside a small viewport. */
@container guardian-paper (max-width:14rem){
  .phone-scene .phone-paper{grid-column:1/-1;width:calc(100% - 32px)}
  .phone-scene .phone-paper-plan{justify-self:start;margin-left:12px;transform:rotate(-2deg)}
  .phone-scene .phone-paper-observation{justify-self:end;margin-right:12px;transform:rotate(2deg)}
}