/* Dana Wilcher Art: a print drawn at its size, and a print's window, for her Home and Prints pages (js/print-window.js;
   Gabriel 2026-10-28: Home opens the Prints page's window). css/site.css comes first, the page's own stylesheet after.
   From her confirmed mockup, docs/mockups/telify-web/dana-wilcher/prints.html (".pc", ".pw"); looking closer is her
   Originals page's (css/originals.css ".zoom", ".look"). */

:root { --paper: #FBF8F1; }

/* a print, drawn at its real size (--w by --h inches), filling about two thirds of its tile: paper is a sheet held by two
   clips, its white border in Printful's picture; canvas is wrapped round a stretcher 1.25 in deep, standing off the wall */
.pc { --pw: min(66cqw, calc(87.5cqw * var(--w) / var(--h))); position: relative; display: block; flex: none; width: var(--pw); aspect-ratio: var(--w) / var(--h); }
.pc img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.pc.paper { --m: max(2px, calc(var(--pw) * .25 / var(--w))); background: var(--paper); box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 10px 18px -6px rgba(45, 28, 16, 0.5); }
.pc.paper .clip { position: absolute; top: calc(var(--m) * -0.35); width: max(5px, calc(var(--m) * .9)); height: max(9px, calc(var(--m) * 1.5)); border-radius: 2px; background: linear-gradient(90deg, #8C6A3A, #D8B77A 45%, #9B7742); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.pc.paper .clip.l { left: 18%; } .pc.paper .clip.r { right: 18%; }
.pc.canvas { --d: max(3px, calc(var(--pw) * .625 / var(--w))); box-shadow: var(--d) calc(var(--d) * 1.6) calc(var(--d) * 2.6) rgba(30, 18, 10, 0.45), 1px 1px 0 rgba(0, 0, 0, .35); }
.pc.canvas::after { content: ""; position: absolute; top: 2px; bottom: 0; right: calc(var(--d) * -0.55); width: calc(var(--d) * 0.55); background: linear-gradient(90deg, rgba(20, 10, 5, .65), rgba(20, 10, 5, .35)); transform: skewY(40deg); transform-origin: left top; }
.pc.canvas .eb { position: absolute; top: 100%; left: 2px; right: 0; height: calc(var(--d) * 0.46); background: linear-gradient(180deg, rgba(12, 6, 3, .8), rgba(12, 6, 3, .55)); transform: skewX(50deg); transform-origin: left top; }
.pc.canvas::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset -2px -2px 6px rgba(0, 0, 0, .18); }

/* ---------- a print's window: her drawing of the shop's, the print to scale above a 48 in bench on her plaster wall ---------- */
.pw { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); }
.pw[hidden] { display: none; }
.pw > [data-telify-frame] { display: contents; }
/* The shade over the page fades as a layer of its own (opacity): faded as the window's background colour, Android
   Chrome drew it at full strength for a frame as the close's fade ended, a dark flash over the screen (Gabriel 2026-11-01). */
.pw::before { content: ""; position: absolute; inset: 0; background: rgba(10, 7, 5, 0.78); opacity: 0; transition: opacity .35s ease; }
.pw.open::before { opacity: 1; }
.pw button { -webkit-tap-highlight-color: transparent; }
/* her choices scrolled to their end never carry on into the page behind (js/print-window.js holds it still) */
.pw, .pw-info { overscroll-behavior: contain; }
.pw-card { position: relative; width: min(1120px, 100%); height: min(720px, 100%); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); background: var(--espresso); border: 1px solid rgba(187, 148, 104, 0.22); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .15s ease, transform .58s cubic-bezier(.2, .75, .2, 1); overflow: hidden; }
.pw.open .pw-card { opacity: 1; transform: none; }
.pw-stage { position: relative; min-height: 560px; overflow: hidden; background: linear-gradient(180deg, #BFAF95 0%, #DACDB7 30%, #E2D7C4 62%, #D2C3AA 100%); }
.pw-stage .room-glow { position: absolute; top: 0; left: 0; right: 0; height: 88%; pointer-events: none; background: radial-gradient(ellipse 50% 46% at 50% 34%, rgba(255, 246, 226, 0.75), rgba(255, 240, 210, 0.12) 60%, transparent 76%); mix-blend-mode: soft-light; }
.pw-stage .room-base { position: absolute; left: 0; right: 0; bottom: 12%; height: 10px; background: linear-gradient(#F2EADB, #D9CDB8); box-shadow: 0 -1px 0 rgba(90, 64, 40, .25); }
.pw-stage .room-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: linear-gradient(180deg, #6B4A30 0%, #4A3221 30%, #2E1F15 100%); }
.pw-stage .room-floor::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 190px); }
.pw-piece { position: absolute; left: 50%; translate: -50% 0; transition: bottom .5s cubic-bezier(.2, .7, .2, 1), opacity .22s; }
.pw-piece .pc { cursor: zoom-in; transition: width .5s cubic-bezier(.2, .7, .2, 1); }
/* a picture just picked hides at once and fades in once it has arrived, so the last one never shows in its frame; the
   shop's small copy of it stands in underneath (.lo) until Printful's own picture lies over it */
.pw-piece .pc img { position: relative; transition: opacity .25s ease; }
.pw-piece .pc img.lo { position: absolute; inset: 0; }
.pw-piece .pc img.wait { opacity: 0; transition: none; }
/* Look closer, under the print's lower left on the wall: her Originals page's mark, in the wall's ink */
.pw-piece .look { position: absolute; left: 0; top: calc(100% + 12px); display: inline-flex; align-items: center; gap: 7px; padding: 0 0 2px; background: none; border: 0; border-bottom: 1px solid rgba(91, 72, 54, 0.4); color: #5B4836; font: inherit; font-size: 13.5px; letter-spacing: .04em; white-space: nowrap; cursor: pointer; }
.pw-piece .look svg { width: 15px; height: 15px; }
.pw-bench { position: absolute; left: 50%; translate: -50% 0; transition: width .5s, height .5s; }
.pw-scale { position: absolute; left: 18px; top: 16px; margin: 1em 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .04em; color: #5B4836; }
.pw-scale i { display: block; height: 1px; background: #5B4836; position: relative; }
.pw-scale i::before, .pw-scale i::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: #5B4836; }
.pw-scale i::before { left: 0; } .pw-scale i::after { right: 0; }
.pw-info { padding: 46px 42px 30px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.pw-info .swap { display: flex; flex-direction: column; gap: 14px; }
.pw-info h3 { margin: 0; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.02; }
.pw-info .from { margin: -4px 0 0; color: var(--ink-3); font-size: 14.5px; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; border: 1px solid rgba(230, 212, 166, 0.28); align-self: flex-start; }
.seg button { height: 38px; padding: 0 20px; border-radius: 999px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 14.5px; letter-spacing: .03em; cursor: pointer; }
.seg button[aria-pressed="true"] { background: rgba(230, 212, 166, 0.14); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(230, 212, 166, .5); }
.fmt-note { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.size { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 14px 12px; border-radius: 4px; border: 1px solid rgba(230, 212, 166, 0.22); background: rgba(239, 231, 214, 0.03); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.size .d { font-size: 15.5px; font-variant-numeric: tabular-nums; }
.size .p { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.size[aria-checked="true"] { border-color: var(--wheat); background: rgba(230, 212, 166, 0.09); }
.size[aria-checked="true"] .p { color: var(--wheat); }
.pw-price { display: flex; align-items: baseline; gap: 14px; margin-top: 4px; }
.pw-price b { font-family: var(--serif); font-weight: 500; font-size: 34px; color: var(--wheat); font-variant-numeric: tabular-nums; }
.pw-price span { font-size: 14px; color: var(--ink-3); }
.pw-ship { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.pw-ship svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--camel); }
.pw-orig, .pw-full { margin: 0; font-size: 14px; color: var(--ink-3); }
.pw-orig a { color: var(--wheat); border-bottom: 1px solid rgba(230, 212, 166, .35); }
.pw-full { color: var(--wheat); }
.btn-wide { width: 100%; }
/* Sold out: the button stays, dimmed and still, as her other buttons that do nothing are */
.pw-add .btn:disabled, .pw-add .btn:disabled:hover { opacity: .5; cursor: default; box-shadow: none; }
.pw-nav { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.round { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(230, 212, 166, 0.35); background: rgba(30, 24, 20, 0.6); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.round:hover { border-color: var(--wheat); color: var(--ink); }
.round svg { width: 17px; height: 17px; }
.pw-close { position: absolute; top: 16px; right: 16px; z-index: 3; }

/* ---------- looking closer: the print's own picture, its canvas front only; a click zooms in where clicked ---------- */
.pw-zoom { position: fixed; inset: 0; z-index: 70; background: rgba(12, 9, 7, 0.96); opacity: 0; transition: opacity .3s ease; }
.pw-zoom[hidden] { display: none; }
.pw-zoom.open { opacity: 1; }
.pw-zoom .sc { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; overscroll-behavior: contain; scrollbar-width: none; }
.pw-zoom .sc::-webkit-scrollbar { display: none; }
.pw-zoom .pf { position: relative; overflow: hidden; width: min(92vw, calc(86vh * var(--a, 1))); aspect-ratio: var(--a, 1); cursor: zoom-in; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }
.pw-zoom .pf img { position: absolute; max-width: none; -webkit-user-drag: none; user-select: none; }
.pw-zoom.big .sc { place-items: start; }
/* centred while it fits the screen; once bigger, it starts at the edge so every part of it scrolls into view */
.pw-zoom.big .pf { margin: auto; cursor: zoom-out; }
.pw-zoom .x { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(30, 24, 20, 0.7); border: 1px solid rgba(230, 212, 166, 0.4); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pw-zoom .x svg { width: 20px; height: 20px; }
.pw-zoom .zc { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-2); pointer-events: none; }

@media (max-width: 860px) {
  /* the print window fills the phone: the wall on top, the choices below, Add to bag always in reach */
  .pw { padding: 0; place-items: stretch; }
  .pw-card { width: 100%; height: 100%; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); border: 0; }
  .pw-stage { min-height: 0; height: 40svh; }
  .pw-info { padding: 22px 16px calc(100px + env(safe-area-inset-bottom, 0px)); gap: 12px; }
  .pw-info h3 { font-size: 34px; }
  .pw-add { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(42, 33, 28, 0), var(--espresso) 30%); }
  .pw-nav { display: none; }
  .pw-close { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }
  .pw-piece .look { top: calc(100% + 9px); font-size: 12.5px; }
}