/* ===========================================================
   The Purple Print Shop — /team/logo-colors/
   Page-scoped stylesheet. Every class is prefixed .ps-
   Body class: .page-printshop
   =========================================================== */

.page-printshop{
  /* ---- studio palette ---- */
  --ps-cream:#f2e9d8;
  --ps-cream-2:#e9dcc4;
  --ps-cream-3:#e0d0b3;
  --ps-wood:#dfc8a0;
  --ps-wood-2:#d3b98c;
  --ps-wood-3:#c0a271;
  --ps-wood-line:#a98a58;
  --ps-purple:#4f2683;
  --ps-purple-2:#3b1c63;
  --ps-purple-3:#2a1450;
  --ps-gold:#ffc62f;
  --ps-gold-2:#e8a800;
  --ps-black:#171717;
  --ps-ink-soft:#3a3a3a;
  --ps-paper:#ffffff;
  --ps-rule:#b9a98a;          /* darker than #d2d2de */
  --ps-rule-2:#8c7c5d;
  --ps-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* ---- one-line banner swap: see /team/logo-colors/ notes ---- */
  --ps-banner:none;

  /* ---- interactive state defaults (work with JS disabled) ---- */
  --ps-sep:0.45;
  --ps-wipe:52%;
  --ps-rot:0deg;

  background:var(--ps-cream);
  color:var(--ps-black);
}

.page-printshop main{
  background:var(--ps-cream);
  background-image:
    repeating-linear-gradient(92deg,rgba(120,96,56,.045) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(2deg,rgba(120,96,56,.035) 0 1px,transparent 1px 7px);
}

/* focus ring that survives cream, wood and purple grounds alike */
.page-printshop :focus-visible{
  outline:3px solid var(--ps-gold);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--ps-black);
  border-radius:3px;
}

.page-printshop h2,
.page-printshop h3,
.page-printshop h4{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.015em;
  line-height:1.08;
  color:var(--ps-black);
}
.page-printshop p,
.page-printshop li,
.page-printshop td,
.page-printshop th{font-family:var(--body)}

.ps-sec{padding:54px 0}
.ps-sec > .wrap{padding-top:0;padding-bottom:0}
.ps-sec h2{font-size:clamp(23px,3vw,36px);margin:0 0 6px}
.ps-sec h3{font-size:clamp(16px,1.6vw,20px);margin:26px 0 8px}
.ps-sec h4{font-size:13px;letter-spacing:.11em;margin:0 0 6px}
.ps-lede{font-size:clamp(16px,1.5vw,19px);line-height:1.6;max-width:72ch}
.ps-p{margin:0 0 14px;max-width:72ch;line-height:1.65;font-size:16px}
.ps-p:last-child{margin-bottom:0}
.ps-p a{color:var(--ps-purple);text-decoration:underline;text-underline-offset:2px}
.ps-p a:hover{color:var(--ps-purple-3)}
.page-printshop .ps-kicker{
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ps-purple);margin:0 0 10px;display:block;
}
.ps-list{margin:0 0 16px;padding:0;max-width:72ch}
.ps-list li{
  position:relative;padding-left:22px;margin:0 0 7px;line-height:1.6;
}
.ps-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--ps-gold);border:1.5px solid var(--ps-black);
}
.ps-note{
  border-left:5px solid var(--ps-purple);
  background:rgba(79,38,131,.07);
  padding:14px 16px;margin:18px 0;max-width:74ch;
  font-size:14.5px;line-height:1.6;
}
.ps-note strong{font-family:var(--display);letter-spacing:.04em;text-transform:uppercase;font-size:13px}
.ps-tm{
  font-family:var(--ps-mono);font-size:12px;line-height:1.5;
  color:#4a4034;margin:10px 0 0;max-width:70ch;
}

/* ---------- breadcrumb ---------- */
.ps-crumbs{background:var(--ps-purple-2);color:#fff}
.ps-crumbs .wrap{padding-top:9px;padding-bottom:9px}
.ps-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
  font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.ps-crumbs li{display:flex;align-items:center;gap:8px;min-width:0}
.ps-crumbs li+li::before{content:"/";color:var(--ps-gold);font-weight:700}
.ps-crumbs a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ps-crumbs a:hover{color:var(--ps-gold)}
.ps-crumbs [aria-current]{color:var(--ps-gold)}

/* ===========================================================
   1. Printing-table hero
   =========================================================== */
.ps-hero{position:relative;background:var(--ps-wood-2);overflow:hidden}
.ps-hero-art{
  position:absolute;inset:0;
  background-color:var(--ps-wood-2);
}
/* When --ps-banner is set to a url(), this layer covers the built artwork. */
.ps-hero-art::after{
  content:"";position:absolute;inset:0;
  background-image:var(--ps-banner);
  background-size:cover;background-position:center;
}
.ps-hero-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ps-hero .wrap{position:relative;z-index:2;padding-top:40px;padding-bottom:40px}

.ps-sheet{
  background:var(--ps-paper);
  max-width:760px;
  padding:26px 26px 24px;
  box-shadow:0 18px 40px rgba(60,40,10,.34);
  border-top:6px solid var(--ps-purple);
  position:relative;
}
.ps-sheet::before{
  content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.13) 0 6px,transparent 6px 12px);
}
.page-printshop .ps-sheet h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,5vw,52px);line-height:1.02;letter-spacing:.005em;
  margin:8px 0 12px;color:var(--ps-black);
}
.ps-strip{
  display:inline-block;background:var(--ps-gold);color:#231800;
  font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;padding:6px 12px;
}
.ps-hero-sub{font-size:17px;line-height:1.6;margin:0 0 12px}

/* four open ink containers under the title */
.ps-pots{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px;
}
.ps-pots > *{min-width:0}
.ps-pot{
  background:var(--ps-cream);border:2px solid var(--ps-black);padding:10px;
  display:flex;flex-direction:column;gap:8px;
}
.ps-pot-svg{width:100%;height:62px;display:block}
.ps-pot-name{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ps-black);
}
.ps-pot-code{font-family:var(--ps-mono);font-size:12.5px;color:var(--ps-black);word-break:break-all}

/* ===========================================================
   2. Pull the first print
   =========================================================== */
.ps-pull{background:var(--ps-cream-2);border-top:3px solid var(--ps-wood-3);border-bottom:3px solid var(--ps-wood-3)}
.ps-pull .wrap{padding-top:36px;padding-bottom:36px}
.ps-pull-in{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.ps-pull-in > *{min-width:0}
.ps-pull-txt{flex:1 1 320px}
.ps-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  background:var(--ps-purple);color:#fff;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;padding:14px 26px;min-height:52px;border:3px solid var(--ps-black);
  box-shadow:5px 5px 0 var(--ps-black);text-decoration:none;
  transition:transform 160ms,box-shadow 160ms,background 160ms;
}
.ps-btn:hover{background:#5e2f9c;transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ps-black)}
.ps-btn-svg{width:20px;height:20px;flex:none}

/* the frame sweep overlay (JS adds .is-on, runs once) */
.ps-sweep{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  display:none;overflow:hidden;
}
.ps-sweep.is-on{display:block}
.ps-sweep-frame{
  position:absolute;top:0;bottom:0;left:0;width:46vw;min-width:320px;
  transform:translateX(-120%);
  animation:ps-sweep-move 2000ms cubic-bezier(.5,0,.3,1) 1 forwards;
}
.ps-sweep-svg{width:100%;height:100%;display:block}
@keyframes ps-sweep-move{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(230%)}
}

/* ===========================================================
   3. Colour mixing station — ink pools
   =========================================================== */
.ps-mix{background:var(--ps-cream)}
.ps-inkrow{
  display:grid;gap:16px;margin:22px 0 0;
  grid-template-columns:minmax(0,1fr) minmax(0,180px) minmax(0,1fr);
  align-items:stretch;
}
.ps-inkrow > *{min-width:0}
.ps-inkrow > .ps-pool-a{grid-column:1}
.ps-inkrow > .ps-fabric{grid-column:2}
.ps-inkrow > .ps-pool-b{grid-column:3}
.ps-inkrow-2{
  display:grid;gap:16px;margin:16px 0 0;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.ps-inkrow-2 > *{min-width:0}

.ps-pool{
  background:var(--ps-paper);border:2px solid var(--ps-black);
  box-shadow:6px 6px 0 rgba(23,23,23,.16);
  display:flex;flex-direction:column;min-width:0;
}
.ps-pool-top{position:relative;padding:14px 14px 0}
.ps-pool-svg{width:100%;height:120px;display:block}
.ps-pool-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.page-printshop .ps-pool-name{
  font-family:var(--display);font-weight:700;font-size:clamp(15px,1.7vw,19px);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ps-black);margin:0;
}
.ps-pool-role{font-size:13.5px;line-height:1.5;color:#40372c;margin:0}

.ps-codes{display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.ps-code-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--ps-rule);padding-top:8px;
}
.ps-code-row > *{min-width:0}
.ps-code-lab{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#4a4034;width:60px;flex:none;
}
.ps-code-val{
  font-family:var(--ps-mono);font-size:14px;color:var(--ps-black);
  background:var(--ps-cream);padding:4px 8px;border:1px solid var(--ps-rule);
  flex:1 1 auto;word-break:break-word;
}
.ps-copy{
  min-width:44px;min-height:44px;padding:0 12px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--ps-purple);color:#fff;border:2px solid var(--ps-black);
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;transition:background 160ms;
}
.ps-copy:hover{background:#5e2f9c}
.ps-copy-svg{width:15px;height:15px;flex:none}
.ps-copy .ps-copy-idle,
.ps-copy .ps-copy-ok,
.ps-copy .ps-copy-bad{display:inline-flex;align-items:center;gap:7px}
.ps-copy .ps-copy-ok,
.ps-copy .ps-copy-bad{display:none}
.ps-copy.is-done{background:#1d6a3a}
.ps-copy.is-done .ps-copy-idle{display:none}
.ps-copy.is-done .ps-copy-ok{display:inline-flex}
.ps-copy.is-fail{background:#8c2116}
.ps-copy.is-fail .ps-copy-idle{display:none}
.ps-copy.is-fail .ps-copy-bad{display:inline-flex}
.ps-copy-txt{white-space:nowrap}

/* fabric sample that appears between purple and gold */
.ps-fabric{
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  border:2px dashed var(--ps-wood-line);padding:12px;background:rgba(255,255,255,.5);
  text-align:center;
}
.ps-fabric[hidden]{display:none}
.ps-fabric-svg{width:100%;height:110px;display:block}
.ps-fabric-cap{font-size:12.5px;line-height:1.45;color:#40372c;margin:0}
.ps-inkhint{margin:14px 0 0;font-size:13.5px;color:#40372c}

.ps-select{
  align-self:flex-start;min-height:44px;padding:0 14px;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ps-cream);color:var(--ps-black);border:2px solid var(--ps-black);
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.ps-select[aria-pressed="true"]{background:var(--ps-gold)}
.ps-select-dot{width:12px;height:12px;border:2px solid var(--ps-black);background:transparent;flex:none}
.ps-select[aria-pressed="true"] .ps-select-dot{background:var(--ps-purple)}

/* ---------- plain data tables ---------- */
.ps-tablewrap{overflow-x:auto;margin:22px 0;border:2px solid var(--ps-rule-2);background:var(--ps-paper)}
.ps-table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
.ps-table caption{
  text-align:left;padding:11px 13px;background:var(--ps-purple);color:#fff;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.ps-table th,.ps-table td{border:1px solid var(--ps-rule);padding:9px 12px;text-align:left;vertical-align:top}
.ps-table thead th{background:var(--ps-cream-3);font-family:var(--display);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase}
.ps-table tbody tr.ps-tr-alt td{background:var(--ps-cream)}
.ps-table .ps-mono{font-family:var(--ps-mono);font-size:13.5px;white-space:nowrap}
.ps-chip{display:inline-block;width:15px;height:15px;border:1.5px solid var(--ps-black);
  vertical-align:-2px;margin-right:7px}

/* ===========================================================
   4. Four printing layers (schematic screens)
   =========================================================== */
.ps-layers{background:var(--ps-wood);border-top:3px solid var(--ps-wood-line);border-bottom:3px solid var(--ps-wood-line)}
.ps-lay-grid{display:grid;gap:26px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;margin-top:22px}
.ps-lay-grid > *{min-width:0}
.ps-stage{
  position:relative;background:var(--ps-cream);border:3px solid var(--ps-black);
  padding:18px;box-shadow:8px 8px 0 rgba(23,23,23,.22);
}
.ps-screens{position:relative;height:330px}
.ps-screen{
  position:absolute;left:50%;top:50%;width:230px;height:230px;
  margin:-115px 0 0 -115px;
  transition:transform 320ms ease,opacity 320ms ease;
}
.ps-screen-svg{width:100%;height:100%;display:block}
.ps-screen-1{transform:translate(calc(var(--ps-sep) * -78px),calc(var(--ps-sep) * -62px)) rotate(calc(var(--ps-sep) * -4deg))}
.ps-screen-2{transform:translate(calc(var(--ps-sep) * -26px),calc(var(--ps-sep) * -21px)) rotate(calc(var(--ps-sep) * -1.5deg))}
.ps-screen-3{transform:translate(calc(var(--ps-sep) * 26px),calc(var(--ps-sep) * 21px)) rotate(calc(var(--ps-sep) * 1.5deg))}
.ps-screen-4{transform:translate(calc(var(--ps-sep) * 78px),calc(var(--ps-sep) * 62px)) rotate(calc(var(--ps-sep) * 4deg))}

.ps-slider{margin-top:16px;display:flex;flex-direction:column;gap:7px}
.ps-slider label{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ps-black);
}
.ps-range{
  width:100%;min-height:44px;accent-color:var(--ps-purple);background:transparent;
}
.ps-slider-help{font-size:13px;color:#40372c;margin:0}

.ps-finished{
  background:var(--ps-paper);border:3px solid var(--ps-black);padding:18px;
  box-shadow:8px 8px 0 rgba(23,23,23,.22);
}
.ps-markbox{display:flex;align-items:center;justify-content:center;padding:12px 0}
.ps-mark{width:auto;height:210px;display:block}
.ps-mark-sm{height:96px}
.ps-cap{font-size:13px;line-height:1.55;color:#3d342a;margin:8px 0 0}

.ps-laylist{margin:22px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ps-laylist > *{min-width:0}
.ps-layitem{background:var(--ps-cream);border:2px solid var(--ps-black);padding:12px 13px}
.ps-layitem h4{margin:0 0 6px;font-size:13px;letter-spacing:.11em;display:flex;align-items:center;gap:9px}
.ps-swatch{width:16px;height:16px;border:1.5px solid var(--ps-black);flex:none}
.ps-layitem p{margin:0;font-size:14px;line-height:1.55}

/* ===========================================================
   5. Illustrator's desk (1961)
   =========================================================== */
.ps-desk{background:var(--ps-cream)}
.ps-deskwrap{
  margin-top:22px;background:var(--ps-wood);border:3px solid var(--ps-wood-line);
  padding:20px;position:relative;
  background-image:repeating-linear-gradient(87deg,rgba(120,90,45,.09) 0 2px,transparent 2px 11px);
}
.ps-desk-grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
.ps-desk-grid > *{min-width:0}
.ps-board{
  background:var(--ps-paper);border:2px solid var(--ps-black);
  transform:rotate(-1.4deg);box-shadow:8px 10px 22px rgba(70,45,10,.3);
  padding:14px;
}
.ps-board-svg{width:100%;height:280px;display:block}
.ps-board-lab{
  font-family:var(--ps-mono);font-size:11.5px;line-height:1.5;color:#4a4034;
  margin:10px 0 0;border-top:1px solid var(--ps-rule);padding-top:8px;
}
.ps-tools{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.ps-tools > *{min-width:0}
.ps-tool-svg{width:88px;height:56px;display:block}
.ps-notes{display:flex;flex-direction:column;gap:14px}
.ps-pin{
  background:var(--ps-cream);border:1px solid var(--ps-rule-2);padding:14px 15px 14px 18px;
  box-shadow:4px 5px 12px rgba(70,45,10,.22);position:relative;
}
.ps-pin::before{
  content:"";position:absolute;left:-7px;top:16px;width:14px;height:14px;border-radius:50%;
  background:var(--ps-purple);border:2px solid var(--ps-black);
}
.ps-pin:nth-of-type(even){transform:rotate(.7deg)}
.ps-pin:nth-of-type(odd){transform:rotate(-.5deg)}
.ps-pin h3{margin:0 0 7px;font-size:13px;letter-spacing:.11em}
.ps-pin p{margin:0 0 10px;font-size:14.5px;line-height:1.6}
.ps-pin p:last-child{margin-bottom:0}
.ps-card{
  background:var(--ps-paper);border:1px solid var(--ps-rule-2);padding:14px 15px;
  font-family:var(--ps-mono);font-size:13px;line-height:1.6;color:var(--ps-black);
  box-shadow:4px 5px 12px rgba(70,45,10,.22);
}
.ps-card b{font-family:var(--ps-mono)}

/* ===========================================================
   6. Light table
   =========================================================== */
.ps-light{background:var(--ps-cream-2)}
.ps-lt{
  margin-top:22px;background:var(--ps-wood-2);border:3px solid var(--ps-wood-line);padding:18px;
}
.ps-lt-stage{
  position:relative;background:#fffdf5;border:3px solid var(--ps-black);
  box-shadow:inset 0 0 60px rgba(255,220,140,.75);
  padding:24px;overflow:hidden;
}
.ps-lt-inner{position:relative;height:400px;max-width:760px;margin:0 auto}
.ps-lt-markbox{
  position:absolute;left:70%;top:50%;transform:translate(-50%,-50%);
  width:180px;text-align:center;z-index:1;
}
.ps-lt-mark{width:100%;height:auto;display:block}
.ps-lt-pins{position:absolute;inset:0;z-index:2}
.ps-pinmark{
  position:absolute;width:30px;height:30px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--ps-purple);color:#fff;border:2px solid var(--ps-black);
  font-family:var(--display);font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(255,255,255,.85);
}
.ps-lt-bar{
  position:absolute;top:0;bottom:0;left:var(--ps-wipe);width:4px;
  background:var(--ps-black);z-index:4;pointer-events:none;
  transition:left 220ms ease;
}
.ps-lt-bar::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:26px;height:56px;background:var(--ps-gold);
  border:3px solid var(--ps-black);border-radius:5px;
}
.ps-lt-sheet{
  position:absolute;inset:0;z-index:3;background:rgba(79,38,131,.95);color:#fff;
  padding:20px;overflow:auto;
  clip-path:inset(0 calc(100% - var(--ps-wipe)) 0 0);
  transition:clip-path 220ms ease;
}
.ps-lt-sheet-in{width:min(320px,max(150px,calc(var(--ps-wipe) - 44px)));min-width:0}
.ps-lt-sheet h3{color:#fff;font-size:13px;letter-spacing:.12em;margin:0 0 10px}
.ps-lt-sheet ul{margin:0;padding:0}
.ps-lt-sheet li{
  font-size:13.5px;line-height:1.55;margin:0 0 9px;padding-left:18px;position:relative;color:#fff;
}
.ps-lt-sheet li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:var(--ps-gold)}
.ps-lt-sheet p{color:#fff;font-size:12.5px;line-height:1.55;margin:12px 0 0;
  border-top:1px solid rgba(255,255,255,.4);padding-top:10px}
.ps-lt-controls{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.ps-lt-controls label{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;
}
.ps-changes{margin:26px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ps-changes > *{min-width:0}
.ps-change{background:var(--ps-paper);border:2px solid var(--ps-black);padding:14px}
.ps-change h4{margin:0 0 7px;font-size:14px;letter-spacing:.08em;display:flex;gap:9px;align-items:baseline}
.ps-change-n{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:24px;height:24px;border-radius:50%;background:var(--ps-purple);color:#fff;
  font-size:13px;
}
.ps-change p{margin:0;font-size:14.5px;line-height:1.6}

/* ===========================================================
   7. Helmet stencil station
   =========================================================== */
.ps-stencil{background:var(--ps-purple);color:#fff}
.ps-stencil h2,.ps-stencil h3{color:#fff}
.ps-stencil .ps-p,.ps-stencil .ps-lede,.ps-stencil .ps-list li{color:#fff}
.ps-stencil .ps-kicker{color:var(--ps-gold)}
.ps-stencil .ps-list li::before{border-color:#fff}
.ps-stencil .ps-tm{color:rgba(255,255,255,.82)}
.ps-sten-grid{display:grid;gap:26px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;margin-top:22px}
.ps-sten-grid > *{min-width:0}
.ps-sten-stage{background:var(--ps-purple-3);border:3px solid var(--ps-gold);padding:18px}
.ps-sten-svg{width:100%;height:300px;display:block}
.ps-sten-rot{transform:rotateY(var(--ps-rot));transition:transform 300ms ease;transform-origin:50% 50%}
.ps-rotrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}
.ps-rotrow > *{min-width:0}
.ps-rotbtn{
  min-height:44px;min-width:44px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ps-gold);color:#231800;border:2px solid var(--ps-black);
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
}
.ps-rotbtn[aria-pressed="true"]{background:#fff}
.ps-rot-state{font-family:var(--ps-mono);font-size:12.5px;color:#fff}
.ps-sten-note{
  background:rgba(0,0,0,.28);border-left:5px solid var(--ps-gold);padding:12px 14px;
  font-size:13.5px;line-height:1.6;margin-top:14px;color:#fff;
}

/* ===========================================================
   8. Uniform fabric rack
   =========================================================== */
.ps-rack{background:var(--ps-cream)}
.ps-rackbar{
  height:16px;background:linear-gradient(180deg,var(--ps-wood-2),var(--ps-wood-3));
  border:2px solid var(--ps-wood-line);margin-top:24px;
}
.ps-rolls{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:-2px}
.ps-rolls > *{min-width:0}
.ps-roll{
  border:2px solid var(--ps-black);border-top:0;background:var(--ps-paper);
}
.ps-roll > summary{
  list-style:none;cursor:pointer;display:block;padding:14px 15px;min-height:44px;
  background:var(--ps-purple);color:#fff;position:relative;
}
.ps-roll > summary::-webkit-details-marker{display:none}
.ps-roll > summary h3{color:#fff;font-size:14px;letter-spacing:.08em;margin:0 0 4px;padding-right:34px}
.ps-roll-per{font-family:var(--ps-mono);font-size:12.5px;color:var(--ps-gold)}
.ps-roll-pull{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border:2px solid var(--ps-gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.ps-roll-pull::before{content:"";width:9px;height:2px;background:var(--ps-gold)}
.ps-roll-pull::after{content:"";position:absolute;width:2px;height:9px;background:var(--ps-gold);
  transition:transform 200ms}
.ps-roll[open] .ps-roll-pull::after{transform:scaleY(0)}
.ps-roll-body{padding:14px 15px}
.ps-roll-tex{height:60px;border:1px solid var(--ps-rule);margin-bottom:12px}
.ps-tex-1{background:
  repeating-linear-gradient(45deg,#5a2d94 0 4px,#4f2683 4px 8px),
  #4f2683}
.ps-tex-2{background:
  linear-gradient(115deg,#4f2683 0 46%,#ffc62f 46% 52%,#4f2683 52% 100%),
  #4f2683}
.ps-tex-3{background:#4f2683}
.ps-roll-body p{margin:0 0 12px;font-size:14.5px;line-height:1.6}
.ps-roll-body p:last-child{margin-bottom:0}
.ps-diag-svg{width:100%;height:150px;display:block;margin:4px 0 12px}

/* ===========================================================
   9. Identity test wall
   =========================================================== */
.ps-wall{background:var(--ps-cream-2)}
.ps-posters{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:24px}
.ps-posters > *{min-width:0}
.ps-poster{
  background:var(--ps-paper);border:2px solid var(--ps-black);padding:14px;
  box-shadow:6px 6px 0 rgba(23,23,23,.18);display:flex;flex-direction:column;gap:10px;
}
.ps-poster-stage{
  background:var(--ps-purple);display:flex;align-items:center;justify-content:center;
  min-height:170px;padding:14px;
}
.ps-poster-stage.ps-onwhite{background:var(--ps-paper);border:1px solid var(--ps-rule)}
.ps-poster h3{margin:0;font-size:13px;letter-spacing:.11em}
.ps-poster p{margin:0;font-size:13.5px;line-height:1.55}
.ps-size{font-family:var(--ps-mono);font-size:12px;color:#4a4034}
.ps-icon-tile{
  width:64px;height:64px;border-radius:14px;background:var(--ps-purple);
  border:2px solid var(--ps-black);display:flex;align-items:center;justify-content:center;
}
.ps-icon-tile img{height:44px;width:auto}
.ps-tag-lab{
  background:var(--ps-paper);border:1px solid var(--ps-rule-2);padding:8px 10px;
  display:flex;align-items:center;gap:9px;
}
.ps-tag-lab img{height:34px;width:auto}
.ps-tag-txt{font-family:var(--ps-mono);font-size:10.5px;line-height:1.35;color:var(--ps-black)}
.ps-horn-svg{width:120px;height:120px;display:block}
.ps-signmark{height:132px;width:auto}

/* ===========================================================
   10. Correct / incorrect drying rack
   =========================================================== */
.ps-tray{background:var(--ps-cream)}
.ps-trayhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
.ps-trayhead > *{min-width:0}
.ps-badge{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;padding:6px 11px;border:2px solid var(--ps-black);
}
.ps-badge-ok{background:#1d6a3a;color:#fff}
.ps-badge-no{background:#8c2116;color:#fff}
.ps-prints{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:16px}
.ps-prints > *{min-width:0}
.ps-print{
  background:var(--ps-paper);border:2px solid var(--ps-black);
  display:flex;flex-direction:column;position:relative;padding-top:16px;
}
.ps-print::before{
  content:"";position:absolute;top:-9px;left:50%;margin-left:-11px;width:22px;height:16px;
  background:var(--ps-wood-3);border:2px solid var(--ps-black);
}
.ps-print-stage{
  min-height:150px;display:flex;align-items:center;justify-content:center;padding:12px;margin:0 12px;
}
.ps-print-stage img{height:110px;width:auto}
.ps-print-purple{background:var(--ps-purple)}
.ps-print-white{background:var(--ps-paper);border:1px solid var(--ps-rule)}
.ps-print-black{background:var(--ps-black)}
.ps-print-busy{
  background:
    radial-gradient(circle at 20% 30%,#7a5b2e 0 18%,transparent 18%),
    radial-gradient(circle at 70% 65%,#2f5d3a 0 22%,transparent 22%),
    repeating-linear-gradient(38deg,#6a6a55 0 9px,#8f8f74 9px 18px);
}
.ps-print-cap{padding:11px 13px 13px;border-top:2px solid var(--ps-black)}
.ps-print-cap h3{margin:0 0 5px;font-size:12.5px;letter-spacing:.1em}
.ps-print-cap p{margin:0;font-size:13px;line-height:1.5}
.ps-demo-svg{width:110px;height:110px;display:block}
.ps-demo-wide{width:170px;height:96px}
.ps-demo-flip{transform:scaleX(-1)}
.ps-stand-note{
  font-family:var(--ps-mono);font-size:10.5px;letter-spacing:.02em;color:#4a4034;
  display:block;margin-top:5px;
}
.ps-print-bad .ps-print-cap{background:#f7e7e4}
.ps-print-good .ps-print-cap{background:#e6f2ea}

/* ===========================================================
   11. Rights and permissions drawer
   =========================================================== */
.ps-rights{background:var(--ps-cream-2)}
.ps-drawer{
  margin-top:22px;border:3px solid var(--ps-black);
  background:linear-gradient(180deg,#cfd2d8,#b8bcc4);
  box-shadow:8px 8px 0 rgba(23,23,23,.22);
}
.ps-drawer > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:16px 18px;min-height:56px;border-bottom:3px solid var(--ps-black);
  background:linear-gradient(180deg,#dfe2e7,#c3c7ce);
}
.ps-drawer > summary::-webkit-details-marker{display:none}
.ps-drawer-h{
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ps-black);
}
.ps-drawer-grip{
  width:64px;height:14px;background:#8d929b;border:2px solid var(--ps-black);border-radius:7px;flex:none;
}
.ps-drawer-state{
  margin-left:auto;font-family:var(--ps-mono);font-size:11.5px;color:#2a2d33;flex:none;
}
.ps-drawer-body{background:var(--ps-paper);padding:18px}
.ps-nope{
  border:3px solid #8c2116;background:#f7e7e4;padding:14px 16px;margin:18px 0 0;
}
.ps-nope h3{margin:0 0 7px;font-size:13px;letter-spacing:.11em;color:#7a1c13}
.ps-nope p{margin:0 0 10px;font-size:14.5px;line-height:1.6}
.ps-nope p:last-child{margin-bottom:0}
.ps-offsite{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.ps-offsite > *{min-width:0}
.ps-offsite a{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px;
  background:var(--ps-purple);color:#fff;border:2px solid var(--ps-black);
  font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
}
.ps-offsite a:hover{background:#5e2f9c}
.ps-offsite svg{width:15px;height:15px;flex:none}

/* ===========================================================
   12. FAQ drying line
   =========================================================== */
.ps-faq{background:var(--ps-cream)}
.ps-line{
  height:3px;background:var(--ps-wood-line);margin:26px 0 0;
  box-shadow:0 1px 0 rgba(255,255,255,.5);
}
.ps-clips{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:0}
.ps-clips > *{min-width:0}
.ps-clip{
  position:relative;margin-top:14px;border:2px solid var(--ps-black);
  box-shadow:5px 6px 0 rgba(23,23,23,.16);
}
.ps-clip::before{
  content:"";position:absolute;top:-19px;left:26px;width:16px;height:26px;
  background:var(--ps-wood-2);border:2px solid var(--ps-black);border-radius:3px;
}
.ps-clip > summary{
  list-style:none;cursor:pointer;display:flex;gap:12px;align-items:flex-start;
  padding:15px 16px;min-height:44px;
}
.ps-clip > summary::-webkit-details-marker{display:none}
.ps-clip h3{font-size:14px;letter-spacing:.04em;margin:0;line-height:1.3}
.ps-clip-mark{
  flex:none;width:26px;height:26px;border:2px solid var(--ps-black);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:16px;background:var(--ps-gold);color:#231800;
}
.ps-clip[open] .ps-clip-mark{background:var(--ps-purple);color:#fff}
.ps-clip-body{padding:0 16px 16px;font-size:15px;line-height:1.65}
.ps-clip-body p{margin:0}
.ps-paper-cream{background:var(--ps-cream)}
.ps-paper-gold{background:#fbeec2}
.ps-paper-purple{background:#efe6fa}
.ps-paper-white{background:var(--ps-paper)}

/* ===========================================================
   more reading
   =========================================================== */
.ps-more{background:var(--ps-purple-2);color:#fff}
.ps-more h2{color:#fff}
.ps-more .ps-p{color:#fff}
.ps-morelinks{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:20px}
.ps-morelinks > *{min-width:0}
.ps-morelinks a{
  display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 14px;
  background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.35);color:#fff;
  font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  transition:background 160ms,border-color 160ms;
}
.ps-morelinks a:hover{background:rgba(255,255,255,.18);border-color:var(--ps-gold)}
.ps-morelinks svg{width:15px;height:15px;flex:none;color:var(--ps-gold)}

/* live region for copy feedback */
.ps-sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ===========================================================
   responsive
   =========================================================== */
@media (max-width:1000px){
  .ps-inkrow > .ps-pool-a,
  .ps-inkrow > .ps-fabric,
  .ps-inkrow > .ps-pool-b{grid-column:1}
  .ps-lay-grid{grid-template-columns:minmax(0,1fr)}
  .ps-desk-grid{grid-template-columns:minmax(0,1fr)}
  .ps-sten-grid{grid-template-columns:minmax(0,1fr)}
  .ps-inkrow{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ps-sec{padding:38px 0}
  .ps-pots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ps-laylist{grid-template-columns:minmax(0,1fr)}
  .ps-inkrow-2{grid-template-columns:minmax(0,1fr)}
  .ps-lt-inner{height:440px}
  .ps-screens{height:280px}
  .ps-screen{width:180px;height:180px;margin:-90px 0 0 -90px}
  .ps-clips{grid-template-columns:minmax(0,1fr)}
  .ps-board{transform:none}
  .ps-pin:nth-of-type(even),.ps-pin:nth-of-type(odd){transform:none}
}
@media (max-width:520px){
  .ps-pots{grid-template-columns:minmax(0,1fr)}
  .ps-pot{display:grid;grid-template-columns:82px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center}
  .ps-pot-svg{grid-row:1 / span 2;width:82px;height:52px}
  .ps-sheet{padding:18px 16px 16px}
  .ps-drawer > summary{flex-wrap:wrap;gap:10px}
  .ps-drawer-state{margin-left:0}
  .ps-code-lab{width:auto}
  .ps-code-val{flex:1 1 100%;order:2}
  .ps-copy{order:3}
  .ps-lt-inner{height:470px}
  .ps-mark{height:160px}
}

/* ===========================================================
   reduced motion
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  .page-printshop *,
  .page-printshop *::before,
  .page-printshop *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .ps-sweep,.ps-sweep.is-on{display:none!important}
  .ps-sweep-frame{animation:none!important}
  .ps-screen{transition:none!important}
  .ps-lt-sheet{transition:none!important}
  .ps-sten-rot{transition:none!important}
  .ps-btn:hover{transform:none}
}