/* Tache Studio: brand-specific styles. Loaded after the shared css/styles.css.
   The logo is the #tache-studio-mark symbol in each page, a single-colour mark drawn in the page's ink colour (currentColor),
   so it is dark on light and light on dark. Sizes are set per logo below. */

/* Logo sizes: <html data-logo="1"> or data-logo="2" picks the set below. */

/* Header */
.brand .wordmark { width: auto; }
[data-logo="1"] .brand .wordmark { height: 44px; }   /* logo 1: "tache." wordmark, about 3.1:1 */
@media (max-width: 1020px) { [data-logo="1"] .brand .wordmark { height: 38px; } }
@media (max-width: 480px)  { [data-logo="1"] .brand .wordmark { height: 34px; } }
@media (max-width: 374px)  { [data-logo="1"] .brand .wordmark { height: 32px; } }
[data-logo="2"] .brand .wordmark { height: 58px; }   /* logo 2: hand-lettered "Tache Studio", about 2.1:1, tall enough for "STUDIO" to read */
@media (max-width: 1020px) { [data-logo="2"] .brand .wordmark { height: 50px; } }
@media (max-width: 480px)  { [data-logo="2"] .brand .wordmark { height: 46px; } }
@media (max-width: 374px)  { [data-logo="2"] .brand .wordmark { height: 42px; } }

/* Footer: a large logo, centred, capped so it does not fill the whole screen (about 295 px tall for logo 1, 270 px for logo 2) */
.footer__markbtn { margin-inline: auto; }
[data-logo="1"] .footer__markbtn { width: min(100%, 880px); }
[data-logo="2"] .footer__markbtn { width: min(100%, 560px); }
.footer__mark { width: 100%; height: auto; }

/* Selected work: each story's context as short labelled lines. The labels match the stories' small mono line. */
.case { display: grid; gap: 10px; margin: 2px 0 0; }
.case dt { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.case dd { margin: 2px 0 0; color: var(--ink-2); max-width: 44ch; }

/* Footer: the link to the shop stays small and secondary to the enquiry route */
.footer__shop a { color: inherit; text-underline-offset: 2px; }

/* Footer: the Tache family, contact links and the company details (after the tache.co.uk footer) */
.footer__meta { margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px; }
.footer__family { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.footer__family-title { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.footer__family-logos { display: flex; gap: 10px; }
.footer__family-logos a { display: grid; place-items: center; width: 56px; height: 56px; padding: 6px; border: 1px solid var(--rule); border-radius: 12px; background: #FFFFFF; }   /* white tiles, so the black logos read in dark mode too */
.footer__family-logos a:hover { border-color: var(--ink-2); }
.footer__family-logos img { display: block; width: 100%; height: 100%; object-fit: contain; }
.footer__family .footer__shop { font-size: var(--t-xs); color: var(--ink-2); }
.footer__social { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__social a { font-size: var(--t-sm); font-weight: 500; text-decoration: none; }
.footer__social a:hover { text-decoration: underline; text-underline-offset: 2px; }
.footer__legal a { color: inherit; text-underline-offset: 2px; }
.footer__legal-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
@media (max-width: 640px) { .footer__meta { align-items: flex-start; } }

/* Enquiry form: a short line pointing to the privacy policy */
.form__privacy { margin-top: 12px; font-size: var(--t-xs); color: var(--ink-2); }
.form__privacy a { color: inherit; text-underline-offset: 2px; }

/* Privacy policy page: one readable column in the site's type */
.policy-page .site-header { position: static; }
.policy { max-width: 760px; }
.policy h1 { margin-top: 14px; font-size: var(--t-2xl); }
.policy__updated { margin-top: 10px; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--ink-2); }
.policy__intro { margin-top: 22px; font-family: var(--f-display); font-size: var(--t-lg); line-height: 1.45; }
.policy h2 { margin-top: clamp(32px, 4vw, 44px); font-size: var(--t-xl); }
.policy p, .policy ul { margin-top: 12px; color: var(--ink-2); line-height: 1.6; }
.policy ul { padding-left: 1.2em; list-style: disc; }
.policy li + li { margin-top: 8px; }
.policy strong { color: var(--ink); font-weight: 600; }
.policy a { color: var(--ink); text-underline-offset: 2px; }

/* Track record: the strip of hands holding up cards runs edge to edge along the bottom of the striped section, below the white panel,
   so the wrists disappear into the section's bottom edge. The section loses its bottom padding so the hands sit flush. */
.proof:has(.proof__hands) { padding-bottom: 0; }
.proof__hands { margin: clamp(28px, 4vw, 56px) auto 0; max-width: 2363px; overflow: hidden; line-height: 0; }
.proof__hands img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {   /* phones: about five cards across; the strip is centred and the outer cards run off the sides */
  .proof__hands img { width: 190%; max-width: none; margin-left: -45%; }
}