/* ==========================================================================
   Home / About Me
   ========================================================================== */
.hero-about {
  background: var(--cream);
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 90px 90px;
  align-items: center;
}
.hero-about__label {
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: 500;
  max-width: 260px;
  line-height: 1.2;
  letter-spacing: -2px;
}
.hero-about__photo img { height: 100%; width: 100%; object-fit: cover; object-position: top center; }
.hero-about__greeting { font-family: var(--font-display); font-size: 40px; font-weight: 400;letter-spacing: -2px;line-height: 1;}
.hero-about__name {font-family: var(--font-display);font-size: 120px;font-weight: 500;line-height: 1;letter-spacing: -5px;}
.hero-about__desc {max-width: 355px; color: #262626; font-size: 16px; margin-top: 16px;line-height: 1.6;}

.hero-about .site-container{display: flex;align-items: center;}
.whatido { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2.5rem; align-items: start; }
.whatido__stack { margin-top: 1.5rem; font-size: var(--fs-small); color: var(--meta); letter-spacing: 0.02em; }

.selected-work { display: flex;gap: 60px;}
.selected-work__cta { margin-top: 2rem; }

.about-block { display: flex;gap: 60px;}
.about-block>*{flex: 1;}
.about-block__eyebrow { font-size: 16px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #000;}
.about-block__lead { font-family: var(--font-body); font-size: 28px; letter-spacing: -1px;line-height: 1.3;}
.about-block__body p { color: #000; font-size: 16px;line-height: 1.6;}
.about-block__body p + p { margin-top: 1rem; }
.about-block__body .pull-quote{color: #64748B;font-size: 16px;border-left: 3px solid #000;margin: 16px 0;padding-left: 16px;padding-block: 10px;}

/* ==========================================================================
   Hobbies
   ========================================================================== */
.hobby-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-block: 3rem;}
.hobby-row:first-of-type { padding-top: 0; }
.hobby-row:last-of-type { border-bottom: 0; padding-bottom: 0;}
.hobby-row--reverse .hobby-row__media { order: 2; }
/* .hobby-row__media .carousel__slide { aspect-ratio: 4/3; } */
.hobby-row__pill { margin-bottom: 0.9rem; }
.hobby-row__copy h2 { font-family: var(--font-body); font-size: 44px; font-weight: 500; color: #000;}
.hobby-row__copy p, .card__excerpt {color: #64748B;font-size: 16px;line-height: 1.6;}
@media (max-width: 767px) {
  .hobby-row, .hobby-row--reverse { grid-template-columns: 1fr; gap: 16px;}
  .hobby-row--reverse .hobby-row__media { order: -1; }
}

/* ==========================================================================
   Projects listing
   ========================================================================== */
.projects-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }

.page-hero h1{font-size: 65px;font-weight: 400;color: #fff;}


/* ==========================================================================
   Project / Blog detail
   ========================================================================== */
.detail-hero { text-align: left; }
.detail-body {display: flex;gap: 24px;}
.detail-body>*{flex: 1;}
.detail-body__desc { color: #64748B; font-size: 16px;}
.detail-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.single-product-section .pill--tag{font-size: 14px;font-weight: 600;text-transform: uppercase;letter-spacing: 2px;color: #A3A3A3;border-radius: 4px;border: 1px solid #9CA3AF;}

.other-projects__label { text-align: center; font-size: var(--fs-label); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #000; margin-bottom: 10px;}

/* Blog article */
.article-head { max-width: 800px; margin-inline: auto; text-align: center; }
.article-head p {color: #64748B; }
.article-byline { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.75rem; }
.article-byline img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; }
.article-byline__name { font-weight: 600; }
.article-byline__meta { font-size: var(--fs-small); color: rgba(255,255,255,0.6); }

.article-body { max-width: 850px; margin-inline: auto; }
.article-body p { color: #000; font-size: 16px;line-height: 1.6;}
.article-body p + p, .article-body h2 + p { margin-top: 1.35rem; }
.article-body blockquote {margin-left: 0;padding-left: 16px;border-left: 1px solid #000;}
.article-body h3 { font-family: var(--font-body); font-size: 28px; font-weight: 400; margin-top: 2.5rem; margin-bottom: 1rem; line-height: 1.3;}
.article-body ul { margin-top: 1.35rem; display: grid; gap: 0.9rem; }
.article-body ul li { padding-left: 1.1rem; position: relative; color: #262629; }
.article-body ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.article-share { display: flex; align-items: center; gap: 0.85rem; margin-top: 2.5rem; }
.article-share span { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: #A3A3A3;}
.article-share a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--ink);
  border-radius: 50%;
  position: relative;
  transition: transform 0.15s ease, background 0.15s ease;
}
.article-share a:hover {
  transform: translateY(-2px);
  background: #2b2b2b;
}
.article-share svg { width: 16px; height: 16px; fill: var(--white); }
.copy-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.copy-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: var(--ink) transparent transparent transparent;
}
.copy-tooltip.is-active {
  opacity: 1;
  visibility: visible;
}
.keep-reading { background: #F4F4F4;}
.hobby-row .pill--dark, .card.blog-featured .pill--dark, .card.blog-featured .pill--outline, .blog-filters button{color: #F4F4F4;font-size: 16px;letter-spacing: 2px;padding: 4px 16px;margin: 0;background: #000;}

.keep-reading .card__media img{height: 380px;object-fit: cover;border-radius: 12px;}

.blog-filters button{font-size: 14px;}
.blog-filters button.pill.pill--outline{border-color: #9CA3AF;background: transparent;color: #A3A3A3;padding-block: 8px;}

.card.blog-featured .card__title{font-size: 44px !important;font-weight: 500;line-height: 1.2;}
.card.blog-featured .card__media {aspect-ratio: initial !important;}
.card.blog-featured .card__media img{border-radius: 12px;}

.card__meta{font-size: 16px;color: #64748B;}
.card.blog-featured .text-link{padding-bottom: 0;border: none;letter-spacing: 2px;}
.blog-filters  button.pill.pill--outline.is-active{border-color: #000;background: #000;color: #fff;}


.project-card-wrap {margin-top: 50px;}
.project-card-wrap .card__title, .projects-featured .card__title, .other-projects .card__title{font-size: 16px !important;letter-spacing: 3px; font-weight: 600;color: #000; margin-top: 16px;}

section.page-hero.detail-hero h1{font-size: 65px;line-height: 1.1;text-align: center;}

body.blog .card.blog-featured .card__title{letter-spacing: -1px !important;font-weight: 400;}
body.blog .card.blog-featured .text-link {display: flex;align-items: center;gap: 10px;}
body.blog .card__eyebrow, .keep-reading .card__eyebrow{color: #64748B;font-size: 16px; font-weight: 500; letter-spacing: 2px;margin-top: 10px;}
body.blog .card__title, .keep-reading .card__title{margin-top: 0 !important;}

body.single img.attachment-full{object-fit: cover;}

.page-hero:has(span.pill.pill--dark){background: #fff;color: #000;}
.page-hero:has(span.pill.pill--dark) h1{color: #000;font-size: 44px;line-height: 1.2;letter-spacing: -1px;margin-bottom: 12px;}
.page-hero:has(span.pill.pill--dark) p{color: #64748B;font-size: 16px;line-height: 1.6}
.page-hero:has(span.pill.pill--dark) .pill{padding: 7px 19px;}
span.blog-author{font-size: 28px;line-height: 1.2;color: #000;}
p.article-byline__meta{text-align: left;}

.keep-reading h2.section-title{font-size: 44px;}
section.section.keep-reading {padding-block: 60px;}





/* ==========================================================================
   Blog listing
   ========================================================================== */
.blog-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 860px) { .blog-featured { grid-template-columns: 1fr; } }
.blog-filters { display: flex; justify-content: center; gap: 16px; margin-block: 60px; flex-wrap: wrap; }
.blog-filters button { cursor: pointer; }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-body>*{flex: 1;}
.contact-body__intro{padding: 40px 32px;background: #000; border-radius: 24px;display: flex;flex-direction: column;justify-content: flex-start;flex: 0 0 470px;}
.contact-body {display: flex;gap: 40px;}
.contact-body__intro .section-title { font-size: 65px !important; line-height: 1.1; color: #FAFAFA;margin-top: 10px;}
.contact-body__intro p { color: #FAFAFA; font-size: 16px;margin-top: auto;}
p.about-block__eyebrow{margin: 0;font-weight: 600;letter-spacing: 3px;}
.contact-form { display: grid; gap: 8px;}
.contact-form label {display: none;}

.form-subtitle{font-size: 28px;color: #000;font-weight: 400;line-height: 1.3;margin-bottom: 40px;}


.contact-form{padding: 40px 32px;border-radius: 16px;border: 1px solid #E2E8F0;}

.wpcf7-spinner{display: none;}

.project-slide img{object-fit: cover;}

.contact-form input:not([type="submit"]), .contact-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  background: #F3F4F6;
}
.contact-form input:not([type="submit"]):focus, .contact-form textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.contact-form textarea { resize: vertical;height: 100px; }
.contact-form .btn,
.contact-form input[type="submit"] {
  width: auto;
  background: #000;
  color: #FFFFFF;
  border: 1px solid #000;
  padding: 18px 24px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  justify-self: start;
  margin-top: 0.5rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-size: 16px;
}
.contact-form .btn:hover,
.contact-form input[type="submit"]:hover { background: #2b2b2b; }
.contact-form .wpcf7-form-control-wrap { display: block; width: 100%; }

.contact-form input:not([type="submit"]).wpcf7-not-valid,
.contact-form input:not([type="submit"]).is-invalid,
.contact-form input:not([type="submit"])[aria-invalid="true"]:not([aria-invalid="false"]),
.contact-form textarea.wpcf7-not-valid,
.contact-form textarea.is-invalid,
.contact-form textarea[aria-invalid="true"]:not([aria-invalid="false"]) {
  border: 1px solid #c53030 !important;
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
}

.contact-form input:not([type="submit"]).wpcf7-not-valid::placeholder,
.contact-form input:not([type="submit"]).is-invalid::placeholder,
.contact-form input:not([type="submit"])[aria-invalid="true"]:not([aria-invalid="false"])::placeholder,
.contact-form textarea.wpcf7-not-valid::placeholder,
.contact-form textarea.is-invalid::placeholder,
.contact-form textarea[aria-invalid="true"]:not([aria-invalid="false"])::placeholder {
  color: #c53030 !important;
  opacity: 0.85;
}

.contact-form input:not([type="submit"]).wpcf7-not-valid:focus,
.contact-form input:not([type="submit"]).is-invalid:focus,
.contact-form input:not([type="submit"])[aria-invalid="true"]:not([aria-invalid="false"]):focus,
.contact-form textarea.wpcf7-not-valid:focus,
.contact-form textarea.is-invalid:focus,
.contact-form textarea[aria-invalid="true"]:not([aria-invalid="false"]):focus {
  outline: 2px solid #c53030 !important;
  outline-offset: 1px;
}

.contact-form .wpcf7-not-valid-tip,
.contact-form .field-error {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #c53030 !important;
  margin-top: 0.45rem;
  font-weight: 400;
  line-height: 1.4;
}

.contact-form .wpcf7-not-valid-tip::before,
.contact-form .field-error::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  min-width: 15px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23c53030'/%3E%3Cpath d='M7.15 3.5h1.7a.45.45 0 0 1 .45.45v4.8a.45.45 0 0 1-.45.45h-1.7a.45.45 0 0 1-.45-.45v-4.8a.45.45 0 0 1 .45-.45z' fill='%23ffffff'/%3E%3Ccircle cx='8' cy='11.75' r='1' fill='%23ffffff'/%3E%3C/svg%3E");
}

div.wpcf7 .wpcf7-response-output,
div.wpcf7 form .wpcf7-response-output,
.contact-form .wpcf7-response-output {
  margin: 1.25rem 0 0 !important;
  padding: 0 !important;
  border: none !important;
  border-width: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
}

div.wpcf7 form.sent .wpcf7-response-output,
div.wpcf7 form[data-status="sent"] .wpcf7-response-output,
.contact-form.sent .wpcf7-response-output,
.contact-form[data-status="sent"] .wpcf7-response-output,
.contact-form .wpcf7-response-output.is-success,
.contact-form .wpcf7-mail-sent-ok,
.contact-form .success-message,
.success-message {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #16a34a !important;
  border: none !important;
  border-width: 0 !important;
  background: none !important;
  padding: 0 !important;
  margin-top: 1.25rem !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
}

div.wpcf7 form.sent .wpcf7-response-output::before,
div.wpcf7 form[data-status="sent"] .wpcf7-response-output::before,
.contact-form.sent .wpcf7-response-output::before,
.contact-form[data-status="sent"] .wpcf7-response-output::before,
.contact-form .wpcf7-response-output.is-success::before,
.contact-form .wpcf7-mail-sent-ok::before,
.contact-form .success-message::before,
.success-message::before {
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2316a34a'/%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.739a.75.75 0 0 1 1.04-.208z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

div.wpcf7 form.invalid .wpcf7-response-output,
div.wpcf7 form[data-status="invalid"] .wpcf7-response-output,
.contact-form.invalid .wpcf7-response-output,
.contact-form[data-status="invalid"] .wpcf7-response-output {
  display: none !important;
}
@media (max-width: 860px) { .contact-body { grid-template-columns: 1fr; } .page-hero h1{font-size: 44px;}}