/* A poster catalog, circa 2002: navy masthead, gold rule, burgundy box heads, Verdana, underlined blue links. */
:root {
  --navy: #1b2440; --navy2: #2a375e; --burg: #6b1a1a; --burg2: #8a2a24; --gold: #b8963e; --gold2: #e2cf96;
  --paper: #fbf9f3; --cream: #f1ede2; --rule: #d6cfbd; --text: #222; --muted: #666;
  --link: #1a3c8c; --visited: #5b2a86;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ddd8ca; color: var(--text); font: 12px/1.5 Verdana, Geneva, Tahoma, sans-serif; }
a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: var(--burg2); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pipe { color: #9a9a9a; margin: 0 .55em; }

.page { max-width: 1180px; margin: 0 auto; background: #fff; border-left: 1px solid #c4bda9; border-right: 1px solid #c4bda9; min-height: 100vh; display: flex; flex-direction: column; }

/* masthead */
.mast { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px 14px; background: linear-gradient(#24305a, var(--navy)); border-bottom: 3px solid var(--gold); }
.mast .name, .mast .name:visited { font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; font-weight: 600; font-size: 21px; letter-spacing: .22em; text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap; }
.mast .top { font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.mast .top a, .mast .top a:visited { color: var(--gold2); text-decoration: none; }
.mast .top a:hover { color: #fff; text-decoration: underline; }
.mast .pipe { color: #6c7699; }

.crumbs { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 22px; background: var(--cream); border-bottom: 1px solid var(--rule); font-size: 11px; min-height: 29px; }
.crumbs .sep { margin: 0 .5em; color: #999; }
.crumbs .pn { white-space: nowrap; }

.body { flex: 1; display: flex; gap: 24px; padding: 18px 22px 28px; align-items: flex-start; }
.side { flex: 0 0 168px; position: sticky; top: 12px; }
main { flex: 1; min-width: 0; outline: none; }
main:focus, main:focus-visible { outline: none; }   /* main takes focus after each page change; no ring round the whole page */

.box { border: 1px solid #cfc7b1; background: var(--paper); margin-bottom: 14px; }
.boxhead { margin: 0; padding: 4px 9px; background: linear-gradient(var(--burg2), var(--burg)); color: #fff; font: bold 11px/1.5 Verdana, Geneva, sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.words { list-style: none; margin: 0; padding: 7px 9px 9px; font-size: 11px; line-height: 1.75; }
.words li::before { content: '\203a'; color: var(--burg); font-weight: bold; margin-right: 6px; }
.words a { text-decoration: none; letter-spacing: .04em; }
.words a:hover { text-decoration: underline; }
.words a.on { color: var(--burg); font-weight: bold; }

.pagehead { margin: 0 0 14px; padding-bottom: 5px; border-bottom: 2px solid var(--gold); font: bold 17px Georgia, 'Times New Roman', serif; color: var(--navy); }

.jump { display: none; }

/* the catalog grid */
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 22px; }
.item { min-width: 0; }
.itemlink { display: block; text-decoration: none; }
.itemlink .piece { box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 7px 16px rgba(0, 0, 0, .2); transition: box-shadow .15s, transform .15s; }
.itemlink:hover .piece, .itemlink:focus-visible .piece { box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 22px rgba(0, 0, 0, .28); transform: translateY(-2px); }
.cap { margin-top: 8px; text-align: center; font-size: 11px; line-height: 1.35; }

/* ---------------- a poster: thick black border, the picture whole, a keyline, ONE WORD, one line ---------------- */
.piece { position: relative; width: 100%; aspect-ratio: 4 / 5; container-type: inline-size; background: #050505; }
.piece.framed { aspect-ratio: 1000 / 1233; background: #0b0b0b; }
.poster { position: absolute; inset: 0; background: #050505; container-type: inline-size; display: flex; flex-direction: column; align-items: center; }
.framed .poster { inset: 3.4cqw; box-shadow: 0 0 0 .4cqw #1d1d1d, inset 0 0 1.4cqw rgba(0, 0, 0, .9); }
.photo { margin-top: 10cqw; width: 88cqw; display: flex; justify-content: center; }
.photo img { display: block; width: auto; height: auto; max-width: 88cqw; max-height: 58cqw; outline: max(1px, .3cqw) solid rgba(236, 231, 220, .82); outline-offset: max(1.5px, 1.15cqw); opacity: 0; transition: opacity .5s ease; background: #111; }
.photo img.in { opacity: 1; }
html:not(.ff) .type { opacity: 0; }
.type { transition: opacity .3s; }
.type { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4cqw 6cqw 12cqw; }
.word { font-family: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif; font-weight: 400; font-size: calc(var(--fs, 9) * 1cqw); letter-spacing: .2em; padding-left: .2em; line-height: 1.05; color: #f3efe4; white-space: nowrap; }
.line { margin-top: 3cqw; max-width: 84cqw; font-family: 'EB Garamond', Garamond, Georgia, serif; font-size: 4.6cqw; line-height: 1.3; color: #d8d2c4; text-align: center; text-wrap: balance; }

.moulding { position: absolute; inset: 0; background: linear-gradient(155deg, #3b3b3b 0%, #171717 26%, #0c0c0c 64%, #262626 100%); box-shadow: inset 0 0 0 .22cqw #000, inset .45cqw .45cqw .5cqw rgba(255, 255, 255, .13), inset -.45cqw -.45cqw .5cqw rgba(0, 0, 0, .65); }
.cherry { background: #3a140c; }
.cherry .moulding { background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 1.1cqw, rgba(0, 0, 0, .07) 1.1cqw 1.5cqw, rgba(255, 220, 190, .04) 1.5cqw 2.3cqw), linear-gradient(155deg, #8a3d29 0%, #5a2316 28%, #3f170d 64%, #6a2c1a 100%); box-shadow: inset 0 0 0 .22cqw #240b05, inset .5cqw .5cqw .55cqw rgba(255, 210, 170, .22), inset -.5cqw -.5cqw .55cqw rgba(0, 0, 0, .55); }
.cherry .poster { box-shadow: 0 0 0 .5cqw #b39045, 0 0 0 .7cqw #4a1b0f, inset 0 0 1.4cqw rgba(0, 0, 0, .9); }
.glass { position: absolute; inset: 3.4cqw; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(var(--ga, 118deg), rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, .085) 40%, rgba(255, 255, 255, .025) 50%, rgba(255, 255, 255, 0) 62%); }
.haze { position: absolute; inset: 0; background: var(--haze, #cfc6b4); opacity: .075; mix-blend-mode: screen; pointer-events: none; }
.hang .poster { filter: blur(.25px) contrast(.97); }
.light { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; pointer-events: none; }
.tape { position: absolute; width: 13cqw; height: 4.4cqw; background: linear-gradient(rgba(255, 253, 242, .6), rgba(236, 232, 214, .48)); box-shadow: 0 0 .25cqw rgba(0, 0, 0, .18); pointer-events: none; }
.tape.tl { left: -3.5cqw; top: 1.2cqw; transform: rotate(-40deg); }
.tape.tr { right: -3.5cqw; top: 1.2cqw; transform: rotate(40deg); }
.tape.bl { left: -3.5cqw; bottom: 1.2cqw; transform: rotate(40deg); }
.tape.br { right: -3.5cqw; bottom: 1.2cqw; transform: rotate(-40deg); }

/* ---------------- one poster's page ---------------- */
.product { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(230px, 1fr); gap: 30px; align-items: start; }
.stand { padding: 4px 0 6px; }
.holder { width: min(100%, 470px, calc((100svh - 150px) / 1.233)); margin: 0 auto; }
.holder .piece { box-shadow: 0 2px 3px rgba(0, 0, 0, .45), 0 14px 30px rgba(0, 0, 0, .25); }
.holder:not(.f) .piece { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 18px rgba(0, 0, 0, .2); }
.under { display: none; }

.info { padding-top: 4px; }
.ptitle { margin: 0 0 2px; font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; font-weight: 600; font-size: 26px; letter-spacing: .2em; color: var(--navy); word-break: break-word; }
.pname { margin: 0 0 12px; font-size: 13px; font-weight: bold; }
.details { border-collapse: collapse; margin: 0 0 14px; font-size: 11px; }
.details th { text-align: left; font-weight: normal; color: var(--muted); padding: 3px 14px 3px 0; vertical-align: top; }
.details td { padding: 3px 0; }
.opts { border: 1px solid var(--rule); background: var(--paper); margin: 0 0 14px; padding: 6px 12px 10px; }
.opts legend { font-weight: bold; font-size: 11px; padding: 0 4px; color: var(--burg); }
.opts label { display: inline-flex; align-items: center; gap: 2px; margin-right: 18px; cursor: pointer; font-size: 12px; }
.btn { display: inline-block; font: bold 12px Verdana, Geneva, sans-serif; color: #fff; background: linear-gradient(#a8443a, var(--burg) 55%, #561212); border: 1px solid #3f0d0d; border-radius: 3px; padding: 7px 14px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 1px rgba(0, 0, 0, .2); }
.btn:hover { background: linear-gradient(#b8534a, #7a2020 55%, #621616); }
.btn:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); }
.small { font-size: 11px; color: var(--muted); margin: 12px 0 0; }

/* See It on Your Wall */
.wall { display: none; border: 1px solid #cfc7b1; background: var(--paper); }
.walling { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.walling .stand { display: none; }
.walling .wall { display: block; }
.walling .info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding: 0; }
.walling .info > * { margin: 0; }
.walling .opts { padding: 2px 12px 6px; }
.walling .details { display: none; }
.view { position: relative; overflow: hidden; height: min(64vh, 600px); background: #cbc4b3; }
.stage { position: absolute; left: 0; top: 0; }
.room { display: block; width: 100%; height: 100%; }
.hang { position: absolute; }
.hang .piece { width: 100%; }
.hang.f .piece { box-shadow: calc(var(--sx, 0) * var(--pw, 200px) * .03) calc(var(--sy, .6) * var(--pw, 200px) * .045) calc(var(--pw, 200px) * .05) rgba(30, 22, 10, .42), 0 0 calc(var(--pw, 200px) * .006) rgba(0, 0, 0, .5); }
.hang.u .piece { box-shadow: calc(var(--sx, 0) * var(--pw, 200px) * .008) calc(var(--sy, .6) * var(--pw, 200px) * .012) calc(var(--pw, 200px) * .02) rgba(30, 22, 10, .35); }
@keyframes settle { 0% { transform: rotate(1.3deg); } 30% { transform: rotate(-.75deg); } 55% { transform: rotate(.35deg); } 78% { transform: rotate(-.12deg); } 100% { transform: rotate(0); } }
.hang.swing .piece { transform-origin: 50% -6%; animation: settle 1.5s cubic-bezier(.3, .1, .3, 1) both; }
.view.loading .stage { opacity: .4; transition: opacity .2s; }
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid #cfc7b1; }
.tab { flex: 1 1 auto; font: 11px Verdana, Geneva, sans-serif; color: var(--link); background: linear-gradient(#fff, #ebe6d8); border: 0; border-right: 1px solid #d6cfbd; padding: 8px 10px; cursor: pointer; text-decoration: underline; }
.tab:last-child { border-right: 0; }
.tab.on { color: var(--text); font-weight: bold; text-decoration: none; background: #fff; box-shadow: inset 0 3px 0 var(--gold); }

/* the work */
.desc { margin-top: 30px; border: 1px solid #cfc7b1; }
.case { padding: 16px 18px 22px; background: #fff; --ab-fg: #222; --ab-muted: #6a6a6a; --ab-accent: var(--burg); --ab-chrome: 110px; font-size: 13px; line-height: 1.6; }
.case .ab-lede { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.5; color: #222; }
.case .ab-heading { font: bold 12px Verdana, Geneva, sans-serif; color: var(--burg); text-transform: uppercase; letter-spacing: .05em; padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
.case .ab-text { color: #333; }
.case figcaption { font-size: 11px; }
.case .ab-credits { padding-top: 10px; border-top: 1px dotted var(--rule); font-size: 11px; }

/* about */
.about { max-width: 640px; font-size: 13px; }
.about .aname { font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 22px; letter-spacing: .18em; text-transform: uppercase; margin: 0; color: var(--navy); }
.about .atitle { margin: 2px 0 12px; font-weight: bold; }
.about .details { font-size: 12px; margin-top: 10px; }
.about .boxhead { margin-top: 18px; }
.exp { list-style: none; margin: 0; padding: 8px 0 0; }
.exp li { padding: 7px 0; border-bottom: 1px dotted var(--rule); }
.exp .small { margin: 2px 0 0; }

.foot { padding: 12px 22px 16px; background: var(--cream); border-top: 1px solid var(--rule); text-align: center; font-size: 11px; }
.foot .fine { margin-top: 4px; color: #888; font-family: 'Cinzel', Georgia, serif; letter-spacing: .2em; text-transform: uppercase; font-size: 10px; }

/* smaller screens */
@media (max-width: 1020px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 14px; background: #fff; }
  .page { border: 0; }
  .mast { padding: 12px 16px 10px; flex-wrap: wrap; gap: 6px 14px; }
  .mast .name { font-size: 17px; letter-spacing: .18em; }
  .mast .top { font-size: 11px; }
  .crumbs { padding: 6px 16px; font-size: 12px; }
  .body { padding: 12px 16px 24px; display: block; }
  .side { display: none; }
  .jump { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 10px; background: var(--paper); border: 1px solid #cfc7b1; }
  .jump label { font: bold 11px Verdana, Geneva, sans-serif; color: var(--burg); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
  .jump select { flex: 1; min-width: 0; font: 14px Verdana, Geneva, sans-serif; padding: 4px; }
  .pagehead { font-size: 18px; }
  .grid + .pagehead, main > .pagehead:first-of-type { display: none; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .cap { font-size: 12px; }
  .product { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .holder { width: min(100%, 420px); }
  .ptitle { font-size: 22px; }
  .view { height: min(68svh, 560px); }
  .tab { font-size: 12px; flex: 1 1 45%; border-bottom: 1px solid #d6cfbd; }
  .case { padding: 12px 12px 18px; font-size: 14px; }
  .details, .opts label { font-size: 13px; }
  .small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo img, .itemlink .piece { transition: none; }
  .hang.swing .piece { animation: none; }
}