* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
html {
  height: 100%;
}
html,
body {
  padding: 0;
  margin: 0;
}
body {
  background: #fff;
  color: #444;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: lighter;
  margin-bottom: 1em;
}
a {
  color: #444;
  text-decoration: none;
}
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}
.noselect {
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#container {
  padding: 2em;
}
header {
  font-size: 1.8em;
  margin-bottom: 1.1em;
}
h1 {
  display: inline-block;
  font-weight: bold;
}
h1 a {
  color: #444;
}
footer {
  color: #666;
  font-size: 0.9em;
  font-style: italic;
  margin-top: 3em;
}
footer a {
  color: #17baef;
}
nav.breadcrumbs {
  border-bottom: 1px solid #ddd;
  font-size: 1.2em;
  margin-bottom: 2em;
  padding: 0em 0em 0.8em 0.1em;
}
#albums,
#media {
  margin: 0em;
}
#albums a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  margin-right: 2em;
  margin-bottom: 3em;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 220px;
  background-size: cover;
  border-radius: 8px;
}
#albums .info {
  position: absolute;
  padding: 1em;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 0.9em;
  line-height: 1.2em;
  margin: 0;
  width: 100%;
  font-weight: bold;
  bottom: 0;
}
#albums h3 {
  font-size: 1.3em;
  margin-bottom: 0.2em;
}
#media li {
  float: left;
  margin-right: 0.4em;
  margin-bottom: 0.2em;
  position: relative;
  cursor: zoom-in;
}
#media a {
  display: inline-block;
}
#media img {
  border-radius: 8px;
  display: block;
}
#media li .video-overlay {
  left: 50%;
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  position: absolute;
  top: 50%;
  width: 48px;
}
@media only screen and (max-width: 360px) {
  #albums a {
    width: 100%;
    height: 190px;
  }
}
nav.pagination {
  color: #666;
  display: inline-block;
  font-size: 1em;
  margin-top: 2em;
  padding: 0em 0em 0.5em 0em;
}
nav.pagination .page {
  margin-right: 0.2em;
}
nav.pagination .page.current {
  font-weight: bold;
}
nav.pagination a {
  color: #666;
}
#zip {
  color: #666;
  margin-bottom: 2em;
}
#zip a {
  color: #3399ff;
}
/* ====== Darroll Walsh Brand (Light + Black & Gold) ====== */
:root{
  --bg:#f7f7f8;
  --panel:#ffffff;
  --text:#111111;
  --muted:#5f5f5f;
  --gold:#c9a227;
  --gold-2:#e6c767;
  --ring:rgba(201,162,39,.35);
  --shadow:0 10px 34px rgba(0,0,0,.10);
  --radius:18px;
  --maxw:1200px;
  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Base */
html,body{height:100%}
body{
  margin:0; color:var(--text); font-family:var(--font);
  background: radial-gradient(1400px 900px at 90% -10%, #fff 0%, var(--bg) 55%), var(--bg);
}
.container, .content, main, .albums, .album, .navbar, .footer, .photos, .page, .grid, .cards{
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
}

/* Top bar (works with cards theme .navbar) */
.navbar{
  background:transparent; border:none; box-shadow:none; padding:20px 0 8px;
}
.navbar__brand, .navbar__title, .title, h1, .page__title{
  letter-spacing:-0.01em; font-weight:800;
}
.navbar__brand::before{
  content:"DW";
  display:inline-grid; place-items:center;
  width:40px; height:40px; margin-right:10px;
  border-radius:10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color:#111; font-weight:800; font-size:0.95rem;
  box-shadow:var(--shadow);
}

/* Links & buttons */
a{ color:#111; text-underline-offset:2px }
a:hover{ opacity:.9 }
.button, .btn, button{
  background:#111; color:#fff; border:0; border-radius:12px; padding:10px 14px; font-weight:700;
  box-shadow:var(--shadow);
}
.button--secondary, .btn--secondary{
  background:#fff; color:#111; border:1px solid #e6e6e6;
}

/* Search/breadcrumbs (cards theme shows a toolbar) */
.toolbar, .breadcrumbs, .search{
  background: var(--panel); border:1px solid #efefef; border-radius:16px;
  padding:10px; box-shadow:var(--shadow);
}
.search input, .search__input, input[type="search"]{
  width:100%; padding:12px 14px; border:1px solid #e5e5e5; border-radius:12px; outline:0;
}
.search input:focus, .search__input:focus{ box-shadow: inset 0 0 0 1px var(--gold); border-color:#e0d0a0 }

/* Album cards & photo tiles */
.card, .album, .album__cover, .thumb, .photo, .grid__item, .item{
  border-radius:var(--radius) !important; background:var(--panel); border:1px solid #efefef;
  box-shadow:var(--shadow);
}
.card:hover, .album:hover, .grid__item:hover, .item:hover{
  transform: translateY(-3px); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 20px 52px rgba(0,0,0,.14); border-color:#e5e5e5;
}

/* Thumbnails scaling */
.thumb img, .photo img, .album__cover img, .card img{
  display:block; width:100%; height:auto; border-radius:12px;
}

/* Titles & meta */
.card__title, .album__title, .photo__title, .title{
  font-weight:800; font-size:1.15rem; margin:.4rem 0 .2rem;
}
.card__subtitle, .album__subtitle, .meta, .caption, .description{
  color:var(--muted); font-size:.95rem;
}

/* Badges/pills */
.badge, .pill, .tag{
  display:inline-block; border-radius:999px; font-weight:800; padding:.25rem .6rem; font-size:.8rem;
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); color:#111;
  border:1px solid #a58519;
}

/* Lightbox (generic selectors across themes) */
.lightbox, .pswp, .modal{
  --pswp-bg: rgba(255,255,255,.98);
}
.pswp__caption__center, .lightbox__caption{ color:#111 }

/* Pagination */
.pagination, .pager{
  display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; margin:22px auto;
}
.pagination a, .pager a, .pagination__link{
  text-decoration:none; color:inherit; background:var(--panel); border:1px solid #efefef; border-radius:10px; padding:.45rem .7rem; font-weight:700;
  box-shadow:var(--shadow);
}
.pagination .is-active, .pagination__link--active{
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); color:#111; border-color:#a58519;
}

/* Footer */
.footer{
  color:var(--muted); background:transparent; border:none; text-align:center; padding:24px 0 28px;
}

/* Mobile tweaks */
@media (max-width: 600px){
  .navbar{ padding:14px 0 6px }
  .toolbar{ padding:8px }
  .card, .album{ border-radius:16px }
}

/* Optional decorative corner (subtle) on tiles */
.grid__item::after, .item::after{
  content:"⚽"; position:absolute; right:-8px; bottom:-4px; font-size:56px; opacity:.06; transform: rotate(-12deg);
  pointer-events:none;
}