.masthead {
  position: relative;
  z-index: 6;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.mast-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 36px);
  min-height: 84px;
}
.masthead .brand { flex: none; }
.masthead .brand img { width: clamp(125px, 10.4vw, 151px); }
.main-navigation, .header-actions { display: flex; align-items: center; }
.main-navigation { gap: clamp(10px, 1.7vw, 29px); }
.nav-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
}
.nav-glyph { width: 24px; height: 24px; flex: none; color: currentColor; }
.main-navigation .nav-entry { color: #4a483c; }
.main-navigation .nav-entry[aria-current], .main-navigation .nav-entry:hover { color: var(--terra); }
.main-navigation .nav-entry::after {
  position: absolute;
  content: '';
  right: 0;
  bottom: 2px;
  left: 31px;
  border-bottom: 1.5px solid currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease-out;
}
.main-navigation .nav-entry:is([aria-current], :hover, :focus-visible)::after { transform: scaleX(1); }
.nav-entry .nav-glyph { transition: transform .22s ease; }
@media (hover: hover) {
  .nav-entry:hover .nav-glyph, .album-menu-button:hover .nav-glyph { transform: translateY(-1.5px) rotate(-4deg); }
}
.header-actions { gap: 10px; flex: none; }
.header-contact {
  gap: 10px;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid #939580;
  color: var(--ink);
  background: transparent;
  font-size: 13px;
}
.header-contact:hover { color: var(--forest); background: var(--sage); }
.header-contact .nav-glyph { width: 21px; height: 21px; }
.album-menu-button, .album-dialog:not([open]) { display: none; }
.album-menu-open { overflow: hidden; }
.album-dialog {
  --album-dark: #2f3c31;
  --album-gold: #e7d7aa;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overscroll-behavior: contain;
}
.album-dialog[open] { display: flex; justify-content: flex-end; }
.album-dialog::backdrop { background: #20282085; }
.album-panel {
  position: relative;
  isolation: isolate;
  width: min(100%, 480px);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fbf7e9;
  border-inline-start: 1px solid #73806c;
  box-shadow: -20px 0 70px #171e2530;
  transform-origin: right center;
  scrollbar-gutter: auto;
}
.album-jacket {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: none;
  min-height: clamp(128px, 21dvh, 186px);
  padding: 22px clamp(26px, 8vw, 38px) 21px;
  color: #fffae4;
  background: linear-gradient(92deg,#243427 1%,#263427eb 19%,#293a2cab 46%,#293a2c19 100%),
    #344335 url('assets/illustrations/coon-endpaper.webp') right 12% / 315px auto repeat;
  border-block-end: 3px double #b3a37d;
}
.album-jacket::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 9px;
  border-inline-start: 1px solid #dcd2a553;
  box-shadow: -3px 0 5px 2px #151c1836;
  pointer-events: none;
}
.album-jacket h2 { font: 400 clamp(50px, 11vw, 64px)/.90 var(--serif); letter-spacing: -.043em; }
.album-jacket h2 em { color: #e7d8ac; }
.album-menu-close {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  border: none;
  border-radius: 24px;
  padding: 0 12px;
  color: #fbf8ea;
  background: #26372cec;
  font: 500 12px/1 var(--sans);
  cursor: pointer;
}
.album-menu-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; }
.album-menu-close:focus-visible { outline-color: #e0c99c; outline-offset: 1px; }
.album-leaf { display: flex; flex: 1 0 auto; flex-direction: column; padding: 12px clamp(24px, 7.6vw, 36px) max(22px, env(safe-area-inset-bottom)); }
.album-index { display: block; }
.album-index .nav-entry {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 16px;
  min-height: clamp(50px, 7.6dvh, 66px);
  border-bottom: 1px solid #d7d3bd;
  color: #3e4135;
  font: 400 clamp(30px, 7.1vw, 38px)/1.1 var(--serif);
  letter-spacing: -.025em;
}
.album-index .nav-entry .nav-glyph { width: 32px; height: 32px; color: #5d6650; }
.album-index .nav-entry:is(:hover, [aria-current]) { color: var(--terra); }
.album-index .nav-entry:is(:hover, [aria-current]) .nav-glyph { color: var(--terra); }
.album-index .index-arrow { width: 19px; height: 15px; color: #828673; }
.album-index [aria-current] .index-arrow { color: var(--terra); }
.album-personal { margin-block: auto 0; padding-top: 20px; }
.album-enquire.button { display: flex; justify-content: space-between; min-height: 48px; width: 100%; padding: 11px 18px; border-radius: 4px; gap: 10px; }
.album-enquire .nav-glyph { width: 25px; height: 25px; }
.album-enquire span { margin-right:auto; }
.album-personal .album-footnote { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: #575b4b; }
.album-footnote a { display:inline-flex; align-items:center; min-height:36px; gap:4px; text-decoration: underline; text-underline-offset:3px; }
.album-footnote a .drawn-arrow {width:12px;height:12px}
.album-footnote button { display:inline-flex; align-items:center; gap:6px; min-height:36px; border:0; padding:0; color:inherit; background:none; font:inherit; cursor:pointer; }
.album-footnote button svg { width:14px; height:14px; fill:currentColor; }
.album-footnote button::after {content:'Off';color:var(--terra)}
.album-footnote button[aria-pressed='true']::after {content:'On';color:var(--forest)}
@media (max-width: 1060px) {
  .mast-inner { min-height: 68px; flex-wrap: wrap; gap: 0 12px; padding-block: 9px; }
  .main-navigation { order: 3; width:100%; justify-content: flex-start; gap: 4px 16px; flex-wrap:wrap; }
  .main-navigation .nav-entry { min-height:36px; }
  .has-album-menu .main-navigation { display: none; }
  .has-album-menu .album-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    gap: 7px;
    color: #fff9e8;
    background: #3b4939;
    border: 1px solid #344233;
    border-radius: 5px;
    font: 550 13px/1.2 var(--sans);
    cursor: pointer;
  }
  .album-menu-button .nav-glyph { width: 23px; height: 23px; transition: transform .2s; }
  .header-actions { gap: 12px; }
  .header-actions .paw-switch { display: none; }
  .header-contact { min-height:44px; padding:8px 2px; border:0; border-radius:0; gap:7px; font-size:13px; }
  .header-contact:hover {background:transparent; transform:none; text-decoration:underline;}
}
@media (max-width: 420px) {
  .masthead .brand img { width: 108px; }
  .mast-inner { width: 91%; }
  .header-actions { gap: 9px; }
  .header-contact { font-size:12px; }
  .header-contact .nav-glyph { width: 19px; height: 19px; }
  .has-album-menu .album-menu-button { padding-inline: 10px; }
}
@media (max-width: 355px) {
  .masthead .brand img { width: 95px; }
  .header-actions { gap: 8px; }
  .header-contact .nav-glyph { display: none; }
}
@media (max-height: 650px) {
  .album-jacket {min-height:104px; padding-bottom:13px;}
  .album-jacket h2 {font-size:48px;}
  .album-index .nav-entry {min-height:47px;}
  .album-personal {padding-top:15px;}
}
@media (prefers-reduced-motion: no-preference) {
  .album-dialog[open] .album-panel { animation: album-open .26s cubic-bezier(.17,.73,.26,1); }
  .album-dialog[open]::backdrop { animation: backdrop-arrives .21s ease-out; }
  .album-dialog[open] .album-index .nav-entry { animation: entries-arrive .24s ease-out; animation-delay:calc(45ms + var(--item, 0) * 21ms); }
  .album-index .nav-entry:nth-child(2){--item:1}.album-index .nav-entry:nth-child(3){--item:2}.album-index .nav-entry:nth-child(4){--item:3}.album-index .nav-entry:nth-child(5){--item:4}
  .album-dialog.is-closing .album-panel {animation: album-fold-away .16s ease-in both;}
  .album-dialog.is-closing::backdrop {animation: backdrop-arrives .16s ease-in reverse both;}
  @keyframes album-open { from { transform:translateX(15px); } to { transform:none; } }
  @keyframes entries-arrive {from {transform:translateY(4px)} to {transform:none}}
  @keyframes album-fold-away {to {transform:translateX(18px)}}
  @keyframes backdrop-arrives {from {opacity:0} to {opacity:1}}
}

@media (max-width: 480px) {
  .album-dialog[open] { background: #fbf7e9; }
  .album-panel { border-left: 0; }
}

/* The garden plate fills the end of the index on taller phones. Shorter screens devote this space to destinations. */
@media (min-height: 730px) {
  .album-leaf::after {
    content: '';
    order: 1;
    flex: 1 0 72px;
    min-height: 0;
    max-height: 150px;
    margin-top: auto;
    background: url('assets/illustrations/garden-catio-small.webp') right bottom / auto 100% no-repeat;
    opacity: .82;
    mix-blend-mode: multiply;
    pointer-events: none;
  }
  .album-personal { order: 2; margin-top: 0; padding-top: 11px; }
}