/* Mass & Grass — home: the work laid on the paper.
   Layout: a loose table of six objects in a 12-column grid (two on phones), each tilted a little
   as if placed by hand; the label sits under each object like a pencilled note. */

.table{padding-block:clamp(24px,4vw,56px) clamp(32px,5vw,64px)}
.table-in{max-width:1180px;margin:0 auto;padding-inline:var(--gutter);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-areas:
    "p p p p p p p s s s s s"
    "p p p p p p p c c c c c"
    "k k k k h h h h n n n n";
  column-gap:clamp(16px,3vw,40px);row-gap:clamp(28px,4vw,56px);align-items:center}
.table-note{margin:clamp(28px,4vw,48px) auto 0;padding-inline:var(--gutter);text-align:center;font-size:.95rem;font-weight:300;color:var(--ink-2);max-width:46ch}

/* one object and its label */
.obj{display:grid;justify-items:center;gap:14px;min-width:0;color:inherit;
  animation:place .8s calc(.08s + var(--i) * .07s) var(--ease-out) both}
@keyframes place{from{opacity:0;transform:translateY(14px)}}
.obj-art{position:relative;display:block;width:100%;transition:transform .5s var(--ease-out),filter .5s}
.obj:hover .obj-art,.obj:focus-visible .obj-art{transform:translateY(-6px) rotate(var(--tilt-h,0deg))}
.obj-label{font-size:.95rem;font-weight:400;color:var(--ink);border-bottom:1px solid transparent;transition:border-color .25s}
.obj:hover .obj-label,.obj:focus-visible .obj-label{border-color:var(--ink)}
.obj-label small{font-size:.75rem;color:var(--ink-3);font-weight:400}
.obj:focus-visible{outline:none}
.obj:focus-visible .obj-label{outline:1.5px solid var(--ink);outline-offset:4px}
.obj img{display:block;width:100%;height:auto}

.obj-paintings{grid-area:p}
.obj-stickers{grid-area:s}
.obj-postcards{grid-area:c}
.obj-calendars{grid-area:k}
.obj-cloth{grid-area:h}
.obj-designs{grid-area:n}

/* a print with a white border, taped to the paper */
.o-print{position:relative;display:block;width:min(100%,640px);margin-inline:auto;padding:clamp(8px,1.2vw,14px);background:var(--sheet);
  box-shadow:var(--lift);rotate:-1.6deg}
.obj-paintings .obj-art{--tilt-h:.6deg}
.o-print img{width:100%}
.tape{position:absolute;width:clamp(56px,8vw,96px);height:clamp(18px,2.4vw,28px);background:rgba(232,220,196,.72);
  box-shadow:0 1px 2px rgba(60,45,30,.12);mix-blend-mode:multiply}
.tape.t1{top:clamp(-12px,-1.2vw,-8px);inset-inline-start:12%;rotate:-6deg}
.tape.t2{top:clamp(-12px,-1.2vw,-8px);inset-inline-end:10%;rotate:5deg}
:root[data-mg-theme="dark"] .tape{background:rgba(232,220,196,.35);mix-blend-mode:normal}

/* cut-out stickers scattered on the paper */
.o-stickers{position:relative;display:block;aspect-ratio:5/4;width:min(100%,420px);margin-inline:auto}
.o-stickers .s{position:absolute;width:38%;filter:drop-shadow(0 2px 2px rgba(60,45,30,.18)) drop-shadow(0 8px 10px rgba(60,45,30,.12))}
.o-stickers .s0{left:4%;top:6%;rotate:-10deg}
.o-stickers .s1{left:36%;top:0;width:30%;rotate:8deg}
.o-stickers .s2{left:60%;top:22%;width:36%;rotate:-4deg}
.o-stickers .s3{left:24%;top:46%;width:34%;rotate:12deg}
.obj-stickers .obj-art{--tilt-h:-1deg}

/* two postcards, one over the other */
.o-cards{position:relative;display:block;aspect-ratio:3/2.2;width:min(100%,400px);margin-inline:auto}
.o-card{position:absolute;width:74%;padding:7px;background:var(--sheet);box-shadow:var(--lift)}
.o-card.c0{left:2%;top:4%;rotate:-5deg}
.o-card.c1{right:2%;bottom:2%;rotate:4deg}
.obj-postcards .obj-art{--tilt-h:1deg}

/* a wall calendar: the real wire binding over a page with the painting and the month */
.o-cal{position:relative;display:block;width:min(100%,300px);margin-inline:auto;rotate:1.2deg}
.o-cal-bind{position:relative;z-index:2;width:104%!important;margin:0 -2% -6px}
.o-cal-page{display:block;padding:10px 10px 12px;background:var(--sheet);box-shadow:var(--lift)}
.o-cal-art{aspect-ratio:4/3;object-fit:cover}
.o-cal-name{display:block;margin:8px 2px 4px;font-size:.78rem;font-weight:500;color:#2E2925}
.o-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:1px 0;font-size:.5rem;line-height:1.6;color:rgba(46,41,37,.62);text-align:center;direction:ltr}
.o-cal-days i{font-style:normal}
.o-cal-days .f{color:#A9583A}
:root[data-mg-theme="dark"] .o-cal-name,:root[data-mg-theme="dark"] .o-cal-days{color:var(--ink-2)}

/* the printed hoodie */
.o-garment{position:relative;display:block;width:min(100%,290px);margin-inline:auto}
.o-printwin{position:absolute;overflow:hidden}
.o-printwin img{width:100%;height:100%!important;object-fit:cover;mix-blend-mode:multiply;opacity:.94}
.obj-cloth .obj-art{--tilt-h:-1deg}

/* the sketchbook for what is coming */
.o-book{position:relative;display:block;width:min(100%,220px);margin-inline:auto;rotate:-3deg;filter:drop-shadow(0 10px 14px rgba(60,45,30,.2))}
.o-book-st{position:absolute;width:40%!important;left:30%;top:28%;rotate:8deg;filter:drop-shadow(0 2px 2px rgba(60,45,30,.2))}
.obj.is-soon .obj-art{opacity:.85}

/* ---------- Farah's story ---------- */
.h-story{border-top:1px solid var(--line)}
.h-story-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;max-width:880px;
  opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.h-story-in.in{opacity:1;transform:none}
.h-story-face{width:clamp(140px,22vw,240px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;mix-blend-mode:multiply}
:root[data-mg-theme="dark"] .h-story-face{mix-blend-mode:normal}
.h-story-copy{display:grid;gap:14px;justify-items:start}
.h-story-copy h2{font-size:var(--fs-h2)}
.h-story-copy p{margin:0;color:var(--ink-2);font-weight:300;max-width:46ch}
.h-story-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:4px;font-size:.92rem}

/* ---------- phones ---------- */
@media (max-width:760px){
  .table-in{grid-template-columns:1fr 1fr;grid-template-areas:"p p" "s c" "k h" "n n";column-gap:16px;row-gap:34px}
  .o-print{width:100%}
  .obj-designs .obj-art{width:56%}
  .o-cal-days{font-size:.42rem}
  .h-story-in{grid-template-columns:1fr;justify-items:center;text-align:center}
  .h-story-copy{justify-items:center}
}
@media (prefers-reduced-motion:reduce){
  .obj{animation:none}
  .h-story-in{opacity:1;transform:none}
}