:root{
  --bg:#f6f3ec;
  --surface:#fffdf8;
  --ink:#2f3a34;
  --muted:#6b776f;
  --sage:#7f9a88;
  --sage-dark:#587263;
  --clay:#c49a82;
  --line:#e4dfd2;
  --radius:16px;
  --on-accent:#fff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#1d2421;--surface:#252e2a;--ink:#ece8de;--muted:#a3b0a7;--sage:#8fae9a;--sage-dark:#a9c4b3;--clay:#d3ad96;--line:#34403a;--on-accent:#17211c}
}
:root[data-theme="dark"]{--bg:#1d2421;--surface:#252e2a;--ink:#ece8de;--muted:#a3b0a7;--sage:#8fae9a;--sage-dark:#a9c4b3;--clay:#d3ad96;--line:#34403a;--on-accent:#17211c}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Inter,system-ui,sans-serif}
a{color:var(--sage-dark)}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1.15;margin:0}
.hero h1,.linkpage h1{text-transform:uppercase}

.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;padding:12px 20px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-family:"Cormorant Garamond",serif;font-size:1.4rem;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav nav{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none}
.nav nav::-webkit-scrollbar{display:none}
.nav nav a{color:var(--muted);text-decoration:none;font-size:.92rem;white-space:nowrap}
.nav nav a:hover{color:var(--sage-dark)}

section{max-width:1040px;margin:0 auto;padding:56px 20px 8px}
section h2{font-size:2.1rem;margin-bottom:6px}
.sub{color:var(--muted);margin:0 0 22px}

.hero{padding-top:80px;padding-bottom:24px}
.avatar{width:180px;height:180px;border-radius:50%;overflow:hidden;margin:0 0 20px;border:4px solid var(--surface);box-shadow:0 8px 24px rgba(60,70,60,.18);background:linear-gradient(135deg,var(--sage),var(--clay));display:grid;place-items:center;color:#fff;font-family:"Cormorant Garamond",serif;font-size:2.6rem}
.avatar img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--clay);margin:0 0 10px}
.hero h1{font-size:clamp(2.6rem,9vw,4.6rem);position:relative;display:inline-block;padding-bottom:.13em}
.hero h1{animation:name-reveal 1.15s cubic-bezier(.2,.75,.25,1) both}
.hero h1::after{content:"";position:absolute;left:7%;right:7%;bottom:0;height:4px;border-radius:50%;background:var(--clay);clip-path:polygon(0 40%,24% 20%,48% 42%,72% 12%,100% 35%,99% 72%,70% 56%,45% 82%,20% 60%,1% 88%);transform:scaleX(0);transform-origin:left;animation:pencil-stroke .75s 1s cubic-bezier(.25,.8,.25,1) forwards}
@keyframes pencil-stroke{to{transform:scaleX(1)}}
@keyframes name-reveal{
  from{opacity:0;transform:translateY(22px);filter:blur(8px);letter-spacing:.16em}
  to{opacity:1;transform:translateY(0);filter:blur(0);letter-spacing:normal}
}
.lead{max-width:560px;font-size:1.1rem;color:var(--muted);margin:16px 0 26px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-highlights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px;margin:38px auto 0;text-align:left}
.highlight-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:0 8px 24px rgba(60,70,60,.08);transition:transform .25s,box-shadow .25s}
.highlight-image{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--line)}
.highlight-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s}
.highlight-copy{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:16px 18px 18px}
.highlight-kicker{margin:0;color:var(--sage-dark);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.highlight-copy h2,.highlight-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.55rem;font-weight:600;line-height:1.15}
.highlight-link{margin-top:5px;color:var(--sage-dark);font-size:.88rem;font-weight:500;text-decoration:none}
.highlight-link span{display:inline-block;transition:transform .2s}
@media (hover:hover){.highlight-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(60,70,60,.14)}.highlight-card:hover .highlight-image img{transform:scale(1.04)}.highlight-card:hover .highlight-link span{transform:translate(2px,-2px)}}
@media (max-width:560px){.hero-highlights{grid-template-columns:1fr;max-width:420px}.highlight-copy{padding:14px 16px 16px}}

.btn{display:inline-block;padding:11px 22px;border-radius:999px;background:var(--sage-dark);color:var(--on-accent);text-decoration:none;font-weight:500}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent;color:var(--sage-dark);border:1px solid var(--sage)}
.center{text-align:center;margin-top:26px}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
a.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(60,70,60,.12)}
.card.pad,.card .body{padding:18px}
.card h3{font-size:1.35rem;margin-bottom:6px}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.thumb{aspect-ratio:4/5;background:linear-gradient(135deg,var(--sage),var(--clay));display:grid;place-items:center;color:#fff;font-family:"Cormorant Garamond",serif;font-size:1.3rem;text-align:center;padding:12px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tag{display:inline-block;font-size:.75rem;color:var(--sage-dark);background:color-mix(in srgb,var(--sage) 18%,transparent);padding:2px 10px;border-radius:999px;margin:8px 6px 0 0}
.meta{font-size:.8rem;color:var(--muted);margin-top:8px}

.list{display:grid;gap:14px}
details.entry{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px}
details.entry summary{cursor:pointer;list-style:none}
details.entry summary::-webkit-details-marker{display:none}
details.entry h3{font-size:1.4rem}
details.entry .meta{margin-top:2px}
.body-text{margin-top:14px;white-space:pre-line}
.poem{font-family:"Cormorant Garamond",serif;font-size:1.2rem;line-height:1.8}

footer{margin-top:72px;padding:48px 20px 36px;text-align:center;background:var(--surface);border-top:1px solid var(--line)}
footer h2{font-size:1.9rem;margin-bottom:10px}
.social{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.small{color:var(--muted);font-size:.82rem;margin-top:24px}

/* ===== Responsive: phone first, then tablet and PC ===== */
section{scroll-margin-top:96px}
body{-webkit-text-size-adjust:100%}
.nav{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.nav{flex-wrap:wrap;gap:2px 16px}
.nav nav{width:100%;gap:6px}
.nav nav a{padding:10px 10px;min-height:44px;display:inline-flex;align-items:center}
.btn{min-height:44px}
.hero-actions .btn{flex:1 1 140px;text-align:center}
.card .thumb{aspect-ratio:4/5}
.grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:420px){
  .grid{grid-template-columns:1fr}
  section{padding-top:44px}
  .hero{padding-top:56px;text-align:center}
  .avatar{margin-left:auto;margin-right:auto}
  .lead{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
}
@media (min-width:640px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:820px){
  .nav{flex-wrap:nowrap;padding-top:14px;padding-bottom:14px}
  .nav nav{width:auto;margin-left:auto;gap:4px}
  .nav nav a{padding:8px 12px;min-height:0}
  .hero-actions .btn{flex:0 0 auto}
  section{padding-left:32px;padding-right:32px}
}
@media (min-width:1100px){
  section{max-width:1180px;padding-top:80px}
  .hero{padding-top:110px;padding-bottom:40px}
  .avatar{width:220px;height:220px;font-size:3.4rem}
  .lead{font-size:1.25rem;max-width:640px}
  .grid{grid-template-columns:repeat(4,1fr);gap:24px}
  .grid.three{grid-template-columns:repeat(3,1fr)}
  section h2{font-size:2.6rem}
  .list{max-width:820px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card{transition:none}
  .hero h1,.hero h1::after{animation:none;filter:none}
  .hero h1::after{transform:scaleX(1)}
  .highlight-card,.highlight-image img,.highlight-link span{transition:none}
}

/* PC polish: align header with content and center the intro */
@media (min-width:820px){
  .nav{padding-left:max(32px,calc((100% - 1180px)/2 + 32px));padding-right:max(32px,calc((100% - 1180px)/2 + 32px))}
  .hero{text-align:center}
  .hero .avatar,.hero .lead{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
}

/* ===== Art categories ===== */
.art-block{margin-top:34px}
.art-block:first-child{margin-top:8px}
.art-title{font-size:1.6rem;margin-bottom:14px}
.art-grid{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
.tile{margin:0}
.tile .thumb{border-radius:12px;font-size:.85rem;padding:6px;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(60,70,60,.08)}
.tile .thumb img{transition:transform .5s ease}
.tile figcaption{font-size:.78rem;color:var(--muted);margin-top:6px;text-align:center;line-height:1.3}
.more{font:inherit;font-weight:500;cursor:pointer;padding:10px 24px;min-height:44px;border-radius:999px;border:1px solid var(--sage);background:transparent;color:var(--sage-dark);transition:background .2s,color .2s,transform .2s}
@media (min-width:900px){
  .art-grid{grid-template-columns:repeat(5,1fr);gap:18px}
  .tile .thumb{font-size:1.05rem}
  .tile figcaption{font-size:.9rem}
}

/* ===== Blog extras ===== */
.entry-img{width:100%;max-height:420px;object-fit:cover;border-radius:12px;margin-top:14px;display:block}
.origin{display:inline-block;margin-top:14px;font-size:.9rem}
details.entry[open] summary h3{color:var(--sage-dark)}

/* ===== Gentle hover effects (only on devices with a mouse) ===== */
.nav nav a,.social a,.origin,footer a{position:relative}
.btn,.more,.card,.tile .thumb,details.entry,.thumb img,.avatar{transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--sage-dark);outline-offset:3px;border-radius:6px}
@media (hover:hover){
  .nav nav a::after,.social a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
  .social a::after{left:0;right:0;bottom:-2px}
  .nav nav a:hover::after,.social a:hover::after{transform:scaleX(1)}
  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(88,114,99,.28);opacity:1}
  .btn.ghost:hover{background:var(--sage-dark);color:var(--on-accent)}
  .more:hover{background:var(--sage-dark);color:var(--on-accent);transform:translateY(-1px)}
  .tile:hover .thumb{transform:translateY(-4px);box-shadow:0 12px 24px rgba(60,70,60,.2)}
  .tile:hover .thumb img{transform:scale(1.07)}
  a.card:hover .thumb img{transform:scale(1.05)}
  .card .thumb{overflow:hidden}
  details.entry:hover{border-color:var(--sage);box-shadow:0 6px 16px rgba(60,70,60,.08)}
  .avatar:hover{transform:scale(1.04) rotate(-2deg)}
}
@media (prefers-reduced-motion:reduce){
  .btn:hover,.tile:hover .thumb,.avatar:hover{transform:none}
  .tile .thumb img{transition:none}
}

/* ===== Art category row ===== */
.cat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cat{position:relative;aspect-ratio:1/1;border:0;padding:0;border-radius:var(--radius);overflow:hidden;cursor:pointer;color:#fff;font:inherit;text-align:left;box-shadow:0 2px 10px rgba(60,70,60,.12);transition:transform .25s ease,box-shadow .25s ease,outline-color .2s;outline:3px solid transparent;outline-offset:2px}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cat-0{background:repeating-linear-gradient(135deg,#8d9a92 0 2px,#a3afa7 2px 7px)}
.cat-1{background:linear-gradient(135deg,#c49a82,#8fae9a 55%,#d8b4a0)}
.cat-2{background:radial-gradient(circle,rgba(255,255,255,.55) 1.2px,transparent 1.6px) 0 0/10px 10px,#3f4d46}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,28,24,.72),rgba(20,28,24,0) 62%)}
.cat-label{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:10px;display:flex;flex-direction:column;gap:1px}
.cat-name{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.05rem;line-height:1.1}
.cat-count{font-size:.7rem;opacity:.85}
.cat.on{outline-color:var(--clay)}
.cat-panel{margin-top:26px;animation:rise .35s ease}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-head .art-title{margin:0}
.more.small{padding:6px 16px;min-height:36px;font-size:.88rem}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (min-width:640px){
  .cat-row{gap:18px}
  .cat-name{font-size:1.4rem}
  .cat-count{font-size:.85rem}
  .cat-label{padding:16px}
}
@media (hover:hover){
  .cat:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(60,70,60,.25)}
  .cat:hover img{transform:scale(1.07)}
}
@media (prefers-reduced-motion:reduce){.cat-panel{animation:none}.cat:hover{transform:none}}

/* ===== Travel embeds ===== */
#travel-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,326px),1fr))}
.travel-cover{display:block;color:inherit;text-decoration:none;line-height:0}
.travel-card .embed{width:100%;height:600px;border:0;display:block;background:var(--bg)}
.travel-card .meta .origin{margin-top:0;font-size:inherit}


/* ===== About, theme button, chips ===== */
.about{max-width:680px}
.about p{margin:0 0 14px;color:var(--ink)}
.theme-btn{order:2;margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.15rem;cursor:pointer;transition:transform .25s,background .25s,border-color .25s}
.nav nav{order:3}
@media (min-width:820px){.nav nav{order:2}.theme-btn{order:3;margin-left:8px}}
@media (hover:hover){.theme-btn:hover{transform:rotate(18deg);border-color:var(--sage)}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{font:inherit;font-size:.88rem;cursor:pointer;padding:6px 16px;min-height:36px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);transition:background .2s,color .2s,border-color .2s}
.chip.on{background:var(--sage-dark);color:var(--on-accent);border-color:var(--sage-dark)}
@media (hover:hover){.chip:hover{border-color:var(--sage);color:var(--ink)}.chip.on:hover{color:var(--on-accent)}}
.tags{margin-top:6px}
.tags .tag{margin-top:2px}
button.next{margin-top:18px;display:block;text-align:left}
.quote blockquote{margin:0 0 12px;font-family:"Cormorant Garamond",serif;font-size:1.25rem;line-height:1.5}
.quote figcaption{color:var(--muted);font-size:.9rem}
.quote{margin:0}

/* ===== Lightbox ===== */
body.noscroll{overflow:hidden}
.lb{position:fixed;inset:0;z-index:50;background:rgba(14,20,17,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 12px 24px;animation:rise .25s ease}
.lb[hidden]{display:none}
.lb-fig{margin:0;position:relative;max-width:100%;max-height:calc(100vh - 130px);display:flex}
.lb-fig img{max-width:100%;max-height:calc(100vh - 130px);object-fit:contain;border-radius:8px;display:block;-webkit-touch-callout:none;user-select:none}
.lb-cap{color:#e9e5da;font-size:.92rem;text-align:center}
.lb-btn{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;width:46px;height:46px;border-radius:50%;font-size:1.7rem;line-height:1;cursor:pointer;transition:background .2s}
.lb-btn:hover{background:rgba(255,255,255,.28)}
.lb-close{top:10px;right:12px}
.lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.lb-next{right:10px;top:50%;transform:translateY(-50%)}
.lb-btn[hidden]{display:none}
.tile.zoom{cursor:zoom-in}
.tile.zoom:focus-visible{outline:2px solid var(--sage-dark);outline-offset:3px;border-radius:12px}

/* ===== Watermark layer on art (discourages casual copying) ===== */
.wm{position:relative}
.wm::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.22;background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='110'%3E%3Ctext x='8' y='66' transform='rotate(-24 95 55)' font-family='sans-serif' font-size='14' fill='white' stroke='black' stroke-width='.4'%3E%C2%A9 equivocalswain%3C/text%3E%3C/svg%3E")}
.tile img,.lb-fig img,.cat img{-webkit-user-drag:none;-webkit-touch-callout:none}

/* ===== Links page ===== */
.linkpage{max-width:460px;margin:0 auto;padding:56px 20px 40px;text-align:center}
.linkpage .avatar{margin:0 auto 18px}
.linkpage h1{font-size:2.3rem}
.linkpage .lead{margin:8px auto 26px}
.linklist{display:grid;gap:12px}
.linklist a{display:block;padding:14px 18px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500;transition:transform .25s,background .25s,color .25s,border-color .25s}
@media (hover:hover){.linklist a:hover{transform:translateY(-2px);background:var(--sage-dark);color:var(--on-accent);border-color:var(--sage-dark)}}

/* Floating WhatsApp contact button */
.whatsapp-float{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:30;width:60px;height:60px;display:grid;place-items:center;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.24);transition:transform .2s,box-shadow .2s}
.whatsapp-float[hidden]{display:none}
.whatsapp-float svg{width:34px;height:34px;fill:currentColor}
.whatsapp-float:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media (hover:hover){.whatsapp-float:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 26px rgba(0,0,0,.3)}}
@media (prefers-reduced-motion:reduce){.whatsapp-float{transition:none}}