/* One Acre Fields: top bar, site nav and the mobile menu overlay. */

/* anchors land below the sticky bar */
html{scroll-padding-top:calc(4.5rem + env(safe-area-inset-top,0px))}

/* sticky, blurred paper (02-07) */
.top{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:1rem clamp(18px,4.5vw,56px);padding-top:calc(1rem + env(safe-area-inset-top,0px));background:rgba(246,242,232,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.admin-bar .top{top:32px}
@media (max-width:782px){.admin-bar .top{top:46px}}
@media (max-width:600px){.admin-bar .top{top:0}}
.brand{font-family:var(--display);font-weight:var(--dw);font-size:1.05rem;text-decoration:none;letter-spacing:var(--dls);padding:.75rem 0;margin:-.75rem 0} /* padding/margin pair: 44px hit area, same layout */
.brand i{color:var(--forest);font-style:italic}
.nav{display:flex;gap:1.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.nav a{text-decoration:none;padding:.95rem 0;margin:-.95rem 0} /* 44px hit area, same layout */
.nav a[aria-current]{color:var(--earth-text)}
.nav a:hover{color:var(--earth-text)}

/* dark glass over dark sections (.on-dark, .dusk): site.js toggles .is-dark */
.top{transition:background-color .3s,border-color .3s,color .3s}
body .top.is-dark{background:rgba(28,32,29,.88);border-bottom-color:rgba(239,234,224,.12);color:var(--dusk-ink)}
body .top.is-dark .nav{color:var(--dusk-ink-2)}
body .top.is-dark .nav a[aria-current],body .top.is-dark .nav a:hover{color:var(--ember)}
body .top.is-dark .brand i{color:var(--tea-2)}
body .top.is-dark .menu-btn{background:rgba(28,32,29,.5);border-color:rgba(239,234,224,.4);color:var(--dusk-ink)}
@media (prefers-reduced-motion: reduce){.top{transition:none}}

/* transparent, over the home hero (01): the bar is the first row of .hero */
.oaf-nav-over .top{position:relative;top:auto;z-index:3;padding:1.3rem clamp(18px,4.5vw,56px) 0;padding-top:calc(1.3rem + env(safe-area-inset-top,0px));background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}

/* the compact menu button, shown at 760px and below */
.menu-btn{display:none;min-height:44px;min-width:44px;font:inherit;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(246,242,232,.7);border:1px solid rgba(30,37,32,.3);color:var(--ink);padding:.55em 1em;border-radius:999px;cursor:pointer;align-items:center;gap:.55em}
.menu-btn .bars{display:grid;gap:3px;width:14px}
.menu-btn .bars i{display:block;height:1.5px;background:currentColor;border-radius:1px}
.menu-btn .bars i:nth-child(2){width:70%}
@media (max-width:760px){.nav{display:none}.menu-btn{display:inline-flex}}

/* ===== mobile menu overlay: a sheet of paper over the page ===== */
.mmenu{position:fixed;inset:0;z-index:100000;background:var(--paper);color:var(--ink);display:grid;grid-template-rows:auto 1fr auto;overflow-y:auto;overscroll-behavior:contain;
  background-image:repeating-linear-gradient(180deg, transparent 0 31px, rgba(30,37,32,.06) 31px 32px);background-position:0 5.2rem;
  opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.mmenu[hidden]{display:none}
.mmenu.is-open{opacity:1;transform:none}
.mmenu-top{display:flex;justify-content:space-between;align-items:center;padding:1rem clamp(18px,4.5vw,56px);padding-top:calc(1rem + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);background:var(--paper)}
.menu-close{min-height:44px;min-width:44px;font:inherit;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;background:#FBF8F0;border:1px solid rgba(30,37,32,.3);color:var(--ink);padding:.55em 1em;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.55em}
.menu-close svg{width:10px;height:10px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none}
.mmenu-nav{display:grid;align-content:center;padding:2rem clamp(18px,4.5vw,56px)}
/* D27: the ruled lines show above and below the list, never through the words
   or the gutters. Each link is a full-width strip of paper (negative margins
   into the gutter, padding back out) and the dashed divider is a pseudo-element
   that stays inside the gutters, so the rules cannot cross the dividers. */
.mmenu-nav a{position:relative;background:var(--paper);margin:0 calc(-1 * var(--gutter));padding:.5rem var(--gutter)}
.mmenu-nav a::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;border-bottom:1px dashed rgba(30,37,32,.25)}
.mmenu-nav a{display:grid;grid-template-columns:2.4rem minmax(0,1fr);align-items:baseline;gap:.4rem;text-decoration:none;font-family:var(--display);font-weight:var(--dw);font-size:clamp(2.1rem,10vw,3.2rem);line-height:1.05;letter-spacing:var(--dls);text-transform:var(--dcase);
  opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1),color .2s}
.mmenu-nav a .n{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;color:var(--ink-3-text);transform:translateY(-.4em)}
.mmenu-nav a[aria-current]{color:var(--earth-text)}
.mmenu-nav a:hover{color:var(--earth-text)}
.mmenu.is-open .mmenu-nav a{opacity:1;transform:none}
.mmenu.is-open .mmenu-nav a:nth-child(2){transition-delay:.05s}
.mmenu.is-open .mmenu-nav a:nth-child(3){transition-delay:.1s}
.mmenu.is-open .mmenu-nav a:nth-child(4){transition-delay:.15s}
.mmenu.is-open .mmenu-nav a:nth-child(5){transition-delay:.2s}
.mmenu.is-open .mmenu-nav a:nth-child(6){transition-delay:.25s}
.mmenu-foot{padding:1.2rem clamp(18px,4.5vw,56px) calc(1.6rem + env(safe-area-inset-bottom,0px));display:grid;gap:.9rem;border-top:1px solid var(--line);background:var(--paper)}
.mmenu-foot .hand{font-size:1.05rem}
.mmenu-foot .mono{text-transform:none;letter-spacing:.04em;font-size:.8rem}
.mmenu-foot .mono a{text-decoration:none;color:var(--ink);display:inline-block;padding:.7rem 0;margin:-.7rem 0} /* 44px hit area (A19) */
html.oaf-menu-open,html.oaf-menu-open body{overflow:hidden}
@media (min-width:761px){.mmenu{display:none}}
@media (prefers-reduced-motion: reduce){.mmenu,.mmenu-nav a{transition:none;transform:none}.mmenu.is-open .mmenu-nav a{transition-delay:0s}}