/* Theme. Change the colors here. The page backgrounds can also be set in the dashboard (Home page tab):
   js/theme.js puts them on .p as --bg-l (light) and --bg-d (dark); these defaults apply when none are saved.
   --pw is the page width: 1360px = 1280px of content plus the 40px side gutters, the usual desktop maximum. */
.p{--o:#df4d1c;--t:#000000;--pw:1360px;--line:#ffffff;--bg:var(--bg-l,#d6d6d6);background:var(--bg)}
.p.dark{--t:#f2f2f2;--line:#3a3a3a;--bg:var(--bg-d,#1c1c1c)}
body{margin:0}
.ttog{position:fixed;right:84px;bottom:28px;z-index:6;background:none;border:0;padding:8px 0;font-family:inherit;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--l);cursor:pointer;transition:color .5s}
.ttog:hover{color:var(--o)}.ttog:focus-visible{outline:2px solid var(--o);outline-offset:4px}
.p.dark .ph img{mix-blend-mode:normal}
.totop{position:fixed;right:24px;bottom:16px;z-index:6;width:44px;height:44px;background:none;border:1px solid var(--line);color:var(--t);font-family:inherit;font-size:20px;line-height:1;cursor:pointer;transition:border-color .5s,color .5s}
.totop:hover{border-color:var(--o);color:var(--o)}.totop:focus-visible{outline:2px solid var(--o);outline-offset:4px}

/* Page controls: Ripples, Dark mode and Back to top sit together in one bar at the bottom right,
   on the page color, so they never print on top of the text underneath. */
.ctrls{position:fixed;right:16px;bottom:16px;z-index:6;display:flex;align-items:stretch;background:var(--bg);border:1px solid var(--line);transition:background .5s,border-color .5s}
.ctrls .rtog,.ctrls .ttog,.ctrls .totop{position:static;height:44px;margin:0;padding:0 16px;background:none;border:0;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.ctrls .rtog,.ctrls .ttog{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--l)}
.ctrls .rtog span{margin-left:.6em}
.ctrls .totop{width:44px;padding:0;border-left:1px solid var(--line)}
.ctrls>*+*:not(.totop){border-left:1px solid var(--line)}
.ctrls .rtog:hover,.ctrls .ttog:hover,.ctrls .totop:hover{color:var(--o)}
/* Light / dark switch is an icon (moon or sun, drawn by js/theme.js), square like Back to top */
.ctrls .ttog{width:44px;padding:0;color:var(--t)}
.ctrls .ttog svg{display:block}
@media (max-width:600px){.ctrls{right:12px;bottom:12px}.ctrls .rtog{display:none}.ctrls .rtog{padding:0 12px}}

/* Phones: lighter text. m-hide drops repeated or decorative copy, m-only is its short stand-in. */
.m-only{display:none}
@media (max-width:760px){
  .m-hide{display:none!important}
  .m-only{display:inline}
  /* the small uppercase labels, buttons, filters and tabs keep their style with much less tracking */
  .p :is(.lbl,.hl,.fb,.tab,.sbtn,.sbtn2,.sbtn3,.btn,.back,.chip,.upst,.legend,.wb,.upclose,.mail){letter-spacing:.08em}
  /* lists that were set in spaced capitals read as plain words */
  .p :is(.cell,.opt span){text-transform:none;letter-spacing:0;font-size:16px}
}

/* Phones: keep the control bar clear of the home indicator, and leave room under the last
   line of every page so the bar never sits on top of it. */
@media (max-width:760px){
  .ctrls{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
  .p{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
/* .swipe: a row of filter or tab buttons that scrolls sideways on a phone instead of wrapping.
   It runs to the screen edges (--g is the page gutter) so it is clear there is more to swipe. */
@media (max-width:760px){
  .swipe{--g:22px;display:flex;flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-left:calc(-1 * var(--g));margin-right:calc(-1 * var(--g));padding-left:var(--g);padding-right:var(--g);scroll-padding-left:var(--g)}
  .swipe::-webkit-scrollbar{display:none}
  .swipe>*{flex:none;white-space:nowrap}
}

/* Now working on: optional work in progress snippet beside an update, and the viewer it opens */
.uprow.has-media{grid-template-columns:140px 130px minmax(0,1fr) 168px}
.upmedia{display:block;width:168px;aspect-ratio:4/3;padding:0;border:1px solid var(--line);background:none;overflow:hidden;cursor:zoom-in;align-self:start;transition:border-color .4s}
.upmedia img,.upmedia video{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.6,.2,1)}
.upmedia:hover{border-color:var(--o)}.upmedia:hover img,.upmedia:hover video{transform:scale(1.05)}
.upmedia:focus-visible{outline:2px solid var(--o);outline-offset:4px}
.upviewer{border:0;padding:0;background:transparent;max-width:min(1200px,92vw);max-height:92vh;overflow:visible;color:#f2f2f2}
.upviewer::backdrop{background:rgba(12,12,12,.86)}
.upstage img,.upstage video{display:block;max-width:min(1200px,92vw);max-height:80vh;width:auto;height:auto;margin:0 auto}
.upcap{margin:14px 0 0;font-size:13px;letter-spacing:.04em;color:#cfcfcf;text-align:center}
.upclose{position:absolute;right:0;top:-40px;background:none;border:0;color:#f2f2f2;font:11px/1 inherit;font-family:inherit;letter-spacing:.22em;text-transform:uppercase;padding:10px 0;cursor:pointer}
.upclose:hover{color:var(--o)}.upclose:focus-visible{outline:2px solid var(--o);outline-offset:4px}
@media (max-width:760px){.uprow.has-media{grid-template-columns:1fr}.upmedia{width:100%;max-width:320px}}
@media (prefers-reduced-motion:reduce){.upmedia img,.upmedia video{transition:none}.upmedia:hover img,.upmedia:hover video{transform:none}}