/* ==========================================================================
   tsiwp.com : landing page
   Cover and blurb sit side by side, with the buy buttons inside the blurb
   panel. Everything else is below them.
   ========================================================================== */

.home {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centred in the viewport rather than sitting at the top. The padding stays
       so that on a short window the content still has room to breathe before it
       starts scrolling. */
    justify-content: center;
    gap: clamp(1.2rem, 3vh, 2rem);
    padding: clamp(2rem, 5vh, 3.5rem) 6vw clamp(2.5rem, 6vh, 4rem);
}

/*
   Hero. Stacked by default, two equal columns from 1620px up. The breakpoint
   is where a 700px column still leaves the copy a comfortable measure; below
   it, stacked is the better layout anyway.
*/
.home__hero {
    width: min(1440px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 1620px) {
    /*
       Two equal columns, and the equality is the point: both boxes end up the
       same width because the columns are 1fr each, and the same height because
       a grid row stretches its items to the tallest one. Neither is a tuned
       number, so neither drifts if the copy or the type changes.

       This replaced a flex row where the cover took its height from the panel
       and converted it back into width. That coupling was the source of every
       geometry problem on this page: the runaway that filled the viewport, the
       half-width caps needed to stop it, and the cover ending up wider than the
       panel. A grid removes the coupling instead of constraining it.

       One thing still has to hold: the cover must be the taller of the two, or
       it would be the item getting stretched and it would letterbox. At a 700px
       column the cover is 1082px tall against about 998px of panel content, so
       there is roughly 84px of slack and the cover always drives the row. The
       panel simply centres its copy in the extra space.
    */
    .home__hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        justify-content: center;
    }
}

/*
   Cover sizing, stacked layout: by viewport HEIGHT, not width, so the fold
   stays the constraint it actually is rather than the container width.
*/
.home__cover {
    height: min(64vh, 620px);
    max-width: 82vw;
    width: auto;
    border: var(--line) solid var(--ink-white);
    border-radius: var(--radius);
    /* No drop shadow. The comic-line system separates things with a drawn ink
       outline, never with a soft one, so a shadow reads as a different design
       language sitting on top of this one. */
}
.home__hero picture { display: block; }

@media (min-width: 1620px) {
    /* Fill the column and take height from the aspect ratio. No object-fit is
       needed: width:100% with height:auto cannot distort. */
    .home__hero picture { display: block; }
    .home__cover {
        width: 100%;
        height: auto;
        max-width: none;
    }
}

/* The book's own back cover copy, plus the buy buttons.
   The panel is stretched to the cover's height, so its content needs somewhere
   to sit within that height: centred, not pinned to the top edge. */
.home__about {
    width: min(620px, 100%);
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/*
   Tighter paragraph gaps than a subpage .panel, which uses a full 1em.

   The larger type has to be paid for somewhere. Panel height drives cover
   width here, and at 1em gaps this copy at 1.25rem pushes the cover past its
   half-of-the-row cap on anything under a very wide window. Eight gaps at
   0.7em give back about 55px of panel height, which is roughly 35px of cover
   width, and the paragraphs are short enough that they still read as separate.
*/
.home__about p { margin-bottom: 0.7em; }
@media (min-width: 1620px) {
    .home__about {
        /* The grid column sets both the width and the height now, so the panel
           only has to stop imposing its own. */
        width: auto;
        max-width: none;
        min-width: 0;
    }
}

/*
   Buy buttons, inside the panel. Stacked, always, and full width.

   A row was the obvious layout and does not fit: the three labels come to
   roughly 654px including gaps, and the panel's inner width tops out near
   548px, so a row would wrap to two-and-one at every viewport. That reads as
   a mistake rather than as a layout.

   Stacked and centred, each button is only as wide as its own label, so the
   group reads as three buttons rather than as three bars.
*/
.home__buy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    /* Matches .panel .actions and .panel's own padding. */
    margin-top: clamp(1.6rem, 4vw, 2.9rem);
}
/* One button size across the whole landing page. The buy buttons and the
   secondary nav no longer need a size difference to be told apart: they are
   separated by the panel frame, and the accent outline already marks which of
   them is the call to action. */
.home .btn {
    /* tomvsreality.com's .subpage .btn, unchanged, so the two sites weight
       their buttons against their body copy identically. */
    font-size: clamp(0.95rem, 1.4vw, 1.35rem);
}
/*
   Secondary navigation. Demoted by position and by colour, not by size: it sits
   below the panel, and it is the plain white-outlined .btn against the buy
   buttons' accent outline.
*/
.home__more {
    margin-top: clamp(0.5rem, 2vh, 1.2rem);
    /*
       860, not the 700 it was. The four labels at the new 1.35rem button size
       come to about 776px including the gaps, so a 700px cap forced a wrap the
       moment the buttons grew. flex-wrap stays on deliberately: this must still
       break onto two lines on a phone, it just must not do it on a desktop.
    */
    width: min(860px, 100%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}
/* Screen-reader-only heading. The cover art carries the title visually, but a
   page whose only h1 is inside a JPEG has no machine-readable title at all. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}