:root{color-scheme:dark;--bg:#101112;--panel:#1b1d1e;--text:#f5f3ef;--muted:#a7a8a6;--line:#343637}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #e4c59c;outline-offset:5px}.site-header{height:82px;padding:0 clamp(22px,5vw,90px);display:flex;justify-content:space-between;align-items:center;background:#101112;position:relative;z-index:5}.brand{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:1}.brand img{display:block;width:auto;height:66px;max-width:110px;object-fit:contain}nav{display:flex;align-items:center;gap:clamp(15px,2.5vw,40px)}nav a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#b8b8b5;transition:color .2s}nav a:hover,nav a.active{color:#fff}.social{display:flex}.social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}.hero{min-height:min(790px,calc(100svh - 82px));background:#333 url('images/homepage-hero.jpg') center center/cover no-repeat;display:flex;align-items:end;position:relative}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.68),rgba(0,0,0,.08) 70%,rgba(0,0,0,.04))}.hero-overlay{position:relative;padding:clamp(36px,7vw,110px);width:100%}.eyebrow{font-size:10px;letter-spacing:.3em;color:#c4c4c0;font-weight:600}.hero h1{font-size:clamp(48px,8vw,118px);font-weight:400;letter-spacing:-.06em;margin:15px 0 8px;line-height:1}.hero-overlay>p:not(.eyebrow){color:#deded9;font-size:15px}.hero-link{display:inline-block;border-bottom:1px solid #ddd;padding:12px 0;margin-top:22px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}.hero-link span{margin-left:20px}.work{padding:clamp(65px,9vw,135px) clamp(22px,7vw,120px)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:42px}.section-heading h2,.contact-cta h2{font-weight:400;letter-spacing:-.05em;font-size:clamp(38px,5vw,68px);margin:12px 0 0}.section-heading>p{color:var(--muted);font-size:13px}.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 22px}.gallery figure{margin:0}.gallery img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;background:#252829}.gallery figure:nth-child(2) img,.gallery figure:nth-child(3) img{aspect-ratio:4/3}.gallery figcaption{color:#b5b5b1;font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin-top:15px}.contact-cta{text-align:center;padding:100px 22px 120px;background:#1a1c1d}.contact-cta p:not(.eyebrow){color:var(--muted);font-size:14px}.outline-button{display:inline-flex;gap:45px;align-items:center;border:1px solid #6e706f;padding:17px 23px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:25px;transition:background .2s}.outline-button:hover{background:#333}footer{border-top:1px solid var(--line);padding:28px clamp(22px,5vw,90px);display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#9b9d9b;letter-spacing:.13em}.contact-page{min-height:calc(100svh - 156px);display:grid;grid-template-columns:1.1fr .9fr}.contact-content{padding:clamp(70px,10vw,150px) clamp(22px,8vw,130px)}.contact-content h1{font-size:clamp(44px,5.8vw,90px);font-weight:400;letter-spacing:-.06em;line-height:1.08;margin:20px 0 25px}.contact-intro{color:var(--muted);line-height:1.8;max-width:390px;font-size:15px}.contact-details{margin-top:65px}.contact-details a{display:inline-block;font-size:clamp(18px,2.4vw,29px);margin:8px 0}.contact-details small{display:block;color:#8f918f;font-size:11px;margin-top:7px}.social-label{margin-top:40px}.contact-art{background:#303435 url('images/homepage-hero.jpg') 64% center/cover no-repeat}@media(max-width:720px){.site-header{height:72px;padding:0 18px}.brand img{height:54px;max-width:85px}nav{gap:14px}nav a{font-size:9px;letter-spacing:.07em}.social svg{width:18px;height:18px}.hero{min-height:68svh;background-position:62% center}.hero-overlay{padding:32px 22px}.section-heading{display:block}.section-heading>p{margin-top:18px}.gallery{gap:23px 12px}.gallery figcaption{font-size:9px}.contact-page{grid-template-columns:1fr}.contact-art{min-height:220px;grid-row:1}.contact-content{padding:55px 25px 90px}footer{font-size:8px;padding:24px 18px}}@media(max-width:390px){nav{gap:10px}.brand img{height:49px;max-width:78px}}

/* Hero picture: keep subject visible at smaller screen widths. */
@media(max-width:720px){.hero:before{background:linear-gradient(0deg,rgba(0,0,0,.78),transparent 72%)}.hero h1{font-size:clamp(44px,11vw,74px)}}

/* Homepage: signature sits directly over the hero photograph, above the heading. */
.site-header--home{justify-content:flex-end}
.hero-signature{display:block;width:clamp(105px,12vw,176px);height:auto;object-fit:contain;margin:0 0 12px -10px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.28))}
@media(max-width:720px){.hero-signature{width:115px;margin:0 0 10px -7px}}


/* Version 4: Navigation floats over the hero photo on the home page. */
.site-header--home{
  position:absolute;
  inset:0 0 auto 0;
  width:100%;
  background:transparent;
  justify-content:flex-end;
  height:88px;
  z-index:10;
}
.site-header--home nav a{color:rgba(255,255,255,.86);text-shadow:0 1px 9px rgba(0,0,0,.44)}
.site-header--home nav a:hover,.site-header--home nav a.active{color:#fff}
.hero{min-height:min(840px,100svh)}
.hero:before{
  background:linear-gradient(to bottom,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,0) 32%,
    rgba(0,0,0,.10) 56%,
    rgba(0,0,0,.68) 100%);
}
.hero-signature{
  width:clamp(210px,23vw,355px);
  max-width:72vw;
  height:auto;
  margin:0 0 7px -15px;
  filter:drop-shadow(0 4px 15px rgba(0,0,0,.3));
}
.hero-credit{
  position:absolute;
  z-index:2;
  bottom:clamp(32px,4.5vw,66px);
  right:clamp(22px,5vw,90px);
  margin:0;
  font-size:clamp(10px,1vw,13px);
  font-weight:500;
  letter-spacing:.32em;
  color:#f9f7f1;
  text-shadow:0 2px 16px rgba(0,0,0,.8);
  white-space:nowrap;
}
@media(max-width:720px){
  .site-header--home{height:70px;padding:0 21px}
  .site-header--home nav{gap:clamp(12px,3.2vw,23px)}
  .hero{min-height:85svh;background-position:62% center}
  .hero-overlay{padding:32px 22px 104px}
  .hero-signature{width:clamp(175px,47vw,270px);max-width:70vw;margin-left:-9px;margin-bottom:5px}
  .hero-credit{right:23px;bottom:27px;font-size:10px;letter-spacing:.26em}
  .hero:before{background:linear-gradient(to bottom,rgba(0,0,0,.40),transparent 28%,rgba(0,0,0,.12) 48%,rgba(0,0,0,.78))}
}
@media(max-width:390px){
  .site-header--home nav{gap:10px}
  .site-header--home nav a{font-size:9px}
}

/* Version 6: Move the signature, PORTFOLIO and Selected Work higher into
   the open grass on the left, so the typography clears the model's knees. */
.hero-overlay {
  align-self: flex-start;
  margin-top: clamp(122px, 16.5vh, 190px);
  padding: 0 clamp(36px, 7vw, 110px);
  max-width: 800px;
}
@media (max-width: 720px) {
  .hero-overlay {
    margin-top: clamp(120px, 17svh, 180px);
    padding: 0 22px;
    max-width: 100%;
  }
  .hero h1 { font-size: clamp(42px, 10vw, 70px); }
}

/* Version 7: keep the hero title on a single line at all screen sizes. */
.hero h1 {
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hero h1 {
    font-size: clamp(26px, 9vw, 64px);
  }
}

/* Version 8: Position the heading in the open space between the model's
   bent elbow and knee, without moving the signature and PORTFOLIO label. */
.hero-overlay h1 {
  margin-top: clamp(52px, 6.5vh, 74px);
  font-size: clamp(48px, 6.5vw, 94px);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hero-overlay h1 {
    margin-top: clamp(22px, 4svh, 40px);
    font-size: clamp(26px, 8.5vw, 58px);
    letter-spacing: -.065em;
  }
}

/* Version 9: smaller signature and a more prominent single-line headline.
   Compensate for the logo's reduced height so the headline stays in the open
   space between the subject's bent knee and elbow. */
.hero-signature {
  width: clamp(150px, 15vw, 230px);
  max-width: 62vw;
}
.hero-overlay h1 {
  margin-top: clamp(105px, 9.5vh, 126px);
  font-size: clamp(62px, 8vw, 108px);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hero-signature {
    width: clamp(118px, 33vw, 180px);
    max-width: 55vw;
  }
  .hero-overlay h1 {
    margin-top: clamp(52px, 7svh, 80px);
    font-size: clamp(30px, 9.3vw, 65px);
    white-space: nowrap;
  }
}


/* Version 10: Restore the large, low title from v5. Keep EXPLORE WORK
   and BY PONTUS aligned on the same baseline at the bottom of the image. */
.hero-overlay {
  align-self: auto;
  margin-top: 0;
  max-width: none;
  padding: clamp(36px, 7vw, 110px);
  padding-bottom: calc(clamp(36px, 7vw, 110px) + 66px);
}
.hero-overlay h1 {
  font-size: clamp(48px, 8vw, 118px);
  margin: 15px 0 8px;
  letter-spacing: -.06em;
  white-space: nowrap;
}
.hero-bottom {
  position: absolute;
  z-index: 2;
  left: clamp(22px, 7vw, 110px);
  right: clamp(22px, 5vw, 90px);
  bottom: clamp(32px, 4.5vw, 66px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.hero-bottom .hero-link {
  display: inline-block;
  margin: 0;
  padding: 0 0 3px;
  line-height: 1;
  white-space: nowrap;
}
.hero-bottom .hero-credit {
  position: static;
  line-height: 1;
  margin: 0;
}
@media (max-width: 720px) {
  .hero-overlay {
    padding: 32px 22px 166px;
    margin-top: 0;
    max-width: none;
  }
  .hero-overlay h1 {
    font-size: clamp(28px, 9vw, 64px);
    margin-top: 15px;
    white-space: nowrap;
  }
  .hero-bottom {
    left: 22px;
    right: 23px;
    bottom: 27px;
    gap: 8px;
  }
  .hero-bottom .hero-link {
    font-size: 10px;
    letter-spacing: .12em;
  }
  .hero-bottom .hero-link span {margin-left: 6px}
}

/* Version 11: Slightly increase only the signature overlay. */
.hero-signature {
  width: clamp(185px, 18vw, 285px);
  max-width: 65vw;
}
@media (max-width: 720px) {
  .hero-signature {
    width: clamp(145px, 39vw, 215px);
    max-width: 60vw;
  }
}

/* Version 17: Swap the title and signature positions in the v11 hero. */
.hero-overlay > h1 { margin: 0 0 12px; }
.hero-overlay > .eyebrow { margin: 0 0 8px; }
.hero-overlay > .hero-signature { margin: 0 0 0 -12px; }
@media(max-width:720px){
  .hero-overlay > h1 { font-size:clamp(28px, 9vw, 64px); }
  .hero-overlay > .hero-signature { margin-left:-8px; }
}

/* Version 19: Slightly more breathing room between letters, preserving typeface and size. */
.hero-overlay > h1 { letter-spacing: -0.012em; }
@media (max-width: 720px) {
  .hero-overlay > h1 { letter-spacing: -0.018em; }
}


/* Version 22 — 12-photo compact editorial gallery, no vacant grid spaces. */
.work{padding:clamp(70px,8vw,118px) clamp(12px,2.7vw,44px) clamp(90px,9vw,140px)}
.work .section-heading{margin-bottom:clamp(22px,3vw,38px)}
.work .section-heading h2{margin:0;font-size:clamp(38px,5vw,72px);letter-spacing:-.045em}
.gallery{display:flex;flex-direction:column;gap:clamp(5px,.65vw,10px)}
.gallery-row{display:grid;gap:clamp(5px,.65vw,10px);align-items:stretch}
.gallery-row--mixed{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr)}
.gallery-row--portraits{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery .gallery-tile{min-width:0;margin:0;aspect-ratio:3/4;overflow:hidden;background:#222}
.gallery .gallery-tile--landscape{aspect-ratio:3/2}
.gallery .gallery-open{appearance:none;display:block;position:relative;width:100%;height:100%;padding:0;margin:0;border:0;background:#1a1b1b;cursor:zoom-in;text-align:left;overflow:hidden}
.gallery .gallery-open:focus-visible{outline:2px solid #f2eee7;outline-offset:-3px}
.gallery .gallery-open img{display:block;width:100%;height:100%;object-fit:cover;background:#222;transition:transform .5s ease,filter .5s ease}
.gallery .gallery-open:hover img{transform:scale(1.025);filter:brightness(.92)}
.gallery .gallery-tile figcaption{display:none}
@media(max-width:850px){
  .gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(5px,.65vw,10px)}
  .gallery-row{display:contents}
  .gallery .gallery-tile--landscape{grid-column:span 2}
}
@media(max-width:600px){
  .work{padding:58px 9px 86px}
  .work .section-heading{padding:0 7px;margin-bottom:22px}
  .gallery{gap:5px}
  .gallery .gallery-open:hover img{transform:none;filter:none}
}
.lightbox[hidden]{display:none!important}
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;justify-content:center;align-items:center;padding:clamp(12px,4vw,64px);background:rgba(0,0,0,.98)}
.lightbox-backdrop{position:absolute;inset:0;cursor:zoom-out}
.lightbox-image{position:relative;display:block;max-width:100%;max-height:calc(100dvh - 100px);width:auto;height:auto;object-fit:contain;box-shadow:0 7px 50px rgba(0,0,0,.5)}
.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;z-index:2;color:#fff;border:0;background:rgba(14,14,14,.54);font-family:Arial,Helvetica,sans-serif;cursor:pointer;display:grid;place-items:center}
.lightbox-close{top:16px;right:19px;width:44px;height:44px;font-size:32px;line-height:1}
.lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%);width:38px;height:62px;font-size:44px;font-weight:200}
.lightbox-prev{left:8px}.lightbox-next{right:8px}
.lightbox-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.18em;color:#bbb}
.lightbox button:focus-visible{outline:2px solid white;outline-offset:2px}
@media(max-width:660px){.lightbox{padding:45px 6px}.lightbox-image{max-height:calc(100dvh - 140px)}.lightbox-close{top:8px;right:10px}.lightbox-prev,.lightbox-next{width:34px;height:52px;font-size:38px}}
@media(prefers-reduced-motion:reduce){.gallery .gallery-open img{transition:none;transform:none!important}html{scroll-behavior:auto}}

/* Version 23: second editorial row with landscape photograph on the left. */
@media (min-width: 851px) {
  .gallery-row--landscape-first {grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);}
}

/* Version 24: explicit four-row editorial mosaic.
   Rows: L-P-P / P-P-P / P-P-L / P-P-P.
   Each portrait is 3:4, landscape 3:2; 2fr + 1fr + 1fr
   produces matching heights and a neat shared baseline. */
@media (min-width: 851px){
  .gallery-row--mixed:not(.gallery-row--landscape-first){
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);
  }
  .gallery-row--landscape-first{
    grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  }
}

/* Version 27: short fade into the portfolio background at the bottom of the hero
   background, without editing the source photograph. */
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(85px, 12vh, 145px);
  background: linear-gradient(to bottom,
    rgba(16, 17, 18, 0) 0%,
    rgba(16, 17, 18, .12) 30%,
    rgba(16, 17, 18, .65) 73%,
    #101112 100%);
  pointer-events: none;
}
/* Keep heading and bottom navigation readable above the gradient. */
.hero-overlay { z-index: 2; }
.hero-bottom { z-index: 2; }
/* Clicking still opens the lightbox, but the cursor no longer shows a magnifier. */
.gallery .gallery-open,
.gallery .gallery-open img { cursor: pointer; }
@media (max-width: 720px) {
  .hero::after { height: clamp(65px, 11svh, 105px); }
}


/* Version 28 — move the contact signature from the header into the content. */
.site-header--contact { justify-content: flex-end; }
.contact-signature {
  display: block;
  width: clamp(95px, 10vw, 135px);
  height: auto;
  object-fit: contain;
  margin: 26px 0 8px -5px;
}
/* The social link is now the first contact method. */
.contact-details .social-label { margin-top: 0; }
@media (max-width: 720px) {
  .contact-signature { width: 105px; margin-top: 23px; margin-bottom: 12px; }
}


/* Version 29 — Contact identity sits above the small CONTACT label. */
.contact-content { padding-top: clamp(32px, 5vw, 76px); }
.contact-signature { margin: 0 0 24px -5px; }
.contact-content > .eyebrow { margin: 0; }
.contact-email-note {
  margin: 0 0 25px;
  max-width: 390px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
@media (max-width: 720px) {
  .contact-content { padding-top: 34px; }
  .contact-signature { margin-top: 0; margin-bottom: 20px; }
}