/*
Theme Name: ALO - portfolio of adrian lozano
Author: Atelier Lozano
Description: Editierbares ALO Portfolio mit unveränderter Logoanimation, WordPress-Projekten, Galerien und bearbeitbaren Seiten.
Version: 2.10
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: alo-atelier-lozano
License: Proprietary. Alle Projektbilder, Logos und Inhalte bleiben im Eigentum ihrer jeweiligen Rechteinhaber.
*/

:root{--ink:#111;--page:#fff;--small:12px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--page);font-family:Arial,Helvetica,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}.topbar{height:96px;padding:20px 3.8vw;display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:5}.identity{display:flex;gap:16px;align-items:flex-start}.logo-wrap{border:0;padding:0;background:none;display:block;width:54px;height:65px;line-height:0;flex-shrink:0}.logo-wrap svg{display:block;width:100%;height:100%;overflow:visible}.wordmark{font-size:12px;letter-spacing:-.025em;line-height:1.12;padding-top:3px}.nav{display:flex;gap:26px;padding-top:5px}.nav button,.nav a{background:none;border:0;padding:0;font-size:13px;letter-spacing:-.02em}.nav button:hover,.nav a:hover{text-decoration:underline}.page{min-height:calc(100svh - 160px)}.index{padding:22px 3.8vw 100px}.index-intro{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;margin:4px 0 34px}.index-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:3.5vw;row-gap:clamp(56px,7vw,125px);align-items:start}.project-card{display:block;text-align:center;background:none;border:0;padding:0;width:100%;min-width:0;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.project-card:nth-child(4n + 2){margin-top:85px}.project-card:nth-child(4n + 3){margin-top:23px}.project-card:nth-child(4n + 4){margin-top:130px}.project-card:hover{transform:translateY(-7px)}.project-card .thumb{display:flex;align-items:center;justify-content:center;height:clamp(155px,19.5vw,275px);width:100%}.project-card img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:filter .45s}.project-card:hover img{filter:saturate(1.08)}.project-card .project-num{font-size:14px;line-height:1.4;display:block;margin-top:9px}.project-card .project-label{font-size:11px;color:#777;display:block;opacity:0;transition:opacity .25s}.project-card:hover .project-label{opacity:1}.footer{padding:20px 3.8vw 35px;font-size:11px;display:flex;justify-content:space-between}.detail{padding:0 3.8vw 90px}.detail-head{display:grid;grid-template-columns:1fr 2fr 1fr;gap:30px;margin:18px 0 46px;align-items:start;font-size:13px}.detail-head .project-id{font-size:14px}.detail-head h1{font-size:17px;line-height:1.35;font-weight:400;margin:0}.detail-head p{margin:0;line-height:1.5}.detail-hero{width:min(100%,1120px);margin:0 auto 90px;display:block;max-height:76vh;object-fit:contain}.description{max-width:730px;margin:0 auto 100px;line-height:1.7;font-size:14px}.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:75px 18px;align-items:start}.gallery button{padding:0;background:none;border:0;grid-column:span 6}.gallery button:nth-child(3n){grid-column:3/span 8}.gallery button:nth-child(5n){grid-column:2/span 5}.gallery img{max-height:80vh;object-fit:contain;display:block;width:100%}.next-project{padding:85px 0 10px;font-size:14px;text-align:right}.info-page{padding:6vh 3.8vw 100px;max-width:850px;font-size:clamp(23px,3.2vw,44px);line-height:1.25;letter-spacing:-.04em}.info-page .tiny{font-size:13px;letter-spacing:0;margin-bottom:60px}.info-page a{text-decoration:underline}.lightbox{position:fixed;inset:0;background:white;z-index:20;display:none;align-items:center;justify-content:center;padding:5vw}.lightbox.open{display:flex}.lightbox img{max-width:90vw;max-height:83vh;object-fit:contain}.close,.next,.prev{position:absolute;background:none;border:0;font-size:14px}.close{top:30px;right:4vw}.prev{left:4vw;bottom:25px}.next{right:4vw;bottom:25px}.overlay{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:50;transition:opacity .7s;}.overlay.done{opacity:0;pointer-events:none}.intro-svg{width:min(94vw,980px);transition:transform .42s cubic-bezier(.76,0,.2,1);transform-origin:top left;will-change:transform}.intro-svg svg{width:100%;display:block;height:auto;transition:filter .18s linear}.overlay{transition:background-color .18s linear,opacity .30s linear}.skip{position:absolute;bottom:28px;right:32px;background:none;border:none;color:#aaa;font-size:11px;letter-spacing:.08em}.intro-active{overflow:hidden}@media(max-width:800px){.index-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:7vw;row-gap:38px}.project-card:nth-child(n){margin-top:0}.project-card:nth-child(2n){margin-top:58px}.project-card .thumb{height:clamp(180px,36vw,285px)}.topbar{height:85px}.nav{gap:15px}.nav button{font-size:12px}.detail-head{grid-template-columns:1fr 2fr}.detail-head>p{grid-column:2}.gallery{gap:35px 12px}.gallery button{grid-column:span 12}.gallery button:nth-child(n){grid-column:span 12}.detail-hero{margin-bottom:55px}.description{margin-bottom:55px}}@media(max-width:440px){.topbar{padding:20px 4vw}.identity{gap:9px}.wordmark{font-size:10px}.logo-wrap{width:43px;height:52px}.nav{gap:12px}.nav button{font-size:11px}.index{padding-left:4vw;padding-right:4vw}.project-card .thumb{height:170px}.project-card .project-num{font-size:12px}.project-card .project-label{opacity:1;font-size:10px}.detail-head{gap:10px}.detail-head h1{font-size:15px}.detail-head,.description{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

/* ALO – header logo: preserve the ORIGINAL three animated vector letterforms,
   but do not display the glyphs outside the embedded letter-a clipping area. */
.logo-wrap { margin-left: 1vw; }
#brand > svg { display:block; width:100%; height:100%; overflow:visible; }
#brand > svg svg { overflow:hidden !important; }

/* Loose editorial project collage, inspired by fala's deliberately irregular index. */
.index { padding-top: 14px; padding-bottom: 135px; }
.index-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
  column-gap: 3.6vw;
  row-gap: clamp(135px, 12vw, 220px);
  align-items: start;
}
.project-card:nth-child(n) {
  width: var(--card-width, 92%);
  margin-top: var(--stagger, 0px);
  margin-left: var(--side, 0%);
  text-align: center;
}
.project-card .thumb { width:100%; height: clamp(165px, 19vw, 290px); }
.project-card img { max-height:var(--image-height, 100%); max-width: 100%; }
.project-card .project-num { margin-top: 15px; }
@media(max-width:800px) {
  .index-grid { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:85px; column-gap:6vw; }
  .project-card:nth-child(n) { width:var(--mobile-width,94%); margin-top: var(--mobile-stagger, 0px); margin-left:var(--mobile-side,0%); }
  .project-card .thumb { height:clamp(175px,36vw,290px); }
}
@media(max-width:440px) {
  .logo-wrap { margin-left:0; }
  .index-grid { column-gap: 4vw; row-gap:64px; }
  .project-card:nth-child(n) { width:96%; margin-left: 0; margin-top: var(--mobile-stagger,0px); }
  .project-card .thumb { height:170px; }
  .project-card .project-num { margin-top:10px; }
}

/* Project detail: the introductory image is replaced by a large editorial text
   with exactly the same type scale as the existing INFO page. */
.detail .description {
  max-width:850px;
  margin:0 0 100px;
  font-size:clamp(23px,3.2vw,44px);
  line-height:1.25;
  letter-spacing:-.04em;
  font-weight:400;
  overflow-wrap:break-word;
}
@media(max-width:800px){
  .detail .description { margin-bottom:65px; }
}

/* FALA-inspired detail composition: the image sequence starts directly below
   the shared header. All project text is placed at the foot of the gallery. */
.detail > .gallery { margin-top: clamp(16px, 3.5vw, 48px); }
.detail .project-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.72fr);
  align-items: end;
  gap: clamp(45px, 9vw, 150px);
  margin-top: clamp(115px, 15vw, 235px);
}
.detail .project-bottom .description {
  margin: 0;
  max-width: none;
  font-size: clamp(23px, 3.2vw, 44px); /* same as INFO */
  line-height: 1.25;
  letter-spacing: -.04em;
  font-weight: 400;
  overflow-wrap: break-word;
}
.detail .project-bottom-meta {
  justify-self: end;
  align-self: end;
  max-width: 100%;
  text-align: right;
  overflow-wrap: break-word;
}
.detail .project-bottom-meta h1 {
  margin: 0 0 19px;
  font-weight: 400;
  font-size: clamp(23px, 3.2vw, 44px);
  line-height: 1.13;
  letter-spacing: -.04em;
}
.detail .project-bottom-number { font-size: 13px; margin-bottom: 22px; }
.detail .project-bottom-place,
.detail .project-bottom-date,
.detail .project-bottom-category { font-size: 15px; line-height: 1.48; }
@media (min-width:601px) { .detail .project-bottom--no-description .project-bottom-meta { grid-column:2; } }
.detail .next-project { padding-top: 90px; }
@media (max-width: 800px) {
  .detail .project-bottom { gap: 6vw; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
  .detail .project-bottom-meta h1 { font-size: clamp(21px, 3.2vw, 32px); }
}
@media (max-width: 600px) {
  .detail .project-bottom { grid-template-columns: 1fr; gap: 72px; margin-top: 110px; }
  .detail .project-bottom .description { font-size: clamp(23px, 5.2vw, 30px); }
  .detail .project-bottom-meta { justify-self: end; max-width: 85%; }
  .detail .project-bottom-meta h1 { font-size: clamp(23px, 5.2vw, 30px); }
  .detail .next-project { padding-top: 70px; }
}

/* October 2026 refinement — project text matches the small location/date metadata. */
.detail .project-bottom .description {
  font-size: 15px;
  line-height: 1.48;
  letter-spacing: normal;
  font-weight: 400;
}
@media (max-width:600px) {
  .detail .project-bottom .description { font-size:15px; line-height:1.48; letter-spacing:normal; }
}
/* INFO follows fala's reduced editorial hierarchy: intro, 3 anchors, 3 sections. */
.info-page.info-editorial {
  max-width: none;
  padding: 6vh 3.8vw 140px;
  font-size: 15px;
  line-height: 1.48;
  letter-spacing: normal;
}
.info-editorial .tiny { margin-bottom: 60px; }
.info-editorial .info-opening {
  max-width: 850px;
  margin: 0 0 clamp(65px, 9vw, 130px);
  font-size: clamp(23px,3.2vw,44px);
  line-height: 1.25;
  letter-spacing: -.04em;
}
.info-editorial .info-sections {
  display: flex;
  align-items:center;
  gap: clamp(22px,3vw,55px);
  margin-bottom: clamp(62px,7.5vw,110px);
  font-size: 15px;
}
.info-editorial .info-sections button {
  appearance: none;
  border:0;
  padding:0 0 3px;
  background:none;
  font-size:inherit;
  line-height:inherit;
  cursor:pointer;
  border-bottom:1px solid transparent;
}
.info-editorial .info-sections button:hover,
.info-editorial .info-sections button:focus-visible {
  border-bottom-color:currentColor;
}
.info-editorial .info-entry {
  display:grid;
  grid-template-columns: minmax(160px, 24%) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 95px);
  align-items:start;
  padding: 0 0 clamp(100px,12vw,190px);
  scroll-margin-top: 40px;
}
.info-editorial .info-entry h2 {
  margin:0;
  font-size:15px;
  line-height:1.48;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}
.info-editorial .info-copy { max-width: 780px; }
.info-editorial .info-copy p { margin:0 0 20px; }
.info-editorial .info-index {
  max-width: 750px;
  line-height: 2.1;
  word-spacing: .16em;
}
.info-editorial .info-index a {
  text-decoration:none;
  display:inline-block;
  padding:0 1px;
}
.info-editorial .info-index a:hover,
.info-editorial .info-index a:focus-visible { text-decoration:underline; text-underline-offset:3px; }
.info-editorial .info-index-comma { white-space:pre; }
.info-editorial .info-copy a { text-underline-offset:3px; }
@media (max-width:700px) {
  .info-page.info-editorial { padding: 30px 4vw 100px; }
  .info-editorial .info-entry { grid-template-columns: 1fr; gap: 23px; padding-bottom:95px; }
  .info-editorial .info-sections { flex-wrap:wrap; gap: 26px; }
  .info-editorial .info-opening { margin-bottom:65px; }
  .info-editorial .tiny { margin-bottom:45px; }
}

/* Legal footer uses the original Zürich caption typography and alignment. */
.footer { align-items: baseline; gap:20px; }
.footer-legal { display:flex; align-items:baseline; justify-content:flex-end; gap:clamp(15px,2.6vw,36px); flex-wrap:wrap; text-align:right; }
.footer-legal a { color:inherit; font:inherit; text-decoration:none; }
.footer-legal a:hover, .footer-legal a:focus-visible { text-decoration:underline; text-underline-offset:3px; }
/* Legal content matches the INFO editorial typography and left-right section structure. */
.legal-page .legal-kicker { font-size:13px; letter-spacing:0; margin:0 0 48px; }
.legal-page h1 { max-width:900px; margin:0 0 clamp(70px,9vw,128px); font-size:clamp(23px,3.2vw,44px); letter-spacing:-.04em; font-weight:400; line-height:1.25; }
.legal-page .legal-entry { padding-bottom:clamp(55px,6vw,95px); }
.legal-page .info-copy { overflow-wrap:anywhere; }
.legal-page .info-copy p { margin:0 0 18px; }
.legal-page .info-copy a { text-decoration:underline; text-underline-offset:3px; }
.legal-page .legal-note { max-width:700px; color:#666; font-size:12px; line-height:1.55; padding-top:30px; border-top:1px solid #e5e5e5; }
.legal-page .placeholder { color:#777; }
@media(max-width:600px) { .footer-legal { gap:14px; } .legal-page .legal-kicker { margin-bottom:36px; } }

/* ALO / INFO: compact editorial CV rows with clear year/organisation alignment. */
.info-editorial .info-opening p { margin: 0 0 1em; }
.info-editorial .info-opening p:last-child { margin-bottom: 0; }
.info-editorial .cv-list { display:grid; grid-template-columns:minmax(105px,26%) minmax(0,1fr); column-gap:20px; row-gap:22px; }
.info-editorial .cv-year, .info-editorial .cv-description { font-size:15px; line-height:1.48; font-weight:400; }
.info-editorial .cv-organisation, .info-editorial .cv-role { display:block; }
.info-editorial .cv-role { color:#777; }
@media(max-width:440px) {
 .info-editorial .cv-list { grid-template-columns: minmax(90px,30%) minmax(0,1fr); column-gap:12px; row-gap:20px; }
 .info-editorial .cv-year,.info-editorial .cv-description { font-size:13px; }
}

/* INFO / connect: same understated typography and grid as experience, education and index. */
.info-editorial .info-social { display:flex; flex-wrap:wrap; align-items:baseline; gap:clamp(25px,3vw,48px); font-size:15px; line-height:1.48; }
.info-editorial .info-social a { color:inherit; text-decoration:none; }
.info-editorial .info-social a:hover, .info-editorial .info-social a:focus-visible { text-decoration:underline; text-underline-offset:3px; }
.info-editorial .info-social .social-pending { color:#777; }
@media(max-width:440px){ .info-editorial .info-social { font-size:13px; } }

/* ALO personal portfolio and verifiable project collaboration credits. */
.info-editorial .info-opening .portfolio-notice {
 font-size:15px;line-height:1.5;letter-spacing:0;
 max-width:650px;margin-top:clamp(32px,4.5vw,58px);
}
.detail .project-bottom-meta .project-credits {
 margin-top:clamp(28px,3vw,44px);font-size:15px;line-height:1.48;
 letter-spacing:0;text-align:right;
}
.detail .project-credit-line + .project-credit-line { margin-top:22px; }
.detail .project-credit-label { font-size:12px;line-height:1.5;color:#777;margin-bottom:4px; }
.detail .project-credit-value { font-size:15px;line-height:1.48;overflow-wrap:anywhere; }
.detail .credit-pending { color:#888; }
@media(max-width:600px){
 .detail .project-bottom-meta .project-credits { margin-top:32px; }
 .detail .project-credit-label { font-size:12px; }
}

/* ALO / INFO — understated wine-red clarification of non-commercial portfolio status. */
.info-editorial .info-opening .portfolio-notice { color:#FF2C2C; }


/* ALO portfolio identity — burgundy #FF2C2C */
:root { --alo-accent:#FF2C2C; }
.info-editorial .info-opening .portfolio-notice { color:var(--alo-accent); }
/* The original animated ALO stays untouched. The subtitle appears only on the homepage. */
.identity {position:relative;}
.home-tagline {
 display:none; position:absolute; top:82px; left:1vw;
 white-space:nowrap; font-size:11px; font-weight:400;
 line-height:1.25; letter-spacing:0; color:var(--alo-accent);
 opacity:1; transform:translateY(0);
 transition:opacity .45s ease, transform .45s ease;
 pointer-events:none;
}
.is-home .home-tagline, .alo-homepage .home-tagline { display:block; }
.intro-active .home-tagline { opacity:0; transform:translateY(4px); }
.is-home .topbar, .alo-homepage .topbar { height:132px; }
/* Links are red on hover, click, and keyboard focus, including project numbers,
   footer legal links and the social links; non-interactive text is unchanged. */
:where(a,button):is(:hover,:active,:focus,:focus-visible) {color:var(--alo-accent);}
.info-editorial .info-social a:is(:hover,:active,:focus,:focus-visible),
.footer-legal a:is(:hover,:active,:focus,:focus-visible),
.info-editorial .info-index a:is(:hover,:active,:focus,:focus-visible) {color:var(--alo-accent);}
.project-card:is(:hover,:active,:focus,:focus-visible) .project-num,
.project-card:is(:hover,:active,:focus,:focus-visible) .project-label {color:var(--alo-accent);}
/* Accessible keyboard focus cue, consistent with the selected accent. */
a:focus-visible,button:focus-visible {outline-color:var(--alo-accent);}
@media(max-width:800px){.is-home .topbar, .alo-homepage .topbar{height:126px;}}
@media(max-width:440px){
 .is-home .topbar, .alo-homepage .topbar {height:121px;}
 .home-tagline {top:70px; left:1vw; font-size:10px;}
}
@media(prefers-reduced-motion:reduce) { .home-tagline { transition:none; } }


/* Keep Gutenberg paragraph margins flush with the original project caption. */
.detail .project-bottom .description > p:first-child { margin-top:0; }
.detail .project-bottom .description > p:last-child { margin-bottom:0; }
/* Extra menu pages may wrap on small screens; the initial one-item menu stays unchanged. */
.nav { flex-wrap:wrap; justify-content:flex-end; }


/* ALO 2.7: selected project phases and linked practice names only. */
.detail .project-credit-value .alo-selected-phases { margin-top: 10px; }
.detail .project-credit-value .alo-phase-entry + .alo-phase-entry { margin-top: 7px; }
.detail .project-credit-value .alo-practice-entry + .alo-practice-entry { margin-top: 7px; }
.detail .project-credit-value a { color: inherit; text-decoration: none; }
.detail .project-credit-value a:is(:hover,:focus-visible,:active) { color: var(--alo-accent, #FF2C2C); text-decoration: underline; text-underline-offset: 3px; }


/* ALO 2.8 – separate project list; all pre-existing pages and styles are unchanged. */
.alo-projects-overview{padding:clamp(24px,5.5vw,76px) 3.8vw clamp(100px,12vw,180px);min-height:68vh}
.alo-overview-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(46px,6vw,90px)}
.alo-overview-heading h1{font-weight:400;font-size:clamp(23px,3.2vw,44px);letter-spacing:-.04em;line-height:1.2;margin:0}
.alo-overview-count{font-size:12px;color:#777}
.alo-overview-filter{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-bottom:14px;font-size:12px}
.alo-overview-filter label{color:#777}
.alo-overview-filter select{font:inherit;color:#111;background:#fff;max-width:min(65vw,260px);min-width:145px;padding:7px 25px 7px 9px;border:1px solid #d3d3d3;border-radius:0}
.alo-overview-head,.alo-overview-row{display:grid;grid-template-columns:minmax(55px,8%) minmax(0,40%) minmax(0,27%) minmax(120px,25%);gap:12px;align-items:start}
.alo-overview-head{padding:10px 5px 15px;border-bottom:1px solid #111;font-size:12px;color:#777}
.alo-overview-row{padding:20px 5px 21px;border-bottom:1px solid #ddd;font-size:clamp(14px,1.45vw,20px);line-height:1.4;text-decoration:none!important;transition:color .15s ease}
.alo-overview-row:hover,.alo-overview-row:focus-visible{color:#FF2C2C}
.alo-overview-num{font-size:.85em;padding-top:.13em}
.alo-overview-name{font-weight:400;letter-spacing:-.025em;overflow-wrap:anywhere}
.alo-overview-category{font-size:.76em;padding-top:.2em;color:#777;overflow-wrap:break-word}
.alo-overview-year{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 13px;justify-content:flex-start;font-size:.76em;padding-top:.2em}
.alo-realised-label{color:#FF2C2C;white-space:nowrap;font-weight:400}
.alo-overview-empty{font-size:14px;color:#777;padding:28px 5px}
.alo-overview-hover{position:fixed;top:0;left:0;width:min(31vw,400px);aspect-ratio:4/3;max-height:330px;opacity:0;visibility:hidden;pointer-events:none;z-index:19;transition:opacity .16s linear;background:transparent}
.alo-overview-hover.is-visible{opacity:1;visibility:visible}
.alo-overview-hover img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.08))}
@media (max-width:700px){
 .alo-projects-overview{padding:25px 4vw 105px}
 .alo-overview-head,.alo-overview-row{grid-template-columns:48px minmax(0,1.45fr) minmax(0,1fr);gap:8px}
 .alo-overview-head span:last-child{display:none}
 .alo-overview-year{grid-column:2/4;font-size:12px;gap:10px;padding-top:0}
 .alo-overview-head{font-size:11px}
 .alo-overview-row{padding:16px 0 18px;font-size:15px}
 .alo-overview-hover{display:none!important}
}
@media (hover:none){.alo-overview-hover{display:none!important}}
@media (prefers-reduced-motion:reduce){.alo-overview-hover,.alo-overview-row{transition:none}}