/* =========================================================================
   JUSTINE — PORTFOLIO  ·  aéré, texture papier, type Lupio / system-ui
   ========================================================================= */

/* ---- Lupio (demo, titles) ---- */
@font-face { font-family: 'Lupio'; src: url('fonts/Lupio-Regular.otf') format('opentype');  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lupio'; src: url('fonts/Lupio-Medium.otf') format('opentype');   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lupio'; src: url('fonts/Lupio-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lupio'; src: url('fonts/Lupio-Bold.otf') format('opentype');     font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---- color : soft grey paper (#dedede) + warm ink + brick accent ---- */
  --paper:      #dedede;   /* webflow grey */
  --paper-2:    #d2d2d2;   /* tile / inset */
  --ink:        #1b1814;   /* warm near-black */
  --ink-soft:   #6a6660;   /* secondary */
  --hair:       rgba(27,24,20,.15);
  --hair-soft:  rgba(27,24,20,.08);
  --accent:     #cf4518;   /* brick orange — overridable */
  --on-accent:  #f1efe9;
  --tex-wash:   0.55;      /* how much the grey washes over the texture (1 = texture hidden) */

  /* ---- type : Lupio (display) + Montserrat (text) ---- */
  --display: 'Lupio', 'Helvetica Neue', system-ui, sans-serif;
  --text: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- grid ---- */
  --cols: 12;
  --gutter: 28px;
  --margin: clamp(20px, 4.5vw, 80px);
  --maxw: 1680px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* grey hairlines/gridlines read heavier on small, high-density phone
   screens — soften them there rather than on desktop */
@media (max-width: 720px) {
  :root { --hair: rgba(27,24,20,.09); --hair-soft: rgba(27,24,20,.05); }
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background-color: var(--paper);
  position: relative;
}
/* paper texture washed with grey so it stays subtle (intensity via --tex-wash) —
   painted on a fixed, viewport-sized pseudo-element rather than the body itself:
   background-attachment:fixed is unreliable on mobile browsers (it falls back to
   scroll and sizes "cover" against the whole tall document instead of the
   viewport, blowing the grain up far past its intended scale). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(222,222,222,var(--tex-wash)), rgba(222,222,222,var(--tex-wash))),
    url('assets/paper.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

::selection { background: var(--accent); color: var(--on-accent); }
a { color: inherit; text-decoration: none; }

/* ---------- layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* ---------- bracket label (system-ui, tracked) ---------- */
.lab {
  font-family: var(--text);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--ink);
  font-weight: 500;
}
.lab--soft { color: var(--ink-soft); }
.lab--accent { color: var(--accent); }
.rail .lab { white-space: nowrap; }

/* ---------- display type (Lupio) ---------- */
.display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.serifless { font-family: var(--display); }

/* ---------- the (now optional, faint) grid overlay ---------- */
.gridlines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--margin);
  opacity: 0; transition: opacity .4s var(--ease);
}
.gridlines[data-on="1"] { opacity: 1; }
.gridlines .col {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter); height: 100%;
}
.gridlines .col .gl { height: 100%; width: 1px; background: var(--hair-soft); }

/* ---------- hairline (used sparingly) ---------- */
.rule { border: 0; border-top: 1px solid var(--hair); margin: 0; }
.rule--ink { border-top: 1px solid var(--ink); }

@media (max-width: 860px) {
  .proj-row { flex-direction: column; }
  .proj-row .proj-tile { width: 100% !important; margin-left: 0 !important; margin-top: 0 !important; }
}

/* ---------- B&W image placeholder tile ---------- */
.ph {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar, 4/3);
  filter: grayscale(1);
  display: flex; align-items: flex-end;
  background-color: color-mix(in srgb, var(--ink) 6%, transparent);
  animation: ph-float-idle 7s ease-in-out infinite;
}
@media (hover: none) { .ph { filter: grayscale(0) !important; } }
.ph--photo {
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}
@keyframes ph-float-idle {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@media (prefers-reduced-motion: reduce) { .ph { animation: none; } }
.ph__tag {
  font-family: var(--text); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-soft); padding: 12px 14px; mix-blend-mode: multiply;
}

/* ---------- accordion toggle (visible +) ---------- */
.toggle {
  width: 38px; height: 38px; flex: none;
  display: inline-grid; place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-family: var(--text);
  font-size: 22px; font-weight: 400; line-height: 1;
  transition: background .35s var(--ease), color .35s var(--ease), transform .45s var(--ease), border-color .35s var(--ease);
}
.toggle span { display: block; transform: translateY(-1px); }
.toggle svg { display: block; }
.xp-head:hover .toggle { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.xp-row[data-open="1"] .toggle { background: var(--ink); border-color: var(--ink); color: var(--on-accent); transform: rotate(45deg); }

/* ---------- buttons (hero CTAs) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: 100px;
  font-family: var(--text); font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em; text-transform: lowercase;
  color: var(--ink); background: transparent;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn .btn-arrow { display: inline-flex; transition: transform .4s var(--ease); }
.btn .btn-arrow svg { width: 13px; height: 13px; display: block; }
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:hover .btn-arrow { transform: translate(3px, -3px); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- key figures (about) ---------- */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---------- focus ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; filter: none !important; }
}

/* ---------- responsive ---------- */
/* tablette : typo contact (mail / téléphone / linkedin) un peu réduite */
@media (max-width: 1024px) {
  .contact-big { font-size: clamp(19px, 3.2vw, 38px) !important; }
}