:root {
  --ink: #262420;
  --paper: #fdfcfa;
  --muted: #6b6559;
  --accent: #a8471f;
  --border: #e5e1da;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.site-header__title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Search box in the header. Hidden in the markup and unhidden by search.js,
   so it never appears for visitors without JavaScript. */
.site-header__search input[type="search"] {
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  width: 11rem;
  max-width: 40vw;
  transition: border-color 0.15s ease, width 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.site-header__search input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  width: 14rem;
}

.site-header__search input[type="search"]::placeholder {
  color: var(--muted);
}

.search-results__count,
.search-results__empty {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}


.search-results mark {
  background: #f6e2d6;
  color: inherit;
  border-radius: 2px;
  padding: 0 0.1em;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

a { color: var(--accent); }

/* Intro text above the entry list on the home page. Editable at /admin.
   The rule spans the full column so it lines up with the entry separators —
   the measure is constrained on the paragraphs instead. */
.site-intro {
  margin: 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.site-intro p {
  margin: 0 0 0.85rem;
  max-width: 34em;
  font-size: 1.05rem;
  color: var(--muted);
}

.site-intro p:last-child {
  margin-bottom: 0;
}

/* The link's 44px touch target is 12px taller than the 20px glyph on each
   side. The negative bottom margin cancels that lower half, so the visible
   gap from the icon down to the rule matches the 1.5rem rhythm everywhere
   else rather than looking 12px too deep. */
.site-intro__social {
  margin-top: 0.35rem !important;
  margin-bottom: -0.75rem !important;
}

/* Icon is an inline SVG rather than a hot-linked logo, so no request goes to
   LinkedIn until the visitor actually clicks the link. */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  /* Icon-only link: pad it out to a comfortable touch target. The negative
     margin keeps the icon visually aligned with the text above it. */
  min-width: 44px;
  min-height: 44px;
  margin-left: -12px;
  border-radius: 6px;
}

.social-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.social-link:hover,
.social-link:focus-visible {
  color: var(--accent);
}

.social-link:hover span,
.social-link:focus-visible span {
  text-decoration: underline;
}

.social-link__icon {
  flex: 0 0 auto;
}

/* margin: 0 kills the browser's default <ul> margin, which otherwise stacked
   on top of the first item and made the gap under the intro rule larger than
   the gap above the next one. */
.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Equal padding top and bottom. Every child's margin is reset below, so this
   padding is the only thing setting the space inside a row. */
.entry-list__item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

.entry-list__item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Entries with a photo or video still get a thumbnail on the left. Entries
   without one keep the full width — no placeholder, no empty gap. */
.entry-list__item--with-thumb {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.entry-list__thumb {
  flex: 0 0 clamp(88px, 22vw, 148px);
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: var(--border);
  aspect-ratio: 4 / 3;
}

.entry-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.entry-list__text {
  min-width: 0; /* lets long titles wrap instead of stretching the row */
}

.entry-list__item a {
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
}

.entry-list__item time {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.15rem 0 0.4rem;
}

.entry__date {
  color: var(--muted);
  margin-top: -0.5rem;
}

.entry__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.entry__gallery img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.entry__gallery figcaption {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

.vimeo-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1b1a17 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E") center/cover;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  overflow: hidden;
}

.vimeo-facade--playing {
  padding: 0;
}

.vimeo-facade__play {
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 999px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--ink);
}

.vimeo-facade__label {
  display: none;
}

.vimeo-facade__hint {
  color: #cfcac0;
  font-size: 0.8rem;
  max-width: 80%;
  text-align: center;
  margin: 0;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.site-footer a {
  color: var(--muted);
}