/* cfs.eco only: Ruth's logo and tree-key, the contact form and the private brand page.
   The shared system is tokens.css and components.css (ops/site-system/, issue #421). */

.logo, .mark { filter: var(--logo-filter); }
.home .mark { height: 40px; width: auto; }

/* The home hero carries the full logo; the rings stay out from behind it on phones. */
.hero .logo { width: min(400px, 62vw); height: auto; margin-bottom: var(--s-6); }
.hero .logo + div { padding-top: var(--s-3); }
@media (min-width: 900px) { .hero .logo { margin-bottom: 0; } }
/* The credential line under the h1, in the eyebrow caps (design review finding 3). */
.hero .cred { margin: 0; }

/* Photo tiles, image above, the h3 as the caption (design review finding 2). */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.tiles h3 { margin: var(--s-3) 0 0; }
.tile-img { aspect-ratio: 4 / 3; overflow: hidden; border: var(--hair); border-radius: var(--radius); background: var(--paper-2); }
.tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Until Ruth's photos arrive, each tile shows the tree-key centred on the alternate band. */
.tile-img.key { position: relative; }
.tile-img.key img { position: absolute; inset: 0; margin: auto; width: auto; height: 62%; filter: var(--logo-filter); opacity: .55; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, 1fr); } }

/* Contact: the form posts to the app's /contact/ (meristem#507). */
.contact { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .contact { grid-template-columns: 5fr 6fr; gap: var(--s-8); } }
section:has(> .contact) { padding-top: var(--s-7); }
.form p { margin: 0 0 var(--s-4); }
.form label { display: block; margin-bottom: var(--s-1); color: var(--ink-2); }
.form input, .form textarea { display: block; width: 100%; min-height: var(--target); padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ink-3); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; }
.form textarea { resize: vertical; }

footer .logo { width: 150px; height: auto; }

/* Brand page (private, noindex, linked from nowhere). */
.head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
@media (min-width: 900px) { .head { grid-template-columns: 5fr 6fr; gap: var(--s-8); align-items: end; } }
.head p { margin: 0; }
.head p + p, .head p + .actions { margin-top: var(--s-4); }
.swatches { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.swatches li { border: 1px solid var(--ink-3); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.swatches .chipc { height: 5.5rem; border-bottom: var(--hair); }
.swatches div.t { padding: var(--s-3); font-size: var(--fs-0); line-height: 1.45; }
.swatches b { display: block; color: var(--ink); font: 400 1rem/1.3 var(--display); }
.swatches code, .tok { font: .8rem/1.4 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-3); }
.specimen { border-top: var(--hair); padding: var(--s-5) 0; display: grid; gap: var(--s-2); }
@media (min-width: 900px) { .specimen { grid-template-columns: 14rem 1fr; gap: var(--s-6); align-items: baseline; } }
.lockups { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .lockups { grid-template-columns: repeat(3, 1fr); } }
.lockups figure { margin: 0; border: var(--hair); border-radius: var(--radius); }
.lockups .stage { display: grid; place-items: center; padding: var(--s-6); min-height: 15rem; }
.lockups figcaption { padding: var(--s-3) var(--s-4); border-top: var(--hair); font-size: var(--fs-0); color: var(--ink-3); }
.stage.on-ink { background: #161613; }
.stage.on-ink .logo, .stage.on-ink .mark { filter: invert(1) sepia(.12) brightness(.93); }
.stage.on-paper { background: #f8f6f1; }
.stage.on-paper .logo, .stage.on-paper .mark { filter: none; }
.clear { position: relative; outline: 1px dashed var(--cedar); outline-offset: 0; padding: 12%; }
.dont { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.dont li { padding-left: 1.6rem; position: relative; }
.dont li::before { content: "×"; position: absolute; left: .1rem; color: var(--cedar); font-family: var(--display); }
.scale { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; }
.scale .sq { background: var(--lichen); border: 1px solid var(--fir); }
.sq1 { width: 4px; height: 4px; } .sq2 { width: 8px; height: 8px; } .sq3 { width: 12px; height: 12px; }
.sq4 { width: 16px; height: 16px; } .sq5 { width: 24px; height: 24px; } .sq6 { width: 32px; height: 32px; }
.sq7 { width: 48px; height: 48px; } .sq8 { width: 72px; height: 72px; } .sq9 { width: 112px; height: 112px; }
.scale span { display: block; font-size: .75rem; color: var(--ink-3); margin-top: var(--s-1); text-align: center; }
.sw-paper { background: #f8f6f1; } .sw-paper2 { background: #efebe2; } .sw-ink { background: #161613; }
.sw-ink2 { background: #45453e; } .sw-ink3 { background: #6b6a61; } .sw-fir { background: #2c4a38; }
.sw-lichen { background: #e2e7d6; } .sw-cedar { background: #8a4429; }
.mark-lg { height: 11rem; width: auto; }
.brand-rules { margin: var(--s-7) 0 0; align-items: start; }
.brand-rules h3 { margin-bottom: var(--s-3); }
.clear-demo { display: inline-block; margin-top: var(--s-4); background: #f8f6f1; padding: var(--s-4); border: var(--hair); }
.clear-demo .logo { width: 180px; filter: none; }
.brand-note { margin-top: var(--s-5); }
.spec-display { font: 400 clamp(1.9rem, 5vw, 3.2rem)/1.1 var(--display); color: var(--ink); }
.spec-caps { margin: 0; font-size: 1rem; }
.motif-demo { position: relative; height: 22rem; overflow: hidden; border: var(--hair); border-radius: var(--radius); }
.rings-demo { width: 34rem; left: 50%; top: 50%; transform: translate(-50%, -50%); --rings-alpha: .5; }