/* =========================================================
   INNER PAGES — archive, case study, about, 404.
   ========================================================= */

/* ---------------------------------------------------------
   PAGE HEADER (shared by work.html, about.html, cases)
   --------------------------------------------------------- */
.page-head {
  padding-top: calc(var(--header-h) + clamp(3rem, 9vw, 9rem));
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}
.page-head__title {
  font-size: var(--t-h1);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  font-variation-settings: "wght" 500, "wdth" 96;
}
.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--stack);
  margin-top: clamp(1.5rem, 3vw, 3rem);
}
.page-head__meta p { max-width: 44ch; color: var(--fg-dim); }

/* Case studies carry a sentence as a title, so they get one size down */
.crumbs + .page-head__title { font-size: var(--t-h2); }

/* Breadcrumb */
.crumbs { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1.6rem; }
.crumbs a:hover { color: var(--accent); }

/* ---------------------------------------------------------
   The old filter bar and archive card grid used to live here.
   The work page now carries its own bar and its own two views,
   both in work.css, so this file no longer styles the archive.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   CASE STUDY
   --------------------------------------------------------- */
.case-hero__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-raised);
}
.case-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Portadas que no son apaisadas —mockups editoriales, newsletters, infografías—.
   Recortarlas a 16/9 dejaría una franja sin sentido: el héroe adopta la proporción
   de la propia imagen (`--hero-ratio`, en línea en el HTML) y la enseña entera. El
   tope de altura impide que una portada muy vertical se coma la pantalla. */
.case-hero__media--tall {
  aspect-ratio: var(--hero-ratio, 3 / 2);
  max-height: 80svh;
}
.case-hero__media--tall img { object-fit: contain; }

.case-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  padding-block: clamp(2.5rem, 5vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.case-meta h4 {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 400;
  margin-bottom: 0.7rem;
}
.case-meta p { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); }

.case-body {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: clamp(2rem, 6vw, 8rem);
  align-items: start;
  padding-block: clamp(3rem, 7vw, 7rem);
}
.case-body h2 {
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.6rem);
  position: sticky;
  top: calc(var(--header-h) + 3vh);
}
.case-body__text p { color: var(--fg-dim); font-size: clamp(1rem, 0.94rem + 0.4vw, 1.25rem); }
.case-body__text p + p { margin-top: 1.2em; }
.case-body__text strong { color: var(--fg); font-variation-settings: "wght" 500; }

.case-figs { display: grid; gap: clamp(1rem, 2.5vw, 2.5rem); }
.case-figs figure { border-radius: var(--radius); overflow: hidden; background: var(--bg-raised); }
.case-figs .pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2.5rem); }
.case-figs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.case-figs figcaption {
  padding: 0.9rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  padding-block: clamp(2.5rem, 5vw, 5rem);
  border-top: 1px solid var(--line);
}
.results .num {
  font-size: clamp(2.4rem, 1rem + 5vw, 5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
}
.results .num sup { font-size: 0.32em; color: var(--accent); translate: 0 -0.2em; }
.results p { color: var(--fg-dim); margin-top: 0.7rem; }

/* Next project — full-bleed hover strip */
.next {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 7vw, 8rem);
  text-align: center;
  position: relative;
  overflow: clip;
}
.next a { display: block; }
.next__label { margin-bottom: 1.2rem; }
.next__title {
  font-size: var(--t-h2);
  text-transform: uppercase;
  letter-spacing: -0.045em;
  transition: color var(--dur-s) linear;
}
.next a:hover .next__title { color: var(--accent); }
.next__img {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: clamp(200px, 22vw, 340px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0;
  scale: 0.8;
  transition: opacity var(--dur-m) var(--ease), scale var(--dur-m) var(--ease);
  pointer-events: none;
}
.next a:hover .next__img { opacity: 0.55; scale: 1; }
.next__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------
   ABOUT
   --------------------------------------------------------- */
.about__lead {
  font-size: clamp(1.35rem, 0.9rem + 2vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  max-width: 24ch;
}
.about__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
/* Cut-out portrait: see the note on .intro__portrait in home.css */
.about__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  /* Two washes: one behind the head, one at the base. Without the
     second, the black cardigan dissolves into the dark panel. */
  background:
    linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--accent) 13%, transparent) 100%),
    radial-gradient(120% 90% at 50% 8%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    var(--bg-raised);
}
.about__photo img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }

.timeline { border-top: 1px solid var(--line); }
.timeline li {
  display: grid;
  grid-template-columns: clamp(80px, 10vw, 140px) 1fr auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.1rem, 2.2vw, 1.9rem);
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur-m) var(--ease), color var(--dur-s) linear;
}
.timeline li:hover { padding-left: clamp(6px, 1vw, 20px); }
.timeline h3 { font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.6rem); letter-spacing: -0.02em; }
.timeline span { color: var(--fg-dim); }

/* Skills columns */
.skills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
.skills h4 {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 400;
  margin-bottom: 1.1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.skills li { padding-block: 0.35rem; }

/* ---------------------------------------------------------
   404
   --------------------------------------------------------- */
.oops {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: var(--header-h);
}
.oops__code {
  font-size: var(--t-giant);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--fg);
}
.oops p { margin-block: 1.5rem 2.5rem; color: var(--fg-dim); }

/* ---------------------------------------------------------
   OPEN-IT CALL TO ACTION — above the fold of the study.
   The live demo at the bottom of the page is the proof; this
   is the invitation, and it has to come before the reading,
   not after it. Whoever lands on a design system page wants
   to open the design system, and asking them to scroll past
   four chapters of prose to find the door is a good way to
   lose them at chapter one.
   It is a panel and not a loose button so the button does
   not float in the whitespace between the metadata strip and
   the first heading: the rule on the left ties it to the
   discipline accent and gives the eye something to stop on.
   --------------------------------------------------------- */
.open-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  border-left: 2px solid var(--c, var(--accent));
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.open-cta__label {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c, var(--accent));
}
.open-cta__title {
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.85rem);
  line-height: var(--lh-snug, 1.1);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
.open-cta__note { margin: 0.7rem 0 0; color: var(--fg-dim); max-width: 56ch; }
.open-cta__note .link { color: inherit; }

.open-cta__go { display: grid; justify-items: start; gap: 0.7rem; }
.open-cta__go .btn { white-space: nowrap; }
.open-cta__alt {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0;
}

/* Under 860 the two columns stop fitting side by side and the
   button ends up squeezed against the text; stack instead. */
@media (max-width: 860px) {
  .open-cta { grid-template-columns: 1fr; }
  .open-cta__go { justify-items: stretch; }
  .open-cta__go .btn { justify-content: center; }
}

/* ---------------------------------------------------------
   LIVE DEMO — the built site running inside the case study.
   It is a plain <iframe> pointing at a copy of the real site
   under assets/demos/: no library, no lightbox, nothing to
   load. The bar on top is chrome, not a control: the only
   real control is the button underneath, because an iframe
   is a bad place to use a site and a good place to prove one
   exists. The stage keeps its own ratio so the page does not
   jump while the demo boots.
   --------------------------------------------------------- */
.demo { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* .proj-body is a two-column grid (sticky heading | text). The demo is
   not a third column: it belongs under both, at full width. */
.proj-body > .demo { grid-column: 1 / -1; }

.demo__shell {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
}

.demo__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.demo__dots { display: flex; gap: 0.35rem; flex: 0 0 auto; }
.demo__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.demo__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.demo__stage { position: relative; aspect-ratio: 16 / 10; background: #0a0a0b; }
.demo__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.demo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.demo__foot p { color: var(--fg-dim); margin: 0; max-width: 52ch; }

/* On a phone the embedded site is being shown a viewport barely
   wider than the phone itself, so give it a taller stage and let
   the demo render its own mobile layout instead of a squeezed one. */
@media (max-width: 700px) {
  .demo__stage { aspect-ratio: 3 / 4; }
}

/* A placeholder demo needs to say so before it is watched, not after:
   the reel and the stills in the embedded site are stand-ins, and a
   visitor who assumes otherwise is being misled by our own case study. */
.demo__disc {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-warm);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-raised);
  color: var(--fg-dim);
}
.demo__disc b {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  font-weight: 400;
}
.demo__disc p { margin: 0; max-width: 70ch; }


/* ---------------------------------------------------------
   DEMO WITH A SIZE CONTROL — for the one demo that is a whole
   site and is shown only inside its frame.

   The other demos put the real control underneath: a button
   that opens the site in a tab, because a frame is a bad place
   to use anything. This one has no tab to offer, so the frame
   has to earn its keep — and the way it does that is by handing
   the site a different viewport and letting it answer.

   Nothing here is scaled with transform. The stage narrows and
   grows taller and the site inside lays itself out for a phone,
   which is the only honest way to show a responsive build: a
   zoomed-out desktop layout would prove nothing.
   --------------------------------------------------------- */

.demo--device .demo__bar { gap: 0.75rem 1.2rem; flex-wrap: wrap; }
.demo--device .demo__url { flex: 1 1 12ch; }

.demo__devices { display: flex; gap: 0.3rem; flex: 0 0 auto; }
.demo__devices button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--fg-dim);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--dur-xs) var(--ease), border-color var(--dur-xs) var(--ease), background var(--dur-xs) var(--ease);
}
.demo__devices button svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.demo__devices button:hover { color: var(--fg); border-color: var(--fg-dim); }
.demo__devices button[aria-pressed="true"] {
  color: var(--bg);
  background: var(--c, var(--accent));
  border-color: var(--c, var(--accent));
}

.demo--device .demo__stage {
  display: grid;
  place-items: center;
  padding: 0;
  transition: aspect-ratio var(--dur-s) var(--ease);
}
.demo--device[data-mode="mobile"] .demo__stage { aspect-ratio: 4 / 3; padding: clamp(1rem, 3vw, 2.2rem) 0; }

.demo__viewport { position: relative; width: 100%; height: 100%; }
.demo__viewport iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* The phone is drawn, not simulated: a dark bezel and a radius,
   so the narrow layout reads as a choice and not as a broken frame. */
.demo--device[data-mode="mobile"] .demo__viewport {
  width: 390px;
  max-width: min(86%, 390px);
  height: 100%;
  max-height: 844px;
  border: 9px solid #16161a;
  border-radius: 30px;
  overflow: hidden;
  background: #16161a;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.45);
}

/* Under 700 the frame is already about as wide as a phone, so the
   site inside is being handed its narrow layout anyway. The toggle
   would only offer a phone inside a phone: hide it. */
@media (max-width: 700px) {
  .demo__devices { display: none; }
  .demo--device[data-mode="mobile"] .demo__stage { aspect-ratio: 3 / 4; padding: 0; }
  .demo--device[data-mode="mobile"] .demo__viewport {
    width: 100%; max-width: 100%; max-height: none;
    border: 0; border-radius: 0; box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo--device .demo__stage { transition: none; }
}


/* ---------------------------------------------------------
   KIN — one client, one job, three disciplines.
   Kacho Cano is audited, designed, branded and built, and each
   of those lives in the archive under the discipline it belongs
   to. Splitting them is right; leaving them unaware of each
   other is not. This used to be a strip in the body, which meant
   paying for it with vertical space on every one of the three
   pages. As a floating control it costs nothing until asked for.
   Built on <details>, so it opens and closes with no JavaScript;
   main.js only adds closing on Esc and on an outside click.
   --------------------------------------------------------- */
.kin {
  position: fixed;
  top: 50%;
  right: clamp(0.6rem, 1.6vw, 1.4rem);
  transform: translateY(-50%);
  z-index: 700;   /* over the page, under the menu (780) and header (800) */
}

/* The closed control: a vertical tab, the shape a side handle has.
   Three bars in the three discipline colours — the same signal the
   archive uses — over a standing label. It is deliberately a little
   taller than it needs to be: at 44 square it read as one more icon
   and got ignored, and this thing only works if it is asked about. */
.kin__btn {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.7rem;
  width: 42px;
  padding: 0.95rem 0;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: color-mix(in srgb, var(--bg-raised) 85%, transparent);
  backdrop-filter: blur(8px);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--dur-m, 0.3s) var(--ease, ease),
              transform var(--dur-m, 0.3s) var(--ease, ease);
}
.kin__btn::-webkit-details-marker { display: none; }
.kin__btn:hover { border-color: color-mix(in srgb, var(--fg) 34%, transparent); transform: scale(1.04); }
.kin__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.kin__bars { display: grid; gap: 3px; }
.kin__bars i {
  display: block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--c, var(--accent));
  transition: width var(--dur-m, 0.3s) var(--ease, ease);
}
.kin[open] .kin__bars i:nth-child(1) { width: 11px; }
.kin[open] .kin__bars i:nth-child(3) { width: 11px; }

/* Not every shared project runs across all three disciplines: the
   portfolio itself is only two, product and front-end. With two bars
   the pinch has to move to the second one, or the control opens
   lopsided. */
.kin--pair[open] .kin__bars i:nth-child(2) { width: 11px; }

/* The label stands on its side: it is what turns a decorative dot
   stack into a question the reader can answer by clicking. */
.kin__label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}
.kin__btn:hover .kin__label { color: var(--fg); }

/* The panel opens leftwards, off the control. */
.kin__panel {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  width: 272px;
  padding: clamp(0.9rem, 1.6vw, 1.1rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-raised) 96%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.45);
}
.kin__lead {
  margin: 0 0 0.85rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  line-height: 1.5;
}

.kin__list { display: grid; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.kin__item > * {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.65rem;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}
.kin__item a:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
.kin__item a:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }

.kin__disc {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.kin__disc::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c, var(--accent));
  flex: 0 0 auto;
}
.kin__t { font-size: 0.97rem; line-height: 1.3; }

/* Where you already are: not a link, and it says so. */
.kin__item--here > * { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.kin__item--here .kin__t { color: var(--fg-dim); }

/* Narrow screens: there is no room to the left, so it drops
   above the control and stays inside the viewport. */
@media (max-width: 620px) {
  .kin__panel {
    top: auto;
    bottom: calc(100% + 10px);
    right: 0;
    transform: none;
    width: min(272px, calc(100vw - 2rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .kin__btn, .kin__bars i { transition: none; }
  .kin__btn:hover { transform: none; }
}