/* Ferndrop's media kit: the identity itself is the specimen. */
.media-page { --kit-gutter: clamp(22px, 5vw, 56px); }
.media-page .top, .media-page .foot, .media-page main { max-width: 1120px; padding-inline: var(--kit-gutter); }
.media-page .top { padding-block: 28px; }
.media-page .top nav a[aria-current] { color: var(--ink); }
.kit-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-block: 64px 56px; }
.kit-eyebrow { margin: 0 0 18px; color: var(--muted); font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; }
.kit-intro h1 { font-size: clamp(3.75rem, 9vw, 6rem); letter-spacing: -.055em; line-height: 1; margin: 0 0 24px; }
.kit-lede { color: var(--muted); font-size: clamp(1.15rem, 2.5vw, 1.45rem); line-height: 1.5; margin: 0; }
.kit-bundle { padding-bottom: 3px; flex-shrink: 0; }
.kit-bundle .btn { display: flex; gap: 24px; background: var(--ink); color: var(--bg); border-color: var(--ink); }
.kit-bundle p { margin: 12px 0 0; color: var(--muted); font-size: .75rem; }
/* Dividers span the outer page container; the content keeps its gutter. See AGENTS.md. */
.kit-section { border-top: 1px solid var(--line); margin-inline: calc(-1 * var(--kit-gutter)); padding-inline: var(--kit-gutter); padding-block: 36px 48px; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 28px; }
.section-heading h2, .about-section h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.035em; }
.section-heading p { margin: 0; color: var(--muted); font-size: .875rem; }
.logo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.asset-set { min-width: 0; }
.logo-specimen { height: 226px; display: grid; place-items: center; border: 1px solid #e6e6e4; border-radius: 20px; padding: clamp(22px, 4vw, 42px); }
.logo-specimen img { width: 100%; height: auto; max-width: 350px; }
.specimen-black { background: #ffffff; }
.specimen-white { background: #0a0a0a; border-color: #262626; }
.asset-info { padding: 20px 2px 0; }
.asset-info h3 { margin: 0 0 2px; font-size: .95rem; font-weight: 600; }
.asset-info p { margin: 0 0 16px; color: var(--muted); font-size: .75rem; }
.asset-downloads { display: grid; gap: 8px; }
.asset-downloads > div { display: flex; gap: 18px; align-items: center; font-size: .8rem; }
.asset-downloads span:not(.sr) { margin-right: auto; color: var(--muted); }
.asset-downloads a { color: var(--ink); }
.section-note { margin: 24px 0 0; color: var(--muted); font-size: .8rem; max-width: 70ch; }
.palette { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.swatch { aspect-ratio: 1.4; border-radius: 12px; border: 1px solid #e6e6e4; }
.swatch-ink { background: #0a0a0a; border-color: #262626; }.swatch-paper { background: #ffffff; }.swatch-cyanotype { background: #0f3a6b; border-color: #0f3a6b; }.swatch-fern { background: #2e9e5b; border-color: #2e9e5b; }.swatch-fog { background: #f6f6f5; }.swatch-gray { background: #666666; border-color: #666666; }
.color-swatch h3 { font-size: .85rem; font-weight: 600; margin: 12px 0 0; }.color-swatch p { color: var(--muted); font-size: .65rem; margin: 2px 0 8px; }
.color-swatch button { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 4px; padding: 5px 0; border: 0; background: none; color: var(--ink); font: .7rem/1.5 ui-monospace, monospace; cursor: pointer; }
.color-swatch button svg { width: 15px; height: 15px; stroke: var(--muted); stroke-width: 1.3; }
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }.type-display { font-size: clamp(2.8rem, 6vw, 4.3rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; margin: 0 0 30px; }.type-alphabet { font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.5; margin: 0 0 16px; }
.type-notes h3 { margin: 0 0 12px; font-size: 1.05rem; font-weight: 600; }.type-notes > p { font-size: .9rem; color: var(--muted); margin: 0 0 20px; }.type-notes > p.small { font-size: .75rem; margin-top: 20px; }
.font-code { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--bg-2); margin-block: 20px; }.font-code code { font: .75rem/1.75 ui-monospace, monospace; overflow-wrap: anywhere; }
.type-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }.type-actions > a { font-size: .8rem; color: var(--ink); }
.usage-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }.clearspace-figure { text-align: center; background: var(--bg-2); border-radius: 20px; padding: 28px; }.clearspace-box { display: inline-grid; place-items: center; padding: 24px; border: 1px dashed var(--muted); margin: 4px 0 10px; }.clearspace-box img { display: block; }.clearspace-figure p { color: var(--muted); font-size: .75rem; margin: 8px 0 0; }.usage-notes ul { padding-left: 18px; font-size: .85rem; margin: 0 0 18px; }.usage-notes li + li { margin-top: 10px; }.usage-notes > a { color: var(--ink); font-size: .8rem; }
.about-section { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; }.about-section .kit-eyebrow { margin-bottom: 12px; }.about-section #brand-description { font-size: .95rem; line-height: 1.7; margin: 18px 0 24px; }.media-contact { align-self: center; }.media-contact > a { display: block; font-size: 1.05rem; color: var(--ink); overflow-wrap: anywhere; }.media-contact p { margin: 12px 0 0; max-width: 28ch; }.kit-fine { font-size: .7rem; color: var(--muted); margin: 0 0 32px; max-width: 76ch; }
.media-page .foot { border-top: 1px solid var(--line); padding-block: 28px; }.media-page .foot .brand { font-size: 1rem; }
.copy-status { position: fixed; inset: auto 20px 24px; margin-inline: auto; width: fit-content; max-width: calc(100vw - 40px); padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .85rem; box-shadow: var(--shadow); z-index: 10; }.copy-status:empty { display: none; }
@media(prefers-color-scheme: dark) { :root:not([data-theme="light"]) .clearspace-box img { filter: invert(1); } }
@media(max-width: 760px) { .kit-intro { align-items: flex-start; flex-direction: column; padding-block: 42px 40px; gap: 28px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }.palette { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 16px; }.type-grid,.usage-grid { gap: 28px; }.about-section { grid-template-columns: 1fr; gap: 32px; }.logo-specimen { height: 185px; padding: 22px; } }
@media(max-width: 520px) { .media-page .top nav { gap: 16px; font-size: .8rem; }.logo-grid,.type-grid,.usage-grid { grid-template-columns: 1fr; gap: 28px; }.logo-specimen { height: 210px; padding: 32px; }.kit-bundle .btn { font-size: .9rem; gap: 16px; }.kit-section { padding-block: 28px 36px; }.type-specimen { padding-bottom: 12px; }.media-page .foot nav { margin-left: 0; } }