:root{--cream:#f5ead8;--ink:#33251f;--blue:#b65f43;--acid:#d9a441;--green:#526346;--pink:#d98a63;--line:#171717}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit}header{height:64px;padding:0 3.5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);position:sticky;top:0;background:rgba(245,234,216,.95);backdrop-filter:blur(8px);z-index:8}.name{text-decoration:none;font-weight:900;letter-spacing:-.03em}nav{display:flex;gap:25px;font-size:13px}nav a{text-decoration:none}.tiny{font-family:"Courier New",monospace;font-weight:700;letter-spacing:.06em;font-size:11px}.intro{min-height:calc(100vh - 64px);padding:6vw;display:grid;grid-template-columns:1.35fr .58fr;grid-template-rows:auto auto;gap:2.5vw;position:relative;overflow:hidden}.intro:after{content:"?";position:absolute;right:-2vw;bottom:-10vw;font-size:36vw;font-weight:900;line-height:1;color:var(--acid);z-index:-1}.intro h1{font-size:clamp(54px,7.8vw,116px);line-height:.88;letter-spacing:-.075em;font-weight:900;margin:24px 0 30px;max-width:1050px}.intro h1 span{color:var(--blue)}.lead{font-size:20px;line-height:1.45;max-width:660px}.jump{display:inline-block;margin-top:28px;background:var(--acid);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:12px 15px;text-decoration:none;font-weight:700}.portrait{margin:0;align-self:center;transform:rotate(1.5deg);position:relative}.portrait img{width:100%;display:block;border:2px solid var(--ink)}figcaption{font-family:"Courier New",monospace;font-size:11px;margin-top:8px}.sticker{grid-column:2;background:var(--pink);border:2px solid var(--ink);padding:18px;transform:rotate(-3deg);font-size:14px;line-height:1.45;box-shadow:5px 5px 0 var(--ink)}.personal-strip{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:4vw 6vw;display:grid;grid-template-columns:.8fr .7fr .55fr .8fr;align-items:center;gap:3vw;background:#efe0ca}.personal-strip figure{margin:0}.personal-strip img{width:100%;display:block;border:2px solid var(--ink)}.personal-strip figure:first-of-type{transform:rotate(-2deg)}.personal-strip figure:last-child{transform:rotate(2deg)}.bigword{font-size:clamp(34px,5vw,70px);font-weight:900;line-height:.82;letter-spacing:-.07em;color:var(--blue)}.reading{border:2px solid var(--ink);background:var(--acid);padding:20px;transform:rotate(2deg)}.reading p{margin-bottom:0;font-size:14px;line-height:1.4}.work{padding:8vw 6vw}.section-title{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:10px;font-family:"Courier New",monospace;font-weight:700;font-size:12px}.work-row{display:grid;grid-template-columns:55px 1fr .6fr;gap:25px;padding:30px 0;border-bottom:2px solid var(--ink);text-decoration:none;align-items:start}.work-row h2{font-size:clamp(36px,4.4vw,64px);letter-spacing:-.06em;margin:0 0 7px;font-weight:900}.work-row p{margin:0;font-size:17px}.work-row>span{font-family:"Courier New",monospace;font-size:11px;line-height:1.5}.work-row:hover{background:var(--acid);padding-left:14px;padding-right:14px}.sopp{background:#d8d8b5;padding:8vw 6vw;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}.sopp-head{display:grid;grid-template-columns:190px 1fr;gap:5vw;align-items:center;margin-bottom:8vw}.logo{width:100%;mix-blend-mode:multiply}.sopp h2,.mini h2,.about h2{font-size:clamp(44px,6vw,88px);line-height:.92;letter-spacing:-.07em;font-weight:900;margin:15px 0}.role{display:inline-block;background:var(--acid);border:2px solid var(--ink);padding:10px 14px;font-weight:800;margin-top:15px}.role i{color:var(--blue)}.origin{display:grid;grid-template-columns:1.1fr .9fr;gap:5vw;align-items:center;margin:7vw 0}.origin img{width:100%;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--blue);transform:rotate(-1deg)}.origin p{font-size:clamp(22px,2.8vw,38px);line-height:1.15;font-weight:700}.caption{font-family:"Courier New",monospace;font-size:10px}.research-band{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;border:2px solid var(--ink);background:var(--blue);color:white;margin:7vw 0}.research-band>*{padding:20px;border-right:2px solid var(--ink)}.research-band>*:last-child{border:0}.research-band b{font-size:22px}.research-band span{font-family:"Courier New",monospace;font-size:12px}.story{display:grid;grid-template-columns:75px minmax(0,850px);justify-content:center;gap:25px;padding:7vw 0;border-top:2px solid #8f765f}.story-no{font-family:"Courier New",monospace;font-size:24px;font-weight:700}.story h3,.continuing h3{font-size:clamp(38px,5vw,70px);letter-spacing:-.065em;line-height:.96;margin:14px 0 25px;font-weight:900}.story p{font-size:18px;line-height:1.55;max-width:740px}.story blockquote{font-size:clamp(28px,3.4vw,48px);font-weight:800;line-height:1.1;margin:55px 0 0;border-left:8px solid var(--blue);padding-left:25px}.story blockquote small{display:block;font-family:"Courier New",monospace;font-size:11px;font-weight:400;margin-top:18px}.marker{font-size:clamp(28px,3.4vw,48px)!important;line-height:1.05!important;font-weight:900!important;margin-top:45px!important;background:var(--acid);border:2px solid var(--ink);padding:8px;display:inline-block;transform:rotate(-1deg)}.why{display:block;margin-top:35px;border:2px solid var(--ink);background:#fff8ec;padding:11px 14px;font-weight:700;box-shadow:4px 4px 0 var(--ink);cursor:pointer}.five{display:flex;align-items:center;gap:18px;color:var(--blue);font-size:clamp(70px,10vw,150px);font-weight:900;letter-spacing:-.08em;margin:35px 0}.five span{color:var(--ink);font-family:"Courier New",monospace;font-size:12px;letter-spacing:0;max-width:160px}.final-map{margin-top:45px;display:flex;align-items:flex-start;gap:20px}.final-map img{width:min(440px,70vw);display:block;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--pink)}.arrow{font-size:50px;color:var(--blue);font-weight:900}.arrow span{display:block;color:var(--ink);font-family:"Courier New",monospace;font-size:10px;line-height:1.4}.credit{font-family:"Courier New",monospace;font-size:12px!important;border-top:2px solid var(--ink);padding-top:15px;margin-top:30px}.continuing{margin:7vw 0 0 10vw;max-width:820px;border:2px solid var(--ink);background:var(--acid);padding:4vw;box-shadow:8px 8px 0 var(--ink);position:relative}.continuing>span{position:absolute;right:20px;top:-20px;background:var(--pink);border:2px solid var(--ink);padding:7px 12px;font-weight:900;transform:rotate(3deg)}.continuing p{font-size:18px;line-height:1.55}.mini{padding:9vw 6vw;border-bottom:2px solid var(--ink);display:grid;grid-template-columns:1fr .8fr;gap:6vw}.cocreate{background:#e7b9a3}.mini h2 span{color:var(--blue)}.mini-copy>p{font-size:18px;line-height:1.55;max-width:720px}.mini-punch{font-size:clamp(25px,3vw,42px)!important;font-weight:900;line-height:1.05!important;border-left:8px solid var(--blue);padding-left:20px;margin:35px 0}.mini-images{display:grid;gap:25px;align-content:center}.mini-images img{width:100%;border:2px solid var(--ink)}.mini-images img:first-child{transform:rotate(2deg);box-shadow:7px 7px 0 var(--blue)}.mini-images img:last-child{transform:rotate(-2deg);box-shadow:7px 7px 0 var(--acid)}.sivert{background:#f0d7aa}.sivert-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:35px}.sivert-tags span{border:2px solid var(--ink);padding:8px 10px;font-family:"Courier New",monospace;font-size:11px}.blue-card{background:var(--blue);color:white;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--acid);padding:4vw;font-size:clamp(28px,4vw,58px);font-weight:900;line-height:.95;transform:rotate(2deg);align-self:center}.about{background:var(--green);color:var(--cream);padding:9vw 6vw;display:grid;grid-template-columns:1.2fr .5fr;gap:6vw}.about h2 span{color:var(--acid)}.about-copy p{font-size:18px;line-height:1.55;max-width:700px}.about figure{margin:0;transform:rotate(2deg)}.about img{width:100%;border:2px solid var(--cream)}.three-things{grid-column:1/-1;display:flex;justify-content:space-between;font-size:clamp(38px,8vw,110px);font-weight:900;letter-spacing:-.07em;color:var(--pink);border-top:2px solid var(--cream);border-bottom:2px solid var(--cream);padding:15px 0}.contact{grid-column:1/-1;padding-top:15px;display:flex;justify-content:space-between;font-family:"Courier New",monospace;font-size:12px}.answer{position:fixed;right:25px;bottom:25px;width:min(410px,calc(100vw - 30px));background:var(--acid);border:2px solid var(--ink);padding:23px;z-index:20;display:none;box-shadow:8px 8px 0 var(--ink)}.answer.open{display:block}.answer button{float:right;border:0;background:none;font-size:25px;cursor:pointer}.answer div{font-size:17px;line-height:1.45;margin-top:22px;font-weight:600}@media(max-width:760px){nav a:first-child{display:none}.intro{grid-template-columns:1fr;padding-top:12vw}.portrait{width:72%;margin-left:auto}.sticker{grid-column:1;width:75%;margin-left:5%}.personal-strip{grid-template-columns:1fr 1fr}.bigword{grid-column:1/-1}.reading{order:4}.work-row{grid-template-columns:35px 1fr}.work-row>span{grid-column:2}.sopp-head,.origin,.mini,.about{grid-template-columns:1fr}.sopp-head .logo{width:120px}.research-band{grid-template-columns:1fr 1fr}.research-band>*{border-bottom:2px solid var(--ink)}.story{grid-template-columns:35px 1fr}.continuing{margin-left:0}.mini-images{grid-template-columns:1fr 1fr}.about .contact,.three-things{grid-column:auto}.three-things{font-size:44px;flex-direction:column}.contact{flex-direction:column;gap:12px}.portrait img{max-height:520px;object-fit:cover}}

/* v4 — warm, earthy art direction */
body{background-color:var(--cream);background-image:radial-gradient(rgba(82,99,70,.08) .65px,transparent .65px);background-size:7px 7px}
.intro:after{content:"✦";right:1vw;bottom:-6vw;font-family:Georgia,serif;font-weight:400;color:#e4c875;opacity:.72}
.jump,.role,.marker,.continuing,.answer{background:#e0b455}
.sticker{background:#c87858;border-radius:46% 54% 51% 49% / 55% 44% 56% 45%}
.reading{background:#d9c56e}
.work-row:hover{background:#ead3a3}
.origin img{box-shadow:8px 8px 0 #a8573f}
.research-band{background:#6a724d}
.story blockquote{border-left-color:#b65f43}
.marker{transform:rotate(-.6deg);border-radius:2px 13px 3px 9px}
.five{color:#a8573f}
.final-map img{box-shadow:10px 10px 0 #c47a59}
.arrow{color:#a8573f}
.continuing>span{background:#c87858}
.mini h2 span{color:#8f4f39}
.mini-punch{border-left-color:#8f4f39}
.mini-images img:first-child{box-shadow:7px 7px 0 #8f4f39}
.mini-images img:last-child{box-shadow:7px 7px 0 #d0a444}
.blue-card{background:#7b593f;color:#fff7e9;box-shadow:10px 10px 0 #d1a044}
.about{background:#48533d}
.about h2 span{color:#e2b650}
.three-things{color:#d88762}
.answer{background:#e4c36d}
.portrait img,.personal-strip img,.origin img,.mini-images img,.about img{filter:saturate(.88) contrast(.98)}
::selection{background:#d7a34c;color:#33251f}

/* v5 — saturated eclectic palette: plum / raspberry / butter / sage / lavender */
:root{--cream:#fff7e8;--ink:#34203b;--blue:#9d2f67;--acid:#f5cf4a;--green:#8ea77b;--pink:#ee6f9f;--line:#34203b}
body{background-color:var(--cream);background-image:radial-gradient(rgba(91,58,101,.055) .7px,transparent .7px);background-size:8px 8px}
header{background:rgba(255,247,232,.95);border-color:var(--ink)}
.intro:after{content:"✦";color:#b79ad7;opacity:.78}
.intro h1 span{color:#a22d69}
.jump{background:#f5cf4a;box-shadow:5px 5px 0 #34203b}
.sticker{background:#ef79a7;border-radius:43% 57% 56% 44% / 55% 44% 56% 45%;box-shadow:5px 5px 0 #34203b}
.personal-strip{background:#eadff2}
.bigword{color:#7c3f8f}
.reading{background:#f5cf4a}
.work-row:hover{background:#f6dfe9}
.sopp{background:#c9d6b8}
.role{background:#f5cf4a}
.origin img{box-shadow:8px 8px 0 #a22d69}
.research-band{background:#74447f;color:#fff9ec}
.story{border-top-color:#9e8a9d}
.story blockquote{border-left-color:#d74782}
.marker{background:#f5cf4a}
.why{background:#fffaf0}
.five{color:#a22d69}
.final-map img{box-shadow:10px 10px 0 #ef79a7}
.arrow{color:#7c3f8f}
.continuing{background:#f5cf4a}
.continuing>span{background:#ef79a7}
.cocreate{background:#cbb6df}
.mini h2 span{color:#a22d69}
.mini-punch{border-left-color:#d74782}
.mini-images img:first-child{box-shadow:7px 7px 0 #7c3f8f}
.mini-images img:last-child{box-shadow:7px 7px 0 #f5cf4a}
.sivert{background:#f7df76}
.blue-card{background:#a22d69;color:#fff8eb;box-shadow:10px 10px 0 #b9cda6}
.about{background:#50325f;color:#fff7e8}
.about h2 span{color:#f5cf4a}
.three-things{color:#f08aae}
.answer{background:#eadff2}
.portrait img,.personal-strip img,.origin img,.mini-images img,.about img{filter:saturate(.98) contrast(1)}
::selection{background:#ef79a7;color:#34203b}

/* final pass — Soppappen: plum / raspberry / cream, sage only as nature accent */
.sopp{background:#fff3df}
.sopp-head{position:relative}
.sopp-head:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;background:#b9cda6;right:2vw;top:-2vw;z-index:0;opacity:.9}
.sopp-head>*,.sopp-head h2{position:relative;z-index:1}
.sopp .role{background:#ef79a7}
.sopp .role i{color:#fff7e8}
.sopp .origin img{box-shadow:8px 8px 0 #7c3f8f}
.sopp .research-band{background:#74447f;color:#fff9ec}
.sopp .story{border-top-color:#cbb6df}
.sopp .story blockquote{border-left-color:#ef79a7}
.sopp .marker{background:#f5cf4a}
.sopp .why{background:#eadff2}
.sopp .five{color:#a22d69}
.sopp .final-map img{box-shadow:10px 10px 0 #ef79a7}
.sopp .arrow{color:#7c3f8f}
.sopp .continuing{background:#eadff2;box-shadow:8px 8px 0 #34203b}
.sopp .continuing>span{background:#f5cf4a}

/* v6 — final content + responsive polish */
.sticker{display:flex;flex-direction:column;justify-content:center;min-height:145px;padding:26px 30px;line-height:1.5;transform:rotate(-2deg)}
.personal-strip .ulle{transform:rotate(1.5deg)}
.research-band>*{display:flex;align-items:center;font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:800;line-height:1.15;min-width:0}
.research-band b,.research-band span{font-family:inherit;font-size:inherit;font-weight:800;letter-spacing:0}
.final-map .arrow{margin-top:110px}
.mini-images figure{margin:0}
.mini-images figure img{transform:rotate(2deg);box-shadow:7px 7px 0 #7c3f8f}
.sivert-case{margin:0;align-self:center;transform:rotate(1deg)}
.sivert-case img{width:100%;display:block;border:2px solid var(--ink);box-shadow:9px 9px 0 #a22d69}
.site-footer{background:#151515;color:#fff;padding:7vw 6vw 3vw;min-height:72vh;display:grid;grid-template-columns:1fr auto;align-content:space-between;gap:4vw}
.footer-kicker{font-size:clamp(64px,10vw,150px);line-height:.84;letter-spacing:-.07em;margin:0 0 38px;font-weight:500}
.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer-links a{background:#cbb6df;color:#151515;border-radius:999px;padding:12px 22px;text-decoration:none;font-size:20px}
.footer-eyes{font-size:38px;letter-spacing:-8px;padding-right:1vw}
.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;border-top:1px solid #444;padding-top:22px;font-size:13px}
.footer-bottom span{font-family:"Courier New",monospace;color:#aaa;font-size:10px}

@media(max-width:760px){
  header{height:58px;padding:0 18px}.name{font-size:12px}nav{gap:12px;font-size:11px}nav a:first-child{display:inline}
  .intro{display:grid;grid-template-columns:1fr;grid-template-rows:auto;padding:12vw 20px 14vw;gap:28px;min-height:auto}
  .intro h1{font-size:clamp(49px,15vw,74px);line-height:.9;margin:18px 0 24px}.lead{font-size:17px}.jump{margin-top:16px}
  .portrait{width:100%;margin:0;transform:rotate(1deg)}.portrait img{max-height:none;aspect-ratio:4/5;object-fit:cover;object-position:center 20%}
  .sticker{grid-column:1;width:100%;margin:0;min-height:130px;transform:rotate(-1deg)}
  .personal-strip{grid-template-columns:1fr;padding:14vw 20px;gap:30px}.bigword{grid-column:1}.personal-strip figure,.personal-strip .ulle,.personal-strip figure:first-of-type,.personal-strip figure:last-child{transform:none}.personal-strip img{aspect-ratio:4/3;object-fit:cover}.personal-strip .ulle img{object-position:center 40%}
  .work{padding:18vw 20px}.work-row{grid-template-columns:32px 1fr;gap:12px}.work-row>span{grid-column:2}.work-row p{font-size:15px}
  .sopp{padding:16vw 20px}.sopp-head{grid-template-columns:1fr;gap:22px;margin-bottom:18vw}.sopp-head:after{width:72px;height:72px}.sopp h2,.mini h2,.about h2{font-size:clamp(44px,13vw,68px)}
  .origin{grid-template-columns:1fr;gap:30px;margin:16vw 0}.origin p{font-size:25px}
  .research-band{grid-template-columns:1fr;margin:16vw 0}.research-band>*{border-right:0;border-bottom:2px solid var(--ink);padding:17px;font-size:18px;min-height:62px}.research-band>*:last-child{border-bottom:0}
  .story{grid-template-columns:1fr;gap:10px;padding:16vw 0}.story-no{font-size:18px;margin-bottom:4px}.story p{font-size:16px}.story h3{font-size:clamp(39px,12vw,60px)}
  .five{font-size:30vw;align-items:flex-end}.five span{font-size:11px;padding-bottom:12px}
  .final-map{display:grid;grid-template-columns:1fr;margin-top:30px}.final-map img{width:100%}.final-map .arrow{margin-top:8px;font-size:36px;display:flex;align-items:center;gap:10px}.arrow span{font-size:10px}
  .continuing{margin:16vw 0 0;padding:28px 20px}.continuing h3{font-size:42px}
  .mini{grid-template-columns:1fr;padding:18vw 20px;gap:40px}.mini-copy>p{font-size:16px}.mini-images{grid-template-columns:1fr;gap:30px}.mini-images figure,.mini-images img{width:100%}.mini-images figure img{transform:none}.mini-images>img{transform:none!important}.sivert-case{transform:none}
  .about{grid-template-columns:1fr;padding:18vw 20px;gap:38px}.about figure{transform:none}.about .contact{grid-column:1}.contact{flex-direction:column;gap:12px}
  .site-footer{min-height:68vh;padding:18vw 20px 28px;grid-template-columns:1fr}.footer-kicker{font-size:20vw}.footer-eyes{display:none}.footer-links a{font-size:17px}.footer-bottom{grid-column:1;flex-direction:column;align-items:flex-start;gap:8px}
}

/* v7 — final requested polish */
/* Keep the three personal photos visually equal; Ulle no longer reads as a smaller card. */
.personal-strip{grid-template-columns:.8fr repeat(3,minmax(0,.72fr));align-items:start}
.personal-strip figure{width:100%}
.personal-strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
.personal-strip .ulle img{object-position:center 40%}

/* Project metadata should read consistently across all three cases. */
.sopp-head .tiny,.mini-copy>.tiny{font-size:11px;line-height:1.2}

/* Footer uses the portfolio palette rather than black. */
.site-footer{background:#50325f;color:#fff7e8}
.footer-links a{background:#f5cf4a;color:#34203b}
.footer-bottom{border-top-color:#cbb6df}
.footer-bottom span{color:#eadff2}

@media(max-width:760px){
  .personal-strip{grid-template-columns:1fr}
  .personal-strip img{aspect-ratio:4/3;object-fit:cover}
}


/* v8 — final micro-polish */
.site-footer{border-top:1px solid #fff7e8}
.personal-strip{grid-template-columns:.8fr repeat(3,minmax(0,1fr));align-items:start}
.personal-strip figure{width:100%;margin:0}
.personal-strip img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block}
.personal-strip .ulle img{transform:scale(1.08);transform-origin:center center}
@media(max-width:760px){
  .personal-strip{grid-template-columns:1fr}
  .personal-strip img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
  .personal-strip .ulle img{transform:none}
}

/* v9 — vertically center Ulle against the two neighboring photos */
.personal-strip .ulle{align-self:center}
@media(max-width:760px){
  .personal-strip .ulle{align-self:auto}
}

/* v10 — requested final polish */
/* Remove decorative sage circle from Soppappen header. */
.sopp-head:after{display:none}

/* Give the role separators a palette accent, without introducing yellow. */
.sopp .role i{color:#cbb6df}

/* Research hierarchy: process line above, three equal evidence cells below. */
.research-wrap{margin:7vw 0}
.research-kicker{margin:0 0 10px;font-family:"Courier New",monospace;font-size:11px;font-weight:700;letter-spacing:.03em}
.research-wrap .research-band{margin:0;grid-template-columns:repeat(3,1fr)}

/* Same tag language as Sivert. */
.sopp-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.sopp-tags span{border:2px solid var(--ink);padding:8px 10px;font-family:"Courier New",monospace;font-size:11px;background:#fff7e8}

/* Softer sage decision panels. */
.sopp .why{background:#b9cda6;color:var(--ink)}

/* Co-Create second image now has its own caption. */
.mini-images .test-cards{margin:0}
.mini-images .test-cards img{transform:rotate(-2deg);box-shadow:7px 7px 0 #f5cf4a}

/* Footer continues the section-by-section palette rhythm. */
.site-footer{background:#d74782;color:#fff7e8}
.footer-links a{background:#f5cf4a;color:#34203b}
.footer-bottom{border-top-color:#fff7e8}
.footer-bottom span{color:#fff7e8}

@media(max-width:760px){
  /* Keep all nav items on one clean baseline. */
  header{align-items:center}
  nav{align-items:center;line-height:1;white-space:nowrap}
  nav a{display:inline-flex;align-items:center;line-height:1}

  /* Center the sticker copy and make the decorative diamond feel intentional. */
  .sticker{align-items:center;text-align:center;padding:26px 24px;min-height:130px}
  .intro:after{right:5vw;bottom:-2vw;font-size:31vw;opacity:.72}

  /* Caption belongs to the mushroom-team photo on mobile. */
  .origin{display:flex;flex-direction:column;align-items:stretch}
  .origin img{order:1}
  .origin>div{display:contents}
  .origin .caption{order:2;margin-top:-18px;margin-bottom:18px}
  .origin .caption::first-letter{font-size:0}
  .origin p{order:3}

  .research-wrap{margin:16vw 0}
  .research-kicker{font-size:11px;margin-bottom:10px}
  .research-wrap .research-band{grid-template-columns:1fr}

  /* Visually center the 5/5 explanation rather than pinning it to the baseline. */
  .five{align-items:center}
  .five span{padding-bottom:0}

  /* Arrow/caption sits immediately under the map and points back toward it. */
  .final-map .arrow{margin-top:8px;justify-content:flex-start;line-height:1}
  .credit{margin-top:18px}

  /* Co-Create figures stack consistently and retain captions. */
  .mini-images .test-cards{width:100%}
  .mini-images .test-cards img{transform:none}

  /* Give Sivert's case image breathing room from both screen edges. */
  .sivert-case{width:calc(100% - 24px);margin:0 auto}
}


/* v10.1 — spacing and mobile alignment refinements */
@media(max-width:760px){
  /* Keep the origin story visually connected instead of splitting it into islands. */
  .origin{gap:0;margin:12vw 0 9vw}
  .origin .caption{margin:8px 0 22px;display:block}
  .origin p{margin:0 0 14px}
  .origin p:last-of-type{margin-bottom:0}

  /* This is a real subheading for the evidence block, not a tiny annotation. */
  .research-wrap{margin:9vw 0 14vw}
  .research-kicker{font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.25;font-weight:800;letter-spacing:-.01em;margin:0 0 12px}

  /* Text-symbol arrow directly under the map, pointing straight back to it. */
  .final-map{gap:0}
  .final-map .arrow{margin:8px 0 0;display:flex;align-items:center;gap:10px;font-family:Arial,Helvetica,sans-serif;font-size:38px;line-height:1}
  .final-map .arrow span{line-height:1.25}

  /* Keep the role note and continuation card in the same visual thought. */
  .map-story{padding-bottom:8vw}
  .credit{margin-bottom:0}
  .continuing{margin-top:7vw}

  /* Optical centering for the tall Sivert screenshot. */
  .sivert-case{width:calc(100% - 44px);margin-left:14px;margin-right:30px}
}


/* v10.2 — final mobile hierarchy refinements */
.case-role{display:inline-block;margin-top:22px;background:#ef79a7;border:2px solid var(--ink);padding:10px 14px;font-weight:800;box-shadow:4px 4px 0 var(--ink)}
.case-role i{font-style:normal;color:#cbb6df;padding:0 3px}
.sivert .case-role{background:#cbb6df}
.sivert .case-role i{color:#a22d69}
@media(max-width:760px){
  /* More breathing room below the sticky navigation, mobile only. */
  .intro{padding-top:18vw}
  /* The decorative hero diamond is desktop-only. */
  .intro:after{display:none}
  /* Compact black text-symbol arrow below the probability map. */
  .final-map .arrow{font-size:18px;color:var(--ink);gap:8px;margin-top:8px;font-weight:700}
  .final-map .arrow span{color:var(--ink);font-size:10px}
  /* Center the Sivert prototype optically with equal side margins. */
  .sivert-case{width:calc(100% - 48px);margin-left:auto;margin-right:auto}
}


/* v10.3 — final alignment, spacing and favicon pass */
/* Keep all navigation labels on exactly the same typographic baseline. */
nav{align-items:baseline}
nav a{display:inline-flex;align-items:baseline;line-height:1}
.nav-arrow{font-family:Arial,Helvetica,sans-serif;font-size:.95em;line-height:1;margin-left:2px;vertical-align:baseline}

/* The evidence cells speak for themselves without an extra process heading. */
.research-wrap{margin:7vw 0}

/* Roles belong directly to the project heading, before the case narrative. */
.mini-copy .case-role{margin:10px 0 22px}
.sivert .sivert-tags{margin-top:0;margin-bottom:28px}

/* Give captions enough separation from image borders on desktop. */
.mini-images figcaption{margin-top:13px;line-height:1.45}

/* Bring the end-of-case continuation card closer to the role credit on desktop. */
.map-story{padding-bottom:3.5vw}
.continuing{margin-top:3.5vw}

/* Vertically balance the About portrait against its copy. */
.about figure{align-self:center}

@media(max-width:760px){
  /* A little more breathing room between map and its annotation. */
  .final-map .arrow{margin-top:16px}
  /* Preserve the tighter case ending on mobile too. */
  .map-story{padding-bottom:7vw}
  .continuing{margin-top:5vw}
  /* Role and supporting tags stay directly below each mini-case heading. */
  .mini-copy .case-role{margin:8px 0 20px}
  .sivert .sivert-tags{margin:0 0 24px}
}

/* v10.4 — final proportion, evidence-label and punctuation polish */
/* Lower the desktop hero copy slightly so its visual weight balances the portrait/sticker composition. */
@media(min-width:761px){
  .intro-copy{padding-top:3vw}
}

/* Research process label uses the same small editorial language as story labels such as PROBLEMET. */
.research-kicker{margin:0 0 12px;font-family:"Courier New",monospace;font-size:11px;font-weight:700;letter-spacing:.06em;line-height:1.2;text-transform:uppercase}

/* On desktop, align the 5/5 annotation with the lower edge of the large figure. */
@media(min-width:761px){
  .five{align-items:flex-end}
  .five span{padding-bottom:18px}
}

/* Keep the role credit and continuation card as one compact ending to the Soppappen case. */
@media(min-width:761px){
  .map-story{padding-bottom:1.5vw}
  .continuing{margin-top:1vw}
}

@media(max-width:760px){
  .research-kicker{margin:0 0 10px;font-size:11px;letter-spacing:.06em;line-height:1.2}
  .five{align-items:center}
  .five span{padding-bottom:0}
}

/* v10.5 — annotation, typography and section-balance polish */
/* Match the probability-map annotation arrow to the simple text-symbol language used in navigation. */
.final-map .arrow{color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-weight:400}
.final-map .arrow span{font-family:"Courier New",monospace;font-weight:700}
@media(min-width:761px){
  .final-map{align-items:center}
  .final-map .arrow{margin-top:0;display:flex;align-items:center;gap:10px;font-size:0}
  .final-map .arrow::before{content:"←";font-size:28px;line-height:1;color:var(--ink)}
  /* Lift the annotation so its second line visually meets the bottom edge of 5/5. */
  .five span{padding-bottom:30px}
  /* Center the section label optically within the desktop Utenom skjermen composition. */
  .personal-strip .bigword{text-align:center;justify-self:center}
}
@media(max-width:760px){
  .final-map .arrow{font-size:0;margin-top:16px;display:flex;align-items:center;gap:8px}
  .final-map .arrow::before{content:"↑";font-size:22px;line-height:1;color:var(--ink)}
}
/* Let the research label read like a caption rather than a competing headline. */
.research-kicker{font-family:"Courier New",monospace;font-size:10px;font-weight:400;letter-spacing:0;line-height:1.4;text-transform:none}

/* v10.6 — personal-strip label + Sivert caption spacing */
@media(min-width:761px){
  /* Keep the heading left-aligned, but center the whole text block vertically against the image row. */
  .personal-strip .bigword{text-align:left;justify-self:start;align-self:center}
  /* Give the Sivert prototype caption a little more breathing room from the image. */
  .sivert-case figcaption{margin-top:14px}
}
@media(max-width:760px){
  .sivert-case figcaption{margin-top:12px}
}

/* v10.7 — final desktop composition alignment */
@media(min-width:761px){
  /* Bring the pink editorial sticker into the same visual band as the CTA without forcing a rigid baseline. */
  .sticker{position:relative;top:-5vw}

  /* Keep Utenom skjermen anchored at the top of the image composition, as in the earlier layout. */
  .personal-strip .bigword{align-self:start;text-align:left;justify-self:start}

  /* Align the Soppappen mark with the start of the main case heading rather than centering it against the whole header block. */
  .sopp-head{align-items:start}
  .sopp-head .logo{align-self:start;margin-top:39px}
}