/* getinked.ie — guias de estilo. Indice tipo blog8, ficha tipo blogpost1.
   Hereda la identidad del sitio: Big Shoulders para titulares, Hanken para
   lectura, naranja como unico acento. Las variables van con :root:root
   porque shared.css se inyecta despues y pisaria las de :root. */
:root:root{
  --black:#0D0D0D; --dark:#1A1A1A; --mid:#2A2A2A;
  --cream:#FAF5E8; --warm:#BDB8AE; --grey:#96907F;
  --orange:#E85420; --orange-h:#FF6A33;
  --line:rgba(250,245,232,.13); --line-soft:rgba(250,245,232,.07);
  --p-line:rgba(250,245,232,.055);
  --font-display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Arial,sans-serif;
  --font-body:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",monospace;
  --r-sm:8px; --r-md:14px; --r-pill:999px;
  --gutter:clamp(1.25rem,4vw,3.5rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
body{background:var(--black);color:var(--cream);font-family:var(--font-body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
svg{display:block}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gutter);width:100%}
h1,h2,h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  line-height:.98;letter-spacing:-.01em}
em{font-style:normal;color:var(--orange)}
.eyebrow,.kicker{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--grey);font-weight:500}
.h-lg{font-size:clamp(1.9rem,4.5vw,3.1rem)}
.lede{color:var(--warm);font-size:clamp(1.0625rem,.98rem + .35vw,1.2rem);line-height:1.62}

.crumb{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);padding-block:.625rem;
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.crumb a:hover{color:var(--orange)}
.crumb .sep{opacity:.45}

.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:0 1.5rem;
  border-radius:var(--r-sm);font-family:var(--font-display);font-weight:700;
  font-size:1rem;letter-spacing:.02em;text-transform:uppercase;border:1px solid transparent;
  transition:transform .2s ease,background .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:#0D0D0D}
.btn-primary:hover{background:var(--orange-h)}
.btn-outline{border-color:var(--line);color:var(--cream)}
.btn-outline:hover{border-color:var(--cream);background:rgba(250,245,232,.05)}
.cta-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem}

/* marcador de imagen: rejilla + halo naranja, distinto por estilo.
   No finge una foto, se lee como hueco reservado. */
.ph{display:block;position:relative;overflow:hidden;background:var(--mid);
  border-radius:var(--r-sm)}
.ph::before{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(90deg,var(--p-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--p-line) 1px,transparent 1px);
  background-size:22px 22px}
.ph::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 25%,rgba(232,84,32,.34),transparent 62%)}
.ph[data-style="traditional"]::after{background:radial-gradient(circle at 70% 30%,rgba(232,84,32,.4),transparent 60%)}
.ph[data-style="blackwork"]::after{background:radial-gradient(circle at 50% 60%,rgba(250,245,232,.14),transparent 58%)}
.ph[data-style="realism"]::after{background:radial-gradient(circle at 25% 70%,rgba(232,84,32,.28),transparent 64%)}
.ph[data-style="japanese"]::after{background:radial-gradient(circle at 65% 65%,rgba(232,84,32,.36),transparent 58%)}
.ph[data-style="watercolour"]::after{background:radial-gradient(circle at 35% 40%,rgba(232,84,32,.3),transparent 50%),radial-gradient(circle at 70% 70%,rgba(250,245,232,.1),transparent 52%)}
.ph[data-style="abstract"]::after{background:conic-gradient(from 210deg at 45% 55%,rgba(232,84,32,.35),transparent 45%,rgba(250,245,232,.08) 70%,transparent)}
.ph[data-style="neo-traditional"]::after{background:radial-gradient(circle at 55% 35%,rgba(232,84,32,.34),transparent 62%)}

/* ══════════ INDICE · blog8 ══════════ */
.lede-head{padding-block:clamp(2rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem);
  border-bottom:1px solid var(--line-soft)}
.lede-head h1{font-size:clamp(2.8rem,9vw,6.5rem);margin-bottom:1.25rem}
.lede-head .lede{max-width:60ch}
.head-meta{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:2rem;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey)}
.head-meta b{color:var(--orange);font-weight:500}

.grid-wrap{padding-block:clamp(2rem,4vw,3.25rem) clamp(3rem,6vw,5rem)}
.post-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,2.5vw,2rem)}
@media(min-width:700px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.post-grid{grid-template-columns:repeat(3,1fr)}}

.post{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;background:var(--dark);
  transition:border-color .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.post:hover{border-color:rgba(232,84,32,.5);transform:translateY(-4px)}
.post .thumb{display:block}
.post .ph,.post .cov{height:190px;border-radius:0;width:100%;display:block}
/* aqui si se recorta: las miniaturas tienen que casar entre si */
.post .cov{object-fit:cover;filter:grayscale(.2);transition:filter .4s ease,transform .6s ease}
.post:hover .cov{filter:none;transform:scale(1.04)}
.post .thumb{display:block;overflow:hidden}
.post .body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.post h2{font-size:1.7rem;margin-block:.55rem .6rem;transition:color .3s ease}
.post:hover h2{color:var(--orange)}
.post .hook{color:var(--cream);font-size:.9375rem;line-height:1.55}
.post .excerpt{color:var(--grey);font-size:.9375rem;line-height:1.6;margin-top:.7rem}
.post .more{margin-top:auto;padding-top:1.2rem;display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange)}
.post .more svg{width:15px;height:15px;transition:transform .3s ease}
.post:hover .more svg{transform:translateX(4px)}

/* el primero manda: ocupa toda la fila y crece */
@media(min-width:1060px){
  .post.feat{grid-column:1 / -1;flex-direction:row;align-items:stretch}
  .post.feat .thumb{flex:0 0 52%}
  .post.feat .ph,.post.feat .cov{height:100%;min-height:330px}
  .post.feat .body{justify-content:center;padding:clamp(2rem,3vw,3rem)}
  .post.feat h2{font-size:clamp(2.4rem,3.6vw,3.4rem)}
  .post.feat .hook{font-size:1.15rem;max-width:44ch}
  .post.feat .excerpt{max-width:52ch}
  .post.feat .more{margin-top:1.6rem;padding-top:0}
}

.closer{padding-block:clamp(3rem,6vw,5rem);border-top:1px solid var(--line-soft);
  background:linear-gradient(to bottom,transparent,rgba(232,84,32,.05))}
.closer .h-lg{margin-block:.6rem 1rem;max-width:22ch}
.closer .lede{max-width:56ch}

/* ══════════ FICHA · blogpost1 ══════════ */
.post-head{padding-block:clamp(1.5rem,4vw,3rem) clamp(1.5rem,3vw,2.25rem)}
.post-head h1{font-size:clamp(2.6rem,8vw,5.5rem);margin-block:.6rem 1rem;max-width:16ch}
.post-head .hook{color:var(--warm);font-size:clamp(1.1rem,1rem + .5vw,1.4rem);
  line-height:1.5;max-width:46ch}
.post-head .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.75rem;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey)}
.post-head .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--grey)}

/* La banda comparte rejilla con el cuerpo: portada y texto empiezan y acaban
   en la misma vertical. Igualar el texto al ancho de una foto a sangre lo
   dejaria en 137 caracteres por linea, el doble de lo que se lee comodo. */
/* Portada y texto comparten el ancho completo del contenedor. El indice ya
   no ocupa columna, asi que no queda franja muerta a la izquierda. */
.hero-band{padding-inline:var(--gutter);max-width:1280px;margin:0 auto
  clamp(1.5rem,3vw,2.5rem)}
.hero-band .ph.big{height:clamp(220px,34vw,420px);border-radius:var(--r-md)}
.cover{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--mid)}
.cover img{width:100%;height:clamp(220px,30vw,380px);object-fit:cover;display:block}
.cover figcaption{position:absolute;right:0;bottom:0;padding:.45rem .7rem;
  font-family:var(--font-mono);font-size:.5rem;letter-spacing:.05em;
  color:rgba(250,245,232,.8);background:linear-gradient(to left,rgba(13,13,13,.85),transparent)}
.cover figcaption a{color:var(--cream);text-decoration:underline;text-underline-offset:2px}

.post-body{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:clamp(3rem,6vw,5rem)}
@media(min-width:960px){.post-body{grid-template-columns:250px 1fr;align-items:start}}

.rail{display:flex;flex-direction:column;gap:2rem}
@media(min-width:960px){.rail{position:sticky;top:calc(var(--gi-nav-h,89px) + 1.5rem)}}
.toc{border-left:2px solid var(--line);padding-left:1.1rem}
.rail-h{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin-bottom:.9rem}
.toc a{display:block;padding-block:.4rem;font-size:.9375rem;color:var(--warm);
  transition:color .25s ease}
.toc a:hover{color:var(--orange)}
.rail-h{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin-bottom:.9rem}
.facts{border:1px solid var(--line);border-radius:var(--r-md);padding:1.25rem}
.facts .f{display:flex;justify-content:space-between;gap:1rem;padding-block:.55rem;
  border-bottom:1px solid var(--line-soft);font-size:.875rem}
.facts .f:last-child{border-bottom:0}
.facts dt{color:var(--grey)}
.facts dd{color:var(--cream);font-weight:600;text-align:right}

/* Sin tope de 68ch: llena su columna, que es lo que evitaba que se viera
   estrecho al lado de la portada. */
.prose{max-width:none;line-height:1.68}
.prose .stand{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);line-height:1.55;
  color:var(--cream);padding-bottom:1.75rem;margin-bottom:2rem;
  border-bottom:1px solid var(--line)}
.prose h2{font-size:clamp(1.6rem,3vw,2.15rem);margin-block:2.5rem 1rem;
  scroll-margin-top:calc(var(--gi-nav-h,89px) + 1rem)}
.prose h2::before{content:"";display:block;width:44px;height:3px;background:var(--orange);
  margin-bottom:1rem}
.prose p{color:var(--warm);margin-bottom:1.1rem}
.prose p+p{margin-top:0}

.gallery{margin-top:3rem}
.gal-grid .shot{position:relative;margin:0;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line);background:var(--mid)}
.gal-grid .shot img{width:100%;height:auto;display:block;
  filter:grayscale(.15);transition:filter .4s ease,transform .5s ease}
.gal-grid .shot:hover img{filter:none;transform:scale(1.04)}
.gal-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:.5rem .6rem .45rem;
  font-family:var(--font-mono);font-size:.5rem;letter-spacing:.05em;line-height:1.4;
  color:rgba(250,245,232,.82);
  background:linear-gradient(to top,rgba(13,13,13,.88),transparent);
  opacity:0;transition:opacity .3s ease}
.gal-grid .shot:hover figcaption,.gal-grid .shot:focus-within figcaption{opacity:1}
.gal-grid figcaption a{color:var(--cream);text-decoration:underline;text-underline-offset:2px}
.gal-note{color:var(--grey);font-size:.9375rem;margin-bottom:1.25rem}
/* Columnas en vez de rejilla: cada foto conserva su proporcion y se ve
   entera. Con rejilla cuadrada las verticales perdian medio tatuaje. */
.gal-grid{column-count:2;column-gap:.85rem}
@media(min-width:760px){.gal-grid{column-count:3}}
@media(min-width:1100px){.gal-grid{column-count:4}}
.gal-grid > *{break-inside:avoid;margin-bottom:.85rem;display:block}
.gal-grid .ph.gal{aspect-ratio:1;border-radius:var(--r-sm);opacity:.5;
  break-inside:avoid;margin-bottom:.85rem}
.gal-claim{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.3rem;min-height:190px;border:1px dashed rgba(232,84,32,.55);border-radius:var(--r-sm);
  background:linear-gradient(180deg,rgba(232,84,32,.1),transparent 65%);
  text-align:center;padding:.75rem;transition:background .25s ease,border-color .25s ease}
.gal-claim:hover{border-color:var(--orange);background:rgba(232,84,32,.16)}
.gal-claim b{font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  text-transform:uppercase;line-height:1.05}
.gal-claim i{font-style:normal;font-family:var(--font-mono);font-size:.5625rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--grey)}

.find{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.find p{color:var(--warm);margin-top:.75rem}

.related{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line-soft);
  background:linear-gradient(to bottom,rgba(232,84,32,.05),transparent)}
.related .h-lg{margin-block:.6rem 1.75rem}
.rel-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:700px){.rel-grid{grid-template-columns:repeat(3,1fr)}}
.rel{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;background:var(--dark);
  transition:border-color .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.rel:hover{border-color:rgba(232,84,32,.5);transform:translateY(-3px)}
.rel .ph{height:120px;border-radius:0}
.rel b{font-family:var(--font-display);font-weight:800;font-size:1.3rem;
  text-transform:uppercase;line-height:1.05;padding:1rem 1.15rem .3rem;
  transition:color .3s ease}
.rel:hover b{color:var(--orange)}
.rel i{font-style:normal;color:var(--grey);font-size:.875rem;line-height:1.5;
  padding:0 1.15rem 1.15rem}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .post,.rel,.btn,.post .more svg{transition:none}
}