/* Circular full-screen menu, kept with the original site layout. */
html { background-color: var(--c-bg); }
html:has(body.nav-open) { background-color: #D5BE91; }
.menu-toggle { display: inline-flex; background: transparent; }
/* Full-screen menu. The circle originates at the actual menu control. */
.nav-overlay { display: none; }
.nav-drawer {
  --c-ink: #2A2016;
  --c-ink-soft: #51412A;
  --c-line: rgba(42, 32, 22, 0.22);
  --menu-x: calc(100% - 45px);
  --menu-y: 42px;
  --menu-radius: 200vmax;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  padding: 0;
  background: #D5BE91;
  color: var(--c-ink);
  box-shadow: none;
  transform: none;
  clip-path: circle(0px at var(--menu-x) var(--menu-y));
  visibility: hidden;
  transition: clip-path 0.68s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s 0.68s;
}
.nav-drawer.is-open {
  transform: none;
  clip-path: circle(var(--menu-radius) at var(--menu-x) var(--menu-y));
  visibility: visible;
  transition: clip-path 0.78s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.nav-drawer__inner { min-height: 100%; display: flex; flex-direction: column; }
.nav-drawer__top { flex-shrink: 0; height: var(--nav-h); margin: 0; border-bottom: 1px solid var(--c-line); }
.nav-drawer .logo-img { height: 44px; max-height: 44px; }
[data-theme="dark"] .nav-drawer .logo-img { filter: none; }
.nav-drawer__close { width: auto; gap: 0.85rem; border: 0; border-radius: 0; font-size: 0.82rem; min-height: 48px; padding: 0 0.2rem 0 1rem; }
.nav-drawer__close svg { width: 46px; height: 46px; padding: 13px; border: 1px solid var(--c-line); border-radius: 50%; }
.nav-drawer__close:hover { background: transparent; }
.nav-drawer__body { display: grid; grid-template-columns: 0.65fr 1fr; align-items: center; gap: clamp(3rem, 8vw, 9rem); flex: 1; padding-block: 3.5rem; }
.nav-drawer__note { align-self: end; padding-bottom: 2rem; max-width: 260px; opacity: 0; transform: translateY(18px); transition: opacity 0.35s, transform 0.5s var(--ease-out); }
.nav-drawer.is-open .nav-drawer__note { opacity: 1; transform: none; transition-delay: 0.18s; }
.nav-drawer__note img { width: 150px; height: auto; aspect-ratio: 4/5; border-radius: 90px 90px 5px 5px; object-fit: cover; margin-bottom: 1.5rem; }
.nav-drawer__note p { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.03em; }
.nav-drawer__note small { display: block; margin-top: 0.75rem; font-size: 0.8rem; color: var(--c-ink-soft); }
.nav-drawer__links { gap: 0; }
.nav-drawer__links a {
  display: flex; align-items: center; gap: 1.3rem;
  font-size: clamp(2.75rem, 5.5vw, 5.5rem);
  font-weight: 400; line-height: 1.1; letter-spacing: -0.045em;
  padding: 0.35em 0; color: var(--c-ink);
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.25s, transform 0.55s var(--ease-out);
  transition-delay: 0s;
}
.nav-drawer__links a::before { content: ''; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; border: 1px solid currentColor; transition: background-color 0.2s, transform 0.3s; }
/* SVG, not the Unicode ↗ character: iOS renders bare arrow glyphs as a
   colour emoji instead of a plain text arrow. Every other icon on this
   site is already SVG for the same reason — this was the one exception. */
.nav-drawer__links a::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2016' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E");
  display: inline-block;
  width: 0.4em; height: 0.4em;
  margin-left: auto;
  transition: transform 0.35s var(--ease-out);
}
.nav-drawer__links a span { transition: transform 0.4s var(--ease-out); }
.nav-drawer__links a:is(:hover, :focus-visible) span { transform: translateX(10px); }
.nav-drawer__links a:is(:hover, :focus-visible)::after { transform: translate(4px, -4px); }
.nav-drawer__links a:is(:hover, :focus-visible, [aria-current="page"])::before { background: currentColor; }
.nav-drawer__links a[aria-current="page"] { color: var(--c-ink); font-style: normal; }
.nav-drawer.is-open .nav-drawer__links a { opacity: 1; transform: none; transition-delay: calc(0.14s + var(--link-index, 0) * 0.065s); }
.nav-drawer__footer { border-top: 1px solid var(--c-line); margin-top: 0; padding: 1.4rem 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.82rem; }
.nav-drawer__social { display: flex; gap: 1.5rem; }
.nav-drawer__social a { min-height: 44px; display: inline-flex; align-items: center; gap: 0.4em; }
.nav-drawer__social a:hover { text-decoration: underline; text-underline-offset: 5px; }
/* Same reasoning as the nav link arrow above: SVG, not a Unicode glyph
   that iOS would render as a colour emoji. */
.nav-drawer__social a::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2016' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E");
  display: inline-block;
  width: 0.75em; height: 0.75em;
}
.nav-drawer :focus-visible { outline-color: #2A2016; }


@media (max-width: 959px) {
  .nav-drawer__body { grid-template-columns: 0.45fr 1fr; gap: 3rem; }
}
@media (max-width: 760px) {
  .nav-drawer__body { grid-template-columns: 1fr; padding-block: 2rem; gap: 0; }
  .nav-drawer__note { display: none; }
  .nav-drawer__links a { font-size: clamp(2.65rem, 8.5vw, 4.5rem); padding-block: 0.5em; }
  .nav-drawer__footer { padding-block: 1rem; }
  .nav-drawer__footer > p { max-width: 25ch; }
}
@media (max-height: 1080px) {
  .nav-drawer__body { padding-block: 1rem; }
  .nav-drawer__links a { font-size: clamp(2rem, 6vh, 3.5rem); padding-block: 0.3em; }
  .nav-drawer__note img { display: none; }
  .nav-drawer__footer { padding-block: 0.5rem; }
}
.no-js .menu-toggle { display: none; }