:root {
   --df-cream: #f8e8b8;
   --df-cream-soft: #fff7df;
   --df-cream-deep: #efd585;
   --df-brown: #6f3b00;
   --df-brown-dark: #3a2100;
   --df-brown-mid: #8a540f;
   --df-red: #b11f1a;
   --df-text: #211806;
   --df-muted: #745c2f;
   --df-line: #d2b66b;
   --df-panel: #fffaf0;
   --df-shadow: 0 2px 8px rgba(58, 33, 0, 0.14);
}

* {
   box-sizing: border-box;
}

html {
   min-width: 0;
}

body.df-album {
   background: var(--df-cream-deep);
   color: var(--df-text);
   font: 14px/1.45 Arial, Helvetica, sans-serif;
   margin: 0;
   padding: 0;
}

a {
   color: var(--df-brown);
}

a:hover,
a:active {
   color: var(--df-red);
}

img {
   max-width: 100%;
}

.df-page {
   min-height: 100vh;
}

.df-container {
   margin: 0 auto;
   max-width: 1180px;
   padding: 0 16px;
   width: 100%;
}

.df-top-strip,
.df-main-nav {
   background: var(--df-brown-dark);
}

.df-top-strip {
   min-height: 34px;
}

.df-site-header {
   background: var(--df-cream);
   border-bottom: 1px solid rgba(92, 59, 12, 0.18);
}

.df-header-inner {
   align-items: center;
   display: grid;
   gap: 24px;
   grid-template-columns: minmax(0, 1fr) auto;
   min-height: 108px;
   padding-bottom: 8px;
   padding-top: 8px;
}

.df-brand-lockup {
   align-items: center;
   display: flex;
   gap: 24px;
   min-width: 0;
}

.df-logo-link {
   display: inline-flex;
   flex: 0 0 auto;
   line-height: 0;
}

.df-logo-link img {
   display: block;
   height: auto;
   width: 144px;
}

.df-title-block {
   border-left: 1px solid rgba(111, 59, 0, 0.28);
   min-width: 0;
   padding-left: 22px;
}

.df-section-title {
   color: var(--df-brown-dark);
   display: inline-block;
   font: 700 31px/1.05 Georgia, "Times New Roman", serif;
   text-decoration: none;
}

.df-section-title:hover {
   color: var(--df-brown);
   text-decoration: none;
}

.df-title-block p {
   color: #2c220c;
   margin: 7px 0 0;
   max-width: 620px;
}

.df-header-ad {
   align-items: center;
   display: flex;
   justify-content: flex-end;
   overflow: hidden;
}

.df-header-ad iframe {
   border: 0;
   display: block;
   height: 92px;
   width: 352px;
}

.df-nav-inner {
   align-items: stretch;
   display: flex;
   min-height: 44px;
   overflow-x: auto;
   padding-bottom: 0;
   padding-top: 0;
}

.df-nav-inner a {
   align-items: center;
   color: #fff;
   display: flex;
   flex: 0 0 auto;
   font-weight: 700;
   line-height: 1;
   padding: 0 17px;
   text-decoration: none;
}

.df-nav-inner a:hover,
.df-nav-inner a.is-active {
   background: rgba(0, 0, 0, 0.24);
   color: #fff4cf;
   text-decoration: none;
}

.df-album-actions {
   background: #f3dea1;
   border-bottom: 1px solid var(--df-line);
}

.df-action-inner {
   align-items: center;
   display: grid;
   gap: 14px;
   grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
   min-height: 54px;
   padding-bottom: 8px;
   padding-top: 8px;
}

.df-crumbs {
   color: var(--df-muted);
   font-size: 13px;
   min-width: 0;
}

.df-crumbs a {
   font-weight: 700;
   text-decoration: none;
}

.df-crumbs span {
   color: #967136;
   padding: 0 5px;
}

.df-tools {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
}

.df-tools > a,
.df-disabled-action,
.df-search input[type="submit"],
.btn {
   background: var(--df-brown);
   border: 1px solid rgba(58, 33, 0, 0.16);
   border-radius: 4px;
   color: #fff;
   cursor: pointer;
   display: inline-flex;
   font: 700 13px/1 Arial, Helvetica, sans-serif;
   min-height: 32px;
   padding: 8px 11px;
   text-decoration: none;
}

.df-tools > a:hover,
.df-search input[type="submit"]:hover,
.btn:hover {
   background: var(--df-brown-dark);
   color: #fff4cf;
   text-decoration: none;
}

.df-disabled-action {
   background: #9a9178;
   color: #fff7df;
   cursor: not-allowed;
   opacity: 0.78;
}

.df-disabled-action:hover {
   background: #9a9178;
   color: #fff7df;
}

.df-search {
   align-items: center;
   display: flex;
   gap: 6px;
   margin: 0;
}

.df-search input[type="text"],
.text,
select,
textarea {
   background: #fffdf6;
   border: 1px solid #bfa373;
   border-radius: 4px;
   color: #1f1706;
   font: 14px/1.35 Arial, Helvetica, sans-serif;
   min-height: 32px;
   padding: 6px 8px;
}

.df-search input[type="text"] {
   width: 190px;
}

#user-bar {
   color: var(--df-muted);
   font-size: 13px;
   padding: 0 0 8px;
   text-align: right;
}

.df-content-band {
   padding: 16px 0 28px;
}

.df-top-ad,
.df-bottom-ad {
   margin: 0 auto 16px;
   max-width: 728px;
   overflow: hidden;
   text-align: center;
}

.df-ad-frame {
   border: 0;
   display: block;
   margin: 0 auto;
   max-width: 100%;
}

.df-ad-frame-top {
   height: 60px;
   width: 468px;
}

.df-ad-frame-bottom {
   height: 90px;
   width: 728px;
}

.df-bottom-ad {
   margin-bottom: 0;
   margin-top: 18px;
}

.df-album-layout {
   display: block;
}

.df-album-layout.has-sidebar {
   display: grid;
   gap: 16px;
   grid-template-columns: 230px minmax(0, 1fr);
}

.df-sidebar {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.df-side-card,
.df-panel,
.df-detail-card {
   background: var(--df-panel);
   border: 1px solid #d9c990;
   border-radius: 6px;
   box-shadow: var(--df-shadow);
}

.df-side-card {
   overflow: hidden;
   padding: 12px;
}

.df-side-card h2,
.df-section-heading {
   color: var(--df-brown-dark);
   font: 700 18px/1.2 Arial, Helvetica, sans-serif;
   margin: 0 0 12px;
}

.df-side-card h2 {
   font-size: 15px;
}

.df-side-card h3 {
   color: #050505;
   font: 700 14px/1.3 Arial, Helvetica, sans-serif;
   margin: 10px 0 2px;
}

.df-side-card p {
   color: var(--df-muted);
   margin: 0;
}

.df-side-photo {
   display: block;
   line-height: 0;
   text-align: center;
}

.df-side-photo img {
   border: 1px solid var(--df-line);
   border-radius: 4px;
   display: block;
   height: auto;
   margin: 0 auto;
   max-height: 220px;
   object-fit: contain;
}

.df-photo-placeholder,
.df-mini-photo em,
.df-photo-detail figcaption {
   display: none;
}

.df-photo-thumb.is-missing,
.df-side-photo.is-missing {
   align-items: center;
   aspect-ratio: 1;
   display: grid;
   justify-items: center;
   line-height: 1.2;
}

.df-photo-thumb.is-missing .df-photo-placeholder,
.df-side-photo.is-missing .df-photo-placeholder,
.df-mini-photo.is-missing em,
.df-photo-detail.is-missing figcaption {
   color: var(--df-muted);
   display: grid;
   font: 700 13px/1.25 Arial, Helvetica, sans-serif;
   min-height: 96px;
   place-items: center;
   text-align: center;
}

.df-comment-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.df-comment-list li + li {
   border-top: 1px solid #ead9a5;
   margin-top: 8px;
   padding-top: 8px;
}

.df-comment-list a {
   color: var(--df-brown);
   display: block;
   font-size: 13px;
}

.df-calendar-card fieldset {
   background: transparent;
   border: 0;
   margin: 0;
   padding: 0;
}

.df-calendar-card legend {
   color: var(--df-muted);
   font-weight: 700;
   margin-bottom: 8px;
}

.df-calendar-card table {
   margin: 0 auto;
   width: 100%;
}

.df-calendar-card th,
.df-calendar-card td {
   font-size: 12px;
   padding: 4px;
   text-align: center;
}

.calendar-head {
   background: var(--df-brown);
   color: #fff;
}

.calendar-body {
   background: #fff4d1;
}

.df-category-grid {
   display: grid;
   gap: 14px;
   grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.df-category-card,
.df-photo-card {
   background: var(--df-panel);
   border: 1px solid #d9c990;
   border-radius: 6px;
   box-shadow: var(--df-shadow);
   overflow: hidden;
}

.df-category-card {
   display: flex;
   flex-direction: column;
   min-height: 260px;
}

.df-category-image {
   background: #f2dd9d;
   display: block;
   line-height: 0;
   padding: 10px;
}

.df-category-image img {
   aspect-ratio: 4 / 3;
   border: 1px solid var(--df-line);
   border-radius: 4px;
   display: block;
   object-fit: cover;
   width: 100%;
}

.df-card-body {
   display: flex;
   flex: 1;
   flex-direction: column;
   padding: 12px;
   text-align: center;
}

.df-card-body h2 {
   color: #050505;
   font: 700 16px/1.2 Arial, Helvetica, sans-serif;
   margin: 0 0 8px;
}

.df-card-body p {
   color: var(--df-muted);
   font-size: 13px;
   margin: 0 0 10px;
}

.df-stats,
.df-photo-details,
.df-detail-list {
   margin: 0;
}

.df-stats {
   display: flex;
   gap: 8px;
   justify-content: center;
   margin-top: auto;
}

.df-stats div {
   min-width: 62px;
}

.df-stats dt,
.df-photo-details dt,
.df-detail-list dt {
   color: var(--df-muted);
   font-size: 12px;
   margin: 0;
}

.df-stats dd,
.df-photo-details dd,
.df-detail-list dd {
   margin: 0;
}

.df-photo-section {
   margin-top: 18px;
}

.df-photo-grid {
   display: grid;
   gap: 14px;
   grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.df-photo-card {
   display: flex;
   flex-direction: column;
   min-height: 310px;
}

.df-photo-thumb {
   background: #f2dd9d;
   display: block;
   line-height: 0;
   padding: 10px;
}

.df-photo-thumb img {
   aspect-ratio: 1;
   border: 1px solid var(--df-line);
   border-radius: 4px;
   display: block;
   object-fit: cover;
   width: 100%;
}

.df-photo-meta {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: 10px;
   padding: 12px;
   text-align: center;
}

.df-photo-meta h3 {
   font: 700 15px/1.25 Arial, Helvetica, sans-serif;
   margin: 0;
}

.df-photo-meta h3 a {
   color: #050505;
   text-decoration: none;
}

.df-photo-meta h3 a:hover {
   color: var(--df-brown);
   text-decoration: underline;
}

.df-photo-details {
   color: var(--df-text);
   display: grid;
   gap: 4px;
   margin-top: auto;
}

.df-photo-details div {
   align-items: baseline;
   display: flex;
   gap: 6px;
   justify-content: center;
}

.df-photo-details dt::after {
   content: ":";
}

.df-card-actions {
   display: grid;
   gap: 10px;
}

.df-disabled-note {
   color: var(--df-muted);
   font-size: 12px;
   margin: 0;
}

.df-card-actions select {
   width: 100%;
}

.df-member-grid {
   display: grid;
   gap: 10px 12px;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.df-member-card {
   background: #fff4d1;
   border: 1px solid #ead9a5;
   border-radius: 4px;
   display: grid;
   gap: 6px;
   min-width: 0;
   padding: 8px 10px;
}

.df-member-album-link {
   display: grid;
   gap: 2px;
   min-width: 0;
   text-decoration: none;
}

.df-member-album-link strong {
   color: var(--df-brown);
   display: block;
   font-size: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.df-member-album-link span {
   color: var(--df-muted);
   display: block;
   font-size: 12px;
}

.df-profile-link {
   color: var(--df-red);
   display: inline-block;
   font-size: 12px;
   font-weight: 700;
   line-height: 1.2;
   margin-left: 6px;
   white-space: nowrap;
}

.df-member-card .df-profile-link {
   justify-self: start;
   margin-left: 0;
}

.df-panel {
   margin-top: 18px;
   padding: 16px;
}

.df-mini-grid {
   display: grid;
   gap: 12px;
   grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.df-mini-photo {
   color: #050505;
   display: grid;
   gap: 8px;
   text-align: center;
   text-decoration: none;
}

.df-mini-photo img {
   aspect-ratio: 1;
   border: 1px solid var(--df-line);
   border-radius: 4px;
   object-fit: cover;
   width: 100%;
}

.df-mini-photo.is-missing em {
   background: #f2dd9d;
   border: 1px solid var(--df-line);
   border-radius: 4px;
   font-style: normal;
}

.df-mini-photo span {
   font-weight: 700;
}

.df-empty-state {
   background: var(--df-panel);
   border: 1px solid #d9c990;
   border-radius: 6px;
   box-shadow: var(--df-shadow);
   margin-bottom: 16px;
   padding: 18px;
}

.df-empty-state p {
   margin: 0 0 10px;
}

.df-pagination {
   align-items: center;
   background: var(--df-panel);
   border: 1px solid #d9c990;
   border-radius: 6px;
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: space-between;
   margin-top: 18px;
   padding: 12px 14px;
}

.paging-info {
   color: var(--df-muted);
}

.paging-links a,
.paging-links span {
   display: inline-block;
   margin: 2px;
}

.df-detail-page {
   display: grid;
   gap: 16px;
}

.df-photo-nav {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
}

.df-photo-nav a {
   align-items: center;
   background: var(--df-panel);
   border: 1px solid #d9c990;
   border-radius: 6px;
   color: var(--df-text);
   display: flex;
   gap: 8px;
   padding: 7px 10px;
   text-decoration: none;
}

.df-photo-nav img {
   border-radius: 3px;
   height: 42px;
   object-fit: cover;
   width: 42px;
}

.df-photo-detail {
   background: #1e1607;
   border-radius: 6px;
   margin: 0;
   overflow: hidden;
   padding: 12px;
   text-align: center;
}

.df-photo-detail img {
   border-radius: 4px;
   display: inline-block;
   height: auto;
   max-height: 76vh;
   object-fit: contain;
   width: auto;
}

.df-photo-detail.is-missing {
   background: var(--df-panel);
   border: 1px solid #d9c990;
}

.df-detail-card {
   padding: 18px;
}

.df-detail-card h1 {
   color: #050505;
   font: 700 26px/1.2 Arial, Helvetica, sans-serif;
   margin: 0 0 12px;
}

.df-photo-description {
   color: var(--df-text);
   font-size: 15px;
   margin: 0 0 14px;
}

.df-detail-list {
   display: grid;
   gap: 10px;
}

.df-detail-list div {
   display: grid;
   gap: 4px;
   grid-template-columns: 120px minmax(0, 1fr);
}

.df-detail-list a + a {
   margin-left: 10px;
}

.df-moderator-actions {
   margin: 14px 0 0;
}

.df-moderator-actions a {
   color: var(--df-red);
   font-weight: 700;
}

.df-interaction-grid {
   display: grid;
   gap: 16px;
   grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
   margin-top: 18px;
}

.df-rating-form,
.df-comment-form {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.df-comment-form {
   align-items: stretch;
   flex-direction: column;
   margin-top: 14px;
}

.df-comment-form textarea {
   min-height: 110px;
   width: 100%;
}

.df-comments {
   display: grid;
   gap: 10px;
}

.df-comment {
   background: #fff4d1;
   border: 1px solid #ead9a5;
   border-radius: 5px;
   padding: 12px;
}

.df-comment header {
   align-items: baseline;
   border-bottom: 1px solid #ead9a5;
   display: flex;
   gap: 10px;
   justify-content: space-between;
   margin-bottom: 8px;
   padding-bottom: 8px;
}

.df-comment time {
   color: var(--df-muted);
   font-size: 12px;
}

.df-footer {
   background: #eedda8;
   border-top: 1px solid var(--df-line);
   color: var(--df-muted);
   padding: 14px 0;
   text-align: center;
}

.err,
td.err {
   background: #fff0ee;
   border: 1px solid #d78c7d;
   color: #9d1b15;
   padding: 10px;
}

.imgBorder {
   border: 1px solid var(--df-line);
}

table.formPage,
table.block,
.photo-body {
   background: var(--df-panel);
   border: 1px solid #d9c990;
}

td {
   padding: 5px;
}

span.req {
   color: var(--df-red);
   font-weight: 700;
   margin-right: 4px;
}

.captcha {
   border: 1px solid var(--df-line);
   margin-top: 8px;
   width: max-content;
}

@media (max-width: 960px) {
   .df-header-inner {
      grid-template-columns: 1fr;
   }

   .df-header-ad {
      display: none;
   }

   .df-action-inner {
      align-items: flex-start;
      grid-template-columns: 1fr;
   }

   .df-tools {
      justify-content: flex-start;
   }

   .df-album-layout.has-sidebar,
   .df-interaction-grid {
      grid-template-columns: 1fr;
   }

   .df-sidebar {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
   }
}

@media (max-width: 640px) {
   .df-container {
      padding-left: 10px;
      padding-right: 10px;
   }

   .df-top-strip {
      min-height: 18px;
   }

   .df-header-inner {
      min-height: 0;
      padding-bottom: 14px;
      padding-top: 14px;
   }

   .df-brand-lockup {
      align-items: center;
      gap: 14px;
      justify-content: center;
   }

   .df-logo-link img {
      width: 112px;
   }

   .df-title-block {
      border-left: 0;
      padding-left: 0;
   }

   .df-section-title {
      font-size: 24px;
   }

   .df-title-block p {
      font-size: 13px;
   }

   .df-nav-inner a {
      min-height: 42px;
      padding: 0 13px;
   }

   .df-nav-inner {
      flex-wrap: wrap;
      justify-content: center;
      overflow-x: visible;
   }

   .df-tools {
      align-items: stretch;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100%;
   }

   .df-tools > a {
      justify-content: center;
      text-align: center;
   }

   .df-search {
      grid-column: 1 / -1;
   }

   .df-search input[type="text"] {
      flex: 1;
      min-width: 0;
      width: auto;
   }

   .df-category-grid,
   .df-photo-grid {
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   }

   .df-photo-card {
      min-height: 0;
   }

   .df-detail-list div {
      grid-template-columns: 1fr;
   }

   .df-comment header {
      align-items: flex-start;
      flex-direction: column;
      gap: 4px;
   }
}