:root {
  --aside-w: 236px;
  --maxw: 880px;

  --page:         #eceadf;
  --card:         #faf9f3;
  --panel:        #dfe5d8;
  --ink:          #2f4a3e;
  --ink-strong:   #22352c;
  --accent:       #7a8c6e;
  --label:        #6b7d60;
  --body:         #33433a;
  --border:       rgba(47, 74, 62, .16);
  --rule:         #2f4a3e;
  --link:         #2f4a3e;
  --link-line:    rgba(47, 74, 62, .35);
  --btn-bg:       #2f4a3e;
  --btn-fg:       #f5f3ec;
  --btn-bg-hover: #22352c;
  --photo-a:      #cfd4c6;
  --photo-b:      #d8dccf;
  --photo-label:  #7e8473;
  --glass:        #2f4a3e;
  --glass-empty:  #a6b79e;

  color-scheme: light;
}

/* Auto dark, unless the user has explicitly chosen light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:        #13211c;
    --card:        #182a23;
    --panel:       #1f342b;
    --ink:         #cfe0d4;
    --ink-strong:  #eae7da;
    --accent:      #7f9a86;
    --label:       #6f8a78;
    --body:        #c4cdc4;
    --border:      rgba(207, 224, 212, .13);
    --rule:        rgba(207, 224, 212, .26);
    --link:        #b9d2bf;
    --link-line:   rgba(185, 210, 191, .35);
    --btn-bg:      #cfe0d4;
    --btn-fg:      #13211c;
    --btn-bg-hover:#eaf2ec;
    --photo-a:     #1b2c25;
    --photo-b:     #21342c;
    --photo-label: #6f8478;
    --glass:       #cfe0d4;
    --glass-empty: #45605321;
    --glass-empty: #4a6155;
    color-scheme: dark;
  }
}

/* Explicit manual override (set by the theme toggle) */
:root[data-theme="dark"] {
  --page:        #13211c;
  --card:        #182a23;
  --panel:       #1f342b;
  --ink:         #cfe0d4;
  --ink-strong:  #eae7da;
  --accent:      #7f9a86;
  --label:       #6f8a78;
  --body:        #c4cdc4;
  --border:      rgba(207, 224, 212, .13);
  --rule:        rgba(207, 224, 212, .26);
  --link:        #b9d2bf;
  --link-line:   rgba(185, 210, 191, .35);
  --btn-bg:      #cfe0d4;
  --btn-fg:      #13211c;
  --btn-bg-hover:#eaf2ec;
  --photo-a:     #1b2c25;
  --photo-b:     #21342c;
  --photo-label: #6f8478;
  --glass:       #cfe0d4;
  --glass-empty: #4a6155;
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ---------- layout ---------- */
.feed {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px 88px;
}

/* ---------- masthead ---------- */
.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 24px;
  flex-wrap: wrap;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--rule);
}
.masthead__title { max-width: 46ch; }
.masthead__brand {
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: .005em;
  color: var(--ink-strong);
}
.masthead__tag {
  margin: 4px 0 0;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--accent);
}

/* ---------- theme toggle ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--label);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 6px;
  line-height: 0;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--ink); }
.theme-toggle .ico { display: block; }

/* Show the icon for the theme you'd switch TO: moon in light, sun in dark */
.theme-toggle .ico-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ico-sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .ico-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .ico-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

/* ---------- posts list ---------- */
.posts { list-style: none; margin: 0; padding: 0; }

.post {
  display: grid;
  grid-template-columns: var(--aside-w) 1fr;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 26px;
}
/* Alternate: every even note puts the aside on the right.
   Articles are wrapped in <li>, so we count the list items. The count
   runs across all posts in the list, so appended pages keep alternating. */
.posts > li:nth-of-type(even) .post { grid-template-columns: 1fr var(--aside-w); }
.posts > li:nth-of-type(even) .post__aside { order: 2; }

/* ---------- aside (details -> photo -> rating) ---------- */
.post__aside {
  background: var(--panel);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.meta { display: flex; flex-direction: column; gap: 14px; }
.meta__row { display: block; }
.meta__k {
  display: block;
  margin-bottom: 3px;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label);
}
.meta__v {
  font-family: system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--body);
}
.meta__link {
  font-weight: 500;
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid var(--link-line);
  transition: border-color .15s;
}
.meta__link:hover { border-bottom-color: var(--link); }

/* ---------- photo placeholder ----------
   In production swap the <figcaption> for an <img>:
   .post__photo img { width:100%; height:100%; object-fit:cover; display:block; } */
.post__photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg,
      var(--photo-a) 0, var(--photo-a) 8px,
      var(--photo-b) 8px, var(--photo-b) 16px);
  display: grid;
  place-items: center;
}
.post__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post__photo figcaption {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .03em;
  color: var(--photo-label);
}

/* ---------- rating ---------- */
.rating { margin-top: auto; }
.rating__label {
  display: block;
  margin-bottom: 7px;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label);
}
.rating__glasses { display: flex; gap: 6px; }
.glass { width: 17px; height: 19px; display: block; }
.glass--full  { color: var(--glass); }
.glass--empty { color: var(--glass-empty); }

/* ---------- body / prose ---------- */
.post__body { padding: 30px 32px; }
.post__title {
  margin: 0 0 16px;
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.18;
  color: var(--ink-strong);
  text-wrap: balance;
}
.post__prose p { margin: 0 0 15px; font-size: 17px; line-height: 1.76; color: var(--body); }
.post__prose p:last-child { margin-bottom: 0; }
.post__prose em { font-style: italic; }

/* ---------- pagination / fallback ---------- */
.pagination {
  text-align: center;
  margin-top: 26px;
  padding: 34px 0 6px;
  border-top: 1px solid var(--border);
}
.pagination__next {
  display: inline-block;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  padding: 12px 26px;
  border-radius: 2px;
  text-decoration: none;
  transition: background .15s;
}
.pagination__next:hover { background: var(--btn-bg-hover); }
.pagination__hint {
  margin-top: 12px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--label);
  opacity: .85;
}
.pn-loading { display: none; }
.pagination.is-loading .pagination__next { pointer-events: none; opacity: .55; }
.pagination.is-loading .pn-label { display: none; }
.pagination.is-loading .pn-loading { display: inline; }

/* injected by feed.js when there are no more pages */
.feed-end {
  margin-top: 26px;
  padding: 42px 0 6px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label);
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .post,
  .posts > li:nth-of-type(even) .post { grid-template-columns: 1fr; }
  .posts > li:nth-of-type(even) .post__aside { order: 0; }
  .post__aside { order: 2; }
  .post__body  { order: 1; }
  .post__photo { max-width: 240px; }
  .post__title { font-size: 25px; }
  .masthead { padding-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}