/*
Theme Name: horvART
Theme URI: https://www.horvart.de/
Author: Built for horvART Photography
Description: An airy, image-first portfolio theme for photographers. Full-bleed hero slideshow, a tile grid of services that each open into their own photo page, and an immersive fullscreen gallery on every image. Services are fully extensible — add a new one and the navigation, home grid and services page update automatically.
Version: 2.2.2
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: horvart
Tags: photography, portfolio, custom-logo, custom-menu, featured-images, full-width-template, translation-ready
*/

/* ============================================================
   Design tokens — the brand lives here
   ============================================================ */
:root {
  --paper:        #f9f5f1;   /* background (client) */
  --paper-2:      #f1ebe4;   /* alternating section tone */
  --ink:          #001c1e;   /* text (client) */
  --ink-soft:     #3d5254;   /* secondary text */
  --accent:       #5e855e;   /* details (client) */
  --accent-dk:    #4a6b4a;
  --accent-soft:  #c9d6c6;   /* hairlines, muted details */
  --overlay:      rgba(0, 28, 30, 0.96);

  --font: "Roboto Slab", "Zilla Slab", Georgia, serif;

  --container: 1280px;
  --narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color 0.25s var(--ease), opacity 0.25s var(--ease); }
a:hover { color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 300; line-height: 1.15; color: var(--ink); margin: 0 0 0.6em; letter-spacing: 0.005em; }
p { margin: 0 0 1.3em; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.screen-reader-text { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:.75rem 1.25rem; z-index:1000; }
.skip-link:focus { left:1rem; top:1rem; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--narrow); }

/* Small uppercase tracked label — the site's signature detail */
.label {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-soft) 60%, transparent);
}
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:84px; }
.site-brand { font-size: 1.15rem; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink); }
.site-brand a { color: inherit; }
.site-brand img, .custom-logo { max-height: 48px; width: auto; }

.primary-nav > ul { list-style:none; display:flex; gap:clamp(1.25rem,3vw,2.75rem); margin:0; padding:0; }
.primary-nav li { position: relative; }
.primary-nav a {
  display:block; padding:.5rem 0;
  font-size:.74rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  color: var(--ink-soft);
}
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a, .primary-nav .current_page_parent > a { color: var(--ink); }
.primary-nav .current-menu-item > a::after { content:""; display:block; height:1px; background:var(--accent); margin-top:2px; }

/* Dropdown (services) */
.primary-nav .menu-item-has-children > a::after {
  content:""; display:inline-block; width:5px; height:5px; margin-left:.5rem; vertical-align:middle;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px);
}
.primary-nav .sub-menu {
  list-style:none; margin:0; padding:.75rem 0;
  position:absolute; left:-1.25rem; top:100%; min-width:220px;
  background: var(--paper);
  border:1px solid color-mix(in srgb, var(--accent-soft) 70%, transparent);
  box-shadow: 0 18px 40px rgba(0,28,30,.08);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu,
.primary-nav li.is-open > .sub-menu { opacity:1; visibility:visible; transform:none; }
.primary-nav .sub-menu a { padding:.55rem 1.25rem; font-size:.72rem; letter-spacing:.18em; text-transform:none; letter-spacing:.06em; font-size:.92rem; }
.primary-nav .sub-menu a:hover { color: var(--accent); }

.menu-toggle { display:none; background:none; border:0; cursor:pointer; padding:.5rem; color:var(--ink); }
.menu-toggle span { display:block; width:26px; height:1.5px; background:currentColor; margin:6px 0; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .menu-toggle { display:block; }
  .primary-nav { position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--accent-soft); max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
  .primary-nav.is-open { max-height:80vh; overflow:auto; }
  .primary-nav > ul { flex-direction:column; gap:0; padding:.5rem var(--gutter) 1.5rem; }
  .primary-nav > ul > li { border-bottom:1px solid color-mix(in srgb, var(--accent-soft) 50%, transparent); }
  .primary-nav a { padding:1rem 0; font-size:.85rem; }
  .primary-nav .sub-menu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent; padding:0 0 .75rem 1rem; min-width:0; display:none; }
  .primary-nav li.is-open > .sub-menu { display:block; }
  .primary-nav .sub-menu a { padding:.5rem 0; }
}

/* ============================================================
   Hero slideshow (home)
   ============================================================ */
.hero {
  position: relative;
  height: clamp(70vh, 88vh, 960px);
  background: var(--paper-2);
  overflow: hidden;
}
.hero__slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition: opacity 1.4s var(--ease);
}
.hero__slide.is-active { opacity:1; }
.hero__slide::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,28,30,.42), rgba(0,28,30,.06) 50%, rgba(0,28,30,0)); }
.hero__caption {
  position:absolute; left:0; right:0; bottom:clamp(2rem,6vw,4.5rem);
  text-align:center; color:var(--paper); z-index:2;
  padding-inline: var(--gutter);
}
.hero__tagline {
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0,28,30,.35);
}
.hero__controls {
  position:absolute; right:clamp(1rem,3vw,2.5rem); bottom:clamp(1rem,3vw,2rem); z-index:3;
  display:flex; align-items:center; gap:.9rem;
  color:var(--paper); font-size:.72rem; letter-spacing:.2em;
}
.hero__controls button {
  background:none; border:1px solid rgba(249,245,241,.5); color:inherit; cursor:pointer;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; transition:background .25s var(--ease);
}
.hero__controls button:hover { background:rgba(249,245,241,.15); }
.hero__controls svg { width:16px; height:16px; }
.hero--static { height: clamp(50vh, 60vh, 640px); }

/* Name strip under hero */
.name-strip { text-align:center; padding-block: clamp(3rem, 6vw, 5rem); }
.name-strip__name {
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 300; letter-spacing: 0.5em; text-transform: uppercase;
  margin: 0 0 .75rem; color: var(--ink);
}
.name-strip__role { margin: 0; }

/* ============================================================
   Service tile grid (home + services page)
   ============================================================ */
.tile-grid {
  display:grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.25rem);
  row-gap: clamp(2.75rem, 4.5vw, 4.5rem);   /* room for title + count under each tile */
}
.tile { display:block; color:var(--ink); }
.tile__media {
  position:relative; overflow:hidden;
  aspect-ratio: 3 / 4;
  background: var(--paper-2);
  outline: 1px solid transparent;
  outline-offset: 8px;
  transition: outline-color .35s var(--ease), outline-offset .35s var(--ease);
}
.tile__media img { width:100%; height:100%; object-fit:cover; }
/* Hover: quiet frame around the photo — no zoom, no dark overlay */
.tile:hover .tile__media { outline-color: var(--accent); outline-offset: 6px; }
.tile__title {
  display:block;
  margin: 1.25rem 0 0;
  text-align:center;
  font-size: .8rem; font-weight: 400;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.tile:hover .tile__title { color: var(--accent); }
.tile__count {
  display:block; text-align:center;
  margin-top:.45rem;
  margin-bottom:10px;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--accent);
}
.tile { padding-bottom: 10px; }
@media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tile-grid { grid-template-columns: 1fr; } .tile__media { aspect-ratio: 4/5; } }

/* ============================================================
   Sections
   ============================================================ */
.section { padding-block: clamp(3.5rem, 8vw, 7.5rem); }
.section--alt { background: var(--paper-2); }
.section--tight { padding-block: clamp(2rem, 5vw, 4rem); }
.section-head { text-align:center; max-width:640px; margin:0 auto clamp(2.5rem,5vw,4rem); }
.section-head .label { display:block; margin-bottom:1rem; }
.section-title { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 300; margin:0; }

.entry-content { max-width: var(--narrow); margin-inline:auto; }
.entry-content h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); margin-top:2em; }
.entry-content h3 { font-size: 1.4rem; margin-top:1.6em; }
.entry-content img { margin-block: 2rem; }
.entry-content blockquote { border-left:1px solid var(--accent); margin:2rem 0; padding:.25rem 0 .25rem 1.5rem; color:var(--ink-soft); font-size:1.25rem; }
.entry-content--center { text-align:center; }
.entry-content--center p { color: var(--ink-soft); }

/* About block (home) */
.about-block { text-align:center; }
.about-block .section-title { margin-bottom:1.5rem; }
.about-block p { color: var(--ink-soft); max-width: 62ch; margin-inline:auto; }
.about-block .btn { margin-top: 1rem; }
.about-block--portrait { text-align:left; }
.about-block--portrait p { margin-inline:0; }
.about-block--portrait .split__body h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin: .5rem 0 1rem; }
.about-block--portrait .entry-content { margin-inline:0; max-width:none; }

/* CTA */
.cta { text-align:center; padding-block: clamp(4rem, 10vw, 9rem); position:relative; }
.cta--photo {
  background-size: cover; background-position: center;
  color: var(--paper);
}
.cta--photo::before { content:""; position:absolute; inset:0; background: rgba(0,28,30,.52); }
.cta--photo .container { position:relative; }
.cta--photo .cta__kicker, .cta--photo .cta__title { color: var(--paper); }
.cta--photo .btn { border-color: var(--paper); color: var(--paper); }
.cta--photo .btn:hover { background: var(--paper); color: var(--ink); }
.cta__kicker { margin:0 0 1rem; color: var(--ink-soft); font-size: 1rem; letter-spacing:.04em; }
.cta__title { font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight:300; margin:0 auto 2rem; max-width:16ch; line-height:1.05; }

/* Instagram strip */
.insta { text-align:center; padding-block: clamp(3rem, 6vw, 5rem); border-top:1px solid color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.insta p { margin:0 0 .5rem; color: var(--ink-soft); }
.insta a { font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing:.06em; color: var(--ink); }
.insta a:hover { color: var(--accent); }

/* Buttons */
.btn {
  display:inline-block;
  font-size:.74rem; font-weight:400; letter-spacing:.24em; text-transform:uppercase;
  padding: .95rem 2.2rem;
  border:1px solid var(--ink); color: var(--ink); background:transparent;
  cursor:pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--accent { border-color: var(--accent); color: var(--accent); }
.btn--accent:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* ============================================================
   Page header (standard pages, service pages)
   ============================================================ */
.page-head { text-align:center; padding: clamp(3rem, 7vw, 6rem) 0 clamp(1.5rem, 4vw, 3rem); }
.page-head .label { display:block; margin-bottom:1rem; }
.page-head__title { font-size: clamp(2rem, 5vw, 3.6rem); font-weight:300; margin:0; letter-spacing:.02em; }
.page-head__sub { color: var(--ink-soft); max-width: 60ch; margin: 1.25rem auto 0; }
.page-head--minimal { padding-bottom: clamp(1rem, 3vw, 2rem); }
.page-head--minimal .page-head__title { font-size: 1rem; letter-spacing:.34em; text-transform:uppercase; font-weight:400; }
.page-hero { height: clamp(40vh, 55vh, 620px); background-size:cover; background-position:center; }

/* ============================================================
   Photo grid (service pages) — masonry, honors orientation
   ============================================================ */
.photo-grid {
  column-count: 3;
  column-gap: clamp(.75rem, 1.6vw, 1.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.photo-grid__item {
  break-inside: avoid;
  margin: 0 0 clamp(.75rem, 1.6vw, 1.5rem);
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: var(--paper-2);
}
.photo-grid__item img { width:100%; height:auto; transition: transform .9s var(--ease), opacity .5s var(--ease); }
.photo-grid__item:hover img { transform: scale(1.025); }
.photo-grid__item::after { content:""; position:absolute; inset:0; background: rgba(0,28,30,0); transition: background .45s var(--ease); pointer-events:none; }
.photo-grid__item:hover::after { background: rgba(0,28,30,.14); }
@media (max-width: 900px) { .photo-grid { column-count: 2; } }
@media (max-width: 520px) { .photo-grid { column-count: 1; } }

.gallery-empty { text-align:center; color: var(--ink-soft); padding: 3rem 0; }

/* ============================================================
   Fullscreen gallery (lightbox)
   ============================================================ */
.lightbox { position:fixed; inset:0; z-index:1000; background:var(--overlay); display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s var(--ease); }
.lightbox.is-open { opacity:1; visibility:visible; }
.lightbox__bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem clamp(1rem,4vw,2.5rem); color:var(--paper); }
.lightbox__title { font-size:.8rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase; margin:0; }
.lightbox__count { font-size:.74rem; letter-spacing:.2em; color:color-mix(in srgb, var(--paper) 65%, transparent); }
.lightbox__close { background:none; border:0; cursor:pointer; color:var(--paper); padding:.4rem; line-height:0; }
.lightbox__close svg { width:26px; height:26px; }
.lightbox__close:hover { color: var(--accent-soft); }
.lightbox__stage { position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 clamp(.5rem,5vw,4rem); }
.lightbox__img { max-width:100%; max-height:100%; object-fit:contain; opacity:0; transition:opacity .45s var(--ease); box-shadow:0 30px 80px rgba(0,0,0,.45); }
.lightbox__img.is-loaded { opacity:1; }
.lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(249,245,241,.06); border:1px solid rgba(249,245,241,.3); color:var(--paper); width:52px; height:52px; border-radius:50%; display:grid; place-items:center; cursor:pointer; transition:background .25s var(--ease); }
.lightbox__nav:hover { background:rgba(249,245,241,.18); }
.lightbox__nav--prev { left:clamp(.5rem,2vw,1.5rem); }
.lightbox__nav--next { right:clamp(.5rem,2vw,1.5rem); }
.lightbox__nav svg { width:22px; height:22px; }
.lightbox__thumbs { display:flex; gap:.5rem; padding:.9rem clamp(1rem,4vw,2.5rem) 1.3rem; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
.lightbox__thumbs button { flex:0 0 auto; width:56px; height:72px; padding:0; border:0; cursor:pointer; overflow:hidden; opacity:.4; transition:opacity .25s var(--ease); outline:1px solid transparent; outline-offset:2px; background:#000; }
.lightbox__thumbs button img { width:100%; height:100%; object-fit:cover; }
.lightbox__thumbs button:hover { opacity:.8; }
.lightbox__thumbs button.is-active { opacity:1; outline-color:var(--paper); }
body.lightbox-open { overflow:hidden; }
@media (max-width:600px) { .lightbox__nav { display:none; } }

/* ============================================================
   About / Contact layouts
   ============================================================ */
.split { display:grid; grid-template-columns:.85fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.split__media { margin:0; }
.split__media img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.split__body { max-width:54ch; }
.split__body .label { display:block; margin-bottom:.75rem; }
.split__body h2 { font-size:clamp(1.9rem,4vw,3rem); }
.split__body p { color:var(--ink-soft); }
@media (max-width:820px){ .split { grid-template-columns:1fr; } .split__media img { aspect-ratio:3/4; max-height:70vh; margin-inline:auto; } }

.contact-grid { display:grid; grid-template-columns:.8fr 1fr; gap:clamp(2.5rem,7vw,6rem); }
.contact--photo { background-size:cover; background-position:center; background-attachment:scroll; }
.contact--photo .contact-grid { background: rgba(249,245,241,.85); padding: clamp(1.5rem,4vw,3.5rem); }
.contact--photo .map-embed { background: rgba(249,245,241,.93); padding: .75rem; }
/* form: two columns (Name | E-Mail), everything else full width */
.contact-form form { display:grid; grid-template-columns:1fr 1fr; column-gap:1.5rem; }
.contact-form form > * { grid-column: 1 / -1; }
.contact-form .field--half { grid-column: auto; }
@media (max-width:600px) { .contact-form form { grid-template-columns:1fr; } }
@media (max-width:820px){ .contact-grid { grid-template-columns:1fr; } }
.contact-details dl { margin:0; }
.contact-details dt { margin-top:1.75rem; }
.contact-details dt:first-child { margin-top:0; }
.contact-details dd { margin:.35rem 0 0; font-size:1.1rem; font-weight:300; }
.contact-details dd a { color:var(--ink); }
.contact-details dd a:hover { color:var(--accent); }

.contact-form .field { margin-bottom:1.75rem; }
.contact-form label { display:block; margin-bottom:.5rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.contact-form input, .contact-form textarea { width:100%; border:0; border-bottom:1px solid var(--accent-soft); background:transparent; padding:.65rem 0; font-family:var(--font); font-size:1.05rem; font-weight:300; color:var(--ink); border-radius:0; transition:border-color .25s var(--ease); }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-bottom-color:var(--accent); box-shadow:0 1px 0 var(--accent); }
.contact-form textarea { resize:vertical; min-height:130px; }
.contact-form .hp { position:absolute; left:-5000px; }
.contact-form .req { color: var(--accent); }
.contact-form .field--check { display:flex; gap:.8rem; align-items:flex-start; }
.contact-form .field--check input { width:18px; height:18px; flex:0 0 auto; margin-top:.3rem; border:1px solid var(--accent-soft); accent-color: var(--accent); cursor:pointer; }
.contact-form .field--check label { margin:0; text-transform:none; letter-spacing:0; font-size:.92rem; line-height:1.6; color:var(--ink-soft); cursor:pointer; }
.contact-form .required-note { font-size:.8rem; color:var(--ink-soft); margin:-.5rem 0 1.5rem; }
.form-message { padding:1rem 1.25rem; margin-bottom:2rem; font-size:.98rem; }
.form-message--ok { background:color-mix(in srgb, var(--accent) 14%, var(--paper)); color:var(--accent-dk); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.form-message--error { background:#fbeeee; color:#8a3b3b; border:1px solid #e4c2c2; }
.map-embed { margin-top:clamp(3rem,6vw,5rem); aspect-ratio:16/7; overflow:hidden; }
.map-embed iframe { width:100%; height:100%; border:0; display:block; filter:grayscale(.3); }
@media (max-width:600px){ .map-embed { aspect-ratio:4/3; } }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-top:1px solid color-mix(in srgb, var(--accent-soft) 60%, transparent); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; margin-bottom:clamp(2.5rem,5vw,4rem); }
.footer-links a { display:block; color:var(--ink); }
.footer-links a:hover { color: var(--accent); }
.footer-links .label { display:block; margin-bottom:.35rem; }
.footer-links span:last-child { font-size:1.05rem; font-weight:300; }
@media (max-width:600px){ .footer-links { grid-template-columns:1fr; gap:1.5rem; } }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; padding-top:1.5rem; border-top:1px solid color-mix(in srgb, var(--accent-soft) 60%, transparent); font-size:.8rem; color:var(--ink-soft); letter-spacing:.04em; }
.footer-social { display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
.footer-social a { display:inline-grid; place-items:center; width:36px; height:36px; border:1px solid var(--accent-soft); border-radius:50%; color:var(--ink-soft); }
.footer-social a:hover { color:var(--accent); border-color:var(--accent); }
.footer-social svg { width:16px; height:16px; fill:currentColor; }
.footer-bottom nav { display:flex; gap:1.25rem; }
.footer-bottom nav ul { list-style:none; display:flex; gap:1.25rem; margin:0; padding:0; }

/* ============================================================
   Misc
   ============================================================ */
.post-list { display:grid; gap:3rem; max-width:var(--narrow); margin-inline:auto; }
.post-card__title { font-size:1.8rem; }
.error-404 .page-head__title { font-size: clamp(3rem, 12vw, 7rem); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}