:root {
  color-scheme: light;
  --petrol: #365b58;
  --mint: #d5e1d8;
  --ink: #34223f;
  --muted: #4a5b52;
  --edge-width: clamp(22px, 6.2vw, 92px);
  font: 16px/1.5 Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--mint);
}
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; color: inherit; }
.edge { position: fixed; inset: 0 auto 0 0; width: var(--edge-width); background: var(--petrol); display: flex; align-items: center; justify-content: center; }
.edge span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; letter-spacing: .25em; color: #e0ece3; }
.edge i { position: absolute; bottom: 50px; width: 7px; height: 28px; background: #ffe38c; border-radius: 1px; }
.page { min-height: 100svh; margin-left: var(--edge-width); padding: 36px clamp(24px, 5.1vw, 78px) 24px; display: flex; flex-direction: column; max-width: 1640px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.edition { margin: 13px 0 0; color: var(--muted); font-size: 12px; letter-spacing: .03em; display: flex; align-items: center; gap: 9px; }
.edition-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--petrol); }
.brand { width: 198px; flex: none; mix-blend-mode: multiply; }
.brand-row { display: flex; align-items: flex-end; gap: 3px; min-height: 68px; }
.brand-mortar { display: block; width: 62px; height: 63px; flex: none; }
.brand-word { display: block; width: 133px; height: 47px; margin-bottom: 1px; }
.brand-claim { display: block; font-size: 12px; text-align: center; margin-top: 6px; white-space: nowrap; color: #39214e; }
main { display: grid; grid-template-columns: minmax(280px, .94fr) minmax(330px, 1.06fr); align-items: center; flex: 1; gap: clamp(30px, 4vw, 70px); padding: 44px 0 64px; min-height: 510px; }
.intro { padding-bottom: 20px; }
.work-label { display: inline-block; position: relative; background: #f6fcf7; border-bottom: 1px solid #a4b5aa; padding: 8px 16px 7px; font-size: 12px; box-shadow: 1px 2px 3px #365b5821; margin-bottom: 24px; transform: rotate(-2deg); }
/* Round pin head; the short metal shaft enters the paper below it. */
.label-pin { position:absolute; left:calc(50% - 8px); top:-9px; width:16px; height:16px; pointer-events:none; }
.label-pin::before { content:''; position:absolute; left:8px; top:6px; width:2px; height:9px; border-radius:1px; background:#939b94; box-shadow:1px 1px 1px #344b4433; transform:rotate(27deg); transform-origin:top center; }
.label-pin::after { content:''; position:absolute; left:4px; top:0; width:10px; height:10px; border:1px solid #7c5e8b; border-radius:50%; background:radial-gradient(circle at 33% 28%,#e6d5ef 0 13%,#b997cc 20% 65%,#9b77ae 75%); box-shadow:1px 2px 2px #49395635; }
h1 { font-size: clamp(32px, 3.9vw, 57px); line-height: 1.13; letter-spacing: -.045em; font-weight: 600; margin: 0 0 24px; }
.intro-copy { margin: 0; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.65; color: #424d45; }
.tableau { width: 100%; max-width: 490px; justify-self: end; height: 465px; position: relative; isolation: isolate; --paper-lift: 0px; }
.small-note { position: relative; margin: 35px 0 0 15px; width: 153px; padding: 20px 15px 17px; background: linear-gradient(110deg,#ffeaaa,#ffdf85); box-shadow: 2px 5px 5px #53432635; transform: rotate(-4deg); font-size: 13px; line-height: 1.4; }
.note-tape { position: absolute; top: -7px; left: 53px; width: 42px; height: 14px; background: #c5b2d5ce; transform: rotate(-4deg); }
.pocket { position: absolute; bottom: 48px; width: min(360px, calc(100% - 18px)); height: 253px; left: 0; }
.pocket-back { position: absolute; inset: 18px 0 0; background: #b7a1c6; border: 2px solid #7d688c; border-radius: 7px 7px 4px 4px; box-shadow: inset 5px 0 #a08bae,inset -5px 0 #dbc9e5,2px 6px 6px #33483b30; }
/* This opening clips paper only at the container's bottom. The front always
   occludes its lower section; moving the same sheet preserves its identity. */
.paper-viewport { position: absolute; inset: -200px 8px 3px; overflow: hidden; }
.paper-companion { position: absolute; top: 202px; left: 18px; right: 9px; height: 222px; background: linear-gradient(110deg,#fbe7ab,#f4d58f); border: 1px solid #b2a17b; border-bottom: 3px solid #d4bd84; transform: rotate(2deg); box-shadow: 0 2px 2px #51402b20; }
.secret-paper { position: absolute; top: 198px; left: 11px; right: 18px; height: 290px; background: linear-gradient(115deg,#fffefa,#f6ecd8); border: 1px solid #b7aa8f; border-bottom: 3px solid #d5c8ae; box-shadow: 1px 3px 3px #6d5b4133; transform: translateY(var(--paper-lift)); will-change: transform; }
.paper-grip { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: 0; padding: 13px 17px 9px; min-height: 48px; text-align: left; font-size: 14px; cursor: grab; touch-action: none; user-select: none; }
.paper-grip:disabled { cursor: default; }
.paper-grip svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 280ms ease; }
.paper-grip[aria-expanded=true] svg { transform: rotate(180deg); }
.paper-grip:focus-visible { outline: 2px solid var(--petrol); outline-offset: -5px; }
.secret-message { padding: 76px 18px 8px; color: #34223f; }
.secret-message .little-label { font-size: 11px; color: #665469; }
.secret-message p { font-size: 23px; line-height: 1.25; letter-spacing: -.025em; margin: 7px 0 15px; }
.secret-signature { font-size: 12px; }
.paper-bottom { position: absolute; left: 18px; right: 18px; bottom: 13px; border-top: 1px solid #b7aa8f69; }
.pocket-front { position: absolute; left: 0; right: 0; top: 107px; bottom: 0; z-index: 4; pointer-events: none; }
.pocket-surface { position: absolute; inset: 0; width: 100%; height: 100%; }
.attached-sign { position: absolute; left: 50%; top: 43px; transform: translateX(-50%); white-space: nowrap; padding: 7px 17px; background: #fff4d4; color: #49334f; border: 1px solid #a99c84; border-bottom: 2px solid #a99c84; border-radius: 2px; font-size: 12px; box-shadow: 1px 2px 2px #54433125; }
.attached-sign::before,.attached-sign::after { content: ''; position: absolute; top: 50%; width: 2px; height: 2px; border-radius: 50%; background: #8b8580; }
.attached-sign::before { left: 5px; }.attached-sign::after { right: 5px; }
.front-seam { position: absolute; bottom: 11px; left: 11px; right: 11px; border-top: 1px solid #ae94bb; box-shadow: 0 1px #e7d7ef; }
.paper-instruction,.no-script-note { position: absolute; bottom: 0; left: 0; margin: 0; width: 360px; max-width: 100%; text-align: center; color: #4a5b52; font-size: 11px; }
.is-dragging .paper-grip { cursor: grabbing; }
footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid #9bb0a24d; color: #526157; font-size: 11px; letter-spacing: .025em; }
@media (min-width: 1600px) { .page { margin-right: auto; } }
@media (max-width: 920px) {
  .page { padding: 28px 28px 22px; }
  main { grid-template-columns: minmax(250px,1fr) minmax(285px,1fr); gap: 24px; }
  .tableau { height: 465px; }
  .small-note { width: 139px; font-size: 12px; }
  .secret-message p { font-size: 21px; }
  .brand { width: 172px; }
  .brand-row { min-height: 59px; gap: 2px; }.brand-mortar { width: 54px; height: 55px; }.brand-word { width: 116px; height: 41px; }
  .brand-claim { font-size: 10.4px; }
}
@media (max-width: 720px) {
  :root { --edge-width: 18px; }
  .edge span { display: none; }.edge i { bottom: 28px; width: 5px; }
  .page { padding: 24px 24px 20px; }
  .page-head { align-items: center; gap: 16px; }
  .edition { font-size: 10px; margin: 0; gap: 6px; }
  .brand { width: 151px; }.brand-row { min-height: 50px; }.brand-mortar { width: 47px; height: 48px; }.brand-word { width: 102px; height: 36px; }.brand-claim { font-size: 9.1px; margin-top: 5px; }
  main { grid-template-columns: 1fr; padding: 60px 0 34px; gap: 28px; min-height: 0; }
  h1 { font-size: clamp(31px,7.2vw,43px); margin-bottom: 18px; }
  .intro { padding-bottom: 0; }.intro-copy { font-size: 14px; }
  .tableau { width: min(100%,420px); justify-self: center; height: 465px; }
  footer { font-size: 10px; }
}
@media (max-width: 370px) {
  .page { padding-inline: 18px; }
  .edition { max-width: 68px; line-height: 1.4; }
  .secret-message p { font-size: 20px; }
  .paper-grip { font-size: 13px; }
  .attached-sign { font-size: 11px; padding-inline: 13px; }
}
@media (prefers-reduced-motion: reduce) { .paper-grip svg { transition: none; } }