/* Hair by Katrin · RC visual pass 7–11 · 2026-11-06
   Only additional styling. Original layout, wording and gallery behavior preserved. */
:root { --soft-border:#DBCEC5; --soft-fill:#FAF7F2; --soft-active:#91364D; }

/* Unified button language: restrained soft rectangles rather than heavy squared controls. */
.header-cta,
.btn,
.filter {
  border-radius:11px;
  border-color:var(--soft-border);
  background:var(--soft-fill);
  color:var(--ink);
  box-shadow:none;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.header-cta {padding:13px 20px;border-color:#CBBEB5;}
.header-cta:hover {background:#F0E7E0;border-color:#BEAFA5;color:var(--ink);}
.btn {padding:16px 22px;min-height:54px;gap:20px;}
.btn:hover {transform:translateY(-1px);}
.btn-solid,
.career .btn-solid {
  background:var(--soft-active);
  border-color:var(--soft-active);
  color:#fff;
}
.btn-solid:hover,
.career .btn-solid:hover {background:#792C41;border-color:#792C41;color:#fff;}
.btn-outline,
.career .btn:not(.btn-solid) {background:var(--soft-fill);color:var(--ink);border-color:#CABCB2;}
.btn-outline:hover,
.career .btn:not(.btn-solid):hover {background:#F0E7DF;border-color:#BBA99F;}
.btn-arrow {font-weight:300;font-size:16px;}
.filters {gap:8px;margin-bottom:27px;}
.filter {padding:12px 18px;border-color:#D8CCC4;font-weight:650;}
.filter:hover:not(.active) {background:#EFE7E0;border-color:#C3B5AA;}
.filter.active,
.filter.active:hover {background:var(--soft-active);border-color:var(--soft-active);color:#fff;}
#show-more {min-width:195px;justify-content:center;}
/* Keep the same focus affordance throughout navigation and gallery. */
.header-cta:focus-visible,
.btn:focus-visible,
.filter:focus-visible,
.menu-toggle:focus-visible,
.work-compare button:focus-visible {outline:2px solid var(--soft-active);outline-offset:3px;}

/* Catalog: calm photo labels, common frame and consistent typographic rhythm. */
.works .work-grid {gap:18px;}
.works .work-card {background:var(--paper);}
.works .work-photo {background:#E7E1DB;aspect-ratio:4 / 5;}
.works .work-photo img {object-fit:contain;object-position:center center;}
.works .work-photo .tag {
  top:12px;left:12px;padding:6px 9px;
  border-radius:7px;
  background:rgba(252,248,242,.83);
  color:#564D4A;
  font-size:9px;line-height:1.25;
  font-weight:500;letter-spacing:.025em;
}
.works .work-body {padding:21px 17px 22px;}
.works .work-body h3 {font-size:clamp(20px,1.7vw,24px);line-height:1.16;margin-bottom:8px;}
.works .work-body p {margin-bottom:16px;line-height:1.6;}
/* Compatible with v3's already aligned controls, including disabled Before for singles. */
.works .work-compare {max-width:100%;background:#EEE6DE;border-color:#DFD2C7;border-radius:11px;}
.works .work-compare button {border-radius:8px;min-height:44px;}
.works .work-compare button[aria-pressed="true"] {background:var(--soft-active);}
.works .work-compare button:disabled {color:#A79C95;}
.gallery-pagination {margin-top:31px;}

/* Mobile hero compactness: preserve the original composition while showing the portrait earlier. */
@media(max-width:760px) {
  .hero-copy {padding:28px 0 29px;}
  .little-mark {margin-bottom:10px;font-size:19px;}
  .hero h1 {font-size:clamp(52px,10.5vw,72px);margin-bottom:15px;}
  .hero-desc {font-size:12.7px;line-height:1.68;margin-bottom:22px;}
  .hero-image {min-height:440px;}
  .hero-image img.portrait {object-position:center 45%;}
  .btn-row {gap:9px;}
  .btn {min-height:48px;padding:13px 15px;font-size:10px;gap:10px;border-radius:10px;}
  .filters {gap:7px;margin-bottom:23px;}
  .filter {padding:11px 12px;font-size:9px;border-radius:9px;min-height:44px;}
  .works .work-grid {gap:12px;}
  .works .work-photo .tag {top:10px;left:10px;padding:6px 7px;border-radius:6px;font-size:8.5px;}
  .works .work-body {padding:14px 12px 16px;}
  .works .work-body h3 {font-size:clamp(17px,4.45vw,19px);line-height:1.15;margin-bottom:7px;overflow-wrap:break-word;}
  .works .work-body p {font-size:11px;line-height:1.5;margin-bottom:13px;}
  .works .work-compare {max-width:100%;}
  .works .work-compare button {min-height:44px;font-size:11px;}
  .gallery-pagination {margin-top:26px;}
}
@media(max-width:380px) {
  .hero-copy {padding:24px 0 23px;}
  .hero h1 {font-size:50px;}
  .hero-desc {font-size:12px;margin-bottom:19px;}
  .hero-image {min-height:405px;}
  .works .work-body {padding:13px 10px 15px;}
  .works .work-body h3 {font-size:16px;}
  .filters {gap:5px;}
  .filter {padding:10px 9px;font-size:8.5px;}
}
@media(hover:hover) {
  .works .work-card:hover .work-photo img {transform:none;}
}
@media(prefers-reduced-motion:reduce) {
  .header-cta,.btn,.filter {transition:none;}
}


/* 2026-11-07: approved feedback — education text moved to left of portrait */
.about .about-grid {grid-template-columns:minmax(0, 1fr) minmax(0, 1.06fr);gap:clamp(30px,5vw,76px);max-width:1050px;margin:0 auto;align-items:center;}
.about .about-side.left {grid-column:1;grid-row:1;max-width:440px;justify-self:end;font-size:14px;line-height:1.73;}
.about .about-side.left p {margin:0 0 17px;}
.about .about-side.left .about-school-intro {margin-top:23px;padding-top:19px;border-top:1px solid var(--line);}
.about .about-portrait {grid-column:2;grid-row:1;width:100%;}
/* The supporting phrase is integral to the approach: make it readable and editorial. */
.approach .head-aside.approach-highlight {max-width:410px;align-self:center;margin-top:0;padding:0 0 0 18px;border-left:2px solid var(--wine);font:400 clamp(18px,1.8vw,24px)/1.48 var(--serif);color:#38312F;}
/* Color descriptions used to duplicate the generic card name. */
.works .work-card[data-kind="color"] .work-body h3 {min-height:2.35em;}
@media(max-width:760px){
 .about .about-grid {grid-template-columns:1fr;gap:21px;max-width:none;}
 .about .about-side.left {grid-column:1;grid-row:1;justify-self:stretch;max-width:none;}
 .about .about-side.left .about-school-intro {margin-top:16px;padding-top:15px;}
 .about .about-portrait {grid-column:1;grid-row:2;height:355px;min-height:355px;}
 .approach .head-aside.approach-highlight {margin-top:18px;max-width:100%;font-size:19px;padding-left:15px;}
 .works .work-card[data-kind="color"] .work-body h3 {min-height:2.3em;}
}
@media(max-width:380px){.about .about-portrait {height:345px;min-height:345px;} .approach .head-aside.approach-highlight{font-size:18px;}}