/* ─── Reset & Base ─── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg: #fafafa;
  --color-text: #1a1a1a;
  --color-muted: #666;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-border: #e5e5e5;
  --color-card-bg: #fff;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  --max-width: 42rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a2e;
    --color-text: #e0e0e0;
    --color-muted: #999;
    --color-accent: #60a5fa;
    --color-accent-hover: #93bbfd;
    --color-border: #2a2a3e;
    --color-card-bg: #22223a;
  }
}

html {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ─── Container ─── */

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ─── Links ─── */

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.15s ease;

  &:hover {
    color: var(--color-accent-hover);
  }
}

/* ─── Hero ─── */

.hero {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center 60%;
  display: block;
  filter: brightness(0.6);
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tagline {
  margin-top: 0.75rem;
  font-size: 1.15rem;
  color: #ddd;
  font-weight: 400;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.hero-links {
  margin-top: 1.5rem;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  font-size: 0.95rem;
}

.hero-links a {
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid transparent;

  &:hover {
    color: #fff;
    border-bottom-color: #fff;
  }
}

/* ─── Sections ─── */

section {
  padding: 3rem 0;
}

section h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

section p {
  max-width: 38rem;
}

/* ─── About ─── */

/* Two columns across the wide container: the text at a width that reads, and
   the photo beside it. Both start at the edges the project cards do. The
   heading goes with its text, so the two sit level with the photo's middle
   as one block. */
.about-content {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.7;
}

/* The photo is a tall one. This much of it: the sunset at the top, the
   water, and the shore it was taken from. */
.about-image {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 57%;
  border-radius: 0.5rem;
  display: block;
}

/* One column once the two cannot share the width, and less of the photo:
   under the text it is as wide as the page, and at its full shape it would
   push the projects off a tablet's screen. */
@media (max-width: 52rem) {
  .about-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about-image {
    aspect-ratio: 16 / 9;
    object-position: center 42%;
  }
}

/* ─── Projects ─── */

/* The home page's sections share one container, wider than the prose of a
   thought: room for three projects across, and one left edge for every
   heading on the page. */
.container--wide {
  max-width: 72rem;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* A flagship project spans the whole row, so its screenshots sit side by side
   instead of stacking a tall phone shot that blows out the card height. */
.project-card--wide {
  grid-column: 1 / -1;
}

.project-gallery {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.25rem 0;
  align-items: stretch;
}

.project-gallery-shot {
  flex: 1 1 auto;
  min-width: 0;
  height: 320px;
  object-fit: cover;
  object-position: top;
  border-radius: 0.375rem;
  display: block;
}

.project-gallery-phone {
  flex: 0 0 auto;
  width: auto;
  height: 320px;
  object-fit: contain;
  border-radius: 0.375rem;
  display: block;
}

@media (max-width: 52rem) {
  .project-grid {
    grid-template-columns: 1fr;
  }
}

/* The screenshot and the phone stack only on a phone. On a tablet the card
   is still wide enough for the two side by side, and stacked there the phone
   shot was as wide as the page and three times as tall as the screen. */
@media (max-width: 600px) {
  .project-gallery {
    flex-direction: column;
  }
  .project-gallery-shot,
  .project-gallery-phone {
    width: 100%;
    height: auto;
  }
}

.project-card {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-card-bg);
  overflow: hidden;
  transition: border-color 0.15s ease;

  &:hover {
    border-color: var(--color-accent);
  }
}

/* Image links on project cards: visually identical to a plain image — no
   underline, no border, no color shift — but a real anchor, so it gets the
   pointer cursor, middle-click, "open in new tab" and keyboard activation.
   The focus ring is kept: focus-visible only shows it for keyboard users, so
   the card still looks untouched to everyone else. */
.project-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 0;

  & img {
    border: 0;
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }
}

.project-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: top;
  display: block;
}

.project-image--logo {
  object-fit: contain;
  object-position: center;
  background: #fff;
  padding: 1.5rem;
}

.project-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  height: 180px;
  background: #fff;
  padding: 1.5rem;
}

.project-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 0.75rem;
}

.project-card-body {
  padding: 1.25rem;
}

.project-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.project-card p {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.5;
}

.project-card-inline-image {
  width: 100%;
  border-radius: 0.375rem;
  margin-top: 0.75rem;
  display: block;
}

/* A project that is not out yet: two screenshots of equal standing, a badge
   beside its name, and what it does as a list, since there is nowhere to
   click through to and read it. The shots are shown whole, at the shape they
   were taken in, with a hairline to tell a dark one from a dark card. */
.project-gallery--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-shot {
  border-radius: 0.375rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--color-border);

  & img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Side by side they are too small to read below this, so one above the
   other, each as wide as the card. */
@media (max-width: 52rem) {
  .project-gallery--pair {
    grid-template-columns: 1fr;
  }
}

.project-icon {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.55rem;
  vertical-align: -0.4rem;
}

.project-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--color-accent);
  border-radius: 1rem;
  color: var(--color-accent);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.15em;
}

.project-card-body--split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: 1.5rem 3rem;
  align-items: start;
}

.project-card p {
  text-wrap: pretty;
}

.project-card .project-meta {
  margin-top: 0.75rem;
  font-size: 0.8rem;
}

.project-features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 2.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.project-features strong {
  display: block;
  color: var(--color-text);
  font-weight: 600;
}

/* Narrower than the two halves can share: what it is first, then what it
   does. And on a phone, one thing to a line. */
@media (max-width: 68rem) {
  .project-card-body--split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 36rem) {
  .project-features {
    grid-template-columns: 1fr;
  }
}

/* A project with a page of its own: one picture beside what it is, and the
   way to the rest. As tall as a row of the other cards, near enough. */
.project-card--feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.project-feature-shot {
  margin: 1.25rem 0 1.25rem 1.25rem;
  border-radius: 0.375rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--color-border);

  & img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.project-card .project-more {
  margin-top: 1rem;
  font-weight: 600;
}

@media (max-width: 52rem) {
  .project-card--feature {
    grid-template-columns: 1fr;
  }
  .project-feature-shot {
    margin: 1.25rem 1.25rem 0;
  }
}

/* ─── A project's own page: omarepos ─── */

/* Keys and commands, as the app and the README write them. The page is the
   first place on the site that names any. */
.product kbd,
.product code,
.project-features kbd {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 0.85em;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  background: var(--color-card-bg);
  color: var(--color-text);
  white-space: nowrap;
}

.product-hero {
  padding-top: 2.5rem;
}

.product-hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  margin: 1.25rem 0 0.75rem;
}

.product-icon {
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.7rem;
  vertical-align: -0.4rem;
}

.product-pitch {
  max-width: 46rem;
  font-size: 1.2rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.product-meta {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* The grid, as wide as the page, under what it is. */
.product-hero-shot {
  margin-top: 2rem;
}

/* The race: the fun part, low on the page and no bigger than a screenshot.
   Dark in both colour schemes, as it was recorded, with the poster's colour
   behind it until the first frame arrives. */
.product-video {
  margin: 0;
}

.product-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px var(--color-border);
  background: #1a1b26;
}

.product-video figcaption {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* What it does, a section to a thing: what it is on one side, a picture of
   it on the other, the sides taking turns down the page. */
.product-section {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem 3rem;
  align-items: center;
  padding-top: 4rem;
}

.product-section:nth-of-type(even) > .product-text {
  order: 2;
}

.product-section--text {
  align-items: start;
}

/* What has no picture beside it starts with what it is, wherever it falls
   in the turns. */
.product-section.product-section--text > .product-text,
.product-section.product-section--stack > .product-text {
  order: 0;
}

/* The home page's sections are headed in small capitals; a section here is
   a thing the app does, and is named as one. */
.product-text h2 {
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.product-text p {
  color: var(--color-muted);
  line-height: 1.6;
  text-wrap: pretty;

  & + p {
    margin-top: 0.75rem;
  }
}

.product-shot {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--color-border);

  & img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.product-themes img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px var(--color-border);
}

/* The keys, heading and all, as one column in the middle of the page, and
   the keys a table: in columns side by side, which key went with which
   words was not plain. */
.product-section.product-section--stack {
  grid-template-columns: minmax(0, 34rem);
  justify-content: center;
}

.product-keys {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  border-spacing: 0;
  overflow: hidden;
  background: var(--color-card-bg);
  font-size: 0.95rem;

  & th {
    padding: 0.55rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  & td {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--color-border);
    vertical-align: baseline;
  }

  & td:first-child {
    width: 9.5rem;
    white-space: nowrap;
  }

  & td + td {
    color: var(--color-muted);
  }
}

.product-footer {
  padding-top: 4rem;
  padding-bottom: 1rem;
}

/* One above the other on anything narrower than a laptop: the text first,
   then the picture, every time. */
@media (max-width: 52rem) {
  .product-section {
    grid-template-columns: 1fr;
    padding-top: 3rem;
  }
  .product-section:nth-of-type(even) > .product-text {
    order: 0;
  }
}

/* ─── Contact ─── */

.contact {
  padding-bottom: 4rem;
}

/* ─── Footer ─── */

.site-footer {
  margin-top: auto;
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
}

.site-footer p {
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* ─── Thoughts (Public) ─── */

.thoughts-page {
  padding: 4rem 0 3rem;
}

.thoughts-header {
  margin-bottom: 2.5rem;
}

.thoughts-header h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.thoughts-intro {
  color: var(--color-muted);
  margin-top: 0.25rem;
}

.thoughts-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.thought-item {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2.5rem;
}

.thought-item-image {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 0.5rem;
  display: block;
  margin-bottom: 1rem;
}

.thought-item-body h2 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.thought-item-body h2 a {
  color: var(--color-text);

  &:hover {
    color: var(--color-accent);
  }
}

.thought-date {
  font-size: 0.8rem;
  color: var(--color-muted);
  display: block;
  margin-bottom: 0.25rem;
}

.thought-excerpt {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.thought-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.thought-tag {
  font-size: 0.75rem;
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 0.15rem 0.6rem;
}

.thoughts-empty {
  color: var(--color-muted);
  font-style: italic;
}

/* ─── Thought Detail ─── */

.thought-detail {
  padding: 3rem 0;
}

.thought-detail-header {
  margin-bottom: 2rem;
}

.thought-detail-header h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 0.25rem;
}

.thought-detail-image {
  width: 100%;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  display: block;
}

/* Lexxy ships a light-only ink ramp in lexxy-variables.css, which renders
   near-black text on our dark theme. Bind its tokens to the site palette so
   rich text follows the same light/dark scheme as everything else. The rules
   below (.thought-content h2 etc.) are more specific than Lexxy's :where()
   selectors, so site typography still wins; Lexxy only fills in what it alone
   provides — attachment galleries, highlights, tables, code tokens. */
.lexxy-content {
  --lexxy-color-ink: var(--color-text);
  --lexxy-color-ink-medium: var(--color-muted);
  --lexxy-color-ink-light: var(--color-muted);
  --lexxy-color-ink-lighter: var(--color-border);
  --lexxy-color-ink-lightest: var(--color-card-bg);
  --lexxy-color-ink-inverted: var(--color-bg);
  --lexxy-color-accent-dark: var(--color-accent);
  --lexxy-color-code-token-punctuation: var(--color-text);
  --lexxy-color-code-token-comment: var(--color-muted);
}

.thought-content {
  line-height: 1.75;
  font-size: 1rem;

  & h2 { font-size: 1.4rem; font-weight: 600; margin: 2rem 0 0.75rem; }
  & h3 { font-size: 1.15rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
  & p { margin-bottom: 1rem; }
  & ul, & ol { margin-bottom: 1rem; padding-left: 1.5rem; }
  & li { margin-bottom: 0.25rem; }
  & blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: 1rem;
    color: var(--color-muted);
    margin: 1.5rem 0;
  }
  & pre {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    font-family: var(--font-mono);
    font-size: 0.9rem;
  }
  & code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-card-bg);
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
  }
  & pre code { background: none; padding: 0; }
  & img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
  }
  & .attachment-gallery {
    display: grid;
    gap: 0.5rem;
    margin: 1.5rem 0;
  }
  & .attachment-gallery--2 { grid-template-columns: 1fr 1fr; }
  & .attachment-gallery--3 { grid-template-columns: 1fr 1fr 1fr; }
  & .attachment-gallery--4 { grid-template-columns: 1fr 1fr; }
  & .attachment-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin: 0;
  }
}

.back-link {
  font-size: 0.9rem;
  color: var(--color-muted);

  &:hover {
    color: var(--color-text);
  }
}

.thought-detail-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* ─── Admin ─── */

.admin-body {
  background: #f5f5f5;
  color: #1a1a1a;
}

.admin-nav {
  background: #1a1a1a;
  color: #fff;
  padding: 0.75rem 0;
  margin-bottom: 2rem;

  & .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  & a { color: rgba(255,255,255,0.7); }
  & a:hover { color: #fff; }
}

.admin-nav-links {
  display: flex;
  gap: 1.25rem;
  font-size: 0.9rem;
}

.admin-main {
  max-width: 56rem;
}

.admin-notice {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.admin-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
}

.admin-btn {
  background: #2563eb;
  color: #fff !important;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;

  &:hover { background: #1d4ed8; }
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #e5e5e5;

  & th { text-align: left; background: #f9fafb; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #666; }
  & th, & td { padding: 0.75rem 1rem; border-bottom: 1px solid #e5e5e5; }
  & code { font-size: 0.85rem; color: #666; }
}

.admin-badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  font-weight: 500;
}

.admin-badge--draft { background: #fef3c7; color: #92400e; }
.admin-badge--published { background: #d1fae5; color: #065f46; }

.admin-actions {
  display: flex;
  gap: 0.75rem;
  font-size: 0.85rem;

  & button { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 0.85rem; padding: 0; }
  & button:hover { text-decoration: underline; }
}

.admin-form {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;

  & label { font-weight: 600; font-size: 0.85rem; color: #374151; }
  & input, & textarea, & select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font: inherit;
    font-size: 0.95rem;
  }
  & small { color: #9ca3af; font-size: 0.8rem; }
}

.admin-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.admin-editor {
  min-height: 300px;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background: #fff;
}

.admin-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  color: #991b1b;
  font-size: 0.9rem;
}

.admin-form-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-top: 0.5rem;

  & input[type="submit"] {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
  }
  & input[type="submit"]:hover { background: #1d4ed8; }
}

.admin-detail {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  padding: 1.5rem;

  & dl { display: grid; grid-template-columns: 8rem 1fr; gap: 0.5rem 1rem; margin-bottom: 1.5rem; }
  & dt { font-weight: 600; font-size: 0.85rem; color: #666; }
  & dd { font-size: 0.95rem; }
}

.admin-image-preview {
  margin: 0.5rem 0;

  & img { border-radius: 0.375rem; max-width: 200px; }
}

/* ─── Responsive ─── */

@media (max-width: 600px) {
  html {
    font-size: 16px;
  }

  .hero-image {
    height: 300px;
  }

  .hero h1 {
    font-size: 2.25rem;
  }

  section {
    padding: 2rem 0;
  }
}