/* ============================================================================
artifact.css — shared component layer for Future Artifact pages
----------------------------------------------------------------------------
Every artifact page links, in this order:
(global system + tokens)
(this file)
Tokens (--paper, --ink, --ink-2, --ink-3, --mono, --sans, --pad …) are
defined in tectonic.css and MUST load first.
This file is the SINGLE SOURCE OF TRUTH for the artifact specimen hero.
Change the specimen image frame + metadata box on EVERY artifact page by
editing the two knobs below. Do not re-declare these rules inline in a page.
============================================================================ */
:root{
/* ---- THE KNOBS ---------------------------------------------------------
--specimen-measure Width of the specimen module. The image is centered
inside this frame and the metadata box is a fixed
fraction of it, so the box is the SAME width on every
page no matter the photo's aspect ratio.
--specimen-max-h Tallest the specimen image may render.
--specimen-box Box width as a fraction of the measure (kept inset). */
--specimen-measure: clamp(340px, 58vw, 780px);
--specimen-max-h: clamp(380px, 64vh, 700px);
--specimen-box: 75%;
--serif: 'Newsreader', Georgia, 'Times New Roman', serif;
}
@keyframes csRise{ to{ opacity:1; transform:translateY(0); } }
/* -- Specimen hero ---------------------------------------------------------- */
.artifact-hero{
position:relative; width:100%; background:var(--paper);
display:flex; flex-direction:column; align-items:center;
padding:clamp(1.5rem,3.5vh,2.6rem) var(--pad) clamp(1.7rem,4vh,3rem);
}
/* Fixed-width frame => image + box share one measure on every page. */
.artifact-hero-stack{
width:var(--specimen-measure); max-width:100%; margin:0 auto;
}
/* Height + width both auto so the photo is never distorted; it simply scales
to fit inside (measure × max-h), centered. Any aspect ratio lands centered
in the same frame. */
.artifact-hero-img{
display:block; margin:0 auto;
width:auto; height:auto;
max-width:100%; max-height:var(--specimen-max-h);
}
/* -- Metadata / specimen label --------------------------------------------- */
/* width is a fraction of the FIXED measure => identical box width everywhere. */
.artifact-label{
width:var(--specimen-box); box-sizing:border-box;
margin:clamp(1.1rem,2.6vh,1.9rem) auto 0;
display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:0;
background:#FCFCFD; border:1px solid rgba(26,24,32,0.16); border-radius:4px;
padding:clamp(1.25rem,1.9vw,1.7rem) clamp(1.5rem,2.4vw,2.1rem);
opacity:0; animation:csRise .9s cubic-bezier(.2,.7,.2,1) .2s forwards;
}
.al-left{
border-right:1px solid rgba(26,24,32,0.12);
padding-right:clamp(1.4rem,3vw,2.6rem);
}
.al-right{ padding-left:clamp(1.4rem,3vw,2.6rem); }
.al-cat{
display:block; font-family:var(--mono); font-size:.68rem; font-weight:500;
letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.al-name{
font-family:var(--sans); font-weight:400; font-size:clamp(1.1rem,1.5vw,1.35rem);
line-height:1.16; letter-spacing:-.01em; color:var(--ink); margin:.55rem 0 0;
}
.al-k{
display:block; font-family:var(--mono); font-size:.66rem; font-weight:500;
letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.al-v{
font-family:var(--sans); font-weight:400; font-size:clamp(1rem,1.25vw,1.15rem);
line-height:1.4; color:var(--ink); margin:.55rem 0 0;
}
/* -- Mobile ----------------------------------------------------------------- */
@media (max-width:860px){
.artifact-hero{ padding-top:1.2rem; }
.artifact-hero-stack{ width:100%; }
.artifact-hero-img{ width:100%; height:auto; max-height:none; }
.artifact-label{ width:100%; grid-template-columns:1fr; gap:1rem; padding:1.3rem 1.4rem; }
.al-left{
border-right:0; padding-right:0;
border-bottom:1px solid rgba(26,24,32,0.12); padding-bottom:1rem;
}
.al-right{ padding-left:0; }
}
@media (max-width:520px){
.al-name,.al-v{ text-wrap:balance; }
}
/* ============================================================================
"More artifacts" cards — editorial specimen style, ported verbatim from the
whats-emerging.html artifacts section so every artifact page's footer grid matches.
Requires the Newsreader font to be loaded in the page .
============================================================================ */
.aw-grid{ display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(1.1rem,2.4vw,2rem); align-items:stretch; }
.aw-card{ position:relative; display:flex; flex-direction:column; width:100%;
background:#fff; border:1px solid rgba(46,40,34,.18); padding:clamp(1rem,1.4vw,1.3rem);
transition:border-color .35s ease; }
.aw-card:hover{ border-color:rgba(46,40,34,.34); }
.aw-fig{ display:flex; flex-direction:column; background:var(--paper); padding:clamp(1.1rem,2vw,1.7rem); }
.aw-shot{ display:block; overflow:hidden; text-decoration:none; cursor:pointer; }
.aw-shot-img{ display:block; width:100%; height:auto;
margin-top:-7.5%; margin-bottom:-7.5%;
transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.aw-shot:hover .aw-shot-img{ transform:scale(1.03); }
.aw-meta{ display:flex; flex-direction:column; flex:1 1 auto; padding-top:clamp(1.1rem,1.6vw,1.45rem); }
.aw-code{ font-family:var(--mono); font-size:.6rem; font-weight:500; letter-spacing:.18em;
text-transform:uppercase; color:rgba(46,40,34,.6); margin:0; }
.aw-title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.32rem,1.7vw,1.7rem);
line-height:1.14; letter-spacing:-.005em; color:var(--ink); margin:.4rem 0 0; text-wrap:balance; }
.aw-year{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(.95rem,1.05vw,1.1rem);
color:var(--blue); margin:.32rem 0 0; }
.aw-class{ font-family:var(--mono); font-size:.64rem; font-weight:400; letter-spacing:.06em;
color:rgba(46,40,34,.66); margin:.6rem 0 0; }
.aw-links{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:auto; padding-top:clamp(1.3rem,2vw,1.75rem); }
.aw-link{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
font-family:var(--mono); font-size:.6rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
color:var(--ink); border-bottom:1px solid rgba(46,40,34,.34); padding-bottom:4px;
transition:color .25s ease, border-color .25s ease; }
.aw-link .arr{ transition:transform .25s ease; }
.aw-link:hover{ color:var(--blue); border-color:var(--blue); }
.aw-link:hover .arr{ transform:translate(2px,-2px); }
.aw-link--muted{ color:rgba(46,40,34,.62); border-color:rgba(46,40,34,.22); }
@media (max-width:900px){ .aw-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .aw-grid{ grid-template-columns:1fr; } }
/* ============================================================================
"More artifacts" footer band — white section + signals-style section header
(smaller heading, no rule line). Pairs with the .aw-* cards above.
============================================================================ */
.artifact-more{ position:relative; z-index:7; background:var(--paper); color:var(--ink);
border-top:1px solid rgba(26,24,32,.12); border-bottom:1px solid rgba(26,24,32,.12);
padding:clamp(3.4rem,6vw,5.2rem) 0; }
.artifact-more .more-head h2{ font-family:var(--sans); font-weight:300;
font-size:clamp(1.5rem,2.3vw,1.95rem); letter-spacing:-.015em; line-height:1.1;
color:var(--ink); margin:0 0 clamp(1.6rem,2.6vw,2.2rem); }
/* ============================================================================
Image captions — sit under each figure in the .art-figures stack.
Shared across all artifact pages; legible on paper and in the deep-blue zone.
============================================================================ */
.fig-cap{ margin-top:.7rem; font-family:var(--mono); font-size:.68rem;
letter-spacing:.06em; text-transform:uppercase; line-height:1.6;
color:var(--ink-2); } /* dark grey — reads on paper */
.fig-cap .fn{ color:inherit; }
.fig-2up .ph-fig{ margin:0; }
.fig-2up .fig-cap{ margin-top:.6rem; }
body.is-deep .fig-cap{ color:var(--on-blue); } /* near-white — reads on the deep-blue zone */
/* keep a token (e.g. "N-of-1") from breaking across lines */
.nowrap{ white-space:nowrap; }