.boxed-light {
    border: 1px dashed var(--border);
    padding: 15px;
}

.back {
    cursor: pointer
}

.back:hover {
    text-decoration: underline
}

/* boxed "back" and "Link" buttons (selectors outrank the `all: unset` link reset in nav.css), same look as the profile page's small dashed buttons */
a.back-btn:link, a.back-btn:visited,
a.link-btn:link, a.link-btn:visited {
    display: inline-block;
    padding: 4px 10px;
    border: 1px dashed var(--border);
    background-color: var(--box-fill);
    font-size: 10pt;
}

a.back-btn:link:hover,
a.link-btn:link:hover {
    border: 1px solid var(--accent);
    color: var(--accent);
}

a.back-btn:link:active,
a.link-btn:link:active {
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* concept / tools boxes under the project title */
.project-meta {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.meta-box {
    box-sizing: border-box;
    border: 1px solid var(--border);
    background-color: transparent;
    padding: 15px;
    font-size: 10pt;
}

/* fixed share of the row: the width these boxes had when a wider Summary box sat beside them */
.meta-domain,
.meta-tools {
    flex: 0 0 20.25%;
}

.meta-label-next {
    margin-top: 14px;
}

.meta-label {
    margin-bottom: 6px;
}

.meta-box p,
.meta-list {
    margin: 0;
}

.meta-list {
    padding: 0;
    list-style: none;
}

@media (max-width: 767px) {
    .project-meta {
        flex-direction: column;
    }
    .meta-domain,
    .meta-tools {
        flex-basis: auto;
    }
}

/* script-font project title (Tangerine, same as the profile nametag) */
.script-title {
    font-family: "Tangerine", cursive;
    font-size: clamp(34px, 4vw, 60px);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
}

/* intro blurb: a narrow, vertical column of text (wider on tablets, where 30vw would be too thin to read) */
@media (min-width: 768px) {
    .blurb {
        max-width: 60vw;
    }
}

@media (min-width: 961px) {
    .blurb {
        max-width: 30vw;
    }
}

/* "Design Prompt" callout boxes (MIT Gala page) */
.prompt-box {
    box-sizing: border-box;
    max-width: 60vw;
    padding: 15px;
    border: 1px solid var(--border);
    background-color: transparent;
}

@media (max-width: 767px) {
    .prompt-box {
        max-width: none;
    }
}

/* a longer passage of body text: wider than the 30vw intro blurb */
@media (min-width: 768px) {
    .blurb.wide {
        max-width: 70vw;
    }
}

@media (min-width: 961px) {
    .blurb.wide {
        max-width: 45vw;
    }
}

/* a black-and-white photo in the top-right corner of the page; it scrolls with the page (desktop only) */
.corner-zines {
    position: absolute;
    top: 3vw;
    right: 3vw;
    width: 14vw;
    margin: 0;
    z-index: 5;
    pointer-events: none;
}

.corner-zines img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(1);
    opacity: 0.7;
}

.corner-zines figcaption {
    margin-top: 6px;
    font-size: 9pt;
}

@media (max-width: 767px) {
    .corner-zines {
        display: none;
    }
}

/* phones: the small boxed buttons get bigger tap targets */
@media (max-width: 767px) {
    a.back-btn:link, a.back-btn:visited,
    a.link-btn:link, a.link-btn:visited {
        padding: 9px 14px;
    }
}

/* tablets: the Discipline / Mediums boxes keep a comfortable width */
@media (min-width: 768px) and (max-width: 960px) {
    .meta-domain,
    .meta-tools {
        flex: 0 1 260px;
    }
}