/* Cristian Fatu — internal pages
   Same rules as the poster: no nav bar, no buttons, no footer, nothing decorative.
   Pages scroll, but one idea per screenful and the type stays large. */

:root{
  --paper:#EEEDEA;
  --ink:#16191C;
  --ink-2:#5A6167;
  --ink-3:#9AA0A5;
  --line:#DCDBD7;
  --accent:#1E4256;
  --accent-2:#3A7391;
  --wash:rgba(30,66,86,.78);
  --f:'Jost',-apple-system,'Helvetica Neue',sans-serif;
  --pad:clamp(20px,5vw,84px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--f);font-weight:300;
  line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---- the only two fixed things on any page ---- */
.top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;padding:clamp(18px,3vh,34px) var(--pad);
  pointer-events:none;mix-blend-mode:normal}
.top>*{pointer-events:auto}
.home{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);opacity:.75;transition:opacity .2s}
.home:hover{opacity:1}
.trigger{background:none;border:0;cursor:pointer;font-family:var(--f);font-weight:300;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;gap:10px}
.trigger i{display:block;width:22px;height:1px;background:var(--ink);position:relative}
.trigger i::before,.trigger i::after{content:"";position:absolute;left:0;width:22px;height:1px;background:var(--ink)}
.trigger i::before{top:-6px}.trigger i::after{top:6px}

.menu{position:fixed;inset:0;z-index:60;background:var(--accent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(6px,1.6vh,16px);opacity:0;pointer-events:none;transition:opacity .38s ease}
body.open .menu{opacity:1;pointer-events:auto}
body.open{overflow:hidden}
.menu a{font-weight:200;font-size:clamp(24px,4vw,54px);color:#DCE6EB;line-height:1.15;transition:opacity .2s}
.menu a:hover{opacity:.6}
.menu a.here{opacity:.42}
.close{position:absolute;top:clamp(18px,3vh,34px);right:var(--pad);background:none;border:0;cursor:pointer;
  color:#DCE6EB;font-family:var(--f);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:300}

/* ---- page furniture ---- */
.opening{min-height:46vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(104px,15vh,168px) var(--pad) clamp(34px,6vh,80px)}
.kicker{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-2);margin-bottom:clamp(18px,3vh,32px)}
h1{font-weight:200;font-size:clamp(38px,6.4vw,104px);line-height:1.02;letter-spacing:-.03em;max-width:17ch}
h1 em{font-style:normal;color:var(--accent)}
section{padding:0 var(--pad) clamp(48px,8vh,108px)}
.body{max-width:64ch;font-size:clamp(15.5px,1.15vw,18px);color:var(--ink)}
.body p+p{margin-top:1.05em}
.body em{font-style:italic}
.small{max-width:56ch;font-size:clamp(13.5px,.95vw,15px);color:var(--ink-2)}
.rule{height:1px;background:var(--line);margin:0 var(--pad) clamp(38px,7vh,86px)}
.label{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.pull{font-weight:200;font-size:clamp(24px,3.3vw,46px);line-height:1.18;letter-spacing:-.02em;
  max-width:20ch;color:var(--accent);margin:clamp(40px,7vh,90px) 0}
.cols{display:grid;grid-template-columns:minmax(0,64ch) minmax(0,26ch);gap:clamp(28px,5vw,90px);align-items:start}
.aside p{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.aside p+p{margin-top:1.1em}
.aside b{color:var(--ink);font-weight:400}
.link{border-bottom:1px solid var(--accent-2);padding-bottom:1px;color:var(--accent);transition:.2s}
.link:hover{border-bottom-color:var(--accent);color:var(--ink)}

/* photographs: grey until you look at them */
.shot{overflow:hidden;background:#E3E2DE}
.shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);
  transition:filter .6s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover) and (pointer:fine){
  .shot:hover img{filter:none;transform:scale(1.02)}
}
.shot.lit img{filter:none}

/* end line — not a footer, one sentence */
.end{padding:0 var(--pad) clamp(56px,10vh,120px);font-size:13px;color:var(--ink-3);letter-spacing:.02em}
.end a{border-bottom:1px solid var(--line)}

@media(max-width:860px){
  .cols{grid-template-columns:1fr;gap:34px}
  .opening{min-height:64vh;padding-top:26vh}
  h1{max-width:none}
}

/* ======================================================================
   graphic layer  v2 — no silhouette; the blue is an object, not a stripe
   ====================================================================== */

/* the page name, running up the left edge */
.side{position:fixed;left:clamp(8px,1.4vw,20px);top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-size:10px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--ink-3);z-index:25;pointer-events:none}

/* every page opens the same way: type on paper, a tall photograph off the right edge */
.open2{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;
  gap:clamp(20px,3vw,54px);padding:clamp(104px,15vh,168px) 0 clamp(34px,6vh,80px) var(--pad);position:relative}
.open2 .pic{height:clamp(330px,62vh,660px);margin-right:0}
.open2 .pic .shot{height:100%}
.open2 h1{max-width:none}
.opening>*,.open2>*{position:relative;z-index:1}

/* a colour block that overlaps a photograph, and the photograph runs
   taller than the block, so nothing lines up in a lazy row */
.duo{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;
  margin:clamp(30px,5vh,74px) 0}
.duo .fld{background:var(--wash);color:#EDF3F6;position:relative;z-index:2;backdrop-filter:saturate(.9);
  clip-path:polygon(7% 0, 100% 0, 93% 100%, 0 100%);padding-left:clamp(46px,6vw,96px);
  padding:clamp(46px,8vh,104px) clamp(30px,4.4vw,74px);
  margin-right:clamp(-90px,-6vw,-40px)}
.duo .pic{position:relative;overflow:hidden;align-self:stretch;
  margin:clamp(-58px,-7vh,-28px) 0}
.duo .pic .shot{height:100%;min-height:340px}
.duo .pull{color:#fff;margin:0;max-width:18ch}
.duo .label{color:rgba(237,243,246,.62)}
.duo .small{color:rgba(237,243,246,.86);max-width:44ch}
.duo a{color:#fff;border-bottom:1px solid rgba(237,243,246,.45)}

/* the same colour used small: a block sitting in the page, not across it */
.panel{background:var(--wash);color:#EDF3F6;position:relative;
  clip-path:polygon(5% 0, 100% 0, 95% 100%, 0 100%);
  width:min(780px,80%);margin:clamp(46px,8vh,110px) 0 clamp(46px,8vh,110px) auto;
  padding:clamp(40px,7vh,86px) clamp(28px,4.4vw,70px)}
.panel .pull{color:#fff;margin:0;max-width:18ch}
.panel .label{color:rgba(237,243,246,.62)}
.panel .small{color:rgba(237,243,246,.86);max-width:46ch}
.panel a{color:#fff;border-bottom:1px solid rgba(237,243,246,.45)}
.panel.left{margin-left:0;margin-right:auto;clip-path:polygon(0 0, 95% 0, 100% 100%, 5% 100%)}

/* images that break the margin */
.bleed{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}

/* the arc — Bucharest to Los Angeles, as a strip */
.arc{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:clamp(44px,8vh,96px) 0 0;
  border-top:1px solid var(--line)}
.arc div{padding:clamp(40px,5.5vh,68px) 18px clamp(16px,2.2vh,26px) clamp(20px,2vw,34px);border-right:1px solid var(--line)}
.arc div:first-child{padding-left:0}
.arc div:last-child{border-right:0}
.arc b{display:block;font-weight:300;font-size:clamp(14px,1.3vw,19px);letter-spacing:-.01em;line-height:1.25}
.arc span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:13px;line-height:1.4}

@media(max-width:860px){
  .duo{grid-template-columns:1fr;margin:64px 0}
  .duo .fld{margin-right:0;margin-top:-46px;width:92%;align-self:start}
  .duo .pic{margin:0;order:-1;height:46vh}
  .panel{width:auto;margin-left:0;margin-right:0}
  .side{display:none}
  .open2{grid-template-columns:1fr;padding-top:24vh}
  .open2 .pic{height:52vh;margin-right:0}
  .arc{grid-template-columns:1fr 1fr}
  .arc div{border-bottom:1px solid var(--line);padding-bottom:14px}
}

/* ======================================================================
   two things to try, live: how the pictures are framed, and whether
   the blue survives. Controls bottom left.
   ====================================================================== */

/* ---- FRAME ---- */
/* soft: the photograph dissolves into the paper, so there is no box at all */
body[data-frame="soft"] .shot{background:none}
body[data-frame="soft"] .shot img{
  -webkit-mask-image:radial-gradient(118% 118% at 50% 50%,#000 50%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(118% 118% at 50% 50%,#000 50%,rgba(0,0,0,0) 100%)}

/* bleed: the picture runs off the edges of the screen, so you never see it whole */
body[data-frame="bleed"] .open2{padding-right:0}
body[data-frame="bleed"] .open2 .pic{margin-right:-7vw;height:86vh}
body[data-frame="bleed"] .duo .pic{margin-right:-7vw}
body[data-frame="bleed"] .duo .fld{margin-left:calc(var(--pad) * -1);padding-left:calc(var(--pad) + 10px)}
body[data-frame="bleed"] .grid .full,body[data-frame="bleed"] .grid .wide{margin-left:-7vw;margin-right:-7vw}

/* slant: the pictures take the same cut as the monogram */
/* slant: exactly the cut the blue blocks use */
body[data-frame="slant"] .open2 .pic .shot,
body[data-frame="slant"] .duo .pic .shot,
body[data-frame="slant"] .grid .shot{clip-path:polygon(7% 0, 100% 0, 93% 100%, 0 100%)}


/* ---- COLOUR ---- */
/* mono: no colour fields anywhere. Paper, photographs, black type. */
body[data-col="mono"] .duo .fld{background:none;color:var(--ink);margin-right:clamp(-70px,-4vw,-30px);
  padding:0 clamp(24px,3.4vw,54px) 0 0}
body[data-col="mono"] .duo .pull,body[data-col="mono"] .panel .pull{color:var(--ink)}
body[data-col="mono"] .duo .label,body[data-col="mono"] .duo .small,
body[data-col="mono"] .panel .label,body[data-col="mono"] .panel .small{color:var(--ink-2)}
body[data-col="mono"] .duo a,body[data-col="mono"] .panel a{color:var(--ink);border-bottom-color:var(--line)}
body[data-col="mono"] .panel{background:none;color:var(--ink);padding:0;width:min(680px,84%);
  border-top:1px solid var(--line);padding-top:clamp(26px,4vh,44px)}
body[data-col="mono"] .kicker{color:var(--ink-3)}
body[data-col="mono"] h1 em{color:var(--ink)}
body[data-col="mono"] .link{color:var(--ink);border-bottom-color:var(--ink-3)}
body[data-col="mono"] .menu{background:var(--ink)}

/* the controls — mockup furniture, not part of the design */
.ctl{position:fixed;left:clamp(10px,1.4vw,20px);bottom:clamp(10px,1.6vh,18px);z-index:70;
  background:rgba(255,255,255,.92);border:1px solid var(--line);padding:7px 9px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;display:grid;gap:4px}
.ctl div{display:flex;align-items:center;gap:5px}
.ctl b{color:var(--ink-3);font-weight:300;width:52px}
.ctl button{font:inherit;letter-spacing:.14em;text-transform:uppercase;border:0;background:none;
  color:var(--ink-2);cursor:pointer;padding:4px 7px;border-radius:2px}
.ctl button:hover{color:var(--ink)}
.ctl button.on{background:var(--accent);color:#fff}
body[data-col="mono"] .ctl button.on{background:var(--ink)}
@media(max-width:860px){.ctl{left:8px;right:8px}}

/* ---- monogram 11, "the slant" — placeholder mark until Cristian decides ---- */
.home{display:flex;align-items:center;gap:11px}
.mark{display:block;width:47px;height:32px;flex:0 0 auto;color:currentColor}
.menu .mark{width:70px;height:48px;color:#DCE6EB;margin-bottom:clamp(14px,3vh,30px)}
body[data-col="mono"] .menu .mark{color:#E7E6E2}

/* ---- the menu, always visible, inside a rectangle ---- */
.top{padding:clamp(12px,2vh,22px) clamp(12px,2.4vw,30px)}
.bar{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:clamp(14px,3vw,40px);
  border:1px solid var(--line);background:rgba(238,237,234,.93);backdrop-filter:blur(8px);
  padding:9px 12px 9px 14px;pointer-events:auto}
.navlinks{display:flex;gap:clamp(12px,1.9vw,32px);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.navlinks a{color:var(--ink-2);padding-bottom:2px;border-bottom:1px solid transparent;transition:.2s}
.navlinks a:hover{color:var(--ink);border-bottom-color:var(--ink-3)}
.navlinks a.here{color:var(--ink);border-bottom-color:var(--ink)}
.bar .trigger{display:none}
@media(max-width:900px){
  .navlinks{display:none}
  .bar .trigger{display:flex}
  .home span{display:none}
}
body[data-col="mono"] .bar{background:rgba(238,237,234,.95)}