/* digotech/site-mock: a drawn website window (and a phone); --pc = the accent (one of the four palette accents). */
.dg-mock{--pc:var(--p1);display:grid;gap:var(--s-4);min-width:0}
.dg-mock--p2{--pc:var(--p2)}
.dg-mock--p3{--pc:var(--p3)}
.dg-mock--p4{--pc:var(--p4)}
.dg-mock__stage{display:flex;align-items:flex-end;justify-content:center;gap:var(--s-4);min-width:0}
.dg-mock__stage[data-show="desktop"] .dg-phone,.dg-mock__stage[data-show="phone"] .dg-site{display:none}
.dg-mock__stage[data-show="phone"]{align-items:center}
.dg-site{position:relative;overflow:hidden;flex:1;width:100%;max-width:var(--dg-site-w, 420px);margin:0;background:var(--card);border:1px solid var(--rule);border-bottom:0;border-radius:var(--r-pill) var(--r-pill) 0 0;padding:var(--s-3) var(--s-3) 0;display:grid;gap:var(--s-3)}
.dg-site__nav{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2)}
.dg-site__logo{display:flex;align-items:center;gap:var(--s-1);font:700 var(--t-xs)/1 var(--font-display)}
.dg-site__logo i{width:var(--s-3);height:var(--s-3);border-radius:var(--s-1);background:var(--pc)}
.dg-site__links{display:flex;gap:var(--s-1)}
.dg-site__links i{width:var(--s-5);height:var(--s-1);border-radius:var(--s-1);background:var(--paper-3)}
.dg-site__hero{border-radius:var(--r);padding:var(--s-5) var(--s-4);background:color-mix(in oklch, var(--pc) 16%, var(--card));display:grid;gap:var(--s-2)}
.dg-site__hero b{font:800 var(--t-xl)/1.05 var(--font-display);letter-spacing:-0.02em;max-width:14ch}
.dg-site__sub{font-size:var(--t-2xs);color:var(--ink-2)}
.dg-site__btn{justify-self:start;background:color-mix(in oklch, var(--pc) 80%, black);color:var(--on-accent);font:600 var(--t-2xs)/1 var(--font-body);padding:var(--s-2) var(--s-3);border-radius:var(--s-1)}
.dg-site__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-1)}
.dg-site__grid i{aspect-ratio:4/3;border-radius:var(--s-1);background:repeating-linear-gradient(135deg, var(--paper-3) 0 7px, var(--paper-2) 7px 14px)}
/* a real screenshot (the project's featured image / Phone screenshot field) in place of the drawing; the window shows its top */
.dg-site--shot{display:block;padding:0}
.dg-site__bar{display:flex;gap:var(--s-1);padding:var(--s-2) var(--s-3)}
.dg-site__bar i{width:var(--s-2);height:var(--s-2);border-radius:var(--r-pill);background:var(--paper-3)}
.dg-shot{display:block;width:100%;height:auto}
.dg-phone--shot .dg-shot{flex:1;min-height:0;height:100%;object-fit:cover;object-position:top}
/* phone */
.dg-phone{position:relative;flex:none;width:var(--dg-phone-w, 208px);aspect-ratio:208 / 372;border-radius:var(--s-5);border:var(--s-1) solid var(--ink);background:var(--card);overflow:hidden;display:flex;flex-direction:column}
.dg-phone__island{position:absolute;top:var(--s-1);left:50%;width:var(--s-7);height:var(--s-3);border-radius:var(--r-pill);background:var(--ink);transform:translateX(-50%)}
.dg-phone__screen{flex:1;padding:var(--s-5) var(--s-3) var(--s-2);display:grid;align-content:start;gap:var(--s-2);font-size:var(--t-2xs)}
.dg-phone__screen b{font:800 var(--t-s)/1.1 var(--font-display);letter-spacing:-0.02em}
.dg-phone__img{height:var(--s-8);border-radius:var(--s-1);background:color-mix(in oklch, var(--pc) 16%, var(--card))}
.dg-phone__row{display:flex;justify-content:space-between;padding:var(--s-1) 0;border-bottom:1px solid var(--rule)}
/* desktop / phone switch */
.dg-mock__switch{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--paper-2);justify-self:start}
.dg-mock--toggle .dg-mock__switch{justify-self:center}

/* live site (toggle on a project whose website may be framed): the real page laid out at a real device width and zoomed
   down to fit (--dg-live-k from view.js); the window narrows to the tablet / phone width when that button is chosen */
.dg-live{--dg-live-w:1440;--dg-live-h:640px;--dg-live-k:1;--dg-live-dur:var(--dur-morph);width:100%;display:grid;justify-items:center}
.dg-mock__stage[data-show="laptop"] .dg-live{--dg-live-w:1280}
.dg-mock__stage[data-show="tablet"] .dg-live{--dg-live-w:768}
.dg-mock__stage[data-show="phone"] .dg-live{--dg-live-w:390}
.dg-live__win{width:min(100%, calc(var(--dg-live-w) * 1px));border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);box-shadow:0 var(--s-4) var(--s-6) var(--shadow);overflow:hidden;transition:width var(--dg-live-dur) var(--ease-out)} /* ds-ok: unitless device width (also read by view.js) turned into px */
.dg-mock__stage:is([data-show="tablet"],[data-show="phone"]) .dg-live__win{border:var(--s-2) solid var(--ink);border-radius:var(--s-6)}
.dg-mock__stage:is([data-show="tablet"],[data-show="phone"]) .dg-site__bar{display:none}
.dg-live__view{position:relative;height:var(--dg-live-h);overflow:hidden;background:var(--paper-2)}
/* the frame is exactly the device's width, so nothing of the site is cut: a site with a classic scrollbar shows it
   inside the window, as a real browser does (a frame wider by a scrollbar's room cut 15-20px of content off every
   site that has a thin, overlay or hidden scrollbar — DN 2026-10-05) */
.dg-live__frame{position:absolute;top:0;left:0;width:calc(var(--dg-live-w) * 1px);height:calc(var(--dg-live-h) / var(--dg-live-k));border:0;transform:scale(var(--dg-live-k));transform-origin:0 0;background:var(--card)} /* ds-ok: unitless device width turned into px */
@media (max-width: 767px){
  .dg-live{--dg-live-h:520px}
}
@media (prefers-reduced-motion: reduce){
  .dg-live__win{transition:none}
}
.dg-mock__btn{display:inline-grid;place-items:center;min-width:var(--s-7);min-height:var(--s-6);padding:0 var(--s-3);border:0;border-radius:var(--r);background:transparent;color:var(--ink-2);font:600 var(--t-s)/1 var(--font-body);cursor:pointer}
.dg-mock__btn svg{width:var(--icon-s);height:var(--icon-s)}
.dg-mock__btn:hover{color:var(--ink)}
.dg-mock__btn[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px var(--shadow)}