/* Mass & Grass — calendar: the wheel of the year, a calendar you turn by hand, your own dates, and how it looks at home */

/* ---------- 1. the year as a fan of cards ---------- */
.fan-sec{padding-block:clamp(24px,4vw,56px) clamp(10px,2vw,24px);overflow:hidden}
.fan-head{display:grid;gap:12px;justify-items:center;text-align:center}
.fan-head h1{font-size:var(--fs-h1)}
.fan-head h1 em{font-style:normal;color:var(--acc,var(--clay-deep));transition:color .8s}
.fan-head .lead{text-align:center}
.fan{position:relative;isolation:isolate;z-index:0;height:clamp(380px,46vw,520px);margin-top:clamp(10px,2vw,24px);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.fan.dragging{cursor:grabbing}
.fan:focus-visible{box-shadow:inset 0 0 0 2px var(--clay);border-radius:20px}
.card{position:absolute;left:50%;top:6%;width:var(--cw,240px);margin-left:calc(var(--cw,240px) / -2);border-radius:14px;overflow:hidden;background:var(--card);
  border:1px solid var(--line);box-shadow:0 22px 40px -26px rgba(30,20,10,.55);transform-origin:50% 100%;will-change:transform,opacity;cursor:pointer;padding:0;text-align:start;color:inherit;font:inherit}
.card img{display:block;width:100%;aspect-ratio:4/3.6;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.card .ct{display:grid;gap:0;padding:10px 14px 14px}
.card b{font-family:var(--f-disp);font-size:1.25rem;line-height:1.3}
.card span{font-size:.8rem;font-weight:700;color:var(--c)}
.card.on{box-shadow:0 34px 60px -28px rgba(30,20,10,.6),0 0 0 2px var(--c)}
.fan-foot{display:flex;align-items:center;justify-content:center;gap:18px}
.fan-cap{display:grid;justify-items:center;min-width:12em;text-align:center}
.fan-cap b{font-family:var(--f-disp);font-size:clamp(1.2rem,1rem + .8vw,1.5rem);line-height:1.3}
.fan-cap span{font-size:.86rem;font-weight:700;color:var(--acc,var(--clay-deep))}
.fan-hint{margin:8px 0 0;text-align:center;font-size:.8rem;font-weight:700;color:var(--ink-3)}

/* a month's details */
.md{border:0;padding:0;width:min(980px,calc(100% - 28px));max-height:calc(100% - 28px);background:transparent;color:var(--ink)}
.md::backdrop{background:rgba(30,22,15,.55);backdrop-filter:blur(6px)}
.md[open]{animation:mdIn .45s var(--ease-out)}
@keyframes mdIn{from{opacity:0;transform:translateY(18px) scale(.97)}}
.md-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(16px,3vw,34px);padding:clamp(14px,2.6vw,28px);border-radius:18px;background:var(--paper);
  max-height:calc(100vh - 28px);overflow:auto}
.md-x{position:absolute;top:10px;inset-inline-end:10px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);cursor:pointer;z-index:2;color:var(--ink)}
.md-art{margin:0;border-radius:12px;overflow:hidden;background:var(--paper-2)}
.md-art img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.md-body{display:grid;gap:10px;align-content:center}
.md-body h3{font-size:var(--fs-h3)}
.md-folk{font-weight:700;color:var(--acc,var(--clay-deep))}
.md-body p{margin:0;color:var(--ink-2);font-family:var(--f-disp);font-size:1.12rem}
.md-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:.8rem;text-align:center;font-variant-numeric:tabular-nums;padding:10px 0;border-block:1px dashed var(--line-2)}
.md-cal .h{font-weight:700;color:var(--ink-3);font-size:.7rem}
.md-cal .f{color:var(--acc,var(--clay))}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row .btn-ghost{padding:10px 16px}
body.lang-en .row .btn-ghost span[aria-hidden],body.lang-en .arrow span[aria-hidden]{display:inline-block;transform:scaleX(-1)}

/* ---------- 2. the calendar on the wall ---------- */
.wall-sec{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(50px,7vw,100px);
  background:linear-gradient(180deg,transparent,var(--light,#F3EFE8) 14%,var(--light,#F3EFE8) 86%,transparent);transition:background 1.2s ease}
:root[data-mg-theme="dark"] .wall-sec{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc,#6b5a48) 16%,var(--paper)) 14%,color-mix(in srgb,var(--acc,#6b5a48) 16%,var(--paper)) 86%,transparent)}
.fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.wall-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,70px);align-items:center}
.wall-nav{display:flex;gap:8px;margin-top:6px}
.arrow{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--card);cursor:pointer;display:grid;place-items:center;font-size:1.2rem;
  transition:border-color .2s,transform .2s}
.arrow:hover{border-color:var(--clay);color:var(--clay-deep);transform:translateY(-2px)}
body.lang-en .arrow span[aria-hidden]{display:inline-block;transform:scaleX(-1)}

.hang-wrap{display:grid;justify-items:center}
/* the binding is a photo of a real wire-o strip (loops tiled at a real pitch, hook in the middle):
   it spans 94% of the page and its wire lies on the paper's top edge, 58.5% down the strip */
.calendar-w{position:relative;isolation:isolate;width:min(100%,460px);container-type:inline-size}
.bind{position:absolute;z-index:8;left:3%;top:0;width:94%;height:auto;max-width:none;pointer-events:none;
  filter:drop-shadow(0 2px 1.5px rgba(30,20,10,.25))}
.bind-gap{height:4.37cqw}
.tex{position:absolute;inset:0;z-index:6;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(160deg,rgba(255,255,255,0) 40%,rgba(60,40,20,.06)),url('/assets/products/calendar/paper.webp') center/100% 100%}
.pages{position:relative;touch-action:none;cursor:grab}
.pages.dragging{cursor:grabbing}
.pg{position:absolute;left:0;top:0;display:block;width:100%}
.pg.front{z-index:3}
/* the pages still underneath: a thin stack of paper edges and a soft shadow */
.stack{position:absolute;inset:0;background:#F4EEE3;
  box-shadow:0 1px 0 #E6DECF,0 2px 0 #F2ECE0,0 3px 0 #E0D7C7,0 4px 0 #EFE8DB,0 5px 0 #D8CEBD,0 34px 44px -26px rgba(40,26,12,.5),0 8px 14px -8px rgba(40,26,12,.22)}
.pg.under{z-index:1}
/* the turning sheet is drawn in WebGL on a canvas that reaches above and beside the page */
.gl{position:absolute;z-index:4;pointer-events:none;display:none;max-width:none}
.gl.on{display:block}
.flip-hint{position:absolute;z-index:9;bottom:-44px;left:50%;translate:-50% 0;white-space:nowrap;padding:5px 14px;border-radius:999px;font-size:.78rem;font-weight:700;
  color:var(--ink-2);background:color-mix(in srgb,var(--card) 90%,transparent);border:1px solid var(--line);transition:opacity .5s;pointer-events:none}
.flip-hint span[aria-hidden]{display:inline-block;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(-4px)}}
.flip-hint.gone{opacity:0}

/* ---------- 4. build your year ---------- */
.build-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(20px,4vw,56px);align-items:start}
.whole{display:flex;flex-wrap:wrap;gap:8px}
.whole button{padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);cursor:pointer;font-weight:700;font-size:.84rem;color:var(--ink-2)}
.whole button:hover{border-color:var(--clay);color:var(--clay-deep)}
.build-box{display:grid;gap:14px;padding:clamp(14px,2.2vw,24px);border-radius:16px;background:var(--card);border:1px solid var(--line);min-width:0}
.chosen{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.chosen img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.sum{margin:0;font-weight:700;color:var(--ink-2);font-size:.9rem}
.months-b{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:10px}
.mb{display:grid;gap:6px;padding:8px;border-radius:12px;background:var(--paper);border:1px solid var(--line);min-width:0}
.mb b{font-family:var(--f-disp);font-size:1rem}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.opt{position:relative;border:0;padding:0;background:none;cursor:pointer;border-radius:6px;overflow:hidden;outline:2px solid transparent;outline-offset:1px}
.opt img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.opt small{position:absolute;bottom:2px;inset-inline-start:4px;font-size:.62rem;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.opt[aria-pressed="true"]{outline-color:var(--clay)}
.dates-h{margin:4px 0 0;font-size:.95rem}
.dates{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dates li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--line);cursor:pointer}
.dates li i{flex:0 0 auto;width:26px;height:26px;border-radius:50% 46% 52% 48%;background:var(--c);opacity:.75;filter:url(#rough)}
.dates li b{font-weight:700;min-width:7.5em}
.dates li span{color:var(--ink-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dates .empty{cursor:default;color:var(--ink-3);justify-content:center;background:transparent;border-style:dashed}
.mine-acts{display:flex;gap:10px;flex-wrap:wrap}

.dpop{position:fixed;z-index:70;width:min(92vw,300px);display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);box-shadow:0 24px 50px -20px rgba(30,20,10,.45)}
.dpop[hidden],.dpop [hidden]{display:none!important}
.dpop b{font-family:var(--f-disp);font-size:1.2rem}
.dpop input{width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink);font:inherit;font-size:max(16px,.95rem)}
.dpop input:focus{outline:none;border-color:var(--clay)}
.dpop-acts{display:flex;gap:6px;flex-wrap:wrap}
.dpop-acts .btn{padding:8px 14px;font-size:.84rem}

/* ---------- 4. see it at home ---------- */
.fmt-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,5vw,60px);align-items:center}
.finish{display:inline-flex;width:max-content;padding:4px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line)}
.finish button{padding:8px 16px;border-radius:999px;border:0;background:transparent;cursor:pointer;font-weight:700;font-size:.86rem;color:var(--ink-2)}
.finish button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 2px 8px -4px rgba(40,26,12,.35)}
.mock{margin:0;border-radius:16px;overflow:hidden;background:var(--paper-2);box-shadow:0 30px 60px -36px rgba(40,26,12,.5)}
.mock canvas{display:block;width:100%;height:auto;transition:opacity .35s}
.mock canvas.sw{opacity:.2}
.note{margin-top:22px;font-size:.8rem;color:var(--ink-3);text-align:center}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .wall-grid,.fmt-grid,.build-grid{grid-template-columns:1fr}
  .md-in{grid-template-columns:1fr}
  .chosen{grid-template-columns:repeat(6,1fr)}
  .calendar-w{width:min(100%,400px)}
}
@media (prefers-reduced-motion:reduce){.flip-hint span[aria-hidden]{animation:none}}