/* ============================================================
   Landing v2: thesis first, proof second, catalog third.
   Loads after landing.css and only adds or overrides what the
   shorter page needs. Everything else is inherited.
   ============================================================ */

/* --- Hero --- */
/* The v1 headline is a three-line sentence, so it is sized to fit.
   This one is three words and has to carry the whole page. */
/* v1's hero owns a full viewport because it ends in a browser screenshot.
   This one ends in a wall of student work, and that wall is the argument, so
   the hero gives up its 100vh to let the first row of tiles show above the
   fold. */
.l-hero-v2 {
    min-height: auto;
    padding: 4.5rem 1.5rem 2rem;
}

.l-hero-v2 .l-hero-headline {
    font-size: clamp(2.25rem, 6vw, 4rem);
    margin-bottom: 1.25rem;
}

/* Says what the "dev" in the name means, so it does not read as a test site */
.l-hero-name {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--l-accent);
    margin: -0.5rem 0 1.25rem;
}

.l-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--l-accent);
    margin-bottom: 1.25rem;
}

.l-hero-lead {
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    line-height: 1.5;
    color: var(--l-text);
    max-width: 680px;
    margin-bottom: 1.25rem;
    font-weight: 500;
}

.l-hero-v2 .l-hero-sub { max-width: 680px; }

/* --- The student work wall --- */
.l-wall { padding: 2.25rem 0 4.5rem; }

.l-wall-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 1.75rem;
}

.l-wall-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--l-radius);
    overflow: hidden;
    background: var(--l-surface-2);
    border: 1px solid var(--l-border);
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s;
}

.l-wall-card:hover {
    transform: translateY(-4px);
    border-color: var(--l-border-hover);
}

.l-wall-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The caption sits on the image rather than under it: with 24 tiles of wildly
   different art, a text row under each one turns the wall into a table. */
.l-wall-meta {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.75rem 0.75rem 0.6rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.86));
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.l-wall-title {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l-wall-app {
    color: rgba(255, 255, 255, 0.62);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
}

.l-wall-more {
    margin-top: 2rem;
    text-align: center;
}

.l-wall-more a {
    color: var(--l-accent);
    text-decoration: none;
    font-weight: 500;
}


/* --- Credibility band --- */
.l-trustbar {
    border-top: 1px solid var(--l-border);
    border-bottom: 1px solid var(--l-border);
    background: var(--l-surface);
    padding: 1.5rem 0;
}

.l-trustbar p {
    margin: 0;
    text-align: center;
    color: var(--l-text-mid);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 760px;
    margin-inline: auto;
}

.l-trustbar strong { color: var(--l-text); }

/* --- Who makes this --- */
.l-trust { padding-top: 3rem; }
.l-trust-eyebrow {
    text-align: center;
    margin: 0 0 0.5rem;
    color: var(--l-text-dim);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.l-trust-story { max-width: 72ch; margin: 0 auto; }
.l-trust-story p { color: var(--l-text-mid); font-size: 1.05rem; line-height: 1.7; margin: 0 0 1rem; }
.l-trust-story strong { color: var(--l-text); }
.l-trust .l-edu-item a { color: var(--l-accent, inherit); }

/* --- Next-layer doors --- */
.l-nextlayer {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.l-nextlayer-note {
    text-align: center;
    color: var(--l-text-dim);
    font-size: 0.88rem;
    max-width: 620px;
    margin: 1.25rem auto 0;
    line-height: 1.6;
}

/* --- Educator strip --- */
.l-edu-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 2.5rem 0 2rem;
}

.l-edu-item {
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.l-edu-item strong { color: var(--l-text); font-size: 1rem; }
.l-edu-item span { color: var(--l-text-mid); font-size: 0.9rem; line-height: 1.55; }

@media (max-width: 640px) {
    .l-wall-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
}

/* --- The three stages --- */
/* An age on each card answers "is this a children's site" faster than prose
   does, so the cards carry almost none: a line, then the tools themselves.
   The tool lists sit on the card floor so the three rows line up even when
   one sentence wraps and another does not. */
.l-stages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 2.75rem 0 2.5rem;
}

.l-stage {
    display: flex;
    flex-direction: column;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-top: 3px solid var(--l-accent);
    border-radius: var(--l-radius);
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: left;
}

/* The accent deepens left to right. It is the only thing on the section that
   reads as a progression before any of the words do. */
.l-stage:nth-child(1) { border-top-color: rgba(43, 184, 230, 0.35); }
.l-stage:nth-child(2) { border-top-color: rgba(43, 184, 230, 0.65); }

.l-stage-age {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--l-accent);
    margin-bottom: 0.6rem;
}

.l-stage h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--l-text);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

/* Three lines reserved, so the dividers under each sentence line up across
   the row without pinning the tools to the card floor and leaving a hole
   in whichever card has the shortest sentence. */
.l-stage p {
    margin: 0 0 1.25rem;
    color: var(--l-text-mid);
    font-size: 0.95rem;
    line-height: 1.55;
    min-height: calc(0.95rem * 1.55 * 3);
}

.l-stage-tools {
    list-style: none;
    margin: 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--l-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.1rem;
}

/* Wrapping instead of a two-column grid: "Terrain Studio" and "MotionMaker"
   need more room than half a card, and a fixed column let them run into the
   next icon. */
.l-stage-tools li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--l-text);
    white-space: nowrap;
}

.l-stage-tools img {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    flex-shrink: 0;
    object-fit: contain;
}

@media (max-width: 860px) {
    .l-stages { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* --- Showcase page cards --- */
/* These replaced the plain try-links. The click goes to /tools/{slug}, the
   page that already converts search and ChatGPT arrivals, so the card has to
   carry enough to be worth the click: the picture, what kind of thing it is,
   and the first sentence of the page's own lede. */
.l-toolcards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin: 2.5rem 0 0;
    text-align: left;
}

.l-toolcard {
    display: flex;
    flex-direction: column;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s;
}

.l-toolcard:hover {
    transform: translateY(-4px);
    border-color: var(--l-border-hover);
}

.l-toolcard img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: var(--l-surface-2);
}

.l-toolcard-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem 1.1rem;
}

.l-toolcard-cat {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--l-accent);
}

.l-toolcard-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--l-text);
    line-height: 1.25;
}

/* A three-line ceiling for every card, whatever the page's lede does, so a
   row of cards reads as a row rather than a skyline. The PHP trims to fit
   inside this, so the clamp is a backstop and not the thing doing the cut. */
.l-toolcard-lede {
    color: var(--l-text-mid);
    font-size: 0.87rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.l-toolcard-cat { white-space: nowrap; }

@media (max-width: 1150px) {
    .l-toolcards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 880px) {
    .l-toolcards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .l-toolcards { grid-template-columns: 1fr; }
}

/* The subject-page line in the educator strip. */
.l-edu-subjects {
    text-align: center;
    color: var(--l-text-mid);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 auto 1.75rem;
    max-width: 640px;
}

.l-edu-subjects a,
.l-edu-subjects a:hover,
.l-edu-subjects a:focus,
.l-edu-subjects a:active,
.l-edu-subjects a:visited {
    color: var(--l-accent);
    text-decoration: none;
}

.l-edu-subjects a:hover { color: var(--l-text); }