
Blinds over images
Images, Scroll
NewFree
Scroll inside the preview
The long-read of a travel magazine: as you scroll, every photo changes width. The first arrives full screen and narrows to the text column as it rises, the next does the opposite, and so on. Inside the frame the photo drifts a little and rescales so it is never squashed.
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Six days on the salt road · Far Afield</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz-italic.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- shared filters for the drawn photographs: grain and soft blurs -->
<svg class="defs" width="0" height="0" aria-hidden="true" focusable="false"><filter id="grana" x="0" y="0" width="1" height="1"><feTurbulence type="fractalNoise" baseFrequency=".85" numOctaves="2" seed="4" stitchTiles="stitch"/><feColorMatrix values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1"/></filter><filter id="flou4" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="4"/></filter><filter id="flou12" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur stdDeviation="12"/></filter><filter id="flou30" x="-40%" y="-60%" width="180%" height="220%"><feGaussianBlur stdDeviation="30"/></filter></svg>
<header class="masthead">
<a class="masthead__brand" href="#">Far <em>Afield</em></a>
<nav class="masthead__nav" aria-label="Sections">
<a href="#">Journeys</a>
<a href="#">Field notes</a>
<a href="#">Maps</a>
</nav>
<a class="masthead__join" href="#">Subscribe</a>
</header>
<main>
<article class="story">
<header class="opening">
<p class="opening__kicker">Coastlines</p>
<h1 class="opening__title">
<span class="riga"><span>Six days on</span></span>
<span class="riga"><span><em>the salt road</em></span></span>
</h1>
<p class="opening__dek">From the pans of Saline d’Arda to the last lighthouse on Capo Lume, a slow walk along a coast that still keeps time by the tide.</p>
<p class="opening__byline">
<span>Words by <strong>Ines Marlow</strong></span>
<span>Photographs by <strong>Teo Varga</strong></span>
<span>October 2026</span>
</p>
</header>
<p class="lead">The salt workers of Saline d’Arda start before the light does. By the time I found the path along the first dike, a little after five, three of them were already out on the pans with wooden rakes, drawing the crust into ridges that would be white by noon. Nobody spoke. The only sound was the scrape of the rakes and, somewhere behind the low hills, a dog that had not yet decided whether to bark.</p>
<!-- each figure: a full-width box, a frame clipped by the script, the photo inside it (use an <img> instead of the svg) -->
<figure class="spread">
<div class="spread__box">
<div class="spread__frame">
<div class="spread__photo"><svg class="foto" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Salt pans at dawn, with white mounds of salt along the dikes and the sun low on the horizon"><defs><linearGradient id="p1-sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#a9aac4"/><stop offset="0.45" stop-color="#dcbcc0"/><stop offset="0.82" stop-color="#f3d5bf"/><stop offset="1" stop-color="#fae6cf"/></linearGradient><linearGradient id="p1-wat" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f4dccb"/><stop offset="0.25" stop-color="#e2c3c4"/><stop offset="0.7" stop-color="#b9a6bd"/><stop offset="1" stop-color="#9488a6"/></linearGradient><radialGradient id="p1-sun" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="#fff8ea" stop-opacity="1"/><stop offset="0.18" stop-color="#ffeeda" stop-opacity="0.85"/><stop offset="1" stop-color="#ffe6cc" stop-opacity="0"/></radialGradient><linearGradient id="p1-str" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fff3e2" stop-opacity="0.9"/><stop offset="1" stop-color="#fff3e2" stop-opacity="0"/></linearGradient><linearGradient id="p1-mnd" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#fffaf4"/><stop offset="0.55" stop-color="#f1e3dd"/><stop offset="1" stop-color="#c9b6be"/></linearGradient><radialGradient id="p1-vig" cx="0.5" cy="0.5" r="0.75"><stop offset="0.55" stop-color="#000" stop-opacity="0"/><stop offset="1" stop-color="#1a1410" stop-opacity="0.32"/></radialGradient></defs><rect width="1600" height="562" fill="url(#p1-sky)"/><ellipse cx="980" cy="542" rx="330" ry="190" fill="url(#p1-sun)"/><path d="M-20 562L-20 532Q-20 532 26 529Q71 526 117 531Q162 536 208 534Q253 532 299 534Q344 537 390 538Q436 539 481 539Q527 539 572 534Q618 529 663 533Q709 536 754 532Q800 528 846 530Q891 532 937 534Q982 537 1028 537Q1073 537 1119 532Q1164 526 1210 532Q1256 538 1301 536Q1347 534 1392 533Q1438 532 1483 530Q1529 528 1574 533L1620 537L1620 562Z" fill="#a49dba" opacity=".5"/><path d="M-20 562L-20 544Q-20 544 21 544Q62 544 103 546Q144 548 186 546Q227 543 268 542Q309 541 350 545Q391 549 432 548Q473 548 514 545Q556 543 597 543Q638 543 679 542L720 541L720 562Z" fill="#968aa8" opacity=".55"/><circle cx="980" cy="540" r="22" fill="#fffaf0"/><rect x="-20" y="520" width="1640" height="70" fill="#fff4e8" opacity=".45" filter="url(#flou30)"/><rect y="560" width="1600" height="440" fill="url(#p1-wat)"/><path d="M970 560L990 560L1080 1000L880 1000Z" fill="url(#p1-str)" filter="url(#flou12)" opacity=".75"/><rect x="-20" y="563" width="1640" height="0.6" fill="#8d7c8e" opacity="0.2"/><rect x="-20" y="562" width="1640" height="0.7" fill="#fff1e3" opacity="0.2"/><rect x="-20" y="570" width="1640" height="0.8" fill="#8d7c8e" opacity="0.2"/><rect x="-20" y="570" width="1640" height="0.8" fill="#fff1e3" opacity="0.2"/><rect x="-20" y="583" width="1640" height="1" fill="#8d7c8e" opacity="0.2"/><rect x="-20" y="583" width="1640" height="1" fill="#fff1e3" opacity="0.3"/><rect x="-20" y="602" width="1640" height="1.3" fill="#8d7c8e" opacity="0.3"/><rect x="-20" y="601" width="1640" height="1.1" fill="#fff1e3" opacity="0.3"/><rect x="-20" y="625" width="1640" height="1.6" fill="#8d7c8e" opacity="0.3"/><rect x="-20" y="624" width="1640" height="1.2" fill="#fff1e3" opacity="0.3"/><rect x="-20" y="654" width="1640" height="2.1" fill="#8d7c8e" opacity="0.3"/><rect x="-20" y="652" width="1640" height="1.3" fill="#fff1e3" opacity="0.3"/><rect x="-20" y="688" width="1640" height="2.6" fill="#8d7c8e" opacity="0.3"/><rect x="-20" y="686" width="1640" height="1.5" fill="#fff1e3" opacity="0.4"/><rect x="-20" y="727" width="1640" height="3.3" fill="#8d7c8e" opacity="0.3"/><rect x="-20" y="725" width="1640" height="1.6" fill="#fff1e3" opacity="0.4"/><rect x="-20" y="771" width="1640" height="4" fill="#8d7c8e" opacity="0.4"/><rect x="-20" y="769" width="1640" height="1.7" fill="#fff1e3" opacity="0.4"/><rect x="-20" y="820" width="1640" height="4.7" fill="#8d7c8e" opacity="0.4"/><rect x="-20" y="819" width="1640" height="1.8" fill="#fff1e3" opacity="0.4"/><rect x="-20" y="875" width="1640" height="5.6" fill="#8d7c8e" opacity="0.4"/><rect x="-20" y="873" width="1640" height="2" fill="#fff1e3" opacity="0.5"/><rect x="-20" y="935" width="1640" height="6.6" fill="#8d7c8e" opacity="0.4"/><rect x="-20" y="933" width="1640" height="2.1" fill="#fff1e3" opacity="0.5"/><path d="M800 560L-2916 1000L-2884 1000L800.5 560Z" fill="#8a7a8c" opacity=".16"/><path d="M800 560L-2176 1000L-2144 1000L800.5 560Z" fill="#8a7a8c" opacity=".16"/><path d="M800 560L-1436 1000L-1404 1000L800.5 560Z" fill="#8a7a8c" opacity=".16"/><path d="M800 560L-696 1000L-664 1000L800.5 560Z" fill="#8a7a8c" opacity=".16"/><path d="M800 560L44 1000L76 1000L800.5 560Z" fill="#8a7a8c" opacity=".16"/><path d="M800 560L784 1000L816 1000L800.5 560Z" fill="#8a7a8c" opacity=".16"/><path d="M800 560L1524 1000L1556 1000L800.5 560Z" fill="#8a7a8c" opacity=".16"/><path d="M800 560L2264 1000L2296 1000L800.5 560Z" fill="#8a7a8c" opacity=".16"/><path d="M800 560L3004 1000L3036 1000L800.5 560Z" fill="#8a7a8c" opacity=".16"/><path d="M800 560L3744 1000L3776 1000L800.5 560Z" fill="#8a7a8c" opacity=".16"/><path d="M800 560L4484 1000L4516 1000L800.5 560Z" fill="#8a7a8c" opacity=".16"/><path d="M236 599Q245 590 250 590Q256 590 264 599Z" fill="url(#p1-mnd)"/><path d="M236 600Q250 607 264 600Z" fill="#f6e8e2" opacity=".28"/><path d="M272 599Q280 591 284 591Q289 591 297 599Z" fill="url(#p1-mnd)"/><path d="M272 600Q284 606 297 600Z" fill="#f6e8e2" opacity=".28"/><path d="M307 599Q314 592 318 592Q322 592 329 599Z" fill="url(#p1-mnd)"/><path d="M307 600Q318 605 329 600Z" fill="#f6e8e2" opacity=".28"/><path d="M342 599Q350 591 355 591Q360 591 367 599Z" fill="url(#p1-mnd)"/><path d="M342 600Q355 606 367 600Z" fill="#f6e8e2" opacity=".28"/><path d="M380 599Q388 591 392 592Q397 592 404 599Z" fill="url(#p1-mnd)"/><path d="M380 600Q392 606 404 600Z" fill="#f6e8e2" opacity=".28"/><path d="M415 599Q423 591 427 591Q432 592 439 599Z" fill="url(#p1-mnd)"/><path d="M415 600Q427 606 439 600Z" fill="#f6e8e2" opacity=".28"/><path d="M453 599Q461 591 465 592Q469 592 476 599Z" fill="url(#p1-mnd)"/><path d="M453 600Q465 605 476 600Z" fill="#f6e8e2" opacity=".28"/><path d="M483 599Q492 590 496 591Q502 591 510 599Z" fill="url(#p1-mnd)"/><path d="M483 600Q496 606 510 600Z" fill="#f6e8e2" opacity=".28"/><path d="M521 599Q528 592 532 592Q537 592 544 599Z" fill="url(#p1-mnd)"/><path d="M521 600Q532 605 544 600Z" fill="#f6e8e2" opacity=".28"/><path d="M554 599Q562 591 566 591Q571 592 578 599Z" fill="url(#p1-mnd)"/><path d="M554 600Q566 606 578 600Z" fill="#f6e8e2" opacity=".28"/><path d="M591 599Q600 590 605 590Q610 591 618 599Z" fill="url(#p1-mnd)"/><path d="M591 600Q605 607 618 600Z" fill="#f6e8e2" opacity=".28"/><path d="M628 599Q636 591 641 591Q646 591 653 599Z" fill="url(#p1-mnd)"/><path d="M628 600Q641 606 653 600Z" fill="#f6e8e2" opacity=".28"/><path d="M666 599Q674 591 679 591Q684 591 692 599Z" fill="url(#p1-mnd)"/><path d="M666 600Q679 606 692 600Z" fill="#f6e8e2" opacity=".28"/><path d="M96 652Q112 636 120 637Q130 637 144 652Z" fill="url(#p1-mnd)"/><path d="M96 653Q120 666 144 653Z" fill="#f6e8e2" opacity=".28"/><path d="M166 652Q180 638 188 638Q197 639 210 652Z" fill="url(#p1-mnd)"/><path d="M166 653Q188 664 210 653Z" fill="#f6e8e2" opacity=".28"/><path d="M238 652Q253 636 262 637Q271 637 286 652Z" fill="url(#p1-mnd)"/><path d="M238 653Q262 666 286 653Z" fill="#f6e8e2" opacity=".28"/><path d="M305 652Q320 637 328 638Q337 638 351 652Z" fill="url(#p1-mnd)"/><path d="M305 653Q328 665 351 653Z" fill="#f6e8e2" opacity=".28"/><path d="M362 652Q379 635 389 635Q399 636 416 652Z" fill="url(#p1-mnd)"/><path d="M362 653Q389 667 416 653Z" fill="#f6e8e2" opacity=".28"/><path d="M432 652Q448 636 457 636Q467 637 482 652Z" fill="url(#p1-mnd)"/><path d="M432 653Q457 666 482 653Z" fill="#f6e8e2" opacity=".28"/><path d="M492 652Q509 635 518 636Q528 636 544 652Z" fill="url(#p1-mnd)"/><path d="M492 653Q518 666 544 653Z" fill="#f6e8e2" opacity=".28"/><path d="M560 652Q578 634 588 635Q599 635 616 652Z" fill="url(#p1-mnd)"/><path d="M560 653Q588 668 616 653Z" fill="#f6e8e2" opacity=".28"/><path d="M637 652Q654 635 663 636Q673 636 689 652Z" fill="url(#p1-mnd)"/><path d="M637 653Q663 667 689 653Z" fill="#f6e8e2" opacity=".28"/><path d="M707 652Q723 635 732 636Q743 636 758 652Z" fill="url(#p1-mnd)"/><path d="M707 653Q732 667 758 653Z" fill="#f6e8e2" opacity=".28"/><path d="M-107 767Q-77 737 -60 738Q-41 739 -13 767Z" fill="url(#p1-mnd)"/><path d="M-107 768Q-60 794 -13 768Z" fill="#f6e8e2" opacity=".28"/><path d="M29 767Q64 732 83 734Q105 734 138 767Z" fill="url(#p1-mnd)"/><path d="M29 768Q83 798 138 768Z" fill="#f6e8e2" opacity=".28"/><path d="M183 767Q219 731 239 733Q261 734 294 767Z" fill="url(#p1-mnd)"/><path d="M183 768Q239 798 294 768Z" fill="#f6e8e2" opacity=".28"/><path d="M317 767Q348 736 365 738Q384 738 412 767Z" fill="url(#p1-mnd)"/><path d="M317 768Q365 794 412 768Z" fill="#f6e8e2" opacity=".28"/><path d="M449 767Q487 729 508 731Q532 732 567 767Z" fill="url(#p1-mnd)"/><path d="M449 768Q508 800 567 768Z" fill="#f6e8e2" opacity=".28"/><rect x="410" y="538" width="26" height="20" fill="#8b7f99" opacity=".7"/><path d="M406 538L423 527L440 538Z" fill="#8b7f99" opacity=".7"/><rect y="554" width="1600" height="30" fill="#fff6ec" opacity=".35" filter="url(#flou12)"/><rect width="1600" height="1000" fill="url(#p1-vig)"/><rect width="1600" height="1000" filter="url(#grana)" class="grana"/></svg></div>
</div>
</div>
<figcaption class="spread__caption">
<span class="spread__rule"></span>
<span class="spread__place"><span>Saline d’Arda, a quarter past six</span></span>
<span class="spread__credit"><span>Photograph: Teo Varga</span></span>
</figcaption>
</figure>
<p>The coast road that gives this walk its name was built for salt, not for people. For four centuries carts carried it north along the cliffs to the market towns, and the old route still survives in pieces: a stretch of cobbles here, a stone marker there, a bridge that now crosses nothing at all. The plan was simple. Walk it end to end, sleep wherever the evening found us, and let the tide set the pace.</p>
<p>On the second morning the fog came in off the sea and did not leave. It erased the headlands one by one, first the far ones, then the near, until the path was a pale thread running into white. Walking inside a cloud does strange things to distance. A cliff that looked an hour away was suddenly under our feet; a farmhouse we had been aiming at for half the morning never came any closer.</p>
<figure class="spread">
<div class="spread__box">
<div class="spread__frame">
<div class="spread__photo"><svg class="foto" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Headlands fading into the morning fog above a grey sea, with a footpath on the nearest cliff"><defs><linearGradient id="p2-sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#c6cecd"/><stop offset="0.7" stop-color="#dfe2dc"/><stop offset="1" stop-color="#e9e8e0"/></linearGradient><linearGradient id="p2-sea" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#b7c2c1"/><stop offset="0.3" stop-color="#9badae"/><stop offset="1" stop-color="#6c8185"/></linearGradient><linearGradient id="p2-near" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#6f7f61"/><stop offset="0.12" stop-color="#4f5f50"/><stop offset="1" stop-color="#2f3b36"/></linearGradient><linearGradient id="p2-face" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#5d6460"/><stop offset="0.5" stop-color="#474f4c"/><stop offset="1" stop-color="#2c3532"/></linearGradient><radialGradient id="p2-glow" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="#f6f3e9" stop-opacity="0.9"/><stop offset="1" stop-color="#f6f3e9" stop-opacity="0"/></radialGradient><radialGradient id="p2-vig" cx="0.5" cy="0.5" r="0.75"><stop offset="0.55" stop-color="#000" stop-opacity="0"/><stop offset="1" stop-color="#1a1410" stop-opacity="0.32"/></radialGradient></defs><rect width="1600" height="472" fill="url(#p2-sky)"/><ellipse cx="760" cy="300" rx="520" ry="220" fill="url(#p2-glow)"/><rect y="470" width="1600" height="530" fill="url(#p2-sea)"/><ellipse cx="760" cy="540" rx="420" ry="60" fill="#eef0ea" opacity=".45" filter="url(#flou30)"/><rect x="1022" y="488" width="7" height="0.9" fill="#f2f4ef" opacity="0.2"/><rect x="820" y="562" width="13" height="1.2" fill="#f2f4ef" opacity="0.4"/><rect x="1151" y="859" width="25" height="2.3" fill="#f2f4ef" opacity="0.1"/><rect x="1370" y="486" width="8.7" height="0.9" fill="#f2f4ef" opacity="0.1"/><rect x="720" y="798" width="24" height="2.1" fill="#f2f4ef" opacity="0.3"/><rect x="1381" y="984" width="44" height="2.8" fill="#f2f4ef" opacity="0.1"/><rect x="224" y="513" width="12" height="1" fill="#f2f4ef" opacity="0.2"/><rect x="1549" y="583" width="18" height="1.2" fill="#f2f4ef" opacity="0.2"/><rect x="1045" y="911" width="76" height="2.5" fill="#f2f4ef" opacity="0.3"/><rect x="482" y="776" width="29" height="2" fill="#f2f4ef" opacity="0.2"/><rect x="1320" y="912" width="78" height="2.5" fill="#f2f4ef" opacity="0.2"/><rect x="302" y="559" width="20" height="1.1" fill="#f2f4ef" opacity="0.2"/><rect x="1102" y="842" width="31" height="2.2" fill="#f2f4ef" opacity="0.3"/><rect x="938" y="822" width="23" height="2.2" fill="#f2f4ef" opacity="0.2"/><rect x="452" y="805" width="37" height="2.1" fill="#f2f4ef" opacity="0.1"/><rect x="1048" y="476" width="6.5" height="0.8" fill="#f2f4ef" opacity="0.1"/><rect x="1127" y="691" width="41" height="1.6" fill="#f2f4ef" opacity="0.1"/><rect x="886" y="507" width="11" height="0.9" fill="#f2f4ef" opacity="0.2"/><rect x="1190" y="483" width="8" height="0.9" fill="#f2f4ef" opacity="0.3"/><rect x="240" y="774" width="21" height="2" fill="#f2f4ef" opacity="0.2"/><rect x="657" y="725" width="25" height="1.8" fill="#f2f4ef" opacity="0.2"/><rect x="1631" y="528" width="13" height="1" fill="#f2f4ef" opacity="0"/><rect x="147" y="774" width="38" height="2" fill="#f2f4ef" opacity="0.2"/><rect x="1603" y="693" width="35" height="1.7" fill="#f2f4ef" opacity="0.1"/><rect x="65" y="872" width="34" height="2.3" fill="#f2f4ef" opacity="0.2"/><rect x="1139" y="719" width="35" height="1.8" fill="#f2f4ef" opacity="0.2"/><rect x="336" y="704" width="34" height="1.7" fill="#f2f4ef" opacity="0.2"/><rect x="1167" y="518" width="14" height="1" fill="#f2f4ef" opacity="0.1"/><rect x="225" y="500" width="11" height="0.9" fill="#f2f4ef" opacity="0.2"/><rect x="-20" y="482" width="7" height="0.8" fill="#f2f4ef" opacity="0.2"/><rect x="943" y="676" width="22" height="1.6" fill="#f2f4ef" opacity="0.3"/><rect x="857" y="500" width="8.3" height="0.9" fill="#f2f4ef" opacity="0.1"/><rect x="971" y="643" width="25" height="1.5" fill="#f2f4ef" opacity="0.2"/><rect x="1017" y="477" width="6.4" height="0.8" fill="#f2f4ef" opacity="0.2"/><rect x="157" y="645" width="25" height="1.5" fill="#f2f4ef" opacity="0.2"/><rect x="1285" y="926" width="41" height="2.6" fill="#f2f4ef" opacity="0.2"/><rect x="735" y="578" width="15" height="1.2" fill="#f2f4ef" opacity="0.3"/><rect x="166" y="668" width="20" height="1.6" fill="#f2f4ef" opacity="0.1"/><rect x="1174" y="858" width="38" height="2.3" fill="#f2f4ef" opacity="0.2"/><rect x="1021" y="817" width="28" height="2.1" fill="#f2f4ef" opacity="0.3"/><rect x="152" y="745" width="52" height="1.9" fill="#f2f4ef" opacity="0.2"/><rect x="1316" y="505" width="11" height="0.9" fill="#f2f4ef" opacity="0.1"/><rect x="1080" y="665" width="30" height="1.5" fill="#f2f4ef" opacity="0.3"/><rect x="129" y="547" width="9.8" height="1.1" fill="#f2f4ef" opacity="0.2"/><rect x="279" y="764" width="54" height="1.9" fill="#f2f4ef" opacity="0.1"/><rect x="175" y="884" width="39" height="2.4" fill="#f2f4ef" opacity="0.1"/><rect x="1478" y="702" width="18" height="1.7" fill="#f2f4ef" opacity="0.1"/><rect x="79" y="944" width="51" height="2.6" fill="#f2f4ef" opacity="0.1"/><rect x="203" y="894" width="58" height="2.4" fill="#f2f4ef" opacity="0.2"/><rect x="631" y="620" width="19" height="1.4" fill="#f2f4ef" opacity="0.3"/><rect x="607" y="570" width="17" height="1.2" fill="#f2f4ef" opacity="0.3"/><rect x="1404" y="626" width="20" height="1.4" fill="#f2f4ef" opacity="0.1"/><rect x="1346" y="691" width="20" height="1.6" fill="#f2f4ef" opacity="0.1"/><rect x="578" y="958" width="40" height="2.7" fill="#f2f4ef" opacity="0.1"/><rect x="1055" y="960" width="52" height="2.7" fill="#f2f4ef" opacity="0.2"/><rect x="1449" y="950" width="41" height="2.6" fill="#f2f4ef" opacity="0.1"/><rect x="487" y="481" width="7.1" height="0.8" fill="#f2f4ef" opacity="0.1"/><rect x="841" y="477" width="6.5" height="0.8" fill="#f2f4ef" opacity="0.3"/><rect x="1305" y="948" width="40" height="2.6" fill="#f2f4ef" opacity="0.2"/><rect x="1433" y="604" width="20" height="1.3" fill="#f2f4ef" opacity="0.2"/><rect x="258" y="790" width="30" height="2" fill="#f2f4ef" opacity="0.2"/><rect x="127" y="711" width="34" height="1.7" fill="#f2f4ef" opacity="0.1"/><rect x="372" y="645" width="26" height="1.5" fill="#f2f4ef" opacity="0.2"/><rect x="872" y="657" width="28" height="1.5" fill="#f2f4ef" opacity="0.4"/><rect x="2.5" y="817" width="60" height="2.1" fill="#f2f4ef" opacity="0.1"/><rect x="814" y="546" width="13" height="1.1" fill="#f2f4ef" opacity="0.1"/><rect x="797" y="678" width="36" height="1.6" fill="#f2f4ef" opacity="0.2"/><rect x="-28" y="727" width="31" height="1.8" fill="#f2f4ef" opacity="0.1"/><rect x="763" y="600" width="14" height="1.3" fill="#f2f4ef" opacity="0.2"/><rect x="1231" y="498" width="11" height="0.9" fill="#f2f4ef" opacity="0.1"/><rect x="185" y="656" width="33" height="1.5" fill="#f2f4ef" opacity="0.2"/><rect x="1441" y="690" width="24" height="1.6" fill="#f2f4ef" opacity="0.1"/><rect x="352" y="543" width="10" height="1.1" fill="#f2f4ef" opacity="0.3"/><rect x="524" y="684" width="30" height="1.6" fill="#f2f4ef" opacity="0.3"/><rect x="878" y="745" width="43" height="1.9" fill="#f2f4ef" opacity="0.2"/><rect x="37" y="478" width="6.9" height="0.8" fill="#f2f4ef" opacity="0.1"/><rect x="309" y="802" width="27" height="2.1" fill="#f2f4ef" opacity="0.2"/><rect x="428" y="481" width="7.5" height="0.8" fill="#f2f4ef" opacity="0.3"/><rect x="1090" y="565" width="13" height="1.2" fill="#f2f4ef" opacity="0.2"/><rect x="120" y="551" width="19" height="1.1" fill="#f2f4ef" opacity="0.1"/><rect x="953" y="737" width="51" height="1.8" fill="#f2f4ef" opacity="0.1"/><rect x="808" y="948" width="35" height="2.6" fill="#f2f4ef" opacity="0.2"/><rect x="518" y="589" width="14" height="1.3" fill="#f2f4ef" opacity="0.3"/><rect x="1603" y="686" width="34" height="1.6" fill="#f2f4ef" opacity="0.2"/><rect x="1137" y="493" width="8" height="0.9" fill="#f2f4ef" opacity="0.3"/><rect x="1239" y="561" width="15" height="1.1" fill="#f2f4ef" opacity="0.1"/><rect x="1153" y="524" width="10" height="1" fill="#f2f4ef" opacity="0.2"/><rect x="269" y="879" width="49" height="2.4" fill="#f2f4ef" opacity="0.2"/><rect x="798" y="543" width="15" height="1.1" fill="#f2f4ef" opacity="0.3"/><rect x="275" y="822" width="54" height="2.2" fill="#f2f4ef" opacity="0.2"/><path d="M1080 471L1110 444Q1190 422 1300 430L1360 462L1380 471Z" fill="#b8c1bf"/><path d="M-20 471L-20 350Q160 320 380 338Q560 350 700 378L760 430L780 471Z" fill="#a3b0ad"/><rect x="-40" y="400" width="1700" height="90" fill="#e6e8e1" opacity=".55" filter="url(#flou30)"/><path d="M-20 500L-20 260Q200 220 470 242Q700 256 860 292L900 350L930 500Z" fill="#83938f"/><path d="M860 292L900 350L930 500L880 500L846 320Z" fill="#6e7f7b"/><rect x="-40" y="450" width="1700" height="120" fill="#e3e6df" opacity=".6" filter="url(#flou30)"/><path d="M-20 1010L-20 520Q240 470 520 500Q760 528 980 590Q1110 628 1180 690L1180 1010Z" fill="url(#p2-near)"/><path d="M1180 690Q1190 760 1230 820Q1260 900 1250 1010L1150 1010Q1160 900 1120 820Q1110 720 1090 650Z" fill="url(#p2-face)"/><path d="M1155 942l1.7 44" stroke="#262e2b" stroke-width="1.6" opacity=".5"/><path d="M1184 779l1.7 54" stroke="#262e2b" stroke-width="2.3" opacity=".5"/><path d="M1218 824l-7.3 33" stroke="#262e2b" stroke-width="1.1" opacity=".5"/><path d="M1132 801l0.7 26" stroke="#262e2b" stroke-width="2.9" opacity=".5"/><path d="M1207 821l-3.5 36" stroke="#262e2b" stroke-width="2.7" opacity=".5"/><path d="M1159 954l-7.7 51" stroke="#262e2b" stroke-width="1.4" opacity=".5"/><path d="M1140 785l-1.9 40" stroke="#262e2b" stroke-width="2.9" opacity=".5"/><path d="M1170 975l-1.4 21" stroke="#262e2b" stroke-width="2.4" opacity=".5"/><path d="M1223 844l6.9 45" stroke="#262e2b" stroke-width="2.9" opacity=".5"/><path d="M1225 847l7.1 25" stroke="#262e2b" stroke-width="1.4" opacity=".5"/><path d="M1175 872l-4.4 37" stroke="#262e2b" stroke-width="2.3" opacity=".5"/><path d="M1216 971l-3.9 53" stroke="#262e2b" stroke-width="2" opacity=".5"/><path d="M1177 728l6.5 29" stroke="#262e2b" stroke-width="2.5" opacity=".5"/><path d="M1215 885l-1.4 59" stroke="#262e2b" stroke-width="2.4" opacity=".5"/><path d="M1140 935l-7.7 31" stroke="#262e2b" stroke-width="1.9" opacity=".5"/><path d="M1118 946l-4.6 31" stroke="#262e2b" stroke-width="2.9" opacity=".5"/><path d="M-20 525Q240 476 520 506Q760 533 980 595Q1110 632 1180 692" fill="none" stroke="#9aa77c" stroke-width="5" opacity=".7" filter="url(#flou4)"/><path d="M260 1010Q420 820 600 700Q760 610 1000 612" fill="none" stroke="#b8b49a" stroke-width="7" opacity=".55" filter="url(#flou4)"/><path d="M262 1010Q424 822 602 702Q760 614 1000 614" fill="none" stroke="#d9d6c4" stroke-width="2" opacity=".5"/><ellipse cx="428" cy="763" rx="125" ry="15" fill="#26302b" opacity=".16" filter="url(#flou12)"/><ellipse cx="281" cy="610" rx="173" ry="17" fill="#26302b" opacity=".16" filter="url(#flou12)"/><ellipse cx="184" cy="865" rx="114" ry="18" fill="#7f8c62" opacity=".16" filter="url(#flou12)"/><ellipse cx="1077" cy="689" rx="74" ry="14" fill="#7f8c62" opacity=".16" filter="url(#flou12)"/><ellipse cx="671" cy="897" rx="175" ry="16" fill="#26302b" opacity=".16" filter="url(#flou12)"/><ellipse cx="818" cy="790" rx="81" ry="40" fill="#7f8c62" opacity=".16" filter="url(#flou12)"/><ellipse cx="961" cy="918" rx="145" ry="39" fill="#26302b" opacity=".16" filter="url(#flou12)"/><ellipse cx="10" cy="782" rx="140" ry="25" fill="#26302b" opacity=".16" filter="url(#flou12)"/><ellipse cx="275" cy="754" rx="117" ry="25" fill="#26302b" opacity=".16" filter="url(#flou12)"/><ellipse cx="108" cy="646" rx="176" ry="31" fill="#7f8c62" opacity=".16" filter="url(#flou12)"/><ellipse cx="913" cy="742" rx="130" ry="14" fill="#7f8c62" opacity=".16" filter="url(#flou12)"/><ellipse cx="443" cy="875" rx="73" ry="31" fill="#26302b" opacity=".16" filter="url(#flou12)"/><ellipse cx="407" cy="816" rx="73" ry="16" fill="#26302b" opacity=".16" filter="url(#flou12)"/><ellipse cx="663" cy="841" rx="104" ry="16" fill="#26302b" opacity=".16" filter="url(#flou12)"/><rect x="-40" y="860" width="1700" height="200" fill="#dfe3dc" opacity=".22" filter="url(#flou30)"/><rect width="1600" height="1000" fill="url(#p2-vig)"/><rect width="1600" height="1000" filter="url(#grana)" class="grana"/></svg></div>
</div>
</div>
<figcaption class="spread__caption">
<span class="spread__rule"></span>
<span class="spread__place"><span>The cliff path above Punta Grisa</span></span>
<span class="spread__credit"><span>Photograph: Teo Varga</span></span>
</figcaption>
</figure>
<p>Morra Alta appears all at once, the way hill towns do: a scatter of white walls on a bare slope, a bell tower at the top, and then nothing else for miles. We arrived as the sun was going down behind us and every house on the hill turned the colour of apricots. The woman who rented us a room above the bakery said the light did that every evening in October, and that we would get used to it. We did not.</p>
<figure class="spread">
<div class="spread__box">
<div class="spread__frame">
<div class="spread__photo"><svg class="foto" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice" role="img" aria-label="A whitewashed hill village with terracotta roofs and a bell tower, lit by the low evening sun"><defs><linearGradient id="p3-sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#bccbd0"/><stop offset="0.5" stop-color="#ecd4ae"/><stop offset="1" stop-color="#f4c48b"/></linearGradient><linearGradient id="p3-hill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#a8945f"/><stop offset="0.6" stop-color="#8a7c4c"/><stop offset="1" stop-color="#5f5a39"/></linearGradient><radialGradient id="p3-sun" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="#fff1d2" stop-opacity="0.95"/><stop offset="1" stop-color="#ffd9a0" stop-opacity="0"/></radialGradient><linearGradient id="p3-warm" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#ff9d4a" stop-opacity="0.28"/><stop offset="0.6" stop-color="#ff9d4a" stop-opacity="0"/></linearGradient><radialGradient id="p3-vig" cx="0.5" cy="0.5" r="0.75"><stop offset="0.55" stop-color="#000" stop-opacity="0"/><stop offset="1" stop-color="#1a1410" stop-opacity="0.32"/></radialGradient></defs><rect width="1600" height="720" fill="url(#p3-sky)"/><ellipse cx="140" cy="520" rx="560" ry="300" fill="url(#p3-sun)"/><path d="M-20 760L-20 504Q-20 504 48 519Q117 533 185 532Q253 532 322 530Q390 529 458 527Q527 524 595 524Q663 524 732 522Q800 520 868 522Q937 524 1005 522Q1073 520 1142 521Q1210 521 1278 518Q1347 514 1415 521Q1483 528 1552 524L1620 519L1620 760Z" fill="#b4aaa4" opacity=".55"/><path d="M-20 760L-20 640Q300 560 560 420Q720 320 820 300Q950 310 1080 410Q1320 560 1620 640L1620 1010L-20 1010Z" fill="url(#p3-hill)"/><path d="M944 333h8.8v22h-8.8Z" fill="#b39478"/><rect x="919" y="333" width="25" height="22" fill="#f6ead6"/><rect x="919" y="331" width="33" height="1.3" fill="#e8d3b0"/><rect x="924" y="340" width="2.4" height="3.6" fill="#6d5443"/><path d="M953 354l9.7 -1.8v-13l-9.7 2.2Z" fill="#6d5a3c" opacity=".35"/><path d="M794 374h7.3v16h-7.3Z" fill="#b39478"/><rect x="768" y="374" width="26" height="16" fill="#efdcb8"/><rect x="768" y="372" width="33" height="1.5" fill="#e8d3b0"/><path d="M801 390l11 -2v-9.7l-11 1.6Z" fill="#6d5a3c" opacity=".35"/><path d="M1066 378h9.3v20h-9.3Z" fill="#b39478"/><rect x="1040" y="378" width="27" height="20" fill="#efdcb8"/><rect x="1040" y="376" width="36" height="1.5" fill="#e8d3b0"/><rect x="1045" y="384" width="2.7" height="4.1" fill="#6d5443"/><path d="M1076 397l11 -2v-12l-11 2Z" fill="#6d5a3c" opacity=".35"/><path d="M887 379h9.7v20h-9.7Z" fill="#b39478"/><rect x="866" y="379" width="21" height="20" fill="#f6ead6"/><path d="M865 379L877 372L897 377L897 380Z" fill="#b8613f"/><rect x="870" y="385" width="2.7" height="4.1" fill="#6d5443"/><rect x="877" y="385" width="2.7" height="4.1" fill="#6d5443"/><path d="M897 398l11 -2v-12l-11 2Z" fill="#6d5a3c" opacity=".35"/><path d="M1041 391h11v19h-11Z" fill="#b39478"/><rect x="1022" y="391" width="19" height="19" fill="#f3e4c8"/><path d="M1020 391L1031 385L1052 390L1052 392Z" fill="#a65739"/><path d="M1052 411l11 -2.1v-12l-11 1.9Z" fill="#6d5a3c" opacity=".35"/><path d="M943 392h7.8v20h-7.8Z" fill="#b39478"/><rect x="916" y="392" width="26" height="20" fill="#efdcb8"/><rect x="916" y="390" width="34" height="1.5" fill="#e8d3b0"/><rect x="922" y="399" width="2.8" height="4.2" fill="#6d5443"/><path d="M950 411l11 -2.1v-12l-11 2Z" fill="#6d5a3c" opacity=".35"/><path d="M658 405h11v23h-11Z" fill="#b39478"/><rect x="639" y="405" width="19" height="23" fill="#f6ead6"/><rect x="639" y="403" width="31" height="1.6" fill="#e8d3b0"/><path d="M670 428l12 -2.2v-14l-12 2.3Z" fill="#6d5a3c" opacity=".35"/><path d="M1062 406h13v27h-13Z" fill="#b39478"/><rect x="1040" y="406" width="22" height="27" fill="#ead0a2"/><path d="M1039 406L1051 400L1075 405L1075 407Z" fill="#a65739"/><rect x="1045" y="416" width="2.9" height="4.4" fill="#6d5443"/><path d="M1075 433l12 -2.2v-16l-12 2.7Z" fill="#6d5a3c" opacity=".35"/><path d="M974 415h10v16h-10Z" fill="#b39478"/><rect x="950" y="415" width="24" height="16" fill="#e6c895"/><rect x="950" y="413" width="35" height="1.6" fill="#e8d3b0"/><path d="M984 431l12 -2.2v-9.9l-12 1.6Z" fill="#6d5a3c" opacity=".35"/><path d="M1046 423h8.8v30h-8.8Z" fill="#b39478"/><rect x="1023" y="423" width="23" height="30" fill="#f6ead6"/><rect x="1023" y="421" width="32" height="1.7" fill="#e8d3b0"/><rect x="1028" y="433" width="3" height="4.5" fill="#6d5443"/><path d="M1055 452l12 -2.3v-18l-12 3Z" fill="#6d5a3c" opacity=".35"/><path d="M1099 445h14v23h-14Z" fill="#b39478"/><rect x="1079" y="445" width="21" height="23" fill="#f3e4c8"/><rect x="1079" y="443" width="34" height="1.7" fill="#e8d3b0"/><rect x="1083" y="452" width="3.2" height="4.7" fill="#6d5443"/><path d="M1113 467l13 -2.4v-14l-13 2.3Z" fill="#6d5a3c" opacity=".35"/><path d="M1071 445h9.9v23h-9.9Z" fill="#b39478"/><rect x="1040" y="445" width="30" height="23" fill="#f6ead6"/><rect x="1040" y="443" width="40" height="1.7" fill="#e8d3b0"/><path d="M1081 468l13 -2.4v-14l-13 2.3Z" fill="#6d5a3c" opacity=".35"/><path d="M669 445h9.7v16h-9.7Z" fill="#b39478"/><rect x="642" y="445" width="27" height="16" fill="#e6c895"/><rect x="642" y="444" width="37" height="1.7" fill="#e8d3b0"/><rect x="647" y="451" width="3.2" height="4.8" fill="#6d5443"/><rect x="656" y="451" width="3.2" height="4.8" fill="#6d5443"/><path d="M678 461l13 -2.4v-9.5l-13 1.6Z" fill="#6d5a3c" opacity=".35"/><path d="M548 459h12v25h-12Z" fill="#b39478"/><rect x="509" y="459" width="39" height="25" fill="#f3e4c8"/><path d="M507 459L528 452L560 458L560 460Z" fill="#a65739"/><rect x="517" y="468" width="3.3" height="4.9" fill="#6d5443"/><path d="M560 484l13 -2.4v-15l-13 2.5Z" fill="#6d5a3c" opacity=".35"/><path d="M1006 465h11v27h-11Z" fill="#b39478"/><rect x="975" y="465" width="31" height="27" fill="#f3e4c8"/><rect x="975" y="463" width="42" height="1.8" fill="#e8d3b0"/><rect x="981" y="474" width="3.3" height="4.9" fill="#6d5443"/><rect x="991" y="474" width="3.3" height="4.9" fill="#6d5443"/><path d="M1017 492l13 -2.5v-16l-13 2.7Z" fill="#6d5a3c" opacity=".35"/><path d="M925 466h11v19h-11Z" fill="#b39478"/><rect x="901" y="466" width="23" height="19" fill="#e6c895"/><rect x="901" y="464" width="34" height="1.8" fill="#e8d3b0"/><rect x="906" y="473" width="3.3" height="5" fill="#6d5443"/><rect x="914" y="473" width="3.3" height="5" fill="#6d5443"/><path d="M935 485l13 -2.5v-11l-13 1.9Z" fill="#6d5a3c" opacity=".35"/><path d="M991 467h13v17h-13Z" fill="#b39478"/><rect x="961" y="467" width="30" height="17" fill="#efdcb8"/><rect x="961" y="465" width="43" height="1.8" fill="#e8d3b0"/><rect x="967" y="473" width="3.3" height="5" fill="#6d5443"/><rect x="976" y="473" width="3.3" height="5" fill="#6d5443"/><path d="M1004 484l13 -2.5v-10l-13 1.7Z" fill="#6d5a3c" opacity=".35"/><path d="M681 468h14v26h-14Z" fill="#b39478"/><rect x="658" y="468" width="23" height="26" fill="#e6c895"/><path d="M657 468L670 460L695 466L695 469Z" fill="#b8613f"/><rect x="663" y="477" width="3.3" height="5" fill="#6d5443"/><rect x="670" y="477" width="3.3" height="5" fill="#6d5443"/><path d="M695 494l13 -2.5v-16l-13 2.6Z" fill="#6d5a3c" opacity=".35"/><path d="M1251 477h9.9v30h-9.9Z" fill="#b39478"/><rect x="1219" y="477" width="33" height="30" fill="#ead0a2"/><path d="M1217 477L1235 470L1261 476L1261 478Z" fill="#a65739"/><rect x="1225" y="488" width="3.4" height="5.1" fill="#6d5443"/><path d="M1261 508l14 -2.5v-18l-14 3Z" fill="#6d5a3c" opacity=".35"/><path d="M691 487h11v20h-11Z" fill="#b39478"/><rect x="661" y="487" width="30" height="20" fill="#efdcb8"/><path d="M659 487L676 479L702 485L702 488Z" fill="#b8613f"/><rect x="667" y="494" width="3.4" height="5.2" fill="#6d5443"/><path d="M702 507l14 -2.6v-12l-14 2Z" fill="#6d5a3c" opacity=".35"/><path d="M744 492h10v25h-10Z" fill="#b39478"/><rect x="707" y="492" width="37" height="25" fill="#efdcb8"/><rect x="707" y="490" width="48" height="1.9" fill="#e8d3b0"/><path d="M755 517l14 -2.6v-15l-14 2.5Z" fill="#6d5a3c" opacity=".35"/><path d="M537 496h9.6v26h-9.6Z" fill="#b39478"/><rect x="499" y="496" width="38" height="26" fill="#ead0a2"/><rect x="499" y="494" width="48" height="1.9" fill="#e8d3b0"/><path d="M547 522l14 -2.6v-15l-14 2.6Z" fill="#6d5a3c" opacity=".35"/><path d="M606 498h14v27h-14Z" fill="#b39478"/><rect x="569" y="498" width="37" height="27" fill="#ead0a2"/><path d="M568 498L588 491L620 497L620 499Z" fill="#a65739"/><rect x="577" y="508" width="3.5" height="5.3" fill="#6d5443"/><path d="M620 526l14 -2.6v-16l-14 2.7Z" fill="#6d5a3c" opacity=".35"/><path d="M1072 502h8.9v19h-8.9Z" fill="#b39478"/><rect x="1046" y="502" width="27" height="19" fill="#efdcb8"/><rect x="1046" y="500" width="36" height="1.9" fill="#e8d3b0"/><rect x="1051" y="508" width="3.5" height="5.3" fill="#6d5443"/><path d="M1081 521l14 -2.7v-12l-14 1.9Z" fill="#6d5a3c" opacity=".35"/><path d="M501 503h15v18h-15Z" fill="#b39478"/><rect x="465" y="503" width="36" height="18" fill="#f3e4c8"/><rect x="465" y="501" width="51" height="2" fill="#e8d3b0"/><rect x="472" y="509" width="3.6" height="5.3" fill="#6d5443"/><path d="M515 521l14 -2.7v-11l-14 1.8Z" fill="#6d5a3c" opacity=".35"/><path d="M760 514h11v22h-11Z" fill="#b39478"/><rect x="729" y="514" width="32" height="22" fill="#f6ead6"/><path d="M727 514L744 506L771 512L771 515Z" fill="#a65739"/><rect x="735" y="522" width="3.6" height="5.4" fill="#6d5443"/><path d="M771 537l15 -2.7v-13l-15 2.2Z" fill="#6d5a3c" opacity=".35"/><path d="M1122 515h12v23h-12Z" fill="#b39478"/><rect x="1092" y="515" width="30" height="23" fill="#e6c895"/><rect x="1092" y="513" width="42" height="2" fill="#e8d3b0"/><rect x="1098" y="522" width="3.6" height="5.4" fill="#6d5443"/><path d="M1134 537l15 -2.7v-14l-15 2.3Z" fill="#6d5a3c" opacity=".35"/><path d="M696 521h11v34h-11Z" fill="#b39478"/><rect x="659" y="521" width="37" height="34" fill="#efdcb8"/><rect x="659" y="519" width="48" height="2" fill="#e8d3b0"/><path d="M707 556l15 -2.8v-21l-15 3.4Z" fill="#6d5a3c" opacity=".35"/><path d="M517 522h9.6v18h-9.6Z" fill="#b39478"/><rect x="482" y="522" width="35" height="18" fill="#e6c895"/><rect x="482" y="520" width="45" height="2" fill="#e8d3b0"/><rect x="489" y="528" width="3.7" height="5.5" fill="#6d5443"/><path d="M527 540l15 -2.8v-11l-15 1.8Z" fill="#6d5a3c" opacity=".35"/><path d="M1231 524h11v35h-11Z" fill="#b39478"/><rect x="1197" y="524" width="34" height="35" fill="#efdcb8"/><rect x="1197" y="522" width="45" height="2" fill="#e8d3b0"/><path d="M1242 559l15 -2.8v-21l-15 3.5Z" fill="#6d5a3c" opacity=".35"/><path d="M1142 531h9.8v25h-9.8Z" fill="#b39478"/><rect x="1103" y="531" width="39" height="25" fill="#e6c895"/><rect x="1103" y="529" width="49" height="2.1" fill="#e8d3b0"/><rect x="1111" y="540" width="3.7" height="5.6" fill="#6d5443"/><rect x="1124" y="540" width="3.7" height="5.6" fill="#6d5443"/><path d="M1152 556l15 -2.8v-15l-15 2.5Z" fill="#6d5a3c" opacity=".35"/><path d="M986 539h13v29h-13Z" fill="#b39478"/><rect x="945" y="539" width="41" height="29" fill="#efdcb8"/><path d="M943 539L966 530L999 537L999 540Z" fill="#a65739"/><rect x="953" y="549" width="3.8" height="5.7" fill="#6d5443"/><rect x="966" y="549" width="3.8" height="5.7" fill="#6d5443"/><path d="M999 567l15 -2.8v-17l-15 2.9Z" fill="#6d5a3c" opacity=".35"/><path d="M557 541h15v22h-15Z" fill="#b39478"/><rect x="512" y="541" width="45" height="22" fill="#f3e4c8"/><path d="M510 541L534 533L572 540L572 542Z" fill="#a65739"/><rect x="521" y="549" width="3.8" height="5.7" fill="#6d5443"/><rect x="535" y="549" width="3.8" height="5.7" fill="#6d5443"/><path d="M572 564l15 -2.9v-13l-15 2.2Z" fill="#6d5a3c" opacity=".35"/><path d="M1196 546h13v29h-13Z" fill="#b39478"/><rect x="1157" y="546" width="39" height="29" fill="#efdcb8"/><rect x="1157" y="544" width="53" height="2.1" fill="#e8d3b0"/><rect x="1165" y="556" width="3.8" height="5.8" fill="#6d5443"/><rect x="1177" y="556" width="3.8" height="5.8" fill="#6d5443"/><path d="M1209 575l15 -2.9v-17l-15 2.9Z" fill="#6d5a3c" opacity=".35"/><path d="M554 548h14v22h-14Z" fill="#b39478"/><rect x="528" y="548" width="26" height="22" fill="#e6c895"/><path d="M526 548L541 539L568 546L568 549Z" fill="#a65739"/><rect x="533" y="556" width="3.9" height="5.8" fill="#6d5443"/><rect x="541" y="556" width="3.9" height="5.8" fill="#6d5443"/><path d="M568 570l15 -2.9v-13l-15 2.2Z" fill="#6d5a3c" opacity=".35"/><path d="M1211 548h16v35h-16Z" fill="#b39478"/><rect x="1184" y="548" width="26" height="35" fill="#e6c895"/><path d="M1183 548L1197 540L1226 547L1226 549Z" fill="#b8613f"/><path d="M1226 583l15 -2.9v-21l-15 3.5Z" fill="#6d5a3c" opacity=".35"/><path d="M1203 558h14v25h-14Z" fill="#b39478"/><rect x="1168" y="558" width="36" height="25" fill="#f6ead6"/><path d="M1166 558L1186 550L1217 556L1217 559Z" fill="#a65739"/><path d="M1217 584l16 -2.9v-15l-16 2.5Z" fill="#6d5a3c" opacity=".35"/><path d="M1001 568h13v36h-13Z" fill="#b39478"/><rect x="957" y="568" width="44" height="36" fill="#efdcb8"/><path d="M955 568L979 559L1015 566L1015 569Z" fill="#b8613f"/><rect x="966" y="581" width="4" height="6" fill="#6d5443"/><rect x="980" y="581" width="4" height="6" fill="#6d5443"/><path d="M1015 604l16 -3v-22l-16 3.6Z" fill="#6d5a3c" opacity=".35"/><path d="M722 569h18v21h-18Z" fill="#b39478"/><rect x="676" y="569" width="46" height="21" fill="#efdcb8"/><path d="M674 569L699 560L740 567L740 570Z" fill="#b8613f"/><rect x="686" y="576" width="4" height="6" fill="#6d5443"/><path d="M740 590l16 -3v-13l-16 2.1Z" fill="#6d5a3c" opacity=".35"/><path d="M525 575h10v21h-10Z" fill="#b39478"/><rect x="490" y="575" width="35" height="21" fill="#f3e4c8"/><path d="M488 575L508 566L535 573L535 576Z" fill="#b8613f"/><path d="M535 596l16 -3v-13l-16 2.1Z" fill="#6d5a3c" opacity=".35"/><path d="M1051 576h18v31h-18Z" fill="#b39478"/><rect x="1016" y="576" width="36" height="31" fill="#efdcb8"/><rect x="1016" y="574" width="53" height="2.2" fill="#e8d3b0"/><rect x="1023" y="587" width="4" height="6.1" fill="#6d5443"/><rect x="1034" y="587" width="4" height="6.1" fill="#6d5443"/><path d="M1069 607l16 -3v-19l-16 3.1Z" fill="#6d5a3c" opacity=".35"/><path d="M1182 580h15v30h-15Z" fill="#b39478"/><rect x="1136" y="580" width="46" height="30" fill="#ead0a2"/><rect x="1136" y="578" width="61" height="2.2" fill="#e8d3b0"/><path d="M1197 610l16 -3v-18l-16 3Z" fill="#6d5a3c" opacity=".35"/><path d="M988 582h13v24h-13Z" fill="#b39478"/><rect x="940" y="582" width="49" height="24" fill="#efdcb8"/><path d="M938 582L964 573L1001 580L1001 583Z" fill="#a65739"/><path d="M1001 606l16 -3.1v-14l-16 2.4Z" fill="#6d5a3c" opacity=".35"/><path d="M652 601h17v32h-17Z" fill="#b39478"/><rect x="611" y="601" width="41" height="32" fill="#efdcb8"/><rect x="611" y="599" width="57" height="2.3" fill="#e8d3b0"/><rect x="620" y="612" width="4.2" height="6.3" fill="#6d5443"/><path d="M669 633l17 -3.2v-19l-17 3.2Z" fill="#6d5a3c" opacity=".35"/><path d="M963 607h17v37h-17Z" fill="#b39478"/><rect x="926" y="607" width="36" height="37" fill="#ead0a2"/><rect x="926" y="605" width="53" height="2.3" fill="#e8d3b0"/><rect x="933" y="620" width="4.2" height="6.4" fill="#6d5443"/><rect x="945" y="620" width="4.2" height="6.4" fill="#6d5443"/><path d="M979 644l17 -3.2v-22l-17 3.7Z" fill="#6d5a3c" opacity=".35"/><path d="M1130 608h13v33h-13Z" fill="#b39478"/><rect x="1102" y="608" width="28" height="33" fill="#ead0a2"/><rect x="1102" y="606" width="41" height="2.3" fill="#e8d3b0"/><rect x="1108" y="620" width="4.3" height="6.4" fill="#6d5443"/><rect x="1117" y="620" width="4.3" height="6.4" fill="#6d5443"/><path d="M1143 641l17 -3.2v-20l-17 3.3Z" fill="#6d5a3c" opacity=".35"/><path d="M726 611h17v36h-17Z" fill="#b39478"/><rect x="692" y="611" width="34" height="36" fill="#ead0a2"/><path d="M690 611L709 602L743 609L743 612Z" fill="#a65739"/><rect x="699" y="624" width="4.3" height="6.4" fill="#6d5443"/><path d="M743 647l17 -3.2v-22l-17 3.6Z" fill="#6d5a3c" opacity=".35"/><path d="M1111 621h15v36h-15Z" fill="#b39478"/><rect x="1070" y="621" width="41" height="36" fill="#efdcb8"/><path d="M1068 621L1091 612L1126 619L1126 622Z" fill="#a65739"/><rect x="1079" y="634" width="4.3" height="6.5" fill="#6d5443"/><path d="M1126 657l17 -3.3v-22l-17 3.6Z" fill="#6d5a3c" opacity=".35"/><path d="M748 624h12v34h-12Z" fill="#b39478"/><rect x="701" y="624" width="47" height="34" fill="#e6c895"/><path d="M699 624L725 615L760 622L760 625Z" fill="#a65739"/><rect x="711" y="636" width="4.4" height="6.5" fill="#6d5443"/><rect x="726" y="636" width="4.4" height="6.5" fill="#6d5443"/><path d="M760 659l17 -3.3v-20l-17 3.4Z" fill="#6d5a3c" opacity=".35"/><path d="M774 642h12v29h-12Z" fill="#b39478"/><rect x="720" y="642" width="53" height="29" fill="#ead0a2"/><rect x="720" y="639" width="65" height="2.5" fill="#e8d3b0"/><rect x="731" y="652" width="4.5" height="6.7" fill="#6d5443"/><path d="M785 671l18 -3.4v-18l-18 2.9Z" fill="#6d5a3c" opacity=".35"/><path d="M729 650h18v30h-18Z" fill="#b39478"/><rect x="693" y="650" width="36" height="30" fill="#e6c895"/><rect x="693" y="648" width="54" height="2.5" fill="#e8d3b0"/><rect x="700" y="661" width="4.5" height="6.8" fill="#6d5443"/><path d="M747 680l18 -3.4v-18l-18 3Z" fill="#6d5a3c" opacity=".35"/><path d="M894 654h16v40h-16Z" fill="#b39478"/><rect x="844" y="654" width="50" height="40" fill="#f6ead6"/><rect x="844" y="651" width="66" height="2.5" fill="#e8d3b0"/><rect x="854" y="668" width="4.6" height="6.8" fill="#6d5443"/><rect x="870" y="668" width="4.6" height="6.8" fill="#6d5443"/><path d="M909 694l18 -3.4v-24l-18 4Z" fill="#6d5a3c" opacity=".35"/><path d="M1234 654h20v44h-20Z" fill="#b39478"/><rect x="1186" y="654" width="47" height="44" fill="#ead0a2"/><rect x="1186" y="651" width="67" height="2.5" fill="#e8d3b0"/><rect x="1196" y="669" width="4.6" height="6.8" fill="#6d5443"/><path d="M1254 698l18 -3.4v-27l-18 4.4Z" fill="#6d5a3c" opacity=".35"/><path d="M519 657h15v45h-15Z" fill="#b39478"/><rect x="488" y="657" width="31" height="45" fill="#ead0a2"/><rect x="488" y="654" width="46" height="2.5" fill="#e8d3b0"/><rect x="494" y="673" width="4.6" height="6.9" fill="#6d5443"/><path d="M534 702l18 -3.4v-27l-18 4.5Z" fill="#6d5a3c" opacity=".35"/><path d="M693 661h12v25h-12Z" fill="#b39478"/><rect x="660" y="661" width="33" height="25" fill="#e6c895"/><rect x="660" y="658" width="45" height="2.5" fill="#e8d3b0"/><path d="M705 686l18 -3.5v-15l-18 2.5Z" fill="#6d5a3c" opacity=".35"/><path d="M876 661h16v33h-16Z" fill="#b39478"/><rect x="844" y="661" width="32" height="33" fill="#f6ead6"/><rect x="844" y="659" width="48" height="2.5" fill="#e8d3b0"/><path d="M892 694l18 -3.5v-20l-18 3.3Z" fill="#6d5a3c" opacity=".35"/><path d="M1178 665h13v35h-13Z" fill="#b39478"/><rect x="1139" y="665" width="39" height="35" fill="#f6ead6"/><rect x="1139" y="663" width="52" height="2.5" fill="#e8d3b0"/><rect x="1146" y="677" width="4.6" height="7" fill="#6d5443"/><path d="M1191 700l19 -3.5v-21l-19 3.5Z" fill="#6d5a3c" opacity=".35"/><path d="M524 668h15v24h-15Z" fill="#b39478"/><rect x="482" y="668" width="42" height="24" fill="#e6c895"/><path d="M480 668L503 657L539 665L539 669Z" fill="#b8613f"/><rect x="491" y="676" width="4.7" height="7" fill="#6d5443"/><path d="M539 692l19 -3.5v-14l-19 2.4Z" fill="#6d5a3c" opacity=".35"/><path d="M895 672h13v40h-13Z" fill="#b39478"/><rect x="861" y="672" width="34" height="40" fill="#ead0a2"/><path d="M858 672L878 661L907 670L907 673Z" fill="#b8613f"/><rect x="867" y="686" width="4.7" height="7" fill="#6d5443"/><path d="M907 712l19 -3.5v-24l-19 4Z" fill="#6d5a3c" opacity=".35"/><path d="M958 677h15v32h-15Z" fill="#b39478"/><rect x="907" y="677" width="51" height="32" fill="#f6ead6"/><path d="M905 677L932 667L973 675L973 678Z" fill="#a65739"/><rect x="917" y="688" width="4.7" height="7.1" fill="#6d5443"/><path d="M973 709l19 -3.5v-19l-19 3.2Z" fill="#6d5a3c" opacity=".35"/><path d="M752 680h13v44h-13Z" fill="#b39478"/><rect x="720" y="680" width="33" height="44" fill="#ead0a2"/><rect x="720" y="677" width="46" height="2.6" fill="#e8d3b0"/><path d="M765 724l19 -3.5v-26l-19 4.4Z" fill="#6d5a3c" opacity=".35"/><path d="M669 682h14v31h-14Z" fill="#b39478"/><rect x="617" y="682" width="52" height="31" fill="#ead0a2"/><path d="M615 682L643 672L683 680L683 683Z" fill="#a65739"/><path d="M683 713l19 -3.6v-19l-19 3.1Z" fill="#6d5a3c" opacity=".35"/><path d="M1062 684h19v33h-19Z" fill="#b39478"/><rect x="1006" y="684" width="56" height="33" fill="#e6c895"/><rect x="1006" y="682" width="75" height="2.6" fill="#e8d3b0"/><rect x="1017" y="696" width="4.8" height="7.1" fill="#6d5443"/><path d="M1081 717l19 -3.6v-20l-19 3.3Z" fill="#6d5a3c" opacity=".35"/><path d="M680 699h18v35h-18Z" fill="#b39478"/><rect x="645" y="699" width="35" height="35" fill="#ead0a2"/><path d="M643 699L663 688L698 697L698 700Z" fill="#b8613f"/><rect x="652" y="712" width="4.9" height="7.3" fill="#6d5443"/><rect x="663" y="712" width="4.9" height="7.3" fill="#6d5443"/><path d="M698 735l19 -3.6v-21l-19 3.5Z" fill="#6d5a3c" opacity=".35"/><path d="M1089 701h16v48h-16Z" fill="#b39478"/><rect x="1053" y="701" width="36" height="48" fill="#f3e4c8"/><rect x="1053" y="699" width="52" height="2.7" fill="#e8d3b0"/><rect x="1060" y="718" width="4.9" height="7.3" fill="#6d5443"/><path d="M1105 750l20 -3.7v-29l-20 4.8Z" fill="#6d5a3c" opacity=".35"/><path d="M1003 704h13v31h-13Z" fill="#b39478"/><rect x="945" y="704" width="59" height="31" fill="#e6c895"/><path d="M942 704L974 693L1016 702L1016 705Z" fill="#a65739"/><rect x="956" y="715" width="4.9" height="7.3" fill="#6d5443"/><rect x="975" y="715" width="4.9" height="7.3" fill="#6d5443"/><path d="M1016 735l20 -3.7v-18l-20 3.1Z" fill="#6d5a3c" opacity=".35"/><path d="M730 707h14v46h-14Z" fill="#b39478"/><rect x="674" y="707" width="56" height="46" fill="#f3e4c8"/><rect x="674" y="704" width="70" height="2.7" fill="#e8d3b0"/><rect x="685" y="723" width="4.9" height="7.4" fill="#6d5443"/><path d="M744 753l20 -3.7v-28l-20 4.6Z" fill="#6d5a3c" opacity=".35"/><path d="M815 715h19v48h-19Z" fill="#b39478"/><rect x="764" y="715" width="51" height="48" fill="#efdcb8"/><path d="M761 715L789 704L834 713L834 716Z" fill="#a65739"/><rect x="774" y="732" width="5" height="7.5" fill="#6d5443"/><path d="M834 764l20 -3.7v-29l-20 4.8Z" fill="#6d5a3c" opacity=".35"/><path d="M684 715h16v28h-16Z" fill="#b39478"/><rect x="645" y="715" width="39" height="28" fill="#efdcb8"/><path d="M643 715L665 704L700 713L700 716Z" fill="#a65739"/><rect x="653" y="725" width="5" height="7.5" fill="#6d5443"/><rect x="665" y="725" width="5" height="7.5" fill="#6d5443"/><path d="M700 744l20 -3.7v-17l-20 2.8Z" fill="#6d5a3c" opacity=".35"/><path d="M862 717h20v34h-20Z" fill="#b39478"/><rect x="812" y="717" width="50" height="34" fill="#efdcb8"/><rect x="812" y="714" width="70" height="2.7" fill="#e8d3b0"/><path d="M882 751l20 -3.7v-20l-20 3.4Z" fill="#6d5a3c" opacity=".35"/><path d="M836 222h20v86h-20Z" fill="#a6876b"/><rect x="800" y="222" width="36" height="86" fill="#f2e0c0"/><rect x="811" y="236" width="12" height="18" rx="6" fill="#5e4636"/><path d="M798 222Q828 190 858 222Z" fill="#c26b44"/><path d="M827 192v-14" stroke="#5e4636" stroke-width="2"/><path d="M430 490Q443 550 440 610L420 610Q417 550 430 490Z" fill="#3d4630"/><path d="M430 490Q417 550 420 610L427 610Q424 550 430 490Z" fill="#6c7444" opacity=".7"/><path d="M458 530Q471 578 468 626L448 626Q445 578 458 530Z" fill="#3d4630"/><path d="M458 530Q445 578 448 626L455 626Q452 578 458 530Z" fill="#6c7444" opacity=".7"/><path d="M1250 470Q1263 535 1260 600L1240 600Q1237 535 1250 470Z" fill="#3d4630"/><path d="M1250 470Q1237 535 1240 600L1247 600Q1244 535 1250 470Z" fill="#6c7444" opacity=".7"/><path d="M1280 518Q1293 568 1290 618L1270 618Q1267 568 1280 518Z" fill="#3d4630"/><path d="M1280 518Q1267 568 1270 618L1277 618Q1274 568 1280 518Z" fill="#6c7444" opacity=".7"/><path d="M690 350Q703 385 700 420L680 420Q677 385 690 350Z" fill="#3d4630"/><path d="M690 350Q677 385 680 420L687 420Q684 385 690 350Z" fill="#6c7444" opacity=".7"/><path d="M1010 366Q1023 398 1020 430L1000 430Q997 398 1010 366Z" fill="#3d4630"/><path d="M1010 366Q997 398 1000 430L1007 430Q1004 398 1010 366Z" fill="#6c7444" opacity=".7"/><path d="M-20 1010L-20 760Q200 700 420 770Q620 840 820 820Q1060 800 1260 760Q1460 720 1620 780L1620 1010Z" fill="#5d5a37"/><ellipse cx="80" cy="1000" rx="380" ry="200" fill="#3e4228" filter="url(#flou30)"/><ellipse cx="1560" cy="980" rx="340" ry="190" fill="#3e4228" filter="url(#flou30)"/><rect width="1600" height="1000" fill="url(#p3-warm)"/><rect width="1600" height="1000" fill="url(#p3-vig)"/><rect width="1600" height="1000" filter="url(#grana)" class="grana"/></svg></div>
</div>
</div>
<figcaption class="spread__caption">
<span class="spread__rule"></span>
<span class="spread__place"><span>Morra Alta at the end of the day</span></span>
<span class="spread__credit"><span>Photograph: Teo Varga</span></span>
</figcaption>
</figure>
<p>Breakfast in Morra Alta is a short affair. Coffee, thick and sweet, a slice of yesterday’s bread, and whatever fruit is on the tree outside the window. The bus to the coast leaves at eight, or at nine, or not at all; the timetable pinned by the door has been corrected so many times in pencil that it has become a kind of argument. We walked.</p>
<figure class="spread">
<div class="spread__box">
<div class="spread__frame">
<div class="spread__photo"><svg class="foto" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice" role="img" aria-label="A coffee cup on its saucer, a lemon and a bus ticket on a linen tablecloth in morning window light"><defs><linearGradient id="p4-wall" x1="0" y1="0" x2="1" y2="0.3"><stop offset="0" stop-color="#d9c8ab"/><stop offset="1" stop-color="#e9dcc4"/></linearGradient><linearGradient id="p4-cloth" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f3ece0"/><stop offset="0.5" stop-color="#e7decf"/><stop offset="1" stop-color="#cfc3ae"/></linearGradient><linearGradient id="p4-cup" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#fffdf8"/><stop offset="0.45" stop-color="#f1ebe1"/><stop offset="1" stop-color="#bfb4a2"/></linearGradient><linearGradient id="p4-lem" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f7da5c"/><stop offset="0.6" stop-color="#e5b92c"/><stop offset="1" stop-color="#a9801a"/></linearGradient><radialGradient id="p4-cof" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="#3b2216"/><stop offset="0.7" stop-color="#4d2e1d"/><stop offset="0.86" stop-color="#9a6a44"/><stop offset="1" stop-color="#c49a72"/></radialGradient><linearGradient id="p4-light" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff6e2" stop-opacity="0.95"/><stop offset="1" stop-color="#fff6e2" stop-opacity="0.4"/></linearGradient><radialGradient id="p4-vig" cx="0.5" cy="0.5" r="0.75"><stop offset="0.55" stop-color="#000" stop-opacity="0"/><stop offset="1" stop-color="#1a1410" stop-opacity="0.32"/></radialGradient></defs><rect width="1600" height="1000" fill="url(#p4-wall)"/><g filter="url(#flou12)"><path d="M180 60L700 140L700 600L180 560Z" fill="url(#p4-light)"/><path d="M430 96L452 100L452 580L430 578Z" fill="#d6c4a5"/><path d="M180 330L700 384L700 404L180 352Z" fill="#d6c4a5"/></g><rect y="600" width="1600" height="400" fill="url(#p4-cloth)"/><path d="M-20 600h1640v10H-20Z" fill="#c9bca5" opacity=".6"/><path d="M120 640L760 700L760 1000L60 1000Z" fill="#fff8ea" opacity=".45" filter="url(#flou30)"/><path d="M1347 610Q1348 800 1390 1010" stroke="#c8bba4" stroke-width="23" fill="none" opacity=".18" filter="url(#flou12)"/><path d="M736 610Q786 800 718 1010" stroke="#ffffff" stroke-width="21" fill="none" opacity=".18" filter="url(#flou12)"/><path d="M1314 610Q1293 800 1263 1010" stroke="#c8bba4" stroke-width="15" fill="none" opacity=".18" filter="url(#flou12)"/><path d="M262 610Q233 800 330 1010" stroke="#c8bba4" stroke-width="14" fill="none" opacity=".18" filter="url(#flou12)"/><path d="M352 610Q357 800 261 1010" stroke="#ffffff" stroke-width="11" fill="none" opacity=".18" filter="url(#flou12)"/><path d="M713 610Q690 800 565 1010" stroke="#c8bba4" stroke-width="11" fill="none" opacity=".18" filter="url(#flou12)"/><path d="M-47 610Q-28 800 -54 1010" stroke="#ffffff" stroke-width="22" fill="none" opacity=".18" filter="url(#flou12)"/><g transform="translate(800 780) scale(1.3) translate(-800 -780)"><g transform="rotate(-9 470 780)"><rect x="360" y="738" width="230" height="92" fill="#8e7f68" opacity=".35" filter="url(#flou4)" transform="translate(16 10)"/><rect x="360" y="738" width="230" height="92" fill="#f5ecd7"/><rect x="360" y="738" width="230" height="22" fill="#c4683f"/><rect x="376" y="776" width="120" height="6" fill="#9b8c75"/><rect x="376" y="792" width="160" height="4" fill="#b5a68d"/><rect x="376" y="804" width="90" height="4" fill="#b5a68d"/><path d="M540 760v70" stroke="#b5a68d" stroke-dasharray="4 5"/></g><path d="M820 770Q1050 760 1220 800Q1260 830 1180 846Q980 860 820 830Z" fill="#7e6c52" opacity=".38" filter="url(#flou12)"/><ellipse cx="800" cy="788" rx="168" ry="40" fill="#b1a58f"/><ellipse cx="800" cy="782" rx="168" ry="40" fill="url(#p4-cup)"/><ellipse cx="800" cy="778" rx="98" ry="22" fill="#d8cfbf"/><path d="M898 676Q968 664 972 712Q974 756 898 758" fill="none" stroke="#bdb2a0" stroke-width="16"/><path d="M898 676Q962 668 964 712Q966 750 898 752" fill="none" stroke="#efe8dc" stroke-width="7"/><path d="M700 640L900 640Q902 740 860 774Q800 800 740 774Q698 740 700 640Z" fill="url(#p4-cup)"/><ellipse cx="800" cy="640" rx="100" ry="22" fill="#e9e2d5"/><ellipse cx="800" cy="642" rx="90" ry="18" fill="url(#p4-cof)"/><path d="M716 660Q716 730 748 762" stroke="#ffffff" stroke-width="7" fill="none" opacity=".75" filter="url(#flou4)"/><ellipse cx="1110" cy="842" rx="96" ry="26" fill="#7e6c52" opacity=".35" filter="url(#flou12)"/><path d="M1030 776Q1050 742 1094 740Q1140 738 1156 774Q1166 808 1128 828Q1084 846 1048 824Q1018 804 1030 776Z" fill="url(#p4-lem)"/><circle cx="1158" cy="777" r="5" fill="#a9801a"/><path d="M1060 770Q1072 756 1092 754" stroke="#fff6c8" stroke-width="6" fill="none" opacity=".7" filter="url(#flou4)"/><path d="M1040 760Q1000 712 1036 690Q1060 716 1040 760Z" fill="#5e6e3b"/><path d="M1040 760Q1030 724 1036 692" stroke="#8d9a5c" stroke-width="2" fill="none"/></g><rect width="1600" height="1000" fill="url(#p4-vig)"/><rect width="1600" height="1000" filter="url(#grana)" class="grana"/></svg></div>
</div>
</div>
<figcaption class="spread__caption">
<span class="spread__rule"></span>
<span class="spread__place"><span>Breakfast at Forno Bianchi, Morra Alta</span></span>
<span class="spread__credit"><span>Photograph: Teo Varga</span></span>
</figcaption>
</figure>
<p>The last stretch of the salt road runs along a ridge so narrow you can see the sea on both sides. The lighthouse at Capo Lume has worked by itself for decades, but the keeper’s house is still lived in, by a retired fisherman who paints the tower every spring and switches the lantern on by hand when the storms are bad, just to be sure. He showed us the logbook, kept in pencil for more than a century. The last entry read, simply: calm.</p>
<blockquote class="pull">
<p>Out here, the tide is still the only timetable anyone trusts.</p>
</blockquote>
<figure class="spread">
<div class="spread__box">
<div class="spread__frame">
<div class="spread__photo"><svg class="foto" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice" role="img" aria-label="A lighthouse on a dark headland at blue hour, its lantern lit and the last warm light on the horizon"><defs><linearGradient id="p5-sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#1c2a42"/><stop offset="0.45" stop-color="#33496a"/><stop offset="0.78" stop-color="#7b88a0"/><stop offset="0.93" stop-color="#c4a69a"/><stop offset="1" stop-color="#d9b39b"/></linearGradient><linearGradient id="p5-sea" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#4b5a74"/><stop offset="0.2" stop-color="#283852"/><stop offset="1" stop-color="#111b2a"/></linearGradient><linearGradient id="p5-beam" x1="1" y1="0" x2="0" y2="0"><stop offset="0" stop-color="#ffe9b8" stop-opacity="0.55"/><stop offset="1" stop-color="#ffe9b8" stop-opacity="0"/></linearGradient><radialGradient id="p5-halo" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="#fff2cc" stop-opacity="1"/><stop offset="0.25" stop-color="#ffe2a0" stop-opacity="0.6"/><stop offset="1" stop-color="#ffd98a" stop-opacity="0"/></radialGradient><linearGradient id="p5-tower" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#e8ecef"/><stop offset="0.6" stop-color="#b7c1cd"/><stop offset="1" stop-color="#7f8ca0"/></linearGradient><radialGradient id="p5-vig" cx="0.5" cy="0.5" r="0.75"><stop offset="0.55" stop-color="#000" stop-opacity="0"/><stop offset="1" stop-color="#1a1410" stop-opacity="0.32"/></radialGradient></defs><rect width="1600" height="612" fill="url(#p5-sky)"/><rect y="610" width="1600" height="390" fill="url(#p5-sea)"/><rect x="43" y="846" width="42" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="760" y="867" width="46" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="875" y="665" width="16" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="752" y="843" width="52" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="1099" y="684" width="18" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1327" y="759" width="32" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="483" y="926" width="74" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1138" y="718" width="20" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="-18" y="847" width="28" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="957" y="919" width="62" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="922" y="784" width="25" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1338" y="761" width="30" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="905" y="747" width="35" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="583" y="820" width="45" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1566" y="735" width="34" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1523" y="826" width="48" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="851" y="620" width="12" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="450" y="765" width="31" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="614" y="781" width="40" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="1022" y="967" width="73" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="648" y="620" width="11" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="986" y="873" width="65" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="924" y="983" width="83" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="492" y="893" width="55" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="950" y="707" width="19" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="395" y="768" width="41" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="123" y="911" width="50" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="1066" y="616" width="11" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="828" y="990" width="48" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="1031" y="638" width="14" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="1288" y="831" width="30" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="967" y="631" width="14" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="496" y="850" width="59" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="296" y="974" width="56" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="873" y="724" width="23" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="730" y="614" width="11" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="578" y="729" width="35" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="280" y="627" width="12" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="1340" y="871" width="43" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="402" y="688" width="17" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="355" y="715" width="18" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="603" y="734" width="35" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="451" y="940" width="49" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="1222" y="649" width="13" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="1576" y="702" width="21" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="943" y="639" width="15" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="488" y="985" width="42" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="1084" y="739" width="35" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1391" y="778" width="37" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="954" y="918" width="44" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="818" y="971" width="47" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="322" y="770" width="35" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="1289" y="642" width="15" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="1462" y="656" width="18" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="662" y="932" width="70" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1237" y="691" width="20" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1218" y="655" width="16" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1405" y="956" width="76" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="78" y="652" width="14" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1523" y="810" width="32" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1374" y="664" width="16" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1341" y="806" width="45" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="357" y="909" width="69" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="1160" y="843" width="40" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="928" y="657" width="17" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="81" y="799" width="47" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1341" y="794" width="47" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="1347" y="987" width="40" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="140" y="765" width="34" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1186" y="910" width="42" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="248" y="759" width="23" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="494" y="859" width="42" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="235" y="754" width="22" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="510" y="617" width="11" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1230" y="700" width="22" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1591" y="732" width="35" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1253" y="889" width="61" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1547" y="725" width="23" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="428" y="700" width="26" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="870" y="711" width="23" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="411" y="618" width="11" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="1482" y="846" width="44" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="302" y="873" width="47" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="854" y="794" width="39" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="510" y="907" width="46" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="431" y="625" width="13" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="588" y="913" width="56" height="1.4" fill="#d8b9a6" opacity="0.1"/><rect x="218" y="632" width="13" height="1.4" fill="#d8b9a6" opacity="0.2"/><rect x="415" y="618" width="11" height="1.4" fill="#d8b9a6" opacity="0.3"/><rect x="441" y="696" width="20" height="1.4" fill="#d8b9a6" opacity="0.1"/><path d="M846 318L-40 120L-40 470Z" fill="url(#p5-beam)" filter="url(#flou12)"/><path d="M-40 640L-40 580Q120 560 260 582L320 640Z" fill="#172131"/><path d="M380 1010Q470 670 540 616Q600 576 640 558Q760 540 900 544Q1080 550 1240 580Q1420 604 1620 590L1620 1010Z" fill="#0f1724"/><rect x="900" y="502" width="120" height="44" fill="#1c2738"/><path d="M892 502L960 474L1028 502Z" fill="#162030"/><rect x="920" y="514" width="14" height="16" fill="#f3c977"/><rect x="984" y="514" width="14" height="16" fill="#f3c977"/><rect x="900" y="506" width="120" height="70" fill="#f3c977" opacity=".12" filter="url(#flou12)"/><path d="M802 548L816 330L876 330L890 548Z" fill="url(#p5-tower)"/><path d="M806 470L884 470L886 498L804 498Z" fill="#a8413c" opacity=".85"/><path d="M810 390L882 390L884 414L808 414Z" fill="#a8413c" opacity=".85"/><rect x="806" y="324" width="80" height="8" fill="#26303f"/><rect x="822" y="296" width="48" height="28" fill="#ffe7ad"/><path d="M818 296L846 274L874 296Z" fill="#26303f"/><circle cx="846" cy="310" r="120" fill="url(#p5-halo)"/><rect x="-40" y="600" width="1700" height="60" fill="#8e98ae" opacity=".22" filter="url(#flou30)"/><rect x="700" y="650" width="300" height="300" fill="#ffd98a" opacity=".05" filter="url(#flou30)"/><rect width="1600" height="1000" fill="url(#p5-vig)"/><rect width="1600" height="1000" filter="url(#grana)" class="grana"/></svg></div>
</div>
</div>
<figcaption class="spread__caption">
<span class="spread__rule"></span>
<span class="spread__place"><span>Capo Lume at blue hour</span></span>
<span class="spread__credit"><span>Photograph: Teo Varga</span></span>
</figcaption>
</figure>
<p>We walked out of the trip the way we had walked into it, across sand. Below the cape the dunes of Sesta run for kilometres, shifting a little every winter, with marram grass holding the crests in place. In the late afternoon the wind drops and the sand goes quiet and warm, and it is very hard to believe that anything is waiting for you at the other end.</p>
<figure class="spread">
<div class="spread__box">
<div class="spread__frame">
<div class="spread__photo"><svg class="foto" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Sand dunes at evening with long shadows, marram grass on the near crest and a strip of sea beyond"><defs><linearGradient id="p6-sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#d9cfc8"/><stop offset="0.6" stop-color="#efdcc4"/><stop offset="1" stop-color="#f6dfc0"/></linearGradient><radialGradient id="p6-sun" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="#fff6e6" stop-opacity="1"/><stop offset="0.15" stop-color="#fff0d8" stop-opacity="0.8"/><stop offset="1" stop-color="#ffe5c4" stop-opacity="0"/></radialGradient><linearGradient id="p6-lit" x1="0" y1="0" x2="0.3" y2="1"><stop offset="0" stop-color="#f1cfa2"/><stop offset="1" stop-color="#d9a671"/></linearGradient><linearGradient id="p6-shade" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#8e7884"/><stop offset="0.6" stop-color="#a98e8c" stop-opacity="0.7"/><stop offset="1" stop-color="#c9a588" stop-opacity="0"/></linearGradient><radialGradient id="p6-vig" cx="0.5" cy="0.5" r="0.75"><stop offset="0.55" stop-color="#000" stop-opacity="0"/><stop offset="1" stop-color="#1a1410" stop-opacity="0.32"/></radialGradient></defs><rect width="1600" height="460" fill="url(#p6-sky)"/><ellipse cx="1150" cy="370" rx="420" ry="260" fill="url(#p6-sun)"/><circle cx="1150" cy="384" r="30" fill="#fffaf0" opacity=".9"/><rect y="430" width="1600" height="40" fill="#a9b7b9"/><rect y="432" width="1600" height="4" fill="#fbf0dc" opacity=".6"/><rect x="980" y="436" width="340" height="10" fill="#fff4e0" opacity=".5" filter="url(#flou4)"/><path d="M-20 1010L-20 481L20 482L60 481L100 480L140 479L180 478L220 478L260 479L300 480L340 483L380 485L420 488L460 490L500 491L540 490L580 489L620 486L660 482L700 478L740 474L780 471L820 469L860 468L900 468L940 469L980 470L1020 472L1060 472L1100 472L1140 472L1180 470L1220 468L1260 466L1300 464L1340 463L1380 463L1420 465L1460 467L1500 471L1540 475L1580 479L1620 483L1620 1010Z" fill="#e6c49c"/><path d="M600 487L600 487L630 485L660 482L690 479L720 476L750 473L780 471L810 469L840 468L870 468L900 468L930 469L960 470L990 471L1020 472L1050 472L1080 473L1110 472L1140 472L1170 470L1200 469L1230 467L1240 467L1210 474L1180 479L1150 483L1120 487L1090 489L1060 491L1030 492L1000 492L970 491L940 491L910 490L880 489L850 489L820 489L790 489L760 489L730 490L700 491L670 491L640 491L610 489Z" fill="url(#p6-shade)" opacity="0.5"/><path d="M-20 1010L-20 596L20 604L60 609L100 610L140 608L180 602L220 594L260 584L300 575L340 567L380 561L420 558L460 556L500 555L540 555L580 553L620 549L660 543L700 535L740 527L780 519L820 513L860 511L900 512L940 516L980 524L1020 534L1060 544L1100 553L1140 561L1180 566L1220 569L1260 570L1300 571L1340 571L1380 573L1420 577L1460 583L1500 590L1540 598L1580 604L1620 608L1620 1010Z" fill="url(#p6-lit)"/><path d="M240 589L240 589L270 582L300 575L330 569L360 564L390 560L420 558L450 556L480 556L510 555L540 555L570 553L600 551L630 547L660 543L690 537L720 531L750 525L780 519L810 515L840 512L870 511L900 512L900 512L870 528L840 540L810 552L780 565L750 577L720 588L690 599L660 608L630 615L600 620L570 623L540 624L510 623L480 621L450 618L420 615L390 612L360 609L330 607L300 604L270 600L240 589Z" fill="url(#p6-shade)" opacity="0.75"/><path d="M935 642q121 -7.7 242 -3.3" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M1056 668q131 -8.6 262 1.5" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M1107 630q134 -8 267 1" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M1024 656q132 -13 265 1.4" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M761 618q167 -10 334 -3.5" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M52 659q196 -10 393 1.1" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M831 576q105 -14 210 -3.2" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M1338 630q135 -13 270 -2.4" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M523 576q180 -14 360 -2" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M1129 647q201 -7.9 403 -2.2" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M-20 1010L-20 682L20 679L60 674L100 667L140 658L180 649L220 640L260 632L300 626L340 623L380 624L420 628L460 635L500 645L540 657L580 669L620 680L660 690L700 697L740 703L780 706L820 707L860 708L900 709L940 710L980 713L1020 718L1060 724L1100 731L1140 739L1180 746L1220 751L1260 754L1300 753L1340 749L1380 742L1420 732L1460 720L1500 707L1540 694L1580 683L1620 674L1620 1010Z" fill="#e2b585"/><path d="M760 704L760 704L790 706L820 707L850 708L880 708L910 709L940 710L970 712L1000 715L1030 719L1060 724L1090 729L1120 735L1150 741L1180 746L1210 750L1240 753L1270 754L1300 753L1330 751L1360 746L1390 740L1420 732L1450 723L1480 713L1510 704L1540 694L1540 694L1510 729L1480 754L1450 776L1420 796L1390 814L1360 828L1330 840L1300 849L1270 855L1240 858L1210 858L1180 855L1150 851L1120 844L1090 837L1060 829L1030 820L1000 811L970 802L940 793L910 783L880 773L850 761L820 748L790 731L760 704Z" fill="url(#p6-shade)" opacity="0.8"/><path d="M1118 875q162 -7.3 323 -0.2" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M1287 861q165 -6.8 329 2.2" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M1328 760q130 -13 259 -2.9" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M459 802q183 -12 367 1.3" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M1134 839q182 -6.6 363 1.3" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M699 743q169 -15 338 -3.6" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M755 780q112 -11 225 0.5" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M166 757q152 -6.2 304 2.1" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M1297 873q145 -9.1 290 -1.7" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M760 754q135 -12 269 2.3" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M497 793q159 -12 318 -2" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M1294 876q147 -12 294 0.4" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M912 856q132 -9.9 264 -0.8" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M533 732q112 -9.4 224 1.4" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M-20 1010L-20 889L20 891L60 893L100 893L140 892L180 892L220 893L260 894L300 897L340 901L380 906L420 912L460 917L500 921L540 924L580 926L620 925L660 921L700 915L740 908L780 899L820 889L860 879L900 870L940 862L980 856L1020 852L1060 849L1100 848L1140 847L1180 848L1220 848L1260 847L1300 846L1340 843L1380 840L1420 835L1460 829L1500 824L1540 819L1580 816L1620 814L1620 1010Z" fill="#dca877"/><path d="M-20 889L-20 889L10 891L40 892L70 893L100 893L130 892L160 892L190 892L220 893L250 894L280 896L310 898L340 901L370 905L400 909L430 913L460 917L490 920L520 923L550 925L560 925L530 960L500 980L470 994L440 1006L410 1014L380 1020L350 1024L320 1026L290 1026L260 1024L230 1021L200 1016L170 1009L140 1000L110 988L80 974L50 957L20 936L-10 907Z" fill="url(#p6-shade)" opacity="0.85"/><path d="M34 931q166 -8.2 331 -2.8" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M722 991q163 -7.6 326 -3.9" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M923 880q202 -14 404 0" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M884 1004q104 -7.2 207 -1.1" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M783 965q145 -7.1 290 4" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M1284 908q168 -8.6 335 -0.8" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M490 1018q103 -6.3 207 -2.7" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M146 969q162 -11 324 2.5" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M1230 979q161 -6.7 322 0.6" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M386 967q200 -13 400 0" stroke="#a07a5c" stroke-width="1.5" fill="none" opacity=".16"/><path d="M713 917l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M713 917q-7.8 -32 -17 -62" stroke="#a09060" stroke-width="2.5" fill="none"/><path d="M678 921l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M678 921q9.3 -43 -20 -65" stroke="#7a6f45" stroke-width="2.3" fill="none"/><path d="M928 863l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M928 863q3.4 -45 -1.9 -89" stroke="#a09060" stroke-width="1.6" fill="none"/><path d="M713 914l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M713 914q9.3 -36 19 -70" stroke="#a09060" stroke-width="2" fill="none"/><path d="M872 875l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M872 875q-1.8 -42 -26 -84" stroke="#7a6f45" stroke-width="2.1" fill="none"/><path d="M916 866l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M916 866q-6.2 -42 18 -60" stroke="#a09060" stroke-width="1.6" fill="none"/><path d="M787 901l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M787 901q-4.4 -54 -29 -82" stroke="#a09060" stroke-width="2" fill="none"/><path d="M861 887l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M861 887q-9.5 -54 15 -80" stroke="#a09060" stroke-width="1.7" fill="none"/><path d="M828 893l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M828 893q-8.8 -49 3.8 -68" stroke="#a09060" stroke-width="1.6" fill="none"/><path d="M656 928l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M656 928q-3.7 -52 -20 -73" stroke="#7a6f45" stroke-width="2.3" fill="none"/><path d="M913 867l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M913 867q-7.3 -40 12 -81" stroke="#a09060" stroke-width="2.5" fill="none"/><path d="M833 895l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M833 895q-6.9 -56 -28 -86" stroke="#7a6f45" stroke-width="2.2" fill="none"/><path d="M788 897l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M788 897q2.4 -59 -11 -65" stroke="#a09060" stroke-width="1.8" fill="none"/><path d="M871 878l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M871 878q1.2 -52 25 -75" stroke="#a09060" stroke-width="1.9" fill="none"/><path d="M696 918l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M696 918q1.5 -54 9.1 -79" stroke="#7a6f45" stroke-width="1.7" fill="none"/><path d="M762 910l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M762 910q3 -54 29 -55" stroke="#a09060" stroke-width="2.6" fill="none"/><path d="M678 928l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M678 928q8.4 -46 3.6 -66" stroke="#a09060" stroke-width="2.4" fill="none"/><path d="M983 856l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M983 856q2.3 -34 24 -98" stroke="#a09060" stroke-width="2.3" fill="none"/><path d="M896 879l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M896 879q0.3 -57 4.6 -67" stroke="#7a6f45" stroke-width="2.4" fill="none"/><path d="M916 874l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M916 874q-1 -59 10 -83" stroke="#7a6f45" stroke-width="1.9" fill="none"/><path d="M643 921l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M643 921q6.3 -49 -30 -86" stroke="#a09060" stroke-width="2.3" fill="none"/><path d="M952 861l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M952 861q-7 -34 18 -89" stroke="#7a6f45" stroke-width="1.6" fill="none"/><path d="M714 922l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M714 922q-6.7 -38 -25 -85" stroke="#a09060" stroke-width="1.6" fill="none"/><path d="M870 879l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M870 879q-1 -51 11 -93" stroke="#7a6f45" stroke-width="1.6" fill="none"/><path d="M901 879l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M901 879q2.5 -50 -19 -63" stroke="#a09060" stroke-width="2.2" fill="none"/><path d="M759 903l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M759 903q-1.9 -51 -12 -91" stroke="#a09060" stroke-width="1.8" fill="none"/><path d="M861 888l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M861 888q9.3 -37 -5.5 -98" stroke="#a09060" stroke-width="2.2" fill="none"/><path d="M702 914l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M702 914q2.5 -57 -25 -92" stroke="#7a6f45" stroke-width="2.6" fill="none"/><path d="M922 872l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M922 872q0 -46 -26 -62" stroke="#a09060" stroke-width="2.3" fill="none"/><path d="M761 911l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M761 911q8.8 -52 -20 -55" stroke="#a09060" stroke-width="2.5" fill="none"/><path d="M674 921l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M674 921q7.4 -46 17 -90" stroke="#a09060" stroke-width="2.6" fill="none"/><path d="M810 897l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M810 897q-3.7 -42 22 -73" stroke="#7a6f45" stroke-width="2" fill="none"/><path d="M936 872l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M936 872q-0.8 -46 -15 -85" stroke="#a09060" stroke-width="2" fill="none"/><path d="M724 911l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M724 911q4.2 -45 -3.4 -89" stroke="#7a6f45" stroke-width="1.5" fill="none"/><path d="M732 912l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M732 912q2.3 -58 24 -87" stroke="#7a6f45" stroke-width="2.6" fill="none"/><path d="M876 876l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M876 876q0.5 -53 2.8 -58" stroke="#7a6f45" stroke-width="1.6" fill="none"/><path d="M800 904l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M800 904q-1.2 -52 -4.1 -99" stroke="#7a6f45" stroke-width="2.5" fill="none"/><path d="M719 920l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M719 920q9.6 -48 -29 -90" stroke="#a09060" stroke-width="1.9" fill="none"/><path d="M916 872l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M916 872q-4.9 -52 -20 -94" stroke="#a09060" stroke-width="2.5" fill="none"/><path d="M890 874l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M890 874q-8.3 -58 -22 -50" stroke="#a09060" stroke-width="1.6" fill="none"/><path d="M771 910l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M771 910q0.5 -57 -22 -73" stroke="#7a6f45" stroke-width="2.6" fill="none"/><path d="M640 932l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M640 932q-5.5 -39 30 -77" stroke="#a09060" stroke-width="1.4" fill="none"/><path d="M913 877l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M913 877q7.6 -46 22 -83" stroke="#7a6f45" stroke-width="2" fill="none"/><path d="M762 912l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M762 912q-5.4 -41 15 -75" stroke="#a09060" stroke-width="2.2" fill="none"/><path d="M785 902l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M785 902q-1.9 -47 -5.6 -56" stroke="#a09060" stroke-width="2.6" fill="none"/><path d="M676 929l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M676 929q-10 -43 16 -88" stroke="#a09060" stroke-width="1.8" fill="none"/><path d="M692 917l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M692 917q-8.9 -46 -26 -92" stroke="#a09060" stroke-width="1.6" fill="none"/><path d="M895 878l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M895 878q-3.3 -40 -2.2 -76" stroke="#7a6f45" stroke-width="2.2" fill="none"/><path d="M907 878l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M907 878q-9.6 -36 -25 -88" stroke="#a09060" stroke-width="1.6" fill="none"/><path d="M969 866l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M969 866q3.1 -32 16 -52" stroke="#7a6f45" stroke-width="2.5" fill="none"/><path d="M674 922l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M674 922q3.5 -47 26 -65" stroke="#7a6f45" stroke-width="1.7" fill="none"/><path d="M665 926l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M665 926q-6 -39 -16 -78" stroke="#7a6f45" stroke-width="2.3" fill="none"/><path d="M681 923l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M681 923q-4.3 -45 -27 -89" stroke="#a09060" stroke-width="2.4" fill="none"/><path d="M919 876l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M919 876q5.7 -46 -26 -67" stroke="#a09060" stroke-width="2.2" fill="none"/><path d="M837 889l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M837 889q5.7 -52 3.3 -98" stroke="#a09060" stroke-width="2" fill="none"/><path d="M861 883l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M861 883q9.1 -48 -23 -88" stroke="#a09060" stroke-width="2.5" fill="none"/><path d="M927 875l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M927 875q2.9 -44 -20 -79" stroke="#a09060" stroke-width="2" fill="none"/><path d="M960 867l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M960 867q-5.5 -31 -6.8 -94" stroke="#a09060" stroke-width="2.2" fill="none"/><path d="M720 918l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M720 918q-0.9 -33 6.1 -76" stroke="#7a6f45" stroke-width="2.3" fill="none"/><path d="M720 916l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M720 916q-1.9 -46 10 -85" stroke="#7a6f45" stroke-width="1.5" fill="none"/><path d="M761 912l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M761 912q3.4 -48 9.6 -55" stroke="#7a6f45" stroke-width="2.5" fill="none"/><path d="M696 926l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M696 926q-4.9 -51 -26 -96" stroke="#7a6f45" stroke-width="2.3" fill="none"/><path d="M732 917l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M732 917q-2.3 -34 -0.3 -76" stroke="#7a6f45" stroke-width="2.1" fill="none"/><path d="M821 897l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M821 897q1.9 -33 29 -60" stroke="#7a6f45" stroke-width="2.4" fill="none"/><path d="M837 887l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M837 887q-0.2 -43 -24 -55" stroke="#7a6f45" stroke-width="2.4" fill="none"/><path d="M723 916l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M723 916q5.4 -41 -5.6 -98" stroke="#a09060" stroke-width="1.9" fill="none"/><path d="M673 920l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M673 920q-3.8 -41 22 -71" stroke="#7a6f45" stroke-width="2.2" fill="none"/><path d="M741 909l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M741 909q3.3 -31 -23 -99" stroke="#7a6f45" stroke-width="2" fill="none"/><path d="M664 920l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M664 920q7.8 -30 23 -58" stroke="#7a6f45" stroke-width="1.6" fill="none"/><path d="M818 896l80 14" stroke="#8b6f63" stroke-width="2" opacity=".25"/><path d="M818 896q-4.7 -35 -25 -57" stroke="#a09060" stroke-width="2.1" fill="none"/><rect x="-40" y="420" width="1700" height="90" fill="#fbeedd" opacity=".35" filter="url(#flou30)"/><rect width="1600" height="1000" fill="url(#p6-vig)"/><rect width="1600" height="1000" filter="url(#grana)" class="grana"/></svg></div>
</div>
</div>
<figcaption class="spread__caption">
<span class="spread__rule"></span>
<span class="spread__place"><span>The dunes of Sesta, late afternoon</span></span>
<span class="spread__credit"><span>Photograph: Teo Varga</span></span>
</figcaption>
</figure>
<p>There is no train back from Sesta. There is a bus, eventually, and a café by the stop where they will tell you it is coming soon. Order something. Watch the light. It is the most honest timetable on the coast.</p>
<p class="note">Ines Marlow writes about walking and the places it leads to. The salt road is waymarked from Saline d’Arda to Capo Lume in six stages; the best months are May and October.</p>
</article>
<a class="next" href="#">
<span class="next__label">Next in Coastlines</span>
<span class="next__title">The orchards that outlived the railway
<svg class="next__arrow" viewBox="0 0 40 16" aria-hidden="true"><path d="M1 8h36M30 1.5 37.5 8 30 14.5"/></svg>
</span>
</a>
</main>
<footer class="colophon">
<span>Far <em>Afield</em></span>
<span>Slow travel, told long</span>
</footer>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.min.js"></script>
<script src="script.js"></script>
</body>
</html>Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
56 values to change
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “Wide and narrow images” from Animorio and fit it into my siteEvery photo sits in a box as wide as the page and one screen tall (100lvh), which never changes size: so the text around it never moves and the ScrollTriggers of the other photos stay correct. Inside is the frame, which fills the box, and inside the frame the photo. What narrows the frame is a clip-path: inset(top side round radius), written on every frame.
A tween takes a number t from 0 to 1 while the box crosses the screen (start 'top bottom', end 'bottom top', soft scrub): at 0.5 the box fills the screen. From t comes how open the frame is, from 1 (fully wide) to 0 (as narrow as the column). A photo that starts wide stays wide until halfway and then narrows between 0.5 and 0.8; one that starts narrow opens between 0.2 and 0.5, so it is wide exactly when it fills the screen. In between there is a power2.inOut curve, so the frame starts and lands gently.
The photo never changes shape, only its scale: the smallest one that still covers the frame plus the parallax travel, that is the larger of frame height × (1 + 2 × parallax) / box height and frame width / box width. As the frame narrows the scale drops and the photo seems to pull back instead of being cropped. The parallax is a vertical shift proportional to t and to the frame height, so it never reveals an edge.
The corner radius grows as the frame closes (it reaches its maximum a little before the frame is narrow) and is zero when the photo is full screen. The caption sits under the box and moves up by as much as the frame has drawn in at the bottom; the place lines up with the left edge, the photographer with the right one, and the rule above shortens with scaleX. When the photo is wide they stay at the page margin, never stuck to the edge of the screen. On a phone the photographer goes under the place, aligned left.
The sizes (width of the column and of the box, how far the frame draws in) are taken on every ScrollTrigger refresh, so they follow window resizing and font loading. Lenis smooths the scrolling and calls ScrollTrigger.update on every step. In place of the SVG drawings you put an img with object-fit: cover: nothing else changes.
| Name | File | Default | What it changes |
|---|---|---|---|
NARROW | script.js | 100 | How narrow a photo gets, as a percentage of the text column: 100 is as wide as the text, 60 much narrower. |
TALL | script.js | 1.2 | The shape of the narrow frame: its height divided by its width. 0.66 makes it landscape, 1.4 a portrait. |
RADIUS | script.js | 14 | The corner radius, in pixels, when the photo is narrow. When it is full screen the corners are always square. |
PARALLAX | script.js | 0.08 | How far the photo drifts inside the frame, as a share of its height (0 = still). |
SCRUB | script.js | 1.2 | How many seconds the photos take to catch up with the scroll: higher is softer, 0 locks them to it. |
ALTERNATE | script.js | true | With true the photos take turns (wide narrowing, narrow widening); with false they all narrow. |
SMOOTH | script.js | true | Smooth scrolling with Lenis. |
For long articles with many photos: features, travel stories, brand stories, pages for an architecture project or a photographer. The change of width gives the reading a rhythm: wide photos are full-screen pauses, narrow ones come back into the text column.
The same effect. Since the text column is almost as wide as the screen, the narrow frame is 80% of the column, so the change from full screen to narrow still shows; the photographer’s name goes under the place.
Nothing moves: the photos stay still in their first shape (wide, narrow, wide…), with no parallax, and fade in; the headline and the captions only fade in too.
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Newsreader (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 23 KB; the libraries: GSAP + ScrollTrigger 45 KB, Lenis 5.3 KB.
Tested on 12 October 2026
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
With your account’s email and password.
or with your email
You’re signed in as .
With your account, you can download the zip of every animation and every pack, for free.