/* papers-moves.css — The papers page: the title as a window onto the photograph, sheets that lean to the pointer, and a pile to throw. */

/* Title as a window: a forest curtain, drawn on a canvas, with the letters cut out of it. The h1 stays for screen readers. */
html[data-moves] .hero-photo::after{background:rgba(243,239,228,.14)}
html[data-moves] .hero-photo{background-color:#1f3b2d}
html[data-moves] .hero-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;text-shadow:none}
html[data-moves] .hero-sub{margin:0;font-size:clamp(16px,1.6vw,22px);color:#cdbf9a;opacity:1}
.tw-curtain{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* Tilt: each sheet carries a sheen and a deeper shadow, shown only near the pointer. */
.tilt-shade{position:absolute;inset:0;z-index:-1;box-shadow:0 34px 70px rgba(15,28,22,.42),0 8px 18px rgba(15,28,22,.2);opacity:0;visibility:hidden;pointer-events:none}
.tilt-gloss{position:absolute;inset:0;z-index:6;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none}
.tilt-gloss b{position:absolute;left:-60%;top:-60%;width:220%;height:220%;will-change:transform;
  background:linear-gradient(112deg,rgba(180,138,58,0) 34%,rgba(180,138,58,.22) 43%,rgba(255,250,235,.95) 50%,rgba(205,191,154,.3) 57%,rgba(31,59,45,.07) 66%,rgba(31,59,45,0) 76%)}

/* The pile: one canvas over the end of the stage. It takes no pointer events itself; a sheet is found by position, so the links stay live. */
.pl-canvas{position:absolute;left:0;top:0;display:block;pointer-events:none;will-change:transform,opacity}
html[data-pile-over] #stage{cursor:grab}
html[data-pile-held],html[data-pile-held] #stage,html[data-pile-held] #stage *{cursor:grabbing!important}

/* ---------- Phones and tablets ---------- */
@media (max-width:1023px){
  /* The top bar is open like the desktop's and takes each scene's colour; over the moving grid it becomes a forest bar. */
  #chrome .topnav{background:transparent;transition:top .8s cubic-bezier(.5,0,.5,1),opacity .5s,background-color .3s}
  body.white .topnav .logo{color:#fff}
  body.white .topnav .logo svg .ink{fill:#fff}
  .topnav .shell-btn{color:var(--ink);min-height:36px;transition:color .5s}
  body.white .topnav .shell-btn{color:#fff}
  #stage.grid-live ~ #chrome .topnav{background:rgba(26,44,36,.96)}
  .topnav .logo,.topnav .pill,.topnav .shell-btn{position:relative}
  .topnav .logo::after,.topnav .pill::after,.topnav .shell-btn::after{content:"";position:absolute;left:-2px;right:-2px;top:-7px;bottom:-7px}
  .nav-right{gap:10px}
  body.on-brass .topnav .pill{background:var(--forest)}

  /* The grid: the type is set for the size a page has here, and every sheet opens its paper. */
  #stage.grid-live .sheet{pointer-events:auto}
  .page{padding:7em 7em}
  .page-mark{left:4em;top:4em}
  .page-label{font-size:4em;line-height:1.2;max-height:2.4em;overflow:hidden;color:#6f6f6a}
  .page-year{font-size:3.6em;right:1.95em;top:auto;bottom:1.6em;color:#6f6f6a}
  .page-title{font-size:6.6em;line-height:1.14;margin:.25em 0 .4em}
  .page-section{font-size:3.8em;line-height:1.25;margin:.6em 0 .6em}
  .page-cites{font-size:3.2em;left:2.2em;bottom:1.9em}
  .comment{margin-left:0;box-sizing:border-box;padding:12px 14px 12px 62px;font-size:13px;line-height:1.45}
  .comment .av{left:12px;top:12px}
  .done-heading h2{font-size:min(54px,12.4vw);line-height:.95}
  .done-heading p{margin-top:6px;font-size:clamp(15px,4.1vw,19px)}
  .wave{font-size:min(48px,10.8vw);top:24vh}
  .scene-heading h2{font-size:min(38px,8.8vw)}
  .scene-heading p{font-size:clamp(15px,4.1vw,19px);margin-top:8px}
  .scrap{width:min(220px,34vw);padding:16px 18px 22px}
  .scrap-title{font-size:18px;margin-bottom:8px}
  .scrap{top:auto;bottom:16px}
  .scrap.play{transform:translate(-8%,0) rotate(-7deg)}
}
/* Phones upright, and phones on their side: the words on the sheet are larger than the page's own scale gives. */
/* Upright the sheet is held by the width, which leaves room for these above and below it. On a small tablet on its side it is held by
 * the height, so they stay as they are on a desktop. */
@media (max-width:1023px) and (orientation:portrait),(max-height:500px) and (max-width:1023px){
  .done-heading{top:57px;transform:none}
  .scene-heading-cream{bottom:max(24px,env(safe-area-inset-bottom));padding:0 20px;box-sizing:border-box}
  .scene-heading-cream h2,.scene-heading-cream p{display:block}
  .scene-heading-cream h2{font-size:min(30px,7.4vw)}
  .scene-heading-cream p{margin:4px 0 0;font-size:clamp(15px,4.1vw,19px)}
}
@media (max-width:1023px) and (orientation:landscape) and (min-height:501px){
  .scene-heading-cream h2{font-size:clamp(20px,2.1vw,30px)}
  .scene-heading-cream p{margin:0 0 0 14px;font-size:clamp(15px,1.25vw,18px)}
}
@media (max-width:699.98px),(max-height:500px) and (max-width:1023px){
  .mani-small{font-size:4.3em}
  .mani-big{font-size:10.8em}
  .mani-foot{font-size:3.7em;margin-top:1em}
  .paper-label{font-size:3.2em}
  .paper-section{font-size:3.4em}
  .cover-client,.cover-kicker,.cover-date{font-size:4.2em}
  .cover-title{font-size:7.6em;line-height:1.05}
}
@media (max-width:699.98px){
  /* The foot: a taller forest band, the list close to the top, links in two rows that take a finger. */
  .features{top:30px}
  .features h3{margin-bottom:10px;font-size:15px}
  .feature{margin-bottom:6px;min-height:40px;gap:12px;font-size:13px}
  .footer-band{height:272px}
  .signup{top:calc(100% - 260px)}
  .signup h3{font-size:18px}
  .signup p{margin:4px 0 10px;font-size:13px;line-height:1.35}
  .signup-note{margin:4px 0 0;min-height:16px;font-size:11px}
  .footer-links{bottom:calc(2px + env(safe-area-inset-bottom));gap:0;margin-left:-6px}
  .footer-links a,.footer-links .mark{min-height:40px;display:inline-flex;align-items:center;color:rgba(255,255,255,.72)}
  .footer-links a{padding:0 6px;min-width:40px;box-sizing:border-box;justify-content:center}
  .footer-links .spacer{display:none}
  .footer-links .mark{font-size:0;gap:0;margin-left:auto}
  .signup p a{padding:13px 0}
}
@media (max-height:500px) and (max-width:1023px){
  /* A phone on its side: the words move into the column beside the sheet; the title fits between the bar and the arrow. */
  .hero-copy .hero-sub{margin-top:0;font-size:16px}
  .chev{left:auto;right:18px;bottom:14px;margin:0;width:44px;height:44px}
  .chev svg{width:22px;height:22px}
  .scene-heading,.scene-heading-cream,.done-heading{left:20px;right:auto;bottom:auto;top:50%;margin-top:-52px;padding:0;width:calc(50vw - 41vh - 28px);text-align:left}
  .scene-heading h2,.scene-heading-cream h2,.done-heading h2{font-size:min(30px,4.2vw);line-height:1.04}
  .scene-heading p,.scene-heading-cream p,.done-heading p{margin:8px 0 0;font-size:15px;line-height:1.35}
  .bigword-edit{left:20px;top:64px;font-size:min(40px,5.6vw)}
  .wave{top:64px}
  /* The foot in three columns: the pile, the list, and the form on forest, with the links along the bottom. */
  .footer{left:0;right:0}
  .footer-band{height:100%;clip-path:polygon(0 calc(100% - 44px),67% calc(100% - 44px),67% 0,100% 0,100% 100%,0 100%)}
  .features{left:34%;width:32%;top:14px}
  .features h3{margin-bottom:8px;font-size:14px}
  .feature{margin-bottom:4px;min-height:40px;gap:10px;font-size:12px}
  .feature i{width:30px;height:30px;font-size:11px}
  .signup{left:69%;right:16px;top:14px}
  .signup h3{font-size:15px}
  .signup p{margin:4px 0 8px;font-size:12px;line-height:1.3}
  .signup-form{height:42px}
  .signup-form input{padding:0 12px}
  .signup-form.animate button{height:42px}
  .signup-note{margin:3px 0 0;min-height:14px;font-size:10px}
  .footer-links{left:10px;right:16px;bottom:2px;flex-wrap:nowrap;gap:0 4px}
  .footer-links a,.footer-links .mark{min-height:40px;display:inline-flex;align-items:center;color:rgba(255,255,255,.72)}
  .footer-links a{padding:0 6px;min-width:40px;box-sizing:border-box;justify-content:center}
  .footer-links .mark{font-size:0;gap:0}
  .signup p a{padding:13px 0}
  #landscape-lock{display:none!important}
}
@media (min-width:700px) and (max-width:1023px) and (min-height:501px){
  .footer-links a{min-height:40px;display:inline-flex;align-items:center}
  .signup p a{padding:13px 0}
}

/* A field under 16px makes an iPhone zoom the page when it is tapped. The placeholder can stay small. */
.signup-form .tick{pointer-events:none}
@media (hover:none){
  .signup-form input{font-size:16px}
  .signup-form input::placeholder{font-size:14px}
}

/* The Index button takes the top bar's ink like the links beside it, so it does not vanish on the light scenes */
.topnav .shell-btn{color:var(--ink);transition:color .5s}
body.white .topnav .shell-btn{color:#fff}