/* DINAR · the site menu (owner, 2026-10-02: "the menu page is not right, give it a design with animation").
   One file for every page, including index.html which carries its own stylesheet. The new menu carries the class
   m2, so these rules win over the old .menu rules wherever they are. Layout: the links in one column that fits the
   screen, and beside them a quiet panel with the direct ways to reach Dana. Animation: the panel opens with a
   reveal from the top, the links rise one after another, a hairline draws under the link you point at. */
nav.menu.m2{position:fixed;inset:0;z-index:90;display:block;padding:0;overflow-y:auto;overscroll-behavior:contain;
  background:#1b1713;color:#F4F0E7;opacity:1;visibility:hidden;
  clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1),visibility 0s linear .9s}
nav.menu.m2.open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1),visibility 0s}
nav.menu.m2::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 85% 0%,rgba(201,169,114,.10),rgba(201,169,114,0) 70%),linear-gradient(180deg,#211C17,#1b1713)}
nav.menu.m2 .menu-close{position:fixed;top:calc(26px + env(safe-area-inset-top,0px));inset-inline-end:var(--gut,24px);z-index:2;display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:0 4px;background:none;border:0;color:#F4F0E7;font-family:inherit;font-size:12px;letter-spacing:.22em;cursor:pointer;opacity:0;transition:opacity .5s ease .5s}
nav.menu.m2.open .menu-close{opacity:1}
nav.menu.m2 .menu-close:focus-visible{outline:2px solid #C9A972;outline-offset:3px}
nav.menu.m2 .menu-in{min-height:100%;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:center;
  max-width:1280px;margin:0 auto;padding:calc(96px + env(safe-area-inset-top,0px)) var(--gut,24px) calc(40px + env(safe-area-inset-bottom,0px))}

/* the old .menu a rules (huge type, flex rows, borders, hover indent) must not reach the new menu's anchors */
nav.menu.m2 a{display:revert;padding:0;border:0;gap:0;line-height:inherit;font-size:inherit;font-family:inherit;color:inherit;text-decoration:none}

/* the links */
nav.menu.m2 .menu-links{display:flex;flex-direction:column;border-top:1px solid rgba(244,240,231,.12)}
nav.menu.m2 .menu-links a{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:baseline;gap:12px;
  padding:clamp(10px,1.6vh,16px) 0;border-bottom:1px solid rgba(244,240,231,.12);
  font-family:var(--f-serif,'Frank Ruhl Libre',serif);font-weight:400;font-size:clamp(24px,2.9vw,40px);line-height:1.15;color:#F4F0E7;
  opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1),color .35s}
nav.menu.m2.open .menu-links a{opacity:1;transform:none}
nav.menu.m2.open .menu-links a:nth-child(1){transition-delay:.30s,.30s,0s}
nav.menu.m2.open .menu-links a:nth-child(2){transition-delay:.36s,.36s,0s}
nav.menu.m2.open .menu-links a:nth-child(3){transition-delay:.42s,.42s,0s}
nav.menu.m2.open .menu-links a:nth-child(4){transition-delay:.48s,.48s,0s}
nav.menu.m2.open .menu-links a:nth-child(5){transition-delay:.54s,.54s,0s}
nav.menu.m2.open .menu-links a:nth-child(6){transition-delay:.60s,.60s,0s}
nav.menu.m2.open .menu-links a:nth-child(7){transition-delay:.66s,.66s,0s}
nav.menu.m2.open .menu-links a:nth-child(8){transition-delay:.72s,.72s,0s}
nav.menu.m2 .menu-links a span{font-family:var(--f-sans,Heebo,sans-serif);font-size:12px;letter-spacing:.2em;color:#9A8775;transition:color .35s}
/* the hairline that draws under the link you point at, and the arrow that comes in */
nav.menu.m2 .menu-links a::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;background:#C9A972;transform:scaleX(0);transform-origin:right;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
html:not([dir="rtl"]) nav.menu.m2 .menu-links a::after{transform-origin:left}
nav.menu.m2 .menu-links a i{font-style:normal;font-family:var(--f-sans,Heebo,sans-serif);font-size:18px;color:#C9A972;opacity:0;transform:translateX(10px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
html:not([dir="rtl"]) nav.menu.m2 .menu-links a i{transform:translateX(-10px)}
nav.menu.m2 .menu-links a:hover,nav.menu.m2 .menu-links a:focus-visible{color:#fff;outline:none}
nav.menu.m2 .menu-links a:hover::after,nav.menu.m2 .menu-links a:focus-visible::after{transform:scaleX(1)}
nav.menu.m2 .menu-links a:hover span,nav.menu.m2 .menu-links a:focus-visible span{color:#C9A972}
nav.menu.m2 .menu-links a:hover i,nav.menu.m2 .menu-links a:focus-visible i{opacity:1;transform:none}
/* the page you are on */
nav.menu.m2 .menu-links a[aria-current="page"]{color:#C9A972}
nav.menu.m2 .menu-links a[aria-current="page"] span::after{content:" ·";color:#C9A972}

/* the side panel: the direct ways in */
nav.menu.m2 .menu-side{align-self:center;display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2.6vw,34px);
  border:1px solid rgba(244,240,231,.14);background:rgba(244,240,231,.03);
  opacity:0;transform:translateY(16px);transition:opacity .8s ease .75s,transform .9s cubic-bezier(.2,.7,.2,1) .75s}
nav.menu.m2.open .menu-side{opacity:1;transform:none}
nav.menu.m2 .menu-side .ms-k{font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:.24em;color:#9A8775;direction:ltr;text-align:right}
html:not([dir="rtl"]) nav.menu.m2 .menu-side .ms-k{text-align:left}
nav.menu.m2 .menu-side .ms-row{display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:1px solid rgba(244,240,231,.1)}
nav.menu.m2 .menu-side .ms-row small{font-size:11.5px;letter-spacing:.18em;color:#9A8775}
nav.menu.m2 .menu-side a.ms-v{font-family:var(--f-serif,'Frank Ruhl Libre',serif);font-size:clamp(20px,1.7vw,24px);color:#F4F0E7;direction:ltr;text-align:right;border-bottom:1px solid transparent;align-self:flex-start;transition:border-color .3s,color .3s}
html:not([dir="rtl"]) nav.menu.m2 .menu-side a.ms-v{text-align:left}
nav.menu.m2 .menu-side a.ms-v:hover,nav.menu.m2 .menu-side a.ms-v:focus-visible{border-color:#C9A972;outline:none}
nav.menu.m2 .menu-side .ms-wa{display:inline-flex;align-items:center;justify-content:center;min-height:50px;margin-top:4px;
  font-size:13px;font-weight:700;letter-spacing:.08em;color:#211C17;background:linear-gradient(105deg,#a07c40 0%,#d2b47c 30%,#fbeec6 50%,#d2b47c 68%,#a07c40 100%);background-size:240% 100%;background-position:100% 0;transition:background-position 1s ease}
nav.menu.m2 .menu-side .ms-wa:hover{background-position:0 0}
nav.menu.m2 .menu-side .ms-wa:focus-visible{outline:2px solid #F4F0E7;outline-offset:3px}

@media (max-width:860px){
  nav.menu.m2 .menu-in{grid-template-columns:1fr;align-items:start;gap:28px;padding-top:calc(84px + env(safe-area-inset-top,0px))}
  nav.menu.m2 .menu-links a{font-size:clamp(22px,6vw,30px);grid-template-columns:36px minmax(0,1fr) auto}
  nav.menu.m2 .menu-side{align-self:stretch}}
@media (max-height:620px) and (min-width:861px){nav.menu.m2 .menu-in{align-items:start}}
@media (prefers-reduced-motion:reduce){
  nav.menu.m2,nav.menu.m2.open{clip-path:none;transition:visibility 0s}
  nav.menu.m2 .menu-links a,nav.menu.m2 .menu-side,nav.menu.m2 .menu-close{opacity:1;transform:none;transition:none}
  nav.menu.m2:not(.open){visibility:hidden}}
html:not([dir="rtl"]) nav.menu.m2 .menu-links a i{display:inline-block;rotate:180deg}