@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700&display=swap');

:root { --cream:#f8f5f1; --ink:#304438; --sage:#aeb9a8; --orange:#f5a126; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font:400 15px/1.65 Manrope,Arial,sans-serif; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1110px,88%); margin:auto; }

/* Samme rolige bildeeffekt gjennom hele «Om fotografen». */
.about-hero > img, .story img, .sage-grid img, .postcard img, .road img, .group img {
  transition: transform .35s ease, filter .35s ease, box-shadow .35s ease;
}
.about-hero:hover > img, .story img:hover, .sage-grid img:hover, .postcard img:hover, .road img:hover, .group img:hover {
  filter: brightness(1.06) saturate(1.04);
  transform: scale(1.015);
}

.about-nav { position:absolute; z-index:3; top:0; left:0; width:100%; height:104px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 clamp(24px,6vw,64px); background:rgba(255,250,246,.94); border-bottom:1px solid rgba(47,75,61,.08); backdrop-filter:blur(14px); }
.about-nav img { width:86px; height:auto; }
.about-nav nav { display:flex; gap:clamp(18px,2.8vw,42px); align-items:center; font-size:.92rem; font-weight:400; }
.about-nav nav a { line-height:1; }
.about-nav nav > a { padding:12px 0; }
.about-nav nav > a:hover, .about-nav .active { font-weight:700; color:var(--orange); }
.about-nav .active { padding:12px 0; border-bottom:2px solid var(--orange); }
.about-nav .book { padding:12px 20px; font-weight:700; color:var(--orange); border:1px solid var(--orange); border-radius:6px; }
.about-hero > .public-header { position:absolute; top:0; right:0; left:0; }

.about-hero { position:relative; height:582px; overflow:hidden; }
.about-hero > img { width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.about-hero::after { position:absolute; z-index:1; inset:0; content:''; background:linear-gradient(90deg,rgba(248,245,241,.86),rgba(248,245,241,.06) 68%); }
.about-hero h1 { position:absolute; z-index:2; bottom:125px; left:7%; margin:0; color:#62594d; font:500 clamp(3.4rem,5.4vw,5.4rem)/.9 'Instrument Serif',Georgia,serif; }

.lead { max-width:850px; padding:85px 0 65px; text-align:center; }
.lead h2, .statement h2, .cta h2 { margin:0 0 25px; font:500 clamp(2.5rem,4vw,4.6rem)/1 'Instrument Serif',Georgia,serif; }
.lead p { margin:0; color:#111; font-size:15px; }
.story { display:grid; grid-template-columns:.7fr 1.05fr 1fr; gap:15px; padding-bottom:85px; }
.story .copy { padding-top:40px; }
.story img { width:100%; height:220px; object-fit:cover; }
.story img:first-of-type, .story img:last-child { height:390px; grid-row:span 2; }
.sage { padding:70px 0; background:var(--sage); }
.sage-grid { display:grid; grid-template-columns:1fr 1fr; gap:55px; align-items:center; }
.sage-grid img { width:100%; height:410px; object-fit:cover; }
.postcard { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:85px 0; }
.postcard img { width:100%; height:240px; object-fit:cover; }
.road { padding:65px 20px; text-align:center; background:var(--sage); }
.road img { width:min(760px,100%); margin:auto; border:8px solid #fff; }
.road p { max-width:570px; margin:25px auto 0; }
.group { padding:85px 0; text-align:center; }
.group img { width:min(640px,100%); margin:auto; border:8px solid #fff; box-shadow:0 12px 30px #233a2b25; }
.cta { padding:95px 20px; text-align:center; background:#e8f0ea; }
.cta a { display:inline-block; padding:11px 23px; font-weight:700; border:1px solid var(--ink); border-radius:4px; }
.about-footer { padding:45px; text-align:center; background:#f3ede7; }
.about-footer img { width:80px; margin:auto; }
.about-footer small { display:block; margin-top:10px; }

@media (max-width:700px) {
  .about-nav nav { display:none; }
  .about-hero { height:430px; }
  .about-hero h1 { bottom:70px; }
  .lead { padding-top:60px; }
  .lead p br { display:none; }
  .story, .sage-grid { grid-template-columns:1fr; }
  .story .copy { padding:0; }
  .story img, .story img:first-of-type, .story img:last-child { height:280px; grid-row:auto; }
  .postcard { grid-template-columns:1fr 1fr; }
}