/* Diomasleyly — cut-paper layers */
:root{
  --white:#FFFFFF;
  --coral:#E8674F; --rose:#F2A6A0;
  --teal:#227C77;  --mint:#9FD8C6;
  --ochre:#DDA53E; --butter:#F3D98B;
  --plum:#5B3E63;  --lilac:#C9A8D1;
  --ink:#211E1C;
  --ink-soft:#4a4441;
  --lift:drop-shadow(0 6px 10px rgba(33,30,28,.16)) drop-shadow(0 1px 2px rgba(33,30,28,.12));
  --lift-lo:drop-shadow(0 3px 5px rgba(33,30,28,.13));
  --display:"Fredoka",ui-rounded,"Trebuchet MS",sans-serif;
  --text:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,3.4vw,40px);
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:400 1.0625rem/1.66 var(--text);overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;margin:0;letter-spacing:-.005em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--white);padding:10px 16px;z-index:50;text-decoration:none;font-weight:700}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- generated cut edges ---------- */
.cut-1{clip-path:polygon(0.5% 0.5%,8.5% 1.4%,34.3% 0.8%,37.0% 0.5%,48.7% 1.4%,50.3% 1.7%,53.6% 0.6%,59.4% 2.5%,76.0% 0.8%,81.9% 2.5%,87.6% 1.4%,88.4% 0.2%,99.1% 0.4%,98.9% 4.6%,99.9% 38.9%,97.7% 40.3%,100.0% 41.2%,98.2% 42.9%,99.5% 46.7%,99.9% 53.2%,99.4% 65.2%,99.8% 65.5%,99.5% 66.6%,97.8% 85.2%,98.6% 99.3%,84.6% 97.0%,84.0% 97.2%,67.6% 97.3%,66.9% 99.6%,49.9% 97.7%,47.7% 97.5%,35.8% 97.4%,32.6% 97.5%,11.7% 99.6%,6.9% 99.4%,4.5% 97.5%,1.4% 98.3%,0.6% 95.9%,2.2% 93.7%,1.0% 93.1%,0.9% 54.6%,0.5% 46.6%,1.5% 38.5%,1.4% 32.7%,1.7% 17.8%,2.6% 11.5%,3.1% 9.5%)}
.cut-2{clip-path:polygon(1.8% 0.4%,20.8% 2.3%,30.9% 1.7%,37.0% 2.4%,43.5% 2.8%,55.0% 0.6%,57.5% 2.5%,64.8% 1.4%,66.2% 1.6%,99.8% 0.1%,97.9% 17.4%,99.2% 24.4%,99.7% 44.6%,98.9% 50.1%,97.8% 52.8%,98.4% 60.1%,97.6% 61.1%,98.6% 62.0%,99.2% 98.3%,92.7% 99.1%,74.6% 99.0%,60.6% 97.6%,37.4% 98.0%,31.1% 98.3%,25.8% 97.2%,15.7% 96.8%,10.6% 98.4%,0.4% 99.5%,3.0% 93.6%,0.6% 90.3%,0.2% 88.2%,2.7% 61.3%,2.8% 59.2%,1.2% 53.1%,0.8% 52.5%,2.2% 40.7%)}
.cut-3{clip-path:polygon(1.2% 0.4%,35.1% 1.6%,46.4% 0.4%,64.2% 1.9%,66.1% 3.1%,67.4% 0.1%,68.1% 3.1%,72.0% 2.2%,79.3% 1.9%,87.9% 0.9%,89.9% 2.4%,98.3% 1.1%,97.7% 11.9%,97.1% 22.6%,97.6% 24.1%,98.3% 24.8%,97.4% 50.9%,98.5% 60.8%,99.4% 64.5%,98.3% 67.8%,99.9% 75.0%,97.3% 80.0%,99.7% 99.0%,81.3% 99.6%,79.5% 97.1%,65.4% 97.5%,64.5% 99.7%,48.3% 98.8%,36.0% 99.9%,32.1% 98.5%,1.2% 99.3%,3.0% 85.8%,0.5% 75.6%,0.3% 33.9%,2.1% 31.2%,0.1% 28.1%,1.5% 26.0%,0.3% 25.9%,0.5% 24.1%,0.1% 20.2%,0.9% 4.9%)}
.cut-4{clip-path:polygon(0.2% 1.5%,5.5% 0.5%,24.9% 2.9%,34.4% 0.4%,69.7% 2.1%,71.3% 1.1%,78.2% 2.1%,84.2% 2.8%,98.9% 0.8%,99.9% 7.6%,97.5% 7.7%,99.6% 19.8%,99.5% 26.4%,98.2% 31.5%,98.9% 45.0%,99.8% 83.3%,98.0% 91.1%,98.3% 92.5%,98.4% 99.8%,95.7% 99.5%,88.1% 98.0%,78.1% 99.7%,62.2% 99.5%,54.4% 100.0%,52.1% 97.4%,38.8% 99.2%,20.5% 99.8%,17.3% 98.0%,7.7% 97.7%,1.2% 98.9%,2.5% 85.1%,0.8% 74.2%,0.1% 70.5%,2.5% 69.7%,2.8% 62.1%,0.4% 48.7%,0.6% 43.7%,0.8% 21.3%,0.3% 6.4%,2.8% 6.3%,2.1% 5.7%)}
.cut-5{clip-path:polygon(0.4% 1.9%,17.6% 1.1%,19.1% 0.5%,32.7% 1.4%,34.8% 1.2%,36.0% 1.5%,36.1% 2.8%,64.7% 2.9%,73.1% 0.7%,74.7% 3.2%,76.7% 2.0%,91.5% 3.1%,98.4% 1.0%,97.4% 9.6%,97.0% 21.1%,96.9% 34.1%,97.2% 37.0%,98.2% 65.9%,98.0% 70.8%,98.4% 79.8%,98.0% 81.3%,98.8% 90.7%,99.4% 98.3%,93.0% 98.1%,83.8% 100.0%,76.0% 99.4%,68.3% 99.8%,48.3% 97.2%,42.5% 99.0%,30.7% 97.7%,28.2% 98.6%,15.7% 98.1%,15.4% 97.3%,14.2% 97.9%,0.1% 98.8%,2.5% 83.4%,1.4% 64.4%,2.0% 63.9%,0.3% 56.6%,2.4% 37.5%,0.9% 32.2%,0.7% 31.8%,2.4% 14.3%,2.8% 14.0%)}
.cut-6{clip-path:polygon(0.6% 0.0%,5.5% 2.1%,9.2% 2.2%,21.3% 2.4%,37.5% 0.9%,45.5% 1.5%,78.0% 0.4%,78.2% 0.9%,79.5% 1.6%,90.7% 0.2%,93.4% 1.1%,98.4% 0.3%,99.2% 11.9%,97.1% 12.6%,98.4% 27.1%,99.5% 32.6%,99.4% 33.5%,98.2% 38.4%,98.2% 45.1%,96.9% 67.3%,99.0% 70.7%,97.0% 76.6%,98.9% 98.2%,84.2% 97.9%,65.5% 99.6%,64.0% 98.1%,54.6% 97.7%,52.2% 98.3%,45.7% 99.8%,39.8% 99.7%,39.4% 98.3%,26.0% 97.7%,1.0% 98.6%,2.8% 87.7%,2.1% 85.6%,2.9% 78.6%,2.9% 54.0%,3.2% 42.5%,2.6% 38.2%,0.0% 23.6%,1.6% 15.6%,0.6% 12.7%,1.0% 6.0%,2.7% 5.1%)}
.cut-deep-1{clip-path:polygon(0.3% 0.8%,34.0% 4.4%,42.7% 4.0%,68.4% 1.8%,69.7% 3.1%,75.7% 3.6%,98.2% 3.6%,95.7% 5.3%,96.9% 9.7%,95.3% 13.9%,94.1% 25.1%,94.2% 55.4%,95.1% 87.3%,95.3% 89.0%,96.7% 90.9%,96.7% 96.2%,74.1% 97.1%,55.6% 99.7%,48.6% 94.3%,38.7% 98.2%,36.0% 98.7%,32.7% 99.1%,6.8% 95.4%,1.0% 100.0%,1.9% 89.1%,5.4% 43.9%,5.5% 31.8%,0.5% 28.7%,3.3% 20.5%,5.9% 13.9%,1.2% 7.2%)}
.cut-deep-2{clip-path:polygon(2.6% 2.0%,7.3% 3.4%,22.2% 1.3%,41.7% 3.2%,43.4% 4.0%,63.3% 5.6%,66.3% 3.4%,82.3% 5.6%,93.2% 2.1%,99.5% 1.8%,93.7% 45.1%,94.0% 49.3%,98.8% 52.1%,95.9% 73.3%,99.4% 84.4%,98.5% 100.0%,88.2% 93.6%,76.8% 98.0%,24.3% 95.8%,22.2% 98.8%,15.7% 98.1%,15.5% 94.4%,3.9% 99.1%,1.6% 76.9%,5.7% 74.7%,5.8% 74.1%,0.7% 60.4%,1.3% 41.7%,2.1% 40.0%,0.5% 35.8%)}
.cut-deep-3{clip-path:polygon(3.8% 2.8%,6.7% 6.3%,7.9% 1.7%,49.3% 1.5%,88.9% 0.1%,95.3% 1.6%,97.5% 2.9%,98.7% 14.8%,95.1% 28.1%,98.1% 36.2%,99.5% 39.2%,96.1% 55.2%,98.3% 95.2%,99.3% 99.9%,94.8% 95.0%,78.1% 95.9%,65.9% 99.7%,61.6% 94.7%,51.2% 98.9%,48.4% 94.3%,38.1% 95.9%,16.8% 99.2%,2.6% 99.6%,4.6% 75.5%,4.2% 50.4%,3.1% 42.5%,5.2% 29.9%,6.2% 28.3%,6.2% 23.8%,6.4% 20.8%,6.0% 8.2%)}
.cut-deep-4{clip-path:polygon(1.8% 2.7%,13.8% 2.7%,23.3% 2.9%,34.1% 3.0%,41.9% 5.7%,56.0% 3.4%,83.1% 2.3%,83.3% 5.4%,89.1% 6.1%,99.1% 3.4%,99.1% 19.7%,96.6% 32.0%,95.3% 33.8%,99.8% 38.7%,93.9% 78.3%,96.3% 80.7%,98.3% 98.4%,91.7% 94.5%,89.2% 94.9%,46.7% 94.5%,44.4% 99.0%,20.9% 95.6%,2.0% 96.1%,0.4% 85.2%,6.1% 78.4%,3.5% 76.0%,3.8% 70.2%,4.6% 41.5%,6.1% 40.3%,4.7% 37.4%,4.0% 21.7%)}
.blob-1{clip-path:polygon(97.6% 48.8%,88.6% 70.2%,78.5% 86.1%,58.9% 98.9%,35.3% 97.3%,20.5% 81.8%,1.9% 61.2%,10.5% 36.7%,14.9% 16.8%,29.6% 6.8%,59.6% 1.4%,74.0% 9.7%,93.6% 26.6%)}
.blob-2{clip-path:polygon(94.2% 55.0%,88.4% 70.8%,74.1% 79.9%,56.4% 93.6%,32.5% 88.3%,17.8% 72.6%,12.5% 57.8%,11.1% 43.1%,19.2% 15.6%,33.4% 4.6%,59.7% 8.6%,76.4% 18.0%,93.5% 29.8%)}
.blob-3{clip-path:polygon(99.3% 44.4%,95.8% 69.9%,69.6% 86.1%,55.0% 92.5%,34.1% 94.7%,17.2% 74.7%,5.0% 60.6%,11.9% 39.7%,16.4% 21.7%,37.7% 3.7%,56.7% 9.2%,76.5% 19.1%,84.6% 30.1%)}
.blob-4{clip-path:polygon(93.0% 46.2%,86.6% 73.3%,78.5% 86.1%,57.5% 94.4%,36.2% 95.0%,22.1% 80.7%,11.3% 55.4%,10.7% 41.4%,15.6% 21.3%,37.6% 2.2%,53.5% 3.0%,72.0% 17.5%,85.9% 28.5%)}
.fill{position:absolute;inset:0;background:var(--c,var(--coral))}

/* ---------- header ---------- */
.topbar{background:var(--white);position:sticky;top:0;z-index:30;border-bottom:1px solid #efe9e6}
.topbar-in{max-width:var(--max);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{position:relative;width:34px;height:34px;flex:none}
.brand-mark i{position:absolute;display:block}
.bm-a{inset:0 5px 5px 0;background:var(--coral);clip-path:polygon(8% 18%,34% 6%,52% 14%,78% 2%,96% 20%,90% 48%,100% 74%,72% 96%,44% 88%,18% 98%,4% 70%,12% 44%);filter:none}
.bm-b{inset:9px 0 0 9px;background:var(--butter);clip-path:polygon(6% 12%,40% 4%,62% 16%,92% 8%,98% 42%,86% 64%,96% 92%,58% 98%,30% 88%,2% 94%,10% 58%,0% 32%)}
.brand-mark{filter:var(--lift-lo)}
.brand-word{font-family:var(--display);font-weight:600;font-size:1.45rem;color:var(--plum);letter-spacing:.005em}
.catnav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(16px,2.6vw,34px)}
.catnav a{position:relative;display:inline-block;padding:6px 0 10px;text-decoration:none;font-weight:600;font-size:1rem;color:var(--ink)}
.catnav a::after{content:"";position:absolute;left:-4px;right:-4px;bottom:0;height:9px;background:var(--u,var(--coral));clip-path:polygon(12.2% 6.0%,11.3% 2.5%,20.9% 25.6%,22.1% 25.8%,31.8% 24.3%,94.9% 13.2%,95.9% 10.8%,91.5% 5.3%,89.4% 5.3%,97.5% 7.7%,82.0% 24.6%,88.0% 27.7%,93.7% 46.7%,94.3% 51.2%,95.2% 75.1%,90.8% 92.0%,99.8% 95.0%,86.1% 93.1%,81.5% 96.4%,55.0% 80.5%,47.1% 88.4%,44.5% 86.8%,37.3% 83.1%,31.8% 97.0%,24.3% 77.1%,22.7% 75.1%,4.3% 86.3%,3.5% 54.5%,6.3% 48.8%,15.7% 48.3%,13.2% 45.5%,4.9% 42.1%,7.8% 31.4%,27.4% 28.8%,22.4% 11.7%);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.catnav a:hover::after,.catnav a[aria-current="page"]::after,.catnav a:focus-visible::after{transform:scaleX(1)}
.nl-coral{--u:var(--coral)} .nl-teal{--u:var(--teal)} .nl-ochre{--u:var(--ochre)} .nl-plum{--u:var(--plum)}
.menu-btn{display:none;align-items:center;gap:10px;background:none;border:2px solid var(--ink);border-radius:8px;padding:8px 12px;font:600 .95rem var(--text);color:var(--ink);cursor:pointer}
.menu-lines,.menu-lines::before,.menu-lines::after{display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:transform .2s}
.menu-lines::before,.menu-lines::after{content:"";position:absolute;left:0}
.menu-lines::before{top:-6px}.menu-lines::after{top:6px}
.topbar.open .menu-lines{background:transparent}
.topbar.open .menu-lines::before{transform:translateY(6px) rotate(45deg)}
.topbar.open .menu-lines::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- shared: kicker / stand ---------- */
.kicker{font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:14px;background:var(--k,var(--coral));clip-path:polygon(0 20%,30% 0,55% 18%,100% 6%,88% 60%,100% 100%,40% 86%,8% 100%)}
.stand{font-size:clamp(1.1rem,1.6vw,1.28rem);color:var(--ink-soft);max-width:34em}
.sec-h{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:40px}

/* ---------- layered photo stack ---------- */
.stack{position:relative;margin:0;padding:34px 40px 46px 26px;isolation:isolate}
.sh{position:absolute;display:block;filter:var(--lift);z-index:-1}
.sh-back{inset:0 12% 6% 0;transform:rotate(-2.4deg)}
.sh-back .fill{--c:var(--s1)}
.sh-mid{inset:16% 0 0 14%;transform:rotate(1.8deg)}
.sh-mid .fill{--c:var(--s2)}
.stack-hero{--s1:var(--coral);--s2:var(--butter)}
.stack-coral{--s1:var(--coral);--s2:var(--rose)}
.stack-teal{--s1:var(--teal);--s2:var(--mint)}
.stack-ochre{--s1:var(--ochre);--s2:var(--butter)}
.stack-plum{--s1:var(--plum);--s2:var(--lilac)}
.hero-photo{position:relative;display:block;width:100%;aspect-ratio:1/1;object-fit:cover;outline:10px solid var(--white);box-shadow:0 14px 28px rgba(33,30,28,.16);background:var(--white)}

/* ---------- home hero ---------- */
.hero{padding:clamp(40px,7vw,88px) 0 clamp(56px,8vw,104px)}
.hero-in,.phead-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
.hero h1{font-size:clamp(2.2rem,4.8vw,3.75rem);margin-bottom:22px;max-width:13em}
.hero-jump{margin:30px 0 0}
.hero-jump a{display:inline-block;filter:var(--lift-lo);text-decoration:none}
.hero-jump a::before{content:none}
.btn-paper{display:inline-block;background:var(--butter);padding:14px 28px 15px;font-weight:700;color:var(--ink)}

/* ---------- torn divider (three stacked strips) ---------- */
.torn{position:relative;height:42px;margin:0}
.torn::before,.torn::after,.torn span{content:"";position:absolute;left:0;right:0;bottom:0}
.torn::before{height:42px;background:var(--rose);clip-path:polygon(0% 100%,0.00% 23%,1.67% 11%,3.33% 46%,5.00% 5%,6.67% 38%,8.33% 26%,10.00% 4%,11.67% 36%,13.33% 3%,15.00% 30%,16.67% 5%,18.33% 6%,20.00% 30%,21.67% 58%,23.33% 9%,25.00% 16%,26.67% 44%,28.33% 66%,30.00% 40%,31.67% 28%,33.33% 68%,35.00% 3%,36.67% 60%,38.33% 20%,40.00% 10%,41.67% 8%,43.33% 22%,45.00% 57%,46.67% 13%,48.33% 41%,50.00% 45%,51.67% 26%,53.33% 38%,55.00% 4%,56.67% 4%,58.33% 14%,60.00% 48%,61.67% 30%,63.33% 22%,65.00% 41%,66.67% 32%,68.33% 21%,70.00% 56%,71.67% 49%,73.33% 17%,75.00% 40%,76.67% 37%,78.33% 61%,80.00% 51%,81.67% 20%,83.33% 69%,85.00% 8%,86.67% 29%,88.33% 53%,90.00% 11%,91.67% 34%,93.33% 3%,95.00% 47%,96.67% 54%,98.33% 40%,100.00% 61%,100% 100%);transform:scaleX(-1)}
.torn::after{height:30px;background:var(--mint);clip-path:polygon(0% 100%,0.00% 23%,1.67% 11%,3.33% 46%,5.00% 5%,6.67% 38%,8.33% 26%,10.00% 4%,11.67% 36%,13.33% 3%,15.00% 30%,16.67% 5%,18.33% 6%,20.00% 30%,21.67% 58%,23.33% 9%,25.00% 16%,26.67% 44%,28.33% 66%,30.00% 40%,31.67% 28%,33.33% 68%,35.00% 3%,36.67% 60%,38.33% 20%,40.00% 10%,41.67% 8%,43.33% 22%,45.00% 57%,46.67% 13%,48.33% 41%,50.00% 45%,51.67% 26%,53.33% 38%,55.00% 4%,56.67% 4%,58.33% 14%,60.00% 48%,61.67% 30%,63.33% 22%,65.00% 41%,66.67% 32%,68.33% 21%,70.00% 56%,71.67% 49%,73.33% 17%,75.00% 40%,76.67% 37%,78.33% 61%,80.00% 51%,81.67% 20%,83.33% 69%,85.00% 8%,86.67% 29%,88.33% 53%,90.00% 11%,91.67% 34%,93.33% 3%,95.00% 47%,96.67% 54%,98.33% 40%,100.00% 61%,100% 100%);filter:none}
.torn{filter:var(--lift-lo)}

/* ---------- category cards ---------- */
.cats{padding:clamp(56px,7vw,92px) 0 clamp(40px,5vw,64px);background:var(--white)}
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,64px) clamp(32px,4.4vw,60px)}
.cat{position:relative;padding:0 22px 22px 0;isolation:isolate}
.cat-base{position:absolute;inset:22px 0 0 22px;filter:var(--lift);z-index:-1;transform:rotate(1.4deg)}
.cat:nth-child(2) .cat-base{inset:26px 4px 0 14px;transform:rotate(-1.6deg)}
.cat:nth-child(3) .cat-base{inset:14px 0 4px 28px;transform:rotate(-1deg)}
.cat:nth-child(4) .cat-base{inset:24px 2px 0 18px;transform:rotate(2deg)}
.cat-base .fill{--c:var(--c1)}
.cat-top{position:relative;filter:var(--lift)}
.cat-paper{background:var(--c2);padding:clamp(30px,3.6vw,44px) clamp(28px,3.4vw,44px) clamp(30px,3.4vw,40px);min-height:100%}
.cat-coral{--c1:var(--coral);--c2:var(--rose)}
.cat-teal{--c1:var(--teal);--c2:var(--mint)}
.cat-ochre{--c1:var(--ochre);--c2:var(--butter)}
.cat-plum{--c1:var(--plum);--c2:var(--lilac)}
.cat-count{display:inline-block;background:var(--white);padding:5px 14px 6px;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;clip-path:polygon(0 12%,18% 0,46% 8%,74% 0,100% 10%,96% 52%,100% 90%,70% 100%,38% 92%,10% 100%,2% 56%)}
.cat-name{font-size:clamp(1.7rem,2.6vw,2.15rem);margin-bottom:14px}
.cat-paper p:not(.cat-count){max-width:30em}
.cat-link{display:inline-block;margin-top:6px;font-weight:700;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-color:var(--c1)}
.cat-link::after{content:" \2192"}
.cat-link:hover{text-decoration-thickness:5px}

/* ---------- how the index works ---------- */
.how{padding:clamp(48px,6vw,80px) 0 clamp(64px,8vw,104px)}
.notes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.note{position:relative;padding-top:4px}
.note-badge{display:grid;place-items:center;width:62px;height:62px;margin-bottom:18px;font-family:var(--display);font-weight:600;font-size:1.6rem;color:var(--white)}
.note:nth-child(1) .note-badge{background:var(--coral);color:var(--ink)}
.note:nth-child(2) .note-badge{background:var(--teal)}
.note:nth-child(3) .note-badge{background:var(--plum)}
.note h3{font-size:1.4rem;margin-bottom:10px}
.note p{color:var(--ink-soft);margin:0}
.note::before{content:"";position:absolute;left:14px;top:14px;width:62px;height:62px;background:var(--butter);clip-path:inherit;z-index:-1}
.notes{isolation:isolate}
.note:nth-child(1)::before{background:var(--rose);clip-path:polygon(10% 4%,60% 0,96% 22%,100% 70%,70% 100%,20% 94%,0 56%)}
.note:nth-child(2)::before{background:var(--mint);clip-path:polygon(4% 20%,48% 0,92% 10%,100% 60%,76% 96%,28% 100%,0 70%)}
.note:nth-child(3)::before{background:var(--lilac);clip-path:polygon(14% 0,66% 6%,100% 34%,92% 84%,50% 100%,6% 88%,0 36%)}

/* ---------- category page head ---------- */
.phead{padding:clamp(36px,6vw,76px) 0 clamp(52px,7vw,92px)}
.phead-in{grid-template-columns:1fr minmax(0,.92fr)}
.phead-in.phead-solo{grid-template-columns:1fr;max-width:42rem}
.phead h1{font-size:clamp(2.5rem,5.6vw,4.2rem);margin-bottom:18px}
.phead-coral{--k:var(--coral)} .phead-teal{--k:var(--teal)} .phead-ochre{--k:var(--ochre)} .phead-plum{--k:var(--plum)}
.phead .kicker{color:var(--ink)}

/* ---------- hotel cards ---------- */
.hotels-sec{padding:12px 0 clamp(56px,7vw,96px)}
.hotels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,5vw,64px) clamp(40px,4.4vw,60px);isolation:isolate}
.hotels-single{grid-template-columns:minmax(0,760px);justify-content:start}
.hotel{position:relative;isolation:isolate;display:flex}
.hotel-card{position:relative;background:var(--white);border:2px solid var(--ink);padding:clamp(26px,3vw,38px);box-shadow:0 12px 26px rgba(33,30,28,.10);width:100%}
.hotel-accent,.hotel::before{position:absolute;z-index:-1;display:block}
.hotel-accent{width:140px;height:140px;background:var(--a1);filter:none}
.hotel::before{content:"";width:150px;height:96px;background:var(--a2);clip-path:polygon(0 14%,22% 0,48% 10%,80% 2%,100% 22%,94% 58%,100% 90%,62% 100%,30% 88%,6% 100%,4% 60%)}
.hotel-coral{--a1:var(--coral);--a2:var(--rose)}
.hotel-teal{--a1:var(--teal);--a2:var(--mint)}
.hotel-ochre{--a1:var(--ochre);--a2:var(--butter)}
.hotel-plum{--a1:var(--plum);--a2:var(--lilac)}
.corner-tr .hotel-accent{top:-34px;right:-34px}  .corner-tr::before{top:-14px;right:40px}
.corner-bl .hotel-accent{bottom:-34px;left:-34px} .corner-bl::before{bottom:-16px;left:44px}
.corner-tl .hotel-accent{top:-34px;left:-34px}   .corner-tl::before{top:-16px;left:42px}
.corner-br .hotel-accent{bottom:-34px;right:-34px}.corner-br::before{bottom:-14px;right:40px}
.hotel-place{font-weight:700;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:9px}
.hotel-place::before{content:"";width:14px;height:12px;background:var(--a1);clip-path:polygon(0 18%,40% 0,100% 12%,86% 60%,100% 100%,30% 88%,6% 100%)}
.hotel-name{font-size:clamp(1.55rem,2.3vw,1.9rem);margin-bottom:16px}
.hotel-card p:not(.hotel-place){color:var(--ink)}
.tags{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{border:1.5px solid var(--ink);border-radius:999px;padding:3px 13px 4px;font-size:.84rem;font-weight:600;line-height:1.4}

/* ---------- other categories ---------- */
.others{padding:8px 0 clamp(48px,6vw,80px)}
.others-h{font-family:var(--display);font-weight:600;font-size:1.3rem;margin-bottom:18px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:18px 22px}
.chip{filter:var(--lift-lo)}
.chip a{display:block;padding:14px 30px 15px;font-family:var(--display);font-weight:600;font-size:1.12rem;text-decoration:none;background:var(--ch);color:var(--ink);transition:transform .18s ease}
.chip a:hover{transform:translateY(-2px) rotate(-1deg)}
.chip a:focus-visible{background:var(--ink);color:var(--white);outline:none}
.chip-coral{--ch:var(--rose)} .chip-teal{--ch:var(--mint)} .chip-ochre{--ch:var(--butter)} .chip-plum{--ch:var(--lilac)}

/* ---------- plain text pages ---------- */
.plain{padding:clamp(40px,6vw,80px) 0 clamp(64px,8vw,104px)}
.plain-in{max-width:44rem;margin:0 auto;padding:0 var(--gutter)}
.plain h1{font-size:clamp(2.4rem,5vw,3.4rem);margin-bottom:24px}
.plain h2{font-size:1.45rem;margin:2.2em 0 .6em}
.plain .lede{font-size:1.22rem;color:var(--ink-soft)}
.plain .updated{font-size:.9rem;color:var(--ink-soft)}
.plain a{color:var(--teal);text-decoration-thickness:2px;text-underline-offset:3px}
.plain ul{padding-left:1.2em;margin:0 0 1em}
.plain li{margin-bottom:.35em}

/* ---------- footer ---------- */
.foot{position:relative;background:var(--plum);color:var(--white);margin-top:48px;padding:clamp(52px,6vw,76px) 0 28px}
.foot::before,.foot::after{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 2px);clip-path:polygon(0% 100%,0.00% 23%,1.67% 11%,3.33% 46%,5.00% 5%,6.67% 38%,8.33% 26%,10.00% 4%,11.67% 36%,13.33% 3%,15.00% 30%,16.67% 5%,18.33% 6%,20.00% 30%,21.67% 58%,23.33% 9%,25.00% 16%,26.67% 44%,28.33% 66%,30.00% 40%,31.67% 28%,33.33% 68%,35.00% 3%,36.67% 60%,38.33% 20%,40.00% 10%,41.67% 8%,43.33% 22%,45.00% 57%,46.67% 13%,48.33% 41%,50.00% 45%,51.67% 26%,53.33% 38%,55.00% 4%,56.67% 4%,58.33% 14%,60.00% 48%,61.67% 30%,63.33% 22%,65.00% 41%,66.67% 32%,68.33% 21%,70.00% 56%,71.67% 49%,73.33% 17%,75.00% 40%,76.67% 37%,78.33% 61%,80.00% 51%,81.67% 20%,83.33% 69%,85.00% 8%,86.67% 29%,88.33% 53%,90.00% 11%,91.67% 34%,93.33% 3%,95.00% 47%,96.67% 54%,98.33% 40%,100.00% 61%,100% 100%)}
.foot::before{height:40px;background:var(--lilac);transform:scaleX(-1);margin-bottom:-6px}
.foot::after{height:28px;background:var(--plum)}
.foot-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.foot-name{font-family:var(--display);font-weight:600;font-size:1.6rem;margin-bottom:10px}
.foot-about p:not(.foot-name){max-width:28em;opacity:.92}
.foot-h{font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--butter);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:8px}
.foot a{color:var(--white);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.foot a:hover{border-bottom-color:var(--butter)}
.foot :focus-visible{outline-color:var(--butter)}
.foot-close{max-width:var(--max);margin:44px auto 0;padding:22px var(--gutter) 0;font-size:.9rem;opacity:.85;border-top:1px solid rgba(255,255,255,.22)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .notes{grid-template-columns:1fr;max-width:36rem}
  .note{display:grid;grid-template-columns:62px 1fr;column-gap:22px}
  .note-badge{grid-row:span 2;margin:0}
  .note::before{left:12px}
}
@media (max-width:860px){
  .menu-btn{display:inline-flex}
  .catnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid #efe9e6;box-shadow:0 14px 22px rgba(33,30,28,.12)}
  .topbar.open .catnav{display:block}
  .catnav ul{flex-direction:column;gap:0;padding:8px var(--gutter) 18px}
  .catnav li{border-top:1px solid #f1ebe8}
  .catnav li:first-child{border-top:0}
  .catnav a{display:inline-block;padding:14px 0 12px;font-size:1.1rem}
  .catnav a::after{bottom:4px}
  .hero-in,.phead-in{grid-template-columns:1fr}
  .stack{max-width:560px}
  .cat-grid,.hotels{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-about{grid-column:1/-1}
}
@media (max-width:520px){
  .stack{padding:22px 24px 30px 14px}
  .cat{padding:0 14px 14px 0}
  .cat-base,.cat:nth-child(n) .cat-base{inset:14px 0 0 14px}
  .hotel-accent{width:84px;height:84px}
  .corner-tr .hotel-accent{top:-14px;right:-12px}
  .corner-bl .hotel-accent{bottom:-14px;left:-12px}
  .corner-tl .hotel-accent{top:-14px;left:-12px}
  .corner-br .hotel-accent{bottom:-14px;right:-12px}
  .hotel::before{width:110px;height:70px}
  .foot-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}