/*
Theme Name: KALOS Studio
Theme URI: https://example.com/kalos-studio
Author: KALOS
Description: A minimal editorial WordPress theme for a photography and creative studio.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kalos-studio
*/

:root {
  --kalos-bg: #f4f1eb;
  --kalos-paper: #fbfaf7;
  --kalos-ink: #111111;
  --kalos-muted: #6f6b64;
  --kalos-line: rgba(17,17,17,.18);
  --kalos-max: 1500px;
  --kalos-gutter-max: 70px;
  --kalos-gutter: clamp(22px, 4vw, var(--kalos-gutter-max));
  --kalos-image-gap: 10px;
  --kalos-gallery-columns: 3;
  --kalos-serif: Georgia, 'Times New Roman', serif;
  --kalos-sans: Arial, Helvetica, sans-serif;
  --kalos-size-brand: 32px;
  --kalos-size-hero: 150px;
  --kalos-size-kicker: 21px;
  --kalos-size-intro: 21px;
  --kalos-size-statement: 66px;
  --kalos-size-about-heading: 100px;
  --kalos-size-about-copy: 42px;
  --kalos-size-contact: 56px;
  --kalos-size-gallery-heading: 120px;
  --kalos-size-body: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--kalos-paper);
  color: var(--kalos-ink);
  font-family: var(--kalos-sans);
  font-size: var(--kalos-size-body);
  -webkit-font-smoothing: antialiased;
}
img { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

.kalos-wrap { width: min(100%, var(--kalos-max)); margin: 0 auto; padding-inline: var(--kalos-gutter); }
.kalos-eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; }
.kalos-serif { font-family: var(--kalos-serif); font-weight: 400; }

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  padding: 28px 0;
}
.site-header .kalos-wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-brand { font-family: var(--kalos-serif); letter-spacing:.45em; font-size: clamp(20px, 2.3vw, var(--kalos-size-brand)); }
.site-nav { display:flex; gap: clamp(22px,3vw,52px); align-items:center; }
.site-nav a { text-transform: uppercase; letter-spacing:.2em; font-size:10px; }
.menu-toggle { display:none; background:none; border:0; padding:8px; cursor:pointer; }
.menu-toggle span { display:block; width:24px; height:1px; background:#111; margin:5px 0; }

.hero {
  min-height: 92vh;
  background: var(--kalos-bg);
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items:stretch;
}
.hero-copy {
  padding: clamp(150px, 18vh, 220px) var(--kalos-gutter) 65px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:760px;
  margin-left:auto;
  width:100%;
}
.hero h1 {
  margin: 18px 0 12px;
  font-family: var(--kalos-serif);
  font-weight: 400;
  font-size: clamp(64px, 10vw, var(--kalos-size-hero));
  line-height:.82;
  letter-spacing:-.045em;
}
.hero-kicker { text-transform:uppercase; letter-spacing:.14em; font-size:clamp(13px,1.4vw,var(--kalos-size-kicker)); line-height:1.45; max-width:430px; }
.hero-rule { width:50px; height:1px; background:var(--kalos-ink); margin:30px 0 22px; }
.hero-intro { max-width:430px; font-family: var(--kalos-serif); font-size:clamp(14px,1.5vw,var(--kalos-size-intro)); line-height:1.4; }
.hero-link { margin-top:30px; width:max-content; text-transform:uppercase; letter-spacing:.18em; font-size:11px; border-bottom:1px solid currentColor; padding-bottom:8px; }
.hero-image { min-height: 92vh; background:#d8d5ce center/cover no-repeat; }
.hero-image.is-placeholder { position:relative; }
.hero-image.is-placeholder::after { content:'Add hero image in Appearance → Customize → KALOS Homepage'; position:absolute; inset:0; display:grid; place-items:center; padding:20px; color:#5f5b54; text-align:center; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.hero-social { margin-top:auto; padding-top:50px; display:flex; gap:36px; }
.hero-social a { text-transform:uppercase; letter-spacing:.18em; font-size:10px; }

.statement { padding: clamp(80px,9vw,140px) 0 52px; text-align:center; }
.statement h2 { font-size:clamp(28px,5vw,var(--kalos-size-statement)); line-height:1.05; max-width:780px; margin:0 auto 30px; }
.text-link { display:inline-block; text-transform:uppercase; letter-spacing:.18em; font-size:10px; border-bottom:1px solid currentColor; padding-bottom:8px; }

.work-grid { padding: 0 0 clamp(50px,7vw,95px); }
.grid-inner { display:grid; grid-template-columns:1fr .9fr .9fr 1fr; gap:8px; align-items:start; }
.grid-column { display:grid; gap:8px; }
.photo-card { background:#d8d5ce; overflow:hidden; position:relative; }
.photo-card .lightbox-link { display:block; width:100%; height:100%; cursor:zoom-in; }
.photo-card img { width:100%; height:100%; object-fit:cover; object-position:var(--kalos-crop-x,50%) var(--kalos-crop-y,50%); transform:scale(var(--kalos-crop-scale,1)); transform-origin:var(--kalos-crop-x,50%) var(--kalos-crop-y,50%); transition:transform .6s ease; }
.photo-card:hover img { transform:scale(var(--kalos-crop-hover,1.025)); }
.photo-card.placeholder::after { content:'Portfolio image'; position:absolute; inset:0; display:grid; place-items:center; color:#6a665e; text-transform:uppercase; letter-spacing:.18em; font-size:10px; }
.ratio-portrait { aspect-ratio: 4/5; }
.ratio-tall { aspect-ratio: 3/5; }
.ratio-landscape { aspect-ratio: 4/3; }
.ratio-square { aspect-ratio: 1/1; }

.about { padding: clamp(95px,10vw,160px) 0; border-top:1px solid var(--kalos-line); }
.about-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(45px,8vw,150px); }
.about h2 { font-size:clamp(36px,7vw,var(--kalos-size-about-heading)); line-height:.9; margin:15px 0 0; }
.about-copy { font-family:var(--kalos-serif); font-size:clamp(18px,3vw,var(--kalos-size-about-copy)); line-height:1.2; max-width:760px; }
.about-small { font-family:var(--kalos-sans); font-size:clamp(16px,1.15vw,var(--kalos-size-body)); line-height:1.65; max-width:610px; color:var(--kalos-muted); margin-top:35px; }

.contact-band { margin:0 var(--kalos-gutter) clamp(25px,4vw,55px); background:var(--kalos-bg); }
.contact-band-inner { max-width:var(--kalos-max); margin:0 auto; padding:clamp(48px,6vw,88px); display:grid; grid-template-columns:1.2fr 1fr .9fr; gap:40px; align-items:center; }
.contact-band h2 { margin:0; font-size:clamp(24px,4vw,var(--kalos-size-contact)); line-height:1.05; }
.contact-band p { margin:0; line-height:1.6; color:var(--kalos-muted); }
.contact-band a { justify-self:end; text-transform:uppercase; letter-spacing:.18em; font-size:11px; border-bottom:1px solid; padding-bottom:8px; }

.site-footer { padding:0 0 28px; }
.footer-inner { display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.18em; font-size:9px; }
.footer-links { display:flex; gap:35px; }

@media (max-width: 900px) {
  .site-nav { display:none; position:absolute; top:75px; right:var(--kalos-gutter); left:var(--kalos-gutter); background:var(--kalos-paper); padding:24px; flex-direction:column; align-items:flex-start; border:1px solid var(--kalos-line); }
  .site-nav.is-open { display:flex; }
  .menu-toggle { display:block; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { order:2; padding-top:65px; margin:0; }
  .hero-image { order:1; min-height:60vh; }
  .hero h1 { font-size:clamp(66px,22vw,120px); }
  .grid-inner { grid-template-columns:1fr 1fr; }
  .about-grid { grid-template-columns:1fr; }
  .contact-band-inner { grid-template-columns:1fr; }
  .contact-band a { justify-self:start; }
}

@media (max-width: 560px) {
  .site-brand { letter-spacing:.28em; font-size:24px; }
  .grid-inner { grid-template-columns:1fr; }
  .hero-social { padding-top:35px; }
  .contact-band { margin-inline:16px; }
}


/* Full gallery and image lightbox */
.gallery-more { padding-top: clamp(64px, 7vw, 110px); text-align:center; }
.gallery-more-link { display:inline-block; }
.gallery-more-link span { display:inline-block; color:var(--kalos-muted); font-family:var(--kalos-serif); font-size:clamp(22px,2vw,30px); border-bottom:1px solid currentColor; padding-bottom:10px; transition:color .25s ease; }
.gallery-more-link:hover span { color:var(--kalos-ink); }

.gallery-page { padding-top:130px; min-height:100vh; }
.gallery-hero { padding-top:clamp(60px,9vw,130px); padding-bottom:clamp(50px,7vw,100px); }
.gallery-hero h1 { margin:16px 0 24px; font-size:clamp(42px,9vw,var(--kalos-size-gallery-heading)); line-height:.9; font-weight:400; }
.gallery-hero p { max-width:650px; margin:0; color:var(--kalos-muted); font-family:var(--kalos-serif); font-size:clamp(18px,2vw,28px); line-height:1.45; }
.full-gallery { columns:3; column-gap:10px; padding-bottom:clamp(70px,9vw,140px); }
.gallery-item { break-inside:avoid; margin:0 0 10px; background:#dedbd4; overflow:hidden; }
.gallery-item a { display:block; cursor:zoom-in; }
.gallery-item img { width:100%; height:auto; transition:transform .6s ease, opacity .3s ease; }
.gallery-item:hover img { transform:scale(1.015); opacity:.94; }
.gallery-empty { border:1px solid var(--kalos-line); padding:60px; text-align:center; color:var(--kalos-muted); }
.gallery-back { padding-bottom:clamp(60px,8vw,110px); text-align:center; }

body.lightbox-open { overflow:hidden; }
.kalos-lightbox { position:fixed; inset:0; z-index:99999; background:rgba(10,10,10,.96); display:none; align-items:center; justify-content:center; }
.kalos-lightbox.is-open { display:flex; }
.lightbox-stage { width:calc(100vw - 150px); height:calc(100vh - 90px); display:flex; align-items:center; justify-content:center; position:relative; }
.lightbox-stage img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.lightbox-count { position:absolute; left:50%; bottom:-30px; transform:translateX(-50%); color:#fff; font-size:10px; letter-spacing:.18em; }
.lightbox-close, .lightbox-prev, .lightbox-next { position:absolute; z-index:2; border:0; background:transparent; color:#fff; cursor:pointer; line-height:1; }
.lightbox-close { top:18px; right:24px; font-size:42px; font-weight:200; }
.lightbox-prev, .lightbox-next { top:50%; transform:translateY(-50%); font-size:58px; padding:20px; }
.lightbox-prev { left:10px; }
.lightbox-next { right:10px; }
.lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible { outline:1px solid #fff; outline-offset:4px; }

@media (max-width: 900px) {
  .full-gallery { columns:2; }
  .gallery-page { padding-top:85px; }
  .lightbox-stage { width:calc(100vw - 80px); height:calc(100vh - 90px); }
}
@media (max-width: 560px) {
  .full-gallery { columns:1; }
  .gallery-hero { padding-top:45px; }
  .lightbox-stage { width:calc(100vw - 30px); height:calc(100vh - 100px); }
  .lightbox-prev, .lightbox-next { font-size:42px; padding:12px; }
  .lightbox-prev { left:0; }
  .lightbox-next { right:0; }
}


/* KALOS 2.0 editorial gallery, projects, motion, and controls */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.photo-card img,.gallery-item img{transition:none} }

.grid-inner { gap:var(--kalos-image-gap); }
.grid-column { gap:var(--kalos-image-gap); }
.full-gallery { columns:var(--kalos-gallery-columns); column-gap:var(--kalos-image-gap); }
.gallery-item { margin-bottom:var(--kalos-image-gap); }
.gallery-item.is-pending,.gallery-item.is-filtered { display:none; }
.gallery-filters { display:flex; flex-wrap:wrap; gap:12px 28px; padding-bottom:34px; }
.gallery-filters button { border:0; background:none; color:var(--kalos-muted); padding:0 0 7px; cursor:pointer; text-transform:uppercase; letter-spacing:.18em; font-size:10px; border-bottom:1px solid transparent; }
.gallery-filters button.is-active { color:var(--kalos-ink); border-color:currentColor; }
.load-more-wrap { text-align:center; padding:0 0 clamp(65px,8vw,120px); }
.load-more-button { background:transparent; border:0; border-bottom:1px solid currentColor; padding:0 0 9px; cursor:pointer; text-transform:uppercase; letter-spacing:.2em; font-size:10px; }

.kalos-lightbox { opacity:0; display:flex; pointer-events:none; transition:opacity .25s ease; cursor:none; }
.kalos-lightbox.is-open { opacity:1; pointer-events:auto; }
.lightbox-ui { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.kalos-lightbox button,.lightbox-meta { opacity:0; transition:opacity .25s ease; cursor:pointer; }
.kalos-lightbox.show-ui { cursor:default; }
.kalos-lightbox.show-ui button,.kalos-lightbox.show-ui .lightbox-meta { opacity:1; }
.lightbox-meta { position:absolute; left:0; right:0; bottom:-34px; display:flex; justify-content:center; gap:24px; color:#fff; font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.lightbox-title:empty { display:none; }

.project-page { padding-top:130px; }
.project-header { padding-top:clamp(60px,9vw,130px); padding-bottom:clamp(45px,6vw,90px); }
.project-header h1 { margin:16px 0 20px; font-size:clamp(42px,8vw,var(--kalos-size-gallery-heading)); line-height:.92; }
.project-header p { max-width:650px; font-family:var(--kalos-serif); font-size:clamp(18px,2vw,28px); line-height:1.45; color:var(--kalos-muted); }
.project-hero { margin:0; background:#ddd9d2; }
.project-hero img { width:100%; max-height:88vh; object-fit:contain; }
.project-content { max-width:1100px; padding-top:clamp(60px,8vw,120px); padding-bottom:clamp(60px,8vw,120px); font-size:clamp(15px,1.2vw,18px); line-height:1.75; }
.project-content > * { max-width:760px; margin-left:auto; margin-right:auto; }
.project-content .alignwide { max-width:1200px; }
.project-content .alignfull { max-width:none; width:100vw; margin-left:calc(50% - 50vw); }
.project-content .wp-block-gallery { max-width:1200px; }
.project-nav { display:flex; justify-content:space-between; gap:30px; padding-bottom:clamp(70px,8vw,120px); text-transform:uppercase; letter-spacing:.18em; font-size:10px; }

@media(max-width:900px){.full-gallery{columns:min(2,var(--kalos-gallery-columns));}.project-page{padding-top:85px}}
@media(max-width:560px){.full-gallery{columns:1}.gallery-filters{gap:12px 18px}.lightbox-title{display:none}}


/* KALOS 2.1 — stable masonry and gentle archive loading */
.full-gallery {
  columns:auto !important;
  position:relative;
  display:block;
  transition:height .55s cubic-bezier(.22,.61,.36,1);
}
.gallery-item {
  position:absolute;
  margin:0 !important;
  break-inside:auto;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1);
  will-change:left,top,opacity,transform;
}
.gallery-item.is-loaded { opacity:1; transform:translateY(0); }
.gallery-item img { width:100%; height:100%; object-fit:cover; }
.gallery-item.is-pending,.gallery-item.is-filtered { display:none; }
.load-more-button {
  font-family:var(--kalos-serif);
  text-transform:none;
  letter-spacing:.04em;
  font-size:clamp(17px,1.5vw,22px);
  padding-bottom:7px;
}
.lightbox-meta { justify-content:center; }


/* KALOS 2.2 — refined archive transition and spacing rhythm */
.archive-continuation {
  position: relative;
  margin-top: clamp(88px, 9vw, 148px);
  padding-top: clamp(44px, 5vw, 72px);
  padding-bottom: clamp(82px, 9vw, 138px);
  text-align: center;
}
.archive-continuation::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(180px, 22vw);
  height: 1px;
  background: var(--kalos-line);
  transform: translateX(-50%);
}
.load-more-wrap.archive-continuation {
  padding-left: var(--kalos-gutter);
  padding-right: var(--kalos-gutter);
}
.archive-continuation .load-more-button {
  position: relative;
  border: 0;
  padding: 0 0 12px;
  line-height: 1.25;
}
.archive-continuation .load-more-button::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%) scaleX(.38);
  transform-origin: center;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.archive-continuation .load-more-button:hover::after,
.archive-continuation .load-more-button:focus-visible::after {
  transform: translateX(-50%) scaleX(1);
}
.archive-continuation .load-more-button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 8px;
}
.gallery-back {
  padding-top: clamp(10px, 2vw, 28px);
}
@media (max-width: 560px) {
  .archive-continuation {
    margin-top: 72px;
    padding-top: 38px;
    padding-bottom: 86px;
  }
  .archive-continuation::before { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .archive-continuation .load-more-button::after { transition: none; }
}


/* KALOS 2.3 — cache-safe, structural gallery continuation spacing */
.archive-continuation {
  display: block !important;
  clear: both;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: clamp(104px, 11vw, 176px) auto 0 !important;
  padding: 0 var(--kalos-gutter) clamp(88px, 10vw, 152px) !important;
  text-align: center;
}
.archive-continuation::before { content: none !important; }
.archive-divider {
  display: block;
  width: min(190px, 24vw);
  height: 1px;
  margin: 0 auto;
  background-color: currentColor;
  opacity: .22;
}
.archive-continuation-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1px;
  padding-top: clamp(48px, 5.5vw, 78px);
}
.archive-continuation .load-more-button {
  display: inline-block;
  margin: 0;
}
.archive-continuation[hidden],
.archive-continuation:has(.load-more-button[hidden]) {
  display: none !important;
}
@media (max-width: 560px) {
  .archive-continuation {
    margin-top: 88px !important;
    padding-bottom: 92px !important;
  }
  .archive-divider { width: 120px; }
  .archive-continuation-inner { padding-top: 42px; }
}

/* KALOS 3.0 — independent homepage image scale and focal-point cropping */
.photo-card .lightbox-link{overflow:hidden;}