/* ============================================================
   Between2Waves — "Gilded Undertow" (locked 07/09/26)
   Tokens: bg #140a10 · gold #c9a44a · rust #a4552f · bone #e8dfcd
   Jewels: silver #d9dde3 · emerald #6fa08b · amethyst #8d7ba6 · ruby #a65b66
   Type: Georgia serif display + Courier mono labels
   ============================================================ */
:root{
  --abyss:#140a10;
  --murk:#1e1018;
  --gold:#c9a44a;
  --gold-dim:#8a6f33;
  --rust:#a4552f;
  --bone:#e8dfcd;
  --faded:#a8987f;
  --silver:#d9dde3;
  --emerald:#6fa08b;
  --amethyst:#8d7ba6;
  --ruby:#a65b66;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--abyss);color:var(--bone);font-family:Georgia,'Times New Roman',serif;line-height:1.65;overflow-x:hidden;position:relative}
::selection{background:var(--amethyst);color:var(--abyss)}
.mono{font-family:"Courier New",Courier,monospace}
img{max-width:100%;height:auto}

/* ---- ink starfield (page-anchored, scrolls with content) ---- */
.stars{position:absolute;inset:0;z-index:0;pointer-events:none;background-size:1000px 780px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='780' viewBox='0 0 1000 780'><g fill='none' stroke-linecap='round'><g stroke='%23e8dfcd' stroke-opacity='.24' stroke-width='1.3' transform='translate(140,120) rotate(12)'><path d='M0 -7 Q1 -1 0 6 M-6 -3 Q0 -1 5 3 M-5 4 Q0 1 6 -4 M-2 7 Q0 1 2 -6'/></g><g stroke='%23e8dfcd' stroke-opacity='.18' stroke-width='1.5' transform='translate(620,80) rotate(-24) scale(.8)'><path d='M0 -5 Q-1 0 1 6 M-6 0 Q0 1 6 1 M-4 -4 Q0 0 4 5 M4 -5 Q1 0 -3 4'/></g><g stroke='%23e8dfcd' stroke-opacity='.22' stroke-width='1.2' transform='translate(890,300) rotate(8)'><path d='M0 -8 Q1 -2 0 8 M-7 0 Q-1 1 7 0 M-5 -5 Q0 0 5 5 M-5 5 Q0 0 5 -5'/></g><g stroke='%23e8dfcd' stroke-opacity='.2' stroke-width='1.3' transform='translate(320,420) rotate(30) scale(.9)'><path d='M0 -7 Q1 -1 0 6 M-6 -3 Q0 -1 5 3 M-5 4 Q0 1 6 -4 M-2 7 Q0 1 2 -6'/></g><g stroke='%23e8dfcd' stroke-opacity='.2' stroke-width='1.2' transform='translate(60,600) rotate(-15) scale(1.1)'><path d='M0 -5 Q-1 0 1 6 M-6 0 Q0 1 6 1 M-4 -4 Q0 0 4 5 M4 -5 Q1 0 -3 4'/></g><g stroke='%23e8dfcd' stroke-opacity='.18' stroke-width='1.4' transform='translate(740,680) rotate(20) scale(.75)'><path d='M0 -8 Q1 -2 0 8 M-7 0 Q-1 1 7 0 M-5 -5 Q0 0 5 5 M-5 5 Q0 0 5 -5'/></g><g stroke='%23c9a44a' stroke-opacity='.2' stroke-width='1.3' transform='translate(480,240) rotate(-10) scale(.85)'><path d='M0 -8 Q1 -2 0 8 M-7 0 Q-1 1 7 0 M-5 -5 Q0 0 5 5 M-5 5 Q0 0 5 -5'/></g></g></svg>")}

/* ---- shared chrome ---- */
.mosaic-band{display:block;width:100%;height:24px;border-bottom:1px solid var(--gold-dim)}
header.site{display:flex;justify-content:space-between;align-items:baseline;padding:1.8rem 2.8rem;flex-wrap:wrap;gap:1rem;border-bottom:1px dashed #3a2430;position:relative;z-index:1}
.wordmark{font-size:1.6rem;letter-spacing:.32em;color:var(--gold);text-transform:uppercase;text-decoration:none}
.wordmark span{color:var(--bone);font-style:italic}
nav.site a{color:var(--bone);text-decoration:none;margin-left:1.7rem;font-size:.78rem;letter-spacing:.22em}
nav.site a::before{content:"[ "}
nav.site a::after{content:" ]"}
nav.site a:hover{color:var(--gold)}
nav.site a.here{color:var(--gold)}
main,section,footer.site,.ticker{position:relative;z-index:1}
footer.site{padding:2.4rem 2.8rem;border-top:1px dashed #3a2430;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--faded);font-size:.8rem}
footer.site a{color:var(--gold);text-decoration:none}

/* ---- ornate rules & headings ---- */
.rule{display:flex;align-items:center;gap:1.2rem;margin-bottom:2.2rem}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--gold-dim)}
.rule b{color:var(--rust);letter-spacing:.4em;text-transform:uppercase;font-weight:normal;font-size:.78rem}
section.pad{padding:3.4rem 2.8rem}

/* ---- home hero ---- */
.crest{position:relative;height:72px;pointer-events:none;z-index:0}
.crest svg{position:absolute;top:0;left:0;width:100%;height:460px;display:block}
.hero{padding:4.5rem 2.8rem 3.5rem;position:relative;min-height:58vh}
.hero h1{font-size:2.7rem;font-weight:normal;font-style:italic;max-width:24ch;line-height:1.28}
.hero h1 em{color:var(--gold);font-style:normal}
.hero h1 .tilt{display:inline-block;transform:rotate(-2deg) translateY(2px);color:var(--silver);font-style:normal}
.hero p{margin-top:1.4rem;max-width:44ch;color:var(--faded);font-size:.92rem}
.cta{display:inline-block;margin-top:2rem;color:var(--gold);border:1px solid var(--gold);padding:.75rem 1.5rem;text-decoration:none;letter-spacing:.22em;text-transform:uppercase;font-size:.76rem}
.cta:hover{background:var(--gold);color:var(--abyss)}
.drift{position:absolute;right:2.8rem;top:3.4rem;width:min(340px,38vw);transform:rotate(1.6deg);transition:transform 1.1s ease}
.drift:hover{transform:rotate(-.4deg) translateY(-6px)}
.relic{padding:12px;background:repeating-conic-gradient(from 45deg,var(--gold-dim) 0 25%,transparent 0 50%) 0 0/12px 12px}
.relic img{width:100%;display:block;filter:grayscale(.45) sepia(.18) contrast(1.05);transition:filter .6s}
.drift:hover .relic img{filter:none}
.drift figcaption{margin-top:.6rem;font-size:.7rem;letter-spacing:.22em;color:var(--faded);text-transform:uppercase}
.drift figcaption b{color:var(--gold);font-weight:normal}

/* ---- ticker ---- */
.ticker{border-top:1px solid var(--gold-dim);border-bottom:1px solid var(--gold-dim);padding:.65rem 0;overflow:hidden;white-space:nowrap;background:var(--murk)}
.ticker span{display:inline-block;padding-left:100%;animation:crawl 24s linear infinite;font-size:.78rem;letter-spacing:.28em;color:var(--gold)}
@keyframes crawl{to{transform:translateX(-100%)}}

/* ---- announcements ---- */
.announce-sec{z-index:2}
.announce li{list-style:none;max-width:62ch;padding:.85rem 0 .85rem 1.2rem;border-left:2px solid var(--gold);margin-bottom:.9rem;color:#cbbfa8;font-size:.95rem}
.announce li:nth-child(3n+1){border-left-color:var(--emerald)}
.announce li:nth-child(3n+2){border-left-color:var(--amethyst)}
.announce li:nth-child(3n){border-left-color:var(--ruby)}
.announce time{display:block;color:var(--gold);font-size:.75rem;letter-spacing:.18em}

/* ---- catalog grid & sea ---- */
.catalog{position:relative;overflow:visible}
.catalog .sea{position:absolute;left:0;right:0;top:-210px;width:100%;height:calc(100% + 210px);pointer-events:none;z-index:0}
.catalog .rule,.catalog .grid{position:relative;z-index:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2rem}
.tile{text-decoration:none;color:var(--bone);background:var(--murk);border:1px solid var(--gold-dim);transition:transform .5s;display:block}
.tile:nth-child(odd){transform:rotate(-1deg)}
.tile:nth-child(even){transform:rotate(.8deg)}
.tile:hover{transform:rotate(0) translateY(-4px);box-shadow:0 0 0 1px var(--silver),0 14px 34px -16px rgba(217,221,227,.35)}
.tile:nth-child(3n+1):hover{border-color:var(--emerald)}
.tile:nth-child(3n+2):hover{border-color:var(--amethyst)}
.tile:nth-child(3n):hover{border-color:var(--ruby)}
.tile .art{aspect-ratio:1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#2a1620}
.tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) sepia(.15);transition:filter .5s}
.tile:hover img{filter:none}
.tile .ph{color:var(--gold-dim);font-style:italic;font-size:.82rem;text-align:center;padding:1rem}
.tile figcaption{padding:.7rem .9rem .85rem;font-size:.88rem}
.tile figcaption i{display:block;color:var(--gold);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-style:normal;margin-top:.2rem}

/* ---- inner pages ---- */
.page-title{padding:3rem 2.8rem 0;font-size:2.1rem;font-weight:normal;font-style:italic}
.page-title em{color:var(--gold);font-style:normal}
.album{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:2.5rem;padding:2.6rem 0;border-bottom:1px dashed #3a2430;align-items:start}
.album:last-child{border-bottom:none}
.album .cover{border:1px solid var(--gold-dim);background:var(--murk)}
.album .cover img{display:block;width:100%;filter:grayscale(.35) sepia(.12);transition:filter .5s}
.album:hover .cover img{filter:none}
.album h3{font-size:1.5rem;font-weight:normal}
.album h3 i{font-style:normal;color:var(--gold);font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;display:block;margin-top:.2rem}
.album ol{margin:1.2rem 0 0 1.4rem;columns:2;column-gap:2.5rem;font-size:.92rem;color:#cbbfa8}
.album ol li{margin-bottom:.3rem;break-inside:avoid}
.album .meta{margin-top:1.2rem;font-size:.75rem;color:var(--faded);letter-spacing:.12em}
.album .embed{margin-top:1.4rem;aspect-ratio:16/9;max-width:560px;border:1px solid var(--gold-dim);background:var(--murk)}
.album .embed iframe{width:100%;height:100%;border:0;display:block}
.copyright-line{font-size:.72rem;color:var(--faded);letter-spacing:.14em;margin-top:.8rem}

/* media page cards */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2rem}
.mcard{background:var(--murk);border:1px solid var(--gold-dim);padding:1.4rem;min-height:170px;display:flex;flex-direction:column;justify-content:space-between}
.mcard b{font-weight:normal;font-size:1.05rem}
.mcard .kind{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.mcard p{font-size:.85rem;color:var(--faded);margin-top:.6rem}
.mcard.coming{border-style:dashed;opacity:.75}

/* about page */
.bio{max-width:68ch;padding:1.4rem 0;border-bottom:1px dashed #3a2430}
.bio:last-child{border-bottom:none}
.bio h3{font-weight:normal;font-size:1.25rem;color:var(--gold)}
.bio .statement{font-style:italic;color:var(--silver);margin:.3rem 0 .7rem;font-size:1.05rem}
.bio p{color:#cbbfa8;font-size:.95rem}
.legal{margin-top:2.5rem;padding:1.4rem;border:1px solid var(--gold-dim);background:var(--murk);max-width:68ch;font-size:.85rem;color:var(--faded)}

@media(max-width:840px){
  .drift{position:static;width:78%;margin:2.6rem auto 0}
  .hero{padding:2.6rem 1.3rem;min-height:0}
  header.site,section.pad,footer.site,.page-title{padding-left:1.3rem;padding-right:1.3rem}
  .hero h1{font-size:2.1rem}
  .album{grid-template-columns:1fr}
  .album ol{columns:1}
}

/* ============================================================
   Phase 4 — lightbox sub-windows & clickable media cards
   ============================================================ */
button.mcard{font:inherit;color:var(--bone);text-align:left;cursor:pointer;width:100%}
.mcard.clickable{transition:transform .4s}
.mcard.clickable:hover{transform:translateY(-4px);border-color:var(--emerald);box-shadow:0 0 0 1px var(--silver),0 14px 34px -16px rgba(217,221,227,.35)}
.mcard.clickable:nth-child(3n+2):hover{border-color:var(--amethyst)}
.mcard.clickable:nth-child(3n):hover{border-color:var(--ruby)}
.art-card{padding:0;overflow:hidden;min-height:0}
.art-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;filter:grayscale(.55) sepia(.15);transition:filter .5s}
.art-card:hover img{filter:none}
.art-card .copyright-line{padding:.6rem .9rem .7rem}

.lightbox{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.lightbox[hidden]{display:none}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(20,10,16,.9);cursor:pointer}
.lightbox-panel{position:relative;background:var(--murk);border:1px solid var(--gold);width:100%;max-width:740px;max-height:88vh;overflow:auto;padding:1.5rem 1.8rem 1.2rem;box-shadow:0 30px 70px -25px rgba(0,0,0,.85)}
.lightbox-close{position:sticky;top:0;float:right;background:var(--abyss);color:var(--gold);border:1px solid var(--gold-dim);padding:.35rem .7rem;cursor:pointer;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.lightbox-close:hover{border-color:var(--ruby);color:var(--bone)}
.lightbox-title{font-size:1.35rem;color:var(--bone);margin:.2rem 0 .9rem;font-weight:normal}
.lightbox-body p{font-size:.92rem;line-height:1.65;color:var(--bone);margin-bottom:.85rem}
.lightbox-body em{color:var(--faded)}
.lightbox-body h3{color:var(--gold);font-weight:normal;margin:1.3rem 0 .7rem;font-size:1.05rem}
.lightbox-body h3 .mono{color:var(--faded);font-size:.7rem;letter-spacing:.2em;margin-left:.6rem}
.lightbox-body img{width:100%;height:auto;display:block;border:1px solid var(--gold-dim)}
.lightbox .copyright-line{margin-top:1rem;border-top:1px dashed var(--gold-dim);padding-top:.7rem}

/* ===== Phase 5b: visible keyboard focus (tokens untouched) ===== */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ===== Code review 07/13/26: honor the OS "reduce motion" setting (tokens untouched).
   Ticker text sits still and readable; hover/appear effects happen instantly instead of gliding. ===== */
@media (prefers-reduced-motion: reduce){
  .ticker span{animation:none;padding-left:0}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}