/* akis zao — cinematic archive / image, sound, time */
:root {
  --paper: #d0c8b8; --paper-light: #e4ddcf; --ink: #171a18;
  --muted: #6e7068; --rule: rgba(23,26,24,.24); --dark: #090b0b;
  --dark-text: #dedbd0; --cyan: #b8e5e7;
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "Manrope", Arial, sans-serif;
  --ease-cinema: cubic-bezier(.22,.61,.36,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 26px; }
body { margin: 0; background: #0b0c0b; color: var(--ink); font: 13px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; transition: opacity 900ms var(--ease-cinema), color 700ms var(--ease-cinema); }
a:hover { opacity: .72; }
button { font: inherit; }
.site-header { min-height: 70px; padding: 0 5vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; background: var(--dark); color: var(--dark-text); }
.wordmark { font-size: 21px; letter-spacing: -.075em; font-weight: 500; }
.wordmark-dot { color: var(--cyan); }
.site-header nav { display: flex; gap: 32px; font-size: 10px; letter-spacing: .08em; }
.location { justify-self: end; font-size: 8px; letter-spacing: .16em; color: #9c9f96; }
.intro { height: min(790px, calc(100svh - 70px)); min-height: 570px; position: relative; overflow: hidden; background: #080909; color: #f0ede3; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; filter: saturate(.82) brightness(.72); animation: image-arrive 1.5s ease-out both; }
.no-hero-image { background: radial-gradient(ellipse at 70% 45%, #25302e 0%, #111715 38%, #080909 76%); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.52),transparent 72%),linear-gradient(0deg,rgba(0,0,0,.62),transparent 48%,rgba(0,0,0,.12)); pointer-events: none; }
.hero-content { position: absolute; left: 8.5vw; bottom: 11%; z-index: 1; }
.hero-kicker { font-size: 8px; letter-spacing: .2em; color: rgba(240,237,227,.75); margin: 0 0 12px 4px; }
h1 { font: 400 clamp(72px,12vw,172px)/.78 var(--serif); letter-spacing: -.065em; margin: 0 0 40px; }
.enter-link { display: inline-flex; gap: 35px; align-items: center; border-bottom: 1px solid rgba(240,237,227,.55); padding: 0 0 9px 3px; font-size: 10px; letter-spacing: .08em; }
.enter-link:hover { gap: 48px; }
.hero-index,.hero-side-note { position: absolute; z-index: 1; font-size: 8px; letter-spacing: .15em; color: rgba(240,237,227,.78); }
.hero-index { right: 5vw; bottom: 28px; }
.hero-side-note { right: 5vw; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%); }
.section { padding: 92px 10.5vw 112px; border-top: 1px solid var(--rule); background: var(--paper); }
.section-heading { display: grid; grid-template-columns: 70px 1fr 1fr; align-items: baseline; gap: 16px; margin-bottom: 48px; }
.section-number { font-size: 9px; letter-spacing: .12em; }
.section-heading h2 { font: 400 clamp(42px,5vw,68px)/.95 var(--serif); margin: 0; letter-spacing: -.04em; }
.section-heading p { justify-self: end; font-size: 10px; color: var(--muted); margin: 0; }
.sounds-section { background: var(--dark); color: var(--dark-text); border-color: rgba(232,227,215,.2); }
.sounds-section .section-heading p { color: #9c9f96; }
.sound-item { display: grid; grid-template-columns: 126px 1fr auto; align-items: center; gap: 30px; padding: 28px 0; border-top: 1px solid rgba(232,227,215,.25); border-bottom: 1px solid rgba(232,227,215,.25); }
.sound-art { width: 126px; aspect-ratio: 1; background: #202b2a; color: var(--cyan); display: grid; place-items: center; position: relative; overflow: hidden; }
.sound-art span { font: italic 400 39px var(--serif); z-index: 1; }
.sound-art i { position: absolute; inset: 14px -18px; border: 1px solid rgba(184,229,231,.5); border-radius: 50%; transform: rotate(-28deg); }
.sound-art b { position: absolute; width: 160%; height: 1px; background: rgba(184,229,231,.4); transform: rotate(38deg); }
.sound-info .eyebrow { color: #9c9f96; margin: 0 0 2px; }
.eyebrow { font-size: 8px; letter-spacing: .17em; }
.sound-info h3 { font: 400 48px/.95 var(--serif); margin: 0 0 8px; }
.sound-info p:last-child { margin: 0; color: #9c9f96; font-size: 10px; }
.text-link { display: inline-flex; gap: 20px; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: 8px; font-size: 10px; }
.bandcamp-embed { margin: 28px 0 0 156px; max-width: 680px; border-top: 1px solid rgba(232,227,215,.22); padding-top: 20px; opacity: .94; }
.embed-fallback { color: #9c9f96; font-size: 10px; margin: 0 0 12px; }
.images-section { border-color: rgba(23,26,24,.24); }
.image-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: start; column-gap: clamp(24px,4.8vw,78px); row-gap: clamp(42px,6vw,92px); }
.image-card { margin: 0; min-width: 0; }
.image-card-large { width: 78%; }
.image-card-wide { width: 84%; margin: 95px 0 0 auto; }
.image-card-third { width: 72%; grid-column: 1 / -1; margin: 0 auto 0 11%; }
.image-card-fourth { width: 78%; grid-column: 2; margin: -20px 0 0 auto; }
.image-card-fifth { width: 70%; grid-column: 1; margin: 10px 0 0 12%; }
.image-card-sixth { width: 78%; grid-column: 2; margin: 4px 0 0 auto; }
.image-open { display: block; width: 100%; padding: 0; border: 0; position: relative; background: transparent; cursor: zoom-in; overflow: hidden; text-align: left; }
.image-open img { display: block; width: 100%; height: auto; filter: saturate(.82) contrast(.96); transition: filter 1200ms var(--ease-cinema),transform 1600ms var(--ease-cinema); }
.image-open:hover img { transform: scale(1.012); filter: saturate(.95) contrast(1.01); }
.image-index { position: absolute; left: 12px; bottom: 10px; color: #fff3db; font-size: 8px; letter-spacing: .14em; text-shadow: 0 1px 6px #000; }
.image-card figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 11px; font-size: 9px; letter-spacing: .025em; opacity: .78; }
.image-card figcaption span + span { color: var(--muted); }
.section-note { color: var(--muted); font-size: 9px; margin: 42px 0 0; letter-spacing: .035em; }
.about-section { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8%; }
.about-section .section-heading { display: block; margin: 0; }
.about-section .section-number { display: block; margin-bottom: 18px; }
.about-copy { max-width: 620px; }
.about-statement { font: 400 clamp(44px,6vw,78px)/.94 var(--serif); letter-spacing: -.04em; margin: 0 0 30px; }
.about-statement em { font-weight: 400; color: #586d6b; }
.about-copy p:last-child { max-width: 430px; font-size: 11px; color: var(--muted); }
.site-footer { display: grid; grid-template-columns: 1fr 2fr 1fr auto; gap: 20px; align-items: center; padding: 25px 5vw; background: var(--dark); color: var(--dark-text); font-size: 8px; letter-spacing: .1em; }
.site-footer > span:nth-child(2) { color: #9c9f96; }
.copyright { justify-self: end; }
.lightbox { width: min(94vw,1400px); max-width: none; max-height: 92vh; padding: 42px 0 0; border: 0; background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgba(5,7,7,.96); }
.lightbox img { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; object-fit: contain; }
.lightbox-close { position: absolute; top: 0; right: 0; border: 0; color: #eee7d9; background: transparent; cursor: pointer; font-size: 10px; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease,transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes image-arrive { from { transform: scale(1.025); opacity: .65; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }
@media (max-width:760px) {
  .site-header { min-height: 64px; padding: 0 20px; grid-template-columns: 1fr auto; gap: 10px; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; padding-bottom: 13px; gap: 25px; }
  .location { grid-column: 2; grid-row: 1; font-size: 7px; }
  .intro { height: calc(84svh - 64px); min-height: 490px; max-height: 700px; }
  .hero-photo { object-position: 58% 50%; }
  .hero-shade { background: linear-gradient(90deg,rgba(0,0,0,.42),transparent 90%),linear-gradient(0deg,rgba(0,0,0,.68),transparent 56%,rgba(0,0,0,.08)); }
  .hero-content { left: 7vw; bottom: 13%; }
  h1 { font-size: clamp(76px,19vw,126px); margin-bottom: 32px; }
  .hero-side-note { right: 16px; font-size: 7px; }
  .hero-index { right: 20px; bottom: 18px; font-size: 7px; }
  .section { padding: 62px 20px 74px; }
  .section-heading { grid-template-columns: 42px 1fr; gap: 10px; margin-bottom: 32px; }
  .section-heading p { grid-column: 2; justify-self: start; margin-top: 6px; }
  .sound-item { grid-template-columns: 78px 1fr; gap: 16px; }
  .sound-art { width: 78px; }
  .sound-art span { font-size: 29px; }
  .sound-link { grid-column: 2; justify-self: start; margin-top: 2px; }
  .bandcamp-embed { margin: 24px 0 0; }
  .image-grid { grid-template-columns: 1fr; row-gap: 30px; column-gap: 0; }
  .image-card-large { width: 92%; }
  .image-card-wide { width: 84%; margin: 0 0 0 auto; }
  .image-card-third { width: 88%; margin: 0 0 0 3%; }
  .image-card-fourth { width: 82%; grid-column: 1; margin: 0 0 0 auto; }
  .image-card-fifth { width: 86%; grid-column: 1; margin: 0; }
  .image-card-sixth { width: 88%; grid-column: 1; margin: 0 0 0 auto; }
  .about-section { display: block; }
  .about-section .section-heading { margin-bottom: 32px; }
  .site-footer { grid-template-columns: 1fr 1fr; padding: 24px 20px; }
  .site-footer > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .copyright { justify-self: end; }
}

/* Accessibility and responsive refinements */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.image-open:focus-visible { outline-offset: 3px; }
.site-header nav a, .enter-link, .text-link { min-height: 32px; display: inline-flex; align-items: center; }
.lightbox { overflow: auto; max-height: 100dvh; }
.lightbox-close { min-width: 64px; min-height: 40px; }
@media (max-width: 760px) {
  .site-header { padding-top: 10px; }
  .site-header nav { flex-wrap: wrap; gap: 14px 24px; }
  .site-header nav a { min-height: 40px; }
  .intro { min-height: min(490px, 75svh); }
  .hero-content { right: 22px; }
  h1 { font-size: clamp(68px, 18vw, 116px); }
  .sound-info h3 { font-size: clamp(30px, 8vw, 48px); }
  .section-heading h2 { overflow-wrap: anywhere; }
  .lightbox { width: 100vw; padding: 60px 12px 16px; }
  .lightbox-close { top: 8px; right: 12px; }
  .lightbox img { max-height: calc(100dvh - 90px); }
}

/* Seventh image completes the visual sequence without cropping original artwork. */
.image-card-seventh { grid-column: 1 / -1; width: 78%; margin: 20px auto 0; }
@media (max-width:760px) { .image-card-seventh { grid-column: 1; width: 92%; margin: 0 auto; } }

/* Gallery: preserve the source photographs and their native aspect ratios. */
.image-card[hidden] { display:none !important; }
.image-open:focus-visible,.lightbox-close:focus-visible,a:focus-visible { outline:2px solid var(--cyan);outline-offset:5px; }
@media (max-width:760px) { .image-card-seventh { grid-column:1; width:90%;margin:0 auto; } }

/* V2: restrained violet-grey, coherent photographic rhythm */
:root { --paper:#aaa5aa; --paper-light:#b8b2b7; --ink:#19171b; --muted:#49434c; --rule:rgba(35,30,40,.22); --dark:#17151b; --dark-text:#e5dfe1; --cyan:#c5b7c8; }
body { background:#17151b; }
.section { background:#aaa5aa; background-image:linear-gradient(145deg,rgba(75,65,84,.065),transparent 55%,rgba(230,222,224,.08)); }
.sounds-section { background:#201c26; background-image:none; }
.site-header,.site-footer { background:#17151b; }
.images-section { padding-left:clamp(22px,7vw,110px);padding-right:clamp(22px,7vw,110px); }
.image-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,72px) clamp(24px,4vw,60px);align-items:center; }
.image-grid .image-card { grid-column:auto;width:100%;max-width:560px;margin:0 auto; }
.image-grid .image-card:nth-child(5n + 3) { grid-column:1 / -1;max-width:760px;width:min(100%,760px); }
.image-open img { width:100%;height:auto;max-height:640px;object-fit:contain;filter:none; }
.image-open:hover img { filter:none;transform:scale(1.008); }
.sound-art img { width:100%;height:100%;object-fit:contain;display:block; }
@media(max-width:760px) {
 .images-section { padding-left:20px;padding-right:20px; }
 .image-grid { grid-template-columns:1fr;gap:44px; }
 .image-grid .image-card,.image-grid .image-card:nth-child(5n + 3) { grid-column:1;width:100%;max-width:520px;margin:0 auto; }
 .image-open img { max-height:none; }
}

/* CLEAN V3 — final authoritative design, no competing stylesheet */
:root { --paper:#b3afb4; --paper-light:#c3bec2; --ink:#222027; --muted:#57515b; --rule:rgba(38,32,44,.22); --dark:#19171d; --dark-text:#e5e0e4; --cyan:#c2b5c5; }
body,.site-header,.site-footer {background:#19171d;}
.section,.images-section,.about-section {background:#b3afb4 !important;background-image:none !important;}
.sounds-section {background:#211e27 !important;background-image:none !important;}
.images-section {padding:90px clamp(20px,6vw,100px) 120px;}
.image-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 42px;align-items:start;max-width:1150px;margin:0 auto;}
.image-grid .image-card {width:100% !important;max-width:520px !important;margin:0 !important;grid-column:auto !important;align-self:start;}
.image-grid .image-card:nth-child(5n + 3) {grid-column:1 / -1 !important;max-width:760px !important;justify-self:center;}
.image-open img {width:100%;height:auto;object-fit:contain;filter:none;}
.image-card figcaption {padding-top:12px;}
@media(max-width:760px){
 .images-section {padding:66px 20px 82px;}
 .image-grid {grid-template-columns:minmax(0,1fr);gap:38px;max-width:540px;}
 .image-grid .image-card,.image-grid .image-card:nth-child(5n + 3) {grid-column:1 !important;max-width:100% !important;}
 .image-grid .image-card:nth-child(2n) {max-width:88% !important;justify-self:end;}
}

/* V4 unified background below hero: one solid color, no gradients or animated textures */
:root { --archive-bg: #aaa6ab; }
html, body { background-color:var(--archive-bg); }
main > .section, .section, .sounds-section, .images-section, .about-section,
.site-footer { background:var(--archive-bg) !important; background-image:none !important; }
.sounds-section {color:#222027 !important;border-color:rgba(30,27,33,.22);}
.sounds-section .section-heading p,.sound-info .eyebrow,.sound-info p:last-child,.embed-fallback {color:#4d4750 !important;}
.sound-item,.bandcamp-embed {border-color:rgba(30,27,33,.25) !important;}
.sound-art {background:transparent;}
.site-footer {color:#242128 !important;border-top:1px solid rgba(30,27,33,.25);}
.site-footer > span:nth-child(2) {color:#514c53 !important;}
.image-grid {display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:56px 48px !important;max-width:1100px !important;align-items:center !important;}
.image-grid .image-card,.image-grid .image-card:nth-child(5n + 3) {grid-column:auto !important;width:100% !important;max-width:510px !important;margin:0 auto !important;justify-self:center !important;}
.image-grid .image-card img {width:100%;height:auto;object-fit:contain;}
@media(max-width:760px) {
 .image-grid {grid-template-columns:1fr !important;gap:38px !important;max-width:520px !important;}
 .image-grid .image-card,.image-grid .image-card:nth-child(5n + 3),.image-grid .image-card:nth-child(2n) {grid-column:1 !important;width:100% !important;max-width:100% !important;margin:0 auto !important;justify-self:center !important;}
}

/* V5 — quiet, deep burgundy; single flat background from Sounds to footer. */
:root { --archive-bg:#49343d; --ink:#eee4e0; --muted:#d0c0c3; --rule:rgba(241,225,222,.22); }
html,body {background:#49343d !important;color:#eee4e0;}
main > .section,.section,.sounds-section,.images-section,.about-section,.site-footer {background:#49343d !important;background-image:none !important;color:#eee4e0 !important;}
.sounds-section .section-heading p,.sound-info .eyebrow,.sound-info p:last-child,.embed-fallback,.section-heading p,.section-note,.image-card figcaption span + span,.about-copy p:last-child,.site-footer > span:nth-child(2) {color:#d0c0c3 !important;}
.sound-item,.bandcamp-embed,.site-footer {border-color:rgba(241,225,222,.22) !important;}
.sound-art {background:transparent !important;}
.image-grid {display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:clamp(52px,6vw,96px) clamp(28px,5vw,76px) !important;max-width:1120px !important;align-items:start !important;}
.image-grid .image-card,.image-grid .image-card:nth-child(5n + 3) {grid-column:auto !important;width:100% !important;max-width:500px !important;margin:0 !important;justify-self:stretch !important;align-self:start !important;}
/* Restrained editorial rhythm: shifts in size and alignment, never a rigid checkerboard. */
.image-grid .image-card:nth-child(4n + 1) {width:92% !important;justify-self:start !important;}
.image-grid .image-card:nth-child(4n + 2) {width:84% !important;justify-self:end !important;margin-top:clamp(24px,4vw,64px) !important;}
.image-grid .image-card:nth-child(4n + 3) {width:96% !important;justify-self:end !important;margin-top:clamp(6px,2vw,28px) !important;}
.image-grid .image-card:nth-child(4n) {width:88% !important;justify-self:start !important;margin-top:clamp(36px,6vw,90px) !important;}
.image-open img {width:100%;height:auto;max-height:none !important;object-fit:contain;filter:none !important;}
@media(max-width:760px) {
 .image-grid {grid-template-columns:minmax(0,1fr) !important;gap:clamp(34px,8vw,58px) !important;max-width:520px !important;}
 .image-grid .image-card,.image-grid .image-card:nth-child(5n + 3),.image-grid .image-card:nth-child(4n + 1),.image-grid .image-card:nth-child(4n + 2),.image-grid .image-card:nth-child(4n + 3),.image-grid .image-card:nth-child(4n) {grid-column:1 !important;width:92% !important;max-width:100% !important;margin-top:0 !important;}
 .image-grid .image-card:nth-child(odd) {justify-self:start !important;}
 .image-grid .image-card:nth-child(even) {justify-self:end !important;width:86% !important;}
}