:root {
  --ink: #0b0b0b;
  --red: #d82225;
  --amber: #ffb547;
  --cream: #f3e9d7;
  --muted: rgba(243, 233, 215, 0.66);
  --glass: rgba(11, 11, 11, 0.62);
  --line: rgba(243, 233, 215, 0.14);
  --gutter: clamp(16px, 4vw, 56px);
  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font: 400 16px/1.55 var(--text);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ——— Katmanlar ——— */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 80% at 70% 20%, #2a0d0d 0%, #120808 38%, var(--ink) 70%); }
.spot { position: absolute; inset: -20% -10% auto auto; width: 90vmax; height: 90vmax;
  background: radial-gradient(circle, rgba(255, 181, 71, 0.13), transparent 60%); }
.bg-type { position: absolute; left: -10vw; white-space: nowrap; font: 400 clamp(110px, 24vw, 340px)/0.85 var(--display);
  color: transparent; -webkit-text-stroke: 1px rgba(243, 233, 215, 0.07); letter-spacing: 0.02em; will-change: transform; }
.bg-type.t1 { top: 8vh; }
.bg-type.t2 { top: 58vh; -webkit-text-stroke-color: rgba(216, 34, 37, 0.16); }
#gl, #fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#gl { z-index: 1; }
#fx { z-index: 2; }
main, .top { position: relative; z-index: 3; }

/* ——— Üst çubuk ——— */
.top { position: fixed; inset: 0 0 auto 0; display: flex; align-items: center; gap: 16px;
  padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 10px; }
.brand { font: 400 20px/1 var(--display); letter-spacing: 0.06em; text-decoration: none; }
.brand span { color: var(--red); margin: 0 4px; }
.links { display: flex; gap: 20px; margin-left: auto; font-size: 14px; }
.links a { text-decoration: none; color: var(--muted); }
.links a:hover { color: var(--cream); }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.chip[aria-pressed='true'], .chip.on { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
.chip i { font-style: normal; color: var(--amber); }

/* ——— Bölümler ——— */
.sec { min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 96px var(--gutter) 64px; max-width: min(600px, 46vw); }
.hero h1 { font: 400 clamp(84px, 13vw, 200px)/0.86 var(--display); margin: 0 0 20px; letter-spacing: 0.01em;
  text-shadow: 0 6px 40px rgba(216, 34, 37, 0.35); }
.kicker { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9); text-transform: uppercase; letter-spacing: 0.22em; font-size: 12px; color: var(--amber); margin: 0 0 14px; font-weight: 600; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 30em; margin: 0 0 28px; }
.lead b { color: var(--cream); font-weight: 600; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
  border-radius: 999px; font-weight: 800; letter-spacing: 0.03em; text-decoration: none; border: 1px solid var(--line); }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 10px 40px rgba(216, 34, 37, 0.35); }
.btn.primary:active { transform: scale(0.98); }
.btn.ghost { background: var(--glass); }
.btn.big { min-height: 60px; padding: 0 34px; font-size: 18px; margin-top: 8px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hover-hint { display: none; margin-top: 22px; font-size: 13px; color: var(--muted); }
.fine-pointer .hover-hint { display: block; }

.card { padding: 28px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card h2, .journey h2 { font: 400 clamp(40px, 5vw, 64px)/0.95 var(--display); margin: 6px 0 14px; letter-spacing: 0.01em; }
.card p { margin: 0 0 12px; color: var(--muted); }
.num { font: 400 15px/1 var(--display); color: var(--red); letter-spacing: 0.12em; }
.stats { display: flex; gap: 10px; list-style: none; padding: 0; margin: 18px 0 0; }
.stats li { flex: 1; padding: 12px; border-radius: 14px; border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.stats b { display: block; font: 400 26px/1.1 var(--display); color: var(--cream); }

.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 22px 22px; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--amber); }
.timeline li.hot::before { background: var(--red); border-color: var(--red); box-shadow: 0 0 18px var(--red); }
.timeline time { font: 400 20px/1.2 var(--display); letter-spacing: 0.04em; color: var(--amber); }
.timeline p { margin: 4px 0 0; color: var(--muted); }
.timeline b { color: var(--cream); }
.journey { max-width: min(640px, 50vw); }

.only-mouse { display: block; }
.only-touch { display: none; }
@media (pointer: coarse) { .only-mouse { display: none; } .only-touch { display: block; } }

.end { min-height: 70svh; justify-content: flex-end; font-size: 13px; color: var(--muted); }
.end b { color: var(--cream); }
.src a { color: var(--amber); }

/* Görünme */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ——— Çalma sahnesi ——— */
.stage { position: fixed; inset: 0; z-index: 10; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; overscroll-behavior: none; cursor: crosshair; }
.stage[hidden] { display: none; }
body.playing { overflow: hidden; }
body.playing main, body.playing .top { visibility: hidden; }
.hud { position: absolute; inset: 0 0 auto 0; display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left)); }
.hud .chip { min-height: 44px; min-width: 44px; justify-content: center; }
.readout { display: flex; flex-direction: column; line-height: 1.1; margin-right: auto; padding-left: 4px; }
#fretOut { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
#noteOut { font: 400 26px/1 var(--display); color: var(--amber); }
.hud-btns { display: flex; gap: 8px; }
.combo { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%) scale(0.9); opacity: 0; pointer-events: none;
  font: 400 clamp(36px, 9vw, 84px)/1 var(--display); color: var(--cream); letter-spacing: 0.04em; transition: opacity 0.25s, transform 0.25s; }
.combo.show { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
.combo.hot { color: var(--red); text-shadow: 0 0 30px rgba(216, 34, 37, 0.8); }
.combo.pop { animation: pop 0.35s ease; }
@keyframes pop { 50% { transform: translate(-50%, -50%) scale(1.25); } }
.hint { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(92vw, 560px); margin: 0; padding: 12px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line);
  font-size: 13px; text-align: center; color: var(--muted); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.hint b { color: var(--cream); }
.hint.show { opacity: 1; }
.bend { position: absolute; right: calc(10px + env(safe-area-inset-right)); top: 30%; height: 40%; width: 6px; border-radius: 3px;
  background: var(--line); opacity: 0; transition: opacity 0.3s; }
.bend.show { opacity: 1; }
.bend i { position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--b, 0) * -50%); min-height: 2px; background: var(--red);
  border-radius: 3px; transform-origin: top; }

/* ——— Telefon (dikey) ——— */
@media (max-aspect-ratio: 17/20) {
  .links { display: none; }
  .top .chip { margin-left: auto; }
  .sec, .journey { max-width: none; justify-content: flex-end; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .hero h1 { font-size: clamp(76px, 25vw, 140px); }
  .hero { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .card { padding: 22px; }
  .journey { justify-content: center; }
  .journey .timeline { background: var(--glass); border-radius: 18px; padding: 18px 16px 2px 22px; border-left: 0;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); }
  .journey .timeline li { border-left: 2px solid var(--line); }
  .bg-type.t2 { top: 70vh; }
  .hud-btns .chip { padding: 0 10px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
}

.no-webgl #gl, .no-webgl #fx { display: none; }
.noscript { position: fixed; inset: auto 0 0 0; padding: 16px; background: var(--red); color: #fff; z-index: 20; margin: 0; }

/* Midnight / 1978 — aged venue walls, steel and electric blue. */
:root { --ink: #070e21; --cream: #e6e3d9; --amber: #c7ad77; --muted: rgba(226,231,239,.72); --glass: rgba(6,14,31,.88); --line: rgba(156,176,209,.26); --red: #b83a35; }
.bg { background: radial-gradient(ellipse at 75% 35%, #192c50 0, #0c1934 38%, #070e21 76%); }
.spot { background: radial-gradient(circle, #638ac71c, transparent 62%); }
.bg-type { -webkit-text-stroke-color: #b8c9e311; letter-spacing: -.02em; }
.bg-type.t2 { -webkit-text-stroke-color: #91aad217; }
.texture-patch { position: absolute; background-repeat: repeat; pointer-events: none; }
.brick-patch { right: -4%; top: 6%; width: 49%; height: 67%; background-image: url('../assets/brick.svg'); background-size: 350px 200px; opacity: .29; transform: rotate(-9deg); mask-image: radial-gradient(ellipse, #000 20%, transparent 69%); }
.wood-patch { left: -8%; bottom: -17%; width: 75%; height: 51%; background-image: url('../assets/wood.svg'); background-size: 650px 450px; opacity: .24; transform: rotate(-12deg); mask-image: linear-gradient(0deg,#000 20%,transparent 96%); clip-path: polygon(0 10%, 28% 18%, 31% 9%, 50% 18%, 64% 8%, 69% 25%, 92% 18%, 100% 45%, 93% 100%, 0 100%); }
.storm { position: absolute; width: 100%; height: 100%; opacity: .52; }
.bolt { stroke: #b5c9ec; stroke-width: 1.5; opacity: .64; }
.bolt-glow { stroke: #507bd0; stroke-width: 8; opacity: .35; filter: blur(8px); }
.grain { position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.top { background: linear-gradient(#060d20f0, #060d20c0 70%, transparent); padding-top: calc(18px + env(safe-area-inset-top)); padding-bottom: 24px; }
.brand { letter-spacing: .12em; }
.links { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.chip, .btn, .card, .stats li, .hint, .journey .timeline { border-radius: 2px; }
.chip { background: #111c30e6; }
.btn { text-transform: uppercase; font-size: 12px; letter-spacing: .12em; border-color: #8395ad66; }
.btn.primary { background: #b73732; border-color: #df7165; box-shadow: inset 0 0 14px #351b2144, 4px 4px 0 #030917; }
.btn.ghost { background: #101c32b3; }
.btn:hover { filter: brightness(1.15); }
.btn:focus-visible, .chip:focus-visible, a:focus-visible { outline: 2px solid #c7ad77; outline-offset: 5px; }
.hero h1 { font-size: clamp(84px, 12.5vw, 190px); font-style: italic; letter-spacing: -.025em; line-height: .92; transform-origin: left; text-shadow: 3px 3px 0 #070c17, 5px 5px 0 #8394b150; }
.hero h1 span { color: #c4cbd4; }
.kicker { font-size: 10px; letter-spacing: .25em; color: #c7ad77; }
.edition { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; padding: 10px 0; border-top: 1px solid #899bb04a; border-bottom: 1px solid #899bb04a; font-size: 10px; letter-spacing: .15em; color: #b8c3d4; }
.edition b { color: #eee5d3; font-size: 13px; }
.edition span { margin-left: auto; color: #c7ad77; }
.lead { font-size: clamp(15px,1.35vw,18px); max-width: 28em; }
.card { position: relative; border-top: 2px solid #a4acb6; box-shadow: 7px 7px 0 #02081766; background: linear-gradient(125deg,#152139ed,#070e20f5); }
.card::before, .card::after { content: ''; position: absolute; top: 10px; width: 4px; height: 4px; background: #8b95a4; border-radius: 50%; box-shadow: 0 1px 2px #000; }
.card::before { left: 10px; } .card::after { right: 10px; }
.card h2, .journey h2 { text-transform: uppercase; }
.stats li { border-width: 0 0 0 1px; padding: 8px 12px; }
.num { color: #c7ad77; }
.guitar-caption { position: fixed; right: 7%; bottom: 6%; z-index: 2; display: flex; flex-direction: column; gap: 5px; border-left: 2px solid #b83a35; padding-left: 15px; pointer-events: none; }
.guitar-caption span { font: 9px var(--text); letter-spacing: .22em; color: #8d9cb4; }
.guitar-caption b { font: 24px var(--display); letter-spacing: .06em; color: #b8c2d0; }
body.playing .guitar-caption { display: none; }
@media (max-aspect-ratio: 17/20) {
  .hero { padding-top: 40svh; min-height: 100svh; background: linear-gradient(transparent 25%, #070e2180 42%, #070e21e8 67%); }
  .hero h1 { font-size: clamp(70px,21vw,120px); }
  .hero .lead { max-width: 32em; }
  .guitar-caption { display: none; }
  .brick-patch { width: 95%; right: -25%; top: 2%; height: 58%; opacity: .25; }
  .wood-patch { width: 130%; height: 32%; }
  .storm { width: 170%; left: -65%; opacity: .36; }
  .edition { font-size: 9px; gap: 8px; }
  .btn { padding: 0 18px; min-height: 48px; }
  .card { background: #0b1529ed; }
}

.grain { background-size: 180px 180px; opacity: .045; }
.hero .reveal { opacity: 1; transform: none; }
.brick-patch { opacity: .38; }
.wood-patch { opacity: .17; }

/* Hazel Özkan — worn navy / burgundy venue wall. */
.bg { background: linear-gradient(90deg, #060b1799, #090d1b24 55%, #060b1733), url('../assets/bar-wall-v2.webp') center / cover no-repeat, #101122; }
.texture-patch, .storm, .grain, .spot { display: none; }
.bg-type { opacity: .35; }
.hero { background: none; }
.hero h1 { text-shadow: 3px 3px 0 #070c17, 5px 5px 0 #8394b150, 0 0 32px #050817; }
.lead, .hover-hint { text-shadow: 0 2px 10px #050816; }
.hover-hint { display: block; }
.playing-controls { position: absolute; bottom: max(12px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(760px,calc(100% - 24px)); border: 1px solid #a4abc83d; background: #070d1eeb; padding: 10px 12px; backdrop-filter: blur(10px); }
.chord-row { display: flex; gap: 5px; align-items: center; justify-content: center; }
.control-label { font-size: 9px; letter-spacing: .16em; color: #a7afbf; margin-right: 5px; }
.chord { min-height: 42px; min-width: 42px; padding: 0 10px; background: #162037; border: 1px solid #8291ad55; border-radius: 2px; font-weight: 600; font-size: 13px; }
.chord[aria-pressed='true'] { background: #70413a; border-color: #d3ae78; color: #fff0cb; }
.chord:hover { border-color: #d3ae78; }
.strum { background: #943631; margin-left: auto; white-space: nowrap; }
.fret-editor { margin-top: 7px; border-top: 1px solid #8092aa33; padding-top: 7px; }
.fret-editor summary { font-size: 11px; color: #b7c1d1; cursor: pointer; min-height: 22px; }
#fingering { margin-left: 12px; color: #d4b780; font-variant-numeric: tabular-nums; word-spacing: .3em; }
.fret-selects { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; padding: 10px 0 3px; }
.fret-selects label { font-size: 11px; color: #bec5d4; }
.fret-selects select { display: block; width: 100%; margin-top: 4px; min-height: 42px; background: #142036; color: #f1e5cd; border: 1px solid #8193b268; border-radius: 2px; font: 600 16px var(--text); }
.fret-editor p { margin: 7px 0 0; font-size: 11px; color: #a6b2c7; }
.hint { bottom: 125px; max-width: 620px; font-size: 12px; padding: 8px 12px; }
.combo { top: 18%; font-size: 32px; opacity: 0; }
.combo.show { opacity: .65; }
@media(max-aspect-ratio:17/20) {
  .bg { background-position: center, 66% center; }
  .hero { background: linear-gradient(transparent 36%,#070e2150 49%,#070e21d9 75%); }
  .hero h1 { font-size: clamp(70px,20vw,120px); }
  .hero { padding-top: 44svh; }
  .playing-controls { padding: 8px; bottom: max(8px,env(safe-area-inset-bottom)); }
  .chord-row { flex-wrap: wrap; gap: 4px; }
  .control-label { display:none; }
  .chord { min-width: 36px; min-height: 40px; padding: 0 8px; }
  .strum { flex: 1; }
  #fingering { margin-left: 5px; font-size: 10px; word-spacing: 0; }
  .hint { bottom: 156px; font-size: 11px; }
  .hud .chip { padding: 0 9px; font-size: 11px; }
  .hud { gap: 5px; }
  .hud-btns { gap: 4px; }
  .fret-selects { gap: 4px; }
}
@media(max-height:500px) and (min-aspect-ratio:17/20) {
  .playing-controls { padding: 5px 9px; bottom: 5px; width: min(700px,calc(100% - 110px)); }
  .chord { min-height: 34px; }
  .fret-editor { margin-top: 4px; padding-top: 3px; }
  .hint { bottom: 96px; }
  .combo { top: 27%; }
  .fret-editor[open] { max-height: 135px; overflow: auto; }
}
.language-select { background:#0f192de6; color:#e5dfd3; border:1px solid #8093b155; border-radius:2px; min-height:40px; padding:0 7px; font:600 12px 'Inter',sans-serif; cursor:pointer; }
@media(max-aspect-ratio:17/20) {
 .top { gap:8px; }
 .top .language-select { margin-left:auto; }
 .top .chip { margin-left:0; padding:0 9px; font-size:11px; }
 .brand { font-size:18px; }
 .hud { flex-wrap:wrap; align-items:center; }
 .hud .language-select { min-height:36px; font-size:11px; padding:0 4px; }
 .hud .chip { min-height:36px; min-width:36px; padding:0 6px; }
 .hud-btns { margin-left:auto; }
 #tiltBtn { max-width:63px; overflow:hidden; }
 .readout { max-width:74px; }
}
@media(max-aspect-ratio:17/20) {
 .hero { padding-top:48svh; }
 .hero .cta { flex-wrap:nowrap; gap:8px; }
 .hero .cta .btn { padding:0 12px; font-size:10px; letter-spacing:.08em; }
}

@media(max-aspect-ratio:17/20) {
 .bg { background-image:linear-gradient(90deg,#060b1755,#090d1b11 55%,#060b1722),url('../assets/bar-wall-mobile-v2.webp'); background-position:center; }
}

/* Amp controls are visible only while playing. */
.gain-panel { display:none; position:fixed; z-index:12; right:16px; top:43%; width:118px; padding:12px; background:linear-gradient(135deg,#1c2230f2,#080e1cf5); border:1px solid #a4abc850; border-top:2px solid #b84b40; box-shadow:3px 4px 16px #0007; }
.gain-heading { display:block; color:#c7ad77; font:600 9px var(--text); letter-spacing:.12em; margin-bottom:9px; }
.gain-panel select { width:100%; min-height:34px; background:#0b1222; color:#f0e4cf; border:1px solid #8795ae55; font:600 11px var(--text); padding:0 4px; }
.gain-panel label { display:flex; align-items:center; justify-content:space-between; gap:4px; font-size:11px; margin-top:10px; }
.gain-panel output { color:#e2b27c; font:600 17px var(--text); font-variant-numeric:tabular-nums; }
.gain-panel input { display:block; width:100%; height:30px; margin:0; accent-color:#cf5a48; cursor:ew-resize; touch-action:pan-y; }
.gain-scale { display:flex; justify-content:space-between; color:#8997ac; font-size:9px; line-height:1; }
.gain-panel :focus-visible { outline:2px solid #c7ad77; outline-offset:3px; }
@media(max-aspect-ratio:17/20) {
 .gain-panel { top:88px; right:auto; left:12px; width:104px; padding:9px; }
 .gain-panel input { height:36px; }
 .gain-panel select { min-height:36px; }
 .gain-heading { font-size:8px; margin-bottom:6px; }
}
@media(max-height:500px) and (min-aspect-ratio:17/20) {
 .gain-panel { top:62px; right:12px; width:154px; padding:8px; }
 .gain-heading { display:none; }
 .gain-panel select { min-height:28px; }
 .gain-panel label { margin-top:3px; }
 .gain-panel input { height:24px; }
}
@media(min-aspect-ratio:17/20) and (min-height:501px) {
 body.playing .gain-panel { top:85px; }
}

body.playing .gain-panel { display:block; }

.timeline-step { display: block; font: inherit; font-size: .75rem; letter-spacing: .1em; color: var(--gold, #c7ad77); margin-bottom: .65rem; }

/* Capture touch gestures only over the landing guitar, leaving page scrolling free. */
.guitar-touch-surface { position:fixed; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; touch-action:none; }
.guitar-touch-surface polygon { pointer-events:all; touch-action:none; cursor:pointer; }
body.playing .guitar-touch-surface { display:none !important; }
.top { z-index:6; }

.story-photo { margin: 0 0 22px; overflow:hidden; border:1px solid #b0b8c733; background:#080e19; }
.story-photo img { display:block; width:100%; object-fit:cover; }
.story-photo.portrait img { height:320px; object-position:center 30%; }
.story-photo.duet img { height:280px; object-position:center 52%; }
.story-photo.cat { max-width:360px; margin-top:26px; }
.story-photo.cat img { height:300px; object-position:center 50%; }
.story-photo figcaption { font:400 11px var(--text); color:var(--muted); padding:10px 14px; letter-spacing:.06em; }
@media(max-width:700px) { .story-photo.portrait img { height:290px; } .story-photo.duet img { height:260px; } .story-photo.cat { width:100%; } }

/* Preserve the complete Instagram frame, including both bubbles and usernames. */
.story-photo.duet img { width:100%; height:auto; max-height:none; object-fit:contain; }
#chordFamily { min-height:36px; max-width:88px; padding:0 4px; background:#101a2a; color:#eee8df; border:1px solid #8093b155; font:600 11px var(--text); }
.chord[hidden] { display:none !important; }