/* Suchmugs full pages (stage two): what the three pages share beyond ../../directions/_shared/base.css.
   Every control answers hover (1440), keyboard focus and press with a change of its own (MUSTS M6; the kit's r3.mc-states). */

/* the concept note never covers content on a phone: it leaves the fixed corner and sits in the flow after the footer */
@media(max-width:900px){.concept-badge{position:static;display:inline-block;margin:14px 20px 18px}}

/* text links: hover recolours the underline, focus rings, press darkens to the accent */
.lnk:active{color:var(--accent,#b70a1a)}
/* nav links and the cart: press turns the text to the bar's accent */
.nav ul a:active{color:var(--navpress,var(--accent,#b70a1a))}
.cart:active{color:var(--navpress,var(--accent,#b70a1a))}
.cart{position:relative;padding:6px 0;outline:0;border-radius:3px}
.cart::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--navline,var(--accent,#b70a1a));transform:scaleX(0);transform-origin:left;transition:transform 180ms cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.cart:hover::after{transform:scaleX(1)}}
.cart:focus-visible{box-shadow:0 0 0 3px var(--navline,var(--accent,#b70a1a))}
.menu-btn:active{background:rgba(0,0,0,.08)}
/* fields: hover darkens the border, press tints the ground */
@media(hover:hover){.field:hover{border-color:var(--accent,#b70a1a)}}
.field:active{background:var(--plate,#f4efe6)}
/* the done state of an add button (its face turns green for 1.8 s, the label reads Added to cart) */
.btn.done>.f{background:#2a6b35}
.btn.done>.f::before{background:#2a6b35}

/* The drawn 11 oz mug (from sketch H): body, rim, coffee, handle in three strokes, the real print multiplied on; --u scales it.
   .np is the name patch: the white of the mug where the print changes, holding the typed name. */
.dm{--u:1px;position:relative;display:block;width:calc(200*var(--u));height:calc(200*var(--u));filter:drop-shadow(0 calc(14*var(--u)) calc(10*var(--u)) rgba(60,40,10,.28))}
.dm .hdl{position:absolute;display:block;left:calc(128*var(--u));top:calc(44*var(--u));width:calc(70*var(--u));height:calc(112*var(--u))}
.dm .hdl svg{width:100%;height:100%;overflow:visible;display:block}
.dm .bd,.dm .rim,.dm .cf{display:block}
.dm .bd{position:absolute;left:0;top:calc(18*var(--u));width:calc(156*var(--u));height:calc(180*var(--u));border-radius:calc(7*var(--u)) calc(7*var(--u)) calc(26*var(--u)) calc(26*var(--u)) / calc(7*var(--u)) calc(7*var(--u)) calc(20*var(--u)) calc(20*var(--u));background:linear-gradient(90deg,#dedad1 0%,#f3f1ec 14%,#fff 36%,#fff 62%,#f0ede6 84%,#d9d5cc 100%);overflow:hidden}
.dm .bd img{position:absolute;left:calc(4*var(--u));top:calc(28*var(--u));width:calc(148*var(--u));height:calc(148*var(--u));object-fit:cover;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 9%,#000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 9%,#000 100%);mask-composite:intersect}
.dm .rim{position:absolute;left:0;top:0;width:calc(156*var(--u));height:calc(36*var(--u));border-radius:50%;background:linear-gradient(180deg,#fff,#eceae4);box-shadow:inset 0 calc(-4*var(--u)) 0 #d9d5cc}
.dm .cf{position:absolute;left:calc(8*var(--u));top:calc(5*var(--u));width:calc(140*var(--u));height:calc(26*var(--u));border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#6b432b 0%,#3a2418 55%,#20120b 100%)}
.dm .np{position:absolute;left:calc(var(--l)*var(--u));top:calc(var(--t)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));display:grid;place-items:center;text-align:center;line-height:1;white-space:nowrap;overflow:hidden;color:#1b1a16;
  background:linear-gradient(90deg,var(--sfl,#e6e6e9),var(--sfr,#e6e6e9)),linear-gradient(90deg,#dedad1 0%,#f3f1ec 14%,#fff 36%,#fff 62%,#f0ede6 84%,#d9d5cc 100%);background-size:100% 100%,calc(156*var(--u)) 100%;background-position:0 0,calc(-1*var(--l)*var(--u)) 0;background-blend-mode:multiply}
/* --sfl/--sfr: the photo's own grey just left and right of the old word (measured on the swatch), multiplied by the body like the print is,
   so the patch is the colour of the mug around it, not a white box */
.dm .np.tick{animation:npop 320ms cubic-bezier(.2,.9,.3,1.1)}
@keyframes npop{40%{transform:scale(1.08)}}