/* Our Experience: every case is told as a change. One photograph per case, split by a divider the reader can drag,
   the challenge on the dimmed side and what changed in full colour. Cream, forest and one gold, as everywhere. */
.exp-page{--ex-g:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));--ex-gold:#d6b25e;--swing:cubic-bezier(.65,0,.15,1)}
.ex-open{padding-block:clamp(56px,8vw,120px) 0}
.ex-open .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26ch);column-gap:40px;align-items:end}
.ex-open h1{margin:0;font:400 clamp(64px,9vw,150px)/.9 var(--serif);letter-spacing:-.045em;color:var(--ink)}
.ex-thesis{margin:0;font:italic 400 clamp(21px,1.7vw,27px)/1.35 var(--serif);color:var(--ink)}
.ex-contents{grid-column:1/-1;list-style:none;margin:clamp(56px,7vw,100px) 0 0;padding:0;border-top:1px solid var(--ink)}
.ex-contents li{border-bottom:1px solid var(--rule)}
.ex-contents a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:24px;padding:22px 0;color:var(--ink);text-decoration:none}
.ex-contents-title{font:400 clamp(26px,2.6vw,40px)/1.1 var(--serif);letter-spacing:-.02em;transition:translate .6s var(--ease)}
.ex-contents-place{font:italic 400 clamp(17px,1.3vw,20px)/1.2 var(--serif);color:var(--muted)}
@media(hover:hover){.ex-contents a:hover .ex-contents-title{translate:clamp(10px,1.2vw,18px) 0}}

.ex-case{scroll-margin-top:84px;padding-top:clamp(80px,10vw,150px)}
.ex-case:last-of-type{padding-bottom:clamp(80px,10vw,150px)}
.ex-case-head{display:grid;gap:14px;margin-bottom:clamp(28px,3.4vw,48px)}
.ex-case-head p{margin:0;font:italic 400 clamp(19px,1.5vw,23px)/1.2 var(--serif);color:var(--muted)}
.ex-case-head h2{margin:0;max-width:18ch;font:400 clamp(44px,5.6vw,96px)/.95 var(--serif);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}

/* The change: one photograph, two states, a divider between them */
.ex-change{--split:50%;position:relative;height:clamp(600px,88svh,940px);overflow:hidden;background:#14271a;color:#faf7ef;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ex-before,.ex-after{position:absolute;inset:0}
.ex-change img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ex-before img{filter:grayscale(1) contrast(1.05) brightness(.6)}
.ex-before::after{content:'';position:absolute;inset:0;background:#1f3d26;mix-blend-mode:multiply;opacity:.62}
.ex-after{clip-path:inset(0 0 0 var(--split))}
.ex-after::after{content:'';position:absolute;inset:0;background:radial-gradient(130% 95% at 100% 100%,#0c180fe6 0%,#0c180fb3 34%,#0c180f00 68%)}
.ex-text{position:absolute;z-index:1;max-width:min(40%,30em)}
.ex-text h3,.ex-text p{display:inline;margin:0;font:inherit;letter-spacing:inherit}
.ex-text h3{font-style:italic;color:#faf7efb8}.ex-text{text-shadow:0 1px 20px #0c180f73}
.ex-before .ex-text{top:clamp(28px,4vw,64px);left:var(--ex-g);font:400 clamp(21px,1.75vw,28px)/1.38 var(--serif)}
.ex-after .ex-text{bottom:clamp(28px,4vw,64px);right:var(--ex-g);font:400 clamp(24px,2.2vw,36px)/1.24 var(--serif);letter-spacing:-.01em}
.ex-after .ex-text h3{color:var(--ex-gold)}
.ex-handle{position:absolute;z-index:2;top:0;bottom:0;left:var(--split);width:64px;translate:-50% 0;cursor:ew-resize;touch-action:none;outline:none}
.ex-handle::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;background:#faf7efb8}
.ex-handle span{position:absolute;top:50%;left:50%;width:60px;height:60px;translate:-50% -50%;border-radius:50%;background:var(--ex-gold);box-shadow:0 10px 30px #0a140c59;transition:scale .35s var(--ease)}
.ex-handle span::before,.ex-handle span::after{content:'';position:absolute;top:50%;translate:0 -50%;border-block:6px solid transparent}
.ex-handle span::before{left:14px;border-right:8px solid #14271a}.ex-handle span::after{right:14px;border-left:8px solid #14271a}
.ex-handle:focus-visible span{outline:2px solid #faf7ef;outline-offset:4px}
@media(hover:hover) and (pointer:fine){.ex-change{cursor:ew-resize}.ex-change:hover .ex-handle span{scale:1.08}}
.ex-change.is-dragging .ex-handle span{scale:.92}
.ex-change.is-sweeping .ex-after{transition:clip-path 1.6s var(--swing)}.ex-change.is-sweeping .ex-handle{transition:left 1.6s var(--swing)}

/* How we worked */
.ex-how{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,6vw,110px);padding-top:clamp(40px,5vw,72px)}
.ex-how h3{margin:0;font:italic 400 clamp(32px,3.2vw,48px)/1 var(--serif);color:var(--ink)}
.ex-how-text p{margin:0 0 18px;max-width:40em;font:400 clamp(19px,1.45vw,22px)/1.55 var(--serif);color:var(--muted)}
.ex-how-text p:first-child{font-size:clamp(23px,2vw,30px);line-height:1.35;color:var(--ink)}
.ex-how-text .ex-drew a{color:var(--ink);text-underline-offset:5px}
.ex-link{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font:400 20px var(--serif);color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;transition:text-underline-offset .3s var(--ease)}.ex-link:hover{text-underline-offset:11px}

@media(max-width:900px){.ex-open .wrap{grid-template-columns:1fr;row-gap:24px}.ex-how{grid-template-columns:1fr;row-gap:24px}}
/* Phones: the photograph splits top and bottom instead, sized to the two texts (set by exp.js). */
@media(max-width:759px){
  .ex-contents a{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .ex-change{height:var(--ex-h,780px);cursor:auto}
  .ex-after{clip-path:inset(var(--cut,50%) 0 0 0)}
  .ex-after::after{background:linear-gradient(0deg,#0c180fe6 0%,#0c180fb3 45%,#0c180f00 85%)}
  .ex-text,.ex-before .ex-text,.ex-after .ex-text{left:0;right:0;max-width:none;padding:28px var(--gutter)}
  .ex-before .ex-text{top:0;padding-bottom:44px;font-size:20px}.ex-after .ex-text{bottom:0;padding-top:min(52vw,240px);font-size:24px}
  .ex-handle{display:none}
}
@media(prefers-reduced-motion:reduce){.ex-change.is-sweeping .ex-after,.ex-change.is-sweeping .ex-handle,.ex-contents-title,.ex-handle span{transition:none}}