:root{--paper:#f6eedd;--paper2:#efe3c8;--ink:#2b2420;--red:#b23a2e;--navy:#1f3a5f;--gold:#c8893a}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 Georgia,"Times New Roman",serif}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;line-height:1.12;margin:0}a{color:var(--red)}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1.2rem;background:var(--navy);border-bottom:4px solid var(--red)}
.brand{display:flex;gap:.6rem;align-items:center;color:var(--paper);text-decoration:none;font-weight:bold;letter-spacing:.04em}
nav a{color:var(--paper);text-decoration:none;margin-left:1rem;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}nav a.on,nav a:hover{color:var(--gold)}
.menu{display:none;background:none;border:0;color:var(--paper);font-size:1.6rem}
.hero,.banner,.card,.tile{background-size:cover,cover,cover;background-position:center}
.hero{min-height:min(88vh,760px);display:grid;place-items:center;text-align:center;color:#fffaf0;padding:3rem 1rem}
.hin{max-width:900px}.hmark{filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.hero h1{font-size:clamp(2.2rem,6vw,4.6rem);font-style:italic;color:#fffaf0;text-shadow:0 3px 18px rgba(0,0,0,.6);margin:.6rem 0 1.2rem}
.btn{display:inline-block;padding:.85rem 1.8rem;background:var(--red);color:#fff;text-decoration:none;border-radius:3px;box-shadow:3px 3px 0 var(--navy);letter-spacing:.05em}.btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--navy)}
.divider{display:flex;align-items:center;gap:1rem;max-width:700px;margin:2.2rem auto;padding:0 1rem}.divider span{flex:1;border-top:2px solid var(--gold)}
.cards{max-width:1200px;margin:auto;padding:0 1.2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;perspective:1000px}
.card{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;display:flex;align-items:flex-end;text-decoration:none;border:5px solid #fffaf0;box-shadow:0 6px 16px rgba(60,40,20,.25);transition:transform .35s cubic-bezier(.2,.8,.2,1.2),box-shadow .35s}
.card:hover,.card:focus,.card:active{transform:translateY(-10px) scale(1.04) rotateX(4deg);box-shadow:0 24px 40px rgba(60,40,20,.4)}
.cn{padding:1rem 1.2rem;color:#fffaf0;font:italic bold clamp(1.4rem,2.6vw,2rem) Georgia,serif;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.banner{min-height:min(52vh,460px);display:grid;place-items:end center;text-align:center;padding:2.5rem 1rem;color:#fffaf0}
.banner h1{font-size:clamp(2.4rem,7vw,4.4rem);color:#fffaf0;text-shadow:0 3px 16px rgba(0,0,0,.6)}.banner .cap{color:#fff3d6;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.cap{font-style:italic;color:var(--red)}
.grid{max-width:1250px;margin:auto;padding:2.5rem 1.2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.8rem}
.tile{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;border:6px solid #fffaf0;box-shadow:0 8px 20px rgba(60,40,20,.25);display:flex;align-items:flex-end;color:#fffaf0;text-decoration:none;transition:transform .3s,box-shadow .3s}
.tile:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 18px 32px rgba(60,40,20,.35)}
.tile::before{content:"";position:absolute;inset:0;background:rgba(246,238,221,.18)}
.tin{position:relative;padding:1.1rem 1.2rem;width:100%;background:linear-gradient(0deg,rgba(15,20,35,.8),rgba(15,20,35,0))}
.tin h3{color:#fffaf0;font-size:1.45rem}.tin .cap{color:#ffe1b3;margin:.3rem 0 0;font-size:.92rem}.av{margin:.2rem 0 0;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}.tin p{margin:.3rem 0}
.ribbon{position:absolute;top:22px;right:-48px;transform:rotate(38deg);background:var(--red);color:#fffaf0;padding:.35rem 3.4rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 3px 8px rgba(0,0,0,.3)}
.stamp{position:absolute;top:10px;left:10px;width:46px;height:46px;opacity:.55}
.tile.custom{outline:3px dashed var(--gold);outline-offset:-14px}
.pb{display:inline-block;margin:.3rem 0;padding:.3rem .9rem;border:2px solid var(--gold);border-radius:20px;background:#fffaf0;color:var(--navy);font-weight:bold;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}
.pbb{font-size:.95rem;margin:.6rem 0 1rem}
.own{text-align:center;padding:2.8rem 1.2rem;background:var(--paper2);border-top:2px solid var(--gold)}.own h2{color:var(--navy);font-size:2rem}
.svc{padding:2.5rem 1.2rem}.svcin{max-width:760px;margin:auto;text-align:center;padding:2rem;border-radius:8px;color:#fffaf0;background:repeating-linear-gradient(180deg,#14263f 0 46px,#1a3050 46px 92px);border:4px double #fffaf0;outline:4px solid var(--red)}
.svc h2{color:#fffaf0;font-size:2rem;margin:.4rem 0}.btn.wht{background:#fffaf0;color:var(--red);box-shadow:3px 3px 0 var(--red)}
.story{max-width:680px;margin:auto;padding:2.5rem 1.2rem;text-align:center;font-size:1.12rem}.big{font:italic 1.5rem Georgia,serif;color:var(--red)}
footer{background:var(--navy);color:var(--paper);text-align:center;padding:2rem 1rem;border-top:4px solid var(--red)}footer a{color:var(--gold)}footer .cap{color:var(--gold);font-size:1.15rem;margin:.4rem 0}.small{font-size:.8rem;opacity:.85}
/* animated mark */
.amark .pose{opacity:0;transition:opacity .45s ease,transform .45s ease}
.sticky-mark{position:fixed;right:18px;bottom:18px;width:92px;height:92px;z-index:15;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));transition:opacity .4s}
.sticky-mark.end{opacity:0}
.sticky-mark[data-pose=hand] .p-hand,.sticky-mark[data-pose=side] .p-side,.sticky-mark[data-pose=back] .p-back,.amark.still .p-hand{opacity:1}
.sticky-mark:not([data-pose]) .p-hand{opacity:1}
.endmark{width:120px;height:120px;margin:0 auto .8rem}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.card:hover,.tile:hover{transform:none}}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}nav a{margin-left:.6rem;font-size:.72rem}}
@media(max-width:760px){.menu{display:block}nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);flex-direction:column;padding:.5rem 0}body.open nav{display:flex}nav a{margin:.5rem 1.2rem;font-size:.9rem}.cards{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.sticky-mark{width:64px;height:64px}.hero{min-height:70vh}}
.ds{margin:.3rem 0 0;font-size:.92rem;line-height:1.35;color:#fffaf0}
.tile2{display:flex;flex-direction:column;background:#fffaf0;border:1px solid #e2d3b4;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(60,40,20,.14);text-decoration:none;color:var(--ink);transition:transform .3s,box-shadow .3s}
.tile2:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(60,40,20,.25)}
.tp{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px 12px 0 0;background-size:cover}
.tb2{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.2rem;flex:1}.tb2 h3{color:var(--navy);font-size:1.3rem}
.tb2 p{margin:.15rem 0}.tb2 .ds{color:var(--ink);font-size:.95rem}.tb2 .av{color:var(--navy);opacity:.75}
.share{margin-top:auto!important;padding-top:.5rem;color:var(--red);font-style:italic;font-size:.92rem}.share::before{content:"\2665  "}
.tile2.custom{outline:3px dashed var(--gold);outline-offset:-8px}.tile2.custom .pb{align-self:flex-start}
.banner .sub{color:#fffaf0;font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase;margin:.4rem 0 0;text-shadow:0 2px 8px rgba(0,0,0,.7)}

.ptypes{text-align:center;padding:1rem 0 .5rem}.ptypes h2{color:var(--navy)}.ptypes .psub{max-width:640px;margin:.3rem auto 1.4rem;padding:0 1rem}.ptypes .grid{text-align:left}