/* Edition One · the archive pinboard. Builds on home.css (fonts, colours, the top bar, pills). */
.ed1 { background: var(--cream); }
.ed1 .bar-logo { opacity: 1; transform: none; }

.board-head { padding: calc(96px + env(safe-area-inset-top)) var(--gut) 8px; text-align: center; }
.board-head h1 { margin-top: 6px; font: 400 clamp(2.4rem, 11vw, 4rem)/1.15 var(--display); color: var(--blue); }
html[lang="en"] .board-head h1 { text-transform: uppercase; font-weight: 600; letter-spacing: 0.04em; font-size: clamp(2rem, 9vw, 3.4rem); }
.board-hint { margin-top: 10px; font-size: 1rem; }

/* the board: posters pinned a little crooked, overlapping like a real wall */
.board { list-style: none; margin: 0 auto; padding: 34px 18px 30px; max-width: 980px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
.board li { --tilt: -2.5deg; --dy: 0px; position: relative; transform: translateY(var(--dy)) rotate(var(--tilt)); opacity: 0; transition: opacity 0.5s, transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.25); transition-delay: calc(var(--i) * 70ms); }
.board li:nth-child(2n) { --tilt: 2deg; --dy: 26px; }
.board li:nth-child(3n) { --tilt: -1deg; }
.board li:nth-child(4n) { --tilt: 3.2deg; }
.board li:nth-child(5n) { --tilt: -3.4deg; }
.board li:not(.in) { transform: translateY(60px) rotate(calc(var(--tilt) * 4)); }
.board li.in { opacity: 1; }
.board li:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; }
.poster { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; box-shadow: 0 2px 0 rgba(28, 35, 84, 0.12), 0 12px 22px rgba(28, 35, 84, 0.22); transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.25s; -webkit-tap-highlight-color: transparent; }
.poster img { width: 100%; aspect-ratio: 4 / 5; border-radius: 6px; }
.poster:hover, .poster:focus-visible { transform: translateY(-6px) rotate(calc(var(--tilt) * -0.6)) scale(1.03); box-shadow: 0 22px 34px rgba(28, 35, 84, 0.3); }
.poster:active { transform: scale(0.97); }
.board li.away .poster { visibility: hidden; }
/* the pin: the brand's red star */
.board li::before { content: ''; position: absolute; z-index: 2; top: -11px; left: 50%; width: 24px; height: 24px; margin-left: -12px; background: var(--red); clip-path: path('M12 0c1.2 6.6 5.4 10.8 12 12-6.6 1.2-10.8 5.4-12 12-1.2-6.6-5.4-10.8-12-12 6.6-1.2 10.8-5.4 12-12Z'); filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3)); }
.board li::after { content: ''; position: absolute; z-index: 1; top: 1px; left: 50%; width: 22px; height: 6px; margin-left: -11px; border-radius: 50%; background: rgba(0, 0, 0, 0.28); filter: blur(3px); }

.next-door { padding: 34px var(--gut) calc(70px + env(safe-area-inset-bottom)); text-align: center; }
.next-door .pill { height: 52px; padding: 0 24px; }

/* ---------- the poster in the hand ---------- */
.held { --c: var(--blue); --ink: var(--paper); position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none; overflow: hidden; perspective: 1400px; }
.held::backdrop { background: rgba(28, 35, 84, 0.72); backdrop-filter: blur(3px); animation: dim 0.35s both; }
@keyframes dim { from { opacity: 0; } }
/* the poster in the hand fills the phone's height, so the story is read without a small box to scroll in */
.flip { position: absolute; left: 50%; top: calc(50% - 32px); width: min(92vw, 460px); height: min(100svh - 118px, 720px); margin: 0; translate: -50% -50%; transform-style: preserve-3d; transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45); }
.front { background: var(--c); }
.front img { width: 100%; height: 100%; object-fit: contain; }
.back { transform: rotateY(180deg); display: flex; flex-direction: column; background: var(--paper); color: var(--ink-text, #1C2354); }
.back-head { flex: none; padding: 18px 20px 16px; background: var(--c); color: var(--ink); }
.back-n { display: block; font-size: 0.78rem; letter-spacing: 0.2em; opacity: 0.85; }
.back-head h2 { margin-top: 4px; font: 400 1.55rem/1.25 var(--display); }
html[lang="en"] .back-head h2 { font-weight: 600; font-size: 1.3rem; }
.back-head p { margin-top: 3px; font-size: 0.92rem; opacity: 0.9; }
html[lang="en"] .back-head p { font-family: var(--font-ar); } html[lang="ar"] .back-head p { font-family: var(--font-en); }
.back-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 22px; -webkit-overflow-scrolling: touch; }
.back-story { font-size: 1rem; line-height: 1.7; text-wrap: pretty; }
html[lang="ar"] .back-story { line-height: 1.95; }
.back-hours { margin-top: 16px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--rule); border-radius: 12px; font-weight: 600; font-size: 0.95rem; }
.back-hours svg { flex: none; width: 20px; color: var(--red); }
.back-hours[hidden] { display: none; }
.back-go { display: block; margin-top: 16px; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--c); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.back-map { width: 100%; }
.go-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 8px 14px; background: var(--c); color: var(--ink); font-weight: 600; font-size: 0.98rem; }
.go-btn svg { flex: none; width: 22px; }
.back-go:active .go-btn { filter: brightness(0.9); }
.held-nav { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 10px; direction: ltr; }
.held-nav .pill { height: 48px; } .held-nav .pill svg { width: 22px; } .held-nav #prev, .held-nav #next { padding: 0; width: 48px; }

@media (min-width: 720px) {
  .board { grid-template-columns: repeat(3, 1fr); gap: 44px 30px; padding-top: 50px; }
  .board li:last-child:nth-child(odd) { grid-column: auto; width: auto; }
  .board li:nth-child(3n + 2) { --dy: 34px; } .board li:nth-child(2n) { --dy: 0px; }
}
@media (prefers-reduced-motion: reduce) { .board li { opacity: 1; transform: rotate(var(--tilt)) !important; } }

/* the shop's object, drawn in dots in its colour: it sits above the story and sways a little, as if hung on a thread */
.back-object { display: block; width: auto; max-width: 78%; height: auto; max-height: min(52vw, 230px); margin: 2px auto 20px; transform-origin: 50% -30%; animation: sway 5s ease-in-out infinite; }
.back-object.tall { max-height: min(64vw, 280px); }
@keyframes sway { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
@media (prefers-reduced-motion: reduce) { .back-object { animation: none; } }