/* TYNX · Patine industrielle. Texture graphique, photographies préservées. */
:root {
  --c-forge-950: #080909;
  --c-forge-900: #101110;
  --c-forge-800: #191a17;
  --c-forge-700: #24251f;
  --c-paper: #f0eadc;
  --c-paper-dim: #d9d2c2;
  --c-paper-low: #c4bcaa;
  --c-steel-300: #c0bcb1;
  --c-steel-400: #a9a598;
  --c-steel-500: #514d43;
  --c-ember: #9d351a;
  --c-ember-soft: #ff8044;
  --c-abyss-900: #101815;
  --c-abyss-800: #1c2520;
  --c-abyss-700: #29332a;
  --c-patina: #a6845c;
  --font-display: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
  --font-editorial: 'Instrument Serif', Georgia, serif;
  --fs-hero: clamp(4.5rem, 13vw, 13rem);
  --fs-d1: clamp(3rem, 7.2vw, 6.75rem);
  --fs-d2: clamp(2.5rem, 5vw, 4.25rem);
  --fs-d3: clamp(1.75rem, 2.8vw, 2.6rem);
  --selection: rgba(255,128,68,.38);
}

.surface--forge {
  --fg-muted: #c7c2b7;
  --fg-subtle: #a9a598;
  --line: rgba(240,234,220,.2);
  --line-strong: rgba(240,234,220,.42);
  background-image: url('../brand/industrial-patina.svg'),
    radial-gradient(ellipse at 100% 0%, rgba(118,63,32,.14), transparent 60%);
  background-size: 1000px 750px, 100% 100%;
}
.surface--paper {
  --bg: #e7e0d0;
  --fg: #171914;
  --fg-muted: #494a40;
  --fg-subtle: #565447;
  --line: rgba(32,32,24,.24);
  --line-strong: rgba(32,32,24,.5);
  background-image: url('../brand/industrial-patina.svg'),
    radial-gradient(ellipse at 0% 100%, rgba(135,65,29,.2), transparent 55%);
  background-blend-mode: multiply, normal;
  background-size: 1000px 750px, 100% 100%;
}
.surface--abyss {
  --fg-muted: #c9c9b9;
  --fg-subtle: #abb19d;
  background-image: url('../brand/industrial-patina.svg'),
    radial-gradient(ellipse at 70% 0%, rgba(153,78,33,.22), transparent 65%);
  background-size: 1000px 750px, 100% 100%;
}
.grain::after { opacity: .042; }

/* Une empreinte franche, puis la matière dans les petits signes. */
.d1, .d2, .d3, .hero-type, .work__title, .step__t, .footer__cta, .stat__k {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.015em;
}
.d1, .d2 { line-height: .98; }
.it, .d1 em, .d2 em, .hero-type em { font-style: normal; }
.d1 em, .d2 em, .d1 .it, .d2 .it { color: var(--signal); }
.quote { font-family: var(--font-editorial); }
.lead, .hero__sub { font-weight: 400; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .15em;
  color: var(--signal);
}
.eyebrow::before { width: 32px; height: 3px; background: currentColor; }
.brand__text { gap: 2px; }
.brand__name { font-family: var(--font-display); font-size: 2.35rem; font-weight: 800; letter-spacing: .12em; }
.brand__role { font-family: var(--font-mono); color: #d2c8b4; font-size: .55rem; letter-spacing: .22em; }
.header { border-bottom-color: rgba(240,234,220,.17); background: linear-gradient(#090a09c7, #090a0970); }
.header.is-stuck { background: rgba(10,12,10,.94); border-bottom-color: rgba(255,128,68,.42); }
.nav__link { font-size: .75rem; font-weight: 600; color: #e3ddcf; }
.nav__link.is-current::after { background: var(--c-ember-soft); height: 2px; }
.drawer { background-image: url('../brand/industrial-patina.svg'); }
.drawer__link { text-transform: uppercase; font-weight: 700; }

/* L’acier et la braise se rencontrent sur la photographie d’origine. */
.hero { border-bottom: 4px solid var(--c-ember-soft); }
.hero__media img { filter: contrast(1.16) saturate(.72); object-position: center 43%; }
.hero__veil {
  background:
    linear-gradient(90deg, rgba(7,9,8,.87), rgba(7,9,8,.34) 58%, rgba(7,9,8,.18)),
    linear-gradient(0deg, rgba(7,9,8,.98), transparent 62%, rgba(7,9,8,.36)),
    radial-gradient(ellipse at 8% 95%, rgba(222,80,22,.38), transparent 52%);
}
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url('../brand/industrial-patina.svg');
  background-size: 1200px 900px;
  opacity: .65; mix-blend-mode: soft-light;
  border: 12px solid rgba(8,10,8,.25);
}
.hero__inner { padding-top: 170px; padding-bottom: 86px; }
.hero__title { max-width: 12ch; line-height: .85; }
.hero__title .split-line { padding-bottom: .13em; margin-bottom: -.13em; }
.hero__title .split-line > span {
  width: fit-content;
  background-color: var(--c-paper);
  background-image: url('../brand/ink-wear.svg');
  background-size: 440px 220px;
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__title .split-line .it { background-color: var(--c-ember-soft); }
.hero__inner > .eyebrow {
  padding: 10px 14px; border: 1px solid rgba(240,234,220,.35);
  background: rgba(10,12,10,.58); color: #f0eadc;
}
.hero__inner > .eyebrow::before { width: 7px; height: 7px; background: var(--c-ember-soft); }
.hero__meta { align-items: end; gap: 28px 48px; margin-top: 32px; }
.hero__sub { max-width: 45ch; font-size: clamp(.9375rem, 1.4vw, 1.125rem); line-height: 1.65; color: #dfd8c9; margin: 0; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.hero__edge {
  position: absolute; right: var(--gutter); top: 154px;
  display: flex; align-items: center; gap: 12px;
  color: #d0c8b9; font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.hero__edge::before { content: '+'; color: var(--c-ember-soft); font-size: 1.5rem; }

/* Plaques découpées, repères de construction et contrastes de matière. */
.btn {
  --btn-bg: var(--c-ember-soft); --btn-fg: #10110f;
  border-radius: 0; font-weight: 700; font-size: .75rem; letter-spacing: .1em;
  padding: 17px 25px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.btn::before { background: var(--c-paper); }
.btn:hover { color: #10110f; }
.surface--paper .btn { --btn-bg: #171914; --btn-fg: #f0eadc; }
.surface--paper .btn::before { background: var(--c-ember); }
.surface--paper .btn:hover { color: #fff9ed; }
.link-arrow { font-size: .75rem; font-weight: 600; }
.link-arrow svg { color: var(--signal); }
.section-head__title { max-width: 15ch; }
.stat { padding: 28px 22px 24px; border-top: 2px solid var(--line-strong); border-left: 1px solid var(--line); background: rgba(214,185,129,.025); }
.stat:first-child { border-top-color: var(--c-ember-soft); }
.stat__k { font-size: clamp(2rem, 3.1vw, 3rem); margin: 0; }
.stat__v { line-height: 1.6; color: var(--fg-muted); }
.works { counter-reset: creation; }
.work { counter-increment: creation; }
.work__frame { border-radius: 0; outline: 1px solid var(--line); outline-offset: -1px; }
.work__frame::before {
  content: ''; position: absolute; inset: 10px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(var(--c-paper),var(--c-paper)) left top/16px 2px no-repeat,
    linear-gradient(var(--c-paper),var(--c-paper)) left top/2px 16px no-repeat,
    linear-gradient(var(--c-ember-soft),var(--c-ember-soft)) right bottom/16px 2px no-repeat,
    linear-gradient(var(--c-ember-soft),var(--c-ember-soft)) right bottom/2px 16px no-repeat;
  opacity: .8;
}
.work__body { border-top-color: var(--line-strong); padding-top: 20px; }
.work__body::before { content: counter(creation, decimal-leading-zero); color: var(--signal); font-family: var(--font-mono); font-size: .625rem; align-self: start; padding-top: 6px; }
.work__title { flex: 1; font-size: clamp(1.7rem, 2.7vw, 2.4rem); }
.work__meta { font-family: var(--font-mono); font-size: .6875rem; line-height: 1.65; }
.work__views { border-radius: 0; background: rgba(8,10,8,.9); border-color: rgba(240,234,220,.35); }
.work__tag { border-left: 2px solid var(--c-ember-soft); border-radius: 0; }
.filter { border-radius: 0; font-size: .6875rem; font-weight: 600; padding: 12px 20px; }
.filter.is-active { background: var(--c-ember-soft); border-color: var(--c-ember-soft); color: #10110f; }
.ticker {
  padding-block: 22px; background: var(--c-ember-soft); color: #11130f;
  background-image: url('../brand/ink-wear.svg'); border: 0;
  transform: skewY(-1deg); width: 100%; margin-left: 0;
}
.ticker__item { color: #11130f; font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 700; text-transform: uppercase; }
.ticker__item::after { background: #11130f; border-radius: 0; width: 7px; height: 7px; transform: rotate(45deg); }
.step { border-top-color: var(--line-strong); }
.step__n { color: var(--signal); font-weight: 600; }
.step__t { font-size: clamp(1.8rem, 2.9vw, 2.7rem); }
.making__item .work__frame { outline: 1px solid rgba(30,31,25,.25); }
.figure figcaption { color: var(--fg-muted); font-family: var(--font-mono); font-size: .6875rem; line-height: 1.6; }
.band { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.band__veil { background: linear-gradient(100deg,rgba(8,10,8,.95),rgba(8,10,8,.72) 55%,rgba(8,10,8,.32)); }
.footer { border-top: 3px solid var(--c-ember-soft); }
.footer__cta { font-size: clamp(2.7rem, 5vw, 4.5rem); max-width: 15ch; }
.footer__stamp { color: var(--c-ember-soft); opacity: 1; }
.footer__bottom { color: var(--fg-muted); font-family: var(--font-mono); font-size: .6875rem; }
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--c-ember-soft); }

@media (max-width: 900px) {
  .hero__edge { display: none; }
  .hero__inner { padding-top: 165px; padding-bottom: 56px; }
  .hero__meta { align-items: start; }
  .hero__actions { gap: 20px; }
}
@media (max-width: 640px) {
  .hero__inner > .eyebrow { font-size: .56rem; letter-spacing: .08em; padding: 9px 11px; }
  .hero__title { font-size: clamp(4.2rem, 18.5vw, 7rem); }
  .hero__inner { padding-top: 145px; padding-bottom: 46px; }
  .hero__meta { margin-top: 24px; gap: 24px; }
  .hero__sub { font-size: .9375rem; }
  .hero__actions { align-items: start; flex-direction: column; gap: 20px; }
  .hero__actions .scroll-cue { display: none; }
  .hero__actions .btn { padding: 16px 20px; font-size: .6875rem; }
  .brand__name { font-size: 2rem; }
  .header { padding-block: 16px; }
  .hero__veil { background: linear-gradient(90deg,rgba(7,9,8,.64),rgba(7,9,8,.15)),linear-gradient(0deg,rgba(7,9,8,.97),rgba(7,9,8,.2) 85%); }
  .work__body { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 8px 12px; }
  .work__body::before { grid-row: 1 / 3; }
  .work__meta { grid-column: 2; margin: 0; }
  .work__title { font-size: 2rem; }
  .filter { padding: 10px 14px; }
}
@media print {
  .surface--forge, .surface--paper, .surface--abyss { background-image: none; }
  .hero__title .split-line > span { -webkit-text-fill-color: #111; }
}


/* La petite raie : signature récurrente, distincte du nom TYNX. */
.ray-icon { flex: none; width: 22px; height: 22px; transition: transform var(--d-2) var(--e-out); }
.btn:hover .ray-icon, .btn:focus-visible .ray-icon { transform: translateX(3px) rotate(-8deg); }
.link-arrow .ray-icon {
  box-sizing: content-box; width: 18px; height: 18px; padding: 7px;
  border: 1px solid currentColor; border-radius: 50%;
}
.link-arrow:hover .ray-icon, .link-arrow:focus-visible .ray-icon { transform: translateX(3px) rotate(-8deg); }
.eyebrow:not(.eyebrow--bare)::before, .hero__edge::before, .ticker__item::after {
  content: ''; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url('../brand/mark-compact.svg') center / contain no-repeat;
  mask: url('../brand/mark-compact.svg') center / contain no-repeat;
}
.hero__inner > .eyebrow::before { background: var(--c-ember-soft); }
.hero__edge::before { width: 26px; height: 26px; background: var(--c-ember-soft); }
.ticker__item::after { width: 18px; height: 18px; border-radius: 0; transform: none; }
.ray-divider { display: flex; align-items: center; gap: 24px; margin-bottom: clamp(40px, 6vw, 80px); color: var(--signal); }
.ray-divider::before, .ray-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.ray-divider svg { width: 58px; height: 58px; flex: none; }
.ray-seal { width: 82px; height: 82px; margin: 0 auto 28px; color: var(--signal); }
.footer__stamp { width: 72px; height: 72px; }
@media (prefers-reduced-motion: reduce) {
  .ray-icon { transition: none; }
  .btn:hover .ray-icon, .btn:focus-visible .ray-icon,
  .link-arrow:hover .ray-icon, .link-arrow:focus-visible .ray-icon { transform: none; }
}