/* ============================================================
   FRANKITO Trading Co. — coming soon
   Palette is closed: Hueso, Tinta, Cuero, Barro. Nothing else.
   Tinta is the navy from the logo art (#0E1824), not the #1C1814
   printed on the mood board strip.

   Design law — two temperatures. The cover is landscape with
   silence: one ink on paper, a small centred stack, one large
   plate, and a lot of quiet around both. The mark is the only
   thing allowed to raise its voice. Never both at once.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{
  font-family:"Puesto";
  src:url("../fonts/puesto-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-400-latin.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-400-latin-ext.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Space Mono";
  src:url("../fonts/space-mono-400-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Mono";
  src:url("../fonts/space-mono-700-latin.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --hueso:#F0EBE3;
  --tinta:#0E1824;   /* navy, per the logo art */
  --cuero:#A97D50;
  --barro:#A6402A;

  --ink-70:rgba(14,24,36,.72);
  --ink-55:rgba(14,24,36,.68);
  --rule:#A97D50;   /* Cuero — rules only, never type */

  --display:"Puesto",ui-sans-serif,system-ui,sans-serif;
  --body:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(1.25rem,6vw,4.5rem);
  --hair:1.5px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,p,ul,figure,figcaption{margin:0}
ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}

html{scroll-behavior:smooth}
body{
  background:var(--hueso);
  color:var(--tinta);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .3vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- utilities ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--tinta);color:var(--hueso);
  padding:.7rem 1.1rem;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:.5rem;top:.5rem}

:where(a,button,input):focus-visible{
  outline:2px solid var(--barro);
  outline-offset:3px;
}


/* ============================================================
   LA PORTADA — the cover.
   One ink on paper. The stack stays small on purpose; the plate
   does the talking.
   ============================================================ */
.cover{
  padding:clamp(1.75rem,5vh,4rem) var(--gutter) clamp(1.5rem,4vh,3rem);
  max-width:calc(1400px + 2 * var(--gutter));
  margin-inline:auto;
}

.cover__stack{
  width:min(100%,21rem);
  margin-inline:auto;
  display:grid;
  gap:clamp(.5rem,1.6vw,.75rem);
  justify-items:center;
}
.cover__name,.cover__sub{display:block;width:100%}
.cover__name svg,.cover__sub svg{
  display:block;width:100%;height:auto;color:var(--tinta);
}
.cover__sub{width:72%}

.cover__roam{font-style:italic}
.cover__meta{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.35rem .6rem;
  margin-top:clamp(.4rem,1.4vw,.7rem);
  font-family:var(--mono);
  font-size:clamp(.6rem,1.8vw,.7rem);
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-70);
  text-align:center;
}





/* ---- the trail: a hairline with a tick riding down it ---- */
.rail{display:none}
@media (min-width:60rem) and (pointer:fine){
  .rail{
    display:block;position:fixed;z-index:30;
    right:clamp(1rem,2.2vw,2rem);top:22vh;height:56vh;width:9px;
  }
  .rail__line{
    position:absolute;left:4px;top:0;bottom:0;width:1px;background:var(--rule);
  }
  .rail__tick{
    position:absolute;left:0;top:0;width:9px;height:2px;
    background:var(--tinta);
    will-change:transform;
  }
}

/* ---- scroll cue: knife-cut chevron, the way the mane is cut ---- */
.cue{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin-top:clamp(1.25rem,3.5vh,2.25rem);
  text-decoration:none;color:var(--ink-55);
  transition:color .3s ease;
}
.cue:hover{color:var(--tinta)}
.cue__label{
  font-family:var(--mono);
  font-size:clamp(.58rem,1.6vw,.68rem);
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
}
.cue__chevron{width:clamp(1.05rem,2.6vw,1.35rem);height:auto;color:currentColor}

/* ============================================================
   SILENCE — carga signup
   ============================================================ */
.carga{
  padding:clamp(2rem,5.5vh,3.5rem) var(--gutter) clamp(3rem,9vh,5.5rem);
  text-align:center;
  scroll-margin-top:5.5rem;
}
/* --- the drop artwork: one per carga, capped at 1400px --- */
.drop{
  margin-top:clamp(1.75rem,5vh,3.5rem);
}
.drop__img{
  width:100%;max-width:1400px;height:auto;
  margin-inline:auto;
  border:var(--hair) solid var(--tinta);
}

/* --- the carga line, until the type is baked into the artwork --- */
.carga__title{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .7rem;
  font-family:var(--display);
  font-size:clamp(1.75rem,6.6vw,3.1rem);
  line-height:1;letter-spacing:.02em;text-transform:uppercase;
}
.carga__date{
  margin-top:clamp(1rem,2.8vw,1.4rem);
  padding-top:clamp(.8rem,2.2vw,1.1rem);
  border-top:var(--hair) solid var(--rule);
  width:min(100%,24rem);margin-inline:auto;
  font-family:var(--mono);
  font-size:clamp(.68rem,2.2vw,.8rem);
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-70);
}
.drop__note{
  margin-top:clamp(1rem,2.8vw,1.3rem);
  font-family:var(--mono);
  font-size:clamp(.64rem,1.9vw,.76rem);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-55);
}

/* the door into the world — quiet, but present */
.carga__journal{
  display:inline-grid;justify-items:center;gap:.35rem;
  margin-top:clamp(1.5rem,4vw,2.1rem);
  text-decoration:none;color:var(--tinta);
  font-family:var(--mono);
  font-size:clamp(.66rem,1.9vw,.76rem);
  letter-spacing:.17em;text-transform:uppercase;
  border-bottom:var(--hair) solid var(--tinta);
  padding-bottom:.45rem;
  transition:color .25s ease,border-color .25s ease;
}
.carga__journal:hover{color:var(--barro);border-bottom-color:var(--barro)}
.carga__journal-sub{
  font-size:clamp(.56rem,1.6vw,.64rem);
  letter-spacing:.14em;color:var(--ink-55);
}

.signup__lede{
  max-width:30rem;
  margin:clamp(3.25rem,9vw,5rem) auto 0;
  font-size:clamp(.95rem,2.2vw,1.05rem);
  line-height:1.55;
  color:var(--ink-70);
  text-wrap:pretty;
}
.signup{max-width:31rem;margin:clamp(1.4rem,3.5vw,2rem) auto 0}
.signup__row{display:flex;flex-direction:column;gap:.75rem}
@media (min-width:30rem){
  .signup__row{flex-direction:row;align-items:stretch;gap:.6rem}
}
.signup__input{
  flex:1;min-width:0;
  background:transparent;border:0;border-bottom:var(--hair) solid var(--tinta);
  border-radius:0;padding:.85rem .15rem;font-size:1rem;text-align:center;
  transition:border-color .25s ease;
}
@media (min-width:30rem){ .signup__input{text-align:left} }
.signup__input::placeholder{color:var(--ink-55)}
.signup__input:focus{outline:0;border-bottom-color:var(--barro)}
.signup__input:focus-visible{outline:0}

.signup__btn{
  border:0;border-radius:0;cursor:pointer;
  background:var(--tinta);color:var(--hueso);
  font-family:var(--display);
  font-size:clamp(.85rem,2.6vw,.95rem);
  letter-spacing:.16em;text-transform:uppercase;
  padding:.95rem 1.6rem;
  transition:background-color .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.signup__btn:hover{background:var(--barro)}
.signup__btn:active{transform:translateY(1px)}
.signup__btn[disabled]{opacity:.5;cursor:default}

.signup__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup__hp input{background:transparent;border:0;color:inherit}

.signup__msg{
  min-height:1.4em;margin-top:.9rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-70);
}
.signup__msg.is-bad{color:var(--barro)}



/* the socials do the hyping; the page just points at them */
.follow{
  margin-top:clamp(1.5rem,4vw,2rem);
  font-family:var(--mono);
  font-size:clamp(.62rem,1.8vw,.7rem);
  letter-spacing:.16em;text-transform:uppercase;
}
.follow a{
  color:var(--ink-70);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:.15rem;
  transition:color .25s ease,border-color .25s ease;
}
.follow a:hover{color:var(--tinta);border-bottom-color:var(--tinta)}

/* ============================================================
   CONTACTO — full-screen dialog, same clothes as the signup
   ============================================================ */
.contacto{
  width:100vw;max-width:none;
  height:100dvh;max-height:none;
  margin:0;padding:0;border:0;
  background:var(--hueso);color:var(--tinta);
  overflow-y:auto;
}
.contacto::backdrop{background:var(--hueso)}
.contacto__inner{
  position:relative;
  min-height:100dvh;
  display:grid;align-content:center;justify-items:center;
  padding:clamp(3.5rem,10vh,6rem) var(--gutter) clamp(2.5rem,8vh,4rem);
  text-align:center;
}
.contacto__close{
  position:absolute;top:clamp(1rem,4vw,2rem);right:var(--gutter);
  background:none;border:0;cursor:pointer;padding:.4rem 0;
  font-family:var(--mono);font-size:clamp(.62rem,1.8vw,.7rem);
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink-70);
  transition:color .25s ease;
}
.contacto__close:hover{color:var(--tinta)}

.contacto__eyebrow{
  font-family:var(--mono);font-size:clamp(.58rem,1.7vw,.66rem);
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-55);
}
.contacto__title{
  font-family:var(--display);
  font-size:clamp(2.4rem,9vw,4.5rem);
  line-height:1;letter-spacing:.02em;text-transform:uppercase;
  margin-top:.6rem;
}

.contacto__form{
  width:min(100%,46rem);
  margin-top:clamp(2.25rem,5.5vw,3.25rem);
  display:grid;gap:clamp(1.35rem,3vw,1.9rem);
}
.contacto__field{
  width:100%;
  background:transparent;border:0;border-bottom:var(--hair) solid var(--tinta);
  border-radius:0;padding:clamp(1rem,2.4vw,1.35rem) .2rem;
  font-family:var(--body);
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  text-align:center;
  transition:border-color .25s ease;
}
.contacto__field::placeholder{color:var(--ink-55)}
.contacto__field:focus{outline:0;border-bottom-color:var(--barro)}
.contacto__field:focus-visible{outline:0}
.contacto__field--area{resize:vertical;min-height:clamp(8rem,22vh,12rem);line-height:1.5}

.contacto__send{
  justify-self:center;
  margin-top:.5rem;
  border:0;border-radius:0;cursor:pointer;
  background:var(--tinta);color:var(--hueso);
  font-family:var(--display);
  font-size:clamp(.95rem,2.9vw,1.15rem);
  letter-spacing:.16em;text-transform:uppercase;
  padding:clamp(1.05rem,2.6vw,1.3rem) clamp(2.6rem,8vw,4rem);
  transition:background-color .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.contacto__send:hover{background:var(--barro)}
.contacto__send:active{transform:translateY(1px)}
.contacto__send[disabled]{opacity:.5;cursor:default}

.contacto__msg{
  min-height:1.4em;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-70);
}
.contacto__msg.is-bad{color:var(--barro)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:var(--hair) solid var(--rule)}
.footer__inner{
  display:grid;justify-items:center;gap:.7rem;
  padding:clamp(2rem,6vw,3rem) var(--gutter);
  text-align:center;
}
.footer__mark{width:auto;height:clamp(1.6rem,5.5vw,2.1rem);color:var(--tinta)}
.footer__meta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-55);
}
.footer__meta a{color:var(--ink-70);text-decoration:none;border-bottom:1px solid var(--rule)}
.footer__meta a:hover{color:var(--tinta)}


/* ============================================================
   EL MUNDO — a carga chapter. You step off the paper and into
   the world: Tinta ground, plates to the edges, entries added
   as the carga comes together.
   ============================================================ */
body.world{background:var(--tinta);color:var(--hueso)}
body.world .skip{background:var(--hueso);color:var(--tinta)}

.worldbar{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:clamp(1rem,3vw,1.6rem) var(--gutter);
}
.worldbar__home{text-decoration:none;color:inherit;display:block}
.worldbar__name{
  display:block;font-family:var(--display);
  font-size:clamp(1rem,3.4vw,1.25rem);
  line-height:.92;letter-spacing:.012em;text-transform:uppercase;
}
.worldbar__sub{
  display:block;font-family:var(--display);
  font-size:clamp(.44rem,1.4vw,.52rem);
  line-height:1;letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;margin-top:.34em;opacity:.75;
}
.worldbar__back{
  font-family:var(--mono);
  font-size:clamp(.6rem,1.8vw,.7rem);
  letter-spacing:.19em;text-transform:uppercase;text-decoration:none;
  color:inherit;opacity:.72;
  border-bottom:1px solid currentColor;padding-bottom:.2rem;
  transition:opacity .25s ease;
}
.worldbar__back:hover{opacity:1}
.worldbar--light{color:var(--tinta)}

/* --- the way in --- */
.gate{position:relative;margin-top:clamp(.5rem,2vw,1rem)}
.gate__img{width:100%;height:auto;display:block}
.gate__plate{
  position:absolute;left:var(--gutter);right:var(--gutter);
  bottom:clamp(1rem,4vw,2.5rem);
  text-align:center;color:var(--hueso);
  text-shadow:0 0 26px rgba(14,24,36,.55), 0 0 8px rgba(14,24,36,.45);
}
.gate__num{
  font-family:var(--mono);
  font-size:clamp(.6rem,1.8vw,.72rem);
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
}
.gate__name{
  font-family:var(--display);
  font-size:clamp(2rem,8vw,4.5rem);
  line-height:.95;letter-spacing:.02em;text-transform:uppercase;
  margin-top:.3rem;
}
.gate__date{
  font-family:var(--mono);
  font-size:clamp(.58rem,1.6vw,.68rem);
  letter-spacing:.2em;text-transform:uppercase;
  margin-top:.6rem;opacity:.85;
}

/* --- entries --- */
.entries{padding-bottom:clamp(3rem,9vh,6rem)}
.world__intro{
  max-width:38rem;margin:clamp(3rem,9vh,5.5rem) auto;
  padding-inline:var(--gutter);
  text-align:center;
  font-size:clamp(1.05rem,2.6vw,1.3rem);
  line-height:1.6;text-wrap:pretty;
  color:rgba(240,235,227,.82);
}
.entry{margin-top:clamp(2rem,6vh,3.5rem)}

/* --- chapter card: a hard cut to the number and the label, then the
       plates. The title-card beat, borrowed from the westerns. --- */
.card{
  min-height:100svh;
  display:grid;align-content:center;justify-items:center;
  gap:clamp(.6rem,2vw,1rem);
  padding:var(--gutter);
  text-align:center;
}
.card__no{
  font-family:var(--mono);
  font-size:clamp(.7rem,2.2vw,.9rem);
  letter-spacing:.42em;text-indent:.42em;
  color:var(--cuero);
  font-variant-numeric:tabular-nums;
}
.card__label{
  font-family:var(--display);
  font-size:clamp(2.5rem,12vw,7rem);
  line-height:.9;letter-spacing:.015em;text-transform:uppercase;
  color:var(--hueso);
}
.card__date{
  font-family:var(--mono);
  font-size:clamp(.6rem,1.8vw,.72rem);
  letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;
  color:rgba(240,235,227,.5);
  font-variant-numeric:tabular-nums;
}

.plate img{width:100%;height:auto;display:block}
.plate figcaption{
  padding:.7rem var(--gutter) 0;
  font-family:var(--mono);
  font-size:clamp(.55rem,1.5vw,.64rem);
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(240,235,227,.55);
  text-align:center;
}
.plate--full{margin:0}                        /* edge to edge */
.plate--pair{
  display:grid;gap:clamp(.4rem,1.5vw,.8rem);
  grid-template-columns:1fr;
}
@media (min-width:44rem){ .plate--pair{grid-template-columns:1fr 1fr} }
.plate--inset{
  width:min(100%,42rem);margin-inline:auto;padding-inline:var(--gutter);
}

/* --- the way out --- */
.world__end{
  padding:clamp(3.5rem,11vh,7rem) var(--gutter) clamp(3rem,9vh,5rem);
  text-align:center;
  border-top:var(--hair) solid rgba(240,235,227,.28);
}
.world__endnote{
  font-family:var(--mono);
  font-size:clamp(.64rem,1.9vw,.76rem);
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(240,235,227,.7);
}
.world__endlede{
  max-width:30rem;margin:clamp(1.25rem,3.5vw,1.75rem) auto 0;
  font-size:clamp(.95rem,2.2vw,1.05rem);
  line-height:1.55;color:rgba(240,235,227,.82);text-wrap:pretty;
}
.world__cta{
  display:inline-block;margin-top:clamp(1.5rem,4vw,2rem);
  background:var(--hueso);color:var(--tinta);text-decoration:none;
  font-family:var(--display);
  font-size:clamp(.9rem,2.7vw,1.05rem);
  letter-spacing:.16em;text-transform:uppercase;
  padding:1rem 2.6rem;
  transition:background-color .3s ease,color .3s ease;
}
.world__cta:hover{background:var(--barro);color:var(--hueso)}
.world__back{margin-top:clamp(2rem,5vw,2.75rem)}
.world__back a{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(240,235,227,.6);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:.2rem;
}
.world__back a:hover{color:var(--hueso)}

/* ============================================================
   LAS CARGAS — the archive. Chapters keep equal weight; this is
   not a feed and nothing sinks when the next carga lands.
   ============================================================ */
.archive{
  max-width:64rem;margin-inline:auto;
  padding:clamp(2rem,6vh,4rem) var(--gutter) clamp(3rem,9vh,5rem);
}
.archive__title{
  font-family:var(--display);
  font-size:clamp(2rem,8vw,3.75rem);
  line-height:1;letter-spacing:.02em;text-transform:uppercase;
  text-align:center;
}
.archive__lede{
  max-width:30rem;margin:clamp(1rem,3vw,1.5rem) auto 0;
  text-align:center;color:var(--ink-70);
  font-size:clamp(.95rem,2.2vw,1.05rem);text-wrap:pretty;
}
.archive__list{
  display:grid;gap:clamp(2.5rem,7vw,4rem);
  margin-top:clamp(2.5rem,7vw,4rem);
}
.carga-card a{text-decoration:none;color:inherit;display:block}
.carga-card__art{overflow:hidden;border:var(--hair) solid var(--tinta)}
.carga-card__art img{
  width:100%;height:auto;display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.carga-card a:hover .carga-card__art img{transform:scale(1.02)}
.carga-card__meta{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.5rem 1.1rem;margin-top:1rem;
}
.carga-card__no{
  font-family:var(--mono);font-size:clamp(.62rem,1.8vw,.72rem);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-70);
}
.carga-card__name{
  font-family:var(--display);
  font-size:clamp(1.3rem,4.4vw,2rem);
  letter-spacing:.02em;text-transform:uppercase;line-height:1;
}
.carga-card__date{
  font-family:var(--mono);font-size:clamp(.58rem,1.6vw,.66rem);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55);
}

/* ============================================================
   ANIMATION GATES — nothing may stay invisible
   ============================================================ */
.js:not(.anim-off) [data-fade]{opacity:0}
.js:not(.anim-off) [data-cue]{opacity:0}
.js:not(.anim-off) [data-card] .line>span{transform:translateY(105%)}
.js:not(.anim-off) [data-card] .card__no,
.js:not(.anim-off) [data-card] .card__date{opacity:0}
.js:not(.anim-off) [data-cover]{opacity:0}
.js:not(.anim-off) [data-drop] .drop__img{opacity:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}