/* Double Cherry's layout (PAGE-1): what every page shares (the header with its menu, the footer, the page's edge),
   the home page's sections and the 404 page's (PAGE-4). Every colour, size, space, surface, focus ring and button
   comes from theme.css; this file only places things. The hero's mark sits whole (DESIGN-1,
   doc/sketches/mark-placement.css). */

.edge { padding-left: var(--edge); padding-right: var(--edge); max-width: 90rem; margin: 0 auto; }
:target, section[id] { scroll-margin-top: var(--space-sm); }

/* Skip link: off screen until the keyboard reaches it */
.skip { position: absolute; left: -999px; top: var(--space-sm); z-index: 10; display: inline-flex; align-items: center;
  min-height: var(--target); padding: 0 var(--space-sm); background: var(--paper); color: var(--ink); font-weight: 700; }
.skip:focus { left: var(--space-sm); }

/* Header */
.site-header { position: relative; z-index: 3; }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-lg);
  padding-top: var(--space-md); padding-bottom: var(--space-md); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--target); font-weight: 800; font-size: 1.25rem;
  text-decoration: none; }
.brand-mark { width: 2.25rem; height: 2.25rem; flex: none; }
.nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-flex; align-items: center; min-height: var(--target); text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.menu-toggle { padding: 0.5rem 1.25rem; }
/* A phone: the links fold behind "Menu" (shown by site.js; without it the links stay in view) */
@media (max-width: 47.99rem) {
  .nav[hidden] { display: none; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--cherry);
    padding: var(--space-xs) var(--edge) var(--space-md); border-top: 1px solid var(--hair); }
  .nav a { display: flex; padding: 0.4rem 0; font-size: 1.375rem; font-weight: 700; border-bottom: 1px solid var(--hair); }
}

/* The hero: the cherry field, the claim, and the mark whole at the bottom right */
.hero { position: relative; overflow: hidden; --mark-w: min(58vw, 18rem);
  padding-bottom: calc(var(--mark-w) * 1.07 + 3.5rem); }
.hero-in { position: relative; z-index: 1; padding-top: clamp(2rem, 7vh, 7rem); }
.hero h1 { max-width: 8.2em; }
.hero .lead { margin: var(--space-lg) 0 0; max-width: 25em; }
.start { margin-top: 2.25rem; }
.mark-big { position: absolute; z-index: 0; right: 1.25rem; bottom: 1.75rem; width: var(--mark-w); height: auto; }
@media (min-width: 60rem) {
  .hero { --mark-w: min(30vw, 27rem); padding-bottom: clamp(7rem, 16vh, 11rem); }
  .mark-big { right: 5vw; bottom: 2.5rem; }
}

/* What we do: a ledger */
.do { padding-top: var(--section); padding-bottom: var(--section); }
.ledger { margin: var(--space-xl) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hair); }
.ledger li { display: grid; gap: 0.4rem var(--space-xl); padding: 1.75rem 0; border-top: 1px solid var(--hair); }
@media (min-width: 60rem) { .ledger li { grid-template-columns: 5fr 7fr; padding: 2.4rem 0; align-items: baseline; } }
.ledger p { margin: 0; max-width: var(--measure); font-size: clamp(var(--text-body), 0.4vw + 1.05rem, 1.375rem); }

/* Hearing Maid: its own colour, its words and its link */
/* Grid items may shrink below their longest word, so enlarged text breaks instead of pushing the page sideways */
.maid-in > *, .ledger li > * { min-width: 0; }
.maid-in { display: grid; gap: var(--space-lg); padding-top: var(--section); padding-bottom: var(--section); align-items: end; }
@media (min-width: 60rem) { .maid-in { grid-template-columns: 7fr 5fr; gap: var(--space-xl); } }
.maid h2 { font-size: clamp(3rem, 7vw, 6.5rem); line-height: 0.95; letter-spacing: -0.04em; }
.maid p { margin: 1.75rem 0 0; max-width: 24em; font-size: var(--text-lead); line-height: 1.5; }
.site { justify-self: start; display: inline-block; max-width: 100%; min-height: var(--target); padding-block: 0.25rem; font-weight: 800;
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem); letter-spacing: -0.02em; }
@media (min-width: 60rem) { .site { justify-self: end; } }

/* Contact */
.contact { padding-top: var(--section); padding-bottom: var(--section); }
.contact h2 { font-size: clamp(2.5rem, 5vw + 1rem, 5.5rem); line-height: 0.98; max-width: 11em; }
.reach { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-lg); }
.mail { display: inline-block; max-width: 100%; min-height: var(--target); padding-block: 0.25rem; font-weight: 800; color: var(--cherry);
  font-size: clamp(1.5rem, 2.4vw + 1rem, 3rem); letter-spacing: -0.02em; text-decoration-thickness: 3px; overflow-wrap: anywhere; }
.copied { font-weight: 700; color: var(--cherry-deep); }

/* Footer: the year and name, and the links to the Legal notice and Privacy (LEGAL-2) */
.site-footer { border-top: 1px solid var(--hair); }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); justify-content: space-between;
  padding-top: var(--space-lg); padding-bottom: var(--space-lg); color: var(--muted); font-size: var(--text-small); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); margin: 0; padding: 0; list-style: none; }
.foot-links a { display: inline-flex; align-items: center; min-height: var(--target); }

/* The 404 page (PAGE-4) and the Legal notice and Privacy pages (LEGAL-2): a heading and the text under it, the
   footer kept low on a short page */
.lost, .doc { min-height: 70vh; padding-top: var(--section); padding-bottom: var(--section); }
.lost h1, .doc h1 { font-size: clamp(2.5rem, 5vw + 1rem, 5.5rem); line-height: 0.98; max-width: 11em; }
.lost .button { margin-top: var(--space-lg); }
.doc h1 { margin-bottom: var(--space-lg); }
.doc p { max-width: var(--measure); margin: var(--space-md) 0 0; }
/* The right to object, set apart from the rest (GDPR Art. 21(4)) */
.object { max-width: var(--measure); margin-top: var(--space-lg); padding: var(--space-md); }
.object h2 { font-size: var(--text-h3); }
.object p { margin-top: var(--space-xs); }