/* Single bunny page */

.arlen-lede {
  font-size: clamp(1.02rem, 1.9vw, 1.26rem);
  max-width: 56ch;
  margin: 0 0 34px;
}

.arlen-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 4px;
  margin: 0 0 40px;
}

.arlen-gallery__item { margin: 0; }

.arlen-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--pink);
  display: block;
}

.arlen-specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 24px;
  max-width: 460px;
  margin: 0 0 40px;
  font-size: 0.95rem;
}
.arlen-specs dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
  margin: 0;
}
.arlen-specs dd { margin: 0; }

.arlen-prose { max-width: 70ch; margin: 0 0 40px; }
.arlen-prose p { margin: 0 0 20px; }

.arlen-cta {
  background: var(--blue-deep);
  color: var(--white);
  /* Longhand. A padding shorthand here would fight any wrapper padding. */
  padding-top: clamp(34px, 6vw, 54px);
  padding-bottom: clamp(34px, 6vw, 54px);
  padding-left: clamp(24px, 5vw, 44px);
  padding-right: clamp(24px, 5vw, 44px);
  margin: 0 0 56px;
}
.arlen-cta h2 { color: var(--white); margin-top: 0; }
.arlen-cta p { max-width: 62ch; }
.arlen-cta p:last-child { margin-bottom: 0; }

.arlen-cta .arlen-btn {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}
.arlen-cta .arlen-btn:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--ink);
}

.arlen-also { margin-top: 56px; }

/* ARLEN RABBITRY - FOUNDATION
   Black and white. The rabbits are the only colour on the page. */

:root {
  --ink:    #111111;
  --white:  #FFFFFF;
  --paper:  #F7F7F5;
  --muted:  #6B6B6B;
  --line:   #E2E2DF;

  --heading: "Inknut Antiqua", Georgia, serif;
  --body:    "Instrument Sans", system-ui, -apple-system, sans-serif;

  --wrap: 1160px;
}

/* Overflow hardening. Grid and flex children default to min-width:auto,
   which lets one long word push the layout past the phone screen. */
*, *::before, *::after { box-sizing: border-box; }
* { min-width: 0; }

html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

h1, h2, h3, h4, p, li, dd, dt, a { overflow-wrap: break-word; }
img, video, iframe { max-width: 100%; height: auto; }

body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .entry-title, .page-title {
  font-family: var(--heading);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.3; }
h2 { font-size: clamp(1.4rem, 2.7vw, 1.95rem); }
h3 { font-size: 1.1rem; }

a { color: var(--ink); }

.ct-container, .ct-container-fluid { max-width: var(--wrap); }

/* Buttons */
.arlen-btn,
.ct-button,
.wp-block-button__link,
input[type="submit"],
.ff-btn-submit {
  display: inline-block;
  font-family: var(--body) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border-radius: 0 !important;
  border: 1px solid var(--ink) !important;
  background: var(--ink) !important;
  color: var(--white) !important;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.arlen-btn:hover,
.ct-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.ff-btn-submit:hover {
  background: var(--white) !important;
  color: var(--ink) !important;
}

.arlen-btn--ghost {
  background: transparent !important;
  color: var(--ink) !important;
}
.arlen-btn--ghost:hover {
  background: var(--ink) !important;
  color: var(--white) !important;
}

.arlen-btn, .ct-button, .wp-block-button__link,
input, select, textarea, img,
.ct-media-container, .entry-card { border-radius: 0 !important; }

/* Announcement bar */
.arlen-announce {
  background: var(--ink);
  color: var(--white);
  text-align: center;
  padding: 11px 20px;
  font-family: var(--body);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  line-height: 1.5;
}
.arlen-announce a { color: var(--white); }

/* Header */
header.ct-header, .ct-header [data-row] {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.site-title, .site-title a {
  font-family: var(--heading) !important;
  font-weight: 500 !important;
  font-size: 1.28rem !important;
  color: var(--ink) !important;
  text-decoration: none;
}

/* Nav */
.header-menu-1 .menu > li > a,
.header-menu-1 .ct-menu-link {
  font-family: var(--body) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  padding: 10px 14px !important;
}
.header-menu-1 .menu > li > a:hover,
.header-menu-1 .ct-menu-link:hover { opacity: 0.6; }

.header-menu-1 .menu > li.current-menu-item > a,
.header-menu-1 .menu > li.current-menu-ancestor > a {
  box-shadow: inset 0 -2px 0 var(--ink);
}

.header-menu-1 .sub-menu, .ct-menu-submenu {
  background: var(--white) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 0 !important;
  min-width: 250px;
}
.header-menu-1 .sub-menu a,
.header-menu-1 .ct-menu-submenu a {
  font-family: var(--body) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
  padding: 9px 20px !important;
}
.header-menu-1 .sub-menu a:hover, .ct-menu-submenu a:hover {
  background: var(--ink) !important;
  color: var(--white) !important;
}

/* Bands */
.arlen-band {
  padding-top: clamp(48px, 7vw, 76px);
  padding-bottom: clamp(48px, 7vw, 76px);
}
.arlen-band__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: clamp(18px, 4vw, 28px);
  padding-right: clamp(18px, 4vw, 28px);
}

.band-white { background: var(--white); }
.band-pink  { background: var(--paper); }
.band-blue  { background: var(--ink); color: var(--white); }

.band-blue h1, .band-blue h2, .band-blue h3, .band-blue a { color: var(--white); }
.band-blue .arlen-eyebrow { color: var(--white); opacity: 0.6; }
.band-blue .arlen-section-head p,
.band-blue .arlen-step p { color: var(--white); opacity: 0.75; }
.band-blue .arlen-step__n { color: var(--white); opacity: 0.5; }

/* Hero */
.arlen-hero {
  text-align: center;
  padding-top: clamp(48px, 7vw, 76px);
  padding-bottom: clamp(44px, 6vw, 68px);
}
.arlen-hero h1 { margin: 0 auto; max-width: min(18ch, 100%); }

.arlen-locale, .arlen-eyebrow {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}

.arlen-lede {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  max-width: 56ch;
  margin: 22px auto 0;
}
.arlen-sub {
  font-size: 0.93rem;
  color: var(--muted);
  max-width: 58ch;
  margin: 20px auto 0;
}

.arlen-cta-line {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
}

/* Video hero */
.arlen-hero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 62vh;
  overflow: hidden;
  background: var(--paper);
}
.arlen-hero-video video,
.arlen-hero-video img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.arlen-hero-video__poster { display: none; }

@media (max-width: 780px) {
  .arlen-hero-video video { display: none; }
  .arlen-hero-video__poster { display: block; }
  .arlen-hero-video { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .arlen-hero-video video { display: none; }
  .arlen-hero-video__poster { display: block; }
}

/* Section heads */
.arlen-section-head { max-width: 62ch; margin-bottom: 42px; }
.arlen-section-head h2 { margin: 0 0 14px; }
.arlen-section-head p { color: var(--muted); margin: 0; }

/* Roster. Capped at 340px so a single bunny stays card-sized instead of
   stretching across the page. */
.arlen-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 340px));
  gap: 28px;
  justify-content: start;
}

.arlen-empty {
  color: var(--muted);
  max-width: 58ch;
  margin: 0 0 24px;
}

.arlen-card {
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.arlen-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--paper);
  overflow: hidden;
}
.arlen-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.arlen-card__ph {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.arlen-card__status {
  position: absolute;
  top: 0; left: 0;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
  background: var(--ink);
  color: var(--white);
}
.arlen-card__status[data-status="reserved"] {
  background: var(--white); color: var(--ink); border: 1px solid var(--ink);
}
.arlen-card__status[data-status="past"] {
  background: var(--muted); color: var(--white);
}

.arlen-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }

.arlen-card__name { font-family: var(--heading); font-size: 1.2rem; margin: 0 0 12px; }
.arlen-card__name a { color: var(--ink); text-decoration: none; }
.arlen-card__name a:hover { opacity: 0.6; }

.arlen-card__specs {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 16px;
  font-size: 0.88rem;
}
.arlen-card__specs dt {
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); align-self: center; margin: 0;
}
.arlen-card__specs dd { margin: 0; }

.arlen-card__note { color: var(--muted); font-size: 0.9rem; margin: 0 0 20px; }

.arlen-card__foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.arlen-card__price { font-family: var(--heading); font-size: 1.05rem; }
.arlen-card__foot .arlen-btn { padding: 10px 18px !important; font-size: 0.68rem !important; }

/* Steps */
.arlen-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 34px;
}
.arlen-step__n {
  font-family: var(--heading);
  font-size: 1.3rem;
  color: var(--muted);
  line-height: 1;
  margin-bottom: 12px;
}
.arlen-step h3 { margin-bottom: 8px; }
.arlen-step p { margin: 0; color: var(--muted); }

/* Notice box */
.arlen-notice {
  border: 1px solid var(--ink);
  padding: clamp(22px, 5vw, 34px);
  background: var(--white);
}
.arlen-notice h3 { margin-top: 0; }
.arlen-notice ul { margin: 0; padding-left: 20px; }
.arlen-notice li { margin-bottom: 10px; }
.arlen-notice li:last-child { margin-bottom: 0; }

/* Split */
.arlen-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 40px;
  align-items: center;
}
.arlen-split img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Prose */
.arlen-prose { max-width: 68ch; }
.arlen-prose h2 { margin-top: 44px; }
.arlen-prose h2:first-child { margin-top: 0; }
.arlen-prose p { margin: 0 0 20px; }
.arlen-prose ul { margin: 0 0 20px; padding-left: 20px; }
.arlen-prose li { margin-bottom: 10px; }

/* GALLERY. Built for 10 photos per bunny. Lead image spans a 2x2 block,
   the rest tile around it. */
.arlen-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 4px;
  margin: 0 0 16px;
}

.arlen-gallery__item { margin: 0; }

.arlen-gallery__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--paper);
  display: block;
}

.arlen-gallery__item--lead {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 600px) {
  .arlen-gallery {
    grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  }
}

.arlen-gallery__note {
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 40px;
}

.arlen-gallery--empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px solid var(--line);
  background: var(--paper);
}

/* Single bunny specs */
.arlen-specs {
  display: grid; grid-template-columns: auto 1fr;
  gap: 8px 24px; max-width: 440px; margin: 0 0 40px;
  font-size: 0.94rem;
}
.arlen-specs dt {
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); align-self: center; margin: 0;
}
.arlen-specs dd { margin: 0; }

/* Bunny page CTA */
.arlen-cta {
  background: var(--ink);
  color: var(--white);
  padding-top: clamp(34px, 6vw, 52px);
  padding-bottom: clamp(34px, 6vw, 52px);
  padding-left: clamp(24px, 5vw, 42px);
  padding-right: clamp(24px, 5vw, 42px);
  margin: 0 0 52px;
}
.arlen-cta h2 { color: var(--white); margin-top: 0; }
.arlen-cta p { max-width: 60ch; }
.arlen-cta p:last-child { margin-bottom: 0; }
.arlen-cta .arlen-btn {
  background: var(--white) !important;
  border-color: var(--white) !important;
  color: var(--ink) !important;
}
.arlen-cta .arlen-btn:hover {
  background: transparent !important;
  color: var(--white) !important;
}

.arlen-also { margin-top: 52px; }

/* Forms */
.ff-el-input--label label {
  font-family: var(--body) !important;
  font-size: 0.68rem !important; font-weight: 600 !important;
  letter-spacing: 0.13em !important; text-transform: uppercase !important;
  color: var(--muted) !important;
}
.ff-el-form-control {
  font-family: var(--body) !important;
  font-size: 1rem !important;
  padding: 13px 15px !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--white) !important;
  color: var(--ink) !important;
}
.ff-el-form-control:focus {
  outline: 2px solid var(--ink) !important;
  outline-offset: 1px;
  box-shadow: none !important;
}
.ff-el-help-message {
  font-size: 0.85rem !important; line-height: 1.55 !important;
  color: var(--muted) !important; margin-top: 8px !important;
}

/* Footer */
footer.ct-footer, .ct-footer [data-row] {
  background: var(--ink) !important;
  color: var(--white);
}
.ct-footer, .ct-footer p, .ct-footer li { font-size: 0.9rem; }
.ct-footer a { color: var(--white); text-decoration: none; }
.ct-footer a:hover { opacity: 0.65; text-decoration: underline; }
.ct-footer .widget-title, .ct-footer h4 {
  font-family: var(--heading) !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  color: var(--white) !important;
  margin-bottom: 14px !important;
}
.ct-footer ul { list-style: none; margin: 0; padding: 0; }
.ct-footer li { margin-bottom: 8px; }

/* Accessibility */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile */
@media (max-width: 980px) {
  .site-title, .site-title a { white-space: normal !important; }
  .arlen-announce { font-size: 0.78rem; padding: 10px 16px; }
  h1 { font-size: clamp(1.65rem, 6.5vw, 2.2rem); }
}
/* Testimonials */
.arlen-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 28px;
  margin: 0 0 56px;
}
.arlen-quote {
  border-left: 2px solid var(--ink);
  padding-left: 20px;
}
.arlen-quote blockquote {
  font-family: var(--heading);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 10px;
}
.arlen-quote cite {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.arlen-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 20px;
}
.arlen-shot { margin: 0; }
.arlen-shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
}
.arlen-shot figcaption {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 10px;
}
/* Answer box. The direct extractable answer, first thing on the page. */
.arlen-answer {
  border: 1px solid var(--ink);
  padding: clamp(24px, 5vw, 34px);
  margin: 0 0 44px;
  background: var(--white);
}
.arlen-answer p:first-child {
  font-family: var(--heading);
  font-size: 1.15rem;
  line-height: 1.5;
  margin-top: 0;
}
.arlen-answer p:last-child { margin-bottom: 0; }

/* Data table */
.arlen-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 32px;
  font-size: 0.94rem;
}
.arlen-table th,
.arlen-table td {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.arlen-table th {
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Sources */
.arlen-sources {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  margin-top: 48px;
  font-size: 0.9rem;
  color: var(--muted);
}
.arlen-sources h3 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--body);
  color: var(--muted);
  margin-bottom: 12px;
}
.arlen-sources ul { list-style: none; margin: 0; padding: 0; }
.arlen-sources li { margin-bottom: 8px; }

/* ==========================================================================
   FOOTER NAVIGATION
   The export shipped a footer containing only a copyright line. This adds the
   sitewide link block. It uses the variables the rest of the sheet already
   defines, so it inherits the existing palette and type: no theme CSS is
   changed, only this file, which is ours.
   ========================================================================== */
.arlen-footer-nav {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: 32px;
  padding: 56px 0 40px;
  align-items: start;
}
.arlen-footer-nav h3 {
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 600;
}
.arlen-footer-nav ul { list-style: none; margin: 0; padding: 0; }
.arlen-footer-nav li { margin-bottom: 9px; line-height: 1.4; }
.arlen-footer-nav a {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.arlen-footer-nav a:hover { border-bottom-color: currentColor; }
.arlen-foot-about p {
  font-family: var(--body);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 12px;
}
.arlen-foot-name {
  font-family: var(--display);
  font-size: 20px;
  color: var(--ink) !important;
  margin-bottom: 10px !important;
}

@media (max-width: 1100px) {
  .arlen-footer-nav { grid-template-columns: 1fr 1fr 1fr; }
  .arlen-foot-about { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .arlen-footer-nav { grid-template-columns: 1fr 1fr; gap: 26px; padding: 40px 0 28px; }
}

/* ==========================================================================
   HEADER MENU LAYOUT
   The theme's horizontal layout hangs off ul.menu inside .header-menu-1. That
   is restored in the markup, but these rules make the header independent of
   it: if a class is ever dropped again the menu degrades to a wrapped
   horizontal row rather than a vertical stack down the page.
   Layout only. Colours, type and spacing still come from the existing sheet.
   ========================================================================== */
.header-menu-1 > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-menu-1 > ul > li { position: relative; display: flex; align-items: center; }
.header-menu-1 .ct-sub-menu-parent { display: flex; align-items: center; gap: 2px; }

/* The mobile toggle must never show on desktop: it was rendering as a stray
   chevron on its own line under every parent item. */
.header-menu-1 .ct-toggle-dropdown-mobile { display: none; }
.header-menu-1 .ct-toggle-dropdown-desktop {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

/* Dropdown panel: stacked, left aligned, never inheriting the row's flex. */
.header-menu-1 .sub-menu {
  display: block;
  list-style: none;
  margin: 0;
}
.header-menu-1 .sub-menu li { display: block; }
.header-menu-1 .sub-menu a { display: block; white-space: nowrap; }

/* Keep the last dropdowns from overflowing the right edge of the viewport. */
.header-menu-1 > ul > li:nth-last-child(-n+3) .sub-menu { left: auto; right: 0; }

@media (max-width: 1200px) {
  .header-menu-1 > ul { gap: 0 2px; }
  .header-menu-1 .menu > li > a { font-size: 0.72rem !important; padding: 8px 9px !important; }
}
@media (max-width: 999px) {
  /* below this the theme swaps to the offcanvas mobile panel */
  .header-menu-1 { display: none; }
}

/* The mobile panel is a plain vertical list, and its toggle is the one that
   should be visible there. */
.mobile-menu .ct-toggle-dropdown-desktop { display: none; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu .sub-menu { padding-left: 16px; }

/* Footer separation. It was sitting flush against the last content band with
   no change of ground, so the link columns read as more page content. */
.ct-footer {
  border-top: 1px solid var(--line, rgba(0,0,0,.14));
  background: var(--sand, #faf7f2);
  margin-top: 64px;
}
.ct-footer .ct-footer-copyright {
  border-top: 1px solid var(--line, rgba(0,0,0,.10));
  padding: 22px 0;
  font-family: var(--body);
  font-size: 13px;
  color: var(--muted);
}

/* ==========================================================================
   LINK AFFORDANCE
   Body links were the same colour and weight as the text around them, with an
   underline appearing only on hover. On a touch screen there is no hover, so
   they were invisible as links. Give them a persistent underline and a
   distinct colour; hover then changes state rather than revealing it.
   Nav, buttons and breadcrumbs are excluded: those read as controls already.
   ========================================================================== */
.arlen-prose a,
.arlen-answer a,
.arlen-lede a,
.arlen-sub a,
.arlen-hero a:not(.arlen-btn),
.arlen-band a:not(.arlen-btn):not(.ct-menu-link) {
  color: var(--link, #8a4b2a);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 500;
}
.arlen-prose a:hover,
.arlen-answer a:hover,
.arlen-band a:not(.arlen-btn):not(.ct-menu-link):hover {
  text-decoration-thickness: 2px;
  opacity: .85;
}
.arlen-prose a:focus-visible,
.arlen-band a:focus-visible {
  outline: 2px solid var(--link, #8a4b2a);
  outline-offset: 2px;
}

/* Footer links carry an underline too, for the same reason. */
.arlen-footer-nav a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.arlen-footer-nav a:hover { text-decoration-thickness: 2px; }

/* Buttons must stay buttons, never underlined. */
.arlen-btn, a.arlen-btn:hover { text-decoration: none !important; }

/* The hero video the export opened with. */
.arlen-hero-media { margin: 28px auto 0; max-width: 1080px; }
.arlen-hero-media video { width: 100%; height: auto; display: block; border-radius: 2px; }

/* ==========================================================================
   BREED CARDS ON THE HOMEPAGE
   ========================================================================== */
.arlen-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 28px 0 8px;
}
.arlen-card {
  border: 1px solid var(--line, rgba(0,0,0,.14));
  background: var(--white, #fff);
  display: flex;
  flex-direction: column;
}
.arlen-card__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sand, #f4efe7); }
.arlen-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arlen-card__placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--body); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.arlen-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.arlen-card__body h3 { font-family: var(--display); font-size: 1.15rem; margin: 0; }
.arlen-card__body h3 a { text-decoration: none; color: var(--ink); }
.arlen-card__body h3 a:hover { text-decoration: underline; }
.arlen-card__meta { font-family: var(--body); font-size: .82rem; color: var(--muted); margin: 0; }
.arlen-card__price { font-family: var(--body); font-size: .95rem; font-weight: 600; color: var(--ink); margin: 2px 0 4px; }
.arlen-card__link { font-family: var(--body); font-size: .85rem; }

@media (max-width: 900px) { .arlen-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .arlen-cards { grid-template-columns: 1fr; } }

/* Testimonial snippets on the homepage. */
.arlen-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 26px 0 18px; }
.arlen-quote {
  margin: 0; padding: 20px 22px;
  background: var(--white, #fff);
  border: 1px solid var(--line, rgba(0,0,0,.14));
  display: flex; flex-direction: column; gap: 10px;
}
.arlen-quote blockquote { margin: 0; }
.arlen-quote blockquote p {
  margin: 0; font-family: var(--display);
  font-size: 1.02rem; line-height: 1.5; color: var(--ink);
}
.arlen-quote figcaption {
  font-family: var(--body); font-size: .78rem; letter-spacing: .04em;
  color: var(--muted); margin-top: auto;
}
@media (max-width: 860px) { .arlen-quotes { grid-template-columns: 1fr; } }

.arlen-foot-arba { font-size: 13px !important; }
.arlen-foot-arba abbr { text-decoration: none; border-bottom: 1px dotted currentColor; }

/* ==========================================================================
   MOBILE
   The header swaps to Blocksy's offcanvas panel below 1000px. These rules
   make that panel usable on a phone: full-width tap targets, readable type
   and a submenu that indents rather than hides. 44px minimum touch height
   throughout, which is the accessible minimum.
   ========================================================================== */
@media (max-width: 999px) {
  .mobile-menu .ct-menu-link {
    display: block;
    padding: 13px 0 !important;
    min-height: 44px;
    font-size: 1rem !important;
    letter-spacing: .04em !important;
  }
  .mobile-menu .ct-sub-menu-parent {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .mobile-menu .ct-toggle-dropdown-mobile {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; min-height: 44px;
    background: none; border: 0; cursor: pointer;
  }
  .mobile-menu .sub-menu { padding-left: 14px; }
  .mobile-menu .sub-menu .ct-menu-link {
    font-size: .92rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 11px 0 !important;
    min-height: 44px;
  }

  /* content: stop wide blocks forcing a horizontal scroll */
  .arlen-band__inner { padding-left: 18px; padding-right: 18px; }
  .arlen-hero h1 { font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.18; }
  .arlen-prose h2 { font-size: clamp(1.25rem, 5vw, 1.6rem); }
  .arlen-table, .arlen-prose table { display: block; overflow-x: auto; max-width: 100%; }
  .arlen-prose img, .arlen-hero-media video { max-width: 100%; height: auto; }
  .arlen-btn { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 20px; }
}

/* Nothing may push the page sideways on a phone. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ==========================================================================
   AVAILABLE BUNNY PLACARDS
   ========================================================================== */
.arlen-breed-block + .arlen-breed-block { border-top: 1px solid var(--line, rgba(0,0,0,.10)); }
.arlen-listings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 24px 0 18px; }
.arlen-listing { border: 1px solid var(--line, rgba(0,0,0,.14)); background: var(--white,#fff); display: flex; flex-direction: column; }
.arlen-listing__media { aspect-ratio: 1/1; overflow: hidden; background: var(--sand,#f4efe7); }
.arlen-listing__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arlen-listing__placeholder {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-family: var(--body); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.arlen-listing__body { padding: 15px 16px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.arlen-listing__name { font-family: var(--display); font-size: 1.1rem; margin: 0; }
.arlen-listing__spec { font-family: var(--body); font-size: .8rem; color: var(--muted); margin: 0; }
.arlen-listing__price { font-family: var(--body); font-size: 1rem; font-weight: 600; margin: 2px 0; }
.arlen-listing__note { font-family: var(--body); font-size: .85rem; line-height: 1.5; margin: 2px 0 0; }
.arlen-listing__cta { margin: auto 0 0; padding-top: 10px; }
.arlen-btn--small { font-size: .8rem !important; padding: 9px 16px !important; line-height: 1.2 !important; min-height: 40px; display: inline-flex !important; align-items: center; }
.arlen-viewall { margin: 6px 0 0; font-family: var(--body); font-size: .92rem; }
.arlen-viewall a { font-weight: 600; }
.arlen-empty { font-family: var(--body); font-size: .95rem; line-height: 1.65; color: var(--muted); margin: 20px 0; padding: 18px 20px; background: var(--sand,#faf7f2); border: 1px dashed var(--line, rgba(0,0,0,.18)); }
@media (max-width: 1000px) { .arlen-listings { grid-template-columns: 1fr 1fr; } }
/* Two side by side on a phone, not one. A single column turns four rabbits
   into four full screens of scrolling; two lets someone see a pair at a
   glance and compare them, which is how people actually shop for a bunny. */
@media (max-width: 540px) {
  .arlen-listings { grid-template-columns: 1fr 1fr; gap: 12px; }
  .arlen-listing__body { padding: 12px 12px 14px; gap: 4px; }
  .arlen-listing__name { font-size: .98rem; }
  .arlen-listing__spec { font-size: .74rem; }
  .arlen-listing__price { font-size: .9rem; }
  .arlen-listing__note { font-size: .78rem; line-height: 1.45; }
  .arlen-vax { font-size: .58rem; padding: 1px 5px; margin-left: 4px; }
  .arlen-btn--small { font-size: .74rem !important; padding: 8px 10px !important; width: 100%; justify-content: center; }
}

/* Testimonial screenshots on the homepage. */
.arlen-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0 22px; }
.arlen-shot { margin: 0; border: 1px solid var(--line, rgba(0,0,0,.14)); background: var(--white,#fff); overflow: hidden; }
.arlen-shot img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .arlen-shots { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 520px) { .arlen-shots { grid-template-columns: 1fr; } }

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.arlen-form { margin: 26px 0 0; max-width: 620px; }
.arlen-field { margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.arlen-field label {
  font-family: var(--body); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600; color: var(--ink);
}
.arlen-field input, .arlen-field select, .arlen-field textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--white, #fff);
  border: 1px solid var(--line, rgba(0,0,0,.28));
  border-radius: 0; padding: 12px 14px; width: 100%;
  min-height: 46px; appearance: none;
}
.arlen-field textarea { min-height: 150px; line-height: 1.6; resize: vertical; }
.arlen-field select { background-image: none; }
.arlen-field input:focus, .arlen-field select:focus, .arlen-field textarea:focus {
  outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink);
}
.arlen-hint { font-family: var(--body); font-size: .82rem; color: var(--muted); }
.arlen-form-cta { margin: 26px 0 10px; }
.arlen-form button.arlen-btn { cursor: pointer; border: 1px solid var(--ink); background: var(--ink); color: var(--white,#fff); }
.arlen-form button.arlen-btn:hover { background: transparent; color: var(--ink); }
.arlen-form-error {
  font-family: var(--body); font-size: .95rem; line-height: 1.6;
  padding: 14px 16px; margin: 18px 0 0;
  border: 1px solid #b4472f; background: #fdf3f0; color: #7a2e1c;
}
/* Honeypot: off-screen rather than display:none, which bots detect. */
.arlen-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- contact form ------------------------------------------------------- */
.arlen-form { max-width: 640px; margin: 26px 0 0; }
.arlen-field { margin-bottom: 20px; }
.arlen-field label {
  display: block; font-family: var(--body); font-size: .8rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 7px; font-weight: 600;
}
.arlen-optional { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; }
.arlen-field input, .arlen-field select, .arlen-field textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--body); font-size: 1rem; line-height: 1.5;
  padding: 12px 14px; min-height: 46px;
  border: 1px solid var(--line, rgba(0,0,0,.24));
  border-radius: 0; background: var(--white, #fff); color: var(--ink);
}
.arlen-field textarea { min-height: 150px; resize: vertical; }
.arlen-field input:focus, .arlen-field select:focus, .arlen-field textarea:focus {
  outline: 2px solid var(--link, #8a4b2a); outline-offset: 1px; border-color: transparent;
}
.arlen-hint { font-family: var(--body); font-size: .82rem; color: var(--muted); margin: 7px 0 0; }
.arlen-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.arlen-form .arlen-btn { border: 0; cursor: pointer; font-family: var(--body); }

/* ---- full listings on the breed pages ----------------------------------- */
.arlen-listings--full { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.arlen-listing--full .arlen-listing__media { aspect-ratio: 4/5; }
.arlen-listing__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.arlen-listing__thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.arlen-listing__tag {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--line, rgba(0,0,0,.2)); padding: 1px 6px; margin-left: 4px;
}
.arlen-listing__orig { font-family: var(--body); font-size: .8rem; color: var(--muted); margin: 0; line-height: 1.45; }
.arlen-listing__ig { margin: 8px 0 0; font-family: var(--body); font-size: .8rem; }
@media (max-width: 1000px) { .arlen-listings--full { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .arlen-listings--full { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ---- photo slider on the bunny cards ------------------------------------ */
.arlen-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  aspect-ratio: 1 / 1;
  background: var(--sand, #f4efe7);
  scrollbar-width: thin;
}
.arlen-listing--full .arlen-slider { aspect-ratio: 4 / 5; }
.arlen-slider::-webkit-scrollbar { height: 4px; }
.arlen-slider::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); }
.arlen-slide {
  flex: 0 0 100%;
  width: 100%; height: 100%;
  object-fit: cover;
  scroll-snap-align: center;
  display: block;
}
.arlen-slider:focus-visible { outline: 2px solid var(--link, #8a4b2a); outline-offset: -2px; }
.arlen-slider__count {
  font-family: var(--body); font-size: .72rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  margin: 6px 0 0; padding: 0 16px;
}
/* The vaccination badge. An earlier version used a mint green that belonged
   to no part of this palette and read as a pharmacy sticker. It now uses the
   site's own ink and rule colours, so it sits as a quiet fact beside the
   price rather than shouting next to it. */
.arlen-vax {
  display: inline-block;
  font-family: var(--body);
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line, rgba(0,0,0,.18));
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---- transit stats strip on the state pages ----------------------------- */
.arlen-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line, rgba(0,0,0,.14));
  border: 1px solid var(--line, rgba(0,0,0,.14));
  margin: 22px 0;
}
.arlen-stat { background: var(--white,#fff); padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; }
.arlen-stat__k { font-family: var(--body); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.arlen-stat__v { font-family: var(--display); font-size: 1.08rem; color: var(--ink); }
@media (max-width: 640px) { .arlen-stats { grid-template-columns: 1fr; } }
.arlen-nearby { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
@media (max-width: 640px) { .arlen-nearby { grid-template-columns: 1fr; } }

/* ---- the fuller contact form -------------------------------------------- */
.arlen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .arlen-row { grid-template-columns: 1fr; } }
.arlen-fieldset {
  border: 1px solid var(--line, rgba(0,0,0,.16));
  padding: 16px 18px 14px;
  margin-bottom: 20px;
}
.arlen-fieldset legend {
  font-family: var(--body); font-size: .8rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
  padding: 0 8px;
}
.arlen-radio {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; min-height: 44px; cursor: pointer;
  font-family: var(--body); font-size: .95rem; color: var(--ink);
  text-transform: none; letter-spacing: 0;
}
/* The generic ".arlen-field input" rule sets appearance:none to flatten text
   inputs, and the radio fieldsets carry .arlen-field too, so the radios were
   inheriting it and rendering as nothing at all. Clicking worked; there was
   simply no dot drawn. Restore the native control for radios and checkboxes
   and let accent-color tint it. */
.arlen-radio input[type="radio"],
.arlen-radio input[type="checkbox"],
.arlen-fieldset input[type="radio"],
.arlen-fieldset input[type="checkbox"] {
  -webkit-appearance: radio;
  appearance: auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--ink, #111);
  cursor: pointer;
}
.arlen-fieldset input[type="checkbox"] { -webkit-appearance: checkbox; }

/* the whole row highlights when its option is chosen, so the answer is
   obvious at a glance rather than needing you to hunt for the dot */
.arlen-radio:has(input:checked) { background: var(--sand, #faf7f2); font-weight: 600; }
.arlen-radio:has(input:focus-visible) { outline: 2px solid var(--link, #8a4b2a); outline-offset: 2px; }
.arlen-radio + .arlen-radio { border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.arlen-form optgroup { font-family: var(--body); font-style: normal; font-weight: 600; }

/* ---- one bunny dropdown per breed --------------------------------------- */
.arlen-breedpicks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 12px; }
@media (max-width: 620px) { .arlen-breedpicks { grid-template-columns: 1fr; } }
.arlen-breedpick label {
  display: block; font-family: var(--body); font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  font-weight: 600; margin-bottom: 6px;
}
.arlen-breedpick select {
  width: 100%; box-sizing: border-box; min-height: 46px;
  font-family: var(--body); font-size: .95rem; padding: 11px 12px;
  border: 1px solid var(--line, rgba(0,0,0,.24)); border-radius: 0;
  background: var(--white,#fff); color: var(--ink);
}
.arlen-breedpick select:disabled { color: var(--muted); background: var(--sand,#faf7f2); cursor: not-allowed; }


/* ==========================================================================
   MOBILE PANEL COLOURS
   The offcanvas panel is dark: the theme paints it rgba(18,21,25,.98) and sets
   its links to #ffffff. An unscoped ".ct-menu-link { color: var(--ink)
   !important }" in this sheet was overriding that and forcing near-black text
   onto a near-black panel, so opening the hamburger showed a dark rectangle
   with nothing readable in it. That rule is now scoped to .header-menu-1, and
   these restate the panel's own colours so it cannot happen again.
   ========================================================================== */
#offcanvas .ct-menu-link,
#offcanvas .ct-menu-link:hover,
.mobile-menu .ct-menu-link {
  color: #fff !important;
}
#offcanvas .sub-menu .ct-menu-link,
.mobile-menu .sub-menu .ct-menu-link {
  color: rgba(255, 255, 255, .78) !important;
}
#offcanvas .ct-toggle-dropdown-mobile svg,
.mobile-menu .ct-toggle-dropdown-mobile svg { fill: #fff; }
#offcanvas .ct-toggle-close svg { fill: #fff; }
#offcanvas .menu-item { border-bottom: 1px solid rgba(255, 255, 255, .10); }
#offcanvas .sub-menu .menu-item { border-bottom: 0; }

/* ---- offcanvas panel open state (our toggle sets .active) --------------- */
/* Blocksy already owns display, opacity, pointer-events and the inner
   transform, keyed off body[data-panel]. arlen-nav.js sets that attribute, so
   nothing here should restate those or the two fight. Only the scroll lock and
   the submenu behaviour are ours. */
body.ct-panel-open { overflow: hidden; }
/* a submenu in the panel is collapsed until its chevron is tapped */
#offcanvas .menu-item-has-children > .sub-menu { display: none; }
#offcanvas .menu-item-has-children.ct-active > .sub-menu { display: block; }
#offcanvas .ct-toggle-dropdown-mobile { transition: transform .2s ease; }
#offcanvas .menu-item-has-children.ct-active > .ct-sub-menu-parent .ct-toggle-dropdown-mobile { transform: rotate(180deg); }

/* ---- full-width, equal-height bunny cards -------------------------------- */
/* The cards live in a band, not in prose. Their grid must never inherit a
   reading measure, and every card in a row must end level regardless of how
   long its description runs. */
.arlen-listings { align-items: stretch; max-width: none; width: 100%; }
.arlen-listings .arlen-listing { height: 100%; }
.arlen-listing__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.arlen-listing__note { flex: 1 1 auto; }
.arlen-listing__cta { margin-top: auto; padding-top: 12px; }
.arlen-breed-block .arlen-prose { max-width: 70ch; }

/* ==========================================================================
   HEADER ROW VISIBILITY  —  THE REASON THE HAMBURGER NEVER RENDERED

   Blocksy ships [data-device=mobile] and [data-device=desktop] as display:none
   and relies on WordPress-generated CSS to switch the right one back on at
   each breakpoint. The static export lost that generated stylesheet, so BOTH
   rows stayed hidden. Desktop survived only because the menu sits outside the
   hidden wrapper; the mobile row, which is where the hamburger lives, did not.
   Hiding .header-menu-1 under 1000px then left no navigation at all on a phone.

   These restore the switch explicitly. Nothing else depends on the theme's
   generated CSS.
   ========================================================================== */
@media (max-width: 999.98px) {
  #header [data-device="desktop"] { display: none !important; }
  #header [data-device="mobile"]  { display: block !important; }
  #offcanvas [data-device="desktop"] { display: none !important; }
  #offcanvas [data-device="mobile"]  { display: block !important; }
}
@media (min-width: 1000px) {
  #header [data-device="mobile"]  { display: none !important; }
  #header [data-device="desktop"] { display: block !important; }
  #offcanvas [data-device="mobile"]  { display: none !important; }
  #offcanvas [data-device="desktop"] { display: block !important; }
}

/* the trigger itself: a real 44px tap target, never collapsed */
#header [data-device="mobile"] .ct-header-trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
#header [data-device="mobile"] .ct-header-trigger svg {
  width: 22px; height: 22px; fill: var(--ink, #111);
}

/* ==========================================================================
   THE STANDALONE SHELL
   Header, navigation, hamburger and footer for the WordPress-free build.

   The content sections were always styled by arlen.css, because those use the
   arlen-* class vocabulary. This is the chrome that replaced Blocksy, and it
   needs its own rules because it uses its own class names. Building the markup
   without this file is why the first render came out as raw unstyled HTML.
   ========================================================================== */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink, #111); color: #fff; padding: 10px 16px;
  font-family: var(--body); font-size: .9rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---- header -------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--line, rgba(0,0,0,.12));
  background: var(--white, #fff);
  position: sticky; top: 0; z-index: 50;
}
.site-header__inner {
  max-width: var(--wrap, 1160px); margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 28px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 74px;
}
.site-logo {
  font-family: var(--display); font-size: 1.5rem; color: var(--ink, #111);
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.site-logo:hover { opacity: .75; }

/* ---- desktop nav --------------------------------------------------------- */
.nav-desktop { display: none; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-desktop .nav-list { display: flex; align-items: center; gap: 2px; }
.nav-desktop .nav-item { position: relative; }
.nav-desktop .nav-item > a,
.nav-desktop .nav-parent > a {
  display: block; padding: 26px 10px;
  font-family: var(--body); font-size: .74rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink, #111); text-decoration: none; white-space: nowrap;
}
.nav-desktop .nav-item > a:hover,
.nav-desktop .nav-parent > a:hover { opacity: .6; }
.nav-desktop .is-current > a,
.nav-desktop .is-current > .nav-parent > a,
.nav-desktop .is-ancestor > .nav-parent > a { box-shadow: inset 0 -2px 0 var(--ink, #111); }
.nav-desktop .nav-parent { display: flex; align-items: center; }
.nav-desktop .nav-toggle {
  background: none; border: 0; padding: 0 6px 0 0; cursor: pointer;
  color: var(--ink, #111); display: inline-flex; align-items: center;
}

.nav-desktop .nav-sub {
  position: absolute; top: 100%; left: 0; min-width: 240px;
  list-style: none; margin: 0; padding: 6px 0;
  background: var(--white, #fff);
  border: 1px solid var(--ink, #111);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
  z-index: 60;
}
.nav-desktop .has-children:hover > .nav-sub,
.nav-desktop .has-children:focus-within > .nav-sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-desktop .nav-sub a {
  display: block; padding: 9px 20px;
  font-family: var(--body); font-size: .88rem; color: var(--ink, #111);
  text-decoration: none; white-space: nowrap;
}
.nav-desktop .nav-sub a:hover { background: var(--sand, #faf7f2); }
.nav-desktop .nav-item:nth-last-child(-n+2) .nav-sub { left: auto; right: 0; }

/* ---- hamburger ----------------------------------------------------------- */
.nav-burger {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; min-width: 44px; padding: 8px 4px;
  background: none; border: 0; cursor: pointer; color: var(--ink, #111);
  font-family: var(--body); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.nav-burger__bars { display: block; width: 22px; }
.nav-burger__bars span {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-burger__bars span + span { margin-top: 5px; }
.nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- mobile panel -------------------------------------------------------- */
.nav-panel {
  position: fixed; inset: 0; z-index: 200;
  background: var(--white, #fff);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.nav-panel[hidden] { display: none; }
.nav-panel__inner { padding: 22px clamp(18px, 6vw, 32px) 60px; }
.nav-close {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; line-height: 1;
  font-size: 2rem; background: none; border: 0; cursor: pointer; color: var(--ink, #111);
}
.nav-list--mobile { margin-top: 42px; }
.nav-list--mobile > li { border-bottom: 1px solid var(--line, rgba(0,0,0,.10)); }
.nav-list--mobile > li > a,
.nav-list--mobile .nav-parent > a {
  display: block; padding: 15px 0; min-height: 44px;
  font-family: var(--body); font-size: 1.05rem; font-weight: 500;
  color: var(--ink, #111); text-decoration: none;
}
.nav-list--mobile .nav-parent { display: flex; align-items: center; justify-content: space-between; }
.nav-list--mobile .nav-parent > a { flex: 1; }
.nav-list--mobile .nav-toggle {
  width: 44px; min-height: 44px; background: none; border: 0;
  cursor: pointer; color: var(--ink, #111); display: inline-flex;
  align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.nav-list--mobile .is-open > .nav-parent .nav-toggle { transform: rotate(180deg); }
.nav-list--mobile .nav-sub { list-style: none; margin: 0 0 12px; padding: 0 0 0 16px; display: none; }
.nav-list--mobile .is-open > .nav-sub { display: block; }
.nav-list--mobile .nav-sub a {
  display: block; padding: 11px 0; min-height: 44px;
  font-family: var(--body); font-size: .95rem; color: var(--muted, #6B6B6B);
  text-decoration: none;
}
.nav-panel__foot {
  margin-top: 32px; font-family: var(--body); font-size: .9rem;
  color: var(--muted, #6B6B6B); line-height: 1.7;
}
body.nav-open { overflow: hidden; }

/* ---- footer -------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line, rgba(0,0,0,.14));
  background: var(--sand, #faf7f2);
  margin-top: 64px;
}
.site-footer__inner {
  max-width: var(--wrap, 1160px); margin: 0 auto;
  padding: 56px clamp(18px, 4vw, 28px) 40px;
  display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 32px;
  align-items: start;
}
.foot-about p {
  font-family: var(--body); font-size: .88rem; color: var(--muted, #6B6B6B);
  line-height: 1.65; margin: 0 0 12px;
}
.foot-name {
  font-family: var(--display); font-size: 1.25rem;
  color: var(--ink, #111) !important; margin-bottom: 10px !important;
}
.foot-arba abbr { text-decoration: none; border-bottom: 1px dotted currentColor; }
.foot-col h3 {
  font-family: var(--body); font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted, #6B6B6B); font-weight: 600; margin: 0 0 14px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 9px; line-height: 1.4; }
.foot-col a {
  font-family: var(--body); font-size: .86rem; color: var(--ink, #111);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.foot-col a:hover { text-decoration-thickness: 2px; }
.site-footer__legal { border-top: 1px solid var(--line, rgba(0,0,0,.10)); }
.site-footer__legal p {
  max-width: var(--wrap, 1160px); margin: 0 auto;
  padding: 20px clamp(18px, 4vw, 28px);
  font-family: var(--body); font-size: .8rem; color: var(--muted, #6B6B6B);
}

/* ---- breakpoints --------------------------------------------------------- */
@media (min-width: 1000px) {
  .nav-desktop { display: block; }
  .nav-burger { display: none; }
  .nav-panel { display: none !important; }
}
@media (max-width: 1100px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 26px; padding-top: 40px; }
  .site-header__inner { min-height: 62px; }
  .site-logo { font-size: 1.25rem; }
}


/* ==========================================================================
   OVERFLOW GUARD
   A ch-based max-width is a reading measure, not a layout constraint: at the
   display size 18ch is wider than a 390px phone, so the H1 forced the whole
   document wide and pushed the header's menu button off-screen entirely. That
   is why the hamburger looked missing rather than broken.
   Every measure is now capped at the viewport, and the document itself is
   stopped from scrolling sideways as a backstop.
   ========================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
.arlen-hero h1,
.arlen-prose,
.arlen-answer,
.arlen-lede { max-width: min(var(--measure, 70ch), 100%); }
.arlen-hero h1 { --measure: 18ch; }
.arlen-lede { --measure: 46ch; }
.arlen-prose { --measure: 68ch; }
.arlen-table { width: 100%; }
.arlen-band__inner > * { max-width: 100%; }
img, video, table { max-width: 100%; }
@media (max-width: 620px) {
  .arlen-hero h1 { font-size: clamp(1.5rem, 7vw, 2.1rem); line-height: 1.15; }
  .arlen-cta-line { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .arlen-cta-line .arlen-btn { flex: 1 1 100%; text-align: center; }
}


/* ==========================================================================
   SLIDER CONTAINMENT  —  the real cause of the horizontal overflow

   Measured: viewport 497px, widest element 1958px, and it was IMG.arlen-slide.

   .arlen-slide had flex:0 0 100% inside a flex container with no resolved
   width, so "100%" had nothing to be a percentage OF and each image fell back
   to its intrinsic size, roughly 1000px. Four of those in a row dragged the
   document to 1958px, which pushed the header's menu button off-screen. The
   hamburger was never missing; it was two viewports to the right.

   The container is now explicitly bounded and every slide is pinned to the
   container width rather than the image's own.
   ========================================================================== */
.arlen-listing,
.arlen-listing__body,
.arlen-slider { min-width: 0; max-width: 100%; }

.arlen-slider {
  width: 100%;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.arlen-slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: center;
  display: block;
}
/* grid and flex children default to min-width:auto, which lets an oversized
   image widen its track. Every listing grid gets an explicit floor of zero. */
.arlen-listings, .arlen-listings--full { min-width: 0; }
.arlen-listings > *, .arlen-listings--full > * { min-width: 0; }