/*
Theme Name: AlexiaSi Projects Strip v25
Theme URI: https://alexiasi.com
Author: AlexiaSi
Description: Minimal custom portfolio theme for AlexiaSi.
Version: 1.25
Text Domain: alexiasi
*/

*{box-sizing:border-box}

:root{
  --ink:#171717;
  --page-x:24px;
  --gap:12px;
  --ui-font:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ui-size:17px;
  --tracking:.18em;
}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--ui-font);
  font-weight:300;
}

img{display:block;max-width:100%}

a{color:inherit}

/* ================= HOME ================= */

.hero{
  position:relative;
  width:100%;
  height:100vh;
  min-height:640px;
  overflow:hidden;
  background:#fff;
}

.hero__photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.hero__logo{
  position:absolute;
  z-index:3;
  top:.8%;
  left:2.3%;
  width:clamp(145px,14vw,245px);
}

.hero__logo img{
  width:100%;
  height:auto;
}

.hero__nav,
.few-nav{
  display:flex;
  gap:clamp(24px,2.7vw,48px);
}

.hero__nav{
  position:absolute;
  z-index:3;
  top:4.7%;
  right:3%;
}

.hero__nav a,
.few-nav a,
.project-card span,
.hero__caption{
  font-family:var(--ui-font);
  font-size:var(--ui-size);
  font-style:normal;
  font-weight:300;
  line-height:1.15;
  letter-spacing:var(--tracking);
  text-transform:uppercase;
}

.hero__nav a,
.few-nav a{
  text-decoration:none;
  white-space:nowrap;
  transition:opacity .2s ease;
}

.hero__nav a:not(.is-current),
.few-nav a:not(.is-current){opacity:.52}

.hero__nav a:hover,
.few-nav a:hover{opacity:.78}

.hero__nav a.is-current,
.few-nav a.is-current{opacity:1}

.hero__caption{
  position:absolute;
  z-index:3;
  left:2.9%;
  bottom:7.4%;
  color:var(--ink);
}

.hero__caption span{display:block}
.hero__caption span + span{margin-top:10px}

/* ================= PROJECTS ================= */

.projects-preview{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--gap);
  padding:28px var(--page-x) 52px;
}

.project-card{
  color:inherit;
  text-decoration:none;
  min-width:0;
}

.project-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}

.project-card span{
  display:block;
  margin-top:11px;
}

.site-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px var(--page-x) 22px;
  border-top:1px solid rgba(0,0,0,.10);
  font-size:10px;
  font-weight:300;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.site-footer__links{display:flex;gap:20px}
.site-footer a{text-decoration:none}

/* ================= A FEW THINGS / NOTES ================= */

.few-page{
  min-height:100vh;
  background:#fff;
  color:var(--ink);
}

.few-header{
  min-height:118px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:12px 2.7% 0;
}

.few-logo{
  width:clamp(145px,14vw,245px);
  display:block;
}

.few-logo img{
  width:100%;
  height:auto;
}

.few-nav{padding-top:34px}

.few-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,41%);
  gap:6vw;
  padding:36px 4% 70px;
  align-items:start;
}

.few-copy h1,
.notes-placeholder h1{
  margin:0 0 64px;
  font-family:var(--ui-font);
  font-size:clamp(40px,4vw,64px);
  font-weight:300;
  line-height:1;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.few-body{max-width:720px}

.few-body p{
  margin:0 0 25px;
  font-family:var(--ui-font);
  font-size:15px;
  line-height:1.62;
  font-weight:300;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.few-photo{
  margin:0;
  width:100%;
}

.few-photo img{
  display:block;
  width:100%;
  height:auto;
}

.few-contact{
  margin:0 4%;
  padding:42px 0 52px;
  border-top:1px solid rgba(0,0,0,.12);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,34%);
  gap:7vw;
}

.few-contact h2{
  margin:0 0 34px;
  font-size:var(--ui-size);
  font-weight:300;
  letter-spacing:var(--tracking);
  text-transform:uppercase;
}

.contact-form{max-width:760px}

.contact-form label{
  display:grid;
  grid-template-columns:145px 1fr;
  gap:24px;
  align-items:start;
  margin-bottom:27px;
}

.contact-form label span,
.contact-label{
  padding-top:10px;
  font-size:13px;
  font-weight:300;
  letter-spacing:var(--tracking);
  text-transform:uppercase;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  border:0;
  border-bottom:1px solid #8f8f8f;
  border-radius:0;
  outline:none;
  background:transparent;
  padding:8px 0 10px;
  color:var(--ink);
  font:300 15px/1.5 var(--ui-font);
}

.contact-form textarea{
  border:1px solid #8f8f8f;
  min-height:130px;
  resize:vertical;
  padding:12px;
}

.contact-form button{
  margin-left:169px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  padding:13px 30px;
  font:300 13px/1 var(--ui-font);
  text-transform:uppercase;
  letter-spacing:var(--tracking);
  cursor:pointer;
}

.contact-form button:hover{
  background:var(--ink);
  color:#fff;
}

.few-contact__right{padding-top:55px}

.few-contact__right a{
  display:block;
  margin-top:18px;
  color:var(--ink);
  text-decoration:none;
  font-size:var(--ui-size);
  font-weight:300;
  letter-spacing:var(--tracking);
  text-transform:uppercase;
}

.form-status{
  margin:0 0 28px;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.few-footer{
  margin:0 4%;
  padding:18px 0 24px;
  border-top:1px solid rgba(0,0,0,.10);
  font-size:10px;
  font-weight:300;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.notes-placeholder{
  min-height:70vh;
  padding:50px 4%;
}

.notes-placeholder p{
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){
  :root{
    --page-x:18px;
    --gap:10px;
    --ui-size:14px;
  }

  .projects-preview{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .few-intro{
    grid-template-columns:1fr;
  }

  .few-photo{max-width:720px}

  .few-contact{
    grid-template-columns:1fr;
  }

  .few-contact__right{padding-top:0}
}

@media(max-width:560px){
  :root{
    --page-x:12px;
    --ui-size:9px;
    --tracking:.14em;
  }

  .hero{
    height:100svh;
    min-height:560px;
  }

  .hero__logo{
    top:2%;
    left:3%;
    width:95px;
  }

  .hero__nav{
    top:4%;
    right:3%;
    gap:11px;
  }

  .hero__caption{
    left:3%;
    bottom:6%;
  }

  .hero__caption span + span{margin-top:6px}

  .projects-preview{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding-top:16px;
  }

  .few-header{
    min-height:100px;
    padding-inline:3%;
  }

  .few-logo{width:95px}

  .few-nav{
    gap:11px;
    padding-top:20px;
  }

  .few-intro{
    padding:24px 3% 48px;
    gap:28px;
  }

  .few-copy h1{
    margin-bottom:36px;
    font-size:28px;
  }

  .few-body p{
    font-size:11px;
    letter-spacing:.08em;
  }

  .few-contact{
    margin-inline:3%;
    padding-top:30px;
  }

  .contact-form label{
    grid-template-columns:1fr;
    gap:4px;
  }

  .contact-form label span{padding-top:0}

  .contact-form button{margin-left:0}

  .few-footer{margin-inline:3%}
}


/* ================= INDIVIDUAL PROJECTS ================= */

.project-page{
  min-height:100vh;
  background:#fff;
  color:var(--ink);
}

.project-gallery{
  position:relative;
  height:100svh;
  min-height:620px;
  overflow:hidden;
  background:#111;
}

.project-gallery--gradient::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0 0 auto 0;
  height:130px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.24),rgba(0,0,0,0));
}

.project-logo,
.project-nav{
  position:absolute;
  z-index:4;
  color:#fff;
}

.project-logo{
  top:12px;
  left:2.3%;
  width:clamp(145px,14vw,245px);
}

.project-logo img{
  width:100%;
  height:auto;
  filter:brightness(0) invert(1);
}

.project-nav{
  top:4.7%;
  right:3%;
  display:flex;
  gap:clamp(24px,2.7vw,48px);
}

.project-nav a{
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  font-family:var(--ui-font);
  font-size:var(--ui-size);
  font-weight:300;
  line-height:1.15;
  letter-spacing:var(--tracking);
  text-transform:uppercase;
  transition:opacity .2s ease;
}

.project-nav a:not(.is-current){opacity:.62}
.project-nav a:hover{opacity:.82}
.project-nav a.is-current{opacity:1}

.project-strip{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  cursor:grab;
  user-select:none;
  -webkit-overflow-scrolling:touch;
}

.project-strip::-webkit-scrollbar{display:none}
.project-strip.is-dragging{cursor:grabbing}

.project-media{
  flex:0 0 clamp(330px,33.333vw,640px);
  width:clamp(330px,33.333vw,640px);
  height:100%;
  margin:0;
  overflow:hidden;
  background:#111;
}

.project-media + .project-media{
  border-left:3px solid #fff;
}

.project-media img,
.project-media video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.project-media video{
  background:#000;
}

.project-info{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:8vw;
  padding:56px 3.2% 82px;
  background:#fff;
}

.project-info h1{
  margin:0 0 34px;
  font-family:var(--ui-font);
  font-size:34px;
  font-weight:300;
  letter-spacing:.20em;
  line-height:1.1;
  text-transform:uppercase;
}

.project-meta,
.project-tech,
.project-info__right p,
.project-next{
  font-family:var(--ui-font);
  font-weight:300;
  text-transform:uppercase;
}

.project-meta{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.45;
  letter-spacing:.16em;
}

.project-tech{
  max-width:650px;
  margin:28px 0 0;
  font-size:15px;
  line-height:1.55;
  letter-spacing:.12em;
}

.project-info__right p{
  max-width:720px;
  margin:4px 0 46px;
  font-size:15px;
  line-height:1.62;
  letter-spacing:.10em;
}

.project-next{
  display:inline-block;
  color:var(--ink);
  text-decoration:none;
  font-size:14px;
  letter-spacing:.16em;
}

@media(max-width:700px){
  .project-gallery{
    height:82svh;
    min-height:520px;
  }

  .project-logo{
    top:10px;
    left:3%;
    width:94px;
  }

  .project-nav{
    top:24px;
    right:3%;
    gap:11px;
  }

  .project-nav a{
    font-size:9px;
    letter-spacing:.13em;
  }

  .project-media{
    flex-basis:84vw;
    width:84vw;
  }

  .project-info{
    grid-template-columns:1fr;
    gap:38px;
    padding:36px 4% 56px;
  }

  .project-info h1{
    font-size:25px;
    margin-bottom:28px;
  }

  .project-meta,
  .project-tech,
  .project-info__right p,
  .project-next{
    font-size:11px;
  }
}


/* v10: robust horizontal gallery controls */
.project-gallery-controls{
  position:absolute;
  z-index:5;
  right:2.7%;
  bottom:24px;
  display:flex;
  gap:16px;
}

.project-gallery-controls button{
  appearance:none;
  border:0;
  background:transparent;
  padding:4px 2px;
  color:#fff;
  font:300 24px/1 var(--ui-font);
  cursor:pointer;
  text-shadow:0 1px 10px rgba(0,0,0,.28);
  transition:opacity .2s ease;
}

.project-gallery-controls button:hover{opacity:.72}
.project-gallery-controls button:disabled{
  opacity:.28;
  cursor:default;
}

@media(max-width:700px){
  .project-gallery-controls{
    right:4%;
    bottom:18px;
  }
}

.project-face .project-media--face-wide{flex-basis:38vw;width:38vw}
.project-face .project-media--face-narrow{flex-basis:28vw;width:28vw}
.project-face .project-media--face-process{flex-basis:34vw;width:34vw}
@media(max-width:700px){
  .project-face .project-media--face-wide,
  .project-face .project-media--face-narrow,
  .project-face .project-media--face-process{flex-basis:84vw;width:84vw}
}


/* v13 — independent editorial Projects page */
.projects-page{
  min-height:100vh;
  background:#fff;
  color:#111;
  padding:30px 3.2vw 34px;
}
.projects-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
  margin-bottom:54px;
}
.projects-logo{display:block;width:134px;line-height:0}
.projects-logo img{display:block;width:100%;height:auto}
.projects-nav{
  display:flex;
  align-items:center;
  gap:35px;
  padding-top:14px;
  white-space:nowrap;
}
.projects-nav a,
.projects-item__title{
  font-family:Inter,Arial,sans-serif;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.20em;
  color:#111;
  text-decoration:none;
}
.projects-nav a{font-size:11px;opacity:.5;transition:opacity .2s ease}
.projects-nav a:hover{opacity:.8}
.projects-nav a.is-current{opacity:1}
.projects-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:22px;
  row-gap:46px;
  align-items:start;
}
.projects-item{display:block;color:#111;text-decoration:none;min-width:0}
.projects-item img{display:block;width:100%;height:auto;object-fit:contain;background:#f7f7f7}
.projects-item__title{display:block;margin-top:10px;font-size:10px;line-height:1.2}

/* Row 1: three vertical works, all top-aligned. Dress deliberately starts on same baseline. */
.projects-item--bag{grid-column:1 / span 4}
.projects-item--dress{grid-column:5 / span 4}
.projects-item--brushes{grid-column:9 / span 4}

/* Row 2: horizontal Fragments + vertical Face */
.projects-item--fragments{grid-column:1 / span 8}
.projects-item--face{grid-column:9 / span 4}

/* Row 3: Medusa as a single wide horizontal image */
.projects-item--medusa{grid-column:1 / -1}

.projects-footer{
  margin-top:58px;
  border-top:1px solid rgba(17,17,17,.12);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  font:300 9px/1.2 Inter,Arial,sans-serif;
  letter-spacing:.20em;
  text-transform:uppercase;
}
.projects-footer a{color:#111;text-decoration:none}
.projects-footer__links{display:flex;gap:28px}

@media (max-width: 820px){
  .projects-page{padding:20px 18px 28px}
  .projects-header{margin-bottom:34px}
  .projects-logo{width:112px}
  .projects-nav{gap:16px;padding-top:10px}
  .projects-nav a{font-size:9px;letter-spacing:.14em}
  .projects-grid{grid-template-columns:1fr;row-gap:32px}
  .projects-item--bag,
  .projects-item--dress,
  .projects-item--brushes,
  .projects-item--fragments,
  .projects-item--face,
  .projects-item--medusa{grid-column:1}
  .projects-footer{margin-top:44px}
}

/* ================= PROJECTS — EDITORIAL V14 ================= */
.projects-page--editorial{
  padding:0 0 34px;
  overflow:hidden;
}

.projects-standard-header{
  margin-bottom:26px;
}

.projects-editorial{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:3vw;
  row-gap:4.8vw;
  align-items:start;
  padding:0 3.2vw;
}

.pe-item{
  display:block;
  min-width:0;
  color:var(--ink);
  text-decoration:none;
}

.pe-item > img,
.pe-brushes-crop > img{
  display:block;
  width:100%;
  height:auto;
}

.pe-item > span:last-child{
  display:block;
  margin-top:10px;
  font-family:var(--ui-font);
  font-size:10px;
  font-style:normal;
  font-weight:300;
  line-height:1.2;
  letter-spacing:.20em;
  text-transform:uppercase;
}

/* Opening spread: large bag left, dress and face stacked on the right. */
.pe-bag{grid-column:1 / span 7}
.pe-dress{grid-column:8 / span 4}
.pe-face{grid-column:9 / span 4; margin-top:-1.5vw}

/* Fragments runs edge-to-edge, as in the selected editorial preview. */
.pe-fragments{
  grid-column:1 / -1;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-top:.4vw;
}
.pe-fragments > span:last-child{margin-left:3.2vw}
.pe-fragments img{width:100%;height:auto}

/* Closing spread: cropped Brushes left, Medusa horizontal right. */
.pe-brushes{grid-column:1 / span 5}
.pe-medusa{grid-column:7 / span 6}

.pe-brushes-crop{
  display:block;
  width:100%;
  aspect-ratio:.78 / 1;
  overflow:hidden;
  background:#f7f7f7;
}

/* Same original photo, only cropped in the browser — no retouching. */
.pe-brushes-crop img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:18% 50%;
}

.projects-footer--editorial{
  margin:64px 3.2vw 0;
}

@media (max-width:820px){
  .projects-standard-header{margin-bottom:26px}
  .projects-editorial{
    grid-template-columns:1fr;
    row-gap:34px;
    padding:0 18px;
  }
  .pe-bag,.pe-dress,.pe-face,.pe-fragments,.pe-brushes,.pe-medusa{
    grid-column:1;
    width:auto;
    margin:0;
  }
  .pe-fragments{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }
  .pe-fragments > span:last-child{margin-left:18px}
  .pe-brushes-crop{aspect-ratio:.82 / 1}
  .projects-footer--editorial{margin:44px 18px 0}
}

/* ================= PROJECTS — ALIGNED STRIP V17 ================= */
.projects-page--strip{
  padding:0 0 28px;
  background:#fff;
  min-height:auto;
}


.projects-page--strip .projects-standard-header{
  margin-bottom:4.6vw;
}

.projects-strip{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:4px;
  width:100%;
  align-items:start;
}

.projects-strip__item{
  display:block;
  min-width:0;
  color:var(--ink);
  text-decoration:none;
}

.projects-strip__media{
  display:block;
  width:100%;
  height:58vw;
  max-height:650px;
  overflow:hidden;
  background:#f7f7f7;
}

.projects-strip__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Framing only: the source photographs themselves are unchanged. */
.projects-strip__media--bag img{object-position:50% 50%;}
.projects-strip__media--dress img{object-position:50% 50%;}
.projects-strip__media--brushes img{object-position:50% 44%;}
.projects-strip__media--face img{object-position:50% 50%;}
.projects-strip__media--fragments img{object-position:50% 50%;}
.projects-strip__media--medusa img{object-position:50% 52%;}

.projects-strip__title{
  display:block;
  padding:12px 10px 0;
  font-family:var(--ui-font);
  font-size:var(--ui-size);
  font-style:normal;
  font-weight:300;
  line-height:1.15;
  letter-spacing:var(--tracking);
  text-transform:uppercase;
  color:var(--ink);
}

.projects-footer--strip{
  margin:38px 2.8vw 0;
}

@media(max-width:820px){
  .projects-page--strip .few-logo{width:118px;}
  .projects-page--strip .projects-standard-header{margin-bottom:30px;}
  .projects-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .projects-strip__media{height:74vw;max-height:none;}
  .projects-strip__title{padding:9px 8px 24px;font-size:12px;letter-spacing:var(--tracking);}
  .projects-footer--strip{margin:28px 18px 0;}
}


/* ================= HOME v19 HQ =================
   Home-only refinements. Interior pages are unchanged.
   The hero photograph is the user's original image, cropped/resized
   non-generatively and stored as a high-quality WebP.
*/
.hero__photo{
  object-position:center center;
}

.hero__logo{
  top:2.4%;
  left:2.7%;
  width:clamp(150px,13vw,220px);
}

.hero__logo img{
  filter:brightness(0) invert(1);
}

.hero__nav{
  top:4.7%;
  right:3%;
  color:#fff;
}

.hero__nav a:not(.is-current){
  opacity:1;
}

.hero__nav a:hover{
  opacity:.78;
}

.hero__caption{
  left:4.7%;
  top:55%;
  bottom:auto;
  color:var(--ink);
  font-size:clamp(42px,4.55vw,76px);
  line-height:1.04;
  letter-spacing:0;
  text-transform:none;
}

.hero__caption span + span{
  margin-top:20px;
}

@media(max-width:560px){
  .hero__logo{
    top:2.2%;
    left:3%;
    width:105px;
  }

  .hero__nav{
    top:4%;
    right:3%;
    gap:11px;
  }

  .hero__caption{
    left:4%;
    top:57%;
    bottom:auto;
    font-size:clamp(27px,8vw,38px);
    line-height:1.06;
  }

  .hero__caption span + span{
    margin-top:8px;
  }
}






/* v24: exact two-tone word. T stays black, only h transitions, and ings. stays fully white. */
.hero__caption .hero__caption-things{
  display:inline-block;
}
.hero__caption .things-t{
  display:inline;
  color:var(--ink);
}
.hero__caption .things-h{
  display:inline;
  color:transparent;
  background-image:linear-gradient(90deg, var(--ink) 0 44%, #ffffff 44% 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.hero__caption .things-white{
  display:inline;
  color:#ffffff;
}


/* ================= PROJECTS v25 =================
   Approved change: bring the project image strip up to the header.
*/
.projects-page--strip .projects-standard-header{
  margin-bottom:0;
}

@media(max-width:820px){
  .projects-page--strip .projects-standard-header{
    margin-bottom:0;
  }
}