/* ============================================================
   Jérémie Anglaret-Guirguis — portfolio
   Direction: ink on ledger paper. Every hairline on this page
   is a plotted signal trace; the serif carries the voice, the
   mono carries the data.
   ============================================================ */

:root{
  --paper:    #EDEDEA;
  --panel:    #E6E6E2;
  --ink:      #14181D;
  --graphite: #5A6069;
  --rule:     #C9C8C3;
  --rule-2:   #D8D7D2;
  --signal:   #1A4FD6;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: clamp(20px, 5vw, 64px);
  --max: 1180px;

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(16px, 0.55vw + 14.4px, 18px);
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ margin:0; font-weight:500; letter-spacing:-0.018em; line-height:1.06; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
b,strong{ font-weight:600; }

a{ color:inherit; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:1px; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  font-family:var(--mono); font-size:12px; background:var(--ink); color:var(--paper);
  padding:10px 16px; text-decoration:none;
}
.skip:focus{ left:8px; top:8px; }

/* ── shared bits ───────────────────────────────────────────── */

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--graphite);
}

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  letter-spacing:0.04em; text-decoration:none; color:var(--ink);
  padding:.72em 1.15em; border:1px solid var(--rule); background:transparent;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
.btn:hover{ border-color:var(--ink); }
.btn--solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--solid:hover{ background:var(--signal); border-color:var(--signal); }
.btn--sm{ padding:.5em .85em; font-size:11.5px; }

/* ── nav ───────────────────────────────────────────────────── */

.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav__in{
  max-width:var(--max); margin-inline:auto; padding:0 var(--gut);
  height:60px; display:flex; align-items:center; gap:24px;
}
.nav__id{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:0.02em;
  white-space:nowrap; margin-right:auto;
}
.nav__mark{ color:var(--signal); display:block; width:26px; flex:none; }
.nav__mark svg{ display:block; width:100%; height:auto; }

.nav__links{ display:flex; gap:22px; }
.nav__links a{
  font-family:var(--mono); font-size:12px; letter-spacing:0.02em;
  color:var(--graphite); text-decoration:none; padding-block:4px;
  border-bottom:1px solid transparent; transition:color .18s ease, border-color .18s ease;
}
.nav__links a:hover{ color:var(--ink); border-bottom-color:var(--signal); }

.nav__act{ display:flex; align-items:center; gap:14px; }
.lang{ display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11.5px; }
.lang__b{
  font:inherit; background:none; border:0; padding:2px 1px; cursor:pointer;
  color:var(--graphite); letter-spacing:0.06em; transition:color .18s ease;
}
.lang__b:hover{ color:var(--ink); }
.lang__b.is-on{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--signal); }
.lang__sep{ color:var(--rule); }

@media (max-width: 880px){
  .nav__links{ display:none; }
}
@media (max-width: 420px){
  .nav__in{ gap:12px; }
  .nav__id span:last-child{ display:none; }
}

/* ── hero ──────────────────────────────────────────────────── */

.hero{ padding-top:clamp(56px, 9vw, 104px); padding-bottom:clamp(48px, 7vw, 88px); }

/* row-reverse + space-between: photo is first in the DOM so it stacks on
   top when the row collapses, but sits at the right edge on wide screens */
.hero__head{
  display:flex; flex-direction:row-reverse; align-items:center;
  justify-content:space-between; gap:clamp(12px, 3.2vw, 56px);
}
.hero__id{ min-width:0; }
.hero__photo{
  flex:none; width:clamp(62px, 15vw, 168px); height:auto;
  aspect-ratio:1; border-radius:50%; object-fit:cover;
  background:var(--panel); box-shadow:0 0 0 1px var(--rule);
}

.hero__name{
  font-size:clamp(1.75rem, 7.4vw, 6.4rem);
  font-weight:400; line-height:0.98; letter-spacing:-0.032em;
  margin-top:18px; overflow-wrap:break-word;
}
.hero__trace{ margin:clamp(26px, 4vw, 44px) 0 clamp(26px, 4vw, 40px); height:72px; }
.hero__trace svg{ display:block; width:100%; height:72px; overflow:visible; }

.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(28px, 5vw, 72px); align-items:start;
}
.hero__lede{ font-size:clamp(1.06rem, 1.5vw, 1.32rem); line-height:1.55; max-width:60ch; }

.hero__meta{ display:grid; gap:14px; padding-top:5px; }
.hero__meta div{ display:grid; gap:2px; padding-left:14px; border-left:1px solid var(--rule); }
.hero__meta dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--graphite);
}
.hero__meta dd{ font-family:var(--mono); font-size:12.5px; line-height:1.45; overflow-wrap:anywhere; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(30px, 4vw, 48px); }

@media (max-width: 840px){
  .hero__grid{ grid-template-columns:1fr; gap:30px; }
}

/* ── divider: a low-amplitude trace, not a rule ────────────── */

.divider{ height:14px; }
.divider svg{ display:block; width:100%; height:14px; color:var(--rule); }

/* ── section frame ─────────────────────────────────────────── */

.sect{ padding-block:clamp(56px, 8vw, 104px); }
.sect__head{ max-width:64ch; margin-bottom:clamp(36px, 5vw, 60px); }
.sect__title{ font-size:clamp(1.85rem, 3.6vw, 2.9rem); margin-top:14px; }
.sect__intro{ margin-top:18px; color:var(--graphite); font-size:1.02rem; }

/* ── pôles ─────────────────────────────────────────────────── */

.poles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--rule); border-block:1px solid var(--rule); }
.pole{ background:var(--paper); padding:clamp(24px, 2.6vw, 34px) clamp(20px, 2.2vw, 30px); display:flex; flex-direction:column; }
.pole__tag{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--signal);
}
.pole__h{ font-size:1.32rem; margin:14px 0 12px; }
.pole > p{ color:var(--graphite); font-size:0.98rem; }
.pole__kv{ margin-top:auto; padding-top:24px; display:grid; gap:8px; }
.pole__kv li{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 14px;
  padding-top:8px; border-top:1px solid var(--rule-2);
  font-family:var(--mono); font-size:11.5px;
}
.pole__kv span{ color:var(--graphite); letter-spacing:0.04em; }
.pole__kv b{ font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }

@media (max-width: 900px){
  .poles{ grid-template-columns:1fr; }
}

/* ── experience entries ────────────────────────────────────── */

.entry{
  display:grid; grid-template-columns:180px minmax(0,1fr);
  gap:clamp(24px, 4vw, 56px);
  padding-block:clamp(30px, 4vw, 44px);
  border-top:1px solid var(--rule);
}
.entry:last-of-type{ border-bottom:1px solid var(--rule); }
.entry__aside{ display:grid; gap:4px; align-content:start; position:sticky; top:82px; }
.entry__date, .entry__place{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em;
}
.entry__place{ color:var(--graphite); }
.entry__h{ font-size:clamp(1.4rem, 2.4vw, 1.85rem); }
.entry__role{
  font-family:var(--mono); font-size:12px; letter-spacing:0.03em;
  color:var(--signal); margin-top:8px;
}
.bullets{ margin-top:22px; display:grid; gap:13px; }
.bullets li{ position:relative; padding-left:22px; color:var(--graphite); font-size:0.99rem; }
.bullets li b{ color:var(--ink); }
.bullets li::before{
  content:""; position:absolute; left:0; top:0.72em;
  width:11px; height:1px; background:var(--signal);
}
.entry__link{ margin-top:20px; font-family:var(--mono); font-size:12px; }
.entry__link a{ color:var(--signal); text-decoration:none; border-bottom:1px solid transparent; }
.entry__link a:hover{ border-bottom-color:var(--signal); }

@media (max-width: 780px){
  .entry{ grid-template-columns:1fr; gap:16px; }
  .entry__aside{ position:static; display:flex; gap:16px; }
}

/* ── indicator strip (the signature) ───────────────────────── */

.strip{ margin:32px 0 0; border:1px solid var(--rule); background:var(--panel); }
.strip__tabs{ display:flex; flex-wrap:wrap; border-bottom:1px solid var(--rule); }
.strip__tab{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.05em;
  background:none; border:0; border-right:1px solid var(--rule);
  padding:11px 16px; cursor:pointer; color:var(--graphite);
  position:relative; transition:color .18s ease, background-color .18s ease;
}
.strip__tab:hover{ color:var(--ink); background:color-mix(in srgb, var(--paper) 60%, transparent); }
.strip__tab.is-on{ color:var(--ink); background:var(--paper); font-weight:600; }
.strip__tab.is-on::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--signal);
}
.strip__chart{ height:440px; background:var(--paper); border-bottom:1px solid var(--rule-2); }
.strip__fallback{
  font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--graphite);
  max-width:46ch; margin:0 auto; padding:180px 24px 0; text-align:center;
}
@media (max-width: 700px){
  .strip__fallback{ padding-top:130px; }
}
.strip__src{
  padding:8px clamp(14px, 2vw, 22px);
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.04em;
  border-bottom:1px solid var(--rule-2);
}
.strip__src a{ color:var(--graphite); text-decoration:none; }
.strip__src a:hover{ color:var(--signal); }

@media (max-width: 700px){
  .strip__chart{ height:340px; }
}
.strip__cap{
  display:grid; gap:6px;
  padding:12px clamp(14px, 2vw, 22px) 16px;
  border-top:1px solid var(--rule-2);
  font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--graphite);
}
.strip__note{ font-size:10.5px; color:var(--rule); color:#8D9299; }

/* ── canopée screenshots ───────────────────────────────────── */

.shots{ margin-top:28px; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); }
.shots figure{ margin:0; background:var(--panel); padding:14px; }
.shots img{ display:block; width:100%; height:auto; border:1px solid var(--rule); }
.shots figcaption{
  margin-top:9px; font-family:var(--mono); font-size:10.5px;
  line-height:1.5; color:var(--graphite);
}

/* ── project cards ─────────────────────────────────────────── */

.cards{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.card{ background:var(--paper); padding:clamp(24px, 2.8vw, 36px); }
.card__h{ font-size:1.36rem; max-width:22ch; }
.card > p{ margin-top:14px; color:var(--graphite); font-size:0.99rem; }
.tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.tags span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em;
  padding:4px 9px; border:1px solid var(--rule); color:var(--graphite);
}

@media (max-width: 780px){
  .cards{ grid-template-columns:1fr; }
}

/* ── education & skills ────────────────────────────────────── */

.two{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(36px, 6vw, 84px); }

.edu{ margin-top:26px; display:grid; gap:26px; }
.edu li{ padding-top:18px; border-top:1px solid var(--rule); }
.edu__d{ font-family:var(--mono); font-size:11.5px; color:var(--graphite); letter-spacing:0.04em; }
.edu__h{ font-size:1.24rem; margin:9px 0 4px; }
.edu li p:last-child{ color:var(--graphite); font-size:0.97rem; }

.skills{ margin-top:26px; }
.skills dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--graphite); padding-top:18px; border-top:1px solid var(--rule);
}
.skills dd{ font-family:var(--mono); font-size:12.5px; line-height:1.75; margin:8px 0 22px; overflow-wrap:anywhere; }
.skills dd:last-child{ margin-bottom:0; }

@media (max-width: 780px){
  .two{ grid-template-columns:1fr; }
}

/* ── contact ───────────────────────────────────────────────── */

.contact{ border-top:1px solid var(--rule); }
.contact__h{ font-size:clamp(2.2rem, 5.4vw, 3.6rem); margin-top:16px; }
.contact__b{ margin-top:18px; max-width:52ch; color:var(--graphite); }
.contact__mail{
  display:inline-block; margin-top:26px; max-width:100%; overflow-wrap:anywhere;
  font-family:var(--mono); font-size:clamp(0.95rem, 2.2vw, 1.2rem);
  letter-spacing:-0.01em; text-decoration:none;
  border-bottom:1px solid var(--signal); padding-bottom:3px;
  transition:color .18s ease;
}
.contact__mail:hover{ color:var(--signal); }

/* ── footer ────────────────────────────────────────────────── */

.foot{ border-top:1px solid var(--rule); padding-block:26px; }
.foot__in{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot p{ font-family:var(--mono); font-size:11.5px; color:var(--graphite); letter-spacing:0.03em; }

/* ── print ─────────────────────────────────────────────────── */

@media print{
  .nav, .hero__trace, .strip, .divider, .hero__cta{ display:none; }
  body{ background:#fff; font-size:11pt; }
  .sect{ padding-block:18px; }
}