

:root{
  
  --cream:#FDF8F1;          
  --ink:#27361F;            
  --orange:#F49849;         
  --orange-deep:#D9620F;    
  --orange-print:#BF5F0D;   
  --green:#5F7753;          
  --gold:#FAA701;           
  --type-orange:var(--orange-deep);
  --btn-orange:var(--type-orange);   

  --pgrain:.35;             
  --bgrain:.35;             
  --ease-out:cubic-bezier(.16,1,.3,1);   

  --f-head:"Hanken Grotesk",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,sans-serif;
  --f-narrow:"Archivo",system-ui,sans-serif;  
  --f-mono:"DM Mono",ui-monospace,monospace;
  --f-serif:"Bodoni Moda",Georgia,serif;
}
html[data-orange="print"]{--type-orange:var(--orange-print)}
html[data-orange="today"]{--type-orange:var(--orange)}
html[data-orange="cole"]{--type-orange:#F38628}

html[data-btn="hint"]{--btn-orange:#EC801E}
html[data-btn="touch"]{--btn-orange:#E57911}

html[data-ink="black"]{--ink:#241A12}
html[data-ink="green"]{--ink:#33452C}
html[data-ink="brown"]{--ink:#6B2D0C}
html[data-ink="og"]{--ink:#5F7753}   

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--cream);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit}



.ph{position:relative;overflow:hidden;margin:0}
.ph img,.ph video{width:100%;height:100%;object-fit:cover}
img.edit,video.edit{filter:url(#hc-color)}

html[data-photo="bw"] img.edit,html[data-photo="bw"] video.edit,img.edit.bw,video.edit.bw{filter:url(#hc-bw)}
html[data-photo="raw"] img.edit,html[data-photo="raw"] video.edit{filter:none}
.ph::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:calc(var(--pgrain) * .95);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='2.6' intercept='-.8'/><feFuncG type='linear' slope='2.6' intercept='-.8'/><feFuncB type='linear' slope='2.6' intercept='-.8'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}


.page-grain{position:fixed;inset:0;pointer-events:none;z-index:900;mix-blend-mode:multiply;opacity:var(--bgrain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 .36  0 0 0 0 .29  0 0 0 0 .22  0 0 0 -2.2 1.25'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>")}


.ph-words{position:relative}
.ph-tag{display:inline-block;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border:1px dashed currentColor;border-radius:3px;opacity:.55;vertical-align:middle}
html[data-panel="hidden"] .ph-tag{display:none}


.hc-l-mask{padding-bottom:.16em;margin-bottom:-.16em}
.hc-line{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}



.pmenu{display:none}
@media (max-width:760px){
  .pmenu{display:block;position:fixed;left:0;right:0;bottom:0;z-index:800;pointer-events:none}
  .pmenu__fade{position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(to top,var(--pm-fade,rgba(253,248,241,.92)),rgba(253,248,241,0));pointer-events:none;opacity:.6;transition:opacity .4s}   
  .pmenu__pill{pointer-events:auto;position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3;
    min-width:112px;height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--pm-bg,var(--ink));color:var(--pm-ink,var(--cream));
    font:600 15px/1 var(--f-head);letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
  .pmenu__pill .x{display:none;font-size:22px;line-height:1}
  .pmenu__panel{pointer-events:auto;position:fixed;inset:0;z-index:2;background:var(--pm-panel,var(--ink));color:var(--pm-panel-ink,var(--cream));
    clip-path:inset(100% 0 0 0);transition:clip-path .55s var(--ease-out);display:flex;flex-direction:column;justify-content:flex-end;padding:0 24px calc(110px + env(safe-area-inset-bottom))}
  .pmenu__panel a{color:inherit;text-decoration:none;font:600 34px/1.12 var(--f-head);letter-spacing:-.02em;display:block;padding:4px 0;opacity:0;transform:translateY(18px);transition:opacity .45s,transform .6s var(--ease-out)}
  .pmenu__panel .small a{font:500 16px/1.4 var(--f-body);letter-spacing:0;padding:3px 0}
  .pmenu__panel .small{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:0 16px;opacity:.8}
  .pmenu__panel .give{margin-top:18px;display:inline-flex;align-self:flex-start;background:var(--btn-orange);color:#fff;border-radius:999px;padding:16px 30px;font:700 21px/1 var(--f-head)}   

.pmenu__panel a[aria-current="page"]::before{content:"";display:inline-block;width:.26em;height:.26em;border-radius:50%;background:var(--type-orange);margin-right:.32em;transform:translateY(-.18em)}
.pmenu__panel .give[aria-current="page"]::before{background:currentColor}

.pmenu__panel .pm-logo{position:absolute;left:24px;top:calc(22px + env(safe-area-inset-top));display:inline-flex;align-items:center;gap:.45em;font:700 22px/1 var(--f-head);letter-spacing:-.02em;padding:6px 0}
.pmenu__panel .pm-logo i{width:1.15em;height:1.15em;flex:none;background:currentColor;-webkit-mask:url(../img/logo-bear.png) center/178% no-repeat;mask:url(../img/logo-bear.png) center/178% no-repeat}
  .pmenu.open .pmenu__panel{clip-path:inset(0 0 0 0)}
  .pmenu.open .pmenu__panel a{opacity:1;transform:none}
  .pmenu.open .pmenu__panel a:nth-child(2){transition-delay:.04s}.pmenu.open .pmenu__panel a:nth-child(3){transition-delay:.08s}
  .pmenu.open .pmenu__panel a:nth-child(4){transition-delay:.12s}.pmenu.open .pmenu__panel a:nth-child(5){transition-delay:.16s}
  .pmenu.open .pmenu__fade{opacity:0}
  .pmenu.open .pmenu__pill{background:var(--pm-panel-ink,var(--cream));color:var(--pm-panel,var(--ink))}
  .pmenu.open .pmenu__pill .t{display:none}.pmenu.open .pmenu__pill .x{display:block}
  body.pmenu-lock{overflow:hidden}
}


.rv{position:fixed;left:12px;bottom:12px;z-index:1000;max-width:min(520px,calc(100vw - 24px));background:rgba(253,248,241,.96);color:#241A12;
  border:1px solid rgba(36,26,18,.18);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.12);font:500 12px/1.3 system-ui,sans-serif;padding:10px 12px;backdrop-filter:blur(8px)}
.rv__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0}
.rv__label{min-width:86px;color:rgba(36,26,18,.6);font-weight:600}
.rv button{border:1px solid rgba(36,26,18,.22);background:#fff;border-radius:6px;padding:4px 8px;cursor:pointer;font:500 12px/1.2 system-ui,sans-serif;color:#241A12}
.rv button[aria-pressed="true"]{background:#241A12;color:#FDF8F1;border-color:#241A12}
.rv a.dir{border:1px solid rgba(36,26,18,.22);border-radius:6px;padding:4px 8px;text-decoration:none;color:#241A12;background:#fff}
.rv a.dir[aria-current="page"]{background:#D9620F;color:#fff;border-color:#D9620F}
.rv input[type=range]{width:110px}
.rv__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.rv__title{font-weight:700}
.rv__note{color:rgba(36,26,18,.6);font-size:11px;margin-top:6px;max-width:480px}
.rv__hexwrap{display:inline-flex;align-items:center;gap:6px;margin-left:4px}
.rv__hexwrap input[type=color]{width:30px;height:24px;padding:0;border:1px solid rgba(36,26,18,.22);border-radius:6px;background:#fff;cursor:pointer}
.rv__hexwrap input[type=text]{width:72px;border:1px solid rgba(36,26,18,.22);border-radius:6px;padding:3px 6px;font:12px/1.2 ui-monospace,monospace;color:#241A12;background:#fff;text-transform:uppercase}
.rv__cr{flex-basis:100%;color:rgba(36,26,18,.6);font-size:11px}
.rv__saves{border-top:1px solid rgba(36,26,18,.14);margin-top:8px;padding-top:8px}
.rv__in{width:100%;resize:vertical;min-height:40px;border:1px solid rgba(36,26,18,.22);border-radius:6px;padding:6px 8px;font:13px/1.35 system-ui,sans-serif;color:#241A12;background:#fff}
.rv .rv__save{background:#D9620F;color:#fff;border-color:#D9620F;font-weight:600}
.rv__status{color:#3d6b35;font-size:11px}
.rv__list{max-height:150px;overflow:auto;margin-top:4px}
.rv__item{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:start;padding:5px 0;border-top:1px dashed rgba(36,26,18,.12)}
.rv__item a{color:#241A12;font-weight:600;white-space:nowrap}
.rv__item span{color:rgba(36,26,18,.75);overflow-wrap:anywhere}
.rv__item button{border:0;background:none;padding:0 4px;font-size:15px;line-height:1;color:rgba(36,26,18,.5)}
.rv-show{position:fixed;left:12px;bottom:12px;z-index:1000;display:none;border:1px solid rgba(36,26,18,.2);background:rgba(253,248,241,.9);border-radius:999px;padding:6px 10px;font:600 11px/1 system-ui,sans-serif;cursor:pointer;color:#241A12}
html[data-panel="hidden"] .rv{display:none}
html[data-panel="hidden"] .rv-show{display:block;opacity:.35}
@media (max-width:760px){
  .rv{top:8px;bottom:auto;left:8px;right:8px;max-width:none;max-height:46vh;overflow:auto;font-size:11px}
  .rv-show{top:auto;bottom:calc(26px + env(safe-area-inset-bottom));left:10px}  
}

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


.rv__label small{display:block;font-weight:400;font-size:11px;color:rgba(36,26,18,.5);margin-top:1px}
html.hc-guest .rv__label{min-width:150px;max-width:150px;color:#241A12}
html.hc-guest .rv__grain{display:none}

html.hc-guest .rv__hexwrap{display:inline-flex;align-items:center;gap:6px}
html.hc-guest .rv__note--guest{color:#241A12;font-size:12px;line-height:1.45}
.rv__start{margin-left:auto;color:#241A12;font-weight:600;text-decoration:underline;text-underline-offset:3px}
html.hc-guest .hgp input,html.hc-guest .hgp .cr{display:none}
html.hc-notes .hgp{display:none}
html.hc-nopanel .rv,html.hc-nopanel .rv-show{display:none!important}   
.rv__note--guest a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}   


.hc-pause{appearance:none;border:0;margin:0;cursor:pointer;color:var(--cream);display:inline-flex;align-items:center;gap:8px}
.hc-pause .i{position:relative;display:block;width:10px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.hc-pause.is-paused .i{border:0;width:10px;height:12px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.hc-pause--corner{position:absolute;right:10px;bottom:10px;z-index:4;width:32px;height:32px;justify-content:center;border-radius:50%;background:rgba(36,26,18,.55);padding:0}
.hc-pause--corner::before{content:"";position:absolute;inset:-6px}
.hc-pause--row{margin:-12px 0 -12px auto;min-height:44px;padding:0 2px;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;align-self:baseline}
.hc-pause--row .i{width:9px;height:10px;border-width:0 2.5px}
.hc-pause--row.is-paused .i{width:9px;height:10px}
.hc-pause:focus-visible{outline:2px solid currentColor;outline-offset:3px}
