/* Pagina de marcas. Mismos tokens que index.html */
:root{
  --bg:#e8e1cf;
  --ink:#4b4a3d;
  --muted:#676552;
  --rust:#74855a;
  --rust-deep:#5f7047;
  --line:rgba(75,74,61,.17);
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:2px}
::selection{background:var(--rust);color:#fff}

.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* barra superior, igual que en /writing/ */
.topbar{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:10}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;
              gap:20px;padding-top:16px;padding-bottom:16px}
.brand-mark{font-family:var(--serif);font-size:17px;text-decoration:none;letter-spacing:-.01em}
.topbar nav{display:flex;gap:clamp(10px,2vw,22px);flex-wrap:wrap}
.topbar nav a{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
              text-decoration:none;opacity:.85;padding-bottom:3px;border-bottom:1px solid transparent}
.topbar nav a:hover{opacity:1;border-bottom-color:var(--rust)}

/* cabecera */
.hero{padding:clamp(48px,8vw,92px) 0 clamp(28px,4vw,44px)}
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
         color:var(--muted);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--rust);display:inline-block}
h1{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;
   font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1.06;margin:1.1rem 0 1.2rem}
.standfirst{color:var(--muted);font-size:19px;line-height:1.6;max-width:38em}

/* indice de marcas */
.jump{display:flex;flex-wrap:wrap;gap:7px 9px;margin-top:26px;
      border-top:1px solid var(--line);padding-top:22px}
.jump a{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
        text-decoration:none;color:var(--muted);border:1px solid var(--line);
        padding:5px 10px;border-radius:2px;transition:.16s ease}
.jump a:hover{color:var(--rust-deep);border-color:var(--rust);background:rgba(116,133,90,.08)}

/* bloque de marca */
.brand{padding:clamp(26px,4vw,42px) 0;border-top:1px solid var(--line);scroll-margin-top:74px}
.bhead{display:flex;align-items:center;justify-content:space-between;gap:18px;
       flex-wrap:wrap;margin-bottom:14px;min-height:34px}
.blink{display:inline-block;text-decoration:none;opacity:.9;transition:opacity .18s ease}
.blink:hover{opacity:1}
.blogo{display:block}
.bname{font-family:var(--serif);font-size:23px;letter-spacing:-.01em}
.bmeta{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.grid a{display:block;position:relative;overflow:hidden;background:#dcd4c0;border-radius:2px}
.grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transition:transform .5s ease}
.grid a:hover img{transform:scale(1.035)}

.tail{font-family:var(--sans);font-size:15px;color:var(--muted);max-width:40em;
      border-top:1px solid var(--line);padding-top:26px;margin-top:clamp(20px,3vw,34px)}
.tail a{color:var(--rust-deep)}

footer{border-top:1px solid var(--line);margin-top:clamp(48px,7vw,80px);
       padding:26px 0 60px;font-family:var(--sans);font-size:12px;letter-spacing:.06em;
       color:var(--muted);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media(max-width:900px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .grid a:nth-child(n+4) img{aspect-ratio:4/3}
}
@media(max-width:560px){
  body{font-size:16px}
  .standfirst{font-size:17px}
  .grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .grid img,.grid a:nth-child(n+4) img{aspect-ratio:3/4}
  .topbar nav{gap:12px}
}