/* ==========================================================================
   Presetnora — storefront styles
   Order: fonts, tokens, reset, type, header, opener, catalogue, product,
   footer, WooCommerce, utilities.
   No borders around content, no shadows, no gradients. Air does the work.
   ========================================================================== */

/* --- Fonts, self-hosted -------------------------------------------------- */

@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:300 500;font-display:swap;src:url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:300 500;font-display:swap;src:url('../fonts/source-serif-4-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --- Tokens -------------------------------------------------------------- */

:root{
  /* Paper, not white. Ink, not black. */
  --paper:#f3f1ec;
  --paper-sunk:#e9e6df;
  --ink:#14130f;
  --dim:#625e55;
  --line:#dcd8cf;

  /* Single restrained accent — dark olive, chosen 2026-07-31. Used only on
     button hover, the focus ring and the active filter. */
  --accent:#4a5240;

  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gutter:clamp(18px,4.2vw,72px);
  --maxw:1720px;
  --header-h:60px;

  --gap-loose:clamp(22px,3vw,56px);
  --gap-dense:clamp(8px,1.1vw,16px);

  --step:clamp(56px,8vw,132px);   /* vertical rhythm between sections */

  /* Motion. One curve, two durations, one small distance — a catalogue of
     surfaces should look composed, not eager. Everything decelerates; nothing
     overshoots, loops or parallaxes. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-quick:.42s;
  --t-frame:.72s;
  --rise:12px;      /* how far text travels. 40px is a template, 12px is a breath */
}

@media (min-width:900px){
  :root{ --header-h:76px; }
}

/* --- Reset --------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* --- Type ---------------------------------------------------------------- */

.psn-eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  margin:0 0 14px;
}
.psn-eyebrow a:hover{color:var(--ink)}
.psn-single .psn-eyebrow a{display:inline-flex;align-items:center;min-height:44px}

.psn-wordmark{
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* WordPress emits .screen-reader-text and expects the theme to hide it; with
   the core stylesheets dequeued that job lands here. */
.psn-visually-hidden,
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.psn-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  display:inline-flex;align-items:center;min-height:44px;
  background:var(--ink);color:var(--paper);padding:12px 18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
}
.psn-skip:focus{left:0}

/* --- Header -------------------------------------------------------------- */

.psn-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}

.psn-header__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:24px;
}

.psn-header__brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  min-height:44px;
}

.psn-nav{
  flex:1 1 auto;
  display:none;
  justify-content:center;
}
.psn-nav__list{
  display:flex;
  align-items:center;
  gap:clamp(20px,3vw,52px);
}
.psn-nav__list a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:13.5px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--dim);
  transition:color .18s ease;
}
.psn-nav__list a:hover,
.psn-nav__list .current-menu-item > a{color:var(--ink)}

.psn-header__tools{
  flex:0 0 auto;
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
}

.psn-cartlink{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
  transition:color .18s ease;
}
.psn-cartlink:hover{color:var(--ink)}
.psn-cartlink__count{font-variant-numeric:tabular-nums}

.psn-burger{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  min-width:44px;
  justify-content:flex-end;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
}

@media (min-width:900px){
  .psn-nav{display:flex}
  .psn-burger{display:none}
}

/* --- Drawer (small screens) ---------------------------------------------- */

.psn-drawer{
  position:fixed;
  inset:var(--header-h) 0 0;
  z-index:99;
  background:var(--paper);
  padding:clamp(28px,7vw,56px) var(--gutter) 56px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.psn-drawer[hidden]{display:none}

.psn-drawer__list{display:flex;flex-direction:column;gap:2px}
.psn-drawer__list a{
  display:block;
  padding:12px 0;
  font-family:var(--serif);
  font-size:clamp(28px,7vw,40px);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-.01em;
}
.psn-drawer__cats{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.psn-drawer__cats ul{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
}
.psn-drawer__cats a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:15px;
  color:var(--dim);
}
.psn-drawer__cats a:hover{color:var(--ink)}

body.psn-locked{overflow:hidden}

/* --- Opener ---------------------------------------------------------------
   Rebuilt 2026-07-31. It used to be one material tiled across the whole
   viewport with nothing but the logo on top, and it never said what the site
   sells. Now the material is shown whole on the left and taken apart on the
   right, so the first screen states the product instead of decorating it.
   -------------------------------------------------------------------------- */

.psn-opener{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(26px,4vw,64px) var(--gutter) var(--step);
}

.psn-opener__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
}

.psn-opener__figure{margin:0}

.psn-opener__frame{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--paper-sunk);
}
.psn-opener__frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .35s ease;
}

.psn-opener__credit{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 18px;
  padding-top:14px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
}
.psn-opener__credit a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  transition:color .18s ease;
}
.psn-opener__credit a:hover{color:var(--ink)}
.psn-opener__spec{font-variant-numeric:tabular-nums}

.psn-opener__title{
  font-family:var(--serif);
  font-size:clamp(40px,6.4vw,84px);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.022em;
  margin:0 0 clamp(16px,1.6vw,24px);
  overflow-wrap:break-word;
}

.psn-opener__lead{
  font-size:clamp(16.5px,1.25vw,19px);
  line-height:1.6;
  color:var(--dim);
  max-width:52ch;
}

.psn-opener__cta{margin-top:clamp(26px,3vw,40px)}

/* Five small frames: enough to see that a set is five files, not five words. */
.psn-maprow{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(8px,1vw,14px);
  margin-top:clamp(26px,3vw,38px);
  max-width:520px;
}
.psn-maprow__frame{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--paper-sunk);
}
.psn-maprow__frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .35s ease;
}
.psn-maprow__label{
  display:block;
  padding-top:8px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--dim);
  line-height:1.35;
  overflow-wrap:anywhere;
}

@media (min-width:900px){
  .psn-opener__inner{
    grid-template-columns:minmax(0,46fr) minmax(0,54fr);
    gap:clamp(40px,4.5vw,84px);
  }
}

/* --- What is in every set ------------------------------------------------ */

.psn-included__head,
.psn-cats__head{
  max-width:64ch;
  margin-bottom:clamp(30px,4vw,58px);
}
.psn-included__title,
.psn-cats__title{
  font-family:var(--serif);
  font-size:clamp(30px,4.2vw,54px);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.018em;
  margin-bottom:12px;
}
.psn-included__lead,
.psn-cats__lead{
  color:var(--dim);
  max-width:56ch;
}
.psn-included__lead a{
  border-bottom:1px solid var(--line);
  transition:border-color .18s ease;
}
.psn-included__lead a:hover{border-color:var(--ink)}

.psn-maps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,2.6vw,40px) clamp(14px,1.8vw,28px);
}
.psn-maps__item{min-width:0}
.psn-maps__frame{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--paper-sunk);
  margin-bottom:14px;
}
.psn-maps__frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.psn-maps__no{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
  margin-bottom:5px;
}
.psn-maps__label{
  font-family:var(--sans);
  font-size:15.5px;
  font-weight:500;
  line-height:1.3;
  margin-bottom:6px;
}
.psn-maps__note{
  font-size:15px;
  line-height:1.55;
  color:var(--dim);
  max-width:34ch;
}

@media (min-width:620px){
  .psn-maps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1100px){
  .psn-maps{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* --- Categories ---------------------------------------------------------- */

.psn-cats__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,34px) clamp(14px,1.6vw,26px);
}
.psn-cats__item{min-width:0}
.psn-cats__frame{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--paper-sunk);
}
.psn-cats__frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.psn-cats__link:hover .psn-cats__frame img{transform:scale(1.028)}
.psn-cats__meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 14px;
  padding-top:12px;
}
.psn-cats__name{
  font-size:15px;
  line-height:1.3;
  min-width:0;
}
.psn-cats__count{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
}

@media (min-width:620px){
  .psn-cats__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:900px){
  .psn-cats__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1400px){
  .psn-cats__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* --- Sections ------------------------------------------------------------ */

.psn-section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--step) var(--gutter);
}

/* Stacked sections each paid a full step, so 132px of air met another 132px and
   the front page read as a series of empty screens. One step between sections
   is still generous; two was a hole. */
.psn-opener + .psn-section,
.psn-section + .psn-section{padding-top:0}
.psn-section--catalogue{padding-top:clamp(40px,5vw,72px)}
.psn-section--near{padding-top:clamp(48px,6vw,96px)}

/* --- Catalogue head ------------------------------------------------------ */

.psn-cathead{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 20px;
  margin-bottom:clamp(30px,4vw,58px);
}
.psn-cathead__title{
  font-family:var(--serif);
  font-size:clamp(38px,7vw,92px);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.022em;
  overflow-wrap:break-word;
}
.psn-cathead__count{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
}
/* Pull the explanatory line up under its heading. Without :has() it simply
   keeps the standard gap — a bigger space, never a broken layout. */
.psn-cathead:has(+ .psn-cathead__intro){margin-bottom:14px}
.psn-cathead__intro{
  margin-bottom:clamp(26px,3vw,44px);
  color:var(--dim);
  max-width:56ch;
}

/* --- Filter row ---------------------------------------------------------- */

.psn-filter{
  display:flex;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(26px,3.4vw,52px);
}

.psn-filter__cats{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:clamp(14px,1.8vw,30px);
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.psn-filter__cats::-webkit-scrollbar{display:none}

.psn-filter__item{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  min-width:44px;   /* short labels such as "All" still get a real tap target */
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--dim);
  transition:color .18s ease;
}
.psn-filter__item:hover{color:var(--ink)}
.psn-filter__item.is-on{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

.psn-filter__cats--404{
  border:0;
  flex-wrap:wrap;
  overflow:visible;
  margin-top:20px;
}

.psn-density{
  flex:0 0 auto;
  display:none;
  align-items:center;
  gap:10px;
}
.psn-density__label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
}
.psn-density__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:48px;
}
.psn-density__btn svg{width:15px;height:15px;fill:var(--line);transition:fill .18s ease}
.psn-density__btn:hover svg{fill:var(--dim)}
.psn-density__btn[aria-pressed="true"] svg{fill:var(--ink)}

@media (min-width:900px){
  .psn-density{display:flex}
}

/* --- Grid and card ------------------------------------------------------- */

.psn-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-loose);
}

.psn-grid[data-density="loose"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-loose)}
.psn-grid[data-density="dense"]{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap-dense)}
.psn-grid[data-density="near"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-dense)}

.psn-card__link{display:block}

/* Square everywhere, at every width. The source samples are 1024×1024, so any
   other ratio throws material away — a 3/2 frame cropped 33% of it. */
.psn-card__frame{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--paper-sunk);
}
.psn-card__frame img,
.psn-card__blank{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.psn-card__blank{background:var(--paper-sunk)}
.psn-card__link:hover .psn-card__frame img{transform:scale(1.028)}

.psn-card__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:2px 14px;
  padding-top:13px;
}
.psn-card__name{
  font-size:15px;
  font-weight:400;
  line-height:1.35;
  color:var(--ink);
  min-width:0;
}
.psn-card__price{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.psn-card__price del{color:var(--dim);margin-right:.4em}
.psn-card__price ins{text-decoration:none}

.psn-card__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 12px;
  padding-top:4px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--dim);
}
.psn-card__spec{font-variant-numeric:tabular-nums}

/* Six per row leaves no space for a second line; the frame and the price are
   what a dense grid is scanned for. */
.psn-grid[data-density="dense"] .psn-card__name{font-size:13px}
.psn-grid[data-density="dense"] .psn-card__foot{display:none}

.psn-more{margin-top:clamp(32px,4vw,60px)}
.psn-more a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-bottom:1px solid var(--line);
  transition:border-color .18s ease;
}
.psn-more a:hover{border-color:var(--ink)}

.psn-empty,.psn-catintro{color:var(--dim);max-width:62ch}
.psn-catintro{margin-bottom:clamp(26px,3vw,44px)}

/* --- Single product ------------------------------------------------------ */

.psn-single{
  display:grid;
  grid-template-columns:1fr;
  align-items:start;
}

.psn-single__frame{
  background:var(--paper-sunk);
  aspect-ratio:1;
  overflow:hidden;
  background-repeat:repeat;
  background-position:center;
}
.psn-single__frame img,
.psn-single__blank{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .3s ease;
}
.psn-single__blank{display:block;background:var(--paper-sunk)}

/* Tile mode: the same frame repeated three by three. The source is square and
   the box is square, so 33.3333% lands exactly on a 3×3 grid — if a seam
   existed, this is where it would show.

   The copy underneath is laid in at full size from the start and sits exactly
   under the image, so pressing the button fades the image out onto an identical
   surface, which then scales down into nine. The material multiplies in front
   of you instead of being swapped for a different picture. */
.psn-single__frame--tileable{
  background-image:var(--psn-tile);
  background-size:100%;
}
.psn-single__frame.is-tiled{background-size:33.3333%}
.psn-single__frame.is-tiled img{opacity:0}

.psn-single__tiletoggle{
  padding:12px var(--gutter) 0;
}
.psn-tiletoggle{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
  border-bottom:1px solid var(--line);
  transition:color .18s ease,border-color .18s ease;
}
.psn-tiletoggle:hover,
.psn-tiletoggle[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}

.psn-single__maps{
  margin-top:clamp(26px,3vw,38px);
  margin-bottom:clamp(24px,3vw,36px);
}
.psn-maprow--single{
  margin-top:0;
  max-width:none;
  gap:clamp(6px,.8vw,10px);
}
.psn-maprow--single .psn-maprow__label{font-size:11px;letter-spacing:.05em}

.psn-single__col{padding:clamp(30px,5vw,60px) var(--gutter) 0}
.psn-single__title{
  font-family:var(--serif);
  font-size:clamp(32px,4.4vw,58px);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.02em;
  margin-bottom:18px;
  overflow-wrap:break-word;
}
.psn-single__lead{
  color:var(--dim);
  font-size:16.5px;
  max-width:46ch;
}
.psn-single__lead p + p{margin-top:.8em}

.psn-specs{
  margin:clamp(28px,3.4vw,44px) 0 0;
  border-top:1px solid var(--line);
}
.psn-specs__row{
  display:grid;
  grid-template-columns:minmax(96px,26%) 1fr;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.psn-specs dt{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
  padding-top:2px;
}
.psn-specs dd{
  margin:0;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink);
  overflow-wrap:break-word;
}

.psn-buy{
  margin-top:clamp(30px,3.6vw,46px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 28px;
}
.psn-buy__price{
  font-family:var(--serif);
  font-size:clamp(24px,2.6vw,34px);
  font-weight:400;
  line-height:1;
}
.psn-buy__price del{color:var(--dim);margin-right:.4em}
.psn-buy__price ins{text-decoration:none}
.psn-buy form.cart{display:flex;align-items:center;gap:14px;margin:0}
.psn-buy .quantity{display:none}

.psn-single__body{
  margin-top:clamp(40px,5vw,64px);
  padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--line);
  max-width:56ch;
  color:var(--dim);
}
.psn-single__body p + p{margin-top:1em}

@media (min-width:900px){
  .psn-single{grid-template-columns:58fr 42fr}
  .psn-single__col{
    padding:clamp(40px,4vw,72px) var(--gutter) 0 clamp(30px,3.6vw,60px);
  }
  .psn-single__sticky{
    position:sticky;
    top:calc(var(--header-h) + 40px);
  }
}

.psn-nearhead{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 20px;
  padding-bottom:16px;
  margin-bottom:clamp(20px,2.4vw,34px);
  border-bottom:1px solid var(--line);
}
.psn-nearhead__title{
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,34px);
  font-weight:300;
  letter-spacing:-.015em;
  line-height:1.1;
}
.psn-nearhead__all{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
}
.psn-nearhead__all:hover{color:var(--ink)}

/* --- Pages --------------------------------------------------------------- */

.psn-page__head{margin-bottom:clamp(26px,3.4vw,46px)}
.psn-page__title{
  font-family:var(--serif);
  font-size:clamp(34px,5.6vw,72px);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.022em;
  overflow-wrap:break-word;
}
.psn-page__body{max-width:74ch}
.psn-page--wide .psn-page__body{max-width:none}

.psn-page__body h2,
.psn-page__body h3,
.psn-page__body h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:1.9em 0 .6em;
}
.psn-page__body h2{font-size:clamp(22px,2.4vw,30px)}
.psn-page__body h3{font-size:clamp(19px,2vw,24px)}
.psn-page__body h4{font-size:17px}
.psn-page__body p,
.psn-page__body ul,
.psn-page__body ol{margin:0 0 1.05em}
/* Prose lists only on prose pages. The cart, checkout and account screens use
   the same wrapper but are full of WooCommerce lists — payment methods, card
   marks, account tabs — which must not pick up bullets and indentation. */
.psn-page:not(.psn-page--wide) .psn-page__body ul,
.psn-page:not(.psn-page--wide) .psn-page__body ol{padding-left:1.15em;list-style:disc}
.psn-page:not(.psn-page--wide) .psn-page__body ol{list-style:decimal}
.psn-page:not(.psn-page--wide) .psn-page__body li{margin:.4em 0}
.psn-page__body a{border-bottom:1px solid var(--line)}
.psn-page__body a:hover{border-color:var(--ink)}
.psn-page__body strong{font-weight:500}

.psn-plainlist a{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  border-bottom:1px solid var(--line);
}

/* --- About: figures ------------------------------------------------------
   The page was four headings and a wall of text. Each claim now arrives as a
   number, a wide frame and one short paragraph — half the words, and the
   numbers are counted from the catalogue rather than typed in.
   ------------------------------------------------------------------------ */

/* Проза держится на 74ch ради длины строки, но спреды — не проза: зажатые в ту
   же колонку, они оставляли пустой всю правую половину экрана. Снимаем предел с
   обёртки и возвращаем его самим абзацам. Без :has() остаётся прежний узкий
   вариант — тесно, но не сломано. */
.psn-page__body:has(.psn-figures){max-width:none}
.psn-page__body:has(.psn-figures) > p,
.psn-page__body:has(.psn-figures) > h2,
.psn-page__body:has(.psn-figures) > h3,
.psn-page__body:has(.psn-figures) > h4,
.psn-page__body:has(.psn-figures) > ul,
.psn-page__body:has(.psn-figures) > ol{max-width:74ch}

.psn-figures{
  margin:clamp(40px,5vw,72px) 0 0;
  display:grid;
  gap:clamp(40px,5vw,88px);
}

/* Внутри .psn-page__body прозаическое `p{margin:0 0 1.05em}` бьёт эти правила
   по специфичности — на цифре в 108px это 113px пустоты между числом и его
   подписью. Возвращаем свои отступы явно. */
.psn-page__body .psn-figure__value{margin:0 0 6px}
.psn-page__body .psn-figure__label{margin:0 0 clamp(14px,1.6vw,22px)}
.psn-page__body .psn-figure__note{margin:0}
.psn-figure{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2.4vw,40px);
  align-items:center;
}
.psn-figure__frame{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--paper-sunk);
}
.psn-figure__frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.psn-figure__value{
  font-family:var(--serif);
  font-size:clamp(52px,8vw,108px);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  margin:0 0 6px;
}
.psn-figure__label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--dim);
  margin:0 0 clamp(14px,1.6vw,22px);
}
.psn-figure__note{
  font-size:16px;
  line-height:1.6;
  color:var(--dim);
  max-width:44ch;
  margin:0;
}

@media (min-width:900px){
  .psn-figure{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
  /* Alternate the side the frame sits on, so three spreads do not read as a
     list of three identical rows. */
  .psn-figure:nth-child(even) .psn-figure__frame{order:2}
}

/* --- FAQ: accordion ------------------------------------------------------ */

/* Прозаическая колонка в 74ch правильна для ответа, но ряд вопроса в ней
   выглядел зажатым, а правая половина экрана пустой. Разворот решает оба:
   название группы слева, вопросы справа на читаемой мере. */
.psn-page__body:has(.psn-faq){max-width:none}

.psn-faq{margin-top:clamp(26px,3vw,44px)}
.psn-faq__group{margin-bottom:clamp(34px,4vw,60px)}
.psn-faq__group > h2{
  font-family:var(--serif);
  font-size:clamp(22px,2.4vw,30px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 6px;
}

@media (min-width:900px){
  .psn-faq__group{
    display:grid;
    grid-template-columns:minmax(0,26fr) minmax(0,74fr);
    gap:clamp(30px,4vw,72px);
    align-items:start;
    margin-bottom:clamp(48px,5vw,84px);
  }
  .psn-faq__group > h2{
    margin:0;
    /* Держится, пока прокручиваются вопросы своей группы — видно, где ты. */
    position:sticky;
    top:calc(var(--header-h) + 32px);
  }
  .psn-faq__list{min-width:0}
  /* Ответ остаётся в пределах читаемой меры, даже когда колонка шире. */
  .psn-faq__group details > .psn-details__body p{max-width:70ch}
}

.psn-page__body details{
  border-top:1px solid var(--line);
}
.psn-page__body details:last-of-type{border-bottom:1px solid var(--line)}
.psn-page__body summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:56px;
  padding:14px 0;
  cursor:pointer;
  list-style:none;
  font-size:16.5px;
  line-height:1.45;
  transition:color .18s ease;
}
.psn-page__body summary::-webkit-details-marker{display:none}
.psn-page__body summary:hover{color:var(--accent)}
/* A plus that becomes a minus. Drawn in CSS so it needs no icon font. */
.psn-page__body summary::after{
  content:'';
  flex:0 0 auto;
  width:11px;
  height:11px;
  background:
    linear-gradient(var(--dim),var(--dim)) center/11px 1px no-repeat,
    linear-gradient(var(--dim),var(--dim)) center/1px 11px no-repeat;
  transition:transform .22s ease;
}
.psn-page__body details[open] summary::after{
  background:linear-gradient(var(--ink),var(--ink)) center/11px 1px no-repeat;
  transform:rotate(180deg);
}
.psn-page__body details > *:not(summary){
  margin:0 0 1.05em;
  color:var(--dim);
  max-width:68ch;
}
.psn-page__body details > *:last-child{margin-bottom:18px}

/* --- Contact ------------------------------------------------------------- */

.psn-contact__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(40px,5vw,80px);
  align-items:start;
}

.psn-contact__mail{
  font-family:var(--serif);
  font-size:clamp(26px,4.4vw,54px);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 clamp(18px,2vw,30px);
  overflow-wrap:anywhere;
}
.psn-contact__mail a{
  border-bottom:1px solid var(--line);
  transition:border-color .18s ease;
}
.psn-contact__mail a:hover{border-color:var(--ink)}

.psn-contact__lead{max-width:52ch;color:var(--dim)}
.psn-contact__lead p{margin:0 0 1.05em}
.psn-contact__lead a{border-bottom:1px solid var(--line)}

.psn-contact__facts{
  margin:clamp(28px,3vw,44px) 0 0;
  border-top:1px solid var(--line);
}
.psn-contact__row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2px 24px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.psn-contact__row dt{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
}
.psn-contact__row dd{
  margin:0;
  font-size:15.5px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.psn-contact__row dd a{border-bottom:1px solid var(--line)}
.psn-contact__row dd a:hover{border-color:var(--ink)}

.psn-contact__note{
  margin-top:clamp(20px,2.4vw,32px);
  font-size:15px;
  color:var(--dim);
  max-width:44ch;
}

/* --- Form ---------------------------------------------------------------- */

.psn-formnote{
  padding:14px 18px;
  margin-bottom:22px;
  font-size:15px;
  line-height:1.5;
  background:var(--paper-sunk);
  border-left:2px solid var(--dim);
}
.psn-formnote--ok{border-left-color:var(--accent)}
.psn-formnote--bad{border-left-color:#8c3a2c}

.psn-form__row{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0 0 20px;
}
.psn-form__row label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
}
.psn-form__row input,
.psn-form__row textarea{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:0;
  font-size:16px;   /* below 16px iOS zooms the whole page on focus */
  line-height:1.5;
  transition:border-color .18s ease;
}
.psn-form__row textarea{min-height:auto;resize:vertical}
.psn-form__row input:focus,
.psn-form__row textarea:focus{border-color:var(--ink);outline:none}
.psn-form__row input:focus-visible,
.psn-form__row textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.psn-form__trap{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.psn-form__actions{margin:26px 0 0}

@media (min-width:900px){
  .psn-contact__grid{grid-template-columns:minmax(0,52fr) minmax(0,48fr);gap:clamp(48px,5vw,110px)}
  .psn-contact__row{grid-template-columns:minmax(0,150px) minmax(0,1fr);align-items:baseline}
}

/* --- Pagination ---------------------------------------------------------- */

.pagination,
.psn-pagination{
  margin-top:clamp(40px,5vw,74px);
  padding-top:22px;
  border-top:1px solid var(--line);
}
.pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
}
.pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:0 8px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.pagination .page-numbers:hover{color:var(--ink)}
.pagination .page-numbers.current{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.pagination .page-numbers.dots{min-width:24px}

/* --- Footer -------------------------------------------------------------- */

.psn-footer{
  margin-top:var(--step);
  border-top:1px solid var(--line);
}
.psn-footer__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(46px,5.5vw,86px) var(--gutter) clamp(34px,4vw,56px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(32px,3.5vw,48px);
}
.psn-footer__brand .psn-wordmark{display:block;margin-bottom:14px}
.psn-footer__line{
  color:var(--dim);
  font-size:15px;
  max-width:34ch;
  margin-bottom:22px;
}
.psn-entity{
  font-style:normal;
  display:flex;
  flex-direction:column;
  gap:3px;
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.65;
  color:var(--dim);
}
.psn-entity__name{color:var(--ink)}
.psn-entity a:hover{color:var(--ink)}

.psn-footer__col ul{display:flex;flex-direction:column;gap:1px}
.psn-footer__col a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:14.5px;
  color:var(--dim);
  transition:color .18s ease;
}
.psn-footer__col a:hover{color:var(--ink)}

.psn-footer__bar{
  max-width:var(--maxw);
  margin:0 auto;
  padding:20px var(--gutter) 34px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px 24px;
}
.psn-copyright{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--dim);
}

/* Payment marks — fleet canon: four separate white pills, 72×32, one row. */
.psn-cards{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:8px;
  min-width:312px;
}
.psn-cards li{flex:0 0 auto}
.psn-cards img{
  width:72px;
  height:32px;
  padding:5px 7px;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:8px;
  object-fit:contain;
}

@media (min-width:700px){
  .psn-footer__inner{grid-template-columns:1.6fr 1fr 1fr 1fr}
}

/* --- WooCommerce --------------------------------------------------------- */

.psn-notices:empty{display:none}

.button,
.psn-btn,
button.button,
a.button,
.woocommerce-button,
input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 26px;
  background:var(--ink);
  color:var(--paper);
  border:0;
  border-radius:0;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.13em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .18s ease;
}
.button:hover,
.psn-btn:hover,
button.button:hover,
a.button:hover,
.woocommerce-button:hover,
input[type="submit"]:hover{background:var(--accent)}

.button.added_to_cart,
a.added_to_cart{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  background:none;
  color:var(--dim);
  padding:0;
  border-bottom:1px solid var(--line);
}
.button.added_to_cart:hover{background:none;color:var(--ink)}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice{
  list-style:none;
  margin:0 0 24px;
  padding:16px 18px;
  background:var(--paper-sunk);
  font-size:15px;
}
.woocommerce-error{color:#8c2f1c}
.woocommerce-message .button,
.woocommerce-info .button{margin-left:14px}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
textarea,
.select2-container .select2-selection--single{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:0;
  font-family:var(--sans);
  font-size:16px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0}

label{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:7px;
}
.form-row{margin-bottom:18px}
.woocommerce-form__label-for-checkbox,
label.checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-family:var(--sans);
  font-size:14.5px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
}
.woocommerce-form__label-for-checkbox input,
label.checkbox input{width:auto;min-height:0;margin-top:4px}

.woocommerce table.shop_table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:28px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  padding:14px 12px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:middle;
}
.woocommerce table.shop_table th{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--dim);
}
.woocommerce table.shop_table img{width:64px;height:auto}

.cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-account h2{
  font-family:var(--serif);
  font-size:clamp(20px,2.2vw,27px);
  font-weight:400;
  letter-spacing:-.01em;
  margin:0 0 18px;
}

.woocommerce-checkout .col2-set{display:grid;gap:clamp(28px,3vw,52px)}
@media (min-width:900px){
  .woocommerce-checkout .col2-set{grid-template-columns:1fr 1fr}
}
#order_review{margin-top:clamp(28px,3vw,44px)}

#payment ul.payment_methods{
  list-style:none;
  padding:0;
  margin:0 0 22px;
  border-bottom:1px solid var(--line);
}
#payment ul.payment_methods li{padding:14px 0;border-top:1px solid var(--line)}
#payment ul.payment_methods label{
  display:inline;
  font-family:var(--sans);
  font-size:15.5px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
}
#payment .payment_box{margin-top:10px;color:var(--dim);font-size:14.5px}

.woocommerce-MyAccount-navigation ul{
  display:flex;
  flex-wrap:wrap;
  gap:2px 22px;
  padding-bottom:14px;
  margin-bottom:clamp(24px,3vw,40px);
  border-bottom:1px solid var(--line);
}
.woocommerce-MyAccount-navigation a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--ink)}

.woocommerce-form-login,
.woocommerce-form-register{max-width:520px}

/* Merchant of record and the trust row on checkout (qa-readiness §D). */
.psn-merchant{
  margin:0 0 26px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ink);
}
.psn-merchant .psn-eyebrow{display:block;margin:0 0 4px}

.psn-trust{margin-top:22px}
.psn-trust .psn-cards{margin-bottom:12px}
.psn-trust__pci{margin:0 0 10px}
.psn-trust__pci img{width:70px;height:28px}
.psn-trust__note{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--dim);
  max-width:46ch;
}

/* --- Motion -------------------------------------------------------------- */

/* Two moves, and only two.
 *
 * 1. The material develops. The paper-coloured frame stays exactly where it is
 *    and the image appears inside it — opacity plus a clip that lifts off the
 *    bottom edge. Nothing slides across the page, so the grid never looks like
 *    it is assembling itself.
 * 2. The words follow. Twelve pixels up, a beat behind the frame. Forty pixels
 *    and a bounce is what a template does.
 *
 * The clip sits on the image, never on the observed section: clip-path on the
 * element an IntersectionObserver is watching stops it from ever intersecting.
 *
 * Hidden starting states are all behind html.js — without JavaScript the page
 * arrives finished. See the inline class in header.php.
 */

.js [data-psn-in] :is(
  .psn-opener__frame,
  .psn-card__frame,
  .psn-maps__frame,
  .psn-cats__frame,
  .psn-figure__frame,
  .psn-maprow__frame,
  .psn-single__frame
) img{
  opacity:0;
  clip-path:inset(0 0 16% 0);
  transition:opacity var(--t-frame) var(--ease),clip-path var(--t-frame) var(--ease);
}
.js [data-psn-in].is-in :is(
  .psn-opener__frame,
  .psn-card__frame,
  .psn-maps__frame,
  .psn-cats__frame,
  .psn-figure__frame,
  .psn-maprow__frame,
  .psn-single__frame
) img{
  opacity:1;
  clip-path:inset(0);
}

/* Deliberately not `transform` — hover on a catalogue card owns that property,
   and a reveal rule would out-specify it and kill the hover for good. */
.js [data-psn-in] [data-psn-rise]{
  opacity:0;
  transform:translateY(var(--rise));
  transition:opacity var(--t-quick) var(--ease),transform var(--t-quick) var(--ease);
  transition-delay:calc(var(--i,0) * 55ms);
}
.js [data-psn-in].is-in [data-psn-rise]{
  opacity:1;
  transform:none;
}

/* The hairline under the header is a response to scrolling, not decoration:
   at the top the page has no edge, once it moves the header gets one. */
.psn-header{transition:border-color .3s var(--ease)}
.js .psn-header:not(.is-scrolled){border-bottom-color:transparent}

/* FAQ. <details> snaps open by default; height is animated through a grid row
   so the answer unrolls instead of appearing. */
.js .psn-page__body details > .psn-details__body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--t-quick) var(--ease);
}
.js .psn-page__body details[open] > .psn-details__body{grid-template-rows:1fr}
/* Set by JS while the panel rolls up — see the close handler in main.js. */
.js .psn-page__body details[open].is-closing > .psn-details__body{grid-template-rows:0fr}
.js .psn-page__body details > .psn-details__body > div{
  overflow:hidden;
  min-height:0;
}

/* Tile proof: the image fades first, the copy underneath scales a beat later,
   so the eye follows one surface into nine rather than watching a swap. */
.psn-single__frame{transition:background-size var(--t-frame) var(--ease) .12s}

/* The reveal rule above pins the frame image to opacity 1, and it out-specifies
   `.psn-single__frame.is-tiled img`. Left alone, the single image stays on top
   of the 3×3 repeat and hides the very thing the button exists to show — the
   tile proof silently does nothing. This rule takes the opacity back. */
.js [data-psn-in].is-in .psn-single__frame.is-tiled img{opacity:0}

/* Page-to-page. Where the browser supports it, navigation cross-fades instead
   of blinking white. Where it does not, nothing changes. */
@view-transition{navigation:auto}
::view-transition-old(root),
::view-transition-new(root){animation-duration:.28s;animation-timing-function:var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .psn-card__link:hover .psn-card__frame img{transform:none}

  /* Reduced motion means no motion, not content that never arrives: everything
     that would have animated is simply already in its finished state. */
  .js [data-psn-in] img,
  .js [data-psn-in] [data-psn-rise]{
    opacity:1 !important;
    clip-path:none !important;
    transform:none !important;
    transition:none !important;
  }
  .js .psn-page__body details > .psn-details__body{grid-template-rows:1fr}
  @view-transition{navigation:none}
}

/* --- Small screens ------------------------------------------------------- */

@media (max-width:899px){
  .psn-grid[data-density="dense"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .psn-grid[data-density="near"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:620px){
  .psn-grid,
  .psn-grid[data-density="loose"]{grid-template-columns:minmax(0,1fr)}
  .psn-grid[data-density="dense"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .psn-footer__bar{flex-direction:column;align-items:flex-start}
  /* Five map frames in one row would be 55px wide on a phone. Two rows of
     three read; one row of five does not. */
  .psn-maprow{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
}