:root {
  --paper:#f2f0eb;
  --ink:#111;
  --accent:#d94b22;
  --line:#c9c5bd;
  --hero-main-pos-x: 50%;
  --hero-main-pos-y: 50%;
  --hero-secondary-pos-x: 50%;
  --hero-secondary-pos-y: 28%;
  --archive-left-pos-x: 50%;
  --archive-left-pos-y: 50%;
  --archive-right-pos-x: 50%;
  --archive-right-pos-y: 50%;
  --strip-01-pos-x: 50%; --strip-01-pos-y: 50%;
  --strip-02-pos-x: 50%; --strip-02-pos-y: 50%;
  --strip-03-pos-x: 50%; --strip-03-pos-y: 50%;
  --strip-04-pos-x: 50%; --strip-04-pos-y: 50%;
  --strip-05-pos-x: 50%; --strip-05-pos-y: 50%;
  --strip-06-pos-x: 50%; --strip-06-pos-y: 50%;
  --strip-07-pos-x: 50%; --strip-07-pos-y: 50%;
  --strip-08-pos-x: 50%; --strip-08-pos-y: 50%;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

.site-header { height:100px; display:grid; grid-template-columns:190px 1fr auto; align-items:center; gap:32px; padding:10px 4vw; border-bottom:1px solid var(--line); }
.brand-mark { width:90px; height:76px; object-fit:cover; mix-blend-mode:multiply; }
.header-note,.social-link { font:700 11px/1.2 "Courier New",monospace; letter-spacing:.12em; text-transform:uppercase; }
.header-note { color:#6d6963; }
.social-link { border-bottom:1px solid var(--ink); padding-bottom:4px; }
.header-actions { display:flex; align-items:center; gap:22px; }
.lang-switch { display:flex; align-items:center; gap:0; border:1px solid var(--ink); }
.lang-switch button {
  min-width:40px; min-height:30px; margin:0; padding:0 10px; border:0;
  border-right:1px solid var(--ink); background:transparent; color:var(--ink);
  font:700 10px/1 "Courier New",monospace; letter-spacing:.1em; cursor:pointer;
}
.lang-switch button:last-child { border-right:0; }
.lang-switch button.is-active { background:var(--ink); color:#fff; }
.lang-switch button:hover:not(.is-active) { background:#e4e1da; }

.hero { min-height:calc(100vh - 100px); display:grid; grid-template-columns:44% 56%; border-bottom:1px solid var(--line); }
.hero-copy { padding:7vh 4vw 5vh; display:flex; flex-direction:column; }
.eyebrow { font:700 11px/1 "Courier New",monospace; letter-spacing:.14em; text-transform:uppercase; margin-bottom:5vh; }
.eyebrow span { color:var(--accent); margin-right:18px; }
h1 { margin:0; font-family:Impact,"Arial Narrow",sans-serif; font-size:clamp(62px,7.4vw,126px); line-height:.78; letter-spacing:-.025em; }
.manifesto {
  margin:5vh 0 4vh; max-width:520px;
  font-family:Impact,"Arial Narrow",sans-serif;
  font-size:clamp(32px,3.6vw,52px); line-height:.92; letter-spacing:-.02em; text-transform:uppercase;
}
.manifesto strong { color:var(--accent); font-weight:inherit; font-size:inherit; }

.signup { margin-top:auto; max-width:540px; border-top:1px solid var(--ink); padding-top:18px; }
.signup p { margin:0 0 14px; font-size:14px; }
.signup form { display:grid; grid-template-columns:1fr auto; }
.signup input,.signup button {
  min-height:52px; border:1px solid var(--ink); border-radius:0; background:transparent;
  padding:0 16px; letter-spacing:.08em;
}
.signup input { font:700 11px "Courier New",monospace; }
.signup button {
  background:var(--ink); color:#fff; cursor:pointer; white-space:nowrap; min-width:150px;
  font:700 12px Arial,Helvetica,sans-serif;
  text-transform:uppercase;
  font-style:normal;
}
.signup button span { color:var(--accent); margin-left:12px; font-size:18px; }
.signup small { display:block; margin-top:10px; color:#77716a; font:10px "Courier New",monospace; text-transform:uppercase; letter-spacing:.08em; }

.visual-stage { position:relative; min-height:720px; border-left:1px solid var(--line); overflow:hidden; background:#d8d6d1; }
.photo { margin:0; position:absolute; }
.photo img, .photo .img-placeholder { height:100%; width:100%; object-fit:cover; filter:saturate(.78) contrast(1.04); }
.photo .img-placeholder { filter:none; }
.photo figcaption { position:absolute; padding:8px 10px; background:var(--paper); font:700 9px "Courier New",monospace; letter-spacing:.12em; }
.photo-main { inset:0 31% 0 0; }
.photo-main figcaption { left:16px; bottom:16px; }
.photo-main img { object-position: var(--hero-main-pos-x) var(--hero-main-pos-y); }
.photo-secondary { right:0; top:0; width:31%; height:54%; border-left:6px solid var(--paper); border-bottom:6px solid var(--paper); }
.photo-secondary figcaption { right:12px; bottom:12px; }
.photo-secondary img { object-position: var(--hero-secondary-pos-x) var(--hero-secondary-pos-y); }
.coming-stamp {
  position:absolute; right:0; bottom:0; width:31%; height:46%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--accent); color:#fff;
  font-family:Impact,"Arial Narrow",sans-serif; font-size:clamp(34px,3.8vw,62px); line-height:.85;
}

.archive-strip { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.archive-strip > * { background:var(--paper); }
.archive-heading { padding:5vw 4vw; display:flex; flex-direction:column; justify-content:center; }
.archive-heading p {
  max-width:380px; margin:0; font-family:Impact,"Arial Narrow",sans-serif;
  font-size:clamp(22px,2.4vw,34px); line-height:1; letter-spacing:-.015em; text-transform:uppercase;
}
.archive-strip figure { margin:0; aspect-ratio:1; overflow:hidden; }
.archive-strip img, .archive-strip .img-placeholder { height:100%; width:100%; object-fit:cover; }
.archive-left img { object-position: var(--archive-left-pos-x) var(--archive-left-pos-y); }
.archive-right img { object-position: var(--archive-right-pos-x) var(--archive-right-pos-y); }

.img-placeholder {
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #e4e1da 0%, #d5d1c9 48%, #e8e5de 100%);
}
.img-placeholder-inner { max-width:min(88%, 320px); padding:16px; text-align:center; display:flex; flex-direction:column; gap:6px; }
.img-placeholder-file { font:700 11px/1.2 "Courier New",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.img-placeholder-meta { font:700 9px/1.3 "Courier New",monospace; letter-spacing:.08em; text-transform:uppercase; color:#6d6963; }
.img-placeholder-note { margin-top:6px; font:10px/1.45 Arial,Helvetica,sans-serif; color:#5c5852; }

.image-rail { display:grid; grid-template-columns:repeat(8, 1fr); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.image-rail .rail-cell { margin:0; aspect-ratio:1; overflow:hidden; background:#d8d6d1; }
.image-rail img, .image-rail .img-placeholder { height:100%; width:100%; object-fit:cover; }
.image-rail .img-placeholder-inner { max-width:92%; padding:8px 6px; gap:4px; }
.image-rail .img-placeholder-file { font-size:8px; letter-spacing:.06em; }
.image-rail .img-placeholder-meta { font-size:7px; }
.image-rail .img-placeholder-note { display:none; }
.crop-strip-01 { object-position: var(--strip-01-pos-x) var(--strip-01-pos-y); }
.crop-strip-02 { object-position: var(--strip-02-pos-x) var(--strip-02-pos-y); }
.crop-strip-03 { object-position: var(--strip-03-pos-x) var(--strip-03-pos-y); }
.crop-strip-04 { object-position: var(--strip-04-pos-x) var(--strip-04-pos-y); }
.crop-strip-05 { object-position: var(--strip-05-pos-x) var(--strip-05-pos-y); }
.crop-strip-06 { object-position: var(--strip-06-pos-x) var(--strip-06-pos-y); }
.crop-strip-07 { object-position: var(--strip-07-pos-x) var(--strip-07-pos-y); }
.crop-strip-08 { object-position: var(--strip-08-pos-x) var(--strip-08-pos-y); }

footer { min-height:100px; padding:28px 4vw; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:20px; font:700 10px "Courier New",monospace; letter-spacing:.1em; }
footer :nth-child(2){text-align:center}
footer :last-child{text-align:right}

@media(max-width:850px){
  html,body{overflow-x:hidden; width:100%; max-width:100%;}
  main{overflow-x:hidden; width:100%; max-width:100%;}
  .site-header{
    grid-template-columns:auto 1fr;
    align-items:center;
    height:auto;
    min-height:72px;
    padding:12px 16px;
    gap:12px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .header-note{display:none}
  .brand-mark{width:64px;height:54px; justify-self:start}
  .header-actions{
    display:flex;
    justify-self:end;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
    min-width:0;
  }
  .lang-switch{flex-shrink:0}
  .social-link{white-space:nowrap}
  .hero{grid-template-columns:1fr; min-height:0; width:100%; max-width:100%; overflow:hidden}
  .hero-copy{
    min-height:680px;
    padding:50px 24px 36px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow:hidden;
  }
  h1{font-size:clamp(66px,20vw,110px); max-width:100%;}
  html[lang="fr"] h1{font-size:clamp(60px,17.5vw,102px);}
  .manifesto{max-width:100%}
  .visual-stage{border-left:0;border-top:1px solid var(--line);min-height:640px; width:100%; overflow:hidden}
  .archive-strip{grid-template-columns:1fr 1fr; overflow:hidden; width:100%}
  .archive-heading{grid-column:1/-1;min-height:280px}
  .archive-heading p{max-width:100%; overflow-wrap:anywhere}
  .image-rail{
    display:flex;
    flex-wrap:wrap;
    gap:0;
    background:var(--paper);
    overflow:hidden;
    width:100%;
    max-width:100%;
  }
  .image-rail .rail-cell{
    width:25%;
    flex:0 0 25%;
    max-width:25%;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-sizing:border-box;
  }
  .image-rail .rail-cell:nth-child(4n){border-right:0}
  footer{grid-template-columns:1fr; width:100%; max-width:100%; box-sizing:border-box}
  footer :nth-child(2),footer :last-child{text-align:left}
}
@media(max-width:520px){
  .site-header{padding:10px 14px; gap:8px}
  .header-actions{gap:8px}
  .signup{max-width:100%}
  .signup form{grid-template-columns:1fr}
  .visual-stage{min-height:680px}
  .photo-main{inset:0 0 34%}
  .photo-secondary{
    left:0;right:auto;top:auto;bottom:0;width:50%;height:34%;
    border-left:0;border-bottom:0;border-top:0;
  }
  .coming-stamp{width:50%;height:34%}
  .image-rail .rail-cell{
    width:50%;
    flex:0 0 50%;
    max-width:50%;
  }
  .image-rail .rail-cell:nth-child(4n){border-right:1px solid var(--line)}
  .image-rail .rail-cell:nth-child(2n){border-right:0}
}