/* The Prison Picasso: shared sheet for the pages behind the buttons (bag, shop, gallery, foundation, house rules). Same tokens as the watch page. */
@font-face{font-family:"Bodoni Fallback";src:local("Georgia");size-adjust:94%;ascent-override:96%;descent-override:26%;line-gap-override:0%}
:root{
  --ink:#0d0b09; --ink-2:#14110e; --bone:#ede5d6; --ash:#a69d8e; --dust:#8a8174;
  --brass:#c9a661; --brass-ink:#17120a; --hair:rgba(237,229,214,.12); --hair-2:rgba(237,229,214,.26); --err:#e3a387;
  --display:"Bodoni Moda","Bodoni Fallback","Bodoni 72","Didot",Georgia,serif;
  --text:"Jost","Futura","Avenir Next","Century Gothic",sans-serif;
  --gutter:clamp(20px,5vw,72px); --max:1320px;
  --ease:cubic-bezier(.16,1,.3,1); --fast:220ms; --mid:420ms;
  /* type: five display steps and three small text steps, the same on every page */
  --d1:clamp(2.2rem,1.6rem + 2.6vw,4rem); --d2:clamp(1.9rem,1.4rem + 1.6vw,2.7rem); --d3:clamp(1.4rem,1.15rem + 1.1vw,2.1rem); --d4:clamp(1.1rem,1rem + .35vw,1.3rem); --d5:1.1rem;
  --t2:.95rem; --t3:.88rem; --t4:.8rem; --lh-d:1.04; --ls-d:-.015em;
  /* layout: twelve columns, one gutter; the bar at the top; the space above a page title */
  --g:24px; --bar:68px; --top:clamp(44px,7vw,104px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 16px)}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--ink);color:var(--bone);font-family:var(--text);font-weight:400;font-size:1.0625rem;line-height:1.65;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility;caret-color:var(--brass);scrollbar-color:rgba(237,229,214,.22) var(--ink)}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:.2em}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:400;text-wrap:balance}
p,li{text-wrap:pretty}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
::selection{background:var(--brass);color:var(--brass-ink)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:max(16px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 12px);z-index:100;background:var(--brass);color:var(--brass-ink);padding:12px 18px;font-size:.95rem;font-weight:500;letter-spacing:.01em;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border:1px solid transparent;border-radius:0;background:none;font-family:var(--text);font-weight:500;font-size:1rem;letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;touch-action:manipulation;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.btn:active{transform:scale(.98)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:default;pointer-events:none}
.btn-brass{background:var(--brass);color:var(--brass-ink)}
.btn-line{border-color:var(--hair-2);color:var(--bone)}
.btn .p{font-variant-numeric:tabular-nums;opacity:.72;font-weight:400}
.link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--text);font-weight:500;font-size:1rem;letter-spacing:.01em;text-decoration:none;color:var(--bone);background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-repeat:no-repeat;background-position:0 calc(50% + .8em);transition:background-size 260ms var(--ease),opacity var(--fast) var(--ease)}
.link:active{opacity:.72}
@media (hover:hover) and (pointer:fine){
  .btn-brass:hover{background:var(--bone)}
  .btn-line:hover{border-color:var(--bone)}
  .link:hover{background-size:0 1px;background-position:100% calc(50% + .8em)}
}

/* header: the same bar as the film page, and it stays; the title lockup takes you back to the film, the bag is always one tap away */
.sub-top{position:sticky;top:0;z-index:20;background:var(--ink);border-bottom:1px solid var(--hair)}
.sub-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--bar)}
.sub-top .mark{display:block;width:96px;flex:none;padding-block:6px}
@media (min-width:1024px){.sub-top .mark{width:112px}}
.sub-top .mark img{width:100%;height:auto;aspect-ratio:2400/926;object-fit:contain}
.sub-top .back{font-size:.95rem;color:var(--ash);text-decoration:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;transition:color var(--fast) var(--ease)}
.sub-top .back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;transition:transform var(--fast) var(--ease)}
@media (hover:hover) and (pointer:fine){.sub-top .back:hover{color:var(--bone)}.sub-top .back:hover svg{transform:translateX(-4px)}}
.sub-top .right{display:flex;align-items:center;gap:clamp(14px,3vw,30px)}
.sub-top .back .short{display:none}
@media (max-width:340px){.sub-top .right .back .long{display:none}.sub-top .right .back .short{display:inline}}          /* the narrowest phones: the word shortens, it never becomes a bare arrow */
.bagl{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;font-size:.95rem;color:var(--bone);text-decoration:none}
.bagl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}
.bagl b{font-weight:400;font-variant-numeric:tabular-nums;color:var(--brass);min-width:1ch}
.bagl b:empty{display:none}
.bagl:has(b:empty){margin-right:-12px}          /* no count: the icon itself sits on the right edge of the grid */
.bagl:active{opacity:.72}

main{flex:1}

/* footer: one quiet line of house rules */
.sub-foot{border-top:1px solid var(--hair);margin-top:clamp(64px,9vw,120px);padding-block:26px calc(26px + env(safe-area-inset-bottom,0px));font-size:.8rem;color:var(--dust)}
.sub-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 22px;align-items:center}
.sub-foot nav{display:flex;flex-wrap:wrap;gap:0 22px}
.sub-foot a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;transition:color var(--fast) var(--ease)}
.sub-foot a[aria-current="page"]{color:var(--bone)}
@media (hover:hover) and (pointer:fine){.sub-foot a:hover{color:var(--bone)}}

/* a page title is the same size and the same distance from the bar on every page */
.page-h,.doc-h{font-family:var(--display);font-size:var(--d1);line-height:var(--lh-d);letter-spacing:var(--ls-d)}

/* long-form pages (terms, refunds, privacy, content notice, copyright) */
.doc{padding-block:var(--top) 0;display:grid;gap:clamp(28px,4vw,56px) var(--g)}
.doc-h{max-width:16ch}
.doc-sub{margin-top:12px;font-family:var(--display);font-style:italic;font-size:var(--d5);line-height:1.3;color:var(--ash)}
.prose{max-width:66ch;color:var(--ash)}
.prose > * + *{margin-top:1.05em}
.prose h2{font-family:var(--display);font-size:var(--d3);line-height:1.15;color:var(--bone);margin-top:2.1em}
.prose strong{color:var(--bone);font-weight:500}
.prose ul,.prose ol{margin:1.05em 0 0;padding:0;list-style:none;display:grid;gap:.55em}
.prose li{position:relative;padding-left:1.5em}
.prose ul li::before{content:"";position:absolute;left:0;top:.82em;width:.7em;height:1px;background:var(--hair-2)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:0;font-family:var(--display);font-style:italic;color:var(--brass)}
.prose a{color:var(--bone);text-decoration-color:var(--hair-2);transition:text-decoration-color var(--fast) var(--ease);padding-block:10px;margin-block:-10px}          /* a 44px target without moving a line */
@media (hover:hover) and (pointer:fine){.prose a:hover{text-decoration-color:var(--bone)}}
.prose > p:first-child{font-size:1.16rem;line-height:1.6;color:var(--bone)}
@media (min-width:980px){
  .doc{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .doc > :first-child{grid-column:1/6}
  .doc > .prose{grid-column:7/13}
  .doc-top{position:sticky;top:calc(var(--bar) + 40px)}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}