:root{--wall:#f1efea;--ink:#232220;--soft:#625e56;--line:#dcd8cf;--plum:#6d3d5c;--shadow:#2322203d}
*{box-sizing:border-box;margin:0}
html{scrollbar-color:var(--line) var(--wall);-webkit-text-size-adjust:100%}
html:has(dialog[open]){overflow:hidden}
::selection{background:var(--plum);color:#fff}
body{background:var(--wall);color:var(--ink);font:300 16px/1.55 "Geologica",system-ui,sans-serif}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
img{display:block;max-width:100%;height:auto;background:#e6e3dc}

.top{display:flex;justify-content:space-between;align-items:baseline;gap:8px 32px;flex-wrap:wrap;padding:28px 32px 18px;position:sticky;top:0;background:var(--wall);z-index:2}
h1{font:400 18px/1.2 "Geologica",sans-serif;letter-spacing:-.01em}
.chips{display:flex;flex-wrap:wrap;gap:4px 20px}
.chips button{all:unset;box-sizing:border-box;cursor:pointer;font-size:15px;color:var(--soft);padding:8px 0;white-space:nowrap}
.chips button:hover{color:var(--ink)}
.chips button[aria-pressed=true]{color:var(--plum);font-weight:500}
.chips small{font-size:12px;vertical-align:.3em;font-variant-numeric:tabular-nums}
.tools{flex-basis:100%;display:flex;align-items:center;flex-wrap:wrap;gap:4px 24px}
.tools[hidden]{display:none}
input[type=search]{font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid var(--line);padding:6px 0;width:200px;border-radius:0}
input[type=search]::placeholder{color:var(--soft)}

main{columns:3;column-gap:32px;padding:8px 32px 56px}
main[data-few="1"]{columns:1;max-width:940px;margin:0 auto}
main[data-few="2"]{columns:2}
.card{display:block;break-inside:avoid;margin:0 0 40px;text-decoration:none}
.card img{width:100%;box-shadow:0 10px 30px -14px var(--shadow);transition:box-shadow .2s,transform .2s}
.card:hover img{transform:translateY(-3px);box-shadow:0 18px 40px -16px #23222059}
.card.tall{width:56%}
.card.tall.shift{margin-left:22%}
.cap{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-top:10px;color:var(--soft)}
.cap b{font-weight:400;color:var(--ink)}
.cap span{flex:none;white-space:nowrap}
.none{column-span:all;padding:48px 0;color:var(--soft)}
.none button{all:unset;cursor:pointer;color:var(--plum);text-decoration:underline;text-underline-offset:3px;padding:10px 0;display:inline-block}
.hint{padding:0 32px 48px;color:var(--soft);text-align:center;font-size:15px}

dialog{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;background:var(--wall);color:var(--ink)}
.dw{max-width:1180px;margin:0 auto;padding:32px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px}
dialog:focus{outline:none}
.bar{position:fixed;top:20px;right:24px;z-index:3}
.close{all:unset;box-sizing:border-box;cursor:pointer;font-size:15px;padding:10px 16px;background:var(--ink);color:var(--wall)}
.close:hover{background:var(--plum)}
.shots img{width:100%;margin-bottom:20px;box-shadow:0 10px 30px -14px var(--shadow)}
.shots .ph{max-width:300px}
.shots summary{cursor:pointer;color:var(--plum);padding:10px 0;margin-bottom:12px;text-underline-offset:3px}
.notes{position:sticky;top:32px;align-self:start;padding-top:44px;min-width:0}
h2{font:400 30px/1.15 "Geologica",sans-serif;letter-spacing:-.02em;text-wrap:balance}
.meta{color:var(--soft);font-size:15px;margin:6px 0 16px}
.notes p{max-width:65ch}
h3{font:500 15px/1.3 "Geologica",sans-serif;margin-top:20px}
ul{padding-left:18px;margin-top:4px;font-size:15px}
li+li{margin-top:4px}
.sw{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:8px;padding:0;list-style:none}
.sw li{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;color:var(--soft);font-variant-numeric:tabular-nums}
.sw i{width:22px;height:22px;border-radius:50%;border:1px solid #0000001f}
.fonts{color:var(--soft);font-size:15px;margin-top:4px}
.small{color:var(--soft);font-size:14px;margin-top:20px}
.go{display:inline-block;margin-top:16px;padding:8px 0;color:var(--plum);text-underline-offset:3px;font-weight:400}

@media(max-width:1000px){
  main,main[data-few="2"]{columns:2;column-gap:20px;padding:8px 16px 40px}
  main[data-few="1"]{columns:1}
  .top{padding:20px 16px 12px}
  .hint{padding:0 16px 36px}
  .bar{position:sticky;top:0;right:auto;display:flex;justify-content:flex-end;padding:8px 16px;background:var(--wall)}
  .dw{display:flex;flex-direction:column;padding:8px 16px 32px;gap:16px}
  .shots{display:contents}
  .shots img{margin-bottom:0}
  .dk{order:1}
  .notes{order:2;position:static;padding:0}
  .ph{order:3;margin-top:12px}
  .shots details{order:4}
}
@media(max-width:560px){
  .top{position:static}
  main,main[data-few="2"]{column-gap:12px}
  main[data-few="1"]{padding-top:4px}
  .card{margin-bottom:24px}
  .cap span{display:none}
  .card.tall,.card.tall.shift{width:100%;margin-left:0}
  .chips{gap:0 16px}
  .chips button{padding:11px 0}
  .close{padding:12px 16px}
  input[type=search]{width:100%;padding:11px 0}
}
@media(prefers-reduced-motion:reduce){.card img{transition:none}.card:hover img{transform:none}}