/* Shoebox styles. style.css is the base (and the Pro look); this file adds the
   highlights + album covers and the three other directions, each scoped to
   :root[data-theme=...]. The theme is set in <head> before paint. */

/* ===================== Showcase: highlights + album covers ===================== */
.hero { position: relative; margin: 18px 22px 6px; height: clamp(220px, 34vh, 360px); border-radius: var(--r-lg); overflow: hidden; background: var(--tile); }
.hero[hidden], .albums[hidden] { display: none; }
.hero-slides, .slide { position: absolute; inset: 0; margin: 0; }
.slide { opacity: 0; transition: opacity 1.1s var(--ease); cursor: pointer; }
.slide.on { opacity: 1; z-index: 1; }
.hero-img { position: absolute; inset: 0; overflow: hidden; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 8s linear; }
.slide.on .hero-img img { transform: scale(1); }   /* slow drift while a slide is up */
.slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.08) 60%), linear-gradient(transparent 50%, rgba(0,0,0,.45));
}
.slide figcaption { position: absolute; left: 26px; bottom: 24px; right: 40%; z-index: 2; color: #fff; }
.eyebrow { font-size: 12.5px; font-weight: 500; opacity: .85; }
.slide h2 {
  margin: 10px 0 6px; font-size: clamp(18px, 2.2vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.slide p { margin: 0; font-size: 12.5px; opacity: .75; }
.slide.on figcaption > * { animation: capin .9s var(--ease) both; }
.slide.on figcaption h2 { animation-delay: .08s; }
.slide.on figcaption p { animation-delay: .16s; }
@keyframes capin { from { opacity: 0; transform: translateY(10px); } }
.hero-dots { position: absolute; right: 18px; bottom: 18px; z-index: 3; display: flex; gap: 6px; }
.hero-dots button { width: 18px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgba(255,255,255,.35); transition: background .3s, width .3s; }
.hero-dots button.on { width: 30px; background: #fff; }

.albums { margin: 16px 22px 0; }
.albums-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.albums-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.albums-head span { font: 400 11px var(--mono); color: var(--muted); }
.albums-row { display: grid; grid-auto-flow: column; grid-auto-columns: 176px; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.acard { display: grid; gap: 8px; padding: 0; border: 0; background: transparent; text-align: left; color: inherit; scroll-snap-align: start; white-space: normal; align-content: start; }
.acard:hover { background: transparent; }
.acover { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--tile); }
.acover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.ameta { min-width: 0; }
.ameta b { display: block; font-weight: 550; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ameta small { font: 400 10.5px var(--mono); color: var(--muted); }

/* style picker */
.stylepick { position: relative; }
.stylemenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 272px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow);
  animation: rise .18s var(--ease);
}
.stylemenu[hidden] { display: none; }
.sm-h { font-size: 11.5px; font-weight: 500; color: var(--muted); padding: 8px 10px 6px; }
.sm-item { width: 100%; justify-content: flex-start; gap: 12px; border: 0; background: transparent; padding: 8px 10px; text-align: left; white-space: normal; }
.sm-item:hover { background: rgba(127,127,127,.1); border: 0; }
.sm-item.on { background: rgba(127,127,127,.16); }
.sm-item b { display: block; color: var(--text); font-weight: 600; font-size: 12.5px; }
.sm-item small { color: var(--muted); font-size: 11.5px; }
.sw { display: grid; grid-template-columns: repeat(3, 10px); border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px rgba(127,127,127,.35); flex: none; }
.sw i { height: 26px; }

@media (max-width: 760px) {
  .hero { margin: 10px 8px 4px; height: 230px; border-radius: 10px; }
  .slide figcaption { left: 16px; right: 16px; bottom: 18px; }
  .albums { margin: 12px 8px 0; }
  .albums-row { grid-auto-columns: 132px; gap: 8px; }
  .stylemenu { position: fixed; left: 12px; right: 12px; top: 60px; width: auto; }
}

/* ===================== PRO: the base look, denser and sharper ===================== */
:root[data-theme="pro"] .grid { gap: 2px; }
:root[data-theme="pro"] .tile { border-radius: 2px; }

/* ===================== CINEMATIC: black, edge to edge, glass, photo-tinted ===================== */
:root[data-theme="cinematic"] {
  --bg: #000; --bg-2: #050506; --panel: rgba(28,28,34,.78); --panel-2: rgba(40,40,48,.85);
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.13); --tile: #0d0d10;
  --accent: #ffffff; --amb: 60, 70, 90;
}
:root[data-theme="cinematic"] body {
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(var(--amb), .38), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(var(--amb), .14), transparent 60%),
    #000;
}
:root[data-theme="cinematic"] .side {
  background: rgba(10,10,12,.55); border-right-color: rgba(255,255,255,.06);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
}
:root[data-theme="cinematic"] .top {
  background: rgba(0,0,0,.35); border-bottom-color: transparent;
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
}
:root[data-theme="cinematic"] .content { padding-left: 0; padding-right: 0; }
:root[data-theme="cinematic"] .month {
  margin: 0; padding: 26px 22px 12px; background: linear-gradient(rgba(0,0,0,.72), transparent);
  font-size: 20px; font-weight: 600; letter-spacing: -.02em;
}
:root[data-theme="cinematic"] .grid { gap: 1px; }
:root[data-theme="cinematic"] .tile { border-radius: 0; }
:root[data-theme="cinematic"] .hero { margin: 0; height: min(68vh, 640px); border-radius: 0; }
:root[data-theme="cinematic"] .slide::after { background: linear-gradient(transparent 35%, rgba(0,0,0,.92)), linear-gradient(90deg, rgba(0,0,0,.45), transparent 55%); }
:root[data-theme="cinematic"] .slide figcaption { left: 40px; bottom: 64px; right: 35%; }
:root[data-theme="cinematic"] .slide h2 { font-size: clamp(26px, 3.6vw, 48px); font-weight: 650; letter-spacing: -.035em; line-height: 1.05; -webkit-line-clamp: 3; }
:root[data-theme="cinematic"] .slide p { font-size: 14px; }
:root[data-theme="cinematic"] .hero-dots { right: 40px; bottom: 68px; }
:root[data-theme="cinematic"] .albums { margin: -36px 0 0; padding: 0 22px; position: relative; z-index: 2; }
:root[data-theme="cinematic"] .albums-head h3 { font-size: 15px; }
:root[data-theme="cinematic"] .albums-row { grid-auto-columns: 236px; }
:root[data-theme="cinematic"] .acard { position: relative; }
:root[data-theme="cinematic"] .acover { aspect-ratio: 16 / 10; border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.6); }
:root[data-theme="cinematic"] .acover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(transparent 45%, rgba(0,0,0,.78)); }
:root[data-theme="cinematic"] .ameta { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
:root[data-theme="cinematic"] .ameta b { color: #fff; font-size: 13.5px; }
:root[data-theme="cinematic"] .ameta small { color: rgba(255,255,255,.75); }
:root[data-theme="cinematic"] button.primary { background: #fff; border-color: #fff; color: #000; }
:root[data-theme="cinematic"] .ai { background: rgba(255,255,255,.04); }
:root[data-theme="cinematic"] .mark { background: linear-gradient(135deg, #fff, #b9bcc6); box-shadow: 3px -3px 0 -1px #3a3b42, 6px -6px 0 -2px #222328; }
@media (max-width: 760px) {
  :root[data-theme="cinematic"] .hero { height: 58vh; }
  :root[data-theme="cinematic"] .slide figcaption { left: 18px; right: 18px; bottom: 46px; }
  :root[data-theme="cinematic"] .hero-dots { right: 18px; bottom: 22px; }
  :root[data-theme="cinematic"] .albums { padding: 0 10px; margin-top: -20px; }
  :root[data-theme="cinematic"] .albums-row { grid-auto-columns: 180px; }
  :root[data-theme="cinematic"] .month { padding: 18px 14px 10px; font-size: 17px; }
}

/* ===================== EDITORIAL: warm paper-dark, Fraunces, magazine spreads ===================== */
:root[data-theme="editorial"] {
  --bg: #14110e; --bg-2: #18140f; --panel: #1f1a14; --panel-2: #29221a;
  --line: #2c251c; --line-2: #3a3126; --text: #f0e7d8; --text-2: #cfc3ae; --muted: #8f8471;
  --accent: #e2c48f; --tile: #1e1913; --r: 3px; --r-lg: 4px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
}
:root[data-theme="editorial"] .brand { font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: -.01em; }
:root[data-theme="editorial"] .top h2 { font-family: var(--serif); font-weight: 400; font-size: 20px; letter-spacing: -.01em; min-width: 150px; }
:root[data-theme="editorial"] .mark { background: linear-gradient(135deg, #f0d9a8, #b98f4e); box-shadow: 3px -3px 0 -1px #4a3c28, 6px -6px 0 -2px #2f271b; }
:root[data-theme="editorial"] .content { padding: 4px 40px 80px; }
:root[data-theme="editorial"] .month {
  margin: 0 -40px; padding: 40px 40px 16px; font-family: var(--serif); font-weight: 300; font-size: 38px;
  letter-spacing: -.02em; line-height: 1; background: linear-gradient(var(--bg) 80%, transparent);
}
:root[data-theme="editorial"] .month span { font-family: var(--serif); font-size: 15px; font-weight: 300; color: var(--muted); align-self: flex-end; padding-bottom: 5px; }
:root[data-theme="editorial"] .grid { gap: 10px; }
:root[data-theme="editorial"] .tile { border-radius: 1px; }
:root[data-theme="editorial"] .side h3, :root[data-theme="editorial"] .sm-h { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text-2); }
:root[data-theme="editorial"] .hero { margin: 32px 40px 8px; height: auto; background: transparent; border-radius: 0; overflow: visible; }
:root[data-theme="editorial"] .hero-slides { position: relative; inset: auto; height: clamp(300px, 46vh, 480px); }
:root[data-theme="editorial"] .slide { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: center; }
:root[data-theme="editorial"] .slide::after { display: none; }
:root[data-theme="editorial"] .hero-img { position: relative; inset: auto; height: 100%; border-radius: 2px; }
:root[data-theme="editorial"] .slide figcaption { position: static; color: var(--text); }
:root[data-theme="editorial"] .eyebrow { color: var(--accent); opacity: 1; font-family: var(--serif); font-style: italic; font-size: 16px; font-weight: 300; }
:root[data-theme="editorial"] .slide h2 {
  font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3vw, 42px); line-height: 1.12;
  letter-spacing: -.015em; margin: 16px 0 14px; -webkit-line-clamp: 5;
}
:root[data-theme="editorial"] .slide p { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--text-2); opacity: 1; }
:root[data-theme="editorial"] .hero-dots { position: static; margin-top: 18px; justify-content: flex-end; }
:root[data-theme="editorial"] .hero-dots button { background: var(--line-2); }
:root[data-theme="editorial"] .hero-dots button.on { background: var(--accent); }
:root[data-theme="editorial"] .albums { margin: 36px 40px 0; padding-top: 26px; border-top: 1px solid var(--line); }
:root[data-theme="editorial"] .albums-head h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -.01em; }
:root[data-theme="editorial"] .albums-row { grid-auto-columns: 220px; gap: 22px; }
:root[data-theme="editorial"] .acover { aspect-ratio: 4 / 5; border-radius: 1px; }
:root[data-theme="editorial"] .ameta b { font-family: var(--serif); font-weight: 400; font-size: 17px; white-space: normal; }
:root[data-theme="editorial"] .ameta small { font-family: var(--serif); font-style: italic; font-size: 13px; }
:root[data-theme="editorial"] button.primary { background: var(--accent); border-color: var(--accent); color: #1a140c; }
:root[data-theme="editorial"] .login h1 { font-family: var(--serif); font-weight: 400; font-size: 26px; }
@media (max-width: 760px) {
  :root[data-theme="editorial"] .content { padding: 0 6px 80px; }
  :root[data-theme="editorial"] .month { margin: 0 -6px; padding: 26px 16px 12px; font-size: 28px; }
  :root[data-theme="editorial"] .grid { gap: 4px; }
  :root[data-theme="editorial"] .hero { margin: 18px 16px 4px; }
  :root[data-theme="editorial"] .hero-slides { height: 440px; }
  :root[data-theme="editorial"] .slide { grid-template-columns: 1fr; grid-template-rows: 250px auto; gap: 16px; align-items: start; }
  :root[data-theme="editorial"] .albums { margin: 26px 16px 0; }
  :root[data-theme="editorial"] .albums-row { grid-auto-columns: 150px; gap: 14px; }
}

/* ===================== GALLERY: white walls, light type, matted prints ===================== */
:root[data-theme="gallery"] {
  color-scheme: light;
  --bg: #eceef0; --bg-2: #e6e8eb; --panel: #ffffff; --panel-2: #f5f6f7;
  --line: #d9dde1; --line-2: #c9ced4; --text: #16181b; --text-2: #3b3f45; --muted: #7d838b;
  --accent: #16181b; --tile: #dfe2e6; --danger: #b23a32;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 40px rgba(0,0,0,.08);
}
:root[data-theme="gallery"] .side { background: #f4f5f6; }
:root[data-theme="gallery"] .top { background: rgba(236,238,240,.86); }
:root[data-theme="gallery"] .brand { font-weight: 300; letter-spacing: .02em; font-size: 16px; }
:root[data-theme="gallery"] .mark { background: #1b1b1b; box-shadow: 3px -3px 0 -1px #bdb8ad, 6px -6px 0 -2px #d9d5cb; }
:root[data-theme="gallery"] .top h2 { font-weight: 300; font-size: 18px; letter-spacing: .02em; }
:root[data-theme="gallery"] .nav.on { background: #fff; box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="gallery"] .nav:hover { background: rgba(0,0,0,.04); }
:root[data-theme="gallery"] .nav.on > span:first-child .ic { color: var(--text); }
:root[data-theme="gallery"] .content { padding: 4px 44px 90px; }
:root[data-theme="gallery"] .month {
  margin: 0 -44px; padding: 44px 44px 20px; font-weight: 300; font-size: 22px; letter-spacing: -.01em;
  background: linear-gradient(var(--bg) 80%, rgba(236,238,240,0));
}
:root[data-theme="gallery"] .grid, :root[data-theme="gallery"] .grid.natural { gap: 26px; }
:root[data-theme="gallery"] .tile {
  border-radius: 0; background: #fff; padding: 9%; overflow: visible;
  box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 8px 22px rgba(20,30,45,.10);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
:root[data-theme="gallery"] .grid.natural .tile { padding: 8px; }
:root[data-theme="gallery"] .tile img { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
:root[data-theme="gallery"] .tile:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 18px 40px rgba(20,30,45,.16); }
:root[data-theme="gallery"] .tile:hover img.in { transform: none; }
:root[data-theme="gallery"] .tile::before, :root[data-theme="gallery"] .tile .cap { display: none; }
:root[data-theme="gallery"] .tile.sel { box-shadow: 0 0 0 2px #1b1b1b, 0 8px 22px rgba(20,30,45,.12); }
:root[data-theme="gallery"] .tile.sel img { transform: none; }
:root[data-theme="gallery"] .tile.sel .tick { background: #1b1b1b; border-color: #1b1b1b; }
:root[data-theme="gallery"] .hero { margin: 40px auto 10px; width: min(860px, calc(100% - 88px)); height: auto; background: transparent; overflow: visible; border-radius: 0; }
:root[data-theme="gallery"] .hero-slides { position: relative; inset: auto; height: clamp(320px, 50vh, 520px); }
:root[data-theme="gallery"] .slide { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; }
:root[data-theme="gallery"] .slide::after { display: none; }
:root[data-theme="gallery"] .hero-img {
  position: relative; inset: auto; height: 100%; aspect-ratio: 3 / 2; max-width: 100%; background: #fff; padding: 22px;
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 30px 60px rgba(20,30,45,.16);
}
:root[data-theme="gallery"] .hero-img img { transform: none !important; transition: none; }
:root[data-theme="gallery"] .slide figcaption { position: static; color: var(--text); text-align: center; padding-top: 20px; }
:root[data-theme="gallery"] .eyebrow { color: var(--muted); opacity: 1; font-weight: 400; }
:root[data-theme="gallery"] .slide h2 { font-weight: 300; font-size: 17px; letter-spacing: .01em; margin: 8px auto 4px; max-width: 560px; }
:root[data-theme="gallery"] .slide p { color: var(--muted); opacity: 1; font-size: 12px; }
:root[data-theme="gallery"] .hero-dots { position: static; justify-content: center; margin-top: 16px; }
:root[data-theme="gallery"] .hero-dots button { background: #cfcac0; }
:root[data-theme="gallery"] .hero-dots button.on { background: #1b1b1b; }
:root[data-theme="gallery"] .albums { margin: 44px 44px 0; }
:root[data-theme="gallery"] .albums-head { justify-content: center; margin-bottom: 22px; }
:root[data-theme="gallery"] .albums-head h3 { font-weight: 300; font-size: 22px; letter-spacing: -.01em; }
:root[data-theme="gallery"] .albums-row { grid-auto-columns: 200px; gap: 30px; padding: 6px 4px 14px; justify-content: safe center; }
:root[data-theme="gallery"] .acover { background: #fff; padding: 12px; border-radius: 0; box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 8px 22px rgba(20,30,45,.10); }
:root[data-theme="gallery"] .acard { text-align: center; }
:root[data-theme="gallery"] .acard:hover .acover img { transform: none; }
:root[data-theme="gallery"] .ameta b { font-weight: 400; }
:root[data-theme="gallery"] button.primary { background: #1b1b1b; border-color: #1b1b1b; color: #fff; }
:root[data-theme="gallery"] button.primary:hover { background: #000; color: #fff; }
:root[data-theme="gallery"] .icon-btn:hover { background: rgba(0,0,0,.05); }
:root[data-theme="gallery"] .ai { background: #fff; }
:root[data-theme="gallery"] .up { background: rgba(255,255,255,.92); }
:root[data-theme="gallery"] .seg button.on { background: #fff; }
:root[data-theme="gallery"] .login { background: radial-gradient(900px 500px at 50% -10%, rgba(0,0,0,.04), transparent 60%), var(--bg); }
@media (max-width: 760px) {
  :root[data-theme="gallery"] .content { padding: 0 14px 80px; }
  :root[data-theme="gallery"] .month { margin: 0 -14px; padding: 26px 14px 14px; }
  :root[data-theme="gallery"] .grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  :root[data-theme="gallery"] .tile { padding: 7px; }
  :root[data-theme="gallery"] .hero { width: calc(100% - 28px); margin-top: 22px; }
  :root[data-theme="gallery"] .hero-slides { height: 340px; }
  :root[data-theme="gallery"] .hero-img { padding: 10px; aspect-ratio: auto; width: 100%; }
  :root[data-theme="gallery"] .albums { margin: 30px 14px 0; }
  :root[data-theme="gallery"] .albums-row { grid-auto-columns: 140px; gap: 16px; }
}

/* meta written as separate parts, spaced rather than joined with dots */
.parts > span + span { margin-left: 12px; }
.parts > span + span::before { content: ""; display: inline-block; width: 1px; height: .8em; background: currentColor; opacity: .35; margin-right: 12px; vertical-align: -1px; }

.sm-link { display: block; margin: 4px 4px 2px; padding: 9px 10px; border-top: 1px solid var(--line); color: var(--text-2); text-decoration: none; font-size: 12.5px; font-weight: 500; }
.sm-link:hover { color: var(--text); }

/* shown inside the phone on /devices: leave room for the status bar and island */
:root[data-frame="phone"] .top { padding-top: 40px; }