@charset "UTF-8";
/* ==========================================================================
   India Influencer Awards 2026 - the nomination form and Rules & FAQ pages.
   Layout and states live here; the colours and fonts come from css/style.css
   (loaded first) and the --nf-* properties nominate.php and rules.php set
   on <body class="nf-page">.
   ========================================================================== */

.nf-page {
  --nf-card: rgba(255, 255, 255, .03);
  --nf-line: rgba(216, 180, 106, .24);
  --nf-line-soft: rgba(216, 180, 106, .12);
  --nf-text: #f5ead6;
  --nf-muted: #b5a68e;
  --nf-accent: #d8b46a;
  --nf-accent-hi: #f7e3b0;
  --nf-on-accent: #1b1107;
  --nf-display: Georgia, serif;
  --nf-sans: system-ui, sans-serif;
  --nf-radius: 6px;          /* section cards */
  --nf-field-radius: 4px;
  --nf-field-bg: rgba(255, 255, 255, .03);
  --nf-title-case: none;     /* text-transform for section titles */
  --nf-title-style: normal;
  --nf-danger: #ff9d8a;
}

/* --------------------------------------------------------------------------
   Page chrome: a slim bar back to the awards page, then the form
   -------------------------------------------------------------------------- */

.nf-top { border-bottom: 1px solid var(--nf-line-soft); }
.nf-top__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.nf-top__brand { display: flex; align-items: center; gap: 12px; color: var(--nf-text); font-family: var(--nf-sans); font-size: 10.5px; font-weight: 500; letter-spacing: .22em; line-height: 1.4; text-transform: uppercase; }
.nf-top__brand img { width: 40px; height: 40px; }
.nf-top__brand b { font-weight: 600; color: var(--nf-accent); }
.nf-top__back { font-family: var(--nf-sans); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--nf-accent-hi); }

/* Blocks are shown and hidden with the hidden attribute; several of them set
   their own display, which would otherwise win. */
.nf-page [hidden] { display: none !important; }

/* the same width and side margins as the rest of the site (.wrap in style.css) */
.nf-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--g, 20px); }

.nf-intro { padding: 56px 0 28px; }
.nf-intro__lede { margin-top: 18px; max-width: 640px; color: var(--nf-text); }
.nf-intro__facts { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.nf-intro__facts li { padding: 7px 14px; border: 1px solid var(--nf-line); border-radius: 999px; font-family: var(--nf-sans); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--nf-accent-hi); }

.nf-body { padding-bottom: 96px; }

/* --------------------------------------------------------------------------
   "Before You Start: What You'll Need"
   -------------------------------------------------------------------------- */

.nf-need { margin-bottom: 20px; border: 1px solid var(--nf-line); border-radius: var(--nf-radius); background: var(--nf-card); }
.nf-need summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px;
  font-family: var(--nf-display); font-size: 22px; font-style: var(--nf-title-style); line-height: 1.2; text-transform: var(--nf-title-case);
  color: var(--nf-accent-hi);
}
.nf-need summary::-webkit-details-marker { display: none; }
.nf-need summary::after { content: "+"; flex: none; font-family: var(--nf-sans); font-style: normal; font-weight: 300; font-size: 26px; line-height: 1; color: var(--nf-accent); transition: transform .3s; }
.nf-need[open] summary::after { transform: rotate(45deg); }
.nf-need__list { margin: 0; padding: 0 22px 10px; }
.nf-need__list div { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--nf-line-soft); }
.nf-need__list dt { font-family: var(--nf-sans); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; line-height: 1.7; text-transform: uppercase; color: var(--nf-accent); }
.nf-need__list dd { margin: 0; display: grid; gap: 8px; font-size: 15px; color: var(--nf-text); }
.nf-need__list p { margin: 0; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.nf { display: grid; gap: 20px; }
.nf > * { min-width: 0; }

.nf__sec { padding: 26px 20px 28px; border: 1px solid var(--nf-line); border-radius: var(--nf-radius); background: var(--nf-card); }
.nf__sec > * + * { margin-top: 20px; }

.nf__head { display: flex; align-items: center; gap: 16px; }
.nf__no {
  flex: none;
  display: grid; place-items: center;
  min-width: 46px; height: 46px; padding: 0 12px;
  border: 1px solid var(--nf-line); border-radius: 999px;
  font-family: var(--nf-display); font-style: italic; font-size: 19px; line-height: 1;
  color: var(--nf-accent-hi);
}
.nf__title { font-family: var(--nf-display); font-size: clamp(24px, 5.4vw, 32px); font-weight: 500; font-style: var(--nf-title-style); line-height: 1.1; text-transform: var(--nf-title-case); color: var(--nf-text); }
.nf__note { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--nf-muted); }

.nf__grid { display: grid; gap: 20px; }
.nf__grid > * { min-width: 0; }

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

.nf__f { display: block; margin: 0; padding: 0; border: 0; }
.nf__l { display: block; margin-bottom: 8px; padding: 0; font-family: var(--nf-sans); font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--nf-text); }
.nf__f.is-req > .nf__l::after,
.nf__c.is-req > span::after { content: " *"; color: var(--nf-accent); }

.nf input:not([type="checkbox"]):not([type="radio"]),
.nf select,
.nf textarea {
  width: 100%; min-height: 54px; padding: 0 16px;
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-field-radius);
  background: var(--nf-field-bg);
  color: var(--nf-text);
  font: 400 16px/1.4 var(--nf-sans);
  color-scheme: dark;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.nf textarea { min-height: 136px; padding: 14px 16px; resize: vertical; }
.nf select {
  appearance: none; padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8b46a' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
.nf select:invalid,
.nf select:disabled { color: var(--nf-muted); }
.nf select:disabled { opacity: .6; cursor: not-allowed; }
.nf input[readonly] { color: var(--nf-muted); border-style: dashed; }
.nf input:not([type="checkbox"]):not([type="radio"])[type="file"] { min-height: 0; padding: 9px 10px; font-size: 14px; line-height: 34px; }
.nf input[type="file"]::file-selector-button { vertical-align: middle; }
.nf input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 8px 16px;
  border: 1px solid var(--nf-line); border-radius: 999px;
  background: transparent; color: var(--nf-accent-hi);
  font: 500 11px var(--nf-sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.nf ::placeholder { color: var(--nf-muted); opacity: .6; }
.nf input:not([type="checkbox"]):not([type="radio"]):focus,
.nf select:focus,
.nf textarea:focus { outline: none; border-color: var(--nf-accent); box-shadow: 0 0 0 4px rgba(216, 180, 106, .14); }

.nf__h { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--nf-muted); }
.nf__count b { font-weight: 500; color: var(--nf-text); }
.nf__count.is-over,
.nf__count.is-over b { color: var(--nf-danger); }

/* Grouped inputs under one label */
.nf__rows { display: grid; gap: 10px; }
.nf__duo,
.nf__trio { display: grid; gap: 10px; }
.nf__link { display: grid; gap: 8px; }
.nf__paid { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--nf-muted); cursor: pointer; }

.nf__add {
  margin-top: 12px; padding: 8px 0;
  border: 0; background: none;
  font-family: var(--nf-sans); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--nf-accent-hi); cursor: pointer;
}
.nf__add:hover { color: var(--nf-text); }

/* Checkboxes */
.nf input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--nf-accent); }
.nf__c { display: flex; gap: 14px; font-size: 15px; line-height: 1.55; color: var(--nf-text); cursor: pointer; }
.nf__c a { color: var(--nf-accent-hi); text-decoration: underline; text-underline-offset: 3px; }

/* The terms the one "I agree" tick covers, lined up under its text */
.nf__terms { display: grid; gap: 10px; margin: 10px 0 4px; padding: 0 0 0 34px; list-style: none; font-size: 14px; line-height: 1.6; color: var(--nf-muted, rgba(255, 255, 255, .7)); }
.nf__terms li { position: relative; padding-left: 18px; }
.nf__terms li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--nf-accent); }
.nf__terms a { color: var(--nf-accent-hi); text-decoration: underline; text-underline-offset: 3px; }

/* Yes / No and multi-select as pills */
.nf__pills { display: flex; gap: 8px; }
.nf__pills--wrap { flex-wrap: wrap; }
.nf__pills label { position: relative; cursor: pointer; }
.nf__pills input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nf__pills span {
  display: inline-flex; align-items: center;
  min-height: 46px; padding: 0 22px;
  border: 1px solid var(--nf-line); border-radius: 999px;
  font-family: var(--nf-sans); font-size: 14px; color: var(--nf-muted);
  transition: color .2s, background-color .2s, border-color .2s;
}
.nf__pills label:hover span { color: var(--nf-accent-hi); border-color: var(--nf-accent); }
.nf__pills input:checked + span { color: var(--nf-on-accent); background: var(--nf-accent-hi); border-color: var(--nf-accent-hi); }
.nf__pills input:focus-visible + span { outline: 1px solid var(--nf-accent-hi); outline-offset: 3px; }

/* Lines the form says back to you */
.nf__award {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 16px 18px;
  border: 1px solid var(--nf-accent); border-radius: var(--nf-field-radius);
  background: rgba(216, 180, 106, .08);
  font-family: var(--nf-sans); font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--nf-accent);
}
.nf__award b { font-family: var(--nf-display); font-size: 22px; font-weight: 500; font-style: var(--nf-title-style); letter-spacing: 0; line-height: 1.2; text-transform: var(--nf-title-case); color: var(--nf-accent-hi); }
.nf__flag { padding: 12px 16px; border-left: 2px solid var(--nf-accent); background: rgba(216, 180, 106, .07); font-size: 14px; color: var(--nf-accent-hi); }
.nf__wait { padding: 26px 22px; border: 1px dashed var(--nf-line); border-radius: var(--nf-radius); text-align: center; font-size: 15px; color: var(--nf-muted); }

.nf__submit { margin-top: 28px; }

/* Submitted */
.nf-done {
  display: grid; justify-items: center; gap: 8px;
  padding: 64px 24px 56px;
  border: 1px solid var(--nf-line); border-radius: var(--nf-radius);
  background: var(--nf-card);
  text-align: center;
}
.nf-done:focus { outline: none; }
.nf-done__kicker { font-family: var(--nf-sans); font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--nf-accent); }
.nf-done__title { font-family: var(--nf-display); font-size: clamp(40px, 9vw, 64px); font-weight: 500; font-style: var(--nf-title-style); line-height: 1.05; text-transform: var(--nf-title-case); color: var(--nf-accent-hi); }
.nf-done__award { font-size: 16px; color: var(--nf-text); }

@media (min-width: 640px) {
  .nf-intro { padding: 80px 0 36px; }
  .nf__sec { padding: 36px 36px 40px; }
  .nf__grid { grid-template-columns: 1fr 1fr; }
  .nf__f--wide { grid-column: 1 / -1; }
  .nf__duo { grid-template-columns: 1fr 1fr; }
  .nf__trio { grid-template-columns: 1fr 1fr 1fr; }
  .nf__link { grid-template-columns: 1fr auto; align-items: center; gap: 18px; }
  .nf-need__list div { grid-template-columns: 220px 1fr; gap: 24px; }
}

/* --------------------------------------------------------------------------
   v2 form additions: the confidential note, and what follows a submission
   -------------------------------------------------------------------------- */
.nf__conf { color: var(--nf-accent-hi); }
.nf-done__next { font-size: 14px; color: var(--nf-muted); }
.nf-intro__lede a { color: var(--nf-accent-hi); text-decoration: underline; text-underline-offset: 3px; }
.nf-need__list a { color: var(--nf-accent-hi); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Rules & FAQ page (includes/rules-faq.php) - in each version's own colours,
   through the same --nf-* properties as the form page
   -------------------------------------------------------------------------- */
.rf { padding-bottom: 96px; color: var(--nf-text); font-family: var(--nf-sans); }
.rf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rf a:not(.btn):not(.rf-back):not(.rf-rule__link):not(.rf-toc a) { color: var(--nf-accent-hi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.rf-top { display: flex; align-items: center; gap: 22px; }
.rf-top__home { display: none; }

/* Header */
.rf-intro { padding: 52px 0 36px; animation: rf-in .8s cubic-bezier(.2, .75, .2, 1) both; }
.rf-kicker { font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--nf-accent); }
.rf-title { margin-top: 12px; font-family: var(--nf-display); font-size: clamp(50px, 12vw, 112px); font-weight: 400; font-style: var(--nf-title-style); line-height: .95; text-transform: var(--nf-title-case); color: var(--nf-text); }
.rf-lede { margin-top: 18px; max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--nf-text); }
.rf-cta { margin-top: 26px; }
@keyframes rf-in { from { opacity: 0; transform: translateY(14px); } }

/* At a glance */
.rf-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 36px 0 0; border-top: 1px solid var(--nf-line); }
.rf-facts div { padding: 16px 14px 14px 0; border-bottom: 1px solid var(--nf-line-soft); }
.rf-facts div:nth-child(odd) { padding-right: 18px; border-right: 1px solid var(--nf-line-soft); }
.rf-facts div:nth-child(even) { padding-left: 18px; }
.rf-facts dt { font-size: 10px; font-weight: 600; letter-spacing: .2em; line-height: 1.5; text-transform: uppercase; color: var(--nf-accent); }
.rf-facts dd { margin: 4px 0 0; font-family: var(--nf-display); font-size: clamp(19px, 4.6vw, 26px); line-height: 1.2; color: var(--nf-text); }

/* Layout: the menu, then the content */
.rf-layout { display: grid; gap: 20px; }
.rf-main { min-width: 0; display: grid; gap: 20px; }

/* On this page - on phones, a strip of links that stays under the bar */
.rf-toc {
  position: sticky; top: var(--bar); z-index: 5;
  margin: 0 -20px; padding: 10px 20px;
  overflow-x: auto; scrollbar-width: none;
  background: var(--nf-page-bg, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--nf-line-soft);
}
.rf-toc::-webkit-scrollbar { display: none; }
.rf-toc__label { display: none; }
.rf-toc ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.rf-toc__group { display: contents; }
.rf-toc__group > a { display: none; }
.rf-toc__group ol { display: contents; }
.rf-toc a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--nf-line-soft); border-radius: 999px;
  font-size: 12.5px; font-weight: 500; color: var(--nf-muted);
  transition: color .3s, border-color .3s, background-color .3s;
}
.rf-toc a span { font-family: var(--nf-display); font-style: italic; color: var(--nf-accent); }
.rf-toc a:hover { color: var(--nf-text); border-color: var(--nf-line); }
.rf-toc a.is-current { color: var(--nf-on-accent); background: var(--nf-accent-hi); border-color: var(--nf-accent-hi); }
.rf-toc a.is-current span { color: inherit; }

/* Sections */
.rf-sec { padding: 28px 20px 30px; border: 1px solid var(--nf-line); border-radius: var(--nf-radius); background: var(--nf-card); scroll-margin-top: calc(var(--bar) + 80px); }
.rf-sec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.rf-h { font-family: var(--nf-display); font-size: clamp(30px, 6vw, 44px); font-weight: 500; font-style: var(--nf-title-style); line-height: 1.05; text-transform: var(--nf-title-case); color: var(--nf-text); }
.rf-note { margin-top: 10px; font-size: 15px; color: var(--nf-muted); }

/* FAQ: search, expand all, the questions */
.rf-toggle {
  padding: 9px 16px;
  border: 1px solid var(--nf-line); border-radius: 999px; background: none;
  font: 600 11px var(--nf-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--nf-accent-hi);
  cursor: pointer; transition: border-color .3s, background-color .3s, color .3s;
}
.rf-toggle:hover { border-color: var(--nf-accent); }
.rf-toggle[aria-pressed="true"] { color: var(--nf-on-accent); background: var(--nf-accent-hi); border-color: var(--nf-accent-hi); }

.rf-search { position: relative; display: block; margin-top: 20px; }
.rf-search input {
  width: 100%; min-height: 52px; padding: 0 18px 0 48px;
  border: 1px solid var(--nf-line); border-radius: 999px;
  background: var(--nf-field-bg); color: var(--nf-text);
  font: 400 16px var(--nf-sans);
  transition: border-color .25s, box-shadow .25s;
}
.rf-search input::placeholder { color: var(--nf-muted); opacity: .75; }
.rf-search input:focus { outline: none; border-color: var(--nf-accent); box-shadow: 0 0 0 4px rgba(216, 180, 106, .16); }
.rf-search__icon { position: absolute; left: 18px; top: 50%; translate: 0 -50%; display: grid; color: var(--nf-accent); pointer-events: none; }
.rf-search__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rf-empty { margin-top: 16px; padding: 16px 18px; border: 1px dashed var(--nf-line); border-radius: var(--nf-field-radius); font-size: 15px; color: var(--nf-muted); }

.rf-faq { margin-top: 14px; }
.rf-q { border-top: 1px solid var(--nf-line-soft); }
.rf-q:first-child { border-top: 0; }
.rf-q summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 18px 0;
  font-size: 16.5px; font-weight: 600; line-height: 1.4; color: var(--nf-text);
}
.rf-q summary::-webkit-details-marker { display: none; }
.rf-q__n { font-family: var(--nf-display); font-style: italic; font-weight: 400; font-size: 15px; color: var(--nf-accent); }
.rf-q__text { transition: color .3s, translate .35s cubic-bezier(.2, .75, .2, 1); }
.rf-q summary:hover .rf-q__text { color: var(--nf-accent-hi); translate: 4px 0; }
.rf-q summary i { position: relative; width: 30px; height: 30px; border: 1px solid var(--nf-line); border-radius: 50%; transition: transform .4s cubic-bezier(.2, .75, .2, 1), background-color .3s, border-color .3s; }
.rf-q summary i::before,
.rf-q summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--nf-accent-hi); transition: background-color .3s; }
.rf-q summary i::after { transform: rotate(90deg); }
.rf-q[open] summary i { transform: rotate(45deg); background: var(--nf-accent-hi); border-color: var(--nf-accent-hi); }
.rf-q[open] summary i::before,
.rf-q[open] summary i::after { background: var(--nf-on-accent); }
.rf-q p { margin: 0; padding: 0 44px 22px 34px; font-size: 15.5px; line-height: 1.65; color: var(--nf-muted); }
.rf-q[open] p { animation: rf-in .45s cubic-bezier(.2, .75, .2, 1); }
.rf-faq.is-searching .rf-q[open] summary { color: var(--nf-accent-hi); }

/* Rules: one card per section */
.rf-sec--rules { padding-bottom: 22px; }
.rf-rules { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.rf-rule {
  padding: 20px 18px 22px;
  border: 1px solid var(--nf-line-soft); border-radius: var(--nf-field-radius);
  scroll-margin-top: calc(var(--bar) + 80px);
  transition: border-color .4s;
}
.rf-rule:target,
.rf-rule:hover { border-color: var(--nf-line); }
.rf-rule:target { box-shadow: 0 0 0 3px rgba(216, 180, 106, .14); }
.rf-rule__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.rf-rule__n {
  display: grid; place-items: center;
  width: 40px; height: 40px; border: 1px solid var(--nf-line); border-radius: 50%;
  font-family: var(--nf-display); font-style: italic; font-size: 18px; color: var(--nf-accent-hi);
}
.rf-rule h3 { font-family: var(--nf-display); font-size: 24px; font-weight: 500; font-style: var(--nf-title-style); line-height: 1.15; color: var(--nf-text); }
.rf-rule__link { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--nf-muted); opacity: .55; transition: opacity .3s, color .3s, background-color .3s; }
.rf-rule__link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.rf-rule:hover .rf-rule__link,
.rf-rule__link:focus-visible { opacity: 1; }
.rf-rule__link:hover { color: var(--nf-accent-hi); }
.rf-rule__link.is-copied { opacity: 1; color: var(--nf-accent-hi); }
.rf-rule__copied { position: absolute; right: 40px; top: 50%; translate: 0 -50%; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--nf-accent-hi); }
.rf-rule ul { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.rf-rule ul li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.6; color: var(--nf-text); }
.rf-rule ul li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; rotate: 45deg; background: var(--nf-accent); }

/* Still have a question? */
.rf-end {
  display: grid; gap: 20px;
  padding: 28px 22px;
  border: 1px solid var(--nf-accent); border-radius: var(--nf-radius);
  background: radial-gradient(120% 140% at 0% 0%, rgba(216, 180, 106, .14), transparent 60%), var(--nf-card);
}
.rf-end__title { font-family: var(--nf-display); font-size: clamp(26px, 5vw, 34px); font-style: var(--nf-title-style); line-height: 1.1; color: var(--nf-text); }
.rf-end__text { margin-top: 6px; font-size: 16px; color: var(--nf-muted); }
.rf-end__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.rf-back { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nf-accent-hi); transition: letter-spacing .4s; }
.rf-back:hover { letter-spacing: .2em; }

/* Back to top */
.rf-totop {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20;
  display: grid; place-items: center;
  width: 46px; height: 46px; border: 1px solid var(--nf-line); border-radius: 50%;
  background: var(--nf-page-bg, var(--nf-card)); color: var(--nf-accent-hi);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; translate: 0 10px; pointer-events: none;
  transition: opacity .4s, translate .5s cubic-bezier(.2, .75, .2, 1), border-color .3s;
}
.rf-totop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rf-totop.is-on { opacity: 1; translate: none; pointer-events: auto; }
.rf-totop:hover { border-color: var(--nf-accent); }

@media (min-width: 640px) {
  .rf-intro { padding: 76px 0 44px; }
  .rf-facts { grid-template-columns: repeat(4, 1fr); }
  .rf-facts div,
  .rf-facts div:nth-child(odd),
  .rf-facts div:nth-child(even) { padding: 18px 18px 16px; border-right: 1px solid var(--nf-line-soft); border-bottom: 0; }
  .rf-facts div:first-child { padding-left: 0; }
  .rf-facts div:last-child { border-right: 0; }
  .rf-toc { margin: 0 -32px; padding: 10px 32px; }
  .rf-sec { padding: 40px 40px 42px; }
  .rf-rule { padding: 24px 26px 26px; }
  .rf-end { grid-template-columns: 1fr auto; align-items: center; padding: 34px 40px; }
  .rf-top__home { display: inline; }
}

/* Desktop: the menu becomes a sticky column beside the content */
@media (min-width: 1024px) {
  .rf-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
  .rf-toc {
    top: calc(var(--bar) + 28px); margin: 0; padding: 0;
    overflow: visible;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0;
  }
  .rf-toc__label { display: block; margin-bottom: 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--nf-accent); }
  .rf-toc ol { display: grid; gap: 2px; white-space: normal; }
  .rf-toc__group { display: block; }
  .rf-toc__group > a { display: flex; }
  .rf-toc__group ol { display: grid; gap: 2px; margin: 2px 0 0 14px; padding-left: 12px; border-left: 1px solid var(--nf-line-soft); }
  .rf-toc a {
    display: flex; padding: 9px 12px;
    border: 0; border-radius: 10px;
    font-size: 14px; line-height: 1.35;
  }
  .rf-toc a:hover { background: rgba(216, 180, 106, .07); }
  .rf-toc a.is-current { color: var(--nf-text); background: rgba(216, 180, 106, .14); }
  .rf-toc a.is-current span { color: var(--nf-accent); }
  .rf-toc a.is-within { color: var(--nf-text); }
  .rf-sec { scroll-margin-top: calc(var(--bar) + 28px); }
  .rf-rule { scroll-margin-top: calc(var(--bar) + 28px); }
  .rf-totop { right: 28px; bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .rf-intro,
  .rf-q[open] p { animation: none; }
  .rf-q__text,
  .rf-totop { transition: none; }
}

/* Paid / #Admiration / Neither beside each work link */
.nf__pills--sm { flex-wrap: wrap; gap: 6px; }
.nf__pills--sm span { min-height: 38px; padding: 0 14px; font-size: 13px; }
.nf .nf__link + .nf__link { margin-top: 4px; }

/* Dropdown lists: the browser draws the open list itself, so give its
   options solid colours that read on it (a version can change them) */
.nf select option,
.nf select optgroup { background-color: var(--nf-option-bg, #15120d); color: var(--nf-option-text, #f3ead6); }
.nf select optgroup { font-weight: 700; color: var(--nf-option-group, #e6c879); }
.nf select option:disabled { color: var(--nf-option-muted, #9a917f); }

/* Answers the server sent back */
.nf__status { margin: 0 0 16px; padding: 12px 16px; border: 1px solid rgba(255, 110, 110, .45); border-radius: 12px; color: #ffb4b4; font-size: 14px; }
.nf__err { display: block; margin-top: 6px; color: #ff9b9b; font-size: 13px; }
.nf [aria-invalid="true"] { border-color: rgba(255, 110, 110, .7) !important; }
.nf__submit.is-busy { opacity: .85; }
.nf-done__ref { font-size: 14px; opacity: .75; }
.nf-done__ref b { letter-spacing: .04em; }

/* Opens the chosen award's details dialog, without leaving the form */
.nf__more { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 11px 20px; border: 1px solid rgba(216, 180, 106, .45); border-radius: 999px; background: rgba(216, 180, 106, .06); color: var(--nf-accent-hi); font: 600 14px/1.4 var(--nf-sans, inherit); text-align: left; cursor: pointer; transition: border-color .25s, background .25s; }
.nf__more:hover, .nf__more:focus-visible { border-color: var(--nf-accent); background: rgba(216, 180, 106, .12); }
.nf__more i { font-style: normal; transition: transform .25s; }
.nf__more:hover i { transform: translateX(4px); }
.nf__more[hidden] { display: none; }
.nf__more b { font-weight: 700; }

/* The thank-you panel after a nomination goes through */
.nf-done { gap: 12px; padding: 56px 24px 48px; }
.nf-done__mark { font-size: 30px; color: var(--nf-accent-hi); }
.nf-done__title { font-size: clamp(34px, 8vw, 56px); }
.nf-done__lede { max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--nf-text); }
.nf-done__list { display: grid; gap: 8px; max-width: 460px; margin: 10px 0 6px; padding: 18px 22px; list-style: none; border: 1px solid var(--nf-line); border-radius: 14px; text-align: left; font-size: 14.5px; color: var(--nf-muted); }
.nf-done__list li { position: relative; padding-left: 22px; }
.nf-done__list li::before { content: "\2726"; position: absolute; left: 0; top: 0; font-size: 11px; color: var(--nf-accent); }
.nf-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }