/* =====================================================================
   Sandra Öster — shared portfolio styles
   ===================================================================== */

:root{
  --ink:#000;
  --paper:#fff;
  --muted:#666;
  --gutter: clamp(24px, 12.4vw, 214px);
  --content-max: 1300px;
  --hero-size: clamp(40px, 4.5vw, 68px);
  --body-size: clamp(18px, 1.8vw, 28px);
  --label-size: clamp(15px, 1.55vw, 24px);
  --meta-size: clamp(13px, 1.05vw, 16px);
  --nav-size: clamp(14px, 1.05vw, 16px);
  /* Optima isn't a web font. Use system Optima where present, fall back to
     a humanist sans (Optima is a humanist sans, not a serif). */
  --serif: Optima, Candara, "Source Sans 3", "URW Classico", "Lucida Sans", sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#fff;color:#000;font-family:var(--sans);-webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;}
body{font-size:16px;line-height:1.5;}
img{display:block;max-width:100%;}

/* layout primitives ---------------------------------------------------- */
.section{padding-inline:var(--gutter); background:var(--paper);}
.inner{max-width:var(--content-max); margin-inline:auto; width:100%;}

/* navigation ----------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
.nav{padding-block:24px; display:flex; justify-content:space-between; align-items:center; transition: padding .25s ease;}
.nav__brand{font-weight:500; font-size:var(--nav-size); color:#000; text-decoration:none;}
.nav__brand:hover{text-decoration:underline; text-underline-offset:4px;}
.nav__links{display:flex; gap:32px;}
.nav__links a{font-weight:500; font-size:var(--nav-size); color:#000; text-decoration:none;}
.nav__links a:hover{text-decoration:underline; text-underline-offset:4px;}
.nav__toggle{
  display:none;
  position:relative;
  width:24px; height:14px;
  padding:0; margin:0; border:0; background:none;
  cursor:pointer;
}
.nav__toggle span{
  position:absolute; left:0; right:0;
  height:1.5px; background:#000;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav__toggle span:nth-child(1){top:0;}
.nav__toggle span:nth-child(2){bottom:0;}
.site-header.is-open .nav__toggle span:nth-child(1){transform:translateY(6.25px) rotate(45deg);}
.site-header.is-open .nav__toggle span:nth-child(2){transform:translateY(-6.25px) rotate(-45deg);}

/* in-copy anchor links (e.g. Solution -> Search by Shazam section) */
.body-right__text a, .img-text__copy p a{color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.body-right__text a:hover, .img-text__copy p a:hover{opacity:.6;}
[id]{scroll-margin-top:110px;}

/* hero (home) ---------------------------------------------------------- */
.hero{padding-block:80px;}
.hero__text{
  font-family:var(--serif);
  font-size:var(--hero-size);
  line-height:1.05;
  letter-spacing:-0.005em;
  max-width:14em;
  margin:0;
  font-weight:400;
}

/* project hero (subtitle + title) ------------------------------------- */
.project-hero{padding-block:80px;}
.project-hero__inner{display:flex; flex-direction:column; gap:0;}
.project-hero__title{
  font-family:var(--serif);
  font-size:var(--hero-size);
  line-height:1.05;
  letter-spacing:-0.005em;
  max-width:14em;
  margin:0;
  font-weight:400;
  color:#000;
}

/* projects grid (selected work) --------------------------------------- */
.grid{padding-block:65px;}
.grid__head{display:flex; gap:8px; font-size:var(--label-size); margin-bottom:28px; flex-wrap:wrap;}
.grid__head strong{font-weight:500;}
.grid__head span{font-weight:400;}
.grid__items{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
}
.project{display:flex; flex-direction:column; color:#000; text-decoration:none; cursor:none;}
.project__img{
  position:relative;
  aspect-ratio: 636 / 704;
  background:#f2f2f2;
  overflow:hidden;
}
.project__img img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.project__img::after{
  /* legibility gradient — black at bottom, transparent at ~42% from top */
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 18%, rgba(0,0,0,0) 50%);
  pointer-events:none;
  z-index:1;
}
.project__img::before{
  /* hover dim layer */
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0);
  transition: background-color .7s ease;
  pointer-events:none;
  z-index:2;
}
.project:hover .project__img::before,
.project:focus-visible .project__img::before{ background: rgba(0,0,0,.5); }
.project:hover .project__img img,
.project:focus-visible .project__img img{ transform: scale(1.03); }

.project__overlay{
  position:absolute;
  left:32px;
  right:32px;
  bottom:40px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:#fff;
  pointer-events:none;
  transition: bottom .7s cubic-bezier(.2,.7,.2,1);
}
.project:hover .project__overlay,
.project:focus-visible .project__overlay{
  bottom:48px;
}
/* coming-soon cards: non-navigating, reveal a centered label on hover/focus/tap */
.project--soon{cursor:default;}
.project__soon{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%) translateY(8px);
  z-index:4;
  font-family:var(--sans);
  font-weight:500;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  padding:14px 22px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.project--soon:hover .project__soon,
.project--soon:focus-visible .project__soon,
.project--soon.is-revealed .project__soon{
  opacity:1;
  transform: translate(-50%, -50%) translateY(0);
}
/* dim the backdrop on coming-soon cards just like the link cards */
.project--soon:hover .project__img::before,
.project--soon:focus-visible .project__img::before,
.project--soon.is-revealed .project__img::before{ background: rgba(0,0,0,.5); }
.project__title{
  font-family:var(--sans);
  font-weight:500;
  font-size: clamp(15px, 1.25vw, 24px);
  line-height:1;
  margin:0;
  color:#fff;
}
.project__meta{
  font-family:var(--sans);
  font-weight:500;
  font-size: clamp(13px, 0.85vw, 16px);
  line-height:1;
  margin:0;
  color:#fff;
  opacity:0.5;
}
.project__meta span{opacity:.85;}
@media (hover: none){
  .project:hover .project__img::before{ background: rgba(0,0,0,0); }
  .project{cursor:pointer;}
}

/* custom cursor (read more) ------------------------------------------- */
.cursor{
  position:fixed;
  top:0; left:0;
  z-index:9999;
  pointer-events:none;
  padding:11px 20px;
  /* Liquid-glass: translucent tint + backdrop blur + saturation lift */
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,0.28);
  color:#fff;
  border-radius:999px;
  font-family:var(--sans);
  font-weight:500;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:8px;
  --x: 0px;
  --y: 0px;
  --s: .6;
  transform: translate(var(--x), var(--y)) translate(-50%, -50%) scale(var(--s));
  opacity:0;
  transition: opacity .2s ease, --s .25s cubic-bezier(.2,.7,.2,1);
  /* soft inner highlight to suggest a glass dome */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.08);
}
@property --s { syntax: '<number>'; inherits: false; initial-value: 0.6; }
.cursor.is-on{
  opacity:1;
  --s: 1;
}
.cursor svg{width:14px; height:10px; display:block;}
.cursor svg path{stroke:#fff;}
@media (hover: none){ .cursor{display:none;} }

/* body block (title + paragraph, right-aligned column) ---------------- */
.body-right{padding-block:60px; display:flex; justify-content:flex-end;}
.body-right__col{max-width:930px; width:100%; display:flex; flex-direction:column; gap:24px;}
.body-right__col h2{
  font-family:var(--sans);
  font-weight:500;
  font-size:var(--body-size);
  line-height:1.1;
  margin:0;
}
.body-right__col p{
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--body-size);
  line-height:1.25;
  margin:0;
  white-space:pre-line;
}

/* body-right: text block aligned to the right column (figma "Body_right") */
.body-right{padding-block:60px;}
.body-right__inner{
  display:grid;
  grid-template-columns: 228px 1fr;
  gap:0 106px;
  align-items:start;
}
.body-right__inner > *{grid-column:2;}
.body-right__title{
  font-family:var(--sans);
  font-weight:500;
  font-size:var(--body-size);
  line-height:1.1;
  margin:0 0 24px;
}
.body-right__text{
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--body-size);
  line-height:1.45;
  margin:0;
  max-width:930px;
  white-space:pre-line;
}
@media (max-width: 900px){
  .body-right__inner{grid-template-columns:1fr; gap:0;}
  .body-right__inner > *{grid-column:1;}
}

/* body-meta: small left meta column + large body right ---------------- */
.body-meta{padding-block:60px;}
.body-meta__inner{
  display:grid;
  grid-template-columns: 228px 1fr;
  gap:106px;
  align-items:start;
}
.body-meta__meta{
  display:flex; flex-direction:column; gap:8px;
  font-family:var(--sans);
  font-size:var(--meta-size);
  line-height:1.25;
}
.body-meta__meta h3{
  font-weight:500;
  font-size:var(--meta-size);
  margin:0;
  line-height:1.25;
  white-space:pre-line;
}
.body-meta__meta p{
  margin:0;
  font-weight:400;
  font-size:var(--meta-size);
  line-height:1.4;
}
.body-meta__body{
  font-family:var(--sans);
  font-size:var(--body-size);
  line-height:1.25;
  margin:0;
  white-space:pre-line;
  max-width:930px;
}

/* full-width hero image inside a section ------------------------------ */
.hero-image{padding-block:0;}
.hero-image__inner{width:100%;}
.hero-image__media{
  width:100%;
  aspect-ratio: 1300 / 700;
  background:#f2f2f2;
  overflow:hidden;
}
.hero-image__media img{width:100%; height:100%; object-fit:cover;}
.hero-image__media--natural{aspect-ratio:auto; background:transparent;}
.hero-image__media--natural img{height:auto;}
.hero-image__media--tall{aspect-ratio: 1300 / 1040;}
.hero-image__media--tall img{transform: scale(1.12); transform-origin: 100% center;}

/* img + text 50/50 (img-with-text-left/right) ------------------------- */
.img-text{padding-block:65px;}
.img-text__inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:96px;
  align-items:center;
}
.img-text__media{
  aspect-ratio: 636 / 713;
  background:#f2f2f2;
  overflow:hidden;
}
.img-text__media :is(img,video){width:100%; height:100%; object-fit:cover; display:block;}
.img-text__media--tall{aspect-ratio: 636 / 800;}
.img-text__media--wide{aspect-ratio: 2398 / 1906;}
.img-text__copy{display:flex; flex-direction:column; gap:24px; max-width:568px;}
.img-text__copy h2{
  font-family:var(--sans);
  font-weight:500;
  font-size:var(--body-size);
  line-height:1.1;
  margin:0;
}
.img-text__copy p{
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--body-size);
  line-height:1.25;
  margin:0;
  white-space:pre-line;
}
/* reverse: text first, then image */
.img-text--reverse .img-text__inner{ grid-template-columns: 1fr 1fr; }
.img-text--reverse .img-text__copy{ order:1; }
.img-text--reverse .img-text__media{ order:2; }

/* wide image row (5 phones, etc.) ------------------------------------- */
.wide-image{padding-block:65px;}
.wide-image__inner{
  display:flex;
  gap:14px;
  width:100%;
  overflow:hidden;
}
.wide-image__item{
  flex:1 1 0;
  min-width:0;
  aspect-ratio: 240 / 488;
  background:#f2f2f2;
  overflow:hidden;
}
.wide-image__item img{width:100%; height:100%; object-fit:cover;}

/* about: portrait + columns ------------------------------------------- */
.about{padding-block:65px;}
.about__inner{display:flex; gap:96px; align-items:flex-start;}
.about__portrait{flex:0 0 291px;}
.about__portrait img{width:100%; aspect-ratio: 1/1; object-fit:cover;}
.about__cols{display:flex; gap:36px; flex:1; padding-top:60px; flex-wrap:wrap;}
.about__col{min-width:160px;}
.about__col h3{
  font-weight:500;
  font-size:var(--nav-size);
  margin:0 0 16px 0;
}
.about__col ul{list-style:none; padding:0; margin:0;}
.about__col li{font-size:var(--nav-size); line-height:1.4;}

/* horizontal list (archived work) ------------------------------------- */
.hlist{padding-block:65px;}
.hlist__head{display:flex; gap:8px; font-size:var(--label-size); margin-bottom:28px; flex-wrap:wrap;}
.hlist__head strong{font-weight:500;}
.hlist__items{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}
.hlist__item{
  aspect-ratio: 1 / 1;
  background:#f2f2f2;
  overflow:hidden;
}
.hlist__item img{width:100%; height:100%; object-fit:cover; transition: transform .8s cubic-bezier(.2,.7,.2,1);}
.hlist__item:hover img{transform:scale(1.04);}

/* case-study section labels ------------------------------------------- */
.case-label{padding-block:0;}
.case-label__inner{
  display:flex; gap:18px; align-items:baseline;
  border-top:1px solid rgba(0,0,0,.16);
  padding-top:24px;
  margin-top:88px;
}
.case-label__text{
  font-family:var(--sans);
  font-weight:500;
  font-size:var(--label-size);
  line-height:1;
  margin:0;
}

/* learnings grid ------------------------------------------------------ */
.learnings{padding-block:40px 65px;}
.learnings__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:56px;
}
.learnings__item{display:flex; flex-direction:column; gap:14px;}
.learnings__item h3{
  font-family:var(--sans);
  font-weight:500;
  font-size:var(--body-size);
  line-height:1.1;
  margin:0;
}
.learnings__item p{
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--meta-size);
  line-height:1.45;
  margin:0;
}
@media (max-width: 900px){
  .learnings__grid{grid-template-columns:1fr; gap:36px;}
  .case-label__inner{margin-top:56px;}
}

/* image carousel (figma "image carusel" 52:767) ----------------------- */
.carousel{padding-block:65px; padding-inline:0; overflow:hidden;}
.carousel__head{
  padding-left: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  padding-right: var(--gutter);
  margin-bottom:28px;
  display:flex; align-items:center; gap:20px;
}
.carousel__title{font-weight:500; font-size:var(--label-size); line-height:1;}
.carousel__arrow{
  appearance:none; -webkit-appearance:none;
  border:none; background:transparent; padding:0; margin:0;
  color:#000; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .25s ease, opacity .25s ease;
}
.carousel__arrow svg{width:30px; height:16px; display:block;}
.carousel__arrow:hover{transform:translateX(4px);}
.carousel__arrow:disabled{opacity:.22; cursor:default; transform:none;}
.carousel__track{
  display:flex; gap:24px;
  padding-left: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  padding-right: var(--gutter);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  /* Snap positions must respect the left inset, otherwise scroll-snap-align:start
     parks the first item against the viewport edge and it stops lining up with
     the arrow and the content column above. */
  scroll-padding-left: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.carousel__track::-webkit-scrollbar{display:none;}
.carousel__track.is-dragging{cursor:grabbing; scroll-behavior:auto;}
.carousel__track.is-dragging .carousel__item{pointer-events:none;}
.carousel__item{
  flex:0 0 auto;
  width: clamp(260px, 40vw, 600px);
  aspect-ratio: 636 / 713;
  background:#f2f2f2; overflow:hidden;
  scroll-snap-align:start; margin:0;
}
.carousel__item img{width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none;}
/* Archived work uses smaller thumbnails than the case-study image galleries */
.section[data-screen-label="Archived Work"] .carousel__item{
  width: clamp(140px, 18vw, 280px);
}

/* project nav (prev / next) ------------------------------------------- */
.projectnav{padding-block:96px;}
.projectnav__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  margin-inline:calc(-1 * min(96px, var(--gutter)));
}
.projectnav__link{
  display:flex;
  align-items:center;
  gap:1.714em;
  font-family:var(--sans);
  font-size:var(--body-size);
  line-height:1;
  color:#000;
  text-decoration:none;
  cursor:pointer;
}
.projectnav__link--next{flex-direction:row-reverse;}
.projectnav__arrow{
  width:1.714em;
  height:1.714em;
  flex:0 0 auto;
  display:block;
  transition:transform .25s ease;
}
.projectnav__link--prev .projectnav__arrow{transform:scaleX(-1);}
.projectnav__link:hover span{text-decoration:underline; text-underline-offset:4px;}
.projectnav__link--next:hover .projectnav__arrow{transform:translateX(4px);}
.projectnav__link--prev:hover .projectnav__arrow{transform:scaleX(-1) translateX(4px);}

/* footer -------------------------------------------------------------- */
.footer{background:#0F0F0F; color:#FFFFFF; margin-top: clamp(80px, 9vw, 132px);}
.footer__link{display:block; padding-inline:var(--gutter); padding-block:80px; color:#FFFFFF; text-decoration:none; cursor:pointer;}
.footer__inner{display:flex; justify-content:space-between; align-items:flex-end; gap:32px;}
.footer__left{display:flex; flex-direction:column; gap:32px; flex:1;}
.footer__title{
  font-family:var(--serif);
  font-size: clamp(32px, 3.3vw, 50px);
  line-height:1.05;
  margin:0;
  font-weight:400;
  max-width:14em;
  color:#FFFFFF;
}
.footer__email{
  font-family:var(--serif);
  font-size: var(--body-size);
  margin:0;
  color:#FFFFFF;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.footer__link:hover .footer__email{text-decoration:underline; text-underline-offset:4px;}
.footer__arrow{width:30px; height:16px; display:block; color:#FFFFFF; flex:0 0 auto;}
.footer__link:hover .footer__arrow{transform:translateX(4px); transition:transform .25s ease;}

/* reveal on scroll --------------------------------------------------- */
.reveal{
  opacity:0;
  transform: translateY(36px);
  transition: opacity .72s cubic-bezier(.2,.7,.2,1) .08s, transform .72s cubic-bezier(.2,.7,.2,1) .08s;
  will-change: opacity, transform;
}
.reveal.is-in{ opacity:1; transform: none; }

/* image-style reveal: bigger lift + subtle scale so images feel material */
.reveal--image{
  opacity:0;
  transform: translateY(48px) scale(.985);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1) .08s, transform .85s cubic-bezier(.2,.7,.2,1) .08s;
  will-change: opacity, transform;
}
.reveal--image.is-in{ opacity:1; transform: none; }

.reveal[data-stagger] > *{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .58s cubic-bezier(.2,.7,.2,1), transform .58s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(80ms + var(--i, 0) * 80ms);
}
.reveal[data-stagger].is-in > *{ opacity:1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal--image, .reveal[data-stagger] > *{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* responsive ---------------------------------------------------------- */
@media (max-width: 1100px){
  .about__inner{gap:48px;}
  .about__cols{gap:24px;}
  .img-text__inner{gap:48px;}
  .body-meta__inner{gap:48px;}
  .body-right__inner{gap:0 48px;}
}
@media (max-width: 900px){
  .hlist__items{grid-template-columns:repeat(3, 1fr);}
  .about__inner{flex-direction:column; gap:40px;}
  .about__portrait{flex-basis:240px;}
  .about__cols{padding-top:0;}
  .img-text__inner{display:flex; flex-direction:column; gap:32px;}
  .img-text__media{order:1;}
  .img-text__copy{order:2;}
  .img-text--reverse .img-text__copy{order:2;}
  .img-text--reverse .img-text__media{order:1;}
  .body-meta__inner{grid-template-columns:1fr; gap:24px;}
  .body-meta__meta{max-width:340px;}
  .wide-image__inner{flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory;}
  .wide-image__item{flex:0 0 60%; scroll-snap-align:start;}
}
@media (max-width: 760px){
  .grid__items{grid-template-columns:1fr;}
  .nav__toggle{display:block;}
  .nav__links{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:24px;
    padding:8px var(--gutter) 32px;
    background:rgba(255,255,255,0.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
  .site-header.is-open .nav__links{display:flex;}
}
@media (max-width: 560px){
  .projectnav{padding-block:56px;}
  .projectnav__inner{gap:16px;}
  .projectnav__link{gap:12px;}
  .hlist__items{grid-template-columns:repeat(2, 1fr);}
  .nav__links{gap:16px;}
}