/* ==========================================================================
   DINKFOLK — Contributor System Styles
   Dark/gold aesthetic matching the theme design tokens.
   ========================================================================== */

/* ── Layout wrappers ── */

.df-contrib-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

.df-contrib-wrap--submit {
  max-width: 960px;
}

/* ── Intro (Write For Us) ── */

.df-contrib-intro {
  margin-bottom: 3rem;
}

.df-contrib-intro__text h2 {
  font-family: var(--df-font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  letter-spacing: 0 !important;
  color: var(--df-white);
  margin: 0 0 1rem;
}

.df-contrib-intro__text p {
  color: var(--df-light);
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* ── Tabs ── */

.df-contrib-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--df-border);
  margin: 2.5rem 0 2rem;
}

.df-contrib-tab {
  background: none;
  border: none;
  color: var(--df-muted);
  font-family: var(--df-font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}

.df-contrib-tab:hover {
  color: var(--df-light);
}

.df-contrib-tab--active {
  color: var(--df-gold);
  border-bottom-color: var(--df-gold);
}

/* ── Panel visibility ── */

.df-contrib-panel--hidden {
  display: none;
}

/* ── Forms ── */

.df-contrib-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.df-contrib-form__row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 640px) {
  .df-contrib-form__row--half {
    grid-template-columns: 1fr;
  }
}

.df-contrib-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.df-contrib-field label {
  font-family: var(--df-font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--df-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.df-required {
  color: var(--df-gold);
}

.df-contrib-field input[type="text"],
.df-contrib-field input[type="email"],
.df-contrib-field input[type="password"],
.df-contrib-field input[type="url"],
.df-contrib-field textarea {
  background: var(--df-near-black);
  border: 1px solid var(--df-border);
  color: var(--df-white);
  font-family: var(--df-font-sans);
  font-size: 0.9rem;
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color 0.2s;
  resize: vertical;
}

.df-contrib-field input:focus,
.df-contrib-field textarea:focus {
  outline: none;
  border-color: var(--df-gold);
}

.df-contrib-field input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.df-contrib-field input::placeholder,
.df-contrib-field textarea::placeholder {
  color: var(--df-muted);
}

.df-contrib-hint {
  font-size: 0.75rem;
  color: var(--df-light);
  margin: 0;
  line-height: 1.5;
}

/* ── Checkbox ── */

.df-contrib-field--check {
  flex-direction: row;
}

.df-contrib-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-family: var(--df-font-sans);
  font-size: 0.85rem;
  color: var(--df-light);
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
}

.df-contrib-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  margin-top: 0.2rem;
  accent-color: var(--df-gold);
  cursor: pointer;
}

/* ── Word count badge ── */

.df-contrib-wordcount {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--df-muted);
  text-transform: none;
  transition: color 0.2s;
}

.df-contrib-wordcount--ok      { color: #6abf69; }
.df-contrib-wordcount--warn    { color: #d4a843; }
.df-contrib-wordcount--danger  { color: #e05c5c; }

/* ── Submit button ── */

.df-contrib-form__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.df-contrib-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.df-contrib-submit--large {
  font-size: 0.75rem;
  padding: 1rem 2.5rem;
}

.df-contrib-submit .df-contrib-submit__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: df-spin 0.7s linear infinite;
}

.df-contrib-submit--loading .df-contrib-submit__spinner {
  display: block;
}

.df-contrib-submit--loading .df-contrib-submit__label {
  opacity: 0.6;
}

.df-contrib-submit__spinner--inline {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--df-border);
  border-top-color: var(--df-gold);
  border-radius: 50%;
  animation: df-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 0.4rem;
}

@keyframes df-spin {
  to { transform: rotate(360deg); }
}

/* ── Notices ── */

.df-contrib-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  font-family: var(--df-font-sans);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--df-light);
  border: 1px solid var(--df-border);
}

.df-contrib-notice svg {
  min-width: 16px;
  margin-top: 0.1rem;
}

.df-contrib-notice--info {
  border-color: rgba(201, 169, 110, 0.3);
  background: rgba(201, 169, 110, 0.05);
  color: var(--df-light);
}

.df-contrib-notice--warn {
  border-color: rgba(212, 168, 67, 0.4);
  background: rgba(212, 168, 67, 0.06);
  color: #d4a843;
}

/* ── Messages ── */

.df-contrib-msg {
  font-family: var(--df-font-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  min-height: 1.2em;
  transition: opacity 0.2s;
}

.df-contrib-msg--success {
  color: #6abf69;
}

.df-contrib-msg--error {
  color: #e05c5c;
}

/* ── Gate (not logged in / wrong role) ── */

.df-contrib-gate {
  text-align: center;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.df-contrib-gate__icon {
  width: 48px;
  height: 48px;
  color: var(--df-muted);
  margin-bottom: 0.5rem;
}

.df-contrib-gate__title {
  font-family: var(--df-font-display);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--df-white);
  margin: 0;
}

.df-contrib-gate--success .df-contrib-gate__icon {
  color: #6abf69;
}

/* ── Already a contributor ── */

.df-contrib-already {
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.df-contrib-already p {
  color: var(--df-light);
  font-family: var(--df-font-sans);
  font-size: 0.9rem;
  margin: 0;
}

/* ── Utility link ── */

.df-contrib-link {
  color: var(--df-gold);
  font-family: var(--df-font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: opacity 0.2s;
}

.df-contrib-link:hover {
  opacity: 0.75;
}

/* ==========================================================================
   Contributor Hub
   ========================================================================== */

.df-hub-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--df-border);
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.df-hub-header__greeting h2 {
  font-family: var(--df-font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 300;
  color: var(--df-white);
  margin: 0.25rem 0 0;
}

.df-hub-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.df-hub-section {
  margin-bottom: 4rem;
}

.df-hub-section__title {
  font-family: var(--df-font-display);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--df-white);
  letter-spacing: 0.03em;
  margin: 0 0 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--df-border);
}

.df-hub-section__desc {
  font-family: var(--df-font-sans);
  font-size: 0.82rem;
  color: var(--df-muted);
  margin: 0.5rem 0 2rem;
  line-height: 1.6;
}

/* ── Posts table ── */

.df-hub-posts__loading {
  color: var(--df-muted);
  font-family: var(--df-font-sans);
  font-size: 0.82rem;
  padding: 2rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.df-hub-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--df-font-sans);
  font-size: 0.82rem;
}

.df-hub-table th {
  text-align: left;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--df-muted);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--df-border);
}

.df-hub-table td {
  padding: 1rem;
  border-bottom: 1px solid rgba(46,46,46,0.6);
  color: var(--df-light);
  vertical-align: middle;
}

.df-hub-table tr:last-child td {
  border-bottom: none;
}

.df-hub-table td a {
  color: var(--df-white);
  text-decoration: none;
}

.df-hub-table td a:hover {
  color: var(--df-gold);
}

.df-hub-table__title {
  color: var(--df-white);
  font-weight: 400;
}

.df-hub-status {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap;
}

.df-hub-status--published   { color: #6abf69; border-color: rgba(106,191,105,0.4); }
.df-hub-status--pending     { color: #d4a843; border-color: rgba(212,168,67,0.4); }
.df-hub-status--draft       { color: var(--df-muted); border-color: var(--df-border); }

.df-hub-empty {
  padding: 3rem 0;
  color: var(--df-muted);
  font-family: var(--df-font-sans);
  font-size: 0.85rem;
}

/* ── Account footer ── */

.df-hub-account {
  padding-top: 2rem;
  border-top: 1px solid var(--df-border);
  margin-top: 2rem;
}

.df-hub-account p {
  font-family: var(--df-font-sans);
  font-size: 0.78rem;
  color: var(--df-muted);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.df-hub-account strong {
  color: var(--df-light);
}

/* ── Advertiser creatives grid ── */

.df-hub-creatives {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.df-hub-creative {
  border: 1px solid var(--df-border);
  padding: 1rem;
  max-width: 260px;
  background: rgba(255,255,255,0.02);
}

.df-hub-creative__label {
  font-family: var(--df-font-sans);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--df-muted);
  margin: 0 0 0.6rem;
}

.df-hub-creative img {
  max-width: 100%;
  height: auto;
  display: block;
}

.df-hub-creative__link {
  font-family: var(--df-font-sans);
  font-size: 0.72rem;
  word-break: break-all;
  margin: 0.6rem 0 0;
}

.df-hub-creative__link a {
  color: var(--df-gold);
  text-decoration: none;
}

.df-hub-creative__link a:hover {
  text-decoration: underline;
}

.df-hub-select {
  margin: 0 0 1.5rem;
}

.df-hub-select select {
  font-family: var(--df-font-sans);
  font-size: 0.82rem;
  background: var(--df-black, #111);
  color: var(--df-light);
  border: 1px solid var(--df-border);
  padding: 0.6rem 0.9rem;
}

/* ==========================================================================
   Submit Article
   ========================================================================== */

.df-submit-preamble {
  margin-bottom: 2.5rem;
}

.df-submit-preamble p {
  font-family: var(--df-font-sans);
  font-size: 0.82rem;
  color: var(--df-muted);
  margin: 0;
}

.df-submit-section {
  padding: 2.5rem 0;
  border-top: 1px solid var(--df-border);
}

.df-submit-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.df-submit-section__header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
}

.df-submit-section__num {
  font-family: var(--df-font-display);
  font-size: 1rem;
  color: var(--df-gold);
  font-weight: 300;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.df-submit-section__header h3 {
  font-family: var(--df-font-display);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--df-white);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ── Quill editor ── */

.df-submit-editor-wrap {
  border: 1px solid var(--df-border);
  transition: border-color 0.2s;
}

.df-submit-editor-wrap:focus-within {
  border-color: var(--df-gold);
}

.df-submit-editor-wrap .ql-toolbar {
  background: var(--df-dark);
  border: none;
  border-bottom: 1px solid var(--df-border);
  padding: 0.5rem;
}

.df-submit-editor-wrap .ql-toolbar button,
.df-submit-editor-wrap .ql-toolbar .ql-picker-label {
  color: var(--df-light) !important;
  stroke: var(--df-light) !important;
  fill: var(--df-light) !important;
}

.df-submit-editor-wrap .ql-toolbar button:hover,
.df-submit-editor-wrap .ql-toolbar button.ql-active,
.df-submit-editor-wrap .ql-toolbar .ql-picker-label:hover {
  color: var(--df-gold) !important;
  stroke: var(--df-gold) !important;
  fill: var(--df-gold) !important;
}

.df-submit-editor-wrap .ql-toolbar .ql-stroke {
  stroke: var(--df-light);
}

.df-submit-editor-wrap .ql-toolbar button:hover .ql-stroke,
.df-submit-editor-wrap .ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--df-gold);
}

.df-submit-editor-wrap .ql-toolbar .ql-fill {
  fill: var(--df-light);
}

.df-submit-editor-wrap .ql-toolbar button:hover .ql-fill,
.df-submit-editor-wrap .ql-toolbar button.ql-active .ql-fill {
  fill: var(--df-gold);
}

.df-submit-editor-wrap .ql-picker-options {
  background: var(--df-dark);
  border: 1px solid var(--df-border);
}

.df-submit-editor-wrap .ql-picker-item {
  color: var(--df-light);
}

.df-submit-editor-wrap .ql-picker-item:hover {
  color: var(--df-gold);
}

.df-submit-editor-wrap .ql-container {
  background: var(--df-near-black);
  border: none;
  font-family: var(--df-font-sans);
  font-size: 0.92rem;
  min-height: 320px;
}

.df-submit-editor-wrap .ql-editor {
  color: var(--df-white);
  min-height: 320px;
  padding: 1.25rem 1.25rem;
  line-height: 1.9;
}

.df-submit-editor-wrap .ql-editor.ql-blank::before {
  color: var(--df-muted);
  font-style: normal;
  left: 1.25rem;
}

.df-submit-editor-wrap .ql-editor h1,
.df-submit-editor-wrap .ql-editor h2,
.df-submit-editor-wrap .ql-editor h3 {
  font-family: var(--df-font-display);
  font-weight: 300;
  color: var(--df-white);
}

.df-submit-editor-wrap .ql-editor p {
  margin-bottom: 0.8em;
}

/* ── Word count progress bar ── */

.df-submit-wordcount-bar {
  height: 2px;
  background: var(--df-border);
  margin-top: 0.5rem;
  position: relative;
}

.df-submit-wordcount-bar__fill {
  height: 100%;
  width: 0;
  background: var(--df-gold);
  transition: width 0.3s ease, background 0.3s ease;
}

.df-submit-wordcount-bar__fill--good   { background: #6abf69; }  /* 700-1000 green */
.df-submit-wordcount-bar__fill--warn   { background: #c9a96e; }  /* 1000-1300 gold-yellow */
.df-submit-wordcount-bar__fill--over   { background: #e05c5c; }  /* >1300 red */
.df-submit-wordcount-bar__fill--ok     { background: #6abf69; }  /* kept for compat */

/* ── Image upload ── */

.df-image-drop-zone {
  border: 1px dashed var(--df-border);
  background: var(--df-near-black);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

.df-image-drop-zone:hover,
.df-image-drop-zone--over {
  border-color: var(--df-gold);
  background: rgba(201,169,110,0.04);
}

.df-image-drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.df-image-drop-zone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 2rem;
  text-align: center;
  pointer-events: none;
}

.df-image-drop-zone__inner svg {
  color: var(--df-muted);
}

.df-image-drop-zone__inner p {
  font-family: var(--df-font-sans);
  font-size: 0.85rem;
  color: var(--df-light);
  margin: 0;
}

.df-image-drop-zone__inner .df-contrib-hint {
  font-size: 0.72rem;
}

/* ── Image preview grid ── */

.df-image-preview-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1rem;
}

.df-image-preview {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--df-near-black);
  border: 1px solid var(--df-border);
  padding: 0.75rem;
}

.df-image-preview__thumb {
  flex: 0 0 120px;
  width: 120px;
  position: relative;
}

.df-image-preview img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

.df-image-preview__badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.75);
  color: var(--df-light);
  font-family: var(--df-font-sans);
  font-size: 0.6rem;
  padding: 0.2rem 0.3rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.df-image-preview--first .df-image-preview__badge {
  color: var(--df-gold);
}

.df-image-preview__warn {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  background: #e05c5c;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: white;
  font-weight: bold;
}

/* ── Disclosures ── */

.df-submit-disclosure {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(46,46,46,0.6);
}

.df-submit-disclosure:last-child {
  border-bottom: none;
}

.df-submit-detail {
  margin-top: 1rem;
  padding-left: 1.75rem;
}

.df-submit-detail label {
  font-family: var(--df-font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--df-muted);
  display: block;
  margin-bottom: 0.5rem;
}

.df-submit-detail textarea {
  background: var(--df-near-black);
  border: 1px solid var(--df-border);
  color: var(--df-white);
  font-family: var(--df-font-sans);
  font-size: 0.85rem;
  padding: 0.75rem 1rem;
  width: 100%;
  resize: vertical;
  transition: border-color 0.2s;
}

.df-submit-detail textarea:focus {
  outline: none;
  border-color: var(--df-gold);
}

/* ── Submission checklist ── */

.df-submit-checklist {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

/* ==========================================================================
   Submission Guidelines Page
   ========================================================================== */

.df-guidelines-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 0 6rem;
}

.df-guidelines-intro {
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--df-border);
}

.df-guidelines-edition {
  font-family: var(--df-font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--df-gold);
  margin: 0 0 1rem;
}

.df-guidelines-intro p {
  font-family: var(--df-font-sans);
  font-size: 0.9rem;
  color: var(--df-light);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.df-guidelines-block {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--df-border);
}

.df-guidelines-block h2 {
  font-family: var(--df-font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 300;
  color: var(--df-white);
  margin: 0 0 1.5rem;
  letter-spacing: 0.02em;
}

.df-guidelines-block h3 {
  font-family: var(--df-font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--df-gold);
  margin: 1.75rem 0 0.75rem;
}

.df-guidelines-block h3:first-child {
  margin-top: 0;
}

.df-guidelines-block p {
  font-family: var(--df-font-sans);
  font-size: 0.9rem;
  color: var(--df-light);
  line-height: 1.8;
  margin-bottom: 0.75rem;
}

.df-guidelines-block ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.df-guidelines-block ul li {
  font-family: var(--df-font-sans);
  font-size: 0.88rem;
  color: var(--df-light);
  line-height: 1.7;
  padding-left: 1.25rem;
  position: relative;
}

.df-guidelines-block ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--df-gold);
  font-size: 0.75rem;
}

/* ── Checklist block ── */

.df-guidelines-checklist {
  background: rgba(201,169,110,0.04);
  padding: 2.5rem;
  border: 1px solid rgba(201,169,110,0.2);
  border-bottom: 1px solid rgba(201,169,110,0.2);
}

.df-guidelines-checklist__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 2rem;
}

@media (max-width: 600px) {
  .df-guidelines-checklist__list {
    grid-template-columns: 1fr;
  }
}

.df-guidelines-checklist__list li::before {
  content: '✓';
  color: var(--df-gold);
  font-size: 0.7rem;
}

/* ── CTA ── */

.df-guidelines-cta {
  padding-top: 3rem;
  text-align: center;
}

/* ==========================================================================
   Guidelines Side Panel (Submit Article page)
   ========================================================================== */

/* Toggle button — lives in the preamble bar */
.df-guidelines-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 1px solid rgba(212,175,55,.35);
  color: var(--df-gold);
  font-family: var(--df-font-body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .85rem;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  vertical-align: middle;
  margin-left: .75rem;
}
.df-guidelines-toggle:hover {
  border-color: var(--df-gold);
  background: rgba(212,175,55,.06);
  color: var(--df-white);
}

/* Backdrop — mobile only */
.df-guidelines-backdrop {
  display: none;
}

/* ── Mobile / tablet: fixed right drawer ── */
@media (max-width: 1079px) {
  .df-guidelines-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 92vw);
    overflow-y: auto;
    background: #0d0d0d;
    border-left: 1px solid rgba(212,175,55,.25);
    padding: 2rem 1.5rem;
    z-index: 9000;
    transform: translateX(100%);
    transition: transform .3s ease;
  }
  .df-guidelines-panel.df-panel-open {
    transform: translateX(0);
  }
  .df-guidelines-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 8999;
  }
  .df-guidelines-backdrop.df-panel-open {
    display: block;
  }
}

/* ── Desktop: sticky second column in the grid ── */
@media (min-width: 1080px) {
  .df-submit-layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    transition: grid-template-columns .3s ease, gap .3s ease;
  }
  .df-submit-layout.df-panel-open {
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
  }
  .df-guidelines-panel {
    display: none;
  }
  .df-submit-layout.df-panel-open .df-guidelines-panel {
    display: block;
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(212,175,55,.2);
    padding: 1.75rem 1.5rem;
  }
}

/* Panel inner styles */
.df-guidelines-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(212,175,55,.2);
}
.df-guidelines-panel__title {
  font-family: var(--df-font-display);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--df-white);
  margin: 0;
}
.df-guidelines-close {
  background: none;
  border: none;
  color: var(--df-muted);
  cursor: pointer;
  padding: .2rem;
  line-height: 1;
  transition: color .2s;
  display: flex;
  align-items: center;
}
.df-guidelines-close:hover { color: var(--df-white); }

.df-guidelines-panel h3 {
  font-family: var(--df-font-body);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--df-gold);
  margin: 1.4rem 0 .45rem;
}
.df-guidelines-panel h3:first-of-type { margin-top: 0; }

.df-guidelines-panel ul {
  list-style: disc;
  margin: 0 0 .6rem 1.1rem;
  padding: 0;
}
.df-guidelines-panel li,
.df-guidelines-panel p {
  font-size: .76rem;
  line-height: 1.75;
  color: var(--df-light);
  margin-bottom: .3rem;
}

.df-guidelines-panel__footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(212,175,55,.15);
}
.df-guidelines-panel__footer a {
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--df-gold);
  text-decoration: none;
  transition: color .2s;
}
.df-guidelines-panel__footer a:hover { color: var(--df-white); }

/* ── Image credit form (per-image, rendered by JS) ── */

.df-image-preview__remove {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,0.8);
  border: none;
  border-radius: 2px;
  color: var(--df-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
.df-image-preview__remove:hover {
  background: #e05c5c;
  color: #fff;
}

.df-image-credit-form {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.df-image-credit-form__copy {
  margin-bottom: 0.2rem;
}

.df-image-credit-copy-btn {
  background: none;
  border: 1px solid var(--df-border);
  color: var(--df-muted);
  font-family: var(--df-font-sans);
  font-size: 0.7rem;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.15s, color 0.15s;
  letter-spacing: 0.04em;
}
.df-image-credit-copy-btn:hover {
  border-color: var(--df-gold);
  color: var(--df-gold);
}

.df-image-credit-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.df-image-credit-form__row label {
  font-family: var(--df-font-sans);
  font-size: 0.68rem;
  color: var(--df-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.df-image-credit-form__row input[type="text"],
.df-image-credit-form__row input[type="url"] {
  background: var(--df-dark);
  border: 1px solid var(--df-border);
  color: var(--df-light);
  font-family: var(--df-font-sans);
  font-size: 0.78rem;
  padding: 0.3rem 0.55rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.df-image-credit-form__row input:focus {
  border-color: var(--df-gold);
}

.df-image-credit-form__row--check label.df-contrib-checkbox {
  font-size: 0.76rem;
  align-items: flex-start;
}

/* ── Quill image-insertion toolbar ── */

.df-quill-img-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  background: var(--df-near-black);
  border: 1px solid var(--df-border);
  border-bottom: none;
  font-family: var(--df-font-sans);
  font-size: 0.72rem;
}

.df-quill-img-toolbar__label {
  color: var(--df-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.df-quill-img-toolbar__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.df-quill-img-btn {
  background: none;
  border: 1px solid var(--df-border);
  color: var(--df-light);
  font-family: var(--df-font-sans);
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  letter-spacing: 0.04em;
}
.df-quill-img-btn:hover {
  border-color: var(--df-gold);
  color: var(--df-gold);
  background: rgba(201,169,110,0.06);
}

/* ── Word count hint states ── */

#df-wc-hint,
.df-wc-hint {
  transition: color 0.2s;
}
.df-wc-hint--ok   { color: #6abf69; }
.df-wc-hint--warn { color: var(--df-gold); }
.df-wc-hint--over { color: #e05c5c; }

/* ── Set as featured button ── */

.df-image-preview__set-featured {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  width: 120px;
  background: none;
  border: 1px solid var(--df-border);
  color: var(--df-muted);
  font-family: var(--df-font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.45rem;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.15s, color 0.15s;
  box-sizing: border-box;
  justify-content: center;
}
.df-image-preview__set-featured:hover {
  border-color: var(--df-gold);
  color: var(--df-gold);
}

/* ── Hub: View button ── */

.df-hub-view-btn {
  background: none;
  border: 1px solid rgba(201, 169, 110, 0.35);
  color: var(--df-gold);
  font-family: var(--df-font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.df-hub-view-btn:hover {
  background: rgba(201, 169, 110, 0.08);
  border-color: var(--df-gold);
}

/* ── Article preview modal ── */

body.df-modal-open {
  overflow: hidden;
}

.df-article-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
}

.df-article-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}

.df-article-modal__panel {
  position: relative;
  z-index: 1;
  background: #161616;
  border: 1px solid rgba(201, 169, 110, 0.18);
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.df-article-modal__header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem 2rem 1.25rem;
  border-bottom: 1px solid var(--df-border);
  flex-shrink: 0;
}

.df-article-modal__meta {
  flex: 1;
  min-width: 0;
}

.df-article-modal__title {
  font-family: var(--df-font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--df-white);
  margin: 0.25rem 0 0;
  line-height: 1.2;
}

.df-article-modal__byline {
  font-family: var(--df-font-sans);
  font-size: 0.75rem;
  color: var(--df-muted);
  margin: 0.4rem 0 0;
  letter-spacing: 0.03em;
}

.df-article-modal__close {
  background: none;
  border: none;
  color: var(--df-muted);
  cursor: pointer;
  padding: 0.25rem;
  flex-shrink: 0;
  transition: color 0.15s;
  margin-top: 0.1rem;
}

.df-article-modal__close:hover {
  color: var(--df-white);
}

.df-article-modal__notice {
  margin: 0;
  border-radius: 0;
  flex-shrink: 0;
}

.df-article-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
}

.df-modal-content {
  font-family: var(--df-font-sans);
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(244, 241, 234, 0.85);
}

.df-modal-content p {
  margin: 0 0 1.25rem;
}

.df-modal-content h2,
.df-modal-content h3 {
  font-family: var(--df-font-display);
  font-weight: 300;
  color: var(--df-white);
  margin: 2rem 0 0.75rem;
}

.df-modal-content blockquote {
  border-left: 2px solid var(--df-gold);
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  color: var(--df-gold);
  font-style: italic;
}

.df-modal-content img {
  max-width: 100%;
  height: auto;
}

.df-article-modal__footer {
  padding: 1.25rem 2rem;
  border-top: 1px solid var(--df-border);
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.df-article-modal__footer:empty {
  display: none;
}

@media (max-width: 600px) {
  .df-article-modal {
    padding: 0;
    align-items: flex-end;
  }
  .df-article-modal__panel {
    max-height: 92vh;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}