/* EINDER — responsive art-tech coming-soon site. No build process required. */
:root {
  --ink:#091a2c; --muted:#717d87; --pale:#f5f5f1; --line:rgba(21,46,67,.135);
  --blue:#397df3;
  --display:'Space Grotesk','Avenir Next','Segoe UI',sans-serif;
  --body:'DM Sans','Avenir Next','Helvetica Neue',sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--pale); color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
button { font:inherit; }
.site { max-width:1920px; margin:0 auto; min-height:100svh; position:relative; overflow:hidden; }
.topbar { height:81px; border-bottom:1px solid var(--line); padding:0 5.55%; display:flex; align-items:center; justify-content:space-between; gap:22px; position:relative; z-index:10; background:rgba(247,247,244,.97); }
.brand-group { display:flex; align-items:center; gap:37px; white-space:nowrap; }
.brand { font:500 22px/1 var(--display); letter-spacing:.235em; }
.brand-divider { width:1px; height:29px; background:rgba(22,48,69,.29); }
.brand-subtitle { font:500 10px/1.3 var(--mono); letter-spacing:.25em; color:#63707b; }
.main-nav { margin-left:auto; display:flex; align-items:center; gap:clamp(23px,2.7vw,49px); }
.main-nav a { font:600 10px/1.4 var(--mono); letter-spacing:.145em; position:relative; transition:color .2s; }
.main-nav a:hover { color:#3b74c7; }
.main-nav a::after { content:''; position:absolute; height:1px; bottom:-6px; left:0; right:100%; background:var(--blue); transition:right .2s; }
.main-nav a:hover::after { right:0; }
.header-actions { display:flex; align-items:center; gap:46px; }
.header-divider { display:block; width:1px; height:29px; background:rgba(22,48,69,.25); }
.language-picker { position:relative; }
.language-button { display:flex; align-items:center; gap:16px; padding:12px 0; border:0; color:var(--ink); background:transparent; font:500 11px var(--mono); letter-spacing:.2em; cursor:pointer; }
.language-menu { position:absolute; right:0; top:37px; min-width:163px; padding:6px; background:white; border:1px solid var(--line); box-shadow:0 12px 28px #162b411b; z-index:50; }
.language-menu[hidden] { display:none; }
.language-menu button { display:block; width:100%; padding:10px 12px; text-align:left; background:transparent; border:0; font:500 10px var(--mono); letter-spacing:.08em; color:var(--ink); cursor:pointer; }
.language-menu button:hover, .language-menu button[aria-current=true] { background:#eaf0f6; }
.menu-toggle { display:none; }
.hero { position:relative; height:660px; min-height:660px; background:radial-gradient(ellipse at 52% 54%, #fbfbf8 0%, #f8f8f5 52%, #f4f4f0 95%); overflow:hidden; border-bottom:1px solid var(--line); isolation:isolate; }
.hero::before { content:''; position:absolute; left:3.75%; top:0; bottom:0; width:1px; background:var(--line); z-index:3; }
.hero::after { content:''; position:absolute; right:3.75%; top:0; bottom:0; width:1px; background:var(--line); z-index:3; }
.hero-photo { position:absolute; top:190px; left:25%; width:76%; height:457px; z-index:0; pointer-events:none; }
.hero-photo img { display:block; width:100%; height:100%; object-fit:fill; }
/* Deconstructed photographic print: translucent echo, off-register fragment and soft silhouette. */
.art-echo { position:absolute; z-index:0; left:37%; top:236px; width:65%; height:425px; opacity:.13; transform:translate(11px,-8px); pointer-events:none; mix-blend-mode:multiply; }
.art-echo img { width:100%; height:100%; object-fit:fill; display:block; filter:grayscale(1) contrast(1.3) saturate(.55); }
.art-fragment { position:absolute; z-index:1; left:48%; top:93px; width:58%; height:545px; opacity:.74; mix-blend-mode:multiply; pointer-events:none; }
.art-fragment img { display:block; width:100%; height:100%; object-fit:fill; }

.paper-panel { position:absolute; pointer-events:none; z-index:1; }
.panel-one { top:169px; left:50.25%; height:407px; width:10%; background:linear-gradient(180deg,rgba(216,232,238,.06),rgba(172,198,213,.11)); mix-blend-mode:multiply; }
.panel-two { top:277px; right:6%; height:275px; width:14%; background:linear-gradient(180deg,rgba(224,235,237,.02),rgba(167,192,210,.095)); mix-blend-mode:multiply; }
.watermark-column { position:absolute; top:16px; bottom:0; left:50.3%; width:6%; background:linear-gradient(180deg,rgba(187,213,232,.25),rgba(188,215,224,.08) 75%,transparent); mix-blend-mode:multiply; opacity:.72; z-index:1; }
.technical-overlay { position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.hero-content { position:absolute; left:5.55%; top:108px; width:600px; max-width:57%; z-index:4; }
.hero-index { font:500 14px/1.3 var(--mono); letter-spacing:.33em; color:#74808b; white-space:nowrap; }
.index-line { display:inline-block; width:28px; height:1px; margin:0 12px 4px 8px; background:#a0aeb8; }
.hero h1 { font:400 clamp(76px,6.22vw,109px)/1 var(--display); letter-spacing:.185em; margin:25px 0 12px -.055em; white-space:nowrap; }
.coming { display:flex; align-items:center; gap:30px; margin:0; font:500 clamp(19px,1.45vw,24px)/1.3 var(--display); letter-spacing:.51em; }
.coming .year { letter-spacing:.45em; }
.hero-description { color:#717b84; font:400 clamp(23px,1.78vw,31px)/1.27 var(--body); letter-spacing:.025em; margin:31px 0 0; }
.hero-buttons { display:flex; align-items:center; gap:20px; margin-top:34px; }
.button { min-height:54px; min-width:192px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; font:600 10px/1 var(--mono); letter-spacing:.13em; transition:background-color .2s,color .2s; }
.button-solid { gap:20px; background:var(--ink); color:white; }
.button-solid:hover { background:#235b93; }
.button-arrow { font:400 27px/0 var(--display); transform:translateY(-1px); }
.button-outline { border:1px solid #8795a1; background:rgba(245,245,241,.62); color:#33475d; cursor:default; }
.coordinates { position:absolute; z-index:5; color:#3a4a58; font:500 10px var(--mono); letter-spacing:.18em; white-space:nowrap; }
.coordinates i,.map-coordinates i { display:inline-block; width:4px; height:4px; background:var(--ink); vertical-align:2px; margin-right:18px; }
.coordinate-north { top:61px; left:56.5%; }
.coordinate-east { right:5.2%; bottom:20px; }
.hero-margin-note { position:absolute; right:5.2%; top:84px; font:500 10px/2.25 var(--mono); letter-spacing:.18em; color:#6c7a86; z-index:5; }
.little-stroke { display:block; width:28px; height:1px; background:#70808c; margin-bottom:12px; }
.principles { position:relative; min-height:201px; padding:33px 5.75% 37px; background:#f5f5f1; border-bottom:1px solid var(--line); }
.principles::before { content:''; position:absolute; left:3.75%; height:100%; top:0; border-left:1px solid var(--line); }
.principle-grid { display:grid; grid-template-columns:repeat(4,1fr); max-width:1080px; position:relative; z-index:2; }
.principle { min-height:115px; padding:0 29px 0 0; border-right:1px solid var(--line); margin-right:40px; }
.principle:last-child { border-right:0; margin-right:0; }
.principle-index { display:flex; align-items:center; gap:15px; margin:0 0 13px; font:400 11px/1 var(--mono); letter-spacing:.13em; color:#839099; }
.number-line { width:100px; flex:1; border-top:1px solid #9daab2; transform:translateY(6px); }
.principle h2 { font:600 11px/1.5 var(--mono); letter-spacing:.20em; margin:0 0 8px; }
.principle p { color:#6c7781; font:400 13px/1.45 var(--body); letter-spacing:.07em; margin:0; }
.europe-graphic { position:absolute; width:240px; height:185px; right:7.3%; top:-23px; opacity:.86; }
.europe-graphic img { width:100%; height:100%; display:block; filter:grayscale(.5); }
.map-coordinates { position:absolute; top:-24px; right:-45px; color:#344757; font:500 10px var(--mono); letter-spacing:.17em; white-space:nowrap; }
.map-marker { position:absolute; height:95px; width:1px; background:#8ba5bc; left:86%; top:8%; }
.site-footer { display:flex; justify-content:space-between; gap:18px; padding:18px 5.75%; font:500 9px var(--mono); letter-spacing:.17em; color:#8b98a3; }
@media(min-width:1921px) { .hero { height:700px; } .hero-photo { height:480px; } }
@media(max-width:1280px) {
  .brand-group { gap:22px; } .brand-subtitle { font-size:9px; } .main-nav { gap:24px; }
  .header-actions { gap:25px; }
  .hero-content { max-width:65%; }
  .hero h1 { font-size:clamp(70px,7.2vw,96px); }
  .hero-photo { left:21%; width:80%; }
  .art-fragment { left:46%; }
  .hero-description { font-size:25px; }
  .principle-grid { max-width:calc(100% - 205px); }
  .principle { margin-right:20px; }
  .europe-graphic { right:1.5%; width:208px; }
}
@media(max-width:950px) {
  .topbar { height:72px; }
  .brand-subtitle { display:none; } .brand-divider { display:none; }
  .main-nav { gap:22px; }
  .main-nav a { font-size:9px; }
  .hero { height:660px; }
  .hero-content { top:107px; left:6%; }
  .hero h1 { font-size:clamp(62px,8vw,85px); }
  .hero-photo { left:17%; width:102%; opacity:.89; }
  .art-echo { left:24%; width:92%; opacity:.12; }
  .hero-description { font-size:25px; }
  .hero-index { font-size:11px; }
  .principle-grid { max-width:100%; }
  .europe-graphic { display:none; }
}
@media(min-width:701px) and (max-width:950px) {
  .hero-photo { top:280px; left:20%; width:99%; height:370px; opacity:.92; }
  .art-echo { top:307px; height:336px; }
  .art-fragment { top:275px; height:360px; }
  .hero-content { max-width:77%; }
  .hero-description { max-width:330px; position:relative; z-index:6; }
  .panel-one { top:285px; }
}
@media(max-width:700px) {
  .topbar { height:67px; padding:0 6%; }
  .brand { font-size:20px; letter-spacing:.20em; }
  .header-actions { margin-left:auto; gap:22px; }
  .header-divider { display:none; }
  .language-button { font-size:10px; gap:9px; }
  .menu-toggle { display:flex; flex-direction:column; justify-content:center; gap:6px; width:28px; height:36px; padding:0; border:0; background:none; cursor:pointer; }
  .menu-toggle span { width:23px; height:1px; background:var(--ink); display:block; transition:transform .2s; }
  .menu-toggle[aria-expanded=true] span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .main-nav { display:none; position:absolute; left:0; right:0; top:67px; background:#f6f6f2; padding:24px 6% 28px; border-bottom:1px solid var(--line); box-shadow:0 20px 28px #1c35521c; flex-direction:column; align-items:stretch; gap:21px; }
  .main-nav.open { display:flex; }
  .main-nav a { font-size:12px; }
  .hero { height:780px; min-height:780px; }
  .hero::before { left:6%; opacity:.7; } .hero::after { right:6%; opacity:.7; }
  .hero-photo { left:-33%; width:180%; height:437px; top:351px; opacity:.96; }
  .art-echo { left:-20%; width:160%; top:381px; height:415px; opacity:.12; }
  .art-fragment { left:11%; top:346px; width:156%; height:450px; opacity:.67; }
  .hero-photo img { object-fit:fill; }
  .paper-panel { opacity:.55; }
  .panel-one { top:345px; left:52%; width:28%; height:350px; }
  .panel-two { top:443px; height:260px; }
  .watermark-column { left:52%; top:332px; width:15%; }
  .technical-overlay { top:205px; height:570px; width:180%; left:-47%; opacity:.8; }
  .hero-content { top:85px; left:7%; right:7%; width:auto; max-width:none; }
  .hero-index { font-size:10px; letter-spacing:.18em; }
  .hero h1 { font-size:clamp(56px,12vw,80px); letter-spacing:.115em; margin-top:24px; }
  .coming { font-size:17px; gap:16px; letter-spacing:.33em; }
  .coming .year { letter-spacing:.25em; }
  .hero-description { font-size:clamp(20px,5.3vw,26px); margin-top:25px; line-height:1.32; letter-spacing:.02em; }
  .hero-buttons { margin-top:26px; gap:10px; }
  .button { min-height:47px; min-width:0; padding:0 15px; font-size:9px; letter-spacing:.08em; }
  .button-solid { gap:12px; }
  .button-outline { font-size:8px; }
  .coordinates,.hero-margin-note { display:none; }
  .principles { min-height:auto; padding:30px 7% 18px; }
  .principles::before { left:6%; }
  .principle-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px 16px; }
  .principle { min-height:115px; padding:0 7px 0 0; margin-right:0; }
  .principle:nth-child(2n) { border-right:0; padding-left:10px; }
  .number-line { width:55px; }
  .principle h2 { font-size:10px; }
  .principle p { font-size:12px; letter-spacing:.04em; }
  .site-footer { padding:17px 7% 24px; font-size:8px; }
}
@media(max-width:385px) {
  .hero h1 { font-size:52px; } .hero-index { font-size:9px; }
  .button { padding:0 11px; } .hero-buttons { gap:8px; }
  .button-arrow { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* Coordinates are present in the artistic photo layer; avoid a duplicate annotation. */
.coordinate-east{display:none}