@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");

:root {
  /* Background variants. Three tones available across the site.
     Swap any surface (body / hero / section / footer) between them by changing
     which variant it references on the lines below. */
  --bg-light: #1a1a1a; /* lifted/raised: body, default backdrop */
  --bg-deep: #0d0d0d; /* main canvas/surface: hero, sections */
  --bg-shadow: #080808; /* grounded/sunken: footer, shadow tone */

  /* Surface assignments. Change the right-hand side to swap a surface's tone. */
  --color-bg: var(--bg-deep); /* body and default backdrop */
  --color-bg-hero: var(--bg-deep); /* #header */
  --color-bg-section: var(--bg-deep); /* #about, #work, #writing, #contact */
  --color-bg-card: #191919;
  --color-bg-input: #050505;
  --color-bg-footer: var(--bg-shadow);
  --color-bg-overlay: #020202;
  --color-accent: #c70039;
  --color-text: #e5e5e5;
  --color-text-muted: rgba(229, 229, 229, 0.6);
  --color-border: rgba(229, 229, 229, 0.1);

  --font-sans:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Manrope", "Inter", sans-serif;

  /* Font weights: change here, propagates everywhere */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --motion-fast: 0.3s ease;
  --motion-base: 0.5s ease;
  --motion-slow: 1s ease;
}

* {
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
}
::-webkit-scrollbar {
  width: 4px;
  color: var(--color-accent);
  transition: all 0.4s ease;
}
::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 4px;
  width: 4px;
  transition: all 0.4s ease;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-section);
  border-radius: 4px;
  width: 4px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
html {
  background: var(--color-bg-section);
}
#loader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: var(--color-bg);
  color: var(--color-text);
  width: 100%;
}
/* Logo mark. Uses the actual Ayiaware logo asset (images/ayia logo.png) */
img.logo-mark {
  display: block;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}
#loader img.logo-mark {
  height: 128px;
}
body {
  user-select: none;
  height: auto;
  overflow-x: hidden;
  width: 100%;
  background: var(--color-bg);
}
#header {
  background: var(--color-bg-hero);
  min-height: 100vh;
  height: auto;
  width: 100%;
  overflow: hidden;
  animation: scale 1.5s ease;
  position: relative;
}
/* Section layout: each section fills the viewport with footer pushed to bottom.
   JS sets display: flex on the active section; flex-direction: column comes from here. */
#header,
#about,
#work,
#writing,
#contact {
  flex-direction: column;
  min-height: 100vh;
}
#about > .footer,
#work > .footer,
#writing > .footer,
#contact > .footer {
  margin-top: auto;
}
/* Site-wide film-grain overlay. SVG inlined as data URL, no extra HTTP request.
   `position: fixed` keeps the grain anchored to the viewport (like grain on a
   lens) rather than re-rendering per section. `screen` blend mode + white-noise
   feColorMatrix make it visible on near-black backgrounds. Tunable via opacity.
   z-index: 9999 + pointer-events: none ensures it sits above all content
   visually but never blocks interaction. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.06;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
#navigation-content {
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 5;
  background-color: var(--color-bg-overlay);
  transform: translateY(-200%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#navigation-bar {
  position: fixed;
  height: 100px;
  width: 100%;
  z-index: 3;
  padding: 10px;
  background: transparent;
  overflow: hidden;
}
.menubar {
  position: absolute;
  right: 4%;
  top: 40%;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.4s ease;
}
.menubar span {
  position: relative;
  background-color: transparent;
  height: 2px;
  width: 20px;
  display: block;
  margin: 6px;
  border-radius: 20px;
}
.menubar .first-span {
  width: 35px;
}
.menubar .first-span::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  right: 0;
  background-color: whitesmoke;
  transition: all 0.5s ease;
}
.menubar .second-span {
  width: 35px;
}
.menubar .second-span::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 75%;
  top: 0;
  right: 0;
  background-color: whitesmoke;
  transition: all 0.3s ease;
}
.menubar .third-span {
  width: 35px;
}
.menubar .third-span::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  background-color: whitesmoke;
  transition: all 0.3s ease;
}
.menubar:hover .second-span::before,
.menubar:hover .first-span::before {
  width: 100%;
}
.menubar:hover {
  opacity: 1;
}
.close-first,
.close-second {
  height: 2px;
  width: 35px;
  background-color: whitesmoke;
  display: block;
  margin: 4px;
  cursor: pointer;
  padding: 1px;
  border-radius: 20px;
}
.close-first {
  transform: rotate(45deg);
}
.close-second {
  transform: rotate(-45deg);
}
.navigation-close {
  position: absolute;
  top: 6%;
  right: 4%;
  padding: 10px;
  cursor: pointer;
  transition: all.3s ease;
  opacity: 0.8;
}
.navigation-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}
.logo img.logo-mark {
  height: 96px;
  position: absolute;
  top: 3%;
  left: 2.5%;
  opacity: 0.9;
  z-index: 2;
  cursor: pointer;
  transition:
    opacity var(--motion-fast),
    transform var(--motion-base);
}
.logo img.logo-mark:hover {
  opacity: 1;
  transform: rotate(-45deg);
}
#navigation-bar img.logo-mark {
  display: block;
  height: 64px;
  position: absolute;
  top: 18px;
  left: 2.5%;
  opacity: 0.9;
  transition:
    opacity var(--motion-fast),
    transform var(--motion-base);
  cursor: pointer;
}
#navigation-bar img.logo-mark:hover {
  opacity: 1;
  transform: rotate(-45deg);
}
.header-content {
  height: 100vh;
  width: 100%;
  float: left;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  color: whitesmoke;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: 1px;
  flex-direction: column;
  font-size: 50px;
  z-index: 1;
}
.header-content-box {
  z-index: 2;
  text-align: center;
  height: auto;
  padding-right: 60px;
  width: auto;
}
.header-content .eyebrow {
  z-index: 2;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}
.header-content .firstline {
  z-index: 2;
  font-weight: var(--fw-black);
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.header-content .secondline {
  z-index: 2;
  font-size: 24px;
  padding-top: 24px;
  font-weight: var(--fw-regular);
  font-family: var(--font-sans);
  color: var(--color-text);
  opacity: 0.9;
}
.header-content .byline {
  z-index: 2;
  font-size: 14px;
  padding-top: 16px;
  font-weight: var(--fw-regular);
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}
.social-media-links {
  height: 100vh;
  position: absolute;
  z-index: 2;
  padding: 60px;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.social-media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  opacity: 0.6;
  margin: 8px;
  transition:
    opacity var(--motion-fast),
    color var(--motion-fast);
}
.social-media svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}
.social-media:hover {
  opacity: 1;
  color: var(--color-accent);
}
.navigation-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: var(--font-sans);
}
.navigation-links a {
  padding: 10px;
  text-decoration: none;
  color: white;
  font-size: 30px;
  opacity: 0.7;
  transition: all 0.4s ease;
}
.navigation-links a:hover,
.navigation-links a.active {
  opacity: 1;
  color: var(--color-accent);
}
.navigation-links a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  transform: translate(-50%, -50%);
  align-items: center;
  font-size: 5em;
  font-weight: var(--fw-regular);
  font-family: var(--font-display);
  color: rgb(255, 255, 255, 0.1);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  letter-spacing: 100px;
  transition: all 0.4s ease;
}
.navigation-links a:hover::before {
  content: attr(data-text);
  opacity: 1;
  letter-spacing: 10px;
}
.contact {
  display: flex;
  position: absolute;
  width: 10%;
  right: 0;
  top: 0;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 3;
}
.contact a {
  z-index: 3;
}
.contact img {
  margin: 10px;
  height: 30px;
  opacity: 0.6;
  transition: all 0.4s ease;
}
.contact img:hover {
  opacity: 1;
  transform: scale(1.1);
}
#breaker,
#breaker-two {
  height: 100vh; /* fallback for browsers without dvh support */
  height: 100dvh; /* dynamic viewport height: covers full visible area on iOS Safari even with URL bar shown */
  width: 200%;
  background-color: var(--color-accent);
  opacity: 0;
  animation: breakeranimate 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  display: none;
  border-radius: 5px;
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
}
/* Slide left-to-right with a translucent red wash. Max opacity 0.7 so content
   shows faintly through during the sweep, softer than a solid curtain. */
@keyframes breakeranimate {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  50% {
    transform: translateX(0%);
    opacity: 0.7;
  }
  80% {
    opacity: 0.7;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
@-webkit-keyframes breakeranimate {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  50% {
    transform: translateX(0%);
    opacity: 0.7;
  }
  80% {
    opacity: 0.7;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
.color {
  color: var(--color-accent);
  transition: all 0.4s ease;
}
#about {
  background-color: var(--color-bg-section);
  display: none;
  width: 100%;
  height: auto;
  overflow: hidden;
}
@keyframes scale {
  0% {
    transform: scale(0.6);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes breakeranimate {
  0% {
    transform: scale(0.6);
  }
  100% {
    transform: scale(1);
  }
}
#about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: whitesmoke;
  justify-content: center;
  height: auto;
  width: 100%;
  padding: 30px;
}
#about-content a {
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 35px;
  color: var(--color-accent);
  transition: all 0.4s ease;
}
.services-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
#work {
  display: none;
  height: auto;
  overflow-x: hidden;
  background-color: var(--color-bg-section);
  width: 100%;
  color: var(--color-text);
}
.cursor {
  height: 50px;
  width: 50px;
  display: block;
  border-radius: 50%;
  border: 1px solid var(--color-text);
  background: transparent;
  pointer-events: none;
  position: fixed;
  top: -25px;
  left: -25px;
  z-index: 10;
  opacity: 0.6;
  transition: scale 0.5s ease;
}
/* Hide cursor on touch devices; there's no mousemove to drive it. */
@media (hover: none) {
  .cursor {
    display: none;
  }
}
#contact {
  display: none;
  height: auto;
  text-align: center;
  width: 100%;
  background: var(--color-bg-section);
  position: relative;
}
/* Shared section header. Used by About, Work, Writing, Contact */
.section-header {
  text-align: center;
  padding: 80px 20px 32px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.section-header .eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.section-header h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 40px;
  line-height: 1.15;
  color: var(--color-text);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.section-header .lede {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.section-body {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 30px 60px;
}
.subsection-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 18px;
  color: var(--color-text);
  margin: 48px 0 20px;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: var(--fw-medium);
}
.contact-content {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.contact-info {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.contact-info h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 18px;
  color: var(--color-text);
  margin-bottom: 20px;
}
.contact-info-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
  text-align: left;
}
.contact-line {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
}
.contact-line-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(199, 0, 57, 0.12);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-line-icon svg {
  width: 18px;
  height: 18px;
}
.contact-line-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.contact-line-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.contact-line-value,
.contact-line-value a {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-text);
  text-decoration: none;
}
.contact-line-value a:hover {
  color: var(--color-accent);
}
.contact-info-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: auto 0 24px; /* margin-top: auto pushes the divider + Follow block to the bottom of .contact-info, so the card stays balanced when the form makes it stretch taller than its natural content. */
}
.contact-info-follow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.contact-socials {
  display: flex !important;
  flex-direction: row !important;
  height: auto !important;
  position: static !important;
  padding: 0 !important;
  gap: 12px;
}
.contact-form {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 32px;
  width: auto;
  display: flex;
  flex-direction: column;
}
/* Override the legacy `form { align-items: center }` rule that centered labels and inputs.
   Also reset margin (some user agents add it) and force left alignment to win over
   #contact's inherited text-align: center. */
.contact-form,
.contact-form *,
.contact-form form,
.contact-form .field,
.contact-form .field label {
  text-align: left;
}
/* Block layout instead of flex: whitespace text nodes between the 4 hidden form
   inputs were getting treated as flex items and pushing the first visible field
   downward, which made the info card's heading appear "higher" than the form's
   first label. Block layout doesn't have that quirk. */
.contact-form form {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  text-align: left;
}
.contact-form .form-row .field {
  flex: 1;
}
.contact-form .field label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-align: left;
}
.contact-form .form-row {
  gap: 14px;
}
.contact-form select {
  background-color: var(--color-bg-input);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23E5E5E5'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.06l3.71-3.83a.75.75 0 1 1 1.08 1.04l-4.25 4.39a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px 44px 12px 16px;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 14px;
  width: 100%;
  cursor: pointer;
  transition: border-color var(--motion-fast);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.contact-form select:focus {
  outline: none;
  border-color: var(--color-accent);
}
form {
  display: flex;
  flex-direction: column;
  height: auto;
  width: auto;
  align-items: center;
  position: relative;
}
form button {
  padding: 8px 24px;
  font-family: var(--font-sans);
  font-size: 20px;
  color: whitesmoke;
  background: var(--color-accent);
  opacity: 0.8;
  margin: 20px;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  transition: all 0.4s ease;
}
form button:hover {
  opacity: 1;
}
.footer {
  background: var(--color-bg-footer);
  width: 100%;
  padding: 24px 30px;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: row;
  font-family: var(--font-sans);
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--color-border);
}
.footer .footer-text {
  font-size: 13px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  opacity: 0.7;
}

/*

For devices with smaller width like mobile phone

*/

/* ----- PILLARS (About section) ----- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.pillar {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 28px;
  transition:
    border-color var(--motion-fast),
    transform var(--motion-fast);
}
.pillar:hover {
  border-color: var(--color-accent);
  transform: scale(1.02);
}
.pillar h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 22px;
  color: var(--color-text);
  margin-bottom: 12px;
}
.pillar p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ----- WORK GRID ----- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.work-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  transition:
    border-color var(--motion-fast),
    transform var(--motion-fast);
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.work-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px) scale(1.02);
}
.work-card .img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--color-bg-section);
  overflow: hidden;
}
.work-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-card .body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.work-card h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 20px;
  color: var(--color-text);
  margin-bottom: 10px;
}
.work-card p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ----- WRITING SECTION ----- */
#writing {
  display: none;
  background-color: var(--color-bg-section);
  width: 100%;
  height: auto;
  overflow: hidden;
  color: var(--color-text);
}
.writing-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.writing-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  transition:
    border-color var(--motion-fast),
    transform var(--motion-fast);
  display: flex;
  flex-direction: column;
}
.writing-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px) scale(1.02);
}
.writing-card .img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--color-bg-section);
  overflow: hidden;
}
.writing-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-base);
}
.writing-card:hover .img-wrap img {
  transform: scale(1.04);
}
/* When the post has no image, show a centered  mark instead of cropping the logo */
.writing-card .img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}
.writing-card .img-fallback img {
  width: auto;
  height: 50%;
  object-fit: contain;
  opacity: 0.6;
}
.writing-card .body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.writing-card .date {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.writing-card h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 12px;
}
.writing-card p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  flex-grow: 1;
}
/* Optional CTA below excerpt. Appears only when SITE_DATA.writing.showReadMore = true */
.writing-card .read-more {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 16px;
}
.writing-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
}
.writing-cta {
  text-align: center;
  padding: 20px 0 60px;
}
.writing-cta a {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 4px;
  transition: color var(--motion-fast);
}
.writing-cta a:hover {
  color: var(--color-accent);
}

/* ----- CONTACT FORM (input/textarea/submit) ----- */
.contact-form .form-row {
  display: flex;
  gap: 14px;
  width: 100%;
}
.contact-form input,
.contact-form textarea {
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 14px 18px;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  margin-bottom: 12px;
  width: 100%;
  transition: border-color var(--motion-fast);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.contact-form textarea {
  min-height: 150px;
  resize: vertical;
  font-family: var(--font-sans);
}
.contact-form button[type="submit"] {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-accent);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  padding: 14px 32px;
  margin-top: 16px;
  cursor: pointer;
  align-self: flex-start;
  transition: all var(--motion-fast);
}
.contact-form button[type="submit"]:hover {
  background: transparent;
  color: var(--color-accent);
}
/* Visually-hidden: keeps form labels available to screen readers without showing them */
.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;
}

/* Reset native button chrome for our re-classed elements
   (padding intentionally not reset here; original .navigation-close has padding: 10px) */
.menubar,
.navigation-close {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
}
.menubar {
  padding: 0;
}
#nav-logo {
  text-decoration: none;
  color: inherit;
}

/* Desktop inline navigation (hidden on mobile, shown ≥768px) */
.nav-desktop {
  display: none;
}
@media (min-width: 768px) {
  .nav-desktop {
    display: flex;
    position: absolute;
    right: 2.5%;
    top: 50%;
    transform: translateY(-50%);
    gap: 32px;
    align-items: center;
  }
  .nav-desktop a {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text);
    opacity: 0.7;
    text-decoration: none;
    transition:
      opacity var(--motion-fast),
      color var(--motion-fast);
  }
  .nav-desktop a:hover,
  .nav-desktop a.active {
    opacity: 1;
    color: var(--color-accent);
  }
  .nav-desktop a.active {
    position: relative;
  }
  .nav-desktop a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--color-accent);
    border-radius: 50%;
  }
  /* On desktop, the hamburger isn't needed; the nav is inline. */
  .menubar {
    display: none;
  }
}

/* ----- MOBILE-FIRST RESPONSIVE FOR NEW SECTIONS ----- */
@media (max-width: 768px) {
  .pillars,
  .earlier-work,
  .writing-content,
  .contact-content,
  .services-content,
  .work-grid {
    grid-template-columns: 1fr;
  }
  .work-featured-card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }
  .work-featured-card h2 {
    font-size: 32px;
  }
  .header-content .firstline {
    font-size: 56px;
  }
  .header-content .secondline {
    font-size: 18px;
  }
  .contact-form,
  .contact-info {
    width: 100%;
    padding: 24px;
  }
  .contact-form .form-row {
    flex-direction: column;
    gap: 0;
  }
  .section-body,
  .section-body.contact-content {
    padding: 0 20px 40px;
  }
}

@media only screen and (max-width: 550px) {
  .header-content {
    height: 100vh;
    width: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: whitesmoke;
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    letter-spacing: 2px;
    font-size: 40px;
  }
  .social-media-links {
    width: 100%;
    left: 0;
    bottom: 0;
    position: absolute;
    padding: 10px;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .header-content-box {
    padding-left: 0px;
    z-index: 2;
    text-align: center;
  }
  #contact {
    display: none;
  }
  #breaker {
    height: 100vh;
    height: 100dvh;
    width: 200%;
    background-color: var(--color-accent);
    opacity: 1;
    animation: breakeranimate 2s linear;
    display: none;
    transition: all 0.4s ease;
    z-index: 10;
    position: fixed;
  }
  @keyframes breakeranimate {
    0% {
      transform: translateX(-100%);
    }
    50% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  @-webkit-keyframes breakeranimate {
    0% {
      transform: translateX(-100%);
    }
    50% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  .header-content-box {
    z-index: 2;
    text-align: center;
    height: auto;
    padding-right: 0px;
    width: auto;
  }
  .cursor {
    display: none;
  }
  #navigation-bar img {
    height: 80px;
    position: absolute;
    top: 15%;
    left: 2.5%;
    opacity: 0.8;
    transition: all 0.4s ease;
    display: none;
  }
}

/*

for tabs and large phones

*/

@media all and (max-width: 1025px) and (min-width: 551px) {
  .header-content {
    height: 100vh;
    width: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: whitesmoke;
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    letter-spacing: 2px;
    font-size: 40px;
  }
  .social-media-links {
    width: 100%;
    left: 0;
    bottom: 0;
    position: absolute;
    padding: 10px;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .header-content-box {
    padding-left: 0px;
    z-index: 2;
    text-align: center;
  }
  #breaker {
    height: 100vh;
    height: 100dvh;
    width: 200%;
    background-color: var(--color-accent);
    opacity: 1;
    animation: breakeranimate 2s linear;
    display: none;
    transition: all 0.4s ease;
    z-index: 10;
    position: fixed;
  }
  @keyframes breakeranimate {
    0% {
      transform: translateX(-100%);
    }
    50% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  @-webkit-keyframes breakeranimate {
    0% {
      transform: translateX(-100%);
    }
    50% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  .header-content-box {
    z-index: 2;
    text-align: center;
    height: auto;
    padding-right: 0px;
    width: auto;
  }
  .cursor {
    display: none;
  }
  #navigation-bar img {
    height: 80px;
    position: absolute;
    top: 15%;
    left: 2.5%;
    opacity: 0.8;
    transition: all 0.4s ease;
  }
}

/* Wide-screen (>=1441px) media block removed (2026-05-08): every rule
   inside it targeted a Jekyll-template class that no longer exists in
   the current markup. .portfolio-image, .portfolio-images, .about-img,
   .about-first-line, .about-second-line, .cv a button, .service /
   .service-img / .service-description, .blogs / .blog-date / .blog-text,
   .contact-header / .contact-header-caption. The base rules and the
   .section-body max-width: 1100px constraint already govern wide
   viewports. */