/* =====================================================================
   theme.css — re-skins the gallery to the mazidavid.com palette
   ---------------------------------------------------------------------
   Loaded AFTER site.css, so it only overrides. site.css and gallery.js
   (your admin/build workflow) are untouched; delete this file to undo.
     black #0D0D0B · gold #D1A90A · white · ripe olive #556B2F · rose (rare)
   Also makes everything rounder and less formal.
   ===================================================================== */
:root{
  --bg:#0D0D0B;
  --panel:#161613;
  --panel-strong:#1E1E1A;
  --ink:#FFFFFF;
  --muted:#A8A69C;
  --line:#2A2A26;
  --accent:#D1A90A;          /* gold */
  --accent-ink:#0D0D0B;
  --olive:#9DB36B;           /* ripe olive, lifted for a black background */
  --rose:#E7A3B5;            /* used once: the hover ring on photos */
}
body{font-family:"Instrument Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif}
h1,h2{font-family:"Fraunces", Georgia, serif; font-weight:500; letter-spacing:-.02em}
h1 em, h1 i{color:var(--accent)}

/* The gallery's own top bar was removed: navigation lives in the floating
   MD menu (eco-nav.js), which also carries the light/dark switch. */

/* rounder everything */
.primary-link,.search-field input,.segmented-control,.segmented-control button,
.tag-groups button,.tag-filters button{border-radius:999px !important}
.primary-link:hover,.primary-link:focus-visible{background:#E6BD1F}
.photo-button,.featured-strip > *,.photo-grid > *,.lightbox-image,.lightbox-stage img{border-radius:22px !important; overflow:hidden}
.lightbox-controls button{border-radius:999px !important}

/* playful hover: a slight lift + tilt, like picking up a print */
.photo-button{transition:transform .25s ease, box-shadow .25s ease}
.photo-grid > *:nth-child(odd) .photo-button:hover{transform:rotate(-1deg) translateY(-4px)}
.photo-grid > *:nth-child(even) .photo-button:hover{transform:rotate(1deg) translateY(-4px)}
.photo-button:hover,.photo-button:focus-visible{box-shadow:0 0 0 2px var(--rose), 0 24px 50px -20px rgba(0,0,0,.8)}

/* tags pick up the olive */
.photo-tags span,.detail-tags span{border-radius:999px}
.segmented-control .is-active{background:var(--accent) !important; color:var(--accent-ink) !important}

/* footer links row */
.site-footer{display:flex; gap:18px; flex-wrap:wrap; justify-content:center}
.site-footer a:hover{color:var(--accent)}

/* ---------- LIGHT MODE (from the MD menu; dark stays the default) ----------
   Photos sit on warm white. The lightbox stays dark on purpose: photos
   always look best on black. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FAF9F5; --panel:#FFFFFF; --panel-strong:#F3F1EA; --ink:#0D0D0B; --muted:#5E5E57; --line:#E6E4DC;
  --olive:#556B2F; --shadow:0 18px 50px rgba(13,13,11,.14);
}
:root[data-theme="light"] body{background:var(--bg)}
:root[data-theme="light"] h1 em,:root[data-theme="light"] h1 i{color:#7A6000}
:root[data-theme="light"] .eyebrow{color:#7A6000}
:root[data-theme="light"] .photo-button{border-color:var(--line)}
:root[data-theme="light"] .photo-overlay{color:#fff}
:root[data-theme="light"] .segmented-control .is-active{background:#D1A90A !important; color:#0D0D0B !important}
:root[data-theme="light"] .lightbox{--ink:#f2f0ec; --muted:#aaa49a; --panel:#181818; --panel-strong:#202020; --line:#2f2d29; color:#f2f0ec}
:root[data-theme="light"] .detail-panel{--ink:#f2f0ec; --muted:#aaa49a; --panel:#181818; --line:#2f2d29; color:#f2f0ec}
/* room at the top now the header is gone */
main{padding-top:18px}
.site-footer{padding-bottom:90px}

/* ---------- shoots, nested tags, edits ---------- */
.date-header h2 .group-sub{font:500 .55em "Instrument Sans",system-ui,sans-serif; color:var(--accent); letter-spacing:0}
.tag-filters .crumb{font-weight:600}
.tag-filters .crumb-sep{align-self:center; color:var(--muted); padding:0 2px}
.photo-button.is-edit::after{content:"edited"; position:absolute; top:10px; left:10px; font:600 10.5px "IBM Plex Mono",monospace; padding:2px 8px; border-radius:999px; background:rgba(13,13,11,.7); color:#D1A90A; pointer-events:none}
.lightbox-controls .before-after{border:1px solid rgba(255,255,255,.25); background:rgba(20,20,20,.78); color:#f2f0ec; border-radius:999px; padding:0 14px; height:40px; font:600 13.5px "Instrument Sans",system-ui,sans-serif; cursor:pointer}
.lightbox-controls .before-after:hover{border-color:#D1A90A; color:#D1A90A}
.date-header{flex-wrap:wrap; gap:6px 16px}
.shoot-link{font:600 14px "Instrument Sans",system-ui,sans-serif; color:var(--accent); text-decoration:none; margin-left:auto; align-self:center}
.shoot-link:hover{text-decoration:underline}
.shoot-banner{display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; margin:0 clamp(18px,4vw,54px); padding:22px 24px; border-radius:22px; border:1px solid var(--accent); background:var(--panel)}
.shoot-banner h2{margin:4px 0 4px; font-size:clamp(28px,4vw,44px)}
.shoot-banner p{margin:0; color:var(--muted)}
.shoot-banner .shoot-notes{margin-top:6px; color:var(--ink)}
.shoot-banner button{border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:999px; padding:9px 16px; font:600 14px "Instrument Sans",system-ui,sans-serif; cursor:pointer}
.shoot-banner button:hover{border-color:var(--accent)}
.detail-shoot{margin:8px 0 0; color:var(--muted)}
.detail-shoot a{color:#D1A90A; font-weight:600; text-decoration:none}
:root[data-theme="light"] .shoot-link{color:#7A6000}
.date-header h2{order:1} .date-header .photo-count{order:2} .date-header .shoot-link{order:3}
.date-header h2 .group-sub{color:var(--muted)}
/* (i) panel: shoot + tag links */
.detail-tags span{display:inline-flex; align-items:center; gap:2px}
.detail-tags a,.detail-shoot a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(209,169,10,.5)}
.detail-tags a:hover,.detail-shoot a:hover{color:#D1A90A; border-color:#D1A90A}
.detail-tags i{font-style:normal; opacity:.5}
.photo-button.is-edit::after{display:none}

/* ---------- PHONE: compact grid ----------
   site.css made the phone grid ONE photo per row, so you scrolled past
   giant tiles. Now: 3 small tiles per row (2 on very narrow phones),
   tight gaps, smaller corners, no hover tilt, titles hidden on the tile
   (they're still in the viewer). */
@media (max-width:760px){
  .photo-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:4px !important}
  .photo-grid > *, .photo-grid .photo-button{border-radius:8px !important}
  .photo-grid .photo-button{aspect-ratio:3/4}
  .photo-grid > * .photo-button:hover{transform:none !important}
  .photo-grid .photo-overlay{display:none}
  .featured-strip{grid-auto-columns:minmax(150px,44vw) !important; gap:8px !important}
  .featured-strip > *, .featured-strip .photo-button{border-radius:14px !important}
  .eyebrow{display:none}
}
@media (max-width:340px){ .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important} .eyebrow{display:none} }

/* Round gold-outline buttons, same size as the theme toggle */
.nudges{display:flex; gap:8px}
.nudge{width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
       background:transparent; color:var(--ink); cursor:pointer; font-size:18px}
.nudge:hover{border-color:var(--accent)}
.nudge:disabled{opacity:.3; cursor:default}   /* greyed out at either end */