:root{--ivory:#F7F3ED;--cream:#F5EFE7;--sand:#EDE6DC;--deep:#1D1A17;--ink:#1D1A17;--muted:#554E45;--muted-2:#6E665C;--line:#DCD3C7;--line-2:#C8BCAB;--accent:#8E6A43;--accent-2:#B08A5E;--accent-deep:#CDA271;--accent-ink:#7A5936;--on-deep:#F3EDE4;--on-deep-dim:#B3A899;--serif:"Fraunces",Palatino,Georgia,serif;--sans:"Jost","Century Gothic",Futura,system-ui,sans-serif;--pad:clamp(1.1rem,4vw,2.5rem);--e-out:cubic-bezier(.22,.61,.36,1)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}body{background:var(--cream);color:var(--ink);font-family:var(--serif);font-size:1.06rem;line-height:1.65;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}img{display:block;max-width:100%;height:auto}a{color:var(--accent-ink)}.wrap{width:min(64rem,100% - var(--pad)*2);margin-inline:auto}.narrow{width:min(46rem,100%);margin-inline:auto}.mast{position:sticky;top:0;z-index:60;background:rgba(245,239,231,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.75rem}.mast a.home{text-decoration:none;color:inherit;display:inline-block;min-height:44px;padding-block:.15rem}.mast b{display:block;font-family:var(--serif);font-weight:400;font-size:1.22rem;line-height:1.15}.mast small{display:block;font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);margin-top:.1rem}.mast nav{display:flex;gap:.2rem;flex-wrap:wrap;justify-content:flex-end}.mast nav a{font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:.55rem .6rem;min-height:44px;display:inline-flex;align-items:center;transition:color .25s var(--e-out)}.mast nav a:hover,.mast nav a[aria-current]{color:var(--accent-ink)}.top{background:var(--deep);color:var(--on-deep);padding-block:clamp(3rem,8vw,5.5rem)}.crumb{font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep)}.crumb a{color:var(--accent-deep);text-decoration:none}.crumb a:hover{text-decoration:underline}h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,5.5vw,3.5rem);line-height:1.06;letter-spacing:-.015em;margin-top:.7rem;max-width:20ch}h1 em{font-style:italic;color:var(--accent-deep)}.lede{color:var(--on-deep-dim);font-size:clamp(1.08rem,2vw,1.3rem);line-height:1.55;max-width:56ch;margin-top:1.2rem}.acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}.btn{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:.95rem 1.5rem;min-height:48px;display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:#fff;border:1px solid var(--accent);transition:background .25s var(--e-out),color .25s var(--e-out)}.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}.btn.ghost{background:0 0;color:var(--on-deep);border-color:rgba(243,237,228,.45)}.btn.ghost:hover{background:var(--on-deep);color:var(--deep)}main{padding-block:clamp(2.6rem,6vw,4.5rem)}details,h2,section{scroll-margin-top:6rem}section+section{margin-top:clamp(2.4rem,5vw,3.6rem)}h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.18;letter-spacing:-.01em}h2+p,h3+p{margin-top:.7rem}h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin-top:1.6rem}p{max-width:64ch;margin-top:1rem;text-wrap:pretty}p:first-child{margin-top:0}.kicker{font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.5rem}.rule{height:1px;background:var(--line-2);margin-block:clamp(2rem,4vw,3rem)}ul.plain{list-style:none;margin-top:1rem;max-width:64ch}ul.plain li{position:relative;padding-left:1.6rem;margin-top:.6rem}ul.plain li::before{content:"";position:absolute;left:0;top:.72em;width:.42rem;height:.42rem;border:1px solid var(--accent);border-radius:50%}.tl{display:grid;gap:1.1rem;margin-top:1.6rem}@media(min-width:760px){.tl{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.4rem}}.tl div{border-top:1px solid var(--line-2);padding-top:.9rem}.tl h3{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 .35rem}.tl b{display:block;font-family:var(--serif);font-weight:400;font-size:1.12rem;margin-bottom:.3rem}.tl p{font-size:.97rem;color:var(--muted);margin:0;max-width:none}.pair{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line-2);background:var(--ivory);margin-top:1.4rem;overflow:hidden}.pair figure{margin:0}.pair figure+figure{border-left:1px solid var(--line)}.pair img{width:100%;aspect-ratio:2/1;object-fit:cover}.pair figcaption{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--muted);text-align:center;padding:.6rem .5rem;border-top:1px solid var(--line)}.pair figure+figure figcaption{color:var(--accent)}.note{font-family:var(--serif);font-style:italic;color:var(--muted-2);font-size:.98rem;margin-top:.8rem}.sheet{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;border:1px solid var(--line-2);background:var(--ivory);padding:clamp(1.2rem,3vw,1.8rem);margin-top:1.6rem;text-decoration:none;color:inherit;transition:transform .3s var(--e-out),box-shadow .3s var(--e-out)}.sheet:hover{transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(29,26,23,.5)}.sheet img{width:104px;border:1px solid var(--line-2);background:#fff;flex:0 0 auto}.sheet b{display:block;font-family:var(--serif);font-weight:400;font-size:1.28rem}.sheet span{display:block;font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-top:.5rem}.sheet p{font-size:.98rem;color:var(--muted);margin-top:.35rem}details{border-top:1px solid var(--line-2);padding-block:1rem;max-width:64ch}details summary{font-family:var(--serif);font-size:1.14rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline;min-height:44px;padding-block:.35rem}details summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}details summary::-webkit-details-marker{display:none}details summary::after{content:"+";font-family:var(--sans);color:var(--accent-ink);font-size:1.1rem}details[open] summary::after{content:"–"}details p{font-size:1rem;color:var(--muted);margin-top:.7rem}.close{background:var(--deep);color:var(--on-deep);padding-block:clamp(2.6rem,6vw,4rem);margin-top:clamp(3rem,7vw,5rem)}.close h2{color:var(--on-deep)}.close p{color:var(--on-deep-dim)}.close .btn.ghost{color:var(--on-deep)}.others{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}.others a{font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-deep-dim);text-decoration:none;border:1px solid rgba(243,237,228,.28);padding:.7rem 1rem;min-height:44px;display:inline-flex;align-items:center}.others a:hover{color:var(--deep);background:var(--on-deep);border-color:var(--on-deep)}footer{background:var(--deep);color:var(--on-deep-dim);padding-block:2rem;border-top:1px solid rgba(243,237,228,.14);font-size:.92rem}footer a{color:var(--on-deep-dim)}footer .wrap{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between}@media(max-width:820px){.mast .wrap{flex-wrap:wrap;row-gap:.25rem;padding-block:.6rem}.mast a.home{flex:1 1 100%;min-height:0}.mast b{font-size:1.06rem;white-space:nowrap}.mast small{font-size:.75rem;letter-spacing:.16em}.mast nav{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:.05rem;scrollbar-width:none;-ms-overflow-style:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}.mast nav::-webkit-scrollbar{display:none}.mast nav a{white-space:nowrap;padding:.5rem .55rem;min-height:40px}html{scroll-padding-top:8rem}details,h2,section{scroll-margin-top:8rem}.sheet img{width:84px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}.langsw{display:inline-flex;gap:.55rem;align-items:center;margin-inline:.7rem .2rem}.langsw a{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:inherit;opacity:.6;padding:.35rem .1rem;min-height:32px;display:inline-flex;align-items:center;line-height:1;border-bottom:1px solid transparent;transition:opacity .3s ease,border-color .3s ease}.langsw a:hover{opacity:1}.langsw a[aria-current]{opacity:1;border-bottom-color:currentColor}.wrap.narrow{width:min(46rem,100% - var(--pad)*2)}
/* ── brand mark, Google rating and the QR badge, shared by every sub-page ──
   Mirrors index.html. The mark is fine-line work: it is hidden below 620px
   rather than shrunk into mush. */
.home{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
.mast-mark{height:2.2rem;width:auto;display:block;flex:none;opacity:.95}
@media(max-width:860px){.mast-mark{height:1.9rem}}
@media(max-width:620px){.mast-mark{height:2.7rem}}
/* Arabic runs right to left, so the mark leads from the right. */
[dir="rtl"] .home,[dir="rtl"] header>picture+h1{flex-direction:row-reverse}
[dir="rtl"] .mast-mark{margin-left:.55rem;margin-right:0}

.grate{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  font-size:.82rem;color:inherit}
.grate-stars{display:inline-flex;gap:1px;line-height:0}
.grate-stars svg{fill:#B08A5E}
.grate b{font-weight:600}
.grate-src{opacity:.72}
.grate-count{opacity:.72;filter:blur(3.5px);user-select:none}

.navqr{position:fixed;right:clamp(.4rem,1.1vw,1rem);top:50%;transform:translateY(-50%);
  z-index:70;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  background:rgba(247,243,237,.94);border:1px solid #DCD3C7;padding:.45rem .45rem .35rem;
  text-decoration:none;box-shadow:0 6px 22px rgba(29,26,23,.13)}
.navqr img{width:58px;height:58px;object-fit:contain;background:#F7F3ED;padding:4px;
  border:1px solid #8E6A43;border-radius:5px}
.navqr span{font-family:"Jost",system-ui,sans-serif;font-size:.52rem;letter-spacing:.18em;
  text-transform:uppercase;color:#6E665C;line-height:1.4;text-align:center}
[dir="rtl"] .navqr{right:auto;left:clamp(.4rem,1.1vw,1rem)}
@media(max-width:1024px){.navqr img{width:46px;height:46px}.navqr span{display:none}}
@media(max-width:780px){
  .navqr{top:auto;bottom:max(1.1rem,env(safe-area-inset-bottom,0px));
    left:max(.8rem,env(safe-area-inset-left,0px));right:auto;transform:none;z-index:95;
    flex-direction:row;gap:.5rem;padding:.35rem .6rem .35rem .35rem}
  [dir="rtl"] .navqr{left:auto;right:max(.8rem,env(safe-area-inset-right,0px))}
  .navqr img{width:42px;height:42px}
  .navqr span{display:block;font-size:.55rem;text-align:left}
}
/* ── the V mark, turning in 3D ──
   One slow turn on the vertical axis. The stacked bronze drop-shadows are the
   mark's thickness: they swap sides as it turns, so it reads as a solid object
   catching the light, not a flat picture wobbling.
   Smoothness: only transform and opacity move, so the GPU does it all and
   nothing repaints per frame. Each lighting is drawn once and faded in or
   out. Animating the drop-shadow filter itself could not run on the GPU
   (Chrome: unsupported property), so it repainted every frame. */
@keyframes vkTurn{
  0%,100%{transform:perspective(340px) rotateY(-38deg)}
  50%{transform:perspective(340px) rotateY(38deg)}
}
@keyframes vkLitL{0%,100%{opacity:1}25%,75%{opacity:0}}
@keyframes vkLitR{0%,25%,75%,100%{opacity:0}50%{opacity:1}}
.mast-mark,.foot-mark{
  filter:drop-shadow(1px 0 0 #7A5936) drop-shadow(1px 0 0 #664a2c) drop-shadow(1px .5px 0 #523b23) drop-shadow(3px 5px 5px rgba(29,26,23,.28)) brightness(.96);
  animation:vkTurn 8s cubic-bezier(.45,0,.55,1) infinite;transform-origin:50% 50%;backface-visibility:hidden}
.foot-mark{animation-duration:10s}
/* Where :has() works, the whole picture turns and the lit copies ride on it. */
/* 6px of clear space round every layer: phone GPUs can draw a seam at a
   turning layer's edge, so no edge may touch the drawing. Negative margin
   keeps the layout exactly as it was. */
picture:has(>.mast-mark),picture:has(>.foot-mark){display:block;position:relative;flex:none;line-height:0;width:fit-content;padding:6px;margin:-6px;
  transform-origin:50% 50%;backface-visibility:hidden;animation:vkTurn 8s cubic-bezier(.45,0,.55,1) infinite}
picture:has(>.foot-mark){width:fit-content;margin:-6px auto calc(.9rem - 6px);animation-duration:10s}
picture:has(>.foot-mark)>.foot-mark{margin:0}
[dir="rtl"] picture:has(>.mast-mark){margin-left:calc(.55rem - 6px)}
[dir="rtl"] picture:has(>.mast-mark)>.mast-mark{margin:0}
/* The img is the face of the mark. Behind it, the left-lit thickness; in
   front, the right-lit, brighter mark. Each fades out as the mark passes
   face-on, so the thickness is thin head-on and swaps sides — as before. */
picture:has(>.mast-mark)>img,picture:has(>.foot-mark)>img{transform:none;animation:none;filter:none}
picture:has(>.mast-mark)::before,picture:has(>.foot-mark)::before,
picture:has(>.mast-mark)::after,picture:has(>.foot-mark)::after{content:"";position:absolute;inset:0;padding:6px;box-sizing:border-box;pointer-events:none;
  background:url(/logo-mark.webp) center/contain no-repeat content-box;opacity:0;outline:1px solid transparent}
picture:has(>.mast-mark)::before,picture:has(>.foot-mark)::before{z-index:-1;
  filter:drop-shadow(1px 0 0 #7A5936) drop-shadow(1px 0 0 #664a2c) drop-shadow(1px .5px 0 #523b23) drop-shadow(3px 5px 5px rgba(29,26,23,.28)) brightness(.96);
  animation:vkLitL 8s linear infinite}
picture:has(>.mast-mark)::after,picture:has(>.foot-mark)::after{
  filter:drop-shadow(-1px 0 0 #7A5936) drop-shadow(-1px 0 0 #664a2c) drop-shadow(-1px .5px 0 #523b23) drop-shadow(-3px 5px 5px rgba(29,26,23,.28)) brightness(1.22);
  animation:vkLitR 8s linear infinite}
picture:has(>.foot-mark)::before,picture:has(>.foot-mark)::after{animation-duration:10s}
/* Many Windows users have reduced motion on: slow it right down, don't freeze it. */
@media(prefers-reduced-motion:reduce){.mast-mark,.foot-mark,picture:has(>.mast-mark),picture:has(>.foot-mark),
  picture:has(>.mast-mark)::before,picture:has(>.foot-mark)::before,picture:has(>.mast-mark)::after,picture:has(>.foot-mark)::after{animation-duration:32s}}