/* Homepage. The shared system lives in assets/css/*.css and is built into
   mc.css; the only thing that belongs here is the hero, because the homepage
   is the only page that has one.

   The contact section below the hero is built from the shared components and
   the .contact-split in page-interior.css, so there is nothing for it here. */

  /* ---------------- hero ---------------- */
  .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
        padding:clamp(7rem,15vh,10rem) 0 clamp(3rem,8vh,5rem)}
  /* Bleeds to the hero's own top, right and bottom edges so it meets the band
     below with no gap. Absolute, so the section padding cannot push it in. */
  .hero-figure{position:absolute;top:0;right:0;bottom:0;width:min(52%,900px);margin:0;z-index:1;overflow:hidden}
  /* A fine dot screen over the photograph — a printed-halftone suggestion
     rather than a pattern you notice. It sits at z-index 1, above the image but
     UNDER the gradient at z-index 2, so it fades out exactly where the picture
     does instead of carrying on across the black. */
  .hero-figure::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
      background-image:radial-gradient(rgba(246,242,235,.28) 1px,transparent 1.1px);
      background-size:13px 13px}
  .hero-figure::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
      background:linear-gradient(90deg,var(--ink) 0%,rgba(11,10,9,.74) 14%,rgba(11,10,9,.2) 40%,transparent 64%)}
  .hero-figure img{width:100%;height:100%;object-fit:cover;object-position:44% 22%;
                   transform:scale(1);transition:transform 14s cubic-bezier(.22,.61,.36,1)}
  .js .hero-figure.in img{transform:scale(1.025)}
  /* .hero is a flex container: without this its .wrap sizes to its content and
     margin:0 auto centres it, which pushes the headline into mid-screen. */
  .hero > .wrap{width:100%;flex:1 1 auto}
  .hero-copy{position:relative;z-index:2;max-width:min(52%,620px)}
  /* Size comes from .t-section in the markup now, not from here: the wordmark
     is one line at a normal heading step. Only the tracking is local — the
     hero sets it wider than the shared scale does. */
  .hero h1{letter-spacing:.055em;line-height:1.04}
  .hero-sub{margin:clamp(1.3rem,3vh,1.9rem) 0 0;font-size:clamp(11px,1.1vw,13.5px);
            letter-spacing:.3em;text-transform:uppercase;color:var(--on-dark);line-height:1.8}
  .hero-sub.dim{color:var(--on-dark-mute);letter-spacing:.26em;margin-top:0}
  .hero-rule{width:56px;height:1px;background:var(--champagne);margin:1.1rem 0;opacity:.9;transform-origin:left}

  /* --- the three lines as one block ----------------------------------------
     fit-content makes the block exactly as wide as its widest line, which is
     the wordmark; the two lines under it then justify out to that same width.
     text-align-last is what does it — a one-line paragraph's first line is also
     its last, so without it justify would leave the line ragged. Tighter
     leading between them than the old spacing, because they are a group now. */
  .hero-lines{width:fit-content;max-width:100%}
  .hero-lines .hero-sub{margin-top:clamp(.5rem,1.4vh,.8rem);
                        text-align:justify;text-align-last:justify}

  /* Tracking opened up on lines two and three. It does two things at once: the
     letters get the air they were asked for, and the justification has less
     slack left to dump into the word gaps — at 1440 the line was 283px of text
     stretched to 484px, which left the ampersand stranded mid-line. Wider
     letters close most of that distance with letterforms instead of holes.

     There is a ceiling. The block is fit-content, so it is as wide as its
     widest line; track a sub past the wordmark's width and the sub becomes the
     measure, leaving the wordmark visibly short — the opposite of the equal
     lengths these were set to. Measured in the browser, the wordmark is
     overtaken at .62em (line two) and .75em (line three) at 1025px, which is
     the tightest point of the desktop range. These sit just under that; the
     justification absorbs the remainder. */
  .hero-lines .hero-sub{letter-spacing:.56em}
  .hero-lines .hero-sub.dim{letter-spacing:.68em}
  .js .hero-rule{transform:scaleX(0);transition:transform 1s cubic-bezier(.22,.61,.36,1) .2s}
  .js .hero-rule.in{transform:scaleX(1)}
  .hero-ctas{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,3.2vw,3rem);margin-top:clamp(1.6rem,3.2vh,2.2rem)}

  /* --- sign-in, in the hero -------------------------------------------------
     Capped well short of the copy column. The column runs to 620px on a large
     screen, and inputs stretched across all of it read as a contact form
     rather than a sign-in. Field spacing is tighter than the site default too:
     the hero has a fixed height to live within, and the form shares it with
     the wordmark. */
  /* --- the contact page, built from this same hero -------------------------
     contact.php loads this stylesheet and uses .hero / .hero-figure /
     .hero-copy exactly as the homepage does. Two things differ, and they are
     both below: its form is bigger than the sign-in form, and it is taller
     than one screen.

     The sign-in form fits inside the viewport, so the homepage hero centres
     its column. A column taller than the screen cannot be centred — the top
     of it goes above the fold — so this variant anchors to the top and leaves
     room for the header. min-height stays, so a short form still fills the
     screen rather than floating in a band. */
  .hero.hero-tall{align-items:flex-start;
                  padding-block:calc(var(--header-h) + clamp(2.5rem,7vh,5rem)) clamp(3rem,8vh,5rem)}
  .hero-form{margin-top:clamp(1.3rem,3vh,1.9rem);max-width:min(100%,460px)}
  /* Wider than the 360px sign-in form: this one has a two-up name/email row
     and a message box, and both crush at that width. Still capped, because the
     copy column runs to 620px and a form filling it reads as a page. */
  .hero-form .field{margin-bottom:clamp(.85rem,2vh,1.25rem)}
  .hero-form .form-actions{margin-top:.3rem;display:flex;flex-wrap:wrap;
                           gap:.7rem 1.1rem;align-items:center}
  .hero-form .aside{font-size:11px;line-height:1.6;color:var(--on-dark-mute)}

  .hero-login{margin-top:clamp(1.5rem,3.4vh,2.2rem);max-width:min(100%,360px)}
  .hero-login .field{margin-bottom:clamp(.8rem,1.8vh,1.1rem)}
  .hero-login .check{margin:.1rem 0 1rem}
  .hero-login .check span{font-size:11.5px;line-height:1.6}
  .hero-login .form-actions{margin-top:0}

  /* The scroll cue is a link now — it goes to the contact form, which is the
     only thing below the hero — so it needs the hit area and focus ring a link
     should have, and must not pick up the underline links carry elsewhere. */
  .scroll-cue{position:absolute;right:clamp(.9rem,2.2vw,2.2rem);top:50%;transform:translateY(-50%);
              display:flex;flex-direction:column;align-items:center;gap:.9rem;z-index:3;
              padding:.6rem .5rem;border:0;text-decoration:none}
  .scroll-cue:hover span{color:var(--champagne)}
  .scroll-cue span{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;
                   color:var(--on-dark-mute);writing-mode:vertical-rl;
                   transition:color var(--t-fast)}
  .scroll-cue i{display:block;width:1px;height:90px;background:linear-gradient(var(--champagne),transparent);
                animation:cue 2.6s ease-in-out infinite}
  .scroll-cue b{display:block;width:5px;height:5px;border-radius:50%;background:var(--champagne)}
  @keyframes cue{0%,100%{opacity:.3;transform:scaleY(.55);transform-origin:top}
                 50%{opacity:1;transform:scaleY(1);transform-origin:top}}

  /* ---------------- contact ---------------- */
  /* The one section under the hero. scroll-margin clears the fixed header when
     the page is jumped to with #contact rather than scrolled to. */
  #contact{scroll-margin-top:var(--header-h)}

  /* One centred column: heading, then the form. There is no address block
     beside it any more, so a two-column split would just be a column of
     white space. Capped at a comfortable form measure rather than the full
     1400px container, which would stretch each field far past readable. */
  .contact-solo{max-width:44rem;margin:0 auto}
  .contact-solo .contact-aside{margin-bottom:clamp(2.2rem,5vh,3.2rem)}
  .contact-solo .contact-aside h2{color:var(--on-dark)}

  /* ---------------- responsive ---------------- */
  @media (max-width:1024px){
    /* The hero is already exactly 100svh; the empty band under the CTA came from
       centring, which split the spare space evenly. Anchor the copy to the
       bottom and the space moves above the text, onto the portrait. */
    .hero{align-items:flex-end;min-height:100svh;
          padding:clamp(6rem,12vh,8rem) 0 clamp(3.4rem,7vh,5.5rem)}
    .hero-copy{max-width:none}
    /* the portrait becomes a full band behind the words; crop unchanged —
       face large, upper-left, hair filling the upper right */
    .hero-figure{position:absolute;inset:0;width:100%}
    .hero-figure img{object-position:64% 12%}
    /* the figure now fills the hero and the copy sits over its lower half, so
       the dots are finer and lighter here than on desktop */
    .hero-figure::before{background-image:radial-gradient(rgba(246,242,235,.20) 1px,transparent 1.1px);
                         background-size:11px 11px}
    /* A photographic fade rather than a hard cut to black: the picture stays
       readable well past halfway, then goes down in stages. The lower stops are
       heavy because the copy sits over them and has to stay legible. */
    /* Re-weighted 2026-09-27, when the sign-in form moved into the hero. The
       copy column is ~600px tall on a phone now instead of ~350px, so it starts
       around a fifth of the way down instead of halfway — which is exactly
       where this gradient used to be at its lightest. Labels and input rules
       were sitting on a lit shoulder and could not be read. The face keeps the
       top fifth; the darkening starts sooner and harder beneath it. */
    .hero-figure::after{background:linear-gradient(180deg,
        rgba(11,10,9,.22) 0%,
        rgba(11,10,9,.10) 14%,
        rgba(11,10,9,.58) 32%,
        rgba(11,10,9,.82) 48%,
        rgba(11,10,9,.92) 66%,
        rgba(11,10,9,.97) 86%,
        var(--ink) 100%)}

    /* The gradient is an average; the shoulder under the first field is the
       brightest thing in the frame and beat it. Letter-spaced 11px caps are
       the first thing to disappear against it, so they carry their own shadow.
       Cheaper than darkening the photograph any further. */
    .hero-copy .hero-sub,
    .hero-login .field > label,
    .hero-login .check span,
    .hero-form .field > label{text-shadow:0 1px 10px rgba(11,10,9,.9)}

    /* 16px is the threshold below which iOS Safari zooms the page on focus.
       Everywhere else on the site that is a small annoyance inside a form the
       visitor chose to open; here it happens on the front door, the moment a
       member taps the first field — and on the contact page, where the form
       sits over the picture in the same way. */
    .hero-login .field input,
    .hero-form .field input,
    .hero-form .field textarea{font-size:16px}
    /* a composed group, not a stretched one */
    .hero h1{line-height:1.02}
    .hero-sub{margin-top:clamp(.85rem,2vh,1.25rem)}
    /* A phone has almost no room for this. The wordmark is 263px at 375px wide
       and line two is already 230px of it, so the ceiling measured here is
       .32em — past that the line overtakes the wordmark. Line three is shorter
       and can take more. Opening these further means giving the wordmark more
       tracking too, so that it stays the widest line. */
    .hero-lines .hero-sub{letter-spacing:.30em}
    .hero-lines .hero-sub.dim{letter-spacing:.42em}
    .hero-rule{margin:.8rem 0}
    .hero-ctas{margin-top:clamp(1.3rem,2.8vh,1.9rem)}
    .scroll-cue{display:none}
  }

  /* A short phone — an SE is 667px tall — fitted the wordmark and the form
     between them to 744px, which pushed Enter below the fold. Nobody should
     have to scroll the front page to find the button they came for. The
     wordmark gives up the height, since it is also in the header. Must stay
     AFTER the block above: these are overrides of it. */
  @media (max-width:1024px) and (max-height:700px){
    .hero{padding:clamp(4rem,9vh,5.5rem) 0 clamp(2rem,4vh,3rem)}
    /* No font-size override here any more: the wordmark is one line at
       .t-section, which is already smaller on a phone than the shrink this
       used to apply. */
    .hero-sub{margin-top:.9rem}
    .hero-rule{margin:.8rem 0}
    .hero-login{margin-top:1.1rem}
    .hero-login .field{margin-bottom:.7rem}
    .hero-login .check{margin:.1rem 0 .8rem}
    .hero-ctas{margin-top:1.1rem}
  }
  @media (max-width:760px){
    .hero-ctas{flex-direction:column;align-items:flex-start;gap:.75rem}
    .hero-ctas .link-cta{padding:.45rem 0 .6rem}
  }
  @media (prefers-reduced-motion:reduce){
    .js .hero-figure.in img{transform:none;transition:none}
    .js .hero-rule{transform:scaleX(1);transition:none}
    .scroll-cue i{animation:none}
  }