/* berayefe.com reference: palette, background, island navigation and card surfaces. */
:root {
  color-scheme: dark;
  --bg: #08080b;
  --bg-deep: #050507;
  --ink: #f4f4f6;
  --muted: #b3b5c2;
  --accent: #e2c88d;
  --paper: var(--bg);
  --white: #0d0d12;
  --red: var(--accent);
  --line: rgba(255,255,255,.1);
  --sans: 'Sora',system-ui,sans-serif;
  --serif: 'Manrope',system-ui,sans-serif;
  --card: linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
}
body {
  background: radial-gradient(900px 700px at 15% 10%,rgba(226,200,141,.12),transparent 60%),
    radial-gradient(900px 900px at 85% 10%,rgba(120,160,220,.08),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg-deep));
  background-attachment: fixed;
  font-size: 15px;
  line-height: 1.8;
}
html {scroll-padding-top:100px}
::selection {background:rgba(226,200,141,.3);color:var(--ink)}
.shell {width:min(1200px,calc(100% - 160px))}
.header.shell {
  position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:50;
  width:max-content;max-width:calc(100% - 32px);min-height:0;padding:10px 18px;
  border:1px solid rgba(255,255,255,.08);border-radius:999px;
  background:radial-gradient(160px 60px at 20% 40%,rgba(226,200,141,.12),transparent 60%),
    linear-gradient(180deg,rgba(10,10,16,.92),rgba(6,6,10,.92));
  backdrop-filter:blur(14px);
  box-shadow:0 18px 36px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06);
}
.identity {display:none}
.navigation {gap:14px;font-size:14px;position:static;display:flex;padding:0;border:0;background:none}
.navigation>a {padding:6px 10px;border-radius:999px;color:var(--muted);transition:background .2s,color .2s}
.navigation>a:hover,.navigation>a.active {background:rgba(226,200,141,.12);color:var(--accent)}
.nav-account {font-weight:500;gap:9px}
.nav-divider {height:18px;margin-inline:0}
.menu-toggle {display:none}
main {padding-top:100px}
.flash {position:relative;margin-top:90px;margin-bottom:-75px}
.hero {padding-top:90px;padding-bottom:80px;gap:90px;align-items:center;min-height:680px}
.hero-heading {padding-top:0}
.eyebrow {font-size:10px;letter-spacing:.12em;color:var(--muted)}
.red-dot {border-radius:50%;background:var(--accent)}
.hero h1 {font:700 clamp(38px,4.2vw,60px)/1.18 var(--serif);letter-spacing:.01em;margin:22px 0}
.hero h1 em {font-style:normal;font-weight:700;white-space:normal;color:var(--ink)}
.hero-description {border:0;padding:0;margin:0 0 26px}
.hero-description p {font-size:15px;color:var(--muted);line-height:1.85;max-width:420px}
.annotation,.hero-margin-note,.cover-caption {display:none}
.text-action {font-size:13px;color:var(--accent);border-bottom:0;padding:0;gap:12px}
.text-action svg {transform:none}
.hero-feature,.post-card,.profile-settings,.auth-card,.writing-preview,.empty-feature {
  border:0;border-radius:14px;background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.hero-feature {padding:30px;min-width:0;transition:box-shadow .2s,transform .2s}
.hero-feature:hover,.post-card:hover {
  transform:translateY(-2px);
  box-shadow:0 18px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(226,200,141,.4);
}
.feature-overline {font-size:10px;letter-spacing:.08em;color:var(--muted);margin-bottom:26px}
.feature-cover:has(.graphic-cover) {display:none}
.feature-cover,.card-cover {border-radius:10px;overflow:hidden}
.featured-title-row {margin-top:0;align-items:flex-start;gap:16px}
.featured-title-row h2 {font:700 28px/1.35 var(--serif);letter-spacing:.01em}
.featured-title-row .eyebrow {font-size:10px;margin-bottom:13px}
.feature-excerpt {font-size:14px;margin-top:17px;line-height:1.85}
.feature-meta {font-size:11px;margin-top:25px;padding-top:18px;border-top:1px solid var(--line)}
.circle-link {width:36px;height:36px;border-color:rgba(226,200,141,.3);color:var(--accent);background:rgba(226,200,141,.05)}
.circle-link:hover {background:rgba(226,200,141,.15);color:var(--accent)}
.circle-link svg {width:18px;transform:none}
.feature-cover:has(img) {margin-bottom:24px}
.post-cover.hero-art {height:220px}
.ticker {border:0;padding:18px 22px;border-radius:14px;background:var(--card);gap:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ticker>div {gap:22px}
.ticker-label,.ticker-count {font-size:10px}
.ticker a {font-size:12px;gap:10px;color:var(--muted)}
.recent {padding-block:64px 72px}
.section-top {margin-bottom:24px}
.section-top h2 {font:700 32px/1.3 var(--serif);letter-spacing:.01em}
.section-top .eyebrow {font-size:10px;margin-bottom:12px}
.card-grid {gap:22px}
.post-card {padding:24px;transition:transform .2s,box-shadow .2s}
.card-cover:has(.graphic-cover) {display:none}
.card-cover:has(img) {margin-bottom:22px}
.card-meta {font-size:9px;letter-spacing:.08em;margin-bottom:16px;flex-wrap:wrap}
.post-card h3 {font:600 21px/1.45 var(--serif);letter-spacing:0;margin-bottom:13px}
.post-card>p {font-size:13px;line-height:1.85;margin-bottom:24px}
.card-read {font-size:10px;padding-top:17px;gap:12px}
.card-author {font-size:11px;color:var(--accent);margin-bottom:12px}
.feature-meta strong {font-weight:500;color:var(--ink)}
.card-read svg {color:var(--accent);transform:none}
.about-strip {border:0;grid-template-columns:1fr 1fr;gap:60px;padding-block:0 72px;align-items:start}
.oversized-asterisk {display:none}
.about-strip h2 {font:700 30px/1.4 var(--serif);letter-spacing:.01em;margin-top:14px}
.about-strip-copy p {font-size:14px;max-width:none;line-height:1.85}
.about-strip .eyebrow {font-size:10px}
.reading-invite {border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);padding:30px;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:72px}
.reading-invite>.eyebrow {grid-column:1/-1;font-size:10px}
.reading-invite h2 {font:700 28px/1.35 var(--serif);letter-spacing:.01em}
.reading-invite p {font-size:13px;max-width:none}
.solid-button,.outline-button {border-radius:12px;font-size:12px;padding:13px 18px;gap:12px}
.solid-button {background:var(--accent);color:var(--bg);border-color:var(--accent)}
.solid-button:hover {background:#edd8ad;border-color:#edd8ad}
.outline-button {background:rgba(255,255,255,.02);border-color:var(--line);color:var(--ink)}
.outline-button:hover {background:rgba(226,200,141,.08);border-color:rgba(226,200,141,.35)}
.footer {border-color:var(--line);padding-top:28px}
.footer-name {font:700 22px var(--serif);letter-spacing:.01em}
.footer>div>p,.footer-links,.footer-bottom {font-size:11px}
.page-heading,.about-page,.legal-page,.account-page,.auth-page,.install-page,.error-page,.admin-layout {padding-top:110px}
.page-heading h1,.account-page h1,.admin-heading h1,.legal-page h1,.install-page h1,.about-page>h1,.auth-editorial h1,.error-page h1 {font-family:var(--serif);font-weight:700;font-size:clamp(34px,4vw,52px);letter-spacing:.01em;line-height:1.25}
.auth-editorial h1 em,.about-page>h1 em {font-style:normal;font-weight:700}
.page-heading>p:last-child,.auth-editorial p {font-size:14px}
.archive-search {border:0;background:var(--card);padding:16px 20px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.archive-filters a,.pagination a {border-radius:10px}
.archive-filters a.selected,.pagination a[aria-current] {background:rgba(226,200,141,.12);color:var(--accent)}
.archive-filters a:hover {color:var(--accent)}
.archive-sort select {background:var(--bg);border-radius:8px}
.archive-grid {row-gap:22px}
.article {padding-top:110px}
.article-heading {max-width:850px;margin:36px auto}
.article-heading h1 {font:700 clamp(32px,4.2vw,56px)/1.25 var(--serif);letter-spacing:.01em}
.article-kicker {font-size:11px;letter-spacing:.05em}
.article-lead {font-size:16px}
.article-byline {font-size:12px}
.author-initial {background:rgba(226,200,141,.1);color:var(--accent);border-radius:50%;font:600 16px var(--sans)}
.article-image:has(.graphic-cover) {display:none}
.article-image img {border-radius:14px}
.article-aside {top:95px}
.article-aside>.eyebrow,.article-aside nav {font-size:11px}
.prose {font:400 16px/1.95 var(--sans);color:var(--muted)}
.prose h2,.prose h3 {font-family:var(--serif);font-weight:700;color:var(--ink);letter-spacing:.01em;scroll-margin-top:95px}
.prose h2 {font-size:28px}
.prose h3 {font-size:22px}
.prose strong {color:var(--ink)}
.prose blockquote {font-size:20px;font-style:normal}
.prose code {background:rgba(255,255,255,.07);border-radius:5px}
.article-end {font:12px var(--sans)}
.related .post-card {border-top:0;padding:24px}
.related .section-top h2 {font-size:30px}
.about-story,.account-layout,.settings-form {border-color:var(--line)}
.story-number {color:var(--accent);font:700 70px var(--serif);opacity:.5}
.about-profile {display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.about-profile p {font-size:18px;font-weight:600;margin-top:12px}
.about-profile>span:not(.story-number) {font-size:12px;color:var(--muted)}
.about-contact {padding-block:24px 36px}
.contributor-details {border-top:1px solid var(--line);margin-bottom:22px}
.contributor-details summary {cursor:pointer;font-size:15px;font-weight:600;color:var(--muted)}
.contributor-bio {max-width:740px;font-size:14px;line-height:1.85;color:var(--muted);margin-block:18px 24px}
.about-contact-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.about-contact-card {position:relative;display:grid;gap:10px;padding:20px 22px 24px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .2s,box-shadow .2s}
.about-contact-card:hover {transform:translateY(-2px);box-shadow:0 18px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(226,200,141,.4)}
.about-contact-card>span {font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.about-contact-card strong {font-size:14px;font-weight:500;overflow-wrap:anywhere;padding-right:20px}
.about-contact-card svg {position:absolute;right:20px;bottom:27px;color:var(--accent);width:16px}
@media(max-width:900px) {.about-contact-grid {grid-template-columns:1fr}}
.auth-page {gap:70px}
.auth-mark {font:100px var(--sans);opacity:.5}
.auth-card h2 {font:700 32px var(--serif);letter-spacing:0}
.stacked-form label,.post-editor label {font-size:12px}
.stacked-form input,.stacked-form textarea,.post-editor input:not([type=checkbox]),.post-editor textarea {border-radius:10px;background:rgba(0,0,0,.16);font-size:14px;padding:12px 14px}
input::placeholder,textarea::placeholder {color:#818391}
.stacked-form small,.post-editor label>small,.form-note,.form-description,.auth-switch {font-size:11px}
.form-error {background:rgba(255,111,111,.08);color:#ffb5b5;border-color:#da7c7c;border-radius:10px}
.flash {background:#14211b;border-color:#83b79a;border-radius:12px;color:#c4e9d1}
.small-section-title h2,.profile-settings h2,.editor-options h2 {font:600 24px var(--serif)}
.saved-list h3,.admin-post-info h2 {font:600 21px/1.4 var(--serif)}
.saved-week,.admin-week {font-style:normal;font-weight:600}
.saved-list article {padding:22px;background:var(--card);border:0;border-radius:14px;margin-bottom:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.admin-sidebar {top:95px;border:0;border-radius:14px;background:var(--card);padding:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.admin-sidebar>a {font-size:12px}
.admin-heading p:last-child:not(.eyebrow) {font-size:13px}
.stats-row {border:0;padding:0;gap:16px}
.stats-row>div,.stats-row>div:first-child {background:var(--card);padding:20px;border:0;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.stats-row span {font-size:9px}
.stats-row strong {font:700 38px var(--serif);color:var(--accent)}
.admin-tabs {font-size:12px;margin-bottom:16px}
.admin-post-row {background:var(--card);border:0;border-radius:14px;padding:22px;margin-bottom:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.muted {font-size:11px}
.status-badge {border-radius:6px;background:rgba(226,200,141,.12);color:var(--accent);font-size:10px}
.status-published {background:rgba(117,187,147,.12);color:#a1d5b5}
.status-archived {background:rgba(255,255,255,.05);color:var(--muted)}
.post-editor input.editor-title-input {font:600 30px/1.4 var(--serif);letter-spacing:0;padding:14px;background:rgba(0,0,0,.16);border:1px solid var(--line)}
.editor-content>label>textarea {border:1px solid var(--line);padding:12px 14px}
.writing-toolbar button {border-radius:6px;font-size:11px}
.writing-toolbar>div button:hover {background:rgba(226,200,141,.12)}
.post-editor .writing-area {border:1px solid var(--line);padding:18px;margin-top:12px;font-size:15px}
.editor-options {border:0;padding:22px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.editor-options input[type=file]::file-selector-button {border-radius:8px;background:rgba(255,255,255,.05);color:var(--ink)}
.check-label input {accent-color:var(--accent)}
.publish-actions p,.draft-message {font-size:11px}
.reader-table th {border-color:var(--line);font-size:10px}
.reader-table {font-size:12px}
.table-scroll {border-radius:14px;background:var(--card);padding:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.role-guide {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}
.role-guide>div,.user-card {padding:22px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.role-guide strong {color:var(--accent);font-size:14px}
.role-guide p,.role-instructions,.role-self-note {color:var(--muted);font-size:12px}
.role-guide p {margin-top:8px}
.role-instructions {margin-bottom:24px}
.role-instructions a {color:var(--accent);text-decoration:underline}
.user-search {margin-bottom:24px}
.user-search>label,.role-form>label {font-size:11px;font-weight:600}
.user-search>div {display:flex;gap:12px;margin-top:8px}
.user-search input,.role-form input,.role-form select {border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:11px 12px;min-width:0;font-size:13px}
.user-search input {flex:1}
.user-cards {display:grid;gap:16px}
.user-card {display:grid;gap:20px}
.user-details h2 {font-size:20px;line-height:1.4}
.user-details h2 small {font-size:12px;color:var(--muted);font-weight:400}
.user-details>p {font-size:13px;color:var(--muted);overflow-wrap:anywhere;margin-block:5px 12px}
.user-details>.muted {margin-left:12px}
.role-form {display:grid;grid-template-columns:minmax(110px,.7fr) minmax(140px,1fr) auto;gap:14px;align-items:end;border-top:1px solid var(--line);padding-top:18px}
.role-form input,.role-form select {display:block;width:100%;margin-top:7px}
.role-form button {min-height:44px;white-space:nowrap}
@media(max-width:680px) {
  .role-guide {grid-template-columns:1fr;gap:10px}
  .role-guide>div,.user-card {padding:18px}
  .role-form {grid-template-columns:1fr}
  .user-details>.muted {display:block;margin:10px 0 0}
}
.empty-state {border-radius:14px}
@media (max-width:1205px) {
  .shell {width:calc(100% - 80px)}
  .header.shell {top:12px;padding:0;border:0;background:none;box-shadow:none;display:grid;justify-items:center;gap:10px;width:auto}
  .menu-toggle {display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:radial-gradient(120px 40px at 20% 40%,rgba(226,200,141,.18),transparent 60%),linear-gradient(180deg,rgba(12,12,18,.95),rgba(6,6,10,.95));box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
  .navigation {display:none;min-width:260px;padding:16px 18px;border-radius:22px;background:radial-gradient(160px 80px at 80% -20%,rgba(226,200,141,.2),transparent 60%),linear-gradient(180deg,rgba(12,12,18,.96),rgba(6,6,10,.96));border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(0,0,0,.55);flex-direction:column;align-items:stretch;gap:10px;position:static}
  .navigation.open {display:flex}
  .navigation>a {padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.02)}
  .nav-divider {display:none}
  .nav-account {border:0;margin:0}
  .hero {gap:50px;min-height:600px;padding-top:80px;padding-bottom:64px}
  .hero h1 {font-size:44px;letter-spacing:.01em}
  .featured-title-row h2 {font-size:25px}
  .hero-feature {padding:25px}
}
@media (max-width:900px) {
  .hero {grid-template-columns:1fr;gap:35px;min-height:0;padding-top:65px}
  .hero-heading {text-align:center}
  .hero-description {justify-content:center}
  .hero-description p {max-width:520px}
  .hero h1 {font-size:48px}
  .hero-feature {max-width:650px;width:100%;margin-inline:auto}
  .card-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-strip {gap:35px}
  .admin-sidebar {position:static;padding:15px;flex-wrap:wrap}
  .admin-sidebar-bottom {margin:0;padding:0;border:0}
  .auth-page {gap:35px}
  .auth-editorial h1 {font-size:42px}
}
@media (max-width:680px) {
  .shell {width:calc(100% - 44px)}
  main {padding-top:78px}
  .hero {padding-top:38px;padding-bottom:44px;gap:32px}
  .hero h1,.hero h1 em {font-size:clamp(32px,9vw,42px);letter-spacing:.01em;white-space:normal;margin-block:18px}
  .hero-description p {font-size:14px}
  .hero-description p br {display:none}
  .hero-feature {padding:22px;border:0}
  .feature-overline {font-size:9px;margin-bottom:20px}
  .featured-title-row h2 {font-size:24px}
  .feature-excerpt {font-size:13px}
  .feature-meta {font-size:10px}
  .ticker {gap:14px;padding:18px}
  .ticker-label {width:100%;border:0;padding:0}
  .ticker>div {gap:12px 18px}
  .ticker a {font-size:11px}
  .recent {padding-block:40px 44px}
  .section-top {gap:12px}
  .section-top h2,.about-strip h2 {font-size:26px;letter-spacing:.01em}
  .section-top .text-action {font-size:11px;margin-top:20px;gap:5px}
  .card-grid {grid-template-columns:1fr;gap:16px}
  .post-card {padding:22px}
  .post-card h3 {font-size:21px}
  .post-card>p {font-size:13px}
  .card-meta {font-size:9px}
  .card-read {font-size:10px}
  .about-strip {grid-template-columns:1fr;gap:20px;padding-bottom:44px}
  .about-strip-copy {grid-column:auto}
  .about-strip-copy p {font-size:14px}
  .reading-invite {padding:24px;grid-template-columns:1fr;gap:18px;margin-bottom:44px}
  .reading-invite h2 {font-size:26px}
  .reading-invite p {font-size:13px}
  .footer {gap:22px}
  .footer-name {font-size:22px}
  .footer-links {font-size:11px;gap:20px;flex-wrap:wrap}
  .footer-bottom {font-size:10px}
  .page-heading,.about-page,.legal-page,.account-page,.auth-page,.install-page,.error-page,.admin-layout,.article {padding-top:100px}
  .page-heading h1,.account-page h1,.admin-heading h1,.legal-page h1,.install-page h1,.about-page>h1,.auth-editorial h1,.error-page h1 {font-size:34px;letter-spacing:.01em}
  .article-heading h1 {font-size:32px;letter-spacing:.01em}
  .article-kicker {font-size:10px;flex-wrap:wrap;gap:12px}
  .article-columns {margin-top:28px}
  .article-aside nav {font-size:11px}
  .prose {font-size:15px}
  .prose h2 {font-size:25px}
  .prose blockquote {font-size:19px}
  .auth-card {padding:24px}
  .auth-card h2 {font-size:28px}
  .auth-editorial h1 {font-size:38px}
  .admin-heading p:last-child:not(.eyebrow) {font-size:12px}
  .admin-sidebar {gap:8px 16px}
  .admin-sidebar>a {font-size:11px}
  .stats-row {gap:8px}
  .stats-row>div,.stats-row>div:first-child {padding:13px 10px}
  .stats-row span {font-size:8px;letter-spacing:0}
  .stats-row strong {font-size:29px}
  .admin-tabs {font-size:11px;gap:18px}
  .admin-post-row {padding:18px;gap:12px}
  .admin-post-info h2 {font-size:19px}
  .admin-post-info .muted {font-size:10px}
  .admin-row-actions {margin-left:47px}
  .post-editor input.editor-title-input {font-size:26px}
  .editor-options {padding:20px;gap:0 15px}
  .archive-search {padding:14px 16px}
  .search-input {border-color:var(--line)}
  .article-lead {font-size:14px}
}
@media print {
  body {background:white;color:black}
  .prose,.prose h2,.prose h3,.prose strong {color:black}
  main {padding-top:0}
}