/* Our Story demo: a keepsake journal. Paper, ink and one terracotta accent.
   Sized in container units of #stage (1cqw = 1% of its width; the stage is 100cqw × 125cqw). */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&display=swap');

#stage{container-type:inline-size;--paper:#FBF8F2;--paper2:#EFE8DC;--tint:#F2ECE1;--serif:'Newsreader',Georgia,serif;--sans:Inter,system-ui,sans-serif;--rule:rgba(30,27,24,.14);--shadow:0 1px 2px rgba(30,27,24,.07),0 10px 28px rgba(30,27,24,.09);
  --ease:cubic-bezier(.4,0,.2,1);background:var(--bg);color:var(--ink);font-optical-sizing:auto}
#stage *{box-sizing:border-box}
:where(#stage button){font:inherit;color:inherit}
#stage :focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}
.os-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Small letter-spaced labels */
.os-cftop,.os-edate,.os-step,.os-count,.os-lvbtn,.os-mkick,.os-mdate,.os-msaid,.os-ans b,.os-ea b,.os-mother,.os-map .k,.os-toast .k,.os-begin span,.os-cfstat i{font:600 max(9.5px,2.4cqw)/1.1 var(--sans);letter-spacing:.16em;text-transform:uppercase}

/* Monograms: a hairline circle and an initial. A in ink, B in terracotta. */
.os-mono{display:inline-grid;place-items:center;flex:none;width:8.4cqw;height:8.4cqw;border-radius:50%;border:1px solid currentColor;background:var(--paper);color:var(--ink);font:500 max(13px,4cqw)/1 var(--serif)}
.os-mono.b{color:var(--accent)}
.os-mono span{transform:translateY(.04em)}

/* ——— Header ——— */
.os-head{position:absolute;left:4.4cqw;right:4.4cqw;top:0;height:14cqw;display:flex;align-items:center;gap:2cqw;z-index:6;border-bottom:1px solid var(--rule)}
.os-pair{display:flex;align-items:center;min-width:0;flex:1}
.os-pair>.os-mono.b{margin-left:-1.8cqw}
.os-names{display:flex;align-items:baseline;gap:1.4cqw;margin-left:2.6cqw;min-width:0;font:500 max(16px,4.8cqw)/1 var(--serif)}
.os-names .amp{color:var(--mid);font-style:italic;font-weight:400}
.os-name{font:inherit;color:var(--ink);background:none;border:0;border-bottom:1px dotted rgba(30,27,24,.35);padding:.6cqw 0;margin:0;width:3.4em;border-radius:0;outline:none}
.os-name:hover,.os-name:focus{border-bottom-color:var(--ink)}
.os-name:focus-visible{outline:1.5px solid var(--accent);outline-offset:2px}
.os-count{color:var(--mid);white-space:nowrap}
.os-count .v{font:500 max(15px,4.4cqw)/1 var(--serif);letter-spacing:0;color:var(--ink);margin-right:.8cqw}

/* ——— The table: level tabs and the deck ——— */
.os-table{position:absolute;inset:14cqw 0 0;z-index:2;transition:opacity .7s var(--ease),transform .8s var(--ease)}
#stage[data-view=timeline] .os-table,#stage[data-view=map] .os-table{opacity:0;transform:translateY(-2cqw);pointer-events:none}
.os-levels{position:absolute;top:4.4cqw;left:50%;transform:translateX(-50%);display:flex;gap:1cqw;align-items:center}
.os-lvbtn{border:0;background:none;cursor:pointer;padding:2.4cqw 2.8cqw;color:var(--mid);min-height:36px;position:relative;transition:color .4s var(--ease)}
.os-lvbtn::after{content:"";position:absolute;left:2.8cqw;right:2.8cqw;bottom:1.2cqw;height:1px;background:var(--accent);transform:scaleX(0);transition:transform .5s var(--ease)}
.os-lvbtn[aria-checked=true]{color:var(--ink)}
.os-lvbtn[aria-checked=true]::after{transform:none}
.os-lvbtn+.os-lvbtn::before{content:"";position:absolute;left:-.8cqw;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:rgba(30,27,24,.25)}
.os-deck{position:absolute;left:12cqw;top:18cqw;width:76cqw;height:56cqw;border:0;padding:0;background:none;cursor:pointer}
.os-deck .os-back{position:absolute;inset:0;transition:transform .7s var(--ease)}
.os-deck .os-back:nth-child(1){transform:rotate(-2.2deg) translate(-.6cqw,1cqw)}
.os-deck .os-back:nth-child(2){transform:rotate(1.4deg) translate(.6cqw,.5cqw)}
.os-deck:hover .os-back:nth-child(3),.os-deck:focus-visible .os-back:nth-child(3){transform:translateY(-1cqw)}
.os-deck.drawn .os-back:nth-child(3){visibility:hidden}
.os-back{background:var(--paper2);border:1px solid rgba(30,27,24,.1);border-radius:.8cqw;box-shadow:var(--shadow);overflow:hidden}
.os-back svg{position:absolute;inset:0;width:100%;height:100%}
.os-drawhint{position:absolute;left:0;right:0;top:79cqw;margin:0;text-align:center;font:500 max(17px,5.2cqw)/1.1 var(--serif);color:var(--ink)}
.os-drawhint small{display:block;margin-top:1.6cqw;font:italic 400 max(13px,3.7cqw)/1.3 var(--serif);color:var(--mid)}
.os-levels,.os-deck,.os-drawhint{transition:opacity .6s var(--ease),transform .8s var(--ease)}
#stage:not([data-phase=draw]) .os-levels{opacity:0;transform:translate(-50%,-2cqw);pointer-events:none}
#stage:not([data-phase=draw]) .os-drawhint{opacity:0;transform:translateY(2cqw);pointer-events:none}
#stage:not([data-phase=draw]) .os-deck{opacity:0;transform:translateY(16cqw);pointer-events:none;transition-delay:.15s}

/* ——— The drawn card ——— */
.os-cardwrap{position:absolute;left:12cqw;width:76cqw;height:56cqw;top:32cqw;z-index:20;perspective:220cqw;transition:top .95s var(--ease),height .8s var(--ease)}
.os-cardwrap.at-top{top:16cqw}
#stage[data-phase^=answer] .os-cardwrap{height:42cqw}
.os-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.05s var(--ease)}
.os-card.flipped{transform:rotateY(180deg)}
.os-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.os-cf{transform:rotateY(180deg);background:var(--paper);border:1px solid rgba(30,27,24,.1);border-radius:.8cqw;box-shadow:var(--shadow);color:var(--ink);padding:4.4cqw 5.2cqw 3.6cqw;display:flex;flex-direction:column}
.os-cftop{display:flex;align-items:center;justify-content:space-between;color:var(--mid)}
.os-cflv{color:var(--accent)}
.os-q{flex:1;display:flex;align-items:center;margin:0;font:500 max(18px,5.7cqw)/1.16 var(--serif);letter-spacing:-.005em;transition:font-size .7s var(--ease)}
.os-card.answered .os-q{flex:none;margin:3cqw 0 3.2cqw;font-size:max(15px,4.8cqw)}
.os-cfstat{display:flex;align-items:center;gap:2cqw;padding-top:2.4cqw;border-top:1px solid var(--rule)}
.os-cfstat .who{display:flex;align-items:center;gap:1.4cqw;color:var(--mid)}
.os-cfstat .os-mono{width:5.6cqw;height:5.6cqw;font-size:max(10px,2.8cqw)}
.os-cfstat .who.done i{color:var(--ink)}
.os-cfstat i{font-style:normal;font-size:max(8.5px,2.1cqw)}
.os-cfstat .sep{flex:1}
.os-card.answered .os-cfstat{display:none}
.os-cfans{display:none;flex-direction:column;gap:2cqw;padding-right:15cqw}
.os-card.answered .os-cfans{display:flex}
.os-ans{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:italic 400 max(14px,4cqw)/1.25 var(--serif)}
.os-ans b{margin-right:1.8cqw;font-style:normal}
.os-ans.a b{color:var(--ink)}.os-ans.b b{color:var(--accent)}
.os-card.answered .os-ans{animation:os-fade .9s var(--ease) .1s backwards}
.os-card.answered .os-ans.b{animation-delay:.4s}
@keyframes os-fade{from{opacity:0;transform:translateY(1.2cqw)}}

/* Photographs: matte prints */
.os-pol{margin:0}
.os-pol canvas{display:block;width:100%;height:auto;aspect-ratio:1;background:#E9E2D6;border:max(3px,.9cqw) solid #FFFEFA;box-shadow:0 1px 2px rgba(30,27,24,.18),0 6px 16px rgba(30,27,24,.12)}
.os-pol figcaption{margin-top:1.2cqw;text-align:center;font:italic 400 max(11px,2.9cqw)/1.2 var(--serif);color:var(--mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-cf .os-pol{position:absolute;right:-3.4cqw;bottom:-10cqw;width:22cqw;transform:rotate(2deg);z-index:2}
.os-pol canvas.dev{filter:brightness(1.35) saturate(0) contrast(.7) blur(2px)}
.os-pol canvas.devd{transition:filter 1.1s var(--ease)}

/* ——— Answer panel (pass the phone) ——— */
.os-panel{position:absolute;left:4.4cqw;right:4.4cqw;top:46cqw;bottom:3cqw;display:flex;flex-direction:column;gap:2.6cqw;padding:4cqw 4.6cqw 4cqw;background:var(--paper);border:1px solid rgba(30,27,24,.1);border-radius:.8cqw;box-shadow:var(--shadow);opacity:0;transform:translateY(3cqw);pointer-events:none;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.os-panel.show{opacity:1;transform:none;pointer-events:auto}
.os-turn{display:flex;align-items:center;gap:2.4cqw;font:500 max(16px,4.6cqw)/1.1 var(--serif)}
.os-turn .os-mono{width:7.6cqw;height:7.6cqw}
.os-turn label{flex:1}
.os-panel.b .os-turn .nm{color:var(--accent)}
.os-step{color:var(--mid)}
.os-in{flex:none;width:100%;resize:none;height:2.75em;padding:0;border:0;border-radius:0;background:transparent repeating-linear-gradient(transparent 0 calc(1.35em - 1px),rgba(30,27,24,.16) calc(1.35em - 1px) 1.35em);background-attachment:local;color:var(--ink);font:italic 400 max(16px,4.2cqw)/1.35 var(--serif);outline:none;user-select:text;-webkit-user-select:text}
.os-in::placeholder{color:rgba(107,99,90,.7)}
.os-in:focus-visible{outline:none}
.os-panel:focus-within .os-in{background-image:repeating-linear-gradient(transparent 0 calc(1.35em - 1px),rgba(180,83,42,.35) calc(1.35em - 1px) 1.35em)}
.os-chips{display:flex;gap:1.8cqw;overflow-x:auto;scrollbar-width:none;margin:0 -4.6cqw;padding:0 4.6cqw;scroll-padding:0 4.6cqw;flex:none}
.os-chips::-webkit-scrollbar{display:none}
.os-chip{flex:none;border:1px solid rgba(30,27,24,.2);background:transparent;border-radius:2px;padding:1.8cqw 3cqw;cursor:pointer;font:italic 400 max(14px,3.6cqw)/1.15 var(--serif);color:var(--ink);white-space:nowrap;transition:border-color .4s var(--ease),background .4s var(--ease);min-height:36px}
.os-chip:hover,.os-chip.on{border-color:var(--ink);background:var(--tint)}
.os-prow{display:flex;align-items:center;gap:2.4cqw;margin-top:auto}
.os-private{flex:1;font:italic 400 max(12.5px,3.2cqw)/1.25 var(--serif);color:var(--mid)}
.os-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:2px;border:1px solid transparent;cursor:pointer;padding:3cqw 4.6cqw;font:600 max(11px,2.8cqw)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;min-height:44px;transition:opacity .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.os-btn.primary{background:var(--ink);color:var(--paper)}
.os-btn.ghost{background:transparent;border-color:rgba(30,27,24,.35);color:var(--ink)}
.os-btn:active,.os-btn.press{opacity:.78}
.os-btn:disabled{opacity:.3;cursor:default}
.os-actions{position:absolute;left:4.4cqw;right:4.4cqw;top:75cqw;display:flex;gap:2.4cqw;justify-content:center;opacity:0;transform:translateY(2cqw);pointer-events:none;transition:opacity .6s var(--ease),transform .7s var(--ease)}
#stage[data-phase=complete] .os-actions{opacity:1;transform:none;pointer-events:auto}
.os-actions .os-btn{flex:1;max-width:50%}
.os-actions .note{position:absolute;left:0;right:0;top:calc(100% + 2.6cqw);margin:0;text-align:center;font:italic 400 max(12.5px,3.4cqw)/1.2 var(--serif);color:var(--mid)}

/* ——— Pass the phone ——— */
.os-pass{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;text-align:center;padding:8cqw;background:rgba(246,241,232,.97);opacity:0;transition:opacity .45s var(--ease)}
.os-pass.show{opacity:1}
.os-pass[hidden]{display:none}
.os-handoff{display:flex;align-items:center;justify-content:center;gap:3cqw;margin:0 auto 6cqw}
.os-handoff .os-mono{width:13cqw;height:13cqw;font-size:max(20px,6.4cqw)}
.os-handoff .line{position:relative;width:24cqw;height:1px;background:var(--rule)}
.os-handoff .line i{position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.os-pass.show .os-handoff .line i{animation:os-hand 1.4s var(--ease) .15s forwards}
@keyframes os-hand{to{left:calc(100% - 5px);background:var(--accent)}}
.os-pass h3{margin:0 0 2.2cqw;font:500 max(22px,7cqw)/1.1 var(--serif)}
.os-pass h3 span{color:var(--accent)}
.os-pass p{margin:0 0 7cqw;font:italic 400 max(14px,4cqw)/1.3 var(--serif);color:var(--mid)}

/* ——— Timeline: the pages of your story ——— */
.os-tl{position:absolute;left:0;right:0;top:14cqw;bottom:0;z-index:10;background:var(--paper);border-top:1px solid rgba(30,27,24,.12);box-shadow:0 -8px 26px rgba(30,27,24,.06);transform:translateY(calc(100% - 15cqw));transition:transform .85s var(--ease);display:flex;flex-direction:column;overflow:hidden}
#stage[data-phase^=answer] .os-tl,#stage[data-phase=reveal] .os-tl{transform:translateY(100%)}
#stage[data-view=timeline] .os-tl{transform:none}
#stage[data-view=map] .os-tl{transform:none;opacity:0;transition:opacity .7s}
.os-tlhead{flex:none;display:flex;align-items:center;gap:2.4cqw;width:100%;height:15cqw;padding:0 5cqw;border:0;background:none;text-align:left;cursor:pointer;position:relative}
.os-tlhead::before{content:"";position:absolute;left:50%;top:1.8cqw;width:8cqw;height:1px;margin-left:-4cqw;background:rgba(30,27,24,.3)}
#stage[data-view=timeline] .os-tlhead{cursor:default}
.os-tlhead .t{flex:1;min-width:0}
.os-tlhead .h{display:block;font:500 max(19px,5.6cqw)/1.05 var(--serif)}
.os-tlhead .os-tlsub{display:block;margin-top:1cqw;font:italic 400 max(12.5px,3.4cqw)/1.2 var(--serif);color:var(--mid)}
.os-tlhead .chev{width:8cqw;height:8cqw;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(30,27,24,.25);transition:transform .6s var(--ease),opacity .4s}
.os-tlhead .chev svg{width:3.6cqw;height:3.6cqw}
#stage[data-view=timeline] .os-tlhead .chev{transform:rotate(180deg);opacity:0}
.os-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(30,27,24,.2) transparent;position:relative;border-top:1px solid var(--rule)}
.os-list{position:relative;padding:0 0 32cqw}
.os-list::before{content:"";position:absolute;left:8.4cqw;top:0;bottom:0;width:1px;background:rgba(30,27,24,.16)}
.os-e{position:relative;padding:0 5cqw 0 14cqw;transition:background .6s var(--ease)}
.os-node{position:absolute;left:8.4cqw;top:5.4cqw;width:1.8cqw;height:1.8cqw;margin-left:-.9cqw;border-radius:50%;background:var(--paper);border:1px solid rgba(30,27,24,.55)}
.os-e.ph .os-node{background:rgba(30,27,24,.55)}
.os-ecard{position:relative;padding:4.4cqw 0 4cqw;border-bottom:1px solid var(--rule)}
.os-ecard::after{content:"";display:block;clear:both}
.os-edate{display:flex;align-items:center;gap:2cqw;color:var(--mid)}
.os-edate .os-lv{margin-left:auto;color:var(--accent)}
.os-eq{margin:1.8cqw 0 2.2cqw;font:500 max(15px,4.6cqw)/1.22 var(--serif)}
.os-ea{margin:0 0 1.2cqw;font:italic 400 max(14px,3.9cqw)/1.32 var(--serif);color:var(--ink)}
.os-ea b{font-style:normal;margin-right:1.6cqw}
.os-ea.a b{color:var(--ink)}.os-ea.b b{color:var(--accent)}
.os-ecard .os-pol{float:right;width:18cqw;margin:1.2cqw 0 1.6cqw 3cqw;transform:rotate(1.2deg)}
.os-e:nth-child(odd) .os-ecard .os-pol{transform:rotate(-1deg)}
.os-ecard .os-pol figcaption{font-size:max(10.5px,2.5cqw)}
.os-year{position:relative;padding:6cqw 5cqw 1cqw 14cqw;font:400 max(24px,8cqw)/1 var(--serif);letter-spacing:.04em;color:var(--mid)}
.os-year::before{content:"";position:absolute;left:6.4cqw;top:10cqw;width:4cqw;height:1px;background:var(--ink)}
.os-begin{position:relative;padding:6cqw 5cqw 0 14cqw;font:italic 400 max(15px,4.4cqw)/1.3 var(--serif);color:var(--ink)}
.os-begin span{display:block;margin-bottom:1.4cqw;color:var(--accent);font-style:normal}
.os-begin::before{content:"";position:absolute;left:8.4cqw;top:6.4cqw;width:2.2cqw;height:2.2cqw;margin-left:-1.1cqw;border-radius:50%;background:var(--accent)}
.os-e.is-new{background:var(--tint)}
.os-e.is-new .os-node{background:var(--accent);border-color:var(--accent)}
.os-e.is-new .os-edate span:first-child{color:var(--accent)}
.os-e.incoming .os-ecard{opacity:0}
.os-e.landed .os-ecard{animation:os-land 1.1s var(--ease) .2s backwards}
@keyframes os-land{from{opacity:0;transform:translateY(2.4cqw)}}
.os-e.mark{background:var(--tint)}
.os-e.mark .os-node{background:var(--accent);border-color:var(--accent)}
.os-tlbar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:2.4cqw;justify-content:center;padding:4cqw 4.4cqw;background:var(--paper);border-top:1px solid var(--rule);opacity:0;transform:translateY(3cqw);pointer-events:none;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.os-tlbar.show{opacity:1;transform:none}
.os-tlbar.show .os-btn{pointer-events:auto}
.os-tlbar .os-btn{flex:1;max-width:60%}
.os-toast{position:absolute;left:5cqw;right:5cqw;top:16.4cqw;z-index:3;display:flex;flex-direction:column;gap:1.2cqw;padding:3.4cqw 4.4cqw;background:var(--paper);border:1px solid var(--rule);border-left:2px solid var(--accent);box-shadow:var(--shadow);opacity:0;transform:translateY(-1.5cqw);transition:opacity .7s var(--ease),transform .8s var(--ease);pointer-events:none}
.os-toast.show{opacity:1;transform:none}
.os-toast .k{color:var(--accent)}
.os-toast .s{font:italic 400 max(14px,4cqw)/1.2 var(--serif);color:var(--ink)}

/* ——— The letter: one year ago today ——— */
.os-memory{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:5cqw;background:rgba(239,232,220,.86);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .7s var(--ease)}
.os-memory.show{opacity:1}
.os-memory[hidden]{display:none}
.os-letter{position:relative;width:100%;max-width:90cqw;background:var(--paper);color:var(--ink);border:1px solid rgba(30,27,24,.1);border-radius:.6cqw;padding:7cqw 6.6cqw 5.4cqw;box-shadow:0 2px 4px rgba(30,27,24,.05),0 26px 56px rgba(30,27,24,.16);transform-origin:50% 50%}
.os-mkick{margin:0;color:var(--accent)}
.os-mdate{margin:1.8cqw 0 0;color:var(--mid)}
.os-mq{margin:5cqw 0 5cqw;padding-right:26cqw;font:italic 400 max(15px,4.4cqw)/1.25 var(--serif);color:var(--mid)}
.os-msaid{margin:0 0 1.8cqw;color:var(--mid)}
.os-msaid b{color:var(--accent);font-weight:inherit}
.os-mquote{margin:0 0 5cqw;font:italic 400 max(22px,7cqw)/1.2 var(--serif);color:var(--ink);letter-spacing:-.005em}
.os-mquote .w{opacity:0;transition:opacity .9s var(--ease)}
.os-mquote.in .w{opacity:1}
.os-mother{margin:0 0 5cqw;padding-top:3cqw;border-top:1px solid var(--rule);color:var(--mid)}
.os-mother b{color:var(--ink);font-weight:inherit;margin-right:1cqw}
.os-mother>span{display:block;margin-top:1.4cqw}
.os-mother>span{font:italic 400 max(14px,3.8cqw)/1.35 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink)}
.os-letter .os-pol{position:absolute;right:6cqw;top:6cqw;width:22cqw;transform:rotate(1.6deg)}
.os-mfoot{display:flex;align-items:center;gap:3cqw}
.os-mfoot p{flex:1;margin:0;font:italic 400 max(13px,3.5cqw)/1.3 var(--serif);color:var(--mid)}
.os-mfoot .os-btn{flex:none}

/* ——— Finale: the contact sheet ——— */
.os-map{position:absolute;inset:14cqw 0 0;z-index:25;text-align:center;opacity:0;pointer-events:none}
.os-map.show{opacity:1}
.os-map .k{margin:6cqw 0 0;color:var(--mid)}
.os-map h3{margin:1.8cqw 0 0;font:500 max(24px,7.6cqw)/1.05 var(--serif)}
.os-map h3 span:last-child{color:var(--accent)}
.os-map canvas{position:absolute;left:0;top:21cqw;width:100%;height:44cqw;transform-origin:50% 0;transition:transform .9s var(--ease)}
#stage.ended .os-map canvas{transform:translateY(-2cqw) scale(.84)}
.os-stats{position:absolute;left:4cqw;right:4cqw;top:69cqw;margin:0;font:400 max(16px,5cqw)/1.2 var(--serif);color:var(--mid);transition:opacity .5s}
.os-stats b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:1cqw}
.os-stats i{font-style:normal;margin:0 2.2cqw}
#stage.ended .os-stats{opacity:0}

/* ——— Autoplay fingertip ——— */
.os-touch{position:absolute;left:0;top:0;width:9cqw;height:9cqw;margin:-4.5cqw 0 0 -4.5cqw;border-radius:50%;background:rgba(30,27,24,.08);border:1px solid rgba(30,27,24,.4);z-index:60;pointer-events:none;opacity:0;transition:left .42s var(--ease),top .42s var(--ease),opacity .3s,background .15s}
.os-touch.tap{background:rgba(30,27,24,.2)}

/* The CTA from showCta closes the book under the contact sheet */
#stage.ended #cta{top:auto;height:auto;min-height:50cqw;background:var(--bg);border-top:1px solid var(--rule);flex-flow:row wrap;align-content:center;justify-content:center;gap:2.6cqw;padding:6cqw 5cqw 7cqw;z-index:70}
#stage.ended #cta h2{flex-basis:100%;font:500 max(24px,7.6cqw)/1.05 var(--serif)}
#stage.ended #cta p{flex-basis:100%;font:italic 400 max(14px,3.9cqw)/1.4 var(--serif);color:var(--mid);margin-bottom:1.4cqw}
#stage.ended #cta .btn{font:600 max(11px,2.9cqw)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:3.6cqw 5cqw;border-radius:2px;border-width:1px}
#stage.ended #cta .btn.ghost{border-color:rgba(30,27,24,.35);color:var(--ink)}

@media (prefers-reduced-motion:reduce){.os-touch{transition:none}.os-mquote .w{opacity:1}}