/*
 * Hilos — photo essay page styles.
 * Ported 1:1 from the published Claude artifact (source/artifact-original.html).
 *
 * Scoping: every rule is under the `.hilos` root (or the `.hilos-lightbox` dialog),
 * and every class is prefixed `hilos-`, so nothing here styles the surrounding portfolio.
 * Page-level rules (html/body) live only in index.html for the standalone page.
 *
 * Single dark theme by choice: the series lives against the altar's charcoal wall.
 */

.hilos {
  color-scheme: dark;
  --ground: #1d1b19;
  --ground-2: #26231f;
  --ink: #ede5d8;          /* chunky-knit cream */
  --ink-soft: #b3a999;
  --ink-faint: #7d7468;
  --rosary: #c0413a;       /* rosary red */
  --sage: #a4a888;         /* yarn + trousers */
  --rule: #3a3530;
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --body: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* was `body` in the artifact */
  display: block;
  box-sizing: border-box;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  text-align: left;
  padding-inline: clamp(16px, 4vw, 48px);
  /* the artifact host padded the page by the phone's safe-area insets */
  padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
  -webkit-font-smoothing: antialiased;
}
.hilos *, .hilos *::before, .hilos *::after { box-sizing: border-box; }

/* Defensive resets so host-portfolio element styles don't leak in */
.hilos figure, .hilos table, .hilos th, .hilos td { margin: 0; }
.hilos a { color: inherit; }

.hilos img { display: block; max-width: 100%; height: auto; }
.hilos h1, .hilos h2, .hilos h3 {
  font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0;
  color: inherit; text-transform: none; letter-spacing: normal;
}
.hilos p { margin: 0; }
.hilos-wrap { max-width: 1120px; margin-inline: auto; }

/* ---------- Hero: title set into the altar wall ---------- */
.hilos-hero { padding-block: clamp(24px, 5vw, 56px) 0; }
.hilos-hero-frame {
  position: relative;
  width: min(100%, 760px);
  margin-inline: auto;
}
.hilos-hero-frame img {
  width: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
}
.hilos-hero-title {
  position: absolute;
  inset: 9% 0 auto 0;
  text-align: center;
  display: grid;
  gap: 0.6rem;
  padding-inline: 16px;
  text-shadow: 0 2px 24px rgba(20,18,16,.55);
}
.hilos-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hilos-hero h1 {
  font-size: clamp(4.2rem, 15vw, 9.5rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-style: italic;
  font-weight: 600;
  color: #fff8ed;
  -webkit-text-stroke: 0.6px currentColor;
  text-shadow: 0 2px 4px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.8);
}
.hilos-hero .hilos-sub {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.6vw, 1.55rem);
  color: var(--ink);
}
.hilos-hero-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem;
  margin-top: 1.4rem;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-faint);
}

/* ---------- Statement ---------- */
.hilos-statement {
  max-width: 38rem; margin: clamp(56px, 9vw, 110px) auto;
  display: grid; gap: 1.2rem;
}
.hilos-statement .hilos-lede {
  font-family: var(--display);
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  line-height: 1.35;
  color: var(--ink);
}
.hilos-statement p:not(.hilos-lede) { color: var(--ink-soft); }

/* ---------- Acts ---------- */
.hilos-act { border-top: 1px solid var(--rule); padding-block: clamp(40px, 6vw, 72px); }
.hilos-act-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.2rem; margin-bottom: clamp(32px, 5vw, 56px); }
.hilos-act-num { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--rosary); }
.hilos-act-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-style: italic; }
.hilos-act-head .hilos-en { font-family: var(--body); font-size: 0.95rem; color: var(--ink-faint); }

.hilos-frame {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
.hilos-frame + .hilos-frame { margin-top: clamp(56px, 8vw, 104px); }
.hilos-frame.hilos-flip { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.hilos-frame.hilos-flip .hilos-shot { order: 2; }
.hilos-frame.hilos-wide { grid-template-columns: 1fr; }
.hilos-frame.hilos-wide .hilos-cap { max-width: 36rem; }
.hilos-shot { margin: 0; cursor: zoom-in; }
.hilos-shot button { all: unset; display: block; width: 100%; cursor: zoom-in; }
.hilos-shot button:focus-visible { outline: 2px solid var(--rosary); outline-offset: 4px; }

.hilos-cap { display: grid; gap: 0.9rem; padding-bottom: 0.5rem; }
.hilos-cap h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1; }
.hilos-cap h3 em { display: block; font-family: var(--body); font-style: normal; font-size: 0.9rem; color: var(--sage); margin-top: 0.35rem; letter-spacing: 0.02em; }
.hilos-cap p { color: var(--ink-soft); max-width: 34ch; }
.hilos-exif {
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--rule); padding-top: 0.7rem;
}
.hilos-carved { letter-spacing: .06em; }

/* Closing frame */
.hilos-closing { display: grid; justify-items: center; gap: clamp(28px, 4vw, 44px); }
.hilos-closing .hilos-shot { width: min(100%, 700px); }
.hilos-closing .hilos-cap { text-align: center; justify-items: center; }
.hilos-closing .hilos-cap p { max-width: 40ch; }

/* ---------- Approach ---------- */
.hilos-approach {
  border-top: 1px solid var(--rule);
  padding-block: clamp(48px, 7vw, 88px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 64px);
}
.hilos-approach h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-style: italic; }
.hilos-approach-body { display: grid; gap: 1.1rem; color: var(--ink-soft); max-width: 40rem; }
.hilos-order { overflow-x: auto; margin-top: 0.6rem; }
.hilos-order table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 0.9rem; }
.hilos-order th, .hilos-order td { text-align: left; padding: 0.55rem 0.8rem 0.55rem 0; border-bottom: 1px solid var(--rule); background: none; }
.hilos-order th { font-family: var(--mono); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.hilos-order td { color: var(--ink); }
.hilos-order td.hilos-m { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.hilos-footer {
  border-top: 1px solid var(--rule);
  padding-block: 28px 48px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-faint);
}

/* ---------- Lightbox (native <dialog>) ---------- */
.hilos-lightbox {
  border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh;
}
.hilos-lightbox::backdrop { background: rgba(14,13,12,.94); }
.hilos-lightbox img { max-width: 96vw; max-height: 88vh; width: auto; margin-inline: auto; }
.hilos-lightbox .hilos-lb-cap { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); text-align: center; padding-top: 10px; }
.hilos-lightbox button {
  position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 16px;
  background: none; border: 1px solid var(--rule); color: var(--ink); font-family: var(--mono);
  font-size: 0.75rem; padding: 6px 12px; cursor: pointer; letter-spacing: 0.1em;
}
.hilos-lightbox button:focus-visible { outline: 2px solid var(--rosary); }

@media (max-width: 760px) {
  .hilos-frame, .hilos-frame.hilos-flip { grid-template-columns: 1fr; align-items: start; }
  .hilos-frame.hilos-flip .hilos-shot { order: 0; }
  .hilos-approach { grid-template-columns: 1fr; }
  .hilos-hero-title { inset-block-start: 6%; }
}
@media (prefers-reduced-motion: no-preference) {
  .hilos-hero-title { animation: hilos-rise 1.4s ease-out both; }
}
@keyframes hilos-rise { from { opacity: .0001; transform: translateY(10px); } to { opacity: 1; transform: none; } }