/* The project is an open dossier within Archivo Pirata. */
.detail{background:#0a0d0b}
.detail::before{display:none}
.detail .header{margin:0 1.7%;padding:18px 0;border-bottom:1px dashed #85d7dc66}
.detail .case-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:5%;padding:65px 4% 55px;align-items:center}
.detail .case-heading{padding:0}
.detail .case-heading>.mono{font-size:12px;letter-spacing:.08em;margin-bottom:32px}
.detail .case-heading h1{font-family:var(--display);font-size:clamp(70px,9vw,150px);line-height:.98;color:#e4dcc8;letter-spacing:-.025em;margin-bottom:30px;text-transform:uppercase}
.detail .case-intro{display:block}
.detail .case-intro>p{font-family:var(--mono);font-size:clamp(16px,1.7vw,23px);line-height:1.6}
.detail .case-intro .text-link{margin-top:24px;color:var(--orange)}
.detail .case-art{margin:0;padding:50px 17px 42px;height:580px;min-height:0;max-height:65vw;background:#e4dcc8;transform:rotate(2deg);overflow:visible;clip-path:polygon(0 0,32% 0,35% 3%,98% 3%,100% 98%,76% 99%,56% 98%,27% 100%,0 98%)}
.detail .case-art::before{content:'02 / DEEP BREACH     +';position:absolute;top:17px;left:20px;right:20px;color:#1b1712;font:18px var(--mono);letter-spacing:.03em}
.detail .case-art>img{height:100%;object-fit:cover;object-position:center 58%;filter:grayscale(1) sepia(.28);border:1px solid #635e51}
.detail .case-art figcaption{background:none;color:#332c22;padding:10px 20px;font-size:9px}
.detail .case-story{padding:35px 4% 60px}
.detail .story-grid{margin-top:45px;gap:8%}
.detail .story-grid h2{font-size:clamp(48px,5.5vw,80px);color:var(--paper)}
.detail .story-grid p.lead{font-family:var(--mono);font-size:19px}
.detail .facts{border-bottom:1px solid var(--line)}
.detail .stages{margin:45px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.detail .stages summary{font-size:27px;gap:16px}
.detail .stages p{margin-left:0;font-size:14px}
.detail .case-secondary{margin:0 4%;padding:16px;background:#e4dcc8;transform:rotate(-.5deg)}
.detail .case-secondary figcaption{color:#332c22}
.detail .case-secondary img{filter:grayscale(1) sepia(.25)}
.detail .case-end{margin:60px 4% 0;padding:28px 0 65px;border-top:1px dashed #85d7dc88}
.detail .case-end>a{font-size:clamp(40px,6vw,80px)}
.detail .sketch{display:none}
@media(max-width:760px){.detail .case-hero{grid-template-columns:1fr;padding-top:35px;gap:40px}.detail .case-art{height:470px;max-height:none;margin:0 2%}.detail .case-heading h1{font-size:19vw}.detail .stages{grid-template-columns:1fr;gap:0}.detail .header nav{font-size:13px}.detail .case-art figcaption span{display:none}}
.detail .case-secondary img{height:560px;max-height:none;object-fit:contain;background:#101716;filter:none}
.detail .case-art,.detail .case-secondary{translate:var(--float-x,0px) var(--float-y,0px);transition:translate .35s ease}
html[data-reduced=true] .case-art,html[data-reduced=true] .case-secondary{translate:none!important}
@media(prefers-reduced-motion:reduce){.detail .case-art,.detail .case-secondary{translate:none!important}}
@media(max-width:760px){.detail .case-secondary img{height:auto;max-height:600px}}
/* The paper follows the portrait's intrinsic aspect ratio. */
.detail .case-secondary{width:min(347px,92%);margin-left:auto;margin-right:auto;padding:16px}
.detail .case-secondary img{display:block;width:100%;height:auto;max-height:none;object-fit:initial;background:transparent}
.detail .case-secondary figcaption{line-height:1.6;overflow-wrap:anywhere}
/* Connect the visual evidence to the three parts of the experience. */
.detail .case-evidence{display:grid;grid-template-columns:minmax(220px,.72fr) 1.28fr;gap:8%;align-items:center;max-width:1100px;margin:55px auto 0}
.detail .case-evidence .case-secondary{width:min(100%,347px);margin:0;justify-self:center;padding:12px}
.detail .case-evidence .stages{display:block;margin:0;padding:0}
.detail .case-evidence .stages details{padding:22px 0}
.detail .case-evidence .stages p{max-width:540px;margin:16px 0 0 42px}
.detail .case-end{margin-top:25px}
@media(max-width:760px){.detail .case-evidence{grid-template-columns:1fr;gap:28px;margin-top:30px}.detail .case-evidence .case-secondary{width:min(70%,280px)}.detail .case-evidence .stages p{margin-left:0}}
/* Shared editorial grid: consistent edges and spacing throughout the dossier. */
.detail .case-hero,.detail .case-story{width:min(1120px,92%);margin-inline:auto;padding-inline:0}
.detail .case-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;padding-top:48px;padding-bottom:64px}
.detail .case-story{padding-top:0;padding-bottom:48px}
.detail .story-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;margin:32px 0 40px;align-items:start}
.detail .story-grid h2{font-size:clamp(38px,3.6vw,54px);line-height:1.12;letter-spacing:-.02em}
.detail .story-grid p.lead{font-size:17px;line-height:1.65;margin-bottom:16px}
.detail .story-grid p{font-size:15px;line-height:1.7;margin-top:0}
.detail .facts{margin-top:24px;font-size:12px}
.detail .case-evidence{width:100%;max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start;margin:0}
.detail .case-evidence .case-secondary{justify-self:start;width:min(100%,300px);margin:0;transform:none;padding:10px}
.detail .case-evidence .case-secondary figcaption{font-size:9px;line-height:1.5;margin-top:10px}
.detail .case-evidence .stages{width:100%;margin:0}
.detail .case-evidence .stages details{padding:20px 0}
.detail .case-evidence .stages summary{font-size:25px;gap:16px}
.detail .case-evidence .stages p{font-size:14px;line-height:1.7;margin:12px 0 0 36px}
.detail .case-end{width:min(1120px,92%);margin:0 auto;padding:24px 0 48px}
.detail .case-end>a{font-size:clamp(36px,4vw,58px)}
@media(max-width:760px){.detail .case-hero,.detail .story-grid,.detail .case-evidence{grid-template-columns:1fr;gap:28px}.detail .case-hero{padding-top:32px;padding-bottom:40px}.detail .story-grid{margin-bottom:28px}.detail .case-evidence .case-secondary{width:min(75%,280px);justify-self:start}.detail .case-evidence .stages p{margin-left:36px}.detail .case-story{padding-bottom:32px}}
/* Align the complete reading block with the lower edge of the paper. */
.detail .story-grid{display:block;margin-bottom:36px}
.detail .case-evidence{align-items:end}
.detail .evidence-copy{font-size:15px;line-height:1.7}
.detail .evidence-copy .lead{font:17px/1.65 var(--mono);margin:0 0 16px}
.detail .evidence-copy p{color:#bcb9ab}
.detail .evidence-copy .facts{margin:20px 0 24px}
.detail .case-evidence .stages details{padding:16px 0}
.detail .case-evidence .stages details:last-child{padding-bottom:0}
.detail .case-evidence .stages p{margin-top:10px;margin-bottom:0}
@media(max-width:760px){.detail .case-evidence{align-items:start}.detail .evidence-copy .lead{font-size:16px}}


/* ── Sistema de títulos del archivo: Anton + desgaste de tinta ───────── */
.detail .case-heading h1,
.detail .story-grid h2,
.detail .case-end > a,
.detail .stages summary{font-family:ArchiveAnton,var(--display);font-weight:400;text-transform:uppercase}
/* La textura va SOLO sobre el <span class="t">: el punto naranja queda plano. */
.detail .case-heading h1 .t,
.detail .story-grid h2 .t{display:inline-block;background-image:url('assets/ink-wear-plate.jpg');background-repeat:repeat;-webkit-background-clip:text;background-clip:text;color:transparent}
.detail .case-heading h1 .t{background-size:350px auto;background-position:-150px -100px}
.detail .story-grid h2 .t{background-size:220px auto;background-position:-70px -70px}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .detail .case-heading h1 .t,.detail .story-grid h2 .t{background-image:none;color:var(--paper)}
}
/* ── Pestaña del papel, por página ───────────────────────────────────── */
.detail .case-art::before{content:attr(data-tab)}
/* ── Lámina de capturas dentro del papel (páginas de producto) ───────── */
.detail .case-art:has(.screens){padding:52px 20px 54px}
.detail .case-art > .screens{display:flex;gap:16px;height:100%;align-items:stretch;justify-content:center;overflow:hidden}
.detail .case-art figure.shot{margin:0;display:flex;flex-direction:column;gap:9px;min-width:0;min-height:0;flex:1 1 0;max-width:46%;height:100%}
.detail .case-art figure.shot .frame{flex:1 1 0;min-height:0;width:100%;border:1px solid #2a3138;background-color:#0f1a20;background-repeat:no-repeat;background-position:top center;background-size:contain}
.detail .case-art figure.shot span{font:8.5px/1.4 var(--mono);letter-spacing:.07em;color:#5a5546;flex:none}
/* ── Placa de marca del producto ─────────────────────────────────────── */
.detail .mark-plate{width:min(100%,300px);justify-self:start;border:1px solid var(--line);background:#0e1216;padding:26px 22px 18px}
.detail .mark-lockup{display:flex;align-items:center;justify-content:center;padding:14px 0 20px}
.detail .mark-lockup img{height:44px;width:auto;display:block}
.detail .mark-plate .rulez{border-top:1px dashed #85d7dc44;padding-top:12px;font:9px/1.6 var(--mono);letter-spacing:.06em;color:var(--cyan);display:flex;justify-content:space-between;gap:12px}
.detail .tokens{margin-top:16px;border-top:1px dashed #85d7dc22;padding-top:14px}
.detail .tokens .row{display:flex;align-items:center;gap:10px;font:9px/1.6 var(--mono);letter-spacing:.05em;color:#8f9aa0;padding:5px 0}
.detail .tokens .sw{width:16px;height:16px;flex:none;border:1px solid #2b3339}
.detail .tokens .row b{color:#cfd6da;font-weight:400;margin-left:auto}
/* ── Isologo junto al CTA ────────────────────────────────────────────── */
.detail .case-intro .text-link{display:inline-flex;align-items:center;gap:12px}
.detail .cta-iso{height:26px;width:auto;display:block}
@media(max-width:760px){
  .detail .case-art:has(.screens){height:470px;padding:44px 14px 46px}
  .detail .mark-plate{width:min(75%,300px)}
}